/* Question UI owns normal flow; authored presentation canvases retain their geometry. */
.quiz-question-preview {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-rows: none;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}
.quiz-question-text { display: grid; gap: var(--space-2); min-width: 0; }
.quiz-question-extra, .quiz-question-title {
  min-width: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}
.quiz-question-extra { color: var(--muted); font-size: clamp(16px, 2vw, 24px); }
.quiz-question-title { font-size: clamp(18px, 2.6vw, 34px); font-weight: 850; line-height: 1.2; }
.quiz-question-media-region {
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(160px, 32vw, 360px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.quiz-question-media-region .quiz-question-media {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  object-fit: contain;
}
.quiz-question-answers { display: grid; gap: var(--space-2); min-width: 0; }
.quiz-question-answers .quiz-options-public,
.quiz-question-answers .quiz-choice-grid { min-width: 0; gap: var(--space-2); }
.quiz-option-button, .quiz-choice-preview {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
}
.quiz-option-button span, .quiz-choice-preview > div {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}
.quiz-stage-editor:has(.quiz-question-host:not([hidden]) > .quiz-question-preview),
.quiz-preview-stage:has(> .quiz-question-preview) {
  aspect-ratio: auto;
  overflow: visible;
  padding: var(--space-3);
  box-sizing: border-box;
}
.quiz-question-host:has(> .quiz-question-preview) { position: relative; inset: auto; min-width: 0; }
.quiz-workarea:has(.quiz-question-host:not([hidden]) > .quiz-question-preview) { align-items: start; }
.quiz-timer-preview { color: var(--muted); font-weight: 720; }
/* Thumbnails are summaries, not the editable question surface. */
.quiz-slide-mini:has(> .quiz-question-preview) { aspect-ratio: auto; background: var(--page); }
.quiz-slide-mini .quiz-question-preview { inset: auto; padding: 4px; box-sizing: border-box; gap: 4px; }
.quiz-slide-mini .quiz-question-text, .quiz-slide-mini .quiz-question-answers { gap: 4px; }
.quiz-slide-mini .quiz-question-extra { font-size: 7px; }
.quiz-slide-mini .quiz-question-media-region { height: 40px; }
.quiz-slide-mini .quiz-question-media-region .quiz-question-media { max-height: 100%; }
.quiz-slide-mini .quiz-timer-preview { font-size: 7px; }
.quiz-slide-mini .quiz-question-answers .quiz-choice-grid { gap: 4px; }

/* One ranking model: compact TOP list or full table with container-based mobile rows. */
.quiz-ranking-wrap { container: quiz-ranking / inline-size; width: 100%; min-width: 0; max-width: 100%; overflow: visible; }
.quiz-ranking-top { list-style: none; margin: 0; padding: 0; width: 100%; min-width: 0; max-width: 100%; }
.quiz-ranking-top li { display: grid; grid-template-columns: 2ch minmax(0, 1fr); gap: var(--space-2); min-width: 0; padding-block: var(--space-2); border-bottom: 1px solid var(--border); }
.quiz-ranking-top li:last-child { border-bottom: 0; }
.quiz-ranking-top .quiz-rank-place { color: var(--muted); }
.quiz-rank-nickname { min-width: 0; overflow-wrap: anywhere; word-break: normal; white-space: normal; }
.quiz-ranking-wrap .quiz-ranking-table { width: 100%; min-width: 0; table-layout: fixed; }
.quiz-ranking-table th, .quiz-ranking-table td { padding: var(--space-2); white-space: normal; }
.quiz-ranking-table th { overflow-wrap: normal; word-break: normal; }
.quiz-ranking-table th:nth-child(1) { width: 10%; }
.quiz-ranking-table th:nth-child(2) { width: 30%; }
.quiz-ranking-table th:nth-child(3) { width: 18%; }
.quiz-ranking-table th:nth-child(4) { width: 14%; }
.quiz-ranking-table th:nth-child(5) { width: 28%; }
.quiz-rank-place, .quiz-rank-score, .quiz-rank-correct, .quiz-rank-time { font-variant-numeric: tabular-nums; }
.quiz-rank-mobile-label { display: none; }
@container quiz-ranking (max-width: 600px) {
  .quiz-ranking-table, .quiz-ranking-table tbody { display: block; }
  .quiz-ranking-table thead { display: none; }
  .quiz-ranking-table tr {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
    gap: var(--space-1) var(--space-2);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--border);
  }
  .quiz-ranking-table td { border: 0; padding: 0; min-width: 0; width: auto; }
  .quiz-ranking-table .quiz-rank-place { grid-column: 1; grid-row: 1; }
  .quiz-ranking-table .quiz-rank-nickname { grid-column: 2 / 4; grid-row: 1; }
  .quiz-ranking-table .quiz-rank-score { grid-column: 4; grid-row: 1; text-align: end; }
  .quiz-ranking-table .quiz-rank-correct { grid-column: 2; grid-row: 2; color: var(--muted); }
  .quiz-ranking-table .quiz-rank-time { grid-column: 3 / 5; grid-row: 2; color: var(--muted); }
  .quiz-rank-mobile-label { display: inline; }
}
@media (max-width: 480px) {
  /* Preserve the local volatile live envelope, without fixing question text height. */
  .quiz-admin-preview #quiz-live-stage { min-height: 500px; }
}