/* ===== CADLE HUD — FF14 ornate (gold filigree, aether-blue glow, serif small-caps) × Destiny clarity ===== */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; font-family: 'Segoe UI', system-ui, sans-serif; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: none; }
#ui { position: fixed; inset: 0; pointer-events: none; user-select: none; overflow: hidden;
  --gold: #d8bd7a; --gold-hi: #f6e3ac; --gold-dim: rgba(216,189,122,0.42);
  --aether: #8fd8ff; --aether-glow: rgba(127,200,255,0.55);
  --ivory: #f2ead6; --panel: linear-gradient(160deg, rgba(16,20,38,0.62), rgba(8,10,22,0.38));
  --serif: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;

  /* ==========================================================================================
     THE HOUSE GEOMETRY — the same token set index.html declares for cadle.gg, and the same values
     for every one of them except --cut, which is 8px here against the site's 11px because game
     chrome is denser (the site's own .btn.sm drops to 8 for the same reason).
     Audited before this block existed: across this sheet and screencss.js, 14 distinct
     corner radii, 34 distinct edge shorthands and 24 distinct gold hairline alphas — none of it a
     decision, each one whatever was nearest, which is why the HUD and the full-screen menus never
     read as parts of one object.

     THE SHAPE is a cut corner, top-left and bottom-right. The site's Play button and /play's
     loading track already wear it, so anything rectangular in here wears it too — a radius is
     kept only where a chamfer would be wrong (circles, pills, the reticle, meter tracks, and
     the two big glass panels, whose corner studs sit OUTSIDE the box and would be clipped away
     by a clip-path). Small controls take a smaller cut the way the site's .btn.sm does; that is
     the size of one shape, not a second shape.
     ========================================================================================== */
  /* NO --chamfer. The cut corner was tried across both the site and the game and read as
     effortful rather than designed (user, 2026-08-29). The house shape is a radius from the
     scale below, and a full pill on anything that behaves like a button. */
  /* the struck hairline that rides just inside the cut — the second half of the site's plate.
     A box-shadow, not a pseudo-element: half the things in here have both pseudos spoken for. */
  --struck: inset 0 0 0 1px rgba(216,189,122,.10), inset 0 1px 0 rgba(255,246,220,.14);
  --struck-down: inset 0 0 0 1px rgba(216,189,122,.10), inset 0 -1px 0 rgba(255,246,220,.12);

  /* THREE hairlines, not twenty-four. faint = a division INSIDE a panel, rule = an edge,
     lit = an edge that is doing something (focused, active, held). A border that wants a fourth
     alpha is a border that is wrong. Semantic edges — warn red, gain green, aether preview,
     rarity colour-mix — are signals, not chrome, and keep their own colours. */
  --rule-faint: rgba(216,189,122,.12);
  --rule: rgba(216,189,122,.24);
  --rule-lit: rgba(253,243,205,.62);

  /* THREE radii, plus 0 and fully-round. Pill and 50% are the same "round it off" step. */
  --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-pill: 999px;
}
#ui * { box-sizing: border-box; }
.scaps { font-family: var(--serif); font-variant: small-caps; letter-spacing: 0.14em; }
.hidden { display: none !important; }

/* ---------- perf overlay (debug) ---------- */
#perf { position: absolute; top: 8px; left: 50%; transform: translateX(calc(-50% + 330px)); font: 12px/1.4 ui-monospace, Consolas, monospace; color: #9fd; background: rgba(0,0,0,0.45); padding: 6px 8px; --cut: var(--cut-sm); white-space: pre; }

/* ---------- crosshair ---------- */
#ch { position: absolute; left: 50%; top: 50%; width: 0; height: 0; color: rgba(250,250,246,0.95); filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.95)) drop-shadow(0 0 3px rgba(0,0,0,0.5)); }
#ch .dot { position: absolute; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: currentColor; }
#ch .ring { position: absolute; width: 44px; height: 44px; margin: -22px; border-radius: 50%; border: 1.4px solid currentColor; opacity: 0.85; will-change: transform; }
#ch .tk { position: absolute; background: currentColor; border-radius: var(--r-sm); opacity: 0.92; will-change: transform; }
#ch .tv { width: 2px; height: 10px; left: -1px; top: 0; }
#ch .th { width: 10px; height: 2px; left: 0; top: -1px; }
#ch[data-arch="handcannon"] .tk { display: none; }
#ch[data-arch="shotgun"] .tv { display: none; }
#ch[data-arch="pulse"] .tk, #ch[data-arch="sniper"] .tk { opacity: 0.8; }
#ch[data-arch="fusion"] .tv { display: none; }
#ch[data-arch="scout"] .tk { opacity: 0.8; }
#ch[data-arch="beam"] .tv { display: none; }
#ch[data-arch="beam"] .th { width: 16px; }
#ch[data-arch="fusion"] .th { width: 14px; }
#ch:not([data-arch="handcannon"]):not([data-arch="shotgun"]) .ring { display: none; }
#chargebar { position: absolute; left: -31px; top: 26px; width: 62px; height: 5px; padding: 1px; background: rgba(6,8,16,0.55); border: 1px solid var(--rule); border-radius: var(--r-sm); opacity: 0; }
#chargebar i { display: block; height: 100%; width: 100%; background: var(--aether); box-shadow: 0 0 8px var(--aether-glow); border-radius: var(--r-sm); transform-origin: left; transform: scaleX(0); will-change: transform; }
#hitmark { position: absolute; left: 0; top: 0; opacity: 0; color: #fff; }
#hitmark i { position: absolute; width: 2px; height: 11px; left: -1px; top: -5.5px; background: currentColor; border-radius: var(--r-sm); box-shadow: 0 0 3px rgba(0,0,0,0.7); }
#hitmark.crit { color: #ffd24a; } #hitmark.kill { color: #ffe9a0; }

/* directional damage arcs */
#dmgdir { position: absolute; left: 50%; top: 50%; }
/* A 160 px ring around the crosshair was a tick you could miss — the wave-6 coherence walk lost 9 HP to
   a wisp and never found it. This is a real screen-edge wedge now (44vmin, the Destiny/FF14 read), drawn
   as a tapered conic sector so what you notice is the DIRECTION, not a decorative circle. Eight of them
   animate independently, so three attackers read as three wedges.
   The blob decree applies to the HUD too: the hot end is a saturated ember, never a white core, and the
   mask hollows out everything inside 78% of the radius so the world in front of you is never washed. */
#dmgdir .arc { position: absolute; left: -33vmin; top: -33vmin; width: 66vmin; height: 66vmin; border-radius: 50%;
  opacity: 0; will-change: transform, opacity;
  background: conic-gradient(from -24deg, rgba(255,108,54,0) 0deg, rgba(255,96,44,0.62) 10deg, rgba(255,72,30,0.92) 24deg, rgba(255,96,44,0.62) 38deg, rgba(255,108,54,0) 48deg);
  -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 86%, #000 97%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 70%, #000 86%, #000 97%, transparent 100%);
  filter: drop-shadow(0 0 12px rgba(120,16,4,0.6)); }

/* sniper scope */
#scope { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transition: opacity 0.08s; }
#scope .lens { position: absolute; width: 62vh; height: 62vh; left: -31vh; top: -31vh; border-radius: 50%; box-shadow: 0 0 0 4000px rgba(2,3,8,0.985), inset 0 0 60px rgba(0,0,0,0.9), inset 0 0 6px var(--gold-dim); border: 2px solid var(--rule); }
#scope .lh { position: absolute; left: -31vh; top: -0.5px; width: 62vh; height: 1px; background: rgba(220,230,240,0.65); }
#scope .lv { position: absolute; top: -31vh; left: -0.5px; height: 62vh; width: 1px; background: rgba(220,230,240,0.65); }
#scope .ld { position: absolute; width: 3px; height: 3px; left: -1.5px; top: -1.5px; border-radius: 50%; background: var(--aether); box-shadow: 0 0 6px var(--aether-glow); }

/* ---------- vitals (top-left) ---------- */
#vitals { position: absolute; top: 26px; left: 28px; display: flex; align-items: center; gap: 12px; }
#lvl { width: 34px; height: 34px; transform: rotate(45deg); border: 1px solid var(--rule-lit); background: var(--panel); box-shadow: 0 0 10px rgba(0,0,0,0.5), inset 0 0 8px rgba(216,189,122,0.15); display: flex; align-items: center; justify-content: center; }
#lvl b { transform: rotate(-45deg); color: var(--gold-hi); font: 600 15px var(--serif); }
#vitals .bars { display: flex; flex-direction: column; gap: 4px; }
.bar { position: relative; background: rgba(6,8,16,0.6); border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.bar i { position: absolute; inset: 0; transform-origin: left; will-change: transform; border-radius: var(--r-sm); }
#sbar { width: 240px; height: 7px; }
#hbar { width: 240px; height: 10px; }
#bbar { width: 240px; height: 5px; }
#bbar .fill { background: linear-gradient(180deg, #cfeeff, #6fc8ee 55%, #2f86b4); }
#bbar.low .fill { background: linear-gradient(180deg, #ffd0c0, #e2543c 60%, #a82f1c); box-shadow: 0 0 8px rgba(255,60,30,0.5); }
#sbar .fill { background: linear-gradient(180deg, #c8ecff, #6fc4f2 60%, #4e9fd4); box-shadow: 0 0 10px var(--aether-glow); }
#hbar .fill { background: linear-gradient(180deg, #fdf8ea, #e7dcc0 55%, #c9b98f); }
#hbar.low .fill { background: linear-gradient(180deg, #ffb0a0, #e2543c 60%, #a82f1c); box-shadow: 0 0 10px rgba(255,60,30,0.5); }
.bar .ghost { background: rgba(255,120,70,0.55); }
.bar .shim { opacity: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%) no-repeat; background-size: 200% 100%; }
.bar.regen .shim { opacity: 1; animation: shimmer 0.9s linear infinite; }
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* low health vignette */
#lowhp { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 42%, rgba(140,10,5,0.55) 82%, rgba(90,0,0,0.8)); will-change: opacity; }
#lowhp.pulse { animation: lowpulse 1.1s ease-in-out infinite; }
@keyframes lowpulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.55); } }

/* ---------- ammo (bottom-right) ---------- */
#ammo { position: absolute; right: 34px; bottom: 30px; text-align: right; }
#wline { display: flex; align-items: center; justify-content: flex-end; gap: 7px; color: var(--gold-hi); font: 500 15px var(--serif); font-variant: small-caps; letter-spacing: 0.12em; text-shadow: 0 0 8px rgba(0,0,0,0.9); }
#wline svg { width: 15px; height: 15px; filter: drop-shadow(0 0 4px currentColor); }
#wnums { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; margin-top: -2px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
#mag { font: 600 44px/1.05 'Segoe UI', system-ui, sans-serif; color: #f5f2e8; }
#mag.low { color: #ffcf5e; animation: lowpulse 0.8s ease-in-out infinite; }
#mag.empty { color: #ff5f42; }
#res { font: 500 19px 'Segoe UI', system-ui, sans-serif; color: rgba(240,236,222,0.72); }
#res::before { content: '·'; margin-right: 8px; color: var(--gold-dim); }
#rline { position: relative; height: 3px; width: 176px; margin: 3px 0 6px auto; background: rgba(216,189,122,0.18); border-radius: var(--r-sm); }
#rline i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--aether); box-shadow: 0 0 6px var(--aether-glow); border-radius: var(--r-sm); will-change: transform; }
/* glimmer wallet — small, rides the ammo cluster (src/rpg glimmer economy) */
#glim { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; margin-top: 4px;
  font: 500 13.5px var(--serif); letter-spacing: 0.08em; color: var(--gold-hi);
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
#glim svg { align-self: center; filter: drop-shadow(0 0 3px rgba(211,165,72,0.55)); }
#glim u { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dim); text-decoration: none; }

/* ---------- abilities (bottom-left) ---------- */
#abil { position: absolute; left: 30px; bottom: 30px; }
#abrow { display: flex; align-items: flex-end; gap: 18px; }
.ab { position: relative; width: 44px; height: 44px; }
.ab.sup { width: 62px; height: 62px; }
.ab .dia { position: absolute; inset: 0; transform: rotate(45deg); overflow: hidden; border: 1px solid var(--rule-lit); background: var(--panel); box-shadow: 0 0 12px rgba(0,0,0,0.55), inset 0 0 10px rgba(140,190,255,0.10); border-radius: var(--r-sm); }
.ab .in { position: absolute; inset: -30%; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; }
.ab svg { width: 58%; height: 58%; color: var(--aether); filter: drop-shadow(0 0 5px var(--aether-glow)); }
.ab.sup svg { color: var(--gold-hi); filter: drop-shadow(0 0 7px rgba(246,227,172,0.7)); }
.ab .cd { position: absolute; inset: -30%; will-change: background; }
.ab.ready .cd { background: none !important; }
.ab.ready .dia { border-color: var(--gold-hi); box-shadow: 0 0 14px rgba(216,189,122,0.35), inset 0 0 10px rgba(140,190,255,0.16); }
.ab:not(.ready) svg { opacity: 0.4; filter: none; }
.ab b { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font: 600 11px var(--serif); color: rgba(240,230,205,0.9); letter-spacing: 0.1em; text-shadow: 0 1px 3px #000; }
.ab.sup.active .dia { animation: suppulse 0.7s ease-in-out infinite; }
@keyframes suppulse { 0%,100% { box-shadow: 0 0 14px rgba(246,227,172,0.5); } 50% { box-shadow: 0 0 26px rgba(246,227,172,0.95); } }
#smeter { position: relative; margin-top: 26px; width: 226px; height: 5px; background: rgba(6,8,16,0.6); border: 1px solid var(--rule); border-radius: var(--r-sm); }
#smeter i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #b590ff, var(--aether), var(--gold-hi)); border-radius: var(--r-sm); will-change: transform; }
#smeter.full { box-shadow: 0 0 12px rgba(246,227,172,0.45); }
#smeter.full i { animation: lowpulse 1s ease-in-out infinite; }

/* ---------- damage numbers ---------- */
#dnums { position: absolute; inset: 0; overflow: hidden; }
#dnums b { position: absolute; left: 0; top: 0; font: 700 17px 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.5); opacity: 0; will-change: transform, opacity; letter-spacing: 0.02em; }
#dnums b.crit { font-size: 24px; font-weight: 800; }

/* ---------- target nameplate ---------- */
/* World-tracked (HUD.js writes the transform every frame from the creature's head bbox, exactly like
   #guide). It used to be pinned at top:15.5%, i.e. ~350 px above whatever you were aiming at, floating
   in the sky and — during the sticky hold — over a bystander. Do not put left/top back. */
#tgt { position: absolute; left: 0; top: 0; width: 196px; opacity: 0; transition: opacity 0.12s; text-align: center; }
#tgt .tname { font: 500 16px var(--serif); font-variant: small-caps; letter-spacing: 0.12em; color: var(--ivory); text-shadow: 0 1px 4px rgba(0,0,0,0.95); margin-bottom: 4px; }
#tgt .tlvl { color: var(--gold-hi); font-size: 13px; margin-left: 8px; }
#tgt .bar { height: 6px; width: 100%; }
#tgt .tfill { background: linear-gradient(180deg, #ff9c8a, #d2482e); }
#tgt .tsh { background: linear-gradient(180deg, #d5f0ff, #6fc4f2); box-shadow: 0 0 8px var(--aether-glow); }

/* ---------- boss bar ---------- */
#boss { position: absolute; left: 50%; top: 6.5%; transform: translateX(-50%); width: 560px; opacity: 0; transition: opacity 0.3s; text-align: center; }
#boss .bname { font: 500 21px var(--serif); font-variant: small-caps; letter-spacing: 0.2em; color: var(--gold-hi); text-shadow: 0 0 12px rgba(216,189,122,0.5), 0 1px 4px rgba(0,0,0,0.95); margin-bottom: 5px; }
#boss .bar { height: 9px; border-color: var(--rule); }
#boss .bfill { background: linear-gradient(180deg, #ff8f7a, #c02f18 60%, #8e1f0d); }
#boss .bsh { background: linear-gradient(180deg, #d5f0ff, #6fc4f2); opacity: 0.9; }
#boss s { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--gold-dim); text-decoration: none; }

/* ---------- escort guide frame (world-tracked: HUD.js sets left/top via transform every frame, not CSS —
   the player is usually walking beside it, not staring down the crosshair like #tgt/#boss) ---------- */
#guide { position: absolute; left: 0; top: 0; width: 200px; opacity: 0; transition: opacity 0.15s; text-align: center; }
#guide .gname { font: 500 14px var(--serif); font-variant: small-caps; letter-spacing: 0.14em; color: #bdf5c8; text-shadow: 0 0 10px rgba(95,217,126,0.55), 0 1px 4px rgba(0,0,0,0.95); margin-bottom: 4px; }
#guide .bar { height: 6px; width: 100%; border-color: rgba(95,217,126,0.45); }
#guide .gfill { background: linear-gradient(180deg, #c9ffd2, #5fd97e 55%, #2f8c47); box-shadow: 0 0 8px rgba(95,217,126,0.55); }

/* ---------- notify / toasts / prompt / pickups / quest ---------- */
/* soft dark band behind the card: the text is DOM (always on top), but gold-on-bright-waystone
   washed out to unreadable (feel audit) — the scrim guarantees contrast over any world content */
#notify { position: absolute; left: 0; right: 0; top: 25%; padding: 40px 0 44px; text-align: center; opacity: 0; pointer-events: none;
  /* radii sized so `transparent 80%` lands INSIDE the box on both axes (0.8 x 58% of box height
     < the half-height where the box clips) — a taller radius died on the box edge instead, which
     rendered as a hard-edged grey stripe across the world */
  background: radial-gradient(ellipse 42% 58% at 50% 50%, rgba(5,7,16,0.60), rgba(5,7,16,0.32) 55%, transparent 80%); }
#notify h2 { margin: 0; font: 400 44px var(--serif); font-variant: small-caps; letter-spacing: 0.3em; color: var(--gold-hi); text-shadow: 0 0 24px rgba(216,189,122,0.55), 0 2px 6px rgba(0,0,0,0.9); }
#notify p { margin: 6px 0 0; font: 400 16px var(--serif); font-variant: small-caps; letter-spacing: 0.28em; color: var(--aether); text-shadow: 0 0 12px var(--aether-glow), 0 1px 4px #000; }
/* third line of the zone card: what this place DOES to you (low gravity, lava, swimming). Sits under the
   filigree rule, quieter than the level band, wide enough for a sentence. */
#notify .rule { margin: 9px auto 0; max-width: 640px; font: 400 14px var(--serif); font-style: italic;
  letter-spacing: 0.08em; color: rgba(235, 228, 210, 0.82); text-shadow: 0 0 10px rgba(0,0,0,0.8), 0 1px 4px #000; }
#notify .fl { width: 340px; height: 1px; margin: 10px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); position: relative; }
#notify .fl::after { content: '◆'; position: absolute; left: 50%; top: -7px; transform: translateX(-50%); color: var(--gold); font-size: 10px; }

#toasts { position: absolute; left: 50%; bottom: 21%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.toast { padding: 6px 22px; background: var(--panel); border: 1px solid var(--rule); border-left: none; border-right: none; color: var(--ivory); font: 400 15px var(--serif); font-variant: small-caps; letter-spacing: 0.16em; text-shadow: 0 1px 3px #000; box-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.toast.super { color: var(--gold-hi); border-color: var(--rule-lit); }
.toast.ability { color: var(--aether); }

#iprompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); opacity: 0; transition: opacity 0.15s; font: 400 16px var(--serif); font-variant: small-caps; letter-spacing: 0.12em; color: var(--ivory); text-shadow: 0 1px 4px #000; }
#iprompt kbd { display: inline-block; min-width: 22px; padding: 1px 5px; margin-right: 8px; text-align: center; border: 1px solid var(--rule-lit); border-radius: var(--r-sm); background: rgba(10,12,24,0.7); color: var(--gold-hi); font: 600 13px 'Segoe UI', sans-serif;
  /* a drop-shadow, not a box-shadow: the cut below is a clip-path and would eat an outer shadow */
  filter: drop-shadow(0 0 4px rgba(216,189,122,0.3)); }

#pickups { position: absolute; left: 30px; bottom: 148px; display: flex; flex-direction: column-reverse; gap: 4px; }
#pickups div { font: 400 14px var(--serif); font-variant: small-caps; letter-spacing: 0.1em; color: var(--ivory); text-shadow: 0 1px 3px #000; }
#pickups div::before { content: '◆ '; color: var(--gold); font-size: 10px; }

#quest { position: absolute; right: 26px; top: 236px; width: 258px; text-align: right; }
#quest .qt { font: 500 15px var(--serif); font-variant: small-caps; letter-spacing: 0.13em; color: var(--gold-hi); text-shadow: 0 1px 4px #000; }
#quest .qt::before { content: '◆ '; color: var(--gold); font-size: 10px; }
/* multi-objective tracker: one line per objective, readable in peripheral vision at a glance —
   gold marker + counter while active, a soft aether check + strike-through the instant it is done. */
#quest .qlist { margin-top: 5px; display: flex; flex-direction: column; gap: 3px; }
#quest .qo-line { display: flex; align-items: baseline; gap: 6px; font: 400 12.5px var(--serif); color: rgba(235,228,210,0.84); text-shadow: 0 1px 3px #000; letter-spacing: 0.03em; }
#quest .qo-line .qmark { flex: none; width: 11px; text-align: center; font-style: normal; color: var(--gold); }
#quest .qo-line .qtx { flex: 1; text-align: right; }
#quest .qo-line .qc { flex: none; font-variant-numeric: tabular-nums; color: var(--gold-hi); font-size: 11.5px; }
#quest .qo-line.done { opacity: 0.6; }
#quest .qo-line.done .qmark { color: var(--aether); }
#quest .qo-line.done .qtx { text-decoration: line-through; color: rgba(220,228,205,0.7); }
/* one-time "there is a quest log, it is on J" — retired the first time the log is opened (HUD.setQuest
   reads the flag Screens.show writes). Quiet gold on parchment, same language as the rest of the tracker. */
#quest .qhint { margin-top: 7px; font: 400 10.5px var(--serif); font-variant: small-caps; letter-spacing: 0.14em;
  color: rgba(226,196,132,0.72); text-shadow: 0 1px 3px #000; animation: qhintbreathe 2.6s ease-in-out infinite; }
#quest .qhint kbd { display: inline-block; min-width: 13px; padding: 0 4px; border: 1px solid rgba(216,189,122,0.5);
  border-radius: 3px; background: rgba(24,20,12,0.55); font: 600 10px var(--serif); font-variant: normal;
  letter-spacing: 0; color: var(--gold-hi); }
@keyframes qhintbreathe { 0%, 100% { opacity: 0.62; } 50% { opacity: 1; } }
#quest .qothers { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--rule-faint); font: 400 10.5px var(--serif); letter-spacing: 0.03em; color: rgba(210,200,175,0.58); text-shadow: 0 1px 3px #000; }

/* ---------- minimap (top-right) ---------- */
#minimap { position: absolute; right: 26px; top: 26px; width: 164px; height: 164px; }
#minimap canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; display: block;
  box-shadow: inset 0 0 26px rgba(12,8,4,0.55), 0 6px 22px rgba(0,0,0,0.55); }
#minimap .rim { position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--rule-lit);
  box-shadow: 0 0 14px rgba(216,189,122,0.22), inset 0 0 10px rgba(0,0,0,0.55); }
#minimap .rim::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid var(--rule); }
/* N marker: dark-ink-on-parchment died the moment the sheet started carrying region colour — it now sits
   over forest green, void near-black and infernal ash as often as over tan. Ivory + ink shadow works on all ten. */
#minimap .np { position: absolute; left: 50%; top: 3px; transform: translateX(-50%); font: 600 10px var(--serif);
  letter-spacing: 0.16em; color: rgba(248,238,212,0.94); text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.7); }
#minimap .zone { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); white-space: nowrap;
  font: 500 13px var(--serif); font-variant: small-caps; letter-spacing: 0.2em; color: var(--gold-hi); text-shadow: 0 1px 4px #000, 0 0 10px rgba(0,0,0,0.8); }
#minimap .wpd { position: absolute; left: 50%; top: 172px; transform: translateX(-50%); white-space: nowrap;
  font: 500 11.5px var(--serif); letter-spacing: 0.10em; color: #e2c8f5; text-shadow: 0 1px 4px #000, 0 0 8px rgba(0,0,0,0.9); }

/* ---------- carried loadout (bottom-centre) ---------- */
#wslots { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 10px; }
.wslot { position: relative; display: flex; align-items: center; gap: 9px; min-width: 178px; padding: 7px 12px 7px 9px;
  background: linear-gradient(150deg, rgba(14,17,34,0.62), rgba(7,9,20,0.72)); border: 1px solid var(--rule); filter: var(--lift); opacity: 0.62;
  transition: opacity 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.18s var(--spring); }
.wslot::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--el, #fff); opacity: 0.7; }
.wslot.on { opacity: 1; border-color: var(--rule-lit); transform: translateY(-3px);
  filter: var(--lift) var(--lit); box-shadow: inset 0 0 12px rgba(140,190,255,0.06); }
.wslot .k { width: 17px; height: 17px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: var(--r-sm); font: 600 10px 'Segoe UI', sans-serif; color: var(--gold-hi); background: rgba(6,8,16,0.7); }
.wslot.on .k { border-color: var(--rule-lit); background: rgba(216,189,122,0.16); }
.wslot .wel { flex: none; display: flex; }
.wslot .wel svg { width: 13px; height: 13px; filter: drop-shadow(0 0 4px currentColor); opacity: 0.9; }
.wslot .wn { flex: 1; font: 500 13px var(--serif); font-variant: small-caps; letter-spacing: 0.09em; color: var(--ivory);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px #000; }
.wslot .wa { font: 500 12px 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: rgba(240,236,222,0.66); }
.wslot.on .wa { color: var(--gold-hi); }

/* ---------- death screen ---------- */
#death { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; opacity: 0; transition: opacity 0.9s; background: radial-gradient(ellipse at center, rgba(30,0,0,0.35), rgba(10,0,0,0.88)); }
#death h1 { margin: 0; font: 400 64px var(--serif); font-variant: small-caps; letter-spacing: 0.42em; color: #d43b26; text-shadow: 0 0 30px rgba(200,30,10,0.6), 0 2px 8px #000; }
#death p { font: 400 16px var(--serif); font-variant: small-caps; letter-spacing: 0.24em; color: rgba(235,225,205,0.85); opacity: 0; }
#death.on p { animation: fadein 1s 1.1s forwards; }
@keyframes fadein { to { opacity: 1; } }

/* ---------- start screen ---------- */
#start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--ivory); background: radial-gradient(ellipse at center, rgba(10,14,30,0.55), rgba(0,0,0,0.86)); pointer-events: auto; }
#start { cursor: pointer; }
/* straight-in boot: the hint floats over the LIVE world (no dark veil, no title) — any click captures the mouse */
#start.strip { justify-content: flex-end; padding-bottom: 6vh; background: none; }
#start h1 { font: 300 62px var(--serif); font-variant: small-caps; letter-spacing: 0.32em; margin: 0; color: var(--gold-hi); text-shadow: 0 0 28px rgba(140,190,255,0.55), 0 0 60px rgba(216,189,122,0.3); }
.flourish { width: 420px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); position: relative; }
.flourish::after { content: '❖'; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); color: var(--gold); font-size: 12px; }
#start .cta { font: 400 18px var(--serif); font-variant: small-caps; letter-spacing: 0.34em; color: var(--aether); text-shadow: 0 0 12px var(--aether-glow); animation: lowpulse 2s ease-in-out infinite; }
.controls { font: 400 12px var(--serif); letter-spacing: 0.14em; opacity: 0.6; text-align: center; line-height: 1.9; }

/* health-only vitals: hp number inside the bar */
#hbar { position: relative; }
#hbar .hpnum { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 600 11px var(--serif); letter-spacing: 0.08em; color: rgba(246,236,208,0.96); text-shadow: 0 1px 2px rgba(0,0,0,0.85); pointer-events: none; }

/* ===== vitals v2: single ornate health vessel (shield removed) ===== */
#vitals { gap: 12px; align-items: center; }
#hbar { width: 320px; height: 20px; position: relative; border: 1px solid var(--rule-lit); border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(8,6,14,0.94), rgba(22,15,30,0.9));
  box-shadow: 0 2px 12px rgba(0,0,0,0.55), inset 0 2px 5px rgba(0,0,0,0.85), 0 0 16px rgba(211,165,72,0.14); }
#hbar .fill { background: linear-gradient(180deg, #ffb15c 0%, #e05534 40%, #9c2718 100%);
  border-radius: var(--r-sm); box-shadow: inset 0 1px 2px rgba(255,224,170,0.45), 0 0 10px rgba(224,85,52,0.35); }
#hbar .ghost { background: rgba(255,130,95,0.30); }
#hbar::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: var(--r-sm);
  background: repeating-linear-gradient(90deg, transparent 0 24.8%, rgba(0,0,0,0.38) 24.8% 25.2%),
              linear-gradient(180deg, rgba(255,255,255,0.10), transparent 45%); }
#hbar .hpnum { font: 600 12.5px var(--serif); letter-spacing: 0.12em; color: #f8efd8; text-shadow: 0 1px 3px rgba(0,0,0,0.95); z-index: 1; }
#hbar.low { border-color: rgba(224,85,52,0.9); box-shadow: 0 0 18px rgba(224,85,52,0.45), inset 0 2px 5px rgba(0,0,0,0.85); }
#lvl { box-shadow: 0 0 14px rgba(211,165,72,0.25); }

/* ==========================================================================================
   UI KIT — the house component set. Motion vocabulary from beUI (beui.dev/components/motion):
   segmented tabs with a gliding spring indicator, spring switches, tick-dot range sliders,
   spring-pressed buttons, a centre-morph modal. beUI is React + motion; this game ships neither
   and takes no new deps, so the components are rebuilt here in CSS. ONE spring token (--spring)
   drives all of them, which is what makes a menu feel like a single object instead of a form.
   ========================================================================================== */
#ui {
  --spring: cubic-bezier(.22, 1.42, .36, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ink: #07060f;
  --glass: linear-gradient(150deg, rgba(20,17,42,.90), rgba(9,8,20,.92));
  /* the old name, now pointing at the scale: sixteen `1px solid var(--line)` edges in
     screencss.js join the three-hairline vocabulary without touching one of them. */
  --line: var(--rule);
  --text: #ece2c8;
  --textdim: rgba(232,222,196,.62);
}

/* ==========================================================================================
   ONE FOCUS RING — promoted out of screencss.js, which had the only correct one in the product
   (ui.css had NONE: .ui-btn, .ui-seg button and .ui-switch all fell back to Chrome's default,
   so the ESC settings modal was keyboard-navigable in a different visual language than the
   screens behind it). Two things kept from that rule verbatim:
     - plain :focus carries the ring too. Arrow-key roving moves focus programmatically and
       Chrome does not reliably classify that as :focus-visible. A menu with an invisible ring
       is not a menu.
     - it is loud: a hairline nobody can see is the same as no ring.
   One thing changed: an `outline` is painted by the element and is therefore CLIPPED AWAY by
   the chamfer, and so is any outer box-shadow. So the ring is struck INSIDE the silhouette,
   which is also what makes it trace whatever shape the element wears — cut, rounded or round —
   with zero per-element ring geometry. screencss.js had already reached this conclusion for
   .pbody (outline-offset:-2px); this is that, generalised.
   ========================================================================================== */
#ui {
  --fring: inset 0 0 0 1.5px var(--gold-hi), inset 0 0 0 4px rgba(216,189,122,.30),
           0 0 20px rgba(216,189,122,.42);
  /* a gold ring on a gold surface is not a ring — on those it becomes the dark one */
  --fring-dark: inset 0 0 0 1.5px rgba(28,16,2,.92), inset 0 0 0 4px rgba(28,16,2,.34),
                0 0 18px rgba(0,0,0,.5);
}
/* the :is(:focus,:focus-visible) is repeated on purpose. screencss.js is injected as a <style> AFTER
   this sheet, so any state rule of equal specificity there wins on order — measured: `.tile.sel`'s
   1px inset ate the ring off the selected item completely. The ring outranks every resting state. */
#ui :is(button, a, input, select, textarea, [tabindex], .ui-btn, .ui-switch):is(:focus, :focus-visible):is(:focus, :focus-visible) {
  outline: none; box-shadow: var(--fring);
}
#ui :is(.ui-btn.primary, .ui-seg button.on, .scr .btn.gold, .scr .btn.on,
        .stabs button.on, .seg button.on):is(:focus, :focus-visible):is(:focus, :focus-visible) { box-shadow: var(--fring-dark); }

/* ==========================================================================================
   ONE PRESS — the site's plates SINK: down 2px, the lift shadow collapses, and the struck
   highlight moves from the top edge to the bottom. Everything in these two sheets used to
   shrink instead (scale(.95), scale(.985)), and one gesture with two physics is how a product
   ends up feeling like two products. Uses the `translate` property, not `transform`, so it
   composes with the transforms these elements already carry (rotated diamonds, the paper
   doll's anchor offsets) instead of overwriting them.
   ========================================================================================== */
/* A chamfer is a clip-path, and a clip-path eats every OUTER box-shadow the element casts — so
   lift and glow are drop-shadow filters, which are applied to the clipped result and therefore
   trace the cut. They are also the two things a press takes away. */
#ui { --lift: drop-shadow(0 3px 6px rgba(0,0,0,.5));
      --lit:  drop-shadow(0 0 9px rgba(216,189,122,.42)); }
#ui :is(.ui-btn, .ui-switch, .scr .btn, .sclose):active {
  translate: 0 2px; box-shadow: var(--struck-down); filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
/* a segment button has no plate of its own — the pill behind it is the plate — so it sinks
   without a struck edge, which would otherwise draw a box that is not there when at rest */
#ui :is(.ui-seg button, .stabs button, .seg button):active { translate: 0 2px; }

/* ---- scrim + centre-morph modal ---- */
.ui-scrim { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(8,6,20,.55), rgba(2,2,6,.86)); pointer-events: auto;
  opacity: 0; transition: opacity .22s var(--ease); backdrop-filter: blur(3px); }
.ui-scrim.on { opacity: 1; }
.ui-modal { position: relative; width: min(620px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  /* the one shape the panels DON'T wear: the gold corner studs below live outside the box, and a
     clip-path clips its own pseudo-elements — the studs are the older ornament, so they win and
     the cut lives on every control that sits on the panel instead. Same call in screencss's .parch. */
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text);
  box-shadow: 0 30px 90px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,240,205,.10), 0 0 60px rgba(124,91,214,.10);
  transform: scale(.93); opacity: 0; filter: blur(8px);
  transition: transform .42s var(--spring), opacity .2s var(--ease), filter .28s var(--ease); }
.ui-scrim.on .ui-modal { transform: scale(1); opacity: 1; filter: blur(0); }
/* gold corner studs, the same ornament the HUD frames use */
.ui-modal::before, .ui-modal::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid var(--rule-lit); transform: rotate(45deg); background: #0b0a1a; }
.ui-modal::before { top: -5px; left: 50%; margin-left: -5px; }
.ui-modal::after { bottom: -5px; left: 50%; margin-left: -5px; }
.ui-modal .mhead { padding: 22px 26px 0; text-align: center; }
.ui-modal h1 { margin: 0; font: 300 34px var(--serif); font-variant: small-caps; letter-spacing: .3em; text-indent: .3em;
  background: linear-gradient(100deg, #8a6119 18%, #d8bd7a 40%, #fdf3cd 50%, #d8bd7a 60%, #8a6119 82%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ui-modal .mtitle p { margin: 2px 0 0; font: 400 11px var(--serif); font-variant: small-caps; letter-spacing: .36em; text-indent: .36em; color: var(--aether); opacity: .8; }
.ui-modal .mflourish { height: 1px; margin: 14px auto 0; width: 76%; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); position: relative; }
.ui-modal .mflourish::after { content: "\2756"; position: absolute; left: 50%; top: -8px; transform: translateX(-50%); color: var(--gold); font-size: 10px; }
.ui-modal .mtabs { padding: 16px 26px 4px; }
.ui-modal .mbody { padding: 10px 26px 4px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; }
.ui-modal .mfoot { display: flex; align-items: center; gap: 8px; padding: 14px 26px 20px; border-top: 1px solid var(--rule-faint); margin-top: 12px; }
.ui-modal .mhint { flex: 1; margin: 0; font: 400 11px var(--serif); letter-spacing: .07em; color: var(--textdim); }

/* ---- panes: blur cross-fade between tabs (beUI morphing modal body) ---- */
.mpane { display: none; }
.mpane.on { display: block; animation: paneIn .34s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ---- rows ---- */
.ui-row { display: grid; grid-template-columns: 1fr 236px; align-items: center; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--rule-faint); }
.ui-row:last-child { border-bottom: none; }
.ui-row > label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font: 400 14.5px var(--serif); font-variant: small-caps; letter-spacing: .1em; color: var(--text); }
.ui-row > label em { flex-basis: 100%; font: italic 400 11.5px var(--serif); letter-spacing: .04em; color: var(--textdim); }
.ui-row > label b { margin-left: auto; font: 600 13px var(--serif); font-variant-numeric: tabular-nums; color: var(--aether); letter-spacing: .06em; }

/* ---- Range: filled track, tick dots, bar thumb that bounces on change ---- */
.ui-range { position: relative; height: 26px; display: flex; align-items: center; }
.ui-range input { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: none; cursor: pointer; margin: 0; }
.ui-range input::-webkit-slider-runnable-track { height: 5px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--gold) 0 var(--p, 50%), rgba(255,255,255,.10) var(--p, 50%) 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.ui-range input::-moz-range-track { height: 5px; border-radius: var(--r-sm); background: rgba(255,255,255,.10); }
.ui-range input::-moz-range-progress { height: 5px; border-radius: var(--r-sm); background: var(--gold); }
.ui-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 7px; height: 20px; margin-top: -7.5px; border-radius: var(--r-sm);
  background: linear-gradient(180deg, #fdf3cd, var(--gold-hi) 45%, #b8933f); border: none;
  box-shadow: 0 0 10px rgba(216,189,122,.55), 0 1px 3px rgba(0,0,0,.7);
  transition: transform .3s var(--spring); }
.ui-range input::-moz-range-thumb { width: 7px; height: 20px; border: none; border-radius: var(--r-sm); background: var(--gold-hi); }
.ui-range input:hover::-webkit-slider-thumb { transform: scaleY(1.12); }
.ui-range input:active::-webkit-slider-thumb { transform: scaleY(1.3) scaleX(1.15); }
.ui-range .ticks { position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; margin-top: -1px; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.65) 0 2px, transparent 2px calc(100% / 10)); }
.ui-range.bump input::-webkit-slider-thumb { animation: thumbBump .3s var(--spring); }
@keyframes thumbBump { 0% { transform: scaleY(1.42) scaleX(.85); } 100% { transform: scaleY(1); } }

/* ---- Switch: spring thumb + press squash ---- */
.ui-switch { position: relative; width: 50px; height: 27px; padding: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid var(--rule); box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.ui-switch i { position: absolute; left: 3px; top: 2.5px; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(180deg, #f4ead2, #b9ac90); box-shadow: 0 1px 4px rgba(0,0,0,.6);
  transition: transform .42s var(--spring), width .16s var(--ease), background .25s var(--ease); }
.ui-switch:active i { width: 26px; }
.ui-switch.on { background: rgba(216,189,122,.30); border-color: var(--rule-lit); box-shadow: inset 0 1px 3px rgba(0,0,0,.4), 0 0 14px rgba(216,189,122,.25); }
.ui-switch.on i { transform: translateX(23px); background: linear-gradient(180deg, #fdf3cd, var(--gold-hi)); }
.ui-switch.on:active i { transform: translateX(17px); }

/* ---- Segmented / Tabs: one pill glides between items (beUI layoutId indicator).
   This is THE model — screencss.js's .stabs and .seg are rebuilt on it there. ---- */
.ui-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 3px;
  border: 1px solid var(--rule); background: rgba(6,6,16,.55); }
.ui-seg .ind { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc((100% - 6px) / var(--n));
  --cut: var(--cut-sm);
  /* the SAME plate the site's Play button and the screens' tab pill are made of — one gold surface,
     dark ink on it. The old translucent version made the settings modal's tabs a third material. */
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: var(--struck); filter: var(--lit);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .46s var(--spring); }
.ui-seg button { position: relative; z-index: 1; padding: 7px 4px; border: none; background: none; cursor: pointer;
  color: var(--textdim); font: 400 12.5px var(--serif); font-variant: small-caps; letter-spacing: .12em;
  transition: color .22s var(--ease), translate .3s var(--spring), box-shadow .2s var(--ease); }
.ui-seg button:hover { color: var(--text); }
.ui-seg button.on { color: #241b06; }
.ui-seg.tabs { padding: 4px; }
.ui-seg.tabs button { padding: 9px 4px; font-size: 13.5px; }

/* ---- Buttons: the site's plate — cut corner, struck hairline inside it, sinks on press ---- */
.ui-btn { cursor: pointer; padding: 9px 20px; border: 1px solid var(--rule); background: rgba(12,11,26,.7);
  color: var(--text); font: 400 14px var(--serif); font-variant: small-caps; letter-spacing: .14em;
  box-shadow: var(--struck); filter: var(--lift);
  transition: translate .2s var(--spring), border-color .2s var(--ease), color .2s var(--ease),
    box-shadow .2s var(--ease), filter .2s var(--ease); }
.ui-btn:hover { border-color: var(--gold-hi); color: var(--gold-hi); filter: var(--lift) var(--lit); }
.ui-btn.primary { background: linear-gradient(180deg, rgba(216,189,122,.26), rgba(216,189,122,.10)); border-color: var(--rule-lit); color: var(--gold-hi); }
.ui-btn.ghost { background: none; border-color: var(--rule); color: var(--textdim); }

/* ---- keybind grid ---- */
.kbgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; padding: 6px 0 10px; }
.kb { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--rule-faint); }
.kb kbd { min-width: 74px; text-align: center; padding: 3px 7px; border: 1px solid var(--rule);
  --cut: var(--cut-sm);
  background: rgba(10,10,22,.75); color: var(--gold-hi); font: 600 11px "Segoe UI", system-ui, sans-serif; letter-spacing: .06em; }
.kb span { font: 400 13px var(--serif); letter-spacing: .05em; color: var(--textdim); }

/* ==========================================================================================
   HUD v3 — same information, read at a glance. The v2 vitals bar was a flat orange rectangle
   with hard quarter lines; abilities were 44 px flat diamonds. Everything below is frame,
   contrast and motion — no new elements, no per-frame layout.
   ========================================================================================== */
#vitals { top: 24px; left: 26px; gap: 13px; }
#lvl { width: 36px; height: 36px; border-width: 1px; border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(30,22,56,.92), rgba(9,8,20,.92));
  box-shadow: 0 0 16px rgba(0,0,0,.6), 0 0 18px rgba(211,165,72,.20), inset 0 0 10px rgba(216,189,122,.16); }
#lvl b { font-size: 16px; text-shadow: 0 0 8px rgba(216,189,122,.5); }
#hbar { width: 326px; height: 22px; border-radius: var(--r-md); border: 1px solid var(--rule-lit);
  background: linear-gradient(180deg, rgba(10,8,20,.95), rgba(26,18,38,.92));
  box-shadow: 0 2px 14px rgba(0,0,0,.6), inset 0 2px 6px rgba(0,0,0,.9), 0 0 20px rgba(211,165,72,.10); }
#hbar .fill { background: linear-gradient(180deg, #f7d49b 0%, #e19a48 26%, #c85f2a 62%, #8d3418 100%);
  box-shadow: inset 0 1px 0 rgba(255,240,208,.55), inset 0 -3px 6px rgba(0,0,0,.35), 0 0 12px rgba(224,140,66,.32); }
/* quarter ticks: hairlines, not the old opaque black bands that chopped the bar into four boxes */
#hbar::after { background:
  repeating-linear-gradient(90deg, transparent 0 24.85%, rgba(0,0,0,.30) 24.85% 25.15%),
  linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 42%, transparent 60%); }
#hbar .hpnum { font: 600 12px var(--serif); letter-spacing: .16em; }
/* one gold stud closing the far end of the vessel (the near end is the level lozenge) */
#vitals .bars { position: relative; }
#vitals .bars::after { content: ""; position: absolute; top: 50%; right: -5px; width: 7px; height: 7px;
  margin-top: -3.5px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 8px rgba(216,189,122,.5); }

/* ---- abilities ---- */
#abil { left: 28px; bottom: 30px; }
#abrow { gap: 20px; }
.ab { width: 48px; height: 48px; }
.ab.sup { width: 68px; height: 68px; }
.ab .dia { border-radius: var(--r-md); border-width: 1px; border-color: var(--rule-lit);
  background: linear-gradient(150deg, rgba(52,44,96,.88), rgba(16,14,36,.90));
  box-shadow: 0 4px 16px rgba(0,0,0,.6), inset 0 0 14px rgba(140,190,255,.10); }
.ab.ready .dia { border-color: var(--gold-hi); box-shadow: 0 0 18px rgba(216,189,122,.34), inset 0 0 14px rgba(140,190,255,.20); }
.ab svg { width: 50%; height: 50%; }
.ab b { bottom: -19px; font-size: 10.5px; letter-spacing: .18em; padding: 1px 6px;
  --cut: var(--cut-sm); border-radius: 0;
  background: rgba(8,8,18,.6); border: 1px solid var(--rule); color: rgba(246,236,208,.92); }
#smeter { margin-top: 28px; width: 236px; height: 7px; border-radius: var(--r-md); border-color: var(--rule);
  background: linear-gradient(180deg, rgba(8,6,16,.85), rgba(18,14,30,.8)); box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }
#smeter i { border-radius: var(--r-md); box-shadow: 0 0 10px rgba(180,144,255,.45); }
#smeter.full { box-shadow: 0 0 18px rgba(246,227,172,.5), inset 0 1px 3px rgba(0,0,0,.6); }

/* ---- ammo ---- */
#ammo { right: 32px; bottom: 28px; }
#wline { font-size: 16px; letter-spacing: .16em; }
#mag { font: 300 52px/1 var(--serif); color: #fdf6e6; text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 0 22px rgba(216,189,122,.22); }
#res { font: 400 20px var(--serif); }
#rline { height: 3px; width: 190px; background: rgba(216,189,122,.16); }
#ammo::after { content: ""; display: block; height: 1px; margin-top: 7px; margin-left: auto; width: 190px;
  background: linear-gradient(90deg, transparent, var(--gold-dim)); }

/* ---- toasts / quest / pickups: card language shared with the settings menu ---- */
/* the cut corner, on the two cards the player reads mid-fight. The 2px accent rail stays a rail:
   it is a signal (which kind of toast, which side the tracker is docked), not a hairline. */
.toast { padding: 7px 20px 7px 16px; border: 1px solid var(--line); border-left: 2px solid var(--gold); background: var(--glass); backdrop-filter: blur(4px); filter: var(--lift); }
#quest { right: 26px; top: 236px; width: 268px; padding: 10px 14px 11px;
  border: 1px solid var(--rule); border-right: 2px solid var(--gold);
  background: linear-gradient(250deg, rgba(20,17,42,.62), rgba(9,8,20,.30)); backdrop-filter: blur(3px); }
#quest .ql { display: none; }
#iprompt kbd { --cut: var(--cut-sm); border-radius: 0; }

/* ---- boss bar ---- */
#boss .bar { height: 10px; border-radius: var(--r-md); border-color: var(--rule-lit);
  background: linear-gradient(180deg, rgba(8,6,16,.92), rgba(22,16,34,.9)); box-shadow: inset 0 2px 5px rgba(0,0,0,.85), 0 0 22px rgba(211,165,72,.14); }
#boss .bname { letter-spacing: .24em; text-indent: .24em; }
/* shield reads as a rail UNDER the health, not a blue block painted over its left third */
#boss .bsh, #tgt .tsh { top: auto; bottom: 0; height: 3px; border-radius: 0 0 var(--r-sm) var(--r-sm); }

/* ---- escort guide frame ---- */
#guide .bar { height: 8px; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(8,6,16,.92), rgba(14,26,18,.9)); box-shadow: inset 0 2px 5px rgba(0,0,0,.85), 0 0 16px rgba(95,217,126,.16); }
#guide .gname { letter-spacing: .18em; }

/* ---- start hint: same kit, spring entrance ---- */
#start.strip { padding-bottom: 15vh; gap: 12px; }   /* clear of the ability row and the ammo block */
#start .cta { padding: 9px 26px; border: 1px solid var(--rule); background: rgba(9,8,20,.5);
  backdrop-filter: blur(4px); animation: ctaIn .6s var(--spring), lowpulse 2.4s ease-in-out infinite 1s; }
@keyframes ctaIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
#start .controls { max-width: 720px; }

/* ==========================================================================================
   HUD v4 — the Destiny legibility pass (wave-3 HUD audit at 1080p).
   ========================================================================================== */

/* ---- damage numbers: they were 17 px of white text with a blur shadow, which is invisible over
   snow, marble and the celestial plain — exactly where the highest-level fights are. A real
   outline (paint-order: stroke fill, so the stroke sits BEHIND the glyph instead of eating it)
   plus a size bump makes them read against any ground at any exposure. ---- */
#dnums b { font: 800 20px 'Segoe UI', system-ui, sans-serif; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;   /* the `font:` shorthand above resets it — a merged number that
                                           grows while it floats must not re-space its own digits */
  -webkit-text-stroke: 3.2px rgba(6,4,2,.80); paint-order: stroke fill;
  text-shadow: 0 2px 5px rgba(0,0,0,.7); }
#dnums b.crit { font-size: 30px; font-weight: 900; -webkit-text-stroke: 3.8px rgba(30,10,0,.85); }

/* ---- reticle: a 3 px pure-white dot with no keyline vanishes on the tundra snowfield and the
   celestial marble. A hairline of ink around it costs nothing and holds on every backdrop. ---- */
#ch .dot { width: 4px; height: 4px; margin: -2px; box-shadow: 0 0 0 1px rgba(4,4,8,.8); }
#ch .tk { box-shadow: 0 0 0 1px rgba(4,4,8,.55); }
/* the hand-cannon/shotgun ring is the ONLY spread feedback those two archetypes have (their ticks are
   hidden) and it was a 1.4 px hairline at 85% — it disappeared into foliage. Thicker, opaque, keylined. */
#ch .ring { border-width: 1.8px; opacity: 1; box-shadow: 0 0 0 1px rgba(4,4,8,.45), inset 0 0 0 1px rgba(4,4,8,.35); }
/* reserve ammo was 0.72 alpha with no shadow — the one number that dropped out over a bright sky */
#res { color: rgba(244,240,228,.86); text-shadow: 0 1px 4px rgba(0,0,0,.95); }

/* ---- NAMED RARE (enemy.namedRare): a wandering elite gets the gold treatment, never the boss bar.
   Same nameplate element, three changes — a "Rare" tag, gold name, and a gold-keylined bar. ---- */
#tgt .tname { white-space: nowrap; }
/* the tag + a full rare name + "Lv nn" need more room than the ordinary plate. Both shrank when the
   plate stopped being a fixed banner at the top of the screen and became a nameplate ON the creature:
   a 300 px bar floating over a 30 px hound at range read as a HUD element that had come loose. */
#tgt.rare { width: 330px; }
#tgt .trare { display: none; }
#tgt.rare .trare { display: inline; margin-right: 9px; font: 600 11px var(--serif); font-style: normal;
  font-variant: small-caps; letter-spacing: .18em; color: #f6d98a; text-shadow: 0 0 10px rgba(216,160,60,.6), 0 1px 3px #000; }
#tgt.rare .tn { color: #ffe6ad; text-shadow: 0 0 14px rgba(226,168,64,.55), 0 1px 4px rgba(0,0,0,.95); }
#tgt.rare .bar { height: 8px; border-color: rgba(233,196,106,.85); box-shadow: 0 0 14px rgba(216,160,60,.28), inset 0 2px 5px rgba(0,0,0,.85); }
#tgt.rare .tfill { background: linear-gradient(180deg, #ffc98a, #d2482e 55%, #8e2b16); }

/* rare kill banner: the zone card, re-keyed warm gold (its subtitle is normally aether blue) */
#notify.rare h2 { color: #ffe0a2; text-shadow: 0 0 26px rgba(226,168,64,.6), 0 2px 6px rgba(0,0,0,.9); }
#notify.rare p { color: #e9c46a; text-shadow: 0 0 12px rgba(216,160,60,.5), 0 1px 4px #000; }
#notify.rare .fl { background: linear-gradient(90deg, transparent, #e9c46a, transparent); }

@media (prefers-reduced-motion: reduce) {
  #ui * { animation-duration: .01ms !important; transition-duration: .06s !important; }
}