special-pages/pages/duckplayer/app/components/MobileApp.module.css
body[data-display="app"] {
    padding: 8px;
}
html[data-focus-mode="on"]:root .main {
    --bg-color: transparent;
}
.hideInFocus {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s, visibility .3s;
}
html[data-focus-mode="on"] .hideInFocus {
    opacity: 0;
    visibility: hidden;
}
@keyframes fadeout {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: visible;
    }
}
.filler {
    display: none;
}
.main {
    --bg-color: #222;
    --logo-spacing: 185px;
    --gutter-width: 8px;
    --outer-radius: 16px;
    --inner-radius: 12px;
    --logo-width: 157px;
    --inner-padding: 8px;
    --mobile-buttons-padding: 8px;

    position: relative;
    max-width: 100vh;
    margin: 0 auto;
    height: 100%;
    display: grid;
    grid-template-columns: auto;
    --row-1: 0;
    --row-2: auto;
    --row-3: max-content;
    --row-4: max-content;
    --row-5: 16px;
    --row-6: max-content;
    --row-7: auto;
    grid-template-rows:
        var(--row-1)
        var(--row-2)
        var(--row-3)
        var(--row-4)
        var(--row-5)
        var(--row-6)
        var(--row-7);
    grid-template-areas:
        'logo'
        'gap1'
        'embed'
        'buttons'
        'button-gap'
        'switch'
        'gap2';
}

/* remove the switch height, to keep everything centered */
body:has([data-state="completed"] [aria-checked="true"]) .main {
    --row-1: 0;
    --row-2: auto;
    --row-3: max-content;
    --row-4: max-content;
    --row-5: 0;
    --row-6: 0;
    --row-7: auto;
}

body:has([data-state="completed"] [aria-checked="true"]) .switch {
    background: transparent;
}

.embed {
    background: var(--bg-color);
    grid-area: embed;
    padding: calc(var(--inner-padding) / 2);
    padding-bottom: 0;
    border-top-left-radius: var(--outer-radius);
    border-top-right-radius: var(--outer-radius);

    transition: background-color .3s;

    html[data-focus-mode="on"] & {
        transition: none;
    }
}

.logo {
    justify-self: center;
    grid-area: logo;
}

.buttons {
    grid-area: buttons;
    padding: var(--inner-padding);
    background: var(--bg-color);
    border-bottom-left-radius: var(--outer-radius);
    border-bottom-right-radius: var(--outer-radius);
}

.switch {
    grid-area: switch;
    height: 44px;
}

.detachedControls {
    grid-area: detached;
    display: flex;
    flex-flow: column;
    gap: 8px;
    padding: 8px;
    background: #2f2f2f;
    border-radius: 12px;
}

@media screen and (min-width: 425px) and (max-height: 600px) {
    .main {
        /* reset logo positioning */
        grid-template-rows:
                max-content
                auto
                max-content
                max-content
                12px
                max-content
                auto;
    }
}
@media screen and (min-width: 768px) and (min-height: 600px)  {
    .logo {
        justify-self: unset;
        background: var(--bg-color);
        border-bottom-left-radius: var(--outer-radius);
        display: grid;
        align-items: center;
        padding-left: 12px;
    }
    .buttons {
        border-bottom-left-radius: unset;
    }
    .main {
        grid-template-columns: auto minmax(384px, max-content);
        grid-template-rows: max-content max-content 12px max-content;
        grid-template-areas:
            'embed embed'
            'logo buttons'
            'button-gap button-gap'
            'switch switch';
        align-content: center;
        max-width: calc(100vh * 1.3);
    }
    /* remove the switch height, to keep everything centered */
    body:has([data-state="completed"] [aria-checked="true"]) .main {
        grid-template-rows: max-content max-content 0 0;
    }
}
@media screen and (min-width: 900px) and (min-height: 660px)  {
    .logo {
        justify-self: unset;
        padding-right: 34px;
    }
    .switch {
        background: var(--bg-color);
        border-radius: unset;
        display: grid;
        padding-top: 8px;
        padding-bottom: 8px;
        height: 100%;
    }
    .buttons {
        padding-left: 8px;
    }
    .main {
        grid-template-columns: max-content auto minmax(384px, max-content);
        grid-template-rows: max-content max-content;
        grid-template-areas:
            'embed embed embed'
            'logo switch buttons';
        align-content: center;
        max-width: calc(100vh * 1.3);
    }
    body:has([data-state="completed"] [aria-checked="true"]) .switch {
        background: var(--bg-color);
    }
}
@media screen and (min-width: 600px) and (max-height: 450px) {
    :root {
        --body-padding: 4px;
        --max-width: calc(100vw - var(--body-padding) * 2);
    }
    body[data-display="app"] {
        padding: 0;
    }
    .main {
        grid-template-columns: 100%;
        grid-template-rows: 100%;
        grid-template-areas: 'embed';
        max-width: none;
    }
    .embed {
        padding: 0;
        border-radius: 0;
        width: 100%;
        /*max-width: var(--max-width);*/
        background-color: transparent;
    }
    .filler {
        display: none;
    }
    .logo {
        display: none;
    }
    .buttons {
        display: none;
    }
    .switch {
        display: none;
    }
}
@media screen and (min-width: 1100px) {
    .switch {
        justify-content: end;
    }
}

/* Different layout for YouTube Errors on mobile */
.main[data-youtube-error="true"] {
    @media screen and (max-width: 599px) {
        --bg-color: transparent;
        --inner-padding: 4px;

        grid-template-areas:
            'logo'
            'gap3'
            'embed'
            'gap4'
            'switch'
            'buttons';
        grid-template-rows:
            max-content
            16px
            auto
            12px
            max-content
            max-content;

        & .embed {
            background: #2f2f2f;
            border-radius: var(--outer-radius);
            padding: 4px;
        }

        & .buttons {
            background: #2f2f2f;
            padding: 8px;

            border-top-left-radius: var(--outer-radius);
            border-top-right-radius: var(--outer-radius);
            transition: all 0.3s;
        }

        & .switch {
            display: none;
        }

        &:has([data-state="completed"]) {
            & .buttons {
                border-radius: var(--outer-radius);
            }

            & .switch {
                background: transparent;
                max-height: 0;
            }
        }
    }

    /* Hide chrome on smaller screens */
    @media screen and (max-width: 599px) and (max-height: 599px) {
        max-width: unset;

        grid-template-rows:
            0
            0
            auto
            12px
            0
            max-content;

        & .logo,
        & .switch {
            display: none;
        }

        & .buttons {
            border-radius: var(--outer-radius);
        }
    }

    /* Show buttons on landscape */
    @media screen and (min-width: 600px) and (max-height: 450px) {
        grid-template-areas:
            'embed'
            'buttons'
            'gap5';

        grid-template-rows:
            auto
            max-content
            8px;

        & .buttons {
            border-radius: var(--outer-radius);
            display: block;
        }
    }

    /* Sticky buttons on very low heights */
    @media screen and (max-height: 320px) {
        & .embed {
            overflow-y: auto;
        }

        & .buttons {
            bottom: 0;
            position: sticky;
        }
    }
}