:root {
  /* The game's original variable names, now pointing at the design tokens (public/tokens.css). New and
     cleaned-up rules use the tokens directly; these keep older rules working until each area is moved over. */
  --bg: var(--color-bg);
  --panel: rgba(9, 15, 22, 0.86);
  --panel-solid: var(--color-surface-1);
  --line: var(--color-line);
  --line2: var(--color-line-strong);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --cyan: var(--color-accent);
  --amber: var(--color-wait);
  --red: var(--color-danger);
  --green: var(--color-ok);
  --mono: var(--font-mono);
  --head: var(--font-head);
  --sans: var(--font-sans);
  --glow: var(--shadow-glow);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  background-image: radial-gradient(ellipse at 20% 0%, rgba(45, 226, 230, 0.08), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(255, 59, 78, 0.06), transparent 50%);
  color: var(--text); font: 14px/1.45 var(--sans);
}
.hidden { display: none !important; }
a { color: var(--cyan); }
code { font-family: var(--mono); background: rgba(45, 226, 230, 0.08); padding: 1px 5px; border-radius: 4px; }
button {
  font: 600 13px var(--sans); color: var(--text); background: #0f1823; border: 1px solid var(--line2);
  border-radius: 8px; padding: 8px 13px; cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
button:hover:not(:disabled) { border-color: var(--cyan); box-shadow: 0 0 12px rgba(45, 226, 230, 0.2); }
button:disabled { opacity: 0.35; cursor: not-allowed; }
button.on { background: rgba(45, 226, 230, 0.14); border-color: var(--cyan); color: #fff; }
button.primary { background: var(--cyan); color: #031015; border-color: var(--cyan); }
button.primary:hover:not(:disabled) { box-shadow: 0 0 18px rgba(45, 226, 230, 0.45); }
button.primary.on { background: var(--green); border-color: var(--green); }
button.danger { background: rgba(255, 59, 78, 0.12); border-color: var(--red); color: #ffd6da; }
button.big { font-size: 15px; padding: 11px 18px; }
button.ghost { background: transparent; }
input {
  font: 14px var(--sans); padding: 9px 11px; border: 1px solid var(--line2); border-radius: 8px; background: #070c12; color: var(--text); outline: none;
}
input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(45, 226, 230, 0.15); }
/* Our look, never the browser's: no native styling, and a field the browser autofilled anyway keeps our background
   and text colour (its own white/yellow is painted over with an inset shadow in the field's own colour, --fbg) */
input { -webkit-appearance: none; appearance: none; --fbg: #070c12; }
input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; }
input[type="range"] { -webkit-appearance: auto; appearance: auto; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:autofill {
  -webkit-text-fill-color: var(--color-text-strong); caret-color: var(--color-accent);
  -webkit-box-shadow: 0 0 0 1000px var(--fbg) inset !important; box-shadow: 0 0 0 1000px var(--fbg) inset !important; transition: background-color 9999s 0s; }
input::-webkit-contacts-auto-fill-button, input::-webkit-credentials-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; }
input::-ms-clear, input::-ms-reveal { display: none; }
input::-webkit-search-cancel-button, input::-webkit-search-decoration { -webkit-appearance: none; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.center { justify-content: center; }
.note { color: var(--muted); font-size: var(--text-md); margin: var(--space-2) 0; }
.note.warn { color: var(--color-danger-soft); }
.mono { font-family: var(--mono); font-size: 11.5px; }
.hud-label.section { margin: 22px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }

/* ---------- Home & lobby ---------- */
.screen { min-height: 100%; }

.console {
  width: 100%; max-width: 680px; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px;
  padding: 30px 32px 26px; box-shadow: var(--glow); backdrop-filter: blur(8px); position: relative; overflow: hidden;
}
.console::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: 0.7; }
.title { font: 700 58px/0.92 var(--head); letter-spacing: 0.02em; margin: 10px 0 14px; }
.title span { color: var(--cyan); text-shadow: 0 0 24px rgba(45, 226, 230, 0.45); }
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.field input { max-width: 320px; }
.maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mapcard { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 11px 13px; }
.mapcard b { font: 700 16px var(--head); }
.mapcard small { color: var(--muted); font: 11px var(--mono); }
.mapcard span { font-size: 15px; letter-spacing: 2px; margin-top: 3px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.seg .hud-label { flex-basis: 100%; margin-bottom: 2px; }
.seg.small button { padding: 5px 10px; font-size: 12px; }
.or { font: 12px var(--mono); color: var(--muted); }
.code-input { width: 104px; text-transform: uppercase; letter-spacing: 0.3em; font: 700 15px var(--mono); text-align: center; }
.invite { background: rgba(45, 226, 230, 0.08); border: 1px solid rgba(45, 226, 230, 0.35); padding: 8px 12px; border-radius: 8px; color: var(--text); }
.lobby-old .code { color: var(--cyan); font-family: var(--mono); letter-spacing: 0.18em; text-shadow: 0 0 18px rgba(45, 226, 230, 0.4); }
.share { display: flex; gap: 8px; }
.share input { flex: 1; font: 12.5px var(--mono); min-width: 0; }
.agents { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.agents li { display: flex; align-items: center; gap: var(--space-2); background: color-mix(in srgb, var(--color-text-strong) 2%, transparent); border: 1px solid var(--line); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.agents small { font: var(--text-sm) var(--mono); color: var(--muted); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 0 var(--space-1); text-transform: uppercase; }
.agents .role { margin-left: auto; font: var(--text-md) var(--mono); color: var(--cyan); }
.agents .off { color: var(--red); border-color: var(--red); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px currentColor; }

/* ---------- Game layout ---------- */
#game { position: fixed; left: 0; top: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
body:has(#game:not(.hidden)) { overflow: hidden; }
#map { position: absolute; inset: 0; background: var(--color-bg); }
#map.leaflet-container { background: var(--color-bg); font-family: var(--sans); }
#topbar { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1050; display: flex; gap: 10px; align-items: stretch; pointer-events: none; }
#topbar > * { pointer-events: auto; }
.panel, .travel, .tool-group, .feed-body, .pcard, .readybox, .xctl, #replaybar, .modal-card {
  background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--glow); backdrop-filter: blur(8px);
}
.slots { display: flex; gap: 4px; margin-top: 4px; }
.slots .slot { flex: 1 1 0; min-width: 0; gap: var(--space-0-5); }
.slot.start { flex: 0 0 auto; padding: 0 var(--space-1-5); border-style: dotted; color: var(--muted); font-size: var(--text-md); }
.slot.start .n { font-size: var(--text-sm); letter-spacing: var(--tracking-label); }
.slot.used .n { color: var(--muted); }
.slot.cur .n { color: var(--cyan); }
.slot .legs { display: flex; gap: var(--space-0-5); line-height: 1; }
.slot .leg { position: relative; font-size: var(--text-lg); color: var(--lc); }
.slot.dbl .leg { font-size: var(--text-sm); }
.slot .leg .via { position: absolute; right: -6px; bottom: -3px; font-size: var(--text-sm); color: var(--muted); }
.slot .n { letter-spacing: var(--tracking-tight); line-height: 1; font: var(--text-sm) var(--mono); color: var(--color-faint); }
.slot em { font: var(--weight-semibold) var(--text-sm) var(--mono); text-transform: uppercase; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--space-0-5); color: var(--amber); font-style: normal; }

.slot.used { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.slot.black { color: var(--red); }
.slot.intel { border-style: dashed; border-color: color-mix(in srgb, var(--color-wait) 60%, transparent); }
.slot .intel-ic { position: absolute; top: 2px; right: 3px; font-size: var(--text-sm); color: var(--amber); }
.slot.cur { box-shadow: 0 0 0 2px var(--cyan), 0 0 14px color-mix(in srgb, var(--color-accent) 50%, transparent); }
.chips { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.chip { background: var(--panel); border: 1px solid var(--c); border-radius: 20px; padding: 2px 10px; font: 600 11.5px var(--sans); white-space: nowrap; box-shadow: 0 0 10px color-mix(in srgb, var(--c) 30%, transparent); }
.chip.off { opacity: 0.45; }
.chip i { vertical-align: -1px; color: var(--muted); }
.chip.ready i { color: var(--green); }
#feed.closed { transform: translateX(100%); }
.feed-toggle { position: absolute; left: -34px; top: 10px; width: 34px; padding: 10px 0; border-radius: 8px 0 0 8px; border-right: 0; writing-mode: vertical-rl; font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-wide); background: var(--panel-solid); }
.feed-body { flex: 1; overflow-y: auto; padding: var(--space-3); border-radius: 10px 0 0 0; border-right: 0; border-bottom: 0; }
.pull { width: 100%; display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 0 8px; margin-bottom: 12px; padding: 9px 12px; }
.pull span { font-weight: 700; }
.pull small { grid-column: 1; font-weight: 400; opacity: 0.8; font-size: 11.5px; }
.pull em { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 13px var(--mono); font-style: normal; letter-spacing: 2px; }
.evidence { display: flex; flex-direction: column; gap: 10px; }
/* An intel feed card: an evidence marker. The category's icon on a small tile and the top-right corner folded in
   its colour (--ec); the card itself stays neutral */
.ev { --ec: var(--color-accent); position: relative; padding: var(--space-2) var(--space-3) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-md);
  background: color-mix(in srgb, var(--color-text-strong) 3%, var(--color-surface-1)); box-shadow: inset 0 0 0 1px var(--color-line); }
.ev::before { content: ""; position: absolute; right: 0; top: 0; width: 16px; height: 16px; border-top-right-radius: var(--radius-md); background: linear-gradient(225deg, var(--ec) 0 50%, transparent 50%); opacity: 0.85; pointer-events: none; }
.ev.intel, .ev.extract, .ev.extracted { --ec: var(--color-wait); }
.ev.capture, .ev.lockdown { --ec: var(--color-danger); }
.ev.deploy, .ev.intercept, .ev.orbital, .ev.livefeed { --ec: var(--color-uses-2); }
.ev.trace { --ec: #f5d90a; }
.ev.roadblock { --ec: var(--color-wait); }
.ev.alarm { --ec: var(--color-cash); }
.ev.cold { --ec: var(--color-muted); }
.ev.cold { opacity: 0.6; }
.ev-h { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); padding-right: var(--space-4); font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-wide); color: var(--color-muted); }
.ev-h .ev-ico { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: var(--text-md);
  color: var(--ec); background: color-mix(in srgb, var(--ec) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec) 45%, transparent); }
.ev-h .ev-lbl { color: var(--color-text-strong); min-width: 0; }
.ev-h .ev-day { margin-left: auto; white-space: nowrap; }
/* Facts an intel drop reveals: full-width rows, the label on the left and the value on the right */
.ev-facts { display: grid; gap: 2px; margin-bottom: var(--space-2); }
.ev-facts .fact { --c: var(--color-muted); display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c) 8%, transparent); font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ev-facts .fact b { margin-left: auto; text-align: right; color: var(--color-text-strong); font-weight: var(--weight-semibold); }
.ev-facts .fact.danger { --c: var(--color-danger); color: var(--color-danger-soft); }
.ev-facts .fact.danger b { color: var(--color-danger-soft); }
.truth { margin-top: 6px; font: 11px var(--mono); color: var(--red); }
.decrypt { font: 12px var(--mono); color: var(--cyan); padding: 18px 0; text-align: center; }
.cctv { position: relative; margin: 0 0 var(--space-2); border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in; border: 1px solid var(--line2); background: var(--color-bg); }
.cctv img { display: block; width: 100%; filter: saturate(0.85) contrast(1.05); }
.cctv::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-bg) 18%, transparent) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--color-bg) 45%, transparent)); }
.cctv figcaption { position: absolute; inset: 6px 8px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; font: var(--weight-semibold) var(--text-sm) var(--mono); color: var(--color-text-strong); text-shadow: 0 1px 2px var(--color-bg); z-index: 1; pointer-events: none; }
.cctv .rec { color: var(--color-text-strong); }
.cctv .rec::first-letter { color: var(--red); }
.cctv figcaption span:nth-child(2) { text-align: right; color: var(--amber); }
.cctv .mv { grid-row: 3; }
.cctv.big { max-width: 92vw; cursor: zoom-out; }
.cctv.big img { max-height: 84vh; width: auto; max-width: 92vw; }
.cctv.big figcaption { font-size: var(--text-md); inset: 12px 14px; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--cyan); border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 8px; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
#tray > * { pointer-events: auto; }
.pcard { flex: 0 0 auto; min-width: 172px; border-top: 3px solid var(--c, var(--line2)); padding: var(--space-2) 10px; font-size: var(--text-md); pointer-events: auto; transition: transform 0.15s; }
.pcard.mine { cursor: pointer; }
.pcard.sel { box-shadow: 0 0 0 1px var(--c), 0 0 22px color-mix(in srgb, var(--c) 45%, transparent); transform: translateY(-3px); }
.pc-head { display: flex; gap: var(--space-2); align-items: center; }
.pc-head b { display: block; font: var(--weight-bold) var(--text-md) var(--head); line-height: 1.15; }
.pc-head small { color: var(--muted); font-size: var(--text-sm); }
.pin { width: 24px; height: 24px; flex: none; border-radius: var(--radius-md); background: var(--c); color: var(--color-surface-1); font: var(--weight-semibold) var(--text-md) var(--mono); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.xcard { border-top-color: var(--red); flex: 0 0 180px; }
.tix { display: flex; gap: 4px; margin: 7px 0 5px; flex-wrap: wrap; }
.tk { font: 600 11px var(--mono); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--tc, var(--line2)); color: var(--text); background: color-mix(in srgb, var(--tc, #888) 12%, transparent); white-space: nowrap; }
.tk.zero { opacity: 0.3; }
.plan { min-height: 20px; display: flex; gap: 6px; align-items: center; font-size: 12px; }
.plan i { color: var(--muted); }
.readybox, .xctl { padding: 10px; display: flex; flex-direction: column; gap: 7px; justify-content: center; min-width: 210px; }
.readybox small { color: var(--muted); font-size: 11.5px; text-align: center; }
.xctl { min-width: 340px; }
.toggles { display: flex; gap: 5px; flex-wrap: wrap; }
.tog { padding: 5px 9px; font-size: 12px; }
.picks { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.picks .pick { border: 1px dashed var(--red); background: rgba(255, 59, 78, 0.08); padding: 3px 6px 3px 9px; border-radius: 6px; display: inline-flex; gap: 6px; align-items: center; }
.pick.muted { background: transparent; color: var(--muted); border-color: var(--line2); padding: 3px 9px; }

/* ---------- Map markers (shared by both renderers) ---------- */
.gm-layer { position: absolute; left: 0; top: 0; }
.gm-layer .pt { position: absolute; left: 0; top: 0; }
.pt > i { position: absolute; transform: translate(-50%, -50%); display: block; font-style: normal; }
.city > i { width: 18px; height: 18px; cursor: pointer; }
.city.mid b { border-color: var(--cyan); }
.city.hub b { inset: 4px; border: 2px solid var(--color-uses-2); }
.city:hover span, .z-hi .city span, .z-mid .city.hub span, .city.target span { display: block; }
.city:hover b { transform: scale(1.4); }
.city.target.strong b { transform: scale(1.7); background: var(--tc, var(--amber)); border-color: var(--color-text-strong); box-shadow: 0 0 14px var(--tc, var(--amber)); animation: pulse 1.2s infinite; }
.city.target.strong span { color: var(--color-text-strong); font-weight: var(--weight-semibold); }
.city.target.strong > i::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--tc, var(--amber)); opacity: 0.8; animation: ring 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 22px var(--tc, var(--amber)); } }
@keyframes ring { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
.tok > i { cursor: pointer; }
.tok-det > i {
  width: 28px; height: 28px; margin-top: -18px; border-radius: 50% 50% 50% 0; transform: translate(-50%, -50%) rotate(-45deg);
  background: var(--c); border: 2px solid var(--color-text-strong); box-shadow: 0 0 14px var(--c), 0 4px 10px color-mix(in srgb, var(--color-bg) 60%, transparent); display: flex; align-items: center; justify-content: center;
}
.tok-det > i span { transform: rotate(45deg); color: var(--color-surface-1); font: var(--weight-semibold) var(--text-md) var(--mono); }
.tok-det.active > i { animation: bob 0.9s infinite; pointer-events: none; } /* bobs under the cursor: let hovers reach the location below */
@keyframes bob { 50% { margin-top: -24px; } }
.tok-mrx > i { width: 30px; height: 30px; border-radius: 50%; background: var(--red); border: 2px solid var(--color-text-strong); color: var(--color-text-strong); display: flex; align-items: center; justify-content: center; font-size: var(--text-md); box-shadow: 0 0 20px var(--red); }
@keyframes ring2 { 50% { box-shadow: 0 0 16px rgba(255, 59, 78, 0.5); } }
.tool-pen .gm-layer, .tool-pen .leaflet-marker-pane { pointer-events: none !important; }
.tool-pen, .tool-pen * { cursor: crosshair !important; }
.tool-pen { touch-action: none; }
/* Cities you can travel to stay tappable with the pen or eraser in hand */
.tool-pen .pt.city.target, .tool-erase .pt.city.target { pointer-events: auto !important; }
.tool-pen .pt.city.target, .tool-pen .pt.city.target *, .tool-erase .pt.city.target, .tool-erase .pt.city.target * { cursor: pointer !important; }
#map:not(.tool-erase) path.sketch { pointer-events: none !important; }
.replaying .city > i { opacity: 0.6; }

/* popup, stamp, toasts */
#stamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1500; }
#stamp > div { opacity: 0; text-align: center; padding: 14px 34px; border: 1px solid var(--amber); background: rgba(5, 8, 13, 0.82); border-radius: 10px; box-shadow: 0 0 40px rgba(255, 176, 32, 0.35); }
#stamp b { display: block; font: 700 40px var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); text-shadow: 0 0 18px rgba(255, 176, 32, 0.6); }
#stamp small { font: 13px var(--mono); color: var(--text); letter-spacing: 0.08em; }
#stamp.show > div { animation: stamp 2.8s ease-out forwards; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.15); filter: blur(4px); } 10% { opacity: 1; transform: scale(1); filter: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#toasts { position: fixed; left: 50%; bottom: 180px; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: var(--panel-solid); border: 1px solid var(--line2); color: var(--text); padding: 9px 16px; border-radius: 8px; box-shadow: var(--glow); font-weight: 600; font-size: 13px; max-width: 80vw; transition: opacity 0.5s, transform 0.5s; }
.toast.out { opacity: 0; transform: translateY(8px); }

#modal, #lightbox { position: fixed; inset: 0; z-index: 4000; background: rgba(2, 4, 7, 0.78); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(3px); }
.modal-card { padding: 30px; max-width: 500px; text-align: center; background: var(--panel-solid); }
.modal-card h2 { font: 700 20px var(--head); margin: 8px 0; }
.verdict { display: inline-block; font: var(--weight-bold) var(--text-3xl) var(--head); letter-spacing: var(--tracking-wide); margin: 10px 0 var(--space-1); }
.verdict.det { color: var(--green); text-shadow: 0 0 30px color-mix(in srgb, var(--color-ok) 50%, transparent); }
.verdict.mrx { color: var(--red); text-shadow: 0 0 30px color-mix(in srgb, var(--color-danger) 50%, transparent); }

#replaybar { display: none; }
.replay #replaybar input { flex: 0 0 180px; padding: 0; border: 0; background: transparent; accent-color: var(--red); box-shadow: none; }
.replay .rlabel { flex: 1; font-size: var(--text-md); font-weight: var(--weight-semibold); min-width: 0; }
.replay .rlabel small { color: var(--muted); margin-right: var(--space-1-5); font-family: var(--mono); }

/* Google & Leaflet chrome */
.gm-style .gmnoprint button, .leaflet-control-zoom a { background: var(--panel-solid) !important; color: var(--text) !important; border-color: var(--line2) !important; }
.gm-style-cc, .gm-style a[href^="https://maps.google.com/maps"] { opacity: 0.5; }

@media (max-width: 900px) {
  #topbar { flex-wrap: wrap; }
  .chips { flex-direction: row; overflow-x: auto; max-width: 100%; }
  .xctl, .readybox { min-width: 0; flex: 1 1 100%; }
  .title { font-size: 42px; }
  .console { padding: 24px 18px 20px; }
}

/* ---------- Icons ---------- */
[class^="ph-"], [class*=" ph-"] { vertical-align: -2px; }
button [class*=" ph-"], button [class^="ph-"] { margin-right: 2px; }
/* (an icon alone in a badge sits dead centre: no gap after it) */
button .pin [class*=" ph-"], button .pin [class^="ph-"] { margin-right: 0; }

/* ---------- Detective cards: active one large, others collapsed ---------- */
.pcard.mini { display: flex; align-items: center; gap: var(--space-2); min-width: 150px; padding: var(--space-2) 10px; align-self: flex-end; opacity: 0.85; }
.pcard.mini:hover { opacity: 1; }
.pcard.mini b { display: block; font: var(--weight-bold) var(--text-md) var(--head); }
.pcard.mini small { color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
.pcard.mini small b { display: inline; font: inherit; color: var(--text); }
.pcard.big { min-width: 290px; padding: var(--space-3) 14px; box-shadow: 0 0 0 1px var(--c), 0 0 26px color-mix(in srgb, var(--c) 35%, transparent), var(--glow); }
.pcard.big .pin { width: 32px; height: 32px; font-size: var(--text-lg); border-radius: var(--radius-md); }
.pcard.big .pc-head b { font-size: var(--text-xl); }
.pcard.big .pc-head small { display: block; font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.pcard.xcard { --c: var(--red); }
.tiles { display: flex; gap: 6px; margin: 10px 0 8px; }
.tile { flex: 1 1 0; min-width: 0; border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); background: color-mix(in srgb, var(--tc) 10%, transparent); border-radius: 8px;
  padding: 6px 4px 5px; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.tile i { font-size: 18px; color: var(--tc); }
.tile b { font: 700 19px/1.1 var(--mono); }
.tile small { font: 600 9px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); max-width: 100%; overflow-wrap: anywhere; }
.tile.zero { opacity: 0.3; }
.plan .ok { color: var(--green); }
.pcards { display: flex; gap: var(--space-2); min-width: 0; max-width: 100%; overflow-x: auto; padding: var(--space-1) var(--space-0-5) var(--space-0-5); pointer-events: none; align-items: flex-end; }

/* ---------- Special ability card ---------- */
.ability { border: 1px solid rgba(199, 125, 255, 0.45); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(199, 125, 255, 0.12), rgba(45, 226, 230, 0.05)); }
.ability.ready { border-color: #c77dff; box-shadow: 0 0 18px rgba(199, 125, 255, 0.3); }
.ab-h { display: flex; justify-content: space-between; align-items: center; font: 600 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #d9b8ff; }
.charges { display: flex; gap: 3px; }
.charge { width: 16px; height: 8px; border-radius: 2px; border: 1px solid #c77dff; display: inline-block; }
.charge.on { background: #c77dff; box-shadow: 0 0 8px #c77dff; }
.ab-main { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.ab-ic { font-size: 26px; color: #d9b8ff; padding: 6px; border: 1px solid rgba(199, 125, 255, 0.5); border-radius: 8px; }
.ab-main b { display: block; font: 700 14px var(--head); }
.ab-main small { color: #b9c6d3; font-size: 12px; }
.ab-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 11px var(--mono); color: var(--muted); }
.ability button.primary { background: #c77dff; border-color: #c77dff; color: #12051c; }
.ability button.primary:hover:not(:disabled) { box-shadow: 0 0 18px rgba(199, 125, 255, 0.6); }

/* ---------- Photo thumbnails ---------- */
.cctv figcaption .zoom { grid-row: 3; grid-column: 2; text-align: right; font-size: var(--text-md); opacity: 0.8; }
.dot-rec { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 5px; vertical-align: 0; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }

/* ---------- Briefing terminal ---------- */
#brief { position: absolute; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(2, 4, 7, 0.55); backdrop-filter: blur(2px); animation: fadeIn 0.3s; }
#brief.out { animation: fadeOut 0.4s forwards; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
.brief-foot { display: flex; flex-direction: column; align-items: center; margin-top: 18px; gap: 8px; }
.brief-foot button { opacity: 0; transition: opacity 0.3s; }
#brief.done .brief-foot button { opacity: 1; }
#brief .brief-box { pointer-events: auto; cursor: pointer; width: min(560px, 90vw); background: rgba(4, 8, 12, 0.94); border: 1px solid var(--tone); border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 50px color-mix(in srgb, var(--tone) 30%, transparent); padding: 14px 20px 12px; font-family: var(--mono); animation: briefIn 0.45s ease-out; position: relative; overflow: hidden; }
#brief .brief-box::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px); }
#brief.tone-cyan { --tone: var(--cyan); } #brief.tone-amber { --tone: var(--amber); } #brief.tone-red { --tone: var(--red); }
.brief-h { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.16em; color: var(--muted); border-bottom: 1px solid var(--line2); padding-bottom: 6px; margin-bottom: 10px; }
.brief-title { font: 700 26px var(--head); letter-spacing: 0.08em; color: var(--tone); text-shadow: 0 0 16px color-mix(in srgb, var(--tone) 60%, transparent); min-height: 34px; }
.brief-lines { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: #d5e2ee; min-height: 20px; }
.brief-title::after, .bl:last-child::after { content: "▌"; margin-left: 2px; color: var(--tone); animation: blink 0.9s steps(2) infinite; }
#brief.done .brief-title::after { content: none; }
.brief-box:has(.bl) .brief-title::after { content: none; }
.brief-hint { font-size: 10px; color: var(--amber); letter-spacing: 0.1em; }
#brief.out .brief-box { animation: briefOut 0.45s ease-in forwards; }
@keyframes briefIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes briefOut { to { opacity: 0; transform: translateY(-8px); filter: blur(3px); } }

/* ---------- Tablet photo viewer ---------- */
#lightbox { padding: 20px; }
.vscreen { position: relative; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 16 / 10; border: 1px solid #000; box-shadow: 0 0 0 1px #2a3846; }
.vscreen img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.8) contrast(1.08) brightness(0.95); animation: flicker 4s infinite; }
.vscreen::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55)); }
.scanbar { position: absolute; left: 0; right: 0; height: 18%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(45, 226, 230, 0.10), rgba(255, 255, 255, 0.06), transparent); animation: scan 3.2s linear infinite; }
.noise { position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: 0.06; animation: grain 0.6s steps(3) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vscreen .hud { position: absolute; inset: 14px 18px 34px; z-index: 3; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; font: 600 14px var(--mono); color: #eafff7; text-shadow: 0 1px 3px #000; pointer-events: none; }
.vscreen .hud .clock { grid-row: 3; }
.vscreen .hud .mv { grid-row: 3; text-align: right; }
.tab-nav { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.tab-nav button { min-width: 44px; }
@keyframes scan { from { top: -20%; } to { top: 105%; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.85; } 94% { opacity: 1; } 97% { opacity: 0.92; } }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-5%, 3%); } 66% { transform: translate(4%, -4%); } }

/* ---------- Map tokens with icons ---------- */
.tok-mrx > i b { font-size: var(--text-xl); }

/* With the intel panel open, centre the banner in the remaining map area */

/* ---------- Game menu (top left) ---------- */
.menu { position: relative; }
.menu-btn { width: 46px; height: 100%; min-height: 46px; padding: 0; font-size: var(--text-xl); display: flex; align-items: center; justify-content: center;
  background: var(--panel); backdrop-filter: blur(8px); border-radius: var(--radius-lg); }
.menu-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1100; min-width: 230px; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2);
  background: var(--panel-solid); border: 1px solid var(--line2); border-radius: var(--radius-lg); box-shadow: var(--glow); }
.menu-pop button { text-align: left; background: transparent; border-color: transparent; }
.menu-pop button:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 8%, transparent); border-color: var(--line2); box-shadow: none; }
.menu-pop button.danger:hover { background: color-mix(in srgb, var(--color-danger) 12%, transparent); border-color: var(--red); }
.menu-info { padding: var(--space-1) var(--space-2) var(--space-2); border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); }
.menu-info b { display: block; font: var(--weight-bold) var(--text-md) var(--head); letter-spacing: var(--tracking-label); }
.menu-info small { font: var(--text-sm) var(--mono); color: var(--muted); }

/* ---------- Movement log: one row per Target ---------- */
.travel { flex: 1; min-width: 0; padding: var(--space-1-5) 10px var(--space-2); display: flex; flex-direction: column; gap: var(--space-0-5); }
.logrow { display: flex; align-items: center; gap: var(--space-2); }
.logrow .tlabel { flex: 0 0 auto; max-width: 120px; display: flex; align-items: center; gap: var(--space-1); font: var(--weight-semibold) var(--text-sm) var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logrow .tlabel b { width: 18px; height: 18px; border-radius: var(--radius-sm); background: var(--tcol); color: var(--color-bg); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-sm); flex: none; }
.travel:not(.multi) .tlabel { display: none; }
.logrow .slots, .logrow .days { flex: 1; margin-top: 0; min-width: 0; }
.travel.multi .slot { height: 32px; font-size: var(--text-md); }
.travel.multi .slot .leg { font-size: var(--text-md); }
.travel.multi .slot em { display: none; }
.logrow.is-caught { opacity: 0.55; }
.slot.caught { border-color: var(--red); background: color-mix(in srgb, var(--color-danger) 25%, transparent); }
.slot .cuff { position: absolute; left: 2px; top: 1px; font-size: var(--text-sm); color: var(--red); }

/* ---------- Tools: popovers for pen colour and route filters ---------- */
.swatch-btn { display: flex; align-items: center; justify-content: center; }
.swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); display: inline-block; }
.toolpop { position: absolute; left: calc(100% + 8px); top: 0; background: var(--panel-solid); border: 1px solid var(--line2); border-radius: 10px; padding: 8px; box-shadow: var(--glow); display: flex; gap: 6px; }
.toolpop .swatch-btn { width: 34px !important; height: 34px !important; }
.toolpop .swatch-btn.on { border-color: var(--cyan); }
.toolpop.layers { flex-direction: column; min-width: 210px; top: auto; bottom: 0; }
.layer { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 4px 2px; }
.layer i { color: var(--tc); }
.layer input { width: 16px; height: 16px; accent-color: var(--cyan); padding: 0; }

/* ---------- Cards & ready button ---------- */
.pcards .sep { flex: 0 0 1px; align-self: stretch; background: var(--line2); margin: var(--space-1-5) var(--space-1); }
.pcard.mini.caught { opacity: 0.55; }
.pin.x { background: var(--c); color: var(--color-bg); }
.tile.tog { cursor: pointer; font: inherit; color: var(--text); padding: 6px 4px 5px; }
.tile.tog.on { background: color-mix(in srgb, var(--tc) 30%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--tc) 40%, transparent); }
.pcard.xcard .picks { margin-top: var(--space-0-5); }

/* ---------- Abilities & intel tabs ---------- */
.abilities { margin-bottom: var(--space-3); }
.ab { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 7px 8px; text-align: left; border-color: rgba(199, 125, 255, 0.45); background: rgba(199, 125, 255, 0.08); }
.ab > i { font-size: 20px; color: #d9b8ff; }
.ab-t { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.ab-t b { font: 600 11px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab .pips { display: flex; gap: 2px; }
.ab .charge { width: 10px; height: 5px; }
.ab.on { background: rgba(199, 125, 255, 0.3); border-color: #c77dff; box-shadow: 0 0 14px rgba(199, 125, 255, 0.45); opacity: 1; }
.ab.spent { flex: 0 0 auto; border-color: var(--line); background: transparent; padding: 7px; }
.ab.spent .ab-t { display: none; }
.ab.spent > i { color: var(--muted); }
.ab .tip { display: none; position: absolute; top: calc(100% + 6px); right: 0; width: 250px; z-index: 5; background: var(--panel-solid); border: 1px solid var(--line2); border-radius: 8px; padding: 9px 10px; font: 400 12px/1.45 var(--sans); color: #c7d3df; box-shadow: var(--glow); white-space: normal; }
.ab:first-child .tip { left: 0; right: auto; }
.ab .tip b { color: #fff; }
.ab .tip em { color: #d9b8ff; font-style: normal; font: 600 11px var(--mono); }
/* The in-button .tip only holds the text; #floatTip shows it above everything (the panel scrolls and would clip it) */
#floatTip { position: fixed; z-index: 5000; width: 260px; pointer-events: none; }
#floatTip em { color: var(--color-uses-2-soft); font: var(--weight-semibold) var(--text-sm) var(--font-mono); font-style: normal; }
.ab:disabled { opacity: 0.55; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.tab { padding: 4px 8px; font-size: 11.5px; display: flex; align-items: center; gap: 5px; }
.tab b { width: 16px; height: 16px; border-radius: 4px; background: var(--tcol); color: #12060a; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.tab.on { border-color: var(--tcol); background: color-mix(in srgb, var(--tcol) 15%, transparent); }
.tab.caught { opacity: 0.6; }
.ev.capture { background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface-1)); cursor: pointer; }
.ev.lockdown { cursor: pointer; }
.ev.deploy { cursor: pointer; }

/* ---------- Map tokens ---------- */
/* Lockdown: a rotated square, hatched like barrier tape, with the lock icon upright in the middle. The outline
   is the timer: red for the time still sealed, running out clockwise from the top (--p = share of days left). */
.tok-lock > i::before {
  content: ""; position: absolute; inset: -3px; border-radius: var(--radius-md); padding: var(--space-0-5);
  background: conic-gradient(from -45deg, var(--red) 0 calc(var(--p, 1) * 1turn), color-mix(in srgb, var(--color-danger) 16%, transparent) 0);
  -webkit-mask: linear-gradient(var(--color-bg) 0 0) content-box, linear-gradient(var(--color-bg) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--color-bg) 0 0) content-box exclude, linear-gradient(var(--color-bg) 0 0);
}
.tok-lock > i > b {
  transform: rotate(-45deg); width: 19px; height: 19px; border-radius: 50%; background: var(--color-bg);
  display: flex; align-items: center; justify-content: center; color: var(--color-text-strong); font-size: var(--text-md);
}
.city.locked span { display: block; color: var(--color-text-strong); transform: translateX(15px); }
/* A locked place's own dot gives way to the marker (no hover effect behind it); the marker grows a touch instead */
.city.locked b { visibility: hidden; }
.tok-lock > i { width: 28px; height: 28px; border-radius: var(--radius-sm); transform: translate(-50%, -50%) rotate(45deg); pointer-events: none; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-danger) 38%, transparent) 0 3px, var(--color-bg) 3px 7px); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-bg) 55%, transparent), 0 0 16px color-mix(in srgb, var(--color-danger) 45%, transparent); transition: transform 0.15s; }
.tok-lock.hov > i { transform: translate(-50%, -50%) rotate(45deg) scale(1.18); }
/* Marker tooltip (hover): name + one line of detail, above the marker */
.tok .mtip {
  position: absolute; left: 0; bottom: 24px; transform: translateX(-50%); display: none; pointer-events: none; white-space: nowrap;
  text-align: center; z-index: 5;
}
.tok.tok-lock .mtip { border-color: color-mix(in srgb, var(--color-danger) 60%, transparent); }
.tok.tok-lock .mtip b { color: var(--color-danger); }
.tok.hov .mtip { display: block; }
.tok-det.inflight > i { opacity: 0.5; }
/* Pick mode (placing an ability): like the travel highlight (bigger, glowing, name shown), but a hollow ring in
   the ability's colour instead of a filled dot; it fills on hover */
.city.target.pick b { transform: scale(1.7); background: var(--color-bg); border: 2px solid var(--tc); box-shadow: 0 0 0 1.5px var(--color-bg), 0 0 12px var(--tc); }
.city.target.pick span { display: block; color: color-mix(in srgb, var(--tc) 55%, var(--color-text-strong)); }
.city.target.pick:hover b, .city.target.pick.hov b { transform: scale(2.2); background: var(--tc); border-color: var(--color-text-strong); }
.city.target.pick:hover span, .city.target.pick.hov span { color: var(--color-text-strong); font-weight: var(--weight-semibold); }

/* ---------- Lobby ---------- */
.console.wide { max-width: 980px; }
.lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.counts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.count { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.agents li.ai { background: transparent; border-style: dashed; }
.estimate { display: flex; gap: 10px; margin-top: 16px; padding: 11px 13px; border: 1px solid rgba(45, 226, 230, 0.35); background: rgba(45, 226, 230, 0.06); border-radius: 10px; font-size: 13px; color: #c9d6e2; }
.estimate > i { font-size: 20px; color: var(--cyan); }
.estimate small { display: block; color: var(--muted); margin-top: 4px; }
.estimate .warn { color: #ff8b97; }
.credits { font-size: 11px; opacity: 0.7; }
@media (max-width: 820px) { .lobby-grid { grid-template-columns: 1fr; } }

/* ---------- Menu: audio ---------- */
.menu-audio { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-2); margin: var(--space-1) 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.vol { display: grid; grid-template-columns: 62px 1fr; align-items: center; font-size: 12px; color: var(--muted); }
.vol input { padding: 0; border: 0; background: transparent; accent-color: var(--cyan); box-shadow: none; }
.menu-audio .row { gap: var(--space-1-5); }
.menu-audio .np { font: var(--text-sm) var(--mono); color: var(--muted); }

/* ---------- Debrief ---------- */
.modal-card.wide { max-width: 640px; width: 100%; }
.outcomes { list-style: none; padding: 0; margin: 10px 0; text-align: left; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.outcomes b { display: inline-flex; width: 18px; height: 18px; border-radius: 4px; background: var(--tcol); color: #12060a; align-items: center; justify-content: center; font-size: 10px; margin-right: 6px; }
.scores { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; margin: 8px 0; }
.scores th { font: 600 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line2); padding: 6px; }
.scores td { padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.scores tr.me td { background: rgba(45, 226, 230, 0.06); }
.scores .pts { font: 700 16px var(--mono); color: var(--cyan); text-align: right; }

/* ---------- Photo viewer zoom ---------- */
.vscreen .pan { position: absolute; inset: 0; transform-origin: center; transition: transform 0.08s; }
.vscreen .pan img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.vscreen img { animation: none; }
.vscreen .pan img { filter: saturate(0.8) contrast(1.08) brightness(0.95); animation: flicker 4s infinite; }
.vscreen.zoomed { cursor: grab; }
.vscreen.dragging { cursor: grabbing; }
.vscreen.dragging .pan { transition: none; }

/* Narrow screens: the intel panel overlays the map instead of squeezing the cards */
/* Player initials read better in the heading font than in monospace (O vs 0) */
.pin, .tok-det > i span { font-family: var(--head) !important; font-weight: var(--weight-bold); }

/* =================== Front end: boot, background, terminal menus =================== */
#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--color-bg); }
body.in-game #bg { display: none; }
.bg-map { position: absolute; top: 0; left: 0; height: 100%; width: auto; min-width: 200vw; animation: drift 240s linear infinite; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bgPing { 0% { opacity: 0; transform: scale(1); } 2% { opacity: 0.9; } 12% { opacity: 0; transform: scale(5); } 100% { opacity: 0; } }
.bg-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-bg) 28%, transparent) 0 1px, transparent 1px 3px); }
.bg-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 22%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent); animation: scan 7s linear infinite; }
.bg-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-bg) 10%, transparent) 0%, color-mix(in srgb, var(--color-bg) 75%, transparent) 80%); }
#boot, #menu { position: relative; z-index: 1; }

/* Boot */
#boot { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-5); }
#boot.leaving .boot-box { animation: briefOut 0.45s forwards; }
.boot-box { width: min(620px, 94vw); background: color-mix(in srgb, var(--color-bg) 88%, transparent); border: 1px solid var(--line2); border-radius: var(--radius-lg); padding: 18px 22px 22px; font-family: var(--mono); box-shadow: 0 0 60px color-mix(in srgb, var(--color-accent) 12%, transparent); }
.boot-head { display: flex; justify-content: space-between; font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--muted); border-bottom: 1px solid var(--line2); padding-bottom: var(--space-2); }
.boot-title { font: var(--weight-bold) var(--text-3xl) var(--head); letter-spacing: var(--tracking-label); margin: 14px 0 10px; }
.boot-title span, .title span { color: var(--cyan); text-shadow: 0 0 24px rgba(45, 226, 230, 0.45); }
.boot-log .dots { color: var(--muted); }
.boot-log .ok { color: var(--cyan); }
.boot-bar { height: 4px; background: var(--line); border-radius: var(--radius-xs); overflow: hidden; margin: var(--space-3) 0 18px; }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transition: width 0.4s; }
#bootGo { width: 100%; letter-spacing: var(--tracking-wide); text-transform: uppercase; animation: pulseBtn 1.8s infinite; }
@keyframes pulseBtn { 50% { box-shadow: 0 0 28px rgba(45, 226, 230, 0.6); } }

/* Menu frame: title stays, the terminal panel changes */
#menu { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 5vh var(--space-4); }
.menu-wrap { width: min(880px, 100%); display: flex; flex-direction: column; gap: 22px; }
.menu-head { text-align: center; }
.menu-head .title { font: 700 clamp(34px, 5.6vw, 62px)/0.95 var(--head); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-12); }
.term { background: color-mix(in srgb, var(--color-bg) 88%, transparent); border: 1px solid var(--line2); border-radius: var(--radius-lg); box-shadow: 0 0 50px color-mix(in srgb, var(--color-accent) 10%, transparent); backdrop-filter: blur(6px); overflow: hidden; }
.term-bar { display: flex; justify-content: space-between; gap: 10px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line2); background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
.term-bar b { color: var(--cyan); font-weight: var(--weight-semibold); }
#termBody { padding: 18px 20px 20px; }
.view { animation: viewIn 0.3s ease-out; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } }
.opts { display: flex; flex-direction: column; gap: var(--space-1); }
.opt { display: grid; grid-template-columns: 34px auto 1fr; align-items: baseline; gap: var(--space-1) var(--space-3); text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--space-3) 14px; font-family: var(--mono); }
.opt:has(> i) { grid-template-columns: 34px 24px auto 1fr; }
.opt .k { color: var(--muted); font-size: var(--text-md); }
.opt > i { color: var(--cyan); font-size: var(--text-xl); align-self: center; }
.opt b { font: var(--weight-semibold) var(--text-lg) var(--mono); letter-spacing: var(--tracking-label); color: var(--color-text); }
.opt small { color: var(--muted); font: var(--weight-regular) var(--text-md) var(--sans); }
.opt.hl, .opt:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 8%, transparent); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); box-shadow: none; }
.opt.hl b::before { content: "> "; color: var(--cyan); }
.opt.on { border-color: var(--cyan); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.opt.on .k { color: var(--cyan); }
.opts .opt:nth-child(1) { animation: viewIn 0.25s 0.02s both; } .opts .opt:nth-child(2) { animation: viewIn 0.25s 0.06s both; }
.opts .opt:nth-child(3) { animation: viewIn 0.25s 0.10s both; } .opts .opt:nth-child(4) { animation: viewIn 0.25s 0.14s both; } .opts .opt:nth-child(5) { animation: viewIn 0.25s 0.18s both; }
.prompt { margin-top: 14px; font: 13px var(--mono); color: var(--muted); }
.caret { color: var(--cyan); animation: blink 0.9s steps(2) infinite; margin-left: 4px; }
.back { background: transparent; border-color: transparent; color: var(--muted); font: 600 11px var(--mono); letter-spacing: 0.12em; padding: 4px 0; margin-bottom: 8px; }
.back:hover:not(:disabled) { color: var(--cyan); box-shadow: none; border-color: transparent; }
.go-row { margin-top: 22px; display: flex; justify-content: center; }
.foot { text-align: center; color: var(--muted); font-size: 12.5px; margin: 10px auto 0; max-width: 560px; }
.foot a { color: var(--cyan); }
.foot.warn { color: #ff8b97; }
.field.center { align-items: center; text-align: center; }
.field.center input { text-align: center; width: min(320px, 100%); }
.muted { color: var(--muted); }
.manual p { color: #c9d6e2; font-size: 14px; margin: 0 0 10px; }
.manual b { color: #fff; }
.opt-audio { display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; }
.opt-audio .vol { grid-template-columns: 80px 1fr; }
.credits { text-align: center; }

/* Map cards with a little region map */
.mapcard { position: relative; overflow: hidden; min-height: 168px; justify-content: flex-end; }
.mapcard .thumbwrap { position: absolute; inset: 10px 10px 62px; display: flex; align-items: center; justify-content: center; opacity: 0.85; pointer-events: none; }
.mapcard .thumb { width: 100%; height: 100%; }
.thumb .land { fill: #142230; stroke: #2c4a62; stroke-width: 0.6; }
.thumb .dots circle { fill: var(--cyan); opacity: 0.75; }
.thumb .net { fill: none; stroke: #2c4a62; stroke-width: 0.8; }
.mapcard.on .thumb .land { fill: #163042; stroke: #3b6c8c; }
.mapcard.on .thumb .dots circle { opacity: 1; filter: drop-shadow(0 0 2px var(--cyan)); }
.mapcard > b, .mapcard > small, .mapcard > .tx { position: relative; }
.mapcard > b { margin-top: auto; }

/* Lobby inside the terminal */
.lobby-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.lobby-top h2 { font: 700 22px var(--mono); letter-spacing: 0.1em; margin: 0; }
.lobby .code { color: var(--cyan); text-shadow: 0 0 16px rgba(45, 226, 230, 0.45); }
.lobby .row { margin-top: 16px; }

/* No text selection anywhere in the game (inputs excepted) */
body { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }

/* Tool panels */
.tool-group { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 7px; }
.tg-label { text-align: center; }
.tool-group button { position: relative; width: 42px; height: 42px; padding: 0; font-size: 19px; display: flex; align-items: center; justify-content: center; }
.tool-group button.on { background: rgba(45, 226, 230, 0.14); border-color: var(--cyan); }
#floatTip.small { width: auto; max-width: 260px; }

/* Join: access-code entry */
.codebox { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 14px 0 0; }
.code-slots { display: flex; gap: 12px; cursor: text; }
.cslot { width: 66px; height: 82px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(45, 226, 230, 0.03); display: flex; align-items: center; justify-content: center;
  font: 700 42px var(--mono); color: var(--cyan); text-shadow: 0 0 18px rgba(45, 226, 230, 0.7); position: relative; overflow: hidden; }
.cslot::after { content: ""; position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(45, 226, 230, 0.12), transparent); animation: scan 2.4s linear infinite; }
.cslot.filled { border-color: rgba(45, 226, 230, 0.6); animation: slotIn 0.25s ease-out; }
.cslot.cur { border-color: var(--cyan); box-shadow: 0 0 18px rgba(45, 226, 230, 0.35); }
.cslot.cur::before { content: ""; width: 3px; height: 46%; background: var(--cyan); animation: blink 0.9s steps(2) infinite; }
@keyframes slotIn { from { transform: scale(1.18); } }
.code-hidden { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.code-status { font: 600 11px var(--mono); letter-spacing: 0.18em; color: var(--muted); }
.codebox.verifying .cslot { border-color: var(--amber); color: var(--amber); text-shadow: 0 0 18px rgba(255, 176, 32, 0.7); animation: verify 0.3s steps(2) infinite; }
.codebox.verifying .code-status { color: var(--amber); }
.codebox.denied .code-slots { animation: shake 0.4s; }
.codebox.denied .cslot { border-color: var(--red); color: var(--red); text-shadow: 0 0 18px rgba(255, 59, 78, 0.7); }
.codebox.denied .code-status { color: var(--red); }
@keyframes verify { 50% { opacity: 0.55; } }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }

/* Lobby: code, three steps, launch */
.lobby-code { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px; }
.code-chips { display: flex; gap: 8px; }
.code-chips span { width: 52px; height: 62px; border: 1px solid rgba(45, 226, 230, 0.55); border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font: 700 34px var(--mono); color: var(--cyan); text-shadow: 0 0 16px rgba(45, 226, 230, 0.6); background: rgba(45, 226, 230, 0.05); }
.sides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 8px 12px; border: 1px solid var(--line2); border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, 0.02); transition: border-color 0.15s, background 0.15s; }
.side:hover { border-color: rgba(45, 226, 230, 0.5); }
.side > i { font-size: 26px; color: var(--muted); }
.side b { font: 700 14px var(--head); }
.side small { color: var(--muted); font-size: 11.5px; }
.side.on { border-color: var(--cyan); background: rgba(45, 226, 230, 0.08); box-shadow: 0 0 18px rgba(45, 226, 230, 0.18); }
.side.on > i { color: var(--cyan); }
.side .ctl { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; font: 600 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.vs { align-self: center; font: 700 18px var(--head); color: var(--muted); letter-spacing: 0.1em; }
.agents .n { margin-left: auto; font: var(--text-md) var(--mono); color: var(--muted); }
.launch { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.odds { font-size: 13px; color: #c9d6e2; text-align: center; }
.odds b { color: var(--cyan); }
.odds i { color: var(--cyan); }
.waiting { font: 12px var(--mono); color: var(--muted); }
@media (max-width: 720px) { .sides { grid-template-columns: repeat(2, 1fr); } .versus { grid-template-columns: 1fr; } .vs { justify-self: center; } }

/* Background surveillance windows */
.bg-cams { position: absolute; inset: 0; }
.cam { position: absolute; background: rgba(2, 6, 10, 0.9); border: 1px solid rgba(45, 226, 230, 0.35); border-radius: 4px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); opacity: 0.6;
  animation: camIn 0.35s steps(4); font: 600 9px var(--mono); letter-spacing: 0.1em; color: #9fe9ea; }
.cam.out { animation: camOut 0.6s steps(5) forwards; }
.cam-bar { display: flex; justify-content: space-between; padding: 3px 6px; border-bottom: 1px solid rgba(45, 226, 230, 0.25); background: rgba(45, 226, 230, 0.06); }
.cam-bar .rec { color: var(--red); animation: blink 1.2s steps(2) infinite; }
.cam-view { position: relative; }
.cam-view canvas { display: block; width: 100%; height: auto; filter: grayscale(0.55) contrast(1.15) sepia(0.2) hue-rotate(130deg) saturate(1.3); }
.cam-view::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px); pointer-events: none; }
.cam-hud { position: absolute; left: 6px; bottom: 5px; z-index: 1; color: #d6fffb; text-shadow: 0 0 4px #000; }
.cam-cross { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border: 1px solid rgba(255, 59, 78, 0.8); z-index: 1; }
.cam-cross::before, .cam-cross::after { content: ""; position: absolute; background: rgba(255, 59, 78, 0.8); }
.cam-cross::before { left: 50%; top: -8px; bottom: -8px; width: 1px; }
.cam-cross::after { top: 50%; left: -8px; right: -8px; height: 1px; }
.cam-static .cam-cross, .cam-zoom .cam-cross { display: none; }
@keyframes camIn { from { opacity: 0; transform: scaleY(0.05); } }
@keyframes camOut { to { opacity: 0; transform: scaleY(0.05); } }

/* Tagline under the title */
.motto { font: 600 13px var(--mono); letter-spacing: 0.5em; text-transform: uppercase; color: var(--red); text-shadow: 0 0 14px rgba(255, 59, 78, 0.55); margin: -4px 0 14px; padding-left: 0.5em; }
.boot-box .motto { margin: -6px 0 var(--space-3); font-size: var(--text-sm); }

/* ---------- CRT power-on transition (Access terminal) ---------- */
.boot-box.glitch { animation: glitch 0.18s steps(3) both; }
@keyframes glitch {
  0% { transform: translate(0, 0); filter: none; }
  33% { transform: translate(-6px, 2px) skewX(-4deg); filter: hue-rotate(60deg) saturate(2); box-shadow: -6px 0 0 rgba(255, 59, 78, 0.6), 6px 0 0 rgba(45, 226, 230, 0.6); }
  66% { transform: translate(5px, -3px) skewX(3deg); filter: hue-rotate(-40deg); clip-path: inset(10% 0 30% 0); }
  100% { transform: scale(1, 0.02); opacity: 0.4; }
}
#crt { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
#crt i { position: absolute; display: block; }
#crt .crt-top, #crt .crt-bot { left: 0; right: 0; height: 50.5%; background: var(--color-bg); }
#crt .crt-top { top: 0; } #crt .crt-bot { bottom: 0; }
#crt .crt-line { left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--color-text-strong); box-shadow: 0 0 18px 4px var(--cyan), 0 0 60px 12px color-mix(in srgb, var(--color-accent) 50%, transparent); transform: scaleX(0); }
#crt .crt-flash { inset: 0; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-text) 55%, transparent), color-mix(in srgb, var(--color-accent) 15%, transparent) 60%, transparent); opacity: 0; }
#crt .crt-sweep { left: 0; right: 0; height: 18vh; top: -20vh; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-accent) 16%, transparent), color-mix(in srgb, var(--color-text-strong) 8%, transparent), transparent); }
#crt.play .crt-line { animation: crtLine 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
#crt.play .crt-top { animation: crtTop 0.5s 0.28s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
#crt.play .crt-bot { animation: crtBot 0.5s 0.28s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
#crt.play .crt-flash { animation: crtFlash 0.5s 0.3s ease-out forwards; }
#crt.play .crt-sweep { animation: crtSweep 0.7s 0.45s linear forwards; }
@keyframes crtLine { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; height: 3px; } 70% { opacity: 1; height: 8px; } 100% { transform: scaleX(1); opacity: 0; height: 40px; } }
@keyframes crtTop { to { transform: translateY(-101%); } }
@keyframes crtBot { to { transform: translateY(101%); } }
@keyframes crtFlash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes crtSweep { to { top: 105vh; } }
/* The menu arrives with a brightness overshoot, a glitching title and a settling panel */
#menu.intro .menu-wrap { animation: powerOn 0.9s ease-out; }
#menu.intro .title { animation: titleGlitch 0.9s steps(1) 0.3s both; }
#menu.intro .term { animation: termIn 0.7s 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#menu.intro .motto { animation: viewIn 0.5s 0.65s both; }
@keyframes powerOn { 0% { filter: brightness(2.2) contrast(1.4); } 100% { filter: none; } }
@keyframes titleGlitch {
  0% { opacity: 0; } 10% { opacity: 1; transform: translateX(-8px); text-shadow: 4px 0 var(--red), -4px 0 var(--cyan); clip-path: inset(0 0 55% 0); }
  20% { transform: translateX(6px); clip-path: inset(40% 0 0 0); } 30% { transform: none; clip-path: none; text-shadow: 2px 0 var(--red), -2px 0 var(--cyan); }
  45% { opacity: 0.6; } 50% { opacity: 1; text-shadow: none; } 100% { opacity: 1; transform: none; }
}
@keyframes termIn { from { opacity: 0; transform: scaleY(0.04); filter: brightness(2.5); } 60% { opacity: 1; transform: scaleY(1.02); } to { transform: none; filter: none; } }

/* ---------- Abilities as "programs": square tiles with a big icon ---------- */
.ab { position: relative; height: 118px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px 8px;
  text-align: center; border: 1px solid rgba(199, 125, 255, 0.4); border-radius: 12px; background: linear-gradient(160deg, rgba(199, 125, 255, 0.12), rgba(10, 17, 25, 0.6)); }
.ab .ab-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #e5ccff;
  background: radial-gradient(circle at 30% 25%, rgba(199, 125, 255, 0.45), rgba(90, 40, 140, 0.35)); border: 1px solid rgba(217, 184, 255, 0.5); box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35); }
.ab > b { font: 700 11.5px/1.2 var(--head); letter-spacing: 0.02em; white-space: normal; color: #f1e6ff; }
.ab .pips { display: flex; gap: 3px; justify-content: center; }
.ab .charge { width: 12px; height: 5px; }
.ab.ready { border-color: #c77dff; animation: abPulse 2.4s ease-in-out infinite; }
.ab.ready .ab-icon { box-shadow: 0 0 16px rgba(199, 125, 255, 0.55), inset 0 0 10px rgba(255, 255, 255, 0.15); }
.ab.ready:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(199, 125, 255, 0.5); }
@keyframes abPulse { 50% { box-shadow: 0 0 18px rgba(199, 125, 255, 0.35); } }
.ab.on { border-color: #fff; background: linear-gradient(160deg, rgba(199, 125, 255, 0.4), rgba(10, 17, 25, 0.6)); box-shadow: 0 0 24px rgba(199, 125, 255, 0.6); }
.ab:disabled { opacity: 1; }
.ab.used, .ab:disabled:not(.on) { filter: grayscale(0.7); }
.ab.used .ab-icon, .ab:disabled:not(.on) .ab-icon { opacity: 0.55; }
.ab-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -78%) rotate(-12deg); font: 700 9px var(--mono); font-style: normal; letter-spacing: 0.12em; white-space: nowrap;
  color: #ffd6da; border: 1px solid rgba(255, 59, 78, 0.7); background: rgba(40, 6, 12, 0.85); padding: 2px 6px; border-radius: 3px; }
.ab.on .ab-stamp { color: #fff; border-color: #fff; background: rgba(90, 40, 140, 0.9); transform: translate(-50%, 40%); }
/* Out of charges: a slim greyed tile so it stops drawing attention */
.ab.spent { height: auto; align-self: end; flex: none; padding: 6px; gap: 3px; filter: grayscale(1); opacity: 0.5; border-color: var(--line); background: transparent; }
.ab.spent .ab-icon { width: 28px; height: 28px; font-size: 16px; border-radius: 8px; background: transparent; }
.ab.spent > b { font-size: 9.5px; }
.ab.spent .pips { display: none; }
.ab.spent .ab-stamp { position: static; transform: none; font-size: 8px; padding: 1px 4px; }

/* In-game menu: players */
.menu-players { border-top: 1px solid var(--line); padding: var(--space-2); margin-top: var(--space-1); display: flex; flex-direction: column; gap: var(--space-1-5); }
.mp { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 2px 8px; font-size: 12.5px; }
.mp small { color: var(--muted); font-size: 11px; }
.mp.off b { color: #ff8b97; }
.mp-act { grid-column: 1 / -1; display: flex; gap: 6px; margin: 2px 0 4px 20px; }

/* Per-detective ability kit */
.ab-head { display: flex; align-items: center; gap: var(--space-1-5); }
.pin.sm { width: 16px; height: 16px; font-size: var(--text-sm); border-radius: var(--radius-sm); border-width: 1px; }
.ab-sum { display: flex; gap: 14px; margin-top: 6px; font: 600 13px var(--mono); color: #d9b8ff; }
.ab-sum span { display: inline-flex; align-items: center; gap: 5px; }
.ab-sum i { font-size: 18px; }
.kit { display: flex; gap: 10px; margin: -2px 0 6px; font: 600 11px var(--mono); color: #d9b8ff; }
.kit span { display: inline-flex; align-items: center; gap: 3px; }
.kit span.zero { opacity: 0.3; }
.kit span.used { color: var(--muted); }

/* ---------- Confirmation dialog ---------- */
#confirm { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; background: rgba(2, 4, 7, 0.6); backdrop-filter: blur(2px); animation: fadeIn 0.2s; padding: 20px; }
.confirm-box { width: min(420px, 92vw); background: var(--panel-solid); border: 1px solid var(--red); border-radius: var(--radius-lg); padding: 18px var(--space-5); text-align: center; box-shadow: 0 0 40px color-mix(in srgb, var(--color-danger) 25%, transparent); animation: briefIn 0.25s ease-out; }
.confirm-box .hud-label { color: var(--color-danger-soft); }
.confirm-box h3 { font: var(--weight-bold) var(--text-xl) var(--head); margin: var(--space-2) 0 var(--space-1-5); }
.confirm-box p { color: #c3d0dc; font-size: var(--text-md); margin: 0 0 var(--space-4); }

/* ---------- Ready: centred above the cards ---------- */

/* ---------- End of game: dim the map, then reveal the debrief step by step ---------- */
#game.ended #map { filter: grayscale(0.6) brightness(0.55); transition: filter 1.2s; }
#modal:has(.debrief) { background: color-mix(in srgb, var(--color-bg) 55%, transparent); animation: fadeIn 0.8s; }
.debrief { animation: debriefIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); max-height: 92vh; overflow-y: auto; }
@keyframes debriefIn { from { opacity: 0; transform: translateY(24px) scale(0.97); filter: blur(6px); } }
.debrief .verdict { animation: verdictIn 0.9s 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes verdictIn { 0% { opacity: 0; transform: scale(2.2); letter-spacing: 0.5em; filter: blur(8px); } 60% { opacity: 1; filter: none; } 100% { transform: none; } }
.debrief .rv { animation: rvIn 0.45s var(--d, 0s) ease-out both; }
@keyframes rvIn { from { opacity: 0; transform: translateY(10px); } }
.debrief .reason { color: #c3d0dc; margin: var(--space-1) 0 var(--space-2); }
.debrief .outcomes li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: var(--space-2); padding: var(--space-2) 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-text-strong) 2%, transparent); }
.debrief .outcomes li b { margin: 0; }
.debrief .outcomes strong { display: block; font: var(--weight-bold) var(--text-md) var(--head); color: var(--color-text-strong); }
.debrief .outcomes span { color: var(--muted); font-size: var(--text-md); }
.debrief .oc-ic { font-size: var(--text-xl); color: var(--tcol); }

/* ---------- Replay bar ---------- */
.replay #replaybar #rSlider { flex: 1 1 200px; min-width: 120px; padding: 0; border: 0; background: transparent; accent-color: var(--red); box-shadow: none; cursor: pointer; }
.replay #replaybar .rspeed { min-width: 44px; font: var(--weight-semibold) var(--text-md) var(--mono); }
.replay #replaybar .rlabel { flex: 2 1 240px; }

/* Target card toggles */
.tile.tog { position: relative; }
.on-badge { position: absolute; top: -7px; right: -5px; font: 700 8.5px var(--mono); font-style: normal; letter-spacing: 0.08em; padding: 1px 4px; border-radius: 4px; background: var(--tc); color: #0a0f14; box-shadow: 0 0 10px var(--tc); }
.pick.dark { border-color: #9b8cff; background: rgba(155, 140, 255, 0.12); }
.plan-note { display: block; color: var(--muted); font-size: 11px; margin-top: 6px; }

/* ---------- Extraction ---------- */
.mode { border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; cursor: pointer; background: rgba(255, 255, 255, 0.02); }
.mode .ph-bold { grid-row: span 2; font-size: 22px; color: var(--muted); }
.mode b { font-size: 13px; }
.mode small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.mode.on { border-color: var(--cyan); background: rgba(45, 226, 230, 0.07); }
.mode.on .ph-bold { color: var(--cyan); }
.mode.ro { cursor: default; }
.mode.ro:not(.on) { opacity: 0.45; }

/* ---------- Lobby: teams and loadouts ---------- */
.versus { align-items: stretch; }
.vs { align-self: center; }
.team-empty { margin: 4px 0; color: var(--muted); font-size: 12px; text-align: center; }
.mblock { display: flex; flex-direction: column; gap: 6px; }
.member { display: flex; align-items: center; gap: 7px; min-width: 0; }
.member b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member .mctl { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.member .n { font: 12px var(--mono); color: var(--muted); }
.mblock .agents { gap: var(--space-1); }
.agents li.agent { padding: var(--space-1) var(--space-1-5) var(--space-1) 10px; }
.lo-ic { position: relative; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.03); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #dbe6f0; }
.lo-ic sup { position: absolute; right: -4px; top: -5px; font: 700 9px var(--mono); color: var(--amber); background: #05080d; border-radius: 6px; padding: 0 3px; }
.lo-ic.empty { border-style: dashed; color: var(--muted) !important; font-size: 11px; }
.lo-edit { font-size: 12px; color: var(--muted); margin-left: 2px; }
.agents li.ai, .mblock.ai .agents li { border-style: dashed; background: transparent; }
.team-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: auto; }
.unassigned { text-align: center; }
/* Loadout picker, opened under the agent being edited */
.lo-picker { margin-top: 12px; padding: 12px; border: 1px solid rgba(45, 226, 230, 0.45); border-radius: 12px; background: rgba(45, 226, 230, 0.04); animation: fadeIn 0.25s; }
.agents li.agent.editing { border-color: var(--cyan); }
.lo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 11px var(--mono); color: var(--muted); margin-bottom: 8px; }
.lo-head b { color: var(--cyan); }
.lo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lo-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 10px 6px 8px; border: 1px solid var(--line2); border-radius: 9px; background: rgba(255, 255, 255, 0.02); color: inherit; cursor: pointer; font: inherit; }
.lo-card:hover:not([disabled]) { border-color: rgba(45, 226, 230, 0.5); }
.lo-card.on { border-color: var(--cyan); background: rgba(45, 226, 230, 0.1); box-shadow: 0 0 14px rgba(45, 226, 230, 0.18); }
.lo-card[disabled] { opacity: 0.4; cursor: not-allowed; }
.lo-card .lo-big { font-size: 24px; color: var(--cyan); }
.lo-card b { font-size: 12px; }
.lo-card .uses { font: 9.5px var(--mono); color: var(--amber); letter-spacing: 0.04em; }
.lo-card small { font: 400 11px/1.35 var(--sans); letter-spacing: 0; text-transform: none; border: 0; padding: 0; color: var(--muted); }
.lo-card em { font: 600 8.5px var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; color: #9fb3c8; border: 1px solid var(--line2); border-radius: 4px; padding: 0 4px; }
.lo-card .tick { position: absolute; top: 5px; right: 6px; color: var(--cyan); font-size: 13px; }
@media (max-width: 720px) { .lo-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Drones, triangulation, false trails ---------- */
.ev.tri b.yes { color: var(--color-ok); }
.ev.tri b.no { color: var(--red); }
.pick.trail { border-color: #c77dff; color: #e3c4ff; }
.xcard .tiles { flex-wrap: wrap; }

/* ---------- Ability puzzles ---------- */
#puzzle { position: fixed; inset: 0; z-index: 4500; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 4, 7, 0.72); backdrop-filter: blur(3px); animation: fadeIn 0.2s; }
#puzzle.out { opacity: 0; transition: opacity 0.25s; }
.pz-card { width: min(440px, 100%); background: var(--panel-solid); border: 1px solid rgba(45, 226, 230, 0.45); border-radius: 14px; padding: 16px 18px; box-shadow: 0 0 40px rgba(45, 226, 230, 0.15); font-family: var(--mono); }
.pz-card.wide { width: min(720px, 100%); }
.pz-head { display: flex; justify-content: space-between; align-items: center; font: 700 12px var(--mono); letter-spacing: 0.14em; color: var(--cyan); }
.pz-time { color: var(--cyan); transition: color 0.3s; }
.pz-bar { height: 3px; background: var(--line); border-radius: 2px; margin: 10px 0; overflow: hidden; }
.pz-bar i { display: block; height: 100%; width: 100%; background: var(--cyan); transition: width 0.1s linear, background-color 0.3s; }
/* (the last quarter of the time: red) */
#puzzle.low .pz-bar i { background: var(--red); }
#puzzle.low .pz-time { color: var(--red); animation: pzLow 1s steps(2) infinite; }
@keyframes pzLow { 50% { opacity: 0.45; } }
.pz-sub { font: 400 12.5px/1.45 var(--sans); color: var(--muted); margin: 0 0 12px; }
.pz-hint { font-size: 10.5px; color: var(--muted); text-align: center; margin: 10px 0 0; }
.pz-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.pz-status { font: 700 12px var(--mono); letter-spacing: 0.14em; color: var(--muted); }
#puzzle.ok .screen { box-shadow: inset 0 0 0 2px rgba(51, 209, 122, 0.7), inset 0 0 40px rgba(51, 209, 122, 0.15); }
#puzzle.ok .pz-status { color: #33d17a; }
#puzzle.fail .screen { box-shadow: inset 0 0 0 2px rgba(255, 59, 78, 0.7); } #puzzle.fail .tablet { animation: shake 0.35s; }
#puzzle.fail .pz-status { color: var(--red); }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pz-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; aspect-ratio: 16 / 10; }
.pz-tile { border: 1px solid var(--line2); border-radius: 3px; background-size: 300% 300%; cursor: pointer; padding: 0; filter: saturate(0.7) contrast(1.1); }
.pz-tile.sel { outline: 2px solid var(--amber); outline-offset: -2px; }
#puzzle.ok .pz-tile { filter: none; border-color: transparent; }
.pz-cipher { font: 700 26px var(--mono); letter-spacing: 0.12em; text-align: center; padding: 16px 6px; background: #05080d; border: 1px solid var(--line); border-radius: 8px; word-break: break-word; }
.pz-cipher .r0, .pz-rotor.r0 span { color: #2de2e6; }
.pz-cipher .r1, .pz-rotor.r1 span { color: #ffb020; }
.pz-cipher .r2, .pz-rotor.r2 span { color: #ff5fa2; }
.pz-rotors { display: flex; justify-content: center; gap: 18px; margin-top: 14px; }
.pz-rotor { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; border: 1px solid var(--line2); border-radius: 10px; }
.pz-rotor.focus { border-color: var(--cyan); }
.pz-rotor span { font: 700 22px var(--mono); }
.pz-rotor button { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 2px 8px; }
.pz-rotor button:hover { color: #fff; }
.pz-cal { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pz-cal canvas { width: 100%; max-width: 300px; height: 70px; background: #05080d; border: 1px solid var(--line); border-radius: 8px; }
.pz-knob { width: 110px; height: 110px; border-radius: 50%; border: 2px solid var(--line2); background: radial-gradient(circle at 40% 35%, #1c2a38, #0a1118); position: relative; cursor: grab; touch-action: none; box-shadow: 0 0 22px rgba(45, 226, 230, 0.12); }
.pz-knob i { position: absolute; left: 50%; top: 8px; width: 4px; height: 26px; margin-left: -2px; border-radius: 2px; background: var(--cyan); }
.pz-lock { font: 700 11px var(--mono); letter-spacing: 0.14em; color: var(--muted); }
.pz-lock b { color: var(--cyan); }
.pz-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 220px; margin: 0 auto; }
.pz-pad { aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--line2); cursor: pointer; opacity: 0.35; transition: opacity 0.1s, box-shadow 0.1s; }
.pz-pad.p0 { background: #2de2e6; } .pz-pad.p1 { background: #ffb020; } .pz-pad.p2 { background: #ff5fa2; } .pz-pad.p3 { background: #33d17a; }
.pz-pad.lit { opacity: 1; box-shadow: 0 0 24px currentColor; }
.pz-pad[disabled] { cursor: default; }
.sat-view { position: relative; aspect-ratio: 1; max-height: 70vh; margin: 10px auto 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--line2); }
.sat-view canvas { width: 100%; height: 100%; display: block; filter: saturate(0.6) contrast(1.15) brightness(0.95); }
.sat-view.low canvas { image-rendering: pixelated; }
.sat-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(45, 226, 230, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 226, 230, 0.12) 1px, transparent 1px); background-size: 12.5% 12.5%; pointer-events: none; }
.sat-sweep { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(45, 226, 230, 0.14), transparent); animation: sweep 3s linear infinite; pointer-events: none; }
@keyframes sweep { from { top: -30%; } to { top: 100%; } }
.live-view { height: min(60vh, 460px); margin-top: 10px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line2); background: #05080d; }
.ev .mini { margin-left: var(--space-1-5); }

/* ---------- Informants and body doubles ---------- */
/* Informant: the detective pin in negative (dark fill tinted with the owner's colour, coloured outline and icon) */
.tok-informant > i {
  width: 26px; height: 26px; margin-top: -17px; border-radius: 50% 50% 50% 0; transform: translate(-50%, -50%) rotate(-45deg);
  background: color-mix(in srgb, var(--c) 22%, var(--color-bg)); border: 2px solid var(--c); box-shadow: 0 0 14px var(--c), 0 4px 10px color-mix(in srgb, var(--color-bg) 60%, transparent); /* same glow as the detective pins */
  display: flex; align-items: center; justify-content: center; transition: transform 0.15s;
}
.tok-informant > i > b { transform: rotate(45deg); color: var(--c); font-size: var(--text-md); }
.tok-informant.active > i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-strong) 30%, transparent), 0 0 14px var(--c), 0 4px 10px color-mix(in srgb, var(--color-bg) 60%, transparent); }
.tok-informant.hov > i { transform: translate(-50%, -50%) rotate(-45deg) scale(1.12); }
.tok-informant .mtip { bottom: 40px; border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.tok-informant .mtip b { color: var(--c); }
.inf-btn { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line2); border-radius: 8px; background: rgba(255, 255, 255, 0.02); color: inherit; font: 12px var(--sans); cursor: pointer; text-align: left; }
.inf-btn small { margin-left: auto; color: var(--muted); font: 10px var(--mono); }
.inf-btn.on { border-color: #33d17a; background: rgba(51, 209, 122, 0.08); }
.pick.decoy { border-color: #ffb020; color: #ffd27a; }

/* ---------- Drawings: chisel-tip marker shapes ---------- */
.sketch-svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.sketch-svg path { shape-rendering: geometricPrecision; }
.tool-erase .sketch-svg path { pointer-events: visiblePainted; cursor: pointer; }
/* (the shape under the eraser fades as one: its lines are gathered in a group, so where they overlap doesn't show) */
.tool-erase .sketch-svg > path:hover, .tool-erase .sketch-svg g.erase-grp { opacity: 0.45; }
.replay #replaybar .rsketch.on { color: var(--cyan); border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
.pz-tile.right { cursor: default; filter: none; border-color: rgba(51, 209, 122, 0.7); box-shadow: inset 0 0 0 1px rgba(51, 209, 122, 0.5); }

/* =====================================================================
   Workstation layout: separate sections instead of panels floating on the map
   top bar · tools | map | intel · agent console
   ===================================================================== */
#game {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) var(--feed-w, 64px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top top top" "tools map feed" "tools bottom feed";
  background: var(--bg);
}
#game.feed-open { --feed-w: 380px; }
#game > #map { position: relative; inset: auto; grid-area: map; min-height: 0; }
/* Section chrome */
#topbar, #feed, #tray { background: var(--panel-solid); border-color: var(--line2); }

/* Top bar: menu + movement log */
#topbar { position: relative; grid-area: top; inset: auto; z-index: 1100; padding: 8px 10px; gap: 10px; border-bottom: 1px solid var(--line2); } /* one square */
#topbar .travel { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding: 0 var(--space-1); }
#topbar .travel .slot { height: 46px; }
#topbar .travel.multi .slot { height: 34px; }

/* Left column: tools */

/* Banner sits at the top of the map section */
#stamp { grid-area: map; }

/* Right column: intel. Collapsed it is a narrow rail; open it pushes the map aside */
#feed { right: 0; bottom: 0; transition: transform 0.25s; position: relative; grid-area: feed; inset: auto; top: auto; width: auto; transform: none !important; border-left: 1px solid var(--line2); display: flex; flex-direction: column; min-height: 0; z-index: 1050; }
#feed .feed-toggle { position: static; width: 100%; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; writing-mode: horizontal-tb; padding: 10px var(--space-2); background: transparent; font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-wide); color: var(--muted); display: flex; align-items: center; justify-content: center; gap: var(--space-1-5); }
#feed.closed .feed-toggle { width: 42px; border-color: var(--cyan); flex: 1; writing-mode: vertical-rl; border-bottom: 0; color: var(--cyan); left: auto; }
#feed.closed .feed-toggle:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
#feed.closed .feed-body { display: none; }
#feed .feed-body { flex: 1; min-height: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }

/* Bottom: the agent console */
#tray { left: 70px; right: 70px; bottom: 10px; justify-content: center; transition: right 0.25s; position: relative; grid-area: bottom; inset: auto; display: block; pointer-events: auto; border-top: 1px solid var(--line2); padding: 0; z-index: 1050; min-width: 0; }
#game.feed-open #tray { right: auto; }
.agent-console { display: flex; flex-direction: column; min-width: 0; }
.agent-tabs { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1-5) var(--space-2); border-bottom: 1px solid var(--line); }
/* (only the agents scroll; the arrows and the panel toggle stay put at the ends) */
.agent-tabs .agent-chips { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.agent-tabs .nav { flex: none; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.achip { flex: none; display: inline-flex; align-items: center; gap: var(--space-1-5); height: 30px; padding: 0 10px 0 var(--space-1); border-radius: var(--radius-md); border: 1px solid var(--line2); background: color-mix(in srgb, var(--color-text-strong) 2%, transparent); font: var(--weight-semibold) var(--text-md) var(--sans); color: var(--muted); cursor: pointer; }
.achip .pin { width: 22px; height: 22px; font-size: var(--text-sm); border-radius: var(--radius-md); }
/* A tab's state: a small tag (STBY standing by for orders, RDY planned, CAUGHT) */
.st-tag { font: var(--weight-semibold) 9px var(--mono); letter-spacing: 0.08em; padding: 2px 5px; border-radius: 3px; line-height: 1.3; }
.st-tag.wait { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.st-tag.ok { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.st-tag.x { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.achip.mine { color: var(--text); }
.achip.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--color-text-strong); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 30%, transparent); }
.achip small { font: var(--weight-regular) var(--text-sm) var(--mono); color: var(--muted); }
.achip .ro { font-size: var(--text-sm); color: var(--muted); }
.agent-tabs .sep { flex: none; width: 1px; height: 20px; background: var(--line2); margin: 0 var(--space-3); }
/* The focused agent's card, laid out wide: who/where · travel · abilities · plan */
.agent-main .pcard.big { display: grid; grid-template-columns: minmax(170px, 0.9fr) minmax(220px, 1.4fr) minmax(240px, 1.6fr); grid-template-rows: auto auto; column-gap: 18px; row-gap: var(--space-1-5); align-items: start;
  min-width: 0; padding: 0; border: 0; box-shadow: none; background: transparent; backdrop-filter: none; transform: none; }
.agent-main .pcard.big .pc-head { grid-column: 1; grid-row: 1; }
.agent-main .pcard.big .tiles { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.agent-main .pcard.big .kit, .agent-main .pcard.big .abilities, .agent-main .pcard.big .picks { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
.agent-main .pcard.big .plan, .agent-main .pcard.big .plan-note { grid-column: 1; grid-row: 2; font-size: var(--text-md); color: var(--muted); }
.agent-main .pcard.big .pc-head b { font-size: var(--text-xl); }
.agent-main .kit { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.agent-main .kit span { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1-5) var(--space-2); border: 1px solid var(--line2); border-radius: var(--radius-md); font: var(--weight-semibold) var(--text-md) var(--mono); }
.agent-main .kit span.zero { opacity: 0.35; }
.agent-main .kit span.used { border-style: dashed; color: var(--muted); }
.agent-main .abilities { padding: 0; }
.agent-main .abilities .hud-label { display: none; }
.agent-main .ab-row { margin-top: 0; flex-wrap: wrap; }
.agent-main .ab { flex: 1 1 120px; }
.agent-main .inf-btn { margin-top: var(--space-1-5); }
/* Ready: the big action in the map's bottom-right corner, above everything on the map */

/* Replay: the bar takes over the console */
.replay #tray { display: none; }

/* Narrow screens: the intel panel slides over the map instead of squeezing it */
@media (max-width: 900px) {
  #game, #game.feed-open { --feed-w: 44px; grid-template-columns: 52px minmax(0, 1fr) 44px; }
  /* Keep the card one row high and let it scroll sideways, so the map keeps its space */
}
@media (max-height: 720px) {
  .agent-main { min-height: 0; padding-top: 6px; padding-bottom: 8px; }
  .agent-main .tile { padding-top: var(--space-0-5); padding-bottom: var(--space-0-5); }
  .agent-main .tile b { font-size: var(--text-lg); }
  .agent-main .pcard.big .pc-head b { font-size: var(--text-lg); }
  #topbar .travel .slot { height: 36px; }
}

/* ---------- Crosshair over the map (decorative) ---------- */
#crosshair { grid-area: map; position: relative; pointer-events: none; z-index: 900; overflow: hidden; opacity: 0; transition: opacity 0.2s; }
#crosshair.on { opacity: 1; }
#crosshair i { position: absolute; background: rgba(45, 226, 230, 0.16); }
#crosshair .ch-x { left: 0; right: 0; top: var(--y); height: 1px; }
#crosshair .ch-y { top: 0; bottom: 0; left: var(--x); width: 1px; }
#crosshair span { position: absolute; font: 500 9.5px var(--mono); letter-spacing: 0.08em; color: rgba(45, 226, 230, 0.45); white-space: nowrap; }
#crosshair .ch-lat { left: 6px; top: calc(var(--y) - 14px); }
#crosshair .ch-lng { left: calc(var(--x) + 6px); bottom: 6px; }
.replay #crosshair, #game.ended #crosshair { display: none; }

/* ---------- Hovering a location: its routes and neighbours light up ---------- */
.city.hov b { transform: scale(1.5); background: var(--color-text-strong); border-color: var(--color-text-strong); box-shadow: 0 0 12px color-mix(in srgb, var(--color-text-strong) 60%, transparent); }
.city.hov span { display: block; color: var(--color-text-strong); font-weight: var(--weight-semibold); }
/* Other places fade back a little while one is hovered */
.hovering .city:not(.hov):not(.nb):not(.target) > i { opacity: 0.55; }

/* ---------- Routes (subway-style SVG) ---------- */
.route-svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.route-svg path { fill: none; stroke-linejoin: round; }
.route-svg .plans { opacity: 0.95; }

/* ---------- Location rings: white by default; hovering shows the transport colours that reach it ---------- */
.city b, .city.mid b, .city.hub b { inset: 5px; border: 1.5px solid var(--color-text); background: var(--color-surface-1); }
.city.hov b::after, .city:hover b::after { opacity: 1; transform: none; }
/* Neighbours of the hovered place show their colours too, a little smaller */
.city.nb b::after { opacity: 1; transform: none; }

/* ---------- Stronger outlines: routes, rings ---------- */
.route-svg .casing { stroke-linecap: round; stroke: var(--color-bg); }
.route-svg .base { transition: opacity 0.15s; opacity: 1; }
.hovering .route-svg .base { opacity: 1; }
.replaying .route-svg .base { opacity: 0.5; }
/* Rings: a dark outline on both sides of the colour band, and bigger on hover */
.city b::before { content: ""; position: absolute; inset: -4.5px; border-radius: 50%; background: var(--color-bg); opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.15s; }
.city.hov b::before, .city:hover b::before, .city.nb b::before { opacity: 1; transform: none; }
.city b::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--ring); opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.15s; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--color-bg) calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--color-bg) calc(100% - 2.5px)); z-index: 1; }
.city b { position: absolute; border-radius: 50%; transition: transform 0.15s, background 0.15s; box-shadow: 0 0 0 1.5px var(--color-bg); }
.city.hov b, .city:hover b { background: var(--color-surface-1); border-color: transparent; box-shadow: none; transform: scale(2.4); }
.city.nb b { border-color: transparent; transform: scale(1.5); }

/* Routes: each transport type is one group; dimmed as a whole and casting a soft shadow on what it crosses */
.route-svg .base path:not(.casing) { opacity: 1; }
.hovering .route-svg .base path:not(.casing) { opacity: 1; }
.route-svg .lvl { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--color-bg) 85%, transparent)); }

/* Routes quieter by default; a hovered place's own routes are drawn at full strength on top */
.route-svg .base .lines { opacity: 0.45; }
.route-svg .base .casing { opacity: 0.75; }
.hovering .route-svg .base .lines { opacity: 0.25; }
.hovering .route-svg .base .casing { opacity: 0.75; }
/* The name slides out when the circle grows, so they don't overlap */
.city span { position: absolute; left: 17px; top: 1px; white-space: nowrap; font: var(--weight-regular) var(--text-sm) var(--mono); color: var(--color-muted); text-shadow: 0 0 3px var(--color-bg), 0 0 6px var(--color-bg); display: none; pointer-events: none; transition: transform 0.15s; }
.city.hov span, .city:hover span { transform: translateX(12px); }
.city.nb span { display: block; color: var(--color-text-strong); transform: translateX(5px); }
.route-svg, .sketch-svg { transform-origin: 0 0; will-change: transform; }
.route-canvas { position: absolute; left: 0; top: 0; pointer-events: none; transform-origin: 0 0; }

/* Route filter strip (number keys) */
#filterHud { grid-area: map; position: absolute; left: 12px; top: 12px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 70%; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s; }
#filterHud.show { opacity: 1; transform: none; }
#filterHud span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 7px; background: var(--panel-solid); border: 1px solid var(--tc); color: #fff; font: 600 11px var(--sans); }
#filterHud span.off { border-color: var(--line2); color: var(--muted); opacity: 0.55; text-decoration: line-through; }
#filterHud span i { color: var(--tc); }
.toolpop.layers label kbd { margin-left: auto; }
/* (after the general hover shift, so a locked place's name also clears the enlarged marker) */
.city.locked.hov span, .city.locked:hover span { transform: translateX(19px); }

/* Drone: a circle in the detective's colour; like the lockdown, the outline is the timer (--p = share left) */
.tok-drone > i {
  width: 28px; height: 28px; border-radius: 50%; pointer-events: none; display: flex; align-items: center; justify-content: center;
  background: var(--color-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-bg) 55%, transparent), 0 0 16px color-mix(in srgb, var(--c) 55%, transparent); transition: transform 0.15s;
}
.tok-drone > i::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: var(--space-0-5);
  background: conic-gradient(var(--c) 0 calc(var(--p, 1) * 1turn), color-mix(in srgb, var(--c) 18%, transparent) 0);
  -webkit-mask: linear-gradient(var(--color-bg) 0 0) content-box, linear-gradient(var(--color-bg) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--color-bg) 0 0) content-box exclude, linear-gradient(var(--color-bg) 0 0);
}
.tok-drone > i > b { color: var(--color-text-strong); font-size: var(--text-lg); }
.tok-drone.hov > i { transform: translate(-50%, -50%) scale(1.18); }
.tok-drone .mtip { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.tok-drone .mtip b { color: var(--c); }
.city.droned b { visibility: hidden; }
.city.droned span { display: block; color: var(--color-text-strong); transform: translateX(12px); }
.city.droned.hov span, .city.droned:hover span { transform: translateX(16px); }
/* Watched by a drone: viewfinder corner brackets round the place, in the drone's colour */
.tok-watch > i {
  width: 24px; height: 24px; pointer-events: none;
  --k: 7px; --w: 2px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--k) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / var(--w) var(--k) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--k) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / var(--w) var(--k) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--k) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / var(--w) var(--k) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--k) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / var(--w) var(--k) no-repeat;
  filter: drop-shadow(0 0 1px var(--color-bg)) drop-shadow(0 0 1px var(--color-bg)); transition: transform 0.15s;
}
.tok-watch.grow > i, .tok-watch.hov > i { transform: translate(-50%, -50%) scale(1.35); --w: 2.5px; }
/* A hovered marker and its tooltip sit above every other marker */
.pt.tok.hov { z-index: 1000; }
.pt.tok.hov:has(.mtip) { z-index: 1001; } /* the one showing a tooltip wins over other hovered markers */
/* Area tooltip (triangulation): follows the pointer, just above it */
.tok-area .mtip b { color: var(--c); }
.tok-area .mtip { bottom: 14px; border-color: color-mix(in srgb, var(--c) 60%, transparent); }

/* Trace: a hexagon drawn like the lockdown marker (same outline, halo, glow and diagonal hatching), in
   crime-scene yellow, footprints upright on a dark disc. No text on the map (the day is in the tooltip);
   older traces fade. A false trail (only its Target sees it as fake) is the same in purple. */
.tok-trace { --ev: #f5d90a; }
.tok-trace > i, .tok-extract > i { width: 34px; height: 32px; pointer-events: none; transition: transform 0.15s, opacity 0.2s; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ev) 45%, transparent)); }
.tok-trace > i svg, .tok-extract > i svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tok-trace > i svg path, .tok-extract > i svg path { stroke-linejoin: round; }
.tok-trace > i svg .halo, .tok-extract > i svg .halo { fill: none; stroke: color-mix(in srgb, var(--color-bg) 55%, transparent); stroke-width: 13; }
.tok-trace > i svg .hex, .tok-extract > i svg .hex { stroke: var(--ev); stroke-width: 3; }
.tok-trace > i > b, .tok-extract > i > b {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 19px; height: 19px; border-radius: 50%;
  background: var(--color-bg); display: flex; align-items: center; justify-content: center; color: var(--color-text-strong); font-size: var(--text-md);
}
.tok-trace.age-2 > i { opacity: 0.8; }
.tok-trace.age-3 > i { opacity: 0.6; }
.tok-trace.age-4 > i { opacity: 0.45; }
.tok-trace.hov > i { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
.tok-trace.fake { --ev: var(--color-uses-2); }
.tok-trace .mtip, .tok-extract .mtip { border-color: color-mix(in srgb, var(--ev) 60%, transparent); }
.tok-trace .mtip b, .tok-extract .mtip b { color: var(--ev); }
.city.traced b { visibility: hidden; }
.city.traced span { display: block; color: var(--color-text-strong); transform: translateX(13px); }
.city.traced.hov span, .city.traced:hover span { transform: translateX(17px); }
.tok-extract > i { width: 36px; height: 36px; }
.tok-extract.hov > i { transform: translate(-50%, -50%) scale(1.18); }
.tok-extract { --ev: var(--color-extract); } /* escape colour (tokens.js EXTRACT_COLOR); the tooltip takes it from here */

/* Target: a player pin like the detectives' (filled with the Target's colour, white edge, glow), icon only.
   Body double: the same pin in negative (dark fill tinted with the colour, coloured edge and icon), like the
   informant. Caught: the pin darkened and greyed, no glow. */
.tok-target > i {
  width: 28px; height: 28px; margin-top: -18px; border-radius: 50% 50% 50% 0; transform: translate(-50%, -50%) rotate(-45deg);
  background: var(--c); border: 2px solid var(--color-text-strong); box-shadow: 0 0 14px var(--c), 0 4px 10px color-mix(in srgb, var(--color-bg) 60%, transparent);
  display: flex; align-items: center; justify-content: center; transition: transform 0.15s;
}
.tok-target > i > b { transform: rotate(45deg); color: var(--color-text-strong); font-size: var(--text-lg); }
.tok-target.decoy > i { background: color-mix(in srgb, var(--c) 22%, var(--color-bg)); border-color: var(--c); }
.tok-target.decoy > i > b { color: var(--c); }
.tok-target.caught > i { background: var(--color-surface-1); border-color: #8a6a70; box-shadow: 0 4px 10px color-mix(in srgb, var(--color-bg) 60%, transparent); filter: grayscale(0.6); }
.tok-target.hov > i { transform: translate(-50%, -50%) rotate(-45deg) scale(1.12); }
.tok-target .mtip { bottom: 40px; border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.tok-target .mtip b { color: var(--c); }
/* A place a detective is flying to: its dot in the detective's colour */
.city.landing b { background: var(--land); border-color: var(--land); box-shadow: 0 0 0 1.5px var(--color-bg), 0 0 10px var(--land); }
.city.landing span { display: block; }
.city.target.pick.hov b::after, .city.target.pick:hover b::after, .city.target.pick.hov b::before, .city.target.pick:hover b::before { opacity: 0; }
.city.target.pick.hov b, .city.target.pick:hover b { transform: scale(2.2); background: var(--tc); border-color: var(--color-text-strong); box-shadow: 0 0 0 1.5px var(--color-bg), 0 0 14px var(--tc); }
.city.target.pick > i::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--tc); opacity: 0.8; animation: ring 1.2s infinite; pointer-events: none; }

/* People stand above every place marker; several on one place stand side by side (--fx) */
.pt.tok-det, .pt.tok-target, .pt.tok-informant { z-index: 20; }
.tok-det > i, .tok-target > i, .tok-informant > i { margin-left: var(--fx, 0px); }
/* (fanned, --fa: each pin turned about its tip, which sits ~20px below the pin's middle, before the pin's own turn) */
.tok-det > i, .tok-target > i { transform: translate(-50%, -50%) translate(0, 19.8px) rotate(var(--fa, 0deg)) translate(0, -19.8px) rotate(-45deg); }
.tok-informant > i { transform: translate(-50%, -50%) translate(0, 18.4px) rotate(var(--fa, 0deg)) translate(0, -18.4px) rotate(-45deg); }
.tok-target.hov > i { transform: translate(-50%, -50%) translate(0, 19.8px) rotate(var(--fa, 0deg)) translate(0, -19.8px) rotate(-45deg) scale(1.12); }
/* Stacked place markers take turns: only the current one shows (cross-fade) */
.tok.stacked > i { transition: opacity 0.45s, transform 0.15s; }
.tok.stacked:not(.on) > i { opacity: 0 !important; }
.tok.in-stack .mtip { display: none !important; } /* the place's combined tooltip lists them all */
.tok-stack { pointer-events: none; }
.tok-stack .spips { position: absolute; left: 0; top: 22px; transform: translateX(-50%); display: flex; gap: var(--space-0-5); }
.tok-stack .spips i { display: block; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--color-text) 35%, transparent); box-shadow: 0 0 0 1px var(--color-bg); }
.tok-stack .spips i.on { background: var(--color-text-strong); }
.tok-stack .mtip.multi { text-align: left; display: none; bottom: 28px; }
.tok-stack.hov .mtip.multi { display: grid; grid-template-columns: auto auto; column-gap: var(--space-3); row-gap: var(--space-0-5); align-items: baseline; }
.tok-stack .mtip.multi .row { display: contents; }
.tok-stack .mtip.multi .row b, .tok-stack .mtip.multi .row small { display: block; }
.tok-stack .k-lock b { color: var(--red); } .tok-stack .k-trace b { color: #f5d90a; } .tok-stack .k-extract b { color: var(--color-extract); } .tok-stack .k-drone b { color: var(--cyan); }
/* Drone brackets round a place marker: bigger, to frame it */
.tok-watch.framing > i { width: 46px; height: 46px; --k: 9px; }
/* On a place with a marker, people stand a little higher so the marker stays visible */
.tok.on-marker.tok-det > i, .tok.on-marker.tok-target > i, .tok.on-marker.tok-informant > i { margin-top: -30px; }
.tok-det.on-marker.active > i { animation-name: bobHigh; }
@keyframes bobHigh { 50% { margin-top: -36px; } }
.tok.on-marker .mtip { bottom: 52px; }
.tok-stack.has-pins .mtip.multi { bottom: 66px; } /* above the people standing there */
.tok-stack .k-target b, .tok-stack .k-informant b, .tok-stack .k-det b { color: var(--c); }
.tok-watch .mtip { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.tok-watch .mtip b { color: var(--c); }
.tok-stack .k-watch b { color: var(--c); }
/* Timed tasks open on a ready step: nothing runs until Start */
.pz-ready { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 0 18px; }
.pz-ready .pz-start { font-size: 16px; padding: 12px 28px; letter-spacing: 0.06em; }
.pz-ready small { color: var(--muted); font: 500 11px var(--mono); }
.live-view.waiting { display: flex; align-items: center; justify-content: center; }

/* Agent panel, layout A: an ID card (colour, pin, name, location) | ticket stubs | ability cards, each section labelled */
/* (the agent, then its abilities; tickets are unlimited in every mode, so they aren't shown) */
.agent-main .pcard.big.lay-a { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(300px, 2.7fr); grid-template-rows: auto; column-gap: var(--space-3); align-items: stretch; }
.lay-a .pc-id { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, var(--color-surface-1)), var(--color-surface-1) 60%); }
.lay-a .pc-band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 22px; padding: 0 var(--space-3); flex: none;
  background: color-mix(in srgb, var(--c) 22%, var(--color-surface-1)); color: var(--c); font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; }
.lay-a .pc-band span { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; max-width: calc(50% - 26px); overflow: hidden; text-overflow: ellipsis; }
.lay-a .pc-band span:last-child { justify-content: flex-end; }
.lay-a .pc-band::after { content: ""; position: absolute; left: 50%; top: 7px; width: 34px; height: 7px; margin-left: -17px; border-radius: 4px; background: var(--color-bg); box-shadow: inset 0 1px 2px #000; }
.lay-a .pc-row { flex: 1; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.lay-a .pc-code { position: absolute; right: var(--space-3); bottom: var(--space-2); width: 64px; height: 16px; opacity: 0.3; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--color-text) 0 1px, transparent 1px 3px, var(--color-text) 3px 5px, transparent 5px 6px, var(--color-text) 6px 7px, transparent 7px 10px); }
.lay-a .pc-id .pin { width: 40px; height: 40px; font-size: var(--text-xl); flex: none; }
.lay-a .pc-id-t { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; max-width: 72%; position: relative; z-index: 1; }
.lay-a .pc-id-t b { font: var(--weight-bold) var(--text-xl)/1.1 var(--head); color: var(--color-text-strong); }
.lay-a .pc-id-t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--weight-semibold) var(--text-md)/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: var(--color-text); }
.lay-a .pc-id-t small i { margin-right: var(--space-1); color: var(--c); vertical-align: -1px; }
.lay-a .pc-id-t { min-width: 0; flex: 1; }
.lay-a .pc-sec { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.lay-a .pc-abl .abilities, .lay-a .pc-abl .ab-row { margin: 0; }
/* Tickets as stubs: a tear line before the count, with notches cut into both edges at the tear */
.tixlist { display: grid; gap: var(--space-1); align-content: start; }
.ticket {
  --stub: 40px; display: grid; grid-template-columns: 1fr var(--stub); align-items: stretch; min-height: 30px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 16%, var(--color-surface-1)), color-mix(in srgb, var(--tc) 9%, var(--color-surface-1)));
  border-radius: var(--radius-sm);
  -webkit-mask: radial-gradient(circle 5px at calc(100% - var(--stub)) 0, transparent 98%, var(--color-bg)) top / 100% 51% no-repeat, radial-gradient(circle 5px at calc(100% - var(--stub)) 100%, transparent 98%, var(--color-bg)) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 5px at calc(100% - var(--stub)) 0, transparent 98%, var(--color-bg)) top / 100% 51% no-repeat, radial-gradient(circle 5px at calc(100% - var(--stub)) 100%, transparent 98%, var(--color-bg)) bottom / 100% 51% no-repeat;
}
.ticket .t-main { display: flex; align-items: center; gap: var(--space-2); padding: 0 10px; font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); border-left: 3px solid var(--tc); }
.ticket .t-main i { font-size: var(--text-lg); color: var(--tc); }
.ticket .t-stub { display: flex; align-items: center; justify-content: center; font: var(--weight-semibold) var(--text-lg) var(--mono); color: var(--color-text-strong); border-left: 1.5px dashed color-mix(in srgb, var(--tc) 60%, transparent); }
.ticket.zero { opacity: 0.35; }
/* Used-up abilities keep their size: dashed, greyed, marked "Used up" */
.ab.spent { height: 118px; align-self: stretch; padding: 10px 6px 8px; gap: 6px; opacity: 0.55; filter: grayscale(1); border: 1px dashed var(--line2); background: transparent; }
.ab.spent .ab-icon { width: 48px; height: 48px; font-size: 28px; border-radius: 12px; background: transparent; border-style: dashed; }
.ab.spent > b { font-size: 11.5px; }
.ab.spent .ab-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -78%) rotate(-12deg); font-size: 9px; padding: 2px 6px; color: var(--muted); border-color: var(--line2); background: #05080d; }
.ab-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-2); align-items: stretch; }

/* Movement log as calendar days (day 1 onwards). Each day is a little calendar page: a header band with the day,
   a body with the transport used that day. */
.days { display: flex; gap: 5px; margin-top: 4px; }
.dc { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; border-radius: var(--radius-md); border: 1px solid var(--line2); background: var(--color-surface-1); }
.dc-top { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-0-5); height: 16px; border-radius: 5px 5px 0 0; background: color-mix(in srgb, var(--color-text-strong) 4%, transparent); border-bottom: 1px solid var(--line); font: var(--weight-semibold) var(--text-sm) var(--mono); color: var(--color-faint); }
.dc-top::before, .dc-top::after { content: ""; position: absolute; top: -3px; width: 3px; height: 6px; border-radius: var(--radius-xs); background: var(--color-line-strong); } /* binding rings */
.dc-top::before { left: 22%; } .dc-top::after { right: 22%; }
.dc-top .intel-ic { font-size: var(--text-sm); color: var(--amber); }
.dc-top .cuff { font-size: var(--text-sm); color: var(--red); }
.dc-body { position: relative; flex: 1; min-height: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0-5); overflow: visible; }
.dc.used { border-color: color-mix(in srgb, var(--tc) 55%, transparent); }
.dc.used .dc-top { background: color-mix(in srgb, var(--tc) 22%, transparent); color: var(--color-text); border-bottom-color: color-mix(in srgb, var(--tc) 35%, transparent); }
.dc.used .dc-body { background: color-mix(in srgb, var(--tc) 7%, transparent); border-radius: 0 0 5px 5px; }
.dc-ic { position: relative; z-index: 3; display: flex; align-items: center; gap: var(--space-0-5); line-height: 1; }
.dc-ic .dc-then { font-size: var(--text-sm); color: var(--color-muted); }
.dc-ic .leg { position: relative; font-size: var(--text-xl); color: var(--lc); text-shadow: 0 0 6px var(--color-bg); } /* (a little air inside the day) */
.dc-ic .leg .via { position: absolute; right: -6px; bottom: -3px; font-size: var(--text-sm); color: var(--muted); }
.dc.intel { border-style: dashed; }
.dc.cur { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 14px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.dc.caught { border-color: var(--red); }
#topbar .travel .dc-body { min-height: 32px; }
.travel.multi .dc-body { min-height: 22px; }
.travel.multi .dc-ic .leg { font-size: var(--text-md); }
.travel.multi .dc em { display: none; }

/* Bottom agent panel: hide/show with A (the tabs row stays) */
.agent-tabs .tray-toggle { order: 99; margin-left: auto; }
#game.tray-closed .agent-main { display: none; }
.agent-main { padding: 10px 220px var(--space-3) 14px; min-height: 128px; padding-right: 14px; }
.lay-a .pc-sec > .pc-id { flex: 1; }
.dc-top .intel-ic, .dc-top .cuff { position: absolute; right: 3px; }
.dc.cur .dc-top { background: var(--cyan); color: var(--color-surface-1); }

/* ---------- The field tablet: every task, the footage and the feeds open on the same device, same size ---------- */
#puzzle { background: rgba(2, 4, 7, 0.78); }
.tablet {
  position: relative; width: min(860px, 96vw); height: min(620px, 92vh); padding: 22px 26px; border-radius: 28px;
  background: linear-gradient(160deg, #1b232d, #0d1218 55%, #151c24); border: 1px solid #2c3845;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 6px #0a0e13;
  animation: tabletIn 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.tablet::before { content: ""; position: absolute; inset: 5px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.04); pointer-events: none; }
.t-cam { position: absolute; top: 11px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #05080d; box-shadow: 0 0 0 2px #232d38, inset 0 0 2px #2de2e6; }
.t-led { position: absolute; top: 11.5px; left: calc(50% + 12px); width: 5px; height: 5px; border-radius: 50%; background: #33d17a; box-shadow: 0 0 6px #33d17a; }
/* The photo viewer: an app on the same tablet (title line, the photo filling the work area, credit and controls below) */
.v-rec { display: inline-flex; align-items: center; margin-right: 14px; color: var(--color-text-strong); }
.v-rec .dot-rec { width: 8px; height: 8px; margin-right: 7px; box-shadow: 0 0 8px var(--red); }
.v-stat { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font: 600 11px var(--mono); letter-spacing: 0.12em; color: var(--color-text); }
.v-stat .t-sep { width: 1px; height: 11px; background: var(--line2); }
#lightbox .pz-bar i { display: none; }
#lightbox .pz-head { gap: 12px; }
#lightbox .pz-head > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (the photo is part of the screen: no frame, edge or vignette round it) */
.t-app .vscreen { flex: 1; width: 100%; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 4px; box-shadow: none; }
.t-app .vscreen::before { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px); }
#lightbox .pz-foot { gap: 12px; align-items: center; }
#lightbox .tab-credit, #lightbox .tab-nav { margin: 0; }
/* (PHOTO CREDIT is a toggle: on, the credit line sits bottom centre on the photo) */
.cr-btn { position: relative; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 4px; border: 1px solid transparent; background: #212b36; color: #fff; letter-spacing: 0.08em; white-space: nowrap; cursor: pointer; }
.cr-btn input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.cr-btn:hover { border-color: rgba(45, 226, 230, 0.5); }
.cr-btn:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 1px; }
.cr-btn:has(input:checked) { border-color: var(--cyan); background: rgba(45, 226, 230, 0.16); color: var(--cyan); }
.cr-line { position: absolute; left: 50%; bottom: 12px; z-index: 4; display: none; align-items: center; gap: 18px; height: 30px; padding: 0 14px; transform: translateX(-50%);
  border-radius: 4px; background: rgba(8, 12, 17, 0.9); border: 1px solid var(--line2); white-space: nowrap; font: 600 11px/1 var(--mono); }
#lightbox:has(.cr-toggle:checked) .cr-line { display: inline-flex; }
/* (the controls as tall as the credit: one even row) */
#lightbox .tab-nav { gap: 6px; }
#lightbox .tab-nav button { height: 26px; min-width: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
#lightbox .tab-nav button i { margin: 0; font-size: 14px; }
#lightbox .tab-nav { margin-left: auto; }
/* (stepping to another photo: the tablet stays, no power-on) */
#lightbox.stay .tablet, #lightbox.stay .tablet .screen::before { animation: none; }
#lightbox.stay .tablet .screen::before { opacity: 0; }
/* (the device's hardware: buttons, bumpers, screws; drawn only by some tablet designs) */
.t-hw { display: none; position: absolute; inset: 0; pointer-events: none; }
.t-hw i { position: absolute; display: block; }
/* (scoped to the tablet: .screen is also the class of the page sections) */
.tablet .screen {
  position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #0d1a22, #05090d 70%); border: 1px solid #000; box-shadow: inset 0 0 30px rgba(45, 226, 230, 0.06);
}
.tablet .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px); }
.tablet .screen::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #dffcff; animation: powerOn 0.5s 0.1s ease-out both; }
.t-status { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 6px 14px; font: 600 10px var(--mono); letter-spacing: 0.12em; color: #6f8aa0; border-bottom: 1px solid rgba(45, 226, 230, 0.12); background: rgba(0, 0, 0, 0.25); }
.t-status i { font-size: 11px; vertical-align: -1px; }
.t-right { display: inline-flex; gap: 7px; align-items: center; }
.t-clock { color: #c5d3e0; letter-spacing: 0.06em; }
.t-app { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 18px 12px; }
.t-app .pz-head { font-size: 13px; }
.t-app .pz-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.t-app .pz-foot { flex: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(45, 226, 230, 0.1); }
@keyframes tabletIn { from { opacity: 0; transform: translateY(40px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes powerOn { 0% { opacity: 1; clip-path: inset(49.5% 0 49.5% 0); } 45% { opacity: 0.9; clip-path: inset(49.5% 0 49.5% 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
/* The start screen: an app splash */
.pz-ready { gap: 14px; padding: 0; }
.pz-splash { font: 700 22px var(--head); letter-spacing: 0.08em; color: var(--cyan); text-shadow: 0 0 18px rgba(45, 226, 230, 0.4); display: flex; align-items: center; gap: 10px; }
.pz-splash i { font-size: 30px; }
.pz-meta { display: flex; gap: 18px; font: 600 11px var(--mono); letter-spacing: 0.1em; color: #8ea3b8; text-transform: uppercase; }
.pz-meta i { color: var(--amber); margin-right: 3px; }
/* Work areas fit the screen */
.t-app .pz-tiles { height: 100%; max-height: 100%; width: auto; max-width: 100%; }
.t-app .sat-view { height: 100%; max-height: 100%; margin: 0; }
.t-app .live-view { flex: 1; width: 100%; height: auto; margin: 0; }
.pz-shots { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; align-content: center; }
.pz-shots .cctv img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .tablet { padding: 14px; border-radius: 20px; } .t-status span:first-child { display: none; } }
@media (prefers-reduced-motion: reduce) { .tablet, .tablet .screen::before { animation: none; } .tablet .screen::before { opacity: 0; } }

/* Start screen: only the title, one line and the fingerprint pad (the title bar, timer and instructions appear on scan-in) */
#puzzle.ready .t-app > .pz-head, #puzzle.ready .t-app > .pz-bar, #puzzle.ready .t-app > .pz-sub, #puzzle.ready .pz-foot .pz-status { visibility: hidden; }
.pz-ready { gap: 16px; }
.pz-splash { font-size: 26px; }
.pz-line { margin: -6px 0 6px; font: 400 14px var(--sans); color: #9fb3c8; text-align: center; }
.pz-scan {
  position: relative; width: 108px; height: 108px; padding: 0; border-radius: 50%; cursor: pointer; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(45, 226, 230, 0.16), rgba(5, 9, 13, 0.9) 70%); border: 1px solid rgba(45, 226, 230, 0.45);
  box-shadow: 0 0 24px rgba(45, 226, 230, 0.2), inset 0 0 18px rgba(45, 226, 230, 0.12); transition: transform 0.15s, box-shadow 0.2s;
}
.pz-scan:hover, .pz-scan:focus-visible { transform: scale(1.04); box-shadow: 0 0 34px rgba(45, 226, 230, 0.4), inset 0 0 18px rgba(45, 226, 230, 0.2); outline: none; }
.pz-scan .fp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 58px; color: rgba(45, 226, 230, 0.75); }
/* A scan line drifting over the print while it waits */
.pz-scan .sweep { position: absolute; left: 10%; right: 10%; height: 2px; top: 20%; background: #2de2e6; box-shadow: 0 0 10px #2de2e6; opacity: 0.7; animation: fpSweep 2.2s ease-in-out infinite; }
.pz-scan .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pz-scan .ring circle { fill: none; stroke: #2de2e6; stroke-width: 3; stroke-dasharray: 289; stroke-dashoffset: 289; }
.pz-scan.scanning .sweep { animation: fpSweep 0.3s linear 2; }
.pz-scan.scanning .ring circle { transition: stroke-dashoffset 0.65s linear; stroke-dashoffset: 0; }
.pz-scan.scanning .fp { color: #fff; }
.pz-scan.granted { border-color: #33d17a; box-shadow: 0 0 34px rgba(51, 209, 122, 0.55); }
.pz-scan.granted .fp { color: #33d17a; }
.pz-scan.granted .ring circle { stroke: #33d17a; }
.pz-scan.granted .sweep { opacity: 0; }
.pz-scan-label { font: 600 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
@keyframes fpSweep { 0%, 100% { top: 20%; } 50% { top: 78%; } }

/* Descramble: a piece snapping into place clunks in (bump, green flash, lock badge pops), then sits framed and locked */
.pz-tile { position: relative; overflow: hidden; }
.pz-tile.right { border: 2px solid rgba(51, 209, 122, 0.85); box-shadow: inset 0 0 0 1px rgba(5, 8, 13, 0.6), inset 0 0 14px rgba(51, 209, 122, 0.25); filter: none; }
.pz-tile .lockb { position: absolute; right: 4px; top: 4px; font-size: 12px; color: #fff; background: rgba(51, 209, 122, 0.9); border-radius: 50%; padding: 3px; box-shadow: 0 0 8px rgba(51, 209, 122, 0.7); }
.pz-tile.just { animation: tileLock 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); z-index: 2; }
.pz-tile.just::before { content: ""; position: absolute; inset: 0; background: rgba(51, 209, 122, 0.55); animation: tileFlash 0.6s ease-out forwards; }
.pz-tile.just .lockb { animation: lockPop 0.45s 0.1s cubic-bezier(0.3, 1.8, 0.5, 1) both; }
@keyframes tileLock { 0% { transform: scale(0.9); } 55% { transform: scale(1.07); } 100% { transform: none; } }
@keyframes tileFlash { from { opacity: 1; } to { opacity: 0; } }
@keyframes lockPop { from { transform: scale(0); } to { transform: none; } }
/* Solved: the gaps close and the frames fade, leaving one clean photo */
.t-app .pz-tiles { transition: gap 0.4s ease; }
#puzzle.ok .pz-tiles { gap: 0; }
#puzzle.ok .pz-tile { border-color: transparent; border-radius: 0; box-shadow: none; transition: border-color 0.4s, border-radius 0.4s; }
#puzzle.ok .pz-tile .lockb { opacity: 0; transition: opacity 0.3s; }
@media (prefers-reduced-motion: reduce) { .pz-tile.just, .pz-tile.just::before, .pz-tile.just .lockb, .pz-scan .sweep { animation: none; } }
.pz-tile.right:disabled { opacity: 1; cursor: default; } /* locked pieces are disabled buttons, but must read as settled, not dimmed */

/* ---------- Intercept: a signal decryption terminal (one colour on black) ---------- */
.cx-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cx { --ph: #2de2e6; position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; overflow: hidden; font-family: var(--mono); }
.cx-msg { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 3px; max-width: 100%; padding: 6px 0; }
.cx-msg .sp { width: 16px; }
.cx-msg .ch { display: flex; flex-direction: column; align-items: center; min-width: 22px; }
.cx-msg .ch b { font: 700 28px/1.1 var(--mono); color: rgba(45, 226, 230, 0.45); text-shadow: 0 0 6px rgba(45, 226, 230, 0.25); }
.cx-msg .ch i { font: 700 9px/1 var(--mono); font-style: normal; color: rgba(45, 226, 230, 0.35); letter-spacing: 1px; height: 9px; }
.cx-msg .ch.on b { color: var(--ph); text-shadow: 0 0 10px rgba(45, 226, 230, 0.6); }
.cx-msg .ch.on i { color: var(--ph); }
.cx-msg .ch.on { box-shadow: inset 0 -2px 0 rgba(45, 226, 230, 0.7); }
.cx-msg .ch.gl b { color: rgba(220, 255, 255, 0.85); transform: translateX(1px) skewX(-8deg); }
.cx-dials { position: relative; display: flex; gap: 22px; }
.cx-dial { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 10px 12px; border: 1px solid rgba(45, 226, 230, 0.18); border-radius: 6px; background: rgba(0, 0, 0, 0.45); }
.cx-dial.on { border-color: var(--ph); box-shadow: 0 0 14px rgba(45, 226, 230, 0.3); }
.cx-dial button { background: none; border: 0; padding: 2px 10px; color: rgba(45, 226, 230, 0.5); font-size: 15px; cursor: pointer; }
.cx-dial button:hover { color: var(--ph); }
.cx-drum { display: flex; flex-direction: column; align-items: center; cursor: pointer; line-height: 1.15; }
.cx-drum span { font: 600 13px var(--mono); color: rgba(45, 226, 230, 0.25); }
.cx-drum b { font: 700 22px var(--mono); color: var(--ph); letter-spacing: 0.04em; }
.cx-dial:not(.on) .cx-drum b { color: rgba(45, 226, 230, 0.6); }
.cx-tk { position: absolute; bottom: 2px; font: 700 10px/1 var(--mono); font-style: normal; color: rgba(45, 226, 230, 0.5); letter-spacing: 1px; }
.cx-hint { position: relative; font: 600 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(45, 226, 230, 0.35); }
  font: 700 12px var(--mono); letter-spacing: 0.14em; color: var(--ph); box-shadow: 0 0 22px rgba(45, 226, 230, 0.4); }
/* Cracked: letters snap into focus left to right, an inverted flash, then the stamp */
.cx.cracked .ch b { color: #e9ffff; text-shadow: 0 0 14px rgba(45, 226, 230, 0.9); animation: cxSnap 0.35s calc(var(--k, 0) * 30ms) both; }
.cx.cracked .ch i { opacity: 0; transition: opacity 0.3s; }
.cx.cracked::after { content: ""; position: absolute; inset: 0; background: var(--ph); mix-blend-mode: difference; animation: cxFlash 0.35s 0.35s both; pointer-events: none; }
@keyframes cxSnap { from { filter: blur(4px); opacity: 0.3; transform: translateY(-3px); } to { filter: none; opacity: 1; transform: none; } }
@keyframes cxFlash { 0% { opacity: 0; } 30% { opacity: 0.9; } 100% { opacity: 0; } }
/* Time out: the text dissolves back into noise */
#puzzle.fail .cx-msg .ch b { animation: cxLose 0.8s both; }
#puzzle.fail .cx-net { opacity: 0.25; transition: opacity 0.8s; }
@keyframes cxLose { to { filter: blur(6px); opacity: 0.1; letter-spacing: 0.4em; } }
@media (prefers-reduced-motion: reduce) { .cx.cracked .ch b, .cx.cracked::after { animation: none; } }
/* Orbital scan: the browser's Google satellite map inside the scan frame; blurred when uncalibrated */
.sat-map { position: absolute; inset: 0; filter: saturate(0.65) contrast(1.15) brightness(0.95); }
.sat-view.low .sat-map { filter: saturate(0.5) contrast(1.1) blur(5px); }
.sat-view .sat-grid, .sat-view .sat-sweep { z-index: 2; }
.sat-off { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 13px var(--mono); letter-spacing: 0.16em; color: var(--red); background: rgba(5, 8, 13, 0.85); z-index: 3; }

/* ---------- Orbital scan: image left, calibration right ---------- */
.ob { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; align-items: center; }
.ob.ob-view { grid-template-columns: 1fr; justify-items: center; }
.ob-img { position: relative; height: 100%; aspect-ratio: 1; max-width: 100%; justify-self: center; overflow: hidden; border-radius: 8px; border: 1px solid rgba(45, 226, 230, 0.3); background: #05080d; touch-action: none; }
.ob-stage { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform 0.12s ease-out; }
.ob-pix { position: absolute; inset: 0; overflow: hidden; }
/* Pixelation: a tiny map (or image) scaled up with hard edges */
.ob-map { position: absolute; left: 0; top: 0; filter: saturate(0.7) contrast(1.15); }
.ob-map img, .ob-map canvas, .ob-canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.ob-canvas { width: 100%; height: 100%; display: block; filter: saturate(0.7) contrast(1.15); }
/* While pixelated, Google's logo and terms would be unreadable blocks: hidden then (the footer credits the
   imagery); at full resolution they show as normal */
.ob-map.scaled .gm-style-cc, .ob-map.scaled a[href*="maps.google"], .ob-map.scaled img[alt="Google"] { display: none !important; }
.ob-img .sat-grid, .ob-img .sat-sweep { z-index: 2; }
.ob-img.zoomable { cursor: grab; }
.ob-img.zoomable:active { cursor: grabbing; }
.ob-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; flex-direction: column; gap: 4px; }
.ob-zoom .mini { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(5, 8, 13, 0.85); }
.ob-ctl { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ob-wave { width: 100%; height: 64px; background: #05080d; border: 1px solid var(--line); border-radius: 8px; }
.ob-ctl .pz-knob { width: 120px; height: 120px; }
.ob-ctl .pz-knob.locked { border-color: #33d17a; box-shadow: 0 0 24px rgba(51, 209, 122, 0.45); }
.ob-ctl .pz-knob.locked i { background: #33d17a; }
.ob-meter { width: 100%; display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 8px; font: 700 10px var(--mono); letter-spacing: 0.14em; color: var(--muted); }
.ob-meter i { height: 6px; border-radius: 3px; background: rgba(45, 226, 230, 0.1); overflow: hidden; }
.ob-meter b { display: block; height: 100%; width: 0; background: var(--cyan); transition: width 0.15s; }
.ob-meter b.on { background: #33d17a; }
.ob-res { background: linear-gradient(90deg, var(--amber), #33d17a) !important; }
.ob-hint { font: 600 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(45, 226, 230, 0.4); }
@media (max-width: 640px) { .ob { grid-template-columns: 1fr; } .ob-img { height: auto; width: 100%; } }
.ob-credit { font: 500 10px var(--mono); color: var(--muted); margin-right: auto; margin-left: 14px; }

/* ---------- Live feed firewall: a monochrome network diagram (core, four ports, packets, a terminal log) ---------- */
.fw { position: relative; width: min(100%, 560px); height: 100%; font-family: var(--mono); }
.fw::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(45, 226, 230, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 226, 230, 0.05) 1px, transparent 1px); background-size: 24px 24px; }
.fw-lines { position: absolute; inset: 0 0 64px; width: 100%; height: calc(100% - 64px); }
.fw-l { stroke: rgba(45, 226, 230, 0.22); stroke-width: 0.5; stroke-dasharray: 1.4 1; vector-effect: non-scaling-stroke; transition: stroke 0.15s; }
.fw-l.lit { stroke: #2de2e6; stroke-dasharray: none; filter: drop-shadow(0 0 2px #2de2e6); }
.fw-pk { fill: #e9ffff; opacity: 0; }
.fw-pk.go { animation: fwPk 0.38s ease-out; }
.fw-pk.p0.go { --tx: -28px; --ty: -26px; } .fw-pk.p1.go { --tx: 28px; --ty: -26px; } .fw-pk.p2.go { --tx: 28px; --ty: 26px; } .fw-pk.p3.go { --tx: -28px; --ty: 26px; }
@keyframes fwPk { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0.2; transform: translate(var(--tx), var(--ty)); } }
.fw-pk { transform-box: view-box; }
.fw-core { position: absolute; left: 50%; top: calc((100% - 64px) / 2); transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid rgba(45, 226, 230, 0.5); background: radial-gradient(circle, rgba(45, 226, 230, 0.14), rgba(5, 9, 13, 0.95) 70%); color: #2de2e6; box-shadow: 0 0 24px rgba(45, 226, 230, 0.2); }
.fw-core i { font-size: 30px; }
.fw-core small { font: 700 9px var(--mono); letter-spacing: 0.16em; color: rgba(45, 226, 230, 0.7); }
.fw-port { position: absolute; transform: translate(-50%, -50%); margin-top: -32px; width: 96px; padding: 10px 6px; border-radius: 6px; border: 1px solid rgba(45, 226, 230, 0.35); background: rgba(3, 10, 14, 0.92);
  color: rgba(45, 226, 230, 0.6); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: default; transition: box-shadow 0.15s, border-color 0.15s, color 0.15s; }
.fw-port b { font: 700 9px var(--mono); letter-spacing: 0.18em; opacity: 0.7; }
.fw-port span { font: 700 18px var(--mono); letter-spacing: 0.06em; }
.fw-port:disabled { opacity: 1; }
.fw.input .fw-port { cursor: pointer; }
.fw.input .fw-port:hover { border-color: #2de2e6; color: #2de2e6; }
.fw-port.lit { border-color: #2de2e6; color: #031015; background: #2de2e6; box-shadow: 0 0 22px rgba(45, 226, 230, 0.7); }
.fw-port.lit b { opacity: 0.8; }
.fw-log { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; margin: 0; padding: 6px 10px; border-top: 1px solid rgba(45, 226, 230, 0.15); font: 500 11px/1.35 var(--mono); color: rgba(45, 226, 230, 0.6); white-space: pre; overflow: hidden; }
.fw.breach .fw-core, .fw.breach .fw-port { border-color: var(--red); color: var(--red); box-shadow: 0 0 20px rgba(255, 59, 78, 0.4); }
.fw.breach .fw-l { stroke: rgba(255, 59, 78, 0.6); }
.fw.open .fw-core { border-color: #33d17a; color: #33d17a; box-shadow: 0 0 30px rgba(51, 209, 122, 0.5); }
.fw.open .fw-l { stroke: rgba(51, 209, 122, 0.7); stroke-dasharray: none; }

/* ---------- Live feed view: a hijacked CCTV camera ---------- */
.live .t-app .pz-body { position: relative; }
.live-view { filter: saturate(0.75) contrast(1.08); }
.cam-hud { position: absolute; inset: 0; pointer-events: none; font: 700 11px var(--mono); letter-spacing: 0.12em; color: #e8fff6; text-shadow: 0 1px 2px #000; z-index: 3; }
.cam-hud::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45)); }
.cam-hud::after { content: ""; position: absolute; inset: 12px; border: 2px solid transparent;
  background: linear-gradient(#e8fff6, #e8fff6) 0 0 / 22px 2px no-repeat, linear-gradient(#e8fff6, #e8fff6) 0 0 / 2px 22px no-repeat,
    linear-gradient(#e8fff6, #e8fff6) 100% 0 / 22px 2px no-repeat, linear-gradient(#e8fff6, #e8fff6) 100% 0 / 2px 22px no-repeat,
    linear-gradient(#e8fff6, #e8fff6) 0 100% / 22px 2px no-repeat, linear-gradient(#e8fff6, #e8fff6) 0 100% / 2px 22px no-repeat,
    linear-gradient(#e8fff6, #e8fff6) 100% 100% / 22px 2px no-repeat, linear-gradient(#e8fff6, #e8fff6) 100% 100% / 2px 22px no-repeat; opacity: 0.7; }
.cam-hud > span { position: absolute; padding: 18px 22px; }
.cam-hud .ch-tl { left: 0; top: 0; display: flex; align-items: center; gap: 6px; } .cam-hud .ch-tr { right: 0; top: 0; color: var(--amber); }
.cam-hud .ch-bl { left: 0; bottom: 0; } .cam-hud .ch-br { right: 0; bottom: 0; color: #ff8a95; }
.cam-hud .ch-x { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); opacity: 0.55;
  background: linear-gradient(#e8fff6, #e8fff6) center / 2px 100% no-repeat, linear-gradient(#e8fff6, #e8fff6) center / 100% 2px no-repeat; mask: radial-gradient(circle, transparent 5px, #000 6px); }

/* One tablet, next app: the screen swaps in place when a task hands off */
.t-app.swap { animation: tSwap 0.35s ease-out; }
@keyframes tSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.live-connect { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--cyan, #4fd1ff); font: 600 12px/1 ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; }
.live-connect i { font-size: 34px; animation: liveConnect 1s ease-in-out infinite; }
@keyframes liveConnect { 50% { opacity: 0.35; } }

/* Units (informants, body doubles): their own tab, with empty dark slots where tickets and abilities would be */
.pin.unit { display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 22%, var(--color-surface-1)); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.achip .pin.unit { font-size: 14px; } /* (an even size: in the 20px inside it, it sits on whole pixels) */
.achip.unit { border-style: dashed; }
/* (their badges without the glow; on hover the tab goes solid like the others) */
.achip .pin.unit { box-shadow: none; }
.achip.unit:hover { border-style: solid; }
.achip.unit.on { border-style: solid; }
.unit-hint { font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); animation: liveConnect 1.4s ease-in-out infinite; }
.slot { position: relative; height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--text-lg); overflow: hidden; border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-text-strong) 3%, transparent) 0 6px, transparent 6px 12px), var(--color-bg); border: 1px dashed color-mix(in srgb, var(--color-text-strong) 8%, transparent); box-shadow: inset 0 2px 6px color-mix(in srgb, var(--color-bg) 60%, transparent); }
.slot.t { min-height: 30px; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot.a { height: 118px; border-radius: var(--radius-lg); }

/* Ability tiles light up in their own purple on hover (not the default cyan) */
.ab:hover:not(:disabled) { border-color: #c77dff; box-shadow: 0 0 18px rgba(199, 125, 255, 0.45), inset 0 0 14px rgba(199, 125, 255, 0.14); }
.ab:hover:not(:disabled) .ab-icon { box-shadow: 0 0 20px rgba(199, 125, 255, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.18); }
/* An ability the team is too small for (Triangulation with fewer than three detectives) */
.lo-ic.off { opacity: 0.35; border-style: dashed; filter: grayscale(1); }
.lo-card.nofit { opacity: 0.45; filter: grayscale(0.8); cursor: not-allowed; }

/* ===== Terminal menus: full-width rows, keyboard first ===== */
.menu-wrap:has(.v-lobby) { width: min(1120px, 100%); }
/* Option rows: [number]  LABEL ........ value. Always one line each; a label or value too long for the space
   scrolls sideways (marquee.js) instead of wrapping or running into the other */
.opt.row { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.opt.row > .k { flex: none; width: 34px; }
.opt.row > i { flex: none; }
.opt.row > b { flex: 0 1 auto; min-width: 0; max-width: 50%; white-space: nowrap; }
.opt.row .val { margin-left: auto; flex: 0 1 auto; min-width: 0; display: inline-flex; justify-content: flex-end; align-items: center; gap: 10px; font: var(--weight-semibold) var(--text-md) var(--mono); color: var(--color-text); white-space: nowrap; }
.opt.row .val > * { min-width: 0; }
.mq { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: middle; }
.mq-in { display: inline-block; white-space: nowrap; }
.mq.scroll .mq-in { animation: mq var(--mq-dur, 6s) ease-in-out infinite alternate; }
@keyframes mq { 0%, 20% { transform: translateX(0); } 80%, 100% { transform: translateX(calc(-1 * var(--mq, 0px))); } }
@media (prefers-reduced-motion: reduce) { .mq.scroll { text-overflow: ellipsis; } .mq.scroll .mq-in { display: inline; animation: none; } }
.opt.row input { width: 260px; font: var(--weight-semibold) var(--text-md) var(--mono); text-align: right; }
.tval { font: 700 13px var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.tval.on { color: var(--cyan); text-shadow: 0 0 10px rgba(45, 226, 230, 0.5); }
.tval.dim { font-weight: 500; letter-spacing: 0.02em; max-width: 320px; white-space: nowrap; }
.meter .segs { display: inline-flex; align-items: center; gap: 3px; }
.meter .seg { width: 9px; height: 14px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); }
.meter .seg.on { background: var(--cyan); box-shadow: 0 0 6px rgba(45, 226, 230, 0.5); }
.meter em { font-style: normal; min-width: 42px; text-align: right; color: #dbe6f0; }
.sys { margin: 6px 0 0; font: 500 10.5px var(--mono); letter-spacing: 0.12em; color: var(--muted); }

/* Host operation: a bar that stays (code, odds, start), tabs, and the tab's content */
.lobby .waiting { font: 600 12px var(--mono); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.tabs { display: flex; align-items: stretch; gap: 6px; margin: 14px 0 12px; }
.tab { display: flex; align-items: baseline; gap: 10px; padding: 9px 16px; border-radius: 8px 8px 0 0; border: 1px solid var(--line2); border-bottom-color: transparent; background: transparent; font: 700 13px var(--mono); letter-spacing: 0.12em; color: var(--muted); }
.tab .k { font-size: 10px; color: var(--muted); border: 1px solid var(--line2); border-radius: 3px; padding: 0 4px; }
.tab small { font: 500 11px var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.tab.on { color: var(--cyan); border-color: rgba(45, 226, 230, 0.55); background: rgba(45, 226, 230, 0.08); box-shadow: inset 0 -2px 0 var(--cyan); }
.tab.on small { color: #dbe6f0; }
.tab-body { min-height: 300px; }

/* Map tab: cards you move between with the arrows (locations only, no land) */
.grid.maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.opt.mapcard b { font: var(--weight-bold) var(--text-lg) var(--head); letter-spacing: var(--tracking-tight); }
.opt.mapcard b::before { content: none !important; }
.mapcard .thumb .dots circle { fill: #7fa6c2; }

/* Teams tab: two wide columns, one row per agent, big loadout icons */
.counter { margin-left: auto; }

/* Loadout picker: compact ability cards like the in-game ones; the description is the tooltip */
.tab-body .lo-picker { margin: 0; padding: 14px; }
.lo-head { justify-content: flex-start; gap: 10px; font: 600 12px var(--mono); letter-spacing: 0.12em; color: #dbe6f0; margin-bottom: 12px; }
.lo-head i { font-size: 18px; color: var(--cyan); }
.lo-head span { margin-left: auto; color: var(--muted); }
.grid.lo-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.opt.lo-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1-5); height: 118px; padding: 10px var(--space-1-5); border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--color-uses-2) 35%, transparent); background: color-mix(in srgb, var(--color-uses-2) 5%, transparent); }
.opt.lo-card b { font: var(--weight-bold) var(--text-sm) var(--sans); letter-spacing: 0; color: var(--color-text); }
.opt.lo-card b::before { content: none !important; }
.opt.lo-card .lo-big { width: 46px; height: 46px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--text-2xl); color: var(--color-uses-2-soft); border: 1px solid color-mix(in srgb, var(--color-uses-2) 45%, transparent); background: color-mix(in srgb, var(--color-uses-2) 10%, transparent); }
.opt.lo-card .pips { display: flex; gap: var(--space-0-5); }
.opt.lo-card .pips i { width: 12px; height: 5px; border-radius: var(--radius-xs); background: var(--color-uses-2); box-shadow: 0 0 6px var(--color-uses-2); }
.opt.lo-card em { position: absolute; bottom: 4px; font-size: var(--text-sm); }
.opt.lo-card.on { border-color: var(--color-uses-2); background: color-mix(in srgb, var(--color-uses-2) 16%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--color-uses-2) 35%, transparent); }
.opt.lo-card.hl, .opt.lo-card:hover { border-color: var(--color-uses-2); box-shadow: 0 0 18px color-mix(in srgb, var(--color-uses-2) 45%, transparent); background: color-mix(in srgb, var(--color-uses-2) 10%, transparent); }
.opt.lo-card .tick { color: var(--color-uses-2); }
.lo-foot { margin-top: 12px; }
.view.still, .view.still .opt, .view.still .lo-picker { animation: none !important; }

/* ===== Terminal button: one style for the main actions (join, start, confirm, access) ===== */
.tbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-width: 260px; padding: var(--space-3) 26px; border: 1px solid var(--cyan); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent); color: var(--cyan); font: var(--weight-semibold) var(--text-md) var(--mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; box-shadow: inset 0 0 14px color-mix(in srgb, var(--color-accent) 8%, transparent); }
.tbtn::before { content: "["; opacity: 0.6; } .tbtn::after { content: "]"; opacity: 0.6; }
.tbtn:hover:not(:disabled), .tbtn.hl { background: var(--cyan); color: var(--color-surface-1); box-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 45%, transparent); border-color: var(--cyan); }
.tbtn:disabled { border-color: var(--line2); color: var(--muted); background: transparent; box-shadow: none; cursor: default; }
.tbtn.wide { width: 100%; }
#bootGo.tbtn { padding: 14px; font-size: var(--text-md); }

/* ===== Key hints: one bar along the bottom of the terminal, same on every screen ===== */
.term-keys { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1-5) var(--space-5); padding: 10px var(--space-4); border-top: 1px solid var(--line2); background: color-mix(in srgb, var(--color-accent) 3%, transparent); font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-wide); color: var(--muted); }
.term-keys:empty { display: none; }
.term-keys .kp { color: var(--cyan); margin-right: -10px; }
.term-keys .key { display: inline-flex; align-items: center; gap: var(--space-2); }
.term-keys .key[data-act] { cursor: pointer; }
.term-keys .key[data-act]:hover { color: var(--cyan); }
.term-keys .caret { color: var(--cyan); margin-left: -12px; }

/* ===== Mode tab: two large cards ===== */

/* ===== Host header: code + link, odds, start ===== */
.hb-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hb-meta .hud-label { margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; font: 600 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); display: inline-flex; align-items: center; gap: 6px; }
.linkbtn:hover:not(:disabled) { box-shadow: none; text-decoration: underline; }

/* ===== Teams: join/leave sits apart at the bottom ===== */

/* ===== Splash: cyan, white and grey only ===== */
.boot-log .res { font-weight: var(--weight-semibold); color: var(--cyan); }
.boot-log .res.warn { color: var(--muted); }
.boot-log { min-height: 170px; font-size: var(--text-md); line-height: 1.8; color: var(--color-text); }
.tbtn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--cyan), 0 0 22px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.linkbtn { white-space: nowrap; }
.hb-meta .hud-label { white-space: nowrap; }

/* Loadout window: a second terminal above the lobby */
.term-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); background: color-mix(in srgb, var(--color-bg) 72%, transparent); backdrop-filter: blur(3px); animation: fadeIn 0.2s; }
.term-modal .term { width: min(860px, 100%); max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 0 60px color-mix(in srgb, var(--color-accent) 18%, transparent); animation: termIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.term-modal .modal-body { padding: 18px var(--space-5); overflow: auto; }
.term-modal .lo-picker { margin: 0; padding: 0; border: 0; background: none; animation: none; }
.view.still .term-modal:not(.fresh), .view.still .term-modal:not(.fresh) .term { animation: none; }
.term-modal .lo-foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--line2); }
.lo-foot .k i { font-size: 12px; vertical-align: -1px; }

/* ===== Menu background: the world on a stage a virtual camera moves over ===== */
.bg-stage .bg-map { position: static; width: 100%; height: 100%; min-width: 0; display: block; animation: bgDrift 70s ease-in-out infinite alternate; }
@keyframes bgDrift { from { transform: translate(-0.6%, 0.3%); } to { transform: translate(0.6%, -0.3%); } }
.bg-map .land { fill: var(--color-surface-2); stroke: var(--color-line-strong); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.bg-map .routes { stroke: color-mix(in srgb, var(--color-accent) 16%, transparent); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.bg-map .grid { stroke: color-mix(in srgb, var(--color-accent) 5%, transparent); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
@keyframes netIn { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
.bg-map .burst { fill: none; stroke: var(--cyan); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; animation: burst 2.2s ease-out both; animation-delay: inherit; }
@keyframes burst { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(4); } }
/* Lock-on reticle (joining) out in the margin */
.bg-lock { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity 0.5s; }
.bg-lock.on { opacity: 1; }
/* (a square reticle: four corner brackets, like the end screen's, never a circle) */
.lk-ring { position: absolute; width: 96px; height: 96px; left: -48px; top: -48px; --b: linear-gradient(rgba(45, 226, 230, 0.8), rgba(45, 226, 230, 0.8));
  background: var(--b) left top / 18px 1.5px no-repeat, var(--b) left top / 1.5px 18px no-repeat, var(--b) right top / 18px 1.5px no-repeat, var(--b) right top / 1.5px 18px no-repeat,
    var(--b) left bottom / 18px 1.5px no-repeat, var(--b) left bottom / 1.5px 18px no-repeat, var(--b) right bottom / 18px 1.5px no-repeat, var(--b) right bottom / 1.5px 18px no-repeat;
  filter: drop-shadow(0 0 6px rgba(45, 226, 230, 0.45)); }
.lk-x::before, .lk-x::after { content: ""; position: absolute; background: rgba(45, 226, 230, 0.6); }
.lk-x::before { left: -70px; width: 140px; top: 0; height: 1px; }
.lk-x::after { top: -70px; height: 140px; left: 0; width: 1px; }
.bg-lock.on.blink .lk-ring { animation: lockIn 1.4s 1.6s both; }
.bg-lock.on.blink .lk-x { animation: fadeIn 0.6s 1.6s both; }
@keyframes lockIn { 0% { transform: scale(2.6); opacity: 0; } 60% { transform: scale(0.9); opacity: 1; } 75% { opacity: 0.3; } 85% { opacity: 1; } 100% { transform: scale(1); } }
/* Corner readout: what the camera is on, and where */
.bg-hud { position: absolute; left: 22px; bottom: 18px; display: flex; flex-direction: column; gap: var(--space-1); font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-wide); color: var(--muted); }
.bg-hud b { color: var(--cyan); font-weight: var(--weight-bold); }
.bg-hud.in b { animation: hudType 1.2s steps(14) both; }
.bg-hud.in span { animation: fadeIn 0.8s 1.2s both; }
@keyframes hudType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Camera windows: a bit more present */
.cam { opacity: 0.85; z-index: 1; }
.cam-lbl { position: absolute; left: 6px; bottom: 5px; z-index: 1; color: #d6fffb; text-shadow: 0 0 4px #000; font: 600 10px var(--mono); letter-spacing: 0.1em; }
/* Hosting: the chosen map's network over the whole screen */
.bg-stage { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100vh * 2400 / 1100)); aspect-ratio: 2400 / 1100; transform: translate(-50%, -50%) scale(var(--k, 1)) translate(var(--px, 0px), var(--py, 0px)); transition: transform 2.4s cubic-bezier(0.65, 0, 0.2, 1); will-change: auto; }
.bg-theatre { position: absolute; inset: 8vh 6vw; width: 88vw; height: 84vh; opacity: 0; pointer-events: none; transition: opacity 0.6s; }
.bg-theatre.in { animation: theatreIn 2.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes theatreIn { 0%, 45% { opacity: 0; transform: scale(0.55); } 100% { opacity: 1; transform: scale(1); } }
#bg .bg-stage .bg-map { transition: opacity 1s; }
.bg-hud, .bg-lock { z-index: 2; }
/* The real map behind the menu (MapLibre), and the blips over it, kept on their places as it moves */
#bg .bg-live { position: absolute; inset: 0; } /* (over MapLibre's own position: relative) */
/* Arriving: the map (real or drawn) fades in from a blur through static, with no movement */
#bg .bg-live, #bg .bg-stage { transition: opacity 2.8s ease-out, filter 2.8s ease-out; }
#bg.bg-pre .bg-live, #bg.bg-pre .bg-stage { opacity: 0; filter: blur(10px) brightness(1.5); }
#bg.bg-pre .bg-blips { opacity: 0; }
.bg-blips { transition: opacity 1.5s 2s; }
.bg-static { position: absolute; inset: -50%; pointer-events: none; opacity: 0; transition: opacity 3.2s ease-out; animation: grain 0.6s steps(3) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#bg.bg-pre .bg-static { opacity: 0.45; transition: none; }
.bg-blips { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-blips .ping { fill: none; stroke: var(--red); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: bgPing 14s infinite; }
.bg-blips .burst { fill: none; stroke: var(--cyan); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: burst 2.2s ease-out both; }
/* Subtler: thin region networks, small dots, a quieter theatre and fewer, smaller pings */
.bg-map .focus-net path { fill: none; stroke: var(--cyan); stroke-width: 0.8; vector-effect: non-scaling-stroke; opacity: 0.3; }
.bg-map .focus-net circle { fill: #9fdfe6; opacity: 0.55; }
.bg-map .focus-net.in { animation: netIn 2.6s ease-out both; }
.bg-theatre path { fill: none; stroke: var(--cyan); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.18; }
.bg-theatre circle { fill: #9fdfe6; opacity: 0.4; }
#bg.theatre-on .bg-stage .bg-map { transition: opacity 1.6s 0.8s; opacity: 0.5; }
.bg-map .dots circle { r: 1.8; fill: color-mix(in srgb, var(--color-muted) 35%, transparent); }
.bg-map .ping { fill: none; stroke: var(--red); opacity: 0; animation: bgPing 14s infinite; transform-box: fill-box; transform-origin: center; stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* ===== Terminal buttons in dialogs and in the game: tones follow the dialog ===== */
.tbtn.amber { --tb: var(--amber); }
.tbtn.red { --tb: var(--red); }
.tbtn.amber, .tbtn.red { border-color: var(--tb); color: var(--tb); background: color-mix(in srgb, var(--tb) 7%, transparent); box-shadow: inset 0 0 14px color-mix(in srgb, var(--tb) 10%, transparent); }
.tbtn.amber:hover:not(:disabled), .tbtn.red:hover:not(:disabled), .tbtn.amber:focus-visible, .tbtn.red:focus-visible { background: var(--tb); color: var(--color-surface-1); border-color: var(--tb); box-shadow: 0 0 22px color-mix(in srgb, var(--tb) 45%, transparent); }
.tbtn.ghost { border-color: var(--line2); color: var(--muted); background: transparent; box-shadow: none; }
.tbtn.ghost:hover:not(:disabled) { border-color: var(--color-muted); color: var(--color-text); background: color-mix(in srgb, var(--color-text-strong) 4%, transparent); box-shadow: none; }
.brief-foot .tbtn, .confirm-box .tbtn { min-width: 0; padding: var(--space-3) var(--space-5); font-size: var(--text-md); }
/* (stacked, full width: the main action on top, so each label and its key fit) */
.confirm-box .row { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.confirm-box .row [data-c="1"] { order: -1; }
.confirm-box .row .tbtn { width: 100%; white-space: nowrap; }
/* Ready: the same button, filled once you're ready */

/* Movement log: place names in faint white */
.dc em { position: relative; z-index: 3; font: var(--weight-semibold) var(--text-sm) var(--mono); text-transform: uppercase; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--space-0-5); font-style: normal; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
/* Intel feed: traces are yellow, like their markers on the map */
.ev.trace { cursor: pointer; }

/* ===== Game menu: a label like the movement log's, a button as tall as a day card, a terminal window ===== */
#topbar .menu { display: flex; flex-direction: column; gap: 3px; flex: none; }
#topbar .menu .hud-label { margin: 0; }
#topbar .menu-btn { padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 1; width: 54px; height: auto; min-height: 0; margin-top: var(--space-1); border-radius: var(--radius-md); align-self: stretch; }
.menu-pop.term { top: calc(100% + 8px); width: min(560px, 92vw); min-width: 0; padding: 0; gap: 0; display: block; background: color-mix(in srgb, var(--color-bg) 96%, transparent); border: 1px solid var(--line2); border-radius: var(--radius-lg); box-shadow: 0 0 50px color-mix(in srgb, var(--color-accent) 12%, transparent), 0 20px 50px color-mix(in srgb, var(--color-bg) 60%, transparent); }
.menu-pop .gm-body { padding: 10px 10px var(--space-3); }
.menu-pop .opt.row { grid-template-columns: 34px minmax(150px, auto) 1fr; padding: var(--space-2) var(--space-3); }
.menu-pop .opt.row.danger b { color: var(--color-danger-soft); }
.menu-pop .opt.row.danger.hl, .menu-pop .opt.row.danger:hover { border-color: color-mix(in srgb, var(--color-danger) 50%, transparent); background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
.menu-pop .meter .seg { width: 7px; }
.menu-pop .gm-drop { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line2); display: flex; flex-direction: column; gap: var(--space-1-5); }
.menu-pop .term-keys { border-radius: 0 0 12px 12px; }
.menu-pop .opt.row b { white-space: nowrap; }
.menu-pop .opt.row .val { min-width: 0; }

/* ===== Audio deck: a MiniDisc, an MD-player LCD, and the audio rows ===== */
#audioModal { z-index: 5000; }
#audioModal:not(.fresh), #audioModal:not(.fresh) .term { animation: none; }
.term.deck { width: min(880px, 100%); }
.deck-body { display: grid; grid-template-columns: 260px 1fr; gap: 26px; padding: 22px 22px 18px; align-items: start; }
.deck-rows { gap: var(--space-0-5); }
.deck-rows .opt.row { grid-template-columns: minmax(140px, auto) 1fr; padding: 10px var(--space-3); }
.pick-val { min-width: 0; }
.pick-val > span { max-width: 260px; white-space: nowrap; }
.deck-rows .tval i { vertical-align: -2px; margin-right: var(--space-1); }

/* The cartridge: a translucent shell in the album colour, a label sticker, a window onto the disc, a metal shutter */
.md { --mc: #ff3b4e; position: relative; width: 236px; height: 252px; border-radius: 10px 10px 14px 14px; margin: 0 auto;
  background: linear-gradient(155deg, color-mix(in srgb, var(--mc) 55%, #fff 8%), color-mix(in srgb, var(--mc) 30%, #05080d) 55%, color-mix(in srgb, var(--mc) 18%, #05080d));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 30px color-mix(in srgb, var(--mc) 25%, transparent); overflow: hidden; }
.md::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 35%); pointer-events: none; z-index: 4; }
.md::after { content: ""; position: absolute; right: 12px; top: 12px; width: 10px; height: 10px; border-radius: 2px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); } /* write-protect tab */
.md-window { position: absolute; left: 50%; top: 104px; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--color-bg) 35%, transparent); box-shadow: inset 0 2px 8px color-mix(in srgb, var(--color-bg) 70%, transparent); }
.md-disc { position: absolute; inset: 4px; border-radius: 50%;
  background: radial-gradient(circle, var(--color-surface-3) 0 14%, transparent 14.5%), repeating-radial-gradient(circle, color-mix(in srgb, var(--color-text-strong) 5%, transparent) 0 1px, transparent 1px 3px),
    conic-gradient(from 0deg, var(--color-muted), var(--color-text) 12%, var(--color-computer) 25%, var(--color-text) 40%, #7f8c9b 55%, var(--color-text-strong) 70%, var(--color-computer) 85%, var(--color-muted)); }
.md-hub { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: radial-gradient(circle, var(--color-bg) 0 28%, var(--color-text) 30% 60%, var(--color-muted) 62%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg) 30%, transparent); }
.md-hub::after { content: ""; position: absolute; left: 50%; top: 2px; width: 3px; height: 8px; margin-left: -1.5px; background: var(--color-bg); border-radius: var(--radius-xs); } /* a notch, so the spin shows */
.md.playing .md-disc { animation: mdSpin 1.4s linear infinite; }
@keyframes mdSpin { to { transform: rotate(360deg); } }
.md-label { position: absolute; left: 14px; right: 14px; top: 14px; height: 92px; z-index: 2; border-radius: var(--radius-sm); padding: var(--space-2) 10px; background: var(--color-text); color: var(--color-surface-1); box-shadow: 0 1px 3px color-mix(in srgb, var(--color-bg) 45%, transparent);
  background-image: repeating-linear-gradient(0deg, transparent 0 17px, rgba(40, 80, 140, 0.18) 17px 18px); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; column-gap: var(--space-2); }
.md-brand { font: var(--weight-bold) var(--text-sm) var(--sans); letter-spacing: var(--tracking-tight); color: var(--color-surface-1); }
.md-brand small { font-weight: var(--weight-semibold); opacity: 0.6; }
.md-art { grid-row: 1 / span 3; grid-column: 2; width: 54px; height: 54px; align-self: center; border-radius: var(--radius-sm); background-size: cover; background-position: center;
  background-color: var(--mc); background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-bg) 35%, transparent) 0 4px, transparent 4px 9px), radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-text-strong) 50%, transparent), transparent 60%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-bg) 25%, transparent); }
.md-title { font: var(--weight-regular) var(--text-xl)/1.05 "Permanent Marker", cursive; color: var(--color-surface-2); transform: rotate(-2deg); align-self: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.md-sub { font: var(--weight-regular) var(--text-sm) "Permanent Marker", cursive; color: var(--color-line-strong); opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-shutter { position: absolute; left: 22px; right: 22px; bottom: 0; height: 30px; z-index: 3; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--color-text), var(--color-muted) 60%, #b8c0c9); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text-strong) 70%, transparent), 0 -1px 3px color-mix(in srgb, var(--color-bg) 40%, transparent); }
.md-shutter i { position: absolute; left: 50%; top: 9px; width: 70px; height: 4px; margin-left: -35px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--color-bg) 25%, transparent); }
.md-arrow { position: absolute; left: 10px; bottom: 6px; z-index: 3; font-size: var(--text-md); color: color-mix(in srgb, var(--color-text-strong) 60%, transparent); }
/* The player's LCD */
.lcd-top { display: flex; justify-content: space-between; }
.lcd-scroll { margin-top: var(--space-1); overflow: hidden; white-space: nowrap; mask: linear-gradient(90deg, transparent, var(--color-bg) 8%, var(--color-bg) 92%, transparent); }
.lcd-scroll span { display: inline-block; padding-left: 100%; animation: lcdScroll 14s linear infinite; text-transform: uppercase; }
@keyframes lcdScroll { to { transform: translateX(-100%); } }
.md-lcd { margin: var(--space-4) auto 0; width: 236px; padding: var(--space-2) 10px; border-radius: var(--radius-md); border: 1px solid var(--color-line); box-shadow: inset 0 2px 8px color-mix(in srgb, var(--color-bg) 60%, transparent); font: var(--weight-semibold) var(--text-md) var(--mono); letter-spacing: var(--tracking-label); background: var(--color-surface-1); border-color: var(--color-line); color: #9ff6f8; text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent) 55%, transparent); }

/* Ambience strip under the LCD: lit while each sound plays; click (or its key) to preview */

/* ===== Weather and street effects (fx.js): faint light over everything, never catching the mouse ===== */
#fx { position: fixed; inset: 0; z-index: 9000; pointer-events: none; overflow: hidden; }
#fx .fx-rain { position: absolute; inset: 0; width: 100%; height: 100%; }
#fx .fx-flash { position: absolute; inset: 0; background: #e6f4ff; opacity: 0; mix-blend-mode: screen; }
/* Helicopter spotlight, with the rotor's shadow flickering through it */
.fx-beam { position: absolute; left: 0; top: 0; width: 70vmax; height: 46vmax; margin: -23vmax 0 0 -35vmax; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(ellipse, rgba(220, 240, 255, 0.075) 0%, rgba(220, 240, 255, 0.04) 32%, rgba(220, 240, 255, 0.012) 55%, transparent 70%); }
.fx-beam .fx-shadow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 46% 48%, transparent 22%, rgba(0, 0, 0, 0.06) 40%, transparent 62%); mix-blend-mode: multiply; animation: fxRotor 0.09s steps(2) infinite alternate; }
@keyframes fxRotor { from { opacity: 0.25; } to { opacity: 1; } }
/* Passing car: headlight glow low on the screen; a police car's red and blue */
/* (the glow fades out before the box's edges; the box's lower half sits below the screen, so the light comes up out
   of frame; the street mask, three times as wide, slides across it) */
.fx-car { position: absolute; left: 0; top: 0; width: 55vw; height: 44vh; margin: -22vh 0 0 -27vw; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 238, 205, 0.1), rgba(255, 238, 205, 0.04) 45%, transparent 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.fx-car.police { background: none; }
.fx-car.police i { position: absolute; inset: 0; animation: fxPolice 0.55s steps(1) infinite; }
.fx-car.police .r { background: radial-gradient(closest-side at 42% 50%, rgba(255, 40, 70, 0.15), transparent 100%); }
.fx-car.police .b { background: radial-gradient(closest-side at 58% 50%, rgba(40, 110, 255, 0.16), transparent 100%); animation-delay: 0.275s; }
@keyframes fxPolice { 0% { opacity: 1; } 50% { opacity: 0; } }
/* Lightning: the picture stutters for a moment (a small jump, a colour edge, scanlines) */
body.fx-glitch #game, body.fx-glitch #menu, body.fx-glitch #boot { animation: fxGlitch 0.26s steps(3, end); }
@keyframes fxGlitch { 0% { transform: translate(2px, 0); filter: brightness(0.75) contrast(1.15); } 40% { transform: translate(-2px, 1px); filter: brightness(1.15); } 80% { transform: translate(1px, -1px); filter: none; } 100% { transform: none; } }
body.fx-glitch #fx::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 4px); box-shadow: inset 4px 0 0 rgba(255, 30, 80, 0.14), inset -4px 0 0 rgba(30, 220, 255, 0.14); }

/* ===== Mode cards: three dossier files in a row ===== */
.mc-tab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -16px 2px; padding: 7px 16px 7px 22px; border-bottom: 1px dashed var(--line2); background: rgba(255, 255, 255, 0.03); font: 600 10px var(--mono); letter-spacing: 0.18em; color: var(--muted); }
.mc-bar { width: 52px; height: 12px; opacity: 0.5; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px, currentColor 3px 5px, transparent 5px 6px, currentColor 6px 7px, transparent 7px 10px); }
.mc-art { display: block; width: 100%; height: 92px; border: 1px solid rgba(255, 255, 255, 0.05); background: linear-gradient(rgba(45, 226, 230, 0.05) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(45, 226, 230, 0.05) 1px, transparent 1px) 0 0 / 14px 14px, rgba(0, 0, 0, 0.25); }
.mc-art svg { width: 100%; height: 100%; }
.mc-art .net path, .mc-art .rings circle { fill: none; stroke: rgba(159, 179, 200, 0.35); stroke-width: 1; }
.mc-art .rings circle { stroke-dasharray: 3 4; }
.mc-art .nodes circle { fill: #9fb3c8; }
.mc-art .trail { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-dasharray: 4 3; }
.mc-art .tgt { fill: var(--red); filter: drop-shadow(0 0 4px var(--red)); }
.mc-art .det { fill: none; stroke: #4da3ff; stroke-width: 1.6; }
.mc-art .flag circle { fill: none; stroke: #b6ff3b; stroke-width: 1.6; }
.mc-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 6px; }
.mc-facts em { font: 600 9.5px var(--mono); font-style: normal; letter-spacing: 0.12em; color: #c5d3e0; border: 1px solid var(--line2); padding: 2px 6px; background: rgba(255, 255, 255, 0.02); }
/* Corner brackets */
.mc-c { position: absolute; width: 12px; height: 12px; border: 0 solid rgba(45, 226, 230, 0.45); pointer-events: none; }
.mc-c.tl { top: 5px; left: 5px; border-top-width: 1px; border-left-width: 1px; display: none; }
.mc-c.tr { top: 5px; right: 5px; border-top-width: 1px; border-right-width: 1px; }
.mc-c.bl { bottom: 5px; left: 5px; border-bottom-width: 1px; border-left-width: 1px; }
.mc-c.br { bottom: 5px; right: 5px; border-bottom-width: 1px; border-right-width: 1px; display: none; }
/* Highlighted / chosen */
@keyframes mcTrail { to { stroke-dashoffset: -14; } }
@keyframes mcRing { to { stroke-dashoffset: -28; } }
.mc-stamp { position: absolute; right: 14px; top: 46px; padding: 3px 9px; font: 800 12px var(--mono); letter-spacing: 0.24em; color: var(--cyan); border: 2px solid var(--cyan); transform: rotate(-9deg); opacity: 0.85; background: rgba(5, 9, 13, 0.7);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.2'/%3E%3C/filter%3E%3Crect width='60' height='30' filter='url(%23n)'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.2'/%3E%3C/filter%3E%3Crect width='60' height='30' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Mode cards, calmer: grey line art with one cyan accent, no chips; selection is a "loaded" state, not a stamp */
.mc-tab { padding: 6px 16px 6px 22px; }
.mc-state { color: #031015; font-weight: 700; }
.mc-art { height: 78px; position: relative; overflow: hidden; }
.mc-art .net, .mc-art .rings circle { fill: none; stroke: rgba(159, 179, 200, 0.28); stroke-width: 1; }
.mc-art .rings circle { stroke-dasharray: 2 4; }
.mc-art .nodes, .mc-art .nodes circle { fill: rgba(200, 215, 230, 0.55); }
.mc-art .trail { fill: none; stroke: rgba(232, 241, 248, 0.75); stroke-width: 1.4; stroke-dasharray: 4 3; }
.mc-art .tgt { fill: #e8f1f8; filter: none; }
.mc-art .pts rect { fill: none; stroke: rgba(232, 241, 248, 0.7); stroke-width: 1.2; }
/* Loaded: the tab fills cyan, the sketch's accents turn cyan, a scan line sweeps the sketch */
.mc-scan { position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(90deg, transparent, rgba(45, 226, 230, 0.16), transparent); opacity: 0; }
@keyframes mcScan { to { left: 100%; } }
.mc-facts, .mc-stamp, .mc-bar { display: none; }

/* ===== Host tabs: one fixed-height window, so switching tabs doesn't make the layout jump ===== */
.tab-body { height: 420px; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
/* Modes: three across, full height; the sketch takes the room */
/* Maps: two rows filling the window, same card family as the modes */
/* Two rows fill the pane; more maps scroll, every row the same full height */
.tab-body .grid.maps { height: 100%; min-height: 330px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: calc((100% - 12px) / 2); gap: 12px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.opt.mapcard { display: flex; flex-direction: column; align-items: flex-start; position: relative; min-height: 0; height: 100%; padding: 0 14px var(--space-3); gap: var(--space-1-5); justify-content: flex-start; border-radius: 0; border: 1px solid var(--line2); overflow: hidden; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-text-strong) 2%, transparent) 0 1px, transparent 1px 3px), linear-gradient(170deg, color-mix(in srgb, var(--color-accent) 4%, transparent), transparent 45%), var(--color-bg); }
.opt.mapcard .mc-tab { margin: 0 -14px var(--space-0-5); padding: var(--space-1) 14px var(--space-1) var(--space-5); }
.opt.mapcard .mc-art .thumb { position: relative; z-index: 1; width: 100%; height: 100%; }
.opt.mapcard > b { margin-top: var(--space-0-5); font: var(--weight-bold) var(--text-lg) var(--head); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.mp-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.opt.mapcard .mp-meta small { font: var(--weight-regular) var(--text-sm) var(--mono); color: var(--color-muted); }
.opt.mapcard .tx { font-size: var(--text-md); letter-spacing: 3px; color: var(--color-muted); margin: 0; }
.mapcard .thumb .dots circle { fill: rgba(200, 215, 230, 0.6); opacity: 1; filter: none; }
.mapcard .thumb .net { stroke: rgba(159, 179, 200, 0.25); }
.opt.mapcard.hl { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); box-shadow: inset 0 0 30px color-mix(in srgb, var(--color-accent) 8%, transparent); }
.opt.mapcard.on { background: color-mix(in srgb, var(--color-accent) 10%, transparent); border-color: var(--cyan); background-color: var(--color-surface-1); box-shadow: none; }
.opt.mapcard.on .mc-tab { background: var(--cyan); color: var(--color-surface-1); border-bottom-style: solid; border-bottom-color: var(--cyan); }
.opt.mapcard.on > b { color: var(--cyan); }
.opt.mapcard.on .thumb .dots circle { fill: var(--cyan); }
.opt.mapcard.on .mc-c { border-color: var(--cyan); }
.opt.mapcard.on .mc-scan { opacity: 1; animation: mcScan 2.6s linear infinite; z-index: 2; }
@media (max-width: 900px) { .tab-body { height: auto; max-height: none; } .tab-body .grid.maps { height: auto; } .tab-body .grid.maps { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; } }
.opt.mapcard .mc-tab, .opt.mapcard .mc-tab span { font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-wide); margin-top: 0; }
.opt.mapcard .mc-art { position: relative; inset: auto; flex: 1; width: 100%; height: auto; min-height: 60px; opacity: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-1-5); font-size: 0; letter-spacing: 0; margin-top: 0; }

/* ===== Final call reveal ===== */
.modal-card.final-call { width: min(560px, 94vw); text-align: center; }
.fc-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.fc-list li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 9px 14px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.02); font: 600 13px var(--mono); letter-spacing: 0.06em; }
.fc-list li span { color: var(--muted); text-transform: uppercase; }
.fc-list li b { color: #e8f1f8; font-weight: 700; }
.fc-list li em { font-style: normal; font-weight: 800; letter-spacing: 0.16em; font-size: 11px; padding: 2px 8px; border: 1px solid currentColor; }
.fc-list li em.hit { color: var(--cyan); }
.fc-list li em.miss { color: var(--red); }
.fc-list.truth li { grid-template-columns: 1fr auto; border-style: dashed; }
.fc-list.truth li b { color: var(--red); }
.final-call .verdict { margin: var(--space-5) 0 14px; }
.final-call .fc-count { margin-top: 10px; }

/* Players window and the leave dialog */
.term.players-win, .term.leave-win { width: min(720px, 100%); }
.players-win .pl-row b small { font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-wide); color: var(--muted); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 0 var(--space-1); margin-left: var(--space-1-5); vertical-align: 2px; }
.players-win .pl-row .k .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.players-win .pl-row .val { gap: 14px; }
.players-win .pl-row.open { border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.players-win .pl-act { margin-left: 34px; padding: var(--space-1-5) var(--space-3); }
.players-win .pl-act b { font-size: var(--text-md); letter-spacing: var(--tracking-label); text-transform: none; }
.players-win .pl-act.danger b { color: var(--color-danger-soft); }
.tval.warn { color: var(--amber); }
#plModal, #leaveModal { z-index: 4800; }

/* Target dropdown (intel panel and movement log, games with several Targets) */
select.tsel { appearance: none; -webkit-appearance: none; font: 700 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); background: rgba(45, 226, 230, 0.06)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232de2e6'/%3E%3C/svg%3E") no-repeat right 8px center; border: 1px solid rgba(45, 226, 230, 0.45); border-radius: 3px; padding: 4px 26px 4px 9px; cursor: pointer; }
select.tsel:focus { outline: none; box-shadow: 0 0 0 1px var(--cyan); }
select.tsel option { background: #070c12; color: #e8f1f8; }
.tsel-row { margin: 4px 0 10px; }
.tsel-row select.tsel { width: 100%; font-size: 12px; padding: 7px 28px 7px 10px; }
.travel .hud-label select.tsel.log { margin-left: 10px; vertical-align: 1px; padding: var(--space-0-5) var(--space-6) var(--space-0-5) var(--space-1-5); font-size: var(--text-sm); }
/* Live windows redraw quietly: only the first appearance animates */
#plModal:not(.fresh), #plModal:not(.fresh) .term, #leaveModal:not(.fresh), #leaveModal:not(.fresh) .term { animation: none; }

/* ===== End of operation: a short spectacle over the map, then the result ===== */
#endfx { position: fixed; inset: 0; z-index: 7000; overflow: hidden; --tone: var(--color-text); font-family: var(--mono); }
#endfx.won { --tone: var(--cyan); }
#endfx.lost { --tone: var(--red); }
#endfx.out { opacity: 0; transition: opacity 0.35s; }
.ef-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(2, 4, 7, 0.2), rgba(2, 4, 7, 0.75)); opacity: 0; transition: opacity 0.8s; }
#endfx.go .ef-dim { opacity: 1; }
/* The spotlight: a soft disc of light, everything else in the dark */
.ef-spot { position: absolute; left: -30vw; top: 30vh; width: 280px; height: 280px; margin: -140px 0 0 -140px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(230, 245, 255, 0.16) 0%, rgba(230, 245, 255, 0.07) 45%, transparent 70%); box-shadow: 0 0 0 200vmax rgba(2, 4, 7, 0.55); }
#endfx.go .ef-spot { opacity: 1; animation: efSweep 2.2s cubic-bezier(0.45, 0, 0.2, 1) forwards; }
@keyframes efSweep { 0% { left: -20vw; top: 25vh; } 45% { left: 70vw; top: 60vh; } 75% { left: 42vw; top: 44vh; } 100% { left: 50vw; top: 46vh; } }
#endfx.caught.lock .ef-spot { animation: efSweep 0s forwards, efLock 0.5s ease-out forwards; }
@keyframes efLock { to { width: 170px; height: 170px; margin: -85px 0 0 -85px; background: radial-gradient(circle, rgba(230, 245, 255, 0.24) 0%, rgba(230, 245, 255, 0.1) 50%, transparent 72%); } }
#endfx.escaped.go .ef-spot { animation: efSearch 2.6s ease-in-out forwards; }
@keyframes efSearch { 0% { left: -20vw; top: 30vh; } 30% { left: 60vw; top: 62vh; } 55% { left: 30vw; top: 38vh; } 80% { left: 72vw; top: 30vh; } 100% { left: 50vw; top: 50vh; } }
#endfx.escaped.gone .ef-spot { opacity: 0; transition: opacity 0.6s; }
#endfx.extracted.lift .ef-spot { transition: top 1.2s ease-in, opacity 1.2s; top: -30vh; opacity: 0; }
/* The reticle locks onto the Target (or loses it) */
.ef-reticle { position: absolute; left: 50%; top: 46%; width: 200px; height: 200px; margin: -100px 0 0 -100px; opacity: 0; transition: all 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ef-reticle i { position: absolute; width: 26px; height: 26px; border: 0 solid var(--tone); }
.ef-reticle i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; } .ef-reticle i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.ef-reticle i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; } .ef-reticle i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.ef-reticle b { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 14px); font: 700 12px var(--mono); letter-spacing: 0.3em; color: var(--tone); white-space: nowrap; }
#endfx.caught.lock .ef-reticle b::after { content: "LOCKED"; }
#endfx.escaped.gone .ef-reticle { opacity: 1; animation: efJitter 0.12s steps(2) 6; }
#endfx.escaped.gone .ef-reticle b::after { content: "SIGNAL LOST"; }
@keyframes efJitter { 50% { transform: translate(4px, -3px); } }
/* Static when the feed breaks up */
.ef-static { position: absolute; inset: -20%; opacity: 0; mix-blend-mode: screen; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
#endfx.escaped.gone .ef-static { animation: efStatic 1.1s steps(6) forwards; }
@keyframes efStatic { 0% { opacity: 0.5; transform: translate(0, 0); } 30% { opacity: 0.35; transform: translate(-3%, 2%); } 60% { opacity: 0.4; transform: translate(2%, -2%); } 100% { opacity: 0; transform: translate(0, 1%); } }
/* The result */
.ef-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(560px, 92vw); text-align: center; opacity: 0; pointer-events: none; }
#endfx.show .ef-panel { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; transition: opacity 0.5s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
#endfx.show .ef-reticle, #endfx.show .ef-spot { opacity: 0; transition: opacity 0.5s; }
.ef-label { font: 600 10.5px var(--mono); letter-spacing: 0.26em; color: var(--muted); text-transform: uppercase; }
.ef-title { position: relative; margin: 14px 0 6px; font: 800 clamp(40px, 7vw, 76px)/1 var(--head); letter-spacing: 0.08em; color: var(--tone); text-shadow: 0 0 34px color-mix(in srgb, var(--tone) 45%, transparent); }
#endfx.show .ef-title { animation: efGlitch 0.7s steps(2) 1; }
.ef-title::before, .ef-title::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; }
#endfx.show .ef-title::before { color: var(--color-danger); animation: efSplit 0.7s steps(3) 1; }
#endfx.show .ef-title::after { color: var(--color-accent); animation: efSplit 0.7s steps(3) reverse 1; }
@keyframes efGlitch { 0% { clip-path: inset(0 0 60% 0); } 25% { clip-path: inset(40% 0 0 0); } 50% { clip-path: inset(10% 0 30% 0); } 100% { clip-path: none; } }
@keyframes efSplit { 0% { opacity: 0.8; transform: translate(-6px, 0); } 50% { opacity: 0.6; transform: translate(5px, 1px); } 100% { opacity: 0; transform: none; } }
.ef-team { font: 700 13px var(--mono); letter-spacing: 0.4em; color: #e8f1f8; opacity: 0.85; }
.ef-board { list-style: none; margin: 26px auto 0; padding: 0; width: min(var(--ef-w), 100%); display: flex; flex-direction: column; gap: 4px; }
.ef-board li { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border: 1px solid var(--line2); font: 600 13px var(--mono); letter-spacing: 0.06em; color: #c5d3e0; opacity: 0; }
.ef-board li.me { border-color: var(--tone); color: #fff; }
.ef-board li b { font: 800 16px var(--mono); color: var(--tone); }
.ef-board em { font: 700 9px var(--mono); font-style: normal; letter-spacing: 0.14em; color: var(--tone); border: 1px solid currentColor; padding: 0 4px; margin-left: 6px; }
/* (the table is exactly as wide as the first two buttons; a third sits centred under them) */
.ef-panel { --ef-w: 480px; }
.ef-actions .tbtn { white-space: nowrap; }
.ef-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(var(--ef-w), 100%); margin: 26px auto 0; }
.ef-actions .tbtn:only-child { grid-column: 1 / -1; justify-self: center; }
.ef-actions .tbtn:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
.ef-note { margin: var(--space-4) auto 0; width: min(var(--ef-w), 100%); color: var(--color-muted); font-size: var(--text-md); }
.ef-note b { color: var(--color-text-strong); font-weight: var(--weight-semibold); }
.ef-actions .tbtn { min-width: 0; padding: var(--space-3) var(--space-5); font-size: var(--text-md); }
#endfx.lost .ef-actions .tbtn:not(.ghost) { border-color: var(--red); color: var(--red); }
#endfx.lost .ef-actions .tbtn:not(.ghost):hover { background: var(--red); color: var(--color-surface-1); }
#endfx.show .ef-board li { animation: efRow 0.4s both; animation-delay: calc(0.5s + var(--i) * 0.12s); }
@keyframes efRow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#endfx.show.caught.lock .ef-reticle, #endfx.show.escaped.gone .ef-reticle, #endfx.show .ef-spot { opacity: 0; transition: opacity 0.5s; }
.ef-title { white-space: nowrap; font-size: clamp(36px, 6vw, 64px); }
.ef-panel { width: min(640px, 94vw); }
#endfx.show .ef-dim { opacity: 1; background: color-mix(in srgb, var(--color-bg) 88%, transparent); transition: background 0.6s; }

/* ===== End sequence, amped: several beams cut through the dark, police and headlights, heavy rain ===== */
.ef-spot, .ef-dim { display: none; }
.ef-dark { position: absolute; inset: 0; background: rgba(2, 4, 7, 0.66); opacity: 0; transition: opacity 0.9s; -webkit-mask-composite: source-in; mask-composite: intersect; }
#endfx.go .ef-dark { opacity: 1; }
.ef-beams { position: absolute; inset: 0; pointer-events: none; }
.ef-beams i { position: absolute; left: 0; top: 0; border-radius: 50%; mix-blend-mode: screen; will-change: transform;
  background: radial-gradient(circle, rgba(232, 246, 255, 0.16) 0%, rgba(232, 246, 255, 0.07) 42%, rgba(232, 246, 255, 0.015) 62%, transparent 72%); }
#endfx.lock .ef-beams i { background: radial-gradient(circle, color-mix(in srgb, var(--color-text-strong) 26%, transparent) 0%, color-mix(in srgb, var(--color-text-strong) 10%, transparent) 45%, transparent 72%); }
/* Police: red and blue washing in from the sides, alternating */
.ef-police i { position: absolute; top: 0; bottom: 0; width: 45vw; opacity: 0; mix-blend-mode: screen; }
.ef-police .r { left: 0; background: radial-gradient(ellipse at 0% 60%, rgba(255, 40, 70, 0.28), transparent 65%); }
.ef-police .b { right: 0; background: radial-gradient(ellipse at 100% 60%, rgba(40, 110, 255, 0.3), transparent 65%); }
#endfx.police .ef-police .r { animation: efStrobe 0.7s steps(1) infinite; }
#endfx.police .ef-police .b { animation: efStrobe 0.7s steps(1) 0.35s infinite; }
@keyframes efStrobe { 0% { opacity: 1; } 18% { opacity: 0.2; } 30% { opacity: 0.9; } 50%, 100% { opacity: 0; } }
/* Headlights sweeping along the street below */
.ef-car { position: absolute; left: -60vw; bottom: -10vh; width: 60vw; height: 40vh; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 236, 200, 0.2), rgba(255, 236, 200, 0.06) 40%, transparent 68%); }
#endfx.cars .ef-car { animation: efCar 3.2s ease-in-out infinite; }
@keyframes efCar { 0% { left: -60vw; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100vw; opacity: 0; } }
.ef-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Lightning */
.ef-flash { position: absolute; inset: 0; background: #e6f4ff; opacity: 0; mix-blend-mode: screen; pointer-events: none; }
#endfx.flash .ef-flash { animation: efFlash 0.5s steps(1) 1; }
@keyframes efFlash { 0% { opacity: 0.35; } 15% { opacity: 0.05; } 30% { opacity: 0.45; } 50% { opacity: 0.08; } 70%, 100% { opacity: 0; } }
/* Result: the dark closes in, the lights fade back, the rain keeps falling */
#endfx.show .ef-beams, #endfx.show .ef-police, #endfx.show .ef-car { opacity: 0.35; transition: opacity 1s; }
#endfx.show .ef-rain { opacity: 0.6; transition: opacity 1s; }
#endfx.caught.lock .ef-reticle { opacity: 1; width: 120px; height: 120px; margin: -60px 0 0 -60px; top: 46%; }

/* ===== End sequence v3: you're there. Helicopter light washes over the screen from outside, rotor shadows
   turning through it; police and headlights reflect off the glass; rain on it. No top-down spotlight. ===== */
.ef-dark { -webkit-mask-image: none !important; mask-image: none !important; background: rgba(2, 4, 7, 0.55) !important; }
#endfx.show .ef-dark { opacity: 1; -webkit-mask-image: none !important; mask-image: none !important; transition: background 0.8s; background: color-mix(in srgb, var(--color-bg) 86%, transparent) !important; }
/* Helicopters hovering just off-screen: only the outer edge of their light reaches in, as a faint wash with wide
   soft bands turning through it (the light between the rotor blades). One at a time, a second when they close in. */
.ef-beams i.ef-heli { position: absolute; left: 0; top: 0; border-radius: 50%; mix-blend-mode: screen; will-change: transform; overflow: hidden; transition: opacity 1.5s;
  background: radial-gradient(circle, rgba(225, 240, 255, 0.3) 0%, rgba(225, 240, 255, 0.16) 22%, rgba(225, 240, 255, 0.07) 42%, rgba(225, 240, 255, 0.025) 60%, transparent 74%); }
.ef-beams i.ef-heli.off { opacity: 0; }
.ef-rotor { position: absolute; inset: 0; border-radius: 50%; animation: efRotor var(--spin, 1.2s) linear infinite var(--dir, normal);
  background: repeating-conic-gradient(from 0deg, rgba(225, 240, 255, 0) 0deg, rgba(225, 240, 255, 0.05) 18deg, rgba(225, 240, 255, 0.09) 34deg, rgba(225, 240, 255, 0.05) 50deg, rgba(225, 240, 255, 0) 70deg, rgba(225, 240, 255, 0) 120deg);
  -webkit-mask: radial-gradient(circle, transparent 0%, #000 12%, #000 45%, transparent 76%); mask: radial-gradient(circle, transparent 0%, #000 12%, #000 45%, transparent 76%); }
@keyframes efRotor { to { transform: rotate(360deg); } }
/* Police and headlights: bigger, softer reflections */
.ef-police i { width: 70vw; }
.ef-police .r { background: radial-gradient(ellipse at 0% 55%, rgba(255, 40, 70, 0.32), rgba(255, 40, 70, 0.1) 40%, transparent 70%); }
.ef-police .b { background: radial-gradient(ellipse at 100% 55%, rgba(40, 110, 255, 0.34), rgba(40, 110, 255, 0.1) 40%, transparent 70%); }
#endfx.police .ef-police .r, #endfx.police .ef-police .b { animation-name: efStrobeSoft; animation-timing-function: ease-in-out; }
@keyframes efStrobeSoft { 0% { opacity: 0.9; } 25% { opacity: 0.25; } 40% { opacity: 0.8; } 60%, 100% { opacity: 0; } }
.ef-car { width: 90vw; height: 70vh; bottom: -25vh; background: radial-gradient(ellipse at 50% 60%, rgba(255, 236, 200, 0.22), rgba(255, 236, 200, 0.07) 40%, transparent 70%); }
/* End sequence, the story: the heli's light is driven frame by frame; a car drives right past once */
.ef-beams i.ef-heli { transition: none; }
.ef-car.pass { left: 0; opacity: 0; animation: none; }
.ef-car.pol i { position: absolute; top: 10%; width: 40%; height: 70%; border-radius: 50%; mix-blend-mode: screen; }
.ef-car.pol .r { left: 8%; background: radial-gradient(circle, rgba(255, 40, 70, 0.4), transparent 65%); animation: efStrobeSoft 0.7s infinite; }
.ef-car.pol .b { right: 8%; background: radial-gradient(circle, rgba(40, 110, 255, 0.42), transparent 65%); animation: efStrobeSoft 0.7s 0.35s infinite; }
/* All the lights share one shadow mask (set from endscreen.js) and blend onto the screen as light */
.ef-lights { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* A flatter light, no hot centre */
.ef-beams i.ef-heli { background: radial-gradient(circle, rgba(225, 240, 255, 0.2) 0%, rgba(225, 240, 255, 0.16) 25%, rgba(225, 240, 255, 0.09) 45%, rgba(225, 240, 255, 0.035) 62%, transparent 78%); }
#endfx.lock .ef-beams i.ef-heli { background: radial-gradient(circle, color-mix(in srgb, var(--color-text) 26%, transparent) 0%, color-mix(in srgb, var(--color-text) 20%, transparent) 25%, color-mix(in srgb, var(--color-text) 11%, transparent) 45%, color-mix(in srgb, var(--color-text) 4%, transparent) 62%, transparent 78%); }
/* Their sources off-screen too: headlights below the edge, police lights beyond the sides */
.ef-car { bottom: -45vh; }
.ef-police .r { background: radial-gradient(ellipse at -15% 55%, rgba(255, 40, 70, 0.32), rgba(255, 40, 70, 0.1) 45%, transparent 75%); }
.ef-police .b { background: radial-gradient(ellipse at 115% 55%, rgba(40, 110, 255, 0.34), rgba(40, 110, 255, 0.1) 45%, transparent 75%); }
#endfx.show .ef-beams { opacity: 0.45; }
/* The helicopter light is a canvas now (drawn small, stretched smooth) */
.ef-heli-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Ambient helicopter light (canvas) under a shadow mask */
#fx .fx-lights { position: absolute; inset: 0; mix-blend-mode: screen; }
#fx .fx-heli { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ===== Wildcards: the dealt cards, Roadblock, four mode cards ===== */
.mc-art .cardart rect { fill: rgba(5, 8, 13, 0.9); stroke: rgba(232, 241, 248, 0.7); stroke-width: 1.2; }

/* The dealt cards: a small terminal window over the map, two cards side by side */
#cards { position: absolute; inset: 0; z-index: 45; display: none; align-items: center; justify-content: center; pointer-events: none; padding: var(--space-4); }
#cards.on { display: flex; }
.wcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 190px; padding: 22px 14px 16px; text-align: center; border-radius: 10px;
  border: 1px solid rgba(199, 125, 255, 0.45); background: linear-gradient(180deg, rgba(199, 125, 255, 0.14), rgba(199, 125, 255, 0.04)), #05080d; color: #e8f1f8;
  animation: wcIn 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms) both; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.wcard:hover, .wcard:focus-visible { transform: translateY(-4px); border-color: #c77dff; box-shadow: 0 0 22px rgba(199, 125, 255, 0.45); }
.wcard .wc-k { position: absolute; top: 8px; left: 10px; font: 700 11px var(--mono); color: var(--muted); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; }
.wcard .wc-ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #d9b8ff; background: rgba(199, 125, 255, 0.12); border: 1px solid rgba(199, 125, 255, 0.4); }
.wcard b { font: 700 14px var(--sans); letter-spacing: 0.02em; }
.wcard small { font: 500 12px/1.45 var(--sans); color: var(--muted); }
@keyframes wcIn { from { opacity: 0; transform: translateY(14px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .wcard { min-height: 0; } }
/* Reopening the dealt cards from the panel */
.pc-abl .sec-label, .ab-head { display: flex; align-items: center; gap: var(--space-1-5); }
/* Paper trail's ticket choice, in the banner */

/* Roadblock: an amber barrier square halfway along the route (the route itself drawn amber) */
.tok-block > i > b { transform: rotate(-45deg); width: 17px; height: 17px; border-radius: 50%; background: var(--color-bg); display: flex; align-items: center; justify-content: center; color: var(--color-text-strong); font-size: var(--text-md); }
.tok-block .mtip { border-color: color-mix(in srgb, var(--color-wait) 60%, transparent); }
.tok-block .mtip b { color: var(--color-wait); }
.ev.roadblock { cursor: pointer; }
/* The dealt cards sit over the map area, above the map's own layers */
#game > #cards { grid-area: map; position: relative; inset: auto; z-index: 1045; }
#game > #cards:not(.on) { display: none; }

/* ===== Transit trace: track pieces on a grid, the scanned stop on the left, the next station on the right ===== */
.tr-wrap { --cell: min(68px, calc((100vh - 360px) / var(--rows))); display: grid; grid-template-columns: 74px auto 74px; align-items: stretch; gap: 10px; font-family: var(--mono); }
.tr-grid { display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-template-rows: repeat(var(--rows), var(--cell)); gap: 3px; padding: 6px; border-radius: 8px;
  background-image: linear-gradient(rgba(45, 226, 230, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 226, 230, 0.05) 1px, transparent 1px); background-size: 12px 12px; border: 1px solid rgba(45, 226, 230, 0.15); }
.tr-cell { padding: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(5, 8, 13, 0.85); cursor: pointer; overflow: hidden; }
.tr-cell:hover, .tr-cell.cur { border-color: rgba(45, 226, 230, 0.55); }
.tr-cell > span { display: block; width: 100%; height: 100%; transform: rotate(var(--deg)); transition: transform 0.16s ease-out; }
.tr-cell svg { width: 100%; height: 100%; display: block; }
.tr-cell .bed { stroke: #0b1219; stroke-width: 26; stroke-linecap: butt; fill: none; }
.tr-cell .rail { stroke: #3c4b5a; stroke-width: 12; stroke-linecap: butt; fill: none; stroke-dasharray: 7 3; transition: stroke 0.2s; }
.tr-cell .hub { fill: #3c4b5a; transition: fill 0.2s; }
.tr-cell.lit .rail { stroke: #2de2e6; stroke-dasharray: none; filter: drop-shadow(0 0 3px rgba(45, 226, 230, 0.8)); }
.tr-cell.lit .hub { fill: #2de2e6; }
.tr-wrap.done .tr-cell.lit .rail, .tr-wrap.done .tr-cell.lit .hub { stroke: #33d17a; fill: #33d17a; }
.tr-wrap.done .tr-cell.lit .hub { stroke: none; }
.tr-end { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  align-self: start; margin-top: calc(6px + var(--r) * (var(--cell) + 3px)); height: var(--cell); }
.tr-end span { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; border: 2px solid #2de2e6; color: #2de2e6; background: #05080d; box-shadow: 0 0 12px rgba(45, 226, 230, 0.4); }
.tr-end small { font: 700 9px/1.2 var(--mono); letter-spacing: 0.12em; color: var(--muted); }
.tr-end.to span { border-color: #3c4b5a; color: #7d8d9c; box-shadow: none; }
.tr-wrap.done .tr-end.to span { border-color: #33d17a; color: #33d17a; box-shadow: 0 0 14px rgba(51, 209, 122, 0.5); }
.tr-wrap.done .tr-end.to small { color: #e8f1f8; font-size: 11px; letter-spacing: 0.04em; animation: trName 0.5s ease-out; }
@keyframes trName { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* The transit record */
.tr-rec { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; padding: 6px 10px; font-family: var(--mono); }
.tr-sketch { width: min(240px, 40vh); height: min(240px, 40vh); flex: none; border-radius: 50%; border: 1px solid rgba(45, 226, 230, 0.15);
  background: radial-gradient(circle, rgba(45, 226, 230, 0.05), transparent 70%); overflow: visible; }
.tr-sketch line { stroke-width: 2.6; stroke-linecap: round; opacity: 0.9; }
.tr-sketch line.nx { stroke-width: 3.4; filter: drop-shadow(0 0 2px currentColor); }
.tr-sketch circle { fill: #05080d; stroke: #9fb3c8; stroke-width: 1.2; }
.tr-sketch circle.nx { stroke: #33d17a; fill: #33d17a; }
.tr-sketch circle.stop { fill: #2de2e6; stroke: #05080d; stroke-width: 1.5; }
.tr-sketch text { font: 700 6.5px var(--mono); fill: #e8f1f8; text-anchor: middle; paint-order: stroke; stroke: #05080d; stroke-width: 2.4px; }
.tr-sketch text.n { fill: var(--muted); font-size: 6px; stroke: none; }
.tr-facts { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.tr-k { font: 700 10px var(--mono); letter-spacing: 0.16em; color: var(--muted); margin-top: 4px; }
.tr-types { display: flex; flex-direction: column; gap: 6px; }
.tr-types span, .tr-next span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font: 600 13px var(--mono); color: #e8f1f8;
  border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); background: color-mix(in srgb, var(--tc) 12%, transparent); }
.tr-types span i, .tr-next span i { color: var(--tc); font-size: 16px; }
.tr-types b { font-size: 16px; min-width: 14px; }
.tr-next b { font-size: 15px; }
.tr-next small { color: var(--muted); font-size: 11px; }
.tr-next .lost { --tc: #5d7186; color: var(--muted); }
@media (max-width: 640px) { .tr-rec { flex-direction: column; } }
.tr-sketch text.c { fill: #2de2e6; font-size: 5px; letter-spacing: 0.08em; }
.tr-end:not(:has(small:not(:empty))) small { display: none; }
/* Transit record, larger: the sketch and the facts fill the screen; every row the same width */
.tr-rec { gap: 44px; padding: 10px 24px; }
.tr-sketch { width: min(320px, 46vh); height: min(320px, 46vh); }
.tr-facts { flex: 0 1 380px; min-width: 260px; gap: 12px; }
.tr-k { font-size: 12px; margin-top: 8px; }
.tr-types { gap: 10px; }
.tr-types span, .tr-next span { display: flex; width: 100%; box-sizing: border-box; gap: 14px; padding: 14px 18px; border-radius: 8px; font-size: 18px; }
.tr-types span i, .tr-next span i { font-size: 24px; }
.tr-types b, .tr-next b { font-size: 22px; min-width: 22px; }

/* ===== Ability colours by how many uses they come with: single (magenta), double (violet), triple (periwinkle) ===== */
.u1 { --ac: #ff6fd8; --ac-rgb: 255, 111, 216; --ac-hi: #ffd3f3; }
.u2 { --ac: #c77dff; --ac-rgb: 199, 125, 255; --ac-hi: #e5ccff; }
.u3 { --ac: #7d9dff; --ac-rgb: 125, 157, 255; --ac-hi: #d6e0ff; }
.ab[class*=" u"] { border-color: rgba(var(--ac-rgb), 0.4); background: linear-gradient(160deg, rgba(var(--ac-rgb), 0.12), rgba(10, 17, 25, 0.6)); }
.ab[class*=" u"] .ab-icon { color: var(--ac-hi); background: radial-gradient(circle at 30% 25%, rgba(var(--ac-rgb), 0.45), rgba(var(--ac-rgb), 0.16)); border-color: rgba(var(--ac-rgb), 0.55); }
.ab[class*=" u"] .charge { border-color: var(--ac); }
.ab[class*=" u"] .charge.on { background: var(--ac); box-shadow: 0 0 8px var(--ac); }
.ab[class*=" u"].ready { border-color: var(--ac); }
.ab[class*=" u"].ready .ab-icon { box-shadow: 0 0 16px rgba(var(--ac-rgb), 0.55), inset 0 0 10px rgba(255, 255, 255, 0.15); }
.ab[class*=" u"]:hover:not(:disabled) { border-color: var(--ac); box-shadow: 0 0 18px rgba(var(--ac-rgb), 0.45), inset 0 0 14px rgba(var(--ac-rgb), 0.14); }
.ab[class*=" u"]:hover:not(:disabled) .ab-icon { box-shadow: 0 0 20px rgba(var(--ac-rgb), 0.7), inset 0 0 10px rgba(255, 255, 255, 0.18); }
.ab[class*=" u"].on { border-color: #fff; background: linear-gradient(160deg, rgba(var(--ac-rgb), 0.4), rgba(10, 17, 25, 0.6)); box-shadow: 0 0 24px rgba(var(--ac-rgb), 0.6); }
.ab[class*=" u"] .tip em { color: var(--ac-hi); }
.ab[class*=" u"].spent { border-color: var(--line2); background: transparent; }
/* Loadout picker and the field manual */
.opt.lo-card[class*=" u"] { border-color: rgba(var(--ac-rgb), 0.35); background: rgba(var(--ac-rgb), 0.05); }
.opt.lo-card[class*=" u"] .lo-big { color: var(--ac-hi); border-color: rgba(var(--ac-rgb), 0.45); background: rgba(var(--ac-rgb), 0.1); }
.opt.lo-card[class*=" u"] .pips i { background: var(--ac); box-shadow: 0 0 6px var(--ac); }
.opt.lo-card[class*=" u"].on { border-color: var(--ac); background: rgba(var(--ac-rgb), 0.16); box-shadow: 0 0 16px rgba(var(--ac-rgb), 0.35); }
.opt.lo-card[class*=" u"].hl, .opt.lo-card[class*=" u"]:hover { border-color: var(--ac); box-shadow: 0 0 18px rgba(var(--ac-rgb), 0.45); background: rgba(var(--ac-rgb), 0.1); }
.opt.lo-card[class*=" u"] .tick { color: var(--ac); }
/* Dealt cards (Wildcards) */
.wcard[class*=" u"] { border-color: rgba(var(--ac-rgb), 0.45); background: linear-gradient(180deg, rgba(var(--ac-rgb), 0.14), rgba(var(--ac-rgb), 0.04)), #05080d; }
.wcard[class*=" u"]:hover, .wcard[class*=" u"]:focus-visible { border-color: var(--ac); box-shadow: 0 0 22px rgba(var(--ac-rgb), 0.45); }
.wcard[class*=" u"] .wc-ic { color: var(--ac-hi); background: rgba(var(--ac-rgb), 0.12); border-color: rgba(var(--ac-rgb), 0.4); }

/* ===== Field manual ===== */
.opt.soon:hover { border-color: var(--line2); background: transparent; }
.dossier { display: flex; flex-direction: column; gap: 14px; }
.dossier-tabs { align-items: center; margin: 0; }
.dossier-key { margin-left: auto; display: flex; gap: 18px; justify-content: flex-end; font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-wide); color: var(--muted); text-transform: uppercase; }
.dossier-key span { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.dossier-key i { width: 14px; height: 6px; border-radius: var(--radius-xs); background: var(--ac); box-shadow: 0 0 6px var(--ac); }
.v-dossier .opt.lo-card { cursor: default; }
.opt.soon { opacity: 0.45; cursor: default; position: relative; }
.opt.soon > .tag { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); margin: 0; }
/* Wildcards art: see-through cards over the grid, like the other modes' line art */
.mc-art .cardart rect { fill: rgba(232, 241, 248, 0.06); }

/* Dealt cards: re-roll as a card, separate keys, a window you can drag or minimize */
.term-keys .kor { color: var(--muted); margin: 0 -2px; }
.cards-win { pointer-events: auto; background: color-mix(in srgb, var(--color-bg) 92%, transparent); border: 1px solid var(--line2); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-bg) 40%, transparent), 0 18px 60px color-mix(in srgb, var(--color-bg) 60%, transparent), 0 0 50px color-mix(in srgb, var(--color-accent) 10%, transparent); backdrop-filter: blur(6px); animation: termIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; width: fit-content; max-width: 100%; }
.wcard { min-height: 170px; justify-content: center; }
.wcard .pips { display: flex; gap: 3px; }
.wcard .pips i { width: 12px; height: 5px; border-radius: 2px; background: var(--ac, #c77dff); box-shadow: 0 0 6px var(--ac, #c77dff); }
.wcard.reroll { border-style: dashed; border-color: rgba(45, 226, 230, 0.45); background: rgba(45, 226, 230, 0.04); }
.wcard.reroll .wc-ic { color: var(--cyan); background: rgba(45, 226, 230, 0.1); border-color: rgba(45, 226, 230, 0.4); }
.wcard.reroll:hover:not(:disabled) { border-color: var(--cyan); box-shadow: 0 0 22px rgba(45, 226, 230, 0.35); }
.wcard.reroll:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.wcard .wc-n { font: 700 10px var(--mono); letter-spacing: 0.14em; color: var(--muted); }
/* A window's minimize and close buttons, together at the right of its title bar */
.win-btns { display: inline-flex; align-items: center; gap: 12px; }
/* (minimized: docked to the bottom edge of the map, the banner's look turned upside down) */
#cards.min { align-items: flex-end; padding: 0; pointer-events: none; }
.cards-min { pointer-events: auto; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md) var(--radius-md) 0 0;
  font: var(--text-md)/1.45 var(--font-sans); color: var(--color-text); background: var(--color-surface-1); border: 1px solid var(--color-line-strong); border-bottom: 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45); cursor: pointer; animation: fadeIn 0.2s; }
.cards-min > i:first-child { font-size: var(--text-lg); color: var(--c); }
.cards-min b { color: var(--color-text-strong); font-weight: var(--weight-semibold); }
.cards-min:hover:not(:disabled) { border-color: var(--color-line-strong); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45); background: var(--color-surface-2); }
.cards-min .sep { margin: 0 var(--space-1); }

/* ===== Ability chips (public/chips.js): one look for every ability, everywhere =====
   A dark board with one cut corner, a square die with the icon, a top rail with one LED per use, contact pins
   along the bottom. The body is the same on every chip; the accent (edge, LEDs, icon, label) says how many uses. */
.abchip {
  --w: 118px; --h: 142px; --cut: 14px; --edge: rgba(var(--ac-rgb), 0.38);
  position: relative; box-sizing: border-box; width: var(--w); height: var(--h); padding: 0; color: #e8f1f8; font: inherit; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  border: 1px solid var(--edge); border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(var(--ac-rgb), 0.10), transparent 40%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 9px),
    linear-gradient(165deg, #121b25, #070b10 70%);
  transition: transform 0.15s, filter 0.15s, opacity 0.2s, border-color 0.15s;
}
/* The cut corner's own edge, so the outline runs all the way round */
.abchip::after { content: ""; position: absolute; top: -1px; left: calc(100% + 1px - var(--cut)); width: calc(var(--cut) * 1.4142); height: 2px; background: var(--edge);
  transform-origin: 0 0; transform: rotate(45deg) translateY(-1px); pointer-events: none; }
.abchip > * { position: relative; }
.abchip i { color: inherit; }
/* Top rail: the key on the left, one LED per use on the right */
.abchip .ac-top { align-self: stretch; display: flex; align-items: center; justify-content: space-between; height: 18px; padding: 0 calc(var(--cut) + 2px) 0 7px;
  border-bottom: 1px solid rgba(var(--ac-rgb), 0.18); font: 700 9px var(--mono); color: var(--muted); }
.abchip .ac-key:not(:empty) { border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; line-height: 11px; color: #c7d3df; }
.abchip .ac-leds { display: flex; gap: 3px; }
.abchip .ac-leds i { width: 7px; height: 4px; border-radius: 1px; background: rgba(var(--ac-rgb), 0.18); }
.abchip .ac-leds i.lit { background: var(--ac); box-shadow: 0 0 6px var(--ac); }
/* The die: a square socket with the icon in the chip's colour */
.abchip .ac-die { margin-top: 12px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 25px; color: var(--ac-hi);
  border: 1px solid rgba(var(--ac-rgb), 0.5); border-radius: 4px; background: radial-gradient(circle at 50% 40%, rgba(var(--ac-rgb), 0.24), rgba(5, 8, 13, 0.9) 75%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(5, 8, 13, 0.6); }
.abchip .ac-die > i { color: var(--ac-hi); }
.abchip .ac-name { margin-top: 10px; padding: 0 6px; font: 700 11px/1.2 var(--sans); letter-spacing: 0.01em; color: #e8f1f8; }
/* Status band (ACTIVE, ARMED, USED TODAY...): part of the chip, a tinted strip under the name */
.abchip .ac-label { align-self: stretch; margin: 8px 0 0; padding: 3px 4px; font: 700 8.5px var(--mono); letter-spacing: 0.16em; font-style: normal; color: var(--ac-hi);
  background: linear-gradient(90deg, transparent, rgba(var(--ac-rgb), 0.2) 15%, rgba(var(--ac-rgb), 0.2) 85%, transparent);
  border-top: 1px solid rgba(var(--ac-rgb), 0.3); border-bottom: 1px solid rgba(var(--ac-rgb), 0.3); }
/* Contact pins along the bottom edge: quiet, in the chip's own tone; they light up when it's on */
.abchip .ac-pins { position: absolute; left: 12px; right: 12px; bottom: 0; height: 5px; display: flex; justify-content: space-between; }
.abchip .ac-pins i { width: 6px; height: 5px; border-radius: 1px 1px 0 0; background: rgba(var(--ac-rgb), 0.22); }
.abchip .ac-badge { position: absolute; right: -12px; bottom: -9px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border-radius: 3px; font: 700 9px var(--mono);
  color: var(--bc); background: #05080d; border: 1px solid var(--bc); box-shadow: 0 0 8px color-mix(in srgb, var(--bc) 50%, transparent); }
.abchip .ac-badge i { font-size: 11px; color: var(--bc); }
/* Sizes */
.abchip.lg { --w: 150px; --h: 176px; --cut: 18px; }
.abchip.lg .ac-die { width: 62px; height: 62px; font-size: 32px; margin-top: 18px; }
.abchip.lg .ac-name { font-size: 13px; margin-top: 14px; }
.abchip.lg .ac-top { height: 22px; }
.abchip.sm { --w: 92px; --h: 112px; --cut: 11px; }
.abchip.sm .ac-die { width: 34px; height: 34px; font-size: 18px; margin-top: 9px; }
.abchip.sm .ac-name { font-size: 10px; margin-top: 7px; }
.abchip.sm .ac-label { margin-top: 5px; font-size: 7.5px; }
/* States */
.abchip:hover:not(.spent):not(.used):not(.nofit):not(.socket) { transform: translateY(-3px); --edge: var(--ac); filter: drop-shadow(0 0 10px rgba(var(--ac-rgb), 0.45)); }
.abchip.ready { --edge: rgba(var(--ac-rgb), 0.75); }
.abchip.ready .ac-leds i.lit { animation: chipLed 2.2s ease-in-out infinite; }
@keyframes chipLed { 50% { opacity: 0.45; box-shadow: none; } }
.abchip.on { --edge: var(--ac); filter: drop-shadow(0 0 12px rgba(var(--ac-rgb), 0.5)); background:
    linear-gradient(180deg, rgba(var(--ac-rgb), 0.3), rgba(var(--ac-rgb), 0.08) 70%), linear-gradient(165deg, #121b25, #070b10 70%); }
.abchip.on .ac-die { border-color: var(--ac); box-shadow: 0 0 16px rgba(var(--ac-rgb), 0.6), inset 0 0 10px rgba(255, 255, 255, 0.1); }
.abchip.on .ac-die > i, .abchip.armed .ac-die > i { color: #fff; filter: drop-shadow(0 0 5px var(--ac)) drop-shadow(0 0 10px rgba(var(--ac-rgb), 0.7)); }
.abchip.on .ac-pins i { background: var(--ac); box-shadow: 0 0 5px var(--ac); }
.abchip.on .ac-label { color: #fff; background: linear-gradient(90deg, transparent, rgba(var(--ac-rgb), 0.45) 15%, rgba(var(--ac-rgb), 0.45) 85%, transparent); border-color: rgba(var(--ac-rgb), 0.7); }
.abchip.armed { --edge: rgba(var(--ac-rgb), 0.7); }
.abchip.armed .ac-die > i { animation: chipArmed 1.6s ease-in-out infinite; }
@keyframes chipArmed { 50% { opacity: 0.55; } }
.abchip.armed .ac-label { animation: chipArmed 1.6s ease-in-out infinite; }
.abchip.used { opacity: 0.55; cursor: default; }
.abchip.used .ac-die { filter: grayscale(0.7); }
.abchip.spent { --edge: rgba(255, 255, 255, 0.1); opacity: 0.45; filter: grayscale(1); cursor: default; }
.abchip.spent .ac-label, .abchip.used .ac-label { color: var(--muted); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
.abchip.sel { --edge: var(--ac); }
.abchip.sel .ac-top::after { content: "\2713"; position: absolute; right: 3px; top: 1px; font: 700 10px var(--mono); color: var(--ac); }
.abchip.nofit { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.6); }
/* An empty socket */
.abchip.socket { --edge: rgba(255, 255, 255, 0.1); --ac-rgb: 120, 140, 160; --ac: #5d7186; --ac-hi: #5d7186; cursor: default; justify-content: center; border-style: dashed;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 6px, transparent 6px 12px), #05080d; }
.abchip.socket .ac-die { margin: 0; border-style: dashed; background: transparent; box-shadow: none; font-size: 18px; }
.abchip.socket .ac-label { background: none; border: 0; color: var(--muted); }

/* Sandbox: the chip preview sheet */
#chipSheet { position: fixed; inset: 0; z-index: 3000; overflow: auto; padding: 28px 32px 60px; background: rgba(3, 6, 9, 0.97); font-family: var(--mono); }
#chipSheet h3 { font: 700 12px var(--mono); letter-spacing: 0.16em; color: var(--cyan); margin: 26px 0 12px; }
#chipSheet h3 small { color: var(--muted); font-weight: 500; letter-spacing: 0.06em; margin-left: 10px; }
#chipSheet .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
#chipSheet .cap { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 9.5px var(--mono); letter-spacing: 0.1em; color: var(--muted); }
#chipSheet .close { position: fixed; top: 16px; right: 20px; }
#chipSheet .panel-demo { display: inline-flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(10, 17, 25, 0.8); }
/* Chip hover: the chip's own colour, bright and saturated, all the way round (the cut corner too); the generic
   button hover (cyan) never applies to chips */
.u1 { --ac-sat: #ff4fe0; }
.u2 { --ac-sat: #b85cff; }
.u3 { --ac-sat: #5b86ff; }
.abchip { border-color: var(--edge) !important; }
button.abchip:hover:not(:disabled) { box-shadow: none; }
.abchip:hover:not(.spent):not(.used):not(.nofit):not(.socket) { --edge: var(--ac-sat); filter: drop-shadow(0 0 10px rgba(var(--ac-rgb), 0.55)); }
/* Roadblock marker: its own hover tooltip (it sits on a route, not on a place, so no place hover reaches it) */
.tok-block > i { width: 24px; height: 24px; border-radius: var(--radius-sm); transform: translate(-50%, -50%) rotate(45deg); display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-wait) 42%, transparent) 0 3px, var(--color-bg) 3px 7px); border: 2px solid var(--color-wait); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-bg) 55%, transparent), 0 0 14px color-mix(in srgb, var(--color-wait) 45%, transparent); pointer-events: auto; cursor: default; transition: transform 0.15s; }
.tok-block:hover > i { transform: translate(-50%, -50%) rotate(45deg) scale(1.18); }
.tok-block:hover .mtip { display: block; }
/* A choice made with the ability (Paper trail's ticket) sits in the status band: "LOG ⛴ SHIP" */
.abchip .ac-label.has-choice { display: flex; align-items: center; justify-content: center; gap: 6px; }
.abchip .ac-label.has-choice > span { opacity: 0.75; }
.abchip .ac-choice { display: inline-flex; align-items: center; gap: 3px; color: var(--bc); text-shadow: 0 0 6px color-mix(in srgb, var(--bc) 60%, transparent); }
.abchip .ac-choice i { font-size: 11px; color: var(--bc); }
/* The choice as an icon in the band, in the chip's own colours: a small socket like the die's */
.abchip .ac-choice { width: 16px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; color: #fff; text-shadow: none;
  background: rgba(5, 8, 13, 0.85); border: 1px solid rgba(var(--ac-rgb), 0.8); box-shadow: 0 0 6px rgba(var(--ac-rgb), 0.6); }
.abchip .ac-choice i { font-size: 10px; color: #fff; }
.abchip .ac-label.has-choice { padding-top: 2px; padding-bottom: 2px; }
/* A second, smaller die plugged in at the main die's lower right: the choice made with the ability */
.abchip .ac-die { position: relative; }
.abchip .ac-sub { position: absolute; right: -15px; bottom: -9px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 3px;
  background: radial-gradient(circle at 50% 40%, rgba(var(--ac-rgb), 0.35), #070b10 80%); border: 1px solid var(--ac);
  box-shadow: 0 0 0 2px #070b10, 0 0 10px rgba(var(--ac-rgb), 0.6); }
.abchip .ac-sub i { font-size: 15px; color: #fff; filter: drop-shadow(0 0 4px var(--ac)); }
.abchip.lg .ac-sub { width: 32px; height: 32px; right: -18px; bottom: -11px; }
.abchip.lg .ac-sub i { font-size: 18px; }
.abchip .ac-sub { right: auto; left: 50%; bottom: -15px; transform: translateX(-50%); }
.abchip.lg .ac-sub { right: auto; bottom: -18px; }

/* ===== Chips in the game ===== */
.ab-row.chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; grid-template-columns: none; }
.abchip:disabled { cursor: default; }
.abchip:disabled:not(.on):hover { transform: none; filter: none; --edge: rgba(var(--ac-rgb), 0.38); }
/* Keyboard highlight in the menus (loadout picker, field manual), like hovering */
.abchip.nav.hl { --edge: var(--ac-sat); transform: translateY(-3px); filter: drop-shadow(0 0 10px rgba(var(--ac-rgb), 0.55)); }
.grid.lo-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); justify-items: center; gap: 12px; }
/* (cards sit closer side by side than row to row, so each row reads as one shelf) */
.dossier .grid.lo-grid { grid-template-columns: repeat(auto-fill, 118px); justify-content: start; column-gap: var(--space-2); row-gap: var(--space-5); }
/* Its tabs are buttons: a rounded outline, the chosen one filled */
.dossier-tabs .tab { border-radius: var(--radius-md); border-bottom-color: var(--line2); padding: var(--space-2) var(--space-4); }
.dossier-tabs .tab.on { box-shadow: none; border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.dossier-tabs .tab:hover:not(.on) { border-color: var(--color-line-strong); color: var(--color-text-strong); }
/* Dealt cards: chips dealt onto the table */
/* (the cards side by side, the window hugging them with the same margin all round) */
.cards-row { display: grid; grid-template-columns: repeat(var(--n, 2), auto); align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-5); }
.abchip.dealt { animation: wcIn 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms) both; }
.abchip.reroll { --ac-rgb: 45, 226, 230; --ac: #2de2e6; --ac-hi: #b5f6f7; --ac-sat: #2de2e6; }
.abchip.reroll:not(.spent) { border-style: dashed; }
.pc-abl .ab-row.chips, .lay-a .pc-abl .ab-row.chips { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-end; gap: 10px; }

/* ===== Replay deck: a playback tool for scrubbing through the operation ===== */
.replay #replaybar { left: 50%; bottom: 14px; z-index: 1001; align-items: center; position: static; grid-area: bottom; transform: none; width: auto; margin: 0; border-radius: 0; border: 0; border-top: 1px solid var(--line2); box-shadow: none; display: block; padding: 0; gap: 0; background: color-mix(in srgb, var(--color-bg) 96%, transparent); overflow: hidden; }
.rd { display: flex; flex-direction: column; font-family: var(--mono); }
.rd-bar { display: flex; align-items: center; gap: 14px; padding: var(--space-2) 14px; font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-wide); color: var(--muted); border-bottom: 1px solid var(--line2); background: color-mix(in srgb, var(--color-accent) 3%, transparent); }
.rd-bar > span:first-child { flex: 1; }
.rd-tc { display: inline-flex; align-items: center; gap: var(--space-2); }
.rd-tc .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: recBlink 1.2s steps(1) infinite; }
@keyframes recBlink { 50% { opacity: 0.2; } }
.rd-time { font: var(--weight-semibold) var(--text-md) var(--mono); letter-spacing: var(--tracking-label); color: var(--color-text); }
/* The scrub area: ruler + lanes, each a label column and a track; the playhead runs through them all */
.rd-scrub { position: relative; padding: var(--space-1-5) 14px var(--space-2); cursor: ew-resize; user-select: none; touch-action: none; }
.rd-ruler, .rd-lane, .rd-head { display: grid; grid-template-columns: 108px 1fr; align-items: center; }
.rd-ln { white-space: nowrap; font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-wide); color: var(--muted); }
.rd-track { position: relative; height: 18px; }
.rd-ruler .rd-track { height: 20px; }
.rd-ruler .tick { position: absolute; bottom: 0; transform: translateX(-1px); font: var(--weight-semibold) var(--text-sm) var(--mono); color: var(--muted); padding-left: var(--space-1); border-left: 1px solid color-mix(in srgb, var(--color-text-strong) 25%, transparent); line-height: 1; height: 14px; display: flex; align-items: flex-end; }
.rd-lane .rd-ln::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--space-1-5); border-radius: var(--radius-xs); background: var(--lc); vertical-align: 1px; }
.rd-lane.t { --lc: #ff6b7a; } .rd-lane.d { --lc: var(--color-info); } .rd-lane.i { --lc: var(--color-wait); }
.rd-lane .mk { position: absolute; top: 3px; width: 4px; height: 10px; margin-left: -2px; border-radius: var(--radius-xs); background: var(--lc); opacity: 0.55; }
.rd-lane .mk.capture { width: 8px; margin-left: -4px; height: 12px; top: 2px; background: var(--red); opacity: 1; box-shadow: 0 0 8px var(--red); }
.rd-lane .mk.mrx, .rd-lane .mk.det { height: 6px; top: 5px; opacity: 0.35; }
.rd-lane .mk.cur { opacity: 1; background: var(--color-text-strong); box-shadow: 0 0 8px var(--lc); }
.rd-head { position: absolute; left: 14px; right: 14px; top: 6px; bottom: 8px; pointer-events: none; }
.rd-head .rd-track { height: 100%; }
.rd-head .ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.rd-head .ph::before { content: ""; position: absolute; top: -2px; left: -5px; border: 6px solid transparent; border-top: 7px solid var(--cyan); border-bottom: 0; }
/* Transport and the caption */
.rd-ctl { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 14px 10px; border-top: 1px solid var(--line2); }
.rd-ctl > button { padding: var(--space-1-5) 10px; }
/* (leaving the case review: the last thing on the control row, in the bottom-right corner) */
.rd-ctl > .rd-exit { flex: none; display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-md); }
.rd-ctl .rplay { padding: var(--space-1-5) 14px; border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); color: var(--cyan); }
.rd-speed { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--radius-md); overflow: hidden; }
.rd-speed button { border: 0; border-radius: 0; padding: var(--space-1) var(--space-2); font: var(--weight-semibold) var(--text-sm) var(--mono); color: var(--muted); background: transparent; }
.rd-speed button + button { border-left: 1px solid var(--line2); }
.rd-speed button.on { color: var(--color-bg); background: var(--cyan); }
.rd-ctl .rlabel { flex: 1; min-width: 0; font: var(--weight-regular) var(--text-md) var(--mono); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-ctl .rlabel .rl-k { display: inline-block; margin-right: var(--space-2); padding: var(--space-0-5) var(--space-1-5); border: 1px solid var(--line2); border-radius: var(--radius-sm); font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-wide); color: var(--muted); }
.rd-ctl .rlabel i { color: var(--cyan); }

/* ===== Heist in the lobby ===== */
.mc-art .cash rect { fill: rgba(232, 241, 248, 0.06); stroke: rgba(232, 241, 248, 0.7); stroke-width: 1.2; }
.mc-art .cash text { fill: rgba(232, 241, 248, 0.85); font: 700 10px var(--mono); text-anchor: middle; }

/* Heist cash sites: built like the extraction marker, in gold; a robbed one fades */
.tok-site > i svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tok-site > i svg path { stroke-linejoin: round; }
.tok-site > i svg .halo { fill: none; stroke: color-mix(in srgb, var(--color-bg) 55%, transparent); stroke-width: 13; }
.tok-site > i svg .hex { stroke: var(--ev); stroke-width: 3; }
.tok-site { --ev: var(--color-extract); } /* escape colour (tokens.js EXTRACT_COLOR); the tooltip takes it from here */
.tok-site.robbed > i { opacity: 0.4; filter: grayscale(0.8); }
.tok-site .mtip { border-color: color-mix(in srgb, var(--color-cash) 60%, transparent); }
.tok-site .mtip b { color: var(--color-cash); }
/* Alarms in the feed; the robber's loot line; the job handover */
.ev.alarm { cursor: pointer; }

/* Heist session settings: the label on the left, the number selector pinned right */
/* The highlight marker ("> ") belongs to a row's title, never to the number in a counter */
.counter b::before { content: none !important; }

/* ===== Replay: every ability on the timeline and the map ===== */
.rd-lane .mk.ic { top: -1px; width: 16px; height: 16px; margin-left: -8px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
  background: var(--color-bg); border: 1px solid var(--lc); opacity: 0.85; font-size: var(--text-sm); color: var(--lc); z-index: 1; }
.rd-lane .mk.ic i { font-size: var(--text-sm); color: inherit; }
.rd-lane .mk.ic.cur { opacity: 1; background: var(--lc); color: var(--color-bg); box-shadow: 0 0 10px var(--lc); z-index: 2; }
.rd-lane .mk.ic.capture { background: var(--red); color: var(--color-text-strong); border-color: var(--red); }
.rd-lane { position: relative; }
.rd-lane .rd-track { height: 16px; border-top: 1px solid color-mix(in srgb, var(--color-text-strong) 4%, transparent); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-text-strong) 3%, transparent) 0 1px, transparent 1px 24px); overflow: visible; }
/* The step's marker on the map */
.tok-ping > i { position: absolute; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent); border: 2px solid var(--c); box-shadow: 0 0 14px var(--c); animation: pingIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.tok-ping > i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--c); animation: pingRing 1.4s ease-out infinite; }
.tok-ping > i > b { color: var(--color-text-strong); font-size: var(--text-lg); }
@keyframes pingIn { from { transform: translate(-50%, -50%) scale(0.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes pingRing { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.2); opacity: 0; } }
/* Drawing layers: the switches in the Draw tools, and in the replay */
.rd-ctl .rsketch { display: inline-flex; gap: var(--space-0-5); }
.rd-ctl .rsketch:not(.on) { opacity: 0.45; }

/* Heist sites, v2: the roadblock's square (24px, 2px border, barrier hatch), upright, in gold */
.tok-site.bank > i { scale: 1; }
.tok-site.hov > i { transform: translate(-50%, -50%) scale(1.18); scale: 1.18; }
/* Upright, the site square needs to be a bit bigger than the roadblock's (which is turned 45°, so it spans ~34px) */
.tok-site > i { border-radius: var(--radius-sm); transform: translate(-50%, -50%); pointer-events: none; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-cash) 42%, transparent) 0 3px, var(--color-bg) 3px 7px); border: 2px solid var(--color-cash); filter: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-bg) 55%, transparent), 0 0 14px color-mix(in srgb, var(--color-cash) 40%, transparent); transition: scale 0.15s, opacity 0.2s; width: 30px; height: 30px; }
.tok-site > i > b { left: 50%; top: 50%; position: static; transform: none; border-radius: 50%; background: var(--color-bg); display: flex; align-items: center; justify-content: center; color: var(--color-text-strong); width: 21px; height: 21px; font-size: var(--text-md); }
/* A place's name moves clear of the marker standing on it (--mk set by the map per place), a little more on hover */
.city.marked span { transform: translateX(var(--mk, 14px)); }
.city.marked.hov span, .city.marked:hover span { transform: translateX(calc(var(--mk, 14px) + 5px)); }

/* ====================================================================================================
   HUD components, cleaned up (design review round 1). One block per component, holding everything it
   looks like; no overrides elsewhere. Values as they were; the token pass follows.
   ==================================================================================================== */

/* ---------- Banner: the one line of guidance at the top of the map ---------- */
/* (docked: hangs from the top edge of the map like a tab) */
#banner { grid-area: map; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: fit-content; z-index: 999; max-width: min(760px, 90%);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); border-radius: 0 0 var(--radius-md) var(--radius-md); font: var(--text-md)/1.45 var(--font-sans); color: var(--color-text);
  background: var(--color-surface-1); border: 1px solid var(--color-line-strong); border-top: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
#banner:empty { display: none; }
/* (a key and what it does, after a divider) */
#banner .sep, .cards-min .sep { display: inline-block; width: 1px; height: 1.3em; margin: 0 var(--space-3); vertical-align: middle; background: var(--color-line-strong); }
#banner .keyhint, .cards-min .keyhint { display: inline-flex; align-items: center; gap: var(--space-1-5); vertical-align: middle; white-space: nowrap;
  font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
#banner b { color: var(--color-text-strong); }
#banner .off { color: var(--color-danger-soft); }
#banner .hint { color: var(--color-muted); margin-left: var(--space-1-5); }
/* (whose move: a tag at the start of the line) */
#banner .day { margin-right: var(--space-2); }
.replay #banner { display: none; }

/* ---------- Tool rail: the column of map tools on the left ---------- */
#tools { grid-area: tools; position: relative; z-index: 1060; /* (over the agent panel, so its menus show whole) */ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; overflow: visible; background: var(--color-surface-1); border: 0 solid var(--color-line-strong); border-right-width: 1px; }
#tools .tool-group { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; }
#tools button { position: relative; width: 42px; height: 42px; padding: 0; font-size: var(--text-xl); display: flex; align-items: center; justify-content: center; }
#tools .tool-group button.layer-pick { color: var(--color-danger-soft); }
#tools hr { border: 0; border-top: 1px solid var(--color-line); margin: 2px 0; width: 100%; }
.replay #tools { visibility: hidden; }

/* ---------- Ready: the big action in the map's bottom-right corner ---------- */
#readyBtn { grid-area: map; position: absolute; right: var(--space-5); bottom: var(--space-5); z-index: 1100; min-width: 220px;
  padding: var(--space-4) var(--space-6); border-radius: var(--radius-sm); font: var(--weight-semibold) var(--text-lg) var(--font-mono); letter-spacing: var(--tracking-wide);
  color: var(--color-accent); background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  box-shadow: 0 0 24px rgba(var(--color-accent-rgb), 0.45); transition: right var(--dur-slow); animation: readyPulse 1.6s ease-in-out infinite; }
#readyBtn i { font-size: var(--text-lg); }
#readyBtn:hover:not(:disabled) { background: var(--color-accent); color: var(--color-bg); }
/* Pressed: lit and still, until everyone is ready */
#readyBtn.on { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); box-shadow: 0 0 24px rgba(var(--color-accent-rgb), 0.45); animation: none; }
@keyframes readyPulse { 50% { box-shadow: 0 0 34px rgba(var(--color-accent-rgb), 0.75), 0 0 0 4px rgba(var(--color-accent-rgb), 0.15); } }
.replay #readyBtn { display: none; }

/* ---------- Keycap: one real key on the keyboard (keys.js draws one per key) ----------
   Inline (in buttons, toggles, tooltips) by default; the key bar under a window uses bigger caps. Its border
   follows the text colour, so it reads on dark panels and on lit (cyan) buttons alike. */
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75em; padding: 1px 5px; font: var(--weight-semibold) var(--text-sm)/1.25 var(--font-mono);
  letter-spacing: 0.04em; color: inherit; background: rgba(255, 255, 255, 0.04); border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-bottom-width: 2px;
  border-radius: var(--radius-sm); vertical-align: middle; }
kbd i { font-size: 1.2em; }
kbd + kbd { margin-left: var(--space-1); }
.kor, .kplus { margin: 0 var(--space-1); font: var(--text-sm) var(--font-mono); color: var(--color-muted); }
.tbtn kbd, .tip-keys { margin-left: var(--space-2); }
.tip-keys { display: inline-flex; align-items: center; white-space: nowrap; }
.term-keys kbd { min-width: 26px; padding: var(--space-0-5) var(--space-1-5); font-size: var(--text-md); color: var(--color-text-strong); border-color: var(--color-line-strong); }
.term-keys kbd i { font-size: var(--text-lg); }
.feed-toggle kbd { display: inline-block; writing-mode: horizontal-tb; margin: var(--space-1-5) 0 0; }

/* ---------- Panel toggle: shows / hides a panel (agent panel, intel panel); arrow + its keycap ---------- */
.panel-toggle { flex: none; height: 30px; padding: 0 var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); font: var(--weight-semibold) var(--text-sm) var(--font-mono); color: var(--color-muted); }
.panel-toggle:hover { color: var(--color-text-strong); }
.feed-head { display: flex; justify-content: space-between; margin-bottom: var(--space-2); align-items: center; }

/* ---------- Tag: a short status word (whose move, YOU, OFFLINE, COMING SOON, intel facts) ----------
   One shape for all: a squircle, the colour from --c. The padding beside the text matches the space above and
   below it (a touch less on the right, where letter-spacing already adds a sliver). */
.tag { --c: var(--color-muted); display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 4px 3px 5px; border-radius: var(--radius-sm);
  font: var(--weight-semibold) var(--text-sm)/1.1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; font-style: normal; white-space: nowrap; vertical-align: middle;
  color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.tag b { color: var(--color-text-strong); font-weight: var(--weight-semibold); }
.tag i { font-size: 1.15em; }
.tag + .tag { margin-left: var(--space-1); }
/* (in a wrapping row the gap spaces them: a margin would push a wrapped tag off the left edge) */
.tag.accent { --c: var(--color-accent); } .tag.ok { --c: var(--color-ok); } .tag.wait { --c: var(--color-wait); } .tag.danger { --c: var(--color-danger-soft); }
.opt .tag { margin-left: auto; }
.opt:has(> .tag.rec) { grid-template-columns: 34px auto 1fr auto; }
.opt > .tag.rec { align-self: center; justify-self: end; font-size: 10px; letter-spacing: 0.08em; }
.member .tag, .pl-row b .tag { margin-left: var(--space-1-5); }

/* ---------- Section label: names a part of a panel or window (INTEL FEED, AGENT, TICKETS, DRAW, a window's title) ---------- */
.hud-label, .sec-label, .tg-label, .term-bar { font: var(--weight-semibold) var(--text-sm)/1.3 var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); }

/* ---------- Stepper: ‹ value › (lobby counters, the audio deck's album, track and volumes) ----------
   The arrows look and behave the same everywhere; the middle holds a number, a name or a meter. */
.stepper { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.stepper .step { flex: none; font-size: 15px; padding: var(--space-1); border-radius: var(--radius-sm); color: var(--color-muted); cursor: pointer; }
.stepper .step:hover { color: var(--color-text-strong); }
.stepper .step.off { opacity: 0.25; pointer-events: none; }
.opt.hl .stepper .step:not(.off) { color: var(--color-accent); }
.stepper > b { min-width: 2ch; text-align: center; font: var(--weight-semibold) var(--text-lg) var(--font-mono); }

/* ---------- Tooltip: one look for every tooltip (buttons and panels, ability chips, map markers) ---------- */
#floatTip, .tok .mtip { padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--color-line-strong);
  background: color-mix(in srgb, var(--color-surface-1) 96%, transparent); box-shadow: var(--shadow-pop);
  font: var(--weight-regular) var(--text-md)/1.4 var(--font-sans); color: var(--color-text); }
#floatTip b, .tok .mtip b { color: var(--color-text-strong); font-weight: var(--weight-semibold); }
/* (a map marker's tooltip: its name as a label, then a line of detail) */
.tok .mtip b { display: block; font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.tok .mtip small { display: block; font-size: var(--text-md); color: var(--color-muted); }

/* A task's title bar: the time left and its close button (the close stays visible on the scan-in screen) */
.pz-right { display: inline-flex; align-items: center; gap: var(--space-3); }
#puzzle.ready .pz-head .pz-close { visibility: visible; }
/* The ✕: a clear button (the one way to close a tablet, with Esc; a finished one also closes on a click outside) */
.t-app .pz-head .pz-close { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(45, 226, 230, 0.35); border-radius: 6px; background: rgba(45, 226, 230, 0.06); color: var(--cyan); font-size: 15px; transition: background 0.15s, border-color 0.15s; }
.t-app .pz-head .pz-close:hover, .t-app .pz-head .pz-close:focus-visible { border-color: var(--cyan); background: rgba(45, 226, 230, 0.18); color: #fff; outline: none; }
/* A finished task's result: a banner at the bottom of the screen, just above the line (green solved, red not) */
.t-app .pz-body { position: relative; }
.pz-result { --rc: #33d17a; position: absolute; left: 50%; bottom: 10px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 8px 16px; max-width: calc(100% - 24px);
  border: 1px solid var(--rc); border-radius: 4px; background: rgba(3, 12, 10, 0.92); box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 30%, transparent);
  font: 600 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text); white-space: nowrap; transform: translateX(-50%); animation: pzResult 0.3s 0.15s both; }
.pz-result.fail { --rc: var(--red); background: rgba(16, 4, 6, 0.92); }
.pz-result i { font-size: 18px; color: var(--rc); }
.pz-result b { color: var(--rc); font-weight: 700; }
.pz-result span { padding-left: 10px; border-left: 1px solid var(--line2); overflow: hidden; text-overflow: ellipsis; }
.pz-result em { font-style: normal; color: #fff; }
@keyframes pzResult { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.96); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pz-result { animation: none; } }
/* A task's one line of instructions: bottom centre of the screen */
.t-app .pz-foot { position: relative; min-height: 18px; }
.pz-desc { position: absolute; left: 0; right: 0; top: 10px; bottom: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font: 600 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(45, 226, 230, 0.5); }
#puzzle.ready .pz-desc, #puzzle.ok .pz-desc, #puzzle.fail .pz-desc { visibility: hidden; } /* (finished: the result banner speaks instead) */
/* The scan-in screen: the fingerprint dead centre of the display, the title above it and SCAN TO START below */
#puzzle.ready .pz-ready { position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; }
#puzzle.ready .pz-scan { position: absolute; left: 50%; top: 50%; margin: -54px 0 0 -54px; pointer-events: auto; }
#puzzle.ready .pz-splash { position: absolute; left: 0; right: 0; bottom: calc(50% + 54px + 28px); justify-content: center; }
#puzzle.ready .pz-scan-label { position: absolute; left: 0; right: 0; top: calc(50% + 54px + 20px); text-align: center; }
/* Intercept: the message as large as one line allows (--n characters), the network quieter */
.cx-msg { width: 100%; flex-wrap: nowrap; container-type: inline-size; gap: 0; }
.cx-msg .ch { min-width: 0; padding: 0 0.04em; font-size: min(56px, calc(100cqw / var(--n, 10) / 0.72)); }
.cx-msg .ch b { font-size: 1em; line-height: 1.05; }
.cx-msg .sp { width: 0.4em; }
.cx-net { opacity: 0.6; }
/* (the message and the rotors as one group, centred on the display: the task pads one side to put it there) */
.cx { gap: 32px; }

/* ---------- Close: the ✕ that closes a window, a task or the replay (Esc does the same) ---------- */
.lo-close { display: inline-flex; align-items: center; justify-content: center; padding: 2px; border: 0; border-radius: var(--radius-sm); background: none;
  font-size: 15px; color: var(--color-muted); cursor: pointer; }
.lo-close:hover, .lo-close:hover:not(:disabled) { color: var(--color-accent); background: none; }

/* ---------- Secondary button: a small, quiet action next to content (Show all, Open, Hijack, reopen cards) ----------
   The main action of a screen or window is the bracketed [ BUTTON ] (.tbtn). Colour from --c. */
button.mini { --c: var(--color-muted); width: auto; height: auto; display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-2);
  border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent);
  font: var(--weight-semibold) var(--text-sm)/1.2 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
button.mini:hover:not(:disabled) { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--color-text-strong); }
#tools .toolpop button.mini { align-self: flex-start; }
.mini.cards-btn { --c: var(--color-uses-2); margin-left: auto; }

/* ---------- Place names: where two would overlap, the less important one hides (declutter.js); hover still shows it ---------- */
.city.lbl-hide:not(.hov):not(.nb):not(:hover) span { visibility: hidden; }

/* ---------- Map popups: a callout pointing at the place, choices drawn as tickets ---------- */
#popup { position: fixed; z-index: 2500; width: 230px; padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--color-surface-1); border: 1px solid var(--color-line-strong); box-shadow: var(--shadow-pop); }
#popup::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: var(--color-surface-1); border-right: 1px solid var(--color-line-strong); border-bottom: 1px solid var(--color-line-strong); }
#popup.below::after { bottom: auto; top: -7px; border: 0; border-left: 1px solid var(--color-line-strong); border-top: 1px solid var(--color-line-strong); }
#popup h4 { margin: 0 0 2px; display: flex; align-items: center; gap: var(--space-1-5); font: var(--weight-bold) var(--text-lg)/1.2 var(--font-head); color: var(--color-text-strong); }
#popup .pop-sub { margin: 2px 0 var(--space-2); font: var(--text-md)/1.4 var(--font-sans); color: var(--color-muted); }
#popup .row { display: flex; flex-wrap: wrap; gap: var(--space-1); }
#popup .warn { margin: var(--space-2) 0 0; font-size: var(--text-md); }
.tix-choice { display: grid; gap: var(--space-1-5); }
.tix-choice .ticket { --stub: 34px; width: 100%; min-height: 34px; padding: 0; border: 0; color: inherit; text-align: left; transition: filter var(--dur-fast); }
.tix-choice .ticket:hover:not(:disabled), .tix-choice .ticket:focus-visible { box-shadow: none; filter: brightness(1.3); outline: none; }
.tix-choice .ticket .t-stub i { font-size: var(--text-md); color: var(--tc); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-fast), transform var(--dur-fast); }
.tix-choice .ticket:hover .t-stub i, .tix-choice .ticket:focus-visible .t-stub i { opacity: 1; transform: none; }

/* ====================================================================================================
   Lobby: one briefing board. A small wordmark instead of the big title; the setup as one strip (mode, map, odds,
   Start); the teams below, each player a group of full-width rows. The mode and map cards open in a picker window.
   ==================================================================================================== */
#menu:has(.v-lobby) { align-items: center; padding: var(--space-4) var(--space-6); }
/* (about 60% of the screen's height: the teams scroll inside when they're long) */
.menu-wrap:has(.v-lobby) { width: min(1240px, 100%); height: min(calc(100vh - 2 * var(--space-4)), max(600px, 62vh)); gap: var(--space-3); }
.menu-wrap:has(.v-lobby) .menu-head { text-align: left; }
.menu-wrap:has(.v-lobby) .menu-head .title { font-size: var(--text-xl); letter-spacing: var(--tracking-label); margin: 0; text-shadow: none; }
.menu-wrap:has(.v-lobby) .menu-head .title span { text-shadow: none; }
.menu-wrap:has(.v-lobby) .credits { display: none; }
/* (the lobby: the logo up in the screen's top-left corner, out of the panel's way) */
.menu-wrap:has(.v-lobby) .menu-head { position: fixed; top: 18px; left: 22px; z-index: 2; }
.menu-wrap:has(.v-lobby) > .term { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.menu-wrap:has(.v-lobby) #termBody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.v-lobby { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lobby { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); }

/* The operation: code and invite (and a note when friends can't reach it) */
.lb-op { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.lb-op .code-chips { gap: var(--space-1-5); }
.lb-op .code-chips span { width: 34px; height: 40px; font-size: var(--text-xl); border-radius: var(--radius-sm); }
.lb-op .foot { margin: 0; font-size: var(--text-md); }
/* Spectators: a row of their names between the settings and the teams */
.lb-specs { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-line);
  background: color-mix(in srgb, var(--color-text-strong) 2%, transparent); min-height: 36px; box-sizing: border-box; }
.lb-specs > .hud-label { display: inline-flex; align-items: center; gap: var(--space-1-5); white-space: nowrap; }
.lb-spec-list { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.lb-spec { padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-2, rgba(255,255,255,0.05)); color: var(--color-text-strong); font: var(--weight-semibold) var(--text-sm) var(--font-mono); }
.lb-spec small { color: var(--color-muted); font-weight: 400; }
.lb-spec.me { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.lb-specs .lb-none { color: var(--color-muted); font-size: var(--text-md); }

/* The setup strip */
.lb-strip { display: grid; grid-template-columns: 1fr 1fr 0.7fr 300px; gap: var(--space-3); align-items: stretch; margin: 0; }
.lobby .lb-cell { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 104px 1fr; grid-auto-rows: min-content; column-gap: var(--space-3); row-gap: var(--space-1);
  padding: var(--space-3); border-radius: var(--radius-md); cursor: pointer; background: color-mix(in srgb, var(--color-text-strong) 3%, var(--color-surface-1)); box-shadow: inset 0 0 0 1px var(--color-line); }
.lobby .lb-cell.ro { cursor: default; }
.lobby .lb-cell > * { grid-column: 2; }
.lobby .lb-cell > .lb-art { grid-column: 1; grid-row: 1 / span 3; height: 84px; border-radius: var(--radius-sm); position: relative; display: flex; align-items: center; justify-content: center; }
.lobby .lb-cell > .lb-art.thumbwrap svg { width: auto; height: 100%; max-width: 100%; }
.lobby .lb-cell .lb-ch { display: flex; align-items: center; gap: var(--space-2); min-height: 22px; }
/* (the forecast's label sits level with MODE and AREA, figures or not) */
.lb-odds > .hud-label { display: flex; align-items: center; min-height: 22px; }
.lobby .lb-cell .lb-chg { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1-5); font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.lobby .lb-cell > b { font: var(--weight-bold) var(--text-xl)/1.15 var(--font-head); letter-spacing: var(--tracking-label); color: var(--color-text-strong); text-transform: capitalize; }
.lobby .lb-cell > small { color: var(--color-muted); font-size: var(--text-md); line-height: 1.35; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); }
.lobby .lb-cell > small i { font-size: var(--text-md); color: var(--color-text); }
.lobby .lb-cell:hover, .lb-cell.hl { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface-1)); }
.lobby .lb-cell.hl .lb-chg, .lb-cell:hover .lb-chg { color: var(--color-accent); }
.lb-odds { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-line); }
.lb-odds b { font: var(--weight-bold) var(--text-3xl)/1 var(--font-mono); color: var(--color-text-strong); }
.lb-odds small { color: var(--color-muted); font-size: var(--text-md); }
.lb-odds small.warn { color: var(--color-wait); }
/* (the last column: the operation's code and invite above, Start below) */
.lb-go { display: grid; grid-template-rows: auto 1fr; gap: var(--space-2); }
.lb-invite { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-line); }
.lb-invite .code-chips { gap: var(--space-1); }
.lb-invite .code-chips span { width: 24px; height: 28px; font-size: var(--text-lg); border-radius: var(--radius-xs); }
.lb-invite .linkbtn { white-space: nowrap; }
.lb-strip .lb-start { padding: 0 var(--space-4); min-height: 0; white-space: nowrap; }
.lb-wait { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-5); font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted);
  border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-line); }

/* The teams: two neutral columns. Each player is a group of full-width rows on a panel: a head row, then a row per
   piece with its loadout. Rows are separated by thin lines, so the columns read as lists, not floating text */
.lb-teams { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.lb-side { display: flex; flex-direction: column; min-height: 0; }
.lb-side > header { display: flex; align-items: baseline; gap: var(--space-2); padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-line-strong); }
.lb-side > header .hud-label { font-size: var(--text-md); color: var(--color-text-strong); }
.lb-side > header b { margin-left: auto; font: var(--weight-semibold) var(--text-xl) var(--font-mono); color: var(--color-text-strong); }
.lb-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--color-line-strong) transparent; }
.lb-group { border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-1); box-shadow: inset 0 0 0 1px var(--color-line); flex: none; }
.lobby .lb-ph, .lobby .lb-piece { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-1-5) var(--space-3); }
.lobby .lb-ph { background: color-mix(in srgb, var(--color-text-strong) 4%, var(--color-surface-1)); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.lobby .lb-ph .dot, .lobby .lb-piece .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.lobby .lb-name { font-weight: var(--weight-semibold); color: var(--color-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby .lb-ph .counter, .lobby .lb-ph .lb-n, .lobby .lb-piece .counter, .lobby .lb-piece .lb-n { margin-left: auto; }
.lobby .lb-n { font: var(--weight-semibold) var(--text-md) var(--font-mono); color: var(--color-text); }
.lobby .lb-piece { border-top: 1px solid var(--color-line); }
.lobby .lb-piece .an { min-width: 104px; font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text); }
.lobby .lb-dice { display: flex; gap: var(--space-1); }
.lobby .lb-dice i { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: var(--text-md);
  color: var(--ac-hi, var(--color-text)); background: color-mix(in srgb, var(--ac, var(--color-muted)) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac, var(--color-muted)) 55%, transparent); }
.lobby .lb-dice i.off { opacity: 0.35; filter: grayscale(1); }
.lobby .lb-dice i.empty { --ac: var(--color-muted); background: none; box-shadow: inset 0 0 0 1px var(--color-line-strong); color: var(--color-muted); font-size: var(--text-sm); }
.lobby .lb-note { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-muted); font-size: var(--text-sm); }
.lobby .lb-dice + .lb-edit { margin-left: auto; }
.lobby .lb-piece > .lb-dice:last-child { margin-left: auto; }
.lobby .lb-edit { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-muted); font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; }
.lobby .lb-edit i { font-size: var(--text-md); }
.lobby button.lb-piece, .lobby button.lb-ph { cursor: pointer; }
.lobby button.lb-piece:hover, .lobby button.lb-piece.hl, .lobby button.lb-ph:hover, .lobby button.lb-ph.hl { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-1)); box-shadow: inset 2px 0 0 var(--color-accent); }
.lobby button.lb-piece.hl .lb-edit, .lobby button.lb-piece:hover .lb-edit { color: var(--color-accent); }
.lobby .lb-join { all: unset; box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; border-radius: var(--radius-md); cursor: pointer;
  border: 1px dashed var(--color-line-strong); font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); }
.lobby .lb-join:hover, .lobby .lb-join.hl { border-color: var(--color-accent); color: var(--color-accent); }
.lobby .lb-join.leave { margin-top: var(--space-2); }
.lb-teams.heist .lb-piece .an { min-width: 64px; color: var(--color-muted); }
.lb-teams .foot.warn { margin: var(--space-2) 0 0; }

/* The picker: the mode or map cards, in a window over the board */
#pickModal .term { width: min(1120px, 100%); }
#pickModal .tab-body { height: min(560px, 68vh); }
.opt.mapcard.mode-c.soon { opacity: 0.5; cursor: default; }
.opt.mapcard.mode-c.soon .mc-state { color: var(--color-wait); }
.opt.mapcard.mode-c .mp-meta small { font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.35; letter-spacing: 0; }
.lobby .opt b::before, .lobby .opt.hl b::before { content: none; }
.lobby .lb-ph .tag, .lobby .lb-piece .tag { margin-left: 0; }
.lobby .lb-name { font: var(--weight-semibold) var(--text-md) var(--font-sans); letter-spacing: 0; text-transform: none; }
.lb-side > header { min-height: 37px; }
/* Mode artwork: arrowheads and small labels (the Heist's swap, Manhunt's days) */
.mc-art .arrow { fill: none; stroke: rgba(232, 241, 248, 0.75); stroke-width: 1.4; stroke-linejoin: round; }
.mc-art .lbl { fill: rgba(159, 179, 200, 0.6); font: 600 7px var(--font-mono); text-anchor: middle; letter-spacing: 0.08em; }
.mc-art .det { fill: none; stroke: rgba(232, 241, 248, 0.55); stroke-width: 1.3; }
.mc-art .cardart .card { fill: rgba(232, 241, 248, 0.06); stroke: rgba(232, 241, 248, 0.7); stroke-width: 1.2; }
.mc-art .glyph { fill: none; stroke: rgba(232, 241, 248, 0.85); stroke-width: 1.3; stroke-linejoin: round; }
.mc-art .glyph circle { fill: rgba(232, 241, 248, 0.85); stroke: none; }
.mc-art .cardart .glyph rect { fill: none; stroke: rgba(232, 241, 248, 0.85); stroke-width: 1.3; }

/* ---------- The marker in the tool rail: its icon in the pen's colour; the colours in a vertical menu beside it
   (on hover, and for a moment after each D) with the D key at the bottom ---------- */
#tools .pen-wrap { position: relative; }
#tools .pen-tool > i { color: var(--pc); }
#tools .pen-menu { position: absolute; left: calc(100% + 8px); top: -6px; z-index: 5; display: none; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-1-5); border-radius: var(--radius-md); background: var(--color-surface-1); border: 1px solid var(--color-line-strong); box-shadow: var(--shadow-pop); }
#tools .pen-menu::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 10px; } /* (a bridge, so the hover holds on the way across) */
#tools .pen-wrap:hover .pen-menu, #tools .pen-wrap.show .pen-menu { display: flex; }
#tools .pen-menu .swatch-btn { width: 30px; height: 30px; padding: 0; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; }
#tools .pen-menu .swatch-btn.on { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
#tools .pen-menu .swatch { width: 16px; height: 16px; }
#tools .pen-menu kbd { margin-top: var(--space-1); }

/* Wildcards: the Target's re-roll, apart from the dealt cards (it's an action, not a third card) */
.reroll-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1-5); width: 150px; height: 176px; padding: var(--space-4) var(--space-2); border-radius: var(--radius-md);
  border: 1px dashed var(--color-line-strong); background: transparent; color: var(--color-text); }
.reroll-btn > i { font-size: var(--text-2xl); color: var(--color-muted); }
.reroll-btn b { font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.reroll-btn small { color: var(--color-muted); font-size: var(--text-sm); }
.reroll-btn:hover:not(:disabled) { border-color: var(--color-accent); box-shadow: none; }
.reroll-btn:hover:not(:disabled) > i { color: var(--color-accent); }
/* After a game: the corner button that brings the results back, small and plain */
#readyBtn.results { min-width: 0; padding: var(--space-2) var(--space-5); font-size: var(--text-md); animation: none; box-shadow: none; }
.toast > i:first-child { color: var(--color-accent); margin-right: var(--space-1); }

/* ===== Too small to play: a degraded-signal screen instead of a broken layout (below 1024 × 600) ===== */
#lowres { display: none; }
@media (max-width: 1023px), (max-height: 599px) {
  #lowres { display: flex; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; padding: var(--space-4); overflow: hidden;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, #0b1620 0, var(--color-bg) 70%); }
  body { overflow: hidden; }
}
#lowres .lr-noise { position: absolute; inset: -50%; pointer-events: none; opacity: 0.08; animation: lrNoise 0.5s steps(4) infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
#lowres::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; top: -20%; pointer-events: none; background: linear-gradient(transparent, rgba(var(--color-accent-rgb), 0.06), transparent); animation: lrRoll 4s linear infinite; }
#lowres .lr-box { position: relative; width: min(460px, 100%); padding: var(--space-5); border: 1px solid color-mix(in srgb, var(--color-danger) 45%, transparent); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface-1) 90%, transparent); font-family: var(--font-mono); text-align: center; }
#lowres .lr-head { display: flex; justify-content: space-between; margin-bottom: var(--space-4); font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-wide); color: var(--color-danger-soft); }
#lowres .lr-head span:first-child::before { content: "● "; animation: lrBlink 1s steps(2) infinite; }
#lowres .lr-title { position: relative; font: var(--weight-bold) var(--text-2xl) var(--font-head); letter-spacing: var(--tracking-label); color: var(--color-text-strong); animation: lrJitter 3s infinite; }
#lowres .lr-title::before, #lowres .lr-title::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
#lowres .lr-title::before { color: var(--color-danger); mix-blend-mode: screen; animation: lrSplitA 2.2s infinite steps(1); }
#lowres .lr-title::after { color: var(--color-accent); mix-blend-mode: screen; animation: lrSplitB 2.2s infinite steps(1); }
#lowres p { margin: var(--space-3) 0 var(--space-4); font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.45; color: var(--color-muted); }
#lowres .lr-meta { display: flex; justify-content: center; gap: var(--space-5); font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-label); color: var(--color-muted); }
#lowres .lr-meta b { color: var(--color-text-strong); font-weight: inherit; margin-left: var(--space-1); }
@keyframes lrNoise { 0% { transform: translate(0, 0); } 25% { transform: translate(-8%, 5%); } 50% { transform: translate(6%, -7%); } 75% { transform: translate(-4%, -3%); } }
@keyframes lrRoll { to { top: 110%; } }
@keyframes lrBlink { 50% { opacity: 0; } }
@keyframes lrJitter { 0%, 92%, 100% { transform: none; } 93% { transform: translate(-2px, 1px) skewX(-4deg); } 95% { transform: translate(3px, -1px); } 97% { transform: translate(-1px, 0) skewX(3deg); } }
@keyframes lrSplitA { 0%, 100% { transform: translate(-2px, 0); clip-path: inset(0 0 60% 0); } 30% { transform: translate(-4px, 1px); clip-path: inset(40% 0 20% 0); } 60% { transform: translate(-1px, 0); clip-path: inset(70% 0 0 0); } }
@keyframes lrSplitB { 0%, 100% { transform: translate(2px, 0); clip-path: inset(55% 0 0 0); } 30% { transform: translate(3px, -1px); clip-path: inset(0 0 65% 0); } 60% { transform: translate(1px, 0); clip-path: inset(20% 0 45% 0); } }
@media (prefers-reduced-motion: reduce) { #lowres *, #lowres::after, #lowres .lr-title::before, #lowres .lr-title::after { animation: none !important; } }

/* ---------- Lobby: the settings row, one full-width box under the setup strip (a bento with the boxes above):
   each setting a fixed-width cell, cells divided by thin lines ---------- */
.lb-settings { display: flex; align-items: stretch; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-line); background: color-mix(in srgb, var(--color-text-strong) 2%, transparent); }
.lobby .lb-set { all: unset; box-sizing: border-box; flex: 0 0 290px; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; gap: var(--space-3); padding: var(--space-1-5) var(--space-2) var(--space-1-5) var(--space-3); cursor: pointer; }
.lobby .lb-set + .lb-set { box-shadow: inset 1px 0 0 var(--color-line); }
.lobby .lb-set.ro { cursor: default; padding-right: var(--space-3); }
.lobby .lb-set b { font: var(--weight-semibold) var(--text-md) var(--font-mono); color: var(--color-text-strong); }
.lobby .lb-set .stepper > b { min-width: 6ch; font-size: var(--text-md); }
.lobby .lb-set:hover, .lobby .lb-set.hl { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.lobby .lb-set:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.lb-teams.heist { grid-template-columns: 1fr; }

/* The forecast: one figure per side, split by a line */
.lb-odds .lb-big { font: var(--weight-bold) var(--text-2xl)/1.1 var(--font-mono); color: var(--color-text-strong); }
.lb-split { display: flex; align-items: stretch; gap: var(--space-3); margin-top: var(--space-1); }
.lb-split > span { display: grid; gap: 2px; }
.lb-split > i { width: 1px; background: var(--color-line-strong); }
.lb-split b { font: var(--weight-bold) var(--text-2xl)/1 var(--font-mono); color: var(--color-text-strong); }
.lb-split small { font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }

/* Copy invite: the box answers itself, a sweep across it and "Link copied" */
.lb-invite { position: relative; overflow: hidden; }
.lb-invite .lb-inv-ok { display: none; color: var(--color-ok); }
.lb-invite.copied .lb-inv-l { display: none; }
.lb-invite.copied .lb-inv-ok { display: inline-flex; align-items: center; gap: var(--space-1); }
.lb-invite.copied { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ok) 60%, transparent); }
.lb-invite.copied .code-chips span { animation: invFlash 0.5s ease-out both; animation-delay: calc(var(--i, 0) * 60ms); }
.lb-invite.copied .code-chips span:nth-child(2) { --i: 1; } .lb-invite.copied .code-chips span:nth-child(3) { --i: 2; } .lb-invite.copied .code-chips span:nth-child(4) { --i: 3; }
.lb-invite::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-ok) 30%, transparent), transparent); }
.lb-invite.copied::after { animation: invSweep 0.6s ease-out; }
@keyframes invSweep { 0% { left: -40%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes invFlash { 0% { background: color-mix(in srgb, var(--color-ok) 45%, transparent); color: var(--color-bg); border-color: var(--color-ok); } 100% { } }

/* ---------- The turn timer in the banner: the time left, and a bar draining along the banner's bottom edge ---------- */
#banner .b-clock { display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: middle; font: var(--weight-semibold) var(--text-md) var(--font-mono); color: var(--color-text-strong); }
#banner .b-clock i { color: var(--color-muted); font-size: var(--text-lg); }
#banner .b-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-accent); transform-origin: 0 50%; transform: scaleX(var(--clock, 1)); transition: transform 0.2s linear; }
#banner { overflow: hidden; }
#banner.clock-low .b-clock, #banner.clock-low .b-clock i { color: var(--color-wait); }
#banner.clock-low .b-bar { background: var(--color-wait); }
#banner.clock-out .b-clock, #banner.clock-out .b-clock i { color: var(--color-danger); }
#banner.clock-out .b-bar { background: var(--color-danger); }
#banner.clock-out .b-clock b { animation: lrBlink 1s steps(2) infinite; }
/* The loadout picker: cards a fixed width, closer side by side than row to row */
.lo-picker .grid.lo-grid { grid-template-columns: repeat(auto-fill, 92px); justify-content: center; column-gap: var(--space-2); row-gap: var(--space-5); }

/* ---------- ID card (Identify yourself, Join an operation): fills the terminal, a scanner pad on the left ---------- */
.ident { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-6); align-items: stretch; padding: var(--space-5);
  border-radius: var(--radius-lg); border: 1px solid var(--color-line-strong); background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 7%, var(--color-surface-1)), var(--color-surface-1) 60%); }
.id-scan { position: relative; min-height: 190px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg)); }
.id-scan > i:first-child { font-size: 84px; color: color-mix(in srgb, var(--color-accent) 75%, transparent); }
.id-sweep { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent); animation: idSweep 2.4s ease-in-out infinite alternate; }
@keyframes idSweep { from { top: 8%; } to { top: 92%; } }
.id-body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); min-width: 0; }
.id-head { display: flex; justify-content: space-between; align-items: baseline; }
.id-no { font: var(--weight-semibold) var(--text-sm) var(--font-mono); letter-spacing: var(--tracking-wide); color: var(--color-muted); }
.ident h3 { margin: 0; font: var(--weight-bold) var(--text-3xl)/1.1 var(--font-head); color: var(--color-text-strong); }
.id-row { display: flex; gap: var(--space-3); align-items: stretch; }
.id-row .id-field { flex: 1; }
.id-row .tbtn, .ident .codebox .tbtn { flex: none; min-width: 0; padding: 0 var(--space-5); white-space: nowrap; }
.id-field { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--color-line-strong); background: var(--color-bg); }
.id-field:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.id-field .kp { color: var(--color-accent); font: var(--weight-semibold) var(--text-lg) var(--font-mono); }
.id-field input { --fbg: var(--color-bg); flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; padding: 0; font: var(--weight-semibold) var(--text-lg) var(--font-mono); letter-spacing: var(--tracking-label); color: var(--color-text-strong); caret-color: var(--color-accent); box-shadow: none; }
.id-field input::placeholder { color: var(--color-faint); }
.id-meta { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); }
.id-meta #nameCount, .id-meta .code-status { font-family: var(--font-mono); letter-spacing: var(--tracking-label); }
/* (Join: the code's four slots and Connect side by side, left-aligned in the card) */
.ident .codebox { flex-direction: row; align-items: stretch; justify-content: flex-start; gap: var(--space-3); margin: 0; }
.ident .cslot { width: 56px; height: 68px; }
.ident.denied .id-scan > i:first-child { color: var(--color-danger); }
.ident.verifying .id-scan > i:first-child { color: var(--color-wait); }

/* Busy: an action is under way (hosting, joining, starting): a small spinner at the right end of what was clicked */
.busy { position: relative; pointer-events: none; }
.busy::after { content: ""; position: absolute; right: var(--space-3); top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--color-accent) 25%, transparent); border-top-color: var(--color-accent); animation: spin 0.7s linear infinite; }
.busy .tag { visibility: hidden; } /* (a row's tag, e.g. RECOMMENDED, makes way for the spinner) */
.tbtn.busy { color: transparent; }
.tbtn.busy::after { right: auto; left: 50%; margin-left: -7px; }

/* ---------- Menu screens: the terminal window and the title morph from one screen to the next ---------- */
#menu .menu-wrap > .term { view-transition-name: pp-term; }
::view-transition-group(pp-term) { animation-duration: 0.38s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
/* (the window's frame morphs; what's inside only fades, at its own size: never stretched) */
::view-transition-old(pp-term), ::view-transition-new(pp-term) {
  width: 100%; height: 100%; object-fit: none; object-position: 50% 0; animation-duration: 0.3s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }
/* (to and from the lobby: the old screen fades out in place, the new one fades in rising a little) */
html.vt-out #menu .menu-wrap > .term, html.vt-in #menu .menu-wrap > .term { view-transition-name: none; }
html.vt-out #menu .menu-wrap { view-transition-name: pp-out; }
html.vt-in #menu .menu-wrap { view-transition-name: pp-in; }
::view-transition-old(pp-out) { animation: vtOut 0.2s ease-in both; }
::view-transition-new(pp-in) { animation: vtIn 0.36s 0.08s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
::view-transition-group(pp-out), ::view-transition-group(pp-in) { animation: none; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(16px); } }
/* A Target's placement for today, not played yet: the same marker, a little see-through and breathing */
.tok.pending, .tok-trace.pending, .tok-target.pending { opacity: 0.7; animation: pendingPulse 1.6s ease-in-out infinite; }
@keyframes pendingPulse { 50% { opacity: 0.4; } }
.lobby .lb-cell > small > span { flex-basis: 100%; }
.lobby .lb-cell .lb-tx { display: flex; gap: var(--space-1-5); margin-top: 2px; }
.lobby .linkbtn.hl { outline: 1px solid color-mix(in srgb, var(--color-accent) 60%, transparent); outline-offset: 3px; border-radius: var(--radius-xs); }
.ident .codebox .tbtn { flex: 1; }
/* (on the cyan bar of today's card the amber intel icon would not read: dark there) */
.dc.cur .dc-top .intel-ic { color: var(--color-bg); }
/* A tooltip listing several keys: one line each, the keys in a column, what they do beside them */
#floatTip .tip-rows { display: grid; gap: var(--space-1); margin-top: var(--space-1-5); }
#floatTip .tip-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-4); color: var(--color-muted); }
#floatTip .tip-row .tip-keys { justify-self: end; }
#floatTip .tip-row .tip-keys { margin: 0; }
#floatTip.tool { max-width: none; white-space: nowrap; }
#floatTip.tool:not(:has(.tip-rows)) { display: flex; align-items: center; gap: var(--space-2); }
#floatTip.tool:not(:has(.tip-rows)) .tip-keys { margin-left: var(--space-1); }

/* Intel feed: each photo a card that opens it in the viewer (icon: amber for an intel drop, cyan for footage) */
.shotcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
.shotcard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: var(--radius-md); cursor: pointer; --sc: var(--cyan);
  border: 1px solid var(--line2); background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-text-strong) 2%, transparent) 0 1px, transparent 1px 3px), var(--color-bg); }
.shotcard.intel { --sc: var(--amber); }
.shotcard i { font-size: 24px; color: var(--sc); }
.shotcard b { font: var(--weight-semibold) var(--text-sm) var(--mono); letter-spacing: var(--tracking-label); color: var(--color-text-strong); }
.shotcard:hover { border-color: var(--sc); }
/* Open stack: a Mapillary photo's credit, under the photo in the viewer: the logo, and a PHOTO CREDIT button that
   shows the credit line on the photo */
.tab-credit { display: flex; align-items: center; gap: 6px; margin: 10px 6px 0; height: 26px; font: 600 11px/1 var(--mono, monospace); }
.tab-credit .mly-logo { height: 26px; width: auto; display: block; border-radius: 4px; }
.cr-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: #cfd8e0; }
.cr-item > i { font-size: 13px; color: var(--cyan); cursor: help; }
.cr-item a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.cr-item a i { font-size: 11px; opacity: 0.7; }
.cr-item a:hover { text-decoration: underline; }
/* The photo viewer's readouts, in the tablet's top bar instead of on the photo */
/* Pull footage's task: the track puzzle as a camera cable */
.tr-wrap.cable .tr-end span { color: var(--cyan); }
/* Mapillary photos: framed a little wider and lifted, so a dashboard or handlebars along the bottom fall outside */
.cctv.mly img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 35%; }
/* Open stack: the map data's credit, small and dark in the corner */
#map .maplibregl-ctrl-attrib { background: rgba(5, 8, 13, 0.8); color: #6d8193; font: 10px/1.4 var(--mono, monospace); border-radius: 10px; }
#map .maplibregl-ctrl-attrib a { color: #8fa4b7; }
#map .maplibregl-ctrl-attrib-button { filter: invert(0.75); }

/* A location you can pick (a move, a Skyhook landing, a false trail, a triangulation corner...): a ring that keeps
   spreading well past the location's own dot, so it still shows when a marker (a lockdown, a trace) covers the dot */
.city.target > i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  border: 2px solid var(--tc, var(--amber)); opacity: 0; pointer-events: none; animation: beacon 1.8s ease-out infinite; }
.city.target.pick > i::after { animation-delay: 0.3s; }
@keyframes beacon { 0% { transform: scale(1); opacity: 0.9; } 70% { opacity: 0.25; } 100% { transform: scale(3.4); opacity: 0; } }

/* Area recon (field manual): the map on its own, the menu and the area's name floating top left */
#recon { position: fixed; inset: 0; background: var(--color-bg); }
#recon > #map { position: absolute; inset: 0; }
#reconTop { position: absolute; top: 10px; left: 10px; z-index: 1100; display: flex; gap: 10px; align-items: stretch; pointer-events: none; }
#reconTop > * { pointer-events: auto; }
#reconTop .menu, #reconTop .recon-title { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; background: var(--panel-solid); border: 1px solid var(--line2); border-radius: var(--radius-lg); }
#reconTop .menu .hud-label, #reconTop .recon-title .hud-label { margin: 0; }
#reconTop .recon-title { justify-content: center; min-width: 160px; }
#reconTop .recon-title b { font: 600 var(--text-lg, 16px) var(--font-display, inherit); color: var(--color-text-strong); }
#reconTop .recon-title small { color: var(--color-text-muted, #7c91a5); font-size: var(--text-xs, 11px); }
/* The area's edge (MapLibre): over the map, under the markers, never in the way of the pointer */
#map .edge-cv { position: absolute; left: 0; top: 0; pointer-events: none; }

/* Training: the pulsing ring on whatever the step is about, and the step counter in the banner */
#trainSpot, .tr-ring { pointer-events: none; border: 2px solid var(--amber, #ffb020); border-radius: 10px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber, #ffb020) 18%, transparent), 0 0 24px color-mix(in srgb, var(--amber, #ffb020) 45%, transparent);
  animation: trainPulse 1.6s ease-in-out infinite; }
#trainSpot { position: fixed; z-index: 1200; box-sizing: border-box; border-width: 3px; animation-name: trainPulseSoft;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber, #ffb020) 8%, transparent), 0 0 10px color-mix(in srgb, var(--amber, #ffb020) 22%, transparent); }
@keyframes trainPulseSoft { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber, #ffb020) 6%, transparent), 0 0 14px color-mix(in srgb, var(--amber, #ffb020) 30%, transparent); } }
.tr-ring { position: absolute; z-index: 30; border-radius: 50%; transform: translate(-50%, -50%); }
#trainSpot.hidden, .tr-ring.hidden, #trainArrow.hidden { display: none; }
/* (a blocked click: one wave fading out from the ring) */
#trainSpot.nudge::after, .tr-ring.nudge::after, #trainArrow.nudge::after { content: ""; position: absolute; inset: -2px; border-radius: inherit;
  border: 2px solid var(--amber, #ffb020); animation: trainWave .7s ease-out forwards; }
@keyframes trainWave { to { inset: -18px; opacity: 0; } }
@keyframes trainPulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--amber, #ffb020) 8%, transparent), 0 0 34px color-mix(in srgb, var(--amber, #ffb020) 55%, transparent); } }
/* The arrow at the map's edge, toward a point out of view (click: bring it into view) */
#trainArrow { position: fixed; z-index: 990; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; cursor: pointer; }
#trainArrow > i { position: absolute; inset: 0; background: var(--amber, #ffb020); clip-path: polygon(30% 15%, 90% 50%, 30% 85%, 42% 50%);
  transform: rotate(var(--a, 0rad)); filter: drop-shadow(0 0 6px var(--amber, #ffb020)); animation: trainPoint 1.2s ease-in-out infinite; }
@keyframes trainPoint { 50% { transform: rotate(var(--a, 0rad)) translateX(4px); } }
/* (the training banner keeps to one line) */
/* (training: one line wherever it fits, the step's text wrapping only on a narrow map, the key hint never) */
#banner:has(.tr-n) { max-width: min(1000px, calc(100% - 20px)); }
/* (training: the banner in the training colour, dark text on it, so it can't be missed) */
#banner:has(.tr-n) { background: var(--amber); color: #11161d; border-color: var(--amber); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 24px color-mix(in srgb, var(--amber) 35%, transparent); }
#banner:has(.tr-n) b, #banner:has(.tr-n) .tr-n { color: #0b0f14; }
#banner:has(.tr-n) .tr-n { opacity: 0.7; }
#banner:has(.tr-n) .sep { background: rgba(11, 15, 20, 0.3); }
#banner:has(.tr-n) .keyhint { color: #11161d; }
#banner .tr-n { font: 600 11px var(--mono, monospace); color: var(--amber, #ffb020); margin-right: 8px; }
#banner .tr-next { cursor: pointer; pointer-events: auto; }
/* The menu's credit line: small, bottom right of the screen */
.menu-wrap .credits { position: fixed; right: 16px; bottom: 12px; margin: 0; max-width: min(560px, 60vw); text-align: right; font-size: 10px; opacity: 0.55; z-index: 5; }
/* Into a game from the menus: the menu fades out, the game (drawn unseen meanwhile) fades in */
#menu.leaving .menu-wrap { animation: menuLeave 0.35s ease-in forwards; }
@keyframes menuLeave { to { opacity: 0; transform: scale(0.985); filter: blur(2px); } }
#game.prep { opacity: 0; pointer-events: none; }
#game.reveal { transition: opacity 0.55s ease-out; }
/* The loadout picker: full-size ability cards in two rows (the window widens to hold them) */
#loModal .grid.lo-grid { grid-template-columns: repeat(var(--cols, 5), var(--w, 118px)); justify-content: center; gap: 12px; }
#loModal .term { width: fit-content; max-width: min(1100px, 100%); }
/* Starting an operation: the start-up readout over the menu */
#opBoot { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-bg) 55%, transparent), color-mix(in srgb, var(--color-bg) 85%, transparent)); animation: opIn 0.3s ease-out both; }
#opBoot.out { animation: opOut 0.45s ease-in forwards; }
#opBoot .op-box { position: relative; overflow: hidden; box-shadow: 0 0 60px color-mix(in srgb, var(--color-accent) 16%, transparent); }
#opBoot .boot-log { min-height: 0; }
#opBoot .op-live { color: var(--cyan); font-weight: var(--weight-semibold); text-shadow: 0 0 12px rgba(45, 226, 230, 0.5); }
#opBoot .boot-bar { margin-bottom: 4px; }
#opBoot .op-scan { position: absolute; left: 0; right: 0; height: 40%; top: -40%; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent); animation: opScan 1.6s linear infinite; }
@keyframes opScan { to { top: 100%; } }
@keyframes opIn { from { opacity: 0; } }
@keyframes opOut { to { opacity: 0; transform: scale(1.02); filter: blur(3px); } }
/* Intel feed scrollbar: thin, in the panel's lines, cyan while held */
#feed .feed-body { scrollbar-width: thin; scrollbar-color: var(--color-line-strong) transparent; }
#feed .feed-body::-webkit-scrollbar { width: 6px; }
#feed .feed-body::-webkit-scrollbar-track { background: transparent; }
#feed .feed-body::-webkit-scrollbar-thumb { background: var(--color-line-strong); border-radius: 3px; }
#feed .feed-body::-webkit-scrollbar-thumb:hover, #feed .feed-body::-webkit-scrollbar-thumb:active { background: color-mix(in srgb, var(--cyan) 60%, transparent); }
/* Delete drawings by colour: one full-width row like the buttons under it, the label left, small swatches right.
   Under the pointer a swatch turns to a ring of its colour with a bin inside */
.confirm-box .clr-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--line2); border-radius: var(--radius-md); }
.confirm-box .clr-row .hud-label { color: #c3d0dc; }
.confirm-box .clr-sws { display: flex; gap: var(--space-2); }
.confirm-box .clr-sw { all: unset; box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--c); border: 2px solid var(--c); transition: background 0.12s; }
.confirm-box .clr-sw i { opacity: 0; color: #fff; font-size: 13px; transition: opacity 0.12s; }
.confirm-box .clr-sw:hover, .confirm-box .clr-sw:focus-visible { background: transparent; border-color: var(--c); box-shadow: none; }
.confirm-box .clr-sw:hover i, .confirm-box .clr-sw:focus-visible i { opacity: 1; }
.confirm-box .row [data-c="all"] { order: -1; }
/* The Ability guide over the game: the field manual's cards, in a window that fits them */
#guideModal { z-index: 4500; }
#guideModal .term { width: fit-content; max-width: min(1100px, 100%); }
#guideModal .grid.lo-grid { grid-template-columns: repeat(5, var(--w, 118px)); justify-content: center; gap: 12px; }
#guideModal .abchip { cursor: default; }
#guideModal:not(.fresh) .term { animation: none; }
/* An informant's or body double's card: the abilities area held at its usual size, empty */
.pcard.unit .pc-abl.hold { visibility: hidden; pointer-events: none; }
/* The agent card's band on a narrow card: the badge's slot gives way, so a longer label (DETECTIVE) isn't cut */
.lay-a .pc-id { container-type: inline-size; }
@container (max-width: 210px) {
  .lay-a .pc-band::after { display: none; }
  .lay-a .pc-band span { max-width: none; }
}
/* Training: a done step's confirmation, in the training colour */
.toast.train { background: var(--amber); color: #11161d; border-color: var(--amber); font-weight: var(--weight-semibold); }
.toast.train i { color: #11161d; }
/* The map takes focus when clicked: no browser focus ring round it (the game's keys don't depend on it) */
#map .maplibregl-canvas:focus, #map .maplibregl-canvas:focus-visible, #map:focus { outline: none; }
/* Training: a marker circle drawing itself where you're asked to draw (half see-through, the training colour) */
.tr-guide { position: absolute; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; z-index: 25; }
.tr-guide svg { width: 100%; height: 100%; overflow: visible; }
.tr-guide circle { fill: none; stroke: var(--amber, #ffb020); stroke-width: 5; stroke-linecap: round; opacity: 0.55; stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: trGuide 2.6s ease-in-out infinite; }
@keyframes trGuide { 0% { stroke-dashoffset: 100; opacity: 0.55; } 55% { stroke-dashoffset: 0; opacity: 0.55; } 80% { stroke-dashoffset: 0; opacity: 0.55; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* Training: what the step isn't about, dimmed a little and lined (cut out round the highlight and the banner) */
#trainDim { position: fixed; inset: 0; z-index: 1150; pointer-events: none; }
#trainDim svg { display: block; }
#trainDim.hidden { display: none; }
/* A ring that holds still (round your own marker, which can move): no pulse */
.tr-ring.still { animation: none; }
/* The arrow toward a point out of view: a little bounce its way when you click elsewhere */
#trainArrow.nudge::after { display: none; }
#trainArrow.bounce > i { animation: trainBounce 0.5s ease-out 2; }
@keyframes trainBounce { 0%, 100% { transform: rotate(var(--a, 0rad)) translateX(0); } 40% { transform: rotate(var(--a, 0rad)) translateX(10px); } }
/* Training banner: back and forward round the step counter, and a transport icon in the text */
#banner .tr-nav { display: inline-flex; align-items: center; gap: 2px; margin-right: 8px; vertical-align: middle; }
#banner .tr-nav .tr-n { margin-right: 0; }
#banner .tr-arr { all: unset; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; cursor: pointer; color: #11161d; pointer-events: auto; }
#banner .tr-arr:hover:not([disabled]) { background: rgba(11, 15, 20, 0.15); }
#banner .tr-arr[disabled] { opacity: 0.3; cursor: default; }
#banner .tr-arr i { margin: 0; font-size: 13px; }
#banner .tr-ic { vertical-align: -2px; }
.tr-guide path { fill: none; stroke: var(--amber, #ffb020); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: trGuide 2.6s ease-in-out infinite; }
/* The route filter menu: Show all as a row like the routes (its key on the right), a line above and below it,
   then a one-line hint */
#tools .toolpop .lp-sep { display: block; height: 1px; margin: 4px 0; background: var(--line2); }
#tools .toolpop .lp-all { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 2px; cursor: pointer; font-size: 13px; color: var(--color-text); }
#tools .toolpop .lp-all:hover { color: var(--color-text-strong); }
#tools .toolpop .lp-all .lp-ic { display: inline-grid; place-items: center; width: 16px; }
#tools .toolpop .lp-all .lp-ic i { margin: 0; color: var(--muted); font-size: 14px; }
#tools .toolpop .lp-all kbd { margin-left: auto; }
#tools .toolpop.layers .np { font-size: 11px; color: var(--muted); white-space: nowrap; padding: 2px 2px 0; }
/* The route filter menu opens on hover over its button (like the marker's colours), or stays open after a click */
#tools .toolpop.layers { display: none; }
#tools .lay-wrap { position: relative; }
/* (anchored to its button, opening upward: clear of the agent panel below) */
#tools .lay-wrap .toolpop.layers { top: auto; bottom: -6px; left: calc(100% + 8px); }
#tools .toolpop.layers.show, #tools .lay-wrap:hover .toolpop.layers { display: flex; }
#tools .toolpop.layers::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: 10px; } /* (a bridge, so the hover holds on the way across) */
/* Backtrack: the movement log's days to pick from, and what was found on a day */
.dc.pick { cursor: pointer; box-shadow: 0 0 0 1px var(--color-accent), 0 0 10px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.dc.pick:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.dc-bt { display: inline-flex; gap: 1px; margin-left: auto; color: var(--color-accent); font-size: 10px; }
.dc-bt i { margin: 0; }
.ev.backtrack .bt-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ev.backtrack .bt-chips span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font: var(--weight-semibold) 11px var(--font-mono); color: var(--color-text-strong); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.ev.backtrack { --ec: var(--color-accent); }