:root {
  --bg1: #ffeaa7;
  --bg2: #fab1a0;
  --bg3: #a29bfe;
  --ink: #2d3436;
  --card: #ffffff;
  --good: #00b894;
  --warm: #fdcb6e;
  --hot: #e17055;
  --cool: #74b9ff;
  --pink: #fd79a8;
  --shadow: 0 10px 30px rgba(45,52,54,.15);
  --chunk-colors:
    #e74c3c, #f39c12, #16a085, #2980b9,
    #8e44ad, #e84393, #00b894, #d35400;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);
  background-attachment: fixed;
  overflow: hidden;
}

#confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
}

.hud {
  display: flex; gap: 14px; padding: 14px 20px; align-items: center;
  background: rgba(255,255,255,.55); backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(255,255,255,.7);
  font-weight: 600;
}
.hud-item {
  background: var(--card); padding: 8px 14px; border-radius: 999px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  min-width: 70px;
}
.hud-label { font-size: 11px; opacity: .6; text-transform: uppercase; letter-spacing: .08em; }
.hud-value { font-size: 20px; font-weight: 700; }
.mic-item { flex-direction: row; gap: 8px; margin-left: auto; }
.mode-toggle {
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 10px 16px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow);
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .12s, background .2s;
}
.mode-toggle:hover { transform: scale(1.04); }
.mode-toggle.manual { background: linear-gradient(135deg, var(--cool), var(--bg3)); color: white; }
.mode-toggle.listening { background: linear-gradient(135deg, var(--good), #55efc4); color: white; }
.mic-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #b2bec3; transition: background .2s, box-shadow .2s;
}
.mic-dot.on {
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(0,184,148,.6);
  animation: pulse 1.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,184,148,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(0,184,148,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,184,148,0); }
}

main {
  height: calc(100% - 116px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.hidden { display: none !important; }

.banner {
  background: var(--card); padding: 40px 50px; border-radius: 28px;
  box-shadow: var(--shadow); text-align: center; font-size: 22px;
}
.big-btn {
  margin-top: 18px; font-family: inherit; font-size: 26px; font-weight: 700;
  padding: 16px 40px; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--hot), var(--pink));
  color: white; box-shadow: var(--shadow);
  transition: transform .15s;
}
.big-btn:hover { transform: scale(1.05); }
.big-btn:active { transform: scale(.97); }

.game {
  width: 100%; max-width: 1000px;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}

.stage-row {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.stage-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); padding: 10px 20px; border-radius: 999px;
  box-shadow: var(--shadow); opacity: .45;
  font-weight: 600; font-size: 18px;
  transition: opacity .25s, transform .25s, background .25s;
}
.stage-pill.active {
  opacity: 1; transform: scale(1.08);
  background: linear-gradient(135deg, #fff, #ffeaa7);
}
.stage-pill.done {
  opacity: .9; background: linear-gradient(135deg, #d4ffe6, #fff);
}
.stage-emoji { font-size: 22px; }

.instruction {
  font-size: 22px; font-weight: 600; color: var(--ink);
  background: rgba(255,255,255,.7); padding: 8px 22px; border-radius: 999px;
  box-shadow: var(--shadow);
}

.word-display {
  font-size: clamp(64px, 14vw, 180px); font-weight: 700; line-height: 1;
  background: var(--card); padding: 30px 40px; border-radius: 28px;
  box-shadow: var(--shadow); min-width: 60vw; min-height: 1.4em;
  text-align: center; white-space: nowrap;
  font-kerning: normal; font-feature-settings: "kern" 1;
}
.chunk {
  position: relative;
  transition: transform .2s, color .2s, text-shadow .2s, opacity .2s;
  opacity: .45;
}
/* Promote to inline-block only when animating, so transforms work
   without breaking kerning between resting chunks. */
.chunk.active, .chunk.heard, .chunk.done, .chunk.read-stage {
  display: inline-block;
}
.chunk.read-stage { opacity: 1; }
.chunk.active {
  opacity: 1;
  animation: bounce 0.7s ease-in-out infinite;
  text-shadow: 0 6px 0 rgba(0,0,0,.08), 0 0 30px rgba(255,255,255,.6);
}
.chunk.heard {
  opacity: 1;
  color: var(--good) !important;
  animation: pop .35s ease-out;
}
.chunk.heard::after {
  content: "✓"; position: absolute; top: -10px; right: -6px;
  font-size: 22px; color: var(--good);
  animation: tickIn .35s ease-out;
}
.chunk.done { opacity: .85; }
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes tickIn {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.word-display.celebrate {
  animation: celebrate 1s ease-in-out;
}
@keyframes celebrate {
  0%   { transform: scale(1) rotate(0); }
  20%  { transform: scale(1.1) rotate(-3deg); }
  40%  { transform: scale(1.05) rotate(3deg); }
  60%  { transform: scale(1.12) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}

.heard-line {
  font-size: 18px; font-weight: 500; opacity: .7; min-height: 1.4em;
  background: rgba(255,255,255,.5); padding: 6px 16px; border-radius: 12px;
  font-style: italic; max-width: 80vw; text-align: center;
}

.mascot {
  font-size: 70px; cursor: pointer;
  transition: transform .25s;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.12));
}
.mascot.cheer { animation: cheer .6s ease-in-out; }
@keyframes cheer {
  0%,100% { transform: rotate(0) translateY(0); }
  25% { transform: rotate(-20deg) translateY(-20px); }
  75% { transform: rotate(20deg) translateY(-20px); }
}

.footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 10px; text-align: center; font-size: 13px;
  background: rgba(255,255,255,.4); color: var(--ink);
}
.footer-touch { display: none; }
@media (pointer: coarse) {
  .footer-desktop { display: none; }
  .footer-touch { display: inline; }
}
.kbd {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: var(--card); box-shadow: 0 2px 0 rgba(0,0,0,.1);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; font-weight: 700;
}

.big-celebrate {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(60px, 12vw, 160px); font-weight: 800;
  color: white;
  text-shadow: 0 8px 0 rgba(0,0,0,.2), 0 0 60px rgba(255,255,255,.8);
  pointer-events: none; z-index: 60;
  animation: bigPop 1.4s ease-out forwards;
}
@keyframes bigPop {
  0%   { transform: scale(0); opacity: 0; }
  30%  { transform: scale(1.2); opacity: 1; }
  60%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ---------- Mobile & tablet responsive (phones + Android tablets) ---------- */
/* Tablets and below (iPad mini, Android tablets in portrait, etc.) */
@media (max-width: 1024px) {
  html, body {
    overflow: auto;             /* allow scroll on touch devices */
    -webkit-text-size-adjust: 100%;
  }
  main {
    height: auto;
    min-height: calc(100% - 140px);
    padding: 16px;
  }
  .game { gap: 20px; }
  .word-display {
    min-width: 0;
    width: 100%;
    padding: 24px 20px;
    font-size: clamp(56px, 12vw, 140px);
  }
  .stage-pill { font-size: 16px; padding: 8px 14px; }
  .instruction { font-size: 20px; padding: 8px 18px; }
}

/* Phones (iPhone, small Android) */
@media (max-width: 640px) {
  .hud {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    justify-content: center;
  }
  .hud-item {
    min-width: 56px;
    padding: 6px 10px;
  }
  .hud-label { font-size: 10px; }
  .hud-value { font-size: 16px; }
  .mic-item { margin-left: 0; order: 4; }
  .mode-toggle {
    font-size: 13px;
    padding: 8px 12px;
    order: 5;
  }
  main {
    padding: 12px;
    min-height: 0;
  }
  .game { gap: 14px; }
  .stage-row { gap: 8px; }
  .stage-pill { font-size: 14px; padding: 6px 12px; }
  .stage-emoji { font-size: 18px; }
  .instruction {
    font-size: 17px;
    padding: 6px 14px;
    text-align: center;
  }
  .word-display {
    padding: 18px 12px;
    border-radius: 20px;
    font-size: clamp(48px, 16vw, 110px);
  }
  .chunk.heard::after {
    font-size: 16px; top: -6px; right: -4px;
  }
  .heard-line {
    font-size: 14px;
    max-width: 92vw;
    padding: 5px 12px;
  }
  .mascot { font-size: 56px; }
  .banner {
    padding: 28px 24px;
    font-size: 18px;
    border-radius: 22px;
    margin: 0 12px;
  }
  .big-btn {
    font-size: 22px;
    padding: 14px 32px;
  }
  /* Keyboard shortcut footer is not useful on touch devices */
  .footer { display: none; }
}

/* Very small phones (iPhone SE etc.) */
@media (max-width: 380px) {
  .hud { padding: 8px; gap: 6px; }
  .hud-item { min-width: 50px; padding: 5px 8px; }
  .hud-value { font-size: 15px; }
  .mode-toggle { font-size: 12px; padding: 7px 10px; }
  .word-display { font-size: clamp(44px, 15vw, 90px); padding: 14px 8px; }
}

/* Landscape phones — keep the word visible without scrolling */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hud { padding: 6px 10px; gap: 8px; }
  .hud-item { padding: 4px 10px; min-width: 0; }
  .hud-value { font-size: 14px; }
  .hud-label { font-size: 9px; }
  .mode-toggle { font-size: 12px; padding: 6px 10px; }
  main { padding: 8px; }
  .game { gap: 10px; }
  .stage-pill { font-size: 13px; padding: 5px 10px; }
  .instruction { font-size: 15px; padding: 5px 12px; }
  .word-display {
    font-size: clamp(40px, 10vh, 90px);
    padding: 10px 16px;
  }
  .mascot { font-size: 42px; }
  .heard-line { font-size: 13px; }
  .footer { display: none; }
}

/* Touch device polish: no hover scaling, transparent tap highlight */
@media (hover: none) and (pointer: coarse) {
  .mode-toggle:hover,
  .big-btn:hover,
  .mascot:hover { transform: none; }
  .mode-toggle, .big-btn { -webkit-tap-highlight-color: transparent; }
}