.game-card__art--reversi {
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.5), transparent 27%),
        color-mix(in srgb, var(--lime) 32%, var(--canvas));
}

.game-card__art--reversi::after {
    border-color: rgba(73, 103, 214, 0.075);
}

.reversi-card-preview {
    position: relative;
    z-index: 1;
    width: 122px;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    border: 5px solid var(--ink);
    border-radius: 17px;
    background: color-mix(in srgb, var(--lime) 70%, var(--canvas));
    box-shadow: 0 14px 28px rgba(31, 37, 34, 0.2);
    transform: rotate(3deg);
}

.reversi-card-preview > span {
    position: relative;
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(31, 37, 34, 0.23);
    border-bottom: 1px solid rgba(31, 37, 34, 0.23);
}

.reversi-card-preview > span:nth-child(4n) {
    border-right: 0;
}

.reversi-card-preview > span:nth-last-child(-n + 4) {
    border-bottom: 0;
}

.reversi-card-preview > span[data-disc]::after {
    content: "";
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 3px 5px rgba(31, 37, 34, 0.25);
}

.reversi-card-preview > span[data-disc="dark"]::after {
    background: var(--ink);
}

.reversi-card-preview > span[data-disc="light"]::after {
    border: 2px solid var(--ink);
    background: var(--canvas);
}

.reversi-card-preview > span[data-move]::after {
    content: "";
    width: 25%;
    aspect-ratio: 1;
    border: 2px solid var(--blue);
    border-radius: 50%;
}