/* The browser bars, camera cutout and home indicator must not cover controls. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  -webkit-text-size-adjust: 100%;
}
html, body { overscroll-behavior: none; }
#experience { position: fixed; height: 100%; height: 100dvh; overflow: hidden; }
button { min-height: 44px; touch-action: manipulation; }
#scene, #touch-controls { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.masthead { padding: calc(22px + var(--safe-top)) calc(32px + var(--safe-right)) 18px calc(32px + var(--safe-left)); }
.masthead nav button { min-width: 44px; }
.location { left: calc(32px + var(--safe-left)); top: calc(116px + var(--safe-top)); }
.room-shortcuts { right: calc(28px + var(--safe-right)); top: calc(116px + var(--safe-top)); gap: 4px; }
.room-shortcuts button { min-height: 44px; padding: 10px 12px; }
.bottom-bar { left: calc(32px + var(--safe-left)); right: calc(32px + var(--safe-right)); bottom: calc(12px + var(--safe-bottom)); }
.welcome-footer { left: calc(32px + var(--safe-left)); right: calc(32px + var(--safe-right)); bottom: calc(14px + var(--safe-bottom)); }
.welcome-copy { margin-left: var(--safe-left); }
#inspect { min-height: 44px; max-width: calc(100% - 32px - var(--safe-left) - var(--safe-right)); white-space: normal; text-align: left; }
#inspect-label { overflow-wrap: anywhere; }
dialog {
  width: min(840px, calc(100% - 32px - var(--safe-left) - var(--safe-right)));
  max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.dialog-top button, .floating-close { width: 44px; height: 44px; flex-shrink: 0; }
.object-dialog { width: min(960px, calc(100% - 32px - var(--safe-left) - var(--safe-right))); }
.object-dialog>img { max-width: 100%; }
#touch-controls { left: calc(24px + var(--safe-left)); bottom: calc(74px + var(--safe-bottom)); grid-template-columns: repeat(3, 52px); gap: 6px; }
#touch-controls button { width: 52px; height: 52px; background: #20382ce6; font-size: 24px; }
#touch-controls button.pressed { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.touch-look-hint { display: none; position: absolute; right: calc(24px + var(--safe-right)); bottom: calc(100px + var(--safe-bottom)); z-index: 2; width: 130px; text-align: right; font-size: 11px; line-height: 1.6; color: #fff5df; text-shadow: 0 1px 4px #000; pointer-events: none; }
#error { bottom: calc(16px + var(--safe-bottom)); left: calc(16px + var(--safe-left)); right: calc(16px + var(--safe-right)); max-height: calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom)); overflow: auto; }

/* Includes iPad landscape and iPads used with a trackpad or keyboard. */
@media (any-pointer: coarse), (max-width: 1366px) {
  #touch-controls { display: grid; }
  .touch-look-hint { display: block; }
  .directions { display: none; }
  #inspect .key { display: none; }
}

@media (max-width: 700px) {
  .masthead { padding: calc(14px + var(--safe-top)) calc(16px + var(--safe-right)) 10px calc(16px + var(--safe-left)); gap: 8px; }
  .masthead nav { gap: 8px; }
  .masthead nav span { display: none; }
  .brand { gap: 8px; }
  .brand small { letter-spacing: 1.3px; }
  .welcome-copy { left: calc(24px + var(--safe-left)); right: calc(24px + var(--safe-right)); top: 49%; transform: translateY(-44%); margin-left: 0; }
  h1 { font-size: clamp(44px, 11.8vw, 76px); margin: 18px 0 22px; }
  .welcome-copy .eyebrow { font-size: 9px; letter-spacing: 2px; }
  p.intro { font-size: 13px; margin-bottom: 24px; }
  .welcome-footer { left: calc(20px + var(--safe-left)); right: calc(20px + var(--safe-right)); bottom: calc(12px + var(--safe-bottom)); }
  .welcome-footer>span { max-width: 110px; }
  .welcome-footer button { max-width: 170px; text-align: right; line-height: 1.6; }
  .location { left: calc(20px + var(--safe-left)); top: calc(96px + var(--safe-top)); }
  .location h2 { font-size: 22px; }
  .room-shortcuts { right: calc(16px + var(--safe-right)); top: calc(94px + var(--safe-top)); }
  .room-shortcuts button { font-size: 10px; padding: 8px 10px; }
  .bottom-bar { left: calc(20px + var(--safe-left)); right: calc(20px + var(--safe-right)); }
  #touch-controls { left: calc(20px + var(--safe-left)); }
  dialog { padding: 20px; }
  dialog h2 { font-size: 29px; }
  .object-dialog { padding: 0; }
  .object-dialog>img { height: min(32dvh, 250px); min-height: 160px; }
  .object-copy { padding: 20px; }
  .destinations { column-gap: 16px; }
  .destinations button { min-height: 68px; }
  #plan { max-height: 210px; }
  .help-rows span { font-size: 12px; }
}

@media (max-width: 360px) {
  .brand { font-size: 9px; letter-spacing: 1px; }
  .brand small { font-size: 6px; }
  .masthead { gap: 4px; }
  .masthead nav { gap: 2px; }
  .location h2 { font-size: 20px; }
  #touch-controls { grid-template-columns: repeat(3, 48px); gap: 5px; }
  #touch-controls button { width: 48px; height: 48px; }
  .touch-look-hint { width: 100px; font-size: 10px; right: 18px; }
  .welcome-copy .eyebrow { font-size: 8px; }
  .loading { font-size: 9px; letter-spacing: .4px; }
}

/* Keep Enter visible when an iPhone is held sideways, including browser bars. */
@media (max-height: 500px) and (orientation: landscape) {
  .masthead { padding: calc(8px + var(--safe-top)) calc(18px + var(--safe-right)) 4px calc(18px + var(--safe-left)); }
  .masthead nav { gap: 12px; }
  .welcome-copy {
    left: calc(28px + var(--safe-left)); right: calc(28px + var(--safe-right));
    top: calc(70px + var(--safe-top)); bottom: calc(50px + var(--safe-bottom));
    margin: 0; transform: none; max-width: none; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(185px, .7fr);
    grid-template-rows: auto 1fr auto; column-gap: 28px; align-items: center;
  }
  .welcome-copy .eyebrow { grid-column: 1; grid-row: 1; margin: 0; font-size: 8px; letter-spacing: 1.6px; }
  h1 { grid-column: 1; grid-row: 2; font-size: clamp(36px, 7vw, 58px); line-height: 1; margin: 8px 0; letter-spacing: -1.5px; }
  p.intro { grid-column: 1; grid-row: 3; font-size: 11px!important; line-height: 1.6; margin: 0; }
  #enter { grid-column: 2; grid-row: 2; min-width: 0; gap: 12px; padding: 16px 18px; }
  .loading { grid-column: 2; grid-row: 3; font-size: 9px; letter-spacing: .4px; margin: 0; }
  .welcome-footer { bottom: calc(4px + var(--safe-bottom)); }
  .welcome-footer>span { max-width: none; }
  .location { top: calc(65px + var(--safe-top)); left: calc(20px + var(--safe-left)); }
  .location h2 { font-size: 20px; margin-top: 4px; }
  .room-shortcuts { top: calc(65px + var(--safe-top)); right: calc(18px + var(--safe-right)); flex-direction: row; }
  .room-shortcuts button { padding: 8px; }
  .bottom-bar { bottom: calc(4px + var(--safe-bottom)); }
  #touch-controls { bottom: calc(58px + var(--safe-bottom)); grid-template-columns: repeat(3, 44px); gap: 5px; }
  #touch-controls button { width: 44px; height: 44px; font-size: 21px; }
  .touch-look-hint { bottom: calc(75px + var(--safe-bottom)); }
  #inspect { top: 48%; }
  dialog { padding: 18px 24px; }
  dialog h2 { font-size: 28px; margin: 12px 0 16px; }
  .map-layout { grid-template-columns: .8fr 1fr; gap: 20px; }
  #plan { max-height: 240px; }
  .destinations { display: flex; }
  .destinations button { padding: 12px 0; min-height: 60px; }
  .object-dialog[open] { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  .object-dialog>img { height: 100%; min-height: 260px; }
  .object-copy { padding: 24px; }
}