/* Lookahead search — the engine under AlphaGo, in miniature. Play tic-tac-toe
   against a perfect minimax opponent that, before each move, looks ahead through
   every continuation, scores each as win/draw/loss, and picks the best — so it never
   loses. Go's tree is far too large to search exhaustively, so AlphaGo added learned
   value + policy networks on top. The principle is the same: look ahead, evaluate,
   choose. Vanilla JS, no deps, no build. Dark theme. Palette shared with siblings:
   cyan = the move it picks, green = a drawn/held line, neutral = a losing line. No red. */

#lookahead {
  --la-pick: #5ac8fa;                /* the move the search chooses */
  --la-good: #30d158;                /* a line the AI evaluates as a win/hold */
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px; padding: clamp(16px, 3vw, 26px); margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}
.la-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.la-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

.la-stage { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.la-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: rgba(0,0,0,0.4); padding: 6px; border-radius: 10px; }
.la-cell {
  width: 66px; height: 66px; border-radius: 8px; border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  background: var(--color-bg-surface, #1c1c1f); font: inherit; cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: #fff; transition: background 0.15s, box-shadow 0.2s;
}
.la-cell:disabled { cursor: default; }
.la-cell.empty:hover { background: rgba(255,255,255,0.06); }
.la-cell.x { color: #fff; }
.la-cell.o { color: var(--la-pick); }
.la-cell.pick { box-shadow: inset 0 0 0 2px var(--la-pick); }
/* transient minimax score badge shown on empty cells while the AI "thinks" */
.la-score { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; border-radius: 8px; opacity: 0; transition: opacity 0.2s; }
.la-score.show { opacity: 1; }
.la-score.win { color: var(--la-good); background: rgba(48,209,88,0.14); }
.la-score.draw { color: #fff; background: rgba(255,255,255,0.07); }
.la-score.lose { color: var(--la-pick); background: rgba(90,200,250,0.10); }

.la-side { display: flex; flex-direction: column; gap: 12px; min-width: 180px; flex: 1; }
.la-status { background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 12px; padding: 13px 15px; font-size: 0.9rem; line-height: 1.45; color: var(--color-text-secondary, rgba(255,255,255,0.78)); transition: border-color 0.25s; min-height: 3.2em; }
.la-status.draw { border-color: var(--la-good); }
.la-status b { color: #fff; }
.la-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.la-btn { appearance: none; cursor: pointer; font: inherit; font-size: 0.86rem; border: 1px solid var(--color-border, rgba(255,255,255,0.15)); background: transparent; color: var(--color-text-primary,#fff); border-radius: 9px; padding: 8px 15px; transition: border-color 0.15s, background 0.15s; }
.la-btn:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.la-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }