* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  background: #0a0a0f;
  overflow: hidden;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
#game-wrap {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #14141d 0%, #06060a 100%);
}
#game {
  display: block;
  box-shadow: 0 0 60px rgba(255,120,40,.12);
  border-radius: 4px;
}

/* ===== 覆盖层通用 ===== */
.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,5,10,.72);
  backdrop-filter: blur(4px);
  z-index: 10;
}
.hidden { display: none !important; }

/* ===== 主菜单 ===== */
.menu-inner { text-align: center; padding: 24px; max-width: 360px; width: 92%; }
.title-block { margin-bottom: 26px; }
.title-sub {
  color: #7dd87d; letter-spacing: 6px; font-size: 12px; font-weight: 700;
  text-shadow: 0 0 12px rgba(80,255,120,.5);
}
.title {
  font-size: 52px; font-weight: 900; color: #f3f3f3;
  letter-spacing: 4px; margin: 6px 0;
  text-shadow: 0 0 24px rgba(255,90,40,.55), 0 4px 0 #7a1d0e;
}
.title-tag { color: #b8b8c8; font-size: 14px; letter-spacing: 2px; }

.howto {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 22px;
  text-align: left;
}
.howto-row { color: #d5d5e0; font-size: 14px; line-height: 2.1; }
.ic { display: inline-block; width: 34px; text-align: center; font-weight: 900; }
.gate-blue { color: #5ec8ff; text-shadow: 0 0 8px rgba(94,200,255,.8); }
.gate-red { color: #ff5a5a; text-shadow: 0 0 8px rgba(255,90,90,.8); }

.btn {
  display: block; width: 100%; margin: 10px 0;
  padding: 15px 0; font-size: 19px; font-weight: 800; letter-spacing: 4px;
  color: #1a0d05; background: linear-gradient(180deg, #ffc356, #ff8b2a);
  border: none; border-radius: 12px; cursor: pointer;
  box-shadow: 0 5px 0 #b25a12, 0 8px 22px rgba(255,140,40,.35);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #b25a12; }
.btn-ghost {
  background: rgba(255,255,255,.08); color: #cfcfdd;
  box-shadow: 0 5px 0 rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
}
.best-line { color: #ffd76e; font-size: 13px; margin-top: 12px; min-height: 18px; }
.sound-line { color: #888; font-size: 12px; margin-top: 8px; }

/* ===== 升级三选一 ===== */
.lv-box { text-align: center; width: 94%; max-width: 420px; }
.lv-title {
  font-size: 30px; font-weight: 900; color: #ffe27a;
  text-shadow: 0 0 18px rgba(255,220,100,.7); letter-spacing: 3px;
}
.lv-sub { color: #aaa; font-size: 13px; margin: 6px 0 18px; letter-spacing: 2px; }
.lv-cards { display: flex; gap: 12px; justify-content: center; }
.lv-card {
  flex: 1; max-width: 126px;
  background: linear-gradient(180deg, rgba(40,42,60,.95), rgba(20,20,32,.95));
  border: 2px solid rgba(120,200,255,.35);
  border-radius: 14px; padding: 18px 8px 14px;
  cursor: pointer; transition: transform .12s, border-color .12s;
}
.lv-card:hover { transform: translateY(-6px) scale(1.04); border-color: #7dd8ff; }
.lv-card .ci { font-size: 34px; }
.lv-card .cn { color: #fff; font-size: 15px; font-weight: 800; margin: 10px 0 6px; }
.lv-card .cd { color: #9ab; font-size: 11px; line-height: 1.5; }

/* ===== 结算 ===== */
.go-title {
  font-size: 42px; font-weight: 900; color: #ff6b4a; letter-spacing: 6px;
  text-shadow: 0 0 26px rgba(255,80,50,.6);
}
.go-sub { color: #999; font-size: 13px; margin: 8px 0 24px; letter-spacing: 2px; }
.go-stats { display: flex; gap: 12px; justify-content: center; margin-bottom: 18px; }
.go-stat {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 14px 20px; min-width: 88px;
}
.go-num { font-size: 30px; font-weight: 900; color: #ffd76e; }
.go-label { font-size: 12px; color: #999; margin-top: 4px; letter-spacing: 3px; }
.go-best { color: #8f8fa0; font-size: 13px; margin-bottom: 8px; }
.go-newbest {
  color: #ffe27a; font-weight: 900; font-size: 17px; margin-bottom: 10px;
  text-shadow: 0 0 14px rgba(255,220,100,.8);
  animation: pulse 1s infinite alternate;
}
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.12); } }

/* ===== 昵称设置 ===== */
.nick-input {
  width: 100%; padding: 14px 16px; margin: 8px 0 4px;
  font-size: 18px; text-align: center; letter-spacing: 2px;
  color: #fff; background: rgba(255,255,255,.08);
  border: 2px solid rgba(120,200,255,.4); border-radius: 12px;
  outline: none;
}
.nick-input:focus { border-color: #7dd8ff; }
.nick-error { color: #ff6a5a; font-size: 13px; min-height: 20px; margin-bottom: 4px; }
.menu-user { color: #ffd76e; font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ===== 排行榜 ===== */
.lb-box { width: 94%; max-width: 420px; text-align: center; }
.lb-list {
  max-height: 52vh; overflow-y: auto; margin: 14px 0;
  background: rgba(15,15,24,.7); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 6px;
}
.lb-loading { color: #888; padding: 30px 0; font-size: 14px; }
.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
}
.lb-row:nth-child(odd) { background: rgba(255,255,255,.04); }
.lb-top { background: rgba(255,210,62,.08) !important; }
.lb-rank { width: 40px; font-weight: 900; color: #ffd76e; font-size: 15px; text-align: center; }
.lb-info { flex: 1; text-align: left; }
.lb-name { color: #fff; font-size: 14px; font-weight: 700; }
.lb-title { color: #8a8a9a; font-size: 11px; margin-top: 2px; }
.lb-kills { color: #ffb02e; font-weight: 900; font-size: 17px; }

/* ===== 结算排名 ===== */
.go-rank { margin: 4px 0 12px; }
.go-rank-main { color: #d5d5e0; font-size: 16px; }
.go-rank-main b { color: #ffd76e; font-size: 24px; }
.go-rank-total { color: #777; font-size: 13px; }
.go-rank-beat { color: #7dd8ff; font-size: 14px; margin-top: 4px; }
.go-rank-beat b { font-size: 18px; }
.go-rank-pb { color: #ffe27a; font-size: 13px; margin-top: 5px; }
.go-rank-title { color: #9a9; font-size: 12px; margin-top: 6px; letter-spacing: 1px; }
.go-rank-off { color: #666; font-size: 12px; padding: 6px; }