:root{
  --paper:#f7f0e1; --ink:#3a2f25; --line:#5b4a36;
  --red:#c0392b; --blue:#2d6cdf; --gold:#b8860b;
  --card:#fffdf7; --shadow:rgba(60,40,20,.18);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  background:
    radial-gradient(circle at 20% 10%, #fbf6ea, transparent 60%),
    radial-gradient(circle at 90% 90%, #f0e7d2, transparent 55%),
    var(--paper);
  color:var(--ink); -webkit-font-smoothing:antialiased;
}
#app{max-width:780px;margin:0 auto;padding:18px 14px 40px}

/* 屏幕切换 */
.screen{display:none;animation:fade .25s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.card{
  background:var(--card);border:1px solid #e6dcc4;border-radius:14px;
  padding:18px 18px 20px;box-shadow:0 6px 20px var(--shadow);margin:0 0 16px;
}
.login-card{max-width:420px;margin:8vh auto 0;text-align:center}
.login-card h1{font-size:40px;margin:.2em 0 .1em;letter-spacing:.15em;color:var(--red)}
.subtitle{color:#7a6a55;font-size:13px;margin:.2em 0 1.2em}
label{display:block;text-align:left;font-size:13px;color:#8a785f;margin:10px 2px 4px}
input{
  width:100%;padding:11px 12px;border:1px solid #d8cba e;border-radius:10px;
  font-size:15px;background:#fffdf8;color:var(--ink);border-color:#dccfb2;
}
input:focus{outline:none;border-color:var(--gold)}

.btn{
  display:inline-block;border:none;cursor:pointer;border-radius:10px;
  padding:11px 16px;font-size:15px;background:#efe6d2;color:var(--ink);
  transition:transform .08s ease,filter .15s ease;margin:6px 4px 0;
}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--red);color:#fff}
.btn.ghost{background:transparent;border:1px solid #d8c9a8;color:#8a785f}
.btn.big{width:100%;font-size:17px;padding:14px}
.btn.small{padding:7px 12px;font-size:13px;margin:0}
.hint{font-size:12px;color:#9a8a70;margin:10px 2px 0}

/* 头像选择 */
.avatar-pick{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:4px 0 6px}
.avatar-pick .av{font-size:24px;width:46px;height:46px;line-height:46px;text-align:center;
  border:2px solid #e2d6ba;border-radius:50%;cursor:pointer;background:#fffdf8}
.avatar-pick .av.sel{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.15)}

/* 顶栏 */
.topbar{display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border:1px solid #e6dcc4;border-radius:14px;
  padding:10px 14px;box-shadow:0 4px 14px var(--shadow);margin-bottom:14px}
.me,.side{display:flex;align-items:center;gap:8px;font-weight:600}
.ava{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:#fff3df;font-size:18px;border:1px solid #e7dcc2}
.side em{font-style:normal;font-size:12px;padding:2px 7px;border-radius:8px;background:#f0e7d3;color:#8a785f}
.side.red em{background:#fbe3df;color:var(--red)}
.side.blue em{background:#e1ebfb;color:var(--blue)}

/* 大厅 */
.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lobby-grid .card h2{margin:.1em 0 .8em;font-size:18px}
.badge{background:var(--red);color:#fff;font-size:12px;border-radius:9px;padding:1px 8px;margin-left:6px}
.room-code{margin-top:12px;padding:12px;border:1px dashed var(--gold);border-radius:10px;text-align:center}
.room-code .code{font-size:30px;letter-spacing:.25em;font-weight:700;color:var(--red)}
.room-code .row{display:flex;gap:8px;justify-content:center;margin-top:8px}
.player-list{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto}
.player-list li{display:flex;align-items:center;gap:8px;padding:8px 6px;border-bottom:1px solid #f0e8d6}
.player-list .nm{flex:1;font-size:14px}
.player-list .st{font-size:11px;color:#9a8a70}
.player-list .av{width:28px;height:28px;font-size:16px}

/* 对局 */
.vs{display:flex;align-items:center;gap:14px;flex:1}
.turn-ind{font-size:13px;color:#8a785f;min-width:72px;text-align:center}
.board-wrap{display:flex;justify-content:center;margin:6px 0 10px}
#board{width:100%;max-width:380px;height:auto;user-select:none;touch-action:manipulation}
.lines line{stroke:var(--line);stroke-width:5;stroke-linecap:round}
.well-circle{fill:#efe2c6;stroke:#b89b6a;stroke-width:3;stroke-dasharray:5 5}
.well-text{font-size:22px;fill:#9a7b3e;font-weight:700}
.well-sub{font-size:11px;fill:#a98f5e}
.stone{fill:#fffdf8;stroke:#c9b78f;stroke-width:2;transition:fill .15s}
.pt .hit{fill:transparent;cursor:pointer}
.pt.mine .stone{stroke-width:3}
.pt.red .stone{fill:var(--red);stroke:#8e2519}
.pt.blue .stone{fill:var(--blue);stroke:#1c4ea0}
.pt.sel .stone{stroke:var(--gold);stroke-width:5}
.pt.target .hit{fill:rgba(184,134,11,.22)}
.pt.target .stone{stroke:var(--gold);stroke-width:4}
.pt.last .stone{stroke:#2e9e5b;stroke-width:4}

/* 聊天 */
.chat{background:var(--card);border:1px solid #e6dcc4;border-radius:14px;padding:10px 12px;box-shadow:0 4px 14px var(--shadow)}
.chat-log{height:96px;overflow:auto;font-size:13px;line-height:1.5}
.chat-log .me{justify-content:flex-end;color:var(--red)}
.chat-log div{margin:3px 0}
.chat-log .who{color:#9a8a70;font-size:11px}
.chat-input{display:flex;gap:8px;margin-top:8px}
.chat-input input{flex:1}

/* 覆盖层 */
.overlay{position:fixed;inset:0;background:rgba(40,30,18,.45);display:flex;align-items:center;justify-content:center;z-index:30}
.overlay .card{margin:0;min-width:280px;text-align:center}
.overlay h2{margin-top:0}
.rps-btns{display:flex;gap:10px;justify-content:center;margin-top:10px}
.rps-btns button{font-size:16px;padding:12px 14px}
.hidden{display:none!important}

.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);
  background:#3a2f25;color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;z-index:50;
  box-shadow:0 6px 18px rgba(0,0,0,.3)}
@media(max-width:560px){.lobby-grid{grid-template-columns:1fr}}