html {
    height: 100%;
    margin: 0;
}

body {
    background: #f5f7f5;
    display: flex;
    flex-direction: column;
    font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
    font-size: 0.8em;
    height: 100%;
    margin: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0 10px 10px;
    touch-action: manipulation;
}

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

:root {
    --card-width: clamp(72px, calc((100vw - 140px) / 8), 108px);
    --cell-border: 3px;
    --cell-gap: 3px;
    --column-gap-top: clamp(20px, 3vh, 32px);
    --stack-gap: 25px;
    --table-border: 5px;
    --table-padding: 10px;
}

#title {
    flex: 0 0 auto;
}

h1 {
    font-size: 2.5em;
    margin: 0.45em 0em 0.2em 0em;
    text-align: center;
}

h2 {
    margin: 0px 0px 10px 0px;
    text-align: center;
}

p {
    margin: 0.5em 0.5em 0em 0.5em;
}

ul {
    margin: 0px;
}

button {
    font-size: 16px;
    min-height: 36px;
}

.table-scroll {
    display: flex;
    flex: 1 1 0;
    height: 0;
    margin: 0 auto;
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.card {
    height: auto;
    left: 0px;
    position: absolute;
    top: 0px;
    touch-action: none;
    width: var(--card-width);
}

.card img {
    display: block;
    height: auto;
    width: 100%;
}

.column {
    aspect-ratio: 3 / 4;
    border-color: #58FA58;
    border-radius: 3px 3px 0px 0px;
    border-style: solid;
    border-width: var(--cell-border) var(--cell-border) 0px var(--cell-border);
    float: left;
    height: auto;
    justify-self: center;
    margin: var(--column-gap-top) auto 0px;
    position: relative;
    width: var(--card-width);
    -moz-border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
}

.free {
    float: left;
}

.highlight {
    box-shadow: 0px 0px 8px #f00;
    -moz-box-shadow: 0px 0px 8px #f00;
    -webkit-box-shadow: 0px 0px 8px #f00;
}

.suit {
    float: right;
}

.free, .suit {
    aspect-ratio: 3 / 4;
    border-color: #58FA58;
    border-radius: 3px;
    border-style: solid;
    border-width: var(--cell-border);
    height: auto;
    justify-self: center;
    margin: 0 auto;
    width: var(--card-width);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

#table {
    background-color: #04B404;
    border-color: black;
    border-radius: 15px;
    border-style: solid;
    border-width: var(--table-border);
    box-shadow: none;
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    min-height: 100%;
    min-width: 0;
    overflow-y: auto;
    padding: var(--table-padding);
    position: relative;
    width: 100%;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -webkit-overflow-scrolling: touch;
}

#table::after {
    clear: both;
    content: "";
    display: block;
}

@media (max-width: 800px) {
    :root {
        --card-width: clamp(31px, calc((100vw - 72px) / 8), 72px);
        --cell-border: clamp(1px, 0.45vw, 3px);
        --cell-gap: clamp(1px, 0.45vw, 3px);
        --column-gap-top: clamp(18px, 7vw, 50px);
        --stack-gap: clamp(10px, 3.2vw, 25px);
        --table-border: clamp(2px, 0.9vw, 5px);
        --table-padding: clamp(4px, 1.4vw, 10px);
    }

    body {
        padding: 0 6px 12px;
    }

    h1 {
        font-size: 1.8rem;
        line-height: 1.1;
        margin: 0.45em 0em 0.25em 0em;
    }

    h2 {
        display: flex;
        gap: 14px;
        justify-content: center;
        margin-bottom: 8px;
    }

    button {
        flex: 0 1 auto;
        border-radius: 6px;
        min-height: 48px;
        min-width: 108px;
        padding: 10px 14px;
    }

    .table-scroll {
        overflow-x: hidden;
    }

    #table {
        border-radius: 8px;
        height: 100%;
        min-height: 100%;
    }

    .ui-dialog {
        max-width: calc(100vw - 24px) !important;
    }
}

@media (max-width: 380px) {
    :root {
        --card-width: clamp(28px, calc((100vw - 68px) / 8), 36px);
        --stack-gap: clamp(9px, 3vw, 13px);
    }

    button {
        min-width: 102px;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --column-gap-top: 12px;
    }

    body {
        padding: 0 6px 6px;
    }

    #title {
        align-items: center;
        display: flex;
        flex: 0 0 56px;
        gap: 14px;
        justify-content: center;
    }

    h1 {
        font-size: 1.25rem;
        margin: 0;
    }

    h2 {
        gap: 0;
        margin: 0;
        min-width: 228px;
    }

    h2 button + button {
        margin-left: 14px;
    }

    button {
        min-height: 44px;
        min-width: 100px;
        padding: 7px 12px;
    }
}