/* Base Layout Structure */
#app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: clamp(8px, 1.4vw, 14px);
    gap: 12px;
    max-width: 1360px;
    margin: 0 auto;
}

/* Header Section */
header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Main Content Grid */
main {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Desktop/Tablet Layout */
@media (min-width: 768px) {
    main {
        display: grid;
        grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
        grid-template-areas: 
            "radio menu"
            "radio board";
        align-items: start;
        gap: 12px;
    }

    #radio-tuner { grid-area: radio; }
    #game-menu-panel { grid-area: menu; }
    #radio-visual-panel { grid-area: board; }
    #active-game-container { grid-area: board; }
    #radio-tuner { position: sticky; top: 12px; }
}

/* Collapsible Panels */
.collapsible-header {
    display: none;
}

/* Mobile specific layout */
@media (max-width: 767px) {
    #radio-tuner { order: 1; }
    #game-menu-panel { order: 2; }
    #radio-visual-panel { order: 3; }

    .collapsible-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        background: rgba(0, 0, 0, 0.4);
        border-bottom: 1px solid var(--color-panel-border);
        cursor: pointer;
        font-family: var(--font-mono);
        font-size: 1.2rem;
        color: #172256;
        text-transform: uppercase;
        width: 100%;
        border-inline: 0;
        border-radius: 0;
        text-align: left;
    }

    #radio-tuner .collapsible-header {
        margin-top: 10px;
        border-top: 1px solid var(--color-panel-border);
    }

    .collapsible-header .toggle-icon {
        transition: transform 0.3s;
    }

    .collapsible-header.collapsed .toggle-icon {
        transform: rotate(-90deg);
    }

    .collapsible-content.collapsed {
        display: none !important;
    }

    body.game-active main {
        display: flex;
        flex-direction: column;
    }

    body.game-active #active-game-container {
        display: flex;
        order: 2;
    }

    body.game-active #radio-visual-panel {
        display: none;
    }
}

/* Desktop: ensure it displays when active */
@media (min-width: 768px) {
    body.game-active #active-game-container {
        display: flex;
    }

    body.game-active #radio-visual-panel {
        display: none;
    }
}

/* Base states */
#active-game-container {
    display: none; /* hidden by default */
    justify-content: center;
    align-items: center;
    min-height: 0;
}

body.game-active #active-game-container {
    min-height: 0;
}

#radio-visual-panel {
    min-height: clamp(420px, 58vh, 650px);
    overflow: hidden;
}