/* ============================================================
 * ROOTFALL — In-game HUD forged re-skin ("Gears & Glyphs")
 * Etched brass instruments laid over the run. Loaded AFTER the
 * inline HUD <style> and top-hud.css, so these rules override the
 * existing chrome by source order. Element IDs are unchanged — this
 * only changes how the HUD looks, never what drives it.
 * ============================================================ */
:root {
  --hud-brass: #ffd866;
  --hud-brass-bright: #ffe08a;
  --hud-brass-deep: #b8842f;
  --hud-teal: #b8e8de;
  --hud-ink: #f1ead9;
  --hud-ink-2: rgba(241, 234, 217, 0.78);
  --hud-ink-3: rgba(241, 234, 217, 0.55);
  --hud-line: rgba(200, 160, 90, 0.24);
  --hud-line-strong: rgba(200, 160, 90, 0.44);
  --hud-hp: #c8463a;
  --hud-hp-bright: #e8654a;
  --hud-mp: #3f6fd6;
  --hud-mp-bright: #5a8af0;
  --hud-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --hud-caps: 'Cinzel', 'IM Fell English', Georgia, serif;
  --hud-head: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --hud-display: 'IM Fell English', 'EB Garamond', Georgia, serif;
  --hud-plate-shadow:
    inset 0 1px 0 rgba(255, 230, 170, 0.10),
    inset 0 0 30px rgba(6, 10, 6, 0.62),
    0 14px 34px -18px #000;
}

/* shared glass instrument plate look */
.hud-plate,
#skillbar,
#fps-counter {
  background: linear-gradient(180deg, rgba(34, 44, 34, 0.80), rgba(18, 24, 18, 0.88));
  border: 1px solid var(--hud-line-strong);
  border-radius: 6px;
  box-shadow: var(--hud-plate-shadow);
  backdrop-filter: blur(3px);
}
/* brass top hairline + corner rivets (pseudo-elements only where free) */
#skillbar::before,
#fps-counter::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hud-brass) 25%, var(--hud-brass) 75%, transparent);
  opacity: 0.6; pointer-events: none;
}
#skillbar::after,
#fps-counter::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at 7px 7px, var(--hud-brass-bright) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 7px) 7px, var(--hud-brass-bright) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 7px calc(100% - 7px), var(--hud-brass-bright) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), var(--hud-brass-bright) 0 1.6px, transparent 2.2px);
  filter: drop-shadow(0 0 4px rgba(255, 216, 102, 0.4));
}

/* ============================================================
 * BOTTOM COMMAND CLUSTER — one centered group
 * ============================================================ */
#player-hud {
  position: fixed;
  left: 0; right: 0; top: auto;
  bottom: clamp(14px, 1.6vw, 24px);
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(16px, 1.9vw, 32px);
  padding: 0 clamp(14px, 1.6vw, 24px);
  background: none; border: none; box-shadow: none; backdrop-filter: none;
  pointer-events: none;
  z-index: 6;
}
#player-hud .side-cluster {
  display: flex; align-items: flex-end;
  gap: clamp(8px, 1vw, 16px);
}
#player-hud #xp,
#player-hud .potion-slot { pointer-events: auto; }
#player-hud .vital-orb,
#player-hud #gold-pill { pointer-events: none; }

/* neutralize the old fixed-position skillbar centering hack — it now
   flows as the center child of the cluster */
#skillbar {
  position: static; left: auto; right: auto; bottom: auto;
  transform: none;
  display: flex; align-items: center; gap: clamp(5px, 0.6vw, 9px);
  padding: 11px 13px;
  pointer-events: auto;
}
/* the assign-hint nudge rides above the centered hotbar */
#skill-assign-hint {
  left: 50%; right: auto;
  transform: translateX(-50%);
  bottom: clamp(120px, 11vw, 152px);
}

/* ============================================================
 * HP / MP RUNE-ORBS
 * ============================================================ */
.vital-orb {
  position: relative;
  width: clamp(76px, 6.3vw, 100px); aspect-ratio: 1; border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #1c241c, #0a0f0a);
  box-shadow:
    inset 0 3px 9px rgba(4, 8, 6, 0.92),
    inset 0 -2px 6px rgba(255, 230, 170, 0.05),
    0 8px 22px -12px #000;
}
.vital-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0;                          /* JS (stats.js render) sets the height */
  transition: height .5s cubic-bezier(.3, .7, .2, 1);
  z-index: 1;
}
.vital-orb.hp .vital-fill { background: linear-gradient(180deg, var(--hud-hp-bright), var(--hud-hp) 68%, #5a1d14); }
.vital-orb.mp .vital-fill { background: linear-gradient(180deg, var(--hud-mp-bright), var(--hud-mp) 68%, #182a66); }
.vital-fill::after {  /* liquid meniscus */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 9px rgba(255, 255, 255, 0.45);
}
.vital-glint {  /* specular sphere highlight */
  position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(38% 30% at 36% 24%, rgba(255, 255, 255, 0.24), transparent 72%);
}
/* etched sigils — light bone/brass, glowing, set in the upper face */
.vital-rune { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.vital-rune > span { position: absolute; left: 50%; top: 40%; }
.r-diamond {
  width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px;
  border: 2.5px solid rgba(255, 248, 220, 0.82);
  box-shadow: 0 0 9px rgba(255, 242, 200, 0.55), inset 0 0 5px rgba(255, 242, 200, 0.4);
}
.r-bar {
  width: 34%; height: 2.5px; border-radius: 2px; transform: translate(-50%, -50%);
  background: rgba(255, 248, 220, 0.82); box-shadow: 0 0 9px rgba(255, 242, 200, 0.55);
}
.r-star {
  width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: rgba(255, 248, 220, 0.85);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 7px rgba(255, 242, 200, 0.6));
}
.vital-rim {
  position: absolute; inset: 0; border-radius: 50%; z-index: 4; pointer-events: none;
  border: 2px solid var(--hud-brass-deep);
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 170, 0.18),
    inset 0 2px 10px rgba(8, 6, 2, 0.55),
    0 0 14px rgba(255, 216, 102, 0.28);
}
.vital-num {
  position: absolute; left: 0; right: 0; bottom: 20%; z-index: 5; text-align: center;
  font-family: var(--hud-mono); font-size: clamp(10px, 0.85vw, 12.5px); font-weight: 600;
  color: #fbfaf4; text-shadow: 0 1px 3px #000, 0 0 6px #000;
  font-variant-numeric: tabular-nums;
}
.vital-num span { color: rgba(235, 230, 215, 0.82); }

/* low-HP: pulsing crimson aura on the HP orb (stats.js sets data-low) */
.vital-orb.hp[data-low="true"] { animation: hudOrbDanger 1.5s ease-in-out infinite; }
@keyframes hudOrbDanger {
  0%, 100% { box-shadow: inset 0 3px 9px rgba(4,8,6,0.92), 0 0 12px rgba(200,50,36,0.35), 0 8px 22px -12px #000; }
  50%      { box-shadow: inset 0 3px 9px rgba(4,8,6,0.92), 0 0 24px rgba(210,60,40,0.7), 0 8px 22px -12px #000; }
}
/* spend/empty flash (stats.js flashEmpty adds .empty) */
.vital-orb.empty { animation: hudOrbEmpty .4s ease; }
@keyframes hudOrbEmpty {
  0%, 100% { box-shadow: inset 0 3px 9px rgba(4,8,6,0.92), 0 8px 22px -12px #000; }
  35%      { box-shadow: inset 0 3px 9px rgba(4,8,6,0.92), 0 0 18px rgba(255,90,70,0.65), 0 8px 22px -12px #000; }
}
@media (prefers-reduced-motion: reduce) {
  .vital-orb.hp[data-low="true"], .vital-orb.empty { animation: none; }
}

/* screen-edge danger veil */
#danger-veil {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 220px 40px rgba(200, 50, 36, 0.6);
  transition: opacity .4s;
}
body.hud-low #danger-veil { animation: hudDangerPulse 1.5s ease-in-out infinite; }
@keyframes hudDangerPulse { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.62; } }
@media (prefers-reduced-motion: reduce) {
  body.hud-low #danger-veil { animation: none; opacity: 0.38; }
}
/* critical-HP (<=10%): tighter, hotter vignette with faster pulse */
body.hud-critical #danger-veil {
  box-shadow: inset 0 0 140px 80px rgba(180, 30, 20, 0.72);
  animation: hudCriticalPulse 0.9s ease-in-out infinite;
}
@keyframes hudCriticalPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.78; } }
@media (prefers-reduced-motion: reduce) {
  body.hud-critical #danger-veil { animation: none; opacity: 0.55; }
}

/* ============================================================
 * LEVEL ORB (#xp)  — brass instrument
 * ============================================================ */
#xp {
  /* relative (not static): flows in the flex cluster AND stays the
     positioning context for the absolute ring SVG + .xp-center readout. */
  position: relative; left: auto; bottom: auto;
  width: clamp(70px, 5.4vw, 92px); height: clamp(70px, 5.4vw, 92px);
  background: radial-gradient(circle at 50% 42%, #1a221a, #0a0f0a 78%);
  border: 1px solid var(--hud-brass-deep);
  box-shadow:
    inset 0 0 22px rgba(4, 8, 6, 0.9),
    inset 0 0 0 1px rgba(255, 230, 170, 0.12),
    0 10px 26px -12px #000;
}
#xp-fill { stroke: var(--hud-brass); filter: drop-shadow(0 0 6px rgba(255, 216, 102, 0.5)); }
.xp-cap {
  font-family: var(--hud-caps); font-weight: 600; font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--hud-brass);
}
#xp-level {
  font-family: var(--hud-display); font-weight: 700;
  font-size: clamp(24px, 2.3vw, 34px); line-height: 0.9; color: #fbe9a8;
  text-shadow: 0 0 12px rgba(255, 216, 102, 0.4), 0 1px 2px #000;
}
#xp-text { font-family: var(--hud-mono); font-size: 11px; color: var(--hud-ink-2); }

/* ============================================================
 * HOTBAR (#skillbar) + slots
 * ============================================================ */
.skill-slot {
  width: clamp(48px, 4vw, 60px); height: clamp(48px, 4vw, 60px);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(34, 42, 32, 0.85), rgba(16, 20, 15, 0.9));
  border: 1px solid var(--hud-line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.08), inset 0 0 16px rgba(4, 8, 6, 0.7);
  transition: border-color .12s, box-shadow .12s, transform .05s;
}
.skill-slot:hover {
  border-color: var(--hud-brass);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.12), 0 0 18px -4px rgba(255, 216, 102, 0.55);
}
.skill-slot:active { transform: translateY(1px); }
.skill-slot.bound {
  border-color: var(--hud-line-strong);
  background: linear-gradient(180deg, rgba(40, 36, 22, 0.88), rgba(20, 16, 8, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.14), 0 0 12px rgba(255, 190, 70, 0.16);
}
/* faint diamond marker on empty / unbound numbered slots */
.skill-slot:not(.bound)::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  transform: rotate(45deg); border: 1px solid var(--hud-line); opacity: 0.5;
}
.skill-slot .skill-key {
  top: 4px; left: 5px;
  font-family: var(--hud-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--hud-brass);
  background: rgba(10, 14, 8, 0.72); border: 1px solid var(--hud-line); border-radius: 3px;
  padding: 1px 4px;
}
.skill-slot .skill-key.wide { font-size: 9px; }
/* keep the existing scaleY cooldown sweep mechanic, just re-tinted */
.skill-slot .skill-cd { background: rgba(6, 10, 6, 0.74); }
.hotbar-sep {
  width: 1px; height: 40px; margin: 0 4px; flex: 0 0 auto;
  background: linear-gradient(180deg, transparent, var(--hud-line-strong), transparent);
}

/* ============================================================
 * POTION SLOTS (#pq-hp / #pq-mp) — Q/R kept
 * ============================================================ */
.potion-slot {
  width: clamp(48px, 4vw, 60px); height: clamp(48px, 4vw, 60px);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.08), inset 0 0 16px rgba(4, 8, 6, 0.7);
}
.potion-slot .potion-key {
  top: 4px; left: 5px;
  font-family: var(--hud-mono); font-size: 10px; font-weight: 600;
  color: var(--hud-brass);
  background: rgba(10, 14, 8, 0.72); border: 1px solid var(--hud-line); border-radius: 3px;
  padding: 1px 4px;
}
.potion-slot .potion-icon svg { width: 30px; height: 30px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.potion-slot .potion-qty {
  bottom: 3px; right: 3px;
  font-family: var(--hud-mono); font-size: 10px; font-weight: 600; color: var(--hud-ink);
  background: rgba(10, 14, 8, 0.82); border: 1px solid var(--hud-line); border-radius: 3px;
  padding: 0 4px; line-height: 1.5;
}

/* ============================================================
 * GOLD (#gold-pill) — forged plate pill
 * ============================================================ */
#gold-pill {
  position: static; right: auto; bottom: auto;
  gap: 9px; padding: 9px 16px 9px 12px;
  border: 1px solid var(--hud-line-strong); border-radius: 6px;
  background: linear-gradient(180deg, rgba(34, 44, 34, 0.82), rgba(18, 24, 18, 0.9));
  box-shadow: var(--hud-plate-shadow);
  color: #fbe9a8;
  font-family: var(--hud-display); font-weight: 700;
  font-size: clamp(18px, 1.7vw, 24px); letter-spacing: 0.02em;
}
#gold-pill::before {
  width: 22px; height: 22px;
  box-shadow: 0 0 10px rgba(255, 216, 102, 0.5), inset 0 -2px 3px rgba(120, 80, 40, 0.6);
}
#gold-pill::after {
  font-family: var(--hud-caps); font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; color: var(--hud-brass); margin-top: 1px;
}

/* ============================================================
 * TELEMETRY (#fps-counter) — instrument plate
 * ============================================================ */
#fps-counter {
  padding: 12px 16px 12px 14px; min-width: 196px;
  font-family: var(--hud-mono); font-size: 12px; opacity: 1;
  color: var(--hud-ink);
}
#fps-counter .fps-row { gap: 8px; line-height: 1.8; }
#fps-counter .fps-row-dev:first-of-type { border-top-color: var(--hud-line); }
#fps-counter .fps-label {
  font-family: var(--hud-mono); color: var(--hud-brass); opacity: 1;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
#fps-counter #fps-local, #fps-counter #fps-server, #fps-counter #fps-ping,
#fps-counter #fps-online, #fps-counter #fps-tickhz, #fps-counter #fps-avg,
#fps-counter #fps-max, #fps-counter #fps-drop, #fps-counter #fps-draw,
#fps-counter #fps-tri, #fps-counter #fps-shad {
  font-family: var(--hud-mono); color: var(--hud-ink); font-weight: 600;
}
#fps-counter .fps-unit { font-family: var(--hud-mono); color: var(--hud-ink-3); font-size: 10px; }

/* ============================================================
 * RUN TITLE (#map-name-hud) — tracked forged caps
 * ============================================================ */
#map-name-hud {
  font-family: var(--hud-caps); font-weight: 700;
  font-size: clamp(15px, 1.5vw, 22px); letter-spacing: 0.34em;
  text-indent: 0.34em; color: #fbe9a8;
  text-shadow: 0 0 18px rgba(255, 216, 102, 0.35), 0 2px 6px rgba(8, 6, 2, 0.85);
}

/* ============================================================
 * STATUS BAR + MINIMAP FRAME (top-right) + SESSION BUTTONS
 * ============================================================ */
#hud-status {
  background: linear-gradient(180deg, rgba(34, 44, 34, 0.80), rgba(18, 24, 18, 0.88));
  border: 1px solid var(--hud-line-strong);
  border-radius: 6px;
  box-shadow: var(--hud-plate-shadow);
  backdrop-filter: blur(3px);
  font-family: var(--hud-mono);
}
#hud-status .online-text {
  font-family: var(--hud-caps); font-weight: 700;
  letter-spacing: 0.20em; text-transform: uppercase;
}
#hud-status .clock { font-family: var(--hud-mono); color: var(--hud-ink-2); }
/* frame the live canvas minimap in the plate language (the canvas now
   draws a clean dark field + brass frame + rivets — see minimap.js) */
#minimap {
  border-radius: 6px;
  box-shadow: var(--hud-plate-shadow);
}

/* ---- game menu moved into the top-right control shelf ---- */
.menu-anchor { position: relative; pointer-events: auto; display: inline-flex; }
#menu-btn {
  position: static; left: auto; bottom: auto;
  width: auto; height: 28px; padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 3px;
  border: 1px solid var(--hud-line-strong); border-radius: 6px;
  background: linear-gradient(180deg, rgba(32, 42, 32, 0.85), rgba(16, 22, 16, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.06);
}
#menu-btn:hover, body.menu-open #menu-btn {
  filter: brightness(1.12); border-color: var(--hud-brass);
}
#menu-btn .bar {
  width: 16px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--hud-brass-deep), var(--hud-brass), var(--hud-brass-deep));
}
#menu-list {
  position: absolute; top: calc(100% + 6px); right: 0; left: auto; bottom: auto;
  min-width: 208px;
  border: 1px solid var(--hud-line-strong); border-radius: 6px;
  background: linear-gradient(180deg, rgba(34, 44, 34, 0.97), rgba(18, 24, 18, 0.98));
  box-shadow: var(--hud-plate-shadow);
  backdrop-filter: blur(3px);
  z-index: 42;
}
/* Dropdown rows in the forged command-shelf language so the open menu reads
   as part of the HUD, not the old forest-green panel (Cinzel caps + brass,
   matching the Lobby/Logout/Leave buttons it drops out of). */
#menu-list .menu-row {
  padding: 10px 13px;
  font-family: var(--hud-caps); font-weight: 600;
  font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--hud-ink-2);
  transition: background 120ms, color 120ms;
}
#menu-list .menu-row + .menu-row { border-top: 1px solid var(--hud-line); }
#menu-list .menu-row:hover {
  background: rgba(255, 216, 102, 0.10);
  color: var(--hud-brass-bright);
}
#menu-list .menu-row:disabled { opacity: 0.4; }
#menu-list .menu-row:disabled:hover { background: transparent; color: var(--hud-ink-2); }
/* keycap pill mirrors the skillbar's .skill-key exactly */
#menu-list .menu-key {
  font-family: var(--hud-mono); font-weight: 600;
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--hud-brass);
  background: rgba(10, 14, 8, 0.72);
  border: 1px solid var(--hud-line); border-radius: 3px;
  padding: 1px 5px;
}
#menu-list .menu-chev { color: var(--hud-ink-3); }
#menu-list .menu-section[aria-expanded="true"] .menu-chev { color: var(--hud-brass); }
#menu-list .menu-submenu {
  background: rgba(6, 10, 6, 0.42);
  border-top: 1px solid var(--hud-line);
}
#menu-list .menu-subrow {
  padding-left: 26px; font-size: 11px; letter-spacing: 0.10em;
  color: var(--hud-ink-3);
}
#menu-list .menu-subrow:hover { color: var(--hud-ink); }

.hud-btn {
  font-family: var(--hud-caps); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--hud-brass-bright);
  border: 1px solid var(--hud-line-strong); border-radius: 6px;
  background: linear-gradient(180deg, rgba(32, 42, 32, 0.78), rgba(16, 22, 16, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.06);
}
.hud-btn:hover {
  border-color: var(--hud-brass); color: var(--hud-brass-bright);
  background: linear-gradient(180deg, rgba(42, 54, 42, 0.85), rgba(20, 28, 20, 0.9));
}
#leave-dungeon-btn { color: var(--hud-ink-2); }
#leave-dungeon-btn:hover { color: #f0c0a0; border-color: rgba(200, 90, 60, 0.7); }
/* game menu button (stays top-left, restyled to the forged language) */
#menu-btn {
  border: 1px solid var(--hud-line-strong); border-radius: 6px;
  background: linear-gradient(180deg, rgba(32, 42, 32, 0.85), rgba(16, 22, 16, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.06), 0 6px 18px rgba(0, 0, 0, 0.5);
}
#menu-btn:hover { border-color: var(--hud-brass); }

/* ============================================================
 * RESPONSIVE — drop telemetry + run title on narrow screens
 * (matches the prototype's @media max-width:900px)
 * ============================================================ */
@media (max-width: 900px) {
  #fps-counter, #map-name-hud { display: none; }
}