:root{color-scheme:dark;--ink:#101c27;--panel:#172632;--line:#c4a26840;--gold:#e2b979;--text:#f1e9d9;--muted:#b0bcc0;--teal:#9dc9c0;--red:#f0a294;--paper:#efe1c4;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(13px,1.12vw,18px)}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:radial-gradient(ellipse at 20% 0,#233744 0,transparent 55%),#0c151d;color:var(--text)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:#ffffff04;border-radius:7px;padding:.65rem .9rem;transition:background .18s,border-color .18s,transform .18s}button:hover{background:#e2b97913;border-color:var(--gold)}button:active{transform:translateY(1px)}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}a{color:var(--gold)}[hidden]{display:none!important}.topbar{height:5.3rem;max-height:12vh;display:flex;align-items:center;justify-content:space-between;padding:0 2.2rem;border-bottom:1px solid var(--line);gap:1rem}.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--text)}.brand-mark{font:3.5rem Georgia,serif;color:var(--gold);line-height:1}.brand strong{font:1.2rem Georgia,serif;letter-spacing:.01em;display:block}.brand small{font-size:.57rem;letter-spacing:.22em;color:var(--gold);display:block;margin-top:.4rem}.top-actions{display:flex;align-items:center;gap:.5rem}.top-actions button{font-size:.76rem;white-space:nowrap}.edition{font-size:.56rem;letter-spacing:.14em;color:var(--muted);margin-right:.8rem}.shell{height:calc(100dvh - min(5.3rem,12vh));max-width:2200px;margin:0 auto;display:flex;padding:1rem 2.2rem 0;gap:1.2rem}.presentation{min-width:0;flex:1;display:flex;flex-direction:column}.location-bar{display:flex;justify-content:space-between;gap:.6rem;font-size:.66rem;letter-spacing:.05em;color:var(--muted);padding:.15rem .15rem .85rem}.location-bar>span:first-child:before{content:'◈';color:var(--gold);margin-right:.6rem}.stage{display:grid;grid-template-columns:1fr 1.02fr;flex:1;min-height:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:linear-gradient(115deg,#1e2e3a,#14212c);box-shadow:0 18px 60px #0005}.lesson{min-width:0;min-height:0;padding:clamp(20px,2.7vw,48px);display:flex;flex-direction:column;position:relative;container-type:inline-size}.lesson:before{content:'';position:absolute;left:0;top:0;width:3px;height:50px;background:var(--gold)}.eyebrow{color:var(--gold);font-size:.61rem;font-weight:650;letter-spacing:.16em;line-height:1.5}h1,h2,h3,p{margin:0}h1{font:clamp(1.9rem,3.1vw,3.9rem)/1.06 Georgia,"Times New Roman",serif;letter-spacing:-.035em;font-weight:400;margin:.8rem 0 1.15rem;text-wrap:balance;white-space:pre-line}h1:focus{outline:none}h2{font:2rem/1.12 Georgia,serif;margin:.6rem 0 1rem}h3{font-size:1rem}#sceneContent{display:flex;flex-direction:column;gap:.85rem}.lead{font-size:1.02rem;line-height:1.6;color:#d6dedc;max-width:48ch}.lesson-flow{min-height:0}.lesson-bottom{margin-top:auto;padding-top:.95rem;display:flex;flex-direction:column;gap:.75rem}.scene-note{font-size:.7rem;line-height:1.5;color:var(--muted);padding-left:.75rem;border-left:1px solid var(--gold)}.terms{display:flex;flex-wrap:wrap;gap:.3rem .6rem}.term{padding:0;border:0;border-bottom:1px dotted #e2b97950;border-radius:0;color:var(--gold);font-size:.68rem;background:none}.term:after{content:' ⓘ';font-size:.65rem}.actions{display:flex;flex-direction:column;gap:.45rem}.primary{color:#19212a;background:linear-gradient(120deg,#e9c88d,#cca164);border-color:#f2d29b;font-weight:650;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:1rem;padding:.8rem 1rem;box-shadow:0 3px 12px #0002}.primary:hover{background:#f3d8a6;color:#101c27}.primary .arrow{font-size:1.2rem}.choice{text-align:left;display:flex;align-items:center;gap:.75rem;background:#0b182345;padding:.7rem .8rem}.choice .choice-number{color:var(--gold);font:1.1rem Georgia,serif;border:1px solid var(--line);border-radius:50%;width:1.8rem;height:1.8rem;display:grid;place-items:center;flex-shrink:0}.choice strong{display:block;font-size:.82rem}.choice small{display:block;color:var(--muted);font-size:.65rem;line-height:1.45;margin-top:.15rem}.cards{display:flex;flex-direction:column;gap:.6rem}.card{padding:.65rem .85rem;background:#07121a45;border:1px solid #a9bdc019;border-radius:7px}.card strong{font-size:.8rem;display:block;color:#e7ce9e;margin-bottom:.25rem}.card p{font-size:.75rem;line-height:1.5;color:#c3cece}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.stat{padding:.8rem .65rem;background:#08152155;border:1px solid var(--line);border-radius:7px}.stat b{font:1.3rem Georgia,serif;display:block;color:var(--gold)}.stat strong{display:block;font-size:.71rem;margin:.3rem 0}.stat small{font-size:.63rem;color:var(--muted)}.steps{counter-reset:steps;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.step{font-size:.76rem;display:flex;gap:.6rem;align-items:center;padding:.75rem .5rem;border-top:1px solid var(--line)}.step:before{counter-increment:steps;content:counter(steps);font:1.5rem Georgia,serif;color:var(--gold)}
.art-panel{position:relative;min-width:0;min-height:0;overflow:hidden;border-left:1px solid var(--line);background:#132330}.map-background,.map-shade{position:absolute;inset:0}.map-background{background-image:url('/assets/gate.svg');background-position:65% 50%;background-size:cover;transition:filter .7s,background-position .7s}.art-panel.ruins .map-background{background-image:url('/assets/ruins.svg');background-position:50% 50%}.map-shade{background:linear-gradient(180deg,#07152290,transparent 25%,transparent 52%,#08121fc9);pointer-events:none}.art-panel.dark .map-background{filter:brightness(.24) saturate(.65)}.art-panel.dark .map-shade{background:radial-gradient(circle at 60% 45%,transparent,#02081366)}.map-caption{position:absolute;top:1.2rem;left:1.4rem;right:1.4rem;display:flex;align-items:center;gap:.5rem;font-size:.59rem;letter-spacing:.13em;text-shadow:0 1px 5px #000;z-index:2}.map-dot{width:5px;height:5px;background:var(--gold);border-radius:50%;box-shadow:0 0 12px var(--gold)}.map-hint{margin-left:auto;font-size:.57rem;letter-spacing:0;color:#e9e5d6}.tokens{position:absolute;inset:0 0 24%;}.token{position:absolute;left:var(--x);top:var(--y);padding:0;border:0;background:none!important;transform:translate(-50%,-50%);width:4.5rem;display:flex;align-items:center;flex-direction:column;transition:left .8s,top .8s}.token:active{transform:translate(-50%,-50%)}.token .portrait{width:3.8rem;height:3.8rem;border:3px solid #dfbd78;box-shadow:0 0 0 4px #0c141db0,0 12px 20px #000a;transition:transform .2s}.token:hover .portrait{transform:translateY(-4px)}.token.active .portrait{box-shadow:0 0 0 5px #dfbd7850,0 0 30px #f8db9460,0 12px 20px #000a}.token-name{white-space:nowrap;font-size:.61rem;background:#101b28ef;border:1px solid #d7b57570;border-radius:4px;padding:.2rem .45rem;margin-top:.55rem;color:#fff0d1}.portrait{background-image:url('/assets/portraits.svg');background-size:200% 200%;border-radius:50%;width:3rem;height:3rem;flex-shrink:0;background-position:0 0}.portrait.hero{background-position:0 0}.portrait.wizard{background-position:100% 0}.portrait.guard{background-position:0 100%}.portrait.goblin{background-position:100% 100%}.speech{position:absolute;bottom:3.2rem;left:1.5rem;right:1.5rem;padding:1.1rem 1.2rem;background:linear-gradient(115deg,#f2e8d2,#dfcda8);border:1px solid #fff1d2;border-radius:3px 14px 14px 14px;box-shadow:0 12px 32px #0007;display:flex;gap:.8rem;align-items:flex-start;color:#322f29}.speech:before{content:'';position:absolute;width:16px;height:16px;top:-8px;left:32px;background:#efe4ce;transform:rotate(45deg)}.speech .portrait{border:2px solid #99794d;z-index:1}.speech span{display:block;font-size:.61rem;text-transform:uppercase;font-weight:750;letter-spacing:.12em;color:#82643c;margin-bottom:.35rem}.speech p{font:italic 1.1rem/1.42 Georgia,serif;text-wrap:pretty}.map-bottom{position:absolute;bottom:1.1rem;left:1.5rem;right:1.5rem;display:flex;justify-content:space-between;align-items:center;color:#dbd5c9;font-size:.61rem;letter-spacing:.025em}.map-bottom>span:last-child{color:var(--gold);font-size:1.3rem}.hero-scene h1{font-size:clamp(2.5rem,4.2vw,5rem);line-height:1.04}.hero-scene .lead{max-width:35ch}.hero-scene .art-panel .map-background{background-position:65% 50%}.hero-scene .lesson{justify-content:center}.hero-scene .lesson-bottom{margin-top:1.5rem}.footer{height:4.4rem;max-height:12vh;display:flex;align-items:center;justify-content:space-between;gap:1rem}.footer-nav{display:flex;gap:.4rem}.footer button{font-size:.69rem;border-color:transparent;background:none;padding:.5rem .55rem}.footer button:hover{border-color:var(--line)}.keyboard{font-size:.61rem;color:#889b9f}.chapter-trail{display:flex;align-items:center;gap:.75rem}.trail-dot{border-radius:50%;width:.65rem!important;height:.65rem!important;min-width:0;padding:0!important;border:1px solid #aeb6b369!important;background:transparent!important}.trail-dot.active{background:var(--gold)!important;border-color:var(--gold)!important;box-shadow:0 0 0 4px #e2b97917}.trail-dot.done{background:#9dc9c066!important}.journey{width:13rem;flex-shrink:0;padding-top:1.4rem;display:flex;flex-direction:column}.rail-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}.rail-top button{border:0;font-size:1.4rem;padding:0 .6rem}.act-item{display:flex;gap:.6rem;align-items:center;padding:.85rem .4rem;border-left:1px solid #b7b7973a}.act-item.active{border-left:2px solid var(--gold);background:linear-gradient(90deg,#d2ad7020,transparent)}.act-item b{color:var(--gold);font:1rem Georgia,serif;width:1.25rem;text-align:center;flex-shrink:0}.act-item strong{font-size:.7rem;display:block}.act-item small{font-size:.61rem;color:var(--muted);display:block;margin-top:.3rem}.rail-note{font-size:.65rem;line-height:1.7;color:var(--muted);margin-top:1.5rem}.rail-progress{margin-top:auto;padding-bottom:2.4rem;font-size:.63rem;color:var(--muted)}progress{width:100%;height:4px;appearance:none;border:0;display:block;margin-top:.8rem}progress::-webkit-progress-bar{background:#34444b}progress::-webkit-progress-value{background:var(--gold)}
.dice-box{border:1px solid var(--line);border-radius:9px;padding:1rem;background:linear-gradient(140deg,#091925b5,#26374255)}.dice-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.dice-label{font-size:.63rem;letter-spacing:.09em;color:var(--gold);text-transform:uppercase}.dice-target{font-size:.66rem;color:var(--muted)}.dice-row{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:.75rem 0}.die{display:grid;place-items:center;width:3.7rem;height:3.7rem;clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);background:linear-gradient(135deg,#dfbf7f,#8f693a);color:#19212a;font:1.65rem Georgia,serif;position:relative;flex-shrink:0}.die:after{content:'';position:absolute;inset:5px;border:1px solid #322c2944;clip-path:inherit}.die.discarded{opacity:.38;background:#91a0a5;text-decoration:line-through}.die.chosen{background:linear-gradient(130deg,#f9e1a4,#d4a660)}.die-pair{display:flex;gap:.45rem;align-items:center}.die-tag{display:block;text-align:center;font-size:.52rem;color:var(--muted);margin-top:.2rem}.math{font:1.25rem Georgia,serif;color:var(--gold);white-space:nowrap}.roll-btn{font-size:.77rem;background:#e2b97912;color:var(--gold);display:block;width:100%}.roll-result{font-size:.77rem;line-height:1.5;margin-top:.65rem;min-height:2.3em}.roll-result strong{color:var(--gold)}.roll-result .success{color:var(--teal)}.roll-result .failure{color:var(--red)}.tiny{font-size:.65rem;color:var(--muted);line-height:1.5}.example-badge{display:inline-block;background:#e2b97915;border:1px solid var(--line);font-size:.55rem;padding:.15rem .4rem;border-radius:3px;color:var(--gold);margin-bottom:.5rem}.initiative-list{display:flex;flex-direction:column;gap:.45rem}.initiative-row{display:flex;gap:.7rem;align-items:center;background:#0d192375;padding:.5rem .7rem;border-radius:7px;border:1px solid transparent}.initiative-row.you{border-color:var(--gold)}.initiative-row .portrait{width:2rem;height:2rem}.initiative-row strong{font-size:.8rem}.initiative-row small{font-size:.66rem;color:var(--muted)}.initiative-row b{font:1.3rem Georgia,serif;margin-left:auto;color:var(--gold)}.practice-options{display:flex;flex-direction:column;gap:.4rem}.practice-options button{text-align:left;font-size:.73rem;padding:.6rem .7rem}.practice-options button[aria-pressed=true]{border-color:var(--gold);background:#e2b97915}.feedback{font-size:.76rem;line-height:1.5;padding:.65rem .75rem;border-left:2px solid var(--gold);background:#e2b9790a}.recap-links{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.recap-links button{font-size:.75rem;text-align:left}.page-control{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.63rem;border-top:1px solid var(--line);padding-top:.6rem}.page-control button{font-size:.7rem;padding:.5rem}.lesson.compact{padding:1.5rem}.lesson.compact h1{font-size:2rem;margin:.6rem 0 .75rem}.lesson.compact #sceneContent{gap:.6rem}.lesson.compact .lead{font-size:.88rem;line-height:1.45}.lesson.compact .lesson-bottom{gap:.5rem;padding-top:.6rem}.lesson.compact .card{padding:.5rem .7rem}.lesson.compact .card p{font-size:.7rem}.lesson.compact .dice-box{padding:.65rem}.lesson.compact .dice-row{margin:.5rem 0}.lesson.compact .scene-note{font-size:.65rem}.lesson.compact .choice{padding:.5rem .7rem}.lesson.compact .primary{padding:.6rem .85rem}.lesson.compact .die{width:3rem;height:3rem;font-size:1.35rem}.lesson.compact .roll-result{min-height:0}.lesson.compact .terms{gap:.2rem .5rem}
dialog{color:var(--text);background:linear-gradient(125deg,#21333f,#14232e);border:1px solid #b9955b90;box-shadow:0 30px 100px #000a;border-radius:12px;width:min(800px,92vw);max-height:86dvh;padding:1.7rem;overflow:auto}dialog::backdrop{background:#030a13be;backdrop-filter:blur(8px)}#infoDialog{width:min(620px,92vw)}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.dialog-header button{font-size:1.5rem;line-height:1;padding:.2rem .5rem;border:0}#infoBody{font-size:.95rem;line-height:1.7;color:#ced8d7}#infoBody p{margin:.8rem 0}#rulesLink{display:inline-block;font-size:.8rem;margin-top:1.2rem}.search-label{font-size:.72rem;color:var(--muted);display:block;margin-bottom:.4rem}input{width:100%;background:#0b1924;border:1px solid var(--line);border-radius:6px;padding:.8rem;color:var(--text);font:inherit;font-size:.9rem}.chapter-grid{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem}.chapter-group{color:var(--gold);font-size:.7rem;letter-spacing:.1em;margin:1rem 0 .3rem}.chapter-link{display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:.82rem;padding:.75rem}.chapter-link small{font-size:.65rem;color:var(--muted)}.text-button{font-size:.75rem;color:var(--gold);margin-top:1.2rem}.tooltip{position:fixed;z-index:20;max-width:300px;pointer-events:none;background:#eadfc7;color:#252e31;padding:.8rem 1rem;border-radius:8px;box-shadow:0 10px 30px #0008;font-size:.77rem;line-height:1.5}.tooltip strong{display:block;font-size:.8rem;margin-bottom:.3rem}.tooltip small{display:block;margin-top:.4rem;color:#776442}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fade{animation:appear .3s ease-out}.rolling{animation:tumble .3s ease-in-out}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes tumble{50%{transform:rotate(20deg) scale(.8)}}
@media(min-width:1600px){.stage{grid-template-columns:1fr 1.1fr}.lesson{padding:2.7rem}}
@media(max-height:780px) and (min-width:761px){:root{font-size:14px}.topbar{height:65px}.shell{height:calc(100dvh - 65px);padding-top:10px}.location-bar{padding-bottom:8px}.footer{height:48px}.lesson{padding:24px 30px}h1{font-size:2.7rem;margin:.65rem 0 .85rem}.hero-scene h1{font-size:3.5rem}.lead{font-size:.95rem;line-height:1.5}.lesson-bottom{gap:.6rem;padding-top:.8rem}.card{padding:.55rem .75rem}.speech{padding:.9rem 1rem}.hero-scene .lesson-bottom{margin-top:1rem}}
@media(max-width:1050px){.topbar{padding:0 1rem}.shell{padding-left:1rem;padding-right:1rem}.edition{display:none}.journey{position:absolute;z-index:8;background:#152631f7;top:5.3rem;bottom:0;left:0;padding:1.2rem;width:16rem;box-shadow:20px 0 40px #0006;border-right:1px solid var(--line)}.stage{grid-template-columns:1.08fr 1fr}.lesson{padding:1.4rem}.map-hint{display:none}.speech{left:1rem;right:1rem}.keyboard{display:none}.hero-scene h1{font-size:3rem}}
@media(max-width:760px){:root{font-size:14px}.topbar{height:56px;max-height:none;padding:0 .8rem}.brand strong{font-size:.95rem}.brand small{font-size:.45rem;letter-spacing:.14em}.brand-mark{font-size:2.5rem}.top-actions{gap:.2rem}.top-actions button{padding:.4rem;font-size:1rem}.top-actions button span{display:none}.shell{height:calc(100dvh - 56px);padding:8px .7rem 0}.location-bar{font-size:.57rem;padding:0 3px 6px}.stage{display:flex;flex-direction:column-reverse}.art-panel{height:26%;min-height:100px;flex-shrink:0;border-left:0;border-bottom:1px solid var(--line)}.lesson{flex:1;min-height:0;padding:1rem 1.2rem}.hero-scene .art-panel{height:38%}.hero-scene h1{font-size:2.7rem}.hero-scene .lesson{justify-content:flex-start}.hero-scene .lesson-bottom{margin-top:auto}.map-caption{top:.6rem;left:.8rem;right:.8rem;font-size:.5rem}.map-bottom{display:none}.tokens{inset:1rem 50% 0 0}.token{width:2.7rem}.token .portrait{width:2.3rem;height:2.3rem;border-width:2px}.token-name{font-size:.48rem;margin-top:.25rem;padding:.1rem .25rem}.speech{left:51%;right:.6rem;bottom:.7rem;top:2.1rem;padding:.55rem .65rem;display:block;overflow:visible;border-radius:4px 9px 9px 9px}.speech .portrait{display:none}.speech:before{width:10px;height:10px;left:-5px;top:12px}.speech span{font-size:.47rem;margin-bottom:.2rem}.speech p{font-size:.82rem;line-height:1.3}.map-background{background-position:50% 55%}h1{font-size:1.85rem;margin:.45rem 0 .65rem;line-height:1.08;white-space:normal}.eyebrow{font-size:.53rem}.lead{font-size:.83rem;line-height:1.48}.card{padding:.45rem .6rem}.card strong{font-size:.73rem}.card p{font-size:.67rem}.cards{gap:.4rem}#sceneContent{gap:.55rem}.scene-note{font-size:.62rem}.lesson-bottom{gap:.5rem;padding-top:.55rem}.terms .term{font-size:.61rem}.primary{padding:.65rem .8rem;font-size:.81rem}.choice{padding:.45rem .6rem}.choice strong{font-size:.76rem}.choice small{font-size:.59rem}.footer{height:42px;max-height:none}.footer button{font-size:.62rem;padding:.4rem}.chapter-trail{gap:.55rem}.journey{top:56px}.dice-box{padding:.6rem}.dice-row{margin:.5rem 0}.die{width:2.8rem;height:2.8rem;font-size:1.3rem}.roll-result{font-size:.7rem;min-height:0;margin-top:.4rem}.math{font-size:1.1rem}.roll-btn{font-size:.73rem;padding:.5rem}.stat{padding:.45rem}.stat b{font-size:1.1rem}.stat strong{font-size:.64rem}.stat small{font-size:.58rem}.stats{gap:.4rem}.lesson.compact{padding:.8rem 1rem}.lesson.compact h1{font-size:1.7rem;margin:.4rem 0 .5rem}.lesson.compact .lead{font-size:.78rem}.lesson.compact .scene-note{font-size:.6rem}.lesson.compact .card p{font-size:.65rem}.lesson.compact .card{padding:.4rem .6rem}.lesson.compact .die{width:2.5rem;height:2.5rem}.lesson.compact .lesson-bottom{gap:.4rem}.hero-scene .speech p{font-size:.95rem}}
@media(max-height:550px){.topbar{height:42px}.shell{height:calc(100dvh - 42px)}.location-bar{padding-bottom:4px}.footer{height:35px}.topbar .brand small{display:none}.lesson{padding:1rem}.lesson h1{font-size:1.65rem;margin:.4rem 0 .5rem}.lesson .lead{font-size:.78rem}.lesson .lesson-bottom{gap:.4rem}.speech p{font-size:.9rem}.art-panel{min-height:85px}.map-bottom{display:none}.speech{bottom:1rem}.lesson .scene-note{font-size:.61rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:760px) and (max-height:650px){.art-panel{display:none}.stage{flex-direction:column}.lesson{flex:1}.hero-scene .art-panel{display:none}}
@media(max-width:760px) and (min-height:651px){.speech{top:auto;bottom:.6rem}.speech p{font-size:.78rem;line-height:1.3}}

/* Adventure edition: keep the existing presentation and add story interactions. */
:root{--gold:#e6c182}.stage{background:linear-gradient(115deg,#25302f,#15232b)}.brand strong{letter-spacing:.015em}.lesson:before{height:90px;background:linear-gradient(var(--gold),transparent)}.guided-label{display:block;color:var(--muted);font-size:.62rem;margin-top:.35rem}.resource-card{padding:1rem;border:1px solid var(--line);border-radius:10px;background:#101c23a8}.hp-status{display:flex;flex-direction:column;gap:.4rem;font-size:.78rem;margin-bottom:.7rem}.hp-status>span{display:flex;justify-content:space-between;gap:1rem}.hp-status b{color:var(--gold)}meter{width:100%;height:12px}meter::-webkit-meter-bar{background:#304343;border:0}meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#64978c,#a8cc9b)}.resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:.8rem 0}.resource-grid span{font-size:.66rem;color:var(--muted)}.resource-grid b{display:block;font-size:.93rem;color:var(--text);margin-top:.2rem}.resource-grid span:last-child{grid-column:1/-1}.restored{animation:restore 1s ease-out}.component-row{display:flex;gap:.5rem}.component-row button{flex:1;text-align:left;padding:.7rem}.component-row b{display:block;font:1.7rem Georgia,serif;color:var(--gold)}.component-row span{font-size:.65rem;line-height:1.4}.quest-done{padding:1rem;border:1px solid var(--line);background:#d9b26e15;color:var(--gold);font:1.1rem Georgia,serif}.critical-impact{animation:critical 1s ease-out;border-color:var(--gold)}.critical-impact .die{background:linear-gradient(120deg,#fff0b4,#d9a951);box-shadow:0 0 25px #edc16888}.art-panel.camp .map-background,.art-panel.forest .map-background{background-image:url('/assets/camp.svg')}.art-panel.forest .map-background{background-size:auto 135%;background-position:100% 40%;filter:brightness(.75) saturate(.75)}.art-panel.camp:after{content:'';position:absolute;inset:35% 25% 35% 15%;pointer-events:none;background:radial-gradient(ellipse,#ffb86044,transparent 65%);animation:embers 3s infinite alternate}.art-panel.forest:after{content:'';position:absolute;inset:20% -30% 20%;pointer-events:none;background:linear-gradient(15deg,transparent,#d7e9e018,transparent,#eaf2eb22,transparent);filter:blur(16px);animation:mist 16s infinite alternate linear}.token .portrait{background-size:240% 240%}.portrait.hero{background-position:7% 8%}.portrait.wizard{background-position:93% 8%}.portrait.guard{background-position:7% 92%}.portrait.goblin{background-position:93% 92%}.speech .portrait{background-size:240% 240%}.token{z-index:2}.token.defeated{opacity:.5}.token.defeated .portrait{filter:saturate(.3)}.crystal{position:absolute;left:62%;top:47%;font-size:2.4rem;color:#b1ece7;text-shadow:0 0 20px #a5ebe1,0 0 45px #befcee;animation:embers 2.5s infinite alternate}.spell-scene .map-background{filter:brightness(1.2)}.spell-scene:after{content:'✧     ✧      ✧';position:absolute;left:30%;top:30%;color:#d3f7ff;font-size:3rem;text-shadow:0 0 20px #bce9ff;pointer-events:none}.victory-scene .map-background{filter:brightness(1.1) saturate(1.12)}.movement-instruction{font-size:.86rem;line-height:1.5;color:#ead3a3}.move-path{position:absolute;left:1.5%;right:7.5%;top:40%;display:grid;grid-template-columns:repeat(7,1fr);height:17%;border:1px solid #eed49c99;background:#132226bb;border-radius:5px}.move-path span{display:grid;place-items:center;border-right:1px solid #e3c58366;color:#ead3a3;font-size:.7rem;background:#dfc28014}.move-path span:last-child{background:#e8c17c44;border-right:0}.move-target{position:absolute;left:80%;top:64%;z-index:3;border-color:#ffe0a0;background:#223b3bed;color:#ffe0a0;padding:.5rem;font-size:.72rem;min-height:44px;min-width:44px}.token[data-movable]{touch-action:none;cursor:grab;transition:left .11s linear,top .2s}.token.dragging{transition:none;cursor:grabbing}.death-track{padding:.8rem;border:1px solid var(--line);border-radius:7px;font-size:.8rem;line-height:1.8}.death-track span{letter-spacing:.3rem;color:var(--gold)}.lesson-flow{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;flex-shrink:1}.lesson-bottom{flex-shrink:0}.speech{z-index:3}.speech p{font-size:1rem}.move-target:focus-visible{outline:3px solid #fff1bf}.rolling{animation:tumble .2s ease-in-out infinite}.choice{min-height:44px}.term{min-height:28px}
@keyframes restore{0%{box-shadow:0 0 0 #a3d0a400}45%{box-shadow:0 0 25px #a3d0a450}100%{box-shadow:0 0 0 #a3d0a400}}@keyframes critical{40%{box-shadow:0 0 35px #e8ba6966;transform:scale(1.015)}100%{transform:scale(1)}}@keyframes embers{to{opacity:.6}}@keyframes mist{to{transform:translateX(14%)}}
@media(max-width:760px){.speech p{font-size:.79rem}.resource-card{padding:.6rem}.resource-grid{gap:.4rem;margin:.5rem 0}.component-row button{padding:.45rem}.movement-scene.art-panel{display:block!important;height:34%!important;min-height:165px}.movement-scene .tokens{inset:1.5rem .5rem 0}.movement-scene .speech{display:none}.movement-scene .token .portrait{width:2.6rem;height:2.6rem}.move-target{top:69%;padding:.3rem;font-size:.65rem}.movement-scene .map-caption{top:.5rem}.move-path{height:22%}.movement-instruction{font-size:.78rem}.quest-done{padding:.65rem;font-size:.94rem}.component-row span{font-size:.6rem}.resource-grid span{font-size:.62rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* V5: the image and tokens share one uncropped coordinate plane. */
.art-panel:not(.tactical){display:flex;flex-direction:column;justify-content:center;padding:3rem 0 1rem;background:#101c24}
.art-panel:not(.tactical) .map-background{position:relative;inset:auto;width:100%;aspect-ratio:1.6;background-size:100% 100%;background-position:center;flex-shrink:0}
.art-panel.camp:not(.tactical) .map-background,.art-panel.forest:not(.tactical) .map-background{aspect-ratio:1.5;background-size:100% 100%;filter:none}
.art-panel:not(.tactical) .tokens{inset:auto;top:50%;left:0;width:100%;aspect-ratio:1.6;transform:translateY(calc(-50% - 2.2rem))}
.art-panel.camp:not(.tactical) .tokens,.art-panel.forest:not(.tactical) .tokens{aspect-ratio:1.5}
.art-panel:not(.tactical) .speech{position:relative;inset:auto;margin:1rem 1rem 2rem;flex-shrink:0}
.art-panel:not(.tactical) .map-shade{display:none}.art-panel.camp:after,.art-panel.forest:after{display:none}
.art-panel:not(.tactical) .token{width:3.7rem;transform:translate(-50%,-80%)}
.art-panel:not(.tactical) .token .portrait{width:3.1rem;height:3.1rem}
.rest-change{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.85rem}.rest-change span{color:var(--muted)}.rest-change strong{color:var(--teal)}
.tactical{display:flex;flex-direction:column;justify-content:center;padding:3rem 1rem;gap:1rem;background:radial-gradient(ellipse,#344541,#0d1b24)}
.tactical .map-background,.tactical .map-shade{display:none}.tactical .tokens{position:relative;inset:auto;aspect-ratio:8/5;flex-shrink:0;width:100%;max-width:720px;margin:0 auto}
.battle-grid{position:relative;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(5,1fr);width:100%;height:100%;background-image:linear-gradient(#07132120,#07132120),url('/assets/ruins.svg');background-size:100% 100%,192.3% 200%;background-position:center,50% 58%;border:1px solid #d9caa1;border-radius:5px;box-shadow:0 10px 40px #0008;overflow:hidden}
.grid-cell{min-width:0;padding:0;border:1px solid #f5e7bf40;border-radius:0;aspect-ratio:1;position:relative;background:#06151b10;display:grid;place-items:center;font-size:1.1rem;color:var(--gold)}.grid-cell.route{background:#e5c17825}.grid-cell.goal{background:#e5c17870;box-shadow:inset 0 0 0 2px #ffe7a5}.grid-cell:hover{background:#ffe7a544}.grid-cell:focus-visible{outline:-webkit-focus-ring-color auto 1px;box-shadow:inset 0 0 0 3px #fff1bc;z-index:2}.grid-coordinate{font-size:.55rem;color:#f1e6cb90;position:absolute;top:3px;left:4px}.grid-cell .portrait{width:72%;height:auto;aspect-ratio:1;border:2px solid #f0d9a7;box-shadow:0 3px 10px #000b;background-size:240% 240%}.grid-name{position:absolute;bottom:1px;font-size:.52rem;background:#102127df;padding:0 3px;border-radius:2px}.grid-cell[data-grid-hero]{touch-action:none;cursor:grab}.grid-cell .down{filter:grayscale(1);transform:rotate(70deg);opacity:.7}.moonlight{background-image:linear-gradient(#06132950,#06132950),url('/assets/ruins.svg')}
.play-stage .lesson-flow{flex:1;min-height:0;overflow:auto;padding-right:.4rem}.play-stage .lesson{padding:1.5rem}.play-stage h1{font-size:2rem;margin:.6rem 0 .9rem}.play-stage .lesson-bottom{padding-top:.5rem}.play-stage .terms{gap:.3rem .6rem}.play-stage .term{font-size:.7rem}.play-stage .map-hint{display:none}
.combat-health{display:flex;gap:.5rem;justify-content:space-between;padding-bottom:.65rem;border-bottom:1px solid var(--line);font-size:.78rem}.combat-health b{display:block;color:var(--teal);margin-top:.2rem;font-size:1rem}.turn-budget{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;font-size:.66rem}.turn-budget span{padding:.55rem .4rem;background:#07182090;border:1px solid var(--line);border-radius:5px}.turn-budget b{display:block;color:var(--gold);margin-top:.25rem;font-size:.78rem}.dm-message{padding:.8rem .9rem;border-left:2px solid var(--gold);background:#e4c0810b}.dm-message p{font-size:.95rem;line-height:1.55;margin-top:.4rem}.turn-menu{display:flex;flex-wrap:wrap;gap:.4rem}.turn-menu button{font-size:.78rem;flex:1;min-width:8rem;min-height:44px}.action-picker{display:flex;flex-direction:column;gap:.4rem;padding:.65rem;background:#06131c55;border-radius:6px}.action-picker button{font-size:.8rem;text-align:left;min-height:44px}.encounter-next{display:flex;gap:.5rem;flex-wrap:wrap}.encounter-next button{background:var(--gold);color:#14212a;font-weight:650;min-height:44px;font-size:.88rem}.encounter-next button+button{background:none;color:var(--text)}.encounter-roll{padding:.6rem;border:1px solid var(--line);border-radius:6px}.encounter-roll .dice-row{margin:.5rem 0 0}.guided-footnote{font-size:.68rem;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);padding-top:.7rem}.board-help{font-size:.8rem;line-height:1.55;color:#d6c9ac}.movement-budget{font-size:.85rem}.movement-budget strong{color:var(--gold)}.inspiration-used{padding:.6rem;border:1px solid var(--gold);margin-bottom:.6rem}
@media(max-width:760px){
 .art-panel:not(.tactical){height:27%;min-height:145px;display:block;padding:0;background:#101c24}
 .art-panel:not(.tactical) .map-background{position:absolute;width:51%;top:50%;transform:translateY(-50%)}
 .art-panel:not(.tactical) .tokens{top:50%;width:51%;transform:translateY(-50%)}
 .art-panel:not(.tactical) .speech{position:absolute;left:53%;right:.5rem;top:50%;transform:translateY(-50%);margin:0;padding:.5rem;font-size:.8rem}
 .art-panel:not(.tactical) .token{width:2rem}.art-panel:not(.tactical) .token .portrait{width:1.75rem;height:1.75rem}.art-panel:not(.tactical) .token-name{font-size:.45rem}.art-panel:not(.tactical) .map-caption{display:none}
 .play-stage .art-panel.tactical{display:flex!important;height:auto!important;min-height:0;max-height:none;padding:.5rem .5rem .25rem;gap:.25rem}
 .tactical .map-caption{position:static;inset:auto;margin:0;font-size:.5rem}.tactical .tokens{max-width:360px;aspect-ratio:8/5}.tactical .map-bottom{display:block;position:static;text-align:center;font-size:.56rem}.tactical .map-bottom>span:last-child{display:none}
 .play-stage .lesson{padding:.75rem 1rem}.play-stage h1{font-size:1.55rem;margin:.3rem 0 .65rem}.play-stage .terms{display:none}.play-stage .lesson-bottom:has(#actions:empty){padding:0}.dm-message{padding:.6rem}.dm-message p{font-size:.87rem}.turn-budget{font-size:.6rem}.turn-budget b{font-size:.72rem}.combat-health{font-size:.7rem}.combat-health b{font-size:.85rem}.grid-name{font-size:.52rem}.grid-coordinate{font-size:.55rem}.guided-footnote{font-size:.66rem}
}
@media(max-height:550px) and (min-width:761px){.play-stage .lesson{padding:.6rem 1rem}.play-stage h1{font-size:1.4rem}.tactical{padding:2rem .8rem 1rem}.play-stage .terms{display:none}.dm-message p{font-size:.84rem}.tactical .tokens{max-width:380px}.tactical .map-caption{top:.5rem}.tactical .map-bottom{bottom:.4rem;display:block}}
@media(max-width:760px) and (max-height:650px){.play-stage{overflow-y:auto;display:block}.play-stage .art-panel.tactical{min-height:0;height:auto!important}.play-stage .lesson{min-height:270px}.play-stage .lesson-flow{overflow:visible}.tactical .tokens{max-width:320px}}
.art-panel:not(.tactical) .map-background>.tokens{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none}
.combat-hud{position:sticky;top:0;z-index:4;background:#202f31;padding:.35rem 0 .65rem;box-shadow:0 5px 10px #18262970}.combat-hud .turn-budget{margin-top:.55rem}.grid-cell.route{background:#e5c17844;border-color:#e7c88990}.grid-cell.route:not(.goal):after{content:'';width:7px;height:7px;border-radius:50%;background:#ffe1a0;box-shadow:0 0 8px #ffdb9299;pointer-events:none}
.play-stage .fade{animation:none}.term:after{content:' i';font-family:Georgia,serif;font-style:italic}
.grid-cell{touch-action:none}