/* HUD and menus (G4). One visual language: warm cream type, honey / coral accents, frosted indigo panels, chunky
   rounded shapes. Display type: Lilita One; UI type: Fredoka (both OFL, embedded, assets/fonts). Sizes are in em off
   #hud-root's font size, which follows the window height. Accents follow the visual style (data-style A / B / C). */

@font-face {
  font-family: 'Lilita';
  src: url('../assets/fonts/LilitaOne-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/Fredoka-Variable.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}

#hud-root {
  --cream: #fff3df;
  --cream-dim: rgba(255, 243, 223, 0.66);
  --ink: #1d1733;
  --panel: rgba(24, 18, 48, 0.62);
  --panel-strong: rgba(20, 15, 40, 0.86);
  --line: rgba(255, 236, 210, 0.13);
  --accent: #ffc46b;
  --accent-2: #ff8a5c;
  /* (round 5a) the quota's own colour, apart from the wallet's (the money is --accent) */
  --quota: #7fd8ff;
  --quota-2: #4f9cff;
  --good: #8be38f;
  --bad: #ff5f57;
  --hp: #ff6f61;
  --hp-2: #ff9a6b;
  --stam: #ffd36b;
  --stam-2: #ffe9a6;
  --shadow: 0 0.4em 1.6em rgba(8, 5, 22, 0.45);
  --display: 'Lilita', 'Fredoka', system-ui, 'Segoe UI', sans-serif;
  /* the hugger over the view (round 3): its pale belly in the hugger's palette (alien-visual.js: A pale flesh, red) */
  --hug-skin: #f2d4c6;
  --hug-flesh: #b98679;
  --hug-deep: #2e1418;
  --hug-vein: #ff3b2e;
  --hug-glow: #ff5a44;
  --hug-lip: #ffe0d2;
  --hug-bead: #ffe9df;
  --hug-wound: #3a0c12;
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
  font-family: 'Fredoka', system-ui, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1.72vh, 22px);
  line-height: 1.25;
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
#hud-root[data-style='B'] {
  --panel: rgba(10, 16, 46, 0.64);
  --panel-strong: rgba(8, 12, 36, 0.88);
  --accent: #ffb04a;
  --accent-2: #3fe6ff;
  --stam: #4ff0b8;
  --stam-2: #b4ffe2;
  /* hugger: pale tan, magenta */
  --hug-skin: #e6d6c8;
  --hug-flesh: #9c8576;
  --hug-deep: #1c1420;
  --hug-vein: #ff45d8;
  --hug-glow: #ff5ce0;
  --hug-lip: #f6eadf;
  --hug-bead: #f8efe6;
  --hug-wound: #2a0a26;
}
#hud-root[data-style='C'] {
  --panel: rgba(6, 26, 32, 0.66);
  --panel-strong: rgba(4, 20, 24, 0.9);
  --accent: #2ef0dc;
  --accent-2: #ff8a2a;
  --quota: #ffcf6a;
  --quota-2: #ff9a3c;
  --stam: #2ef0dc;
  --stam-2: #b8fff6;
  /* hugger: pale grey-green, cyan */
  --hug-skin: #dbe6da;
  --hug-flesh: #8a9c8e;
  --hug-deep: #0e1a1a;
  --hug-vein: #2ee8ff;
  --hug-glow: #4aeeff;
  --hug-lip: #eef7ee;
  --hug-bead: #f2faf2;
  --hug-wound: #062026;
}

#hud-root * { box-sizing: border-box; }
#hud-root .disp { font-family: var(--display); font-weight: 400; letter-spacing: 0.02em; }
#hud-root .layer { position: absolute; inset: 0; }
#hud-root .hidden { display: none !important; }
#hud-root .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1em;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
#hud-root .key {
  display: inline-grid;
  place-items: center;
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 0.45em;
  border-radius: 0.45em;
  background: var(--cream);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92em;
  box-shadow: 0 0.18em 0 rgba(0, 0, 0, 0.38);
}
#hud-root .key.wide { min-width: 2.6em; }

/* ----------------------------------------------------------------------------------------- in-game: corners */
.hud-play { transition: opacity 0.3s; }
.hud-play.dim { opacity: 0; }

/* the wallet + quota stack (top left). Scoped to the play layer's own child: a toast of kind 'money' is a '.money' too,
   and this rule pinned it 1.3em under the top of the toast stack, over the toast before it (fixer round 2, verify) */
.hud-play > .money {
  position: absolute;
  left: 1.6em;
  top: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  min-width: 15.5em;
}
.money .wallet {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.45em 0.9em 0.5em;
}
.money .wallet .amount { font-size: 2.3em; color: var(--accent); text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.35); }
.money .wallet .amount.neg { color: var(--bad); }
.money .wallet .label { font-size: 0.8em; color: var(--cream-dim); letter-spacing: 0.12em; text-transform: uppercase; }
.money .wallet .delta {
  margin-left: auto;
  font-family: var(--display);
  font-size: 1.15em;
  color: var(--good);
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.25s, transform 0.25s;
}
.money .wallet .delta.show { opacity: 1; transform: none; }
.money .wallet .delta.neg { color: var(--bad); }
.quota { padding: 0.65em 0.9em 0.75em; }
.quota .top { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.quota .title { font-size: 0.8em; letter-spacing: 0.14em; color: var(--cream-dim); text-transform: uppercase; }
.quota .nums { font-family: var(--display); font-size: 1.15em; }
.quota .nums b { color: var(--quota); font-weight: 400; }
.quota .nums b.neg { color: var(--bad); }
.quota .bar > i { background: linear-gradient(90deg, var(--quota-2), var(--quota)); }
.quota .bar.met > i { background: linear-gradient(90deg, #5fc46a, var(--good)); }
/* (round 5a) the quota check at the lever */
.quota .note { margin-top: 0.45em; font-size: 0.8em; font-weight: 600; color: var(--quota); letter-spacing: 0.02em; }
.quota .note.warned { color: var(--bad); animation: blink 0.9s steps(2) infinite; }
.quota.check { box-shadow: var(--shadow), 0 0 0 0.12em var(--quota); }
.quota .sub { margin-top: 0.4em; font-size: 0.82em; color: var(--cream-dim); display: flex; justify-content: space-between; }
.quota .pips { display: flex; gap: 0.3em; }
.quota .pips i { width: 0.62em; height: 0.62em; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.quota .pips i.done { background: var(--accent); }
.quota .pips i.now { background: var(--cream); box-shadow: 0 0 0 0.16em rgba(255, 243, 223, 0.25); }

.bar {
  position: relative;
  height: 0.72em;
  margin-top: 0.45em;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 0.08em 0.2em rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width 0.25s ease-out;
}
.bar > i::after {
  content: '';
  position: absolute;
  inset: 0.12em 0.4em auto 0.4em;
  height: 0.16em;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.35);
}
.bar.met > i { background: linear-gradient(90deg, #5fc46a, var(--good)); }

.cartpanel {
  position: absolute;
  right: 1.6em;
  top: 1.3em;
  width: 16.5em;
  padding: 0.7em 0.9em 0.8em;
}
.cartpanel .row { display: flex; align-items: center; gap: 0.6em; }
.cartpanel svg { width: 2.1em; height: 2.1em; flex: none; }
.cartpanel .load { font-family: var(--display); font-size: 1.45em; }
.cartpanel .load b { color: var(--accent); font-weight: 400; }
.cartpanel .load.full b { color: var(--bad); }
.cartpanel .label { font-size: 0.78em; letter-spacing: 0.14em; color: var(--cream-dim); text-transform: uppercase; }
.cartpanel .slots { display: flex; flex-wrap: wrap; gap: 0.22em; margin: 0.5em 0 0.15em; }
.cartpanel .slots i { width: 0.78em; height: 0.78em; border-radius: 0.22em; background: rgba(255, 255, 255, 0.13); }
.cartpanel .slots i.on { background: var(--accent); }
.cartpanel .slots i.junk { background: #9a8f88; }
.cartpanel .state { display: flex; justify-content: space-between; align-items: center; margin-top: 0.45em; gap: 0.5em; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.18em 0.6em;
  border-radius: 99px;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.12);
}
.chip.hold { background: #3e7bd6; }
.chip.hopper { background: #d6453e; animation: blink 0.6s steps(2) infinite; }
.chip.rolling { background: rgba(255, 196, 107, 0.25); color: var(--accent); }
.chip.docked { background: rgba(139, 227, 143, 0.22); color: var(--good); }
.cartpanel .dist { font-size: 0.86em; color: var(--cream-dim); white-space: nowrap; }
.cartpanel .dist b { color: var(--cream); font-weight: 700; }
.cartpanel .dist.near { color: #ffb0a6; }
.cartpanel .dist.near b { color: var(--bad); animation: blink 0.9s steps(2) infinite; }
.cartpanel .track { height: 0.32em; margin-top: 0.5em; border-radius: 99px; background: rgba(0, 0, 0, 0.35); position: relative; }
.cartpanel .track i { position: absolute; top: 50%; width: 0.7em; height: 0.7em; margin: -0.35em 0 0 -0.35em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0.5em var(--accent); }
.cartpanel .track::after { content: ''; position: absolute; right: -0.1em; top: 50%; width: 0.5em; height: 0.9em; margin-top: -0.45em; border-radius: 0.15em; background: var(--cream); }

.vitals {
  position: absolute;
  left: 1.6em;
  bottom: 1.4em;
  width: 19em;
  padding: 0.7em 0.9em 0.85em;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}
.vital { display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; gap: 0.55em; }
.vital svg { width: 1.45em; height: 1.45em; }
.vital .bar { margin: 0; height: 0.95em; }
.vital .val { font-family: var(--display); font-size: 1.05em; min-width: 2.2em; text-align: right; }
.vital.hp .bar > i { background: linear-gradient(90deg, #e6453e, var(--hp-2)); }
.vital.hp.low .bar { animation: lowpulse 0.8s ease-in-out infinite; }
/* a hugger drinks: the bar flashes, the heart races (round 3) */
.vital.hp.drain .bar { animation: hpdrain 0.5s ease-in-out infinite; }
.vital.hp.drain .bar > i { animation: hpdrainfill 0.5s ease-in-out infinite; }
.vital.hp.drain svg { animation: heartrace 0.5s ease-in-out infinite; }
.vital.hp.drain .val { color: #ff9a8a; animation: blink 0.5s steps(2) infinite; }
/* healed (a Medkit, the rescue team): the fill flashes green and the bar glows */
.vital.hp.heal .bar { animation: hphealglow 0.9s ease-out; }
.vital.hp.heal .bar > i { animation: hpheal 0.9s ease-out; }
/* the station's low-health hint, over the vitals (round 3: the stations no longer heal) */
.vitals .lowhp {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.55em);
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.38em 1.05em 0.38em 0.45em;
  border-radius: 99px;
  background: rgba(120, 26, 22, 0.86);
  border: 1px solid rgba(255, 130, 110, 0.4);
  box-shadow: 0 0.35em 1.2em rgba(40, 6, 4, 0.45);
  white-space: nowrap;
  font-weight: 600;
  animation: lowhint 1.6s ease-in-out infinite;
}
.vitals .lowhp .ico svg { display: block; width: 1.7em; height: 1.7em; filter: drop-shadow(0 0.08em 0.1em rgba(0, 0, 0, 0.4)); }
.vitals .lowhp b { color: #ffb8aa; font-weight: 700; }
.vital.st .bar > i { background: linear-gradient(90deg, var(--stam), var(--stam-2)); transition: width 0.08s linear; }
.vital.st.tired .bar > i { background: linear-gradient(90deg, #b8402e, #ff7a4a); }
.vital.st .tag {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fff;
  opacity: 0;
}
.vital.st.tired .tag { opacity: 1; animation: blink 0.7s steps(2) infinite; }
.vital .marker { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.45); }

.tools {
  position: absolute;
  right: 1.6em;
  bottom: 1.4em;
  display: flex;
  gap: 0.6em;
  align-items: flex-end;
}
.tool {
  position: relative;
  width: 6.6em;
  padding: 0.5em 0.6em 0.55em;
  text-align: center;
  opacity: 0.55;
  transform: scale(0.92);
  transform-origin: bottom center;
  transition: opacity 0.2s, transform 0.2s, border-color 0.2s;
}
.tool.on { opacity: 1; transform: none; border-color: var(--accent); }
.tool svg { width: 3.4em; height: 2.9em; display: block; margin: 0 auto 0.1em; filter: drop-shadow(0 0.08em 0.1em rgba(0, 0, 0, 0.4)); }
.tool .name { font-size: 0.82em; font-weight: 700; letter-spacing: 0.04em; }
.tool .key { position: absolute; left: -0.55em; top: -0.55em; font-size: 0.74em; }
.tool .ammo { font-family: var(--display); font-size: 1em; color: var(--accent); margin-top: 0.1em; }
.tool .ammo.empty { color: var(--bad); animation: blink 0.6s steps(2) infinite; }

/* ----------------------------------------------------------------------------------------- centre */
.xhair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.xhair .dot {
  position: absolute;
  left: -0.19em;
  top: -0.19em;
  width: 0.38em;
  height: 0.38em;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 0.09em rgba(0, 0, 0, 0.45);
  opacity: 0.9;
  transition: transform 0.12s;
}
.xhair .ring {
  position: absolute;
  left: -0.9em;
  top: -0.9em;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  border: 0.14em solid var(--cream);
  box-shadow: 0 0 0 0.08em rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s, transform 0.15s;
}
.xhair.focus .ring { opacity: 0.85; transform: none; }
.xhair.focus .dot { transform: scale(0.7); }
.xhair .hit { position: absolute; left: 0; top: 0; opacity: 0; }
.xhair .hit i {
  position: absolute;
  width: 0.85em;
  height: 0.17em;
  margin: -0.085em 0 0 -0.425em;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.6);
}
.xhair .hit i:nth-child(1) { transform: rotate(45deg) translateX(-0.95em); }
.xhair .hit i:nth-child(2) { transform: rotate(135deg) translateX(-0.95em); }
.xhair .hit i:nth-child(3) { transform: rotate(225deg) translateX(-0.95em); }
.xhair .hit i:nth-child(4) { transform: rotate(315deg) translateX(-0.95em); }
.xhair .hit.alien i { background: #ff6a5a; }
.xhair .hit.kill i { background: #ff3a2a; width: 1.15em; }
.xhair .hit.go { animation: hitmark 0.28s ease-out; }
.xhair.pulse .dot { animation: dotpulse 0.2s ease-out; }
/* a throw's wind-up: a ring filling clockwise, gold-orange at full power, the cart's distance under it */
.xhair .power {
  position: absolute;
  left: -1.35em;
  top: -1.35em;
  width: 2.7em;
  height: 2.7em;
  border-radius: 50%;
  background: conic-gradient(var(--pw-color, var(--cream)) calc(var(--pw, 0) * 1turn), rgba(255, 255, 255, 0.14) 0);
  -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 59% 72%, transparent 75%);
  mask: radial-gradient(circle, transparent 0 56%, #000 59% 72%, transparent 75%);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.1s, transform 0.1s;
}
.xhair.charging .power { opacity: 0.95; transform: none; }
.xhair.full .power { --pw-color: #ffb347; animation: powerfull 0.45s ease-in-out infinite alternate; }
.xhair .pdist {
  position: absolute;
  left: 0;
  top: 1.75em;
  transform: translateX(-50%);
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
  color: var(--cream);
  text-shadow: 0 0 0.35em rgba(0, 0, 0, 0.95);
  opacity: 0;
  transition: opacity 0.1s;
}
.xhair.charging .pdist { opacity: 0.95; }
.xhair .pdist.long { color: #ffc861; }
/* a shot that dropped into the tub: a big word over the view, the distance and the bonus under it */
.shotpop {
  position: absolute;
  left: 50%;
  top: 39%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
}
.shotpop b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.4em;
  letter-spacing: 0.04em;
  color: var(--cream);
  text-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.55), 0 0 0.6em rgba(0, 0, 0, 0.6);
}
.shotpop small { display: block; margin-top: 0.15em; font-size: 1em; font-weight: 600; color: var(--cream); text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9); }
.shotpop.tier1 b { color: #ffc861; font-size: 3em; }
.shotpop.tier2 b { color: #ff9a3c; font-size: 3.6em; }
.shotpop.tier1 small, .shotpop.tier2 small { color: #ffe2a8; }
.shotpop.go { animation: shotpop 1.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes shotpop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  22% { transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -66%) scale(0.96); }
}
@keyframes powerfull { from { filter: brightness(1); } to { filter: brightness(1.45); } }

.prompt {
  position: absolute;
  left: 50%;
  top: 59%;
  transform: translateX(-50%);
  display: flex;
  gap: 1.1em;
  padding: 0.45em 0.9em 0.45em 0.55em;
  border-radius: 99px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s;
}
.prompt.show { opacity: 1; }
/* R7-MOLE-FIX (F2): a Mole's driver sees its hood, its wheel and its cone below the crosshair: his bar goes above it */
.prompt.driving { top: 36%; }
/* R7-BILLIARDS (fixer, V8): a pool shooter's aim line runs from the cue ball (below the crosshair) to the crosshair: while
   it shows, his bar sits at the screen's foot between the vitals and the tools, over the new-player tip's place */
.prompt.aiming { top: auto; bottom: 4.6em; }
/* R7-BILLIARDS (residuals, R-HINTBAR-1): the bar (40 em) fits between the vitals and the tools only on a window at least
   about 87 em across (the HUD sizes by the window's height: 3:2 and wider in 1.72vh type, 1050 px and wider in the
   12 px floor's). On a narrower one (4:3, a half screen) it sat on the HP and the first tool slot: there it goes over
   them both and over the low-health pill's place (10.2 em up) */
@media (max-aspect-ratio: 3/2), (max-width: 1050px) {
  .prompt.aiming { bottom: 10.7em; }
}
.prompt .hint { display: flex; align-items: center; gap: 0.55em; font-weight: 600; font-size: 1.05em; }

.toasts {
  position: absolute;
  left: 50%;
  top: 1.4em;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
}
/* #hud-root in front: a toast is also a .card, and '#hud-root .card' (an id) would win over plain classes */
#hud-root .toast {
  padding: 0.45em 1.15em;
  border-radius: 99px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  animation: toastin 0.22s ease-out both;
}
#hud-root .toast.out { animation: toastout 0.35s ease-in forwards; }
#hud-root .toast.warn { background: rgba(140, 34, 24, 0.82); border-color: rgba(255, 120, 100, 0.35); }
#hud-root .toast.good { background: rgba(28, 98, 52, 0.8); border-color: rgba(140, 240, 150, 0.3); }
#hud-root .toast.money { background: rgba(110, 76, 14, 0.82); border-color: rgba(255, 210, 120, 0.35); }
#hud-root .toast.quota { background: rgba(18, 60, 104, 0.82); border-color: rgba(127, 216, 255, 0.35); }

/* (round 5a) a grind's or a sale's pop-up under the crosshair */
.cashpop {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, 0);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
}
.cashpop b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.3em;
  letter-spacing: 0.03em;
  text-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.55), 0 0 0.6em rgba(0, 0, 0, 0.6);
}
.cashpop small { display: block; font-size: 0.95em; font-weight: 600; color: var(--cream); text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9); }
.cashpop.k-quota b { color: var(--quota); }
.cashpop.k-money b { color: var(--accent); }
.cashpop.k-junk b { color: #b8aea4; font-size: 1.7em; }
/* R6-GAMBLER: the gambler's verdict */
.cashpop.k-win b { color: #5dff98; }
.cashpop.k-lose b { color: #ff5a46; }
.cashpop.go { animation: cashpop 1.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes cashpop {
  0% { opacity: 0; transform: translate(-50%, 0.6em) scale(0.6); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  26% { transform: translate(-50%, 0) scale(1); }
  70% { opacity: 1; transform: translate(-50%, -0.9em) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -1.6em) scale(0.96); }
}

/* one-time tips for a new player: bottom centre, between the vitals and the tools */
#hud-root .tip {
  position: absolute;
  left: 50%;
  bottom: 1.6em;
  transform: translateX(-50%);
  max-width: min(36em, 52vw);
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.6em 1.15em 0.6em 0.7em;
  border-radius: 99px;
  font-weight: 600;
  font-size: 1.02em;
  background: var(--panel-strong);
  animation: tipin 0.3s ease-out both;
}
#hud-root .tip.out { animation: tipout 0.4s ease-in forwards; }
.tip .tag {
  flex: none;
  padding: 0.12em 0.55em;
  border-radius: 99px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.16em;
  background: var(--accent);
  color: var(--ink);
}

.banner {
  position: absolute;
  left: 50%;
  top: 19%;
  transform: translateX(-50%);
  padding: 0.6em 3.2em 0.9em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(10, 6, 24, 0.55) 0%, rgba(10, 6, 24, 0.3) 45%, rgba(10, 6, 24, 0) 72%);
}
.banner.show { animation: bannerin 3.2s ease-out forwards; }
.banner .big { font-family: var(--display); font-size: 3.6em; color: var(--cream); text-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.4), 0 0 0.6em rgba(0, 0, 0, 0.35); }
.banner .small { font-size: 1.05em; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.6); }

/* ----------------------------------------------------------------------------------------- countdown / alarm */
.alarm {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 22vh rgba(255, 40, 24, 0.6);
  opacity: 0;
}
.alarm.on { animation: alarm 1s ease-in-out infinite; }
.countdown {
  position: absolute;
  left: 50%;
  top: 11%;
  transform: translateX(-50%);
  padding: 0.6em 3.5em 1em;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(40, 4, 8, 0.55) 0%, rgba(40, 4, 8, 0.3) 45%, rgba(40, 4, 8, 0) 72%);
}
.countdown .head {
  font-family: var(--display);
  font-size: 2.6em;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 0.06em 0 #7a1410, 0 0 0.5em rgba(255, 60, 40, 0.75);
  animation: shake 0.5s ease-in-out infinite;
}
.countdown .num {
  font-family: var(--display);
  font-size: 8.5em;
  line-height: 1;
  color: #fff;
  /* a dark halo first: the number stays readable over the lit station sign behind it */
  text-shadow: 0 0.04em 0 #8a1810, 0 0 0.06em rgba(20, 4, 8, 0.9), 0 0 0.35em rgba(255, 70, 40, 0.85);
}
.countdown .num.tick { animation: numpop 0.9s ease-out; }
/* the sub-line sits on its own plate: at running distance it lands on the DEEPWELL STATION sign */
.countdown .sub {
  display: inline-block;
  margin-top: 0.35em;
  padding: 0.28em 1em 0.32em;
  border-radius: 99px;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--cream);
  background: rgba(30, 6, 12, 0.8);
  box-shadow: 0 0.25em 0.9em rgba(8, 2, 6, 0.45);
}
/* (lead, round 4.1) inside before the shut: they follow you in, so the line warns (amber) instead of the old green 'safe' */
.countdown .sub.hold { color: var(--accent); }
/* (fixer) safe inside the station: small, at the top, so the doorway (and the rushers outside it) stays in view */
.countdown.inside {
  top: 2.5%;
  padding: 0.3em 2em 0.4em;
  transform: translateX(-50%) scale(0.5);
  transform-origin: 50% 0;
  background: none;
}
.countdown.inside .head { animation: none; }

/* (round 4.1) the decontamination: a hazard-striped card at the top, red while it runs, green once it is complete */
.decon {
  position: absolute;
  left: 50%;
  top: 4%;
  transform: translateX(-50%);
  min-width: 21em;
  padding: 0.55em 1.6em 0.75em;
  text-align: center;
  border-radius: 0.6em;
  background:
    repeating-linear-gradient(135deg, rgba(255, 196, 40, 0.9) 0 0.55em, rgba(24, 16, 10, 0.9) 0.55em 1.1em) top / 100% 0.42em no-repeat,
    repeating-linear-gradient(135deg, rgba(255, 196, 40, 0.9) 0 0.55em, rgba(24, 16, 10, 0.9) 0.55em 1.1em) bottom / 100% 0.42em no-repeat,
    rgba(54, 6, 10, 0.82);
  box-shadow: 0 0 1.6em rgba(255, 40, 30, 0.45), 0 0.3em 1.2em rgba(0, 0, 0, 0.45);
  animation: deconin 0.28s cubic-bezier(0.2, 1.4, 0.4, 1) both, deconpulse 0.9s ease-in-out infinite;
}
.decon .head {
  margin-top: 0.25em;
  font-family: var(--display);
  font-size: 2.1em;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0.06em 0 #7a1410, 0 0 0.5em rgba(255, 60, 40, 0.8);
}
.decon .sub {
  margin-top: 0.1em;
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd9c8;
}
.decon .bar {
  height: 0.32em;
  margin: 0.5em auto 0.1em;
  width: 82%;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.decon .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #ff6a4a, #ffd04a); }
.decon.done {
  background:
    repeating-linear-gradient(135deg, rgba(120, 255, 170, 0.85) 0 0.55em, rgba(10, 30, 18, 0.9) 0.55em 1.1em) top / 100% 0.42em no-repeat,
    repeating-linear-gradient(135deg, rgba(120, 255, 170, 0.85) 0 0.55em, rgba(10, 30, 18, 0.9) 0.55em 1.1em) bottom / 100% 0.42em no-repeat,
    rgba(8, 44, 26, 0.84);
  box-shadow: 0 0 1.8em rgba(110, 255, 170, 0.45), 0 0.3em 1.2em rgba(0, 0, 0, 0.45);
  animation: deconin 0.32s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.decon.done .head { text-shadow: 0 0.06em 0 #0e5a2e, 0 0 0.55em rgba(90, 255, 160, 0.85); }
.decon.done .sub { color: #c8ffd8; }
.decon.done .bar i { background: linear-gradient(90deg, #5aff9a, #d6ffe6); }
@keyframes deconin { from { transform: translateX(-50%) scale(1.25); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes deconpulse { 50% { box-shadow: 0 0 2.6em rgba(255, 40, 30, 0.75), 0 0.3em 1.2em rgba(0, 0, 0, 0.45); } }
/* the mist on the visor while the room is sprayed: a pale haze thicker at the edges, and droplets (a canvas) */
.mist { position: absolute; inset: 0; pointer-events: none; }
.mist .fog, .mist .drops, .mist .clean { position: absolute; inset: 0; opacity: 0; }
.mist .clean { background: radial-gradient(ellipse at 50% 40%, rgba(214, 255, 228, 0.55) 0%, rgba(150, 255, 190, 0.28) 60%, rgba(120, 240, 170, 0.5) 100%); mix-blend-mode: screen; }
.mist .fog {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(226, 246, 234, 0.42) 0%, rgba(214, 240, 226, 0.62) 55%, rgba(200, 232, 216, 0.88) 100%);
}
.mist .drops canvas { width: 100%; height: 100%; display: block; }

/* (fixer) a crack out of view: a chevron at the edge of the view pointing at it (hud.js updateThreats) */
.threats { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.threat {
  position: absolute;
  left: -0.9em;
  top: -1.05em;
  width: 1.8em;
  height: 2.1em;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 0.35em currentColor) drop-shadow(0 0.1em 0.2em rgba(0, 0, 0, 0.8));
}
/* a narrow notched arrowhead: a near-equilateral triangle turned by 60 degrees looks like itself flipped, so it did
   not say which way at a side angle */
.threat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%);
  animation: threatpulse 0.3s ease-in-out infinite alternate;
}
@keyframes threatpulse { from { opacity: 0.55; } to { opacity: 1; } }

/* ----------------------------------------------------------------------------------------- appraisal / quota */
.appraisal {
  position: absolute;
  right: 2em;
  top: 50%;
  width: 19em;
  transform: translateY(-46%);
  padding: 0.9em 1em 0.95em;
}
.appraisal h3 { margin: 0 0 0.55em; font-family: var(--display); font-weight: 400; font-size: 1.5em; letter-spacing: 0.03em; }
.appraisal h3 small { display: block; font-family: 'Fredoka', system-ui, sans-serif; font-size: 0.5em; letter-spacing: 0.18em; color: var(--cream-dim); }
.appraisal .rows { display: flex; flex-direction: column; gap: 0.18em; max-height: 46vh; overflow: hidden; }
.appraisal .row { display: flex; align-items: center; gap: 0.6em; padding: 0.2em 0.35em; border-radius: 0.45em; animation: rowin 0.22s ease-out both; }
.appraisal .row:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
.appraisal .row .gem { width: 0.8em; height: 0.8em; border-radius: 0.2em; transform: rotate(45deg); flex: none; }
.appraisal .row .k { flex: 1; text-transform: capitalize; }
.appraisal .row .v { font-family: var(--display); font-size: 1.1em; color: var(--accent); }
.appraisal .row .v.zero { color: var(--cream-dim); }
.appraisal .empty { color: var(--cream-dim); font-style: italic; padding: 0.3em 0; }
.appraisal .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.6em; padding-top: 0.55em; border-top: 1px solid var(--line); }
.appraisal .total .k { letter-spacing: 0.16em; font-size: 0.85em; color: var(--cream-dim); }
.appraisal .total .v { font-family: var(--display); font-size: 2em; color: var(--accent); }
.appraisal .fee { font-size: 0.86em; color: var(--bad); margin-top: 0.35em; text-align: right; }

.quota-result {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  padding: 1.8em 5em 2em;
  text-align: center;
  /* dense enough in the middle that the room's quota board behind it does not print through the headline */
  background: radial-gradient(ellipse at center, rgba(10, 6, 24, 0.9) 0%, rgba(10, 6, 24, 0.72) 48%, rgba(10, 6, 24, 0) 76%);
  animation: stampin 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.quota-result .big {
  font-family: var(--display);
  font-size: 5.2em;
  line-height: 1;
  color: var(--good);
  text-shadow: 0 0.05em 0 #1e5a28, 0 0 0.07em rgba(6, 4, 16, 0.9), 0 0 0.5em rgba(120, 255, 140, 0.45);
}
.quota-result.miss .big { color: var(--bad); text-shadow: 0 0.05em 0 #6a1410, 0 0 0.07em rgba(16, 4, 6, 0.9), 0 0 0.5em rgba(255, 80, 60, 0.5); }
.quota-result .nums { margin-top: 0.4em; font-family: var(--display); font-size: 1.7em; }
.quota-result .sub { margin-top: 0.4em; font-size: 1.05em; color: var(--cream-dim); letter-spacing: 0.08em; }

/* ----------------------------------------------------------------------------------------- down / hurt / flash */
.hurt { position: absolute; inset: 0; box-shadow: inset 0 0 16vh rgba(255, 30, 30, 0.75); opacity: 0; }
.down {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, rgba(70, 0, 14, 0.15) 20%, rgba(40, 0, 10, 0.85) 100%);
  animation: fadein 0.6s ease-out both;
}
.down .box { text-align: center; }
.down .big { font-family: var(--display); font-size: 4.4em; color: #ff8a7a; text-shadow: 0 0.05em 0 #4a0a08, 0 0 0.5em rgba(255, 60, 40, 0.5); }
.down .sub { margin-top: 0.3em; font-size: 1.25em; color: var(--cream); }
.down .dots { margin-top: 1em; display: flex; gap: 0.5em; justify-content: center; }
.down .dots i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--cream); animation: dots 1.2s ease-in-out infinite; }
.down .dots i:nth-child(2) { animation-delay: 0.2s; }
.down .dots i:nth-child(3) { animation-delay: 0.4s; }
.down .eta { margin-top: 0.8em; font-size: 0.95em; color: var(--cream-dim); }
.flash { position: absolute; inset: 0; background: #07060c; opacity: 0; }
.flash.go { animation: flash 0.9s ease-in-out; }
/* R6-MINES (round 6): a jumpscare's flash: a sharp, short sickly-white burst out of the dark that drops away at once */
.scare-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, rgba(236, 255, 214, 0.95) 0%, rgba(190, 255, 150, 0.7) 38%, rgba(60, 90, 40, 0.35) 75%, rgba(0, 0, 0, 0) 100%); }
.scare-flash.go { animation: scare-flash 0.38s cubic-bezier(0.1, 0.8, 0.3, 1); }
@keyframes scare-flash { 0% { opacity: 0.92; } 25% { opacity: 0.55; } 100% { opacity: 0; } }

/* ----------------------------------------------------------------------------------------- the hugger (round 3) */
/* Its belly over the view (hud.js draws it): under every HUD card, a small breathing hole to see through. The skin is
   a canvas painted from the --hug-* colours (a little translucent, so the creature's close-up on the viewmodel camera,
   aliens.js, shows through it); the rim round the hole is an SVG. --hug-alpha scales the skin's opacity (under 1: the
   close-up reads through more of it). Shapes in the scaled groups (the rips) take their sizes in hole radii. */
.hug { --hug-alpha: 1; position: absolute; inset: 0; pointer-events: none; }
.hug .hugbody, .hug .skin, .hug .rim { position: absolute; inset: 0; width: 100%; height: 100%; }
.hug .rim { overflow: visible; }
.hug.go .hugbody { animation: hugslap 0.26s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.hug.go::after { content: ''; position: absolute; inset: 0; background: var(--hug-glow); opacity: 0; animation: hugflash 0.45s ease-out; }
.hug .b0 { stop-color: #fff8f0; }
.hug .b1 { stop-color: var(--hug-bead); }
.hug .b2 { stop-color: var(--hug-flesh); }
/* where the lip folds into the belly */
.hug .fold { fill: none; stroke: var(--hug-flesh); opacity: 0.45; }
.hug .pit { fill: var(--hug-flesh); opacity: 0.75; }
/* a rip: torn skin, the tunnel's warm light through the middle */
.hug .rd { fill: var(--hug-wound); stroke: var(--hug-skin); stroke-width: 0.022; stroke-linejoin: round; stroke-opacity: 0.7; }
.hug .rl { fill: #ffcf8a; opacity: 0.8; }
/* the lip's glow: three soft strokes (a blur filter would be redrawn every frame) */
.hug .glow { fill: none; stroke: var(--hug-glow); stroke-linejoin: round; }
.hug .glow.g3 { opacity: 0.1; }
.hug .glow.g2 { opacity: 0.16; }
.hug .glow.g1 { opacity: 0.3; }
.hug .lip { fill: none; stroke: var(--hug-lip); }
.hug .shine { fill: none; stroke: #fff6e0; stroke-linecap: round; opacity: 0.75; stroke-dasharray: 0.13 0.87; stroke-dashoffset: -0.79; }
.hug .shine.two { opacity: 0.45; stroke-dasharray: 0.05 0.95; stroke-dashoffset: -0.35; }
.hug .tear { fill: none; stroke: #ffe2a0; stroke-linecap: round; }
.hug .tearglow { fill: none; stroke: var(--accent); stroke-linecap: round; }
/* the tear prompt under the hole: the left button, the words, the progress */
.hugprompt {
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5em;
  padding: 0.55em 1.25em 0.8em 1em;
  border-radius: 1.1em;
  background: rgba(14, 8, 24, 0.74);
  border: 1px solid rgba(255, 236, 210, 0.16);
  box-shadow: 0 0.4em 1.6em rgba(4, 2, 10, 0.5);
  white-space: nowrap;
  animation: hugprompt 0.3s 0.12s ease-out both;
  transition: scale 0.12s;
}
.hugprompt .row { display: flex; align-items: center; gap: 0.65em; }
.hugprompt .mouse svg { display: block; width: 1.3em; height: 1.9em; filter: drop-shadow(0 0.08em 0.1em rgba(0, 0, 0, 0.5)); }
.hugprompt .mouse .lmb { animation: lmbpulse 0.9s ease-in-out infinite; }
.hugprompt .txt { font-family: var(--display); font-size: 1.55em; letter-spacing: 0.03em; color: var(--cream); text-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.45); }
.hugprompt .tbar { position: relative; height: 0.62em; border-radius: 99px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0.08em 0.2em rgba(0, 0, 0, 0.5); overflow: hidden; }
.hugprompt .tbar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent), #fff1c8); }
.hug.pulling .hugprompt { scale: 1.05; }
.hug.pulling .hugprompt .mouse .lmb { animation: none; fill: #ffe2a0; }
.hug.pulling .hugprompt .tbar { box-shadow: inset 0 0.08em 0.2em rgba(0, 0, 0, 0.5), 0 0 0.7em rgba(255, 196, 107, 0.55); }

/* ----------------------------------------------------------------------------------------- co-op (round 4) */
/* the crew panel under the quota: a row per teammate in their seat colour (--c), their HP under it, how far they are */
.crew { padding: 0.5em 0.75em 0.6em; display: flex; flex-direction: column; gap: 0.35em; }
.crew .mate {
  display: grid;
  grid-template-columns: 0.72em auto 1fr auto;
  column-gap: 0.45em;
  row-gap: 0.22em;
  align-items: center;
  padding: 0.18em 0.3em 0.22em;
  margin: 0 -0.3em;
  border-radius: 0.6em;
}
.crew .mate .dot { width: 0.72em; height: 0.72em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0.11em rgba(0, 0, 0, 0.35), 0 0 0.45em var(--c); }
.crew .mate .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8.5em; }
.crew .mate .st { font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); white-space: nowrap; }
.crew .mate .dist { font-size: 0.8em; color: var(--cream-dim); font-variant-numeric: tabular-nums; }
.crew .mate .bar { grid-column: 1 / -1; height: 0.42em; margin: 0; }
.crew .mate .bar > i { background: linear-gradient(90deg, #e6453e, var(--hp-2)); }
.crew .mate .rv { grid-column: 1 / -1; display: none; height: 0.3em; border-radius: 99px; background: rgba(0, 0, 0, 0.4); overflow: hidden; }
.crew .mate .rv.on { display: block; }
.crew .mate .rv i { display: block; width: 0; height: 100%; background: var(--good); }
.crew .mate.mdown { background: rgba(150, 28, 22, 0.42); animation: matedown 1s ease-in-out infinite; }
.crew .mate.mdown .st { color: #ffb8aa; }
.crew .mate.mhug .st { color: #ffcf6b; animation: blink 0.5s steps(2) infinite; }
.crew .mate.mlow .bar { animation: lowpulse 0.8s ease-in-out infinite; }
.crew .mate.maway { opacity: 0.45; }
.crew .mate.mhit { animation: matehit 0.45s ease-out; }
/* a teammate's name over their helmet (avatar.js places it every frame; it hides with this layer): red while down */
.nametag {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.16em 0.6em 0.2em 0.42em;
  border-radius: 99px;
  background: rgba(16, 12, 32, 0.6);
  border: 1px solid rgba(255, 243, 223, 0.14);
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  font-size: 0.86em;
  font-weight: 700;
  pointer-events: none;
  will-change: transform, opacity;
}
.nametag .dot { width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0.45em var(--c); }
.nametag .st { font-size: 0.78em; letter-spacing: 0.1em; padding: 0.04em 0.45em; border-radius: 99px; background: rgba(255, 255, 255, 0.14); }
.nametag .st:empty { display: none; }
.nametag[data-kind='down'] { background: rgba(140, 24, 18, 0.84); border-color: rgba(255, 120, 100, 0.5); animation: tagpulse 0.9s ease-in-out infinite; }
.nametag[data-kind='down'] .st { background: #ff5f57; color: #fff; }
.nametag[data-kind='hug'] .st { background: #ffc46b; color: var(--ink); }
/* reviving a teammate: the throw's ring at the crosshair, green */
.xhair.revive .power { --pw-color: var(--good); }
/* the down screen: a teammate getting me back up */
.down .rvbar { width: 14em; height: 0.7em; margin: 0.9em auto 0; border-radius: 99px; background: rgba(0, 0, 0, 0.45); overflow: hidden; box-shadow: 0 0 0 0.12em rgba(139, 227, 143, 0.35); }
.down .rvbar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #5fc46a, var(--good)); transition: width 0.1s linear; }
/* a boulder's two slots in the cart panel */
.cartpanel .slots i.big.on { background: linear-gradient(180deg, #ffe2a0, var(--accent)); box-shadow: 0 0 0.35em rgba(255, 196, 107, 0.6); }
@keyframes matedown { 50% { background: rgba(190, 40, 30, 0.62); } }
@keyframes matehit { 0% { background: rgba(255, 70, 60, 0.55); } 100% { background: transparent; } }
@keyframes tagpulse { 50% { box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.35), 0 0 0 0.22em rgba(255, 95, 87, 0.45); } }

/* ----------------------------------------------------------------------------------------- click to play */
.clickhint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 2.2em);
  padding: 0.5em 1.1em;
  border-radius: 99px;
  font-weight: 700;
  letter-spacing: 0.05em;
  animation: breathe 2s ease-in-out infinite;
}

/* ----------------------------------------------------------------------------------------- menus */
.menu {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  display: grid;
  place-items: center;
}
.menu.pause { background: radial-gradient(ellipse at center, rgba(14, 10, 30, 0.45), rgba(8, 6, 18, 0.82)); backdrop-filter: blur(5px); animation: fadein 0.2s both; }
.menu .panel { width: min(30em, 92vw); padding: 1.4em 1.6em 1.5em; text-align: center; border-radius: 1.4em; }
.menu .panel.wide { width: min(38em, 94vw); }
.menu h2 { margin: 0 0 0.8em; font-family: var(--display); font-weight: 400; font-size: 2.4em; letter-spacing: 0.04em; }
.menu .pinfo { margin: -1.2em 0 1.2em; font-size: 0.86em; color: var(--cream-dim); letter-spacing: 0.04em; }
.menu .pinfo:empty { display: none; }
.menu .stack { display: flex; flex-direction: column; gap: 0.6em; align-items: stretch; }
.menu .phint { margin-top: 0.9em; font-size: 0.9em; color: var(--accent); letter-spacing: 0.03em; }
.menu .phint:empty { display: none; }
.btn.nudge { animation: nudge 0.5s ease-out; }
.btn {
  pointer-events: auto;
  font: inherit;
  font-family: var(--display);
  font-size: 1.35em;
  letter-spacing: 0.03em;
  padding: 0.5em 1.4em 0.55em;
  border: none;
  border-radius: 99px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 0.2em 0 rgba(0, 0, 0, 0.38);
  cursor: pointer;
  transition: transform 0.12s, background 0.12s, box-shadow 0.12s;
}
.btn:hover, .btn:focus-visible { transform: translateY(-0.08em); background: var(--accent); outline: none; }
.btn:active { transform: translateY(0.1em); box-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.38); }
.btn.ghost { background: rgba(255, 255, 255, 0.1); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover, .btn.ghost:focus-visible { background: rgba(255, 255, 255, 0.2); }
.btn.small { font-size: 1em; padding: 0.4em 1.1em 0.45em; }
.btn[disabled] { cursor: default; transform: none; background: rgba(255, 255, 255, 0.1); color: rgba(255, 243, 223, 0.5); box-shadow: inset 0 0 0 1px var(--line); }

.settings { display: flex; flex-direction: column; gap: 1em; text-align: left; }
.setting { display: grid; grid-template-columns: 9em 1fr 3.4em; align-items: center; gap: 0.8em; }
.setting label { font-weight: 600; }
.setting output { font-family: var(--display); text-align: right; color: var(--accent); }
.setting input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.5em;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: auto;
  cursor: pointer;
}
.setting input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0.12em 0 rgba(0, 0, 0, 0.4);
}
.segs { display: flex; gap: 0.4em; grid-column: 2 / 4; }
.seg {
  flex: 1;
  pointer-events: auto;
  font: inherit;
  font-weight: 700;
  padding: 0.5em 0.4em;
  border-radius: 0.7em;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.07);
  color: var(--cream);
  cursor: pointer;
}
.seg small { display: block; font-weight: 500; font-size: 0.72em; color: var(--cream-dim); }
.seg.on { background: var(--cream); color: var(--ink); border-color: transparent; }
.seg.on small { color: rgba(29, 23, 51, 0.6); }
.menu .back { margin-top: 1.3em; }

.controls { display: grid; grid-template-columns: auto 1fr; gap: 0.55em 1.1em; text-align: left; align-items: center; }
.controls .keys { display: flex; gap: 0.3em; justify-content: flex-end; flex-wrap: wrap; }
.controls .what { color: var(--cream); }

/* title: a left column over a darkened left third; the station stays visible on the right */
.menu.title {
  place-items: stretch;
  background:
    linear-gradient(90deg, rgba(10, 7, 26, 0.88) 0%, rgba(10, 7, 26, 0.62) 30%, rgba(10, 7, 26, 0.12) 58%, rgba(10, 7, 26, 0) 75%),
    linear-gradient(180deg, rgba(8, 5, 20, 0.35), rgba(8, 5, 20, 0) 30%, rgba(8, 5, 20, 0) 65%, rgba(8, 5, 20, 0.6));
}
.title .center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2em;
  padding: 0 0 4vh 7vw;
}
.title .company { font-size: 1em; letter-spacing: 0.42em; text-transform: uppercase; color: var(--cream-dim); text-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.6); }
.title .logo {
  position: relative;
  font-family: var(--display);
  font-size: 9.5em;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: linear-gradient(180deg, #fff1c8 0%, var(--accent) 48%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.045em 0 #2a1a3e) drop-shadow(0 0.1em 0.25em rgba(0, 0, 0, 0.45));
  animation: logoin 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.title .tag { margin-top: 0.3em; font-size: 1.15em; color: var(--cream); text-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.7); }
/* ADMIN (SHAFT7ADMIN identity): the build's badge under the title's logo and at the top of the pause menu */
.admin-badge {
  display: inline-block;
  padding: 0.3em 0.95em 0.34em;
  border-radius: 99px;
  background: #e0304f;
  color: #fff6ec;
  font-family: var(--display);
  font-size: 1.05em;
  letter-spacing: 0.14em;
  white-space: nowrap;
  box-shadow: 0 0.16em 0 rgba(0, 0, 0, 0.38), inset 0 0 0 0.12em rgba(255, 255, 255, 0.22);
}
.title .admin-badge { margin: 0.55em 0 0.25em 0.2em; font-size: 1.35em; animation: fadein 0.6s 0.4s both; }
.menu.pause .admin-badge { margin: 0 0 0.9em; }
.title .buttons { margin-top: 2.2em; display: flex; flex-direction: column; gap: 0.7em; width: 16em; }
.title .buttons .btn:first-child { font-size: 1.7em; }
.title .foot {
  position: absolute;
  left: 7vw;
  right: 0;
  bottom: 1.4em;
  text-align: left;
  font-size: 0.78em;
  color: var(--cream-dim);
  text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.8);
}
.title .sub-panel { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 6, 18, 0.55); backdrop-filter: blur(4px); }

/* fired */
.menu.fired { background: radial-gradient(ellipse at center, rgba(40, 8, 12, 0.7), rgba(10, 4, 8, 0.94)); animation: fadein 0.6s both; }
.fired .stamp {
  display: inline-block;
  font-family: var(--display);
  font-size: 6em;
  line-height: 1;
  padding: 0.08em 0.3em 0.12em;
  color: #ff5f57;
  border: 0.09em solid #ff5f57;
  border-radius: 0.14em;
  transform: rotate(-6deg);
  text-shadow: 0 0 0.3em rgba(255, 80, 60, 0.4);
  box-shadow: 0 0 0.6em rgba(255, 80, 60, 0.25), inset 0 0 0.4em rgba(255, 80, 60, 0.2);
  animation: stampin 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.15s both;
}
.fired .memo { margin: 1.2em auto 0; max-width: 28em; font-size: 1.05em; color: var(--cream-dim); }
.fired .stats { margin: 1.4em auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; max-width: 34em; }
.fired .stat { padding: 0.7em 0.5em; border-radius: 0.9em; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); }
.fired .stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.9em; color: var(--accent); }
.fired .stat span { font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
.fired .buttons { margin-top: 1.8em; display: flex; gap: 0.8em; justify-content: center; }

/* ----------------------------------------------------------------------------------------- shop */
.menu.shop { background: radial-gradient(ellipse at center, rgba(14, 10, 30, 0.35), rgba(8, 6, 18, 0.78)); backdrop-filter: blur(3px); animation: fadein 0.18s both; }
.shop .panel { width: min(52em, 96vw); text-align: left; padding: 1.3em 1.5em 1.4em; }
.shop .head { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1em; }
.shop .head h2 { margin: 0; font-size: 2.1em; }
.shop .head h2 small { display: block; font-family: 'Fredoka', system-ui, sans-serif; font-size: 0.38em; letter-spacing: 0.2em; color: var(--cream-dim); }
.shop .walletbox { text-align: right; }
.shop .walletbox .label { font-size: 0.75em; letter-spacing: 0.16em; color: var(--cream-dim); text-transform: uppercase; }
.shop .walletbox .amount { font-family: var(--display); font-size: 2em; color: var(--accent); }
.shop .walletbox .amount.neg { color: var(--bad); }
.shop .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 0.75em; }
.item {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 0.75em;
  row-gap: 0.25em;
  padding: 0.8em 0.85em 0.85em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  transition: background 0.15s, transform 0.15s;
}
.item:hover { background: rgba(255, 255, 255, 0.1); }
.item .icon { grid-row: 1 / 3; width: 3.2em; height: 3.2em; border-radius: 0.8em; background: rgba(0, 0, 0, 0.25); display: grid; place-items: center; }
.item .icon svg { width: 2.4em; height: 2.4em; }
.item .name { font-family: var(--display); font-size: 1.25em; letter-spacing: 0.02em; }
.item .desc { font-size: 0.86em; color: var(--cream-dim); line-height: 1.3; }
.item .foot { grid-column: 1 / 3; display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin-top: 0.45em; }
.item .tiers { display: flex; gap: 0.28em; }
.item .tiers i { width: 0.9em; height: 0.45em; border-radius: 99px; background: rgba(255, 255, 255, 0.16); }
.item .tiers i.on { background: var(--accent); }
.item .btn { font-size: 1.05em; padding: 0.35em 1em 0.42em; white-space: nowrap; flex: none; }
.item .need { flex: 1; font-size: 0.78em; line-height: 1.15; color: var(--bad); text-align: right; }
.item.maxed .btn { background: rgba(139, 227, 143, 0.2); color: var(--good); }
.item.bought { animation: bought 0.5s ease-out; }
/* the Medkit (round 3, repeatable): the player's HP beside its name, "Full" at full health */
.item.repeat .name { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5em; }
.item .hpnow { display: flex; align-items: baseline; gap: 0.25em; font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 0.62em; letter-spacing: 0.02em; color: var(--cream-dim); white-space: nowrap; }
.item .hpnow svg { width: 1.2em; height: 1.2em; align-self: center; }
.item .hpnow b { font-family: var(--display); font-weight: 400; font-size: 1.45em; color: var(--cream); }
.item .hpnow.low b { color: var(--hp); }
.item.full .btn { background: rgba(139, 227, 143, 0.2); color: var(--good); }
.shop .bottom { margin-top: 1.1em; display: flex; justify-content: space-between; align-items: center; color: var(--cream-dim); font-size: 0.88em; }

/* ----------------------------------------------------------------------------------------- animations */
@keyframes blink { 50% { opacity: 0.35; } }
@keyframes lowpulse { 50% { box-shadow: inset 0 0 0 0.12em rgba(255, 80, 70, 0.8); } }
@keyframes hitmark { 0% { opacity: 1; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1); } }
@keyframes dotpulse { 50% { transform: scale(1.8); } }
@keyframes toastin { from { opacity: 0; transform: translateY(-0.6em) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toastout { to { opacity: 0; transform: translateY(-0.4em); } }
@keyframes tipin { from { opacity: 0; transform: translate(-50%, 0.6em); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes tipout { to { opacity: 0; transform: translate(-50%, 0.4em); } }
@keyframes nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-0.3em); } 50% { transform: translateX(0.3em); } 75% { transform: translateX(-0.15em); } }
@keyframes bannerin {
  0% { opacity: 0; transform: translate(-50%, 0.6em); }
  12% { opacity: 1; transform: translate(-50%, 0); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -0.3em); }
}
@keyframes alarm { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes shake { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes numpop { 0% { transform: scale(1.6); opacity: 0; } 18% { transform: scale(0.94); opacity: 1; } 34% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes rowin { from { opacity: 0; transform: translateX(1em); } to { opacity: 1; transform: none; } }
@keyframes stampin { from { opacity: 0; transform: translate(-50%, -50%) scale(1.8) rotate(-6deg); } to { opacity: 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes dots { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-0.3em); } }
@keyframes flash { 0% { opacity: 0; } 35%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes breathe { 50% { opacity: 0.6; } }
@keyframes logoin { from { opacity: 0; transform: translateY(0.25em) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes bought { 0% { transform: scale(1); } 35% { transform: scale(1.04); background: rgba(255, 196, 107, 0.25); } 100% { transform: none; } }
@keyframes hpdrain { 50% { box-shadow: 0 0 0 0.14em rgba(255, 70, 60, 0.95), 0 0 0.9em rgba(255, 60, 50, 0.75); } }
@keyframes hpdrainfill { 50% { filter: brightness(1.75) saturate(1.2); } }
@keyframes heartrace { 0%, 100% { transform: scale(1); } 28% { transform: scale(1.3); } 52% { transform: scale(0.94); } }
@keyframes hphealglow { 0% { box-shadow: 0 0 0 0.16em rgba(139, 227, 143, 0.95), 0 0 1em rgba(120, 255, 140, 0.8); } 100% { box-shadow: 0 0 0 0 rgba(139, 227, 143, 0); } }
@keyframes hpheal { 0% { filter: hue-rotate(100deg) saturate(1.4) brightness(1.45); } 100% { filter: none; } }
@keyframes lowhint { 50% { box-shadow: 0 0.35em 1.2em rgba(40, 6, 4, 0.45), 0 0 0 0.18em rgba(255, 110, 90, 0.35); } }
@keyframes hugslap { 0% { opacity: 0; transform: scale(1.45) rotate(-4deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes hugflash { 0% { opacity: 0.32; } 100% { opacity: 0; } }
@keyframes hugprompt { from { opacity: 0; translate: 0 0.7em; } to { opacity: 1; translate: 0 0; } }
@keyframes lmbpulse { 50% { opacity: 0.35; } }
.fired .stamp { transform-origin: center; }
@keyframes stampin2 { from { opacity: 0; transform: scale(1.8) rotate(-6deg); } to { opacity: 1; transform: rotate(-6deg); } }
.fired .stamp { animation-name: stampin2; }

/* ----------------------------------------------------------------------------------------- (round 5b) the finale */
/* the daylight that floods the view at the top of the Hauler's climb (src/finale/hud.js) */
.finale-day {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 38%, #fffdf4 0%, #fff4dc 38%, #ffe2ae 100%);
}
/* the objective at the top: FINALE, CLEAR THE CAVERN, BOARD THE HAULER */
.finale-obj {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  animation: fadein 0.35s both;
}
.finale-obj .big { font-family: var(--display); font-size: 2.5em; letter-spacing: 0.05em; color: var(--cream); text-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.45), 0 0 0.7em rgba(0, 0, 0, 0.4); }
.finale-obj .sub { margin-top: 0.15em; font-size: 1.02em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0.1em 0.35em rgba(0, 0, 0, 0.7); }
.finale-obj.intro .big { font-size: 3.6em; }
.finale-obj.fight .big { color: #ffd6c8; }
.finale-obj.fight .sub { color: #ff9a7a; }
.finale-obj.clear .big { color: #c8ffd0; }
.finale-obj.board .big { color: #ffcf55; animation: breathe 1.4s ease-in-out infinite; }
.finale-obj.need .sub { color: #ff6f61; font-weight: 700; }
.finale-obj.ascent .big { font-size: 1.8em; }
/* the end screen: SURFACED into the daylight, or CREW LOST */
.menu.surfaced { background: radial-gradient(ellipse at center, rgba(255, 246, 226, 0.55), rgba(255, 222, 170, 0.92)); animation: fadein 0.8s both; }
.menu.surfaced.lost { background: radial-gradient(ellipse at center, rgba(40, 8, 12, 0.7), rgba(10, 4, 8, 0.94)); }
.surfaced .panel { background: var(--panel-strong); box-shadow: var(--shadow); }
.surfaced .stamp {
  display: inline-block;
  font-family: var(--display);
  font-size: 5.2em;
  line-height: 1;
  padding: 0.08em 0.3em 0.12em;
  color: #ffcf55;
  border: 0.09em solid #ffcf55;
  border-radius: 0.14em;
  transform: rotate(-4deg);
  text-shadow: 0 0 0.3em rgba(255, 200, 80, 0.45);
  box-shadow: 0 0 0.6em rgba(255, 200, 80, 0.3), inset 0 0 0.4em rgba(255, 200, 80, 0.2);
  animation: stampin3 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.2s both;
}
.surfaced.lost .stamp { color: #ff5f57; border-color: #ff5f57; text-shadow: 0 0 0.3em rgba(255, 80, 60, 0.4); box-shadow: 0 0 0.6em rgba(255, 80, 60, 0.25), inset 0 0 0.4em rgba(255, 80, 60, 0.2); }
.surfaced .headline { margin: 1.1em auto 0; }
.surfaced .headline span { display: block; font-size: 0.95em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); }
.surfaced .headline b { display: block; font-family: var(--display); font-weight: 400; font-size: 3.4em; line-height: 1.1; color: #ffcf55; }
.surfaced.lost .headline b { color: #ff8a7a; }
.surfaced .headline em { display: block; font-style: normal; font-size: 0.95em; color: var(--cream-dim); }
.surfaced .stats { margin: 1.2em auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; max-width: 34em; }
.surfaced .stat { padding: 0.65em 0.5em; border-radius: 0.9em; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); }
.surfaced .stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.8em; color: var(--accent); }
.surfaced .stat span { font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
.surfaced .crew { margin-top: 1em; font-size: 1em; color: var(--cream); }
.surfaced .crew span { margin-right: 0.4em; font-size: 0.8em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); }
.surfaced .crew b { font-weight: 700; }
.surfaced .buttons { margin-top: 1.6em; display: flex; gap: 0.8em; justify-content: center; }
@keyframes stampin3 { from { opacity: 0; transform: scale(1.8) rotate(-4deg); } to { opacity: 1; transform: rotate(-4deg); } }

/* ----------------------------------------------------------------------------------------- R6-ITEMS: the slot bar */
/* the hands (the carried chunk: its colour and value) left of the three slots; an empty slot 2 / 3 is a dashed outline
   with its key; a chunk in a slot shows its colour and its value in the ammo line */
.gearhands {
  position: relative;
  width: 6em;
  padding: 0.5em 0.6em 0.55em;
  text-align: center;
  opacity: 0.55;
  transform: scale(0.92);
  transform-origin: bottom center;
  border-color: rgba(255, 243, 223, 0.35);
  transition: opacity 0.2s, transform 0.2s, border-color 0.2s;
}
.gearhands.on { opacity: 1; transform: none; border-color: var(--accent); }
.gearhands svg { width: 3.4em; height: 2.9em; display: block; margin: 0 auto 0.1em; filter: drop-shadow(0 0.08em 0.1em rgba(0, 0, 0, 0.4)); }
.gearhands .name { font-size: 0.82em; font-weight: 700; letter-spacing: 0.04em; }
.gearhands .key { position: absolute; left: 50%; top: -0.55em; transform: translateX(-50%); font-size: 0.74em; }
.gearhands .ammo { font-family: var(--display); font-size: 1em; color: var(--accent); margin-top: 0.1em; }
.gearhands .ammo.junk { color: var(--cream-dim); }
.tool.empty { opacity: 0.38; border-style: dashed; background: rgba(20, 16, 28, 0.25); }
.tool.empty .icon { height: 2.9em; margin-bottom: 0.1em; }
.tool.empty .name { color: var(--cream-dim); font-weight: 600; }
.tool.chunk { opacity: 0.8; }
.tool .ammo.junk { color: var(--cream-dim); }

/* ------------------------------------------------------------------------------- R6-FINALE (round 6): the Hauler's start */
/* START THE HAULER (arrive), the countdown HAULER WARMING UP 1:40 (defend; red and pulsing in its last 10 s), HAULER
   READY · ALL ABOARD (board: .board), and the crew's own load under the objective (src/finale/hud.js) */
.finale-obj.start .big { color: #ffe9b8; }
.finale-obj.start .sub { color: #ffc34a; }
.finale-obj.defend .big { font-variant-numeric: tabular-nums; color: #ffe2a0; letter-spacing: 0.04em; }
.finale-obj.defend .sub { color: #ffb070; }
.finale-obj.defend.urgent .big { color: #ff8a6a; animation: breathe 0.6s ease-in-out infinite; }
.finale-load {
  position: absolute;
  top: calc(11% + 5.6em);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.28em 0.9em 0.32em;
  border-radius: 0.8em;
  background: rgba(14, 18, 12, 0.55);
  border: 1px solid rgba(140, 220, 120, 0.45);
  color: #b8f5a0;
  font-family: var(--display);
  font-size: 1.15em;
  letter-spacing: 0.08em;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0.08em 0.3em rgba(0, 0, 0, 0.7);
}
.finale-load.hidden { display: none; }
.finale-load .plus { margin-left: 0.6em; color: #e8ffb0; animation: fadein 0.2s both; }
.finale-load .plus:empty { display: none; }
.surfaced .headline em.personal { margin-top: 0.3em; color: #b8f5a0; font-weight: 700; }
/* ------------------------------------------------------------------------- R7-BOSS (2026-11-02): the Burrow Mother */
/* the boss bar at the top (her name, the phase, her HP with the phases' marks, the chunk a hit took off fading after
   it; red in her rage) and the fight's objective lines (src/finale/hud.js) */
.boss-bar {
  position: absolute;
  top: 2.4%;
  left: 50%;
  transform: translateX(-50%);
  width: min(44em, 60vw);
  pointer-events: none;
  animation: fadein 0.6s both;
}
.boss-bar.hidden { display: none; }
.boss-bar .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.22em; }
.boss-bar .name { font-family: var(--display); font-size: 1.5em; letter-spacing: 0.08em; color: #dcffc8; text-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.5), 0 0 0.6em rgba(0, 0, 0, 0.55); }
.boss-bar .phase { font-size: 0.86em; letter-spacing: 0.16em; color: #ffb070; text-shadow: 0 0.1em 0.35em rgba(0, 0, 0, 0.75); }
.boss-bar .track {
  position: relative;
  height: 0.9em;
  border-radius: 0.45em;
  background: rgba(8, 5, 16, 0.78);
  border: 1px solid rgba(180, 255, 120, 0.32);
  overflow: hidden;
  box-shadow: 0 0.15em 0.6em rgba(0, 0, 0, 0.5);
}
.boss-bar .fill, .boss-bar .lag { position: absolute; top: 0; bottom: 0; left: 0; }
.boss-bar .lag { background: rgba(255, 238, 214, 0.7); }
.boss-bar .fill { background: linear-gradient(90deg, #3f7f24, #9ee64a 70%, #c8ff7a); box-shadow: inset 0 -0.2em 0.3em rgba(0, 0, 0, 0.3); }
.boss-bar .mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, 0.65); }
.boss-bar.hit .track { border-color: rgba(230, 255, 190, 0.9); box-shadow: 0 0 0.9em rgba(190, 255, 120, 0.7); }
.boss-bar.rage .name { color: #ffd2c0; }
.boss-bar.rage .phase { color: #ff6f61; }
.boss-bar.rage .fill { background: linear-gradient(90deg, #8c1424, #ff4a1e 75%, #ff9a5a); }
.boss-bar.rage .track { border-color: rgba(255, 110, 80, 0.45); }
.finale-obj.boss .big { color: #e2ffd2; }
.finale-obj.boss .sub { color: #b8f080; }
.finale-obj.boss.rumble .big { color: #ffd6c8; animation: breathe 0.5s ease-in-out infinite; }
.finale-obj.boss.rumble .sub { color: #ff9a7a; }
.finale-obj.boss.open .sub { color: #fff27a; font-weight: 700; animation: breathe 0.5s ease-in-out infinite; }
.finale-obj.boss.under .sub { color: #ffb070; font-weight: 700; }
/* R7-BOSS fix (the verifiers: the top stack, a quarter of the screen at 720p, sat on her head and throat at fighting
   range, and the cue was dim on the dark): while her bar shows (#hud-root.boss-on), the bar sits at the bottom between
   the vitals and the tools with the crew's load over it, the objective at the top shrinks to one line and the cue under
   it is a bright line on a dark pill (it stays readable over her dust and her glow) */
#hud-root.boss-on .boss-bar { top: auto; bottom: 1.5em; width: min(38em, 46vw); }
#hud-root.boss-on .finale-load { top: auto; bottom: 5.2em; font-size: 1em; }
#hud-root.boss-on .tip { bottom: 8.6em; }
#hud-root.boss-on .finale-obj { top: 1.4%; }
#hud-root.boss-on .finale-obj .big { font-size: 1.55em; }
#hud-root.boss-on .finale-obj .sub {
  display: inline-block;
  margin-top: 0.3em;
  padding: 0.2em 0.85em 0.24em;
  border-radius: 99px;
  background: rgba(8, 5, 16, 0.74);
  color: #dcffb8;
  font-weight: 700;
  text-shadow: none;
}
#hud-root.boss-on .finale-obj.boss.open .sub { color: #fff36e; background: rgba(36, 30, 4, 0.82); box-shadow: 0 0 0 1px rgba(255, 240, 110, 0.45); }
#hud-root.boss-on .finale-obj.boss.under .sub { color: #ffc48a; background: rgba(40, 14, 4, 0.8); }