/* Atomic Treasury. Every UI colour comes from these tokens; nothing else in this file names a colour.
   amber = interact, green = money, red = danger, brass = prestige. Never swap them.
   Fonts are self-hosted Latin subsets (public/fonts, SIL OFL); system fonts fill in while they load. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700-latin.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/barlow-condensed-900-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-500-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600-latin.woff2) format('woff2')}
:root{
 --iron:#191B19;--slate:#444B45;--ivory:#E6DDC7;--ash:#999B8F;--brass:#B89A58;--amber:#F2A42B;--green:#A9D66D;--red:#E34F32;
 --iron-rgb:25 27 25;--slate-rgb:68 75 69;--ash-rgb:153 155 143;--brass-rgb:184 154 88;--ivory-rgb:230 221 199;--amber-rgb:242 164 43;--green-rgb:169 214 109;--red-rgb:227 79 50;
 /* Derived, not new hues: the primary button's darker lip; red lifted 10% toward ivory so small danger text clears 4.5:1 on iron
    (pure red is 4.48:1); the radiation storm's sickly yellow-green, kept well away from money green. */
 --amber-lip:#9C6418;--red-text:#E35D41;--storm:#C8C83A;--storm-rgb:200 200 58;
 --plate:rgb(var(--iron-rgb) / .92);--radius:3px;
 --outline:1px 0 0 var(--iron),-1px 0 0 var(--iron),0 1px 0 var(--iron),0 -1px 0 var(--iron);
 --font-head:'Barlow Condensed','Arial Narrow','Roboto Condensed',sans-serif-condensed,Impact,sans-serif;
 --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
 --font-num:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Roboto Mono',monospace;
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--iron);color:var(--ivory);font-family:var(--font-body)}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--slate);background:var(--iron);border-radius:var(--radius);transition:background .15s,transform .15s}button:hover{background:var(--slate);border-color:var(--amber)}button:active{transform:translateY(2px)}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--amber);outline-offset:3px}#world,#low{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:none}[hidden]{display:none!important}#topbar{position:absolute;left:30px;right:30px;top:22px;display:flex;align-items:center;justify-content:space-between;z-index:5}.brandmark{font-family:var(--font-head);font-size:28px;color:var(--brass);text-transform:uppercase}.brandmark b{color:var(--ivory)}.brandmark small{font-size:9px;letter-spacing:2px;color:var(--ash);vertical-align:middle;margin-left:15px}.chips{display:flex;gap:7px}.chips button{padding:10px 13px;background:var(--plate);font-size:11px}.title-left{position:absolute;left:6%;top:20%;width:28%;max-width:400px}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--ash);display:flex;align-items:center;gap:8px}.dot{display:inline-block;width:6px;height:6px;background:var(--brass);border-radius:1px}h1{font-family:var(--font-head);font-weight:900;font-size:clamp(42px,5.1vw,85px);line-height:.92;letter-spacing:1px;margin:23px 0;color:var(--ivory);text-shadow:3px 3px 0 var(--slate),6px 6px 0 var(--iron);text-transform:uppercase}h1 span{color:var(--brass)}.tagline{color:var(--ivory);font-size:17px;line-height:1.5;margin:0 0 24px}.menu{display:grid;gap:8px;max-width:290px}.menu button{height:40px;text-align:left;padding:0 16px;background:var(--iron);font-weight:bold;font-size:13px}.menu button span{float:right;opacity:.7}.menu .primary,.primary{height:58px;background:var(--amber);color:var(--iron);border:2px solid var(--amber);box-shadow:0 4px 0 var(--amber-lip);font-size:23px;font-weight:900;letter-spacing:2px;margin-bottom:6px}.primary:hover{background:var(--amber)}.fine{font-size:9px;line-height:1.7;letter-spacing:1px;color:var(--ash)}.panel{background:var(--plate);border:1px solid var(--slate);border-radius:var(--radius)}#creator{position:absolute;right:4.5%;top:20%;width:260px;padding:18px}.panel-heading{font:700 10px var(--font-head);letter-spacing:1.4px;display:flex;justify-content:space-between;align-items:center;color:var(--brass);border-bottom:1px solid var(--slate);padding-bottom:13px;margin-bottom:17px;text-transform:uppercase}label{display:block;font-size:9px;letter-spacing:1.5px;color:var(--ash);margin:14px 0 8px}.name-row{display:flex;gap:6px;margin-top:8px}.name-row input{width:100%;min-width:0}input,select{border:1px solid var(--slate);color:var(--ivory);background:var(--iron);padding:10px;border-radius:4px}input{font-size:13px}.name-row button{width:40px;font-size:22px}.outfit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.outfit-grid button{height:62px;font-size:36px;position:relative;color:var(--swatch);background:var(--iron)}.outfit-grid button small{font-size:7px;position:absolute;bottom:2px;left:0;width:100%;color:var(--ash)}.outfit-grid .selected{border:2px solid var(--amber);background:rgb(var(--amber-rgb) / 0.16)}.creator-options{display:grid;grid-template-columns:1fr 1fr;gap:0 9px}.creator-options label{letter-spacing:1px}.creator-options select{width:100%;padding:7px 4px;font-size:10px;letter-spacing:0;margin-top:6px}.creator-options label:last-child{grid-column:1/3}.status-note{border-top:1px solid var(--slate);padding-top:14px;font-size:8px;color:var(--ash);display:flex;align-items:center;gap:7px;margin-top:10px}.status-note b{color:var(--brass);margin-left:auto}.character-caption{position:absolute;left:50%;top:74%;transform:translateX(-50%);display:grid;text-align:center;gap:7px;pointer-events:none}.character-caption span{font:700 9px var(--font-head);letter-spacing:3px;color:var(--ash);text-transform:uppercase}.character-caption b{font:900 21px var(--font-head);letter-spacing:3px;text-transform:uppercase}.character-caption small{font-size:10px;color:var(--ivory)}#modeBadge{position:absolute;bottom:10px;left:30px;color:var(--ash);font:8px var(--font-body);letter-spacing:1.2px;pointer-events:none}#toast{position:absolute;bottom:144px;left:50%;transform:translateX(-50%);max-width:620px;padding:14px 21px;border-radius:var(--radius);background:var(--plate);box-shadow:none;border:1px solid var(--slate);z-index:20;text-align:center;font:12px var(--font-body);line-height:1.6;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}#hud{position:absolute;inset:0;pointer-events:none}#hud button{pointer-events:auto}#hud .hud-left{position:absolute;left:25px;top:88px;width:240px}.level{display:flex;flex-wrap:wrap;gap:12px;padding:12px}.level strong{color:var(--brass);font:16px var(--font-num);font-variant-numeric:tabular-nums}.level span{font:11px var(--font-body);padding-top:3px}.level #quest{width:100%;font:10px var(--font-body);color:var(--ash);border-top:1px solid var(--slate);padding-top:9px}.zone-chip{font:700 11px var(--font-head);letter-spacing:1px;background:var(--slate);color:var(--ivory);display:inline-block;padding:8px 12px;margin:12px 0;text-transform:uppercase}#meters{padding:6px 12px 12px}#meters label{display:flex;justify-content:space-between;margin-top:8px}progress{display:block;width:100%;height:5px;border:0;background:var(--slate);border-radius:3px;overflow:hidden;accent-color:var(--brass)}progress::-webkit-progress-bar{background:var(--slate)}progress::-webkit-progress-value{background:var(--brass)}.meter-row{display:flex;gap:12px;margin-top:9px;justify-content:space-between;font:8px var(--font-num);color:var(--ash);font-variant-numeric:tabular-nums}.meter-row progress{width:47%;height:3px}#tutorial{margin-top:12px;padding:13px}#tutorial .panel-heading{margin-bottom:10px;padding-bottom:8px;color:var(--brass)}#tutorial button{font-size:8px;border:0;background:transparent;color:var(--ash)}#tutorial strong{font-size:12px}#tutorial p{font-size:11px;line-height:1.5;color:var(--ash);margin-bottom:0}.hud-right{position:absolute;right:25px;top:88px;width:182px}.map-wrap{position:relative;padding:8px}#minimap{width:164px;height:164px;display:block}.map-wrap span{font:8px var(--font-body)}.map-wrap button{position:absolute;right:8px;bottom:3px;font-size:8px;padding:4px}.map-wrap.expanded{position:fixed;top:15%;left:50%;width:440px;transform:translateX(-50%);z-index:22}.map-wrap.expanded canvas{width:420px;height:420px}#biggest{margin-top:10px;padding:12px;font-size:10px}#biggest .panel-heading{font-size:8px;letter-spacing:0;margin-bottom:7px;padding-bottom:8px}#biggest p{margin:6px 0;color:var(--ash)}.instance-button{width:100%;margin-top:9px;font:9px var(--font-body);padding:9px}.hotbar{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:5px;align-items:center}.hotbar button{position:relative;width:65px;height:62px;font-size:25px;background:var(--plate)}.hotbar button kbd{position:absolute;top:3px;left:5px;font:8px var(--font-num);color:var(--ash);font-variant-numeric:tabular-nums}.hotbar button span{display:block;font:6px var(--font-body);margin-top:4px;letter-spacing:.5px}.hotbar .active{border:2px solid var(--amber);background:var(--slate)}#haul{padding:0 14px;display:grid;gap:5px;white-space:nowrap}#haul small{font:8px var(--font-body);color:var(--ash)}#haul b{font:14px var(--font-num);color:var(--ivory);font-variant-numeric:tabular-nums}.bottom-left,.bottom-right{position:absolute;bottom:35px;display:flex;gap:8px}.bottom-left{left:25px}.bottom-right{right:25px}.bottom-left button,.bottom-right button{font:10px var(--font-body);padding:13px}#interaction{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);text-align:center;min-width:290px}#prompt{font:12px var(--font-body);color:var(--amber);text-shadow:0 2px 4px var(--iron);line-height:1.7}#lockGame{background:var(--plate);padding:15px;border-radius:var(--radius);margin-top:10px;font:9px var(--font-body)}.lock-track{height:14px;background:var(--slate);position:relative;margin-top:12px}.lock-track i{position:absolute;left:31.25%;width:34.4%;height:100%;background:var(--amber)}.lock-track b{position:absolute;top:-4px;height:22px;width:3px;background:var(--ivory)}dialog{padding:0;border:1px solid var(--brass);background:var(--iron);color:var(--ivory);border-radius:var(--radius);max-height:85vh;width:min(700px,92vw);box-shadow:none}dialog::backdrop{background:rgb(var(--iron-rgb) / .78)}.phone-header{position:sticky;top:0;background:var(--iron);display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--slate);z-index:2;font:700 12px var(--font-head);letter-spacing:2px;text-transform:uppercase}.phone-header button{padding:5px 10px}#phoneBody{padding:24px}#phoneBody h2{font-size:24px;color:var(--brass);margin:0 0 14px}#phoneBody h3{color:var(--brass);font-size:14px}#phoneBody p,#phoneBody li{font-size:13px;line-height:1.7;color:var(--ivory)}#phoneBody small{color:var(--ash);font-size:11px}.phone-grid,.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.phone-grid button{padding:24px 10px}.card{background:var(--iron);padding:15px;border:1px solid var(--slate);border-radius:var(--radius)}.card h3{font:700 14px var(--font-head);margin-top:8px;text-transform:uppercase}.card p{font-size:11px!important}.card button{padding:8px;margin-top:5px}.row{display:flex;gap:8px;align-items:center;margin:12px 0}.row input{flex:1;min-width:0}.row button{padding:10px}.badge{display:inline-block;padding:4px 7px;background:var(--brass);color:var(--iron);font:700 9px var(--font-head);border-radius:3px;text-transform:uppercase}table{width:100%;border-collapse:collapse;font-size:11px}th,td{padding:10px;border-bottom:1px solid var(--slate);text-align:left}.warning{padding:13px;border:1px solid var(--red);background:rgb(var(--red-rgb) / .12);border-radius:var(--radius);font-size:12px!important}#renderError{position:absolute;inset:30% 30%;z-index:50;background:var(--iron);padding:25px;overflow:auto}#renderError button{padding:14px;background:var(--amber);color:var(--iron)}#touch{display:none}#rotateNote{display:none}.danger{color:var(--red-text)!important}
@media(max-width:1050px){#creator{width:220px;padding:14px;right:3%;top:18%}.title-left{left:4%;top:19%;width:30%}.eyebrow{font-size:7px;letter-spacing:1px}h1{font-size:56px}.tagline{font-size:15px}.character-caption{left:51%;top:75%}.hud-left{width:205px!important}.bottom-left button{font-size:8px}.hud-right{width:152px}#minimap{width:134px;height:134px}#biggest{padding:9px}}
@media(max-height:650px) and (orientation:landscape){#goalPanel{bottom:1px;font-size:8px;line-height:10px}#goalPanel progress{display:none}#topbar{top:10px;left:16px;right:16px}.brandmark{font-size:19px}.brandmark small{font-size:7px}.chips button{padding:7px;font-size:9px}.title-left{top:17%;left:4%;width:29%}h1{font-size:42px;margin:10px 0}.tagline{font-size:12px;line-height:1.25;margin-bottom:12px}.eyebrow{font-size:6px}.menu{gap:5px;max-width:230px}.menu button{height:29px;font-size:10px}.menu .primary{height:42px;font-size:18px}.fine{font-size:6px;margin-top:7px}#creator{top:17%;right:3%;width:205px;padding:12px}.panel-heading{font-size:8px;margin-bottom:8px;padding-bottom:8px}label{font-size:7px;margin:8px 0 5px}.name-row input{padding:6px}.outfit-grid button{height:41px;font-size:28px}.creator-options select{font-size:8px;padding:5px}.status-note{font-size:6px;padding-top:9px;margin-top:6px}.character-caption{top:72%}.character-caption b{font-size:15px}.character-caption span{font-size:7px}.character-caption small{font-size:8px}#hud .hud-left,#hud .hud-right{top:53px}#hud .hud-left{left:12px;width:177px!important}.level{padding:8px;gap:8px}.level strong{font-size:12px}.level span{font-size:9px}.level #quest{font-size:8px}.zone-chip{margin:7px 0;font-size:8px;padding:6px}#meters{padding:4px 8px 8px}#meters label{font-size:7px;margin:5px 0}.meter-row{font-size:6px;margin-top:5px}#tutorial{padding:8px;margin-top:7px}#tutorial strong{font-size:10px}#tutorial p{font-size:9px}.hud-right{right:12px;width:120px}#minimap{width:102px;height:102px}#biggest{font-size:8px;margin-top:6px}#biggest p{font-size:8px}.instance-button{font-size:7px;padding:6px}.hotbar{bottom:15px}.hotbar button{width:48px;height:43px;font-size:18px}.hotbar button span{font-size:5px}#haul b{font-size:10px}#haul small{font-size:6px}.bottom-left,.bottom-right{bottom:18px}.bottom-left{left:12px}.bottom-right{right:12px}.bottom-left button,.bottom-right button{font-size:7px;padding:8px}#interaction{bottom:67px;font-size:9px;min-width:240px}#prompt{font-size:10px}#toast{bottom:105px;font-size:10px;padding:8px 13px}#modeBadge{font-size:6px;bottom:4px;left:12px}.map-wrap.expanded{top:5%;width:310px}.map-wrap.expanded canvas{width:290px;height:290px}}
@media(pointer:coarse){#touch{display:block;pointer-events:none}#stick{pointer-events:auto;touch-action:none;position:absolute;bottom:75px;left:24px;width:96px;height:96px;background:rgb(var(--iron-rgb) / 0.5);border:1px solid rgb(var(--ivory-rgb) / .31);border-radius:50%}#stickKnob{position:absolute;left:30px;top:30px;width:34px;height:34px;border-radius:50%;background:rgb(var(--amber-rgb) / 0.56)}#touchAct,#touchAttack{pointer-events:auto;touch-action:none;position:absolute;bottom:78px;right:24px;width:70px;height:70px;border-radius:50%;font:10px var(--font-body);background:rgb(var(--amber-rgb) / 0.5)}#touchAttack{right:104px;width:54px;height:54px;bottom:87px;background:var(--plate)}#tutorial{max-width:175px}.hotbar{left:53%}#haul{display:none}}
@media(orientation:portrait) and (max-width:700px){#rotateNote{display:block;position:absolute;top:56px;left:20px;right:20px;background:var(--brass);text-align:center;font-size:10px;padding:7px;color:var(--iron);z-index:10}.brandmark small{display:none}#topbar{top:13px;left:16px;right:16px}.chips button{padding:8px}.chips button span{display:none}.title-left{top:15%;left:7%;width:75%}h1{font-size:59px}.tagline{font-size:14px}.menu{width:200px}.menu button{height:36px}#creator{top:auto;bottom:103px;right:6%;width:160px;padding:10px}.creator-options{display:none}#creator .status-note{display:none}.outfit-grid{gap:3px}.outfit-grid button{height:43px;font-size:25px}.name-row input{padding:6px}.character-caption{left:72%;top:51%;width:140px}.character-caption b{font-size:14px}#hud .hud-left{top:102px;left:12px;width:175px!important}.hud-right{top:102px;right:12px;width:110px}#minimap{width:92px;height:92px}#tutorial{display:none}.hotbar{bottom:31px}.hotbar button{width:48px;height:48px;font-size:20px}.bottom-left{bottom:95px;left:12px}.bottom-right{bottom:95px;right:12px}.bottom-left button,.bottom-right button{font-size:8px;padding:8px}#touchAct,#touchAttack{bottom:170px}#stick{bottom:155px}#interaction{bottom:280px;max-width:90vw;min-width:240px}#toast{bottom:330px;max-width:90vw;width:300px}.cards,.phone-grid{grid-template-columns:repeat(2,1fr)}}

#lowHealth{position:fixed;top:12%;left:35%;color:var(--red-text);background:var(--plate);padding:10px;pointer-events:none}#damageDirection{position:fixed;left:50%;top:30%;color:var(--red);font-size:36px;pointer-events:none}#sickness{position:fixed;left:35%;top:18%;color:var(--storm);font:700 12px var(--font-head);pointer-events:none;text-transform:uppercase}
#inventory{width:min(920px,96vw)}.inventory-body{padding:18px}.inventory-top,.inventory-tabs,.inventory-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.inventory-top{justify-content:space-between;font:12px var(--font-body)}.inventory-tabs{margin:16px 0}.inventory-tabs button,.inventory-equipment button,.item-detail button{padding:10px}.inventory-tabs [aria-pressed=true]{border-color:var(--amber);background:var(--slate)}.inventory-layout{display:grid;grid-template-columns:2fr 1fr;gap:16px}.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px;align-content:start}.item-slot{min-height:94px;display:grid;padding:9px;border:2px solid var(--rarity);text-align:left}.item-slot i{font-size:25px;font-style:normal;color:var(--rarity)}.item-slot span{font-size:11px}.item-slot b{font:11px var(--font-num);font-variant-numeric:tabular-nums}.item-slot[aria-pressed=true]{background:var(--slate)}.item-detail{background:var(--iron);padding:15px;min-height:160px}.item-detail p,.inventory-equipment p{font-size:12px;line-height:1.6}.inventory-equipment h3{font-size:13px}.inventory-equipment{margin-top:16px;border-top:1px solid var(--slate);padding-top:10px}.inventory-tools button{min-height:44px}#inventoryButton{font-size:9px}@media(max-width:600px){.inventory-layout{grid-template-columns:1fr}.item-detail{min-height:100px}.slot-grid{grid-template-columns:repeat(3,1fr)}.inventory-body{padding:12px}}@media(max-height:500px){#inventory{max-height:96dvh}.inventory-body{padding:12px}.item-slot{min-height:72px}}
#orbitSurface{position:fixed;inset:0;touch-action:none;cursor:grab}#orbitSurface:active{cursor:grabbing}#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--ivory);font:24px var(--font-num);pointer-events:none;text-shadow:0 1px 3px var(--iron);font-variant-numeric:tabular-nums}#hud,#topbar,#title{z-index:2}#crosshair{z-index:1}@media(pointer:coarse){#orbitSurface{left:45%}#touchAttack{min-width:54px;min-height:54px}}
#pickupFeed{position:fixed;top:30%;right:210px;max-width:260px;font:12px var(--font-body);pointer-events:none}#pickupFeed div{background:var(--plate);padding:8px;margin:4px;border-left:2px solid currentColor}#carriedPanel{position:fixed;bottom:110px;left:25px;display:grid;gap:6px;background:var(--plate);padding:12px;font:10px var(--font-body);pointer-events:none}#summaryBody{padding:24px}#summaryBody h2{color:var(--brass)}.bank-reveal p{animation:bankReveal .5s both}@keyframes bankReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-height:650px){#pickupFeed{right:145px;top:22%;font-size:10px}#carriedPanel{left:125px;bottom:80px;max-width:165px;font-size:8px;padding:7px}}@media(max-width:600px){#carriedPanel{left:12px;bottom:265px;font-size:8px}#pickupFeed{right:12px;top:45%;font-size:9px;max-width:180px}}
#goalPanel{position:fixed;bottom:4px;left:50%;transform:translateX(-50%);width:min(560px,92vw);font:9px/12px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;pointer-events:none}#goalPanel progress{display:block;width:100%;height:3px;margin-top:2px}
html,body{overscroll-behavior:none;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#world,#low,#hud,#touch,#orbitSurface,button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}input,textarea,select,[contenteditable=true],.chat-log,.chat-log *{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default;touch-action:auto}.chat-log{cursor:text}dialog,.inventory-body,#phoneBody,#summaryBody{touch-action:pan-y;overscroll-behavior:contain}button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}#hud button,#phone button,#inventory button{min-height:36px}@media(pointer:coarse){#hud button,#phone button,#inventory button{min-height:44px}}
@media(pointer:coarse) and (max-height:600px){#tutorial{position:fixed;left:50%;top:53px;transform:translateX(-50%);width:215px;max-width:215px;margin:0;pointer-events:auto}#tutorial p{font-size:9px}.hotbar button{min-width:44px}#goalPanel{font-size:8px;line-height:10px;width:min(460px,92vw)}}
/* Compact landscape controls; desktop rules remain intact. */
.phone-landscape.game-playing #topbar,.phone-landscape #hud .hud-left,.phone-landscape .instance-button,.phone-landscape #hud .bottom-left,.phone-landscape #hud .bottom-right,.phone-landscape .hotbar,.phone-landscape #modeBadge,.phone-landscape #goalPanel,.phone-landscape #sickness{display:none!important}
.phone-landscape #hud .hud-right{top:var(--hud-gap);right:var(--hud-gap)}
.phone-landscape .map-wrap{width:var(--mini-size);height:var(--mini-size);padding:0;opacity:.55;background:rgb(var(--iron-rgb) / 0.47)}.phone-landscape #minimap{width:100%;height:100%}.phone-landscape .map-wrap span,.phone-landscape #mapButton{display:none}
.phone-landscape #touch{display:block}.phone-landscape #stick,.phone-landscape #touchAttack,.phone-landscape #touchAct,#bandButton{width:var(--control-size);height:var(--control-size);min-width:0;min-height:0;opacity:var(--control-opacity);padding:0;border-radius:50%;font-size:10px;touch-action:none;transition:opacity .15s}
.phone-landscape #stick{left:var(--hud-gap);bottom:var(--hud-gap)}.phone-landscape #stickKnob{width:40%;height:40%;left:30%;top:30%}.phone-landscape #touchAttack{right:var(--hud-gap);bottom:var(--hud-gap)}.phone-landscape #touchAct{right:calc(var(--hud-gap)*2 + var(--control-size));bottom:var(--hud-gap)}
#bandButton{position:fixed;z-index:12;left:calc(var(--hud-gap)*2 + var(--control-size));bottom:var(--hud-gap);color:var(--ivory);background:var(--plate);border:2px solid var(--slate);font-size:24px}
.phone-landscape.controls-idle #stick,.phone-landscape.controls-idle #touchAttack,.phone-landscape.controls-idle #touchAct,.phone-landscape.controls-idle #bandButton{opacity:var(--idle-opacity)}
#compactHud{position:fixed;z-index:10;top:var(--hud-gap);left:var(--hud-gap);width:var(--strip-width);height:var(--strip-height);font:11px var(--font-num);padding:4px;background:var(--plate);color:var(--ivory);pointer-events:none;font-variant-numeric:tabular-nums}
#questToast{position:fixed;top:calc(var(--status-bottom,calc(var(--strip-height) + var(--hud-gap))) + var(--hud-gap));left:var(--hud-gap);font-size:11px;pointer-events:none;background:var(--plate)}
.phone-landscape #carriedPanel{top:calc(var(--strip-height) + var(--hud-gap)*2);left:var(--hud-gap);right:auto;width:var(--carried-width);max-height:var(--carried-height);font-size:10px;overflow:hidden;padding:3px;opacity:.75}.phone-landscape #carriedPanel span{display:none}
.phone-landscape #interaction{bottom:calc(var(--control-size) + var(--hud-gap)*2);max-width:50%;font-size:11px}.phone-landscape #pickupFeed{top:auto;bottom:calc(var(--control-size) + var(--hud-gap)*2);font-size:10px;max-width:30%}
#quickWheel{position:fixed;z-index:80;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(3,minmax(60px,1fr));gap:6px;border:3px solid var(--brass);border-radius:var(--radius);background:var(--plate);padding:18px;max-width:300px}#quickWheel[hidden]{display:none}#quickWheel button{min-height:44px;font-size:12px;background:var(--iron);color:var(--ivory)}#quickWheel [data-dismiss]{grid-column:1/-1}
.phone-landscape #questToast{top:calc(var(--strip-height) + var(--carried-height) + var(--hud-gap)*3)}
.phone-landscape #interaction{width:300px;min-width:0;max-width:50%;height:24px}
#phone{border:7px solid var(--slate);border-radius:var(--radius);background:var(--iron);color:var(--ivory);box-shadow:inset 0 0 0 2px var(--brass)}#phone .phone-header{color:var(--brass);border-bottom:2px solid var(--slate)}#phone .phone-header:before{content:'♨';color:var(--brass)}#phone button{border-color:var(--slate);background:var(--iron);color:var(--ivory)}.band-tabs{display:flex;flex-wrap:wrap;gap:4px;position:sticky;top:0;z-index:1;background:var(--iron)}.band-tabs button{font-size:10px;padding:8px}#bandMap{display:block;width:min(100%,420px);height:auto;margin:auto}.map-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px}
#quickWheel{width:300px;height:300px;padding:0;display:block;border-radius:50%}#quickWheel button{position:absolute;left:50%;top:50%;width:66px;height:44px;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-112px) rotate(calc(-1 * var(--angle)));padding:2px}#quickWheel [data-dismiss]{width:44px;transform:translate(-50%,-50%)}
#omenToast{position:fixed;z-index:30;left:8px;top:100px;width:min(300px,42vw);padding:7px;background:var(--plate);border:1px solid var(--red);border-radius:var(--radius);text-align:left;color:var(--ivory);font-size:11px;touch-action:none}#omenToast b{display:block;color:var(--red-text);font-size:10px}#omenToast small{position:absolute;right:4px;top:2px}#omenToast[hidden]{display:none}
#zonePopup{position:fixed;left:8px;top:78px;background:var(--plate);color:var(--ivory);padding:4px 8px;font-size:12px;pointer-events:none;z-index:20}
#crosshair{width:var(--reticle-size);height:var(--reticle-size);border:1px solid var(--ivory);border-radius:50%;transform:translate(-50%,-50%);color:var(--ivory)}#crosshair i:after{content:'';position:absolute;left:50%;top:50%;width:3px;height:3px;background:currentColor;transform:translate(-50%,-50%)}#crosshair[data-weapon="scatter"]{border-style:dashed}#crosshair[data-state="enemy"]{border-color:var(--amber);color:var(--amber)}#crosshair[data-state="out-of-range"]{border-color:var(--ash);color:var(--ash)}#crosshair[data-state="cooldown"]{opacity:.4}#crosshair[data-hit="hit"]:after,#crosshair[data-hit="kill"]:after{content:'×';position:absolute;inset:-12px;text-align:center;font-size:28px;color:var(--ivory)}#crosshair[data-hit="kill"]:after{color:var(--red-text);content:'✕'}
#carriedPanel{pointer-events:auto;z-index:12}#carriedPanel button{font:inherit;padding:2px 4px;min-height:0;width:100%;background:none;border:0;text-align:left;color:var(--ivory)}.carried-list{display:none}#carriedPanel.expanded .carried-list{display:grid;gap:4px}#carriedPanel.expanded{max-height:50vh!important;overflow-y:auto!important;touch-action:pan-y}.phone-landscape #carriedPanel{bottom:auto}.phone-landscape #carriedPanel.expanded span{display:block}#bagFull{position:fixed;left:8px;top:78px;max-width:310px;padding:4px 8px;background:var(--plate);color:var(--ivory);font-size:10px;pointer-events:none;z-index:22}#bagFull b{display:inline-block;font-size:18px;margin-left:8px}
.loot-card{position:fixed;z-index:25;pointer-events:none;border:1px solid currentColor;border-radius:var(--radius);padding:8px;background:var(--plate);font:11px var(--font-body)}.loot-best{box-shadow:none;font-weight:bold}.loot-low{border-radius:3px;box-shadow:none}#skipLoot{position:fixed;right:8px;bottom:130px;z-index:26;font-size:10px;padding:5px}
/* A station is a compact task panel; the Band is a separate wrist-device shell. */
#phone{padding:0;overflow:hidden;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);width:min(720px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));}
#phone[open]{display:flex;flex-direction:column}#phone .phone-header{flex:none;position:static;padding:10px 14px;min-height:48px;background:var(--iron);color:var(--brass);letter-spacing:1px}#phone .phone-header:before{content:none}#phone #phoneBody{min-height:0;overflow-y:auto;overscroll-behavior:contain;flex:1;padding:16px;color:var(--ivory)}#phone #panelTabs{flex:none;min-width:0}#phone .band-tabs{flex-wrap:nowrap;overflow-x:auto;position:static;gap:0;background:var(--iron);scrollbar-width:thin;touch-action:pan-x}#phone .band-tabs button{min-height:44px;flex:1 0 auto;border:0;border-radius:0;padding:8px 14px;background:none;color:var(--ash);border-bottom:3px solid transparent}#phone .band-tabs button[aria-current=page]{color:var(--amber);background:var(--iron);border-bottom-color:var(--amber)}#phone[data-kind=band]{border-color:var(--slate);background:var(--iron)}#phone[data-kind=station],#phone[data-kind=utility]{border:2px solid var(--brass);border-radius:var(--radius);width:min(560px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));background:var(--iron)}#phone[data-kind=station] #panelTabs,#phone[data-kind=utility] #panelTabs{display:none}#phone[data-kind=station] h2{font-size:17px;margin:14px 0 8px}#phone .station-intro{margin-top:0;font-size:13px;line-height:1.5;color:var(--ivory)}.band-list{display:flex;flex-direction:column}.band-list button{display:flex;align-items:center;text-align:left;gap:12px;padding:14px;border:0!important;border-bottom:1px solid var(--slate)!important;border-radius:0;background:transparent!important;font-size:17px}.band-list button span{flex:1;font-size:14px}.band-description{font:12px var(--font-body)}#phone[data-kind=station] .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
#phone .band-tabs button{touch-action:pan-x}#phoneBody button{touch-action:pan-y}
/* Phone safe zones use the same rectangles as hud-layout.mjs and layout-debug. */
body{--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
.control-icon{display:none}body:not(.phone-touch) #compactHud{display:contents}body:not(.phone-touch) #compactVitals,body:not(.phone-touch) #compactHud>small{display:none}
.phone-touch.game-playing #topbar,.phone-touch #hud .hud-left,.phone-touch .desktop-band,.phone-touch #modeBadge,.phone-touch #goalPanel,.phone-touch #sickness,.phone-touch #pickupFeed,.phone-touch #zonePopup,.phone-touch #lowHealth,.phone-touch #damageDirection,.phone-touch #toast,.phone-touch #bagFull{display:none!important}
.phone-touch #hud .bottom-left,.phone-touch #hud .bottom-right,.phone-touch .hotbar{display:contents!important}.phone-touch .key-hint,.phone-touch .hotbar kbd,.phone-touch #instance{display:none!important}.phone-touch .control-icon{display:inline;font-size:23px}
.phone-touch #touch{display:block}.phone-touch #stick,.phone-touch #touchAct,.phone-touch #touchAttack,.phone-touch #emote,.phone-touch #inventoryButton,.phone-touch #bandButton{border-radius:50%;padding:0;opacity:var(--control-opacity);background:var(--plate);z-index:12;touch-action:none;transition:opacity .15s}.phone-touch #stick{background:rgb(var(--iron-rgb) / 0.31);border:1px solid rgb(var(--ivory-rgb) / .25)}.phone-touch #stickKnob{width:40%;height:40%;left:30%;top:30%;background:rgb(var(--amber-rgb) / 0.53)}.phone-touch #touchAct,.phone-touch #touchAttack{font-size:9px}.phone-touch.controls-idle #stick,.phone-touch.controls-idle #touchAct,.phone-touch.controls-idle #touchAttack,.phone-touch.controls-idle #emote,.phone-touch.controls-idle #inventoryButton,.phone-touch.controls-idle #bandButton{opacity:var(--idle-opacity)}
.phone-touch .hotbar button{padding:0;font-size:16px;line-height:1;opacity:var(--control-opacity);z-index:12;touch-action:none}.phone-touch .hotbar button span{font:700 9px/1 var(--font-head);letter-spacing:0;margin-top:1px;white-space:nowrap;overflow:hidden;max-width:100%}.phone-touch #haul{display:none}
.phone-touch #compactHud{display:flex;flex-direction:column;gap:0;padding:0 3px;font:10px var(--font-num);line-height:12px;background:var(--plate);pointer-events:auto;z-index:13;font-variant-numeric:tabular-nums}.phone-touch #compactHud>small{font:8px var(--font-body);line-height:10px;color:var(--ash)}.phone-touch #carriedPanel{position:static!important;inset:auto!important;width:100%!important;max-width:none!important;height:14px;max-height:none!important;margin:0;padding:0;background:none;opacity:1;font:9px var(--font-body);overflow:visible!important}.phone-touch #carriedPanel button{height:14px;line-height:14px;min-height:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phone-touch #carriedPanel.expanded{height:auto;display:flex;flex-direction:column-reverse}.phone-touch #carriedPanel.expanded .carried-list{display:grid;max-height:110px;overflow-y:auto;padding:8px;background:var(--iron);touch-action:pan-y}.phone-touch #carriedPanel.expanded span{display:block}.phone-touch #compactHud:has(.expanded){height:auto!important}.phone-touch #hudMessage{z-index:13;padding:2px 4px;border:0;border-radius:3px;font:9px/12px var(--font-body);overflow:hidden;text-align:left;background:var(--plate);color:var(--ivory)}.phone-touch #hudMessage[data-source=bagFull]{color:var(--ivory);background:var(--plate)}
.phone-touch .map-wrap{padding:0;opacity:.7;z-index:12;background:rgb(var(--iron-rgb) / 0.44);border:0;overflow:hidden}.phone-touch #minimap{width:100%;height:100%}.phone-touch #mapButton{display:block!important;position:absolute;left:auto;top:0;right:0;bottom:auto;width:24px;height:24px;min-height:0;min-width:0;padding:0;font:12px var(--font-body);background:var(--plate);z-index:1}
#orientationHint{position:fixed;left:8px;right:8px;bottom:8px;z-index:90;font:11px var(--font-body);padding:10px;background:var(--iron);color:var(--ivory)}#orientationHint[hidden]{display:none!important}.phone-touch #orientationHint{bottom:calc(50% + 80px);left:8px;right:auto;width:200px}
.phone-touch #skipLoot{top:calc(env(safe-area-inset-top) + 90px);left:8px;right:auto;bottom:auto;padding:3px;font-size:9px;z-index:26}.phone-touch .loot-card{max-width:190px;font-size:9px;padding:4px;border-radius:4px}
@media(orientation:portrait){.phone-touch dialog[open]{margin-top:auto;margin-bottom:calc(env(safe-area-inset-bottom) + 8px);max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)}.phone-touch #phone .phone-header{min-height:44px}.phone-touch #phoneBody{padding:12px}}
.reward-note{display:block;font:9px/1.4 var(--font-body);opacity:.85}.loot-card small{display:block;max-width:190px;font-size:8px}.item-slot small{font-size:8px}#summaryBody small{display:block}

/* Critic fixes: contained upward drawer, visible touch lock timing and config-driven geometry. */
.phone-touch #stickKnob{width:var(--knob-size);height:var(--knob-size);left:var(--knob-offset);top:var(--knob-offset)}
.phone-touch #mapButton{width:var(--map-button-size);height:var(--map-button-size)}
.phone-touch #carriedPanel,.phone-touch #carriedPanel button{height:var(--carried-line-height);line-height:var(--carried-line-height)}
.phone-touch #carriedPanel.expanded{height:auto;gap:0}.phone-touch #carriedPanel.expanded .carried-list{height:var(--carried-expanded-height);max-height:var(--carried-expanded-height);flex-shrink:0;padding:var(--hud-gap)}
.phone-touch #hudMessage .hud-lock-label{display:block;white-space:nowrap}.phone-touch #hudMessage .lock-track{height:var(--lock-track-height);margin:0;overflow:hidden}.phone-touch #hudMessage .lock-track b{top:0;height:100%;width:var(--lock-needle-width)}
.phone-touch:has(#carriedPanel.expanded) #skipLoot{display:none!important}.phone-touch #orientationHint{left:var(--hud-gap);width:var(--strip-width,200px);bottom:calc(50% + var(--hint-offset))}
.item-slot span{color:var(--rarity)}

.phone-touch #compactVitals{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Wasteland cycle UI: alerts occupy the reserved message lane on touch. */
.coin-headline{display:block;font:700 1.35em var(--font-num);font-variant-numeric:tabular-nums}.coin-row small,.coin-pickup small,.coin-loot small{display:block;font-size:.65em;color:var(--ash)}.coin-board-row{display:flex;justify-content:space-between;gap:1em;border-bottom:1px solid var(--slate);padding:.8em 0}.coin-loot{font-size:1.5em!important}.coin-board-row strong{color:inherit}.giga-announcement{color:var(--brass)!important}.carrying-coins>button{animation:carryPulse 2s ease-in-out infinite}@keyframes carryPulse{50%{filter:brightness(1.4)}}#stormWeather{position:fixed;inset:0;background:repeating-linear-gradient(115deg,rgb(var(--storm-rgb) / .16) 0,rgb(var(--storm-rgb) / .16) 2px,transparent 2px,transparent 12px) rgb(var(--storm-rgb) / .07);box-shadow:inset 0 0 0 4px rgb(var(--storm-rgb) / .45);pointer-events:none;z-index:4}#stormStatus{position:fixed;left:25px;top:72px;font:10px var(--font-num);color:var(--storm);pointer-events:none;font-variant-numeric:tabular-nums}#nuclearWarning{position:fixed;left:25px;top:90px;padding:8px;background:var(--plate);color:var(--ivory);pointer-events:none;z-index:14;font:700 14px var(--font-head);text-transform:uppercase}#nuclearWarning b,#nuclearWarning strong{font-size:32px}#nuclearWarning small{display:block}.title-cycle{position:fixed;left:50%;top:22px;transform:translateX(-50%);font:14px var(--font-num);color:var(--red-text);z-index:6;font-variant-numeric:tabular-nums}.phone-touch #nuclearWarning,.phone-touch #stormStatus{display:none!important}.phone-touch #hudMessage[data-source=nuclearWarning]{font-size:11px;display:flex;align-items:center;gap:5px;color:var(--ivory);background:var(--plate)}.phone-touch #hudMessage[data-source=nuclearWarning] strong,.phone-touch #hudMessage[data-source=nuclearWarning] b{font-size:24px;animation:carryPulse 1s infinite}.phone-touch #hudMessage[data-source=toast]{overflow-y:auto;touch-action:pan-y}.phone-touch #carriedPanel .coin-row{margin:3px 0}.phone-touch #carriedPanel .coin-headline{font-size:11px}.phone-touch #carriedPanel .coin-row small{font-size:8px}.phone-touch #hudMessage[data-source=toast]{font-size:9px;line-height:12px}#phoneBody .coin-board-row{color:inherit}.coin-pickup{font-size:15px}@media(prefers-reduced-motion:reduce){.carrying-coins>button,.phone-touch #hudMessage[data-source=nuclearWarning] strong,.phone-touch #hudMessage[data-source=nuclearWarning] b{animation:none}}

.carry-warning-body{padding:1.2em;line-height:1.6}.carry-warning-body button{display:block;padding:.8em;margin-top:1em}.carry-warning-body small{color:var(--ash)}#carryWarning{max-width:min(440px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 20px))}
#nuclearWarning b,#nuclearWarning strong{animation:carryPulse 1s infinite}@media(prefers-reduced-motion:reduce){#nuclearWarning b,#nuclearWarning strong{animation:none}}



#artPerformance{position:fixed;right:8px;top:82px;max-width:240px;margin:0;padding:6px;background:var(--plate);color:var(--ivory);font:10px/1.35 var(--font-num);z-index:30;pointer-events:none;white-space:pre-wrap;font-variant-numeric:tabular-nums}



.bank-section{border-left:3px solid var(--slate);padding:6px 12px;margin:12px 0}.bank-item small{display:block;color:var(--ash)}.wallet-address,.wallet-proof{overflow-wrap:anywhere;white-space:pre-wrap;font-size:12px}#walletAddress{width:100%;box-sizing:border-box}#phoneBody button:disabled{opacity:.5}

#featurePopup{position:fixed;left:var(--hud-gap,8px);top:calc(var(--hud-gap,8px)*2 + 36px);width:var(--hook-popup-width,220px);height:var(--hook-popup-height,30px);padding:2px 4px;border:1px solid var(--brass);background:var(--plate);color:var(--ivory);z-index:30;text-align:left;font:9px/12px var(--font-body);overflow:auto;touch-action:pan-y}#featureChips{display:flex;gap:var(--hook-chip-gap);height:var(--hook-chip-height);line-height:var(--hook-chip-height);font-size:9px;white-space:nowrap;overflow:hidden}#featureChips span{flex:1;overflow:hidden;text-overflow:ellipsis}.phone-touch #compactHud>small{display:none}.phone-touch #featurePopup{display:none!important}.phone-touch #hudMessage[data-source=featurePopup]{overflow-y:auto;touch-action:pan-y}.hooks-visible:not(.phone-touch) #featureChips{position:fixed;top:8px;left:8px;width:200px;z-index:15;background:var(--iron)}.hooks-visible.game-playing #nuclearWarning,.hooks-visible.game-playing #stormStatus{display:none}.feature-announcing #omenToast:not(.confirmation),.feature-announcing #toast,.feature-announcing #zonePopup,.feature-announcing #tutorial{display:none!important}

/* Locker uses an explicit menu; gameplay controls reuse existing phone rectangles. */
.locker-grid [hidden]{display:none}.locker-grid .picker-note{grid-column:1/-1;margin:0;font-size:12px;color:var(--ash)}.locker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.locker-grid label{text-transform:capitalize}.locker-grid select{width:100%}#lockerPreview{display:block;width:100%;height:var(--locker-height);border:1px solid var(--slate);border-radius:var(--radius)}.preset-row{display:flex;flex-wrap:wrap;gap:8px}.preset-row span{padding:5px;border:1px solid var(--slate)}#titleLocker{max-height:42vh;overflow:auto}#titleLocker h2,#titleLocker p{font-size:11px}#titleLocker .locker-grid{gap:3px}#titleLocker label{font-size:10px}#titleLocker select{font-size:11px;padding:4px}#titleLocker button{font-size:10px;padding:5px}#compactHud{position:relative}body.hurt-flash:after{content:'';position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 0 5px rgb(var(--red-rgb) / .7);z-index:20}@media(prefers-reduced-motion:reduce){body.hurt-flash:after{display:none}}

.low-post.hurt-flash:after{display:none}

/* chest reveal + loot feed + OMEN on phones */
#lootBig{position:fixed;z-index:40;left:50%;top:5%;transform:translateX(-50%);text-align:center;pointer-events:none;color:var(--green);padding:10px 22px;border:2px solid var(--green);border-radius:var(--radius);background:var(--plate);box-shadow:none;font-family:var(--font-body);max-width:80vw}
#lootBig[hidden]{display:none}#lootBig small{display:block;font-size:11px;letter-spacing:.2em;opacity:.9}#lootBig strong{display:block;font-size:clamp(22px,6vw,38px);line-height:1.1}#lootBig span{display:block;font-size:clamp(18px,4.5vw,28px);color:var(--ivory)}
#lootBig.pop{animation:lootpop 3.2s ease-out forwards}@keyframes lootpop{0%{transform:translateX(-50%) scale(.3);opacity:0}8%{transform:translateX(-50%) scale(1.18);opacity:1}16%{transform:translateX(-50%) scale(1)}85%{opacity:1}100%{transform:translateX(-50%) scale(1);opacity:0}}
#lootFeed{position:fixed;z-index:29;left:8px;top:calc(env(safe-area-inset-top) + 178px);display:grid;gap:3px;pointer-events:none;font:11px var(--font-body);max-width:min(260px,44vw)}
#lootFeed div{background:var(--plate);padding:4px 6px;border-left:3px solid currentColor;animation:feedin .25s ease-out}#lootFeed .big{font-size:13px;font-weight:700;box-shadow:none}@keyframes feedin{from{transform:translateX(-20px);opacity:0}}
.phone-touch #omenToast{top:calc(var(--status-bottom,116px) + 4px);width:min(260px,44vw);font-size:10px;padding:5px}
.phone-touch .loot-card{display:none!important}
@media (hover:none){html,body{touch-action:manipulation}}
#featurePopup{height:auto!important;max-height:84px;overflow:hidden}

#lockFill{height:14px;background:rgb(var(--iron-rgb) / 0.53);border:1px solid var(--rarity,var(--brass));border-radius:var(--radius);overflow:hidden;margin:6px 0}#lockFill i{display:block;height:100%;width:0;background:var(--rarity,var(--amber));box-shadow:none}#lockFill.done i{background:var(--ivory);box-shadow:none}#lockGame{border-color:var(--rarity,var(--brass))!important}#lockGame.ready{animation:holdReady .5s ease-in-out infinite alternate}#lockGame.ready span{color:var(--amber)}@keyframes holdReady{to{box-shadow:inset 0 0 0 2px var(--amber)}}
.phone-touch #interaction{position:fixed;left:50%;top:auto;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translateX(-50%);width:min(260px,40vw);min-width:0;max-width:none;z-index:31;pointer-events:none}
.phone-touch #interaction #prompt{display:none}
.phone-touch #lockGame{margin:0;padding:5px 8px;font-size:12px;font-weight:700;text-align:center;border:1px solid var(--brass)}
.phone-touch #lockGame .lock-track{height:10px;margin:0}.phone-touch #lockFill{margin:4px 0}
.phone-touch #hudMessage[data-source=featurePopup],.phone-touch #hudMessage[data-source=toast]{height:auto!important;max-height:62px;overflow:hidden}
#topbar .gfx-sep{display:none}
#phone .band-tabs button{padding:8px 9px;letter-spacing:0}
@media(max-width:900px){#phone .band-tabs button{padding:8px 7px;font-size:9.5px}}
#bandMap{width:min(100%,420px,calc(100dvh - 150px))}
#phoneBody label:has(input[type=range]){display:flex;align-items:center;gap:12px;font-size:12px;color:var(--ash);margin:6px 0}
#phoneBody label:has(input[type=range]) input{flex:1;max-width:260px}
#radHit{position:fixed;z-index:32;left:50%;top:calc(env(safe-area-inset-top) + 6px);transform:translateX(-50%);padding:4px 12px;border-radius:var(--radius);font:700 12px var(--font-head);letter-spacing:.04em;pointer-events:none;white-space:nowrap;text-transform:uppercase}
#radHit[hidden]{display:none}#radHit.draining{background:var(--plate);color:var(--storm);border:1px solid var(--storm);box-shadow:none;animation:radPulse 1.1s ease-in-out infinite}#radHit.immune{background:var(--plate);color:var(--ivory);border:1px solid var(--ash)}
#radHit b{font-size:14px}@keyframes radPulse{50%{box-shadow:inset 0 0 0 2px var(--storm)}}
#radVignette{position:fixed;inset:0;z-index:5;pointer-events:none;box-shadow:inset 0 0 0 6px rgb(var(--storm-rgb) / .55);animation:radEdge 1.1s ease-in-out infinite}#radVignette[hidden]{display:none}@keyframes radEdge{50%{box-shadow:inset 0 0 0 10px rgb(var(--storm-rgb) / .7)}}
.rad-suggest{animation:radSlot .9s ease-in-out infinite;border-color:var(--amber)!important}@keyframes radSlot{50%{box-shadow:0 0 0 3px var(--amber)}}
@media(prefers-reduced-motion:reduce){#radHit,#radVignette,.rad-suggest{animation:none}}

#mouseHint{position:fixed;left:50%;top:58%;transform:translateX(-50%);padding:6px 12px;border:1px solid var(--slate);border-radius:4px;background:var(--plate);color:var(--ivory);font:600 13px/1.2 var(--font-body);letter-spacing:.06em;pointer-events:none;z-index:5}
#vitalBars{display:flex;flex-direction:column;gap:2px;margin:2px 0 3px}#vitalBars i{display:block;height:5px;background:var(--iron);border:1px solid var(--slate);border-radius:2px;overflow:hidden}#vitalBars b{display:block;height:100%;width:100%;transition:width .2s}#hpBar b{background:var(--ivory)}#hpBar.low b{background:var(--red);animation:hpPulse .8s infinite alternate}#armorBar b{background:var(--ash)}#armorBar.preview b{opacity:.45}@keyframes hpPulse{to{opacity:.55}}
#itemAction.equipped{opacity:1;background:var(--iron);color:var(--amber);border-color:var(--amber);cursor:default}
progress.armour{accent-color:var(--ash)}progress.armour::-webkit-progress-value{background:var(--ash)}progress.armour::-moz-progress-bar{background:var(--ash)}
/* Desktop: the left column holds the stat panels, so OMEN speaks from the top centre instead of covering them. */
@media (pointer:fine) and (min-width:900px){#omenToast{left:50%;top:64px;transform:translateX(-50%);width:min(460px,42vw);font-size:12px;padding:8px 10px;text-align:center}#omenToast b{font-size:11px}}
/* Title caption sits over a bright floor: give it a dark plate so it always reads. */
.character-caption{padding:8px 16px 9px;background:var(--plate);border:1px solid var(--brass);border-radius:var(--radius);box-shadow:none}.character-caption span{color:var(--ash)}.character-caption b{color:var(--ivory);text-shadow:0 2px 0 rgb(var(--iron-rgb) / 0.53)}.character-caption small{color:var(--ivory)}
/* LIVE FINDS ledger (desktop panel) and ticker (phones). */
.finds-panel .find{margin:4px 0;color:var(--green);font-size:10px;line-height:1.3}.finds-panel .find.stock{font-weight:700;text-shadow:none}
.weapon-stats{width:100%;border-collapse:collapse;margin:6px 0;font-size:11px}.weapon-stats th{text-align:left;font-weight:400;color:var(--ash);padding:2px 4px}.weapon-stats td{text-align:right;padding:2px 4px}.weapon-stats td.up{color:var(--ivory)}.weapon-stats td.down{color:var(--ash)}
.shop-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px}.shop-tabs button{flex:1 1 auto;min-width:90px;padding:7px 10px;background:var(--iron);border:1px solid var(--slate);color:var(--ivory);border-radius:4px}.shop-tabs button.active{background:var(--amber);color:var(--iron);border-color:var(--amber);font-weight:700}.shop-group{grid-column:1/-1;margin:8px 0 2px;color:var(--brass);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
/* Carried value is the headline; the bag meter shows how many chests still fit. */
#carriedPanel button{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:8px;row-gap:3px}
#carriedPanel .carry-label{grid-column:1/-1;font-style:normal;font-size:9px;letter-spacing:.14em;color:var(--ash)}
#carriedPanel .carry-value{grid-column:1/-1;font:900 22px/1 var(--font-num);color:var(--green);text-shadow:0 2px 0 rgb(var(--iron-rgb) / 0.53);font-variant-numeric:tabular-nums}
#carriedPanel.carrying-coins .carry-value{color:var(--green)}
#carriedPanel .bag-meter{display:flex;gap:2px;align-self:center}#carriedPanel .bag-meter b{width:9px;height:9px;border:1px solid var(--slate);background:var(--iron);border-radius:2px}#carriedPanel .bag-meter b.on{background:var(--ivory);border-color:var(--ivory)}
#carriedPanel .bag-text{font-size:9px;color:var(--ash);white-space:nowrap}#carriedPanel button.bag-low .bag-text{color:var(--ivory)}#carriedPanel button.bag-full .bag-text{color:var(--brass);font-weight:700}
.phone-touch #carriedPanel .carry-value,.phone-landscape #carriedPanel .carry-value{font-size:16px}
/* OMEN hero: a big headline (dollars carried, nuke countdown) with one short line under it. */
#omenToast.hero{border-color:var(--red);box-shadow:none}#omenToast.hero strong{display:block;font:900 24px/1.1 var(--font-head);color:var(--ivory);margin:3px 0;text-transform:uppercase}#omenToast.hero em{display:block;font-style:normal}
#omenToast.urgent{border-color:var(--red);background:var(--plate)}#omenToast.urgent strong{color:var(--red)}
.phone-touch #omenToast.hero strong,.phone-landscape #omenToast.hero strong{font-size:17px}
/* Character pickers: ‹ value › that work with a tap or a click; the value itself still opens the full list. */
.picker{display:grid;gap:3px}.picker-name{font-size:10px;letter-spacing:.08em;color:var(--ash)}
.picker-row{display:grid;grid-template-columns:34px 1fr 34px;align-items:stretch;gap:3px}
.picker-step{min-height:32px;padding:0;font:900 18px/1 var(--font-body);background:var(--iron);border:1px solid var(--slate);color:var(--ivory);border-radius:4px;cursor:pointer;touch-action:manipulation}
.picker-step:hover{background:var(--slate)}.picker-step:active{background:var(--amber);color:var(--iron)}
.picker select{appearance:none;-webkit-appearance:none;text-align:center;text-align-last:center;min-height:32px;padding:0 4px;background:var(--iron);border:1px solid var(--slate);color:var(--ivory);border-radius:4px;font-weight:600;cursor:pointer}
/* One option per row: label on the left, ‹ value › on the right, so values are never cut off. */
.locker-grid{grid-template-columns:1fr!important;gap:4px!important}
.locker-grid .picker{grid-template-columns:minmax(64px,34%) 1fr;align-items:center;gap:6px}
.locker-grid .picker-row{grid-template-columns:30px 1fr 30px}
.locker-grid .picker-step,.locker-grid .picker select{min-height:28px}
.locker-grid .picker select{font-size:12px;min-width:0;text-overflow:ellipsis}
@media (max-height:500px),(max-width:700px){.locker-grid .picker{grid-template-columns:minmax(52px,30%) 1fr;gap:4px}.locker-grid .picker-row{grid-template-columns:24px 1fr 24px;gap:2px}.locker-grid .picker-step{font-size:14px}.locker-grid .picker select{font-size:11px;padding:0 2px}.picker-name{font-size:9px}}
.holder-card{border:1px solid var(--brass);border-radius:var(--radius);padding:10px 12px;margin:8px 0;background:var(--iron)}.holder-tier{font:900 20px/1 var(--font-head);color:var(--brass);margin:0 0 4px;text-transform:uppercase}.holder-balance{font-size:13px;color:var(--green);margin:0 0 6px}.holder-card ul{margin:4px 0 6px 16px;padding:0}.holder-next{font-size:11px;color:var(--ash)}.wallet-address{font:600 12px var(--font-num);color:var(--ivory);word-break:break-all;font-variant-numeric:tabular-nums}
.holder-tiers{width:100%;border-collapse:collapse;font-size:11px}.holder-tiers th,.holder-tiers td{text-align:left;padding:3px 4px;border-bottom:1px solid var(--slate)}.holder-tiers tr.current td{color:var(--brass);font-weight:700}.practice-balance{display:block;margin:8px 0;font-size:11px}
@media (pointer:fine) and (min-width:900px){#featurePopup{left:50%!important;right:auto!important;top:64px!important;transform:translateX(-50%);width:min(480px,42vw)!important;text-align:center}}

/* V.A.U.L.T.S. shares the station/Band shell and the Locker turntable. */
.vaults-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.vaults-heading h2{font-size:28px;letter-spacing:.08em;margin:4px 0}.vaults-heading small{color:var(--brass);letter-spacing:.12em}.vaults-heading p{margin:0;color:var(--ash)}.perk-available{display:grid;text-align:center;min-width:100px}.perk-available strong{font-size:36px;color:var(--brass)}.perk-available span,.perk-note{font-size:12px;color:var(--ash)}.vaults-layout{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(240px,1.5fr);gap:16px}.vaults-layout aside{min-width:0}#shopPreview{display:block;position:sticky;top:calc(-1 * var(--pad,12px));z-index:1;box-shadow:0 calc(-1 * var(--pad,12px)) 0 var(--iron);width:100%;margin:0 0 10px;border:1px solid var(--slate);border-radius:var(--radius);background:#173431}#phoneBody .card button.try-on:not(:disabled){min-height:40px;margin-top:0;background:transparent;border-color:var(--slate);color:var(--ivory);font-weight:400}#phoneBody .card button.try-on.trying{border-color:var(--ivory);background:var(--slate)}#perksPreview{display:block;width:100%;height:var(--locker-height,240px);border:1px solid var(--slate);border-radius:var(--radius)}.perk-allocation{font-size:12px;text-align:center}.vaults-rows{display:grid;gap:6px}.vaults-row{display:grid;grid-template-columns:34px minmax(0,1fr) 40px;gap:9px;align-items:center;padding:10px;background:var(--iron);border:1px solid var(--slate);border-radius:var(--radius)}.vaults-letter{font-weight:800;font-size:28px;color:var(--brass)}.vaults-skill h3{margin:0;font-size:15px}.vaults-skill p{font-size:12px;line-height:1.35;margin:3px 0 6px;color:var(--ash)}.vaults-row button{min-width:38px;min-height:38px;margin:0;padding:0;font-size:24px}.perk-pips{display:flex;gap:5px}.perk-pips i{display:block;width:18px;height:5px;background:var(--slate);border-radius:2px}.perk-pips .filled{background:var(--brass)}.perk-sources{border-top:1px solid var(--slate);margin-top:16px;padding-top:8px}.perk-sources p{line-height:1.5}.perk-progress-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.perk-progress{display:grid;grid-template-columns:1fr auto;gap:4px;font-size:12px}.perk-progress progress{grid-column:1/-1;width:100%;height:7px;accent-color:var(--brass)}.perk-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.perk-actions span{font-size:12px}@media(max-width:560px){.vaults-layout{grid-template-columns:1fr}.vaults-layout aside{max-width:220px;width:100%;justify-self:center}.perk-progress-grid{grid-template-columns:1fr}.vaults-heading h2{font-size:23px}}

/* Keep reward notifications clear of vitals/OMEN on the left and the right-hand map. */
#lootFeed{left:auto;right:calc(env(safe-area-inset-right) + 12px);top:calc(env(safe-area-inset-top) + 220px);max-width:min(260px,32vw)}
.phone-touch #lootFeed{top:calc(env(safe-area-inset-top) + 80px);max-width:min(220px,32vw);font-size:10px}
.phone-touch #lootFeed .big{font-size:11px}
#vitalBars{flex-shrink:0}#vitalBars i{flex-shrink:0}
body:not(.phone-touch) #vitalBars{display:none}
#armorBar{border-color:var(--slate)!important;background:var(--iron)!important}
#stashStatus{min-height:1.5em;color:var(--ivory)}#stashStatus[role=alert]{color:var(--red-text)}

.phone-touch #vitalBars{gap:1px;margin:1px 0}.phone-touch #vitalBars i{height:3px}.phone-touch #compactVitals{font-size:9px;line-height:10px}

/* One reward feed and a restrained location/extraction lane. */
#pickupFeed{display:none!important}#lootBig{top:12%;max-width:44vw;padding:6px 12px;box-shadow:none;border-width:1px}#lootBig strong{font-size:clamp(17px,3vw,26px)}
#fieldPolish{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 10px);transform:translateX(-50%);max-width:42vw;text-align:center;pointer-events:none;color:var(--ivory);text-shadow:0 2px 3px var(--iron);font:11px/1.4 var(--font-body);z-index:12}
#fieldPolish strong{display:block;letter-spacing:.15em;font-size:14px}#fieldPolish small{display:block;color:var(--ash)}#fieldPolish .cap-warning{color:var(--ivory);background:var(--plate);padding:4px;border-radius:4px}
.phone-touch #fieldPolish{top:8px;max-width:38vw;font-size:8px}.phone-touch #fieldPolish strong{font-size:10px}.phone-touch #lootBig{top:20%;max-width:38vw}.phone-touch #lootBig small{font-size:8px}
#phone button:disabled{cursor:default}#phone button:focus-visible{outline-offset:1px}

#health{accent-color:var(--ivory)}#armour{accent-color:var(--ash)}#lockFill{height:9px;border-radius:var(--radius);background:var(--iron)}#lockFill i{box-shadow:none}#lockGame{background:var(--plate);padding:9px 12px;border-radius:var(--radius);border:1px solid var(--slate)}#lockGame span{font:11px var(--font-body);letter-spacing:.06em}
/* Portrait phones reserve a separate row below vitals, then two notification columns. */
.phone-touch:not(.phone-landscape) #fieldPolish{top:calc(env(safe-area-inset-top) + 84px);left:12px;right:12px;transform:none;max-width:none}
.phone-touch:not(.phone-landscape) #omenToast{top:calc(var(--status-bottom,124px) + var(--hud-gap,8px));left:12px;transform:none;width:42vw}
.phone-touch:not(.phone-landscape) #lootFeed{top:calc(env(safe-area-inset-top) + 140px);max-width:42vw}
.phone-touch:not(.phone-landscape) #lootBig{top:32%;max-width:70vw}
@media(max-height:500px){body:not(.phone-touch) #lootBig{top:24%}}

/* One current outfit, with focused groups instead of a long preset editor. */
.outfit-heading h2{margin:12px 0 4px;font:700 17px var(--font-head)!important;color:var(--brass);text-transform:uppercase}.outfit-heading p{margin:0 0 12px;font-size:11px;color:var(--ash)}
.outfit-tabs{display:flex;gap:3px;margin:10px 0 12px}.outfit-tabs button{flex:1;min-width:0;padding:8px 3px!important;font:10px var(--font-body);border-color:var(--slate);background:var(--iron)}.outfit-tabs [aria-selected=true]{background:var(--amber);color:var(--iron);border-color:var(--amber)}
.outfit-actions{display:flex;gap:6px;margin-top:14px}.outfit-actions button{flex:1;padding:9px!important}.outfit-actions [data-look-apply]{background:var(--amber);color:var(--iron);font-weight:bold}.outfit-status{font-size:10px!important;line-height:1.4;min-height:2.8em;color:var(--ivory)}.outfit-unlocks{margin-top:12px}.outfit-unlocks summary{cursor:pointer;color:var(--ivory)}
#titleLocker{max-height:48vh}#creator{width:280px}#titleLocker .picker-name{letter-spacing:0}#titleLocker .picker select{padding:4px 2px}
@media(max-height:650px) and (orientation:landscape){#creator{width:230px;top:15%;max-height:79vh;overflow:auto}#titleLocker{max-height:none}.outfit-heading p{margin-bottom:5px}.outfit-heading h2{margin-top:5px}.outfit-tabs{margin:6px 0}.outfit-actions{margin-top:8px}}
@media(max-width:700px) and (orientation:portrait){#creator{width:calc(100% - 32px);box-sizing:border-box;left:16px;right:16px;bottom:40px;max-height:37vh;overflow:auto}#titleLocker{max-height:none}#creator .panel-heading{display:none}.character-caption{top:48%}.outfit-heading{display:none}.outfit-tabs{margin:8px 0}.outfit-actions{margin-top:8px}}
/* Consumable confirmations own the top-centre lane for a brief moment. */
#omenToast.confirmation{left:50%;right:auto;top:calc(env(safe-area-inset-top) + 64px);transform:translateX(-50%);width:min(340px,42vw);text-align:center;border-color:var(--slate);background:var(--plate);box-shadow:none;pointer-events:none}
#omenToast.confirmation strong{font-size:19px;color:var(--ivory)}#omenToast.confirmation em{font:11px var(--font-body);letter-spacing:.04em}#omenToast.confirmation small{display:none}
body.omen-confirming #fieldPolish,body.omen-confirming #lootBig{visibility:hidden}
.phone-touch #omenToast.confirmation{top:calc(env(safe-area-inset-top) + 8px);width:38vw;padding:5px}.phone-touch #omenToast.confirmation strong{font-size:13px}.phone-touch #omenToast.confirmation em{font-size:9px}
.phone-touch:not(.phone-landscape) #omenToast.confirmation{top:calc(env(safe-area-inset-top) + 84px);left:50%;width:calc(100vw - 32px)}
body.omen-confirming #radHit{top:calc(env(safe-area-inset-top) + 132px)}
.phone-landscape.omen-confirming #radHit{top:calc(env(safe-area-inset-top) + 76px)}

@media(max-width:760px) and (orientation:landscape){.phone-touch #omenToast.confirmation{left:calc(210px + (100vw - 310px)/2);width:calc(100vw - 326px);box-sizing:border-box}.phone-touch #omenToast.confirmation strong{font-size:11px}.phone-touch #omenToast.confirmation em{font-size:8px}}
.inventory-status{min-height:1.5em;margin:0 0 8px;font:12px var(--font-body);color:var(--ivory)}.inventory-equipment button.equipped{background:var(--iron);color:var(--amber);opacity:1}
/* A zone-entry warning, independent of optional OMEN tips and feature rotation. */
#pvpEntryWarning{position:fixed;z-index:44;left:50%;top:40%;transform:translate(-50%,-50%);width:min(680px,86vw);padding:22px 18px;box-sizing:border-box;text-align:center;pointer-events:none;background:var(--plate);border-top:2px solid var(--red);border-bottom:2px solid var(--red);text-shadow:none}
#pvpEntryWarning small{display:block;font:700 12px var(--font-head);letter-spacing:.32em;color:var(--red-text);text-transform:uppercase}#pvpEntryWarning strong{display:block;margin:5px 0 9px;font:900 clamp(30px,5vw,60px)/1.05 var(--font-head);letter-spacing:.07em;color:var(--red);text-transform:uppercase}#pvpEntryWarning span{display:block;font:700 clamp(12px,1.8vw,18px)/1.4 var(--font-body);color:var(--ivory)}#pvpEntryWarning em{display:block;margin-top:6px;font:12px var(--font-body);color:var(--ash);font-style:normal}
.pvp-entry-visible #zonePopup,.pvp-entry-visible #lootBig{visibility:hidden}
@media(max-height:500px){#pvpEntryWarning{top:37%;padding:9px 12px}#pvpEntryWarning strong{font-size:30px;margin:3px 0 5px}#pvpEntryWarning small,#pvpEntryWarning em{font-size:9px}}

/* Contextual door action remains readable when the other touch controls idle. */
.phone-touch #touchAct.gate-enter{background:var(--amber)!important;color:var(--iron);border:2px solid var(--amber);opacity:1;box-shadow:0 3px 0 var(--amber-lip);font-size:11px;font-weight:900}
.phone-touch #touchAct.gate-locked{opacity:1;font-size:9px;color:var(--red-text)}

/* Station family (UI simplify): one header, one hero, one primary action, details folded. */
#phone #phoneBody{--pad:16px}.phone-touch #phoneBody{--pad:12px}
.station-intro{margin:0 0 12px;font-size:13px;line-height:1.4;color:var(--ash);opacity:.9}
.panel-hero{margin:0 0 14px;display:grid;gap:2px}.panel-hero b{font:700 34px/1.1 var(--font-num);color:var(--ivory);letter-spacing:.5px;font-variant-numeric:tabular-nums}.panel-hero span{font-size:14px;color:var(--ash)}.panel-hero.is-small b{font-size:24px}
.panel-line{margin:0 0 10px;font-size:14px;line-height:1.45;color:var(--ivory)}.panel-line b{color:var(--ivory)}
.panel-details{margin:10px 0;border:1px solid var(--slate);border-radius:var(--radius);background:var(--iron);color:var(--ivory)}.panel-details>summary{display:flex;align-items:center;min-height:48px;padding:0 14px;cursor:pointer;font-weight:700;font-size:15px;color:var(--ivory);list-style:none;touch-action:manipulation}.panel-details>summary::-webkit-details-marker{display:none}.panel-details>summary:before{content:'▸';margin-right:10px;color:var(--brass);transition:transform .15s}.panel-details[open]>summary:before{transform:rotate(90deg)}.panel-details>:not(summary){margin-left:14px;margin-right:14px}.panel-details>:last-child:not(summary){margin-bottom:12px}.panel-details .bank-section{margin:8px 14px}.panel-details p{font-size:13px;line-height:1.45}
.panel-actions{position:sticky;bottom:calc(-1 * var(--pad));margin:14px calc(-1 * var(--pad)) calc(-1 * var(--pad));padding:10px var(--pad) var(--pad);background:var(--iron);display:grid;gap:8px}
#phone button.primary{width:100%;min-height:52px;padding:10px 14px;font:700 17px/1.2 var(--font-body);letter-spacing:.5px;background:var(--amber);color:var(--iron);border:2px solid var(--amber);border-radius:var(--radius)}#phone button.primary:hover{background:var(--amber)}#phone button.primary:disabled{opacity:.55;background:var(--slate);color:var(--ash)}
#phone .panel-secondary{display:flex;gap:8px}#phone .panel-secondary button,#phone button.secondary{flex:1;min-height:44px;padding:8px 12px;font-size:14px;border-radius:var(--radius);background:transparent;border:1px solid var(--slate);color:var(--ivory)}
.panel-note{margin:0;text-align:center;font-size:13px;line-height:1.4;color:var(--ash)}.panel-note b{color:var(--ivory)}
.panel-alert{margin:0 0 10px;padding:10px 12px;border:1px solid var(--red);border-radius:var(--radius);background:rgb(var(--red-rgb) / .12);color:var(--ivory);font-size:14px;line-height:1.4}.panel-status{margin:0 0 10px;padding:10px 12px;border:1px solid var(--slate);border-radius:var(--radius);background:var(--iron);color:var(--ivory);font-size:14px}
.panel-rows{display:grid;gap:8px;margin:0 0 10px}.panel-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 10px;background:var(--iron);border:1px solid var(--slate);border-radius:var(--radius);font-size:14px}.panel-row .grow{flex:1;min-width:0}.panel-row small{display:block;font-size:12px;color:var(--ash)}.panel-row .amt{font-weight:700;color:var(--ivory);white-space:nowrap}
.panel-steps{display:flex;gap:6px;margin:0 0 14px;padding:0;list-style:none}.panel-steps li{flex:1;display:flex;align-items:center;gap:6px;min-height:36px;padding:0 8px;border-radius:var(--radius);background:var(--iron);border:1px solid var(--slate);font-size:12px;color:var(--ash);white-space:nowrap}.panel-steps li b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:var(--radius);background:var(--slate);color:var(--ivory);font-size:11px}.panel-steps li.current{color:var(--amber);border-color:var(--amber)}.panel-steps li.current b{background:var(--amber);color:var(--iron)}.panel-steps li.done{color:var(--ash)}.panel-steps li.done b{background:var(--slate);color:var(--ivory)}
.wallet-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
#phoneBody .wallet-proof{margin:0 0 12px;padding:12px;font:12px/1.5 var(--font-num);white-space:pre-wrap;word-break:break-word;background:var(--iron);border:1px solid var(--slate);border-radius:var(--radius);color:var(--ivory);font-variant-numeric:tabular-nums}
#phoneBody label:has(#walletAddress){display:grid;gap:6px;font-size:13px;color:var(--ash);margin:0 0 10px}#walletAddress{min-height:44px;padding:8px 10px;font:14px var(--font-num);background:var(--iron);border:1px solid var(--slate);border-radius:var(--radius);color:var(--ivory);font-variant-numeric:tabular-nums}
.stash-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 6px}.stash-cols h3{margin:0 0 8px;font:700 13px var(--font-head);letter-spacing:1px;text-transform:uppercase;color:var(--brass)}.stash-cols section{display:grid;gap:8px;align-content:start}.stash-row{padding:6px 6px 6px 10px}.stash-row .grow b{display:block;font-size:14px;line-height:1.2}.stash-row button{flex:none;width:48px;min-height:48px;padding:0;font:700 22px var(--font-body);border-radius:var(--radius);background:var(--iron);border:1px solid var(--slate);color:var(--ivory)}.stash-row button:hover{background:var(--slate)}.stash-empty{margin:0;padding:14px 10px;border:1px dashed var(--slate);border-radius:var(--radius);color:var(--ash);font-size:13px;text-align:center}
#phoneBody .shop-tabs{gap:8px;margin:0 0 12px}#phoneBody .shop-tabs button{flex:1 1 auto;min-height:44px;padding:8px 10px;font-size:14px;border-radius:var(--radius)}#phoneBody .shop-tabs button.active{background:var(--amber);color:var(--iron);border-color:var(--amber);font-weight:700}
#phoneBody .card{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:var(--radius)}#phoneBody .card h3{margin:0;font-size:15px;line-height:1.25}#phoneBody .card p{margin:0;font-size:13px;line-height:1.4}#phoneBody .card button{margin-top:auto;min-height:48px;font-size:14px;border-radius:var(--radius);background:var(--iron);border:1px solid var(--slate)}#phoneBody .card button:not(:disabled){color:var(--amber);border-color:var(--amber)}
.shop-group{margin:0 0 10px}.shop-group .cards{margin:0 14px 12px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.shop-note{text-align:left;margin-top:12px}

/* Touch devices: the title screen flows and scrolls instead of stacking fixed boxes (fixes PLAY hidden behind the outfit panel in portrait, and the cut-off menu in landscape). */
@media(pointer:coarse){
 #title{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;gap:14px;padding:calc(64px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
 #title[hidden]{display:none}
 #title .title-left{position:static;width:auto;max-width:460px;top:auto;left:auto}
 #title .menu{width:auto;max-width:320px}#title .menu button{min-height:48px;height:auto;font-size:15px}
 #title .character-caption{position:static;left:auto;top:auto;width:auto;transform:none;margin:0}
 #title #creator{position:static;width:auto;max-width:460px;max-height:none;overflow:visible;box-sizing:border-box;padding:14px;top:auto;right:auto;bottom:auto;left:auto}
 #title #titleLocker{max-height:none}#title #creator .panel-heading{display:flex}
}
@media(pointer:coarse) and (orientation:landscape){
 #title{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:16px}
 #title .title-left,#title #creator{flex:1 1 300px;min-width:0}
 #title .character-caption{flex:1 1 100%;order:3}
}
#phone .app-link{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;font-size:14px;border-radius:var(--radius);border:1px solid var(--slate);color:var(--ivory);text-decoration:none;background:transparent}

/* Phone status block (UI simplify): vitals row, chips row, big CARRYING value, field message — one block top-left. */
.phone-touch #compactHud[hidden]{display:none!important}
.phone-touch #compactHud{display:flex!important;flex-direction:column;gap:3px;padding:5px 7px;box-sizing:border-box;overflow:hidden;background:var(--plate);border:1px solid var(--slate);border-radius:var(--radius);font:11px var(--font-num);line-height:13px;font-variant-numeric:tabular-nums}
.phone-touch #compactVitals{font-size:11px;line-height:13px;color:var(--ivory)}
.phone-touch #vitalBars{display:flex;flex-direction:row;gap:4px;margin:0}.phone-touch #vitalBars i{flex:1;height:4px}
.phone-touch #featureChips{height:14px;line-height:14px;font-size:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;color:var(--ivory);-webkit-overflow-scrolling:touch;touch-action:pan-x}.phone-touch #featureChips::-webkit-scrollbar{display:none}.phone-touch #featureChips span{flex:none;overflow:visible;text-overflow:clip;padding-right:10px}
.phone-touch #carriedPanel{height:auto!important;line-height:normal!important;font-size:10px}
.phone-touch #carriedPanel button{display:grid!important;grid-template-columns:auto 1fr auto;grid-template-areas:"label value meter" "label value text";align-items:center;column-gap:8px;row-gap:0;height:30px!important;line-height:normal!important;overflow:visible}
.phone-touch #carriedPanel .carry-label{grid-area:label;font-size:9px;letter-spacing:.12em;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--ash)}
.phone-touch #carriedPanel .carry-value{grid-area:value;font:900 22px/1 var(--font-num)!important;color:var(--green);text-shadow:0 2px 0 rgb(var(--iron-rgb) / 0.53);font-variant-numeric:tabular-nums}
.phone-touch #carriedPanel .bag-meter{grid-area:meter;justify-self:end}.phone-touch #carriedPanel .bag-meter b{width:8px;height:8px}
.phone-touch #carriedPanel .bag-text{grid-area:text;justify-self:end;font-size:9px}
.phone-touch #carriedPanel.expanded{flex-direction:column-reverse}
.phone-touch #hudMessage{position:static!important;width:auto!important;height:auto!important;min-height:0!important;max-height:40px;padding:3px 5px;font:600 11px/13px var(--font-body);color:var(--ivory);background:var(--iron);border-radius:4px;overflow:hidden;text-align:left}
.phone-touch #hudMessage[data-source=prompt]{color:var(--amber)}
.phone-touch #hudMessage[data-source=featurePopup],.phone-touch #hudMessage[data-source=toast]{max-height:40px}
.phone-touch #hudMessage[data-source=nuclearWarning]{font-size:12px}.phone-touch #hudMessage[data-source=nuclearWarning] strong,.phone-touch #hudMessage[data-source=nuclearWarning] b{font-size:18px}
/* Live finds ticker and OMEN readable on phones */
.phone-touch #omenToast{font-size:12px;line-height:1.35;width:min(300px,62vw);padding:7px 9px;top:calc(var(--status-bottom,116px) + 4px)}.phone-touch #omenToast b{font-size:10px}
.phone-touch #omenToast.hero strong,.phone-landscape #omenToast.hero strong{font-size:22px}.phone-touch #omenToast.hero em{font-size:12px}
/* ATTACK button hint: holding it aims (zooms) */
#touchAttack small{display:none}.phone-touch #touchAttack{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}.phone-touch #touchAttack small{display:block;font-size:8px;letter-spacing:.5px;opacity:.85;margin-top:2px}
.phone-touch #compactHud>*{flex:none}.phone-touch #compactHud #hudMessage{flex:0 1 auto;min-height:0!important}
.phone-touch #compactHud{gap:2px;padding:4px 7px}.phone-touch #carriedPanel button{height:28px!important}.phone-touch #carriedPanel .carry-value{font-size:21px!important}.phone-touch #compactHud #hudMessage{max-height:32px;line-height:13px}
.phone-touch #carriedPanel button{grid-template-columns:auto 1fr auto!important;grid-template-areas:"label value side"!important;height:34px!important;align-items:center}
.phone-touch #carriedPanel .bag-meter{grid-area:side;justify-self:end;align-self:end}.phone-touch #carriedPanel .bag-text{grid-area:side;justify-self:end;align-self:start;font-size:8px;line-height:9px}
.phone-touch #carriedPanel .carry-value{font-size:22px!important;line-height:1!important;align-self:center}
.phone-touch #compactHud #hudMessage{max-height:30px}
.phone-touch #carriedPanel .bag-text{display:none}.phone-touch #carriedPanel .bag-meter{align-self:center}.phone-touch #carriedPanel .bag-meter b{width:9px;height:9px}
.phone-touch:not(.phone-landscape) #radHit{top:calc(var(--status-bottom,146px) + 4px);left:auto;right:8px;transform:none;font-size:11px}
/* LIVE FINDS ledger. Desktop: right column under the minimap. Phones: its own reserved rectangle under the
   minimap (hud-layout.mjs `finds`, positioned by phone-hud.mjs), never touch-capturing. */
#biggest p.find{color:var(--green)}
.finds-panel .find.fresh{animation:findFresh 1.8s ease-out}
@keyframes findFresh{0%{background:rgb(var(--green-rgb) / .3)}100%{background:transparent}}
.phone-touch #biggest{display:block;margin:0;padding:3px 5px;overflow:hidden;pointer-events:none;z-index:12;background:var(--plate);border:1px solid var(--slate);border-radius:var(--radius);box-shadow:none}
.phone-touch #biggest .panel-heading{display:flex;justify-content:space-between;gap:4px;margin:0 0 2px;padding:0 0 2px;border-bottom:1px solid var(--slate);font-size:8px;line-height:10px;letter-spacing:.06em;color:var(--brass);white-space:nowrap}
.phone-touch #biggest p{margin:0;font-size:10px;line-height:12px;white-space:nowrap}
.phone-touch #biggest p.find{display:flex;gap:4px;justify-content:space-between}
.phone-touch #biggest .find .who{min-width:0;overflow:hidden;text-overflow:ellipsis}
.phone-touch #biggest .find b{flex:none;font-weight:700}
/* Own-pickup feed sits below the ledger on phones and below the whole right column on desktop (moved in loot-reveal.mjs). */
.phone-touch #lootFeed,.phone-touch:not(.phone-landscape) #lootFeed{top:calc(env(safe-area-inset-top) + 160px)}
body:not(.phone-touch) .hud-right #lootFeed{position:static;margin-top:10px;max-width:none;width:100%}
/* Connection banner (reconnect.mjs): top centre, above every other HUD layer. Only interactive when it offers a reload. */
#netBanner{position:fixed;z-index:80;left:50%;top:calc(env(safe-area-inset-top) + 6px);transform:translateX(-50%);max-width:min(380px,calc(100vw - 24px));padding:6px 12px;border:1px solid var(--slate);border-radius:var(--radius);background:var(--plate);color:var(--ivory);font:700 12px/1.3 var(--font-body);text-align:center;pointer-events:none;box-shadow:none}
#netBanner[hidden]{display:none}
#netBanner.lost{pointer-events:auto;cursor:pointer;border-color:var(--red);background:var(--plate);color:var(--red-text)}
.phone-touch #netBanner{font-size:11px;padding:4px 10px;max-width:min(360px,calc(100vw - 260px))}

/* In-raid notices never block play: they fade on their own and let touches and clicks through to the controls. */
#omenToast.hero,#omenToast.urgent,#bagFull{pointer-events:none}
#biggest p.kill{color:var(--red-text)}

/* Atomic Treasury type roles and component states (colours and fonts only; geometry is unchanged except the phone PLAY lip/height). */
html,body{font-weight:500}
button{font-weight:600}
#phoneBody h2,#phoneBody h3,#summaryBody h2,#summaryBody h3,.carry-warning-body h2,.carry-warning-body h3,.vaults-heading h2,.vaults-letter,.shop-group,#fieldPolish strong,#zonePopup,#omenToast b,#featureChips span{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
#phoneBody h2{color:var(--brass)}
#meters label b,#nuclearWarning b,#nuclearWarning strong,.phone-touch #hudMessage[data-source=nuclearWarning] strong,.phone-touch #hudMessage[data-source=nuclearWarning] b,.amt,.holder-balance,.perk-available strong,.weapon-stats td,.coin-board-row span,.chest-value strong,#biggest .find b,.bank-item strong,.bank-section h3,#lockGame span,.holder-tiers td,.panel-steps li b{font-family:var(--font-num);font-weight:600;font-variant-numeric:tabular-nums}
#meters label{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* Primary: solid amber, Blast Iron text, a darker lip that presses down. */
.primary,#phone button.primary,.outfit-actions [data-look-apply]{background:var(--amber);color:var(--iron);border-color:var(--amber);box-shadow:0 4px 0 var(--amber-lip)}
.primary:active,#phone button.primary:active,.outfit-actions [data-look-apply]:active{transform:translateY(4px);box-shadow:0 0 0 var(--amber-lip)}
#phone button.primary:disabled{background:var(--slate);border-color:var(--slate);color:var(--ash);box-shadow:none;transform:none}
@media(pointer:coarse){#title .menu .primary{min-height:52px}}
button:disabled{opacity:1;background:var(--iron);border-color:var(--slate);color:var(--ash)}
#phoneBody button:disabled{opacity:1}

/* Danger: nuke timer, OMEN, PvP, low health. A hard red edge on a solid plate, never a red wash behind text. */
#nuclearWarning{box-shadow:inset 0 0 0 2px var(--red)}
#nuclearWarning b,#nuclearWarning strong,.phone-touch #hudMessage[data-source=nuclearWarning] strong,.phone-touch #hudMessage[data-source=nuclearWarning] b{color:var(--red)}
.phone-touch #hudMessage[data-source=nuclearWarning]{box-shadow:inset 0 0 0 1px var(--red)}
.title-cycle{background:var(--plate);padding:2px 8px;border:1px solid var(--red);border-radius:var(--radius)}
#omenToast.urgent{box-shadow:inset 0 0 0 1px var(--red)}
#lowHealth{box-shadow:inset 0 0 0 1px var(--red)}
#radHit.draining{animation-name:radPulse}

/* Money: CARRYING, banked value, LIVE FINDS, wallet balances. */
.phone-touch #biggest .find:not(.kill) .who{color:var(--ivory)}
#biggest p.kill{color:var(--red-text)}
.coin-headline,.chest-value strong,.coin-board-row span,#lootFeed .big,#lootBig strong{color:var(--green)}
#lootBig small,#lootBig span{color:var(--ivory)}
.panel-hero:not(.is-small) b{color:var(--green)}
.panel-hero.is-count b{color:var(--ivory)}
.panel-hero.is-tier b{color:var(--brass);font-family:var(--font-head);font-weight:900;text-transform:uppercase}
.panel-hero.is-tier span{color:var(--green);font-family:var(--font-num)}
/* The Bank screen sets per-asset inline colours (bank-ui.mjs is left untouched); the money rule wins here. */
.bank-section{border-color:var(--slate)!important}
.bank-section h3,.bank-item{color:var(--green)!important}
.coin-board-row{color:var(--ivory)}
.coin-board-row.first strong{color:var(--brass)}
.ticker{color:var(--ivory)}
.ticker.stock{color:var(--brass)}

/* Feature chips and the field-events board: PvP and nuke are danger, boost is money, the rest is plain text. */
[data-feature]{color:var(--ivory)}
[data-feature=pvp],[data-feature=killfeed],[data-feature=nuke]{color:var(--red-text)}
[data-feature=boost]{color:var(--green)}

/* Map legend tones match the minimap rings (minimap.mjs / band.mjs read the same tokens). */
.map-legend [data-zone]{color:var(--ivory)}
.map-legend [data-zone="1"],.map-legend [data-zone="2"]{color:var(--ash)}
.map-legend [data-zone="3"]{color:var(--brass)}
.map-legend .storm{color:var(--storm)}

/* Text drawn straight onto the 3D scene gets a hard 1px Blast Iron outline (no blur) so it reads on marble and wasteland. */
.brandmark,.eyebrow,.tagline,.fine,#modeBadge,#stormStatus,#fieldPolish,#crosshair,#damageDirection,#sickness,#goalPanel,#interaction #prompt{text-shadow:var(--outline)}
.fine{color:var(--ivory)}
#interaction #prompt{background:var(--plate)}

/* Meters: the nuclear cycle is the nuke timer (danger), health is plain ivory until LOW HEALTH, armour ash. */
progress::-moz-progress-bar{background:var(--brass)}
#rad{accent-color:var(--red)}
#rad::-webkit-progress-value{background:var(--red)}
#rad::-moz-progress-bar{background:var(--red)}
#health::-webkit-progress-value{background:var(--ivory)}
#health::-moz-progress-bar{background:var(--ivory)}
#radText{color:var(--red-text)}

/* Small red text needs solid iron behind it: --red-text is 4.87:1 on iron but only ~3.9:1 on a 92% plate over white marble.
   Danger popups are fully opaque; inside the 92% HUD plates the red label itself sits on a solid iron strip. */
#omenToast,#omenToast.hero,#omenToast.urgent,.title-cycle,#lowHealth,#pvpEntryWarning,#netBanner.lost,#nuclearWarning,.phone-touch #hudMessage[data-source=nuclearWarning],.phone-touch #touchAct.gate-locked{background:var(--iron)}
#omenToast.confirmation{background:var(--plate)}
#biggest p.kill,[data-feature=pvp],[data-feature=killfeed],[data-feature=nuke],#radText{background:var(--iron)}

/* Disabled reads as disabled inside panels too: ash text on iron, no amber. */
#phone button:disabled,#inventory button:disabled,#title button:disabled{color:var(--ash);border-color:var(--slate);background:var(--iron)}

/* Start screen, left column: the pre-restyle treatment reads better over the plaza (owner's call, 15 Oct): a dark wash
   behind the title, a wide heavy title face and a bright BUNKER. The right-hand survivor panel keeps the new style. */
body:has(#title:not([hidden])) .vignette{box-shadow:inset 0 0 170px rgb(var(--iron-rgb) / .53);background:linear-gradient(90deg,rgb(var(--iron-rgb) / .64),transparent 44%,rgb(var(--iron-rgb) / .26))}
#title h1{font-family:var(--font-num);font-weight:600;text-transform:none;letter-spacing:1px}
#title h1 span{color:var(--amber)}
#title .eyebrow{color:var(--ivory)}

/* Phone raid HUD: one horizontal money row, "BAG $4.60" with the bag slots on the right (desktop keeps CARRYING). */
.carry-short{display:none}
.phone-touch #carriedPanel .carry-long{display:none}
.phone-touch #carriedPanel .carry-short{display:inline}
.phone-touch #carriedPanel button{grid-template-columns:auto auto 1fr!important;grid-template-areas:"label value side"!important;height:24px!important;column-gap:7px;align-items:center}
.phone-touch #carriedPanel .carry-label{writing-mode:horizontal-tb;transform:none;align-self:center;font:700 12px/1 var(--font-head);letter-spacing:.1em;color:var(--ash)}
.phone-touch #carriedPanel .carry-value{font-size:19px!important;font-weight:600}
.phone-touch #compactHud #hudMessage{max-height:40px}
.phone-touch #compactHud #hudMessage:not([data-source=nuclearWarning]){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;max-height:none}

/* Top hero bar: Bunker Bits, bag value and banked value in one slim pill, centred under the notch. */
#heroBar{position:fixed;z-index:14;left:50%;top:calc(env(safe-area-inset-top) + 6px);transform:translateX(-50%);display:flex;align-items:center;gap:0;padding:3px 4px;border:1px solid var(--slate);border-radius:999px;background:color-mix(in srgb,var(--plate) 88%,transparent);backdrop-filter:blur(4px);pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums}
#heroBar[hidden]{display:none}body:has(#omenToast:not([hidden])) #orientationHint{display:none!important}.phone-touch #heroBar{justify-content:center;box-sizing:border-box;overflow:hidden;white-space:nowrap}
#heroBar .hero-stat{display:flex;align-items:baseline;gap:5px;padding:0 10px}
#heroBar .hero-stat+.hero-stat{border-left:1px solid var(--slate)}
#heroBar em{font:700 8px/1 var(--font-head);font-style:normal;letter-spacing:.14em;color:var(--ash)}
#heroBar b{font:800 14px/1 var(--font-num);color:var(--ivory)}
#heroBar #heroBits b{color:var(--amber)}
#heroBar #heroBag b{color:var(--ash)}#heroBar #heroBag.on b{color:var(--green)}
#heroBar #heroBank b{color:var(--brass)}
@media (max-width:480px){#heroBar .hero-stat{padding:0 7px;gap:4px}#heroBar b{font-size:13px}#heroBar em{font-size:7px}}
/* The old top-left strip no longer repeats the bag dollars, and centred notices sit below the pill. */
.phone-touch #compactHud #carriedPanel .carry-value{display:none!important}
#radHit{top:calc(env(safe-area-inset-top) + 38px)}
.title-cycle{top:calc(env(safe-area-inset-top) + 42px)}

/* Short landscape phones (roundtable): previews beside their controls, no floating footer over content, whole map in view. */
@media (orientation:landscape) and (max-height:500px){
#phoneBody:has(> #lockerPreview),#phoneBody:has(> #shopPreview){display:grid;grid-template-columns:minmax(160px,36%) minmax(0,1fr);column-gap:12px;row-gap:0;align-content:start}
#phoneBody:has(> #lockerPreview)>*,#phoneBody:has(> #shopPreview)>*{grid-column:2;min-width:0}
#phoneBody>#lockerPreview,#phoneBody>#shopPreview{grid-column:1;grid-row:1/span 60;position:sticky;top:0;align-self:start;margin:0;box-shadow:none}
.panel-actions{position:static}
#bandMap{width:max(160px,min(100%,420px,calc(100dvh - 210px)))}
}

/* DOOM contract address chip: tap to copy (owner, 16 Oct). */
.ca-chip code{font:600 11px var(--font-num);padding:1px 6px;margin-left:2px;background:var(--iron);border:1px dashed var(--slate);border-radius:var(--radius);user-select:all;-webkit-user-select:all}

/* PLAY while the game is still loading (boot.mjs remembers an early tap). */
#play.is-loading{opacity:.75;cursor:progress}

/* DOOM holder withdrawal limit: without vs with DOOM, side by side (doom-limit-ui.mjs). */
.doom-limit{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.doom-limit-col{display:grid;gap:1px;padding:8px 10px;background:var(--iron);border:1px solid var(--slate);border-radius:var(--radius);min-width:0}
.doom-limit-col small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.doom-limit-col b{font:700 26px/1.1 var(--font-num);color:var(--ivory);font-variant-numeric:tabular-nums}
.doom-limit-col span{font-size:12px;color:var(--ash)}
.doom-limit-col.is-doom{border-color:var(--amber);background:rgba(var(--amber-rgb),.12)}
.doom-limit-col.is-doom b,.doom-limit-col.is-doom small{color:var(--amber)}
.doom-limit-col.is-on{box-shadow:inset 0 0 0 1px currentColor}
.doom-limit-col.is-doom.is-on{box-shadow:inset 0 0 0 1px var(--amber)}
.doom-limit-col:not(.is-doom).is-on b{color:var(--ivory)}
.doom-limit-title{grid-column:1/-1;margin:0;font:700 12px var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.doom-limit-note{grid-column:1/-1;margin:0;font-size:13px;color:var(--ash)}
.doom-limit-note b{color:var(--ivory)}

/* Raid report: chest loot over the hourly banking limit (coin-ui.mjs bankLimitHTML). */
.bank-limit-alert{display:grid;gap:4px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--red);border-radius:var(--radius);background:rgba(var(--red-rgb),.14)}
.bank-limit-alert b:first-child{font:700 15px var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--red-text)}
.bank-limit-alert p{margin:0;font-size:14px;color:var(--ivory)}

/* Payouts running / paused line on Bank and Withdraw (payout-status.mjs). */
.payout-status{display:grid;gap:2px;margin:0 0 10px;font-size:13px;color:var(--ash)}
.payout-status b{display:flex;align-items:center;gap:6px;font:700 13px var(--font-head);letter-spacing:.06em;text-transform:uppercase;color:var(--ivory)}
.payout-status i{width:8px;height:8px;border-radius:50%;background:var(--ash)}
.payout-status.is-running i{background:var(--green)}
.payout-status.is-paused i{background:var(--amber)}

/* Capture camera (opt-in with ?capture, see capture-camera.mjs). Interface hidden for trailer footage; atmosphere remains in the canvas. */
#captureBars,#captureNote{display:none}
body.capture-bars #captureBars{display:block;position:fixed;inset:0;pointer-events:none;z-index:40;--bar:max(0px,calc((100vh - 100vw / 2.39) / 2));border-block:var(--bar) solid var(--iron)}
#captureNote{position:fixed;left:50%;bottom:14%;transform:translateX(-50%);padding:6px 14px;background:var(--plate);color:var(--ivory);font:600 14px var(--font-num);letter-spacing:.08em;text-transform:uppercase;border-radius:var(--radius);pointer-events:none;opacity:0;z-index:41;transition:opacity .25s}
#captureNote.show{display:block;opacity:1}
body.capture-clean #topbar,body.capture-clean #hud,body.capture-clean #touch,body.capture-clean #crosshair,body.capture-clean #mouseHint,body.capture-clean #goalPanel,body.capture-clean #pickupFeed,body.capture-clean #carriedPanel,body.capture-clean #lowHealth,body.capture-clean #damageDirection,body.capture-clean #stormStatus,body.capture-clean #stormWeather,body.capture-clean #zonePopup,body.capture-clean #toast,body.capture-clean #modeBadge,body.capture-clean #carryWarning,body.capture-clean #netBanner,body.capture-clean #tutorial,body.capture-clean #nuclearWarning,body.capture-clean #interaction,body.capture-clean #prompt{display:none!important}
body.capture-clean{cursor:none}

/* Canvas treatment is included in F6 captures; avoid a second DOM vignette. */
.vignette{display:none}


/* Trailer presentation: scoped to title/assignment and the expedition result.
   Station and Store styles deliberately keep their existing selectors. */
body:has(#title:not([hidden])) .vignette{display:block}
#title h1{font-family:var(--font-head);font-weight:900;font-size:clamp(52px,6.4vw,96px);line-height:.88;letter-spacing:.015em;text-shadow:0 3px 0 var(--iron)}
#title .eyebrow{font:600 10px/1.6 var(--font-num);letter-spacing:.12em;max-width:32em}
#title .tagline{max-width:25em;text-shadow:0 2px 8px var(--iron)}
#title #creator{border-top:3px solid var(--brass);background:linear-gradient(145deg,rgb(var(--iron-rgb) / .98),rgb(var(--iron-rgb) / .88));box-shadow:0 16px 50px rgb(var(--iron-rgb) / .32)}
#title #creator .status-note{display:flex;border-top:1px solid var(--brass);min-height:40px;letter-spacing:.1em}
#bunkerAssignment{border:1px solid var(--slate);padding:5px 7px;white-space:nowrap}
#raidSummary{width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 32px);border-top:4px solid var(--brass);box-shadow:0 24px 80px rgb(var(--iron-rgb) / .65);overflow-y:auto;overscroll-behavior:contain}
#raidSummary[data-result=extracted]{border-top-color:var(--green)}
#raidSummary[data-result=nuked],#raidSummary[data-result=died]{border-top-color:var(--red)}
#raidSummary #summaryBody{padding:22px 24px}
#raidSummary h2{font:900 clamp(32px,5vw,54px)/1 var(--font-head);letter-spacing:.02em;margin:0 0 16px;overflow-wrap:anywhere;color:var(--ivory)}
#raidSummary[data-result=extracted] h2{color:var(--green)}
#raidSummary #summaryBody>p{font:500 16px/1.6 var(--font-body);margin:10px 0;color:var(--ivory)}
#raidSummary h3{font:700 17px var(--font-head);border-top:1px solid var(--slate);padding-top:18px;margin-top:22px;letter-spacing:.08em;text-transform:uppercase}
#raidSummary .panel-actions{--pad:16px;position:sticky;bottom:0;margin:0;padding:12px 24px;border-top:1px solid var(--slate)}
#raidSummary #shareRaid{min-height:44px;font:700 16px var(--font-head);letter-spacing:.06em}
@media(orientation:portrait) and (max-width:700px){
 #title{position:fixed;inset:0;display:flex;flex-direction:column;gap:20px;padding:calc(76px + env(safe-area-inset-top)) 20px calc(42px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
 #title[hidden]{display:none}
 #title .title-left{position:static;width:100%;max-width:none}
 #title h1{font-size:clamp(56px,17vw,86px);margin:18px 0}
 #title .eyebrow{font-size:12px;letter-spacing:.04em}
 #title .tagline{font-size:14px;line-height:1.5}
 #title .menu{width:100%;max-width:none;grid-template-columns:1fr 1fr;gap:8px}
 #title .menu .primary{grid-column:1/-1;min-height:54px;font-size:22px}
 #title .menu button{min-height:44px;padding:10px 12px;font-size:12px}
 #title .menu button:last-child{grid-column:1/-1}
 #title .fine{margin:18px 0 0;font-size:12px;line-height:1.5}
 #title .character-caption{position:static;transform:none;width:auto;margin:0;gap:4px;align-self:flex-end;text-align:right}
 #title #creator{position:static;inset:auto;width:100%;max-width:none;max-height:none;overflow:visible;padding:14px}
 #title #titleLocker{max-height:none}
 #title #creator .panel-heading{display:flex}
 #raidSummary{margin:auto;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)}
 #raidSummary #summaryBody{padding:18px 16px}
 #raidSummary .phone-header{padding:12px 16px;min-height:48px}
 #raidSummary .panel-actions{padding:10px 16px}
 #raidSummary .coin-row{min-width:0;flex-wrap:wrap}
 body.capture-clean #raidSummary,body.capture-clean #titleCycle{display:none!important}
}
body.capture-clean #raidSummary{display:none!important}

/* Clean capture includes HUD widgets added after the original camera feature. */
body.capture-clean #heroBar,body.capture-clean #compactHud,body.capture-clean #featureChips,body.capture-clean #featurePopup,body.capture-clean #omenToast,body.capture-clean #bandButton,body.capture-clean #orientationHint,body.capture-clean #fieldPolish,body.capture-clean #pvpEntryWarning,body.capture-clean #lootBig,body.capture-clean #lootFeed,body.capture-clean #skipLoot,body.capture-clean .loot-card,body.capture-clean #quickWheel,body.capture-clean #titleCycle{display:none!important}
@media(orientation:portrait) and (max-width:700px){
 body:has(#title:not([hidden])) .vignette{background:linear-gradient(180deg,rgb(var(--iron-rgb) / .94) 0%,rgb(var(--iron-rgb) / .88) 43%,rgb(var(--iron-rgb) / .35) 76%,rgb(var(--iron-rgb) / .65));box-shadow:none}
}

/* Portrait header reserves a row for a configured contract address. */
@media (orientation:portrait) and (max-width:700px){
 #topbar{top:calc(env(safe-area-inset-top) + 10px);left:16px;right:16px;display:grid;grid-template-columns:minmax(0,1fr) repeat(3,40px);grid-auto-rows:44px;gap:8px 6px;z-index:6;background:var(--iron)}
 #topbar .brandmark{grid-column:1;grid-row:1;justify-self:start;font-size:24px;white-space:nowrap}
 #topbar .chips{display:contents}
 #topbar .chips button{min-width:0;min-height:44px;padding:8px}
 #topbar [data-act=wallet]{grid-column:2;grid-row:1}
 #topbar #mute{grid-column:3;grid-row:1;white-space:nowrap;font-size:10px;padding:8px 3px}
 #topbar [data-page=Settings]{grid-column:4;grid-row:1}
 #topbar .ca-chip{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:8px;width:100%;overflow:hidden;font-size:12px;text-align:left}
 #topbar .ca-chip code{display:block;flex:1;min-width:0;margin:0;padding:4px 6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #topbar .ca-chip>span{display:inline;flex:none}
 .title-cycle{left:80px;top:calc(env(safe-area-inset-top) + 22px);transform:none;font-size:12px;z-index:7}
 body:has(#topbar .ca-chip:not([hidden])) #title{padding-top:calc(124px + env(safe-area-inset-top))}
}