:root{
  --bg:#0d1117; --card:#0f1720; --neon:#00e1ff; --neon2:#ff4d8b; --muted:#97a0ab;
}
*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;}
body{margin:0;background:var(--bg);color:#e6eef6;display:flex;min-height:100vh;align-items:center;justify-content:center;padding:24px;}
.container{width:760px;max-width:96%;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border-radius:12px;padding:28px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 30px rgba(0,0,0,0.6);}
header h1{font-size:30px;margin:0 0 6px;text-align:center;}
.subtitle{color:var(--muted);text-align:center;margin:0 0 18px;}
.controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:12px;}
.difficulty{display:flex;align-items:center;justify-content:center;font-size:18px;}
.diff-btn{background:transparent;border:0;color:var(--muted);font-weight:600;cursor:pointer;padding:6px 10px;border-radius:6px;transition:all .18s}
.diff-btn.active{color:var(--neon);text-shadow:0 0 12px rgba(0,225,255,0.18);}
.bar{color:#5c6a72;margin:0 8px;}
.status{text-align:center;color:var(--muted);font-size:14px;}
.board-wrap{display:flex;justify-content:center;margin:18px 0;}
.board{display:grid;grid-template-columns:repeat(3,120px);grid-template-rows:repeat(3,120px);gap:0;border:2px solid rgba(255,255,255,0.03);padding:6px;background:#0b1115;}
.cell{width:120px;height:120px;background:rgba(255,255,255,0.01);display:flex;align-items:center;justify-content:center;font-size:44px;color:#ff9fb1;cursor:pointer;border:1px solid rgba(255,255,255,0.02);transition:transform .12s, box-shadow .12s;}
.cell:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,0.6);}
.cell.x{color:#ff7090}
.cell.o{color:#ff8a8a}
.footer{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:10px;}
.message{min-height:28px;color:var(--neon);font-weight:700;text-shadow:0 0 14px rgba(0,225,255,0.08);text-align:center;}
.actions{display:flex;gap:12px;align-items:center;}
#restart{background:var(--neon);color:#041018;border:0;padding:8px 16px;border-radius:10px;cursor:pointer;font-weight:700;box-shadow:0 6px 18px rgba(0,225,255,0.12);}
.live-link{color:var(--muted);text-decoration:none;font-size:14px;}
@media (max-width:640px){.board{grid-template-columns:repeat(3,80px);grid-template-rows:repeat(3,80px)}.cell{width:80px;height:80px;font-size:32px}}