/* ====================================================================
   BytePatch Cyber Range — LIVE FIRE engine styles (bpl-*)
   Real-time, fullscreen simulations. Shares the site's tokens but is
   deliberately independent of bpgame.css: the live sim takes over the
   whole viewport and needs its own layout system, not a document flow.
   ==================================================================== */
:root{
  --bpl-bg:#050406; --bpl-panel:#0a090c; --bpl-panel2:#0d0b11;
  --bpl-line:rgba(255,255,255,.09); --bpl-line2:rgba(255,255,255,.16);
  --bpl-red:#DC1F26; --bpl-red2:#FF2D38;
  --bpl-txt:#F3F0ED; --bpl-mut:#a39ea0; --bpl-dim:#726d70;
  --bpl-ok:#3fbf6f; --bpl-warn:#f5a623; --bpl-cyan:#35d6ea; --bpl-purple:#9d7cff;
}

.bpl-mono{ font-family:'JetBrains Mono',monospace; }

/* ============================ STAGE ============================ */
/* Normal (in-page) mode is a framed console. Fullscreen mode drops the
   frame and fills the viewport — same DOM, different chrome. */
.bpl-stage{
  position:relative; background:var(--bpl-bg); color:var(--bpl-txt);
  border:1px solid var(--bpl-line); border-radius:14px; overflow:hidden;
  max-width:1240px; margin:0 auto; box-shadow:0 40px 120px rgba(0,0,0,.6);
  font-family:'Space Grotesk',sans-serif;
  --bpl-h:min(78vh,760px);
}
.bpl-stage:fullscreen{
  border:none; border-radius:0; max-width:none; width:100vw; height:100vh;
  box-shadow:none; --bpl-h:100vh;
}
.bpl-stage:-webkit-full-screen{
  border:none; border-radius:0; max-width:none; width:100vw; height:100vh; --bpl-h:100vh;
}
/* Takeover fallback. Real fullscreen needs user activation and does not exist
   at all for elements on iOS Safari, so the sim also maximises itself with
   plain CSS. Applied always on start; when the real Fullscreen API succeeds
   too, the two simply agree. */
.bpl-stage.bpl-immersive{
  position:fixed; inset:0; z-index:9999;
  width:100vw; height:100dvh; max-width:none;
  border:none; border-radius:0; box-shadow:none; --bpl-h:100dvh;
}
html.bpl-locked, body.bpl-locked{ overflow:hidden !important; }

/* ---- cursor restoration while taken over ----
   The site hides the native cursor (html.bp-cc { cursor:none }) and draws
   .bp-cur-ring / .bp-cur-dot instead. Those live in .bp-grain, OUTSIDE the
   element we put into fullscreen — and only the fullscreen element's own
   subtree renders — so in fullscreen the custom cursor cannot be drawn and
   `cursor:none` is still inherited: the pointer vanishes completely.

   Raising their z-index cannot fix that (they are not in the subtree at all),
   so the sim hands the native cursor back for as long as it owns the screen.
   A dense console with small click targets wants a real pointer anyway. */
.bpl-stage.bpl-immersive,
.bpl-stage.bpl-immersive *,
.bpl-stage:fullscreen,
.bpl-stage:fullscreen *,
.bpl-stage:-webkit-full-screen,
.bpl-stage:-webkit-full-screen *{ cursor:auto !important; }

.bpl-stage.bpl-immersive button,
.bpl-stage.bpl-immersive a,
.bpl-stage.bpl-immersive [role="button"],
.bpl-stage.bpl-immersive .bpl-host,
.bpl-stage:fullscreen button,
.bpl-stage:fullscreen a,
.bpl-stage:fullscreen .bpl-host,
.bpl-stage:-webkit-full-screen button,
.bpl-stage:-webkit-full-screen a,
.bpl-stage:-webkit-full-screen .bpl-host{ cursor:pointer !important; }

.bpl-stage.bpl-immersive button:disabled,
.bpl-stage:fullscreen button:disabled,
.bpl-stage:-webkit-full-screen button:disabled{ cursor:default !important; }

.bpl-stage.bpl-immersive input,
.bpl-stage:fullscreen input,
.bpl-stage:-webkit-full-screen input{ cursor:text !important; }

/* The site's decorative cursor and ambient chrome would otherwise float over
   the takeover (the dot sits at z-index 9999, same as the stage). */
html.bpl-locked .bp-cur-ring,
html.bpl-locked .bp-cur-dot,
html.bpl-locked .bp-cur-label,
html.bpl-locked .bp-backlight,
html.bpl-locked .bp-progress{ opacity:0 !important; visibility:hidden !important; }

/* exit affordance, only while taken over */
.bpl-exit{
  position:absolute; top:9px; right:11px; z-index:80;
  background:rgba(10,9,12,.9); border:1px solid var(--bpl-line2); color:var(--bpl-mut);
  border-radius:6px; font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; padding:6px 11px; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.bpl-exit:hover{ border-color:var(--bpl-red); color:#fff; }
/* CRT overlay — sits above everything, eats no clicks. */
.bpl-scan{
  position:absolute; inset:0; pointer-events:none; z-index:60;
  background:repeating-linear-gradient(rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
/* Keep this subtle — at full strength it crushed the outer columns and made
   the panels genuinely hard to read, which matters when the panels are the
   game. Atmosphere must not cost legibility. */
.bpl-vig{
  position:absolute; inset:0; pointer-events:none; z-index:59;
  box-shadow:inset 0 0 90px rgba(0,0,0,.34);
}

/* ============================ BOOT ============================ */
.bpl-boot{
  min-height:var(--bpl-h); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:48px 30px; position:relative; overflow:hidden;
}
.bpl-boot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 42%, rgba(220,31,38,.16), transparent 68%);
}
.bpl-boot > *{ position:relative; z-index:1; }
.bpl-boot .kick{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--bpl-red); margin-bottom:20px;
}
.bpl-boot h2{
  font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.03em;
  font-size:clamp(30px,5.4vw,60px); line-height:1; margin:0 0 20px; max-width:16ch;
}
.bpl-boot p{
  font-size:clamp(14px,1.5vw,16.5px); line-height:1.65; color:var(--bpl-mut);
  max-width:56ch; margin:0 0 14px;
}
.bpl-boot p b{ color:var(--bpl-txt); font-weight:600; }
.bpl-brief{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px 26px; margin:26px 0 30px; width:min(720px,100%);
  border-top:1px solid var(--bpl-line); padding-top:22px;
}
.bpl-brief .k{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bpl-dim); margin-bottom:6px;
}
.bpl-brief .v{ font-size:13.5px; color:var(--bpl-txt); line-height:1.4; }

.bpl-btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 34px;
  background:var(--bpl-red); color:#fff; border:none; border-radius:100px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px;
  cursor:pointer; transition:transform .2s ease, box-shadow .3s ease;
}
.bpl-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(220,31,38,.4); }
.bpl-btn-ghost{
  display:inline-flex; align-items:center; gap:9px; padding:14px 28px;
  background:transparent; color:var(--bpl-txt); border:1px solid var(--bpl-line2);
  border-radius:100px; font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:14px; cursor:pointer; text-decoration:none; transition:border-color .25s ease;
}
.bpl-btn-ghost:hover{ border-color:var(--bpl-red); }
.bpl-hint{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--bpl-dim);
  margin-top:18px; letter-spacing:.04em;
}

/* ============================ HUD ============================ */
.bpl-hud{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--bpl-line); border-bottom:1px solid var(--bpl-line); flex:0 0 auto;
}
.bpl-cell{ background:var(--bpl-panel); padding:9px 14px; min-width:0; }
.bpl-cell .k{
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bpl-dim); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.bpl-cell .v{
  font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(15px,1.7vw,21px);
  line-height:1.1; margin-top:3px; font-variant-numeric:tabular-nums;
  transition:color .25s ease;
}
.bpl-bar{ height:4px; border-radius:3px; background:rgba(255,255,255,.08); margin-top:6px; overflow:hidden; }
.bpl-bar i{ display:block; height:100%; width:100%; border-radius:3px; transition:width .35s linear, background .4s ease; }
.bpl-pulse{ animation:bplPulse .55s ease; }
@keyframes bplPulse{ 0%{ text-shadow:0 0 18px currentColor; transform:scale(1.08);} 100%{} }

/* ============================ BOARD ============================ */
.bpl-board{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.85fr);
  gap:1px; background:var(--bpl-line);
  height:calc(var(--bpl-h) - 62px - 46px); min-height:0;
}
.bpl-col{ background:var(--bpl-panel); display:flex; flex-direction:column; min-height:0; min-width:0; }
.bpl-pane{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; overflow:hidden; }
.bpl-pane + .bpl-pane{ border-top:1px solid var(--bpl-line); }
.bpl-phead{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:9px 14px; border-bottom:1px solid var(--bpl-line);
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bpl-dim); background:var(--bpl-panel2);
}
.bpl-phead .tag{ color:var(--bpl-red); font-size:11px; line-height:1; }
.bpl-phead .count{ margin-left:auto; color:var(--bpl-mut); letter-spacing:.1em; }
.bpl-scroll{ flex:1 1 auto; overflow-y:auto; min-height:0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
.bpl-scroll::-webkit-scrollbar{ width:7px; }
.bpl-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:4px; }

/* ---- host grid ---- */
.bpl-hosts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:7px; padding:11px; }
.bpl-host{
  position:relative; text-align:left; border:1px solid var(--bpl-line);
  border-radius:9px; background:rgba(255,255,255,.017); padding:9px 10px 8px;
  cursor:pointer; overflow:hidden; color:var(--bpl-txt);
  font-family:'JetBrains Mono',monospace; transition:border-color .2s ease, background .2s ease, transform .12s ease;
}
.bpl-host:hover{ border-color:var(--bpl-line2); transform:translateY(-1px); }
.bpl-host.sel{ border-color:var(--bpl-cyan); background:rgba(53,214,234,.07); }
.bpl-host .hn{ font-size:11px; font-weight:500; letter-spacing:.02em; display:block; }
.bpl-host .hr{ font-size:9px; color:var(--bpl-dim); display:block; margin-top:2px; letter-spacing:.04em; }
.bpl-host .hs{
  display:inline-flex; align-items:center; gap:5px; margin-top:7px;
  font-size:8.5px; letter-spacing:.13em; text-transform:uppercase;
}
.bpl-host .hs .d{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.bpl-host .hp{ height:3px; border-radius:2px; background:rgba(255,255,255,.09); margin-top:7px; overflow:hidden; }
.bpl-host .hp i{ display:block; height:100%; background:var(--bpl-red); width:0; transition:width .3s linear; }

.bpl-host[data-s="ok"] .hs{ color:var(--bpl-ok); }
.bpl-host[data-s="suspect"]{ border-color:rgba(245,166,35,.42); }
.bpl-host[data-s="suspect"] .hs{ color:var(--bpl-warn); }
.bpl-host[data-s="hit"]{ border-color:rgba(220,31,38,.55); background:rgba(220,31,38,.07); animation:bplAlarm 1.5s ease-in-out infinite; }
.bpl-host[data-s="hit"] .hs{ color:var(--bpl-red2); }
.bpl-host[data-s="lost"]{ border-color:rgba(220,31,38,.3); background:rgba(220,31,38,.13); opacity:.62; }
.bpl-host[data-s="lost"] .hs{ color:var(--bpl-red); }
.bpl-host[data-s="iso"]{ border-color:rgba(53,214,234,.45); background:rgba(53,214,234,.05); }
.bpl-host[data-s="iso"] .hs{ color:var(--bpl-cyan); }
.bpl-host[data-s="clean"]{ border-color:rgba(63,191,111,.45); background:rgba(63,191,111,.05); }
.bpl-host[data-s="clean"] .hs{ color:var(--bpl-ok); }
@keyframes bplAlarm{ 0%,100%{ box-shadow:0 0 0 rgba(220,31,38,0);} 50%{ box-shadow:0 0 18px rgba(220,31,38,.4);} }

/* ---- process table ---- */
.bpl-proc{ width:100%; border-collapse:collapse; font-family:'JetBrains Mono',monospace; }
.bpl-proc th{
  text-align:left; font-size:8.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--bpl-dim); font-weight:400; padding:8px 10px 6px;
  position:sticky; top:0; background:var(--bpl-panel); z-index:2;
  border-bottom:1px solid var(--bpl-line);
}
.bpl-proc td{ padding:7px 10px; font-size:11px; border-bottom:1px solid rgba(255,255,255,.045); color:var(--bpl-mut); vertical-align:middle; }
.bpl-proc tr.evil td{ color:var(--bpl-red2); }
.bpl-proc tr.evil{ background:rgba(220,31,38,.07); }
.bpl-proc tr.dead td{ color:var(--bpl-dim); text-decoration:line-through; opacity:.5; }
.bpl-proc .pk{
  background:transparent; border:1px solid var(--bpl-line2); color:var(--bpl-mut);
  border-radius:5px; font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.1em; padding:3px 8px; cursor:pointer; text-transform:uppercase;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.bpl-proc .pk:hover{ border-color:var(--bpl-red); color:#fff; background:var(--bpl-red); }
.bpl-proc .pk:disabled{ opacity:.3; cursor:default; }

/* ---- log stream ---- */
.bpl-log{ padding:9px 13px; font-family:'JetBrains Mono',monospace; font-size:11px; line-height:1.75; }
.bpl-ln{ display:grid; grid-template-columns:auto auto 1fr; gap:0 9px; padding:1px 0; animation:bplIn .22s ease; }
@keyframes bplIn{ from{ opacity:0; transform:translateX(-5px);} to{ opacity:1; transform:none;} }
.bpl-ln .ts{ color:#4d4a4f; font-variant-numeric:tabular-nums; }
.bpl-ln .sv{ letter-spacing:.08em; font-size:9px; padding-top:2px; }
.bpl-ln .ms{ color:var(--bpl-mut); word-break:break-word; }
.bpl-ln.info .sv{ color:var(--bpl-dim); }
.bpl-ln.sys  .sv{ color:var(--bpl-cyan); }   .bpl-ln.sys .ms{ color:#bfeaf1; }
.bpl-ln.warn .sv{ color:var(--bpl-warn); }   .bpl-ln.warn .ms{ color:#f0d5a5; }
.bpl-ln.crit .sv{ color:var(--bpl-red2); }   .bpl-ln.crit .ms{ color:#ffb3b6; font-weight:500; }
.bpl-ln.good .sv{ color:var(--bpl-ok); }     .bpl-ln.good .ms{ color:#a8e6c0; }
.bpl-ln.atk  .sv{ color:var(--bpl-purple); } .bpl-ln.atk .ms{ color:#cdbcff; }

/* ---- objectives ---- */
.bpl-objs{ padding:10px 13px; display:flex; flex-direction:column; gap:8px; }
.bpl-obj{
  display:grid; grid-template-columns:auto 1fr; gap:0 10px; align-items:start;
  font-size:12px; line-height:1.45; color:var(--bpl-mut);
  border:1px solid var(--bpl-line); border-radius:8px; padding:9px 11px;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.bpl-obj .bx{
  width:15px; height:15px; border-radius:4px; border:1px solid var(--bpl-line2);
  display:grid; place-items:center; font-size:9px; margin-top:1px;
  font-family:'JetBrains Mono',monospace; color:transparent;
}
.bpl-obj.done{ color:var(--bpl-ok); border-color:rgba(63,191,111,.4); background:rgba(63,191,111,.06); }
.bpl-obj.done .bx{ background:var(--bpl-ok); border-color:var(--bpl-ok); color:#04150b; }
.bpl-obj.fail{ color:var(--bpl-red2); border-color:rgba(220,31,38,.4); background:rgba(220,31,38,.07); }
.bpl-obj.fail .bx{ background:var(--bpl-red); border-color:var(--bpl-red); color:#fff; }
.bpl-obj b{ color:var(--bpl-txt); font-weight:600; display:block; margin-bottom:2px; font-size:12.5px; }
.bpl-obj.done b{ color:var(--bpl-ok); }
.bpl-obj.fail b{ color:var(--bpl-red2); }

/* ---- action rail ---- */
.bpl-acts{ padding:10px 12px; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.bpl-act{
  display:grid; grid-template-columns:auto 1fr; gap:0 8px; align-items:center;
  text-align:left; background:rgba(255,255,255,.02); border:1px solid var(--bpl-line);
  border-radius:8px; padding:8px 10px; cursor:pointer; color:var(--bpl-txt);
  font-family:'Space Grotesk',sans-serif; transition:border-color .18s ease, background .18s ease;
}
.bpl-act:hover:not(:disabled){ border-color:var(--bpl-red); background:rgba(220,31,38,.08); }
.bpl-act:disabled{ opacity:.34; cursor:default; }
.bpl-act .kb{
  font-family:'JetBrains Mono',monospace; font-size:9px; width:17px; height:17px;
  border-radius:4px; background:rgba(255,255,255,.07); border:1px solid var(--bpl-line);
  display:grid; place-items:center; color:var(--bpl-dim);
}
.bpl-act .lb{ font-size:11.5px; font-weight:600; line-height:1.25; }
.bpl-act .sb{ display:block; font-size:9.5px; color:var(--bpl-dim); font-weight:400; margin-top:1px; }

/* ============================ QUEUE ============================
   A live decision queue. Each item carries its own countdown; when the
   bar empties the item resolves itself against you. Used by the triage
   games where the pressure is volume, not a single spreading threat. */
.bpl-queue{ padding:11px; display:flex; flex-direction:column; gap:9px; }
.bpl-qi{
  border:1px solid var(--bpl-line); border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.018); animation:bplIn .25s ease;
}
.bpl-qi.urgent{ border-color:rgba(220,31,38,.5); background:rgba(220,31,38,.05); }
.bpl-qi.resolved{ opacity:.42; }
.bpl-qi-top{
  display:flex; align-items:baseline; gap:9px; padding:9px 12px 0;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--bpl-dim);
}
.bpl-qi-top .kind{ color:var(--bpl-red); }
.bpl-qi-top .from{ margin-left:auto; color:var(--bpl-dim); text-transform:none; letter-spacing:.02em; }
.bpl-qi-sub{
  padding:6px 12px 0; font-family:'Space Grotesk',sans-serif;
  font-size:13.5px; font-weight:600; color:var(--bpl-txt); line-height:1.35;
}
.bpl-qi-body{
  padding:4px 12px 9px; font-family:'Space Grotesk',sans-serif;
  font-size:12px; line-height:1.5; color:var(--bpl-mut);
}
.bpl-qi-body code{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--bpl-warn); word-break:break-all;
}
.bpl-qi-acts{ display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 10px; }
.bpl-qi-acts button{
  background:transparent; border:1px solid var(--bpl-line2); color:var(--bpl-mut);
  border-radius:6px; font-family:'Space Grotesk',sans-serif; font-size:11.5px;
  font-weight:600; padding:6px 11px; cursor:pointer;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.bpl-qi-acts button:hover{ border-color:var(--bpl-red); color:#fff; background:rgba(220,31,38,.16); }
.bpl-qi-acts button:disabled{ opacity:.35; cursor:default; }
.bpl-qi-bar{ height:3px; background:rgba(255,255,255,.07); }
.bpl-qi-bar i{ display:block; height:100%; background:var(--bpl-warn); width:100%; transition:width .25s linear, background .3s ease; }
.bpl-qi.urgent .bpl-qi-bar i{ background:var(--bpl-red2); }
.bpl-qempty{
  padding:22px 14px; text-align:center; font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--bpl-dim); letter-spacing:.06em;
}

/* ============================ CHAT ============================
   Live negotiation. They type at you; a reply timer runs; silence is a
   move the other side gets to punish. */
.bpl-chat{ padding:12px 13px; display:flex; flex-direction:column; gap:10px; }
.bpl-bub{ max-width:88%; border-radius:11px; padding:10px 13px; animation:bplIn .25s ease; }
.bpl-bub .who{
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:5px;
}
.bpl-bub .tx{ font-family:'Space Grotesk',sans-serif; font-size:13.5px; line-height:1.55; }
.bpl-bub.them{
  align-self:flex-start; background:rgba(220,31,38,.09);
  border:1px solid rgba(220,31,38,.3);
}
.bpl-bub.them .who{ color:var(--bpl-red2); }
.bpl-bub.them .tx{ color:#ffcfd1; }
.bpl-bub.you{
  align-self:flex-end; background:rgba(255,255,255,.045);
  border:1px solid var(--bpl-line2);
}
.bpl-bub.you .who{ color:var(--bpl-dim); }
.bpl-bub.you .tx{ color:var(--bpl-txt); }
.bpl-bub.sys{
  align-self:center; background:transparent; border:1px dashed var(--bpl-line2);
  max-width:96%;
}
.bpl-bub.sys .who{ color:var(--bpl-cyan); }
.bpl-bub.sys .tx{ color:var(--bpl-mut); font-size:12.5px; }
.bpl-typing{
  align-self:flex-start; font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--bpl-dim); padding:4px 2px; letter-spacing:.05em;
}
.bpl-reply{
  flex:0 0 auto; border-top:1px solid var(--bpl-line); background:var(--bpl-panel2);
  padding:10px 12px; display:flex; flex-direction:column; gap:7px;
}
.bpl-reply-head{
  display:flex; align-items:center; gap:9px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bpl-dim);
}
.bpl-reply-head .cdn{ margin-left:auto; color:var(--bpl-red2); font-variant-numeric:tabular-nums; }
.bpl-reply-bar{ height:3px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; }
.bpl-reply-bar i{ display:block; height:100%; background:var(--bpl-red2); width:100%; transition:width .25s linear; }
.bpl-reply button{
  text-align:left; background:rgba(255,255,255,.02); border:1px solid var(--bpl-line);
  border-radius:8px; padding:9px 12px; cursor:pointer; color:var(--bpl-txt);
  font-family:'Space Grotesk',sans-serif; font-size:12.5px; font-weight:600; line-height:1.35;
  transition:border-color .18s ease, background .18s ease;
}
.bpl-reply button:hover:not(:disabled){ border-color:var(--bpl-red); background:rgba(220,31,38,.08); }
.bpl-reply button:disabled{ opacity:.35; cursor:default; }
.bpl-reply button .sb{ display:block; font-size:10.5px; color:var(--bpl-dim); font-weight:400; margin-top:2px; }

/* ============================ CLOCKS ============================
   Named deadlines running in parallel with the incident — the thing
   that makes incident response hard is that they all run at once. */
.bpl-clocks{ padding:11px 13px; display:flex; flex-direction:column; gap:10px; }
.bpl-clk{ border:1px solid var(--bpl-line); border-radius:9px; padding:10px 12px; transition:border-color .3s ease, background .3s ease; }
.bpl-clk .cn{
  display:flex; align-items:baseline; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--bpl-dim);
}
.bpl-clk .cv{
  margin-left:auto; font-family:'Syne',sans-serif; font-weight:800;
  font-size:17px; color:var(--bpl-txt); font-variant-numeric:tabular-nums;
}
.bpl-clk .cb{ height:3px; border-radius:2px; background:rgba(255,255,255,.08); margin-top:8px; overflow:hidden; }
.bpl-clk .cb i{ display:block; height:100%; background:var(--bpl-ok); width:100%; transition:width .3s linear, background .4s ease; }
.bpl-clk .cd{ font-size:11px; color:var(--bpl-dim); margin-top:6px; line-height:1.45; font-family:'Space Grotesk',sans-serif; }
.bpl-clk.warn{ border-color:rgba(245,166,35,.45); }
.bpl-clk.warn .cv{ color:var(--bpl-warn); }
.bpl-clk.crit{ border-color:rgba(220,31,38,.5); background:rgba(220,31,38,.05); }
.bpl-clk.crit .cv{ color:var(--bpl-red2); }
.bpl-clk.met{ border-color:rgba(63,191,111,.45); background:rgba(63,191,111,.05); }
.bpl-clk.met .cv{ color:var(--bpl-ok); font-size:13px; }
.bpl-clk.missed{ border-color:rgba(220,31,38,.4); opacity:.75; }
.bpl-clk.missed .cv{ color:var(--bpl-red); font-size:13px; }

/* ============================ TERMINAL ============================ */
.bpl-cmd{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:0 14px;
  height:46px; background:#08070a; border-top:1px solid var(--bpl-line);
  font-family:'JetBrains Mono',monospace;
}
.bpl-cmd .ps{ color:var(--bpl-red); font-size:13px; flex:0 0 auto; }
.bpl-cmd input{
  flex:1 1 auto; background:transparent; border:none; outline:none; color:var(--bpl-txt);
  font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.01em; min-width:0;
}
.bpl-cmd input::placeholder{ color:#4d4a4f; }
.bpl-cmd .kbd{ font-size:9.5px; color:var(--bpl-dim); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }

/* ============================ OVERLAYS ============================ */
.bpl-over{
  position:absolute; inset:0; z-index:70; display:grid; place-items:center;
  background:rgba(3,2,4,.9); backdrop-filter:blur(3px); padding:26px;
  animation:bplFade .3s ease;
}
@keyframes bplFade{ from{ opacity:0; } to{ opacity:1; } }

/* the ransom note — deliberately looks like the real thing */
.bpl-note{
  width:min(620px,100%); max-height:100%; overflow-y:auto;
  background:#0b0509; border:1px solid rgba(220,31,38,.5); border-radius:12px;
  padding:30px 32px; box-shadow:0 0 90px rgba(220,31,38,.28);
  animation:bplSlam .34s cubic-bezier(.16,1,.3,1);
}
@keyframes bplSlam{ from{ transform:scale(.9); opacity:0;} to{ transform:none; opacity:1;} }
.bpl-note .skull{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bpl-red2); margin-bottom:16px;
}
.bpl-note h3{
  font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(24px,3.6vw,36px);
  letter-spacing:-.02em; line-height:1.05; margin:0 0 16px; color:#fff;
}
.bpl-note p{ font-size:14px; line-height:1.65; color:var(--bpl-mut); margin:0 0 12px; }
.bpl-note .wallet{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--bpl-warn);
  background:rgba(245,166,35,.08); border:1px solid rgba(245,166,35,.28);
  border-radius:7px; padding:11px 13px; margin:16px 0; word-break:break-all;
}
.bpl-note .cd{
  font-family:'JetBrains Mono',monospace; font-size:clamp(26px,5vw,44px);
  color:var(--bpl-red2); letter-spacing:.06em; font-variant-numeric:tabular-nums;
  margin:6px 0 18px;
}

/* ============================ REPORT ============================ */
.bpl-report{ min-height:var(--bpl-h); overflow-y:auto; padding:0; }
.bpl-band{ padding:44px 34px 34px; text-align:center; position:relative; overflow:hidden; border-bottom:1px solid var(--bpl-line); }
.bpl-band.win{ background:radial-gradient(70% 100% at 50% 0%, rgba(63,191,111,.16), transparent 68%); }
.bpl-band.lose{ background:radial-gradient(70% 100% at 50% 0%, rgba(220,31,38,.2), transparent 68%); }
.bpl-band .st{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--bpl-dim); margin-bottom:14px;
}
.bpl-band h2{
  font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.035em;
  font-size:clamp(34px,7vw,74px); line-height:.98; margin:0 0 14px;
}
.bpl-band.win h2{ color:var(--bpl-ok); }
.bpl-band.lose h2{ color:var(--bpl-red2); }
.bpl-band .sub{ font-size:15px; line-height:1.6; color:var(--bpl-mut); max-width:56ch; margin:0 auto; }
.bpl-grade{
  display:inline-block; margin-top:20px; padding:9px 22px; border-radius:100px;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
}
.bpl-rgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--bpl-line); border-bottom:1px solid var(--bpl-line);
}
.bpl-rgrid > div{ background:var(--bpl-panel); padding:18px 20px; }
.bpl-rgrid .k{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--bpl-dim); margin-bottom:8px;
}
.bpl-rgrid .v{ font-family:'Syne',sans-serif; font-weight:800; font-size:26px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.bpl-rcols{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--bpl-line); }
.bpl-rcol{ background:var(--bpl-panel); padding:24px 26px 28px; }
.bpl-rcol h3{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bpl-dim); margin:0 0 16px; font-weight:400;
}
.bpl-item{ display:grid; grid-template-columns:auto 1fr; gap:0 12px; padding:9px 0; border-top:1px solid rgba(255,255,255,.055); }
.bpl-item:first-of-type{ border-top:none; }
.bpl-item .dot{
  width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  font-size:10px; margin-top:1px; font-family:'JetBrains Mono',monospace;
}
.bpl-item .dot.good{ background:rgba(63,191,111,.15); color:var(--bpl-ok); }
.bpl-item .dot.bad{ background:rgba(220,31,38,.15); color:var(--bpl-red2); }
.bpl-item .dot.warn{ background:rgba(245,166,35,.15); color:var(--bpl-warn); }
.bpl-item .tx{ font-size:13.5px; line-height:1.55; color:var(--bpl-mut); }
.bpl-item .tx b{ color:var(--bpl-txt); font-weight:600; }
.bpl-item .tm{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--bpl-dim); margin-left:6px; }
.bpl-cta{ padding:34px; text-align:center; border-top:1px solid var(--bpl-line); }
.bpl-cta h3{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(20px,2.6vw,28px); letter-spacing:-.02em; margin:0 0 10px; }
.bpl-cta p{ font-size:14.5px; color:var(--bpl-mut); max-width:52ch; margin:0 auto 22px; line-height:1.6; }
.bpl-cta .row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* toast */
.bpl-toast{
  position:absolute; left:50%; bottom:64px; transform:translateX(-50%);
  z-index:65; display:flex; flex-direction:column; gap:7px; align-items:center;
  pointer-events:none; width:max-content; max-width:92%;
}
.bpl-tst{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em;
  padding:9px 17px; border-radius:100px; border:1px solid var(--bpl-line2);
  background:rgba(8,7,10,.96); color:var(--bpl-txt); animation:bplToast .3s ease;
  text-align:center;
}
.bpl-tst.good{ border-color:rgba(63,191,111,.5); color:#a8e6c0; }
.bpl-tst.bad{ border-color:rgba(220,31,38,.5); color:#ffb3b6; }
.bpl-tst.warn{ border-color:rgba(245,166,35,.5); color:#f0d5a5; }
@keyframes bplToast{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* damage flash on the whole stage */
.bpl-hurt{ animation:bplHurt .4s ease; }
@keyframes bplHurt{ 0%{ box-shadow:inset 0 0 0 rgba(220,31,38,0);} 40%{ box-shadow:inset 0 0 120px rgba(220,31,38,.4);} 100%{} }

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
  .bpl-stage{ --bpl-h:min(86vh,720px); }
  .bpl-hud{ grid-template-columns:repeat(3,1fr); }
  .bpl-board{ grid-template-columns:1fr; height:auto; max-height:calc(var(--bpl-h) - 46px); overflow-y:auto; }
  .bpl-col{ min-height:210px; }
  .bpl-rcols{ grid-template-columns:1fr; }
  .bpl-acts{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .bpl-hud{ grid-template-columns:repeat(2,1fr); }
  .bpl-hosts{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); }
  .bpl-cmd .kbd{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .bpl-host[data-s="hit"]{ animation:none; }
  .bpl-ln,.bpl-note,.bpl-tst,.bpl-over{ animation:none; }
  .bpl-hurt{ animation:none; }
}