/* By default the browser adds padding and margin, this removes them */
html,
body {
    margin: 0;
    padding: 0;
}

* {
    /* Padding and borders should be in the element's box */
    box-sizing: border-box;
}

html {
    font-family: sans-serif;

    /*
    This took forever to get right.
    The page should never overflow off the screen, having to scroll in a game is undesirable.
    Without the dvh (e.g. vh) it will overflow off the screen when the mobile browser's address bar is visible.
    */
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    width: 100vw;

    /* Hide scrollbar */
    overflow: hidden;
    touch-action: none;
}

body {
    /* The body should take up all the screen space */
    height: 100%;
    width: 100%;

    max-height: 100%;
    max-width: 100%;

    /* Make the body a flex container with columns, mainly for the info text and the actual game */
    display: flex;
    flex-flow: column nowrap;
    gap: 0.5rem;
    padding: 0.5rem;
}

/* By default canvas refuse to scale with their parents */
canvas {
    /* Allow scaling below defined size */
    min-width: 0;
    min-height: 0;

    /* It can scale up to the parent container size */
    max-height: 100%;
    max-width: 100%;

    /* Make container use up the available space */
    width: 100%;
    height: 100%;

    /* The object-fit enforces the aspect ratio */
    object-fit: contain;
}

#header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    flex: 0 0 auto;
}

#header button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 0.4rem;
    border: none;
    color: white;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

#info {
    text-align: center;
    font-size: 0.9rem;
    flex: 1 1 auto;
}

#content {
    /* It is important to define the limits here, otherwise the children might overflow */
    min-height: 0;
    max-height: 100%;
    max-width: 100%;

    flex: 1 1 0;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;

    gap: 0.5rem;
}

#board {
    flex: 5 1 0;
    border-radius: 0.4rem;
}

#side-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    min-height: 1vmin;
    border-radius: 0.4rem;

    flex: 1 1 0;

    padding: 0.5rem;
    gap: 0.5rem;
}

.side-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: 0.9rem;

    flex: 1 1 0;

    /* Without this the #preview will overflow the side-item */
    max-width: 100%;
    max-height: 100%;

    /*
    They should try to fill the available space,
    this helps with alignment of text and items
    */
    width: 100%;
    height: 100%;

    justify-content: center;
}

.side-item-text {
    flex: 0 0 auto;
}

#score-value {
    text-align: center;
    font-size: 1.5rem;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;

    /* without this, the text does not center itself horizontally and vertically */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}

#preview {
    flex: 1 1 auto;
}

/* If there is enough width, the score/preview should be on the left of the board */
@media (min-width: 768px) {
    #content {
        flex-direction: row;
        align-items: stretch;
    }

    #side-bar {
        flex-direction: column;
        justify-content: flex-start;
    }
}