/* Midnight Blade — DOM chrome.
 *
 * The window is the whole idiom: a deep blue gradient box with a light bevelled rim,
 * white text with a hard shadow, gold for what is selected or yours. Everything on top
 * of the world is one of these windows, so the menu, HUD and dialogs cannot drift apart.
 * Colour tokens mirror public/js/art/palette.js so chrome and canvas agree.
 */

:root {
  --mb-night: #0a0e18;
  --mb-ink: #f4f6fa;
  --mb-ink-dim: #b8c0d0;
  --mb-gold: #f2c94c;
  --mb-gold-dk: #9a7a1e;
  --mb-blood: #c8303c;
  --mb-mako: #6cf07a;
  --mb-lamp: #ffe37a;
  --mb-sky: #4aa8ff;

  --mb-win-top: #1a2f9e;
  --mb-win-mid: #0b1660;
  --mb-win-bot: #04082a;
  --mb-rim: #d6dbe6;
  --mb-rim-dk: #5a6484;

  --mb-font: "Inter", "SF Pro Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mb-hud-gap: 14px;
  --mb-minimap-size: 156px;
  --mb-radius: 6px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--mb-night);
  color: var(--mb-ink);
  font-family: var(--mb-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.6);
  -webkit-font-smoothing: antialiased;
}

/* The canvas host fills the viewport; Phaser's RESIZE mode sizes the canvas to match. */
#game {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  /* Matches the Three.js scene background in three-world.js, so a frame dropped between
     resize and render shows night rather than a slab of daylit teal. */
  background: #0e1620;
}
/* The same vignette the title screen wears (.splash-vignette), over the field. It is what
   keeps the corners of a wide monitor from lifting the whole scene back out of the dark;
   purely decorative, so it must never eat a click meant for the world beneath it. */
#game.three-ready::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 72% at 50% 48%, transparent 42%, rgba(4, 8, 14, 0.55) 100%);
}
#game canvas { display: block; }
/* Phaser remains alive for menus, interpolation and event timing; the world itself is now
   drawn by the canvas below, with DOM HUDs above it. */
#game.three-ready canvas:not(.world-3d) { opacity: 0; pointer-events: none; }
#game .world-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto;
}

/* --- the window ------------------------------------------------------------ */

.mb-panel {
  position: relative;
  background:
    linear-gradient(180deg, var(--mb-win-top) 0%, var(--mb-win-mid) 45%, var(--mb-win-bot) 100%);
  border: 2px solid var(--mb-rim);
  border-radius: var(--mb-radius);
  box-shadow:
    inset 0 0 0 1px var(--mb-rim-dk),
    inset 0 0 0 2px rgba(255, 255, 255, 0.25),
    0 0 0 1px #000,
    0 10px 36px rgba(0, 0, 0, 0.65);
}

/* --- full-screen overlays ---------------------------------------------------- */

.screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
}
.screen[hidden] { display: none; }
.screen-dim { background: rgba(4, 6, 16, 0.6); backdrop-filter: blur(2px); }

/* --- title screen ------------------------------------------------------------
 *
 * "The Ascent": a wanderer on a crystal ledge at the foot of a moonlit citadel. The whole
 * scene — ground, rock, crystal nodes, moon and citadel silhouette, and the live character —
 * is one Three.js vista built from the same flat-shaded low-poly pieces the game itself
 * uses (see public/js/splash.js), so the title screen and the world it leads into are cut
 * from the same cloth. The form sits in the quiet right-hand third, which the composition
 * deliberately leaves in shadow.
 */

/* Scoped to :not([hidden]) deliberately — a bare `#menu { display: block }` is an ID
   selector and would outrank `.screen[hidden] { display: none }`, leaving the title screen
   painted on top of the running game forever. */
#menu:not([hidden]) {
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--mb-splash-night);
}

:root {
  --mb-splash-night: #05070c;
  --mb-splash-stone: #101a24;
  --mb-splash-steel: #7fa6bd;
  --mb-splash-cold: #c7dbe2;
}

.splash {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Behind the menu stage, above nothing. */
  z-index: 0;
  pointer-events: none;
  contain: strict;
}
.splash[hidden] { display: none; }

/* Deep night, with the cold glow the moon throws into the upper left. Also the fallback
   look when WebGL is unavailable and .no-hero is set — see public/js/splash.js. */
.splash-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 42% at 26% 16%, rgba(127, 166, 189, 0.30), transparent 62%),
    radial-gradient(ellipse 70% 46% at 40% 72%, rgba(52, 87, 108, 0.34), transparent 70%),
    linear-gradient(180deg, #070b13 0%, var(--mb-splash-stone) 46%, #070a10 100%);
}

/* The whole scene — ground, rock, crystal nodes, moon, citadel silhouette and the live
   character — is one Three.js canvas; see public/js/splash.js. `position: absolute` is not
   decoration here: without it this un-positioned canvas paints in the normal-flow layer,
   which is stacked *below* the positioned .splash-sky and .splash-vignette regardless of
   DOM order, and the scene vanishes behind them. */
.splash-scene { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.splash-scene[hidden] { display: none; }
.no-hero .splash-scene { display: none; }

/* Slow, low banks of mist sit below the menu, leaving its text and buttons crisp. */
.splash-fog {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.splash-fog::before, .splash-fog::after {
  content: '';
  position: absolute;
  inset: 24% -18% -12%;
  background:
    radial-gradient(ellipse 48% 13% at 28% 40%, rgba(150, 188, 199, .15), transparent 75%),
    radial-gradient(ellipse 42% 17% at 72% 62%, rgba(140, 180, 194, .18), transparent 75%),
    radial-gradient(ellipse 65% 19% at 40% 86%, rgba(116, 158, 177, .14), transparent 78%);
  animation: splash-mist 32s ease-in-out infinite alternate;
}
.splash-fog::after {
  opacity: .65;
  transform: scaleX(-1);
  animation: splash-mist 43s ease-in-out -17s infinite alternate-reverse;
}
@keyframes splash-mist {
  from { translate: -4% 2%; }
  to { translate: 5% -2%; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-fog::before, .splash-fog::after { animation: none; }
}
#menu[hidden] .splash-fog::before, #menu[hidden] .splash-fog::after {
  animation-play-state: paused;
}

/* Darkens the edges and sinks the right-hand third into shadow for the form. */
.splash-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 40%, rgba(5, 7, 12, 0.62) 68%, rgba(5, 7, 12, 0.86) 100%),
    radial-gradient(ellipse 82% 78% at 44% 46%, transparent 42%, rgba(5, 7, 12, 0.72) 100%);
}

/* --- title / character select ------------------------------------------------ */

.menu-stage {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 30vw);
  align-items: center;
  gap: 24px;
  padding: 24px clamp(16px, 3vw, 42px);
  overflow: auto;
}

.menu-title {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Clear of the moon's brightest edge, and above the figure's head. */
  margin-bottom: 22vh;
  max-width: 44ch;
  padding: 10px 26px 14px 0;
}
/* The citadel is busy behind the wordmark, so the type carries its own pool of shadow
   rather than relying on the art happening to be dark in the right place. */
.menu-title::before {
  content: '';
  position: absolute;
  inset: -18% -30% -18% -60%;
  z-index: -1;
  background: radial-gradient(ellipse 62% 60% at 38% 50%, rgba(5, 7, 12, 0.82), transparent 72%);
}

.menu-tagline {
  margin: 0;
  text-align: center;
  font-size: clamp(10px, 1.05vw, 13px);
  letter-spacing: 0.16em;
  line-height: 1.7;
  color: var(--mb-splash-cold);
  text-shadow: 0 1px 3px #000, 0 0 12px rgba(0, 0, 0, 0.9);
}

/* A narrow pane of cold glass over the shadowed side, not an opaque blue window. */
.menu-panel {
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 26, 36, 0.78), rgba(5, 7, 12, 0.86));
  border: 1px solid rgba(199, 219, 226, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(199, 219, 226, 0.18),
    0 18px 50px rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.logo {
  margin: 0;
  width: min(100%, 440px);
}
.logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 2px #020509) drop-shadow(0 0 18px rgba(127, 166, 189, .2));
}

.menu-pop {
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mb-lamp);
}

#menu-form { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mb-ink-dim);
}

.mb-input {
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  color: var(--mb-ink);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--mb-rim-dk);
  border-radius: 4px;
  outline: none;
  width: 100%;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.mb-input:focus { border-color: var(--mb-gold); box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 2px rgba(242, 201, 76, 0.25); }
.mb-input::placeholder { color: rgba(184, 192, 208, 0.45); }

.class-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.class-card {
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 10px 12px 10px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--mb-ink);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--mb-rim-dk);
  border-radius: 4px;
  text-shadow: inherit;
  transition: background 120ms, border-color 120ms;
}
.class-card:hover { background: rgba(255, 255, 255, 0.06); }
.class-card.is-active { border-color: var(--mb-gold); background: rgba(242, 201, 76, 0.10); }
/* The pointing cursor of every menu that ever mattered. */
.class-card.is-active::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 14px;
  border: 5px solid transparent;
  border-left: 8px solid var(--mb-gold);
  filter: drop-shadow(1px 1px 0 #000);
}
.class-name { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; }
.class-blurb { font-size: 12px; color: var(--mb-ink-dim); }
.class-stats { font-size: 11px; letter-spacing: 0.04em; color: var(--mb-gold); }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.7);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 40%),
    var(--swatch);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  transition: transform 120ms;
}
.swatch:hover { transform: scale(1.08); }
.swatch.is-active { border-color: var(--mb-gold); box-shadow: 0 0 0 2px rgba(242, 201, 76, 0.5), 0 2px 4px rgba(0,0,0,.6); }

/* The sprite preview is the no-WebGL fallback for the 3D figure on the ledge; menu.js
   unhides it only when Splash reports that the live model could not be built. */
.preview-box { align-self: center; padding: 6px; line-height: 0; background: rgba(0,0,0,.45); border: 1px solid var(--mb-rim-dk); border-radius: 4px; }
.preview-box[hidden] { display: none; }
#preview-canvas { display: block; width: 128px; height: 128px; background: radial-gradient(circle, #3a2e1c 0%, #1c1915 70%); border-radius: 3px; }

.mb-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 11px 16px;
  cursor: pointer;
  color: var(--mb-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--mb-rim);
  border-radius: 4px;
  text-shadow: inherit;
  box-shadow: inset 0 0 0 1px var(--mb-rim-dk), 0 2px 0 #000;
  transition: background 120ms, transform 60ms;
}
.mb-btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)); }
.mb-btn:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px var(--mb-rim-dk); }
.mb-btn:disabled { opacity: 0.45; cursor: default; }
.mb-btn-primary { border-color: var(--mb-gold); color: var(--mb-gold); background: linear-gradient(180deg, rgba(242, 201, 76, 0.22), rgba(242, 201, 76, 0.04)); }
.mb-btn-primary:hover { background: linear-gradient(180deg, rgba(242, 201, 76, 0.32), rgba(242, 201, 76, 0.10)); }
.mb-btn-small { font-size: 11px; padding: 5px 10px; }

.menu-error { margin: 0; font-size: 12px; color: #ff8a7a; }
.menu-error[hidden] { display: none; }

.legend {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 14px;
  font-size: 12px;
  line-height: 1.6;
}
.legend dt { color: var(--mb-gold); white-space: nowrap; letter-spacing: 0.08em; font-weight: 700; }
.legend dd { margin: 0; color: var(--mb-ink-dim); }

.legend-block { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid rgba(214, 219, 230, 0.18); }
.legend-head { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mb-ink-dim); }
.legend-note { margin: 0; font-size: 12px; color: var(--mb-ink-dim); font-style: italic; }

/* The controls list is a disclosure so a short viewport is not forced to scroll past it. */
summary.legend-head { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
summary.legend-head::-webkit-details-marker { display: none; }
summary.legend-head::before {
  content: '';
  border: 4px solid transparent;
  border-left: 6px solid var(--mb-gold);
  transition: transform 140ms;
}
details[open] > summary.legend-head::before { transform: rotate(90deg) translateX(1px); }

/* Character creation: restrained brass details and a clear selection hierarchy. */
.menu-panel {
  padding: 30px;
  gap: 24px;
  border-radius: 12px;
  border-color: rgba(176, 192, 196, .22);
  background: radial-gradient(ellipse at 100% 0, rgba(101, 123, 130, .12), transparent 60%), linear-gradient(160deg, rgba(19, 29, 36, .96), rgba(7, 12, 17, .97));
  box-shadow: inset 0 1px 0 rgba(223, 222, 203, .12), 0 24px 70px #0008;
  text-shadow: none;
}
.creation-header { padding-bottom: 22px; border-bottom: 1px solid #b3c4c51c; }
.creation-header h2 { margin: 0 0 8px; color: #e8e5d9; font: 400 clamp(24px, 2.2vw, 30px)/1.15 Georgia, serif; letter-spacing: -.025em; }
.creation-header p { margin: 0; font-size: 12px; color: #8f9da5; }
#menu-form { gap: 22px; }
.menu-panel .field { gap: 10px; }
.menu-panel .field-label { font-size: 9px; letter-spacing: .18em; color: #a4afb5; }
.menu-panel .mb-input { min-height: 46px; padding: 12px 14px; border: 1px solid #b3c4c526; border-radius: 5px; background: #050a0e66; box-shadow: none; font-size: 14px; }
.menu-panel .mb-input:focus { border-color: #bfa575; box-shadow: 0 0 0 3px #bfa57512; }
.menu-panel .class-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.menu-panel .class-card { padding: 15px 12px; min-height: 110px; gap: 6px; border: 1px solid #b3c4c526; border-radius: 6px; background: #ffffff02; text-shadow: none; }
.menu-panel .class-card:hover { background: #b3c4c50a; border-color: #b3c4c55c; }
.menu-panel .class-card.is-active { background: linear-gradient(135deg, #bfa57520, #bfa57506); border-color: #bfa575; box-shadow: inset 0 0 0 1px #bfa57510; }
.menu-panel .class-card.is-active::before { content: '✓'; left: auto; right: 11px; top: 10px; border: 0; color: #d5bd8c; font-size: 12px; filter: none; }
.class-emblem { width: 25px; height: 25px; margin-bottom: 3px; color: #8eabb7; }
.is-active .class-emblem { color: #d5bd8c; }
.menu-panel .class-name { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.menu-panel .class-blurb { font-size: 11px; line-height: 1.4; color: #8f9da5; }
.class-detail { min-height: 28px; margin: 0; color: #bfa575; font-size: 10px; line-height: 1.6; letter-spacing: .04em; }
.colour-label { display: flex; align-items: center; justify-content: space-between; }
.colour-label b { color: #c2cbd0; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: .03em; }
.menu-panel .swatches { gap: 10px; justify-content: space-between; }
.menu-panel .swatch { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #101920; background: var(--swatch); box-shadow: 0 0 0 1px #b3c4c51a; }
.menu-panel .swatch.is-active { border-color: #101920; box-shadow: 0 0 0 1px #d5bd8c, 0 0 0 4px #bfa57515; }
.menu-panel button:focus-visible { outline: 2px solid #d5bd8c; outline-offset: 3px; }
#btn-enter { position: relative; min-height: 50px; margin-top: 3px; border: 1px solid #d1b784; border-radius: 5px; background: linear-gradient(110deg, #d1b784, #b69a68); color: #161914; text-shadow: none; box-shadow: inset 0 1px 0 #ffffff38, 0 4px 18px #0003; font-size: 11px; letter-spacing: .16em; }
#btn-enter::after { content: '→'; position: absolute; right: 16px; font-size: 16px; top: 50%; translate: 0 -50%; }
#btn-enter:hover { background: linear-gradient(110deg, #e0c896, #c7ab78); }
.splash-controls {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 3vw, 42px);
  bottom: max(24px, env(safe-area-inset-bottom));
  width: min(650px, calc(100% - 530px));
  padding: 18px 20px 14px;
  color: #b4c5cd;
  background: linear-gradient(130deg, #101a22d9, #080e14b3);
  border: 1px solid #b3c4c51c;
  border-radius: 8px;
  backdrop-filter: blur(8px);
  text-shadow: none;
}
.control-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.control-action { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.control-action > span { color: #cbb88c; font-size: 9px; letter-spacing: .14em; }
.control-action small { color: #8fa3af; font-size: 10px; line-height: 1.4; }
.splash-controls kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; height: 23px; padding: 0 5px; border: 1px solid #8199a65c; border-bottom-width: 3px; border-radius: 4px; background: linear-gradient(#293944, #14202b); color: #cfdee2; font: 500 10px var(--mb-font); }
.key-cluster { height: 50px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.key-cluster > div { display: flex; gap: 3px; }
.control-mouse { height: 50px; width: 34px; color: #a9c1cd; }
.control-keys { height: 50px; display: flex; align-items: center; gap: 5px; }
.control-keys i { color: #70818b; font: 10px var(--mb-font); }
.control-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding-top: 14px; margin-top: 14px; border-top: 1px solid #b3c4c51c; }
.control-shortcuts span { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: #8fa3af; }
.control-shortcuts kbd { min-width: 18px; height: 18px; font-size: 8px; border-bottom-width: 2px; }
@media (max-width: 1100px) {
  .splash-controls { padding-inline: 12px; }
  .control-actions { gap: 8px; }
  .control-keys { gap: 3px; }
}
@media (max-width: 900px), (max-height: 620px) {
  .splash-controls { position: fixed; left: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); width: calc(100% - 28px); padding: 12px; }
  #menu .menu-stage { --controls-clearance: 265px; }
  .control-action small { font-size: 9px; }
}

/* --- title screen: responsive --------------------------------------------- */

/* Portrait and short screens: the art keeps the top of the frame and the form becomes a
   sheet along the bottom, so the focal composition survives instead of being cropped away. */
@media (max-width: 900px), (max-height: 620px) {
  .menu-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 12px;
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .menu-title { margin-bottom: 0; max-width: none; }
  .menu-panel {
    align-self: end;
    max-height: min(62vh, 560px);
    padding: 16px 16px 14px;
  }
  .logo { align-items: center; text-align: center; }
  .logo { width: min(280px, 54vw, 36vh); }
  .menu-title { align-items: center; text-align: center; }
  /* The form is a sheet across the bottom ~55%, so the whole composition is rebuilt into
     the band above it. Left as it was, the scene and the figure sit behind the panel and
     the screen is nothing but empty sky. */
  .splash-vignette {
    background:
      linear-gradient(180deg, transparent 30%, rgba(5, 7, 12, 0.62) 62%, rgba(5, 7, 12, 0.9) 100%),
      radial-gradient(ellipse 96% 54% at 46% 30%, transparent 48%, rgba(5, 7, 12, 0.66) 100%);
  }
}

/* Landscape phones: almost no vertical room, so the art shrinks rather than the form. */
@media (max-height: 460px) {
  .menu-stage { grid-template-columns: 1fr minmax(280px, 46vw); grid-template-rows: 1fr; }
  .menu-title { margin-bottom: 0; }
}

/* --- in-game HUD ------------------------------------------------------------ */

.hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hud[hidden] { display: none; }
.hud button, .hud input, .hud select { pointer-events: auto; }

.vitals {
  position: absolute;
  top: var(--mb-hud-gap);
  left: var(--mb-hud-gap);
  width: min(300px, 42vw);
  padding: 10px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vital-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vital-row .tag { color: var(--mb-ink-dim); }
.vital-row .big { font-size: 22px; font-weight: 800; color: var(--mb-gold); letter-spacing: 0; }
.vital-row .weapon { margin-left: auto; margin-right: auto; font-size: 12px; color: var(--mb-lamp); }

.bar {
  position: relative;
  height: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--mb-rim-dk);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}
.bar-fill {
  height: 100%;
  width: 0%;
  transition: width 90ms linear;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 50%), var(--mb-gold);
}
.bar-hp .bar-fill[data-band="ok"] { background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 50%), #5cd65c; }
.bar-hp .bar-fill[data-band="low"] { background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 50%), var(--mb-gold); }
.bar-hp .bar-fill[data-band="crit"] { background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 50%), var(--mb-blood); }
.bar-xp .bar-fill { background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 50%), linear-gradient(90deg, #2a8cff, var(--mb-mako)); box-shadow: 0 0 8px rgba(108, 240, 122, 0.5); }
.bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.minimap { position: absolute; right: var(--mb-hud-gap); bottom: var(--mb-hud-gap); padding: 5px; line-height: 0; }
.minimap[hidden] { display: none; }
#minimap-canvas { display: block; width: var(--mb-minimap-size); height: var(--mb-minimap-size); border-radius: 3px; }

.chat-log {
  position: absolute;
  left: var(--mb-hud-gap);
  bottom: 50px;
  width: min(440px, 60vw);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  line-height: 1.5;
}
.chat-line { transition: opacity 400ms linear; }
.chat-system { color: var(--mb-sky); }
.chat-kill { color: #ff8a7a; }

.chat-form {
  position: absolute;
  left: var(--mb-hud-gap);
  bottom: var(--mb-hud-gap);
  width: min(440px, 60vw);
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-form[hidden] { display: none; }
.chat-prompt { font-size: 11px; letter-spacing: 0.18em; color: var(--mb-gold); }

/* --- leaderboard ------------------------------------------------------------ */

.leaderboard {
  position: fixed;
  top: var(--mb-hud-gap);
  right: var(--mb-hud-gap);
  z-index: 20;
  width: min(320px, 60vw);
  padding: 10px 12px;
  font-size: 12px;
}
.leaderboard[hidden] { display: none; }
.panel-title {
  margin: 0 0 8px;
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mb-gold);
  border-bottom: 1px solid rgba(214, 219, 230, 0.25);
}
.lb-rows { display: flex; flex-direction: column; gap: 1px; }
.lb-row { display: grid; grid-template-columns: 26px 1fr 40px 40px; gap: 4px; line-height: 1.7; }
.lb-row.is-self { color: var(--mb-gold); }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-lvl, .lb-kills { text-align: right; color: var(--mb-ink-dim); }
.lb-row.is-self .lb-lvl, .lb-row.is-self .lb-kills { color: inherit; }
.lb-self { margin-top: 8px; color: var(--mb-gold); letter-spacing: 0.12em; font-weight: 700; }
.lb-pop { font-size: 11px; color: var(--mb-ink-dim); letter-spacing: 0.12em; }

/* --- death & settings ------------------------------------------------------- */

.death-panel, .settings-panel {
  width: min(440px, 100%);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  text-align: center;
}
.death-title {
  margin: 0;
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mb-blood);
  text-shadow: 2px 2px 0 #000, 0 0 18px rgba(200, 48, 60, 0.6);
}
.death-killer { margin: 0; font-size: 14px; letter-spacing: 0.1em; }
.death-xp { margin: 0; font-size: 13px; color: #ff8a7a; }

.settings-launcher {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 31;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 15px;
  color: #c7dbe2;
  font: 600 11px var(--mb-font);
  letter-spacing: .16em;
  background: linear-gradient(180deg, rgba(24, 38, 49, .94), rgba(5, 7, 12, .96));
  border: 1px solid rgba(199, 219, 226, .3);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
  cursor: pointer;
}
.settings-launcher:hover { color: var(--mb-gold); border-color: var(--mb-gold); }
#hud:not([hidden]):has(#minimap-frame:not([hidden])) ~ .settings-launcher {
  right: calc(var(--mb-hud-gap) + var(--mb-minimap-size) + 24px);
  bottom: max(var(--mb-hud-gap), env(safe-area-inset-bottom));
}
.settings-launcher:focus-visible { outline: 2px solid var(--mb-gold); outline-offset: 3px; }
#menu .menu-stage { padding-bottom: calc(var(--controls-clearance, 76px) + env(safe-area-inset-bottom)); }
#settings-overlay { z-index: 32; background: rgba(5, 7, 12, .72); backdrop-filter: blur(9px); }
.settings-panel {
  width: min(780px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: clamp(20px, 3vw, 32px);
  gap: 26px;
  text-align: left;
  background: linear-gradient(160deg, rgba(24, 38, 49, .96), rgba(5, 7, 12, .96));
  border: 1px solid rgba(199, 219, 226, .2);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(199, 219, 226, .18), 0 18px 50px rgba(0, 0, 0, .72);
}
.settings-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-eyebrow { margin: 0 0 8px; color: var(--mb-gold); font-size: 10px; letter-spacing: .24em; }
.settings-header h2 { margin: 0; color: #c7dbe2; font-size: 26px; letter-spacing: .18em; font-weight: 600; }
.settings-header img { opacity: .8; }
.settings-columns { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 28px; }
.settings-preferences { display: flex; flex-direction: column; gap: 28px; }
.settings-group { min-width: 0; margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid rgba(199, 219, 226, .15); }
.settings-group legend, .settings-controls h3 { padding: 0 12px 0 0; color: #9aafb9; font-size: 10px; font-weight: 600; letter-spacing: .22em; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 13px; }
.set-toggle { cursor: pointer; }
.set-toggle input {
  appearance: none;
  flex: 0 0 36px;
  width: 36px;
  height: 20px;
  margin: 0;
  border: 1px solid #52616c;
  border-radius: 20px;
  background: #080f17;
  cursor: pointer;
}
.set-toggle input::before { content: ''; display: block; width: 12px; height: 12px; margin: 3px; border-radius: 50%; background: #8697a3; }
.set-toggle input:checked { border-color: var(--mb-gold); background: rgba(242, 201, 76, .15); }
.set-toggle input:checked::before { transform: translateX(16px); background: var(--mb-gold); }
.settings-panel input:focus-visible { outline: 2px solid #c7dbe2; outline-offset: 4px; }
.set-volume { padding-top: 10px; }
.set-volume-label { display: flex; justify-content: space-between; font-size: 13px; }
.set-volume-label span { color: var(--mb-gold); font-variant-numeric: tabular-nums; }
.set-volume input { width: 100%; margin: 16px 0 0; accent-color: var(--mb-gold); cursor: pointer; }
.settings-controls { padding-left: 28px; border-left: 1px solid rgba(199, 219, 226, .15); }
.settings-controls h3 { margin: 0 0 16px; }
.settings-controls .legend { margin: 0; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; row-gap: 12px; font-size: 11px; line-height: 1.5; }
.settings-controls .legend dt { font-size: 10px; letter-spacing: .03em; }
.settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid rgba(199, 219, 226, .15); }
.settings-footer p { margin: 0; font-size: 11px; color: #9aafb9; }
.settings-footer button { min-width: 150px; }
.settings-footer button span { margin-left: 16px; font-size: 9px; opacity: .6; }
@media (max-width: 640px) {
  .settings-columns { grid-template-columns: 1fr; }
  .settings-controls { padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(199, 219, 226, .15); }
  .settings-footer { flex-wrap: wrap; }
  .settings-footer button { flex: 1; }
}

/* --- status banner & debug -------------------------------------------------- */

.status-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #4a3210, #2a1a08);
  border: 1px solid var(--mb-lamp);
  border-top: none;
  border-radius: 0 0 6px 6px;
  color: var(--mb-lamp);
}
.status-banner[hidden] { display: none; }
.status-banner[data-kind="rejected"], .status-banner[data-kind="fatal"] {
  background: linear-gradient(180deg, #4a1014, #2a0808);
  border-color: var(--mb-blood);
  color: #ff8a7a;
}

.debug {
  position: fixed;
  left: var(--mb-hud-gap);
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  margin: 0;
  padding: 8px 10px;
  font: 11px/1.5 ui-monospace, Menlo, monospace;
  white-space: pre;
  background: rgba(4, 6, 16, 0.8);
  border: 1px solid var(--mb-rim-dk);
  border-radius: 4px;
  pointer-events: none;
  text-shadow: none;
}
.debug[hidden] { display: none; }

/* Small windows: the game is desktop-first, but nothing may overlap into unusability. */
@media (max-width: 640px), (max-height: 560px) {
  :root { --mb-hud-gap: 6px; }
  .vitals { width: min(230px, 52vw); }
  :root { --mb-minimap-size: 100px; }
  .leaderboard { font-size: 11px; }
  .chat-log { width: min(300px, 70vw); bottom: 42px; }
}