/* Mobile HUD: levels belong to the header, controls share one centre axis. */
@container ca (max-width:900px){
  .ca-experience .ca-floors{
    top:138px;left:0;right:0;bottom:auto;
    flex-direction:row;gap:0;max-height:48px;
    margin:0;padding:0 8px;border:0;border-radius:0;
    background:color-mix(in srgb,var(--ca-panel) 42%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    transform:none!important;translate:none;
  }
  .ca-experience:not(:has(>.ca-header)) .ca-floors{top:12px;}
  .ca-experience .ca-floors::-webkit-scrollbar{display:none;}
  .ca-experience .ca-floors button{
    flex:1 0 auto;min-width:54px;min-height:44px;
    padding:10px 8px;justify-content:center;font-size:10px;gap:0;
    border-radius:0;
  }
  .ca-experience .ca-floors button::before,.ca-experience .ca-floors i{display:none;}
  .ca-experience .ca-floors button.active{
    box-shadow:inset 0 -2px var(--ca-accent);
    background:color-mix(in srgb,var(--ca-accent) 10%,transparent);
  }
  .ca-experience .ca-orbit,.ca-experience .ca-view-controls{
    left:50%;right:auto;translate:none;transform:translateX(-50%)!important;
  }
  .ca-experience .ca-orbit{bottom:calc(88px + env(safe-area-inset-bottom,0px));}
  .ca-experience .ca-view-controls{
    bottom:calc(28px + env(safe-area-inset-bottom,0px));
    width:max-content;max-width:calc(100% - 24px);gap:0;padding:4px;
    flex-wrap:wrap;justify-content:center;border-radius:28px;
  }
  .ca-experience .ca-view-controls button{min-width:30px;width:34px;min-height:44px;padding:4px;}
  .ca-experience .ca-view-controls>span{padding:0 3px;font-size:9px;}
  .ca-experience .ca-orbit-buttons,.ca-experience .ca-view-controls{
    background:color-mix(in srgb,var(--ca-panel) 38%,transparent)!important;
    backdrop-filter:blur(16px) saturate(120%)!important;
    -webkit-backdrop-filter:blur(16px) saturate(120%)!important;
    border:1px solid color-mix(in srgb,var(--ca-text) 15%,transparent);
    box-shadow:0 5px 18px #0000000d,inset 0 1px 0 #ffffff30;
  }
}

/* Keep content dialogs inside the viewer, including a narrow embedded iframe. */
@container ca (max-width:900px){
  .ca-experience .ca-floating.ca-floating.ca-floating{
    position:absolute!important;inset:12px!important;
    width:auto!important;max-width:none!important;height:auto!important;
    max-height:calc(100% - 24px)!important;margin:0!important;
    transform:none!important;translate:none!important;
    display:flex;flex-direction:column;padding:16px!important;
    border-radius:16px!important;overflow:hidden;z-index:30;
    animation:none!important;
  }
  .ca-experience .ca-floating.ca-floating.ca-floating>header{
    position:relative;flex:0 0 auto;min-width:0;padding-right:0;
    display:flex;align-items:flex-start;gap:12px;
  }
  .ca-experience .ca-floating.ca-floating.ca-floating>header>div{flex:1;min-width:0;overflow-wrap:anywhere;}
  .ca-experience .ca-floating.ca-floating.ca-floating>header button{
    position:static!important;flex:0 0 44px;min-width:44px!important;min-height:44px!important;
    margin:0;transform:none!important;translate:none!important;
  }
  .ca-experience .ca-floating.ca-floating.ca-floating>.ca-panel-body{
    flex:1 1 auto;min-height:0;min-width:0;max-height:none;
    overflow:auto;overscroll-behavior:contain;padding:0;
  }
  .ca-experience .ca-floating.ca-floating.ca-floating .ca-media-tools{flex-wrap:wrap;}
  .ca-experience .ca-floating.ca-floating.ca-floating .ca-media-tools a{max-width:100%;overflow-wrap:anywhere;}
}