:root{
  --bg: #111827;
  --card: #1f2937;
  --border: #374151;
  --text: #f9fafb;
  --muted: #9ca3af;
  --primary: #3b82f6;
  --success: #10b981;
  --danger: #ef4444;
}
*{box-sizing:border-box}
.body{margin:0}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;min-height:100vh;padding-top:60px;display:flex;flex-direction:column}
.container{width:min(94vw,720px);margin:0 auto;padding:12px;flex:1}
.panel{background:var(--card);border:2px solid var(--border);border-radius:16px;box-shadow:0 10px 20px rgba(0,0,0,.18);padding:16px;max-width:720px;margin:0 auto}
.title{margin:2px 0 12px;font-size:clamp(20px,5vw,28px);font-weight:800;letter-spacing:-.02em}
.setup-card{margin:6px 0 14px;padding:14px;background:#0f172a;border:2px solid var(--border);border-radius:14px}
.setup-title{margin:0 0 10px;font-size:16px;color:#cbd5e1;letter-spacing:.3px}
.group{margin-bottom:10px}
.group-label{display:block;color:#94a3b8;font-size:13px;margin:0 0 6px}
.segmented{display:flex;gap:8px;flex-wrap:wrap}
.seg-btn{border:2px solid var(--border);background:#111827;color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:700}
.seg-btn.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.actions{display:flex;justify-content:flex-end}
.btn-start{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 22px rgba(16,185,129,.25)}
.btn-start:hover{transform:translateY(-1px)}
.ai-only.hidden{display:none}
.mode-btn{border:2px solid var(--border);background:#111827;color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:700}
.mode-btn.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.options{display:flex;gap:12px;margin:8px 0 10px}
.option{display:flex;align-items:center;gap:8px;color:var(--muted)}
.option select{background:var(--card);color:var(--text);border:2px solid var(--border);border-radius:8px;padding:6px 10px}
.status{margin:6px 0 12px;font-weight:800;letter-spacing:.2px}
.status{display:inline-flex;align-items:center;gap:8px;background:#0f172a;border:2px solid var(--border);border-radius:999px;padding:8px 12px}
.status .badge{display:inline-block;min-width:22px;height:22px;border-radius:50%;font-size:13px;line-height:22px;text-align:center;color:#fff;font-weight:900}
.status.turn-x{color:#cbd5e1;border-color:#3b82f6}
.status.turn-x .badge{background:#3b82f6}
.status.turn-o{color:#cbd5e1;border-color:#8b5cf6}
.status.turn-o .badge{background:#8b5cf6}

.result-banner{margin:12px 0 0;padding:10px 14px;border-radius:12px;border:2px solid var(--border);font-weight:800;text-align:center}
.result-banner.win{background:rgba(16,185,129,.15);border-color:#10b981;color:#d1fae5}
.result-banner.draw{background:rgba(148,163,184,.15);border-color:#64748b;color:#e2e8f0}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,2.2vw,10px);background:var(--bg);padding:clamp(6px,2vw,10px);border-radius:12px;width:clamp(240px,88vw,420px);margin:0 auto}
.cell{position:relative;aspect-ratio:1;border:2px solid var(--border);border-radius:12px;background:linear-gradient(180deg,#0f172a,#0b1220);display:flex;align-items:center;justify-content:center;font-size:clamp(26px,9vw,44px);font-weight:900;color:#fff;cursor:pointer;user-select:none;transition:transform .08s ease, box-shadow .2s}
.cell:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.cell.disabled{pointer-events:none;opacity:.9}
.cell.win{background:linear-gradient(135deg, rgba(16,185,129,.25), rgba(59,130,246,.25));border-color:var(--success)}
.controls{margin-top:12px;display:flex;gap:8px;justify-content:center}
.btn{background:var(--primary);color:#fff;border:none;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer}
.btn-restart{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 8px 22px rgba(37,99,235,.25)}
.btn-restart:hover{filter:none;transform:translateY(-1px)}
.btn:hover{filter:brightness(1.05)}
.hidden{display:none!important}
@media(max-width:480px){.title{font-size:20px}}
.ingame-toolbar{display:flex;align-items:center;gap:10px;margin:6px 0 10px}
.ingame-toolbar .badge{background:#334155;color:#e2e8f0;border:1px solid #475569;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800}
.ingame-opt{display:inline-flex;align-items:center;gap:6px}
.ingame-opt select{background:#0f172a;color:#e5e7eb;border:2px solid var(--border);border-radius:8px;padding:6px 8px}
.link-btn{background:transparent;color:#93c5fd;border:0;cursor:pointer;text-decoration:underline;padding:6px 8px}