/* Chinese Checkers Arena - theme-aware, responsive. The hexagram board is a
   single SVG; holes and marbles are circles, clickable for play. */
:root {
  --bg: #0f1216; --panel: #181c22; --ink: #e8eaed; --muted: #9aa4b2;
  --line: #2a2f37; --accent: #6ea8fe;
  --board: #20252c; --hole: #39414c; --hole-edge: #10141a;
  --home1: #7a2b33; --home2: #24507a;        /* faint goal-triangle tints */
  --p1: #f0564f; --p1-edge: #7a1712;          /* Player 1 marble (red) */
  --p2: #4f93f0; --p2-edge: #123a7a;          /* Player 2 marble (blue) */
  --target: #f6f66980; --trail: #f6f669;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f3f4f6; --panel:#ffffff; --ink:#1b1f24; --muted:#5b6572; --line:#e3e6ea;
          --board:#e7e9ee; --hole:#c7ccd4; --hole-edge:#aab0ba;
          --home1:#f2c9cc; --home2:#c7dcf3; }
}
:root[data-theme="dark"] {
  --bg: #0f1216; --panel: #181c22; --ink: #e8eaed; --muted: #9aa4b2; --line: #2a2f37;
  --board: #20252c; --hole: #39414c; --home1:#7a2b33; --home2:#24507a;
}
:root[data-theme="light"] {
  --bg:#f3f4f6; --panel:#ffffff; --ink:#1b1f24; --muted:#5b6572; --line:#e3e6ea;
  --board:#e7e9ee; --hole:#c7ccd4; --home1:#f2c9cc; --home2:#c7dcf3;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.boot, .arena { padding: 16px; }
.boot { color: var(--muted); }

.topbar h1 { font-size: 1.35rem; margin: 0 0 12px; font-weight: 650; }
.topbar .sub { color: var(--muted); font-weight: 400; font-size: .95rem; }

.layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.board-wrap { position: relative; }

/* ---- board ---- */
.board {
  width: min(78vw, 560px); height: auto; aspect-ratio: 420 / 496;
  background: var(--board); border-radius: 12px; box-shadow: 0 8px 30px #0006;
  user-select: none; touch-action: manipulation; padding: 6px;
}
.board.over { filter: saturate(.7) brightness(.9); }

.cell { cursor: pointer; }
.home1 .hole { fill: var(--home1); }
.home2 .hole { fill: var(--home2); }
.hole { fill: var(--hole); stroke: var(--hole-edge); stroke-width: 1; transition: r .08s ease; }
.hole.target { fill: var(--target); stroke: var(--trail); stroke-width: 2; }

.marble { stroke-width: 2; }
.marble.p1 { fill: var(--p1); stroke: var(--p1-edge); }
.marble.p2 { fill: var(--p2); stroke: var(--p2-edge); }
.marble.selected { stroke: var(--accent); stroke-width: 3; }
.marble.moved { stroke: var(--trail); stroke-width: 3; }

.trail { stroke: var(--trail); stroke-width: 3; stroke-linecap: round; opacity: .8; stroke-dasharray: 2 6; }

/* ---- side panel ---- */
.panel { flex: 1 1 260px; min-width: 240px; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.status { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.status.final { color: var(--accent); }
.spinner { width: 13px; height: 13px; border: 2px solid var(--muted); border-top-color: transparent;
  border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- progress ---- */
.progress { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; }
.prow { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.plabel { font-weight: 600; }
.pcount { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.chip.p1 { background: var(--p1); border: 2px solid var(--p1-edge); }
.chip.p2 { background: var(--p2); border: 2px solid var(--p2-edge); }
.pbar { height: 7px; background: #0003; border-radius: 4px; overflow: hidden; }
.pfill { height: 100%; transition: width .35s ease; }
.pfill.you { background: linear-gradient(90deg, var(--p1), #ffb0a8); }
.pfill.ai { background: linear-gradient(90deg, var(--p2), #a8ccff); }

/* ---- controls ---- */
.controls { display: flex; flex-direction: column; gap: 8px; }
.ctl-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.controls button { background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 11px; cursor: pointer; font-size: .9rem; }
.controls button:hover { border-color: var(--accent); }
.controls label { color: var(--muted); font-size: .85rem; display: flex; align-items: center; gap: 6px; }
.controls select { background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px; }

.export { display: flex; flex-direction: column; gap: 8px; }
.engine-note { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.engine-note code { background: #8881; padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: #b33; color: #fff; padding: 8px 12px; z-index: 100; }
#blazor-error-ui .reload, #blazor-error-ui .dismiss { color: #fff; margin-left: 8px; cursor: pointer; }

@media (max-width: 620px) {
  .layout { gap: 14px; } .board { width: 94vw; } .panel { max-width: none; }
}