/* SHOT CLOCK trivia screens: question board, answer choices, reveal bars. */

/* projector: question */
.question { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .32fr); grid-template-rows: auto 1fr; gap: clamp(14px, 2vw, 32px); }
.q-top { grid-column: 1 / -1; }
.q-top .eyebrow span:first-child { margin-right: 14px; }
.q-text { margin: 10px 0 0; font: 800 clamp(34px, 4.4vw, 80px)/.98 var(--display); text-transform: none; letter-spacing: 0; text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 0%, #f3ede1 55%, #cfc6b4 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .03em #000; paint-order: stroke fill; filter: drop-shadow(2px 3px 0 var(--extrude-2)) drop-shadow(4px 8px 12px rgba(0,0,0,.6)); }
.q-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); align-content: center; }
.choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; min-height: clamp(70px, 12vh, 130px);
  padding: 14px 20px; border-radius: 14px; background: #000; border: 3px solid #2e281e; box-shadow: 6px 6px 0 #000;
  animation: cardIn .45s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i, 0) * 90ms);
}
.choice.typein { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.choice-letter { font: 700 clamp(32px, 3.6vw, 64px)/1 var(--led); color: var(--gold); text-shadow: 0 0 .25em color-mix(in srgb, var(--gold) 60%, transparent); min-width: 1.2em; text-align: center; }
.choice-text { font: 800 clamp(20px, 2.2vw, 40px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.q-side { display: grid; align-content: start; gap: 14px; }
.clock-wrap.compact { padding: clamp(12px, 2vh, 24px); }
.clock-wrap.compact .led { font-size: clamp(70px, 10vh, 150px); }

/* projector: reveal */
.reveal { display: grid; gap: 16px; align-content: center; max-width: 1400px; margin: 0 auto; width: 100%; }
.reveal .q-text { font-size: clamp(28px, 3.4vw, 60px); }
.rv-grid { display: grid; gap: 10px; }
.rv-grid .choice { grid-template-columns: auto minmax(0, .45fr) minmax(0, 1fr) auto; min-height: 64px; animation-name: cardIn; }
.rv-grid .choice.right { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, #000); box-shadow: 6px 6px 0 #000, 0 0 50px color-mix(in srgb, var(--gold) 45%, transparent); }
.rv-grid .choice.wrong { opacity: .6; }
.rv-grid .choice.right .choice-letter { color: #fff3c4; }
.choice-bar { height: 16px; border-radius: 999px; background: #1a1712; overflow: hidden; }
.choice-bar i { display: block; height: 100%; background: #6b6250; transition: width 1s cubic-bezier(.2, 1, .3, 1); }
.choice.right .choice-bar i { background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.choice-n { font: 700 clamp(22px, 2vw, 36px)/1 var(--led); color: var(--muted); min-width: 1.6em; text-align: right; }
.choice.right .choice-n { color: var(--gold); }
.rv-explain { margin: 0; font-size: clamp(16px, 1.4vw, 24px); color: var(--text); }
.rv-fast { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fast-chip { font: 800 clamp(16px, 1.4vw, 24px)/1 var(--display); text-transform: uppercase; letter-spacing: .03em; padding: 10px 14px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); box-shadow: 3px 3px 0 #000; }
.board.secret .slot-text { color: #5c5343; letter-spacing: .2em; }
.board.secret .slot.hit .slot-text { color: var(--gold-ink); letter-spacing: .02em; }

/* trivia standings */
body.trivia-results .place-media.score { display: grid; place-items: center; background: radial-gradient(rgba(220, 174, 69, .09) 1.2px, transparent 1.6px) 0 0 / 9px 9px, #000; }
body.trivia-results .place-media::before { padding-top: 60%; }
body.trivia-results .p1 .place-media::before { padding-top: 70%; }
.score-big { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(48px, 6vw, 110px)/1 var(--led); color: var(--gold); text-shadow: 0 0 .05em #fff3c4, 0 0 .25em color-mix(in srgb, var(--gold) 70%, transparent); }

/* students */
.trivia { gap: 14px; }
.tv-q { font-size: clamp(26px, 7vw, 40px) !important; text-transform: none !important; letter-spacing: 0 !important; transform: none !important; }
.tv-choices { display: grid; gap: 10px; }
.tv-choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; text-align: left; min-height: 64px;
  padding: 12px 16px; border-radius: 12px; background: #000; border: 3px solid #2e281e; color: var(--text); cursor: pointer;
  font: 800 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; transition: transform .1s, border-color .1s;
}
.tv-choice:not(:disabled):hover { border-color: var(--gold); transform: translateY(-2px); }
.tv-choice:disabled { cursor: default; opacity: .55; }
.tv-choice.picked { border-color: var(--gold); opacity: 1; }
.tv-choice.right { border-color: var(--ok); opacity: 1; background: color-mix(in srgb, var(--ok) 14%, #000); }
.tv-choice.picked.wrong { border-color: var(--rec); }
.tv-choice .choice-letter { font-size: 26px; }
.tv-typein { display: grid; gap: 10px; }
.tv-typein input { font-size: 22px; min-height: 60px; }
@media (min-width: 900px) {
  .trivia { max-width: 760px; margin: 0 auto; }
  .tv-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-choice { min-height: 84px; font-size: 24px; }
}
@media (max-width: 900px) {
  .question { grid-template-columns: minmax(0, 1fr); }
  .q-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .choice { animation: none; } }

.reveal { position: relative; isolation: isolate; }
body[data-screen=reveal] .beams { display: none; }