/* Game navigation and layout. Typography is owned by readable-ui.css. */
html.magical-night .site-header {
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:1500px;padding:20px 32px;position:relative;z-index:20;
}
html.magical-night .site-header .brand { flex-shrink:0; }
html.magical-night .site-header .brand strong { font-size:28px; }
html.magical-night .site-header .brand>span:last-child { font-size:17px;line-height:1.15; }
html.magical-night .header-actions { display:flex;align-items:center;gap:12px; }
html.magical-night .header-music,
html.magical-night .site-menu>summary {
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:12px 20px;border:1px solid #8b795e;border-radius:12px;
  background:#fffaf0;color:#203744;font:700 18px/1.4 var(--ui-font);cursor:pointer;
}
html.magical-night .header-music[aria-pressed="true"] { background:#203f45;color:#fffaf0;border-color:#203f45; }
html.magical-night .site-menu { position:relative; }
html.magical-night .site-menu>summary { list-style:none; }
html.magical-night .site-menu>summary::-webkit-details-marker { display:none; }
html.magical-night .site-menu[open]>summary { background:#eadfc9;border-color:#203744; }
html.magical-night .header-menu {
  position:absolute;right:0;top:calc(100% + 10px);z-index:100;display:grid;gap:6px;
  width:260px;padding:12px;background:#fffbf1;border:1px solid #8b795e;border-radius:16px;
  box-shadow:0 18px 50px #112b4233;
}
html.magical-night .header-actions .header-menu button {
  display:block;width:100%;min-height:52px;padding:13px 16px;text-align:left;
  font-size:18px;line-height:1.4;color:#203744;border-radius:9px;border:0;background:transparent;
}
html.magical-night .header-actions .header-menu button:hover { background:#eee5d4; }
html.magical-night .header-menu [aria-pressed="true"]::after { content:'On';float:right;color:#235f57;font-weight:800; }
html.magical-night .game-hub-lobby { max-width:1440px;margin:12px auto 64px;padding:0 32px; }
html.magical-night .hub-welcome {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);min-height:440px;
  position:relative;isolation:isolate;overflow:hidden;border-radius:24px;background:#172d43;
  border:1px solid #647078;color:#fffbf1;
}
html.magical-night .hub-welcome-copy { padding:44px 46px;position:relative;z-index:2; }
html.magical-night .hub-kicker { margin:0 0 16px;color:#f0d89a;font-size:18px;font-weight:700; }
html.magical-night .hub-welcome h1,
html.magical-night.tv-view .hub-welcome h1 {
  font-family:var(--ui-display-font);font-size:clamp(40px,4.2vw,64px);line-height:1.15;
  font-weight:500;letter-spacing:-.035em;color:#fff9e9;margin:0 0 20px;max-width:15ch;
}
html.magical-night .hub-intro { font-size:21px;line-height:1.55;color:#e5e9e4;margin:0 0 26px; }
html.magical-night .hub-primary-actions { display:grid;grid-template-columns:1.05fr 1fr;gap:14px;max-width:600px; }
html.magical-night .hub-play,
html.magical-night .hub-online {
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;
  min-height:104px;padding:18px 22px;border-radius:14px;text-align:left;text-decoration:none;
  font-family:var(--ui-font);line-height:1.35;border:1px solid transparent;box-shadow:none;
}
html.magical-night .hub-play { background:#f3ce7b;color:#192f3d;border-color:#f8dfab;margin:0; }
html.magical-night .hub-play>span,
html.magical-night .hub-online>strong { font-size:26px;font-weight:800; }
html.magical-night .hub-play small,
html.magical-night .hub-online>span { font-size:17px;line-height:1.45;font-weight:600; }
html.magical-night .hub-play small { color:#34424a; }
html.magical-night .hub-online { background:#10283dc9;border-color:#c4d9cf;color:#fffaf0; }
html.magical-night .hub-online>span { color:#e1e7e3; }
@media(hover:hover) {
  html.magical-night .hub-play:hover { background:#ffe1a0;transform:translateY(-2px); }
  html.magical-night .hub-online:hover { background:#294a55;transform:translateY(-2px); }
  html.magical-night .hub-control:hover { border-color:#315c5c;background:#f5efdf; }
}
html.magical-night .hub-session-summary { color:#d7e0dc;font-size:16px;line-height:1.6;margin:18px 0 0; }
html.magical-night .hub-resume { margin:20px 0 0;padding:15px;border:1px solid #b6bdab;background:#fffaf0;color:#203744;border-radius:12px; }
html.magical-night .hub-resume p { margin:4px 0;font-size:16px; }
html.magical-night .hub-welcome .magical-hero-art {
  position:relative;z-index:0;inset:auto;width:100%;height:100%;min-height:440px;
  margin:0;order:0;border-radius:0;overflow:hidden;
}
html.magical-night .hub-welcome .magical-street-art { width:100%;height:100%;object-fit:cover;object-position:70% center;position:absolute;inset:0; }
html.magical-night .hub-welcome .magical-street-shade { background:linear-gradient(90deg,#172d43,transparent 45%),linear-gradient(0deg,#172d4366,transparent 40%); }
html.magical-night .hub-welcome .magical-marquee { display:none; }
html.magical-night .hub-setup { padding:30px 0 22px;border-bottom:1px solid #b1a28c88; }
html.magical-night .hub-section-heading { display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:20px; }
html.magical-night .hub-section-heading h2 { font-family:var(--ui-display-font);font-size:32px;line-height:1.25;margin:0 0 8px;color:#203744; }
html.magical-night .hub-section-heading p { margin:0;font-size:18px;color:#495a60; }
html.magical-night .hub-ready-mark { font-size:17px;font-weight:700;white-space:nowrap;color:#315c54; }
html.magical-night .hub-control-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(160px,.65fr);gap:14px; }
html.magical-night .hub-control,
html.magical-night .hub-rounds { background:#fffbf1;border:1px solid #9b8c75;border-radius:14px;min-width:0;min-height:100px;padding:18px 22px; }
html.magical-night .hub-control { position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;text-align:left;color:#203744;padding-right:48px;font-size:18px; }
html.magical-night .hub-control strong,
html.magical-night .hub-rounds>strong { font-size:21px;font-weight:800;line-height:1.35; }
html.magical-night .hub-control>span { font-size:17px;color:#495a60;line-height:1.5; }
html.magical-night .hub-control i { position:absolute;right:20px;font-style:normal;font-size:26px;color:#315c54; }
html.magical-night .hub-rounds { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px; }
html.magical-night .hub-rounds select { width:100%;min-height:52px;background:#fffdf7;border:1px solid #81745e;border-radius:9px;padding:9px 12px;color:#203744; }
html.magical-night .hub-setup-footer { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px; }
html.magical-night .hub-setup-footer #rounds-help { margin:0;font-size:16px;text-align:left;line-height:1.5; }
html.magical-night .hub-utility-links { display:flex;gap:14px;flex-wrap:wrap; }
html.magical-night .hub-utility-links .text-button { font-size:18px;min-height:48px;padding:8px 4px;color:#315c54;text-decoration:underline;text-underline-offset:4px; }
html.magical-night .game-hub-lobby .magical-family-cast { margin:30px 0; }
html.magical-night .game-hub-lobby .magical-step-seal { display:none; }
html.magical-night .game-hub-lobby .magical-kicker { display:none; }
html.magical-night .game-hub-lobby .magical-section-heading h2 { font-size:30px; }
html.magical-night .game-hub-lobby .magical-section-heading p { font-size:17px;line-height:1.5; }
html.magical-night .game-hub-lobby .magical-cast-lineup { gap:16px; }
html.magical-night .game-hub-lobby .magical-cast-member { border:1px solid #b3a386;border-radius:16px;background:#fffbf1;padding:18px 12px;gap:7px; }
html.magical-night .game-hub-lobby .magical-cast-portrait { width:112px;height:112px;margin:0 auto 4px; }
html.magical-night .game-hub-lobby .magical-cast-member strong { font-size:21px; }
html.magical-night .game-hub-lobby .magical-cast-level,
html.magical-night .game-hub-lobby .magical-cast-edit { font-size:16px; }
html.magical-night .game-hub-lobby .setup-customize { margin:24px 0;border:1px solid #9b8c75;border-radius:16px;scroll-margin-top:20px; }
html.magical-night .game-hub-lobby .setup-customize>summary { padding:20px 24px;font-size:20px;background:#fffbf1;border-radius:16px; }
html.magical-night .game-hub-lobby .setup-registration-row { grid-template-columns:90px minmax(150px,1fr) minmax(170px,.85fr) 48px;gap:14px;align-items:end;scroll-margin-top:24px;border:1px solid #b4a68e;padding:20px;border-radius:15px;background:#fffcf5; }
html.magical-night .setup-level-field { display:grid;gap:7px;min-width:0; }
html.magical-night .setup-name-field>span,
html.magical-night .setup-level-field>span { font-size:17px;font-weight:700;color:#354a52; }
html.magical-night .setup-registration-row .avatar-button { width:90px;height:98px;grid-row:span 2; }
html.magical-night .setup-registration-row .setup-profile-wrap { grid-column:2/4; }
html.magical-night .setup-registration-row .remove-player { grid-column:4;grid-row:1;min-width:48px;min-height:52px; }
html.magical-night .setup-registration-row .player-challenge { grid-column:2/4; }
html.magical-night .question-action-bar {
  position:sticky;bottom:0;z-index:12;display:flex;justify-content:flex-end;gap:12px;
  margin:0;padding:18px 28px max(18px,env(safe-area-inset-bottom));
  background:#fffbf1;border-top:2px solid #ad9671;box-shadow:0 -12px 28px #1b344217;
}
html.magical-night .question-action-bar .primary-button { width:100%;min-height:64px;font-size:24px;font-weight:800; }
html.magical-night .magical-clue-dialog .question-top { min-height:100px;padding:15px 26px; }
html.magical-night .magical-clue-dialog .studio-clue-art { width:64px;height:68px;flex-basis:64px; }
html.magical-night .magical-clue-dialog .question-body { padding:24px 30px; }
html.magical-night .magical-clue-dialog .answer-feedback { margin-top:24px; }
html.magical-night .magical-clue-dialog .learn-more { margin:18px 0 0; }
html.magical-night .magical-clue-dialog .learn-more summary { min-height:52px;padding:12px 0; }
@media(min-width:900px) {
  html.magical-night .magical-clue-dialog .question-options,
  html.magical-night.tv-view .magical-clue-dialog .question-options,
  body.magical-online #room-question .room-answer-list,
  body.magical-practice #practice-clue .answer-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html.magical-night .magical-clue-dialog.grocery-clue-dialog .question-options,
  html.magical-night.tv-view .magical-clue-dialog.grocery-clue-dialog .question-options { grid-template-columns:1fr; }
}
@media(max-width:1050px) {
  html.magical-night .hub-welcome-copy { padding:36px 30px; }
  html.magical-night .hub-primary-actions { grid-template-columns:1fr;max-width:360px; }
  html.magical-night .hub-play,html.magical-night .hub-online { min-height:88px; }
  html.magical-night .hub-control-grid { grid-template-columns:1fr 1fr; }
  html.magical-night .hub-rounds { grid-column:1/-1;min-height:82px;grid-template-columns:1fr minmax(180px,1fr); }
}
@media(max-width:680px) {
  html.tv-view,html[data-text-size='large'] { --ui-body:1.25rem;--ui-nav:1.25rem;--ui-question:2rem;--ui-answer:1.5rem;--ui-control:3.25rem;--ui-answer-height:5rem; }
  html.magical-night .site-header { padding:16px;gap:10px; }
  html.magical-night .site-header .brand-icon { width:40px;height:44px;margin-right:0; }
  html.magical-night .site-header .brand-icon svg { width:34px;height:34px; }
  html.magical-night .site-header .brand strong { font-size:22px; }
  html.magical-night .site-header .brand>span:last-child { font-size:15px; }
  html.magical-night .header-actions { gap:8px; }
  html.magical-night .header-music,html.magical-night .site-menu>summary { padding:10px 12px;min-height:48px; }
  html.magical-night .site-menu>summary { gap:5px; }
  html.magical-night .game-hub-lobby { padding:0 16px;margin-top:4px; }
  html.magical-night .hub-welcome { grid-template-columns:1fr;min-height:0;border-radius:18px; }
  html.magical-night .hub-welcome-copy { padding:30px 24px; }
  html.magical-night .hub-welcome h1,html.magical-night.tv-view .hub-welcome h1 { font-size:40px;line-height:1.17; }
  html.magical-night .hub-kicker { font-size:16px;margin-bottom:12px; }
  html.magical-night .hub-intro { font-size:20px;line-height:1.5;margin-bottom:22px; }
  html.magical-night .hub-primary-actions { max-width:none;grid-template-columns:1fr 1fr;gap:10px; }
  html.magical-night .hub-play,html.magical-night .hub-online { min-height:102px;padding:16px 13px; }
  html.magical-night .hub-play>span,html.magical-night .hub-online>strong { font-size:23px; }
  html.magical-night .hub-play small,html.magical-night .hub-online>span { font-size:16px; }
  html.magical-night .hub-welcome .magical-hero-art { position:absolute;inset:0;z-index:-1;min-height:0;height:100%;opacity:.36; }
  html.magical-night .hub-welcome .magical-street-shade { background:#102439aa; }
  html.magical-night .hub-welcome .magical-street-art { object-position:68% center; }
  html.magical-night .hub-section-heading { align-items:flex-start;gap:12px; }
  html.magical-night .hub-section-heading h2 { font-size:28px; }
  html.magical-night .hub-ready-mark { display:none; }
  html.magical-night .hub-control-grid { grid-template-columns:1fr;gap:10px; }
  html.magical-night .hub-control { min-height:88px;padding:16px 46px 16px 18px; }
  html.magical-night .hub-rounds { grid-column:auto;grid-template-columns:1fr 1fr;padding:14px 18px; }
  html.magical-night .hub-setup-footer { display:block; }
  html.magical-night .hub-utility-links { gap:20px;margin-top:8px; }
  html.magical-night .game-hub-lobby .magical-cast-lineup { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
  html.magical-night .game-hub-lobby .magical-cast-portrait { width:100px;height:100px; }
  html.magical-night .game-hub-lobby .magical-cast-member { padding:15px 8px; }
  html.magical-night .game-hub-lobby .magical-section-heading { align-items:start; }
  html.magical-night .game-hub-lobby .magical-section-heading p { display:none; }
  html.magical-night .game-hub-lobby .setup-registration-row { grid-template-columns:72px minmax(0,1fr) 48px;gap:12px;padding:16px; }
  html.magical-night .setup-registration-row .avatar-button { width:72px;height:84px;grid-row:1/3; }
  html.magical-night .setup-registration-row .setup-name-field { grid-column:2; }
  html.magical-night .setup-registration-row .setup-level-field { grid-column:2/4; }
  html.magical-night .setup-registration-row .remove-player { grid-column:3; }
  html.magical-night .setup-registration-row .setup-profile-wrap,html.magical-night .setup-registration-row .player-challenge { grid-column:1/-1; }
  html.magical-night .magical-clue-dialog .question-top { min-height:86px;padding:12px 16px;gap:10px; }
  html.magical-night .magical-clue-dialog .studio-clue-art { width:44px;height:48px;flex-basis:44px; }
  html.magical-night .magical-clue-dialog .question-body { padding:20px; }
  html.magical-night .question-action-bar { padding:12px 16px max(12px,env(safe-area-inset-bottom)); }
  html.magical-night .question-action-bar .primary-button { min-height:60px;font-size:22px; }
}
@media(max-width:370px) {
  html.magical-night .site-header { flex-wrap:wrap; }
  html.magical-night .site-header .brand { flex:1; }
  html.magical-night .site-header .brand strong { font-size:20px; }
  html.magical-night .header-actions { margin-left:auto; }
  html.magical-night .hub-welcome-copy { padding:26px 20px; }
  html.magical-night .hub-welcome h1,html.magical-night.tv-view .hub-welcome h1 { font-size:35px; }
  html.magical-night .hub-primary-actions { grid-template-columns:1fr; }
  html.magical-night .hub-play,html.magical-night .hub-online { min-height:82px; }
}
@media(prefers-reduced-motion:reduce) {
  html.magical-night .hub-play,html.magical-night .hub-online { transition:none;transform:none; }
}

/* Actions remain reachable in family, After Hours and shared-room questions. */
.question-dialog .question-action-bar,#room-question .question-action-bar { position:sticky;bottom:-1px;z-index:8;display:flex;flex-direction:column;gap:12px;padding:16px 20px max(16px,env(safe-area-inset-bottom));background:#fff9ed;border-top:1px solid #ccbfa6;box-shadow:0 -8px 22px #22334712; }
:is(.question-dialog,#room-question) .question-action-bar :is(.primary-button,.primary,[data-action="next"]) { width:100%;min-height:60px;font-size:24px;font-weight:800; }
:is(.question-dialog,#room-question) .question-action-bar p { margin:0;color:#243a50;font-size:18px; }
.journey-token.journey-avatar { transform:translate(calc(-50% + var(--token-column,0)*var(--token-spread-x)),calc(-50% + var(--token-row,0)*var(--token-spread-y))); }
.journey-token [data-journey-sprite] { width:100%;height:100%;display:grid;place-items:center; }
.journey-guide-pose { display:block;width:72px;height:72px;background:url('./assets/journey/guide-movement-sheet-v1.png') 0 calc(var(--guide-row)*-72px)/288px 216px no-repeat; }
[data-journey-moving="true"] .journey-guide-pose { animation:journey-guide-frames .68s steps(4,end) infinite; }
@keyframes journey-guide-frames { to {background-position-x:-288px;} }
@media(prefers-reduced-motion:reduce) { [data-journey-moving="true"] .journey-guide-pose {animation:none;} }

.hub-rounds[hidden],.game-mode-picker [hidden],.room-create [hidden] { display:none!important; }

.journey-game-shell .hub-kicker { color:#405e61; }
.journey-jump { display:none; }
@media(max-width:1050px) {
 .journey-jump { display:flex;justify-content:space-between;align-items:center;position:fixed;left:20px;right:20px;bottom:max(16px,env(safe-area-inset-bottom));z-index:30;width:calc(100% - 40px);min-height:56px;box-shadow:0 7px 24px #102b4055; }
 body:has(dialog[open]) .journey-jump {display:none;}
 .journey-game-shell {padding-bottom:80px;}
}
@media(max-width:680px) {
 .journey-board-heading {gap:12px;padding:18px;}
 .journey-board-heading h2 {font-size:28px;}
 .journey-board-heading p {display:none;}
 .journey-game-heading {gap:12px;}
 .journey-game-heading .game-actions {gap:8px;margin-bottom:4px;}
 .journey-game-heading .game-actions button {min-height:46px;padding:8px 12px;font-size:16px;}
 .journey-legend {gap:8px;padding:12px;grid-template-columns:1fr 1fr;}
 .journey-legend li {padding:8px;}
 .journey-legend strong {font-size:17px;}
 .journey-legend small {font-size:15px;}
}

/* Leave room for the common soundtrack control without shrinking navigation. */
.site-header .header-actions {padding-right:170px;}
.online-site-header {padding-right:190px;}
[data-universal-music-dialog] :is(.info-header,.room-clue-top,.clue-top) {padding-right:68px;}
[data-universal-music-dialog] .question-top {padding-right:80px;}
@media(max-width:680px) {
 .site-header .header-actions {padding-right:62px;}
 .site-header .brand {font-size:18px;gap:8px;}
 .site-header .brand strong {font-size:23px;}
 .site-header .brand-icon {width:38px;height:38px;}
 .site-header .site-menu > summary {padding:10px 12px;min-height:48px;}
 .online-site-header {padding-right:80px;}
 .topbar {padding-right:76px;}
}

/* Keep the active character beside the picker title, at an intentional size. */
.journey-active-player {display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.journey-active-player > span {display:block;flex:0 0 72px;width:72px;height:84px;overflow:hidden;border-radius:16px;}
.journey-active-player > span :is(.player-portrait-pair,.avatar-graphic,.avatar-painted) {display:block;width:100%;height:100%;max-height:84px;object-fit:cover;}
.journey-active-player > div {min-width:0;}
.journey-active-player h2 {margin-bottom:4px;}
.journey-active-player p {margin:0;font-size:18px;}
html.magical-night .journey-game-shell .hub-kicker {color:#405e61;}

@media(min-width:1051px) {
 .journey-game-heading {margin:8px 0 22px;}
 .journey-game-heading h1 {font-size:34px;}
 .journey-game-heading p {margin-bottom:0;}
 .journey-board-heading {padding:18px 20px;gap:16px;}
 .journey-board-heading h2 {font-size:30px;margin-bottom:5px;}
 .journey-board-heading p {font-size:18px;margin:0;}
 .journey-goal-badge strong {font-size:28px;}
}

#room-rounds-field[hidden] {display:none!important;}