:root{
      --bg: #0b1020;
      --panel: #121936;
      --muted: #93a0b5;
      --text: #e6ecff;
      --primary: #7aa2ff;
      --accent: #7ff1d2;
      --danger: #ff7a90;
      --win: #00d3a7;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
    }
    .light{
      --bg: #f5f7fb;
      --panel: #ffffff;
      --muted: #5b6577;
      --text: #0a0e18;
      --primary: #335cff;
      --accent: #00a387;
      --danger: #d11a3a;
      --win: #0ea76a;
      --shadow: 0 8px 28px rgba(10,14,24,.08);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: radial-gradient(1200px 800px at 80% -10%, #193b84 0%, transparent 40%),
                  radial-gradient(900px 700px at -10% 120%, #0e4741 0%, transparent 40%),
                  var(--bg);
      color: var(--text);
      display:flex; align-items:center; justify-content:center;
      padding: 24px;
    }

    .app{width: min(920px, 100%);}
    .card{
      background: var(--panel);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: clamp(16px, 2.5vw, 28px);
      border: 1px solid rgba(255,255,255,.06);
    }

    header{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
    h1{font-size: clamp(20px, 3.6vw, 34px); margin:0; letter-spacing:.3px}
    .sub{color: var(--muted); font-size: 14px}

    .controls{display:flex; gap: 10px; align-items:center; flex-wrap:wrap}
    .select, button{ border-radius: 12px; border:1px solid rgba(255,255,255,.08); background:#0000; color:var(--text);}
    .select{padding:10px 12px; background: rgba(255,255,255,.04)}
    .select select{background:#0000; border:none; color:var(--text); font-weight:600}
    .select label{font-size:12px; color:var(--muted); margin-right:8px}

    .btn{padding:10px 14px; font-weight:700; cursor:pointer; transition:.15s transform ease,
      .2s background ease, .2s border ease; backdrop-filter: blur(6px)}
    .btn:hover{transform: translateY(-1px)}
    .btn:active{transform: translateY(0)}
    .btn-primary{background: linear-gradient(180deg, rgba(122,162,255,.18), rgba(122,162,255,.08)); border-color: rgba(122,162,255,.35)}
    .btn-ghost{background: rgba(255,255,255,.04)}
    .btn-danger{background: linear-gradient(180deg, rgba(255,122,144,.18), rgba(255,122,144,.08)); border-color: rgba(255,122,144,.35)}

    .layout{display:grid; grid-template-columns: 1fr min(440px, 90vw); gap: 16px; margin-top:16px}
    @media (max-width: 860px){ .layout{grid-template-columns: 1fr} }

    .panel{display:flex; flex-direction:column; gap: 14px}

    /* Board */
    .board{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px }
    .cell{
      aspect-ratio:1/1; border-radius: 16px; background: rgba(255,255,255,.03);
      display:grid; place-items:center; font-size: clamp(42px, 8vw, 64px); font-weight: 900;
      cursor:pointer; user-select:none; border:1px solid rgba(255,255,255,.06);
      transition: background .15s ease, transform .1s ease, border-color .2s ease;
      position:relative; outline:none;
    }
    .cell:before{content:""; position:absolute; inset:0; border-radius: inherit; box-shadow: inset 0 0 0 0 rgba(122,162,255,.0); transition: .25s}
    .cell:hover{ background: rgba(255,255,255,.06)}
    .cell:focus-visible{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(122,162,255,.25)}

    .cell.X{ color: var(--primary)}
    .cell.O{ color: var(--accent)}
    .cell.winning{ animation: glow 1.2s ease-in-out infinite alternate; border-color: var(--win)}
    @keyframes glow{ to { box-shadow: 0 0 0 6px rgba(0, 211, 167, .18) } }

    .status{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
    .status .badge{ font-weight:900; letter-spacing:.6px; padding:6px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.1)}
    .badge.X{ color: var(--primary); background: rgba(122,162,255,.12)}
    .badge.O{ color: var(--accent); background: rgba(127,241,210,.12)}

    /* Score */
    .score{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
    .score .tile{ padding:14px; border-radius: 14px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); text-align:center }
    .tile h3{ margin:0; font-size:12px; color: var(--muted); font-weight:700; letter-spacing:.6px; text-transform: uppercase}
    .tile .num{ font-size: clamp(18px, 4vw, 28px); font-weight: 900; margin-top:6px}
    .tile.X .num{ color: var(--primary)}
    .tile.O .num{ color: var(--accent)}
    .tile.D .num{ color: var(--muted)}

    footer{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end }
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }