/* Compact mobile controls: the architecture occupies the centre of the view. */
.compact-only,
.mobile-settings-only,
.hud-slash { display: none; }
.pc-only { display: none; }

body[data-controls="pc"] .movement,
body[data-controls="pc"] .console .address,
body[data-controls="pc"] .console .replay,
body[data-controls="pc"] .console .command-row,
body[data-controls="pc"] .console .gesture-hint,
body[data-controls="pc"] .bottomline { display: none; }
body[data-controls="pc"] .mobile-settings-only { display: block; }
body[data-controls="pc"] .pc-help { display: block; position: absolute; left: 28px; bottom: 24px; max-width: min(480px, calc(100% - 320px)); z-index: 3; pointer-events: none; }
.pc-help p { font-size: 11px; line-height: 1.8; color: #d1e7f0; text-shadow: 0 1px 4px #000; margin: 12px 0 0; }
.pc-help strong { font-weight: 500; color: #e0f9ff; }
#pc-aim { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 4; pointer-events: none; }
#pc-reticle { display: block; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #e2f9ff; background: #fff9; box-shadow: 0 0 0 2px #00192380; transition: transform .12s,background .12s; }
#pc-reticle.actionable { transform: scale(1.65); background: #96ffdb; border-color: #96ffdb; box-shadow: 0 0 12px #96ffdb70,0 0 0 2px #00192380; }
#pc-target { position: absolute; top: 23px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 300px; margin: 0; padding: 7px 12px; border-radius: 20px; background: #07131cce; color: #d8fff1; font-size: 13px; letter-spacing: .04em; text-align: center; }
#pc-target:empty { display: none; }
body[data-controls="pc"][data-mouse-locked="true"] #pc-aim { display: block; }
body[data-controls="pc"][data-mouse-locked="true"] .topbar { visibility: hidden; pointer-events: none; }
body[data-controls="pc"][data-mouse-locked="true"] .console { bottom: 12px; }
body[data-journey="true"] #pc-aim { visibility: hidden; }
#pc-menu { width: min(440px,calc(100vw - 32px)); padding: 30px; }
#pc-menu h2 { margin: 10px 0 18px; }
#pc-menu-help { font-size: 14px; line-height: 1.7; color: #bfd3df; }
#pc-menu kbd { border: 1px solid #48606d; border-radius: 4px; padding: 2px 6px; font: inherit; color: #e4f7ff; }
#pc-menu .primary { width: 100%; min-height: 52px; justify-content: center; margin-top: 12px; }
.pc-menu-actions { display: flex; gap: 10px; margin: 14px 0 10px; }
.pc-menu-actions .secondary { flex: 1; margin: 0; }
#pc-menu-message { color: #f4d0a2; font-size: 13px; line-height: 1.5; }
#pc-menu-message:empty { display: none; }
.pc-menu-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; font-size: 12px; }
.pc-menu-links a { color: #aacbdc; }
#pc-menu #rings-demo { position: static; width: auto; max-width: none; margin-top: 18px; }
body[data-controls="pc"] .console { left: auto; right: 28px; bottom: 26px; width: 248px; transform: none; }
body[data-controls="pc"] .console .connection { margin-bottom: 10px; text-shadow: 0 1px 4px #000; }
body[data-controls="pc"] .console .primary { border-radius: 28px; min-height: 48px; }
body[data-controls="pc"] #action-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
body[data-controls="pc"] #compact-action-text { display: none; }
body[data-journey="true"] .pc-help { visibility: hidden; }
@media (max-width: 700px) {
  body[data-controls="pc"] .pc-help { left: 12px; bottom: 16px; max-width: calc(100% - 190px); }
  body[data-controls="pc"] .pc-help p { font-size: 9px; }
  body[data-controls="pc"] .console { right: 12px; bottom: 16px; width: 160px; }
}

.topbar { gap: 20px; }
/* The playable scene has no promotional copy or dark column behind it. */
.vignette { background: linear-gradient(0deg, #060c1480, transparent 24%, transparent 85%, #080e1640); }
.topbar .locations-trigger { display: inline-flex; width: auto; min-width: 44px; min-height: 44px; padding: 0 13px; gap: 8px; margin-right: auto; pointer-events: auto; touch-action: manipulation; font-size: 12px; }
.locations-trigger:disabled { opacity: .45; }
#locations .dialog-heading { margin-bottom: 14px; }
#locations .dialog-heading .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
#locations-close { flex-shrink: 0; width: 44px; height: 44px; }
#locations .room-views { margin: 0; max-width: none; }
#locations [data-shortcut-scope="worlds"] { grid-template-columns: 1fr; gap: 8px; }
#locations [data-shortcut-scope="worlds"] button { text-align: left; padding: 13px 16px; }
.viewpoint-details { margin-top: 20px; padding-bottom: 0; }
.viewpoint-details summary { min-height: 44px; color: #b6d0dc; }
.viewpoint-details .room-views { max-height: 38dvh; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.room-views button[hidden] { display: none; }

@media (max-width: 700px), (max-height: 600px) and (orientation: landscape) {
  #experience { min-height: 0; }
  .brand,
  .intro,
  .bottomline,
  .vignette,
  .console .address,
  .console .gesture-hint,
  .console .replay,
  .move-caption { display: none; }

  .topbar {
    justify-content: flex-end;
    padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));
  }
  .header-actions { gap: 4px; }
  .topbar { gap: 6px; }
  .topbar .icon-button {
    width: 44px;
    height: 44px;
    background: #09162066;
    border-color: #b8dfff30;
    backdrop-filter: none;
  }
  .topbar #hud-toggle { display: grid; }
  .topbar .locations-trigger { width: auto; }

  .movement {
    left: calc(12px + env(safe-area-inset-left));
    bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 0;
    pointer-events: none;
  }
  #move-pad {
    width: 96px;
    height: 96px;
    background: #0a1a284d;
    border-color: #9ccddb50;
    box-shadow: none;
    backdrop-filter: none;
    pointer-events: auto;
  }
  #move-pad.moving { background: #214d60a6; }
  #move-knob { width: 30px; height: 30px; background: #8fcadd99; }
  .move-arrows { font-size: 13px; color: #b4d7e2aa; }

  .console {
    left: auto;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: clamp(132px, 40vw, 166px);
    max-width: none;
    transform: none;
    pointer-events: none;
  }
  .console .connection {
    margin: 0 6px 7px;
    font-size: 9px;
    line-height: 14px;
    letter-spacing: .1px;
    gap: 6px;
    color: #c1d7e0;
    text-shadow: 0 1px 4px #000;
  }
  .console .status-dot { margin: 0; flex-shrink: 0; }
  .console #status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .console #counter { display: none; }
  .console .primary {
    min-height: 46px;
    padding: 0 16px;
    border-radius: 24px;
    border-color: #a6e1ee70;
    background: #173748bb;
    box-shadow: none;
    color: #daf4fa;
    font-size: 12px;
    letter-spacing: .3px;
    pointer-events: auto;
  }
  .console .primary:disabled { background: #13253288; color: #9fbac8; border-color: #718f9b55; }
  .console .primary svg { width: 18px; height: 18px; }
  #compact-action-text { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Keep the full action name available to screen readers. */
  #action-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .mobile-settings-only { display: block; }
  .mobile-settings-only .room-views { margin: 0; max-width: none; gap: 7px; }
  .mobile-settings-only .room-views button { min-height: 44px; padding: 9px 10px; font-size: 12px; }
  .menu-replay { margin: 12px 0 26px; }
  dialog { padding: 22px; }
  #settings-close { width: 44px; height: 44px; flex-shrink: 0; }
  .toast { top: calc(62px + env(safe-area-inset-top)); pointer-events: none; }

  body[data-hud="hidden"] .movement,
  body[data-hud="hidden"] .console,
  body[data-hud="hidden"] #sound,
  body[data-hud="hidden"] #locations-open,
  body[data-hud="hidden"] #settings-open { display: none; }
  body[data-hud="hidden"] .hud-slash { display: block; }
}

@media (max-width: 370px) {
  .locations-trigger span { display: none; }
  .topbar .locations-trigger { padding: 0; justify-content: center; width: 44px; }
}