/* Sphere Hunter HUD theme. Every colour, font and size used by the HUD lives in
 * the tokens below; the rules further down only refer to tokens.
 *
 * Three families of tokens:
 *  --relic-*  the Stone Spheres panel on costaricasailing.net (pause modal)
 *  --hud-*    DreadRoot's lower-left player panel
 *  --dbg-*    DreadRoot's DFlow panel and FPS counter
 */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;src:url(../../fonts/source-serif-4-normal-400-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../../fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../../fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../../fonts/barlow-condensed-600.woff2) format("woff2")}

:root {
  /* Stone Spheres panel (costaricasailing.net style.css) */
  --relic-bg: #1b1915;
  --relic-surface: #26231e;
  --relic-ink: #f4efe6;
  --relic-muted: #c2b9a8;
  --relic-accent: #e0a94a;
  --relic-accent-ink: #1b1915;
  --relic-kick: #78c168;
  --relic-border: rgba(244,239,230,.16);
  --relic-grid: rgba(224,169,74,.09);
  --relic-grid-size: 48px;
  --relic-glow: rgba(240,185,90,.55);
  --relic-modal-bg: rgba(3,4,12,.86);
  --relic-panel-bg: rgba(27,25,21,.9);
  --relic-card-radius: 22px;
  --relic-radius: 14px;
  --relic-head: "Source Serif 4", Georgia, serif;
  --relic-body: "Barlow", system-ui, sans-serif;
  --relic-cond: "Barlow Condensed", "Barlow", sans-serif;
  --relic-fs-xs: .8125rem;
  --relic-fs-s: .9375rem;
  --relic-fs-m: 1.05rem;
  --relic-fs-xxl: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem);
  --relic-orb: clamp(180px, 30vh, 280px);

  /* DreadRoot player panel (index.css :root) */
  --hud-bg: hsla(211, 30%, 51%, .35);
  --hud-border: hsla(211, 34%, 73%, .8);
  --hud-text: hsl(211, 32%, 90%);
  --hud-radius: 6px;
  --gear-size: 36px;    /* admin gear button (DreadRoot FortressHUD) */
  --gear-icon: 18px;
  --gear-gap: 8px;
  --hud-font: 'Inter', sans-serif;
  --hud-heart: hsl(0, 84.2%, 60.2%);
  --hud-heart-empty: hsl(208, 50%, 40%);
  --hud-heart-empty-fill: hsla(206, 50%, 90%, .5);
  --hud-pts: #facc15;
  --hud-boost: #f97316;
  --hud-belt: #9333ea;
  --hud-belt-empty: #e9d5ff;
  --hud-belt-edge: #a855f7;
  --hud-belt-glow: rgba(168,85,247,.6);
  --hud-vip0: rgba(255,255,255,.5);
  /* Inventory, quick bar, equipment (DreadRoot index.css 110-129, SlotGrid.tsx, FortressHUD.tsx) */
  --hud-bg-dim: hsla(211, 30%, 51%, .15);
  --hud-bg-hover: hsla(211, 30%, 51%, .5);
  --hud-text-bright: hsl(211, 32%, 98%);
  --hud-blur: blur(8px) saturate(140%);
  --inv-slot: 56px;
  --inv-gap: 6px;
  --inv-ico: 42px;
  --qb-slot: 60px;
  --qb-gap: 10px;
  --inv-ok-border: hsla(120, 100%, 60%, .95);
  --inv-ok-bg: hsla(120, 60%, 25%, .35);
  --inv-sel-border: #ffffff;
  --inv-shadow: 0 1px 2px #000;
  --inv-z: 25;
  --inv-cursor-z: 3000;
  /* Tier colours T1-T10 (DreadRoot's): coins panel, lower right, above the ammo */
  --tier-1: #d8c088; --tier-2: #20d070; --tier-3: #2e8bff; --tier-4: #9a40ff; --tier-5: #ff3010;
  --tier-6: #ffffff; --tier-7: #ff40c0; --tier-9: #1a1a1a; --tier-9-fire: #ff7000;
  --tier-8-rainbow: linear-gradient(90deg, #ff3030, #ffb000, #30e030, #30c0ff, #3060ff, #c040ff, #ff3030);
  --tier-10-gold: linear-gradient(180deg, #fff2c0, #ffd000 45%, #b8860b 60%, #ffe680);
  --hud-tiers-bottom: 150px;
  --hud-tiers-gap: 10px;

  /* --adm-* the Admin panel (F2), DreadRoot's panelTheme.ts admin defaults and index.css overrides */
  --adm-w: 896px;
  --adm-h: 90vh;
  --adm-bg: hsla(211, 30%, 51%, .35);
  --adm-border: hsl(210, 100%, 60%);
  --adm-blur: 12px;
  --adm-glow: 0 0 22px hsla(210, 90%, 60%, .6);
  --adm-heading: #ffffff;
  --adm-text: hsl(211, 32%, 90%);
  --adm-muted: hsl(211, 32%, 70%);
  --adm-fs-head: 14px;
  --adm-fs-sub: 13px;
  --adm-fs-body: 13px;
  --adm-fs-tab: 14px;
  --adm-fs-info: 11px;
  --adm-tabbar: hsla(211, 30%, 30%, .35);
  --adm-tab-on: hsla(211, 30%, 51%, .5);
  --adm-tab-on-text: hsl(211, 32%, 95%);
  --adm-input-h: 40px;
  --adm-cell-h: 28px;
  --adm-input-border: hsla(211, 50%, 80%, .7);
  --adm-option-bg: hsl(211, 30%, 25%);
  --adm-primary: hsl(200, 85%, 55%);
  --adm-secondary: hsla(211, 35%, 38%, .85);
  --adm-hover: hsla(211, 35%, 45%, .6);
  --adm-row-line: hsla(211, 34%, 73%, .25);
  --ed-pic-bg: radial-gradient(circle at 50% 40%, hsla(210, 100%, 60%, .18), rgba(0,0,0,0) 70%);
  --ed-pic-h: 180px;
  --ed-card-min: 300px;
  --ed-gap: 14px;

  /* DreadRoot DFlow panel + FPS counter (panelTheme.ts defaults) */
  --dbg-bg: hsla(150, 50%, 6%, .82);
  --dbg-border: hsla(147, 50%, 57%, .55);
  --dbg-text: hsla(0, 0%, 100%, .92);
  --dbg-head: #22d3ee;
  --dbg-dim: #9ca3af;
  --dbg-faint: #6b7280;
  --dbg-good: #4ade80;
  --dbg-warn: #facc15;
  --dbg-bad: #f87171;
  --dbg-btn: #2563eb;
  --dbg-btn-done: #16a34a;
  --dbg-radius: 12px;
  --dbg-font: ui-monospace, SFMono-Regular, Menlo, monospace;
  --dbg-shadow: 0 2px 10px rgba(0,0,0,.5);

  /* Weapons HUD (Operation Ironhold) */
  --wpn-ink: #e9e6df;
  --wpn-dim: rgba(233,230,223,.55);
  --wpn-accent: #e0a94a;
  --wpn-low: #ff5a4a;
  --wpn-font: var(--relic-cond);
}

/* ---------- FPS counter, always on, top left ---------- */
.sh-fps {
  position: fixed; top: 8px; left: 8px; z-index: 50; pointer-events: none;
  padding: 4px 8px; border-radius: var(--dbg-radius); border: 1px solid var(--dbg-border);
  background: var(--dbg-bg); color: var(--dbg-text); font: 12px/1.3 var(--dbg-font);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sh-fps b { font-weight: 700; }
.sh-fps .good { color: var(--dbg-good); } .sh-fps .warn { color: var(--dbg-warn); } .sh-fps .bad { color: var(--dbg-bad); }

/* ---------- DFlow panel (# key) ---------- */
.sh-dflow {
  position: fixed; top: 44px; left: 8px; z-index: 60; width: 300px; max-height: calc(100vh - 60px); overflow: auto;
  padding: 12px; border-radius: var(--dbg-radius); border: 1px solid var(--dbg-border);
  background: var(--dbg-bg); color: var(--dbg-text); font: 11px/1.4 var(--dbg-font); box-shadow: var(--dbg-shadow);
  user-select: none; font-variant-numeric: tabular-nums;
}
.sh-dflow[hidden] { display: none; }
.sh-dflow__head { display: flex; align-items: baseline; gap: 6px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.2); }
.sh-dflow__df { color: var(--dbg-head); font-weight: 700; }
.sh-dflow__fps { font-size: 20px; font-weight: 700; }
.sh-dflow__unit { color: var(--dbg-dim); font-size: 10px; flex: 1; }
.sh-dflow__copy { font: 10px var(--dbg-font); color: #fff; background: var(--dbg-btn); border: 0; border-radius: 4px; padding: 4px 8px; cursor: pointer; }
.sh-dflow__copy.done { background: var(--dbg-btn-done); }
.sh-dflow__status { color: var(--dbg-faint); font-size: 10px; margin-bottom: 6px; }
.sh-dflow__issues { background: rgba(127,29,29,.5); border: 1px solid rgba(239,68,68,.5); border-radius: 4px; padding: 6px; margin-bottom: 6px; color: #fca5a5; font-size: 10px; }
.sh-dflow__issues b { color: var(--dbg-bad); }
.sh-dflow__sec { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1); }
.sh-dflow__sec h4 { margin: 0 0 4px; color: var(--dbg-head); font-size: 10px; font-weight: 700; }
.sh-dflow__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; }
.sh-dflow__grid span { color: var(--dbg-dim); }
.sh-dflow__grid output { text-align: right; }
.sh-dflow__foot { margin-top: 8px; color: var(--dbg-faint); font-size: 9px; text-align: center; }
.sh-dflow .good { color: var(--dbg-good); } .sh-dflow .warn { color: var(--dbg-warn); } .sh-dflow .bad { color: var(--dbg-bad); }

/* ---------- Player panel, lower left (DreadRoot FortressHUD) ---------- */
/* Bottom-left corner: the player panel, then DreadRoot's admin gear button beside it. */
.sh-hudleft { position: fixed; left: 16px; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: var(--gear-gap); }
.sh-gear { width: var(--gear-size); height: var(--gear-size); padding: 0; display: flex; align-items: center; justify-content: center;
  border-radius: var(--hud-radius); border: 1px solid var(--hud-border); background: var(--hud-bg); color: var(--hud-text); cursor: pointer; }
.sh-gear:hover { background: var(--hud-bg-hover); }
.sh-gear svg { width: var(--gear-icon); height: var(--gear-icon); }
.sh-player {
  display: flex; align-items: center; gap: 10px;
  box-sizing: border-box; height: 75px; padding: 8px 12px; border-radius: var(--hud-radius);
  border: 1px solid var(--hud-border); background: var(--hud-bg); color: var(--hud-text); font-family: var(--hud-font);
  pointer-events: none;
}
.sh-player__left { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sh-player__vip { font-size: 11px; font-weight: 700; line-height: 1; color: var(--hud-vip0); }
.sh-player__right { display: flex; flex-direction: column; gap: 6px; }
.sh-player__row1 { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sh-player__name { font-weight: 600; }
.sh-player__lvl { font-weight: 600; opacity: .85; }
/* the [hidden] attribute must win over display rules */
.sh-player__mode[hidden] { display: none; }
.sh-player__mode { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--hud-pts); }
.sh-player__coin { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.sh-player__coin img { width: 18px; height: 18px; }
.sh-player__orb { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.sh-player__orb i { display: block; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f2ede2, #8e8a82 55%, #2f2c27); box-shadow: 0 0 0 1px var(--relic-accent); }
.sh-player__row2, .sh-player__row3 { display: flex; align-items: center; gap: 6px; transform: scale(.8); transform-origin: left center; }
.sh-hearts { display: flex; gap: 2px; }
.sh-hearts svg { width: 12px; height: 12px; }
.sh-hearts .full { fill: var(--hud-heart); stroke: var(--hud-heart); filter: drop-shadow(0 0 2px hsla(0, 84%, 60%, .5)); }
.sh-hearts .empty { fill: var(--hud-heart-empty-fill); stroke: var(--hud-heart-empty); }
.sh-player__hp { font-size: 10px; font-weight: 700; color: #fff; }
.sh-player__pts { font-size: 10px; font-weight: 700; color: var(--hud-pts); }
.sh-boosts { display: flex; gap: 2px; }
.sh-boosts svg { width: 12px; height: 12px; filter: drop-shadow(0 0 2px rgba(255,165,0,.5)); }
.sh-boosts .on { fill: var(--hud-boost); stroke: var(--hud-boost); }
.sh-boosts .off { fill: none; stroke: var(--hud-boost); stroke-width: 1.5; }
.sh-belt { display: flex; gap: 2px; }
.sh-belt svg { width: 16px; height: 13px; filter: drop-shadow(0 0 2px var(--hud-belt-glow)); }
.sh-belt .on { fill: var(--hud-belt); }
.sh-belt .off { fill: var(--hud-belt-empty); }
.sh-belt .edge { fill: none; stroke: var(--hud-belt-edge); stroke-width: 1; }

/* ---------- Pause modal (Stone Spheres panel look) ---------- */
.sh-pause {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: var(--relic-modal-bg);
}
.sh-pause[hidden] { display: none; }
.sh-pause__card {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 24px 24px 28px; text-align: center;
  border-radius: var(--relic-card-radius); border: 1px solid var(--relic-border); color: var(--relic-ink);
  font-family: var(--relic-body); box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden;
  background-color: var(--relic-bg);
  background-image: linear-gradient(var(--relic-grid) 1px, transparent 1px), linear-gradient(90deg, var(--relic-grid) 1px, transparent 1px);
  background-size: var(--relic-grid-size) var(--relic-grid-size);
}
.sh-pause__kicker {
  display: inline-block; padding: 4px 12px; border: 1px solid var(--relic-kick); border-radius: 999px; color: var(--relic-kick);
  font: 600 var(--relic-fs-xs)/1.4 var(--relic-body); letter-spacing: .16em; text-transform: uppercase;
}
.sh-pause__title {
  margin: 10px 0 0; font: 600 var(--relic-fs-xxl)/1.02 var(--relic-head); letter-spacing: -.015em; color: var(--relic-accent);
  animation: sh-glow 2.8s ease-in-out infinite;
}
@keyframes sh-glow { 0%,100% { text-shadow: 0 0 2px var(--relic-glow); } 50% { text-shadow: 0 0 14px var(--relic-glow), 0 0 32px var(--relic-glow); } }
.sh-pause__orb { display: block; width: 100%; height: var(--relic-orb); margin: 8px 0 4px; }
.sh-pause__keys {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 4px auto 18px; max-width: 360px; text-align: left;
  font-size: var(--relic-fs-s); color: var(--relic-muted);
}
.sh-pause__keys b { color: var(--relic-ink); font-family: var(--relic-cond); letter-spacing: .04em; }
.sh-pause__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 0;
  border-radius: var(--relic-radius); background: var(--relic-accent); color: var(--relic-accent-ink);
  font: 600 var(--relic-fs-m) var(--relic-body); cursor: pointer; transition: transform .15s, filter .15s;
}
.sh-pause__btn:hover, .sh-pause__btn:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
.sh-pause__note { margin: 12px 0 0; font-size: var(--relic-fs-xs); color: var(--relic-muted); }

/* ---------- Weapons HUD (Operation Ironhold layout) ---------- */
.sh-xh { position: fixed; z-index: 15; pointer-events: none; }
.sh-xh.hidden { display: none; }
.sh-hit { position: fixed; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 16; pointer-events: none; opacity: 0;
  background: linear-gradient(45deg, transparent 45%, var(--wpn-ink) 45%, var(--wpn-ink) 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--wpn-ink) 45%, var(--wpn-ink) 55%, transparent 55%);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
.sh-hit.show { animation: sh-hit .22s ease-out; }
@keyframes sh-hit { from { opacity: 1; } to { opacity: 0; } }
.sh-ammo__icon { opacity: .9; }
.sh-ammo {
  position: fixed; right: 22px; bottom: 18px; z-index: 20; pointer-events: none; text-align: right;
  color: var(--wpn-ink); font-family: var(--wpn-font); text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.sh-ammo__name { font-size: 15px; letter-spacing: .12em; }
.sh-ammo__mode { font-size: 12px; letter-spacing: .14em; color: var(--wpn-dim); }
.sh-ammo__row { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.sh-ammo__mag { font-size: 44px; line-height: 1; }
.sh-ammo__mag.low { color: var(--wpn-low); }
.sh-ammo__res { font-size: 20px; color: var(--wpn-dim); }
.sh-ammo__hint { font-size: 13px; letter-spacing: .14em; color: var(--wpn-accent); }
.sh-ammo__nade { font-size: 12px; letter-spacing: .14em; color: var(--wpn-dim); }
.sh-slots { position: fixed; right: 22px; bottom: 112px; z-index: 20; display: flex; gap: 6px; pointer-events: none;
  font: 12px var(--wpn-font); color: var(--wpn-dim); }
.sh-slots span { padding: 2px 7px; border: 1px solid rgba(233,230,223,.25); border-radius: 4px; }
.sh-slots span.on { color: var(--wpn-ink); border-color: var(--wpn-accent); }
.sh-scope { position: fixed; inset: 0; z-index: 14; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0 33vh, #000 33.2vh); }
.sh-scope::before, .sh-scope::after { content: ""; position: absolute; background: rgba(0,0,0,.85); }
.sh-scope::before { left: 50%; top: 17vh; bottom: 17vh; width: 1px; }
.sh-scope::after { top: 50%; left: calc(50% - 33vh); right: calc(50% - 33vh); height: 1px; }

/* ---------- Admin panel (F2), DreadRoot's look (AdminPanel.tsx, panelTheme.ts, index.css 699-790) ---------- */
.sh-ed {
  position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; box-sizing: border-box;
  width: min(var(--adm-w), calc(100vw - 32px)); height: var(--adm-h); min-width: min(600px, calc(100vw - 32px)); min-height: 400px;
  max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); resize: both; overflow: hidden;
  border-radius: var(--hud-radius); border: 1px solid var(--adm-border); background: var(--adm-bg); backdrop-filter: blur(var(--adm-blur));
  color: var(--adm-text); font: var(--adm-fs-body) var(--hud-font); box-shadow: var(--adm-glow);
}
.sh-ed[hidden] { display: none; }
.sh-ed__head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: grab; user-select: none; }
.sh-ed__title { margin: 0; font-size: var(--adm-fs-head); font-weight: 700; color: var(--adm-heading); }
.sh-ed__status { font-size: var(--adm-fs-info); color: var(--adm-muted); }
.sh-ed__close { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: var(--hud-radius); background: transparent;
  color: var(--adm-heading); font-size: 20px; line-height: 1; cursor: pointer; }
.sh-ed__close:hover, .sh-ed__close:focus-visible { background: var(--adm-hover); outline: none; }
.sh-ed__tabs, .sh-ed__subs { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; margin: 0 14px 6px;
  padding: 4px; min-height: 40px; box-sizing: border-box; border-radius: var(--hud-radius); background: var(--adm-tabbar); }
.sh-ed__subs[hidden] { display: none; }
.sh-ed__tab { padding: 6px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--adm-muted);
  font: 500 var(--adm-fs-tab) var(--hud-font); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-ed__tab.on { background: var(--adm-tab-on); color: var(--adm-tab-on-text); }
.sh-ed__tab:hover, .sh-ed__tab:focus-visible { color: var(--adm-tab-on-text); outline: none; }
.sh-ed__body { flex: 1; overflow-y: auto; padding: 8px 14px 14px; }
.sh-ed__empty { max-width: 560px; margin: 32px auto; text-align: center; color: var(--adm-muted); }
.sh-ed__info { margin: 0 0 8px; font-size: var(--adm-fs-info); color: var(--adm-muted); }
.sh-ed__h { margin: 0 0 4px; font-size: var(--adm-fs-sub); font-weight: 600; color: var(--adm-heading); }
.sh-ed__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ed-card-min), 100%), 1fr)); gap: var(--ed-gap); }
.sh-ed__card, .sh-ed__block { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin-bottom: 12px;
  border-radius: var(--hud-radius); border: 1px solid var(--hud-border); background: var(--hud-bg-dim); }
.sh-ed__grid .sh-ed__card { margin-bottom: 0; }
.sh-ed__blockhead { display: flex; align-items: center; gap: 10px; }
.sh-ed__pic { position: relative; overflow: hidden; height: var(--ed-pic-h); display: grid; place-items: center; border-radius: var(--hud-radius); background: var(--ed-pic-bg); }
.sh-ed__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.sh-ed__pic .sh-item-ico { width: 96px; height: 96px; }
.sh-ed__badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--adm-primary);
  color: var(--adm-heading); font: 700 var(--adm-fs-info) var(--hud-font); letter-spacing: .04em; }
.sh-ed__blockhead .sh-ed__badge { position: static; }
.sh-ed__note { margin: 0; font-size: var(--adm-fs-info); color: var(--adm-muted); overflow-wrap: anywhere; }
.sh-ed__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh-ed__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--adm-fs-info); color: var(--adm-muted); }
.sh-ed__field.long, .sh-ed__field:first-child { grid-column: 1 / -1; }
.sh-ed__field input, .sh-ed__field textarea, .sh-ed__name, .sh-ed__num, .sh-ed__select {
  box-sizing: border-box; width: 100%; min-height: var(--adm-input-h); padding: 8px 12px; border-radius: var(--hud-radius);
  border: 1px solid var(--adm-input-border); background: var(--hud-bg-dim); color: var(--adm-heading); font: var(--adm-fs-body) var(--hud-font); resize: vertical;
}
.sh-ed__select { appearance: none; background-image: none; cursor: pointer; }
.sh-ed__select option { background: var(--adm-option-bg); color: var(--adm-heading); }
.sh-ed__table .sh-ed__num, .sh-ed__table .sh-ed__select { min-height: var(--adm-cell-h); padding: 2px 8px; font-size: var(--adm-fs-info); }
.sh-ed__name { max-width: 280px; }
.sh-ed__field input:focus, .sh-ed__field textarea:focus, .sh-ed__name:focus, .sh-ed__num:focus, .sh-ed__select:focus { outline: none; border-color: var(--adm-border); }
.sh-ed__table { width: 100%; border-collapse: collapse; font-size: var(--adm-fs-body); }
.sh-ed__table th { text-align: left; font-weight: 600; color: var(--adm-muted); padding: 6px 8px; border-bottom: 1px solid var(--hud-border); }
.sh-ed__table td { padding: 4px 8px; border-bottom: 1px solid var(--adm-row-line); }
.sh-ed__table tbody tr:hover { background: var(--adm-hover); }
.sh-ed__table tfoot td { font-weight: 600; background: var(--adm-hover); }
.sh-ed__btn { align-self: flex-start; min-height: 36px; padding: 0 12px; border: 1px solid var(--hud-border); border-radius: var(--hud-radius);
  background: var(--adm-secondary); color: var(--adm-heading); font: 500 var(--adm-fs-tab) var(--hud-font); cursor: pointer; }
.sh-ed__btn--primary { background: var(--adm-primary); border-color: var(--adm-primary); }
.sh-ed__btn--ghost { min-height: 28px; padding: 0 8px; border: 0; background: transparent; }
.sh-ed__btn:hover, .sh-ed__btn:focus-visible { background: var(--adm-hover); outline: none; }

/* Coins by tier (coinPanel.js): the player panel's look, lower right above the ammo; only tiers you have. */
.sh-tiers {
  position: fixed; right: 16px; bottom: var(--hud-tiers-bottom); z-index: 20; display: flex; flex-wrap: wrap;
  justify-content: flex-end; gap: 4px var(--hud-tiers-gap); max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 8px 12px; border-radius: var(--hud-radius); border: 1px solid var(--hud-border); background: var(--hud-bg);
  font-family: var(--hud-font); font-size: 13px; font-weight: 700; pointer-events: none;
}
.sh-tiers[hidden] { display: none; }
.sh-tiers__t { white-space: nowrap; }
.sh-tiers__t.t1 { color: var(--tier-1); } .sh-tiers__t.t2 { color: var(--tier-2); } .sh-tiers__t.t3 { color: var(--tier-3); }
.sh-tiers__t.t4 { color: var(--tier-4); } .sh-tiers__t.t5 { color: var(--tier-5); } .sh-tiers__t.t6 { color: var(--tier-6); }
.sh-tiers__t.t7 { color: var(--tier-7); }
.sh-tiers__t.t8 { background: var(--tier-8-rainbow); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: sh-tier-rainbow 3s linear infinite; }
.sh-tiers__t.t9 { color: var(--tier-9); text-shadow: 0 0 4px var(--tier-9-fire), 0 0 8px var(--tier-9-fire); }
.sh-tiers__t.t10 { background: var(--tier-10-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes sh-tier-rainbow { to { background-position: -200% 0; } }

/* ---------- Inventory, quick bar, equipment (items/invUI.js), DreadRoot's look ---------- */
.sh-inv { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: var(--inv-z); display: flex;
  flex-direction: column; align-items: center; gap: 8px; font-family: var(--hud-font); color: var(--hud-text); }
.sh-inv__panel { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--hud-radius);
  border: 1px solid var(--hud-border); background: var(--hud-bg); backdrop-filter: var(--hud-blur); max-width: calc(100vw - 32px); }
.sh-inv__panel[hidden] { display: none; }
.sh-inv__head { display: flex; align-items: baseline; gap: 10px; min-height: 16px; }
.sh-inv__label { font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.sh-inv__info { font-size: 11px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.sh-inv__body { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.sh-inv__grid { display: grid; grid-template-columns: repeat(6, var(--inv-slot)); gap: var(--inv-gap); }
.sh-inv__equip { display: grid; grid-template-columns: repeat(2, var(--inv-slot)); gap: 14px var(--inv-gap); padding-bottom: 12px; }
.sh-slots[hidden] { display: none; }
.sh-inv__bar { display: flex; gap: var(--qb-gap); align-items: flex-start; }
.sh-inv__quick { display: flex; gap: var(--qb-gap); }
.sh-slot { position: relative; width: var(--inv-slot); height: var(--inv-slot); cursor: pointer; user-select: none; }
.sh-slot--quick { width: var(--qb-slot); height: var(--qb-slot); padding-bottom: 14px; box-sizing: content-box; }
.sh-slot__tile { position: absolute; inset: 0; bottom: auto; height: var(--inv-slot); display: grid; place-items: center;
  border-radius: var(--hud-radius); border: 1px solid var(--hud-border); background: var(--hud-bg-dim); backdrop-filter: var(--hud-blur);
  transition: border-color .15s, background .15s; box-sizing: border-box; }
.sh-slot--quick .sh-slot__tile { height: var(--qb-slot); }
.sh-slot.is-sel .sh-slot__tile { border: 2px solid var(--inv-sel-border); background: var(--hud-bg); }
.sh-slot.is-ok .sh-slot__tile { border: 2px solid var(--inv-ok-border); background: var(--inv-ok-bg); }
.sh-slot.is-from .sh-slot__tile { opacity: .2; }
.sh-item-ico { width: var(--inv-ico); height: var(--inv-ico); fill: var(--hud-text-bright); }
.sh-slot__tier, .sh-slot__n { position: absolute; font-size: 9px; font-weight: 700; color: #fff; text-shadow: var(--inv-shadow); }
.sh-slot__tier { top: 3px; left: 4px; }
.sh-slot__n { bottom: 3px; right: 4px; }
.sh-slot__num { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; opacity: .7; }
.sh-slot.is-sel .sh-slot__num { opacity: 1; color: var(--hud-text-bright); }
.sh-slot__label { position: absolute; top: calc(100% + 1px); left: 0; right: 0; text-align: center; font-size: 9px; text-transform: uppercase; opacity: .8; }
.sh-inv__drop { position: relative; width: var(--qb-slot); height: var(--qb-slot); display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px dashed var(--hud-border); background: var(--hud-bg-dim); font-size: 10px; font-weight: 700; }
.sh-inv__drop[hidden], .sh-inv__confirm[hidden], .sh-inv__cursor[hidden], .sh-pickup[hidden] { display: none; }
.sh-inv__confirm { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 8px;
  border-radius: var(--hud-radius); border: 1px solid var(--hud-border); background: var(--hud-bg); font-size: 11px; display: flex; gap: 6px; align-items: center; }
.sh-inv__confirm button { font: inherit; font-weight: 700; color: var(--hud-text-bright); background: var(--hud-bg-hover); border: 1px solid var(--hud-border);
  border-radius: var(--hud-radius); padding: 2px 8px; cursor: pointer; }
.sh-inv__cursor { position: fixed; left: -24px; top: -24px; width: 48px; height: 48px; pointer-events: none; z-index: var(--inv-cursor-z); }
.sh-inv__cursor .sh-item-ico { width: 48px; height: 48px; }
.sh-pickup { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: var(--inv-z); font-family: var(--hud-font);
  font-size: 13px; font-weight: 600; color: var(--hud-text-bright); padding: 4px 10px; border-radius: var(--hud-radius);
  border: 1px solid var(--hud-border); background: var(--hud-bg); }