*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;min-height:100%;}
body{
  background:radial-gradient(1200px 700px at 50% -15%, #302317 0%, #1a1310 42%, #0b0908 100%);
  color:#e9e0d2;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  display:flex;align-items:center;justify-content:center;
  padding:26px 18px;
}
.app{display:flex;gap:26px;align-items:stretch;justify-content:center;max-width:1000px;width:100%;}

/* ================= 棋盘 ================= */
.board-wrap{display:flex;align-items:center;justify-content:center;}
.board{
  position:relative;
  width:min(92vw, 74vh, 540px);
  aspect-ratio:9/10;
  border-radius:8px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    linear-gradient(160deg,#f4e0b8 0%,#e8cb98 45%,#d9b57e 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.18), inset 0 0 60px rgba(140,90,40,.18);
  cursor:pointer;user-select:none;touch-action:manipulation;
}
.board::after{content:'';position:absolute;inset:0;border-radius:8px;pointer-events:none;
  box-shadow:inset 0 0 0 6px rgba(122,74,38,.16), inset 0 0 25px rgba(90,50,20,.16);}
.grid{position:absolute;inset:0;width:100%;height:100%;display:block;}
.layer{position:absolute;inset:0;pointer-events:none;}

/* ================= 棋子 ================= */
.piece{position:absolute;width:calc(var(--cell) * .88);height:calc(var(--cell) * .88);transform:translate(-50%,-50%);pointer-events:none;}
.piece .body{
  position:relative;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 34% 26%, #fffdf3 0%, #f6e8c6 42%, #e4c894 74%, #cfae74 100%);
  border:calc(var(--cell)*.026) solid #b08f5c;
  box-shadow:0 .12em .3em rgba(70,40,15,.38), inset 0 -2px 6px rgba(120,80,40,.3), inset 0 2px 5px rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
  animation:pop .17s cubic-bezier(.2,.9,.3,1.4);
  transition:box-shadow .15s ease, filter .15s ease;
}
.piece .body::after{content:'';position:absolute;inset:11%;border-radius:50%;border:1.5px solid rgba(150,110,60,.5);}
.piece .txt{font-family:"Kaiti SC","STKaiti",KaiTi,"Noto Serif CJK SC","Noto Serif SC",serif;font-weight:700;
  font-size:calc(var(--cell) * .52);line-height:1;position:relative;z-index:1;}
.piece.red .txt{color:#b02128;text-shadow:0 1px 0 rgba(255,255,255,.65);}
.piece.black .txt{color:#241f1c;text-shadow:0 1px 0 rgba(255,255,255,.55);}
.piece.selected .body{box-shadow:0 0 0 3px rgba(226,180,92,.95), 0 0 22px rgba(255,200,90,.75), 0 .12em .3em rgba(70,40,15,.45);filter:brightness(1.04);}
.piece.check .body{animation:pulse 1s ease-in-out infinite;box-shadow:0 0 0 3px rgba(214,58,48,.85), 0 0 20px rgba(230,70,60,.7);}
@keyframes pop{from{transform:scale(.82);opacity:.35}to{transform:scale(1);opacity:1}}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18) saturate(1.3)}}

/* ================= 标记与提示 ================= */
.mark{position:absolute;transform:translate(-50%,-50%);pointer-events:none;}
.mark-from{width:calc(var(--cell)*.5);height:calc(var(--cell)*.5);border:2px dashed rgba(90,60,30,.45);border-radius:50%;}
.mark-to{width:calc(var(--cell)*.94);height:calc(var(--cell)*.94);border:2px solid rgba(206,142,52,.8);border-radius:50%;box-shadow:0 0 12px rgba(240,190,90,.55);}
.hint{position:absolute;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;}
.hint.empty{width:calc(var(--cell)*.26);height:calc(var(--cell)*.26);background:rgba(46,92,64,.55);box-shadow:0 0 10px rgba(60,120,80,.45);}
.hint.capture{width:calc(var(--cell)*.9);height:calc(var(--cell)*.9);border:calc(var(--cell)*.075) solid rgba(178,40,36,.5);animation:capGlow 1.2s ease-in-out infinite;}
@keyframes capGlow{0%,100%{opacity:.6}50%{opacity:1}}

/* ================= 结束遮罩 ================= */
.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(12,8,5,.55);backdrop-filter:blur(3px);border-radius:8px;z-index:5;}
.overlay.show{display:flex;animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.result-card{background:linear-gradient(180deg,#241a12,#180f0a);border:1px solid rgba(226,180,92,.35);border-radius:16px;padding:26px 34px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.65);}
.result-title{font-family:"Kaiti SC",STKaiti,KaiTi,serif;font-size:32px;color:#f0d59a;letter-spacing:4px;}
.result-sub{font-size:13px;color:#a2937f;margin-top:8px;letter-spacing:1px;}
.result-card button{margin-top:18px;padding:10px 26px;border-radius:10px;border:0;cursor:pointer;font-family:inherit;font-size:14px;
  background:linear-gradient(180deg,#e2b45c,#c08f38);color:#2c1c07;font-weight:600;}

/* ================= 侧栏 ================= */
.panel{width:298px;flex:0 0 298px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:18px 16px;
  backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(0,0,0,.5);}
.brand{display:flex;flex-direction:column;gap:2px;padding-bottom:2px;}
.brand-cn{font-family:"Kaiti SC",STKaiti,KaiTi,"Noto Serif SC",serif;font-size:26px;letter-spacing:6px;color:#f2ddb0;}
.brand-en{font-size:10px;letter-spacing:2.5px;color:#8d7c66;text-transform:uppercase;}

.status-card{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:12px 13px;}
.status-line{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#f0e5d3;}
.turn-dot{width:11px;height:11px;border-radius:50%;background:#c2392f;box-shadow:0 0 10px rgba(200,60,50,.8);flex:0 0 auto;transition:.2s;}
.turn-dot.black{background:#2b2523;box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 0 10px rgba(0,0,0,.6);}
.turn-dot.think{animation:pulse 1s ease-in-out infinite;}
.status-sub{font-size:12px;color:#9c8d78;margin-top:6px;padding-left:20px;min-height:16px;}

.group{display:flex;flex-direction:column;gap:7px;}
.group-title{font-size:11px;letter-spacing:1.5px;color:#8d7c66;}
.seg{display:flex;gap:6px;background:rgba(0,0,0,.3);padding:4px;border-radius:11px;border:1px solid rgba(255,255,255,.05);}
.seg button{flex:1;border:0;background:transparent;color:#b0a08a;padding:9px 4px;border-radius:8px;font-size:12.5px;cursor:pointer;
  font-family:inherit;transition:.18s;white-space:nowrap;}
.seg button:hover{color:#eee1ca;}
.seg button.active{background:linear-gradient(180deg,#f0d59a,#d6ae67);color:#33220d;font-weight:700;box-shadow:0 4px 14px rgba(214,175,105,.28);}

.actions{display:flex;gap:8px;}
.actions button{flex:1;padding:11px 6px;border-radius:10px;cursor:pointer;font-family:inherit;font-size:13.5px;transition:.18s;border:1px solid transparent;}
.btn-primary{background:linear-gradient(180deg,#c3402f,#98281c);color:#fbeadf;font-weight:600;box-shadow:0 8px 20px rgba(160,45,30,.3);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:rgba(255,255,255,.07);color:#d5c8b4;border-color:rgba(255,255,255,.1);}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-ghost:disabled{opacity:.38;cursor:not-allowed;}

.captured{background:rgba(0,0,0,.24);border-radius:11px;padding:9px 10px;display:flex;flex-direction:column;gap:6px;border:1px solid rgba(255,255,255,.05);}
.cap-row{display:flex;align-items:center;gap:8px;min-height:23px;}
.cap-label{font-size:11px;color:#8d7c66;flex:0 0 16px;}
.cap-list{display:flex;flex-wrap:wrap;gap:3px;}
.cap-chip{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;
  font-family:"Kaiti SC",STKaiti,KaiTi,serif;background:rgba(255,255,255,.09);}
.cap-chip.r{color:#e07068;}
.cap-chip.b{color:#c9bda9;}

.moves{flex:1;min-height:88px;max-height:168px;overflow-y:auto;background:rgba(0,0,0,.24);border-radius:11px;padding:8px 10px;
  border:1px solid rgba(255,255,255,.05);font-size:12px;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin;}
.moves::-webkit-scrollbar{width:5px}
.moves::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.move-row{display:flex;gap:6px;padding:2px 0;}
.move-row .mv-no{color:#6d6152;width:22px;flex:0 0 22px;}
.move-row .mv-r{color:#d98a80;}
.move-row .mv-b{color:#b7ab96;}
.move-row em{font-style:normal;color:#8a7a63;font-size:10px;margin-left:4px;}
.moves-empty{color:#6d6152;font-size:12px;}

@media (max-width:880px){
  body{padding:14px 10px;align-items:flex-start;}
  .app{flex-direction:column;align-items:center;gap:14px;}
  .board{width:min(94vw,520px);}
  .panel{width:min(94vw,520px);flex:0 0 auto;}
  .moves{max-height:112px;}
}