/* ============================================================
   SPELLETJES VAN TED — MOBILE DESIGN SYSTEM
   Exacte tokens uit de aangeleverde styleguide.
   ============================================================ */

:root {
  --orange: #FF5A1F;
  --yellow: #FFD22E;
  --blue: #2EA7FF;
  --pink: #FFB7D6;
  --cream: #F2ECE1;
  --paper: #FFFDF8;
  --ink: #111111;
  --green: #6FCE67;
  --radius-s: 16px;
  --radius-m: 24px;
  --radius-l: 32px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --font-display: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --shadow-paper: 0 2px 2px rgba(90, 58, 20, .05), 0 12px 28px rgba(90, 58, 20, .11);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

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

html {
  min-height: 100%;
  background: var(--cream);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 44%, rgba(105,74,37,.045) 0 1px, transparent 1.4px);
  background-size: 17px 17px, 23px 23px;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button, a, input, select { touch-action: manipulation; }
button, input, select { font: inherit; }

.display-type,
.game-title,
.hint-text,
.finish-title,
.mode-question {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ted sprite sheet: 3 kolommen x 2 rijen. */
.ted {
  display: block;
  background: url('assets/ted/ted-sprites.png') no-repeat;
  background-size: 300% 200%;
  filter: drop-shadow(0 8px 8px rgba(74, 45, 4, .12));
  pointer-events: none;
}
.ted--wave { background-position: 0 0; }
.ted--think { background-position: 50% 0; }
.ted--peek { background-position: 100% 0; }
.ted--celebrate { background-position: 0 100%; }
.ted--heart { background-position: 50% 100%; }
.ted--apple { background-position: 100% 100%; }

.icon-button,
.circle-nav {
  width: 50px;
  height: 50px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 253, 248, .97);
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(17,17,17,.08), 0 8px 22px rgba(17,17,17,.10);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.icon-button:active,
.circle-nav:active { transform: translateY(2px) scale(.97); box-shadow: 0 2px 8px rgba(17,17,17,.12); }

.paper-card {
  border-radius: var(--radius-l);
  background: var(--paper);
  box-shadow: var(--shadow-paper);
}

/* ============================================================
   GEMEENSCHAPPELIJKE SPELSCHERMEN
   De bestaande DOM-id's en JS-contracten blijven onaangeraakt.
   ============================================================ */

body.game-page {
  --game-accent: var(--blue);
  --game-soft: var(--pink);
  width: 100%;
  height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--cream) !important;
  color: var(--ink);
}
body.game-page--colors { --game-accent: var(--orange); --game-soft: var(--pink); }
body.game-page--fingers { --game-accent: var(--yellow); --game-soft: var(--blue); }

body.game-page #bg-shapes { opacity: 0 !important; }

body.game-page .screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  max-width: 560px;
  margin-inline: auto;
  color: var(--ink);
  background: var(--cream);
  overflow: hidden;
}
body.game-page .screen.hidden {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
  transform: translateY(8px) scale(.985) !important;
}

/* Start: prompt boven, grote leerkaart midden, gele mode-sheet onder. */
body.game-page #start-screen {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 10px;
  padding: calc(var(--safe-top) + 70px) max(18px, var(--safe-right)) calc(var(--safe-bottom) + 14px) max(18px, var(--safe-left));
}

.start-back {
  position: fixed;
  z-index: 220;
  top: calc(var(--safe-top) + 14px);
  left: max(16px, var(--safe-left));
}

.start-prompt {
  position: relative;
  z-index: 2;
  width: min(100%, 500px);
  min-height: 128px;
  padding: 25px 96px 22px 28px;
  border-radius: 30px 46px 27px 34px;
  background: var(--pink);
  transform: rotate(-1.6deg);
  box-shadow: 0 10px 30px rgba(108,64,46,.10);
}
.start-prompt::after {
  content: '';
  position: absolute;
  right: 19px;
  bottom: 24px;
  width: 30px;
  height: 28px;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 48%/15px 4px no-repeat,
    linear-gradient(32deg,transparent 44%,var(--ink) 45% 55%,transparent 56%) 12px 0/18px 11px no-repeat,
    linear-gradient(-32deg,transparent 44%,var(--ink) 45% 55%,transparent 56%) 12px 17px/18px 11px no-repeat;
}
.start-prompt .game-title {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: clamp(2.05rem, 10.2vw, 3.35rem) !important;
  line-height: .84 !important;
  text-shadow: none !important;
}
.start-prompt .game-sub {
  margin: 8px 0 0 !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1.15rem, 5.2vw, 1.7rem) !important;
  font-weight: 800 !important;
  line-height: .95;
}
.start-prompt .prompt-accent { color: var(--orange); }
.start-prompt .ted {
  position: absolute;
  z-index: 2;
  width: 118px;
  height: 118px;
  right: 4px;
  top: -56px;
}

.start-showcase {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(10rem, 52vw, 18rem);
  line-height: .82;
  color: var(--blue);
  text-shadow: -11px 12px 0 var(--paper), -14px 16px 1px rgba(65,45,24,.13);
  transform: rotate(-.8deg);
  user-select: none;
}
.start-showcase--colors { font-size: 0; text-shadow: none; }
.start-showcase--colors::before {
  content: '';
  width: min(56vw, 235px);
  aspect-ratio: 1;
  border-radius: 43% 57% 44% 56% / 56% 44% 58% 42%;
  background: var(--orange);
  box-shadow: -26px 21px 0 var(--pink), 14px -18px 0 var(--yellow), 0 12px 28px rgba(87,46,17,.12);
  transform: rotate(9deg);
}
.start-showcase--fingers { font-size: clamp(7rem, 35vw, 12rem); color: var(--ink); text-shadow: -8px 10px 0 var(--paper); }

.mode-panel {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 16px 16px 14px;
  border-radius: 30px;
  background: var(--yellow);
  box-shadow: 0 12px 32px rgba(108,74,0,.15);
}
.mode-question {
  margin-bottom: 10px;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
}
body.game-page .mode-toggle {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px !important;
  width: 100%;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
body.game-page .mode-btn {
  min-height: 124px;
  padding: 10px 8px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: rgba(255,253,248,.94) !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: .98rem !important;
  font-weight: 800 !important;
  line-height: 1.1;
  box-shadow: 0 7px 0 rgba(90,55,8,.08), 0 12px 22px rgba(90,55,8,.08) !important;
}
body.game-page .mode-btn.active {
  background: rgba(255,253,248,.94) !important;
  color: var(--ink) !important;
  box-shadow: 0 7px 0 rgba(90,55,8,.08), 0 12px 22px rgba(90,55,8,.08) !important;
}
body.game-page #mode-analog,
body.game-page #mode-camera { background: var(--orange) !important; }
body.game-page .mode-btn svg {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 5px;
  color: var(--ink);
}
body.game-page #info-btn {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,253,248,.7) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  font-size: 0 !important;
}
body.game-page #info-btn::after { content: '?'; font-size: 1rem; }
body.game-page .start-btn,
body.game-page .again-btn {
  width: 100%;
  min-height: 54px;
  margin: 0 !important;
  padding: 10px 22px !important;
  border: 0;
  border-radius: 999px;
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 800;
  text-shadow: none !important;
  box-shadow: 0 6px 0 rgba(17,17,17,.15), 0 12px 24px rgba(17,17,17,.14) !important;
}
body.game-page .mode-panel .start-btn { display: none !important; }

/* Actief spel. */
body.game-page #game-screen {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: calc(var(--safe-top) + 76px) max(16px, var(--safe-right)) calc(var(--safe-bottom) + 12px) max(16px, var(--safe-left)) !important;
  align-items: center !important;
  justify-content: stretch !important;
  background: var(--cream) !important;
}
body.game-page #game-screen > * {
  min-width: 0;
  max-width: 100%;
}
body.game-page .hint-wrap {
  width: 100%;
  min-height: 76px !important;
  padding: 0 !important;
}
body.game-page .hint-text {
  width: 100%;
  padding: 16px 22px !important;
  border-radius: 24px 34px 22px 30px;
  background: var(--paper);
  color: var(--ink) !important;
  font-size: clamp(1.25rem, 6vw, 2rem) !important;
  line-height: .98 !important;
  text-align: left !important;
  text-shadow: none !important;
  box-shadow: var(--shadow-paper);
  transform: rotate(-1deg);
  overflow-wrap: anywhere;
}
body.game-page .hint-text .target-letter { color: var(--orange); }

body.game-page .letter-stage,
body.game-page .color-stage,
body.game-page .num-stage {
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
body.game-page .letter-stage { padding-bottom: 10px; }
body.game-page .game-ted {
  position: absolute;
  z-index: 2;
  right: 1px;
  bottom: 9px;
  width: clamp(70px, 21vw, 100px);
  height: clamp(70px, 21vw, 100px);
}
body.game-page .big-letter {
  color: var(--blue) !important;
  -webkit-text-stroke: 0 !important;
  font-size: clamp(8rem, min(52vw, 31vh), 17rem) !important;
  line-height: .78 !important;
  text-shadow: -10px 12px 0 var(--paper), -13px 16px 1px rgba(60,42,20,.13) !important;
  filter: none !important;
}
body.game-page .big-letter.filled { color: var(--orange) !important; }
body.game-page .color-circle {
  width: min(48vw, 24vh, 220px) !important;
  height: min(48vw, 24vh, 220px) !important;
  border-radius: 43% 57% 44% 56% / 56% 44% 58% 42% !important;
  border: 10px solid var(--paper) !important;
  box-shadow: 0 14px 0 rgba(17,17,17,.06), 0 22px 35px rgba(74,45,12,.13) !important;
}
body.game-page .color-name { color: var(--ink) !important; text-shadow: none !important; }
body.game-page .num-card {
  width: min(45vw, 23vh, 210px) !important;
  height: min(45vw, 23vh, 210px) !important;
  border-radius: 31% 69% 52% 48% / 48% 42% 58% 52% !important;
  background: var(--blue) !important;
  color: var(--paper) !important;
  font-size: clamp(4rem, 18vw, 8rem) !important;
  text-shadow: none !important;
  box-shadow: -10px 12px 0 var(--paper), 0 22px 35px rgba(74,45,12,.14) !important;
}

body.game-page #keyboard,
body.game-page #color-keyboard,
body.game-page #finger-keyboard {
  width: 100%;
  padding: 10px 8px !important;
  border-radius: 24px;
  background: rgba(255,183,214,.74);
  box-shadow: 0 10px 24px rgba(90,54,19,.09);
}
body.game-page #keyboard { gap: 5px !important; }
body.game-page .key-row { width: 100%; gap: 4px !important; }
body.game-page .key-btn {
  width: clamp(44px, 11vw, 50px) !important;
  flex: 0 1 50px;
  height: clamp(44px, 10vw, 52px) !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-size: clamp(.9rem, 4vw, 1.18rem) !important;
  text-shadow: none !important;
  box-shadow: 0 4px 0 rgba(120,68,80,.13) !important;
}
body.game-page .key-btn.correct { background: var(--yellow) !important; }
body.game-page .key-btn.wrong { background: var(--pink) !important; }
body.game-page .color-btn,
body.game-page .fin-btn {
  width: clamp(52px, 15vw, 72px) !important;
  height: clamp(52px, 15vw, 72px) !important;
  border: 6px solid var(--paper) !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  box-shadow: 0 6px 0 rgba(17,17,17,.09), 0 10px 18px rgba(58,37,14,.12) !important;
}

body.game-page .progress-row { gap: 3px !important; padding: 2px 0 0 !important; }
body.game-page .dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: rgba(17,17,17,.16) !important;
  box-shadow: none !important;
  transform: none !important;
}
body.game-page .dot.done { background: var(--yellow) !important; }
body.game-page .dot.current { width: 20px !important; background: var(--orange) !important; }

body.game-page #home-btn,
body.game-page #settings-btn,
body.game-page #camera-btn {
  min-width: 48px;
  min-height: 48px;
  border: 0 !important;
  background: rgba(255,253,248,.97) !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  box-shadow: 0 4px 18px rgba(17,17,17,.12) !important;
}
body.game-page #home-btn {
  top: calc(var(--safe-top) + 14px) !important;
  bottom: auto !important;
  left: max(16px, var(--safe-left)) !important;
  font-size: 0 !important;
}
body.game-page #settings-btn {
  top: calc(var(--safe-top) + 14px) !important;
  right: max(16px, var(--safe-right)) !important;
  bottom: auto !important;
  font-size: 0 !important;
}
body.game-page #home-btn::before,
body.game-page #settings-btn::before {
  content: '';
  display: block;
  width: 23px;
  height: 23px;
  background: var(--ink);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
body.game-page #home-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10.8 12 2l10 8.8v10.4a.8.8 0 0 1-.8.8h-6.4v-7H9.2v7H2.8a.8.8 0 0 1-.8-.8V10.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10.8 12 2l10 8.8v10.4a.8.8 0 0 1-.8.8h-6.4v-7H9.2v7H2.8a.8.8 0 0 1-.8-.8V10.8Z'/%3E%3C/svg%3E");
}
body.game-page #settings-btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 2h5.2l.6 2.4c.5.2 1 .5 1.4.8L19 4.5 21.5 7l-.7 2.4c.3.4.6.9.8 1.4l2.4.6v5.2l-2.4.6c-.2.5-.5 1-.8 1.4l.7 2.4-2.5 2.5-2.4-.7c-.4.3-.9.6-1.4.8l-.6 2.4H9.4l-.6-2.4c-.5-.2-1-.5-1.4-.8l-2.4.7L2.5 21l.7-2.4c-.3-.4-.6-.9-.8-1.4L0 16.6v-5.2l2.4-.6c.2-.5.5-1 .8-1.4L2.5 7 5 4.5l2.4.7c.4-.3.9-.6 1.4-.8L9.4 2Zm2.6 7.6a4.4 4.4 0 1 0 0 8.8 4.4 4.4 0 0 0 0-8.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 2h5.2l.6 2.4c.5.2 1 .5 1.4.8L19 4.5 21.5 7l-.7 2.4c.3.4.6.9.8 1.4l2.4.6v5.2l-2.4.6c-.2.5-.5 1-.8 1.4l.7 2.4-2.5 2.5-2.4-.7c-.4.3-.9.6-1.4.8l-.6 2.4H9.4l-.6-2.4c-.5-.2-1-.5-1.4-.8l-2.4.7L2.5 21l.7-2.4c-.3-.4-.6-.9-.8-1.4L0 16.6v-5.2l2.4-.6c.2-.5.5-1 .8-1.4L2.5 7 5 4.5l2.4.7c.4-.3.9-.6 1.4-.8L9.4 2Zm2.6 7.6a4.4 4.4 0 1 0 0 8.8 4.4 4.4 0 0 0 0-8.8Z'/%3E%3C/svg%3E");
}

/* Camera als duidelijke mobiele component. */
body.game-page #browser-cam-preview {
  left: max(12px, var(--safe-left)) !important;
  right: max(12px, var(--safe-right)) !important;
  bottom: calc(var(--safe-bottom) + 10px) !important;
  width: auto !important;
  height: min(42vh, 410px) !important;
  border: 7px solid var(--paper) !important;
  border-radius: 28px !important;
  box-shadow: 0 14px 34px rgba(17,17,17,.18) !important;
}
body.game-page #cam-guide {
  inset: 18px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  border: 4px solid rgba(255,253,248,.9) !important;
  border-radius: 22px !important;
}
body.game-page.cam-open #game-screen { padding-bottom: calc(min(42vh, 410px) + var(--safe-bottom) + 28px) !important; }
body.game-page #cam-section {
  width: min(76vw, 320px) !important;
  max-height: 47vh;
  border: 7px solid var(--paper) !important;
  border-radius: 28px !important;
  box-shadow: 0 14px 34px rgba(17,17,17,.18) !important;
}
body.game-page--fingers.camera-mode .num-card {
  width: min(25vw, 86px) !important;
  height: min(25vw, 86px) !important;
  font-size: 3rem !important;
}
body.game-page--fingers.camera-mode #cam-section { max-height: 31dvh !important; }
body.game-page #cam-flip-btn,
body.game-page #flip-btn,
body.game-page #cam-preview-close {
  min-width: 44px !important;
  min-height: 44px !important;
}
body.game-page .s-body { padding-bottom: calc(28px + var(--safe-bottom)) !important; }
@media (max-width: 600px), (pointer: coarse) {
  body.game-page input,
  body.game-page select,
  body.game-page textarea { font-size: 16px !important; }
}

/* Finish: papierster, korte boodschap, Ted viert mee. */
body.game-page #finish-screen {
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  padding: calc(var(--safe-top) + 32px) max(22px, var(--safe-right)) calc(var(--safe-bottom) + 24px) max(22px, var(--safe-left));
  background: var(--cream) !important;
  text-align: center;
}
body.game-page #finish-screen.hidden { display: flex !important; }
.finish-visual { position: relative; width: min(76vw, 310px); height: min(42vh, 350px); }
.finish-star {
  position: absolute;
  inset: 4% 2% 10%;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--paper);
  clip-path: polygon(50% 0,61% 28%,88% 12%,78% 40%,100% 50%,76% 60%,88% 88%,60% 74%,50% 100%,40% 74%,12% 88%,24% 60%,0 50%,22% 40%,12% 12%,39% 28%);
  font-family: var(--font-display);
  font-size: 6rem;
  filter: drop-shadow(0 12px 12px rgba(72,45,9,.12));
}
.finish-visual .ted { position: absolute; width: 145px; height: 145px; right: -14px; bottom: -4px; z-index: 2; }
body.game-page .finish-emojis { display: none !important; }
body.game-page .finish-title {
  color: var(--ink) !important;
  font-size: clamp(2.1rem, 10vw, 3.3rem) !important;
  line-height: .9 !important;
  text-shadow: none !important;
}
body.game-page .finish-sub { color: var(--ink) !important; font-size: 1rem !important; }
body.game-page .star-reward { background: var(--pink) !important; color: var(--ink) !important; box-shadow: none !important; }
body.game-page #finish-screen .back-link {
  width: 100%;
  min-height: 52px;
  display: grid !important;
  place-items: center;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px;
  background: var(--blue) !important;
  color: var(--ink) !important;
  font-family: var(--font-display);
  font-weight: 800;
  text-decoration: none;
}
body.game-page #finish-screen .again-btn {
  background: var(--paper) !important;
  color: var(--ink) !important;
  box-shadow: 0 6px 0 rgba(76,52,24,.08), 0 12px 24px rgba(76,52,24,.10) !important;
}

/* Bestaande modals krijgen dezelfde materiaaltaal. */
body.game-page .s-panel,
body.game-page .srv-box,
body.game-page #info-modal > div,
body.game-page #cam-denied-modal > div {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-radius: 30px 30px 0 0 !important;
  box-shadow: 0 -12px 44px rgba(17,17,17,.18) !important;
  font-family: var(--font-body) !important;
}
body.game-page .s-title,
body.game-page .srv-title { color: var(--ink) !important; font-family: var(--font-display) !important; }

@media (max-height: 700px) {
  body.game-page #start-screen { padding-top: calc(var(--safe-top) + 60px); gap: 6px; }
  .start-prompt { min-height: 104px; padding-block: 18px; }
  .start-showcase { font-size: clamp(7.6rem, 38vh, 12rem); }
  .start-prompt .ted { width: 98px; height: 98px; top: -45px; }
  body.game-page .mode-btn { min-height: 96px; }
  body.game-page .mode-btn svg { width: 44px; height: 44px; }
  .mode-panel { padding-block: 12px; }
  body.game-page .big-letter { font-size: min(32vh, 10rem) !important; }
  .finish-visual { height: 32vh; }
}

@media (min-width: 700px) {
  body.game-page .screen { border-inline: 1px solid rgba(17,17,17,.06); }
}

@media (hover: hover) {
  .icon-button:hover, .circle-nav:hover { transform: translateY(-2px); }
  body.game-page .mode-btn:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible { outline: 4px solid var(--ink) !important; outline-offset: 3px !important; }