/* The independent audience stage keeps the existing public-only payload. */
body.audience {
  --tv: #0e2923;
  --tv2: #173e35;
  --stage-gold: #e9d9b5;
  --stage-muted: #bed0c6;
  background: var(--tv);
  color: #fcf9f2;
}

.audience .audience-surface {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  padding: clamp(24px, 3.4vh, 42px) clamp(24px, 3.4vw, 64px);
  background:
    radial-gradient(ellipse at 50% 0, #e9d9b50b, transparent 58%),
    #0e2923;
  color: #fcf9f2;
}

.audience .audience-header {
  width: 100%;
  min-height: 48px;
  gap: 24px;
  margin-bottom: 24px;
}

.audience .audience-header .brand {
  gap: 14px;
  color: var(--stage-gold);
  font: 400 40px/1.3 Amiri, serif;
}

.audience .audience-header .brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 52px;
  border: 1px solid #e9d9b52b;
  border-radius: 13px;
  background: #e9d9b508;
}

.audience .audience-header .brand-mark svg {
  width: 27px;
  height: 34px;
}

.audience .audience-header > strong {
  max-width: 58%;
  color: #d6e0d9;
  font: 500 clamp(17px, 1.3vw, 25px)/1.7 Noto, Tahoma, sans-serif;
  text-align: center;
}

.audience .audience-header .button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #e9d9b536;
  border-radius: 10px;
  background: transparent;
  color: var(--stage-gold);
  font-size: 14px;
  font-weight: 500;
}

.audience .audience-header .button:hover {
  background: #e9d9b512;
  border-color: #e9d9b570;
}

.audience .audience-surface > .scoreboard {
  gap: 24px;
  margin-bottom: 24px;
}

.audience .score-row {
  position: relative;
  min-height: 132px;
  gap: 24px;
  padding: 20px 32px;
  border: 1px solid #bdd2c82e;
  border-radius: 18px;
  background: #173e35;
  color: #fcf9f2;
  box-shadow: 0 10px 32px #00150f1a;
}

.audience .score-row.current {
  padding: 19px 31px;
  border: 2px solid #d4b978;
  background: linear-gradient(110deg, #214c41, #183e34);
  box-shadow: 0 0 0 4px #e9d9b509, 0 12px 32px #00150f26;
}

.audience .score-row strong {
  color: #fcf9f2;
  font-size: clamp(24px, 2vw, 38px);
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.audience .score-row small {
  margin-top: 7px;
  color: var(--stage-muted);
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 1.5;
}

.audience .score-row.current small {
  color: var(--stage-gold);
}

.audience .score-row > b {
  color: #fcf9f2;
  font-size: clamp(60px, 5.4vw, 104px);
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.audience .score-row.current > b {
  color: var(--stage-gold);
}

.audience .audience-surface.question-view {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.audience .audience-question-scroll {
  min-height: 0;
  flex: 1;
  border: 1px solid #b9cfc227;
  border-radius: 22px;
  background: #15382f;
  box-shadow: 0 14px 44px #00150f26;
  scrollbar-color: #a79261 #15382f;
}

.audience .audience-question-scroll > .reference-card {
  min-height: 100%;
  padding: clamp(24px, 3.1vh, 38px) clamp(24px, 3.6vw, 70px);
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fcf9f2;
  justify-content: center;
}

.audience .reference-card .card-kicker {
  width: max-content;
  max-width: 100%;
  align-self: center;
  padding: 5px 16px;
  border: 1px solid #e9d9b529;
  border-radius: 999px;
  background: #e9d9b50b;
  color: #e9d9b5;
  font-size: clamp(15px, 1vw, 20px);
  font-weight: 500;
}

.audience .reference-card .question-title {
  margin: 0;
  color: #c8d8cf;
  font: 500 clamp(20px, 1.5vw, 28px)/1.65 Noto, Tahoma, sans-serif;
}

.audience .reference-card .question-text {
  color: #fcf9f2;
  font-size: clamp(42px, 4vw, 76px);
  line-height: 1.7;
}

.audience .reference-card .question-text.quran-text,
.audience .reference-card .question-text .quran-text {
  color: #fcf9f2;
  font-family: Hafs, Amiri, serif;
  font-size: clamp(48px, 4.5vw, 86px);
  line-height: 1.95;
}

.audience .reference-card.long-question .question-text {
  font-size: clamp(36px, 3.3vw, 64px);
  line-height: 1.75;
}

.audience .reference-card.long-question .question-text.quran-text,
.audience .reference-card.long-question .question-text .quran-text {
  font-size: clamp(40px, 3.65vw, 70px);
  line-height: 1.95;
}

.audience .reference-card.very-long-question .question-text {
  font-size: clamp(30px, 2.7vw, 52px);
  line-height: 1.8;
}

.audience .reference-card.very-long-question .question-text.quran-text,
.audience .reference-card.very-long-question .question-text .quran-text {
  font-size: clamp(34px, 3.05vw, 58px);
  line-height: 1.95;
}

.audience .question-instruction {
  margin-bottom: 14px;
  color: #d6e0d9;
  font-size: clamp(20px, 1.5vw, 28px);
  line-height: 1.7;
}

.audience .reference-card > small,
.audience .completion-hint {
  color: #c3d3c9;
  font-size: clamp(16px, 1.1vw, 21px);
}

.audience .quran-blank {
  border-color: #dcc48e;
  background: #e9d9b516;
  color: #f6e5bc;
}

.audience .answer {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid #e9d9b538;
}

.audience .answer-label {
  color: #e9d9b5;
  font-size: 20px;
}

.audience .answer-text {
  margin-top: 8px;
  color: #f3dcaa;
  font-size: clamp(38px, 3.4vw, 66px);
  line-height: 1.8;
}

.audience .answer-text.quran-text {
  color: #f3dcaa;
  font-family: Hafs, Amiri, serif;
  font-size: clamp(42px, 3.8vw, 74px);
  line-height: 1.95;
}

.audience .explanation {
  color: #d3dfd7;
  font-size: clamp(18px, 1.2vw, 23px);
  line-height: 1.9;
}

.audience .source-link {
  border: 1px solid #e9d9b52b;
  border-radius: 8px;
  background: #e9d9b50b;
  color: #d5dfd8;
  font-size: 16px;
}

.audience .narrator-option {
  border-color: #b9cfc240;
  background: #1e493d;
  color: #fcf9f2;
  font-size: clamp(28px, 2.3vw, 44px);
}

.audience .narrator-hint {
  border: 1px solid #e9d9b540;
  border-radius: 12px;
  background: #e9d9b510;
  color: #e9d9b5;
  font-size: clamp(23px, 1.65vw, 32px);
}

.audience .narrator-hint strong {
  font-size: clamp(28px, 2.3vw, 44px);
}

.audience .audience-meta {
  margin-bottom: 16px;
  color: #fcf9f2;
}

.audience .audience-meta strong {
  font-size: clamp(22px, 1.7vw, 32px);
  font-weight: 600;
}

.audience .audience-meta > span {
  color: #c7d7cc;
  font-size: clamp(16px, 1vw, 20px);
}

.audience .topics-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
  align-content: start;
}

.audience .topic-section > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 0;
  color: #e9d9b5;
  font-size: 21px;
  font-weight: 500;
}

.audience .topic-section > h2::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #e9d9b526;
}

.audience .topic-type {
  padding: 18px;
  border: 1px solid #bdd2c82e;
  border-radius: 18px;
  background: #173e35;
  color: #fcf9f2;
  box-shadow: 0 8px 26px #00150f14;
}

.audience .topic-type-heading {
  gap: 10px;
  margin-bottom: 14px;
}

.audience .topic-organized-board .topic-type-heading h3,
.audience .topic-type-heading h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fcf9f2;
  font-size: clamp(18px, 1.4vw, 26px);
  font-weight: 600;
}

.audience .topic-type-heading > span {
  color: #c2d4c8;
  font-size: 15px;
}

.audience .board-slot {
  min-height: 55px;
  padding: 8px 5px;
  gap: 4px;
  border: 1px solid #9dc0aa40;
  border-radius: 10px;
  background: #225043;
  color: #fcf9f2;
}

.audience .board-slot.available:hover {
  border-color: #9dc0aa40;
  background: #225043;
}

.audience .topic-organized-board .board-slot strong,
.audience .board-slot strong {
  font-size: clamp(15px, 1.05vw, 20px);
  font-weight: 500;
  line-height: 1.5;
}

.audience .board-slot small {
  color: #c6d7cc;
  font-size: 13px;
  line-height: 1.5;
}

.audience .board-slot.answered {
  border-color: #b9cfc224;
  background: #12332a;
  color: #a9c0b2;
}

.audience .board-slot.answered small {
  color: #bdd0c3;
}

.audience .board-slot.answered strong::after {
  color: #d6c594;
}

.audience .audience-footer {
  flex-shrink: 0;
  min-height: 32px;
  margin-top: 18px;
  padding-top: 4px;
  gap: 24px;
  color: #c3d3c9;
  font-size: clamp(15px, 1vw, 19px);
}

.audience .audience-footer .audience-time {
  padding: 4px 14px;
  border: 1px solid #e9d9b530;
  border-radius: 9px;
  background: #e9d9b50b;
  color: #f2dcad;
  font-size: clamp(20px, 1.5vw, 28px);
}

.audience .audience-footer .audience-time.expired {
  border-color: #e7b59d78;
  color: #ffd4bd;
}

.audience .audience-wait {
  justify-content: flex-start;
  gap: 0;
}

.audience .audience-wait > .audience-header {
  flex-shrink: 0;
}

.audience .audience-wait > .audience-header > span:last-child {
  color: #c8d8ce;
  font-size: 18px;
}

.audience .audience-wait > section {
  display: flex;
  flex: 1;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 24px 80px;
}

.audience .audience-wait > section > .brand-mark {
  display: grid;
  place-items: center;
  width: 132px;
  height: 150px;
  margin-bottom: 18px;
  border: 1px solid #e9d9b52b;
  border-radius: 32px;
  background: #e9d9b507;
  color: #e9d9b5;
}

.audience .audience-wait > section > .brand-mark svg {
  width: 72px;
  height: 100px;
}

.audience .audience-wait h1 {
  color: #fcf9f2;
  font: 400 clamp(60px, 6.2vw, 118px)/1.5 Amiri, serif;
}

.audience .audience-wait p {
  color: #e9d9b5;
  font-size: clamp(23px, 1.8vw, 34px);
}

.audience .audience-wait > section > span:last-child {
  margin-top: 28px;
  padding: 10px 24px;
  border: 1px solid #bdd2c82e;
  border-radius: 999px;
  color: #c4d5c9;
  font-size: 18px;
}

.audience .audience-surface.results-view {
  min-height: 100dvh;
}

.audience .winner-panel.audience-result {
  position: relative;
  width: 100%;
  min-height: 400px;
  gap: 4px;
  padding: 24px;
  border: 1px solid #e9d9b52b;
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 15%, #e9d9b510, transparent 65%), #13362c;
  color: #fcf9f2;
  text-align: center;
}

.audience .audience-result .winner-symbol {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin-bottom: 16px;
  border: 1px solid #e9d9b54d;
  border-radius: 50%;
  background: #e9d9b50b;
  color: #efd79f;
}

.audience .audience-result .winner-symbol svg {
  width: 62px;
  height: 62px;
  stroke-width: 1.3;
}

.audience .winner-panel.audience-result > p {
  color: #e9d9b5;
  font-size: clamp(22px, 1.7vw, 32px);
}

.audience .winner-panel.audience-result h1 {
  max-width: 100%;
  margin-block: 0;
  color: #fcf9f2;
  font: 400 clamp(64px, 6.1vw, 116px)/1.5 Amiri, serif;
}

.audience .audience-result > b {
  color: #f1d79f;
  font-size: clamp(58px, 5vw, 94px);
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.audience .audience-result > b > small {
  font-size: clamp(22px, 1.5vw, 28px);
  font-weight: 400;
}

.audience .winner-panel.audience-result > p:last-child {
  margin-top: 20px;
  color: #c6d7cc;
  font-size: clamp(18px, 1.3vw, 24px);
}

@media (max-width: 1399px) {
  .audience .audience-surface {
    padding: 24px 32px;
  }
  .audience .audience-header {
    margin-bottom: 20px;
  }
  .audience .score-row {
    min-height: 112px;
    padding: 16px 24px;
  }
  .audience .score-row.current {
    padding: 15px 23px;
  }
  .audience .score-row > b {
    font-size: 72px;
  }
  .audience .topics-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .audience .reference-card .question-text {
    font-size: 54px;
  }
  .audience .reference-card .question-text.quran-text,
  .audience .reference-card .question-text .quran-text {
    font-size: 62px;
  }
  .audience .reference-card.long-question .question-text {
    font-size: 46px;
  }
  .audience .reference-card.long-question .question-text.quran-text,
  .audience .reference-card.long-question .question-text .quran-text {
    font-size: 52px;
  }
  .audience .reference-card.very-long-question .question-text {
    font-size: 38px;
  }
  .audience .reference-card.very-long-question .question-text.quran-text,
  .audience .reference-card.very-long-question .question-text .quran-text {
    font-size: 44px;
  }
}

@media (max-width: 899px) {
  .audience .audience-surface {
    padding: 20px;
  }
  .audience .audience-header {
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .audience .audience-header .brand {
    font-size: 32px;
  }
  .audience .audience-header .brand-mark {
    width: 40px;
    height: 44px;
  }
  .audience .audience-header > strong {
    flex: 1;
    max-width: none;
    font-size: 16px;
  }
  .audience .audience-header .button {
    padding-inline: 10px;
    font-size: 12px;
  }
  .audience .audience-surface > .scoreboard {
    gap: 12px;
    margin-bottom: 16px;
  }
  .audience .score-row {
    min-height: 100px;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
  }
  .audience .score-row.current {
    padding: 13px 17px;
  }
  .audience .score-row strong {
    font-size: 21px;
  }
  .audience .score-row small {
    font-size: 13px;
  }
  .audience .score-row > b {
    font-size: 54px;
  }
  .audience .audience-question-scroll {
    border-radius: 16px;
  }
  .audience .audience-question-scroll > .reference-card {
    padding: 22px;
    gap: 12px;
  }
  .audience .reference-card .card-kicker {
    padding: 4px 12px;
    font-size: 14px;
  }
  .audience .reference-card .question-title {
    font-size: 19px;
  }
  .audience .reference-card .question-text {
    font-size: 44px;
  }
  .audience .reference-card .question-text.quran-text,
  .audience .reference-card .question-text .quran-text {
    font-size: 48px;
  }
  .audience .reference-card.long-question .question-text {
    font-size: 36px;
  }
  .audience .reference-card.long-question .question-text.quran-text,
  .audience .reference-card.long-question .question-text .quran-text {
    font-size: 40px;
  }
  .audience .reference-card.very-long-question .question-text {
    font-size: 30px;
  }
  .audience .reference-card.very-long-question .question-text.quran-text,
  .audience .reference-card.very-long-question .question-text .quran-text {
    font-size: 34px;
  }
  .audience .question-instruction {
    font-size: 20px;
  }
  .audience .topics-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .audience .topic-type {
    padding: 16px;
    border-radius: 14px;
  }
  .audience .topic-organized-board .topic-type-heading h3 {
    font-size: 20px;
  }
  .audience .topic-organized-board .board-slot strong {
    font-size: 16px;
  }
  .audience .audience-footer {
    gap: 12px;
    margin-top: 14px;
    font-size: 13px;
  }
  .audience .audience-footer .audience-time {
    font-size: 20px;
  }
  .audience .audience-wait > section {
    padding: 40px 8px;
  }
}

@media (max-width: 559px) {
  .audience .audience-surface {
    padding: 16px 12px;
  }
  .audience .audience-surface.question-view {
    min-height: 640px;
    height: 100dvh;
  }
  .audience .audience-header > strong {
    order: 3;
    flex-basis: 100%;
    font-size: 14px;
    text-align: start;
  }
  .audience .audience-header .button {
    margin-inline-start: auto;
  }
  .audience .score-row {
    flex-direction: column-reverse;
    gap: 4px;
    min-height: 132px;
    padding: 12px;
    text-align: center;
  }
  .audience .score-row.current {
    padding: 11px;
  }
  .audience .score-row strong {
    font-size: 18px;
  }
  .audience .score-row small {
    font-size: 11px;
    margin-top: 3px;
  }
  .audience .score-row > b {
    font-size: 48px;
  }
  .audience .audience-question-scroll > .reference-card {
    padding: 20px 14px;
  }
  .audience .reference-card .question-text {
    font-size: 34px;
  }
  .audience .reference-card .question-text.quran-text,
  .audience .reference-card .question-text .quran-text {
    font-size: 40px;
  }
  .audience .reference-card.long-question .question-text {
    font-size: 30px;
  }
  .audience .reference-card.long-question .question-text.quran-text,
  .audience .reference-card.long-question .question-text .quran-text {
    font-size: 34px;
  }
  .audience .reference-card.very-long-question .question-text {
    font-size: 27px;
  }
  .audience .reference-card.very-long-question .question-text.quran-text,
  .audience .reference-card.very-long-question .question-text .quran-text {
    font-size: 30px;
  }
  .audience .answer-text,
  .audience .answer-text.quran-text {
    font-size: 34px;
  }
  .audience .topics-board {
    grid-template-columns: 1fr;
  }
  .audience .audience-meta {
    gap: 6px;
  }
  .audience .audience-meta strong {
    font-size: 22px;
  }
  .audience .audience-meta > span {
    font-size: 14px;
  }
  .audience .audience-footer {
    flex-wrap: wrap;
    gap: 8px;
  }
  .audience .audience-wait > section > .brand-mark {
    width: 100px;
    height: 116px;
    border-radius: 24px;
  }
  .audience .audience-wait h1 {
    font-size: 62px;
  }
  .audience .audience-wait p {
    font-size: 21px;
  }
  .audience .audience-wait > section > span:last-child {
    padding: 10px 16px;
    font-size: 14px;
  }
  .audience .winner-panel.audience-result {
    min-height: 380px;
    padding: 24px 14px;
  }
  .audience .winner-panel.audience-result h1 {
    font-size: 58px;
  }
  .audience .audience-result > b {
    font-size: 56px;
  }
}

@media (max-height: 780px) and (min-width: 900px) {
  .audience .audience-surface.question-view {
    padding-block: 20px;
  }
  .audience .question-view > .audience-header {
    margin-bottom: 16px;
  }
  .audience .question-view > .scoreboard {
    margin-bottom: 16px;
  }
  .audience .question-view .score-row {
    min-height: 100px;
    padding-block: 12px;
  }
  .audience .question-view .score-row.current {
    padding-block: 11px;
  }
  .audience .question-view .score-row > b {
    font-size: 68px;
  }
  .audience .audience-question-scroll > .reference-card {
    padding-block: 20px;
    gap: 12px;
  }
  .audience .question-view .audience-footer {
    margin-top: 12px;
  }
}

/* After reveal, keep both the original prompt and the answer in view. */
@media (max-height: 850px) and (min-width: 1100px) {
  .audience .audience-surface.board-view {
    padding: 16px 24px;
  }
  .audience .board-view > .audience-header {
    min-height: 40px;
    margin-bottom: 12px;
  }
  .audience .board-view .audience-header .brand {
    font-size: 32px;
  }
  .audience .board-view .audience-header .brand-mark {
    width: 40px;
    height: 44px;
  }
  .audience .board-view > .scoreboard {
    gap: 16px;
    margin-bottom: 12px;
  }
  .audience .board-view .score-row {
    min-height: 88px;
    padding: 12px 20px;
  }
  .audience .board-view .score-row.current {
    padding: 11px 19px;
  }
  .audience .board-view .score-row > b {
    font-size: 60px;
  }
  .audience .board-view .score-row strong {
    font-size: 25px;
  }
  .audience .board-view .score-row small {
    margin-top: 3px;
    font-size: 13px;
  }
  .audience .board-view > .audience-meta {
    margin-bottom: 8px;
  }
  .audience .board-view .audience-meta strong {
    font-size: 22px;
  }
  .audience .board-view .topics-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 12px;
  }
  .audience .board-view .topic-section > h2 {
    font-size: 17px;
    line-height: 1.6;
  }
  .audience .board-view .topic-type {
    padding: 10px;
    border-radius: 12px;
  }
  .audience .board-view .topic-type-heading {
    margin-bottom: 8px;
  }
  .audience .board-view .topic-type-heading h3 {
    gap: 6px;
    font-size: 17px;
    line-height: 1.5;
  }
  .audience .board-view .topic-type-heading > span {
    font-size: 12px;
  }
  .audience .board-view .topic-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .audience .board-view .board-slot {
    min-height: 44px;
    padding: 4px;
    gap: 2px;
    border-radius: 7px;
  }
  .audience .board-view .board-slot strong {
    font-size: 14px;
    line-height: 1.3;
  }
  .audience .board-view .board-slot small {
    font-size: 11px;
    line-height: 1.4;
  }
  .audience .board-view > .audience-footer {
    min-height: 28px;
    margin-top: 12px;
    font-size: 14px;
  }
}

@media (max-height: 850px) and (min-width: 900px) {
  .audience .audience-surface.results-view {
    padding-block: 20px;
  }
  .audience .results-view > .audience-header {
    margin-bottom: 16px;
  }
  .audience .results-view > .scoreboard {
    margin-bottom: 16px;
  }
  .audience .results-view .score-row {
    min-height: 100px;
    padding-block: 12px;
  }
  .audience .results-view .score-row.current {
    padding-block: 11px;
  }
  .audience .results-view .score-row > b {
    font-size: 68px;
  }
  .audience .winner-panel.audience-result {
    min-height: 0;
    padding: 20px;
  }
  .audience .audience-result .winner-symbol {
    width: 88px;
    height: 88px;
    margin-bottom: 10px;
  }
  .audience .audience-result .winner-symbol svg {
    width: 52px;
    height: 52px;
  }
  .audience .winner-panel.audience-result h1 {
    font-size: clamp(64px, 5.5vw, 84px);
    line-height: 1.35;
  }
  .audience .winner-panel.audience-result > p:last-child {
    margin-top: 12px;
  }
}

.audience .audience-question-scroll > .reference-card:has(> .answer) {
  gap: 10px;
  padding-block: 20px;
}

.audience .reference-card:has(> .answer) .card-kicker {
  padding-block: 3px;
  font-size: clamp(14px, .9vw, 18px);
}

.audience .reference-card:has(> .answer) .question-title {
  font-size: clamp(18px, 1.2vw, 23px);
}

.audience .reference-card:has(> .answer) .question-instruction {
  margin-bottom: 8px;
  font-size: clamp(18px, 1.2vw, 23px);
}

.audience .reference-card:has(> .answer) .question-text,
.audience .reference-card.long-question:has(> .answer) .question-text,
.audience .reference-card.very-long-question:has(> .answer) .question-text {
  font-size: clamp(28px, 2.5vw, 48px);
  line-height: 1.65;
}

.audience .reference-card:has(> .answer) .question-text.quran-text,
.audience .reference-card:has(> .answer) .question-text .quran-text,
.audience .reference-card.long-question:has(> .answer) .question-text.quran-text,
.audience .reference-card.long-question:has(> .answer) .question-text .quran-text,
.audience .reference-card.very-long-question:has(> .answer) .question-text.quran-text,
.audience .reference-card.very-long-question:has(> .answer) .question-text .quran-text {
  font-size: clamp(32px, 2.9vw, 56px);
  line-height: 1.8;
}

.audience .reference-card:has(> .answer) > .answer {
  margin-top: 6px;
  padding-top: 16px;
}

@media (prefers-contrast: more) {
  .audience .score-row,
  .audience .audience-question-scroll,
  .audience .topic-type,
  .audience .board-slot,
  .audience .winner-panel.audience-result {
    border-color: #aabeb0;
  }
  .audience .score-row.current {
    border-color: #ffdf9c;
  }
}

@media (forced-colors: active) {
  .audience .audience-surface,
  .audience .score-row,
  .audience .audience-question-scroll,
  .audience .topic-type,
  .audience .board-slot,
  .audience .winner-panel.audience-result {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }
  .audience .score-row.current {
    border: 2px solid Highlight;
  }
}