/* Centering the iframe */
#unityGameIframeContainer {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 440px);
    min-height: 0; /* Allow content to shrink */
    overflow: hidden;
    position: relative; /* Add this for positioning context */
}

/* The actual iframe */
#unityGameIframe {
    width: auto;
    height: auto;
    border: none;
    position: absolute; /* Position absolutely within container */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center perfectly */
    object-fit: contain; /* Maintain aspect ratio */
}

/* Responsive layout for iframe */
@media (max-width: 1160px) {
    #unityGameIframeContainer {
        width: 100%;
        height: auto;
        min-height: 480px;
        position: relative;
    }

    #unityGameIframe {
        position: absolute;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 480px;
    }
}


/* Current ratio display */
#currentRatio {
    font-size: 14px;
    margin-top: 5px;
    color: #dddddd;
}

/* Fix for body to ensure no whitespace and footer at bottom */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: auto; /* Allow scrolling when content doesn't fit */
    min-width: 740px; /* Minimum width before scrolling */
    min-height: 600px; /* Minimum height before scrolling */
}

/* Ensure section fills available space without overflow */
section {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: visible; /* Allow content to overflow and be scrollable */
}

/* Main wrapper for consistent layout */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Full viewport height */
    position: relative; /* For absolute positioning of footer if needed */
}

/* Make content area fill available space */
.content-area {
    flex: 1 0 auto; /* Grow, don't shrink, use auto basis */
    display: flex;
    flex-direction: column;
}

/* Footer always sticks to bottom */
footer {
    flex-shrink: 0; /* Prevent footer from shrinking */
    background-color: #777;
    padding: 10px;
    text-align: center;
    color: white;
    width: 100%;
    margin-top: auto; /* Push to bottom when content doesn't fill viewport */
}