:root {
    --mobile-header-item-height: 10rem;
    --mobile-header-spacing: 0.5rem;
    --mobile-center-container-padding: 3rem;
}

body {
    background: black;
    z-index: 0;
}
.mobile-header {
    flex-shrink: 0;
    width: 100%;
    
    display: flex;
    align-items: center;
    
    gap: var(--mobile-header-spacing);
    padding: var(--mobile-header-spacing);

    overflow-x: auto;
    overflow-y: hidden;
    
    /* background: var(--apogee-bg); */
    /* box-shadow:
        0 0 4px -2px var(--white-glow),
        0 0 1rem 0.25rem var(--apogee-glow); */
    /* backdrop-filter: sepia(100%) blur(5px); */

    z-index: 1;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge */
}
    .mobile-header::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }
    .mobile-header a {
            display: contents;
    }
    .mobile-header:hover .mobile-header-title {
        color: var(--coquette);
        opacity: 100%;

        transition: 0.15s;
    }

@media (max-width: 1050px) {
    html {
        font-size: max(10px,1.5625vw);
    }

    .h1-container {
        padding: 0.5rem 2.5rem 0.5rem 2rem;

        background: var(--apogee-bg);
        backdrop-filter: sepia(20%) blur(10px);
        box-shadow: inset 0 0.35rem 4rem -1.3rem var(--apogee-glow);
    }

    .h2-container {
        --padding: calc(0.5*var(--center-container-padding));
    }

    .tbl-container{
        flex-shrink: 0;
        height: var(--mobile-header-item-height);

        margin: 0;
    }

    .title-container {
        position: sticky;
        top: 0;
        width: 100%;

        padding: 1rem 0.5rem;

        display: flex;
        justify-content: space-between;
        align-items: center;

        /* background: var(--apogee-bg); */
        /* box-shadow:
            0 0 4px -2px var(--white-glow),
            0 0 1rem 0.25rem var(--apogee-glow); */
        /* backdrop-filter: sepia(100%) blur(5px); */

        z-index: 2;
    }

    .thumbnail {
        height: var(--mobile-header-item-height);
        aspect-ratio: 1/1;

        border: solid 1px var(--apogee-bg);
        border-radius: 4px;
        box-shadow:
            0 0 4px 0 var(--apogee-glow);
    }

    .social-icon {
        height: var(--mobile-header-item-height);
        width: var(--mobile-header-item-height);
        aspect-ratio: 1/1;
        
        filter:
        drop-shadow(0 1px var(--ember-shadow))
        drop-shadow(0 0 var(--shadow-g))
        drop-shadow(0 0 var(--shadow-b));
    }
    .center-container {
        height: 100%;
        width: 100%;

        padding-top: 5rem;
        margin: 0;

        overflow-y: auto;
        overflow-x: visible;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Edge */

        background: var(--apogee-bg);
        box-shadow:
            0 0 4px -2px var(--white-glow),
            0 0 4rem 0.75rem var(--apogee-glow),
            inset 0 0.3rem 4rem 0 var(--apogee-glow);
        backdrop-filter: sepia(100%) blur(5px);
        
    }
        .center::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }


    .tile-3d.social-icon{
        border: solid 2px var(--apogee-bg);
        border-radius: 4px;
        backdrop-filter: brightness(50%);

        filter:
            drop-shadow(0 1px var(--shadow-r))
            drop-shadow(1px -1px var(--shadow-g))
            drop-shadow(1px 1px var(--shadow-b));
        box-shadow:
            inset 0 0 4rem 0 var(--apogee-glow),
            0 0 4px 0 var(--apogee-glow);
    }
        .tile-3d.social-icon:hover {
            background-image: var(--icon-hover);

            filter:
                drop-shadow(0 0.25rem var(--shadow-r))
                drop-shadow(0.25rem -1px var(--shadow-g))
                drop-shadow(-0.25rem 1px var(--shadow-b));

            border: solid 2px var(--light-red);
            border-radius: 0.5rem;
            box-shadow:
                inset 0 0 4rem 0 var(--apogee-glow),
                0 0 1rem 0 var(--white-glow);
        }

    .game-banner-label {
        font-size: 3.4375vw;
    }
}

.mobile-header-title-container {
    height: var(--mobile-header-item-height);
    flex-shrink: 0;
    padding: 1rem 0.5rem;
    margin-left: 2rem;

    display: flex;
    justify-content: center;
    
    border-radius: 2px;
    clip-path: polygon(
        /* top edge */
        0% var(--corner),
        var(--corner) 0%,
        /* right edge */
        100% 0%,
        100% 100%,
        /* bottom edge */
        100% 100%,
        0% 100%,
        /* left edge */
        0% 100%,
        0% var(--corner));
        
    --corner: 1rem;
    
    background: var(--apogee-bg);
    box-shadow:
        0 0 4px -2px var(--white-glow),
        0 0 0.5rem 0.1rem var(--apogee-glow),
        inset 0 1rem 1rem 0 var(--apogee-glow);
    backdrop-filter: sepia(100%) blur(5px);
        
}

.mobile-header-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);

    font-family: "JetBrains Mono", monospace;
    font-size: 1rem;
    color: var(--french-gray);
    font-weight: 200;
    text-align: left;
    text-shadow:
        0 0.2rem var(--shadow-r),
        0.2rem -0.1rem var(--shadow-g),
        -0.2rem 0.1rem var(--shadow-b);

    opacity: 35%;

    transition: color 2s ease, opacity 2s ease, transform 0s;
}