/* banqi — 暗棋 */

.app { max-width: 720px; padding-bottom: 32px; }

/* ── HUD ───────────────────────────────────────────────── */
.hud {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 12px auto;
  max-width: 560px;
}
.hud-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  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; }

/* ── Side bars (name, colour, captured tray) ───────────── */
.side-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 6px 10px;
  margin: 6px auto;
  max-width: 600px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
  min-height: 46px;
  color: var(--text-strong);
}
.side-bar.active { border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); }
.side-name { font-weight: 800; font-size: 14px; white-space: nowrap; }
.side-color { font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.side-color.red { background: #c62828; color: #fff; }
.side-color.black { background: #263238; color: #fff; }
body.dark .side-color.black { background: #eceff1; color: #111; }
.side-color.unknown { background: var(--select-bg); color: var(--text); }
.tray { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; min-width: 0; justify-content: flex-end; }

/* ── Board ─────────────────────────────────────────────── */
.board-wrap { display: flex; justify-content: center; }
.board {
  --cell: min(68px, calc((100vw - 44px) / 8));
  display: grid;
  grid-template-columns: repeat(8, var(--cell));
  grid-template-rows: repeat(4, var(--cell));
  gap: 0;
  padding: 8px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #e4c08a, #d4a86a);
  border: 3px solid #8b5a2b;
  box-shadow: inset 0 0 18px rgba(90,50,10,0.35), var(--shadow-md);
}
body.dark .board { background: linear-gradient(135deg, #8a6a42, #6e5232); border-color: #4e3418; }
.cell {
  position: relative;
  width: var(--cell);
  height: var(--cell);
  padding: 0;
  margin: 0;
  border: 0;
  border-right: 1px solid rgba(90,50,10,0.45);
  border-bottom: 1px solid rgba(90,50,10,0.45);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  font: inherit;
  color: inherit;
}
.cell:nth-child(8n) { border-right: 0; }
.cell:nth-child(n+25) { border-bottom: 0; }
.cell.actionable { cursor: pointer; }
.cell:focus-visible { outline: 3px solid #1565c0; outline-offset: -3px; z-index: 2; }
.cell.last-from { background: rgba(255, 235, 59, 0.28); }
.cell.last-to { background: rgba(255, 193, 7, 0.42); }
.cell.selected { background: rgba(33, 150, 243, 0.35); }
.cell.target::after {
  content: "";
  position: absolute;
  width: 28%; height: 28%;
  border-radius: 50%;
  background: rgba(46, 125, 50, 0.75);
  box-shadow: 0 0 8px rgba(46,125,50,0.8);
  pointer-events: none;
}
.cell.target.capture::after {
  width: 92%; height: 92%;
  background: transparent;
  border: 4px solid rgba(229, 57, 53, 0.9);
  box-shadow: 0 0 10px rgba(229,57,53,0.7);
  box-sizing: border-box;
  animation: target-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes target-pulse { from { transform: scale(0.94); } to { transform: scale(1.02); } }
.cell.shake { animation: info-shake 0.3s ease; }

/* ── Pieces (round xiangqi discs) ──────────────────────── */
.piece {
  width: 84%;
  height: 84%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fffaf0, #f3dfb8 60%, #d9b77f);
  box-shadow: 0 3px 0 #a07840, 0 4px 6px rgba(0,0,0,0.35);
  font-family: "Kaiti TC", "STKaiti", "BiauKai", "DFKai-SB", "Noto Serif TC", "Songti TC", serif;
  font-weight: 900;
  font-size: calc(var(--cell) * 0.46);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.piece-ring {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}
.piece.red { color: #c62828; }
.piece.black { color: #1b1b1b; }
.piece.hidden {
  background:
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(255,255,255,0.12) 39%, rgba(255,255,255,0.12) 44%, transparent 45%),
    radial-gradient(circle at 35% 30%, #7a5532, #5a3a1e 65%, #3e2612);
  box-shadow: 0 3px 0 #2a180a, 0 4px 6px rgba(0,0,0,0.4);
}
.cell.selected .piece { transform: translateY(-3px); box-shadow: 0 6px 0 #a07840, 0 8px 10px rgba(0,0,0,0.35), 0 0 0 3px #1e88e5; }
.cell.actionable:hover .piece.hidden { filter: brightness(1.2); }
.piece.flip-in { animation: piece-flip 0.4s ease backwards; }
@keyframes piece-flip { from { transform: rotateY(90deg) scale(1.1); } to { transform: rotateY(0) scale(1); } }
.piece.moved-in { animation: piece-in 0.25s ease backwards; }
@keyframes piece-in { from { transform: scale(1.25); } to { transform: scale(1); } }
.piece.mini { width: 26px; height: 26px; font-size: 14px; box-shadow: 0 2px 0 #a07840; --cell: 30px; }
.piece.mini .piece-ring { border-width: 1px; }

/* ── Status / banner / controls ────────────────────────── */
.status-line { font-size: 15px; font-weight: 700; text-align: center; min-height: 22px; margin-top: 8px; color: var(--text-strong); }
.status-line.mine { color: color-mix(in srgb, var(--accent) 60%, var(--text-strong)); }
.quiet-line { font-size: 12px; text-align: center; color: var(--text-muted); min-height: 16px; }
.dots i { font-style: normal; animation: dot-blink 1.2s infinite; opacity: 0.2; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-blink { 30% { opacity: 1; } }
.result-banner {
  max-width: 420px;
  margin: 8px auto;
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text-strong);
  animation: banner-pop 0.35s cubic-bezier(.2,1.4,.5,1);
}
.result-banner[hidden] { display: none; }
.result-banner.win { border-color: #f9a825; box-shadow: 0 0 16px rgba(249,168,37,0.45); }
.result-banner.lose { border-color: #e57373; }
.banner-head { font-size: 20px; font-weight: 900; }
.banner-sub { font-size: 13px; margin-top: 2px; }
.banner-delta { font-size: 16px; font-weight: 800; margin-top: 4px; color: #e65100; }
body.dark .banner-delta { color: #ffb74d; }
@keyframes banner-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.controls { display: flex; justify-content: center; gap: 10px; margin: 10px 0 14px; }
.controls .btn { min-width: 130px; }
.controls .btn.armed { background: #c62828; color: #fff; }
@keyframes info-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.legend { font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.6; }

@media (max-width: 640px) {
  .board { padding: 5px; --cell: calc((100vw - 34px) / 8); }
  .hud-value { font-size: 18px; }
  .piece.mini { width: 22px; height: 22px; font-size: 12px; }
}

:where(body:not(.dark)) .hud-value { color: color-mix(in srgb, var(--accent) 55%, #000); }