/* =============================================================================
   styles.css — ALL Dungeon Realm UI styling.
   Warm torchlit dungeon fantasy theme: dark ornate panels, gold/ember accents,
   liquid health/mana globes, glowing hotbar, dramatic boss bar, parchment tooltips.
   Pure DOM/CSS overlay on top of the WebGL canvas — no Three.js here.
   ============================================================================= */

/* Cinzel for the title (graceful fallback if offline). Decorative only. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=EB+Garamond:ital@0;1&display=swap');

:root {
  /* ---- palette ---- */
  --bg-darkest:   #07060a;
  --bg-dark:      #110d14;
  --panel-bg:     rgba(22, 16, 22, 0.92);
  --panel-bg-2:   rgba(34, 24, 30, 0.95);
  --panel-edge:   #3a2b22;

  --gold:         #e9b85a;
  --gold-bright:  #ffd98a;
  --gold-dim:     #9c7836;
  --ember:        #ff7a2b;
  --ember-deep:   #c53a12;

  --hp:           #d62b2b;
  --hp-bright:    #ff5a4d;
  --hp-dark:      #5a0d10;
  --mana:         #3a6fe0;
  --mana-bright:  #6fa8ff;
  --mana-dark:    #10204f;
  --xp:           #8a55d6;
  --xp-bright:    #c79bff;

  --text:         #ece3d2;
  --text-dim:     #b6a890;
  --text-faint:   #7d7263;
  --danger:       #ff5a4d;
  --good:         #5fd35f;

  /* rarity */
  --r-common:     #c9c9c9;
  --r-uncommon:   #5fd35f;
  --r-rare:       #5b8dff;
  --r-epic:       #b65bff;
  --r-legendary:  #ff9b2b;

  --ui-font: 'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --title-font: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --num-font: 'Cinzel', 'EB Garamond', Georgia, serif;

  --shadow-deep: 0 8px 28px rgba(0, 0, 0, 0.7);
  --inset-deep: inset 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* ----------------------------- reset / base ----------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-darkest);
  color: var(--text);
  font-family: var(--ui-font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}

#game-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.hidden { display: none !important; }

/* ============================================================================
   AIM RETICLE — static crosshair pinned to screen center (FEATURE #1)
   Inert + subtle so it never obscures the action. Sits above the HUD layer
   but below panels/overlays so menus and the death screen cover it.
   ============================================================================ */
#reticle {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  z-index: 55;
  pointer-events: none;
  opacity: 0.72;
  mix-blend-mode: screen; /* reads on light and dark backdrops alike */
}
#reticle .ret-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 4px rgba(255, 200, 90, 0.9), 0 0 1px #000;
}
#reticle .ret-line {
  position: absolute;
  background: var(--gold-bright);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
/* four short ticks leaving a small center gap */
#reticle .ret-up,
#reticle .ret-down   { left: 50%; width: 2px; height: 7px; transform: translateX(-50%); }
#reticle .ret-left,
#reticle .ret-right  { top: 50%; height: 2px; width: 7px; transform: translateY(-50%); }
#reticle .ret-up    { top: 0; }
#reticle .ret-down  { bottom: 0; }
#reticle .ret-left  { left: 0; }
#reticle .ret-right { right: 0; }

/* ============================================================================
   OVERLAYS — title screen + death screen
   ============================================================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(60, 28, 10, 0.55), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(10, 6, 8, 0.9), var(--bg-darkest) 70%),
    linear-gradient(180deg, #06040a 0%, #140a0c 60%, #1c0e08 100%);
  animation: fadeIn 0.6s ease both;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.title-wrap {
  text-align: center;
  padding: 3rem 4rem;
  max-width: 720px;
}

.game-title {
  font-family: var(--title-font);
  font-weight: 900;
  font-size: clamp(2.8rem, 9vw, 6.2rem);
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--gold-bright);
  text-shadow:
    0 0 6px rgba(255, 180, 90, 0.5),
    0 0 26px rgba(255, 120, 30, 0.55),
    0 4px 0 #3a1c08,
    0 6px 14px rgba(0, 0, 0, 0.9);
  background: linear-gradient(180deg, #ffe9b0 0%, #e9b85a 45%, #b5751f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleGlow 4s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 120, 30, 0.4)); }
  50%      { filter: drop-shadow(0 0 22px rgba(255, 150, 50, 0.7)); }
}

.game-subtitle {
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  color: var(--text-dim);
  letter-spacing: 0.32em;
  margin-top: 0.4rem;
  text-transform: uppercase;
}

.load-status {
  margin: 2rem 0 1rem;
  color: var(--ember);
  font-style: italic;
  letter-spacing: 0.08em;
  min-height: 1.4em;
  text-shadow: 0 0 10px rgba(255, 120, 30, 0.4);
}

.controls-hint {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  justify-content: center;
  color: var(--text-faint);
  font-size: 0.92rem;
}
.controls-hint span b {
  color: var(--gold);
  font-family: var(--num-font);
  letter-spacing: 0.04em;
}

/* ---- ornate primary button ---- */
.btn-primary {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a0e05;
  padding: 0.85rem 2.6rem;
  margin-top: 1.2rem;
  cursor: pointer;
  border: 2px solid var(--gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 50%, var(--gold-dim));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 4px 0 #5a3a14,
    0 8px 22px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 5px 0 #5a3a14,
    0 12px 30px rgba(255, 120, 30, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #5a3a14, 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* ---- death screen ---- */
#death-screen {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(120, 10, 10, 0.4), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(8, 0, 0, 0.95), var(--bg-darkest) 70%),
    linear-gradient(180deg, #0a0405 0%, #1a0606 100%);
  z-index: 210;
}
.death-wrap { text-align: center; }
.death-title {
  font-family: var(--title-font);
  font-weight: 900;
  font-size: clamp(3rem, 11vw, 7rem);
  letter-spacing: 0.16em;
  color: #ff3c3c;
  text-shadow:
    0 0 20px rgba(200, 0, 0, 0.6),
    0 0 60px rgba(120, 0, 0, 0.5),
    0 4px 0 #2a0000;
  animation: deathPulse 3s ease-in-out infinite;
}
@keyframes deathPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.02); }
}
.death-detail {
  margin: 1.2rem 0 1.6rem;
  color: var(--text-dim);
  font-style: italic;
  font-size: 1.1rem;
}

/* ---- pause menu ---- */
/* Sits above #panels (z-index:100) and matches the death screen (210) so an
   open inventory can never overlap it. */
#pause-screen {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(20, 12, 30, 0.5), transparent 60%),
    radial-gradient(ellipse at 50% 110%, rgba(6, 4, 10, 0.92), var(--bg-darkest) 70%),
    linear-gradient(180deg, #06040a 0%, #0e0a14 60%, #100a18 100%);
  z-index: 210;
}
.pause-wrap {
  text-align: center;
  padding: 2.4rem 3.4rem;
  max-width: 640px;
}
.pause-title {
  font-family: var(--title-font);
  font-weight: 900;
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  letter-spacing: 0.16em;
  color: var(--gold-bright);
  text-shadow:
    0 0 6px rgba(255, 180, 90, 0.4),
    0 0 26px rgba(255, 120, 30, 0.4),
    0 4px 0 #3a1c08,
    0 6px 14px rgba(0, 0, 0, 0.9);
}
.pause-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.pause-save-hint {
  margin: 1rem 0 0;
  min-height: 1.2em;
  color: var(--ember);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

/* ============================================================================
   HUD ROOT
   ============================================================================ */
#hud {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none; /* HUD doesn't steal clicks; interactive bits opt back in */
  font-family: var(--ui-font);
}
#hud .clickable { pointer-events: auto; cursor: pointer; }

/* ----------------------------- ORBS (globes) ----------------------------- */
.orb {
  position: absolute;
  bottom: 22px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #2a2026, #0b0709 75%);
  box-shadow:
    0 0 0 3px #0a0608,
    0 0 0 6px var(--gold-dim),
    0 0 0 8px #1a1014,
    0 10px 26px rgba(0, 0, 0, 0.75),
    var(--inset-deep);
  overflow: hidden;
}
.orb.hp  { left: 26px; }
.orb.mana { right: 26px; }

/* the draining liquid: a full-size fill block whose top is masked by height */
.orb-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height;
}
.orb.hp .orb-fill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 22%),
    linear-gradient(180deg, var(--hp-bright), var(--hp) 55%, var(--hp-dark));
}
.orb.mana .orb-fill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 22%),
    linear-gradient(180deg, var(--mana-bright), var(--mana) 55%, var(--mana-dark));
}
/* animated wavy surface using a pseudo-element ribbon */
.orb-fill::before {
  content: "";
  position: absolute;
  top: -8px; left: -25%;
  width: 150%;
  height: 16px;
  background: inherit;
  border-radius: 45%;
  opacity: 0.9;
  animation: orbWave 3.2s linear infinite;
}
@keyframes orbWave {
  0%   { transform: translateX(0) rotate(0deg); }
  100% { transform: translateX(16%) rotate(360deg); }
}
/* glassy highlight + rim sheen on top of liquid */
.orb-gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 255, 255, 0.35), transparent 36%),
    radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.08), transparent 50%);
  pointer-events: none;
}
.orb-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--num-font);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.02em;
  z-index: 2;
}
/* low-resource flash */
.orb.low .orb-fill { animation: orbLow 0.9s ease-in-out infinite; }
@keyframes orbLow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.5) saturate(1.4); }
}

/* ----------------------------- XP BAR ----------------------------- */
.xp-bar {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: min(56vw, 720px);
  height: 14px;
  background: linear-gradient(180deg, #0a0608, #150d11);
  border: 1px solid #2c2018;
  border-radius: 8px;
  box-shadow: var(--inset-deep), 0 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.xp-fill {
  height: 100%;
  width: 0%;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, var(--xp-bright), var(--xp) 55%, #4a2c80);
  box-shadow: 0 0 12px rgba(160, 100, 240, 0.6);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.xp-fill.flash { animation: xpFlash 0.5s ease; }
@keyframes xpFlash {
  0% { filter: brightness(2.2); }
  100% { filter: brightness(1); }
}
.level-badge {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) translateX(calc(-50% - min(28vw, 360px)));
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--num-font);
  font-weight: 900;
  font-size: 1.2rem;
  color: #1a0e05;
  background: radial-gradient(circle at 40% 32%, var(--gold-bright), var(--gold) 60%, var(--gold-dim));
  border: 2px solid #4a3214;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
.level-badge.levelup { animation: levelBadgePop 0.7s cubic-bezier(0.18, 1.4, 0.4, 1); }
@keyframes levelBadgePop {
  0%   { transform: translateX(-50%) translateX(calc(-50% - min(28vw, 360px))) scale(1); }
  40%  { transform: translateX(-50%) translateX(calc(-50% - min(28vw, 360px))) scale(1.6); filter: brightness(1.8); }
  100% { transform: translateX(-50%) translateX(calc(-50% - min(28vw, 360px))) scale(1); }
}

/* ----------------------------- HOTBAR ----------------------------- */
.hotbar {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(20, 14, 16, 0.7), rgba(10, 7, 9, 0.7));
  border: 1px solid #2c2018;
  border-radius: 12px;
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.slot {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: radial-gradient(circle at 40% 30%, #241a1e, #0c0709);
  border: 2px solid #4a3624;
  box-shadow: var(--inset-deep), 0 2px 6px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  overflow: hidden;
}
.slot:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--inset-deep), 0 0 14px rgba(233, 184, 90, 0.4);
}
.slot:active { transform: translateY(0); }
.slot .slot-icon { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7)); z-index: 1; }
.slot .slot-key {
  position: absolute;
  top: 1px; left: 3px;
  font-family: var(--num-font);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 1px 1px #000;
  z-index: 3;
  letter-spacing: 0.02em;
}
.slot .slot-cost {
  position: absolute;
  bottom: 0; right: 3px;
  font-family: var(--num-font);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--mana-bright);
  text-shadow: 0 1px 1px #000;
  z-index: 3;
}
/* cooldown sweep — conic overlay drawn clockwise */
.slot .cd-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: conic-gradient(rgba(6, 4, 8, 0.78) var(--cd, 0%), transparent 0);
  pointer-events: none;
}
.slot .cd-text {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--num-font);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 1px 3px #000;
}
.slot.cooling .cd-text { display: flex; }
.slot.cooling .slot-icon { filter: grayscale(0.7) brightness(0.6); }
/* not enough mana */
.slot.no-mana { border-color: #5a2a2a; }
.slot.no-mana .slot-icon { filter: brightness(0.55) saturate(0.5); }
.slot.no-mana::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(120, 20, 20, 0.28);
  z-index: 2;
}
/* active buff glow ring */
.slot.buff-active {
  border-color: var(--gold-bright);
  box-shadow:
    var(--inset-deep),
    0 0 16px rgba(255, 200, 90, 0.7),
    0 0 26px rgba(255, 160, 50, 0.4);
  animation: buffPulse 1.4s ease-in-out infinite;
}
@keyframes buffPulse {
  0%, 100% { box-shadow: var(--inset-deep), 0 0 12px rgba(255, 200, 90, 0.6); }
  50%      { box-shadow: var(--inset-deep), 0 0 22px rgba(255, 200, 90, 0.95); }
}
.slot.flash-cast { animation: slotCast 0.32s ease; }
@keyframes slotCast {
  0% { filter: brightness(2.4); transform: scale(1.12); }
  100% { filter: brightness(1); transform: scale(1); }
}
/* dodge slot is a touch dimmer/round */
.slot.dodge { border-color: #3a5a6a; }

/* refilling cooldown bar (FEATURE #3) — a thin bottom-anchored track whose fill
   grows 0→100% as the cooldown drains (full = ready). Sits above the icon but
   below the numeric cd-text so the seconds remain readable. */
.slot .cd-bar {
  position: absolute;
  left: 3px; right: 3px; bottom: 3px;
  height: 4px;
  z-index: 3;
  border-radius: 3px;
  background: rgba(6, 4, 8, 0.7);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  opacity: 0; /* hidden until cooling, faded in below */
  transition: opacity 0.15s ease;
}
.slot.cooling .cd-bar { opacity: 1; }
.slot .cd-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold) 60%, var(--gold-bright));
  box-shadow: 0 0 6px rgba(233, 184, 90, 0.6);
  transition: width 0.1s linear;
}
/* potion-bound hotbar slot: warm tint + stack count, dimmed when empty */
.slot.potion-slot { border-color: #4a6a3a; }
.slot .slot-count {
  position: absolute;
  bottom: 1px; right: 3px;
  z-index: 3;
  font-family: var(--num-font);
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
}
.slot.out-of-stock .slot-icon { filter: grayscale(0.8) brightness(0.5); }
.slot.out-of-stock { border-color: #5a2a2a; }
/* drag-and-drop drop target highlight (FEATURE #6) */
.slot.drop-hover {
  border-color: var(--gold-bright);
  box-shadow: var(--inset-deep), 0 0 16px rgba(255, 210, 120, 0.85);
  transform: translateY(-2px);
}
.slot[draggable="true"] { cursor: grab; }
.slot[draggable="true"]:active { cursor: grabbing; }

/* ----------------------------- BUFF ICONS ----------------------------- */
.buff-row {
  position: absolute;
  top: 64px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.buff-icon {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  background: radial-gradient(circle at 40% 30%, #2a1f24, #0c0709);
  border: 2px solid var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 10px rgba(233, 184, 90, 0.45), var(--inset-deep);
}
.buff-icon .buff-time {
  position: absolute;
  bottom: -2px; right: 1px;
  font-family: var(--num-font);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--gold-bright);
  text-shadow: 0 1px 2px #000;
}
/* shield level badge (FEATURE #2) — top-left corner, distinct from the timer */
.buff-icon .buff-lv {
  position: absolute;
  top: -3px; left: 1px;
  font-family: var(--num-font);
  font-size: 0.58rem;
  font-weight: 700;
  color: #ffe089;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(255, 221, 102, 0.7);
}

/* ----------------------------- GOLD ----------------------------- */
.gold-counter {
  position: absolute;
  top: 14px;
  right: 230px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 10px;
  background: linear-gradient(180deg, rgba(28, 20, 12, 0.92), rgba(14, 10, 6, 0.92));
  border: 1px solid var(--gold-dim);
  border-radius: 18px;
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-family: var(--num-font);
  font-weight: 700;
  color: var(--gold-bright);
  text-shadow: 0 1px 2px #000;
}
.gold-counter .coin { font-size: 1.1rem; filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.6)); }
.gold-counter.bump { animation: goldBump 0.4s ease; }
@keyframes goldBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); filter: brightness(1.5); }
  100% { transform: scale(1); }
}

/* ----------------------------- SAVE BUTTON ----------------------------- */
/* Gated to saferooms (phase 2). Disabled (greyed) outside a saferoom; glows
   when a save is permitted. Clicking outside still toasts (save system). */
.save-btn {
  position: absolute;
  top: 52px;
  right: 230px;
  padding: 5px 14px;
  font-family: var(--num-font);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: linear-gradient(180deg, rgba(28, 20, 12, 0.92), rgba(14, 10, 6, 0.92));
  border: 1px solid var(--panel-edge);
  border-radius: 16px;
  box-shadow: var(--shadow-deep);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, filter 0.12s ease;
}
.save-btn.ready {
  color: var(--good);
  border-color: var(--good);
  box-shadow: 0 0 14px rgba(95, 211, 95, 0.45), var(--shadow-deep);
}
.save-btn.ready:hover { filter: brightness(1.15); }
.save-btn.ready:active { transform: translateY(1px); }
.save-btn.disabled,
.save-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
  color: var(--text-faint);
  border-color: var(--panel-edge);
  box-shadow: var(--shadow-deep);
}

/* ----------------------------- FPS ----------------------------- */
.fps-meter {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--num-font);
  font-size: 0.72rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px #000;
}

/* ----------------------------- TARGET FRAME ----------------------------- */
.target-frame {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  max-width: 320px;
  padding: 7px 14px 9px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.target-frame.show { opacity: 1; }
.target-frame .tf-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}
.target-frame .tf-name {
  font-family: var(--num-font);
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
  text-shadow: 0 1px 2px #000;
}
.target-frame .tf-name.elite { color: var(--gold-bright); }
.target-frame .tf-lvl {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: var(--num-font);
}
.target-frame .tf-bar {
  position: relative;
  height: 16px;
  background: linear-gradient(180deg, #0a0608, #150d11);
  border: 1px solid #2c2018;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--inset-deep);
}
.target-frame .tf-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #ff5a4d, var(--hp) 55%, #7a0d10);
  transition: width 0.22s ease;
}
.target-frame .tf-hptext {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--num-font);
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

/* ----------------------------- BOSS BAR ----------------------------- */
.boss-bar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-130px);
  width: min(70vw, 900px);
  padding: 12px 22px 14px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(40, 12, 10, 0.95), rgba(18, 6, 8, 0.95));
  border: 1px solid #5a2418;
  border-bottom: 2px solid var(--ember-deep);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 10px 40px rgba(180, 40, 10, 0.4), var(--inset-deep);
  transition: transform 0.6s cubic-bezier(0.18, 1.1, 0.4, 1);
  z-index: 60;
}
.boss-bar.show { transform: translateX(-50%) translateY(0); }
.boss-bar .boss-name {
  font-family: var(--title-font);
  font-weight: 900;
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  letter-spacing: 0.08em;
  color: #ffd2a0;
  text-shadow: 0 0 14px rgba(255, 90, 30, 0.6), 0 2px 0 #2a0c04;
}
.boss-bar .boss-title {
  font-family: var(--num-font);
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  color: var(--ember);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.boss-bar .boss-track {
  position: relative;
  height: 26px;
  background: linear-gradient(180deg, #1a0808, #0a0303);
  border: 1px solid #3a1410;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--inset-deep);
}
.boss-bar .boss-fill {
  height: 100%;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(90deg, #ff7a2b, #ff3b1e 50%, #c11);
  box-shadow: 0 0 20px rgba(255, 90, 30, 0.7);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.boss-bar .boss-fill.enrage {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(90deg, #ff2b6b, #ff0033 50%, #900);
  animation: enragePulse 0.8s ease-in-out infinite;
}
@keyframes enragePulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.4); }
}
.boss-bar .boss-hptext {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--num-font);
  font-weight: 700;
  font-size: 0.86rem;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  letter-spacing: 0.06em;
}

/* ----------------------------- MINIMAP ----------------------------- */
.minimap {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 196px;
  height: 196px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0e0b10, #050306);
  border: 3px solid var(--gold-dim);
  box-shadow:
    0 0 0 2px #0a0608,
    0 8px 24px rgba(0, 0, 0, 0.7),
    inset 0 0 24px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
.minimap canvas { width: 100%; height: 100%; display: block; }
.minimap .mm-compass {
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--num-font);
  font-weight: 700;
  font-size: 0.66rem;
  color: var(--gold);
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

/* ----------------------------- TOASTS ----------------------------- */
.toast-stack {
  position: absolute;
  top: 230px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 60vw;
}
.toast {
  padding: 8px 18px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.96rem;
  text-shadow: 0 1px 2px #000;
  box-shadow: var(--shadow-deep);
  animation: toastIn 0.3s cubic-bezier(0.18, 1.2, 0.4, 1) both;
  white-space: nowrap;
}
.toast.out { animation: toastOut 0.45s ease forwards; }
.toast.kind-good      { border-left-color: var(--good); }
.toast.kind-bad       { border-left-color: var(--danger); color: #ffd0c8; }
.toast.kind-loot      { border-left-color: var(--r-epic); }
.toast.kind-legendary { border-left-color: var(--r-legendary); color: var(--gold-bright);
                        box-shadow: 0 0 22px rgba(255, 155, 43, 0.5), var(--shadow-deep); }
.toast.kind-boss      { border-left-color: var(--ember); color: #ffd2a0; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(-14px) scale(0.9); }
                      to   { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); }
                      to   { opacity: 0; transform: translateY(-10px); } }

/* big center announce (level up / boss) */
.center-announce {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--title-font);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: 0.1em;
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(255, 150, 50, 0.7), 0 4px 0 #2a1404, 0 6px 18px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  animation: announce 1.8s ease forwards;
}
@keyframes announce {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.6); }
  18%  { opacity: 1; transform: translateX(-50%) scale(1.1); }
  30%  { transform: translateX(-50%) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.05) translateY(-24px); }
}

/* ============================================================================
   PANELS — inventory / character sheet
   ============================================================================ */
#panels {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.panel {
  position: absolute;
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgba(40, 28, 26, 0.96), rgba(20, 14, 16, 0.97));
  border: 2px solid var(--panel-edge);
  border-radius: 12px;
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text);
  animation: panelIn 0.22s cubic-bezier(0.18, 1.1, 0.4, 1) both;
}
@keyframes panelIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* ornate corner accents */
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--gold-dim);
  opacity: 0.7;
}
.panel::before { top: 5px; left: 5px; border-right: none; border-bottom: none; }
.panel::after  { bottom: 5px; right: 5px; border-left: none; border-top: none; }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--panel-edge);
  background: linear-gradient(180deg, rgba(60, 40, 24, 0.5), transparent);
  border-radius: 10px 10px 0 0;
}
.panel-title {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(255, 150, 50, 0.4), 0 1px 2px #000;
  text-transform: uppercase;
}
.panel-close {
  pointer-events: auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: all 0.12s ease;
}
.panel-close:hover { color: var(--danger); border-color: var(--danger); }
.panel-body { padding: 16px 18px; }

/* ---- inventory panel layout ---- */
.inv-panel { top: 50%; right: 4%; transform: translateY(-50%); width: 380px; }
.inv-panel { animation: panelInRight 0.22s cubic-bezier(0.18, 1.1, 0.4, 1) both; }
@keyframes panelInRight { from { opacity: 0; transform: translateY(-50%) translateX(20px); }
                          to   { opacity: 1; transform: translateY(-50%) translateX(0); } }

.inv-gold {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
  font-family: var(--num-font);
  font-weight: 700;
  color: var(--gold-bright);
}
.inv-gold .coin { filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.6)); }

/* ---- inventory tabs + rarity filter (FEATURE #7) ---- */
.inv-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(120, 90, 50, 0.25);
}
.inv-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.inv-tab {
  font-family: var(--num-font);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 4px 9px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.inv-tab:hover { color: var(--text); border-color: var(--gold-dim); }
.inv-tab.active {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(60, 40, 24, 0.6), rgba(20, 14, 10, 0.4));
  box-shadow: 0 0 8px rgba(233, 184, 90, 0.3);
}
.inv-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
}
.inv-filter-label {
  font-family: var(--num-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.inv-filter-select {
  font-family: var(--ui-font);
  font-size: 0.78rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
}
.inv-filter-select:focus { outline: none; border-color: var(--gold); }
.inv-filter-select option { background: var(--bg-dark); color: var(--text); }

.inv-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-faint);
  font-style: italic;
  padding: 20px 0;
}

.section-label {
  font-family: var(--num-font);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 6px 0 8px;
  border-bottom: 1px solid rgba(120, 90, 50, 0.25);
  padding-bottom: 4px;
}

.bag-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-height: 46vh;       /* keep the (now filterable) grid inside the viewport */
  overflow-y: auto;
  padding-right: 2px;
}
.bag-grid::-webkit-scrollbar { width: 8px; }
.bag-grid::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; }
.bag-grid::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); }
.quick-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.bag-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 7px;
  background: radial-gradient(circle at 40% 30%, #251b1f, #0c0709);
  border: 2px solid #3a2b22;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s, box-shadow 0.12s;
}
.bag-slot:hover { transform: translateY(-2px); box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); }
.bag-slot.empty { cursor: default; }
.bag-slot.empty:hover { transform: none; box-shadow: none; }
.bag-slot .item-icon { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8)); }
.bag-slot .stack-count {
  position: absolute;
  bottom: 1px; right: 3px;
  font-family: var(--num-font);
  font-size: 0.66rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
}

/* ---- discard trash button (FEATURE C) — top-right, reveal on hover ---- */
.bag-slot .item-trash {
  position: absolute;
  top: 1px; right: 2px;
  z-index: 2;                 /* above .item-icon */
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--text-dim);
  font-size: 0.66rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.12s ease, color 0.12s, border-color 0.12s, background 0.12s;
}
.bag-slot:hover .item-trash { opacity: 1; }
.bag-slot .item-trash:hover {
  color: #fff;
  border-color: var(--danger);
  background: var(--danger);
}
/* empty padding cells carry no item — no trash button to reveal */
.bag-slot.empty .item-trash { display: none; }

/* rarity colored borders + corner glow */
.bag-slot.r-common    { border-color: var(--r-common); }
.bag-slot.r-uncommon  { border-color: var(--r-uncommon); box-shadow: 0 0 8px rgba(95, 211, 95, 0.3); }
.bag-slot.r-rare      { border-color: var(--r-rare); box-shadow: 0 0 9px rgba(91, 141, 255, 0.35); }
.bag-slot.r-epic      { border-color: var(--r-epic); box-shadow: 0 0 11px rgba(182, 91, 255, 0.4); }
.bag-slot.r-legendary { border-color: var(--r-legendary);
                        box-shadow: 0 0 14px rgba(255, 155, 43, 0.55);
                        animation: legendaryGlow 2s ease-in-out infinite; }
@keyframes legendaryGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 155, 43, 0.45); }
  50%      { box-shadow: 0 0 20px rgba(255, 155, 43, 0.75); }
}

/* spellbook drag sources (FEATURE #6) — arcane border + grab cursor */
.bag-slot.spell-cell {
  border-color: #6f5bd6;
  background: radial-gradient(circle at 40% 30%, #211b33, #0a0712);
  box-shadow: 0 0 8px rgba(111, 91, 214, 0.3);
  cursor: grab;
}
.bag-slot.spell-cell:active { cursor: grabbing; }

/* ---- drag-to-trash drop zone (FEATURE C) ---- */
.bag-trash-zone {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px dashed rgba(255, 90, 77, 0.45);
  border-radius: 8px;
  background: rgba(40, 12, 10, 0.3);
  color: var(--text-faint);
  font-family: var(--num-font);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.bag-trash-zone .bag-trash-icon { font-size: 1rem; filter: drop-shadow(0 1px 2px #000); }
.bag-trash-zone.drag-over {
  border-color: var(--danger);
  border-style: solid;
  background: rgba(255, 90, 77, 0.18);
  color: #ffd0c8;
  box-shadow: 0 0 12px rgba(255, 90, 77, 0.4) inset;
}

/* ---- rare-and-above discard confirm popover (FEATURE C) ---- */
.discard-confirm {
  position: absolute;
  z-index: 150;              /* above panel (100), below tooltip (300) */
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  min-width: 220px;
  padding: 16px 18px;
  border: 2px solid var(--danger);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(40, 18, 16, 0.98), rgba(20, 10, 10, 0.99));
  box-shadow: var(--shadow-deep), 0 0 18px rgba(255, 90, 77, 0.35);
  text-align: center;
  animation: panelIn 0.16s cubic-bezier(0.18, 1.1, 0.4, 1) both;
}
.discard-confirm-q {
  font-family: var(--title-font);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 4px;
}
.discard-confirm-sub {
  font-size: 0.74rem;
  color: var(--text-faint);
  margin-bottom: 12px;
}
.discard-confirm-btns { display: flex; gap: 8px; justify-content: center; }
.discard-confirm-yes, .discard-confirm-no {
  font-family: var(--num-font);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--panel-edge);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-dim);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.discard-confirm-yes {
  border-color: var(--danger);
  color: #fff;
  background: rgba(255, 90, 77, 0.85);
}
.discard-confirm-yes:hover { background: var(--danger); }
.discard-confirm-no:hover { color: var(--text); border-color: var(--gold-dim); }

/* ---- equipment doll ---- */
.equip-doll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}
.equip-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 7px;
  background:
    radial-gradient(circle at 40% 30%, #1f161a, #0a0608);
  border: 2px dashed #4a3624;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s;
}
.equip-slot:hover { transform: translateY(-2px); border-color: var(--gold); }
.equip-slot.filled { border-style: solid; }
.equip-slot .slot-ghost {
  font-size: 0.62rem;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  font-family: var(--num-font);
}
.equip-slot .item-icon { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8)); }
.equip-slot.r-common    { border-color: var(--r-common); }
.equip-slot.r-uncommon  { border-color: var(--r-uncommon); }
.equip-slot.r-rare      { border-color: var(--r-rare); }
.equip-slot.r-epic      { border-color: var(--r-epic); }
.equip-slot.r-legendary { border-color: var(--r-legendary); box-shadow: 0 0 12px rgba(255, 155, 43, 0.4); }

/* ---- character sheet ---- */
.char-panel { top: 50%; left: 4%; transform: translateY(-50%); width: 360px; }
.char-panel { animation: panelInLeft 0.22s cubic-bezier(0.18, 1.1, 0.4, 1) both; }
@keyframes panelInLeft { from { opacity: 0; transform: translateY(-50%) translateX(-20px); }
                         to   { opacity: 1; transform: translateY(-50%) translateX(0); } }

.char-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--panel-edge);
}
.char-portrait {
  width: 56px; height: 56px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  background: radial-gradient(circle at 40% 30%, #3a2820, #120c0e);
  border: 2px solid var(--gold-dim);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
}
.char-meta .char-level {
  font-family: var(--num-font);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold-bright);
}
.char-meta .char-xp {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.stat-list { display: flex; flex-direction: column; gap: 1px; }
.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 0.94rem;
}
.stat-row:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.stat-row .stat-name { color: var(--text-dim); }
.stat-row .stat-val {
  font-family: var(--num-font);
  font-weight: 700;
  color: var(--text);
}
.stat-row.highlight .stat-val { color: var(--gold-bright); }

/* ============================================================================
   TOOLTIP
   ============================================================================ */
.item-tooltip {
  position: fixed;
  z-index: 300;
  width: 248px;
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(30, 22, 18, 0.98), rgba(16, 11, 12, 0.99));
  border: 1px solid var(--panel-edge);
  border-radius: 9px;
  box-shadow: var(--shadow-deep), 0 0 0 1px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  font-size: 0.9rem;
}
.item-tooltip .tt-name {
  font-family: var(--num-font);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1px;
}
.item-tooltip .tt-sub {
  color: var(--text-faint);
  font-size: 0.78rem;
  font-style: italic;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.item-tooltip .tt-stats { display: flex; flex-direction: column; gap: 2px; }
.item-tooltip .tt-stat { color: var(--text); }
.item-tooltip .tt-stat .tt-delta { font-weight: 700; margin-left: 6px; font-family: var(--num-font); }
.item-tooltip .tt-stat .up   { color: var(--good); }
.item-tooltip .tt-stat .down { color: var(--danger); }
.item-tooltip .tt-affix { color: var(--mana-bright); }
.item-tooltip .tt-desc {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(120, 90, 50, 0.25);
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.84rem;
  line-height: 1.35;
}
.item-tooltip .tt-hint {
  margin-top: 7px;
  color: var(--text-faint);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
/* rarity name colors (shared by tooltip + lists) */
.r-common    { color: var(--r-common); }
.r-uncommon  { color: var(--r-uncommon); }
.r-rare      { color: var(--r-rare); }
.r-epic      { color: var(--r-epic); }
.r-legendary { color: var(--r-legendary); }

/* ============================================================================
   FLOATING COMBAT TEXT (spawned by systems/fx.js into #fx-layer)
   ============================================================================ */
#fx-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  overflow: hidden;
}
.float-text {
  position: absolute;
  font-family: var(--num-font);
  font-weight: 700;
  text-shadow: 0 2px 3px #000, 0 0 6px rgba(0, 0, 0, 0.8);
  will-change: transform, opacity;
  white-space: nowrap;
}
.float-dmg {
  color: #ffd9a0;
  font-size: 1.3rem;
  animation: floatUp 0.95s ease-out forwards;
}
.float-crit {
  color: #ff5a3c;
  font-size: 2rem;
  text-shadow: 0 0 10px rgba(255, 90, 30, 0.8), 0 2px 3px #000;
  animation: floatCrit 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.float-heal {
  color: #8dffa0;
  font-size: 1.3rem;
  text-shadow: 0 0 8px rgba(80, 255, 120, 0.6), 0 2px 3px #000;
  animation: floatUp 1.05s ease-out forwards;
}
.float-mana {
  color: var(--mana-bright);
  font-size: 1.15rem;
  animation: floatUp 1s ease-out forwards;
}
.float-xp {
  color: var(--xp-bright);
  font-size: 1rem;
  animation: floatUp 1.1s ease-out forwards;
}
.float-miss {
  color: #c8c8c8;
  font-style: italic;
  font-size: 1.1rem;
  animation: floatUp 0.9s ease-out forwards;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
  15%  { opacity: 1; transform: translate(-50%, -8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}
@keyframes floatCrit {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.4) rotate(-8deg); }
  18%  { opacity: 1; transform: translate(-50%, -10px) scale(1.5) rotate(3deg); }
  35%  { transform: translate(-50%, -14px) scale(1.15) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -90px) scale(1.1); }
}

/* screen-shake / hit-flash hooks (fx toggles classes on body) */
.screen-flash::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 40, 30, 0.18);
  z-index: 80;
  pointer-events: none;
  animation: flashFade 0.22s ease forwards;
}
@keyframes flashFade { from { opacity: 1; } to { opacity: 0; } }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 900px) {
  .orb { width: 104px; height: 104px; }
  .minimap { width: 150px; height: 150px; }
  .gold-counter { right: 178px; }
  .slot { width: 48px; height: 48px; font-size: 24px; }
  .inv-panel, .char-panel { width: 320px; }
}
@media (max-width: 640px) {
  .orb { width: 86px; height: 86px; bottom: 16px; }
  .orb.hp { left: 12px; } .orb.mana { right: 12px; }
  .hotbar { gap: 5px; padding: 6px 8px; bottom: 70px; }
  .slot { width: 42px; height: 42px; font-size: 20px; }
  .minimap { width: 120px; height: 120px; }
  .gold-counter { right: 144px; top: 10px; }
  .xp-bar { width: 70vw; }
  .level-badge { transform: translateX(-50%) translateX(calc(-50% - 36vw)); }
}

/* ============================================================================
   HUD DEBUFFS + CHARACTER ATTRIBUTES (PLAYER-PHASE)
   ============================================================================ */

/* --- HUD player debuff/status row (sibling of .buff-row) --- */
/* Sits just below the buff row; the buff-row is anchored top:64px left:16px and
   grows downward, so we offset the debuff row a little lower. */
.buff-row.debuff-row {
  top: auto;
  bottom: 220px;   /* above the hotbar, out of the buff row's way */
  left: 16px;
}
/* Debuff variant of the buff icon: red-ish rim vs the gold buff border. */
.buff-icon.debuff {
  border-color: #b6413a;
  box-shadow: 0 0 10px rgba(200, 60, 50, 0.5), var(--inset-deep);
  background: radial-gradient(circle at 40% 30%, #2a1414, #0c0606);
}
.buff-icon.debuff .buff-time { color: #ffb3a6; }
/* Per-status tints so freeze/burn/poison/slow read at a glance. */
.buff-icon.debuff-freeze {
  border-color: #6fd8ff;
  box-shadow: 0 0 12px rgba(111, 216, 255, 0.55), var(--inset-deep);
}
.buff-icon.debuff-freeze .buff-time { color: #cdeeff; }
.buff-icon.debuff-burn {
  border-color: #ff8a3c;
  box-shadow: 0 0 12px rgba(255, 138, 60, 0.55), var(--inset-deep);
}
.buff-icon.debuff-burn .buff-time { color: #ffd2a6; }
.buff-icon.debuff-poison {
  border-color: #9be34a;
  box-shadow: 0 0 12px rgba(155, 227, 74, 0.5), var(--inset-deep);
}
.buff-icon.debuff-poison .buff-time { color: #dcffb0; }
.buff-icon.debuff-slow {
  border-color: #9aa0a8;
  box-shadow: 0 0 10px rgba(154, 160, 168, 0.45), var(--inset-deep);
}
.buff-icon.debuff-slow .buff-time { color: #e0e4ea; }

/* --- Frozen full-screen frost vignette + label --- */
.frost-vignette {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  background:
    radial-gradient(ellipse at center, rgba(120, 210, 255, 0) 42%, rgba(90, 180, 240, 0.28) 100%);
  box-shadow: inset 0 0 140px rgba(120, 210, 255, 0.4);
}
.frost-vignette.show { opacity: 1; }
.frost-vignette .frost-label {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--num-font);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 2px;
  color: #d6f2ff;
  text-shadow: 0 0 12px rgba(120, 210, 255, 0.9), 0 2px 4px #000;
}

/* --- Character sheet: attributes + point-buy --- */
.attr-section { margin-bottom: 12px; }
.attr-points {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 2px 0 8px;
}
.attr-points.has-points {
  color: var(--gold-bright);
  text-shadow: 0 0 6px rgba(255, 217, 138, 0.5);
}
.attr-list { display: flex; flex-direction: column; gap: 3px; }
.attr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.94rem;
  background: rgba(255, 255, 255, 0.03);
}
.attr-row .attr-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.attr-row .attr-icon { font-size: 1.05rem; }
.attr-row .attr-val {
  font-family: var(--num-font);
  font-weight: 700;
  color: var(--gold-bright);
  margin-left: auto;
  margin-right: 10px;
  min-width: 22px;
  text-align: right;
}
.attr-plus {
  pointer-events: auto;
  cursor: pointer;
  width: 24px; height: 24px;
  border-radius: 5px;
  border: 1px solid var(--gold-dim);
  background: linear-gradient(180deg, #3a2c1a, #1c130b);
  color: var(--gold-bright);
  font-family: var(--num-font);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.attr-plus:hover:not(.disabled):not(:disabled) {
  filter: brightness(1.25);
  box-shadow: 0 0 8px rgba(255, 217, 138, 0.5);
  transform: translateY(-1px);
}
.attr-plus:active:not(.disabled):not(:disabled) { transform: translateY(0); }
.attr-plus.disabled, .attr-plus:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ============================================================================
   NARRATOR — sarcastic AI overlay (game.narrator, created by src/systems/narrator.js)
   Top-center pill below the reticle, above the HUD. Non-interactive.
   z-index 70: HUD is 50, panels 100, pause/death 210.
   ============================================================================ */
#narrator-overlay {
  position: fixed;
  top: 8%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 60vw;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(150, 190, 255, 0.35);
  background: linear-gradient(180deg, rgba(14, 16, 26, 0.86), rgba(8, 9, 16, 0.9));
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(90, 140, 255, 0.18);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.18, 1.1, 0.4, 1);
}
#narrator-overlay.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.narrator-avatar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #dff0ff;
  background: radial-gradient(circle at 35% 30%, #6fb0ff, #2b56b8 70%);
  box-shadow: 0 0 10px rgba(110, 170, 255, 0.7), inset 0 0 4px rgba(255, 255, 255, 0.4);
  animation: narratorPulse 2.4s ease-in-out infinite;
}
.narrator-text {
  font-family: var(--num-font, "EB Garamond", serif);
  font-size: 0.92rem;
  line-height: 1.3;
  color: #eaf2ff;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(120, 170, 255, 0.35);
  white-space: normal;
}
@keyframes narratorPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(110, 170, 255, 0.55), inset 0 0 4px rgba(255, 255, 255, 0.4); }
  50%      { box-shadow: 0 0 16px rgba(110, 170, 255, 0.95), inset 0 0 5px rgba(255, 255, 255, 0.6); }
}
@media (max-width: 640px) {
  #narrator-overlay { max-width: 88vw; top: 6%; padding: 7px 12px 7px 9px; gap: 8px; }
  .narrator-avatar { width: 20px; height: 20px; font-size: 0.52rem; }
  .narrator-text { font-size: 0.8rem; }
}

/* ============================================================================
   TOUCH CONTROLS  (dual-stick + action buttons, mobile only)
   Container is hidden until InputSystem.setTouchUi(true) adds `.touch-ui`.
   The container itself is pointer-events:none so empty regions never block the
   game; only the interactive children opt back in with pointer-events:auto.
   Byte-identical desktop behavior: with no `.touch-ui` class, `display:none`.
   ============================================================================ */
.touch-controls {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70; /* above HUD hotbar/orbs (which sit lower), below modal panels */
  pointer-events: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.touch-controls.touch-ui { display: block; }

/* --- right-side look/drag zone (camera rotate). Sits under the buttons. --- */
.tc-look {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  pointer-events: auto;
  touch-action: none;
}

/* --- left virtual joystick --- */
.tc-stick-base {
  position: absolute;
  left: 26px;
  bottom: 34px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(40,32,24,0.42), rgba(20,16,12,0.30));
  border: 2px solid rgba(210,170,90,0.35);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.45);
  pointer-events: auto;
  touch-action: none;
}
.tc-stick-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin-left: -31px;
  margin-top: -31px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(240,210,140,0.85), rgba(150,110,50,0.7));
  border: 2px solid rgba(255,230,160,0.6);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  will-change: transform;
}

/* --- action buttons (shared look) --- */
.tc-btn {
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: #f5e6c0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  background: radial-gradient(circle at 50% 40%, rgba(60,48,34,0.55), rgba(24,18,12,0.55));
  border: 2px solid rgba(210,170,90,0.4);
  box-shadow: inset 0 0 14px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tc-btn-active {
  background: radial-gradient(circle at 50% 40%, rgba(255,190,90,0.75), rgba(120,70,20,0.7));
  border-color: rgba(255,230,160,0.85);
  transform: scale(0.94);
}

/* Attack: large primary, bottom-right. */
.tc-attack {
  position: absolute;
  right: 30px;
  bottom: 40px;
  width: 96px;
  height: 96px;
  font-size: 1rem;
}
/* Dodge: smaller, up-left of attack. */
.tc-dodge {
  position: absolute;
  right: 138px;
  bottom: 58px;
  width: 66px;
  height: 66px;
  font-size: 0.7rem;
}

/* Skill hotbar row (1..6) above the attack cluster. */
.tc-skills {
  position: absolute;
  right: 24px;
  bottom: 150px;
  display: flex;
  gap: 8px;
  pointer-events: none; /* the row itself is inert; buttons opt in */
}
.tc-skill {
  width: 56px;
  height: 56px;
  font-size: 1.1rem;
  border-radius: 14px;
}

/* Inventory / Character utility column (top-right). */
.tc-util {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.tc-util-btn {
  width: 56px;
  height: 56px;
  font-size: 1.1rem;
  border-radius: 12px;
}

/* Narrow phones: shrink a touch so the cluster stays thumb-reachable. */
@media (max-width: 560px) {
  .tc-stick-base { width: 116px; height: 116px; left: 18px; bottom: 26px; }
  .tc-attack { width: 84px; height: 84px; right: 22px; bottom: 30px; }
  .tc-dodge { width: 60px; height: 60px; right: 116px; bottom: 44px; }
  .tc-skill { width: 52px; height: 52px; }
  .tc-skills { bottom: 128px; right: 16px; gap: 6px; }
}