* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#0f1220; --panel:#1a1f35; --panel2:#232a48; --line:#2e375c;
  --text:#e8ecff; --muted:#8b94b8; --accent:#5b8cff; --accent2:#34d399;
  --safe-t: env(safe-area-inset-top); --safe-b: env(safe-area-inset-bottom);
  --safe-l: env(safe-area-inset-left); --safe-r: env(safe-area-inset-right);
}
html,body {
  height:100%; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;
  -webkit-user-select:none; user-select:none; overflow:hidden;
  touch-action:manipulation;
}
#app { height:100vh; display:flex; flex-direction:column; }
.panel-wrap { height:100vh; display:flex; flex-direction:column; }
.hidden { display:none !important; }

/* ============ 登录 ============ */
#panel-auth {
  justify-content:center; align-items:center; padding:20px;
  background:radial-gradient(600px 400px at 50% 30%, #1e2a5a 0%, var(--bg) 70%);
}
.auth-card {
  width:min(380px,92%); background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:28px 24px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.auth-card h1 { font-size:24px; text-align:center; margin-bottom:4px; }
.auth-sub { color:var(--muted); text-align:center; font-size:13px; margin-bottom:16px; }
.auth-tabs { display:flex; gap:4px; background:var(--panel2); border-radius:10px; padding:4px; margin-bottom:16px; }
.auth-tabs .tab {
  flex:1; padding:10px 0; border:none; background:transparent; color:var(--muted);
  border-radius:8px; font-size:15px; font-weight:600;
}
.auth-tabs .tab.active { background:var(--accent); color:#fff; }
.auth-body input {
  width:100%; padding:12px 14px; margin-bottom:10px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel2); color:var(--text);
  font-size:16px; outline:none; -webkit-appearance:none;
}
.auth-body input:focus { border-color:var(--accent); }
.auth-body button {
  width:100%; padding:12px; font-size:16px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--accent),#7c5bff); border:none;
  border-radius:10px; margin-top:4px;
}
.error { color:#ff7b7b; font-size:13px; margin-top:8px; min-height:18px; text-align:center; }

/* ============ 大厅 ============ */
.lobby-header {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  border-bottom:1px solid var(--line); background:var(--panel); flex-shrink:0;
}
.lobby-user { font-weight:600; color:var(--text); }
.lobby-best { font-size:12px; color:var(--accent2); flex:1; }
.ghost-btn {
  padding:5px 10px; border-radius:6px; border:1px solid var(--line); background:transparent;
  color:var(--muted); font-size:12px;
}
.ghost-btn:hover { color:#fff; border-color:var(--accent); }

.lobby-body { flex:1; overflow-y:auto; padding:12px 16px; }
.lobby-section { margin-bottom:18px; }
.lobby-section h3 { font-size:13px; color:var(--muted); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }

.room-list { display:flex; flex-direction:column; gap:6px; }
.room-row {
  display:flex; justify-content:space-between; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px;
}
.room-row .room-name { font-weight:600; color:var(--text); font-size:15px; }
.room-row .room-meta { font-size:12px; color:var(--muted); margin-top:2px; }
.room-row .room-pass { font-size:11px; color:#fbbf24; }

.lobby-section input {
  width:100%; padding:10px 12px; margin-bottom:8px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel2); color:var(--text);
  font-size:15px; outline:none; -webkit-appearance:none;
}
.lobby-section input:focus { border-color:var(--accent); }
.primary-btn {
  width:100%; padding:10px; font-size:15px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--accent),#7c5bff); border:none; border-radius:8px;
}

.rank-list { list-style:none; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.rank-list li { display:flex; justify-content:space-between; padding:5px 4px; font-size:14px; }
.rank-list li.me { color:var(--accent2); font-weight:600; }
.rank-list .rk { color:var(--muted); font-weight:700; width:20px; }
.rank-list li.top1 .rk { color:#ffd34d; }
.rank-list li.top2 .rk { color:#cfd8e3; }
.rank-list li.top3 .rk { color:#e0915b; }
.rank-list .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-list .sc { font-weight:700; color:var(--accent2); }

/* ============ 游戏 ============ */
#panel-game { flex-direction:column; }
#topbar {
  display:flex; align-items:center; gap:6px; padding:8px 12px;
  border-bottom:1px solid var(--line); flex-wrap:wrap; flex-shrink:0;
  padding-top: calc(8px + var(--safe-t));
}
.room-title { font-size:14px; font-weight:700; color:var(--accent); flex:1; }
.hud-item {
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:4px 10px; font-size:12px; white-space:nowrap;
}
.fs-btn { padding:4px 8px; font-size:14px; cursor:pointer; background:var(--panel2); border:1px solid var(--line); border-radius:999px; color:var(--text); }

#stage { flex:1; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#game { display:block; background:#11152a; touch-action:none; }

.overlay {
  position:absolute; inset:0; background:rgba(10,13,28,.85); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:10;
}
.overlay.hidden { display:none; }
.panel {
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:24px 20px; text-align:center; width:min(340px,90%);
}
.panel h2 { font-size:18px; margin-bottom:12px; }
.panel .sub { color:var(--muted); font-size:13px; margin:8px 0; }
.panel button {
  width:100%; padding:12px; font-size:15px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--accent),#7c5bff); border:none; border-radius:10px;
  margin-top:8px;
}
.speed-row { display:flex; gap:6px; margin-bottom:12px; }
.speed-btn {
  flex:1; padding:8px 0; font-size:12px; font-weight:600;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px; color:var(--muted);
}
.speed-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* 虚拟方向键 */
#vpad {
  display:grid; grid-template-columns:repeat(3,64px); grid-template-rows:repeat(3,64px);
  gap:6px; justify-content:center; padding:10px 0 calc(10px + var(--safe-b));
  flex-shrink:0;
}
.vbtn {
  width:64px; height:64px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); font-size:22px; font-weight:700;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.vbtn:active { background:var(--accent); border-color:var(--accent); }
.vbtn.up { grid-column:2; grid-row:1; }
.vbtn.left { grid-column:1; grid-row:2; }
.vbtn.down { grid-column:2; grid-row:3; }
.vbtn.right { grid-column:3; grid-row:2; }

/* toast */
#toast {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:rgba(220,70,70,.95); color:#fff; padding:8px 18px; border-radius:999px; font-size:14px; z-index:20;
}

/* 横屏适配 */
@media (orientation: landscape) {
  #vpad { grid-template-columns:repeat(3,48px); grid-template-rows:repeat(3,48px); gap:4px; padding:4px 0; }
  .vbtn { width:48px; height:48px; font-size:18px; }
}