:root{color-scheme:dark;--gold:#d9bb78;--ink:#101813;--muted:#9ca59b;--line:#77826844}*{box-sizing:border-box}body{margin:0;background:#101813;color:#e6e9dc;font-family:Georgia,'Noto Serif TC',serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button{border:1px solid var(--line);background:#1a241de8;border-radius:3px;padding:12px 18px}button:hover{border-color:var(--gold);background:#2b3426}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--gold);color:#1a2016;border:0;font-weight:bold;letter-spacing:3px}.primary:hover{background:#ebd69f}canvas{position:fixed;width:100%;height:100%;inset:0;image-rendering:pixelated}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 73% 45%,transparent 5%,#08110c88 75%,#08110cdd 100%)}header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;padding:27px 4%;gap:30px;z-index:2}.brand{color:#e2e5d6;text-decoration:none;display:flex;gap:12px;align-items:center;letter-spacing:3px;font-weight:bold}.brand small{display:block;font:9px Arial,sans-serif;letter-spacing:3px;margin-top:6px;color:var(--gold)}.sigil{font-size:37px;color:var(--gold)}.chapter{font-size:12px;color:#aab3a4;letter-spacing:3px}.chapter span{margin:0 12px;color:#697762}.small{margin-left:auto;font-size:11px;padding:9px 13px;color:#b6bdac}.panel{background:linear-gradient(135deg,#18241ff5,#101a15fa);border:1px solid var(--line);box-shadow:0 20px 80px #0005}.camp{position:fixed;top:50%;left:7%;transform:translateY(-45%);width:510px;padding:32px 36px}.eyebrow{font:10px Arial,sans-serif;letter-spacing:3px;color:var(--gold)}h1{font-size:42px;font-weight:normal;line-height:1.3;margin:17px 0}h1 em{font-style:normal;color:var(--gold)}.intro{font:13px/1.9 Arial,sans-serif;color:#b5bdb0;margin:0 0 25px}.section-label{font-size:12px;color:#bfc9b8;border-bottom:1px solid var(--line);padding-bottom:11px;display:flex;justify-content:space-between}.section-label span{font-size:10px;letter-spacing:2px;color:#7c887b}.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}.class-card{text-align:left;padding:12px 10px;position:relative}.class-card.selected{border-color:var(--gold);background:#3b3926}.class-card .icon{display:block;color:var(--gold);font-size:26px;margin-bottom:8px}.class-card b{font-size:15px;display:block}.class-card small{display:block;font:10px/1.6 Arial,sans-serif;color:#aab49f;margin-top:5px}.equipment{display:flex;align-items:center;justify-content:space-between;padding:13px 0 20px;gap:15px}.equipment strong{display:block;font:12px Arial,sans-serif;margin-top:8px;color:#d4dacb}.equipment small{text-align:right;color:#788675;font:10px/1.6 Arial,sans-serif}.camp>.primary{width:100%;display:flex;justify-content:space-between;padding:16px 19px}.controls{display:flex;justify-content:space-between;font:10px Arial,sans-serif;color:#8c9a87;margin-top:19px}kbd{font:10px Arial,sans-serif;color:#c6cdbf}.local-note{font:10px Arial,sans-serif;color:#6f7d6a;text-align:center;margin:18px 0 0}footer{position:fixed;bottom:22px;left:4%;right:4%;display:flex;justify-content:space-between;font:10px Arial,sans-serif;color:#7c8b76;letter-spacing:2px}#hud{position:fixed;inset:0;pointer-events:none}#hud button{pointer-events:auto}.hud-top{position:absolute;top:95px;left:4%;right:4%;display:flex;gap:14px;align-items:center}.portrait{width:46px;height:46px;border:1px solid var(--gold);background:#19271d;display:grid;place-items:center;font-size:26px;color:var(--gold)}.vitals{width:min(270px,43vw);font:12px Arial,sans-serif}.vitals>div:first-child{display:flex;justify-content:space-between;margin-bottom:9px}.bar{height:6px;background:#070e0a;border:1px solid #ffffff15;overflow:hidden}.bar i{display:block;height:100%;width:100%;transition:width .12s}.hp i{background:linear-gradient(90deg,#7e3028,#d66c4d)}.xp{height:4px;margin-top:5px}.xp i{background:#88bb9e}.time{margin-left:auto;text-align:center}.time strong{display:block;font-size:27px;letter-spacing:3px}.time small{color:#9dafa0;font-size:10px}.run-info{position:absolute;left:4%;top:159px;display:flex;gap:19px;font:11px Arial,sans-serif;color:#b5c2aa}.hud-bottom{position:absolute;bottom:30px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:end}#skills{display:flex;gap:9px}#skills span{background:#172119df;border:1px solid var(--line);padding:11px;font-size:12px;color:#c0c8b4}#heal{color:#e5c296;display:flex;align-items:center;gap:12px;font-size:22px}#heal span{font-size:13px}#heal b{background:#735341;padding:4px 8px;font-size:13px}#heal small{font-size:10px}#boss{position:absolute;top:193px;left:30%;right:30%;font:11px Arial,sans-serif;text-align:center;color:#d09a81}#boss .bar{margin-top:8px;height:8px}.modal{position:fixed;inset:0;background:#030906b8;backdrop-filter:blur(6px);z-index:10;display:grid;place-items:center;padding:20px}.modal .panel{width:min(680px,100%);padding:34px;text-align:center;max-height:90dvh;overflow:auto}h2{font-size:30px;font-weight:normal;color:#e3c98c;margin:15px 0}.modal p{font:13px/1.8 Arial,sans-serif;color:#acbba6}.upgrade-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0 5px}.upgrade-options button{text-align:left;padding:20px 14px;min-height:140px}.upgrade-options strong{display:block;color:var(--gold);font-size:17px}.upgrade-options small{display:block;margin-top:14px;font:12px/1.7 Arial,sans-serif;color:#aab6a1}#modal-actions{display:flex;gap:10px;justify-content:center;margin-top:22px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.stats span{font-size:11px;color:#9caf95;padding:15px;background:#0c160f}.stats b{display:block;font-size:25px;color:#e1d5b1;margin-bottom:7px}.damage-row{display:flex;justify-content:space-between;font:12px Arial,sans-serif;padding:9px;border-bottom:1px solid var(--line)}#toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);padding:12px 22px;background:#283124ef;border:1px solid var(--gold);font:13px Arial,sans-serif;pointer-events:none;opacity:0;transition:opacity .2s;z-index:20}#joystick{display:none;position:absolute;bottom:100px;left:25px;width:110px;height:110px;border:1px solid #bfcfa54d;border-radius:50%;background:#aebf8b12;pointer-events:auto;touch-action:none}#joystick div{position:absolute;width:42px;height:42px;border:1px solid #d1d8a77d;background:#ced8aa35;border-radius:50%;left:33px;top:33px;pointer-events:none}[hidden]{display:none!important}body.playing header .chapter{display:none}body.playing .vignette{background:radial-gradient(ellipse,transparent 45%,#07110977)}
@media(max-width:700px){header{padding:17px 5%}.brand{font-size:13px}.brand small{font-size:7px}.sigil{font-size:28px}.chapter{display:none}.camp{left:5%;width:90%;padding:23px;top:51%;transform:translateY(-46%)}h1{font-size:31px;margin:12px 0}.intro{font-size:11px;margin-bottom:18px}.class-card{padding:9px}.class-card small{font-size:9px}.class-card .icon{font-size:22px;margin-bottom:6px}.equipment{padding-bottom:15px}.controls{font-size:9px;gap:6px}footer{bottom:13px;font-size:8px;letter-spacing:0}footer span:last-child{display:none}.hud-top{top:85px;gap:9px}.portrait{width:35px;height:40px}.time strong{font-size:21px}.hud-top button{padding:10px}.run-info{top:145px;font-size:10px;gap:12px}#boss{top:174px;left:20%;right:20%}#joystick{display:block}.hud-bottom{bottom:22px}#skills{gap:5px}#skills span{font-size:10px;padding:8px}#heal{position:absolute;bottom:80px;right:0;padding:14px;gap:8px}#heal small{display:none}.modal .panel{padding:24px 18px}.upgrade-options{grid-template-columns:1fr;margin:18px 0;gap:9px}.upgrade-options button{min-height:0;padding:14px}.upgrade-options strong{font-size:15px}.upgrade-options small{margin-top:6px;font-size:11px}.stats{gap:5px}.stats span{padding:10px}.modal h2{font-size:26px}}
@media(max-height:700px){.camp{padding:20px 27px;top:52%}h1{font-size:28px;margin:10px 0}.intro{margin-bottom:14px;font-size:11px}.class-card .icon{display:none}.equipment{padding:8px 0 14px}.local-note{margin-top:11px}.controls{margin-top:11px}footer{bottom:9px}header{padding-top:14px}}
/* Touch controls follow input capability as well as width (landscape/tablets). */
@media(pointer:coarse){#joystick{display:block}#heal{position:absolute;bottom:80px;right:0}#heal small{display:none}.controls{display:none}}
@media(max-height:600px){.camp{top:82px;bottom:28px;transform:none;max-height:calc(100dvh - 110px);overflow-y:auto}.hud-top{top:74px}.run-info{top:130px}#boss{top:152px}#joystick{width:90px;height:90px;bottom:65px}#joystick div{left:23px;top:23px}#heal{bottom:65px}.modal .panel{max-height:94dvh}.upgrade-options{margin:12px 0}.upgrade-options button{min-height:110px}}
.camp{max-height:calc(100dvh - 125px);overflow-y:auto}.camp-tools{display:flex;gap:8px;margin-bottom:12px}.camp-tools button{flex:1;padding:10px;font-size:12px}.profession-note{font:11px/1.7 Arial,sans-serif;color:#b9c9ae;margin:0 0 15px}header{gap:17px}#touch{margin-left:auto}#sound{margin-left:0}#ability{margin-left:auto;margin-right:12px;display:flex;gap:12px;align-items:center;color:#b8d7e3}#ability span{font-size:13px}#ability b{font:12px Arial,sans-serif}#ability small{font-size:10px}.forge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left;margin:20px 0}.forge-grid section{border:1px solid var(--line);padding:15px}.forge-grid h3{color:var(--gold);font-size:17px}.forge-grid button{font-size:12px;width:100%;padding:12px 6px}.modal label{display:block;text-align:left;font-size:12px;color:var(--gold);margin:15px 0 8px}.modal textarea,.diagnostics input{width:100%;background:#07130d;color:#d9e7d2;border:1px solid #60745c;padding:12px;border-radius:3px;font:12px/1.6 monospace;resize:vertical}.diagnostics{text-align:left;border:1px solid var(--line);padding:14px;margin-top:17px;font:12px/1.7 Arial,sans-serif}.diagnostics summary{cursor:pointer;color:var(--gold)}.diagnostics form{display:flex;margin-top:12px;gap:8px}.diagnostics output{display:block;margin-top:10px;overflow-wrap:anywhere}.touch-controls #joystick{display:block}.touch-controls #heal{position:absolute;bottom:80px;right:0}.touch-controls #ability{position:absolute;bottom:145px;right:0;margin:0}.touch-controls #ability small{display:none}
@media(max-width:700px),(pointer:coarse){#ability{position:absolute;bottom:145px;right:0;margin:0;padding:14px;min-width:120px;justify-content:space-between}#ability small{display:none}.forge-grid{grid-template-columns:1fr;gap:8px}.forge-grid section{padding:10px 14px;display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:12px}.forge-grid h3{margin:0}.forge-grid p{font-size:10px;margin:6px 0}.forge-grid button{grid-column:2;grid-row:1/3}header{gap:8px}#touch,#sound{font-size:9px;padding:8px}.brand{letter-spacing:1px}.camp{max-height:calc(100dvh - 120px)}}
@media(max-height:600px){#ability,.touch-controls #ability{bottom:125px}.camp{max-height:calc(100dvh - 110px)}}
/* Keep the primary action above the fold at common laptop heights. */
@media(min-width:701px) and (min-height:601px) and (max-height:900px){.camp{padding:22px 30px;top:51%;max-height:calc(100dvh - 125px)}h1{font-size:32px;margin:12px 0}.intro{font-size:12px;margin-bottom:16px}.classes{margin:11px 0}.class-card{padding:9px}.class-card .icon{font-size:20px;margin-bottom:5px}.equipment{padding:8px 0 13px}.profession-note{font-size:10px;margin-bottom:10px}.controls{margin-top:12px}.local-note{margin-top:12px}.camp-tools{margin-bottom:10px}.camp>.primary{padding:13px 18px}}
.field-guide{text-align:left;display:grid;gap:10px;margin:18px 0}.field-guide>div{padding:11px 14px;background:#0a170f99;border-left:2px solid #b39d63}.field-guide b{font-size:13px;color:#dccb9f}.field-guide p{font-size:12px;margin:6px 0 0}.camp-tools{flex-wrap:wrap}.camp-tools button{min-width:95px}.diagnostics .field-guide{margin-bottom:0}.diagnostics .field-guide p{font-size:11px}
/* Extreme-short view / browser zoom: retain movement, healing, skill and pause. */
@media(max-height:400px){body.playing header{display:none}.hud-top{top:8px}.run-info{top:64px}#boss{top:85px}.hud-bottom{bottom:0}#skills{display:none}#heal,.touch-controls #heal{bottom:24px;padding:10px}#ability,.touch-controls #ability{position:absolute;bottom:90px;right:0;margin:0;padding:10px}#joystick{bottom:24px;width:70px;height:70px}#joystick div{width:32px;height:32px;left:18px;top:18px}}
.save-warning{border:1px solid #c08f58;background:#402d20aa;padding:12px;color:#f0c99a!important}#toast{max-width:calc(100vw - 32px);width:max-content;text-align:center;line-height:1.6}

.evolution-choice{border-color:var(--gold);background:#3a3424}.build-summary dl{margin:14px 0 0}.build-summary dt{color:#dccc9e;font-weight:bold;margin-top:12px}.build-summary dd{margin:4px 0 0;color:#b4c0ab;overflow-wrap:anywhere}

.relic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;text-align:left}.relic-grid section{border:1px solid var(--line);padding:16px}.relic-grid section.equipped{border-color:var(--gold);background:#3a342455}.relic-grid h3{color:var(--gold);margin:0;font-size:17px}.relic-grid button{width:100%;font-size:12px}.relic-grid .relic-preview{font-size:11px;color:#d0d9bd}#skills{flex-wrap:wrap;max-width:65%}
@media(max-width:700px){.relic-grid{grid-template-columns:1fr}.relic-grid section{padding:12px}#skills{max-width:100%}}