/* ── Reset & Variables ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
    :root {
      --bg:       #080b14;
      --surface:  #0e1525;
      --border:   #1e2d50;
      --o-color:  #00d4ff;
      --o-glow:   #00d4ff88;
      --x-color:  #ff3a6e;
      --x-glow:   #ff3a6e88;
      --gold:     #ffc14d;
      --text:     #c8d8f0;
      --muted:    #4a5f80;
      --win-bg:   #131e35;
    }
 
    body {
      min-height: 100dvh;
      background: var(--bg);
      color: var(--text);
      font-family: 'Exo 2', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.4rem;
      padding: 1.5rem 1rem;
      overflow: hidden;
    }
 
    /* animated starfield background */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image:
        radial-gradient(1px 1px at 10% 20%, #ffffff22 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 10%, #ffffff18 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 70%, #ffffff14 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 85%, #ffffff20 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 55%, #ffffff16 0%, transparent 100%);
      pointer-events: none; z-index: -1;
    }
 
    /* ── Header ────────────────────────────────────────────────── */
    .title {
      font-family: 'Orbitron', sans-serif;
      font-weight: 900;
      font-size: clamp(1.6rem, 5vw, 2.6rem);
      letter-spacing: 0.2em;
      background: linear-gradient(135deg, var(--o-color) 0%, var(--gold) 50%, var(--x-color) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 18px #00d4ff55);
    }
 
    /* ── Score Panel ───────────────────────────────────────────── */
    .scoreboard {
      display: flex;
      align-items: center;
      gap: 1rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 0.7rem 1.4rem;
      width: min(420px, 90vw);
    }
    .score-card {
      flex: 1;
      text-align: center;
    }
    .score-card .player-name {
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 2px;
    }
    .score-card .player-label {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 110px;
      margin-inline: auto;
    }
    .score-card.o-card .player-label { color: var(--o-color); }
    .score-card.x-card .player-label { color: var(--x-color); }
    .score-card .score-num {
      font-family: 'Orbitron', sans-serif;
      font-size: 2rem;
      font-weight: 700;
      line-height: 1;
    }
    .score-card.o-card .score-num { color: var(--o-color); text-shadow: 0 0 14px var(--o-glow); }
    .score-card.x-card .score-num { color: var(--x-color); text-shadow: 0 0 14px var(--x-glow); }
 
    .score-divider { color: var(--muted); font-size: 1.6rem; font-weight: 300; }
 
    /* ── Status Bar ────────────────────────────────────────────── */
    .status {
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      color: var(--text);
      height: 1.4em;
      text-align: center;
      transition: color 0.3s;
    }
    .status span { font-weight: 600; }
    .status .o-name { color: var(--o-color); }
    .status .x-name { color: var(--x-color); }
 
    /* ── Grid ──────────────────────────────────────────────────── */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: 18px;
      padding: 14px;
      width: min(340px, 88vw);
      box-shadow: 0 0 40px #00d4ff0d, 0 0 80px #00000066;
    }
 
    .cell {
      aspect-ratio: 1;
      background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      font-family: 'Orbitron', sans-serif;
      font-weight: 700;
      font-size: clamp(2rem, 8vw, 3rem);
      cursor: pointer;
      color: transparent;
      transition: background 0.18s, transform 0.12s, border-color 0.2s, box-shadow 0.2s;
      display: flex; align-items: center; justify-content: center;
      user-select: none;
      position: relative;
      overflow: hidden;
    }
    .cell::after {
      content: '';
      position: absolute; inset: 0;
      border-radius: inherit;
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
    }
    .cell:not(:disabled):hover {
      background: #131e35;
      border-color: #2e4470;
      transform: scale(0.96);
    }
 
    .cell.o {
      color: var(--o-color);
      border-color: #00d4ff55;
      box-shadow: inset 0 0 16px #00d4ff22;
      animation: popIn 0.22s cubic-bezier(.17,.67,.48,1.4);
    }
    .cell.x {
      color: var(--x-color);
      border-color: #ff3a6e55;
      box-shadow: inset 0 0 16px #ff3a6e22;
      animation: popIn 0.22s cubic-bezier(.17,.67,.48,1.4);
    }
    .cell.win {
      border-color: var(--gold) !important;
      box-shadow: 0 0 22px var(--gold), inset 0 0 22px #ffc14d33 !important;
      animation: pulse 1s ease-in-out infinite;
    }
    .cell:disabled { cursor: default; }
 
    @keyframes popIn {
      0%   { transform: scale(0.5); opacity: 0; }
      100% { transform: scale(1);   opacity: 1; }
    }
    @keyframes pulse {
      0%,100% { box-shadow: 0 0 14px var(--gold), inset 0 0 14px #ffc14d22; }
      50%      { box-shadow: 0 0 32px var(--gold), inset 0 0 32px #ffc14d44; }
    }
 
    /* ── Buttons ───────────────────────────────────────────────── */
    .controls {
      display: flex;
      gap: 1rem;
    }
    .btn {
      font-family: 'Orbitron', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 0.65rem 1.4rem;
      border-radius: 8px;
      border: 1.5px solid transparent;
      cursor: pointer;
      transition: transform 0.12s, box-shadow 0.18s, background 0.18s;
    }
    .btn:active { transform: scale(0.95); }
 
    .btn-reset {
      background: transparent;
      border-color: var(--muted);
      color: var(--muted);
    }
    .btn-reset:hover {
      border-color: var(--text);
      color: var(--text);
      box-shadow: 0 0 14px #4a5f8044;
    }
 
    .btn-new {
      background: linear-gradient(135deg, var(--o-color), #0080ff);
      border-color: transparent;
      color: #000;
      box-shadow: 0 0 18px var(--o-glow);
    }
    .btn-new:hover {
      box-shadow: 0 0 28px var(--o-glow);
      transform: translateY(-1px);
    }
 
    /* ── Win Overlay ───────────────────────────────────────────── */
    .overlay {
      position: fixed; inset: 0;
      background: #00000099;
      display: flex; align-items: center; justify-content: center;
      z-index: 100;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s;
    }
    .overlay.show { opacity: 1; pointer-events: all; }
 
    .overlay-card {
      background: var(--win-bg);
      border: 1.5px solid var(--border);
      border-radius: 20px;
      padding: 2.5rem 2.8rem;
      text-align: center;
      max-width: 340px;
      width: 90%;
      box-shadow: 0 0 60px #00000088, 0 0 30px #00d4ff22;
      transform: scale(0.85);
      transition: transform 0.3s cubic-bezier(.17,.67,.3,1.3);
    }
    .overlay.show .overlay-card { transform: scale(1); }
 
    .overlay-emoji { font-size: 3.5rem; margin-bottom: 0.4rem; }
    .overlay-title {
      font-family: 'Orbitron', sans-serif;
      font-size: 1rem;
      letter-spacing: 0.18em;
      color: var(--muted);
      margin-bottom: 0.4rem;
      text-transform: uppercase;
    }
    .overlay-name {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.9rem;
      font-weight: 900;
      margin-bottom: 1.6rem;
    }
    .overlay-name.o-win { color: var(--o-color); text-shadow: 0 0 20px var(--o-glow); }
    .overlay-name.x-win { color: var(--x-color); text-shadow: 0 0 20px var(--x-glow); }
    .overlay-name.draw  { color: var(--gold);    text-shadow: 0 0 20px #ffc14d88; }
 
    .overlay-btns { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }