/* Money, Explained: playful storybook look. One stylesheet, mobile-first. */
:root {
  --bg:#FFF7EA; --card:#FFFFFF; --ink:#1F1A33; --soft:#544D6B; --muted:#8C86A0; --line:#EFE4D2;
  --accent:#FFC94A; --accent-deep:#E49B00; --tint:#FFF0C7;
  --good:#1FA971; --good-soft:#DDF6EA; --bad:#E5533D; --bad-soft:#FDE3DE;
  --shadow:0 10px 30px rgba(31,26,51,.10); --shadow-sm:0 3px 0 rgba(31,26,51,.12);
  --font-head:'Fredoka', system-ui, sans-serif; --font-ui:'Nunito', system-ui, sans-serif;
  --top-h:58px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#15121F; --card:#211C30; --ink:#F6F1FF; --soft:#C9C1DD; --muted:#8F88A6; --line:#322A47;
  --tint:#3A3020; --good-soft:#163A2C; --bad-soft:#3E1F1B; --shadow:0 10px 30px rgba(0,0,0,.45); --shadow-sm:0 3px 0 rgba(0,0,0,.5);
} }
/* Chapter colours */
.theme-sun   { --accent:#FFC94A; --accent-deep:#E49B00; --tint:#FFF0C7; --accent-text:#8A5600; }
.theme-coral { --accent:#FF8A6B; --accent-deep:#E5533D; --tint:#FFE4DC; --accent-text:#A8321D; }
.theme-mint  { --accent:#4FD6A4; --accent-deep:#1FA971; --tint:#DBF7EC; --accent-text:#0E6B47; }
.theme-sky   { --accent:#6BB8FF; --accent-deep:#2F86E0; --tint:#DEEFFF; --accent-text:#1A5A9E; }
.theme-grape { --accent:#A98BFF; --accent-deep:#7655E8; --tint:#ECE5FF; --accent-text:#5634C4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-sun, :root:not([data-theme="light"]) .theme-coral,
  :root:not([data-theme="light"]) .theme-mint, :root:not([data-theme="light"]) .theme-sky, :root:not([data-theme="light"]) .theme-grape {
  --tint: color-mix(in srgb, var(--accent) 16%, #211C30); --accent-text: var(--accent); } }

* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* regression: 2026-10-21-hidden-buttons (expert-panel pass 2, ux-lens UX2) */
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:500 18px/1.5 var(--font-ui); }
a { color:var(--accent-text, #8A5600); font-weight:700; }
h1, h2, h3 { font-family:var(--font-head); line-height:1.1; margin:0 0 .4em; font-weight:700; }
h1 { font-size:clamp(2.1rem, 7vw, 3.6rem); letter-spacing:-.01em; }
h2 { font-size:1.5rem; }
h3 { font-size:1.15rem; margin-top:1.2em; }
p { margin:0 0 .7em; }
strong { font-weight:800; }
.wrap { max-width:760px; margin:0 auto; padding:0 16px; }
.muted { color:var(--muted); }
.tiny { font-size:.78rem; }
button { font:inherit; color:inherit; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4em; background:var(--ink); color:var(--bg); border:0; text-decoration:none; font:700 1.05rem var(--font-head);
  padding:.75em 1.4em; border-radius:999px; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .12s; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.35; cursor:default; transform:none; }
.btn-big { font-size:1.15rem; padding:.8em 1.5em; background:var(--accent); color:#1F1A33; }
.btn-soft { display:inline-flex; align-items:center; gap:.35em; border:3px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px;
  padding:.5em 1em; font-weight:800; text-decoration:none; cursor:pointer; font-size:.95rem; }
.btn-soft:hover { border-color:var(--accent); }
.tag { font-size:.8rem; font-weight:800; padding:.25em .7em; border-radius:999px; background:var(--line); color:var(--soft); white-space:nowrap; }

/* Header */
.top { position:sticky; top:0; z-index:5; height:var(--top-h); background:var(--bg); background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); }
.top-in { display:flex; align-items:center; justify-content:space-between; height:100%; }
.brand { font:700 1.2rem var(--font-head); color:var(--ink); text-decoration:none; }
.kid-toggle { display:flex; align-items:center; gap:.45em; font-weight:800; font-size:.95rem; cursor:pointer; user-select:none;
  background:var(--card); padding:.35em .8em; border-radius:999px; box-shadow:var(--shadow-sm); }
.kid-toggle input { width:1.1em; height:1.1em; accent-color:var(--accent-deep); }

/* Home */
.hero { padding:28px 0 8px; overflow:hidden; }
.hero-in { display:grid; gap:12px; align-items:center; }
.kicker { font-weight:800; color:var(--accent-text); text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; }
.lead { font-size:1.15rem; color:var(--soft); max-width:34em; }
.hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
.hero-art { position:relative; height:220px; }
.hero-art span { position:absolute; font-size:56px; filter:drop-shadow(0 8px 10px rgba(0,0,0,.15)); animation:float 5s ease-in-out infinite; }
.hero-art .h-coin { font-size:120px; left:calc(50% - 60px); top:40px; animation-duration:6s; }
.h-a { left:8%; top:20px; animation-delay:-1s; } .h-b { right:10%; top:10px; animation-delay:-2s; }
.h-c { left:16%; bottom:6px; animation-delay:-3s; } .h-d { right:16%; bottom:0; animation-delay:-4s; }
@keyframes float { 50% { transform:translateY(-12px) rotate(-6deg); } }
@media (min-width:760px) { .hero-in { grid-template-columns:1.5fr 1fr; } .hero { padding:64px 0 24px; } .hero-art { height:320px; } }
.part { margin:28px 0 36px; }
.part-h { font-size:1.15rem; color:var(--soft); }
.part-h span { color:var(--accent-text); margin-right:.3em; }
.path { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.path li:nth-child(even) .stop { margin-left:28px; }
.stop { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--card); border-radius:22px; color:var(--ink);
  text-decoration:none; box-shadow:var(--shadow); font-weight:500; transition:transform .15s; }
a.stop:hover { transform:translateY(-3px) rotate(-.4deg); }
.node { flex:none; width:58px; height:58px; display:grid; place-items:center; font-size:30px; border-radius:50%;
  background:var(--tint); box-shadow:inset 0 -4px 0 rgba(0,0,0,.08); }
a.stop .node { background:var(--accent); }
.node-txt { display:flex; flex-direction:column; flex:1; line-height:1.3; }
.node-txt small { color:var(--muted); font-weight:800; }
.node-txt strong { font-family:var(--font-head); font-size:1.15rem; }
.node-txt span { color:var(--soft); font-size:.95rem; }
.stop.locked { opacity:.55; box-shadow:none; border:2px dashed var(--line); }
.stop-done { display:none; width:30px; height:30px; border-radius:50%; background:var(--good); color:#fff; place-items:center; font-weight:800; }
.stop.is-done .stop-done { display:grid; }

/* Chapter = one screen. regression: 2026-10-14-one-screen (NK: no scrolling inside a chapter) */
body.app { overflow:hidden; height:100vh; height:100dvh; }
.chapter-app { height:calc(100vh - var(--top-h)); height:calc(100dvh - var(--top-h)); display:flex; flex-direction:column; padding-bottom:max(10px, env(safe-area-inset-bottom)); }
.ch-bar { display:flex; align-items:center; gap:10px; width:100%; padding-top:2px; padding-bottom:6px; }
.ch-mini { flex:none; width:40px; height:40px; display:grid; place-items:center; font-size:22px; border-radius:50%; background:var(--accent); }
.ch-bar-txt { flex:1; min-width:0; line-height:1.15; }
.ch-bar-txt small { color:var(--muted); font-weight:800; font-size:.78rem; }
.ch-bar-txt h1 { font-size:clamp(1.1rem, 4.4vw, 1.5rem); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.watch-btn { flex:none; border:0; background:var(--card); box-shadow:var(--shadow-sm); border-radius:999px; padding:.45em .8em; font-weight:800; font-size:.85rem; cursor:pointer; }
@media (max-width:380px) { .watch-btn span { display:none; } }
.dots { display:flex; gap:4px; justify-content:center; width:100%; margin-bottom:8px; }
.dots i { flex:1; max-width:26px; height:7px; border-radius:4px; background:color-mix(in srgb, var(--ink) 14%, transparent); transition:background .2s; }
.dots i.on { background:var(--accent-deep); }
.stage { flex:1; min-height:0; width:100%; display:flex; }
.tile { position:relative; flex:1; min-height:0; background:var(--card); border-radius:26px; padding:clamp(14px, 3vh, 28px) 18px; text-align:center;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:2px; box-shadow:var(--shadow); overflow:auto; }
.tile::before, .tile::after { content:""; flex:1 0 0; }   /* regression: 2026-10-14-tile-crop */
.js .tile { display:none; }
.js .tile.active { display:flex; animation:in .3s ease-out; }
.stage { gap:12px; flex-direction:column; }
.js .stage { flex-direction:row; }
@keyframes in { from { opacity:0; transform:translateX(16px) scale(.98); } }
.story-nav { display:none; justify-content:space-between; align-items:center; gap:12px; width:100%; padding-top:10px; }
.js .story-nav { display:flex; }
.back { flex:none; width:50px; height:50px; border-radius:50%; border:0; background:var(--card); box-shadow:var(--shadow-sm); cursor:pointer; font-size:20px; }
.back:disabled { opacity:.3; }
.next { flex:1; background:var(--accent); color:#1F1A33; font-size:1.15rem; padding:.75em 1.2em; }
.next[hidden] { display:none; }
.next.wiggle { animation:wiggle .5s; }
@keyframes wiggle { 25% { transform:rotate(-3deg); } 75% { transform:rotate(3deg); } }

/* Tile content, sized to the screen height so it fits without scrolling */
.step-txt { font-size:clamp(1.1rem, 2.2vh + .55rem, 1.55rem); line-height:1.32; font-weight:700; max-width:24em; margin:0 auto .35em; }
.step-more, .deeper-txt { color:var(--soft); max-width:32em; font-size:clamp(.95rem, 1.6vh + .45rem, 1.1rem); }
.deeper-txt { text-align:left; color:var(--ink); }
.art { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:4px 0 12px; }
.sticker { display:grid; place-items:center; width:min(24vw, 13vh, 110px); height:min(24vw, 13vh, 110px); font-size:min(14vw, 7.6vh, 64px);
  background:var(--bg); border:4px solid #fff; border-radius:24px; box-shadow:var(--shadow); transform:rotate(calc((var(--i) - 1) * 5deg));
  animation:pop .45s cubic-bezier(.3,1.6,.6,1) both; animation-delay:calc(var(--i) * .12s); }
@keyframes pop { from { transform:scale(.3) rotate(-20deg); opacity:0; } }
.step-true .art { margin:2px 0 6px; }
.step-true .sticker { width:min(20vw, 10vh, 96px); height:min(20vw, 10vh, 96px); font-size:min(12vw, 6vh, 54px); }
.reveal-big { font:700 clamp(1.8rem, 4.5vh + .6rem, 2.8rem)/1.1 var(--font-head); color:var(--accent-text); margin:0 0 .4em; animation:pop .5s cubic-bezier(.3,1.6,.6,1) both; }
.step-reveal { background:linear-gradient(160deg, var(--card), var(--tint)); }
.ask { font-weight:800; color:var(--soft); margin:.3em 0 .5em; }
.choices { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.choice, .opt { border:3px solid var(--line); background:var(--bg); border-radius:18px; padding:.6em 1.1em; font-weight:800; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:transform .1s, border-color .1s; }
.choice:hover, .opt:hover:not(:disabled) { border-color:var(--accent); transform:translateY(-2px); }
.choice.picked { border-color:var(--accent-deep); background:var(--tint); }
.reply { font-weight:800; color:var(--good); margin-top:.6em; animation:in .3s; }
.badge { display:inline-block; background:var(--accent); color:var(--ink); font-weight:800; font-size:.85rem; padding:.3em .9em; border-radius:999px; margin-bottom:4px; }
.cliff-next { font:700 1.1rem var(--font-head); color:var(--accent-text); }
.src { font-size:.78rem; color:var(--muted); margin:4px 0 0; }
.say { position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:50%; border:0; background:var(--tint); cursor:pointer; font-size:18px; }
.say.speaking { background:var(--accent); animation:wiggle 1s infinite; }
.recap h2, .done-tile h2, .deeper-tile h2 { font-size:clamp(1.3rem, 3vh + .5rem, 1.8rem); }
.recap-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; width:100%; max-width:30em; }
.recap-list li { display:flex; align-items:center; gap:12px; font-weight:800; font-size:clamp(1rem, 1.8vh + .5rem, 1.15rem); background:var(--tint); border-radius:16px; padding:10px 14px; text-align:left; }
.recap-list span { font-size:30px; }
.q-count { font-weight:800; color:var(--muted); font-size:.9rem; margin-bottom:.4em; }
.q { border:0; padding:0; margin:0; width:100%; max-width:30em; }
.q legend { font:700 clamp(1.15rem, 2.4vh + .5rem, 1.5rem)/1.25 var(--font-head); margin:0 auto .7em; padding:0; }
.opt { display:block; width:100%; text-align:left; margin:0 0 8px; }
.opt.right { background:var(--good-soft); border-color:var(--good); }
.opt.wrong { background:var(--bad-soft); border-color:var(--bad); }
.opt:disabled { cursor:default; }
.why { background:var(--bg); border-radius:14px; padding:.6em 1em; font-weight:600; text-align:left; }
.verdict { font-weight:800; }
.done-badge { display:grid; place-items:center; width:min(26vw, 14vh); height:min(26vw, 14vh); font-size:min(14vw, 8vh); border-radius:50%; background:var(--accent); box-shadow:var(--shadow); margin-bottom:8px; animation:pop .6s both; }
.quiz-score { font:700 1.5rem var(--font-head); margin-bottom:.1em; }
.done-tile .tag { white-space:normal; }
.skip { flex:none; border:0; background:none; color:var(--soft); font-weight:800; text-decoration:underline; cursor:pointer; }
.skip[hidden] { display:none; }
.done-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:10px 0; }

/* Games */
.game { width:100%; }
.g-hold { font-weight:800; margin-bottom:8px; }
.g-hold .sticker { display:inline-grid; width:min(16vw, 8vh, 64px); height:min(16vw, 8vh, 64px); font-size:min(9vw, 5vh, 38px); vertical-align:middle; margin-left:8px; transform:none; animation:none; }
.g-kids { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.g-kid { border:3px solid var(--line); background:var(--bg); border-radius:18px; padding:8px 4px; cursor:pointer; box-shadow:var(--shadow-sm); }
.g-kid:hover { border-color:var(--accent); }
.g-kid.hint { border-color:var(--accent-deep); box-shadow:0 0 0 4px var(--tint); animation:wiggle .6s 2; }
.g-kid .face { font-size:min(9vw, 4.6vh, 34px); display:block; }
.g-kid strong { display:block; font-family:var(--font-head); }
.g-kid small { display:block; font-size:.82rem; color:var(--soft); font-weight:700; }
.g-kid.no { animation:shake .35s; border-color:var(--bad); }
.g-msg { min-height:2.6em; margin:8px 0 4px; font-weight:800; }
.g-tools { display:flex; gap:8px; justify-content:center; }
.g-tools button { border:2px solid var(--line); background:var(--card); border-radius:999px; padding:.3em .9em; font-weight:800; font-size:.9rem; cursor:pointer; }
.g-win { background:var(--good-soft); border-radius:18px; padding:14px; font-weight:700; animation:pop .4s both; }
@keyframes shake { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }

/* Graded quiz (house default #64) */
.gq { width:100%; max-width:30em; }
.gq-q { font:700 clamp(1.1rem, 2.3vh + .5rem, 1.45rem)/1.25 var(--font-head); margin:0 0 .6em; }
.gq-opts .opt { display:block; width:100%; text-align:left; margin:0 0 7px; }
.opt.tried { opacity:.45; text-decoration:line-through; cursor:not-allowed; box-shadow:none; }
.why.no { background:var(--bad-soft); }
.why.ok { background:var(--good-soft); }
.gq-hint-text { font-weight:700; color:var(--soft); margin:.3em 0; }
.gq-tools { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.gq-tools .btn { padding:.55em 1.1em; font-size:1rem; background:var(--accent); color:#1F1A33; }

/* More games */
.g-chips, .g-buckets { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px 0; }
.g-chip { border:2px solid var(--line); background:var(--bg); border-radius:999px; padding:.45em .9em; font-weight:800; cursor:pointer; }
.g-chip.sel { border-color:var(--accent-deep); background:var(--tint); box-shadow:0 0 0 3px var(--tint); }
.g-chip.no, .g-bucket.no { animation:shake .35s; border-color:var(--bad); }
.g-bucket { flex:1 1 30%; min-width:96px; border:3px dashed var(--line); background:var(--card); border-radius:16px; padding:10px 6px; font-weight:800; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; }
.g-bucket span { font-size:24px; } .g-bucket small { color:var(--muted); }
.g-buckets.g-b4 { display:grid; grid-template-columns:1fr 1fr; } .g-buckets.g-b4 .g-bucket { min-width:0; }
.g-bucket.hint { border-style:solid; border-color:var(--accent-deep); background:var(--tint); }
.g-chip.big { font-size:1.1rem; padding:.6em 1.2em; cursor:default; }
.g-seq { display:flex; flex-wrap:wrap; gap:4px 6px; justify-content:center; margin:4px 0; padding:0; }
.g-seq span { font-size:.82rem; font-weight:800; background:var(--good-soft); border-radius:999px; padding:.2em .6em; }
.more-btn { margin:2px auto 4px; }
/* Order and sort games stay inside one screen even with long card text (regression: 2026-10-14-one-screen) */
.game[data-game="order"] .g-chips { gap:5px; }
.game[data-game="order"] .g-chip { font-size:.86rem; padding:.32em .7em; text-align:left; line-height:1.25; }
.game[data-game="sort"] .g-bucket { flex-direction:row; justify-content:center; gap:6px; padding:8px 6px; font-size:.9rem; line-height:1.2; }
.game[data-game="sort"] .g-bucket span { font-size:20px; }
.game[data-game="sort"] .g-bucket small { margin-left:2px; }
.g-msg { min-height:2.2em; }
.tile.more-open .art { display:none; }
.g-big { font:700 1.15rem/1.3 var(--font-head); margin:.3em 0; }
.g-note, .g-count { color:var(--soft); font-size:.92rem; margin:.2em 0; }
.g-slider { display:block; font-weight:800; margin:6px 0; text-align:left; }
.g-slider input { width:100%; accent-color:var(--accent-deep); height:28px; }
.g-jar { width:70px; height:90px; margin:6px auto; border:4px solid var(--ink); border-top-width:8px; border-radius:10px 10px 18px 18px; position:relative; overflow:hidden; }
.g-jar i { position:absolute; left:0; right:0; bottom:0; background:var(--accent); transition:height .2s; }
.g-bar { height:18px; border-radius:9px; background:var(--line); overflow:hidden; margin:8px 0; }
.g-bar i { display:block; height:100%; background:var(--accent-deep); transition:width .2s; }
.g-line { display:flex; justify-content:center; gap:10px; font-size:clamp(28px, 6vh, 40px); }
.g-line span { opacity:.45; transition:opacity .2s, transform .2s; } .g-line span.on { opacity:1; transform:translateY(-4px); }
.g-table { margin:6px auto; border-collapse:collapse; font-weight:700; }
.g-table th, .g-table td { padding:2px 10px; border-bottom:1px solid var(--line); }
.g-books { display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:6px; }
.g-book { border:2px solid var(--line); border-radius:12px; padding:6px; background:var(--bg); font-weight:700; font-size:.9rem; }
.g-book small { display:block; color:var(--muted); } .g-book.mine { border-color:var(--accent-deep); }
.g-book.bad { border-color:var(--bad); background:var(--bad-soft); } .g-book.ok { border-color:var(--good); background:var(--good-soft); }
.g-mine { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.g-mine div { background:var(--bg); border-radius:12px; padding:8px; }
.g-num { display:block; font:700 1.6rem var(--font-head); }
.g-energy { font-weight:800; color:var(--soft); }
.g-card { background:var(--bg); border:2px solid var(--line); border-radius:16px; padding:12px 14px; font-weight:700; text-align:left; margin:6px 0; }

/* Video overlay + video page */
.overlay { position:fixed; inset:0; z-index:20; background:rgba(20,16,30,.72); display:grid; place-items:center; padding:16px; }
.overlay[hidden] { display:none; }
.overlay-in { position:relative; width:min(960px, 100%, calc((100vh - 40px) * 16 / 9)); }
.overlay-close { position:fixed; top:10px; right:10px; z-index:2; width:40px; height:40px; border-radius:50%; border:0; background:var(--card); font-size:18px; cursor:pointer; }
.video { position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#fbfbf7; box-shadow:var(--shadow-sm); }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.chapter { padding:20px 16px 40px; }
.ch-head { text-align:center; padding:12px 0 18px; }
.ch-emoji { display:inline-grid; place-items:center; width:84px; height:84px; font-size:46px; border-radius:50%; background:var(--accent); box-shadow:var(--shadow); margin-bottom:10px; }
.hook { font:600 clamp(1.25rem, 4.5vw, 1.6rem)/1.3 var(--font-head); color:var(--soft); }
.link-watch { display:inline-block; margin-top:4px; font-size:.95rem; }
.block { background:var(--card); border-radius:24px; padding:22px 20px; margin-top:20px; box-shadow:var(--shadow); }
.foot { padding:28px 0 44px; font-size:.9rem; color:var(--soft); }

@media (orientation: landscape) and (max-height: 520px) {
  :root { --top-h:44px; }
  .ch-bar { padding-bottom:2px; } .ch-mini { width:30px; height:30px; font-size:16px; } .ch-bar-txt small { display:none; }
  .dots { margin-bottom:4px; } .tile { padding:10px 14px; }
  .sticker { width:min(16vw, 15vh, 80px); height:min(16vw, 15vh, 80px); font-size:min(9vw, 9vh, 44px); }
  .art { margin:2px 0 6px; } .step-txt { font-size:clamp(1rem, 3.4vh + .3rem, 1.3rem); }
  .back { width:42px; height:42px; } .next { padding:.5em 1em; font-size:1rem; }
  .g-kids { gap:6px; } .g-kid { padding:4px 2px; } .g-kid .face { font-size:24px; }
}

/* For and against page */
.fa-cols { display:grid; gap:12px; }
@media (min-width:640px) { .fa-cols { grid-template-columns:1fr 1fr; } }
.fa-for, .fa-against { border-radius:16px; padding:12px 14px; }
.fa-for { background:var(--good-soft); } .fa-against { background:var(--bad-soft); }
.fa-for h3, .fa-against h3 { margin:0 0 .3em; font-size:1rem; }

.done-badge { width:min(22vw, 11vh); height:min(22vw, 11vh); font-size:min(12vw, 6.5vh); }
.done-tile h2 { margin-bottom:.15em; } .done-tile p { margin-bottom:.35em; } .done-actions { gap:8px; margin:6px 0; }
.done-actions .btn-big { font-size:1rem; padding:.7em 1.2em; }
@media (max-height: 700px) {
  .sticker { width:min(22vw, 11vh, 100px); height:min(22vw, 11vh, 100px); font-size:min(12vw, 6.4vh, 56px); border-width:3px; }
  .step-txt { font-size:clamp(1.02rem, 2.1vh + .5rem, 1.4rem); }
  .tile { padding:12px 14px; }
  .g-kid small { font-size:.76rem; }
  .sticker { width:min(20vw, 10vh, 92px); height:min(20vw, 10vh, 92px); font-size:min(11vw, 5.8vh, 50px); }
  .g-table { font-size:.85rem; } .g-table th, .g-table td { padding:1px 8px; }
  .g-line { font-size:28px; }
  .game[data-game="order"] .g-chip { font-size:.8rem; }
  .gq-q { font-size:1.08rem; } .gq-opts .opt { padding:.5em .9em; }
}

.tile.scrolls { -webkit-mask-image:linear-gradient(#000 85%, transparent); mask-image:linear-gradient(#000 85%, transparent); }
.tile.scrolls.at-end { -webkit-mask-image:none; mask-image:none; }
.scroll-cue { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-weight:800; font-size:.85rem; color:var(--soft); background:var(--tint); border-radius:999px; padding:.2em .8em; pointer-events:none; }

/* Pass 2 access fixes (2026-10-21): regression: 2026-10-21-game-button-contrast (access-lens A1 P0) */
.g-tools .btn { background:var(--accent); color:#1F1A33; border:0; }
.badge { color:#1F1A33; }
:root { --muted:#6E6886; }
.tiny.muted { color:var(--soft); }
.say { top:auto; bottom:10px; right:10px; width:36px; height:36px; font-size:16px; opacity:.9; }

/* Confetti */
.confetti { position:fixed; inset:0; pointer-events:none; z-index:50; overflow:hidden; }
.confetti i { position:absolute; top:-20px; width:10px; height:14px; border-radius:2px; animation:fall linear forwards; }
@keyframes fall { to { transform:translateY(110vh) rotate(720deg); } }

/* Kid mode: bigger text */
.kid body { font-size:19px; }
.kid .step-txt { font-size:clamp(1.25rem, 2.6vh + .6rem, 1.8rem); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* Pass 2 open items (2026-10-21): regression: 2026-10-21-contrast-2 (access A2), 2026-10-21-tiny-screens (access A5) */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:root { --edge:#9A876C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --edge:#7A6F96; } }
:root[data-theme="dark"] { --edge:#7A6F96; }
.choice, .opt, .g-chip, .g-kid, .g-tools button:not(.btn) { border-color:var(--edge); }
.reply { color:var(--good-text, #13774F); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .reply { color:#4FD6A4; } }
:root[data-theme="dark"] .reply { color:#4FD6A4; }
.g-chip.big { cursor:default; }
.g-table tr.me td { font-weight:800; background:var(--tint); }
@media (max-height: 600px) {
  .done-badge { width:min(18vw, 9vh); height:min(18vw, 9vh); font-size:min(10vw, 5vh); margin-bottom:2px; }
  .done-tile h2 { font-size:1.2rem; } .done-tile p { font-size:.92rem; margin-bottom:.25em; }
  .done-actions .btn-big { font-size:.92rem; padding:.55em 1em; }
}
/* Tiny or zoomed screens: let the page scroll instead of squeezing the tile. */
@media (max-height: 420px) and (orientation: portrait), (max-height: 300px) {
  body.app { overflow:auto; height:auto; }
  .stage, .tile { min-height:auto; }
  .tile { overflow:visible; }
}

/* Auto-fit (2026-10-23): app.js lowers --fit until the tile fits one screen. regression: 2026-10-23-fit-tile */
.tile > :not(.say):not(.scroll-cue) { zoom:var(--fit, 1); }

/* The read-aloud button gets its own strip at the bottom of every tile, so it never covers text.
   regression: 2026-10-23-say-overlap (verify X16 / access A3) */
.tile { padding-bottom:52px; }