/* chinesecheckers — 跳棋 */

.app {
  max-width: 760px;
  padding-bottom: 32px;
  --seat0: #e53935;
  --seat1: #1e88e5;
  --seat2: #2e9d47;
}

/* ── HUD ───────────────────────────────────────────────── */
.hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px auto;
  max-width: 640px;
}
.hud-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 6px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.hud-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; }
.hud-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-value.small { font-size: 15px; line-height: 26px; }
.hud-value.hud-pulse { animation: hud-pulse 0.5s ease; }
@keyframes hud-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ── Controls ──────────────────────────────────────────── */
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}
.controls .btn { min-width: 92px; }
.mode-label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.mode-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #f06292, #d81b60);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(216, 27, 96, 0.25);
}
.mode-btn[aria-pressed="false"] { opacity: 0.8; }
.btn.primary {
  background: linear-gradient(180deg, #e74c3c, #c0392b);
  color: #fff;
}
.btn.primary.confirm { background: linear-gradient(180deg, #ff9800, #e65100); }

.status-line {
  min-height: 22px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 4px 0 8px;
}

/* ── Board ─────────────────────────────────────────────── */
.board-wrap {
  position: relative;
  /* keep the whole board + buttons on screen: width tracks the viewport height (board aspect ≈ 0.92) */
  max-width: min(560px, max(300px, calc((100vh - 390px) * 0.92)));
  margin: 0 auto;
}
.board:focus { outline: none; }
.board {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.star {
  fill: #d9b47c;
  stroke: #9a6b34;
  stroke-width: 6;
}
body.dark .star { fill: #5a4330; stroke: #2e2116; }
.corner-tint circle { fill: transparent; }
.corner-tint.home-0 circle { fill: rgba(229, 57, 53, 0.20); }
.corner-tint.home-1 circle { fill: rgba(30, 136, 229, 0.20); }
.corner-tint.home-2 circle { fill: rgba(46, 157, 71, 0.22); }
.corner-tint.goal-0 circle { fill: rgba(229, 57, 53, 0.10); stroke: rgba(229, 57, 53, 0.35); stroke-width: 1.5; stroke-dasharray: 4 3; }
.corner-tint.goal-1 circle { fill: rgba(30, 136, 229, 0.10); }
.corner-tint.goal-2 circle { fill: rgba(46, 157, 71, 0.10); }
.hole {
  fill: #8a6438;
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 1.5;
}
body.dark .hole { fill: #241a12; stroke: rgba(255, 255, 255, 0.08); }

.marble { stroke: rgba(0, 0, 0, 0.45); stroke-width: 2; }
.marble.seat-0 { fill: var(--seat0); }
.marble.seat-1 { fill: var(--seat1); }
.marble.seat-2 { fill: var(--seat2); }
.marble.hidden { visibility: hidden; }
.marble.last { stroke: #fff8d0; stroke-width: 3; }
.marble.pickable { cursor: pointer; }
.marble.pickable:hover { stroke: #fff; stroke-width: 3; }
.marble.selected {
  stroke: #ffd600;
  stroke-width: 5;
}
.marble:focus { outline: none; }
.marble.pickable:focus-visible { stroke: #ffd600; stroke-width: 4; stroke-dasharray: 5 3; }

.dest {
  fill: rgba(255, 214, 0, 0.55);
  stroke: #ffd600;
  stroke-width: 2.5;
  cursor: pointer;
  animation: dest-pulse 1.2s ease-in-out infinite alternate;
}
.dest.jump { stroke: #d50000; stroke-width: 3; }
.dest:hover, .dest:focus-visible { fill: rgba(255, 214, 0, 0.95); outline: none; }
@keyframes dest-pulse { from { fill-opacity: 0.55; } to { fill-opacity: 1; } }

.path-line {
  fill: none;
  stroke: #d50000;
  stroke-width: 3.5;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.path-dot { fill: #d50000; pointer-events: none; }
body.dark .path-line { stroke: #ff6e6e; }
body.dark .path-dot { fill: #ff6e6e; }
.flyer { pointer-events: none; }
.flyer .marble { stroke: #fff8d0; stroke-width: 3; }

.result-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 22px;
  border-radius: var(--radius-lg);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  background: rgba(30, 30, 30, 0.85);
  box-shadow: var(--shadow-lg);
  text-align: center;
  pointer-events: none;
  max-width: 90%;
}
.result-banner[hidden] { display: none; }
.result-banner.win { background: linear-gradient(180deg, #2e7d32, #1b5e20); }
.result-banner.lose { background: linear-gradient(180deg, #c62828, #8e0000); }
.result-banner.draw { background: linear-gradient(180deg, #616161, #424242); }

/* ── Players row ───────────────────────────────────────── */
.players {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 2px;
}
.player-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-strong);
}
.player-chip.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.player-chip .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.seat-bg-0 { background: var(--seat0); }
.seat-bg-1 { background: var(--seat1); }
.seat-bg-2 { background: var(--seat2); }
.hud-value.seat-text-0 { color: #c62828; }
.hud-value.seat-text-1 { color: #1565c0; }
.hud-value.seat-text-2 { color: #1b7a34; }
body.dark .hud-value.seat-text-0 { color: #ff7b72; }
body.dark .hud-value.seat-text-1 { color: #7ab8ff; }
body.dark .hud-value.seat-text-2 { color: #6fd38a; }

.legend {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
  padding: 0 8px;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
  .hud { gap: 6px; }
  .hud-value { font-size: 18px; }
  .hud-value.small { font-size: 13px; }
  .controls .btn { min-width: 74px; }
  .result-banner { font-size: 17px; padding: 10px 16px; }
}

/* Light mode: accent-gold HUD numbers on white were low contrast. Darken the active accent. */
:where(body:not(.dark)) .hud-value { color: color-mix(in srgb, var(--accent) 55%, #000); }