Multiplayer mode: server, room tokens, docker setup, and client UI

public/app.js

@@ -0,0 +1,305 @@
+'use strict';
+
+const BASE = location.pathname === '/' ? '' : location.pathname.replace(/\/$/, '');
+
+const App = (() => {
+  const boardEl = document.getElementById('board');
+  const statusEl = document.getElementById('status');
+  const statusTextEl = document.getElementById('status-text');
+  const overlayEl = document.getElementById('overlay');
+  const overlayTitleEl = document.getElementById('overlay-title');
+  const winLineEl = document.getElementById('win-line-el');
+  const confettiLayer = document.getElementById('confetti-layer');
+  const toastEl = document.getElementById('toast');
+
+  const scoreEls = {
+    you: document.getElementById('score-you'),
+    opponent: document.getElementById('score-opponent'),
+    draws: document.getElementById('score-draws'),
+  };
+
+  const labelYou = document.getElementById('label-you');
+  const labelOpponent = document.getElementById('label-opponent');
+
+  const cells = [];
+  let toastTimer = 0;
+  let activeMode = null;
+
+  const WIN_LINES = [
+    [0, 1, 2], [3, 4, 5], [6, 7, 8],
+    [0, 3, 6], [1, 4, 7], [2, 5, 8],
+    [0, 4, 8], [2, 4, 6],
+  ];
+
+  const X_SVG =
+    '<svg viewBox="0 0 100 100" class="mark mark-x" aria-hidden="true">' +
+    '<line x1="24" y1="24" x2="76" y2="76"></line>' +
+    '<line x1="76" y1="24" x2="24" y2="76"></line>' +
+    '</svg>';
+
+  const O_SVG =
+    '<svg viewBox="0 0 100 100" class="mark mark-o" aria-hidden="true">' +
+    '<circle cx="50" cy="50" r="30"></circle>' +
+    '</svg>';
+
+  function checkWinner(board) {
+    for (const line of WIN_LINES) {
+      const [a, b, c] = line;
+      if (board[a] && board[a] === board[b] && board[a] === board[c]) {
+        return { winner: board[a], line };
+      }
+    }
+    if (board.every((v) => v !== null)) return { winner: 'draw' };
+    return null;
+  }
+
+  function showScreen(name) {
+    document.getElementById('screen-menu').style.display = name === 'menu' ? '' : 'none';
+    document.getElementById('screen-waiting').style.display = name === 'waiting' ? '' : 'none';
+    document.getElementById('screen-game').style.display = name === 'game' ? '' : 'none';
+  }
+
+  function buildBoard() {
+    boardEl.innerHTML = '';
+    cells.length = 0;
+    for (let i = 0; i < 9; i++) {
+      const cell = document.createElement('button');
+      cell.type = 'button';
+      cell.className = 'cell empty';
+      cell.dataset.index = String(i);
+      cell.setAttribute('aria-label', 'Empty cell');
+      cell.addEventListener('click', () => onCellTap(i));
+      boardEl.appendChild(cell);
+      cells.push(cell);
+    }
+  }
+
+  function onCellTap(i) {
+    if (activeMode === 'cpu') CpuGame.handleMove(i);
+    if (activeMode === 'online') Multiplayer.handleMove(i);
+  }
+
+  function renderMark(i, mark) {
+    const cell = cells[i];
+    cell.classList.remove('empty');
+    cell.classList.add(mark === 'X' ? 'has-x' : 'has-o');
+    cell.setAttribute('aria-label', mark === 'X' ? 'X' : 'O');
+    cell.innerHTML = mark === 'X' ? X_SVG : O_SVG;
+  }
+
+  function renderStatus(text, mode) {
+    mode = mode || 'normal';
+    statusEl.classList.toggle('thinking', mode === 'thinking');
+    if (statusTextEl.textContent === text) return;
+    statusEl.classList.add('fading');
+    setTimeout(() => {
+      statusTextEl.textContent = text;
+      statusEl.classList.remove('fading');
+    }, 150);
+  }
+
+  function renderScores(scores) {
+    scoreEls.you.textContent = scores.you || 0;
+    scoreEls.opponent.textContent = scores.opponent || 0;
+    scoreEls.draws.textContent = scores.draws || 0;
+  }
+
+  function cellCenter(i, boardRect) {
+    const r = cells[i].getBoundingClientRect();
+    return {
+      x: r.left + r.width / 2 - boardRect.left,
+      y: r.top + r.height / 2 - boardRect.top,
+    };
+  }
+
+  function drawWinLine(line) {
+    const boardRect = boardEl.getBoundingClientRect();
+    const p1 = cellCenter(line[0], boardRect);
+    const p2 = cellCenter(line[2], boardRect);
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    const len = Math.hypot(dx, dy) || 1;
+    const ext = 16;
+    const ux = dx / len;
+    const uy = dy / len;
+    const x1 = p1.x - ux * ext;
+    const y1 = p1.y - uy * ext;
+    const x2 = p2.x + ux * ext;
+    const y2 = p2.y + uy * ext;
+
+    winLineEl.setAttribute('x1', x1);
+    winLineEl.setAttribute('y1', y1);
+    winLineEl.setAttribute('x2', x2);
+    winLineEl.setAttribute('y2', y2);
+
+    const total = Math.hypot(x2 - x1, y2 - y1);
+    winLineEl.style.transition = 'none';
+    winLineEl.style.strokeDasharray = total;
+    winLineEl.style.strokeDashoffset = total;
+    winLineEl.style.opacity = '1';
+    void winLineEl.getBoundingClientRect();
+    winLineEl.style.transition = 'stroke-dashoffset 400ms ease';
+    winLineEl.style.strokeDashoffset = '0';
+  }
+
+  function clearWinLine() {
+    winLineEl.style.transition = 'none';
+    winLineEl.style.opacity = '0';
+    winLineEl.style.strokeDashoffset = winLineEl.style.strokeDasharray;
+  }
+
+  function showOverlay(title) {
+    overlayTitleEl.textContent = title;
+    overlayEl.classList.add('show');
+  }
+
+  function hideOverlay() {
+    overlayEl.classList.remove('show');
+  }
+
+  const CONFETTI_COLORS = ['#22d3ee', '#f472b6', '#a78bfa', '#fbbf24', '#34d399', '#ffffff'];
+
+  function burstConfetti() {
+    const pieces = [];
+    for (let i = 0; i < 40; i++) {
+      const el = document.createElement('div');
+      el.className = 'confetti';
+      const size = 6 + Math.random() * 8;
+      el.style.width = size + 'px';
+      el.style.height = size * 1.4 + 'px';
+      el.style.left = Math.random() * 100 + 'vw';
+      el.style.background = CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)];
+      el.style.setProperty('--drift', (Math.random() * 160 - 80) + 'px');
+      el.style.setProperty('--spin', (360 + Math.random() * 720) + 'deg');
+      el.style.animationDuration = 1.3 + Math.random() * 0.5 + 's';
+      el.style.animationDelay = Math.random() * 0.25 + 's';
+      confettiLayer.appendChild(el);
+      pieces.push(el);
+    }
+    setTimeout(() => pieces.forEach((p) => p.remove()), 2200);
+  }
+
+  function clearBoard() {
+    cells.forEach((cell) => {
+      cell.innerHTML = '';
+      cell.classList.add('empty');
+      cell.classList.remove('has-x', 'has-o');
+      cell.setAttribute('aria-label', 'Empty cell');
+    });
+    clearWinLine();
+    boardEl.classList.remove('shake', 'pulse');
+    hideOverlay();
+    confettiLayer.innerHTML = '';
+  }
+
+  function showToast(msg) {
+    toastEl.textContent = msg;
+    toastEl.classList.add('show');
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(() => toastEl.classList.remove('show'), 1600);
+  }
+
+  function setScoreboardLabels(youLabel, oppLabel) {
+    labelYou.textContent = youLabel;
+    labelOpponent.textContent = oppLabel;
+  }
+
+  function startCpuMode() {
+    activeMode = 'cpu';
+    showScreen('game');
+    setScoreboardLabels('You (X)', 'CPU (O)');
+    CpuGame.init();
+  }
+
+  function startOnlineHost({ id, token, link }) {
+    activeMode = 'online';
+    showScreen('waiting');
+    document.getElementById('link-text').textContent = link;
+    Multiplayer.init({ asHost: true, id, token, link });
+  }
+
+  function startOnlineJoiner(token) {
+    activeMode = 'online';
+    showScreen('game');
+    setScoreboardLabels('Opponent (X)', 'You (O)');
+    renderStatus('Connecting…', 'thinking');
+    Multiplayer.init({ asJoiner: true, token });
+  }
+
+  function backToMenu() {
+    if (activeMode === 'cpu') CpuGame.destroy();
+    if (activeMode === 'online') Multiplayer.destroy();
+    activeMode = null;
+    clearBoard();
+    hideOverlay();
+    showScreen('menu');
+  }
+
+  function init() {
+    buildBoard();
+
+    document.getElementById('btn-cpu').addEventListener('click', startCpuMode);
+    document.getElementById('btn-online').addEventListener('click', async () => {
+      try {
+        const res = await fetch(BASE + '/api/games', { method: 'POST' });
+        if (!res.ok) throw new Error('Server returned ' + res.status);
+        const data = await res.json();
+        startOnlineHost(data);
+      } catch (e) {
+        showToast('Error: ' + e.message);
+        console.error('Create game failed:', e);
+      }
+    });
+
+    document.getElementById('btn-copy').addEventListener('click', async () => {
+      const link = document.getElementById('link-text').textContent;
+      try {
+        await navigator.clipboard.writeText(link);
+        showToast('Link copied!');
+      } catch (e) {
+        prompt('Copy this link:', link);
+      }
+    });
+
+    document.getElementById('btn-back-menu-waiting').addEventListener('click', backToMenu);
+    document.getElementById('btn-new-game').addEventListener('click', () => {
+      if (activeMode === 'cpu') CpuGame.newRound();
+      if (activeMode === 'online') Multiplayer.newRound();
+    });
+    document.getElementById('btn-again-overlay').addEventListener('click', () => {
+      if (activeMode === 'cpu') CpuGame.newRound();
+      if (activeMode === 'online') Multiplayer.newRound();
+    });
+    document.getElementById('btn-reset').addEventListener('click', () => {
+      if (activeMode === 'cpu') CpuGame.resetScores();
+    });
+
+    const token = new URLSearchParams(location.search).get('token');
+    if (token) {
+      startOnlineJoiner(token);
+    } else {
+      showScreen('menu');
+    }
+  }
+
+  return {
+    init,
+    showScreen,
+    renderMark,
+    renderStatus,
+    renderScores,
+    drawWinLine,
+    clearWinLine,
+    showOverlay,
+    hideOverlay,
+    burstConfetti,
+    clearBoard,
+    showToast,
+    setScoreboardLabels,
+    checkWinner,
+    WIN_LINES,
+    get activeMode() { return activeMode; },
+  };
+})();
+
+App.init();

public/game.js

@@ -0,0 +1,131 @@
+'use strict';
+
+const CpuGame = (() => {
+  const SCORES_KEY = 'ttt-scores';
+  const CPU_DELAY = 600;
+
+  const state = {
+    board: Array(9).fill(null),
+    turn: 'X',
+    gameOver: false,
+    scores: { you: 0, opponent: 0, draws: 0 },
+  };
+
+  let cpuTimer = 0;
+
+  function persistScores() {
+    try {
+      localStorage.setItem(SCORES_KEY, JSON.stringify(state.scores));
+    } catch (e) { /* storage unavailable */ }
+  }
+
+  function loadScores() {
+    try {
+      const raw = localStorage.getItem(SCORES_KEY);
+      if (raw) {
+        const s = JSON.parse(raw);
+        state.scores = {
+          you: Number(s.you) || 0,
+          opponent: Number(s.cpu || s.opponent) || 0,
+          draws: Number(s.draws) || 0,
+        };
+      }
+    } catch (e) { /* corrupted storage */ }
+  }
+
+  function handleMove(i) {
+    if (state.gameOver || state.turn !== 'X' || state.board[i]) return;
+    state.board[i] = 'X';
+    App.renderMark(i, 'X');
+    const result = App.checkWinner(state.board);
+    if (result) {
+      endRound(result);
+      return;
+    }
+    state.turn = 'O';
+    App.renderStatus('CPU is thinking…', 'thinking');
+    cpuTimer = setTimeout(cpuMove, CPU_DELAY);
+  }
+
+  function cpuMove() {
+    if (state.gameOver) return;
+    const empty = [];
+    state.board.forEach((v, i) => { if (v === null) empty.push(i); });
+    if (!empty.length) return;
+    const i = empty[Math.floor(Math.random() * empty.length)];
+    state.board[i] = 'O';
+    App.renderMark(i, 'O');
+    const result = App.checkWinner(state.board);
+    if (result) {
+      endRound(result);
+      return;
+    }
+    state.turn = 'X';
+    App.renderStatus('Your turn', 'normal');
+  }
+
+  function endRound(result) {
+    state.gameOver = true;
+    let title;
+    let key;
+    if (result.winner === 'X') {
+      key = 'you';
+      title = 'You Win!';
+      App.renderStatus('You win!', 'normal');
+    } else if (result.winner === 'O') {
+      key = 'opponent';
+      title = 'CPU Wins';
+      App.renderStatus('CPU wins', 'normal');
+      document.getElementById('board').classList.add('shake');
+    } else {
+      key = 'draws';
+      title = "It's a Draw";
+      App.renderStatus("It's a draw", 'normal');
+      document.getElementById('board').classList.add('pulse');
+    }
+
+    state.scores[key]++;
+    persistScores();
+    App.renderScores(state.scores);
+
+    if (result.line) App.drawWinLine(result.line);
+
+    setTimeout(() => {
+      App.showOverlay(title);
+      if (result.winner === 'X') App.burstConfetti();
+    }, result.winner === 'draw' ? 400 : 600);
+  }
+
+  function newRound() {
+    clearTimeout(cpuTimer);
+    state.board = Array(9).fill(null);
+    state.turn = 'X';
+    state.gameOver = false;
+    App.clearBoard();
+    App.renderStatus('Your turn', 'normal');
+  }
+
+  function resetScores() {
+    state.scores = { you: 0, opponent: 0, draws: 0 };
+    persistScores();
+    App.renderScores(state.scores);
+    App.showToast('Scores reset');
+  }
+
+  function destroy() {
+    clearTimeout(cpuTimer);
+  }
+
+  function init() {
+    clearTimeout(cpuTimer);
+    App.clearBoard();
+    state.board = Array(9).fill(null);
+    state.turn = 'X';
+    state.gameOver = false;
+    loadScores();
+    App.renderScores(state.scores);
+    App.renderStatus('Your turn', 'normal');
+  }
+
+  return { init, handleMove, newRound, resetScores, destroy };
+})();

public/index.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="#0d0f24">
+  <title>Tic-Tac-Toe</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="bg-blob blob-cyan" aria-hidden="true"></div>
+  <div class="bg-blob blob-magenta" aria-hidden="true"></div>
+
+  <main class="app">
+
+    <section id="screen-menu" class="screen">
+      <h1 class="title">Tic-Tac-Toe</h1>
+      <div class="menu-buttons">
+        <button class="btn ghost" id="btn-cpu" type="button">Play vs CPU</button>
+        <button class="btn primary" id="btn-online" type="button">New Online Game</button>
+      </div>
+    </section>
+
+    <section id="screen-waiting" class="screen" style="display:none">
+      <h1 class="title">Share this link</h1>
+      <p class="waiting-subtitle">Send this link to your opponent</p>
+      <div class="link-box" id="link-box">
+        <span id="link-text"></span>
+      </div>
+      <button class="btn primary" id="btn-copy" type="button">Copy Link</button>
+      <div class="status waiting-pulse" id="waiting-status">
+        <span class="status-text">Waiting for opponent…</span>
+      </div>
+      <button class="btn ghost" id="btn-back-menu-waiting" type="button">Back to Menu</button>
+    </section>
+
+    <section id="screen-game" class="screen" style="display:none">
+      <div class="scoreboard">
+        <div class="chip" id="chip-you">
+          <span class="chip-label" id="label-you">You (X)</span>
+          <span class="chip-value chip-x" id="score-you">0</span>
+        </div>
+        <div class="chip" id="chip-opponent">
+          <span class="chip-label" id="label-opponent">CPU (O)</span>
+          <span class="chip-value chip-o" id="score-opponent">0</span>
+        </div>
+        <div class="chip" id="chip-draws">
+          <span class="chip-label">Draws</span>
+          <span class="chip-value" id="score-draws">0</span>
+        </div>
+      </div>
+
+      <div class="status" id="status">
+        <span class="status-text" id="status-text">Your turn</span>
+      </div>
+
+      <div class="board-wrap">
+        <div class="board" id="board" aria-label="Tic-tac-toe board"></div>
+        <svg class="win-line" id="win-line" aria-hidden="true">
+          <defs>
+            <linearGradient id="win-grad" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0" stop-color="#22d3ee"></stop>
+              <stop offset="1" stop-color="#f472b6"></stop>
+            </linearGradient>
+          </defs>
+          <line id="win-line-el" stroke="url(#win-grad)" stroke-width="6" stroke-linecap="round" opacity="0"></line>
+        </svg>
+      </div>
+
+        <div class="buttons">
+          <button class="btn" id="btn-reset" type="button">Reset Scores</button>
+          <button class="btn primary" id="btn-new-game" type="button">New Game</button>
+        </div>
+    </section>
+
+  </main>
+
+  <div class="overlay" id="overlay" aria-hidden="true">
+    <div class="modal" role="dialog" aria-modal="true">
+      <div class="modal-title" id="overlay-title">You Win!</div>
+      <button class="btn primary" id="btn-again-overlay" type="button">Play Again</button>
+    </div>
+  </div>
+
+  <div id="confetti-layer" aria-hidden="true"></div>
+  <div class="toast" id="toast" aria-live="polite"></div>
+
+  <script src="game.js"></script>
+  <script src="multiplayer.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>

public/multiplayer.js

@@ -0,0 +1,163 @@
+'use strict';
+
+const Multiplayer = (() => {
+  let ws = null;
+  let asHost = false;
+  let gameId = null;
+  let myMark = null;
+  let myTurn = false;
+  let board = Array(9).fill(null);
+  let gameOver = false;
+  let scores = { you: 0, opponent: 0, draws: 0 };
+
+  function connect(url) {
+    return new Promise((resolve, reject) => {
+      ws = new WebSocket(url);
+      ws.onopen = () => {
+        if (asHost) {
+          ws.send(JSON.stringify({ type: 'host', id: gameId }));
+        } else {
+          ws.send(JSON.stringify({ type: 'join', token: gameId }));
+        }
+        resolve();
+      };
+      ws.onerror = (e) => {
+        App.showToast('Connection failed');
+        reject(e);
+      };
+      ws.onclose = () => {
+        if (!gameOver) {
+          App.renderStatus('Connection lost', 'normal');
+        }
+      };
+      ws.onmessage = (event) => {
+        const msg = JSON.parse(event.data);
+        handleMessage(msg);
+      };
+    });
+  }
+
+  function handleMessage(msg) {
+    switch (msg.type) {
+      case 'joined':
+        myMark = msg.mark;
+        myTurn = msg.mark === 'X';
+        App.setScoreboardLabels(
+          myMark === 'X' ? 'You (X)' : 'Opponent (X)',
+          myMark === 'O' ? 'You (O)' : 'Opponent (O)'
+        );
+        App.renderStatus(myTurn ? 'Your turn' : 'Waiting for opponent…', myTurn ? 'normal' : 'thinking');
+        break;
+
+      case 'opponent-joined':
+        App.showScreen('game');
+        App.setScoreboardLabels(
+          myMark === 'X' ? 'You (X)' : 'Opponent (X)',
+          myMark === 'O' ? 'You (O)' : 'Opponent (O)'
+        );
+        App.renderStatus('Your turn', 'normal');
+        myTurn = true;
+        break;
+
+      case 'start':
+        board = Array(9).fill(null);
+        gameOver = false;
+        myMark = msg.mark;
+        myTurn = msg.first === myMark;
+        App.setScoreboardLabels(
+          myMark === 'X' ? 'You (X)' : 'Opponent (X)',
+          myMark === 'O' ? 'You (O)' : 'Opponent (O)'
+        );
+        App.clearBoard();
+        App.renderStatus(myTurn ? 'Your turn' : 'Waiting for opponent…', myTurn ? 'normal' : 'thinking');
+        break;
+
+      case 'move': {
+        board[msg.index] = msg.mark;
+        App.renderMark(msg.index, msg.mark);
+        if (!gameOver && msg.mark !== myMark) {
+          myTurn = !myTurn;
+          App.renderStatus(myTurn ? 'Your turn' : 'Opponent is thinking…', myTurn ? 'normal' : 'thinking');
+        }
+        break;
+      }
+
+      case 'end':
+        gameOver = true;
+        if (msg.winner === 'draw') {
+          scores.draws++;
+          App.renderStatus("It's a draw", 'normal');
+          document.getElementById('board').classList.add('pulse');
+        } else {
+          const iWon = msg.winner === myMark;
+          scores[iWon ? 'you' : 'opponent']++;
+          App.renderStatus(iWon ? 'You win!' : 'Opponent wins', 'normal');
+          if (!iWon) document.getElementById('board').classList.add('shake');
+        }
+        App.renderScores(scores);
+        if (msg.line) App.drawWinLine(msg.line);
+        setTimeout(() => {
+          const title = msg.winner === 'draw' ? "It's a Draw" : (msg.winner === myMark ? 'You Win!' : 'Opponent Wins');
+          App.showOverlay(title);
+          if (msg.winner === myMark) App.burstConfetti();
+        }, 600);
+        break;
+
+      case 'new-round':
+        board = Array(9).fill(null);
+        gameOver = false;
+        myTurn = msg.first === myMark;
+        App.hideOverlay();
+        App.clearBoard();
+        App.renderStatus(myTurn ? 'Your turn' : 'Waiting for opponent…', myTurn ? 'normal' : 'thinking');
+        break;
+
+    case 'opponent-left':
+      gameOver = true;
+      App.renderStatus('Opponent left', 'error');
+      break;
+
+      case 'error':
+        App.showToast(msg.message || 'Error');
+        break;
+    }
+  }
+
+  function handleMove(i) {
+    if (gameOver || !myTurn || board[i] || myMark === null) return;
+    board[i] = myMark;
+    App.renderMark(i, myMark);
+    ws.send(JSON.stringify({ type: 'move', index: i }));
+    myTurn = false;
+    App.renderStatus('Waiting for opponent…', 'thinking');
+  }
+
+  function newRound() {
+    ws.send(JSON.stringify({ type: 'new-round' }));
+  }
+
+  function destroy() {
+    if (ws) {
+      ws.close();
+      ws = null;
+    }
+    myMark = null;
+    myTurn = false;
+    board = Array(9).fill(null);
+    gameOver = false;
+    scores = { you: 0, opponent: 0, draws: 0 };
+  }
+
+  function init(opts) {
+    asHost = opts.asHost;
+    gameId = opts.asHost ? opts.id : opts.token;
+    const base = location.pathname === '/' ? '' : location.pathname.replace(/\/$/, '');
+    const wsUrl = (location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + base + '/ws';
+    connect(wsUrl).catch((err) => {
+      console.error('Connection failed:', err);
+      App.renderStatus('Connection failed', 'error');
+    });
+  }
+
+  return { init, handleMove, newRound, destroy };
+})();

public/style.css

@@ -0,0 +1,475 @@
+:root {
+  --bg-1: #0d0f24;
+  --bg-2: #1c1140;
+  --cyan: #22d3ee;
+  --pink: #f472b6;
+  --glass: rgba(255, 255, 255, 0.06);
+  --glass-strong: rgba(255, 255, 255, 0.1);
+  --glass-border: rgba(255, 255, 255, 0.14);
+  --text: #ffffff;
+  --muted: rgba(255, 255, 255, 0.55);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
+  background-attachment: fixed;
+  color: var(--text);
+  min-height: 100dvh;
+  display: flex;
+  justify-content: center;
+  overflow-x: hidden;
+}
+
+/* ---------- background blobs ---------- */
+.bg-blob {
+  position: fixed;
+  border-radius: 50%;
+  filter: blur(70px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.blob-cyan {
+  width: 340px;
+  height: 340px;
+  left: -120px;
+  top: 8%;
+  background: var(--cyan);
+  opacity: 0.2;
+}
+
+.blob-magenta {
+  width: 380px;
+  height: 380px;
+  right: -140px;
+  bottom: 4%;
+  background: var(--pink);
+  opacity: 0.16;
+}
+
+/* ---------- layout ---------- */
+.app {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 420px;
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+  padding:
+    calc(28px + env(safe-area-inset-top))
+    16px
+    calc(28px + env(safe-area-inset-bottom));
+}
+
+.title {
+  font-size: clamp(28px, 8vw, 34px);
+  font-weight: 800;
+  letter-spacing: 0.5px;
+  background: linear-gradient(90deg, var(--cyan), var(--pink));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* ---------- scoreboard ---------- */
+.scoreboard {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+}
+
+.chip {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 8px;
+  background: var(--glass);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+.chip-label {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.chip-value {
+  font-size: 22px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.chip-x { color: var(--cyan); }
+.chip-o { color: var(--pink); }
+
+.chip-value.pop {
+  animation: score-pop 320ms ease;
+}
+
+@keyframes score-pop {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.35); }
+  100% { transform: scale(1); }
+}
+
+/* ---------- status ---------- */
+.status {
+  height: 20px;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.7);
+  transition: opacity 150ms ease;
+}
+
+.status.fading { opacity: 0; }
+
+.status.thinking .status-text {
+  animation: status-pulse 900ms ease-in-out infinite;
+}
+
+@keyframes status-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* ---------- board ---------- */
+.board-wrap {
+  position: relative;
+}
+
+.board {
+  width: min(88vw, 340px);
+  aspect-ratio: 1;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 10px;
+  padding: 14px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 24px;
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.board.shake {
+  animation: shake 450ms ease;
+  border-color: rgba(244, 63, 94, 0.5);
+  box-shadow: 0 0 34px rgba(244, 63, 94, 0.3);
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-7px); }
+  40% { transform: translateX(6px); }
+  60% { transform: translateX(-4px); }
+  80% { transform: translateX(3px); }
+}
+
+.board.pulse {
+  animation: board-pulse 600ms ease;
+}
+
+@keyframes board-pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.03); }
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.cell.empty:active {
+  background: var(--glass-strong);
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+@media (hover: hover) {
+  .cell.empty:hover {
+    background: var(--glass-strong);
+    border-color: rgba(255, 255, 255, 0.25);
+    box-shadow: 0 0 18px rgba(34, 211, 238, 0.15);
+  }
+}
+
+/* ---------- marks ---------- */
+.mark {
+  width: 58%;
+  height: 58%;
+  animation: mark-pop 150ms ease-out;
+}
+
+@keyframes mark-pop {
+  0% { transform: scale(0.3); opacity: 0; }
+  60% { transform: scale(1.12); opacity: 1; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+.mark-x {
+  filter: drop-shadow(0 0 7px rgba(34, 211, 238, 0.65));
+}
+
+.mark-o {
+  filter: drop-shadow(0 0 7px rgba(244, 114, 182, 0.65));
+}
+
+.mark line {
+  stroke: var(--cyan);
+  stroke-width: 9;
+  stroke-linecap: round;
+}
+
+.mark circle {
+  fill: none;
+  stroke: var(--pink);
+  stroke-width: 9;
+}
+
+/* ---------- win line ---------- */
+.win-line {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+  z-index: 5;
+}
+
+#win-line-el {
+  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
+}
+
+/* ---------- buttons ---------- */
+.buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  max-width: 300px;
+}
+
+.btn {
+  border: none;
+  border-radius: 27px;
+  height: 54px;
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 700;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: transform 100ms ease, filter 150ms ease;
+}
+
+.btn:active {
+  transform: scale(0.97);
+}
+
+.btn.primary {
+  background: linear-gradient(90deg, var(--cyan), var(--pink));
+  color: #0d1025;
+  box-shadow: 0 6px 24px rgba(34, 211, 238, 0.25);
+}
+
+.btn.primary:hover {
+  filter: brightness(1.1);
+}
+
+.btn.ghost {
+  height: 48px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.btn.ghost:hover {
+  background: rgba(255, 255, 255, 0.09);
+}
+
+/* ---------- overlay ---------- */
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(13, 15, 36, 0.55);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 200ms ease;
+  padding: 24px;
+}
+
+.overlay.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.modal {
+  width: 100%;
+  max-width: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 22px;
+  padding: 34px 28px;
+  background: var(--glass);
+  border: 1px solid var(--glass-border);
+  border-radius: 24px;
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  transform: scale(0.85);
+  transition: transform 250ms cubic-bezier(0.2, 1.4, 0.4, 1);
+}
+
+.overlay.show .modal {
+  transform: scale(1);
+}
+
+.modal-title {
+  font-size: 24px;
+  font-weight: 800;
+}
+
+.modal .btn {
+  width: 100%;
+}
+
+/* ---------- confetti ---------- */
+#confetti-layer {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 100;
+}
+
+.confetti {
+  position: absolute;
+  top: -24px;
+  border-radius: 2px;
+  animation-name: confetti-fall;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+@keyframes confetti-fall {
+  from {
+    transform: translate3d(0, 0, 0) rotate(0deg);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(var(--drift), 108vh, 0) rotate(var(--spin));
+    opacity: 0.85;
+  }
+}
+
+/* ---------- toast ---------- */
+.toast {
+  position: fixed;
+  bottom: calc(24px + env(safe-area-inset-bottom));
+  left: 50%;
+  transform: translateX(-50%) translateY(8px);
+  z-index: 90;
+  padding: 10px 20px;
+  font-size: 14px;
+  background: var(--glass-strong);
+  border: 1px solid var(--glass-border);
+  border-radius: 999px;
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 200ms ease, transform 200ms ease;
+}
+
+.toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* ---------- screens ---------- */
+.screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  width: 100%;
+  flex: 1;
+}
+
+.menu-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 100%;
+  max-width: 280px;
+}
+
+.waiting-subtitle {
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.link-box {
+  width: 100%;
+  max-width: 320px;
+  padding: 14px 18px;
+  background: var(--glass);
+  border: 1px solid var(--glass-border);
+  border-radius: 14px;
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  font-size: 13px;
+  font-family: monospace;
+  word-break: break-all;
+  color: rgba(255, 255, 255, 0.85);
+  text-align: center;
+}
+
+.waiting-pulse {
+  animation: status-pulse 1200ms ease-in-out infinite;
+}