/* The place name and exploration actions remain grouped at the lower left. */
.halo-preview { --hud-trigger-width: 46px; --hud-trigger-height: 46px; }
.hud-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.halo-preview .hud-left-stack { position: absolute; left: var(--edge); bottom: max(80px, calc(env(safe-area-inset-bottom) + 65px)); display: flex; flex-direction: column; gap: 15px; width: min(340px, calc(100vw - 2 * var(--edge))); pointer-events: none; }
.halo-preview .hud-left-stack .place { position: relative; inset: auto; width: min(620px, calc(100vw - 2 * var(--edge))); max-width: none; }
.halo-preview .hud-left-stack .place h1 { font-size: clamp(25px, 2.4vw, 35px); line-height: 1.12; letter-spacing: -.8px; }
.halo-preview .hud-left-stack .place .eyebrow { margin-bottom: 8px; }
.halo-preview .hud-left-stack .place-description { margin-top: 8px; }
.halo-preview .hud-left-stack .world-status { margin-top: 6px; font-size: 9px; }
.halo-preview .hud-left-stack .shield-status { margin-top: 5px; font-size: 9px; }
.halo-preview .hud-actions { display: flex; gap: 9px; pointer-events: none; }
.halo-preview .hud-actions #navigation-ui.navigation,
.halo-preview .hud-actions #preview-bag.backpack { position: relative; inset: auto; width: 46px; height: 46px; --bag-top: 0px; pointer-events: auto; }
.halo-preview .hud-actions :is(.navigation-trigger, .backpack-trigger) { position: relative; justify-content: center; padding: 0; background: rgb(15 27 27 / 62%); border-color: rgb(172 201 191 / 27%); }
.halo-preview .hud-actions :is(.navigation-trigger-label,.navigation-shortcut,.backpack-trigger-label,.backpack-shortcut) { display: none; }
.halo-preview .hud-actions .backpack-trigger svg { width: 24px; height: 24px; color: #b7ccc1; }
.halo-preview .hud-actions #bag-count { position: absolute; right: -4px; top: -4px; min-width: 16px; padding: 1px 3px; font-size: 8px; line-height: 12px; border-radius: 4px; background: #1c2d2c; color: #d2e3d5; }
.halo-preview .hud-actions .backpack-panel { position: fixed; left: var(--edge); top: auto; bottom: max(140px, calc(env(safe-area-inset-bottom) + 125px)); max-height: calc(100dvh - 230px); }
.halo-preview .performance { display: flex; }
.halo-preview .city-clock { display: flex; align-items: center; gap: 9px; color: #e0d5bd; font-size: 10px; line-height: 1.6; letter-spacing: .7px; white-space: nowrap; }
.halo-preview #city-time { font-variant-numeric: tabular-nums; }
.halo-preview .city-clock-dot { color: #a59b86; }
.halo-preview .city-phase { margin-left: 4px; color: #acae9d; font-size: 9px; }
.halo-preview .city-clock[data-phase="night"] .city-phase { color: #aabdd6; }
.halo-preview .city-clock[data-phase="dawn"] .city-phase, .halo-preview .city-clock[data-phase="sunset"] .city-phase { color: #d2b68b; }
.halo-preview .general-menu { top: max(83px, calc(env(safe-area-inset-top) + 60px)); right: var(--edge); }
.halo-preview .general-menu #general-menu-toggle { width: 44px; height: 44px; padding: 0; }
.halo-preview .general-menu #general-menu-toggle svg { width: 21px; height: 21px; }
.halo-preview .general-menu .view-switch { display: grid; grid-template-columns: 1fr; width: 100%; padding: 0; margin-bottom: 20px; gap: 5px; border: 0; background: transparent; backdrop-filter: none; }
.halo-preview .general-menu .view-switch button { min-height: 44px; text-align: left; padding: 11px 13px; border-color: var(--menu-line); background: rgb(107 144 128 / 5%); color: #bfcfc5; }
.halo-preview .general-menu .view-switch button[aria-pressed="true"] { color: #e1eee2; border-color: rgb(169 209 185 / 55%); background: rgb(105 140 118 / 20%); }
.halo-preview .general-menu .view-switch button:hover { background: rgb(127 166 145 / 20%); }
.halo-preview.is-interior .general-menu :is(.view-switch,.menu-camera-label) { display: none; }
.halo-preview .combat3d .combat3d-launch { top: auto; bottom: max(80px, calc(env(safe-area-inset-bottom) + 65px)); left: calc(var(--edge) + 110px); width: 46px; height: 46px; min-height: 46px; padding: 0; justify-content: center; gap: 0; font-size: 0; }
.halo-preview .combat3d-launch .combat3d-test-label { display: none; }
.halo-preview .combat3d .combat3d-launch-error { top: auto; bottom: 140px; }
.halo-preview .help-bar { right: calc(var(--edge) + 290px); }
.halo-preview .photo-control { bottom: max(20px, env(safe-area-inset-bottom)); }
.halo-preview .prototype-note { display: none; }
.halo-preview :is(.navigation-trigger,.backpack-trigger):hover { background: rgb(43 63 60 / 92%); border-color: rgb(170 205 195 / 40%); }
.halo-preview:is(.backpack-open,.navigation-open,.refuge-storage-open,.shield-exit-open,.clean-view,.combat-open) #chat-ui,
.halo-preview:has(#general-menu[open]) #chat-ui { visibility: hidden; opacity: 0; pointer-events: none; }
.halo-preview.backpack-open .hud-left-stack .place { visibility: hidden; }
.halo-preview.chat-typing .mobile-movement { visibility: hidden; pointer-events: none; }
@media (max-width: 1000px) {
  .halo-preview .help-bar { display: none; }
}
@media (max-width: 720px) {
  .halo-preview.poi-open #chat-ui { visibility: hidden; opacity: 0; pointer-events: none; }
  .halo-preview .experiment-heading { display: flex; padding-left: 12px; }
  .halo-preview .city-clock { gap: 5px; font-size: 9px; letter-spacing: .2px; }
  .halo-preview .city-phase { display: none; }
  .halo-preview .performance-label { font-size: 7px; letter-spacing: 1px; }
  .halo-preview .general-menu { top: max(72px, calc(env(safe-area-inset-top) + 54px)); }
  .halo-preview .general-menu-panel { max-height: calc(100dvh - 142px - env(safe-area-inset-bottom)); }
  .halo-preview .hud-left-stack { bottom: max(71px, calc(env(safe-area-inset-bottom) + 59px)); gap: 11px; }
  .halo-preview .hud-left-stack .place h1 { font-size: 26px; }
  .halo-preview .hud-left-stack .place-description { max-width: none; font-size: 9px; }
  .halo-preview .hud-left-stack .world-status { max-width: none; }
  .halo-preview .hud-actions { min-height: 90px; align-items: flex-end; }
  .halo-preview .mobile-movement { bottom: max(71px, calc(env(safe-area-inset-bottom) + 59px)); }
  .halo-preview .photo-control { bottom: max(15px, env(safe-area-inset-bottom)); left: calc(var(--edge) + 44px); right: auto; width: 36px; height: 36px; }
  .halo-preview .music-control { left: var(--edge); right: auto; }
  .halo-preview .account .account-hud { left: var(--edge); right: auto; max-width: calc(100vw - 140px); bottom: max(12px, env(safe-area-inset-bottom)); gap: 5px; padding-left: 9px; }
  .halo-preview .account .account-logout { width: 32px; height: 32px; flex-basis: 32px; }
  .halo-preview .hud-actions .backpack-panel { bottom: 131px; max-height: calc(100dvh - 210px); }
  .halo-preview .combat3d .combat3d-launch { bottom: max(71px, calc(env(safe-area-inset-bottom) + 59px)); }
}
@media (max-height: 560px) {
  .halo-preview .hud-left-stack { bottom: max(71px, calc(env(safe-area-inset-bottom) + 59px)); gap: 8px; }
  .halo-preview .hud-left-stack .place h1 { font-size: 21px; }
  .halo-preview .hud-left-stack :is(.world-status,.place-description,.shield-status) { display: none; }
  .halo-preview .hud-actions { min-height: 46px; }
  .halo-preview .general-menu { top: 63px; }
  .halo-preview .general-menu-panel { max-height: calc(100dvh - 126px); }
  .halo-preview .hud-actions .backpack-panel { top: 20px; bottom: auto; max-height: calc(100dvh - 40px); }
  .halo-preview .mobile-movement { bottom: 77px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .halo-preview .hud-left-stack { bottom: max(18px, env(safe-area-inset-bottom)); width: min(310px, 47vw); }
  .halo-preview .combat3d .combat3d-launch { bottom: max(18px, env(safe-area-inset-bottom)); }
  .halo-preview .account .account-hud { left: auto; right: calc(var(--edge) + 98px); }
  .halo-preview .photo-control { left: auto; right: var(--edge); }
  .halo-preview .music-control { left: auto; right: calc(var(--edge) + 54px); }
}
@media (max-width: 720px) and (max-height: 560px) and (orientation: landscape) {
  .halo-preview .music-control { right: calc(var(--edge) + 44px); }
}
@media (max-width: 360px) {
  .halo-preview .city-clock { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.5; }
  .halo-preview .city-clock-dot { display: none; }
  .halo-preview .combat3d .combat3d-launch { width: 44px; height: 44px; min-height: 44px; }
  .halo-preview .account .account-name { max-width: 70px; }
}
@media (max-height: 560px) and (orientation: portrait) {
  .halo-preview .hud-actions { min-height: 90px; }
  .halo-preview .mobile-movement { bottom: max(71px, calc(env(safe-area-inset-bottom) + 59px)); }
}

/* Bandeau de liaison (connection-banner.mjs) : visible pendant une reconnexion, sous la barre de vie et le menu (qui restent accessibles), au-dessus du
   jeu mais sous les écrans d'entrée (70+). Seule la carte capte le toucher. */
.link-banner { position: fixed; z-index: 60; top: max(132px, calc(env(safe-area-inset-top) + 122px)); left: 50%; transform: translateX(-50%);
  width: min(360px, calc(100vw - 32px)); box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px;
  padding: 12px 14px; border: 1px solid var(--ui-glass-line); border-radius: 14px; background: rgb(12 26 25 / 78%);
  box-shadow: var(--ui-glass-shadow); backdrop-filter: var(--ui-glass-blur); -webkit-backdrop-filter: var(--ui-glass-blur); color: var(--ui-text);
  animation: link-banner-in .22s ease-out; }
.link-banner[hidden] { display: none; }
.link-banner-copy { min-width: 0; }
.link-banner-title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.link-banner-detail { margin: 2px 0 0; font-size: 12.5px; color: var(--ui-text-muted); }
.link-banner-signal { width: 12px; height: 12px; border-radius: 50%; background: #e0b35c; box-shadow: 0 0 0 0 rgb(224 179 92 / 55%); animation: link-banner-pulse 1.4s ease-out infinite; }
.link-banner[data-state="restored"] .link-banner-signal { background: var(--ui-accent); animation: none; }
.link-banner[data-state="fault"] .link-banner-signal { background: #d9826b; animation: none; }
.link-banner-action { grid-column: 1 / -1; justify-self: stretch; margin-top: 8px; min-height: 40px; border: 1px solid var(--ui-glass-line); border-radius: 10px;
  background: var(--ui-control-fill); color: var(--ui-text); font: inherit; font-size: 13.5px; cursor: pointer; }
.link-banner-action:hover, .link-banner-action:focus-visible { background: var(--ui-control-hover); outline: none; }
.link-banner-action[hidden] { display: none; }
@keyframes link-banner-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes link-banner-pulse { 70% { box-shadow: 0 0 0 9px rgb(224 179 92 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(224 179 92 / 0%); } }
@media (prefers-reduced-motion: reduce) { .link-banner, .link-banner-signal { animation: none; } }