:root {
  --bg: #f8efe4;
  --surface: rgba(255, 251, 246, 0.86);
  --surface-strong: #fffaf4;
  --surface-soft: rgba(255, 255, 255, 0.42);
  --green: #075b49;
  --green-2: #0d6a56;
  --green-soft: #6b9a83;
  --orange: #ff7512;
  --orange-2: #ffad19;
  --yellow: #ffc23c;
  --text: #164f43;
  --muted: #706d69;
  --line: rgba(92, 69, 48, 0.10);
  --line-strong: rgba(92, 69, 48, 0.16);
  --shadow: 0 18px 50px rgba(92, 62, 35, 0.11), 0 3px 8px rgba(63, 49, 34, 0.07);
  --shadow-soft: 0 9px 24px rgba(77, 54, 34, 0.08), 0 2px 5px rgba(63, 49, 34, 0.05);
  --shadow-tile: 0 7px 14px rgba(74, 52, 35, 0.105), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --radius-s: 15px;
  --radius-m: 23px;
  --radius-l: 34px;
  --font: ui-rounded, "Arial Rounded MT Bold", "Avenir Next Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --letter-font: "Trebuchet MS", "Segoe UI", Arial, system-ui, sans-serif;
  --small-copy-font: "Trebuchet MS", "Segoe UI", Arial, system-ui, sans-serif;
  --logo-font: "Arial Rounded MT Bold", "Trebuchet MS", "Avenir Next", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { margin: 0; min-height: 100%; }
body { min-height: 100vh; font-family: var(--font); background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button { color: inherit; }
button:disabled { cursor: default; }

.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.93), rgba(255,255,255,0) 45%),
    linear-gradient(105deg, #fbf3e9 0%, #f8eee4 47%, #fbf5ed 100%);
}

.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.decor { position: absolute; z-index: 0; pointer-events: none; filter: saturate(.92); animation: blob-float 38s ease-in-out infinite alternate, blob-morph 26s ease-in-out infinite alternate; will-change: transform, border-radius; }
.decor--green {
  left: -198px; top: 18%; width: 312px; height: 505px;
  border-radius: 36% 64% 58% 42% / 18% 34% 66% 82%;
  background: linear-gradient(145deg, #3b8b72, #24745f);
  opacity: .88;
  transform: rotate(-6deg);
}
.decor--orange {
  right: -154px; top: 16%; width: 292px; height: 468px;
  border-radius: 54% 46% 34% 66% / 16% 34% 66% 84%;
  background: linear-gradient(180deg, #ff6d0c, #ff9717);
  animation-duration: 42s, 30s;
}
.decor--yellow {
  left: -140px; bottom: -145px; width: 412px; height: 350px;
  border-radius: 27% 73% 41% 59% / 46% 23% 77% 54%;
  background: linear-gradient(145deg, #ffc13c, #ffad1d);
  transform: rotate(15deg);
  opacity: .96;
  animation-duration: 40s, 29s;
}
.decor--cream {
  right: -126px; bottom: -112px; width: 330px; height: 216px;
  border-radius: 66% 34% 26% 74% / 41% 58% 42% 59%;
  background:
    radial-gradient(circle, rgba(221,174,94,.23) 0 2px, transparent 2.4px) 0 0/22px 22px,
    rgba(255,247,231,.84);
  opacity: .75;
  animation-duration: 46s, 33s;
}

.ring { position: absolute; width: 24px; height: 24px; border: 5px solid var(--orange-2); border-radius: 50%; opacity: .88; z-index: 1; }
.ring::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--orange); left:50%; top:50%; transform:translate(-50%,-50%); }
.ring--one { left: 14%; top: 23%; }
.ring--two { right: 14%; top: 29%; transform: scale(.72); }
.ring--three { right: 7%; bottom: 12%; transform: scale(.78); }
.ring--four { left: 14%; bottom: 10%; transform: scale(.68); }
.dots { position:absolute; z-index:1; font-weight:900; letter-spacing:13px; line-height:1.25; opacity:.78; pointer-events:none; }
.dots--left { left:7%; bottom:23%; color:var(--green); transform:rotate(8deg); }
.dots--right { right:8%; bottom:29%; color:var(--orange); transform:rotate(-8deg); }

.ornament-float { animation:ornament-float 62s ease-in-out infinite alternate; }
.ornament-float--alt { animation-duration:73s; animation-name:ornament-float-alt; }
.ornament-float--slow { animation-duration:84s; }
.ornament-float--alt2 { animation-duration:78s; animation-name:ornament-float-alt2; }

/* Gameplay background rings move at half the previous speed; blobs keep their existing timing. */
.screen--game .ring.ornament-float { animation-duration:124s; }
.screen--game .ring.ornament-float--alt { animation-duration:146s; }
.screen--game .ring.ornament-float--slow { animation-duration:168s; }
.screen--game .ring.ornament-float--alt2 { animation-duration:156s; }

.start-sie-brand { display:flex; align-items:flex-start; pointer-events:none; }
.start-sie-brand__logo { width:96px; height:auto; display:block; }

.ui-svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.help-mark { font-size: 28px; line-height: 1; transform: translateY(-1px); font-weight: 900; color:var(--green); }

.top-actions { display:flex; gap:14px; align-items:center; }
.icon-button, .modal-close {
  color: var(--green);
  border: 1px solid rgba(73,57,42,.06);
  background: rgba(255, 251, 246, .9);
  box-shadow: 0 6px 16px rgba(78,61,43,.09), inset 0 1px 0 rgba(255,255,255,.9);
  width: 56px; height: 56px; border-radius:50%;
  display:grid; place-items:center; font-size:28px; font-weight:850; cursor:pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.icon-button .ui-svg { width:28px; height:28px; }
.icon-button:hover, .modal-close:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: rgba(255,255,255,.94); }
.icon-button:focus-visible, button:focus-visible, input:focus-visible { outline: 4px solid rgba(255, 173, 25, .36); outline-offset: 3px; }

/* START */
.screen--start { display:grid; place-items:center; }
.start-top { position:absolute; inset:0 0 auto 0; z-index:3; display:flex; justify-content:space-between; align-items:flex-start; padding:44px 4vw 0; }
.micro-brand { display:flex; align-items:baseline; gap:9px; font-size:27px; color:#2f3432; letter-spacing:-.5px; }
.micro-brand b { color:var(--green); font-weight:950; letter-spacing:-1.5px; }
.start-content { position:relative; z-index:2; width:min(610px, 86vw); text-align:center; padding:105px 0 72px; }
.brand { display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.brand__word { font-family:var(--logo-font); font-weight:900; color:var(--green); font-size:clamp(60px, 6.5vw, 92px); letter-spacing:-4.4px; text-shadow:0 3px 0 rgba(255,255,255,.72); display:inline-flex; align-items:flex-end; gap:0; }
.brand__word > span { display:inline-block; }
.brand__orange { color:var(--orange); }
.brand__tag { font-family:var(--small-copy-font); margin:12px auto 0; width:max-content; display:block; text-align:center; font-size:15px; letter-spacing:.44em; font-weight:900; color:var(--green); white-space:nowrap; }
.brand--compact { align-items:flex-start; }
.brand--compact .brand__word { font-size:46px; letter-spacing:-3px; }
.brand--compact .brand__tag { font-size:8.6px; letter-spacing:.33em; margin-top:6px; }

.start-content h1, .game-content h1 { margin: 44px 0 5px; font-size:clamp(30px, 3vw, 43px); color:var(--green); letter-spacing:-1.1px; }
.lead { margin: 0; color:var(--muted); font-size:19px; }
.track-list { margin-top:32px; display:grid; gap:15px; }
.track-card {
  width:100%; min-height:108px; border:1px solid var(--line); border-radius:24px; padding:17px 24px;
  display:grid; grid-template-columns:86px 1fr 30px; gap:20px; align-items:center; text-align:left;
  background:rgba(255,252,247,.73); box-shadow:var(--shadow-soft); cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.track-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); background:rgba(255,255,255,.92); }
.track-card--2 { background:linear-gradient(90deg, rgba(255,250,241,.91), rgba(255,239,204,.62)); }
.track-card--3 { background:linear-gradient(90deg, rgba(255,250,245,.91), rgba(255,231,218,.64)); }
.track-card__icon { display:grid; place-items:center; width:86px; height:86px; border-radius:20px; background:transparent; color:inherit; box-shadow:none; overflow:visible; }
.track-svg { width:45px; height:45px; stroke-width:2.5; }
.track-icon-img { width:86px; height:86px; display:block; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(67,48,30,.06)); }
.track-card__copy { display:flex; flex-direction:column; gap:6px; }
.track-card__copy strong { font-size:24px; color:var(--green); }
.track-card__copy small { font-size:16px; color:var(--muted); }
.track-card__arrow { font-size:50px; font-weight:300; color:var(--green); transform:translateY(-2px); }
.return-note { color:var(--muted); font-size:14px; margin:18px 0 0; }


.screen--game .decor--yellow,
.screen--game .decor--cream,
.screen--game .ring--four { display:none; }
.screen--game .decor--green { top:auto; bottom:-56px; height:505px; width:312px; left:-186px; }
.screen--game .dots--left { bottom:48%; }
.screen--game .ring--one { left: 7%; top: 26%; animation-name: game-ring-left-top; }
.screen--game .ring--two { right: 7%; top: 34%; animation-name: game-ring-right-mid; }
.screen--game .ring--three { right: 10%; bottom: 12%; animation-name: game-ring-right-low; }
.screen--game .dots--left { left: 5.5%; bottom: 39%; animation-name: game-dots-left; }
.screen--game .dots--right { right: 6%; bottom: 13%; animation-name: game-dots-right; }

/* GAME */
.screen--game { display:grid; place-items:center; min-height:100svh; }
.game-ui-layer { display:contents; }
.game-header { position:absolute; z-index:4; top:0; left:0; right:0; display:grid; grid-template-columns:220px 1fr 220px; align-items:start; gap:20px; padding:24px 4vw 0; }
.game-header .progress-cards { justify-self:center; display:flex; gap:25px; margin-top:38px; }
.game-header .top-actions { justify-self:end; }
.progress-card { min-width:230px; min-height:74px; padding:13px 20px; border:1px solid var(--line); border-radius:22px; background:rgba(255,251,246,.86); box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:15px; }
.progress-card small { display:block; font-weight:900; font-size:12px; color:var(--green); margin-bottom:3px; letter-spacing:.1px; }
.progress-card strong { display:block; font-size:20px; color:var(--green); white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.progress-icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:var(--green); flex:0 0 auto; }
.progress-icon .ui-svg { width:40px; height:40px; stroke-width:2.7; }
.progress-icon--bars { color:var(--orange); }
.progress-icon--bars .ui-svg { stroke-width:3.4; }

.game-content { position:relative; z-index:2; width:min(760px, 84vw); min-height:100svh; margin:0 auto; text-align:center; display:flex; flex-direction:column; justify-content:center; padding:154px 0 54px; }
.game-content h1 { margin:0 0 5px; font-size:clamp(32px, 3.2vw, 44px); }
.game-content .lead { font-family:var(--small-copy-font); font-size:17px; font-weight:500; }
.cue-card { font-family:var(--small-copy-font); width:min(620px,100%); margin:21px auto 26px; min-height:68px; padding:8px 23px 8px 12px; background:rgba(255,251,246,.74); border:1px solid var(--line); border-radius:34px; box-shadow:var(--shadow-soft); display:flex; justify-content:flex-start; gap:16px; align-items:center; color:#676762; font-size:17px; text-align:left; }
.cue-card__art { width:64px; height:48px; border-radius:18px; display:grid; place-items:center; background:rgba(255,255,255,.43); flex:0 0 auto; }
.cue-art-svg { width:52px; height:48px; fill:var(--green-soft); stroke:var(--green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cue-art-svg .accent { fill:var(--orange-2); stroke:var(--orange); }
.cue-art-svg .soft { fill:#fff; stroke:#dedbd4; }
.cue-card__text { flex:1; font-weight:500; }
.play-stage { position:relative; width:min(430px, 100%); margin:0 auto; overflow:visible; }
.board { width:100%; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
.board-slot, .tile { aspect-ratio:1/1; border-radius:17px; }
.board-slot--empty { border:1px solid rgba(29,93,76,.025); background:rgba(255,255,255,.08); }
.tile { font-family:var(--letter-font); border:1px solid rgba(84,63,43,.08); background:linear-gradient(145deg, #fffaf2, #f5eadf); color:var(--green); box-shadow:var(--shadow-tile); font-weight:950; font-size:clamp(27px, 3.2vw, 41px); cursor:pointer; transition:transform .14s ease, opacity .2s ease, box-shadow .14s ease, filter .14s ease, background .14s ease, border-color .14s ease; }
.tile:hover:not(:disabled) { transform:translateY(-3px) scale(1.018); box-shadow:0 12px 20px rgba(74,52,35,.15), inset 0 1px 0 rgba(255,255,255,.6); }
.tile:active:not(:disabled) { transform:translateY(1px) scale(.985); }
.tile--used { opacity:.16; transform:scale(.94); box-shadow:none; filter:saturate(.4); border-color:rgba(84,63,43,.03); cursor:default; }
.tile--just-used { animation:tile-used .46s ease both; }
.tile--hint { outline:4px solid rgba(255,166,20,.40) !important; outline-offset:3px; transform:translateY(-2px) scale(1.05) !important; box-shadow:0 13px 24px rgba(255,145,15,.19), inset 0 1px 0 rgba(255,255,255,.72) !important; background:linear-gradient(145deg, #fff7e2, #ffe2a8) !important; color:var(--green) !important; }
.answer-label { font-family:var(--small-copy-font); margin-top:20px; color:var(--green); font-weight:900; font-size:13px; letter-spacing:.2px; }
.answer-box { font-family:var(--small-copy-font); width:min(620px,100%); height:68px; margin:8px auto 0; border:1px solid var(--line); border-radius:21px; background:rgba(255,251,246,.82); box-shadow:var(--shadow-soft); display:flex; align-items:center; justify-content:flex-start; padding:0 28px; color:#aaa29c; font-size:19px; text-align:left; }

.answer-box > span:not(.answer-caret) { font-family:var(--small-copy-font); font-weight:500; }
.answer-box strong { font-family:var(--letter-font); color:var(--green); font-size:29px; letter-spacing:5px; }
.answer-box--retry { animation:soft-shake .25s ease both; }
.answer-caret { width:3px; height:35px; flex:0 0 auto; background:var(--green); border-radius:4px; margin-left:7px; margin-right:0; animation:blink 1s step-end infinite; }
.answer-caret--empty { margin-left:0; margin-right:14px; }
.hint-button, .primary-button { border:1px solid var(--line); border-radius:23px; padding:13px 23px; margin-top:22px; background:rgba(255,251,246,.88); box-shadow:var(--shadow-soft); font-weight:900; color:var(--green); cursor:pointer; font-size:15px; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; }
.hint-button { align-self:center; width:auto; min-width:208px; }
.hint-button:hover, .primary-button:hover { transform:translateY(-2px); box-shadow:var(--shadow); background:rgba(255,255,255,.96); }
.hint-bulb { color:var(--orange); margin-right:8px; font-size:25px; vertical-align:-2px; }

.mobile-support-zone { display:none; }

/* Companion is anchored to the board, not the viewport. */
.companion { position:absolute; left:auto; right:-278px; bottom:-22px; z-index:8; width:252px; height:366px; pointer-events:none; }
.companion__button { pointer-events:auto; width:228px; height:318px; position:absolute; right:0; bottom:0; border:0; padding:0; background:transparent; cursor:pointer; }
.companion__button svg { width:100%; height:100%; overflow:visible; }
.companion-shell { transform-origin:81px 122px; }
.companion-body { fill:#ffad17; }
.companion-highlight { fill:rgba(255,255,255,.18); }
.companion-eye-ring { fill:#fff; }
.companion-eye { fill:#ee6b0a; }
.companion-shadow { fill:rgba(67,45,25,.09); }
.companion--success .companion-shadow, .companion--session_end .companion-shadow { opacity:0; }
.companion-accent { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.companion-accent--left, .companion-accent--under { stroke:var(--green); stroke-width:7; }
.companion--observe .companion-shell, .companion--idle .companion-shell { animation:companion-breathe 4.6s ease-in-out infinite, companion-bend 6.2s ease-in-out infinite; }
.companion--curious .companion-shell, .companion--peek .companion-shell { animation:peek-lean .82s ease-in-out 1; }
.companion--sway .companion-shell { animation:gentle-sway 1.08s ease-in-out 1; }
.companion--greet .companion-shell { animation:hello-bend 1s ease-in-out 1, companion-bend 1.3s ease-in-out 1; }
.companion--success .companion-shell { animation:jump .78s cubic-bezier(.2,.85,.3,1.25) 2; }
.companion--soft_retry .companion-shell, .companion--wiggle .companion-shell { animation:tilt .54s ease-in-out 1; }
.companion__button:focus-visible { outline:3px solid rgba(255,173,25,.52); outline-offset:10px; border-radius:999px; }
.companion__bubble { position:absolute; right:10px; left:auto; bottom:306px; min-width:220px; max-width:300px; padding:14px 17px; border-radius:22px; background:rgba(255,252,246,.98); border:1px solid var(--line); box-shadow:var(--shadow-soft); color:var(--green); font-size:14px; font-weight:800; text-align:center; pointer-events:none; }
.companion__bubble::after { content:""; position:absolute; right:62px; bottom:-8px; width:14px; height:14px; background:inherit; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); }

.success-toast { position:fixed; z-index:9; top:49%; left:50%; transform:translate(-50%,-50%); min-width:250px; padding:21px 32px; border-radius:27px; background:rgba(255,252,246,.96); box-shadow:0 24px 70px rgba(44,71,58,.18); text-align:center; animation:success-in .35s ease both; }
.success-toast strong, .success-toast span { display:block; }
.success-toast strong { font-size:28px; color:var(--green); }
.success-toast span { font-size:24px; font-weight:950; color:var(--orange); letter-spacing:3px; margin-top:4px; }

/* Optional on-screen keyboard. */
.onscreen-keyboard { width:min(700px,100%); margin:18px auto 0; padding:10px; border:1px solid var(--line); border-radius:20px; background:rgba(255,251,246,.66); box-shadow:var(--shadow-soft); display:grid; gap:6px; }
.onscreen-keyboard__row { display:flex; justify-content:center; gap:5px; }
.virtual-key { font-family:var(--letter-font); min-width:36px; height:38px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.74); color:var(--green); font-weight:900; font-size:13px; cursor:pointer; box-shadow:0 2px 4px rgba(70,50,30,.05); }
.virtual-key:hover { background:#fff8ed; transform:translateY(-1px); }
.virtual-key--action { min-width:118px; font-size:12px; }

/* OVERLAYS */
.overlay { position:fixed; inset:0; z-index:20; background:rgba(43,39,35,.38); backdrop-filter:blur(7px); display:grid; place-items:center; padding:24px; }
.modal { position:relative; width:min(620px, 96vw); max-height:92vh; overflow:auto; background:rgba(255,250,243,.98); border:1px solid rgba(255,255,255,.48); border-radius:34px; box-shadow:0 40px 100px rgba(36,32,28,.28); padding:42px; }
.modal-close { position:absolute; right:22px; top:20px; width:46px; height:46px; font-size:31px; z-index:2; }
.modal--help { text-align:center; width:min(520px, 94vw); }
.modal--help h2, .settings-heading h2 { font-size:34px; color:var(--green); margin:5px 0; }
.help-companion { width:80px; margin:0 auto; }
.help-steps { list-style-position:inside; padding:0; margin:25px 0; display:grid; gap:16px; font-size:18px; color:#5f625e; }
.primary-button { background:linear-gradient(145deg, #12664f, #075442); color:white; min-width:220px; }

.modal--settings { width:min(1180px, 96vw); max-height:92vh; padding:24px 24px 14px; }
.settings-heading { text-align:center; margin-bottom:12px; }
.modal--settings .settings-heading h2 { font-size:30px; margin:0 0 2px; }
.modal--settings .settings-heading p { font-size:13px; line-height:1.25; }
.settings-heading p { color:var(--muted); margin:0; }
.settings-grid { display:grid; grid-template-columns:.96fr 1.24fr 1.08fr; gap:10px; }
.settings-panel { min-width:0; border:1px solid rgba(85,65,46,.07); border-radius:20px; padding:14px 15px; background:rgba(255,255,255,.34); }
.settings-panel h3 { margin:0 0 13px; font-size:15px; color:var(--green); display:flex; align-items:center; gap:8px; }
.settings-icon { width:25px; height:25px; padding:4px; border-radius:50%; background:#fff5e8; stroke-width:2.2; overflow:visible; }
.field-label { display:block; margin:10px 0 6px; color:#315e53; font-size:11px; font-weight:900; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; color:#31574e; font-weight:700; font-size:12px; }
.toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.toggle-row i { width:43px; height:24px; border-radius:20px; background:#d9d3ca; position:relative; flex:0 0 auto; cursor:pointer; }
.toggle-row i::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:white; box-shadow:0 2px 4px rgba(0,0,0,.16); transition:left .16s ease; }
.toggle-row input:checked + i { background:var(--orange); }
.toggle-row input:checked + i::after { left:22px; }
.range-row { display:grid; gap:6px; padding-top:8px; color:#31574e; font-size:12px; font-weight:800; }
.range-row input { accent-color:var(--orange); width:100%; }

.sound-test-button { margin-top:8px; width:100%; min-height:38px; border:1px solid var(--line); border-radius:14px; background:rgba(255,251,246,.82); color:var(--green); font-weight:850; font-size:11.5px; cursor:pointer; box-shadow:0 3px 9px rgba(78,61,43,.06); }
.sound-test-button:hover { background:#fffdf8; transform:translateY(-1px); }
.setting-options { display:flex; gap:5px; }
.setting-options--vertical { display:grid; }
.setting-option { flex:1; min-height:34px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.44); padding:5px 7px; font-size:10px; font-weight:800; cursor:pointer; }
.setting-options--vertical .setting-option { text-align:left; font-size:11px; display:flex; gap:7px; align-items:center; }
.setting-option__icon { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.62); color:var(--green); flex:0 0 auto; }
.setting-option__icon .track-svg { width:21px; height:21px; }
.setting-option.is-selected { background:#ffe0a0; border-color:rgba(229,164,51,.23); color:#24594d; }
.progress-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.progress-summary span { text-align:center; font-size:9.5px; color:var(--muted); }
.progress-summary b { display:block; font-size:20px; color:var(--green); }
.muted { color:var(--muted); font-size:10.5px; line-height:1.35; }
.feedback-row, .reset-button { width:100%; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.46); min-height:38px; padding:8px 10px; display:flex; justify-content:space-between; align-items:center; color:#31574e; font-size:11px; font-weight:800; margin-bottom:6px; cursor:pointer; }
.reset-button { color:#885f52; justify-content:center; margin-top:10px; }
.settings-done { display:block; margin:12px auto 0; min-width:260px; min-height:48px; background:linear-gradient(145deg, #12664f, #075442); color:#fff; }
@media (min-width: 1001px) and (min-height: 820px) {
  .modal--settings { padding-bottom: 12px; }
  .modal--settings .toggle-row i { width:40px; height:22px; }
  .modal--settings .toggle-row i::after { width:16px; height:16px; }
  .modal--settings .toggle-row input:checked + i::after { left:21px; }
  .modal--settings .session-stop-button, .modal--settings .progress-open-button { min-height: 38px; font-size: 12px; }
}

@keyframes blink { 0%,48%{opacity:1} 49%,100%{opacity:.08} }
@keyframes soft-shake { 0%,100%{transform:translateX(0)} 35%{transform:translateX(-5px)} 70%{transform:translateX(5px)} }
@keyframes tile-used { 0%{opacity:1; transform:scale(1); outline:4px solid rgba(255,173,25,.35)} 35%{opacity:.75; transform:scale(1.04)} 100%{opacity:.16; transform:scale(.94); outline-color:transparent} }
@keyframes companion-breathe { 0%,100%{transform:translateY(0) scaleX(1) scaleY(1)} 50%{transform:translateY(-1px) scaleX(.995) scaleY(1.012)} }
@keyframes companion-bend { 0%,100%{transform:translateX(0) rotate(0deg) skewX(0deg) scaleX(1)} 18%{transform:translateX(-1px) rotate(-0.9deg) skewX(-1.4deg) scaleX(.992)} 42%{transform:translateX(1px) rotate(1.25deg) skewX(1.8deg) scaleX(1.01)} 68%{transform:translateX(-1px) rotate(-1.15deg) skewX(-1.2deg) scaleX(.995)} 84%{transform:translateX(1px) rotate(.8deg) skewX(.9deg) scaleX(1.008)} }
@keyframes peek-lean { 0%,100%{transform:translateX(0) rotate(0) skewX(0)} 50%{transform:translateX(-4px) rotate(-2deg) skewX(-2deg)} }
@keyframes gentle-sway { 0%,100%{transform:translateX(0) rotate(0) skewX(0)} 25%{transform:translateX(-1px) rotate(-2deg) skewX(-2.2deg)} 55%{transform:translateX(1px) rotate(1.6deg) skewX(1.8deg)} 80%{transform:translateX(-1px) rotate(-.9deg) skewX(-1deg)} }
@keyframes hello-bend { 0%,100%{transform:rotate(0) skewX(0)} 50%{transform:rotate(-1.4deg) skewX(-1.8deg)} }
@keyframes curious-peek { 0%,100%{transform:translateX(0) rotate(0)} 45%{transform:translateX(-3px) rotate(-2deg)} }
@keyframes jump { 0%,100%{transform:translateY(0) rotate(0) skewX(0)} 30%{transform:translateY(-10px) rotate(-1.4deg) skewX(-1.4deg)} 55%{transform:translateY(-18px) rotate(2.8deg) skewX(2.4deg)} 78%{transform:translateY(-7px) rotate(-1deg) skewX(-1deg)} }
@keyframes small-hop { 0%,100%{transform:translateY(0) rotate(0)} 45%{transform:translateY(-10px) rotate(3deg)} }
@keyframes tilt { 0%,100%{transform:rotate(0) skewX(0)} 50%{transform:rotate(5deg) skewX(1.6deg)} }
@keyframes success-in { from{opacity:0; transform:translate(-50%,-45%) scale(.92)} to{opacity:1; transform:translate(-50%,-50%) scale(1)} }
@keyframes ornament-float { 0%{transform:translate3d(0,0,0) rotate(0deg)} 30%{transform:translate3d(14vw,-10vh,0) rotate(14deg)} 65%{transform:translate3d(28vw,16vh,0) rotate(-9deg)} 100%{transform:translate3d(-10vw,22vh,0) rotate(8deg)} }
@keyframes ornament-float-alt { 0%{transform:translate3d(0,0,0) rotate(0deg) scale(.94)} 48%{transform:translate3d(-22vw,12vh,0) rotate(-13deg) scale(1)} 100%{transform:translate3d(12vw,-18vh,0) rotate(9deg) scale(1.04)} }
@keyframes ornament-float-alt2 { 0%{transform:translate3d(0,0,0) rotate(0deg)} 48%{transform:translate3d(24vw,-14vh,0) rotate(12deg)} 100%{transform:translate3d(-16vw,18vh,0) rotate(-10deg)} }
@keyframes blob-float { 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} 30%{transform:translate3d(26px,-34px,0) rotate(-5deg) scale(1.03)} 68%{transform:translate3d(-42px,22px,0) rotate(4deg) scale(1.09)} 100%{transform:translate3d(16px,36px,0) rotate(-2deg) scale(1.04)} }
@keyframes blob-morph { 0%,100%{border-radius:29% 71% 56% 44% / 18% 37% 63% 82%;} 20%{border-radius:61% 39% 23% 77% / 29% 67% 33% 71%;} 45%{border-radius:34% 66% 63% 37% / 60% 24% 76% 40%;} 70%{border-radius:72% 28% 36% 64% / 33% 72% 28% 67%;} 85%{border-radius:41% 59% 25% 75% / 70% 35% 65% 30%;} }

@media (min-width: 761px) and (max-width: 1180px) {
  .game-content { width:min(710px, 84vw); padding-top:162px; }
  .play-stage { width:min(410px, 100%); }
  .game-header .progress-cards { margin-top:34px; }
  .companion { right:-234px; width:228px; height:330px; bottom:-18px; }
  .companion__button { width:206px; height:288px; }
  .companion__bubble { right:8px; bottom:296px; min-width:192px; max-width:248px; }
}

@media (max-width: 1000px) {
  .screen--game .ring--one { left: 4%; top: 23%; }
  .screen--game .ring--two { right: 4%; top: 31%; }
  .screen--game .dots--left { left: 3%; bottom: 34%; }
  .screen--game .dots--right { right: 3%; bottom: 10%; }
}
@media (max-width: 700px) {
  .screen--game .ring--one { left: 3%; top: 17%; }
  .screen--game .ring--two { right: 3%; top: 36%; }
  .screen--game .ring--three { right: 4%; bottom: 23%; }
  .screen--game .dots--left { left: 2%; top: 31%; bottom: auto; }
  .screen--game .dots--right { right: 2%; bottom: 16%; }
}
@media (max-width: 1000px) {
  .game-header { grid-template-columns:150px 1fr 150px; padding-inline:24px; }
  .progress-card { min-width:188px; padding:11px 14px; }
  .progress-card strong { font-size:17px; max-width:148px; }
  .settings-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px) {
  .screen { min-height:100svh; overflow-y:auto; }
  .decor--green { width:220px; height:380px; left:-148px; top:22%; }
  .decor--orange { width:206px; height:336px; right:-132px; top:18%; }
  .decor--yellow { width:302px; height:246px; left:-110px; bottom:-96px; }
  .decor--cream { width:246px; height:164px; right:-92px; bottom:-62px; }
  .dots, .ring--three, .ring--four { display:none; }
  .start-top { padding:30px 18px 0; }
  .start-sie-brand__logo { width:74px; }
  .micro-brand { font-size:19px; }
  .icon-button { width:44px; height:44px; font-size:22px; }
  .icon-button .ui-svg { width:24px; height:24px; }
  .start-content { width:min(92vw, 560px); padding:94px 0 44px; }
  .brand__word { font-size:59px; }
  .brand__tag { font-size:10px; letter-spacing:7px; }
  .start-content h1 { margin-top:31px; font-size:29px; }
  .lead { font-size:15px; }
  .track-list { margin-top:26px; gap:12px; }
  .track-card { grid-template-columns:64px 1fr 22px; min-height:91px; padding:12px 14px; gap:12px; }
  .track-card__icon { width:64px; height:64px; border-radius:16px; }
  .track-svg { width:34px; height:34px; }
  .track-icon-img { width:64px; height:64px; }
  .track-card__copy strong { font-size:19px; }
  .track-card__copy small { font-size:12px; }
  .track-card__arrow { font-size:37px; }
  .game-header { display:flex; align-items:center; justify-content:space-between; padding:15px 15px 0; }
  .brand--compact .brand__word { font-size:31px; }
  .brand--compact .brand__tag { display:none; }
  .game-header .progress-cards { position:absolute; top:86px; left:50%; transform:translateX(-50%); width:calc(100vw - 30px); gap:7px; }
  .progress-card { min-width:0; flex:1; min-height:56px; height:56px; padding:7px 10px; border-radius:17px; gap:7px; }
  .progress-icon { width:29px; height:29px; }
  .progress-icon .ui-svg { width:28px; height:28px; }
  .progress-card small { font-size:8.5px; }
  .progress-card strong { font-size:11.5px; max-width:105px; }
  .screen--game { display:block; }
  .game-content { width:calc(100vw - 28px); min-height:0; margin:0 auto; padding:168px 0 36px; display:block; }
  .game-content h1 { font-size:27px; margin-top:13px; }
  .game-content .lead { font-size:13px; }
  .cue-card { margin-top:14px; margin-bottom:18px; min-height:56px; padding:7px 13px 7px 8px; font-size:13px; border-radius:23px; gap:10px; }
  .cue-card__art { width:50px; height:42px; border-radius:14px; }
  .cue-art-svg { width:43px; height:40px; }
  .play-stage { width:100%; padding-bottom:84px; }
  .board { gap:7px; width:100%; }
  .board-slot, .tile { border-radius:13px; }
  .tile { font-size:clamp(22px, 7vw, 33px); }
  .answer-label { margin-top:15px; }
  .answer-box { height:59px; border-radius:18px; }
  .answer-box strong { font-size:23px; letter-spacing:3px; }
  .hint-button { margin-top:13px; }
  .companion { width:160px; height:232px; left:auto; right:-74px; bottom:-4px; }
  .companion__button { width:144px; height:204px; }
  .companion__bubble { right:6px; bottom:244px; min-width:168px; max-width:212px; padding:10px 12px; font-size:12px; }
  .success-toast { top:52%; min-width:215px; padding:18px 24px; }
  .onscreen-keyboard { margin-top:14px; padding:7px 4px; gap:4px; overflow-x:auto; }
  .onscreen-keyboard__row { gap:3px; min-width:max-content; }
  .virtual-key { min-width:28px; height:34px; font-size:11px; border-radius:8px; }
  .virtual-key--action { min-width:100px; }
  .modal { padding:34px 20px 22px; border-radius:26px; }
  .modal--settings { width:96vw; max-height:94svh; padding:28px 14px 16px; }
  .settings-grid { grid-template-columns:1fr; }
  .settings-heading h2 { font-size:28px; }
}

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

/* SESSION LOOP */
.session-end-notice {
  align-self:center;
  margin:10px auto -4px;
  padding:8px 14px;
  border:1px solid rgba(255,173,25,.22);
  border-radius:999px;
  background:rgba(255,247,226,.82);
  color:#6f665b;
  font-size:12.5px;
  font-weight:800;
  box-shadow:0 4px 12px rgba(78,56,34,.05);
}
.session-stop-button {
  width:100%;
  margin-top:14px;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.5);
  color:#6d6258;
  font-size:11.5px;
  font-weight:850;
  cursor:pointer;
}
.session-stop-button:hover { background:#fff9ef; }

.screen--summary { display:grid; place-items:center; }
.summary-top { position:absolute; z-index:4; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start; padding:28px 4vw 0; }
.session-summary-card {
  position:relative;
  z-index:2;
  width:min(700px, 88vw);
  padding:48px 48px 42px;
  text-align:center;
  border:1px solid rgba(84,63,43,.08);
  border-radius:36px;
  background:rgba(255,251,246,.78);
  box-shadow:var(--shadow);
}
.summary-companion { width:92px; margin:-10px auto 6px; }
.summary-companion svg { width:100%; height:auto; }
.session-summary-card h1 { margin:6px 0 8px; color:var(--green); font-size:clamp(34px,4vw,48px); letter-spacing:-1px; }
.summary-lead { margin:0; color:var(--muted); font-size:18px; }
.summary-lead strong { color:var(--green); }
.summary-words { margin-top:30px; }
.summary-words > span { display:block; margin-bottom:13px; color:var(--green); font-size:13px; font-weight:900; letter-spacing:.2px; }
.summary-word-list { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.summary-word {
  min-width:150px;
  padding:13px 16px 14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.55);
  box-shadow:var(--shadow-soft);
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
}
.summary-word__art { width:42px; height:42px; display:grid; place-items:center; }
.summary-word__art .cue-art-svg { width:40px; height:40px; }
.summary-word strong { color:var(--green); font-size:20px; letter-spacing:1.5px; }
.summary-actions { margin-top:30px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.summary-actions .primary-button, .secondary-button { margin-top:0; min-width:180px; }
.secondary-button {
  border:1px solid var(--line);
  border-radius:23px;
  padding:13px 23px;
  background:rgba(255,251,246,.9);
  box-shadow:var(--shadow-soft);
  color:var(--green);
  font-weight:900;
  cursor:pointer;
}
.secondary-button:hover { transform:translateY(-2px); box-shadow:var(--shadow); }

@media (max-width:760px) {
  .summary-top { padding:16px 16px 0; }
  .session-summary-card { width:calc(100vw - 28px); padding:34px 18px 28px; margin-top:80px; border-radius:28px; }
  .summary-companion { width:76px; }
  .summary-lead { font-size:15px; }
  .summary-word { min-width:130px; flex:1 1 130px; }
  .summary-actions { display:grid; }
  .summary-actions .primary-button, .secondary-button { width:100%; min-width:0; }
}

/* v0.7 — gameplay hardening controls */
.answer-row {
  width:min(700px, 100%);
  margin:8px auto 0;
  display:flex;
  align-items:stretch;
  gap:10px;
}
.answer-row .answer-box {
  width:auto;
  flex:1 1 auto;
  min-width:0;
  margin:0;
}
.delete-letter-button {
  flex:0 0 72px;
  min-height:68px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,251,246,.88);
  box-shadow:var(--shadow-soft);
  color:var(--green);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
  touch-action:manipulation;
}
.delete-letter-button span { font-size:26px; line-height:1; }
.delete-letter-button small { font-size:9px; font-weight:900; letter-spacing:.1px; }
.delete-letter-button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow); background:#fffdf9; }
.delete-letter-button:active:not(:disabled) { transform:translateY(1px) scale(.98); }
.delete-letter-button:disabled { opacity:.34; box-shadow:none; cursor:default; }

.screen--recovery { display:grid; place-items:center; padding:24px; }
.recovery-card {
  position:relative;
  z-index:3;
  width:min(520px, 92vw);
  text-align:center;
  padding:38px 34px;
  border:1px solid var(--line);
  border-radius:32px;
  background:rgba(255,251,246,.94);
  box-shadow:var(--shadow);
}
.recovery-card h1 { margin:24px 0 8px; color:var(--green); font-size:32px; }
.recovery-card p { margin:7px 0; color:var(--muted); line-height:1.45; }
.recovery-actions { margin-top:24px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }

@media (max-width: 760px) {
  .answer-row { gap:7px; }
  .delete-letter-button { flex-basis:58px; min-height:62px; border-radius:17px; }
  .delete-letter-button span { font-size:23px; }
  .delete-letter-button small { font-size:8px; }
}

/* Native interactive elements stay predictable on touch devices. */
.tile, .hint-button, .icon-button, .virtual-key, .track-card, .companion__button, .delete-letter-button {
  touch-action: manipulation;
}
.tile { user-select:none; -webkit-user-select:none; }

/* v0.21 — responsive browser layout
   Keep the full game reachable on narrow and/or short browser viewports. */
html, body, #app { width:100%; max-width:100%; overflow-x:hidden; }
.screen { width:100%; max-width:100%; overflow-x:hidden; overflow-y:auto; }
.start-content, .game-content, .session-summary-card, .recovery-card { max-width:calc(100vw - 24px); }

/* Desktop/tablet companion progressively moves inward instead of being clipped. */
@media (min-width:1001px) and (max-width:1180px) {
  .companion { right:-195px; width:200px; height:292px; bottom:-14px; }
  .companion__button { width:180px; height:252px; }
  .companion__bubble { right:4px; bottom:258px; min-width:188px; max-width:238px; }
}

@media (min-width:861px) and (max-width:1000px) {
  .game-content { width:min(680px, calc(100vw - 120px)); }
  .play-stage { width:min(420px, 100%); }
  .companion { right:-135px; width:170px; height:250px; bottom:-10px; }
  .companion__button { width:154px; height:216px; }
  .companion__bubble { right:2px; bottom:220px; min-width:178px; max-width:224px; }
}

@media (min-width:761px) and (max-width:860px) {
  .game-content { width:min(620px, calc(100vw - 90px)); }
  .play-stage { width:min(400px, 100%); }
  .companion { right:-95px; width:150px; height:220px; bottom:-8px; }
  .companion__button { width:136px; height:190px; }
  .companion__bubble { right:0; bottom:194px; min-width:168px; max-width:210px; padding:11px 13px; font-size:12px; }
}

/* Short laptop/browser windows: compact vertically, then allow natural scrolling. */
@media (min-width:761px) and (max-height:860px) {
  .screen--game { display:block; }
  .game-header { padding-top:14px; }
  .game-header .progress-cards { margin-top:16px; gap:14px; }
  .progress-card { min-height:60px; padding:9px 14px; border-radius:18px; }
  .progress-icon { width:34px; height:34px; }
  .progress-icon .ui-svg { width:32px; height:32px; }
  .progress-card small { font-size:10px; }
  .progress-card strong { font-size:16px; }
  .game-content {
    min-height:auto;
    padding-top:112px;
    padding-bottom:30px;
    justify-content:flex-start;
  }
  .game-content h1 { font-size:32px; }
  .game-content .lead { font-size:14px; }
  .cue-card { margin-top:10px; margin-bottom:14px; min-height:54px; padding-block:6px; }
  .play-stage { width:min(390px, 100%); }
  .board { gap:8px; }
  .board-slot, .tile { border-radius:14px; }
  .answer-label { margin-top:11px; }
  .answer-row { margin-top:6px; }
  .answer-box { height:56px; min-height:56px; }
  .delete-letter-button { min-height:56px; flex-basis:62px; }
  .hint-button { margin-top:11px; padding:10px 20px; }
  .onscreen-keyboard { margin-top:11px; }
}

@media (min-width:761px) and (max-height:700px) {
  .game-header { padding-top:9px; }
  .game-header .progress-cards { margin-top:9px; }
  .brand--compact .brand__word { font-size:38px; }
  .brand--compact .brand__tag { display:none; }
  .icon-button { width:46px; height:46px; }
  .icon-button .ui-svg { width:23px; height:23px; }
  .game-content { padding-top:88px; padding-bottom:24px; }
  .game-content h1 { font-size:28px; }
  .cue-card { margin-top:7px; margin-bottom:10px; }
  .play-stage { width:min(340px, 100%); }
  .board { gap:6px; }
  .answer-label { margin-top:8px; }
  .answer-box { height:50px; min-height:50px; }
  .delete-letter-button { min-height:50px; }
  .hint-button { margin-top:8px; padding:8px 18px; }
}

/* Mobile: put the Companion into reserved space below the board, so nothing is clipped. */
@media (max-width:760px) {
  .screen { overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .play-stage { padding-bottom:205px; }
  .companion { width:150px; height:215px; left:auto; right:8px; bottom:0; }
  .companion__button { width:136px; height:190px; }
  .companion__bubble {
    right:108px;
    bottom:164px;
    min-width:158px;
    width:max-content;
    max-width:min(210px, calc(100vw - 32px));
    padding:10px 12px;
    font-size:12px;
  }
  .companion__bubble::after { right:18px; }

  .onscreen-keyboard { width:100%; overflow:visible; }
  .onscreen-keyboard__row { width:100%; min-width:0; gap:3px; }
  .virtual-key { flex:1 1 0; min-width:0; padding-inline:2px; }
  .virtual-key--action { flex:1 1 0; min-width:0; }
}

/* Very narrow phones: reduce chrome, never horizontal-scroll the gameplay. */
@media (max-width:420px) {
  .start-top { padding:24px 12px 0; }
  .start-sie-brand__logo { width:62px; }
  .top-actions { gap:8px; }
  .icon-button { width:40px; height:40px; }
  .icon-button .ui-svg { width:22px; height:22px; }
  .help-mark { font-size:22px; }

  .start-content { width:calc(100vw - 20px); padding-top:82px; }
  .brand__word { font-size:50px; letter-spacing:-4px; }
  .brand__tag { font-size:9px; letter-spacing:5px; }
  .start-content h1 { font-size:25px; }
  .track-card { grid-template-columns:54px 1fr 16px; gap:8px; padding:10px; }
  .track-card__icon, .track-icon-img { width:54px; height:54px; }
  .track-card__copy strong { font-size:17px; }
  .track-card__copy small { font-size:11px; }
  .track-card__arrow { font-size:31px; }

  .game-header { padding-inline:10px; }
  .brand--compact .brand__word { font-size:27px; }
  .game-header .progress-cards { width:calc(100vw - 20px); top:72px; }
  .progress-card { height:52px; min-height:52px; padding:6px 7px; }
  .progress-icon { width:25px; height:25px; }
  .progress-icon .ui-svg { width:24px; height:24px; }
  .progress-card strong { max-width:88px; font-size:10.5px; }

  .game-content { width:calc(100vw - 20px); padding-top:148px; }
  .game-content h1 { font-size:24px; }
  .cue-card { font-size:12px; }
  .board { gap:5px; }
  .board-slot, .tile { border-radius:11px; }
  .answer-row { gap:5px; }
  .answer-box { padding-inline:14px; }
  .delete-letter-button { flex-basis:52px; }
  .virtual-key { height:32px; font-size:10px; }
  .virtual-key--action { font-size:10px; }

  .play-stage { padding-bottom:195px; }
  .companion { width:142px; height:204px; right:2px; }
  .companion__button { width:128px; height:180px; }
  .companion__bubble { right:100px; bottom:156px; min-width:150px; max-width:calc(100vw - 26px); }
}

/* v0.24 — viewport-fit gameplay
   On desktop/tablet, the complete primary game loop must fit inside the
   currently available browser viewport without requiring page scrolling. */
@media (min-width: 761px) {
  .screen--game {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .game-content {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;
  }
}

/* Most laptop browser windows lose 100–180 px to browser chrome.
   Start compacting well before content would be clipped. */
@media (min-width: 761px) and (max-height: 980px) {
  .game-header {
    padding-top: clamp(10px, 1.6dvh, 16px);
  }

  .game-header .progress-cards {
    margin-top: clamp(8px, 1.5dvh, 14px);
    gap: 14px;
  }

  .progress-card {
    min-width: 205px;
    min-height: 56px;
    padding: 8px 14px;
    border-radius: 18px;
    gap: 10px;
  }

  .progress-icon { width: 32px; height: 32px; }
  .progress-icon .ui-svg { width: 30px; height: 30px; }
  .progress-card small { font-size: 9.5px; margin-bottom: 1px; }
  .progress-card strong { font-size: 15px; }

  .brand--compact .brand__word { font-size: 40px; }
  .brand--compact .brand__tag { font-size: 8px; letter-spacing: 5px; margin-top: 5px; }
  .icon-button { width: 48px; height: 48px; }

  .game-content {
    width: min(700px, 82vw);
    padding-top: clamp(96px, 12dvh, 116px);
    padding-bottom: 10px;
    justify-content: flex-start;
  }

  .game-content h1 {
    font-size: clamp(27px, 3.4dvh, 34px);
    line-height: 1.05;
    margin-bottom: 3px;
  }

  .game-content .lead {
    margin: 0;
    font-size: clamp(12px, 1.65dvh, 14px);
    line-height: 1.25;
  }

  .cue-card {
    min-height: 50px;
    margin-top: clamp(7px, 1.3dvh, 11px);
    margin-bottom: clamp(9px, 1.5dvh, 13px);
    padding: 5px 15px 5px 8px;
    border-radius: 25px;
    font-size: 14px;
    gap: 10px;
  }

  .cue-card__art {
    width: 48px;
    height: 40px;
    border-radius: 14px;
  }

  .cue-art-svg { width: 43px; height: 39px; }

  .play-stage {
    width: min(410px, 46vw, max(260px, calc(100dvh - 500px)));
  }

  .board { gap: clamp(5px, 0.9dvh, 8px); }
  .board-slot, .tile { border-radius: 13px; }
  .tile { font-size: clamp(25px, 4.2dvh, 36px); }

  .answer-label {
    margin-top: clamp(6px, 1.2dvh, 10px);
    font-size: 11px;
  }

  .answer-row {
    margin-top: 5px;
    gap: 7px;
  }

  .answer-box {
    height: clamp(48px, 6.4dvh, 54px);
    min-height: 48px;
    padding-inline: 20px;
    border-radius: 18px;
    font-size: 16px;
  }

  .answer-box strong { font-size: clamp(22px, 3.2dvh, 26px); }
  .answer-caret { height: 29px; }

  .delete-letter-button {
    min-height: clamp(48px, 6.4dvh, 54px);
    flex-basis: 58px;
  }

  .hint-button {
    margin-top: clamp(6px, 1.2dvh, 10px);
    padding: 8px 18px;
    min-width: 190px;
    font-size: 13px;
  }

  .hint-bulb { font-size: 21px; }
  .onscreen-keyboard { margin-top: 8px; }

  /* Companion scales with the same viewport pressure as the board. */
  .companion {
    right: -205px;
    bottom: -10px;
    width: clamp(170px, 25dvh, 215px);
    height: clamp(248px, 36dvh, 312px);
  }

  .companion__button {
    width: clamp(154px, 22.5dvh, 194px);
    height: clamp(216px, 31.5dvh, 275px);
  }

  .companion__bubble {
    right: 4px;
    bottom: clamp(218px, 32dvh, 280px);
    min-width: 184px;
    max-width: 238px;
    padding: 11px 13px;
    font-size: 12px;
  }
}

/* On narrower laptop widths keep the Companion within the visible canvas. */
@media (min-width: 761px) and (max-width: 1180px) and (max-height: 980px) {
  .companion { right: -130px; }
}

@media (min-width: 761px) and (max-width: 940px) and (max-height: 980px) {
  .game-content { width: min(620px, calc(100vw - 90px)); }
  .play-stage { width: min(370px, 48vw, max(255px, calc(100dvh - 500px))); }
  .companion { right: -92px; }
}

/* Emergency fallback for exceptionally short desktop windows: keep the
   interface usable rather than clipping controls. */
@media (min-width: 761px) and (max-height: 620px) {
  .screen--game { height: auto; min-height: 100dvh; overflow-y: auto; }
  .game-content { height: auto; max-height: none; min-height: 620px; }
  .play-stage { width: 260px; }
}


/* v0.26 — mobile single-screen gameplay
   On phones the tile board is the primary input. Keep the full round inside
   the visible browser viewport: no virtual keyboard and no page scrolling. */
@media (max-width: 760px) {
  .screen--game {
    display: block;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .screen--game .game-header {
    padding: 8px 10px 0;
    align-items: flex-start;
  }

  .screen--game .brand--compact .brand__word {
    font-size: 25px;
    letter-spacing: -2px;
  }

  .screen--game .top-actions { gap: 6px; }
  .screen--game .icon-button {
    width: 38px;
    height: 38px;
  }
  .screen--game .icon-button .ui-svg { width: 19px; height: 19px; }
  .screen--game .help-mark { font-size: 22px; }

  .screen--game .game-header .progress-cards {
    top: 50px;
    width: calc(100vw - 20px);
    gap: 6px;
    margin-top: 0;
  }

  .screen--game .progress-card {
    min-height: 42px;
    height: 42px;
    padding: 4px 7px;
    border-radius: 14px;
    gap: 5px;
  }

  .screen--game .progress-icon,
  .screen--game .progress-icon .ui-svg {
    width: 22px;
    height: 22px;
  }
  .screen--game .progress-card small { font-size: 7.5px; margin-bottom: 0; }
  .screen--game .progress-card strong { font-size: 10px; max-width: 100px; }

  .screen--game .game-content {
    width: calc(100vw - 20px);
    max-width: 430px;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    margin: 0 auto;
    padding: 103px 0 6px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
  }

  .screen--game .game-content h1 {
    margin: 0;
    font-size: clamp(20px, 5.8vw, 24px);
    line-height: 1.06;
  }

  .screen--game .game-content .lead {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.15;
  }

  .screen--game .session-end-notice {
    margin: 4px auto 0;
    padding: 5px 9px;
    font-size: 10px;
    line-height: 1.15;
  }

  .screen--game .cue-card {
    min-height: 42px;
    margin: 6px auto 7px;
    padding: 4px 10px 4px 6px;
    border-radius: 18px;
    gap: 7px;
    font-size: 11px;
    line-height: 1.2;
  }

  .screen--game .cue-card__art {
    width: 38px;
    height: 34px;
    border-radius: 11px;
  }
  .screen--game .cue-art-svg { width: 34px; height: 32px; }

  .screen--game .play-stage {
    position: static;
    width: min(72vw, 292px, max(218px, calc(100dvh - 365px)));
    margin: 0 auto;
    padding-bottom: 0;
    flex: 0 0 auto;
    overflow: visible;
  }

  .screen--game .board { gap: 4px; }
  .screen--game .board-slot,
  .screen--game .tile { border-radius: 10px; }
  .screen--game .tile { font-size: clamp(21px, 7vw, 30px); }

  /* The answer is only a compact confirmation strip on touch devices. */
  .screen--game .answer-label {
    align-self: center;
    width: min(82vw, 306px);
    margin: 7px auto 0;
    padding-left: 2px;
    font-size: 8px;
    line-height: 1;
    text-align: left;
  }

  .screen--game .answer-row {
    width: min(82vw, 306px);
    max-width: 306px;
    min-width: 0;
    align-self: center;
    margin: 4px auto 0;
    gap: 5px;
  }

  .screen--game .answer-box {
    height: 36px;
    min-height: 36px;
    padding: 0 9px;
    border-radius: 13px;
    font-size: 11px;
  }
  .screen--game .answer-box strong {
    font-size: 18px;
    letter-spacing: 2px;
  }
  .screen--game .answer-caret {
    width: 2px;
    height: 20px;
    margin-right: 7px;
  }

  .screen--game .delete-letter-button {
    flex: 0 0 42px;
    min-height: 36px;
    height: 36px;
    border-radius: 12px;
  }
  .screen--game .delete-letter-button span { font-size: 18px; }
  .screen--game .delete-letter-button small { display: none; }

  .screen--game .hint-button {
    align-self: center;
    width: min(72vw, 244px);
    max-width: 244px;
    min-width: 0;
    min-height: 36px;
    margin: 7px auto 0;
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 11px;
  }
  .screen--game .hint-bulb { margin-right: 4px; font-size: 16px; }

  /* Reserved mobile support area: Ludek and his message live here, below gameplay controls. */
  .screen--game .mobile-support-zone {
    display: block;
    flex: 0 0 112px;
    width: 100%;
    min-height: 112px;
    pointer-events: none;
  }

  /* Phone input is the 4×4 board; the virtual QWERTY keyboard is deliberately hidden. */
  .screen--game .onscreen-keyboard { display: none !important; }

  /* Ludek and his bubble are anchored to the dedicated support area at the bottom. */
  .screen--game .companion {
    width: 104px;
    height: 150px;
    right: 0;
    bottom: 5px;
  }
  .screen--game .companion__button {
    width: 94px;
    height: 132px;
  }
  .screen--game .companion__bubble {
    right: 88px;
    bottom: 72px;
    min-width: 142px;
    width: max-content;
    max-width: min(190px, calc(100vw - 118px));
    padding: 8px 10px;
    border-radius: 15px;
    font-size: 10px;
    line-height: 1.18;
  }
  .screen--game .companion__bubble::after { right: 13px; }

  .screen--game .success-toast {
    top: 50%;
    min-width: 190px;
    padding: 13px 18px;
  }
  .screen--game .success-toast strong { font-size: 22px; }
  .screen--game .success-toast span { font-size: 19px; }
}

/* Shorter phone viewports (embedded browsers / social-app webviews) get an
   extra compact pass instead of becoming scrollable. */
@media (max-width: 760px) and (max-height: 680px) {
  .screen--game .game-content { padding-top: 91px; }
  .screen--game .game-header .progress-cards { top: 46px; margin-top: 0; }
  .screen--game .progress-card { min-height: 38px; height: 38px; }
  .screen--game .game-content h1 { font-size: 20px; }
  .screen--game .game-content .lead { font-size: 10px; }
  .screen--game .cue-card { min-height: 38px; margin-top: 4px; margin-bottom: 5px; }
  .screen--game .play-stage { width: min(68vw, 258px, max(205px, calc(100dvh - 350px))); }
  .screen--game .answer-label { margin-top: 5px; }
  .screen--game .answer-box,
  .screen--game .delete-letter-button { height: 33px; min-height: 33px; }
  .screen--game .hint-button { min-height: 33px; margin-top: 5px; padding-block: 4px; }
  .screen--game .mobile-support-zone { flex-basis: 94px; min-height: 94px; }
  .screen--game .companion { width: 94px; height: 136px; right: 0; bottom: 3px; }
  .screen--game .companion__button { width: 85px; height: 120px; }
  .screen--game .companion__bubble { right: 78px; bottom: 62px; max-width: min(178px, calc(100vw - 105px)); }
}


/* v0.33 — phone breathing room + tablet parity
   Phone spacing grows on normal/tall viewports, while short webviews keep the
   compact v0.29 layout. Tablets use the same touch-first hierarchy as phones:
   compact header, bounded 4×4 board, compact answer strip and no virtual QWERTY. */
@media (max-width: 760px) and (min-height: 700px) {
  .screen--game .game-content {
    padding-top: 106px;
  }

  .screen--game .game-content h1 {
    margin-bottom: 3px;
  }

  .screen--game .game-content .lead {
    margin-top: 3px;
  }

  .screen--game .cue-card {
    margin-top: 10px;
    margin-bottom: 12px;
  }

  .screen--game .answer-label {
    margin-top: 11px;
  }

  .screen--game .answer-row {
    margin-top: 5px;
  }

  .screen--game .hint-button {
    margin-top: 10px;
  }

  .screen--game .mobile-support-zone {
    flex-basis: 116px;
    min-height: 116px;
  }
}

/* Tablet portrait and landscape: mirror the proven mobile interaction model,
   but retain more breathing room and a larger board. */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 621px) {
  .screen--game {
    display: block;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .screen--game .game-header {
    display: grid;
    grid-template-columns: 112px 1fr 112px;
    align-items: start;
    gap: 12px;
    padding: 13px 18px 0;
  }

  .screen--game .brand--compact .brand__word {
    font-size: 32px;
    letter-spacing: -2px;
  }
  .screen--game .brand--compact .brand__tag { display: none; }

  .screen--game .top-actions { gap: 8px; }
  .screen--game .icon-button {
    width: 42px;
    height: 42px;
  }
  .screen--game .help-mark { font-size: 24px; }

  .screen--game .game-header .progress-cards {
    position: static;
    transform: none;
    justify-self: center;
    width: auto;
    margin-top: 2px;
    gap: 10px;
  }

  .screen--game .progress-card {
    min-width: 176px;
    min-height: 48px;
    height: 48px;
    padding: 6px 10px;
    border-radius: 16px;
    gap: 7px;
  }
  .screen--game .progress-icon,
  .screen--game .progress-icon .ui-svg {
    width: 27px;
    height: 27px;
  }
  .screen--game .progress-card small { font-size: 8.5px; margin-bottom: 0; }
  .screen--game .progress-card strong { font-size: 12.5px; max-width: 118px; }

  .screen--game .game-content {
    width: min(690px, calc(100vw - 36px));
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0 auto;
    padding: 88px 0 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
  }

  .screen--game .game-content h1 {
    margin: 0 0 4px;
    font-size: clamp(27px, 3.3vw, 32px);
    line-height: 1.05;
  }

  .screen--game .game-content .lead {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
  }

  .screen--game .cue-card {
    width: min(560px, 88%);
    min-height: 50px;
    margin: 12px auto 15px;
    padding: 5px 13px 5px 7px;
    border-radius: 22px;
    gap: 9px;
    font-size: 13px;
    line-height: 1.2;
  }
  .screen--game .cue-card__art {
    width: 44px;
    height: 38px;
    border-radius: 13px;
  }
  .screen--game .cue-art-svg { width: 39px; height: 36px; }

  .screen--game .play-stage {
    width: min(390px, 52vw, max(292px, calc(100dvh - 425px)));
    margin: 0 auto;
    padding-bottom: 0;
    flex: 0 0 auto;
    overflow: visible;
  }

  .screen--game .board { gap: 7px; }
  .screen--game .board-slot,
  .screen--game .tile { border-radius: 13px; }
  .screen--game .tile { font-size: clamp(25px, 4.5vw, 34px); }

  .screen--game .answer-label {
    align-self: center;
    width: min(520px, 72vw);
    margin: 12px auto 0;
    font-size: 10px;
    text-align: left;
  }

  .screen--game .answer-row {
    width: min(520px, 72vw);
    max-width: 520px;
    align-self: center;
    margin: 5px auto 0;
    gap: 7px;
  }

  .screen--game .answer-box {
    height: 45px;
    min-height: 45px;
    padding: 0 14px;
    border-radius: 15px;
    font-size: 13px;
  }
  .screen--game .answer-box strong {
    font-size: 22px;
    letter-spacing: 3px;
  }
  .screen--game .answer-caret { height: 25px; }

  .screen--game .delete-letter-button {
    flex: 0 0 52px;
    min-height: 45px;
    height: 45px;
    border-radius: 14px;
  }
  .screen--game .delete-letter-button small { display: none; }

  .screen--game .hint-button {
    align-self: center;
    width: min(270px, 48vw);
    min-width: 0;
    min-height: 39px;
    margin: 10px auto 0;
    padding: 7px 14px;
    border-radius: 16px;
    font-size: 12px;
  }

  /* Tablet is also touch-first: the 4×4 tiles are the primary keyboard. */
  .screen--game .onscreen-keyboard { display: none !important; }

  /* Keep Ludek alongside the bounded board instead of allowing him to collide
     with the heading, clue or answer controls. */
  .screen--game .companion {
    right: -148px;
    bottom: -7px;
    width: 168px;
    height: 244px;
  }
  .screen--game .companion__button {
    width: 152px;
    height: 215px;
  }
  .screen--game .companion__bubble {
    right: 0;
    bottom: 178px;
    min-width: 158px;
    max-width: 190px;
    padding: 9px 11px;
    border-radius: 17px;
    font-size: 10.5px;
    line-height: 1.18;
  }
}

/* Tablet landscape / compact browser chrome: tighten dimensions without
   collapsing section boundaries or reintroducing overlap. */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 621px) and (max-height: 820px) {
  .screen--game .game-header { padding-top: 9px; }
  .screen--game .game-content { padding-top: 76px; padding-bottom: 7px; }
  .screen--game .progress-card { height: 44px; min-height: 44px; }
  .screen--game .game-content h1 { font-size: 25px; }
  .screen--game .game-content .lead { font-size: 11.5px; }
  .screen--game .cue-card {
    min-height: 44px;
    margin-top: 8px;
    margin-bottom: 10px;
  }
  .screen--game .play-stage {
    width: min(336px, 43vw, max(274px, calc(100dvh - 402px)));
  }
  .screen--game .board { gap: 6px; }
  .screen--game .answer-label { margin-top: 8px; }
  .screen--game .answer-box,
  .screen--game .delete-letter-button { height: 40px; min-height: 40px; }
  .screen--game .hint-button { min-height: 35px; margin-top: 7px; padding-block: 5px; }
  .screen--game .companion {
    right: -132px;
    width: 152px;
    height: 220px;
  }
  .screen--game .companion__button { width: 138px; height: 194px; }
  .screen--game .companion__bubble {
    bottom: 160px;
    min-width: 148px;
    max-width: 178px;
  }
}

/* v0.35 — companion cleanup + wobblier motion */
.progress-open-button {
  width:100%; margin-top:12px; min-height:42px; border:1px solid var(--line); border-radius:14px;
  background:rgba(255,251,246,.82); color:var(--green); font-weight:850; font-size:12px; cursor:pointer;
  box-shadow:0 3px 9px rgba(78,61,43,.06);
}
.progress-open-button:hover { background:#fffdf8; transform:translateY(-1px); }
.modal--progress { width:min(760px, 94vw); padding:38px 34px 28px; }
.progress-heading { text-align:center; }
.progress-heading h2 { margin:0; color:var(--green); font-size:34px; }
.progress-heading p { margin:7px 0 0; color:var(--muted); font-size:14px; }
.progress-hero { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0 16px; }
.progress-hero span { padding:16px 10px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.48); text-align:center; color:var(--muted); font-size:11px; font-weight:800; }
.progress-hero b { display:block; margin-bottom:2px; color:var(--green); font-size:29px; line-height:1; }
.progress-focus-card { padding:17px 20px; border-radius:20px; background:#fff3d5; border:1px solid rgba(229,164,51,.18); text-align:left; }
.progress-focus-card small { display:block; color:#7b6b53; font-size:9px; font-weight:950; letter-spacing:.8px; }
.progress-focus-card strong { display:block; margin-top:4px; color:var(--green); font-size:22px; }
.progress-focus-card p { margin:5px 0 0; color:#6b655d; font-size:12px; line-height:1.45; }
.skill-progress-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px; }
.skill-progress-row { min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.42); display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; }
.skill-progress-row strong { color:var(--green); font-size:13px; }
.skill-progress-row span { color:#7a6756; font-size:11px; font-weight:900; }
.skill-progress-row small { grid-column:1/-1; color:var(--muted); font-size:9px; }
.recent-mastered { margin-top:18px; text-align:left; }
.recent-mastered h3 { margin:0 0 9px; color:var(--green); font-size:14px; }
.recent-mastered > div { display:flex; flex-wrap:wrap; gap:7px; }
.recent-mastered span { padding:7px 10px; border-radius:999px; background:rgba(8,91,73,.07); color:var(--green); font-size:11px; font-weight:900; letter-spacing:.5px; }
.recent-mastered p { color:var(--muted); font-size:11px; }
.progress-done { display:block; margin:22px auto 0; }

.debug-learning-panel {
  position:fixed; z-index:18; right:12px; bottom:12px; width:min(360px, calc(100vw - 24px));
  border:1px solid rgba(8,91,73,.18); border-radius:15px; background:rgba(255,252,246,.96); box-shadow:0 12px 35px rgba(40,45,38,.18);
  color:#234d43; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:10px; text-align:left;
}
.debug-learning-panel details { padding:8px 10px 10px; }
.debug-learning-panel summary { cursor:pointer; font-weight:900; color:var(--green); }
.debug-learning-panel dl { display:grid; gap:3px; margin:8px 0; }
.debug-learning-panel dl div { display:grid; grid-template-columns:104px 1fr; gap:6px; }
.debug-learning-panel dt { opacity:.65; }
.debug-learning-panel dd { margin:0; overflow-wrap:anywhere; }
.debug-learning-panel p { margin:7px 0 0; line-height:1.4; }

html.qa-static *, html.qa-static *::before, html.qa-static *::after {
  animation:none !important; transition:none !important; caret-color:transparent !important;
}

@media (max-width:760px) {
  .modal--progress { width:calc(100vw - 20px); max-height:94svh; padding:30px 14px 20px; }
  .progress-heading h2 { font-size:27px; }
  .progress-heading p { font-size:12px; }
  .progress-hero { margin-top:18px; gap:6px; }
  .progress-hero span { padding:12px 5px; font-size:9px; }
  .progress-hero b { font-size:23px; }
  .skill-progress-list { grid-template-columns:1fr; }
  .debug-learning-panel { display:none; }
}

/* v0.36 — gameplay polish: tactile states without visual noise */
@media (hover: hover) and (pointer: fine) {
  .tile:hover:not(:disabled) { transform:translateY(-3px) scale(1.018); }
  .hint-button:hover, .primary-button:hover, .icon-button:hover, .track-card:hover, .delete-letter-button:hover:not(:disabled) { transform:translateY(-2px); }
}
.tile:active:not(:disabled) { transform:translateY(1px) scale(.985); }
.hint-button:active, .primary-button:active, .icon-button:active, .track-card:active, .delete-letter-button:active:not(:disabled) {
  transform:translateY(1px) scale(.985);
  box-shadow:0 3px 9px rgba(63,49,34,.07);
}

/* v0.37 — audio/feedback polish */
.tile--just-used { filter:saturate(.98); }
.success-toast { backdrop-filter:blur(3px); }

/* v0.41 — final visual/interaction polish */
button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.game-content h1, .start-content h1, .session-summary-card h1 { text-wrap:balance; }
.game-content .lead, .cue-card__text, .answer-box > span:not(.answer-caret), .muted { line-height:1.35; }
.tile:focus-visible, .hint-button:focus-visible, .delete-letter-button:focus-visible, .icon-button:focus-visible, .track-card:focus-visible, .primary-button:focus-visible, .secondary-button:focus-visible {
  outline:3px solid rgba(255,173,25,.46);
  outline-offset:3px;
}
@media (hover: none) {
  .tile:hover:not(:disabled), .hint-button:hover, .primary-button:hover, .icon-button:hover, .track-card:hover, .delete-letter-button:hover:not(:disabled) {
    transform:none;
  }
}
@media (max-width:1100px) {
  .screen--game .decor--green { opacity:.72; }
  .screen--game .decor--orange { opacity:.88; }
}
@media (max-width:760px) {
  .screen--game .cue-card__text { line-height:1.28; }
  .screen--game .answer-label { letter-spacing:.45px; }
}

/* v1.0 RC — onboarding, persistent progress backup and release polish */

.backup-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:9px; }
.settings-panel--data .progress-open-button { margin:0; min-height:36px; }
.settings-notice { min-height:15px; margin:6px 0 0; color:var(--green); font-size:9.5px; line-height:1.25; font-weight:750; text-align:center; }
.settings-notice[data-kind="error"] { color:#8a5448; }

.modal--settings, .modal--settings button, .modal--settings input, .modal--settings select, .modal--settings textarea,
.modal--settings h2, .modal--settings h3, .modal--settings p, .modal--settings span, .modal--settings small, .modal--settings label,
.modal--progress, .modal--progress button, .modal--progress h2, .modal--progress h3, .modal--progress p, .modal--progress span, .modal--progress small, .modal--progress label {
  font-family: var(--small-copy-font);
  font-kerning: normal;
}
.visually-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.progress-hero--four { grid-template-columns:repeat(4,1fr); }

@media (max-width:760px) {
  .progress-hero--four { grid-template-columns:repeat(2,1fr); }
  .backup-actions { grid-template-columns:1fr; }
}