/* Responsif: ponsel → tablet → desktop → layar proyektor. Dimuat setelah style.css dan board.css. */

/* ---- Dasar (ponsel): panel kuis tampil sebagai header di atas soal ---- */
.quiz { max-width: 680px; padding: 0; overflow: hidden; }
.quiz-side {
  background: var(--navy); color: #fff;
  padding: 20px 22px 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.quiz-side .eyebrow { color: var(--gold); width: 100%; }
.quiz-side .chip { background: rgba(255, 255, 255, 0.14); color: #fff; }
.quiz-side .q-count { margin: 0; font-weight: 700; font-size: 15px; }
.quiz-side .timer { color: #fff; border-color: rgba(255, 255, 255, 0.35); margin-left: auto; }
.quiz-side .timer.warn { color: #ffc2c2; border-color: #ffc2c2; }
.quiz-side .progress { flex-basis: 100%; background: rgba(255, 255, 255, 0.18); }
.quiz-side .progress span { background: var(--gold); }
.quiz-side .small.muted { color: #c9cbe6; margin: 0; flex-basis: 100%; font-size: 13px; }
.quiz-main { padding: 26px 22px 28px; }
.quiz-main .question { margin: 4px 0 18px; }
.quiz-main .feedback { min-height: 1.6em; }

/* ---- Tablet ---- */
@media (min-width: 768px) {
  .app { padding: 28px 28px 56px; }
  .card { max-width: 760px; }
  .narrow { max-width: 620px; }
  .quiz { max-width: 860px; }
  .quiz-side { padding: 28px 32px; }
  .quiz-side .q-count { font-size: 17px; }
  .quiz-main { padding: 36px 36px 40px; }
  .question { font-size: 28px; }
  .options { grid-template-columns: 1fr 1fr; gap: 12px; }
  .option { padding: 18px 18px; font-size: 17px; }
  .hero { padding: 56px 48px; }
  .hero h1 { font-size: 52px; max-width: 20ch; }
  .lb { padding: 32px 28px 24px; }
  .lb-block { font-size: 64px; }
  .lb-avatar { width: 76px; height: 76px; font-size: 24px; }
  .lb-podium { gap: 16px; }
  .rank-1 .lb-block { height: 240px; }
  .rank-2 .lb-block { height: 180px; }
  .rank-3 .lb-block { height: 140px; }
  .admin-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Desktop: kuis memenuhi layar, papan dua kolom ---- */
@media (min-width: 1100px) {
  body { font-size: 17px; }
  .app { max-width: 1440px; padding: 32px 48px 64px; }
  .topbar { margin-bottom: 28px; }
  .brand { height: 48px; }

  .hero { padding: 80px 72px; }
  .hero h1 { font-size: 68px; max-width: 16ch; }
  .hero .muted { font-size: 21px; }

  .quiz { max-width: none; min-height: calc(100vh - 170px); display: grid; grid-template-columns: 340px 1fr; }
  .quiz-side {
    flex-direction: column; align-items: flex-start; flex-wrap: nowrap;
    padding: 56px 40px; gap: 22px;
  }
  .quiz-side .eyebrow { width: auto; font-size: 13px; }
  .quiz-side .chip { font-size: 14px; padding: 6px 14px; }
  .quiz-side .q-count { font-size: 26px; font-weight: 800; }
  .quiz-side .timer { margin-left: 0; font-size: 30px; padding: 6px 16px; }
  .quiz-side .progress { flex-basis: auto; width: 100%; height: 8px; }
  .quiz-side .small.muted { font-size: 15px; }
  .quiz-main { padding: 72px 80px; display: flex; flex-direction: column; justify-content: center; }
  .quiz-main .question { font-size: 38px; line-height: 1.25; margin: 0 0 40px; max-width: 30ch; }
  .options { grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; }
  .option { padding: 26px 26px; font-size: 20px; border-radius: 16px; }
  .option .letter { width: 44px; height: 44px; font-size: 17px; }
  .option.selected, .option.correct, .option.wrong { padding: 25px 25px; }
  .feedback { font-size: 19px; margin-top: 24px; }
  .quiz-actions { max-width: 420px; }

  .card { max-width: 900px; }
  .narrow { max-width: 680px; }
  .lb { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 48px; padding: 40px 44px 36px; }
  .lb-head { grid-column: 1 / -1; }
  .lb-podium { grid-column: 1; grid-row: 2; margin-top: 32px; }
  .lb-list { grid-column: 2; grid-row: 2; margin-top: 32px; align-self: start; }
  .lb-empty { grid-column: 1 / -1; }
  .lb-block { font-size: 72px; }
  .lb-avatar { width: 84px; height: 84px; font-size: 26px; }
  .rank-1 .lb-block { height: 280px; }
  .rank-2 .lb-block { height: 210px; }
  .rank-3 .lb-block { height: 160px; }
  .lb-row { padding: 14px 18px; }
  .lb-row .lb-name { font-size: 16px; }
  .board-head { max-width: 1100px; margin-left: auto; margin-right: auto; }

  .stage-wrap { max-width: 1440px; padding: 36px 56px 64px; }
  .stage .lb { padding: 56px 56px 48px; }
  .stage .lb-title { font-size: 46px; }
  .stage .rank-1 .lb-block { height: 380px; font-size: 110px; }
  .stage .rank-2 .lb-block { height: 280px; font-size: 96px; }
  .stage .rank-3 .lb-block { height: 220px; font-size: 90px; }
  .stage .lb-avatar { width: 120px; height: 120px; font-size: 36px; }
  .stage .lb-name { font-size: 26px; max-width: 260px; }
  .stage .lb-row { padding: 20px 26px; }
  .stage .lb-row .lb-name { font-size: 22px; }
  .stage .lb-score { font-size: 30px; }
  .stage .lb-avatar.sm { width: 64px; height: 64px; font-size: 22px; }

  .admin-grid { grid-template-columns: 1fr 1fr; }
  .live-card, .sets-card, .list-admin { grid-column: 1 / -1; }
  .form-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- Layar sangat lebar / proyektor ---- */
@media (min-width: 1600px) {
  body { font-size: 19px; }
  .app { max-width: 1760px; }
  .stage-wrap { max-width: 1760px; }
  .quiz { grid-template-columns: 400px 1fr; }
  .quiz-main .question { font-size: 44px; }
  .option { font-size: 22px; }
  .lb-title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Admin: set soal ---- */
.set-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 10px;
}
.set-row.is-off { opacity: 0.6; }
.set-info h3 { margin: 0 0 2px; font-size: 16px; }
#form-set { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
#form-set input { max-width: 340px; }
#form-set .btn-primary { margin-top: 0; }
.actions select, .field select { width: auto; min-width: 180px; }
.field select { width: 100%; min-width: 0; }

/* ---- Mode kuis: tampil penuh layar, tanpa header dan tanpa bingkai kartu ---- */
body[data-view="quiz"] .app { max-width: none; padding: 0; }
body[data-view="quiz"] .topbar { display: none; }
body[data-view="quiz"] .quiz {
  max-width: none; width: 100%;
  min-height: 100vh; min-height: 100dvh;
  border: 0; border-radius: 0; box-shadow: none;
}
@media (min-width: 1100px) {
  body[data-view="quiz"] .quiz { grid-template-columns: 38% 1fr; }
  body[data-view="quiz"] .quiz-side { padding: 72px 56px; }
  body[data-view="quiz"] .quiz-main { padding: 96px 120px; }
  body[data-view="quiz"] .quiz-main .question { font-size: 46px; max-width: 26ch; margin-bottom: 48px; }
  body[data-view="quiz"] .options { max-width: 1080px; }
  body[data-view="quiz"] .option { padding: 28px; font-size: 21px; }
}