@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  font-family: 'DM Sans', Arial, sans-serif;
  color: #f8f6ef;
  background: #34372f;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ffffff35;
  color: inherit;
  background: #252820d9;
  padding: 12px 18px;
  border-radius: 3px;
}
button:hover { background: #414538; }
button:focus-visible, a:focus-visible { outline: 2px solid #e8f38e; outline-offset: 4px; }
button span { margin-left: 24px; }
[hidden] { display: none !important; }

#scene {
  display: block;
  width: 100vw;
  height: 100dvh;
  touch-action: none;
  outline: none;
  transition: filter 220ms ease, opacity 220ms ease;
}
.is-transitioning #scene { filter: saturate(.72) brightness(.68); }

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 30px 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(#171c1999, transparent);
  pointer-events: none;
}
header > * { pointer-events: auto; }
.brand {
  font-family: Manrope, Arial, sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 28px;
  letter-spacing: -2px;
  color: inherit;
  text-decoration: none;
}
.brand span {
  display: block;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 2px;
  margin-top: 5px;
}
.topright { display: flex; gap: 26px; align-items: center; }
.concept, .eyebrow, .hall-label, footer, .panel-heading { font-size: 10px; letter-spacing: 1.8px; }
.concept { color: #d4d6ca; }

.hall-label {
  position: absolute;
  z-index: 3;
  top: 126px;
  left: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dot { width: 5px; height: 5px; border-radius: 50%; background: #d8e9a0; }
.muted { color: #c5c8bb; }

#welcome {
  position: absolute;
  z-index: 3;
  left: 38px;
  bottom: 98px;
  max-width: 415px;
  text-shadow: 0 2px 25px #1119;
}
h1 {
  font-family: Manrope, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(46px, 6vw, 86px);
  letter-spacing: -4px;
  line-height: 1.02;
  margin: 20px 0;
}
p { line-height: 1.65; font-size: 14px; }
#welcome p { color: #e2e3d8; margin-bottom: 24px; }
.primary {
  background: #e3edb0;
  color: #232820;
  border-color: #e3edb0;
  font-size: 14px;
  padding: 15px 20px;
  text-shadow: none;
}
.primary:hover { background: #f1f8cf; }
small { display: block; font-size: 10px; line-height: 1.6; color: #bfc5b5; }
#welcome small { max-width: 300px; margin-top: 17px; }

footer {
  position: absolute;
  z-index: 4;
  bottom: 22px;
  left: 38px;
  right: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #e0e2d6;
}
footer button { font-size: 14px; letter-spacing: 0; padding: 9px 12px; }

#near {
  position: absolute;
  z-index: 5;
  left: 38px;
  bottom: 100px;
  width: 288px;
  padding: 18px;
  background: #22291fef;
  border: 1px solid #90997c50;
  box-shadow: 0 18px 60px #0003;
}
h2 {
  font-family: Manrope, Arial, sans-serif;
  font-size: 27px;
  letter-spacing: -1px;
  font-weight: 500;
  margin: 13px 0;
}
#near h2 { font-size: 23px; margin: 9px 0 5px; }
#near p { color: #ccd0c1; margin: 0 0 13px; font-size: 12px; line-height: 1.45; }
#near .primary { width: 100%; padding: 12px 14px; }

#index {
  position: absolute;
  z-index: 8;
  right: 38px;
  top: 105px;
  width: 340px;
  background: #22291ff5;
  padding: 22px;
  max-height: calc(100dvh - 140px);
  overflow: auto;
  box-shadow: 0 20px 70px #0006;
}
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.panel-heading button, #closeDetail { padding: 4px 10px; font-size: 25px; border: 0; background: none; }
#list button,
#roomList button {
  width: 100%;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid #ffffff19;
  padding: 15px 0;
  font-size: 14px;
}
#list button:hover, #roomList button:hover { color: #e3edb0; }
#list button span, #roomList button span { font-size: 10px; margin: 0; color: #b4bf9e; }
#list button strong, #roomList button strong { font-weight: 500; }
#list button em {
  font-size: 8px;
  font-style: normal;
  letter-spacing: 1.2px;
  color: #252b20;
  background: #dfe9a8;
  padding: 4px 6px;
  border-radius: 2px;
}
#reset { margin: 18px 0 12px; font-size: 14px; width: 100%; }

#help {
  position: absolute;
  z-index: 8;
  bottom: 78px;
  right: 38px;
  background: #22291ff5;
  padding: 22px;
  width: 300px;
}
#help strong { font-weight: 500; }
#help p { font-size: 14px; color: #cbd1bf; }

#pad {
  position: absolute;
  z-index: 4;
  right: 40px;
  bottom: 110px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  user-select: none;
}
#pad div { display: flex; gap: 5px; }
#pad button { width: 44px; height: 44px; padding: 0; background: #252820b0; touch-action: none; }

dialog {
  color: #272d24;
  background: #eceee4;
  border: 0;
  border-radius: 3px;
  padding: 40px;
  width: min(780px, calc(100vw - 30px));
  max-width: calc(100vw - 30px);
  max-height: 85dvh;
  box-shadow: 0 40px 160px #0006;
}
dialog::backdrop { background: #10170c8c; backdrop-filter: blur(5px); }
#closeDetail { position: absolute; right: 12px; top: 10px; color: #272d24; }
dialog h2 { font-size: 36px; line-height: 1.1; margin-top: 23px; }
dialog .theme { font-size: 15px; color: #657052; }
.rule { height: 1px; background: #b6bca9; margin: 25px 0; }
.note { font-size: 10px; letter-spacing: 1px; margin-top: 25px; }
.note > span:last-child { display: block; font-size: 14px; letter-spacing: 0; color: #656e5e; }
dialog .primary { width: 100%; background: #2d3926; color: #fff; border: 0; }

.detail-media { margin: 22px 0 0; }
.media-viewport {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(270px, 47vh, 470px);
  overflow: hidden;
  background: #151713;
  border: 1px solid #c4ccb6;
  touch-action: none;
  cursor: grab;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}
.media-viewport:active { cursor: grabbing; }
.media-viewport:focus-visible { outline: 2px solid #667044; outline-offset: 3px; }
.media-viewport.video-active { cursor: default; touch-action: auto; }
#detailImage {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  user-select: none;
  transform-origin: center;
  will-change: transform;
}
#detailModel { display: block; width: 100%; height: 100%; touch-action: none; }
#detailVideo { display: block; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.media-message {
  max-width: 330px;
  padding: 26px;
  color: #f1efe6;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
}
.media-message a { color: #f2ca61; }
.media-tools { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.media-tools button { color: #272d24; background: #dde1d3; border-color: #acb49f; padding: 8px 13px; }
.media-hint { margin: 7px 0 0; color: #69735e; text-align: center; font-size: 14px; }
.ticket-action {
  display: block;
  width: 100%;
  margin: 20px 0 8px;
  padding: 14px 18px;
  color: #fff;
  background: #2d3926;
  border-radius: 3px;
  text-decoration: none;
  text-align: center;
}
.ticket-status { margin: 20px 0 12px; color: #657052; font-size: 12px; text-align: center; }

#roomLoader {
  position: absolute;
  z-index: 12;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 36px));
  padding: 34px;
  background: #1d211bdd;
  border: 1px solid #e3edb044;
  box-shadow: 0 35px 120px #000a;
  backdrop-filter: blur(14px);
}
#roomLoader h2 { margin: 16px 0 8px; }
#roomLoader p { color: #d0d4c8; margin: 0 0 20px; }
.load-track { height: 3px; overflow: hidden; background: #ffffff20; margin: 22px 0; }
.load-track span { display: block; width: 4%; height: 100%; background: #dfe9a8; transition: width 180ms ease; }
#roomLoader button { width: 100%; margin-top: 8px; }
#roomLoader #retryRoom { color: #252b20; background: #dfe9a8; }

#roomControls {
  position: absolute;
  z-index: 5;
  right: 38px;
  top: 118px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 14px;
  color: #e6e7dd;
  background: #181b17c9;
  border: 1px solid #ffffff20;
  font-size: 9px;
  letter-spacing: 1.5px;
}
#roomControls button { padding: 9px 12px; font-size: 14px; letter-spacing: .2px; }

#error {
  position: absolute;
  z-index: 7;
  left: 38px;
  bottom: 72px;
  width: min(460px, calc(100vw - 76px));
  padding: 14px 16px;
  background: #171a16e8;
  border: 1px solid #d8b96345;
  font-size: 16px;
  line-height: 1.7;
}
#error strong, #error span { display: block; }
#error button { margin-top: 10px; width: 100%; }

body[data-space='duck-work'] header {
  background: linear-gradient(#090b09dd, transparent);
}
body[data-space='duck-work'] .dot { background: #dfba45; box-shadow: 0 0 12px #dfba45; }
body[data-space='duck-work'] #near { background: #171a16f2; border-color: #d8b96345; }

@media (max-width: 600px) {
  header { padding: 22px; }
  .brand { font-size: 24px; }
  .concept { display: none; }
  .topright { gap: 0; }
  header button { font-size: 14px; padding: 10px; }
  .hall-label { left: 22px; top: 105px; font-size: 8px; }
  #welcome { left: 22px; bottom: 125px; max-width: 265px; }
  h1 { font-size: 54px; letter-spacing: -3px; }
  #welcome p { font-size: 14px; }
  #welcome small { max-width: 235px; font-size: 9px; }
  footer { left: 22px; right: 22px; bottom: 17px; font-size: 8px; letter-spacing: 1px; }
  #status { max-width: 165px; line-height: 1.7; }
  #pad { right: 14px; bottom: 72px; }
  #pad button { height: 44px; width: 44px; }
  #index { right: 16px; left: 16px; width: auto; }
  #near { left: 16px; right: 16px; bottom: 178px; width: auto; max-width: 330px; padding: 14px; }
  #near h2 { font-size: 20px; }
  #near p { font-size: 12px; }
  #near .primary { padding: 11px; font-size: 13px; }
  #near .primary span { margin-left: 8px; }
  #help { right: 20px; bottom: 72px; }
  dialog { padding: 24px 18px; max-height: 94dvh; }
  dialog h2 { font-size: 28px; margin: 16px 34px 8px 0; }
  .detail-media { margin-top: 16px; }
  .media-viewport { height: min(46dvh, 380px); }
  .media-tools button { min-height: 42px; }
  .note { margin-top: 18px; }
  #roomControls { right: 18px; top: 96px; }
  #roomControls > span { display: none; }
  #roomLoader { padding: 26px; }
  #error { left: 16px; right: 16px; bottom: 62px; width: auto; font-size: 14px; }
}

@media (max-width: 420px) and (max-height: 880px) {
  #near { bottom: 180px; max-width: calc(100vw - 32px); }
  #near .eyebrow, #near p { display: none; }
  #near h2 { margin: 0 0 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #pad { bottom: 70px; }
  .media-viewport { height: 39dvh; min-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  #scene, .load-track span { transition: none; }
}

.photo-credit {
  margin: 1rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: #b8b5ab;
  overflow-wrap: anywhere;
}
.photo-credit a { color: inherit; text-underline-offset: .2em; }
.photo-credit a:focus-visible { outline: 2px solid #dbc18c; outline-offset: 4px; }

/* The Great Hall archive and its inspectable event records. */
.archive-meta { display:grid; grid-template-columns:90px 1fr; gap:9px 18px; padding:18px 0; margin:0; border-bottom:1px solid #bcc3b1; }
.archive-meta dt { font-size:14px; color:#657052; }
.archive-meta dd { font-size:16px; margin:0; }
.archive-source { display:inline-block; color:#3a4b2c; font-size:14px; text-underline-offset:4px; margin:8px 0; }
#detailText { font-size:16px; }
.media-hint { font-size:14px; }
#list button { grid-template-columns:25px 1fr auto; }
#list button strong { line-height:1.5; }
#scene { cursor:grab; }
#scene:active { cursor:grabbing; }
#near p { font-size:14px; }
#hallLabel { font-size:12px; letter-spacing:1.5px; pointer-events:none; }
#concept { font-size:12px; }
#welcome small { font-size:13px; max-width:340px; }
#welcome p { font-size:16px; }
#status { font-size:12px; letter-spacing:1px; }
#indexNote { font-size:13px; }
@media(max-width:600px) {
  #hallLabel {font-size:11px; flex-wrap:wrap; max-width:calc(100vw - 44px);}
  #hallLabel .muted {display:none;}
  #status {font-size:10px;max-width:180px;}
  #welcome {max-width:calc(100vw - 44px);bottom:190px;}
  #welcome small {max-width:280px;font-size:12px;}
  #welcome h1 {font-size:48px;}
  #near {max-width:calc(100vw - 32px);}
  #near h2 {font-size:21px;}
  .archive-meta {grid-template-columns:70px 1fr;gap:8px 12px;}
}
@media(prefers-reduced-motion:reduce) {
  #scene,.load-track span {transition:none;}
}

/* Upcoming events share the hall's gold, dark stone and museum typography. */
.event-shortcut { position:absolute; top:160px; left:38px; z-index:4; padding:12px 16px; background:#252c21f5; border-color:#cbb16b; color:#ffe1a0; text-align:left; font-size:18px; }
.event-shortcut span { display:block; margin:3px 0 0; font-size:14px; color:#e6e5d9; }
.event-views { position:sticky; top:-1px; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0 0; padding:10px 0; background:#eceee4; }
.event-views button { color:#293323; background:#e1e5d6; border:1px solid #a9b29a; min-height:48px; padding:12px; font-size:16px; }
.event-views button[aria-selected='true'] { background:#303d26; border-color:#303d26; color:#fff; }
.first-jam-detail { padding-top:35px; }
.first-jam-detail .eyebrow { font-size:14px; letter-spacing:1.2px; }
.first-jam-detail .theme { font-size:16px; }
.first-jam-detail .note { font-size:14px; letter-spacing:.5px; }
.first-jam-detail .note > span:last-child { font-size:16px; line-height:1.65; }
.first-jam-detail .media-hint { font-size:14px; }
.ticket-pending { display:block; width:100%; min-height:48px; color:#46513d; background:#d8dece; border:1px solid #a4ae98; cursor:default; font-size:16px; margin:18px 0 8px; }
.first-jam-detail .ticket-status { color:#4e5c42; font-size:16px; line-height:1.5; margin:10px 0 18px; }
.first-jam-detail .ticket-action { font-size:18px; font-weight:600; }
.calendar-events button { width:100%; color:#fff; background:#303d26; font-size:16px; line-height:1.5; min-height:52px; margin-bottom:16px; }
#closeDetail { min-width:44px; min-height:44px; z-index:3; }
@media(max-width:600px) {
  .event-shortcut { top:140px; left:22px; font-size:16px; padding:10px 14px; }
  .event-shortcut span { font-size:14px; }
  .event-views { gap:6px; padding:8px 0; }
  .event-views button { font-size:14px; padding:10px 8px; }
  .first-jam-detail .archive-meta { grid-template-columns:1fr; gap:4px; }
  .first-jam-detail .archive-meta dd { margin-bottom:10px; }
  .first-jam-detail .media-viewport { min-height:235px; height:42dvh; }
}
@media(max-height:650px) {
  #welcome { bottom:65px; }
  #welcome h1 { font-size:36px; margin:8px 0; }
  #welcome small { display:none; }
  #welcome p { margin:8px 0 12px; }
  .event-shortcut { top:92px; left:auto; right:22px; }
}

#screenControls { position:absolute; z-index:5; top:116px; right:32px; display:flex; align-items:center; gap:8px; padding:10px; background:#171c16e8; border:1px solid #7d805a; border-radius:3px; max-width:calc(100vw - 32px); flex-wrap:wrap; }
#screenControls span { font-size:14px; color:#f5e3b6; }
#screenControls button { min-height:44px; padding:9px 12px; font-size:14px; }
#screenControls[hidden] { display:none; }
@media(max-width:600px) { #screenControls { top:135px; right:16px; left:16px; gap:6px; } #screenControls span { flex-basis:100%; } #screenControls button { flex:1; padding:8px 6px; } }

#museum {position:relative;isolation:isolate;}
#scene {position:relative;z-index:1;}
.hall-youtube {position:absolute;left:0;top:0;width:960px;height:540px;transform-origin:0 0;pointer-events:none;z-index:0;background:#050505;}
.hall-youtube iframe {border:0;width:100%;height:100%;}
#detailYouTube {width:100%;height:100%;min-height:200px;border:0;grid-area:1 / 1;}

/* Compact museum identity; shortcuts and playback belong in the Exhibits menu. */
header { padding: 14px 26px; align-items: flex-start; }
.museum-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; pointer-events: none; }
.museum-identity .brand { display: block; width: 128px; line-height: 0; pointer-events: auto; }
.brand img { display: block; width: 100%; height: auto; object-fit: contain; }
.asset-filters { position: absolute; pointer-events: none; }
.museum-identity .brand img { filter: url(#museumLogoTransparency); }
.museum-identity #hallLabel { position: static; margin: 0; font-size: 10px; gap: 6px; letter-spacing: 1px; }
.museum-identity #hallLabel .muted { display: none; }
#index .event-shortcut { position: static; display: block; width: 100%; margin: 0 0 12px; font-size: 15px; padding: 10px 12px; }
#index .event-shortcut[hidden] { display: none; }
#index #screenControls { position: static; max-width: 100%; margin: 0 0 14px; padding: 8px; gap: 6px; }
#index #screenControls span { flex-basis: 100%; font-size: 12px; }
#index #screenControls button { flex: 1; padding: 8px 5px; font-size: 12px; }
@media (max-width: 600px) {
  header { padding: 10px 16px; }
  .museum-identity .brand { width: 102px; }
  .museum-identity #hallLabel { font-size: 9px; max-width: 170px; letter-spacing: .5px; }
}

.welcome-audio{width:100%;text-align:left;margin:.7rem 0;padding:.8rem;border:1px solid #b6a77555;border-radius:5px;background:#20261f;color:#f4e6ba;font:inherit;cursor:pointer}
#roomControls{flex-wrap:wrap}

/* The Monarchs: photographs float in black; navigation stays quietly readable. */
body[data-space='monarchs'] {background:#000;color:#f0ece4;}
body[data-space='monarchs'] header {background:none;}
body[data-space='monarchs'] #near {display:none;}
body[data-space='monarchs'] #pad {bottom:70px;}
body[data-space='monarchs'] footer {bottom:16px;}
#monarchControls {position:fixed;z-index:5;bottom:58px;left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 32px));display:grid;gap:6px;padding:10px 12px;background:#090909eb;border:1px solid #d4b47735;border-radius:5px;}
#monarchControls button {font-size:14px;min-height:44px;padding:9px 12px;background:#111;border-color:#e2d2ab30;}
#monarchControls button:hover {background:#29251d;}
.portrait-navigation,.room-navigation {display:flex;gap:6px;align-items:center;justify-content:space-between;}
.portrait-navigation button {min-width:100px;}
#portraitCounter {font-size:13px;color:#cdb582;font-variant-numeric:tabular-nums;letter-spacing:.08em;}
#monarchInspect {color:#f6de9f;font-weight:600;white-space:normal;}
.room-navigation button {flex:1;}
#entranceDirection {position:fixed;z-index:4;top:112px;right:26px;font-size:13px;color:#bcb29e;background:#050505bb;border:0;max-width:calc(100vw - 32px);}
#monarchIntro {font-size:16px;line-height:1.55;color:#dbd7cc;}
#monarchList button {display:flex;width:100%;gap:14px;align-items:center;text-align:left;border:0;border-bottom:1px solid #ffffff20;padding:14px 8px;min-height:52px;}
#monarchList button span {margin:0;color:#c5ad76;font-size:13px;}
#monarchList button strong {font-size:16px;font-weight:500;line-height:1.4;}
#monarchRecord {font-size:16px;line-height:1.65;margin:22px 0;}
#monarchRecord h3 {font-size:18px;margin:0 0 8px;}
#monarchRecord ul {padding-left:20px;}
#monarchRecord li {margin:8px 0;}
#monarchRecord details {margin-top:20px;font-size:14px;}
#monarchRecord summary {cursor:pointer;min-height:36px;}
#monarchRecord a {display:block;color:inherit;padding:5px 0;overflow-wrap:anywhere;}
.monarch-detail .media-viewport {height:46dvh;min-height:240px;background:#080808;}
.monarch-detail .note {font-size:14px;line-height:1.6;}
.monarch-detail #detailPhotoCredit {font-size:13px;line-height:1.6;}
.visually-hidden {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
@media(max-width:700px){
  #monarchControls {bottom:52px;gap:4px;padding:8px;}
  #monarchControls button {padding:8px;font-size:14px;}
  body[data-space='monarchs'] #pad {bottom:235px;right:12px;}
  body[data-space='monarchs'] footer #status {max-width:58vw;font-size:10px;}
  #entranceDirection {top:115px;right:16px;}
  body[data-space='monarchs'] #index {top:105px;max-height:calc(100dvh - 125px);z-index:8;}
}
@media(max-height:540px) and (min-width:701px){#monarchControls{bottom:44px;left:auto;right:18px;transform:none;width:370px;}body[data-space='monarchs'] #pad{left:18px;right:auto;}}
@media(prefers-reduced-motion:reduce){body[data-space='monarchs'] *,body[data-space='monarchs'] *::before {transition:none!important;animation:none!important;}}

/* Long portrait gallery: a clear vista, small approach record, and usable walking controls. */
#museumSound{font-size:14px;min-height:40px;white-space:nowrap;}
#museumAudioControls{margin:0 0 20px;padding:12px 0;border-bottom:1px solid #ffffff25;}
#museumAudioControls p{font-size:14px;line-height:1.5;color:#cfc7b4;}
#museumAudioControls button{min-height:44px;font-size:14px;margin:4px 0;}
#radioLevelLabel{display:flex;align-items:center;gap:12px;font-size:14px;margin:12px 0;}
#radioLevel{width:150px;accent-color:#d9bf86;min-height:36px;}
#monarchInspection{position:fixed;z-index:6;right:24px;top:145px;width:320px;max-height:calc(100dvh - 220px);overflow:auto;padding:24px;background:#0b0b0bf2;border:1px solid #d5bd863d;border-radius:3px;box-shadow:0 12px 38px #0008;}
#monarchInspection h2{font-size:26px;line-height:1.1;margin:12px 0 16px;}
#monarchNearTitles{font-size:16px;line-height:1.6;white-space:pre-line;color:#ecdec4;}
#monarchNearNote{font-size:14px;line-height:1.55;color:#d0ccc4;}
#monarchNearCredit{font-size:13px;line-height:1.6;margin:18px 0 12px;overflow-wrap:anywhere;}
#monarchInspection small{font-size:13px;color:#a9a296;}
#monarchNearDetails{font-size:14px;min-height:44px;}
#closeMonarchInspection{position:absolute;right:8px;top:6px;width:40px;min-height:40px;padding:0;border:0;font-size:24px;}
body[data-space='monarchs'] #monarchControls{width:min(470px,calc(100vw - 32px));}
@media(max-width:700px){
  .topright{gap:6px;}
  #museumSound{padding:8px;font-size:13px;}
  #monarchInspection{top:115px;right:16px;width:min(320px,calc(100vw - 32px));max-height:calc(100dvh - 400px);padding:18px;}
  #monarchInspection h2{font-size:22px;}
  #monarchNearTitles{font-size:15px;}
  #monarchNearNote{font-size:14px;}
  body[data-space='monarchs'] #pad{bottom:247px;right:14px;z-index:7;}
  body[data-space='monarchs'] footer #status{max-width:58vw;}
}
@media(max-height:650px){#monarchInspection{top:100px;max-height:calc(100dvh - 160px);}body[data-space='monarchs'] #pad{left:14px;right:auto;bottom:70px;}}

/* v17: keep the gallery view open, with the same walking pad as the main hall. */
#radioNowListening{display:flex;flex-direction:column;gap:3px;margin-top:7px;align-items:flex-start;font-size:13px;color:#ded9ca;}
#radioNowListening[hidden]{display:none}.radio-logo{position:relative;width:100px;height:37px;overflow:hidden}.radio-logo img{position:absolute;width:111.39px;max-width:none;left:-5.6px;top:-14.4px}
body[data-space='monarchs'] #monarchControls{left:24px;right:auto;bottom:72px;transform:none;width:auto;padding:0;border:0;background:none;display:flex}
#monarchControls[hidden],#rudeControls[hidden]{display:none!important}
#monarchControls .room-navigation{gap:6px}#monarchControls button{min-width:64px;min-height:44px;padding:8px 12px;background:#0e100eeb;font-size:14px}
#monarchMenu .portrait-navigation{margin:12px 0}#monarchMenu button{min-height:44px;font-size:14px}#monarchMenu #monarchInspect{width:100%;margin:8px 0}
body[data-space='monarchs'] #pad{bottom:70px;left:auto;right:22px}
#monarchInspection{top:auto;bottom:150px;left:24px;right:auto;width:min(310px,calc(100vw - 48px));max-height:200px;padding:14px 44px 14px 16px}
#monarchInspection h2{font-size:21px;line-height:1.2;margin:0 0 5px}#monarchNearTitles{font-size:14px;line-height:1.4;margin:0 0 8px}#monarchNearDetails{padding:8px 12px;min-height:44px}
.monarch-detail .media-viewport{width:100%;height:auto;min-height:0;max-width:480px;aspect-ratio:4/5;margin:0 auto;overflow:hidden}
.monarch-detail #detailImage{width:100%;height:100%;max-height:none;max-width:none;object-fit:cover}
#rudeControls{position:fixed;z-index:5;bottom:72px;left:24px;display:flex;gap:8px}#rudeControls button{min-height:44px;font-size:14px;background:#09150deb;border-color:#49624a}#rudeMenu button{min-height:44px;margin:5px;font-size:14px}#rudeMenu p{font-size:16px;line-height:1.5}
body[data-space='rude-boy']{background:#000}body[data-space='rude-boy'] header{background:none}
@media(max-width:700px){body[data-space='monarchs'] #monarchControls,#rudeControls{left:16px;bottom:68px}body[data-space='monarchs'] #pad{right:14px;bottom:70px}#monarchInspection{left:16px;bottom:166px;width:min(280px,calc(100vw - 32px));max-height:180px}#rudeControls{flex-direction:column;gap:4px}#radioNowListening{font-size:13px}.radio-logo{width:86px;height:32px}.radio-logo img{width:95.8px;left:-4.8px;top:-12.4px}}

/* Winning recordings remain visible in inspection and stop when it closes. */
#monarchMusic{margin:24px 0;padding:20px 0;border-block:1px solid #ccc3ae}
#monarchMusic h3{font-size:18px;margin:0 0 8px}
#monarchMusic p{font-size:15px;line-height:1.5}
#monarchMusic button{min-height:44px;padding:10px 16px;background:#292720;color:#fff;border:1px solid #685b41}
#monarchMusic a{display:block;margin-top:12px;color:inherit;font-size:14px;overflow-wrap:anywhere}
#monarchMusic .music-status{font-size:13px}
.monarch-song-player{width:100%;max-width:356px;min-width:200px;min-height:200px;height:200px;margin:16px auto 0}
.monarch-song-player iframe{display:block;width:100%;height:100%;min-height:200px;border:0}
#monarchMusic[hidden],.monarch-song-player[hidden]{display:none!important}


/* v21: compact, optional prompts; thumb controls cannot become selected text. */
#pad,#pad *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
#pad button{display:inline-grid;place-items:center}#pad button.is-held{background:#6d7756;color:#fff}
.move-icon{display:block;width:12px;height:12px;border-top:2px solid currentColor;border-right:2px solid currentColor;pointer-events:none}
.move-icon.forward{transform:translateY(3px) rotate(-45deg)}.move-icon.right{transform:translateX(-3px) rotate(45deg)}.move-icon.back{transform:translateY(-3px) rotate(135deg)}.move-icon.left{transform:translateX(3px) rotate(-135deg)}
#monarchMusic{margin:18px 0;padding:0;border:0}.monarch-song-player{margin:0 auto}
body:not([data-space='great-hall']) #help,body:not([data-space='great-hall']) #helpBtn{display:none!important}
@media(max-width:700px){
 #near{left:12px;right:auto;bottom:128px;width:228px;max-width:calc(100vw - 24px);padding:10px;display:grid;grid-template-columns:minmax(0,1fr) 74px;align-items:center;gap:8px}
 #near .eyebrow,#near p{display:none}#near h2{font-size:16px;line-height:1.2;margin:0;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 #near .primary{min-height:44px;font-size:12px;line-height:1.15;padding:5px}#near .primary span{display:none}
 #monarchInspection{left:12px;right:auto;bottom:128px;top:auto;width:232px;max-height:145px;padding:10px 38px 10px 10px}
 #monarchInspection h2{font-size:16px;line-height:1.2;margin:0 0 4px}#monarchNearTitles{font-size:12px;line-height:1.3;max-height:32px;overflow:hidden;margin:0 0 5px}#monarchNearDetails{min-height:44px;padding:6px 10px;font-size:13px}
 #closeMonarchInspection{right:0;top:0;min-height:44px;width:38px}
 #pad,body[data-space='monarchs'] #pad{bottom:18px;right:12px;left:auto}
 body[data-space='monarchs'] #monarchControls,#rudeControls{bottom:18px;left:12px}
 #roomControls{left:12px;right:auto;bottom:18px;top:auto;transform:none;padding:0;border:0;background:none}#roomControls>span{display:none}#roomControls button{min-height:44px}
 #rudeControls button{padding:6px 10px;font-size:12px}#monarchControls button{padding:6px 9px;font-size:12px;min-width:56px}
 footer{left:12px;right:12px;bottom:115px}footer #status{max-width:230px;font-size:10px}
 #help{left:12px;bottom:148px;max-width:260px;padding:14px;font-size:13px}#help p{font-size:13px}
 #index{max-height:72dvh;width:min(310px,calc(100vw - 24px));padding:14px}
}

#pad .move-icon{margin:0}

@media(max-width:700px){#near h2,#monarchInspection h2{letter-spacing:-.25px}}

/* Clear choices at the Fantastic Friday entrance. */
#nearMonarchActions{grid-column:1/-1;display:grid;gap:8px}.near-exhibit-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.near-exhibit-tabs button{font-size:14px;min-height:44px;padding:8px}#nearMonarchEnter{font-size:14px;min-height:46px}
/* Magazine reader: the entire page fits between two compact control bars. */
#magazineReader {
  position:fixed; inset:0; margin:auto; width:min(1400px,100vw); max-width:100vw;
  height:100dvh; max-height:100dvh; padding:0; border:1px solid #68725b;
  background:#141914; color:#f8f6ef; overflow:hidden;
  grid-template-rows:auto minmax(0,1fr) auto auto; box-shadow:0 0 80px #0009;
}
#magazineReader[open] { display:grid; }
#magazineReader::backdrop { background:#080c0bef; }
.magazine-top {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:5px 12px; background:#20271d;
}
.magazine-top > div { min-width:0; }
.magazine-top .eyebrow { font-size:.75rem; letter-spacing:.05em; line-height:1.2; color:#d4dbae; }
.magazine-top h2 { font-size:.875rem; line-height:1.2; font-weight:500; margin:2px 0 0; letter-spacing:0; }
#magazineClose { flex:0 0 auto; min-height:36px; padding:6px 10px; font-size:.875rem; }
#magazineViewport {
  overflow:auto; overscroll-behavior:contain; touch-action:pan-x pan-y;
  min-width:0; min-height:0; position:relative; background:#090d0b;
}
#magazinePageStage { height:100%; min-height:0; min-width:100%; display:flex; justify-content:center; align-items:center; }
#magazinePage {
  display:block; width:100%; height:100%; max-width:100%; max-height:100%;
  object-fit:contain; user-select:none;
}
.zoomed#magazinePageStage { height:auto; display:block; }
.zoomed #magazinePage { width:100%; height:auto; max-height:none; }
.magazine-toolbar {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:4px 6px; padding:4px 8px; background:#20271d; border-top:1px solid #ffffff20;
}
.magazine-paging, .magazine-zoom { display:flex; align-items:center; gap:4px; }
.magazine-toolbar button { min-height:36px; padding:4px 2px; font-size:.875rem; line-height:1.2; }
#magazinePrevious, #magazineNext { min-width:40px; }
#magazineZoom { min-width:54px; }
#magazineZoomOut, #magazineZoomIn { width:32px; font-size:1.125rem; }
.magazine-paging label { display:flex; align-items:center; gap:4px; white-space:nowrap; }
#magazinePageNumber {
  width:44px; min-height:36px; padding:4px 1px; font:inherit; font-size:.875rem;
  background:#11170f; color:#fff; border:1px solid #9aa589; border-radius:4px;
}
#magazinePageTotal { font-size:.75rem; color:#d2d6c9; }
#magazineReader button:disabled { opacity:.35; cursor:default; }
.magazine-feedback { display:flex; justify-content:center; align-items:center; gap:8px; font-size:.875rem; }
.magazine-feedback:has(#magazineStatus:empty) { display:none; }
#magazineRetry { font-size:.875rem; padding:4px 8px; min-height:36px; }
.magazine-feedback:not(:has(#magazineStatus:not(:empty))) #magazineRetry { display:none; }
@media (pointer:coarse) {
  #magazineClose, .magazine-toolbar button, #magazinePageNumber { min-height:40px; }
}
@media (max-width:700px) {
  #magazineReader { border:0; width:100vw; }
  .magazine-top { padding:4px 8px; padding-top:max(4px,env(safe-area-inset-top)); }
  .magazine-toolbar { padding-bottom:max(4px,env(safe-area-inset-bottom)); }
  #near:has(#nearMonarchActions:not([hidden])) { width:min(330px,calc(100vw - 24px)); }
}

.song-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:10px}.song-controls button,.song-controls a{font-size:14px;min-height:44px;padding:10px;color:inherit}.song-caption{font-weight:700;font-size:16px}.song-status{font-size:14px}.monarch-song-player{height:220px;min-height:220px}