:root {
  --bg-1: #0f1737;
  --bg-2: #1e3a8a;
  --bg-3: #7c3aed;
  --card: rgba(255,255,255,0.97);
  --line: rgba(148,163,184,.25);
  --text: #12203a;
  --muted: #51607c;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --accent: #f59e0b;
  --pink: #ec4899;
  --green: #16a34a;
  --red: #dc2626;
  --warning: #f97316;
  --shadow: 0 22px 60px rgba(15, 23, 66, 0.28);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 24%), linear-gradient(135deg, var(--bg-1), var(--bg-2) 45%, var(--bg-3));
}
.gameshow-body { overflow-x: hidden; }
.hidden { display: none !important; }
.page-bg, .lights, .stars { position: fixed; inset: 0; pointer-events: none; }
.lights {
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,0.26), transparent 16%),
    radial-gradient(circle at 90% 0%, rgba(255, 230, 160, 0.18), transparent 16%),
    radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.26), transparent 20%);
  animation: glowShift 6s ease-in-out infinite alternate;
}
.stars {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 1.6px);
  background-size: 90px 90px, 130px 130px;
  background-position: 0 0, 40px 20px;
  opacity: .28;
}
.container {
  width: min(1240px, calc(100% - 28px));
  margin: 22px auto 28px;
  position: relative;
  z-index: 1;
}
.show-container { padding-bottom: 28px; }
.show-hero, .hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 28px;
  border-radius: 28px;
  color: white;
  background: rgba(10, 18, 48, 0.62);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.hero.compact { padding: 24px; }
.show-hero h1, .hero h1 {
  margin: 10px 0 8px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
}
.show-hero p, .hero p {
  margin: 0;
  color: rgba(255,255,255,.9);
  max-width: 780px;
}
.badge, .tiny-tag, .intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}
.badge { background: rgba(255,255,255,0.16); }
.badge-hot {
  background: linear-gradient(135deg, rgba(251, 191, 36, .95), rgba(236,72,153,.95));
  color: white;
  box-shadow: 0 10px 25px rgba(236,72,153,.22);
}
.tiny-tag, .intro-badge { background: #eff6ff; color: #1d4ed8; }
.tag-accent { background: #fff7ed; color: #ea580c; }
.meta-row {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.meta-row span {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
}
.hero-actions, .button-row, .controls-row, .action-stack {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.action-stack { flex-direction: column; }
.controls-row.center { justify-content: center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, #2563eb, #7c3aed); color: white; box-shadow: 0 16px 30px rgba(37,99,235,.24); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-light { background: white; color: #102047; }
.btn-outline { background: transparent; color: inherit; border-color: rgba(148,163,184,.45); }
.btn-sm { padding: 8px 12px; border-radius: 12px; font-size: 13px; }
.card, .alert, .score-box {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.alert {
  margin-top: 18px;
  padding: 15px 18px;
  font-weight: 700;
}
.alert-success { color: #166534; background: #ecfdf5; }
.alert-error { color: #991b1b; background: #fef2f2; }
.admin-layout { padding-bottom: 32px; }
.admin-grid { margin-top: 22px; display: grid; grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-panel { padding: 22px; }
.admin-panel h2 { margin-top: 0; }
.stack-form { display: grid; gap: 14px; }
label { display: grid; gap: 8px; font-weight: 700; color: #0f172a; }
input, textarea, select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  font: inherit;
  background: white;
}
textarea { resize: vertical; }
.two-col, .three-col {
  display: grid;
  gap: 12px;
}
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.question-editor {
  padding: 18px;
  margin-bottom: 14px;
  border-radius: 22px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.question-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.question-editor-head h3 { margin: 0; }
.recent-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.recent-item {
  text-decoration: none;
  color: inherit;
  padding: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 18px;
  display: grid;
  gap: 6px;
}
.recent-item:hover { border-color: #60a5fa; }
code { padding: 2px 6px; border-radius: 8px; background: #e2e8f0; }
.show-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 20px;
  margin-top: 20px;
}
.stage-card, .question-stage { padding: 22px; }
.stage-logo {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: white;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 14px 30px rgba(37,99,235,.25);
}
.show-sidebar h2 { margin-bottom: 8px; }
.show-sidebar p { color: var(--muted); line-height: 1.65; }
.reward-box {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border: 1px solid rgba(249,115,22,.18);
}
.reward-title { font-weight: 800; color: #9a3412; margin-bottom: 6px; }
.reward-text { color: #7c2d12; line-height: 1.6; }
.mini-team-wrap {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.mini-team {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  color: white;
  font-weight: 800;
}
.mini-a { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.mini-b { background: linear-gradient(135deg, #ec4899, #f9a8d4); }
.mini-team span { font-size: 26px; }
.score-mini {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.score-mini-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.score-mini > div {
  padding: 14px 10px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  text-align: center;
}
.score-mini span { display: block; font-size: 28px; font-weight: 900; }
.score-mini small { color: var(--muted); font-weight: 700; }
.top-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}
.status-label { color: var(--muted); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.status-value { font-size: 28px; font-weight: 900; margin-top: 4px; }
.timer-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 22px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
}
.timer-panel.warning {
  background: #fff7ed;
  border-color: #fdba74;
  animation: shake .3s ease-in-out infinite alternate;
}
.timer-ring { width: 86px; height: 86px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: #dbeafe; stroke-width: 10; }
.ring-progress { fill: none; stroke: #2563eb; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .28s linear; }
.timer-content strong { display: block; font-size: 34px; }
.team-scoreboard {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.team-card {
  padding: 18px;
  border-radius: 24px;
  border: 2px solid transparent;
  background: #f8fafc;
  transition: .18s ease;
}
.team-card.is-active {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 28px rgba(15, 23, 66, 0.14);
}
.team-a-card { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.team-b-card { background: linear-gradient(135deg, #fdf2f8, #fce7f3); }
.team-a-card.is-active { border-color: #2563eb; }
.team-b-card.is-active { border-color: #ec4899; }
.team-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.team-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
}
.team-a-card .team-color { background: #2563eb; }
.team-b-card .team-color { background: #ec4899; }
.team-name { font-size: 20px; font-weight: 900; }
.team-sub { color: var(--muted); font-weight: 700; font-size: 13px; }
.team-main-score { font-size: 56px; font-weight: 900; margin-top: 8px; }
.team-stats-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #334155;
  font-weight: 700;
}
.intro-panel, .result-panel {
  margin-top: 18px;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border: 1px solid #e2e8f0;
}
.host-note {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
}
.feature-row {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.feature-row span {
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-weight: 800;
  font-size: 14px;
}
.question-panel { margin-top: 18px; display: grid; gap: 16px; }
.question-headline { display: flex; gap: 10px; flex-wrap: wrap; }
.buzzer-board {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: white;
}
.buzzer-info small { display: block; margin-top: 6px; color: rgba(255,255,255,.75); }
.buzzers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.buzzer-btn {
  border: none;
  border-radius: 22px;
  padding: 18px 16px;
  color: white;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  transition: .18s ease;
}
.buzzer-btn:hover { transform: translateY(-1px); }
.buzzer-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.buzzer-a { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.buzzer-b { background: linear-gradient(135deg, #ec4899, #fb7185); }
.question-shell {
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border: 1px solid #e2e8f0;
}
.question-shell h2 {
  margin: 0 0 18px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35;
}
.answer-window {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 18px;
  background: #fff7ed;
  border: 1px solid #fdba74;
}
.answer-window-label { font-size: 13px; color: #9a3412; font-weight: 800; text-transform: uppercase; }
.answer-window-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(249,115,22,.18);
  overflow: hidden;
}
.answer-window-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  transition: width .3s linear;
}
.answer-window strong { font-size: 24px; color: #9a3412; }
.options-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.option-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid #dbeafe;
  background: white;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  transition: .16s ease;
}
.option-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 24px rgba(37,99,235,.12); }
.option-btn.is-disabled,
.option-btn:disabled { cursor: not-allowed; opacity: .86; }
.option-btn.is-correct { background: #ecfdf5; border-color: rgba(22,163,74,.45); }
.option-btn.is-wrong { background: #fef2f2; border-color: rgba(220,38,38,.35); }
.option-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  font-size: 18px;
}
.feedback-box, .explanation-box {
  padding: 16px 18px;
  border-radius: 20px;
  line-height: 1.65;
}
.feedback-box.correct { background: #ecfdf5; color: #166534; }
.feedback-box.wrong { background: #fef2f2; color: #991b1b; }
.feedback-box.timeout { background: #fff7ed; color: #9a3412; }
.feedback-box.neutral { background: #eff6ff; color: #1d4ed8; }
.explanation-box { background: #eff6ff; color: #1e3a8a; }
.result-panel { text-align: center; }
.result-crown { font-size: 56px; }
.final-score {
  margin: 12px auto;
  width: fit-content;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white;
  font-size: 36px;
  font-weight: 900;
}
.winner-banner {
  margin: 16px auto 6px;
  width: fit-content;
  max-width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 900;
}
.result-stats {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.stat-chip {
  padding: 10px 14px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-weight: 800;
}
.team-a-stat { background: #eff6ff; color: #1d4ed8; }
.team-b-stat { background: #fdf2f8; color: #be185d; }
.reward-card {
  margin-top: 18px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 20px;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 700;
}
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(4px);
}
.overlay-card {
  width: min(420px, 100%);
  padding: 26px;
  text-align: center;
  border-radius: 30px;
  color: white;
  box-shadow: var(--shadow);
  animation: popIn .24s ease-out;
}
.overlay-card.correct { background: linear-gradient(135deg, #16a34a, #22c55e); }
.overlay-card.wrong { background: linear-gradient(135deg, #dc2626, #fb7185); }
.overlay-card.timeout { background: linear-gradient(135deg, #f59e0b, #fb923c); }
.countdown-card { background: linear-gradient(135deg, #0f172a, #1e3a8a); }
.overlay-label { font-weight: 800; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.overlay-icon { font-size: 56px; }
.countdown-number { font-size: 84px; font-weight: 900; line-height: 1; margin: 10px 0; }
.confetti-piece {
  position: fixed;
  top: -30px;
  width: 12px;
  height: 22px;
  z-index: 35;
  border-radius: 4px;
  background: linear-gradient(135deg, #f59e0b, #ec4899, #2563eb);
  animation: confettiFall linear forwards;
}
@keyframes glowShift {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(6px) scale(1.03); }
}
@keyframes popIn {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes confettiFall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(40px, 110vh, 0) rotate(720deg); opacity: .1; }
}
@keyframes shake {
  from { transform: translateX(-1px); }
  to { transform: translateX(1px); }
}
@media (max-width: 1080px) {
  .show-layout, .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .show-hero, .hero { padding: 20px; border-radius: 24px; }
  .team-scoreboard, .buzzers, .options-stage, .two-col, .three-col, .top-status { grid-template-columns: 1fr; }
  .question-shell h2 { font-size: 25px; }
  .timer-panel { justify-content: flex-start; }
  .action-stack { flex-direction: row; }
  .score-mini-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}


.hero-brand-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}
.hero-brand-image {
  width: min(310px, 32vw);
  max-width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 30px rgba(15, 23, 66, 0.22);
  background: rgba(255,255,255,.08);
}
.stage-logo-image-wrap {
  width: 100%;
  height: auto;
  padding: 8px;
  border-radius: 22px;
  background: linear-gradient(135deg, #eff6ff, #fff7ed);
  overflow: hidden;
}
.stage-logo-image-wrap img {
  width: 100%;
  display: block;
  border-radius: 16px;
}
.voice-note-box {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 20px;
  background: #eff6ff;
  color: #1d4ed8;
  line-height: 1.6;
  border: 1px solid #bfdbfe;
}
.voice-note-box strong {
  display: block;
  margin-bottom: 6px;
}
.intro-panel-rich {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 20px;
  align-items: stretch;
}
.intro-poster {
  border-radius: 22px;
  overflow: hidden;
  background: #dbeafe;
  border: 1px solid #cbd5e1;
  box-shadow: 0 16px 32px rgba(15, 23, 66, 0.12);
}
.intro-poster img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.intro-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.countdown-card-rich {
  width: min(560px, 100%);
}
.countdown-logo {
  width: min(300px, 85%);
  display: block;
  margin: 0 auto 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
@media (max-width: 960px) {
  .hero-brand-wrap, .intro-panel-rich {
    grid-template-columns: 1fr;
    display: grid;
  }
  .hero-brand-wrap {
    align-items: start;
  }
  .hero-brand-image {
    width: 100%;
    max-width: 520px;
  }
}
@media (max-width: 760px) {
  .hero-brand-wrap {
    gap: 14px;
  }
  .countdown-logo {
    width: 88%;
  }
}


.audio-upload-card {
  padding: 18px;
  border-radius: 22px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.audio-upload-card h3 {
  margin: 0 0 8px;
}
.audio-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.audio-upload-item {
  padding: 14px;
  border-radius: 18px;
  background: white;
  border: 1px solid #dbeafe;
}
.audio-current-row {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.audio-current-row audio {
  width: 100%;
}
.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.check-inline input {
  width: auto;
}
.audio-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
}
.audio-link:hover {
  text-decoration: underline;
}
@media (max-width: 760px) {
  .audio-upload-grid {
    grid-template-columns: 1fr;
  }
}


.api-config-panel {
  margin-top: 22px;
}
.api-config-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-bottom: 16px;
}
.api-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 10px;
  min-width: min(100%, 420px);
}
.api-status-item {
  padding: 14px 16px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.api-status-item.wide {
  grid-column: 1 / -1;
}
.api-status-item small {
  display: block;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 700;
}
.api-status-item strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
}
.check-block {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
}
.check-block > span {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
  color: #0f172a;
}
.api-clear-box {
  align-self: end;
}
.api-note-box {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #eff6ff;
  color: #1d4ed8;
  line-height: 1.6;
  border: 1px solid #bfdbfe;
}
@media (max-width: 900px) {
  .api-config-head {
    flex-direction: column;
  }
  .api-status-grid {
    width: 100%;
    min-width: 0;
  }
}

.quick-test-panel {
  margin-top: 22px;
}
.panel-head-inline {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  margin-bottom: 16px;
}
.model-pill-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.model-pill,
.result-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}
.model-pill {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.result-badge {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fdba74;
}
.quick-test-grid,
.quick-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.quick-form,
.quick-result-card {
  padding: 18px;
  border-radius: 22px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.quick-form h3,
.quick-result-card h3 {
  margin: 0 0 8px;
}
.quick-result-grid {
  margin-top: 16px;
}
.quick-result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.preview-question {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.5;
  color: #0f172a;
  margin-bottom: 14px;
}
.preview-options {
  display: grid;
  gap: 10px;
}
.preview-option {
  padding: 12px 14px;
  border-radius: 16px;
  background: white;
  border: 1px solid #dbeafe;
  line-height: 1.55;
}
.preview-option.is-correct {
  background: #ecfdf5;
  border-color: rgba(22,163,74,.35);
}
.preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.preview-meta span {
  padding: 8px 12px;
  border-radius: 999px;
  background: white;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  font-weight: 700;
}
.preview-explain {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #eff6ff;
  color: #1d4ed8;
  line-height: 1.6;
}
.tts-audio-player {
  width: 100%;
  margin-top: 14px;
}
@media (max-width: 900px) {
  .panel-head-inline {
    flex-direction: column;
  }
  .model-pill-wrap {
    justify-content: flex-start;
  }
}
@media (max-width: 760px) {
  .quick-test-grid,
  .quick-result-grid {
    grid-template-columns: 1fr;
  }
}

.team-manager-card, .remote-links-card {
  padding: 18px;
  border-radius: 22px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.team-editor-wrap {
  display: grid;
  gap: 12px;
}
.team-editor {
  display: grid;
  grid-template-columns: 1fr 140px 84px;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border-radius: 18px;
  background: white;
  border: 1px solid #dbeafe;
}
.controller-link-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.show-layout-wide {
  grid-template-columns: 320px 1fr;
}
.team-scoreboard-many {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.dynamic-team-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--team-color) 12%, white), #ffffff);
  border-color: color-mix(in srgb, var(--team-color) 65%, white);
}
.dynamic-team-card .team-color {
  background: var(--team-color);
}
.multi-teams {
  grid-template-columns: 1fr;
}
.multi-team-item {
  box-shadow: 0 12px 24px rgba(15,23,66,.12);
}
.buzzers-many {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.dynamic-buzzer-btn.is-active {
  transform: scale(1.02);
  box-shadow: 0 18px 28px rgba(15,23,66,.22);
}
.remote-body {
  min-height: 100vh;
}
.remote-container {
  width: min(920px, calc(100% - 24px));
}
.remote-card {
  padding: 24px;
}
.remote-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.remote-team-link {
  display: grid;
  gap: 8px;
  text-decoration: none;
  color: #0f172a;
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--team-color) 18%, white), white);
  border: 2px solid color-mix(in srgb, var(--team-color) 60%, white);
  font-weight: 800;
}
.remote-team-current {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--team-color) 18%, white), white);
  border: 2px solid color-mix(in srgb, var(--team-color) 65%, white);
}
.remote-team-name {
  font-size: 28px;
  font-weight: 900;
  color: #0f172a;
}
.remote-status-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.remote-status-box {
  padding: 16px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.remote-status-box small {
  display: block;
  color: #64748b;
  margin-bottom: 8px;
}
.remote-status-box strong {
  font-size: 22px;
}
.remote-buzz-wrap {
  margin-top: 22px;
  display: grid;
  gap: 14px;
}
.remote-buzz-button {
  width: 100%;
  min-height: 180px;
  border: none;
  border-radius: 30px;
  color: white;
  font-size: clamp(34px, 6vw, 54px);
  font-weight: 900;
  background: linear-gradient(135deg, var(--team-color), color-mix(in srgb, var(--team-color) 78%, black));
  box-shadow: 0 22px 36px rgba(15,23,66,.25);
}
.remote-buzz-button:disabled {
  opacity: .68;
}
#remoteHintText {
  margin: 0;
  text-align: center;
  color: #475569;
  font-weight: 700;
}
@media (max-width: 860px) {
  .team-editor {
    grid-template-columns: 1fr;
  }
  .remote-status-grid {
    grid-template-columns: 1fr;
  }
}


.team-editor {
  grid-template-columns: minmax(0, 1fr) 140px 120px 84px;
}
.team-pin-card {
  margin-top: 18px;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff7ed, #ffffff);
  border: 1px solid #fdba74;
}
.team-pin-card h2 {
  margin-top: 0;
}
.team-pin-form {
  display: grid;
  gap: 14px;
}
.remote-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.remote-admin-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--team-color) 12%, white), #fff);
  border: 2px solid color-mix(in srgb, var(--team-color) 55%, white);
}
.remote-admin-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}
.remote-admin-top strong {
  font-size: 20px;
}
.remote-admin-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--team-color);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--team-color) 22%, white);
}
.remote-admin-qr {
  background: white;
  border-radius: 18px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  display: flex;
  justify-content: center;
}
.remote-admin-qr img {
  width: min(220px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.remote-admin-link {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.84);
  border: 1px dashed #cbd5e1;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
}
.remote-team-grid-rich .remote-team-link {
  min-height: 120px;
}
@media (max-width: 860px) {
  .team-editor {
    grid-template-columns: 1fr;
  }
}


.admin-top-nav {
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  top: 10px;
  z-index: 20;
  backdrop-filter: blur(10px);
}
.admin-top-nav a {
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
  border: 1px solid #bfdbfe;
}
.admin-top-nav a:hover { background: #dbeafe; }
#api-config, #quick-test, #generate-ai, #manual-edit, #remote-teams, #recent-quizzes {
  scroll-margin-top: 88px;
}
.admin-collapse {
  border: 1px solid #dbeafe;
  border-radius: 22px;
  background: #f8fbff;
}
.admin-collapse + .admin-collapse { margin-top: 4px; }
.admin-collapse summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 900;
  color: #102047;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-collapse summary::-webkit-details-marker { display:none; }
.admin-collapse summary::after {
  content: '▾';
  color: #2563eb;
  font-size: 18px;
}
.admin-collapse[open] summary::after { content: '▴'; }
.admin-collapse-body {
  padding: 0 18px 18px;
  display: grid;
  gap: 14px;
}
.sticky-save-row {
  position: sticky;
  bottom: 10px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  border: 1px solid #dbeafe;
  box-shadow: 0 10px 22px rgba(15,23,66,.12);
  justify-content: space-between;
}
@media (max-width: 760px) {
  .admin-top-nav {
    top: 0;
    border-radius: 18px;
  }
  .sticky-save-row {
    position: static;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }
}


.admin-form-sections {
  gap: 12px;
}
.compact-card {
  padding: 16px;
}
.ai-submit-row {
  justify-content: flex-start;
  margin-top: 2px;
}
@media (max-width: 1280px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 980px) {
  .admin-top-nav {
    position: static;
  }
}


.stage-flash-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 16;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 35%, var(--flash-color, rgba(255,255,255,.75)), transparent 42%),
    linear-gradient(180deg, var(--flash-color, rgba(255,255,255,.3)), transparent 68%);
}
.stage-flash-layer.is-active {
  animation: stageFlashPulse .52s ease-out forwards;
}
.fireworks-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 17;
  overflow: hidden;
}
.led-firework {
  position: absolute;
  width: 0;
  height: 0;
  filter: drop-shadow(0 0 12px var(--fire-color, #fff));
}
.led-firework::before,
.led-firework::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--fire-color, #fff) 72%, white);
  opacity: 0;
  animation: fireRing 1.45s ease-out var(--ring-delay, 0s) forwards;
}
.led-firework::after {
  inset: -20px;
  border-width: 1px;
}
.led-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--particle-color, var(--fire-color, #fff));
  box-shadow: 0 0 16px var(--particle-color, var(--fire-color, #fff)), 0 0 28px color-mix(in srgb, var(--particle-color, #fff) 60%, white);
  animation: ledBurst 1.35s cubic-bezier(.19,.78,.2,1) var(--delay, 0s) forwards;
}
.mc-speaking-indicator {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 21;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .88);
  color: #fff;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 32px rgba(15, 23, 66, .28);
  animation: mcSpeakPulse 1s ease-in-out infinite;
}
body.mc-is-speaking .show-hero,
body.mc-is-speaking .countdown-card {
  box-shadow: 0 0 0 2px rgba(251, 191, 36, .22), 0 24px 54px rgba(15, 23, 66, 0.30);
}
@keyframes stageFlashPulse {
  0% { opacity: 0; }
  25% { opacity: .92; }
  100% { opacity: 0; }
}
@keyframes ledBurst {
  0% {
    transform: rotate(var(--angle)) translateX(0) scale(.4);
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    transform: rotate(var(--angle)) translateX(var(--distance)) scale(0.9);
    opacity: 0;
  }
}
@keyframes fireRing {
  0% { transform: scale(.2); opacity: .85; }
  100% { transform: scale(2.8); opacity: 0; }
}
@keyframes mcSpeakPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.admin-top-nav {
  position: static;
}
.admin-panel {
  overflow: hidden;
}
.admin-collapse {
  overflow: hidden;
}
.team-manager-card.compact-card {
  margin-top: 4px;
}
.audio-upload-item label {
  align-items: start;
}
.audio-upload-item input[type="file"] {
  padding: 10px 12px;
}
@media (max-width: 1500px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .mc-speaking-indicator {
    right: 12px;
    top: 12px;
    font-size: 13px;
  }
}

.led-stage-wall {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .68;
  overflow: hidden;
  --team-glow: rgba(96,165,250,.45);
  background:
    radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--team-glow) 30%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(4, 11, 35, 0.0) 0%, rgba(6, 15, 43, 0.2) 20%, rgba(6, 10, 28, 0.58) 100%);
}
.led-wall-grid,
.led-wave {
  position: absolute;
  inset: 0;
}
.led-wall-grid {
  background-image:
    radial-gradient(circle at center, color-mix(in srgb, var(--team-glow) 65%, white) 0 1px, transparent 1.6px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px, 32px 32px, 32px 32px;
  opacity: .5;
  mix-blend-mode: screen;
  animation: ledGridDrift 14s linear infinite;
}
.led-wave {
  filter: blur(12px);
  opacity: .78;
}
.led-wave-a {
  background: radial-gradient(circle at 25% 18%, color-mix(in srgb, var(--team-glow) 80%, white), transparent 34%);
  animation: ledWaveFloatA 9s ease-in-out infinite alternate;
}
.led-wave-b {
  background: radial-gradient(circle at 76% 30%, color-mix(in srgb, var(--team-glow) 58%, #f59e0b), transparent 38%);
  animation: ledWaveFloatB 11s ease-in-out infinite alternate;
}
.led-stage-wall.is-pulsing {
  animation: ledWallPulse .55s ease-out;
}
.stage-beams {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  opacity: .72;
}
.stage-beams span {
  position: absolute;
  top: -12%;
  width: 22vw;
  height: 74vh;
  background: linear-gradient(180deg, color-mix(in srgb, var(--team-glow, rgba(96,165,250,.42)) 72%, transparent), transparent 78%);
  filter: blur(20px);
  transform-origin: top center;
  animation: beamSweep 6s ease-in-out infinite;
}
.stage-beams span:nth-child(1) { left: -4vw; animation-delay: 0s; }
.stage-beams span:nth-child(2) { left: 16vw; animation-delay: -1.2s; }
.stage-beams span:nth-child(3) { left: 39vw; animation-delay: -2.4s; }
.stage-beams span:nth-child(4) { left: 61vw; animation-delay: -3.6s; }
.stage-beams span:nth-child(5) { left: 82vw; animation-delay: -4.8s; }
.equalizer-hud {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 19;
  display: flex;
  align-items: end;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(9, 17, 44, .58);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 42px rgba(15, 23, 66, .24);
}
.equalizer-hud span {
  width: 8px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fde68a, #60a5fa 55%, #7c3aed);
  box-shadow: 0 0 12px rgba(96,165,250,.34);
  transform-origin: bottom center;
  transform: scaleY(calc(var(--bar-height, 18) / 100));
  transition: transform .14s linear, opacity .18s ease;
}
.equalizer-hud[data-mode="voice"] span { background: linear-gradient(180deg, #fef08a, #fb7185 52%, #7c3aed); }
.equalizer-hud[data-mode="win"] span { background: linear-gradient(180deg, #ffffff, #fbbf24 38%, #ec4899 68%, #7c3aed); }
.equalizer-hud[data-mode="buzz"] span { background: linear-gradient(180deg, #fff, #60a5fa 40%, #22c55e 78%); }
.audience-cheer {
  position: fixed;
  left: 50%;
  top: 82px;
  transform: translateX(-50%);
  z-index: 20;
  padding: 14px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(251,191,36,.96), rgba(236,72,153,.96));
  color: white;
  font-weight: 900;
  box-shadow: 0 18px 36px rgba(236,72,153,.25);
}
.audience-cheer.is-visible {
  animation: audienceCheerPop 1.8s ease forwards;
}
.countdown-logo-wrap {
  perspective: 1100px;
}
.countdown-logo-wrap.is-live .countdown-logo {
  animation: logoZoomSpin3D 1.8s ease-in-out infinite alternate;
}
body[data-stage-mode="intro"] .show-hero,
body[data-stage-mode="intro"] .question-stage {
  box-shadow: 0 0 0 1px rgba(96,165,250,.16), 0 26px 68px rgba(15,23,66,.34);
}
body[data-stage-mode="win"] .question-stage,
body[data-stage-mode="win"] .show-hero {
  box-shadow: 0 0 0 1px rgba(251,191,36,.18), 0 28px 72px rgba(236,72,153,.28);
}
.led-core,
.led-halo,
.led-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}
.led-core {
  width: 22px;
  height: 22px;
  background: color-mix(in srgb, var(--fire-color, #fff) 78%, white);
  box-shadow: 0 0 20px var(--fire-color, #fff), 0 0 40px color-mix(in srgb, var(--fire-color, #fff) 50%, white);
  animation: fireCorePulse 1.4s ease-out forwards;
}
.led-halo,
.led-ring {
  width: 34px;
  height: 34px;
  border: 2px solid color-mix(in srgb, var(--fire-color, #fff) 68%, white);
  opacity: 0;
  animation: fireRing 1.3s ease-out forwards;
}
.led-ring-2 {
  width: 52px;
  height: 52px;
  border-width: 1px;
  animation-delay: .1s;
}
@keyframes ledGridDrift {
  from { transform: translateY(0); }
  to { transform: translateY(32px); }
}
@keyframes ledWaveFloatA {
  from { transform: translate3d(-3%, -1%, 0) scale(1); }
  to { transform: translate3d(4%, 2%, 0) scale(1.08); }
}
@keyframes ledWaveFloatB {
  from { transform: translate3d(3%, 0, 0) scale(1); }
  to { transform: translate3d(-4%, -2%, 0) scale(1.1); }
}
@keyframes ledWallPulse {
  0% { opacity: .56; }
  45% { opacity: .98; }
  100% { opacity: .68; }
}
@keyframes beamSweep {
  0%, 100% { transform: rotate(-18deg) translateY(0); opacity: .2; }
  50% { transform: rotate(18deg) translateY(1.5vh); opacity: .85; }
}
@keyframes audienceCheerPop {
  0% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.9); }
  12% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(1.03); }
}
@keyframes logoZoomSpin3D {
  0% { transform: rotateX(0deg) rotateY(-9deg) scale(.96); filter: drop-shadow(0 12px 22px rgba(0,0,0,.22)); }
  50% { transform: rotateX(10deg) rotateY(10deg) scale(1.05); filter: drop-shadow(0 16px 32px rgba(251,191,36,.26)); }
  100% { transform: rotateX(-6deg) rotateY(-8deg) scale(1.1); filter: drop-shadow(0 18px 34px rgba(96,165,250,.28)); }
}
@keyframes fireCorePulse {
  0% { transform: translate(-50%, -50%) scale(.35); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}
@media (max-width: 760px) {
  .equalizer-hud {
    bottom: 10px;
    padding: 10px 12px;
    gap: 4px;
  }
  .equalizer-hud span {
    width: 6px;
    height: 34px;
  }
  .audience-cheer {
    top: 62px;
    width: calc(100% - 26px);
    text-align: center;
    font-size: 13px;
    padding: 12px 16px;
  }
}

:root {
  --arena-team-color: #60a5fa;
  --arena-team-soft: #60a5fa22;
}

.led-pro-shell {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.led-wing {
  position: absolute;
  top: 8vh;
  bottom: 16vh;
  width: min(14vw, 170px);
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 10px;
  opacity: .7;
}

.led-wing-left { left: 2.2vw; }
.led-wing-right { right: 2.2vw; }

.led-wing span {
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--arena-team-color) 78%, white), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.03));
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 24px color-mix(in srgb, var(--arena-team-color) 24%, transparent);
  animation: wingPulse 3.6s ease-in-out infinite;
}

.led-wing span:nth-child(2n) { animation-delay: -.8s; }
.led-wing span:nth-child(3n) { animation-delay: -1.4s; }

.led-center-crown {
  position: absolute;
  left: 50%;
  top: 4.4vh;
  transform: translateX(-50%);
  min-width: min(66vw, 860px);
  padding: 14px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(8,15,42,.84), rgba(17,24,67,.68));
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(15,23,66,.26), 0 0 38px color-mix(in srgb, var(--arena-team-color) 22%, transparent);
  text-align: center;
}

.led-center-title {
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 900;
  letter-spacing: .08em;
  color: white;
  text-transform: uppercase;
  text-shadow: 0 0 18px color-mix(in srgb, var(--arena-team-color) 55%, white);
}

.led-center-sub {
  margin-top: 4px;
  font-size: clamp(12px, 1.1vw, 16px);
  color: rgba(255,255,255,.82);
  font-weight: 700;
}

.led-floor-grid {
  position: absolute;
  left: 50%;
  bottom: -8vh;
  transform: translateX(-50%) perspective(900px) rotateX(76deg);
  width: min(108vw, 1800px);
  height: 34vh;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 74px 74px;
  opacity: .34;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--arena-team-color) 16%, transparent));
  mask-image: linear-gradient(180deg, rgba(0,0,0,.95), transparent 92%);
  animation: floorRun 4.8s linear infinite;
}

.laser-sweeps {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.laser-sweeps > span {
  position: absolute;
  top: 10vh;
  bottom: 18vh;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.55), transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--arena-team-color) 34%, transparent);
  opacity: .15;
}

.laser-sweeps > span:nth-child(1) { left: 14%; }
.laser-sweeps > span:nth-child(2) { left: 28%; }
.laser-sweeps > span:nth-child(3) { left: 42%; }
.laser-sweeps > span:nth-child(4) { left: 58%; }
.laser-sweeps > span:nth-child(5) { left: 72%; }
.laser-sweeps > span:nth-child(6) { left: 86%; }

.laser-pass {
  position: absolute;
  left: -14%;
  top: var(--laser-top, 42%);
  width: 44vw;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--laser-color, #60a5fa), transparent);
  box-shadow: 0 0 24px var(--laser-color, #60a5fa), 0 0 48px color-mix(in srgb, var(--laser-color, #60a5fa) 58%, white);
  transform: rotate(var(--laser-angle, 0deg));
  animation: laserRun 1.35s ease-out forwards;
  animation-delay: var(--laser-delay, 0s);
}

.live-marquee {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 78px;
  z-index: 18;
  overflow: hidden;
  pointer-events: none;
}

.live-marquee-track {
  display: flex;
  width: max-content;
  gap: 48px;
  padding: 10px 0;
  animation: marqueeRun 18s linear infinite;
}

.live-marquee-track span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(6, 13, 38, .72);
  border: 1px solid rgba(255,255,255,.12);
  color: white;
  font-weight: 800;
  box-shadow: 0 0 18px color-mix(in srgb, var(--arena-team-color) 16%, transparent);
}

.team-crown-ribbon {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(8,15,42,.84), rgba(24,32,78,.72));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 32px rgba(15,23,66,.18), inset 0 0 0 1px color-mix(in srgb, var(--ribbon-color, var(--arena-team-color)) 16%, transparent);
  color: white;
}

.team-crown-ribbon strong {
  display: block;
  font-size: 18px;
}

.team-crown-ribbon small {
  color: rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 700;
}

.team-crown-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ribbon-color, var(--arena-team-color));
  box-shadow: 0 0 18px var(--ribbon-color, var(--arena-team-color));
  animation: crownDotPulse 1.5s ease-in-out infinite;
}

body[data-stage-mode="buzz"] .led-center-crown,
body[data-stage-mode="win"] .led-center-crown,
body[data-stage-mode="voice"] .led-center-crown {
  box-shadow: 0 18px 44px rgba(15,23,66,.26), 0 0 52px color-mix(in srgb, var(--arena-team-color) 30%, transparent);
}

body[data-stage-mode="buzz"] .dynamic-team-card.is-active,
body[data-stage-mode="voice"] .dynamic-team-card.is-active,
body[data-stage-mode="win"] .dynamic-team-card.is-active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--arena-team-color) 54%, white), 0 22px 38px color-mix(in srgb, var(--arena-team-color) 24%, transparent);
}

body[data-stage-mode="win"] .led-floor-grid {
  opacity: .5;
}

.dynamic-buzzer-btn.is-active {
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 28px color-mix(in srgb, var(--arena-team-color) 28%, transparent);
}

@keyframes floorRun {
  from { background-position: 0 0, 0 0; }
  to { background-position: 74px 0, 0 74px; }
}

@keyframes marqueeRun {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes wingPulse {
  0%, 100% { opacity: .56; transform: scale(1); }
  50% { opacity: .96; transform: scale(1.03); }
}

@keyframes laserRun {
  0% { transform: translateX(0) rotate(var(--laser-angle, 0deg)); opacity: 0; }
  12% { opacity: .95; }
  100% { transform: translateX(130vw) rotate(var(--laser-angle, 0deg)); opacity: 0; }
}

@keyframes crownDotPulse {
  0%, 100% { transform: scale(.92); opacity: .8; }
  50% { transform: scale(1.12); opacity: 1; }
}

@media (max-width: 1100px) {
  .led-wing {
    width: 11vw;
    top: 10vh;
  }
  .live-marquee {
    bottom: 70px;
  }
}

@media (max-width: 760px) {
  .led-wing,
  .led-floor-grid,
  .live-marquee,
  .led-center-sub {
    display: none;
  }
  .led-center-crown {
    min-width: auto;
    width: calc(100% - 24px);
    top: 10px;
    padding: 10px 14px;
  }
  .team-crown-ribbon {
    padding: 12px 14px;
  }
}

.show-hero,
.question-stage,
.live-ranking-board,
.remote-links-card,
.result-panel,
.intro-panel-rich {
  position: relative;
  isolation: isolate;
}

.show-hero::before,
.question-stage::before,
.live-ranking-board::before,
.remote-links-card::before,
.result-panel::before,
.intro-panel-rich::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--chase-angle, 0deg), rgba(255,255,255,.08), color-mix(in srgb, var(--arena-team-color) 55%, white), rgba(255,255,255,.08), color-mix(in srgb, var(--arena-team-color) 25%, transparent), rgba(255,255,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .85;
  animation: chaseBorder 7s linear infinite;
}

.show-hero::after,
.question-stage::after,
.live-ranking-board::after,
.remote-links-card::after,
.result-panel::after,
.intro-panel-rich::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(28px - 10px);
  border: 1px solid color-mix(in srgb, var(--arena-team-color) 18%, transparent);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--arena-team-color) 12%, transparent);
  pointer-events: none;
}

.live-ranking-board {
  margin-top: 18px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(8,15,42,.9), rgba(24,32,78,.78));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 42px rgba(15,23,66,.22);
  color: white;
}

.ranking-board-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.ranking-board-head strong {
  display: block;
  font-size: 20px;
}

.ranking-board-head small {
  color: rgba(255,255,255,.74);
  font-weight: 700;
}

.ranking-live-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  color: #fff7ed;
  background: linear-gradient(135deg, rgba(245,158,11,.95), rgba(236,72,153,.92));
  box-shadow: 0 10px 20px rgba(236,72,153,.22);
}

.live-ranking-list {
  display: grid;
  gap: 12px;
}

.live-ranking-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--team-color) 18%, rgba(255,255,255,.94)), rgba(255,255,255,.96));
  border: 1px solid color-mix(in srgb, var(--team-color) 60%, white);
  color: #0f172a;
  transition: transform .28s ease, box-shadow .28s ease, order .2s ease;
}

.live-ranking-item.is-leader {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-color) 34%, white), 0 20px 36px color-mix(in srgb, var(--team-color) 22%, transparent);
}

.live-ranking-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.team-rank-color {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--team-color);
  box-shadow: 0 0 14px var(--team-color);
}

.rank-badge {
  min-width: 54px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a, #334155);
  color: white;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.live-ranking-item[data-rank="1"] .rank-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.live-ranking-item[data-rank="2"] .rank-badge {
  background: linear-gradient(135deg, #64748b, #cbd5e1);
  color: #0f172a;
}

.live-ranking-item[data-rank="3"] .rank-badge {
  background: linear-gradient(135deg, #c2410c, #fb923c);
}

.live-ranking-left strong {
  display: block;
  font-size: 16px;
  margin-bottom: 3px;
}

.live-ranking-left small {
  color: #475569;
  font-weight: 700;
}

.live-ranking-score {
  min-width: 64px;
  text-align: right;
  font-size: 34px;
  font-weight: 900;
  color: color-mix(in srgb, var(--team-color) 64%, #0f172a);
}

.dynamic-team-card,
.multi-team-item,
.live-ranking-item {
  transition: transform .28s ease, box-shadow .28s ease, opacity .28s ease;
}

.dynamic-team-card.is-leader,
.multi-team-item.is-leader {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-color, var(--arena-team-color)) 34%, white), 0 22px 38px color-mix(in srgb, var(--team-color, var(--arena-team-color)) 22%, transparent);
}

.multi-team-item::before {
  content: attr(data-rank);
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  color: white;
  font-size: 12px;
  font-weight: 900;
}

.logo-flight-scene {
  transform-origin: center center;
}

.logo-flight-scene.is-flying {
  animation: logoEntrance 1.35s cubic-bezier(.18,.86,.24,1) both;
}

.logo-flight-scene.is-live {
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--arena-team-color) 45%, white));
}

.countdown-logo {
  animation: logoFloat 3.4s ease-in-out infinite;
}

body[data-stage-mode="intro"] .countdown-card::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--arena-team-color) 28%, white), transparent 60%);
  opacity: .78;
  animation: introHalo 1.5s ease-out infinite;
}

@keyframes chaseBorder {
  from { --chase-angle: 0deg; }
  to { --chase-angle: 360deg; }
}

@keyframes logoEntrance {
  0% { transform: translateY(-40vh) scale(.18) rotate(-24deg); opacity: 0; }
  55% { transform: translateY(0) scale(1.08) rotate(6deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.02); }
}

@keyframes introHalo {
  0% { transform: scale(.72); opacity: 0; }
  50% { opacity: .9; }
  100% { transform: scale(1.08); opacity: 0; }
}

@media (max-width: 860px) {
  .ranking-board-head,
  .live-ranking-item {
    grid-template-columns: 1fr;
    display: grid;
  }

  .live-ranking-score {
    text-align: left;
  }
}


/* FULL LED PRO MAX+ */
.camera-scan-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}
.camera-scan-layer.is-active {
  opacity: 1;
}
.camera-scan-bar,
.camera-scan-glow {
  position: absolute;
  top: 0;
  left: -35%;
  width: 28%;
  height: 100%;
  transform: skewX(-16deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 20%, var(--scan-color, #60a5fa) 50%, rgba(255,255,255,0.08) 80%, transparent 100%);
  filter: blur(0.5px);
}
.camera-scan-glow {
  width: 18%;
  opacity: .55;
  filter: blur(18px);
}
.camera-scan-layer.is-active .camera-scan-bar,
.camera-scan-layer.is-active .camera-scan-glow {
  animation: cameraSweepMove 1.1s ease-in-out forwards;
}
@keyframes cameraSweepMove {
  from { left: -35%; }
  to { left: 115%; }
}
.countdown-3d-shell {
  position: relative;
  padding: 18px 22px 26px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(17,24,39,0.86), rgba(30,41,59,0.74));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 22px 55px rgba(0,0,0,.38);
  transform-style: preserve-3d;
  perspective: 900px;
  overflow: hidden;
}
.countdown-stage-floor {
  position: absolute;
  inset: auto 8% 8px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(96,165,250,.45), transparent 68%);
  transform: translateZ(-40px) rotateX(72deg);
}
.countdown-number-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  min-height: 148px;
  margin: 10px auto 14px;
  padding: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffffff, #dbeafe 25%, #60a5fa 56%, #1d4ed8 100%);
  color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,.28);
  box-shadow: inset 0 3px 18px rgba(255,255,255,.55), 0 24px 50px rgba(37,99,235,.35);
  transform: translateZ(30px) rotateX(10deg);
  font-size: clamp(56px, 10vw, 88px);
  font-weight: 900;
  letter-spacing: 1px;
}
.countdown-3d-shell.is-pulse .countdown-number-3d {
  animation: countdown3dPulse .4s ease;
}
@keyframes countdown3dPulse {
  0% { transform: translateZ(30px) scale(1) rotateX(10deg); }
  45% { transform: translateZ(48px) scale(1.1) rotateX(0deg); }
  100% { transform: translateZ(30px) scale(1) rotateX(10deg); }
}
.gold-victory-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
}
.gold-victory-layer.is-active {
  opacity: 1;
}
.gold-piece {
  position: absolute;
  top: -10%;
  width: 14px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8c5 0%, #facc15 36%, #f59e0b 100%);
  box-shadow: 0 0 16px rgba(250,204,21,.45);
  animation: goldDrop 2.6s ease-in forwards;
}
.gold-piece:nth-child(3n) { width: 10px; height: 24px; }
.gold-piece:nth-child(4n) { border-radius: 4px; }
@keyframes goldDrop {
  0% { transform: translate3d(0,-10vh,0) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate3d(var(--gold-x, 0px),110vh,0) rotate(var(--gold-rot, 180deg)); opacity: 0; }
}
.gold-victory-banner {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  min-width: min(84vw, 480px);
  padding: 18px 28px;
  border-radius: 24px;
  text-align: center;
  color: #4a2800;
  background: linear-gradient(180deg, rgba(255,248,196,.98), rgba(252,211,77,.98));
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 25px 65px rgba(180,83,9,.34);
  animation: goldBannerPop .65s ease;
}
.gold-victory-banner span {
  display: block;
  font-weight: 800;
  letter-spacing: 1px;
  color: #a16207;
  margin-bottom: 6px;
}
.gold-victory-banner strong {
  display: block;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 900;
}
@keyframes goldBannerPop {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.9); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.maxplus-badge {
  display: inline-flex;
  margin: 0 auto 14px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #78350f;
  background: linear-gradient(135deg, #fef3c7, #fbbf24, #fef3c7);
  box-shadow: 0 10px 25px rgba(245,158,11,.25);
}
.team-card.is-champion,
.live-ranking-item.is-champion {
  box-shadow: 0 0 0 2px rgba(250,204,21,.7), 0 18px 40px rgba(245,158,11,.25);
}
body.stage-win {
  background: radial-gradient(circle at top, rgba(255,255,255,0.16), transparent 28%), linear-gradient(135deg, #2a1800, #5b21b6 34%, #f59e0b 100%);
}
@media (max-width: 760px) {
  .gold-victory-banner {
    top: 10%;
    min-width: 90vw;
    padding: 14px 18px;
  }
  .countdown-number-3d {
    min-width: 118px;
    min-height: 118px;
  }
}


/* FULL LED PRO MAX+++ */
.stage-curtain-layer {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}
.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background:
    linear-gradient(90deg, rgba(67,5,17,.95), rgba(127,29,29,.96) 25%, rgba(153,27,27,.97) 50%, rgba(127,29,29,.96) 75%, rgba(67,5,17,.95)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 10px, transparent 10px 28px);
  box-shadow: inset -18px 0 30px rgba(0,0,0,.25), inset 18px 0 30px rgba(255,255,255,.05), 0 20px 50px rgba(0,0,0,.28);
}
.curtain-left { left: 0; transform-origin: left center; }
.curtain-right { right: 0; transform-origin: right center; }
.curtain-top-valance {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 88px;
  background: linear-gradient(180deg, rgba(127,29,29,.98), rgba(68,4,17,.98));
  border-bottom: 3px solid rgba(253,224,71,.35);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.stage-curtain-layer.is-opening .curtain-left,
.stage-curtain-layer.is-open .curtain-left {
  animation: curtainOpenLeft 1.3s cubic-bezier(.2,.7,.2,1) forwards;
}
.stage-curtain-layer.is-opening .curtain-right,
.stage-curtain-layer.is-open .curtain-right {
  animation: curtainOpenRight 1.3s cubic-bezier(.2,.7,.2,1) forwards;
}
.stage-curtain-layer.is-opening .curtain-top-valance,
.stage-curtain-layer.is-open .curtain-top-valance {
  animation: curtainValanceLift 1.2s ease forwards;
}
.stage-curtain-layer.is-open,
.stage-curtain-layer.is-opening {
  opacity: 1;
}
.stage-curtain-layer.is-closed .curtain-left { transform: translateX(0); }
.stage-curtain-layer.is-closed .curtain-right { transform: translateX(0); }
@keyframes curtainOpenLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-92%) scaleX(.92); }
}
@keyframes curtainOpenRight {
  from { transform: translateX(0); }
  to { transform: translateX(92%) scaleX(.92); }
}
@keyframes curtainValanceLift {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-90%); opacity: .18; }
}
.follow-spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity .25s ease;
}
.follow-spotlight.is-active { opacity: 1; }
.follow-spotlight-beam {
  position: absolute;
  top: -40px;
  left: calc(var(--spot-x, 50vw) - 120px);
  width: 240px;
  height: calc(var(--spot-y, 20vh) + 60px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--spot-color, #fde68a) 48%, white 52%), rgba(255,255,255,0));
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  opacity: .16;
  filter: blur(2px);
}
.follow-spotlight-core {
  position: absolute;
  left: calc(var(--spot-x, 50vw) - 120px);
  top: calc(var(--spot-y, 20vh) - 120px);
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--spot-color, #fde68a) 72%, white 28%) 0%, rgba(255,255,255,.18) 35%, rgba(255,255,255,0) 72%);
  filter: blur(3px);
}
.trophy-ceremony-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}
.trophy-ceremony-layer.is-active { opacity: 1; }
.trophy-ceremony-card {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  width: min(92vw, 560px);
  padding: 28px 26px 24px;
  border-radius: 30px;
  text-align: center;
  background: linear-gradient(180deg, rgba(17,24,39,.94), rgba(49,46,129,.88));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 30px 80px rgba(0,0,0,.36);
  animation: trophyCeremonyPop .7s ease;
  overflow: hidden;
}
.trophy-stage-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center top, rgba(250,204,21,.34), transparent 45%);
}
.trophy-3d-wrap {
  position: relative;
  width: 220px;
  height: 200px;
  margin: 0 auto 14px;
  perspective: 900px;
}
.trophy-cup {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%) rotateX(14deg) rotateY(-12deg);
  font-size: 112px;
  filter: drop-shadow(0 14px 24px rgba(245,158,11,.35));
  animation: trophyFloat 2.2s ease-in-out infinite;
}
.trophy-base {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 146px;
  height: 26px;
  border-radius: 50%;
  transform: translateX(-50%) rotateX(72deg);
  background: radial-gradient(circle at center, rgba(250,204,21,.7), rgba(245,158,11,.12) 72%, transparent 80%);
}
.trophy-ceremony-copy { position: relative; z-index: 1; color: white; }
.trophy-ceremony-copy span {
  display: block;
  margin-bottom: 6px;
  color: #fde68a;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.trophy-ceremony-copy strong {
  display: block;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 900;
}
.trophy-ceremony-copy small {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
}
@keyframes trophyFloat {
  0%,100% { transform: translateX(-50%) translateY(0) rotateX(14deg) rotateY(-12deg); }
  50% { transform: translateX(-50%) translateY(-10px) rotateX(10deg) rotateY(12deg); }
}
@keyframes trophyCeremonyPop {
  from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.92); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@media (max-width: 760px) {
  .curtain-top-valance { height: 62px; }
  .trophy-ceremony-card { top: 12%; padding: 22px 18px 20px; }
  .trophy-3d-wrap { width: 180px; height: 168px; }
  .trophy-cup { font-size: 86px; }
  .follow-spotlight-beam { width: 160px; left: calc(var(--spot-x, 50vw) - 80px); }
  .follow-spotlight-core { width: 160px; height: 160px; left: calc(var(--spot-x, 50vw) - 80px); top: calc(var(--spot-y, 20vh) - 80px); }
}


/* FULL LED PRO MAX++++ */
.audience-led-layer {
  position: fixed;
  inset: auto 0 0 0;
  height: 30vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .85;
}
.audience-led-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(99,102,241,.08) 50%, rgba(15,23,42,.3) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 36px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 2px, transparent 2px 28px);
}
.audience-wave {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 55%;
  border-radius: 50%;
  filter: blur(20px);
  opacity: .55;
  animation: audienceWaveMove 8s linear infinite;
}
.audience-wave-a { bottom: 8%; background: radial-gradient(circle, rgba(96,165,250,.3), transparent 60%); }
.audience-wave-b { bottom: -4%; background: radial-gradient(circle, rgba(236,72,153,.22), transparent 64%); animation-duration: 10s; animation-direction: reverse; }
.audience-crowd-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: end;
  gap: 10px;
  padding: 0 2vw 14px;
}
.audience-crowd-row span {
  width: 6.5vw;
  max-width: 70px;
  min-width: 28px;
  height: 11vh;
  border-radius: 50% 50% 10px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(15,23,42,.82));
  box-shadow: 0 -8px 18px rgba(96,165,250,.12);
  transform-origin: center bottom;
  animation: crowdBounce 2.8s ease-in-out infinite;
}
.audience-crowd-row span:nth-child(2n) { animation-delay: .2s; }
.audience-crowd-row span:nth-child(3n) { animation-delay: .45s; }
.audience-led-layer[data-mode="voice"] .audience-crowd-row span,
.audience-led-layer[data-mode="buzz"] .audience-crowd-row span,
.audience-led-layer[data-mode="win"] .audience-crowd-row span {
  animation-duration: 1.2s;
}
.audience-led-layer[data-mode="win"] .audience-wave-a { background: radial-gradient(circle, rgba(250,204,21,.34), transparent 60%); }
.audience-led-layer[data-mode="buzz"] .audience-wave-b { background: radial-gradient(circle, var(--arena-team-color, rgba(96,165,250,.32)), transparent 62%); }
@keyframes audienceWaveMove {
  0% { transform: translateX(-4%) scale(1); }
  50% { transform: translateX(4%) scale(1.04); }
  100% { transform: translateX(-4%) scale(1); }
}
@keyframes crowdBounce {
  0%,100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-8px) scaleY(1.03); }
}
.mc-stage-host {
  position: fixed;
  right: 18px;
  bottom: 26px;
  z-index: 6;
  width: min(320px, 32vw);
  pointer-events: none;
}
.mc-host-spot {
  position: absolute;
  inset: auto 8% -6px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250,204,21,.42), transparent 68%);
}
.mc-host-avatar {
  position: relative;
  width: 112px;
  height: 170px;
  margin-left: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.mc-host-head {
  position: absolute;
  top: 8px;
  right: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fef3c7, #f59e0b);
  box-shadow: inset 0 -6px 0 rgba(120,53,15,.18);
}
.mc-host-head::before {
  content: "";
  position: absolute;
  inset: -3px 4px auto;
  height: 18px;
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(180deg, #0f172a, #334155);
}
.mc-host-body {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 84px;
  height: 118px;
  border-radius: 30px 30px 20px 20px;
  background: linear-gradient(180deg, #2563eb, #1e3a8a 56%, #0f172a 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}
.mc-host-body::before,
.mc-host-body::after {
  content: "";
  position: absolute;
  top: 26px;
  width: 18px;
  height: 62px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1d4ed8, #0f172a);
}
.mc-host-body::before { left: -10px; transform: rotate(18deg); }
.mc-host-body::after { right: -10px; transform: rotate(-14deg); }
.mc-host-mic {
  position: absolute;
  right: 54px;
  top: 52px;
  width: 10px;
  height: 54px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e2e8f0, #64748b);
  transform: rotate(16deg);
}
.mc-host-mic::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #94a3b8 45%, #0f172a 100%);
}
.mc-host-bubble {
  position: absolute;
  right: 84px;
  top: 0;
  max-width: 220px;
  padding: 12px 14px;
  border-radius: 18px 18px 4px 18px;
  color: white;
  background: linear-gradient(135deg, rgba(15,23,42,.9), rgba(37,99,235,.92));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
  font-weight: 800;
  line-height: 1.45;
}
.mc-host-bubble::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: -10px;
  border: 10px solid transparent;
  border-top-color: rgba(37,99,235,.92);
  border-left-width: 0;
}
.mc-stage-host[data-mode="speaking"] .mc-host-bubble,
.mc-stage-host[data-mode="intro"] .mc-host-bubble {
  background: linear-gradient(135deg, rgba(30,41,59,.96), rgba(124,58,237,.96));
}
.mc-stage-host[data-mode="buzz"] .mc-host-bubble { background: linear-gradient(135deg, rgba(8,47,73,.96), rgba(14,165,233,.96)); }
.mc-stage-host[data-mode="alert"] .mc-host-bubble { background: linear-gradient(135deg, rgba(120,53,15,.96), rgba(249,115,22,.96)); }
.mc-stage-host[data-mode="celebrate"] .mc-host-bubble,
.mc-stage-host[data-mode="announce"] .mc-host-bubble { background: linear-gradient(135deg, rgba(146,64,14,.96), rgba(234,179,8,.96)); }
.mc-stage-host[data-mode="speaking"] .mc-host-avatar,
.mc-stage-host[data-mode="intro"] .mc-host-avatar { animation: mcBob 1.2s ease-in-out infinite; }
@keyframes mcBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.drumroll-overlay {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15,23,42,.42);
  backdrop-filter: blur(6px);
}
.drumroll-card {
  width: min(560px, 100%);
  padding: 24px 28px;
  border-radius: 28px;
  color: white;
  text-align: center;
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(124,58,237,.94));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 60px rgba(0,0,0,.38);
}
.drumroll-icon { font-size: 54px; margin-bottom: 10px; animation: drumShake .5s linear infinite; }
.drumroll-card strong { display: block; font-size: clamp(22px, 3vw, 32px); margin-bottom: 14px; }
.drumroll-bar {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}
.drumroll-bar span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fde68a, #f59e0b);
  transition: width 2.3s linear;
}
@keyframes drumShake { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (max-width: 980px) {
  .mc-stage-host { width: min(280px, 44vw); right: 12px; bottom: 18px; }
}
@media (max-width: 760px) {
  .mc-stage-host { width: 210px; right: 8px; bottom: 12px; }
  .mc-host-avatar { width: 88px; height: 138px; }
  .mc-host-body { width: 68px; height: 96px; }
  .mc-host-head { width: 40px; height: 40px; right: 18px; }
  .mc-host-bubble { right: 64px; max-width: 150px; font-size: 12px; padding: 10px 12px; }
  .audience-led-layer { height: 22vh; }
}


/* Admin layout fix: avoid hidden left panel and excessive page length */
.admin-tab-bar {
  margin-top: 18px;
  margin-bottom: 10px;
  padding: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  position: sticky;
  top: 8px;
  z-index: 24;
  scrollbar-width: thin;
}
.admin-tab-btn {
  flex: 0 0 auto;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}
.admin-tab-btn.is-active {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(37,99,235,.24);
}
.admin-tab-help {
  color: rgba(255,255,255,.92);
  font-size: 14px;
  margin: 0 2px 18px;
}
.admin-grid {
  grid-template-columns: 1fr !important;
}
.admin-grid > [data-admin-subpanel] {
  width: 100%;
}
.admin-work-panel.hidden,
[data-admin-subpanel].hidden {
  display: none !important;
}
.api-config-panel,
.quick-test-panel,
#remote-teams,
#recent-quizzes,
.admin-grid {
  margin-top: 18px;
}
#generate-ai,
#manual-edit {
  max-width: 100%;
}
.admin-panel {
  overflow: visible;
}
.admin-collapse {
  overflow: hidden;
}
.admin-collapse summary {
  position: relative;
}
.admin-collapse-body {
  overflow-x: hidden;
}
.sticky-save-row {
  position: sticky;
  bottom: 10px;
  z-index: 8;
}
.remote-admin-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
@media (max-width: 980px) {
  .admin-tab-bar {
    position: sticky;
    top: 0;
    border-radius: 18px;
  }
  .api-status-grid,
  .quick-test-grid,
  .quick-result-grid,
  .remote-admin-grid,
  .two-col,
  .three-col,
  .team-editor {
    grid-template-columns: 1fr !important;
  }
  .sticky-save-row {
    position: static;
  }
}
@media (max-width: 760px) {
  .container.admin-layout {
    width: min(100%, calc(100% - 16px));
    margin: 12px auto 24px;
  }
  .admin-panel,
  .show-hero,
  .hero {
    padding: 16px;
    border-radius: 20px;
  }
  .question-editor,
  .admin-collapse,
  .remote-admin-card {
    border-radius: 18px;
  }
  .admin-tab-help {
    font-size: 13px;
  }
}


/* Remote mobile/iPad/tablet answer UI */
.remote-container-wide { max-width: 980px; }
.remote-card-quiz { padding: 18px; }
.remote-topbar { align-items: flex-start; }
.remote-team-grid-mobile { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.remote-status-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.remote-team-current-big { margin-bottom: 14px; }
.remote-buzz-wrap-rich { margin-bottom: 18px; }
.remote-question-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid #dbeafe;
  box-shadow: 0 18px 40px rgba(15,23,66,.10);
}
.remote-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.remote-question-card h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1.35;
}
.remote-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.remote-option-btn {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid #cbd5e1;
  background: #eef2ff;
  color: #0f172a;
  font: inherit;
  font-weight: 800;
  text-align: left;
  transition: .18s ease;
}
.remote-option-btn:disabled {
  opacity: .72;
}
.remote-option-btn.is-enabled {
  background: white;
  border-color: #60a5fa;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37,99,235,.12);
}
.remote-option-btn.is-enabled:hover,
.remote-option-btn.is-enabled:active {
  transform: translateY(-1px) scale(1.01);
}
.remote-option-btn.is-selected {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  border-color: #2563eb;
}
.remote-option-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  font-size: 20px;
  font-weight: 900;
}
.remote-option-text { line-height: 1.35; }
.remote-answer-note {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
  line-height: 1.55;
}
@media (max-width: 820px) {
  .remote-status-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .remote-card-quiz { padding: 14px; }
  .remote-options-grid { grid-template-columns: 1fr; }
  .remote-option-btn { min-height: 78px; }
  .remote-status-grid-4 { grid-template-columns: 1fr 1fr; }
  .remote-topbar { flex-direction: column; }
}


/* PATCH GỘP: bỏ rèm đỏ che mặc định + bỏ chữ chạy dưới đáy */
.stage-curtain-layer {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.stage-curtain-layer.is-opening,
.stage-curtain-layer.is-open {
  opacity: 1;
  visibility: visible;
}
.stage-curtain-layer.is-closed {
  opacity: 0;
  visibility: hidden;
}
.live-marquee {
  display: none !important;
}

/* Người 1, Người 2, Người 3... */
.participant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.participant-link-card {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 20px;
  text-decoration: none;
  color: #16314f;
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  border: 1px solid rgba(147,197,253,.55);
  box-shadow: 0 10px 22px rgba(37,99,235,.08);
}
.participant-link-card strong {
  font-size: 22px;
}
.participant-link-card span {
  color: #5b6f87;
  font-weight: 700;
}
.participant-link-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(37,99,235,.12);
}

.participant-admin-list {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.participant-admin-item {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(148,163,184,.18);
}
.participant-admin-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.participant-admin-head strong {
  color: #1d4ed8;
}
.participant-admin-head span {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}
.participant-admin-mini-qr {
  width: 110px;
  height: 110px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
}
.participant-admin-mini-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.remote-admin-link-mini {
  font-size: 12px;
  word-break: break-all;
  margin-bottom: 8px;
}
.remote-participant-picker .remote-answer-note {
  margin-top: 6px;
}

@media (max-width: 720px) {
  .participant-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Super Clean Mode: LED/phone mode, only timer + question + next. Answers appear only for the team that buzzed. */
body.super-clean-mode {
  overflow-x: hidden;
}
body.super-clean-mode .show-hero,
body.super-clean-mode .show-sidebar,
body.super-clean-mode .team-scoreboard,
body.super-clean-mode .live-ranking-board,
body.super-clean-mode .remote-links-card,
body.super-clean-mode .intro-panel,
body.super-clean-mode .question-headline,
body.super-clean-mode .buzzer-board,
body.super-clean-mode #feedbackBox,
body.super-clean-mode #explanationBox,
body.super-clean-mode #answerWindow {
  display: none !important;
}
body.super-clean-mode .show-layout,
body.super-clean-mode .show-layout.show-layout-wide {
  display: block !important;
}
body.super-clean-mode .container.show-container {
  max-width: 1080px;
  padding-top: 18px;
}
body.super-clean-mode .show-main.card.question-stage {
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 22px 28px;
}
body.super-clean-mode .top-status.two-rows {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 18px !important;
}
body.super-clean-mode .top-status.two-rows > :not(.timer-panel) {
  display: none !important;
}
body.super-clean-mode .timer-panel {
  margin: 0 auto 14px !important;
  transform: scale(1.08);
}
body.super-clean-mode .question-panel {
  padding-top: 8px;
}
body.super-clean-mode .question-shell {
  min-height: 42vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,248,255,0.98));
  border-radius: 26px;
  padding: 30px 22px;
  box-shadow: 0 22px 70px rgba(15, 23, 42, .18);
}
body.super-clean-mode #questionText {
  max-width: 880px;
  margin: 0 auto;
  font-size: clamp(1.85rem, 3vw, 3rem);
  line-height: 1.35;
}
body.super-clean-mode #optionsWrap {
  display: none !important;
}
body.super-clean-mode.answer-picker-active #optionsWrap {
  display: grid !important;
  width: min(860px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(15, 23, 42, .08);
  border: 2px solid rgba(37, 99, 235, .18);
}
body.super-clean-mode.answer-picker-active #optionsWrap::before {
  content: "🔔 Đội vừa nhấn chuông được chọn đáp án";
  grid-column: 1 / -1;
  font-weight: 900;
  color: #1d4ed8;
  letter-spacing: .01em;
}
body.super-clean-mode .focus-question-actions {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
body.super-clean-mode .focus-question-actions .btn {
  min-width: 168px;
}
body.super-clean-mode.mc-is-speaking .focus-question-actions #nextBtn {
  display: none !important;
}
body.super-clean-mode .result-panel {
  padding-top: 12px;
}
body.remote-quiz-body .remote-option-btn:not(.is-enabled) {
  opacity: .62;
}
@media (max-width: 768px) {
  body.super-clean-mode .container.show-container {
    padding-top: 10px;
  }
  body.super-clean-mode .show-main.card.question-stage {
    padding: 16px 12px 20px;
    border-radius: 20px;
  }
  body.super-clean-mode .timer-panel {
    transform: scale(0.95);
  }
  body.super-clean-mode .question-shell {
    min-height: 36vh;
    padding: 18px 12px;
    border-radius: 18px;
  }
  body.super-clean-mode #questionText {
    font-size: clamp(1.35rem, 6vw, 2rem);
    line-height: 1.45;
  }
  body.super-clean-mode.answer-picker-active #optionsWrap {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 16px;
    padding: 12px;
  }
  body.super-clean-mode .focus-question-actions {
    flex-direction: column;
    gap: 10px;
  }
  body.super-clean-mode .focus-question-actions .btn {
    width: 100%;
    min-width: 0;
  }
}