#museumHeader { height:64px; min-height:64px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:#101d1bf5; border-bottom:1px solid #c2b27d30; z-index:30; }
.channel-small { display:none; }
#channelGalleryDialog { width:min(720px,calc(100% - 28px)); }
.channel-intro { padding:16px 22px 0; margin:0; color:#a3b69b; font-size:11px; line-height:1.8; }
.channel-intro a { color:#d1b782; text-decoration:underline; }
.channel-grid { display:grid; grid-template-columns:1fr 1fr; padding:18px 22px 24px; gap:16px; }
.channel-card { display:block; border:1px solid #9cab783d; background:#213328; border-radius:5px; overflow:hidden; color:#ede3c9; text-decoration:none; }
.channel-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.channel-card strong { display:block; font-size:12px; font-weight:500; margin:12px 12px 7px; line-height:1.6; }
.channel-card span { display:block; font-size:9px; color:#a7bf99; margin:0 12px 12px; }
.channel-card:hover { border-color:#d7b777; }
#gardenHint { display:none; position:absolute; top:18px; left:50%; transform:translateX(-50%); padding:10px 14px; color:#dce8c8; background:#182f25c9; border:1px solid #c3ca9c3c; border-radius:5px; font-size:10px; z-index:13; text-align:center; pointer-events:none; }
body[data-room='ROOM_GARDEN'] #gardenHint { display:block; }
body[data-room='ROOM_GARDEN'] #storyPlaque,body[data-room='ROOM_GARDEN'] #mouseLookHint,body[data-camera='OVERVIEW'] #gardenHint { display:none !important; }
@media(max-width:760px) { #gardenHint { top:120px; width:80%; font-size:9px; } }
@media(max-width:520px) { .channel-wide { display:none; } .channel-small { display:inline; } .channel-grid { padding:14px; gap:10px; } .channel-card strong { font-size:10px; margin:9px; } .channel-card span { font-size:8px; margin:0 9px 9px; } .channel-intro { padding:12px 14px 0; font-size:10px; } }
#perspectiveSwitch { position:absolute; top:18px; right:20px; z-index:19; display:flex; gap:3px; padding:3px; background:#10221cde; border:1px solid #b5b68a4a; border-radius:6px; backdrop-filter:blur(9px); }
#mapPanel { top:70px !important; }
#perspectiveSwitch button { min-height:34px; border:0; background:none; padding:7px 11px; color:#bdcba9; font:10px 'Be Vietnam Pro',sans-serif; border-radius:4px; cursor:pointer; }
#perspectiveSwitch button[aria-pressed='true'] { background:#d0b07a; color:#19291f; }
#perspectiveSwitch #mouseLockButton { border-left:1px solid #a6b18935; border-radius:0; color:#a6c49a; }
#mouseLookHint { position:absolute; left:50%; top:20px; transform:translateX(-50%); z-index:13; padding:8px 12px; background:#13251cd4; border:1px solid #a6af7b30; border-radius:5px; color:#c8d2b8; font-size:9px; text-align:center; pointer-events:none; }
#mouseLookHint span:last-child { display:block; margin-top:4px; color:#8fa183; font-size:8px; }
#mouseLookHint.is-dismissed { opacity:0; }
#crosshair { display:none; position:absolute; top:50%; left:50%; width:13px; height:13px; transform:translate(-50%,-50%); z-index:13; pointer-events:none; filter:drop-shadow(0 1px 2px #000); }
#crosshair::before,#crosshair::after { content:''; position:absolute; background:#e1e8caad; }
#crosshair::before { left:6px; top:0; width:1px; height:13px; }
#crosshair::after { top:6px; left:0; width:13px; height:1px; }
body[data-mouse-look='locked'] #crosshair,body[data-mouse-look='hover'] #crosshair { display:block; }
body[data-mouse-look='locked'] #mouseLookHint { opacity:.35; }
body[data-mouse-look='hover'] #threeCanvas { cursor:crosshair; }
body[data-camera='OVERVIEW'] #mouseLookHint,body[data-camera='OVERVIEW'] #crosshair,body[data-activity='MEDITATION'] #mouseLookHint,body[data-activity='TEA'] #mouseLookHint,body[data-activity='MEDITATION'] #crosshair,body[data-activity='TEA'] #crosshair { display:none; }
body[data-activity='MEDITATION'] #perspectiveSwitch,body[data-activity='TEA'] #perspectiveSwitch { opacity:.4; pointer-events:none; }
#keyboardKeys { display:none; text-align:center; }
#keyboardKeys > div { display:flex; gap:4px; margin-top:4px; }
#keyboardKeys button { display:inline-grid; place-items:center; width:33px; height:33px; color:#dfd5b6; font:12px 'JetBrains Mono',monospace; background:#14271fe8; border:1px solid #9cad7f72; border-bottom:3px solid #657853; border-radius:5px; touch-action:none; cursor:pointer; }
#keyboardKeys button:active { background:#d1b27c; color:#1b2d22; border-bottom-width:1px; }
@media(hover:hover) and (pointer:fine) and (min-width:761px) { #keyboardKeys { display:block; } #moveJoystick { display:none; } }
@media(max-width:760px) { #perspectiveSwitch { right:13px; top:13px; } #perspectiveSwitch .view-long { display:none; } #perspectiveSwitch button { padding:7px 10px; } #mouseLookHint { display:none; } }
@media(max-width:520px) { #perspectiveSwitch { top:70px; right:13px; } #perspectiveSwitch button { min-height:30px; padding:6px 10px; } #mapPanel { top:115px !important; } }
.experience-toast { pointer-events:none; top:76px; }
.museum-brand { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.museum-brand .mark { width:35px; height:35px; display:grid; place-items:center; font:17px Georgia,serif; color:#d7b47b; border:1px solid #a389574d; }
.museum-brand strong { display:block; font:600 16px 'Cormorant Garamond',Georgia,serif; color:#eee5d2; letter-spacing:.06em; }
.museum-brand small { display:block; color:#849b8a; font-size:8px; letter-spacing:.19em; margin-top:3px; }
#headerActions { display:flex; align-items:center; gap:7px; }
#headerActions button,#roomsButton { min-height:36px; border:1px solid #9aad8430; background:#a7b28e0c; padding:8px 12px; color:#d0dec6; font:11px 'Be Vietnam Pro',sans-serif; border-radius:5px; cursor:pointer; white-space:nowrap; }
#roomsButton { display:flex; gap:16px; align-items:center; background:#d1b079; color:#18271f; border-color:#dfbd86; }
#roomsButton strong { font-size:11px; font-weight:500; }
#headerActions button:hover { background:#a7b28e20; }
#headerActions #settingsButton { width:36px; padding:0; font-size:18px; }
#headerActions #mode3DBtn { display:none; }
body[data-view='SHELF'] #headerActions #mode3DBtn { display:flex; }
body[data-view='SHELF'] #headerActions #modeShelfBtn { display:none; }
#librarySearch { display:none; align-items:center; justify-content:center; padding:12px 22px; background:#10201b; border-bottom:1px solid #9ead812e; }
body[data-view='SHELF'] #librarySearch { display:flex; }
#searchInput { width:min(600px,100%); background:#091610; border:1px solid #8c9d764d; color:#e3e9d6; padding:10px 13px; border-radius:4px; font-size:12px; }
#clearSearchBtn { padding:8px; color:#a4b292; }
.settings-grid { padding:22px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.settings-grid button { display:flex; justify-content:center; align-items:center; gap:7px; padding:13px; font-size:11px; min-height:46px; border-radius:4px; }
.settings-help { padding:0 22px 22px; color:#96aa95; font-size:11px; line-height:1.9; }
.room-choices { padding:16px 22px 24px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.room-choice { display:flex; align-items:center; gap:12px; text-align:left; min-height:77px; padding:12px; border:1px solid #a9af7d30; background:#94ad8110; color:#e5e7ce; border-radius:5px; cursor:pointer; }
.room-choice:hover,.room-choice.is-current { border-color:#c9b37a95; background:#baa96b1e; }
.room-choice.special { background:#8bb79617; border-color:#9eb78a50; }
.room-choice .room-symbol { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; color:#d9bb82; background:#b5a47812; border-radius:50%; font:18px Georgia,serif; }
.room-choice strong { display:block; font-size:12px; font-weight:500; }
.room-choice small { display:block; margin-top:5px; color:#98ac91; font-size:9px; line-height:1.6; }
#roomsDialog { width:min(690px,calc(100% - 28px)); }
#museumApp .player-bar { top:18px; left:20px; padding:8px 12px; gap:10px; background:#10211bdc; border-color:#c7b58735; backdrop-filter:blur(8px); }
#museumApp .player-bar small { font-size:7px; }
#museumApp .player-bar strong { font-size:11px; }
#museumApp .player-bar button { font-size:9px; }
#mapPanel { position:absolute; top:18px; right:20px; z-index:18; padding:12px; background:#101f1de8; border:1px solid #a5b58345; border-radius:5px; backdrop-filter:blur(8px); }
#mapPanel header { display:flex; justify-content:space-between; gap:18px; align-items:center; padding-bottom:9px; color:#b7c7a4; font-size:9px; letter-spacing:.07em; }
#mapPanel header button { color:#cfb47d; font-size:9px; background:none; border:0; text-decoration:underline; cursor:pointer; }
#miniMapContainer { width:176px; height:176px; }
#blueprintCanvas { width:176px; height:176px; }
#mapPanel p { color:#8c9f83; font-size:8px; text-align:center; margin:8px 0 0; }
body[data-camera='OVERVIEW'] #mapPanel { display:none; }
#cameraTools { position:absolute; right:20px; bottom:20px; z-index:16; display:flex; gap:6px; }
#cameraTools button { display:grid; place-items:center; width:40px; height:40px; border:1px solid #a5b48142; background:#10211be3; color:#d0dec1; backdrop-filter:blur(8px); border-radius:6px; font-size:16px; cursor:pointer; }
#cameraTools button:hover { background:#314731; }
#cameraTools button[aria-pressed='true'] { background:#9ba977; color:#16231b; }
#walkPad { position:absolute !important; left:22px !important; right:auto !important; top:auto !important; bottom:24px !important; padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; display:flex; align-items:center; gap:15px; z-index:16; }
#moveJoystick { width:112px; height:112px; position:relative; border-radius:50%; background:radial-gradient(circle,#9db78d0c 34%,#9db78d18 35%,#11231ccf 72%); border:1px solid #b4c19455; touch-action:none; cursor:grab; outline-offset:6px; box-shadow:inset 0 0 0 13px #a8c19008,0 8px 28px #0004; }
#moveJoystick:active { cursor:grabbing; }
#moveJoystick span.arrow { position:absolute; color:#c7d1b29c; font-size:11px; pointer-events:none; }
#moveJoystick .up { top:8px; left:50%; transform:translateX(-50%); }
#moveJoystick .down { bottom:8px; left:50%; transform:translateX(-50%); }
#moveJoystick .left { top:50%; left:10px; transform:translateY(-50%); }
#moveJoystick .right { top:50%; right:10px; transform:translateY(-50%); }
#joystickThumb { position:absolute; width:42px; height:42px; margin-left:-21px; margin-top:-21px; top:50%; left:50%; border-radius:50%; background:radial-gradient(circle at 35% 25%,#d9c49e,#a48b5e); border:1px solid #ecd8b0; box-shadow:0 4px 14px #0006; pointer-events:none; will-change:transform; }
.walk-hint { font-size:9px; line-height:1.9; color:#c3c9ad; text-shadow:0 2px 5px #000; }
.walk-hint strong { display:block; font-size:10px; color:#e4ddc5; font-weight:500; }
.world-tip { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-size:9px; color:#a9b49b; text-shadow:0 2px 6px #000; pointer-events:none; z-index:12; }
#storyPlaque { position:absolute !important; right:20px !important; left:auto !important; bottom:78px !important; top:auto !important; width:285px !important; z-index:16; pointer-events:auto; background:#12211ce8; border:1px solid #a4b2813d; border-radius:5px; backdrop-filter:blur(9px); }
#storyToggle { padding:11px 14px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; color:#c7d1b6; font-size:10px; background:none; border:0; cursor:pointer; }
#storyToggle span { color:#dfbd7c; }
#storyDetails { padding:0 14px 13px; }
#storyDetails .story-eyebrow { display:flex; justify-content:space-between; color:#c5af78; font-size:8px; line-height:1.7; }
#storyDetails h2 { margin:8px 0 11px; font:600 25px 'Cormorant Garamond',Georgia,serif; color:#f2e7cc; }
#hudStoryShort,#hudStoryCategory { display:none !important; }
.story-actions { display:flex; flex-wrap:wrap; gap:6px; }
.story-actions button { padding:8px 10px; font-size:9px; border-radius:3px; }
.story-sequence { display:flex; gap:6px; margin-top:9px; border-top:1px solid #9fa77e20; padding-top:9px; }
.story-sequence button { padding:6px 9px; font-size:9px; border-radius:3px; }
body[data-room='ROOM_TEMPLE'] #storyPlaque,body[data-room='ROOM_TEA'] #storyPlaque,body[data-camera='OVERVIEW'] #storyPlaque,body[data-activity='MEDITATION'] #walkPad,body[data-activity='TEA'] #walkPad { display:none !important; }
#talkToNpc { bottom:85px; border-radius:6px; }
#roomActivityPrompt { position:absolute; z-index:18; left:50%; bottom:78px; transform:translateX(-50%); background:#14291fe8; border:1px solid #c6bd8760; padding:12px 18px; border-radius:6px; color:#ebdfbe; font-size:12px; cursor:pointer; white-space:nowrap; box-shadow:0 8px 24px #0004; }
#roomActivityPrompt kbd { color:#c2cda6; border:1px solid #9cae7e55; border-radius:3px; margin-right:9px; padding:3px 6px; font-size:10px; }
#activityPanel { position:absolute; z-index:22; left:50%; bottom:24px; transform:translateX(-50%); width:min(440px,calc(100% - 32px)); padding:19px 22px; border:1px solid #c4b38552; border-radius:7px; background:#10241fe8; backdrop-filter:blur(14px); box-shadow:0 14px 50px #0005; }
.activity-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.activity-heading strong { font:500 27px 'Cormorant Garamond',Georgia,serif; color:#e8dfc0; }
.activity-heading small { display:block; margin-top:5px; color:#9db396; font:10px monospace; }
#standUpButton { border:1px solid #a4b18255; padding:8px 11px; color:#d7dfc0; background:#a7b48c12; font-size:10px; border-radius:4px; cursor:pointer; }
.breathing-row { display:flex; gap:21px; align-items:center; padding-top:16px; }
#breathingOrb { width:42px; height:42px; border-radius:50%; flex-shrink:0; background:radial-gradient(circle,#cbd7a154,#9ac59a0d 70%); border:1px solid #c5d7a770; box-shadow:0 0 24px #b3ce8330; will-change:transform; }
#breathingPhase { font-size:13px; color:#d4dec1; }
.breathing-row p { margin:7px 0 0; font-size:10px; color:#93aa8d; }
#teaConversation { margin-top:14px; }
.tea-speaker { color:#d1b37a; font-size:9px; letter-spacing:.08em; margin-bottom:7px; }
#teaReply { font-size:12px; color:#c6d7ba; line-height:1.85; max-height:125px; overflow:auto; }
.tea-topics { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.tea-topics button { padding:7px 10px; font-size:9px; color:#d0d8bc; border:1px solid #9ba97d42; background:#a5bc7e0d; border-radius:4px; cursor:pointer; }
.tea-topics button[aria-pressed='true'] { background:#b9ad7b2e; border-color:#c3b28188; }
body[data-activity='MEDITATION'] #cameraTools,body[data-activity='TEA'] #cameraTools { opacity:.4; pointer-events:none; }
#overviewHint { position:absolute; left:50%; top:18px; transform:translateX(-50%); padding:9px 14px; border-radius:5px; color:#d1d8be; font-size:10px; background:#12271ed9; border:1px solid #a1ad8138; z-index:13; pointer-events:none; }
body:not([data-camera='OVERVIEW']) #overviewHint { display:none; }
body[data-entered='false'] #museumHeader { display:none; }
@media(max-width:760px) { #museumHeader { padding:0 13px; gap:9px; height:58px; min-height:58px; } .museum-brand strong { font-size:14px; } .museum-brand small { display:none; } .museum-brand .mark { width:30px; height:30px; font-size:15px; } #roomsButton { padding:8px 10px; gap:7px; } #headerActions { gap:5px; } #headerActions button { padding:8px 9px; font-size:10px; } #companionButton .wide-label { display:none; } #museumApp .player-bar { left:13px; top:13px; } .walk-hint { display:none; } .world-tip { display:none; } #cameraTools { right:13px; bottom:20px; gap:5px; } #cameraTools button { width:36px; height:36px; } #walkPad { left:17px !important; bottom:20px !important; } #moveJoystick { width:106px; height:106px; } #storyPlaque { right:13px !important; bottom:72px !important; width:220px !important; } }
@media(max-width:520px) { .museum-brand strong { display:none; } #museumHeader { gap:7px; padding:0 10px; } #headerActions button { font-size:9px; min-height:34px; } #headerActions #settingsButton { width:32px; } #roomsButton strong { font-size:10px; } #roomsButton .room-count { display:none; } .room-choices { padding:12px; gap:7px; } .room-choice { gap:8px; padding:10px 8px; min-height:81px; } .room-choice .room-symbol { width:24px; height:24px; font-size:15px; } .room-choice strong { font-size:11px; } .room-choice small { font-size:8px; } #storyPlaque { width:calc(100% - 154px) !important; } #storyToggle { padding:10px; font-size:9px; } #storyDetails { padding:0 10px 10px; } #storyDetails h2 { font-size:22px; } #storyDetails .story-eyebrow { display:none; } #hudApproachBtn,#hudFavToggleBtn { display:none; } .story-sequence #autoTourBtn { display:none; } #mapPanel { top:71px; right:12px; } #talkToNpc { top:auto; bottom:130px; font-size:10px; } #roomActivityPrompt { bottom:142px; font-size:11px; max-width:95%; white-space:normal; } #roomActivityPrompt kbd { display:none; } #activityPanel { padding:16px; bottom:18px; } .activity-heading strong { font-size:25px; } #overviewHint { top:74px; width:max-content; max-width:93%; font-size:9px; } #cameraTools button { width:33px; height:36px; } }
/* Keep screen controls on their own row on narrow displays. */
#fullscreenButton {
  flex: 0 0 38px;
  min-height: 36px;
  border: 1px solid #9aad8430;
  border-radius: 5px;
  background: #a7b28e0c;
  color: #d0dec6;
  font: 22px system-ui, sans-serif;
  cursor: pointer;
}
#fullscreenButton[aria-pressed='true'] { background: #9ba977; color: #16231b; }

@media (max-width: 640px) {
  #museumHeader {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-height: 0;
    height: auto;
    padding-block: 6px;
    gap: 5px 8px;
  }
  #roomsButton { justify-self: center; min-width: 0; max-width: 100%; }
  #fullscreenButton { grid-column: 3; grid-row: 1; width: 44px; min-height: 44px; }
  #headerActions { grid-row: 2; grid-column: 1 / -1; justify-content: center; flex-wrap: wrap; }
}

/* Use the available viewport when the browser blocks native fullscreen. */
.expanded-view #museumHeader {
  height: auto;
  min-height: 0;
  display: flex;
  justify-content: flex-end;
  padding-block: 4px;
}
.expanded-view #museumHeader > .museum-brand,
.expanded-view #roomsButton,
.expanded-view #headerActions > :is(#companionButton, #channelGalleryButton, #modeShelfBtn, #mode3DBtn, #settingsButton) {
  display: none;
}