/* ═════════ TOKENS (from Game UI.html design kit, pixel-font override) ═════════ */
:root {
  --gold:      #f0d878;
  --gold-dk:   #c89834;
  --flame:     #c46038;
  --flame-dk:  #8a3a1a;
  --blood:     #b82828;
  --wood:      #6a4828;
  --wood-dk:   #2a1808;
  --wood-lt:   #8e6a3a;
  --ink:       #1a0e08;
  --parchment: #fff8d8;
  --bg:        #14100c;
  --green:     #6acf5a;
  --green-dk:  #3a8836;

  /* User asked for "пиксельный шрифт везде". Press Start 2P is the
     canonical NES pixel bitmap font. Apply globally — display & mono
     point to the same font so timer numbers also render pixelated. */
  --font-display: 'Press Start 2P', monospace;
  --font-mono:    'Press Start 2P', monospace;
}

/* ═════════ GLOBAL ═════════ */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--parchment);
  font-family: var(--font-display);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body { overflow: hidden; }
.screen { width: 100%; }
.hidden { display: none !important; }

/* ═════════ REGISTRATION ═════════ */
#screen-register {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse at center 30%, #3a2614 0%, #1a1208 50%, #0a0604 100%),
    var(--bg);
}
/* Hatched parchment-cloth texture so the dark background isn't dead flat */
#screen-register::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient( 45deg, transparent 0 12px, rgba(245,216,120,0.012) 12px 13px),
    repeating-linear-gradient(-45deg, transparent 0 12px, rgba(245,216,120,0.012) 12px 13px);
  pointer-events: none;
  z-index: 0;
}
/* Soft vignette */
#screen-register::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 0;
}

.reg-stack {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 460px;
  width: 100%;
}

/* ── Decorative mobs around the registration card ── */
.reg-mob {
  position: absolute;
  width: clamp(120px, 13vw, 200px);
  aspect-ratio: 200 / 300;
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.7));
}
/* Bottom-corners + outer mid-edges so they frame the card without overlap */
.reg-mob-wif  { left: 6%;  bottom: 8%; }
.reg-mob-bonk { right: 6%; bottom: 8%; }
.reg-mob-alon { left: 18%; top: 18%;  width: clamp(100px, 10vw, 160px); opacity: 0.85; }
.reg-mob-pill { right: 18%; top: 18%; width: clamp(100px, 10vw, 160px); opacity: 0.85; }

.title-stack { text-align: center; margin-bottom: 0; }
.pve-title {
  font-size: clamp(40px, 10vw, 84px);
  color: var(--gold);
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-shadow:
    4px 4px 0 var(--wood-dk),
    0 0 40px rgba(245,216,120,0.4),
    0 0 80px rgba(196,96,56,0.2);
}
.pve-subtitle {
  font-size: 10px;
  color: var(--gold-dk);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 16px 0 0;
  font-family: var(--font-display);
}

.register-card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 32px 36px 28px !important;
  text-align: center;
}
.register-title {
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
  text-shadow: 2px 2px 0 var(--wood-dk);
}
.register-hint {
  font-family: var(--font-display);
  font-size: 8px;
  color: rgba(245,216,120,0.65);
  line-height: 1.9;
  letter-spacing: 0.04em;
  margin: 0 0 22px;
}
.register-label {
  display: block;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: 8px;
  text-align: left;
}
.ui-input {
  width: 100%;
  background: var(--ink);
  border: 2px solid var(--wood);
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 0 0 2px var(--wood-dk);
  padding: 12px 14px;
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--parchment);
  letter-spacing: 0.04em;
  outline: none;
  border-radius: 2px;
}
.ui-input:focus { border-color: var(--gold-dk); }
.register-btn { margin: 22px auto 0; }
.msg {
  text-align: center;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.08em;
  min-height: 16px;
  margin: 14px 0 0;
  color: var(--flame);
}
.msg.ok { color: #88f078; }

.byline {
  text-align: center;
  font-family: var(--font-display);
  font-size: 7px;
  color: #5a503e;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 28px 0 0;
}

/* ═════════ GAME SCREEN — world canvas fills viewport ═════════ */
#screen-game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #0a0a0e;
}
#world {
  position: absolute; inset: 0;
  width: 100vw; height: 100vh;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: cover;
  z-index: 1;
}
/* Viewport vignette to push focus inward */
#screen-game::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(20,8,4,0.45) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Top ticker — airdrop timer + lifetime bought (pixel font, fixed top
   center). Sized so it sits between hud-stats (left, 200px wide) and
   hud-leaderboard (right, 240px wide) at top:22px without overlap on
   desktop. On mobile it stacks above them. */
.top-ticker {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--parchment);
  text-shadow: 2px 2px 0 var(--ink), 0 0 10px rgba(0,0,0,0.8);
  background: rgba(20, 12, 8, 0.82);
  border: 2px solid var(--wood-dk);
  padding: 10px 20px;
  z-index: 11;
  pointer-events: none;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.7);
  white-space: nowrap;
}
.top-ticker .tk-label { color: var(--gold-dk); font-size: 10px; }
.top-ticker .tk-val   { color: var(--parchment); }
.top-ticker .tk-green {
  color: var(--green);
  text-shadow: 2px 2px 0 #082a08, 0 0 10px rgba(106,207,90,0.5);
}
.top-ticker .tk-red {
  color: #ff7050;
  text-shadow: 2px 2px 0 #4a1808, 0 0 10px rgba(255,112,80,0.45);
}
.top-ticker .tk-sep { color: var(--wood); opacity: 0.7; }

/* ═════════ MOB ANCHOR — sprite + HP bar stacked, anchored to arena front
   Arena ellipse in world coords (320×180): center (160,128), ry=16.
   Front-bottom of ellipse y=144 → 144/180 = 80% of viewport.
   Placing the anchor's bottom (= mob feet) there makes the mob stand
   ON the arena, not behind it.

   HP bar lives ABOVE the canvas inside this anchor, so it floats just
   over the mob's head and moves with whoever's in the arena. */
#mob-anchor {
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  pointer-events: none;
}
#mob-canvas {
  display: block;
  /* Sprite is 28×44 max. Canvas internal is 256×384 (8x of ~32×48 — fits the
     sprite with margin). On screen we scale by vh to keep proportional to
     the arena platform underneath. */
  width: clamp(140px, 22vh, 240px);
  aspect-ratio: 256 / 384;
  height: auto;
  background: transparent;
  image-rendering: pixelated;
}
/* No CSS bob — each sprite frame has its own pixel-level bob baked in.
   Hit-flash stays as a brief brightness pulse on impact. */
#mob-canvas.hit { animation: hit-flash 0.18s ease-out; }
@keyframes hit-flash {
  0%   { filter: brightness(1)   saturate(1); }
  50%  { filter: brightness(2.4) saturate(0); }
  100% { filter: brightness(1)   saturate(1); }
}

/* Damage number — spawns above mob. Pixel font, smaller because Press
   Start 2P at 28+px is huge. Crit variant: bigger + red glow. */
.ui-dmg {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  color: #ffe048;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 0 #4a1808, 0 0 12px rgba(255,176,40,0.7);
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  white-space: nowrap;
}
.ui-dmg.crit {
  color: #ff5028;
  font-size: 22px;
  text-shadow: 2px 2px 0 #4a0808, 0 0 14px rgba(255,80,40,0.85);
}
.ui-dmg.xp {
  color: var(--gold);
  font-size: 18px;
  text-shadow: 2px 2px 0 #4a3208, 0 0 14px rgba(255,216,72,0.7);
}
.ui-dmg.active {
  animation: float-up 0.9s ease-out forwards;
}
@keyframes float-up {
  0%   { transform: translate(-50%, 0)     scale(0.8); opacity: 0; }
  15%  { transform: translate(-50%, -10px) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -70px) scale(1);   opacity: 0; }
}

/* ═════════ UI KIT — HP BAR ═════════ */
/* .hud-name now lives INSIDE #mob-anchor (flex column above the canvas),
   so it inherits the mob's position and floats above the mob's head. */
.hud-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  white-space: nowrap;
}
.mob-name {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--ink), 0 0 10px rgba(0,0,0,0.8);
}
.mob-name .lvl { color: var(--gold-dk); font-size: 0.85em; }
.hp-bar {
  width: 240px;
  height: 18px;
  background: var(--ink);
  border: 2px solid #6a3e1a;
  box-shadow: 0 0 0 2px #2a1a0a, 0 4px 10px rgba(0,0,0,0.6);
  position: relative;
  /* overflow:hidden contains the overshoot easing — without this, the
     `cubic-bezier(.4, 1.6, .4, 1)` on .hp-fill briefly pushes the fill
     past 100% on the new-mob respawn, visually leaking past the frame. */
  overflow: hidden;
  image-rendering: pixelated;
}
.hp-fill {
  position: absolute; inset: 1px;
  background: linear-gradient(180deg, #e84848 0%, #b82828 55%, #781818 100%);
  width: 100%;
  transition: width 0.35s cubic-bezier(.4,1.6,.4,1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.4);
}
.hp-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #f0e8c8; font-size: 9px;
  letter-spacing: 0.04em;
  font-family: var(--font-display);
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}

/* ═════════ UI KIT — ATTACK BUTTON ═════════ */
.ui-attack {
  background:
    radial-gradient(ellipse at 32% 28%, #c46038 0%, #8a3a1a 38%, #5a2008 75%, #3a1408 100%);
  color: var(--gold);
  border: 0;
  padding: 18px 48px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  text-shadow: 2px 2px 0 #2a1408, 0 0 14px rgba(0,0,0,0.6);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -4px 0 rgba(0,0,0,0.5),
    0 6px 0 #2a1408,
    0 12px 24px rgba(0,0,0,0.75);
  border-radius: 3px;
  outline: 3px solid #1a0a04;
  user-select: none;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, filter 200ms;
  image-rendering: pixelated;
}
.ui-attack::before, .ui-attack::after {
  content: ''; position: absolute; width: 7px; height: 7px;
  background: radial-gradient(circle at 35% 30%, #6a3818 10%, #1a0a04 60%, #000 90%);
  border-radius: 50%;
  top: 8px;
}
.ui-attack::before { left: 12px; }
.ui-attack::after  { right: 12px; }
.ui-attack:hover:not(:disabled) { filter: brightness(1.08); }
.ui-attack:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -2px 0 rgba(0,0,0,0.5),
    0 1px 0 #2a1408, 0 3px 8px rgba(0,0,0,0.6);
}
.ui-attack:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.4); }

.hud-attack {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 10;
}

.ui-hint {
  color: rgba(245,216,120,0.55);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 var(--ink);
}
.ui-hint.cooling {
  color: var(--flame);
  animation: cooldown-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes cooldown-pulse {
  from { opacity: 0.6; }
  to   { opacity: 1.0; }
}
/* When disabled (cooldown), the attack button shows ⧖ Ns instead of "Attack" */
.ui-attack:disabled {
  cursor: not-allowed;
  filter: grayscale(0.4) brightness(0.7);
}

/* ═════════ UI KIT — STATS PANEL (top-left) ═════════ */
.hud-stats {
  position: fixed;
  top: 22px; left: 22px;
  z-index: 10;
}
.ui-stats {
  color: var(--gold-dk);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--ink);
  line-height: 1.6;
}
.ui-stats > div {
  display: flex; gap: 12px; align-items: baseline; margin-bottom: 4px;
}
.ui-stats .v {
  color: var(--parchment);
  font-size: 14px;
  min-width: 90px;
  text-align: right;
}
.me-wallet {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--gold-dk);
  margin-top: 10px;
  text-shadow: 1px 1px 0 var(--ink);
  text-transform: none;
}

/* ═════════ UI KIT — WOODEN FRAME ═════════ */
.ui-frame {
  background:
    linear-gradient(180deg, var(--wood) 0%, #5a3a1c 50%, #3e2814 100%);
  border: 2px solid var(--wood-dk);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.12),
    inset 0 -2px 0 rgba(0,0,0,0.5),
    0 4px 10px rgba(0,0,0,0.6);
  padding: 16px 20px;
  border-radius: 2px;
  position: relative;
  color: var(--gold);
  font-family: var(--font-display);
}
.ui-frame::before, .ui-frame::after {
  content: ''; position: absolute; width: 8px; height: 8px;
  background: radial-gradient(circle at 35% 30%, #6a3818 10%, #1a0a04 60%, #000 90%);
  border-radius: 50%;
}
.ui-frame::before { top: 6px; left: 6px; }
.ui-frame::after  { top: 6px; right: 6px; }
.frame-title {
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
  padding-left: 14px;
  text-shadow: 1px 1px 0 var(--ink);
}

.hud-leaderboard {
  position: fixed;
  top: 22px; right: 22px;
  width: 240px;
  max-height: 42vh;
  overflow-y: auto;
  z-index: 10;
}
.hud-pool {
  position: fixed;
  bottom: 22px; right: 22px;
  width: 240px;
  z-index: 10;
}

.leaderboard, .pool-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-display);
}
.leaderboard li, .pool-stats li {
  padding: 6px 0;
  font-size: 10px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(245,216,120,0.12);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.leaderboard li:last-child, .pool-stats li:last-child { border-bottom: 0; }
.leaderboard li .rank { color: var(--gold-dk); margin-right: 8px; font-weight: 700; }
.pool-stats li {
  text-transform: uppercase;
}
.pool-stats li .v {
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.leaderboard li .addr {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--parchment);
  letter-spacing: 0.02em;
}
.leaderboard li .xp {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 10px;
}
.leaderboard li .lb-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.leaderboard li .share {
  color: var(--green);
  font-family: var(--font-display);
  font-size: 8px;
  text-shadow: 1px 1px 0 #082a08;
}

/* ═════════ MOBILE (portrait phone) ═════════
   Total redesign for narrow viewports. Layout from top to bottom:
     top:   ticker bar (full width, slim)
     below: compact stats row (XP / PVE / Share — no wallet text)
     mid:   mob + HP bar + name (centered, takes most of the screen)
     bottom: ATTACK button (big, thumb-friendly)
     btm-corners: leaderboard + pool panels (small, fixed)
     btm-left:  mute + logout buttons
   Oath parchment is hidden on phones — no screen real estate. */
@media (max-width: 900px) {
  /* ── TOP TICKER — full width slim bar ── */
  .top-ticker {
    top: 6px; left: 6px; right: 6px;
    transform: none;
    justify-content: center;
    font-size: 8px;
    padding: 6px 8px;
    gap: 6px;
  }
  .top-ticker .tk-label { font-size: 7px; }

  /* ── STATS ROW — under ticker, full width, horizontal flex ── */
  .hud-stats {
    top: 38px;
    left: 6px; right: 6px;
    background: rgba(20, 12, 8, 0.78);
    border: 2px solid var(--wood-dk);
    padding: 6px 10px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.6);
  }
  .ui-stats {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-around;
    font-size: 8px;
    line-height: 1;
  }
  .ui-stats > div {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin: 0;
  }
  .ui-stats .v { font-size: 10px; min-width: 0; }
  .me-wallet { display: none; }   /* hide wallet line — saves a row */

  /* ── MOB + HP ── */
  .hp-bar { width: 180px; height: 14px; }
  .mob-name { font-size: 10px; letter-spacing: 0.14em; }
  #mob-canvas { width: clamp(140px, 30vh, 220px); }
  #mob-anchor { top: 65%; }    /* keep feet on arena platform */

  /* ── ATTACK ── */
  .hud-attack { bottom: 88px; }
  .ui-attack {
    padding: 14px 36px;
    font-size: 13px;
    letter-spacing: 0.22em;
  }
  .ui-hint { font-size: 7px; }

  /* ── SIDE PANELS — corner-pinned, smaller ── */
  .hud-leaderboard {
    top: auto;
    bottom: 152px;
    right: 6px;
    left: auto;
    width: 150px;
    max-height: 28vh;
    padding: 6px 8px !important;
  }
  .hud-pool {
    bottom: 6px;
    right: 6px;
    left: auto;
    width: 150px;
    padding: 6px 8px !important;
  }
  .ui-frame::before, .ui-frame::after { width: 5px; height: 5px; top: 4px; }
  .ui-frame::before { left: 4px; }
  .ui-frame::after  { right: 4px; }
  .frame-title { font-size: 8px; letter-spacing: 0.14em; margin-bottom: 6px; padding-left: 8px; }
  .leaderboard li, .pool-stats li { font-size: 7px; padding: 3px 0; gap: 4px; }
  .leaderboard li .addr, .leaderboard li .xp,
  .leaderboard li .share, .pool-stats li .v { font-size: 7px; }
  .leaderboard li .rank { margin-right: 4px; }

  /* ── HUD buttons — bottom-left, smaller. Logout first (corner), mute next. ── */
  .hud-btn { width: 36px; height: 36px; font-size: 14px; bottom: 6px; }
  .logout-btn { left: 6px; }
  .mute-btn   { left: 46px; }

  /* ── Oath parchment — hidden on phone, no room ── */
  .hud-oath { display: none; }

  /* ── Damage popups smaller ── */
  .ui-dmg { font-size: 14px; }
  .ui-dmg.crit { font-size: 18px; }
  .ui-dmg.xp { font-size: 16px; }
}

/* Hide top mobs on phones to keep the card readable; bottom corners shrink */
@media (max-width: 900px) {
  .reg-mob-alon, .reg-mob-pill { display: none; }
  .reg-mob-wif  { left: 2%; bottom: 4%; width: 100px; }
  .reg-mob-bonk { right: 2%; bottom: 4%; width: 100px; }
}

/* ═════════ Very small phones (<420px wide) ═════════ */
@media (max-width: 420px) {
  .top-ticker { font-size: 7px; gap: 4px; padding: 5px 6px; }
  .top-ticker .tk-label { font-size: 6px; }
  .ui-stats { font-size: 7px; gap: 8px; }
  .ui-stats .v { font-size: 9px; }
  .hud-leaderboard, .hud-pool { width: 130px; }
  .leaderboard li, .pool-stats li { font-size: 6px; }
  #mob-canvas { width: clamp(120px, 26vh, 180px); }
  .ui-attack { padding: 12px 28px; font-size: 12px; }
}

/* ═════════ HOLDER'S OATH — parchment on the left wall ═════════ */
.hud-oath {
  position: fixed;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
  width: clamp(220px, 22vw, 340px);
  height: auto;
  z-index: 9;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}

/* ═════════ HUD BUTTONS — Mute + Logout ═════════ */
.hud-btn {
  position: fixed;
  bottom: 22px;
  width: 44px; height: 44px;
  background: linear-gradient(180deg, var(--wood) 0%, #5a3a1c 50%, #3e2814 100%);
  border: 2px solid var(--wood-dk);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.12),
    inset 0 -2px 0 rgba(0,0,0,0.5),
    0 4px 10px rgba(0,0,0,0.6);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  border-radius: 2px;
  text-shadow: 1px 1px 0 var(--ink);
  transition: filter 120ms;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hud-btn:hover { filter: brightness(1.1); }
.logout-btn { left: 22px; }                  /* corner spot — red, obvious */
.mute-btn   { left: 76px; }                  /* 22 + 44 + 10 gap */
.mute-btn.muted { color: rgba(245,216,120,0.35); }

/* Logout — flame/blood gradient so it reads as a destructive action. */
.logout-btn {
  background: linear-gradient(180deg, #b82828 0%, #8a1818 50%, #5a0c0c 100%);
  border-color: #4a0808;
  color: var(--parchment);
  text-shadow: 1px 1px 0 #2a0808;
}

/* ═════════ MISC ═════════ */
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }