:root{--bg: #0c0f16;--panel: #161b27;--line: #283143;--ink: #eaf0fb;--dim: #94a3c0;--accent: #f0a23b;--order: #5cc8ff;--chaos: #ff6b8b;--board: #1a2030}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(900px 560px at 50% -8%,#182033,var(--bg));color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}#app{width:100%;max-width:540px;padding:12px 12px 26px}header{text-align:center;margin-bottom:6px}h1{margin:0;font-size:25px;letter-spacing:3px;font-weight:800;color:var(--accent)}.sub{margin:4px 0 0;color:var(--dim);font-size:13px}.sub b{color:var(--ink)}.bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;margin:8px 0}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{background:none;border:none;color:var(--dim);padding:6px 13px;font:600 13px system-ui;cursor:pointer}.seg button.active{background:var(--accent);color:#1a1206}.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:7px 14px;border-radius:999px;font:700 13px system-ui;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:#1a1206;border-color:var(--accent)}.status{text-align:center;min-height:20px;color:var(--dim);font-size:13px;font-weight:600;margin:6px 0}.stage{position:relative;display:flex;justify-content:center}.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:100%;max-width:480px;aspect-ratio:1 / 1;background:var(--board);padding:10px;border-radius:12px;box-shadow:0 12px 34px #0000008c}.cell{background:#222a3c;border:1px solid #2e3850;border-radius:8px;color:var(--ink);font:800 clamp(20px,7vw,40px)/1 system-ui;display:flex;align-items:center;justify-content:center;cursor:default;padding:0;transition:background .1s,transform .05s}.cell.playable{cursor:pointer}.cell.playable:hover{background:#2c3650}.cell.x{color:var(--order)}.cell.o{color:var(--chaos)}.cell.last{box-shadow:inset 0 0 0 2px var(--accent)}.cell.sel{background:#34406040;box-shadow:inset 0 0 0 2px var(--accent)}.cell.win{background:#2a3a2c;box-shadow:inset 0 0 0 2px #4cd07a;animation:pulse .8s ease-in-out infinite alternate}@keyframes pulse{0%{filter:brightness(1)}to{filter:brightness(1.5)}}.pick{display:flex;gap:4px}.pk{font:800 clamp(13px,4vw,22px)/1 system-ui;padding:4px 7px;border-radius:6px;background:#11161f;border:1px solid #3a465e;cursor:pointer}.pk[data-s=x]{color:var(--order)}.pk[data-s=o]{color:var(--chaos)}.pk:hover{border-color:var(--accent);background:#1a2230}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#060910bd;border-radius:12px;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 26px;text-align:center;max-width:340px}.card h2{margin:0 0 6px;font-size:24px;color:var(--accent)}.card p{margin:6px 0;color:var(--dim);font-size:14px}.card .row{display:flex;gap:8px;justify-content:center;margin-top:14px}.hint{text-align:center;color:var(--dim);font-size:12px;margin-top:12px}.hint b{color:var(--ink)}