/* Shared, restrained motion for navigation and large content changes. */
#mode-toggle-wrapper { position:fixed; overflow:hidden; }
#mode-toggle-wrapper .mode-indicator {
    position:absolute; top:4px; bottom:4px; left:0; width:var(--mode-indicator-width,0px);
    border-radius:16px; background:var(--hud-accent,#00e5ff);
    box-shadow:0 2px 11px rgba(var(--hud-accent-rgb,0,229,255),.34);
    transform:translateX(var(--mode-indicator-x,0px)); pointer-events:none;
}
#mode-toggle-wrapper.motion-ready .mode-indicator {
    transition:transform .28s cubic-bezier(.2,.7,.2,1),width .28s cubic-bezier(.2,.7,.2,1),background-color .2s;
}
#mode-toggle-wrapper .mode-opt {
    position:relative; z-index:1; border:0; background:transparent; color:#a8b5bd;
    font-family:inherit; line-height:normal; appearance:none;
    transition:color .18s ease,background-color .15s ease,transform .1s ease;
}
#mode-toggle-wrapper .mode-opt:hover:not(.active) { color:#fff; background:rgba(var(--hud-accent-rgb,0,229,255),.13); }
#mode-toggle-wrapper .mode-opt:active { transform:scale(.96); }
#mode-toggle-wrapper .mode-opt:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
#mode-toggle-wrapper .mode-opt.active,
body[data-hud-theme] #mode-toggle-wrapper .mode-opt.active {
    color:#07151b; background:transparent; box-shadow:none; border-color:transparent;
}
#center-stage, #ranking-stage, #model-stage, #studio-hero { transition:opacity .18s ease,transform .4s cubic-bezier(.2,0,.2,1); }
body.mode-switch-out #center-stage, body.mode-switch-in #center-stage,
body.mode-switch-out #ranking-stage, body.mode-switch-in #ranking-stage,
body.mode-switch-out #model-stage, body.mode-switch-in #model-stage,
body.mode-switch-out #studio-hero, body.mode-switch-in #studio-hero { opacity:0 !important; }
body.mode-switch-out #ranking-stage, body.mode-switch-in #ranking-stage,
body.mode-switch-out #model-stage, body.mode-switch-in #model-stage { animation:none !important; }

@media (min-width:769px) {
    #garage-panel { transition:left .4s cubic-bezier(.2,0,.2,1),width .26s cubic-bezier(.2,.7,.2,1),opacity .3s ease; }
    #garage-panel .garage-tools > * { transition:opacity .15s ease .05s; }
    #garage-panel:not(:hover):not(.force-expand) .garage-tools > * { transition-delay:0s; }
    #garage-panel .garage-cat-header span:not(.cat-title) { transition:opacity .16s ease,max-width .22s ease,margin-left .22s ease; }
    #garage-panel .league-icon + .cat-title {
        display:inline-block; max-width:0 !important; opacity:0 !important;
        overflow:hidden !important; white-space:nowrap;
        transition:max-width .22s ease,opacity .16s ease;
    }
    #garage-panel:is(:hover,.force-expand) .league-icon + .cat-title {
        max-width:180px !important; opacity:1 !important;
    }
}
@media (min-width:1280px) {
    body[data-hud-layout="studio"]:not(.mode-appreciate) #garage-panel .league-icon + .cat-title {
        max-width:180px !important; opacity:1 !important;
    }
}
/* A numeric grid track can interpolate; the original max-height:none cannot. */
#garage-panel .garage-content {
    display:grid; grid-template-rows:0fr; max-height:none !important;
    opacity:0; visibility:hidden; overflow:hidden !important;
    transition:grid-template-rows .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease,visibility 0s linear .3s;
}
#garage-panel .garage-content > .garage-list { min-height:0; overflow:hidden; }
/* Padding on a zero-height grid track otherwise reserves a blank band under every rank. */
#garage-panel .garage-content > .garage-list { padding-top:0; padding-bottom:0; transition:padding .3s cubic-bezier(.2,.7,.2,1); }
#garage-panel .garage-category.active .garage-list { content-visibility:visible; }
#garage-panel:is(:hover,.force-expand,.mobile-active) .garage-category.active .garage-content {
    grid-template-rows:1fr; opacity:1; visibility:visible; overflow:hidden !important;
    transition:grid-template-rows .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease .05s,visibility 0s;
}
#garage-panel:is(:hover,.force-expand,.mobile-active) .garage-category.active .garage-content > .garage-list {
    padding-top:12px; padding-bottom:20px;
}
@media (min-width:1280px) {
    body[data-hud-layout="studio"]:not(.mode-appreciate):not(.mode-preview) #garage-panel .garage-category.active .garage-content {
        grid-template-rows:1fr; opacity:1; visibility:visible; overflow:hidden !important;
        transition:grid-template-rows .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease .05s,visibility 0s;
    }
    body[data-hud-layout="studio"]:not(.mode-appreciate):not(.mode-preview) #garage-panel .garage-category.active .garage-content > .garage-list {
        padding-top:12px; padding-bottom:20px;
    }
}
body[data-hud-layout="studio"]:not(.mode-preview) #garage-panel .garage-category.active .garage-content { overflow:hidden !important; }

.ls-effects { border-top:1px solid rgba(255,255,255,.12); padding-top:12px; }
.ls-effects-title { margin:0 0 8px; color:#ccecf0; font-size:13px; font-weight:700; }
.ls-effects-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.ls-effect-option { display:flex; align-items:center; min-height:34px; gap:7px; padding:5px 8px;
    border:1px solid rgba(255,255,255,.17); border-radius:7px; background:rgba(255,255,255,.04);
    color:#e8edf0; cursor:pointer; font-size:12px; transition:background-color .16s,border-color .16s,opacity .16s; }
.ls-effect-option:hover:not(:has(:disabled)), .ls-effect-option:focus-within { background:rgba(0,229,255,.1); border-color:rgba(0,229,255,.5); }
.ls-effect-option:has(:disabled) { opacity:.48; cursor:not-allowed; }
.ls-effect-option input { margin:0; accent-color:#00e5ff; cursor:inherit; }
.ls-effect-option input:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.ls-effects-note { margin:8px 0 0; color:#aab9c1; font-size:11px; line-height:1.35; }

@media (prefers-reduced-motion:reduce) {
    #mode-toggle-wrapper *, #center-stage, #ranking-stage, #model-stage, #studio-hero,
    #garage-panel, #garage-panel .garage-content, #garage-panel .garage-tools > *, .ls-effect-option {
        animation:none !important; transition:none !important;
    }
}

/* On narrow portrait screens, give the garage's reserved header/footer space
   back to the list. The navigation floats over the scrollport; its clearance
   belongs at the end of the scrollable content, not outside the scrollport. */
@media (max-width:768px) and (orientation:portrait) {
    body #garage-panel {
        box-sizing:border-box !important;
        height:100dvh !important;
        max-height:100dvh !important;
        padding:52px 0 0 !important;
        overflow:hidden !important;
    }
    #garage-panel > .garage-tools { padding:8px 10px !important; }
    #garage-panel > .garage-filter.hud-filter-surface {
        padding:4px 10px 5px !important;
    }
    #garage-panel .garage-cat-header { height:42px; }
    #garage-panel > .garage-scroll-wrapper {
        flex:1 1 0 !important;
        height:auto !important;
        min-height:0 !important;
        overflow-y:auto !important;
    }
    #garage-panel > .garage-scroll-wrapper::after {
        content:"";
        display:block;
        height:calc(70px + env(safe-area-inset-bottom, 0px));
        pointer-events:none;
    }
    #mobile-bottom-nav {
        bottom:max(8px, env(safe-area-inset-bottom, 0px)) !important;
    }
}