:root {
  --amber: #f2b632;
  --amber-dim: rgba(242, 182, 50, 0.55);
  --bone: #e9e4d6;
  --ink: rgba(6, 8, 10, 0.82);
  --red: #d8322a;
  --green: #45c96b;
  --mono: "Consolas", "SF Mono", "Menlo", "DejaVu Sans Mono", monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #050607; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: none; }
body.menu-open #gl { cursor: default; }
/* the title screen shows the station, not a HUD for a run that has not started (ammo/vitals bled through, critic r2) */
body.at-title #hud { visibility: hidden; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; font-family: var(--mono); color: var(--bone); user-select: none; }
#hud.hidden { display: none; }

#vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%); }
#dmg-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(180,0,0,0) 40%, rgba(180,10,0,0.75) 100%); opacity: 0; transition: opacity 0.12s; }
#blood-screen { position: absolute; inset: 0; pointer-events: none; }
#blood-screen .splat { position: absolute; width: 26vmin; height: 26vmin; background: center / contain no-repeat; filter: blur(0.6px); opacity: 0; transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); animation: splat 2.6s ease-out forwards; }
@keyframes splat { 0% { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * 0.7)); } 8% { opacity: 0.95; transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); } 60% { opacity: 0.85; } 100% { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * 1.04)) translateY(4vmin); } }
#dmg-arcs .arc { position: absolute; width: 40vmin; height: 40vmin; left: 50%; top: 50%; margin: -20vmin 0 0 -20vmin; border-radius: 50%; border: 9px solid transparent; opacity: 0; transition: opacity 0.25s;
  /* the ends fade out and it glows, so it reads as a hit-direction marker rather than a stray red line (critic r7/r8) */
  filter: drop-shadow(0 0 7px rgba(255,40,30,0.85));
  -webkit-mask-image: conic-gradient(from calc(var(--a, 0deg) - 45deg), transparent 0deg, #000 28deg, #000 62deg, transparent 90deg, transparent 360deg);
  mask-image: conic-gradient(from calc(var(--a, 0deg) - 45deg), transparent 0deg, #000 28deg, #000 62deg, transparent 90deg, transparent 360deg); }
#dmg-arcs .arc[data-dir="0"] { --a: 0deg; border-top-color: rgba(230,40,30,0.9); }
#dmg-arcs .arc[data-dir="1"] { --a: 90deg; border-right-color: rgba(230,40,30,0.9); }
#dmg-arcs .arc[data-dir="2"] { --a: 180deg; border-bottom-color: rgba(230,40,30,0.9); }
#dmg-arcs .arc[data-dir="3"] { --a: 270deg; border-left-color: rgba(230,40,30,0.9); }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --gap: 6px; }
#crosshair.ads { opacity: 0.35; }
/* red-dot optic at ADS: hide the cross, show the dot (critic r3: aiming did not read) */
#crosshair.ads.dot { opacity: 1; }
#crosshair.ads.dot .ch { opacity: 0; }
#crosshair.ads.dot::after { content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ff2a1a; box-shadow: 0 0 6px 2px rgba(255,40,20,0.75); }
#crosshair .ch { position: absolute; background: rgba(255,255,255,0.92); box-shadow: 0 0 2px rgba(0,0,0,0.9); }
.ch-t { width: 2px; height: 9px; left: -1px; top: calc(-1 * var(--gap) - 9px); }
.ch-b { width: 2px; height: 9px; left: -1px; top: var(--gap); }
.ch-l { width: 9px; height: 2px; top: -1px; left: calc(-1 * var(--gap) - 9px); }
.ch-r { width: 9px; height: 2px; top: -1px; left: var(--gap); }
#hitmarker { position: absolute; left: 0; top: 0; opacity: 0; }
#hitmarker i { position: absolute; width: 2px; height: 10px; background: #fff; box-shadow: 0 0 3px #000; }
#hitmarker.kill i { background: var(--red); }
#hitmarker i:nth-child(1) { transform: translate(-9px,-14px) rotate(45deg); }
#hitmarker i:nth-child(2) { transform: translate(7px,-14px) rotate(-45deg); }
#hitmarker i:nth-child(3) { transform: translate(-9px,4px) rotate(-45deg); }
#hitmarker i:nth-child(4) { transform: translate(7px,4px) rotate(45deg); }
#hitmarker.show { animation: hm 0.28s ease-out forwards; }
@keyframes hm { 0% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1); } }

#topbar { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); }
.board { display: flex; align-items: baseline; gap: 12px; padding: 8px 18px; background: var(--ink); border: 1px solid rgba(242,182,50,0.25); border-radius: 3px; letter-spacing: 0.12em; }
.board-label { font-size: 10px; color: var(--amber-dim); }
.board-num { font-size: 20px; color: var(--amber); font-weight: 700; text-shadow: 0 0 8px rgba(242,182,50,0.5); min-width: 2ch; text-align: center; }
.board-sep { width: 1px; height: 18px; background: rgba(242,182,50,0.25); }

.board-num.wide { min-width: 7ch; }
#hitmarker.head i { background: #ff9a3c; }

#callout { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); text-align: center; opacity: 0; pointer-events: none; }
#callout.show { opacity: 1; }
#callout.pop { animation: callout 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
@keyframes callout { 0% { transform: translate(-50%, 10px) scale(0.6); opacity: 0; } 12% { transform: translate(-50%, 0) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -26px) scale(1); opacity: 0; } }
#callout-text { font-size: 30px; font-weight: 800; letter-spacing: 0.3em; color: var(--amber); text-shadow: 0 0 14px rgba(242,182,50,0.6), 0 2px 0 #000; }
#callout.red #callout-text { color: #ff5a3c; text-shadow: 0 0 14px rgba(255,90,60,0.6), 0 2px 0 #000; }
#callout-sub { margin-top: 2px; font-size: 11px; letter-spacing: 0.3em; color: var(--bone); opacity: 0.85; }

#combo { position: absolute; right: 26px; top: 40%; text-align: right; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
#combo.show { opacity: 1; }
#combo.fade { opacity: 0; }
#combo.broken { animation: comboBreak 0.5s ease-out forwards; }
@keyframes comboBreak { 0% { opacity: 1; transform: translateX(0); } 20% { transform: translateX(-8px) rotate(-2deg); } 100% { opacity: 0; transform: translateY(20px); } }
#combo.bump #combo-num { animation: comboBump 0.25s ease-out; }
@keyframes comboBump { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
#combo-num { font-size: 44px; font-weight: 800; line-height: 1; color: var(--bone); text-shadow: 0 0 10px rgba(255,255,255,0.25), 0 2px 0 #000; }
#combo-label { font-size: 11px; letter-spacing: 0.35em; color: var(--amber-dim); margin-top: 2px; }
#combo-bar { width: 120px; height: 3px; margin: 6px 0 0 auto; background: rgba(255,255,255,0.15); }
#combo-bar-fill { height: 100%; width: 100%; background: var(--amber); }
#combo.tier1 #combo-num { color: var(--amber); } #combo.tier1 #combo-label { color: var(--amber); }
#combo.tier2 #combo-num { color: #ff7a3c; text-shadow: 0 0 16px rgba(255,120,60,0.6); } #combo.tier2 #combo-label { color: #ff7a3c; } #combo.tier2 #combo-bar-fill { background: #ff7a3c; }
#combo.tier3 #combo-num { color: #ff3c3c; text-shadow: 0 0 22px rgba(255,60,60,0.8); } #combo.tier3 #combo-label { color: #ff3c3c; } #combo.tier3 #combo-bar-fill { background: #ff3c3c; }

#summary { position: absolute; right: 26px; top: 92px; width: 250px; padding: 12px 16px; background: var(--ink); border: 1px solid rgba(242,182,50,0.25); border-left: 3px solid var(--amber); opacity: 0; transform: translateX(20px); transition: opacity 0.35s, transform 0.35s; pointer-events: none; }
#summary.show { opacity: 1; transform: translateX(0); }
#summary-title { font-size: 12px; letter-spacing: 0.3em; color: var(--amber); margin-bottom: 8px; }
.srow { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.15em; color: rgba(233,228,214,0.7); margin: 4px 0; }
.srow b { color: var(--bone); }

#toasts { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { padding: 8px 16px; background: var(--ink); border: 1px solid rgba(242,182,50,0.4); border-left: 3px solid var(--amber); opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; text-align: left; min-width: 260px; }
.toast.in { opacity: 1; transform: translateY(0); }
.toast-title { font-size: 10px; letter-spacing: 0.35em; color: var(--amber); }
.toast-text { font-size: 12px; letter-spacing: 0.08em; color: var(--bone); margin-top: 2px; }

#perks { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
#perks.show { opacity: 1; pointer-events: auto; }
/* the perk cards own the middle of the screen: kill callouts and score pops must not print over them */
body.draft-open #callout { visibility: hidden; }
#perk-title { font-size: 14px; letter-spacing: 0.4em; color: var(--amber); margin-bottom: 12px; text-shadow: 0 2px 0 #000; }
#perk-cards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 900px; }
.perk { width: 200px; padding: 16px 14px 12px; background: rgba(6,8,10,0.9); border: 1px solid rgba(242,182,50,0.35); border-top: 4px solid var(--amber); cursor: pointer; transition: transform 0.15s, border-color 0.15s; position: relative; }
.perk:hover { transform: translateY(-4px); border-color: var(--amber); }
.perk-rare { border-color: rgba(89,194,255,0.55); border-top-color: #59c2ff; }
.perk-rare .perk-name { color: #bfe6ff; }
.perk-epic { border-color: rgba(255,122,217,0.6); border-top-color: #ff7ad9; box-shadow: 0 0 24px rgba(255,122,217,0.25); }
.perk-epic .perk-name { color: #ffd0f1; }
.perk-key { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: #111; font: 800 13px/24px var(--sans); }
.perk-name { font-size: 14px; font-weight: 800; letter-spacing: 0.2em; color: var(--bone); margin-top: 4px; }
.perk-desc { font-size: 11px; line-height: 1.5; color: rgba(233,228,214,0.75); margin: 8px 0 10px; font-family: var(--sans); letter-spacing: 0.02em; }
.perk-owned { font-size: 9px; letter-spacing: 0.25em; color: var(--amber-dim); }
#perk-hint { margin-top: 12px; font-size: 10px; letter-spacing: 0.3em; color: rgba(233,228,214,0.55); }

#banner { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity 0.4s; }
#banner.show { opacity: 1; }
#banner-text { font-size: 42px; font-weight: 700; letter-spacing: 0.25em; color: var(--amber); text-shadow: 0 0 18px rgba(242,182,50,0.6), 0 2px 0 #000; }
#banner-sub { margin-top: 6px; font-size: 13px; letter-spacing: 0.3em; color: var(--bone); opacity: 0.9; text-shadow: 0 0 6px #000, 0 0 12px #000, 0 1px 0 #000; }   /* dark halo: it sat unreadable over lit EXIT signs (critic r3) */

#bottom-left { position: absolute; left: 26px; bottom: 26px; }
#health-label { font-size: 10px; letter-spacing: 0.25em; color: var(--amber-dim); margin-bottom: 5px; }
#health-num { color: var(--bone); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; margin-left: 6px; }
#health-num.low { color: #ff5a3c; text-shadow: 0 0 8px rgba(255,90,60,0.7); }
#health-bar { width: 240px; height: 14px; background: rgba(0,0,0,0.6); border: 1px solid rgba(233,228,214,0.35); padding: 2px; }
#health-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #c9d7c0, var(--bone)); transition: width 0.15s, background 0.3s; }
#health-fill.low { background: linear-gradient(90deg, #7a1410, var(--red)); animation: pulse 0.9s infinite; }
@keyframes pulse { 50% { filter: brightness(1.5); } }

#bottom-right { position: absolute; right: 26px; bottom: 26px; text-align: right; }
#weapon-name { font-size: 11px; letter-spacing: 0.3em; color: var(--amber-dim); }
#ammo { font-size: 40px; font-weight: 700; line-height: 1; margin-top: 2px; text-shadow: 0 0 10px rgba(255,255,255,0.25); }
#ammo-mag.low { color: var(--red); }
#ammo-sep { opacity: 0.4; margin: 0 4px; font-size: 26px; }
#ammo-reserve { font-size: 22px; opacity: 0.75; }
#weapon-slots { margin-top: 6px; display: flex; justify-content: flex-end; gap: 6px; }
.slot { width: 22px; height: 22px; border: 1px solid rgba(233,228,214,0.35); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; opacity: 0.5; }
.slot.on { border-color: var(--amber); color: var(--amber); opacity: 1; }
#grenades { margin-top: 6px; font-size: 12px; letter-spacing: 0.25em; color: var(--amber); }
#grenades.empty { color: rgba(233,228,214,0.35); }
#line { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); display: none; }
#line.show { display: block; }
#line-stops { display: flex; align-items: flex-start; }
/* fixed-width stops so the labels never run together; the connector spans dot centre to dot centre */
.stop { position: relative; display: flex; flex-direction: column; align-items: center; width: 86px; color: rgba(233,228,214,0.4); }
.stop + .stop::before { content: ''; position: absolute; right: calc(50% + 8px); top: 4px; width: calc(100% - 16px); height: 2px; background: currentColor; opacity: 0.5; }
.stop .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; background: transparent; }
.stop .stop-label { white-space: nowrap; margin-top: 4px; font-size: 8px; letter-spacing: 0.15em; font-variant: small-caps; }
.stop.here { color: var(--amber); }
.stop.here .dot { background: var(--amber); box-shadow: 0 0 8px rgba(242,182,50,0.6); }
.stop.next { color: var(--bone); }
.stop.next.transit .dot { animation: linePulse 1s infinite; }
.stop.done { color: rgba(233,228,214,0.3); }
@keyframes linePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

#boss { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); width: 420px; text-align: center; opacity: 0; transition: opacity 0.4s; }
#boss.show { opacity: 1; }
/* the boss bar and the line map share the slot under the stats: the fight wins (they overlapped at Canal / City Hall, found in the critic loop) */
#hud:has(#boss.show) #line { visibility: hidden; }
#boss-name { font-size: 12px; letter-spacing: 0.45em; color: #ff5a3c; text-shadow: 0 0 10px rgba(255,90,60,0.6), 0 2px 0 #000; margin-bottom: 4px; }
#boss-bar { height: 8px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,90,60,0.5); padding: 1px; }
#boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #7a1410, #ff5a3c); transition: width 0.2s; }
#reload-hint { margin-top: 6px; font-size: 12px; letter-spacing: 0.2em; color: var(--amber); height: 14px; }

#perf { position: absolute; left: 10px; top: 10px; font-size: 11px; color: rgba(233,228,214,0.55); white-space: pre; display: none; }
#lock-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.15em; color: rgba(233,228,214,0.5); }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(3,4,6,0.78); backdrop-filter: blur(3px); font-family: var(--sans); color: var(--bone); z-index: 20; }
.overlay.hidden { display: none; }
.menu-card { width: min(560px, 92vw); padding: 36px 40px; background: #0d0f12; border: 1px solid rgba(242,182,50,0.35); border-top: 6px solid var(--amber); box-shadow: 0 30px 80px rgba(0,0,0,0.8); text-align: center; }
.menu-card.small { width: 380px; }
.roundel { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--amber); color: #111; font: 700 38px/64px var(--sans); }
.roundel.red { background: var(--red); color: #fff; font-size: 30px; }
.menu-card h1 { margin: 0; font-size: 44px; letter-spacing: 0.22em; font-weight: 800; }
.menu-card .sub { margin-top: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.3em; color: var(--amber); }
.menu-card .blurb { margin: 20px 0; font-size: 15px; line-height: 1.5; color: rgba(233,228,214,0.8); font-style: italic; }
.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; margin: 0 auto 24px; font-family: var(--mono); font-size: 12px; color: rgba(233,228,214,0.75); text-align: left; }
.controls b { color: var(--amber); margin-right: 6px; }
.menu-card button { padding: 14px 34px; background: var(--amber); color: #111; border: 0; font: 800 16px/1 var(--sans); letter-spacing: 0.25em; cursor: pointer; }
.menu-card button:hover { background: #ffd05a; }
#best { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em; color: var(--amber); }
#board { margin-top: 14px; text-align: left; max-height: 160px; overflow-y: auto; }
#board .board-row { display: grid; grid-template-columns: 34px 1fr 70px 44px; gap: 10px; padding: 4px 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(233,228,214,0.7); }
#go-entry { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
#go-entry.hidden { display: none; }
#go-rank { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--amber); }
#go-name { flex: 1; padding: 8px 10px; background: rgba(0,0,0,0.4); border: 1px solid rgba(242,182,50,0.4); color: var(--bone); font: 700 13px/1 var(--mono); letter-spacing: 0.15em; }
#go-save { padding: 8px 16px; background: var(--amber); color: #111; border: 0; font: 800 11px/1 var(--sans); letter-spacing: 0.2em; cursor: pointer; }
#loading { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; color: var(--amber-dim); }
.menu-card button:disabled { opacity: 0.5; cursor: wait; }
#diff-row { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 0 0 16px; font-family: var(--mono); }
.diff-label { font-size: 10px; letter-spacing: 0.3em; color: var(--amber-dim); margin-right: 8px; }
.diff-btn { padding: 8px 14px; background: transparent; color: rgba(233,228,214,0.6); border: 1px solid rgba(233,228,214,0.25); font: 700 11px/1 var(--mono); letter-spacing: 0.2em; cursor: pointer; }
.diff-btn.on { background: var(--amber); color: #111; border-color: var(--amber); }
.diff-btn.dimmed { opacity: 0.45; }
.daily-btn { margin-left: 10px; padding: 8px 14px; background: transparent; color: rgba(233,228,214,0.6); border: 1px solid rgba(233,228,214,0.25); font: 700 11px/1 var(--mono); letter-spacing: 0.2em; cursor: pointer; }
.daily-btn.on { background: var(--amber); color: #111; border-color: var(--amber); }
.menu-card button.ghost { display: block; margin: 12px auto 0; padding: 8px 18px; background: transparent; color: var(--amber); border: 1px solid rgba(242,182,50,0.4); font: 700 11px/1 var(--mono); letter-spacing: 0.25em; }
.menu-card button.ghost:hover { background: rgba(242,182,50,0.12); }
#ach-panel { margin-top: 14px; text-align: left; max-height: 220px; overflow-y: auto; border-top: 1px solid rgba(242,182,50,0.2); padding-top: 10px; }
#ach-panel.hidden { display: none; }
.ach { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-family: var(--mono); font-size: 11px; color: rgba(233,228,214,0.45); }
.ach.done { color: var(--bone); }
.ach b { min-width: 130px; letter-spacing: 0.15em; color: inherit; }
.ach.done b { color: var(--amber); }
.fine { margin-top: 16px; font-family: var(--mono); font-size: 11px; color: rgba(233,228,214,0.45); }
.opts { margin: 18px 0 22px; text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--amber-dim); }
.opts label { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; margin: 10px 0; }
.opts input[type=range] { width: 100%; accent-color: var(--amber); }
.opts b { color: var(--bone); text-align: right; letter-spacing: 0; }
#go-stats { margin: 18px 0 24px; font-family: var(--mono); font-size: 14px; line-height: 1.9; letter-spacing: 0.1em; color: rgba(233,228,214,0.85); }
#go-stats b { color: var(--amber); font-size: 20px; }

#boot-error { position: fixed; inset: 0; z-index: 100; display: none; background: #1a0e0a; color: #e8d9b0; font: 14px/1.5 Consolas, monospace; padding: 2em; white-space: pre-wrap; }

/* dev panel (F4) */
#dev { display: none; position: fixed; right: 14px; top: 84px; z-index: 60; width: 340px; padding: 10px 12px; background: rgba(8, 10, 12, 0.92); border: 1px solid rgba(255, 190, 80, 0.35); color: #e8e0c8; font: 11px/1.5 'Consolas', 'Menlo', monospace; letter-spacing: 0.06em; pointer-events: auto; }
#dev.show { display: block; }
#dev .dev-title { color: #ffb84a; font-weight: bold; margin-bottom: 6px; }
#dev .dev-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0; }
#dev .dev-label { width: 58px; color: #9a927c; font-size: 10px; }
#dev button { background: #1c2126; color: #e8e0c8; border: 1px solid #4a5058; padding: 3px 7px; font: inherit; cursor: pointer; }
#dev button:hover { border-color: #ffb84a; color: #ffb84a; }
#dev input { width: 46px; background: #0d1013; color: #e8e0c8; border: 1px solid #4a5058; font: inherit; padding: 2px 4px; }
#dev .dev-status { margin-top: 6px; color: #9a927c; min-height: 14px; }
/* Block 11: the active wave mutator, at the end of the top board */
.board-label.mut { color: var(--red); letter-spacing: 0.12em; text-shadow: 0 0 8px rgba(216,50,42,0.55); }
.mut-off { display: none; }