/* Enchanted Quiz Theatre. Deliberately scoped to trivia; HOME and world art keep
   their own motion, lighting, type and input behavior. */
html.magical-night .trivia-theatre {
  --theatre-ink: #fdf4df;
  --theatre-muted: #d1d7ed;
  --theatre-edge: #a8bcef4a;
  position: relative;
  isolation: isolate;
  max-width: 1540px;
  margin: 10px auto 30px;
  padding: clamp(18px, 2.3vw, 32px);
  border: 1px solid #b3c3fb52;
  border-radius: 28px;
  color: var(--theatre-ink);
  background: radial-gradient(ellipse at 12% 0, #5a4d9c70, transparent 45%), radial-gradient(ellipse at 95% 30%, #236b9270, transparent 42%), linear-gradient(145deg, #131c3cf2, #14223cfa 70%), url('./assets/magical/observatory-garden.webp') center / cover;
  box-shadow: 0 24px 70px #13203d26, inset 0 1px 0 #e7dbff50;
  overflow: visible;
}
html.magical-night .trivia-theatre::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 12% 18%, #f6d88570 0 1px, transparent 2px), radial-gradient(circle at 66% 5%, #d9ebff80 0 1px, transparent 2px), radial-gradient(circle at 92% 60%, #e9d6fc60 0 1px, transparent 2px);
  background-size: 183px 227px, 257px 197px, 311px 269px;
}
html.magical-night .trivia-theatre .game-heading {
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html.magical-night .trivia-theatre .game-heading :is(.eyebrow, .hub-kicker) {
  display: block;
  margin-bottom: 7px;
  color: #c6d7ff;
  font: 750 1rem/1.4 var(--ui-font, sans-serif);
  letter-spacing: .035em;
}
html.magical-night .trivia-theatre .game-heading h1 {
  margin: 0;
  color: #fff4dd;
  font: 650 clamp(28px, 2.7vw, 42px)/1.2 var(--ui-display-font, Georgia, serif);
  letter-spacing: -.025em;
  text-wrap: balance;
}
html.magical-night .trivia-theatre .game-heading p { color: #d3def5; font-size: 1.125rem; margin: 10px 0 0; line-height: 1.5; }
.trivia-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
html.magical-night .trivia-navigation :is(a, summary, .trivia-players-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 15px;
  border: 1px solid #b2c9fb61;
  border-radius: 13px;
  color: #f4edff;
  background: #1d2e55b3;
  font: 750 1.0625rem/1.4 var(--ui-font, sans-serif);
  text-decoration: none;
  cursor: pointer;
}
.trivia-options { position: relative; z-index: 12; }
.trivia-options > summary { list-style: none; }
.trivia-options > summary::-webkit-details-marker { display: none; }
.trivia-options > summary span { color: #f5d69f; }
.trivia-options[open] > summary { border-color: #efd59a; }
html.magical-night .trivia-options .game-actions {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  display: grid;
  gap: 5px;
  width: max-content;
  min-width: 230px;
  max-width: min(310px, 85vw);
  padding: 9px;
  border: 1px solid #c2d2f980;
  border-radius: 15px;
  background: #182846;
  box-shadow: 0 15px 40px #040e2b70;
}
html.magical-night .trivia-options .game-actions .small-button { width: 100%; text-align: left; color: #f3edff; background: #263c60; border-color: #99b9e636; border-radius: 8px; }
html.magical-night .trivia-theatre :is(a, button, select, summary, [tabindex]):focus-visible,
html.magical-night .trivia-question-theatre :is(button, summary, a):focus-visible { outline: 3px solid #ffde8d; outline-offset: 4px; }
html.magical-night .trivia-theatre .magical-turn-stage {
  min-height: 160px;
  grid-template-columns: minmax(0, 1fr) 310px;
  padding: 22px 28px;
  gap: 24px;
  border: 1px solid #b6a9ed70;
  border-radius: 21px;
  background: radial-gradient(ellipse at 12% 30%, #a3a3fb30, transparent 55%), linear-gradient(90deg, #1b2646ee, #1b3254c4), url('./assets/magical/observatory-garden.webp') center 40% / cover;
  box-shadow: inset 0 1px 0 #f5e0b333, 0 9px 25px #060f2a33;
}
html.magical-night .trivia-theatre .magical-turn-stage::before { inset: 7px; border-color: #c6bef21c; border-radius: 16px; }
html.magical-night .trivia-theatre .magical-turn-stage::after { display: none; }
html.magical-night .trivia-theatre .turn-person { gap: 24px; }
html.magical-night .trivia-theatre .magical-active-portrait {
  width: 112px; height: 112px; flex: 0 0 112px; border-radius: 50%; padding: 4px;
  border: 2px solid #ffe8b3; background: #d6b87c;
  box-shadow: 0 0 0 7px #b6abef19, 0 0 35px #a1b4fc2b, 0 9px 20px #020d2d5c;
}
html.magical-night .trivia-theatre .magical-active-portrait .avatar-graphic { border-radius: 50%; object-fit: cover; }
html.magical-night .trivia-theatre .turn-player-name,
html.magical-night.tv-view .trivia-theatre .turn-player-name { color: #fff7e7; font: 800 clamp(32px, 3.2vw, 49px)/1.1 var(--ui-font, sans-serif); }
html.magical-night .trivia-theatre .turn-player-heading { margin-bottom: 9px !important; gap: 3px; }
html.magical-night .trivia-theatre .turn-name-label { font: 700 1rem/1.4 var(--ui-font, sans-serif); color: #cabef4; margin: 0; }
html.magical-night .trivia-theatre .turn-caption { color: #dce3f8; font-size: 1.0625rem; line-height: 1.6; }
html.magical-night .trivia-theatre .turn-caption .level-chip { color: #f3e6ff; background: #39365b; border-color: #c4b3ed52; font-size: 1rem; }
html.magical-night .trivia-theatre .turn-round { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 16px; padding: 5px 0 5px 23px; border: 0; border-left: 1px solid #b9c0f04f; border-radius: 0; background: none; box-shadow: none; color: #cfdaef; font-size: .9375rem; }
html.magical-night .trivia-theatre .turn-round > strong { color: #e8e8ff; font-size: 1.25rem; }
html.magical-night .trivia-theatre .trivia-equal-turns { grid-column: 1; line-height: 1.4; }
html.magical-night .trivia-theatre .turn-round .studio-player-points { grid-column: 2; grid-row: 1 / 3; margin: 0; text-align: right; }
html.magical-night .trivia-theatre .turn-round .round-progress { grid-column: 1 / -1; }
html.magical-night .trivia-theatre .studio-player-points { color: #ffe3a4; font: 800 2.125rem/1.15 var(--ui-font, sans-serif); margin: 10px 0 0; }
html.magical-night .trivia-theatre .studio-player-points small { color: #d4ddf4; font-size: .8125rem; letter-spacing: .07em; }
html.magical-night .trivia-theatre .round-progress { height: 7px; margin-top: 12px; border: 0; background: #07162f; }
html.magical-night .trivia-theatre .round-progress span { background: linear-gradient(90deg, #a493f1, #f3d38c); }
html.magical-night .trivia-theatre .game-layout { grid-template-columns: minmax(0, 1fr) 275px; gap: 22px; }
html.magical-night .trivia-theatre .board-wrap,
body.magical-online .online-board-frame { padding: 20px; border: 1px solid #afbbf05c; border-radius: 23px; background: linear-gradient(145deg, #182441e8, #132642ee); box-shadow: inset 0 1px 0 #f0e8ff26, 0 16px 30px #030c242e; }
html.magical-night .trivia-theatre .studio-board-caption,
body.magical-online .online-board-frame .studio-board-caption { gap: 12px; padding: 0 0 18px; }
html.magical-night .trivia-theatre .studio-board-caption strong,
body.magical-online .online-board-frame .studio-board-caption strong { color: #fff2db; font: 650 clamp(22px, 2.1vw, 29px)/1.25 var(--ui-display-font, Georgia, serif); text-transform: none; letter-spacing: -.015em; }
html.magical-night .trivia-theatre .studio-board-caption > span,
body.magical-online .online-board-frame .studio-board-caption > span { color: #cad7f1; font-size: 1rem; line-height: 1.5; }
html.magical-night .trivia-theatre .board-scroll,
body.magical-online .online-board-scroll { scrollbar-color: #a9b9e2 #13213b; padding: 3px 3px 12px; scroll-padding-inline: 4px; }
html.magical-night .trivia-theatre .trivia-board,
body.magical-online .online-board { min-width: 650px; gap: 11px; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
body.magical-online :is(.online-category, .online-tile):nth-child(5n + 1) { --tile-accent: #73bfff; }
body.magical-online :is(.online-category, .online-tile):nth-child(5n + 2) { --tile-accent: #dfadff; }
body.magical-online :is(.online-category, .online-tile):nth-child(5n + 3) { --tile-accent: #82e2c2; }
body.magical-online :is(.online-category, .online-tile):nth-child(5n + 4) { --tile-accent: #ffb4b7; }
body.magical-online :is(.online-category, .online-tile):nth-child(5n + 5) { --tile-accent: #f7d27e; }
html.magical-night .trivia-theatre .category-cell,
body.magical-online .online-category {
  min-height: 150px; padding: 13px 9px 16px; gap: 6px; border-radius: 17px 17px 9px 9px;
  border: 1px solid color-mix(in srgb, var(--tile-accent) 72%, #284664);
  color: #fff8e9;
  background: radial-gradient(ellipse at 50% 5%, color-mix(in srgb, var(--tile-accent) 57%, transparent), transparent 90%), #233459;
  box-shadow: inset 0 2px 0 #ffffff28, 0 5px 0 #06132c5c;
  font: 800 1.125rem/1.3 var(--ui-font, sans-serif); text-wrap: balance;
}
html.magical-night .trivia-theatre .board-topic-illustration,
body.magical-online .online-topic-art { width: 77px; height: 77px; flex: 0 0 77px; filter: drop-shadow(0 4px 6px #07132960); }
html.magical-night .trivia-theatre .category-cell:has(.board-topic-illustration) > span:last-child { font-size: 1.125rem; line-height: 1.3; font-weight: 800; }
body.magical-online .online-category strong { font: inherit; }
html.magical-night .trivia-theatre .value-cell:not(.used),
body.magical-online .online-tile:not(.used) {
  min-height: 83px; padding: 15px 7px; position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tile-accent) 57%, #29415d);
  border-radius: 11px; color: #fff4d8;
  background: radial-gradient(ellipse at 45% -25%, color-mix(in srgb, var(--tile-accent) 43%, transparent), transparent 90%), linear-gradient(145deg, #304679, #1d2b54);
  box-shadow: inset 0 1px 0 #fff8db28, inset 0 -3px 0 #040e273b, 0 4px 0 #08112c91;
  font: 800 clamp(26px, 2.5vw, 37px)/1.2 var(--ui-font, sans-serif); letter-spacing: -.02em;
  text-shadow: 0 2px 4px #040f3d;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
html.magical-night .trivia-theatre .value-cell::before,
body.magical-online .online-tile::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 25%, #ffffff12 45%, #ffffff21 49%, transparent 64%); transform: translateX(-120%); transition: transform .6s ease; }
html.magical-night .trivia-theatre .value-cell:hover:not(:disabled),
body.magical-online .online-tile:hover:not(:disabled) { transform: translateY(-4px); color: #fff7dd; border-color: #fff0bd; box-shadow: 0 0 25px color-mix(in srgb, var(--tile-accent) 27%, transparent), inset 0 1px 0 #fff8db60, 0 7px 0 #08112c91; }
html.magical-night .trivia-theatre .value-cell:hover:not(:disabled)::before,
body.magical-online .online-tile:hover:not(:disabled)::before { transform: translateX(120%); }
html.magical-night .trivia-theatre .studio-tile-spark,
body.magical-online .online-tile .studio-tile-spark { position: absolute; top: 7px; right: 9px; color: var(--tile-accent); font-size: 11px; opacity: .8; }
html.magical-night .trivia-theatre .value-cell.used,
body.magical-online .online-tile.used { min-height: 83px; border-radius: 11px; background: #13213b; border: 1px solid #8ca7d330; color: #9cafcc; opacity: 1; box-shadow: inset 0 2px 9px #0002; font-size: 28px; }
html.magical-night .trivia-theatre .value-cell.used.correct { color: #a7ebd2; background: #1b3b43; border-color: #79c6ad60; }
html.magical-night .trivia-theatre .board-bottom { color: #cbd5ec; font-size: .9375rem; line-height: 1.6; padding-top: 14px; gap: 12px; }
html.magical-night .trivia-theatre .score-panel { padding: 20px 13px; border: 1px solid #b3bcf04f; border-radius: 20px; background: linear-gradient(145deg, #2b3454, #1a2a47); box-shadow: inset 0 1px 0 #fff3d51f; }
html.magical-night .trivia-theatre .score-panel h2 { color: #f8efd9; font: 650 1.5rem/1.3 var(--ui-display-font, Georgia, serif); margin: 0 6px 18px; text-transform: none; letter-spacing: -.015em; }
html.magical-night .trivia-theatre .score-item { grid-template-columns: 45px minmax(0, 1fr) auto; gap: 9px; min-height: 83px; padding: 12px 9px; border-radius: 13px; color: #fff6e7; background: #1423428c; border: 1px solid #b6c4f125; box-shadow: none; }
html.magical-night .trivia-theatre .score-item.active { border-color: #f3cf81b0; background: linear-gradient(110deg, #5b5068, #33436b); box-shadow: inset 3px 0 0 #f2ce87, 0 0 20px #f2ce8712; }
html.magical-night .trivia-theatre .score-avatar { width: 45px; height: 45px; }
html.magical-night .trivia-theatre .score-name { color: #fff4e3; font-size: 1.0625rem; line-height: 1.4; overflow-wrap: anywhere; }
html.magical-night .trivia-theatre :is(.score-level, .score-bonus) { color: #c6d1ea; font-size: .875rem; line-height: 1.4; }
html.magical-night .trivia-theatre .score-value { color: #ffdfa0; font: 800 1.125rem/1.3 var(--ui-font, sans-serif); }
html.magical-night .trivia-theatre .score-caption { font-size: .9375rem; line-height: 1.65; color: #d0d9ed; padding: 15px 7px 0; }
html.magical-night .trivia-theatre .score-caption .profile-sync-note { font-size: .875rem; color: #b9cae9; }

/* The painted path remains a detailed 2D world. The destination and the active
   topic cards are the next-action landmarks; no 3D choice interrupts them. */
html.magical-night .trivia-theatre .journey-play-layout { grid-template-columns: minmax(0, 1.6fr) minmax(310px, 1fr); gap: 22px; }
html.magical-night .trivia-theatre .journey-board { overflow: hidden; border-color: #a5c3df70; border-radius: 23px; background: #f9f0dd; }
html.magical-night .trivia-theatre .journey-board-heading { padding: 22px; background: #fbf4e5; }
html.magical-night .trivia-theatre .journey-board-heading h2 { color: #233e57; font-size: clamp(26px, 2.5vw, 36px); }
html.magical-night .trivia-theatre .journey-board-heading :is(p, .journey-reveal) { color: #3f5864; font-size: 1.0625rem; }
html.magical-night .trivia-theatre .journey-goal-badge { background: #fbe6b4; border-color: #a47a35; color: #4d3920; }
html.magical-night .trivia-theatre .journey-goal-badge strong { font-size: 2rem; }
html.magical-night .trivia-theatre .journey-legend { padding: 15px; gap: 10px; }
html.magical-night .trivia-theatre .journey-legend li { background: #fffaf0; border-color: #bfac8966; }
html.magical-night .trivia-theatre .journey-legend li strong { color: #203e52; }
html.magical-night .trivia-theatre .journey-legend li small { color: #46606c; }
html.magical-night .trivia-theatre .journey-question-picker { padding: 23px; border: 1px solid #d0b3f18c; border-radius: 23px; color: #f8eedf; background: radial-gradient(ellipse at 80% 0, #8664c540, transparent 55%), linear-gradient(140deg, #28385d, #1e294b); box-shadow: 0 15px 35px #060e2e30, inset 0 1px 0 #e7d4ff3b; }
html.magical-night .trivia-theatre .journey-active-player { gap: 16px; align-items: center; }
html.magical-night .trivia-theatre .journey-active-player { background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
html.magical-night .trivia-theatre > .immersive-street-hud { display: none; }
html.magical-night .trivia-theatre > .immersive-street-hud button { font-size: .875rem; min-height: 39px; padding: 8px 12px; }
html.magical-night .trivia-theatre .journey-active-player > span { width: 70px; height: 70px; flex: 0 0 70px; border: 2px solid #f2d191; border-radius: 50%; padding: 3px; box-shadow: 0 0 0 5px #b7abf523; }
.trivia-section-kicker { display: block; color: #ccb9ff; font: 800 .875rem/1.4 var(--ui-font, sans-serif); margin-bottom: 5px; }
html.magical-night .trivia-theatre .journey-active-player h2 { color: #fff3da; font: 650 clamp(24px, 2.2vw, 31px)/1.25 var(--ui-display-font, Georgia, serif); }
html.magical-night .trivia-theatre .journey-active-player p { color: #d3ddf4; font-size: 1rem; line-height: 1.5; }
html.magical-night .trivia-theatre .journey-question-picker > label { color: #dce3f5; font-size: 1rem; margin-top: 22px; }
html.magical-night .trivia-theatre #journey-value { color: #f7efff; background: #172849; border: 1px solid #a4b5df8f; border-radius: 11px; font-size: 1.125rem; min-height: 52px; }
html.magical-night .trivia-theatre .journey-topic-choices { gap: 11px; margin-top: 16px; }
  html.magical-night .trivia-theatre .journey-topic-choice { grid-template-columns: 60px minmax(0, 1fr) 24px; gap: 13px; align-items: center; padding: 12px 14px; min-height: 88px; border: 1px solid color-mix(in srgb, var(--tile-accent) 72%, #33415c); border-radius: 14px; color: #fff6e9; background: radial-gradient(ellipse at 5% 0, color-mix(in srgb, var(--tile-accent) 38%, transparent), transparent 90%), #263653; box-shadow: inset 0 1px 0 #fff3e21f, 0 4px 0 #07142b80; transition: transform .18s ease, box-shadow .18s ease; }
html.magical-night .trivia-theatre .journey-topic-choice:hover:not(:disabled) { transform: translateY(-3px); border-color: #ffedbf; box-shadow: 0 0 22px color-mix(in srgb, var(--tile-accent) 20%, transparent), 0 6px 0 #07142b80; }
.trivia-topic-art { display: block; width: 60px; height: 60px; }
.trivia-topic-art svg { width: 100%; height: 100%; }
.trivia-topic-copy { display: grid; gap: 4px; min-width: 0; }
html.magical-night .trivia-theatre .journey-topic-copy strong { color: #fff7e8; font: 800 1.1875rem/1.3 var(--ui-font, sans-serif); }
html.magical-night .trivia-theatre .journey-topic-copy > span { color: var(--tile-accent); font-size: 1rem; font-weight: 750; }
html.magical-night .trivia-theatre .journey-topic-choice i { color: var(--tile-accent); font: 700 1.6rem/1 sans-serif; }
html.magical-night .trivia-theatre :is(.journey-picker-help, .profile-sync-note) { color: #cbd6ec; font-size: .9375rem; line-height: 1.6; }
html.magical-night .trivia-theatre .journey-jump { display: none; }
.trivia-turn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 9px; background: #b0f3d4; box-shadow: 0 0 12px #a5f3cd80; }

/* A still, luminous question stage. Effects live in a separate finite layer. */
html.magical-night .trivia-question-theatre,
body.magical-online #room-question { --clue-accent: #bfa5ed; padding: 0; border: 2px solid #b9aaeb; border-radius: 25px; color: #233b56; background: #fffaf0; box-shadow: 0 35px 100px #06102a80, 0 0 0 6px #b4a3f323; }
html.magical-night .trivia-question-theatre::backdrop,
body.magical-online #room-question::backdrop { background: #071229bf; backdrop-filter: blur(9px); }
html.magical-night .trivia-question-theatre .question-top { min-height: 100px; padding: 17px 30px; gap: 18px; border-bottom: 1px solid #d5c39b; background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--clue-accent) 30%, transparent), transparent 65%), linear-gradient(110deg, #202c50, #263b5f); }
html.magical-night .trivia-question-theatre .studio-clue-art { width: 65px; height: 65px; flex: 0 0 65px; }
html.magical-night .trivia-question-theatre .question-meta { gap: 12px; flex-wrap: wrap; color: #f9edff; }
html.magical-night .trivia-question-theatre .question-meta strong { color: #fff5e2; font-size: 1.375rem; line-height: 1.35; }
.trivia-clue-diamond { display: none; }
html.magical-night .trivia-question-theatre .question-value { padding: 7px 13px; color: #ffe2a4; background: #071b3680; border: 1px solid #e3c78b61; border-radius: 11px; font-size: 1.125rem; font-weight: 800; white-space: nowrap; }
html.magical-night .trivia-question-theatre .question-top > .level-chip { color: #edf0ff; background: #7d75aa36; border: 1px solid #b3a6e463; font-size: 1rem; margin-left: auto; }
html.magical-night .trivia-question-theatre .question-body { padding: 26px 36px 32px; background: radial-gradient(ellipse at 100% 100%, #e9e2fa70, transparent 65%), #fffaf0; }
html.magical-night .trivia-question-theatre .question-player { margin-bottom: 22px; color: #47596b; align-items: center; }
html.magical-night .trivia-question-theatre .question-player strong { color: #243c57; font-size: 1.125rem; gap: 12px; }
html.magical-night .trivia-question-theatre .question-avatar { width: 51px; height: 51px; flex: 0 0 51px; border: 2px solid #c4a669; border-radius: 50%; padding: 2px; }
html.magical-night .trivia-question-theatre .question-player .timer { color: #3c5270; background: #e9ecf4; border: 1px solid #acb8ce; border-radius: 30px; padding: 8px 13px; font: 700 1rem/1.4 var(--ui-font, sans-serif); }
html.magical-night .trivia-question-theatre .question-player .timer.urgent { color: #783b28; background: #ffe9cd; border-color: #b97e4a; }
html.magical-night .trivia-question-theatre .question-heading { color: #223b58; margin: 0 0 28px; font-family: var(--ui-font, sans-serif); font-size: var(--ui-question, 2.25rem); font-weight: 800; line-height: 1.4; letter-spacing: -.02em; max-width: 100%; }
html.magical-night .trivia-question-theatre .question-options { gap: 15px; }
html.magical-night .trivia-question-theatre .answer-option,
body.magical-online #room-question .room-answer { color: #253e5a; border: 2px solid #acb9d0; border-radius: 16px; background: #fffefb; min-height: var(--ui-answer-height, 5.5rem); padding: 18px; gap: 16px; font-size: var(--ui-answer, 1.625rem); font-weight: 750; line-height: 1.4; box-shadow: 0 5px 0 #adbad333; transform: none; }
html.magical-night .trivia-question-theatre .answer-option:hover:not(:disabled),
body.magical-online #room-question .room-answer:hover:not(:disabled) { color: #1a3454; border-color: #6c62a2; background: #f1edfc; box-shadow: 0 5px 0 #a49bc04d, 0 0 0 3px #b9a9e51a; transform: translateY(-2px); }
html.magical-night .trivia-question-theatre .answer-letter,
body.magical-online #room-question .room-answer > span:first-child { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid #c3b3ef; border-radius: 13px; color: #5c448d; background: #ece6fa; font-size: 1.125rem; box-shadow: inset 0 1px 0 #fff; }
html.magical-night .trivia-question-theatre .answer-option:nth-child(2) .answer-letter { background: #dcebf8; border-color: #99b9d9; color: #285c83; }
html.magical-night .trivia-question-theatre .answer-option:nth-child(3) .answer-letter { background: #e0f0e8; border-color: #a4c3b5; color: #2e6653; }
html.magical-night .trivia-question-theatre .answer-option:nth-child(4) .answer-letter { background: #f7e4dd; border-color: #d6b5a5; color: #874e42; }
html.magical-night .trivia-question-theatre .answer-option.correct-answer,
body.magical-online #room-question .room-answer.right { color: #183f35; border-color: #3c9375; background: linear-gradient(120deg, #ddf4e6, #f1fcf1); box-shadow: 0 5px 0 #529e7c38, 0 0 0 3px #82ca9c19; opacity: 1; }
html.magical-night .trivia-question-theatre .answer-option.correct-answer .answer-letter { color: #fff; background: #2b7b60; border-color: #2b7b60; }
html.magical-night .trivia-question-theatre .answer-option.wrong-answer,
body.magical-online #room-question .room-answer.wrong { color: #6e432f; border-color: #ba8862; background: #fff0dd; opacity: 1; box-shadow: 0 5px 0 #b99d7930; }
html.magical-night .trivia-question-theatre .answer-option.dim-answer,
body.magical-online #room-question .room-answer.dim { color: #637082; background: #f0eee9; border-color: #c6c7c7; opacity: 1; box-shadow: none; }
.answer-choice-copy { display: grid; gap: 4px; min-width: 0; }
.trivia-answer-state { display: block; font-size: .875rem; line-height: 1.4; font-weight: 800; }
.trivia-answer-state:empty { display: none; }
html.magical-night .trivia-question-theatre .question-tools { margin-top: 22px; gap: 12px; }
html.magical-night .trivia-question-theatre .question-tools button { min-height: 48px; border-radius: 12px; font-size: 1.0625rem; padding: 12px 17px; color: #364a66; background: #ecebf1; border: 1px solid #b0b7c7; }
html.magical-night .trivia-question-theatre .question-tools .pass-button { background: transparent; }
html.magical-night .trivia-question-theatre .answer-feedback { margin-top: 28px; padding: 22px 24px; border: 1px solid #c0c6d7; border-radius: 19px; background: #fffefb; box-shadow: 0 9px 25px #4b3b7220; }
html.magical-night .trivia-question-theatre .feedback-title { color: #27664f; font: 800 clamp(23px, 2.5vw, 31px)/1.3 var(--ui-font, sans-serif); margin: 0 0 12px; }
html.magical-night .trivia-question-theatre .feedback-title.missed { color: #655076; }
html.magical-night .trivia-question-theatre :is(.answer-feedback p, .learn-more p) { color: #3c5064; font-size: var(--ui-body, 1.25rem); line-height: 1.65; }
html.magical-night .trivia-question-theatre .journey-answer-progress { background: #f0edf8; color: #3a4367; border-color: #b8aed0; }
html.magical-night .trivia-question-theatre .journey-answer-progress :is(strong, span) { color: #354b69; }
html.magical-night .trivia-question-theatre .question-action-bar { padding: 18px 28px; border-top: 1px solid #b7c0d0; background: #e7eaf3f5; backdrop-filter: blur(10px); }
html.magical-night .trivia-question-theatre .question-action-bar .primary-button { min-height: 60px; padding: 14px 28px; color: #fff6df; border: 1px solid #728ac4; border-radius: 15px; background: linear-gradient(135deg, #384f85, #263c6b); box-shadow: 0 5px 0 #182744; font-size: 1.25rem; }
html.magical-night .trivia-question-theatre .question-action-bar .primary-button:hover { background: #415e96; transform: translateY(-2px); }
html.magical-night .trivia-question-theatre .daily-double-reveal { border: 1px solid #b99b50; color: #684a21; background: linear-gradient(120deg, #fff0ba, #fce2b0); border-radius: 14px; }
body.magical-online #room-question { padding: 24px; }
body.magical-online #room-question .room-clue-top { color: #263f5c; }
body.magical-online #room-question :is(.room-answer-feedback, .studio-room-clue-heading) { background: transparent; }
body.magical-online #room-question > h2 { color: #223b58; }

.trivia-player-edit-note { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin: 15px 0 25px; padding: 20px 24px; border: 1px solid #b9a67f; border-radius: 18px; background: #fff6df; color: #263d53; }
.trivia-player-edit-note p { margin: 5px 0 0; font-size: 1.0625rem; line-height: 1.5; }
.trivia-player-edit-note strong { font-size: 1.25rem; }
html.magical-night .trivia-player-dialog { width: min(850px, calc(100% - 20px)); }
.trivia-player-picker { color: #263f55; }
.trivia-player-intro { font-size: 1.25rem; line-height: 1.6; margin-top: 0; }
.trivia-player-safe-note { padding: 13px 17px; border: 1px solid #c0b793; border-radius: 12px; background: #f5eddb; font-size: 1rem; line-height: 1.6; }
.trivia-player-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 23px 0 16px; }
.trivia-player-picker-heading h3 { margin: 0; font: 650 1.625rem/1.3 var(--ui-display-font, Georgia, serif); color: #28415b; }
.trivia-player-picker-heading > strong { color: #5d4385; background: #eee6fa; border-radius: 30px; padding: 9px 14px; font-size: 1rem; white-space: nowrap; }
.trivia-saved-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trivia-saved-player { position: relative; display: grid; grid-template-columns: 24px 62px minmax(0, 1fr); gap: 13px; align-items: center; min-width: 0; min-height: 98px; padding: 15px 13px; border: 2px solid #b4b8c8; border-radius: 16px; background: #fffcf3; cursor: pointer; }
.trivia-saved-player:has(input:checked) { background: #ece7f7; border-color: #796398; box-shadow: 0 0 0 2px #c7b6e833; }
.trivia-saved-player:focus-within { outline: 3px solid #425c90; outline-offset: 3px; }
.trivia-saved-player input { width: 23px; height: 23px; min-height: 23px; accent-color: #665188; margin: 0; padding: 0; }
.trivia-saved-portrait { display: block; width: 62px; height: 62px; border: 2px solid #ccb27d; border-radius: 50%; padding: 2px; background: #eed7ae; }
.trivia-saved-portrait .avatar-graphic { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; padding: 0; }
.trivia-saved-player strong { display: block; color: #253e56; font: 800 1.25rem/1.3 var(--ui-font, sans-serif); overflow-wrap: anywhere; }
.trivia-saved-player small { display: block; color: #53647b; font: 650 1rem/1.4 var(--ui-font, sans-serif); margin-top: 5px; }
.trivia-saved-player i { position: absolute; right: 7px; top: 6px; color: #615080; font: 800 1rem/1 sans-serif; opacity: 0; }
.trivia-saved-player:has(input:checked) i { opacity: 1; }
.trivia-add-person { border: 1px solid #aeb9ca; border-radius: 14px; background: #f0eef5; margin-top: 22px; padding: 0 18px; }
.trivia-add-person summary { padding: 17px 0; font: 800 1.125rem/1.4 var(--ui-font, sans-serif); color: #40577d; cursor: pointer; }
.trivia-new-person-fields { display: grid; gap: 14px; padding-bottom: 8px; }
.trivia-new-person-fields label { display: grid; gap: 7px; font: 750 1.0625rem/1.4 var(--ui-font, sans-serif); }
.trivia-new-person-fields :is(input, select) { min-width: 0; width: 100%; min-height: 52px; padding: 12px; background: #fffef9; color: #263f55; border: 1px solid #94a4bf; border-radius: 10px; font-size: 1.125rem; }
.trivia-add-person > p { color: #526379; font-size: 1rem; line-height: 1.5; }
.trivia-player-picker-footer { position: sticky; bottom: -30px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; padding: 17px 0 7px; margin-top: 15px; background: #fff9ecf7; border-top: 1px solid #c2b7a5; }
.trivia-player-picker-footer > p { flex: 1 0 100%; margin: 0; color: #4d5f75; font-size: 1.0625rem; line-height: 1.5; }
.trivia-player-picker-footer .primary-button { color: #fff7e8; background: #3c527d; border-color: #526a97; border-radius: 13px; }
.trivia-player-picker-footer .primary-button:disabled { color: #e5e7ec; background: #6d7a91; opacity: .7; cursor: not-allowed; }

@media (max-width: 1100px) {
  html.magical-night .trivia-theatre .game-layout { grid-template-columns: minmax(0, 1fr); }
  html.magical-night .trivia-theatre .score-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 10px; }
  html.magical-night .trivia-theatre .score-item { min-width: 0; }
  html.magical-night .trivia-theatre .score-panel { margin-top: 0; }
  html.magical-night .trivia-theatre .journey-play-layout { grid-template-columns: minmax(0, 1fr); }
  html.magical-night .trivia-theatre .journey-topic-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.magical-night .trivia-theatre .journey-question-picker { order: -1; }
  html.magical-night .trivia-theatre .journey-question-picker > label { max-width: 360px; }
}
@media (max-width: 700px) {
  .trivia-saved-players { grid-template-columns: minmax(0, 1fr); }
  .trivia-player-picker-footer { bottom: -20px; }
  .trivia-player-picker-footer .primary-button { flex: 1 1 100%; order: 2; }
  html.magical-night .trivia-theatre { margin: 6px 8px 24px; width: auto; border-radius: 22px; padding: 17px 12px; }
  html.magical-night .trivia-theatre .game-heading { align-items: start; flex-direction: column; gap: 16px; }
  html.magical-night .trivia-theatre .game-heading h1 { font-size: 29px; }
  html.magical-night .trivia-theatre .game-heading :is(.eyebrow, .hub-kicker) { font-size: .9375rem; }
  .trivia-navigation { gap: 7px; width: 100%; }
  html.magical-night .trivia-navigation :is(a, summary, .trivia-players-button) { min-height: 46px; font-size: .9375rem; padding: 10px 11px; gap: 7px; }
  .trivia-options { margin-left: auto; }
  html.magical-night .trivia-theatre .magical-turn-stage { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 20px 17px; gap: 16px; border-radius: 17px; }
  html.magical-night .trivia-theatre .magical-active-portrait { width: 84px; height: 84px; flex-basis: 84px; }
  html.magical-night .trivia-theatre .turn-person { gap: 17px; }
  html.magical-night .trivia-theatre .turn-player-name,
  html.magical-night.tv-view .trivia-theatre .turn-player-name { font-size: 33px; }
  html.magical-night .trivia-theatre .turn-name-label { font-size: .9375rem; }
  html.magical-night .trivia-theatre .turn-caption { font-size: 1rem; }
  html.magical-night .trivia-theatre .turn-round { display: grid; grid-template-columns: 1fr auto; padding: 14px 0 0; border-left: 0; border-top: 1px solid #b7c5f04d; gap: 3px 10px; font-size: .9375rem; }
  html.magical-night .trivia-theatre .turn-round > strong { font-size: 1.0625rem; }
  html.magical-night .trivia-theatre .studio-player-points { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 1.75rem; text-align: right; }
  html.magical-night .trivia-theatre .round-progress { grid-column: 1 / -1; margin-top: 9px; }
  html.magical-night .trivia-theatre .board-wrap,
  body.magical-online .online-board-frame { padding: 16px 10px 12px; border-radius: 17px; }
  html.magical-night .trivia-theatre .studio-board-caption { display: grid; padding: 0 6px 15px; gap: 6px; }
  html.magical-night .trivia-theatre .studio-board-caption strong { font-size: 23px; }
  html.magical-night .trivia-theatre .trivia-board,
  body.magical-online .online-board { min-width: 675px; gap: 9px; }
  html.magical-night .trivia-theatre .category-cell,
  body.magical-online .online-category { min-height: 142px; font-size: 1.0625rem; }
  html.magical-night .trivia-theatre .value-cell:not(.used),
  html.magical-night .trivia-theatre .value-cell.used,
  body.magical-online .online-tile { min-height: 75px; font-size: 30px; }
  html.magical-night .trivia-theatre .board-bottom { display: grid; font-size: .9375rem; }
  html.magical-night .trivia-theatre .score-list { display: grid; grid-template-columns: minmax(0, 1fr); }
  html.magical-night .trivia-theatre .journey-topic-choices { grid-template-columns: minmax(0, 1fr); }
  html.magical-night .trivia-theatre .journey-question-picker { padding: 19px 15px; }
  html.magical-night .trivia-theatre .journey-active-player { gap: 13px; }
  html.magical-night .trivia-theatre .journey-active-player > span { width: 59px; height: 59px; flex-basis: 59px; }
  html.magical-night .trivia-theatre .journey-active-player h2 { font-size: 25px; }
  html.magical-night .trivia-theatre .journey-board-heading { padding: 19px; }
  html.magical-night .trivia-theatre .journey-board-heading h2 { font-size: 27px; }
  html.magical-night .trivia-theatre .journey-legend { grid-template-columns: minmax(0, 1fr); }
  html.magical-night .trivia-question-theatre { border-radius: 19px; }
  html.magical-night .trivia-question-theatre .question-top { padding: 15px 17px; min-height: 0; gap: 12px; }
  html.magical-night .trivia-question-theatre .studio-clue-art { width: 46px; height: 46px; flex-basis: 46px; }
  html.magical-night .trivia-question-theatre .question-meta { flex: 1; gap: 7px; }
  html.magical-night .trivia-question-theatre .question-meta strong { font-size: 1.125rem; }
  html.magical-night .trivia-question-theatre .question-value { font-size: 1rem; padding: 4px 9px; }
  html.magical-night .trivia-question-theatre .question-top > .level-chip { font-size: .9375rem; margin-left: 0; }
  html.magical-night .trivia-question-theatre .question-body { padding: 21px 18px 25px; }
  html.magical-night .trivia-question-theatre .question-player { margin-bottom: 18px; gap: 10px; }
  html.magical-night .trivia-question-theatre .question-player strong { font-size: 1rem; gap: 8px; }
  html.magical-night .trivia-question-theatre .question-avatar { width: 43px; height: 43px; flex-basis: 43px; }
  html.magical-night .trivia-question-theatre .question-player .timer { font-size: .875rem; padding: 6px 10px; white-space: nowrap; }
  html.magical-night .trivia-question-theatre .question-heading { font-size: var(--ui-question, 1.875rem); margin-bottom: 21px; }
  html.magical-night .trivia-question-theatre .question-options { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  html.magical-night .trivia-question-theatre .answer-option { padding: 16px 13px; gap: 13px; border-radius: 14px; font-size: var(--ui-answer, 1.375rem); min-height: var(--ui-answer-height, 4.5rem); }
  html.magical-night .trivia-question-theatre .answer-letter { width: 35px; height: 35px; flex-basis: 35px; border-radius: 10px; font-size: 1rem; }
  html.magical-night .trivia-question-theatre .answer-feedback { padding: 19px 16px; }
  html.magical-night .trivia-question-theatre .question-action-bar { padding: 15px 18px; }
  html.magical-night .trivia-question-theatre .question-action-bar .primary-button { width: 100%; min-height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  html.magical-night .trivia-theatre *, html.magical-night .trivia-question-theatre * { scroll-behavior: auto; transition: none; }
  html.magical-night .trivia-theatre .value-cell::before, body.magical-online .online-tile::before { display: none; }
  html.magical-night .trivia-theatre :is(.value-cell, .journey-topic-choice):hover:not(:disabled), html.magical-night .trivia-question-theatre .answer-option:hover:not(:disabled) { transform: none; }
}

/* BEGIN beeman-trivia-laptop-fit-v1
   Reflow the game furniture; never scale the page or reduce clue/answer type.
   The height gate leaves phones and tall desktop layouts unchanged. */
@media (min-width: 1000px) and (min-height: 650px) and (max-height: 900px) {
  html.magical-night body:has(.trivia-theatre) > .site-header {
    height: auto; min-height: 70px; padding: 7px 190px 7px 24px;
    max-width: 1580px;
  }
  html.magical-night body:has(.trivia-theatre) > .site-header .brand { font-size: 16px; line-height: 1.05; gap: 10px; }
  html.magical-night body:has(.trivia-theatre) > .site-header .brand strong { font-size: 19px; }
  html.magical-night body:has(.trivia-theatre) > .site-header .brand-icon { width: 38px; height: 38px; border-radius: 12px; }
  html.magical-night body:has(.trivia-theatre) > .site-header .brand-icon svg { width: 30px; height: 30px; }
  html.magical-night body:has(.trivia-theatre) > .site-header .site-menu > summary { min-height: 44px; padding: 8px 14px; font-size: 18px; }
  html.magical-night body:has(.trivia-theatre) > .site-footer { margin-top: 16px; }
  html.magical-night .trivia-theatre {
    width: calc(100% - 32px); max-width: 1540px;
    height: calc(100dvh - 82px); min-height: 568px;
    margin: 0 auto 12px; padding: 12px;
    display: grid; grid-template-rows: 44px 80px minmax(0, 1fr); gap: 9px;
    border-radius: 20px;
  }
  html.magical-night .trivia-theatre .game-heading { min-width: 0; margin: 0; gap: 16px; }
  html.magical-night .trivia-theatre .game-heading > div:first-child { min-width: 0; }
  html.magical-night .trivia-theatre .game-heading :is(.eyebrow, .hub-kicker) { display: none; }
  html.magical-night .trivia-theatre .game-heading h1 { font-size: 25px; line-height: 1.15; }
  html.magical-night .trivia-theatre .trivia-navigation { flex-wrap: nowrap; gap: 8px; }
  html.magical-night .trivia-theatre .trivia-navigation :is(a, summary, .trivia-players-button) {
    min-height: 44px; padding: 7px 12px; font-size: 18px; line-height: 1.35;
  }
  html.magical-night .trivia-theatre .magical-turn-stage {
    min-height: 0; height: 80px; margin: 0; padding: 8px 16px;
    grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; border-radius: 15px;
  }
  html.magical-night .trivia-theatre .turn-person { min-width: 0; gap: 14px; }
  html.magical-night .trivia-theatre .magical-active-portrait { width: 56px; height: 56px; flex-basis: 56px; padding: 2px; box-shadow: 0 0 0 4px #b6abef19; }
  html.magical-night .trivia-theatre .turn-player-heading { margin: 0 0 3px !important; }
  html.magical-night .trivia-theatre .turn-player-name,
  html.magical-night.tv-view .trivia-theatre .turn-player-name { font-size: 28px; line-height: 1.1; }
  html.magical-night .trivia-theatre .turn-name-label { display: none; }
  html.magical-night .trivia-theatre .turn-caption { font-size: 16px; line-height: 1.35; margin: 0; }
  html.magical-night .trivia-theatre .turn-caption .level-chip { font-size: 16px; padding: 2px 7px; }
  html.magical-night .trivia-theatre .turn-round { padding: 0 0 0 15px; gap: 2px 12px; font-size: 15px; }
  html.magical-night .trivia-theatre .turn-round > strong { font-size: 18px; line-height: 1.2; margin: 0; }
  html.magical-night .trivia-theatre .studio-player-points { font-size: 28px; line-height: 1.1; }
  html.magical-night .trivia-theatre .studio-player-points small { font-size: 12px; }
  html.magical-night .trivia-theatre .round-progress { height: 5px; margin-top: 5px; }
  html.magical-night .trivia-theatre .game-layout { min-height: 0; grid-template-columns: minmax(0, 1fr) 238px; gap: 12px; }
  html.magical-night .trivia-theatre .game-layout:has(.score-item:nth-child(7)) { grid-template-columns: minmax(0, 1fr) 320px; }
  html.magical-night .trivia-theatre .board-wrap {
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 5px;
    min-height: 0; padding: 9px; border-radius: 16px;
  }
  html.magical-night .trivia-theatre .studio-board-caption { padding: 0 3px 3px; gap: 10px; }
  html.magical-night .trivia-theatre .studio-board-caption strong { font-size: 18px; line-height: 1.25; }
  html.magical-night .trivia-theatre .studio-board-caption > span { font-size: 15px; line-height: 1.25; }
  html.magical-night .trivia-theatre .board-scroll { min-height: 0; padding: 3px 3px 5px; overflow: visible; }
  html.magical-night .trivia-theatre .trivia-board {
    height: 100%; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: minmax(76px, 1.15fr) repeat(5, minmax(48px, 1fr)); gap: 6px;
  }
  html.magical-night .trivia-theatre .category-cell {
    min-height: 0; padding: 6px; gap: 6px;
    display: grid; grid-template-columns: 28px minmax(0, 1fr); align-content: center;
    text-align: left; font-size: 17px; line-height: 1.15;
  }
  html.magical-night .trivia-theatre .board-topic-illustration { width: 28px; height: 28px; flex-basis: 28px; }
  html.magical-night .trivia-theatre .category-cell:has(.board-topic-illustration) > span:last-child { font-size: 17px; line-height: 1.15; }
  html.magical-night .trivia-theatre .value-cell:not(.used),
  html.magical-night .trivia-theatre .value-cell.used { min-height: 0; padding: 6px; font-size: 28px; line-height: 1.15; }
  html.magical-night.tv-view .trivia-theatre .value-cell:not(.used),
  html.magical-night.tv-view .trivia-theatre .value-cell.used { font-size: 32px; }
  html.magical-night .trivia-theatre .board-bottom { padding: 0 3px; gap: 10px; font-size: 14px; line-height: 1.3; }
  html.magical-night .trivia-theatre .board-wrap > #continue-clue { min-height: 44px; padding: 6px 14px; font-size: 18px; }
  html.magical-night .trivia-theatre .score-panel { min-height: 0; height: fit-content; padding: 9px; border-radius: 16px; }
  html.magical-night .trivia-theatre .score-panel h2 { margin: 0 3px 8px; font-size: 18px; line-height: 1.2; }
  html.magical-night .trivia-theatre .score-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
  html.magical-night .trivia-theatre .score-item { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 7px; min-height: 49px; padding: 5px; }
  html.magical-night .trivia-theatre .score-avatar { width: 32px; height: 32px; }
  html.magical-night .trivia-theatre .score-name { font-size: 16px; line-height: 1.2; }
  html.magical-night .trivia-theatre .score-level { font-size: 13px; line-height: 1.2; margin-top: 2px; }
  html.magical-night .trivia-theatre .score-bonus { display: none; }
  html.magical-night .trivia-theatre .score-value { font-size: 18px; }
  html.magical-night .trivia-theatre .score-list:has(.score-item:nth-child(7)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.magical-night .trivia-theatre .score-list:has(.score-item:nth-child(7)) .score-item { grid-template-columns: 25px minmax(0, 1fr); gap: 3px 6px; min-height: 53px; }
  html.magical-night .trivia-theatre .score-list:has(.score-item:nth-child(7)) .score-avatar { grid-row: 1 / 3; width: 25px; height: 25px; }
  html.magical-night .trivia-theatre .score-list:has(.score-item:nth-child(7)) .score-value { grid-column: 2; font-size: 17px; line-height: 1.1; }
  html.magical-night .trivia-theatre .score-list:has(.score-item:nth-child(7)) .score-level { display: none; }
  html.magical-night .trivia-theatre .score-caption { margin: 0; padding: 0; border: 0; font-size: 0; line-height: 0; }
  html.magical-night .trivia-theatre .score-caption .profile-sync-note:not(:empty) { display: block; padding-top: 6px; font-size: 13px; line-height: 1.3; }

  html.magical-night .trivia-theatre.journey-game-shell { grid-template-rows: 44px minmax(0, 1fr); }
  html.magical-night .trivia-theatre .journey-game-heading > div:first-child { display: flex; align-items: center; gap: 16px; }
  html.magical-night .trivia-theatre .journey-game-heading p { margin: 0; font-size: 17px; line-height: 1.3; }
  html.magical-night .trivia-theatre .journey-play-layout { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); gap: 12px; }
  html.magical-night .trivia-theatre .journey-board { min-height: 0; display: grid; grid-template-rows: auto minmax(170px, 1fr) auto; border-radius: 16px; }
  html.magical-night .trivia-theatre .journey-board-heading { padding: 10px 12px; gap: 10px; align-items: center; }
  html.magical-night .trivia-theatre .journey-board-heading h2 { font-size: 24px; line-height: 1.2; margin: 0; }
  html.magical-night .trivia-theatre .journey-board-heading :is(p, .journey-reveal) { display: none; }
  html.magical-night .trivia-theatre .journey-goal-badge { padding: 4px 9px; gap: 0; }
  html.magical-night .trivia-theatre .journey-goal-badge strong { font-size: 23px; line-height: 1.15; }
  html.magical-night .trivia-theatre .journey-goal-badge span { font-size: 14px; line-height: 1.2; }
  html.magical-night .trivia-theatre .journey-landscape { height: 100%; min-height: 0; aspect-ratio: auto; --token-size: 48px; }
  /* The short painting cannot afford the default 18px downward label offset. */
  html.magical-night .trivia-theatre .journey-milestone { transform: translate(-50%, -50%); }
  html.magical-night .trivia-theatre .journey-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px; gap: 5px; }
  html.magical-night .trivia-theatre .journey-legend li { padding: 5px; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 5px; border-radius: 9px; }
  html.magical-night .trivia-theatre .journey-player-number { width: 24px; height: 24px; font-size: 15px; }
  html.magical-night .trivia-theatre .journey-legend strong { font-size: 16px; line-height: 1.15; }
  html.magical-night .trivia-theatre .journey-legend small { font-size: 14px; line-height: 1.2; }
  html.magical-night .trivia-theatre .journey-legend progress { height: 4px; margin-top: 0; }
  html.magical-night .trivia-theatre .journey-question-picker { min-height: 0; padding: 12px; border-radius: 16px; order: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; }
  html.magical-night .trivia-theatre .journey-active-player { gap: 12px; }
  html.magical-night .trivia-theatre .journey-active-player > span { width: 42px; height: 42px; flex-basis: 42px; }
  html.magical-night .trivia-theatre .journey-active-player h2 { font-size: 24px; line-height: 1.2; margin: 0; }
  html.magical-night .trivia-theatre .journey-active-player :is(p, .trivia-section-kicker) { display: none; }
  html.magical-night .trivia-theatre .journey-question-picker > label { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 135px; gap: 10px; align-items: center; font-size: 17px; }
  html.magical-night .trivia-theatre #journey-value { min-height: 44px; height: 44px; padding: 5px 10px; font-size: 20px !important; }
  html.magical-night .trivia-theatre .journey-topic-choices { display: grid; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(86px, 1fr)); gap: 8px; margin: 0; }
  html.magical-night .trivia-theatre .journey-topic-choice { min-height: 0; margin: 0; padding: 9px; grid-template-columns: 32px minmax(0, 1fr) 12px; gap: 8px; }
  html.magical-night .trivia-theatre .journey-topic-choice:last-child { grid-column: 1 / -1; }
  html.magical-night .trivia-theatre .trivia-topic-art { width: 32px; height: 32px; }
  html.magical-night .trivia-theatre .trivia-topic-copy { gap: 4px; }
  html.magical-night .trivia-theatre .trivia-topic-copy strong { font-size: 20px; line-height: 1.2; }
  html.magical-night .trivia-theatre .trivia-topic-copy > span { font-size: 20px; line-height: 1.2; }
  html.magical-night.tv-view .trivia-theatre .trivia-topic-copy :is(strong, span) { font-size: 22px; }
  html.magical-night .trivia-theatre .journey-picker-help,
  html.magical-night .trivia-theatre .journey-question-picker > .profile-sync-note:empty { display: none; }
  html.magical-night .trivia-theatre .journey-question-picker > .profile-sync-note:not(:empty) { margin: 0; font-size: 14px; line-height: 1.25; }
  html.magical-night .trivia-theatre #continue-clue { min-height: 44px; padding: 7px 12px; font-size: 18px; }
}
/* END beeman-trivia-laptop-fit-v1 */