:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#26362f;background:#eae6dc;font-synthesis:none;font-size:16px;line-height:1.55;--paper:#f8f5ed;--ink:#26362f;--muted:#66736b;--accent:#315e4f;--line:#dcded1;--gold:#b9a375;--danger:#903f36}
*{box-sizing:border-box}
body{margin:0}
button,input,select{font:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:.6rem 1rem;color:var(--ink);font-weight:600}
button:hover:enabled{border-color:var(--accent);background:#e9eee4}
button:disabled{cursor:not-allowed;opacity:.5}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.danger{color:var(--danger)}
button.small{font-size:.82rem;padding:.35rem .65rem}
button.link{border:0;background:transparent;padding:0;color:var(--accent);text-decoration:underline}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #cc8f41;outline-offset:3px}
input,select{border:1px solid #9aab9b;border-radius:5px;padding:.6rem;width:100%;background:#fff;color:var(--ink)}
label{display:grid;gap:.3rem;font-size:.9rem;font-weight:600;margin-bottom:1rem}
h1,h2,h3,.wordmark{font-family:Georgia,"Times New Roman",serif;font-weight:500;line-height:1.15}
h1{font-size:clamp(2rem,4vw,3.4rem);margin:.5rem 0 1rem}
h2{font-size:1.55rem;margin:.25rem 0 1rem}
h3{font-size:1.2rem;margin:.2rem 0 .5rem}
p{margin:.5rem 0 1rem}
small,.muted{color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:700;color:#657764}
.topbar{background:#1c2b27;color:#eee9da;display:flex;align-items:center;gap:2rem;padding:1rem 3%;border-bottom:3px solid var(--gold)}
.wordmark{font-size:2rem;letter-spacing:.07em}
.wordmark small{display:block;font:500 .65rem system-ui;letter-spacing:.2em;text-transform:uppercase;color:#c3cfbd}
.topbar nav{display:flex;gap:.35rem;flex:1}
.topbar button{background:transparent;color:#e5e9dd;border-color:transparent;font-weight:500}
.topbar button[aria-current=page]{background:#34483e;border-color:#70816b}
.topbar button:hover:enabled{background:#34483e;color:white}
.topbar .connection{font-size:.8rem;color:#c6d1bf}
.layout{display:grid;grid-template-columns:230px minmax(0,1fr) 265px;max-width:1500px;margin:auto;gap:1.5rem;padding:2rem 2%}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:1.5rem;box-shadow:0 4px 20px #22332906;margin-bottom:1.3rem}
.character{background:#23372e;color:#f1eddf;border-color:#3a4d3f}
.character .muted,.character small{color:#bfcab7}
.portrait{width:64px;height:64px;border:1px solid #94a982;border-radius:50%;display:grid;place-items:center;color:#d7c79b;font:2.4rem Georgia;margin-bottom:1rem;background:#34473b}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem}
.stat strong{display:block;font-size:1.35rem}
.stat span{font-size:.75rem;color:#bdc9b5}
.rule{border-top:1px solid var(--line);margin:1.3rem 0}
.character .rule{border-color:#4d5b4b}
.notice{padding:.8rem 2%;background:#edf2e9;border-bottom:1px solid #d5dece;display:flex;gap:1rem;align-items:center;min-height:3rem;font-size:.9rem}
.notice.error{background:#faeae4;color:#74352e}
.notice.success{background:#e4efdf;color:#315b37}
.notice span{flex:1}
.hero{min-height:220px;position:relative;overflow:hidden;padding:2rem;background:#e0e7d8;border-color:#c8d4bf}
.hero:after{content:"";position:absolute;right:-45px;bottom:-50px;width:300px;height:210px;transform:rotate(-22deg);border:1px solid #9bb194;border-radius:50%;box-shadow:0 0 0 28px #acbfa41c,0 0 0 60px #93aa8720,0 0 0 96px #8aa57e16;pointer-events:none}
.hero p{max-width:470px;position:relative;z-index:1}
.hero h1{position:relative;z-index:1}
.section-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1.6rem 0 .9rem}
.section-header h2{margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1rem}
.adventure{display:flex;flex-direction:column;gap:.7rem;margin:0;padding:1.4rem}
.adventure .description{flex:1;font-size:.92rem}
.crest{width:40px;height:40px;display:grid;place-items:center;background:#e8edde;border-radius:6px;font:1.5rem Georgia;color:#5f7253}
.cost{font-size:.8rem;padding:.65rem .8rem;background:#eeeee4;border-left:2px solid var(--gold)}
.adventure button{margin-top:auto;width:100%}
.journal-entry{border-left:2px solid var(--gold);padding-left:1rem;margin:1rem 0;font-size:.9rem}
.journal-entry strong{display:block}
.empty{border:1px dashed #b6c2ac;border-radius:8px;padding:1.5rem;color:var(--muted);background:#f4f2e9}
.attributes{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1rem}
.attribute{background:#eeeee4;padding:.6rem .8rem;border-radius:5px}
.attribute strong{display:block}
.pack-row{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:.8rem 0}
.pack-row small{display:block}
.battle-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.battlefield{display:grid;gap:1rem;margin:1.2rem 0}
.zone{border:1px solid #b7c6ae;background:#e9eee0;border-radius:7px;padding:1rem}
.zone h3{font:600 .78rem system-ui;text-transform:uppercase;letter-spacing:.1em;color:#5d7157}
.units{display:flex;flex-wrap:wrap;gap:.8rem}
.unit{padding:.8rem 1rem;min-width:150px;flex:1;max-width:250px;border:1px solid #cbd4c3;border-radius:5px;background:#faf8ef}
.unit.enemy{border-left:3px solid #a7654d}
.unit.party{border-left:3px solid #54745d}
.unit.current{outline:2px solid #8b9868;outline-offset:2px}
.unit strong{display:block}
.unit p{font-size:.8rem;margin:.3rem 0}
.meter{height:7px;display:flex;background:#d7daca;border-radius:9px;overflow:hidden;margin:.4rem 0}
.meter span{background:#648361}
.enemy .meter span{background:#a76c51}
.meter .missing{background:transparent}
.actions{display:flex;flex-wrap:wrap;gap:.6rem}
.action-group{margin:1.1rem 0}
.action-group h3{font:600 .8rem system-ui}
.budget{display:flex;gap:1rem;font-size:.8rem;color:var(--muted)}
.outcome{background:#e5eddd;border-color:#afc4a2}
.outcome h2{font-size:2rem}
.login-shell{max-width:1100px;margin:5vh auto;padding:2rem;display:grid;grid-template-columns:1.35fr 1fr;gap:4rem;align-items:center}
.login-shell .intro{padding:3rem 0}
.login-shell h1{font-size:clamp(3rem,7vw,5rem)}
.login-shell .panel{padding:2rem}
.login-shell .intro p{max-width:480px}
.login-shell form button{width:100%}
.footer{max-width:1500px;margin:0 auto;padding:0 2% 2rem;color:var(--muted);font-size:.75rem}
.skip{position:absolute;left:1rem;top:-100px;z-index:9;background:white;padding:.6rem}
.skip:focus{top:1rem}
.loading{padding:3rem;text-align:center}
.help{font-size:.85rem}
.tag{font-size:.72rem;color:#536a4f;background:#edf1e5;border-radius:4px;padding:.2rem .4rem}
.tooltip{font-size:.8rem;margin:.4rem 0;color:var(--muted)}
@media(min-width:1500px){.layout{padding-top:3rem}
}
@media(max-width:1050px){.layout{grid-template-columns:200px minmax(0,1fr)}
.right-column{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.right-column .panel{margin:0}
.topbar{gap:1rem}
.connection{display:none}
}
@media(max-width:680px){.topbar{padding:1rem;flex-wrap:wrap;gap:.6rem}
.wordmark{font-size:1.6rem}
.topbar nav{order:3;flex-basis:100%;overflow:auto}
.topbar button{padding:.45rem .65rem}
.topbar .tools{margin-left:auto}
.layout{display:flex;flex-direction:column;padding:1rem;gap:0}
.left-column .character{padding:1rem;display:grid;grid-template-columns:52px 1fr;column-gap:1rem}
.character .portrait{grid-row:1/4;width:48px;height:48px;font-size:1.8rem;margin:0}
.character h2{font-size:1.1rem;margin:0}
.character .stats{grid-column:1/-1;grid-template-columns:repeat(3,1fr);margin-top:.8rem}
.character .rule,.character .build-list{display:none}
.right-column{display:block}
.right-column .panel{margin-bottom:1rem}
.hero{padding:1.5rem;min-height:180px}
.panel{padding:1.2rem}
.cards{grid-template-columns:1fr}
.login-shell{display:block;padding:1.5rem;margin:1rem auto}
.login-shell .intro{padding:0}
.login-shell h1{font-size:3rem}
.login-shell .panel{padding:1.5rem}
.unit{min-width:125px}
.notice{padding:.7rem 1rem;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
@media(prefers-contrast:more){:root{--muted:#334b3b;--line:#71816c}
button:disabled{opacity:.7}
.character small{color:#e5eddc}
}
.equipment-panel,.gear-card{margin-top:1rem}
.equipment-panel fieldset{border:0;padding:0;margin:0;min-width:0}
.equipment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.equipment-grid label{min-width:0}
.equipment-grid select{width:100%;min-width:0}
.equipment-set{margin:1.2rem 0}
.worn-gear summary{cursor:pointer;padding:.75rem 0;font-weight:600}
.gear-card{border-top:1px solid var(--line);padding-top:1rem}
.gear-card button{margin:.25rem .4rem .25rem 0}
.binding-ack{display:flex;align-items:flex-start;gap:.6rem;margin:1rem 0}
.binding-ack[hidden]{display:none}
.binding-ack input{width:auto;flex:none;margin:.2rem 0}
@media(max-width:680px){.equipment-grid{grid-template-columns:1fr}}
.loadout-confirmation{border:1px solid var(--line);padding:1rem;margin-top:.75rem;background:var(--paper)}