[v-cloak] { display: none !important; }

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  background: #f0f2f5; color: #333; min-height: 100vh;
}
.page { min-height: 100vh; min-height: 100dvh; }

/* 登录 */
.login-page { display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  width: 100%; max-width: 420px; background: #fff; border-radius: 10px;
  padding: 40px 32px; border: 1px solid #e8e8e8;
}
.logo-area { text-align: center; margin-bottom: 32px; }
.logo-area h1 { font-size: 22px; color: #1565c0; margin-top: 12px; }
.logo-area .sub { color: #999; font-size: 13px; margin-top: 4px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; color: #666; margin-bottom: 6px; }
.form-group input {
  width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 6px;
  font-size: 15px; outline: none;
}
.form-group input:focus { border-color: #1565c0; }
.captcha-row { display: flex; gap: 12px; align-items: flex-end; }
.captcha-input { flex: 1; }
.captcha-img { width: 120px; height: 40px; border: 1px solid #d9d9d9; border-radius: 6px; cursor: pointer; background: #fafafa; object-fit: fill; }
.btn-primary {
  width: 100%; padding: 12px; background: #1565c0; color: #fff; border: none;
  border-radius: 6px; font-size: 16px; cursor: pointer; margin-top: 8px;
}
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary:hover:not(:disabled) { background: #0d47a1; }
.tip { text-align: center; color: #999; font-size: 13px; margin-top: 16px; }

/* 主界面 */
.main-page { max-width: 640px; margin: 0 auto; padding-bottom: 24px; }
.player-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; background: #fff; border-bottom: 1px solid #e8e8e8; gap: 12px;
  position: sticky; top: 0; z-index: 10;
}
.header-left .name { font-size: 17px; font-weight: 600; }
.group-tag { display: inline-block; padding: 2px 10px; border-radius: 10px; color: #fff; font-size: 11px; margin-top: 4px; }
.header-stats { display: flex; gap: 8px; flex-shrink: 0; }
.stat-item {
  text-align: center; background: #e3f2fd; border: 1px solid #90caf9;
  border-radius: 8px; padding: 6px 10px; min-width: 52px;
}
.stat-val { display: block; font-size: 16px; font-weight: bold; color: #1565c0; line-height: 1.2; }
.stat-lbl { font-size: 11px; color: #999; }

.content-area { padding: 16px; }
.card { background: #fff; border-radius: 10px; padding: 16px; margin-bottom: 12px; border: 1px solid #e8e8e8; }
.card-title { font-size: 15px; margin-bottom: 12px; color: #333; }
.comp-card { position: relative; }
.comp-card h2 { font-size: 18px; margin: 8px 0 4px; }
.comp-card .round { color: #999; font-size: 14px; }
.online-hint { color: #999; font-size: 13px; margin-top: 8px; }
.status-tag { position: absolute; top: 16px; right: 16px; padding: 2px 10px; border-radius: 4px; font-size: 12px; color: #fff; }
.status-tag.running { background: #16a34a; }
.status-tag.ready { background: #1565c0; }
.status-tag.paused { background: #ca8a04; }

.empty-state { text-align: center; padding: 48px 20px; color: #999; }
.notice-item { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.notice-item p { color: #666; font-size: 14px; margin-top: 4px; }

.timer-bar { height: 8px; background: #e8e8e8; border-radius: 4px; margin-bottom: 16px; position: relative; overflow: hidden; }
.timer-fill { height: 100%; background: #1565c0; border-radius: 4px; transition: width .25s linear; }
.timer-text { position: absolute; right: 0; top: -24px; font-size: 15px; color: #1565c0; font-weight: bold; }
.q-type { display: inline-block; background: #1565c0; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 12px; margin-bottom: 8px; }
.q-title { font-size: 16px; line-height: 1.6; }
.options { margin-bottom: 16px; }
.option {
  display: flex; align-items: center; padding: 12px; border: 1px solid #e8e8e8;
  border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: border-color .2s, background .2s;
}
.option.disabled { cursor: default; opacity: .85; }
.option.selected { border-color: #1565c0; background: #e3f2fd; }
.opt-key {
  width: 32px; height: 32px; background: #f0f0f0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; color: #1565c0; margin-right: 12px; flex-shrink: 0;
}
.option.selected .opt-key { background: #1565c0; color: #fff; }
.opt-text { font-size: 15px; }

.buzz-panel { text-align: center; padding-top: 16px; }
.buzz-status { margin: 24px 0; }
.buzz-label { font-size: 20px; font-weight: 600; color: #666; }
.buzz-status.success .buzz-label { color: #16a34a; }
.buzz-status.foul .buzz-label { color: #dc2626; }
.buzz-status.buzzing .buzz-label { color: #dc2626; }
.buzz-btn {
  width: 160px; height: 160px; border-radius: 50%; border: 3px solid #d9d9d9;
  background: #fafafa; font-size: 24px; font-weight: bold; color: #999; cursor: not-allowed;
}
.buzz-btn.buzzing { border-color: #dc2626; background: #fef2f2; color: #dc2626; cursor: pointer; }
.buzz-btn.success { border-color: #16a34a; background: #f0fdf4; color: #16a34a; }

.essay-input-wrap { margin-bottom: 16px; }
.essay-input {
  width: 100%; padding: 12px; border: 1px solid #e8e8e8; border-radius: 8px;
  font-size: 15px; line-height: 1.5; resize: vertical; font-family: inherit;
}
.essay-input:focus { outline: none; border-color: #1565c0; }
.essay-input:disabled { background: #f5f5f5; color: #666; }

.toast {
  position: fixed; bottom: max(40px, env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); background: rgba(0,0,0,.78); color: #fff;
  padding: 10px 20px; border-radius: 8px; font-size: 14px; z-index: 999;
  max-width: 90%; text-align: center;
}

.cheat-popup {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff7e6;
  border: 1px solid #ffd591;
  color: #d46b08;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  z-index: 1001;
  max-width: min(92%, 340px);
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.cheat-watermark {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
  gap: 48px 64px;
  opacity: 0.07;
  font-size: 20px;
  font-weight: 700;
  color: #1565c0;
  transform: rotate(-22deg);
  overflow: hidden;
}
body.anti-cheat-active {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.anti-cheat-active .quiz-panel,
body.anti-cheat-active .question-card,
body.anti-cheat-active .option,
body.anti-cheat-active .wait-panel,
body.anti-cheat-active .header-bar {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.anti-cheat-active .essay-input,
body.anti-cheat-active textarea,
body.anti-cheat-active input[type="text"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* 电脑端适配 */
@media (min-width: 768px) {
  .main-page { max-width: 960px; padding: 0 24px 32px; }
  .player-header { border-radius: 0 0 10px 10px; margin-top: 0; padding: 18px 24px; }
  .header-left .name { font-size: 20px; }
  .stat-item { min-width: 72px; padding: 8px 14px; }
  .stat-val { font-size: 20px; }
  .content-area { padding: 24px 0; }
  .quiz-panel {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start;
  }
  .quiz-panel .timer-bar { grid-column: 1 / -1; }
  .quiz-panel .question-card { grid-column: 1 / -1; }
  .quiz-panel .options { grid-column: 1; margin-bottom: 0; }
  .quiz-panel .essay-input-wrap { grid-column: 1; }
  .quiz-panel .btn-primary { grid-column: 2; align-self: end; max-width: 280px; justify-self: end; }
  .options { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .option { margin-bottom: 0; }
  .q-title { font-size: 20px; }
  .login-card { padding: 48px 40px; }
  .buzz-panel { max-width: 560px; margin: 0 auto; }
  .buzz-btn { width: 200px; height: 200px; font-size: 28px; }
}

@media (min-width: 1200px) {
  .main-page { max-width: 1080px; }
  .options { grid-template-columns: 1fr 1fr; }
  .quiz-panel .options { grid-column: 1 / -1; }
}