/* Learn Vedic Math game styles. Tokens only (/ds/2.2.0/tokens.css with /theme/learnvedicmath.css), both color modes, kid mode via .pro/.kid. */

/* Layers above the page (openspec family-helpers, design D12): the game's own stacking tokens. The pinned design
   system has --z-overlay (100) and --z-toast (120) but no helper layer, and its toast value differs from the game's,
   so these are defined here; a --z-helper in the design system is a change for that repository. */
:root { --vm-z-toasts: 110; --vm-z-sparkles: 115; --vm-z-confetti: 120; --vm-z-family: 125; }

/* Header: the Learn Vedic Math header (theme/header.html, from design system 2.2.0, put in by compose.py). The design
   system styles the sticky bar, the brand, the nav pills, the round color scheme button and the end slot; with
   .md-header--tabs the nav moves to its own rows below 1180px and wraps, so every tab stays on screen (a sideways-scrolling
   row hid Sutras, Watch and Guide off the right edge of a phone with no sign they were there). Here: the game's Find tab,
   the music pill and the Player chip. */
main:focus { outline: none; }
h1:focus, h2:focus, [tabindex="-1"]:focus-visible { outline: none !important; }
.mq-nav { gap: var(--space-1); }
.mq-nav a { padding: var(--space-1-5) var(--space-2-5); }
@media (min-width: 1181px) { .mq-nav { margin-right: var(--space-1); } }
.nav-find { display: inline-flex; align-items: center; gap: var(--space-1); } .nav-find svg { width: 15px; height: 15px; flex: none; }
/* The menu by Mode (openspec change play-nav-by-mode, js/nav.js). Find is the one trigger at the end, with its shortcut
   shown where a keyboard is likely; Explorer's three tabs are big pictures with their names under them. */
.nav-kbd { font: 700 11px/1 var(--font-sans); padding: var(--space-1) var(--space-1); margin-left: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-muted); background: var(--bg); }
@media (max-width: 900px), (any-pointer: coarse) { .nav-kbd { display: none; } }
.mq-nav--x { gap: var(--space-2); }
.mq-nav--x a.nav-x { display: inline-grid; justify-items: center; align-content: center; gap: var(--space-1); min-width: 76px; min-height: 60px; padding: var(--space-1) var(--space-3); font: 700 1rem/1.1 var(--display); }
.mq-nav--x a.nav-x svg { width: 30px; height: 30px; flex: none; }
@media (max-width: 1180px) { .md-header--tabs .mq-nav--x { justify-content: center; } .md-header--tabs .mq-nav--x a.nav-x { flex: 1 1 0; max-width: 140px; } }
#mqMusic, #mqChip { display: flex; flex: none; }
/* Space held before the browser draws a published route page's view and the Player chip (react-typescript task 9.1):
   until the view root holds the view (it is empty, or not there for a frame while the route's module loads), the footer
   sits a screen lower, so it is never on screen to be pushed down when the view draws; and for a returning Player (the
   pre-paint mark) the chip's row holds the chip's height, so the header does not grow under a drawn view when the
   chip arrives */
html:is([data-shell-page], [data-offline-shell]) body:not(:has(#view > :not(noscript))) > .mq-foot { margin-top: 100vh; }
html[data-player-mode] #mqChip:empty { min-height: 40px; }
.md-header .mq-chip { margin: 0; height: 40px; box-sizing: border-box; padding: 0 var(--space-2-5) 0 var(--space-1); }
/* A phone keeps the game's header short (openspec find-and-home-polish): tighter rows, the same controls and links.
   Below 420px the brand shows its mark only (its name stays its accessible name), so the controls share its row. */
@media (max-width: 600px) {
  .md-header--tabs:has(.mq-nav) .md-header-in { padding-top: var(--space-2); padding-bottom: var(--space-1-5); row-gap: var(--space-1-5); }
  .md-header--tabs .mq-nav { row-gap: var(--space-1); gap: 0; }
  .md-header--tabs .mq-nav a { padding: var(--space-1) var(--space-1-5); }
}
@media (max-width: 420px) { .md-header:has(.mq-nav) .md-brand-t { display: none; } }
@media (max-width: 420px) { .md-header .mq-sparkbar { width: 36px; } .md-header .mq-chip { padding-right: var(--space-2); } } /* the bar to the next Title stays, shorter */
.md-brand svg.lv-mark { width: 48px; height: 32px; } /* the Nikhilam Family brand mark is 3:2, not square */
html.motion-paused .md-brand svg, body.calm .md-brand svg, html.motion-paused .md-theme, body.calm .md-theme { transition: none; }
html.motion-paused .md-brand:hover svg, body.calm .md-brand:hover svg, html.motion-paused .md-theme:hover, body.calm .md-theme:hover { transform: none; }
/* Smooth moves between pages (openspec change indexable-routes, design D12): a route change runs inside a view transition
   (js/app.js render), so the header, nav and Player chip stay still while the rest cross-fades in 180 ms, no slide. No
   motion token is that long (--duration-medium, 250 ms, is past the spec's 200). Under no motion the router starts none. */
.md-header { view-transition-name: site-header; }
.mq-nav { view-transition-name: game-nav; }
#mqChip { view-transition-name: player-chip; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 180ms; }

.mq-tight { padding-top: 36px; }
.mq-narrow { max-width: 820px; }
.mq-hero .md-heading { font-size: var(--text-display-l-size); max-width: 16em; text-wrap: balance; }
.hl-word { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--sun) 70%, transparent) 62%); padding: 0 .08em; }
:root[data-theme="dark"] .hl-word { background: linear-gradient(90deg, var(--coral), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl-word { background: linear-gradient(90deg, var(--coral), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; } }

/* The app home's hero (Mode picker, openspec try-trick-in-modes): one headline, one short line and the Nikhilam Family
   (js/family.js, the landing page's drawing), which moves gently and holds still under no motion. Try a trick sits
   under each Mode card. */
.mq-hero-in { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center; margin-bottom: var(--space-7); }
.mq-hero .md-lede.mq-hero-sub { margin: var(--space-3) 0 0; font-weight: 700; }
.mq-hero .lv-family { width: clamp(120px, 22vw, 220px); height: auto; overflow: visible; }
@media (max-width: 700px) { .mq-hero-in { grid-template-columns: 1fr; gap: var(--space-3); } .mq-hero .lv-family { order: -1; width: 104px; } }
.lv-family .lv-f-one, .lv-family .lv-f-zero, .lv-family .lv-f-nine { transform-box: fill-box; transform-origin: 50% 100%; }
.lv-family .lv-f-one { animation: lv-sway 6s ease-in-out infinite; }
.lv-family .lv-f-zero { animation: lv-hop 3s ease-in-out infinite; }
.lv-family .lv-f-nine { animation: lv-nod 4s ease-in-out infinite; }
.lv-family .lv-f-shadow--zero { transform-box: fill-box; transform-origin: center; animation: lv-shrink 3s ease-in-out infinite; }
.lv-family .lv-spark { transform-box: fill-box; transform-origin: center; animation: lv-twinkle 3.2s ease-in-out infinite; }
.lv-family .lv-spark--b { animation-delay: -.8s; } .lv-family .lv-spark--c { animation-delay: -1.6s; } .lv-family .lv-spark--d { animation-delay: -2.4s; }
@keyframes lv-sway { 50% { transform: rotate(-2.5deg); } }
@keyframes lv-nod { 0%, 45%, 100% { transform: none; } 15% { transform: rotate(-7deg); } 28% { transform: rotate(2deg); } }
@keyframes lv-hop { 0%, 55%, 100% { transform: none; } 25% { transform: translateY(-5px); } }
@keyframes lv-shrink { 0%, 55%, 100% { transform: none; } 25% { transform: scale(.7); } }
@keyframes lv-twinkle { 50% { opacity: .3; transform: scale(.6); } }
@keyframes lv-cheer { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .lv-family * { animation: none !important; } }
html.motion-paused .lv-family *, body.calm .lv-family * { animation: none !important; }

/* Small celebrations (js/celebrate.js, openspec celebrations): sparkles on a fixed layer, token colours, transform and
   opacity only. The script never starts them under no motion. */
.fx-sparkles { position: fixed; width: 0; height: 0; pointer-events: none; z-index: var(--vm-z-sparkles); }
.fx-spark { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; }
.fx-spark--sun { background: var(--sun); } .fx-spark--coral { background: var(--coral); } .fx-spark--sky { background: var(--sky); } .fx-spark--teal { background: var(--teal); } .fx-spark--plum { background: var(--plum); }
.fx-roll { display: inline-block; font-variant-numeric: tabular-nums; }
/* Buttons squish a little on press (the scale property, so each button's own transform is untouched); none under no motion */
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) body:not(.calm) :is(.md-btn, .mode-card, .play-tile, .pr-choice, .pr-key, .ar-key, .ar-choice, .star-key, .star-choice):active { scale: .95; }
}

/* Stats and continue */
.mq-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3-5); max-width: 640px; }
@media (max-width: 560px) { .mq-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); } .mq-stats .md-stat { padding: var(--space-3); } .mq-stats .md-stat p { display: none; } }
.mq-continue { margin-top: var(--space-5); display: inline-flex; align-items: center; gap: var(--space-3-5); padding: var(--space-3) var(--space-4-5); border: 2px solid var(--edge); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-ledge); transition: transform var(--duration-fast); }
.mq-continue:hover { transform: translateY(-2px); }
.mq-continue small { display: block; color: var(--ink-muted); font-size: 13px; }
.mq-continue b { font: 600 1.1rem/1.2 var(--display); }
.mq-go { font-size: 1.4rem; }

/* Grade picker */
.mq-grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
.mq-grade { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: var(--space-1) var(--space-3); padding: var(--space-3-5); border: 2px solid var(--edge); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-ledge); transition: transform var(--duration-fast), box-shadow var(--duration-fast); }
.mq-grade:hover { transform: translateY(-2px) rotate(-.4deg); }
.mq-grade:active { transform: translateY(2px); box-shadow: var(--shadow-ledge-press); }
.mq-grade-n { grid-row: span 2; width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--cat-yellow); color: var(--on-accent); font: 700 1.3rem/1 var(--display); }
.mq-grade:nth-child(4n+2) .mq-grade-n { background: var(--cat-blue); } .mq-grade:nth-child(4n+3) .mq-grade-n { background: var(--cat-green); } .mq-grade:nth-child(4n) .mq-grade-n { background: var(--cat-red); }
.mq-grade:last-child .mq-grade-n { background: var(--plum); font-size: .85rem; }
.mq-grade-t b { display: block; font: 600 1.05rem/1.2 var(--display); }
.mq-grade-t small { color: var(--ink-muted); font-size: 13px; line-height: 1.3; display: block; }
.mq-grade .mq-bar { grid-column: 2; align-self: end; }
.mq-bar { display: block; height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.mq-bar i { display: block; height: 100%; background: var(--teal-strong); border-radius: inherit; min-width: 0; }
.mq-bar--big { height: 14px; flex: 1; border: 1px solid var(--line); }
.mq-how .md-card p { font-size: 14.5px; }
.mq-how { margin-top: 0; }
.mq-cta { margin-top: var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-2-5); }

/* Grade map */
.mq-crumbs { font-size: var(--text-label-size); color: var(--ink-muted); margin-bottom: var(--space-3-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); }
.mq-crumbs a { color: var(--sky-strong); font-weight: 700; }
/* 24 px targets (openspec change muse-review-polish, design D6; WCAG 2.2 2.5.8): a 14 px label's link is a box at least
   24 px tall, so it looks the same and a finger can hit it */
.mq-crumbs a, .mq-crumbs span { display: inline-flex; align-items: center; min-height: 24px; }
.mq-gradebar { display: flex; align-items: center; gap: var(--space-3-5); max-width: 640px; }
.mq-gradejump { display: flex; gap: var(--space-2); margin: var(--space-3-5) 0 var(--space-1-5); flex-wrap: wrap; }
.mq-gradejump a { text-decoration: none; }
.mq-strand { display: flex; align-items: center; gap: var(--space-2-5); font-size: 1.35rem !important; margin: 34px 0 var(--space-3-5) !important; }
.mq-dot { width: 14px; height: 14px; border-radius: var(--radius-round); border: 2px solid var(--edge); flex: none; }
.mq-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2-5); }
.mq-skill { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-card); transition: transform var(--duration-fast), border-color var(--duration-fast); }
.mq-skill:hover { transform: translateY(-2px); border-color: var(--edge); }
.mq-skill-t b { display: block; font-weight: 700; line-height: 1.25; }
.mq-skill-t small { color: var(--ink-muted); font-size: 13px; }
.mq-done .mq-skill-t small, .mq-trick-f .mq-done { color: var(--teal-strong); font-weight: 700; }
.mq-going .mq-skill-t small, .mq-trick-f .mq-going { color: var(--sky-strong); font-weight: 700; }
.ring { flex: none; }
.ring-bg { fill: none; stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 5; }
.ring-fg { fill: none; stroke: var(--teal-strong); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .5s; }

/* Lesson and practice */
.mq-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .mq-split { grid-template-columns: 1fr; } }
.mq-split .md-card:hover, .mq-practice:hover, .g-shell:hover { transform: none; }
.mq-lesson, .mq-practice { padding: var(--space-6); }
@media (max-width: 560px) { .mq-lesson, .mq-practice { padding: var(--space-4); } }
.mq-h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: var(--space-3) 0 var(--space-2) !important; }
.mq-h3 { font-size: 1.15rem !important; margin: var(--space-5) 0 var(--space-2) !important; }
.mq-lesson p.mq-idea { font-size: 1.08rem; color: var(--ink); margin: var(--space-2) 0 0; line-height: 1.55; }
.mq-lesson p, .mq-practice p { font-size: inherit; }
.mq-lesson .mq-ans, .mq-practice .mq-ans { color: var(--ink); }
.mq-sutra { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-3); padding: var(--space-2-5) var(--space-3-5); border-radius: var(--radius-md); background: color-mix(in srgb, var(--plum) 14%, var(--card)); }
.mq-sutra b { font: 600 1.1rem/1.3 var(--display); color: var(--plum-strong); }
.mq-sutra .mq-sutra-mean { font-size: var(--text-label-size); color: var(--ink-muted); font-style: italic; }
.mq-sutra-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
/* ---------- Sutra tags (openspec change sutras-first, js/sutra-tag.js): the Sutra a method uses, linking to its Deep
   dive. Tokens only, so they read in Daybreak and Deep Space; every part wraps at 320 px. ---------- */
.sutra-tag { margin: var(--space-2) 0; font-size: var(--text-nav-size); line-height: 1.35; overflow-wrap: anywhere; }
.sutra-tag-a { display: inline; color: var(--ink); text-decoration: none; }
a.sutra-tag-a { border-radius: var(--radius-sm); }
a.sutra-tag-a:hover .sutra-tag-n, a.sutra-tag-a:focus-visible .sutra-tag-n { text-decoration: underline; text-underline-offset: 3px; }
.sutra-tag-k { display: inline-block; margin-right: var(--space-1); padding: 1px var(--space-2); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--plum) 16%, var(--card)); color: var(--plum-strong); font-size: .8rem; font-weight: 700; }
.sutra-tag-n { font: 600 1em/1.3 var(--display); color: var(--plum-strong); }
.sutra-tag-m { color: var(--ink-muted); font-style: italic; }
.sutra-tag--line .sutra-tag-m::before { content: ': '; font-style: normal; }
.sutra-tag-x { margin-left: var(--space-1); color: var(--ink); font-weight: 700; white-space: nowrap; }
.sutra-tag--full { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2-5) var(--space-3-5); border-radius: var(--radius-md); background: color-mix(in srgb, var(--plum) 14%, var(--card)); }
.sutra-tag--full .sutra-tag-row, .sutra-tag--full .sutra-tag-say { margin: 0; }
.sutra-tag--full .sutra-tag-n { display: block; font-size: 1.1rem; }
.sutra-tag--full .sutra-tag-m { display: block; font-size: var(--text-label-size); }
.sutra-tag-say { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sutra-tag-note { margin: var(--space-1) 0 0; font-size: var(--text-label-size); color: var(--ink); }
.sutra-tag--mini { display: inline-block; margin: 0; font-size: 13px; }
.sutra-tag--mini .sutra-tag-k { font-size: 11px; }
.dojo-cell .sutra-tag--mini { text-align: center; }
.star-sutra { margin: var(--space-1) 0 0; font-size: .9rem; }
.star-end .sutra-tag { text-align: left; margin: var(--space-3) 0; }
.ar-sutras { margin: var(--space-2) 0 0; } .ar-sutras .mq-h3 { margin-top: var(--space-2) !important; }
.vp-foot .sutra-tag { margin: 0 0 var(--space-2); } .vp-foot .sutra-tag-a { color: var(--ink); font-weight: 400; }
.watch-tags .tagv--sutra { font-weight: 600; }
.mq-game .sutra-tag--mini { margin: 0 0 var(--space-1); }
/* A tag's placeholder until js/sutra-tag.js is here (js/sutra-tag-slot.js): about one tag's height, so the tag moves
   little or nothing when it arrives (a line tag on one line, a full tag as on a wide screen) */
.sutra-tag-slot { min-height: 1.4em; }
.sutra-tag--mini.sutra-tag-slot { min-height: 1.45em; vertical-align: top; }
.sutra-tag--full.sutra-tag-slot { min-height: 7.2rem; } /* plus its padding */
.mq-method { margin: 0; padding-left: 1.3em; }
.mq-method li { margin: var(--space-1) 0; }
.mq-example { margin-top: var(--space-1-5); }
.mq-q, .pr-q { font: 600 1.45rem/1.5 var(--display); margin: var(--space-1-5) 0 var(--space-2-5); overflow-wrap: anywhere; }
.pr-q { font-size: clamp(1.35rem, 3.6vw, 1.8rem); }
.mq-q.long, .pr-q.long { font: 600 1.15rem/1.55 var(--font-sans); }
/* Word problems (openspec word-problems): the label over the story, and the story in the body font so it reads like text */
.pr-story { margin-top: var(--space-2); }
.pr-q.pr-q--story { font: 600 1.2rem/1.55 var(--font-sans); max-width: 40em; }
.mq-viz { margin: var(--space-2-5) 0 var(--space-3-5); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.mq-steps { margin: var(--space-1-5) 0 var(--space-2-5); padding-left: 1.3em; }
.mq-steps li { margin: var(--space-1) 0; }
.mq-ans { margin: var(--space-1-5) 0 var(--space-3); }
.pr-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2-5); margin-bottom: var(--space-1); }
.pr-meter { display: flex; gap: var(--space-2-5); align-items: center; }
.pr-meter small { display: block; color: var(--ink-muted); font-size: 13px; }
.pr-meter small a { color: var(--sky-strong); font-weight: 700; }
.pr-meter b { font-size: var(--text-small-size); }
.pr-score { font: 500 var(--text-code-size)/1 var(--font-mono); padding: var(--space-1-5) var(--space-2-5); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--sun) 22%, var(--card)); border: 1px solid var(--line); }
.pr-form { display: grid; gap: var(--space-3); }
.pr-in { display: flex; align-items: center; gap: var(--space-2); }
.ans-in { width: 100%; max-width: 360px; font: 600 1.3rem/1.2 var(--font-sans); color: var(--ink); background: var(--card); border: 2px solid var(--edge); border-radius: var(--radius-md); padding: var(--space-3) var(--space-3-5); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--ink) 8%, transparent); }
.ans-in::placeholder { color: var(--ink-muted); font-weight: 400; font-size: 1rem; }
.pr-unit { font-weight: 700; font-size: 1.2rem; }
.pr-fields { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pr-fields label { display: grid; gap: var(--space-1); font-weight: 700; font-size: var(--text-label-size); }
.pr-fields .ans-in { width: 150px; }
/* Memory lock answer slots (openspec working-memory-scaffolds): left part, Lock, a bar, right part */
.pr-split { display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: end; gap: var(--space-2); max-width: 420px; } /* one row, even on a phone */
.pr-slot { display: grid; gap: var(--space-1); font-weight: 700; font-size: var(--text-label-size); }
.pr-slot .ans-in { width: 100%; min-width: 0; box-sizing: border-box; text-align: center; font-family: var(--font-mono); }
.pr-slot.locked .ans-in { background: color-mix(in srgb, var(--sky) 18%, var(--card)); border-color: var(--sky-strong); }
.pr-split-bar { align-self: stretch; width: 3px; margin-top: var(--space-5); border-radius: var(--radius-pill); background: var(--edge); }
.pr-lock { gap: var(--space-1-5); min-height: 48px; }
.pr-lock svg { width: 18px; height: 18px; }
.pr-lock[aria-pressed="true"] { background: var(--sky); color: var(--on-accent); }
.pr-split-note { margin: 0; }
.pr-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pr-choice { font-size: 1.15rem; min-width: 64px; min-height: 48px; justify-content: center; }
.pr-keys { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.pr-key { min-width: 44px; min-height: 40px; border: 2px solid var(--edge); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: 500 1rem/1 var(--font-mono); cursor: pointer; box-shadow: 0 2px 0 var(--ledge); }
.pr-key:active { transform: translateY(2px); box-shadow: none; }
.pr-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pr-say { display: flex; align-items: flex-start; gap: var(--space-2-5); min-height: 8px; margin-top: var(--space-3-5); }
.pr-say:empty { margin: 0; }
.pr-say .md-bubble { flex: 1; position: relative; }
.pr-say .md-bubble::after { display: none; }
.pr-say.ok .md-bubble { border-color: var(--teal-strong); background: color-mix(in srgb, var(--teal) 14%, var(--card)); }
.pr-say.no .md-bubble { border-color: var(--coral-strong); background: color-mix(in srgb, var(--coral) 10%, var(--card)); }
.pr-say.win .md-bubble { border-color: var(--sun-strong); background: color-mix(in srgb, var(--sun) 24%, var(--card)); font-weight: 700; }
.bolt { width: 42px; height: 42px; flex: none; }
/* Bolt glows in Deep Space, whether the system picked it or the Player did (--bolt-glow is none in Daybreak) */
.bolt { filter: var(--bolt-glow); }
.pr-sparks { font: 500 13px/1 var(--font-mono); color: var(--teal-strong); margin-left: var(--space-1-5); }
summary.md-link { display: list-item; } /* the design system's link button (.md-link) is inline; a summary keeps its marker */
.pr-sol { margin-top: var(--space-3-5); padding: var(--space-3-5) var(--space-4); border-radius: var(--radius-md); border: 1px dashed var(--edge); background: color-mix(in srgb, var(--sky) 8%, var(--card)); }
.pr-sol h3 { font-size: 1.05rem !important; margin-bottom: var(--space-1) !important; }

/* Math typography */
.fr { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .9em; line-height: 1.15; margin: 0 .12em; }
.fr > span:first-child { border-bottom: 2px solid currentColor; padding: 0 .2em; }
.fr > span:last-child { padding: 0 .2em; }
.ov { border-top: 2px solid currentColor; padding: 0 .1em; }
.mx { display: inline-grid; grid-template-columns: auto auto; gap: var(--space-1) var(--space-3-5); padding: var(--space-1) var(--space-2-5); border-left: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: var(--radius-2xs); vertical-align: middle; font-size: .9em; text-align: center; }
sup { font-size: .65em; }

/* Visual models */
.vz { width: 100%; height: auto; overflow: visible; }
.vz-coral { fill: var(--coral); } .vz-teal { fill: var(--teal); } .vz-sky { fill: var(--sky); } .vz-sun { fill: var(--sun); } .vz-plum { fill: var(--plum); } .vz-ink { fill: var(--ink); }
.vz-cell { fill: var(--card); stroke: var(--edge); stroke-width: 1.5; }
.vz-frame { fill: none; stroke: var(--edge); stroke-width: 3; }
.vz-dot, .vz-blk { stroke: var(--edge); stroke-width: 2; }
.vz-soft { fill-opacity: .42; }
.vz-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.vz-blk + .vz-grid, .vz-grid { stroke: color-mix(in srgb, var(--ink) 18%, transparent); }
.vz-axis { stroke: var(--ink); stroke-width: 2; fill: none; }
.vz-thin { stroke-width: 1.3; }
.vz-jump, .vz-curve { fill: none; stroke-width: 3; stroke-linecap: round; }
.vz-s-coral { stroke: var(--coral-strong); } .vz-s-teal { stroke: var(--teal-strong); } .vz-s-sky { stroke: var(--sky-strong); } .vz-s-ink { stroke: var(--ink); }
.vz-hand { stroke-width: 5; stroke-linecap: round; } .vz-thinhand { stroke-width: 3; }
.vz-face { fill: var(--card); stroke: var(--edge); stroke-width: 3; }
.vz-t, .vz-tb, .vz-ts, .vz-tt { fill: var(--ink); font-family: var(--font-sans); }
.vz-t { font-size: 16px; font-weight: 600; } .vz-tb { font-size: var(--text-small-size); font-weight: 700; } .vz-ts { font-size: 13px; font-weight: 600; } .vz-tt { font-size: 10px; fill: var(--ink-muted); }
.vz-on { fill: var(--on-accent); }
.vz-plane { max-width: 300px; }
.bal { display: inline-flex; align-items: stretch; gap: 0; border: 2px solid var(--edge); border-radius: var(--radius-md); overflow: hidden; font: 600 1.15rem/1.3 var(--display); }
.bal-pan { padding: var(--space-2-5) var(--space-4-5); background: color-mix(in srgb, var(--sky) 14%, var(--card)); }
.bal-mid { padding: var(--space-2-5) var(--space-3); background: var(--sun); color: var(--on-accent); }

/* Speed tricks */
.mq-tricks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3-5); }
.mq-trick { display: flex; flex-direction: column; gap: var(--space-1); color: var(--ink); text-decoration: none; }
.mq-trick-s { font: 600 var(--text-nav-size)/1.3 var(--display); color: var(--plum-strong); }
.mq-trick b { font: 600 1.15rem/1.25 var(--display); }
.mq-trick small { color: var(--ink-muted); font-style: italic; font-size: var(--text-label-sm-size); }
.mq-trick-f { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2-5); font-size: 13px; color: var(--ink-muted); }
.anim { margin-top: var(--space-2); }
.anim-in { display: flex; flex-wrap: wrap; gap: var(--space-2-5); align-items: end; }
.anim-in label { display: grid; gap: var(--space-1); font-weight: 700; font-size: 13px; }
.anim-in input { width: 130px; font: 600 1.1rem/1 var(--font-sans); padding: var(--space-2) var(--space-2-5); border: 2px solid var(--edge); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }
.anim-btns { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.anim-err { color: var(--coral-strong); font-weight: 700; min-height: 1em; margin: var(--space-2) 0 0; font-size: var(--text-label-size); }
.anim-err:empty { display: none; }
.anim-board { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.anim-step { padding: var(--space-2-5) var(--space-3-5); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--card); opacity: .72; }
.anim-step.cur { opacity: 1; border: 2px solid var(--edge); box-shadow: var(--shadow-ledge); animation: stepIn .35s var(--ease-spring); }
@keyframes stepIn { from { transform: translateY(6px); opacity: .4; } }
.anim-show { font: 500 var(--text-title-size)/1.45 var(--font-mono); letter-spacing: .03em; overflow-wrap: anywhere; }
.anim-step p { margin: var(--space-1) 0 0; font-size: var(--text-small-size); }
/* Digit connectors (openspec working-memory-scaffolds): lines in the category colours join the digits a step uses */
.anim-links:empty { display: none; }
.anim-links { margin-top: var(--space-3); }
.anim-links .cx { display: block; max-width: 100%; height: auto; }
.cx-d { font: 600 var(--text-title-size)/1 var(--font-mono); fill: var(--ink-muted); }
.cx-d.on { fill: var(--ink); font-weight: 700; }
.cx-rule { stroke: var(--line); stroke-width: 2; }
.cx-line { stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: cxDraw var(--duration-slow) ease-out both; }
.cx-line.cx-dash { stroke-dasharray: .06 .06; stroke-width: 3; animation: none; opacity: .8; }
.cx-coral { stroke: var(--coral); } .cx-teal { stroke: var(--teal); } .cx-sky { stroke: var(--sky); } .cx-sun { stroke: var(--sun); } .cx-plum { stroke: var(--plum); }
@keyframes cxDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cx-line { animation: none; } }
/* The same with Pause motion (html.motion-paused) and Calm (body.calm): shown, not drawn in */
html.motion-paused .cx-line, body.calm .cx-line, .anim-links.still .cx-line { animation: none; }
.anim-board:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-md); }
.anim-nav { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
#animPos { font: 500 13px/1 var(--font-mono); color: var(--ink-muted); }
.hl { border-radius: var(--radius-2xs); padding: 0 .18em; color: var(--on-accent); }
.hl-coral { background: var(--coral); } .hl-teal { background: var(--teal); } .hl-sky { background: var(--sky); } .hl-sun { background: var(--sun); } .hl-plum { background: var(--plum); }

/* Games */
.mq-game { color: var(--ink); text-decoration: none; display: flex; flex-direction: column; }
.mq-game-f { margin-top: auto; padding-top: var(--space-2-5); color: var(--ink-muted); font-size: 13px; }
.g-shell { padding: var(--space-6); min-height: 260px; }
.g-optrow { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.g-best { color: var(--ink-muted); }
.g-result { margin-bottom: var(--space-3-5); max-width: 240px; }
.g-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2-5); margin-bottom: var(--space-2-5); min-height: 40px; }
.g-sayline { font-weight: 700; color: var(--ink); }
.g-timer { position: relative; height: 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 10%, transparent); margin-bottom: var(--space-3-5); overflow: hidden; }
.g-timer span { position: absolute; inset: 0 auto 0 0; background: var(--sun-strong); border-radius: inherit; }
/* Game prompts sit inside .md-card.g-shell: .g-shell raises them above the design system's .md-card p (15px, muted) */
.g-say, .g-shell .g-say { margin: 0 0 var(--space-2-5); font-size: 1.15rem; color: var(--ink); }
.g-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2-5); max-width: 420px; }
.g-tile { aspect-ratio: 1.4; border: 2px solid var(--edge); border-radius: var(--radius-md); background: var(--card); color: var(--ink); font: 700 var(--text-title-size)/1 var(--display); cursor: pointer; box-shadow: var(--shadow-ledge); }
.g-tile[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.g-tile:hover { transform: translateY(-2px); }
.g-stage { min-height: 120px; display: grid; place-items: center; max-width: 260px; margin: 0 auto var(--space-3-5); transition: opacity var(--duration-fast); }
.g-stage.g-hidden { opacity: 0; }
.g-opts { display: flex; flex-wrap: wrap; gap: var(--space-2-5); justify-content: center; }
.g-opts .md-chip { font-size: 1.3rem; min-width: 64px; min-height: 52px; justify-content: center; }
.bond { position: relative; width: 240px; height: 190px; margin: 0 auto var(--space-3-5); }
.bond > span { position: absolute; display: grid; place-items: center; width: 74px; height: 74px; border-radius: var(--radius-round); border: 3px solid var(--edge); font: 700 1.6rem/1 var(--display); background: var(--card); color: var(--ink); }
.bond .bond-w { left: 83px; top: 0; background: var(--sun); color: var(--on-accent); }
.bond .bond-a { left: 0; top: 112px; background: var(--sky); color: var(--on-accent); }
.bond .bond-b { right: 0; top: 112px; border-style: dashed; }
.bond .bond-l, .bond .bond-r { width: 3px; height: 70px; border: 0; border-radius: 0; background: var(--edge); top: 62px; }
.bond .bond-l { left: 82px; transform: rotate(38deg); } .bond .bond-r { right: 82px; transform: rotate(-38deg); }
.g-q, .g-shell .g-q { font: 700 clamp(2rem, 7vw, 3rem)/1.2 var(--display); text-align: center; margin: var(--space-1-5) 0 var(--space-3); color: var(--ink); }
.g-form { display: flex; gap: var(--space-2-5); justify-content: center; align-items: center; flex-wrap: wrap; }
.g-form .ans-in { max-width: 220px; text-align: center; }
.g-tip { text-align: center; color: var(--ink-muted); min-height: 1.6em; }
.g-target { text-align: center; margin-bottom: var(--space-3-5); }
.g-target-t { display: inline-grid; place-items: center; min-width: 96px; height: 96px; padding: 0 var(--space-3-5); border-radius: var(--radius-round); background: var(--plum); color: var(--on-accent); font: 700 2.6rem/1 var(--display); border: 3px solid var(--edge); }
.g-target-n { display: flex; justify-content: center; gap: var(--space-2-5); margin-top: var(--space-3); }
.g-target-n span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-md); border: 2px solid var(--edge); background: var(--card); font: 700 1.6rem/1 var(--display); box-shadow: var(--shadow-ledge); }
.g-tools { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.g-duel { display: flex; gap: var(--space-4); justify-content: center; margin: var(--space-2-5) 0 var(--space-4); }
.g-frac { min-width: 110px; min-height: 110px; border: 2px solid var(--edge); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); font: 700 2rem/1 var(--display); cursor: pointer; box-shadow: var(--shadow-ledge); }
.g-frac:hover { transform: translateY(-2px); }
.g-fig { display: grid; gap: var(--space-1-5); justify-items: center; max-width: 260px; margin: 0 auto; }
.g-line { max-width: 560px; margin: 0 auto var(--space-4); }
.g-line-track { position: relative; height: 4px; background: var(--ink); border-radius: var(--radius-2xs); margin: var(--space-6) var(--space-2-5) 0; }
.g-line-true { position: absolute; top: -14px; width: 4px; height: 32px; margin-left: calc(-1 * var(--space-1)); background: var(--coral-strong); border-radius: var(--radius-2xs); }
.g-line input[type=range] { width: 100%; margin-top: calc(-1 * var(--space-3-5)); accent-color: var(--sky-strong); height: 28px; }
.g-line-labels { display: flex; justify-content: space-between; font-weight: 700; padding: 0 var(--space-1); }
.g-ok { animation: gOk var(--duration-slow); } .g-no { animation: gNo .35s; }
@keyframes gOk { 50% { transform: scale(1.03); } }
@keyframes gNo { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Progress */
.mq-prog { display: grid; gap: var(--space-2); max-width: 720px; margin-top: var(--space-6); }
.mq-prog-row { display: grid; grid-template-columns: 210px 1fr 56px; gap: var(--space-3-5); align-items: center; padding: var(--space-2-5) var(--space-3-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); color: var(--ink); text-decoration: none; }
.mq-prog-row:hover { border-color: var(--edge); }
.mq-prog-g { font-weight: 700; }
.mq-prog-n { font: 500 var(--text-code-size)/1 var(--font-mono); text-align: right; }
@media (max-width: 560px) { .mq-prog-row { grid-template-columns: 1fr 48px; } .mq-prog-row .mq-bar { grid-column: 1 / -1; grid-row: 2; } }
.mq-data { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.mq-foot { border-top: 1px solid var(--line); padding: var(--space-7) 0 40px; color: var(--ink-muted); font-size: var(--text-label-size); }

@media (prefers-reduced-motion: reduce) {
  .anim-step.cur, .g-ok, .g-no { animation: none; }
  .mq-grade, .mq-skill, .mq-continue, .g-tile, .g-frac, .ring-fg, .g-stage { transition: none; }
}
/* The same with Pause motion (html.motion-paused) and Calm (body.calm) */
html.motion-paused .anim-step.cur, body.calm .anim-step.cur, html.motion-paused .g-ok, body.calm .g-ok, html.motion-paused .g-no, body.calm .g-no { animation: none; }
html.motion-paused .mq-grade, body.calm .mq-grade, html.motion-paused .mq-skill, body.calm .mq-skill, html.motion-paused .mq-continue, body.calm .mq-continue, html.motion-paused .g-tile, body.calm .g-tile, html.motion-paused .g-frac, body.calm .g-frac, html.motion-paused .ring-fg, body.calm .ring-fg, html.motion-paused .g-stage, body.calm .g-stage { transition: none; }

/* ===== Vedic Math for Everyone: modes, gamification, competitive play ===== */
/* Before a Player picks a Mode the tabs lead nowhere (every route shows the mode picker), so they are hidden */
.mode-none .mq-nav { display: none; }
.mq-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2-5) var(--space-1) var(--space-1); border: 2px solid var(--edge); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); text-decoration: none; margin: var(--space-1) 0; white-space: nowrap; }
.mq-chip-t { display: grid; gap: var(--space-1); font-size: 12px; }
.mq-chip-belt { flex: none; width: 18px; height: 8px; border-radius: var(--radius-2xs); border: 2px solid var(--edge); background: var(--belt); } /* the Belt held (openspec working-memory-scaffolds) */
.mq-sparkbar { display: block; width: 64px; height: 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.mq-sparkbar i { display: block; height: 100%; background: var(--sun-strong); border-radius: inherit; transition: width .6s; }
html.motion-paused .mq-sparkbar i, body.calm .mq-sparkbar i { transition: none; }
.mq-sparkbar--big { width: 100%; max-width: 360px; height: 10px; margin-top: var(--space-1-5); }
.av { display: inline-grid; place-items: center; border-radius: var(--radius-round); border: 2px solid var(--edge); color: var(--on-accent); font: 700 1rem/1 var(--display); flex: none; }
.av-coral { background: var(--coral); } .av-teal { background: var(--teal); } .av-sun { background: var(--sun); } .av-sky { background: var(--sky); } .av-plum { background: var(--plum); }
.mq-note { color: var(--ink-muted); font-size: var(--text-label-size); }
.mq-small { color: var(--ink-muted); font-size: var(--text-label-sm-size); margin: var(--space-1-5) 0; }

/* Mode picker */
/* The three Mode cards are the picker's only buttons (openspec change play-nav-by-mode), each ending in its call to
   action, "Start as <Mode>", like the landing page's Mode cards */
.mode-go { display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: 40px; margin-top: var(--space-2); padding: 0 var(--space-4); border: 2px solid var(--edge); border-radius: var(--radius-pill); color: var(--on-accent); font-weight: 800; }
.mode-go svg { width: 1.1em; height: 1.1em; flex: none; }
.mode-card--sun .mode-go { background: var(--sun); } .mode-card--sky .mode-go { background: var(--sky); } .mode-card--plum .mode-go { background: var(--plum); }
.mode-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 900px) { .mode-go { grid-column: 2; justify-self: start; } }
/* The picker's heading is a title (24px), above the card titles (20px); .mq-h3 (above) sets its size and margin with
   !important, so these do too */
.pick-h { font: var(--text-title) !important; letter-spacing: var(--text-title-tracking); margin: 0 0 var(--space-3) !important; }
.mode-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: 0 0 var(--space-4); }
.mode-card { display: grid; gap: var(--space-1); align-content: start; justify-items: start; text-align: left; padding: var(--space-5); border: 2px solid var(--edge); border-radius: var(--radius-xl); background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-ledge); font: inherit; transition: transform var(--duration-fast), box-shadow var(--duration-fast); }
.mode-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-ledge-hover); }
.mode-card:active { transform: translateY(2px); box-shadow: var(--shadow-ledge-press); }
.mode-card b { font: var(--text-card-title); letter-spacing: var(--text-card-title-tracking); }
.mode-card small { font: var(--text-label-sm); color: var(--ink-muted); }
.mode-card > span:not(.mode-ic):not(.mode-go) { text-wrap: pretty; }
.mode-ic { width: 64px; height: 64px; border-radius: var(--radius-md); display: grid; place-items: center; margin-bottom: var(--space-2); color: var(--on-accent); }
.mode-card--sun .mode-ic { background: var(--sun); } .mode-card--sky .mode-ic { background: var(--sky); } .mode-card--plum .mode-ic { background: var(--plum); }
.mode-card[aria-pressed="true"] { outline: 4px solid var(--teal-strong); outline-offset: 3px; }
/* Phones and tablets: one column of row cards, the icon beside the words, so the three take a short screen */
@media (max-width: 900px) {
  .mode-pick { grid-template-columns: 1fr; }
  .mode-card { grid-template-columns: auto 1fr; column-gap: var(--space-4); align-items: center; padding: var(--space-4); }
  .mode-ic { grid-row: span 3; width: 48px; height: 48px; margin: 0; }
}
.mode-pick--sm .mode-card { padding: var(--space-3-5); } .mode-pick--sm .mode-card b { font-size: 1.2rem; } .mode-pick--sm .mode-ic { width: 48px; height: 48px; }

/* Home */
.me-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-4-5); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-card); }
.me-strip-t { display: grid; flex: 1; min-width: 200px; }
.me-strip-t small { color: var(--ink-muted); }
.me-strip-t b { font: 600 1.3rem/1.2 var(--display); }
.me-strip-t span { font-size: var(--text-label-size); color: var(--ink-muted); }
.me-nums { display: flex; gap: var(--space-4-5); }
.me-nums div { display: grid; text-align: center; }
.me-nums b { font: 700 1.6rem/1 var(--display); }
.me-nums small { color: var(--ink-muted); font-size: 12px; }
.home-h { margin-top: var(--space-6) !important; }
.mode-line { color: var(--ink-muted); font-size: var(--text-label-size); margin: var(--space-1) 0 var(--space-4); }
/* A compact Player strip on a phone (openspec find-and-home-polish): one row with the avatar, name, Title and bar, and
   the three numbers on one short line under it, so the first door is near the top of the screen */
@media (max-width: 600px) {
  .me-strip { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); padding: var(--space-2-5) var(--space-3-5); border-radius: var(--radius-lg); }
  .me-strip > .av { width: 40px !important; height: 40px !important; font-size: var(--text-body-size) !important; }
  .me-strip-t { min-width: 0; }
  .me-strip-t b { font-size: 1.1rem; }
  .me-strip-t span { font-size: 13px; }
  .me-strip .mq-sparkbar--big { height: 8px; margin-top: var(--space-1); }
  .me-nums { grid-column: 1 / -1; gap: var(--space-4); }
  .me-nums div { display: flex; align-items: baseline; gap: var(--space-1); }
  .me-nums b { font-size: 1rem; }
  .home-h { margin-top: var(--space-4) !important; }
  .mode-line { margin-bottom: var(--space-2-5); }
}
.mode-line a { color: var(--sky-strong); font-weight: 700; }
.play-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3-5); margin-top: var(--space-4-5); }
.play-grid--big { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.play-tile { display: grid; gap: var(--space-1); padding: var(--space-4-5); border: 2px solid var(--edge); border-radius: var(--radius-xl); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-ledge); transition: transform var(--duration-fast); }
.play-tile:hover { transform: translateY(-3px) rotate(-.6deg); }
.play-tile:active { transform: translateY(2px); box-shadow: none; }
.play-tile b { font: 600 1.15rem/1.2 var(--display); }
.play-tile small { color: var(--ink-muted); font-size: var(--text-label-sm-size); line-height: 1.35; }
.play-ic { width: 52px; height: 52px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--on-accent); margin-bottom: var(--space-1-5); }
.play-tile--coral .play-ic { background: var(--coral); } .play-tile--teal .play-ic { background: var(--teal); } .play-tile--sun .play-ic { background: var(--sun); } .play-tile--sky .play-ic { background: var(--sky); } .play-tile--plum .play-ic { background: var(--plum); }
.play-grid--big .play-tile { padding: var(--space-5) var(--space-4); text-align: center; justify-items: center; }
.play-grid--big .play-ic { width: 76px; height: 76px; border-radius: var(--radius-lg); }
.play-grid--big .play-ic svg { width: 40px; height: 40px; }
.play-grid--big .play-tile b { font-size: 1.3rem; }
/* Home doors (openspec first-visit): three things first, each with one plain line; the rest under More ways to play */
.home-doors { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-4); margin-top: var(--space-4-5); align-items: start; }
@media (max-width: 980px) { .home-doors { grid-template-columns: 1fr 1fr; } .home-doors .dojo-card { grid-column: 1 / -1; } }
@media (max-width: 560px) { .home-doors { grid-template-columns: 1fr; } }
.door { margin: 0; } .dojo-card .door-line { margin-top: var(--space-3); } .door-line { color: var(--ink-muted); font-size: 14.5px; line-height: 1.45; margin: var(--space-1-5) 0 var(--space-3); }
.door-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
a.door { display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-1-5); text-decoration: none; color: var(--ink); border: 2px solid var(--edge); transition: transform var(--duration-fast), border-color var(--duration-fast); }
a.door:hover, a.door:focus-visible { transform: translateY(-3px); } a.door b { font: 600 1.15rem/1.2 var(--display); } a.door .door-line { margin: 0; }
a.door .play-ic { width: 44px; height: 44px; } .door--coral .play-ic { background: var(--coral); } .door--sun .play-ic { background: var(--sun); } .door--sky .play-ic { background: var(--sky); } .door--plum .play-ic { background: var(--plum); }
.home-more summary { font: 600 1.15rem/1.2 var(--display); padding: var(--space-2-5) 0; }
.board-card .lb-wrap { margin-top: var(--space-2); }
.home-2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-4); margin-top: var(--space-4-5); } .quest-card { margin-top: var(--space-4-5); } .home-2 .quest-card { margin-top: 0; }
@media (max-width: 860px) { .home-2 { grid-template-columns: 1fr; } }
.home-2 .md-card:hover, .quest-card:hover, .history:hover, .me-head:hover { transform: none; }
/* The Placement offer and climb are not links: no hover lift, which under a still pointer (the Mode card just tapped
   there) moved the card off and back on the pointer every frame */
.place.md-card:hover { transform: none; }
.dojo-card p { margin: var(--space-1-5) 0 var(--space-3); }
.belts-mini { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin: var(--space-2-5) 0; }
.belt-mini { width: 34px; height: 12px; border-radius: var(--radius-2xs); border: 2px solid var(--edge); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.belt-mini.on { background: var(--belt); }
.quests { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2-5); }
.quests li { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--space-2-5); align-items: center; }
.q-check { width: 26px; height: 26px; border-radius: var(--radius-round); border: 2px solid var(--edge); display: grid; place-items: center; font-weight: 700; }
.quests li.done .q-check { background: var(--teal); color: var(--on-accent); }
.q-t { display: grid; gap: var(--space-1); font-weight: 700; font-size: var(--text-small-size); }
.q-n { font: 500 13px/1 var(--font-mono); color: var(--ink-muted); }
.mq-more { margin-top: var(--space-6); } .mq-more summary { cursor: pointer; font-weight: 700; margin-bottom: var(--space-3); }
.rel-links { display: grid; gap: var(--space-2); }
.rel-links a { display: flex; gap: var(--space-2-5); align-items: center; padding: var(--space-2-5) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--text-small-size); }
.rel-links a:hover { border-color: var(--edge); }
.rel-links svg { color: var(--coral-strong); flex: none; }
.pr-run { font-size: 13px; color: var(--coral-strong); font-weight: 700; margin-left: auto; }

/* Explorer mode: bigger targets, no typing, friendly type */
.mode-explorer .pr-choice { font: 700 2rem/1 var(--display); min-width: 96px; min-height: 84px; border-radius: var(--radius-lg); }
.mode-explorer .pr-q { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.mode-explorer .pr-q.long { font: 600 1.4rem/1.5 var(--display); }
.mode-explorer #prShow { display: none; }
.mode-explorer .md-btn { min-height: 48px; }

/* The Early Reading band (openspec change age-bands, body.band-early from js/fx.js applyMode): larger buttons and more
   room between them in every Mode, tokens only; nothing else changes by band, and both color schemes are untouched. */
body.band-early .md-btn, body.band-early .md-chip { min-height: 48px; }
body.band-early .pr-choice { font: 700 2rem/1 var(--display); min-width: 96px; min-height: 84px; border-radius: var(--radius-lg); }
body.band-early .pr-q { font-size: clamp(1.7rem, 5vw, 2.4rem); }
body.band-early .pr-q.long { font: 600 1.4rem/1.5 var(--display); }
body.band-early .pr-choices, body.band-early .pr-actions { gap: var(--space-3); }
body.band-early .star-choice { min-width: 120px; min-height: 64px; font-size: 1.5rem; }
body.band-early .star-choices { gap: var(--space-4); }
body.band-early .ar-choice { min-height: 84px; }
body.band-early .ar-choices { gap: var(--space-4); }
/* The age question (js/age-question.js, openspec change first-sutra-and-age): a vm-sheet with its speaker button, and at
   the first visit Bolt's line and big age buttons; at a post (.vm-age--post) the Mode's words and the usual buttons */
.vm-age .vs-head h2 { flex: 1; }
.vm-age .age-bolt { display: flex; align-items: center; gap: var(--space-2-5); margin: var(--space-2) 0 var(--space-3-5); }
.vm-age .age-bolt .bolt { width: 56px; height: 56px; }
.vm-age .age-bolt .md-bubble { margin: 0; flex: 1; }
.vm-age:not(.vm-age--post) .age-opt { min-height: 48px; font-size: 1.15rem; justify-content: center; }
.age-hear svg { width: 24px; height: 24px; }
.vm-age button { min-height: 44px; min-width: 44px; }
/* The Mode picker while the age question is open: the cards keep their place and are not painted */
.mode-pick--wait .mode-card { visibility: hidden; }
/* The first-visit picker in the server's HTML (react-typescript 4.3, data-first-visit until hydration) is never painted
   for a Player who has a Mode: the pre-paint script puts it on <html data-player-mode>, and the app draws Home in its place */
html[data-player-mode] [data-first-visit] { display: none; }
/* A React view's words for each Mode before the app starts (react-typescript 4.7, app/src/shell/mode-words.ts): the
   pre-paint mark picks the ones painted, and with no mark (a first visit) the none ones, the Challenger words */
html:not([data-player-mode]) [data-for-mode]:not([data-for-mode~="none"]),
html[data-player-mode="explorer"] [data-for-mode]:not([data-for-mode~="explorer"]),
html[data-player-mode="challenger"] [data-for-mode]:not([data-for-mode~="challenger"]),
html[data-player-mode="pro"] [data-for-mode]:not([data-for-mode~="pro"]) { display: none; }
.mode-sugg { justify-self: start; }
.pick-hear { margin: 0 0 var(--space-3); }
/* The home card that offers the age question */
.reading-card { margin: var(--space-3) 0; }
.reading-card .door-line { margin: var(--space-1-5) 0 var(--space-3); }
.me-reading { margin-top: var(--space-3); }
.me-help .md-btn[aria-pressed="true"] { border-color: var(--sky); background: var(--sky); color: var(--on-accent); }

/* Dojo */
.belt-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.belt-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-pill); border: 2px dashed var(--line); color: var(--ink-muted); font-weight: 700; font-size: var(--text-label-size); }
.belt-chip.on { border: 2px solid var(--edge); color: var(--ink); background: var(--card); }
.belt-knot { width: 22px; height: 10px; border-radius: var(--radius-2xs); border: 2px solid var(--edge); background: var(--belt); }
.belt-chip:not(.on) .belt-knot { opacity: .35; }
.dojo-path { display: grid; gap: var(--space-3-5); margin-top: var(--space-5); position: relative; }
.dojo-belt { padding: var(--space-4) var(--space-4-5); border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-card); }
.dojo-belt.earned { border: 2px solid var(--teal-strong); }
.dojo-h { display: flex; align-items: center; gap: var(--space-3); font-size: 1.3rem !important; margin: 0 0 var(--space-3) !important; }
.dojo-h small { margin-left: auto; font: 500 var(--text-code-size)/1 var(--font-mono); color: var(--ink-muted); }
.belt-swatch { width: 54px; height: 18px; border-radius: var(--radius-2xs); border: 2px solid var(--edge); background: var(--belt); position: relative; }
.belt-swatch::after { content: ""; position: absolute; left: 20px; top: -4px; width: 10px; height: 22px; border-radius: var(--radius-2xs); border: 2px solid var(--edge); background: var(--belt); }
.dojo-nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2-5); }
@media (max-width: 760px) { .dojo-nodes { grid-template-columns: 1fr; } }
.dojo-node { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2-5); border-radius: var(--radius-lg); border: 2px solid var(--edge); background: var(--bg); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-ledge); transition: transform var(--duration-fast); }
.dojo-node:hover { transform: translateY(-2px); }
.dojo-node b { display: block; line-height: 1.25; }
.dojo-node small { display: block; color: var(--plum-strong); font-size: var(--text-kicker-size); }
.dojo-node em { font-style: normal; font-size: var(--text-kicker-size); color: var(--ink-muted); font-weight: 700; }
.dojo-node.mq-done em { color: var(--teal-strong); }

/* Sutra cards */
.sutra-bar { max-width: 520px; margin-bottom: var(--space-4-5); }
.history { margin-bottom: var(--space-2); } .history p { color: var(--ink); font-size: 15.5px; margin: var(--space-1-5) 0; }
.history a { color: var(--sky-strong); font-weight: 700; }
.sutra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3-5); }
.sutra-card { position: relative; display: grid; min-height: 220px; border: 2px solid var(--edge); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); box-shadow: var(--shadow-ledge); overflow: hidden; transition: transform var(--duration-medium); }
.sutra-card:hover { transform: translateY(-3px) rotate(-.4deg); }
.sutra-card.got { background: linear-gradient(160deg, color-mix(in srgb, var(--plum) 22%, var(--card)), var(--card) 60%); }
/* Both sides share one grid cell, so the card is as tall as its taller side and nothing on the back is cut off */
.sutra-face, .sutra-back { grid-area: 1 / 1; position: relative; min-width: 0; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1-5); transition: transform var(--duration-slow), opacity var(--duration-medium); backface-visibility: hidden; }
.sutra-face { border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; }
/* The face sits in the flow, so the card grows with its text (WCAG 1.4.12) instead of clipping it; the back scrolls */
.sutra-face { min-height: 220px; box-sizing: border-box; overflow-wrap: anywhere; }
.sutra-back { transform: rotateY(180deg); opacity: 0; pointer-events: none; font-size: 14.5px; line-height: 1.45; overflow: auto; }
.sutra-card.flipped .sutra-face { transform: rotateY(-180deg); opacity: 0; pointer-events: none; }
.sutra-card.flipped .sutra-back { transform: none; opacity: 1; pointer-events: auto; }
.sutra-n { font: var(--text-kicker-weight) var(--text-kicker-size)/1 var(--font-sans); letter-spacing: var(--text-kicker-tracking); text-transform: uppercase; color: var(--ink-muted); }
.sutra-face b { font: 600 1.2rem/1.25 var(--display); color: var(--plum-strong); }
.sutra-face i { color: var(--ink-muted); }
.sutra-got, .sutra-tap { margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 700; padding: var(--space-1) var(--space-2-5); border-radius: var(--radius-pill); }
.sutra-got { background: var(--teal); color: var(--on-accent); } .sutra-tap { border: 1px dashed var(--ink-muted); color: var(--ink-muted); }
.sutra-back code { font: 500 13px/1.4 var(--font-mono); background: color-mix(in srgb, var(--sun) 20%, var(--card)); padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-xs); }
/* Learn more is the main action: a full-width row of its own, then Listen and flip back (DOM order matches, so focus does too) */
.sutra-acts { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-1-5); }
.sutra-acts .sutra-more { grid-column: 1 / -1; justify-content: center; white-space: nowrap; }
.sutra-acts .listen-btn { justify-self: start; }
.sutra-more { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-pill); background: var(--plum); color: var(--on-accent); font-weight: 700; font-size: var(--text-label-size); text-decoration: none; border: 2px solid var(--edge); box-shadow: 0 2px 0 var(--ledge); }
.sutra-more svg { width: 18px; height: 18px; }
.sutra-flipback { margin-left: auto; }
.sutra-flipback svg { width: 18px; height: 18px; }

/* Leaderboards */
.lb-tabs { margin-bottom: var(--space-2-5); } /* the World and This device tabs: the design system's .md-seg */
.lb-tabs button:focus-visible { outline-offset: -3px; } /* .md-seg clips what is outside it, so the focus ring sits inside the tab */
.lb-tabs button[aria-selected="true"]:focus-visible { outline-color: var(--bg); } /* on the ink fill, the ring takes the page background */
.lb-src { margin: 0 0 var(--space-2); } .lb-why { margin-top: var(--space-2); } .lb-show { margin: var(--space-2-5) 0 0; }
.lb { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-1-5); }
.lb li { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-1-5) var(--space-2-5); border-radius: var(--radius-md); background: color-mix(in srgb, var(--ink) 4%, var(--card)); }
.lb li.me { outline: 2px solid var(--teal-strong); }
.lb-rank { width: 26px; height: 26px; border-radius: var(--radius-round); display: grid; place-items: center; font: 700 13px/1 var(--font-sans); border: 2px solid var(--line); }
.lb-rank.r1 { background: var(--sun); border-color: var(--edge); color: var(--on-accent); } .lb-rank.r2 { background: var(--sky); border-color: var(--edge); color: var(--on-accent); } .lb-rank.r3 { background: var(--coral); border-color: var(--edge); color: var(--on-accent); }
.lb-name { flex: 1; font-weight: 700; font-size: 14.5px; }
.lb li b { font: 700 1.05rem/1 var(--display); }
.lb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4-5); margin-top: var(--space-4-5); }
@media (max-width: 640px) { .lb-cols { grid-template-columns: 1fr; } }

/* Arena */
.ar-shell, .g-shell { padding: var(--space-6); }
@media (max-width: 560px) { .ar-shell, .g-shell { padding: var(--space-4); } }
.ar-shell:hover { transform: none; }
.ar-go { font-size: 1.15rem; padding: var(--space-3-5) var(--space-7); }
.ar-count { font: 700 6rem/1 var(--display); text-align: center; padding: 40px 0; animation: arPulse .7s infinite; }
@keyframes arPulse { from { transform: scale(1.3); opacity: .4; } }
.ar-result { display: grid; gap: var(--space-1); margin-bottom: var(--space-3-5); } .ar-result .md-stat { max-width: 300px; }
.ar-msg { font-weight: 700; }
/* A challenge link's line in the lobby (openspec change arena-challenge-link): the Score to beat, and why a round is Practice */
.ar-friend { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--sun) 18%, var(--card)); color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.fx-sparks { font: 500 13px/1 var(--font-mono); color: var(--teal-strong); background: color-mix(in srgb, var(--teal) 14%, var(--card)); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); }
.ar { position: relative; }
.ar-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2-5); margin-bottom: var(--space-2); }
.ar-score, .ar-time { display: grid; text-align: center; } .ar-score small, .ar-time small { color: var(--ink-muted); font-size: 12px; font-weight: 700; }
.ar-score b, .ar-time b { font: 700 2rem/1 var(--display); }
.ar-combo { font-weight: 700; color: var(--coral-strong); } .ar-combo b { font-size: 1.4rem; }
.ar-bar span { background: var(--coral-strong); }
.ar-q { font: 600 clamp(1.8rem, 6vw, 2.8rem)/1.25 var(--display); text-align: center; margin: var(--space-3-5) 0; overflow-wrap: anywhere; }
/* The Arena's Word problems round (openspec word-problems-more): the label over the story, the story in the body font
   so it reads like text, and the unit beside the entry */
.ar-story { display: block; width: fit-content; align-self: center; margin: var(--space-2) auto 0; } .ar-story[hidden] { display: none; }
.ar-q.ar-q--story { font: 600 1.2rem/1.55 var(--font-sans); text-align: start; max-width: 40em; margin-inline: auto; }
.ar-unit { font-weight: 700; font-size: 1.2rem; }
.ar-viz { display: grid; place-items: center; max-width: 260px; margin: 0 auto var(--space-2-5); }
.ar-viz:empty { display: none; }
.ar-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); max-width: 420px; margin: 0 auto; }
.ar-choice { min-height: 76px; border: 2px solid var(--edge); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); font: 700 2rem/1 var(--display); cursor: pointer; box-shadow: var(--shadow-ledge); touch-action: manipulation; }
.ar-choice:active { transform: translateY(2px); box-shadow: none; }
.ar-form { display: flex; gap: var(--space-2-5); justify-content: center; align-items: center; }
.ar-entry { min-width: 180px; min-height: 56px; display: grid; place-items: center; border: 2px solid var(--edge); border-radius: var(--radius-md); font: 700 1.8rem/1 var(--display); background: var(--card); }
.ar-hidden { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ar-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); max-width: 320px; margin: var(--space-3-5) auto 0; }
.ar-key { min-height: 56px; border: 2px solid var(--edge); border-radius: var(--radius-md); background: var(--card); color: var(--ink); font: 700 var(--text-title-size)/1 var(--display); cursor: pointer; box-shadow: var(--shadow-ledge); touch-action: manipulation; }
.ar-key:active { transform: translateY(3px); box-shadow: none; }
@media (pointer: fine) { .ar-pad { max-width: 260px; } .ar-key { min-height: 44px; font-size: 1.2rem; } }
.ar-pop { position: absolute; left: 50%; top: 40%; transform: translate(-50%, 0); font: 700 2rem/1 var(--display); opacity: 0; pointer-events: none; }
.ar-pop.show { animation: arPop .6s ease-out; } .ar-pop.ok { color: var(--teal-strong); } .ar-pop.no { color: var(--coral-strong); }
@keyframes arPop { 0% { opacity: 1; transform: translate(-50%, 0) scale(1.4); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }

/* Duel */
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 700px) { .duel { grid-template-columns: 1fr; } }
.duel-side { padding: var(--space-3-5); border-radius: var(--radius-lg); border: 2px solid var(--edge); }
.duel-side > * { transition: opacity var(--duration-medium); }
.duel-p1 { background: color-mix(in srgb, var(--coral) 14%, var(--card)); } .duel-p2 { background: color-mix(in srgb, var(--sky) 14%, var(--card)); }
/* Frozen or out of this question: dim everything but the revealed answer */
.duel-side.frozen > :not(.duel-ans) { opacity: .45; }
.duel-name { font-weight: 700; } .duel-name b { font: 700 var(--text-title-size)/1 var(--display); }
.duel-q { font: 600 1.8rem/1.3 var(--display); text-align: center; margin: var(--space-3-5) 0; min-height: 2.6em; }
.duel-ch { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.duel-ch .ar-choice { min-height: 64px; font-size: 1.6rem; }
.duel-viz { display: grid; place-items: center; max-width: 260px; margin: calc(-1 * var(--space-1)) auto var(--space-3); }
.duel-viz:empty { display: none; }
.duel-viz svg { max-width: 100%; height: auto; }
.duel-ch .ar-choice.right { border-color: var(--teal-strong); background: color-mix(in srgb, var(--teal) 18%, var(--card)); }
.duel-ans { text-align: center; font-weight: 700; min-height: 1.4em; margin: var(--space-2-5) 0 0; color: var(--ink); }
.duel-flipped .duel-p1 { transform: rotate(180deg); }
@media (min-width: 701px) { .duel-flipped .duel-p1 { transform: none; } }
.duel-flip { display: flex; gap: var(--space-2); align-items: center; font-weight: 600; margin: var(--space-2) 0; }

/* Watch shelf */
.watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); margin-top: var(--space-3-5); }
.watch-card { display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--space-2-5) var(--space-2-5) var(--space-3-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-card); transition: transform var(--duration-fast); }
.watch-card:hover { transform: translateY(-3px); border-color: var(--edge); }
.watch-th { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--sky) 18%, var(--card)); color: var(--sky-strong); }
.watch-th img { width: 100%; height: 100%; object-fit: cover; }
.watch-th--website, .watch-th--game { background: color-mix(in srgb, var(--teal) 16%, var(--card)); color: var(--teal-strong); }
.watch-th--channel, .watch-th--short { background: color-mix(in srgb, var(--coral) 14%, var(--card)); color: var(--coral-strong); }
.watch-th svg { width: 44px; height: 44px; }
.watch-type { position: absolute; left: 8px; top: 8px; background: var(--card); color: var(--ink); font: 700 11px/1 var(--font-sans); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); border: 1px solid var(--edge); }
.watch-card b { font: 600 1.05rem/1.25 var(--display); padding: 0 var(--space-1); }
.watch-card small { color: var(--ink-muted); font-size: var(--text-label-sm-size); line-height: 1.4; padding: 0 var(--space-1); }
.watch-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0 var(--space-1); margin-top: auto; }
.watch-tags span { font-size: 11.5px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 6%, var(--card)); }
.watch-tags .tagv { background: var(--plum); color: var(--on-accent); font-weight: 700; }

/* Me */
.me-head { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.me-head p { margin: var(--space-1) 0; }
.me-acts { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-2-5); }
.av-pick { width: 32px; height: 32px; cursor: pointer; }
.av-pick[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.me-stats { margin-top: var(--space-4); }
/* Recent Sparks (openspec change muse-review-polish, design D4): the last awards, newest first, what for and when */
.me-log { margin-top: var(--space-4); }
.me-log:hover { transform: none; }
.sparks-log { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: var(--space-1-5); }
.sparks-log li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-2-5); align-items: baseline; font-size: var(--text-small-size); }
.sl-n { font: 500 13px/1 var(--font-mono); color: var(--teal-strong); }
.sl-when { color: var(--ink-muted); font-size: var(--text-label-sm-size); white-space: nowrap; }
.me-log-more { margin-top: var(--space-2); }
/* The Trophy case (openspec working-memory-scaffolds): Belts, Stars, Medals and Sutra cards, then the Badges */
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.trophy { padding: var(--space-3-5) var(--space-4); border: 2px solid var(--edge); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-ledge); display: grid; gap: var(--space-2); align-content: start; }
.trophy h3.md-kicker { margin: 0; }
.trophy-v { margin: 0; font-weight: 700; font-size: 1.1rem; display: flex; flex-wrap: wrap; gap: var(--space-1-5) var(--space-3); align-items: center; }
.trophy-m { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.trophy-go { margin: 0; font-weight: 700; }
.trophy-go a { color: var(--sky-strong); }
.trophy .mq-small { margin: 0; }
.trophy-belts { list-style: none; margin: 0; padding: 0; }
.trophy-belts .belt-chip { font-size: 13px; padding: var(--space-1) var(--space-2-5); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-2-5); }
.badge { display: grid; gap: var(--space-1); justify-items: center; text-align: center; padding: var(--space-3-5) var(--space-2-5); border-radius: var(--radius-lg); border: 1px dashed var(--line); color: var(--ink-muted); }
.badge b { color: var(--ink); font-size: 14.5px; } .badge small { font-size: var(--text-kicker-size); line-height: 1.35; }
.badge-medal { width: 54px; height: 54px; border-radius: var(--radius-round); display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.badge.got { border: 2px solid var(--edge); background: var(--card); box-shadow: var(--shadow-ledge); }
.badge.got .badge-medal { background: var(--sun); color: var(--on-accent); border: 2px solid var(--edge); }
.players { display: grid; gap: var(--space-2); max-width: 620px; }
.player { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.player > span:not(.av) { flex: 1; display: grid; } .player small { color: var(--ink-muted); }
.player.on { border: 2px solid var(--teal-strong); } .player em { font-style: normal; font-weight: 700; color: var(--teal-strong); }
.players > .md-btn { justify-self: start; }
.me-restore { max-width: 640px; margin-top: var(--space-3); } .me-restore [hidden] { display: none; }
.me-restore ul { margin: var(--space-2) 0; padding-left: var(--space-5); }
.me-set { display: flex; gap: var(--space-5); flex-wrap: wrap; font-weight: 600; }
.me-set input { width: 18px; height: 18px; accent-color: var(--teal-strong); }

/* Explorer games */
.g-q-sm, .g-shell .g-q-sm { font-size: clamp(1.6rem, 5vw, 2.2rem); }
.g-sky { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3-5); min-height: 180px; padding: var(--space-2-5); }
.g-balloon { width: 64px; height: 84px; border: 0; background: none; cursor: pointer; position: relative; animation: bob 2.6s ease-in-out infinite; animation-delay: var(--d); touch-action: manipulation; }
.g-balloon span { position: absolute; inset: 0 4px 14px; border-radius: 50% 50% 48% 48%; background: var(--c); border: 2px solid var(--edge); }
.g-balloon::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 16px; background: var(--edge); }
.g-balloon.popped { animation: popOut var(--duration-medium) forwards; }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes popOut { to { transform: scale(1.5); opacity: 0; } }
.g-more { min-width: 140px; min-height: 140px; display: grid; place-items: center; padding: var(--space-2-5); }
.g-more svg { max-width: 120px; }
.g-big { font: 700 3.4rem/1 var(--display); }

/* Fun layer */
.fx-confetti { position: fixed; inset: 0; pointer-events: none; z-index: var(--vm-z-confetti); }
.fx-toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; gap: var(--space-2); z-index: var(--vm-z-toasts); width: min(92vw, 420px); pointer-events: none; } /* toasts only tell; a tap goes through to the game under them */
.fx-toasts.at-top { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 8px); } /* toastSide() moves them up when the bottom holds the primary action (a number pad, a primary button) */
.fx-toast { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 2px solid var(--edge); background: var(--card); color: var(--ink); box-shadow: var(--shadow-ledge); font-size: var(--text-small-size); animation: toastIn .35s var(--ease-spring); }
.fx-toast.win { background: color-mix(in srgb, var(--sun) 30%, var(--card)); } .fx-toast.ok { background: color-mix(in srgb, var(--teal) 18%, var(--card)); }
.fx-toast.out { opacity: 0; transform: translateY(10px); transition: var(--duration-slow); }

/* The wait indicator (openspec change muse-review-polish, feedback-wait spec; js/hold.js): a thin bar right under a
   held keypad that fills until input returns, with Next in untimed rounds. It holds still, with the time left as text
   instead of the bar, under reduced motion, Pause motion or Calm (.still, which js/hold.js sets from the same rule). */
.fx-hold { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 24px; margin-top: var(--space-2); }
.fx-hold-bar { flex: 1; height: 4px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.fx-hold-bar i { display: block; height: 100%; width: 0; background: var(--teal); border-radius: inherit; }
.fx-hold-left { font: 500 13px/1 var(--font-mono); color: var(--ink-muted); white-space: nowrap; }
.fx-hold:not(.still) .fx-hold-left, .fx-hold.still .fx-hold-bar { display: none; }
.fx-hold.still .fx-hold-left { flex: 1; }
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .g-balloon, .ar-count, .ar-pop.show, .fx-toast, .mode-card, .play-tile { animation: none; transition: none; }
  .sutra-face, .sutra-back { transition: none; }
}
/* The same with Pause motion (html.motion-paused) and Calm (body.calm) */
html.motion-paused .g-balloon, body.calm .g-balloon, html.motion-paused .ar-count, body.calm .ar-count, html.motion-paused .ar-pop.show, body.calm .ar-pop.show, html.motion-paused .fx-toast, body.calm .fx-toast, html.motion-paused .mode-card, body.calm .mode-card, html.motion-paused .play-tile, body.calm .play-tile { animation: none; transition: none; }
html.motion-paused .sutra-face, body.calm .sutra-face, html.motion-paused .sutra-back, body.calm .sutra-back { transition: none; }

.mode-explorer .mq-split .mq-practice { order: -1; }

/* Belt colors are real-world colors, fixed in both schemes (like Bolt's colors), so a white belt is always white */
:root { --belt-white: #F9FAFB; --belt-black: #16171D; }
.pr-lives { display: inline-flex; gap: var(--space-1); }
.pr-lives i { width: 14px; height: 14px; border-radius: var(--radius-round); border: 2px solid var(--edge); }
.pr-lives i.on { background: var(--coral); }
.mq-gradebar { flex-wrap: wrap; }

/* Calm atmosphere: the background sky and music */
/* The background sky (js/sky-bg.js; the same rules are in theme/site.css for the landing page): a fixed canvas behind
   the page. Its wash is a soft dawn glow on the horizon in Daybreak and a night glow in Deep Space, from tokens. */
.vm-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  background: radial-gradient(140% 55% at 50% 108%, color-mix(in srgb, var(--sun) 24%, transparent), transparent 70%),
    radial-gradient(90% 36% at 50% 104%, color-mix(in srgb, var(--coral) 12%, transparent), transparent 75%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vm-bg { background: radial-gradient(140% 50% at 50% 110%, color-mix(in srgb, var(--plum) 16%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--sky) 5%, transparent), transparent 45%); }
}
:root[data-theme="dark"] .vm-bg { background: radial-gradient(140% 50% at 50% 110%, color-mix(in srgb, var(--plum) 16%, transparent), transparent 72%),
  linear-gradient(180deg, color-mix(in srgb, var(--sky) 5%, transparent), transparent 45%); }
@media (max-width: 600px) { .vm-bg { opacity: .45; } } /* on a phone the text boxes cover most of the screen: the drawing stays further back */
#view, .mq-foot { position: relative; z-index: var(--z-base); }
/* Reserve the screen before the view renders, so the footer does not jump on first load */
#view { min-height: 100svh; }
.mq-reset { font-size: 13px; color: var(--ink-muted); margin-left: var(--space-1-5); font-weight: 600; }
#mqMusic { position: relative; }
/* Music: a pill like the home page's music control; filled with ink while music plays */
.vm-mbtn { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-3) 0 var(--space-2-5); border: 2px solid var(--edge); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: 700 .85rem/1 var(--font-sans); white-space: nowrap; cursor: pointer; }
.vm-mbtn:hover { background: color-mix(in srgb, var(--sun) 35%, var(--card)); }
.vm-mbtn svg { width: 18px; height: 18px; flex: none; }
.vm-mbtn.on { background: var(--ink); color: var(--bg); }
.vm-eq { display: inline-flex; align-items: flex-end; gap: var(--space-1); height: 14px; }
.vm-eq i { width: 3px; height: 4px; border-radius: var(--radius-2xs); background: var(--plum); display: block; }
.vm-mbtn.on .vm-eq i { background: var(--sun); animation: eq .9s ease-in-out infinite alternate; }
.vm-mbtn.on .vm-eq i:nth-child(2) { animation-delay: -.3s; } .vm-mbtn.on .vm-eq i:nth-child(3) { animation-delay: -.6s; }
@media (max-width: 600px) { .vm-mbtn .lbl, .vm-mbtn .vm-eq { display: none; } .vm-mbtn { width: 36px; height: 36px; padding: 0; justify-content: center; } .vm-mbtn.on .vm-eq { display: none; } }
@keyframes eq { to { height: 12px; } }
.vm-mpanel { position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, 92vw); max-height: calc(100vh - 96px); overflow: auto; box-sizing: border-box; z-index: var(--z-popover); padding: var(--space-4); }
.vm-mpanel:hover { transform: none; }
.vm-mt { display: block; font: 600 1.15rem/1.2 var(--display); }
.vm-tracks { display: grid; gap: var(--space-2); margin: var(--space-2-5) 0; }
.vm-track { display: grid; text-align: left; gap: var(--space-1); padding: var(--space-2-5) var(--space-3); border: 2px solid var(--edge); border-radius: var(--radius-md); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.vm-track small { color: var(--ink-muted); font-size: var(--text-kicker-size); }
.vm-track[aria-pressed="true"] { background: var(--ink); color: var(--bg); } .vm-track[aria-pressed="true"] small { color: var(--bg); opacity: .8; }
.vm-mrow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.vm-vol { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-label-size); font-weight: 600; } .vm-vol input { accent-color: var(--plum-strong); }
.vm-bgt { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2-5); font-size: var(--text-label-size); font-weight: 600; }
.vm-mpanel .vm-motion, .vm-mpanel .vm-calm { margin-top: var(--space-2); }
/* The Calm and sound control (openspec change play-nav-by-mode): Calm and Pause motion first, then the music */
.vm-mt--sub { display: block; margin-top: var(--space-3); font-size: 1rem; }
.vm-swnote { margin: var(--space-1) 0 0; }
.vm-mbtn.calm { border-color: var(--teal-strong); }
.play-sound { position: relative; display: flex; flex: none; }
.vm-mbtn--sm { height: 32px; padding: 0 var(--space-2-5) 0 var(--space-2); gap: var(--space-1-5); font-size: 13px; }
.play-sound .vm-mpanel { position: absolute; right: 0; left: auto; top: calc(100% + 6px); width: min(320px, 90vw); max-height: 70vh; overflow: auto; }
@media (max-width: 600px) { .vm-mbtn--sm { width: 32px; height: 32px; } .play-sound .vm-mpanel { position: fixed; left: 8px; right: 8px; top: 56px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .vm-eq i { animation: none; } }
/* The same with Pause motion (html.motion-paused) and Calm (body.calm) */
html.motion-paused .vm-eq i, body.calm .vm-eq i { animation: none; }
@media (max-width: 700px) { .vm-mpanel { position: fixed; left: 12px; right: 12px; top: 128px; width: auto; max-height: calc(100vh - 140px); } } /* scrolls on a short screen (#174 review) */
.vm-about { margin-top: var(--space-2-5); font-size: var(--text-label-sm-size); } .vm-about summary { cursor: pointer; font-weight: 700; }
.vm-about ul { margin: var(--space-2) 0 0; padding-left: 1.1em; display: grid; gap: var(--space-1-5); max-height: 240px; overflow: auto; } .vm-about li { color: var(--ink-muted); line-height: 1.4; } .vm-about b { color: var(--ink); }
.roots ul { margin: var(--space-2) 0 0; padding-left: 1.2em; display: grid; gap: var(--space-1-5); } .roots li { font-size: var(--text-small-size); line-height: 1.5; }

/* In-page video player */
.vm-player { width: min(920px, 94vw); max-height: 94dvh; padding: 0; border: 2px solid var(--edge); border-radius: var(--radius-xl); background: var(--card); color: var(--ink); box-shadow: var(--shadow-modal); overflow: auto; }
.vm-player.tall { width: min(420px, 94vw); }
.vm-player::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }
.vm-player[open] { animation: toastIn .3s var(--ease-spring); }
.vp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3-5) var(--space-4) var(--space-2-5); }
.vp-head h2 { font: 600 1.15rem/1.25 var(--display); margin: 0; }
.vp-frame { position: relative; aspect-ratio: 16 / 9; background: var(--media-black); }
.vm-player.tall .vp-frame { aspect-ratio: 9 / 16; max-height: 74dvh; margin: 0 auto; }
.vp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The facade (js/watch.js facade): this site's thumbnail behind a play button; the frame is written only when it is pressed */
.vp-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--media-black); color: var(--media-ink); cursor: pointer; }
.vp-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-play:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.vp-play:hover .watch-play svg { transform: scale(1.08); }
.vp-desc { margin: var(--space-3) var(--space-4) var(--space-1); color: var(--ink-muted); font-size: 14.5px; }
.vm-player .listen-row { margin: 0 var(--space-4) var(--space-1); } /* the video's Listen button (openspec explanation-audio 4.3) */
.vp-foot { margin: 0 var(--space-4) var(--space-3-5); font-size: var(--text-label-size); } .vp-foot a { color: var(--sky-strong); font-weight: 700; }
.watch-play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--media-ink); }
.watch-play svg { width: 58px; height: 58px; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--media-black) 45%, transparent)); background: var(--scrim); border-radius: var(--radius-round); padding: var(--space-1-5); }
.watch-ext { position: absolute; right: 8px; bottom: 8px; background: var(--card); color: var(--ink-muted); font: 700 11px/1 var(--font-sans); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); border: 1px solid var(--line); }
.watch-card.plays:hover .watch-play svg { transform: scale(1.08); }
.rel-ext { margin-left: auto; color: var(--ink-muted); font-size: 12px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .vm-player[open] { animation: none; } }
/* The same with Pause motion (html.motion-paused) and Calm (body.calm) */
html.motion-paused .vm-player[open], body.calm .vm-player[open] { animation: none; }


/* Sutra deep-dive modal */
.sutra-modal { width: min(1100px, 96vw); max-width: 96vw; max-height: 92dvh; padding: 0; border: 2px solid var(--edge); border-radius: var(--radius-xl); background: var(--bg); color: var(--ink); box-shadow: var(--shadow-modal); overflow: auto; transform-origin: top left; scroll-padding: 64px 0 76px; } /* anything scrolled or focused into view lands clear of the pinned Close bar and footer (WCAG 2.4.11) */
/* No glass inside the deep dive. In Deep Space the design system gives every .md-card and .md-btn a backdrop blur
   (--glass); here they sit on the dialog's opaque background, so the blur shows nothing, yet a dozen blurred layers in
   this scroller starve WebKitGTK of frames (requestAnimationFrame and IntersectionObserver stop, so on Linux WebKit
   clicks never settle and the pinned bar never reports in view) */
.sutra-modal { --glass: none; }
.sutra-modal::backdrop { background: var(--scrim); backdrop-filter: blur(5px); }
/* The dialog scrolls; the close button (top) and the prev / next footer (bottom) stay pinned over the content */
.sd-inner { --sd-pad: 26px; padding: var(--space-5) var(--sd-pad) 0; }
@media (max-width: 600px) { .sd-inner { --sd-pad: 16px; padding-top: var(--space-4); } }
.sd-bar { position: sticky; top: 10px; z-index: 3; height: 0; display: flex; justify-content: flex-end; align-items: flex-start; gap: var(--space-2); }
.sd-bar .amb-btn { box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--ink) 45%, transparent); }
.sd-bar .sd-x { box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--ink) 45%, transparent); }
.sd-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; padding-right: 104px; } /* room for the pinned Ambience and Close buttons */
.sd-head h2 { font: 600 clamp(1.5rem, 3.4vw, 2.2rem)/1.15 var(--display); color: var(--plum-strong); margin: var(--space-2-5) 0 var(--space-1); }
.sd-mean { font-style: italic; color: var(--ink-muted); margin: 0; font-size: 1.05rem; }
.sd-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-4-5); }
@media (max-width: 860px) { .sd-body { grid-template-columns: 1fr; } }
.sd-fig { position: sticky; top: 0; align-self: start; padding: var(--space-3-5); border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
@media (max-width: 860px) { .sd-fig { position: static; } }
.sd-text h3 { font: 600 1.1rem/1.2 var(--display); margin: var(--space-4-5) 0 var(--space-1-5); }
.sd-text h3:first-child { margin-top: 0; }
.sd-text p { margin: var(--space-1-5) 0; line-height: 1.6; }
/* Worked examples: each one a disclosure (the first open), so a Player can try it before seeing the steps */
.sd-ex-tip { margin: 0 0 var(--space-2); color: var(--ink-muted); }
.sd-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sd-ex li { border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--line); }
.sd-ex summary { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-2-5); align-items: center; padding: var(--space-2-5) var(--space-3); min-height: 44px; box-sizing: border-box; cursor: pointer; list-style: none; border-radius: var(--radius-md); }
.sd-ex summary::-webkit-details-marker { display: none; }
.sd-ex summary::after { content: '+'; grid-column: 2; grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-round); border: 1px solid var(--edge); font-weight: 800; color: var(--ink-muted); }
.sd-ex details[open] > summary::after { content: '\2212'; }
.sd-ex summary:hover { background: var(--bg-alt); }
.sd-ex summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sd-exn { grid-column: 1; font-size: var(--text-kicker-size); font-weight: var(--text-kicker-weight); letter-spacing: var(--text-kicker-tracking); text-transform: uppercase; color: var(--ink-muted); }
.sd-ex summary b { grid-column: 1; overflow-wrap: anywhere; }
.sd-ex details > p { margin: 0; padding: 0 var(--space-3) var(--space-3); line-height: 1.6; overflow-wrap: anywhere; }
.sd-uses { display: flex; flex-wrap: wrap; gap: var(--space-1-5); } .sd-uses span { padding: var(--space-1) var(--space-2-5); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--teal) 16%, var(--card)); font-size: var(--text-label-sm-size); font-weight: 700; }
.sd-try { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sd-try li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.sd-try small, .sd-prog { color: var(--ink-muted); }
/* Sutra progress on a card's face (openspec change sutras-first) */
.sutra-prog { display: flex; flex-direction: column; gap: var(--space-1); margin-top: auto; }
.sutra-prog small { font-size: 13px; color: var(--ink-muted); }
.sutra-prog-bar { height: 6px; }
.sutra-kid { font-size: var(--text-label-size); color: var(--ink); }
.sd-foot { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: space-between; gap: var(--space-2-5); margin: var(--space-5) calc(-1 * var(--sd-pad)) 0; padding: var(--space-3) var(--sd-pad) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); }
.sd-foot a { text-decoration: none; min-width: 0; max-width: calc(50% - 5px); }
.sd-foot a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sd-foot .sd-next { margin-left: auto; }
/* On a phone the whole sutra name shows, on two lines if it must, instead of an ellipsis (openspec change
   muse-review-polish, design D6) */
@media (max-width: 400px) {
  .sd-foot a { white-space: normal; text-align: center; }
  .sd-foot a > span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}

/* Animated scenes */
.sc-stage { min-height: 220px; display: grid; place-items: center; }
.sc-svg { width: 100%; height: auto; overflow: visible; }
.sc-say { min-height: 3em; margin: var(--space-2-5) 0 var(--space-2); font-weight: 600; line-height: 1.45; }
.sc-ctrl { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sc-pos { font: 500 13px/1 var(--font-mono); color: var(--ink-muted); }
.sc-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.sc-c1 { stroke: var(--coral-strong); } .sc-c2 { stroke: var(--teal-strong); } .sc-c3 { stroke: var(--sky-strong); }
.sc-faintline { stroke: var(--line); }
.sc-arrow { stroke: var(--plum-strong); stroke-dasharray: 6 6; }
.sc-soft { fill-opacity: .55; }
.sc-none { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 5; }
.sc-dash { fill: none; stroke: var(--coral-strong); stroke-width: 2.4; stroke-dasharray: 6 5; }
.sc-faint { fill-opacity: .18; }
.sc-digit { fill: var(--card); stroke: var(--edge); stroke-width: 2; }
.sc-digit.sc-last { fill: color-mix(in srgb, var(--teal) 25%, var(--card)); }
.sc-digit.sc-new { fill: color-mix(in srgb, var(--sun) 40%, var(--card)); }
.sc-dt { fill: var(--ink); font: 700 var(--text-title-size) var(--display); }
.sc-dt2 { fill: var(--coral-strong); font: 700 22px var(--display); }
.sc-big { fill: var(--ink); font: 700 30px var(--display); }
.sc-svg .enter { animation: scIn .6s ease-out both; }
.sc-svg .enter .sc-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: scDraw .9s ease-out forwards; }
.sc-svg .enter .sc-arrow { stroke-dasharray: 1; }
@keyframes scIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes scDraw { to { stroke-dashoffset: 0; } }
.sc-eq { display: grid; gap: var(--space-2-5); width: 100%; padding: var(--space-1-5) var(--space-1); }
.sc-eqline { font: 600 var(--text-card-title-size)/1.6 var(--display); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--ink) 4%, var(--card)); overflow-wrap: anywhere; }
.sc-eqline.enter { animation: scIn .5s ease-out both; background: color-mix(in srgb, var(--sun) 18%, var(--card)); }
@media (prefers-reduced-motion: reduce) { .sc-svg .enter, .sc-svg .enter .sc-line, .sc-eqline.enter { animation: none; stroke-dashoffset: 0; } .sutra-card { transition: none; } }
/* The same with Pause motion (html.motion-paused) and Calm (body.calm) */
html.motion-paused .sc-svg .enter, body.calm .sc-svg .enter, html.motion-paused .sc-svg .enter .sc-line, body.calm .sc-svg .enter .sc-line, html.motion-paused .sc-eqline.enter, body.calm .sc-eqline.enter { animation: none; stroke-dashoffset: 0; }
html.motion-paused .sutra-card, body.calm .sutra-card { transition: none; }

/* ---------- Read-aloud voice settings, download pill and slow-device note (voice.js) ---------- */
.vv-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.vv-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-weight: 600; }
.vv-check { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.vv-check input { width: 18px; height: 18px; accent-color: var(--teal-strong); }
.vv-select { font: 600 var(--text-label-size)/1.2 var(--font-sans); color: var(--ink); background: var(--card); border: 2px solid var(--edge); border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-2-5); max-width: 100%; min-width: 0; }
.vv-select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vv-status:empty { display: none; }
.vv-poor { padding: var(--space-3) var(--space-4); border: 2px solid var(--edge); border-radius: var(--radius-md); background: var(--bg-alt); color: var(--ink); }
.vv-poor[hidden] { display: none; }
.vv-poor p { margin: 0 0 var(--space-2); }
.vv-poor ul { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.vv-poor li { margin-bottom: var(--space-1); overflow-wrap: anywhere; }
.vv-pill { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: calc(var(--vm-z-toasts) + 1); display: grid; gap: var(--space-1-5); padding: var(--space-2) var(--space-3-5); border: 2px solid var(--edge); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); box-shadow: var(--shadow-ledge); font-size: 13px; font-weight: 700; }
.vv-bar { display: block; width: 140px; height: 6px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.vv-bar i { display: block; height: 100%; background: var(--teal); transition: width var(--duration-medium); }
.vv-note { position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: calc(var(--vm-z-toasts) + 2); width: min(92vw, 440px); padding: var(--space-3) var(--space-4); border: 2px solid var(--edge); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); box-shadow: var(--shadow-ledge); }
.vv-note p { margin: 0 0 var(--space-2); font-size: var(--text-small-size); }
.vv-note div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .vv-bar i { transition: none; } }
/* The same with Pause motion (html.motion-paused) and Calm (body.calm) */
html.motion-paused .vv-bar i, body.calm .vv-bar i { transition: none; }

/* ===== Levels: katas, challenge tower, game levels ===== */
.lv-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--space-2-5); margin: var(--space-3-5) 0 var(--space-1-5); }
.lv-node { position: relative; display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2-5) var(--space-1) var(--space-2); border: 2px solid var(--edge); border-radius: var(--radius-md); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-ledge); transition: transform var(--duration-fast); }
.lv-node b { font: 700 1.15rem/1 var(--display); }
.lv-node:hover { transform: translateY(-2px); }
.lv-node.done { background: color-mix(in srgb, var(--sun) 22%, var(--card)); }
.lv-node.next { outline: 3px solid var(--coral-strong); outline-offset: 2px; animation: lvPulse 1.8s ease-in-out infinite; }
@keyframes lvPulse { 50% { transform: translateY(-3px); } }
.lv-node.locked { border-style: dashed; border-color: var(--line); box-shadow: none; color: var(--ink-muted); background: transparent; }
.lv-node.locked svg { width: 16px; height: 16px; opacity: .6; }
/* Medals: bronze, silver, gold discs, always with their name (a letter on map nodes) */
.medal { display: inline-grid; place-items: center; min-width: 64px; height: 26px; padding: 0 var(--space-2-5); border-radius: var(--radius-pill); border: 2px solid var(--edge); font: 700 12px/1 var(--font-sans); color: var(--ink); vertical-align: middle; }
.medal--none { border-style: dashed; border-color: var(--line); background: transparent; }
.medal--bronze { background: color-mix(in srgb, var(--coral) 32%, var(--card)); }
.medal--silver { background: color-mix(in srgb, var(--ink-muted) 24%, var(--card)); }
.medal--gold { background: var(--sun); color: var(--on-accent); }
.medal--sm { min-width: 0; width: 20px; height: 20px; padding: 0; font-size: 11px; }
.medal--sm.medal--none { border-width: 1px; }
.kata-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-round); border: 1px dashed var(--line); font: 700 12px/1 var(--font-sans); }
.kata-mark.on { border: 2px solid var(--edge); background: var(--teal); color: var(--on-accent); }
.lv-result { text-align: center; padding: var(--space-2) 0; }
.lv-big .medal { min-width: 140px; height: 56px; font-size: var(--text-card-title-size); border-width: 3px; }
.lv-big .kata-mark { width: 64px; height: 64px; font-size: 32px; }
.lv-big .medal:not(.medal--none), .lv-big .kata-mark.on { animation: medalPop .5s var(--ease-spring) both; }
@keyframes medalPop { from { transform: scale(0); } }
.lv-acts { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-top: var(--space-3-5); }
.lv-acts a { text-decoration: none; }
.lv-best { color: var(--ink-muted); }
.medal-n { font: 700 13px/1 var(--font-sans); color: var(--sun-strong); white-space: nowrap; }
.kata-of { font: 600 1rem/1 var(--font-sans); color: var(--ink-muted); }
.kata-prog { display: flex; gap: var(--space-1); } .kata-prog i { width: 22px; height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 12%, transparent); } .kata-prog i.past { background: var(--teal); } .kata-prog i.cur { background: var(--sun-strong); }
.dojo-cell { display: grid; gap: var(--space-1-5); }
.dojo-katas { display: flex; align-items: center; gap: var(--space-1-5); justify-content: center; padding: var(--space-1-5) var(--space-2-5); border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--text-label-sm-size); background: var(--card); }
.dojo-katas:hover { border-color: var(--edge); }
.dojo-katas svg { width: 18px; height: 18px; color: var(--plum-strong); }
.tower-promo { display: flex; align-items: center; gap: var(--space-3-5); padding: var(--space-3-5) var(--space-4-5); margin-bottom: var(--space-4); border: 2px solid var(--edge); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--coral) 16%, var(--card)); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-ledge); }
.tower-promo span { flex: 1; display: grid; } .tower-promo small { color: var(--ink-muted); }
.tower { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--space-2-5); margin-top: var(--space-3-5); }
.tower-ch { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-card); }
.tower-ch:hover { border-color: var(--edge); }
.tower-ch.done { border: 2px solid var(--teal-strong); }
.tower-n { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--coral); color: var(--on-accent); font: 700 1.1rem/1 var(--display); flex: none; }
.tower-t { flex: 1; display: grid; gap: var(--space-1); } .tower-t small { color: var(--ink-muted); font-size: var(--text-kicker-size); }
.fmt-legend { display: flex; flex-wrap: wrap; gap: var(--space-1-5) var(--space-3-5); font-size: var(--text-label-sm-size); color: var(--ink-muted); margin: var(--space-1-5) 0 var(--space-1); } .fmt-legend b { color: var(--ink); }
.ar-fix { text-align: center; color: var(--ink-muted); min-height: 1.4em; font-size: var(--text-label-size); }
.ar-pad--wide { grid-template-columns: repeat(4, 1fr); max-width: 380px; }

/* New games */
.g-pairs { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: var(--space-2-5); max-width: 640px; margin: 0 auto; }
.g-card { min-height: 84px; border: 2px solid var(--edge); border-radius: var(--radius-md); background: var(--plum); color: var(--ink); cursor: pointer; padding: var(--space-1-5); perspective: 600px; box-shadow: var(--shadow-ledge); font: inherit; }
.g-card-in { display: block; opacity: 0; font: 600 1rem/1.25 var(--display); transition: opacity var(--duration-medium); }
.g-card.up, .g-card.got { background: var(--card); } .g-card.up .g-card-in, .g-card.got .g-card-in { opacity: 1; }
.g-card.got { border-color: var(--teal-strong); background: color-mix(in srgb, var(--teal) 18%, var(--card)); }
.g-dotsm { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); max-width: 65px; vertical-align: middle; } /* rows of five */
.g-dotsm i { width: 9px; height: 9px; border-radius: var(--radius-round); background: var(--coral-strong); }
.g-rain { position: relative; height: 380px; border: 2px solid var(--edge); border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--sky) 10%, var(--card)); }
.g-drop { position: absolute; top: 0; min-width: 52px; height: 52px; border-radius: var(--radius-round); border: 2px solid var(--edge); background: var(--card); color: var(--ink); font: 700 1.2rem/1 var(--display); cursor: pointer; touch-action: manipulation; }
.g-drop.hit { background: var(--teal); } .g-drop.miss { background: var(--coral); }
.g-balance { display: grid; place-items: center; margin: var(--space-2-5) 0 var(--space-3-5); }
@media (prefers-reduced-motion: reduce) { .lv-node.next, .lv-big .medal, .lv-big .kata-mark { animation: none; } }
/* The same with Pause motion (html.motion-paused) and Calm (body.calm) */
html.motion-paused .lv-node.next, body.calm .lv-node.next, html.motion-paused .lv-big .medal, body.calm .lv-big .medal, html.motion-paused .lv-big .kata-mark, body.calm .lv-big .kata-mark { animation: none; }

/* ===== Adaptive games: difficulty dial, HUD, target zone ===== */
.dial { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-label-sm-size); }
.dial-bar { width: 90px; height: 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; border: 1px solid var(--line); }
.dial-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--sun), var(--coral)); transition: width var(--duration-slow); }
.g-hud { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.g-pts { font-size: var(--text-label-sm-size); color: var(--ink-muted); } .g-pts b { font: 700 1.2rem/1 var(--display); color: var(--ink); }
.g-gain { font: 500 13px/1 var(--font-mono); color: var(--teal-strong); animation: scIn .5s ease-out both; }
.g-trend { font-size: 12px; } .g-trend.up { color: var(--coral-strong); } .g-trend.down { color: var(--teal-strong); }
.g-head { flex-wrap: wrap; }
.g-big-auto { font-size: clamp(1.4rem, 5vw, 2.4rem); }
.g-line-zone { position: absolute; top: -8px; height: 20px; background: color-mix(in srgb, var(--teal) 35%, transparent); border-radius: var(--radius-2xs); }
.g-result .mq-small { margin-top: var(--space-2); }

/* Age question sheet and the World boards card on the Me page (posting consent) */
.vm-sheet { width: min(520px, 94vw); max-height: 94dvh; padding: var(--space-4) var(--space-5); border: 2px solid var(--edge); border-radius: var(--radius-xl); background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); overflow: auto; }
.vm-sheet::backdrop { background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(4px); }
.vm-sheet[open] { animation: toastIn .3s var(--ease-spring); }
.vs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.vs-head h2 { font: 600 1.3rem/1.25 var(--display); margin: 0; }
.vp-x svg { width: 22px; height: 22px; }
.vs-sub { color: var(--ink-muted); margin: var(--space-2) 0 var(--space-3-5); line-height: 1.5; }
.vs-ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--space-2); }
.vs-ages .md-chip { min-height: 44px; }
.vs-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; margin: var(--space-4) 0 0; }
.vs-foot a { text-decoration: none; }
.wb-card { display: grid; gap: var(--space-2-5); }
.wb-card p { margin: 0; line-height: 1.5; }
.wb-check { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
.wb-check label { line-height: 1.5; }
.wb-words { font-style: italic; }
.wb-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.wb-row input { font: 600 16px/1.2 var(--font-sans); padding: var(--space-2) var(--space-3); border: 2px solid var(--edge); border-radius: var(--radius-md); background: var(--card); color: var(--ink); width: 10ch; }
.wb-err { color: var(--coral-strong); font-weight: 700; min-height: 1.2em; }
.wb-card .md-switch { justify-self: start; }
.pn-now { margin-top: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .vm-sheet[open] { animation: none; } .wb-card .md-switch .md-knob, .wb-card .md-switch .md-track { transition: none; } }
/* The same with Pause motion (html.motion-paused) and Calm (body.calm) */
html.motion-paused .vm-sheet[open], body.calm .vm-sheet[open] { animation: none; }
html.motion-paused .wb-card .md-switch .md-knob, body.calm .wb-card .md-switch .md-knob, html.motion-paused .wb-card .md-switch .md-track, body.calm .wb-card .md-switch .md-track { transition: none; }

/* ---------- Bolt: one SVG, six poses (js/bolt.js). Token colors only; the outline stays dark in both schemes ---------- */
.bolt { overflow: visible; }
.bolt .b-ln { stroke: var(--bolt-line); fill: none; stroke-linecap: round; }
.bolt .b-ball { fill: var(--bolt-accent); stroke: var(--bolt-line); stroke-width: 4; transition: fill var(--duration-medium); }
.bolt .b-armr { fill: var(--bolt-body); stroke: var(--bolt-line); stroke-width: 4; }
.bolt .b-body { fill: var(--bolt-body); stroke: var(--bolt-line); stroke-width: 5; }
.bolt .b-screen { fill: var(--bolt-screen); stroke: var(--bolt-line); stroke-width: 4; }
.bolt .b-white { fill: var(--bolt-eye); stroke: var(--bolt-line); stroke-width: 3; }
.bolt .b-pupil { fill: var(--bolt-line); }
.bolt .b-cheek { fill: var(--bolt-accent); opacity: .5; }
.bolt .b-belly { fill: var(--bolt-belly); stroke: var(--bolt-line); stroke-width: 4; }
.bolt .b-btn { fill: var(--bolt-eye); stroke: var(--bolt-line); stroke-width: 3; }
.bolt .b-grin { fill: var(--bolt-accent); stroke: var(--bolt-line); stroke-width: 3.5; stroke-linejoin: round; }
.bolt .b-tip { fill: var(--bolt-belly); stroke: var(--bolt-line); stroke-width: 3; }
.bolt .b-arm { transition: transform var(--duration-slow) var(--ease-spring); }
.bolt .b-arm-l { transform-origin: 23px 72px; }
.bolt .b-arm-r { transform-origin: 137px 72px; }
.bolt .b-pupils { transition: transform var(--duration-medium); }
.bolt .b-eye { transition: opacity var(--duration-fast), transform var(--duration-medium); transform-box: fill-box; transform-origin: center; }
.bolt .m, .bolt .b-happy, .bolt .b-wink, .bolt .b-stick, .bolt .b-spark { opacity: 0; transition: opacity var(--duration-medium); }
.bolt[data-pose="idle"] .m-smile, .bolt[data-pose="think"] .m-hmm, .bolt[data-pose="surprised"] .m-o,
.bolt[data-pose="explain"] .m-talk, .bolt[data-pose="cheer"] .m-grin, .bolt[data-pose="wink"] .m-grin { opacity: 1; }
.bolt[data-pose="think"] .b-pupils { transform: translate(4px, -5px); }
.bolt[data-pose="think"] .b-arm-r { transform: rotate(-165deg); }
.bolt[data-pose="surprised"] .b-eye { transform: scale(1.18); }
.bolt[data-pose="surprised"] .b-arm-l { transform: rotate(48deg); }
.bolt[data-pose="surprised"] .b-arm-r { transform: rotate(-48deg); }
.bolt[data-pose="surprised"] .b-ball { fill: var(--bolt-belly); }
.bolt[data-pose="explain"] .b-arm-r { transform: rotate(-112deg); }
.bolt[data-pose="explain"] .b-stick { opacity: 1; }
.bolt[data-pose="explain"] .b-pupils { transform: translate(5px, 0); }
.bolt[data-pose="cheer"] .b-arm-l { transform: rotate(150deg); }
.bolt[data-pose="cheer"] .b-arm-r { transform: rotate(-150deg); }
.bolt[data-pose="cheer"] .b-eye { opacity: 0; }
.bolt[data-pose="cheer"] .b-happy, .bolt[data-pose="cheer"] .b-spark, .bolt[data-pose="wink"] .b-spark { opacity: 1; }
.bolt[data-pose="cheer"] .b-ball { fill: var(--bolt-belly); }
.bolt[data-pose="wink"] .b-eye-l { opacity: 0; }
.bolt[data-pose="wink"] .b-wink { opacity: 1; }
.bolt[data-pose="wink"] .b-arm-r { transform: rotate(-135deg); }
.bolt[data-pose="wink"] .b-arm-l { transform: rotate(20deg); }
/* ---------- end Bolt ---------- */

/* ---------- Star round (js/star.js) ---------- */
.star-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.star-h { margin: var(--space-1-5) 0 0; font-size: clamp(1.5rem, 4.5vw, 2.2rem); }
.star-hud { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2-5) var(--space-4); margin: var(--space-3) 0; }
.star-dots { display: inline-flex; gap: var(--space-1-5); }
.star-dots i { width: 16px; height: 16px; border-radius: var(--radius-round); border: 2px solid var(--edge); background: var(--card); transition: background var(--duration-medium), transform var(--duration-medium); }
.star-dots i.cur { background: var(--sun); transform: scale(1.2); }
.star-dots i.ok { background: var(--teal); }
.star-dots i.cb { background: var(--plum); box-shadow: 0 0 0 3px color-mix(in srgb, var(--plum) 40%, transparent); }
.star-dots i.miss { background: color-mix(in srgb, var(--coral) 45%, var(--card)); }
.star-meter { flex: 1 1 200px; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.star-spark { width: 22px; height: 22px; fill: var(--sun); stroke: var(--edge); stroke-width: 1.5; flex: none; }
.star-bar { flex: 1; height: 16px; border-radius: var(--radius-pill); border: 2px solid var(--edge); background: var(--card); overflow: hidden; min-width: 60px; }
.star-bar i { display: block; height: 100%; width: var(--star-fill, 0); border-radius: inherit; background: linear-gradient(90deg, var(--sun), var(--coral)); transition: width .6s var(--ease-spring); }
.star-meter.full .star-bar { box-shadow: var(--shadow-glow); }
.star-meter-n { font: 700 1rem/1 var(--display); white-space: nowrap; }
.star-arena { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 760px) { .star-arena { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } }
/* The stage is not a link, so it does not lift on hover: a lift moved it off a pointer resting on its edge and back under it, every frame */
.star-stage.md-card:hover { transform: none; }
.star-stage { position: relative; display: grid; gap: var(--space-3); min-height: 360px; padding: var(--space-5); overflow: hidden; }
@media (max-width: 760px) { .star-stage { min-height: 0; padding: var(--space-4); } }
.star-talk { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; }
.star-bolt { flex: none; width: clamp(54px, 10vw, 84px); }
.star-bolt .bolt { width: 100%; height: auto; display: block; }
.star-say { margin: 0; position: relative; background: var(--bg-alt); border: 2px solid var(--edge); border-radius: var(--radius-bubble); padding: var(--space-2) var(--space-3-5); font: 700 clamp(15px, 2.2vw, 17px)/1.35 var(--font-sans); }
.star-say:empty { visibility: hidden; }
.star-main { display: grid; justify-items: center; text-align: center; }
.star-ask, .star-replay, .star-end, .star-offer { display: grid; justify-items: center; gap: var(--space-3); width: 100%; }
.star-tag { display: inline-flex; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-weight: var(--text-kicker-weight); font-size: var(--text-kicker-size); letter-spacing: var(--text-kicker-tracking); text-transform: uppercase; background: var(--bg-alt); color: var(--ink-muted); }
.star-tag--rematch { background: var(--plum); color: var(--on-accent); }
.star-tag--dare { background: var(--sun); color: var(--on-accent); }
.star-tag--trick { background: var(--teal); color: var(--on-accent); text-transform: none; letter-spacing: 0; }
.star-q { margin: 0; font: 700 clamp(3rem, 13vw, 5.6rem)/1.05 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.star-q:focus { outline: none; }
.star-q sup { font-size: .45em; vertical-align: .9em; color: var(--coral-strong); }
.star-q--long { font-size: clamp(1.3rem, 4.5vw, 1.9rem); line-height: 1.3; }
.star-q--sm { font-size: clamp(1.8rem, 7vw, 2.6rem); }
.star-story { display: inline-flex; margin-left: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-weight: 800; font-size: 13px; background: var(--teal); color: var(--on-accent); }
.star-q.star-q--story { font: 600 clamp(1.1rem, 3.6vw, 1.45rem)/1.5 var(--font-sans); letter-spacing: 0; text-align: start; max-width: 36em; margin-inline: auto; }
.star-boxes { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.star-boxes span { width: clamp(40px, 10vw, 56px); height: clamp(50px, 12vw, 66px); display: grid; place-items: center; border-radius: var(--radius-sm); border: 2px dashed var(--edge); font: 700 clamp(1.6rem, 6vw, 2.2rem)/1 var(--display); background: var(--card); }
.star-boxes span.f { border-style: solid; background: color-mix(in srgb, var(--sky) 16%, var(--card)); }
.star-boxes span.cut { margin-left: var(--space-3-5); position: relative; } /* the bar between a Trick's left and right part */
.star-boxes span.cut::before { content: ""; position: absolute; left: -15px; top: 4px; bottom: 4px; width: 3px; border-radius: var(--radius-pill); background: var(--edge); }
.star-boxes span.held { border-color: var(--sky-strong); background: color-mix(in srgb, var(--sky) 30%, var(--card)); }
.star-boxes.ok span { background: var(--teal); color: var(--on-accent); border-style: solid; }
.star-boxes.no span { background: color-mix(in srgb, var(--coral) 40%, var(--card)); border-style: solid; text-decoration: line-through; }
.star-plain { display: block; min-width: 6ch; min-height: 1.3em; padding: var(--space-1-5) var(--space-4); border-bottom: 3px solid var(--edge); font: 700 clamp(2rem, 8vw, 2.8rem)/1.2 var(--display); }
.star-fields { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.star-field { display: grid; gap: var(--space-1); min-width: 8ch; padding: var(--space-2) var(--space-3-5); border: 2px dashed var(--edge); border-radius: var(--radius-md); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.star-field[aria-pressed="true"] { border-style: solid; box-shadow: var(--shadow-ledge); background: color-mix(in srgb, var(--sky) 16%, var(--card)); }
.star-field small { font-weight: 700; color: var(--ink-muted); }
.star-field output { font: 700 1.8rem/1.1 var(--display); min-height: 1.1em; }
.star-choices { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.star-choice { min-width: 110px; min-height: 56px; font-size: 1.3rem; }
.star-choice.ok { background: var(--teal); color: var(--on-accent); }
.star-pop { margin: 0; min-height: 1.4em; font: 700 1.4rem/1 var(--display); color: var(--sun-strong); }
.star-pop:not(:empty) { animation: starPop .45s var(--ease-spring); }
@keyframes starPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.star-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); width: 100%; text-align: left; }
.star-step { padding: var(--space-2-5) var(--space-3-5); border-radius: var(--radius-md); border: 2px solid var(--edge); background: var(--card); animation: stepIn .35s var(--ease-spring); }
.star-step p { margin: var(--space-1) 0 0; font-size: var(--text-small-size); }
/* Steps shown all at once (Try a trick's worked example, openspec try-trick-in-modes): nothing moves */
.star-steps--still .star-step { animation: none; }
.star-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin: 0; }
.star-video { width: 100%; }
.star-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-md); }
.star-video .vp-frame { border-radius: var(--radius-md); overflow: hidden; }
.star-end-h { margin: 0; font: 600 clamp(1.7rem, 6vw, 2.3rem)/1.1 var(--display); }
.star-end-h:focus { outline: none; }
.star-end-sp { margin: 0; font-size: 1.3rem; }
.star-side { display: grid; gap: var(--space-3); }
.star-dare { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; padding: var(--space-3) var(--space-4); border: 2px solid var(--edge); border-radius: var(--radius-lg); cursor: pointer; color: var(--ink); font: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--plum) 30%, var(--card)), color-mix(in srgb, var(--sun) 26%, var(--card))); box-shadow: var(--shadow-ledge); animation: dareGlow 2.2s ease-in-out infinite; }
.star-dare[hidden] { display: none; }
.star-dare .star-spark { width: 34px; height: 34px; }
.star-dare-t { display: grid; gap: var(--space-1); flex: 1; }
.star-dare-t b { font: 700 1.6rem/1.1 var(--display); }
.star-dare-t small { font-weight: 700; color: var(--ink-muted); font-size: 13px; }
.star-dare-k { font: var(--text-kicker-weight) var(--text-kicker-size)/1 var(--font-sans); letter-spacing: var(--text-kicker-tracking); text-transform: uppercase; color: var(--plum-strong); }
@keyframes dareGlow { 50% { box-shadow: var(--shadow-ledge), 0 0 22px 4px color-mix(in srgb, var(--sun) 55%, transparent); } }
.star-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.star-pad[hidden] { display: none; }
.star-key { height: clamp(46px, 7vh, 64px); border-radius: var(--radius-md); border: 2px solid var(--edge); background: var(--card); color: var(--ink); font: 700 1.6rem/1 var(--display); box-shadow: 0 4px 0 var(--ledge); cursor: pointer; touch-action: manipulation; transition: transform .08s, box-shadow .08s; }
.star-key:hover { background: color-mix(in srgb, var(--sun) 22%, var(--card)); }
.star-key:active { transform: translateY(3px); box-shadow: var(--shadow-ledge-press); }
.star-key--fn { background: var(--bg-alt); font-size: 1.1rem; }
.star-key--go { grid-column: 1 / -1; background: var(--teal); color: var(--on-accent); font-size: 1.2rem; }
.star-key:disabled { opacity: .55; cursor: default; }
/* Entry points: the Stars row on a Trick page and three small Stars per Trick in the Dojo */
.star-row { margin: var(--space-4) 0; }
.star-links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.star-link { display: grid; justify-items: center; gap: var(--space-1); min-width: 92px; padding: var(--space-2-5) var(--space-3); border: 2px solid var(--edge); border-radius: var(--radius-md); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-ledge); }
.star-link small { color: var(--ink-muted); font-weight: 700; }
.star-link svg, .dojo-star svg { width: 24px; height: 24px; }
.star-link--lit svg path, .dojo-star--lit svg path { fill: var(--sun); }
.star-link--skipped, .dojo-star--skipped { border-style: dashed; box-shadow: none; }
.dojo-stars { display: flex; gap: var(--space-1-5); margin-top: var(--space-1-5); }
.dojo-star { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: 2px solid var(--edge); border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 13px; background: var(--card); }
.dojo-star svg { width: 16px; height: 16px; }
/* ---------- The Hook (js/hook.js in js/star.js, openspec hook): the dare's calculator and the reveal ----------
   The calculator is a drawing (aria-hidden): its screen in the mono font and the keys typed so far. Its text changes key
   by key with no movement, so it reads the same under no motion. Tokens only. */
.hook-calc { display: grid; gap: var(--space-1); width: min(100%, 320px); padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md); border: 2px solid var(--edge); background: var(--bg-alt); }
.hook-screen { display: block; min-height: 1.3em; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--ink); color: var(--on-accent); font: 500 1.6rem/1.2 var(--font-mono); text-align: right; }
.hook-keys { min-height: 1.2em; font: 500 var(--text-small-size)/1.2 var(--font-mono); color: var(--ink-muted); letter-spacing: .04em; }
.hook-calc--calm .hook-screen { color: var(--ink-muted); }
.hook-note { margin: 0; font-weight: 700; color: var(--ink-muted); font-size: var(--text-small-size); }

/* ---------- Placement (js/placement-view.js, openspec placement): the offer, the climb and the result ----------
   Tokens only, both schemes. The staircase is 12 bars that rise left to right; a climbed Step fills (a transition,
   none under no motion). Explorer's three choices are .pr-choice, big through .mode-explorer .pr-choice above. */
.place-root { min-height: 320px; }
.place { display: grid; gap: var(--space-3); }
.place-offer, .place-result, .place-card { padding: var(--space-5); }
.place-talk { display: flex; align-items: center; gap: var(--space-3); }
.place-talk-t { display: grid; gap: var(--space-1); min-width: 0; }
.place-bolt { flex: none; width: clamp(60px, 12vw, 96px); }
.place-bolt .bolt { width: 100%; height: auto; display: block; }
.place-h { margin: 0; font-size: clamp(1.5rem, 4.5vw, 2.2rem); }
.place-lede { margin: 0; }
.place-line { margin: 0; color: var(--ink-muted); font-size: var(--text-small-size); line-height: 1.5; }
.place-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.place-say { margin: 0; position: relative; background: var(--bg-alt); border: 2px solid var(--edge); border-radius: var(--radius-bubble); padding: var(--space-2) var(--space-3-5); font: 700 clamp(15px, 2.2vw, 17px)/1.35 var(--font-sans); }
.place-main { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.place-q { margin: 0; }
.place-choices .pr-choice { font-size: 1.3rem; min-width: 96px; min-height: 56px; }
.place-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.place-form .pr-in { flex: 1 1 160px; }
.place-stairs { display: flex; align-items: flex-end; gap: var(--space-1); height: 72px; padding: 0 var(--space-1); }
.place-stairs i { flex: 1; display: block; height: calc(14px + var(--i) * 5px); border-radius: var(--radius-2xs); border: 2px solid var(--edge); background: var(--card); transition: background var(--duration-medium), border-color var(--duration-medium); }
.place-stairs i.on { background: var(--teal); border-color: var(--teal-strong); }
.place-stairs--done i.on { background: var(--sun); border-color: var(--sun-strong); }
.place-home .door-line { margin-bottom: var(--space-3); }
.me-place { display: grid; gap: var(--space-1); justify-items: start; max-width: 640px; }
.me-place p { margin: 0; }
@media (max-width: 560px) { .place-offer, .place-result, .place-card { padding: var(--space-4); } .place-stairs { height: 56px; } .place-stairs i { height: calc(10px + var(--i) * 3.5px); } }
/* No motion: reduced motion, the site-wide motion pause, Calm (body.calm), or .still when the round began under one */
@media (prefers-reduced-motion: reduce) {
  .bolt *, .star-round *, .star-dare, .place * { animation: none !important; transition: none !important; }
}
/* The same with Pause motion (html.motion-paused) and Calm (body.calm) */
body.calm .star-dare { animation: none !important; transition: none !important; }
html.motion-paused .bolt *, html.motion-paused .star-round *, html.motion-paused .star-dare, html.motion-paused .place *,
body.calm .bolt *, body.calm .star-round *, body.calm .place *, .star-round.still *, .star-round.still .bolt *, .place.still * { animation: none !important; transition: none !important; }
/* Phones: a compact round so the question and the keypad sit close together */
@media (max-width: 760px) {
  .star-top { align-items: center; }
  .star-h { font-size: 1.35rem; margin-top: var(--space-1); }
  .star-hud { margin: var(--space-2) 0; }
  .star-stage { gap: var(--space-2); padding: var(--space-3); }
  .star-talk { min-height: 0; }
  .star-bolt { width: 44px; }
  .star-say { font-size: var(--text-label-size); padding: var(--space-1-5) var(--space-3); }
  .star-ask { gap: var(--space-2); }
  .star-q { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .star-boxes span { width: 40px; height: 48px; font-size: 1.6rem; }
  .star-pop { min-height: 0; }
  .star-pop:empty { display: none; }
  .star-dare { padding: var(--space-2) var(--space-3); }
  .star-dare .star-spark { width: 24px; height: 24px; }
  .star-dare-t b { font-size: 1.2rem; }
  .star-key { height: 46px; font-size: 1.4rem; }
}

/* ---------- Watch shelf (openspec watch-shelf): play buttons, Short tiles, filters ---------- */
button.watch-card { font: inherit; text-align: left; cursor: pointer; width: 100%; }
button.watch-card[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.watch-card--short .watch-th { aspect-ratio: 9 / 16; }
.watch-filter { margin-bottom: var(--space-2); }
.watch-links { margin-top: var(--space-6); }
.rel-links button { display: flex; gap: var(--space-2-5); align-items: center; width: 100%; padding: var(--space-2-5) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: none; color: var(--ink); font: inherit; font-weight: 600; font-size: var(--text-small-size); text-align: left; cursor: pointer; }
.rel-links button:hover { border-color: var(--edge); }
.watch-grid:has(.watch-card--short) { align-items: start; }
.watch-filter { align-items: center; }
.watch-flab { min-width: 7.5em; color: var(--ink-muted); font-size: 13px; font-weight: 700; }
@media (max-width: 600px) { .watch-flab { min-width: 0; flex-basis: 100%; } }

/* ---------- The Sky (openspec sky-home, js/sky-view.js): home map, Landmarks, All places ---------- */
.sky-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.sky-h { margin: var(--space-1-5) 0 0; }
.sky-next { margin: var(--space-2) 0 0; font-weight: 600; }
.sky-count { color: var(--ink-muted); font-weight: 600; }
/* The map keeps at least 720px and scrolls sideways inside its frame, never the page */
.sky-frame { overflow-x: auto; overflow-y: hidden; margin: var(--space-3) 0; border: 2px solid var(--edge); border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--plum) 14%, var(--card)), color-mix(in srgb, var(--sky) 10%, var(--bg-alt)) 70%); }
.sky { position: relative; width: 100%; min-width: 720px; max-width: 860px; margin: 0 auto; aspect-ratio: 1 / 1; }
.sky-svg { display: block; width: 100%; height: 100%; }
.sky-layers circle { fill: var(--ink-muted); }
.sky-layer { transition: transform .5s ease-out; }
.sky-layer-1 { opacity: .22; }
.sky-layer-2 { opacity: .32; animation: skyTwinkle 5s ease-in-out infinite alternate; }
.sky-layer-3 { opacity: .42; animation: skyTwinkle 7s ease-in-out 1s infinite alternate; }
@keyframes skyTwinkle { from { opacity: .18; } to { opacity: .5; } }
.sky-wheel { fill: none; stroke: var(--line); stroke-width: 1.5; }
.sky-wheel-mid { stroke-dasharray: 3 9; }
.sky-lines line { stroke: var(--ink-muted); stroke-width: 2; opacity: .5; }
.sky-lines line.on { stroke: var(--sun-strong); opacity: 1; stroke-width: 3; }
.sky-path { fill: none; stroke: var(--coral-strong); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .5 11; }
.sky-names text { fill: var(--ink); font: 700 var(--text-small-size)/1 var(--font-sans); text-anchor: middle; }
.sky-star { cursor: pointer; }
.sky-star .sky-hit, .sky-star .sky-glow { fill: transparent; }
.sky-star .sky-focus { fill: none; stroke: none; }
.sky-shape { fill: var(--card); stroke: var(--ink-muted); stroke-width: 2; stroke-linejoin: round; }
.sky-star--lit .sky-shape, .sky-shape--lit { fill: var(--sun); stroke: var(--sun-strong); }
.sky-star--lit .sky-glow { fill: var(--sun); opacity: .3; }
.sky-skipring { fill: none; stroke: var(--sky-strong); stroke-width: 2.5; stroke-dasharray: 4 3.5; }
.sky-star--skipped .sky-shape { stroke: var(--sky-strong); }
.sky-skipb circle { fill: var(--card); stroke: var(--sky-strong); stroke-width: 2; stroke-dasharray: 3 2; }
.sky-skipb path { fill: none; stroke: var(--sky-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sky-star--next .sky-glow { fill: var(--coral); opacity: .25; animation: skyPulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sky-star--next .sky-shape { stroke: var(--coral-strong); stroke-width: 2.5; }
.sky-star--new .sky-glow { animation: skyLight 1.4s ease-out 2; transform-box: fill-box; transform-origin: center; }
@keyframes skyPulse { 50% { transform: scale(1.3); opacity: .1; } }
@keyframes skyLight { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: .3; } }
.sky-star:hover .sky-shape { stroke-width: 3; }
.sky-star:focus { outline: none; }
.sky-star:focus-visible .sky-focus { stroke: var(--focus); stroke-width: 3.5; }
.sky-bolt { position: absolute; pointer-events: none; }
.sky-bolt .bolt { display: block; width: 100%; height: auto; }
.sky-mark { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: var(--space-1); min-width: 72px; padding: var(--space-1-5) var(--space-2-5); border: 2px solid var(--edge); border-radius: var(--radius-md);
  background: var(--card); color: var(--ink); font: 700 var(--text-label-size)/1.1 var(--font-sans); text-decoration: none; box-shadow: var(--shadow-ledge); }
.sky-mark svg { width: 40px; height: 40px; color: var(--plum-strong); }
.sky-mark:hover { background: color-mix(in srgb, var(--sun) 18%, var(--card)); }
.sky-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0 0 var(--space-3); padding: 0; color: var(--ink-muted); font-weight: 600; font-size: var(--text-label-size); }
.sky-legend li { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.sky-legend svg { width: 22px; height: 22px; }
/* No motion: reduced motion, the site-wide motion pause, Calm, or .still (set while one of them is on) */
@media (prefers-reduced-motion: reduce) { .sky *, .sky .bolt * { animation: none !important; transition: none !important; } }
html.motion-paused .sky *, body.calm .sky *, html.motion-paused .sky .bolt *, body.calm .sky .bolt *, .sky.still * { animation: none !important; transition: none !important; }
/* Me page switch and All places */
.me-sky { display: grid; gap: var(--space-2); justify-items: start; max-width: 640px; margin-bottom: var(--space-3); }
.me-sky p { margin: 0; }
.places-h small { display: block; margin-top: var(--space-1); color: var(--ink-muted); font: 600 var(--text-small-size)/1.3 var(--font-sans); }
.places-tricks, .places-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.places-stars { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1-5) var(--space-2-5); }
.places-star { display: inline-block; padding: var(--space-1) var(--space-3); border: 2px solid var(--edge); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font-weight: 700; font-size: var(--text-label-size); text-decoration: none; }
.places-star--lit { background: color-mix(in srgb, var(--sun) 35%, var(--card)); }
.places-star--skipped { border-style: dashed; }
.places-next, .places-list small { color: var(--ink-muted); font-weight: 600; }
/* ---------- The play shell (openspec game-shell-and-calm): every timed round and every Star round, full screen ----------
   Fixed over the viewport (100vh, then 100dvh where supported), header then the round; the round area is a size
   container, so questions shrink with the screen before anything would scroll. Safe areas are padded. */
:root { --play-scale: 1; }
body.text-plus { --play-scale: 1.25; }
html.play-open, html.play-open body { overflow: hidden; }
html.play-open #view { z-index: var(--z-overlay); }
.play-shell { position: fixed; inset: 0; z-index: var(--z-overlay); height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bg); color: var(--ink);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.play-shell:focus { outline: none; }
.play-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1-5) var(--space-3); border-bottom: 1px solid var(--line); background: var(--card); min-width: 0; }
.play-title { flex: 1; min-width: 0; margin: 0; font: 700 var(--text-small-size)/1.2 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-head > .md-switch { padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2-5); gap: var(--space-1-5); font-size: 13px; flex: none; }
.play-head > .md-switch .md-track { width: 36px; height: 20px; }
.play-head > .md-switch .md-knob { width: 14px; height: 14px; }
.play-head > .md-switch[aria-checked="true"] .md-knob { transform: translateX(16px); }
.play-size { display: inline-flex; border: 2px solid var(--edge); border-radius: var(--radius-pill); overflow: hidden; flex: none; }
.play-size-b { min-width: 40px; min-height: 32px; padding: 0 var(--space-2); border: 0; background: var(--card); color: var(--ink); font: 700 var(--text-label-size)/1 var(--font-sans); cursor: pointer; }
.play-size-b + .play-size-b { border-left: 2px solid var(--edge); font-size: var(--text-body-size); }
.play-size-b[aria-pressed="true"] { background: var(--sun); color: var(--on-accent); }
.play-exit { flex: none; }
.play-area { min-height: 0; overflow-y: auto; overscroll-behavior: contain; container-type: size; padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); }
@media (max-width: 420px) { .play-head { flex-wrap: wrap; padding: var(--space-1-5) var(--space-2); gap: var(--space-1) var(--space-1-5); } .play-title { flex-basis: 100%; font-size: 13px; } .play-exit { margin-left: auto; } .play-size-b { min-width: 34px; } }
.lv-noclock { color: var(--ink-muted); font-weight: 700; }
.ar-calm { margin: 0 0 var(--space-2); font-weight: 700; color: var(--ink); }
.me-calm { display: grid; gap: var(--space-3); justify-items: start; max-width: 640px; }
.me-calm p { margin: 0; }
.me-bg { display: flex; gap: var(--space-2); align-items: center; font-weight: 600; } .me-bg input { width: 18px; height: 18px; accent-color: var(--teal-strong); }
.me-size { display: flex; gap: var(--space-3); align-items: center; font-weight: 600; }

/* Arena and tower rounds: score row, question, entry, then the keypad pinned to the bottom of the screen */
.play-shell .ar-count { padding-top: 20cqh; }
.play-shell .ar { display: flex; flex-direction: column; min-height: 100%; max-width: 560px; margin: 0 auto; }
.play-shell .ar-top { margin-bottom: var(--space-1); }
.play-shell .ar-score b, .play-shell .ar-time b { font-size: clamp(1.3rem, 6cqh, 2rem); }
.play-shell .ar-bar { margin-bottom: var(--space-1-5); }
.play-shell .ar-fin { margin: 0 0 var(--space-1); text-align: right; }
.play-shell .ar-q { margin: auto 0 var(--space-2); font-size: calc(var(--play-scale) * clamp(1.4rem, min(9cqw, 7cqh), 2.8rem)); }
.play-shell .ar-q.ar-q--story { font-size: calc(var(--play-scale) * clamp(1rem, min(4.6cqw, 3.6cqh), 1.35rem)); }
.play-shell .ar-viz { display: flex; justify-content: center; align-items: center; gap: var(--space-2); width: 100%; max-height: 22cqh; overflow: hidden; }
.play-shell .ar-viz svg { min-width: 0; max-height: 22cqh; } .play-shell .ar-viz:empty { display: none; }
.play-shell #arIn { margin-top: auto; }
.play-shell .ar-entry { min-height: clamp(40px, 8cqh, 56px); font-size: calc(var(--play-scale) * 1.8rem); }
.play-shell .ar-pad { position: sticky; bottom: 0; margin-top: var(--space-2); background: var(--bg); }
.play-shell .ar-key { min-height: clamp(40px, 9cqh, 60px); font-size: calc(var(--play-scale) * 1.5rem); }
.play-shell .ar-choice { min-height: clamp(52px, 12cqh, 76px); font-size: calc(var(--play-scale) * 2rem); }
.play-shell .ar-fix { font-size: calc(var(--play-scale) * 14px); }
/* Short landscape screens: the keypad sits beside the question */
@media (orientation: landscape) and (max-height: 520px) {
  .play-shell .ar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); grid-template-rows: auto auto auto minmax(0, 1fr) auto; column-gap: var(--space-4); max-width: 900px; }
  .play-shell .ar > * { grid-column: 1; }
  .play-shell #arIn { display: contents; }
  .play-shell .ar-form { grid-column: 1; }
  .play-shell .ar-pad { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; position: static; }
  .play-shell .ar-key { min-height: clamp(36px, 19cqh, 56px); }
  .play-shell .ar-q { margin: var(--space-1) 0; }
}

/* Games, the Duel and Star rounds in the shell */
.play-shell .g-head { max-width: 820px; margin: 0 auto var(--space-2); }
.play-shell .g-area { max-width: 820px; margin: 0 auto; font-size: calc(var(--play-scale) * 100%); }
.play-shell .g-area .md-chip, .play-shell .g-area .md-btn { font-size: calc(var(--play-scale) * 1rem); }
.play-shell .g-result, .play-shell .ar-result, .play-shell .lv-result { max-width: 560px; margin-left: auto; margin-right: auto; }
.play-shell .duel { min-height: 100%; }
.play-shell .duel-q { font-size: calc(var(--play-scale) * 1.8rem); }
.play-shell .duel-ch .ar-choice { font-size: calc(var(--play-scale) * 1.6rem); }
.play-shell .star-round { max-width: 1100px; margin: 0 auto; }
.play-shell .star-top { gap: var(--space-2); }
.play-shell .star-h { font-size: clamp(1.2rem, 4cqh, 2rem); }
.play-shell .star-hud { margin: var(--space-2) 0; }
.play-shell .star-stage { min-height: 0; }
.play-shell .star-q { font-size: calc(var(--play-scale) * clamp(2.2rem, min(13cqw, 11cqh), 5.6rem)); }
.play-shell .star-q--long { font-size: calc(var(--play-scale) * clamp(1.2rem, 4cqh, 1.9rem)); }
.play-shell .star-q--sm { font-size: calc(var(--play-scale) * clamp(1.5rem, 6cqh, 2.6rem)); }
.play-shell .star-boxes span { font-size: calc(var(--play-scale) * clamp(1.4rem, 5cqh, 2.2rem)); }
.play-shell .star-plain { font-size: calc(var(--play-scale) * clamp(1.6rem, 6cqh, 2.8rem)); }
.play-shell .star-choice { font-size: calc(var(--play-scale) * 1.3rem); }
.play-shell .star-key { height: clamp(40px, 7cqh, 64px); font-size: calc(var(--play-scale) * 1.5rem); }
.play-shell .star-key--fn, .play-shell .star-key--go { font-size: calc(var(--play-scale) * 1.1rem); }
/* Star Quest on a phone (react-typescript task 7.2, page-layout spec "Star Quest fits a phone"; the owner signs it off
   from phone screenshots, design Q24): the round fills the shell's area as one column, so the question, its answer and
   the keypad with Check are all on screen at 360 by 740 and at 320 by 640, with nothing to scroll and nothing wider than
   the screen. The play shell's title already names the Star and the Trick, so the round's own heading is kept for
   screen readers only, and Skip this Star shares a row with the Sutra's name. Bolt and his line sit in one short row,
   the question and the answer boxes take the room left over, and the keypad is a phone's number pad (four columns,
   Check down the right), its keys, the choices, Skip and the Dare at least 44 by 44 pixels. */
@media (max-width: 760px) {
  .play-shell .star-round { display: flex; flex-direction: column; min-height: 100%; }
  .play-shell .star-top { flex-wrap: nowrap; align-items: center; gap: var(--space-2); }
  .play-shell .star-top > div { flex: 1 1 auto; min-width: 0; }
  .play-shell .star-top .md-tag { display: none; }
  .play-shell .star-h { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .play-shell .star-sutra { margin: 0; font-size: var(--text-small-size); }
  .play-shell .star-sutra .sutra-tag-m { display: none; } /* the name only above the pad; the meaning is on the worked example and the end screen */
  .play-shell #stSkip { flex: none; min-height: 44px; }
  .play-shell .star-hud { flex-wrap: nowrap; gap: var(--space-2-5); margin: var(--space-2) 0; }
  .play-shell .star-meter { flex: 1 1 auto; }
  .play-shell .star-bar { min-width: 40px; }
  .play-shell .star-arena { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .play-shell .star-stage { flex: 1 1 auto; align-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .play-shell .star-talk { gap: var(--space-2); }
  .play-shell .star-bolt { width: 36px; }
  .play-shell .star-say { padding: var(--space-1) var(--space-2-5); }
  .play-shell .star-ask { gap: var(--space-1-5); }
  .play-shell .star-q { font-size: calc(var(--play-scale) * clamp(2rem, min(12cqw, 8cqh), 3.6rem)); }
  .play-shell .star-q--long, .play-shell .star-q--sm { font-size: calc(var(--play-scale) * clamp(1.2rem, min(6cqw, 4.5cqh), 1.9rem)); }
  .play-shell .star-q.star-q--story { font-size: calc(var(--play-scale) * clamp(1rem, min(4.6cqw, 3.4cqh), 1.3rem)); }
  .play-shell .star-boxes { gap: var(--space-1-5); }
  .play-shell .star-boxes span { width: clamp(36px, 11cqw, 48px); height: clamp(44px, 7.5cqh, 56px); }
  .play-shell .star-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: var(--space-2); width: 100%; }
  .play-shell .star-choice, body.band-early .play-shell .star-choice { min-width: 0; min-height: clamp(52px, 9cqh, 64px); justify-content: center; padding-inline: var(--space-2); }
  .play-shell .star-side { margin-top: auto; gap: var(--space-2); }
  .play-shell .star-dare { min-height: 48px; gap: var(--space-2-5); padding: var(--space-1-5) var(--space-3); }
  .play-shell .star-dare .star-spark { width: 22px; height: 22px; }
  .play-shell .star-dare-t { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 var(--space-2); }
  .play-shell .star-dare-t b { font-size: calc(var(--play-scale) * 1.15rem); }
  .play-shell .star-dare-t small { grid-column: 1 / -1; font-size: 12px; }
  .play-shell .star-pad { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: var(--space-1-5); }
  .play-shell .star-key { height: clamp(44px, 7.4cqh, 56px); }
  .play-shell .star-key--go { grid-column: 4; grid-row: 1 / span 4; height: auto; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .play-shell .star-top { display: none; }
  .play-shell .star-hud { margin: 0 0 var(--space-2); }
  .play-shell .star-talk { min-height: 0; }
  .play-shell .star-key { height: clamp(32px, 11cqh, 46px); }
}
@media (prefers-reduced-motion: reduce) { .md-switch .md-track, .md-switch .md-knob { transition: none; } }
html.motion-paused .md-switch .md-track, body.calm .md-switch .md-track, html.motion-paused .md-switch .md-knob, body.calm .md-switch .md-knob { transition: none; }

/* ---------- Guide (openspec in-app-guide): the guide page, its pictures and the first-visit tour. Tokens only. ---------- */
.gd-new { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border: 2px dashed var(--edge); border-radius: var(--radius-md); font-size: var(--text-nav-size); color: var(--ink-muted); background: var(--card); } /* a solid box: the background drawing never shows through its words */
.gd-new a, .gd-new .md-link { font-weight: 700; }
.gd-new .md-link { display: inline-block; min-height: 24px; line-height: 24px; } /* a 24 px target (design D6), in the line of text */
.gd-new-ic { display: inline-flex; color: var(--teal-strong); }
.gd-new-ic svg { width: 22px; height: 22px; }
.gd-pickhelp a { font-weight: 700; }
.mq-guide { font-weight: 700; }
.gd .gd-top { margin: var(--space-3) 0; }
.gd-nomode { margin: var(--space-4) 0; padding: var(--space-4); }
.gd-toc { margin: var(--space-4) 0 var(--space-5); padding: var(--space-4); }
.gd-toc > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--space-3) var(--space-5); }
.gd-toc ul ul { list-style: none; margin: var(--space-1) 0 0; padding: 0; }
.gd-toc ul ul li { margin: var(--space-1) 0; }
.gd-toc a { color: var(--ink); }
.gd-toc .gd-toc-g { font-weight: 800; color: var(--ink); text-decoration: none; }
.gd-group { margin-top: var(--space-5); }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); align-items: start; }
.gd-sec { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); scroll-margin-top: 170px; min-width: 0; }
.gd-art { display: flex; justify-content: center; padding: var(--space-2); border-radius: var(--radius-md); background: color-mix(in srgb, var(--teal) 10%, var(--card)); }
.gd-svg { width: 100%; max-width: 180px; height: auto; display: block; }
.gd-h { margin: 0; }
.gd-h:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-2xs); }
.gd-body p { margin: var(--space-2) 0; }
.gd-k { display: block; margin: var(--space-2) 0 var(--space-1); font-size: var(--text-kicker-size); font-weight: var(--text-kicker-weight); letter-spacing: var(--text-kicker-tracking); text-transform: uppercase; color: var(--ink-muted); }
.gd-what .gd-k, .gd-tip .gd-k { display: block; }
.gd-how { margin: 0; padding-left: 1.3em; }
.gd-how li { margin: var(--space-1) 0; }
.gd-tip { padding: var(--space-2) var(--space-3); border-left: 4px solid var(--sun); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--sun) 14%, var(--card)); }
.gd-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.gd-sec .pn { margin-top: var(--space-2); }
/* The pictures: fills and strokes from tokens, so both schemes follow */
.gd-svg * { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gd-card { fill: var(--card); stroke: var(--edge); }
.gd-ln { fill: none; stroke: var(--line); stroke-width: 3; }
.gd-ln-f { fill: var(--line); stroke: none; }
.gd-dash { stroke-dasharray: 4 5; stroke: var(--ink-muted); stroke-width: 2; }
.gd-coral { fill: color-mix(in srgb, var(--coral) 55%, var(--card)); stroke: var(--coral-strong); }
.gd-teal { fill: color-mix(in srgb, var(--teal) 55%, var(--card)); stroke: var(--teal-strong); }
.gd-sun { fill: var(--sun); stroke: var(--sun-strong); }
.gd-sky { fill: color-mix(in srgb, var(--sky) 55%, var(--card)); stroke: var(--sky-strong); }
.gd-plum { fill: color-mix(in srgb, var(--plum) 50%, var(--card)); stroke: var(--plum-strong); }
.gd-coral-s, .gd-teal-s, .gd-sun-s, .gd-sky-s, .gd-plum-s { fill: none; stroke-width: 3; }
.gd-coral-s { stroke: var(--coral-strong); } .gd-teal-s { stroke: var(--teal-strong); } .gd-sun-s { stroke: var(--sun-strong); } .gd-sky-s { stroke: var(--sky-strong); } .gd-plum-s { stroke: var(--plum-strong); }
.gd-on { fill: var(--card); stroke: none; }
.gd-night { fill: color-mix(in srgb, var(--plum) 22%, var(--bg)); stroke: var(--edge); }
.gd-belt-w { fill: var(--card); stroke: var(--edge); }
.gd-belt-k { fill: var(--ink); stroke: var(--ink); }
.gd-medal-b { fill: color-mix(in srgb, var(--coral) 32%, var(--card)); stroke: var(--coral-strong); }
.gd-medal-s { fill: color-mix(in srgb, var(--ink-muted) 24%, var(--card)); stroke: var(--ink-muted); }
.gd-medal-g { fill: var(--sun); stroke: var(--sun-strong); }
.gd-tx { fill: var(--ink); stroke: none; font: 700 10px var(--font-sans); }
.gd-tx--big { font-size: 13px; }

/* The tour: a full-screen transparent modal; the ring's wide shadow dims the rest, the card holds the words */
.vm-tour { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
.vm-tour::backdrop { background: transparent; }
html.tour-open { overflow: hidden; }
.tour-ring { position: absolute; box-sizing: border-box; border: 3px solid var(--sun); border-radius: var(--radius-md); box-shadow: var(--shadow-glow), 0 0 0 200vmax color-mix(in srgb, var(--bg) 72%, transparent); pointer-events: none; transition: left var(--duration-medium) ease, top var(--duration-medium) ease, width var(--duration-medium) ease, height var(--duration-medium) ease; }
.tour-card { position: absolute; box-sizing: border-box; padding: var(--space-4); overflow: auto; box-shadow: var(--shadow-card); transition: left var(--duration-medium) ease, top var(--duration-medium) ease; }
.tour-n { margin: 0 0 var(--space-1); font-size: var(--text-kicker-size); font-weight: var(--text-kicker-weight); letter-spacing: var(--text-kicker-tracking); text-transform: uppercase; color: var(--ink-muted); }
.tour-t { margin: 0 0 var(--space-2); font: 700 var(--text-card-title-size) var(--font-display); }
.tour-t:focus { outline: none; }
.tour-t:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-2xs); }
.tour-card:hover, .tour-card:focus-within { transform: none; }
.tour-b { margin: 0 0 var(--space-3); }
.tour-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tour-sp { flex: 1; }
.tour-acts [hidden] { display: none; }
.vm-tour.still .tour-ring, .vm-tour.still .tour-card { transition: none; }
@media (prefers-reduced-motion: reduce) { .tour-ring, .tour-card { transition: none; } }
html.motion-paused .tour-ring, body.calm .tour-ring, html.motion-paused .tour-card, body.calm .tour-card { transition: none; }

/* ---------- Listen buttons (openspec explanation-audio): hear any explanation ---------- */
.listen-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 44px; min-width: 44px; padding: 0 var(--space-3);
  border: 1.5px solid var(--edge); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: 600 .9rem/1 var(--font-sans); cursor: pointer; flex: none; }
.listen-btn svg { flex: none; color: var(--teal-strong); }
.listen-btn:hover { border-color: var(--teal-strong); }
.listen-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.listen-btn[aria-pressed="true"] { background: var(--teal); border-color: var(--teal-strong); color: var(--on-accent); }
.listen-btn[aria-pressed="true"] svg { color: var(--on-accent); }
.listen-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.sd-h, .gd-hrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.sd-h { margin: var(--space-4-5) 0 var(--space-1-5); }
.sd-h h3 { margin: 0; }
.sd-text > .sd-h:first-child { margin-top: 0; }
.tour-card .listen-row { margin: 0 0 var(--space-2); }

/* ---------- Play shelves (openspec play-experiences): a section's play experiences, js/play/catalog.js ---------- */
.play-shelf { margin-block: var(--space-6); }
/* Its own grid class: .play-grid is Home's tile grid (above), which a second rule here would override */
.play-shelf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); }
.play-card { --c: var(--coral); display: flex; flex-direction: column; gap: var(--space-1); height: 100%; box-sizing: border-box; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--card); border: 2px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-card); position: relative; overflow: hidden; transition: transform .18s ease, border-color .18s ease; }
.play-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--c); }
.play-card:hover, .play-card:focus-visible { transform: translateY(-3px); border-color: var(--c); }
.play-card-ic { width: 48px; height: 48px; color: var(--c); margin-bottom: var(--space-2); }
.play-card-ic svg { width: 100%; height: 100%; }
.play-card b { font-family: var(--font-display); font-size: var(--text-card-title-size); }
.play-card em { font-style: normal; font-weight: 700; color: var(--cs); }
.play-card span:last-child { color: var(--ink-muted); font-size: var(--text-nav-size); }
/* Offline, an experience the worker never saved (js/play/offline-note.js): the card stays a link, with a note */
.play-card--off { border-style: dashed; }
.play-card-off { color: var(--ink-muted); font-size: var(--text-nav-size); font-weight: 700; }
.play-card { --cs: var(--coral-strong); }
.play-card--coral { --c: var(--coral); --cs: var(--coral-strong); } .play-card--sun { --c: var(--sun-strong); --cs: var(--sun-strong); } .play-card--teal { --c: var(--teal); --cs: var(--teal-strong); }
@media (prefers-reduced-motion: reduce) { .play-card { transition: none; } .play-card:hover, .play-card:focus-visible { transform: none; } }
html.motion-paused .play-card, body.calm .play-card { transition: none; } html.motion-paused .play-card:hover, body.calm .play-card:hover, html.motion-paused .play-card:focus-visible, body.calm .play-card:focus-visible { transform: none; }

/* ---------- Mathematics in Sanskrit verse (openspec sanskrit-verses): Sutras page and deep dives. Tokens only.
   Devanagari uses the device's own fonts (no download): Noto on Android and Linux, Kohinoor on Apple, Nirmala on Windows. */
.verses { margin-top: var(--space-6); }
.verse-group { margin-top: var(--space-5); content-visibility: auto; contain-intrinsic-block-size: auto 3000px; } /* at the end of the Sutras page, under an open Deep dive too: a group off screen skips its layout and paint until it nears the screen (#129 perf); auto keeps its last size */
.verse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--space-4); align-items: start; margin-top: var(--space-3); }
.verse { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); min-width: 0; scroll-margin-top: 170px; overflow-wrap: anywhere; }
.verse:hover { transform: none; }
.verse-head h4 { font: 700 1.15rem/1.3 var(--font-display); margin: var(--space-2) 0 0; }
.verse-deva, .sd-verse .verse-deva { font-family: "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", "Mangal", sans-serif; font-size: 1.2rem; line-height: 1.7; margin: 0; color: var(--ink); }
.verse-iast, .sd-verse .verse-iast { font-style: italic; line-height: 1.6; margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.verse-say { margin: 0; font-family: var(--font-mono); font-size: .85rem; color: var(--ink-muted); overflow-wrap: anywhere; }
.verse-say--hl { outline: 2px dashed var(--sun-strong); outline-offset: 4px; }
.verse-acts { margin: 0; }
.verse-listen { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; }
.verse-listen svg { width: 18px; height: 18px; }
.verse-listen[aria-pressed="true"] { background: var(--sun); color: var(--on-accent); border-color: var(--sun-strong); }
.verse-meaning, .verse-plain { margin: 0; }
.verse-math { display: block; margin-top: var(--space-1); font-family: var(--font-mono); font-size: .85rem; color: var(--teal-strong); overflow-wrap: anywhere; }
.verse-more summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.verse-words { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0; }
.verse-words dt { font-style: italic; }
.verse-words dd { margin: 0; color: var(--ink-muted); }
.verse-refs { padding-left: var(--space-4); }
.verse-refs a { overflow-wrap: anywhere; }
.sd-verse { overflow-wrap: anywhere; margin-top: var(--space-4); padding: var(--space-3); border-left: 4px solid var(--sun); background: color-mix(in srgb, var(--sun) 8%, transparent); border-radius: var(--radius-sm); }
@media (max-width: 420px) { .verse-words { grid-template-columns: 1fr; } .verse-words dd { margin-bottom: var(--space-1); } }

/* ---------- Say it and the Respelling (openspec sutra-pronunciation) ---------- */
.say-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 44px; min-height: 44px; padding: 0 var(--space-2-5); border: 2px solid var(--edge); border-radius: var(--radius-pill); background: var(--card); color: var(--plum-strong); font: 700 .9rem/1 var(--font-sans); cursor: pointer; vertical-align: middle; }
.say-btn svg { width: 20px; height: 20px; flex: none; }
.say-btn:hover { background: color-mix(in srgb, var(--plum) 16%, var(--card)); }
.say-btn:focus-visible, .amb-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.say-btn[aria-pressed="true"] { background: var(--plum-strong); border-color: var(--plum-strong); color: var(--on-accent); }
.say-btn--label { padding: 0 var(--space-3-5) 0 var(--space-2-5); }
.say-btn--card { position: absolute; top: 8px; right: 8px; z-index: 2; width: 44px; padding: 0; }
.sutra-card.flipped .say-btn--card { visibility: hidden; }
.sutra-card .sutra-n, .sutra-card .sutra-face > b { padding-right: 44px; }
.say-resp { display: block; font: 600 var(--text-nav-size)/1.35 var(--font-sans); color: var(--ink-muted); letter-spacing: .01em; overflow-wrap: anywhere; }
.sutra-face .say-resp { font-size: .85rem; }
.say-deva { display: block; margin: var(--space-1) 0 var(--space-1-5); font-size: 1.05rem; color: var(--ink-muted); }
.sd-say { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-1); }
.sd-say .say-resp { flex: 1 1 12em; min-width: 0; }
.sd-head > div:first-child { min-width: 0; }
.places-h .say-btn { margin: 0 var(--space-1); }
.places-c > .say-resp { margin: calc(-1 * var(--space-1)) 0 var(--space-2); }

/* ---------- Sutra ambience toggle and settings (openspec sutra-ambience) ---------- */
.sutra-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.amb-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3-5) 0 var(--space-2-5); border: 2px solid var(--edge); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: 700 .85rem/1 var(--font-sans); cursor: pointer; }
.amb-btn svg { width: 20px; height: 20px; flex: none; }
.amb-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--teal) 22%, var(--card)); border-color: var(--teal-strong); }
.amb-btn--compact span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.amb-btn--compact { width: 44px; padding: 0; justify-content: center; }
.amb-set { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; font-weight: 600; }
.amb-set .mq-h3 { margin: 0; }
.amb-set input { width: 18px; height: 18px; accent-color: var(--teal-strong); }
.amb-set .mq-small { margin: 0; font-weight: 400; }

/* Find (openspec find): the search page */
.find-form { margin: var(--space-4) 0 var(--space-2); }
.find-in { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.15rem; padding: var(--space-3) var(--space-4); border: 2px solid var(--edge); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); }
.find-in:focus { outline: 3px solid var(--sky); outline-offset: 2px; }
.find-hint { margin: 0 0 var(--space-1); } .find-count { min-height: 1.4em; margin: 0; }
.find-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.find-hit { display: grid; gap: var(--space-1); width: 100%; box-sizing: border-box; text-align: left; font: inherit; padding: var(--space-2-5) var(--space-3-5); border: 2px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); text-decoration: none; cursor: pointer; }
.find-hit:hover, .find-hit:focus-visible { border-color: var(--sky); } .find-hit b { font: 600 1.05rem/1.25 var(--display); } .find-hit small { color: var(--ink-muted); font-size: var(--text-label-sm-size); line-height: 1.35; }
.find-group .mq-strand { margin: var(--space-5) 0 var(--space-2-5) !important; } .find-group--top .find-hit { border-color: var(--teal-strong); } /* the Best match: an answer to a question, before the kinds */ .find-none { margin: var(--space-4) 0; }

/* ---------- Family helpers (openspec family-helpers): Shunya, Nava and Eka. One layer above the toasts; the layer lets
   taps through except on a Visit. They walk or hop in from the edge named by data-from, perch, bob, wave; under Calm,
   Pause motion and reduced motion (.fh-still and the media query) they fade in with no movement. Tokens only. */
.fh-layer { position: fixed; inset: 0; z-index: var(--vm-z-family); pointer-events: none; }
.fh-visit { position: absolute; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); width: min(300px, calc(100vw - 2 * var(--space-4))); pointer-events: auto; animation: fh-fade .18s ease-out both; }
.fh-visit.fh-measure { visibility: hidden; left: 0; top: 0; }
.fh-visit.fh-docked { position: relative; width: auto; max-width: 560px; margin: var(--space-3) 0 0 auto; }
.fh-bubble { position: relative; box-sizing: border-box; width: 100%; padding: var(--space-3) var(--space-4); padding-right: 40px; border: 2px solid var(--edge); border-radius: var(--radius-lg); background: linear-gradient(var(--card), var(--card)), var(--bg); color: var(--ink); box-shadow: var(--shadow-ledge); font-size: var(--text-small-size); line-height: 1.4; } /* the card colour over the page colour: opaque in Deep Space too, where --card is see-through */
.fh-bubble::after { content: ''; position: absolute; bottom: -9px; right: var(--fh-tip, 28px); width: 14px; height: 14px; background: linear-gradient(var(--card), var(--card)), var(--bg); border-right: 2px solid var(--edge); border-bottom: 2px solid var(--edge); transform: rotate(45deg); }
.fh-who { margin: 0 0 var(--space-1); font: var(--text-kicker-weight) var(--text-kicker-size)/1.2 var(--font-display, inherit); color: var(--ink-muted); letter-spacing: var(--text-kicker-tracking); text-transform: uppercase; }
.fh-say p { margin: 0 0 var(--space-2); }
.fh-ex { font-weight: 700; }
.fh-steps { margin: 0 0 var(--space-2); padding-left: 1.2em; font-size: var(--text-label-size); }
.fh-steps li { margin: var(--space-1) 0; }
.fh-ex-a { font-size: var(--text-label-size); color: var(--ink-muted); }
.fh-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fh-btns .md-btn { min-height: 44px; }
.fh-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; background: none; color: var(--ink-muted); font-size: var(--text-title-size); line-height: 1; cursor: pointer; border-radius: var(--radius-pill); }
.fh-x:focus-visible { outline: 3px solid var(--focus, var(--sky-strong)); }
.fh-crew { display: flex; align-items: flex-end; gap: var(--space-2); flex-direction: row-reverse; height: 64px; padding-right: var(--space-2); }
.fh-friend { display: block; height: 100%; opacity: .78; transition: opacity var(--duration-medium); }
.fh-friend.fh-on { opacity: 1; }
.fh-art { height: 100%; width: auto; overflow: visible; display: block; }
.fh-art--shunya { height: 46px; margin-top: auto; }
.fh-art .fh-body { transform-box: fill-box; transform-origin: 50% 100%; }
.fh-art[data-pose="idle"] .fh-body { animation: fh-bob 3.2s ease-in-out infinite; }
.fh-art[data-pose="talk"] .fh-body { animation: fh-talk .9s ease-in-out infinite; }
.fh-art[data-pose="wave"] .fh-body { animation: fh-wave 1.2s ease-in-out 2; }
.fh-art[data-pose="cheer"] .fh-body { animation: fh-cheer .55s ease-out 3; }
.fh-art[data-pose="think"] .fh-body { transform: rotate(-6deg); }
.fh-visit[data-from="right"] .fh-crew { animation: fh-in-right .6s var(--ease-spring) both; }
.fh-visit[data-from="left"] .fh-crew { animation: fh-in-left .6s var(--ease-spring) both; }
.fh-visit[data-from="bottom"] .fh-crew, .fh-visit.fh-docked .fh-crew { animation: fh-in-up .5s var(--ease-spring) both; }
.fh-visit[data-from="top"] .fh-crew { animation: fh-in-down .5s var(--ease-spring) both; }
.fh-ask { white-space: nowrap; }
@keyframes fh-fade { from { opacity: 0; } }
@keyframes fh-bob { 50% { transform: translateY(-2px); } }
@keyframes fh-talk { 0%, 100% { transform: none; } 40% { transform: translateY(-3px) rotate(-2deg); } 70% { transform: rotate(2deg); } }
@keyframes fh-wave { 25% { transform: rotate(-10deg); } 75% { transform: rotate(8deg); } }
@keyframes fh-cheer { 50% { transform: translateY(-8px); } }
@keyframes fh-in-right { 0% { transform: translateX(120vw); } 60% { transform: translateX(-6px) translateY(-6px); } 100% { transform: none; } }
@keyframes fh-in-left { 0% { transform: translateX(-120vw); } 60% { transform: translateX(6px) translateY(-6px); } 100% { transform: none; } }
@keyframes fh-in-up { 0% { transform: translateY(110vh); } 70% { transform: translateY(-8px); } 100% { transform: none; } }
@keyframes fh-in-down { 0% { transform: translateY(-110vh); } 70% { transform: translateY(8px); } 100% { transform: none; } }
.fh-visit.fh-still, .fh-visit.fh-still * { animation: fh-fade .18s ease-out both !important; transition: none !important; }
.fh-visit.fh-still .fh-art .fh-body { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .fh-visit, .fh-visit * { animation: fh-fade .18s ease-out both !important; transition: none !important; } .fh-visit .fh-art .fh-body { animation: none !important; } }
html.motion-paused .fh-visit, body.calm .fh-visit, html.motion-paused .fh-visit *, body.calm .fh-visit * { animation: fh-fade .18s ease-out both !important; transition: none !important; }
html.motion-paused .fh-visit .fh-art .fh-body, body.calm .fh-visit .fh-art .fh-body { animation: none !important; }
.me-family { display: grid; gap: var(--space-2); justify-items: start; max-width: 640px; margin-bottom: var(--space-3); }
.me-family p { margin: 0; }
.me-fam-when { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-weight: 600; }
.me-fam-when legend { padding: 0; margin-bottom: var(--space-1); font-weight: 700; }
.me-fam-when input { width: 18px; height: 18px; accent-color: var(--teal-strong); }
/* Talking with the Family (step 3, js/family-talk.js): the chat box under the Visit's buttons, text only; Bolt joins the
   crew when he speaks; the Sutra card and the pointer the actions draw; the question outlined for a moment on pointAt */
.fh-talk { display: grid; gap: var(--space-1); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--edge); }
.fh-talk-row { display: flex; gap: var(--space-2); }
.fh-talk-in { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 var(--space-3); border: 2px solid var(--edge); border-radius: var(--radius-md); background: var(--bg); color: var(--ink); font: inherit; }
.fh-talk-in:focus-visible { outline: 3px solid var(--focus, var(--sky-strong)); outline-offset: 1px; }
.fh-talk-send { min-height: 44px; margin: 0; }
.fh-talk-busy .fh-talk-send { opacity: .6; pointer-events: none; }
.fh-talk-note, .fh-talk-say { margin: 0; color: var(--ink-muted); }
.fh-talk-say:empty { display: none; }
.fh-turnstile { min-height: 65px; }
/* The server voice's bot check (app/src/logic/voice-server.ts, react-typescript task 11.10): empty unless Turnstile asks the Player something */
.vs-turnstile { position: fixed; bottom: var(--space-4); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); }
.vs-turnstile:empty { display: none; }
.fh-turnstile[hidden] { display: none; }
.fh-sutra, .fh-point { margin: 0 0 var(--space-2); font-size: var(--text-label-size); color: var(--ink-muted); }
.fh-pointed { outline: 3px solid var(--sun); outline-offset: 4px; border-radius: var(--radius-md); }
.fh-friend--bolt svg { height: 100%; width: auto; display: block; }
.fh-visit--talk .fh-crew { height: 72px; }
/* Try a trick (js/try.js, openspec try-trick-in-modes): the teaching card, three questions and the end card.
   Tokens only; nothing animates here (the sparkles after a right answer are js/celebrate.js, off under no motion). */
.try { display: grid; gap: var(--space-3); justify-items: start; }
.try .try-h { margin: 0; }
.try .try-lede { margin: 0; }
.try-sutra { justify-self: stretch; margin: 0; } /* the card's Sutra block is its Trick's full Sutra tag (js/sutra-tag.js) */
.try-why { margin: var(--space-1) 0 0; font-size: var(--text-small-size); color: var(--ink); }
.try-k { margin: var(--space-2) 0 0; font: 700 1.05rem/1.3 var(--font-sans); }
.try-steps { max-width: 640px; }
.try-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }
.try-acts:empty { display: none; }
.try-src { margin: 0; }
.try-q, .try-end { display: grid; gap: var(--space-3); justify-items: start; width: 100%; }
.try-qh { margin: 0; font: 600 clamp(2rem, 7vw, 3rem)/1.1 var(--display); color: var(--ink); }
.try-end .try-qh { font-size: clamp(1.6rem, 5vw, 2.2rem); }
.try-end-n { margin: 0; font-weight: 700; }
.try-form { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; max-width: 480px; }
.try-form .ans-in { flex: 1 1 160px; }
.try-form .md-btn { margin: 0; }
.try-say { margin: 0; min-height: 1.5em; font-weight: 600; }
.try-say:empty { min-height: 0; }
.try-ask { margin: 0; font-weight: 700; font-size: 1.15rem; }
.try-choices .pr-choice.ok { background: var(--teal); border-color: var(--teal-strong); color: var(--on-accent); }
.try-choices .pr-choice:disabled:not(.ok) { opacity: .45; }
/* The 11 sandwich: the two digits as bread, the filling in the middle */
.try-sw { display: inline-flex; gap: var(--space-2); align-items: center; font: 700 2rem/1 var(--display); }
.try-sw i { font-style: normal; display: grid; place-items: center; min-width: 56px; min-height: 56px; padding: 0 var(--space-2); border-radius: var(--radius-md); background: color-mix(in srgb, var(--sun) 35%, var(--card)); border: 2px solid var(--edge); color: var(--ink); }
.try-sw .try-sw-mid { background: color-mix(in srgb, var(--teal) 30%, var(--card)); }
.try-sw .try-sw-mid.is-empty { background: var(--card); border-style: dashed; color: var(--ink-muted); }
.anim-show .try-sw { font-size: var(--text-title-size); }
.anim-show .try-sw i { min-width: 44px; min-height: 44px; }
/* Home's Try a trick card */
.try-card { margin: var(--space-4) 0; }
.try-card h2 { margin: var(--space-2) 0 var(--space-1); }
.try-card .door-acts { margin: var(--space-2) 0 0; }

/* ---------- Home leads with the Sutras (openspec change sutras-first). Tokens only. ---------- */
.sutra-door .sutra-door-tag { margin: var(--space-1) 0; font-size: 1.05rem; }
.sutra-door .sutra-door-tag .sutra-tag-n { display: block; font-size: 1.2rem; }
.sutra-door .sutra-door-tag .sutra-tag-m { display: block; }
.sutra-door .sutra-door-tag .sutra-tag-m::before { content: none; }
.your-sutras-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.your-sutra { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.your-sutra:hover, .your-sutra:focus-visible { border-color: var(--edge); }
.your-sutra b { font: 600 1.05rem/1.3 var(--display); color: var(--plum-strong); }
.your-sutra .sutra-tag-m { font-size: var(--text-label-size); }
.sutra-say { margin: 0 0 var(--space-3); }
.sutra-say-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; overflow-wrap: anywhere; }
.sutra-say-name b { font: 600 1.3rem/1.3 var(--display); color: var(--plum-strong); }
.sutra-say-kid { margin: var(--space-1) 0; font-size: 1.1rem; color: var(--ink); }
.home-doors + .try-card, .your-sutras { margin-top: var(--space-3); }
.your-sutras + .me-strip { margin-top: var(--space-3); }

/* Installing the app (openspec change install-app): the Install nudge on Home, the Install guide and the Me page card.
   Tokens only; the guide is a .vm-sheet dialog, so it already holds still under Calm, Pause motion and reduced motion. */
.in-slot:empty { display: none; }
.in-nudge { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: 2px solid var(--teal-strong); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--teal) 12%, var(--card)); color: var(--ink); animation: toastIn .3s ease-out; }
.in-nudge-ic { flex: none; width: 48px; height: 48px; border-radius: var(--radius-sm); }
.in-nudge-x { min-width: 0; flex: 1; }
.in-nudge-t { margin: 0; font: 600 1.05rem/1.3 var(--display); }
.in-nudge-b { margin: var(--space-1) 0 var(--space-2); color: var(--ink-muted); line-height: 1.45; }
.in-nudge-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.in-nudge-acts .md-btn { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .in-nudge { animation: none; } }
html.motion-paused .in-nudge, body.calm .in-nudge { animation: none; }
/* The Feedback prompt on a result screen (openspec change feedback-page, design decision 12; js/feedback-prompt.js): one line */
.fb-nudge { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border: 2px solid var(--edge); border-radius: var(--radius-lg); background: var(--card); color: var(--ink); }
.fb-nudge-bolt { flex: none; width: 40px; height: 44px; }
.fb-nudge-bolt .bolt { width: 100%; height: 100%; }
.fb-nudge-a { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); }
.fb-nudge-x { flex: none; min-height: 44px; }
.vm-sheet.in-guide { box-sizing: border-box; width: min(520px, calc(100vw - 2 * var(--space-4))); max-width: none; max-height: calc(100dvh - 2 * var(--space-4)); padding: var(--space-4); }
@media (max-width: 380px) { .in-guide .in-steps .in-ic { display: none; } } /* a 320 px phone: the step number and words keep the width */
.in-guide .in-why { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.in-guide .in-why li, .in-guide .in-steps li { display: flex; align-items: flex-start; gap: var(--space-2-5); line-height: 1.45; }
.in-guide .in-ic { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--sky) 16%, var(--card)); color: var(--ink); }
.in-guide .in-ic svg { width: 22px; height: 22px; }
.in-guide .in-one { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 2px solid var(--teal-strong); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--teal) 12%, var(--card)); }
.in-guide .in-one .md-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; }
.in-guide .in-one .md-btn svg { width: 22px; height: 22px; }
.in-guide .in-one .mq-small { margin: var(--space-2) 0 0; }
.in-guide .in-h { margin: 0 0 var(--space-2); font: 600 1.05rem/1.3 var(--display); }
.in-guide .in-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.in-guide .in-steps:focus { outline: none; }
.in-guide .in-steps:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-xs); }
.in-guide .in-n { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-top: var(--space-1); border-radius: var(--radius-round); background: var(--ink); color: var(--bg); font: 700 .9rem/1 var(--font-sans); }
.in-guide .in-t { min-width: 0; padding-top: var(--space-1-5); }
.in-guide .in-note { margin: var(--space-3) 0 0; }
.in-guide .in-copy { margin: var(--space-3) 0 0; }
.in-guide .in-other { margin: var(--space-4) 0 0; }
.in-guide .in-other summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.in-guide .in-pick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.in-guide .in-pick .md-chip { min-height: 44px; text-align: left; }
.in-guide .in-status { min-height: 1.4em; margin: var(--space-3) 0 0; font-weight: 600; }
.in-guide .in-status:empty { margin: 0; min-height: 0; }
.in-me { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); }
.in-me .in-me-t { margin: 0 0 var(--space-1); }
.in-me .mq-small { margin: 0 0 var(--space-2); }
.in-me .md-btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.in-me .md-btn svg { width: 20px; height: 20px; }

/* Explorer Home's More places, Find's help card, the Arcade and Learn's Sutras card, a lesson's last button
   (openspec change play-nav-by-mode) */
.home-places { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; }
.home-places > span { font-weight: 700; color: var(--ink-muted); }
.find-help { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); } .find-help .door-acts { align-items: center; }
.arcade-doors { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .arcade-doors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .arcade-doors { grid-template-columns: 1fr; } }
.arcade-doors .door small { display: block; margin-top: var(--space-2); }
.door--teal .play-ic { background: var(--teal); }
a.door.learn-sutras { display: grid; grid-template-rows: none; grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: center; margin: var(--space-4) 0; }
a.door.learn-sutras .play-ic { grid-row: span 3; }
.lesson-next { margin: var(--space-4) 0 0; }
.sd-try .sd-how { color: var(--sky-strong); font-size: var(--text-label-sm-size); font-weight: 700; }