/* Global Reset */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html { background: #0a0a0a; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main, site-module { width: 100%; }
main { flex: 1 0 auto; }
site-module { display: block; }

site-module[name="navigation"] {
    position: sticky;
    top: 0;
    z-index: 1000;
}

site-module[name="navigation"], site-module[name="footer"] { flex: 0 0 auto; }

img {
    display: block;
    max-width: 100%;
}

button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }

/* Flip Mode */

:is(
    .site-logo,
    .main-navigation a,
    #flipToggle,
    #themeToggle,
    .play-button,
    .card-index-header > *,
    .filter-container input,
    .filter-container select,
    .filter-container button,
    .card,
    .card-pagination > *,
    site-module[name="footer"] > *
) {
    transform-origin: center;
    transition: transform .5s ease;
}

html.page-flipped :is(
    .site-logo,
    .main-navigation a,
    #flipToggle,
    #themeToggle,
    .play-button,
    .card-index-header > *,
    .filter-container input,
    .filter-container select,
    .filter-container button,
    .card,
    .card-pagination > *,
    site-module[name="footer"] > *
) { transform: rotate(180deg); }

html.page-flipped .play-button:active { transform: rotate(180deg) scale(.97); }

@media (max-width: 800px) {
    html.page-flipped .main-navigation a {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        gap: 10px;
    }
}