/* Friendly, readable typography. Root supplies the licensed local font files.
   Load after the magical presentation and gameplay styles. No remote requests. */
@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;
}
html.magical-night {
  --magic-body: 'Game Night Nunito', 'Avenir Next', 'Trebuchet MS', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --magic-serif: 'Game Night Lora', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font: var(--magic-body);
  --sans: var(--magic-body);
  --serif: var(--magic-serif);
}
body.magical-secondary {
  --ms-body: 'Game Night Nunito', 'Avenir Next', 'Trebuchet MS', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ms-serif: 'Game Night Lora', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font: var(--ms-body);
  --sans: var(--ms-body);
  --serif: var(--ms-serif);
}
html.magical-night body,
body.magical-secondary {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
html.magical-night :where(button, input, select, textarea),
body.magical-secondary :where(button, input, select, textarea) {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
}
html.magical-night :where(h1, h2, h3, h4),
body.magical-secondary :where(h1, h2, h3, h4) {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
}
html.magical-night .brand strong { font-family: var(--magic-serif); font-weight: 600; letter-spacing: -.025em; }
html.magical-night .lobby-showcase h1 { font-family: var(--magic-serif); font-size: clamp(53px, 5.1vw, 78px); font-weight: 500; line-height: 1.11; letter-spacing: -.035em; }
html.magical-night .lobby-showcase .night-hero-description,
html.magical-night .instant-play-note,
body.magical-secondary .room-intro > p:not(.eyebrow) { font-family: var(--font); font-size: 17px; line-height: 1.7; letter-spacing: 0; }
html.magical-night .magical-ticket-title { font-family: var(--magic-serif); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
html.magical-night .magical-section-heading h2,
html.magical-night .setup-step-heading h2,
html.magical-night .lobby-link-heading h2,
html.magical-night .magical-venue-copy strong,
html.magical-night .family-card-copy strong,
html.magical-night .mini-route-card strong { font-family: var(--magic-serif); font-weight: 500; letter-spacing: -.015em; line-height: 1.25; }
html.magical-night .eyebrow,
html.magical-night .magical-kicker,
html.magical-night .night-section-kicker,
html.magical-night .magical-ticket-kicker,
body.magical-secondary .eyebrow { font-family: var(--font); font-size: 12px; font-weight: 650; letter-spacing: .055em; line-height: 1.5; text-transform: none; }
html.magical-night .magical-ticket-stub,
html.magical-night .quick-game-links,
html.magical-night [data-setup-summary],
html.magical-night .profile-sync-note { font-family: var(--font); font-size: 12px; line-height: 1.6; letter-spacing: .01em; }
html.magical-night .magical-ticket-detail,
html.magical-night .magical-cast-level,
html.magical-night .magical-cast-edit,
html.magical-night .tonight-topic-action,
html.magical-night .studio-devices-button small,
html.magical-night .studio-quick-edits small,
html.magical-night .studio-quick-rounds label,
html.magical-night #rounds-help { font-family: var(--font); font-size: 12px; line-height: 1.55; letter-spacing: 0; }
html.magical-night .lobby-showcase .instant-play-note { font-size: 13px !important; line-height: 1.65; }
html.magical-night .magical-cast-member strong,
html.magical-night .magical-family-cast strong,
html.magical-night .tonight-preview-topic strong,
html.magical-night .player-row :is(input, select) { font-family: var(--font); font-weight: 650; line-height: 1.4; letter-spacing: 0; }
html.magical-night .primary-button,
html.magical-night .secondary-button,
body.magical-secondary :is(.primary, .secondary) { font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: 1.4; }
html.magical-night .game-actions .small-button { font-family: var(--font); font-size: 13px; font-weight: 650; line-height: 1.4; letter-spacing: 0; }
html.magical-night .magical-play-shell .turn-player-name { font-family: var(--font); font-weight: 700; letter-spacing: -.025em; line-height: 1.14; }
html.magical-night .magical-play-shell .turn-name-label { font-family: var(--magic-serif); font-size: 15px; font-weight: 400; line-height: 1.5; }
html.magical-night .magical-play-shell .turn-caption { font-family: var(--font); font-size: 15px; line-height: 1.6; }
html.magical-night .magical-play-shell .turn-round { font-family: var(--font); font-size: 13px; line-height: 1.6; }
html.magical-night .magical-play-shell .turn-round > strong { font-family: var(--font); font-size: 21px; font-weight: 700; line-height: 1.35; }
html.magical-night .magical-play-shell .studio-player-points { font-family: var(--magic-serif); font-weight: 600; font-variant-numeric: tabular-nums; }
html.magical-night .magical-play-shell .studio-player-points small { font-family: var(--font); font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .045em; text-transform: lowercase; }
html.magical-night .magical-play-shell .category-cell,
body.magical-online .online-category strong { font-family: var(--font); font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
html.magical-night .magical-play-shell .value-cell,
body.magical-online .online-tile { font-family: var(--serif); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
html.magical-night .magical-play-shell .studio-board-caption > span,
html.magical-night .magical-play-shell .board-bottom,
body.magical-online .online-board-frame .studio-board-caption > span { font-family: var(--font); font-size: 12px; line-height: 1.6; letter-spacing: 0; }
html.magical-night .magical-play-shell .score-panel h2 { font-family: var(--magic-serif); font-weight: 500; line-height: 1.25; }
html.magical-night .magical-play-shell .score-name { font-family: var(--font); font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
html.magical-night .magical-play-shell .score-level,
html.magical-night .magical-play-shell .score-bonus { font-family: var(--font); font-size: 12px; line-height: 1.5; letter-spacing: 0; }
html.magical-night .magical-play-shell .score-value { font-family: var(--magic-serif); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
html.magical-night .magical-play-shell .score-caption { font-family: var(--font); font-size: 12px; line-height: 1.75; letter-spacing: 0; }
html.magical-night .magical-clue-dialog .question-heading,
body.magical-online #room-question > h2 { font-family: var(--font); font-size: clamp(25px, 2.4vw, 31px); font-weight: 650; line-height: 1.5; letter-spacing: -.015em; }
html.magical-night .magical-clue-dialog .question-meta strong,
html.magical-night .magical-clue-dialog .question-player strong,
body.magical-online #room-question .room-clue-top strong { font-family: var(--font); font-weight: 700; line-height: 1.45; letter-spacing: 0; }
html.magical-night .magical-clue-dialog .question-meta strong { font-size: 22px; }
html.magical-night .magical-clue-dialog .question-player,
html.magical-night .magical-clue-dialog .level-chip { font-family: var(--font); font-size: 13px; line-height: 1.55; letter-spacing: 0; }
html.magical-night .magical-clue-dialog .answer-option,
body.magical-online #room-question .room-answer { font-family: var(--font); font-size: 19px; font-weight: 550; line-height: 1.55; letter-spacing: 0; }
html.magical-night .magical-clue-dialog .answer-letter,
body.magical-online #room-question .room-answer > span { font-family: var(--font); font-weight: 700; letter-spacing: 0; }
html.magical-night .magical-clue-dialog :is(.read-button, .question-tools button),
body.magical-online #room-question :is(.primary, .secondary) { font-family: var(--font); font-size: 14px; line-height: 1.5; letter-spacing: 0; }
html.magical-night .magical-clue-dialog .answer-feedback p,
html.magical-night .magical-clue-dialog .learn-more p,
body.magical-online #room-question .room-answer-feedback { font-family: var(--font); font-size: 17px; line-height: 1.75; letter-spacing: 0; }
html.magical-night .magical-clue-dialog .learn-more summary,
html.magical-night .magical-clue-dialog .source-link,
body.magical-online #room-question .room-answer-feedback a { font-family: var(--font); font-size: 15px; font-weight: 650; line-height: 1.5; letter-spacing: 0; }
html.magical-night .magical-finale-shell .studio-results-copy h1,
body.magical-online .room-finale h2 { font-family: var(--serif); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
html.magical-night .magical-finale-shell .result-intro,
body.magical-online .room-finale p { font-family: var(--font); font-size: 17px; line-height: 1.75; letter-spacing: 0; }
html.magical-night .magical-finale-shell .result-person strong { font-family: var(--font); font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
html.magical-night .magical-finale-shell .result-person small { font-family: var(--font); font-size: 13px; line-height: 1.6; letter-spacing: 0; }
html.magical-night .magical-finale-shell .result-score { font-family: var(--magic-serif); font-weight: 600; font-variant-numeric: tabular-nums; }
html.magical-night .magical-finale-shell .discovery-line { font-family: var(--font); font-size: 15px; line-height: 1.75; letter-spacing: 0; }
body.magical-online .online-room-heading h1 { font-family: var(--ms-serif); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
body.magical-online .online-room-heading .room-turn-message { font-family: var(--font); font-size: 14px; line-height: 1.65; letter-spacing: 0; }
body.magical-online .online-score-card strong { font-family: var(--font); font-size: 17px; font-weight: 700; line-height: 1.35; }
body.magical-online .online-score-card small { font-family: var(--font); font-size: 12px; line-height: 1.5; }
body.magical-online .online-score-card b { font-family: var(--ms-serif); font-weight: 600; font-variant-numeric: tabular-nums; }
body.magical-online :is(.room-hint, .room-connection, .room-profile-sync) { font-family: var(--font); font-size: 13px; line-height: 1.65; letter-spacing: 0; }

@media (max-width: 520px) {
  html.magical-night .lobby-showcase h1 { font-size: clamp(41px, 10.8vw, 53px); line-height: 1.13; letter-spacing: -.035em; }
  html.magical-night .lobby-showcase .night-hero-description { font-size: 16px; line-height: 1.65; }
  html.magical-night .magical-ticket-title { font-size: 28px; line-height: 1.25; }
  html.magical-night .eyebrow,
  html.magical-night .magical-kicker,
  html.magical-night .night-section-kicker,
  html.magical-night .magical-ticket-kicker,
  body.magical-secondary .eyebrow { font-size: 11px; letter-spacing: .045em; }
  html.magical-night .game-actions .small-button { font-size: 12px; }
  html.magical-night .magical-play-shell .turn-name-label { font-size: 13px; }
  html.magical-night .magical-play-shell .turn-caption { font-size: 13px; }
  html.magical-night .magical-play-shell .turn-round { font-size: 12px; }
  html.magical-night .magical-play-shell .turn-round > strong { font-size: 18px; }
  html.magical-night .magical-play-shell .category-cell,
  body.magical-online .online-category strong { font-size: 14px; line-height: 1.3; }
  html.magical-night .magical-play-shell .board-bottom,
  html.magical-night .magical-play-shell .studio-board-caption > span,
  body.magical-online .online-board-frame .studio-board-caption > span { font-size: 11px; }
  html.magical-night .magical-clue-dialog .question-heading,
  body.magical-online #room-question > h2 { font-size: 24px; line-height: 1.48; }
  html.magical-night .magical-clue-dialog.level-tiny .question-heading { font-size: 27px; line-height: 1.45; }
  html.magical-night .magical-clue-dialog .question-meta strong { font-size: 18px; }
  html.magical-night .magical-clue-dialog .question-player,
  html.magical-night .magical-clue-dialog .level-chip { font-size: 12px; }
  html.magical-night .magical-clue-dialog .answer-option,
  body.magical-online #room-question .room-answer { font-size: 18px; line-height: 1.55; }
  html.magical-night .magical-clue-dialog .answer-feedback p,
  html.magical-night .magical-clue-dialog .learn-more p,
  body.magical-online #room-question .room-answer-feedback { font-size: 16px; line-height: 1.7; }
  html.magical-night .magical-finale-shell .result-person strong { font-size: 19px; }
  html.magical-night .magical-finale-shell .result-person small { font-size: 12px; }
  body.magical-online .online-room-heading .room-turn-message { font-size: 12px; }
}
@media (min-width: 1000px) and (max-height: 850px) {
  html.magical-night .magical-clue-dialog .question-heading { font-size: 30px; }
  html.magical-night .magical-clue-dialog .answer-option { font-size: 20px; }
}

/* Product-photo prices keep the item and all four choices together. */
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-top{min-height:78px;padding:12px 24px}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .studio-clue-art{width:62px;height:62px;flex-basis:62px}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 25px;padding:16px 28px 22px}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-player,
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-heading,
html.magical-night .magical-clue-dialog.grocery-clue-dialog .auction-sale-details,
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-tools,
html.magical-night .magical-clue-dialog.grocery-clue-dialog .answer-feedback,
html.magical-night .magical-clue-dialog.grocery-clue-dialog .daily-double-reveal{grid-column:1/-1}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-player{margin:0}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-avatar{width:42px;height:48px}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-heading{font-size:clamp(24px,2.2vw,29px);line-height:1.3;margin:8px 0 0}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .auction-sale-details{font-size:15px;line-height:1.4;margin:0 0 6px}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-photo{grid-column:1;margin:0;align-self:start}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-photo img{height:205px}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-photo figcaption{padding:9px 13px;font-size:16px}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-photo figcaption span{font-size:13px;margin-top:3px}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-options{grid-column:2;display:grid;grid-template-columns:1fr;gap:10px;align-self:start}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .answer-option{font-size:22px;min-height:58px;padding:10px 16px}
html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-tools{margin:2px 0 0}
@media(max-width:620px){
 html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-top{padding:10px 13px;gap:9px}
 html.magical-night .magical-clue-dialog.grocery-clue-dialog .studio-clue-art{width:43px;height:43px;flex-basis:43px}
 html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-meta strong{font-size:17px}
 html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-body{grid-template-columns:1fr;padding:13px;gap:10px}
 html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-heading{font-size:23px}
 html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-photo{grid-column:1}
 html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-photo img{height:140px}
 html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-photo figcaption{font-size:15px;padding:7px 11px}
 html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-options{grid-column:1;grid-template-columns:1fr 1fr;gap:9px}
 html.magical-night .magical-clue-dialog.grocery-clue-dialog .answer-option{font-size:20px;min-height:58px;padding:9px}
 html.magical-night .magical-clue-dialog.grocery-clue-dialog .answer-letter{width:28px;height:28px;flex-basis:28px;font-size:15px}
}