/* QQ 游戏「四国军棋」经典皮肤复刻。配色与几何取样自真实截图，见 docs/RESEARCH.md §6 */
:root {
  /* 棋盘 / 界面 */
  --bg: #414425;            /* 深橄榄军绿，整窗背景 */
  --bg-dark: #33361d;
  --bg-light: #4d5030;
  --rail: #ccd0b8;          /* 铁路：浅灰白芯 */
  --rail-edge: #8e9270;     /* 铁路描边（暗一档，做出立体轨道感）*/
  --road: #b2c95f;          /* 公路：淡黄绿细线 */
  --camp: #c08040;          /* 行营：橙棕圆环 */
  --slot: #9aa374;          /* 空位轮廓 */
  --ink: #e8e6d2;
  --muted: #a8a98c;
  --gold: #e0b352;
  --btn: #d0730f;           /* QQ 橙色按钮 */
  --btn-hi: #f08a1c;
  /* 四方棋子色（QQ 原版取样）*/
  --orange: #d56d00; --orange-hi: #f08c1e; --orange-lo: #a04f00;
  --purple: #8d439d; --purple-hi: #ac5cbd; --purple-lo: #662c74;
  --green:  #7fae2a; --green-hi:  #9cc846; --green-lo:  #5b7f16;
  --blue:   #25689c; --blue-hi:   #3d87c0; --blue-lo:   #164a75;
  font-family: "SimSun", "宋体", "Noto Serif CJK SC", "Source Han Serif SC", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
button { font: inherit; cursor: pointer; font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }

#app { display: flex; flex-direction: column; height: 100vh; background: var(--bg); }

/* 顶栏：QQ 深色工具条 */
#topbar { display: flex; align-items: center; gap: 16px; padding: 5px 12px;
  background: linear-gradient(#565937, #3c3f22); border-bottom: 1px solid #23250f;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); color: var(--ink);
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
#topbar .brand { font-weight: 700; letter-spacing: 3px; font-size: 17px; color: var(--gold);
  text-shadow: 0 1px 2px #000; font-family: "SimSun","宋体",serif; }
#topbar .topbar-status { flex: 1; font-size: 13px; color: #d3d2b4; }
#topbar .tb { background: linear-gradient(#6c7046, #4b4e2c); border: 1px solid #23250f;
  border-radius: 3px; padding: 4px 12px; color: var(--ink); font-size: 13px; }
#topbar .tb:hover { background: linear-gradient(#7f8455, #5a5e35); }

#main { flex: 1; display: flex; min-height: 0; }
#board-wrap { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 6px; min-width: 0; }
#board-stage { position: relative; height: min(100%, calc(100vw - 320px)); aspect-ratio: 1; }
#board { width: 100%; height: 100%; display: block; user-select: none; overflow: visible; }

/* ── 棋盘线 ── */
.road { stroke: var(--road); stroke-width: .065; fill: none; opacity: .95; }
.rail { stroke: var(--rail-edge); stroke-width: .115; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rail-tie { stroke: var(--rail); stroke-width: .075; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cell-camp { fill: #3f4223; stroke: var(--camp); stroke-width: .10; }
.cell-slot { fill: rgba(0,0,0,.12); stroke: var(--slot); stroke-width: .018; opacity: .28; }
.cell-hq   { fill: rgba(0,0,0,.16); stroke: var(--camp); stroke-width: .032; opacity: .6; }
.cell-slot.nine { fill: #3f4223; stroke: var(--rail); stroke-width: .055; opacity: .9; }
.cell-hit { fill: transparent; cursor: default; }
.cell-hit.reachable { cursor: pointer; }
.reach-dot { fill: #ffe14d; stroke: rgba(0,0,0,.5); stroke-width: .02; pointer-events: none; }
.reach-ring { fill: none; stroke: #ff3b2f; stroke-width: .06; pointer-events: none; }

/* ── 棋子：QQ 扁平矩形 + 立体边 ── */
.piece { cursor: default; }
.piece.mine { cursor: pointer; }
.piece rect.body { stroke-width: .022; }
.piece.orange rect.body { fill: var(--orange); stroke: var(--orange-lo); }
.piece.purple rect.body { fill: var(--purple); stroke: var(--purple-lo); }
.piece.green  rect.body { fill: var(--green);  stroke: var(--green-lo); }
.piece.blue   rect.body { fill: var(--blue);   stroke: var(--blue-lo); }
.piece line.hi { stroke-width: .028; opacity: .75; }
.piece.orange line.hi { stroke: var(--orange-hi); }
.piece.purple line.hi { stroke: var(--purple-hi); }
.piece.green  line.hi { stroke: var(--green-hi); }
.piece.blue   line.hi { stroke: var(--blue-hi); }
.piece text { fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none;
  font-family: "SimSun", "宋体", "Noto Serif CJK SC", serif; font-weight: 700; }
.piece text.two { font-size: .40px; letter-spacing: .005px; }
.piece text.one { font-size: .48px; }
.piece text.mark { fill: #ffe14d; font-size: .38px; font-weight: 700; }
.piece.selected rect.body { stroke: #ff2d20; stroke-width: .075; }
.piece.last-moved rect.body { stroke: #ffe14d; stroke-width: .05; }
.piece.flag-shown rect.body { stroke: #ffd400; stroke-width: .06; }
.piece.dead { opacity: 0; transition: opacity .3s; }
.route-line { stroke: #ffe14d; stroke-width: .09; fill: none; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none; opacity: .9; }
.route-arrow { fill: #ffe14d; stroke: rgba(0,0,0,.45); stroke-width: .015; pointer-events: none; }
.fx-boom { fill: none; stroke: #ff9a3a; stroke-width: .085; opacity: .9; pointer-events: none; }
.fx-text { font-size: .55px; font-weight: 900; fill: #ffe14d; stroke: #6b1200; stroke-width: .045;
  paint-order: stroke; text-anchor: middle; pointer-events: none;
  font-family: "SimSun","宋体",serif; }

/* ── 座位牌：QQ 玩家框 ── */
.seat-tag { position: absolute; padding: 5px 7px; border-radius: 3px; font-size: 12px; width: 30%; max-width: 190px;
  display: flex; gap: 7px; align-items: center;
  background: linear-gradient(#4e5130, #383a1e); border: 1px solid #23250f;
  box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  color: var(--ink); pointer-events: none;
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
.seat-tag .nm { font-weight: 700; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-tag .dot { width: 11px; height: 11px; border-radius: 2px; display: inline-block; border: 1px solid rgba(0,0,0,.6); }
.seat-tag .sub { color: #bcbc9c; font-size: 11px; margin-top: 2px; }
.seat-tag.active { border-color: var(--gold); box-shadow: 0 0 10px rgba(224,179,82,.55), 0 2px 8px rgba(0,0,0,.5); }
.seat-tag.dead { opacity: .42; filter: grayscale(.7); }
.seat-tag.hidden { display: none; }
/* 棋盘是十字形，四角空白正好放玩家框（同 QQ）。逆时针：南右下→东右上→北左上→西左下 */
#seat-0 { right: 1%; bottom: 3%; }  #seat-1 { right: 1%; top: 3%; }
#seat-2 { left: 1%; top: 3%; }      #seat-3 { left: 1%; bottom: 3%; }
.seat-tag .avatar { width: 34px; height: 34px; flex: none; border-radius: 2px;
  border: 1px solid #23250f; background: linear-gradient(#5b5f3a, #3a3d20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); position: relative; }
.seat-tag .avatar::after { content: '★'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 17px; color: var(--tint, #999); text-shadow: 0 1px 2px #000; }
.seat-tag .info { min-width: 0; flex: 1; }
@keyframes pop { from { transform: scale(.75); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* ── 侧栏 ── */
#side { width: 300px; padding: 8px; display: flex; flex-direction: column; gap: 7px; overflow: auto;
  background: linear-gradient(#43462a, #383b1f); border-left: 2px solid #23250f;
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
.panel { background: rgba(0,0,0,.2); border: 1px solid #23250f; border-radius: 4px; padding: 8px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.panel h3 { margin: 0 0 7px; font-size: 13px; letter-spacing: 1px; color: var(--gold);
  border-bottom: 1px solid #55583a; padding-bottom: 5px; }
.hint { font-size: 11.5px; color: var(--muted); margin: 0 0 7px; line-height: 1.55; }
.row { display: flex; gap: 7px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.row.right { justify-content: flex-end; }
.row label { min-width: 44px; font-size: 12px; color: var(--muted); }
select, input { font: inherit; font-size: 12px; padding: 3px 5px; border: 1px solid #23250f; border-radius: 3px;
  background: #f2eeda; color: #2a2716; }
.panel button, .modal button, .mark-menu button {
  background: linear-gradient(#6c7046, #4b4e2c); border: 1px solid #23250f; border-radius: 3px;
  padding: 4px 11px; color: var(--ink); font-size: 12px; }
.panel button:hover, .modal button:hover, .mark-menu button:hover { background: linear-gradient(#7f8455, #5a5e35); }
button.primary { background: linear-gradient(var(--btn-hi), var(--btn)); border-color: #7a3f00; color: #fff; font-weight: 700; }
button.primary:hover { background: linear-gradient(#ffa034, #e8830f); }
.turn-info { font-size: 12.5px; margin-bottom: 5px; color: #ddd9bd; }
.timer { font-size: 30px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
  color: var(--gold); border: 2px solid #23250f; border-radius: 3px; width: 82px; margin: 5px auto;
  background: #23250f; text-shadow: 0 0 8px rgba(224,179,82,.5);
  font-family: "Microsoft YaHei", monospace; }
.timer.warn { color: #ff6a4d; text-shadow: 0 0 10px rgba(255,80,50,.7); }
#panel-log { flex: 1; min-height: 110px; display: flex; flex-direction: column; }
#log { margin: 0; padding-left: 20px; font-size: 11.5px; line-height: 1.6; overflow: auto; flex: 1; color: #cfcbaa; }
#log li.hl { color: #ffca6a; font-weight: 600; }

/* ── 弹窗 ── */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 20; }
.modal[hidden] { display: none; }
.modal-box { width: min(660px, 94vw); max-height: 92vh; overflow: auto; padding: 16px 20px;
  background: linear-gradient(#4a4d2e, #3b3e21); border: 2px solid #23250f; border-radius: 5px;
  box-shadow: 0 12px 44px rgba(0,0,0,.7); color: var(--ink);
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
.modal-box.small { width: min(400px, 92vw); }
.modal-box h2 { margin: 0 0 12px; font-size: 19px; color: var(--gold); font-family: "SimSun","宋体",serif; letter-spacing: 2px; }
.modal-box h3 { margin: 13px 0 6px; font-size: 13px; color: var(--gold); border-bottom: 1px solid #55583a; padding-bottom: 4px; }
.grid2 { display: grid; grid-template-columns: 84px 1fr; gap: 7px 11px; align-items: center; font-size: 13px; }
.seg { display: inline-flex; border: 1px solid #23250f; border-radius: 3px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; border-right: 1px solid #23250f; padding: 4px 11px; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: linear-gradient(var(--btn-hi), var(--btn)); color: #fff; font-weight: 700; }
.rules { font-size: 13px; line-height: 1.75; padding-left: 18px; color: #ddd9bd; }
code { background: #23250f; color: var(--gold); padding: 1px 5px; border-radius: 2px; font-size: 11.5px; }

.mark-menu { position: fixed; z-index: 30; padding: 5px; display: grid; grid-template-columns: repeat(4, 32px); gap: 3px;
  background: linear-gradient(#4a4d2e, #3b3e21); border: 1px solid #23250f; border-radius: 4px;
  box-shadow: 0 5px 18px rgba(0,0,0,.6); }
.mark-menu[hidden] { display: none; }
.mark-menu button { padding: 3px 0; font-size: 12px; }
.mark-menu button.wide { grid-column: span 4; }

@media (max-width: 900px) {
  #main { flex-direction: column; }
  #board { height: auto; width: 100%; max-height: 68vh; }
  #side { width: 100%; border-left: 0; border-top: 2px solid #23250f; }
}

/* ── 复盘 ── */
.modal-box.replay-box { width: min(1080px, 96vw); }
.replay-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.replay-head h2 { margin: 0; flex: none; }
.replay-head select { flex: 1; min-width: 0; }
.replay-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: start; }
.replay-board { background: var(--bg-dark); border: 1px solid #23250f; border-radius: 4px; padding: 6px; }
#replay-svg { width: 100%; height: auto; display: block; max-height: 62vh; }
.replay-side { background: rgba(0,0,0,.22); border: 1px solid #23250f; border-radius: 4px; padding: 8px 8px 8px 0; }
#replay-moves { margin: 0; padding-left: 30px; font-size: 11.5px; line-height: 1.65; color: #cfcbaa;
  max-height: 62vh; overflow: auto; }
#replay-moves li { cursor: pointer; padding: 1px 4px; border-radius: 2px; }
#replay-moves li:hover { background: rgba(255,255,255,.07); }
#replay-moves li.on { background: rgba(224,179,82,.22); color: #ffca6a; font-weight: 600; }
.replay-ctrl { display: flex; align-items: center; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.replay-ctrl #rp-pos { font-family: monospace; font-size: 12px; color: var(--gold); margin-left: 4px; }
.replay-ctrl .hint { margin: 0; flex: 1; min-width: 140px; }
@media (max-width: 860px) {
  .replay-body { grid-template-columns: 1fr; }
  #replay-moves { max-height: 22vh; }
}

.lib-idx { min-width: 64px; font-variant-numeric: tabular-nums; }

/* hidden 属性要压过 .row 等 display:flex（否则「重试」「我的布局」藏不住） */
[hidden] { display: none !important; }
/* 神经网络加载层 */
.modal.loading { background: var(--bg-dark); z-index: 50; }
.load-box { text-align: left; }
.load-msg { margin: 4px 0 12px; font-size: 14px; color: var(--ink); }
.load-bar { height: 12px; border-radius: 6px; background: #26281a; border: 1px solid #55583a; overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--btn), var(--gold)); transition: width .15s linear; }
.load-bar.busy i { width: 100% !important; background: repeating-linear-gradient(-45deg, var(--btn) 0 12px, var(--gold) 12px 24px); background-size: 34px 34px; animation: loadstripe .8s linear infinite; }
@keyframes loadstripe { to { background-position: 34px 0; } }
.load-num { margin: 8px 0 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }