:root {
  --live-ink: #f5f4ef;
  --live-muted: rgba(245, 244, 239, 0.48);
  --live-line: rgba(255, 255, 255, 0.12);
  --live-surface: rgba(13, 16, 20, 0.94);
  --live-accent: #d8ff62;
  --live-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html,
body {
  min-height: 100dvh;
  background: #07090b;
}

body::before {
  opacity: 0.17;
  filter: saturate(0.82) contrast(1.08);
  transform: scale(1.02);
}

body::after {
  background:
    radial-gradient(circle at 50% 42%, transparent 18%, rgba(5, 7, 9, 0.38) 64%, rgba(5, 7, 9, 0.86) 100%),
    linear-gradient(180deg, rgba(4, 6, 8, 0.16), rgba(4, 6, 8, 0.46));
}

.dynamic-wallpaper {
  filter: saturate(0.82) contrast(1.08);
}

#canvas-container {
  min-height: 100dvh;
}

#connection-status {
  top: 1.25rem;
  right: 1.25rem;
  min-height: 2.6rem;
  padding: 0.65rem 0.9rem;
  background: rgba(12, 15, 18, 0.78);
  border: 1px solid var(--live-line);
  border-radius: 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  backdrop-filter: blur(16px);
}

.status-dot,
.viewer-pulse {
  background: var(--live-accent);
  box-shadow: 0 0 0 5px rgba(216, 255, 98, 0.08);
}

#viewer-count {
  top: 1.4rem;
  left: 1.6rem;
  padding: 0.45rem 0.7rem;
}

.viewer-number {
  font-variant-numeric: tabular-nums;
}

#branding {
  bottom: 1.5rem;
  left: 1.65rem;
}

#branding img {
  max-width: 13rem;
  object-fit: contain;
}

.branding-title {
  color: var(--live-ink);
}

.branding-event,
.viewer-label {
  color: var(--live-muted);
}

#qr-code {
  right: 1.5rem;
  bottom: 1.5rem;
  gap: 0.6rem;
  padding: 0.72rem;
  background: rgba(12, 15, 18, 0.78);
  border: 1px solid var(--live-line);
  border-radius: 1.1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 60px rgba(0, 0, 0, 0.28);
}

#qr-code canvas {
  width: clamp(7rem, 10vw, 9.5rem);
  height: clamp(7rem, 10vw, 9.5rem);
  border-radius: 0.65rem;
}

.qr-label {
  color: rgba(255, 255, 255, 0.58);
}

#welcome-message {
  left: clamp(2rem, 10vw, 10rem);
  max-width: min(64rem, 72vw);
  align-items: flex-start;
  text-align: left;
  white-space: normal;
  animation: welcomeDrift 12s var(--live-ease) infinite alternate;
}

#welcome-message::before {
  content: "LIVE AUDIENCE CANVAS";
  color: var(--live-accent);
  font-size: clamp(0.58rem, 0.8vw, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.28em;
}

#welcome-message h1 {
  max-width: 10ch;
  font-size: clamp(4.6rem, 9.2vw, 10rem);
  color: var(--live-ink);
  letter-spacing: -0.075em;
  line-height: 0.82;
  text-wrap: balance;
  text-shadow: 0 30px 80px rgba(0, 0, 0, 0.38);
}

#welcome-message .tagline {
  max-width: 44rem;
  color: var(--live-muted);
  line-height: 1.5;
  text-wrap: balance;
}

@keyframes welcomeDrift {
  from { transform: translate(-1.5%, -50%); }
  to { transform: translate(1.5%, -51.5%); }
}

.photo-wrapper {
  padding: 0.65rem 0.65rem 2.5rem;
  background: #f3f1e9;
  border: 0.35rem solid rgba(255, 255, 255, 0.6);
  border-radius: 0.35rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 24px 80px rgba(1, 4, 7, 0.58);
}

.photo-item {
  contain: layout paint style;
}

#poll-panel,
#quiz-panel {
  width: min(78rem, 86vw);
  padding: clamp(2rem, 4vw, 4rem);
  background: var(--live-surface);
  border: 1px solid var(--live-line);
  border-radius: 2rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 36px 100px rgba(0, 0, 0, 0.48);
}

#poll-question,
#quiz-question {
  max-width: 24ch;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(2.3rem, 4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.poll-live-badge,
.quiz-live-badge {
  color: var(--live-accent);
}

.poll-bar-track {
  height: clamp(3.4rem, 6vh, 5.2rem);
  background: rgba(255, 255, 255, 0.055);
  border-radius: 0.85rem;
}

.poll-bar-fill {
  border-radius: 0.85rem;
  transition: clip-path 800ms var(--live-ease), opacity 800ms var(--live-ease);
}

.slide-bar-fill {
  transition: clip-path 900ms var(--live-ease) !important;
}

#preshow-overlay {
  background:
    radial-gradient(circle at 16% 20%, rgba(216, 255, 98, 0.08), transparent 30rem),
    #07090b;
}

.preshow-content {
  width: min(90rem, 92vw);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 2rem 5rem;
  text-align: left;
}

.preshow-tagline {
  grid-column: 1 / -1;
  color: var(--live-accent);
}

.preshow-number {
  letter-spacing: -0.09em;
}

.preshow-connected-label {
  color: var(--live-muted);
}

.preshow-qr-wrap {
  justify-self: end;
  padding: 1rem;
  background: var(--live-surface);
  border: 1px solid var(--live-line);
  border-radius: 1.4rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

@media (max-width: 760px) {
  #welcome-message {
    left: 1.5rem;
    max-width: calc(100vw - 3rem);
  }

  #welcome-message h1 {
    font-size: clamp(3.8rem, 18vw, 6.5rem);
  }

  #branding {
    left: 1rem;
  }

  #qr-code {
    right: 1rem;
  }

  .preshow-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .preshow-tagline {
    grid-column: auto;
  }

  .preshow-qr-wrap {
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}