body {
  /* font-family: 'Arial', sans-serif; */
  font-family: 'Anek Devanagari', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;
}

/* List page styles */

header {
  display: none;
  /* display: flex; */
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: #fff;
}

header .logo {
  font-size: 1.5em;
}

header nav ul {
  list-style: none;
  display: flex;
  gap: 15px;
}

header nav ul li a {
  color: #fff;
  text-decoration: none;
}

.hero {
  text-align: center;
  padding: 10px;
  /* background: url('hero-bg.jpg') no-repeat center center/cover; */
  color: #fff;
}

.hero button {
  font-family: Khand, sans-serif;
  font-size: 1.2em;
  padding: 10px 20px;
  border: 1px solid #333;
  border-radius: 4px;
  background-color: #333;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.puzzle-gallery {
  padding: 20px;
}

.puzzle-gallery h2 {
  text-align: center;
  margin-bottom: 20px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.grid-container .puzzle {
  padding: 10px;
  text-align: center;
}

.grid-container .puzzle img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.pagination button {
  font-family: Khand, sans-serif;
  padding: 10px 20px;
  margin: 0 5px;
  border: 1px solid #333;
  border-radius: 4px;
  background-color: #333;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pagination button:hover {
  background-color: #555;
}

.pagination-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

footer {
  display: none;
  background-color: #333;
  color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

footer .social-links a {
  color: #fff;
  margin-right: 10px;
  text-decoration: none;
}

footer .legal-info {
  text-align: right;
}

/* Puzzle page styles */

.game-container {
  max-width: 600px;
  margin: auto;
  background: white;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1 {
  font-size: 2em;
  text-align: center;
  color: #E91E63;
  margin: .6em 0 .4em;
  line-height: 1em;
}

h2 {
  font-family: Khand, sans-serif;
  text-align: center;
  color: #607D8B;
  margin: .2em 0 .5em;
}

h3 {
  font-family: Khand, sans-serif;
  text-align: center;
  margin: 0;
}

a {
  color: #E91E63;
}

p {
  font-size: .9em;
}

p.disclaimer {
  font-size: .8em;
  color: #777;
  text-align: center;
  margin: 0;
}

p.puzzle-number {
  font-size: 1em;
  font-weight: bold;
  color: #E91E63;
  text-align: center;
  margin: 0;
}

.word-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.word-button {
  font-family: 'Anek Devanagari', sans-serif;
  font-size: 1.4em;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  text-align: center;
}

.word-button.selected {
  background-color: #e0e0e0;
}

.word-button.frozen {
  background-color: gray;
  color: white;
  cursor: not-allowed;
}

.controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px
}

.controls button {
  font-family: Khand, sans-serif;
  font-size: 1.2em;
  padding: 10px 20px;
  border: 1px solid #333;
  border-radius: 4px;
  background-color: #333;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.controls button#submit {
  background-color: #d01a58;
  color: white;
}

.controls button#submit:hover {
  background-color: white;
  color: #d01a58;
  border: 1px solid #d01a58;
}

.controls button:hover {
  background-color: #555;
}

.controls button:disabled, .controls button#submit:disabled {
  background-color: #999;
  border: 1px solid #999;
  color: white;
  cursor: not-allowed;
}

.status p {
  text-align: center;
  color: #333;
  font-size: 1.2em;
  font-weight: bold;
}

.status span {
  color: #28a745;
}

.group-number {
  font-size: 1.2em;
  color: #333;
  padding: 5px;
  height: 20px;
  width: 45px;
  border-radius: 3px;
  text-align: center;
  font-weight: bold;
  /* box-shadow: 0 0 5px #9ecaed; */
}

.word-button.group-1, .group-number.group-1, .group-row-1 {
  /* background-color: #b7cfe7; */
  background-color: #00808080;
}

.word-button.group-2, .group-number.group-2, .group-row-2 {
  /* background-color: #cfcfcd; */
  background-color: #d9a402c7;
}

.word-button.group-3, .group-number.group-3, .group-row-3 {
  /* background-color: #c1dcd0; */
  background-color: #475f7780;
}

.word-button.group-4, .group-number.group-4, .group-row-4 {
  /* background-color: #eecbcb; */
  background-color: #ff6b6b80;
}

.check-mark {
  color: green;
}

.cross-mark {
  color: red;
}

/* Add keyframes for the shake animation */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

/* Shake animation class */
.shake {
  animation: shake 0.2s ease-in-out 1;
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fade out */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.fade-in {
  animation: fadeIn 2s ease-in-out forwards;
}

.fade-out {
  animation: fadeOut 2s ease-in-out forwards;
}

/* Flash effect combining fade out and fade in */
@keyframes flashEffect {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.flash {
  animation: flashEffect 2s ease-in-out;
}


.word-button.glowing {
  box-shadow: 0 0 10px #9ecaed; /* Adjust the color and size to fit your design */
}

#status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#quiz-id {
  font-size: 1.2em;
  color: #777;
  font-family: 'Anek Devanagari';
}

#group-number {
  font-size: 1em;
  color: #333;
}

#author {
  font-family: 'Anek Devanagari', Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: #777;
  text-align: center;
}

 /* Answer Screen styles */

.answer-screen {
  display: none; /* initially hidden */
  width: 100%;
  max-width: 600px; /* Match the max-width of the game container */
  margin: 10px auto 0; /* Center the div */
  padding: 20px 20px 10px;
  text-align: center;
  /* transition: transform 0.1s ease-in-out;  */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background-color: white;
}

.group-row {
  padding: 10px;
  margin-bottom: 10px;
  color: black;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transition: background-color 0.5s ease-in-out;
}

.group-title {
  font-weight: bold;
}

.group-words {
  text-align: center;
}

.footer {
  text-align: center;
  margin-top: 20px;
  color: #777;
  font-size: 0.8em;
}

.share-button {
  font-size: .8em;
  margin: 10px;
  padding: 6px 12px;
  border: 1px solid #333;
  border-radius: 4px;
  background-color: #333;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.next-quiz-text {
  color: #607D8B;
  margin-bottom: 0;
}

.notification {
  position: absolute;
  top: 20%; /* Adjust as necessary for positioning */
  left: 50%;
  min-width: 7em;
  transform: translate(-50%, -50%);
  padding: 12px;
  border-radius: 4px;
  box-shadow: 0 0 10px #9ecaed;
  font-size: 1.2em;
  color: #fff;
  text-align: center;
  display: none;
  z-index: 1000; /* Ensure it's above other content */
  transition: opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
}


.notification.show {
  display: block;
  opacity: 1;
  visibility: visible;
}

.mistake-indicator {
  width: 18px; /* Adjust size as needed */
  margin: 0 5px; /* Adjust spacing as needed */
  vertical-align: middle;
}

.info-icon {
  height: 20px;
  cursor: pointer;
}

/* Modal Styles *
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */

/* Add this to your existing CSS */
.modal-content-data {
  display: none; /* Hide the content initially */
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 560px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* The Close Button */
.close-modal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Game mode toggle switch */

.toggle-switch {
  /* display: flex; */
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.toggle {
  display: inline-block;
  width: 60px;
  height: 32px;
  position: relative;
  border-radius: 34px;
  background-color: #66bb6a;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  top: 4px;
  left: 4px;
  transition: transform 0.3s;
}

.toggle.on {
  background-color: #be1736;
}

.toggle.on::before {
  transform: translateX(28px);
}

.toggle-switch.disabled .toggle {
  background-color: #ccc; /* Example: a gray color to indicate it's disabled */
  pointer-events: none; /* Prevents click events */
  cursor: default;
}


.label-text {
  font-weight: bold;
  color: #999;
}

.results-text {
  border-radius: 8px;
  background-color: #9e9e9e1f;
  padding: 1px;
}

.results-text .quiz-number {
  font-size: 1.2em;
  font-weight: bold;
  color: #E91E63;
}

.results-text p {
  line-height: 1.4em;
}

.unclickable {
  pointer-events: none;
}

/* Media Styles */

@media screen and (max-width: 600px) {
  /* .word-grid {
    grid-template-columns: repeat(2, 1fr);
  } */

  .word-button {
    font-size: 1em;
    padding: 8px 6px;
    color: black;
  }

  .controls button {
    font-size: 1em;
    padding: 8px 12px;
  }

  .status p {
    font-size: 1em;
  }

  #author {
    font-size: 0.8em;
  }

  .answer-screen {
    padding: 10px;
    width: 95%;
  }

  .grid-container {
    grid-template-columns: 1fr;
  }

  .puzzle-gallery {
    padding: 0;
  }
  
}