:root {
  color-scheme: dark;
  --accent: #8ff1c5;
  --hue: 164;
  --text: #f6fff6;
  --muted: #b1cbc7;
  --gold: #ffcf6d;
  --gap: 7px;
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; min-height: 100%; }
body { margin: 0; overflow: hidden; background: #081c27; color: var(--text); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { min-width: 48px; min-height: 48px; padding: 0; border: 0; color: inherit; font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button:disabled { opacity: .38; cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid #ffde97; outline-offset: 3px; }
button:active:not(:disabled) { filter: brightness(1.08); transform: translateY(2px); }
.game-icon { display: block; flex-shrink: 0; width: 25px; height: 25px; }
button svg { display: block; flex-shrink: 0; width: 25px; height: 25px; pointer-events: none; }
@media (hover: hover) { button:hover:not(:disabled) { filter: brightness(1.09); } }
.world { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, #091e32aa, #102e3699 60%, #08202bc9), url('assets/sanctuary.svg') center / cover; filter: hue-rotate(calc((var(--hue) - 164) * 1deg)); transition: filter .6s; pointer-events: none; }

/* The game occupies the viewport like an app: one dominant board, one control bar. */
.game-shell { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: min(100%, 480px); height: 100dvh; min-height: 0; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6eb29b50 transparent; }
.game-shell > * { flex-shrink: 0; }
body[data-screen="menu"] .game-shell { visibility: hidden; }
.play-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 48px; margin: 0; }
.icon-button, .help-button { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border: 1px solid #8ccfc98a; border-radius: 15px; background: linear-gradient(180deg, #386b70, #204650 80%); color: #effff1; font-size: 24px; box-shadow: 0 3px 0 #092a36, 0 5px 10px #00141d4d, inset 0 2px 0 #b9efdb3b; }
.help-button { border-radius: 50%; font-size: 21px; }
.play-header .chapter { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; flex: 1; gap: 2px; margin: 0; text-align: center; }
.eyebrow, #chapterNum { color: #b8e8d0; font-size: 12px; line-height: 1.2; letter-spacing: .6px; font-weight: 750; }
h1 { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 850; letter-spacing: -.6px; text-shadow: 0 2px 2px #052333; }
.spark { width: 132px; height: 132px; object-fit: contain; animation: spirit-float 5s ease-in-out infinite; }
.spark.small { width: 48px; height: 48px; }
.stats { display: grid; grid-template-columns: 1fr 1fr 1.08fr; gap: 8px; }
.stats > div { min-width: 0; min-height: 61px; padding: 6px 10px 7px; border: 1px solid #94cab538; border-radius: 15px; background: linear-gradient(180deg, #244a55ed, #153844ef); box-shadow: 0 3px 0 #082735, inset 0 1px 0 #dbffdf21; text-align: center; }
.stats span { display: block; color: #b4d8cc; font-size: 12px; line-height: 1.25; font-weight: 750; letter-spacing: .5px; white-space: nowrap; }
.stats strong { display: block; margin-top: 2px; color: #fffbe5; font-size: 27px; line-height: 1.05; font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: -.5px; text-shadow: 0 2px 2px #032332; }
.stats .goal { border-color: #e7ce8a80; background: linear-gradient(180deg, #766338f2, #4c4d32ed); box-shadow: 0 3px 0 #303a24, inset 0 1px 0 #fff4c54a; }
.stats .goal span { color: #fff0c0; }
.goal strong { color: #ffda79; }
.goal i { display: none; }
.journey { margin: 0 3px; }
.journey-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #c4dacf; font-size: 12px; line-height: 1.25; }
#progressValue { flex-shrink: 0; color: #e2ffdf; font-weight: 750; white-space: nowrap; }
.progress-track { height: 8px; margin-top: 5px; overflow: hidden; border: 1px solid #b4d8b91f; border-radius: 8px; background: #062734; box-shadow: inset 0 2px 3px #001721a6; }
#progressFill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #dcffd4, var(--accent) 60%, #52bcb0); box-shadow: 0 0 10px #b4ffe066; transition: width .25s; }
#milestones, .milestones { display: none; }
.coach { display: none; }
.is-tutorial .journey, .is-tutorial .feedback-row, .is-tutorial .actions { display: none; }
.is-tutorial .coach { display: block; padding: 8px 11px; border: 1px solid #e6d797a1; border-radius: 14px; background: linear-gradient(145deg, #53633b, #284e45); box-shadow: inset 0 1px #fff6c42b; }
.coach-copy { display: grid; gap: 2px; }
#coachKicker { color: #ffe8a8; font-size: 12px; line-height: 1.1; font-weight: 800; letter-spacing: .5px; }
#coachTitle { color: #fffcea; font-size: 14px; line-height: 1.25; font-weight: 800; }
#coachDetail { color: #e0f0d9; font-size: 12px; line-height: 1.3; }

/* Geometry is shared with renderer.js. Preserve the 7px gap and tile cell size. */
.board-frame { position: relative; align-self: center; width: min(100%, var(--board-size, 100%)); padding: 10px; border: 2px solid #9eccb693; border-radius: 25px; background: linear-gradient(145deg, #78aa9766, #31585ced 35%, #163e49); box-shadow: 0 6px 0 #062431, 0 12px 22px #02121b66, inset 0 2px 0 #e9ffdd4a, inset 0 -2px 1px #081e36; }
#board { position: relative; width: 100%; aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
.cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: var(--gap); }
.cell { border: 1px solid #072a34b3; border-radius: 13px; background: linear-gradient(145deg, #0b2837, #163c47); box-shadow: inset 0 3px 5px #031822b3, inset 0 -1px 0 #bed9b610, 0 1px 0 #cffcdf1f; }
.tile { position: absolute; width: calc(25% - 5.25px); height: calc(25% - 5.25px); display: flex; align-items: center; justify-content: center; z-index: 2; isolation: isolate; border-radius: 13px; border: 1px solid hsl(var(--tileHue) 65% 81% / .9); background: linear-gradient(145deg, hsl(var(--tileHue) 53% 63%), hsl(var(--tileHue) 51% 40%) 46%, hsl(var(--tileHue) 53% 22%)); box-shadow: 0 4px 0 hsl(var(--tileHue) 45% 12%), 0 7px 10px #0007, inset 0 2px 2px #ffffdd9c, inset 0 -2px 5px #082e3e70; transform-origin: 50% 50%; }
.tile::before { content: ""; position: absolute; inset: 5%; z-index: -1; background: url('assets/crystal-facets.svg') center / 100% 100% no-repeat; opacity: .85; }
.tile::after { content: ""; position: absolute; inset: 2px; z-index: -1; border: 1px solid #ffffff20; border-radius: 10px; background: linear-gradient(150deg, #ffffff30, #ffffff00 33%, #041e2814 68%, #ffffff15); }
.tile strong { color: #fffefa; font-size: clamp(22px, 7vw, 40px); line-height: 1; font-weight: 850; letter-spacing: -1px; text-shadow: 0 2px 2px #05282b, 0 0 6px #07353b99; }
.tile.high strong { font-size: clamp(20px, 5.7vw, 32px); }
.tile.legend { border-color: #fff0b7; box-shadow: 0 4px 0 #543119, 0 0 17px #ffd88845, 0 7px 10px #0007, inset 0 2px 3px #fff5ca; }
.tile .sigil { position: absolute; bottom: 9%; color: #effff6; font-size: 8px; line-height: 1; letter-spacing: 2px; opacity: .85; text-shadow: 0 1px 3px #003333; }
.corner { position: absolute; z-index: 4; width: 20px; height: 20px; border-color: #e7f4bb; opacity: .75; pointer-events: none; }
.tl { top: 3px; left: 3px; border-top: 1px solid; border-left: 1px solid; border-radius: 19px 0 0 0; }
.tr { top: 3px; right: 3px; border-top: 1px solid; border-right: 1px solid; border-radius: 0 19px 0 0; }
.bl { bottom: 3px; left: 3px; border-bottom: 1px solid; border-left: 1px solid; border-radius: 0 0 0 19px; }
.br { bottom: 3px; right: 3px; border-bottom: 1px solid; border-right: 1px solid; border-radius: 0 0 19px 0; }
.board-label { display: none; }
#tiles, #fx { position: absolute; inset: 0; pointer-events: none; }
#fx { z-index: 6; overflow: hidden; border-radius: 13px; }
.particle { position: absolute; width: 4px; height: 4px; border-radius: 1px; background: #f0ffdf; box-shadow: 0 0 5px var(--accent); }
.ring { position: absolute; width: 22%; height: 22%; border: 2px solid var(--accent); border-radius: 50%; opacity: .7; box-shadow: 0 0 9px #edffdf60; }
#lessonArrow { position: absolute; left: 50%; top: 50%; z-index: 8; display: grid; place-items: center; width: 48px; height: 26px; border-radius: 15px; background: #ffe5a1f5; color: #30452d; font-size: 23px; line-height: 1; font-weight: 850; transform: translate(-50%, -50%); box-shadow: 0 3px 9px #0005, 0 0 0 2px #ffdc8133; pointer-events: none; animation: lesson-cue 1.6s ease-in-out infinite; }
.feedback-row { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.feedback-row .feedback { flex: 1; min-width: 0; }
.feedback { margin: 0; color: #d4ecd9; font-size: 12px; line-height: 1.3; }
#moves { flex-shrink: 0; padding: 6px 7px; border-radius: 9px; background: #082c379e; color: #accac0; font-size: 12px; line-height: 1.25; font-weight: 700; text-align: center; }
.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.soft-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 58px; padding: 8px; border: 1px solid #8dc9bb69; border-radius: 16px; background: linear-gradient(180deg, #35666b, #234b53 82%); color: #efffe9; font-size: 13px; font-weight: 800; box-shadow: 0 4px 0 #092a36, inset 0 2px 0 #c9f1dc33, 0 5px 7px #0623305e; }
.actions .soft-button { flex-direction: column; gap: 3px; }
.soft-button > span { font-size: 13px; line-height: 1.15; }
.soft-button svg { width: 23px; height: 23px; }
.soft-button small { position: absolute; top: 5px; right: 7px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: #d2f5cb; color: #20483e; font-size: 12px; line-height: 1; }
#hintBtn { border-color: #d6ce8675; color: #ffedaa; }
.direction-pad { display: none; align-items: center; justify-content: center; gap: 8px; margin: 0; }
.show-arrows .direction-pad, .is-tutorial .direction-pad { display: flex; }
.direction-pad button { display: grid; place-items: center; width: 54px; height: 48px; border: 1px solid #8dc1af3b; border-radius: 13px; background: #153d46bd; color: #bddfc9; font-size: 24px; font-weight: 650; box-shadow: inset 0 1px #cffcdf15; }
.direction-pad button.is-hint,
.game-shell:has(#lessonArrow[data-direction="left"]:not([hidden])) .direction-pad [data-dir="left"],
.game-shell:has(#lessonArrow[data-direction="right"]:not([hidden])) .direction-pad [data-dir="right"],
.game-shell:has(#lessonArrow[data-direction="up"]:not([hidden])) .direction-pad [data-dir="up"],
.game-shell:has(#lessonArrow[data-direction="down"]:not([hidden])) .direction-pad [data-dir="down"] { outline: 2px solid #ffdb86; outline-offset: 1px; color: #fff2ba; background: #586440; }
.game-shell > footer { display: none; }

/* Modal game menus. Only the home screen removes the dialog frame. */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); overflow: hidden; background: #04151fde; backdrop-filter: blur(8px); }
.panel { width: min(100%, 420px); max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 23px; overflow-y: auto; overscroll-behavior: contain; border: 2px solid #a2cbb073; border-radius: 27px; background: radial-gradient(ellipse at 50% 0, #426b5c, #173d48 60%, #10303e); box-shadow: 0 7px 0 #051d2b, 0 20px 60px #0008, inset 0 2px #dfffd433; text-align: center; scrollbar-width: thin; scrollbar-color: #8dc3ab50 transparent; }
.panel .spark { display: block; margin: -7px auto -3px; }
.panel h2 { margin: 9px 0; color: #fff6d6; font-size: 31px; line-height: 1.1; font-weight: 850; letter-spacing: -.7px; text-shadow: 0 3px 0 #0b3540; }
.panel p { margin: 13px 0 19px; color: #c5dbce; font-size: 14px; line-height: 1.55; }
.panel p strong { color: #fcffe8; }
.panel .fine-print { margin: 13px 0; color: #adc9bd; font-size: 12px; line-height: 1.5; }
.primary, .secondary { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 52px; margin-top: 11px; padding: 11px 15px; border: 1px solid #a0d6b96b; border-radius: 15px; font-size: 15px; line-height: 1.3; font-weight: 800; letter-spacing: .1px; }
.primary { border-color: #ffe9a5; background: linear-gradient(180deg, #ffe59c 0, #ffd06c 48%, #efb347); color: #5c401e; box-shadow: 0 4px 0 #a36926, inset 0 2px #fff7cf, 0 7px 15px #041a2752; text-shadow: 0 1px #fff2b9; }
.secondary { color: #e1f2d9; background: linear-gradient(180deg, #38665e, #22494d); box-shadow: 0 3px 0 #0b2b38, inset 0 1px #deffcf25; }
.text-button { min-height: 48px; margin-top: 10px; background: none; color: #d0e6d3; font-size: 13px; }
.menu-foot { margin-top: 13px; color: #afd0b8; font-size: 12px; letter-spacing: .5px; }
.menu-links { display: grid; gap: 10px; margin: 16px 0 4px; }
.menu-links a { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 8px 12px; border: 1px solid #b3d6b83d; border-radius: 13px; background: #133740a6; color: #d5edce; font-size: 14px; font-weight: 700; text-decoration: none; }
.menu-foot a { display: inline-flex; align-items: center; min-height: 48px; color: #d3efd9; text-underline-offset: 3px; }
.stage-list { position: relative; display: flex; flex-direction: column; gap: 13px; margin: 20px 0; }
.stage-card { position: relative; display: flex; align-items: center; gap: 11px; min-height: 74px; padding: 11px; border: 1px solid #bdd9ae73; border-radius: 18px; background: linear-gradient(145deg, #3c6258, #1b414a); box-shadow: 0 4px 0 #092c39, inset 0 2px 0 #e5f7d322; text-align: left; }
.stage-orb { display: grid; place-items: center; flex-shrink: 0; width: 45px; height: 45px; border: 1px solid #ecffd391; border-radius: 15px; background: radial-gradient(circle at 35% 20%, #faffcc94, transparent 60%), var(--stageColor); color: #20463e; font-size: 25px; box-shadow: 0 3px 0 #0d393d, inset 0 2px #fcffd6a8; }
.stage-card strong { display: block; font-size: 14px; line-height: 1.25; }
.stage-card small { display: block; margin-top: 3px; color: #b8d1c0; font-size: 12px; line-height: 1.35; }
.stage-target { margin-left: auto; color: var(--stageColor); font-size: 19px; font-weight: 850; text-shadow: 0 2px #082c38; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid #b1d4b529; text-align: left; }
.setting strong { display: block; color: #eff6dd; font-size: 15px; font-weight: 750; }
.setting small { display: block; margin-top: 3px; color: #b8cfbf; font-size: 12px; line-height: 1.4; }
.switch { position: relative; width: 54px; height: 48px; flex-shrink: 0; border-radius: 24px; background: transparent; }
.switch::after { content: ""; position: absolute; inset: 8px 0; z-index: 0; border: 1px solid #88b99d4d; border-radius: 18px; background: #163641; box-shadow: inset 0 2px 4px #001926a1; }
.switch::before { content: ""; position: absolute; left: 5px; top: 12px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(#e6f7d8, #b1ccb8); box-shadow: 0 2px 3px #061f2c7a; transition: transform .15s; }
.switch[aria-checked="true"]::after { border-color: #b7e8a68a; background: #7bc39c; }
.switch[aria-checked="true"]::before { background: linear-gradient(#fff4b5, #ffd477); transform: translateX(20px); }
.result-stats { display: flex; justify-content: center; gap: 20px; margin: 20px 0 22px; }
.result-stats strong { display: block; color: #ffe3a0; font-size: 26px; font-weight: 850; }
.result-stats small { display: block; color: #bed6bd; font-size: 12px; line-height: 1.25; }
.merge-example { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px auto 25px; }
.merge-example span { display: grid; place-items: center; flex: 0 1 62px; aspect-ratio: 1; border: 1px solid #d2ffe3a6; border-radius: 12px; background: url('assets/crystal-facets.svg') center / 92% 92% no-repeat, linear-gradient(145deg, #75d7af, #317a67 55%, #1a4c45); box-shadow: 0 4px 0 #0b322e, 0 7px 12px #0004, inset 0 2px #ffffdc6b; color: #fffefa; font-size: 29px; font-weight: 850; text-shadow: 0 2px 3px #0b3b35; }
.merge-example span:last-child { border-color: #ddfff0; background-color: #4fb0bc; background-image: url('assets/crystal-facets.svg'), linear-gradient(145deg, #85e9dd, #3f8d9f 55%, #205464); }
.merge-example b { color: #d5e6bd; font-size: 18px; font-weight: 650; }
.tutorial-banner { color: var(--accent); }

/* Full-screen game home: large title, original scene, one clear Play button. */
.overlay[data-screen="menu"] { display: block; padding: 0; background: radial-gradient(ellipse at 50% 30%, #4a8168 0, #24535b 38%, #0b293a 82%); backdrop-filter: none; }
.panel[data-screen="menu"] { width: min(100%, 480px); height: 100dvh; max-height: none; margin: 0 auto; padding: 0; overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 0; background: radial-gradient(ellipse at 50% 35%, #95cfa74d, #3a6b6424 36%, #06293e91 85%), url('assets/sanctuary.svg') center / cover; box-shadow: none; }
.home-screen { display: flex; flex-direction: column; align-items: stretch; gap: 10px; height: 100%; min-height: 610px; padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); overflow: hidden; }
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; height: 48px; }
.home-record { position: relative; display: flex; align-items: center; gap: 9px; min-width: 96px; padding: 5px 15px; border: 1px solid #bddea650; border-radius: 15px; background: #103b47c9; box-shadow: 0 3px #09293880, inset 0 1px #e2ffd41a; text-align: left; }
.home-record .game-icon { color: #ffdc86; }
.home-record small { display: block; color: #d1e6bb; font-size: 12px; line-height: 1.1; font-weight: 750; letter-spacing: .8px; }
.home-record strong { display: block; margin-top: 1px; color: #ffe2a0; font-size: 23px; line-height: 1; font-variant-numeric: tabular-nums; }
.home-title { position: relative; z-index: 1; flex-shrink: 0; text-align: center; padding-top: 1px; }
.panel .home-title h2 { margin: 0; color: #fff1c0; font-size: clamp(43px, 13vw, 59px); font-weight: 900; line-height: .9; letter-spacing: -2.5px; text-shadow: 0 2px #f3dc93, 0 5px #456552, 0 8px 0 #133f41, 0 12px 18px #001d32b0; }
.home-title h2 span { display: block; color: #b1f1c9; font-size: .84em; line-height: 1.1; letter-spacing: 4px; text-shadow: 0 2px #6daa94, 0 5px #123e42, 0 8px 12px #001d3266; }
.home-tagline { margin: 10px 0 0 !important; color: #ebf3cc !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 650; text-shadow: 0 2px 3px #14373d; }
.home-art { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 220px; min-height: 155px; margin: -3px -16px -8px; pointer-events: none; }
.home-art::before { content: ""; position: absolute; left: 10%; right: 10%; top: 16%; bottom: 10%; border-radius: 50%; background: radial-gradient(ellipse, #c3f4a035, #acffbb00 68%); }
.home-scene { position: relative; display: block; width: 100%; height: 100%; max-height: 370px; object-fit: contain; }
.home-start { position: relative; z-index: 1; flex-shrink: 0; padding: 0 8px 5px; }
.play-button.primary { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 76px; margin: 0; padding: 12px 18px; border: 2px solid #fff2b3; border-radius: 22px; background: linear-gradient(180deg, #fff0b0 0, #ffda7a 20%, #ffc859 61%, #efb444); color: #58411d; box-shadow: 0 7px 0 #9d6724, 0 9px 0 #063039a3, inset 0 3px 0 #ffffd1, 0 12px 24px #001c2d8c; text-shadow: 0 1px #fff1b9; }
.play-button svg { width: 31px; height: 31px; filter: drop-shadow(0 1px 0 #fff1bb); }
.play-button > span { display: block; font-size: 28px; line-height: 1; font-weight: 900; letter-spacing: .3px; text-align: center; }
.play-button small { display: block; margin-top: 6px; color: #7b591f; font-size: 12px; line-height: 1.15; font-weight: 750; letter-spacing: .1px; }
.home-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; flex-shrink: 0; margin-top: 3px; }
.menu-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 73px; padding: 9px 5px; border: 1px solid #a5d6b978; border-radius: 18px; background: linear-gradient(180deg, #42766f, #29515d 82%); box-shadow: 0 4px 0 #0a2f40, inset 0 2px #d2f5c942, 0 7px 12px #03283760; color: #e3f4cb; }
.menu-action svg { width: 28px; height: 28px; color: #ebf0b9; }
.menu-action span { display: block; font-size: 13px; line-height: 1.15; font-weight: 750; }
.home-credit { flex-shrink: 0; margin: 6px 0 0; color: #b0d1b8; font-size: 12px; line-height: 1.1; font-weight: 800; letter-spacing: 4px; text-align: center; }
.toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 50; width: max-content; max-width: 90vw; padding: 13px 18px; border: 1px solid #f4ffcc; border-radius: 14px; background: #dff3c3; color: #24483b; box-shadow: 0 4px 12px #001c3280; font-size: 13px; line-height: 1.4; font-weight: 650; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, 25px); transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-height: 760px) {
  .game-shell { gap: 6px; padding-top: max(7px, env(safe-area-inset-top)); padding-bottom: max(7px, env(safe-area-inset-bottom)); }
  .stats > div { min-height: 57px; padding-top: 5px; padding-bottom: 5px; }
  .stats strong { font-size: 25px; }
  .home-screen { gap: 8px; min-height: 585px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .panel .home-title h2 { font-size: clamp(40px, 12vw, 53px); }
  .home-art { min-height: 135px; }
  .play-button.primary { min-height: 72px; }
  .home-nav { gap: 10px; }
  .menu-action { min-height: 68px; }
  .panel { padding: 20px; }
  .panel .spark { width: 102px; height: 102px; }
}
@media (max-height: 640px) {
  .home-screen { gap: 6px; min-height: 520px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .panel .home-title h2 { font-size: 40px; }
  .home-tagline { margin-top: 7px !important; font-size: 12px !important; }
  .home-art { min-height: 88px; }
  .play-button.primary { min-height: 64px; padding-top: 9px; padding-bottom: 9px; }
  .play-button > span { font-size: 26px; }
  .play-button svg { width: 28px; height: 28px; }
  .menu-action { min-height: 60px; gap: 4px; padding: 7px 4px; }
  .menu-action svg { width: 25px; height: 25px; }
  .home-credit { margin-top: 3px; }
  .is-tutorial .coach { padding-top: 7px; padding-bottom: 7px; }
}
@media (max-width: 359px) {
  .game-shell { padding-left: max(9px, env(safe-area-inset-left)); padding-right: max(9px, env(safe-area-inset-right)); }
  .play-header { gap: 7px; }
  h1 { font-size: 20px; }
  #chapterNum { font-size: 12px; letter-spacing: 0; }
  .stats { gap: 6px; }
  .stats > div { padding-left: 6px; padding-right: 6px; }
  .feedback-row { gap: 6px; }
  #moves { padding-left: 5px; padding-right: 5px; }
  .home-screen { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .home-nav { gap: 8px; }
  .home-start { padding-left: 0; padding-right: 0; }
  .stage-card { gap: 8px; padding: 10px; }
  .stage-orb { width: 40px; height: 40px; }
  .result-stats { gap: 13px; }
}
@media (min-width: 600px) and (min-height: 700px) {
  .game-shell { background: linear-gradient(180deg, #15374588, #08232a8c); box-shadow: 0 0 70px #0005; }
  .panel[data-screen="menu"] { box-shadow: 0 0 80px #0006; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .game-shell { height: 100dvh; }
  .panel[data-screen="menu"] { height: 100dvh; }
  .home-screen { min-height: 600px; }
}
.reduced *, .reduced *::before, .reduced *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@keyframes spirit-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes lesson-cue { 0%, 100% { opacity: .84; } 55% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Numbers follow the actual board size even inside a narrow embedded player. */
#board { container-type: inline-size; }
@supports (font-size: 1cqw) { .tile strong { font-size: clamp(18px, 9cqw, 40px); } .tile.high strong { font-size: clamp(12px, 6.5cqw, 32px); } }

/* Saved audio volumes: accessible native range input within a 48px touch row. */
.audio-volume { margin: -3px 0 13px; padding: 0 4px; text-align: left; }
.audio-volume label { display: flex; justify-content: space-between; gap: 12px; color: #dceedd; font-size: 13px; font-weight: 700; }
.audio-volume output { color: #ffe5a3; font-variant-numeric: tabular-nums; }
.audio-volume input[type="range"] { display: block; width: 100%; height: 48px; margin: 0; padding: 8px 0; accent-color: #e5ce87; cursor: pointer; background: transparent; }
.audio-volume input:focus-visible { outline: 2px solid #fff0b7; outline-offset: 2px; border-radius: 8px; }