/* CIVIC³ WARFARE EDITION — shared styles for every warfare case file */
@font-face{font-family:'Bebas Neue';src:url(../shell/fonts/bebas-neue-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../shell/fonts/plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(../shell/fonts/plex-mono-600.woff2) format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(../shell/fonts/plex-sans-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(../shell/fonts/plex-sans-600.woff2) format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(../shell/fonts/plex-sans-700.woff2) format('woff2');font-weight:700;font-display:swap}
:root{
  --ink:#050506; --bg:#0A0C0F; --bg2:#111418; --bg3:#181D23; --line:#2a2622;
  --gold:#C9A84C; --gold-bright:#F0C96B; --gold-dim:#8A6A2A;
  --red:#C0392B; --red-hot:#ff3b2b; --red-dim:#7A1F15; --blood:#4a0d08;
  --steel:#7d8a99; --green:#2ECC71;
  --text:#E8E0D0; --text-dim:#b1a897; --text-muted:#8a8172;
  --display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--gold-bright)}
.wf-locked{overflow:hidden;height:100vh}
/* film grain + vignette over everything */
.wf-grain{pointer-events:none;position:fixed;inset:-50%;z-index:90;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
.wf-vignette{pointer-events:none;position:fixed;inset:0;z-index:89;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%)}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,2%)}80%{transform:translate(5%,5%)}100%{transform:translate(0,0)}}

/* ── GATE ─────────────────────────────────────────── */
.wf-gate{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:24px 16px;transition:opacity .9s ease}
.wf-gate.gone{opacity:0;pointer-events:none}
.wf-gate-box{max-width:560px;width:100%;border:1px solid var(--red-dim);background:linear-gradient(180deg,#0e0606,#050506);padding:32px 24px;position:relative;text-align:center}
.wf-gate-box::before,.wf-gate-box::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(-45deg,var(--red) 0 12px,#000 12px 24px);opacity:.85}
.wf-gate-box::before{top:-11px}.wf-gate-box::after{bottom:-11px}
.wf-stamp{display:inline-block;font-family:var(--display);font-size:15px;letter-spacing:.3em;color:var(--red-hot);border:2px solid var(--red-hot);padding:4px 12px;transform:rotate(-3deg);margin-bottom:18px}
.wf-gate h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,11vw,76px);line-height:.9;margin:0 0 6px;letter-spacing:.02em}
.wf-gate h1 span{color:var(--red-hot)}
.wf-gate .wf-file{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--gold);margin-bottom:22px}
.wf-gate p{color:var(--text-dim);font-size:15px;margin:0 0 12px}
.wf-gate .wf-warn{font-family:var(--mono);font-size:12px;color:var(--text-muted);letter-spacing:.06em;border-top:1px solid var(--line);padding-top:14px;margin-top:18px}
.wf-btn{font-family:var(--display);font-size:24px;letter-spacing:.14em;background:var(--red);color:#fff;border:0;padding:14px 30px;cursor:pointer;margin-top:10px;box-shadow:0 0 0 1px var(--red-hot),0 0 28px rgba(255,59,43,.35);transition:transform .15s,box-shadow .15s}
.wf-btn:hover,.wf-btn:focus-visible{transform:scale(1.04);box-shadow:0 0 0 2px var(--red-hot),0 0 46px rgba(255,59,43,.6);outline:none}
.wf-btn.ghost{background:transparent;color:var(--text-dim);box-shadow:0 0 0 1px var(--line);font-size:17px;padding:10px 18px}
.wf-btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ── COLD OPEN ─────────────────────────────────────── */
.wf-cold{position:fixed;inset:0;z-index:95;background:#000;display:flex;align-items:center;justify-content:center;padding:24px 18px;text-align:center}
.wf-cold.gone{opacity:0;pointer-events:none;transition:opacity 1.2s}
.wf-cold-line{font-family:var(--display);font-size:clamp(30px,7.5vw,68px);line-height:1.02;letter-spacing:.02em;max-width:14em;opacity:0;transform:scale(1.06);transition:opacity .5s,transform 2.6s ease-out}
.wf-cold-line.on{opacity:1;transform:scale(1)}
.wf-cold-line small{display:block;font-family:var(--mono);font-size:clamp(11px,2.6vw,14px);letter-spacing:.24em;color:var(--gold);margin-bottom:14px}
.wf-cold-line em{font-style:normal;color:var(--red-hot)}
.wf-skip{position:fixed;right:14px;bottom:14px;z-index:96;font-family:var(--mono);font-size:12px;letter-spacing:.14em;background:transparent;border:1px solid var(--line);color:var(--text-muted);padding:8px 12px;cursor:pointer}
.wf-flash{position:fixed;inset:0;z-index:97;pointer-events:none;background:#fff;opacity:0}
.wf-flash.hit{animation:flash .45s ease-out}
.wf-flash.red.hit{background:var(--red-hot)}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.wf-shake{animation:shake .5s}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,3px)}40%,60%{transform:translate(6px,-1px)}}

/* ── TOP BAR ───────────────────────────────────────── */
.wf-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 16px;background:rgba(5,5,6,.88);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.12em}
.wf-bar a{color:var(--text-dim);text-decoration:none}
.wf-bar .wf-brand{color:var(--gold);white-space:nowrap}
.wf-bar .wf-brand b{color:var(--red-hot);font-weight:500}
.wf-bar-actions{display:flex;gap:8px}
.wf-chip{font-family:var(--mono);font-size:11px;letter-spacing:.12em;background:transparent;border:1px solid var(--line);color:var(--text-dim);padding:6px 10px;cursor:pointer;white-space:nowrap}
.wf-chip:hover,.wf-chip[aria-pressed="true"]{border-color:var(--red);color:#fff}

/* ── HERO ──────────────────────────────────────────── */
.wf-hero{min-height:92vh;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 16px 48px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,var(--blood),transparent 60%),var(--ink)}
.wf-hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);pointer-events:none}
.wf-hero-inner{max-width:980px;margin:0 auto;width:100%;position:relative}
.wf-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--gold);margin-bottom:12px}
.wf-title{font-family:var(--display);font-weight:400;font-size:clamp(54px,13vw,150px);line-height:.86;margin:0;letter-spacing:.01em;text-transform:uppercase}
.wf-title .red{color:var(--red-hot);display:block}
.wf-charge{display:inline-block;margin-top:18px;font-family:var(--display);font-size:clamp(20px,4vw,30px);letter-spacing:.2em;color:#fff;background:var(--red);padding:4px 14px}
.wf-logline{font-size:clamp(17px,2.4vw,22px);max-width:40em;color:var(--text);margin:22px 0 0}
.wf-hero-cta{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap}

/* ── SECTIONS ──────────────────────────────────────── */
.wf-sec{padding:72px 16px;border-top:1px solid var(--line)}
.wf-wrap{max-width:980px;margin:0 auto}
.wf-h2{font-family:var(--display);font-weight:400;font-size:clamp(38px,7vw,64px);line-height:.95;margin:0 0 6px;letter-spacing:.02em}
.wf-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--red-hot);margin-bottom:10px}
.wf-lede{color:var(--text-dim);max-width:44em;margin:0 0 28px}

/* ── TALE OF THE TAPE ──────────────────────────────── */
.wf-tape{display:grid;grid-template-columns:1fr auto 1fr;gap:0;border:1px solid var(--line);background:var(--bg)}
.wf-corner{padding:20px 18px}
.wf-corner.a{border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(192,57,43,.14),transparent 50%)}
.wf-corner.b{background:linear-gradient(180deg,rgba(201,168,76,.12),transparent 50%)}
.wf-corner-tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--text-muted)}
.wf-corner h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,4.4vw,42px);line-height:.95;margin:6px 0 14px}
.wf-corner.a h3{color:var(--red-hot)} .wf-corner.b h3{color:var(--gold-bright)}
.wf-vs{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:44px;color:var(--text-muted);padding:0 4px;writing-mode:vertical-rl;letter-spacing:.2em;background:#000}
.wf-arsenal{list-style:none;margin:0;padding:0}
.wf-arsenal li{display:flex;gap:10px;align-items:baseline;padding:9px 0;border-top:1px dashed var(--line);font-size:15px}
.wf-arsenal li b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1;min-width:3.6em;letter-spacing:.02em}
.wf-corner.a li b{color:var(--red-hot)} .wf-corner.b li b{color:var(--gold-bright)}
.wf-arsenal li span{color:var(--text-dim)}

/* stat bars (power levels) */
.wf-stats{margin-top:34px;display:grid;gap:14px}
.wf-stat{display:grid;grid-template-columns:1fr minmax(90px,150px) 1fr;align-items:center;gap:10px}
.wf-stat-label{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--text-dim)}
.wf-meter{height:16px;background:#000;border:1px solid var(--line);position:relative;overflow:hidden}
.wf-meter i{position:absolute;top:0;bottom:0;width:0;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.wf-meter.a i{right:0;background:linear-gradient(270deg,var(--red-hot),var(--red-dim))}
.wf-meter.b i{left:0;background:linear-gradient(90deg,var(--gold-bright),var(--gold-dim))}
.wf-meter em{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--mono);font-style:normal;font-size:10px;color:#fff;z-index:1;text-shadow:0 0 3px #000}
.wf-meter.a em{left:6px}.wf-meter.b em{right:6px}

/* ── ODDS ──────────────────────────────────────────── */
.wf-odds{border:1px solid var(--red-dim);background:#080303;padding:22px 18px;position:relative;overflow:visible}
.wf-odds-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--text-dim);margin-bottom:8px;gap:12px}
.wf-odds-bar{height:42px;display:flex;border:1px solid var(--line);background:#000;overflow:hidden}
.wf-odds-bar .a{background:repeating-linear-gradient(-45deg,var(--red) 0 10px,var(--red-dim) 10px 20px);transition:width 1.8s cubic-bezier(.2,.8,.2,1)}
.wf-odds-bar .b{background:var(--gold);transition:width 1.8s cubic-bezier(.2,.8,.2,1);flex:1}
.wf-odds-num{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px;gap:12px}
.wf-odds-num b{font-family:var(--display);font-weight:400;font-size:clamp(40px,9vw,72px);line-height:.9}
.wf-odds-num .a b{color:var(--red-hot)} .wf-odds-num .b{text-align:right} .wf-odds-num .b b{color:var(--gold-bright)}
.wf-odds-num small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text-muted)}
.wf-note{font-family:var(--mono);font-size:11px;color:var(--text-muted);margin-top:14px;letter-spacing:.04em}
.wf-upset{position:absolute;right:14px;top:-34px;font-family:var(--display);font-size:clamp(34px,7vw,56px);color:var(--gold-bright);border:3px solid var(--gold-bright);padding:0 12px;background:#000;transform:rotate(-6deg) scale(2.2);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s;letter-spacing:.06em}
.wf-upset.on{opacity:1;transform:rotate(-6deg) scale(1)}

/* ── ROUNDS ────────────────────────────────────────── */
.wf-rounds{display:grid;gap:0;margin-top:20px}
.wf-round{position:relative;padding:44px 0 44px 22px;border-left:2px solid var(--line);opacity:.18;transform:translateY(24px);transition:opacity .7s,transform .7s,border-color .7s}
.wf-round.on{opacity:1;transform:none;border-left-color:var(--red)}
.wf-round::before{content:"";position:absolute;left:-8px;top:52px;width:14px;height:14px;background:var(--ink);border:2px solid var(--red);transform:rotate(45deg)}
.wf-round-tag{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--red-hot)}
.wf-round-date{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gold);margin-left:10px}
.wf-round h3{font-family:var(--display);font-weight:400;font-size:clamp(36px,6.4vw,62px);line-height:.92;margin:8px 0 14px;letter-spacing:.015em}
.wf-round p{max-width:40em;margin:0 0 12px;color:var(--text)}
.wf-round p.dim{color:var(--text-dim)}
.wf-big{display:flex;flex-wrap:wrap;gap:12px 26px;margin:18px 0 10px}
.wf-big div{min-width:120px}
.wf-big b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(46px,9vw,84px);line-height:.85;color:var(--red-hot)}
.wf-big b.gold{color:var(--gold-bright)}
.wf-big span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text-dim);display:block;margin-top:6px;max-width:16em}
.wf-result{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;padding:6px 10px;border:1px solid}
.wf-result.loss{color:var(--red-hot);border-color:var(--red-dim)}
.wf-result.win{color:var(--gold-bright);border-color:var(--gold-dim)}
.wf-result.draw{color:var(--steel);border-color:#3a4450}
.wf-quote{border-left:3px solid var(--gold);padding:6px 0 6px 14px;margin:16px 0;font-family:var(--display);font-size:clamp(24px,4vw,34px);line-height:1.05;letter-spacing:.02em;color:var(--gold-bright);max-width:22em}
.wf-quote cite{display:block;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--text-muted);margin-top:6px}

/* ── VERDICT ───────────────────────────────────────── */
.wf-verdict{text-align:center;padding:110px 16px;background:radial-gradient(ellipse at center,rgba(201,168,76,.16),transparent 60%),var(--ink);border-top:1px solid var(--line)}
.wf-verdict .wf-eyebrow{color:var(--text-dim)}
.wf-verdict-word{font-family:var(--display);font-size:clamp(64px,17vw,190px);line-height:.85;color:var(--gold-bright);margin:10px 0;letter-spacing:.02em;text-shadow:0 0 60px rgba(240,201,107,.25)}
.wf-verdict p{max-width:36em;margin:12px auto 0;color:var(--text)}

/* ── AFTERMATH ─────────────────────────────────────── */
.wf-after{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:22px}
.wf-after div{border:1px solid var(--line);background:var(--bg);padding:16px}
.wf-after h4{font-family:var(--display);font-weight:400;font-size:28px;margin:0 0 6px;letter-spacing:.02em}
.wf-after p{margin:0;color:var(--text-dim);font-size:15px}
.wf-twist{margin-top:30px;font-family:var(--display);font-size:clamp(34px,6vw,58px);line-height:.95;color:var(--red-hot);letter-spacing:.02em}

/* ── SOURCES ───────────────────────────────────────── */
.wf-sources ol{padding-left:22px;margin:16px 0 0;color:var(--text-dim);font-size:14px}
.wf-sources li{margin:6px 0}
.wf-sources .wf-note{margin-top:20px}
.wf-foot{padding:30px 16px 60px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text-muted);border-top:1px solid var(--line)}

/* ── FILM MODE (screen-record friendly) ────────────── */
body.wf-film .wf-bar{opacity:.0;pointer-events:none}
body.wf-film .wf-round{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.wf-film-hud{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--text-muted);background:rgba(0,0,0,.7);border:1px solid var(--line);padding:6px 12px}
body.wf-film .wf-film-hud{display:block}

/* ── INDEX ─────────────────────────────────────────── */
.wf-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:28px}
.wf-card{display:block;text-decoration:none;color:var(--text);border:1px solid var(--line);background:linear-gradient(180deg,#120707,#050506);padding:22px 18px;transition:border-color .2s,transform .2s}
.wf-card:hover{border-color:var(--red);transform:translateY(-3px)}
.wf-card .wf-corner-tag{color:var(--gold)}
.wf-card h3{font-family:var(--display);font-weight:400;font-size:44px;line-height:.9;margin:10px 0}
.wf-card h3 span{color:var(--red-hot)}
.wf-card p{color:var(--text-dim);font-size:15px;margin:0 0 12px}
.wf-card .wf-odds-mini{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--gold-bright)}

@media (max-width:680px){
  .wf-bar .wf-brand{font-size:10px;letter-spacing:.08em}
  .wf-chip{padding:6px 7px;font-size:10px;letter-spacing:.06em}
  .wf-chip .wf-long{display:none}
  .wf-upset{right:8px}
  .wf-tape{grid-template-columns:1fr}
  .wf-corner.a{border-right:0;border-bottom:1px solid var(--line)}
  .wf-vs{writing-mode:horizontal-tb;padding:8px;font-size:32px}
  .wf-stat{grid-template-columns:1fr 1fr;grid-template-areas:"l l" "a b"}
  .wf-stat-label{grid-area:l}
  .wf-sec{padding:56px 16px}
}
@media (prefers-reduced-motion:reduce){
  .wf-grain{animation:none}
  .wf-round{transition:none;opacity:1;transform:none}
  .wf-cold-line{transition:opacity .3s}
  .wf-shake,.wf-flash.hit{animation:none}
}