/* ===================================================================
 * QUIZZ SAUTER — Redesign premium "gamer em tema claro"
 * Estilo Kahoot com identidade visual Sauter
 * Usa exclusivamente tokens de tokens.css + tokens quiz-specific
 * Sem hex hardcoded — apenas custom properties
 * Sem emoji — ícones SVG no JSX
 * General Sans (var(--font-sans)) em toda a interface
 * Texto mínimo: 14px | Touch mínimo: 48px | Contraste ≥ 4.5:1
 * =================================================================== */


/* ===================================================================
 * 0. TOKENS ESPECÍFICOS DO QUIZ
 * =================================================================== */

.quiz-page {
  /* Superfícies */
  --qz-bg: var(--bg-alt);
  --qz-surface: var(--white);
  --qz-primary: var(--rainbow-indigo);
  --qz-primary-deep: var(--purple-blue);
  --qz-ink: var(--black-rock);
  --qz-ink-soft: var(--fg-muted);
  --qz-accent: var(--energizing);
  --qz-on-primary: var(--white);
  --qz-on-accent: var(--black-rock);
  --qz-danger: #D32F2F;
  /* Raios */
  --qz-radius: 20px;
  --qz-radius-lg: 24px;
  /* Sombras */
  --qz-shadow-sm: 0 2px 8px -2px rgba(21, 3, 45, 0.06);
  --qz-shadow-md: 0 8px 32px -8px rgba(21, 3, 45, 0.10);
  --qz-shadow-lg: 0 16px 64px -16px rgba(21, 3, 45, 0.14);
  /* Cores dos tiles A/B/C/D */
  --qz-tile-a: var(--rainbow-indigo);
  --qz-tile-b: var(--energizing);
  --qz-tile-c: var(--purple-blue);
  --qz-tile-d: color-mix(in srgb, var(--rainbow-indigo) 12%, var(--white));
  --qz-tile-a-text: var(--white);
  --qz-tile-b-text: var(--black-rock);
  --qz-tile-c-text: var(--white);
  --qz-tile-d-text: var(--black-rock);
}


/* ===================================================================
 * 1. PÁGINA & CONTAINER
 * =================================================================== */

.quiz-page {
  min-height: 100vh;
  background: var(--qz-bg);
  font-family: var(--font-sans);
  color: var(--qz-ink);
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Herança de fonte em todos os elementos interativos */
.quiz-page button,
.quiz-page input,
.quiz-page select,
.quiz-page textarea {
  font-family: var(--font-sans);
}

/* SVGs dentro de botões CTA — alinhamento vertical perfeito */
.quiz-page button > svg,
.quiz-page a > svg,
.quiz-page label > svg {
  display: block;
  flex-shrink: 0;
}

/* Texto dentro de botões CTA — alinhamento vertical com ícone */
.quiz-page button > span,
.quiz-page a > span,
.quiz-page label > span {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.quiz-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: var(--s-7);
}


/* ===================================================================
 * 2. TELA DE LOGIN / ENTRADA
 * =================================================================== */

.quiz-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--s-5);
  background:
    radial-gradient(ellipse at 70% 20%, color-mix(in srgb, var(--qz-primary) 8%, transparent), transparent 55%),
    radial-gradient(ellipse at 30% 80%, color-mix(in srgb, var(--qz-accent) 6%, transparent), transparent 50%),
    var(--qz-bg);
}

/* Decoração de fundo — arcos/círculos (geometria "S" da marca) */
.quiz-login__bg-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.quiz-login__bg-deco::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--qz-primary) 6%, transparent);
  top: -15%;
  right: -10%;
}

.quiz-login__bg-deco::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--qz-accent) 6%, transparent);
  bottom: -8%;
  left: -5%;
}

/* Card glassmorphism — alinhado com .nav.scrolled */
.quiz-login__card {
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--rule) 80%, transparent);
  border-radius: var(--qz-radius-lg);
  box-shadow: var(--qz-shadow-lg);
  max-width: 440px;
  width: 100%;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 1;
  animation: qz-fadeInUp 0.6s var(--ease-out) both;
}

/* Logo */
.quiz-login__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-2);
}

.quiz-login__logo img,
.quiz-login__logo svg {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

/* Título e subtítulo */
.quiz-login__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-heading);
  text-align: center;
  color: var(--qz-ink);
  margin: 0;
}

.quiz-login__subtitle {
  font-size: var(--fs-small);
  color: var(--qz-ink-soft);
  text-align: center;
  margin: 0;
  line-height: var(--lh-body);
}

/* Campo de entrada */
.quiz-login__field {
  width: 100%;
}

.quiz-login__input {
  width: 100%;
  padding: 16px 24px;
  border: 2px solid var(--bright-grey);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--qz-ink);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  outline: none;
  min-height: 48px;
  transition:
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}

.quiz-login__input::placeholder {
  color: var(--fg-faint);
}

.quiz-login__input:hover {
  border-color: color-mix(in srgb, var(--qz-primary) 30%, var(--bright-grey));
}

.quiz-login__input:focus {
  border-color: var(--qz-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-hi) 15%, transparent);
}

/* Input com erro */
.quiz-login__input--error {
  border-color: var(--qz-danger);
}

/* ★ FIX #4: Classe de shake re-triggerável via estado React */
.quiz-login__input--shake {
  animation: qz-shake 0.5s var(--ease-out);
}

/* Botão primário — gradiente violeta */
.quiz-login__btn {
  width: 100%;
  padding: 16px 28px;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--qz-on-primary);
  background: linear-gradient(135deg, var(--qz-primary), var(--qz-primary-deep));
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--qz-primary) 35%, transparent);
}

.quiz-login__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.quiz-login__btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.02);
  background: linear-gradient(135deg, var(--primary-hi), var(--rainbow-indigo));
  box-shadow:
    0 12px 40px -8px color-mix(in srgb, var(--qz-primary) 45%, transparent),
    0 0 24px -4px color-mix(in srgb, var(--qz-primary) 20%, transparent);
}

.quiz-login__btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.quiz-login__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Botão acento — lime para "Entrar no Jogo" */
.quiz-login__btn--accent {
  background: linear-gradient(135deg, var(--qz-accent), color-mix(in srgb, var(--qz-accent) 85%, var(--qz-surface)));
  color: var(--qz-on-accent);
  box-shadow: 0 4px 20px -4px color-mix(in srgb, var(--qz-accent) 40%, transparent);
}

.quiz-login__btn--accent:hover:not(:disabled) {
  box-shadow:
    0 12px 40px -8px color-mix(in srgb, var(--qz-accent) 50%, transparent),
    0 0 24px -4px color-mix(in srgb, var(--qz-accent) 25%, transparent);
}

/* Mensagem de erro */
.quiz-login__error {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--qz-danger) 8%, var(--qz-surface));
  border: 1px solid color-mix(in srgb, var(--qz-danger) 20%, transparent);
  color: var(--qz-danger);
  font-size: var(--fs-small);
  font-weight: 500;
  text-align: center;
  animation: qz-shake 0.4s var(--ease-out);
}


/* ===================================================================
 * 3. AVATAR PICKER — Seleção de avatar do jogador
 * =================================================================== */

.quiz-avatar-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
}

.quiz-avatar-picker__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  width: 100%;
}

.quiz-avatar-picker__item {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid transparent;
  background: var(--qz-surface);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition:
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-fast) var(--ease-out);
}

.quiz-avatar-picker__item:hover {
  transform: scale(1.08);
}

.quiz-avatar-picker__item--selected {
  border-color: var(--qz-accent);
  transform: scale(1.1);
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--qz-accent) 30%, transparent);
}

/* Componente Avatar reutilizável */
.quiz-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.quiz-avatar img,
.quiz-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quiz-avatar--sm {
  width: 32px;
  height: 32px;
}

.quiz-avatar--md {
  width: 48px;
  height: 48px;
}

.quiz-avatar--lg {
  width: 72px;
  height: 72px;
}

.quiz-avatar--xl {
  width: 96px;
  height: 96px;
}


/* ===================================================================
 * 4. PAINEL ADMINISTRATIVO
 * =================================================================== */

.quiz-admin {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  min-height: calc(100vh - 80px);
  padding: 32px;
}

/* Barra lateral */
.quiz-admin__sidebar {
  background: var(--qz-surface);
  border: 1px solid var(--rule);
  border-radius: var(--qz-radius);
  box-shadow: var(--qz-shadow-md);
  padding: var(--s-5);
  overflow-y: auto;
  max-height: calc(100vh - 120px);
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.quiz-admin__sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-2);
}

.quiz-admin__sidebar-header h3 {
  font-size: var(--fs-h4);
  font-weight: 600;
  margin: 0;
}

/* Painel principal */
.quiz-admin__main {
  background: var(--qz-surface);
  border: 1px solid var(--rule);
  border-radius: var(--qz-radius);
  box-shadow: var(--qz-shadow-md);
  padding: var(--s-6);
}

/* Badge de contagem */
.quiz-admin__count {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--qz-ink-soft);
  background: var(--bg-soft);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

/* Lista de questões */
.quiz-admin__question-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}

/* Item de questão */
.quiz-admin__question-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: var(--qz-bg);
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--qz-ink-soft);
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
  user-select: none;
}

.quiz-admin__question-item:hover {
  background: var(--qz-surface);
  border-color: var(--rule-strong);
  transform: translateY(-1px);
  box-shadow: var(--qz-shadow-sm);
}

/* Questão ativa */
.quiz-admin__question-item--active {
  background: color-mix(in srgb, var(--qz-primary) 6%, var(--qz-surface));
  border-color: var(--qz-primary);
  color: var(--qz-ink);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--qz-primary) 12%, transparent),
    var(--qz-shadow-sm);
}

/* Questão vazia */
.quiz-admin__question-item--empty .quiz-admin__question-preview {
  font-style: italic;
  opacity: 0.5;
}

/* Número da questão */
.quiz-admin__question-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--qz-ink-soft);
}

.quiz-admin__question-item--active .quiz-admin__question-num {
  background: var(--qz-primary);
  color: var(--qz-on-primary);
}

/* Preview da questão */
.quiz-admin__question-preview {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ações da questão (aparecem no hover) */
.quiz-admin__question-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}

.quiz-admin__question-item:hover .quiz-admin__question-actions {
  opacity: 1;
}

/* Botão mover */
.quiz-admin__btn-move {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: var(--r-1);
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  color: var(--qz-ink-soft);
  border: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}

.quiz-admin__btn-move:hover {
  background: var(--rule-strong);
}

.quiz-admin__btn-move:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Botão deletar */
.quiz-admin__btn-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--qz-danger) 20%, var(--rule));
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--qz-danger);
  background: color-mix(in srgb, var(--qz-danger) 4%, transparent);
  cursor: pointer;
  min-height: 44px;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}

.quiz-admin__btn-delete:hover {
  background: color-mix(in srgb, var(--qz-danger) 10%, transparent);
  border-color: var(--qz-danger);
}

/* Formulário de edição */
.quiz-admin__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.quiz-admin__form-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0;
}

.quiz-admin__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-admin__field label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--qz-ink-soft);
}

.quiz-admin__field label::before {
  content: '';
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* Textarea */
.quiz-admin__textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--qz-ink);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition:
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}

.quiz-admin__textarea:focus {
  border-color: var(--qz-primary);
  background: var(--qz-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-hi) 15%, transparent);
}

/* Grid de alternativas */
.quiz-admin__alternatives {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Input de alternativa */
.quiz-admin__alt-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  background: var(--qz-bg);
  transition:
    border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}

.quiz-admin__alt-input:focus-within {
  border-color: var(--qz-primary);
  background: var(--qz-surface);
}

/* Alternativa correta */
.quiz-admin__alt-input--correct {
  border-color: color-mix(in srgb, var(--qz-accent) 50%, var(--rule));
  background: color-mix(in srgb, var(--qz-accent) 4%, var(--qz-bg));
}

/* Forma/ícone da alternativa */
.quiz-admin__alt-shape {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Badge da letra A/B/C/D */
.quiz-admin__alt-letter {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.quiz-admin__alt-letter--a {
  background: var(--qz-tile-a);
  color: var(--qz-tile-a-text);
}

.quiz-admin__alt-letter--b {
  background: var(--qz-tile-b);
  color: var(--qz-tile-b-text);
}

.quiz-admin__alt-letter--c {
  background: var(--qz-tile-c);
  color: var(--qz-tile-c-text);
}

.quiz-admin__alt-letter--d {
  background: var(--qz-tile-d);
  color: var(--qz-tile-d-text);
}

/* Campo texto da alternativa */
.quiz-admin__alt-text {
  flex: 1;
}

.quiz-admin__alt-text input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--qz-ink);
  outline: none;
  padding: 0;
}

/* Check da alternativa correta */
.quiz-admin__alt-check {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--bg-soft);
  color: var(--fg-faint);
  border: 2px solid var(--rule);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}

.quiz-admin__alt-check--active {
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  border-color: var(--qz-accent);
}

.quiz-admin__alt-check:hover {
  border-color: var(--qz-accent);
}

/* Botão remover alternativa */
.quiz-admin__alt-remove {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: transparent;
  color: var(--fg-faint);
  border: none;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}

.quiz-admin__alt-remove:hover {
  background: color-mix(in srgb, var(--qz-danger) 10%, transparent);
  color: var(--qz-danger);
}

/* Botão adicionar alternativa — abrange toda a grid */
.quiz-admin__btn-add-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1.5px dashed var(--rule);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--fg-faint);
  background: transparent;
  cursor: pointer;
  min-height: 48px;
  grid-column: 1 / -1;
  transition: all var(--t-fast) var(--ease-out);
}

.quiz-admin__btn-add-alt:hover {
  border-color: var(--qz-primary);
  color: var(--qz-primary);
}

/* Controles (tempo, pontuação) */
.quiz-admin__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.quiz-admin__control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 160px;
}

/* Select estilizado */
.quiz-admin__select {
  padding: 10px 16px;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--qz-ink);
  background: var(--qz-bg);
  cursor: pointer;
  outline: none;
  min-height: 44px;
  transition: border-color var(--t-fast) var(--ease-out);
}

.quiz-admin__select:focus {
  border-color: var(--qz-primary);
}

/* Botão adicionar questão */
.quiz-admin__btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--qz-ink-soft);
  background: transparent;
  cursor: pointer;
  min-height: 48px;
  line-height: 1;
  transition:
    color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}

.quiz-admin__btn-add:hover {
  color: var(--qz-primary);
  border-color: var(--qz-primary);
  background: color-mix(in srgb, var(--qz-primary) 5%, transparent);
}

/* Botão "Iniciar Jogo" — grande, verde lima */
.quiz-admin__btn-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0 32px;
  height: 56px;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--qz-on-accent);
  background: linear-gradient(135deg, var(--qz-accent), color-mix(in srgb, var(--qz-accent) 85%, var(--qz-surface)));
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 4px 20px -4px color-mix(in srgb, var(--qz-accent) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
}

.quiz-admin__btn-start::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.quiz-admin__btn-start:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 16px 48px -8px color-mix(in srgb, var(--qz-accent) 50%, transparent),
    0 0 32px -4px color-mix(in srgb, var(--qz-accent) 25%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.quiz-admin__btn-start:active {
  transform: translateY(0) scale(0.98);
}

/* Estado vazio do admin */
.quiz-admin__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  min-height: 400px;
  color: var(--fg-faint);
  text-align: center;
}

.quiz-admin__empty svg {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}


/* ===================================================================
 * 5. LOBBY — Sala de espera
 * =================================================================== */

.quiz-lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--s-7) var(--s-5);
  text-align: center;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--qz-primary) 6%, transparent), transparent 50%),
    var(--qz-bg);
}

/* Padrão de pontos (assinatura da marca) */
.quiz-lobby::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--qz-primary) 8%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.5;
}

/* Header do lobby */
.quiz-lobby__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  position: relative;
  z-index: 1;
}

.quiz-lobby__header h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin: 0;
}

/* Bloco QR + Código — lado a lado */
.quiz-lobby__access {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  position: relative;
  z-index: 1;
  margin: var(--s-6) 0 var(--s-5);
  animation: qz-fadeInUp 0.5s var(--ease-out) both;
}

/* Card do QR Code */
.quiz-lobby__qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  background: var(--qz-surface);
  border: 1px solid var(--rule);
  border-radius: var(--qz-radius);
  padding: var(--s-5);
  box-shadow: var(--qz-shadow-md);
}

/* Container do SVG gerado */
.quiz-lobby__qr {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  overflow: hidden;
}

/* Hint abaixo do QR */
.quiz-lobby__qr-hint {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--qz-ink-soft);
  margin: 0;
}

/* Área do código da sala */
.quiz-lobby__code-area {
  position: relative;
  z-index: 1;
  text-align: center;
}

.quiz-lobby__code-label {
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--qz-ink-soft);
  margin: 0 0 var(--s-3);
}

/* Código grande monoespaçado */
.quiz-lobby__code {
  font-family: var(--font-mono);
  font-size: clamp(48px, 10vw, 96px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--qz-ink);
  background: var(--qz-surface);
  padding: var(--s-5) var(--s-7);
  border-radius: var(--qz-radius);
  border: 2px solid var(--rule);
  box-shadow: var(--qz-shadow-md);
  user-select: all;
  animation: qz-scaleIn 0.5s var(--ease-spring) both;
}

/* URL abaixo do código */
.quiz-lobby__code-url {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--fg-faint);
  margin: var(--s-3) 0 0;
  word-break: break-all;
}

/* Responsivo: empilha em mobile */
@media (max-width: 768px) {
  .quiz-lobby__access {
    flex-direction: column;
    gap: var(--s-4);
  }
  .quiz-lobby__code {
    font-size: clamp(32px, 8vw, 56px);
    padding: var(--s-4) var(--s-5);
  }
  /* ★ FIX #16: QR Code tamanho mínimo em mobile — nunca menor que 160px */
  .quiz-lobby__qr-card {
    min-width: 200px;
  }
  .quiz-lobby__qr svg {
    min-width: 160px;
    min-height: 160px;
  }
  /* ★ FIX #15: Admin panel — scroll vertical e overflow controlado */
  .quiz-admin {
    overflow-y: auto;
    max-height: 100vh;
    -webkit-overflow-scrolling: touch;
  }
  .quiz-admin__sidebar {
    max-height: 35vh;
    overflow-y: auto;
  }
  .quiz-admin__main {
    overflow-y: auto;
  }
  /* ★ FIX #15: Host view — scroll habilitado em mobile */
  .quiz-host {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .quiz-reveal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--s-7);
  }
  /* ★ FIX #15: Lobby — scroll com muitos jogadores */
  .quiz-lobby {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 100vh;
  }
}

/* Contagem de jogadores */
.quiz-lobby__count {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  position: relative;
  z-index: 1;
}

.quiz-lobby__count-num {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--qz-primary);
}

.quiz-lobby__count-label {
  font-size: var(--fs-body);
  color: var(--qz-ink-soft);
}

/* Grid de jogadores */
.quiz-lobby__players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: var(--s-7) 0;
  max-width: 800px;
  position: relative;
  z-index: 1;
}

/* Card individual do jogador */
.quiz-lobby__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--qz-surface);
  border-radius: 12px;
  border: 1px solid var(--rule);
  box-shadow: var(--qz-shadow-sm);
  animation: qz-playerEnter 0.5s var(--ease-spring) both;
  transition: transform var(--t-fast) var(--ease-out);
}

.quiz-lobby__player:hover {
  transform: translateY(-4px) rotateX(2deg);
  box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--rainbow-indigo) 25%, transparent);
}

.quiz-lobby__player-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--qz-ink);
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Variante de lobby do jogador */
.quiz-lobby--player {
  gap: var(--s-6);
}

.quiz-lobby__player-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  position: relative;
  z-index: 1;
}

.quiz-lobby__player-info h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0;
}

/* Texto pulsante "Esperando o host..." */
.quiz-lobby__waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--qz-ink-soft);
  position: relative;
  z-index: 1;
  animation: qz-pulse 2s ease-in-out infinite;
}

/* Pontos animados de espera */
.quiz-lobby__waiting-dots {
  display: flex;
  gap: 6px;
}

.quiz-lobby__waiting-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qz-primary);
  animation: qz-dotPulse 1.4s ease-in-out infinite;
}

.quiz-lobby__waiting-dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.quiz-lobby__waiting-dots span:nth-child(3) {
  animation-delay: 0.32s;
}


/* ===================================================================
 * 6. VISÃO DO HOST — Projeção
 * =================================================================== */

.quiz-host {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: var(--s-6);
  background: var(--qz-bg);
  position: relative;
}

/* Header do host */
.quiz-host__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 960px;
  margin: 0 auto var(--s-4);
  gap: var(--s-5);
}

/* Progresso "3/10" */
.quiz-host__progress {
  font-size: 16px;
  font-weight: 600;
  color: var(--qz-ink);
}

/* Contagem de respostas */
.quiz-host__response-count {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--qz-ink-soft);
  text-align: center;
}

.quiz-host__response-num {
  font-weight: 700;
  color: var(--qz-ink);
}

/* Texto da questão — grande e centralizado */
.quiz-host__question {
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--qz-ink);
  max-width: 900px;
  margin: var(--s-5) auto var(--s-7);
  text-wrap: balance;
  word-break: break-word;
  overflow-wrap: break-word;
  animation: qz-fadeInUp 0.5s var(--ease-out) both;
}

.quiz-host__question h2 {
  font: inherit;
  color: inherit;
  margin: 0;
}


/* ===================================================================
 * 7. TIMER CIRCULAR
 * =================================================================== */

.quiz-host__timer {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto var(--s-5);
}

.quiz-host__timer-svg {
  width: 120px;
  height: 120px;
}

/* Círculo de fundo */
.quiz-host__timer-bg {
  fill: none;
  stroke: var(--rule);
  stroke-width: 6;
}

/* Círculo de progresso */
.quiz-host__timer-circle {
  fill: none;
  stroke: var(--qz-primary);
  stroke-width: 6;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--qz-primary) 40%, transparent));
}

/* Timer baixo — vermelho + pulso */
.quiz-host__timer--low .quiz-host__timer-circle {
  stroke: var(--qz-danger);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--qz-danger) 40%, transparent));
}

.quiz-host__timer--low .quiz-host__timer-text {
  color: var(--qz-danger);
  animation: qz-timerPulse 0.6s ease-in-out infinite;
}

/* Número central do timer */
.quiz-host__timer-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 700;
  color: var(--qz-ink);
  line-height: 1;
}


/* ===================================================================
 * 6b. OPÇÕES DO HOST — Grid 2×2
 * =================================================================== */

.quiz-host__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

/* Opção individual */
.quiz-host__option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 32px;
  border-radius: var(--qz-radius);
  font-weight: 600;
  line-height: 1.3;
  min-height: 100px;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
  animation: qz-scaleIn 0.4s var(--ease-spring) both;
}

/* Animação escalonada */
.quiz-host__option:nth-child(1) { animation-delay: 0.05s; }
.quiz-host__option:nth-child(2) { animation-delay: 0.10s; }
.quiz-host__option:nth-child(3) { animation-delay: 0.15s; }
.quiz-host__option:nth-child(4) { animation-delay: 0.20s; }

/* Cores dos tiles */
.quiz-host__option--a {
  background: var(--qz-tile-a);
  color: var(--qz-tile-a-text);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--qz-tile-a) 40%, transparent);
}

.quiz-host__option--b {
  background: var(--qz-tile-b);
  color: var(--qz-tile-b-text);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--qz-tile-b) 40%, transparent);
}

.quiz-host__option--c {
  background: var(--qz-tile-c);
  color: var(--qz-tile-c-text);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--qz-tile-c) 40%, transparent);
}

.quiz-host__option--d {
  background: var(--qz-tile-d);
  color: var(--qz-tile-d-text);
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--qz-primary) 10%, transparent);
}

/* Letra do tile — círculo semitransparente */
.quiz-host__option-letter {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 22px;
  flex-shrink: 0;
}

/* Texto da opção */
.quiz-host__option-text {
  flex: 1;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Botão revelar resposta */
.quiz-host__btn-reveal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--qz-on-primary);
  background: linear-gradient(135deg, var(--qz-primary), var(--qz-primary-deep));
  cursor: pointer;
  margin-top: var(--s-5);
  min-height: 48px;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--qz-primary) 35%, transparent);
  animation: qz-fadeInUp 0.3s var(--ease-out) both;
}

.quiz-host__btn-reveal:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 40px -8px color-mix(in srgb, var(--qz-primary) 45%, transparent);
}

/* Estados leaderboard e podium do host */
.quiz-host--leaderboard,
.quiz-host--podium {
  justify-content: center;
}


/* ===================================================================
 * 8. VISÃO DO JOGADOR — Mobile-first, premium
 * Alinhado com padrões do site: glassmorphism, radial gradients,
 * feature-card borders, spacing tokens, motion tokens
 * =================================================================== */

.quiz-player {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: var(--s-4);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--qz-primary) 5%, transparent), transparent 50%),
    var(--qz-bg);
}

/* Header — pergunta com card glassmorphism (padrão .nav.scrolled) */
.quiz-player__header {
  padding: var(--s-5) var(--s-4);
  text-align: center;
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  border-radius: var(--qz-radius);
  margin-bottom: var(--s-4);
  box-shadow: var(--qz-shadow-sm);
}

/* Texto da pergunta — tipografia responsiva */
.quiz-player__question-text {
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--qz-ink);
  text-wrap: balance;
  letter-spacing: -0.01em;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Grid 2×2 — preenche o espaço restante */
.quiz-player__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  flex: 1;
  align-content: stretch;
}

/* Tile — colorido com letra no canto superior direito, texto centralizado */
.quiz-player__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 36px var(--s-3) var(--s-3);
  border: none;
  border-radius: var(--qz-radius);
  font-family: var(--font-sans);
  font-size: clamp(14px, 3.5vw, 17px);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  word-break: break-word;
  overflow-wrap: break-word;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
  animation: qz-scaleIn 0.3s var(--ease-spring) both;
}

/* Animação escalonada */
.quiz-player__option:nth-child(1) { animation-delay: 0.05s; }
.quiz-player__option:nth-child(2) { animation-delay: 0.10s; }
.quiz-player__option:nth-child(3) { animation-delay: 0.15s; }
.quiz-player__option:nth-child(4) { animation-delay: 0.20s; }

/* Cores — paleta Sauter */
.quiz-player__option--a {
  background: var(--qz-tile-a);
  color: var(--qz-tile-a-text);
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--qz-tile-a) 35%, transparent);
}
.quiz-player__option--b {
  background: var(--qz-tile-b);
  color: var(--qz-tile-b-text);
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--qz-tile-b) 35%, transparent);
}
.quiz-player__option--c {
  background: var(--qz-tile-c);
  color: var(--qz-tile-c-text);
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--qz-tile-c) 35%, transparent);
}
.quiz-player__option--d {
  background: var(--qz-tile-d);
  color: var(--qz-tile-d-text);
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--qz-tile-d) 25%, transparent);
}

/* Letra A/B/C/D — canto superior direito */
.quiz-player__option-letter {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

/* Texto da resposta — centralizado no meio do box */
.quiz-player__option-text {
  text-align: center;
  width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Desabilitado (já respondeu) */
.quiz-player__option:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Hover — eleva */
.quiz-player__option:hover:not(:disabled) {
  transform: translateY(-2px);
}

/* Pressionando — feedback tátil */
.quiz-player__option:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow: none;
}


/* ===================================================================
 * 9. RESULTADO / FEEDBACK — Premium card com glassmorphism
 * =================================================================== */

.quiz-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--s-5);
  text-align: center;
}

/* Card — padrão glassmorphism do site (nav.scrolled) */
.quiz-result__card {
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  border-radius: var(--qz-radius-lg);
  padding: var(--s-7) var(--s-6);
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  box-shadow: var(--qz-shadow-lg);
  animation: qz-scaleIn 0.5s var(--ease-spring) both;
}

/* Fundo correto — radial gradient lime sutil */
.quiz-result--correct {
  background:
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--qz-accent) 12%, transparent), transparent 50%),
    color-mix(in srgb, var(--bg) 75%, transparent);
}

.quiz-result--correct .quiz-result__icon {
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  box-shadow:
    0 0 0 10px color-mix(in srgb, var(--qz-accent) 15%, transparent),
    0 0 0 20px color-mix(in srgb, var(--qz-accent) 6%, transparent),
    0 8px 32px -8px color-mix(in srgb, var(--qz-accent) 35%, transparent);
}

/* Fundo errado — neutro */
.quiz-result--wrong {
  background: color-mix(in srgb, var(--bg) 80%, transparent);
}

.quiz-result--wrong .quiz-result__icon {
  background: var(--bg-soft);
  color: var(--qz-ink-soft);
}

/* Ícone — círculo grande com SVG check/X */
.quiz-result__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: qz-scaleIn 0.5s var(--ease-spring) 0.1s both;
}

.quiz-result__icon svg {
  width: 40px;
  height: 40px;
}

/* Label "Correto!" / "Errado!" */
.quiz-result__label {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--qz-ink);
  margin: 0;
}

/* Pontos — número grande */
.quiz-result__points {
  font-size: clamp(40px, 10vw, 64px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--qz-ink);
  animation: qz-countUp 0.6s var(--ease-spring) 0.2s both;
  overflow: hidden;
}

/* Posição no ranking */
.quiz-result__position {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--qz-ink-soft);
  background: var(--bg-soft);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  animation: qz-fadeInUp 0.5s var(--ease-out) 0.3s both;
}

/* Total */
.quiz-result__total {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--qz-ink-soft);
}

/* Aguardando... */
.quiz-result__wait {
  font-size: var(--fs-small);
  color: var(--fg-faint);
  animation: qz-pulse 2s ease-in-out infinite;
  margin-top: var(--s-2);
}


/* ===================================================================
 * 10. LEADERBOARD — Ranking
 * =================================================================== */

.quiz-leaderboard {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--s-5) 0;
}

.quiz-leaderboard__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  text-align: center;
  color: var(--qz-ink);
  margin: 0 0 var(--s-6);
}

/* Lista de linhas */
.quiz-leaderboard__list {
  display: flex;
  flex-direction: column;
}

/* Linha do ranking */
.quiz-leaderboard__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--qz-surface);
  border: 1px solid var(--rule);
  margin-bottom: 8px;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
  animation: qz-slideInLeft 0.4s var(--ease-out) both;
}

/* Animação escalonada */
.quiz-leaderboard__row:nth-child(1) { animation-delay: 0.05s; }
.quiz-leaderboard__row:nth-child(2) { animation-delay: 0.10s; }
.quiz-leaderboard__row:nth-child(3) { animation-delay: 0.15s; }
.quiz-leaderboard__row:nth-child(4) { animation-delay: 0.20s; }
.quiz-leaderboard__row:nth-child(5) { animation-delay: 0.25s; }

.quiz-leaderboard__row:hover {
  transform: translateX(4px);
  box-shadow: var(--qz-shadow-sm);
}

/* 1º lugar — destaque lime */
.quiz-leaderboard__row--top1 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--qz-accent) 12%, var(--qz-surface)), var(--qz-surface));
  border-color: color-mix(in srgb, var(--qz-accent) 40%, transparent);
  box-shadow: 0 4px 20px -8px color-mix(in srgb, var(--qz-accent) 25%, transparent);
}

.quiz-leaderboard__row--top1 .quiz-leaderboard__position {
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  font-weight: 700;
}

/* 2º lugar — prata */
.quiz-leaderboard__row--top2 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bg-soft) 60%, var(--qz-surface)), var(--qz-surface));
  border-color: color-mix(in srgb, var(--rule-strong) 40%, transparent);
}

.quiz-leaderboard__row--top2 .quiz-leaderboard__position {
  background: var(--bg-soft);
  color: var(--qz-ink-soft);
}

/* 3º lugar — bronze */
.quiz-leaderboard__row--top3 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--qz-accent) 6%, var(--qz-surface)), var(--qz-surface));
  border-color: color-mix(in srgb, var(--rule-strong) 30%, transparent);
}

.quiz-leaderboard__row--top3 .quiz-leaderboard__position {
  background: color-mix(in srgb, var(--qz-accent) 25%, var(--bg-soft));
  color: var(--qz-ink);
}

/* Destaque para o jogador atual */
.quiz-leaderboard__row--me {
  border-color: var(--qz-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qz-primary) 12%, transparent);
}

/* Número da posição */
.quiz-leaderboard__position {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-small);
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--qz-ink-soft);
}

/* Nome do jogador */
.quiz-leaderboard__name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--qz-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pontuação */
.quiz-leaderboard__score {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--qz-ink);
  min-width: 70px;
  text-align: right;
}

/* Streak no leaderboard */
.quiz-leaderboard__streak {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--qz-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.quiz-leaderboard__streak svg {
  width: 14px;
  height: 14px;
}


/* ===================================================================
 * 11. PÓDIO — Tela final
 * =================================================================== */

.quiz-podium {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--s-7);
  background:
    radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--qz-primary) 6%, transparent), transparent 50%),
    var(--qz-bg);
  position: relative;
  overflow: hidden;
}

/* Decoração de arcos (geometria "S" da marca) */
.quiz-podium::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--qz-primary) 6%, transparent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.quiz-podium::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--qz-accent) 8%, transparent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Título com troféu SVG */
.quiz-podium__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--s-7);
  position: relative;
  z-index: 1;
  animation: qz-fadeInUp 0.6s var(--ease-out) both;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.quiz-podium__title svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* Layout dos 3 lugares */
.quiz-podium__places {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  margin-bottom: var(--s-7);
  position: relative;
  z-index: 1;
}

/* Bloco individual do pódio */
.quiz-podium__place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 32px;
  border-radius: var(--qz-radius) var(--qz-radius) 0 0;
  position: relative;
  animation: qz-fadeInUp 0.6s var(--ease-spring) both;
}

/* 1º lugar — mais alto, lime */
.quiz-podium__place--1 {
  background: linear-gradient(180deg, color-mix(in srgb, var(--qz-accent) 15%, var(--qz-surface)), var(--qz-surface));
  border: 2px solid color-mix(in srgb, var(--qz-accent) 40%, transparent);
  border-bottom: none;
  min-height: 240px;
  order: 2;
  animation-delay: 0.3s;
  box-shadow: 0 -8px 32px -8px color-mix(in srgb, var(--qz-accent) 20%, transparent);
}

/* 2º lugar — médio, prata */
.quiz-podium__place--2 {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 50%, var(--qz-surface)), var(--qz-surface));
  border: 1px solid var(--rule);
  border-bottom: none;
  min-height: 180px;
  order: 1;
  animation-delay: 0.15s;
}

/* 3º lugar — mais curto, bronze */
.quiz-podium__place--3 {
  background: linear-gradient(180deg, color-mix(in srgb, var(--qz-accent) 6%, var(--qz-surface)), var(--qz-surface));
  border: 1px solid var(--rule);
  border-bottom: none;
  min-height: 140px;
  order: 3;
  animation-delay: 0.45s;
}

/* Medalha — ícone SVG */
.quiz-podium__medal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-podium__medal svg {
  width: 32px;
  height: 32px;
}

.quiz-podium__place--1 .quiz-podium__medal svg {
  width: 42px;
  height: 42px;
}

/* Nome do jogador */
.quiz-podium__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--qz-ink);
  text-align: center;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pontuação */
.quiz-podium__score {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--qz-ink-soft);
}

.quiz-podium__place--1 .quiz-podium__score {
  font-size: 22px;
  color: var(--qz-ink);
}

/* Barra decorativa */
.quiz-podium__bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--rule);
  margin-top: var(--s-2);
}

.quiz-podium__place--1 .quiz-podium__bar {
  background: var(--qz-accent);
}

/* Confete CSS */
.quiz-podium__confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.quiz-podium__confetti::before,
.quiz-podium__confetti::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: -20px;
}

.quiz-podium__confetti::before {
  left: 15%;
  background: var(--qz-accent);
  border-radius: 2px;
  animation: qz-confetti1 3s var(--ease-out) infinite;
}

.quiz-podium__confetti::after {
  left: 75%;
  background: var(--qz-primary);
  border-radius: 50%;
  animation: qz-confetti2 3.5s var(--ease-out) 0.3s infinite;
}

/* Partículas extras do confete */
.quiz-podium__confetti span {
  position: absolute;
  width: 8px;
  height: 8px;
  top: -20px;
}

.quiz-podium__confetti span:nth-child(1) {
  left: 35%;
  background: var(--qz-primary-deep);
  animation: qz-confetti3 2.8s var(--ease-out) 0.6s infinite;
}

.quiz-podium__confetti span:nth-child(2) {
  left: 55%;
  width: 6px;
  height: 12px;
  background: var(--qz-accent);
  border-radius: 1px;
  animation: qz-confetti1 3.2s var(--ease-out) 0.9s infinite;
}

.quiz-podium__confetti span:nth-child(3) {
  left: 45%;
  background: var(--qz-primary);
  border-radius: 50%;
  animation: qz-confetti2 2.5s var(--ease-out) 1.2s infinite;
}

.quiz-podium__confetti span:nth-child(4) {
  left: 25%;
  background: var(--qz-accent);
  animation: qz-confetti3 3s var(--ease-out) 0.4s infinite;
}

.quiz-podium__confetti span:nth-child(5) {
  left: 65%;
  background: var(--qz-primary-deep);
  border-radius: 2px;
  animation: qz-confetti1 2.7s var(--ease-out) 0.8s infinite;
}

.quiz-podium__confetti span:nth-child(6) {
  left: 85%;
  background: var(--qz-primary);
  animation: qz-confetti3 3.3s var(--ease-out) 0.2s infinite;
}


/* ===================================================================
 * 12. REVEAL — Revelação da resposta (Host)
 * =================================================================== */

.quiz-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: var(--s-7);
  max-width: 960px;
  margin: 0 auto;
}

/* Questão no reveal */
.quiz-reveal__question {
  font-size: var(--fs-h2);
  font-weight: 600;
  text-align: center;
  color: var(--qz-ink);
  margin: 0;
  text-wrap: balance;
}

/* Barras de resposta */
.quiz-reveal__bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Linha da barra */
.quiz-reveal__bar-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: var(--qz-surface);
  border-radius: 12px;
  border: 1px solid var(--rule);
  animation: qz-fadeInUp 0.4s var(--ease-out) both;
}

/* Animação escalonada das barras */
.quiz-reveal__bar-row:nth-child(1) { animation-delay: 0.1s; }
.quiz-reveal__bar-row:nth-child(2) { animation-delay: 0.2s; }
.quiz-reveal__bar-row:nth-child(3) { animation-delay: 0.3s; }
.quiz-reveal__bar-row:nth-child(4) { animation-delay: 0.4s; }

/* Resposta correta destacada */
.quiz-reveal__correct {
  border-color: var(--qz-accent);
  background: color-mix(in srgb, var(--qz-accent) 6%, var(--qz-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--qz-accent) 25%, transparent);
}

/* Label com ícone de forma */
.quiz-reveal__bar-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: 15px;
  color: var(--qz-ink);
}

/* Letra com cor do tile */
.quiz-reveal__bar-letter {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.quiz-reveal__bar-letter--a {
  background: var(--qz-tile-a);
  color: var(--qz-tile-a-text);
}

.quiz-reveal__bar-letter--b {
  background: var(--qz-tile-b);
  color: var(--qz-tile-b-text);
}

.quiz-reveal__bar-letter--c {
  background: var(--qz-tile-c);
  color: var(--qz-tile-c-text);
}

.quiz-reveal__bar-letter--d {
  background: var(--qz-tile-d);
  color: var(--qz-tile-d-text);
}

/* Forma (compatibilidade) */
.quiz-reveal__bar-shape {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Check SVG da resposta correta */
.quiz-reveal__check {
  display: inline-flex;
  align-items: center;
  color: var(--qz-accent);
}

.quiz-reveal__check svg {
  width: 20px;
  height: 20px;
}

/* Track da barra */
.quiz-reveal__bar-track {
  height: 32px;
  background: var(--bg-soft);
  border-radius: var(--r-1);
  overflow: hidden;
  position: relative;
}

/* Preenchimento animado da barra */
.quiz-reveal__bar-fill {
  height: 100%;
  border-radius: var(--r-1);
  display: flex;
  align-items: center;
  padding-left: var(--s-3);
  font-size: var(--fs-small);
  font-weight: 600;
  min-width: fit-content;
  transition: width var(--t-slow) var(--ease-out);
}

/* Estatísticas */
.quiz-reveal__stats {
  font-size: var(--fs-body);
  color: var(--qz-ink-soft);
  text-align: center;
}


/* ===================================================================
 * 13. ANIMAÇÕES — Keyframes
 * =================================================================== */

@keyframes qz-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes qz-fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes qz-scaleIn {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes qz-slideInLeft {
  0% {
    transform: translateX(-40px);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes qz-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes qz-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes qz-timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes qz-countUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes qz-playerEnter {
  0% {
    transform: scale(0) rotate(-8deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes qz-confetti1 {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

@keyframes qz-confetti2 {
  0% {
    transform: translateY(0) rotate(0) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(-540deg) translateX(-40px);
    opacity: 0;
  }
}

@keyframes qz-confetti3 {
  0% {
    transform: translateY(0) rotate(0) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(480deg) translateX(30px);
    opacity: 0;
  }
}

@keyframes qz-dotPulse {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}


/* ===================================================================
 * 14. RESPONSIVO
 * =================================================================== */

/* === Desktop grande (>1200px) === */
@media (min-width: 1200px) {
  .quiz-host__option {
    padding: var(--s-6) var(--s-7);
    min-height: 120px;
  }

  .quiz-host__option-text {
    font-size: 24px;
  }
}

/* === Tablet (768px–1024px) === */
@media (max-width: 1024px) {
  /* Admin empilhado */
  .quiz-admin {
    grid-template-columns: 1fr;
  }

  .quiz-admin__sidebar {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }

  .quiz-admin__question-list {
    flex-direction: row;
    overflow-x: auto;
  }

  .quiz-admin__question-item {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .quiz-host__options {
    gap: var(--s-3);
  }

  .quiz-podium__places {
    gap: var(--s-3);
  }
}

/* === Mobile (<768px) === */
@media (max-width: 768px) {
  .quiz-container {
    padding-inline: var(--s-4);
    padding-block: var(--s-5);
  }

  /* Login — tela cheia */
  .quiz-login__card {
    padding: var(--s-6) var(--s-5);
    max-width: 100%;
    border-radius: var(--r-3);
  }

  /* Admin — 1 coluna de alternativas */
  .quiz-admin {
    padding: var(--s-4);
  }

  .quiz-admin__alternatives {
    grid-template-columns: 1fr;
  }

  /* Host — opções menores */
  .quiz-host {
    padding: var(--s-4);
  }

  .quiz-host__question {
    font-size: clamp(22px, 5vw, 32px);
    margin: var(--s-4) auto var(--s-5);
  }

  .quiz-host__timer {
    width: 90px;
    height: 90px;
  }

  .quiz-host__timer-svg {
    width: 90px;
    height: 90px;
  }

  .quiz-host__timer-text {
    font-size: 28px;
  }

  .quiz-host__options {
    gap: var(--s-2);
  }

  .quiz-host__option {
    padding: var(--s-4);
    min-height: 80px;
    gap: var(--s-3);
  }

  .quiz-host__option-text {
    font-size: 16px;
  }

  /* Player — touch targets maiores */
  .quiz-player {
    padding: var(--s-3);
  }

  .quiz-player__options {
    gap: var(--s-2);
  }

  .quiz-player__option {
    min-height: 80px;
    font-size: 16px;
  }

  /* Resultado — card menor */
  .quiz-result__card {
    padding: var(--s-6);
  }

  /* Pódio */
  .quiz-podium__place {
    padding: var(--s-4) var(--s-5);
  }

  .quiz-podium__place--1 {
    min-height: 200px;
  }

  .quiz-podium__place--2 {
    min-height: 150px;
  }

  .quiz-podium__place--3 {
    min-height: 120px;
  }

  /* Leaderboard */
  .quiz-leaderboard__row {
    padding: 12px 16px;
    gap: 12px;
  }
}

/* === Mobile pequeno (<480px) === */
@media (max-width: 480px) {
  /* Opções em 1 coluna */
  .quiz-player__options {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .quiz-player__option {
    min-height: 64px;
  }

  /* Host também pode precisar de 1 coluna em telas muito pequenas */
  .quiz-host__options {
    grid-template-columns: 1fr;
  }

  .quiz-host__option {
    min-height: 64px;
  }

  /* Lobby: código menor */
  .quiz-lobby__code {
    font-size: clamp(32px, 8vw, 56px);
    padding: var(--s-4) var(--s-5);
    letter-spacing: 0.15em;
  }

  /* Avatar picker em 4 colunas */
  .quiz-avatar-picker__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Pódio em coluna */
  .quiz-podium__places {
    flex-wrap: wrap;
    gap: var(--s-3);
  }

  .quiz-podium__place {
    min-width: 100px;
  }
}


/* ===================================================================
 * 15. UTILITÁRIOS
 * =================================================================== */

/* Esconder visualmente */
.qz-hidden {
  display: none !important;
}

/* Acessível apenas para leitores de tela */
.qz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ===================================================================
 * 16. ACESSIBILIDADE — Movimento reduzido
 * =================================================================== */

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

  /* Esconder confete completamente */
  .quiz-podium__confetti {
    display: none;
  }
}