/* ── Raad het Woord — strakke 800×600 Minipret-layout ──────────────────
 * Eén vaste basis-layout. Alle elementen staan op absolute pixel-posities
 * binnen een 800×600 stage. JS schaalt de stage als één geheel via
 * transform: scale(...) zodat browser en fullscreen exact dezelfde
 * compositie tonen — alleen kleiner of groter. */

:root {
  --primary: #3da9fc;
  --primary-dark: #1f7ad1;
  --accent: #ff9a3c;
  --accent-dark: #e0701a;
  --yellow: #ffd33a;
  --cream: #fff8ea;
  --paper: #f4faff;
  --white: #ffffff;
  --dark: #1f2937;
  --dark-soft: #2c3543;
  --gray-50: #f3f5f8;
  --gray-200: #cdd5e0;
  --gray-300: #aab3c0;
  --correct: #2fa84f;
  --correct-dark: #1e7a39;
  --present: #ffb347;
  --present-dark: #d97f00;
  --absent: #98a2b3;
  --absent-dark: #5e6675;
  --shadow: 0 6px 0 rgba(31, 41, 55, 0.14), 0 14px 28px rgba(31, 41, 55, 0.14);
  --shadow-soft: 0 3px 0 rgba(31, 41, 55, 0.10);
  --scale: 1;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  color: var(--dark);
  font-family: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background:
    radial-gradient(900px 600px at 20% 0%, #e8f3ff 0%, transparent 60%),
    radial-gradient(900px 600px at 80% 100%, #fff3d8 0%, transparent 60%),
    linear-gradient(180deg, #eaf4ff 0%, #fff8ea 100%);
}

button { font-family: inherit; cursor: pointer; }

/* ── App-shell + scale-to-fit stage ─────────────────────────────────── */
.app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 600px;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--scale));
  overflow: hidden;
}
.screen {
  position: absolute;
  inset: 0;
}

/* ── Knoppen ────────────────────────────────────────────────────────── */
.btn {
  border: 3px solid var(--dark);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 900;
  font-size: 16px;
  color: var(--white);
  background: var(--primary);
  box-shadow: var(--shadow);
  transition: transform 0.1s ease, filter 0.15s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); box-shadow: var(--shadow-soft); }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.btn--primary { background: linear-gradient(180deg, #ffb56a, var(--accent-dark)); }
.btn--secondary { background: var(--white); color: var(--dark); }
.btn--small {
  padding: 8px 14px;
  font-size: 13px;
  min-height: 36px;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2.5px solid var(--dark);
  background: var(--white);
  font-size: 17px;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
  transition: transform 0.1s ease, background 0.15s ease;
  padding: 0;
  color: var(--dark);
}
.icon-btn:hover { background: var(--cream); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ── Hoekknoppen (home + fullscreen) — absolute, 42×42 ──────────────── */
.home-btn {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 5;
}
.fs-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 5;
}

/* ── Header (titel + instructie) ────────────────────────────────────── */
.game-header {
  position: absolute;
  top: 18px;
  left: 80px;
  right: 80px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.game-instruction {
  position: absolute;
  top: 82px;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--dark-soft);
  letter-spacing: 0.02em;
  text-align: center;
}

/* ── Score-HUD: twee losse badges (Score + Highscore) ──────────────── */
/* Grid-layout met 1fr/auto kolommen + overflow:hidden — getallen tot
 * 5 cijfers blijven binnen het kader, label krimpt zo nodig niet. */
.score-hud {
  position: absolute;
  top: 132px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 20;
}
.score-badge {
  position: relative;          /* anchor voor score-gain bubble */
  width: 178px;
  min-height: 52px;
  padding: 7px 12px;
  border-radius: 17px;
  border: 3px solid var(--dark);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 0 rgba(31, 41, 55, 0.14);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
  overflow: hidden;
}
.score-badge .score-label {
  font-size: 18px;
  font-weight: 900;
  color: var(--dark);
  line-height: 1;
  white-space: nowrap;
  min-width: 0;
}
.score-badge .score-label--icon { font-size: 28px; line-height: 1; }
.score-badge .score-number {
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  text-align: right;
  min-width: 56px;
  max-width: 88px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
/* Dynamische verkleining bij 4+ en 5+ cijferige scores */
.score-number.is-4digit { font-size: 29px; }
.score-number.is-5digit { font-size: 25px; }

.current-score { border-color: #fb923c; background: #fff7ed; }
.current-score .score-number { color: #ea580c; }
.best-score { border-color: #22c55e; background: #f0fdf4; }
.best-score .score-number { color: #16a34a; }

/* Pop-animaties (per badge toegevoegd door JS) */
.score-pop { animation: scorePop 0.35s ease-out; }
@keyframes scorePop {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.highscore-pop { animation: highscorePop 0.45s ease-out; }
@keyframes highscorePop {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Floating "+X" bubble bij score-gain */
.score-gain {
  position: absolute;
  right: -16px;
  top: -12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #22c55e;
  color: white;
  font-size: 16px;
  font-weight: 900;
  animation: scoreGainFloat 0.9s ease-out forwards;
  pointer-events: none;
  border: 2px solid #166534;
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
@keyframes scoreGainFloat {
  0%   { opacity: 0; transform: translateY(8px) scale(0.85); }
  20%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) scale(1); }
}

/* ── Sound-button (mute toggle) ─────────────────────────────────────── */
.sound-button {
  position: absolute;
  top: 20px;
  right: 82px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2.5px solid var(--dark);
  background: rgba(255, 255, 255, 0.95);
  font-size: 18px;
  font-weight: 900;
  display: grid;
  place-items: center;
  padding: 0;
  z-index: 5;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
  color: var(--dark);
}
.sound-button:hover { background: var(--cream); }
.sound-button:active { transform: scale(0.94); }
.sound-button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* Highscore op startscherm */
.start__highscore {
  font-weight: 900;
  font-size: 17px;
  color: var(--dark);
  background: rgba(255, 247, 237, 0.95);
  border: 3px solid #fb923c;
  border-radius: 999px;
  padding: 6px 18px;
  margin: 0;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.start__highscore strong { color: #16a34a; }

/* Compactere goed-geraden panel — alleen titel, punten, totaalscore, knoppen */
.end-panel--won {
  min-height: 170px;
  padding: 22px 28px;
  gap: 9px;
}
.end-panel--won .end-panel__title { font-size: 26px; }
.end-panel--won .end-panel__row { font-size: 18px; }
.end-panel--won .end-panel__actions { margin-top: 8px; }

/* ── Logo / titel ───────────────────────────────────────────────────── */
.gw-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-weight: 900;
  line-height: 1;
  color: var(--dark);
}
.gw-logo-text { letter-spacing: -0.4px; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6); }
.gw-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  border: 3px solid var(--dark);
  border-radius: 12px;
  padding: 4px 12px;
  transform: rotate(-2deg);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.gw-logo--large .gw-logo-text { font-size: 64px; }
.gw-logo--large .gw-badge { font-size: 48px; padding: 6px 16px; border-radius: 14px; }
.gw-logo--small { gap: 8px; }
.gw-logo--small .gw-logo-text { font-size: 30px; letter-spacing: -0.4px; }
.gw-logo--small .gw-badge {
  font-size: 22px;
  padding: 4px 11px;
  border-radius: 10px;
  border-width: 2.5px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16);
}

/* ── Startscherm ────────────────────────────────────────────────────── */
.start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px;
}
.start__intro {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--dark-soft);
  line-height: 1.5;
  max-width: 540px;
  margin: 0;
}

/* ── Play-area: 308px hoog (y122 → y430) ────────────────────────────── */
.play-area {
  position: absolute;
  top: 122px;
  left: 0;
  right: 0;
  height: 308px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.board-area {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

/* ── Verticale timerbalk ────────────────────────────────────────────── */
.timer-bar {
  width: 16px;
  border-radius: 999px;
  border: 3px solid #b91c1c;
  background: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}
.timer-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, #fb7185, #ef4444, #b91c1c);
  border-radius: 999px;
  transition: height 140ms linear;
}
.timer-bar.is-warning { animation: timerPulse 0.45s ease-in-out infinite alternate; }
@keyframes timerPulse {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .timer-bar.is-warning { animation: none; }
}

/* ── Letterraster: 6 × 5 met 44×44 tegels ──────────────────────────── */
.grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.grid__row {
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: center;
  flex-wrap: nowrap;
}
.cell {
  width: 44px;
  height: 44px;
  border: 2.5px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 22px;
  color: var(--dark);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.cell--filled { border-color: var(--dark); animation: cellPop 160ms ease-out; }
.cell--hint,
.cell--locked {
  background: #fff3d8;
  border-color: var(--accent);
  color: var(--accent-dark);
}
.cell--missed {
  background: rgba(226, 232, 240, 0.45);
  border-color: #cbd5e1;
}
.cell--correct { background: var(--correct); color: var(--white); border-color: var(--correct-dark); }
.cell--present { background: var(--present); color: var(--white); border-color: var(--present-dark); }
.cell--absent  { background: var(--absent);  color: var(--white); border-color: var(--absent-dark); }
.cell--flip    { animation: cellFlip 420ms ease; }
.grid__row--shake { animation: rowShake 360ms ease-in-out; }

@keyframes cellPop {
  0% { transform: scale(0.85); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes cellFlip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
@keyframes rowShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .cell--filled, .cell--flip { animation: none; }
  .grid__row--shake { animation: none; }
}

/* ── Status-message: vaste plek, schuift niets op ───────────────────── */
.status-message {
  position: absolute;
  top: 434px;
  left: 0;
  right: 0;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.msg {
  font-weight: 800;
  font-size: 13px;
  color: var(--dark);
  text-align: center;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid var(--gray-200);
  border-radius: 999px;
  padding: 3px 12px;
  display: inline-block;
  max-width: 92%;
}
.msg--good { background: #d8f5e0; border-color: var(--correct); color: var(--correct-dark); }
.msg--bad  { background: #ffe8e0; border-color: var(--present-dark); color: var(--present-dark); }

/* ── Toetsenbord-wrap: vaste plek onderaan (y452 → y574) ────────────── */
.keyboard-wrap {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  height: 122px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: opacity 200ms ease;
}
.keyboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.kb-row {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.key {
  width: 42px;
  height: 36px;
  border: 2px solid var(--dark);
  border-radius: 8px;
  background: var(--white);
  font-weight: 900;
  font-size: 15px;
  color: var(--dark);
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: 0 2px 0 rgba(31, 41, 55, 0.12);
  transition: transform 0.08s ease, background 0.15s ease;
}
.key:hover { background: var(--cream); }
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(31, 41, 55, 0.12); }
.key:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }
.key--wide {
  width: 64px;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.key--correct { background: var(--correct); color: var(--white); border-color: var(--correct-dark); }
.key--present { background: var(--present); color: var(--white); border-color: var(--present-dark); }
.key--absent  { background: var(--absent);  color: var(--white); border-color: var(--absent-dark); }

/* ── End-panel: overlay (schuift de layout niet) ────────────────────── */
.end-panel {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  width: 460px;
  background: var(--white);
  border: 3px solid var(--dark);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  animation: panelPop 280ms ease-out;
}
.end-panel--won { border-color: var(--correct-dark); }
.end-panel--lost { border-color: var(--present-dark); }
.end-panel__title {
  margin: 0;
  font-weight: 900;
  font-size: 20px;
  text-align: center;
  line-height: 1.15;
}
.end-panel--won .end-panel__title { color: var(--correct-dark); }
.end-panel--lost .end-panel__title { color: var(--present-dark); }
.end-panel__row {
  font-weight: 800;
  font-size: 14px;
  color: var(--dark);
  text-align: center;
  margin: 0;
}
.end-panel__row strong {
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}
.end-panel__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 2px;
}

@keyframes panelPop {
  0% { transform: translate(-50%, 12px) scale(0.96); opacity: 0; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

/* ── Confetti bij winst ─────────────────────────────────────────────── */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}
.confetti span {
  position: absolute;
  width: 9px;
  height: 13px;
  border-radius: 2px;
  opacity: 0.95;
  top: -10%;
  animation: confettiDown 2.5s ease-out forwards;
}
@keyframes confettiDown {
  0% { transform: translateY(-10%) rotate(0); opacity: 1; }
  100% { transform: translateY(700px) rotate(540deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti span { animation: none; display: none; }
}

/* ── Sr-only helper ─────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ── Apparaat-varianten ─────────────────────────────────────────────── */
/* JS detecteert touch + breedte en zet .has-virtual-keyboard of
 * .no-virtual-keyboard op .game-stage. Beide modi delen dezelfde 800×600
 * stage, alleen de interne posities en groottes verschillen. */

/* Virtueel toetsenbord volledig verbergen op desktop */
.keyboard-wrap.is-hidden { display: none !important; }

/* ── Desktop / laptop: GEEN virtueel toetsenbord (grotere, vollere layout) */
.game-stage.no-virtual-keyboard .game-header {
  top: 14px;
  height: 76px;
  left: 100px;
  right: 100px;
}
.game-stage.no-virtual-keyboard .gw-logo--small .gw-logo-text { font-size: 42px; }
.game-stage.no-virtual-keyboard .gw-logo--small .gw-badge {
  font-size: 32px;
  padding: 5px 15px;
  border-radius: 12px;
}
.game-stage.no-virtual-keyboard .game-instruction {
  top: 102px;
  height: 32px;
  font-size: 18px;
}
/* Score-HUD ongewijzigd op desktop (zelfde basis-positie + maat) */
.game-stage.no-virtual-keyboard .play-area {
  top: 146px;
  height: 412px;
}
.game-stage.no-virtual-keyboard .board-area { gap: 14px; }
.game-stage.no-virtual-keyboard .grid { gap: 8px; }
.game-stage.no-virtual-keyboard .grid__row { gap: 8px; }
.game-stage.no-virtual-keyboard .cell {
  width: 62px;
  height: 62px;
  border-radius: 13px;
  font-size: 30px;
}
.game-stage.no-virtual-keyboard .timer-bar { width: 16px; }
.game-stage.no-virtual-keyboard .status-message {
  top: 568px;
  height: 24px;
}
.game-stage.no-virtual-keyboard .msg {
  font-size: 15px;
  padding: 4px 14px;
}
.game-stage.no-virtual-keyboard .end-panel {
  bottom: 52px;
  width: 500px;
  min-height: 150px;
}

/* ── iPad / tablet / mobiel: MET virtueel toetsenbord ───────────────── */
.game-stage.has-virtual-keyboard .game-header {
  top: 18px;
  height: 56px;
  left: 80px;
  right: 80px;
}
.game-stage.has-virtual-keyboard .gw-logo--small .gw-logo-text { font-size: 28px; }
.game-stage.has-virtual-keyboard .gw-logo--small .gw-badge {
  font-size: 20px;
  padding: 4px 11px;
}
.game-stage.has-virtual-keyboard .game-instruction {
  top: 78px;
  height: 26px;
  font-size: 15px;
}
/* Score-HUD iets compacter op touch-modus, maar breed genoeg voor 4-cijferige scores */
.game-stage.has-virtual-keyboard .score-hud {
  top: 118px;
  left: 22px;
  gap: 8px;
}
.game-stage.has-virtual-keyboard .score-badge {
  width: 164px;
  min-height: 46px;
  padding: 6px 10px;
}
.game-stage.has-virtual-keyboard .score-badge .score-label { font-size: 16px; }
.game-stage.has-virtual-keyboard .score-badge .score-number { font-size: 28px; }
.game-stage.has-virtual-keyboard .score-number.is-4digit { font-size: 24px; }
.game-stage.has-virtual-keyboard .score-number.is-5digit { font-size: 20px; }
.game-stage.has-virtual-keyboard .play-area {
  top: 110px;
  height: 342px;
}
.game-stage.has-virtual-keyboard .board-area { gap: 10px; }
.game-stage.has-virtual-keyboard .grid { gap: 6px; }
.game-stage.has-virtual-keyboard .grid__row { gap: 6px; }
.game-stage.has-virtual-keyboard .cell {
  width: 52px;
  height: 52px;
  border-radius: 11px;
  font-size: 27px;
}
.game-stage.has-virtual-keyboard .timer-bar { width: 14px; }
.game-stage.has-virtual-keyboard .status-message {
  top: 458px;
  height: 22px;
}
.game-stage.has-virtual-keyboard .keyboard-wrap {
  bottom: 18px;
  height: auto;
}
.game-stage.has-virtual-keyboard .keyboard { gap: 7px; }
.game-stage.has-virtual-keyboard .kb-row { gap: 7px; }
.game-stage.has-virtual-keyboard .key {
  width: 50px;
  height: 43px;
  border-radius: 9px;
  font-size: 17px;
  font-weight: 900;
}
.game-stage.has-virtual-keyboard .key.key--wide {
  width: 86px;
  font-size: 13px;
}
.game-stage.has-virtual-keyboard .end-panel {
  bottom: 105px;
  width: 460px;
  min-height: 138px;
}

/* In eindscherm op touch-modus: keyboard fade out (niet weggehaald) */
.game-stage.has-virtual-keyboard.is-ended .keyboard-wrap {
  opacity: 0;
  pointer-events: none;
}

/* ── Mobiel (kleine viewport): iets compactere tegels en keys ───────── */
@media (max-width: 700px) {
  .game-stage.has-virtual-keyboard .cell {
    width: 50px;
    height: 50px;
    font-size: 26px;
  }
  .game-stage.has-virtual-keyboard .timer-bar { height: auto; }
  .game-stage.has-virtual-keyboard .key {
    width: 49px;
    height: 43px;
    font-size: 17px;
  }
  .game-stage.has-virtual-keyboard .key.key--wide {
    width: 84px;
  }
}