:root{
  --bg:#0f0f13; --fg:#e9eaee; --muted:#9aa0a6;
  --board:#f7ebd0; --river:#e4d4b4; --line:#333; --red:#b71c1c; --black:#111;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}

.topbar,.foot{display:flex;align-items:center;justify-content:space-between;
  padding:.5rem 1rem;background:#15161a;border-bottom:1px solid #222}
.foot{border-top:1px solid #222;border-bottom:none;opacity:.9}
.topbar .left,.topbar .right{display:flex;gap:.5rem;align-items:center}
button,select,label.toggle{background:#272a31;color:var(--fg);border:1px solid #333;
  border-radius:.4rem;padding:.4rem .6rem;cursor:pointer}
button:hover,select:hover{filter:brightness(1.07)}
label.toggle{display:flex;align-items:center;gap:.35rem}

.wrap{display:flex;gap:1rem;max-width:1200px;margin:1rem auto;padding:0 1rem}

/* —— 关键修复：外层强制 9:10 比例，canvas 100%填充，内部像素为 540×600 —— */
.board-wrap{
  position:relative;
  width:min(92vw,92vh);
  aspect-ratio: 9 / 10;   /* 与 540×600 完全一致 */
  margin:0 auto;
}
#board{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:var(--board);
  border-radius:.5rem;
  display:block; /* 去除行内块缝隙 */
}

/* 侧栏 */
.panel{width:320px;min-width:260px;background:#15161a;border:1px solid #222;
  border-radius:.5rem;padding:1rem;overflow:auto;max-height:80vh}
.panel h3{margin:.6rem 0 .3rem}
#moves{padding-left:1.2rem;margin-top:.2rem;line-height:1.4}
#status{color:#9ad06c}

@media (max-width:980px){
  .wrap{flex-direction:column}
  .panel{width:100%;max-width:900px;max-height:none}
}