/* Neon Arena — AI opponent (lobby card + bot game) and replay analysis:
   thinking pulse, unrated chip, engine error overlay, eval graph, progress
   bar, move markers, pv panel. Loaded after game.css/replay.css; reuses
   .glass-card/.btn/.segmented/.moves-list primitives. */

/* === lobby card === */
.ai-lobby-sub { margin: -4px 0 12px; font-size: 13px; color: var(--text-dim); }
.ai-lobby-card .segmented { flex-wrap: wrap; }
.ai-lobby-card .ai-level-seg button { flex: 1 1 40%; }
.ai-lobby-card .btn-block { margin-top: 12px; }

/* === setup labels (ai game side card + lobby card) === */
.ai-setup-label {
  margin: 10px 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-faint);
}
.view-ai .ai-level-seg,
.ai-lobby-card .ai-level-seg { display: flex; }
.view-ai .ai-level-seg button,
.ai-lobby-card .ai-level-seg button { flex: 1 1 auto; padding: 8px 10px; font-size: 12px; }
.view-ai .ai-color-seg,
.ai-lobby-card .ai-color-seg { display: flex; }
.view-ai .ai-color-seg button,
.ai-lobby-card .ai-color-seg button { flex: 1 1 auto; padding: 8px 10px; font-size: 12px; }
.view-ai .btn-block { margin-top: 12px; }

/* === unrated chip === */
.ai-unrated-chip {
  border-color: rgba(167, 139, 250, 0.4);
  color: var(--violet);
  background: rgba(167, 139, 250, 0.1);
  font-size: 11.5px;
}

/* === bot thinking === */
/* The badge sits in .fighter-sub, i.e. in the card *above* the board. Anything
   that enters or leaves layout here moves the board down and back up on every
   hand-off — reported live as the board "jumping" when the turn passes to the
   opponent (2026-07-27). So the box is always laid out and sized independently
   of the emoji's font metrics; only its paint toggles. */
.ai-think {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  font-size: 13px;
  line-height: 1;
  animation: aiThinkPulse 0.9s ease-in-out infinite;
}
.ai-think.is-idle { visibility: hidden; animation: none; }
@keyframes aiThinkPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
.board-countdown.ai-thinking-pulse {
  color: var(--cool);
  animation: aiThinkText 1.1s ease-in-out infinite;
}
@keyframes aiThinkText {
  0%, 100% { opacity: 0.55; text-shadow: 0 0 8px rgba(124, 201, 255, 0.3); }
  50% { opacity: 1; text-shadow: 0 0 16px rgba(124, 201, 255, 0.6); }
}
.board-countdown[data-tone="danger"] { color: var(--danger); text-shadow: 0 0 14px rgba(255, 93, 108, 0.5); }

/* === engine error overlay (inside board-stage, reuses .board-waiting) === */
.ai-engine-sub {
  max-width: 320px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}

/* === analysis card (replay side column) === */
.an-card .card-title { margin-bottom: 8px; }
.an-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.an-progress {
  margin-top: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--panel-soft);
  border: 1px solid var(--stroke);
  overflow: hidden;
}
.an-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--r-pill);
  background: var(--gold-grad);
  box-shadow: 0 0 12px rgba(241, 193, 82, 0.45);
  transition: width 220ms var(--ease-out);
}
.an-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* === selected-move panel (under the eval graph) === */
.an-panel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--panel-soft);
}
.an-panel-eval {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.an-panel-eval.is-good { color: var(--gold); }
.an-panel-eval.is-bad { color: var(--cool); }
.an-panel-pv {
  font-size: 12.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.an-panel-pv .an-pv-label { color: var(--text-faint); font-weight: 700; margin-right: 5px; }

/* === eval graph === */
.an-graph-wrap {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  box-shadow: var(--shadow-pop);
  padding: 8px;
  cursor: pointer;
}
.an-graph {
  display: block;
  width: 100%;
  height: 110px;
  border-radius: var(--r-sm);
}

/* === move markers in the notation === */
.mv-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  margin-left: 4px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}
.mv-mark-brilliant { color: var(--violet); text-shadow: 0 0 10px rgba(167, 139, 250, 0.7); }
.mv-mark-good { color: var(--ok); }
.mv-mark-inaccuracy { color: var(--gold); }
.mv-mark-mistake { color: #ff9f43; }
.mv-mark-blunder { color: var(--danger); text-shadow: 0 0 10px rgba(255, 93, 108, 0.6); }

/* === responsive === */
@container scene (max-width: 619px) {
  .view-ai { grid-template-columns: 1fr; }
  .view-ai .g-side-col { order: 2; }
  .an-graph { height: 90px; }
}
/* Asked of the scene, like the 619 block above it (shell.css «WINDOW
   CLASSES»). The number stays 520; the box changes. Upright the two units
   agree at this threshold — below 800px scene width == window width, and the
   narrowest scene a >=800px window produces is 527 — and 390 / 905 / 1280
   measure byte-identical before and after.
   Sideways they do not agree: a notched phone in landscape spends 47px of
   window on each ear plus 61–77 on the rail, so 844x390 leaves a 436px scene
   and 932x430 leaves 460. The level segments were taking their 12px/8x10
   desktop reading in that box because the WINDOW was 844. After: 11px/7x8 on
   /ai and on the /dashboard lobby card, still 44px tall under base.css's touch
   floor. */
@container scene (max-width: 520px) {
  .view-ai .ai-level-seg button,
  .ai-lobby-card .ai-level-seg button { font-size: 11px; padding: 7px 8px; }
}

/* === reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .ai-think, .board-countdown.ai-thinking-pulse { animation: none; }
  .an-progress-fill { transition: none; }
}