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

html {
  overscroll-behavior: none;
}

body {
  height: 100vh;
  background: linear-gradient(135deg, #f9a825, #ffd200);
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
  overscroll-behavior: none;
}

#app {
  width: 100%;
  height: 100%;
}

.screen {
  display: none;
}

.screen.active {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.hidden {
  display: none !important;
}

.panel {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  padding: 32px;
}

.title {
  font-size: 46px;
  text-align: center;
}

.subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 18px;
}

.auth-panel {
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tabs {
  display: flex;
  gap: 8px;
}

.score-rules {
  background: #fff8e6;
  border: 1px solid #f5d78e;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
}

.score-rules h3 {
  font-size: 15px;
  margin-bottom: 6px;
  color: #b8860b;
}

.score-rules ul {
  list-style: none;
}

.score-rules li {
  padding: 2px 0;
  color: #555;
}

.score-rules li b {
  color: #dd2476;
}

.tournament-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #f5d78e;
  color: #b8860b;
  font-size: 13px;
  line-height: 1.5;
}

.tournament-hint b {
  color: #dd2476;
}

.tab {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background: #eee;
  color: #555;
  cursor: pointer;
}

.tab.active {
  background: linear-gradient(135deg, #ff512f, #dd2476);
  color: #fff;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  outline: none;
}

input:focus {
  border-color: #ff512f;
}

.msg {
  min-height: 20px;
  color: #e74c3c;
  font-size: 14px;
  text-align: center;
}

button {
  font-family: inherit;
}

#auth-submit,
.big-btn {
  width: 100%;
  padding: 13px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #ff512f, #dd2476);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(221, 36, 118, 0.4);
  transition: transform 0.15s;
}

#auth-submit:hover,
.big-btn:hover {
  transform: scale(1.03);
}

.big-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.big-btn.ghost {
  background: #fff;
  color: #dd2476;
  border: 2px solid #dd2476;
  box-shadow: none;
}

.icon-btn {
  padding: 8px 14px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.icon-btn:hover {
  background: #fff;
}

#lobby-screen.active {
  flex-direction: column;
  justify-content: flex-start;
}

.lobby-header {
  width: min(1000px, 95%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  margin-top: 30px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.user-info {
  font-size: 18px;
  font-weight: bold;
}

.header-btns {
  display: flex;
  gap: 8px;
}

.lobby-main {
  width: min(1000px, 95%);
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.lobby-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lobby-left h2,
.lobby-right h2 {
  margin-bottom: 4px;
}

.join-row {
  display: flex;
  gap: 10px;
}

.join-row input {
  flex: 1;
}

.join-row .big-btn {
  width: auto;
  padding: 12px 20px;
}

.lobby-right {
  flex: 1;
  max-height: 420px;
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  color: #888;
  font-weight: 600;
}

.room-panel {
  width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#room-code-label {
  color: #dd2476;
  letter-spacing: 3px;
}

#room-players {
  list-style: none;
  text-align: left;
  max-height: 200px;
  overflow: auto;
}

#room-players li {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}

.room-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

#game-wrap {
  display: flex;
  gap: 14px;
  align-items: center;
}

#game-container {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  max-width: 900px;
  width: 100%;
  touch-action: none;
  overscroll-behavior: none;
}

#game-canvas {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  background: linear-gradient(180deg, #87ceeb 0%, #b0e0e6 60%, #90ee90 100%);
  cursor: crosshair;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

#game-hud {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 16px 22px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  pointer-events: none;
  z-index: 5;
}

#game-hud span {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#countdown-el {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 120px;
  font-weight: bold;
  color: #fff;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 6;
}

#waiting-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  background: rgba(0, 0, 0, 0.35);
  z-index: 7;
  text-align: center;
  color: #fff;
}

#waiting-overlay.hidden {
  display: none;
}

#waiting-overlay h2 {
  font-size: 40px;
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6);
}

#waiting-overlay p {
  font-size: 20px;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

#waiting-overlay .big-btn {
  width: auto;
  padding: 14px 44px;
}

#solo-test-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

#solo-test-row select {
  padding: 12px 14px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: #fff;
  outline: none;
}

#solo-test-row .big-btn {
  padding: 12px 24px;
}

#tournament-status {
  font-weight: bold;
  color: #ffd32a;
}

#tournament-admin {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  padding: 12px 16px;
}

#tournament-admin .join-row input {
  flex: 1;
}

#choice-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 2px dashed #dd2476;
  border-radius: 12px;
  background: #fff5f7;
}

#choice-countdown {
  font-size: 52px;
  font-weight: bold;
  color: #dd2476;
  text-align: center;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(221, 36, 118, 0.3);
}

#choice-msg {
  font-size: 15px;
  line-height: 1.5;
}

.game-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

#sidebar {
  width: 270px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

#sidebar h3 {
  margin-bottom: 12px;
  text-align: center;
}

#live-ranks {
  list-style: none;
  overflow: auto;
  flex: 1;
}

#live-ranks li,
#result-ranking li {
  display: flex;
  justify-content: space-between;
  padding: 9px 10px;
  margin-bottom: 6px;
  background: #f7f7f7;
  border-radius: 8px;
  font-size: 15px;
}

#live-ranks li.me,
#result-ranking li.me {
  background: #ffe0e6;
  border: 2px solid #dd2476;
  font-weight: bold;
}

#live-ranks li b,
#result-ranking li b {
  color: #dd2476;
}

#toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  z-index: 100;
  font-size: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

#beat-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 220, 130, 0.45), rgba(255, 160, 60, 0.12) 55%, transparent 75%);
}

.remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
}

.remember input {
  width: auto;
  accent-color: #dd2476;
}

.result-panel {
  width: 460px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#result-ranking {
  list-style: none;
  max-height: 320px;
  overflow: auto;
}

#result-ranking li {
  font-size: 16px;
  padding: 10px 14px;
}

.role-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, #f7971e, #ffd200);
  border-radius: 12px;
  vertical-align: middle;
}

.hint {
  color: #888;
  font-size: 14px;
}

.big-btn.danger {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  box-shadow: 0 6px 18px rgba(231, 76, 60, 0.4);
}

#admin-panel {
  margin-top: 6px;
  padding: 14px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fbfbfb;
}

#admin-panel h3 {
  margin-bottom: 10px;
  font-size: 16px;
}

#admin-list {
  list-style: none;
  margin-top: 8px;
  max-height: 120px;
  overflow: auto;
}

#admin-list li {
  padding: 6px 4px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}

#admin-panel .join-row {
  margin-bottom: 8px;
}

/* 背景图(应用到整个 #app 容器, 登录页/大厅/游戏/结果页均显示) */
#app {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#bg-admin {
  margin-top: 6px;
  padding: 14px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fbfbfb;
}

#bg-admin h3 {
  margin-bottom: 8px;
  font-size: 16px;
}

.file-input {
  width: 100%;
  padding: 9px;
  font-size: 14px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  background: #fff;
}

.bg-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.bg-actions .big-btn {
  flex: 1;
  padding: 11px 14px;
  font-size: 15px;
}

#bg-preview-row {
  margin-top: 10px;
}

#bg-preview {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eee;
}

@media (max-width: 900px) {
  #game-wrap {
    flex-direction: column;
  }

  #sidebar {
    width: 100%;
    max-height: 220px;
  }

  .lobby-main {
    flex-direction: column;
    overflow: auto;
    padding-bottom: 20px;
  }

  .lobby-right {
    max-height: 300px;
  }
}

@media (max-width: 560px) {
  body {
    height: 100dvh;
    overflow: auto;
  }

  #app {
    overflow-y: auto;
  }

  .auth-panel {
    width: 92vw;
    padding: 24px 18px;
  }

  .title {
    font-size: 34px;
  }

  .lobby-header {
    flex-direction: column;
    gap: 10px;
    width: 94vw;
    padding: 12px;
  }

  .header-btns {
    flex-wrap: wrap;
    justify-content: center;
  }

  .lobby-main {
    width: 94vw;
    gap: 12px;
  }

  .panel {
    padding: 18px;
  }

  .room-panel {
    width: 94vw;
  }

  .result-panel {
    width: 94vw;
  }

  #countdown-el {
    font-size: 80px;
  }

  #game-hud span {
    font-size: 16px;
  }

  #game-hud {
    padding: 10px 14px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
  }

  button,
  input {
    font-size: 16px;
  }

  #sidebar {
    max-height: 180px;
  }
}