/* -------------------- BODY -------------------- */
body {
  font-family: 'Oswald', sans-serif;
  color: #ffffff;
  text-align: center;
  margin: 0;
  min-height: 100vh;
  font-weight: 400;

  background-color: #020617;
}
#background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* STAR SKY */
  background-image: /* Orange glow */ 
  radial-gradient(circle 500px at 50% 100px, rgba(31, 29, 28, 0.25), transparent),
  radial-gradient(circle 500px at 50% 100px, rgba(249,115,22,0.5), transparent),

  /* Bright white stars (doubled & shuffled) */
  radial-gradient(4px 4px at 8% 12%, rgba(255,255,255,0.9), transparent),
  radial-gradient(3px 3px at 21% 37%, rgba(255,255,255,0.8), transparent),
  radial-gradient(4px 4px at 37% 55%, rgba(255,255,255,0.85), transparent),
  radial-gradient(3px 3px at 50% 26%, rgba(255,255,255,0.75), transparent),
  radial-gradient(4px 4px at 62% 70%, rgba(255,255,255,0.9), transparent),
  radial-gradient(3px 3px at 74% 14%, rgba(255,255,255,0.7), transparent),
  radial-gradient(4px 4px at 19% 48%, rgba(255,255,255,0.85), transparent),
  radial-gradient(3px 3px at 41% 82%, rgba(255,255,255,0.8), transparent),
  radial-gradient(4px 4px at 56% 33%, rgba(255,255,255,0.9), transparent),
  radial-gradient(3px 3px at 88% 18%, rgba(255,255,255,0.7), transparent),
  radial-gradient(4px 4px at 12% 63%, rgba(255,255,255,0.9), transparent),
  radial-gradient(4px 4px at 29% 7%, rgba(255,255,255,0.8), transparent),
  radial-gradient(3px 3px at 43% 40%, rgba(255,255,255,0.7), transparent),
  radial-gradient(4px 4px at 71% 22%, rgba(255,255,255,0.85), transparent),
  radial-gradient(3px 3px at 85% 61%, rgba(255,255,255,0.75), transparent),

  /* Duplicates of bright stars */
  radial-gradient(4px 4px at 5% 45%, rgba(255,255,255,0.9), transparent),
  radial-gradient(3px 3px at 18% 11%, rgba(255,255,255,0.8), transparent),
  radial-gradient(4px 4px at 33% 77%, rgba(255,255,255,0.85), transparent),
  radial-gradient(3px 3px at 47% 28%, rgba(255,255,255,0.75), transparent),
  radial-gradient(4px 4px at 65% 52%, rgba(255,255,255,0.9), transparent),
  radial-gradient(3px 3px at 80% 39%, rgba(255,255,255,0.7), transparent),
  radial-gradient(4px 4px at 21% 6%, rgba(255,255,255,0.85), transparent),
  radial-gradient(3px 3px at 53% 83%, rgba(255,255,255,0.8), transparent),
  radial-gradient(4px 4px at 69% 20%, rgba(255,255,255,0.9), transparent),
  radial-gradient(3px 3px at 90% 56%, rgba(255,255,255,0.7), transparent),
  radial-gradient(4px 4px at 14% 74%, rgba(255,255,255,0.9), transparent),
  radial-gradient(4px 4px at 27% 3%, rgba(255,255,255,0.8), transparent),
  radial-gradient(3px 3px at 49% 31%, rgba(255,255,255,0.7), transparent),
  radial-gradient(4px 4px at 72% 12%, rgba(255,255,255,0.85), transparent),
  radial-gradient(3px 3px at 86% 41%, rgba(255,255,255,0.75), transparent),

  /* Dim white stars (doubled & shuffled) */
  radial-gradient(2px 2px at 7% 25%, rgba(255,255,255,0.25), transparent),
  radial-gradient(2px 2px at 33% 61%, rgba(255,255,255,0.2), transparent),
  radial-gradient(2px 2px at 49% 12%, rgba(255,255,255,0.3), transparent),
  radial-gradient(2px 2px at 63% 77%, rgba(255,255,255,0.25), transparent),
  radial-gradient(2px 2px at 80% 43%, rgba(255,255,255,0.2), transparent),
  radial-gradient(2px 2px at 91% 18%, rgba(255,255,255,0.3), transparent),
  radial-gradient(2px 2px at 15% 84%, rgba(255,255,255,0.25), transparent),
  radial-gradient(2px 2px at 37% 29%, rgba(255,255,255,0.2), transparent),
  radial-gradient(2px 2px at 58% 56%, rgba(255,255,255,0.3), transparent),
  radial-gradient(2px 2px at 74% 7%, rgba(255,255,255,0.25), transparent),

  /* Duplicates of dim white stars */
  radial-gradient(2px 2px at 11% 38%, rgba(255,255,255,0.25), transparent),
  radial-gradient(2px 2px at 29% 9%, rgba(255,255,255,0.2), transparent),
  radial-gradient(2px 2px at 45% 64%, rgba(255,255,255,0.3), transparent),
  radial-gradient(2px 2px at 61% 21%, rgba(255,255,255,0.25), transparent),
  radial-gradient(2px 2px at 78% 90%, rgba(255,255,255,0.2), transparent),
  radial-gradient(2px 2px at 87% 33%, rgba(255,255,255,0.3), transparent),
  radial-gradient(2px 2px at 14% 55%, rgba(255,255,255,0.25), transparent),
  radial-gradient(2px 2px at 39% 2%, rgba(255,255,255,0.2), transparent),
  radial-gradient(2px 2px at 54% 41%, rgba(255,255,255,0.3), transparent),
  radial-gradient(2px 2px at 69% 78%, rgba(255,255,255,0.25), transparent),

  /* Yellow stars (doubled & shuffled) */
  radial-gradient(2px 2px at 13% 8%, rgba(255,215,0,0.6), transparent),
  radial-gradient(2px 2px at 42% 52%, rgba(255,220,0,0.55), transparent),
  radial-gradient(2px 2px at 58% 19%, rgba(255,225,0,0.5), transparent),
  radial-gradient(2px 2px at 75% 86%, rgba(255,230,0,0.55), transparent),
  radial-gradient(2px 2px at 29% 39%, rgba(255,235,0,0.6), transparent),
  radial-gradient(2px 2px at 81% 33%, rgba(255,240,0,0.55), transparent),

  /* Duplicates of yellow stars */
  radial-gradient(2px 2px at 6% 47%, rgba(255,215,0,0.6), transparent),
  radial-gradient(2px 2px at 37% 11%, rgba(255,220,0,0.55), transparent),
  radial-gradient(2px 2px at 62% 66%, rgba(255,225,0,0.5), transparent),
  radial-gradient(2px 2px at 77% 28%, rgba(255,230,0,0.55), transparent),
  radial-gradient(2px 2px at 24% 73%, rgba(255,235,0,0.6), transparent),
  radial-gradient(2px 2px at 88% 4%, rgba(255,240,0,0.55), transparent),

  /* Black stars (doubled & shuffled) */
  radial-gradient(3px 3px at 7% 23%, rgba(0,0,0,0.5), transparent),
  radial-gradient(3px 3px at 65% 7%, rgba(0,0,0,0.45), transparent),
  radial-gradient(3px 3px at 47% 71%, rgba(0,0,0,0.4), transparent),
  radial-gradient(3px 3px at 84% 53%, rgba(0,0,0,0.5), transparent),
  radial-gradient(3px 3px at 27% 31%, rgba(0,0,0,0.45), transparent),
  radial-gradient(3px 3px at 51% 89%, rgba(0,0,0,0.4), transparent),
  radial-gradient(3px 3px at 18% 67%, rgba(0,0,0,0.5), transparent),

  /* Duplicates of black stars */
  radial-gradient(3px 3px at 12% 41%, rgba(0,0,0,0.5), transparent),
  radial-gradient(3px 3px at 71% 23%, rgba(0,0,0,0.45), transparent),
  radial-gradient(3px 3px at 44% 82%, rgba(0,0,0,0.4), transparent),
  radial-gradient(3px 3px at 87% 59%, rgba(0,0,0,0.5), transparent),
  radial-gradient(3px 3px at 33% 38%, rgba(0,0,0,0.45), transparent),
  radial-gradient(3px 3px at 54% 94%, rgba(0,0,0,0.4), transparent),
  radial-gradient(3px 3px at 22% 73%, rgba(0,0,0,0.5), transparent),

  /* Extra stars (bottom-right quadrant) */
  radial-gradient(3px 3px at 55% 66%, rgba(255,255,255,0.75), transparent),
  radial-gradient(2px 2px at 68% 83%, rgba(255,255,255,0.6), transparent),
  radial-gradient(4px 4px at 77% 92%, rgba(255,255,255,0.85), transparent),
  radial-gradient(3px 3px at 85% 71%, rgba(255,255,255,0.7), transparent),
  radial-gradient(2px 2px at 93% 88%, rgba(255,255,255,0.5), transparent),
  radial-gradient(3px 3px at 43% 51%, rgba(0,0,0,0.45), transparent),
  radial-gradient(3px 3px at 94% 2%, rgba(0,0,0,0.45), transparent),
  radial-gradient(2px 2px at 64% 99%, rgba(255,255,255,0.2), transparent),
  radial-gradient(3px 3px at 67% 25%, rgba(255,255,255,0.7), transparent),
  radial-gradient(2px 2px at 40% 1%, rgba(255,255,255,0.3), transparent),
  radial-gradient(2px 2px at 67% 9%, rgba(255,255,255,0.25), transparent),
  radial-gradient(4px 4px at 30% 15%, rgba(255,255,255,0.85), transparent),
  radial-gradient(3px 3px at 31% 57%, rgba(255,255,255,0.75), transparent),
  radial-gradient(3px 3px at 8% 68%, rgba(0,0,0,0.45), transparent),
  radial-gradient(3px 3px at 90% 65%, rgba(0,0,0,0.4), transparent),
  radial-gradient(3px 3px at 8% 90%, rgba(255,255,255,0.8), transparent),
  radial-gradient(2px 2px at 12% 85%, rgba(255,255,255,0.6), transparent),
  radial-gradient(4px 4px at 90% 30%, rgba(255,255,255,0.85), transparent),
  radial-gradient(3px 3px at 95% 70%, rgba(255,255,255,0.75), transparent),
  radial-gradient(2px 2px at 88% 50%, rgba(255,255,255,0.6), transparent),
  radial-gradient(3px 3px at 98% 23%, rgba(255,255,255,0.8), transparent),
  radial-gradient(2px 2px at 97% 50%, rgba(255,235,0,0.6), transparent);


  will-change: transform;
}


/* -------------------- SHOOTING STARS -------------------- */
.shooting-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.shooting-star {
  position: absolute;
  width: 30vw; /* changed from 120px for scaling */
  max-width: 120px;
  height: 2px;
  background: linear-gradient(
  90deg,
  transparent,
  rgba(255,255,255,0.4),
  rgba(255,255,255,1)
);
  opacity: 0;
  animation: shoot 8s linear infinite;
}

.shooting-star:nth-child(1) { top: 10%; left: -20%; transform: rotate(25deg); animation-delay: 0s; }
.shooting-star:nth-child(2) { top: 30%; left: -30%; transform: rotate(35deg); animation-delay: 2s; }
.shooting-star:nth-child(3) { top: 50%; left: -25%; transform: rotate(20deg); animation-delay: 4s; }
.shooting-star:nth-child(4) { top: 15%; left: -40%; transform: rotate(40deg); animation-delay: 6s; }
.shooting-star:nth-child(5) { top: 65%; left: -35%; transform: rotate(28deg); animation-delay: 8s; }

@keyframes shoot {
  0% { transform: translate(0, 0) rotate(var(--angle, 30deg)); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(160vw, 120vh) rotate(var(--angle, 30deg)); opacity: 0; }
}

/* -------------------- GAME BOX -------------------- */
h1 {
  position: relative; 
  z-index: 1;        /* higher than background */
}

#game {
  position: relative;
  z-index: 1;
  width: min(360px, 90%);
  min-height: 20em;
  max-height: 90vh; /* ensures it fits vertically on small screens */
  margin: auto;
  padding: 0.5em 1.5em 2em 1.5em; /* top right bottom left */
  background: rgba(10, 10, 20, 0.55);
  border-radius: 15px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  transition: transform 0.2s ease;

}

#game:hover {
  transform: scale(1.02);
}

/* -------------------- TEXT SIZES -------------------- */
#game p {
  font-size: 1.25rem;
  margin: 0.5em 0;
}

#category-label {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0;
  min-height: 1.5em; /* added */
  
}

#category-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0.25em 0;
  min-height: 1.8em; /* added */
  color: #ffcc00;
}

#category-instruction {
  font-size: 1.2rem;
  margin: 0.25em 0 1em 0;
  min-height: 1.5em; /* added */
  
}

#score {
  font-size: 1.5rem;
  font-weight: bold;
  min-height: 1.5em; /* added */
  color: #ffcc00;
  display: inline-block;
}

#timer {
  font-size: 1.5rem;
  font-weight: bold;
  color: #00ccff;
  min-height: 1.5em;
  margin: 0.25em 0;
  display: inline-block;
  width: 2ch;
  text-align: right;
}

.timer-warning {
  color: #ff4d4d !important;
}
#message{
   min-height: 1.5em;
}

#wrongMessage {
  font-size: 1.4rem;
  color: #ff4d4d;
  min-height: 1.8em;
  margin: 0.25em 0;
}

#restartHint {
  font-size: 1.35rem;
  display: none;
  margin-top: 0.5em;
}
.space-key {
  color: #ffcc00; /* yellow */
  font-weight: 700;
}
#chain {
  min-height: 2em; /* reserve space for the word chain */
}

#chain span.good {
  color: #4caf50;
  font-weight: 600;
  padding: 0.2em 0.4em;
  border-radius: 12px;
  margin: 0.1em;
  font-size: 1.15rem;
}

#chain span.bad {
  color: #f44336;
  font-weight: 700;
  padding: 0.2em 0.4em;
  border-radius: 12px;
  margin: 0.1em;
  font-size: 1.15rem;
}

/* -------------------- INPUT -------------------- */
input {
  padding: 0.625em;
  width: 100%;
  max-width: 250px;
  border-radius: 5px;
  border: none;
  font-size: 1.25rem;
  outline: none;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
  margin: 0.5em 0;
}

input::placeholder {
  font-size: 1rem;
  font-family: 'Oswald', sans-serif;
}

input:focus {
  border: 2px solid #00ccff;
  box-shadow: 0 0 0.5em #00ccff;
}

input.wrong {
  border: 2px solid #f44336;
  box-shadow: 0 0 0.5em #f44336;
}

.label-text {
  font-size: 0.85rem;
  color: #ccc;
}

#words-remaining-number {
  font-size: 0.85rem;
  display: inline-block;
  width: 1ch;
  text-align: right;
}




/* -------------------- BUTTONS -------------------- */
button {
  padding: 0.625em 0.875em;
  border: none;
  border-radius: 5px;
  font-size: 1.25rem;
  cursor: pointer;
}

#restartBtn {
  display: none;
  background: #00ccff;
  color: #121212;
  font-weight: bold;
}

/* -------------------- HOW TO PLAY BUTTON -------------------- */
#howToPlayBtn {
  padding: 0.35em 0.6em;  /* smaller size */
  font-size: 0.8rem;
  border: none;
  border-radius: 5px;
  background-color: #00ccff;
  color: #121212;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease;
  
  margin-bottom: 0.5em;


}

#howToPlayBtn:hover {
  transform: scale(1.05);
  background-color: #00a8cc;
}
#howToPlayBtn.hidden {
  opacity: 0;
  pointer-events: none;
}



/* -------------------- MODAL -------------------- */
.modal {
  display: none; /* hidden by default */
  position: fixed;
  z-index: 10; /* above game box */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.7);
  backdrop-filter: blur(2px);
}

.modal-content {
  background-color: rgba(10,10,20,0.95);
  margin: 10% auto;
  padding: 1.5em;
  border-radius: 10px;
  width: 90%;
  max-width: 360px;
  box-sizing: border-box;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  position: relative;
}

.modal-content h2 {
  margin-top: 0;
  color: #ffcc00;
  font-size: 1.3rem;
}

.modal-content p {
  font-size: 1rem;
  margin: 0.5em 0;
}

/* Close button */
.modal .close {
  position: absolute;
  top: 0.5em;
  right: 0.7em;
  color: #ff4d4d;
  font-size: 1.3rem;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal .close:hover {
  color: #ff0000;
}
#game-footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: #555;
}

#game-footer a {
  color: #00ccff; 
  text-decoration: none;
}

#game-footer a:hover {
  text-decoration: underline;
}


/* -------------------- SHAKE -------------------- */
.shake {
  display: inline-block;
  animation: shake 0.3s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* -------------------- SCORE POP -------------------- */
.score-pop {
  animation: scorePop 0.25s ease-out;
}

@keyframes scorePop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
/* -------------------- SCORE LABEL FLASH -------------------- */
.score-label-flash {
  animation: labelFlash 0.35s ease-out;
}

@keyframes labelFlash {
  0% {
    color: #ffffff;
    text-shadow: none;
  }
  40% {
    color: #ffcc00;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
  }
  100% {
    color: #ffffff;
    text-shadow: none;
  }
}

/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 480px) {
  #game {
    width: 95%;           /* instead of using min(360px, 90%) */
    padding: 1.5em 1em;
  }

  input, button {
    font-size: 1.1rem;
    max-width: 100%;
    display: block;
    margin: 0.5em auto 0 auto;
  }


  #timer {
    font-size: 1.3rem;
  }

  #message, #wrongMessage, #restartHint {
    font-size: 1.15rem;
  }
}

@media (max-width: 360px) {
  #game {
    width: 100%;         /* fill the screen almost entirely */
    padding: 1em 0.8em;  /* reduce padding to fit small width */
  }
}