/* ========== 基础 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #0e1014;
  --bg2: #161a21;
  --panel: rgba(255, 255, 255, .045);
  --border: rgba(255, 255, 255, .09);
  --text: #e9ecf2;
  --text-dim: #8b93a3;
  --accent: #e8b64c;
  --accent-soft: rgba(232, 182, 76, .16);
  --grid: rgba(233, 236, 242, .13);
  --grid-major: rgba(233, 236, 242, .27);
  --ruler: rgba(233, 236, 242, .38);
  --overlay: rgba(13, 15, 19, .62);
  --chip-b: linear-gradient(145deg, #565c68, #101216);
  --chip-w: linear-gradient(145deg, #ffffff, #c6cad2);
  --danger: #e0655a;
}
[data-theme="light"] {
  --bg: #f2eddf;
  --bg2: #faf6ec;
  --panel: rgba(0, 0, 0, .045);
  --border: rgba(0, 0, 0, .1);
  --text: #33302a;
  --text-dim: #948b7a;
  --accent: #a97c1d;
  --accent-soft: rgba(169, 124, 29, .14);
  --grid: rgba(51, 48, 42, .18);
  --grid-major: rgba(51, 48, 42, .38);
  --ruler: rgba(51, 48, 42, .5);
  --overlay: rgba(244, 239, 225, .68);
  --chip-b: linear-gradient(145deg, #3d4148, #121418);
  --chip-w: linear-gradient(145deg, #ffffff, #d5d3c9);
  --danger: #c24f43;
}

html, body { height: 100%; }
body {
  background: radial-gradient(900px 520px at 50% -8%, var(--bg2), transparent 62%), var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  display: flex; flex-direction: column;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* ========== 顶栏 ========== */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) 20px 8px; }
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand b { font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, serif; font-size: 21px; letter-spacing: 7px; font-weight: 600; }
.brand small { font-size: 10px; letter-spacing: 3px; color: var(--text-dim); text-transform: uppercase; }
.controls { display: flex; gap: 8px; align-items: center; }
.vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 84px; height: 4px; border-radius: 2px;
  background: var(--border); outline: none; cursor: pointer;
  transition: opacity .2s;
}
.vol-slider.muted { opacity: .35; }
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: transform .15s;
}
.vol-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.vol-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: none; }
.vol-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border); }
@media (max-width: 460px) { .vol-slider { width: 56px; } }
.btn {
  height: 38px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-dim);
  font-size: 15px; cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color .2s, transform .15s, border-color .2s;
}
.btn:hover { color: var(--text); transform: translateY(-1px); }
.btn:active { transform: scale(.94); }
.btn.danger { color: var(--danger); border-color: rgba(224, 101, 90, .45); }

/* ========== 棋盘区 ========== */
main { flex: 1; min-height: 0; display: grid; place-items: center; padding: 6px 12px 4px; }
.board-wrap {
  position: relative;
  width: min(92vw, calc(100dvh - 172px));
  max-width: 660px;
  aspect-ratio: 1;
  touch-action: none;
  animation: rise .7s cubic-bezier(.2, .9, .3, 1) both;
}
.board-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 18px; cursor: crosshair; }
#cv-fx { pointer-events: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* ========== 浮动控件 ========== */
.fabs { position: absolute; right: 14px; bottom: 14px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.fab {
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-dim);
  font-size: 17px; cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color .2s, transform .15s;
}
.fab:hover { color: var(--text); transform: translateY(-1px); }
.fab:active { transform: scale(.93); }

/* ========== 胜利浮层 ========== */
.overlay {
  position: absolute; inset: 0; z-index: 6; border-radius: 18px;
  background: var(--overlay);
  backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.overlay.show { opacity: 1; pointer-events: auto; }
.overlay h2 { font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, serif; font-size: 26px; letter-spacing: 8px; font-weight: 600; }
.overlay.show h2 { animation: pop .45s cubic-bezier(.2, .9, .3, 1.3) both; }
.overlay p { color: var(--text-dim); font-size: 13px; letter-spacing: 2px; }
@keyframes pop { from { opacity: 0; transform: scale(.85); } }
.overlay-actions { display: flex; gap: 10px; margin-top: 6px; }
.btn-primary {
  padding: 11px 36px; border-radius: 999px;
  border: 1px solid var(--accent-soft); background: var(--accent-soft); color: var(--accent);
  font-size: 15px; letter-spacing: 5px; cursor: pointer;
  transition: transform .15s, filter .2s;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn-primary:active { transform: scale(.96); }
.btn-secondary {
  padding: 11px 24px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  font-size: 15px; letter-spacing: 2px; cursor: pointer;
  transition: transform .15s, color .2s;
}
.btn-secondary:hover { color: var(--text); transform: translateY(-1px); }
.btn-secondary:active { transform: scale(.96); }

/* ========== 状态栏 ========== */
.statusbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 20px calc(14px + env(safe-area-inset-bottom)); }
.status-center { display: flex; align-items: center; gap: 10px; }
.chip { width: 22px; height: 22px; border-radius: 50%; animation: chip-pulse 1.8s ease-in-out infinite; }
.chip.black { background: var(--chip-b); box-shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 0 0 4px rgba(232, 182, 76, .12); }
.chip.white { background: var(--chip-w); box-shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 0 0 4px rgba(232, 182, 76, .12); }
@keyframes chip-pulse { 50% { box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 0 0 8px rgba(232, 182, 76, .06); } }
#status-text { font-size: 15px; letter-spacing: 2px; }
.status-side { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.status-side:first-child { justify-content: flex-start; }
#move-count { color: var(--text-dim); font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.coord { color: var(--text-dim); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; min-width: 58px; text-align: right; white-space: nowrap; }