/* Shared Arcade base, scoped to .tdg-ww. Same look as the other TDG Arcade games: navy panel, Bricolage title, mono stats, yellow buttons. */
.tdg-ww{
  --hm-navy:#14224A;--hm-panel:#1B2D57;--hm-panel-2:#22386B;--hm-blue:#3E62AE;--hm-yellow:#FBC012;
  --hm-ink:#F3F6FC;--hm-muted:#A9B6D3;--hm-line:#2F4680;--hm-ok:#4CC38A;--hm-bad:#F0605D;
  --hm-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --hm-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hm-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  container-type:inline-size;color-scheme:dark;position:relative;overflow:hidden;
  background:radial-gradient(60% 50% at 85% 0%,rgba(62,98,174,.45),transparent 70%),radial-gradient(40% 35% at 0% 100%,rgba(251,192,18,.12),transparent 70%),var(--hm-navy);
  color:var(--hm-ink);font-family:var(--hm-body);font-size:15px;line-height:1.5;border-radius:18px;padding:clamp(16px,3.4cqi,32px);display:grid;gap:22px;margin:0 0 24px;text-align:left
}
.tdg-ww *,.tdg-ww *::before,.tdg-ww *::after{box-sizing:border-box}
.tdg-ww p{margin:0;color:inherit;font-size:inherit;line-height:inherit}
.tdg-ww ul,.tdg-ww ol{margin:0;padding:0;list-style:none}
.tdg-ww [hidden]{display:none!important}
.tdg-ww a{color:var(--hm-yellow)}
.tdg-ww .tdg-hm-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.tdg-ww .tdg-hm-eyebrow{font-family:var(--hm-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-yellow);margin-bottom:4px}
.tdg-ww .tdg-hm-title{font-family:var(--hm-display);font-weight:800;font-size:clamp(34px,7cqi,58px);line-height:.95;letter-spacing:-.015em;color:var(--hm-ink)}
.tdg-ww .tdg-hm-title span{color:var(--hm-yellow)}
.tdg-ww .tdg-hm-sub{color:var(--hm-muted);margin-top:10px;max-width:56ch}
.tdg-ww .tdg-hm-stats{display:flex;gap:8px}
.tdg-ww .tdg-hm-stat{background:rgba(27,45,87,.8);border:1px solid var(--hm-line);border-radius:12px;padding:8px 12px;min-width:76px}
.tdg-ww .tdg-hm-stat b{display:block;font-family:var(--hm-mono);font-size:22px;font-variant-numeric:tabular-nums;color:var(--hm-ink)}
.tdg-ww .tdg-hm-stat small{color:var(--hm-muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.tdg-ww button.tdg-hm-btn{appearance:none;margin:0;box-shadow:none;text-shadow:none;text-transform:none;letter-spacing:normal;line-height:1.2;font-family:var(--hm-body);font-weight:600;font-size:14px;border-radius:8px;padding:10px 16px;border:1px solid var(--hm-line);background:var(--hm-panel-2);color:var(--hm-ink);cursor:pointer}
.tdg-ww button.tdg-hm-btn:hover:not(:disabled){border-color:var(--hm-blue)}
.tdg-ww button.tdg-hm-btn.tdg-hm-primary{background:var(--hm-yellow);border-color:var(--hm-yellow);color:var(--hm-navy)}
.tdg-ww button.tdg-hm-btn.tdg-hm-primary:hover:not(:disabled){background:#ffd04d}
.tdg-ww button.tdg-hm-btn:disabled{opacity:.45;cursor:default}
.tdg-ww button.tdg-hm-btn:focus-visible{outline:2px solid var(--hm-yellow);outline-offset:2px}
.tdg-ww .tdg-hm-result{border-radius:14px;padding:18px;display:grid;gap:12px;border:1px solid var(--hm-line);background:var(--hm-panel)}
.tdg-ww .tdg-hm-result-h{font-family:var(--hm-display);font-weight:800;font-size:26px;line-height:1.1}
.tdg-ww .tdg-hm-result.is-win{border-color:var(--hm-ok)}
.tdg-ww .tdg-hm-result.is-win .tdg-hm-result-h{color:var(--hm-ok)}
.tdg-ww .tdg-hm-result.is-lose{border-color:var(--hm-bad)}
.tdg-ww .tdg-hm-result.is-lose .tdg-hm-result-h{color:var(--hm-bad)}
.tdg-ww .tdg-hm-actions{display:flex;flex-wrap:wrap;gap:10px}
.tdg-ww .tdg-hm-foot{color:var(--hm-muted);font-size:13px;border-top:1px solid var(--hm-line);padding-top:12px}
@media (prefers-reduced-motion:reduce){.tdg-ww *{animation:none!important;transition:none!important}}
/* Which Wins? A fighting-game "VS" screen. Two policies square up; you call the winner. */
.tdg-ww{--px:"Press Start 2P",var(--hm-mono);--p1:#22C1D6;--p2:#FF3FB4;--gold:#FBC012}
.tdg-ww .ww-stage{position:relative;border-radius:14px;overflow:hidden;min-height:clamp(440px,60cqi,560px);background:
  radial-gradient(80% 60% at 50% 110%,rgba(255,63,180,.35),transparent 60%),
  radial-gradient(60% 50% at 50% -10%,rgba(34,193,214,.25),transparent 60%),
  linear-gradient(180deg,#0b0f2c,#1a0f3d);box-shadow:inset 0 0 0 2px rgba(255,255,255,.06);padding:clamp(12px,2.4cqi,22px);display:grid;gap:clamp(10px,2cqi,16px);align-content:start}
.tdg-ww .ww-stage::before{content:"";position:absolute;left:-50%;right:-50%;bottom:0;height:42%;background:repeating-linear-gradient(90deg,rgba(34,230,255,.35) 0 2px,transparent 2px 60px),repeating-linear-gradient(0deg,rgba(34,230,255,.35) 0 2px,transparent 2px 28px);transform:perspective(240px) rotateX(60deg);transform-origin:top;-webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%);opacity:.5;pointer-events:none}
.tdg-ww .ww-stage > *{position:relative;z-index:1}

/* HUD */
.tdg-ww .ww-hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.tdg-ww .ww-hp{height:14px;border-radius:3px;background:#2a1530;border:2px solid #fff;box-shadow:0 0 10px rgba(255,255,255,.25);overflow:hidden;position:relative}
.tdg-ww .ww-hp i{position:absolute;inset:0;background:linear-gradient(180deg,#ffe066,#f2b10a);transform-origin:right;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tdg-ww .ww-hp.p2 i{transform-origin:left}
.tdg-ww .ww-hp.is-ko i{transform:scaleX(0)}
.tdg-ww .ww-mid{display:grid;justify-items:center;gap:2px;font-family:var(--px);color:#fff;text-shadow:0 0 8px rgba(255,255,255,.4)}
.tdg-ww .ww-timer{font-size:clamp(20px,4cqi,30px);color:var(--gold);text-shadow:0 0 10px rgba(251,192,18,.6),3px 3px 0 #8a4a00}
.tdg-ww .ww-timer.is-low{color:#ff5d5d;text-shadow:0 0 10px rgba(255,93,93,.7),3px 3px 0 #6b0000;animation:ww-pulse .5s infinite alternate}
.tdg-ww .ww-round{font-size:9px;color:var(--p1)}
.tdg-ww .ww-names{display:flex;justify-content:space-between;font-family:var(--px);font-size:9px;margin-top:-6px}
.tdg-ww .ww-names span:first-child{color:var(--p1)}
.tdg-ww .ww-names span:last-child{color:var(--p2)}

/* Scenario */
.tdg-ww .ww-scn{text-align:center;display:grid;gap:6px;justify-items:center}
.tdg-ww .ww-cat{font-family:var(--px);font-size:9px;letter-spacing:1px;color:#0b0f2c;background:var(--gold);padding:6px 8px;box-shadow:3px 3px 0 #8a4a00}
.tdg-ww .ww-q{font-family:var(--hm-body);font-weight:700;font-size:clamp(15px,2.3cqi,19px);line-height:1.35;color:#fff;max-width:62ch}

/* Fighters */
.tdg-ww .ww-ring{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(8px,2cqi,18px)}
.tdg-ww button.ww-f{appearance:none;margin:0;font:inherit;text-align:left;cursor:pointer;color:#fff;border-radius:12px;padding:clamp(12px,2cqi,18px);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:2px solid var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent),0 0 26px color-mix(in srgb,var(--c) 35%,transparent);display:grid;gap:8px;position:relative;min-height:150px;align-content:start;transition:transform .15s,box-shadow .15s,filter .3s,opacity .3s}
.tdg-ww button.ww-f.p1{--c:var(--p1);animation:ww-in-l .45s cubic-bezier(.2,1.2,.4,1)}
.tdg-ww button.ww-f.p2{--c:var(--p2);animation:ww-in-r .45s cubic-bezier(.2,1.2,.4,1)}
.tdg-ww button.ww-f:hover:not(:disabled){transform:translateY(-4px) scale(1.02);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent),0 0 40px color-mix(in srgb,var(--c) 55%,transparent)}
.tdg-ww button.ww-f:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.tdg-ww button.ww-f:disabled{cursor:default}
.tdg-ww .ww-tag{font-family:var(--px);font-size:8px;line-height:1.5;color:var(--c)}
.tdg-ww .ww-fn{font-family:var(--hm-display);font-weight:800;font-size:clamp(18px,2.8cqi,24px);line-height:1.1}
.tdg-ww .ww-fv{justify-self:start;font-family:var(--hm-mono);font-size:13px;font-weight:700;padding:5px 9px;border-radius:6px;background:rgba(0,0,0,.35);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);color:#fff}
.tdg-ww .ww-fd{font-size:13px;color:#c9cdea;line-height:1.4}
.tdg-ww .ww-pick{position:absolute;right:10px;top:10px;font-family:var(--px);font-size:8px;color:var(--c);opacity:.8}
.tdg-ww .ww-vs{font-family:var(--px);font-size:clamp(22px,4.4cqi,38px);color:#fff;text-shadow:0 0 12px var(--p2),0 0 24px var(--p2),3px 3px 0 #5b1a8a;animation:ww-vs 1.6s ease-in-out infinite}
.tdg-ww button.ww-draw{appearance:none;margin:0 auto;font-family:var(--px);font-size:10px;line-height:1.4;padding:12px 16px;border-radius:8px;cursor:pointer;color:#fff;background:rgba(255,255,255,.06);border:2px dashed rgba(255,255,255,.45);max-width:100%}
.tdg-ww button.ww-draw:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.tdg-ww button.ww-draw:disabled{cursor:default}
.tdg-ww button.ww-draw.is-right{border-style:solid;border-color:var(--hm-ok);color:var(--hm-ok)}

/* Outcomes */
.tdg-ww .ww-f.is-win{filter:none;transform:scale(1.04);box-shadow:0 0 0 4px rgba(251,192,18,.5),0 0 50px rgba(251,192,18,.6)}
.tdg-ww .ww-f.is-lose{filter:grayscale(1) brightness(.6);transform:rotate(-2deg)}
.tdg-ww .ww-f.p2.is-lose{transform:rotate(2deg)}
.tdg-ww .ww-stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);font-family:var(--px);font-size:clamp(16px,3cqi,24px);padding:8px 10px;border:3px solid currentColor;border-radius:6px;background:rgba(0,0,0,.55);white-space:nowrap;animation:ww-stamp .35s cubic-bezier(.2,1.6,.4,1)}
.tdg-ww .ww-stamp.win{color:var(--gold)}
.tdg-ww .ww-stamp.ko{color:#ff5d5d}
.tdg-ww .ww-stamp.draw{color:#c9cdea;font-size:clamp(12px,2.2cqi,16px)}
.tdg-ww .ww-flash{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;font-family:var(--px);font-size:clamp(34px,8cqi,72px);color:#fff;text-shadow:0 0 18px var(--p2),6px 6px 0 #5b1a8a;animation:ww-flash .9s forwards}
.tdg-ww .ww-flash.ok{text-shadow:0 0 18px var(--hm-ok),6px 6px 0 #0e5a36}
.tdg-ww .ww-flash.bad{text-shadow:0 0 18px #ff5d5d,6px 6px 0 #6b0000}

/* Verdict */
.tdg-ww .ww-verdict{border-radius:12px;padding:14px 16px;background:rgba(8,10,30,.88);border:1px solid rgba(255,255,255,.14);border-left:5px solid var(--hm-ok);display:grid;gap:8px;animation:ww-up .3s ease-out}
.tdg-ww .ww-verdict.is-bad{border-left-color:#ff5d5d}
.tdg-ww .ww-verdict h4{margin:0;font-family:var(--hm-display);font-weight:800;font-size:20px;color:#fff;letter-spacing:0}
.tdg-ww .ww-verdict h4 small{font-family:var(--hm-mono);font-size:12px;font-weight:700;color:var(--gold);margin-left:8px}
.tdg-ww .ww-verdict p{font-size:14px;color:#d6daf2}
.tdg-ww .ww-verdict .ww-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.tdg-ww .ww-verdict a{font-size:13px;font-weight:600;color:var(--gold)}

/* Title + end overlay */
.tdg-ww .ww-over{display:grid;gap:14px;justify-items:center;text-align:center;padding:clamp(20px,5cqi,48px) 10px}
.tdg-ww .ww-big{font-family:var(--px);font-size:clamp(26px,6cqi,54px);line-height:1.15;color:#fff;text-shadow:0 0 6px #fff,0 0 18px var(--p2),0 0 36px var(--p2),4px 4px 0 #5b1a8a}
.tdg-ww .ww-big span{color:var(--gold);text-shadow:0 0 18px var(--gold),4px 4px 0 #8a4a00}
.tdg-ww .ww-lead{color:#c9cdea;max-width:52ch;font-size:15px}
.tdg-ww .ww-blink{font-family:var(--px);font-size:11px;color:var(--gold);animation:ww-blink 1.1s steps(2,start) infinite}
.tdg-ww .ww-rank{font-family:var(--px);font-size:clamp(12px,2.4cqi,16px);color:var(--p1);text-shadow:0 0 10px rgba(34,193,214,.6)}
.tdg-ww .ww-score{font-family:var(--hm-mono);font-size:15px;color:#fff}
.tdg-ww .ww-log{width:100%;max-width:640px;display:grid;gap:6px;text-align:left}
.tdg-ww .ww-log li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13.5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 10px;color:#d6daf2}
.tdg-ww .ww-log li b{font-family:var(--hm-mono)}
.tdg-ww .ww-log li .y{color:var(--hm-ok)}
.tdg-ww .ww-log li .n{color:#ff5d5d}
.tdg-ww .ww-log li span{display:block}
.tdg-ww .ww-log li small{display:block;color:#9aa0c8;margin-top:2px}

@keyframes ww-in-l{from{opacity:0;transform:translateX(-60px)}}
@keyframes ww-in-r{from{opacity:0;transform:translateX(60px)}}
@keyframes ww-vs{50%{transform:scale(1.12)}}
@keyframes ww-pulse{to{transform:scale(1.15)}}
@keyframes ww-stamp{from{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(2.4)}}
@keyframes ww-flash{0%{opacity:0;transform:scale(2)}20%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(.9)}}
@keyframes ww-up{from{opacity:0;transform:translateY(10px)}}
@keyframes ww-blink{to{visibility:hidden}}

@container (max-width:640px){
  .tdg-ww .ww-ring{grid-template-columns:1fr;gap:10px}
  .tdg-ww .ww-vs{justify-self:center;font-size:20px;margin:-4px 0}
  .tdg-ww button.ww-f{min-height:0}
  .tdg-ww .ww-names{font-size:8px}
}