/* app.css — accessibility-first base (BUILD_PLAN §3: WCAG + UDL). Colors come from theme.js custom properties. */

:root {
  --bg: #0e1726; --panel: #16213a; --ink: #eaf2ff; --muted: #9fb3d1;
  --accent: #33d6a6; --accent-ink: #04241b; --wrong: #f4a259; --focus: #7cc4ff;
  --font: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* The hidden attribute must always win. Several overlays (e.g. .feedback) set an explicit `display`, which would
   otherwise override the UA `[hidden]{display:none}` and leave the panel floating on screen. Toggle via el.hidden. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: clamp(16px, 2.4vw, 20px); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* screens */
.screen { display: none; min-height: 100vh; flex-direction: column; }
.screen.active { display: flex; }

/* start */
#screen-start { align-items: center; justify-content: center; padding: 24px; }
.card { background: var(--panel); border-radius: 18px; padding: 28px; width: min(560px, 100%); box-shadow: 0 10px 40px #0006; }
.logo { font-size: clamp(32px, 8vw, 56px); letter-spacing: .12em; margin: 0 0 4px; color: var(--accent); }
.tagline { margin: 0 0 20px; color: var(--muted); }
.field { display: block; margin: 14px 0; color: var(--muted); font-size: .9em; }
.field input, .field select {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font-size: 1rem;
  background: var(--bg); color: var(--ink); border: 2px solid #2a3b5e; border-radius: 10px;
}
.inputs-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid #2a3b5e; font-size: .85em; color: var(--muted); }
.inputs-note ul { margin: 8px 0 0; padding-left: 18px; } .inputs-note li { margin: 5px 0; }
kbd { background: #2a3b5e; border-radius: 4px; padding: 1px 6px; font-family: inherit; font-size: .85em; }

/* buttons */
.btn {
  font: inherit; cursor: pointer; border: 2px solid transparent; border-radius: 10px;
  padding: 10px 16px; background: #23324f; color: var(--ink); transition: transform .06s ease;
}
.btn:hover { filter: brightness(1.1); } .btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.btn.big { width: 100%; padding: 15px; font-size: 1.1rem; margin-top: 8px; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.small { padding: 7px 12px; font-size: .9em; } .btn.tiny { padding: 4px 10px; font-size: .8em; }
.file-btn { display: inline-block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* play */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--panel); }
.unit-label { font-size: .9em; color: var(--muted); text-align: center; }
.device-hint { text-align: center; font-size: .8em; color: var(--muted); min-height: 1.2em; padding: 4px; }
.play { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; text-align: center; }
.prompt { font-size: clamp(24px, 6vw, 44px); font-weight: 700; max-width: 800px; }
/* reading passage panel (2026-09-14) — readable body text, its own scroll, never steals the question's space */
.passage { width: min(100%, 820px); max-height: 38vh; overflow-y: auto; margin: 0 auto 14px; padding: 16px 20px; text-align: left;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; backdrop-filter: blur(6px);
  font-size: clamp(17px, 2.3vw, 22px); line-height: 1.55; font-weight: 500; white-space: pre-line; }
.passage h3 { margin: 0 0 8px; font-size: .85em; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.passage:focus-visible { outline: 3px solid var(--accent, #43b477); outline-offset: 2px; }
.play:has(.passage:not([hidden])) .prompt { font-size: clamp(20px, 3.6vw, 30px); }   /* question shrinks a step when a passage is up */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(680px, 100%); }
.option {
  display: flex; align-items: center; gap: 12px; padding: 20px 22px; font-size: 1.2rem; text-align: left;
  background: var(--panel); border: 3px solid #2a3b5e; border-radius: 14px; color: var(--ink); cursor: pointer;
}
.option .num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; background: #2a3b5e; color: var(--ink);
  display: grid; place-items: center; font-weight: 700;
}
.option.cursor { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus) inset; } /* keyboard/pad highlight */
.option:hover { filter: brightness(1.08); }
.option.wrong { border-color: var(--wrong); opacity: .7; }   /* a tried-and-missed choice — dimmed, still visible */
.option.wrong .num { background: var(--wrong); }
.option.right { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent) inset; }
.option.right .num { background: var(--accent); }
.option.pop { animation: pop .45s cubic-bezier(.2,1.4,.4,1); }        /* satisfying bounce on a correct pick */

/* ----- game feel: coach line, streak, correct-answer juice ----- */
.play-coach { color: var(--muted); font-size: .95rem; margin: 2px 0 10px; text-align: center; min-height: 1.2em; }
.streak { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid var(--accent);
  padding: 3px 10px; border-radius: 999px; font-size: .95rem; }
.streak.bump { animation: pop .4s cubic-bezier(.2,1.4,.4,1); }
.reward-layer { position: relative; height: 0; }                      /* floating rewards spawn here, absolutely placed */
.reward-burst { position: fixed; transform: translate(-50%, -50%); font-size: 1.6rem; font-weight: 800; color: var(--accent);
  pointer-events: none; z-index: 30; animation: floatUp .9s ease-out forwards; text-shadow: 0 2px 8px #000a; }

/* squash-and-stretch: squish, overshoot the other way, settle — the "alive" bounce (Disney principle) */
@keyframes pop { 0% { transform: scale(1,1); } 28% { transform: scale(1.14,.88); } 55% { transform: scale(.94,1.08); } 78% { transform: scale(1.04,.98); } 100% { transform: scale(1,1); } }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%,-40%) scale(.6); }
  25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-160%) scale(1.15); } }

/* ----- in-play world art + build scene (scene.js paints the SVG) ----- */
#screen-play { position: relative; }
.scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-robot { position: absolute; left: 14px; bottom: 6px; width: min(32vw, 190px); height: auto; max-height: 54%; display: block; }
/* Block Workshop: the block house that builds itself (scene_build.js). New blocks drop in; still under reduced motion. */
.scene-build { position: absolute; left: 8px; bottom: 4px; width: min(46vw, 280px); height: auto; max-height: 60%; display: block; }
.scene-build .bnew { transform-box: fill-box; animation: bdrop .8s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes bdrop { from { transform: translateY(-42px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scene-build .bnew { animation: none; } }
/* Dino Dig: the skeleton walks along the ground band behind the question (scene_dino.js) */
.scene-dino { position: absolute; left: 0; bottom: 0; width: 100%; height: 42%; display: block; }
/* Deep Reef: real reef species swim behind the question (scene_reef.js) */
.scene-reef { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* living-backdrop ambient motifs (scene.js) — slow, faint, behind the question. Recolour from --accent via fill. */
.scene-bg .sm { opacity: .18; }
.scene-bg .rise { animation: sceneRise linear infinite; }
.scene-bg .drift { animation: sceneDrift ease-in-out infinite alternate; }
.scene-bg .sway { opacity: .10; animation: sceneSway ease-in-out infinite alternate; }
.scene-bg .haze { fill: var(--accent); opacity: .07; }
@keyframes sceneRise { 0% { transform: translateY(18px); opacity: 0; } 12% { opacity: .22; } 85% { opacity: .22; } 100% { transform: translateY(-300px); opacity: 0; } }
@keyframes sceneDrift { 0% { transform: translate(0,0); } 100% { transform: translate(30px,-24px); } }
@keyframes sceneSway { 0% { opacity: .05; } 100% { opacity: .16; } }
@media (prefers-reduced-motion: reduce) { .scene-bg .rise, .scene-bg .drift, .scene-bg .sway { animation: none; } }
/* Butterfly world MEADOW (scene.js) — a hero butterfly + drifting field butterflies + swaying grass/flowers. Fuller than
   the ambient motifs because it IS the world; the play UI sits on solid panels (z-index 1) so the question always reads. */
.scene-bg .m-wingL { transform-box: fill-box; transform-origin: right center; animation: mFlap .3s ease-in-out infinite alternate; }
.scene-bg .m-wingR { transform-box: fill-box; transform-origin: left center; animation: mFlap .3s ease-in-out infinite alternate; }
.scene-bg .m-fly { animation: mFly 24s ease-in-out infinite; }
.scene-bg .m-d1 { animation: mDrift1 17s ease-in-out infinite; }
.scene-bg .m-d2 { animation: mDrift2 21s ease-in-out infinite; }
.scene-bg .m-d3 { animation: mDrift3 15s ease-in-out infinite; }
.scene-bg .m-grass { transform-box: fill-box; transform-origin: bottom center; animation: mSway 6s ease-in-out infinite; }
@keyframes mFlap { to { transform: scaleX(.34); } }
@keyframes mSway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes mFly { 0%,100% { transform: translate(40px,150px); } 25% { transform: translate(150px,80px); } 50% { transform: translate(280px,120px); } 75% { transform: translate(190px,175px); } }
@keyframes mDrift1 { 0%,100% { transform: translate(60px,185px); } 50% { transform: translate(110px,155px); } }
@keyframes mDrift2 { 0%,100% { transform: translate(320px,150px); } 50% { transform: translate(262px,178px); } }
@keyframes mDrift3 { 0%,100% { transform: translate(205px,120px); } 50% { transform: translate(252px,150px); } }
@media (prefers-reduced-motion: reduce) { .scene-bg .m-fly, .scene-bg .m-d1, .scene-bg .m-d2, .scene-bg .m-d3, .scene-bg .m-wingL, .scene-bg .m-wingR, .scene-bg .m-grass { animation: none; } }
.rbench rect { fill: var(--panel); stroke: var(--accent); stroke-opacity: .3; }
#screen-play > .topbar, #screen-play > .device-hint, #screen-play > .play { position: relative; z-index: 1; }
.prompt { text-shadow: 0 2px 12px rgba(0,0,0,.75); }  /* keep the question crisp over the scene art */
/* robot parts + materials (colours come from the theme vars) */
.rpart { opacity: 0; transition: opacity .45s ease; }
.rpart.on { opacity: 1; }
.rpart.just { animation: pop .8s cubic-bezier(.2,1.4,.4,1); transform-box: fill-box; transform-origin: center; }
.rmetal { fill: var(--panel); stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.5; }
.rbody { fill: var(--panel); stroke: var(--accent); stroke-opacity: .8; stroke-width: 2; }
.rcore { fill: var(--accent); } .rcore2 { fill: var(--accent-ink); }
.rwire { stroke: var(--accent); stroke-width: 2; }
.rsignal { stroke: var(--accent); stroke-width: 2; fill: none; opacity: .85; }
.rglow { fill: var(--accent); opacity: .07; }
/* robot IDLE LIFE — breathe (whole body), blink (eyes), antenna sway (secondary motion). Flips "statue" -> "alive". */
.rbreathe { animation: breathe 4.6s ease-in-out infinite; }
.reyes { transform-box: fill-box; transform-origin: center; animation: blink 5.4s ease-in-out infinite; }
.rantenna { transform-box: fill-box; transform-origin: center bottom; animation: antennaWiggle 3.9s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.2px); } }
@keyframes blink { 0%,93%,100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }
@keyframes antennaWiggle { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* impact cues: a brief screen flash + a gentle shake on a big win (unit mastered) */
.flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 25; }
.flash.hit { animation: flash .2s ease-out; }
@keyframes flash { 0% { opacity: 0; } 18% { opacity: .26; } 100% { opacity: 0; } }
#screen-play.shake { animation: shake .42s ease-in-out; }
@keyframes shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-4px,2px); } 40% { transform: translate(4px,-2px); } 60% { transform: translate(-3px,1px); } 80% { transform: translate(3px,-1px); } }
.particle { position: fixed; border-radius: 2px; pointer-events: none; z-index: 30; will-change: transform, opacity; }
.fb-card { animation: cardIn .34s cubic-bezier(.2,1.5,.4,1); }  /* reward/tutor card springs in (easeOutBack) */
@keyframes cardIn { 0% { transform: scale(.82); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rpart { transition: none; } .rpart.just { animation: none; }
  .rbreathe, .reyes, .rantenna { animation: none; }
  .flash.hit, #screen-play.shake { animation: none; }
  .fb-card { animation: none; }
}

/* gate banner (back-off message) */
.gate-banner { background: #3a2c14; color: var(--wrong); border: 2px solid var(--wrong); border-radius: 12px; padding: 12px 16px; font-weight: 600; }

/* feedback / tutor */
.feedback { position: fixed; inset: 0; background: #04070fdd; display: grid; place-items: center; padding: 24px; z-index: 20; }
.fb-card { background: var(--panel); border-radius: 18px; padding: 28px; width: min(560px, 100%); text-align: center; }
.fb-icon { font-size: 54px; line-height: 1; margin-bottom: 8px; }
.feedback.correct .fb-icon { color: var(--accent); } .feedback.corrective .fb-icon { color: var(--wrong); }
.fb-body { color: var(--muted); font-size: 1.02rem; }
.fb-answer { margin: 14px 0; padding: 12px; background: var(--bg); border-radius: 10px; font-size: .95rem; }
.fb-answer .right { color: var(--accent); font-weight: 700; }
.fb-hintmore { color: var(--muted); font-size: .85rem; opacity: .8; margin: 8px 0 2px; }
.fb-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 16px; }

/* dashboard */
.dash { padding: 20px; max-width: 860px; margin: 0 auto; width: 100%; }
.dash-band { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.db-box { background: var(--panel); border-radius: 10px; padding: 10px 14px; min-width: 84px; text-align: center; }
.db-box b { display: block; font-size: 1.5rem; color: var(--ink); }
.db-box span { color: var(--muted); font-size: .8em; }
.db-timeline { margin: 4px 0 8px; }
.dash-subject { margin: 18px 0 8px; font-size: 1.1rem; color: var(--accent); }
.unit-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 11px 12px; background: var(--panel); border-radius: 10px; margin: 7px 0; }
.unit-row .meta { color: var(--muted); font-size: .85em; }
.pill { font-size: .78em; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: capitalize; }
.pill.mastered { background: #0a7d5133; color: var(--accent); }
.pill.placed { background: #1565c033; color: #7fb0ee; }
.pill.working { background: #b06a0033; color: var(--wrong); }
.pill.not-yet { background: #ffffff12; color: var(--muted); }
.pl-summary { text-align: left; margin: 12px 0 18px; display: flex; flex-direction: column; gap: 8px; }
.pl-line { background: var(--panel); border-radius: 10px; padding: 11px 13px; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.small { font-size: .85em; } .muted { color: var(--muted); }

.topbar-right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* Phones: the top row (Home + name/coins/mood/dashboard) won't fit 375px, so let the unit label drop to its own
   line instead of forcing the whole page to scroll sideways. */
@media (max-width: 430px) {
  .topbar { flex-wrap: wrap; gap: 4px 6px; padding: 10px 12px; }
  .unit-label { order: 3; flex: 1 0 100%; text-align: left; margin-top: 2px; }
}
.who-pick { display: flex; gap: 8px; align-items: center; margin: -2px 0 8px; flex-wrap: wrap; }
.who-tag { font-size: .85rem; color: var(--ink); font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #ffffff14; }
.fluency-watch { background: #ffffff0a; border: 1px solid #ffffff1f; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.fw-title { font-weight: 700; margin-bottom: 6px; }
.fw-row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 4px 0; border-top: 1px solid #ffffff12; }

/* ----- My Buddy customizer ----- */
.buddy-studio { flex: 1; display: flex; gap: 26px; align-items: center; justify-content: center; padding: 24px; flex-wrap: wrap; }
.buddy-preview { width: min(46vw, 240px); height: min(56vw, 300px); background: #ffffff08; border: 1px solid #ffffff1a; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.buddy-preview svg { width: 74%; height: 92%; }
.buddy-fig { animation: breathe 4.6s ease-in-out infinite; transform-box: view-box; }
.buddy-controls { display: flex; flex-direction: column; gap: 10px; min-width: 260px; max-width: 360px; }
.buddy-label { font-weight: 700; color: var(--muted); margin-top: 8px; }
.swatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; }
.swatch.sel { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 7px 15px; border-radius: 999px; background: var(--panel); border: 1px solid #2a3b5e; color: var(--ink); cursor: pointer; font-weight: 600; }
.chip.sel { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* "pick a starting look" gallery — a row of tappable mini buddies (the Xbox starting-point idea) */
.starter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.starter { width: 58px; height: 58px; border-radius: 14px; border: 2px solid #2a3b5e; background: #ffffff10; cursor: pointer; padding: 3px; overflow: hidden; }
.starter.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.starter-fig { width: 100%; height: 100%; }
.starter-fig svg { width: 100%; height: 100%; }
.start-buddy { width: 96px; height: 118px; margin: 0 auto 6px; }
/* the buddy riding along in the play screen — a corner companion that reacts, never blocks a tap */
.play-buddy { position: absolute; left: 8px; bottom: 8px; width: 64px; height: 80px; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 3px 5px #0006); transition: transform .18s ease; transform-origin: bottom center; }
.play-buddy svg { width: 100%; height: 100%; }
.play-buddy.react-pop { animation: buddyPop .55s cubic-bezier(.3,1.4,.5,1); }
.play-buddy.react-think { animation: buddyThink .7s ease-in-out; }
@keyframes buddyPop { 0%{transform:scale(1)} 30%{transform:scale(1.22) translateY(-4px)} 60%{transform:scale(.96)} 100%{transform:scale(1)} }
@keyframes buddyThink { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-6deg)} 65%{transform:rotate(4deg)} }
@media (min-width: 620px) { .play-buddy { width: 82px; height: 104px; left: 14px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .play-buddy.react-pop, .play-buddy.react-think { animation: none; } }
@media (prefers-reduced-motion: reduce) { .buddy-fig { animation: none; } }

/* build meter (the BUILD layer — your creation grows as you master units) */
.build-meter { background: var(--panel); border-radius: 14px; padding: 16px 18px; margin-top: 8px; }
.build-top { display: flex; justify-content: space-between; align-items: baseline; }
.build-top #build-name { font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.build-bar { height: 12px; background: #ffffff14; border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.build-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .5s ease; }

/* discoveries collection */
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; margin-top: 16px; }
/* Trophy Case */
.troph-head { margin: 18px 0 4px; font-size: 1.05rem; color: var(--accent); }
.troph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.troph-card { background: var(--panel); border: 1px solid #ffffff14; border-radius: 14px; padding: 14px 10px; text-align: center; }
.troph-card.won { border-color: #e0a92e66; background: linear-gradient(180deg, #e0a92e18, var(--panel)); box-shadow: 0 0 0 1px #e0a92e33, 0 6px 18px #0004; }
.troph-card.locked { opacity: .62; }
.troph-icon { font-size: 2rem; line-height: 1.1; }
.troph-card.locked .troph-icon { filter: grayscale(1); opacity: .7; }
.troph-name { font-weight: 800; margin-top: 4px; font-size: .95rem; }
.troph-card.won .troph-name { color: #ffd76a; }
.troph-desc { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.troph-card.won .troph-desc { color: #9fe0b8; font-weight: 700; }
.troph-prog { margin-top: 6px; font-weight: 800; font-size: .82rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.troph-card.crown { border-width: 2px; }
.troph-card.crown.won { border-color: #ffd76a; background: linear-gradient(180deg, #ffd76a22, var(--panel)); box-shadow: 0 0 0 1px #ffd76a55, 0 8px 22px #0005; }
.troph-card.crown.ready { border-color: var(--accent); background: linear-gradient(180deg, var(--accent)14, var(--panel)); }
.troph-card.crown.ready .troph-desc { color: var(--accent); font-weight: 700; }
.troph-card.crown .btn.tiny { margin-top: 8px; width: 100%; }
.disc-card { background: var(--panel); border: 2px solid #2a3b5e; border-radius: 14px; padding: 18px 12px; text-align: center; }
.disc-card.collected { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) inset; }
.disc-card.detected { border-color: #37476b; }
.disc-card.locked { border-color: #24334f; opacity: .8; }
.disc-icon { font-size: 46px; line-height: 1; }
.disc-icon.sil { filter: grayscale(1) brightness(0) invert(1) opacity(.28); }   /* pale ghost silhouette — teases the reward */
.disc-slot { font-size: 30px; font-weight: 800; color: #3a4a6e; line-height: 1.4; }
.disc-name { margin-top: 8px; font-weight: 600; } .disc-card.detected .disc-name, .disc-card.locked .disc-name { color: var(--muted); }
.disc-sub { font-size: .78em; color: var(--muted); margin-top: 3px; }
.disc-card.collected .disc-sub { color: var(--accent); font-weight: 700; }

/* ----- coins (earn-as-you-learn) ----- */
.coin-chip { font-size: .85rem; font-weight: 800; color: #ffcf5c; padding: 2px 10px; border-radius: 999px;
  background: #ffcf5c1f; border: 1px solid #ffcf5c40; white-space: nowrap; }
.start-coins { text-align: center; color: #ffcf5c; font-weight: 700; margin: 0 auto 8px; }
/* a hat you haven't bought yet: shown locked in the buddy studio, click routes to the shop */
.chip.locked { background: #ffffff08; border-style: dashed; border-color: #3a4a6e; color: var(--muted); font-weight: 600; }
.coin-float { position: fixed; z-index: 60; transform: translate(-50%, -50%); font-weight: 900; font-size: 1.15rem;
  color: #ffcf5c; text-shadow: 0 1px 3px #000a; pointer-events: none;
  animation: coinrise 1.1s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes coinrise { 0% { opacity: 0; transform: translate(-50%,-40%) scale(.7); }
  20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-150%) scale(1.1); } }

/* ----- shop (spend earned coins) ----- */
.shop { flex: 1; padding: 18px 20px; overflow-y: auto; }
.shop-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.shop-preview { width: 92px; height: 116px; flex: none; background: #ffffff08; border: 1px solid #ffffff1a; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.shop-preview svg { width: 80%; height: 92%; }
.shop-top p { flex: 1; min-width: 220px; margin: 0; }
.shop-msg { background: #ffcf5c14; border: 1px solid #ffcf5c33; border-radius: 10px; padding: 9px 12px; font-weight: 600; margin: 6px 0 14px; }
.shop-cat-head { font-weight: 800; font-size: 1.05rem; margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #ffffff14; }
.shop-cat-head:first-child { margin-top: 0; }
.shop-grid-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.shop-card { background: var(--panel); border: 2px solid #2a3b5e; border-radius: 14px; padding: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.shop-card.affordable { border-color: #ffcf5c66; }
.shop-card.owned { border-color: var(--accent); }
.shop-card.saving { opacity: .82; }
.shop-item-fig { width: 66px; height: 84px; }
.shop-item-fig svg { width: 100%; height: 100%; }
.shop-item-name { font-weight: 700; }
.shop-item-foot { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: auto; }
.shop-price { font-weight: 800; color: #ffcf5c; }
.owned-tag { color: var(--accent); font-weight: 700; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .coin-float { animation: none; } }

/* ----- bank (checking + savings goals + statement) ----- */
.bank { flex: 1; padding: 18px 20px; overflow-y: auto; }
.bank-accounts { display: flex; gap: 14px; flex-wrap: wrap; }
.acct { flex: 1; min-width: 150px; background: var(--panel); border: 1px solid #ffffff1a; border-radius: 14px; padding: 12px 16px; }
.acct-label { color: var(--muted); font-size: .85rem; }
.acct-amt { font-size: 1.5rem; font-weight: 800; color: #ffcf5c; margin-top: 2px; }
.bank-newgoal { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 16px; }
.bank-newgoal input, .bank-newgoal select { padding: 9px 12px; border-radius: 10px; background: #0e1726; border: 1px solid #2a3b5e; color: var(--ink); font: inherit; }
.bank-newgoal #goal-name { flex: 2; min-width: 160px; }
.bank-newgoal #goal-item { flex: 1; min-width: 150px; }
.bank-newgoal #goal-target { width: 130px; }
.bank-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.goal-card { background: var(--panel); border: 2px solid #2a3b5e; border-radius: 14px; padding: 12px 14px; }
.goal-card.funded { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) inset; }
.goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.goal-name { font-weight: 700; }
.goal-nums { color: #ffcf5c; font-weight: 700; white-space: nowrap; }
.goal-bar { height: 12px; background: #ffffff14; border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.goal-fill { height: 100%; width: 0; background: #ffcf5c; border-radius: 999px; transition: width .4s ease; }
.goal-card.funded .goal-fill { background: var(--accent); }
.goal-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.bank-statement { margin-top: 20px; }
.stmt-title { font-weight: 800; font-size: 1.05rem; border-bottom: 1px solid #ffffff14; padding-bottom: 4px; margin-bottom: 8px; }
.owned-line { padding: 3px 0; font-size: .92rem; }
.owned-cat { color: var(--muted); font-weight: 700; }

/* speech practice / mouth mirror */
.practice { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 20px; }
.consent-card { background: var(--panel); border-radius: 16px; padding: 26px; width: min(520px, 100%); text-align: center; }
.consent-card h2 { margin-top: 0; }
.cam-indicator { color: #ff6b6b; font-size: .8em; font-weight: 700; }
.mirror { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: min(760px, 100%); align-items: center; }
.mirror-target { text-align: center; }
.target-shape { font-size: clamp(56px, 12vw, 104px); line-height: 1.1; color: var(--accent); font-weight: 800; }
.target-hint { font-size: 1.2rem; margin-top: 8px; }
/* Frame the camera as a portrait FACE close-up (crops the room out), not the whole landscape shot. overflow:hidden on the
   frame clips the zoomed video; object-fit:cover fills without distortion; scaleX(-1) keeps it a natural mirror. */
.cam-frame { width: 100%; max-width: 260px; aspect-ratio: 3 / 4; margin: 0 auto; overflow: hidden;
  border-radius: 12px; border: 3px solid #2a3b5e; background: #000; }
.cam-preview { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1) scale(1.2); transform-origin: center 40%; display: block; }
.mirror-live { text-align: center; } .live-read { margin-top: 8px; color: var(--muted); }
.live-read b { color: var(--ink); }
.match-badge { margin-top: 10px; color: var(--accent); font-weight: 800; font-size: 1.3rem; }
.mirror-controls { grid-column: 1 / -1; display: flex; gap: 12px; justify-content: center; margin-top: 8px; }

@media (max-width: 640px) { .mirror { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .options { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .option.pop, .streak.bump { animation: none; }
  .reward-burst { animation: none; opacity: 1; }  /* still shows briefly, just doesn't fly */
}

/* dashboard: decision rules block (2026-09-14) — what the data says to do next, above the unit rows */
.dash-decisions { margin: 14px 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.dz-row { padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .95rem; }
.dz-row:first-of-type { border-top: 0; }
.dz-row.change-instruction b { color: var(--wrong); }
.dz-row.advance b { color: var(--accent); }
.dash-storage { margin: 10px 0 0; font-size: .85rem; color: var(--muted); }
.dash-storage.warn { color: var(--wrong); }

.bank-fact { margin: 10px 0 4px; background: var(--panel); border: 1px solid #ffffff1a; border-left: 4px solid var(--accent, #7bd88f); border-radius: 12px; padding: 10px 14px; font-size: .92rem; line-height: 1.4; }
.bank-fact b { color: var(--accent, #7bd88f); }

/* Session progress toward mastering the current unit (beta feedback: "a progress bar might be good"). Driven by
   res.unit_rate; fills toward the 80% mastery bar. Purely motivational — never gates anything. */
.unit-progress { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; }
.unit-progress .up-track { flex: 1; height: 8px; border-radius: 6px; background: #ffffff22; overflow: hidden; }
.unit-progress #up-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 6px; transition: width .5s ease; }
.unit-progress .up-text { font-size: .8rem; color: var(--muted); min-width: 84px; text-align: right; }
@media (prefers-reduced-motion: reduce) { .unit-progress #up-fill { transition: none; } }

/* First-run guided intro overlay (beta feedback: "could use a guided introduction"). One-time, dismissible. */
.intro-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #0009; backdrop-filter: blur(3px); padding: 20px; }
.intro-card { background: var(--panel); border: 1px solid #ffffff1a; border-radius: 18px; padding: 24px 26px; max-width: 480px; width: 100%; box-shadow: 0 12px 48px #0008; }
.intro-card h2 { margin: 0 0 12px; }
.intro-card ul { margin: 0 0 18px; padding-left: 20px; text-align: left; }
.intro-card li { margin: 9px 0; line-height: 1.5; }

/* Buddy Share (v1) — same-device board: kids see each other's progress + cheer each other on. Fully local. */
.bs-together { background: #ffffff10; border: 1px solid #ffffff1a; border-radius: 12px; padding: 12px 16px; margin: 8px 0 14px; text-align: center; }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.bs-card { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 2px solid #2a3b5e; border-radius: 14px; padding: 12px 14px; }
.bs-card.me { border-color: var(--accent); }
.bs-av { flex: 0 0 64px; width: 64px; height: 80px; background: #ffffff08; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.bs-av svg { width: 90%; height: 92%; }
.bs-name { font-weight: 700; }
.bs-stats { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; color: var(--muted); margin-top: 3px; }

/* Buddy Share v2 — export/import a buddy card (local, privacy-safe summary only). */
.bs-actions { display: flex; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.bs-panel { background: #ffffff0d; border: 1px solid #ffffff1a; border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.bs-code { width: 100%; font-family: ui-monospace, monospace; font-size: .8rem; background: var(--bg); color: var(--ink); border: 1px solid #2a3b5e; border-radius: 8px; padding: 8px; resize: vertical; }
.bs-card.friend { border-style: dashed; }
.bs-rm { margin-left: auto; align-self: flex-start; background: transparent; color: var(--muted); }

/* ---------- REVIEW mode + the Coach (js/review_coach.js, 2026-09-25). Distinct at a glance: amber frame, the world
   dims to a calm backdrop, the kid's buddy steps aside, and the Coach points at the question and reacts. ---------- */
#screen-play.review-mode { box-shadow: inset 0 0 0 4px #f2b33d; }
#screen-play.review-mode .scene { opacity: .18; filter: saturate(.4) blur(2px); }
#screen-play.review-mode .play-buddy { display: none; }
#screen-play.review-mode .play-coach { display: none; }
.review-coach { width: 100%; max-width: 800px; margin: 0 auto 10px; }
.rc-ribbon { display: inline-block; background: #f2b33d; color: #2a1c00; font-weight: 800; font-size: .8rem; letter-spacing: .06em;
  padding: 3px 12px; border-radius: 999px; margin-bottom: 6px; }
.rc-row { display: flex; align-items: flex-end; gap: 10px; }
.rc-fig { width: 104px; height: 112px; flex: none; overflow: hidden; border-radius: 0 0 12px 12px; border-bottom: 3px solid #f2b33d; }
.review-coach { text-align: left; }
.rc-fig svg { width: 100%; height: 100%; }
.rc-bubble { position: relative; background: #fff8e6; color: #2a1c00; border: 2px solid #f2b33d; border-radius: 14px; padding: 8px 12px;
  font-size: 1.02rem; line-height: 1.35; flex: 1; margin-bottom: 18px; }
.rc-bubble b { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #9a6400; }
.rc-bubble::before { content: ""; position: absolute; left: -10px; bottom: 14px; border: 8px solid transparent; border-right-color: #f2b33d; border-left: 0; }
.rc-point { font-size: 2rem; color: #f2b33d; transform: rotate(60deg); margin-bottom: -6px; animation: rcPoint 1.2s ease-in-out infinite; }
@keyframes rcPoint { 50% { transform: rotate(60deg) translate(4px, 0); } }
.review-coach.rc-pop .rc-fig { animation: buddyPop .55s cubic-bezier(.3,1.4,.5,1); }
.review-coach.rc-think .rc-fig { animation: buddyThink .7s ease-in-out; }
.prompt.coach-point { animation: coachPoint 1.4s ease-out; border-radius: 12px; }
@keyframes coachPoint { 0%, 60% { box-shadow: 0 0 0 3px #f2b33d, 0 0 24px rgba(242,179,61,.5); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .rc-point, .prompt.coach-point, .review-coach .rc-fig { animation: none !important; } }

/* ---------- BUDDY ROOM (js/buddy_room.js) ---------- */
.room-main { max-width: 980px; margin: 0 auto; padding: 10px 16px 30px; }
.room { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #3b3552; }
.room-wall { position: absolute; inset: 0 0 32% 0; background: linear-gradient(#4a5a8a, #5d6ea0); }
.room-window { position: absolute; left: 44%; top: 10%; width: 16%; height: 42%; border: 6px solid #e9e1d0; border-radius: 6px;
  background: linear-gradient(#8fd0ff, #d8f1ff); box-shadow: inset 0 0 0 2px #c9bfa8; }
.room-window::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 4px solid #e9e1d0; }
.room-floor { position: absolute; inset: 68% 0 0 0; background: repeating-linear-gradient(90deg, #8a5a34 0 70px, #7c502e 70px 72px); }
.room-rug { position: absolute; left: 30%; right: 30%; bottom: 4%; height: 18%; border-radius: 50%; background: radial-gradient(#c8574b, #9c3a32); opacity: .9; }
.room-tank, .shelf-model { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.room-tank { position: absolute; left: 4%; bottom: 14%; width: 36%; height: 56%; }
.room-tank:hover .tank-glass, .room-tank:focus-visible .tank-glass { box-shadow: 0 0 0 4px var(--focus, #ffd166); }
.tank-glass { position: absolute; left: 0; right: 0; top: 0; bottom: 22%; border: 5px solid #2b2f3a; border-radius: 6px; overflow: hidden; }
.tank-water { position: absolute; inset: 0; background: linear-gradient(#5fc6e8, #1f6f9c); }
.tank-sand { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(#f0dca6, #cdb57a); }
.tank-plant { position: absolute; bottom: 8%; width: 7%; height: 46%; border-radius: 50% 50% 0 0; background: linear-gradient(#4fbf6a, #237a3a); }
.tank-plant.p1 { left: 8%; } .tank-plant.p2 { right: 12%; height: 34%; } .tank-plant.p3 { left: 46%; height: 26%; }
.tank-fish { position: absolute; inset: 4% 2% 16% 2%; }
.swimmer { position: absolute; cursor: pointer; }
.swimmer svg { display: block; width: 100%; height: auto; }
.tank-stand { position: absolute; left: 6%; right: 6%; bottom: 0; height: 22%; background: linear-gradient(#4a3526, #33241a); border-radius: 0 0 6px 6px; }
.room-tag { position: absolute; left: 50%; white-space: nowrap; background: rgba(0,0,0,.55); color: #fff; font-size: .8rem; padding: 2px 10px;
  border-radius: 999px; transform: translateX(-50%); }
.room-tank .room-tag { bottom: 4%; }
.room-shelf { position: absolute; right: 4%; top: 22%; width: 34%; height: 26%; }
.shelf-plank { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(#b07a48, #7e5230); border-radius: 3px;
  box-shadow: 0 6px 8px rgba(0,0,0,.3); }
.shelf-model { position: absolute; bottom: 11%; width: 48%; transition: transform .15s; }
.shelf-model svg { display: block; width: 100%; height: auto; }
.shelf-model.trex { left: 0; } .shelf-model.trike { right: 0; }
.shelf-model:hover, .shelf-model:focus-visible { transform: translateY(-4px) scale(1.04); outline: none; }
.shelf-tag { bottom: -26%; }
.room-buddy { position: absolute; left: 41%; bottom: 0; width: 22%; height: 46%; overflow: hidden; pointer-events: none; }
.room-buddy svg { filter: drop-shadow(0 -2px 6px #0005); }
.room-buddy svg { width: 100%; height: 100%; }
.room-note { text-align: center; margin-top: 10px; }
.aquarium { position: relative; height: min(52vh, 420px); border-radius: 16px; overflow: hidden; border: 6px solid #2b2f3a; }
.aq-rays { position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(255,255,255,.07) 0 30px, transparent 30px 90px); }
.aq-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #fff; font-weight: 600; }
.aq-fact { display: flex; gap: 14px; align-items: center; background: var(--panel); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
.aq-fact p { margin: 4px 0 0; }
.aq-fact-pic { flex: none; width: 150px; }
.aq-h { margin: 16px 0 8px; font-size: 1.05rem; }
.aq-grid, .drawer { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.aq-card, .drawer-slot { background: var(--panel); border: 2px solid transparent; border-radius: 12px; padding: 8px; text-align: center; color: inherit; font: inherit; }
.aq-card.got { cursor: pointer; }
.aq-card.got:hover, .aq-card.got:focus-visible { border-color: var(--accent); }
.aq-pic { height: 70px; display: flex; align-items: center; justify-content: center; }
.aq-pic svg { max-width: 100%; max-height: 70px; }
.aq-card.locked .aq-pic svg, .drawer-slot:not(.got) svg { filter: brightness(0); opacity: .28; }
.aq-name { font-weight: 700; font-size: .9rem; margin-top: 4px; }
.aq-sub { font-size: .75rem; color: var(--muted); }
.museum { position: relative; height: 300px; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: radial-gradient(ellipse at 50% 20%, #54607e, #262c3d 70%) , #262c3d; }
.museum::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 22%; background: linear-gradient(#5b4a36, #3a2f22); border-radius: 50% 50% 0 0 / 30% 30% 0 0; }
.museum-host { position: absolute; left: 22%; right: 22%; bottom: 8%; height: 600px; z-index: 1; transform: scale(1.3); transform-origin: 50% 100%; }
.museum-plaque, .museum-say { z-index: 2; }
.museum-plaque { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: #3a2f22; color: #f1e6cc;
  font-size: .8rem; padding: 3px 12px; border-radius: 6px; white-space: nowrap; }
.museum-say { position: absolute; left: 12px; right: 12px; top: 10px; background: #fff; color: #222; border-radius: 12px; padding: 8px 12px; font-weight: 600; }
.museum.roar { animation: buddyPop .5s ease-out; }
.dig-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.dig-head h3 { margin: 0; }
.dig { position: relative; display: grid; max-width: 640px; margin-left: auto; margin-right: auto; grid-template-columns: repeat(var(--cols), 1fr); aspect-ratio: 8 / 5; margin-top: 8px;
  border-radius: 12px; overflow: hidden; background: repeating-linear-gradient(45deg, #9b8a70 0 8px, #93826a 8px 16px); }
.dig-fossil { position: absolute; pointer-events: none; padding: 4px; box-sizing: border-box; }
.dig-cell { position: relative; z-index: 1; border: 0; margin: 0; cursor: pointer; transition: background .15s; }
.dig-cell.l2 { background: #e2c98f; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.dig-cell.l1 { background: #b89a62; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.dig-cell.l0 { background: transparent; box-shadow: none; cursor: default; }
.dig.dig-done .dig-fossil { filter: drop-shadow(0 0 8px #ffd166); }
.dig-msg { min-height: 1.4em; margin: 8px 0; }
.dig-msg .btn { margin-left: 8px; }
.drawer-slot svg { height: 60px; width: 100%; }

/* ---- Rest Area (2026-09-27) ---- */
.btn.rest-ready { background:#ffd166; color:#141b2d; font-weight:800; animation: restPulse 1.6s ease-in-out infinite; }
@keyframes restPulse { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .btn.rest-ready { animation: none; } }
.rest-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 16px; }
.rest-bonus { font-size:1.15rem; font-weight:800; text-align:center; margin:0; min-height:1.5em; }
.rest-canvas { width:min(96vw, 960px); aspect-ratio:16/9; image-rendering:pixelated; border-radius:14px; background:#141b2d; touch-action:none; }
.rest-help { opacity:.8; text-align:center; margin:0; }
.rest-gate { position:fixed; inset:0; background:rgba(8,12,24,.72); display:grid; place-items:center; z-index:50; }
.rest-gate[hidden] { display:none; }
.rest-gate-box { background:#1b2338; color:#fff4dc; border-radius:18px; padding:22px 26px; text-align:center; max-width:92vw; }
.rest-gate-box .q { font-size:2rem; font-weight:800; margin:6px 0 16px; }
.rest-gate-box .opts { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rest-gate-box button { font:700 1.3rem system-ui; padding:14px 22px; border-radius:12px; border:0; background:#ffd166; color:#141b2d; cursor:pointer; }
.rest-gate-box button:focus-visible { outline:4px solid #fff; outline-offset:2px; }

/* Beta Guide link on the start screen: lime so it reads on the dark card (the parent 09-27: dark blue was unreadable) */
.beta-note a { color: #a3e635; font-weight: 700; }
.beta-note a:visited { color: #a3e635; }
.beta-note a:hover, .beta-note a:focus-visible { color: #d9f99d; }