/* Menu montage — looping video background for login + main-menu screens.
   Mounted dynamically by client/js/ui/menu-montage.js. */

.menu-montage-stack {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    background-color: #0a0712;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* The existing solid-color .splash-bg is a later DOM sibling at z-index:auto,
   which would paint on top of the video in tree order. Pin it below. */
#login-screen .splash-bg { z-index: 0; }

.menu-montage-stack video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 600ms ease-in-out;
    pointer-events: none;
}

.menu-montage-stack video.active {
    opacity: 1;
}

/* Let the existing splash overlays sit on top of the login-screen montage. */
#login-screen .splash-vignette,
#login-screen .splash-glow,
#login-screen #splash-panel {
    z-index: 2;
}

/* Main-menu left column hosts the montage as a full-column background.
   .menu-left is already given position:relative + z-index:1 by the rule
   #main-menu > *, but its own flex children are static + z-index:auto, so
   without intervention the absolutely-positioned stack would paint over
   them. Promote all non-stack children above the stack. */
#main-menu .menu-left > *:not(.menu-montage-stack) {
    position: relative;
    z-index: 2;
}

/* Audio toggle button — small circular speaker icon in the corner of whichever
   menu screen is visible. Uses the design system accent for the "on" state. */
.menu-montage-audio-btn {
    position: fixed;
    z-index: 1000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--w-border, #2a2440);
    background: rgba(20, 16, 32, 0.72);
    color: var(--w-text-secondary, #b5aacb);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: color 200ms, border-color 200ms, background 200ms, transform 120ms;
    padding: 0;
}
.menu-montage-audio-btn[data-position="bottom-right"] { right: 18px; bottom: 18px; }
.menu-montage-audio-btn[data-position="bottom-left"]  { left:  18px; bottom: 18px; }
.menu-montage-audio-btn[data-position="top-right"]    { right: 18px; top:    18px; }
.menu-montage-audio-btn[data-position="top-left"]     { left:  18px; top:    18px; }

.menu-montage-audio-btn:hover {
    color: var(--w-accent, #e6c170);
    border-color: var(--w-accent-dim, #b89545);
    background: rgba(20, 16, 32, 0.9);
    transform: scale(1.05);
}
.menu-montage-audio-btn.audio-on {
    color: var(--w-accent, #e6c170);
    border-color: var(--w-accent-dim, #b89545);
    box-shadow: 0 0 16px rgba(230, 193, 112, 0.25);
}
.menu-montage-audio-btn:focus-visible {
    outline: 2px solid var(--w-accent, #e6c170);
    outline-offset: 3px;
}

/* Hide the button when no menu screen is active (i.e. in-game). */
body.in-game .menu-montage-audio-btn { display: none; }