*,:before,:after{box-sizing:border-box}:root{--bg-0:#0b1020;--bg-1:#0f172a;--card:#131a2e;--card-border:#263049;--text:#e6ebf5;--muted:#9aa6c0;--accent:#6366f1;--accent-2:#22d3ee;--board:#1e40af;--board-2:#1d4ed8;--hole:#0b1020;--human:#ef4444;--human-2:#b91c1c;--ai:#facc15;--ai-2:#ca8a04;--danger:#f87171}html,body{margin:0;padding:0}body{min-height:100vh;color:var(--text);background:radial-gradient(1100px 700px at 50% -10%, #16203c 0%, transparent 60%), linear-gradient(180deg, var(--bg-1), var(--bg-0));-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.page{flex-direction:column;justify-content:center;align-items:center;gap:18px;min-height:100vh;padding:28px 16px 40px;display:flex}.game{flex-direction:column;gap:16px;width:min(92vw,460px);display:flex}.header{text-align:center}.header h1{letter-spacing:-.02em;background:linear-gradient(90deg, #fff, #c7d2fe 60%, var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(1.9rem,6vw,2.6rem)}.subtitle{color:var(--muted);margin:6px 0 0;font-size:.92rem;line-height:1.5}.chip{color:#0b1020;border-radius:999px;padding:1px 8px;font-size:.82rem;font-weight:600;display:inline-block}.chip-human{background:var(--human);color:#fff}.chip-ai{background:var(--ai)}.status{text-align:center;border:1px solid var(--card-border);background:var(--card);border-radius:12px;min-height:1.5em;padding:10px 12px;font-size:1.05rem;font-weight:600}.status-thinking{color:var(--accent-2)}.board{background:linear-gradient(160deg, var(--board-2), var(--board));-webkit-user-select:none;user-select:none;border-radius:18px;gap:clamp(4px,1.6vw,8px);padding:clamp(8px,2.6vw,14px);display:flex;box-shadow:0 20px 45px -20px #1d4ed8b3,inset 0 2px #ffffff26}.board-locked{pointer-events:none;filter:saturate(.9)brightness(.97)}.column{cursor:pointer;border-radius:12px;flex-direction:column;flex:1 1 0;gap:clamp(4px,1.6vw,8px);min-width:0;transition:background .12s;display:flex}.column:hover{background:#ffffff14}.hole{aspect-ratio:1;position:relative}.cell{border-radius:50%;transition:transform .1s;position:absolute;inset:0}.cell-empty{background:var(--hole);box-shadow:inset 0 4px 8px #0000008c,inset 0 -2px 3px #ffffff0f}.cell-human{background:radial-gradient(circle at 35% 30%, #ff8a8a, var(--human) 45%, var(--human-2));box-shadow:inset 0 -3px 6px #00000059,0 2px 4px #0006}.cell-ai{background:radial-gradient(circle at 35% 30%, #fff0a3, var(--ai) 45%, var(--ai-2));box-shadow:inset 0 -3px 6px #0000004d,0 2px 4px #0006}.cell-ghost{background:radial-gradient(circle at 35% 30%,#ff8a8a80,#ef444447);box-shadow:inset 0 0 0 2px #ef444466}.cell-drop{animation:.34s cubic-bezier(.34,1.2,.64,1) both drop}.cell-win{animation:.9s ease-in-out infinite alternate pulse;box-shadow:inset 0 0 0 3px #fff,0 0 18px #ffffffbf}@keyframes drop{0%{opacity:.6;transform:translateY(-340%)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{filter:brightness()}to{filter:brightness(1.25)}}.controls{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.btn{appearance:none;border:1px solid var(--card-border);background:var(--card);color:var(--text);cursor:pointer;border-radius:10px;padding:10px 18px;font-size:.95rem;font-weight:600;transition:transform 80ms,border-color .12s,background .12s}.btn:hover{border-color:var(--accent)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg, var(--accent), #4f46e5);color:#fff;border-color:#0000}.error{text-align:center;color:var(--danger);background:#f871711a;border:1px solid #f8717159;border-radius:10px;padding:8px 12px;font-size:.9rem}.stats{border:1px solid var(--card-border);background:var(--card);border-radius:14px;padding:16px}.stats h2{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px;font-size:.95rem;font-weight:700}.stat-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.stat-card{text-align:center;border:1px solid var(--card-border);background:linear-gradient(#6366f11f,#22d3ee0f);border-radius:10px;padding:12px 6px}.stat-value{color:#fff;font-size:clamp(1rem,4.5vw,1.35rem);font-weight:800}.stat-label{color:var(--muted);margin-top:4px;font-size:.72rem;line-height:1.2}.muted{color:var(--muted);margin:0;font-size:.9rem}.footer{text-align:center;max-width:min(92vw,460px);color:var(--muted);font-size:.78rem;line-height:1.5}@media (max-width:380px){.stat-grid{grid-template-columns:repeat(2,1fr)}}