/* RedWaltz 游戏区共享主题（白底 · 翠绿点缀，与主站一致） */
:root{
  --bg:#ffffff; --bg-soft:#f6fbf9;
  --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8;
  --line:#e2e8f0;
  --emerald:#10b981; --emerald-deep:#059669; --emerald-dark:#047857;
  --emerald-tint:#ecfdf5; --emerald-line:#a7f3d0;
  --amber:#f59e0b; --amber-deep:#b45309; --red:#ef4444;
  --radius:14px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(16,185,129,.05);
  --shadow-hover:0 2px 6px rgba(15,23,42,.06),0 14px 34px rgba(16,185,129,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  background:linear-gradient(180deg,var(--bg-soft),#fff 360px) fixed;
  color:var(--ink); line-height:1.7; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:680px;margin:0 auto;padding:20px 16px 56px}

/* 顶栏 */
.top{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.top .back{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--ink-2);flex-shrink:0;font-size:20px;transition:.15s}
.top .back:hover{color:var(--emerald-deep);border-color:var(--emerald-line);background:var(--emerald-tint)}
.top h1{font-size:18px;font-weight:800;display:flex;align-items:center;gap:8px;min-width:0}
.top h1 .en{font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.06em}
.top .code{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:800;color:var(--emerald-dark);letter-spacing:.12em;background:var(--emerald-tint);border:1px solid var(--emerald-line);padding:4px 12px;border-radius:10px;flex-shrink:0}

/* 卡片 / 面板 */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h2{font-size:15px;font-weight:800;margin-bottom:6px}
.card .sub{font-size:13px;color:var(--ink-2)}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:12px;font-size:14px;font-weight:600;transition:.18s;border:1px solid transparent}
.btn.primary{background:var(--emerald);color:#fff}
.btn.primary:hover{background:var(--emerald-deep)}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--emerald-line);color:var(--emerald-deep);background:var(--emerald-tint)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.block{width:100%}
.btn.sm{padding:9px 14px;font-size:13px;border-radius:10px}

/* 输入 */
.input{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;outline:none;transition:.15s}
.input:focus{border-color:var(--emerald)}
.input::placeholder{color:var(--ink-3)}

/* 玩家列表 */
.players{display:flex;flex-wrap:wrap;gap:8px}
.player{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-2)}
.player .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.player .tag{font-size:10px;color:var(--ink-3);font-weight:600}
.player.me{border-color:var(--emerald-line);background:var(--emerald-tint);color:var(--emerald-dark)}

/* 提示条 */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:99;box-shadow:0 12px 30px rgba(15,23,42,.25);max-width:86vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--red)}

/* 状态横幅 */
.banner{display:none;text-align:center;padding:14px;border-radius:12px;margin-bottom:14px;font-weight:700;font-size:15px}
.banner.show{display:block}
.banner.win{background:var(--emerald-tint);border:1px solid var(--emerald-line);color:var(--emerald-dark)}
.banner.info{background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-2)}

/* 等待提示 */
.wait{text-align:center;color:var(--ink-2);font-size:14px;padding:22px 0}
.wait .spin{display:inline-block;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--emerald);border-radius:50%;animation:sp .8s linear infinite;margin-right:8px;vertical-align:-4px}
@keyframes sp{to{transform:rotate(360deg)}}

@media(max-width:480px){
  .top h1 .en{display:none}
  .wrap{padding:14px 12px 40px}
}