/* Simple, Working Bottom Menu */

/* Container - fixed at bottom centered, 95vw width */
.hanging-bottom-menu {
    position: fixed;
    bottom: 3vh;
    left: 2.5vw;
    z-index: 1000;
    width: 95vw;
    height: calc(95vw / 19.835294118); /* Shadow ratio: 1686/85 */
    pointer-events: none;
    overflow: visible;
}

/* Child elements can receive clicks */
.hanging-bottom-menu * {
    pointer-events: auto;
}

/* Shadow background - fills container */
.menu-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Logo - positioned relative to shadow */
.menu-logo {
    position: absolute;
    left: 0;
    top: calc(-38%); /* 0% */
    width: calc(111 / 1686 * 100%); /* 6.586% of shadow width */
    height: calc(118 / 85 * 100%); /* 138.82% - taller than shadow */
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s ease;
    object-fit: contain;
}

.menu-logo:hover {
    transform: scale(1.05);
}

.menu-logo.selected {
    filter: brightness(1.2);
}

/* Base button styling */
.menu-button {
    position: absolute;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s ease;
}

.menu-button:hover {
    transform: scale(1.05);
}

.menu-button:active {
    transform: scale(0.95);
}

/* Button positioning - all positioned from bottom, 31.7% up from shadow bottom */
.menu-button.tickets {
    left: calc(219 / 1686 * 100%); /* 12.99% */
    bottom: 0;
    width: calc(203 / 1686 * 100%); /* 12.04% */
    height: calc(75 / 85 * 100%); /* 51.76% - all buttons 44px tall */
}

.menu-button.freestuff {
    left: calc(551 / 1686 * 100%); /* 32.68% */
    bottom: 0;
    width: calc(281 / 1686 * 100%); /* 16.67% */
    height: calc(75 / 85 * 100%); /* 51.76% */
}

.menu-button.credits {
    left: calc(975 / 1686 * 100%); /* 57.83% */
    bottom: 0;
    width: calc(201 / 1686 * 100%); /* 11.92% */
    height: calc(75 / 85 * 100%); /* 51.76% */
}

.menu-button.galleries {
    left: calc(1354 / 1686 * 100%); /* 80.31% */
    bottom: 0;
    width: calc(246 / 1686 * 100%); /* 14.59% */
    height: calc(75 / 85 * 100%); /* 51.76% */
}

/* Button images */
.menu-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Selected state */
.menu-button .selected {
    display: none;
}

.menu-button.selected .selected {
    display: block;
}

.menu-button.selected .unselected {
    display: none;
}