/* 公共 reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
body { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
main { text-align: center; max-width: 90vw; width: 100%; }
h1 { font-size: 2.5rem; margin-bottom: 1rem; }
h2 { font-size: 1.25rem; margin: 1rem 0 0.5rem; opacity: 0.85; }
.hidden { display: none !important; }

.info-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem; font-size: 1.05rem; }
.status.on  { color: #4caf50; }
.status.off { color: #f44336; }

/* 大屏端 */
body.display { background: #0a0a0a; color: #f0f0f0; }
.qr-section { margin: 1.5rem 0; }
.qr-section img { background: white; padding: 0.5rem; border-radius: 0.5rem; }
.qr-tip { margin-top: 0.75rem; opacity: 0.7; }

/* Canvas */
#player-canvas { width: 100%; display: block; margin: 0 auto; border-radius: 0.5rem; background: rgba(255,255,255,0.03); }

/* 极速赛车 (gameId='tap') 大屏赛道背景 */
body.display.race-mode #player-canvas {
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(180deg, #0a0a1e 0%, #1a1a2e 60%, #2a1a3e 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 60px rgba(255,107,107,0.15) inset;
}

/* 排行榜 */
.leaderboard { margin: 1rem auto; max-width: 32rem; }
.leaderboard ol { list-style: decimal; text-align: left; padding: 0 2rem; font-size: 1.25rem; }
.leaderboard li { padding: 0.4rem 0; display: flex; align-items: center; gap: 0.5rem; }
.ld-color { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.ld-score { margin-left: auto; font-weight: bold; font-family: monospace; font-size: 1.3rem; }

/* 游戏状态 */
.game-state { margin: 1.5rem 0; }
.state-display { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-size: 1.5rem; font-weight: bold; }
.state-display.waiting { background: #2c3e50; color: #ecf0f1; }
.state-display.playing { background: #e74c3c; color: white; animation: pulse 1s infinite; }
.state-display.ended   { background: #27ae60; color: white; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.countdown-display { font-size: 4rem; font-weight: bold; color: #e74c3c; margin-top: 0.5rem; min-height: 4rem; }
.countdown-display.ended { color: #27ae60; }
.countdown-display:not(.active):not(.ended) { color: transparent; }
.controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.controls label { font-size: 1rem; }
.controls input[type=number] { width: 4rem; padding: 0.4rem; font-size: 1rem; border: 1px solid #555; background: #1a1a1a; color: #f0f0f0; border-radius: 0.25rem; }
.controls button { padding: 0.7rem 1.5rem; font-size: 1.1rem; border: none; border-radius: 0.375rem; cursor: pointer; }
.controls button:disabled { opacity: 0.4; cursor: not-allowed; }
.controls .primary { background: #e74c3c; color: white; }
.controls .primary:hover:not(:disabled) { background: #c0392b; }
.controls .secondary { background: #34495e; color: white; }
.controls .secondary:hover { background: #2c3e50; }

/* 移动端 */
body.mobile { background: #fafafa; color: #111; }
.join-card, .waiting-card, .playing-card, .ended-card { padding: 1.5rem 1rem; }
.join-box { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 1.25rem; }
.join-form { display: flex; gap: 0.5rem; justify-content: center; max-width: 24rem; margin: 0 auto; }
.join-form input { flex: 1; padding: 0.7rem 1rem; font-size: 1rem; border: 1px solid #ddd; border-radius: 0.375rem; outline: none; }
.join-form input:focus { border-color: #4caf50; }
.join-form button { padding: 0.7rem 1.2rem; font-size: 1rem; background: #4caf50; color: white; border: none; border-radius: 0.375rem; cursor: pointer; }
.big-emoji { font-size: 5rem; margin-bottom: 0.5rem; }
.my-score { margin-top: 1.5rem; padding: 1rem; background: rgba(0,0,0,0.05); border-radius: 0.5rem; }
.my-score strong { display: block; font-size: 2.5rem; color: #e74c3c; margin-top: 0.25rem; }
.my-rank { margin-top: 0.75rem; font-size: 1.1rem; opacity: 0.8; }
.waiting-card .big-emoji, .ended-card .big-emoji { animation: bounce 2s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.playing-card { animation: shake 0.5s infinite; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.wechat-hint { background: #fff3cd; color: #856404; padding: 0.6rem 1rem; border-radius: 0.375rem; font-size: 0.85rem; margin-bottom: 1rem; border: 1px solid #ffc107; }

.tap-button { display: block; width: 100%; max-width: 20rem; margin: 1rem auto; padding: 2rem 1rem; font-size: 2rem; background: #e74c3c; color: white; border: none; border-radius: 1rem; cursor: pointer; animation: pulse 1s infinite; }

/* 选择游戏屏 */
#selection-screen { padding-top: 2rem; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; max-width: 900px; margin: 2rem auto; }
.card { background: #1a1a2e; border: 2px solid #2a2a4e; border-radius: 0.75rem; padding: 1.5rem 1rem; text-align: center; cursor: pointer; transition: all 0.2s; user-select: none; }
.card:hover { border-color: #4caf50; transform: translateY(-2px); }
.card.selected { border-color: #4caf50; background: #16213e; box-shadow: 0 0 20px rgba(76,175,80,0.3); }
.card-icon { display: block; font-size: 2.5rem; margin-bottom: 0.5rem; }
.card-name { font-size: 1rem; color: #e0e0e0; }
.sel-controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }
.sel-controls label { font-size: 1rem; color: #ccc; }
.sel-controls input[type=number] { width: 4rem; padding: 0.4rem; background: #1a1a1a; color: #f0f0f0; border: 1px solid #555; border-radius: 0.25rem; }
.sel-controls .primary { padding: 0.7rem 1.5rem; font-size: 1.1rem; background: #4caf50; color: white; border: none; border-radius: 0.375rem; cursor: pointer; }
.sel-controls .primary:disabled { opacity: 0.4; cursor: not-allowed; }

.bullet-form { display: flex; gap: 0.5rem; max-width: 24rem; margin: 1rem auto; }
.bullet-form input { flex: 1; padding: 0.7rem; font-size: 1rem; border: 2px solid #ddd; border-radius: 0.375rem; outline: none; }
.bullet-form input:focus { border-color: #e74c3c; }
.bullet-form button { padding: 0.7rem 1.2rem; background: #e74c3c; color: white; border: none; border-radius: 0.375rem; font-size: 1rem; cursor: pointer; }

/* ===== 极速赛车 移动端加速器 ===== */
.race-progress-wrap { margin: 1.5rem auto 1rem; max-width: 22rem; }
.race-progress { width: 100%; height: 14px; background: rgba(0,0,0,0.08); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.15); }
.race-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #FF6B6B 0%, #FFD700 100%); border-radius: 999px; transition: width 0.15s ease-out; }
.race-progress-text { margin-top: 0.4rem; font-size: 0.95rem; color: #555; }
.race-progress-text strong { color: #e74c3c; font-size: 1.3rem; font-family: monospace; }
.race-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 220px;
  max-width: 80vw;
  max-height: 80vw;
  margin: 0.5rem auto 0.75rem;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 35% 30%, #ff8a65 0%, #e74c3c 55%, #b71c1c 100%);
  color: white;
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow:
    0 6px 0 #8b0000,
    0 10px 24px rgba(231,76,60,0.45),
    inset 0 -6px 0 rgba(0,0,0,0.18),
    inset 0 6px 0 rgba(255,255,255,0.18);
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  animation: race-pulse 1.2s ease-in-out infinite;
  transition: transform 0.05s, box-shadow 0.05s;
  position: relative;
}
.race-button:active, .race-button.pressed {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #8b0000,
    0 4px 12px rgba(231,76,60,0.4),
    inset 0 -3px 0 rgba(0,0,0,0.18),
    inset 0 3px 0 rgba(255,255,255,0.12);
  animation: none;
}
.race-button::after {
  content: "💨";
  position: absolute;
  right: -36px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  opacity: 0.7;
  animation: race-puff 1.4s linear infinite;
  pointer-events: none;
}
@keyframes race-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes race-puff {
  0% { transform: translate(0, -50%) scale(0.6); opacity: 0; }
  20% { opacity: 0.7; }
  100% { transform: translate(-30px, -50%) scale(1.2); opacity: 0; }
}
.race-hint { margin-top: 0.25rem; font-size: 0.9rem; color: #888; }

/* ===== 准备室 / Lobby ===== */
#lobby-screen {
  position: relative;
  padding: 1.5rem 1rem;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
#lobby-screen h1 { font-size: 2rem; margin-bottom: 0.25rem; color: #FFD700; }
.lobby-subtitle { color: #aaa; font-size: 1rem; margin-bottom: 1rem; }
.lobby-content {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.lobby-left, .lobby-right { flex: 0 0 auto; }
.lobby-qr-wrap {
  background: #fff;
  padding: 0.75rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,255,255,0.06);
  display: inline-block;
  line-height: 0;
}
.lobby-qr-img {
  display: block;
  width: 320px;
  height: 320px;
  max-width: 80vw;
  max-height: 50vh;
  background: #fff;
  border: 0;
}
.lobby-qr-tip { margin-top: 0.75rem; opacity: 0.8; font-size: 1rem; }

.lobby-stats {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.lobby-stat-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.5rem;
  padding: 0.6rem 1.25rem;
  min-width: 7rem;
  text-align: center;
}
.lobby-stat-num { display: block; font-size: 2rem; font-weight: bold; color: #4caf50; font-family: monospace; }
.lobby-stat-label { display: block; font-size: 0.85rem; color: #aaa; margin-top: 0.15rem; }

.lobby-player-list-wrap {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  width: 320px;
  max-width: 80vw;
  max-height: 38vh;
  overflow-y: auto;
  text-align: left;
}
.lobby-list-title { font-size: 1rem; color: #FFD700; margin: 0 0 0.5rem 0; }
.lobby-player-list { list-style: none; padding: 0; margin: 0; }
.lobby-player-list li.lobby-empty {
  color: #888;
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.95rem;
}
.lobby-player-list li.lobby-player-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 1.05rem;
}
.lobby-player-list li.lobby-player-item:last-child { border-bottom: none; }
.lobby-player-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
.lobby-player-index { color: #888; font-family: monospace; min-width: 2rem; }
.lobby-player-name { color: #f0f0f0; }

.lobby-controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.lobby-controls button {
  padding: 0.9rem 2rem;
  font-size: 1.15rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: bold;
}
.lobby-controls .secondary { background: #34495e; color: white; }
.lobby-controls .secondary:hover { background: #2c3e50; }
.lobby-controls .primary { background: #4caf50; color: white; }
.lobby-controls .primary:hover:not(:disabled) { background: #43a047; }
.lobby-controls .primary:disabled { opacity: 0.4; cursor: not-allowed; }
.lobby-controls .big-start { padding: 1.1rem 3rem; font-size: 1.4rem; box-shadow: 0 4px 18px rgba(76,175,80,0.35); }

/* 全屏按钮(浮在右上角) */
.fullscreen-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0.4rem;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s;
}
.fullscreen-btn:hover { background: rgba(255,255,255,0.2); }
.fullscreen-btn.inline {
  position: static;
  margin-left: 0.5rem;
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
}

/* 全屏模式:居中、放大、利用全屏空间 */
:fullscreen body.display, :-webkit-full-screen body.display {
  background: #0a0a0a;
}
:fullscreen #lobby-screen, :-webkit-full-screen #lobby-screen {
  max-width: 100vw;
  padding: 2rem;
}
:fullscreen .lobby-qr-img, :-webkit-full-screen .lobby-qr-img {
  width: min(45vh, 45vw);
  height: min(45vh, 45vw);
  max-width: none;
  max-height: none;
}
:fullscreen .lobby-player-list-wrap, :-webkit-full-screen .lobby-player-list-wrap {
  width: min(45vh, 45vw);
  max-width: none;
  max-height: 60vh;
}
:fullscreen .lobby-stat-num, :-webkit-full-screen .lobby-stat-num {
  font-size: 2.5rem;
}
:fullscreen #lobby-screen h1, :-webkit-full-screen #lobby-screen h1 {
  font-size: 2.5rem;
}
:fullscreen .lobby-controls .big-start, :-webkit-full-screen .lobby-controls .big-start {
  font-size: 1.8rem;
  padding: 1.3rem 3.5rem;
}