* { box-sizing:border-box; }
:root {
  --ink:#17324d; --muted:#586a75; --teal:#087e78; --teal-dark:#075d58;
  --mint:#dff3ee; --paper:#fffefa; --canvas:#edf4f1; --line:#d8e4e2;
  --gold:#f2ad36; --gold-soft:#fff0cb; --coral:#dc6a4d; --navy:#17324d;
  --shadow:0 15px 40px rgba(23,50,77,.11); --radius:24px;
  --violet:#6969ba; --violet-dark:#41457f; --night:#12243a; --health:#e85f55;
}
html { min-height:100%; background:var(--canvas); }
body {
  margin:0; min-height:100vh; color:var(--ink);
  background:radial-gradient(circle at 10% -5%,rgba(242,173,54,.22),transparent 29rem),radial-gradient(circle at 100% 4%,rgba(8,126,120,.14),transparent 27rem),var(--canvas);
  font-family:ui-rounded,"Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.shell { width:min(720px,100%); margin:0 auto; padding:calc(15px + env(safe-area-inset-top)) 16px calc(42px + env(safe-area-inset-bottom)); }
.topbar { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; margin-bottom:24px; }
.title-lockup { min-width:0; }
.kicker,.eyebrow { margin:0 0 3px; color:var(--teal-dark); font-size:.7rem; font-weight:950; letter-spacing:.11em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(1.55rem,6vw,2rem); line-height:1; letter-spacing:-.045em; }
h2,h3,p { margin-top:0; }
.profile-chip { display:flex; align-items:center; gap:6px; min-width:48px; min-height:48px; padding:0 13px; color:white; background:var(--navy); border:0; border-radius:15px; font-weight:950; cursor:pointer; }
.profile-chip[hidden] { display:none; }

.picker-intro { position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; overflow:hidden; margin-bottom:17px; padding:24px 25px; color:white; background:linear-gradient(135deg,#142b46,#205d68 70%,#2b7b75); border-radius:27px; box-shadow:var(--shadow); }
.picker-intro::after { content:""; position:absolute; inset:auto -35px -65px auto; width:175px; height:175px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 24px rgba(255,255,255,.035),0 0 0 49px rgba(255,255,255,.025); }
.intro-copy { position:relative; z-index:1; }
.intro-emblem { position:relative; z-index:1; display:grid; place-items:center; width:72px; height:72px; color:#17324d; background:linear-gradient(145deg,#ffe5a1,#f2ad36); border:5px solid rgba(255,255,255,.23); border-radius:24px; box-shadow:0 12px 25px rgba(0,0,0,.18); font-size:2rem; transform:rotate(7deg); }
.picker-intro .eyebrow { color:#bdebe5; }
.picker-intro h2 { margin-bottom:8px; font-size:clamp(1.9rem,8vw,2.7rem); line-height:1.02; letter-spacing:-.05em; }
.picker-intro p:last-child { margin-bottom:0; color:#e6f2f1; line-height:1.45; }
.profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.learner-card { min-width:0; min-height:244px; padding:20px 15px; color:var(--ink); background:var(--paper); border:2px solid transparent; border-radius:var(--radius); box-shadow:0 8px 25px rgba(23,50,77,.08); text-align:center; cursor:pointer; }
.learner-card:hover { transform:translateY(-2px); border-color:#78b4ae; }
.profile-hero { position:relative; display:grid; place-items:center; width:104px; height:104px; margin:0 auto 7px; overflow:hidden; background:linear-gradient(145deg,#edf8f5,#d7ece6); border:1px solid #c8ded8; border-radius:30px; }
.profile-hero::after { content:""; position:absolute; inset:auto 14px 8px; height:12px; background:rgba(23,50,77,.08); border-radius:50%; filter:blur(2px); }
.profile-hero .hero-art { position:relative; z-index:1; width:94px; height:94px; }
.learner-card strong { display:block; margin-bottom:4px; font-size:1.2rem; }
.stamp-count { display:block; margin-bottom:15px; color:var(--muted); font-size:.78rem; font-weight:850; }
.picker-links { display:flex; flex-wrap:wrap; justify-content:center; gap:5px 14px; margin-top:19px; }
.text-button,.cloud-button,.tile-toggle { min-height:44px; padding:8px 10px; color:var(--muted); background:transparent; border:0; font-weight:850; cursor:pointer; }
.cloud-button { color:var(--teal-dark); }

.trail { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:7px; margin:24px 0; }
.trail.compact { grid-template-columns:repeat(6,24px); justify-content:center; gap:7px; margin:0; }
.trail-stop { display:grid; place-items:center; aspect-ratio:1; min-width:0; color:#52656f; background:#edf2f1; border:2px solid #d5e1df; border-radius:50%; font-size:.72rem; font-weight:950; }
.trail.compact .trail-stop { width:24px; height:24px; font-size:.58rem; }
.trail-stop.learning { color:#8c630b; background:#fff3d2; border-color:#f2c768; }
.trail-stop.strong { color:#08635f; background:#dff3ee; border-color:#6bb3aa; }
.trail-stop.mastered { color:#604000; background:var(--gold); border-color:#d99118; box-shadow:0 2px 8px rgba(242,173,54,.3); }

.mission-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 3px 12px; }
.mission-head h2 { margin:0; font-size:1.48rem; letter-spacing:-.035em; }
.question-count { color:var(--muted); font-size:.78rem; font-weight:900; }
.pips { display:grid; grid-template-columns:repeat(10,1fr); gap:7px; margin-bottom:15px; }
.pip { height:10px; background:#d4dfdd; border-radius:999px; }
.pip.current { background:var(--gold); box-shadow:0 0 0 3px rgba(242,173,54,.18); }
.pip.done { background:var(--teal); }
.pip.learned { background:#82bcb5; }

.battle-stage { position:relative; overflow:hidden; margin-bottom:13px; padding:11px 14px 8px; color:white; background:radial-gradient(circle at 50% 110%,rgba(62,148,126,.5),transparent 38%),linear-gradient(165deg,#182d4b,#284660 64%,#31576a); border:1px solid rgba(255,255,255,.12); border-radius:23px; box-shadow:0 13px 30px rgba(18,36,58,.18); }
.battle-stage::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.11) 0 2px,transparent 3px),radial-gradient(circle at 74% 26%,rgba(255,255,255,.08) 0 1px,transparent 2px); background-size:68px 62px,53px 47px; pointer-events:none; }
.battle-hud { position:relative; z-index:2; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; font-size:.65rem; font-weight:950; letter-spacing:.035em; text-transform:uppercase; }
.level-chip,.coin-chip { display:inline-flex; align-items:center; min-height:28px; padding:4px 9px; background:rgba(4,15,27,.42); border:1px solid rgba(255,255,255,.13); border-radius:999px; }
.coin-chip { color:#ffe2a0; }
.enemy-name { overflow:hidden; color:#dce8ed; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.battle-scene { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; height:118px; padding:0 6%; }
.fighter { position:relative; width:112px; height:112px; transform-origin:50% 100%; }
.fighter > svg { width:100%; height:100%; overflow:visible; }
.hero-fighter { margin-left:1%; }
.enemy-fighter { margin-right:1%; }
.impact-burst { position:absolute; z-index:4; left:50%; top:46%; color:#fff1b5; opacity:0; font-size:2.4rem; text-shadow:0 0 18px #f2ad36; transform:translate(-50%,-50%) scale(.3); }
.shield-row { position:relative; z-index:2; display:grid; grid-template-columns:repeat(10,1fr); gap:4px; }
.shield-segment { height:7px; background:linear-gradient(#fb7d6d,#d84e4e); border:1px solid rgba(255,255,255,.13); border-radius:999px; box-shadow:inset 0 1px rgba(255,255,255,.25); transition:background .2s ease,opacity .2s ease,transform .2s ease; }
.shield-segment.cleared { background:#40566a; opacity:.38; transform:scaleY(.62); }
.xp-track { position:relative; z-index:2; overflow:hidden; width:34%; height:3px; margin:7px auto 0; background:rgba(255,255,255,.13); border-radius:999px; }
.xp-track span { display:block; height:100%; background:#f4bd55; border-radius:inherit; }

/* Deterministic game art */
.hero-shadow,.monster-shadow { fill:rgba(2,11,20,.22); }
.hero-body { fill:var(--tunic); stroke:#17324d; stroke-width:3; stroke-linejoin:round; }
.hero-head { fill:var(--skin); stroke:#17324d; stroke-width:3; }
.hero-hair { fill:var(--hair); stroke:#17324d; stroke-width:3; stroke-linejoin:round; }
.hero-eye { fill:#17324d; }.hero-smile { fill:none; stroke:#754732; stroke-width:2.2; stroke-linecap:round; }
.hero-belt { fill:var(--accent); }.hero-leg { fill:#283c50; stroke:#17324d; stroke-width:3; stroke-linejoin:round; }
.cape { stroke:#17324d; stroke-width:3; stroke-linejoin:round; }.cape.starter { fill:var(--cape); }.cape.forest,.hood.forest { fill:#386c58; }.hood { stroke:#17324d; stroke-width:3; }.cape.guardian { fill:#27465d; }.mail { fill:#829baa; stroke:#17324d; stroke-width:3; }.mail-line { fill:none; stroke:#c9d7dc; stroke-width:2; }.cape.star { fill:#594c9f; }.star-mark { fill:#f4bd55; stroke:#fff0b7; stroke-width:1.5; }
.gear.weapon path { fill:none; stroke:#4c3027; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }.gear.weapon .blade { fill:#e6edf0; stroke:#17324d; stroke-width:2.5; }.gear.weapon.starter .blade { fill:#b9c7cc; }.gear.weapon.copper .blade { fill:#d78350; }.gear.weapon.moon .blade { fill:#d9e9ff; }.gear.weapon.wand circle { fill:#f4bd55; stroke:#17324d; stroke-width:2.5; }.gear.weapon.wand .spark { fill:#fff1ae; stroke:#fff8d6; stroke-width:1.2; }
.moss-body { fill:#659852; stroke:#17324d; stroke-width:4; }.moss-horn { fill:#8ebd74; stroke:#17324d; stroke-width:4; stroke-linejoin:round; }.moss-leaf { fill:#b6db75; stroke:#17324d; stroke-width:3; }.monster-eye { fill:#f8f4d6; stroke:#17324d; stroke-width:2; }.monster-mouth { fill:none; stroke:#17324d; stroke-width:3; stroke-linecap:round; }.wisp-body { fill:#6d62b3; stroke:#241f52; stroke-width:4; }.wisp-tail { fill:#51478f; stroke:#241f52; stroke-width:4; }.wisp-horn { fill:#978ed0; stroke:#241f52; stroke-width:4; }.stone-body { fill:#607b8c; stroke:#17324d; stroke-width:4; }.stone-plate { fill:#8ca2ad; stroke:#17324d; stroke-width:4; stroke-linejoin:round; }.glow { fill:#b8fff0; }.stone-rune { fill:#5ee0ca; stroke:#17324d; stroke-width:3; }.boss-cape { fill:#4a306e; stroke:#1f173c; stroke-width:4; }.boss-body { fill:#764988; stroke:#1f173c; stroke-width:4; }.boss-crown { fill:#f4bd55; stroke:#1f173c; stroke-width:3; }.boss-eye { fill:#ffe084; }.boss-rune { fill:#f7c85e; stroke:#fff2b3; stroke-width:2; }


.secondary-button { min-height:50px; padding:11px 18px; color:var(--ink); background:#edf4f2; border:1px solid #c9d9d6; border-radius:14px; font-weight:950; cursor:pointer; }
.game-summary { padding:22px; text-align:left; }
.victory-lockup { display:grid; grid-template-columns:112px 1fr; align-items:center; gap:16px; }
.summary-hero { display:grid; place-items:center; height:120px; background:linear-gradient(145deg,#edf8f5,#d7ece6); border-radius:24px; }
.summary-hero { position:relative; }.unit-crown { position:absolute; right:-5px; top:-7px; display:grid; place-items:center; width:38px; height:38px; color:#17324d; background:#f4bd55; border:4px solid #fff8dc; border-radius:14px; box-shadow:0 6px 15px rgba(23,50,77,.2); font-size:1.05rem; transform:rotate(7deg); }
.summary-hero .hero-art { width:112px; height:112px; }
.victory-lockup h2 { margin-bottom:6px; }.victory-lockup p:last-child { margin-bottom:0; color:var(--muted); line-height:1.45; }
.reward-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0 11px; }
.reward-row span { padding:10px 8px; color:var(--muted); background:#f2f6f4; border:1px solid var(--line); border-radius:12px; font-size:.68rem; text-align:center; }
.reward-row strong { display:block; margin-bottom:2px; color:var(--ink); font-size:.9rem; }
.route-art { display:block; width:100%; margin:10px 0 0; padding:8px; background:linear-gradient(180deg,#e8f4ef,#f8f3df); border:1px solid #d4e3dc; border-radius:16px; }
.route-ground { fill:none; stroke:#a7b9ae; stroke-width:3; stroke-linecap:round; stroke-dasharray:3 6; }
.route-node circle { fill:#eef2ee; stroke:#9cadab; stroke-width:2; }.route-node text { fill:#63736d; font-size:5px; font-weight:900; text-anchor:middle; }.route-node.reached circle { fill:#d9eee7; stroke:#5c9d91; }.route-node.learning circle { fill:#ffe5a1; stroke:#dba234; }.route-node.strong circle { fill:#82c3b6; stroke:#267b72; }.route-node.mastered circle { fill:#f2ad36; stroke:#a96b09; }.route-marker { fill:#dc6a4d; stroke:#8b3d2a; stroke-width:1; }
.summary-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:15px; }.summary-actions button { width:100%; }

.merchant-head { display:grid; grid-template-columns:1fr auto; align-items:center; gap:15px; margin-bottom:14px; padding:4px 3px; }.merchant-head h2 { margin-bottom:5px; font-size:1.75rem; }.merchant-head p:last-child { margin:0; color:var(--muted); font-size:.82rem; line-height:1.4; }
.wallet { display:grid; grid-template-columns:auto auto; align-items:center; gap:5px; min-width:82px; padding:10px 12px; color:#ffe6ab; background:var(--night); border-radius:17px; text-align:center; }.wallet span { font-size:.85rem; }.wallet strong { font-size:1.25rem; }.wallet small { grid-column:1/-1; color:#cbd8dc; font-size:.58rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.merchant-note { grid-column:1/-1; }
.merchant-preview { position:relative; display:grid; grid-template-columns:126px 1fr; align-items:center; overflow:hidden; min-height:134px; margin-bottom:13px; padding:6px 18px; color:white; background:linear-gradient(145deg,#17324d,#315f69); border-radius:23px; box-shadow:var(--shadow); }.merchant-preview .hero-art { position:relative; z-index:2; width:122px; height:122px; }.preview-glow { position:absolute; left:8px; width:130px; height:130px; background:radial-gradient(circle,rgba(242,173,54,.28),transparent 68%); }.merchant-preview div:last-child { position:relative; z-index:2; display:grid; gap:3px; }.merchant-preview span,.merchant-preview small { color:#c9dfdf; font-size:.7rem; font-weight:850; }.merchant-preview strong { font-size:1.35rem; }
.shop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.shop-card { display:grid; grid-template-columns:76px 1fr; grid-template-rows:1fr auto; gap:0 10px; min-width:0; padding:12px; background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 7px 20px rgba(23,50,77,.06); }.shop-card.equipped { border-color:#5a9c8f; box-shadow:0 0 0 2px rgba(90,156,143,.15); }.shop-art { display:grid; grid-row:1/3; place-items:center; width:76px; height:88px; background:linear-gradient(145deg,#edf6f3,#e3ebe7); border-radius:14px; }.item-art { width:72px; height:72px; overflow:visible; }.shop-copy { min-width:0; }.item-rarity { color:var(--teal-dark); font-size:.56rem; font-weight:950; letter-spacing:.075em; text-transform:uppercase; }.shop-card h3 { margin:2px 0 3px; font-size:.94rem; }.shop-card p { margin:0; color:var(--muted); font-size:.65rem; line-height:1.32; }.shop-action { align-self:end; min-height:37px; margin-top:8px; padding:6px 9px; color:white; background:var(--teal); border:0; border-radius:10px; font-size:.68rem; font-weight:950; cursor:pointer; }.shop-action.unaffordable { color:#60716c; background:#e6edeb; box-shadow:inset 0 0 0 1px #cfdad7; }.shop-action:disabled { color:#375a50; background:#dcebe6; cursor:default; }.merchant-done { width:100%; margin-top:13px; }

.question-card,.panel,.word-card { background:var(--paper); border:1px solid rgba(23,50,77,.09); border-radius:var(--radius); box-shadow:0 8px 25px rgba(23,50,77,.075); }
.question-card { padding:23px; }
.question-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.q-domain { display:inline-flex; padding:6px 10px; color:var(--teal-dark); background:var(--mint); border-radius:999px; font-size:.67rem; font-weight:950; letter-spacing:.065em; text-transform:uppercase; }
.speak-button { flex:0 0 auto; display:grid; place-items:center; min-width:46px; height:46px; padding:0 12px; white-space:nowrap; color:var(--ink); background:#edf4f2; border:0; border-radius:14px; font-size:.85rem; font-weight:700; cursor:pointer; }
.q-prompt { margin:0 0 20px; font-size:clamp(1.18rem,5.4vw,1.48rem); line-height:1.4; letter-spacing:-.022em; }
.q-prompt .target { color:var(--teal-dark); font-weight:950; }
.audio-note { margin:-10px 0 18px; color:var(--muted); font-size:.78rem; line-height:1.4; }
.choice-list { display:grid; gap:9px; }
.choice { width:100%; min-height:54px; padding:12px 15px; color:var(--ink); background:white; border:2px solid var(--line); border-radius:14px; text-align:left; line-height:1.35; cursor:pointer; }
.choice.correct { color:#195d45; background:#e5f5ed; border-color:#4a9c77; }
.choice.chosen { background:#fff3da; border-color:#e4b858; }
.answer-row { display:flex; gap:9px; }
.answer-input { width:100%; min-width:0; min-height:55px; padding:12px 15px; color:var(--ink); background:white; border:2px solid #b9cecb; border-radius:14px; outline:none; }
.answer-input:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(8,126,120,.12); }
.submit-button,.continue-button,.primary-button { min-height:50px; padding:11px 18px; color:white; background:var(--teal); border:0; border-radius:14px; font-weight:950; cursor:pointer; }
.continue-button { width:100%; margin-top:13px; }
.tile-toggle { display:block; margin:7px auto -4px; }
.feedback { margin-top:16px; padding:14px; border-radius:14px; line-height:1.43; }
.feedback strong,.feedback span { display:block; }
.feedback strong { margin-bottom:3px; }
.feedback.good { color:#195d45; background:#e5f5ed; }
.feedback.learn { color:#785211; background:#fff2d2; }
#correction-form { margin-top:13px; padding:14px; background:#f6f8f6; border-radius:14px; }
#correction-form label { display:block; margin-bottom:9px; color:var(--muted); font-size:.84rem; }
.correction-note { min-height:18px; margin:7px 0 0; color:#7e5a17; font-size:.76rem; text-align:center; }
.correction-success { margin:0; color:#195d45; font-weight:950; text-align:center; }
.cloud-mini { min-height:17px; margin:11px 0 0; color:#52656f; font-size:.7rem; text-align:center; }

.tile-builder { padding:14px; background:#f4f7f5; border-radius:16px; }
.built-word { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; min-height:55px; margin-bottom:13px; padding:8px; color:#52656f; background:white; border:2px dashed #c8d8d5; border-radius:13px; }
.tile-bank { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; min-height:48px; }
.letter-tile,.built-tile { display:grid; place-items:center; min-width:42px; height:44px; padding:0 10px; color:var(--ink); background:white; border:2px solid #a9c7c2; border-radius:11px; font-size:1.12rem; font-weight:950; cursor:pointer; }
.built-tile { color:white; background:var(--teal); border-color:var(--teal); }
.tile-check { display:block; width:100%; margin-top:13px; }
.tile-check:disabled { opacity:.45; cursor:default; }

.panel { padding:28px 23px; text-align:center; }
.panel-icon,.summary-icon { display:block; margin-bottom:8px; font-size:3rem; }
.panel h2,.summary h2 { margin-bottom:8px; font-size:clamp(1.65rem,7vw,2.15rem); letter-spacing:-.045em; }
.panel > p:not(.eyebrow):not(.privacy-note):not(.cloud-mini) { color:var(--muted); line-height:1.5; }
.cloud-panel .primary-button { width:100%; margin:10px 0 4px; }
.privacy-note { margin:12px 0 5px; color:var(--muted); font-size:.76rem; line-height:1.45; }
.done-button { width:100%; margin-top:6px; }

.screen-heading { display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.screen-heading h2 { margin:0; font-size:1.55rem; }
.back-button { flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px; color:var(--ink); background:white; border:1px solid var(--line); border-radius:14px; font-weight:950; cursor:pointer; }
.word-list { display:grid; gap:10px; }
.word-card { padding:18px; }
.word-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.word-card h3 { margin:0 0 3px; font-size:1.3rem; }
.word-card p { margin:8px 0; color:var(--muted); font-size:.85rem; line-height:1.46; }
.word-card .definition { color:var(--ink); font-size:.95rem; }
.pos { color:var(--teal-dark); font-size:.69rem; font-weight:950; text-transform:uppercase; }
.word-card .example { margin-top:12px; padding:11px 12px; background:#f3f6f3; border-left:4px solid var(--gold); border-radius:0 10px 10px 0; }

.toast { position:fixed; z-index:30; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:calc(100% - 30px); padding:11px 15px; color:white; background:var(--navy); border-radius:12px; box-shadow:var(--shadow); font-size:.8rem; font-weight:850; }
.confetti { position:fixed; z-index:25; top:-16px; width:9px; height:15px; border-radius:2px; pointer-events:none; animation:confetti-fall 1.45s ease-in forwards; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
button:focus-visible,input:focus-visible { outline:4px solid var(--gold); outline-offset:3px; }

@keyframes confetti-fall { to { transform:translateY(105vh) rotate(520deg); opacity:.3; } }
@media (max-width:560px) {
  .shell { padding-left:12px; padding-right:12px; }
  .picker-intro { padding:21px 19px; }
  .learner-card { min-height:226px; padding:17px 10px; }
  .trail.compact { grid-template-columns:repeat(6,21px); gap:5px; }
  .trail.compact .trail-stop { width:21px; height:21px; font-size:.53rem; }
  .question-card { padding:19px 15px; }
  .answer-row { flex-direction:column; }
  .submit-button { width:100%; }
  .trail:not(.compact) { grid-template-columns:repeat(6,1fr); }
  .battle-scene { height:103px; padding:0 1%; }.fighter { width:100px; height:100px; }
  .shop-grid { grid-template-columns:1fr; }.shop-card { grid-template-columns:74px 1fr; }.shop-art { width:74px; }
  .victory-lockup { grid-template-columns:92px 1fr; }.summary-hero { height:100px; }.summary-hero .hero-art { width:94px; height:94px; }
}
@media (max-width:340px) { .profile-grid { grid-template-columns:1fr; }.learner-card{min-height:210px}.profile-chip span:last-child{display:none} }
@media (prefers-reduced-motion:no-preference) { .learner-card { transition:transform .16s ease,border-color .16s ease; } }
@media (prefers-reduced-motion:reduce) { .confetti,.impact-burst { display:none; }.battle-stage *,.shield-segment { animation:none!important;transition:none!important; } }
@media (forced-colors:active) { .battle-stage,.merchant-preview,.wallet { border:2px solid CanvasText; }.shield-segment { border:2px solid CanvasText; }.shield-segment.cleared { opacity:.35; }.shop-card.equipped { outline:3px solid Highlight; } }

/* Storybook release: the question is the focal point; the world is its stage. */
:root { --ink:#203d39;--navy:#183b36;--night:#163830;--muted:#61716b;--canvas:#f4f2e9;--paper:#fffef8;--teal:#216d57;--teal-dark:#185440;--mint:#e6efdf;--line:#dedfd3;--gold:#deb257;--radius:22px;--shadow:0 14px 40px #173c3010; }
html,body { background:var(--canvas); }
body { background-image:radial-gradient(ellipse at 50% 0%,#e4eddc 0,transparent 700px); }
.shell { width:min(760px,100%);padding-top:calc(22px + env(safe-area-inset-top)); }
.topbar { margin-bottom:22px; }
.kicker,.eyebrow { font-size:.65rem;letter-spacing:.13em;font-weight:800; }
h1 { font-size:1.65rem;letter-spacing:-.055em; }
.profile-chip { min-height:44px;border-radius:100px;font-size:.82rem;background:#e4eadf;color:var(--ink);border:1px solid #cedbcc; }
.picker-intro { min-height:214px;align-items:end;padding:28px;background:linear-gradient(90deg,#102f2be8 0%,#163c2b73 70%,#102f2b10),url('assets/expedition-world.webp?v=133941f90a5a') center 42%/cover;box-shadow:0 10px 30px #1d3d3018; }
.picker-intro::after,.intro-emblem { display:none; }
.picker-intro h2 { font-size:2.6rem;max-width:280px; }
.picker-intro p:last-child { max-width:340px;font-size:.88rem;line-height:1.5; }
.picker-intro .eyebrow { color:#f1d79a;margin-bottom:9px; }
.profile-grid { gap:16px; }
.learner-card { position:relative;padding:16px 15px 19px;border:1px solid #d8e0d1;box-shadow:0 5px 0 #dce3d5,0 12px 24px #203d3908;overflow:hidden; }
.learner-card:hover { border-color:#769f7d;transform:translateY(-2px); }
.profile-hero { width:160px;height:157px;margin:0 auto 9px;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 65%,#d6e7c3,transparent 67%);overflow:visible; }
.profile-hero .hero-art { width:155px;height:155px;filter:drop-shadow(0 5px 2px #1a442425); }
.profile-hero::after { display:none; }
.learner-card strong { font-size:1.25rem;margin-bottom:5px; }
.stamp-count { font-size:.75rem;font-weight:600;margin-bottom:14px; }
.journey-line { display:block;min-height:3.6em;margin:2px 0 10px;color:var(--teal-dark);font-size:.74rem;font-weight:650;line-height:1.2; }
.past-practice { display:block;padding:12px;color:var(--teal-dark);font-weight:700;text-align:center; }
.round-review { margin:14px 0;padding:12px 14px;border-radius:12px;background:var(--paper);color:var(--teal-dark);text-align:left;font-size:.85rem;line-height:1.5; }
.round-review p { margin:3px 0; }
.coin-shortfall { display:block;color:#52615b;font-size:.7rem;line-height:1.3;margin-top:4px; }
.shop-action.preview-only { background:#e7eee8;color:#254b3b;box-shadow:none; }
.start-label { display:block;padding:11px 8px;border-radius:12px;background:var(--teal);color:#fff;font-weight:800;font-size:.85rem;box-shadow:0 3px 0 #134733; }
.session-promise { display:block;margin-top:10px;color:var(--muted);font-size:.67rem;font-weight:500; }
.picker-links { margin-top:22px; }
.text-button,.cloud-button { font-size:.78rem;font-weight:650; }
.mission-head { margin:0 2px 10px;align-items:center; }
.mission-head h2 { font-size:1.05rem; }
.mission-head .eyebrow { display:none; }
.battle-stage { padding:9px 12px 10px;border:0;border-radius:18px;background:linear-gradient(#1437279c,transparent 60%),url('assets/forest-clearing.webp?v=133941f90a5a') center 62%/cover;box-shadow:0 5px 20px #203d3910; }
.battle-stage::before { display:none; }
.battle-hud { font-size:.62rem; }
.enemy-name { color:#fff;text-shadow:0 1px 3px #143727; }
.level-chip,.coin-chip { min-height:24px;border:1px solid #ffffff29;background:#123b2aba; }
.battle-scene { height:115px;padding:0 17%; }
.fighter { width:112px;height:112px;filter:drop-shadow(0 5px 2px #18352742); }
.fighter svg { overflow:visible; }
.fighter svg svg { overflow:hidden; }
.shield-row { gap:4px;margin:0 13%; }
.shield-segment { height:5px;background:#f3cd71;box-shadow:none;border:0; }
.shield-segment.cleared { background:#173c30;opacity:.45; }
.xp-track { display:none; }
.pips { margin:0 4px 13px;gap:5px; }
.pip { height:4px; }
.pip.current { box-shadow:none;background:#c88b31; }
.question-card { padding:22px 24px;border:1px solid #dfe3d6;box-shadow:0 6px 22px #203d3908; }
.question-top { margin-bottom:12px; }
.q-domain { font-size:.65rem;font-weight:750;letter-spacing:.02em;text-transform:none; }
.q-prompt { font-size:1.27rem;line-height:1.43;margin-bottom:18px;font-weight:650; }
.answer-input { font-size:16px;min-height:52px;border-color:#c3d0bb;border-radius:12px; }
.submit-button,.continue-button,.primary-button { background:var(--teal);border-radius:12px;box-shadow:0 3px 0 #154b39;font-weight:800; }
.choice { min-height:52px;padding:11px 14px;border-width:1px;border-bottom-width:3px;border-radius:12px;background:#fffefb; }
.choice:hover:not(:disabled) { border-color:#72a184;background:#f1f7e9; }
.choice:disabled { opacity:1; }
.choice.correct { border-color:#5b997a; }
.feedback { margin-top:12px;font-size:.88rem; }
.continue-button { margin-top:10px; }
.audio-note { font-size:.77rem; }
body[data-screen="question"] .cloud-mini { display:none; }
.tile-toggle { font-size:.73rem;font-weight:650; }
.game-summary { padding:24px; }
.summary-hero { height:145px;background:radial-gradient(ellipse,#dfebd0,transparent 70%); }
.summary-hero .hero-art { height:145px;width:145px; }
.victory-lockup { grid-template-columns:140px 1fr; }
.victory-lockup h2 { font-size:1.8rem;line-height:1.12; }
.victory-lockup p:last-child { font-size:.85rem; }
.reward-row span { background:#f1f2e7;border-color:#dedfcf; }
.route-art { min-height:175px;padding:20px 10px;background:linear-gradient(#fff8db18,#254c2630),url('assets/expedition-world.webp?v=133941f90a5a') center 61%/cover;border:0;border-radius:18px; }
.route-ground { stroke:#ffebae;stroke-width:3;stroke-dasharray:2 5; }
.route-node circle { fill:#fff8de;stroke:#436b3e; }
.route-node text { fill:#234e30; }
.route-node.reached circle { fill:#f0cc69;stroke:#896728; }
.merchant-preview { background:linear-gradient(90deg,#163c31a1,#173c30d9),url('assets/forest-clearing.webp?v=133941f90a5a') center 55%/cover; }
.merchant-preview .hero-art { width:140px;height:140px; }
.shop-grid { gap:12px; }
.shop-card { grid-template-columns:76px 1fr;padding:12px;border-radius:16px;box-shadow:none; }
.shop-art { background:#edf0e1;height:92px; }
.shop-action { min-height:44px;font-size:.75rem;border-radius:10px; }
.shop-card h3 { font-size:.96rem; }.shop-card p { font-size:.72rem; }
.shop-card.equipped { border-color:#5c9a6c;background:#f2f6e9; }
.shop-card .item-art svg { overflow:hidden; }
@media (max-width:560px) {
  .shell { padding:calc(14px + env(safe-area-inset-top)) 14px calc(25px + env(safe-area-inset-bottom)); }
  .topbar { margin-bottom:16px; }.topbar h1{font-size:1.42rem;}
  .picker-intro { min-height:184px;padding:22px; }.picker-intro h2{font-size:2.25rem;}
  .picker-intro p:last-child{font-size:.78rem;max-width:230px;}
  .profile-grid{gap:10px;}.learner-card{padding:12px 10px 15px;}
  .profile-hero{width:133px;height:138px;}.profile-hero .hero-art{width:137px;height:137px;}
  .start-label{font-size:.75rem;padding:11px 4px;}.session-promise{font-size:.6rem;}
  .stamp-count{font-size:.67rem;}.learner-card strong{font-size:1.15rem;}
  body[data-screen="question"] .topbar{margin-bottom:12px;}
  .battle-scene{height:79px;padding:0 17%;}.fighter{width:82px;height:82px;}
  .battle-stage{padding:8px 10px 9px;margin-bottom:10px;}
  .shield-row{margin:0 8%;}.battle-hud{font-size:.55rem;}
  .question-card{padding:17px 16px;}.q-prompt{font-size:1.1rem;line-height:1.4;margin-bottom:14px;}
  .question-top{margin-bottom:9px;}.speak-button{width:auto;min-width:44px;height:44px;font-size:.85rem;padding:0 10px;}
  .answer-row{flex-direction:row;}.submit-button{padding:11px 15px;width:auto;}
  .choice{font-size:.88rem;min-height:48px;}
  .victory-lockup{grid-template-columns:90px 1fr;gap:12px;}.summary-hero .hero-art{width:100px;height:110px;}.summary-hero{height:110px;}
  .victory-lockup h2{font-size:1.45rem;}.game-summary{padding:18px;}.route-art{min-height:145px;}
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .shop-card{display:flex;flex-direction:column;align-items:stretch;padding:10px;text-align:center;}
  .shop-art{width:100%;height:78px;margin-bottom:6px;}.item-art{height:78px;width:78px;}
  .shop-card h3{font-size:.83rem;}.shop-card p{display:none;}.item-rarity{font-size:.53rem;}.shop-action{margin-top:8px;}
  .merchant-preview{grid-template-columns:95px 1fr;min-height:109px;padding:4px 12px;}.merchant-preview .hero-art{width:105px;height:105px;}
  .merchant-preview strong{font-size:1.15rem;}.merchant-head h2{font-size:1.5rem;}
}
@media (max-width:340px) { .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.profile-hero{width:115px;height:122px;}.profile-hero .hero-art{width:120px;height:120px;}.start-label{font-size:.67rem;}.session-promise{font-size:.54rem;}.q-prompt{font-size:1.03rem;} }
@media (max-height:550px) and (max-width:560px) { body[data-screen="question"] .battle-stage,body[data-screen="question"] .mission-head,body[data-screen="question"] .pips{display:none;}body[data-screen="question"] .topbar{margin-bottom:8px;} }
@media (prefers-reduced-motion:reduce) { .battle-stage *,.learner-card { animation:none!important;transition:none!important; } }
.sentence-button { min-height:44px;padding:4px 6px;color:var(--teal-dark);font-size:inherit;background:none;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer; }
.starter-button { min-height:44px;padding:5px 0;color:#e4efdf;font-size:.7rem;background:none;border:0;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer; }
.preview-confirm { min-height:44px;padding:8px 14px;background:#f3d381;color:#173c30;border:0;border-radius:10px;font-size:.8rem;font-weight:850;cursor:pointer; }
.cloud-button { display:inline-flex;align-items:center; }
@media(max-width:560px){.shop-art,.item-art{height:66px;}.shop-card{padding:8px;}.merchant-head p:last-child{font-size:.73rem;}.picker-links{gap:0 4px;}.audio-note{margin-bottom:8px;} }
.learning-notes { margin:12px 2px 0;padding:0 12px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem; }
.learning-notes summary { min-height:44px;padding:14px 0;cursor:pointer;font-weight:650; }
.save-warning { padding:12px 14px;margin:0 0 14px;border:1px solid #b87828;border-radius:12px;background:#fff0d0;color:#614414;font-size:.83rem;line-height:1.45; }.save-warning[hidden]{display:none;}
.tile-model { font-size:.88rem;line-height:1.5;margin:0 0 12px; }.tile-model strong { display:block;font-size:1.25rem;letter-spacing:.04em;color:var(--teal-dark); }
.reward-break { margin:12px 0;color:var(--muted);font-size:.72rem;line-height:1.5; }.reward-break p { margin:0 0 5px; }.reward-break progress { display:block;appearance:none;width:100%;height:4px;border:0;border-radius:999px;overflow:hidden;background:#dfe5d5;color:var(--teal); }.reward-break progress::-webkit-progress-bar { background:#dfe5d5; }.reward-break progress::-webkit-progress-value { background:var(--teal); }.reward-break progress::-moz-progress-bar { background:var(--teal); }
.learning-notes section { padding:10px 0;border-top:1px solid var(--line); }.learning-notes h3{font-size:.9rem;margin:0 0 7px;color:var(--ink);}.learning-notes p{margin:5px 0;line-height:1.5;}.learning-notes .mastery-explainer{font-size:.71rem;margin:10px 0 15px;}
body[data-screen="question"] .pips { display:none; }
@media(max-width:560px){.session-promise{font-size:.66rem;}.battle-hud{font-size:.65rem;}.item-rarity{font-size:.62rem;}.shop-card h3{font-size:.88rem;}}
@media(max-width:560px){
  .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .shop-card{padding:8px 6px;}.shop-card .item-rarity{display:none;}
  .shop-copy{display:grid;place-items:center;min-height:36px;}.shop-card h3{font-size:.78rem;line-height:1.25;margin:2px 0;}
  .shop-action{align-self:stretch;width:100%;padding:6px 4px;font-size:.7rem;margin-top:6px;}
  .merchant-head{gap:10px;}.merchant-head .eyebrow{font-size:.63rem;}
  .merchant-preview{margin-bottom:8px;}.reward-break{margin:8px 0 10px;}
}

/* Counterattacks are presentation only: no health loss or delay to the next answer. */

/* The monster atlas has true alpha. Never feather its silhouette into a disc. */
.monster-cutout { -webkit-mask-image:none;mask-image:none; }

.extra-item { -webkit-mask-image:none;mask-image:none; }
.shop-pages { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:.75rem;font-weight:800; }
.shop-pages button { min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--teal-dark);font:inherit;cursor:pointer; }
.shop-pages button:disabled,.preview-confirm:disabled { opacity:.55;cursor:default; }
@media(max-width:560px){.shop-pages{margin-top:5px;}.merchant-done{margin-top:6px;}.shop-pages button{min-height:40px;}.shop-art,.item-art{height:54px;}.shop-card{padding:6px;}}
@media(max-width:560px){
  #gear-preview:has(#confirm-gear)>div:last-child{grid-template-columns:1fr 1fr;column-gap:6px;}
  #gear-preview:has(#confirm-gear)>div:last-child>span,#gear-preview:has(#confirm-gear)>div:last-child>strong{grid-column:1/-1;}
  #gear-preview .preview-confirm{padding:6px;font-size:.72rem;}
  #gear-preview #cancel-gear{font-size:.68rem;line-height:1.15;}
}

/* A question is still the only combat input. All motion is brief and skippable. */
.battle-stage { --effect:#ffe0a4;--guard:#a9e7ef;--enemy-effect:#c9a6ff; }
.battle-stage[data-element="moon"],.battle-stage[data-element="ice"] { --effect:#b9f4ff; }
.battle-stage[data-element="fire"] { --effect:#ffac58; }
.battle-stage[data-element="lightning"] { --effect:#f9ef83; }
.battle-stage[data-element="star"],.battle-stage[data-element="crystal"] { --effect:#efc4ff; }
.battle-stage[data-element="void"] { --effect:#bc9bff; }
.battle-stage[data-element="wood"] { --effect:#d9e9a6; }
.battle-stage[data-guard-element="fire"] { --guard:#ffb967; }
.battle-stage[data-guard-element="crystal"],.battle-stage[data-guard-element="star"],.battle-stage[data-guard-element="void"] { --guard:#dab4ff; }
.battle-stage[data-guard-element="wood"] { --guard:#bde29d; }
.battle-stage[data-guard-element="lightning"] { --guard:#fff39a; }
.battle-stage[data-enemy="sentinel"] { --enemy-effect:#b8f69c; }
.battle-stage[data-enemy="mossling"] { --enemy-effect:#dac693; }
.battle-status { position:relative;min-height:2.4em;margin:5px 0 0;color:#fff9e3;font-size:.65rem;line-height:1.2;text-align:center;text-shadow:0 1px 3px #08291e; }
.battle-scene .fighter { flex-shrink:0; }
.hero-art { overflow:visible; }
.weapon-motion { transform-box:view-box;transform-origin:0 0; }
.hero-frame { opacity:0; }
.weapon-grip { transform-box:view-box; }
.armor-motion { transform-box:view-box;transform-origin:0 0; }
.armor-anchor[data-slot="offhand"] { --armor-wind:translate(55px,7px);--armor-hit:translate(23px,9px);--armor-recover:translate(55px,11px); }
.armor-anchor[data-slot="neck"] { --armor-wind:translate(-2px,6px);--armor-hit:translate(0,26px);--armor-recover:translate(3px,12px); }
.hit-mark,.ground-ripple,.hero-guard,.enemy-guard { position:absolute;pointer-events:none;opacity:0; }
.hit-mark { z-index:4;left:14%;top:50%;width:60%;height:35%;border-top:4px solid var(--effect);border-radius:50%;filter:drop-shadow(0 0 5px var(--effect)); }
.ground-ripple { left:-15%;bottom:2%;width:130%;height:18%;border:3px solid var(--effect);border-radius:50%; }
.hero-guard { z-index:3;left:40%;top:17%;width:58%;height:75%;border:3px solid var(--guard);border-radius:48%;background:radial-gradient(ellipse,transparent 50%,#bceeff40);box-shadow:0 0 12px var(--guard); }
.enemy-guard { z-index:2;inset:10% 6%;border:2px solid var(--enemy-effect);border-radius:45%; }
.battle-stage[data-enemy="sentinel"] .enemy-guard { opacity:.38;clip-path:polygon(15% 0,80% 0,100% 40%,83% 88%,50% 100%,12% 80%,0 35%);border-radius:20%;background:linear-gradient(135deg,#8ba58930,transparent); }
.battle-stage[data-enemy="boss"] .enemy-guard { opacity:.40;border-style:dashed;box-shadow:inset 0 0 12px #bf82ef70; }
.battle-stage[data-enemy="sentinel"] .enemy-fighter::after { content:"";position:absolute;inset:25% 25% 17%;background:#e1ffb1;opacity:0;clip-path:polygon(40% 0,49% 0,60% 30%,43% 47%,60% 70%,48% 100%,41% 100%,50% 70%,33% 47%,50% 30%);pointer-events:none; }
.battle-stage[data-enemy="sentinel"][data-wear="1"] .enemy-fighter::after { opacity:.4; }
.battle-stage[data-enemy="sentinel"][data-wear="2"] .enemy-fighter::after { opacity:.7;scale:1.1; }
.battle-stage[data-enemy="sentinel"][data-wear="3"] .enemy-fighter::after { opacity:1;scale:1.2; }
.battle-stage[data-enemy="wisp"][data-wear="1"] .monster-art { opacity:.85; }
.battle-stage[data-enemy="wisp"][data-wear="2"] .monster-art { opacity:.7; }
.battle-stage[data-enemy="wisp"][data-wear="3"] .monster-art { opacity:.55; }
.projectile-lane { position:absolute;z-index:4;left:calc(17% + 48px);right:calc(17% + 32px);top:48%;height:10px;pointer-events:none; }
.hero-projectile,.enemy-projectile { position:absolute;top:0;left:0;width:13px;height:13px;opacity:0;border-radius:50%;background:var(--effect);box-shadow:0 0 10px var(--effect); }
.enemy-projectile { background:var(--enemy-effect);box-shadow:0 0 10px var(--enemy-effect); }
.battle-stage[data-attack="shoot"] .hero-projectile { width:27px;height:3px;border-radius:0;background:#e9d1a1;box-shadow:none; }
.battle-stage[data-attack="shoot"] .hero-projectile::after { content:"";position:absolute;right:-4px;top:-3px;border-left:7px solid #e8edf1;border-top:4px solid transparent;border-bottom:4px solid transparent; }
.battle-stage[data-element="lightning"] .hit-mark { border:0;border-radius:0;background:var(--effect);clip-path:polygon(60% 0,25% 52%,49% 52%,37% 100%,84% 35%,59% 35%); }
.battle-stage:is([data-element="ice"],[data-element="crystal"]) .hit-mark { border-radius:10%;transform:rotate(30deg);border:3px solid var(--effect); }
.battle-stage[data-element="fire"] .hit-mark { border:0;background:radial-gradient(ellipse,#fff6b8 5%,#ffb347 32%,transparent 70%); }

.battle-stage[style]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .hero-fighter { animation:hero-lunge var(--swing) ease-in-out; }
.battle-stage:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .hero-idle { animation:pose-idle var(--swing) steps(1,end); }
.battle-stage:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .frame-windup { animation:pose-windup var(--swing) steps(1,end); }
.battle-stage:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .frame-contact { animation:pose-contact var(--swing) steps(1,end); }
.battle-stage:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .frame-recover { animation:pose-recover var(--swing) steps(1,end); }
.battle-stage:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .weapon-grip { animation:grip-poses var(--swing) steps(1,end); }
.battle-stage:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .armor-grip { animation:armor-poses var(--swing) steps(1,end); }
.battle-stage:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .weapon-motion { animation:weapon-slash var(--swing) ease-in-out; }
.battle-stage:is([data-attack="chop"],[data-attack="smash"]):is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .weapon-motion { animation-name:weapon-overhead; }
.battle-stage[data-attack="thrust"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .weapon-motion { animation-name:weapon-thrust; }
.battle-stage[data-attack="sweep"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .weapon-motion { animation-name:weapon-sweep; }
.battle-stage[data-attack="shoot"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .weapon-motion { animation-name:weapon-draw; }
.battle-stage[data-attack="cast"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .weapon-motion { animation-name:weapon-cast; }
.battle-stage[style]:is([data-attack="shoot"],[data-attack="cast"]):is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .hero-fighter { animation-name:hero-ranged; }
.battle-stage:is([data-attack="shoot"],[data-attack="cast"]):is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .frame-windup { animation-name:pose-ranged-windup; }
.battle-stage:is([data-attack="shoot"],[data-attack="cast"]):is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .frame-contact { animation-name:pose-ranged-contact; }
.battle-stage:is([data-attack="shoot"],[data-attack="cast"]):is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .weapon-grip { animation-name:grip-ranged; }
.battle-stage:is([data-attack="shoot"],[data-attack="cast"]):is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .armor-grip { animation-name:armor-ranged; }
.battle-stage:is([data-attack="shoot"],[data-attack="cast"]):is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .hero-projectile { animation:projectile-out var(--flight) linear .04s forwards; }
.battle-stage:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .hit-mark { animation:contact-flash .22s ease-out var(--contact) forwards; }
.battle-stage[data-attack="smash"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .ground-ripple { animation:ground-wave .26s ease-out var(--contact) forwards; }
.battle-stage:is([data-state="critical"],[data-state="standard"],[data-state="recovery"]) .enemy-fighter { animation:troll-stagger .24s ease-out var(--contact) forwards; }
.battle-stage[data-enemy="wisp"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"]) .enemy-fighter { animation-name:wisp-caught; }
.battle-stage[data-enemy="sentinel"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"]) .enemy-fighter { animation-name:golem-crack; }
.battle-stage[data-enemy="boss"]:is([data-state="critical"],[data-state="standard"],[data-state="recovery"]) .enemy-fighter { animation-name:owl-interrupted; }
.battle-stage:is([data-enemy="sentinel"],[data-enemy="boss"]):is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .enemy-guard { animation:guard-break .26s ease-out var(--contact) forwards; }
.battle-stage[data-state="victory"] .enemy-fighter { animation:monster-fall .35s ease-in var(--contact) forwards; }
.battle-stage[data-enemy="wisp"][data-state="victory"] .enemy-fighter { animation-name:monster-dissolve; }
.battle-stage[data-enemy="sentinel"][data-state="victory"] .enemy-fighter { animation-name:golem-collapse; }
.battle-stage[data-enemy="boss"][data-state="victory"] .enemy-fighter { animation-name:owl-vanish; }
.finish-burst { position:absolute;z-index:5;pointer-events:none; }
.finish-burst i { position:absolute;width:7px;height:12px;opacity:0;background:#a4bf64;border-radius:90% 0; }
.battle-stage[data-enemy="wisp"] .finish-burst i { border-radius:50%;width:8px;height:8px;background:#c6acff;box-shadow:0 0 8px #b585ff; }
.battle-stage[data-enemy="sentinel"] .finish-burst i { border-radius:2px;width:11px;height:9px;background:#96a598;border:1px solid #c5e0a3; }
.battle-stage[data-enemy="boss"] .finish-burst i { background:#cd95eb;border-left:2px solid #e6c367;width:5px;height:16px; }
.battle-stage[data-state="victory"] .finish-burst i { animation:finish-scatter .38s ease-out var(--contact) forwards; }

.battle-stage[data-state="counter"] .enemy-fighter { animation:troll-swipe .48s ease; }
.battle-stage[data-enemy="sentinel"][data-state="counter"] .enemy-fighter { animation-name:golem-slam; }
.battle-stage[data-enemy="wisp"][data-state="counter"] .enemy-fighter { animation-name:wisp-dart; }
.battle-stage[data-enemy="boss"][data-state="counter"] .enemy-fighter { animation-name:owl-cast; }
.battle-stage:is([data-enemy="wisp"],[data-enemy="boss"])[data-state="counter"] .enemy-projectile { animation:projectile-in .16s linear .04s forwards; }
.battle-stage[data-enemy="sentinel"][data-state="counter"] .ground-ripple { border-color:var(--enemy-effect);animation:golem-wave .28s ease-out .20s forwards; }
.battle-stage[data-enemy="mossling"][data-state="counter"] .enemy-projectile { width:26px;height:30px;background:none;box-shadow:none;border-left:3px solid var(--enemy-effect);border-right:3px solid var(--enemy-effect);border-radius:40%;animation:projectile-in .16s linear .04s forwards; }
.battle-stage[data-state="counter"] .hero-fighter { animation:hero-brace .48s ease; }
.battle-stage[data-defense="evade"][data-state="counter"] .hero-fighter { animation-name:hero-evade; }
.battle-stage[data-defense="barrier"][data-state="counter"] .hero-fighter { animation-name:hero-barrier; }
.battle-stage[data-state="counter"] .hero-guard { animation:guard-catch .28s ease-out .20s forwards; }
.battle-stage[data-defense="shield"] .hero-guard { border-radius:15% 15% 50% 50%;width:40%;left:60%; }
.battle-stage[data-defense="brace"] .hero-guard { border-radius:20%;width:45%;height:45%;top:40%;left:30%; }
.battle-stage[data-defense="evade"] .hero-guard { display:none; }
.battle-stage[data-defense="shield"][data-state="counter"] .armor-motion { animation:shield-lift .48s ease; }

@keyframes pose-idle { 0%{opacity:0}100%{opacity:1} }
@keyframes pose-windup { 0%{opacity:1}50%,100%{opacity:0} }
@keyframes pose-contact { 0%{opacity:0}50%{opacity:1}67%,100%{opacity:0} }
@keyframes pose-recover { 0%{opacity:0}67%{opacity:1}100%{opacity:0} }
@keyframes pose-ranged-windup { 0%{opacity:1}10%,100%{opacity:0} }
@keyframes pose-ranged-contact { 0%{opacity:0}10%{opacity:1}67%,100%{opacity:0} }
@keyframes grip-poses { 0%{transform:var(--grip-wind)}50%{transform:var(--grip-hit)}67%{transform:var(--grip-recover)}100%{transform:none} }
@keyframes grip-ranged { 0%{transform:var(--grip-wind)}10%{transform:var(--grip-hit)}67%{transform:var(--grip-recover)}100%{transform:none} }
@keyframes armor-poses { 0%{transform:var(--armor-wind)}50%{transform:var(--armor-hit)}67%{transform:var(--armor-recover)}100%{transform:none} }
@keyframes armor-ranged { 0%{transform:var(--armor-wind)}10%{transform:var(--armor-hit)}67%{transform:var(--armor-recover)}100%{transform:none} }
@keyframes hero-lunge { 0%,100%{transform:none}25%{transform:translateX(-4px)}50%,62%{transform:translateX(var(--lunge,24px))} }
@keyframes hero-ranged { 0%,100%{transform:none}10%,62%{transform:translateX(-2px)} }
@keyframes weapon-slash { 0%,100%{transform:none}20%{transform:rotate(-40deg)}50%,62%{transform:rotate(55deg)} }
@keyframes weapon-overhead { 0%,100%{transform:none}28%{transform:rotate(-85deg)}50%,62%{transform:rotate(55deg)} }
@keyframes weapon-thrust { 0%,100%{transform:none}25%{transform:rotate(55deg)}50%,62%{transform:rotate(60deg)} }
@keyframes weapon-sweep { 0%,100%{transform:none}25%{transform:rotate(-65deg)}50%,62%{transform:rotate(55deg)} }
@keyframes weapon-draw { 0%,100%{transform:none}15%{transform:translateX(-5px) scaleX(.85)}50%{transform:translateX(2px)} }
@keyframes weapon-cast { 0%,100%{transform:none}25%{transform:rotate(-20deg)}50%{transform:rotate(35deg);filter:drop-shadow(0 0 5px var(--effect))} }
@keyframes projectile-out { 0%{left:0;opacity:1;transform:translateX(-100%)}95%{opacity:1}100%{left:100%;opacity:0;transform:translateX(-100%)} }
@keyframes projectile-in { 0%{left:100%;opacity:1}95%{opacity:1}100%{left:0;opacity:0} }
@keyframes contact-flash { 0%{opacity:1;scale:.65;rotate:-25deg}100%{opacity:0;scale:1.4;rotate:25deg} }
@keyframes ground-wave { 0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(1.45)} }
@keyframes golem-wave { 0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(1.45)} }
@keyframes troll-stagger { 0%,100%{transform:none}20%{transform:translateX(10px) rotate(9deg)} }
@keyframes wisp-caught { 0%{transform:translate(9px,-8px);opacity:.4;filter:brightness(1.7)}100%{transform:none;opacity:1} }
@keyframes golem-crack { 0%{transform:translateX(5px) rotate(3deg);filter:brightness(1.6)}30%{transform:translateX(-3px)}65%{transform:translateX(3px)}100%{transform:none} }
@keyframes owl-interrupted { 0%{transform:translateY(7px) rotate(-8deg);filter:brightness(1.5)}100%{transform:none} }
@keyframes guard-break { 0%{opacity:.9;scale:1}100%{opacity:0;scale:1.4;rotate:18deg} }
@keyframes monster-fall { 0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(24px) rotate(18deg) scale(.65)} }
@keyframes monster-dissolve { 0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-18px) scale(.3)} }
@keyframes golem-collapse { 0%{opacity:1;transform:none}25%{transform:translateX(-3px)}50%{transform:translate(3px,6px) scaleY(.9)}100%{opacity:0;transform:translateY(28px) scaleY(.25)} }
@keyframes owl-vanish { 0%{opacity:1;transform:none}35%{transform:translateY(-8px) rotate(-12deg)}100%{opacity:0;transform:translateY(-20px) rotate(22deg) scale(.3)} }
@keyframes finish-scatter { 0%{opacity:1;transform:translate(0,0) rotate(0)}65%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin))} }
@keyframes troll-swipe { 0%,100%{transform:none}20%{transform:rotate(9deg)}41.667%{transform:translateX(-27px) rotate(-13deg)} }
@keyframes golem-slam { 0%,100%{transform:none}20%{transform:translateY(-9px) scaleY(1.06)}41.667%{transform:translate(-8px,5px) scaleY(.88)}65%{transform:translateX(3px)} }
@keyframes wisp-dart { 0%,100%{transform:none}20%{transform:translate(7px,-10px)}41.667%{transform:translate(-15px,-4px) scale(.92)}70%{transform:translate(4px,-8px)} }
@keyframes owl-cast { 0%,100%{transform:none}20%{transform:translateY(-7px) rotate(6deg)}41.667%{transform:rotate(-7deg);filter:drop-shadow(0 0 7px #c989ff)} }
@keyframes hero-brace { 0%,100%{transform:none}41.667%{transform:translateX(-5px) rotate(-4deg) scaleY(.97)} }
@keyframes hero-evade { 0%,100%{transform:none}41.667%{transform:translate(-15px,3px) rotate(-12deg);opacity:.75} }
@keyframes hero-barrier { 0%,100%{transform:none}41.667%{filter:drop-shadow(0 0 7px var(--guard))} }
@keyframes guard-catch { 0%{opacity:1;scale:.92}100%{opacity:0;scale:1.1} }
@keyframes shield-lift { 0%,100%{transform:none}41.667%{transform:translate(14px,-12px) rotate(-15deg)} }
@media(prefers-reduced-motion:reduce){.projectile-lane,.hit-mark,.ground-ripple,.hero-guard,.finish-burst,.hero-frame{display:none;}.battle-stage[data-state="victory"] .enemy-fighter{opacity:.3;}}

/* The collection is a shelf in the timed store, never a learning-screen destination. */
.book-open { display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;margin:0 0 5px;padding:8px 12px;color:var(--teal-dark);background:#edf3e4;border:1px solid #c8d5b9;border-radius:12px;font:inherit;font-size:.78rem;font-weight:900;cursor:pointer; }
.book-open span { font-size:.68rem;font-weight:700; }
.book-controls { position:sticky;top:0;z-index:5;margin:-2px -2px 0;padding:8px 4px 1px;background:var(--paper);border-bottom:1px solid var(--line);border-radius:14px 14px 0 0; }
.book-heading { display:flex;align-items:center;gap:12px; }.book-heading h2 { margin:0;font-size:1.55rem; }.book-heading .eyebrow { margin:0 0 3px; }.book-heading .back-button { flex-shrink:0;min-width:44px;min-height:44px; }
.book-controls .reward-break { margin:8px 0; }.book-controls .reward-break p { font-size:.7rem; }
.book-intro,.book-footnote { color:var(--muted);font-size:.75rem;line-height:1.4;margin:10px 0; }.book-footnote { font-size:.66rem; }
.monster-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.monster-card { display:flex;flex-direction:column;align-items:center;min-width:0;padding:10px;text-align:center;background:var(--paper);border:1px solid #cbd5bf;border-radius:17px;box-shadow:0 4px 12px #1735260b; }
.monster-portrait { position:relative;display:grid;place-items:center;width:100%;height:108px;margin-bottom:7px;overflow:hidden;background:radial-gradient(ellipse,#1e4837,#0a251b);border-radius:12px; }
.monster-portrait .monster-art { width:110px;height:110px; }.monster-portrait>span { position:absolute;color:#d9dfce;font-size:2.8rem;font-weight:900;text-shadow:0 2px 9px #031a10; }
.undiscovered .monster-art { filter:grayscale(1) contrast(8) brightness(.35);mix-blend-mode:screen;opacity:.6; }
.monster-entry { color:var(--teal-dark);font-size:.58rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em; }
.monster-card h3 { margin:3px 0 6px;font-size:.95rem; }.monster-story { flex:1;margin:0 0 8px;color:var(--muted);font-size:.72rem;line-height:1.4; }
.monster-count { margin:0 0 7px;color:var(--teal-dark);font-size:.68rem;font-weight:800; }
.roar-button { width:100%;min-height:44px;padding:7px;border:1px solid #b8cbb9;border-radius:10px;background:#e5efdc;color:var(--teal-dark);font:inherit;font-size:.74rem;font-weight:900;cursor:pointer; }
.roar-button:disabled { opacity:.65;cursor:default; }.monster-locked { margin:auto 0 10px;color:var(--muted);font-size:.65rem; }
@media(max-width:380px){.monster-card{padding:8px;}.monster-portrait{height:90px;}.monster-portrait .monster-art{width:95px;height:95px;}.monster-card h3{font-size:.85rem;}}
@media(forced-colors:active){.monster-card,.book-controls,.book-open,.roar-button{border:1px solid CanvasText;}}

.monster-dialogue { margin:0 0 14px;padding:10px 12px;background:#eef3e8;border-left:3px solid #74916b;border-radius:0 12px 12px 0; }
.dialogue-speaker { margin:0 0 5px;color:var(--teal-dark);font-size:.64rem;font-weight:900;letter-spacing:.02em; }
.monster-dialogue .q-prompt { margin:0;font-size:1rem;font-weight:500;line-height:1.4; }
.dialogue-line,.dialogue-task { display:block; }.dialogue-task { margin-top:8px;font-size:.9rem;font-weight:850; }
.monster-taunt { margin:12px 0 0;padding:9px 11px;background:#f6f0df;border-left:3px solid #b69758;border-radius:0 10px 10px 0; }
.monster-taunt>p:last-child { margin:0;font-size:.85rem;line-height:1.35;color:var(--ink); }.monster-taunt .target { color:var(--teal-dark);font-weight:900; }
@media(forced-colors:active){.monster-dialogue,.monster-taunt{border:1px solid CanvasText;}}


/* Answer feedback and contact-synchronized impact polish. */
.impact-chip { position:absolute;z-index:6;left:38%;top:28%;display:grid;place-items:center;width:24px;height:24px;opacity:0;border:1px solid color-mix(in srgb,var(--effect) 70%,white);border-radius:50%;background:#173526e8;color:var(--effect);font-size:.78rem;font-weight:900;line-height:1;box-shadow:0 0 12px color-mix(in srgb,var(--effect) 58%,transparent);pointer-events:none; }
.battle-stage:is([data-state="critical"],[data-state="standard"],[data-state="recovery"],[data-state="victory"]) .impact-chip { animation:impact-chip .30s cubic-bezier(.2,.8,.2,1) var(--contact) both; }
.question-card[data-feedback="correct"] { animation:answer-confirm .32s ease-out; }
.question-card[data-feedback="incorrect"] { animation:answer-rethink .26s ease-out; }
.question-card:is([data-feedback="assisted"],[data-feedback="recovery"]) { animation:answer-learn .30s ease-out; }
@keyframes impact-chip { 0%{opacity:0;transform:translateY(6px) scale(.55)}28%{opacity:1;transform:translateY(0) scale(1.08)}100%{opacity:0;transform:translateY(-12px) scale(.92)} }
@keyframes answer-confirm { 0%,100%{box-shadow:var(--shadow)}45%{box-shadow:0 0 0 3px #7fae7238,var(--shadow)} }
@keyframes answer-rethink { 0%,100%{transform:none;box-shadow:var(--shadow)}35%{transform:translateX(-2px);box-shadow:0 0 0 3px #c9985330,var(--shadow)}65%{transform:translateX(2px)} }
@keyframes answer-learn { 0%,100%{box-shadow:var(--shadow)}45%{box-shadow:0 0 0 3px #6e9e9c2d,var(--shadow)} }
@media (prefers-reduced-motion:reduce) { .question-card[data-feedback],.impact-chip { animation:none!important;transform:none!important; } }
@media (forced-colors:active) { .impact-chip { border:1px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none; } }


/* Teacher word-bank vocabulary grid */
.choice-list.word-bank { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.choice-list.word-bank .choice { min-height:44px; padding:10px 8px; }
@media (min-width:620px) { .choice-list.word-bank { grid-template-columns:repeat(3,minmax(0,1fr)); } }