@media (max-width: 767px) {
    html,
    body {
        margin: 0;
        height: 100%;
        overflow: hidden; /* no page scroll */
        overscroll-behavior: none; /* no rubber-band on Android/Chrome */
        padding: 0;
    }

    #root {
        position: fixed;
        margin-left: 1em;
        margin-right: 1em;
        /* fill the visible viewport, leave 10px at bottom */
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }
}

fc-game-board {
    @media (max-width: 767px) {
        flex: 1;
        margin-bottom: 10px;
        overflow: auto;
    }
    @media (min-width: 768px) {
        flex-direction: row;
    }
}
fc-card {
    user-select: none;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    aspect-ratio: 5 / 7;
    /* this includes padding and border in the total element size. so the element actually becomes 80px
    adding this also makes the aspect ratio work precisely */
    box-sizing: border-box;
    width: var(--card-w);
    height: var(--card-h);
    font-size: 1.2em;
}
@media (max-width: 767px) {
    fc-card span {
        display: block;
    }
}

fc-card:not(.empty) {
    border: 1px solid black;
    background: white;
}
fc-card.empty {
    border: 1px solid white;
}

.top-row {
    display: flex;
    flex-direction: row;
}
.cascades {
    display: flex;
    flex-direction: column;
    @media (min-width: 768px) {
        flex-direction: row;
    }
}

.top-row {
    margin-bottom: 5px;
}

fc-card-pile {
    display: flex;
    flex-direction: row;
    @media (min-width: 768px) {
        flex-direction: column;
    }
    margin-left: 2px;
    margin-right: 2px;
    width: 100%;
    overflow: hidden;
}
fc-card-pile > *:not(:first-child) {
    margin-left: max(calc(-0.75 * var(--card-w)), -1 * var(--card-w) + 1.5em);
    margin-top: 0;
    @media (min-width: 768px) {
        margin-top: max(
            calc(-0.75 * var(--card-h)),
            -1 * var(--card-h) + 1.5em
        );
        margin-left: 0;
    }
}

#menu {
    display: flex;
}
#menu > .left,
#menu > .right {
    display: flex;
}
#menu > .center {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}
.menu-icon {
    line-height: 100%;
    user-select: none;
    font-size: 2.5em;
    padding-top: 0.3em;
}
.menu-header {
    font-size: 2.5em;
}