:root {
    --mask-zigzag:
        conic-gradient(from -135deg at right,
            #0000,
            #000 1deg 89deg,
            #0000 90deg) right/100% 20px repeat-y;
    --chart-height: 420px;
}

.toggle-buttons {
    font-family: var(--ff-primary);
    display: grid;
    grid-auto-flow: column;
}

.toggle-buttons button {
    font-weight: var(--fw-semi-bold);
    border: 1px var(--clr-default) solid;
    color: var(--clr-default);
    transition: all 0.2s linear;
}

.toggle-buttons button:hover {
    background-color: var(--clr-default);
    color: var(--clr-text-normal);
}

.toggle-buttons .selected-full {
    background-color: var(--clr-default);
    color: var(--clr-text-normal);
}

#wr-chart-wrapper {
    min-height: var(--chart-height);
}

#wr-game-buttons {
    --game-count: 19;
    /* --game-count: 13; */
    display: grid;
    grid-template-columns: repeat(var(--game-count), 1fr);
    grid-auto-flow: row;
    grid-gap: 16px;
    overflow: auto;
    white-space: nowrap;
    /* isolation: isolate; */
    overscroll-behavior: contain;
}

#wr-game-buttons::-webkit-scrollbar {
    height: 8px;
}

#wr-table-buttons {
    display: grid;
    grid-gap: 2px;
    white-space: nowrap;
    grid-auto-flow: column;
    border-collapse: collapse;
    outline: 2px solid var(--clr-background-table-contrast);
    border: 2px solid var(--clr-background-main);
}

.wr-shottype-buttons {
    font-family: var(--ff-primary);
    font-size: var(--fs-400);
    color: var(--clr-default);
    /* background-color: var(--clr-background-element); */
    padding-block: 0.25rem;
}

.all-wr-tables {
    margin: 0 auto;
}

.all-wr-tables>tbody>tr>*,
.wr-player-table>tbody>tr>* {
    text-align: center;
    padding-inline: 8px;
}

.all-wr-tables>tbody>tr>th,
.wr-player-table>tbody>tr>th {
    border-bottom: var(--clr-default) 1px solid;
    padding-bottom: 8px;
}

.legend-item {
    font-size: var(--fs-300);
    color: var(--clr-grey);
    margin: 0;
    padding: 0;
}

#legend-toggle-all {
    align-items: center;
    cursor: pointer;
    justify-content: center;
    display: grid;
    padding-top: 0.5em;
}

.toggle-buttons-large {
    border-width: 1px;
    border-style: solid;
    display: inline-block;
    height: 12px;
    margin-right: 10px;
    width: 40px;
}

.card-game {
    position: relative;
    min-height: 120px;
    aspect-ratio: 16 / 9;
}

.card-game:hover {
    filter: brightness(120%);
}

.card-bg-image {
    filter: grayscale(65%) brightness(0.8) blur(1px);
    background-position: center;
    background-size: 100%;
    height: 100%;
    width: 100%;
}

.card-centered-text {
    color: var(--clr-text-normal);
    font-size: var(--fs-900);
    padding-inline: 0.5em;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.card-zigzag-left {
    -webkit-mask: var(--mask-zigzag);
    mask: var(--mask-zigzag);
    width: 25%;
    position: absolute;
    top: 0;
    height: 100%;
}

.card-halftone-zigzag {
    -webkit-mask: var(--mask-zigzag);
    mask: var(--mask-zigzag);
    position: absolute;
    top: 0;
    height: 100%;
    width: 25%;
    --size: 0.5rem;
    --dotRadius: 90%;
    --mask: linear-gradient(to right, rgb(0 0 0), rgb(0 0 0 / 0.5));
    --dotsColor: 255 255 255;
    --bgSize: calc(var(--size) * 1.3);
    --bgPosition: calc(var(--bgSize) / 2);
    --stops: rgb(var(--dotsColor)) 3%, rgb(var(--dotsColor) / 0.15) calc(var(--dotRadius, 53%) * 0.95);
    --bg: radial-gradient(circle at center, var(--stops)), radial-gradient(circle at center, var(--stops));
    background: #000;
    filter: contrast(5) invert(0) opacity(0.15);
    mix-blend-mode: multiply;
}

.card-halftone::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--bg);
    background-size: var(--bgSize, 0.75rem) var(--bgSize, 0.75rem);
    background-repeat: round;
    background-position: 0 0, var(--bgPosition) var(--bgPosition);
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
}

.card-halftone-right {
    position: absolute;
    top: 0;
    height: 120px;
    width: 100%;
    --size: 0.3rem;
    --dotRadius: 150%;
    --mask: linear-gradient(to right, rgb(0 0 0), rgb(0 0 0 / 0.5));
    --dotsColor: 255 255 255;
    --bgSize: calc(var(--size) * 1.3);
    --bgPosition: calc(var(--bgSize) / 2);
    --stops: rgb(var(--dotsColor)) 3%, rgb(var(--dotsColor) / 0.15) calc(var(--dotRadius, 53%) * 0.95);
    --bg: radial-gradient(circle at center, var(--stops)), radial-gradient(circle at center, var(--stops));
    filter: contrast(1.6);
    mix-blend-mode: multiply;
}

#nameDropdown,
#filterInput {
    display: block;
    background-color: var(--clr-background-element);
    color: var(--clr-text-normal);
    padding: 4px;
    border: 1px var(--clr-default) solid;
    flex-grow: 1;
}

.input-wrapper {
    display: grid;
    width: calc(clamp(200px, 30vw, 600px));
    margin-inline: auto;
    justify-content: center;
}

.number-wrapper {
    display: flex;
    margin-bottom: 1rem;
}

output {
    border: 1px var(--clr-default) solid;
    padding-inline: 0.5rem;
    display: table-cell;
    vertical-align: middle;
    min-width: 4rem;
    text-align: center;
}

@media screen and (max-width: 700px) {

    .all-wr-tables>*>tr>*:nth-child(3),
    .wr-player-table>*>tr>*:nth-child(7) {
        display: none;
    }
}

@media screen and (max-width: 600px) {

    .all-wr-tables>*>tr>*:nth-child(2),
    .wr-player-table>*>tr>*:nth-child(8) {
        display: none;
    }
}

@media screen and (max-width: 500px) {

    .all-wr-tables>*>tr>*:nth-child(7),
    .wr-player-table>*>tr>*:nth-child(6),
    .wr-player-table>*>tr>*:nth-child(1),
    .all-wr-tables>*>tr>*:nth-child(1) {
        display: none;
    }

    .grid-6-ab {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important;
        grid-auto-flow: column !important;
    }

    .grid-6-abc {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(2, 1fr) !important
    }

    .grid-th08 {
        grid-template-columns: auto !important;
    }

    .grid-th09 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-th16 {
        grid-template-rows: repeat(8, 1fr) !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-flow: column !important;
    }

    .toggle-buttons {
        grid-auto-flow: row;
    }
}

@media screen and (max-width: 400px) {
    .all-wr-tables>*>tr>*:nth-child(1) {
        display: none;
    }
}