/* Main Street at blue hour: original paintings, printed invitations and a grand game theatre. */
html.magical-night {
  --magic-paper: #fbf3e1;
  --magic-ivory: #fff8e9;
  --magic-ink: #283548;
  --magic-navy: #162a43;
  --magic-indigo: #213d63;
  --magic-gold: #d6a452;
  --magic-brass: #99703b;
  --magic-coral: #ae5d4f;
  --magic-muted: #6f6b60;
  --magic-serif: Georgia, 'Times New Roman', serif;
  --magic-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bg: var(--magic-paper);
  --panel: #fff9ee;
  --panel2: #f0e3cb;
  --cream: var(--magic-ink);
  --muted: var(--magic-muted);
  --gold: #805c2e;
  --mint: #496c69;
  --line: #ab874635;
  color-scheme: light;
  background: var(--magic-paper);
}
html.magical-night body { color: var(--magic-ink); background: var(--magic-paper); font-family: var(--magic-body); }
html.magical-night .ambient { display: none; }
html.magical-night :where(button, a, input, select, summary):focus-visible { outline: 3px solid #235276; outline-offset: 5px; }
html.magical-night :where(button, a, summary) { touch-action: manipulation; }
html.magical-night :where(button, input, select) { font-family: var(--magic-body); }
html.magical-night button:disabled { cursor: default; }
html.magical-night .site-header { max-width: 1580px; padding: 25px 42px 23px; border-bottom: 1px solid #ab874633; margin: 0 auto; }
html.magical-night .brand { color: var(--magic-ink); }
html.magical-night .brand-icon { background: #f0deba; border: 1px solid #c19b5a; border-radius: 50%; padding: 7px; box-shadow: 0 2px 0 #c8ae7c55; }
html.magical-night .brand strong { font-family: var(--magic-serif); font-size: 25px; font-weight: 600; letter-spacing: -.025em; }
html.magical-night .header-actions { gap: 12px; }
html.magical-night .header-actions .text-button { color: #384451; font-size: 14px; }
html.magical-night .header-actions .icon-button { color: var(--magic-ink); border: 1px solid #b3956155; background: #fff9ee; border-radius: 50%; }
html.magical-night .site-footer { max-width: 1440px; margin: 65px auto 0; color: #655c4d; border-top-color: #ad8a4a35; font-size: 14px; }

/* The hero is one uninterrupted painting. Controls sit in its calm upper-left sky. */
html.magical-night .lobby.setup-flow-lobby { max-width: 1580px; padding: 0 30px; margin: 24px auto 70px; }
html.magical-night .lobby-showcase { display: block; position: relative; isolation: isolate; min-height: 690px; overflow: hidden; border-radius: 12px; border: 1px solid #937953; padding: 60px 64px 52px; background: #193755; box-shadow: 0 13px 30px #593d2b16; }
html.magical-night .lobby-showcase .instant-play-heading { position: relative; z-index: 2; max-width: 645px; width: 50%; margin: 0; text-align: left; color: var(--magic-ivory); }
html.magical-night .magical-hero-art { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; border-radius: 0; background: linear-gradient(135deg, #183655, #294967 55%, #bd8e52); }
html.magical-night .magical-hero-art::before { display: none; }
html.magical-night .magical-street-art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
html.magical-night .magical-street-art[hidden] { display: none; }
html.magical-night .magical-street-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #0e2338eb 0%, #142b44d9 26%, #172b4375 45%, #172b4300 67%), linear-gradient(0deg, #14233880, transparent 30%); }
html.magical-night .magical-marquee { position: absolute; right: 35px; bottom: 23px; display: flex; align-items: center; gap: 15px; padding: 10px 20px; border: 1px solid #eac27b70; color: #fff1d0; background: #102a3ae3; font: italic 19px var(--magic-serif); letter-spacing: .01em; box-shadow: 0 3px 16px #07101d30; }
html.magical-night .magical-marquee-star { color: #e2b166; font-size: 13px; }
html.magical-night .night-eyebrow { justify-content: flex-start; color: #f1d295; font-size: 12px; letter-spacing: .13em; margin-bottom: 23px; font-weight: 600; }
html.magical-night .lobby-showcase h1 { color: #fff5df; font-family: var(--magic-serif); font-size: clamp(57px, 5.3vw, 82px); font-weight: 400; letter-spacing: -.055em; line-height: 1.05; margin: 0 0 22px; text-shadow: 0 2px 10px #0b1e3322; }
html.magical-night .lobby-showcase .night-hero-description { font-size: 20px; line-height: 1.65; color: #f0e5d2; max-width: 535px; margin: 0 0 23px; }
html.magical-night .night-hero-perks { gap: 17px; margin: 0 0 30px; }
html.magical-night .night-hero-perks > span { font-size: 13px; padding: 0; border: 0; border-radius: 0; color: #efddb9; background: transparent; }
html.magical-night .night-hero-perks > span + span::before { content: '✦'; color: #d4ab69; font-size: 8px; margin-right: 17px; }
html.magical-night .lobby-showcase .lobby-primary-actions { display: grid; grid-template-columns: 1.13fr 1fr; gap: 15px; margin-top: 0; }
html.magical-night .lobby-showcase .magical-admission-ticket { position: relative; display: flex; align-items: stretch; min-height: 113px; width: 100%; margin: 0; padding: 0; overflow: visible; border-radius: 3px; border: 1px solid #f8d896; background: linear-gradient(120deg, #ffecc0, #f0c87e); color: #3b3225; text-align: left; box-shadow: 0 4px 0 #8b662c, 0 10px 23px #05182c55; transition: transform .2s, box-shadow .2s; }
html.magical-night .magical-admission-ticket::before, html.magical-night .magical-admission-ticket::after { content: ''; position: absolute; right: 59px; width: 12px; height: 7px; border-radius: 0 0 10px 10px; background: #173048; top: -1px; }
html.magical-night .magical-admission-ticket::after { top: auto; bottom: -1px; transform: rotate(180deg); }
html.magical-night .magical-ticket-main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 15px 18px 17px; min-width: 0; }
html.magical-night .magical-ticket-kicker { font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
html.magical-night .magical-ticket-title { display: flex; align-items: center; gap: 8px; font-family: var(--magic-serif); font-size: clamp(28px, 2.5vw, 38px); font-weight: 600; line-height: 1.1; white-space: nowrap; }
html.magical-night .magical-ticket-title .lobby-action-icon { width: 27px; height: 27px; flex: 0 0 27px; color: #4a3821; }
html.magical-night .magical-ticket-detail { font-size: 11px; font-weight: 500; }
html.magical-night .magical-ticket-stub { display: flex; flex: 0 0 65px; flex-direction: column; align-items: center; justify-content: center; border-left: 1px dashed #987444a0; font: 9px var(--magic-body); letter-spacing: .1em; gap: 3px; }
html.magical-night .magical-ticket-stub strong { font: 24px var(--magic-serif); letter-spacing: 0; }
html.magical-night .magical-ticket-stub i { display: block; width: 34px; height: 10px; margin-top: 3px; background: repeating-linear-gradient(90deg, #76562a 0 1px, transparent 1px 3px, #76562a 3px 5px, transparent 5px 6px); opacity: .7; }
html.magical-night .lobby-showcase .magical-admission-ticket:hover { transform: translateY(-3px); box-shadow: 0 7px 0 #8b662c, 0 14px 27px #05182c55; }
html.magical-night .lobby-showcase .magical-admission-ticket:active { transform: translateY(2px); box-shadow: 0 2px 0 #8b662c; }
html.magical-night .lobby-showcase .studio-devices-button { display: flex; min-height: 113px; gap: 10px; margin: 0; padding: 14px 16px; border: 1px solid #ecd3a077; border-radius: 3px; background: #122d44de; color: #fff3d9; box-shadow: 0 4px 0 #092135; text-decoration: none; }
html.magical-night .studio-devices-button .lobby-action-icon { width: 35px; height: 35px; flex: 0 0 35px; }
html.magical-night .lobby-showcase .studio-devices-button strong { font-family: var(--magic-serif); font-size: 23px; font-weight: 400; line-height: 1.15; }
html.magical-night .lobby-showcase .studio-devices-button small { color: #e0d2b9; font-size: 10px; line-height: 1.5; margin-top: 7px; }
html.magical-night .lobby-showcase .instant-play-note { margin: 19px 0 0; font-size: 12px !important; line-height: 1.7; color: #e7d7bd; }
html.magical-night .quick-game-links { justify-content: flex-start; gap: 17px; margin: 17px 0 0; }
html.magical-night .quick-game-links .small-button { min-height: 36px; padding: 2px 0; border: 0; border-radius: 0; background: transparent; color: #f3ddb5; font-size: 12px; box-shadow: none; }
html.magical-night .quick-game-links .lobby-action-icon { width: 23px; height: 23px; flex: 0 0 23px; }
html.magical-night .lobby-showcase :where(button, a):focus-visible { outline-color: #ffdc83; }
html.magical-night .lobby-showcase .resume-card { background: #102a3ce6; color: #fff2d9; border: 1px solid #d1b57488; padding: 14px; margin: 0 0 20px; border-radius: 3px; }
html.magical-night .resume-card p, html.magical-night .resume-card small { color: inherit; }

/* A visible cast, rather than making families hunt for the customization form. */
html.magical-night .magical-family-cast { margin: 47px 0 0; }
html.magical-night .magical-section-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
html.magical-night .magical-section-heading h2 { margin: 4px 0 0; font: 400 clamp(29px, 3vw, 41px)/1.15 var(--magic-serif); letter-spacing: -.035em; color: var(--magic-ink); }
html.magical-night .magical-section-heading > p { margin: 0 0 0 auto; font-size: 14px; line-height: 1.6; color: #756951; text-align: right; }
html.magical-night .magical-step-seal { display: grid; place-items: center; width: 55px; height: 55px; flex: 0 0 55px; border: 1px solid #b59459; outline: 1px solid #b594594a; outline-offset: -5px; border-radius: 50%; background: #f2e4c7; color: #8a642f; font: italic 26px var(--magic-serif); }
html.magical-night .magical-kicker { display: block; color: #805c2e; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
html.magical-night .magical-cast-lineup { display: grid; grid-template-columns: repeat(var(--magical-cast-columns, 4), minmax(0, 1fr)); padding: 17px 8px 11px; border-top: 1px solid #b594593b; border-bottom: 1px solid #b594593b; }
html.magical-night .magical-cast-member { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 12px 17px; background: transparent; border: 0; border-radius: 4px; color: var(--magic-ink); box-shadow: none; text-align: center; transition: background .2s; }
html.magical-night .magical-cast-member:hover { background: #efdfc180; }
html.magical-night .magical-cast-portrait { display: grid; place-items: center; width: 92px; height: 101px; margin-bottom: 10px; padding: 9px; border-radius: 48% 48% 43% 43%; background: #eddec5; border: 1px solid #b391563d; box-shadow: inset 0 0 0 5px #faf0dc; }
html.magical-night .magical-cast-portrait .avatar-graphic { width: 100%; height: 100%; }
html.magical-night .magical-cast-member strong { font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; }
html.magical-night .magical-cast-level { font-size: 12px; line-height: 1.35; color: #786648; }
html.magical-night .magical-cast-edit { font-size: 10px; color: #49706e; margin-top: 6px; }
html.magical-night .studio-quick-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .34fr); gap: 10px 30px; align-items: center; padding: 24px 0; margin: 0 0 21px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html.magical-night .studio-quick-edits { display: flex; gap: 15px; }
html.magical-night .studio-quick-edits .small-button { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 63px; padding: 11px 18px; border: 1px solid #b3935e70; border-radius: 3px; background: #fff9ee; color: var(--magic-ink); box-shadow: 0 2px 0 #b09c7428; }
html.magical-night .studio-quick-edits .small-button .lobby-action-icon { width: 32px; height: 32px; flex: 0 0 32px; }
html.magical-night .studio-quick-edits .small-button span { font-size: 15px; }
html.magical-night .studio-quick-edits .small-button small { font-size: 11px; color: #786648; }
html.magical-night .studio-quick-rounds label { color: #80633b; font-size: 11px; letter-spacing: .04em; margin-bottom: 6px; }
html.magical-night .studio-quick-rounds select { width: 100%; padding: 11px 13px; min-height: 45px; background: #fffaf0; border: 1px solid #b3935e70; border-radius: 3px; color: var(--magic-ink); font-size: 15px; }
html.magical-night .studio-quick-setup #rounds-help { grid-column: 1/-1; color: #776d5c; font-size: 11px; margin: 0; text-align: right; }
html.magical-night .setup-customize { border: 1px solid #b89a654d; border-radius: 4px; background: #fffaef; margin-bottom: 50px; }
html.magical-night .setup-customize > summary { padding: 19px 25px; font-size: 19px; color: var(--magic-ink); }
html.magical-night .customize-summary-label { font-size: 19px !important; color: var(--magic-ink) !important; gap: 13px; }
html.magical-night .setup-customize > summary > span:last-child { font-size: 22px; color: #927043; }
html.magical-night .setup-card.setup-flow-card { background: #fffaef; padding: 28px; box-shadow: none; }
html.magical-night .setup-step { border-bottom-color: #b093633b; }
html.magical-night .setup-step-badge { color: #845f29; background: #edddba; border: 1px solid #baa16d; font-family: var(--magic-serif); }
html.magical-night .setup-step-heading h2 { font-family: var(--magic-serif); font-weight: 400; font-size: 30px; }
html.magical-night .setup-step-content > p { color: #6f6758; font-size: 15px; line-height: 1.7; }
html.magical-night .setup-flow-card :where(input:not([type=checkbox]), select), html.magical-night .history-player-select { color: #2b3d4a; background: #fffdf6; border-color: #b1915755; font-size: 16px; min-height: 46px; }
html.magical-night :where(.small-button, .secondary-button) { color: #314653; border-color: #b6996463; background: #fff8e8; }
html.magical-night .setup-flow-card .avatar-button { background: #e9d9b9; border-color: #b494624f; }
html.magical-night .setup-flow-card .add-player { color: #38645e; border-color: #7d9b8366; }
html.magical-night .setup-step-status, html.magical-night .profile-sync-note { color: #50706b; }
html.magical-night .setup-flow-card .optional-registration, html.magical-night .setup-flow-card .setup-advanced { background: #f1e6d0; border-color: #b1915733; }
html.magical-night .setup-flow-card .difficulty-player-name, html.magical-night .setup-name-field { color: var(--magic-ink); }
html.magical-night .setup-flow-card .setup-difficulty-row { border-color: #b8986533; }
html.magical-night .setup-flow-card .start-button { color: #fff5de; background: #214b58; border: 1px solid #285e6b; border-radius: 3px; font-size: 22px; box-shadow: 0 3px 0 #173844; }

/* Topic signs and painted discovery pavilions: imagery carries the invitation. */
html.magical-night .tonight-preview { padding: 0; margin: 49px 0 50px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html.magical-night .lobby-link-heading h2 { font: 400 clamp(28px, 2.6vw, 39px) var(--magic-serif); letter-spacing: -.035em; color: var(--magic-ink); }
html.magical-night .lobby-link-heading p { color: #786950; font-size: 14px; }
html.magical-night .night-section-kicker { color: #805c2e; font-size: 10px; }
html.magical-night .tonight-preview-grid { gap: 20px; }
html.magical-night .tonight-preview-topic { min-height: 229px; border-radius: 45% 45% 5px 5px; border: 1px solid #b0915866; border-bottom: 3px solid #ab89535e; padding: 27px 12px 17px; background: #fffaf0; box-shadow: 0 5px 12px #7a5c2a09; }
html.magical-night .tonight-preview-topic .category-artwork { width: 116px; height: 116px; margin-bottom: 8px; }
html.magical-night .tonight-preview-topic strong { color: #33434c; font-size: 17px; font-weight: 600; line-height: 1.35; min-height: 42px; }
html.magical-night .tonight-topic-action { color: #805c2e; font-size: 10px; margin-top: 9px; }
html.magical-night .tonight-preview-topic:hover { transform: translateY(-4px); box-shadow: 0 8px 20px #7a5c2a14; border-color: #8c682c; }
html.magical-night .magical-promenade { margin: 0 0 58px; }
html.magical-night .magical-venue-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
html.magical-night .magical-venue { position: relative; display: block; min-width: 0; padding: 0; border: 1px solid #ad8d584d; border-radius: 5px; background: #fff9ee; color: var(--magic-ink); overflow: hidden; text-align: left; box-shadow: 0 5px 14px #7356270b; transition: transform .2s, box-shadow .2s; }
html.magical-night .magical-venue-art { display: block; aspect-ratio: 1.45; overflow: hidden; background: linear-gradient(140deg, #26485c, #83765e); }
html.magical-night .magical-venue-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
html.magical-night .magical-venue-art img[hidden] { display: none; }
html.magical-night .magical-venue-copy { display: flex; flex-direction: column; gap: 7px; padding: 20px 24px 23px; }
html.magical-night .magical-venue-copy small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #805c2e; }
html.magical-night .magical-venue-copy strong { font: 400 28px/1.2 var(--magic-serif); letter-spacing: -.03em; }
html.magical-night .magical-venue-copy > span { margin-top: 4px; color: #52766d; font-size: 12px; }
html.magical-night .magical-venue-copy > span > span { float: right; font-size: 17px; }
html.magical-night .magical-venue:hover { transform: translateY(-4px); box-shadow: 0 11px 25px #7356271d; }
html.magical-night .magical-venue:hover img { transform: scale(1.025); }
html.magical-night .family-route-card { border-radius: 4px; border: 1px solid #a78b5859; background: #f4e7ce; color: var(--magic-ink); min-height: 154px; box-shadow: 0 3px 0 #b5996755; }
html.magical-night .family-card-copy strong { color: #33434c; font-family: var(--magic-serif); font-weight: 400; font-size: 26px; }
html.magical-night .family-card-copy small { color: #776d5b; font-size: 12px; }
html.magical-night .route-arrow { color: #805c2e; }
html.magical-night .illustrated-family-links, html.magical-night .illustrated-minigames { margin-top: 44px; }
html.magical-night .mini-route-grid { gap: 18px; }
html.magical-night .mini-route-card { border-radius: 4px; border: 1px solid #b1956060; min-height: 112px; padding: 24px; background: #e8dbbf; color: var(--magic-ink); box-shadow: 0 3px 0 #b5996744; }
html.magical-night .mini-route-card strong { color: #31424c; font-family: var(--magic-serif); font-size: 24px; font-weight: 400; }
html.magical-night .mini-route-card small { color: #6a624f; font-size: 12px; }
html.magical-night .quiet-route { background: #dee2df; }
html.magical-night .incognito-route { background: #e8deea; }
html.magical-night .outings-route { background: #e0e7d5; }

/* The game theatre keeps every command, value, player watermark and saved board. */
html.magical-night .game-shell { --cream: #fff4dc; --muted: #d4c6ac; --gold: #efcc8a; --mint: #a8d2c1; --line: #d5bb7d42; max-width: 1570px; padding: 0 35px; color: var(--cream); }
html.magical-night .game-heading { color: #283e50; margin-bottom: 20px; }
html.magical-night .game-heading h1 { color: #283e50; font: 400 39px var(--magic-serif); letter-spacing: -.04em; }
html.magical-night .game-heading .eyebrow { color: #805c2e; font-size: 10px; }
html.magical-night .game-actions .small-button { color: #304552; background: #fff9ee; border-color: #b39a6e77; border-radius: 3px; padding: 11px 13px; font-size: 12px; }
html.magical-night .game-shell .turn-banner { background: linear-gradient(120deg, #1f3a51, #1e2e48); border: 1px solid #c29d58; border-radius: 5px; padding: 25px 30px; box-shadow: inset 0 0 0 5px #d8bd7e14, 0 3px 0 #b294603d; }
html.magical-night .turn-person { gap: 25px; }
html.magical-night .game-shell .big-avatar { width: 120px; height: 120px; flex: 0 0 120px; border-radius: 50%; background: #f2e2bd; border: 2px solid #d4b16b; padding: 8px; box-shadow: 0 0 0 6px #dec79011; }
html.magical-night .turn-player-name, html.magical-night.tv-view .turn-player-name { font-size: clamp(43px, 5.8vw, 79px); color: #fff3d8; font-weight: 650; line-height: 1; letter-spacing: -.04em; }
html.magical-night .turn-name-label { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: #e0c898; }
html.magical-night .turn-caption { color: #d5cbb8; font-size: 15px; }
html.magical-night .game-shell .level-chip { color: #efd9ab; background: #c5ab6b16; border-color: #cfb27545; }
html.magical-night .turn-round strong { color: #efcf91; font-size: 20px; }
html.magical-night .studio-player-points { color: #ffe7b5; font-family: var(--magic-serif); font-size: 37px; font-weight: 400; }
html.magical-night .studio-player-points small { color: #d3c2a2; font-family: var(--magic-body); }
html.magical-night .game-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 25px; }
html.magical-night .game-shell .board-wrap { border-radius: 6px; border: 1px solid #ae8741; padding: 17px; background: linear-gradient(145deg, #2c4865, #172c45); box-shadow: inset 0 0 0 5px #d9b97b16, 0 5px 0 #987b4a33; }
html.magical-night .studio-board-caption strong { color: #f1cf8a; font-size: 11px; letter-spacing: .12em; }
html.magical-night .studio-board-caption span { color: #ddcead; font-size: 12px; }
html.magical-night .game-shell .trivia-board { background: transparent; gap: 8px; }
html.magical-night .game-shell .category-cell { min-height: 118px; border-radius: 4px 4px 1px 1px; background: linear-gradient(140deg, #36556d, #26445e); border: 1px solid #c7ab6a60; color: #fff0d1; font-size: 18px; font-weight: 550; box-shadow: none; }
html.magical-night .board-topic-illustration { width: 73px; height: 73px; }
html.magical-night .game-shell .value-cell:not(.used) { min-height: 67px; background: color-mix(in srgb, var(--turn-accent, #d6a452) 7%, #173654e0); border-radius: 2px; border: 1px solid #bc9d5966; color: #f6dc9f; font-size: clamp(25px, 2.45vw, 38px); font-weight: 600; font-family: var(--magic-serif); letter-spacing: 0; text-shadow: 0 1px 1px #0b1b2b; box-shadow: inset 0 1px 0 #ebd19520; }
html.magical-night .game-shell .value-cell:hover:not(:disabled) { background: #3f6179; color: #fff0c5; border-color: #ffe1a0; box-shadow: 0 2px 8px #0002; transform: translateY(-2px); }
html.magical-night .game-shell .value-cell.used { min-height: 67px; border-radius: 2px; background: #172e44; border-color: #8297a630; color: #8198a3; opacity: .8; box-shadow: none; }
html.magical-night .game-shell .value-cell.used.correct { color: #c2dfc5; background: #294c4b; border-color: #8ba68b5e; }
html.magical-night .studio-tile-spark { color: #e7c990; opacity: .36; }
html.magical-night .board-watermark { opacity: .12; }
html.magical-night .board-bottom { color: #e0d1b3; font-size: 12px; }
html.magical-night .game-shell .score-panel { padding: 23px 15px; color: #fff0d6; border: 1px solid #b99d60; border-radius: 5px; background: #20374b; box-shadow: inset 0 0 0 4px #d9bb7b13; }
html.magical-night .score-panel h2 { font: 400 26px var(--magic-serif); color: #ffe9ba; }
html.magical-night .score-list { max-height: 630px; overflow-y: auto; padding-right: 3px; scrollbar-color: #ab925c #23384a; }
html.magical-night .game-shell .score-item { border-radius: 3px; min-height: 82px; background: #172f43; border-color: #c9b57824; }
html.magical-night .game-shell .score-item.active { border-color: #e6c584; background: #395064; box-shadow: inset 3px 0 0 #efcf86; }
html.magical-night .score-avatar { border-radius: 50%; width: 57px; height: 57px; background: #e4d6b7; padding: 3px; }
html.magical-night .score-name { color: #fff2d9; font-size: 16px; }
html.magical-night .score-level, html.magical-night .score-bonus { color: #d5cbb7; font-size: 10px; }
html.magical-night .score-value { color: #ffe0a0; font: 27px var(--magic-serif); }
html.magical-night .score-caption { color: #d7c9af; font-size: 12px; line-height: 1.7; }

/* Parchment questions and an illustrated, clearly grouped topic library. */
html.magical-night .question-dialog, html.magical-night .info-dialog { color: var(--magic-ink); border-radius: 6px; border: 1px solid #c5a367; background: #fff9ed; box-shadow: 0 35px 100px #0c1d39a8, inset 0 0 0 5px #b4996321; }
html.magical-night .question-dialog { max-width: 1080px; }
html.magical-night .question-dialog::backdrop, html.magical-night .info-dialog::backdrop { background: #081b32d1; backdrop-filter: blur(9px); }
html.magical-night .question-top { padding: 17px 28px; min-height: 112px; background: #f0e2c6; border-bottom: 1px solid #b895594d; }
html.magical-night .question-meta strong { color: #2f4b5b; font-size: 22px; }
html.magical-night .question-value { color: #8b6229; background: #fff7e4; border-color: #b6945569; font-family: var(--magic-serif); border-radius: 3px; }
html.magical-night .question-top > .level-chip { color: #5c695d; background: #e1e6d8; border-color: #879e7b45; font-size: 12px; }
html.magical-night .studio-clue-art { width: 83px; height: 83px; flex: 0 0 83px; filter: drop-shadow(0 3px 2px #6a563029); }
html.magical-night .question-body { padding: 26px 37px 32px; }
html.magical-night .question-player { color: #796d57; font-size: 13px; }
html.magical-night .question-player strong { color: #435767; }
html.magical-night .question-avatar { border-radius: 50%; background: #e3d0a9; }
html.magical-night .question-heading { color: #273e50; font: 600 clamp(27px, 3.1vw, 40px)/1.34 var(--magic-body); letter-spacing: -.027em; }
html.magical-night .question-options { gap: 12px; }
html.magical-night .answer-option { min-height: 65px; padding: 16px 20px; background: #fffdf7; color: #344958; border: 1px solid #b79a605b; border-radius: 4px; font-size: 19px; line-height: 1.5; box-shadow: 0 2px 0 #b9a47c16; }
html.magical-night .answer-option .answer-letter { color: #785426; background: #f4e9d2; border-color: #b6935466; border-radius: 50%; }
html.magical-night .answer-option:not(:disabled):hover { color: #243e4d; background: #efe4cc; border-color: #a0783c; }
html.magical-night .answer-option.correct-answer { color: #2d5d44; background: #e1edd9; border-color: #6a956d; }
html.magical-night .answer-option.wrong-answer { color: #844c43; background: #f3ddd5; border-color: #b77d6f; }
html.magical-night .read-button, html.magical-night .pass-button { color: #476775; border-color: #97a89c73; border-radius: 3px; background: #f9f2e1; font-size: 14px; }
html.magical-night .answer-feedback p, html.magical-night .learn-more p { color: #4d5b60; font-size: 17px; line-height: 1.8; }
html.magical-night .feedback-title { color: #426747; font-family: var(--magic-serif); font-size: 30px; font-weight: 400; }
html.magical-night .feedback-title.missed { color: #967243; }
html.magical-night .learn-more { background: #f2e8d2; border-color: #b89a623d; border-radius: 4px; }
html.magical-night .learn-more summary { color: #796033; font-size: 16px; }
html.magical-night .source-link { color: #315e72; }
html.magical-night .primary-button { color: #fff3d4; background: #274b59; border: 1px solid #426b70; border-radius: 3px; font-size: 18px; }
html.magical-night .daily-double-reveal { color: #67491d; background: #f6df9e; border-color: #c49c48; }
html.magical-night .question-visual { color: #335765; background: #e9eddc; border-color: #a0ad8848; }
html.magical-night .info-header { border-bottom-color: #b1915752; background: #f1e3c7; }
html.magical-night .info-header h2 { color: #334c5a; font-family: var(--magic-serif); font-weight: 400; font-size: 34px; }
html.magical-night .info-content p { color: #6c6454; font-size: 16px; line-height: 1.7; }
html.magical-night .info-content .small-button { color: #496875; }
html.magical-night .info-dialog :where(input:not([type=checkbox]), select, textarea) { color: #354d5e; background: #fffaf0; border-color: #b395605e; }
html.magical-night .magical-music-scene select { width: min(100%, 300px); font-size: 14px; }
html.magical-night .studio-sound-button { color: #42626e; background: #f0e4cb; border-color: #b395605e; border-radius: 3px; }
html.magical-night .studio-sound-note { color: #7b6b50; }
html.magical-night .profile-topic-medal[data-rank=silver] { color: #5a6873; background: #e3e8e8; border-color: #8c9ca45e; }
html.magical-night .profile-topic-medal[data-rank=bronze] { color: #785229; background: #f1e2ca; border-color: #a7794866; }
html.magical-night .magical-celebrating .magical-marquee { border-color: #ffe2a7; box-shadow: 0 0 18px #efd19135; }
html.magical-night .info-dialog:has(.category-browse-controls) { max-width: 1180px; }
html.magical-night .magical-group-navigation { display: flex; flex-wrap: wrap; gap: 8px; margin: 23px 0; }
html.magical-night .magical-group-button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 13px; border: 1px solid #b2956266; border-radius: 3px; color: #566354; background: #f7efd9; font-size: 13px; }
html.magical-night .magical-group-button > span:first-child { font-size: 19px; }
html.magical-night .magical-group-button small { font-size: 10px; color: #816f51; }
html.magical-night .magical-group-button[aria-pressed=true] { color: #fff0d3; background: #2b5061; border-color: #2b5061; }
html.magical-night .magical-group-button[aria-pressed=true] small { color: #e3d4b4; }
html.magical-night .category-browse-controls { background: #eee3ce; border-color: #b1915733; border-radius: 3px; }
html.magical-night .category-browse-controls :where(input, select) { color: #2e4859; background: #fff9ed; border-color: #b2956266; min-height: 46px; font-size: 16px; }
html.magical-night .category-group h3 { color: #344b5a; font: 400 27px var(--magic-serif); border-bottom: 1px solid #b1915740; padding-bottom: 14px; }
html.magical-night .category-library { gap: 13px; }
html.magical-night .library-category { background: #fffaf0; border-color: #b5996753; border-radius: 3px; min-height: 102px; }
html.magical-night .library-category strong { color: #364e5c; font-size: 17px; }
html.magical-night .library-category small { color: #746951; font-size: 12px; }
html.magical-night .library-category[aria-pressed=true] { background: #eee2c4; border-color: #9e7e47; }
html.magical-night .library-check { color: #3b705c; }
html.magical-night .category-card-copy { min-width: 0; }
html.magical-night .avatar-choice { color: #385364; background: #f6eacf; border-color: #b29a6966; }
html.magical-night .avatar-choice-label { color: #405566; font-size: 13px; }
html.magical-night .error-text { color: #a14a3c; }

/* The final procession retains real rankings, earned medals and category history. */
html.magical-night .result-shell { max-width: 1270px; color: #2b4252; }
html.magical-night .studio-results-showcase { border-radius: 5px; background: #1f3b54; border-color: #b59964; color: #fff0d1; }
html.magical-night .studio-results-copy h1 { color: #fff0d1; font: 400 clamp(39px, 4.6vw, 63px)/1.14 var(--magic-serif); letter-spacing: -.04em; }
html.magical-night .studio-results-copy .eyebrow { color: #dfbc7a; }
html.magical-night .studio-results-copy p { color: #e1d2b8; }
html.magical-night .result-row { background: #fffaee; border-color: #b0956249; border-radius: 4px; }
html.magical-night .result-row.winner { background: #f3e2b9; border-color: #b58f47; }
html.magical-night .result-person strong { color: #365061; font-size: 20px; }
html.magical-night .result-person small { color: #75694f; font-size: 13px; }
html.magical-night .result-score { color: #896029; }
html.magical-night .results-discoveries { border-color: #b0956249; }
html.magical-night .discovery-line { color: #716750; font-size: 16px; border-color: #b0956236; }
html.magical-night .discovery-line strong { color: #3c5d69; }
html.magical-night .history-table { color: #485562; }
html.magical-night .history-table caption, html.magical-night .history-player-heading h3 { color: #334e5d; }
html.magical-night .history-summary > div { background: #f1e5cd; border-color: #b1946042; }

@media (min-width: 1600px) {
  html.magical-night .lobby-showcase { min-height: 735px; padding: 73px 78px; }
  html.magical-night .lobby-showcase .instant-play-heading { width: 49%; }
  html.magical-night .question-heading { font-size: 42px; }
  html.magical-night .answer-option { font-size: 22px; }
}
@media (max-width: 1100px) {
  html.magical-night .lobby-showcase { padding: 43px 38px; min-height: 660px; }
  html.magical-night .lobby-showcase .instant-play-heading { width: 60%; max-width: 570px; }
  html.magical-night .lobby-showcase h1 { font-size: 63px; }
  html.magical-night .lobby-showcase .night-hero-description { font-size: 17px; }
  html.magical-night .magical-street-shade { background: linear-gradient(90deg, #112b42eb, #142b44b8 38%, #172b431c 80%); }
  html.magical-night .magical-marquee { right: 24px; bottom: 20px; font-size: 15px; }
  html.magical-night .magical-venue-copy { padding: 18px; }
  html.magical-night .magical-venue-copy strong { font-size: 24px; }
  html.magical-night .game-layout { grid-template-columns: minmax(0, 1fr) 265px; gap: 19px; }
  html.magical-night .game-shell .category-cell { font-size: 15px; }
}
@media (max-width: 850px) {
  html.magical-night .site-header { padding: 21px 24px; }
  html.magical-night .header-actions { gap: 5px; }
  html.magical-night .lobby.setup-flow-lobby { padding: 0 20px; }
  html.magical-night .lobby-showcase { min-height: 680px; padding: 38px 28px; }
  html.magical-night .lobby-showcase .instant-play-heading { width: 76%; }
  html.magical-night .lobby-showcase h1 { font-size: 56px; }
  html.magical-night .lobby-showcase .lobby-primary-actions { max-width: 520px; }
  html.magical-night .magical-street-art { object-position: 64% center; }
  html.magical-night .magical-marquee { display: none; }
  html.magical-night .magical-section-heading > p { font-size: 12px; }
  html.magical-night .tonight-preview-grid { gap: 10px; }
  html.magical-night .tonight-preview-topic { min-height: 205px; padding: 23px 7px 15px; }
  html.magical-night .tonight-preview-topic .category-artwork { width: 85px; height: 85px; }
  html.magical-night .tonight-preview-topic strong { font-size: 14px; }
  html.magical-night .game-layout { grid-template-columns: minmax(0, 1fr); }
  html.magical-night .score-panel { order: -1; }
  html.magical-night .score-list { display: flex; overflow-x: auto; overflow-y: hidden; max-height: none; }
  html.magical-night .score-item { min-width: 200px; }
  html.magical-night .score-avatar { width: 44px; height: 44px; }
  html.magical-night .magical-venue-row { gap: 13px; }
  html.magical-night .magical-venue-copy strong { font-size: 22px; }
}
@media (max-width: 600px) {
  html.magical-night .site-header { padding: 17px 17px; gap: 9px; }
  html.magical-night .brand { font-size: 12px; }
  html.magical-night .brand strong { font-size: 19px; }
  html.magical-night .brand-icon { width: 38px; height: 38px; padding: 5px; }
  html.magical-night .header-actions .text-button { font-size: 10px; padding: 8px 4px; }
  html.magical-night .header-actions .icon-button { width: 31px; height: 31px; font-size: 19px; }
  html.magical-night .lobby.setup-flow-lobby { padding: 0 12px; margin-top: 13px; }
  html.magical-night .lobby-showcase { display: flex; flex-direction: column; padding: 0; min-height: 0; overflow: hidden; border-radius: 5px; }
  html.magical-night .magical-hero-art { position: relative; z-index: 0; order: -1; height: 245px; flex: 0 0 245px; }
  html.magical-night .magical-street-art { object-position: 76% 63%; }
  html.magical-night .magical-street-shade { background: linear-gradient(0deg, #142b44, transparent 30%); }
  html.magical-night .lobby-showcase .instant-play-heading { width: 100%; max-width: none; padding: 16px 22px 27px; }
  html.magical-night .night-eyebrow { font-size: 9px; letter-spacing: .08em; margin-bottom: 17px; }
  html.magical-night .lobby-showcase h1 { font-size: clamp(40px, 10.6vw, 59px); line-height: 1.06; margin-bottom: 18px; }
  html.magical-night .lobby-showcase .night-hero-description { font-size: 15px; line-height: 1.65; margin-bottom: 19px; }
  html.magical-night .night-hero-description br { display: none; }
  html.magical-night .night-hero-perks { gap: 9px; margin-bottom: 24px; }
  html.magical-night .night-hero-perks > span { font-size: 10px; }
  html.magical-night .night-hero-perks > span + span::before { margin-right: 9px; }
  html.magical-night .lobby-showcase .lobby-primary-actions { grid-template-columns: 1fr; gap: 13px; }
  html.magical-night .lobby-showcase .magical-admission-ticket { min-height: 101px; }
  html.magical-night .magical-ticket-title { font-size: 34px; }
  html.magical-night .magical-ticket-main { padding-left: 24px; }
  html.magical-night .lobby-showcase .studio-devices-button { min-height: 74px; padding: 13px 20px; }
  html.magical-night .lobby-showcase .studio-devices-button strong { font-size: 21px; }
  html.magical-night .lobby-showcase .studio-devices-button small { font-size: 11px; margin-top: 4px; }
  html.magical-night .lobby-showcase .instant-play-note { font-size: 11px !important; }
  html.magical-night .quick-game-links { gap: 18px; }
  html.magical-night .quick-game-links .small-button { font-size: 11px; }
  html.magical-night .magical-family-cast { margin-top: 31px; }
  html.magical-night .magical-section-heading { gap: 12px; align-items: flex-start; margin-bottom: 18px; }
  html.magical-night .magical-step-seal { width: 42px; height: 42px; flex-basis: 42px; font-size: 21px; }
  html.magical-night .magical-section-heading h2 { font-size: 29px; }
  html.magical-night .magical-section-heading > p { display: none; }
  html.magical-night .magical-kicker { font-size: 8px; }
  html.magical-night .magical-cast-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px 0; }
  html.magical-night .magical-cast-portrait { width: 83px; height: 91px; }
  html.magical-night .magical-cast-member strong { font-size: 18px; }
  html.magical-night .studio-quick-setup { grid-template-columns: 1fr; gap: 17px; padding: 20px 0; }
  html.magical-night .studio-quick-edits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  html.magical-night .studio-quick-edits .small-button { padding: 11px; gap: 6px; min-height: 68px; }
  html.magical-night .studio-quick-edits .small-button span { font-size: 13px; }
  html.magical-night .studio-quick-edits .small-button small { font-size: 9px; }
  html.magical-night .studio-quick-edits .small-button .lobby-action-icon { width: 26px; height: 26px; flex-basis: 26px; }
  html.magical-night .studio-quick-setup #rounds-help { text-align: left; font-size: 11px; }
  html.magical-night .setup-customize > summary { padding: 15px; }
  html.magical-night .customize-summary-label { font-size: 15px !important; }
  html.magical-night .setup-card.setup-flow-card { padding: 18px 14px; }
  html.magical-night .setup-step-heading h2 { font-size: 25px; }
  html.magical-night .tonight-preview { margin: 34px 0 37px; }
  html.magical-night .lobby-link-heading { display: block; }
  html.magical-night .lobby-link-heading h2 { font-size: 30px; }
  html.magical-night .lobby-link-heading p { font-size: 12px; margin-top: 9px; }
  html.magical-night .tonight-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  html.magical-night .tonight-preview-topic { min-height: 216px; padding: 21px 12px 16px; }
  html.magical-night .tonight-preview-topic .category-artwork { width: 106px; height: 106px; }
  html.magical-night .tonight-preview-topic strong { font-size: 16px; }
  html.magical-night .magical-venue-row { grid-template-columns: 1fr; gap: 19px; }
  html.magical-night .magical-venue-art { aspect-ratio: 1.55; }
  html.magical-night .magical-venue-copy { padding: 20px 23px; }
  html.magical-night .magical-venue-copy strong { font-size: 29px; }
  html.magical-night .family-card-copy strong { font-size: 24px; }
  html.magical-night .mini-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  html.magical-night .mini-route-card strong { font-size: 21px; }
  html.magical-night .mini-route-card small { font-size: 10px; }
  html.magical-night .game-shell { padding: 0 12px; }
  html.magical-night .game-heading { flex-wrap: wrap; }
  html.magical-night .game-heading h1 { font-size: 30px; }
  html.magical-night .game-actions .small-button { font-size: 10px; padding: 9px; }
  html.magical-night .game-shell .turn-banner { padding: 17px; gap: 13px; flex-wrap: wrap; }
  html.magical-night .turn-person { gap: 16px; width: 100%; }
  html.magical-night .game-shell .big-avatar { width: 75px; height: 75px; flex-basis: 75px; padding: 5px; }
  html.magical-night .turn-player-name, html.magical-night.tv-view .turn-player-name { font-size: 40px; }
  html.magical-night .turn-name-label { font-size: 9px; }
  html.magical-night .turn-caption { font-size: 12px; }
  html.magical-night .turn-round { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; width: 100%; font-size: 11px; }
  html.magical-night .turn-round strong { font-size: 16px; }
  html.magical-night .studio-player-points { grid-column: 2; grid-row: 1/3; font-size: 28px; margin: 0; }
  html.magical-night .studio-player-points small { font-size: 8px; }
  html.magical-night .round-progress { grid-column: 1/-1; margin-top: 6px; }
  html.magical-night .game-shell .board-wrap { padding: 9px; }
  html.magical-night .game-shell .trivia-board { min-width: 500px; grid-template-columns: repeat(5, minmax(90px, 1fr)); gap: 5px; }
  html.magical-night .game-shell .category-cell { min-height: 112px; font-size: 14px; padding: 9px 6px; }
  html.magical-night .board-topic-illustration { width: 64px; height: 64px; }
  html.magical-night .game-shell .value-cell:not(.used), html.magical-night .game-shell .value-cell.used { min-height: 65px; font-size: 26px; }
  html.magical-night .board-bottom { font-size: 10px; }
  html.magical-night .studio-board-caption span { font-size: 10px; }
  html.magical-night .question-dialog, html.magical-night .info-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  html.magical-night .question-top { padding: 13px 17px; gap: 12px; min-height: 92px; flex-wrap: wrap; }
  html.magical-night .studio-clue-art { width: 58px; height: 58px; flex-basis: 58px; }
  html.magical-night .question-meta strong { font-size: 17px; }
  html.magical-night .question-top > .level-chip { font-size: 10px; }
  html.magical-night .question-body { padding: 20px 20px 25px; }
  html.magical-night .question-heading, html.magical-night .level-tiny .question-heading { font-size: 28px; }
  html.magical-night .question-player { font-size: 12px; }
  html.magical-night .answer-option, html.magical-night .level-tiny .answer-option { font-size: 17px; min-height: 63px; padding: 13px 14px; }
  html.magical-night .answer-feedback p, html.magical-night .learn-more p { font-size: 16px; }
  html.magical-night .info-header h2 { font-size: 29px; }
  html.magical-night .magical-group-button { font-size: 12px; padding: 9px; }
  html.magical-night .magical-group-button small { display: none; }
  html.magical-night .library-category strong { font-size: 17px; }
  html.magical-night .library-category small { font-size: 12px; }
}
@media (min-width: 851px) and (max-height: 850px) {
  html.magical-night .game-shell .turn-banner { padding: 15px 24px; }
  html.magical-night .game-shell .big-avatar { width: 86px; height: 86px; flex-basis: 86px; }
  html.magical-night .turn-player-name { font-size: 59px; }
  html.magical-night .game-shell .category-cell { min-height: 92px; }
  html.magical-night .board-topic-illustration { width: 53px; height: 53px; }
  html.magical-night .game-shell .value-cell:not(.used), html.magical-night .game-shell .value-cell.used { min-height: 57px; }
}
@media (prefers-reduced-motion: reduce) {
  html.magical-night *, html.magical-night *::before, html.magical-night *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.magical-night .magical-venue:hover, html.magical-night .magical-admission-ticket:hover, html.magical-night .tonight-preview-topic:hover { transform: none; }
}

/* Readable topic collections: labels live on parchment, never over artwork. */
html.magical-night .topic-swap,html.magical-night .tonight-preview-topic{background:#fffaf0!important;color:#24364b!important;border:1px solid #c8af7f!important}
html.magical-night .topic-swap:hover,html.magical-night .tonight-preview-topic:hover{background:#f5ead2!important;border-color:#8f6b32!important}
html.magical-night .topic-swap-name,html.magical-night .tonight-preview-topic strong{color:#24364b!important;font-size:20px;font-weight:800;line-height:1.35}
html.magical-night .tonight-topic-action,html.magical-night .swap-glyph{color:#34656a!important}
.topic-gallery-open{margin:8px 0 18px;min-height:50px}
.painted-topic-gallery{color:#24364b;background:#fffaf0;padding:4px;line-height:1.5}
.painted-topic-gallery *{box-sizing:border-box}
.painted-topic-gallery .topic-gallery-intro{font-size:17px;color:#45545c;margin:0 0 22px}
.topic-gallery-toolbar{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:20px}
.topic-gallery-toolbar label{display:grid;gap:7px;font-size:15px;font-weight:750;color:#24364b}
.topic-gallery-toolbar input,.topic-gallery-toolbar select{width:100%;min-width:0;min-height:48px;padding:10px 12px;color:#24364b;background:white;border:1px solid #aa9570;border-radius:10px;font:inherit;font-size:16px}
.topic-gallery-selection{padding:16px;border:1px solid #c8af7f;border-radius:14px;background:#f4ead3}
#all-topic-count{font-size:18px;color:#24364b}
#all-topic-tray{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
#all-topic-tray button{min-height:44px;border:1px solid #315f64;border-radius:24px;padding:8px 14px;background:#fffdf7;color:#21474b;font-size:15px;font-weight:700}
.painted-topic-gallery .small-button{background:#fffdf7;color:#24364b;border:1px solid #8e7856}
#all-topic-notice{color:#7b4117;font-weight:700;font-size:15px;min-height:0}
.topic-gallery-matches{font-size:14px;color:#45545c}
.topic-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.topic-gallery-card{position:relative;display:flex;align-items:center;gap:14px;padding:16px;min-width:0;min-height:138px;text-align:left;background:#fffdf7!important;color:#24364b!important;border:2px solid #d4c3a2;border-radius:15px;cursor:pointer}
.topic-gallery-card:hover{background:#f7efde!important;border-color:#836538}
.topic-gallery-card[aria-pressed="true"]{border-color:#32686b;background:#edf5f0!important;box-shadow:inset 0 0 0 1px #32686b}
.topic-gallery-card[hidden]{display:none!important}
.topic-gallery-card .category-artwork{width:84px!important;height:84px!important;border-radius:15px;overflow:hidden;flex:none}
.topic-gallery-copy{display:grid;gap:6px;min-width:0;flex:1;padding-right:15px}
.topic-gallery-copy strong{color:#24364b!important;font-size:18px!important;line-height:1.35;font-weight:800;overflow-wrap:anywhere}
.topic-gallery-copy small{color:#45545c!important;font-size:14px!important;line-height:1.5}
.topic-gallery-check{position:absolute;right:10px;top:10px;border:1px solid #9aab9e;border-radius:50%;width:22px;height:22px;text-align:center;color:transparent;background:white;font-size:15px}
.topic-gallery-card[aria-pressed="true"] .topic-gallery-check{color:white;background:#32686b;border-color:#32686b}
.topic-gallery-footer{position:sticky;bottom:-1px;z-index:3;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:16px 2px 8px;margin-top:18px;background:#fffaf0;border-top:1px solid #c8af7f}
.topic-gallery-footer p{margin:0 auto 0 0;color:#45545c;font-size:14px}
.topic-gallery-footer button{min-height:48px}
.painted-topic-gallery button:focus-visible,.painted-topic-gallery input:focus-visible,.painted-topic-gallery select:focus-visible{outline:3px solid #a46320;outline-offset:3px}
.topic-gallery-footer button:disabled{opacity:1;background:#e8e4db!important;color:#6b6b64!important;cursor:not-allowed}
@media(max-width:620px){.topic-gallery-toolbar,.topic-gallery-grid{grid-template-columns:1fr}.topic-gallery-card{padding:12px;min-height:120px}.topic-gallery-copy strong{font-size:17px!important}.topic-gallery-card .category-artwork{width:70px!important;height:70px!important}.topic-gallery-footer{padding-bottom:12px}.topic-gallery-footer p{width:100%}.topic-gallery-footer .primary-button{flex:1}.painted-topic-gallery{padding:0}}
.bgn-painted-topic-art{display:block!important;width:100%;height:100%;aspect-ratio:1;border-radius:16px;background-image:url('./assets/magical/topic-paintings-v1.png');background-size:400% 400%;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #b98b4b55}
html.magical-night .category-artwork{overflow:hidden;border-radius:16px;background:#172a40}
html.magical-night .category-artwork .bgn-painted-topic-art{position:static!important;width:100%!important;height:100%!important}
html.magical-night dialog.topic-collection-dialog{width:min(1180px,96vw);max-width:1180px}
.topic-collection-dialog .info-content{padding:26px}
@media(min-width:1000px){.topic-collection-dialog .topic-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.topic-collection-dialog .topic-gallery-card{gap:12px;padding:12px}.topic-collection-dialog .topic-gallery-card .category-artwork{width:70px!important;height:70px!important}}
@media(max-width:620px){.topic-collection-dialog .info-content{padding:16px}.topic-collection-dialog .info-header h2{font-size:27px}.topic-gallery-toolbar{gap:10px}.topic-gallery-selection{padding:12px}.topic-gallery-intro{margin-bottom:14px!important}}
.topic-gallery-review{margin:6px 0 0;background:transparent;border:0;padding:0}
.topic-gallery-review summary{min-height:44px;display:flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;font-weight:700;color:#315e62;list-style:none}
.topic-gallery-review summary:before{content:'＋';font-size:18px}.topic-gallery-review[open] summary:before{content:'−'}
@media(max-width:620px){.topic-collection-dialog .info-header h2{font-size:25px!important;line-height:1.2!important}.topic-gallery-intro{font-size:15px!important}.topic-gallery-toolbar{margin-bottom:14px}.topic-gallery-selection{padding:10px 12px}.topic-gallery-review summary{min-height:40px}.topic-gallery-footer{gap:8px}.topic-gallery-footer p{font-size:13px}}
/* Painted portraits fit the keepsake frame; optional personal photos and medals keep their overlays. */
html.magical-night .magical-cast-portrait{width:120px;height:132px;padding:8px}
html.magical-night .magical-cast-portrait .player-portrait-pair{border-radius:inherit}
html.magical-night .magical-cast-portrait .avatar-painted{border-radius:inherit}
@media(max-width:620px){html.magical-night .magical-cast-portrait{width:94px;height:104px;padding:7px}}

.topic-pack-section>h3,.category-group>h3{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:11px 14px;margin:0 0 14px;color:#173c55;background:linear-gradient(100deg,#edf5f3 0%,#fff9ed 82%);border:1px solid #c9d8d3;border-left:4px solid #568a83;border-radius:10px;box-shadow:0 5px 14px #173c5518;font-size:19px;line-height:1.25}
.topic-pack-section,.category-group{scroll-margin-top:12px}.random-question-origin{display:flex;align-items:center;gap:6px;width:fit-content;max-width:100%;margin:0 0 14px;padding:8px 13px;border:1px solid #87aeb3;border-radius:999px;background:#e8f4f3;color:#173c55;font:700 15px/1.35 system-ui,sans-serif}.random-question-origin strong{color:#164d56}
@media(max-width:620px){.topic-collection-dialog .info-header h2{font-size:25px!important;line-height:1.2!important}.topic-gallery-intro{font-size:15px!important}.topic-gallery-toolbar{margin-bottom:14px}.topic-gallery-selection{padding:10px 12px}.topic-gallery-review summary{min-height:40px}.topic-gallery-footer{gap:8px}.topic-gallery-footer p{font-size:13px}}