* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.splash-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #050d00 0%, #1b3d0f 50%, #1a0a00 100%);
    background-size: 400% 400%;
}

.splash-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 0 92px rgba(255, 215, 0, 0.3));
}

/* For mobile devices in portrait mode, prioritize showing full width */
@media (max-width: 768px) and (orientation: portrait) {
    .splash-image {
        width: 100%;
        height: auto;
        max-height: 100vh;
    }
}

/* For very tall/narrow screens */
@media (max-aspect-ratio: 9/16) {
    .splash-image {
        object-fit: contain;
    }
}