/* ==========================================================================
   css/projector.css - Modo Proyector, Alto Contraste y Escala Tipográfica
   ========================================================================== */

/* Niveles de tamaño tipográfico */
[data-font-size="normal"] {
  --font-size-root: 16px;
}

[data-font-size="large"] {
  --font-size-root: 19px;
}

[data-font-size="xlarge"] {
  --font-size-root: 22px;
}

[data-font-size="projector"] {
  --font-size-root: 26px;
}

/* Modo Proyector (pantalla gigante / presentación) */
body.projector-mode {
  --font-size-root: 26px;
  background-color: #000000;
  color: #ffffff;
}

body.projector-mode .app-container {
  max-width: 95vw;
}

body.projector-mode .card,
body.projector-mode .question-card {
  border-width: 2px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
  padding: 2.25rem;
}

body.projector-mode .team-pill {
  padding: 0.9rem 1.25rem;
  border-width: 3px;
}

body.projector-mode .team-pill-score {
  font-size: 2.2rem;
}

body.projector-mode .question-statement {
  font-size: 1.8rem;
  line-height: 1.45;
  font-weight: 700;
}

body.projector-mode .quien-dijo-quote {
  font-size: 2rem;
  padding: 1.75rem 2rem;
}

body.projector-mode .timer-display {
  width: 90px;
  height: 90px;
  font-size: 2.4rem;
  border-width: 6px;
}

body.projector-mode .btn-answer {
  padding: 1.4rem 1.75rem;
  font-size: 1.4rem;
  border-width: 3px;
}

body.projector-mode .solution-reveal {
  padding: 1.75rem 2rem;
  border-width: 4px;
}

body.projector-mode .solution-answer {
  font-size: 1.75rem;
}

body.projector-mode .solution-explanation {
  font-size: 1.3rem;
}

/* Responsive para pantallas muy grandes (1920px+) */
@media (min-width: 1920px) {
  :root {
    --font-size-root: 22px;
  }
  .app-container {
    max-width: 1800px;
  }
}

/* Responsive para móviles pequeños (360px - 480px) */
@media (max-width: 480px) {
  .scoreboard-bar {
    gap: 0.4rem;
  }
  .team-pill {
    min-width: 105px;
    padding: 0.5rem 0.4rem;
  }
  .team-pill-score {
    font-size: 1.25rem;
  }
  .question-card {
    padding: 1.15rem;
  }
  .question-statement {
    font-size: 1.2rem;
  }
  .answer-options-grid {
    grid-template-columns: 1fr;
  }
  .scoring-actions-bar {
    flex-direction: column;
    width: 100%;
  }
  .scoring-actions-bar .btn {
    width: 100%;
  }
}