/* Pantalla movil (play) - pensada para 9:16 vertical, calidad minima FullHD (1080x1920) */
html, body { background: var(--ql-background); }
.ql-play {
  min-height: 100dvh; width: 100vw;
  background: var(--ql-background);
  display: flex; flex-direction: column;
}
.ql-view {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  min-height: 100dvh; text-align: center; gap: 16px;
}
.ql-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; color: var(--ql-primary); font-weight: 800; font-size: clamp(0.75rem, 3vw, 1rem); margin: 0; }
.ql-sub { color: var(--ql-text-secondary); font-size: clamp(0.95rem, 4vw, 1.2rem); margin: 0; }
h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); margin: 0; font-weight: 800; }

.ql-btn { border: none; border-radius: 999px; font-weight: 800; }
.ql-btn-primary { background: var(--ql-primary); color: #fff; }
.ql-btn-xl { padding: 1em 2.4em; font-size: clamp(1.1rem, 5vw, 1.4rem); width: 100%; max-width: 320px; }

/* ---- Unirse ---- */
.ql-join-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
#join-code {
  width: 100%; text-align: center; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 900;
  font-size: clamp(1.6rem, 9vw, 2.4rem); padding: 0.5em; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--ql-text) 25%, transparent);
  background: var(--ql-surface); color: var(--ql-text);
}
.ql-error { color: #ff8a8a; min-height: 1.4em; font-weight: 700; }

/* ---- Esperando ---- */
.ql-pulse-dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--ql-primary);
  animation: ql-pulse 1.4s ease-in-out infinite;
}
@keyframes ql-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.4; } }

/* ---- Pregunta: barra de tiempo + opciones ---- */
.ql-question { justify-content: flex-start; padding-top: max(14px, env(safe-area-inset-top)); gap: 14px; }
.ql-time-bar-track { width: 100%; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ql-text) 15%, transparent); overflow: hidden; flex-shrink: 0; }
.ql-time-bar-fill { height: 100%; background: var(--ql-primary); border-radius: 999px; transition: width 0.2s linear; }
.ql-options-grid {
  flex: 1; width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr;
  gap: 14px; padding: 4px 0;
}
.ql-option-btn {
  border: none; border-radius: 20px; color: #fff; font-weight: 800;
  font-size: clamp(1.1rem, 5.4vw, 1.7rem); display: flex; align-items: center; justify-content: center;
  padding: 10px; text-align: center; line-height: 1.15; -webkit-tap-highlight-color: transparent;
}
.ql-option-btn:active { filter: brightness(0.85); transform: scale(0.98); }
.ql-option-btn:disabled { opacity: 0.45; }
.ql-option-btn.ql-selected { outline: 5px solid #fff; outline-offset: -5px; }

/* ---- Respondido / resultados ---- */
.ql-answered-check {
  width: 84px; height: 84px; border-radius: 50%; background: var(--ql-primary); color: #fff;
  display: grid; place-items: center; font-size: 2.4rem; font-weight: 900;
}
.ql-results-mobile .ql-sub { font-weight: 700; }