/* Readability contract. Load LAST on every game route, after legacy theme CSS.
   Sizes belong to the task, not to the viewport: phones reflow instead of
   shrinking the question. Painted art, hidden labels and game state are intact. */
@font-face {
  font-family: 'Game Night Nunito';
  src: url('./assets/fonts/nunito-sans-latin-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Game Night Lora';
  src: url('./assets/fonts/lora-latin-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  font-size: 100%;
  --ui-font: 'Game Night Nunito', 'Avenir Next', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-display-font: 'Game Night Lora', Georgia, serif;
  --ui-body: 1.25rem;
  --ui-nav: 1.125rem;
  --ui-support: 1rem;
  --ui-question: clamp(2.25rem, 2.8vw, 2.5rem);
  --ui-answer: clamp(1.5rem, 1.8vw, 1.625rem);
  --ui-control: 3.25rem;
  --ui-answer-height: 5.25rem;
  --ui-focus: #12618a;
  --ui-ink: #203744;
  --ui-muted: #495a60;
  --ui-paper: #fffbf1;
  --ui-edge: #8b795e;
}
html.magical-night,
body.magical-secondary {
  --font: var(--ui-font);
  --sans: var(--ui-font);
  --serif: var(--ui-display-font);
  --magic-body: var(--ui-font);
  --magic-serif: var(--ui-display-font);
  --ms-body: var(--ui-font);
  --ms-serif: var(--ui-display-font);
}
html.magical-night body,
body.magical-secondary,
body {
  font-family: var(--ui-font);
  font-size: var(--ui-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
html body :is(button, input, select, textarea, summary) {
  font-family: var(--ui-font);
  line-height: 1.45;
  letter-spacing: normal;
}
/* Native text fields are never reduced by the old player/mobile rules. */
html body input:not([type='checkbox']):not([type='radio']):not([type='range']),
html body select,
html body textarea {
  min-width: 0;
  max-width: 100%;
  min-height: var(--ui-control);
  font-size: var(--ui-nav) !important;
  padding: .75rem .875rem;
  box-sizing: border-box;
}
html body textarea { min-height: 7rem; }
html body :is(button, a, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px #fffaf1;
}
html body :is(button, a, summary) { touch-action: manipulation; }
html body :is(button, summary) { white-space: normal; }
html body :is(p, h1, h2, h3, label, summary) { overflow-wrap: break-word; }
html body :is(main, section, article, aside, form, fieldset) { min-width: 0; }
html body :is(input[type='checkbox'], input[type='radio']) {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
  flex: 0 0 1.5rem;
}

/* Navigation and utilities retain full labels at every width. */
html.magical-night .site-header .header-actions :is(.text-button, .small-button),
html.magical-night .magical-play-shell .game-actions .small-button,
html.magical-night .quick-game-links .small-button,
html.magical-night .studio-quick-edits .small-button,
html.magical-night .setup-step-heading .small-button,
html.magical-night :is(.magical-group-button, .studio-sound-button),
html.magical-night .setup-flow-card :is(.add-player, .secondary-button),
html.magical-night :is(.small-button, .read-button, .pass-button, .secondary-button),
body.magical-secondary :is(.small-button, .secondary, .progress-link, .family-link, .back-link),
body.magical-secondary .play-top button,
body.magical-spelling .practice-top .small-button,
body.magical-spelling .page-heading .small-button,
body.magical-online :is(.room-entry-link, .room-buttons button, .room-combined-shortcut),
body.magical-online .room-sharing button,
body.magical-online #room-question :is(.primary, .secondary),
.painted-topic-gallery :is(button, summary),
.hub-nav :is(a, button),
.hub-actions :is(a, button) {
  font-size: var(--ui-nav);
  font-weight: 700;
  line-height: 1.4;
  min-height: var(--ui-control);
  height: auto;
  padding: .75rem 1rem;
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}
html body #all-topic-tray button {
  font-size: var(--ui-nav);
  min-height: var(--ui-control);
  padding: .75rem 1rem;
  white-space: normal;
}
html.magical-night .site-header .header-actions .icon-button,
html.magical-night :is(.close-button, .close-info),
body.magical-secondary :is(.close-button, .dialog-heading > button),
body.magical-online #room-question .room-clue-top button {
  width: var(--ui-control);
  min-width: var(--ui-control);
  height: var(--ui-control);
  min-height: var(--ui-control);
  flex-shrink: 0;
  padding: .5rem;
  font-size: 1.5rem;
}
html.magical-night .site-header .brand,
body.magical-secondary .site-header .back-link,
body.magical-online .online-site-header > span { font-size: var(--ui-nav); line-height: 1.45; }
body.magical-secondary :is(.family-link, .back-link) { display: inline-flex; align-items: center; }
html.magical-night .primary-button,
html.magical-night .start-button,
body.magical-secondary :is(.primary, .primary-button, .big-start, .next-button, .next-clue),
body.magical-online .room-start {
  font-family: var(--ui-font);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.4;
  min-height: 3.5rem;
  white-space: normal;
}
html.magical-night .lobby-showcase .instant-play-note,
html.magical-night .lobby-showcase .night-hero-description,
body.magical-secondary .intro :is(p, .hint),
body.magical-spelling .welcome-copy > p {
  font-size: var(--ui-body) !important;
  line-height: 1.65;
}
html.magical-night .lobby-showcase .magical-ticket-title { font-size: 2rem; }
html.magical-night .lobby-showcase .studio-devices-button strong { font-size: 1.5rem; }
html.magical-night .studio-quick-edits .small-button span { font-size: var(--ui-nav); }
html.magical-night .studio-quick-edits .small-button small { font-size: var(--ui-support); }

/* Meaningful labels and descriptions are text, not decorative microcopy. */
html.magical-night :is(.field-label, .section-label, .setup-name-field > span, .setup-step-status),
html.magical-night .studio-quick-rounds label,
html.magical-night .setup-profile-wrap .setup-profile-select,
html.magical-night .setup-difficulty-row .player-challenge,
html.magical-night .audio-setting label,
html.magical-night .setup-advanced > summary,
html.magical-night .optional-registration > summary,
body.magical-secondary :is(label, .name-field, .check-field),
body.magical-online :is(.room-panel label, .room-player-row label, .room-sharing label),
body.magical-online .room-screen-options label,
body.magical-online :is(.room-device-choice strong, .room-start-steps strong),
.topic-gallery-toolbar label,
.category-browse-controls label {
  font-size: var(--ui-nav);
  line-height: 1.5;
  font-weight: 650;
}
html.magical-night :is(.setup-step-content > p, .setup-note, .profile-sync-note),
html.magical-night :is(.magical-ticket-detail, .magical-ticket-stub, .magical-cast-level, .magical-cast-edit),
html.magical-night :is(.tonight-topic-action, .night-hero-perks > span, .quick-game-links, [data-setup-summary]),
html.magical-night :is(.studio-devices-button small, .studio-sound-note, .category-fallback-note),
html.magical-night :is(.magical-section-heading > p, .lobby-link-heading p, #rounds-help),
html.magical-night :is(.family-card-copy small, .mini-route-card small),
body.magical-secondary :is(.hint, .status, .notice, .save-note, .tracking-note, .settings-note),
body.magical-secondary :is(.play-name, .turn-line, .topic-name, .progress-links, .progress-strip span),
body.magical-secondary :is(.game-card .description, .learner-profile-bar, .section-title > span),
body.magical-online :is(.room-hint, .room-connection, .room-profile-sync, .room-start-steps span),
body.magical-online :is(.room-device-choice small, .claim-player small, .room-current-topics li),
body.magical-online #room-customize > summary small,
html body :is(.topic-gallery-intro, .topic-gallery-matches, .topic-gallery-footer p, #all-topic-notice),
html body :is(.site-footer, footer, figcaption, .zoom-photo-question > figcaption) {
  font-size: var(--ui-support);
  line-height: 1.6;
  letter-spacing: normal;
}
/* These five legacy descriptions used !important to lock in tiny font sizes. */
html body :is(.topic-gallery-intro, .topic-gallery-footer p, .profile-compare-note,
  .profile-achievement p, .profile-connect-section p, .profile-private-connection p,
  .profile-medal-policy, .profile-medal-scope, .painted-avatar-group-heading p, .studio-sound-note) {
  font-size: var(--ui-support) !important;
  line-height: 1.6;
}
html.magical-night .studio-sound-header p { font-size: var(--ui-body); line-height: 1.6; }
body.magical-secondary .practice-score span,
body.magical-secondary .brand span,
body.magical-secondary .summary-stat small,
body.magical-spelling :is(.home-stats, .progress-summary article > span:last-child,
  .progress-explainer p, .tracking-note, .mode-progress-card > p,
  .mode-progress-card dl > div, .round-history p, .round-history li > div > span,
  .letter-score-table caption, .letter-score-table thead th, .letter-score-status,
  .letter-preview .letter-progress, .cosmetic-resets, .garden-legend, .toast) {
  font-size: var(--ui-support);
  line-height: 1.55;
}
body.magical-quiet .play-title { font-size: var(--ui-nav); }
html.magical-night :is(.eyebrow, .magical-kicker, .night-section-kicker, .magical-ticket-kicker),
body.magical-secondary .eyebrow {
  font-size: var(--ui-support);
  line-height: 1.5;
  letter-spacing: .035em;
  text-transform: none;
}

/* Topic and profile galleries: full text can wrap; image-only cast stays so. */
html body .topic-gallery-card .topic-gallery-copy strong {
  font-size: 1.25rem !important;
  line-height: 1.35;
}
html body .topic-gallery-card .topic-gallery-copy small {
  font-size: var(--ui-support) !important;
  line-height: 1.5;
}
html body :is(.topic-gallery-copy, .category-group .library-category small) {
  max-height: none;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  text-overflow: clip;
  overflow: visible;
}
html.magical-night .category-group .library-category strong,
html.magical-night .tonight-preview-topic strong,
html.magical-night .topic-swap .topic-swap-name,
body.magical-practice .topic,
body.magical-spelling .mode-card strong {
  font-size: 1.25rem;
  line-height: 1.4;
}
html.magical-night .category-group .library-category small,
body.magical-spelling .mode-card > span:not(.mode-icon):not(.card-arrow) {
  font-size: var(--ui-support);
  line-height: 1.55;
}
html body .profile-hub { font-size: var(--ui-body); line-height: 1.6; }
html body .profile-hub :is(label, .small-button, summary, .profile-medal-choice) { font-size: var(--ui-nav); }
html body .profile-hub :is(.profile-owned-totals, .profile-point-split, .profile-topic-medal,
  .profile-achievement > span, .profile-accuracy > span, .profile-owned-list article > span:last-child,
  .profile-medal-thresholds li) { font-size: var(--ui-support); line-height: 1.55; }
html body .profile-hub .small-button { min-height: var(--ui-control); }
html body .profile-hub :is(.profile-create-form, .profile-find-form, .profile-connect-form) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
html body .profile-private-connection input { overflow-wrap: anywhere; }
html body .painted-avatar-chooser .painted-avatar-search,
html body .painted-avatar-chooser .painted-avatar-controls,
html body .painted-avatar-chooser .painted-avatar-group-heading {
  font-size: var(--ui-nav);
  line-height: 1.5;
}
/* Do not set display, visibility or text size on .avatar-choice-label:
   the current chooser deliberately uses image-only portrait cards. */

/* A visible, readable scoreboard and turn cue, independent of its artwork. */
html.magical-night .magical-play-shell .turn-caption,
html.magical-night .magical-play-shell .turn-name-label,
html.magical-night .magical-play-shell .turn-round,
html.magical-night .magical-play-shell .turn-caption .level-chip,
body.magical-online .online-room-heading .room-turn-message {
  font-family: var(--ui-font);
  font-size: var(--ui-nav);
  line-height: 1.5;
}
html.magical-night .magical-play-shell .turn-round > strong { font-size: 1.5rem; }
html.magical-night .magical-play-shell .score-name,
body.magical-online .online-score-card strong { font-size: var(--ui-body); line-height: 1.4; }
html.magical-night .magical-play-shell :is(.score-level, .score-bonus, .score-caption),
html.magical-night .magical-play-shell :is(.studio-player-points small, .board-bottom, .studio-board-caption > span),
body.magical-online .online-score-card small,
body.magical-online .online-board-frame .studio-board-caption > span {
  font-size: var(--ui-support);
  line-height: 1.5;
}
html.magical-night .magical-play-shell .score-value,
body.magical-online .online-score-card b { font-size: 1.875rem; font-variant-numeric: tabular-nums; }
html.magical-night .magical-play-shell .category-cell,
body.magical-online .online-category strong,
body.magical-practice .board-column h2 span { font-size: var(--ui-nav); line-height: 1.4; }

/* Reading surfaces: main game, online room, practice, quiet and early learning. */
html.magical-night .magical-clue-dialog .question-heading,
html.magical-night .magical-clue-dialog.level-tiny .question-heading,
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-heading,
body.magical-online #room-question > h2,
body.magical-practice #practice-clue #clue-title,
body.magical-quiet .play-wrap .clue,
body.magical-spelling .practice-card h1 {
  font-family: var(--ui-font);
  font-size: var(--ui-question);
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: -.015em;
  max-width: 65ch;
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: normal;
  text-align: left;
}
html.magical-night .magical-clue-dialog .answer-option,
html.magical-night .magical-clue-dialog.level-tiny .answer-option,
html.magical-night .magical-clue-dialog.grocery-clue-dialog .answer-option,
body.magical-online #room-question .room-answer,
body.magical-practice #practice-clue .answer,
body.magical-quiet .play-wrap .answer {
  font-family: var(--ui-font);
  font-size: var(--ui-answer);
  font-weight: 650;
  line-height: 1.45;
  min-height: var(--ui-answer-height);
  height: auto;
  padding: 1rem 1.125rem;
  gap: 1rem;
  align-items: center;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
html.magical-night .magical-clue-dialog .answer-option > span:last-child { min-width: 0; }
html.magical-night .magical-clue-dialog .answer-letter,
html.magical-night .magical-clue-dialog.grocery-clue-dialog .answer-letter,
body.magical-online #room-question .room-answer > span,
body.magical-practice #practice-clue .choice-letter,
body.magical-quiet .play-wrap .answer .letter {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  font-family: var(--ui-font);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
}
html.magical-night .magical-clue-dialog :is(.question-player, .level-chip, .question-player strong),
html.magical-night .magical-clue-dialog .question-meta strong,
html.magical-night .magical-clue-dialog .question-value,
body.magical-online #room-question .room-clue-top strong,
body.magical-practice #practice-clue .clue-top {
  font-family: var(--ui-font);
  font-size: var(--ui-nav);
  line-height: 1.45;
}
html.magical-night .magical-clue-dialog .question-photo figcaption,
html.magical-night .magical-clue-dialog .question-photo figcaption span,
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-photo figcaption,
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-photo figcaption span {
  font-size: var(--ui-support);
  line-height: 1.55;
}
html.magical-night .magical-clue-dialog :is(.read-button, .pass-button, .question-tools button),
body.magical-practice #practice-clue :is(.show-answer, .next-clue),
body.magical-quiet .play-wrap :is(.show-answer button, .next-button) {
  font-size: var(--ui-nav);
  line-height: 1.4;
  min-height: var(--ui-control);
  padding: .75rem 1rem;
}
html.magical-night .magical-clue-dialog :is(.answer-feedback p, .learn-more p),
body.magical-online #room-question .room-answer-feedback p,
body.magical-practice #practice-clue .feedback p,
body.magical-quiet .play-wrap .feedback p {
  font-size: var(--ui-body);
  line-height: 1.65;
  max-width: 70ch;
}
html.magical-night .magical-clue-dialog :is(.learn-more summary, .source-link),
body.magical-online #room-question .room-answer-feedback a,
body.magical-practice #practice-clue :is(.feedback a, .clue-privacy),
body.magical-quiet .play-wrap .feedback a {
  font-size: var(--ui-support);
  line-height: 1.6;
}
html.magical-night .magical-clue-dialog :is(.question-heading, .answer-option, .question-player),
body.magical-online #room-question :is(h2, .room-answer, .room-clue-top),
body.magical-practice #practice-clue :is(#clue-title, .answer) { max-width: 100%; }
html.magical-night .magical-clue-dialog .question-options,
body.magical-online #room-question .room-answer-list,
body.magical-practice #practice-clue .answer-list,
body.magical-quiet .play-wrap .answer-list { gap: .875rem; }
/* Solid, contrasting decision surfaces; feedback remains visible with text. */
html.magical-night .magical-clue-dialog .answer-option,
body.magical-online #room-question .room-answer {
  color: var(--ui-ink);
  background: var(--ui-paper);
  border: 2px solid var(--ui-edge);
}
html.magical-night .magical-clue-dialog .answer-option.correct-answer,
body.magical-online #room-question .room-answer.right { color: #19432c; background: #e4f1df; border-color: #39724e; }
html.magical-night .magical-clue-dialog .answer-option.wrong-answer,
body.magical-online #room-question .room-answer.wrong { color: #6b3029; background: #fbe8e0; border-color: #a45b4e; }

/* The smaller games retain their large letter/picture teaching glyphs. */
body.magical-spelling .picture-choices .choice-label { font-size: var(--ui-answer); line-height: 1.4; }
body.magical-spelling :is(.gentle-instruction, .read-together, .feedback, .page-heading p,
  .shop-card p, .shop-card small, .mode-score-note, .round-history small) {
  font-size: var(--ui-support);
  line-height: 1.6;
}
body.magical-spelling :is(.shop-card button, .progress-actions button, .cosmetic-resets button) {
  font-size: var(--ui-nav);
  min-height: var(--ui-control);
}
body.magical-spelling .letter-flower > span:last-child { font-size: var(--ui-support); }
body.magical-spelling .wallet :is(strong, span) { font-size: var(--ui-nav); }
body.magical-spelling .progress-link { min-height: var(--ui-control); }

/* Text may grow naturally within an independently scrollable dialog. */
html.magical-night :is(.question-dialog, .info-dialog),
body.magical-secondary dialog {
  box-sizing: border-box;
  max-width: calc(100% - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 1.25rem;
}
html.magical-night .magical-clue-dialog,
body.magical-online #room-question { width: min(72rem, calc(100% - 2rem)); }
html body .info-header h2,
html body .dialog-heading h2 { font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1.25; }
html.magical-night .magical-finale-shell .result-person strong { font-size: 1.5rem; line-height: 1.35; }
html.magical-night .magical-finale-shell :is(.result-person small, .discovery-line) { font-size: var(--ui-support); line-height: 1.6; }

@media (max-width: 1000px) {
  :root { --ui-question: clamp(2rem, 3.8vw, 2.25rem); --ui-answer: 1.5rem; --ui-answer-height: 5rem; }
}
@media (max-width: 620px) {
  :root { --ui-question: clamp(1.75rem, 5.5vw, 1.875rem); --ui-answer: 1.375rem; --ui-answer-height: 4.5rem; }
  html.magical-night .magical-clue-dialog,
  body.magical-online #room-question { width: calc(100% - 1rem); max-width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  html.magical-night .magical-clue-dialog .question-options,
  html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-options,
  body.magical-online #room-question .room-answer-list,
  body.magical-practice #practice-clue .answer-list,
  body.magical-quiet .play-wrap .answer-list { grid-template-columns: minmax(0, 1fr); }
  html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-body { grid-template-columns: minmax(0, 1fr); }
  html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-photo,
  html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-options { grid-column: 1; }
  html.magical-night .magical-clue-dialog .question-top { min-height: 0; }
  html.magical-night .magical-clue-dialog .question-player { margin-bottom: 1rem; }
  html.magical-night .magical-clue-dialog .question-player strong { flex-wrap: wrap; }
  html.magical-night .magical-clue-dialog .question-heading { margin-bottom: 1.25rem; }
  html.magical-night .magical-clue-dialog .question-tools { flex-wrap: wrap; gap: .5rem; }
  html.magical-night .magical-clue-dialog .question-tools button { flex: 1 1 9rem; }
  html.magical-night .magical-clue-dialog .question-top > .level-chip { margin-left: 0; }
  html body .topic-gallery-toolbar,
  html body .category-browse-controls { grid-template-columns: minmax(0, 1fr); }
  html body .topic-gallery-card .topic-gallery-copy { padding-right: 1.125rem; }
  html body .profile-hub :is(.profile-owned-list, .profile-comparison-grid, .profile-compare-controls) { grid-template-columns: minmax(0, 1fr); }
  html body .profile-medal-grid { grid-template-columns: minmax(0, 1fr); }
  body.magical-secondary .inline-form { flex-wrap: wrap; }
  body.magical-secondary .inline-form button { white-space: normal; }
  body.magical-online .room-sharing { grid-template-columns: minmax(0, 1fr); }
  body.magical-online .room-sharing p { white-space: normal; }
  body.magical-online .room-panel .room-player-row { grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem; }
  body.magical-online .room-player-row > button[data-action='remove-player'] { min-width: 3rem; min-height: 3rem; }
  body.magical-spelling .picture-choices { grid-template-columns: minmax(0, 1fr); }
  body.magical-spelling .practice-card h1 { margin-right: 0; padding-right: 3rem; }
}

/* TV View is last and uses the SAME component specificity as standard mode.
   It cannot silently lose to a mobile/short-screen rule from a legacy sheet. */
html.tv-view,
html[data-text-size='large'] {
  --ui-body: 1.5rem;
  --ui-nav: 1.5rem;
  --ui-support: 1.25rem;
  --ui-question: 2.75rem;
  --ui-answer: 1.875rem;
  --ui-control: 3.75rem;
  --ui-answer-height: 6rem;
}
html.magical-night.tv-view .magical-clue-dialog .question-heading,
html.magical-night.tv-view .magical-clue-dialog.level-tiny .question-heading,
html.magical-night.tv-view .magical-clue-dialog.grocery-clue-dialog .question-heading,
html.tv-view body.magical-online #room-question > h2,
html.tv-view body.magical-practice #practice-clue #clue-title,
html.tv-view body.magical-quiet .play-wrap .clue,
html.tv-view body.magical-spelling .practice-card h1 { font-size: var(--ui-question); }
html.magical-night.tv-view .magical-clue-dialog .answer-option,
html.magical-night.tv-view .magical-clue-dialog.level-tiny .answer-option,
html.magical-night.tv-view .magical-clue-dialog.grocery-clue-dialog .answer-option,
html.tv-view body.magical-online #room-question .room-answer,
html.tv-view body.magical-practice #practice-clue .answer,
html.tv-view body.magical-quiet .play-wrap .answer { font-size: var(--ui-answer); min-height: var(--ui-answer-height); }
html.tv-view body.magical-spelling .picture-choices .choice-label { font-size: var(--ui-answer); }
html.magical-night.tv-view .magical-play-shell .game-actions .small-button,
html.magical-night.tv-view .site-header .header-actions .text-button { font-size: var(--ui-nav); min-height: var(--ui-control); }
html.tv-view body .profile-hub p { font-size: var(--ui-body) !important; }
html.tv-view body :is(.question-options, .room-answer-list, .answer-list) { grid-template-columns: minmax(0, 1fr); }

@media (forced-colors: active) {
  html body :is(button, input, select, textarea) { border: 2px solid ButtonText; }
  html body :is(button, a, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid Highlight !important; box-shadow: none; }
}