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

#wr-difficulty-buttons {
    font-family: var(--ff-primary);
    display: grid;
    grid-auto-flow: column;
}

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

#wr-difficulty-buttons button:hover {
    background-color: var(--clr-default);
    color: var(--clr-text-normal);
}

#wr-difficulty-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;
    display: grid;
    grid-template-columns: repeat(var(--game-count), 1fr);
    grid-auto-flow: row;
    grid-gap: 16px;
    overflow: auto;
    white-space: nowrap;
    isolation: isolate;
}

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

#wr-table-buttons {
    display: grid;
    grid-gap: 10px;
    white-space: nowrap;
    grid-auto-flow: column;
}

.wr-shottype-buttons {
    font-family: var(--ff-primary);
    font-size: var(--fs-400);
    color: var(--clr-default);
}

.all-wr-tables {
    border-top: solid transparent 8px;
    margin: 0 auto;
}

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

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

.all-wr-tables > tbody > tr:nth-child(2) > * {
    padding-top: 8px;
}

.legend-item {
    font-size: var(--fs-300);
}

.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);
    width: 25%;
    position: absolute;
    top: 0;
    height: 100%;
}

.card-halftone-zigzag {
    -webkit-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);
}

.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;
}

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

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

@media screen and (max-width: 500px) {
    .all-wr-tables > * > tr > *:nth-child(7) {
        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;
    }
    #wr-difficulty-buttons {
        grid-auto-flow: row;
    }
}

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