:root {
  --ink: #102d2d;
  --ink-deep: #081c1c;
  --paper: #e5bd78;
  --paper-light: #f3d498;
  --red: #b72f28;
  --mist: #dce8e3;
  --white: #f8faf6;
  --line: rgba(230, 245, 238, .18);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--white);
  background:
    radial-gradient(circle at 18% 14%, rgba(62, 117, 105, .32), transparent 28rem),
    repeating-linear-gradient(105deg, transparent 0 24px, rgba(255,255,255,.012) 25px 26px),
    var(--ink-deep);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

button, select { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 18px 0 44px; }
.topbar { display: none; }
.eyebrow { margin: 0 0 4px; color: #8fb1a8; font: 600 10px/1.2 ui-monospace, monospace; letter-spacing: .24em; }
h1 { margin: 0; font-family: STKaiti, KaiTi, serif; font-size: clamp(34px, 5vw, 54px); font-weight: 500; letter-spacing: .12em; }
h1 span { color: #d78776; font-size: .5em; margin-left: .5em; vertical-align: .25em; letter-spacing: .2em; }
.engine-badge { display: flex; align-items: center; gap: 9px; color: #a8c1ba; font-size: 12px; padding-bottom: 8px; }
.engine-badge i { width: 7px; height: 7px; border-radius: 50%; background: #d7a949; box-shadow: 0 0 0 5px rgba(215,169,73,.11); }
.engine-badge.ready i { background: #70bd8b; box-shadow: 0 0 0 5px rgba(112,189,139,.11); }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }
.board-stage { position: relative; padding: clamp(15px, 2.4vw, 28px); border: 1px solid var(--line); background: rgba(16,45,45,.68); box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.board-wrap { width: min(100%, 650px); margin: auto; aspect-ratio: 9 / 10; }
#board { width: 100%; height: 100%; display: block; outline: none; touch-action: manipulation; }
#board:focus-visible { filter: drop-shadow(0 0 5px rgba(242,207,147,.75)); }
.turn-ribbon { position: relative; z-index: 2; width:max-content; margin:0 5px 8px; background:rgba(92,92,92,.72); color:#f4f4f1; padding:6px 12px; border:1px solid rgba(255,255,255,.13); font-size:11px; letter-spacing:.1em; box-shadow:none; backdrop-filter:blur(5px); }
.turn-ribbon::after { display:none; }
.turn-ribbon.black-turn { background:rgba(92,92,92,.72); }
.board-hint { text-align: center; margin: 16px 0 0; color: #9bb8b0; font-size: 12px; }
.board-legend { display:flex; justify-content:center; gap:18px; margin-top:7px; color:#6f9189; font-size:9px; }
.board-legend span { display:flex; align-items:center; gap:5px; }
.board-legend i { width:15px; height:2px; display:inline-block; }
.recommend-key { background:#d09235; box-shadow:0 0 5px rgba(208,146,53,.45); }
.history-key { background:#29473f; }

.side-panel { display: grid; gap: 14px; }
.match-card, .controls, .analysis-card, .ledger { border: 1px solid var(--line); background: rgba(15,42,42,.78); }
.analysis-card { overflow:hidden; border-top:2px solid #b9914b; box-shadow:0 12px 32px rgba(0,0,0,.16); }
.match-card { padding: 20px; }
.player { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 11px; }
.avatar { width: 40px; height: 40px; display:grid; place-items:center; border-radius: 50%; background: #d8c8a8; color: #1c2927; border: 2px solid #71867f; font-family: STKaiti, KaiTi, serif; font-size: 18px; }
.red-avatar { background: #e7c28b; color: #a52622; border-color: #b72f28; }
.player small { display:block; color:#789b92; font-size:10px; margin-bottom:3px; }
.player strong { font-size:14px; font-weight:600; }
.side-tag { border: 1px solid #71867f; color:#a9c0ba; padding:3px 6px; font-size:10px; }
.red-tag { border-color:#8f3934; color:#dd9185; }
.opponent-echo { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:13px -20px -2px; padding:9px 20px; border-top:1px solid rgba(230,245,238,.1); border-bottom:1px solid rgba(230,245,238,.1); background:rgba(229,189,120,.055); }
.opponent-echo small { color:#6f9189; font-size:9px; letter-spacing:.08em; }
.opponent-echo strong { color:#e2d2ae; font:600 11px/1.2 ui-monospace, "Microsoft YaHei", monospace; text-align:right; }
.opponent-echo.has-move { border-left:2px solid #b9a46f; padding-left:18px; }
.versus { display:flex; align-items:center; gap:10px; margin:15px 0; color:#6f9189; font-size:9px; letter-spacing:.16em; }
.versus span { flex:1; height:1px; background:var(--line); }
.versus b { font-weight:500; }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px; }
.controls button, .section-title button { border: 1px solid #46645d; color:#d8e5e0; background:transparent; padding:10px; transition:.18s ease; }
.controls button:hover { border-color:#8faea6; background:rgba(255,255,255,.04); }
.controls .primary { background:#aa302b; border-color:#aa302b; color:white; }
.controls .primary:hover { background:#c43a33; border-color:#c43a33; }
.depth-control { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; padding-top:7px; color:#8eaaa3; font-size:12px; }
.depth-control select { color:#dce8e3; border:0; border-bottom:1px solid #46645d; background:#102d2d; padding:5px 16px 5px 6px; }
.side-choice { border-top:1px solid var(--line); margin-top:2px; padding-top:10px; }
.rule-status { grid-column:1 / -1; display:flex; align-items:center; gap:7px; margin:0; padding-top:3px; color:#71958c; font-size:9px; }
.rule-status i { width:6px; height:6px; border-radius:50%; background:#c49c52; box-shadow:0 0 0 4px rgba(196,156,82,.09); }
.ledger { min-height: 190px; }
.section-title { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); font-size:12px; color:#adc2bc; }
.section-title button { border:0; padding:3px; color:#789b92; font-size:11px; }
.section-actions { display:flex; align-items:center; gap:10px; }
.live-mark { display:inline-flex; align-items:center; gap:6px; color:#7fa69b; font-size:9px; letter-spacing:.08em; }
.live-mark::before { content:""; width:5px; height:5px; border-radius:50%; background:#70bd8b; box-shadow:0 0 0 4px rgba(112,189,139,.1); }
.analysis-body { padding: 15px 14px 14px; }
.rate-head { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:8px; }
.rate-head strong { font:700 23px/1 ui-monospace, monospace; color:#ef9a8d; letter-spacing:-.04em; }
.rate-head strong:last-child { color:#c9d8d3; text-align:right; }
.rate-head span { color:#71958c; font-size:9px; letter-spacing:.08em; }
.win-bar { display:flex; height:12px; margin:12px 0 8px; overflow:hidden; border-radius:999px; background:#52655f; box-shadow:inset 0 1px 3px rgba(0,0,0,.35); }
.win-bar i { display:block; height:100%; transition:width .35s ease; }
.red-win { width:50%; background:#b73932; }
.draw-win { width:0%; background:#c9b785; }
.black-win { width:50%; background:#62756f; }
.rate-labels { display:flex; justify-content:space-between; align-items:center; color:#789b92; font-size:10px; }
.recommend-row { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:12px; margin-top:10px; padding:9px 11px; border:1px solid rgba(216,185,119,.22); background:rgba(216,185,119,.055); }
.recommend-copy { min-width:0; display:grid; gap:4px; }
.recommend-copy small { color:#8facA4; font-size:9px; letter-spacing:.12em; }
.recommend-copy strong { overflow:hidden; color:#f0d79c; font:700 16px/1.15 ui-monospace,"Microsoft YaHei",monospace; text-overflow:ellipsis; white-space:nowrap; }
#recommendButton { min-height:40px; border:1px solid #c59a4d; padding:8px 13px; color:#1b261f; background:#d7b66f; font-weight:700; transition:.18s ease; }
#recommendButton:hover { background:#efd08c; border-color:#efd08c; }
#recommendButton[aria-pressed="true"] { color:#f5dfac; background:#7b3d2d; border-color:#b66b4f; }
.analysis-meta { display:flex; align-items:center; justify-content:space-between; margin-top:10px; color:#789b92; font-size:9px; }
.analysis-meta b { color:#d8c9a7; font:600 10px/1 ui-monospace,monospace; }
#moveList { max-height:270px; overflow:auto; margin:0; padding:10px 14px 14px 40px; color:#c6d7d2; font: 12px/1.9 ui-monospace, "Microsoft YaHei", monospace; }
#moveList li { padding-left:4px; }
#moveList .empty { color:#64837b; list-style:none; margin-left:-26px; }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%, 14px); padding:9px 15px; color:#15302c; background:#edf0df; font-size:12px; opacity:0; pointer-events:none; transition:.2s; box-shadow:0 8px 30px rgba(0,0,0,.25); }
.toast.show { opacity:1; transform:translate(-50%, 0); }
button:focus-visible, select:focus-visible { outline:2px solid #e2bf7d; outline-offset:2px; }

@media (max-width: 820px) {
  .shell { width:min(100% - 20px, 650px); padding-top:10px; }
  .game-layout { grid-template-columns:1fr; gap:10px; }
  .side-panel { display:contents; }
  .board-stage { order:1; }
  .controls { order:2; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; padding:8px; }
  .analysis-card { order:3; }
  .match-card { order:4; }
  .ledger { order:5; }
  .analysis-card, .ledger { grid-column:1 / -1; }
  .controls button { min-height:52px; padding:7px 5px; font-size:12px; }
  .depth-control { grid-column:auto; min-width:0; flex-direction:column; justify-content:center; gap:4px; padding:6px 4px; border:1px solid #46645d; color:#adc2bc; text-align:center; }
  .depth-control select { width:100%; border:0; padding:2px; font-size:11px; text-align:center; }
  .side-choice { margin:0; }
  .rule-status { grid-column:1 / -1; padding:2px 4px 0; }
  #recommendButton { min-height:52px; padding:7px 5px; font-size:12px; }
  .analysis-body { padding:10px 14px; }
  .rate-head strong { font-size:20px; }
  .win-bar { height:8px; margin:9px 0 6px; }
  .recommend-row { margin-top:8px; padding:7px 10px; }
  .recommend-copy { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .recommend-copy strong { font-size:13px; }
  .analysis-meta { margin-top:7px; }
}
@media (max-width: 520px) {
  .shell { width:100%; padding:8px 10px 28px; }
  .game-layout { gap:10px; }
  .board-stage { padding:7px 5px 12px; }
  .turn-ribbon { margin-bottom:6px; }
  .analysis-card, .ledger { grid-column:auto; }
  .controls { grid-template-columns:repeat(2,minmax(0,1fr)); padding:7px; }
  .controls button, .depth-control { min-height:47px; }
  #recommendButton { grid-column:1 / -1; min-height:46px; font-size:13px; }
  .analysis-card { border-color:rgba(215,182,111,.34); box-shadow:0 10px 24px rgba(0,0,0,.2); }
  .analysis-card .section-title { padding:9px 12px; font-size:11px; }
  .analysis-body { padding:9px 12px 10px; }
  .rate-head strong { font-size:18px; }
  .rate-head span { font-size:9px; }
  .win-bar { height:7px; margin:8px 0 5px; }
  .rate-labels { font-size:9px; }
  .recommend-row { margin-top:7px; padding:6px 9px; }
  .recommend-copy small { font-size:8px; }
  .recommend-copy strong { font-size:12px; }
  .analysis-meta { margin-top:6px; font-size:8px; }
  .match-card { padding:16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; } }