/* Gallery-only view: a full-screen 3D room with light, quiet controls over it.
   One look for every room (the rooms supply the colour), so colours are set explicitly. */
:root {
  --chip: rgba(251, 249, 245, 0.9);
  --chip-ink: #1d1a16;
  --chip-muted: #6b6359;
  --chip-line: rgba(29, 26, 22, 0.12);
  --accent: #1d1a16;
  --accent-ink: #fbf9f5;
  --veil: #e9e6e0;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* the bottom controls sit a fixed distance from the bottom edge, whatever the browser or
     app reports as its safe area (in-app viewers report very different insets) */
  --edge: 24px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--veil); color: var(--chip-ink); font: 15px/1.4 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.walk { position: relative; height: 100%; overflow: hidden; }
.stage { position: absolute; inset: 0; }
.room3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.room3d-canvas:active { cursor: grabbing; }

.loader { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.loader:not([hidden]) { pointer-events: auto; }
.loader-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.loader-bg { fill: var(--veil); }
.loader-arch, .loader-frame { stroke: #6b4a37; stroke-width: 1.6; stroke-linejoin: round; }
/* outlines only: where the arches overlap, their lines simply cross */
.loader-arch { fill: none; }
.loader-frame { fill: none; }
.loader-plug { fill: var(--veil); stroke: none; }
.loader.leaving .loader-caption { opacity: 0; }
.loader-caption { position: absolute; left: 0; right: 0; top: calc(50% + max(100vw, 100vh) * 0.13); margin: 0; padding: 0 24px; color: var(--chip-muted); font: italic 16px var(--serif); text-align: center; transition: opacity 0.25s ease; }

.card, .move { background: var(--chip); box-shadow: 0 0 0 1px var(--chip-line), 0 8px 24px rgba(29, 26, 22, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }



.card { position: absolute; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 4; display: flex; align-items: flex-start; gap: 12px; width: min(360px, calc(100% - 32px)); padding: 16px 48px 16px 18px; border-radius: 16px; transform-origin: 50% 0; animation: card-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) both; }
.card.leaving { pointer-events: none; animation: card-out 0.24s cubic-bezier(0.4, 0, 1, 1) both; }
.card div { display: grid; gap: 3px; flex: 1; min-width: 0; }
.card em { font: italic 21px/1.2 var(--serif); }
.card span { font-size: 13px; color: var(--chip-muted); }
.card-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; color: var(--chip-muted); }
.card-close .icon { width: 16px; height: 16px; }
.card-close:hover { background: var(--chip-line); }

.dock { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 10px; padding: 0 max(12px, env(safe-area-inset-right, 0px)) var(--edge) max(12px, env(safe-area-inset-left, 0px)); z-index: 2; pointer-events: none; }
.dock > * { pointer-events: auto; }
.moves { display: flex; gap: 10px; }
/* the mini map, bottom left like a maps app: its rooms are liquid-glass panes (src/minimap.js) */
.minimap { position: absolute; left: max(14px, env(safe-area-inset-left, 0px)); bottom: var(--edge); width: clamp(88px, 22vw, 150px); aspect-ratio: 1.45; z-index: 2; }
.minimap-canvas { position: relative; display: block; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; }
/* background sound, bottom right: the speaker (a glass button like the arrows) and, on hover or
   a tap, a vertical volume bar above it (also glass) */
.volume { position: absolute; right: max(14px, env(safe-area-inset-right, 0px)); bottom: var(--edge); z-index: 2; display: grid; justify-items: center; gap: 10px; }
.move.sound { display: grid; place-items: center; width: 44px; padding: 0; }
.sound .icon { width: 21px; height: 21px; }
.sound .mute { display: none; }
.sound.off .wave { display: none; }
.sound.off .mute { display: inline; }
.volume-panel { display: none; position: relative; width: 44px; height: 148px; border-radius: 22px; background: rgba(29, 26, 22, 0.55); touch-action: none; cursor: pointer; --v: 0%; }
.glassy .volume-panel { background: transparent; }
@media (hover: hover) { .volume:hover .volume-panel { display: block; } }
.volume.open .volume-panel, .volume:focus-within .volume-panel { display: block; }
.volume-track { position: absolute; left: 50%; top: 22px; bottom: 22px; width: 6px; transform: translateX(-50%); border-radius: 3px; background: rgba(255, 255, 255, 0.28); }
.volume-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--v); border-radius: 3px; background: rgba(255, 255, 255, 0.9); }
.volume-thumb { position: absolute; left: 50%; bottom: var(--v); width: 20px; height: 20px; border-radius: 50%; background: #fff; transform: translate(-50%, 50%); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.volume-panel:focus-visible { outline: 2px solid #e4e4e4; outline-offset: 3px; }
.minimap-room { position: absolute; border-radius: 2px; pointer-events: none; }
.move { height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.move[data-dir] { display: grid; place-items: center; width: 44px; padding: 0; }
.move .icon { width: 20px; height: 20px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35)); }
/* line icons: stroked in the text colour */
.icon { display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.move:active { transform: scale(0.96); }

/* Liquid glass (see src/glass.js): the glass is drawn in WebGL behind each button, so the
   element itself is transparent and only carries the label. */
.glassy .move { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #e4e4e4; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: color 0.22s ease, transform 0.22s ease; }
.glassy .move:hover { color: #fff; }
.glassy .move:focus-visible { outline: 2px solid #e4e4e4; outline-offset: 3px; }



.card.many { max-height: calc(100% - 110px - env(safe-area-inset-top, 0px)); overflow: auto; }
.card-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; counter-reset: work; }
.card-list li { counter-increment: work; display: grid; grid-template-columns: 14px 38px 1fr; column-gap: 12px; align-items: start; padding: 6px 0; }
.card-list li::before { content: counter(work); align-self: center; font-size: 12px; font-weight: 700; color: var(--chip-muted); text-align: right; }
.card-thumb { padding: 0; border-radius: 3px; align-self: center; }
.card-thumb img { display: block; width: 38px; height: 48px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--chip-line); }
.card-text { display: grid; gap: 1px; min-width: 0; }
.card-row { display: grid; gap: 1px; padding: 0; text-align: left; color: var(--chip-ink); }
.card-row:hover em { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.card-row em { font: italic 16px/1.2 var(--serif); }
.card-row small { font-size: 12.5px; color: var(--chip-muted); }

.card .card-photo { display: block; margin-top: 2px; font-size: 13px; color: var(--chip-muted); }
.card .link { padding: 0; font: inherit; font-weight: 600; color: var(--chip-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.card-list .card-photo { margin: 0; font-size: 12.5px; }

/* the original photo, full screen */
.lightbox { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 56px 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: rgba(12, 10, 8, 0.9); animation: fade 0.2s ease both; }
/* fit inside the viewport (minus room for the close button), keep the photo's own proportions,
   and never blow it up past its real size */
.lightbox img { display: block; width: auto; height: auto; max-width: min(calc(100vw - 32px), 1400px); max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); object-fit: contain; border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
/* the same liquid glass as the dock buttons, in CSS (the WebGL glass sits under the lightbox's
   veil): frosted, a faint rim, and a lip of light across the top edge */
.lightbox-close { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #e4e4e4;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 60%);
  backdrop-filter: blur(6px) saturate(1.3); -webkit-backdrop-filter: blur(6px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1.5px 0.5px rgba(255, 255, 255, 0.3), inset 0 -6px 10px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: color 0.22s ease, transform 0.22s ease; }
.lightbox-close:hover { color: #fff; }
.lightbox-close:active { transform: scale(0.96); }
.lightbox-close .icon { width: 20px; height: 20px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35)); }
@keyframes fade { from { opacity: 0; } }

/* About the exhibition: a dark scrim over the room, the text in white in the middle */
.about { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; overflow-y: auto;
  padding: calc(72px + env(safe-area-inset-top, 0px)) 28px calc(48px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 7, 6, 0.8); color: #fff; opacity: 0; transition: opacity 0.32s ease; }
.about.open { opacity: 1; }
.about-body { max-width: 34rem; transform: translateY(6px); transition: transform 0.32s ease; }
.about.open .about-body { transform: none; }
.about h2 { margin: 0 0 18px; font: italic 400 34px/1.15 var(--serif); letter-spacing: 0.005em; }
.about h2::after { content: ''; display: block; width: 44px; height: 1px; margin-top: 18px; background: rgba(255, 255, 255, 0.4); }
.about p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
.about a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.about a:hover { text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) { .about, .about-body { transition: none; } }

/* the two corner buttons: screenshot (top left) and About (top right) */
.move.corner { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); z-index: 3; display: grid; place-items: center; width: 44px; padding: 0; }
.corner-left { left: max(14px, env(safe-area-inset-left, 0px)); }
.corner-right { right: max(14px, env(safe-area-inset-right, 0px)); }
.corner .icon .dot { fill: currentColor; stroke: none; }
/* on narrow screens the top cards sit below the corner buttons */
@media (max-width: 500px) { .card { top: calc(68px + env(safe-area-inset-top, 0px)); } }

@keyframes card-in {
  from { opacity: 0; transform: translate(-50%, -14px) scale(0.96); filter: blur(4px); }
  60% { filter: blur(0); }
}
@keyframes card-out { to { opacity: 0; transform: translate(-50%, -8px) scale(0.97); filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) {
  .card, .card.leaving { animation: none; }
}