/* The painted theatre continues through play. Load after magical.css and
   painted-avatars.css. These scenes are static across answer/profile refreshes. */
html.magical-night .magical-play-shell {
  --play-ink: #183746;
  --play-paper: #fff4dd;
  --play-brass: #d0aa63;
  --play-soft-brass: #efd298;
  max-width: 1570px;
  margin-top: 12px;
  padding-inline: clamp(16px, 3vw, 38px);
  min-width: 0;
}
html.magical-night .magical-play-shell .game-heading {
  align-items: center;
  margin-bottom: 22px;
  gap: 20px;
}
html.magical-night .magical-play-shell .game-heading h1 {
  color: #273f4c;
  font-size: clamp(30px, 3.4vw, 46px);
  margin: 0;
}
html.magical-night .magical-play-shell .game-actions { flex-wrap: wrap; gap: 8px; }
html.magical-night .magical-play-shell .game-actions .small-button {
  color: #455345;
  background: #fff9eccc;
  border: 1px solid #b4965d70;
  min-height: 42px;
  border-radius: 5px;
  padding: 10px 13px;
}
html.magical-night .magical-play-shell .magical-turn-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 270px);
  gap: 28px;
  align-items: center;
  min-height: 230px;
  padding: 23px 32px;
  margin-bottom: 25px;
  color: #fff4dc;
  border: 1px solid #cfb072;
  border-radius: 9px;
  background: linear-gradient(90deg, #123342ed 0%, #123342d9 48%, #16374191 100%), url('./assets/magical/observatory-garden.webp') center 48% / cover, #143342;
  box-shadow: 0 6px 0 #a7884f25, 0 18px 40px #3d473b12, inset 0 0 0 5px #efd29812;
}
html.magical-night .magical-play-shell .magical-turn-stage::before,
html.magical-night .magical-play-shell .magical-turn-stage::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
html.magical-night .magical-play-shell .magical-turn-stage::before {
  inset: 8px;
  border: 1px solid #efd29835;
  border-radius: 5px;
}
html.magical-night .magical-play-shell .magical-turn-stage::after {
  right: 29%;
  top: 0;
  width: 52px;
  height: 100%;
  background: radial-gradient(ellipse at 50% 39%, #ffe4a847, transparent 58%);
}
html.magical-night .magical-play-shell .turn-person { min-width: 0; gap: 28px; align-items: center; }
html.magical-night .magical-play-shell .turn-person > div:last-child { min-width: 0; }
html.magical-night .magical-play-shell .magical-active-portrait {
  display: flex;
  position: relative;
  overflow: visible;
  width: 154px;
  height: 180px;
  flex: 0 0 154px;
  padding: 7px;
  border: 2px solid #e5c27d;
  border-radius: 76px 76px 11px 11px;
  background: linear-gradient(150deg, #f7dfae, #ba904e);
  box-shadow: 0 7px 0 #051d294d, 0 0 0 4px #efd29817;
}
html.magical-night .magical-play-shell .magical-active-portrait .avatar-graphic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  border-radius: 68px 68px 6px 6px;
  background-color: #c2d8cc;
}
html.magical-night .magical-play-shell .magical-active-portrait .avatar-emoji { font-size: 88px; }
html.magical-night .magical-play-shell .turn-player-heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 13px;
  min-width: 0;
}
html.magical-night .magical-play-shell .turn-player-name {
  display: block;
  color: #fff4dc;
  font-size: clamp(30px, 3.5vw, 51px);
  line-height: 1.09;
  overflow-wrap: anywhere;
}
html.magical-night .magical-play-shell .turn-name-label {
  color: #e9d4ac;
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  white-space: normal;
}
html.magical-night .magical-play-shell .turn-caption {
  color: #e2d9c5;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
html.magical-night .magical-play-shell .turn-caption .level-chip {
  display: inline-block;
  margin: 5px 0 0 5px;
  color: #f7e4bb;
  background: #213d40;
  border: 1px solid #ceaf735c;
}
html.magical-night .magical-play-shell .turn-round {
  min-width: 0;
  text-align: left;
  color: #ddd2b9;
  font-size: 12px;
  line-height: 1.6;
  background: #112e38cf;
  border: 1px solid #d9b57175;
  border-radius: 5px;
  padding: 17px 21px;
  box-shadow: inset 0 0 0 4px #efd2980a;
}
html.magical-night .magical-play-shell .turn-round > strong { display: block; color: #fff0cf; font-size: 22px; line-height: 1.35; }
html.magical-night .magical-play-shell .studio-player-points { color: #ffe2a1; font-size: 36px; line-height: 1.1; margin: 15px 0 0; }
html.magical-night .magical-play-shell .studio-player-points small { color: #dac8a4; display: block; font: 9px/1.5 var(--sans, sans-serif); letter-spacing: .16em; margin-top: 5px; }
html.magical-night .magical-play-shell .round-progress { height: 6px; margin-top: 17px; background: #071f2b; border: 1px solid #d4b07240; border-radius: 4px; }
html.magical-night .magical-play-shell .round-progress span { background: linear-gradient(90deg, #94bdb1, #efd08e); }
html.magical-night .magical-play-shell .game-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 23px; align-items: start; }
html.magical-night .magical-play-shell .board-wrap {
  padding: 22px;
  min-width: 0;
  border: 1px solid #c5a568;
  border-radius: 9px;
  background: linear-gradient(#102d39cb, #142f3fef), url('./assets/magical/storybook-library.webp') center / cover, #173747;
  box-shadow: 0 6px 0 #b5985e24, inset 0 0 0 6px #ddbe7c12;
}
html.magical-night .magical-play-shell .board-watermark { display: none; }
html.magical-night .magical-play-shell .studio-board-caption { color: #ebdbb7; padding: 0 0 17px; gap: 10px; }
html.magical-night .magical-play-shell .studio-board-caption strong { font: 24px/1.2 var(--serif, Georgia, serif); color: #ffebc0; }
html.magical-night .magical-play-shell .studio-board-caption > span { color: #d1c5ac; font-size: 11px; }
html.magical-night .magical-play-shell .board-scroll { overflow-x: auto; max-width: 100%; scrollbar-color: #c5a568 #112e3a; padding-bottom: 4px; }
html.magical-night .magical-play-shell .trivia-board { min-width: 620px; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
html.magical-night .magical-play-shell .category-cell {
  min-height: 142px;
  gap: 8px;
  padding: 14px 8px;
  color: #344b4b;
  border: 1px solid #e0bd7c;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(140deg, #fff3d6, #e9d5ad);
  box-shadow: inset 0 0 0 4px #fff9e961, 0 3px 0 #061d2740;
  font: 16px/1.2 var(--serif, Georgia, serif);
  overflow-wrap: anywhere;
}
html.magical-night .magical-play-shell .board-topic-illustration { width: 83px; height: 83px; flex: 0 0 83px; }
html.magical-night .magical-play-shell .value-cell {
  position: relative;
  min-height: 72px;
  padding: 12px 5px;
  color: #f7dfa4;
  border: 1px solid #c6a05e9c;
  border-radius: 5px;
  background: linear-gradient(140deg, #294d5a, #183846);
  box-shadow: 0 3px 0 #071f2c, inset 0 0 0 4px #e2bf7820;
  font: 32px/1.15 var(--serif, Georgia, serif);
  letter-spacing: -.025em;
}
html.magical-night .magical-play-shell .value-cell:not(:disabled):hover {
  background: linear-gradient(140deg, #3b635f, #264953);
  border-color: #ffe1a0;
  transform: translateY(-2px);
}
html.magical-night .magical-play-shell .studio-tile-spark { color: #efd49a; opacity: .65; font-size: 10px; right: 8px; top: 8px; }
html.magical-night .magical-play-shell .value-cell.used { color: #98afa7; border-color: #6b80764d; background: #163039a8; box-shadow: inset 0 0 0 4px #12283035; opacity: 1; }
html.magical-night .magical-play-shell .value-cell.correct { color: #c5e1bb; background: #2d5145; border-color: #90b394; }
html.magical-night .magical-play-shell .board-bottom { display: flex; flex-wrap: wrap; gap: 8px 15px; color: #d4ccb7; font-size: 11px; line-height: 1.6; margin-top: 15px; }
html.magical-night .magical-play-shell #continue-clue { margin-top: 16px; }
html.magical-night .magical-play-shell .score-panel {
  order: 0;
  min-width: 0;
  padding: 24px 16px 19px;
  color: #344b47;
  border: 1px solid #b99657a3;
  border-radius: 8px;
  background: linear-gradient(145deg, #fffae9, #eddfbe);
  box-shadow: 0 6px 0 #b5985e24, inset 0 0 0 5px #fff9ec85;
}
html.magical-night .magical-play-shell .score-panel h2 { display: block; color: #344b47; font-size: 27px; margin: 0 7px 20px; }
html.magical-night .magical-play-shell .score-list { display: grid; grid-template-columns: 1fr; gap: 12px; overflow: visible; }
html.magical-night .magical-play-shell .score-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 91px;
  gap: 10px;
  padding: 11px 9px;
  border: 1px solid #bc9d623d;
  border-radius: 5px;
  color: #344b47;
  background: #fff9e9;
  box-shadow: 0 2px 0 #b2966420;
}
html.magical-night .magical-play-shell .score-item.active { color: #fff1cd; background: linear-gradient(130deg, #34584f, #23444a); border-color: #b59455; box-shadow: inset 3px 0 #e9c47c; }
html.magical-night .magical-play-shell .score-avatar { width: 58px; height: 68px; flex: none; padding: 3px; border: 1px solid #bd9858; border-radius: 28px 28px 4px 4px; background: #e3c791; overflow: visible; }
html.magical-night .magical-play-shell .score-avatar .avatar-graphic { width: 100%; height: 100%; object-fit: cover; border-radius: 24px 24px 2px 2px; padding: 0; }
html.magical-night .magical-play-shell .score-name { color: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
html.magical-night .magical-play-shell .score-level { color: #6b7260; font-size: 10px; line-height: 1.45; margin-top: 6px; }
html.magical-night .magical-play-shell .score-item.active .score-level { color: #d5d9c4; }
html.magical-night .magical-play-shell .score-bonus { color: #8a6a37; font-size: 9px; }
html.magical-night .magical-play-shell .score-item.active .score-bonus { color: #e3cc9d; }
html.magical-night .magical-play-shell .score-value { color: #886327; font-size: 23px; line-height: 1.2; white-space: nowrap; }
html.magical-night .magical-play-shell .score-item.active .score-value { color: #ffe1a0; }
html.magical-night .magical-play-shell .score-caption { display: block; color: #68735f; font-size: 11px; line-height: 1.75; padding: 17px 7px 0; }
html.magical-night .magical-play-shell .profile-sync-note { color: #68735f; }

/* A parchment question keeps all text and photo controls above the scenery. */
html.magical-night .magical-clue-dialog {
  color: #2d4350;
  width: min(1080px, calc(100% - 40px));
  max-width: 1080px;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 3px solid #c3a064;
  border-radius: 10px;
  background: #fff7e6;
  box-shadow: 0 25px 100px #081d35b3, 0 0 0 5px #e5c68b36;
  overflow-y: auto;
}
html.magical-night .magical-clue-dialog::backdrop { background: #071f31c2; backdrop-filter: blur(7px); }
html.magical-night .magical-clue-dialog .question-top {
  position: relative;
  min-height: 126px;
  padding: 17px 28px;
  color: #ffedc8;
  gap: 20px;
  background: linear-gradient(90deg, #153741f2, #153741c9), url('./assets/magical/carousel-cove.webp') center 51% / cover, #163847;
  border-bottom: 2px solid #caa66a;
}
html.magical-night .magical-clue-dialog .studio-clue-art { width: 88px; height: 88px; flex: 0 0 88px; filter: drop-shadow(0 3px 3px #001c2840); }
html.magical-night .magical-clue-dialog .question-meta { flex: 1; min-width: 0; gap: 9px; }
html.magical-night .magical-clue-dialog .question-meta strong { color: #ffedc8; font-size: 23px; overflow-wrap: anywhere; }
html.magical-night .magical-clue-dialog .question-value { background: #132d36; color: #efd191; border: 1px solid #d1af6e91; border-radius: 4px; font-size: 23px; }
html.magical-night .magical-clue-dialog .question-top > .level-chip { background: #18363bbb; color: #dbe3c9; border-color: #aec6a950; font-size: 12px; }
html.magical-night .magical-clue-dialog .question-body { padding: 25px 36px 32px; background: linear-gradient(135deg, #fff9eb, #fff3db); }
html.magical-night .magical-clue-dialog .question-player { align-items: center; gap: 17px; color: #7c745f; font-size: 13px; line-height: 1.5; margin-bottom: 23px; }
html.magical-night .magical-clue-dialog .question-player > span { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 7px; }
html.magical-night .magical-clue-dialog .question-player strong { display: flex; align-items: center; gap: 17px; min-width: 0; color: #38524c; font-size: 17px; }
html.magical-night .magical-clue-dialog .question-player strong > span:last-child { min-width: 0; overflow-wrap: anywhere; }
html.magical-night .magical-clue-dialog .question-avatar { display: inline-flex; width: 67px; height: 78px; flex: 0 0 67px; padding: 3px; border: 1px solid #bb9453; border-radius: 32px 32px 4px 4px; background: #ebd29d; overflow: visible; }
html.magical-night .magical-clue-dialog .question-avatar .avatar-graphic { width: 100%; height: 100%; object-fit: cover; padding: 0; border-radius: 29px 29px 2px 2px; }
html.magical-night .magical-clue-dialog .timer { flex: 0 0 auto; color: #785e30; border-color: #bb985f70; background: #f3e6c7; min-width: 60px; font-size: 18px; }
html.magical-night .magical-clue-dialog .question-heading { color: #2d4350; font: 29px/1.46 var(--serif, Georgia, serif); letter-spacing: -.015em; margin: 0 0 25px; overflow-wrap: anywhere; }
html.magical-night .magical-clue-dialog.level-tiny .question-heading { font-size: 33px; }
html.magical-night .magical-clue-dialog .question-options { gap: 12px; }
html.magical-night .magical-clue-dialog .answer-option {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 20px;
  min-height: 78px;
  color: #344c54;
  background: #fffdf5;
  border: 1px solid #bea16b8c;
  border-radius: 5px;
  font-size: 18px;
  line-height: 1.5;
  box-shadow: 0 3px 0 #baa17b21, inset 4px 0 #f1ddb4;
  overflow-wrap: anywhere;
}
html.magical-night .magical-clue-dialog .answer-option > span:last-child { min-width: 0; }
html.magical-night .magical-clue-dialog .answer-letter { flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid #b9995e80; border-radius: 50%; background: #efe2c4; color: #816033; }
html.magical-night .magical-clue-dialog .answer-option:not(:disabled):hover { color: #23443f; background: #f0e7cf; border-color: #9a743d; transform: translateY(-1px); }
html.magical-night .magical-clue-dialog .answer-option.correct-answer { background: #e2edda; color: #2d5740; border-color: #7b9b6f; box-shadow: inset 4px 0 #75966e; }
html.magical-night .magical-clue-dialog .answer-option.wrong-answer { background: #f7e2d7; color: #78493f; border-color: #bd8770; box-shadow: inset 4px 0 #bd8770; }
html.magical-night .magical-clue-dialog .answer-option.dim-answer { opacity: .6; }
html.magical-night .magical-clue-dialog .answer-feedback { border-top: 1px solid #b99a6355; margin-top: 27px; }
html.magical-night .magical-clue-dialog .answer-feedback p,
html.magical-night .magical-clue-dialog .learn-more p { color: #48595a; font-size: 17px; line-height: 1.75; }
html.magical-night .magical-clue-dialog .learn-more { border: 1px solid #bc9e653d; background: #f2e6cc; border-radius: 5px; }
html.magical-night .magical-clue-dialog .learn-more summary,
html.magical-night .magical-clue-dialog .source-link { color: #786039; }
html.magical-night .magical-clue-dialog .next-row .primary-button { min-height: 57px; border-radius: 5px; background: #315951; color: #fff6df; box-shadow: 0 4px 0 #1d3e39; }

/* Painted winner window, character cast, and final score ledger. */
html.magical-night .magical-finale-shell { max-width: 1310px; padding: 10px 34px 0; color: #304a4c; }
html.magical-night .magical-finale-shell .studio-results-showcase { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 38px; align-items: center; margin-bottom: 35px; background: #fff5dc; border-color: #b99a62; color: #304a4c; }
html.magical-night .magical-finale-shell .magical-finale-window {
  display: flex;
  align-items: end;
  justify-content: center;
  min-height: 360px;
  padding: 130px 22px 24px;
  border: 2px solid #c8a363;
  border-radius: 130px 130px 8px 8px;
  background: linear-gradient(0deg, #173840d4, #17384005 60%), url('./assets/magical/main-street-evening.webp') center / cover, #264b51;
  box-shadow: 0 7px 0 #ae8c4d24, inset 0 0 0 7px #edd5a151;
}
html.magical-night .magical-finale-shell .magical-finale-window > .game-scene { display: none; }
html.magical-night .magical-finale-shell .studio-winner-portraits { display: flex; flex-wrap: wrap; justify-content: center; align-items: end; gap: 13px; margin: 0; width: 100%; }
html.magical-night .magical-finale-shell .studio-winner-portraits > .player-portrait-pair { width: 92px; height: 110px; flex: 0 0 92px; padding: 4px; border: 2px solid #e5c586; border-radius: 45px 45px 5px 5px; background: #d8c08e; box-shadow: 0 5px 0 #0b2e3890; }
html.magical-night .magical-finale-shell .studio-winner-portraits .avatar-graphic { display: inline-flex; width: 100%; height: 100%; border: 0; padding: 0; object-fit: cover; border-radius: 38px 38px 2px 2px; background-color: #dce4cf; box-shadow: none; }
html.magical-night .magical-finale-shell .studio-results-copy h1 { color: #29474c; font-size: clamp(37px, 4.2vw, 60px); line-height: 1.14; letter-spacing: -.025em; overflow-wrap: anywhere; }
html.magical-night .magical-finale-shell .studio-results-copy .result-intro { color: #667260; font-size: 17px; line-height: 1.75; max-width: 470px; }
html.magical-night .magical-finale-shell .studio-results-copy .eyebrow { color: #8b6a35; justify-content: flex-start; }
html.magical-night .magical-finale-shell .results-list { max-width: 940px; gap: 15px; }
html.magical-night .magical-finale-shell .result-row { display: grid; grid-template-columns: 28px 78px minmax(0, 1fr) auto; align-items: center; gap: 21px; padding: 17px 25px; border: 1px solid #bea16b78; border-radius: 6px; background: #fff9e9; box-shadow: 0 4px 0 #b29a6f1c; }
html.magical-night .magical-finale-shell .result-row.winner { background: #efe2bd; border-color: #b58c45; box-shadow: 0 4px 0 #b29a6f3d, inset 5px 0 #c29c54; }
html.magical-night .magical-finale-shell .result-avatar { width: 78px; height: 90px; padding: 3px; background: #d8c08e; border: 1px solid #bd995c; border-radius: 38px 38px 4px 4px; }
html.magical-night .magical-finale-shell .result-avatar .avatar-graphic { width: 100%; height: 100%; object-fit: cover; border-radius: 33px 33px 2px 2px; padding: 0; }
html.magical-night .magical-finale-shell .result-person { min-width: 0; }
html.magical-night .magical-finale-shell .result-person strong { color: #344d4e; font: 23px/1.25 var(--serif, Georgia, serif); overflow-wrap: anywhere; }
html.magical-night .magical-finale-shell .result-person small { color: #75806c; font-size: 12px; line-height: 1.5; }
html.magical-night .magical-finale-shell .result-rank { color: #9e7b3c; font-size: 16px; }
html.magical-night .magical-finale-shell .result-score { color: #83632e; font-size: 35px; white-space: nowrap; }
html.magical-night .magical-finale-shell .result-buttons { margin: 32px auto; gap: 12px; }
html.magical-night .magical-finale-shell .results-discoveries { max-width: 940px; background: #f6edd6; border: 1px solid #b99a6359; border-radius: 6px; padding: 27px; }
html.magical-night .magical-finale-shell .results-discoveries h2 { color: #40564c; }
html.magical-night .magical-finale-shell .discovery-line { color: #637361; font-size: 14px; line-height: 1.7; border-color: #b99a632e; }
html.magical-night .magical-finale-shell .discovery-line strong { color: #846331; }

/* The shared room uses the same scenes without changing server-owned markup. */
body.magical-online .online-room-heading {
  align-items: center;
  min-width: 0;
  min-height: 218px;
  margin-bottom: 24px;
  padding: 26px 32px;
  border: 1px solid #c3a164;
  border-radius: 8px;
  background: linear-gradient(90deg, #133540f2, #163841ad), url('./assets/magical/observatory-garden.webp') center 48% / cover, #183946;
  box-shadow: inset 0 0 0 6px #edd5a11a, 0 5px 0 #b5985e24;
}
body.magical-online .online-room-heading > div { min-width: 0; }
body.magical-online .online-room-heading h1 { color: #fff0cf; font-size: clamp(31px, 4.1vw, 54px); line-height: 1.12; overflow-wrap: anywhere; }
body.magical-online .online-room-heading .eyebrow { color: #e4c58b; }
body.magical-online .online-room-heading .room-turn-message { color: #e4dcc5; font-size: 13px; line-height: 1.7; }
body.magical-online .online-room-heading .your-turn { color: #c9e6bd; }
body.magical-online .active-room-avatar { width: 148px; height: 175px; flex: 0 0 148px; padding: 6px; background: #d8c08e; border: 2px solid #e5c586; border-radius: 72px 72px 6px 6px; box-shadow: 0 6px 0 #0a29364f; }
body.magical-online .active-room-avatar .avatar-graphic { width: 100%; height: 100%; object-fit: cover; padding: 0; border-radius: 64px 64px 2px 2px; }
body.magical-online .online-board-frame { padding: 23px; min-width: 0; border: 1px solid #b99556; border-radius: 8px; background: linear-gradient(#102d39d4, #142f3feb), url('./assets/magical/storybook-library.webp') center / cover, #153545; box-shadow: 0 5px 0 #b5985e24, inset 0 0 0 6px #e5c58612; }
body.magical-online .online-avatar-watermark { display: none; }
body.magical-online .online-board-frame .studio-board-caption { padding-bottom: 18px; color: #e2d6b8; }
body.magical-online .online-board-frame .studio-board-caption strong { color: #ffebc0; font: 25px/1.2 var(--serif, Georgia, serif); }
body.magical-online .online-board-scroll { max-width: 100%; overflow-x: auto; padding-bottom: 4px; scrollbar-color: #c5a568 #112e3a; }
body.magical-online .online-board { min-width: 620px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
body.magical-online .online-category { min-height: 142px; padding: 13px 8px; color: #344b4b; border: 1px solid #e0bd7c; border-radius: 5px; background: linear-gradient(140deg, #fff3d6, #e9d5ad); box-shadow: inset 0 0 0 4px #fff9e961; }
body.magical-online .online-category strong { font: 17px/1.25 var(--serif, Georgia, serif); overflow-wrap: anywhere; }
body.magical-online .online-topic-art { width: 83px; height: 83px; }
body.magical-online .online-tile { min-height: 76px; color: #f7dfa4; border: 1px solid #c6a05e9c; border-radius: 5px; background: linear-gradient(140deg, #294d5a, #183846); box-shadow: 0 3px 0 #071f2c, inset 0 0 0 4px #e2bf7820; font: 32px/1.15 var(--serif, Georgia, serif); }
body.magical-online .online-tile:not(:disabled):hover { background: linear-gradient(140deg, #3b635f, #264953); border-color: #ffe1a0; }
body.magical-online .online-tile:disabled:not(.used) { opacity: .7; }
body.magical-online .online-tile.used { color: #9fafa6; background: #173039b3; border-color: #6b807655; opacity: 1; box-shadow: inset 0 0 0 4px #12283035; }
body.magical-online .online-score-grid { grid-auto-columns: minmax(280px, 1fr); gap: 12px; max-width: 100%; }
body.magical-online .online-score-card { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; min-width: 0; padding: 14px 17px; background: #fff8e8; border: 1px solid #b89a6266; border-radius: 5px; color: #38504d; }
body.magical-online .online-score-card > .room-portrait { width: 62px; height: 72px; padding: 3px; background: #d8c08e; border: 1px solid #bd995c; border-radius: 30px 30px 4px 4px; }
body.magical-online .online-score-card .avatar-graphic { width: 100%; height: 100%; object-fit: cover; padding: 0; border-radius: 26px 26px 2px 2px; }
body.magical-online .online-score-card strong { color: #38504d; font-size: 17px; overflow-wrap: anywhere; }
body.magical-online .online-score-card small { color: #73806c; }
body.magical-online .online-score-card b { grid-column: 3; grid-row: 1; color: #89662b; font-size: 29px; white-space: nowrap; }
body.magical-online .online-score-card.active { background: #2f554e; border-color: #c3a164; box-shadow: inset 3px 0 #e9c47c; }
body.magical-online .online-score-card.active strong { color: #fff2d3; }
body.magical-online .online-score-card.active small { color: #d6ddc5; }
body.magical-online .online-score-card.active b { color: #f5d895; }
body.magical-online #room-question { width: min(1060px, calc(100% - 40px)); max-width: 1060px; max-height: calc(100dvh - 32px); padding: 30px; color: #304a51; background: linear-gradient(135deg, #fff9eb, #fff3db); border: 3px solid #c3a064; border-radius: 9px; box-shadow: 0 25px 100px #081d35b3, 0 0 0 5px #e5c68b36; }
body.magical-online #room-question::backdrop { background: #071f31c2; backdrop-filter: blur(7px); }
body.magical-online #room-question .room-clue-top { padding: 15px 20px; gap: 20px; margin: -30px -30px 25px; color: #fff0cf; border-bottom: 2px solid #c3a064; background: linear-gradient(90deg, #153741f2, #153741c9), url('./assets/magical/carousel-cove.webp') center 51% / cover, #163847; }
body.magical-online #room-question .room-clue-top strong { color: #fff0cf; min-width: 0; overflow-wrap: anywhere; font-size: 17px; line-height: 1.5; }
body.magical-online #room-question .room-question-portrait { width: 62px; height: 73px; flex: 0 0 62px; padding: 3px; border: 1px solid #d9b571; background: #e0c690; border-radius: 30px 30px 3px 3px; }
body.magical-online #room-question .room-question-portrait .avatar-graphic { width: 100%; height: 100%; object-fit: cover; padding: 0; border-radius: 26px 26px 2px 2px; }
body.magical-online #room-question [data-action="close-clue"] { color: #ffe8b9; min-width: 42px; min-height: 42px; background: #16353db0; border-color: #d9b57166; }
body.magical-online #room-question > h2 { color: #304a51; font: 29px/1.46 var(--serif, Georgia, serif); overflow-wrap: anywhere; }
body.magical-online #room-question .studio-room-clue-heading { min-width: 0; align-items: center; gap: 17px; margin-bottom: 20px; }
body.magical-online #room-question .studio-room-clue-heading .eyebrow { color: #8a6b3b; min-width: 0; overflow-wrap: anywhere; }
body.magical-online #room-question .room-answer { display: flex; align-items: center; gap: 15px; color: #344c54; padding: 17px 20px; min-height: 78px; background: #fffdf5; border: 1px solid #bea16b8c; border-radius: 5px; box-shadow: 0 3px 0 #baa17b21, inset 4px 0 #f1ddb4; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
body.magical-online #room-question .room-answer > span { flex: 0 0 37px; width: 37px; height: 37px; border: 1px solid #b9995e80; border-radius: 50%; background: #efe2c4; color: #816033; }
body.magical-online #room-question .room-answer:not(:disabled):hover { background: #f0e7cf; border-color: #9a743d; }
body.magical-online #room-question .room-answer.right { background: #e2edda; color: #2d5740; border-color: #7b9b6f; box-shadow: inset 4px 0 #75966e; }
body.magical-online #room-question .room-answer.wrong { background: #f7e2d7; color: #78493f; border-color: #bd8770; box-shadow: inset 4px 0 #bd8770; }
body.magical-online #room-question .room-answer.dim { opacity: .6; }
body.magical-online #room-question .room-answer-feedback { background: #f1e7cc; border: 1px solid #bc9e653d; color: #48595a; line-height: 1.75; border-radius: 5px; }
body.magical-online #room-question .room-answer-feedback a { color: #786039; }
body.magical-online .room-finale { grid-template-columns: minmax(250px, .85fr) minmax(0, 1fr); gap: 35px; padding: 25px; background: #fff5dc; color: #38504d; border: 1px solid #b99a62; border-radius: 8px; }
body.magical-online .room-finale .studio-online-finale-art { min-height: 285px; border: 2px solid #c8a363; border-radius: 105px 105px 6px 6px; background: linear-gradient(0deg, #17384077, transparent 60%), url('./assets/magical/main-street-evening.webp') center / cover, #264b51; box-shadow: inset 0 0 0 6px #edd5a151; }
body.magical-online .room-finale .studio-online-finale-art .game-scene { display: none; }
body.magical-online .room-finale h2 { color: #29474c; font-size: clamp(35px, 4vw, 53px); line-height: 1.15; overflow-wrap: anywhere; }
body.magical-online .room-finale p { color: #697660; line-height: 1.75; }

/* Keyboard focus stays visible on the paper, brass, and painted surfaces. */
html.magical-night .magical-play-shell :focus-visible,
html.magical-night .magical-clue-dialog :focus-visible,
html.magical-night .magical-finale-shell :focus-visible,
body.magical-online .online-board-scroll:focus-visible,
body.magical-online .online-tile:focus-visible,
body.magical-online #room-question :focus-visible { outline: 3px solid #235276; outline-offset: 3px; box-shadow: 0 0 0 6px #fff5dc; }

@media (max-width: 1100px) {
  html.magical-night .magical-play-shell .game-layout { grid-template-columns: minmax(0, 1fr); }
  html.magical-night .magical-play-shell .score-panel { margin-top: 0; }
  html.magical-night .magical-play-shell .score-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.magical-night .magical-play-shell .magical-turn-stage { grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; padding: 22px; }
  html.magical-night .magical-play-shell .turn-person { gap: 20px; }
  html.magical-night .magical-play-shell .magical-active-portrait { width: 132px; height: 156px; flex-basis: 132px; }
  html.magical-night .magical-finale-shell .studio-results-showcase { gap: 25px; }
}
@media (max-width: 760px) {
  html.magical-night .magical-play-shell .game-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
  html.magical-night .magical-play-shell .game-actions { justify-content: flex-start; }
  html.magical-night .magical-play-shell .magical-turn-stage { grid-template-columns: 1fr; min-height: 0; gap: 24px; padding: 23px; }
  html.magical-night .magical-play-shell .turn-round { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 15px; font-size: 11px; padding: 15px 17px; }
  html.magical-night .magical-play-shell .turn-round > strong { grid-column: 1; font-size: 20px; }
  html.magical-night .magical-play-shell .studio-player-points { grid-column: 2; grid-row: 1 / 3; font-size: 31px; margin: 0; text-align: right; }
  html.magical-night .magical-play-shell .round-progress { grid-column: 1 / -1; margin-top: 13px; }
  html.magical-night .magical-play-shell .turn-player-name { font-size: clamp(29px, 5vw, 39px); }
  html.magical-night .magical-play-shell .board-wrap { padding: 18px; }
  html.magical-night .magical-finale-shell .studio-results-showcase { grid-template-columns: 1fr; text-align: center; gap: 28px; }
  html.magical-night .magical-finale-shell .magical-finale-window { max-width: 550px; width: 100%; min-height: 320px; margin: 0 auto; padding-top: 130px; }
  html.magical-night .magical-finale-shell .studio-results-copy .eyebrow { justify-content: center; }
  html.magical-night .magical-finale-shell .studio-results-copy .result-intro { margin-inline: auto; }
  body.magical-online .online-room-heading { gap: 20px; padding: 23px; }
  body.magical-online .active-room-avatar { width: 112px; height: 133px; flex-basis: 112px; padding: 4px; }
  body.magical-online .room-finale { grid-template-columns: 1fr; text-align: center; gap: 25px; }
  body.magical-online .room-finale .studio-online-finale-art { width: min(100%, 510px); min-height: 285px; margin: auto; }
}
@media (max-width: 520px) {
  html.magical-night .magical-play-shell { padding-inline: 12px; }
  html.magical-night .magical-play-shell .game-heading h1 { font-size: 31px; }
  html.magical-night .magical-play-shell .game-actions .small-button { font-size: 11px; padding: 8px 10px; }
  html.magical-night .magical-play-shell .magical-turn-stage { padding: 20px 17px; gap: 20px; border-radius: 6px; background-position: center, 58% center; }
  html.magical-night .magical-play-shell .turn-person { gap: 18px; }
  html.magical-night .magical-play-shell .magical-active-portrait { width: 105px; height: 126px; flex-basis: 105px; padding: 4px; }
  html.magical-night .magical-play-shell .magical-active-portrait .avatar-emoji { font-size: 67px; }
  html.magical-night .magical-play-shell .turn-player-name { font-size: 29px; line-height: 1.12; }
  html.magical-night .magical-play-shell .turn-name-label { font-size: 12px; }
  html.magical-night .magical-play-shell .turn-caption { font-size: 11px; line-height: 1.6; }
  html.magical-night .magical-play-shell .turn-caption .level-chip { margin-left: 0; font-size: 10px; }
  html.magical-night .magical-play-shell .turn-round { padding: 14px; }
  html.magical-night .magical-play-shell .turn-round > strong { font-size: 18px; }
  html.magical-night .magical-play-shell .studio-player-points { font-size: 29px; }
  html.magical-night .magical-play-shell .board-wrap { padding: 15px 12px; }
  html.magical-night .magical-play-shell .studio-board-caption { flex-wrap: wrap; gap: 6px; padding-bottom: 14px; }
  html.magical-night .magical-play-shell .studio-board-caption strong { font-size: 23px; }
  html.magical-night .magical-play-shell .studio-mobile-board-hint { display: block; font-size: 10px; }
  html.magical-night .magical-play-shell .studio-desktop-hint { display: none; }
  html.magical-night .magical-play-shell .trivia-board { min-width: 555px; gap: 7px; }
  html.magical-night .magical-play-shell .category-cell { min-height: 133px; font-size: 14px; padding: 12px 7px; }
  html.magical-night .magical-play-shell .board-topic-illustration { width: 76px; height: 76px; flex-basis: 76px; }
  html.magical-night .magical-play-shell .value-cell { font-size: 29px; min-height: 69px; }
  html.magical-night .magical-play-shell .score-panel { padding: 20px 12px; }
  html.magical-night .magical-play-shell .score-panel h2 { font-size: 27px; }
  html.magical-night .magical-play-shell .score-list { grid-template-columns: 1fr; }
  html.magical-night .magical-play-shell .score-item { grid-template-columns: 61px minmax(0, 1fr) auto; min-height: 93px; gap: 13px; padding: 11px 12px; }
  html.magical-night .magical-play-shell .score-avatar { width: 61px; height: 71px; }
  html.magical-night .magical-play-shell .score-name { font-size: 16px; }
  html.magical-night .magical-play-shell .score-value { font-size: 26px; }
  html.magical-night .magical-clue-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-width: 2px; border-radius: 6px; }
  html.magical-night .magical-clue-dialog .question-top { min-height: 105px; flex-wrap: wrap; gap: 10px; padding: 13px 16px; }
  html.magical-night .magical-clue-dialog .studio-clue-art { width: 65px; height: 65px; flex-basis: 65px; }
  html.magical-night .magical-clue-dialog .question-meta strong { font-size: 18px; }
  html.magical-night .magical-clue-dialog .question-value { font-size: 17px; padding: 5px 8px; }
  html.magical-night .magical-clue-dialog .question-top > .level-chip { margin-left: 75px; font-size: 10px; }
  html.magical-night .magical-clue-dialog .question-body { padding: 20px 17px 25px; }
  html.magical-night .magical-clue-dialog .question-player { gap: 11px; margin-bottom: 20px; font-size: 11px; }
  html.magical-night .magical-clue-dialog .question-player strong { gap: 12px; font-size: 14px; }
  html.magical-night .magical-clue-dialog .question-avatar { width: 52px; height: 63px; flex-basis: 52px; }
  html.magical-night .magical-clue-dialog .timer { font-size: 16px; min-width: 47px; padding: 7px; }
  html.magical-night .magical-clue-dialog .question-heading { font-size: 24px; line-height: 1.43; }
  html.magical-night .magical-clue-dialog.level-tiny .question-heading { font-size: 27px; }
  html.magical-night .magical-clue-dialog .answer-option { min-height: 74px; padding: 13px 14px; font-size: 17px; gap: 12px; }
  html.magical-night .magical-clue-dialog .answer-letter { flex-basis: 31px; width: 31px; height: 31px; font-size: 15px; }
  html.magical-night .magical-clue-dialog .answer-feedback p, html.magical-night .magical-clue-dialog .learn-more p { font-size: 16px; }
  html.magical-night .magical-finale-shell { padding: 10px 13px 0; }
  html.magical-night .magical-finale-shell .magical-finale-window { min-height: 290px; border-radius: 95px 95px 6px 6px; padding: 115px 17px 20px; }
  html.magical-night .magical-finale-shell .studio-winner-portraits { gap: 11px; }
  html.magical-night .magical-finale-shell .studio-winner-portraits > .player-portrait-pair { width: 76px; height: 91px; flex-basis: 76px; }
  html.magical-night .magical-finale-shell .studio-results-copy h1 { font-size: 39px; }
  html.magical-night .magical-finale-shell .studio-results-copy .result-intro { font-size: 16px; }
  html.magical-night .magical-finale-shell .result-row { grid-template-columns: 18px 54px minmax(0, 1fr); gap: 13px; padding: 15px 13px; }
  html.magical-night .magical-finale-shell .result-avatar { width: 54px; height: 66px; }
  html.magical-night .magical-finale-shell .result-person strong { font-size: 19px; }
  html.magical-night .magical-finale-shell .result-person small { font-size: 10px; }
  html.magical-night .magical-finale-shell .result-score { grid-column: 3; font-size: 29px; margin-top: -5px; }
  html.magical-night .magical-finale-shell .result-buttons { flex-direction: column; }
  html.magical-night .magical-finale-shell .results-discoveries { padding: 22px 18px; }
  body.magical-online #online-app { min-width: 0; padding-inline: 12px; }
  body.magical-online .online-room-heading { min-height: 192px; padding: 20px 17px; gap: 16px; }
  body.magical-online .online-room-heading h1 { font-size: 29px; }
  body.magical-online .online-room-heading .room-turn-message { font-size: 11px; }
  body.magical-online .active-room-avatar { width: 100px; height: 120px; flex-basis: 100px; }
  body.magical-online .online-board-frame { padding: 16px 12px; }
  body.magical-online .online-board-frame .studio-board-caption { flex-wrap: wrap; gap: 7px; }
  body.magical-online .online-board { min-width: 555px; gap: 7px; }
  body.magical-online .online-category { min-height: 133px; }
  body.magical-online .online-category strong { font-size: 14px; }
  body.magical-online .online-topic-art { width: 76px; height: 76px; }
  body.magical-online .online-tile { min-height: 69px; font-size: 29px; }
  body.magical-online .online-score-grid { grid-auto-columns: 280px; }
  body.magical-online #room-question { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 19px 17px; border-width: 2px; }
  body.magical-online #room-question .room-clue-top { margin: -19px -17px 20px; padding: 13px 15px; gap: 13px; }
  body.magical-online #room-question .room-clue-top strong { font-size: 13px; }
  body.magical-online #room-question .room-question-portrait { width: 49px; height: 61px; flex-basis: 49px; }
  body.magical-online #room-question > h2 { font-size: 24px; }
  body.magical-online #room-question .studio-room-clue-heading { gap: 12px; }
  body.magical-online #room-question .studio-clue-art { width: 65px; height: 65px; flex-basis: 65px; }
  body.magical-online #room-question .room-answer { padding: 13px 14px; min-height: 74px; font-size: 17px; gap: 12px; }
  body.magical-online #room-question .room-answer > span { flex-basis: 31px; width: 31px; height: 31px; }
  body.magical-online .room-finale { padding: 20px 16px; }
  body.magical-online .room-finale .studio-online-finale-art { min-height: 250px; }
}
/* Short TV screens retain the large character without crowding the board. */
@media (min-width: 1000px) and (max-height: 850px) {
  html.magical-night .magical-play-shell .game-heading { margin-bottom: 16px; }
  html.magical-night .magical-play-shell .game-heading h1 { font-size: 34px; }
  html.magical-night .magical-play-shell .magical-turn-stage { min-height: 188px; padding: 17px 25px; margin-bottom: 20px; }
  html.magical-night .magical-play-shell .magical-active-portrait { width: 125px; height: 147px; flex-basis: 125px; }
  html.magical-night .magical-play-shell .turn-player-name { font-size: 39px; }
  html.magical-night .magical-play-shell .turn-round { padding: 12px 18px; }
  html.magical-night .magical-play-shell .turn-round > strong { font-size: 19px; }
  html.magical-night .magical-play-shell .studio-player-points { font-size: 30px; margin-top: 10px; }
  html.magical-night .magical-play-shell .round-progress { margin-top: 13px; }
  html.magical-night .magical-play-shell .board-wrap { padding: 17px; }
  html.magical-night .magical-play-shell .category-cell { min-height: 115px; font-size: 15px; padding: 9px 7px; }
  html.magical-night .magical-play-shell .board-topic-illustration { width: 68px; height: 68px; flex-basis: 68px; }
  html.magical-night .magical-play-shell .value-cell { min-height: 58px; font-size: 29px; }
  html.magical-night .magical-play-shell .score-item { min-height: 82px; }
  html.magical-night .magical-play-shell .score-panel h2 { font-size: 25px; }
  html.magical-night .magical-clue-dialog .question-heading { font-size: 30px; }
  html.magical-night .magical-clue-dialog .answer-option { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html.magical-night .magical-play-shell *,
  html.magical-night .magical-clue-dialog *,
  html.magical-night .magical-finale-shell *,
  body.magical-online .online-board-frame *,
  body.magical-online #room-question * { transition: none !important; }
  html.magical-night .magical-play-shell .value-cell:hover,
  html.magical-night .magical-clue-dialog .answer-option:hover { transform: none; }
}