/* ROOTWAR — pvp.css (owner: PvP interactions — ui/cinematics.js, ui/playercard.js, ui/profiler.js, ui/intrusion.js).
   The Watch Dogs layer (DESIGN.md §6): player dossier, live operations tracker, breach intro, DedSec result stamps,
   post-resolution alerts, district capture, coins/numbers flights, the profiler callout and the live intrusion HUD
   (counter-trace / jam). Loaded after app.css and the view sheets. Colours ONLY via theme vars / DESIGN.md tokens.
   Z-scale: optrack 42 · .cine 46 · alert 47 · flights 48 · intrusion HUD 55 · profiler 60 (modals are above: 70+). */

/* ============================================================================================================
   Player dossier (ui/playercard.js, inside .modal-card)
   ============================================================================================================ */
.pc { display: grid; gap: 14px; }
.pc-head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
.pc-head .avatar { --size: 84px; }
.pc-head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 48px; height: 1px; background: var(--t1); }
.pc-id { display: grid; gap: 7px; min-width: 0; }
.pc-kicker { display: flex; gap: 10px; color: var(--t3); }
.pc-kicker .pc-code { color: var(--t2); }
.pc-name-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: 700 32px/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.pc-name-row .crew-tag { font-size: 18px; }
.pc-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--t2); font: var(--osd); letter-spacing: .08em; text-transform: uppercase; }
.pc-online { display: inline-flex; align-items: center; gap: 6px; }
.pc-online.on { color: var(--hot); }
.pc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-since { font-size: 12px; }
.pc-sub { margin: 4px 0 -4px; color: var(--t3); }
.duel-hist { display: grid; gap: 1px; list-style: none; background: var(--line); border: 1px solid var(--line); }
.duel-hist li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 0 12px;
  background: var(--s1);
  box-shadow: inset 2px 0 0 var(--line-2);
  font-size: 13px;
}
.dh-res { font: 700 14px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.duel-hist li.dh-win { box-shadow: inset 2px 0 0 var(--hot); }
.duel-hist li.dh-loss { box-shadow: inset 2px 0 0 var(--hostile); }
.dh-win .dh-res, .dh-win .dh-delta { color: var(--hot); }
.dh-loss .dh-res, .dh-loss .dh-delta { color: var(--hostile); }
.dh-draw .dh-res { color: var(--intel); }
.dh-opp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-delta { font: 700 16px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.dh-ts { color: var(--t3); font: var(--osd); letter-spacing: .06em; }

/* ============================================================================================================
   Live operations tracker (cinematics.js) — bottom right, above the console
   ============================================================================================================ */
.optrack {
  position: fixed;
  right: calc(var(--chat-w) + 16px);
  bottom: calc(var(--term-strip, 36px) + 14px);
  z-index: 42;
  display: grid;
  gap: 6px;
  width: 292px;
  pointer-events: none;
}
.optrack.term-open { bottom: calc(var(--term-h, 220px) + var(--term-strip, 36px) + 14px); }
.optrack.term-tall { bottom: calc(min(52vh, 520px) + 52px); }
.ot-card {
  --oc: var(--hot);
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 10px;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--oc);
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  box-shadow: var(--shadow);
  color: var(--t1);
  text-align: left;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  animation: ot-in var(--dur-3) var(--ease-out) both;
}
.ot-card::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--oc);
  transform-origin: left center;
  transform: scaleX(0);
  animation: ot-line var(--dur, 10s) linear var(--delay, 0s) forwards;
  opacity: .8;
}
@keyframes ot-line { to { transform: scaleX(1); } }
.ot-card:hover { border-color: var(--line-3); border-left-color: var(--oc); background: var(--s2); }
.ot-card[data-kind="player"] { --oc: var(--hostile); }
.ot-card[data-kind="relay"] { --oc: var(--intel); }
.ot-card[data-kind="zeroday"] { --oc: var(--hostile); }
@keyframes ot-in { from { opacity: 0; transform: translateX(32px); } }
.ot-card.out { animation: ot-out .36s var(--ease-in) forwards; }
@keyframes ot-out { to { opacity: 0; transform: translateX(32px); } }
.ot-ring { position: relative; display: grid; place-items: center; width: 38px; height: 38px; color: var(--oc); }
.ot-ring svg.ot-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ot-ring circle { fill: none; stroke-width: 2; }
.ot-track { stroke: var(--line-2); stroke-dasharray: 2.2 2; }
.ot-prog { stroke: var(--oc); stroke-dasharray: 107; stroke-dashoffset: 107; animation: ot-fill var(--dur, 10s) linear var(--delay, 0s) forwards; }
@keyframes ot-fill { to { stroke-dashoffset: 0; } }
.ot-ring .ico { width: 16px; height: 16px; }
.ot-main { display: grid; gap: 3px; min-width: 0; }
.ot-kind { color: var(--oc); font: var(--osd); letter-spacing: .1em; text-transform: uppercase; }
.ot-name { overflow: hidden; color: var(--t1); font: 700 17px/1.05 var(--font-display); letter-spacing: .02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ot-side { display: grid; justify-items: end; gap: 3px; }
.ot-time { color: var(--t1); font: 700 17px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ot-chance { color: var(--t3); font: var(--osd); letter-spacing: .06em; }
.ot-trace { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.ot-trace[hidden] { display: none; }
.ot-trace > .osd { color: var(--t3); }
.ot-pips { display: inline-flex; gap: 2px; }
.ot-pip { width: 12px; height: 5px; background: var(--line-2); }
.ot-pip.on { background: var(--hostile); }
.ot-trace-l { color: var(--t2); }
.ot-card.traced { animation: ot-in var(--dur-3) var(--ease-out) both, ot-traced 1.6s steps(1, end) infinite; }
@keyframes ot-traced { 50% { border-left-color: var(--t1); } }
.ot-card[data-state="ok"] { --oc: var(--hot); }
.ot-card[data-state="bad"] { --oc: var(--hostile); }
.ot-card[data-state="ok"] .ot-prog, .ot-card[data-state="bad"] .ot-prog { animation: none; stroke-dashoffset: 0; }
.ot-card[data-state="ok"]::before, .ot-card[data-state="bad"]::before { animation: none; transform: none; }
.ot-card[data-state="ok"], .ot-card[data-state="bad"] { animation: ot-flash .6s var(--ease-out); }
@keyframes ot-flash { 0% { background: color-mix(in srgb, var(--oc) 30%, var(--panel)); } 100% { background: color-mix(in srgb, var(--panel) 96%, var(--bg)); } }
.ot-result { color: var(--oc); font: 700 19px/1 var(--font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============================================================================================================
   Cinematics (cinematics.js): breach intro, DedSec result stamp, alert, district capture, flights
   ============================================================================================================ */
.cine { position: fixed; inset: 0; z-index: 46; pointer-events: none; overflow: hidden; }
.cine .avatar { --size: 88px; }

/* --- breach intro: attacker plate ◀ chance ▶ target plate --- */
.ci-veil {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, color-mix(in srgb, var(--bg) 30%, transparent) 3px 4px),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--bg) 45%, transparent), color-mix(in srgb, var(--bg) 88%, transparent));
  animation: ci-veil 2.2s var(--ease-out) both;
}
@keyframes ci-veil { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }
.ci-slash {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hostile) 20%, var(--t1) 50%, var(--hostile) 80%, transparent);
  animation: ci-slash 2.2s var(--ease-out) both;
}
.cine-intro.relay .ci-slash { background: linear-gradient(90deg, transparent, var(--intel) 20%, var(--t1) 50%, var(--intel) 80%, transparent); }
@keyframes ci-slash { 0% { transform: scaleX(0); opacity: 0; } 14% { transform: scaleX(1); opacity: 1; } 80% { opacity: .8; } 100% { opacity: 0; } }
.ci-side {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(420px, 38vw);
  padding: 16px 18px;
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  border: 1px solid var(--line-2);
}
.ci-me { right: calc(50% + 96px); border-left: 2px solid var(--hot); animation: ci-left 2.2s var(--ease-out) both; }
.ci-them { left: calc(50% + 96px); flex-direction: row-reverse; text-align: right; border-right: 2px solid var(--hostile); animation: ci-right 2.2s var(--ease-out) both; }
@keyframes ci-left { 0% { opacity: 0; transform: translate(-64px, -50%); } 16%, 80% { opacity: 1; transform: translate(0, -50%); } 100% { opacity: 0; transform: translate(-24px, -50%); } }
@keyframes ci-right { 0% { opacity: 0; transform: translate(64px, -50%); } 16%, 80% { opacity: 1; transform: translate(0, -50%); } 100% { opacity: 0; transform: translate(24px, -50%); } }
.ci-ring { position: relative; display: inline-grid; place-items: center; padding: 6px; }
.ci-ring::before, .ci-ring::after { content: ''; position: absolute; width: 14px; height: 14px; border: 0 solid var(--hot); }
.ci-ring::before { left: 0; top: 0; border-width: 2px 0 0 2px; }
.ci-ring::after { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.ci-ring.hostile::before, .ci-ring.hostile::after { border-color: var(--hostile); }
.ci-id { display: grid; gap: 5px; min-width: 0; }
.ci-them .ci-id { justify-items: end; }
.ci-label { color: var(--t3); font: var(--osd); letter-spacing: .12em; text-transform: uppercase; }
.ci-me .ci-label { color: var(--hot); }
.ci-them .ci-label { color: var(--hostile); }
.ci-name { max-width: 100%; overflow: hidden; color: var(--t1); font: 700 clamp(22px, 2.4vw, 32px)/1 var(--font-display); letter-spacing: .01em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ci-stat { color: var(--t2); font: var(--osd); letter-spacing: .08em; text-transform: uppercase; }
.ci-center {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 14px;
  text-align: center;
  background: var(--bg);
  animation: ci-center 2.2s var(--ease-out) both;
}
@keyframes ci-center { 0%, 10% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } 22%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.ci-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--hostile); font: var(--osd); letter-spacing: .16em; text-transform: uppercase; }
.ci-kicker::before { content: ''; width: 6px; height: 6px; background: currentColor; animation: pv-blink .8s steps(1, end) infinite; }
.cine-intro.relay .ci-kicker { color: var(--intel); }
.ci-chance { color: var(--t1); font: 700 72px/.9 var(--font-display); font-variant-numeric: tabular-nums; }
.ci-chance.good { color: var(--hot); }
.ci-chance.mid { color: var(--t1); }
.ci-chance.bad { color: var(--hostile); }
.ci-sub { color: var(--t2); font: var(--osd); letter-spacing: .1em; text-transform: uppercase; }

/* --- result: DedSec stamp --- */
.cine-result::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 42%, transparent); animation: cr-veil 2.8s ease both; }
@keyframes cr-veil { 0% { opacity: 0; } 8%, 84% { opacity: 1; } 100% { opacity: 0; } }
.cr-plate {
  --rc: var(--hot);
  --ri: var(--t-ink);
  position: absolute;
  left: 50%;
  top: 42%;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(620px, 92vw);
  text-align: center;
  animation: cr-in 2.8s var(--ease-out) both;
}
.cine-result.bad .cr-plate { --rc: var(--hostile); --ri: color-mix(in srgb, var(--bg) 94%, var(--danger)); }
.cine-result.relay.ok .cr-plate { --rc: var(--intel); --ri: color-mix(in srgb, var(--bg) 94%, var(--accent2)); }
@keyframes cr-in { 0% { opacity: 0; transform: translate(-50%, -50%); } 6% { opacity: 1; } 84% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -54%); } }
.cr-kicker { color: var(--t1); font: var(--osd); letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; background: var(--bg); }
.cr-title {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 10px 26px 6px;
  color: var(--ri);
  background: var(--rc);
  font: 700 clamp(42px, 7vw, 84px)/.95 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(-3deg) skewX(-10deg);
  clip-path: polygon(0 5%, 100% 0, 99.3% 95%, .7% 100%);
  animation: cr-slam .5s var(--ease-snap) both;
}
.cr-title::before, .cr-title::after { content: attr(data-text); position: absolute; inset: 10px 26px 6px; pointer-events: none; opacity: 0; }
.cr-title::before { color: var(--intel); animation: pv-split .4s steps(3, end) .12s; }
.cr-title::after { color: var(--t1); animation: pv-split .4s steps(3, end) .12s reverse; }
@keyframes cr-slam { 0% { opacity: 0; transform: rotate(-3deg) skewX(-10deg) scale(1.9); } 60% { opacity: 1; transform: rotate(-3deg) skewX(-10deg) scale(.97); } 100% { opacity: 1; transform: rotate(-3deg) skewX(-10deg); } }
.cine-result.bad .cr-title { animation: cr-deny .5s steps(3, end) both; }
@keyframes cr-deny { 0% { opacity: 0; transform: rotate(-3deg) skewX(-10deg) translateX(-12px); } 34% { opacity: 1; transform: rotate(-3deg) skewX(-20deg) translateX(10px); } 67% { transform: rotate(-3deg) skewX(-4deg) translateX(-4px); } 100% { opacity: 1; transform: rotate(-3deg) skewX(-10deg); } }
.cr-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; margin-top: 8px; background: var(--line-2); border: 1px solid var(--line-2); animation: pv-rise .4s var(--ease-out) .25s both; }
.cr-stat { display: grid; justify-items: center; gap: 4px; min-width: 110px; padding: 10px 16px; background: color-mix(in srgb, var(--panel) 96%, var(--bg)); }
.cr-stat b { color: var(--t1); font: 700 28px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.cr-stat.loot b { color: var(--rc); font-size: 38px; }
.cr-stat small { color: var(--t3); font: var(--osd); letter-spacing: .1em; text-transform: uppercase; }
.cr-tag { animation: pv-rise .4s var(--ease-out) .35s both; }

/* --- alert after resolution (breached / defended / traced) --- */
.cine-alert { z-index: 47; }
.ca-edge { position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--hostile), inset 0 0 160px 24px color-mix(in srgb, var(--danger) 32%, transparent); animation: ca-edge 1.1s ease-out 3 both; }
.cine-alert.defended .ca-edge { box-shadow: inset 0 0 0 2px var(--intel), inset 0 0 140px 16px color-mix(in srgb, var(--accent2) 22%, transparent); animation-iteration-count: 1; }
.cine-alert.traced .ca-edge { box-shadow: inset 0 0 0 2px var(--hot), inset 0 0 140px 16px var(--glow); }
@keyframes ca-edge { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: .25; } }
.ca-plate {
  --ac: var(--hostile);
  position: absolute;
  left: 50%;
  top: calc(var(--top-h) + 22px);
  display: grid;
  gap: 14px;
  width: min(480px, calc(100vw - 24px));
  padding: 16px 18px 18px;
  background: color-mix(in srgb, var(--panel) 97%, var(--bg));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 3px 0 var(--ac), var(--shadow-lg);
  transform: translateX(-50%);
  pointer-events: auto;
  animation: ca-in var(--dur-3) var(--ease-snap) both;
}
.cine-alert.defended .ca-plate { --ac: var(--intel); }
.cine-alert.traced .ca-plate { --ac: var(--hot); }
.cine-alert.out .ca-plate { animation: ca-out .3s var(--ease-in) forwards; }
.cine-alert.out .ca-edge { animation: none; opacity: 0; transition: opacity .3s; }
@keyframes ca-in { from { opacity: 0; transform: translate(-50%, -24px); } }
@keyframes ca-out { to { opacity: 0; transform: translate(-50%, -16px); } }
.ca-kicker { display: flex; align-items: center; gap: 8px; color: var(--ac); font: var(--osd); letter-spacing: .14em; text-transform: uppercase; }
.ca-kicker::before { content: ''; width: 7px; height: 7px; background: var(--ac); animation: pv-blink .7s steps(1, end) infinite; }
.ca-title { color: var(--t1); font: 700 clamp(30px, 4.4vw, 44px)/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.ca-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--s2); border-left: 2px solid var(--ac); }
.ca-who .avatar { --size: 48px; }
.ca-who-id { display: grid; gap: 4px; min-width: 0; }
.ca-who-id small { color: var(--t3); font: var(--osd); letter-spacing: .1em; text-transform: uppercase; }
.ca-who-id b { overflow: hidden; color: var(--t1); font: 700 22px/1.05 var(--font-display); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ca-unknown { display: grid; place-items: center; width: 48px; height: 48px; background: var(--s4); color: var(--t3); font: 700 26px var(--font-display); }
.ca-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.ca-loss { color: var(--ac); font: 700 40px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ca-note { color: var(--t2); font: var(--osd); letter-spacing: .08em; text-transform: uppercase; }
.ca-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- district capture: a crew-coloured tape across the screen --- */
.cc-band {
  position: absolute;
  left: -8vw;
  right: -8vw;
  top: 30%;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 16px 18px;
  color: color-mix(in srgb, var(--bg) 94%, var(--crew, var(--accent)));
  background: var(--crew, var(--accent));
  text-align: center;
  transform: rotate(-2.5deg);
  animation: cc-band 2.6s var(--ease-out) both;
}
.cine-capture.lost .cc-band { background: var(--hostile); color: color-mix(in srgb, var(--bg) 94%, var(--danger)); }
@keyframes cc-band { 0% { clip-path: inset(0 100% 0 0); } 16% { clip-path: inset(0 0 0 0); } 84% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
.cc-kicker { font: var(--osd); letter-spacing: .16em; text-transform: uppercase; }
.cc-title { font: 700 clamp(36px, 6vw, 68px)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; transform: skewX(-10deg); }
.cc-sub { font: 700 16px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }

/* --- coins & numbers flights --- */
.fly-coin {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 48;
  width: 14px;
  height: 14px;
  /* same hex token as the credits mark (ui/common.js money): lit face, mid band, shaded base */
  background: linear-gradient(160deg, color-mix(in srgb, var(--hot) 62%, var(--fg)) 0 34%, var(--hot) 34% 68%, color-mix(in srgb, var(--hot) 72%, var(--bg)) 68%);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  pointer-events: none;
  will-change: transform, opacity;
}
.fly-coin.bad { background: linear-gradient(160deg, color-mix(in srgb, var(--hostile) 62%, var(--fg)) 0 34%, var(--hostile) 34% 68%, color-mix(in srgb, var(--hostile) 72%, var(--bg)) 68%); }
.fly-num {
  position: fixed;
  z-index: 48;
  padding: 2px 6px;
  color: var(--t-ink);
  background: var(--hot);
  font: 700 18px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
  animation: fly-num 1.3s var(--ease-out) forwards;
}
.fly-num.bad { color: var(--t1); background: var(--hostile); }
@keyframes fly-num { from { opacity: 0; transform: translate(-50%, 0); } 15% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -44px); } }

/* ============================================================================================================
   Profiler callout (profiler.js) — Watch Dogs profiler: label left (OSD), value right
   ============================================================================================================ */
.profiler-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.profiler {
  position: fixed;
  left: 0;
  top: 0;
  display: grid;
  width: 344px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  background: color-mix(in srgb, var(--panel) 98%, var(--bg));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 3px 0 var(--hot), var(--shadow-lg);
  pointer-events: auto;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity var(--dur-1), clip-path var(--dur-2) var(--ease-out);
}
.profiler.compact { width: 280px; box-shadow: inset 0 2px 0 var(--intel), var(--shadow); }
.profiler-layer.in .profiler { opacity: 1; clip-path: inset(0 0 0 0); }
.profiler-layer.out .profiler { opacity: 0; transition: opacity 120ms var(--ease-in); }
.profiler:focus { outline: none; }
.pf-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.profiler.compact .pf-head { padding: 12px 12px 10px; }
.pf-av { position: relative; line-height: 0; padding: 4px; }
.pf-av::before, .pf-av::after { content: ''; position: absolute; width: 10px; height: 10px; border: 0 solid var(--hot); }
.pf-av::before { left: 0; top: 0; border-width: 2px 0 0 2px; }
.pf-av::after { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.pf-av .dot { position: absolute; right: 1px; top: 1px; }
.pf-id { display: grid; gap: 4px; min-width: 0; }
.pf-kicker { display: flex; justify-content: space-between; gap: 8px; color: var(--intel); }
.pf-code { color: var(--t3); }
.pf-name {
  overflow: hidden;
  color: var(--t1);
  font: 700 26px/1 var(--font-display);
  letter-spacing: .01em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.profiler.compact .pf-name { font-size: 21px; }
.pf-crew { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-height: 0; color: var(--t3); font-size: 12px; }
.pf-crew:empty { display: none; }
.pf-crew .ptitle { display: inline; }
.pf-fields { display: grid; padding: 6px 16px 4px; }
.profiler.compact .pf-fields { padding: 4px 12px 2px; }
.pf-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 30px;
  border-bottom: 1px solid var(--line);
}
.pf-row:last-child { border-bottom: 0; }
.pf-label { color: var(--t3); }
.pf-val { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--t1); font-size: 13px; }
.pf-val.num { font: 700 17px/1 var(--font-display); }
.pf-val.good { color: var(--hot); }
.pf-val.mid { color: var(--intel); }
.pf-val.bad, .pf-val.warn { color: var(--hostile); }
.pf-val.intel { color: var(--intel); }
.pf-val.dim { color: var(--t3); }
.pf-val.ok { color: var(--t1); }
.pf-line { display: inline-flex; align-items: center; gap: 8px; }
.pf-line .tier-badge { height: 18px; }
.pf-chance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 4px;
  padding: 10px 12px;
  background: var(--s2);
  border-left: 2px solid var(--pc, var(--t2));
}
.pf-chance.good { --pc: var(--hot); }
.pf-chance.mid { --pc: var(--intel); }
.pf-chance.bad { --pc: var(--hostile); }
.pf-chance-v { color: var(--pc, var(--t1)); font: 700 40px/.9 var(--font-display); font-variant-numeric: tabular-nums; }
.pf-intel { align-items: start; padding: 8px 0; }
.pf-intel-lines { display: grid; gap: 4px; }
.pf-intel-line { color: var(--t2); font-size: 12.5px; line-height: 1.35; }
.pf-intel-line::before { content: '› '; color: var(--intel); }
.pf-skel { display: inline-block; width: 64px; height: 10px; background: linear-gradient(90deg, var(--s3), var(--s4), var(--s3)); background-size: 200% 100%; animation: pv-skel 1.1s linear infinite; }
.pf-actions { display: grid; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.profiler.compact .pf-actions { padding: 8px 12px 10px; }
.pf-actions .btn.block { width: 100%; }
.pf-actions .btn.hold { min-height: 44px; font-size: 15px; }
.pf-actions .btn.hold.blocked { opacity: .45; }
.pf-act-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.pf-reason { color: var(--hostile); text-align: center; }
.pf-hint { color: var(--t3); text-align: center; }
/* mobile: bottom sheet */
.profiler-layer.sheet { background: color-mix(in srgb, var(--bg) 60%, transparent); pointer-events: auto; opacity: 0; transition: opacity var(--dur-2); }
.profiler-layer.sheet.in { opacity: 1; }
.profiler-layer.sheet .profiler {
  left: 0 !important;
  right: 0;
  top: auto !important;
  bottom: 0;
  width: 100%;
  max-width: none;
  max-height: 86dvh;
  padding-bottom: var(--safe-b);
  clip-path: none;
  transform: translateY(100%);
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-1);
}
.profiler-layer.sheet.in .profiler { transform: none; }
.profiler-layer.sheet.out .profiler { transform: translateY(100%); }

/* ============================================================================================================
   Live intrusion HUD (intrusion.js) — defender counter-trace, attacker jam
   ============================================================================================================ */
.intr-hud { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.intr-edge { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-3); box-shadow: inset 0 0 0 2px var(--hostile), inset 0 0 120px 10px color-mix(in srgb, var(--danger) 22%, transparent); }
.intr-edge.on { opacity: 1; animation: intr-edge 1.8s ease-in-out infinite; }
@keyframes intr-edge { 50% { box-shadow: inset 0 0 0 2px var(--hostile), inset 0 0 60px 0 color-mix(in srgb, var(--danger) 12%, transparent); } }
.intr-stack {
  position: absolute;
  left: 50%;
  top: calc(var(--top-h) + 12px);
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(468px, calc(100vw - 24px));
  transform: translateX(-50%);
}
.intr-panel {
  --ic: var(--hostile);
  position: relative;
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 14px 16px 16px;
  background: color-mix(in srgb, var(--panel) 98%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--ic) 45%, var(--line-2));
  box-shadow: inset 0 3px 0 var(--ic), var(--shadow-lg);
  pointer-events: auto;
  animation: intr-in var(--dur-3) var(--ease-snap) both;
}
.intr-panel.attacker { --ic: var(--hot); width: min(380px, 100%); justify-self: end; }
@keyframes intr-in { from { opacity: 0; transform: translateY(-18px); } }
.intr-panel.out { animation: intr-out .22s var(--ease-in) forwards; }
@keyframes intr-out { to { opacity: 0; transform: translateY(-12px); } }
.intr-panel.shake { animation: intr-shake .36s linear; }
@keyframes intr-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.intr-panel.score { animation: intr-score .5s var(--ease-out); }
@keyframes intr-score { 0% { background: color-mix(in srgb, var(--ic) 22%, var(--panel)); } 100% { background: color-mix(in srgb, var(--panel) 98%, var(--bg)); } }
.intr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.intr-kick { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.intr-dot { flex: none; width: 10px; height: 10px; margin-top: 6px; background: var(--ic); animation: pv-blink .7s steps(1, end) infinite; }
.intr-title { display: block; color: var(--t1); font: 700 26px/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.intr-panel.defender .intr-title { color: var(--hostile); }
.intr-sub { display: block; margin-top: 4px; color: var(--t2); }
.intr-min { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line-2); background: transparent; color: var(--t2); }
.intr-min:hover { border-color: var(--t2); color: var(--t1); }
.intr-min .ico { width: 14px; height: 14px; }
.intr-breach, .intr-trace { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.intr-breach .osd, .intr-trace > .osd { color: var(--t3); }
.intr-bar { height: 4px; }
.intr-bar > i { background: var(--hostile) !important; }
.intr-time { color: var(--t1); font: 700 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.intr-pips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.intr-pip { height: 10px; background: var(--line-2); transition: background var(--dur-2); }
.intr-pip.on { background: var(--hot); animation: intr-pip .45s var(--ease-snap); }
.intr-panel.attacker .intr-pip.on { background: var(--hostile); }
@keyframes intr-pip { 0% { transform: scaleY(2.2); filter: brightness(1.8); } 100% { transform: none; filter: none; } }
.intr-trace-n { color: var(--t1); font: 700 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.intr-reveal:empty { display: none; }
.intr-hint { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--a2-soft); border-left: 2px solid var(--intel); color: var(--intel); font: 600 13px/1.3 var(--font-ui); animation: pv-rise .3s var(--ease-out) both; }
.intr-hint .ico { width: 16px; height: 16px; }
.intr-att { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; background: var(--d-soft); border-left: 2px solid var(--hostile); animation: pv-rise .3s var(--ease-out) both; }
.intr-att .avatar { --size: 40px; }
.intr-att-id { display: grid; gap: 3px; min-width: 0; }
.intr-att-id .osd { color: var(--hostile); }
.intr-att-name { overflow: hidden; color: var(--t1); font: 700 20px/1 var(--font-display); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.intr-att-loc { color: var(--t2); }
.intr-puz-host:empty { display: none; }
.intr-puz { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.intr-q { color: var(--t2); }
.intr-code {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  padding: 12px 10px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--t1);
  font: 700 32px/1 var(--font-mono);
  letter-spacing: .18em;
  text-align: center;
  user-select: none;
}
.intr-seq-n + .intr-seq-n::before, .intr-seq-n + .intr-seq-q::before { content: ''; }
.intr-seq-n { letter-spacing: 0; }
.intr-seq-q { color: var(--hot); letter-spacing: 0; animation: pv-blink 1s steps(1, end) infinite; }
.intr-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.intr-in {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-in);
  background: var(--s3);
  color: var(--t1);
  font: 700 20px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.intr-in:focus { outline: none; border-color: var(--ic); box-shadow: inset 0 -2px 0 var(--ic); }
.intr-in:disabled { opacity: .45; }
.intr-go { min-height: 44px; }
.intr-lock { color: var(--hostile); font: var(--osd); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.intr-panel.locked .intr-code { opacity: .4; }
/* minimised chip */
.intr-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  background: var(--hostile);
  color: color-mix(in srgb, var(--bg) 94%, var(--danger));
  font: 700 14px/1 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: auto;
  animation: intr-in var(--dur-2) var(--ease-out) both;
}
.intr-chip[hidden] { display: none; }
.intr-chip-dot { width: 7px; height: 7px; background: currentColor; animation: pv-blink .7s steps(1, end) infinite; }
.intr-chip-n { font-variant-numeric: tabular-nums; }
/* end stamps */
.intr-stamp { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 40%, transparent); opacity: 0; transition: opacity .25s; }
.intr-stamp.in { opacity: 1; }
.intr-stamp.out { opacity: 0; }
.intr-stamp-in {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 34px 10px;
  color: var(--t-ink);
  background: var(--hot);
  transform: rotate(-4deg) skewX(-10deg);
  clip-path: polygon(0 5%, 100% 0, 99.3% 95%, .7% 100%);
}
.intr-stamp.in .intr-stamp-in { animation: cr-slam .5s var(--ease-snap) both; }
.intr-stamp.cut .intr-stamp-in { color: color-mix(in srgb, var(--bg) 94%, var(--danger)); background: var(--hostile); }
.intr-stamp.cut.in .intr-stamp-in { animation: cr-deny .5s steps(3, end) both; }
.intr-stamp-t { font: 700 clamp(40px, 7vw, 86px)/.95 var(--font-display); text-transform: uppercase; }
.intr-stamp-s { font: var(--osd); letter-spacing: .14em; text-transform: uppercase; }

/* ============================================================================================================
   Incoming-raid HUD (intrusion.js createIncomingHud) — stacked red top-edge alerts (DESIGN.md §9 v3)
   ============================================================================================================ */
.raidhud-stack {
  position: fixed;
  right: 16px;
  top: calc(var(--top-h) + 12px);
  z-index: 50;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 24px));
  pointer-events: none;
}
.raidhud-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--hostile) 45%, var(--line-2));
  border-left: 3px solid var(--hostile);
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  box-shadow: inset 0 0 42px 0 color-mix(in srgb, var(--danger) 14%, transparent), var(--shadow);
  color: var(--t1);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.raidhud-alert.in { opacity: 1; transform: none; }
.raidhud-alert.out { opacity: 0; transform: translateX(24px); }
.raidhud-alert:hover { border-color: var(--hostile); background: var(--s2); }
.raidhud-alert:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.raidhud-alert.imminent { animation: raidhud-pulse 1.1s ease-in-out infinite; }
@keyframes raidhud-pulse { 50% { box-shadow: inset 0 0 60px 0 color-mix(in srgb, var(--danger) 26%, transparent), var(--shadow); } }
.raidhud-siren { display: grid; place-items: center; width: 30px; height: 30px; color: var(--hostile); }
.raidhud-siren .ico { width: 20px; height: 20px; animation: pv-blink 1s steps(1, end) infinite; }
.raidhud-body { display: grid; gap: 3px; min-width: 0; }
.raidhud-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.raidhud-kick { color: var(--hostile); }
.raidhud-name {
  overflow: hidden;
  color: var(--t1);
  font: 700 17px/1 var(--font-display);
  letter-spacing: .01em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.raidhud-name:hover { color: var(--hostile); }
.raidhud-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--t3); }
.raidhud-size { color: var(--t2); }
.raidhud-eta { color: var(--hostile); font: 700 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }

/* --- defense report stamp (cinematics.js raidStamp): REPOUSSÉ / PILLÉ --- */
.raid-stamp { z-index: 47; }
.raid-stamp .rs-plate {
  --rc: var(--hot);
  --ri: var(--t-ink);
  position: absolute;
  left: 50%;
  top: 38%;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(560px, 92vw);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: cr-in 2.6s var(--ease-out) both;
}
.raid-stamp.bad .rs-plate { --rc: var(--hostile); --ri: color-mix(in srgb, var(--bg) 94%, var(--danger)); }
.rs-kicker { color: var(--t1); font: var(--osd); letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; background: var(--bg); }
.rs-title {
  display: inline-block;
  max-width: 100%;
  padding: 10px 26px 6px;
  color: var(--ri);
  background: var(--rc);
  font: 700 clamp(40px, 7vw, 78px)/.95 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(-3deg) skewX(-10deg);
  clip-path: polygon(0 5%, 100% 0, 99.3% 95%, .7% 100%);
  animation: cr-slam .5s var(--ease-snap) both;
}
.raid-stamp.bad .rs-title { animation: cr-deny .5s steps(3, end) both; }

/* ---- shared keyframes ---------------------------------------------------------------------------------- */
@keyframes pv-blink { 50% { opacity: 0; } }
@keyframes pv-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes pv-skel { to { background-position: -200% 0; } }
@keyframes pv-split {
  0% { opacity: .9; transform: translate(-5px, 0); clip-path: inset(0 0 55% 0); }
  50% { opacity: .9; transform: translate(4px, 0); clip-path: inset(45% 0 5% 0); }
  100% { opacity: 0; transform: none; }
}

/* ---- tablet --------------------------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .optrack { right: 16px; }
}

/* ---- mobile (incoming-raid HUD becomes a bottom sheet) ------------------------------------------------- */
@media (max-width: 767px) {
  .raidhud-stack { right: 8px; left: 8px; top: auto; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); width: auto; }
  .raidhud-alert.sheet { transform: translateY(24px); }
  .raidhud-alert.sheet.in { transform: none; }
  .raidhud-alert.sheet.out { transform: translateY(24px); }
  .rs-title { padding: 8px 16px 4px; }
}

/* ---- mobile --------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .pc-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pc-head::after { left: 50%; margin-left: -24px; }
  .pc-kicker, .pc-name-row, .pc-meta, .pc-tags { justify-content: center; }
  .pc-name-row { font-size: 28px; }
  .duel-hist li { grid-template-columns: 62px minmax(0, 1fr) auto; }
  .dh-ts { display: none; }
  .optrack, .optrack.term-open, .optrack.term-tall { left: 10px; right: 10px; width: auto; bottom: calc(var(--tab-h) + var(--safe-b) + 10px); }
  .optrack .ot-card:nth-child(n+3) { display: none; }
  .ci-side { width: calc(100vw - 32px); right: auto; left: 16px; }
  .ci-me { top: 24%; right: auto; }
  .ci-them { top: 76%; left: 16px; }
  .ci-chance { font-size: 56px; }
  .cine .avatar { --size: 56px; }
  .cr-title { padding: 8px 16px 4px; }
  .cr-stat { min-width: 90px; padding: 8px 10px; }
  .intr-stack { top: auto; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); left: 8px; right: 8px; width: auto; transform: none; }
  .intr-panel.sheet { animation-name: intr-sheet; }
  @keyframes intr-sheet { from { opacity: 0; transform: translateY(40px); } }
  .intr-panel.attacker { width: 100%; }
  .intr-breach, .intr-trace { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .intr-code { font-size: 26px; }
}

/* ---- reduced motion ------------------------------------------------------------------------------------ */
html.rm .ot-card, html.rm .ot-card.traced, html.rm .ot-card[data-state], html.rm .ci-kicker::before, html.rm .cr-title,
html.rm .cr-title::before, html.rm .cr-title::after, html.rm .cr-stats, html.rm .cr-tag, html.rm .ca-edge,
html.rm .ca-kicker::before, html.rm .intr-edge.on, html.rm .intr-dot, html.rm .intr-chip-dot, html.rm .intr-pip.on,
html.rm .intr-panel, html.rm .intr-seq-q, html.rm .intr-hint, html.rm .intr-att, html.rm .intr-stamp-in, html.rm .pf-skel,
html.rm .raidhud-alert, html.rm .raidhud-alert.imminent, html.rm .raidhud-siren .ico, html.rm .rs-title, html.rm .rs-plate,
html.rm .ci-slash { animation: none !important; }
html.rm .raidhud-alert { transition: opacity 120ms; transform: none; }
html.rm .raid-stamp .rs-plate { transform: translate(-50%, -50%); }
html.rm .cr-title::before, html.rm .cr-title::after { display: none; }
html.rm .ci-veil, html.rm .ci-center, html.rm .cc-band, html.rm .cine-result::before { animation-name: fade-still !important; }
html.rm .ci-side { animation: fade-still 2.2s ease both !important; transform: translateY(-50%); }
html.rm .cr-plate { animation: fade-still 2.8s ease both !important; transform: translate(-50%, -50%); }
html.rm .ci-center { transform: translate(-50%, -50%); }
html.rm .profiler { clip-path: none; transition: opacity 120ms; }
html.rm .profiler-layer.sheet .profiler { transform: none; transition: opacity 120ms; }
@media (prefers-reduced-motion: reduce) {
  .ot-card, .ot-card.traced, .ci-kicker::before, .cr-title, .cr-title::before, .cr-title::after, .ca-kicker::before,
  .intr-edge.on, .intr-dot, .intr-chip-dot, .intr-pip.on, .intr-panel, .intr-seq-q, .intr-stamp-in, .pf-skel,
  .raidhud-alert, .raidhud-alert.imminent, .raidhud-siren .ico, .rs-title { animation: none !important; }
  .raidhud-alert { transition: opacity 120ms; transform: none; }
  .profiler { clip-path: none; transition: opacity 120ms; }
}

/* ==========================================================================================================
   BREACH (ui/breach.js) — the hacking minigame played on every hack (SPEC §3.2b, DESIGN.md §6.2b).
   A code matrix + three daemons + a buffer. Hot = the line you can pick on / your picks, intel = daemons & data,
   hostile = the trace running out. Only live things glow (the EXECUTE button once ACCESS is in, the trace dot).
   ========================================================================================================== */
.breach-layer { position: fixed; inset: 0; z-index: 52; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.br {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(780px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 16px 18px 14px;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--intel);
  background: var(--s1);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 100vmax color-mix(in srgb, var(--bg) 38%, transparent);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.br.in { opacity: 1; transform: none; }
.br.out { opacity: 0; transform: translateY(6px); transition-duration: 140ms; transition-timing-function: var(--ease-in); }
.br[data-state="live"], .br[data-state="exec"] { border-top-color: var(--hot); }
.br.low { border-top-color: var(--hostile); }

/* head */
.br-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.br-id { display: grid; gap: 4px; min-width: 0; }
.br-kick { display: flex; align-items: center; gap: 7px; color: var(--intel); letter-spacing: .14em; }
.br[data-state="live"] .br-kick, .br[data-state="exec"] .br-kick { color: var(--hot); }
.br-dot { width: 7px; height: 7px; background: currentColor; }
.br[data-state="live"] .br-dot { animation: pv-blink .8s steps(1, end) infinite; }
.br-title { margin: 0; overflow: hidden; color: var(--t1); font: 700 28px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.br-sub { color: var(--t3); letter-spacing: .08em; }
.br-x:disabled { opacity: .25; }

/* timer: auto-resolution countdown while planning, the trace once committed */
.br-timer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.br-time-k { color: var(--t3); letter-spacing: .12em; }
.br-bar { height: 6px; overflow: hidden; background: color-mix(in srgb, var(--fg) 9%, transparent); }
.br-bar i { display: block; height: 100%; background: var(--intel); transform-origin: left center; transition: transform .1s linear; }
.br[data-state="live"] .br-bar i, .br[data-state="exec"] .br-bar i { background: var(--hot); }
.br.low .br-bar i { background: var(--hostile); }
.br-time { min-width: 3.4em; color: var(--t1); font: 700 24px/1 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.br.low .br-time { color: var(--hostile); }

/* body */
.br-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 20px; }
.br-left { display: grid; gap: 8px; }
.br-rule { margin: 0; color: var(--t3); letter-spacing: .06em; }
.br-matrix { --br-cell: 52px; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); background: var(--bg); }
.br-row { display: grid; grid-template-columns: repeat(var(--n), var(--br-cell)); gap: 4px; }
.br-cell {
  position: relative;
  width: var(--br-cell);
  height: var(--br-cell);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--t3);
  font: 600 17px/1 var(--font-mono);
  letter-spacing: .04em;
  transition: color var(--dur-1), background-color var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-1);
}
.br-cell:disabled { cursor: default; }
.br-cell.line { background: color-mix(in srgb, var(--hot) 8%, transparent); color: var(--t2); }
.br-cell.pick { color: var(--t1); cursor: pointer; }
.br-cell.pick:hover, .br-cell.hov { border-color: var(--hot); background: var(--a-soft); color: var(--hot); }
/* where the next pick would have to go if you took the hovered cell */
.br-cell.next:not(.line) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--intel) 50%, transparent); color: var(--t2); }
.br-cell.used { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--fg) 5%, transparent) 0 2px, transparent 2px 6px); color: var(--t3); }
.br-cell.used::after { content: attr(data-order); position: absolute; top: 3px; right: 4px; color: var(--hot); font: 600 9px/1 var(--font-mono); }
.br-cell:focus-visible { outline: 2px solid var(--hot); outline-offset: 1px; }
.br-cell.flash { animation: br-flash .35s var(--ease-out); }
@keyframes br-flash { 0% { background: var(--hot); color: var(--t-ink); } }
.br-cell.deny { animation: hold-nudge .3s; }

/* side: daemons, buffer, odds */
.br-side { display: grid; align-content: start; gap: 8px; min-width: 0; }
.br-k { color: var(--t3); letter-spacing: .12em; }
.br-daemons { display: grid; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.br-d { --dc: var(--hot); position: relative; display: grid; gap: 7px; padding: 8px 10px; border: 1px solid var(--line-2); border-left: 3px solid var(--line-3); background: var(--s2); transition: border-color var(--dur-2), background-color var(--dur-2), opacity var(--dur-2); }
.br-d[data-id="exfil"] { --dc: var(--intel); }
.br-d[data-id="ghost"] { --dc: color-mix(in srgb, var(--fg) 82%, var(--bg)); }
.br-d-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.br-d-name { color: var(--t1); font: 700 14px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.br-d-fx { color: var(--t3); }
.br-seq { display: flex; flex-wrap: wrap; gap: 4px; }
.br-b { display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 4px; border: 1px solid var(--line-2); color: var(--t2); font: 600 13px/1 var(--font-mono); }
.br-b.hit { border-color: var(--dc); background: color-mix(in srgb, var(--dc) 22%, transparent); color: var(--t1); }
.br-b.pv { border-style: dashed; border-color: var(--dc); color: var(--dc); }
.br-d-stamp { position: absolute; right: 10px; bottom: 9px; color: var(--dc); letter-spacing: .12em; }
.br-d-stamp:empty { display: none; }
.br-d[data-state="soon"] { border-left-color: var(--dc); }
.br-d[data-state="up"] { border-left-color: var(--dc); background: color-mix(in srgb, var(--dc) 9%, var(--s2)); }
.br-d[data-state="up"] .br-b { border-color: var(--dc); background: var(--dc); color: var(--t-ink); }
.br-d[data-state="dead"], .br-d[data-state="miss"] { opacity: .42; }
.br-d[data-state="dead"] .br-d-stamp, .br-d[data-state="miss"] .br-d-stamp { color: var(--t3); }
.br-buffer { display: flex; flex-wrap: wrap; gap: 4px; }
.br-slot { display: grid; place-items: center; width: 40px; height: 32px; border: 1px dashed var(--line-3); color: var(--t1); font: 600 13px/1 var(--font-mono); }
.br-slot.full { border-style: solid; border-color: var(--line-hot); background: var(--a-soft); }
.br-slot.pv { border-color: var(--hot); color: var(--hot); }
.br-slot.caret { border-color: var(--t3); animation: br-caret 1s steps(1, end) infinite; }
@keyframes br-caret { 50% { border-color: var(--line-2); } }
.br-odds { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 0; }
.br-odds .osd { color: var(--t3); letter-spacing: .1em; }
.br-c0, .br-c1 { font: 700 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.br-c0.good, .br-c1.good { color: var(--hot); }
.br-c0.mid, .br-c1.mid { color: var(--intel); }
.br-c0.bad, .br-c1.bad { color: var(--hostile); }
.br-c0:has(+ .br-arrow) { color: var(--t3); text-decoration: line-through; font-size: 18px; }
.br-arrow { align-self: center; width: 20px; height: 9px; background: var(--t3); clip-path: polygon(0 40%, 13px 40%, 13px 0, 20px 50%, 13px 100%, 13px 60%, 0 60%); }
.br-botch { color: color-mix(in srgb, var(--danger) 85%, var(--fg)); letter-spacing: .06em; }

/* footer */
.br-foot { position: sticky; bottom: -14px; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 -18px -14px; padding: 10px 18px 14px; border-top: 1px solid var(--line); background: var(--s1); }
.br-auto[hidden] { display: none; }
.br-hint { margin: 0; color: var(--t3); letter-spacing: .04em; }
.br-exec { justify-content: center; min-width: 160px; }
.br-exec.pulse { box-shadow: 0 0 0 1px var(--hot), 0 0 22px var(--glow); }

/* result stamp (DedSec) */
.br-stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  padding: 12px 30px 10px;
  color: var(--t-ink);
  background: var(--hot);
  font: 700 clamp(30px, 5vw, 52px)/1 var(--font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 5%, 100% 0, 99.3% 95%, .7% 100%);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-4deg) skewX(-10deg);
}
.br-stamp.on { opacity: 1; animation: br-slam .5s var(--ease-snap) both; }
.br-stamp.bad { color: color-mix(in srgb, var(--bg) 94%, var(--danger)); background: var(--hostile); animation-name: br-deny; animation-timing-function: steps(3, end); }
@keyframes br-slam { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) skewX(-10deg) scale(1.8); } 60% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) skewX(-10deg) scale(.97); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) skewX(-10deg); } }
@keyframes br-deny { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) skewX(-10deg) translateX(-12px); } 34% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) skewX(-20deg) translateX(10px); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) skewX(-10deg); } }
.br[data-state="done"] .br-matrix, .br[data-state="traced"] .br-matrix { opacity: .5; }

/* mobile: bottom sheet, the matrix fits the width */
@media (max-width: 767px) {
  .breach-layer { place-items: end stretch; padding: 0; }
  .br { width: 100%; max-height: 94dvh; padding: 12px 12px 10px; border-left: 0; border-right: 0; }
  .br-title { font-size: 22px; }
  .br-body { grid-template-columns: 1fr; gap: 12px; }
  .br-left { justify-items: center; }
  .br-matrix { --br-cell: min(48px, calc((100vw - 42px - (var(--n) - 1) * 4px) / var(--n))); }
  .br-cell { font-size: 15px; }
  .br-foot { grid-template-columns: 1fr 1fr; bottom: -10px; margin: 0 -12px -10px; padding: 8px 12px 10px; }
  .br-hint { grid-column: 1 / -1; grid-row: 1; }
  .br-exec { grid-column: 1 / -1; min-width: 0; }
  .br-auto:not([hidden]) + .br-hint + .br-exec { grid-column: 2; }
  .br-matrix { --br-cell: min(44px, calc((100vw - 42px - (var(--n) - 1) * 4px) / var(--n))); }
  .br-rule { display: none; }
  .br-daemons { gap: 4px; margin-bottom: 2px; }
  .br-d { grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; }
  .br-d-fx { display: none; }
  .br-d-stamp { bottom: auto; top: 50%; transform: translateY(-50%); }
  .br-b { min-width: 30px; height: 24px; }
  .br-slot { width: 36px; height: 28px; }
  .br-odds { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .br, .br.in, .br.out { transition: opacity .12s; transform: none; }
  .br-dot, .br-slot.caret, .br-cell.flash, .br-cell.deny, .br-stamp.on { animation: none; }
}
html.rm .br, html.rm .br.in, html.rm .br.out { transition: opacity .12s; transform: none; }
html.rm .br-dot, html.rm .br-slot.caret, html.rm .br-cell.flash, html.rm .br-cell.deny, html.rm .br-stamp.on { animation: none; }