@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap";:root{--bg-0: #05070f;--bg-1: #0a0f1f;--panel: rgba(14, 20, 38, .72);--panel-line: rgba(120, 160, 255, .14);--ink: #e8edff;--ink-dim: #8a96c4;--human: #ffb02e;--human-glow: rgba(255, 176, 46, .55);--ai: #2de2e6;--ai-glow: rgba(45, 226, 230, .55);--danger: #ff3b6b;--display: "Chakra Petch", sans-serif;--mono: "IBM Plex Mono", monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--mono);color:var(--ink);background:radial-gradient(120% 80% at 20% -10%,rgba(255,176,46,.12),transparent 55%),radial-gradient(120% 80% at 80% -10%,rgba(45,226,230,.12),transparent 55%),radial-gradient(100% 100% at 50% 120%,rgba(60,80,180,.1),transparent 60%),linear-gradient(180deg,var(--bg-1),var(--bg-0));background-attachment:fixed;overflow-x:hidden}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0px,rgba(255,255,255,.025) 1px,transparent 2px,transparent 3px);mix-blend-mode:overlay;opacity:.5}h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:.04em;margin:0}button{font-family:var(--display);cursor:pointer}.app{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 18px 40px}.brand{text-align:center;font-family:var(--display);font-weight:700;font-size:clamp(40px,9vw,88px);line-height:1;letter-spacing:.3em;text-transform:uppercase;margin-bottom:18px;background:linear-gradient(90deg,var(--human),var(--ai));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 32px rgba(120,160,255,.25)}.title{text-align:center;margin-bottom:28px}.title h1{font-size:clamp(28px,5vw,54px);line-height:1;text-transform:uppercase;letter-spacing:.12em}.title .h-word{color:var(--human);text-shadow:0 0 24px var(--human-glow)}.title .a-word{color:var(--ai);text-shadow:0 0 24px var(--ai-glow)}.title .vs{color:var(--ink-dim);margin:0 .35em;font-weight:400}.title p{margin-top:12px;color:var(--ink-dim);font-size:13px;letter-spacing:.18em;text-transform:uppercase}.select-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,240px));gap:20px;margin-top:10px}.agent-card{position:relative;background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;padding:26px 22px 24px;text-align:left;color:var(--ink);overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.agent-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 80% at 50% 0%,var(--accent-glow),transparent 60%);opacity:.4}.agent-card>*{position:relative}.agent-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 18px 40px -18px var(--accent-glow)}.agent-card .diff{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}.agent-card h3{font-size:30px;margin:8px 0 10px;color:var(--accent);text-shadow:0 0 18px var(--accent-glow)}.agent-card p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-dim)}.agent-card .play{margin-top:18px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);opacity:.85}.gh-link{display:flex;width:fit-content;align-items:center;gap:8px;margin:34px auto 0;padding:9px 18px;border:1px solid var(--panel-line);border-radius:999px;background:var(--panel);color:var(--ink-dim);font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}.gh-link:hover{color:var(--ink);border-color:var(--ai);box-shadow:0 0 24px -6px var(--ai-glow);transform:translateY(-2px)}.arena{display:flex;gap:clamp(16px,4vw,56px);align-items:flex-start;justify-content:center}.side{--accent: var(--human);--accent-glow: var(--human-glow)}.side.ai{--accent: var(--ai);--accent-glow: var(--ai-glow)}.side-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}.side-head .who{font-family:var(--display);font-size:22px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 16px var(--accent-glow)}.side-head .tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}.board-wrap{position:relative;padding:10px;border-radius:14px;background:var(--panel);border:1px solid var(--panel-line);box-shadow:inset 0 0 40px #00000080,0 0 0 1px #0006,0 24px 60px -30px var(--accent-glow)}.board-wrap.flash{animation:flash .32s ease}@keyframes flash{0%{box-shadow:0 0 0 2px var(--accent),0 0 60px var(--accent-glow)}to{box-shadow:inset 0 0 40px #00000080,0 24px 60px -30px var(--accent-glow)}}.board-wrap.dead{animation:shake .4s ease}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}.hud{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hud .cell{background:#080c1899;border:1px solid var(--panel-line);border-radius:10px;padding:10px 12px}.hud .cell .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}.hud .cell .v{font-family:var(--display);font-size:24px;font-weight:600;color:var(--accent)}.center-col{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:46px}.next-panel{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 20px 18px;border-radius:16px;background:var(--panel);border:1px solid var(--panel-line);box-shadow:0 20px 50px -28px #000000e6}.next-panel .k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}.next-panel .frame{position:relative;padding:6px;border-radius:10px;background:linear-gradient(180deg,#ffb02e0f,#2de2e60f);border:1px solid var(--panel-line)}.next-panel .arrow{font-size:18px;color:var(--ink-dim);line-height:.6}.hint-toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}.hint-toggle input{position:absolute;opacity:0;pointer-events:none}.hint-toggle .box{width:16px;height:16px;border-radius:5px;border:1px solid var(--ai);display:grid;place-items:center;transition:background .15s ease,box-shadow .15s ease}.hint-toggle input:checked+.box{background:var(--ai);box-shadow:0 0 12px var(--ai-glow)}.hint-toggle .box:after{content:"✓";font-size:11px;color:var(--bg-0);opacity:0;transition:opacity .15s ease}.hint-toggle input:checked+.box:after{opacity:1}.hint-toggle:hover{color:var(--ink)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#03050cb8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.overlay.pause{background:#03050c8c;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.pause-controls{display:flex;justify-content:center;margin:20px 0 22px}.result{text-align:center;background:var(--panel);border:1px solid var(--panel-line);border-radius:20px;padding:40px 48px;box-shadow:0 30px 80px -30px #000000e6}.result .verdict{font-size:clamp(34px,6vw,60px);text-transform:uppercase;letter-spacing:.08em}.result .verdict.win{color:var(--human);text-shadow:0 0 30px var(--human-glow)}.result .verdict.lose{color:var(--ai);text-shadow:0 0 30px var(--ai-glow)}.result .verdict.draw{color:var(--ink)}.result .stats{margin:18px 0 26px;color:var(--ink-dim);font-size:14px;letter-spacing:.06em}.result .stats b{color:var(--ink)}.btn{border:1px solid var(--ink);background:transparent;color:var(--ink);padding:12px 26px;border-radius:10px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;transition:background .16s ease,color .16s ease,transform .16s ease}.btn:hover{background:var(--ink);color:var(--bg-0);transform:translateY(-2px)}.btn.ghost{border-color:var(--panel-line);color:var(--ink-dim);margin-left:12px}.hint{margin-top:22px;color:var(--ink-dim);font-size:12px;letter-spacing:.14em;text-align:center}.hint kbd{font-family:var(--mono);background:#ffffff0f;border:1px solid var(--panel-line);border-radius:5px;padding:1px 7px;margin:0 2px;color:var(--ink)}@media (max-width: 900px){.select-grid{grid-template-columns:1fr}}@media (max-width: 640px){.arena{flex-direction:column;align-items:center}}