.header-actions, .top-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions .faq-launch, .top-actions .faq-launch { position: static; }
.focus-control { display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 10px; border: 1px solid #ffffff45; border-radius: 50%; background: #10201999; color: var(--cream); }
.top-actions .faq-launch { min-height: 44px; }
.stage { grid-column: 1; grid-row: 2; }
.course-panel { grid-column: 2; grid-row: 2; }
.film-cover { position: absolute; inset: 0; z-index: 1; overflow: hidden; opacity: 1; pointer-events: none; transition: none; }
.film-cover.is-revealed { opacity: 0; transition: opacity .3s ease-out; }
.film-cover.is-sliding { transition: none; }
.film-cover.is-continuous { opacity: 1; transition: none; }
.film-incoming { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.fade-dialog::backdrop { opacity: 0; transition: opacity .32s ease-in-out !important; }
.fade-dialog.is-visible::backdrop { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fade-dialog::backdrop { transition-duration: .18s !important; } }
.film-cover img, .film-cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame-shade { z-index: 2; }
.shot-caption, .play-button, .video-message, .film-progress { z-index: 3; }
.course-controls { position: relative; z-index: 3; grid-column: 1; grid-row: 2; align-self: end; justify-self: end; display: flex; flex-direction: column; gap: 8px; width: 104px; margin: 0 40px 65px 0; }
.course-controls button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 46px; padding: 10px; border: 1px solid #ffffff50; border-radius: 10px; background: #0a180fc2; color: var(--cream); backdrop-filter: blur(10px); font-size: 14px; line-height: 1.5; }
.course-controls .course-step { justify-content: space-between; }
.course-controls .next-step { background: #d5b789db; border-color: #d5b789; color: #152119; }
.course-controls button:hover { border-color: var(--gold); }
.course-controls #more-angles { border-color: #ffffff30; }
.mobile-angle-previews { display: none; }
.is-focused .course-controls { display: none; }
.swipe-hint { transition: opacity .4s; }
.swipe-hint.is-dismissed { opacity: 0; }
.angles-dialog { width: 420px; border-radius: 16px; }
.angles-dialog .angle-heading { display: block; font-size: 16px; line-height: 1.6; }
.angles-dialog .angle-options { display: grid; gap: 8px; }
.angles-dialog .angle-button { white-space: normal; min-height: 70px; font-size: 16px; padding: 10px 12px; gap: 14px; }
.angles-dialog .angle-button img { display: block; width: 36px; height: 48px; }
.angles-dialog .angle-dot { display: block; }
.food-menu-head .food-menu-price { margin: 14px 0 0; font-size: 18px; line-height: 1.5; letter-spacing: .02em; color: #f0d1a1; }
#music-action { font-size: 14px; white-space: nowrap; }
.music-speaker { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 110; display: grid; place-items: center; width: 46px; height: 46px; padding: 11px; border: 1px solid #ffffff66; border-radius: 50%; color: var(--cream); background: #102019d9; backdrop-filter: blur(12px); }
.music-speaker svg { width: 23px; height: 23px; }
.music-speaker .sound-on, .music-speaker.is-playing .sound-off { display: none; }
.music-speaker.is-playing .sound-on { display: block; }
.music-speaker.is-playing { border-color: var(--gold); color: var(--gold); }
.sidebar { padding-bottom: 84px; }
.tour-ui { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
.tour-ui { scrollbar-width: none; }
.tour-ui::-webkit-scrollbar { display: none; }
.finish-dialog { width: 470px; border-radius: 18px; padding: 44px 30px 30px; }
.finish-dialog h2 { margin: 12px 0 20px; font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
.finish-dialog .finish-invitation { margin: 0; font-size: 17px; line-height: 1.9; color: var(--cream); }
.finish-dialog .finish-tagline { margin-top: 14px; font-size: 13px; }
.finish-dialog .finish-booking { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin: 28px auto 0; min-height: 48px; border-radius: 6px; }
.restart-action { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; width: 100%; min-height: 46px; padding: 10px 16px; background: transparent; color: var(--gold); border: 1px solid #d5b78955; border-radius: 6px; font-size: 15px; }
.finish-dialog .finish-credit { margin-top: 24px; font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .app { height: 100dvh; min-height: 0; overflow: hidden; }
  .app .experience {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    padding: 0 0 env(safe-area-inset-bottom);
    overflow: hidden;
  }
  .topbar { min-height: 64px; padding: calc(12px + env(safe-area-inset-top)) 20px 10px; gap: 10px; }
  .mobile-brand { gap: 7px; min-width: 0; }
  .mobile-brand > span { font-size: clamp(1.3rem, 5.5vw, 1.6rem); }
  .mobile-brand small { display: none; }
  .top-actions { gap: 7px; }
  .faq-launch { padding: 8px 10px; }
  .site-menu-button { min-width: 40px; }
  .top-actions .site-menu-button span { display: none; }
  .tour-header { gap: 8px; }
  .tour-brand { gap: 7px; }
  .tour-brand b { font-size: clamp(1.3rem, 5.5vw, 1.65rem); }
  .header-actions { gap: 7px; }
  /* Clear desktop grid placement so the absolute media fills the entire mobile viewport. */
  .app .stage { grid-area: auto; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; padding: 0; }
  .film-frame { width: 100%; height: 100%; max-width: none; max-height: none; }
  .app .film-frame #film { height: 100%; object-fit: cover; object-position: 50% 40%; }
  .app .film-cover img, .app .film-cover canvas { object-position: 50% 40%; }
  .app .film-incoming { object-position: 50% 40%; }
  .app[data-scene="room"] .film-cover img, .app[data-scene="room"] .film-cover canvas { object-position: 50% 48%; }
  .app[data-scene="room"] .film-incoming { object-position: 50% 48%; }
  .app .frame-shade { background: linear-gradient(180deg, #050b0855, transparent 24%, transparent 55%, #0a100d99 76%, #0a100df5 100%); }
  .shot-caption { top: calc(80px + env(safe-area-inset-top)); left: 20px; max-width: calc(100% - 150px); line-height: 1.5; }
  .play-button { top: calc(72px + env(safe-area-inset-top)); right: 20px; min-height: 40px; padding: 8px 11px; }
  .swipe-hint { top: calc(120px + env(safe-area-inset-top)); right: 20px; font-size: 12px; padding: 6px 10px; }
  .course-controls { grid-column: 1; grid-row: 1; margin: 0 10px 12px 0; width: 44px; min-width: 0; gap: 3px; background: transparent; }
  .course-controls #more-angles { display: none; }
  .course-controls .course-step { width: 44px; min-height: 44px; padding: 8px; justify-content: center; border: 0; border-radius: 50%; background: transparent; backdrop-filter: none; color: #fff; font-size: 25px; text-shadow: 0 1px 5px #000, 0 1px 12px #000; }
  .course-controls #previous-label, .course-controls #next-label { display: none; }
  .course-controls .course-step > span { flex-shrink: 0; }
  .mobile-angle-previews { display: flex; flex-direction: column; gap: 3px; background: transparent; }
  .course-controls .angle-preview { width: 44px; min-height: 48px; flex-shrink: 0; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; backdrop-filter: none; }
  .angle-preview img { display: block; width: 36px; height: 44px; object-fit: cover; border-radius: 5px; border: 1px solid #ffffff8c; box-shadow: 0 1px 6px #0005; }
  .angle-preview[aria-pressed="true"] img { border: 2px solid var(--gold); }
  .app .course-panel {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    inset: auto;
    display: block;
    margin: 0;
    padding: 8px 20px 80px;
    min-height: 0;
    max-height: calc(100dvh - 145px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .course-panel::-webkit-scrollbar { display: none; }
  .course-meta, .course-subtitle, .flavor-tags { display: none; }
  .course-panel h1, .app[data-scene="room"] h1 { font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 1.4; letter-spacing: .04em; }
  .app[data-scene="room"] h1 br { display: none; }
  .course-description { margin: 8px 0 0; font-size: 16px; line-height: 1.5; }
  .app .journey-footer { display: flex; position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 80px; right: 20px; height: 44px; margin: 0; gap: 0; border: 0; z-index: 3; }
  .journey-footer #journey-label, .journey-footer #journey-count { display: none; }
  .journey-footer .journey-step { height: 44px; }
  .app.is-focused .experience { display: block; padding: 0; }
  .app.is-focused .stage { position: absolute; height: 100%; }
  .app.is-focused .film-frame #film { height: 100%; object-fit: contain; }
  .app.is-focused .film-cover img, .app.is-focused .film-cover canvas { object-fit: contain; }
  .app.is-focused .film-incoming { object-fit: contain; }
  .app.is-focused .course-panel, .app.is-focused .journey-footer { display: none; }
  .app.is-focused .frame-shade { background: transparent; }
  .app.is-focused .play-button { top: auto; bottom: 30px; right: auto; left: 50%; transform: translateX(-50%); }
  .app.is-focused .swipe-hint { top: auto; bottom: 86px; }
  .walkthrough[data-phase="entrance"] .tour-ui { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .walkthrough[data-phase="inside"] .tour-ui { gap: 10px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .walkthrough[data-phase="inside"] .tour-bottom { gap: 8px; padding-top: 8px; }
  .walkthrough[data-phase="inside"] .tour-location { padding-bottom: 0; }
  .walkthrough[data-phase="inside"] .tour-forward { min-height: 56px; padding: 8px 16px; }
  .walkthrough[data-phase="inside"] #tour-action-hint, .walkthrough[data-phase="inside"] .drag-hint { display: none; }
  .walkthrough[data-phase="inside"] .tour-footer { padding-left: 60px; min-height: 44px; flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
  .walkthrough[data-phase="inside"] .tour-path { margin: 0 0 0 auto; }
  .faq-content, .food-menu-dialog, .menu-dialog { scrollbar-width: none; }
  .faq-content::-webkit-scrollbar, .food-menu-dialog::-webkit-scrollbar, .menu-dialog::-webkit-scrollbar { display: none; }
}
@media (max-width: 360px) {
  .topbar { padding-left: 16px; padding-right: 16px; }
  .tour-ui { padding-left: 16px; padding-right: 16px; }
  .mobile-brand small, .tour-brand > span { display: none; }
}
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .app .experience { grid-template-columns: 48% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .app .stage { width: 48%; }
  .app .course-panel { grid-column: 2; grid-row: 1; align-self: end; max-height: calc(100dvh - 108px); padding-top: 8px; }
  .course-controls { grid-column: 1; grid-row: 1; margin: 0 12px 20px 0; }
  .mobile-angle-previews { flex-direction: row; width: max-content; align-self: flex-end; }
  .app .frame-shade { background: linear-gradient(180deg, #050b0844, transparent 40%, #0a100d88); }
  .swipe-hint { left: 20px; right: auto; top: auto; bottom: 20px; }
  .app.is-focused .stage { width: 100%; }
}