@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")}
:root{
  --bg:#E7ECF1; --surface:#FFFFFF; --surface-2:#F3F6F9; --ink:#15233A; --muted:#56657A; --line:#C3CDD8; --wire:#9FB0C3;
  --soc:#1F4E8C; --soc-ink:#FFFFFF;
  --t-phish:#C9830E; --t-malware:#C23B3B; --t-creds:#6A4BC4; --t-leak:#0F8079;
  --p0:#1F4E8C; --p1:#2E7D4F; --p2:#B8407F; --p3:#5A6678;
  --good:#2E7D4F; --bad:#C23B3B; --warn:#9A6A0A;
  --radius-s:6px; --radius-m:10px;
  --font:"Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-sign:"Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1624; --surface:#16213A; --surface-2:#1C2944; --ink:#E4EAF3; --muted:#9AA8BC; --line:#2D3B58; --wire:#3E5073;
    --soc:#3B74C4; --soc-ink:#FFFFFF;
    --t-phish:#E6A93A; --t-malware:#E0605F; --t-creds:#9479E6; --t-leak:#2FB3AA;
    --p0:#5B8FE0; --p1:#4CAF78; --p2:#E06AA8; --p3:#8C9AB0;
    --good:#4CAF78; --bad:#E0605F; --warn:#E6A93A;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1624; --surface:#16213A; --surface-2:#1C2944; --ink:#E4EAF3; --muted:#9AA8BC; --line:#2D3B58; --wire:#3E5073;
  --soc:#3B74C4; --soc-ink:#FFFFFF;
  --t-phish:#E6A93A; --t-malware:#E0605F; --t-creds:#9479E6; --t-leak:#2FB3AA;
  --p0:#5B8FE0; --p1:#4CAF78; --p2:#E06AA8; --p3:#8C9AB0;
  --good:#4CAF78; --bad:#E0605F; --warn:#E6A93A;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--soc);outline-offset:2px}
h1,h2,h3{margin:0;font-family:var(--font-sign);font-weight:700;letter-spacing:.01em}
.wrap{max-width:1320px;margin:0 auto;padding:18px 20px 40px}

/* top bar */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.brand h1{font-size:44px;line-height:1;letter-spacing:-.01em}
.brand h1 .dash{display:inline-block;width:.9em;height:.14em;background:var(--ink);vertical-align:middle;margin:0 .12em;position:relative;top:-.05em}
.brand p{margin:4px 0 0;color:var(--muted)}
.top-actions{display:flex;gap:8px}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-s);padding:8px 14px;font-weight:600}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--soc);border-color:var(--soc);color:var(--soc-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* status strip */
.status{display:grid;grid-template-columns:repeat(4,auto) 1fr;gap:10px 28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:12px 18px;margin-bottom:14px}
.stat h3{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.stat .v{font-family:var(--font-sign);font-size:22px;font-weight:700;line-height:1.2}
.meter{display:flex;gap:3px;margin-top:4px}
.meter i{width:14px;height:14px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line)}
.meter i.on{background:var(--bad);border-color:var(--bad)}
.meter i.last{border-style:dashed}
.rates{display:flex;gap:4px;margin-top:4px}
.rates span{min-width:22px;height:22px;display:grid;place-items:center;border-radius:4px;font-family:var(--font-sign);font-weight:600;font-size:14px;color:var(--muted);border:1px solid var(--line)}
.rates span.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.defs{display:grid;grid-template-columns:repeat(2,minmax(150px,auto));gap:6px;justify-self:end}
.def{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--radius-s);padding:5px 10px 5px 6px;background:var(--surface-2)}
.def .sw{width:10px;height:28px;border-radius:3px}
.def b{display:block;font-family:var(--font-sign);font-size:15px;line-height:1.1}
.def small{display:block;color:var(--muted);font-size:12.5px;line-height:1.2}
.def.deployed{border-color:var(--good)}
.def.deployed small{color:var(--good);font-weight:600}
.def.eradicated{background:var(--good);border-color:var(--good);color:#fff}
.def.eradicated small{color:#fff}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:14px;align-items:start}
.board-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);overflow-x:auto;position:relative}
#board{display:block;width:100%;min-width:680px;height:auto}
.panel{display:flex;flex-direction:column;gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:14px 16px}
.card h3{font-size:18px;margin-bottom:6px}
.who{display:flex;gap:12px;align-items:center}
.pawn-lg{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--font-sign);font-weight:700;font-size:20px;flex:none}
.who h2{font-size:24px;line-height:1.1}
.who p{margin:0;color:var(--muted);font-weight:600}
.ability{margin:10px 0 0;font-size:14.5px;color:var(--muted)}
.pips{display:flex;gap:5px;align-items:center;margin-top:12px;font-size:14px;color:var(--muted)}
.pips i{width:16px;height:16px;border-radius:50%;border:2px solid var(--soc)}
.pips i.on{background:var(--soc)}
.pips span{margin-right:4px;font-weight:600;color:var(--ink)}
.loc-threats{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;padding:2px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.tag .dot{width:9px;height:9px;border-radius:2px}
.acts{display:flex;flex-direction:column;gap:6px}
.act{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius-s);padding:8px 12px}
.act:hover{border-color:var(--soc);background:var(--surface)}
.act b{font-weight:600}
.act small{color:var(--muted);font-size:13px}
.hint{font-size:14px;color:var(--muted);margin:0}
.end-turn{width:100%;margin-top:10px;padding:11px}
.hand{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-left-width:5px;border-radius:5px;padding:4px 9px;font-size:14px;background:var(--surface-2)}
button.chip:hover{border-color:var(--ink)}
.team{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.team li{display:flex;gap:10px;align-items:center;font-size:14.5px}
.team .pawn-sm{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--font-sign);font-weight:700;font-size:13px;flex:none}
.team .meta{color:var(--muted)}
.team li.me{font-weight:600}

/* log */
.log{margin-top:14px}
.log ol{list-style:none;margin:0;padding:0;max-height:220px;overflow:auto;font-size:14px}
.log li{padding:5px 0;border-bottom:1px solid var(--line);display:flex;gap:10px}
.log li .t{color:var(--muted);font-family:var(--font-sign);min-width:52px}
.k-good{color:var(--good)} .k-bad{color:var(--bad)} .k-warn{color:var(--warn)}

/* board svg */
.wire{stroke:var(--wire);stroke-width:3;fill:none}
.node{cursor:pointer}
.node .box{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.node:hover .box{stroke:var(--ink)}
.node.adj .box{stroke:var(--soc);stroke-dasharray:6 4;stroke-width:2}
.node.sel .box{stroke:var(--ink);stroke-width:3;stroke-dasharray:none}
.node.here .box{stroke:var(--soc);stroke-width:3;stroke-dasharray:none}
.node .name{font-family:var(--font-sign);font-weight:600;font-size:19px;fill:var(--ink)}
.node.soc .box{fill:var(--soc);stroke:var(--soc)}
.node.soc .name{fill:var(--soc-ink)}
.node.soc .sub{fill:var(--soc-ink);opacity:.85;font-size:13px;font-family:var(--font)}
.node .zone{font-family:var(--font);font-size:12px;fill:var(--muted)}
.node .critical{font-family:var(--font-sign);font-weight:700;font-size:13px}
.shield{fill:var(--good)}
.node.soc .shield{fill:var(--soc-ink)}
.pawn text{font-family:var(--font-sign);font-weight:700;font-size:14px;fill:#fff}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hot{animation:pulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.hot{animation:none}}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(10,18,32,.55);display:grid;place-items:center;padding:16px;z-index:10}
.overlay[hidden]{display:none}
.dialog{background:var(--surface);color:var(--ink);border-radius:12px;max-width:620px;width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:24px 26px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.3)}
.dialog h2{font-size:30px;line-height:1.1;margin-bottom:8px}
.dialog p{margin:0 0 12px}
.dialog .lead{color:var(--muted)}
.dialog .q{font-family:var(--font);font-weight:600;font-size:21px;line-height:1.35;letter-spacing:0;margin:6px 0 16px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{text-align:left;border:1.5px solid var(--line);background:var(--surface-2);border-radius:8px;padding:11px 14px;font-size:16px}
.opt:hover:not(:disabled){border-color:var(--soc)}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--surface))}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
.feedback{margin-top:16px;border-left:4px solid var(--good);padding:4px 0 4px 14px}
.feedback.bad{border-color:var(--bad)}
.feedback h3{font-size:20px;margin-bottom:4px}
.stakes{font-size:14px;color:var(--muted);margin-top:14px}
.row{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 16px}
.seg button{border:1.5px solid var(--line);background:var(--surface-2);border-radius:8px;padding:9px 14px;text-align:left}
.seg button[aria-pressed="true"]{border-color:var(--soc);background:color-mix(in srgb,var(--soc) 12%,var(--surface))}
.seg button small{display:block;color:var(--muted);font-size:13px}
.events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.events li{padding:8px 12px;border-radius:6px;background:var(--surface-2);border-left:4px solid var(--line)}
.events li.k-bad{border-color:var(--bad);color:var(--ink)} .events li.k-good{border-color:var(--good);color:var(--ink)} .events li.k-warn{border-color:var(--warn);color:var(--ink)}
.rules h3{font-size:19px;margin:16px 0 4px}
.rules ul{margin:0;padding-left:20px}
.rules li{margin-bottom:4px}
.habits{margin:0;padding-left:20px}
.habits li{margin-bottom:8px}
.label{font-weight:600;font-size:15px}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .status{grid-template-columns:repeat(2,1fr)}
  .defs{grid-column:1/-1;justify-self:start}
}
@media (max-width: 520px){
  .brand h1{font-size:36px}
  .wrap{padding:12px 12px 32px}
  .dialog{padding:20px}
}