/* 0.5.16 Quiz-only successor. Released assets remain immutable. */

.quiz-live-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
  overflow-anchor: none;
}
.quiz-live-stage, .quiz-live-top { min-width: 0; }
.quiz-live-top {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-surface-small);
  corner-shape: squircle;
  background: var(--page);
}
.quiz-top-title { font-size: 18px; margin: 0 0 var(--space-2); }
.quiz-live-final .quiz-live-stage { grid-column: 1 / -1; }
.quiz-live-final .quiz-live-top { display: none; }
.quiz-slide-card { display: grid; gap: var(--space-3); }
.quiz-slide-progress { color: var(--muted); font-size: 13px; font-weight: 720; }
.quiz-slide-card h2 { margin: 0; font-size: clamp(23px, 4vw, 34px); }
.quiz-slide-image {
  display: block;
  max-width: 100%;
  max-height: 430px;
  object-fit: contain;
  margin-inline: auto;
  border-radius: var(--radius-surface);
  corner-shape: squircle;
  background: var(--page);
}
.quiz-presentation-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-surface-large);
  corner-shape: squircle;
  background: #18131f;
}
.quiz-static-stage {
  position: absolute;
  inset: 0 auto auto 0;
  width: 960px;
  height: 540px;
  transform-origin: 0 0;
  background: #18131f;
  overflow: hidden;
}
.quiz-static-item { position: absolute; overflow: hidden; }
.quiz-static-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.quiz-static-text { overflow: visible; }
.quiz-static-text-inner {
  position: absolute;
  inset: 0 auto auto 0;
  display: inline-block;
  max-width: none;
  white-space: pre;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.08;
  color: #f4f0fb;
  transform-origin: 0 0;
}
.quiz-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-surface-small);
  corner-shape: squircle;
  background: var(--page);
  font-weight: 780;
}
.quiz-options-public { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.quiz-option-button {
  min-height: 66px;
  border: 1px solid var(--border);
  border-radius: var(--radius-action);
  corner-shape: squircle;
  background: var(--page);
  color: var(--text);
  padding: var(--space-3);
  font: inherit;
  font-weight: 760;
  display: grid;
  gap: var(--space-2);
  place-items: center;
  text-align: center;
}
.quiz-option-button img { max-width: 100%; max-height: 170px; object-fit: contain; }
button.quiz-option-button { cursor: pointer; }
button.quiz-option-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button.quiz-option-button:disabled { cursor: default; opacity: .72; }
.quiz-option-button.selected { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); }
.quiz-option-button.correct { border-color: var(--success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 18%, transparent); }
.quiz-option-button.wrong-selected { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 16%, transparent); }
.quiz-answer-status, .quiz-correct-answer {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-surface-small);
  corner-shape: squircle;
  background: var(--page);
}
.quiz-answer-status.correct { border-color: var(--success); }
.quiz-answer-status.incorrect { border-color: var(--danger); }
.quiz-correct-answer {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 11%, var(--card));
  color: var(--text);
  white-space: pre-line;
}
.quiz-text-answer { display: grid; gap: var(--space-2); }
.quiz-final { display: grid; gap: var(--space-3); min-width: 0; }
.quiz-ranking-wrap { max-width: 100%; overflow: visible; }
.quiz-ranking-wrap table { width: 100%; min-width: 0; table-layout: fixed; }
.quiz-final .quiz-ranking-wrap table { min-width: 0; width: 100%; table-layout: fixed; }
.quiz-option-readonly { cursor: default; }
.quiz-option-result { display: block; font-size: 12px; color: var(--text); font-weight: 800; }
.quiz-text-preview {
  padding: var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-technical);
  corner-shape: squircle;
  color: var(--muted);
}
.quiz-admin-preview { margin-block-end: var(--space-4); }
.quiz-room-grid { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.quiz-room-grid > * { min-width: 0; max-width: 100%; }
.quiz-session-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.quiz-session-controls form { min-width: 0; max-width: 100%; }
.quiz-session-controls button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.quiz-room-grid .table-wrap { min-width: 0; max-width: 100%; }
.quiz-session-current, .quiz-room-grid > .quiz-leaderboard, .quiz-final-screen .quiz-session-controls { display: none; }
.quiz-session-current.quiz-admin-current-visible { display: block; }
.quiz-admin-preview .quiz-live-layout { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
.quiz-admin-preview #quiz-live-stage .quiz-question-media-region {
  aspect-ratio: auto;
  block-size: clamp(120px, 12vw, 180px);
  min-height: 0;
}
.quiz-room-grid > div {
  display: flex;
  flex-direction: column;
}
.quiz-room-grid > div > .quiz-session-controls {
  order: -1;
}
@media (max-width: 900px) {
  .quiz-live-layout, .quiz-admin-preview .quiz-live-layout { grid-template-columns: 1fr; }
  .quiz-live-stage { order: 1; }
  .quiz-live-top { order: 2; }
  .quiz-options-public { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .quiz-live-top { padding: var(--space-2); }
  .quiz-final .quiz-ranking-wrap table { min-width: 0; width: 100%; table-layout: fixed; }
}

.quiz-admin-answers { width: 100%; min-width: 0; table-layout: fixed; }
.quiz-admin-answers th, .quiz-admin-answers td { white-space: normal; overflow-wrap: anywhere; }
.quiz-admin-answers th:nth-child(1) { width: 22%; }
.quiz-admin-answers th:nth-child(2) { width: 36%; }
.quiz-text-answer label { margin: 0; color: var(--muted); }
.quiz-text-answer input { width: 100%; min-width: 0; box-sizing: border-box; }
.quiz-answer-status, .quiz-correct-answer { min-width: 0; overflow-wrap: anywhere; }