:root {
  --bg: #090a09;
  --panel: rgba(16, 19, 16, 0.9);
  --panel2: rgba(24, 28, 24, 0.95);
  --line: #2b352b;
  --line2: #3d4a3d;
  --text: #e9ece6;
  --dim: #8f9b8f;
  --gold: #ffd54f;
  --blood: #c62828;
  --bad: #ff5252;
  --good: #69f0ae;
  --good-hi: #b9f6ca;
  --on-good: #06210f;   /* text on a --good fill */
  --on-accent: #111;    /* text on a --gold / character-colour fill */
  --ink: #111;          /* near-black surface tint (not text) */
  --ice: #81d4fa;
  --display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --body: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --cs: 1;                     /* console scale, set by ui.js fitHud() from the window size */
  /* shared colours (audit 2026-11-12: raw hex moved onto tokens) */
  --white: #fff;
  --black: #000;
  --text-2: #cfd8cf;    /* secondary text */
  --bad-soft: #ff8a80;  /* soft red: off / lost states */
  --alarm: #ff1744;     /* breach / fatal */
  --amber: #ffd740;     /* bull bed, highlights */
  --orange: #ffb74d;
  --info: #40c4ff;
  --bg-deep: #080a08;   /* console background */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 500 16px/1.3 var(--body); overflow: hidden; }
body { background: radial-gradient(ellipse at 50% 40%, #151a15 0%, #070807 70%); }
html.overlay, html.overlay body { background: transparent; }
button { font: 600 15px var(--body); letter-spacing: 0.03em; color: var(--text); background: #1f281f; border: 1px solid var(--line2); border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; }
button:hover { background: #2a372a; border-color: #5a6e5a; }
button:active { transform: translateY(1px); }
button.primary { background: var(--blood); border-color: #ff6f6f; font-size: 18px; padding: 8px 22px; }
button.primary:hover { background: #b71c1c; } /* darker on hover: light text stays above 4.5:1 */
kbd { font: 600 13px var(--body); background: #1a1d1a; border: 1px solid #444; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }
h2, h3 { font-family: var(--display); letter-spacing: 0.06em; font-weight: 400; }

/* ------------------------------------------------------------ layout
   The board is never covered: #field holds the canvas and nothing else. Two consoles flank it, each as wide
   as the space the square board leaves free (--hudw, set by ui.js fitHud()). Everything inside a console is
   sized in em from one base (16px x --cs), so what fits at 1280x720 fits at every larger size.
   States: full console; .slim = essentials-only rail (keys [ and ], prefs.hudL / hudR); body.big = essentials
   at oche size; body.ov-compact = slim rails floating over the camera feed (they take no layout space, so the
   overlay calibration never shifts). */
#app { display: flex; height: 100vh; }
#field { position: relative; flex: 1; min-width: 0; overflow: hidden; }
#board { width: 100%; height: 100%; display: block; cursor: crosshair; }
.hud { --pad: 0.75em; position: relative; flex: none; width: var(--hudw, 280px); height: 100vh; font-size: calc(16px * var(--cs, 1)); line-height: 1.25; background: linear-gradient(180deg, #0e110e, var(--bg-deep)); }
.side-l { border-right: 1px solid var(--line); }
.side-r { border-left: 1px solid var(--line); }
.hud-body { height: 100%; display: flex; flex-direction: column; padding: 0 var(--pad); overflow: hidden auto; scrollbar-width: thin; scrollbar-color: #2e3a2e transparent; }
.sec { margin: 0 calc(-1 * var(--pad)); padding: 0.5em var(--pad); border-top: 1px solid var(--line); min-width: 0; }
.hud-body > .sec:first-child { border-top: 0; }
.sec:empty, .sec[hidden] { display: none; }
.sec h3 { margin: 0 0 0.3em; font: 400 0.85em/1 var(--display); letter-spacing: 0.14em; color: var(--dim); display: flex; gap: 0.5em; align-items: center; flex-wrap: wrap; }
.sec h3.sub { margin-top: 0.55em; }
.hud-tab { position: absolute; z-index: 2; top: 0.4em; width: 1.6em; height: 1.6em; padding: 0; border-radius: 0.4em; background: transparent; border-color: transparent; color: #647264; display: flex; align-items: center; justify-content: center; font-size: inherit; }
.hud-tab svg { width: 1em; height: 1em; }
.hud-tab:hover { background: rgba(255, 255, 255, 0.07); color: var(--gold); border-color: var(--line2); }
.side-l .hud-tab { right: 0.35em; }
.side-r .hud-tab { left: 0.35em; }
.side-r .hud-tab svg, .side-l.slim .hud-tab svg { transform: scaleX(-1); }
.side-r.slim .hud-tab svg { transform: none; }
html.overlay .hud { background: rgba(8, 10, 8, 0.74); }

/* generic bits (consoles, help, title) */
.card[hidden] { display: none; }
.dim { color: var(--dim); }
.small { font-size: 0.84em; }
.gold { color: var(--gold); font-weight: 700; }
.bad { color: var(--bad); font-weight: 700; }
.ice { color: var(--ice); }
.big { font: 400 44px/1 var(--display); letter-spacing: 0.03em; }
.tag-bad { font-size: 0.95em; color: var(--white); background: var(--blood); border-radius: 0.25em; padding: 0 0.4em; letter-spacing: 0.08em; }
.diff .lane { display: inline-block; min-width: 38px; text-align: center; font: 400 26px/1.1 var(--display); color: var(--black); background: var(--gold); border-radius: 7px; padding: 2px 4px; }
.pk { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.pk.trap b { color: var(--bad); }
.glyph { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; color: var(--black); font: 400 1em var(--display); background: var(--c, #ccc); }
.zlist { display: flex; flex-wrap: wrap; gap: 0.25em; margin: 0.3em 0; }
.z { display: inline-flex; align-items: center; gap: 0.2em; font-size: 0.875em; white-space: nowrap; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 2px solid var(--c); border-radius: 0.4em; padding: 1px 0.4em 1px 2px; }
.z img { width: 1.6em; height: 1.6em; }
.emb { width: 26px; height: 26px; vertical-align: middle; flex: none; }
.ico-star { width: 0.95em; height: 0.95em; vertical-align: -0.1em; }
.status.on { color: var(--good); }
.status.off { color: var(--orange); }
.status.wait { color: var(--dim); }
.ad-hint { margin: 4px 0 6px; font-size: 14px; color: var(--orange); }

/* ------------------------------------------------------------ left console: the battle */
.fh-label { font: 400 0.85em/1 var(--display); letter-spacing: 0.14em; color: var(--dim); padding-right: 2em; }
.hprow { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5em; margin-top: 0.25em; }
.hp-big { display: flex; align-items: baseline; gap: 0.3em; line-height: 0.9; font-family: var(--display); }
.hp-big .ico { width: 1.7em; height: 1.7em; align-self: center; }
.hp-big b { font-size: 3.7em; font-weight: 400; }
.hp-big span { font-size: 1.4em; color: var(--dim); }
.hp-big.ok { color: var(--good); } .hp-big.warn { color: var(--amber); } .hp-big.crit { color: var(--alarm); animation: crit 0.8s infinite alternate; }
@keyframes crit { from { opacity: 0.6; } to { opacity: 1; text-shadow: 0 0 18px var(--alarm); } }
.scorebox { text-align: right; line-height: 1; padding-bottom: 0.15em; }
.scorebox b { display: block; font: 400 1.8em/1 var(--display); color: var(--gold); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.scorebox small { color: var(--dim); font-size: 0.8em; }
.hpbar { height: 0.5em; background: #2a0d0d; border-radius: 0.3em; overflow: hidden; margin: 0.35em 0 0.5em; box-shadow: inset 0 1px 3px var(--black); }
.hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #00c853, var(--good)); transition: width 0.4s; }
.hpbar.warn i { background: linear-gradient(90deg, #ff9100, var(--amber)); }
.hpbar.crit i { background: linear-gradient(90deg, #b71c1c, var(--alarm)); }
.lvline { font: 400 1em/1.15 var(--display); letter-spacing: 0.08em; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvline b { font-weight: 400; color: var(--white); }
.lvline em { font-style: normal; color: #ffe9a8; }
.turnline { font: 400 1.25em/1.2 var(--display); letter-spacing: 0.06em; color: var(--text-2); display: flex; align-items: center; gap: 0.35em; flex-wrap: wrap; }
.turnline b { font-weight: 400; color: var(--white); }
.turnline .dim2 { color: var(--dim); }
.wavepips { display: inline-flex; gap: 0.25em; margin-left: 0.15em; }
.wavepips i { width: 0.5em; height: 0.5em; border-radius: 2px; background: #2c332c; transform: rotate(45deg); }
.wavepips i.on { background: var(--text-2); }
.wavepips i.surge { box-shadow: 0 0 0 1px var(--bad); }
.wavepips i.surge.on { background: var(--bad); }
.wavepips i.cur { background: var(--white); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 8px var(--white); }
.wavepips i.surge.cur { background: var(--bad); box-shadow: 0 0 0 2px rgba(255, 82, 82, 0.5), 0 0 10px var(--bad); }
.nextline { display: flex; flex-wrap: wrap; gap: 0.25em; margin-top: 0.3em; }
.nx { font: 400 0.95em/1 var(--display); letter-spacing: 0.08em; padding: 0.22em 0.45em; border-radius: 0.3em; background: rgba(255, 255, 255, 0.06); color: var(--text-2); }
.nx.gold { color: var(--on-accent); background: var(--gold); }
.nx.dimgold { color: var(--gold); background: rgba(255, 213, 79, 0.1); }
.nx.bad { color: var(--white); background: var(--blood); }
.nx.warn { color: #ffcc80; background: rgba(255, 152, 0, 0.16); }
.nx.urgent { animation: pulse 0.7s infinite alternate; }
@keyframes pulse { from { opacity: 0.55; } to { opacity: 1; } }
body.mode-siege #fh-bunker .fh-label { color: #ffcc80; }

/* what happens if every dart misses */
#fh-danger.hurt { background: linear-gradient(90deg, rgba(255, 82, 82, 0.16), rgba(255, 82, 82, 0.02)); }
#fh-danger.fatal { background: rgba(255, 23, 68, 0.24); animation: pulse 0.6s infinite alternate; }
.dg-row { display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap; }
.dg-big { font: 400 2.1em/1 var(--display); letter-spacing: 0.03em; }
.safe .dg-big { color: var(--good); } .hurt .dg-big { color: var(--bad); } .fatal .dg-big { color: #ff5a7a; }
.dg-lanes { font-size: 0.9em; color: #ffcdd2; }
.dg-lanes b { font: 400 1.35em var(--display); margin: 0 0.1em; color: var(--white); }
.safe .dg-lanes { color: var(--dim); }
.adv-list { list-style: none; margin: 0.3em 0 0; padding: 0; font-size: 0.84em; }
.adv-list li { display: flex; gap: 0.4em; align-items: baseline; padding: 1px 0; }
.adv-list .ln { font: 400 1.3em var(--display); min-width: 1.6em; text-align: center; background: rgba(255, 82, 82, 0.22); border-radius: 0.2em; color: var(--white); }
.adv-list em { color: var(--bad-soft); font-style: normal; font-weight: 700; }
.adv-lost { color: var(--orange); font-size: 0.8em; margin-top: 0.2em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.lanes { color: var(--bad-soft); font-weight: 700; letter-spacing: 0.04em; }
.threat { display: flex; align-items: center; gap: 0.5em; margin-top: 0.35em; font: 400 0.85em var(--display); letter-spacing: 0.12em; color: var(--dim); }
.threat b { font-weight: 400; color: var(--white); min-width: 1.6em; text-align: right; }
.tbar { flex: 1; height: 0.4em; border-radius: 0.2em; background: #1d221d; overflow: hidden; }
.tbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), #ff9100 50%, var(--alarm)); transition: width 0.4s; }
.mod { display: flex; gap: 0.5em; align-items: baseline; margin: 0.25em 0; }
.mod > i { flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0.5em var(--c); }
.ups, .syns { display: flex; flex-wrap: wrap; gap: 0.25em; margin-top: 0.3em; }
.ups span { font-size: 0.8em; background: #2c2a14; border: 1px solid #5a5220; border-radius: 0.3em; padding: 1px 0.4em; color: var(--gold); }
.syns span { font-size: 0.8em; background: rgba(128, 203, 196, 0.12); border: 1px solid #80cbc4; color: #b2dfdb; border-radius: 0.3em; padding: 1px 0.4em; }
.brow { display: flex; gap: 0.45em; align-items: baseline; margin: 0.22em 0; font-size: 0.9em; }
.brow .glyph { font-size: 0.8em; align-self: center; }
.brow > div { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.15em 0.3em; align-items: baseline; }
.bchip { font-size: 0.86em; background: #1b211b; border: 1px solid #3a463a; border-radius: 0.3em; padding: 0 0.35em; box-shadow: inset 0 -2px 0 var(--v, transparent); white-space: nowrap; }
.bchip i { display: inline-block; width: 0.34em; height: 0.34em; margin-left: 0.18em; background: var(--gold); transform: rotate(45deg); vertical-align: 0.18em; }
.bchip.hurt { border-color: #ff7043; }
/* event headlines (js/ui/dock.js feed): what used to pop up over the board */
#feed { background: rgba(255, 255, 255, 0.03); }
.fd { font: 400 1.25em/1.2 var(--display); letter-spacing: 0.06em; color: var(--c, var(--white)); }
.fd.fresh { animation: fdIn 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fdIn { from { opacity: 0; transform: translateX(-0.8em); filter: brightness(2.2); } to { opacity: 1; transform: none; filter: none; } }
/* the log takes whatever height is left and gives all of it up when the console is full */
.logsec { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-top: 0; padding-bottom: 0; }
.logsec h3 { margin-top: 0.6em; }
#log { flex: 1; min-height: 0; list-style: none; margin: 0; padding: 0; font-size: 0.84em; overflow: hidden; }
#log li { padding: 0.1em 0; color: #a9b3a9; }
#log li.fresh { animation: fresh 0.6s ease-out; }
@keyframes fresh { from { background: rgba(255, 255, 255, 0.14); } to { background: transparent; } }
#log li.good { color: var(--good); }
#log li.bad { color: var(--bad); }
#log li.warn { color: var(--orange); }
#log li.gold { color: var(--gold); }
.status { flex: none; margin: 0 calc(-1 * var(--pad)); padding: 0.4em var(--pad) 0.5em; border-top: 1px solid var(--line); font-size: 0.78em; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status::before { content: ''; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; margin-right: 0.5em; }

/* ------------------------------------------------------------ right console: your visit */
.side-r #fh-player, .side-r #fh-phase { margin-left: 1.9em; }
#fh-player:empty { display: none; }
#fh-player { margin-bottom: 0.35em; }
.sp-role { --c: var(--white); display: block; }
.sp-role b { display: block; font: 400 1.7em/1 var(--display); letter-spacing: 0.08em; color: var(--c); }
.sp-role small { display: block; font: 600 0.8em/1.2 var(--body); color: #d5dbd5; }
.sp-role.solo { --c: var(--gold); }
#fh-phase span { display: block; min-height: 2.75em; font: 400 1.15em/1.15 var(--display); letter-spacing: 0.1em; padding: 0.25em 0.5em; border-radius: 0.35em; background: rgba(255, 255, 255, 0.06); color: #e6e9e3; display: flex; align-items: center; }
#fh-phase .bad { color: var(--bad-soft); background: rgba(198, 40, 40, 0.3); }
#fh-phase .gold { color: var(--gold); background: rgba(255, 213, 79, 0.13); }
#fh-phase .pulse { animation: pulse 0.55s infinite alternate; }
#visit { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 0.35em; margin-top: 0.5em; font-family: var(--display); }
.vd { position: relative; height: 4.3em; border-radius: 0.6em; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.3em; background: rgba(255, 255, 255, 0.03); border: 2px dashed rgba(255, 255, 255, 0.16); color: var(--white); line-height: 1; }
.vd .vi { position: absolute; left: 0.45em; top: 0.3em; font-size: 0.8em; color: rgba(255, 255, 255, 0.45); }
.vd b { font-size: 2.5em; font-weight: 400; }
.vd i { font-style: normal; font-size: 1.5em; margin-right: 1px; padding-bottom: 0.1em; opacity: 0.9; }
.vd.bull b, .vd.miss b { font-size: 1.55em; padding-bottom: 0.25em; }
.vd.cur { border-color: rgba(255, 255, 255, 0.7); border-style: solid; animation: curpulse 1.1s infinite; }
@keyframes curpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); } 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); } }
.vd:not(.empty) { border-style: solid; animation: land 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes land { from { transform: scale(1.3); } to { transform: scale(1); } }
.vd.sgl { background: linear-gradient(180deg, #33403a, #1e2622); border-color: #78909c; }
.vd.dbl { background: linear-gradient(180deg, #1f7a3a, #0f3f1d); border-color: var(--good); }
.vd.tre { background: linear-gradient(180deg, #a02020, #4e0d0d); border-color: var(--bad); }
.vd.obull { background: linear-gradient(180deg, #1f7a3a, #0f3f1d); border-color: var(--good); }
.vd.bull { background: linear-gradient(180deg, #b8860b, #5d4300); border-color: var(--gold); }
.vd.miss { background: rgba(30, 30, 30, 0.8); border-color: #555; color: #888; }
.vd.miss b { text-decoration: line-through; }
.vt { border-radius: 0.6em; background: var(--black); border: 2px solid rgba(255, 255, 255, 0.22); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 0.9; }
.vt b { font-size: 2.7em; font-weight: 400; font-variant-numeric: tabular-nums; }
.vt small { font-size: 0.8em; color: var(--dim); letter-spacing: 0.08em; min-height: 1em; }
.vt.ton { border-color: var(--gold); color: var(--gold); } .vt.ton small { color: var(--gold); }
.vt.big { border-color: #ff9100; color: #ffab40; box-shadow: 0 0 22px rgba(255, 145, 0, 0.5); } .vt.big small { color: #ffab40; }
.vt.max { border-color: #ff4081; color: #ff4081; box-shadow: 0 0 30px rgba(255, 64, 129, 0.7); animation: pulse 0.3s infinite alternate; }
body.pending #visit { filter: saturate(0.6); }
/* mode fantasy: Horde = rounds in a magazine (spent -> RELOAD at takeout), Fortress = build-order bricks */
.vd .rd { position: absolute; right: 0.4em; top: 0.3em; pointer-events: none; display: block; }
#visit.mag .vd .rd { width: 0.42em; height: 1em; border-radius: 55% 55% 2px 2px / 40% 40% 2px 2px; }
#visit.mag .vd .rd.live { background: linear-gradient(90deg, #8a5a14, #ffd36b 45%, #8a5a14); box-shadow: 0 0 6px rgba(255, 200, 80, 0.55); }
#visit.mag .vd .rd.live::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 42%; border-radius: 55% 55% 0 0 / 80% 80% 0 0; background: linear-gradient(90deg, #7a3a12, #e08a3c 45%, #7a3a12); }
#visit.mag .vd .rd.spent { background: transparent; border: 1.5px solid rgba(255, 211, 107, 0.45); border-top: 0; border-radius: 2px; height: 0.7em; top: 0.6em; opacity: 0.7; }
#visit.mag.reload .vd .rd.spent { border-color: #ffd36b; opacity: 1; animation: rd-reload 0.7s steps(2, jump-none) infinite; }
#visit.mag.reload .vt small { color: #ffd36b; }
@keyframes rd-reload { 50% { opacity: 0.25; } }
#visit.bricks .vd .rd { width: 1.1em; height: 0.55em; border-radius: 2px; top: 0.4em; }
#visit.bricks .vd .rd.live { border: 1.5px dashed #4fc3f7; background: rgba(33, 150, 243, 0.2); }
#visit.bricks .vd .rd.spent { background: linear-gradient(180deg, #d9763f, #9a4a22); border: 1px solid #5a2a12; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
#visit.bricks .vd.cur .rd.live { animation: rd-blueprint 1s linear infinite; }
@keyframes rd-blueprint { 50% { background: rgba(79, 195, 247, 0.4); } }
#visit.bricks.reload .vd .rd.spent { filter: brightness(1.25); }
/* the last dart's result (js/ui/dock.js shot): one fixed-height line, so nothing below it jumps */
#shot { height: 2em; margin-top: 0.25em; display: flex; align-items: center; gap: 0.5em; overflow: hidden; white-space: nowrap; }
#shot b { flex: none; font: 400 1.4em/1.3 var(--display); letter-spacing: 0.05em; }
#shot span { font: 400 0.95em/1 var(--display); letter-spacing: 0.08em; color: #dfe5df; overflow: hidden; text-overflow: ellipsis; }
#shot.fresh b { animation: shotIn 0.45s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: left center; }
@keyframes shotIn { from { transform: scale(1.5); filter: brightness(2); } to { transform: none; filter: none; } }
/* visit bonus meter (ton / 140 / 180) */
#darts:empty { display: none; }
.vbar { position: relative; height: 0.4em; background: #1d221d; border-radius: 0.2em; margin: 1.35em 0 0.1em; }
.vbar > i { display: block; height: 100%; border-radius: 0.2em; background: linear-gradient(90deg, #607d8b, var(--gold)); transition: width 0.3s; }
.vbar span { position: absolute; top: -1.25em; transform: translateX(-50%); font: 400 0.8em var(--display); color: var(--dim); letter-spacing: 0.05em; }
.vbar span:last-of-type { transform: translateX(-100%); }
.vbar span::after { content: ''; position: absolute; left: 50%; top: 1.2em; width: 2px; height: 0.6em; background: #556155; }
.vbar span:last-of-type::after { left: auto; right: 0; }
.vbar span.hit { color: var(--gold); }
.vstat { font-size: 0.84em; margin-top: 0.3em; }

/* character: ability meter + perk track (hud.js charHtml). .ess = head, meter, next perk; the tree row is .more */
.chemb { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 0.45em; font: 400 1.25em/1 var(--display); font-style: normal; color: var(--on-accent); background: var(--c, var(--gold)); box-shadow: inset 0 -0.15em 0 rgba(0, 0, 0, 0.3), 0 0 0.6em color-mix(in srgb, var(--c, var(--gold)) 45%, transparent); }
img.chemb { background: none; box-shadow: none; object-fit: contain; }
.pki { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em; vertical-align: middle; }
.pkl { border-radius: 50%; font: 400 0.95em/1 var(--display); font-style: normal; color: var(--on-accent); background: var(--text-2); }
.pki.abi { border-radius: 50%; font-style: normal; font-size: 1em; background: rgba(255, 213, 79, 0.18); color: var(--gold); }
#fh-char { display: flex; flex-direction: column; gap: 0.3em; }
.ch-head { display: flex; align-items: center; gap: 0.45em; min-width: 0; }
.ch-head .chemb { width: 1.6em; height: 1.6em; font-size: 1.05em; }
.ch-name { flex: 1; min-width: 0; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-name b { font: 400 1.3em/1 var(--display); letter-spacing: 0.06em; }
.ch-name small { margin-left: 0.4em; font-size: 0.78em; color: var(--dim); }
.ch-rank { flex: none; font: 400 0.9em/1 var(--display); letter-spacing: 0.12em; color: var(--gold); }
.ch-rank b { font-weight: 400; font-size: 1.5em; color: var(--white); vertical-align: -0.05em; }
.ab { border-radius: 0.45em; padding: 0.3em 0.45em; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 213, 79, 0.18); }
.ab-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4em; font: 400 1.05em/1.1 var(--display); letter-spacing: 0.06em; }
.ab-top b { font-weight: 400; color: #ffe9a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-top span { color: var(--white); font-variant-numeric: tabular-nums; }
.ab-bar { height: 0.45em; margin-top: 0.2em; border-radius: 0.25em; background: #1d221d; overflow: hidden; box-shadow: inset 0 1px 2px var(--black); }
.ab-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8d6e00, var(--gold)); transition: width 0.4s; }
.ab-sub { margin-top: 0.2em; font-size: 0.74em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-go { margin-top: 0.25em; font: 400 1.25em/1 var(--display); letter-spacing: 0.1em; color: var(--on-accent); background: var(--gold); border-radius: 0.3em; text-align: center; padding: 0.15em 0.3em; animation: pulse 0.6s infinite alternate; }
.ab.ready { border-color: var(--gold); background: rgba(255, 213, 79, 0.12); box-shadow: 0 0 1em rgba(255, 213, 79, 0.3); }
.ab.ready .ab-top span { color: var(--gold); }
.ab.ready .ab-bar i { background: linear-gradient(90deg, var(--gold), #fff59d); }
.ab.locked { opacity: 0.5; border-style: dashed; }
.pk-next { display: flex; align-items: center; gap: 0.35em; min-width: 0; font-size: 0.92em; }
.pk-next .pn-l { flex: none; font: 400 0.85em/1 var(--display); letter-spacing: 0.12em; color: var(--dim); }
.pk-next b { flex: 1; min-width: 0; font: 400 1.15em/1 var(--display); letter-spacing: 0.05em; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-next .pn-v { flex: none; font: 400 1em/1 var(--display); letter-spacing: 0.06em; color: var(--gold); }
.pk-next.done b { color: var(--dim); font-size: 1em; }
.pk-row { display: flex; flex-wrap: wrap; gap: 0.2em; }
.pk-row span { position: relative; display: inline-flex; opacity: 0.28; filter: grayscale(1); }
.pk-row span.on { opacity: 1; filter: none; }
.pk-row span.sig .pki { box-shadow: 0 0 0 1.5px var(--gold); border-radius: 50%; }
.pk-row .pki { width: 1.3em; height: 1.3em; font-size: 0.85em; }
.pk-row i { position: absolute; right: -0.25em; bottom: -0.2em; font: 400 0.62em/1.1 var(--display); font-style: normal; color: var(--on-accent); background: var(--gold); border-radius: 3px; padding: 0 2px; }
#fh-phase .ability { color: var(--on-accent); background: var(--gold); animation: pulse 0.6s infinite alternate; }
/* a ready ability is the loudest thing in the visit console; late-game rooms are made by trimming detail */
body.ability-ready .hud .pk .pkd, body.ability-ready .adv-aim li:nth-child(n+3), body.ability-ready #fh-key { display: none; }

/* advisor: best beds */
#fh-aim h3 { color: #80d8ff; }
.adv-aim { list-style: none; margin: 0; padding: 0; }
.adv-aim li { display: grid; grid-template-columns: 1.3em minmax(2.6em, auto) 1fr; gap: 0.45em; align-items: baseline; padding: 0.1em 0; }
.adv-aim .rk { align-self: center; font: 400 0.9em/1.4em var(--display); color: #06121a; background: var(--info); border-radius: 50%; width: 1.4em; height: 1.4em; text-align: center; padding: 0; letter-spacing: 0; }
.adv-aim b { font: 400 1.3em/1 var(--display); color: var(--info); letter-spacing: 0.04em; }
.adv-aim li:first-child b { font-size: 2em; }
.adv-aim .why { font-size: 0.82em; line-height: 1.2; color: #cfe8f5; }
.adv-aim li:not(:first-child) .why { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* checkout strike */
.co-row { display: flex; align-items: center; gap: 0.6em; }
.co-big { font: 400 2.4em/0.9 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.co-big.done { color: var(--good); font-size: 1.8em; }
.route { display: flex; gap: 0.25em; flex-wrap: wrap; flex: 1; }
.route span { font: 400 1.1em/1.3 var(--display); background: rgba(255, 213, 79, 0.13); border: 1px solid rgba(255, 213, 79, 0.55); color: var(--gold); border-radius: 0.3em; padding: 0 0.35em 0 0.2em; letter-spacing: 0.04em; white-space: nowrap; }
.route em { font-style: normal; display: inline-block; background: var(--gold); color: var(--black); border-radius: 50%; width: 1.1em; height: 1.1em; line-height: 1.15em; text-align: center; margin-right: 0.25em; font-size: 0.75em; vertical-align: 1px; }
.co-left { font: 400 1em var(--display); letter-spacing: 0.05em; color: var(--white); white-space: nowrap; }
.co-left.bust { color: var(--bad); }

/* power-ups on the board */
.hud .pk { gap: 0.5em; align-items: center; margin: 0; padding: 0.22em 0; }
.hud .pk .emb { width: 1.9em; height: 1.9em; }
.hud .pk > div { flex: 1; min-width: 0; line-height: 1.15; }
.hud .pk b { color: var(--gold); font: 400 1.3em/1 var(--display); letter-spacing: 0.04em; margin-right: 0.2em; }
.hud .pk.trap b { color: var(--bad); }
.hud .pk .left { float: right; margin-left: 0.4em; font: 400 0.9em/1.3 var(--display); color: var(--white); background: #333c33; border-radius: 0.3em; padding: 0 0.4em; }
.hud .pk .left.soon { background: #8a2a2a; }
.hud .pk .pkd { font-size: 0.8em; line-height: 1.2; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* a busy visit console goes terse */
#fh-player:not(:empty) + #fh-phase span { min-height: 0; }
#pickups:has(.pk:nth-of-type(3)) .pkd { display: none; }
.rk { display: inline-block; font: 400 0.8em/1.25 var(--display); letter-spacing: 0.06em; color: var(--on-accent); background: var(--gold); border-radius: 0.25em; padding: 0 0.3em; vertical-align: 0.1em; }
.rk.rare { background: var(--white); }
.loadstrip { display: flex; align-items: center; gap: 0.3em; margin-top: 0.3em; flex-wrap: wrap; }
.loadstrip span { position: relative; display: inline-flex; }
.loadstrip img { width: 1.4em; height: 1.4em; }
.loadstrip i { position: absolute; right: -0.25em; bottom: -0.2em; font: 400 0.62em/1.1 var(--display); font-style: normal; color: var(--on-accent); background: var(--gold); border-radius: 3px; padding: 0 2px; }
.loadstrip em { font-style: normal; font-size: 0.72em; color: var(--dim); margin-left: 0.15em; }
.sec.grab-flash { animation: grabFlash 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes grabFlash { 0% { box-shadow: inset 0 0 0 3px var(--grab, var(--white)), inset 0 0 2em var(--grab, var(--white)); } 100% { box-shadow: inset 0 0 0 0 transparent; } }

/* what each bed does in this mode */
.keys { display: flex; flex-wrap: wrap; gap: 0.25em 0.3em; }
.keys .k { font-size: 0.78em; font-weight: 600; color: #cfd8dc; display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; padding-right: 0.3em; }
.keys .k b { font: 400 1.1em/1.25 var(--display); min-width: 1.5em; text-align: center; border-radius: 0.25em; padding: 0 0.3em; color: var(--on-accent); letter-spacing: 0.04em; }
.keys .tre b { background: var(--bad); } .keys .dbl b { background: var(--good); } .keys .sgl b { background: #eceff1; }
.keys .obull b { background: #66bb6a; } .keys .bull b { background: var(--amber); }

/* controls */
.hud-foot { flex: none; margin: auto calc(-1 * var(--pad)) 0; padding: 0.5em var(--pad) 0.6em; border-top: 1px solid var(--line);
  position: sticky; bottom: 0; z-index: 1; background: var(--bg-deep); } /* Undo / End turn stay on screen when a short console scrolls */
#typed { font: 400 1.4em/1 var(--display); color: var(--gold); letter-spacing: 0.06em; margin-bottom: 0.3em; }
#typed:empty { display: none; }
#fieldbtns { display: grid; grid-template-columns: repeat(4, 1fr); gap: max(4px, 0.3em); }
#fieldbtns button { display: flex; align-items: center; justify-content: center; gap: 0.4em; height: max(24px, 2em); padding: 0 0.4em; font-size: 0.85em; background: #161c16; border-color: var(--line); border-radius: 0.45em; }
#fieldbtns button.wide { grid-column: span 2; }
#fieldbtns button:hover { background: #263226; border-color: #5a6e5a; }
#fieldbtns button.on { border-color: var(--gold); color: var(--gold); }
#fieldbtns button.off { color: var(--bad-soft); }
#fieldbtns svg { width: 1.2em; height: 1.2em; flex: none; }

/* ------------------------------------------------------------ slim rail: essentials only */
.hud.slim { width: 6.6em; --pad: 0.4em; text-align: center; }
.hud.slim .hud-body { padding-top: 2.1em; }
.hud.slim .sec:not(.ess), .hud.slim .more, .hud.slim .status, .hud.slim .sec h3, .hud.slim .fh-label, .hud.slim .hp-big .ico, .hud.slim #fieldbtns span { display: none; }
.hud.slim #shot { display: none; }
.hud.slim .hud-tab { left: 50%; right: auto; margin-left: -0.8em; }
.hud.slim .hprow, .hud.slim .dg-row, .hud.slim .co-row { flex-direction: column; align-items: center; gap: 0.15em; }
.hud.slim .hp-big { flex-direction: column; align-items: center; }
.hud.slim .hp-big b { font-size: 3.2em; }
.hud.slim .lvline { white-space: normal; }
.hud.slim .turnline { font-size: 1em; justify-content: center; }
.hud.slim .nextline { justify-content: center; }
.hud.slim .nx { font-size: 0.78em; line-height: 1.1; }
.hud.slim .dg-big { font-size: 1.7em; }
.hud.slim .dg-lanes { font-size: 0.78em; }
.hud.slim #fh-player, .hud.slim #fh-phase { margin-left: 0; }
.hud.slim .sp-role b { font-size: 1em; }
.hud.slim #fh-phase span { font-size: 0.8em; padding: 0.3em; min-height: 0; justify-content: center; }
.hud.slim #visit { grid-template-columns: 1fr; }
.hud.slim .vd { height: 3.3em; }
.hud.slim .vt { height: 3.6em; }
.hud.slim .ch-head { flex-direction: column; gap: 0.15em; }
.hud.slim .ch-name b { font-size: 0.95em; }
.hud.slim .ab { padding: 0.25em; }
.hud.slim .ab-top { flex-direction: column; align-items: center; font-size: 0.85em; }
.hud.slim .ab-top b { max-width: 100%; }
.hud.slim .ab-go { font-size: 0.85em; }
.hud.slim .pk-next { flex-direction: column; gap: 0.1em; }
.hud.slim .pk-next b { font-size: 0.85em; white-space: normal; }
.hud.slim .adv-aim li:not(:first-child), .hud.slim .adv-aim .why, .hud.slim .adv-aim .rk { display: none; }
.hud.slim .adv-aim li { display: block; }
.hud.slim .route { flex-direction: column; align-items: center; }
.hud.slim #fieldbtns { grid-template-columns: 1fr 1fr; }
.hud.slim #fieldbtns button.wide { grid-column: auto; }

/* big-number view (V): the essentials at oche size, details away */
body.big .hud { font-size: calc(21px * var(--cs, 1)); }
body.big .hud .sec:not(.ess), body.big .hud .more, body.big .hud .status, body.big .hud .adv-aim .why { display: none; }
body.big .hud:not(.slim) #visit { grid-template-columns: repeat(3, 1fr); }
body.big .hud:not(.slim) .vt { grid-column: 1 / -1; flex-direction: row; gap: 0.5em; align-items: baseline; padding: 0.15em 0; }
body.big .hud:not(.slim) .adv-aim li { grid-template-columns: 1.3em 1fr; }

/* compact overlay: slim rails float over the camera feed without taking layout space */
body.ov-compact .hud { position: fixed; top: 0; bottom: 0; z-index: 3; background: none; border: 0; pointer-events: none; }
body.ov-compact .side-l { left: 0; } body.ov-compact .side-r { right: 0; }
body.ov-compact .hud > *, body.ov-compact .hud-body > * { pointer-events: auto; }
body.ov-compact .hud .sec, body.ov-compact .hud-foot { margin: 0 0 0.3em; border: 0; border-radius: 0.5em; background: rgba(6, 8, 6, 0.72); }
body.ov-compact .hud-foot { margin-top: auto; }

/* ------------------------------------------------------------ beginner explainers
   Docked over the console on the far side from what the card points at (renderer toggles body.ex-right). */
#explain:empty { display: none; }
.ex-card { position: fixed; z-index: 5; left: 0.5em; bottom: 0.5em; width: max(calc(var(--hudw, 280px) - 1em), 15em); font: 500 calc(14px * var(--cs, 1))/1.3 var(--body); color: #eceff1; cursor: pointer;
  background: linear-gradient(180deg, #1a1c14, #0e100b); border: 2px solid #fff176; border-radius: 0.9em; padding: 0.8em 0.9em 0.7em;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.7); animation: exIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; }
body.ex-right .ex-card { left: auto; right: 0.5em; bottom: 6.2em; }
.ex-card.ex-pickup { border-color: var(--good); }
.ex-card.ex-zombie { border-color: var(--bad-soft); }
@keyframes exIn { from { transform: translateY(1.4em); opacity: 0; } to { transform: none; opacity: 1; } }
.ex-head { display: flex; gap: 0.8em; align-items: center; margin-bottom: 0.4em; }
.ex-head img { width: 4.2em; height: 4.2em; flex: none; background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%); border-radius: 50%; }
.ex-head img.ex-emblem { background: none; }
.ex-name { font: 400 2em/1 var(--display); letter-spacing: 0.04em; color: var(--white); }
.ex-kind { display: inline-block; font: 400 0.95em/1.3 var(--display); letter-spacing: 0.12em; color: var(--on-accent); background: #fff176; border-radius: 0.25em; padding: 0 0.4em; margin-top: 0.25em; }
.ex-kind.ex-red { background: var(--bad); color: var(--white) !important; }
.ex-stats { font-size: 0.85em; color: #b0bec5; margin-top: 0.15em; }
.ex-card p { margin: 0.3em 0; }
.ex-card ul { margin: 0.4em 0 0.15em; padding-left: 1.2em; line-height: 1.35; }
.ex-card li { margin: 0.2em 0; }
.ex-tip { background: rgba(255, 255, 255, 0.08); padding: 0.3em 0.55em; border-radius: 0.35em; }
.ex-blue { color: var(--info); font-weight: 700; } .ex-red { color: var(--bad); font-weight: 700; } .ex-gold { color: var(--gold); }
.ex-foot { display: flex; justify-content: space-between; font-size: 0.78em; color: #90a4ae; margin-top: 0.4em; }
.ex-foot em { font-style: normal; margin-left: auto; }
.ex-time { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #fff176; transform-origin: left; animation: exTime linear forwards; }
@keyframes exTime { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.beginner { display: flex; gap: 18px; justify-content: center; margin: 6px 0 2px; font-size: 14px; }
.shapekey { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 4px 0 10px; font-size: 12px; color: #cfd8dc; }
.shapekey span { display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------ campaign camp (phase 'camp')
   The two consoles turn into the camp: briefing for the next level on the left, the supply choice, loadout
   and run track on the right. The board between them stays clear (its 20 / 6 / 3 wedges light up). */
#camp { position: fixed; inset: 0; z-index: 6; display: grid; grid-template-columns: var(--campw) 1fr var(--campw); pointer-events: none;
  --campw: max(15em, var(--hudw, 280px)); font-size: calc(16px * var(--cs, 1)); }
#camp[hidden] { display: none; }
.camp-side { pointer-events: auto; background: linear-gradient(180deg, #0e110e, var(--bg-deep)); border-right: 1px solid var(--line); padding: 0.8em 0.75em; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: #2e3a2e transparent; display: flex; flex-direction: column; gap: 0.4em; font-size: 0.875em; }
.camp-r { grid-column: 3; border-right: 0; border-left: 1px solid var(--line); }
.camp-side h4 { margin: 0.5em 0 0; font: 400 1.2em var(--display); letter-spacing: 0.1em; color: var(--gold); }
.camp-side h4 small { font: 500 0.7em var(--body); letter-spacing: 0.02em; color: var(--dim); margin-left: 0.3em; }
.brief-name { font: 400 2.6em/0.95 var(--display); letter-spacing: 0.04em; color: var(--white); }
.brief-meta { font: 400 1.05em/1 var(--display); letter-spacing: 0.14em; color: var(--gold); }
.brief-tag { font-style: italic; color: var(--text-2); line-height: 1.25; }
.brief-shape { font-size: 0.96em; color: #e0e6e0; background: rgba(255, 255, 255, 0.05); border-radius: 0.55em; padding: 0.35em 0.55em; line-height: 1.3; }
.brief-shape b { color: var(--gold); }
.brief-shape .bad { color: var(--bad-soft); font-weight: 700; }
.bz { display: flex; gap: 0.55em; align-items: flex-start; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.55em; padding: 0.35em 0.55em; }
.bz img { width: 3.2em; height: 3.2em; flex: none; }
.bz-name { font: 400 1.55em/1 var(--display); letter-spacing: 0.05em; color: var(--c); }
.bz-name small { display: block; font: 600 0.55em/1.3 var(--body); letter-spacing: 0.01em; color: var(--text-2); }
.bz-tip { font-size: 0.93em; line-height: 1.25; color: #e8ece8; margin-top: 0.15em; }
.brief-known { display: flex; flex-wrap: wrap; gap: 0.25em 0.55em; font-size: 0.9em; color: var(--dim); align-items: center; }
.brief-known span { display: inline-flex; align-items: center; gap: 2px; color: var(--c); }
.brief-known img { width: 1.4em; height: 1.4em; }
.bt { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0.55em; padding: 0.3em 0.55em; font-size: 0.9em; line-height: 1.28; color: #dfe5df; }
.bt b { display: block; font: 400 1.28em/1.1 var(--display); letter-spacing: 0.06em; color: var(--white); }
.bt span b { display: inline; font: 700 1em var(--body); letter-spacing: 0; color: var(--gold); }
.cintro { line-height: 1.35; color: #dfe5df; }
.cintro b { color: var(--gold); }
.cstats { display: flex; flex-wrap: wrap; gap: 0.2em 0.9em; color: var(--dim); font-size: 0.93em; }
.cstats b { font: 400 1.35em/1 var(--display); color: var(--white); letter-spacing: 0.03em; margin-right: 0.2em; }
.camp-title { margin: 0; font: 400 2em/1 var(--display); letter-spacing: 0.06em; color: var(--gold); }
.camp-sub { color: #e8dcb0; line-height: 1.25; }
.copts { display: flex; flex-direction: column; gap: 0.4em; margin-top: 0.2em; }
.copt { display: grid; grid-template-columns: auto 1fr; gap: 0.2em 0.6em; align-items: center; cursor: pointer; border-radius: 0.7em; padding: 0.45em 0.55em; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 213, 79, 0.25); transition: background 0.15s, opacity 0.2s; }
.copt:hover { background: rgba(255, 213, 79, 0.12); }
.copt .lane { min-width: 1.5em; font: 400 2.6em/1.05 var(--display); color: var(--black); background: var(--gold); border-radius: 0.18em; text-align: center; padding: 0 0.1em; }
.cname { display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap; }
.cname .emb { width: 1.9em; height: 1.9em; }
.cname b { font: 400 1.5em/1.05 var(--display); letter-spacing: 0.05em; color: var(--white); }
.cname kbd { margin-left: auto; }
.ctag { font: 700 0.75em var(--body); letter-spacing: 0.1em; padding: 1px 0.45em; border-radius: 0.25em; background: rgba(105, 240, 174, 0.15); color: var(--good); }
.ctag.rank { background: rgba(255, 213, 79, 0.16); color: var(--gold); }
.ctag.perk { background: rgba(64, 196, 255, 0.16); color: #80d8ff; }
.ctag.heal { background: rgba(255, 82, 82, 0.16); color: var(--bad-soft); }
.ctag.bonus { background: var(--gold); color: var(--on-accent); }
.cdesc { grid-column: 1 / -1; line-height: 1.25; color: #e3dcc0; }
.copt.picked { background: rgba(105, 240, 174, 0.14); border-color: var(--good); }
.copt.picked .lane { background: var(--good); }
.copt.faded { opacity: 0.35; }
.copt.bonus { border-color: rgba(255, 213, 79, 0.75); background: rgba(255, 213, 79, 0.08); }
.camp-foot { line-height: 1.3; color: #e8dcb0; border-radius: 0.55em; padding: 0.4em 0.6em; background: rgba(255, 255, 255, 0.05); }
.camp-foot b { color: var(--gold); }
.camp-foot.go { background: rgba(105, 240, 174, 0.16); color: #c8ffe0; display: flex; flex-direction: column; gap: 0.45em; }
.camp-foot.go > span { animation: pulse 0.8s infinite alternate; }
.camp-play { align-self: stretch; font: 400 1.35em/1 var(--display); letter-spacing: 0.06em; padding: 0.45em 0.8em; min-height: 32px; border: 0; border-radius: 0.45em; background: var(--good); color: var(--on-good); cursor: pointer; box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.5); }
.camp-play:hover, .camp-play:focus-visible { background: var(--good-hi); }
.camp-foot.nudge { animation: hint-nudge 0.9s ease-out 2; }
.bgoal { display: flex; flex-direction: column; gap: 1px; padding: 0.35em 0.55em; border-radius: 0.55em; border: 1px dashed rgba(255, 213, 79, 0.5); background: rgba(255, 213, 79, 0.06); }
.bgoal b { color: var(--gold); letter-spacing: 0.04em; }
.bgoal span { color: var(--dim); font-size: 0.92em; }
.bgoal.done { border-style: solid; border-color: var(--gold); }
.bgoal.miss { opacity: 0.6; border-color: var(--line2); }
.bgoal.miss b { color: var(--dim); }
.clo { display: flex; flex-wrap: wrap; gap: 0.3em 0.5em; }
.clo span { display: inline-flex; align-items: center; gap: 0.3em; font-weight: 700; }
.clo img { width: 1.7em; height: 1.7em; }
.ctrack { display: flex; gap: 0.3em; flex-wrap: wrap; }
.ctrack span { width: 1.6em; height: 1.6em; border-radius: 0.3em; display: inline-flex; align-items: center; justify-content: center; font: 400 1.25em var(--display); background: rgba(255, 255, 255, 0.06); color: var(--dim); border: 1px solid var(--line2); }
.ctrack span.done { background: #2e7d32; color: var(--white); border-color: var(--good); }
.ctrack span.next { background: var(--gold); color: var(--on-accent); border-color: var(--white); animation: pulse 0.8s infinite alternate; }
.ctrack span.star { background: #8d6e00; border-color: var(--gold); color: #fff59d; }
.cscore { margin-top: auto; padding-top: 0.4em; color: var(--dim); }
.cscore b { color: var(--white); font: 400 1.4em var(--display); letter-spacing: 0.04em; }
.sum-loadout { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 6px auto; font-size: 13px; }
.sum-loadout > span { color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; }
.sum-loadout em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.sum-loadout img { width: 20px; height: 20px; }
.sum-loadout small { color: var(--gold); }

/* ------------------------------------------------------------ responsive */


/* ------------------------------------------------------------ screens */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.88) 75%); z-index: 10; padding: 16px; }
.screen[hidden], .card[hidden] { display: none; }
.panel { background: linear-gradient(180deg, rgba(20, 24, 20, 0.96), rgba(10, 12, 10, 0.96)); border: 1px solid var(--line2); border-radius: 16px; padding: 24px 30px; max-width: 760px; width: 100%; max-height: 94vh; overflow-y: auto; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(198, 40, 40, 0.15); }
.panel.wide { max-width: 1160px; }
.panel h2 { font-size: 34px; margin: 0 0 8px; color: #ef5350; }
.panel h3 { font-size: 22px; margin: 16px 0 6px; color: var(--gold); }

.title-screen { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.85) 70%); }
.title-panel { text-align: center; background: linear-gradient(180deg, rgba(14, 16, 14, 0.88), rgba(8, 9, 8, 0.92)); backdrop-filter: blur(2px); }
.logo { margin: 0 0 6px; font: 400 92px/0.9 'Creepster', var(--display); letter-spacing: 0.04em; color: #d32f2f; text-shadow: 0 4px 0 #2a0000, 0 0 40px rgba(211, 47, 47, 0.55); display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: wrap; }
.logo small { font: 400 28px var(--display); color: #e0e0e0; letter-spacing: 0.2em; text-shadow: none; }
.logo .l2 { animation: flicker 6s infinite; }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.4; } 94% { opacity: 1; } 96% { opacity: 0.6; } }
.tag { font-size: 18px; color: var(--text-2); margin: 4px 0 14px; }
#modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
#modes:empty { display: none; }
#modes button.mode { text-align: left; padding: 12px 16px; border-radius: 12px; background: rgba(30, 36, 30, 0.85); border: 2px solid var(--line2); font: 400 30px/1 var(--display); letter-spacing: 0.08em; display: flex; flex-direction: column; gap: 4px; }
#modes button.mode small, #modes button.mode span { font: 500 14px/1.25 var(--body); letter-spacing: 0.01em; color: var(--dim); }
#modes button.mode.sel { border-color: #ef5350; background: linear-gradient(180deg, rgba(120, 20, 20, 0.55), rgba(40, 10, 10, 0.7)); box-shadow: 0 0 24px rgba(239, 83, 80, 0.35); }
#modes button.mode.sel small, #modes button.mode.sel span { color: #ffcdd2; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 10px 0; font-size: 15px; text-align: left; }
.legend b { color: var(--gold); display: inline-block; min-width: 92px; font-weight: 700; }
.legend-fortress { display: none; }
.title-screen:has(.mode.sel[data-mode="fortress"]) .legend-fortress { display: grid; }
.title-screen:has(.mode.sel[data-mode="fortress"]) .legend-horde { display: none; }
.throwhint { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 15px; color: var(--text-2); margin: 10px 0; }
.throwhint span { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 3px 12px; }
.throwhint b { color: var(--gold); }
.throwhint.nudge span { animation: hint-nudge 0.9s ease-out 2; }
@keyframes hint-nudge { 0%, 60% { background: rgba(255, 200, 60, 0.35); border-color: var(--gold); transform: scale(1.08); } 100% { transform: none; } }
#diffs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.diff { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border-radius: 12px; background: rgba(26, 32, 26, 0.9); }
.diff b { font: 400 26px var(--display); letter-spacing: 0.06em; }
.diff:hover { border-color: var(--gold); transform: translateY(-2px); }
.diff.sel { border-color: var(--gold); box-shadow: 0 0 18px rgba(255, 213, 79, 0.25); }
.link { background: none; border: none; color: var(--gold); text-decoration: underline; padding: 4px 2px; min-height: 24px; display: inline-flex; align-items: center; } /* WCAG 2.5.8 target size */
.link:hover { background: none; }
.close { position: absolute; right: 14px; top: 14px; }
.cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; }
.cols ul { padding-left: 18px; }
.cols li { margin: 3px 0; }
label { display: block; margin: 8px 0; }
label input[type=text], select { width: 100%; padding: 6px 8px; background: #0c0f0c; color: var(--text); border: 1px solid var(--line2); border-radius: 6px; margin-top: 4px; font: inherit; }
label input[type=range] { width: 100%; accent-color: var(--gold); }
label.chk { display: flex; align-items: center; gap: 8px; }
label.chk input { width: 18px; height: 18px; accent-color: var(--gold); }
.setgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.btnrow { display: flex; gap: 6px; flex-wrap: wrap; }
.btnrow.center { justify-content: center; }
#roster .z, #pickroster .pk { white-space: normal; margin: 5px 0; }
#roster .z { display: block; border: none; background: none; padding: 0; }
#roster .z i, #pickroster .glyph { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; color: var(--black); font-style: normal; font-weight: 900; font-size: 12px; margin-right: 4px; }
#pickroster .glyph { box-shadow: none; }

/* game over */
.over-logo { font-size: 84px; }
.sum-head { display: flex; align-items: center; gap: 18px; justify-content: center; margin: 4px 0 12px; }
.grade { font: 400 96px/1 'Creepster', var(--display); width: 110px; height: 110px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1a1a1a; border: 3px solid currentColor; }
.g-S { color: var(--amber); box-shadow: 0 0 30px rgba(255, 215, 64, 0.5); } .g-A { color: var(--good); } .g-B { color: var(--info); } .g-C { color: #ffab40; } .g-D { color: var(--bad); }
.newbest { font: 400 22px var(--display); background: var(--gold); color: var(--black); border-radius: 6px; padding: 2px 8px; vertical-align: middle; animation: pulse 0.5s infinite alternate; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line2); border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; }
.tile span { color: var(--dim); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.tile b { font: 400 36px/1.05 var(--display); }
.tile small { color: var(--dim); }
.runchart { width: 100%; height: 130px; margin: 12px 0 4px; background: rgba(0, 0, 0, 0.3); border-radius: 8px; }
.runchart text { font: 600 12px var(--body); }
.statgrid { display: grid; grid-template-columns: repeat(3, auto auto); gap: 3px 14px; margin: 10px 0; justify-content: center; font-size: 15px; }
.statgrid span { color: var(--dim); text-align: right; }

/* ======================================================================================
   SIEGE mode (Fortress builds + Horde shooting; solo or 2 players). Appended block.
   Body class `mode-siege` (+ `siege-2p` / `siege-solo`, set by hud.js renderSiege).
   ====================================================================================== */
#modes { grid-template-columns: repeat(3, 1fr); }
#modes button.mode span { font-size: 13px; }
.legend-siege { display: none; }
.title-screen:has(.mode.sel[data-mode="siege"]) .legend-siege { display: grid; }
.title-screen:has(.mode.sel[data-mode="siege"]) .legend-horde,
.title-screen:has(.mode.sel[data-mode="siege"]) .legend-fortress { display: none; }


/* run type toggle on the title (styled like the Siege Solo/2P sub-toggle, always visible) */
#run-opts { display: flex; align-items: center; gap: 10px; margin: -4px 0 10px; }
#run-opts:empty { display: none; }
#run-opts .so-label { font: 400 20px/1 var(--display); letter-spacing: 0.12em; color: var(--gold); white-space: nowrap; }
#run-opts kbd { font: 700 12px var(--body); background: #222; border: 1px solid var(--line2); border-radius: 4px; padding: 1px 5px; color: #ddd; letter-spacing: 0; }
#run-opts button.mode-sub { flex: 1; text-align: left; padding: 8px 12px; border-radius: 10px; background: rgba(30, 36, 30, 0.85); border: 2px solid var(--line2); display: flex; flex-direction: column; gap: 2px; font: 400 22px/1 var(--display); letter-spacing: 0.08em; }
#run-opts button.mode-sub span { font: 500 12px/1.25 var(--body); letter-spacing: 0.01em; color: var(--dim); }
#run-opts button.mode-sub.sel { border-color: var(--gold); background: linear-gradient(180deg, rgba(110, 86, 20, 0.5), rgba(40, 30, 8, 0.7)); box-shadow: 0 0 18px rgba(255, 213, 79, 0.25); }
#run-opts button.mode-sub.sel span { color: #fff3c4; }
/* short screens: the title must fit without scrolling at 1280x720 */
@media (max-height: 820px) and (orientation: landscape) {
  .title-panel { padding: 14px 24px; max-height: 98vh; }
  .title-panel .logo { font-size: 64px; margin-bottom: 0; }
  .title-panel .logo small { font-size: 22px; }
  .title-panel .tag { font-size: 15px; margin: 2px 0 8px; }
  #modes { margin: 4px 0 8px; gap: 8px; }
  #modes button.mode { padding: 7px 12px; font-size: 25px; }
  #modes button.mode span { font-size: 12.5px; }
  #run-opts { margin: -2px 0 7px; }
  #run-opts button.mode-sub { padding: 5px 10px; font-size: 20px; }
  .title-panel .tag, #modes button.mode span.dim { display: none; }
  .title-panel .logo { font-size: 54px; }
  #modes button.mode { padding: 6px 12px; flex-direction: row; align-items: baseline; justify-content: space-between; }
  #modes { margin: 2px 0 6px; }
  .title-panel .beginner { margin: 0 0 2px; }
  .title-panel .throwhint { margin: 4px 0; }
  #diffs { margin: 4px 0; }
  .diff { padding: 5px 6px; gap: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; }
  .diff .lane { grid-row: span 3; }
  .diff .lane { font-size: 22px; }
  .diff b { font-size: 21px; line-height: 1; }
  .diff .small { font-size: 12px; }
  .title-panel .trow-head { margin-bottom: 3px; }
  .title-panel .legend { font-size: 13.5px; gap: 1px 14px; margin: 5px 0; }
  .title-panel .throwhint { font-size: 13px; gap: 6px; margin: 6px 0; }
  .title-panel .throwhint span { padding: 2px 9px; }
  .title-panel .beginner { margin: 4px 0; }
  #diffs { margin: 6px 0; gap: 8px; }
  .diff { padding: 7px 6px; gap: 2px; }
  .diff b { font-size: 23px; }
}

/* title flow: 1 mode -> (Siege) run -> 2 survivor -> 3 difficulty. The active step is lit; darts / digits act on it. */
.title-panel { max-width: 1000px; }
.trow-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; text-align: left; }
.tstep { font: 400 19px/1 var(--display); letter-spacing: 0.12em; color: var(--dim); display: inline-flex; align-items: baseline; gap: 6px; }
.tstep em { font-style: normal; display: inline-block; width: 1.25em; height: 1.25em; line-height: 1.3em; text-align: center; border-radius: 50%; background: #2a332a; color: var(--text-2); font-size: 0.85em; }
.tstep small { font: 600 11px var(--body); letter-spacing: 0; }
.tstep.on { color: var(--gold); }
.tstep.on em { background: var(--gold); color: var(--on-accent); animation: pulse 0.8s infinite alternate; }
#modes .mrun { font: 600 11px/1 var(--body); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #8fa08f; margin-top: 2px; }
#chars:empty { display: none; }
#chars { margin: 2px 0 6px; }
.chargrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.char { position: relative; text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 9px 11px 10px; border-radius: 12px; background: rgba(26, 32, 26, 0.9); border: 2px solid var(--line2); font: 500 13px/1.25 var(--body); letter-spacing: 0; min-width: 0; }
.char:hover { border-color: color-mix(in srgb, var(--c) 70%, var(--white) 0%); }
.char.sel { border-color: var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, var(--ink)), rgba(14, 16, 14, 0.95)); box-shadow: 0 0 20px color-mix(in srgb, var(--c) 35%, transparent); }
.char .cnum { position: absolute; right: 8px; top: 7px; font: 400 18px/1.1 var(--display); color: var(--black); background: var(--gold); border-radius: 5px; min-width: 22px; text-align: center; }
.title-panel:not([data-step="char"]) .char .cnum { background: #3a443a; color: var(--text-2); }
.chead { display: flex; align-items: center; gap: 8px; padding-right: 26px; }
.chead .chemb { font-size: 20px; }
.chead b { display: block; font: 400 25px/1 var(--display); letter-spacing: 0.06em; color: var(--c); }
.chead small { display: block; font-size: 12px; color: var(--text-2); letter-spacing: 0.06em; text-transform: uppercase; }
.chead .stars { margin-left: auto; text-align: right; color: var(--gold); font-size: 13px; letter-spacing: 1px; line-height: 1; white-space: nowrap; }
.chead .stars small { font-size: 11px; color: var(--dim); text-transform: none; letter-spacing: 0.04em; }
.char .cstyle { color: #e4e9e4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.char .crow { display: flex; gap: 6px; align-items: flex-start; }
.char .crow .pki { width: 20px; height: 20px; margin-top: 1px; }
.char .crow em { font: 600 11px var(--body); font-style: normal; letter-spacing: 0.1em; color: var(--dim); }
.char .crow b { color: var(--white); }
.char .crow span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #b8c4b8; font-size: 12px; }
.char .crow u { display: block; text-decoration: none; color: var(--gold); font-size: 11.5px; }
.char .ctree { display: flex; align-items: center; gap: 3px; margin-top: auto; }
.char .ctree em { font: 600 11px var(--body); font-style: normal; letter-spacing: 0.1em; color: var(--dim); margin-right: 3px; }
.char .ctree .pki { width: 19px; height: 19px; font-size: 12px; }
.char .ctree small { color: var(--dim); }
.title-panel[data-step="char"] #chars .chargrid, .title-panel[data-step="diff"] #diffs, .title-panel[data-step="mode"] #modes { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 213, 79, 0.25); }
#diffs .trow-head { margin-bottom: -4px; }
/* camp briefing: what this level unlocks */
.bn { display: flex; gap: 0.55em; align-items: flex-start; background: rgba(255, 213, 79, 0.05); border: 1px solid rgba(255, 213, 79, 0.2); border-radius: 0.55em; padding: 0.35em 0.55em; }
.bn > .glyph, .bn > .emb, .bn > .pki, .bn .pkw .pki { width: 2.1em; height: 2.1em; font-size: 1.1em; }
.bn > .emb { width: 2.3em; height: 2.3em; font-size: 1em; }
.bn b { font: 400 1.35em/1 var(--display); letter-spacing: 0.05em; color: var(--c, var(--white)); }
.bn small { font-size: 0.78em; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; }
.bn span { display: block; font-size: 0.9em; line-height: 1.25; color: #e3e8e3; margin-top: 0.1em; }
/* run summary: survivor + perks reached */
.sum-char { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 4px auto 8px; max-width: 760px; text-align: left; }
.sum-char .chemb { width: 40px; height: 40px; font-size: 24px; }
.sum-char b { font: 400 24px/1 var(--display); letter-spacing: 0.05em; color: var(--c); }
.sum-char > div > span { color: var(--dim); font-size: 14px; }
.sum-perks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; font-size: 13px; }
.sum-perks em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.sum-perks .pki { width: 18px; height: 18px; font-size: 11px; }
.sum-perks small { color: var(--gold); }
/* help: survivors */
.cr-mode { font: 400 18px var(--display); letter-spacing: 0.12em; color: var(--dim); margin: 8px 0 2px; }
.cr { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 8px; }
.cr .chemb { font-size: 16px; }
.cr > div > b { color: var(--c); font: 400 20px var(--display); letter-spacing: 0.05em; }
.cr-tree { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.cr-tree span { display: inline-flex; align-items: center; gap: 3px; }
.cr-tree .pki { width: 16px; height: 16px; font-size: 10px; }
.ex-head .ex-ch { width: 2.6em; height: 2.6em; font-size: 1.6em; }

/* run summary: levels cleared */
.levlog { display: grid; gap: 2px; margin: 8px auto; max-width: 620px; font-size: 14px; }
.levlog div { display: grid; grid-template-columns: 30px 1fr repeat(3, auto); gap: 8px; padding: 1px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); text-align: right; align-items: baseline; }
.levlog.two { grid-template-columns: 1fr 1fr; column-gap: 8px; max-width: 760px; font-size: 13px; }
.levlog b { color: var(--gold); text-align: left; font-family: var(--display); font-weight: 400; font-size: 17px; }
.levlog span:nth-child(2) { text-align: left; color: var(--white); }
.over-logo.won { color: var(--gold); text-shadow: 0 4px 0 #3a2a00, 0 0 40px rgba(255, 213, 79, 0.55); }

/* Keyboard focus is visible (buttons, settings); mouse clicks don't show the ring. */
:focus-visible { outline: 2px solid #4fc3f7; outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }
/* Reduced motion: no looping CSS animations (pulses, nudges); the canvas reads prefs.shake (0 by default here). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 900px) { #modes { grid-template-columns: 1fr; } }
body.lowres { --dim: #b9c4b9; }
/* title at 1280x720: the three steps must fit without scrolling (after the base title-flow rules) */
@media (max-height: 820px) and (orientation: landscape) {
  .title-panel .legend { display: none !important; }
  .title-panel .beginner label { margin: 0; }
  #run-opts button.mode-sub span { font-size: 11.5px; }
  .char { padding: 6px 9px 7px; gap: 3px; }
  .char .cstyle, .char .crow span { -webkit-line-clamp: 2; }
  .chead b { font-size: 22px; }
}
/* the visit console never scrolls: when it is full the bed key gives up its height first, then the power-up list
   (late Siege with a ready ability is the tightest case at 1280x720) */
#hud-r #pickups, #hud-r #fh-key { min-height: 0; overflow: hidden; }
#hud-r #pickups { flex: 0 1 auto; }
#hud-r #fh-key { flex: 0 20 auto; }
/* same for the battle console: the log goes first (flex 1), then the defences / loadout list, then intel */
#hud-l #mods, #hud-l #intel { min-height: 0; overflow: hidden; }
#hud-l #mods { flex: 0 4 auto; }
#hud-l #intel { flex: 0 1 auto; }
/* slim visit rail with the character block: keep it to rank, meter and the next perk */
.hud.slim .ch-head .chemb, .hud.slim .ch-name, .hud.slim .pk-next .pki, .hud.slim .pk-next b { display: none; }
.hud.slim .ab-top b { font-size: 0.85em; }
.hud.slim #fh-phase .ability { display: none; }
.hud.slim .vd { height: 2.7em; }
.hud.slim .vd b { font-size: 2em; }
.hud.slim .vt { height: 3em; }
/* big-number view: the character block keeps the meter + next perk (rank is in the battle console), the visit
   tracker and the control buttons stay at normal size so late Siege with a ready ability still fits */
body.big .hud .ch-head, body.big .hud #fh-aim li:not(:first-child) { display: none; }
body.big .hud .vd { height: 3.3em; }
body.big .hud .vd b { font-size: 2.1em; }
body.big .hud .hud-foot { font-size: calc(16px * var(--cs, 1)); }
body.big .hud.slim .vd { height: 2.5em; }
body.big .hud.slim .vt { height: 2.6em; }
body.big .hud.slim .vt b { font-size: 2em; }
body.big .hud.slim #fh-phase span { font-size: 0.7em; }
.hud.slim .route { flex-direction: row; justify-content: center; }
.hud.slim .route span { font-size: 0.95em; }
.hud.slim #fieldbtns { grid-template-columns: repeat(3, 1fr); }
.hud.slim #fieldbtns button { padding: 0; }
.hud.slim .ab.ready .ab-top span { display: none; }
body.big .hud.slim .route, body.big .hud.slim .pk-next { display: none; }
body.big .hud.slim .ab-top b { font-size: 0.7em; }
body.ov-compact .hud .sec { margin-bottom: 0.15em; padding-top: 0.35em; padding-bottom: 0.35em; }
body.ov-compact .hud.slim .vd { height: 2.4em; }
.camp-char .char { width: 100%; pointer-events: none; cursor: default; border-color: var(--c); }

/* ---------- custom survivor: 4th card + pre-game build editor (main.js openCustomEditor) */
.chargrid.four { grid-template-columns: repeat(4, 1fr); }
.chargrid.four .char .cstyle { -webkit-line-clamp: 2; }
.char .cedit { align-self: flex-start; margin-top: auto; font: 600 11px/1 var(--body); letter-spacing: 0.08em; color: var(--on-accent); background: var(--c); border-radius: 5px; padding: 4px 7px; }
.char .cedit kbd { font: inherit; opacity: 0.7; }
.char .cedit.big { font-size: 13px; padding: 7px 10px; }
.char.custom.empty { border-style: dashed; }
.cust { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.72); }
.cust[hidden] { display: none; }
.cust-panel { width: min(1100px, 100%); max-height: 100%; overflow: auto; background: var(--panel2); border: 2px solid var(--line2); border-radius: 14px; padding: 14px 18px 18px; font: 500 13px/1.3 var(--body); color: var(--text); }
.cust-panel header { display: flex; gap: 14px; align-items: flex-start; }
.cust-panel header > div { font: 400 24px/1.1 var(--display); white-space: nowrap; }
.cust-panel header p { flex: 1; margin: 2px 0 0; color: var(--text); opacity: 0.85; }
.cust-panel h4 { margin: 14px 0 6px; font: 600 12px var(--body); letter-spacing: 0.12em; color: var(--gold); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cust-panel h5 { margin: 10px 0 4px; font: 600 11px var(--body); letter-spacing: 0.1em; color: var(--dim); text-transform: uppercase; }
.cust-panel button { font: inherit; color: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--line2); background: rgba(40, 48, 40, 0.9); }
.cust-panel button:disabled { opacity: 0.35; cursor: default; }
.cu-done { padding: 8px 18px; font-weight: 700 !important; background: var(--gold) !important; color: var(--on-accent) !important; border: 0 !important; }
.cu-tools { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.cu-tools button { padding: 3px 9px; font-size: 12px; letter-spacing: 0; color: var(--text); }
.cu-abs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cu-ab { text-align: left; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.cu-ab.sel { border: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); }
.cu-ab span { color: var(--text); opacity: 0.85; font-size: 12px; }
.cu-ab u { text-decoration: none; color: var(--gold); font-size: 11px; }
.cu-tree { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.cu-slot { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(30, 36, 30, 0.9); min-height: 34px; }
.cu-slot.empty { border-style: dashed; color: var(--dim); font-size: 12px; }
.cu-slot em { font: 400 15px/1 var(--display); font-style: normal; color: var(--gold); min-width: 22px; }
.cu-slot b { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-slot .pki { width: 20px; height: 20px; }
.cu-sb { display: flex; gap: 2px; }
.cu-sb button { padding: 1px 5px; font-size: 10px; }
.cu-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.cu-pk { display: flex; align-items: flex-start; gap: 7px; text-align: left; padding: 6px 8px; }
.cu-pk.has { border-color: var(--gold); }
.cu-pk .pki { width: 22px; height: 22px; flex: none; }
.cu-pk span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cu-pk small { color: var(--text); opacity: 0.8; font-size: 11px; line-height: 1.25; }
.cu-pk i { font-style: normal; font-size: 11px; color: var(--dim); }
@media (max-width: 760px) {
  .chargrid.four { grid-template-columns: repeat(2, 1fr); }
  .cu-abs { grid-template-columns: 1fr; }
  .cust-panel header { flex-wrap: wrap; }
}

/* ---------- title footer: key hints, beginner toggles and help in one row under the difficulty step */
.title-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line2); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.title-foot .throwhint { margin: 0 !important; }
.title-foot .beginner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; margin: 0 !important; }
.title-foot .beginner .link { margin: 0; }

/* ---------- portrait tablets and phones (<= 900px wide, portrait): board on top, consoles side by side below.
   Moved here from the middle of the file, where its title / camp rules lost the cascade to the base rules after it. */
@media (max-width: 900px) and (orientation: portrait) {
  #app { flex-wrap: wrap; align-content: flex-start; overflow-y: auto; }
  #field { height: 64vh; flex: none; width: 100%; order: 0; }
  .hud { width: 50%; height: auto; min-height: 36vh; order: 1; }
  .hud-tab { display: none; }
  .side-r #fh-player, .side-r #fh-phase { margin-left: 0; }
  .fh-label { padding-right: 0; }
  .cols, .setgrid { grid-template-columns: 1fr; }
  #diffs { grid-template-columns: repeat(2, 1fr); }
  .logo { font-size: 58px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .statgrid { grid-template-columns: auto auto; }
  #modes { grid-template-columns: 1fr; }
  #camp { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow-y: auto; background: var(--bg-deep); pointer-events: auto; }
  .camp-side { overflow: visible; border: 0; }
  .camp-r { grid-column: 1; order: -1; }
  .ex-card, body.ex-right .ex-card { left: 0.5em; right: 0.5em; bottom: 0.5em; width: auto; }
}

/* ---------- phones (portrait, <= 520px). Small-screen rules live at the end of the file so they win the cascade. */
@media (max-width: 520px) {
  .screen { padding: 8px; }
  .panel { padding: 14px 12px; max-height: 96vh; }
  .title-panel .logo { font-size: 42px; gap: 6px; margin-bottom: 2px; }
  .title-panel .logo small { font-size: 15px; }
  .title-panel .tag { font-size: 13px; margin: 0 0 8px; }
  .title-panel .legend { display: none; }
  .trow-head { flex-wrap: wrap; row-gap: 2px; }
  .trow-head > .dim { flex-basis: 100%; }
  #modes { grid-template-columns: 1fr; gap: 6px; }
  #modes button.mode { padding: 7px 12px; font-size: 24px; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
  #modes button.mode span.dim { display: none; }
  #run-opts { flex-wrap: wrap; gap: 6px; }
  #run-opts .so-label { flex-basis: 100%; text-align: left; }
  #run-opts button.mode-sub { flex: 1 1 140px; }
  .chargrid, .chargrid.four { grid-template-columns: 1fr; gap: 6px; }
  .char .cstyle { -webkit-line-clamp: 2; }
  .char .crow span { display: none; }
  #diffs { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .diff { padding: 6px 8px; gap: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; }
  .diff .lane { grid-row: span 3; font-size: 20px; }
  .diff b { font-size: 19px; line-height: 1; }
  .title-foot .throwhint { flex-wrap: wrap; justify-content: center; }
  .cust { padding: 6px; }
  .cust-panel { padding: 10px; }
  .cust-panel header > div { white-space: normal; font-size: 20px; }
  .cu-tree { grid-template-columns: 1fr; }
  .cu-pool { grid-template-columns: 1fr; }
  .cu-tools { margin-left: 0; }
}
@media (max-width: 900px) and (orientation: portrait) {
  #field { height: min(64vh, 100vw); } /* square board box: no dead bands above / below the board */
}

/* ---------- touch targets (WCAG 2.5.8): at least 24px everywhere, 32px+ on touch screens */
.cu-sb { gap: 4px; }
.cu-sb button { min-width: 26px; min-height: 26px; padding: 2px 6px; font-size: 11px; }
.cu-tools button { min-height: 28px; }
@media (pointer: coarse) {
  #fieldbtns button { height: max(34px, 2em); }
  .cu-sb button { min-width: 34px; min-height: 34px; }
  .cu-tools button { min-height: 36px; }
  .cu-pk { min-height: 44px; }
  .hud-tab { width: max(32px, 1.6em); height: max(32px, 1.6em); }
}
/* short landscape (phones on their side): drop console detail so the essentials fit above the pinned buttons */
@media (max-height: 480px) and (orientation: landscape) {
  .hud .more { display: none; }
}
/* calm effects (Settings, on by default with the OS reduce-motion setting): urgent states keep their colour, but don't pulse */
body.calm *, body.calm *::before, body.calm *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
/* short landscape (phones on their side): compact title so the three steps need little scrolling */
@media (max-height: 480px) and (orientation: landscape) {
  .screen { padding: 6px; }
  .title-panel { padding: 8px 14px; max-height: 98vh; }
  .title-panel .logo { font-size: 34px; gap: 6px; margin: 0; }
  .title-panel .logo small { font-size: 14px; }
  .title-panel .tag, .title-panel .legend, #modes button.mode span.dim { display: none; }
  #modes { margin: 2px 0 4px; gap: 6px; }
  #modes button.mode { padding: 4px 10px; font-size: 20px; flex-direction: row; align-items: baseline; justify-content: space-between; }
  #run-opts button.mode-sub span { display: none; }
  .char { padding: 6px 8px; gap: 3px; }
  .char .cstyle { -webkit-line-clamp: 2; font-size: 12px; }
  .char .crow span, .char .crow u, .char .ctree { display: none; }
  #diffs { margin: 4px 0; gap: 6px; }
  .diff { padding: 4px 6px; gap: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; }
  .diff .lane { grid-row: span 3; font-size: 18px; }
  .diff b { font-size: 18px; line-height: 1; }
  .title-foot { margin-top: 4px; padding-top: 4px; }
}
/* portrait tablets: four survivor cards in two rows, legend in one column (the 92px label column wrapped badly) */
@media (max-width: 900px) and (min-width: 521px) and (orientation: portrait) {
  .chargrid.four { grid-template-columns: repeat(2, 1fr); }
  .legend { grid-template-columns: 1fr; }
}

/* screen-reader-only headings (console landmarks: h1 > h2 > the h3 section titles) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* custom survivor card: the edit control is its own button beside the card (a button can't hold a button) */
.charwrap { position: relative; display: flex; min-width: 0; }
.charwrap > .char { flex: 1; min-width: 0; padding-bottom: 40px; }
.cedit-ext { position: absolute; left: 11px; bottom: 10px; min-height: 26px; padding: 3px 9px; font: 600 11px/1 var(--body); letter-spacing: 0.08em; color: var(--on-accent); background: var(--c, var(--text)); border: 0; border-radius: 5px; cursor: pointer; }
.cedit-ext kbd { font: inherit; opacity: 0.7; }
@media (pointer: coarse) { .cedit-ext { min-height: 34px; } }