*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);padding:max(0px,env(safe-area-inset-top)) max(0px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left))}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;min-height:44px}
button:focus-visible,summary:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
button:not(:disabled):active{transform:translateY(1px)}
button:disabled{cursor:default}
.mast{border-bottom:1px solid var(--line);max-width:1180px;margin:auto;padding:var(--s2) var(--s5);display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:750;padding:0}
.brand img{width:34px;height:34px}.quiet{text-decoration:underline;text-underline-offset:4px;padding:var(--s1)}.quiet:hover{color:var(--rust)}
main{max-width:1180px;margin:auto;padding:var(--s5)}
.hero{display:grid;grid-template-columns:minmax(340px, .85fr) minmax(0,1.15fr);background:var(--green);color:var(--white-ink);min-height:530px;border:1px solid var(--green);overflow:hidden}
.cover-copy{padding:clamp(28px,5vw,76px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.cover-art{width:100%;height:100%;object-fit:cover;min-height:0}
.kicker{font-size:.82rem;font-weight:750;letter-spacing:.13em;margin:0 0 var(--s3)}
.hero h1{font:900 clamp(3rem,6.5vw,6rem)/1.02 var(--serif);margin:0 0 var(--s3);letter-spacing:.03em}
.english{font:italic 1.5rem Georgia,serif;margin:0 0 var(--s4);color:var(--white-ink)}
.description{margin:0 0 var(--s4);max-width:20rem}
.primary{background:var(--green);color:var(--white-ink);padding:var(--s2) var(--s4);font-weight:700;border:1px solid var(--green);min-height:48px}
.primary:hover{filter:brightness(1.15)}.hero .primary{background:var(--white-ink);color:var(--green);border-color:var(--white-ink)}
.bottom-line{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:var(--s3) 0;gap:var(--s2);font-size:.88rem;color:var(--muted)}
.page{max-width:820px;margin:auto}.page h1{font:850 clamp(2.3rem,5vw,3.8rem)/1.13 var(--serif);margin:var(--s2) 0}.page p{max-width:46rem}
.pagehead{margin-bottom:var(--s4)}.pagehead .kicker,.eyebrow{color:var(--rust)}.back{display:block;padding:0;text-decoration:underline;text-underline-offset:4px;margin-bottom:var(--s3)}
.unit-list{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:3rem 1fr auto;text-align:left;align-items:center;gap:var(--s3);width:100%;padding:var(--s3) var(--s1);border-bottom:1px solid var(--line)}
.row:hover{background:var(--wash)}.num{font:italic 1.4rem Georgia,serif;color:var(--rust)}
.row strong{display:block;font-size:1.18rem}.row small,.subtle{color:var(--muted)}.row small{display:block;overflow-wrap:anywhere}
.marker{color:var(--green);font-size:.83rem;text-align:right}
.sheet{border-top:2px solid var(--green);border-bottom:1px solid var(--line);background:var(--page);padding:clamp(18px,4vw,40px)}
.topline{display:flex;justify-content:space-between;gap:var(--s2);align-items:center;font-size:.88rem}
progress{display:block;width:100%;height:8px;margin:var(--s2) 0 var(--s4);accent-color:var(--green)}
.word{font:600 clamp(2.15rem,6vw,4rem)/1.13 Georgia,serif;overflow-wrap:anywhere;margin:var(--s3) 0}
.listen{border:1px solid var(--green);color:var(--green);font-weight:700;padding:var(--s2) var(--s3);display:inline-flex;align-items:center;gap:var(--s1)}
.listen svg{width:20px;height:20px}.listen:hover{background:var(--wash)}
.actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.choice{display:block;width:100%;text-align:left;border:1px solid var(--line);margin:var(--s1) 0;padding:var(--s2) var(--s3);min-height:53px}
.choice:hover:not(:disabled){background:var(--wash)}.choice.correct{background:var(--wash);border:2px solid var(--green);font-weight:700}.choice.miss{border:2px solid var(--rust);color:var(--rust)}
.feedback{margin:var(--s3) 0 0;font-weight:700}.feedback:empty{display:none}.taskline{border-left:3px solid var(--rust);padding-left:var(--s3);color:var(--muted)}
.stamp{width:max-content;max-width:100%;transform:rotate(-4deg);border:3px double var(--rust);color:var(--rust);padding:var(--s2) var(--s4);font:800 1.4rem var(--serif);margin:var(--s3) 0 var(--s4)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:680px){.mast,main{padding:var(--s2) var(--s3)}.hero{grid-template-columns:1fr;min-height:0}.cover-copy{padding:var(--s4)}.hero h1{font-size:3.35rem}.cover-art{height:auto;max-height:360px;object-fit:cover;aspect-ratio:1.22}.bottom-line{font-size:.77rem}.row{grid-template-columns:2rem 1fr auto;gap:var(--s2)}.row strong{font-size:1.03rem}.word{font-size:clamp(2rem,9vw,3rem)}}
@media(prefers-reduced-motion:reduce){button:not(:disabled):active{transform:none}}
progress{appearance:none;-webkit-appearance:none;border:0;background:var(--wash)}
progress::-webkit-progress-bar{background:var(--wash)}
progress::-webkit-progress-value{background:var(--green)}
progress::-moz-progress-bar{background:var(--green)}
/* The camp shares the battle's stone, brass and pixel artwork. */
.hero{background:var(--page);color:var(--hero-ink);border:var(--pixel-edge) solid var(--line);box-shadow:var(--s1) var(--s1) 0 var(--deep)}
.hero .primary{background:var(--green);color:var(--white-ink);border-color:var(--green)}
.hero h1{font-weight:950;letter-spacing:.08em;text-shadow:var(--pixel-edge) var(--pixel-edge) var(--deep)}
.english{font:700 .9rem var(--sans);letter-spacing:.2em;color:var(--green)}
.cover-art,.brand img{image-rendering:pixelated}
.cover-art{object-fit:cover;object-position:center}
.description{color:var(--muted)}
.unit-list{border-top:var(--pixel-edge) solid var(--line)}
.row{padding:var(--s4) var(--s2)}
.num{font:800 1.4rem monospace;color:var(--green)}
.sheet{border:var(--pixel-edge) solid var(--line);box-shadow:var(--s1) var(--s1) 0 var(--deep)}
.choice.correct{color:var(--ink)}
@media(max-width:680px){.hero{display:flex;flex-direction:column-reverse}.cover-art{height:240px;max-height:240px;object-position:50% 48%}.hero h1{font-size:3rem}.hero h1 br{display:none}.cover-copy{padding:var(--s4)}.description{margin-bottom:var(--s3)}.hero .kicker{margin-bottom:var(--s2)}.row{padding:var(--s3) var(--s1)}}
@media(max-width:680px){.cover-art{height:auto;max-height:none;aspect-ratio:1;object-fit:contain}}
/* The title is a scene in the game, not an illustrated book cover. */
.title-screen .mast{display:none}
.title-screen main{max-width:none;padding:0}
.dungeon-title{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--paper);isolation:isolate}
.title-world{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.title-heading{position:absolute;top:9%;left:0;right:0;text-align:center;padding:var(--s3);color:var(--ink);text-shadow:4px 4px var(--deep)}
.title-heading .kicker{color:var(--green);font-family:monospace;letter-spacing:.3em;margin-bottom:var(--s2)}
.title-heading h1{font:950 clamp(3.5rem,8vw,6rem)/1.15 var(--sans);letter-spacing:.14em;padding-left:.14em;-webkit-text-stroke:1px var(--deep);filter:drop-shadow(0 5px var(--deep))}
.title-edition{margin:var(--s3) auto;color:var(--ink);font-size:.9rem}
.title-menu{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);display:grid;gap:var(--s2);width:min(280px,76vw)}
.title-menu button{border:3px solid var(--line);box-shadow:4px 4px 0 var(--deep);font-weight:800;letter-spacing:.1em;padding:var(--s2) var(--s4);min-height:56px}
.title-menu .primary{border-color:var(--ink);background:var(--green);color:var(--deep)}
.title-menu .camp-button{background:var(--page);color:var(--ink)}
.title-menu button:hover{filter:brightness(1.15)}
.title-footer{position:absolute;bottom:4%;left:0;right:0;text-align:center;max-width:none;color:var(--ink);font-size:.75rem;text-shadow:2px 2px var(--deep)}
@media(max-width:480px){.title-heading{top:12%}.title-heading h1{font-size:3.3rem}.title-menu{bottom:13%}.dungeon-title{min-height:580px}}
.title-heading .kicker{max-width:none;margin-left:auto;margin-right:auto}
/* One game interface across the camp, dungeon doors, spells and results. */
body:not(.title-screen){background-image:var(--dungeon-floor);background-size:64px 64px;background-color:var(--paper);background-blend-mode:multiply;background-attachment:fixed;image-rendering:pixelated}
.mast{max-width:none;background:var(--deep);border-bottom:3px solid var(--line);padding:var(--s2) max(var(--s4),calc((100vw - 1080px)/2));box-shadow:var(--panel-shadow)}
.mast .quiet,.back{background:var(--page);border:2px solid var(--line);padding:var(--s1) var(--s2);text-decoration:none;box-shadow:var(--panel-shadow);font-size:.85rem}
main{max-width:1080px;padding:var(--s5) var(--s4) var(--s6)}
.page{max-width:920px}.pagehead{position:relative;padding:var(--s4);padding-right:104px;background:var(--deep);border:3px solid var(--line);box-shadow:var(--panel-shadow);margin-bottom:var(--s4)}
.pagehead .back{width:max-content;margin-bottom:var(--s4)}
.pagehead h1{font:850 clamp(1.8rem,4vw,2.6rem)/1.2 var(--sans);letter-spacing:.04em;color:var(--ink)}
.pagehead .kicker{color:var(--green);letter-spacing:.05em;margin:0;font-size:.75rem}
.camp-icon{image-rendering:pixelated;object-fit:contain;flex-shrink:0}
.page-emblem{position:absolute;right:var(--s4);bottom:var(--s4);width:64px;height:80px}
.unit-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);border:0}
.row{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s3);padding:var(--s4);border:3px solid var(--line);background:var(--page);box-shadow:var(--panel-shadow);min-height:144px}
.row:hover{background:var(--wash);border-color:var(--green)}
.row strong{font-size:1.05rem;color:var(--ink)}.row small{margin-top:var(--s1);font-size:.78rem}
.row .marker{grid-column:2;color:var(--green);text-align:left;font:700 .75rem var(--sans)}
.room-icon{grid-row:1 / 3;position:relative;align-self:center}.room-icon img{width:64px;height:64px}
.room-icon .num{position:absolute;bottom:-8px;right:-4px;padding:2px 5px;background:var(--deep);color:var(--green);border:2px solid var(--line);font:700 .8rem monospace}
.taskline{padding:var(--s3);background:var(--deep);border:0;border-left:3px solid var(--green)}
body[data-page=lessons] .subtle{background:var(--deep);padding:var(--s3);margin-bottom:var(--s4)}
.primary,.listen,.choice,.quiet,.camp-button{border-radius:0;box-shadow:var(--panel-shadow)}
.primary{border:3px solid var(--ink)}
.sheet{position:relative;padding:var(--s5);border:3px solid var(--line);background:var(--page);box-shadow:var(--panel-shadow)}
.sheet p{margin-bottom:var(--s3)}
.sheet .word{font-family:var(--sans);font-weight:800;color:var(--ink);margin:var(--s4) 0}
.sheet-emblem{width:80px;height:80px;margin-bottom:var(--s4)}
.topline{color:var(--green);font-weight:700}.topline>span:first-child{display:flex;align-items:center;gap:var(--s2)}.topline .camp-icon{width:32px;height:32px}
progress{height:12px;border:2px solid var(--line);background:var(--deep)}
.listen{border:2px solid var(--line);background:var(--deep);color:var(--ink)}
.choice{border:2px solid var(--line);background:var(--deep);margin:var(--s2) 0;padding:var(--s3);font-weight:650}
.choice.correct{border-color:var(--success-ink);color:var(--success-ink);background:var(--deep)}
.choice.miss{border-color:var(--error-ink);color:var(--error-ink);background:var(--deep)}
.choice:disabled{opacity:1}.choice:not(.correct):not(.miss):disabled{opacity:.65}
.stamp{transform:none;padding:0;border:0;color:var(--green);font:800 1.6rem var(--sans);margin:var(--s2) 0 var(--s4)}
.sheet .quiet{border:2px solid var(--line);background:var(--deep);padding:var(--s2) var(--s3);text-decoration:none}
button:focus-visible{outline:3px solid var(--green);outline-offset:4px}
@media(max-width:680px){main{padding:var(--s4) var(--s3)}.mast{padding:var(--s2) var(--s3)}.unit-list{grid-template-columns:1fr}.pagehead{padding:var(--s3);padding-right:86px}.page-emblem{width:48px;height:64px;right:var(--s3)}.pagehead h1{font-size:1.8rem}.row{padding:var(--s3);min-height:120px}.sheet{padding:var(--s4)}.pagehead .back{max-width:100%;font-size:.75rem}.sheet .actions>*{flex:1;min-width:120px}}
body:not(.title-screen){background-color:var(--camp-ground)}
/* Camp progression uses the existing dungeon panels, never interrupts a run. */
.camp-entry{display:flex;align-items:center;justify-content:center;gap:var(--s2);position:relative}
.camp-entry .camp-icon{width:36px;height:36px}.camp-entry small{display:block;font-weight:400;font-size:.7rem;letter-spacing:0;color:var(--muted)}
.camp-entry i{position:absolute;right:var(--s2);top:var(--s2);width:8px;height:8px;background:var(--green)}
.camp-wallet{display:flex;flex-wrap:wrap;gap:var(--s3);background:var(--deep);border:2px solid var(--line);padding:var(--s3)}
.camp-wallet span{color:var(--muted);font-size:.85rem}.camp-wallet b{color:var(--green);margin-left:var(--s1);font:800 1.15rem monospace}
.camp-notice{min-height:2.5em;margin:var(--s3) 0;color:var(--green);font-size:.85rem}
.camp-tabs{display:flex;gap:var(--s1);margin-bottom:var(--s4)}
.camp-tabs button{flex:1;background:var(--deep);border:2px solid var(--line);padding:var(--s2);font-size:.85rem;font-weight:750}
.camp-tabs button[aria-pressed=true]{background:var(--green);color:var(--deep);border-color:var(--ink)}
.camp-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.camp-card{border:3px solid var(--line);background:var(--page);padding:var(--s4);box-shadow:var(--panel-shadow);min-width:0}
.camp-wide{grid-column:1/-1}
.camp-page[data-tab=supply] .camp-card:not(.supply),.camp-page[data-tab=workshop] .camp-card:not(.workshop),.camp-page[data-tab=trials] .camp-card:not(.trials){display:none}
.camp-card-title{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.camp-card-title>.camp-icon{width:64px;height:64px}
.camp-card .kicker{font:700 .65rem monospace;color:var(--green);margin:0 0 var(--s1)}
.camp-card h2{font:800 1.3rem var(--sans);color:var(--ink)}
.camp-card h3{font-size:1rem;color:var(--green);margin-bottom:var(--s2)}
.camp-card p{font-size:.85rem;margin:var(--s3) 0;line-height:1.7}
.camp-card .subtle{font-size:.75rem}
.camp-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.camp-action{background:var(--deep);border:2px solid var(--line);padding:var(--s2) var(--s3);box-shadow:var(--panel-shadow);font-size:.85rem}
.camp-action:hover:not(:disabled){border-color:var(--green);background:var(--wash)}
.camp-buildings{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.building{background:var(--deep);border:2px solid var(--line);padding:var(--s3)}
.building>.camp-icon{width:64px;height:80px;margin:var(--s2) auto var(--s3)}
.building:not(.built)>.camp-icon{opacity:.75}.building.built{border-color:var(--green)}
.building button{width:100%;margin-top:var(--s2);font-size:.75rem}
.camp-unit{font-size:.8rem;color:var(--green)}
.camp-unit select{width:100%;margin-top:var(--s2);background:var(--deep);color:var(--ink);border:2px solid var(--line);min-height:44px;font:inherit;padding:var(--s1)}
.camp-footnote{color:var(--muted);font-size:.75rem;margin:var(--s4) 0}
.camp-scores{padding-left:var(--s4);font:700 .9rem monospace;color:var(--green)}
.camp-opened .camp-card-title>.camp-icon{animation:camp-pop 400ms ease-out}
.sv-loot{padding:var(--s3);border-left:3px solid var(--green);color:var(--green);background:var(--deep)}
@keyframes camp-pop{0%{transform:translateY(6px) scale(.8)}65%{transform:translateY(-8px) scale(1.12)}100%{transform:none}}
@media(max-width:680px){.camp-grid{grid-template-columns:1fr}.camp-buildings{grid-template-columns:1fr}.building{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s2)}.building>.camp-icon{grid-row:1/4;width:48px;margin:0}.building button{grid-column:2}.building p,.building h3{margin:0}.camp-tabs button{font-size:.75rem;padding:var(--s1)}.mast{gap:var(--s1)}.mast .brand{margin-right:auto}.mast .quiet{font-size:.75rem}.camp-wallet{gap:var(--s2)}.camp-card{padding:var(--s3)}}
body:not(.title-screen){background-attachment:scroll;min-height:100svh}
.book-switch{margin:0 0 var(--s4)}
.row[data-act^="book:"][aria-pressed=true]{border-color:var(--green)}
.title-menu{gap:var(--s1)}
@media(max-height:700px){.title-menu button{min-height:44px;padding:var(--s1) var(--s2)}}
.word-meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);align-items:baseline;color:var(--green)}
.word-meta small,.zh-assist{color:var(--muted);font-size:.82rem}
.zh-assist{display:block}
.sentence-en{font-size:clamp(1.2rem,5vw,1.85rem);font-weight:750;line-height:1.45;color:var(--ink)}
.review-words{list-style:none;padding:0}
.review-words li{border-top:1px solid var(--line);padding:var(--s2) 0}
.camp-page[data-tab=decor] .camp-card:not(.decor){display:none}
.camp-swatch{height:64px;border:2px solid var(--line);background-color:var(--swatch-a);background-image:repeating-linear-gradient(0deg,transparent 0 13px,var(--swatch-c) 13px 15px),repeating-linear-gradient(90deg,var(--swatch-b) 0 18px,transparent 18px 37px);margin-bottom:var(--s2)}
.decor-heading{margin-top:var(--s4)}
.decor .building>div:first-child img{height:56px;margin:auto}
.title-heading h1{font-size:clamp(2rem,7vw,5rem);letter-spacing:.025em}
.title-heading .zh-assist{color:var(--ink);margin-top:var(--s1)}
.title-menu .primary .zh-assist{color:inherit}
.title-account-links{display:flex;gap:var(--s1)}
.title-account-links button{flex:1;padding:var(--s1);font-size:.8rem;min-height:48px;letter-spacing:0}
.title-menu{bottom:8%}
.title-footer{bottom:2%}
.account-page label,.page label:has(#rank-book),.page label:has(#rank-unit){display:block;margin:var(--s3) 0;font-weight:700}
.account-page input,.account-page select,#rank-book,#rank-unit{display:block;width:100%;min-height:48px;margin:var(--s1) 0;padding:var(--s2);background:var(--deep);border:2px solid var(--line);color:var(--ink);border-radius:0;font:16px var(--sans)}
.account-message{color:var(--error-ink);font-size:.85rem;min-height:1.5em}
#regional-results{margin:var(--s4) 0}
.regional-list{padding-left:var(--s4)}
.regional-list li{padding:var(--s3) var(--s1);border-bottom:1px solid var(--line)}
.regional-list li span{float:right;text-align:right;color:var(--green)}
@media(max-height:730px){.title-menu{bottom:6%}.title-menu button{min-height:40px;padding:6px 10px}.title-footer{display:none}}
.avatar-picker{border:2px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1);padding:var(--s2);margin:var(--s3) 0}
.account-page .avatar-picker label{margin:0;cursor:pointer;position:relative}
.account-page .avatar-picker input{position:absolute;width:1px;height:1px;min-height:0;opacity:0}
.avatar-picker label span{display:grid;justify-items:center;gap:4px;background:var(--deep);border:2px solid var(--line);padding:var(--s1)}
.avatar-picker input:checked+span{border-color:var(--green);background:var(--wash)}
.avatar-picker input:focus-visible+span{outline:3px solid var(--green)}
.avatar-picker img{width:40px;height:64px;object-fit:contain;image-rendering:pixelated}
.avatar-picker small{font-size:.7rem}
.profile-avatar{width:64px;height:96px;object-fit:contain;image-rendering:pixelated;margin-bottom:var(--s3)}
.rank-avatar{display:inline-block;width:24px;height:40px;object-fit:contain;image-rendering:pixelated;vertical-align:middle;margin-right:var(--s2)}
.primary .zh-assist{color:inherit}