/* Generated by build.mjs from dist/css/*.css. Edit those files. */
/* Page base and screens not yet on the UI kit (loading, map editor, AI lab,
   enemy cues, cast bar). */
@import url("fonts.css");
:root{color-scheme:dark;--ink:#e4e6d7;--muted:#a0ad9e;--gold:#e3b570}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111a1c;font-family:Arial,'Noto Sans',sans-serif;color:var(--ink)}
#game{display:block;width:100%;height:100%;outline:0}
button{font:inherit;cursor:pointer}
#interface{position:absolute;inset:0;pointer-events:none}
#interface button,#interface input{pointer-events:auto}
#error{position:absolute;inset:15%;padding:35px;background:#321e24;color:#fff;white-space:pre-wrap;overflow:auto}
.review-bar{position:absolute;left:28px;top:25px;padding:20px 24px;max-width:410px;background:#102021eB;border:1px solid #c1bea22c;border-radius:6px;box-shadow:0 12px 36px #0003}
.eyebrow{font:11px monospace;letter-spacing:3px;color:var(--gold);text-transform:uppercase}
.review-bar h1{font-size:25px;margin:10px 0 7px}
.review-bar p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}
.review-controls{position:absolute;left:28px;bottom:26px;display:flex;gap:8px;flex-wrap:wrap;max-width:90vw}
.review-controls button{border:1px solid #adbcaa55;background:#152b2bea;color:var(--ink);padding:11px 18px;border-radius:4px;font-size:13px}
.review-controls button.active{color:#172320;background:var(--gold)}
.review-note{position:absolute;right:28px;bottom:26px;background:#102021df;padding:11px 18px;font-size:12px;color:var(--muted);border-radius:4px}
.map-label{position:absolute;background:#132a2bcf;border-left:2px solid var(--gold);padding:5px 9px;color:var(--ink);font-size:11px;white-space:nowrap;pointer-events:none;transform:translate(-50%,-100%)}
.stage-label{margin-top:10px!important;color:#d6be8b!important}
.map-selector{position:absolute;right:28px;top:25px;display:flex;gap:8px}
.map-selector button{border:1px solid #adbcaa55;background:#152b2bf2;color:var(--ink);padding:12px 18px;border-radius:4px;font-size:13px}
.map-selector button.active{border-color:var(--gold);color:var(--gold)}
.review-note{bottom:88px}
.minimal .review-bar,.minimal .review-note{display:none}
@media(max-width:900px){.review-bar{max-width:340px;top:76px}.map-selector{left:28px;right:auto}.review-controls{max-width:calc(100vw - 56px)}.review-controls button{padding:9px 12px}.review-note{display:none}}
.walking .review-bar,.walking .review-controls,.walking .review-note{display:none}
.map-selector{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 490px)}
@media(max-width:1050px){.map-selector{max-width:calc(100vw - 56px)}.review-bar{top:84px}}
.enemy-cues{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.enemy-cue{position:absolute;transform:translate(-50%,-100%);color:#d3d3b6;text-align:center;font-size:10px;text-shadow:0 1px 3px #000;background:#142421b0;padding:3px 7px;border-radius:4px;min-width:62px}
.enemy-cue[hidden]{display:none}
.enemy-cue b{display:block;font-size:18px;line-height:18px;color:#c4ccae}
.enemy-cue span{white-space:nowrap}
.enemy-cue i{display:block;height:3px;background:#172424;margin:4px 0 1px;border-radius:2px;overflow:hidden}
.enemy-cue em{display:block;height:100%;background:#e0bc66}
.enemy-cue.suspicious b{color:#efc867}
.enemy-cue.alert b{color:#f07a59}
.enemy-cue.alert em{background:#ed7354}
.map-selector{z-index:3}
.enemy-cues{z-index:1}
@media(max-width:650px){.model-only .review-bar{left:12px;right:12px;top:84px;max-width:none;padding:7px 12px;background:#102021c9}.model-only .review-bar .eyebrow,.model-only .review-bar p:not(.stage-label){display:none}.model-only .review-bar h1{font-size:16px;margin:0 0 3px}.model-only .review-bar .stage-label{font-size:10px;margin-top:0!important}.model-only .map-selector{left:12px;right:12px;top:10px;max-width:none;justify-content:flex-start;gap:5px}.model-only .map-selector button{padding:8px 10px;font-size:11px}.model-only .review-controls{left:12px;right:12px;bottom:12px;max-width:none;gap:5px}.model-only .review-controls button{font-size:11px;padding:8px 9px}}
@media(max-width:650px){.walking .map-selector{left:12px;right:12px;top:10px;max-width:none;justify-content:flex-start;gap:5px}.walking .map-selector button{padding:8px 10px;font-size:11px}}
.damage-direction{position:absolute;z-index:5;pointer-events:none;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:16px solid #e98769}
.corpse-warning{font-size:12px;color:#d6a381;line-height:1.8}
.walking .map-selector [data-map],.walking .map-selector #walk-toggle{display:none}
.base-warning{color:#dda580;font-size:12px}
.mobile-item-actions{display:none}
@media(max-width:620px){.mobile-item-actions{display:block;width:100%;border-top:1px solid #778969;padding:6px 0}.mobile-item-actions strong{font-size:12px;color:#e7deb1}.mobile-item-actions>div{display:flex;overflow-x:auto;gap:5px;padding:6px 0}.mobile-item-actions button{max-width:none;white-space:nowrap;font-size:11px;padding:6px 9px;flex-shrink:0}.mobile-item-actions small{font-size:10px;display:block;line-height:1.5}}
@media(max-width:620px){.mobile-item-actions small{max-height:30px;overflow:auto}}
@media(max-width:650px){.walking .review-bar{display:none}}
.recovery-banner{flex-shrink:0;color:#dbb38b;font-size:11px;line-height:1.5;padding:6px 10px;border-left:2px solid #b99164;background:#30291d88}
@media(max-width:620px){.recovery-banner{font-size:10px;padding:4px 8px}}
.loot-search-track{height:4px;background:#11241a;margin:9px 0;overflow:hidden}
.loot-search-track span{display:block;width:0;height:100%;background:#c8b571;transition:width .1s linear}
/* Combat presentation: original functional HUD, reference-guided proportions. */
.combat-overlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.enemy-cue{background:none;padding:0;min-width:0;text-shadow:0 2px 3px #111}
.enemy-cue i{display:none}
.enemy-cue b{display:inline;font-size:13px;line-height:14px;margin-right:3px}
.enemy-cue span{font-size:9px}
.enemy-cue.named{color:#ffdda1}
.enemy-cue.named span{font-size:11px;font-weight:700}
.enemy-cue.named b{color:#ffc86e}
.pause-shortcut{position:absolute;right:20px;top:20px;pointer-events:auto;background:#101921c9;border:1px solid #a8b9b63d;border-radius:7px;color:#e1e7df;padding:9px 12px;font-size:11px}
@media(max-width:760px){.pause-shortcut{top:10px;right:10px}}
.mobile-item-actions>strong{font-size:14px}
.mobile-item-actions>div{display:flex;flex-wrap:wrap;gap:5px;padding:5px 0}
.mobile-item-actions small{display:block;font-size:12px;line-height:1.4}
.ammo-choice{display:grid;gap:6px;font-size:13px;color:#d5dfdc}
.ammo-choice select{max-width:100%;width:100%;background:#203f4a;border:1px solid #8eabb1;border-radius:5px;color:#f0e8cb;padding:8px;font:12px system-ui}
.ai-lab-panel{position:fixed;right:16px;top:16px;bottom:16px;width:min(355px,36vw);overflow:auto;z-index:120;background:#112629f5;border:1px solid #668b85;border-radius:12px;padding:18px;box-shadow:0 8px 30px #0005;font-size:12px;line-height:1.5;pointer-events:auto}
.ai-lab-panel header small{letter-spacing:2px;color:#9fcfc2}
.ai-lab-panel h1{font-size:20px;margin:5px 0}
.ai-lab-panel a{color:#e7c483}
.ai-lab-panel p{color:#b7ceca}
.ai-lab-panel label{display:grid;gap:4px;margin:10px 0}
.ai-lab-panel select{width:100%;padding:8px;background:#213d40;color:#edf5eb;border:1px solid #567973;border-radius:5px}
.lab-actions{display:flex;gap:6px;flex-wrap:wrap}
.lab-actions button{padding:8px;border-radius:5px;border:1px solid #668c82;background:#345c50;color:#eef3df}
.lab-check{display:flex!important;align-items:center}
.lab-metrics{margin:12px 0;padding:12px;background:#1c3939;display:grid;gap:4px;border-left:3px solid #ddbd7d}
.lab-metrics b{font-size:21px;color:#f0d596}
.lab-metrics small{color:#9ab9b1}
.lab-agent{padding:8px 0;border-bottom:1px solid #54756b55;display:grid;gap:2px}
.lab-agent span,.lab-agent small{color:#b1ccc4}
.ai-lab-panel details{margin-top:12px}
.ai-lab-panel summary{cursor:pointer;color:#e9ce98}
.ai-lab-panel ol{padding-left:18px;color:#c4d7ce}
@media(max-width:760px){.ai-lab-panel{width:300px;max-width:45vw;font-size:11px;padding:10px}.ai-lab-panel h1{font-size:16px}}
.ai-lab .enemy-cues{display:none}
.lab-observer-labels{position:fixed;inset:0;pointer-events:none;z-index:23}
.lab-observer-labels span{position:absolute;left:0;top:0;width:22px;height:22px;display:grid;place-items:center;background:#11282bea;border:2px solid #9bdfc7;border-radius:50%;font-size:12px;color:#fff;font-weight:bold}
.lab-observer-labels span[hidden]{display:none}
.ai-lab .pause-menu{right:var(--lab-panel-space,400px)}
.ai-lab .pause-card{width:min(420px,calc(100% - 24px));max-height:calc(100vh - 32px);overflow:auto;padding:20px}
.ai-lab .pause-card h1{font-size:clamp(18px,2.4vw,29px)}
.player-hearing{position:fixed;width:290px;height:290px;transform:translate(-50%,-50%);pointer-events:none;z-index:24}
.player-hearing[hidden],.player-hearing span[hidden]{display:none}
/* --far: 0 at the source, 1 at the edge of hearing (player-hearing.js): a far
   sound is a thicker, blurred arc, a near one thin and sharp. */
.player-hearing span{--far:0;--line:2px;position:absolute;inset:0;border:calc(var(--line) + 3px * var(--far)) solid transparent;border-top-color:#f4f5e8;border-radius:50%;
  filter:blur(calc(3px * var(--far))) drop-shadow(0 1px 2px #071018);transform-origin:center}
.player-hearing span.gunshot{--line:3px}
.inventory-open .ai-lab-panel{visibility:hidden!important;pointer-events:none!important}
/* Always available, including when gameplay HUD is hidden. */
.frame-rate-overlay{position:fixed;left:50%;top:5px;transform:translateX(-50%);z-index:250;display:flex;align-items:center;gap:6px;max-width:calc(100vw - 16px);padding:3px 6px;background:#0d2028e8;border:1px solid #7f9e9566;border-radius:5px;color:#e4eddc;font:11px monospace;white-space:nowrap;pointer-events:none}
.frame-rate-overlay button{pointer-events:auto;padding:3px 6px;border:1px solid #819d8c;background:#29453f;border-radius:3px;color:#f0e5bd;font:inherit}
.frame-rate-overlay button[aria-pressed=false]{background:#172b30;color:#b7c8c0}
.frame-rate-overlay button:focus-visible{outline:2px solid #f0d596;outline-offset:2px}
.frame-rate-overlay span[hidden]{display:none}
@media(max-width:650px){.frame-rate-overlay{font-size:9px;gap:4px;padding:2px 4px}}
/* Explicit performance-route diagnostic, independent of hidden gameplay HUD. */
.performance-route-panel{position:fixed;left:12px;top:42px;z-index:130;max-width:min(390px,calc(100vw - 24px));box-sizing:border-box;padding:10px 12px;border:1px solid #deb978;border-radius:8px;background:#142830f2;color:#eee6cf;font:12px/1.5 system-ui;pointer-events:auto}
.performance-route-panel p{margin:6px 0;color:#f4ce8d}
.performance-route-panel small{display:block;font-size:10px;color:#c9d6d0}
.performance-route-panel>div{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0}
.performance-route-panel button{padding:5px 8px;border:1px solid #99ad9a;border-radius:4px;background:#315647;color:#f1ead3;font:inherit;cursor:pointer}
.performance-route-panel button:disabled{opacity:.45;cursor:default}
.performance-route-panel button:focus-visible{outline:2px solid #f0d596;outline-offset:2px}
/* Completion text stays reachable below the fixed panel's 42px top inset. */
.performance-route-panel.performance-route-complete{max-height:calc(100vh - 54px);max-height:calc(100dvh - 54px);overflow-y:auto;overscroll-behavior:contain}
.performance-route-panel.performance-route-complete:focus-visible{outline:2px solid #f0d596;outline-offset:2px}
/* Opaque, DOM-only raid loading surface; no animation or gameplay render work. */
.raid-preparation{position:fixed;inset:0;z-index:2147483647;isolation:isolate;overflow:hidden;background:#000;cursor:wait;outline:none}
.raid-preparation.clear{background:none}
.raid-preparation__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.raid-preparation__status{position:absolute;z-index:31;top:75%;left:20px;right:20px;margin:0;transform:translateY(-50%);text-align:center;font:600 20px/1.2 var(--v2-text);letter-spacing:.04em;color:#fffaf0;-webkit-text-stroke:4px #1b120c;paint-order:stroke fill;text-shadow:0 2px 6px #000c}
.title-screen{position:fixed;inset:0;z-index:2147483647;overflow:hidden;background:#000;outline:none}
.title-screen__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.title-screen__cheek{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.title-screen__prompt{position:absolute;left:20px;right:20px;bottom:9%;margin:0;text-align:center;font:400 34px/1.2 Jua,Pretendard,sans-serif;letter-spacing:.04em;color:#fffaf0;-webkit-text-stroke:5px #1b120c;paint-order:stroke fill;text-shadow:0 2px 8px #000c;animation:title-blink 1.4s ease-in-out infinite}
@keyframes title-blink{0%,100%{opacity:1}50%{opacity:.15}}
.raid-preparation.clear .raid-preparation__status,.raid-preparation.clear .raid-preparation__art{display:none}
/* Intentionally static, including when reduced motion is preferred. */
.map-editor { position:fixed; z-index:80; top:12px; left:12px; width:260px; max-height:calc(100vh - 24px); overflow:auto; padding:12px; background:rgba(25,29,33,.95); color:#eee; pointer-events:auto; font:13px/1.5 sans-serif; }
.map-editor button,.map-editor select { margin:3px; padding:5px; }
.map-editor label { display:block; margin:4px 0; }
.map-editor input[type=number] { width:95px; }
.map-editor select { width:100%; }
.map-editor fieldset { margin:8px 0; }
.map-editor.is-playing { width:210px; }
.map-editor.is-playing > :not(strong):not([data-status]):not([data-position]):not([data-play]) { display:none; }
.map-editor [data-position] { white-space:pre-line; font-size:11px; }
/* HUD v2, after the Escape from Duckov reference footage and the raid loading
   screen's look: only clock + objective (top left), controls (top right),
   health + ammo + slots (bottom centre) and range (bottom right). Deep teal
   panels with a hard under-shadow, cream text, orange accents, Jua/Pretendard. */
:root{--v2-text:'Pretendard','Malgun Gothic','Apple SD Gothic Neo',sans-serif;--v2-panel-2:#0d1b28f0;--v2-edge:#4f7d99;--v2-drop:#070f17;--v2-select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e9eef2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html,body{font-family:var(--v2-text)}
/* Screens v2: inventory/search/stash, pause menu and the (temporary) bunker HUD
   in the same material as the raid HUD. Colours, type and controls only; the
   existing layout is kept. */
.frame-rate-overlay[hidden]{display:none}
.stamina-overlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.inventory-open .stamina-overlay{visibility:hidden}
.inventory-open .weapon-hud{visibility:hidden}
.inventory-open .mission-hud{visibility:hidden}
.menu-note:empty{display:none}
.menu-confirm{position:absolute;inset:0;display:grid;place-items:center;background:#06141299;border-radius:inherit}
.menu-confirm>div{width:min(340px,86%);padding:20px;background:#173f3c;border:2px solid var(--v2-edge);border-radius:12px;box-shadow:0 18px 40px #0008}
.menu-confirm p{margin:0 0 6px;font-size:13px;line-height:1.6;color:#e5ebd0}
.cast-bar{position:absolute;left:50%;bottom:210px;transform:translateX(-50%);z-index:4;width:170px;pointer-events:none;text-align:center}
.cast-bar[hidden]{display:none}
/* "동작 취소 X": the cast label's font and outline, with the help button's
   key chip. */
.cast-cancel{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font:16px/1 Jua,Pretendard,sans-serif;color:#fff;text-shadow:0 1px 0 #0b2b2c,0 0 4px #000a;letter-spacing:.5px}
.cast-cancel kbd{display:inline-grid;place-items:center;box-sizing:border-box;min-width:20px;height:20px;padding:0 5px;
  border-radius:6px;background:var(--ui-ink);color:#123d3e;box-shadow:0 2px 0 #9fb8ad;font:13px/1 var(--ui-title)}
.cast-label{display:block;font:15px/18px Jua,Pretendard,sans-serif;color:#fff;text-shadow:0 1px 0 #0b2b2c,0 0 4px #000a;margin-bottom:4px;letter-spacing:.5px}
.cast-track{position:relative;box-sizing:border-box;height:13px;border-radius:7px;background:var(--v2-panel-2,#0d2f30);border:2px solid var(--v2-edge,#2d7c76);box-shadow:0 3px 0 var(--v2-drop,#082425);overflow:hidden;background-image:repeating-linear-gradient(90deg,transparent 0 16px,#ffffff14 16px 17px)}
.cast-fill{position:relative;display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(180deg,#ffffff 0%,#f4f8f8 45%,#d5e2e3 100%);box-shadow:0 0 8px #ffffff8c}
.cast-fill::before{content:'';position:absolute;left:3px;right:3px;top:1px;height:3px;border-radius:2px;background:#ffffffd9}
.cast-fill::after{content:'';position:absolute;right:0;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 6px 2px #ffffffb3}
/* Duckov tone: navy panels, steel-blue edges, light accents instead of teal/orange. */
/* ---- UI components. Markup opts in by class; each look is defined once. ----
   ui-panel        panel: fill, edge, radius, inner margin
   ui-section-head section title row inside a panel
   ui-bar          load/progress bar (track + fill)
   ui-menu         right-click item menu
   Tokens are global so HUD pieces outside the inventory share them. */
/* Iris wipe (game/iris-wipe.js): over the game and its HUD. */
.iris-wipe{position:fixed;inset:0;z-index:30;pointer-events:none}

/* ==== UI kit =============================================================
   One set of tokens and components for every screen. Containers own the
   spacing between children (gap), components own their inner margin
   (padding); nothing positions itself with ad-hoc margins.
     tokens      --ui-*  sizes, --ui-* colours
     .ui-panel   framed panel: fill, edge, radius, inner margin
     .ui-section-head  title row at the top of a panel section
     .ui-bar     load bar (track + fill + light and danger lines)
     .ui-menu    item action menu
     buttons / selects inside a kit screen share one look; .ui-primary is the
     light call-to-action.
   ======================================================================== */
:root{
  --ui-screen-pad:16px;--ui-pad:12px;--ui-border:2px;--ui-gap:10px;--ui-section-gap:16px;
  --ui-cell:60px;--ui-cell-gap:4px;--ui-gear-gap:12px;--ui-slot:58px;--ui-slot-small:42px;--ui-radius:14px;--ui-radius-sm:9px;
  --ui-panel:rgba(20,38,58,.91);--ui-panel-2:rgba(13,27,40,.94);--ui-edge:#4f7d99;--ui-drop:#070f17;
  --ui-head:#0f3434;--ui-cell-fill:#0f2030;--ui-cell-edge:#2c4c63;
  --ui-ink:#fffaf0;--ui-ink-strong:#fffdf2;--ui-sub:#c0d0dd;--ui-muted:#93aab7;
  --ui-button:linear-gradient(180deg,#1b5352,#123d3e);--ui-button-hover:linear-gradient(180deg,#22625f,#174a4a);
  --ui-primary:#e9eef2;--ui-primary-edge:#8299a8;--ui-primary-ink:#2b1a0b;
  --ui-accent:#ecdc9c;
  /* Item rarity, sampled from Hearthstone's rarity gems (common, rare, epic,
     legendary; 2026-10-28): body, highlight (-hi) and shade (-dark) of each
     gem. Our uncommon/rare/legendary take HS rare/epic/legendary. Common's
     body is its gem's shade (the silver body hides white labels); quest
     stays gold, lit and shaded by mixing. */
  --rarity-common:#717e8b;--rarity-uncommon:#336fcb;--rarity-rare:#8431a3;--rarity-legendary:#df8510;--rarity-quest:#9a7a3c;
  --rarity-common-hi:#acc1d1;--rarity-uncommon-hi:#4198fc;--rarity-rare-hi:#b043d6;--rarity-legendary-hi:#fab917;
  --rarity-quest-hi:color-mix(in srgb,#9a7a3c 60%,#fff);
  --rarity-common-dark:#3e464e;--rarity-uncommon-dark:#223f6b;--rarity-rare-dark:#45195c;--rarity-legendary-dark:#7a490d;
  --rarity-quest-dark:color-mix(in srgb,#9a7a3c 55%,#000);--ui-warn:#f2c94c;--ui-bad:#e5574b;--ui-bar-fill:#9cc59a;
  --ui-text:'Pretendard','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --ui-title:'Jua','Pretendard',sans-serif;--ui-label:'Pretendard','Malgun Gothic',sans-serif;
  --left-w:calc(5*var(--ui-cell) + 4*var(--ui-cell-gap) + 2*var(--ui-pad));
  --secure-w:calc(var(--ui-cell) + 2*var(--ui-pad));
}
@media(max-height:820px){:root{--ui-cell:52px}}
@media(max-height:700px){:root{--ui-cell:48px}}
/* Shared controls on any .ui-kit surface (inventory, pause menu). */
.ui-kit [hidden]{display:none!important}
.ui-kit button{box-sizing:border-box;padding:8px 12px;background:var(--ui-button);border:2px solid var(--ui-edge);
  border-radius:10px;box-shadow:0 3px 0 var(--ui-drop);color:var(--ui-ink);font:700 12px var(--ui-text);cursor:pointer}
.ui-kit button:hover:not(:disabled){background:var(--ui-button-hover)}
.ui-kit button:disabled{opacity:.45;cursor:default}
.ui-kit .ui-primary,.ui-kit button.active{background:var(--ui-primary);border-color:var(--ui-primary-edge);
  box-shadow:0 3px 0 var(--ui-primary-edge);color:var(--ui-primary-ink)}
.ui-kit select{padding:9px 34px 9px 12px;appearance:none;background:#0d2f30 var(--v2-select-arrow) no-repeat right 12px center;
  border:2px solid var(--ui-edge);border-radius:10px;box-shadow:0 3px 0 var(--ui-drop);color:var(--ui-ink);font:700 12px var(--ui-text)}
.ui-panel.ui-roomy{padding:calc(2*var(--ui-pad) - var(--ui-border))}
.ui-panel{box-sizing:border-box;padding:calc(var(--ui-pad) - var(--ui-border));
  background:linear-gradient(180deg,var(--ui-panel),var(--ui-panel-2));border:var(--ui-border) solid var(--ui-edge);
  border-radius:var(--ui-radius);box-shadow:0 4px 0 var(--ui-drop),0 10px 28px #0006;color:var(--ui-ink)}
.ui-panel{border-color:transparent;background:none;border-image:var(--ui-panel-art) 24 fill / 14px stretch}
.ui-section-head{box-sizing:border-box;display:flex;align-items:center;gap:var(--ui-gap);min-height:30px;
  padding:4px 10px;margin:0 0 var(--ui-gap);background:var(--ui-head);border-radius:8px}
.ui-section-head h3{margin:0;font:700 15px/1 var(--ui-label);color:var(--ui-ink-strong)}
.ui-section-head small{margin-left:auto;font-size:12px;color:var(--ui-sub);white-space:nowrap}
.ui-kit .ui-section-head button{margin-left:auto;padding:5px 7px;font-size:11px}
.ui-section-head small + button{margin-left:0}
.ui-bar{display:grid;gap:3px;flex:1;min-width:0}
.ui-bar span{font:700 12px/1 var(--ui-label);color:var(--ui-ink-strong)}
.ui-bar i{position:relative;display:block;height:11px;box-sizing:border-box;background:var(--ui-panel-2);
  border:2px solid var(--ui-edge);border-radius:6px;overflow:hidden;font-style:normal}
.ui-bar i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--load);background:var(--ui-bar-fill)}
.ui-bar.heavy i::before{background:var(--ui-warn)}
.ui-bar i::after{content:"";position:absolute;top:0;bottom:0;left:var(--danger);width:2px;background:var(--ui-warn);box-shadow:0 0 4px var(--ui-warn)}
/* End of the light load tier (<b> inside the track). */
.ui-bar i b{position:absolute;z-index:1;top:0;bottom:0;left:var(--light);width:2px;background:var(--ui-ink);opacity:.8}
.ui-menu{position:fixed;z-index:85;display:grid;gap:4px;min-width:130px}
.ui-menu button{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:7px;border:0;
  background:#24506d;color:var(--ui-ink-strong);font:700 13px/1 var(--ui-label);cursor:pointer}
.ui-menu button:hover{background:#30709a}

/* .ui-slot: a square action slot (weapon, melee, grenade, quick use) with a
   key chip (.ui-key) hanging under it and an optional count (.ui-count).
   .slot-small is the same slot at ~70% (icons keep their size). */
.ui-slot{position:relative;box-sizing:border-box;display:grid;place-items:center;flex:none;width:var(--ui-slot);height:var(--ui-slot);
  padding:5px;background:linear-gradient(180deg,var(--ui-panel),var(--ui-panel-2));border:2px solid var(--ui-edge);border-radius:12px;
  box-shadow:0 4px 0 var(--ui-drop);color:var(--ui-ink);font:11px var(--ui-text);cursor:pointer}
.ui-slot.slot-small{width:var(--ui-slot-small);height:var(--ui-slot-small);border-radius:10px}
.ui-slot.active{border:3px solid var(--ui-primary);box-shadow:0 4px 0 var(--ui-primary-edge),0 0 18px #f0a16055}
/* Trickcal frames (game/ui-art.js), 9-sliced: 24 px corners of the 128 px art. */
.ui-slot{border-color:transparent;background:none;border-image:var(--ui-slot-art) 24 fill / 12px stretch}
/* .active sets the border shorthand, which clears border-image: restate it whole. */
.ui-slot.active{border-color:transparent;border-image:var(--ui-slot-active-art) 24 fill / 12px stretch}
.ui-slot:disabled{border-image-source:var(--ui-slot-disabled-art)}
.ui-slot.slot-small,.ui-slot.slot-small.active{border-image-width:9px}
/* In a small slot the icon fits inside the frame. */
.ui-slot.slot-small svg{transform:scale(1.02)}
.ui-slot svg{width:40px;height:32px;transform:scale(1.45)}
/* Weapons lie across their slot, muzzle up-right (user 2026-11-10). */
.ui-slot svg.weapon-icon{--box:48px;width:calc(var(--box) * 1.4142 / (1 + var(--a)));height:calc(var(--box) * 1.4142 * var(--a) / (1 + var(--a)));transform:rotate(-45deg)}
.ui-slot.slot-small svg.weapon-icon{--box:35px}
/* Centred on the slot whatever its size (a small slot's icon overflows it). */
.ui-slot .slot-art{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center}
.ui-slot:disabled{cursor:default}
.ui-slot:disabled svg{opacity:.4}
.ui-key{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);display:grid;place-items:center;box-sizing:border-box;
  min-width:20px;height:20px;padding:0 5px;border-radius:6px;background:var(--ui-ink);color:#123d3e;box-shadow:0 2px 0 #9fb8ad;
  font:13px/1 var(--ui-title);font-style:normal;font-weight:400}
.ui-key{background:none;box-shadow:none;border-image:var(--ui-key-art) 24 fill / 6px stretch}
.ui-count{position:absolute;top:3px;right:5px;font:15px/1 var(--ui-title);font-style:normal;color:var(--ui-primary)}
.slot-small .ui-count{top:2px;right:3px;font-size:12px}

/* .ui-pill: a small rounded tag (world prompts, station labels); its key
   chip is an inline kbd. */
.ui-pill,.prompt-pill{display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;height:26px;padding:0 11px;border-radius:13px;
  background:rgba(38,104,140,.92);color:var(--ui-ink-strong);font:700 14px/1 var(--ui-label);white-space:nowrap}
.prompt-pill:has(kbd){padding-right:4px}
.ui-pill kbd,.prompt-pill kbd{display:inline-grid;place-items:center;box-sizing:border-box;min-width:20px;height:20px;padding:0 5px;border:0;border-radius:5px;
  background:var(--ui-primary);color:#24343d;font:800 12px/1 var(--ui-label)}
.interaction-prompt,.bunker-prompt{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:8px;justify-content:center}
.interaction-prompt{top:57%}
.bunker-prompt{bottom:95px;margin:0}
.interaction-prompt:empty,.bunker-prompt:empty{display:none}

/* ==== Inventory screen (raid and base) on the kit ======================= */
.inventory-screen{position:fixed;inset:0;z-index:80;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--ui-gap);
  padding:var(--ui-screen-pad);background:rgba(7,18,28,.14);color:var(--ui-ink);font:16px var(--ui-text);overflow:hidden}
.inventory-screen[hidden]{display:none}
.inventory-screen.drop-outside{cursor:copy}
.inventory-screen h1,.inventory-screen h2,.inventory-screen h3,.inventory-screen p{margin:0}
/* The panels sit twice as low as the tab row leaves them (user, 2026-11-01);
   cash (base only) sits in that band over the left panel's right edge. */
.inventory-cash{position:absolute;bottom:100%;left:0;width:var(--left-w);height:calc(var(--ui-screen-pad) + 36px + var(--ui-gap));
  display:flex;align-items:center;justify-content:flex-end;gap:6px;font:22px/1 var(--ui-title);color:var(--ui-primary);pointer-events:none}
/* The tab row keeps its height in the raid too (hidden), so the panels
   start at the same place in both. */
.inventory-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:36px}
.field-inventory .inventory-tabs{visibility:hidden}
/* Mission brief and quests float over the screen below the tabs: opening or
   folding them never moves the panels. */
.inventory-briefing{position:absolute;z-index:2;top:calc(var(--ui-screen-pad) + var(--ui-slot) + var(--ui-gap));left:50%;transform:translateX(-50%);
  width:min(620px,calc(100% - 2 * var(--ui-screen-pad)));display:flex;flex-direction:column;gap:var(--ui-gap)}
/* The quest button: a full slot, top centre; its panel opens below it. */
.ui-kit .quest-toggle{position:absolute;z-index:3;left:50%;top:var(--ui-screen-pad);
  transform:translateX(-50%);display:grid;place-items:center;width:var(--ui-slot);height:var(--ui-slot);padding:0}
.mission-brief,.quest-board{flex-shrink:0;align-self:center;width:min(620px,100%);max-height:34vh;overflow:auto;scrollbar-width:none;font-size:12px}
.mission-brief summary,.quest-board summary{cursor:pointer;font:700 13px var(--ui-text);color:#fff0ca}
.mission-brief summary span,.quest-board summary span{margin-left:8px;font-weight:400;font-size:12px;color:var(--ui-muted)}
.mission-brief p,.quest-board>p{margin-top:6px;color:#c8d6dc}
.mission-brief div{display:flex;align-items:center;gap:var(--ui-gap);margin-top:8px}
.mission-brief small{color:var(--ui-muted)}
.quest-board .quest{margin-top:8px;padding:9px 11px;border-radius:8px;background:#132c3d;border:1px solid #2f4757}
.quest-board .quest.ready{border-color:#e3b570;background:#2a3424}
.quest-board .quest header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.quest-board .quest header small{color:var(--ui-muted)}
.quest-board .quest p{margin:5px 0;color:#c8d6dc}
.quest-board .quest ul{list-style:none;margin:4px 0;padding:0;display:grid;gap:3px}
.quest-board .quest li{display:flex;justify-content:space-between;color:#dfe8ec}
.quest-board .quest li.met{color:var(--ui-bar-fill)}
.quest-board .quest footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
.quest-board .quest footer small{color:#e3c88d;font-size:11px}
/* Body: left panel (gear + bag), secure strip, then the right-hand panel
   (stash, loot, shop or workbench) pushed to the far edge. */
.inventory-body{position:relative;flex:1;min-height:0;display:flex;align-items:flex-start;gap:var(--ui-gap);
  margin-top:calc(var(--ui-screen-pad) + 36px + var(--ui-gap))}
.inventory-left{flex:none;width:var(--left-w);max-height:100%;overflow:auto;scrollbar-width:none}
.inventory-left::-webkit-scrollbar{display:none}
.gear-section{margin-bottom:var(--ui-section-gap)}
/* Gear four to a row (weapon 1, weapon 2, V, head / body, backpack), every
   row centred in the panel. */
.equipment-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ui-gear-gap);width:calc(4*var(--ui-cell) + 3*var(--ui-gear-gap));margin:0 auto}
/* The two gun slots: with a pistol in each, a white link button sits on the
   seam. Linked, they merge into one slot: no gap, one glowing accent box
   round both (its corners follow the slot's, 3px out) and an "Akimbo" title
   in the slot-label row (the 18px above each cell). The button stays above
   a selected (raised) item. */
.gear-pair{position:relative;display:flex;gap:var(--ui-gear-gap)}
.gear-pair .akimbo-link{position:absolute;z-index:10;left:50%;top:calc(18px + var(--ui-cell) / 2);display:grid;place-items:center;width:26px;height:26px;padding:0;
  transform:translate(-50%,-50%);border:0;border-radius:50%;background:#fff;color:#16324a;box-shadow:0 2px 6px #0008;cursor:pointer}
.gear-pair .akimbo-link svg{display:block}
.ui-kit .gear-pair .akimbo-link:hover,.ui-kit .gear-pair .akimbo-link:focus-visible{background:#2d5d7c;color:#fff}
.gear-pair.linked{gap:0}
.gear-pair.linked .gear-slot small{visibility:hidden}
/* Akimbo: each pistol's round count on its outer side. */
.gear-pair.linked .gear-slot:first-child .item-count{left:4px;right:auto}
.gear-pair.linked::after{content:"";position:absolute;z-index:3;inset:15px -3px -3px;border:2px solid var(--ui-accent);
  border-radius:calc(var(--ui-radius-sm) + 3px);box-shadow:0 0 8px #ecdc9c99,inset 0 0 6px #ecdc9c55;pointer-events:none}
.akimbo-label{position:absolute;z-index:3;left:0;right:0;top:0;font:700 11px/1.4 var(--ui-text);letter-spacing:1px;text-align:center;
  color:var(--ui-accent);pointer-events:none;
  /* A crisp dark outline for reading, a soft glow outside it. */
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,0 0 7px #ecdc9caa}
.gear-slot small{display:block;margin-bottom:3px;font:11px/1.4 var(--ui-text);color:var(--ui-sub);text-align:center}
.gear-slot .inventory-item,.gear-slot .empty-slot{width:var(--ui-cell);height:var(--ui-cell)}
/* Weapons lie across their gear slot, muzzle up-right (user 2026-11-10). */
.gear-slot .inventory-item svg.weapon-icon{--box:calc(var(--ui-cell) * .74);top:42%;left:50%;width:calc(var(--box) * 1.4142 / (1 + var(--a)));
  height:calc(var(--box) * 1.4142 * var(--a) / (1 + var(--a)));transform:translate(-50%,-50%) rotate(-45deg)}
.empty-slot{position:relative;box-sizing:border-box;background:var(--ui-cell-fill);border:2px solid var(--ui-cell-edge);border-radius:var(--ui-radius-sm);font-size:0;color:var(--ui-cell-edge)}
.empty-slot svg{position:absolute;top:15%;left:15%;width:70%;height:70%}
.secure-slot{flex:none;width:var(--secure-w)}
.secure-slot .ui-section-head{justify-content:center;background:none;min-height:0;padding:4px 0}
.secure-slot .ui-section-head small{display:none}
.secure-lock{display:grid;place-items:center;color:#cbd6dc}
.inventory-middle{flex:none;margin-left:auto;max-height:100%;display:flex;flex-direction:column;
  width:calc(var(--stash-cols,6)*var(--ui-cell) + (var(--stash-cols,6) - 1)*var(--ui-cell-gap) + 2*var(--ui-pad))}
.inventory-middle:empty{display:none}
.inventory-middle:has(.shop-list,.recipe-list){width:380px;overflow:auto;scrollbar-width:none}
.inventory-middle>.inventory-container{display:flex;flex-direction:column;min-height:0}
.inventory-middle .grid-scroll{min-height:0;overflow:auto;scrollbar-width:none}
.inventory-middle .grid-scroll::-webkit-scrollbar{display:none}
.bulk-deposit{display:grid;gap:6px;margin-top:var(--ui-gap)}
.storage-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:var(--ui-gap);
  padding:7px;background:var(--ui-head);border-radius:8px}
.storage-pagination button{padding:5px 8px}
.storage-pagination strong{font:700 13px var(--ui-text)}
/* The detail panel opens right of the secure strip (items picked on the
   left) or left of the right-hand panel (picked there), never covering
   either. */
.item-detail{display:none;position:absolute;top:0;left:calc(var(--left-w) + var(--secure-w) + 2*var(--ui-gap));
  width:min(520px,calc(100% - var(--left-w) - var(--secure-w) - var(--middle-w,0px) - 4*var(--ui-gap)));
  max-height:100%;overflow:auto;scrollbar-width:none;z-index:2}
.inventory-screen:has(.inventory-middle:not(:empty)){--middle-w:calc(var(--stash-cols,6)*var(--ui-cell) + (var(--stash-cols,6) - 1)*var(--ui-cell-gap) + 2*var(--ui-pad))}
.inventory-screen:has(.shop-list,.recipe-list){--middle-w:380px}
.has-selection .item-detail{display:block}
.detail-right .item-detail{left:auto;right:calc(var(--middle-w,0px) + var(--ui-gap))}
.detail-head{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid #2f4757}
.detail-art{flex:none;display:grid;place-items:center;width:76px;height:76px;box-sizing:border-box;border-radius:var(--ui-radius-sm);
  background:linear-gradient(145deg,#26404a,#152831);border:1px solid #5f7a85}
.detail-art svg{width:68px;height:65px}
.detail-art.uncommon{border-color:var(--rarity-uncommon)}
.detail-art.rare{border-color:var(--rarity-rare)}
.detail-art.legendary{border-color:var(--rarity-legendary)}
.detail-art.quest{border-color:var(--rarity-quest)}
.detail-kind{display:flex;align-items:center;gap:6px;font-size:11px;color:#9fb6c2}
.tier{padding:1px 7px;border-radius:9px;background:#2a3d47;color:#cfdbe1}
.tier.uncommon{background:var(--rarity-uncommon);color:#fff}
.tier.rare{background:var(--rarity-rare);color:#fff}
.tier.legendary{background:var(--rarity-legendary);color:#fff}
.tier.quest{background:var(--rarity-quest);color:#fff}
.item-detail h2{margin:3px 0 6px;font:20px/1.3 var(--ui-title);color:#fff0ca}
.detail-facts{display:flex;flex-wrap:wrap;gap:5px}
.detail-facts span{padding:2px 7px;font-size:11px;color:#d5e1e6;background:#0c1b25;border:1px solid #2f4757;border-radius:5px}
.detail-desc{margin:12px 0!important;font-size:13px;line-height:1.65;color:#b9c8cf}
.detail-stats{display:grid;gap:1px;margin:0 0 var(--ui-gap);background:#25394a;border:1px solid #25394a;border-radius:7px;overflow:hidden}
.stat-row{display:grid;grid-template-columns:86px 1fr;align-items:center;padding:6px 10px;background:#122838}
.stat-row dt{font-size:12px;color:var(--ui-muted)}
.stat-row dd{display:grid;gap:4px;margin:0;font-size:13px;color:#eef3f5}
.stat-bar{display:block;height:4px;border-radius:2px;background:#0a1720;overflow:hidden}
.stat-bar b{display:block;height:100%;background:var(--ui-bar-fill)}
.stat-row.warn dd{color:#efcf8d}
.stat-row.warn .stat-bar b{background:#d6a85a}
.stat-row.bad dd{color:#f19b8a}
.stat-row.bad .stat-bar b{background:#d0644f}
.weapon-parts{padding-top:8px;border-top:1px solid #2f4757}
.weapon-parts h3{margin:4px 0 6px;font-size:13px;color:#e8d9ac}
.weapon-parts>div{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:7px 0}
.weapon-parts span{font-size:13px}
.weapon-parts button{margin:3px;padding:6px 9px}
.weapon-parts small{display:block;line-height:1.5;color:#b9cbd5}
.inventory-empty-art{display:none}
/* Slot grids: the cells are the layout. */
.item-grid{position:relative;display:grid;grid-template-columns:repeat(var(--cols),var(--ui-cell));grid-auto-rows:var(--ui-cell);gap:var(--ui-cell-gap)}
.inventory-screen .grid-cell{padding:0;background:var(--ui-cell-fill);border:2px solid var(--ui-cell-edge);border-radius:var(--ui-radius-sm);box-shadow:0 3px 0 var(--ui-drop);cursor:default}
.inventory-screen .grid-cell:hover:not(:disabled){background:#16304a}
.inventory-screen .grid-cell.unavailable{visibility:hidden}
.inventory-screen .inventory-item,.inventory-drag-ghost{--tile:var(--rarity-common);--tile-hi:var(--rarity-common-hi);--tile-dark:var(--rarity-common-dark);
  /* A gem: lit top left, shaded bottom right, a soft gloss up top (the
     gem's light and shade taken halfway to its body: full strength was too
     much in play). */
  --tile-fill:radial-gradient(ellipse 70% 55% at 28% 18%,#ffffff30,#ffffff00 70%),
    linear-gradient(160deg,color-mix(in srgb,var(--tile-hi) 50%,var(--tile)) 0%,var(--tile) 48%,color-mix(in srgb,var(--tile-dark) 50%,var(--tile)) 100%);position:relative;z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  padding:3px;background:var(--tile-fill);border:2px solid color-mix(in srgb,var(--tile-hi) 75%,#fff);border-radius:var(--ui-radius-sm);
  box-shadow:0 3px 0 var(--ui-drop);color:var(--ui-ink);font:700 12px var(--ui-text);overflow:hidden;cursor:grab}
/* Hover keeps the rarity fill (the kit's button hover would paint it teal). */
.inventory-screen .inventory-item:hover:not(:disabled){background:var(--tile-fill);filter:brightness(1.12)}
/* Duckov-style tile: the icon fills the cell, the name is one small line on a
   dark strip along the tile's bottom edge (ellipsis when long), the count or
   rounds sit right above it; durability runs along the top. */
.inventory-item svg{position:absolute;top:6%;left:10%;width:80%;height:72%;
  /* Inked outline: the light icons read on the lit top of a tile too. */
  filter:drop-shadow(1px 0 0 #0b1620) drop-shadow(-1px 0 0 #0b1620) drop-shadow(0 1px 0 #0b1620) drop-shadow(0 -1px 0 #0b1620)}
.item-label{position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;padding:1px 4px 2px;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;border-radius:0 0 calc(var(--ui-radius-sm) - 2px) calc(var(--ui-radius-sm) - 2px);
  background:rgba(6,14,22,.62);font:600 10px/12px var(--ui-text);letter-spacing:-.02em;color:#eef2f4;text-align:right}
.item-count{position:absolute;bottom:16px;right:4px;font:12px/1 var(--ui-title);font-weight:400;color:var(--ui-ink);text-shadow:0 1px 2px #000a}
.item-condition{position:absolute;left:3px;right:3px;top:2px;height:3px;border-radius:2px;background:linear-gradient(to right,#aec596 var(--condition),#18231c var(--condition))}
.item-condition.worn{background:linear-gradient(to right,#eeb958 var(--condition),#18231c var(--condition))}
.item-condition.broken{background:#18231c;border-top:1px solid #f46f5e}
.item-pin{position:absolute;top:3px;left:3px;z-index:2;display:grid;place-items:center;width:17px;height:17px;border-radius:4px;
  background:#f2d89b;color:#182c37;font:700 11px monospace;pointer-events:none}
/* Rarity picks the tile's gem (silver, blue, purple, orange; quest gold). */
.inventory-item.uncommon{--tile:var(--rarity-uncommon);--tile-hi:var(--rarity-uncommon-hi);--tile-dark:var(--rarity-uncommon-dark)}
.inventory-item.rare{--tile:var(--rarity-rare);--tile-hi:var(--rarity-rare-hi);--tile-dark:var(--rarity-rare-dark)}
.inventory-item.legendary{--tile:var(--rarity-legendary);--tile-hi:var(--rarity-legendary-hi);--tile-dark:var(--rarity-legendary-dark)}
.inventory-item.quest{--tile:var(--rarity-quest);--tile-hi:var(--rarity-quest-hi);--tile-dark:var(--rarity-quest-dark)}
.inventory-screen .inventory-item.selected{outline:2px solid var(--ui-accent);outline-offset:-3px;z-index:4}
.inventory-item.drag-source{opacity:.35}
.inventory-drag-ghost{box-shadow:0 5px 20px #0008;border-color:#e5c87c}
.inventory-item.ammo-drop-valid{outline:3px solid #b9d988;outline-offset:-3px}
.inventory-item.ammo-drop-invalid{outline:3px solid #dd7e66;outline-offset:-3px}
.inventory-screen .inventory-item.unknown{display:grid;place-items:center;background:linear-gradient(145deg,#407087,#25465be8);
  border:2px solid #b6cbd5bb;box-shadow:0 2px 0 #0006;color:#e3c070;font:800 20px/1 var(--ui-title);cursor:default}
.inventory-item.unknown.searching{border-color:#e3c070}
.inventory-item.unknown.searching::before{content:"";position:absolute;inset:auto 0 0 0;height:var(--search,0%);background:#e3c07033}
.inventory-item.unknown span{position:relative}
.placement-preview{z-index:8;pointer-events:none;border:2px solid;border-radius:2px}
.placement-preview.valid{border-color:#ade69c;background:#8dde7855}
.placement-preview.invalid{border-color:#f29385;background:#d8564b44}
/* Shop and workbench lists: cards on the panel. */
.shop-list,.recipe-list{display:grid;gap:8px}
.shop-list article{display:flex;align-items:center;gap:10px;padding:8px;background:#132c3d;border:1px solid #2f4757;border-radius:8px}
.shop-list article svg{flex:none;width:60px;height:44px}
.shop-list article>div{flex:1;min-width:0}
.shop-list strong{font:700 12px var(--ui-text)}
.shop-list small{display:block;margin-top:4px;font-size:12px;color:var(--ui-sub)}
.craft-category{display:flex;align-items:center;gap:12px;margin-bottom:8px;padding:12px;background:var(--ui-head);border-radius:8px;font-size:14px}
.recipe-list article{display:grid;gap:8px;padding:14px;background:#132c3d;border:1px solid #2f4757;border-radius:8px}
.recipe-list h3{font:700 15px var(--ui-text)}
.recipe-list p{font-size:12px;line-height:1.7;color:#aebb9e}
.recipe-list small{font-size:12px;color:var(--ui-sub)}
.recipe-list article button{justify-self:start}
.material-missing{color:#e9aa83}
/* Quick-use strip: same cells as the grids, centred under the body. */
.inventory-quick{align-self:center;padding-bottom:calc(var(--ui-pad) - var(--ui-border) + 7px)}
.inventory-quick>div{display:flex;gap:var(--ui-cell-gap)}
.inventory-screen .inventory-quick button{position:relative;width:var(--ui-cell);height:var(--ui-cell);padding:3px;
  background:var(--ui-cell-fill);border-color:var(--ui-cell-edge);border-radius:8px}
.inventory-quick button svg{width:100%;height:100%}
.inventory-quick button b{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);display:grid;place-items:center;
  min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:6px;background:var(--ui-ink);color:#123d3e;
  box-shadow:0 2px 0 #9fb8ad;font:13px/1 var(--ui-title)}
.inventory-footer{position:absolute;left:var(--ui-screen-pad);bottom:var(--ui-screen-pad);max-width:40vw;pointer-events:none;
  font:700 12px/1.7 var(--ui-text);color:#b9cad6}
.inventory-footer:has(span:empty){display:none}
.inventory-hurt .inventory-left{border-color:var(--ui-bad)}
/* Resume and ending screens use the same surface. */
.resume-record{margin:auto;width:min(320px,90vw);display:grid;gap:var(--ui-gap);text-align:center}
.resume-record .resume-stats{justify-content:center}
.resume-record h1{font:32px/1.2 var(--ui-title)}
.resume-record p{font-size:14px;line-height:1.8;color:#c8d6dc}
.resume-stats{display:flex;gap:12px;flex-wrap:wrap}
.resume-stats span{padding:4px 10px;background:var(--ui-head);border-radius:8px;font-size:13px}
.resume-record small{color:var(--ui-muted)}
.eyebrow{font:12px/1 monospace;letter-spacing:.2em;color:var(--ui-sub)}
.campaign-ending{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:clamp(24px,6vw,90px);background:radial-gradient(ellipse at 70% 15%,#48684b,#12251e 70%)}
.campaign-ending h1{font:clamp(36px,6vw,72px)/1 var(--ui-title);letter-spacing:-2px;color:#e9dfb7}
.campaign-ending p{font-size:15px;line-height:1.9;color:#c0d0b2}
.campaign-ending ol{list-style:none;padding:0;max-width:520px;display:grid}
.campaign-ending li{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid #ffffff22}
.campaign-ending li b{margin-left:auto;font-size:12px;color:#e3c88d}
.campaign-ending button{align-self:flex-start}
/* The bag's load bar is short and sits on the right, next to 정리. */
.ui-section-head .load-bar{flex:0 1 150px;margin-left:auto}
.ui-kit .ui-section-head .load-bar + button{margin-left:0}

/* Pause menu on the kit: a panel card over a blurred scrim. */
.pause-menu{position:fixed;inset:0;z-index:90;display:grid;place-items:center;overflow:hidden;background:#06191ad0;backdrop-filter:blur(8px)}
.pause-menu[hidden]{display:none}
.pause-card{position:relative;box-sizing:border-box;width:min(420px,90vw);max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;display:grid;gap:var(--ui-gap)}
.pause-card:has(.menu-options:not([hidden])){width:min(560px,92vw)}
.pause-card .eyebrow{color:var(--ui-primary)}
.pause-card h1{margin:0;font:30px/1.1 var(--ui-title);color:var(--ui-ink)}
.pause-card p{margin:0;font-size:13px;line-height:1.6;color:var(--ui-sub)}
.pause-card p:empty{display:none}
.pause-card small{font-size:12px;color:var(--ui-sub)}
.pause-card small:empty{display:none}
.menu-main{display:grid;gap:var(--ui-gap)}
.menu-main button{width:100%;padding:13px 18px;font-size:13px}
.menu-options{display:grid;gap:var(--ui-gap)}
.option-tabs{display:flex;gap:6px}
.option-tabs button{flex:1;padding:9px 6px}
.option-body{display:grid;gap:var(--ui-gap)}
.option-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--ui-gap);font-size:13px;color:#dfe7cf}
label.option-row{grid-template-columns:96px 1fr 34px}
.option-row input[type=range]{width:100%;accent-color:var(--ui-primary)}
.option-row output{text-align:right;font-variant-numeric:tabular-nums;color:#e8d9a8}
.option-row small{margin-left:4px;font-size:10px;color:#9fb39a}
.option-choice{display:flex;gap:6px}
.option-choice button,.option-key{min-width:64px;padding:7px 10px}
.option-keys{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;max-height:44vh;overflow-y:auto;padding-right:4px}
.option-key.custom{border-color:#e59a3c}
.ui-kit .option-key.waiting{background:#e8d9a8;color:#2b1a0b}
.option-row select{min-width:180px}

/* Combat HUD: one row of slots, bottom centre; ammo tags over the guns in hand. */
.weapon-hud{position:absolute;left:50%;bottom:30px;z-index:3;transform:translateX(-50%);text-align:center;color:var(--ui-ink)}
.weapon-name{font:700 12px/1 var(--ui-text);color:var(--ui-primary);text-shadow:0 2px 4px #000}
.worn-weapon .weapon-name{color:#f3c576}
/* Ammo over a gun in hand (Duckov): a grey ammo-type tag over a black
   rounds / reserve pill. */
.weapon-actions .slot-ammo{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);display:grid;justify-items:center;gap:4px;
  pointer-events:none;white-space:nowrap}
.weapon-actions .slot-ammo[hidden]{display:none}
.slot-ammo-row{display:flex;align-items:center;gap:5px}
.slot-ammo-row[hidden]{display:none}
.ammo-key{display:grid;place-items:center;min-width:20px;height:20px;padding:0 4px;box-sizing:border-box;border-radius:6px;background:#f4eed6;
  color:#22292d;font:14px/1 var(--ui-title);box-shadow:0 2px 0 #0007}
/* T: the gun's ammo types over its tag, the pick lit; fades in and out. */
.ammo-menu{display:flex;flex-direction:column;align-items:stretch;gap:3px;margin-bottom:2px;opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s,transform .15s,visibility 0s .15s}
.ammo-menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .15s}
.ammo-wheel{display:grid;color:#f4eed6;filter:drop-shadow(0 1px 1px #000a)}
/* As tall as the T key; not the weapon slot's icon size (.ui-slot svg).
   Its chevrons nudge out and back. */
.ammo-wheel svg{display:block;width:15px;height:20px;transform:none;overflow:visible}
.ammo-wheel .wheel-up{animation:wheel-up .8s ease-in-out infinite alternate}
.ammo-wheel .wheel-down{animation:wheel-down .8s ease-in-out infinite alternate}
@keyframes wheel-up{to{transform:translateY(-2px)}}
@keyframes wheel-down{to{transform:translateY(2px)}}
.ammo-choice{position:relative;align-items:center;display:flex;justify-content:space-between;gap:12px;padding:3px 9px;border-radius:7px;background:#0b0f12c2;color:#cfd6d9;
  font:600 12px/1.3 var(--ui-text)}
.ammo-choice em{font:13px/1.3 var(--ui-title);font-style:normal}
.ammo-choice.loaded{background:#05080bf2;color:#9ea8ac;box-shadow:inset 0 3px 6px #000,inset 0 0 0 1px #ffffff2e;transform:translateY(1px)}
.ammo-choice.picked{outline:2px solid #fffdf2;outline-offset:0}
.ammo-pick{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:5px}
.ammo-error{padding:2px 7px;border-radius:7px;background:#5c1a1ad9;color:#ffd6d6;font:600 11px/1.3 var(--ui-text)}
/* Akimbo: the slot last pressed. */
.weapon-actions .akimbo-pair.focused{box-shadow:0 4px 0 var(--ui-primary-edge),inset 0 0 0 2px #ffd25a}
.slot-ammo small{padding:2px 7px;border-radius:7px;background:#c9ccccd9;color:#22292d;font:700 11px/1.3 var(--ui-text)}
.slot-ammo b{padding:3px 9px;border-radius:8px;background:#0b0f12e6;color:#fff;font:16px/1 var(--ui-title);font-weight:400;letter-spacing:.03em}
.weapon-name:empty,.shot-feedback{display:none}
/* G's random grenade: a "?" over its icon. */
.slot-random{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);pointer-events:none}
.slot-art+.slot-random{opacity:.55}
.weapon-actions{display:flex;align-items:flex-end;justify-content:center;gap:8px;isolation:isolate}
/* Akimbo: weapon slots 1 and 2 joined into one glowing pair. The glow sits
   on a layer under both slots (::after, z-index -1), so neither slot's glow
   lights the other's face. */
.weapon-actions .akimbo-pair{border-color:var(--ui-accent);box-shadow:0 4px 0 var(--ui-drop)}
.weapon-actions .akimbo-pair::after{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:0 0 10px #ecdc9c88}
.weapon-actions .akimbo-pair.active::after{box-shadow:0 0 18px #f0a16055}
.weapon-actions .akimbo-pair:first-child{margin-right:-8px;border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.weapon-actions .akimbo-pair:nth-child(2){border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.weapon-actions .akimbo-pair.active{border-color:var(--ui-primary);box-shadow:0 4px 0 var(--ui-primary-edge)}

/* Raid HUD on the kit. */
.field-clock{position:fixed;top:16px;left:20px;z-index:3;display:flex;align-items:center;gap:8px;pointer-events:none;
  font:40px/1 var(--ui-title);letter-spacing:.02em;color:var(--ui-ink);text-shadow:0 3px 0 var(--ui-drop),0 4px 14px #000a}
.field-clock small{max-width:4.5em;font:700 12px/1.25 var(--ui-text);color:var(--ui-primary);text-shadow:0 1px 4px #000c}
.field-clock[hidden]{display:none}
.mission-hud{position:fixed;top:66px;left:20px;z-index:25;display:flex;align-items:baseline;gap:10px;max-width:440px;padding:8px 14px;
  background:#101921b8;border-radius:8px;box-shadow:0 3px 15px #0002;font-size:11px;color:var(--ui-ink);pointer-events:none}
.mission-hud button{pointer-events:auto}
.mission-status{font:700 14px/1.2 var(--ui-text);color:#e5d5a0}
.mission-distance{font:16px/1 var(--ui-title);color:var(--ui-primary)}
.traversal-hud{position:absolute;inset:0;z-index:2;pointer-events:none}
.movement-panel{position:absolute;top:20px;right:20px}
.movement-panel summary{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;list-style:none;cursor:pointer;pointer-events:auto;white-space:nowrap;
  background:linear-gradient(180deg,var(--ui-panel),var(--ui-panel-2));border:2px solid var(--ui-edge);border-radius:10px;box-shadow:0 4px 0 var(--ui-drop);
  font:700 14px var(--ui-text);color:var(--ui-ink)}
.movement-panel summary::-webkit-details-marker{display:none}
.movement-panel summary kbd,.movement-panel p kbd,.movement-panel small kbd{display:inline-grid;place-items:center;box-sizing:border-box;min-width:20px;height:20px;padding:0 5px;
  border-radius:6px;background:var(--ui-ink);color:#123d3e;box-shadow:0 2px 0 #9fb8ad;font:13px/1 var(--ui-title)}
.movement-panel[open]{width:300px;box-sizing:border-box;padding:calc(var(--ui-pad) - var(--ui-border));background:linear-gradient(180deg,var(--ui-panel),var(--ui-panel-2));
  border:2px solid var(--ui-edge);border-radius:var(--ui-radius);box-shadow:0 4px 0 var(--ui-drop);color:var(--ui-ink);pointer-events:auto}
.movement-panel[open] summary{padding:0 0 8px;background:none;border:0;box-shadow:none}
.movement-panel .eyebrow,.movement-panel .stamina-track,.movement-panel .walk-status{display:none}
.movement-panel strong{display:block;margin:0 0 4px;font:700 13px var(--ui-text)}
.movement-panel p{margin:4px 0;font-size:13px;line-height:1.6;color:var(--ui-sub)}
.movement-panel small{display:block;font-size:12px;line-height:1.6;color:var(--ui-sub)}
.movement-actions{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.movement-actions button{padding:5px 7px;font-size:12px}
.walk-toast{position:absolute;left:50%;top:112px;transform:translateX(-50%);padding:10px 16px;background:var(--ui-panel-2);border:2px solid var(--ui-edge);
  border-radius:10px;font:700 13px/1.2 var(--ui-text);color:var(--ui-ink)}
.walk-toast:empty{display:none}
/* Same GPT frames as .ui-panel / .ui-key (game/ui-art.js). */
.movement-panel summary,.movement-panel[open],.walk-toast{border-color:transparent;background:none;box-shadow:none;border-image:var(--ui-panel-art) 24 fill / 12px stretch}
.movement-panel[open]{border-image-width:14px}
.movement-panel summary kbd,.movement-panel p kbd,.movement-panel small kbd{background:none;box-shadow:none;border-image:var(--ui-key-art) 24 fill / 6px stretch}
.radio-bearing{position:fixed;left:50%;bottom:12px;z-index:22;transform:translateX(-50%);padding:6px 12px;background:var(--ui-panel-2);border-radius:8px;font-size:12px;color:var(--ui-sub)}
.radio-bearing[hidden]{display:none}
.field-map{position:fixed;top:90px;left:50%;z-index:45;transform:translateX(-50%);width:min(560px,90vw);max-height:75vh;overflow:auto;scrollbar-width:none}
.field-map[hidden]{display:none}
.field-map header{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.field-map-stage{position:relative;margin-top:var(--ui-gap)}
.field-map-stage img{display:block;width:100%;height:auto}
.field-map-stage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.field-map-me{position:absolute;z-index:1;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:#fff4cc;color:#182b24;border:2px solid #182b24;font:700 14px/1 inherit;pointer-events:none}
.field-map p{margin:var(--ui-gap) 0 0;font-size:12px;line-height:1.7;color:var(--ui-sub)}

/* Player health: heart, red bar with the damage trail, number on top. */
/* Left of the centred slot row (620 px: 3 weapon, V, G, 6 quick), 16 px apart. */
.vitals-hud{position:absolute;left:max(16px,calc(50% - 310px - 16px - 205px));bottom:30px;z-index:3;width:205px;font-size:12px;color:#dce3d2;text-shadow:0 2px 3px #000}
.vitals-hud button{display:none}
.shield-meter{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.shield-meter[hidden]{display:none}
.shield-meter.down{opacity:.45}
.shield-meter.open .shield-fill{background:linear-gradient(180deg,#d6dadb,#8a9294)}
.shield-mark{display:grid;place-items:center;width:30px;height:16px;flex:none;color:#9eebf2;font:11px/1 var(--ui-title)}
.shield-track{position:relative;flex:1;height:14px;box-sizing:border-box;background:var(--ui-panel-2);border:2px solid var(--ui-edge);border-radius:8px}
/* As on health: layers cut at once by the track's shape; the pop over them. */
.shield-clip{position:absolute;inset:0;clip-path:inset(0 round 6px)}
.shield-clip>i{position:absolute;top:0;bottom:0;left:0}
.shield-pop{position:absolute;z-index:1;top:0;bottom:0;background:#fff}
.shield-lost{background:#fff}
.shield-fill{width:0;background:linear-gradient(180deg,#e7fdff,#3ec8d8)}
.shield-number{position:absolute;z-index:2;inset:0;text-align:center;font:11px/10px var(--ui-title);color:var(--ui-ink);text-shadow:0 1px 2px #000a}
.player-health-meter{display:flex;align-items:center;gap:8px}
.health-heart{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--ui-bad);color:var(--ui-ink);
  box-shadow:0 3px 0 #8c2f27;font-size:17px}
.player-health-track{position:relative;flex:1;height:22px;box-sizing:border-box;background:var(--ui-panel-2);border:2px solid var(--ui-edge);border-radius:11px;
  box-shadow:0 3px 0 var(--ui-drop)}
/* Every layer runs from the track's left end, its own end round, and the
   track's shape cuts them all at once (no fringe where edges meet). Only
   the lost span's pop is drawn outside, over the bar and its edge. */
.player-health-clip{position:absolute;inset:0;clip-path:inset(0 round 9px)}
.player-health-clip>i{position:absolute;top:0;bottom:0;left:0}
.player-health-pop{position:absolute;z-index:1;top:0;bottom:0;background:#fff}
.player-health-lost{background:#fff}
.player-health-gain{background:#71ed9499;box-shadow:0 0 4px #71ed94}
.player-health-fill{background:linear-gradient(180deg,#f07a6c,var(--ui-bad));box-shadow:0 0 7px #ff665b88}
/* Health still to come (a treatment), as on the overhead bar. */
.player-health-heal{background:#71ed9440}
.player-health-number{position:absolute;z-index:2;inset:0;text-align:center;white-space:nowrap;font:15px/18px var(--ui-title);letter-spacing:1px;color:var(--ui-ink);text-shadow:0 1px 2px #000a}
.bleed-icon,.status-icon{position:relative;width:30px;height:30px;margin:5px 0;box-sizing:border-box;background:var(--ui-panel-2);border:2px solid var(--ui-edge);
  border-radius:var(--ui-radius-sm);box-shadow:0 3px 0 var(--ui-drop);overflow:hidden}
.bleed-icon>img,.status-icon>img{position:absolute;inset:1px;width:24px;height:24px}
/* Cooldown sweep: the spent share of the bleed cleared clockwise from 12. */
.bleed-icon>i,.status-icon>i{position:absolute;inset:0;background:conic-gradient(transparent 0 calc(var(--elapsed,0)*1turn),#000a 0)}
.bleed-icon[hidden]{display:none}
.treatment-readout{display:block;margin-top:6px;font-size:12px;color:#dcb778}
.treatment-readout:empty{display:none}
/* Screen UI scale (game/ui-scale.js): HUD and menus are drawn for a
   1080 px tall window and zoomed past it, so they keep their share of a large
   screen as the 3D view does. Full-screen layers zoom their content inside
   the viewport; elements placed on a world point (enemy cues, hearing ring,
   damage arrow) scale about that point instead of moving. */
:root{--ui-scale:1}
.inventory-screen,.pause-menu,.traversal-hud,.bunker-dialog,.weapon-hud,.vitals-hud,.cast-bar,.field-clock,
.frame-rate-overlay,.ui-menu,.inventory-drag-ghost,.mission-hud,.field-map,.radio-bearing,.raid-preparation{zoom:var(--ui-scale)}
.enemy-cues>*,.player-hearing,.damage-direction{scale:var(--ui-scale);transform-origin:0 0}
/* Support calls (combat/support-calls-view.js): status icons in a row under
   the health bar, the image the call's weapon laid corner to corner. */
.call-cooldowns{display:flex;gap:6px}
.call-cooldowns .status-icon>img{inset:auto;left:50%;top:50%;width:34px;height:auto;transform:translate(-50%,-50%) rotate(-45deg)}
/* Ctrl: the known calls over the player's head, icon then the arrows, left
   aligned; entered arrows white, the rest grey, unready rows dim. */
.call-menu{position:fixed;left:0;top:0;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:7px 9px;border-radius:var(--ui-radius-sm);background:#0d1018b0;pointer-events:none}
.call-menu[hidden]{display:none}
.call-menu.fail{animation:call-fail .3s}
@keyframes call-fail{20%{translate:-6px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:2px 0}}
.call-row{display:flex;align-items:center;gap:7px}
.call-row.off{opacity:.4}
.call-icon{position:relative;width:30px;height:30px;flex:none;overflow:hidden;border-radius:var(--ui-radius-sm);background:var(--ui-panel-2);border:2px solid var(--ui-edge);box-sizing:border-box}
.call-icon>img{position:absolute;left:50%;top:50%;width:34px;transform:translate(-50%,-50%) rotate(-45deg)}
.call-arrows{display:flex;gap:3px}
.call-arrow{display:block;width:20px;height:20px}
.call-arrow svg{display:block;width:100%;height:100%;fill:#7d828c}
.call-arrow.on svg{fill:#fff;filter:drop-shadow(0 0 3px #fff8)}
.call-arrow[data-dir=right] svg{rotate:90deg}.call-arrow[data-dir=down] svg{rotate:180deg}.call-arrow[data-dir=left] svg{rotate:270deg}
.call-wait{margin-left:4px;font:14px var(--ui-title);color:#dce3d2}
/* Sion's snipe (combat/call-scope.js): a scope over the game and its HUD (mission-hud 25), not a mask. */
.call-flash{position:fixed;inset:0;z-index:26;pointer-events:none;background:#fff6f8;opacity:0}
.call-scope{position:fixed;inset:0;z-index:26;pointer-events:none;overflow:hidden;contain:strict}
.call-scope-ring{position:absolute;left:0;top:0;overflow:visible;transform-origin:50% 50%}
.call-scope-ring .lens{fill:#7fb4ff14}
.call-scope-ring .rim{fill:none;stroke:#141627;stroke-width:9}
.call-scope-ring .rim-in{fill:none;stroke:#e9ecf6;stroke-width:1.2;opacity:.7}
.call-scope-ring .cross{fill:none;stroke:#141627;stroke-width:1.6}
.call-scope-ring .cross .ticks{stroke-width:1.4}
.call-scope-ring .lock{fill:none;stroke:#e9ecf6;stroke-width:3;transform:scale(calc(2.2 - 1.2 * var(--lock,0)));transform-origin:0 0;opacity:var(--lock,0)}
.call-scope-ring.locked .lock{stroke:#ff3a5c}
.call-scope-ring .dot{fill:#ff3a5c}
.call-scope-ring .flash{fill:#fff;opacity:var(--flash,0);transform:scale(calc(.3 + 1.2 * (1 - var(--flash,0))));transform-origin:0 0}
.call-eye{position:absolute;overflow:hidden}
.call-eye-back{position:absolute;inset:0;width:100%;height:100%}
.call-eye-back polygon{fill:#181b33f0}
.call-eye-back line{stroke:#4fe0d0;stroke-width:4;vector-effect:non-scaling-stroke}
.call-eye[hidden]{display:none}
.call-eye-art{position:absolute;overflow:visible}
.call-cut-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 47%}
.call-eye-art .glow{opacity:var(--star,0)}
.call-eye-art .star{fill:#fff;transform:scale(var(--star,0));transform-origin:227px 160px}
.call-eye-art .star.halo{fill:#ff3a5c;stroke:#ff3a5c;stroke-width:10;stroke-linejoin:round;opacity:.55}

/* Shelter dialogs (medical and rest) on the kit. */
.bunker-dialog{position:fixed;left:50%;top:50%;z-index:75;transform:translate(-50%,-50%);width:min(390px,88vw);max-height:calc(100dvh - 40px);overflow-y:auto;scrollbar-width:none}
.bunker-dialog h2{margin:0 0 8px;font:24px/1.2 var(--ui-title)}
.bunker-dialog p{margin:6px 0;font-size:14px;line-height:1.7;color:var(--ui-sub)}
.bunker-dialog [data-close]{float:right}
.bunker-rest{margin-top:20px;padding-top:16px;border-top:1px solid #2f4757}
.bunker-rest h3{margin:0 0 12px;font:700 15px var(--ui-text)}
.bunker-rest label{display:flex;justify-content:space-between;gap:16px}
.bunker-rest input[type=range]{display:block;width:100%;margin:18px 0;accent-color:var(--ui-primary)}
.bunker-rest small{display:block;margin-bottom:12px;line-height:1.65;color:var(--ui-sub)}