@import url("./assets/fonts.css");
:root{color-scheme:dark;--ink:#dbe7e2;--muted:#8fa59f;--cyan:#86f5e7;--ember:#f28442;--bronze:#a77c4d;--black:#061014;--glass:rgba(7,17,21,.77)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#061014;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif}button{font:inherit;color:inherit}canvas{position:fixed;inset:0;width:100%;height:100%;display:block}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 26%,transparent 74%,rgba(0,0,0,.3))}
.hidden{display:none!important}#vignette{position:fixed;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 11vw 2vw rgba(0,6,9,.38)}#damage-flash{position:fixed;inset:0;z-index:12;pointer-events:none;opacity:0;background:radial-gradient(circle,transparent 35%,rgba(190,23,15,.62));transition:opacity .22s}
.screen{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:linear-gradient(90deg,rgba(2,9,12,.91) 0%,rgba(2,9,12,.68) 42%,rgba(2,9,12,.18)),url("./assets/images/ashenreach_key_art_v2.png") center/cover}
.screen:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,#061014)}.intro-card,.pause-card,.outcome-card{position:relative;z-index:1;width:min(620px,86vw);padding:44px;border-left:1px solid rgba(134,245,231,.45);background:linear-gradient(90deg,rgba(5,14,17,.78),rgba(5,14,17,.18));backdrop-filter:blur(8px)}
.eyebrow{margin:0 0 12px;color:var(--cyan);font-size:12px;font-weight:800;letter-spacing:.28em;text-transform:uppercase}.intro-card h1{font-family:Georgia,serif;font-size:clamp(48px,7.5vw,92px);font-weight:500;line-height:.87;letter-spacing:-.055em;margin:0 0 26px;text-shadow:0 5px 30px #000}.subtitle{max-width:480px;color:#b7c9c2;line-height:1.6;font-size:17px}
button{border:1px solid rgba(134,245,231,.7);background:linear-gradient(135deg,rgba(39,114,103,.85),rgba(11,51,49,.92));padding:13px 24px;text-transform:uppercase;font-size:11px;letter-spacing:.18em;font-weight:800;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.25);transition:.16s transform,.16s filter}button:hover{transform:translateY(-1px);filter:brightness(1.2)}button.ghost{margin-left:10px;background:rgba(8,15,18,.75);border-color:rgba(255,255,255,.2)}.fineprint{font-size:11px;color:#6f8580;margin-top:14px}
.mode-choice{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.mode-choice .ghost{margin-left:0}.online-auth{display:grid;gap:10px;max-width:480px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(224,145,63,.28)}.online-auth label{display:grid;gap:5px;color:#c8b493;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.online-auth input{width:100%;border:1px solid #5a462a;border-radius:3px;background:rgba(10,8,5,.88);color:#efe4d2;padding:11px 12px;font:14px Inter,system-ui,sans-serif;outline:none}.online-auth input:focus{border-color:#e0913f;box-shadow:0 0 0 2px rgba(224,145,63,.14)}.online-actions{display:flex;gap:8px;flex-wrap:wrap}.online-actions button{margin:0;padding:10px 14px}.online-status{min-height:1.5em;margin:0;color:#d8b06a;font-size:11px;line-height:1.5}.online-status.error{color:#ff9c86}.online-status.pass{color:#8ff5b0}
#topbar{position:fixed;z-index:10;top:0;left:0;right:0;height:68px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:0 30px;background:linear-gradient(180deg,rgba(2,9,12,.8),transparent)}.brand{display:flex;gap:10px;align-items:center;font-family:Georgia,serif;letter-spacing:.08em}.brand-mark,.mote{color:var(--cyan);filter:drop-shadow(0 0 8px var(--cyan))}#objective{text-align:center;color:#aebfba;font-size:12px;letter-spacing:.08em}.currencies{justify-self:end;display:flex;gap:9px;align-items:center;font-weight:800}
#vitals{position:fixed;left:30px;top:82px;z-index:10;width:260px}.vital-row{display:grid;grid-template-columns:66px 1fr auto;align-items:center;gap:8px;margin-bottom:8px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:#91a59f}.meter{height:5px;background:rgba(255,255,255,.1);overflow:hidden;transform:skewX(-18deg)}.meter i,.target-meter i,.mastery-meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#9d3527,#f27c48);box-shadow:0 0 9px #f27c48;transition:width .24s}.meter.stamina i{background:linear-gradient(90deg,#5f8f61,#b1d782);box-shadow:0 0 9px #8cbd71}.meter.focus i{background:linear-gradient(90deg,#2d7185,#7be5e7);box-shadow:0 0 9px #62dbe2}.vital-row b{font-size:9px}
#mastery{position:fixed;left:30px;top:172px;z-index:10;width:260px;padding:12px 14px;background:linear-gradient(90deg,var(--glass),transparent);border-left:1px solid rgba(167,124,77,.6)}#mastery>span{display:block;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:#718b84}#mastery strong{display:block;margin-top:3px;font-family:Georgia,serif;font-size:17px;font-weight:400}#mastery small{float:right;margin-top:-18px;color:var(--cyan)}.mastery-meter{height:2px;margin-top:9px;background:rgba(255,255,255,.1)}.mastery-meter i{background:var(--bronze);box-shadow:none}
#school-trees{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:11px}#school-trees div{padding:6px 5px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2);text-align:center}#school-trees b{display:block;color:#82948f;font-size:7px;letter-spacing:.1em;text-transform:uppercase}#school-trees em{display:block;margin-top:3px;color:#b8c8c3;font:normal 12px Georgia,serif}#school-trees div.active{border-color:rgba(134,245,231,.52);background:rgba(53,139,130,.14)}#school-trees div.active em{color:var(--cyan)}
#world-state{position:fixed;right:30px;top:82px;z-index:10;width:190px;padding:11px 14px;text-align:right;background:linear-gradient(270deg,var(--glass),transparent);border-right:1px solid rgba(242,132,66,.58)}#world-state span,#world-state small{display:block;color:#718b84;font-size:8px;letter-spacing:.16em;text-transform:uppercase}#world-state strong{display:block;margin:3px 0;color:#f1d2b0;font:18px Georgia,serif}
#target-card{position:fixed;z-index:10;top:82px;left:50%;transform:translateX(-50%);width:min(420px,50vw);padding:10px 16px;background:linear-gradient(90deg,transparent,rgba(5,13,16,.75),transparent);text-align:center}#target-card>div:first-child{display:flex;justify-content:center;gap:12px;font-family:Georgia,serif}#target-level{font-family:Inter,sans-serif;color:var(--ember);font-size:9px;letter-spacing:.15em;text-transform:uppercase}.target-meter{height:3px;margin-top:7px;background:rgba(255,255,255,.1)}.target-meter i{background:linear-gradient(90deg,#d64424,#ffb052)}
#ability-bar{position:fixed;left:50%;bottom:28px;z-index:11;transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,minmax(96px,132px));gap:7px}.slot{position:relative;height:70px;padding:9px 8px 8px 48px;text-align:left;overflow:hidden;border:1px solid rgba(167,124,77,.44);background:linear-gradient(150deg,rgba(19,30,31,.93),rgba(5,12,15,.92));text-transform:none;letter-spacing:0;box-shadow:0 8px 24px rgba(0,0,0,.32)}.slot:before{content:"";position:absolute;inset:2px;border:1px solid rgba(255,255,255,.045);pointer-events:none}.slot kbd{position:absolute;right:7px;top:5px;color:#8aa09a;font:800 10px Inter}.slot .icon{position:absolute;left:9px;bottom:13px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-size:22px;color:var(--cyan);background:radial-gradient(circle,rgba(76,177,165,.25),transparent 68%);text-shadow:0 0 10px currentColor}.slot strong{display:block;font-family:Georgia,serif;font-size:13px;font-weight:500;white-space:nowrap}.slot small{display:block;margin-top:6px;color:#738b85;font-size:8px;text-transform:uppercase;letter-spacing:.11em}.slot .cooldown{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,5,7,.78);pointer-events:none}.slot.locked{filter:saturate(.25);opacity:.5}.slot.ready{border-color:rgba(134,245,231,.9);box-shadow:0 0 22px rgba(64,199,185,.17)}
#interaction{position:fixed;z-index:12;left:50%;bottom:122px;transform:translateX(-50%);padding:10px 16px;background:rgba(4,12,14,.82);border:1px solid rgba(134,245,231,.28);font-size:12px;letter-spacing:.05em}kbd{display:inline-block;margin-right:8px;padding:3px 6px;border:1px solid rgba(255,255,255,.3);border-bottom-width:2px;border-radius:3px;background:rgba(255,255,255,.06);font:800 10px Inter}
#toast{position:fixed;z-index:20;left:50%;top:21%;transform:translateX(-50%);padding:13px 24px;background:rgba(4,12,15,.84);border-left:2px solid var(--cyan);font-family:Georgia,serif;font-size:18px;box-shadow:0 12px 45px #000}#save-dot{position:fixed;z-index:11;right:30px;bottom:28px;color:#6f8982;font-size:9px;text-transform:uppercase;letter-spacing:.15em}
#controls{position:fixed;z-index:10;left:30px;bottom:30px;display:flex;gap:15px;color:#70837e;font-size:9px;text-transform:uppercase;letter-spacing:.12em}.controls b{font-weight:500}#controls kbd{margin-right:3px}#crosshair{position:fixed;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(185,240,228,.7);font-size:32px;text-shadow:0 0 9px var(--cyan);pointer-events:none}
#dev{display:none;position:fixed;z-index:99;top:8px;right:8px;padding:8px;background:#001;color:#8f8;font:11px monospace;white-space:pre}.outcome-card h2,.pause-card h2{font-family:Georgia,serif;font-size:48px;font-weight:400;margin:0 0 16px}.outcome-card p{color:#a9bbb5;line-height:1.6}.outcome-card button,.pause-card button{margin-top:12px}
#ability-bar{bottom:8px;padding:28px 34px 30px;background:url("./assets/images/hud_ornament_v2.png") center/100% 100% no-repeat}
@media(max-width:760px){#ability-bar{width:98vw;grid-template-columns:repeat(5,1fr);gap:3px;bottom:0;padding:20px 20px 22px}.slot{height:62px;padding:30px 2px 2px;text-align:center}.slot .icon{left:50%;top:4px;bottom:auto;transform:translateX(-50%);font-size:18px;width:25px;height:25px}.slot strong{font-size:9px;overflow:hidden}.slot small,#controls,#mastery{display:none}#topbar{padding:0 12px;grid-template-columns:1fr 1.5fr .5fr}.brand span:last-child{display:none}#objective{font-size:9px}#vitals{left:12px;top:70px;width:180px}.intro-card{padding:28px}.intro-card h1{font-size:52px}}
.shard{color:var(--ember);filter:drop-shadow(0 0 8px var(--ember));margin-left:10px}
#world-event{color:var(--cyan)!important;margin-top:4px;font-weight:800}
#target-level.elite{color:#ffd23c}
#dmg-layer{position:fixed;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.dmg-num{position:absolute;transform:translate(-50%,-50%);font:800 15px Georgia,serif;color:#f2e3c8;text-shadow:0 1px 6px #000,0 0 12px rgba(255,170,80,.4);opacity:0}
.dmg-num.show{animation:dmg-rise .75s ease-out forwards}
.dmg-num.heavy{font-size:22px;color:#ffc888}
.dmg-num.fire{color:#ff9052}.dmg-num.frost{color:#9fdcff}
@keyframes dmg-rise{0%{opacity:0;margin-top:0}12%{opacity:1}100%{opacity:0;margin-top:-46px}}
#compass{position:fixed;z-index:9;top:70px;left:50%;transform:translateX(-50%);width:min(420px,46vw);pointer-events:none}
#compass-strip{position:relative;height:26px;overflow:hidden;background:linear-gradient(90deg,transparent,rgba(5,14,17,.55) 18%,rgba(5,14,17,.55) 82%,transparent);border-bottom:1px solid rgba(134,245,231,.18)}
#compass-strip:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(134,245,231,.55)}
#compass-strip i,#compass-strip b{position:absolute;top:4px;transform:translateX(-50%);font:800 11px Inter;font-style:normal;color:#8fa59f;letter-spacing:.1em}
#compass-strip b{color:var(--cyan);text-shadow:0 0 8px var(--cyan);font-size:12px}
#compass-strip b.contract{color:#ffd23c;text-shadow:0 0 8px #ffd23c}
#compass-strip b.cache{color:var(--ember);text-shadow:0 0 8px var(--ember)}
#compass-strip b.edge{opacity:.4}
#compass-strip b.corpse{color:#9fdcff;text-shadow:0 0 8px #9fdcff}
#compass-strip b.reliquary{color:#65fff1;text-shadow:0 0 10px #65fff1;animation:badge-pulse 2s ease infinite}
#talent-badge{float:right;color:#ffd23c;font:800 10px Inter;letter-spacing:.08em;animation:badge-pulse 1.6s ease infinite}
#draw-meter{position:fixed;z-index:8;left:50%;top:calc(50% + 34px);transform:translateX(-50%);width:92px;height:5px;background:rgba(255,255,255,.12);border:1px solid rgba(134,245,231,.3)}
#draw-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5f8f61,#b1d782);transition:none}
#draw-meter.hard i{background:linear-gradient(90deg,#d8a04a,#ffd23c);box-shadow:0 0 8px #ffd23c}
@keyframes badge-pulse{0%,100%{opacity:.55}50%{opacity:1}}
#region-banner{position:fixed;z-index:14;left:50%;top:26%;transform:translateX(-50%);text-align:center;pointer-events:none;opacity:0}
#region-banner.show{animation:region-fade 3.4s ease forwards}
#region-banner strong{display:block;font:400 44px Georgia,serif;letter-spacing:.04em;text-shadow:0 4px 26px #000,0 0 18px rgba(134,245,231,.25)}
#region-banner small{display:block;margin-top:6px;color:var(--cyan);font-size:12px;letter-spacing:.3em;text-transform:uppercase}
@keyframes region-fade{0%{opacity:0;transform:translateX(-50%) translateY(8px)}12%{opacity:1;transform:translateX(-50%)}80%{opacity:1}100%{opacity:0}}
.choice-option.static{cursor:default;pointer-events:none}
.choice-card{width:min(680px,90vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.choice-card>h2{flex:0 0 auto}
#choice-options,#forge-options,#board-options,#gear-options,#vendor-options,#meeting-options,#camp-options,#tree-columns{overflow-y:auto;flex:1 1 auto;min-height:0;padding-right:6px;scrollbar-width:thin;scrollbar-color:#35544e #0b1719}
.choice-card>button.ghost{flex:0 0 auto;position:sticky;bottom:0}
#choice-options::-webkit-scrollbar,#forge-options::-webkit-scrollbar,#camp-options::-webkit-scrollbar{width:8px}
#choice-options::-webkit-scrollbar-thumb,#forge-options::-webkit-scrollbar-thumb,#camp-options::-webkit-scrollbar-thumb{background:#35544e;border-radius:4px}
#choice-options,#forge-options{display:grid;gap:10px;margin-top:18px}
.choice-option{position:relative;display:block;text-align:left;padding:16px 18px 14px 52px;text-transform:none;letter-spacing:0;border:1px solid rgba(134,245,231,.35);background:linear-gradient(150deg,rgba(19,30,31,.95),rgba(5,12,15,.92))}
.choice-option kbd{position:absolute;left:14px;top:16px}
.choice-option strong{display:block;font-family:Georgia,serif;font-size:17px;font-weight:500}
.choice-option span{display:block;margin-top:4px;color:#8fa59f;font-size:12px;line-height:1.45}
.choice-option em{position:absolute;right:14px;top:16px;font-style:normal;color:var(--ember);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.choice-option:disabled{opacity:.45;cursor:default;filter:saturate(.4)}
.choice-option.respec{border-color:rgba(242,132,66,.5)}
.gear-slot-header{margin-top:10px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#718b84}
.choice-option.equipped-row{border-color:rgba(134,245,231,.75);background:linear-gradient(150deg,rgba(31,54,52,.95),rgba(8,18,20,.92))}
.save-tools{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.save-tools button{font-size:9px;padding:9px 14px}
#forge-close{margin-top:16px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Week 19 — the paths of ash (mastery tree). Original layout: three rising
   stone-paths per school plus the equipped weapon's own path. */
.tree-card{max-width:880px;width:92vw;max-height:88vh;overflow-y:auto}
#tree-equipped{display:flex;gap:8px;margin:14px 0 18px;flex-wrap:wrap}
#tree-equipped .teq{flex:1;min-width:120px;border:1px solid #2c4642;background:#0c1a1c;padding:8px 10px;border-radius:4px;text-align:left}
#tree-equipped .teq kbd{color:var(--cyan);margin-right:6px}
#tree-equipped .teq b{display:block;font-size:12px;color:#d7e8e2}
#tree-equipped .teq small{color:#70837e;font-size:10px}
#tree-equipped .teq.universal{border-color:#4a3d22;background:#171307}
#tree-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;text-align:left}
.tcol h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#9fb8ad;margin:0 0 4px}
.tcol .tlevel{font-size:10px;color:#70837e;margin-bottom:10px}
.tnode{position:relative;border:1px solid #24403c;background:#0b1719;border-radius:4px;padding:8px 10px;margin:0 0 8px 14px}
.tnode:before{content:"";position:absolute;left:-14px;top:50%;width:12px;border-top:1px dotted #35544e}
.tcol .tpath{border-left:1px dotted #35544e;padding-top:2px}
.tnode b{display:block;font-size:12px;color:#cfe4dd}
.tnode small{display:block;color:#77908a;font-size:10px;line-height:1.45;margin-top:2px}
.tnode .tstate{position:absolute;top:6px;right:8px;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.tnode.owned{border-color:#7a5a2b;background:#161107}
.tnode.owned .tstate{color:var(--ember)}
.tnode.avail{border-color:var(--cyan);cursor:pointer;animation:treePulse 1.6s infinite}
.tnode.avail .tstate{color:var(--cyan)}
.tnode.locked{opacity:.55}
.tnode.locked .tstate{color:#5c6f6a}
@keyframes treePulse{0%,100%{box-shadow:0 0 0 0 rgba(126,245,229,.0)}50%{box-shadow:0 0 12px 0 rgba(126,245,229,.28)}}
.tthresh{font-size:9px;color:#8fa79f;text-transform:uppercase;letter-spacing:.12em;margin:10px 0 6px 2px}

#camp-options{text-align:left}
#camp-options .csec{font-size:10px;color:#8fa79f;text-transform:uppercase;letter-spacing:.13em;margin:14px 0 6px}
#camp-options .choice-option.reco{border-color:var(--ember);animation:treePulse 1.8s infinite}
#camp-options .cguide{border:1px dotted #35544e;border-radius:4px;padding:9px 11px;color:#77908a;font-size:11px;line-height:1.5}

/* Week 21 — the living map overlay. It never pauses the world. */
#map-overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(4,10,12,.72)}
#map-overlay.hidden{display:none}
#map-frame{background:#0a1517;border:1px solid #2c4642;border-radius:6px;padding:18px 22px;text-align:center;max-width:min(92vw,720px)}
#map-frame h2{font-family:Georgia,serif;font-weight:400;margin:2px 0 10px;color:#e8f2ee}
#map-canvas{width:min(78vw,560px);height:min(78vw,560px);border:1px solid #1f3733;border-radius:4px;background:#0c181a;cursor:crosshair}
#map-brief{min-height:2.4em;color:#9fb8ad;font-size:12px;line-height:1.5;margin:10px 0 4px}
#burden-pip{margin-top:6px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8f7fb8}
#burden-pip.warm{color:#d9a06b}
#burden-pip.hot{color:#e0684a;animation:treePulse 1.4s infinite}

/* Week 23.5 — coherent low-fantasy interface language */
.outcome-card,.pause-card{border:1px solid #3a2f22;border-left:3px solid var(--ember);box-shadow:0 0 40px rgba(0,0,0,.55), inset 0 0 60px rgba(20,12,4,.35);background:linear-gradient(135deg,rgba(16,18,14,.96),rgba(7,10,10,.94))}
.eyebrow{color:var(--ember)!important}
.choice-option{border-radius:3px;border:1px solid #33413a;background:linear-gradient(150deg,rgba(24,26,20,.96),rgba(8,12,12,.94))}
.choice-option:hover:not(:disabled){border-color:var(--ember);box-shadow:inset 0 0 18px rgba(255,140,60,.08)}
.choice-option:disabled{opacity:.45;border-style:dashed}
.choice-option em{color:var(--ember)}
/* hotbar as a crafted command bar */
#ability-bar{border-top:2px solid #4a3823;background:linear-gradient(180deg,rgba(18,14,8,.92),rgba(8,7,4,.96)) !important;border-radius:6px 6px 0 0;box-shadow:0 -6px 30px rgba(0,0,0,.5)}
.slot{border:1px solid #4a3d2a;border-radius:4px;background:linear-gradient(160deg,#1a160e,#0b0a06)}
.slot kbd{background:#2b2214;border:1px solid #5a462a;color:#e8c99a;border-radius:3px}
.slot[data-slot="5"]{border-color:#2c4642;background:linear-gradient(160deg,#0e1a18,#071010)}
.slot .icon{filter:drop-shadow(0 0 6px rgba(255,150,60,.35))}
.slot:disabled,.slot.cooldown-active{filter:saturate(.4) brightness(.7)}
.tpoolcol{grid-column:1 / -1}
.tpoolcol .tnode{display:inline-block;width:calc(33% - 10px);margin-right:8px;vertical-align:top}
.tbindrow{margin-top:6px;display:flex;gap:5px}
.tbindrow button{width:26px;height:22px;padding:0;font-size:11px;border:1px solid #35544e;background:#0c1a1c;color:#9fb8ad;border-radius:3px}
.tbindrow button.on{border-color:var(--ember);color:var(--ember)}

#guide-overlay{position:fixed;inset:0;z-index:44;display:flex;align-items:center;justify-content:center;background:rgba(4,10,12,.78)}
#guide-overlay.hidden{display:none}
#guide-body p{color:#a9bbb5;font-size:13px;line-height:1.65;text-align:left;margin:10px 0;border-left:2px solid #3a2f22;padding-left:12px}

/* =========================================================================
   Low-fantasy dress (Fabio): every panel, every key-opened screen, and the
   command bar wear the generated ashwood/iron/leather art. Aesthetic only.
   ========================================================================= */
.intro-card,.pause-card,.outcome-card,#map-frame{
  border:26px solid transparent;
  border-image:url("./assets/images/ui_panel_frame.webp") 170 fill / 26px stretch;
  background:none;backdrop-filter:none;box-shadow:0 12px 60px rgba(0,0,0,.65)}
.outcome-card{border-left-width:26px}
.outcome-card h2,.pause-card h2,#map-frame h2{color:#efe4d2;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.outcome-card p,#guide-body p{color:#c9b8a0}
#guide-body p{border-left-color:#6a4a26}
.eyebrow{color:#e0913f!important;letter-spacing:.22em}
/* leather buttons */
.pause-card button,.outcome-card>button,#map-frame button,.ghost{
  border:2px solid #4a3823;border-radius:4px;color:#e8d5b5;
  background:url("./assets/images/ui_button_strip.webp") center/cover no-repeat;
  text-shadow:0 1px 4px rgba(0,0,0,.9);padding:12px 22px}
.pause-card button:hover,.ghost:hover{filter:brightness(1.25)}
/* recipe/choice rows: stitched leather cards */
.choice-option{
  border:1px solid #4a3a26;border-radius:4px;
  background:url("./assets/images/ui_button_strip.webp") center/100% 100% no-repeat;
  box-shadow:inset 0 0 24px rgba(0,0,0,.55)}
.choice-option strong{color:#efe0c6}
.choice-option span{color:#b9a88e}
.choice-option em{color:#e0913f}
.choice-option:disabled{filter:grayscale(.6) brightness(.6);border-style:dashed}
.choice-option.reco{border-color:#e0913f;box-shadow:0 0 14px rgba(224,145,63,.25), inset 0 0 24px rgba(0,0,0,.55)}
/* the command bar: hand-forged plate + iron sockets */
#ability-bar{
  background:url("./assets/images/ui_bar_plate.webp") center/100% 100% no-repeat!important;
  border:none;border-radius:8px;padding:26px 38px 28px;box-shadow:0 10px 44px rgba(0,0,0,.6)}
.slot{
  border:none;border-radius:6px;
  background:#0b0906 url("./assets/images/ui_slot_socket.webp") center/100% 100% no-repeat;
  background-blend-mode:multiply;
  filter:brightness(.82) saturate(.85);
  box-shadow:0 3px 10px rgba(0,0,0,.5)}
.slot:hover:not(:disabled){filter:brightness(1) saturate(1)}
.slot kbd{background:rgba(24,17,9,.85);border:1px solid #6a4f2a;color:#e8c99a}
.slot strong{color:#e9dcc4;text-shadow:0 1px 4px rgba(0,0,0,.95)}
.slot small{color:#9e8f76}
.slot[data-slot="5"]{filter:hue-rotate(120deg) saturate(.5)}
.slot .cooldown{border-radius:6px}
/* tree / camp / gear nodes pick up the leather language */
.tnode{border:1px solid #4a3a26;background:linear-gradient(150deg,rgba(30,24,16,.95),rgba(12,10,7,.95))}
.tnode b{color:#e9dcc4}
.tnode small{color:#a3927a}
.tnode.owned{border-color:#8a5a26;background:linear-gradient(150deg,rgba(44,30,14,.96),rgba(16,11,5,.96))}
.tnode.avail{border-color:#e0913f}
.tthresh,#camp-options .csec{color:#c8a06a}
.cguide{border:1px dotted #5a462a;color:#a3927a;background:rgba(16,12,7,.6)}
.tbindrow button{border-color:#5a462a;background:#171208;color:#c8b493}
.tbindrow button.on{border-color:#e0913f;color:#e0913f}
/* HUD framing touches */
#vitals,#mastery,#world-state{border-left:2px solid #4a3823;background:linear-gradient(90deg,rgba(14,11,7,.72),transparent);padding-left:10px;border-radius:2px}
#tree-equipped .teq{border-color:#4a3a26;background:linear-gradient(150deg,rgba(30,24,16,.95),rgba(12,10,7,.95))}
#tree-equipped .teq kbd{color:#e0913f}
#tree-equipped .teq.universal{border-color:#2c4642}
#map-canvas{border-color:#4a3a26}
#interaction{background:rgba(20,15,8,.9);border:1px solid #4a3823;border-radius:4px;padding:6px 12px}
#interaction kbd{background:#2b2214;border:1px solid #6a4f2a;color:#e8c99a}
#toast{background:rgba(20,15,8,.92);border:1px solid #4a3823;color:#e8d5b5}

/* Command-bar readability (Fabio): centered column layout, one line per text,
   ellipsis instead of overlap, icon crowned above the name. */
#ability-bar{grid-template-columns:repeat(5,minmax(104px,138px));gap:9px}
.slot{height:84px;padding:8px 8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center}
.slot .icon{position:static;left:auto;bottom:auto;transform:none;width:26px;height:26px;font-size:19px;margin:0 auto 2px;flex:0 0 auto}
.slot strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;line-height:1.25;flex:0 0 auto}
.slot small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:7.5px;letter-spacing:.09em;flex:0 0 auto}
.slot kbd{left:6px;right:auto;top:5px;font-size:9px;padding:1px 5px}

#ready-chips{position:absolute;top:-24px;left:0;right:0;display:flex;gap:6px;justify-content:center;pointer-events:none}
.rchip{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8d7f68;background:rgba(18,14,8,.88);border:1px solid #4a3823;border-radius:3px;padding:3px 9px}
.rchip.on{color:#e8c99a;border-color:#e0913f}
.rchip.on em{color:#e0913f;font-style:normal}
.rchip.aux{color:#7d8f89;border-color:#2c4642}