/* ====================================================================
   BytePatch Cyber Range — shared game engine styles (bpg-*)
   Used by game-incident.html, game-ransom.html, game-redteam.html and
   the games.html hub. Mirrors the tokens used across the site.
   ==================================================================== */
:root{
  --bpg-bg:#070608; --bpg-panel:#0c0a0e; --bpg-panel2:#0d0b10; --bpg-line:rgba(255,255,255,.1);
  --bpg-red:#DC1F26; --bpg-red2:#FF2D38; --bpg-txt:#F3F0ED; --bpg-mut:#a39ea0; --bpg-dim:#7d787a;
  --bpg-ok:#3fbf6f; --bpg-warn:#f5a623; --bpg-cyan:#00e6ff;
}
.bpg-mono{ font-family:'JetBrains Mono',monospace; }

/* ---- console window frame ---- */
.bpg-shell{ max-width:1180px; margin:0 auto; }
.bpg-window{ position:relative; border:1px solid var(--bpg-line); border-radius:14px; overflow:hidden; background:rgba(10,9,12,.94); box-shadow:0 40px 120px rgba(0,0,0,.6); }
.bpg-titlebar{ display:flex; align-items:center; gap:9px; padding:12px 16px; background:var(--bpg-panel); border-bottom:1px solid var(--bpg-line); }
.bpg-dot{ width:11px; height:11px; border-radius:50%; background:#2a2730; }
.bpg-dot.on{ background:var(--bpg-red); }
.bpg-titletxt{ margin-left:8px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; color:var(--bpg-dim); }
.bpg-live{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bpg-mut); }
.bpg-live b{ width:7px; height:7px; border-radius:50%; background:var(--bpg-red2); box-shadow:0 0 9px var(--bpg-red2); animation:bpBlink 1.2s step-end infinite; }
.bpg-scan{ position:absolute; inset:0; pointer-events:none; z-index:6; background:repeating-linear-gradient(rgba(255,255,255,.02) 0 1px, transparent 1px 3px); mix-blend-mode:overlay; }

/* ---- HUD ---- */
.bpg-hud{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--bpg-line); border-bottom:1px solid var(--bpg-line); }
.bpg-hud.cols3{ grid-template-columns:repeat(3,1fr); }
.bpg-stat{ background:var(--bpg-panel); padding:13px 16px; }
.bpg-stat .k{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bpg-dim); display:flex; align-items:center; gap:6px; }
.bpg-stat .v{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(16px,2vw,22px); color:var(--bpg-txt); margin-top:5px; line-height:1; transition:color .3s ease; }
.bpg-meter{ height:5px; border-radius:4px; background:rgba(255,255,255,.09); margin-top:9px; overflow:hidden; }
.bpg-meter i{ display:block; height:100%; width:100%; border-radius:4px; transition:width .6s cubic-bezier(.16,1,.3,1), background .4s ease; }
.bpg-flash-up{ animation:bpgUp .7s ease; } .bpg-flash-dn{ animation:bpgDn .7s ease; }
@keyframes bpgUp{ 0%{ color:var(--bpg-ok); text-shadow:0 0 16px rgba(63,191,111,.6);} 100%{} }
@keyframes bpgDn{ 0%{ color:var(--bpg-red2); text-shadow:0 0 16px rgba(255,45,56,.6);} 100%{} }

/* ---- stage / split ---- */
.bpg-stage{ min-height:430px; }
.bpg-split{ display:grid; grid-template-columns:1fr 1fr; }
.bpg-ops{ padding:26px 26px 28px; border-right:1px solid var(--bpg-line); }
.bpg-feed{ padding:22px 22px 24px; background:#08070a; position:relative; }
.bpg-panelhead{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bpg-dim); margin-bottom:16px; display:flex; align-items:center; gap:9px; }
.bpg-panelhead .tag{ color:var(--bpg-red); }

.bpg-scenario-tag{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bpg-red); }
.bpg-scenario-title{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(21px,2.6vw,29px); letter-spacing:-.02em; margin:10px 0 12px; line-height:1.1; color:var(--bpg-txt); }
.bpg-scenario-body{ font-family:'Space Grotesk',sans-serif; font-size:14.5px; line-height:1.62; color:var(--bpg-mut); margin:0 0 20px; }
.bpg-scenario-body b{ color:var(--bpg-txt); }

/* ---- choice buttons ---- */
.bpg-choices{ display:flex; flex-direction:column; gap:11px; }
.bpg-choice{ display:flex; gap:13px; align-items:flex-start; text-align:left; width:100%; background:transparent; border:1px solid var(--bpg-line); border-radius:12px; padding:14px 16px; cursor:pointer; color:var(--bpg-txt); transition:border-color .25s ease, background .25s ease, transform .2s ease; font-family:'Space Grotesk',sans-serif; }
.bpg-choice:hover{ border-color:rgba(220,31,38,.55); background:rgba(220,31,38,.05); transform:translateX(3px); }
.bpg-choice .ic{ flex:0 0 auto; width:28px; height:28px; border-radius:7px; display:grid; place-items:center; background:rgba(255,255,255,.04); border:1px solid var(--bpg-line); font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--bpg-dim); transition:color .25s ease, border-color .25s ease; }
.bpg-choice:hover .ic{ color:var(--bpg-red2); border-color:rgba(220,31,38,.5); }
.bpg-choice .lab{ font-weight:600; font-size:14.5px; line-height:1.3; }
.bpg-choice .sub{ display:block; margin-top:3px; font-size:12.5px; color:var(--bpg-dim); font-weight:400; }
.bpg-choice:disabled{ opacity:.4; cursor:default; transform:none; }

/* ---- feed / terminal ---- */
.bpg-term{ font-family:'JetBrains Mono',monospace; font-size:12.5px; line-height:1.85; color:var(--bpg-mut); min-height:300px; max-height:360px; overflow-y:auto; scrollbar-width:thin; }
.bpg-term.tall{ max-height:none; }
.bpg-term::-webkit-scrollbar{ width:6px; } .bpg-term::-webkit-scrollbar-thumb{ background:#2a2730; border-radius:6px; }
.bpg-term .ln{ white-space:pre-wrap; word-break:break-word; }
.bpg-c-cmd{ color:#cfcacc; } .bpg-c-dim{ color:var(--bpg-dim); } .bpg-c-ok{ color:var(--bpg-ok); }
.bpg-c-warn{ color:var(--bpg-warn); } .bpg-c-bad{ color:var(--bpg-red2); } .bpg-c-out{ color:var(--bpg-mut); }
.bpg-c-cyan{ color:var(--bpg-cyan); }
.bpg-caret{ display:inline-block; width:8px; background:var(--bpg-red2); animation:bpBlink 1s step-end infinite; color:transparent; }
.bpg-idle{ color:var(--bpg-dim); font-style:italic; }

/* ---- debrief card ---- */
.bpg-debrief{ border-radius:12px; padding:16px 17px; margin-top:4px; border:1px solid var(--bpg-line); }
.bpg-debrief.safe{ border-color:rgba(63,191,111,.4); background:rgba(63,191,111,.06); }
.bpg-debrief.risk{ border-color:rgba(245,166,35,.4); background:rgba(245,166,35,.06); }
.bpg-debrief.breach{ border-color:rgba(220,31,38,.5); background:rgba(220,31,38,.07); }
.bpg-verdict{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; display:flex; align-items:center; gap:9px; }
.bpg-verdict::before{ content:""; flex:0 0 auto; width:8px; height:8px; border-radius:2px; background:currentColor; box-shadow:0 0 8px currentColor; }
.bpg-verdict.safe{ color:var(--bpg-ok); } .bpg-verdict.risk{ color:var(--bpg-warn); } .bpg-verdict.breach{ color:var(--bpg-red2); }
.bpg-debrief h4{ font-family:'Syne',sans-serif; font-weight:700; font-size:16px; margin:11px 0 6px; color:var(--bpg-txt); }
.bpg-debrief p{ font-family:'Space Grotesk',sans-serif; font-size:13.5px; line-height:1.6; color:var(--bpg-mut); margin:0 0 9px; }
.bpg-pro{ font-family:'Space Grotesk',sans-serif; font-size:13px; line-height:1.55; color:#cfcacc; border-left:2px solid var(--bpg-red); padding-left:12px; }
.bpg-pro b{ color:var(--bpg-txt); }

/* ---- buttons ---- */
.bpg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 24px; background:var(--bpg-red); color:#fff; border:none; border-radius:100px; text-decoration:none; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; cursor:pointer; transition:background .3s ease, transform .2s ease; }
.bpg-btn:hover{ background:var(--bpg-red2); transform:translateY(-2px); }
.bpg-btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 24px; background:transparent; color:var(--bpg-txt); border:1px solid rgba(255,255,255,.2); border-radius:100px; text-decoration:none; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; cursor:pointer; transition:border-color .3s ease; }
.bpg-btn-ghost:hover{ border-color:rgba(255,255,255,.55); }

/* ---- boot / intro ---- */
.bpg-boot{ padding:52px 32px 56px; text-align:center; max-width:760px; margin:0 auto; }
.bpg-boot .kick{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--bpg-red); }
.bpg-boot h2{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(28px,5vw,50px); letter-spacing:-.03em; line-height:1.02; margin:16px 0 18px; }
.bpg-boot p{ font-family:'Space Grotesk',sans-serif; font-size:15px; line-height:1.65; color:var(--bpg-mut); margin:0 auto 14px; max-width:60ch; }
.bpg-boot p b{ color:#cfcacc; }
.bpg-brief{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bpg-line); border:1px solid var(--bpg-line); border-radius:12px; overflow:hidden; margin:26px 0 30px; text-align:left; }
.bpg-brief div{ background:var(--bpg-panel); padding:15px 16px; }
.bpg-brief .k{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--bpg-dim); }
.bpg-brief .v{ font-family:'Syne',sans-serif; font-weight:800; font-size:18px; margin-top:5px; color:var(--bpg-txt); }

/* ---- chat widget (ransom negotiation) ---- */
.bpg-chat{ display:flex; flex-direction:column; gap:12px; margin:2px 0 18px; max-height:none; }
.bpg-bub{ max-width:82%; padding:11px 14px; border-radius:13px; font-family:'Space Grotesk',sans-serif; font-size:13.5px; line-height:1.5; }
.bpg-bub .who{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px; opacity:.8; }
.bpg-bub.them{ align-self:flex-start; background:rgba(220,31,38,.1); border:1px solid rgba(220,31,38,.4); border-bottom-left-radius:3px; color:#f0e7e7; }
.bpg-bub.them .who{ color:var(--bpg-red2); }
.bpg-bub.you{ align-self:flex-end; background:rgba(255,255,255,.06); border:1px solid var(--bpg-line); border-bottom-right-radius:3px; color:var(--bpg-txt); }
.bpg-bub.you .who{ color:var(--bpg-mut); text-align:right; }
.bpg-typing{ align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--bpg-dim); font-style:italic; }

/* ---- ransom portal header ---- */
.bpg-portal{ border:1px solid rgba(220,31,38,.4); border-radius:12px; padding:16px 18px; margin:2px 0 18px; background:radial-gradient(120% 140% at 50% 0%, rgba(220,31,38,.12), transparent 60%); }
.bpg-portal .row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.bpg-portal .skull{ font-family:'Syne',sans-serif; font-weight:800; font-size:20px; color:var(--bpg-red2); letter-spacing:.02em; }
.bpg-portal .cd{ font-family:'JetBrains Mono',monospace; font-size:20px; color:var(--bpg-txt); }
.bpg-portal .amt{ font-family:'Syne',sans-serif; font-weight:800; font-size:26px; color:#fff; margin-top:8px; }
.bpg-portal .btc{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--bpg-dim); word-break:break-all; margin-top:4px; }

/* ---- report card ---- */
.bpg-report{ padding:0; }
.bpg-verdictband{ padding:40px 30px; text-align:center; position:relative; overflow:hidden; }
.bpg-verdictband.breach{ background:radial-gradient(80% 120% at 50% 0%, rgba(220,31,38,.24), transparent 62%); }
.bpg-verdictband.safe{ background:radial-gradient(80% 120% at 50% 0%, rgba(63,191,111,.18), transparent 62%); }
.bpg-verdictband .st{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--bpg-dim); }
.bpg-verdictband h2{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(34px,7.5vw,80px); line-height:.98; letter-spacing:-.04em; margin:12px 0 8px; }
.bpg-verdictband h2.breach{ color:var(--bpg-red2); text-shadow:0 0 40px rgba(255,45,56,.45); }
.bpg-verdictband h2.safe{ color:var(--bpg-ok); text-shadow:0 0 40px rgba(63,191,111,.4); }
.bpg-verdictband .sub{ font-family:'Space Grotesk',sans-serif; color:var(--bpg-mut); font-size:15px; max-width:54ch; margin:6px auto 0; line-height:1.55; }
.bpg-grade{ display:inline-grid; place-items:center; width:66px; height:66px; border-radius:14px; font-family:'Syne',sans-serif; font-weight:800; font-size:34px; margin-top:14px; }
.bpg-rgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bpg-line); border-top:1px solid var(--bpg-line); border-bottom:1px solid var(--bpg-line); }
.bpg-rgrid > div{ background:var(--bpg-panel); padding:20px 18px; text-align:center; }
.bpg-rgrid .k{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--bpg-dim); }
.bpg-rgrid .v{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(19px,3vw,29px); margin-top:7px; }
.bpg-rcols{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.bpg-rcol{ padding:28px 26px; }
.bpg-rcol:first-child{ border-right:1px solid var(--bpg-line); }
.bpg-rcol h3{ font-family:'Syne',sans-serif; font-weight:800; font-size:20px; margin:0 0 16px; }
.bpg-tl-item{ display:flex; gap:12px; padding:11px 0; border-top:1px solid rgba(255,255,255,.08); }
.bpg-tl-item:first-of-type{ border-top:none; }
.bpg-tl-item .dot{ flex:0 0 auto; width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:11px; margin-top:1px; }
.bpg-tl-item .dot.bad{ background:rgba(220,31,38,.16); color:var(--bpg-red2); } .bpg-tl-item .dot.good{ background:rgba(63,191,111,.16); color:var(--bpg-ok); }
.bpg-tl-item .dot.warn{ background:rgba(245,166,35,.16); color:var(--bpg-warn); }
.bpg-tl-item .tx{ font-family:'Space Grotesk',sans-serif; font-size:13.5px; line-height:1.5; color:var(--bpg-mut); }
.bpg-tl-item .tx b{ color:var(--bpg-txt); font-weight:600; }
.bpg-cta{ padding:34px 30px 40px; text-align:center; background:#0a090c; border-top:1px solid var(--bpg-line); }
.bpg-cta h3{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(22px,3.4vw,34px); letter-spacing:-.02em; margin:0 0 10px; }
.bpg-cta h3 span{ color:var(--bpg-red); }
.bpg-cta p{ font-family:'Space Grotesk',sans-serif; font-size:14.5px; color:var(--bpg-mut); max-width:56ch; margin:0 auto 22px; line-height:1.6; }
.bpg-cta .row{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

.bpg-footnote{ padding:16px 22px; border-top:1px solid var(--bpg-line); font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--bpg-dim); text-align:center; line-height:1.7; background:var(--bpg-panel); }

/* ---- games hub cards ---- */
.bpg-cardgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.bpg-gcard{ position:relative; display:flex; flex-direction:column; border:1px solid var(--bpg-line); border-radius:16px; padding:28px 26px; background:#0c0a0e; text-decoration:none; overflow:hidden; transition:border-color .35s ease, transform .35s ease; }
.bpg-gcard:hover{ border-color:rgba(220,31,38,.5); transform:translateY(-4px); }
.bpg-gcard::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 70% at 85% 0%, rgba(220,31,38,.12), transparent 60%); opacity:0; transition:opacity .35s ease; pointer-events:none; }
.bpg-gcard:hover::before{ opacity:1; }
.bpg-gcard .seat{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bpg-red); display:flex; align-items:center; gap:8px; }
.bpg-gcard .gt{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(22px,2.6vw,28px); letter-spacing:-.02em; color:var(--bpg-txt); margin:14px 0 8px; }
.bpg-gcard .gd{ font-family:'Space Grotesk',sans-serif; font-size:14px; line-height:1.6; color:var(--bpg-mut); flex:1; }
.bpg-gcard .gmeta{ display:flex; gap:16px; margin-top:18px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--bpg-dim); }
.bpg-gcard .go{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; color:#fff; }
.bpg-gcard .go .arr{ color:var(--bpg-red2); transition:transform .3s ease; }
.bpg-gcard:hover .go .arr{ transform:translateX(5px); }

/* ---- responsive ---- */
@media (max-width:820px){
  .bpg-split{ grid-template-columns:1fr; }
  .bpg-ops{ border-right:none; border-bottom:1px solid var(--bpg-line); }
  .bpg-hud{ grid-template-columns:1fr 1fr; }
  .bpg-hud.cols3{ grid-template-columns:1fr 1fr; }
  .bpg-rcols{ grid-template-columns:1fr; }
  .bpg-rcol:first-child{ border-right:none; border-bottom:1px solid var(--bpg-line); }
  .bpg-brief{ grid-template-columns:1fr; }
  .bpg-term{ min-height:180px; max-height:260px; }
  .bpg-cardgrid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .bpg-rgrid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .bpg-caret, .bpg-live b{ animation:none; }
}