/* Fill the whole window with a dark background and no scrollbars. */
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #05040a;
  /* Toddler-proofing: no pinch-zoom, double-tap zoom, pull-to-refresh,
     text selection, long-press callouts or grey tap flashes. */
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* The canvas covers the whole window. board.js sets its exact pixel size. */
#board {
  display: block;
  width: 100vw;
  height: 100vh;
}

/* ---------- The word that was heard ---------- */

#word {
  position: fixed;
  top: 3vmin;
  left: 0;
  right: 0;
  padding: 0 4vmin;
  text-align: center;
  font-family: 'Arial Rounded MT Bold', ui-rounded, system-ui, sans-serif;
  font-size: max(36px, 8vmin);
  color: #fff;
  /* Layered shadows make the letters glow like the dots. */
  text-shadow: 0 0 0.15em #c3a6ff, 0 0 0.5em #9a4dff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none; /* clicks go straight through it */
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s, transform 0.4s;
}

#word.visible {
  opacity: 1;
  transform: scale(1);
}

/* ---------- The microphone button ---------- */

#mic {
  position: fixed;
  bottom: 2.5vmin;
  left: 50%;
  transform: translateX(-50%);
  width: max(72px, 12vmin);
  height: max(72px, 12vmin);
  border-radius: 50%;
  border: 2px solid rgba(195, 166, 255, 0.6);
  background: radial-gradient(circle at 50% 35%, #3a2a6e, #1a1238);
  box-shadow: 0 0 2vmin rgba(154, 77, 255, 0.5);
  cursor: pointer;
  padding: 0;
  transition: box-shadow 0.3s, border-color 0.3s, opacity 0.3s;
}

#mic svg {
  width: 50%;
  height: 50%;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
}

#mic svg rect {
  fill: #fff;
}

#mic:hover {
  border-color: #fff;
}

/* While listening, the button pulses with a pink glow. */
#mic.listening {
  border-color: #ff8fb8;
  animation: pulse 1.2s ease-in-out infinite;
}

/* A CSS animation: smoothly loops between these two states. */
@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 2vmin rgba(255, 79, 216, 0.5);
    transform: translateX(-50%) scale(1);
  }
  50% {
    box-shadow: 0 0 6vmin rgba(255, 79, 216, 0.9);
    transform: translateX(-50%) scale(1.08);
  }
}

/* ---------- Credits (small and faint, bottom-left) ---------- */

#credits {
  position: fixed;
  left: 10px;
  bottom: 8px;
  font: 11px system-ui, sans-serif;
  color: #fff;
  max-width: calc(50% - 70px); /* wrap before reaching the mic button */
  opacity: 0.25;
  pointer-events: none;
}

/* ---------- The story mode button (same size as the mic, to its right) ---------- */

#story {
  --mic-size: max(72px, 12vmin);
  position: fixed;
  left: calc(50% + var(--mic-size) / 2 + 3vmin);
  bottom: 2.5vmin; /* same as the mic */
  width: var(--mic-size);
  height: var(--mic-size);
  border-radius: 50%;
  border: 2px solid rgba(195, 166, 255, 0.35);
  background: radial-gradient(circle at 50% 35%, #2a2050, #140e2c);
  cursor: pointer;
  padding: 0;
  opacity: 0.75;
  transition: opacity 0.3s, border-color 0.3s, box-shadow 0.3s;
}

#story svg {
  width: 50%;
  height: 50%;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

#story:hover {
  opacity: 1;
}

/* While story mode is on, the button glows gold and gently breathes. */
#story.on {
  opacity: 1;
  border-color: #ffd966;
  animation: story-glow 2.4s ease-in-out infinite;
}

@keyframes story-glow {
  0%,
  100% {
    box-shadow: 0 0 1.5vmin rgba(255, 217, 102, 0.4);
  }
  50% {
    box-shadow: 0 0 4vmin rgba(255, 217, 102, 0.8);
  }
}

/* ---------- Full-screen button (top-right corner) ---------- */

#fullscreen {
  position: fixed;
  top: 2.5vmin;
  right: 2.5vmin;
  width: max(44px, 6vmin);
  height: max(44px, 6vmin);
  border-radius: 50%;
  border: 2px solid rgba(195, 166, 255, 0.35);
  background: radial-gradient(circle at 50% 35%, #2a2050, #140e2c);
  cursor: pointer;
  padding: 0;
  opacity: 0.6;
  transition: opacity 0.3s;
}

#fullscreen:hover {
  opacity: 1;
}

#fullscreen svg {
  width: 50%;
  height: 50%;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Show "enter" normally, and "exit" while in full screen. */
#fullscreen .exit,
#fullscreen.active .enter {
  display: none;
}

#fullscreen.active .exit {
  display: inline;
}

/* ---------- Idle: fade the controls away (screen.js adds the class) ---------- */

body.idle {
  cursor: none;
}

body.idle #mic,
body.idle #story,
body.idle #fullscreen,
body.idle #credits {
  opacity: 0;
  transition: opacity 1.2s; /* a slow, gentle fade */
}