/* Game-screen: header (kid-badge, scoreboard, stop), word-stage,
   word + sentence display, status-area, mic-indicator. */

/* ========== Game header ========== */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--card);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  gap: 12px;
  flex-shrink: 0; /* mag NIET inkrimpen anders schuift 'ie offscreen */
  /* GEEN position: sticky — de parent (#game-screen) heeft overflow:hidden,
     en de combinatie sticky + overflow:hidden in een flex container geeft
     op iOS Safari soms een glitch waarbij de header volledig verdwijnt na
     een visibility-change / viewport-resize. Met flex-shrink:0 + relative
     staat de header altijd vanzelf bovenaan de flex column. */
  position: relative;
  z-index: 5;
}
.kid-badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 20px;
  font-weight: 800;
}
.kid-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-cog {
  border: none;
  background: transparent;
  font-size: 18px;
  color: var(--text-soft);
  cursor: pointer;
  padding: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 200ms ease, color 200ms ease, background-color 200ms ease;
}
.settings-cog:hover {
  background: var(--bg-grad-1);
  color: var(--primary-dark);
  transform: rotate(30deg);
}
.settings-cog:active { transform: rotate(60deg) scale(0.95); }
.groep-pill {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--bg-grad-1);
  padding: 3px 10px;
  border-radius: 100px;
  width: fit-content;
  /* Forceer single-line met ellipsis zodat lange book-titels het kid-badge
     niet meer dan 1 regel hoog laten worden op mobiel. */
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Klikbare level-pill: opent de level/mode-switcher modal. */
.groep-pill-btn {
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: inherit;
  padding: inherit;
  transition: transform var(--transition), background-color var(--transition);
}
.groep-pill-btn::after {
  content: ' ↓';
  opacity: .6;
  font-size: .85em;
}
.groep-pill-btn:hover  { transform: translateY(-1px); }
.groep-pill-btn:active { transform: translateY(0); }

.scoreboard {
  display: flex;
  gap: 20px;
}
.score-item  { text-align: center; }
.score-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-soft); }
.score-value { display: block; font-size: 28px; font-weight: 800; color: var(--primary-dark); transition: transform 300ms cubic-bezier(.2,.9,.4,1.4); }
.score-item.session .score-value { color: var(--success); }
.score-item.record  .score-value { color: var(--accent); }
.score-value.bump { transform: scale(1.3); }

/* ========== Game main + word-stage ========== */
.game-main {
  flex: 1;
  min-height: 0; /* sta toe dat-ie krimpt binnen het 100dvh game-screen */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 30px;
  overflow: hidden;
}

.word-stage {
  width: min(720px, 92vw);
  min-height: 160px;
  max-width: 92vw;
  background: var(--card);
  border-radius: var(--radius-big);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 24px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: background 300ms ease;
  margin: auto 0; /* visueel verticaal centreren in beschikbare ruimte */
}
.word-stage.correct-flash { background: #DFFBEB; }
.word-stage.wrong-flash   { background: #FFF3D9; }

.word {
  font-size: clamp(56px, 11vw, 110px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: 1px;
  animation: wordPop 400ms cubic-bezier(.2,.9,.4,1.4);
  text-align: center;
  /* line-height 1.2 (was 1.05): geeft ascenders/descenders (g, j, p, q, y)
     genoeg ruimte zodat ze niet onder de card-rand verdwijnen. .word-stage
     blijft visueel even hoog door padding-balans. */
  line-height: 1.2;
  word-break: break-word;
  max-width: 100%;
}
/* Auto-shrink voor lange woorden — JS zet deze klassen in showWord(). */
.word.word-md { font-size: clamp(44px, 9vw,  88px); letter-spacing: 0.5px; }
.word.word-sm { font-size: clamp(34px, 7vw,  72px); letter-spacing: 0; }
.word.word-xs { font-size: clamp(26px, 5.5vw, 56px); letter-spacing: 0; }

/* Sentence-mode: kleinere font, comfortabele line-height, wrap toegestaan,
   en wat meer breedte voor de stage zodat een zin van 5-10 woorden past. */
.word.word-sentence {
  font-size: clamp(28px, 4.5vw, 48px);
  letter-spacing: 0;
  line-height: 1.45;
  font-weight: 700;
}
body.mode-sentences .word-stage {
  width: min(820px, 95vw);
  min-height: 200px;
  padding: 36px 28px;
}

/* Per-woord spans voor on-the-fly kleur-feedback in sentence-mode.
   PositionTracker zet via setWordColor(idx, color) de class op de span.
   Tijdens 't lezen tonen we alleen 'green' (zekere match) en 'grey' (nog niet
   gepakt / overgeslagen) — bewust géén oranje/rood live, zodat false-starts
   ("uh, zink, zuil") een correct gelezen woord niet rood kleuren. Het
   definitieve oranje/rood/groen-verdict komt ná de opname uit repaintFromBlob. */
.word-span {
  display: inline-block;
  padding: 0.02em 0.22em;
  border-radius: 0.22em;
  margin: 0 0.04em;
  transition: background-color 220ms ease, color 220ms ease;
}
.word-span.pending { /* geen background, normale tekst-kleur */ }
.word-span.grey    { background: rgba(107, 113, 128, 0.14); color: var(--text-soft); }
.word-span.green   { background: rgba(71, 196, 116, 0.28); color: #1f6d3d; }
.word-span.orange  { background: rgba(255, 168, 107, 0.32); color: #804a14; }
.word-span.red     { background: rgba(242, 119, 184, 0.30); color: #842150; }

.word.correct { color: var(--success); animation: wordCorrect 500ms ease; }
.word.wrong   { color: var(--warn);    animation: wordShake 450ms ease; }

/* ========== Status + mic ========== */
.status-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  margin-top: 20px;
}
.mic-indicator {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--primary);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
  box-shadow: var(--shadow);
}
.mic-indicator .mic-pulse { display: none; }
.mic-indicator.listening .mic-pulse {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse 1.2s ease-out infinite;
  z-index: 0;
}
.mic-indicator.speaking { background: var(--accent); transform: scale(1.08); }
.mic-indicator.correct  { background: var(--success); }
.mic-indicator.wrong    { background: var(--warn); }
.mic-indicator.idle     { background: #BFC2CC; }
/* "Thinking" — kid is klaar met praten, app verwerkt (silenceMs wait + API-call).
   Teal kleur is bewust verschillend van listening (blauw) en speaking (geel)
   zodat het kind direct ziet: "ik ben gehoord, even geduld". */
.mic-indicator.thinking {
  background: #3FB5A8;
  animation: thinkPulse 800ms ease-in-out infinite;
}
@keyframes thinkPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.mic-icon { width: 40px; height: 40px; fill: white; position: relative; z-index: 1; }

.status-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-soft);
  min-height: 30px;
  text-align: center;
  max-width: 90vw;
}
.last-heard {
  /* Empty = no visual footprint; populated = subtiele hint-tekst onder status. */
  font-size: 15px;
  font-weight: 600;
  color: var(--warn);
  font-style: italic;
  text-align: center;
  max-width: 90vw;
  min-height: 22px;
  margin-top: -4px;
}