/* EthrA UI grammar (reference: reference/ethra-video-study-2026-09-24/STUDY.md §1-2).
   One visual language for every screen: a rounded friendly sans, dark translucent "glass" slabs
   inside a thin white pixel double frame with notched corners, small framed tab labels over large
   framed panels, pixel icons, and a white pixel hand on whatever has focus. Loaded after the inline
   styles in index.html, so it overrides them at equal specificity; the pixel icons themselves are
   generated at runtime by src/ui/ethra-ui.js (.ico.i-*). */
:root{
 --ui:'Nunito','M PLUS Rounded 1c',ui-rounded,'Segoe UI',system-ui,sans-serif;
 --ef-white:#f7f4ec;--ef-dim:#cfcbc0;--ef-mute:#a19d93;--ef-glass:rgba(20,22,27,.58);--ef-glass-deep:rgba(15,17,21,.82);
 --ef-red:#d8453a;--ef-yellow:#f1d046;--ef-blue:#8fb8f0;--ef-green:#7fcf5a;
 --ef-shadow:0 2px 0 rgba(0,0,0,.42);
 /* 16x16 pixel frame, sliced at 6: 2px outer line with a stepped corner, a dark gap, a faint
    inner line with a bright corner stud, dark-glass fill. */
 --ef-frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='rgba(19,21,26,.6)' d='M2 2h12v12H2z'/%3E%3Cpath fill='%23f7f4ec' d='M2 0h12v2H2zM2 14h12v2H2zM0 2h2v12H0zM14 2h2v12h-2zM1 1h1v1H1zM14 1h1v1h-1zM1 14h1v1H1zM14 14h1v1h-1z'/%3E%3Cpath fill='rgba(247,244,236,.34)' d='M4 3h8v1H4zM4 12h8v1H4zM3 4h1v8H3zM12 4h1v8h-1z'/%3E%3Cpath fill='%23f7f4ec' d='M3 3h1v1H3zM12 3h1v1h-1zM3 12h1v1H3zM12 12h1v1h-1z'/%3E%3C/svg%3E");
 --ef-frame-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='rgba(52,55,62,.72)' d='M2 2h12v12H2z'/%3E%3Cpath fill='%23ffffff' d='M2 0h12v2H2zM2 14h12v2H2zM0 2h2v12H0zM14 2h2v12h-2zM1 1h1v1H1zM14 1h1v1h-1zM1 14h1v1H1zM14 14h1v1h-1z'/%3E%3Cpath fill='rgba(255,255,255,.62)' d='M4 3h8v1H4zM4 12h8v1H4zM3 4h1v8H3zM12 4h1v8h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1H3zM12 3h1v1h-1zM3 12h1v1H3zM12 12h1v1h-1z'/%3E%3C/svg%3E");
 --ef-frame-deep:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='rgba(15,17,21,.9)' d='M2 2h12v12H2z'/%3E%3Cpath fill='%23f7f4ec' d='M2 0h12v2H2zM2 14h12v2H2zM0 2h2v12H0zM14 2h2v12h-2zM1 1h1v1H1zM14 1h1v1h-1zM1 14h1v1H1zM14 14h1v1h-1z'/%3E%3Cpath fill='rgba(247,244,236,.3)' d='M4 3h8v1H4zM4 12h8v1H4zM3 4h1v8H3zM12 4h1v8h-1z'/%3E%3Cpath fill='%23f7f4ec' d='M3 3h1v1H3zM12 3h1v1h-1zM3 12h1v1H3zM12 12h1v1h-1z'/%3E%3C/svg%3E");
 /* Parchment (dialogue, info cards): pale fill, dark pixel border. */
 --ef-parch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23d9d6cf' d='M2 2h12v12H2z'/%3E%3Cpath fill='%23302b26' d='M2 0h12v2H2zM2 14h12v2H2zM0 2h2v12H0zM14 2h2v12h-2zM1 1h1v1H1zM14 1h1v1h-1zM1 14h1v1H1zM14 14h1v1h-1z'/%3E%3Cpath fill='%23f1eee8' d='M2 2h12v1H2zM2 2h1v12H2z'/%3E%3Cpath fill='%23b3aea4' d='M2 13h12v1H2zM13 2h1v12h-1z'/%3E%3C/svg%3E");
 --ef-beige:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23e8dcc0' d='M2 2h12v12H2z'/%3E%3Cpath fill='%233a2e22' d='M2 0h12v2H2zM2 14h12v2H2zM0 2h2v12H0zM14 2h2v12h-2zM1 1h1v1H1zM14 1h1v1h-1zM1 14h1v1H1zM14 14h1v1h-1z'/%3E%3Cpath fill='%23f6eed8' d='M2 2h12v1H2zM2 2h1v12H2z'/%3E%3Cpath fill='%23c6b58f' d='M2 13h12v1H2zM13 2h1v12h-1z'/%3E%3C/svg%3E");
 --ef-hand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%231b1916' d='M2 1h4v1H2zM6 2h9v1H6zM1 2h1v1H1zM0 3h1v6H0zM15 3h1v1h-1zM7 4h8v1H7zM10 5h1v1h-1zM7 6h4v1H7zM10 7h1v1h-1zM1 8h1v1H1zM7 8h3v1H7zM2 9h5v1H2z'/%3E%3Cpath fill='%23ffffff' d='M2 2h4v1H2zM1 3h14v1H1zM1 4h6v1H1zM1 5h9v1H1zM1 6h6v1H1zM1 7h9v1H1zM2 8h5v1H2z'/%3E%3Cpath fill='%23c9c5bb' d='M1 7h1v1H1zM2 8h5v1H2zM7 5h3v1H7z'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
body,button,select,input{font-family:var(--ui)}
#hud,#hud *,.overlay,.overlay *,#dialogue *,#cards *,#questlog *,#gearpanel *,#shop *,#record *,#mapPanel *,#training *,
#questToast *,#notice,#prompt,#options *,#credits *,#toasts *,#wheel *,#statusRow *,#loading *,#questGuide *{font-family:var(--ui)!important}
kbd,.glyph{font-family:var(--ui)!important;font-weight:800}

/* ---------- shared pieces ---------- */
.ico{display:inline-block;flex:0 0 auto;width:24px;height:24px;background:center/contain no-repeat;image-rendering:pixelated;vertical-align:middle}
.ef{border:0;border-style:solid;border-width:6px;border-image:var(--ef-frame) 6 fill/6px stretch;background:none}
.ef-tab{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:2px 16px;border:6px solid;border-image:var(--ef-frame-deep) 6 fill/6px stretch;
 font:800 15px/1.2 var(--ui);color:var(--ef-white);text-shadow:var(--ef-shadow);letter-spacing:.01em}
.ef-tab .ico{width:20px;height:20px}
button.ef-btn{position:relative;display:flex;align-items:center;gap:10px;height:38px;padding:0 16px 0 10px;margin:0;text-align:left;
 border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none;outline:none!important;box-shadow:none!important;
 font:800 17px/1 var(--ui);letter-spacing:.005em;color:var(--ef-white);text-shadow:var(--ef-shadow);transition:width .12s,transform .12s,padding .12s}
button.ef-btn span{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.ef-btn:hover,button.ef-btn:focus,button.ef-btn:focus-visible,body.kbnav button.ef-btn:focus,body.kbnav button.ef-btn.primary:focus{background:none;border-image:var(--ef-frame-on) 6 fill/6px stretch;color:#fff}
button.ef-btn:active{transform:translateY(1px)}
button.ef-btn:disabled{opacity:.45}
/* The white pixel hand rides on whichever item has focus (keyboard, pad) or the pointer. */
.hand-host{position:relative}
button.ef-btn::before,.hand-host::before{content:'';position:absolute;left:-44px;top:50%;width:32px;height:22px;margin-top:-11px;background:var(--ef-hand) center/contain no-repeat;
 image-rendering:pixelated;opacity:0;transform:translateX(-6px);transition:opacity .1s,transform .12s;pointer-events:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
button.ef-btn:focus::before,button.ef-btn:hover::before{opacity:1;transform:none;animation:efhand 1s steps(2) infinite}
@keyframes efhand{50%{transform:translateX(-3px)}}
/* Hint strip (Move / Cancel / Confirm) */
.hintbar{position:absolute;top:0;left:0;display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap;min-height:46px;padding:9px 90px 9px max(22px,env(safe-area-inset-left));
 background:linear-gradient(90deg,rgba(12,13,16,.8),rgba(12,13,16,.66) 62%,rgba(12,13,16,0));font:800 17px/1 var(--ui);color:var(--ef-white);text-shadow:var(--ef-shadow);pointer-events:none;z-index:2}
.hintbar.bottom{top:auto;bottom:0;padding-bottom:max(9px,env(safe-area-inset-bottom));background:linear-gradient(90deg,rgba(12,13,16,.72),rgba(12,13,16,.55) 50%,rgba(12,13,16,0))}
.hintbar>span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.hg{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:5px;background:#e9e6de;color:#25221e;font:900 12px/1 var(--ui);text-shadow:none;box-shadow:0 2px 0 rgba(0,0,0,.4)}
.hg.pad{border-radius:50%;padding:0;width:24px;background:transparent;color:var(--ef-white);box-shadow:none;font-size:16px;text-shadow:var(--ef-shadow)}
.hg.stick{background:#5a5d63;color:#e6e3dc;border:2px solid #9a9da3;border-radius:50%;width:26px;height:26px;font-size:11px;padding:0;box-shadow:none}
.hg.wide{min-width:34px}

/* ---------- loading ---------- */
#loading{background:#000;display:grid;place-content:center;padding:24px}
#loading .wordmark{width:min(520px,72vw);margin:0 auto}
#loading h1{display:none}
#loadtext{position:fixed;left:max(22px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));margin:0;max-width:70vw;text-align:left;font:700 12px/1.5 var(--ui)!important;color:#77736b}
#loadline{display:none}
.load-gear{position:fixed;right:max(26px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:36px;height:36px;background:var(--gear-ico) center/contain no-repeat;image-rendering:pixelated;animation:efgear 1.2s steps(8) infinite}
@keyframes efgear{to{transform:rotate(360deg)}}

/* ---------- wordmark ---------- */
.wordmark{display:block;margin:0;line-height:0;color:#fff}
.wordmark svg{display:block;width:100%;height:auto;overflow:visible}
#loading .wordmark text,#title .wordmark text,.wordmark text{font-family:'IM Fell English',Georgia,'Times New Roman',serif!important}
[hidden]{display:none!important}
body.ui-menu #hud{opacity:0!important}

/* ---------- title ---------- */
#title{display:flex;align-items:stretch;justify-content:flex-start;padding:0;background:linear-gradient(90deg,rgba(10,14,16,.34),rgba(10,14,16,.12) 34%,transparent 58%);backdrop-filter:none}
#title .title-inner{position:relative;width:auto;max-width:none;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(64px,11vh,108px) 0 24px clamp(40px,7.5vw,112px);min-height:100%}
#title .wordmark{width:clamp(250px,30vw,440px);margin:0 0 clamp(10px,3vh,34px) -14px}
#title h2,#title p,#title .kicker{display:none}
#title .version-tag{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));font:800 15px/1 var(--ui);color:var(--ef-white);text-shadow:var(--ef-shadow);z-index:2}
#title .title-list{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:4px;padding-bottom:70px}
#title .title-list>button{width:210px;min-height:38px}
#title .title-list>button:focus,#title .title-list>button:hover{width:252px}
#title .title-inner>button{width:auto}
#title .loadout-label{display:flex;align-items:center;gap:10px;min-height:20px;margin:0 0 6px;font:800 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ef-dim);text-shadow:var(--ef-shadow)}
#title .loadout-label #loadoutName{letter-spacing:.02em;text-transform:none;font-size:14px;color:var(--ef-white)}
#title .loadouts{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px;max-width:380px}
#title .loadouts button{display:grid;place-items:center;width:40px;height:40px;min-height:0;padding:0;border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none;font-size:0;color:transparent;outline:none;box-shadow:none;text-shadow:none}
#title .loadouts button .ico{width:22px;height:22px}
#title .loadouts button.selected{border-image:var(--ef-frame-on) 6 fill/6px stretch;box-shadow:0 3px 0 -1px var(--ef-yellow)!important}
#title .loadouts button:hover,#title .loadouts button:focus,body.kbnav #title .loadouts button:focus{background:none;border-image:var(--ef-frame-on) 6 fill/6px stretch;transform:translateY(-2px)}
#title .loadouts button:focus{outline:2px solid #fff!important;outline-offset:2px}
#title .title-bottom{display:none}
.title-veil{position:absolute;left:max(0px,env(safe-area-inset-left));bottom:-22px;display:flex;align-items:flex-end;gap:2px;pointer-events:none;z-index:1}
.title-veil canvas{width:112px;height:112px;image-rendering:pixelated;animation:efpeek 3.4s ease-in-out infinite}
@keyframes efpeek{0%,100%{transform:translateY(8px)}45%,60%{transform:translateY(0)}}
.bubble{position:relative;margin:0 0 34px 0;max-width:min(330px,62vw);padding:9px 16px;border:6px solid;border-image:var(--ef-parch) 6 fill/6px stretch;
 font:800 15px/1.3 var(--ui);color:#26221d;text-shadow:none;transition:opacity .3s}
.bubble::before{content:'';position:absolute;left:-15px;bottom:4px;width:12px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23302b26' d='M0 5h6v1H0zM1 4h2v1H1zM2 3h2v1H2zM3 2h2v1H3zM4 1h2v1H4z'/%3E%3Cpath fill='%23d9d6cf' d='M3 4h3v1H3zM4 3h2v1H4zM5 2h1v1H5z'/%3E%3C/svg%3E") center/contain no-repeat;image-rendering:pixelated}
.bubble.fade{opacity:0}

/* ---------- side panels: options / credits ---------- */
.side-panel{position:fixed;z-index:27;top:clamp(58px,11vh,90px);right:clamp(16px,4.5vw,64px);width:min(400px,calc(100vw - 32px));max-height:calc(100dvh - clamp(58px,11vh,90px) - 16px);
 display:none;flex-direction:column;padding:14px 18px 16px;border:6px solid;border-image:var(--ef-frame-deep) 6 fill/6px stretch;color:var(--ef-white);text-shadow:var(--ef-shadow);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.side-panel.on{display:flex}
.opt-sec{margin:12px 0 4px}
.opt-sec:first-child{margin-top:0}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px;padding:1px 4px 1px 10px;font:700 15px/1.25 var(--ui)}
.opt-row label{flex:1 1 auto;min-width:0}
.opt-row small{display:block;font:700 11px/1.3 var(--ui);color:var(--ef-mute)}
.opt-row.center{justify-content:center}
.sel{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;width:184px}
.sel::before,.sel::after{content:'';position:absolute;top:50%;width:8px;height:12px;margin-top:-6px;pointer-events:none;image-rendering:pixelated;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23f7f4ec' d='M3 0h1v6H3zM2 1h1v4H2zM1 2h1v2H1z'/%3E%3C/svg%3E") center/contain no-repeat}
.sel::before{left:4px}.sel::after{right:4px;transform:scaleX(-1)}
.side-panel select,#menu select{appearance:none;-webkit-appearance:none;width:100%;height:32px;padding:0 20px;border:0;background:transparent;color:var(--ef-white);text-align:center;text-align-last:center;font:800 15px var(--ui);text-shadow:var(--ef-shadow);cursor:pointer}
.side-panel select option{background:#1c1e22;color:#f7f4ec}
.side-panel select:focus,.side-panel input:focus,.side-panel button:focus{outline:none}
.side-panel .opt-row:focus-within{background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.03));box-shadow:inset 3px 0 #fff}
input.ef-range{-webkit-appearance:none;appearance:none;flex:0 0 184px;width:184px;height:22px;background:transparent;cursor:pointer}
input.ef-range::-webkit-slider-runnable-track{height:8px;background:linear-gradient(90deg,#f7f4ec var(--v,100%),#3c3f45 var(--v,100%));box-shadow:0 0 0 2px #0f1013}
input.ef-range::-moz-range-track{height:8px;background:#3c3f45;box-shadow:0 0 0 2px #0f1013}
input.ef-range::-moz-range-progress{height:8px;background:#f7f4ec}
input.ef-range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:20px;margin-top:-6px;background:#fff;border:2px solid #16171a;border-radius:0}
input.ef-range::-moz-range-thumb{width:10px;height:18px;background:#fff;border:2px solid #16171a;border-radius:0}
input.ef-range:disabled{opacity:.38;cursor:not-allowed}
input.ef-check{-webkit-appearance:none;appearance:none;flex:0 0 auto;width:22px;height:22px;margin:0 81px 0 0;background:#f7f4ec;border:2px solid #16171a;box-shadow:0 2px 0 rgba(0,0,0,.4);display:grid;place-items:center;cursor:pointer}
input.ef-check:checked{background:#f7f4ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23355fb6' d='M6 0h1v2H6zM5 1h1v2H5zM4 2h1v2H4zM3 3h1v2H3zM2 4h1v2H2zM1 3h1v2H1zM0 2h1v2H0z'/%3E%3C/svg%3E") center/14px no-repeat;image-rendering:pixelated}
.side-panel button.small,.side-panel button.opt-btn{min-height:32px;padding:4px 14px;border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none;font:800 14px var(--ui);color:var(--ef-white);text-shadow:var(--ef-shadow)}
.side-panel button.small:hover,.side-panel button.small:focus,.side-panel button.opt-btn:hover,.side-panel button.opt-btn:focus{background:none;border-image:var(--ef-frame-on) 6 fill/6px stretch;outline:none}
.side-panel .opt-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.side-panel .opt-foot .ef-btn{width:124px;height:36px;font-size:15px}
.side-panel .opt-foot .ef-btn::before{left:-40px}
.side-panel .fine{margin:12px 0 0!important;font:700 11px/1.5 var(--ui)!important;color:var(--ef-mute)!important;text-shadow:none}
#credits .cred{margin:0;padding:2px 6px 8px;font:700 14px/1.6 var(--ui);color:var(--ef-dim)}
#credits .cred b{display:block;margin-top:8px;color:var(--ef-white);font-weight:800}
#credits .cred b:first-child{margin-top:0}

/* ---------- pause menu ---------- */
#menu{display:none;align-items:stretch;justify-content:flex-start;padding:0;background:linear-gradient(180deg,rgba(9,14,22,.52),rgba(9,14,22,.34));backdrop-filter:blur(1.5px) saturate(.8)}
#menu .menu-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:clamp(14px,3vw,46px);min-height:74px;padding:8px max(24px,env(safe-area-inset-right)) 8px max(24px,env(safe-area-inset-left));
 background:linear-gradient(180deg,rgba(10,12,16,.72),rgba(10,12,16,.5));color:var(--ef-white);text-shadow:var(--ef-shadow);z-index:1}
#menu #menuTitle{flex:1 1 auto;margin:0 0 0 clamp(0px,3.5vw,56px);font:900 clamp(26px,3vw,34px)/1 var(--ui);letter-spacing:.005em;color:var(--ef-white);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ms canvas{width:40px;height:40px;image-rendering:pixelated}
#msVeil,#veilFace{background:radial-gradient(circle at 50% 55%,rgba(170,200,230,.38),rgba(170,200,230,0) 68%)}
.gear-row .ico,.gear-slot .ico{width:20px;height:20px;margin-right:7px}
.gear-row{display:flex;align-items:center}
.gear-slot .lab .ico{width:16px;height:16px;margin:0 6px 0 -4px}
body.ui-gear #objective,body.ui-quest #status,body.ui-quest #statusRow,body.ui-map #hud,body.ui-record #hud,body.ui-shop #hud{opacity:0!important}
.ms .bars{display:flex;flex-direction:column;gap:5px}
.mbar{position:relative;width:150px;height:12px;background:#1d1b1c;box-shadow:0 0 0 2px #0b0b0c;overflow:hidden}
.mbar i{position:absolute;inset:0 auto 0 0;display:block;width:100%;background:var(--ef-red);box-shadow:inset 0 -3px rgba(0,0,0,.22),inset 0 2px rgba(255,255,255,.22)}
.mbar.st{height:10px}.mbar.st i{background:var(--ef-yellow)}
.mbar.mana i{background:linear-gradient(180deg,#b9d4ff,#7fa7e8)}
.mbar.xp{width:132px;height:9px}.mbar.xp i{background:var(--ef-yellow)}
.mbar::after{content:'';position:absolute;right:0;top:0;bottom:0;width:10px;background:rgba(255,255,255,.14)}
.hearts{display:flex;gap:3px;height:16px}
.hearts i{width:17px;height:16px;background:var(--heart-full) center/contain no-repeat;image-rendering:pixelated}
.hearts i.half{background-image:var(--heart-half)}.hearts i.empty{background-image:var(--heart-empty)}
.ms-lvl{flex-direction:column;align-items:flex-start;gap:6px}
.ms-lvl .top{display:flex;gap:26px;font:900 15px/1 var(--ui)}
.ms-lvl .top span{font-weight:800;font-size:12px;color:var(--ef-dim);align-self:flex-end}
.ms-gold{font:900 20px/1 var(--ui);gap:8px}
.ms-gold .ico{width:26px;height:26px}
#menu .panel.menu-list{position:relative;z-index:1;align-self:flex-start;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:auto;max-height:calc(100dvh - 140px);overflow-y:auto;overflow-x:visible;
 margin:98px 0 0 clamp(64px,6.5vw,96px);padding:6px 60px 10px 50px;margin-left:calc(clamp(64px,6.5vw,96px) - 50px);background:none;border:0;box-shadow:none;text-shadow:var(--ef-shadow);touch-action:pan-y}
#menu .panel.menu-list>button{width:214px;height:38px}
#menu .panel.menu-list>button:focus,#menu .panel.menu-list>button:hover{width:256px}
#menu .panel.menu-list>button.primary{order:0}
#menuText{margin:0 0 4px!important;max-width:420px;font:700 14px/1.5 var(--ui)!important;color:var(--ef-dim)!important}
#menuText:empty{display:none}
#menu .menu-list .eyebrow,#menu .menu-list h2,#menu .panel-section,#menu .settings-row,#menu .panel-row:empty{display:none}
#menu .hintbar.bottom{z-index:1}
#menu .weight{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:1;font:800 12px/1.2 var(--ui);color:var(--ef-dim);text-align:right;text-shadow:var(--ef-shadow)}

/* ---------- sheets: sub-panels share tab-label-over-framed-panel ---------- */
#gearpanel,#questlog,#shop,#record,#mapPanel,#training,#help .panel,#controls .panel{--tab-h:48px;isolation:isolate;background:none!important;border:0!important;box-shadow:none!important;padding:0 20px 16px!important;color:var(--ef-white)}
#gearpanel::before,#questlog::before,#shop::before,#record::before,#mapPanel::before,#training::before,#help .panel::before,#controls .panel::before{content:'';position:absolute;inset:var(--tab-h) 0 0 0;z-index:-1;border:6px solid;border-image:var(--ef-frame-deep) 6 fill/6px stretch;pointer-events:none}
#training::after{display:none}
#help .panel,#controls .panel{position:relative;overflow:hidden}
#gearpanel .panel-head,#questlog .panel-head,#shop .panel-head,#record .panel-head,#mapPanel .panel-head,#training .panel-head,#help .panel-head,#controls .panel-head{
 display:flex;align-items:center;gap:12px;height:var(--tab-h);min-height:var(--tab-h);margin:0 -20px 14px!important;padding:0!important;border:0!important;flex-shrink:0}
#gearpanel .panel-head>div:first-child,#questlog .panel-head>div:first-child,#shop .panel-head>div:first-child,#record .panel-head>div:first-child,#mapPanel .panel-head>div:first-child,#training .panel-head>div:first-child,#help .panel-head>div:first-child,#controls .panel-head>div:first-child{display:flex;flex-direction:row-reverse;align-items:center;gap:12px;min-width:0}
.overlay .panel-head .eyebrow,#gearpanel .eyebrow,#questlog .eyebrow,#shop .eyebrow,#record .eyebrow,#mapPanel .eyebrow,#training .eyebrow{margin:0!important;font:800 11px/1 var(--ui)!important;letter-spacing:.12em!important;color:var(--ef-dim)!important;text-shadow:var(--ef-shadow);white-space:nowrap}
#gearpanel h2,#questlog h2,#shop h2,#record h2,#mapPanel h2,#training h2,#help .panel-head h2,#controls .panel-head h2{
 display:inline-flex;align-items:center;min-height:36px;margin:0!important;padding:1px 18px;border:6px solid;border-image:var(--ef-frame-deep) 6 fill/6px stretch;
 font:800 17px/1.1 var(--ui)!important;color:var(--ef-white)!important;text-shadow:var(--ef-shadow);white-space:nowrap}
.panel-head .head-actions{margin-left:auto;padding:0!important;gap:6px}
#gearpanel .head-actions button,#questlog .head-actions button,#shop .head-actions button,#record .head-actions button,#mapPanel .head-actions button,#training .head-actions button,#help .head-actions button,#controls .head-actions button{
 min-height:32px;padding:3px 12px;border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none!important;font:800 13px/1 var(--ui);color:var(--ef-white);text-shadow:var(--ef-shadow);outline:none!important}
#gearpanel .head-actions button:hover,#gearpanel .head-actions button:focus,#questlog .head-actions button:hover,#questlog .head-actions button:focus,#shop .head-actions button:hover,#shop .head-actions button:focus,#record .head-actions button:hover,#record .head-actions button:focus,#mapPanel .head-actions button:hover,#mapPanel .head-actions button:focus,#training .head-actions button:hover,#training .head-actions button:focus,#help .head-actions button:hover,#help .head-actions button:focus,#controls .head-actions button:hover,#controls .head-actions button:focus{border-image:var(--ef-frame-on) 6 fill/6px stretch}
#help,#controls{background:rgba(9,14,22,.4);backdrop-filter:blur(1.5px)}
#help .panel,#controls .panel{padding-top:0!important}
.fine,#questlog .fine,#gearpanel .fine,#shop .fine{font:700 11px/1.5 var(--ui)!important;color:var(--ef-mute)!important;text-shadow:none}
.qlog-count{font:800 12px/1.3 var(--ui)!important;letter-spacing:.04em!important;color:var(--ef-dim)!important}
/* Rows: icon + label, framed on focus, hand at the left. */
button.gear-row,button.qlog-item,button.shop-row,.gear-row{position:relative;background:rgba(255,255,255,.035)!important;border:2px solid transparent!important;color:var(--ef-white)!important;box-shadow:none!important;outline:none!important;border-radius:0}
button.gear-row:hover,button.gear-row:focus,button.qlog-item:hover,button.qlog-item:focus,button.shop-row:hover,button.shop-row:focus{background:rgba(255,255,255,.1)!important;border:2px solid rgba(247,244,236,.9)!important}
button.gear-row:focus::after,button.qlog-item:focus::after,button.shop-row:focus::after{content:'';position:absolute;left:-2px;top:50%;width:22px;height:15px;margin:-8px 0 0 -26px;background:var(--ef-hand) center/contain no-repeat;image-rendering:pixelated;animation:efhand 1s steps(2) infinite}
.qlog-body,.shop-body,#gearBody{padding-left:30px!important;margin-left:-26px!important}
.gear-row.equipped{border-color:var(--ef-yellow)!important;background:rgba(241,208,70,.1)!important}
.gear-row.equipped .nm::before{content:'E';display:inline-grid;place-items:center;width:16px;height:16px;margin-right:7px;background:var(--ef-yellow);color:#241f14;font:900 10px/1 var(--ui);vertical-align:1px}
.gear-row .nm,.shop-row .nm{font:800 14px/1.3 var(--ui)!important}
.gear-row .mods,.shop-row .mods{font:700 11px/1.4 var(--ui)!important;color:var(--ef-dim)!important}
.gear-slot{border-bottom:0!important;padding:10px 0 3px!important}
.gear-slot .lab,.shop-col .lab,.rec-col .lab{display:inline-flex;align-items:center;padding:3px 12px!important;border:4px solid!important;border-image:var(--ef-frame) 6 fill/4px stretch!important;font:800 12px/1.2 var(--ui)!important;letter-spacing:.04em!important;text-transform:none!important;color:var(--ef-white)!important;margin-bottom:6px!important}
button.gear-up{border:4px solid;border-image:var(--ef-frame) 6 fill/4px stretch;background:none!important;font:900 11px var(--ui);color:var(--ef-yellow)}
.qlog-section{background:rgba(16,18,22,.94)!important;border-bottom:1px solid rgba(247,244,236,.22)!important;font:800 12px/1 var(--ui)!important;letter-spacing:.08em!important;color:var(--ef-white)!important;text-transform:none!important}
.qlog-title{font:800 15px/1.3 var(--ui)!important;color:var(--ef-white)!important}
.qlog-giver,.qlog-meta{font:800 10px/1.3 var(--ui)!important;color:var(--ef-dim)!important}
.qlog-stage{font:700 13px/1.5 var(--ui)!important;color:#e7e3da!important}
.qlog-step{font:700 12px/1.5 var(--ui)!important;color:var(--ef-dim)!important}
.qlog-step.now{color:#fff!important}.qlog-step.now i{color:var(--ef-yellow)!important}.qlog-step.done i{color:var(--ef-green)!important}
.qlog-bar{background:#1d1b1c!important;border:0!important;box-shadow:0 0 0 2px #0b0b0c;height:7px!important}.qlog-bar i{background:var(--ef-yellow)!important}
button.qlog-item.on{border-left:4px solid var(--ef-yellow)!important}
.qlog-body::-webkit-scrollbar-thumb{background:#f7f4ec66}
.shop-row .pr{font:900 13px/1 var(--ui)!important;color:var(--ef-yellow)!important}
.rec-row{font:700 13px/1.35 var(--ui)!important;border-bottom:1px solid rgba(255,255,255,.06)!important}.rec-row b{color:var(--ef-yellow)!important}
#mapCanvas{border:0!important;box-shadow:0 0 0 2px #0b0b0c}
#mapLegend{font:800 11px/1 var(--ui)!important}
/* Controls & help sheets */
.help-grid{font:700 13px/1.6 var(--ui)!important}.help-grid div{border-bottom:1px solid rgba(255,255,255,.08)!important}.help-grid b{color:var(--ef-white)!important}
.help-note{background:rgba(255,255,255,.05)!important;font:700 13px/1.65 var(--ui)!important;color:#e0dcd2!important}
.help-device{font:700 12px/1.5 var(--ui)!important;color:var(--ef-dim)!important}
.bind-head{background:rgba(15,17,21,.97)!important;font:800 10px var(--ui)!important;color:var(--ef-dim)!important}.bind-head .on{color:var(--ef-yellow)!important}
.bind-group{font:800 12px var(--ui)!important;letter-spacing:.08em!important;color:var(--ef-yellow)!important;text-transform:none!important}
.bind-label{font:700 14px/1.3 var(--ui)!important;color:var(--ef-white)!important}.bind-label small{font:700 11px/1.4 var(--ui)!important;color:var(--ef-mute)!important}
button.bind{background:rgba(255,255,255,.05)!important;border:2px solid rgba(247,244,236,.22)!important}
button.bind:focus,button.bind:hover{border-color:#fff!important;background:rgba(255,255,255,.14)!important;outline:none!important}
button.bind.capturing{background:#3d3620!important;border-color:var(--ef-yellow)!important}
.bind-status{font:700 13px/1.6 var(--ui)!important;color:var(--ef-dim)!important}.bind-status.live{color:var(--ef-yellow)!important}
.controls-foot{border-top:1px solid rgba(255,255,255,.14)!important}.controls-keys{font:700 12px var(--ui)!important}
#controls button.small,#help button.small{font:800 13px var(--ui)}
#resetBinds{border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none!important}
#resetBinds:focus,#resetBinds:hover{border-image:var(--ef-frame-on) 6 fill/6px stretch;outline:none!important}
kbd{border-radius:4px;background:#e9e6de;color:#25221e;border:0;box-shadow:0 2px 0 rgba(0,0,0,.45);font-size:10px;text-shadow:none;padding:0 5px}
.glyph{background:#e9e6de;color:#25221e!important;border:0!important;box-shadow:0 2px 0 rgba(0,0,0,.45);text-shadow:none}
.glyph.face{background:#2b2a28;color:#fff!important}
.glyph.face.g0{background:#5c9c46}.glyph.face.g1{background:#c8493b}.glyph.face.g2{background:#3f74c4}.glyph.face.g3{background:#c9a327}
/* Training: keep its three panes, move the olive-gold chrome to glass and white. */
#training{background:none!important}
#training .train-tagline{font:italic 700 12px/1.4 var(--ui)!important;color:var(--ef-dim)!important;text-shadow:var(--ef-shadow)}
#training button{border-radius:0}
.train-rail{border-right-color:rgba(255,255,255,.12)!important}
#training .train-fam.on{background:rgba(255,255,255,.1)!important;border-color:rgba(247,244,236,.8)!important;box-shadow:inset 3px 0 #fff!important;color:#fff!important}
#training .train-catalog button{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.12)!important}
#training .train-catalog button:hover,#training .train-catalog button:focus-visible{background:rgba(255,255,255,.1)!important;border-color:rgba(247,244,236,.6)!important}
#training .train-catalog button.on{background:rgba(255,255,255,.14)!important;border-color:#fff!important;box-shadow:none!important;color:#fff!important}
.train-row-name,.train-detail h3,.train-card-title,.train-attacks h4,.train-move-lab h4{font-family:var(--ui)!important;font-weight:800!important}
.train-detail{background:rgba(255,255,255,.04)!important;border:2px solid rgba(255,255,255,.14)!important;border-left:4px solid #fff!important}
.train-card,.train-acc{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.14)!important}
#training .train-spawn{border:6px solid!important;border-image:var(--ef-frame-on) 6 fill/6px stretch!important;background:none!important;font:900 15px var(--ui)!important}
#training .train-spawn:disabled{opacity:.5}
#trainSearch{background:rgba(0,0,0,.35)!important;border-color:rgba(255,255,255,.3)!important}
.train-group{color:var(--ef-dim)!important;border-top-color:rgba(255,255,255,.12)!important}

/* ---------- HUD ---------- */
#hud{text-shadow:var(--ef-shadow)}
#status{top:max(16px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hud-player{display:flex;align-items:center;gap:8px}
.hud-face{width:38px;height:38px;flex:0 0 auto;overflow:hidden;display:grid;place-items:center}
#portrait{width:38px;height:43px;margin-top:5px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
#vitals{width:auto!important}
#vitals .name,#vitalCaption{display:none}
#hud .bar{transform:none;margin:0;padding:0;border:0;background:#1d1b1c;box-shadow:0 0 0 2px #0b0b0c;overflow:hidden}
#hud .bar.hp{width:150px;height:11px}
#hud .bar.hp span{background:var(--ef-red);box-shadow:inset 0 -3px rgba(0,0,0,.22),inset 0 2px rgba(255,255,255,.2)}
#hud .bar.stamina{width:150px;height:6px;margin-top:4px}
#hud .bar.stamina span{background:var(--ef-yellow)}
#hud .bar.mana{width:118px;height:6px;margin-top:3px;border:0}
#hud .bar.mana span{background:linear-gradient(180deg,#bcd6ff,#7fa7e8)}
.hud-veil{display:flex;align-items:center;gap:6px;margin-left:-2px}
.hud-level{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#26272b;box-shadow:0 0 0 2px #e9e6de;font:900 12px/1 var(--ui);color:#fff}
#veilFace{width:32px;height:32px;image-rendering:pixelated}
.veil-vitals{display:flex;flex-direction:column}
#veilHearts{height:13px}#veilHearts i{width:14px;height:13px}
#veilState{font:800 9px/1 var(--ui)!important;letter-spacing:.06em;color:#b9d2e8;margin-left:4px;align-self:flex-end;margin-bottom:1px}
#compass{top:max(12px,env(safe-area-inset-top));width:300px;height:24px;overflow:hidden;background:linear-gradient(90deg,transparent,rgba(12,13,16,.5) 18%,rgba(12,13,16,.5) 82%,transparent);font:800 13px/24px var(--ui)}
#compass>*:not(.cstrip){display:none}
#compass .cstrip{position:absolute;left:50%;top:0;height:24px;will-change:transform}
#compass .cstrip b{position:absolute;top:0;width:30px;margin-left:-15px;text-align:center;font:900 13px/24px var(--ui);color:#fff}
#compass .cstrip b.minor{font-size:10px;color:var(--ef-dim)}
#compass .cstrip i{position:absolute;top:8px;width:2px;height:8px;margin-left:-1px;background:rgba(247,244,236,.55)}
#compass::after{content:'';position:absolute;left:50%;top:0;width:2px;height:6px;margin-left:-1px;background:var(--ef-yellow)}
#objective{top:max(16px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right))}
#objective .eyebrow{font:800 10px var(--ui)!important;letter-spacing:.14em;color:var(--ef-dim)}
#objectiveTitle{font:900 17px/1.2 var(--ui)!important;color:#fff}
#objectiveSub{font:700 12px/1.4 var(--ui)!important;color:#e6e2d8}
/* Quick-item carousel, bottom-left */
#items{display:block;bottom:max(14px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));font:800 12px var(--ui)}
.item-icon{display:none}
.quick{display:flex;align-items:center;gap:6px}
.quick .qarrow{width:10px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23f7f4ec' d='M3 0h1v6H3zM2 1h1v4H2zM1 2h1v2H1z'/%3E%3C/svg%3E") center/contain no-repeat;image-rendering:pixelated;opacity:.85}
.quick .qarrow.r{transform:scaleX(-1)}
.qslot{position:relative;display:grid;place-items:center;width:40px;height:44px;border:4px solid;border-image:var(--ef-frame) 6 fill/4px stretch}
.qslot.on{width:44px;height:48px;border-image:var(--ef-frame-on) 6 fill/4px stretch}
.qslot .ico{width:24px;height:24px}
.qslot.none .ico{opacity:.28}
.qslot em{position:absolute;right:-3px;bottom:-5px;font:900 11px/1 var(--ui);font-style:normal;color:#fff}
.quick-labels{display:flex;justify-content:space-between;gap:8px;width:174px;margin:6px 0 0 16px;padding:3px 8px;background:rgba(12,13,16,.55);font:800 11px/1.2 var(--ui);color:#fff}
.quick-labels .qcount{color:var(--ef-dim)}
#items .items-caption{margin:4px 0 0 16px;font:700 10px var(--ui)!important;color:#e6e2d8}
#weaponHud{bottom:max(16px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right))}
#weaponName{font:900 17px/1.2 var(--ui)!important}
#weaponHint,#actionName{font:800 11px var(--ui)!important}
#controlsHint{font:800 11px var(--ui)!important;bottom:18px;opacity:.9}
#charge{background:#1d1b1c;box-shadow:0 0 0 2px #0b0b0c;height:5px}#charge span{background:var(--ef-yellow)}
#banner h2{font:900 30px/1.15 var(--ui)!important;color:#f3efe2;letter-spacing:.005em}
#banner p{font:800 12px var(--ui)!important}
#banner .ornament{display:none}
#notice{border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none;padding:6px 14px;font:800 13px/1.35 var(--ui)!important;color:#fff;text-shadow:var(--ef-shadow)}
#prompt{border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none;padding:5px 14px;font:800 14px/1.3 var(--ui)!important;color:#fff;text-shadow:var(--ef-shadow)}
#prompt kbd,#prompt .glyph{margin-right:6px}
#boss #bossName{font:900 15px var(--ui)!important;letter-spacing:.06em}
#hud .bar.bossbar{height:10px}#hud .bar.bossbar span{background:var(--ef-red)}
/* Lock-on: a red bar flanked by chevrons over the target; damaged foes get the bar alone. */
.enemy-tag .lock{display:flex;align-items:center;gap:3px}
.enemy-tag .lock i{width:8px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff5a45' d='M3 0h1v6H3zM2 1h1v4H2zM1 2h1v2H1z'/%3E%3C/svg%3E") center/contain no-repeat;image-rendering:pixelated;animation:eflock .8s steps(2) infinite}
.enemy-tag .lock i.r{transform:scaleX(-1);animation-name:eflockr}
@keyframes eflock{50%{transform:translateX(-2px)}}@keyframes eflockr{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) translateX(-2px)}}
.enemy-tag .tinybar{width:46px;height:6px;border:0;background:#1d1b1c;box-shadow:0 0 0 1px #0b0b0c}
.enemy-tag .lock .tinybar{width:58px;height:7px;box-shadow:0 0 0 2px #0b0b0c}
.enemy-tag .tinybar i{height:100%;background:var(--ef-red)}
.enemy-tag .enemy-label{font:800 9px var(--ui)!important}
.damage-label{font:900 17px var(--ui)!important}
#statusRow .st{font:800 11px/1 var(--ui)!important;border-radius:0}
#statusRow{top:112px;left:max(18px,env(safe-area-inset-left))}
/* Toasts: pickups stack on the right edge. */
#toasts{position:fixed;z-index:14;right:max(16px,env(safe-area-inset-right));top:40%;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
#toasts .toast{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 8px;background:linear-gradient(90deg,rgba(12,13,16,0),rgba(12,13,16,.62) 22%);font:800 14px/1.2 var(--ui);color:#fff;text-shadow:var(--ef-shadow);animation:eftoast 3.2s ease forwards}
#toasts .toast .ico{width:22px;height:22px}
#toasts .toast b{color:var(--ef-yellow);font-weight:900}
#toasts .toast .fish-catch-name{font-weight:900}
#toasts .toast:has(.fish-catch-rarity){background:rgba(20,24,26,.86);border:1px solid rgba(223,219,198,.55);box-shadow:0 3px 0 rgba(0,0,0,.3);padding:7px 10px}
#toasts .toast .fish-catch-rarity{font:900 10px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;padding:4px 5px;border:1px solid currentColor;background:rgba(14,15,19,.65);white-space:nowrap}
#toasts .toast .fish-catch-common{color:#d8d4c4}
#toasts .toast .fish-catch-uncommon{color:#9bd4a0}
#toasts .toast .fish-catch-rare{color:#84bce4}
#toasts .toast .fish-catch-legendary{color:#f5c779}
#toasts .toast .fish-catch-weight{color:#e3dfd1;white-space:nowrap}
@keyframes eftoast{0%{opacity:0;transform:translateX(16px)}8%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateX(8px)}}
body:not(.playing) #toasts,body.photo #toasts{display:none}
#questToast{border:6px solid;border-image:var(--ef-frame-deep) 6 fill/6px stretch;background:none!important;border-left:6px solid!important;box-shadow:none}
.qt-kind{font:800 10px var(--ui)!important;color:var(--ef-yellow)!important}.qt-text{font:800 13px/1.4 var(--ui)!important;color:#fff!important}
#questToast .qt-mark{color:var(--ef-yellow)}
#questGuide span{background:rgba(12,13,16,.6)!important;border:0!important;border-radius:0!important;font:800 11px var(--ui)}
#rangedMode{font:800 10px var(--ui)!important;background:rgba(12,13,16,.5)}
#wheel .seg{border-radius:0;border:4px solid;border-image:var(--ef-frame) 6 fill/4px stretch;background:none;font:800 12px/1.25 var(--ui)!important;color:#fff}
#wheel .seg.on{border-image:var(--ef-frame-on) 6 fill/4px stretch;background:none}
#wheel .hubtext{border-radius:0;font:900 13px var(--ui)!important;background:rgba(12,13,16,.72)}

/* ---------- dialogue: grey parchment ---------- */
#dialogue{background:none!important;border:0!important;box-shadow:none!important;width:min(720px,94vw);padding:0}
#dialogue .dlg-card{position:relative;gap:14px;padding:12px 18px 14px 12px;border:6px solid;border-image:var(--ef-parch) 6 fill/6px stretch;color:#26221d}
#dialogue .dlg-portrait{width:72px;height:72px;background:#bdb8ad;border:0;box-shadow:0 0 0 3px #302b26,inset 0 0 0 2px #e9e6df;filter:none}
#dialogue h3{font:900 18px/1.15 var(--ui)!important;color:#1f1b17!important}
#dialogue .dlg-role{font:800 10px var(--ui)!important;letter-spacing:.12em;color:#6f685d}
#dialogue p{font:700 15px/1.55 var(--ui)!important;color:#2b2621!important;margin-top:4px}
#dialogue .dlg-quest{background:rgba(48,43,38,.1);border-left:3px solid #302b26;color:#2b2621;font:800 13px var(--ui)!important}
#dialogue .dlg-quest-tag{color:#6f685d;font:900 10px var(--ui)!important}
#dialogue .dlg-options{margin-top:10px;gap:8px}
#dialogue button.dlg-opt{min-width:120px;padding:6px 14px;border:4px solid!important;border-image:var(--ef-frame-deep) 6 fill/4px stretch!important;background:none!important;color:#fff!important;font:800 13px var(--ui)!important;text-shadow:var(--ef-shadow)}
#dialogue button.dlg-opt:hover,#dialogue button.dlg-opt:focus,body.kbnav #dialogue button:focus{border-image:var(--ef-frame-on) 6 fill/4px stretch!important;outline:none!important;background:none!important}
#dialogue.offer button#closeDialogue{border-image:var(--ef-frame-on) 6 fill/4px stretch!important;color:#fff!important}
#dialogue .dlg-card::after{content:'';position:absolute;right:16px;bottom:8px;width:14px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23302b26' d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E") center/contain no-repeat;image-rendering:pixelated;animation:efnext .9s steps(2) infinite}
@keyframes efnext{50%{transform:translateY(3px)}}

/* ---------- info cards: beige parchment with a 1 / N pager ---------- */
#cards{background:none!important;border:6px solid!important;border-image:var(--ef-beige) 6 fill/6px stretch!important;box-shadow:0 18px 50px rgba(0,0,0,.35)!important;color:#2d241a;padding:14px 18px 12px!important;text-shadow:none}
#cards h3{font:900 20px/1.2 var(--ui)!important;color:#2d241a;text-align:center;margin-bottom:10px}
#cards .card-fig{border:0;box-shadow:0 0 0 3px #3a2e22;background:#1a2120}
#cards .card-body{font:700 15px/1.55 var(--ui)!important;color:#3a2f24}
#cards .card-foot{border-top:2px solid rgba(58,46,34,.2)}
#cards .card-dots{align-items:center;gap:4px}
#cards .card-dots i{display:none}
#cards .card-page{font:900 14px/1 var(--ui);color:#3a2e22;letter-spacing:.04em}
#cards .card-page::after{content:' \25B8';color:#8a3a2a}
#cards button.small{border:4px solid;border-image:var(--ef-frame-deep) 6 fill/4px stretch;background:none;color:#fff;font:800 12px var(--ui);text-shadow:var(--ef-shadow)}
#cards button.small:hover,#cards button.small:focus{border-image:var(--ef-frame-on) 6 fill/4px stretch;outline:none;background:none}
#cards kbd{background:#3a2e22;color:#f4ead2}
/* A short landscape phone: the card scrolls rather than squeezing its text under the buttons, and
   the figure gives up some height so it rarely has to. */
#cards>*{flex-shrink:0}
@media(max-height:500px){#cards .card-fig{height:80px}#cards .card-body{font:700 14px/1.45 var(--ui)!important;min-height:0}#cards h3{margin-bottom:6px}#cards .card-skip button{min-height:38px}}

/* ---------- phones ---------- */
@media(max-width:850px){
 #compass{display:block;width:220px}
 #title .wordmark{width:clamp(220px,40vw,300px)}
 #title .title-inner{padding-left:clamp(44px,6vw,64px)}
}
@media(max-width:550px) and (orientation:portrait){
 #title{background:linear-gradient(180deg,rgba(10,14,16,.35),rgba(10,14,16,.1) 45%,rgba(10,14,16,.3))}
 #title .title-inner{width:100%;align-items:center;padding:82px 16px 150px}
 #title .wordmark{width:min(300px,78vw);margin:0 0 20px}
 #title .loadout-label{justify-content:center}
 #title .loadouts{justify-content:center;margin-bottom:18px}
 #title .title-list{align-items:center}
 #title .title-list>button,#title .title-list>button#begin,#title .title-list>button#newgame{width:230px}
 #title .title-list>button:focus,#title .title-list>button:hover{width:252px}
 .hintbar{font-size:14px;gap:6px 14px}
 .bubble{font-size:13px;margin-bottom:48px}
 .title-veil canvas{width:80px;height:80px}
 #menu .menu-top{flex-wrap:wrap;gap:8px 16px;padding-top:max(10px,env(safe-area-inset-top))}
 #menu #menuTitle{flex:1 0 100%;margin:0;font-size:26px}
 .mbar{width:92px}.mbar.xp{width:80px}.ms-gold{font-size:16px}.ms canvas{width:32px;height:32px}
 .ms-lvl .top{gap:10px}
 #menu .panel.menu-list{margin:168px 0 0 0;padding:6px 20px 70px 58px;max-height:calc(100dvh - 176px)}
 #menu .panel.menu-list>button{width:230px}#menu .panel.menu-list>button:focus,#menu .panel.menu-list>button:hover{width:254px}
 .side-panel{top:auto;bottom:10px;right:10px;left:10px;width:auto;max-height:min(78dvh,640px)}
 .sel,input.ef-range{width:150px;flex-basis:150px}
 input.ef-check{margin-right:64px}
 #status{top:max(66px,env(safe-area-inset-top))}
 #compass{top:max(40px,env(safe-area-inset-top));width:200px}
}
@media(max-height:500px){
 .hintbar{min-height:34px;padding-top:5px;padding-bottom:5px;font-size:13px}
 .hg{height:20px;min-width:20px;font-size:10px}.hg.stick{width:21px;height:21px}.hg.pad{width:20px;font-size:13px}
 #title .title-inner{padding:42px 0 10px clamp(40px,6vw,70px)}
 #title .wordmark{width:clamp(170px,26vw,230px);margin-bottom:6px}
 #title .loadout-label{margin-bottom:4px;min-height:16px}
 #title .loadouts{margin-bottom:8px;gap:5px}
 #title .loadouts button{width:34px;height:34px}
 #title .title-list{gap:6px}
 #title .title-list>button{height:31px;min-height:0;font-size:14px}
 #title .title-list>button .ico{width:18px;height:18px}
 #title .version-tag{font-size:12px;top:10px}
 .title-veil canvas{width:64px;height:64px}
 .bubble{font-size:12px;padding:5px 10px;margin-bottom:34px;max-width:260px}
 #menu .menu-top{min-height:52px;padding-top:4px;padding-bottom:4px;gap:16px}
 #menu #menuTitle{font-size:22px;margin-left:0}
 .mbar{width:92px;height:9px}.mbar.st{height:7px}.mbar.xp{width:80px}.ms canvas{width:28px;height:28px}.ms-gold{font-size:15px}.hearts i{width:13px;height:12px}
 #menu .panel.menu-list{margin-top:62px;max-height:calc(100dvh - 104px);display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,auto);gap:6px 64px;align-content:start}
 #menu .panel.menu-list>button{height:30px;font-size:14px;width:178px}
 #menu .panel.menu-list>button:focus,#menu .panel.menu-list>button:hover{width:196px}
 #menu .panel.menu-list>button .ico{width:18px;height:18px}
 #menuText{grid-column:1/-1}
 .side-panel{top:44px;max-height:calc(100dvh - 52px);padding:8px 14px 10px}
 .opt-row{min-height:31px;font-size:13px}.opt-sec{margin:6px 0 2px}.ef-tab{min-height:26px;font-size:13px}
}
@media(pointer:coarse){
 .hintbar.touch-hide{display:none}
 #items{bottom:175px!important}
 #controlsHint{display:none}
}
@media(pointer:coarse) and (max-height:500px){
 #items{left:max(150px,env(safe-area-inset-left))!important;bottom:8px!important}
 #items .quick-labels{display:none}
 .qslot{width:34px;height:36px}.qslot.on{width:36px;height:40px}.qslot .ico{width:20px;height:20px}
 #status{gap:3px}
}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Narrow sheets: the tab label may shrink, the eyebrow hint drops out, and the head never pushes its buttons past the frame. */
#gearpanel .panel-head>div:first-child,#questlog .panel-head>div:first-child,#shop .panel-head>div:first-child,#record .panel-head>div:first-child,#mapPanel .panel-head>div:first-child,#training .panel-head>div:first-child,#help .panel-head>div:first-child,#controls .panel-head>div:first-child{flex:0 1 auto;overflow:hidden}
#gearpanel h2,#questlog h2,#shop h2,#record h2,#mapPanel h2,#training h2,#help .panel-head h2,#controls .panel-head h2{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.panel-head .eyebrow,#gearpanel .eyebrow,#questlog .eyebrow,#shop .eyebrow,#record .eyebrow,#mapPanel .eyebrow,#training .eyebrow{display:none}}
@media(max-width:570px){#training{background:rgba(15,17,21,.92)!important;border:2px solid rgba(247,244,236,.85)!important;padding-top:0!important}#training::before{display:none}#training .panel-head{margin-bottom:8px!important}}
@media(max-height:500px){
 #title .title-inner{padding-top:38px}
 #title .wordmark{width:clamp(160px,23vw,200px)}
 #title .title-list{padding-bottom:0;gap:5px}
 #title .title-list>button{height:30px}
 .title-veil{left:auto;right:max(0px,env(safe-area-inset-right));flex-direction:row-reverse;bottom:-16px}
 .title-veil .bubble::before{left:auto;right:-15px;transform:scaleX(-1)}
 .title-veil .bubble{margin:0 0 26px 0}
}
@media(pointer:coarse){#items .items-caption{display:none}}
/* A phone has no E key and no 1-5 row: the prompt is tapped (or the Talk button pressed), and Swap is its own button. */
@media(pointer:coarse){#prompt kbd{display:none}#weaponHint{display:none}}
@media(pointer:coarse) and (max-height:500px){#weaponHud{right:50%!important;bottom:8px!important}}
/* Title fits six buttons plus the loadout row above Veil's bubble on 720p-class screens. */
@media(min-height:501px) and (max-height:820px){
 #title .title-inner{padding-top:clamp(56px,10vh,80px)}
 #title .wordmark{width:clamp(240px,26vw,340px);margin-bottom:14px}
 #title .loadouts{margin-bottom:14px}
 #title .title-list{gap:10px}
 #title .title-list>button{height:36px}
}
/* A 720p screen: fourteen menu entries at full size ran under the bottom hint bar, leaving
   "Restart" half-hidden and "Main menu" out of sight. Tighten them so the list ends above it. */
@media(min-height:501px) and (max-height:820px) and (min-width:551px){
 #menu .panel.menu-list{gap:6px;max-height:calc(100dvh - 150px)}
 #menu .panel.menu-list>button{height:34px}
}
#help .panel-head .eyebrow,#controls .panel-head .eyebrow{display:none}
#controls{background:rgba(9,14,22,.72)}
body.ui-training #objective,body.ui-training #compass,body.ui-gear #compass{opacity:0!important}
.enemy-tag .lock i{width:10px;height:15px}
.qlog-title::before{content:'';display:inline-block;width:16px;height:16px;margin:0 8px -2px 0;background:var(--i-scroll) center/contain no-repeat;image-rendering:pixelated}
button.qlog-item.on .qlog-title::before{background-image:var(--i-book)}
button.qlog-item.done .qlog-title::before{opacity:.55}
#menu #menuTitle{white-space:normal;font-size:clamp(22px,2.5vw,32px);line-height:1.05;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- Equipment & Items screens (src/ui/inventory-ui.js) ---------- */
.side-panel.ef-screen{top:88px;bottom:58px;left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));width:auto;max-height:none;padding:0;border:0;border-image:none;background:none;overflow:visible;gap:14px 22px;z-index:18}
.side-panel.ef-screen.on{display:grid}
body.ui-screen #menu .panel.menu-list,body.ui-screen #menu .weight{visibility:hidden}
.ef-box{border:6px solid;border-image:var(--ef-frame-deep) 6 fill/6px stretch;padding:8px 12px;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.ef-screen .ef-tab{align-self:flex-start;margin-bottom:8px}
.ef-tab.big{min-width:230px;min-height:44px;font-size:22px;justify-content:center}
.ef-screen button.opt-btn{min-height:32px;padding:3px 14px;border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none;font:800 13px var(--ui);color:var(--ef-white);text-shadow:var(--ef-shadow);outline:none}
.ef-screen button.opt-btn:hover,.ef-screen button.opt-btn:focus{border-image:var(--ef-frame-on) 6 fill/6px stretch;background:none}
.ef-screen button.opt-btn:disabled{opacity:.45}
#equip{grid-template-columns:minmax(250px,300px) minmax(250px,1fr) minmax(320px,1.15fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"left list stats" "det det stats"}
.eq-left{grid-area:left;display:flex;flex-direction:column;min-height:0}
.eq-listcol{grid-area:list}.eq-detcol{grid-area:det}.eq-statcol{grid-area:stats}
.eq-listcol,.eq-detcol,.eq-statcol,.inv-listcol,.inv-detcol{display:flex;flex-direction:column;min-height:0}
.eq-listcol .ef-box,.eq-statcol .ef-box,.inv-listcol .ef-box,.inv-detcol .ef-box{flex:1 1 auto}
.eq-setrow{display:flex;align-items:center;gap:10px;margin:2px 0 8px 6px;font:800 15px var(--ui);color:var(--ef-white);text-shadow:var(--ef-shadow)}
.eq-setrow #eqSetWeapon{flex:1;font-size:12px;color:var(--ef-dim)}
.eq-doll{position:relative;flex:1 1 auto;min-height:196px;display:grid;place-items:center;overflow:hidden}
#eqDoll{width:200px;height:200px;image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.eq-slot{position:absolute;display:grid;place-items:center;width:46px;height:46px;padding:0;border:4px solid;border-image:var(--ef-frame) 6 fill/4px stretch;background:none;outline:none;box-shadow:none}
.eq-slot .ico{width:28px;height:28px}
.eq-slot.on{border-image:var(--ef-frame-on) 6 fill/4px stretch}
button.eq-slot:focus,button.eq-slot:hover{border-image:var(--ef-frame-on) 6 fill/4px stretch;background:none;transform:scale(1.06)}
span.eq-slot.empty{opacity:.3;pointer-events:none}
/* Paper doll rows: weapon and offhand down the left, head / body / feet down the right (inventory-ui.js). */
.eq-slot.eq-r1{top:12px}.eq-slot.eq-r2{top:74px}.eq-slot.eq-r3{top:136px}
.eq-slot .ico.eq-bare,.eq-row .ico.eq-bare{opacity:.28;filter:grayscale(1)}
.eq-det .eq-set{color:#9fe08a}.eq-det .eq-hint{opacity:.62;font-size:.86em}
.eq-row,.inv-row{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:4px 8px;margin:0;background:none;border:0;border-bottom:2px solid transparent;text-align:left;font:800 15px var(--ui);color:var(--ef-white);text-shadow:var(--ef-shadow);outline:none!important;box-shadow:none}
.eq-row .nm,.inv-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-row .ct,.inv-row .ct{font-size:13px;color:var(--ef-dim)}
.eq-row .ico,.inv-row .ico{width:22px;height:22px}
.eq-row:hover,.eq-row:focus,.inv-row:hover,.inv-row:focus{background:rgba(255,255,255,.07);border-bottom-color:#f7f4ec}
.eq-row:focus::after,.inv-row:focus::after{content:"";position:absolute;left:-30px;top:50%;width:22px;height:15px;margin-top:-8px;background:var(--ef-hand) center/contain no-repeat;image-rendering:pixelated;animation:efhand 1s steps(2) infinite}
.eq-list,.inv-list{padding-left:34px}
.eq-row.equipped .nm::after{content:"E";display:inline-grid;place-items:center;width:17px;height:17px;margin-left:8px;background:var(--ef-yellow);color:#221e12;font:900 10px/1 var(--ui);text-shadow:none;vertical-align:2px}
.eq-locked{margin-top:10px;padding-top:6px;border-top:1px solid rgba(255,255,255,.12)}
.eq-locked div{display:flex;align-items:center;gap:10px;min-height:30px;opacity:.5;font:800 13px var(--ui);color:var(--ef-white)}
.eq-locked div .ico{width:18px;height:18px}.eq-locked small{margin-left:auto;font:700 11px var(--ui);color:var(--ef-dim)}
.eq-empty{margin:6px 0;font:700 13px/1.5 var(--ui);color:var(--ef-dim)}
.eq-det,.inv-det{color:var(--ef-white);text-shadow:var(--ef-shadow)}
.det-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.det-head b{font:900 19px var(--ui)}
.det-meta{display:inline-flex;align-items:center;gap:5px;font:800 13px var(--ui);color:var(--ef-dim)}
.det-meta .ico{width:18px;height:18px;margin-left:8px}.det-meta .wt{margin-left:8px}
.eq-det p,.inv-det p{margin:6px 0;font:800 15px/1.45 var(--ui);color:#eeeae0}
.inv-det .det-eff{font-size:13px;color:var(--ef-green)}
.det-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.eq-msg{font:800 12px var(--ui);color:var(--ef-yellow)}
.eq-stats{padding-top:6px}
.st-row{display:grid;grid-template-columns:24px minmax(0,1fr) 70px 14px 70px;align-items:center;gap:6px;min-height:31px;font:800 15px var(--ui);color:var(--ef-white);text-shadow:var(--ef-shadow)}
.st-row .ico{width:20px;height:20px}
.st-row .st-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-row .st-v{text-align:right;font-variant-numeric:tabular-nums}
.st-row .st-sep{text-align:center;color:var(--ef-dim)}
.st-row .st-v.up{color:#8ce86f}.st-row .st-v.down{color:#ff6d5c}
#inv{grid-template-columns:minmax(200px,250px) minmax(260px,400px) minmax(260px,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"cats list det"}
.inv-cats{grid-area:cats;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-left:44px;margin-left:-20px}
.inv-cats .ef-btn{width:196px;height:36px;font-size:16px}
.inv-cats .ef-btn.on{border-image:var(--ef-frame-on) 6 fill/6px stretch;width:226px}
.inv-listcol{grid-area:list}.inv-detcol{grid-area:det}
.inv-detcol .ef-box{flex:0 1 auto}
.inv-veil{position:absolute;left:0;bottom:-8px;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.inv-veil canvas{width:84px;height:84px;image-rendering:pixelated}
.inv-veil .bubble{margin:0 0 -4px 12px;font-size:13px}
.inv-veil .bubble::before{left:14px;bottom:-15px;transform:rotate(-90deg)}
/* Quick carousel: arrows and the centre slot are touchable. */
.quick .qarrow,.quick #quickC{pointer-events:auto;cursor:pointer}
.quick .qarrow{width:16px;height:22px;background-size:10px 14px}
#items.bump #quickC{animation:efbump .22s ease-out}
@keyframes efbump{40%{transform:scale(1.14)}}
/* EthrA quest banner */
#questBanner{position:fixed;z-index:14;left:50%;top:27%;transform:translateX(-50%);width:max-content;max-width:90vw;text-align:center;pointer-events:none;opacity:0;
 font:900 clamp(22px,3.2vw,38px)/1.15 var(--ui);color:#f4f0e3;text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 18px rgba(0,0,0,.35)}
#questBanner span{color:#d8d2c0}
/* the quest's category colour (quests.js QUEST_CATS): the label in it, the title warmed by it */
#questBanner.cat-main span{color:var(--q-main,#f2c14e)}#questBanner.cat-side span{color:var(--q-side,#e4e9f0)}#questBanner.cat-job span{color:var(--q-job,#86d27e)}
#questBanner.cat-main{color:#fff3cf;text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 18px rgba(0,0,0,.35),0 0 26px rgba(242,193,78,.45)}
#questBanner.cat-side{color:#f2f5f9;text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 18px rgba(0,0,0,.35),0 0 26px rgba(200,212,228,.42)}
#questBanner.cat-job{color:#e6f6df;text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 18px rgba(0,0,0,.35),0 0 26px rgba(134,210,126,.45)}
#questBanner[class*=cat-]::after{content:'';display:block;height:3px;margin:6px auto 0;width:62%;border-radius:2px;box-shadow:0 2px 0 rgba(0,0,0,.35)}
#questBanner.cat-main::after{background:linear-gradient(90deg,transparent,var(--q-main,#f2c14e) 18%,var(--q-main,#f2c14e) 82%,transparent)}
#questBanner.cat-side::after{background:linear-gradient(90deg,transparent,var(--q-side,#e4e9f0) 18%,var(--q-side,#e4e9f0) 82%,transparent)}
#questBanner.cat-job::after{background:linear-gradient(90deg,transparent,var(--q-job,#86d27e) 18%,var(--q-job,#86d27e) 82%,transparent)}
#questBanner.on{animation:efquest 3.6s ease forwards}
@keyframes efquest{0%{opacity:0;transform:translate(-50%,8px)}10%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}
body.photo #questBanner,body:not(.playing) #questBanner{display:none}
@media(max-width:550px) and (orientation:portrait){
 .side-panel.ef-screen{top:170px;bottom:10px;left:10px;right:10px;display:none;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
 .side-panel.ef-screen.on{display:flex;flex-direction:column}
 .ef-box{overflow:visible;flex:0 0 auto!important}
 .eq-doll{min-height:190px}.ef-tab.big{display:none}
 .inv-cats{flex-direction:row;flex-wrap:wrap;gap:6px;padding-left:0;margin:0}
 .inv-cats .ef-btn,.inv-cats .ef-btn.on{width:auto;height:32px;font-size:13px;padding:0 10px 0 6px}
 .inv-cats .ef-btn::before{display:none}
 .inv-veil{display:none}
 .eq-list,.inv-list{padding-left:26px}
 .st-row{grid-template-columns:22px minmax(0,1fr) 58px 12px 58px;font-size:14px}
}
@media(max-height:500px){
 .side-panel.ef-screen{top:60px;bottom:40px;gap:8px 14px}
 #equip{grid-template-columns:minmax(190px,220px) minmax(200px,1fr) minmax(250px,1fr);grid-template-areas:"left list stats" "left det stats"}
 .ef-tab.big{display:none}.eq-doll{min-height:150px}#eqDoll{width:150px;height:150px}
 .eq-slot{width:38px;height:38px}.eq-slot .ico{width:22px;height:22px}
 .eq-slot.eq-r1{top:6px}.eq-slot.eq-r2{top:54px}.eq-slot.eq-r3{top:102px}
 .ef-screen .ef-tab{min-height:24px;font-size:12px;margin-bottom:4px;padding:0 10px}
 .eq-row,.inv-row{min-height:30px;font-size:13px}
 .st-row{min-height:22px;font-size:12px;grid-template-columns:18px minmax(0,1fr) 52px 10px 52px}.st-row .ico{width:16px;height:16px}
 .eq-det p,.inv-det p{font-size:12px;margin:3px 0}.det-head b{font-size:15px}
 /* the head / feet details carry more lines; keep the item list in view above them */
 #equip{grid-template-rows:minmax(92px,1fr) auto}.eq-detcol .ef-box{height:44vh;overflow-y:auto}.eq-det .eq-hint{display:none}
 #inv{grid-template-columns:170px minmax(200px,1fr) minmax(200px,1fr)}
 .inv-cats{gap:5px;padding-left:36px}.inv-cats .ef-btn{width:150px;height:28px;font-size:13px}.inv-cats .ef-btn.on{width:164px}
 .inv-veil{display:none}
}
body.kbnav .ef-screen button:focus,body.kbnav .ef-screen button:focus:not(.primary){background:none;outline:none}
body.kbnav .ef-screen .eq-row:focus,body.kbnav .ef-screen .inv-row:focus{background:rgba(255,255,255,.07)}
@media(max-width:550px) and (orientation:portrait){.side-panel.ef-screen>*{flex:0 0 auto;min-height:auto}.eq-left .eq-doll{flex:0 0 auto}.eq-listcol .ef-box,.eq-statcol .ef-box,.inv-listcol .ef-box{max-height:none}}
@media(max-height:500px){.inv-cats .ef-btn{font-size:12px}.inv-cats .ef-btn .ico{width:18px;height:18px}}

/* Keys or pad driving the menus: a pointer resting on another row must not draw a second hand.
   The focused row is the cursor until the mouse moves (main.js drops kbnav, and hover then focuses). */
body.kbnav button.ef-btn:hover:not(:focus)::before,body.kbnav .sa-row:hover:not(:focus-within)::after{opacity:0;animation:none}
/* A marker label under the top-centre text steps back (ui/guidance.js) instead of printing over it. */
#questGuide span,#jobGuide span{transition:opacity .2s}
#questGuide.muted span,#jobGuide.muted span{opacity:0}
#questGuide.muted i,#jobGuide.muted i{opacity:.45}
/* Touch-only way out of the screens that have no Back row (ui/ethra-ui.js), beside the "Menu" title. */
#screenBack{display:none}
@media(pointer:coarse){body:has(#stats.on) #screenBack,body:has(#equip.on) #screenBack{display:flex;align-items:center;justify-content:center;position:fixed;z-index:60;left:calc(max(12px,env(safe-area-inset-left)) + 100px);top:max(8px,env(safe-area-inset-top));width:100px;height:38px}}
@media(pointer:coarse) and (orientation:portrait){body:has(#stats.on) #screenBack,body:has(#equip.on) #screenBack{left:auto;right:max(12px,env(safe-area-inset-right));height:34px}}

/* Stamina pill beside Bob (EthrA video study 2026-09-24 section 5; main.js stamPill() places it).
   A black-outlined yellow capsule that drains from the top, turning orange and blinking when spent. */
#stamPill{position:absolute;left:0;top:0;width:10px;height:28px;opacity:0;pointer-events:none;box-sizing:border-box;border:2px solid #17150f;border-radius:999px;background:#3a352acc;overflow:hidden;will-change:transform,opacity;box-shadow:0 1px 0 #0000004d}
#stamPill i{position:absolute;left:0;right:0;bottom:0;height:var(--f,100%);background:linear-gradient(90deg,#fff08a 0 30%,#f4d235 30% 70%,#d4ad1f 70%)}
#stamPill.low i{background:linear-gradient(90deg,#ffc07a 0 30%,#f07f2e 30% 70%,#c9561d 70%);animation:stamBlink .36s steps(2) infinite}
@keyframes stamBlink{50%{opacity:.45}}
body.photo #stamPill{display:none}

/* ---------- Phone layout fixes (playtest round 4, qa_shots/playtest/round4) ----------
   Touch and narrow screens only; the desktop layout is untouched.
   z-order: world-anchored tags (enemy bars, name labels, damage numbers) sit under the HUD's
   own text, so a foe walking behind the objective line or a notice never paints over it. */
@media (pointer:coarse),(max-width:850px){
 #hud #reticles{z-index:0}
 #hud #objective,#hud #notice,#hud #prompt,#hud #status,#hud #banner,#hud #weaponHud,#hud #items{z-index:2}
 #hud #notice{background:none}
}
/* Portrait phone: the weapon label moves up under the compass (it sat right where the stamina
   pill floats beside the player); the objective stays two lines at most and the notice drops
   below it instead of covering its last line. */
@media (max-width:550px) and (orientation:portrait){
 #hud #weaponHud{top:calc(max(40px,env(safe-area-inset-top)) + 30px)!important;bottom:auto!important;right:max(12px,env(safe-area-inset-right))!important;left:auto!important;transform:none!important;text-align:right;max-width:170px}
 #hud #weaponName{font-size:14px!important}
 #hud #weaponHint{display:none}
 #hud #charge{float:right;width:110px}
 #hud #objectiveSub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:calc(100vw - 40px)}
 #hud #notice{top:calc(142px + 86px)!important;max-width:calc(100vw - 32px)!important;font-size:12px!important}
 #hud #banner{top:34%}
}
@media (pointer:coarse){#hud #weaponHint{display:none}}
/* Landscape phone: the notice sits below the status rows and between the touch button columns,
   so it no longer covers Veil's state line or the Lock/Talk/Jump row. */
@media (pointer:coarse) and (max-height:500px){
 #hud #notice{top:calc(max(8px,env(safe-area-inset-top)) + 92px)!important;max-width:min(44vw,380px,calc(100vw - 528px))!important;font-size:11px!important;padding:4px 10px}
 #hud #veilState{position:relative;z-index:3}
}
/* Too narrow for the notice to fit left of the Lock/Talk/Crouch row: it drops under the row instead,
   still above the hero and clear of both thumb columns. */
@media (pointer:coarse) and (max-height:500px) and (max-width:780px){
 #hud #notice{top:calc(max(8px,env(safe-area-inset-top)) + 136px)!important;max-width:min(44vw,380px)!important}
}
/* Portrait Training panel: Spawn Options comes straight after the roster, so Spawn is on screen
   without scrolling past the concept sheet. */
@media (max-width:570px){
 #training .train-side>.train-card{order:-1}
 #training .train-catalog{max-height:190px}
}
@media (pointer:coarse),(max-width:850px){#hud #notice,#hud #prompt{border-image:var(--ef-frame-deep) 6 fill/6px stretch}}

/* ---------- Trade screen (src/ui/shop-ui.js), EthrA forge grammar ---------- */
#shop.sh{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));bottom:max(10px,env(safe-area-inset-bottom));transform:none;width:auto;max-height:none;padding:0 20px 0!important;overflow:visible}
#shop.sh.on{display:flex;flex-direction:column}
#shop.sh .panel-head{flex:0 0 auto}
.sh-wrap{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(180px,230px) minmax(260px,1fr) minmax(280px,1.05fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"tabs tabs tabs" "cats list det" "hint hint hint";gap:10px 20px;padding-bottom:4px}
.sh-tabs{grid-area:tabs;display:flex;align-items:center;gap:10px;min-width:0}
.sh-tabs .hg{opacity:.35}
#shop.dev-pad .sh-tabs .hg{opacity:1}
button.sh-tab{display:inline-flex;align-items:center;gap:8px;min-width:110px;height:36px;padding:0 14px;border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none!important;font:800 15px var(--ui);color:var(--ef-dim);text-shadow:var(--ef-shadow);outline:none!important;box-shadow:none!important}
button.sh-tab .ico{width:18px;height:18px}
button.sh-tab.on{border-image:var(--ef-frame-on) 6 fill/6px stretch;color:#fff}
button.sh-tab:focus{border-image:var(--ef-frame-on) 6 fill/6px stretch;color:#fff;transform:translateY(-2px)}
.sh-purse{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font:800 14px var(--ui);color:#fff;text-shadow:var(--ef-shadow);white-space:nowrap}
.sh-purse .ico{width:20px;height:20px}.sh-purse b{font-weight:900;font-size:17px}.sh-purse .dim{color:var(--ef-dim);font-size:12px}
.sh-cats{grid-area:cats;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding-left:40px;margin-left:-20px;min-height:0;overflow-y:auto;overflow-x:visible}
.sh-cats .ef-btn{width:170px;height:36px;font-size:15px}
.sh-cats .ef-btn em{font-style:normal;font:800 11px var(--ui);color:var(--ef-dim);flex:0 0 auto}
.sh-cats .ef-btn.on{border-image:var(--ef-frame-on) 6 fill/6px stretch;width:188px}
.sh-cats .ef-btn::before{left:-40px}
.sh-listcol{grid-area:list}.sh-detcol{grid-area:det}
.sh-listcol,.sh-detcol{display:flex;flex-direction:column;min-height:0}
.sh-listcol .ef-box{flex:1 1 auto}.sh-detcol .ef-box{flex:0 1 auto}
.sh-list{padding-left:34px}
button.sh-row{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:4px 8px;margin:0;background:none!important;border:0!important;border-bottom:2px solid transparent!important;text-align:left;font:800 15px var(--ui);color:var(--ef-white)!important;text-shadow:var(--ef-shadow);outline:none!important;box-shadow:none!important}
button.sh-row .ico{width:22px;height:22px}
button.sh-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.sh-row .ct{font-size:12px;color:var(--ef-dim);min-width:28px;text-align:right}
button.sh-row .pr{min-width:58px;text-align:right;font:900 13px var(--ui);color:var(--ef-yellow)}
button.sh-row.poor{opacity:.5}
button.sh-row.picked{background:rgba(255,255,255,.06)!important}
button.sh-row:hover,button.sh-row:focus{background:rgba(255,255,255,.09)!important;border-bottom-color:#f7f4ec!important}
button.sh-row:focus::after{content:"";position:absolute;left:-30px;top:50%;width:22px;height:15px;margin-top:-8px;background:var(--ef-hand) center/contain no-repeat;image-rendering:pixelated;animation:efhand 1s steps(2) infinite}
.sh-det p{margin:6px 0;font:800 14px/1.45 var(--ui);color:#eeeae0;text-shadow:var(--ef-shadow)}
.sh-det .det-head b{color:#fff;text-shadow:var(--ef-shadow)}
.sh-cmp{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0;font:800 13px var(--ui);color:#fff;text-shadow:var(--ef-shadow)}
.sh-cmp .lab{color:var(--ef-dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase;align-self:center}
.sh-cmp b.up{color:#8ce86f}.sh-cmp b.down{color:#ff6d5c}
.sh-act-row{display:flex;align-items:center;gap:6px;margin-top:10px;padding-left:30px}
button.sh-step{width:30px;height:36px;padding:0;border:0!important;background:none!important;font:900 18px var(--ui);color:#fff;text-shadow:var(--ef-shadow);box-shadow:none!important;outline:none!important}
button.sh-step:disabled{opacity:.25}
button.sh-act{position:relative;min-width:190px;height:40px;padding:0 16px;border:6px solid;border-image:var(--ef-frame) 6 fill/6px stretch;background:none!important;font:800 15px var(--ui);color:#fff;text-shadow:var(--ef-shadow);outline:none!important;box-shadow:none!important}
button.sh-act b{font-weight:900;color:var(--ef-yellow)}
button.sh-act:focus,button.sh-act:hover{border-image:var(--ef-frame-on) 6 fill/6px stretch}
button.sh-act:focus::after{content:"";position:absolute;left:-68px;top:50%;width:22px;height:15px;margin-top:-8px;background:var(--ef-hand) center/contain no-repeat;image-rendering:pixelated;animation:efhand 1s steps(2) infinite}
button.sh-act.short{opacity:.6}
.sh-msg{min-height:18px;font:800 12px var(--ui)!important;color:var(--ef-yellow)!important}
.sh-msg.bad{color:#ff8a78!important}
.sh-vendor{position:absolute;left:10px;bottom:52px;display:flex;align-items:flex-end;gap:6px;pointer-events:none;max-width:40%}
.sh-vendor canvas{width:64px;height:64px;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
.sh-vendor .bubble{margin:0 0 34px 6px;font-size:13px;max-width:260px}
.hintbar.sh-hints{grid-area:hint;position:relative;inset:auto;min-height:38px;padding:4px 0;background:none;font-size:15px}
.hintbar.sh-hints.touch-hide{display:flex}
#shop .panel-head .head-actions button{min-height:30px}
@media(max-width:760px){
 .sh-wrap{grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto;grid-template-areas:"tabs" "cats" "list" "det" "hint";overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
 .sh-cats{flex-direction:row;flex-wrap:wrap;gap:6px;padding-left:0;margin:0;overflow:visible}
 .sh-cats .ef-btn,.sh-cats .ef-btn.on{width:auto;height:32px;font-size:13px;padding:0 10px 0 6px}
 .sh-cats .ef-btn::before{display:none}
 .sh-tabs{flex-wrap:wrap}.sh-purse{margin-left:0;width:100%;font-size:12px}
 .sh-listcol .ef-box{max-height:none;flex:0 0 auto;overflow:visible}
 .sh-vendor{display:none}
 .sh-list{padding-left:28px}
 button.sh-act{min-width:0;flex:1}
 button.sh-act:focus::after{display:none}
}
@media(max-height:500px){
 #shop.sh .panel-head{--tab-h:38px}
 .sh-wrap{gap:6px 14px;grid-template-columns:minmax(150px,180px) minmax(220px,1fr) minmax(230px,1fr)}
 button.sh-tab{height:30px;min-width:86px;font-size:13px}
 .sh-cats{gap:5px}.sh-cats .ef-btn{height:28px;width:140px;font-size:13px}.sh-cats .ef-btn.on{width:152px}
 button.sh-row{min-height:30px;font-size:13px}
 .sh-det p{font-size:12px;margin:3px 0}
 button.sh-act{height:34px;min-width:150px;font-size:13px}
 .sh-vendor{display:none}
 .hintbar.sh-hints{min-height:28px;font-size:12px}
}
@media(max-width:760px){.sh-listcol,.sh-detcol,.sh-cats,.sh-tabs{min-height:auto}.sh-wrap{align-content:start}}
@media(max-height:500px){.sh-cats .ef-btn{width:156px}.sh-cats .ef-btn.on{width:166px}}
@media(max-width:760px){.sh-wrap{overflow-x:hidden;padding-left:2px}.sh-wrap>*{min-width:0}}

/* Assignable weapon positions use the same buttons as controller menu navigation. */
.eq-left{overflow-y:auto;overscroll-behavior:contain}
.eq-left .eq-doll{flex:0 0 196px}
.eq-quick{margin-top:10px;padding:10px;flex:0 0 auto;color:var(--ef-white);font:13px var(--ui)}
.eq-quick p{font-size:12px;color:var(--ef-dim);margin:6px 0;line-height:1.35}
.eq-quick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.ef-screen .eq-quick-slot.opt-btn{padding:4px 1px;min-height:58px;display:flex;align-items:center;flex-direction:column;gap:2px}
.eq-quick-slot strong{font-size:12px}.eq-quick-slot small{font-size:9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ef-screen .eq-quick-slot.editing{border-image:var(--ef-frame-on) 6 fill/6px stretch}
.eq-quick-actions{display:flex;flex-wrap:wrap;gap:4px}
.ef-screen .eq-quick-actions button.opt-btn{min-height:44px;padding:3px 7px}
@media(max-width:760px){.eq-left{overflow:visible}.eq-quick{max-width:none}.ef-screen .eq-quick-slot.opt-btn{min-height:64px}.eq-quick-slot small{font-size:10px}}
@media(max-height:500px) and (min-width:761px){.eq-left .eq-doll{flex-basis:150px;min-height:150px}}