:root{color-scheme:dark;--ink:#15141b;--panel:#201e27;--gold:#cfab73;--muted:#a29ba7;--line:#4b4143;--cream:#eee5d5;--ruby:#a84960}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101016;color:var(--cream);font-family:Georgia,'Times New Roman',serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #e9bd70;outline-offset:3px}button{border:1px solid var(--line);background:#211e28;transition:background .15s,border-color .15s,transform .15s}button:hover{background:#39303a;border-color:#b6986b}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:wait}#game-shell{height:100dvh;display:flex;flex-direction:column;padding:0 18px}header{height:66px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 9px}.wordmark{font-size:25px;color:#e7dac0;text-decoration:none;letter-spacing:5px}.sigil{color:var(--gold);font-size:30px;vertical-align:-2px;margin-right:10px}.chapter{font:11px/1.4 Arial,sans-serif;letter-spacing:2.4px;color:#b1a5a4}.chapter span{color:#67575b;margin:0 15px}nav{display:flex;align-items:center;gap:9px}nav button{width:32px;height:32px;font-family:Arial,sans-serif;font-size:17px;background:transparent;border-color:#3e3540;border-radius:3px}nav button:first-child{width:auto;padding:0 11px;color:#b3a6aa}nav button span{font-size:12px;margin-left:5px}#stage{position:relative;flex:1;min-height:0;border:1px solid #584749;outline:1px solid #211b23;outline-offset:4px;overflow:hidden;background:#182023}#world{width:100%;height:100%;display:block;image-rendering:pixelated;outline:none;touch-action:none}.vignette{position:absolute;inset:0;box-shadow:inset 0 0 100px 25px #0b091b60;pointer-events:none}.player-hud{position:absolute;left:26px;top:25px;display:flex;gap:12px;pointer-events:none}.portrait{width:62px;height:66px;border:1px solid #a27c53;background:linear-gradient(#23232d,#40333d);position:relative;box-shadow:0 3px 12px #0009}.sprite{display:inline-block;background-image:url('sprites.png');background-size:400% 400%;image-rendering:pixelated;width:100%;height:100%;background-repeat:no-repeat}.level{position:absolute;bottom:-9px;left:20px;border:1px solid #9f7c56;background:#302634;width:24px;height:24px;text-align:center;line-height:22px;font-size:13px;color:var(--gold)}.vitals{width:196px;padding-top:3px}.player-name{font:10px Arial,sans-serif;letter-spacing:1.5px;color:#dccdbd;margin-bottom:9px;text-shadow:0 1px 3px #000}.player-name span{float:right;letter-spacing:0;color:#aaa0a3}.meter{position:relative;background:#251b27;border:1px solid #856265;height:18px;box-shadow:0 2px 4px #0006;padding:2px}.meter div{height:100%;transition:width .18s}.health div{background:linear-gradient(90deg,#9a374f,#c76170)}.meter span{position:absolute;inset:0;text-align:center;font:10px/17px Arial,sans-serif;text-shadow:0 1px 2px #000}.stamina{height:8px;margin-top:5px;border-color:#576b66;padding:1px}.stamina div{background:#6dada2}.xp-track{height:3px;background:#322a32;margin-top:5px}.xp-track div{height:100%;background:#d5b77e;width:0}.quest-hud{position:absolute;left:29px;top:124px;width:250px;text-shadow:0 2px 4px #0a0914;pointer-events:none}.eyebrow{font:10px/1.5 Arial,sans-serif;letter-spacing:1.7px;color:#bfaeaa}.gold{color:var(--gold)}.quest-hud h1{font-size:20px;font-weight:normal;margin:10px 0 8px;color:#e2d6c2}.quest-hud p{font:13px/1.6 Arial,sans-serif;color:#beb4b8;margin:0}.quest-key{display:block;font:9px Arial,sans-serif;letter-spacing:1.8px;color:#94888e;margin-top:14px}.quest-key kbd{margin-left:8px}.quest-hud #quest-progress{font:12px/1.9 Arial,sans-serif;color:#cbbfae;margin-top:8px}kbd{font:10px Arial,sans-serif;display:inline-block;border:1px solid #655558;background:#221d2899;border-radius:2px;padding:2px 4px;color:#cbbbae}.location-hud{position:absolute;right:25px;top:26px;text-align:right}.location-title{font-size:22px;text-shadow:0 2px 3px #000}.location-sub{font:11px Arial,sans-serif;color:#bcafb0;margin-top:7px}.location-sub .gold{margin-right:4px}.location-hud button{margin-top:17px;display:inline-flex;flex-direction:column;align-items:stretch;padding:4px;background:#191722d9;box-shadow:0 3px 14px #0005;border:1px solid #80674e}.location-hud canvas{width:144px;height:94px;image-rendering:pixelated;opacity:.9}.location-hud button span{text-align:center;font:9px Arial,sans-serif;letter-spacing:2px;margin-top:5px}.location-hud kbd{font-size:8px;margin-left:8px}.hotbar-wrap{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column}.hotbar{display:flex;gap:6px;padding:8px 12px;background:linear-gradient(#24212be8,#15131cf5);border:1px solid #6d5254;outline:1px solid #171119;outline-offset:3px;box-shadow:0 5px 18px #0008;position:relative}.hotbar:before,.hotbar:after{content:'◇';position:absolute;top:25px;color:#ad855e;font-size:22px}.hotbar:before{left:-18px}.hotbar:after{right:-18px}.slot{width:57px;height:61px;position:relative;background:#27222e;border:1px solid #55414b;border-radius:2px;display:flex;align-items:center;justify-content:center}.slot.active{border-color:#bf9567;background:#3d303a;box-shadow:inset 0 0 8px #aa724226}.slot kbd{position:absolute;top:2px;left:3px;border:0;font-size:9px;background:none;padding:0;color:#ccbab5}.slot small{position:absolute;bottom:4px;font:9px Arial,sans-serif;letter-spacing:.3px;color:#b1a4a9}.slot b{position:absolute;right:5px;bottom:15px;font:10px Arial,sans-serif;color:#e3d6c5}.weapon{font:32px Georgia,serif;color:#ded5c7;margin-top:-4px}.spell{color:#efad68;text-shadow:0 0 10px #ee704889;font-size:36px}.dash{color:#97beb7;font-size:40px;margin-top:-10px}.bag-icon,.book-icon{font:29px Georgia,serif;color:#c1a179;margin-top:-6px}.potion-icon{height:23px;width:16px;background:linear-gradient(90deg,#6b2c46,#d37081,#8b334d);border:1px solid #f4a7a070;border-radius:5px 5px 6px 6px;position:relative;transform:rotate(12deg);margin-top:-3px}.potion-icon:before{content:'';width:7px;height:6px;position:absolute;top:-6px;left:3px;background:#b0926e;border:1px solid #6d4b3f}.hotbar-divider{width:1px;background:#524149;margin:4px 3px}.controls-hint{display:flex;white-space:nowrap;gap:16px;margin-top:15px;font:10px Arial,sans-serif;color:#b2a6ab;text-shadow:0 1px 3px #000}.controls-hint kbd{margin-right:4px;font-size:9px}.corner-status{position:absolute;bottom:24px;right:24px;display:flex;flex-direction:column;gap:7px;text-align:right;font:10px Arial,sans-serif;color:#b3a6a6;text-shadow:0 1px 4px #000}#resource-summary{color:#d0b992}footer{height:36px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 5px;font:9px Arial,sans-serif;color:#817984;letter-spacing:1px}footer>span:first-child{font-size:9px;letter-spacing:1.8px}footer i{display:inline-block;width:5px;height:5px;transform:rotate(45deg);background:#ac8962;margin-right:8px}footer .separator{padding:0 10px}#interact-prompt{position:absolute;left:50%;top:57%;transform:translateX(-50%);padding:7px 12px;background:#1c1828e8;border:1px solid #887154;font:12px Arial,sans-serif;white-space:nowrap;pointer-events:none;display:none;box-shadow:0 3px 14px #0005}#interact-prompt kbd{margin-right:6px;color:#f0d3a0}#toasts{position:absolute;right:24px;bottom:135px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}.toast{font:12px Arial,sans-serif;color:#e6d6bb;background:#171724e8;border-left:2px solid #af8c5c;padding:10px 14px;animation:toast-in .3s ease;max-width:320px;line-height:1.5}#area-banner{position:absolute;left:50%;top:24%;transform:translateX(-50%);text-align:center;font-size:30px;color:#e8d6b7;text-shadow:0 2px 8px #000;opacity:0;transition:opacity .7s;pointer-events:none;letter-spacing:2px;white-space:nowrap}.start-shade{position:absolute;inset:0;background:#0c0a1690;backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}.start-card{text-align:center;padding:38px 46px;background:linear-gradient(#201c27ee,#17141deb);border:1px solid #79604b;box-shadow:0 20px 90px #0008;max-width:480px;width:90%;outline:1px solid #5c453856;outline-offset:6px}.start-card h2{font-size:72px;letter-spacing:7px;font-weight:normal;margin:14px 0 0;color:#f0dfbc}.ornament{color:#9b7750;font-size:16px;margin:8px 0 14px}.start-card h3{font-weight:normal;font-size:23px;letter-spacing:1px;margin:10px 0}.start-card p{font:14px/1.9 Arial,sans-serif;color:#bcafb4;margin:18px 0 25px}.primary{background:linear-gradient(#a58052,#795a3b);border:1px solid #d4ad6e;color:#fff1d1;padding:13px 27px;font-size:15px;letter-spacing:.8px;box-shadow:inset 0 0 0 3px #33292155}.primary:hover{background:linear-gradient(#ba965f,#8f6b43);border-color:#f2d39b}.start-note{font:10px Arial,sans-serif;color:#96848d;margin-top:21px;letter-spacing:1.1px}#load-error{font:12px/1.5 Arial,sans-serif;color:#e0a4a4;margin-top:15px}dialog{padding:0;color:var(--cream);width:min(660px,calc(100vw - 30px));max-height:85dvh;background:#211d28;border:1px solid #a08057;box-shadow:0 20px 100px #000;outline:1px solid #55423d;outline-offset:5px}dialog::backdrop{background:#0a0816a6;backdrop-filter:blur(3px)}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:23px 28px;border-bottom:1px solid #564048;background:linear-gradient(110deg,#302630,#221d28)}.panel-header h2{font-weight:normal;font-size:27px;margin:5px 0 0}.close-btn{font:27px Arial,sans-serif;width:34px;height:34px;border:none;background:none;color:#bdaaab}#panel-content{padding:24px 28px;overflow:auto;font:14px/1.65 Arial,sans-serif;color:#cfc0c4}#panel-content h3{font:20px Georgia,serif;color:#ead6b9;margin:20px 0 10px}#panel-content h3:first-child{margin-top:0}#panel-content p{margin:9px 0 16px}.inventory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:23px}.item-card{border:1px solid #51414e;background:#191722;padding:12px 6px;text-align:center;position:relative}.item-card .item-art{width:64px;height:64px;display:block;margin:auto}.item-card b{display:block;font-size:12px;font-weight:normal}.item-card strong{position:absolute;top:5px;right:7px;font-size:12px;color:#d9b77c}.recipe{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:14px 0;border-top:1px solid #493844}.recipe h4{font-size:14px;margin:0;color:#e1d3c2;font-weight:normal}.recipe p{font-size:12px!important;margin:3px 0!important;color:#ad9ba5}.recipe button{padding:8px 13px;font-size:12px;flex-shrink:0}.recipe button:disabled{cursor:not-allowed}.stats{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:#bdafa9;margin-bottom:17px}.stats span{border:1px solid #4f4046;padding:5px 9px}.journal-entry{border-left:2px solid #5c4d42;padding:1px 0 1px 17px;margin:18px 0}.journal-entry.done{border-color:#759e8a}.journal-entry h3{margin:0 0 8px!important}.journal-entry p{font-size:13px}.journal-entry .tag{font-size:10px;letter-spacing:1px;color:var(--gold)}.dialogue-speaker{display:flex;gap:18px;align-items:center;margin-bottom:18px}.dialogue-speaker .sprite{width:78px;height:90px;flex-shrink:0;background-color:#292332;border:1px solid #5d494d}.dialogue-speaker blockquote{margin:0;font:18px/1.6 Georgia,serif;color:#e0cbb7}.dialogue-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.dialogue-actions button{padding:11px 18px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;font-size:13px}.help-grid span{display:flex;gap:10px;align-items:center}.help-grid kbd{min-width:57px;text-align:center;font-size:12px}.menu-actions{display:flex;flex-direction:column;gap:12px}.menu-actions button{padding:12px}.muted{color:#a6929d;font-size:12px}#big-map{width:100%;image-rendering:pixelated;border:1px solid #51454b}.map-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;margin-top:12px}.map-legend i{width:8px;height:8px;display:inline-block;margin-right:5px;border-radius:50%}.danger{color:#d5909e}.win{color:#e6be76}#touch-controls{display:none}#spell-cooldown{position:absolute;bottom:0;left:0;right:0;background:#12121b99;pointer-events:none}.shake{animation:shake .2s} @keyframes toast-in{from{opacity:0;transform:translateX(15px)}to{opacity:1;transform:none}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(max-width:1000px){.chapter{display:none}.corner-status{display:none}.quest-hud{width:220px;left:22px}.quest-hud h1{font-size:18px}.player-hud{left:20px}.location-hud{right:19px}.controls-hint{gap:8px;font-size:9px}.hotbar-wrap{bottom:21px}.quest-hud p{font-size:12px}footer>span:nth-child(2){font-size:8px;letter-spacing:0}}
@media(max-width:650px){#game-shell{padding:0 6px}header{height:49px;padding:0 8px}.wordmark{font-size:20px;letter-spacing:3px}.sigil{margin-right:2px}nav button:first-child{padding:0;width:30px}nav button span{display:none}nav{gap:6px}footer{height:27px;font-size:8px}footer>span:nth-child(2){display:none}.player-hud{top:15px;left:13px;gap:8px}.portrait{width:44px;height:48px}.level{width:19px;height:19px;font-size:11px;line-height:17px;left:12px}.vitals{width:140px}.player-name{font-size:8px;letter-spacing:.6px}.player-name span{display:none}.meter{height:15px}.meter span{font-size:9px;line-height:14px}.stamina{height:6px}.quest-hud{top:89px;left:14px;width:180px}.eyebrow{font-size:8px;letter-spacing:1px}.quest-hud h1{font-size:16px;margin:6px 0}.quest-hud p{font-size:11px;line-height:1.5}.quest-key{display:none}.quest-hud #quest-progress{font-size:10px}.location-hud{top:17px;right:12px}.location-title{font-size:14px}.location-sub{display:none}.location-hud canvas{width:90px;height:61px}.location-hud button{margin-top:9px;padding:3px}.location-hud button span{font-size:8px}.hotbar-wrap{bottom:14px;width:100%}.hotbar{padding:5px 7px;gap:5px}.slot{width:42px;height:50px}.slot small{font-size:8px}.weapon{font-size:27px}.hotbar-divider{margin:2px 1px}.controls-hint{display:none}#toasts{right:12px;bottom:170px}.toast{font-size:11px;max-width:260px}#interact-prompt{top:61%;font-size:11px}.start-card{padding:25px 20px;max-width:360px}.start-card h2{font-size:54px}.start-card p{font-size:13px}.start-card h3{font-size:20px}.start-note{font-size:9px}.panel-header{padding:18px 20px}#panel-content{padding:20px}.inventory-grid{gap:5px}.item-card b{font-size:10px}.item-card .item-art{width:46px;height:46px}.help-grid{font-size:11px;gap:12px}.help-grid kbd{min-width:45px}.dialogue-speaker blockquote{font-size:16px}.dialogue-speaker .sprite{width:64px;height:74px}#area-banner{font-size:23px;top:30%}}
@media(pointer:coarse){#touch-controls{display:flex;position:absolute;bottom:100px;left:19px;right:20px;justify-content:space-between;align-items:end;pointer-events:none}.dpad{width:123px;height:86px;display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,40px);gap:3px}.dpad button{background:#211d2899;border-color:#8e776b66;font:23px Arial;pointer-events:auto;touch-action:none}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}#touch-interact{width:48px;height:48px;border-radius:50%;pointer-events:auto;background:#3a2e3acc;border-color:#9e835a;touch-action:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#combo-readout{height:28px;padding:5px 13px;margin-bottom:8px;background:#191622dc;border:1px solid #aa855a77;color:#e8d2ac;font:12px Georgia,serif;letter-spacing:.4px;opacity:0;transition:opacity .15s;white-space:nowrap;pointer-events:none}#combo-readout.visible{opacity:1}#combo-readout>span{display:inline-flex;gap:5px;margin-right:9px}#combo-readout i{width:6px;height:6px;transform:rotate(45deg);background:#554653;border:1px solid #aa855a}#combo-readout i.lit{background:#efca8d;box-shadow:0 0 7px #dfac5977}

/* --- expansion HUD ---------------------------------------------------- */
.meter.focus{height:5px;margin-top:3px;background:#221d2b;border-radius:3px;overflow:hidden;border:1px solid #3a3143}
.meter.focus>div{height:100%;background:linear-gradient(90deg,#8e6fd0,#e6c07a);transition:width .18s}
.meter.focus.ready>div{background:linear-gradient(90deg,#ffd87a,#fff3c4);box-shadow:0 0 8px #ffd87a99}
.meter.focus.wide{height:9px;margin:10px 0 4px}
#shield-pip{color:#ffe6b0;font-size:10px;letter-spacing:.06em}
#coin-purse{color:var(--gold);letter-spacing:.08em}
#coin-purse b{color:var(--cream);font-weight:600}
#boss-bar{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:min(440px,62%);pointer-events:none;text-align:center;z-index:5}
.boss-line{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#e6c3ad;text-shadow:0 1px 3px #000}
.boss-line i{font-style:normal;color:var(--gold);font-size:10px}
.boss-track{height:9px;margin-top:4px;background:#1b1219cc;border:1px solid #5a3b3f;border-radius:5px;overflow:hidden}
#boss-fill{height:100%;background:linear-gradient(90deg,#8c3540,#d8836a);transition:width .2s}
#area-banner b{display:block;font-weight:400}
#area-banner i{display:block;font-size:12px;font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.slot.tiny{min-width:44px;opacity:.82}
.slot .weapon.heavy{color:#e0a07a}
.slot .weapon.focus-icon{color:#e6c07a}
.touch-actions{display:none}
@media(pointer:coarse){
 /* The parent strip is pointer-events:none so the canvas stays draggable;
    every control inside it has to opt back in. */
 .touch-actions{display:grid;grid-template-columns:repeat(3,auto);grid-auto-rows:auto;gap:8px;
  pointer-events:none;align-items:center;justify-items:center}
 .touch-actions button{width:50px;height:50px;border-radius:50%;background:#241f2be6;
  border:1px solid var(--line);color:var(--cream);font-size:17px;pointer-events:auto;touch-action:none;
  display:flex;align-items:center;justify-content:center;padding:0}
 .touch-actions button:active{background:#413756;border-color:var(--gold)}
 .touch-actions .big{width:74px;height:74px;font-size:24px;border-color:var(--gold);color:var(--gold);
  grid-column:3;grid-row:1/span 2;background:#2b2436ee}
 .t-focus{grid-column:1;grid-row:1} .t-heavy{grid-column:2;grid-row:1}
 .t-tonic{grid-column:1;grid-row:2} .t-dodge{grid-column:2;grid-row:2}
 .t-swap{grid-column:1;grid-row:3}  .t-spell{grid-column:2;grid-row:3}
 #touch-interact{position:static;width:50px;height:50px;grid-column:3;grid-row:3;
  background:#3a2e3ae6;border-color:#9e835a}
 /* The touch cluster replaces the action hotbar; only the two utility slots stay. */
 .hotbar-wrap{bottom:auto;top:6px;left:auto;right:10px;transform:none;align-items:flex-end;pointer-events:none}
 .hotbar{gap:4px;padding:4px 6px;pointer-events:auto}
 .hotbar .slot:not(.utility),.hotbar-divider,.controls-hint,#combo-readout{display:none}
 .hotbar .slot small,.hotbar .slot kbd{display:none}
 /* Keep the bottom corners clear: the d-pad owns the left, the action
    cluster owns the right. */
 .location-hud{top:72px;right:10px;left:auto;bottom:auto;text-align:right}
 .location-hud #map-btn canvas{display:none}
 .location-hud #map-btn{padding:5px 9px}
 #toasts{left:12px;right:auto;top:auto;bottom:186px;max-width:52%;align-items:flex-start}
 #interact-prompt{top:46%}
 #touch-controls{bottom:20px}
 .quest-hud{max-width:58%}
 #quest-progress{display:none}
 .corner-status{display:none}
}
@media(pointer:coarse) and (max-width:560px){
 .touch-actions button{width:44px;height:44px;font-size:15px}
 .touch-actions .big{width:62px;height:62px;font-size:20px}
 #touch-interact{width:44px;height:44px}
 .dpad{width:108px;height:75px;grid-template-columns:repeat(3,35px);grid-template-rows:repeat(2,35px)}
 .quest-hud{max-width:52%}
 .quest-hud p{display:none}
 .location-title{font-size:13px}
 .location-sub{display:none}
 #toasts{bottom:172px;max-width:56%;font-size:11px}
 .player-hud{left:12px;top:12px;gap:8px}
 .portrait{width:44px;height:48px}
}

/* --- panels ----------------------------------------------------------- */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.tabs button{padding:7px 14px;border-radius:999px;background:#241f2b;border:1px solid var(--line);color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.tabs button.on{background:#3a2f3c;border-color:var(--gold);color:var(--cream)}
.tabs button:hover{color:var(--cream)}
.gear-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));margin-bottom:16px}
.gear-card{background:#1d1b24;border:1px solid var(--line);border-radius:10px;padding:12px 13px;display:flex;flex-direction:column;gap:7px}
.gear-card.equipped{border-color:var(--gold);background:#272031}
.gear-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gear-head h4{margin:0;font-size:14px;color:var(--cream)}
.gear-head h4 em{color:var(--gold);font-style:normal}
.gear-card p{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.gear-card .kind{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gear-stats{display:flex;flex-wrap:wrap;gap:6px}
.gear-stats span{font-size:11px;background:#2a2431;border:1px solid var(--line);border-radius:5px;padding:3px 7px;color:#cfc3ad}
.gear-stats .perk{color:#e6c07a;border-color:#5b4a35}
.gear-card button{margin-top:auto;padding:7px;border-radius:7px;background:#2f2739;border:1px solid var(--line);color:var(--cream);font-size:12px}
.gear-card button:disabled{opacity:.45;cursor:default}
.gear-card button:not(:disabled):hover{border-color:var(--gold)}
.swatch{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);display:inline-block}
.cost{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 0}
.cost span{font-size:11px;padding:2px 6px;border-radius:4px;background:#241f2b;border:1px solid var(--line)}
.cost .ok{color:#a8d4b0;border-color:#3e5a46}
.cost .short{color:#d99a9a;border-color:#5a3e40}
.sell-group{display:flex;gap:6px;flex-shrink:0}
.sell-group button{padding:7px 10px;border-radius:7px;background:#2f2739;border:1px solid var(--line);color:var(--cream);font-size:12px}
.reward{color:#e6c07a;font-size:12px;margin-top:6px}
.journal-entry.locked{opacity:.55}
.portrait-sprite{width:72px;height:72px;flex-shrink:0}
@media(max-width:650px){.gear-list{grid-template-columns:1fr}}

/* --- damage feedback --------------------------------------------------- */
#hurt-flash{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .28s ease-out;
 background:radial-gradient(ellipse at center,rgba(150,20,40,0) 38%,rgba(150,20,40,.42) 78%,rgba(110,10,28,.72) 100%)}
#hurt-flash.hit{opacity:1;transition:opacity .05s linear}
#hurt-flash.low{opacity:.42;animation:lowpulse 1.6s ease-in-out infinite}
@keyframes lowpulse{0%,100%{opacity:.26}50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){#hurt-flash.low{animation:none;opacity:.3}}

/* --- map panel: the roads out of here --------------------------------- */
.road-list{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-bottom:14px}
.road{background:#1d1b24;border:1px solid var(--line);border-left:3px solid #8fd6c0;border-radius:8px;padding:9px 11px;display:flex;flex-direction:column;gap:3px}
.road.sealed{border-left-color:#7f8aa0;opacity:.72}
.road b{font-size:13px;color:var(--cream);font-weight:400}
.road span{font-size:11px;color:var(--muted)}
.road span em{font-style:normal;color:var(--gold)}
.road i{font-size:11px;font-style:italic;color:#8d8598}
.road small{font-size:10px;color:#6f6a7a;letter-spacing:.04em}
.help-grid span.been b{color:#9fd6b0}