/* AFTER HOURS / room logic. Loaded after the gallery's structural stylesheet. */
body.gallery-mode {
  --gallery-ink: #f0eee7;
  --gallery-muted: #b0b1b8;
  --gallery-paper: #111218;
  --room-accent: #d5c4a7;
  --puzzle-line: rgba(238, 235, 225, .19);
  background: #111218;
  color: var(--gallery-ink);
  color-scheme: dark;
}
.gallery-shell {
  --gallery-ink: #f0eee7;
  --gallery-muted: #b0b1b8;
  background: #111218;
  color: var(--gallery-ink);
}
.gallery-shell button, .gallery-shell a { -webkit-tap-highlight-color: transparent; }
.gallery-shell button:focus-visible, .gallery-shell a:focus-visible,
.gallery-map button:focus-visible, .gallery-help button:focus-visible,
#gallery-works a:focus-visible, #gallery-works button:focus-visible {
  outline: 2px solid var(--room-accent, #d5c4a7);
  outline-offset: 4px;
}
.gallery-shell .gallery-topbar {
  padding: max(28px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right)) 34px max(40px, env(safe-area-inset-left));
  background: linear-gradient(#111218f5, #11121800);
}
.gallery-brand { font-size: 25px; letter-spacing: -1.4px; color: #f0eee7; }
.gallery-brand>span, .gallery-brand small { color: #b0b1b8; }
.gallery-shell .gallery-location { color: var(--room-accent); letter-spacing: .18em; }
.gallery-shell .gallery-location small { color: #b0b1b8; }
.gallery-toplinks { gap: 25px; font-size: 11px; }
.gallery-toplinks button:hover, .gallery-toplinks a:hover { border-color: var(--room-accent); }
.gallery-shell .gallery-intro, .gallery-shell #room-caption {
  left: max(5vw, env(safe-area-inset-left));
  bottom: 132px;
  text-shadow: 0 2px 25px #08090d, 0 1px 4px #08090d;
}
.gallery-intro { max-width: min(510px, 44vw); }
.gallery-intro h1 { font-size: clamp(46px, 5.6vw, 82px); letter-spacing: -.065em; }
.gallery-shell .gallery-intro .eyebrow, .gallery-shell #room-caption .eyebrow {
  color: var(--room-accent);
  font-size: 9px;
  letter-spacing: .2em;
}
.gallery-shell .gallery-intro p, .gallery-shell #room-caption p { color: #c2c1c8; line-height: 1.75; }
.gallery-shell .gallery-enter {
  background: #e5dccb !important;
  border-color: #e5dccb !important;
  color: #15151b !important;
  border-radius: 0;
  box-shadow: 5px 5px 0 #090a0e66;
}
.gallery-shell .gallery-enter:hover { background: #fff5df !important; }
.gallery-shell #room-caption { max-width: min(390px, 36vw); }
#room-caption h1 { font-size: clamp(32px, 3.8vw, 54px); }
.gallery-shell #room-caption .room-works-open { color: #eee8db; border-color: var(--room-accent); }
.gallery-shell .gallery-bottom {
  padding-inline: max(40px, env(safe-area-inset-left)) max(40px, env(safe-area-inset-right));
  background: linear-gradient(#11121800, #111218f2);
}
.gallery-shell #gallery-progress { color: #c1c1c9; letter-spacing: .12em; }
.gallery-shell #gallery-hint { color: #a6a7b2; }
.gallery-controls button, .gallery-touch-pad button {
  color: #eceae4;
  background: #181a22dc;
  border: 1px solid #f1ece029;
  border-radius: 2px;
}
.gallery-controls button:hover, .gallery-touch-pad button:hover { background: #30313c; }
.gallery-controls button:disabled { opacity: .35; cursor: not-allowed; }
.gallery-shell #guide-button {
  top: auto;
  right: max(40px, env(safe-area-inset-right));
  bottom: 140px;
  transform: none;
  min-height: 85px;
  color: #e4dfcf;
  background: radial-gradient(ellipse, #252634bb, transparent 72%);
}
.gallery-shell #guide-button small { color: #b2b1bd; }
.guide-crystal { background: linear-gradient(135deg, #eee2c3bb, #a4b8cb55); border-color: #d7c9a5; box-shadow: 0 0 28px #dbcaaa45, inset 0 0 14px #eee6cd66; }
.guide-crystal::before, .guide-crystal::after { border-color: #d7c9a5; background: #c7c2ba44; }
.guide-crystal::after { background: #e4ddca66; }
.gallery-door { background: #151720e8; border-color: #ddd3ba59; color: #ebe4d5; border-radius: 0; box-shadow: 4px 4px 0 #090a0f66; }
.gallery-door:hover { background: #34323c; border-color: var(--room-accent); }
#gallery-target { color: #e9e6df; background: #14161eeb; border: 1px solid #f1ece026; border-radius: 0; }
.gallery-transition { background: #111218; }
.gallery-discovery { color: #f1eada; background: #171923ed; border-color: #b8ad9677; border-radius: 0; box-shadow: 5px 5px 0 #090a0e66; }
/* A small cut-paper instrument panel, never a second full-screen layer. */
.gallery-puzzle {
  position: absolute;
  z-index: 10;
  top: 125px;
  right: max(40px, env(safe-area-inset-right));
  width: 300px;
  max-height: calc(100svh - 390px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #76727b #171820;
  box-sizing: border-box;
  padding: 22px;
  color: #f0eee7;
  background: #161820ed;
  border: 1px solid #eee9dc29;
  border-top: 2px solid var(--room-accent, #d5c4a7);
  box-shadow: 8px 9px 0 #08090d45, 0 15px 50px #08090d25;
  backdrop-filter: blur(14px);
}
.puzzle-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 15px; }
.puzzle-top .eyebrow, .puzzle-top>span:first-child { font-size: 8px; letter-spacing: .18em; color: var(--room-accent, #d5c4a7); }
#puzzle-step { font-size: 9px; color: #b6b6c1; font-variant-numeric: tabular-nums; white-space: nowrap; }
#puzzle-title { margin: 0; font: 400 29px/1.07 Georgia, 'Times New Roman', serif; letter-spacing: -.045em; text-wrap: balance; }
#puzzle-clue { margin: 12px 0 0; font-size: 11px; line-height: 1.65; color: #c2c1cc; }
.puzzle-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 22px; margin: 16px 0; }
.puzzle-path span { display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 3px; border: 1px solid #b5b3c038; color: #b6b5c0; font-size: 10px; font-variant-numeric: tabular-nums; }
.puzzle-path span.active, .puzzle-path span.current, .puzzle-path span[aria-current="step"] { border-color: var(--room-accent); color: var(--room-accent); }
.puzzle-path span.done, .puzzle-path span.complete, .puzzle-path span.completed, .puzzle-path span.filled { color: #171820; background: var(--room-accent, #d5c4a7); border-color: transparent; }
.puzzle-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.puzzle-actions button { display: flex; align-items: center; gap: 10px; min-height: 47px; padding: 8px 12px; text-align: left; color: #e9e7e2; background: #242631; border: 1px solid #e7e2d724; border-radius: 0; transition: background .16s, border-color .16s, transform .16s; }
.puzzle-actions button small, .puzzle-actions button>span { font: 400 17px/1 Georgia, serif; color: var(--room-accent); }
.puzzle-actions button strong { font-size: 10px; font-weight: 500; letter-spacing: .015em; }
.puzzle-actions button:hover { background: #343541; border-color: var(--room-accent); transform: translateY(-1px); }
.puzzle-actions button:active { transform: translateY(1px); }
.puzzle-actions button:disabled { opacity: .45; transform: none; cursor: default; }
#puzzle-feedback { min-height: 30px; margin: 12px 0 4px; font-size: 10px; line-height: 1.55; color: var(--room-accent, #d5c4a7); }
.puzzle-footer { display: flex; flex-wrap: wrap; gap: 0 15px; border-top: 1px solid #eee9dc1c; padding-top: 5px; }
.puzzle-footer button { min-height: 36px; text-align: left; font-size: 9px; color: #bcbcc6; border-bottom: 1px solid transparent; }
.puzzle-footer button:hover { color: #fff4df; border-bottom-color: var(--room-accent); }
#puzzle-skip { width: 100%; color: #a4a4b0; }
#puzzle-next { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 45px; margin-top: 12px; padding: 10px 13px; background: var(--room-accent, #d5c4a7); color: #15161d; font-size: 11px; text-align: left; }
#puzzle-next:hover { filter: brightness(1.12); }
.puzzle-unsolved .gallery-touch-pad, .puzzle-unsolved.gallery-touch-pad { display: none !important; }
/* Reading rooms retain the same midnight material, even outside the shell. */
.gallery-map, .gallery-help, #gallery-works { color-scheme: dark; color: #eeeae1; background: #171820; border-color: #e8e0d12c; border-radius: 0; box-shadow: 0 25px 100px #0009; }
.gallery-map::backdrop, .gallery-help::backdrop, #gallery-works::backdrop { background: #08090fc9; backdrop-filter: blur(12px); }
.map-header, .map-footer { border-color: #e8e0d125; }
.map-header p, .map-footer, .gallery-help p, .gallery-help ul, .gallery-help dl, #gallery-works>p { color: #b3b2c0; }
.map-header h2, .gallery-help h2, #gallery-works h2 { color: #f0ece1; }
.map-header button, .gallery-close, .gallery-help button[data-close], #gallery-works button[data-close], .gallery-help>button:last-child { color: #e8e3d9; border-color: #e8e0d13b; border-radius: 0; }
.map-room { background: #21232d; border-color: #e8e0d129; border-radius: 0; }
.map-room:nth-child(3n+2) .room-swatch { clip-path: polygon(10% 0,100% 12%,84% 100%,0 84%); transform: rotate(-9deg); }
.map-room:nth-child(3n) .room-swatch { clip-path: polygon(0 24%,72% 0,100% 100%,25% 80%); }
.map-room:hover { background: #2a2b37; border-color: var(--room-accent, #d5c4a7); }
.room-number, .room-visited { color: #c3bcae; }
.room-name { color: #f1ede4; }
.room-subtitle { color: #b6b5c0; }
.room-swatch { opacity: .24; }
.map-room.locked, .map-room[data-locked="true"], .map-room:disabled { background: #171920; opacity: .65; }
.gallery-help kbd { color: #eee9dd; background: #292b36; border-color: #eee9dc35; border-radius: 0; }
.room-work-list a { color: #eee9df; border-color: #eee9dc29; border-radius: 0; }
.room-work-list a:hover { background: #292b36; }
.room-work-list small { color: #b5b3c1; }
.work-placeholder { color: #d8cbb3; background: #30313a; }
.gallery-archive-link { color: #e2d3b8; border-color: #a99b805e; }
.gallery-fallback { color: #ece6dc; background: linear-gradient(145deg, #151721, #25232d); }
.gallery-fallback a, .gallery-fallback button { color: #eee9df; background: #292b36; border-color: #eee9dc50; }
@media (max-width: 1050px) and (min-width: 701px) {
  .gallery-puzzle { right: 24px; width: 272px; padding: 18px; }
  .gallery-shell #guide-button { right: 24px; }
  .gallery-intro h1 { font-size: 56px; }
  .gallery-shell #room-caption { max-width: 33vw; }
}
@media (max-width: 700px) {
  .gallery-shell { min-height: 0; height: 100svh; }
  .gallery-shell .gallery-topbar { padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 25px max(18px, env(safe-area-inset-left)); gap: 10px; }
  .gallery-brand { font-size: 22px; }
  .gallery-brand>span { font-size: 8px; max-width: 120px; }
  .gallery-location { display: none; }
  .gallery-toplinks { gap: 7px; font-size: 10px; }
  .gallery-toplinks button { justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid #eee9dc29; border-radius: 0; }
  .gallery-toplinks button span { display: none; }
  .gallery-shell .gallery-intro, .gallery-shell #room-caption { left: max(20px, env(safe-area-inset-left)); right: 100px; top: max(110px, calc(env(safe-area-inset-top) + 88px)); bottom: auto; max-width: 330px; }
  .gallery-intro h1 { font-size: clamp(32px, 8.4vw, 46px); }
  .gallery-shell .gallery-intro .eyebrow, .gallery-shell #room-caption .eyebrow { font-size: 7px; letter-spacing: .13em; margin-bottom: 9px; }
  .gallery-shell .gallery-intro p { font-size: 10px; margin-top: 10px; max-width: 250px; }
  .gallery-enter { min-height: 44px; margin-top: 12px; padding-inline: 15px; font-size: 10px; }
  #room-caption h1 { font-size: 29px; }
  .gallery-shell #room-caption p { font-size: 10px; margin-top: 7px; line-height: 1.5; }
  #room-caption .room-works-open { margin-top: 2px; font-size: 10px; }
  .gallery-shell #guide-button { top: max(104px, calc(env(safe-area-inset-top) + 82px)); right: max(12px, env(safe-area-inset-right)); bottom: auto; min-width: 68px; min-height: 78px; padding: 7px; font-size: 9px; }
  .guide-crystal { width: 19px; height: 19px; margin: 7px 0 10px; }
  .gallery-shell #guide-button small { font-size: 7px; }
  .gallery-puzzle { top: auto; bottom: max(88px, calc(env(safe-area-inset-bottom) + 74px)); left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); width: auto; max-height: min(350px, 46svh); padding: 15px 17px 10px; box-shadow: 5px 5px 0 #08090d45; }
  .puzzle-top { margin-bottom: 8px; }
  #puzzle-title { font-size: 25px; }
  #puzzle-clue { margin-top: 7px; font-size: 10px; line-height: 1.5; }
  .puzzle-path { margin: 9px 0; gap: 5px; }
  .puzzle-path span { min-width: 20px; height: 20px; }
  .puzzle-actions { gap: 6px; }
  .puzzle-actions button { min-height: 44px; padding: 7px 11px; }
  #puzzle-feedback { min-height: 15px; margin: 8px 0 5px; font-size: 9px; }
  .puzzle-footer { gap: 0 17px; padding-top: 0; }
  .puzzle-footer button { min-height: 36px; }
  #puzzle-skip { width: auto; margin-left: auto; }
  #puzzle-next { min-height: 44px; margin-top: 8px; }
  .gallery-shell .gallery-bottom { min-height: 76px; padding: 10px max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); gap: 10px; }
  .gallery-shell #gallery-progress { font-size: 8px; letter-spacing: .035em; white-space: normal; max-width: 105px; line-height: 1.6; }
  #gallery-hint { display: none; }
  .gallery-controls { gap: 5px; }
  .gallery-controls button { font-size: 9px; padding: 7px 9px; min-width: 44px; min-height: 44px; }
  .gallery-touch-pad { bottom: max(95px, calc(env(safe-area-inset-bottom) + 81px)); }
  body:not(.puzzle-unsolved) .gallery-shell:not(.puzzle-unsolved) .gallery-touch-pad:not([hidden]) { display: grid; }
  body:not(.puzzle-unsolved) .gallery-shell:not(.puzzle-unsolved) .gallery-puzzle { left: auto; width: min(260px, calc(100vw - 185px)); }
  body:not(.puzzle-unsolved) .gallery-shell:not(.puzzle-unsolved) .gallery-puzzle .puzzle-path:empty { display: none; }
  .gallery-discovery { top: max(85px, calc(env(safe-area-inset-top) + 65px)); max-width: calc(100% - 36px); font-size: 9px; }
  .gallery-map { width: calc(100vw - 24px); max-height: calc(100svh - 28px); }
  .map-grid { padding: 14px; gap: 8px; }
  .map-header { padding: 19px 18px; }
  .map-room { min-height: 135px; padding: 14px; }
  .room-name { font-size: 21px; }
  .map-footer { padding: 15px 18px; }
}
@media (max-width: 380px) {
  .gallery-puzzle { left: 12px; right: 12px; padding-inline: 13px; }
  .puzzle-footer { gap: 0 10px; }
  .puzzle-footer button { font-size: 8px; }
  .gallery-shell .gallery-intro p { display: none; }
  .gallery-shell .gallery-bottom { padding-inline: 12px; }
  .gallery-controls button { padding-inline: 7px; }
}
@media (max-height: 740px) and (min-width: 701px) {
  .gallery-puzzle { top: 105px; max-height: calc(100svh - 270px); padding: 15px 18px; }
  .puzzle-top { margin-bottom: 8px; }
  #puzzle-clue { margin-top: 8px; }
  .puzzle-path { margin-block: 10px; }
  #puzzle-feedback { min-height: 16px; margin-top: 8px; }
  .gallery-shell #guide-button { bottom: 78px; min-height: 70px; padding: 5px; }
  .gallery-shell .gallery-intro, .gallery-shell #room-caption { bottom: 105px; }
}
@media (max-height: 560px) and (min-width: 701px) {
  .gallery-puzzle { top: 90px; max-height: calc(100svh - 175px); width: 290px; }
  .gallery-shell #guide-button { right: 350px; bottom: 84px; }
  .gallery-shell .gallery-intro p { max-width: 260px; }
  .gallery-intro h1 { font-size: 43px; }
  .gallery-shell #room-caption { max-width: 30vw; }
}
@media (max-height: 690px) and (max-width: 700px) {
  .gallery-shell .gallery-intro, .gallery-shell #room-caption { top: max(92px, calc(env(safe-area-inset-top) + 74px)); }
  .gallery-intro h1 { font-size: 32px; }
  .gallery-shell .gallery-intro p, .gallery-shell #room-caption p { display: none; }
  .gallery-puzzle { max-height: 45svh; padding-top: 12px; }
  .gallery-shell #guide-button { top: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-shell *, .gallery-map *, .gallery-help *, #gallery-works * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html[data-motion="off"] .gallery-shell *, html[data-motion="off"] .gallery-map * { animation: none !important; transition: none !important; }

/* Keep guidance and the accessible reveal visible without a nested desktop scroll. */
@media(min-width:701px){.gallery-puzzle{width:320px;top:105px;max-height:calc(100svh - 235px);padding:18px 20px}.gallery-shell #guide-button{right:44px;bottom:90px;min-height:74px}.puzzle-footer{gap:0 16px}.puzzle-footer button{min-height:44px}#puzzle-skip{width:auto;margin-left:auto}#puzzle-title{font-size:27px}#puzzle-feedback{min-height:30px}}
@media(max-width:700px){.puzzle-footer button{min-height:44px}.gallery-puzzle{max-height:min(390px,48svh)}}