*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(circle at 50% 20%,#1e3a5f,#0d1b2a 70%);
  color:#e8eef5;min-height:100vh;display:flex;justify-content:center;padding:16px 0 40px;
}
#app{width:100%;max-width:440px;padding:0 12px;display:flex;flex-direction:column;align-items:center}
header{text-align:center;margin:18px 0 16px}
header h1{font-size:28px;font-weight:700;letter-spacing:1px}
header .sub{font-size:13px;color:#8fa7c4;margin-top:6px;opacity:.9}

/* ---- 房间 ---- */
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:22px;width:100%;margin-top:20px}
.card label{display:block;font-size:13px;color:#8fa7c4;margin-bottom:8px}
.card input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);color:#e8eef5;font-size:16px;outline:none;transition:.2s}
.card input:focus{border-color:#3b82f6;background:rgba(255,255,255,.08)}
.btn-row{display:flex;gap:10px;margin-top:18px}
button{cursor:pointer;border:none;border-radius:10px;padding:12px 16px;font-size:15px;font-weight:600;
  background:rgba(255,255,255,.1);color:#e8eef5;transition:.15s}
button:active{transform:scale(.97)}
button.primary{flex:1;background:linear-gradient(135deg,#2b6cb0,#3b82f6);color:#fff}
#btnJoin{flex:1;background:rgba(255,255,255,.12)}
.hint{font-size:12px;color:#6f88a3;text-align:center;margin-top:14px}
.logininfo{font-size:12px;color:#8fa7c4;text-align:center;margin-top:12px;border-top:1px dashed rgba(255,255,255,.1);padding-top:10px}

/* ---- 对局状态栏 ---- */
#game{width:100%;display:flex;flex-direction:column;align-items:center}
.statusbar{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ply{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);
  padding:8px 14px;border-radius:12px;transition:.2s;min-width:110px}
.ply.active{border:1px solid #fbbf24;box-shadow:0 0 10px rgba(251,191,36,.25)}
.ply .dot{width:20px;height:20px;border-radius:50%;flex:none}
.dot.black{background:radial-gradient(circle at 35% 35%,#666,#111)}
.dot.white{background:radial-gradient(circle at 35% 35%,#f8f8f8,#bbb);border:1px solid rgba(0,0,0,.2)}
.ply b{font-size:18px}
.ply i{font-style:normal;font-size:11px;color:#8fa7c4;margin-left:2px}
#pWhite{flex-direction:row}
.turnind{font-size:12px;color:#8fa7c4}

/* ---- 棋盘 ---- */
#board{display:grid;grid-template-columns:repeat(8,1fr);width:100%;aspect-ratio:1;
  background:#1d6a3e;border-radius:12px;overflow:hidden;border:2px solid #14532d;
  box-shadow:0 10px 30px rgba(0,0,0,.4);position:relative}
.cell{display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:linear-gradient(135deg,#218638,#196a2e);transition:background .12s}
.cell:nth-child(16n+1),.cell:nth-child(16n+3),.cell:nth-child(16n+5),.cell:nth-child(16n+7),
.cell:nth-child(16n+10),.cell:nth-child(16n+12),.cell:nth-child(16n+14),.cell:nth-child(16n+16){
  background:linear-gradient(135deg,#1c7a30,#145a26)}
.cell.legal::after{content:"";width:30%;height:30%;border-radius:50%;background:rgba(255,255,255,.28);transition:.12s}
.cell.legal:hover::after,.cell.legal:active::after{width:42%;height:42%;background:rgba(255,255,255,.45)}
.piece{width:82%;height:82%;border-radius:50%;animation:pop .18s ease-out}
.piece.b{background:radial-gradient(circle at 35% 32%,#777,#0a0a0a);box-shadow:0 3px 6px rgba(0,0,0,.5)}
.piece.w{background:radial-gradient(circle at 35% 32%,#fff,#c9c9c9);box-shadow:0 3px 6px rgba(0,0,0,.4)}
.piece.flip{animation:flip .35s ease}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes flip{0%{transform:rotateY(0) scale(.6)}100%{transform:rotateY(360deg) scale(1)}}

/* ---- 操作按钮 ---- */
.actions{width:100%;display:flex;gap:10px;margin-top:16px}
.actions button{flex:1}
#btnLeave{background:rgba(255,255,255,.08)}
#btnResign{background:rgba(220,38,38,.25)}

/* ---- toast ---- */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  background:rgba(17,25,40,.92);border:1px solid rgba(255,255,255,.15);padding:10px 18px;
  border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:50}
#toast.show{opacity:1}

/* ---- 弹窗 ---- */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);z-index:100;padding:20px}
.modal-card{background:#14263b;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:26px;width:100%;max-width:320px;text-align:center}
.modal-card h2{font-size:22px;margin-bottom:10px}
.modal-card p{font-size:14px;color:#9db3cc;margin-bottom:18px}