@font-face {
    font-family: 'Heavy Data';
    src: url('../fonts/heavy_data.ttf') format('truetype');
    font-display: swap;
}

html, body {
    height: 100vh;
    min-width: 320px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

[hidden] {
    display: none !important;
}

section {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}

.logo {
    height: 32px;
}

.custom-font {
    font-family: 'Heavy Data', sans-serif;
}

/* Ensure panes are always visible on larger screens (md+) */
@media (min-width: 768px) {
    .tab-pane:not([hidden]) {
        display: flex !important;
        opacity: 1 !important;
        width: 33.3333%;
    }

    /* Make first pane larger if second one is hidden */
    .tab-content:has(>:nth-child(2)[hidden]) > .tab-pane:not([hidden]) {
        width: 50% !important;
    }
}

.tab-pane {
    width: 100%;
}

/* Pre-game: ship selection panel takes 2/3, leaving the buddy invitation panel at the default 1/3 */
@media (min-width: 768px) {
    #preGameUI .ship-pane:not([hidden]) {
        width: 66.6667% !important;
    }

    /* If the invite panel is hidden (user offline in the Buddy List system), the ship panel takes the full width */
    #preGameTabContent:has(> .invite-pane[hidden]) > .ship-pane:not([hidden]) {
        width: 100% !important;
    }
}

.tab-content>.active {
    display: flex;
}

/* Container that hosts the PixiJS game canvas */
.game-container {
    line-height: 0; /* This fixes an extra space below the canvas inside the game container */
    border-radius: .5em;
    overflow: hidden;
    background-color: #05070f;
}

/* LEVEL SELECTION */
/* Level selection: graphic tiles cropped from the menu spritesheet (512x512, at 0.6x scale) */

.level-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.level-btn {
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    background-color: #05070f;
    background-image: url('../images/starfield-front.png'), url('../images/starfield-rear.png');
    background-size: auto, auto;   /* native size, clipped/tiled (not scaled) so stars stay crisp */
    background-position: center, center;
    border: 0;
    padding: .75rem;
    border-radius: .75rem;
    overflow: hidden;
    color: #fff;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.level-btn:hover:not(:disabled) {
    transform: scale(1.04);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .5);
}

.level-btn:disabled {
    opacity: .4;
    cursor: default;
}

.level-thumb-wrap {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.level-thumb {
    background-image: url('../images/spritesheet-menu.png');
    background-repeat: no-repeat;
    background-size: 307.2px 307.2px;
}

.level-thumb--saturn {
    width: 234px;
    height: 126px;
    background-position: 0 0;
}

.level-thumb--space {
    width: 133px;
    height: 134px;
    background-position: -1.2px -126px;
}

.level-label {
    font-size: 1.5rem;
    color: #fff;
}
