<div class="db-app">
  <div class="db-header">
    <h2>Dots and Boxes</h2>
    <div class="stats">
      <div class="stat p1"><span class="stat-label">You</span><span class="stat-val" id="db-p1">0</span></div>
      <div class="stat p2"><span class="stat-label">CPU</span><span class="stat-val" id="db-p2">0</span></div>
    </div>
  </div>

  <p class="db-turn" id="db-turn">Your turn — click a dashed line to claim it.</p>

  <div class="db-board-wrap">
    <svg id="db-board" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg"></svg>
  </div>

  <div class="db-actions">
    <button class="ghost-btn" id="db-reset">New Game</button>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; min-height: 100vh; }

.db-app { max-width: 420px; margin: 0 auto; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.db-header { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.db-header h2 { font-size: 19px; font-weight: 800; color: #1e293b; }

.stats { display: flex; gap: 10px; }
.stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 6px 14px; min-width: 56px; text-align: center; }
.stat-label { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; }
.stat-val { display: block; font-size: 15px; font-weight: 800; }
.stat.p1 .stat-val { color: #6366f1; }
.stat.p2 .stat-val { color: #f43f5e; }

.db-turn { font-size: 12.5px; font-weight: 600; color: #64748b; text-align: center; min-height: 32px; line-height: 1.5; }
.db-turn.win { color: #16a34a; font-weight: 800; }
.db-turn.wait { color: #f59e0b; }

.db-board-wrap { width: 100%; max-width: 320px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px; }
#db-board { width: 100%; display: block; }

.db-dot { fill: #1e293b; }
.db-line { stroke: #cbd5e1; stroke-width: 6; stroke-linecap: round; cursor: pointer; transition: stroke 0.1s, stroke-width 0.1s; }
.db-line:hover { stroke: #a5b4fc; stroke-width: 8; }
.db-line.taken-p1 { stroke: #6366f1; cursor: default; }
.db-line.taken-p2 { stroke: #f43f5e; cursor: default; }
.db-line.taken-p1:hover, .db-line.taken-p2:hover { stroke-width: 6; }
.db-line-hit { stroke: transparent; stroke-width: 20; cursor: pointer; }

.db-box { transition: fill 0.2s; }
.db-box.p1 { fill: rgba(99,102,241,0.18); }
.db-box.p2 { fill: rgba(244,63,94,0.18); }
.db-box-label { font-size: 13px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.db-box-label.p1 { fill: #6366f1; }
.db-box-label.p2 { fill: #f43f5e; }

.ghost-btn {
  background: none; border: 1.5px solid #e2e8f0; border-radius: 10px;
  padding: 8px 16px; font-size: 12px; font-weight: 700; color: #475569;
  cursor: pointer; font-family: inherit; transition: border-color 0.15s, color 0.15s;
}
.ghost-btn:hover { border-color: #6366f1; color: #6366f1; }

const GRID = 4; // 4x4 dots = 3x3 boxes
const boardEl = document.getElementById('db-board');
const turnEl = document.getElementById('db-turn');
const p1El = document.getElementById('db-p1');
const p2El = document.getElementById('db-p2');
const PAD = 30, STEP = (320 - PAD * 2) / (GRID - 1);

// hLines[r][c] = line between dot(r,c) and dot(r,c+1) — GRID rows, GRID-1 cols
// vLines[r][c] = line between dot(r,c) and dot(r+1,c) — GRID-1 rows, GRID cols
let hLines, vLines, boxes; // boxes[r][c] = null | 'p1' | 'p2'
let scores = { p1: 0, p2: 0 };
let current = 'p1';
let gameOver = false;
let cpuTimer = null;

function dotXY(r, c) { return [PAD + c * STEP, PAD + r * STEP]; }

function newGameState() {
  hLines = Array.from({ length: GRID }, () => Array(GRID - 1).fill(false));
  vLines = Array.from({ length: GRID - 1 }, () => Array(GRID).fill(false));
  boxes = Array.from({ length: GRID - 1 }, () => Array(GRID - 1).fill(null));
}

function boxLines(r, c) {
  // The 4 edges bounding box (r,c): top/bottom horizontal, left/right vertical
  return {
    top: ['h', r, c], bottom: ['h', r + 1, c],
    left: ['v', r, c], right: ['v', r, c + 1],
  };
}

function isLineTaken(type, r, c) {
  return type === 'h' ? hLines[r][c] : vLines[r][c];
}

function setLine(type, r, c) {
  if (type === 'h') hLines[r][c] = true; else vLines[r][c] = true;
}

function boxComplete(r, c) {
  const b = boxLines(r, c);
  return Object.values(b).every(([t, rr, cc]) => isLineTaken(t, rr, cc));
}

function el(tag, attrs) {
  const e = document.createElementNS('http://www.w3.org/2000/svg', tag);
  Object.entries(attrs).forEach(([k, v]) => e.setAttribute(k, v));
  return e;
}

function render() {
  boardEl.innerHTML = '';

  // Boxes (fill + owner initial) drawn first, beneath lines
  for (let r = 0; r < GRID - 1; r++) {
    for (let c = 0; c < GRID - 1; c++) {
      const owner = boxes[r][c];
      const [x, y] = dotXY(r, c);
      const rect = el('rect', { x: x + 4, y: y + 4, width: STEP - 8, height: STEP - 8, rx: 4, class: 'db-box' + (owner ? ' ' + owner : '') });
      boardEl.appendChild(rect);
      if (owner) {
        const label = el('text', { x: x + STEP / 2, y: y + STEP / 2, class: 'db-box-label ' + owner });
        label.textContent = owner === 'p1' ? 'Y' : 'C';
        boardEl.appendChild(label);
      }
    }
  }

  // Horizontal lines
  for (let r = 0; r < GRID; r++) {
    for (let c = 0; c < GRID - 1; c++) {
      const [x1, y1] = dotXY(r, c);
      const [x2, y2] = dotXY(r, c + 1);
      drawLine(x1, y1, x2, y2, 'h', r, c);
    }
  }
  // Vertical lines
  for (let r = 0; r < GRID - 1; r++) {
    for (let c = 0; c < GRID; c++) {
      const [x1, y1] = dotXY(r, c);
      const [x2, y2] = dotXY(r + 1, c);
      drawLine(x1, y1, x2, y2, 'v', r, c);
    }
  }

  // Dots on top
  for (let r = 0; r < GRID; r++) {
    for (let c = 0; c < GRID; c++) {
      const [x, y] = dotXY(r, c);
      boardEl.appendChild(el('circle', { cx: x, cy: y, r: 4.5, class: 'db-dot' }));
    }
  }
}

// Track which player claimed each line for coloring
let hOwner, vOwner;

function drawLine(x1, y1, x2, y2, type, r, c) {
  const taken = isLineTaken(type, r, c);
  const owner = type === 'h' ? hOwner[r][c] : vOwner[r][c];
  const visible = el('line', { x1, y1, x2, y2, class: 'db-line' + (taken ? ' taken-' + owner : '') });
  boardEl.appendChild(visible);
  if (!taken) {
    const hit = el('line', { x1, y1, x2, y2, class: 'db-line-hit' });
    hit.addEventListener('click', () => claimLine(type, r, c, 'p1'));
    boardEl.appendChild(hit);
  }
}

function claimLine(type, r, c, player) {
  if (gameOver || current !== player || isLineTaken(type, r, c)) return;
  setLine(type, r, c);
  if (type === 'h') hOwner[r][c] = player; else vOwner[r][c] = player;

  let claimedAny = false;
  for (let r2 = 0; r2 < GRID - 1; r2++) {
    for (let c2 = 0; c2 < GRID - 1; c2++) {
      if (!boxes[r2][c2] && boxComplete(r2, c2)) {
        boxes[r2][c2] = player;
        scores[player]++;
        claimedAny = true;
      }
    }
  }

  p1El.textContent = String(scores.p1);
  p2El.textContent = String(scores.p2);

  const totalBoxes = (GRID - 1) * (GRID - 1);
  if (scores.p1 + scores.p2 === totalBoxes) {
    gameOver = true;
    render();
    if (scores.p1 > scores.p2) endMessage('You win ' + scores.p1 + '\u2013' + scores.p2 + '!');
    else if (scores.p2 > scores.p1) endMessage('CPU wins ' + scores.p2 + '\u2013' + scores.p1 + '.');
    else endMessage('It\u2019s a tie, ' + scores.p1 + '\u2013' + scores.p2 + '.');
    return;
  }

  // Completing a box grants another turn for the same player — classic Dots and Boxes rule
  if (!claimedAny) current = player === 'p1' ? 'p2' : 'p1';

  render();
  updateTurnMessage();

  if (current === 'p2' && !gameOver) {
    turnEl.textContent = 'CPU is thinking\u2026';
    turnEl.className = 'db-turn wait';
    cpuTimer = setTimeout(cpuMove, 550);
  }
}

function updateTurnMessage() {
  if (gameOver) return;
  turnEl.textContent = current === 'p1' ? 'Your turn — click a dashed line to claim it.' : 'CPU\u2019s turn.';
  turnEl.className = 'db-turn';
}

function endMessage(msg) {
  turnEl.textContent = msg;
  turnEl.className = 'db-turn win';
}

function allLines() {
  const lines = [];
  for (let r = 0; r < GRID; r++) for (let c = 0; c < GRID - 1; c++) if (!hLines[r][c]) lines.push(['h', r, c]);
  for (let r = 0; r < GRID - 1; r++) for (let c = 0; c < GRID; c++) if (!vLines[r][c]) lines.push(['v', r, c]);
  return lines;
}

function edgesAroundBox(r, c) {
  const b = boxLines(r, c);
  return Object.values(b);
}

function countTakenEdges(r, c) {
  return edgesAroundBox(r, c).filter(([t, rr, cc]) => isLineTaken(t, rr, cc)).length;
}

function cpuMove() {
  if (gameOver) return;
  const candidates = allLines();

  // 1. Prefer any move that completes a box right now.
  for (const [t, r, c] of candidates) {
    if (wouldCompleteBox(t, r, c)) { claimLine(t, r, c, 'p2'); return; }
  }
  // 2. Otherwise avoid handing the human a free 3rd-edge box: prefer lines
  //    that don't bring any adjacent box up to 3 taken edges.
  const safe = candidates.filter(([t, r, c]) => !createsThirdEdge(t, r, c));
  const pool = safe.length ? safe : candidates;
  const pick = pool[Math.floor(Math.random() * pool.length)];
  claimLine(pick[0], pick[1], pick[2], 'p2');
}

function wouldCompleteBox(type, r, c) {
  return adjacentBoxes(type, r, c).some(([br, bc]) => countTakenEdges(br, bc) === 3);
}

function createsThirdEdge(type, r, c) {
  return adjacentBoxes(type, r, c).some(([br, bc]) => countTakenEdges(br, bc) === 2);
}

function adjacentBoxes(type, r, c) {
  const out = [];
  if (type === 'h') {
    if (r - 1 >= 0) out.push([r - 1, c]);
    if (r < GRID - 1) out.push([r, c]);
  } else {
    if (c - 1 >= 0) out.push([r, c - 1]);
    if (c < GRID - 1) out.push([r, c]);
  }
  return out.filter(([br, bc]) => br >= 0 && br < GRID - 1 && bc >= 0 && bc < GRID - 1);
}

function reset() {
  clearTimeout(cpuTimer);
  newGameState();
  hOwner = Array.from({ length: GRID }, () => Array(GRID - 1).fill(null));
  vOwner = Array.from({ length: GRID - 1 }, () => Array(GRID).fill(null));
  scores = { p1: 0, p2: 0 };
  current = 'p1';
  gameOver = false;
  p1El.textContent = '0';
  p2El.textContent = '0';
  updateTurnMessage();
  render();
}

document.getElementById('db-reset').addEventListener('click', reset);
reset();