*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0d0d14;
  --surface: #16162a;
  --border:  #2a2a48;
  --accent:  #7c5cfc;
  --red:     #ff4d4d;
  --green:   #3dcc6b;
  --text:    #e8e8f0;
  --muted:   #7878a0;
}

body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }

/* Header styles live in /assets/header.css */

main.lobby { flex:1; display:flex; align-items:center; justify-content:center; padding: 2rem 1rem; }

.lobby-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 2rem 2.4rem; width: 100%; max-width: 500px;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}

.game-title { font-size: 2rem; font-weight: 800; letter-spacing: -0.5px; }
.subtitle   { color: var(--muted); font-size: .9rem; text-align: center; }

.name-row { width: 100%; }
.name-row input, #codeInput {
  width: 100%; padding: .7rem 1rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-size: 1rem; font-family: inherit;
  outline: none; transition: border-color .2s;
}
.name-row input:focus, #codeInput:focus { border-color: var(--accent); }

.action-row { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.or { color: var(--muted); font-size: .85rem; }
.join-row { display: flex; gap: .6rem; width: 100%; }
.join-row #codeInput { text-transform: uppercase; letter-spacing: .15em; font-weight: 700; flex:1; }

button { cursor: pointer; font-family: inherit; font-weight: 700; border: none; border-radius: 50px; transition: transform .15s, opacity .15s; }
button:hover { transform: translateY(-2px); }
button:active { transform: translateY(0); opacity: .85; }

.btn-red   { background: var(--red);   color: #fff; padding: .7rem 1.8rem; font-size: 1rem; width: 100%; }
.btn-green { background: var(--green); color: #fff; padding: .7rem 1.4rem; font-size: 1rem; }
.btn-start { background: var(--accent); color: #fff; padding: .7rem 2rem; font-size: 1rem; width: 100%; box-shadow: 0 0 20px rgba(124,92,252,.4); }
.btn-back  { background: transparent; color: var(--muted); font-size: .85rem; text-decoration: underline; padding: 0; border-radius: 0; }
.btn-back:hover { color: var(--text); transform: none; }

.error { color: #ff6b6b; font-size: .88rem; text-align: center; }

/* Wait panel */
.room-code-box { display: flex; align-items: center; gap: .6rem; font-size: 1rem; }
.room-code-box strong { font-size: 1.8rem; letter-spacing: .2em; color: var(--accent); }
.copy-btn { background: var(--border); color: var(--text); padding: .3rem .7rem; border-radius: 8px; font-size: .9rem; }
.invite-row {
  display: flex; gap: .5rem; width: 100%;
}
.invite-link {
  flex: 1; padding: .45rem .8rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); font-size: .78rem; font-family: monospace;
  outline: none; cursor: text;
}
.hint { color: var(--muted); font-size: .82rem; }

.teams { display: flex; gap: 1.2rem; width: 100%; }
.team { flex:1; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; }
.team-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem; }
.red-team   .team-label { color: var(--red); }
.green-team .team-label { color: var(--green); }
.team ul { list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.team li { font-size: .88rem; color: var(--text); padding: .15rem 0; }
.team li.you { font-weight: 700; }

.waiting-msg { color: var(--muted); font-size: .88rem; }

.countdown-msg {
  color: #ffd850; font-size: .88rem; font-weight: 700;
  background: rgba(255,216,80,.08); border: 1px solid rgba(255,216,80,.25);
  padding: .35rem 1rem; border-radius: 50px;
}

.test-row { width: 100%; }
.btn-test {
  width: 100%; padding: .6rem 1.8rem; font-size: .92rem;
  background: rgba(255,216,80,.10); color: #ffd850;
  border: 1px solid rgba(255,216,80,.3); border-radius: 50px;
}
.btn-test:hover { background: rgba(255,216,80,.2); transform: translateY(-2px); }

/* ── Character picker ── */
.char-section { width: 100%; display: flex; flex-direction: column; gap: .5rem; }
.char-label { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

.char-picker { display: flex; align-items: center; gap: 4px; width: 100%; }

.char-nav {
  flex-shrink: 0;
  width: 28px; min-height: 60px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 1.3rem; cursor: pointer;
  transition: background .15s;
}
.char-nav:hover:not(:disabled) { background: var(--border); }
.char-nav:disabled { opacity: 0.25; cursor: default; }

.char-slots { display: flex; gap: 6px; flex: 1; justify-content: center; }

.char-slot {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 10px; padding: 5px 3px;
  background: var(--bg);
  transition: border-color .15s, background .15s;
  min-width: 0;
}
.char-slot:hover   { border-color: var(--accent); }
.char-slot.selected {
  border-color: var(--accent);
  background: rgba(124,92,252,.14);
}
.char-slot canvas  { display: block; width: 100%; height: auto; border-radius: 6px; }
.char-slot-label   { font-size: .62rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

.char-page-dots { display: flex; gap: 5px; justify-content: center; }
.char-page-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background .2s; }
.char-page-dot.active { background: var(--accent); }

/* ── Switch team ── */
.btn-switch {
  width: 100%; padding: .6rem; font-size: .9rem; border-radius: 50px;
  background: transparent;
  border: 1.5px solid rgba(61,204,107,.4);
  color: var(--green);
  transition: background .15s;
}
.btn-switch:hover { background: rgba(61,204,107,.1); transform: translateY(-2px); }

/* ── Bot entry (revealed during countdown) ── */
.bot-entry { animation: botAppear .4s ease; }
@keyframes botAppear {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bot-badge {
  font-size: .6rem; font-weight: 800; letter-spacing: .04em;
  background: rgba(124,92,252,.2); color: var(--accent);
  border-radius: 4px; padding: 1px 4px;
  vertical-align: middle;
}

/* ── 准备 / 开始 ── */
.btn-ready {
  width: 100%; padding: .7rem; font-size: 1rem; border-radius: 50px;
  background: rgba(61,204,107,.10); color: var(--green);
  border: 1.5px solid rgba(61,204,107,.35);
}
.btn-ready:hover { background: rgba(61,204,107,.2); transform: translateY(-2px); }
.btn-ready.is-ready {
  background: var(--green); color: #fff;
  border-color: var(--green); cursor: default;
}
.btn-ready.is-ready:hover { transform: none; }

/* ── 玩家列表 ── */
.team li {
  display: flex; align-items: center; gap: .4rem;
  font-size: .88rem; color: var(--text); padding: .2rem 0;
}
.p-emoji  { font-size: 1.1rem; line-height: 1; }
.p-name   { flex: 1; }
.ready-dot { font-size: .8rem; font-weight: 700; color: var(--muted); }
.ready-dot.ready { color: var(--green); }

/* ── Controls hint in wait panel ── */
.controls-hint {
  width: 100%;
  background: rgba(124,92,252,.08);
  border: 1px solid rgba(124,92,252,.22);
  border-radius: 12px;
  padding: .75rem 1rem;
  display: flex; flex-direction: column; gap: .38rem;
}
.controls-title {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); margin-bottom: .1rem;
}
.controls-row {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--muted);
}
.key {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 5px; padding: .12rem .42rem;
  font-size: .74rem; font-family: monospace; color: var(--text);
  white-space: nowrap;
}

/* ── Game starting countdown ── */
.countdown-msg.game-starting {
  font-size: 2.8rem; font-weight: 900;
  color: var(--accent);
  background: rgba(124,92,252,.12);
  border-color: rgba(124,92,252,.4);
  padding: .6rem 2rem;
  min-width: 120px; text-align: center;
}

.hidden { display: none !important; }