/* =============================================================================
   Yugara UI theme — modern dark + gold (Cambria grammar).
   Phase 1 of the UI/UX revamp (see plans/ui-revamp.md).

   This file owns the design TOKENS + the in-game HUD overlay (#hud), which is a
   viewport-fixed layer that sits OUTSIDE the CSS-transform-scaled #container, so
   its text stays crisp at any window size (the canvas+legacy-HUD composite is
   scaled as one unit by app.scaleContainer(); riding that transform would blur
   sans text). Canvas-attached UI (overhead entity bars) stays in renderer.js.

   Loaded AFTER main.css + yugara.css, so these rules win.
   ========================================================================== */

:root {
  /* surfaces / accent — ONE gold accent (pixel frames carry most of the chrome now) */
  /* Souls-muted bronze (2026-07-04): desaturated from the original brights
     (#E8B23A/#F6CF6B) for a darker, somber read */
  --stroke:rgba(207,163,72,.22);
  --gold:#cfa348; --gold-2:#e3c77f; --gold-dim:rgba(207,163,72,.5);
  /* body font: m5x7 by Daniel Linssen (CC0, the indie-RPG dialog standard) —
     crisp ONLY at 16/32/48px. GraphicPixel stays as the display font
     (names/headers/numbers) at its own crisp sizes. */
  --body-font:'m5x7','GraphicPixel',monospace;
  /* text */
  --text-0:#ECEEF2; --text-1:#9AA0AD; --text-2:#5B616E;
  /* semantic resources */
  --hp:#E5484D;   --hp-d:#7E2528;
  --mana:#4C8DF6; --mana-d:#274d80;
  --stam:#E8B23A; --stam-d:#7d5e1d;
  --xp:#8B6CFF;   --xp-d:#3a2d6b;
  --ok:#46B872;
  /* (rarity --r1..--r6 / status --warn,--bad are added in Phase 3 when the
     inventory reskin consumes them — see plans/ui-revamp.md §8 for the hexes) */
  --pixel-font:'Alagard','GraphicPixel',monospace;
}
@font-face {
  font-family:'m5x7';
  src:url('../fonts/m5x7.ttf') format('truetype');
  font-weight:normal; font-style:normal;
}

/* ----------------------------------------------------------------------------
   Overlay shell — fixed to the viewport, click-through except on interactive
   children. Only visible in-game (body.game).
   -------------------------------------------------------------------------- */
#hud { display:none; }
body.game #hud {
  display:block; position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:900;
  pointer-events:none; font-family:var(--pixel-font); color:var(--text-0);
}   /* z-index ABOVE #container (z-index:100, the scaled canvas) but BELOW the
       inventory modal (#inventorybox z-index:1100). left/top/width/height are
       overwritten by hud.js _syncRect() to track the game (canvas) rect.
       PIXEL-ART look: GraphicPixel font + pixel frame art, no smooth CSS. */
#hud img, #hud .hud-slot, #hud .ui-panel, body.game #inspector,
body.game #hud #barbuttons, body.game #hud #playercount { image-rendering:pixelated; }
#hud * { box-sizing:border-box; }
/* UI SCALE: the HUD is authored at fixed px (a ~800px-tall reference) and scaled
   up on bigger screens so it stays proportional/prominent instead of shrinking
   into a corner. hud.js _syncRect() sets --ui-scale from the game height; each
   corner scales from its OWN anchor point so it stays pinned to that corner. */
/* one consistent 16px inset on every corner cluster (research: uniform safe margin) */
#hud .hud-anchor { position:absolute; display:flex; pointer-events:none; }
#hud .hud-tl { top:16px; left:16px; flex-direction:column; gap:10px; align-items:flex-start;
  transform-origin:top left; transform:scale(var(--ui-scale,1)); }
#hud .hud-tr { top:16px; right:16px; flex-direction:column; gap:10px; align-items:flex-end;
  transform-origin:top right; transform:scale(var(--ui-scale,1)); }
/* centered anchors run full-width + flex-centered; their child widgets scale from
   their own centre (a percentage-translate + scale on the anchor mis-centres). */
#hud .hud-tc { top:16px; left:0; right:0; flex-direction:column; align-items:center; }
#hud .hud-bc { bottom:16px; left:0; right:0; gap:10px; flex-direction:column-reverse; justify-content:flex-end; align-items:center; }
#hud .hud-tc > * { transform-origin:top center; transform:scale(var(--ui-scale,1)); }
#hud .hud-bc > * { transform-origin:bottom center; transform:scale(var(--ui-scale,1)); }
/* interactive children opt back in to pointer events */
#hud .hud-interactive, #hud .hud-interactive * { pointer-events:auto; }
/* while the inventory/character menu is open the bottom cluster (hotbar, prompt,
   dialogue) would draw OVER the modal — hide it until the menu closes. The top-left
   player frame goes too (the tall forge panel reaches under it — Souls-style menus
   clear the HUD anyway). */
#hud.menu-open .hud-bc { display:none; }
#hud.menu-open .hud-tl { display:none; }

/* shared panel primitive — generated ornate frame (gpt-image-2 UI kit 2026-07-04:
   img/ui/panel3.png 192px ornate kit v3, corner filigree in the outer 40px slice) */
.ui-panel {
  background:none; border:15px solid transparent;
  border-image:url(../img/ui/panel3.png) 40 fill / 20px / 0 stretch;
  border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.ui-panel::after { content:none; }

/* generic stat bar — hard pixel edges, no rounding */
.ui-bar { position:relative; height:10px; border-radius:0; background:#0c0d10;
  box-shadow:inset 0 0 0 1px #000; overflow:hidden; image-rendering:pixelated; }
.ui-bar > i { position:relative; display:block; height:100%; width:0; border-radius:0;
  transition:width .18s linear; background:linear-gradient(180deg,var(--c),var(--c2)); }
/* damage "ghost": holds the lost chunk, then drains toward the real value
   (driven per-frame by hud.js — no CSS transition). Sits UNDER the fill. */
.ui-bar > .ghost { position:absolute; left:0; top:0; bottom:0; width:0;
  background:#f2e0b8; }
.ui-bar.hp   { --c:var(--hp);   --c2:var(--hp-d); }
.ui-bar.mana { --c:var(--mana); --c2:var(--mana-d); }
.ui-bar.stam { --c:var(--stam); --c2:var(--stam-d); }
.ui-bar.xp   { --c:var(--xp);   --c2:var(--xp-d); height:5px; }
.ui-bar.flash i { animation:hudDmgFlash .42s ease-out 1; }   /* slim bars nest the fill in .trough */
@keyframes hudDmgFlash { 0%{filter:brightness(3.2) saturate(.4);} 100%{filter:none;} }

/* ----------------------------------------------------------------------------
   1a. Player frame (top-left) — de-boxed 2026-07-08: round portrait medallion +
   slim tapered bars, no ui-panel plate (reference: classic MMO portrait strip).
   -------------------------------------------------------------------------- */
.hud-frame { position:relative; display:flex; gap:10px; align-items:center; }
/* round medallion: live paper-doll head (hud.js _renderPortrait draws the canvas) */
.hud-medal { position:relative; flex:0 0 62px; width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 38% 30%, #23262e, #0b0c10 78%);
  box-shadow:0 0 0 2px #0a0a0c, 0 0 0 4px #8a6a2f, 0 0 0 5px #0a0a0c, 0 2px 6px rgba(0,0,0,.6); }
.hud-medal canvas { position:absolute; left:3px; top:3px; width:56px; height:56px;
  border-radius:50%; image-rendering:pixelated; }
.hud-frame .hud-fbody { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
/* GraphicPixel is crisp at 9/10/11/16/17/18/20+px, fuzzy at 12-15px (probe) —
   every HUD size below sits on a crisp value */
.hud-name { font:600 11px/1.2 var(--pixel-font); color:var(--text-0); letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px #000; }
.hud-name .title { font:400 9px/1.2 var(--pixel-font); color:var(--gold-2); margin-left:6px; }
.hud-vital { display:flex; align-items:center; }
/* slim tapered vitals: light rim, dark trough, angled right end (clip-path taper).
   HP reads as the primary bar (longer + taller); stamina/mana sit under it. */
.ui-bar.slim { position:relative; height:14px; background:#9aa0ad; box-shadow:none; overflow:hidden;
  clip-path:polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.v-hp   .ui-bar.slim { width:190px; }
.v-stam .ui-bar.slim, .v-mana .ui-bar.slim { width:150px; height:11px; }
.ui-bar.slim .trough { position:absolute; left:1px; top:1px; right:1px; bottom:1px; overflow:hidden;
  background:#0c0d10; clip-path:polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.ui-bar.slim .trough > i { position:relative; display:block; height:100%; width:0; border-radius:0;
  transition:width .18s linear; background:linear-gradient(180deg,var(--c),var(--c2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.3); }
.ui-bar.slim .trough > .ghost { position:absolute; left:0; top:0; bottom:0; width:0; background:#f2e0b8; }
.hud-vital .onbar { position:absolute; inset:0; z-index:3; display:flex; align-items:center;
  justify-content:flex-end; padding-right:14px; font:700 9px/1 var(--pixel-font); color:#fff;
  letter-spacing:.3px; text-shadow:0 1px 1px #000, 0 0 3px rgba(0,0,0,.85);
  font-variant-numeric:tabular-nums; }
.hud-xpwrap { width:190px; margin-top:1px; }
.hud-xpwrap .ui-bar.xp { height:3px; box-shadow:inset 0 0 0 1px #000; }
.hud-xpwrap .xprow { display:flex; justify-content:space-between; margin-top:2px;
  font:400 9px/1 var(--pixel-font); color:var(--text-1); letter-spacing:.4px; text-transform:uppercase; }

/* ----------------------------------------------------------------------------
   1b-2. Party frames (client/js/socialui.js, plans/social-friends-party.md) —
   under the player frame in #hud-tl: one row per OTHER party member (name,
   level, live HP bar). Click a row = profile card; the leader gets a kick x.
   -------------------------------------------------------------------------- */
#partyframes { display:none; flex-direction:column; gap:4px; min-width:170px; }
#partyframes.active { display:flex; }
#pf-title { font:400 10px/1 var(--pixel-font); color:var(--text-1); letter-spacing:1px;
  text-transform:uppercase; text-shadow:0 1px 0 #000; }
.pf-row { cursor:pointer; padding:3px 6px 5px; background:rgba(8,7,10,.55);
  box-shadow:inset 0 0 0 1px rgba(232,178,58,.18); }
.pf-row:hover { box-shadow:inset 0 0 0 1px rgba(232,178,58,.5); }
.pf-name { display:flex; align-items:center; gap:5px; margin-bottom:3px;
  font:400 12px/1.2 var(--pixel-font); color:var(--text-0); text-shadow:0 1px 0 #000; }
.pf-name em { font-style:normal; font-size:10px; color:var(--text-1); }
.pf-name .pf-lead { color:#f2c94c; font-size:9px; }              /* leader marker */
.pf-name .pf-kick { display:none; margin-left:auto; font-style:normal; color:#7a6248;
  font-size:13px; line-height:1; padding:0 3px; }
.pf-row:hover .pf-kick { display:block; }
.pf-name .pf-kick:hover { color:#ff7a66; }
.ui-bar.pf-hp { height:7px; }
.pf-row.dead .pf-name { color:#8a6a6a; }
.pf-row.dead .ui-bar.pf-hp { opacity:.45; }
#pf-leave { cursor:pointer; align-self:flex-start; font:400 10px/1 var(--pixel-font);
  color:var(--text-1); letter-spacing:.5px; padding:2px 1px; text-transform:uppercase; }
#pf-leave:hover { color:#ff7a66; }

/* low-HP screen vignette — covers the game rect (#hud is pinned to it) */
#hud .hud-vignette {
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(190,20,24,.0) 60%, rgba(190,20,24,.55) 100%);
}

/* ----------------------------------------------------------------------------
   1c. Target frame — reskin of the relocated legacy #inspector
   -------------------------------------------------------------------------- */
body.game #inspector {
  position:static !important; display:none; width:240px; padding:5px 12px 11px;
  margin:0; background:none; border:14px solid transparent;
  border-image:url(../img/ui/panel3.png) 40 fill / 14px / 0 stretch;
  border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  color:var(--text-0); font-family:var(--pixel-font); image-rendering:pixelated;
}
body.game #inspector .headshot { display:none; }
body.game #inspector .details { display:block; }
body.game #inspector .name { font:11px/1.3 var(--pixel-font); color:var(--text-0);
  text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.game #inspector .level { font:9px/1.3 var(--pixel-font); color:var(--gold-2); margin:2px 0 5px; }
body.game #inspector .health {
  position:relative; height:9px; width:0; min-width:0; border-radius:0;
  background:linear-gradient(180deg,var(--hp),var(--hp-d));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5); transition:width .12s linear;
}
body.game #inspector::before { /* HP track behind the fill */
  content:""; position:absolute; left:12px; right:12px; bottom:11px; height:9px;
  border-radius:0; background:#0c0d10; box-shadow:inset 0 0 0 1px #000;
}

/* ----------------------------------------------------------------------------
   1d. Action / ability hotbar (bottom-center)
   -------------------------------------------------------------------------- */
.hud-hotbar { display:flex; gap:9px; pointer-events:none; }
.hud-slot {
  position:relative; width:64px; height:64px; border-radius:0;
  background:url(../img/ui/pack/slot-normal.png) center/100% 100% no-repeat; image-rendering:pixelated;
  overflow:hidden; filter:drop-shadow(0 3px 0 rgba(0,0,0,.5));   /* pack well at integer 2x */
}
.hud-slot .ic { position:absolute; inset:0; margin:auto; width:32px; height:32px; object-fit:contain;
  image-rendering:pixelated; filter:drop-shadow(0 2px 0 rgba(0,0,0,.7)); }
.hud-slot .key { position:absolute; top:3px; left:5px; font:9px/1 var(--pixel-font); color:var(--gold-2);
  text-shadow:0 1px 0 #000; }
.hud-slot .nm { position:absolute; bottom:3px; left:0; right:0; text-align:center;
  font:9px/1.1 var(--pixel-font); color:var(--text-0); text-transform:uppercase; letter-spacing:.3px;
  text-shadow:0 1px 0 #000, 1px 0 0 #000; white-space:nowrap; overflow:hidden; }
.hud-slot .cd { position:absolute; inset:3px; background:conic-gradient(rgba(4,5,7,.74) var(--cd,0%), transparent 0);
  pointer-events:none; }
.hud-slot.notready { filter:saturate(.5) brightness(.7) drop-shadow(0 3px 0 rgba(0,0,0,.5)); }

/* interaction prompt — "[E] Talk to X", shown above the hotbar when in range */
#hud-interact {
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 6px;
  background:#14161c; border:2px solid var(--gold-dim); border-radius:0;
  font:11px/1 var(--pixel-font); color:var(--gold-2); white-space:nowrap;
  image-rendering:pixelated; text-shadow:0 1px 0 #000;
  box-shadow:0 2px 0 rgba(0,0,0,.5); pointer-events:none;
}
#hud-interact .ekey {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 3px;
  background:var(--gold); color:#1a1206; border-radius:0;
  font:11px/1 var(--pixel-font); box-shadow:inset 0 0 0 1px #000;
}

/* ----------------------------------------------------------------------------
   1g. NPC dialogue box (bottom-center) — built by client/js/dialogue.js.
   Framed conversation panel above the hotbar: portrait well + nameplate +
   typewriter text + blinking pixel continue-arrow. Clickable (advances).
   -------------------------------------------------------------------------- */
.hud-dialogue { position:relative; width:560px; max-width:86vw;
  display:flex; gap:12px; padding:11px 15px 13px; cursor:pointer; user-select:none; }
.hud-dialogue .dportrait { flex:0 0 auto; width:64px; height:64px; align-self:center;
  background:url(../img/ui/pack/slot-normal.png) center/100% 100% no-repeat; image-rendering:pixelated;
  display:flex; align-items:center; justify-content:center; }
.hud-dialogue .dportrait canvas { width:50px; height:50px; image-rendering:pixelated;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.hud-dialogue .dbody { flex:1; min-width:0; }
/* GraphicPixel rasterizes CRISP at 10/16/18/20/24px and fuzzy at 12-14px
   (verified by screenshot probe) — dialogue text must stay on a crisp size */
.hud-dialogue .dname { font:700 10px/1 var(--pixel-font); color:var(--gold-2);
  letter-spacing:1px; text-transform:uppercase; margin:2px 0 8px; text-shadow:0 1px 0 #000; }
.hud-dialogue .dtext { margin:0; min-height:48px; /* ~2 lines reserved: box never jumps */
  font:16px/1.5 var(--body-font); color:var(--text-0); text-shadow:0 1px 0 #000; }
.hud-dialogue .dtext .rest { visibility:hidden; } /* full text keeps layout -> no re-wrap mid-reveal */
/* continue arrow: a 5-3-1 pixel triangle built from box-shadow "pixels" (no
   smooth CSS shapes), blinking like the classic RPG page indicator */
.hud-dialogue .dnext { position:absolute; right:15px; bottom:11px; width:2px; height:2px;
  background:none; animation:dnextBlink .9s linear infinite;
  box-shadow:
    -4px 0 var(--gold-2), -2px 0 var(--gold-2), 0 0 var(--gold-2), 2px 0 var(--gold-2), 4px 0 var(--gold-2),
    -2px 2px var(--gold-2), 0 2px var(--gold-2), 2px 2px var(--gold-2),
    0 4px var(--gold-2); }
@keyframes dnextBlink { 0%, 54% { opacity:1; } 55%, 100% { opacity:0; } }

/* speech bubbles (player chat — NPC talk now uses the dialogue box above):
   square pixel frame instead of the legacy smooth rounded rect; the anti-aliased
   .thingy tail is dropped (bubbles float over the speaker's head — attribution
   is positional). Overrides main.css .bubble (this file loads after it). */
.bubble { background:#14161c; border:2px solid var(--gold-dim); border-radius:0;
  padding:3px 10px; color:var(--text-0); font-family:var(--pixel-font);
  box-shadow:0 2px 0 rgba(0,0,0,.5); image-rendering:pixelated;
  max-width:340px; }   /* long system messages (e.g. the /gear reply) must WRAP,
                          not stretch one line across the whole screen */
.bubble p { white-space:normal; word-wrap:break-word; }
.bubble .thingy { display:none; }

/* ----------------------------------------------------------------------------
   1e. Minimap (top-right)
   -------------------------------------------------------------------------- */
.hud-minimap { position:relative; width:158px; height:158px; padding:0; border-radius:0;
  border:14px solid transparent; border-image:url(../img/ui/panel3.png) 40 fill / 14px / 0 stretch;
  overflow:hidden; pointer-events:none; image-rendering:pixelated; }
.hud-minimap canvas { display:block; width:100%; height:100%; image-rendering:pixelated; border-radius:0; }
.hud-minimap .nlabel { position:absolute; top:1px; left:50%; transform:translateX(-50%); z-index:2;
  font:9px/1 var(--pixel-font); color:var(--gold-2); letter-spacing:1px; text-shadow:0 1px 0 #000, 0 0 3px #000; }

/* ----------------------------------------------------------------------------
   1f. Bar buttons + player-count chip (relocated, restyled)
   -------------------------------------------------------------------------- */
/* bar buttons — relocated #barbuttons */
body.game #hud #barbuttons {
  position:static !important; display:flex; gap:5px; padding:4px 5px; pointer-events:auto;
  background:#14161c; border:2px solid var(--gold-dim); border-radius:0;
  box-shadow:0 2px 0 #000, inset 0 0 0 1px #000; backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.game #hud #barbuttons .barbutton {
  position:static !important; float:none !important; margin:0 !important; width:26px; height:26px;
  border-radius:0; background:#23262e center/18px no-repeat;
  border:1px solid #000; cursor:pointer; opacity:.85; image-rendering:pixelated;
  transition:opacity .1s, background-color .1s; filter:none;
}
body.game #hud #barbuttons .barbutton:hover { opacity:1; }
body.game #hud #barbuttons .barbutton.active { opacity:1; background-color:rgba(232,178,58,.2);
  box-shadow:inset 0 0 0 1px var(--gold); }

/* player-count chip — relocated #playercount */
body.game #hud #playercount {
  position:static !important; display:flex !important; align-items:center; gap:5px;
  padding:5px 9px; background:#14161c; border:2px solid var(--gold-dim); border-radius:0;
  box-shadow:0 2px 0 #000, inset 0 0 0 1px #000; backdrop-filter:none; -webkit-backdrop-filter:none; cursor:pointer;
  font:11px/1 var(--pixel-font); color:var(--text-0); pointer-events:auto;
}
body.game #hud #playercount::before { content:"\25C9"; color:var(--ok); font-size:9px; }
body.game #hud #playercount .count { color:var(--gold-2); }

/* ----------------------------------------------------------------------------
   Hide legacy bottom-left bar graphics + vertical XP (replaced by the HUD).
   We keep #notifications working in place (#bar-container stays, just goes
   transparent + click-through). Buttons/playercount/inspector are moved
   into #hud by hud.js, so they survive.
   -------------------------------------------------------------------------- */
/* Collapse the dead bottom bar strip so the canvas fills the composite (no black
   gap under the game). All its content is hidden/relocated; only #notifications
   is moved into #hud (below). */
body.game #bar-container { background:none !important; border:none !important; box-shadow:none !important;
  pointer-events:none; height:0 !important; min-height:0 !important; }
body.game #healthbar, body.game #hitpoints, body.game #staminabar, body.game #stamina,
body.game #manabar, body.game #mana, body.game #weapon, body.game #armor,
body.game #expbar { display:none !important; }
/* notifications: relocated into #hud-tc — re-flow as a centered toast under the target frame */
body.game #hud #notifications { position:static !important; left:auto !important; margin:0 !important;
  width:auto !important; top:auto !important; height:auto !important; pointer-events:none; margin-top:6px !important; }
body.game #hud #notifications div { position:static !important; width:auto !important; }
body.game #hud #notifications span { font-family:var(--pixel-font); font-size:16px; color:var(--gold-2);
  text-shadow:0 1px 3px #000; white-space:nowrap; }

/* ----------------------------------------------------------------------------
   Boss bar — Souls/Elden Ring style: BOTTOM-CENTER, long and THIN, small
   letter-spaced name above, muted red fill. Shown while a boss-kind mob is near.
   -------------------------------------------------------------------------- */
.hud-bossbar { width:560px; max-width:80vw; pointer-events:none; margin-top:6px; }
.hud-bossbar .bname { text-align:center; margin-bottom:4px;
  font:400 11px/1 var(--pixel-font); color:#d8cdb4; letter-spacing:3px; text-transform:uppercase;
  text-shadow:0 1px 2px #000, 0 0 8px rgba(0,0,0,.8); }
.hud-bossbar .ui-bar.bosshp { height:9px; background:#0d0508;
  box-shadow:inset 0 0 0 1px #000, 0 0 0 1px rgba(207,163,72,.35), 0 2px 8px rgba(0,0,0,.6); }
.hud-bossbar .ui-bar.bosshp > i { --c:#a8202f; --c2:#4a0c16;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }

/* ----------------------------------------------------------------------------
   How-to-Play intro modal — modern UI (reuses .ui-panel frame + tokens).
   Shown once on first entry (app.js, localStorage 'yugaraSeenHowto'); the ?
   help button reopens it.
   -------------------------------------------------------------------------- */
/* .htp-* is shared by #howtoplay, the teaching popups (#tutdodge) AND the chest loot card
   (#chestloot) — same card language. */
#howtoplay, #tutdodge, #tutfight, #chestloot { display:none; position:fixed; inset:0; z-index:1500;
  align-items:center; justify-content:center; background:rgba(6,7,11,.62);
  font-family:var(--pixel-font); color:var(--text-0); }
#howtoplay.active, #tutdodge.active, #tutfight.active, #chestloot.active { display:flex; }
#howtoplay .htp-card, #tutdodge .htp-card, #tutfight .htp-card, #chestloot .htp-card { width:760px; max-width:92vw; padding:22px 30px 18px; image-rendering:pixelated; }
#howtoplay .htp-title, #tutdodge .htp-title, #tutfight .htp-title, #chestloot .htp-title { text-align:center; color:var(--gold-2); font-size:20px; letter-spacing:1px;
  margin:2px 0 22px; text-shadow:0 2px 0 #000; }
#howtoplay .htp-cols { display:flex; gap:30px; }
#howtoplay .htp-col { flex:1; display:flex; flex-direction:column; gap:16px; min-width:0; }
#howtoplay .htp-row, #tutdodge .htp-row, #tutfight .htp-row { display:flex; align-items:center; gap:12px; }
#howtoplay .htp-keys, #tutdodge .htp-keys, #tutfight .htp-keys { flex:0 0 112px; width:112px; display:flex; gap:4px; flex-wrap:wrap; }
#howtoplay .htp-key, #tutdodge .htp-key, #tutfight .htp-key { min-width:22px; height:24px; padding:0 6px; display:inline-flex;
  align-items:center; justify-content:center; background:#23262e; color:var(--text-0);
  font-size:11px; line-height:1; border:1px solid #000;
  box-shadow:inset 0 0 0 1px var(--gold-dim), 0 2px 0 #000; }
#howtoplay .htp-key.wide, #tutdodge .htp-key.wide, #tutfight .htp-key.wide { font-size:10px; }
#howtoplay .htp-lbl, #tutdodge .htp-lbl, #tutfight .htp-lbl { font-size:13px; color:var(--text-0); line-height:1.35; }
#howtoplay .htp-foot, #tutdodge .htp-foot, #tutfight .htp-foot, #chestloot .htp-foot { display:flex; align-items:center; justify-content:space-between;
  margin-top:24px; gap:14px; }
#howtoplay .htp-hint, #tutdodge .htp-hint, #tutfight .htp-hint { font-size:10px; color:var(--text-1); }
#howtoplay .htp-btn, #tutdodge .htp-btn, #tutfight .htp-btn, #chestloot .htp-btn { cursor:pointer; padding:9px 28px; font-size:14px; color:#0b1f12;
  background:linear-gradient(180deg,#5fd389,var(--ok)); border:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 #000; user-select:none; }
#howtoplay .htp-btn:hover, #tutdodge .htp-btn:hover, #tutfight .htp-btn:hover, #chestloot .htp-btn:hover { filter:brightness(1.08); }
#howtoplay .htp-btn:active, #tutdodge .htp-btn:active, #tutfight .htp-btn:active, #chestloot .htp-btn:active { transform:translateY(1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 #000; }
/* Starter-guide objective banner (top-center, under the boss bar): the current
   onboarding step. Same pixel plate language as #hud-interact. */
.hud-guide {
  display:inline-flex; align-items:center; gap:9px; padding:6px 14px;
  margin-top:8px; background:#14161c; border:2px solid var(--gold-dim);
  font:12px/1.3 var(--pixel-font); color:var(--gold-2); white-space:nowrap;
  image-rendering:pixelated; text-shadow:0 1px 0 #000;
  box-shadow:0 2px 0 rgba(0,0,0,.5); pointer-events:none;
}
.hud-guide .gdiamond { color:var(--gold); font-size:10px; }

/* Chest loot card specifics (base card/button rules come from the shared .htp-*
   selectors above): narrower single-item reveal, centered Take button. */
#chestloot .htp-card { width:340px; }
#chestloot .htp-title { font-size:18px; margin-bottom:16px; }
#chestloot .cl-body { display:flex; flex-direction:column; align-items:center; gap:10px; }
#chestloot #cl-icon { width:48px; height:48px; image-rendering:pixelated;
  background:#0c0e14; border:1px solid #000; box-shadow:inset 0 0 0 1px var(--gold-dim); padding:6px; }
#chestloot #cl-name { font-size:14px; color:var(--gold-2); text-shadow:0 1px 0 #000; }
#chestloot #cl-hint { font-size:11px; color:var(--text-1); text-align:center; line-height:1.4; }
#chestloot .htp-foot { justify-content:center; margin-top:18px; }
/* pick-one weapon options: a row of icon tiles (populated by app.showChestLoot) */
#chestloot #cl-opts { display:none; gap:10px; justify-content:center; }
#chestloot #cl-opts .cl-opt { display:flex; flex-direction:column; align-items:center; gap:5px;
  width:86px; padding:8px 4px 7px; cursor:pointer; background:#14161c;
  border:2px solid var(--gold-dim); box-shadow:0 2px 0 rgba(0,0,0,.5); user-select:none; }
#chestloot #cl-opts .cl-opt img { width:44px; height:44px; image-rendering:pixelated; }
#chestloot #cl-opts .cl-opt span { font-size:10px; color:var(--text-0); text-align:center; line-height:1.2; }
#chestloot #cl-opts .cl-opt:hover { border-color:var(--gold); filter:brightness(1.12); }
#chestloot #cl-opts .cl-opt:active { transform:translateY(1px); }
#chestloot #cl-opts.picking .cl-opt { pointer-events:none; opacity:.55; }   /* choice sent, awaiting the server */

/* Combat lesson specifics: narrower card than #howtoplay (single column of rows). */
#tutfight .htp-card { width:470px; }
#tutfight .tut-row { margin-bottom:12px; }

/* Dodge lesson specifics: narrower card, crisp pixel canvas demo strip. */
#tutdodge .htp-card { width:440px; }
#tutdodge #tut-canvas { display:block; position:relative; width:100%; height:auto;   /* main.css sets bare canvas { position:absolute } for the game layers — undo it here */
  image-rendering:pixelated; border:1px solid #000;
  box-shadow:inset 0 0 0 1px var(--gold-dim); background:#0c0e14;
  margin:0 0 16px; }
#tutdodge .tut-row { margin-bottom:4px; }

/* =============================================================================
   Player-count popup (#population)

   Inherited straight from BrowserQuest: each row was a scaled-up slice of
   img/1/barsheet.png, which rendered as a huge grey slab across the middle of
   the screen. It did not belong to the dark/gold pixel language the rest of the
   HUD now uses. Kill the sprite background and rebuild the rows as compact
   panels using the same tokens as every other panel.
   ========================================================================== */
#population { pointer-events:none; }

#population div {
  background:none !important;              /* drop barsheet.png */
  background-color:rgba(12,14,20,.94);
  background-size:auto !important;
  background-position:0 0 !important;
  border:1px solid #000;
  box-shadow:inset 0 0 0 1px var(--gold-dim);
  padding:5px 14px !important;
  margin:0 0 4px;
  width:auto; height:auto;
  font-family:var(--pixel-font);
  font-size:15px; line-height:1.5;
  color:var(--text-0);
  white-space:nowrap;
  image-rendering:pixelated;
}

/* the count itself carries the accent, the label stays quiet */
#population span:nth-child(1) { color:var(--gold); }
#guild-name { color:var(--gold-2); }

/* the media queries in main.css re-scale the old sprite; neutralise them */
@media all and (max-width:1000px), all and (max-height:800px) {
  #instance-population, #guild-population, #world-population {
    background-size:auto !important; background-position:0 0 !important;
    padding:5px 14px !important;
  }
}

/* =============================================================================
   Last Man Standing HUD (#lms) — the Maelstrom round panel.
   Hidden until the server tells us a round exists (or we are standing in the arena).
   ========================================================================== */
#lms {
  position:absolute; left:50%; transform:translateX(-50%); top:14px;
  display:none; min-width:240px; text-align:center;
  background-color:rgba(12,14,20,.94);
  border:1px solid #000; box-shadow:inset 0 0 0 1px var(--gold-dim);
  padding:8px 16px; font-family:var(--pixel-font); color:var(--text-0);
  image-rendering:pixelated; pointer-events:auto; z-index:1400;
}
#lms.visible { display:block; }
#lms-title { color:var(--gold); font-size:15px; letter-spacing:1px; margin-bottom:4px; }
#lms-line  { font-size:14px; line-height:1.5; }
#lms-line .n { color:var(--gold-2); }
#lms-line.win { color:var(--gold); }
#lms-line.out { color:var(--text-1); }
#lms-btn {
  margin-top:6px; padding:4px 12px; display:inline-block; cursor:pointer;
  background-color:rgba(0,0,0,.5); border:1px solid var(--gold-dim); color:var(--gold-2);
  font-size:14px;
}
#lms-btn:hover { color:var(--gold); border-color:var(--gold); }
#lms-btn.hidden { display:none; }