:root {
  color-scheme: light;
  --paper: #e7e0d6;
  --ink: #3d3933;
  --muted: #5f584f;
  --line: rgb(91 78 62 / 25%);
  --accent: #866548;
  --glass: rgb(250 247 241 / 92%);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
body:has(dialog[open]) { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button, .visit-link { touch-action: manipulation; }
button:disabled { cursor: default; opacity: .4; }
button:focus-visible, a:focus-visible { outline: 2px solid #32566b; outline-offset: 4px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.room-page { position: relative; width: 100%; min-height: 100svh; overflow: clip; isolation: isolate; background: radial-gradient(ellipse at 28% 29%, rgb(255 216 183 / 70%) 0%, rgb(255 216 183 / 0%) 68%), linear-gradient(155deg, #f8dcc8 0%, #eee0d2 42%, #d7cec2 100%); }
.room-page::before { content: none; }
.room-page::after { content: none; }
.room-view { position: relative; }
.room-view::before, .room-view::after { content: none; }

.page-header { position: absolute; z-index: 5; top: max(24px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; pointer-events: none; }
.page-header h1, .player-navigation, .ambient-controls, .camera-controls { border: 1px solid var(--line); background: var(--glass); box-shadow: 0 8px 30px rgb(0 0 0 / 12%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.page-header h1 { justify-self: start; margin: 0; border-radius: 32px; padding: 12px 18px 14px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; letter-spacing: -.5px; white-space: nowrap; }
.page-header h1 span, .player-panel h2 span { color: var(--accent); }
.player-navigation { display: flex; align-items: center; padding: 4px 6px; border-radius: 32px; gap: 4px; pointer-events: auto; }
.player-link { display: flex; align-items: center; gap: 9px; min-width: 44px; min-height: 44px; border: 0; border-radius: 24px; padding: 8px 14px; background: transparent; }
.player-link:hover, .quiet-button:hover { background: rgb(91 78 62 / 8%); }
.player-number { font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .6px; }
.player-name { font-family: Georgia, "Times New Roman", serif; font-size: 16px; }
.link-arrow { height: 14px; width: 14px; opacity: .6; transition: transform 180ms ease; }
.player-link:hover .link-arrow { transform: translateX(2px); opacity: 1; }
.ambient-controls { justify-self: end; display: flex; align-items: center; padding: 4px; border-radius: 32px; gap: 2px; pointer-events: auto; }
.quiet-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 10px; border: 0; border-radius: 24px; background: transparent; color: var(--muted); font-size: 11px; white-space: nowrap; }
.quiet-button svg { width: 19px; height: 19px; }
.quiet-button:hover { color: var(--ink); }
.motion-dot { width: 5px; height: 5px; border-radius: 50%; background: #b8caac; box-shadow: 0 0 0 3px rgb(184 202 172 / 7%); }
.quiet-button[aria-pressed="false"] .motion-dot { background: #6c838a; box-shadow: none; }

#scene-stage { position: relative; width: 100%; height: 100svh; overflow: hidden; isolation: isolate; }
#scene-stage:focus-visible { outline: 2px solid rgb(50 86 107 / 85%); outline-offset: -5px; }
#room-canvas, .scene-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#room-canvas { opacity: 0; transition: opacity 450ms ease; touch-action: none; user-select: none; -webkit-user-select: none; cursor: url("art/voxel-room/orbit-cursor.svg") 16 16, move; }
.scene-fallback { display: none; object-fit: contain; padding: 96px 40px 120px; }
#scene-stage[data-renderer="ready"] #room-canvas { opacity: 1; }
#scene-stage[data-renderer="fallback"] .scene-fallback, .scene-fallback.no-script-fallback { display: block; }
#scene-stage[data-renderer="fallback"] #room-canvas { display: none; }
.room-loading { position: absolute; z-index: 3; left: 50%; bottom: max(12%, 62px); display: grid; justify-items: center; gap: 10px; width: 144px; padding: 15px 18px 14px; transform: translateX(-50%); border: 1px solid rgb(160 134 91 / 18%); border-radius: 10px; background: rgb(255 244 219 / 92%); color: #234f7b; box-shadow: 0 7px 22px rgb(107 82 48 / 9%); pointer-events: none; font-size: 10px; letter-spacing: .2px; }
.room-loading[hidden] { display: none; }
.room-loading-dots { display: flex; gap: 6px; }
.room-loading-dots i { width: 5px; height: 5px; background: #2a70ba; animation: room-loading-pulse 900ms ease-in-out infinite alternate; }
.room-loading-dots i:nth-child(2) { background: #ef6b57; animation-delay: 150ms; }
.room-loading-dots i:nth-child(3) { background: #edbe4d; animation-delay: 300ms; }
.room-loading-track { width: 100%; height: 3px; overflow: hidden; background: rgb(35 79 123 / 12%); }
.room-loading-track::after { content: ''; display: block; width: calc(var(--loading-progress, 0) * 100%); height: 100%; background: #2a70ba; }
@keyframes room-loading-pulse { from { opacity: .4; transform: translateY(1px); } to { opacity: 1; transform: translateY(-1px); } }
#scene-stage[data-intro="running"] #room-canvas, #scene-stage[data-intro="running"] .scene-fallback { transition: none; }
.art-hotspot { position: absolute; z-index: 2; margin: 0; padding: 0; border: 0; background: transparent; pointer-events: none; }
.art-hotspot:focus-visible { outline: 3px solid #ffda91; outline-offset: 6px; border-radius: 3px; pointer-events: auto; }
/* Live artwork and turntable focus accents follow their physical room edges. */
#scene-stage[data-renderer="ready"] .art-hotspot:not(.room-hero):focus-visible { outline: none; }
/* Camera/photo approaches must retain a DOM focus indicator after hover clears. */
#scene-stage[data-renderer="ready"][data-focus]:not([data-focus=""]) .art-hotspot:focus-visible { outline:3px solid #194878; outline-offset:2px; box-shadow:0 0 0 2px #fff8ee; }
.art-hotspot[hidden] { display: none; }
.art-hotspot.music-control { pointer-events: none; cursor: url("art/voxel-room/click-cursor.svg") 15 10, pointer; }
/* Touch reaches the room geometry so gestures can start over the turntable. */
@media (any-pointer: coarse) {
  #scene-stage[data-renderer="ready"] .art-hotspot.music-control { pointer-events: none; }
}
.speaker-sound-cues { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.speaker-sound-cues[hidden], body:has(dialog[open]) .speaker-sound-cues { display: none; }
.speaker-sound-cue { position: absolute; overflow: visible; pointer-events: none; transform-origin: 0 50%; }
.speaker-wave { fill: none; stroke: #ffd37e; stroke-width: 3.2; stroke-linecap: round; pointer-events: none; transform-origin: 0 38px; transform-box: view-box; filter: drop-shadow(0 1px .8px #74512bcc); }
.art-hotspots { display: contents; }
#scene-stage[data-renderer="fallback"] .art-hotspots { position: absolute; z-index: 2; top: 92px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#scene-stage[data-renderer="fallback"] .art-hotspot { position: static; width: auto; height: auto; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 22px; background: var(--glass); color: var(--ink); font-size: 11px; pointer-events: auto; }
#scene-stage[data-renderer="fallback"] .art-hotspot .sr-only { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
#scene-stage[data-renderer="fallback"] .scene-fallback { padding-top: 158px; }
.scene-status { position: absolute; z-index: 4; left: 50%; bottom: var(--view-status-bottom, 143px); width: calc(100% - 32px); max-width: 420px; margin: 0; transform: translateX(-50%); font-size: 11px; line-height: 1.5; color: var(--ink); text-align: center; pointer-events: none; }
#scene-stage[data-renderer="loading"] .scene-status, #scene-stage[data-renderer="ready"] .scene-status { display: none; }
#scene-stage[data-renderer="ready"][data-focus]:not([data-focus=""]) .scene-status { display: block; }
#scene-stage[data-renderer="ready"][data-music-feedback="error"] .scene-status { display: block; }
#scene-stage[data-night="true"] .scene-status:not(:empty) { color:#c1cedc; background:rgb(17 24 44 / .9); width:max-content; max-width:min(420px, calc(100% - 32px)); padding:4px 8px; border-radius:6px; }
.room-page { transition: opacity 220ms ease; }
.room-page:has([data-departing="true"]) { opacity: 0; }

.room-toolbar { position: absolute; z-index: 5; bottom: max(26px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; width: max-content; max-width: calc(100% - 24px); pointer-events: none; }
.camera-controls { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 100%; gap: 2px; padding: 5px; border-radius: 28px; border-color: rgb(122 104 79 / 32%); background: rgb(250 247 241 / 94%); box-shadow: 0 4px 18px rgb(91 75 55 / 12%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: auto; }
.camera-controls .quiet-button { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; color: #536575; }
.camera-controls .quiet-button:hover { color: #234f7b; background: rgb(219 182 116 / 12%); }
.camera-control-set { display: flex; align-items: center; gap: 2px; }
.camera-secondary-controls { display: flex; align-items: center; gap: 2px; }
.camera-controls .room-motion-control { width: auto; flex-basis: auto; padding-inline: 14px; }
.camera-controls .reset-control { flex-basis: auto; width: auto; min-width: 100px; color: #234f7b; background: rgb(255 255 255 / 35%); box-shadow: inset 0 0 0 1px rgb(142 119 83 / 22%); }
.camera-controls .quiet-button:focus-visible { outline-color: #345e79; outline-offset: 1px; }
.control-divider { width: 1px; height: 16px; margin: 0 3px; background: rgb(142 119 83 / 18%); }
.room-view:has(#scene-stage:not([data-loading="complete"])) .room-toolbar,
body:has(dialog[open]) .room-toolbar { visibility: hidden; }
.room-view:has(#scene-stage[data-renderer="fallback"]) .room-toolbar { display: none; }
.no-script-note { position: absolute; z-index: 5; bottom: 135px; left: 16px; right: 16px; margin: 0; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.6; }
.no-script-note a { color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page-header[hidden], .room-toolbar[hidden] { display: none; }
#scene-stage[data-renderer="ready"] #moby-toggle:focus-visible { position: absolute; z-index: 4; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: auto; height: auto; min-height: 44px; clip: auto; padding: 12px 16px; border-radius: 24px; background: var(--glass); color: var(--ink); }
#scene-stage[data-renderer="ready"] #moby-toggle:focus-visible::after { content: attr(aria-label); }

.player-panel { width: min(430px, calc(100% - 40px)); max-height: calc(100dvh - 48px); padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid rgb(223 227 215 / 19%); border-radius: 18px; background: #14242b; color: var(--ink); box-shadow: 0 20px 80px rgb(0 0 0 / 35%); }
.player-panel::backdrop { background: rgb(3 10 14 / 45%); backdrop-filter: blur(5px); }
.panel-content { position: relative; padding: 52px 40px 38px; }
.panel-close { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.panel-close:hover { background: rgb(91 78 62 / 8%); }
.panel-close svg { width: 18px; height: 18px; }
.panel-eyebrow { color: var(--muted); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 12px; }
.player-panel h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 46px; font-weight: 400; letter-spacing: -1.5px; line-height: 1.15; }
.panel-detail { display: flex; flex-direction: column; gap: 8px; padding: 25px 0 27px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.panel-detail .score { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 21px; letter-spacing: 2px; }
.panel-detail time { color: var(--ink); font-size: 15px; }
.visit-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; border-top: 1px solid var(--line); padding: 20px 0 2px; color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.5; }
.visit-link svg { flex: 0 0 18px; height: 18px; }
.visit-link:hover { color: var(--accent); }
.visit-panel { background: #243f53; }
.visit-panel .panel-content { padding-top: 38px; }
.visit-panel h2 { font-size: 34px; letter-spacing: -.8px; }
.visit-detail { margin: 16px 0 28px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.visit-detail strong { color: var(--ink); font-weight: 400; overflow-wrap: anywhere; }
.visit-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.visit-cancel, .visit-confirm { min-height: 48px; border-radius: 10px; padding: 12px 15px; font-size: 13px; }
.visit-cancel { border: 1px solid var(--line); background: transparent; }
.visit-cancel:hover { background: rgb(255 240 215 / 7%); }
.visit-actions .visit-confirm { border: 0; background: #f1cc8e; color: #213c50; gap: 8px; }
.visit-actions .visit-confirm:hover { background: #ffe0a8; color: #213c50; }
.pinball-panel .visit-detail { margin-bottom: 12px; }
.pinball-power-status { margin: 0 0 24px; color: #f1cc8e; font-size: 12px; line-height: 1.5; }
.pinball-actions { display: grid; gap: 12px; }
.pinball-power-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pinball-power-button, .pinball-actions .visit-cancel, .pinball-actions .visit-confirm { min-height: 52px; padding: 14px 16px; border-radius: 10px; font-size: 14px; }
.pinball-power-button { border: 1px solid transparent; font-weight: 600; }
.pinball-power-button[data-pinball-power="on"] { background: #b7d2bd; color: #16372b; border-color: #729b7d; }
.pinball-power-button[data-pinball-power="off"] { background: #efb5a4; color: #54291f; border-color: #b77b68; }
.pinball-power-button[data-pinball-power="on"]:hover:not(:disabled) { background: #cbe2ce; }
.pinball-power-button[data-pinball-power="off"]:hover:not(:disabled) { background: #f5c8bb; }
.pinball-power-button[aria-pressed="true"] { font-weight: 700; box-shadow: inset 0 0 0 2px currentColor; }
.pinball-power-button:disabled { opacity: 1; cursor: default; }
.pinball-power-button:disabled[aria-pressed="false"] { background: #b8bdbb; color: #3e4b45; border-color: #6f7d75; }
.pinball-panel .pinball-power-button:focus-visible { outline: 3px solid #fff1c7; outline-offset: 3px; }
.pinball-actions .visit-confirm { border: 0; background: #f1cc8e; color: #213c50; }
.pinball-actions .visit-confirm:hover { background: #ffe0a8; color: #213c50; }

.photo-panel { width: max-content; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); padding: 0; overflow: visible; border: 0; background: transparent; color: var(--ink); }
.photo-panel::backdrop { background: rgb(3 10 14 / 74%); backdrop-filter: blur(7px); }
.photo-card { position: relative; width: min(var(--photo-width, 600px), calc(100vw - 32px), calc((100dvh - 104px) * var(--photo-ratio, .728125))); margin: 0; padding: 8px; border: 1px solid rgb(241 228 207 / 25%) ; border-radius: 14px; background: #292638; box-shadow: 0 24px 100px rgb(0 0 0 / 45%); transform-origin: center; }
.photo-images { position: relative; width: 100%; aspect-ratio: var(--photo-ratio, .728125); overflow: hidden; border-radius: 8px; background: #344756; }
.photo-images img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.photo-voxel { opacity: 0; }
.photo-card figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 10px 7px; }
.photo-card h2 { margin: 0; font: 400 23px Georgia, "Times New Roman", serif; letter-spacing: -.4px; }
.photo-card h2 span { color: var(--accent); }
.photo-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.photo-card .panel-close { top: 16px; right: 16px; color: #fff6e4; background: rgb(14 27 33 / 74%); backdrop-filter: blur(12px); }
.photo-card .panel-close:hover { background: #223d48; }

@media (max-width: 800px) {
  .page-header { left: 18px; right: 18px; grid-template-columns: 1fr auto; gap: 12px; }
  .player-navigation { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  .ambient-controls { grid-column: 2; grid-row: 1; }
}
@media (max-width: 620px), (hover: none) and (pointer: coarse) {
  .page-header { top: max(18px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); gap: 10px; }
  .page-header h1 { font-size: 20px; padding: 12px 15px 14px; }
  #motion-label { display: none; }
  .player-navigation { padding: 3px 5px; }
  .player-link { padding: 8px 15px; }
  .scene-fallback { padding: 142px 16px 150px; }
  #scene-stage[data-renderer="fallback"] .art-hotspots { top: 140px; }
  #scene-stage[data-renderer="fallback"] .scene-fallback { padding-top: 246px; }
  .room-toolbar { bottom: max(22px, env(safe-area-inset-bottom)); }
  .camera-controls { flex-wrap: nowrap; }
  .camera-primary-controls { flex-wrap: nowrap; }
  .camera-controls .camera-more-control { display: flex; }
  .camera-controls .reset-control { width: 86px; min-width: 86px; padding-inline: 8px; }
  .camera-secondary-controls { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: grid; gap: 8px; padding: 12px; border: 1px solid rgb(152 130 91 / 20%); border-radius: 18px; background: rgb(255 245 222 / 96%); box-shadow: 0 4px 16px rgb(116 86 43 / 12%); }
  .camera-direction-controls { justify-content: center; gap: 8px; }
  .camera-controls .room-motion-control { width: 100%; white-space: normal; background: rgb(255 255 255 / 40%); box-shadow: inset 0 0 0 1px rgb(142 119 83 / 18%); }
  .player-panel { width: 100%; max-width: 100%; max-height: 85dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .panel-content { padding: 47px 28px max(32px, env(safe-area-inset-bottom)); }
}
@media (max-width: 340px) { .camera-controls .control-divider { display: none; } }
@media (max-width: 300px) {
  .camera-controls { padding: 3px; }
  .camera-primary-controls { gap: 0; }
  .camera-controls .reset-control { width: 70px; min-width: 70px; }
}
@media (max-height: 500px) {
  #scene-stage[data-renderer="fallback"] .scene-fallback { width: 38%; padding: 20px 8px max(52px, calc(env(safe-area-inset-bottom) + 36px)); }
  #scene-stage[data-renderer="fallback"] .art-hotspots { top: 16px; left: 40%; right: 16px; bottom: max(52px, calc(env(safe-area-inset-bottom) + 36px)); align-content: flex-start; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
  #scene-stage[data-renderer="fallback"] .scene-status { bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .speaker-sound-cues { display: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* This comparison exists only when explicitly opening the rendering study. */
.render-study { position:absolute; z-index:6; top:max(16px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; width:max-content; max-width:calc(100% - 24px); padding:8px 12px; border:1px solid #c8bea3; border-radius:18px; background:#f2eedf; color:#254f65; box-shadow:0 5px 18px #06232a30; font:14px/1.35 system-ui,sans-serif; }
.render-study-label { font-weight:650; margin-right:5px; }
.render-study button { min-height:44px; padding:9px 15px; border:1px solid #aeb8b7; border-radius:12px; background:#faf8f0; color:#254f65; font:inherit; cursor:pointer; }
.render-study button[aria-pressed="true"] { background:#254f65; color:#fff; border-color:#254f65; }
.render-study button:focus-visible { outline:3px solid #bd7843; outline-offset:3px; }
.render-study-note { flex-basis:100%; text-align:center; font-size:13px; color:#536975; }
body:has(dialog[open]) .render-study { visibility:hidden; }
@media(max-width:440px){.render-study-label{flex-basis:100%;text-align:center;margin:0}.render-study{padding:7px 10px;gap:5px}}

@media(max-width:440px){.render-study button{padding:9px 12px}}

/* Keep photo/player dialogs unchanged while the room backdrop is light. */
.player-panel, .photo-panel {
  color-scheme: dark;
  --ink: #f0eadf; --muted: #d3c8b7; --line: rgb(244 228 202 / 18%); --accent: #d5ad70;
}
.player-panel :focus-visible, .photo-panel :focus-visible { outline-color: #e6bf80; }


.camera-secondary-controls[hidden], .camera-controls .camera-more-control { display: none; }
@media (max-width: 620px), (hover: none) and (pointer: coarse) {
  .camera-controls .camera-more-control { display: flex; }
  .camera-controls .reset-control svg { display: none; }
}

.photo-panel[data-photo-loading="true"] .photo-voxel, .photo-panel[data-photo-error="true"] .photo-voxel { opacity: 1; }
.photo-panel[data-photo-loading="true"] .photo-original, .photo-panel[data-photo-error="true"] .photo-original { visibility: hidden; }
.photo-load-status:empty { display: none; }
.photo-card figcaption:has(.photo-load-status:not(:empty)) { flex-wrap: wrap; }
.photo-load-status { flex-basis: 100%; }

/* Invisible keyboard targets never intercept direct room taps, even when
   their projected rectangles overlap a nearer object. */
#scene-stage[data-renderer="ready"] .art-hotspot:focus-visible { pointer-events: none; }

/* Opt-in ?perf=1 diagnostics only; no persistent controls or tracking. */
.room-performance-probe { position:absolute; top:8px; left:8px; z-index:5; padding:7px 9px; white-space:pre-line; border-radius:7px; background:rgba(32,38,42,.88); color:#fff5e4; font:11px/1.5 ui-monospace,monospace; pointer-events:none; }

/* World-anchored switch; generous hit area without another menu. */
.art-hotspot.room-switch { pointer-events:none; display:grid; place-items:center; cursor:pointer; }
#scene-stage[data-renderer="ready"] .art-hotspot.room-switch:focus-visible { outline:3px solid #91caff; outline-offset:2px; border-radius:8px; }

.room-page::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:#11182c; opacity:var(--night-amount,0); }

#night-switch-button[hidden] { display:none; }
.art-hotspot.room-switch { touch-action:none; }

#scene-stage[data-night="true"] .speaker-wave { stroke:#91caff; stroke-width:2.2; filter:drop-shadow(0 1px 1px #10264ddd); }

/* Native paired-photo control: preserve the former div's exact image box. */
button.photo-images { display: block; padding: 0; border: 0; margin: 0; color: inherit; font: inherit; appearance: none; cursor: pointer; touch-action: manipulation; }
button.photo-images:disabled { opacity: 1; cursor: progress; }
button.photo-images:focus-visible { outline: 3px solid #e6bf80; outline-offset: 3px; }

.room-explore-hint { position:absolute; z-index:3; left:50%; bottom:var(--view-status-bottom,143px); transform:translateX(-50%); max-width:calc(100% - 32px); padding:3px 6px; border-radius:6px; background:transparent; color:var(--ink); font:400 11px/1.4 system-ui,sans-serif; text-align:center; pointer-events:none; user-select:none; opacity:0; visibility:hidden; transition:opacity .22s ease,visibility 0s linear .22s; }
.room-explore-hint[data-visible="true"] { opacity:.82; visibility:visible; transition:opacity .22s ease; }
@media (prefers-reduced-motion: reduce) { .room-explore-hint, .room-explore-hint[data-visible="true"] { transition:none; } }
#scene-stage[data-motion="off"] .room-explore-hint { transition:none; }

.pinball-power-button[aria-disabled="true"]:not(:disabled), .pinball-power-button[aria-disabled="true"]:not(:disabled):hover { background:#b8bdbb; color:#3e4b45; border-color:#6f7d75; cursor:help; }
.night-lock-feedback { padding:8px 10px; border-radius:7px; color:#fff8ee; background:#194878; font:500 12px/1.4 system-ui,sans-serif; pointer-events:none; }
.night-lock-feedback.room-note { position:absolute; z-index:4; bottom:var(--view-status-bottom,143px); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 36px); margin:0; text-align:center; }
/* Reserve feedback space while locked so repeated taps cannot shift actions. */
.pinball-panel:has(.pinball-power-button[aria-disabled="true"]:not(:disabled)) .panel-content { padding-bottom:100px; }
.pinball-panel .night-lock-feedback { position:absolute; left:28px; right:28px; bottom:18px; margin:0; }

#scene-stage[data-night="true"] .room-explore-hint { color:#c1cedc; }

.art-hotspot .control-beacon { display:grid; place-items:center; position:absolute; left:50%; top:-32px; transform:translateX(-50%); width:24px; height:24px; border-radius:50%; border:1px solid #a3bfd0; background:#eef4f6f5; box-shadow:0 1px 3px #26334a35; opacity:0; visibility:hidden; pointer-events:none; touch-action:none; }
.art-hotspot .control-beacon img { display:block; width:16px; height:16px; pointer-events:none; }
.art-hotspot[data-hint-used="true"] .control-beacon, #scene-stage:not([data-renderer="ready"]) .control-beacon { display:none; }

/* One shared More disclosure for touch, keyboard and wide layouts. */
.camera-controls .camera-more-control { display: flex; }
.camera-secondary-controls {
  position: absolute; left: auto; right: 0; bottom: calc(100% + 8px);
  display: grid; width: 280px; max-width: calc(100vw - 24px);
  max-height: min(650px, calc(100dvh - 112px)); overflow-y: auto;
  overscroll-behavior: contain; touch-action: pan-y pinch-zoom; gap: 8px; padding: 12px;
  border: 1px solid rgb(152 130 91 / 20%); border-radius: 18px;
  background: rgb(255 245 222 / 98%); box-shadow: 0 4px 16px rgb(116 86 43 / 12%);
}
.camera-secondary-controls[hidden] { display: none; }
.camera-direction-controls { justify-content: center; gap: 8px; }
.camera-controls .room-menu-action, .camera-controls .room-motion-control {
  width: 100%; min-height: 44px; height: auto; flex-basis: auto; font-size:14px;
  justify-content: flex-start; text-align: left; white-space: normal; padding: 10px 12px;
  border-radius: 10px; background: rgb(255 255 255 / 40%);
  box-shadow: inset 0 0 0 1px rgb(142 119 83 / 18%);
}
.room-images-menu { color: #536575; border-radius: 10px; background: rgb(255 255 255 / 40%); }
.room-images-menu summary { font-size:14px; cursor: pointer; min-height: 44px; padding: 10px 12px; border-radius: 10px; }
.room-images-menu summary:focus-visible { outline: 3px solid #345e79; outline-offset: 1px; }
.room-image-actions, .room-site-actions { display: grid; gap: 6px; }
.room-image-actions { padding: 0 6px 6px; }
@media (max-width: 620px), (hover: none) and (pointer: coarse) {
  .camera-secondary-controls { left: 50%; right: auto; transform: translateX(-50%); width: 280px; }
}

/* The physical room frame remains the viewer frame: only its print changes. */
.photo-panel[data-in-place="true"] { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; background:transparent; overflow:visible; }
.photo-panel[data-in-place="true"]::backdrop { background:transparent; backdrop-filter:none; }
.photo-panel[data-in-place="true"] .photo-card { position:absolute; inset:0; width:auto; height:auto; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; pointer-events:none; }
.photo-panel[data-in-place="true"] .photo-images { position:absolute; left:0; top:0; aspect-ratio:auto; border-radius:0; transform-origin:0 0; background:#fff1d9; pointer-events:auto; }
.photo-panel[data-in-place="true"] .photo-card figcaption { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 72px); transform:translateX(-50%); padding:5px 12px; border-radius:9px; background:rgb(14 27 33 / 85%); color:#fff6e4; max-width:calc(100vw - 32px); white-space:normal; text-align:center; }
.photo-panel[data-in-place="true"] .photo-card h2 { font:400 16px system-ui,sans-serif; letter-spacing:0; }
.photo-panel[data-in-place="true"] .photo-card .panel-close { position:fixed; top:auto; right:auto; left:50%; bottom:calc(env(safe-area-inset-bottom) + 24px); transform:translateX(-50%); width:auto; height:auto; min-height:44px; padding:12px 20px; border:1px solid rgb(241 228 207 / 55%); border-radius:28px; pointer-events:auto; }
.photo-panel[data-in-place="true"] .panel-close svg { display:none; }
.photo-panel[data-in-place="true"] .panel-close::after { content:"Back to room"; font:400 16px system-ui,sans-serif; white-space:nowrap; }
html[data-in-place-photo="true"] .room-toolbar, html[data-in-place-photo="true"] .scene-status { visibility:hidden; }

.photo-panel[data-in-place="true"] .photo-card figcaption p { color:#fff6e4; }

/* One measured footer band frees the picture area above it. */
.photo-panel[data-in-place="true"] .photo-card { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:1fr auto; gap:8px; align-items:end; padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 12px) calc(env(safe-area-inset-left) + 12px); }
.photo-panel[data-in-place="true"] .photo-card figcaption { position:static; grid-row:2; grid-column:1; justify-self:start; align-self:center; transform:none; min-width:0; max-width:100%; }
.photo-panel[data-in-place="true"] .photo-card .panel-close { position:static; grid-row:2; grid-column:2; justify-self:end; transform:none; padding:12px 16px; }
@media(max-width:359px) {
  .photo-panel[data-in-place="true"] .photo-card { grid-template-columns:1fr; grid-template-rows:1fr auto auto; row-gap:4px; }
  .photo-panel[data-in-place="true"] .photo-card figcaption { grid-row:2; grid-column:1; justify-self:center; }
  .photo-panel[data-in-place="true"] .photo-card .panel-close { grid-row:3; grid-column:1; justify-self:center; }
}

/* Use the same compact footer while approaching/holding the voxel image. */
.room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) .room-toolbar { position:fixed; left:auto; right:calc(env(safe-area-inset-right) + 12px); bottom:calc(env(safe-area-inset-bottom) + 12px); transform:none; }
.room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) .camera-controls { padding:0; border:0; background:transparent; box-shadow:none; }
.room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) .camera-primary-controls > :not(#reset-view), .room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) .camera-secondary-controls { display:none; }
.room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) #reset-view { min-height:44px; height:44px; padding:10px 16px; border-radius:28px; background:rgb(14 27 33 / 85%); color:#fff6e4; font:400 16px system-ui,sans-serif; }
.room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) .scene-status { position:fixed; left:calc(env(safe-area-inset-left) + 12px); right:auto; bottom:calc(env(safe-area-inset-bottom) + 12px); max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 180px); min-height:44px; display:flex; align-items:center; padding:5px 12px; border-radius:9px; background:rgb(14 27 33 / 85%); color:#fff6e4; font:400 16px system-ui,sans-serif; text-align:left; }
@media(max-width:359px) {
.room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) .room-toolbar { left:50%; right:auto; transform:translateX(-50%); }
.room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) .scene-status { left:50%; bottom:calc(env(safe-area-inset-bottom) + 60px); transform:translateX(-50%); min-height:0; width:max-content; max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px); text-align:center; }
}

@media(max-width:359px) { .room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) .scene-status { font-size:12px; line-height:14px; padding:0 8px; } }

/* Quiet photo controls: readable translucent surfaces, no heavy dark pills. */
:root { --photo-ui-ink:#3d3933; --photo-ui-bg:rgb(255 246 231 / 78%); --photo-ui-border:rgb(61 57 51 / 18%); --photo-ui-focus:#345e79; }
body:has(#scene-stage[data-night="true"]) { --photo-ui-ink:#e4edf6; --photo-ui-bg:rgb(17 24 44 / 78%); --photo-ui-border:rgb(193 206 220 / 22%); --photo-ui-focus:#e6bf80; }
.photo-panel[data-in-place="true"] .photo-card figcaption { max-width:min(100%, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 180px)); padding:2px 6px; border-radius:5px; background:var(--photo-ui-bg); color:var(--photo-ui-ink); overflow-wrap:anywhere; }
@media(max-width:359px) { .photo-panel[data-in-place="true"] .photo-card figcaption { max-width:100%; } }
.photo-panel[data-in-place="true"] .photo-card h2 { font:400 14px/18px system-ui,sans-serif; }
.photo-panel[data-in-place="true"] .photo-card .panel-close { min-height:44px; padding:10px 14px; border:1px solid var(--photo-ui-border); border-radius:16px; background:var(--photo-ui-bg); color:var(--photo-ui-ink); box-shadow:none; }
.photo-panel[data-in-place="true"] .panel-close::after { font:400 14px/18px system-ui,sans-serif; }
.photo-panel[data-in-place="true"] .photo-card figcaption p { color:var(--photo-ui-ink); }
.photo-panel[data-in-place="true"] .panel-close:focus-visible { outline:3px solid var(--photo-ui-focus); outline-offset:3px; }
.room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) #reset-view { width:auto; min-width:44px; flex-basis:auto; height:44px; min-height:44px; padding:10px 14px; white-space:nowrap; border:1px solid var(--photo-ui-border); border-radius:16px; background:var(--photo-ui-bg); color:var(--photo-ui-ink); box-shadow:none; font:400 14px/18px system-ui,sans-serif; }
.room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) #reset-view:focus-visible { outline:3px solid var(--photo-ui-focus); outline-offset:3px; }
.room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) #scene-stage .scene-status { width:max-content; max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 180px); min-height:0; bottom:calc(env(safe-area-inset-bottom) + 12px); transform:none; padding:2px 6px; border-radius:5px; background:var(--photo-ui-bg); color:var(--photo-ui-ink); font:400 14px/18px system-ui,sans-serif; white-space:normal; overflow-wrap:anywhere; }
@media(max-width:359px) { .room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) #scene-stage .scene-status { max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px); bottom:calc(env(safe-area-inset-bottom) + 60px); transform:translateX(-50%); font:400 14px/18px system-ui,sans-serif; padding:2px 6px; } }

/* Preserve the rendered print until the decoded original fades over it. */
.photo-panel[data-in-place="true"] .photo-images:has(.photo-voxel) { background:transparent; }
.photo-panel[data-in-place="true"] .photo-voxel { visibility:hidden; }
.photo-panel[data-in-place="true"] .photo-images:has(.photo-voxel) .photo-original { background:#fff1d9; }

/* Use identical title wrapping before and after the photo opens. */
.photo-panel[data-in-place="true"] .photo-card figcaption { align-self:end; width:max-content; max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 180px); overflow-wrap:anywhere; }
@media(max-width:359px) { .photo-panel[data-in-place="true"] .photo-card figcaption { max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px); } }

.room-view:has(#scene-stage:is([data-focus="sudo"],[data-focus="family"],[data-focus="odie"],[data-focus="drawing"],[data-focus="earth"],[data-focus="ringtoss"],[data-focus="love"])) #reset-view svg { display:none; }

/* Scope direct pinch gestures to the active photo; page zoom elsewhere stays native. */
.photo-panel[data-in-place="true"], .photo-panel[data-in-place="true"] .photo-images { touch-action:none; }

.photo-panel[data-in-place="true"] .photo-card figcaption, .photo-panel[data-in-place="true"] .panel-close { z-index:2; }

/* Moby’s dreams keep the room visible behind a quiet, warm choice card. */
.dream-panel { width:min(640px,calc(100% - 32px)); color-scheme:light; --ink:#3d3933; --muted:#696158; color:var(--ink); background:#f5eddf; border:1px solid #dbcfbc; border-radius:22px; }
.dream-panel::backdrop { background:rgb(24 30 40 / 37%); backdrop-filter:blur(4px); }
.dream-panel .panel-content { padding:32px; text-align:center; }
.dream-panel .panel-eyebrow { margin:0 0 14px; color:#6f5a42; font-size:10px; letter-spacing:1.6px; text-transform:uppercase; }
.dream-panel h2 { font-size:36px; line-height:1.12; letter-spacing:-1px; text-wrap:balance; }
.dream-intro { font-size:13px; line-height:1.6; color:#696158; margin:12px 0 24px; }
.dream-choices { display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left; }
.dream-choice { display:flex; flex-direction:column; overflow:hidden; border:1px solid #d6cbb9; border-radius:12px; color:#334b52; background:#fffaf0; text-decoration:none; transition:transform 160ms ease,box-shadow 160ms ease; }
.dream-choice:hover { transform:translateY(-3px); box-shadow:0 8px 18px #46382215; }
.dream-vignette { display:block; width:100%; height:112px; background:#d8e6d7; stroke:none; border-bottom:1px solid #d6cbb9; }
.dream-legend .dream-vignette { background:#45465f; }
.dream-choice-title { display:flex; justify-content:space-between; gap:5px; padding:17px 15px 7px; font:22px/1.12 Georgia,serif; letter-spacing:-.5px; }
.dream-choice-title>span { font:16px/1.3 Arial,sans-serif; opacity:.65; }
.dream-choice-detail { padding:0 15px 20px; font-size:12px; line-height:1.6; color:#71695d; }
.dream-return-hint { margin:20px 0 9px; color:#746b5f; font-size:10px; line-height:1.6; }
.dream-cancel { min-height:44px; padding:10px 20px; color:#5d625c; border-color:#cdc2b1; background:transparent; }
.dream-panel :focus-visible { outline:3px solid #32566b; outline-offset:3px; }
@media (max-width:620px) { .dream-panel { width:calc(100% - 24px); max-width:480px; margin:auto; max-height:calc(100dvh - 24px); border-bottom:1px solid #dbcfbc; border-radius:20px; } .dream-panel .panel-content { padding:26px 18px 20px; } .dream-panel h2 { font-size:30px; } .dream-choices { gap:10px; } .dream-choice-title { font-size:20px; padding:14px 10px 6px; } .dream-choice-detail { padding:0 10px 15px; font-size:11px; } .dream-vignette { height:94px; } }
@media (max-width:340px) { .dream-choices { grid-template-columns:1fr; } .dream-vignette { height:76px; } }
@media (prefers-reduced-motion:reduce) { .dream-choice { transition:none; } .dream-choice:hover { transform:none; } }

.dream-wip { margin:18px 0 0; color:#6c6256; font-size:12px; line-height:1.5; }

/* The approved MS card stays whole; the game is only a navigation link. */
.dream-wander .dream-ms-art { object-fit:contain; background:#fff6e4; }
.dream-wander .dream-choice-title { font-size:clamp(17px,2.7vw,22px); }

.dream-choice .dream-splash{height:auto;aspect-ratio:16/9;object-fit:contain;background:#fff6e4}
.dream-coming-soon{position:relative;color:#334b52;background:#fffaf0;cursor:default}
.dream-coming-soon:hover{transform:none;box-shadow:none}
.dream-coming-soon .dream-splash{filter:none;opacity:1;background:#fff6e4;transition:filter 160ms ease}
.dream-coming-soon:is(:hover,:focus-visible) .dream-splash{filter:grayscale(1)}
.dream-coming-soon:is(:hover,:focus-visible) .dream-choice-title{color:#656561}
.dream-coming-soon:focus-visible{outline:3px solid #b47b42;outline-offset:3px}
.dream-soon-ribbon{position:absolute;top:25px;right:-39px;width:170px;padding:7px 0;transform:rotate(35deg);background:#4c5659;color:#fffaf0;text-align:center;font:700 11px/1.2 Arial,sans-serif;letter-spacing:.03em;box-shadow:0 2px 5px #24363b30;opacity:0;pointer-events:none}
.dream-coming-soon:is(:hover,:focus-visible) .dream-soon-ribbon{opacity:1}
@media (hover:none),(pointer:coarse){.dream-soon-ribbon{opacity:1}}
@media (prefers-reduced-motion:reduce){.dream-coming-soon .dream-splash{transition:none}}
.dream-coming-soon .dream-choice-title{font-size:clamp(17px,2.5vw,22px)}
.dream-coming-soon .dream-choice-detail{font-weight:700;color:#62625d}