/* 跳棋样式：星空主题 */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
input,textarea{user-select:text;-webkit-user-select:text}
:root{
  --blue:#5b9fe6; --red:#e86a6a; --gold:#ffd76a;
}
body{
  margin:0;min-height:100vh;color:#eef2fa;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:radial-gradient(1200px 800px at 50% -10%, #233a63 0%, #141b2d 55%, #0a0e18 100%);
  display:flex;flex-direction:column;align-items:center;
}
.screen{display:none;width:100%;max-width:560px;padding:14px 12px 30px;flex-direction:column;align-items:center}
.screen.on{display:flex}
h1.title{font-size:2.2rem;margin:26px 0 4px;letter-spacing:.12em;text-shadow:0 3px 14px rgba(0,0,0,.55)}
.sub{color:#a9bcd8;margin:0 0 18px;font-size:.95rem}
.topbar{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.topbar .grp{display:flex;gap:8px;align-items:center}
.icon-btn{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
  border-radius:12px;padding:8px 12px;font-size:1rem;cursor:pointer;min-width:44px;text-align:center;
}
.icon-btn:active{transform:scale(.94)}
a.lang-link{color:#9fc0e8;text-decoration:none;font-size:.9rem;padding:8px}
.diff-row{display:flex;gap:10px;margin:6px 0 14px}
.diff-btn{
  background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18);color:#e6edf8;
  border-radius:14px;padding:10px 22px;font-size:1.02rem;cursor:pointer;
}
.diff-btn.on{border-color:var(--gold);background:rgba(255,215,106,.16);color:#ffe9b0;font-weight:700}
.big-btn{
  display:block;width:min(78vw,320px);margin:9px auto;padding:14px;font-size:1.15rem;font-weight:700;
  color:#2a2415;background:linear-gradient(180deg,#ffe9a8,#f5c445);border:none;border-radius:16px;cursor:pointer;
  box-shadow:0 4px 0 #b98a1d, 0 8px 18px rgba(0,0,0,.35);
}
.big-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b98a1d}
.big-btn.ghost{background:rgba(255,255,255,.1);color:#eef2fa;box-shadow:none;border:2px solid rgba(255,255,255,.25)}
.big-btn.hidden{display:none}
.home-settings{display:flex;gap:10px;margin-top:14px}
.chip-btn{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);color:#dfe8f5;
  border-radius:999px;padding:8px 16px;font-size:.92rem;cursor:pointer;
}
.home-record{margin-top:16px;color:#c8d6ec;font-size:.95rem}
.home-record button{margin-left:10px}
/* ===== 棋盘 ===== */
#turnbar{
  width:min(94vw,430px);max-width:100%;text-align:center;margin:2px 0 8px;padding:9px;border-radius:12px;
  background:rgba(0,0,0,.35);font-size:1rem;font-weight:600;letter-spacing:.05em;
}
#turnbar .dot{display:inline-block;width:.8em;height:.8em;border-radius:50%;margin-right:8px;vertical-align:baseline}
#turnbar.blue .dot{background:var(--blue);box-shadow:0 0 8px var(--blue)}
#turnbar.red .dot{background:var(--red);box-shadow:0 0 8px var(--red)}
#board{width:min(94vw,430px);touch-action:manipulation}
#svgboard{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 34px rgba(0,0,0,.55))}
#svgboard .hole{cursor:pointer}
#svgboard .dot{cursor:pointer;animation:dotpulse 1.15s ease-in-out infinite}
@keyframes dotpulse{0%,100%{opacity:.75}50%{opacity:1}}
#svgboard .piece.sel .selring{filter:drop-shadow(0 0 5px #ffd76a)}
#net-status{width:min(94vw,430px);max-width:100%;text-align:center;color:#9fc0e8;font-size:.82rem;margin-top:8px;min-height:1.2em}
/* ===== 底部栏 ===== */
#bottombar{width:min(94vw,430px);max-width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
#record-line{font-size:.92rem;color:#c8d6ec}
.kbd-hint{color:#8fa5c4;font-size:.82rem}
/* ===== 弹窗 ===== */
.overlay{position:fixed;inset:0;background:rgba(5,8,16,.74);display:none;align-items:center;justify-content:center;z-index:50;padding:18px}
.overlay.on{display:flex}
.modal{
  background:linear-gradient(180deg,#1d2a4a,#121a30);border:2px solid rgba(255,215,106,.4);border-radius:20px;
  padding:22px;width:min(92vw,400px);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6);
  max-height:88vh;overflow-y:auto;
}
.modal h2{margin:4px 0 8px;font-size:1.5rem}
.modal h2.win{color:#ffd76a}
.modal h2.lose{color:#9fb2cc}
.modal p{color:#c8d6ec;line-height:1.65;font-size:.95rem;text-align:left}
.modal .photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin:8px 0;border:2px solid rgba(255,255,255,.15)}
.modal .btnrow{display:flex;gap:10px;justify-content:center;margin-top:12px}
#win-sub{margin-bottom:4px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
#confetti i{position:absolute;top:-4vh;width:10px;height:15px;border-radius:2px;animation:cfall linear forwards}
@keyframes cfall{to{transform:translateY(112vh) rotate(720deg)}}
#help-modal .modal{text-align:left}
/* ===== 在线对战 ===== */
.net-code-big{font-size:2.4rem;font-weight:800;letter-spacing:.45em;text-indent:.45em;color:#ffd76a;margin:6px 0 2px}
.net-hint{color:#c8d6ec;font-size:.9rem;text-align:center !important;margin:4px 0 8px}
.net-joinrow{display:flex;gap:10px;justify-content:center;margin:10px 0}
#net-code{width:9em;font-size:1.15rem;font-weight:700;letter-spacing:.2em;text-align:center;padding:10px 8px;border-radius:12px;border:2px solid rgba(255,215,106,.45);background:#0d1425;color:#fff}
.net-linkrow{display:flex;gap:8px;align-items:center;margin:6px 0}
#net-link{flex:1;min-width:0;font-size:.8rem;padding:9px 10px;border-radius:10px;border:1px solid rgba(255,215,106,.35);background:#0d1425;color:#d7e2f2}
.net-wait{color:#ffd76a;font-size:.9rem;text-align:center !important;min-height:1.4em;margin:8px 0 0}
#confirm-modal .modal{text-align:center}
#confirm-title{font-size:1.15rem}
.hidden{display:none !important}
@media (max-width:380px){h1.title{font-size:1.8rem}.big-btn{font-size:1.05rem}}