/* Endless Maze — distributed HUD.
 *
 * A thin traveler band across the top — identity + vitals on the left,
 * resources + tools on the right — and the scroll hotbar alone at the foot.
 * Every piece floats over the maze (pointer-events pass through the gaps) so
 * the labyrinth fills the whole screen. Dark carved stone, brass + cool steel,
 * lamplight that recedes into the dungeon — never a bright pasted panel.
 *
 * All values are wired by id (#h-name, #hud-hp, #h-marks, #spellbar, …); the JS
 * is untouched. This file only decides where each piece sits and how it paints.
 */

:root {
  --hud-ivory:  #e2e5ec;
  --hud-muted:  #9da5b8;
  --hud-brass:  #c9a227;
  --hud-steel:  #565e75;                 /* the reference art's cool edge-light */
  --hud-edge:   rgb(118 128 156 / 0.42);
  --hud-veil-0: rgb(18 20 27 / 0.82);
  --hud-veil-1: rgb(9 10 14 / 0.74);
  --hud-top-h:  clamp(58px, 5.4vw, 78px);   /* nominal band height (offsets #announce) */
}

/* ============================================================= top band ==== */
#hud-top {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 10px clamp(10px, 1.4vw, 22px) 0;
  color: var(--hud-ivory);
  pointer-events: none;            /* the gaps let canvas taps/clicks through */
}
#hud-top button,
#hud-top .coin-cell { pointer-events: auto; }

/* a soft lamplit recess — grounds the text, fades into the dark, no hard box */
.ht-cluster,
.ht-side {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  padding: 8px clamp(10px, 1.1vw, 16px);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--hud-veil-0), var(--hud-veil-1));
  box-shadow:
    inset 0 1px 0 var(--hud-edge),
    inset 0 -10px 22px rgb(0 0 0 / 0.45),
    0 6px 24px rgb(0 0 0 / 0.5);
}
.ht-cluster::after,
.ht-side::after {                   /* a single brass hairline catch along the top */
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hud-brass) 38%, transparent), transparent);
  pointer-events: none;
}

/* the player cluster floats bare on the maze — no slab, just the bars + light
   text; the bars carry their own frames so they stay legible over the stone */
.ht-player {
  padding: 4px 2px;
  background: none;
  box-shadow: none;
}
.ht-player::after { display: none; }

/* ---- identity: name / level, then ring · region ---- */
.ht-idblock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  max-width: clamp(120px, 16vw, 244px);
}
.ht-id {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
#h-name {
  overflow: hidden;
  color: #eceef3;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(17px, 1.55vw, 23px);
  font-weight: 600;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px #000, 0 0 12px rgb(0 0 0 / 0.7);
  white-space: nowrap;
}
#h-lvl {
  flex: 0 0 auto;
  color: var(--hud-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(9.5px, 0.84vw, 12px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}
.ht-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#h-ring {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #dfe2ea;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid color-mix(in srgb, var(--hud-brass) 46%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 6px rgb(0 0 0 / 0.6), 0 0 7px color-mix(in srgb, var(--region-glow, #aab3d0) 30%, transparent);
  text-shadow: 0 1px 1px #000;
}
#h-region {
  overflow: hidden;
  color: color-mix(in srgb, var(--region-glow, #aab3d0) 62%, #9aa1b2);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(10px, 0.92vw, 13px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

/* ---- vitals: heart + molten bar, compass + gilt bar ---- */
.ht-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-width: 0;
}
.vbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vbar-icon {
  flex: 0 0 auto;
  width: clamp(22px, 2.1vw, 30px);
  height: clamp(22px, 2.1vw, 30px);
  object-fit: contain;
  filter: drop-shadow(0 1px 2px #000);
  pointer-events: none;
  user-select: none;
}
.vbar-xp .vbar-icon { width: clamp(19px, 1.85vw, 26px); height: clamp(19px, 1.85vw, 26px); }

.vbar-meter {
  position: relative;
  flex: 0 0 auto;
  width: clamp(158px, 18vw, 274px);
  height: clamp(15px, 1.5vw, 20px);
}
.vbar-xp .vbar-meter { height: clamp(11px, 1.1vw, 15px); }

.vbar-track {
  position: absolute;
  z-index: 1;
  inset: 22% 5%;
  overflow: hidden;
  background: #050302;
  border-radius: 999px;
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.92);
}
#hud-hp-ghost,
#hud-shield,
#hud-hp,
#hud-xp {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: inherit;
}
#hud-hp-ghost {
  z-index: 0;
  background: #4b120c;
  transition: width 0.55s ease 0.18s;
}
#hud-shield {
  z-index: 1;
  background: repeating-linear-gradient(135deg, rgb(147 201 230 / 0.58) 0 4px, rgb(67 117 144 / 0.24) 4px 8px);
}
#hud-hp {
  z-index: 2;
  overflow: hidden;
  background: url("../assets/art/hud/reference/bar-health-fill.png") left center / 100% 100% no-repeat, #b5392b;
  box-shadow: inset 0 1px 1px rgb(255 175 135 / 0.45), 0 0 7px rgb(196 70 52 / 0.5);
  transition: width 0.25s ease;
}
#hud-xp {
  z-index: 2;
  overflow: hidden;
  background: url("../assets/art/hud/reference/bar-xp-fill.png") left center / 100% 100% no-repeat, #c9a227;
  box-shadow: 0 0 5px rgb(222 159 50 / 0.5);
  transition: width 0.25s ease;
}
.vbar-frame {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.hp-flash,
.xp-sheen { display: none; }

/* the readout rides INSIDE the bar, right-aligned — light digits, heavy black
   shadow so they stay legible over both the molten fill and the dark trough */
.vbar-num {
  position: absolute;
  z-index: 6;                       /* above the pill frame (z4) */
  top: 50%;
  right: clamp(8px, 0.8vw, 13px);
  transform: translateY(-50%);
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(9.5px, 0.92vw, 12px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 3px #000, 0 0 5px rgb(0 0 0 / 0.85);
  pointer-events: none;
}
.vbar-num-xp {
  color: #fce9b8;
  font-size: clamp(8.5px, 0.8vw, 11px);
}

/* status chips hang just under the player cluster */
#hud-status {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  left: clamp(10px, 1.1vw, 16px);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 92%;
}
#hud-status:empty { display: none; }
#hud-status .status-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  color: #b6bdcc;
  background: rgb(13 15 21 / 0.92);
  border: 1px solid rgb(86 94 117 / 0.7);
  border-radius: 10px;
  font-size: 10px;
  white-space: nowrap;
}
#hud-status .status-chip .sct { opacity: 0.72; }

/* ---- resources + tools (right) ---- */
.ht-side {
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(10px, 1.2vw, 16px);
  padding: 4px 2px;
  background: none;
  box-shadow: none;
}
.ht-side::after { display: none; }
.ht-coin {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(5px, 0.6vw, 9px);
}
.coin-cell {
  display: flex;
  flex-direction: row-reverse;        /* token hugs the right edge, value to its left */
  align-items: center;
  gap: 8px;
  color: #cfd3dd;
  white-space: nowrap;
}
/* a clean circular coin token cropped out of the wide currency plaque (194×108)
   — no stretched plaque behind the text, so the symbol can't distort or overlap */
.coin-emblem {
  flex: 0 0 auto;
  width: clamp(26px, 2.5vw, 32px);
  height: clamp(26px, 2.5vw, 32px);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 250% auto;
  background-position: 17% 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.5), inset 0 0 7px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.65);
}
.coin-marks  .coin-emblem { background-image: url("../assets/art/hud/reference/currency-marks.png"); }
.coin-gold   .coin-emblem { background-image: url("../assets/art/hud/reference/currency-gold.png"); }
.coin-salves .coin-emblem { background-image: url("../assets/art/hud/reference/currency-salves.png"); }
.cv,
.cl { text-shadow: 0 1px 2px #000; }
.cv {
  min-width: 2.4ch;
  text-align: right;
  color: #eceef3;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(14px, 1.35vw, 19px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cv.gold { color: #e6b652; }
.cl { display: none; }                  /* symbols only — no label words */

/* Map + Bag panel triggers, sitting under the name as small keypress chips */
.ht-keys {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
}
.keycap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 3px;
  color: var(--hud-muted);
  background: linear-gradient(180deg, rgb(26 28 36 / 0.66), rgb(11 12 17 / 0.66));
  border: 1px solid #34384a;
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.keycap kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--hud-brass);
  line-height: 1;
  background: rgb(0 0 0 / 0.42);
  border: 1px solid var(--brass-dim);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(201 162 39 / 0.18);
}
.keycap > span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 600;
  line-height: 1;
}
.keycap:hover,
.keycap:focus-visible,
.keycap.is-on {
  color: var(--hud-ivory);
  border-color: color-mix(in srgb, var(--hud-brass) 65%, #34384a);
  outline: none;
}
.keycap.is-on kbd {
  color: #15140f;
  background: var(--hud-brass);
  border-color: var(--hud-brass);
}
.keycap:active { transform: translateY(1px); }

/* ============================================ scrolls (right rail) ==== */
/* the scrolls sit directly under the coin markers — NO frame: just the element
   emblem, a big ×count, and the name. Each row mirrors a coin row (emblem hugs
   the right edge). Owned scrolls only; cast on click or by its number key. */
#spellbar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(3px, 0.5vw, 8px);
  margin-top: clamp(4px, 0.5vw, 8px);
  padding-top: clamp(5px, 0.6vw, 9px);
  border-top: 1px solid rgb(118 128 156 / 0.18);   /* a hairline parting the markers from the scrolls */
  pointer-events: auto;
}
#spellbar:empty { border-top: 0; padding-top: 0; margin-top: 0; }

.spell-slot {
  position: relative;
  display: flex;
  flex-direction: row-reverse;        /* emblem on the right edge, name to its left */
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 1px 0;
  background: none;
  border: 0;
  color: var(--hud-ivory);
  cursor: pointer;
  appearance: none;
  white-space: nowrap;
}
.spell-slot.is-empty { display: none; }            /* only owned scrolls */
.spell-slot:hover,
.spell-slot:focus-visible {
  filter: brightness(1.12) drop-shadow(0 0 6px color-mix(in srgb, var(--sp, #8b93ad) 50%, transparent));
  outline: none;
}
.spell-slot:active { transform: translateY(1px); }

.spell-icon {
  flex: 0 0 auto;
  width: clamp(27px, 2.6vw, 34px);
  height: clamp(27px, 2.6vw, 34px);
  object-fit: contain;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sp, #c89a45) 62%, transparent));
  pointer-events: none;
}
.spell-slot .sk { display: none; }                 /* the number-key hint is dropped */
.spell-slot .sc {                                   /* the big ×count */
  flex: 0 0 auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(14px, 1.35vw, 19px);
  font-weight: 700;
  line-height: 1;
  color: #eceef3;
  text-shadow: 0 1px 2px #000;
}
.spell-slot .sn {                                   /* the scroll name */
  flex: 0 1 auto;
  overflow: hidden;
  max-width: clamp(80px, 9.5vw, 156px);
  color: color-mix(in srgb, var(--sp, #d7dbe4) 38%, #dde1e9);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 600;
  line-height: 1;
  text-align: right;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
}

/* ============================================ overlays / touch ==== */
body.overlay-open #hud-top {
  opacity: 0.4;
  pointer-events: none;
}

body.touch #hud-top {
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
}

@media (max-width: 900px) {
  :root { --hud-top-h: 64px; }
  #hud-top { gap: 8px; padding-left: 8px; padding-right: 8px; }
  .ht-idblock { max-width: 34vw; }
  .vbar-meter { width: clamp(116px, 26vw, 200px); }
  .cl { display: none; }
  .coin-emblem { width: 24px; height: 24px; }
  .spell-icon { width: 26px; height: 26px; }
  .spell-slot .sc { font-size: clamp(13px, 3.4vw, 16px); }
  .spell-slot .sn { max-width: 40vw; font-size: clamp(11px, 3vw, 14px); }
}

@media (max-width: 640px) {
  /* drop the bars' numeric tails and the region line to keep the band slim;
     vitals stay legible as pure molten/gilt bars with their medallions. */
  #h-region { font-size: 10px; }
  .vbar-num-xp { display: none; }
  .ht-side { padding: 6px 8px; }
  .ht-coin { gap: 4px; }
  .spell-slot .sn { display: none; }
  .spell-slot { gap: 5px; }
  #spellbar { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #hud-hp, #hud-xp, #hud-hp-ghost { transition: width 0.2s linear; }
}