/* --- Splash View --- */
#splash-view {
    justify-content: center;
    flex-direction: column; /* Default to column for overall stacking */
    align-items: center; /* Center items horizontally */
    gap: 30px; /* Space between top section and info section */
    min-height: calc(100vh - 36px);
}

.splash-top-section {
    display: flex;
    flex-direction: row; /* Desktop: row layout for logo on left, buttons on right */
    align-items: center; /* Vertically center content */
    gap: 50px; /* Space between logo and buttons */
    max-width: 800px; /* Max width for this section */
}

#splash-view .splash-logo-container {
    display: flex;
    flex-direction: column; /* For logo and beta tag stacking */
    align-items: flex-start; /* Left-align logo and beta tag */
    margin-bottom: 0; /* Remove bottom margin when next to buttons */
}

#splash-view .splash-logo {
    height: auto; /* Make logo fill the container height */
    width: 100%;
    max-width: 500px; /* Limit logo width for desktop */
    filter: drop_shadow(0 0 5px var(--background-color)) drop_shadow(0 0 15px var(--background-color));
    margin: 0; /* Remove auto margin when next to buttons */
}

.splash-actions {
    display: flex;
    flex-direction: column; /* Buttons stacked vertically */
    align-items: center;
    justify-content: center;
    gap: 15px; /* Gap between vertical buttons */
    width: auto; /* Allow width to be determined by content */
    max-width: 250px; /* Max width for button group */
}

#splash-view button {
    padding: 15px; /* Larger padding for main action buttons */
    font-size: 1.1em; /* Larger font size */
    width: 100%; /* Full width within its container */
    white-space: nowrap; /* Prevent text wrapping */
    box-sizing: border-box;
    flex: none; /* Remove flex: 1 to allow width: 100% to take effect */
}

.splash-info {
    max-width: 800px;
    margin-top: 0; /* Adjusted from 30px to 0 as gap is handled by parent */
    padding: 20px;
    background-color: var(--block-color);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(var(--block-color-rgb), 0.5);
    text-align: left;
}

.splash-instruction-img {
    width: 100%;
    max-width: 550px; /* Ensure image scales down to fit container */
    height: auto;    /* Maintain aspect ratio */
    display: block;  /* Remove extra space below image */
    margin: 40px auto; /* Center image and add vertical spacing */
    border-radius: 8px; /* Slightly rounded corners for aesthetics */
    box-shadow: 0 0 15px rgba(var(--block-color-rgb), 0.5); /* Soft shadow */
    text-align: center;
}

/* --- Config View --- */
#config-view {
    justify-content: flex-start;
}

/* --- Main View (Single Slot) --- */
#main-view {
    justify-content: center;
    gap: 20px;
}

/* --- Results View --- */
#results-view h1 {
    margin-bottom: 20px;
}

#final-results-list {
    list-style: none;
    padding: 0;
    width: 80%;
    max-width: 600px;
    background-color: var(--block-color);
    border-radius: 10px;
    box-shadow: 0 0 20px var(--block-color);
    margin-top: 20px;
}

#final-results-list li {
    padding: 15px 20px;
    border-bottom: 1px solid var(--secondary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2em;
}

#final-results-list li:last-child {
    border-bottom: none;
}

#final-results-list li strong {
    color: var(--primary-color);
    font-size: 1.3em;
}

#reset-app-button {
    margin-top: 40px;
}
/* --- Splash Logo --- */
.splash-logo {
    height: 150px; /* Adjust size as needed */
    width: auto;
    margin-bottom: 30px; /* Space below logo */
    filter: drop-shadow(0 0 5px var(--background-color)) drop_shadow(0 0 15px var(--background-color));
}

@media (max-width: 768px) {
    #splash-view {
        justify-content: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}