/* Shared minimal styling layered on top of Tailwind CDN. */

html, body { background: #0b1020; color: #e8eaf6; }
body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; }

.glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
}

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: 10px;
  font-weight: 600; transition: transform .05s ease, background .15s ease;
  border: 1px solid rgba(255,255,255,0.08);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: linear-gradient(135deg,#6366f1,#22d3ee); color: white; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { background: rgba(255,255,255,0.05); color: #e8eaf6; }
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-danger { background: #ef4444; color: white; }
.btn-warn   { background: #f59e0b; color: #1f2937; }

.input, .select, .textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #e8eaf6; border-radius: 10px; padding: .55rem .8rem; width: 100%;
}
.input:focus, .select:focus, .textarea:focus { outline: 2px solid #6366f1; }

.pill { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.pill-ok   { background: #10b98122; color: #6ee7b7; border: 1px solid #10b98155; }
.pill-warn { background: #f59e0b22; color: #fcd34d; border: 1px solid #f59e0b55; }
.pill-bad  { background: #ef444422; color: #fca5a5; border: 1px solid #ef444455; }
.pill-mute { background: #ffffff10; color: #cbd5e1; border: 1px solid #ffffff20; }

/* Viewer-specific: full-bleed video, prevent iOS Safari double-tap zoom on controls. */
.viewer-bg { background: #000; }
.viewer-video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Speaker preview: respects the wrapper's aspect-ratio (16:9). The wrapper
   must give it a width; height is computed from aspect-ratio. */
.speaker-preview { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; object-fit: contain; background: #000; }

/* Question overlay */
.question-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8, 12, 30, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.choice {
  display: block; width: 100%; padding: 1rem; margin-bottom: .75rem;
  border-radius: 14px; font-size: 1.05rem; font-weight: 600;
  text-align: left; color: white; border: 2px solid transparent;
  transition: transform .08s ease, filter .15s ease;
}
.choice:active { transform: scale(0.99); }
.choice-0 { background: #ef4444; }
.choice-1 { background: #3b82f6; }
.choice-2 { background: #10b981; }
.choice-3 { background: #f59e0b; }
.choice-4 { background: #8b5cf6; }
.choice-5 { background: #ec4899; }
.choice.selected { outline: 4px solid white; }
.choice.dim { filter: grayscale(.4) brightness(.6); }
.choice.correct { outline: 4px solid #22c55e; }
.choice.wrong { outline: 4px solid #ef4444; opacity: .6; }

/* Connection status dot */
.dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.dot-on  { background: #22c55e; box-shadow: 0 0 8px #22c55e88; }
.dot-off { background: #ef4444; }

/* Hide scrollbars on mobile-ish overlays */
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Speaker controller styling */
.play-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: white; box-shadow: 0 8px 24px rgba(99,102,241,0.4);
  transition: transform .08s ease, filter .15s ease;
}
.play-btn:hover { filter: brightness(1.05); }
.play-btn:active { transform: scale(0.96); }
.play-btn svg { width: 42px; height: 42px; }
@media (min-width: 640px) {
  .play-btn { width: 96px; height: 96px; }
  .play-btn svg { width: 48px; height: 48px; }
}

.ctrl-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 16px;
  background: rgba(255,255,255,0.06);
  color: #e8eaf6;
  border: 1px solid rgba(255,255,255,0.08);
  transition: background .15s ease, transform .08s ease;
}
.ctrl-btn:hover { background: rgba(255,255,255,0.12); }
.ctrl-btn:active { transform: scale(0.96); }
.ctrl-btn svg { width: 36px; height: 36px; }
.ctrl-btn .ctrl-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: -0.02em;
  pointer-events: none; transform: translateY(2px);
}
@media (min-width: 640px) {
  .ctrl-btn { width: 72px; height: 72px; }
  .ctrl-btn svg { width: 42px; height: 42px; }
  .ctrl-btn .ctrl-label { font-size: 12px; transform: translateY(3px); }
}

/* Mute state colors on the audience-mute button */
.btn.is-muted { background: #f59e0b; color: #1f2937; border-color: transparent; }
.btn.is-muted:hover { filter: brightness(1.05); }

/* Make range slider a touch nicer */
input[type="range"] { height: 6px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px; width: 20px;
  border-radius: 50%;
  background: #6366f1;
  border: 2px solid white;
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  height: 20px; width: 20px;
  border-radius: 50%;
  background: #6366f1;
  border: 2px solid white;
  cursor: pointer;
}