canvas, img, .played-hidden .sprite, .hand-top .sprite, .table-background {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}
:root {
    --card-width: 15vmin;
    --card-height: 21vmin;
}

@font-face {
    font-family: 'Kiwisoda';
    src: url('../fonts/Kiwisoda.ttf') format('truetype');
}

.kiwi-font {
    font-family: 'Kiwisoda', sans-serif;
    font-size: 20px;
    color: #2a202a;
}

.hand {
    gap: 4px;
    position: fixed;
    --hand-offset-y: 4vmin;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: nowrap;

    width: 100%;
    max-width: 90vw;
}

.hand-bottom {
    bottom: var(--hand-offset-y);
}

.hand-top {
    top: var(--hand-offset-y);
    pointer-events: none;
    user-select: none;
}

.hand-top .sprite img {
    visibility: hidden;
}

.hand-top .sprite {
    background-image: url('/static/sprites/card_down.png');
    background-size: cover;
}


.sprite {
    --dx: 0px;
    --dy: 0px;
    --scale: 1;
    --tilt: 0deg;
    --offset-y: 0px;
    --hover-y: 0px;

    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    flex: 0 0 var(--card-width);

    transform:
            translate(var(--dx), var(--dy))
            translateY(var(--offset-y))
            translateY(var(--hover-y))
            scale(var(--scale))
            rotate(var(--tilt));

    transition: transform 0.15s ease;
    cursor:grab;

    will-change: transform;
    backface-visibility: hidden;

    -webkit-user-drag: none;
    user-select: none;
}

.sprite:hover {
    z-index: 100;
    --hover-y: -25px;
    --scale: 1.05;
}

.sprite img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.sprite.grabbing {
    transition: none;
    cursor: grabbing;
}

.sprite.selected {
    --offset-y: -15px;
    --scale: 2.15;
}

.sprite.played {
    cursor: default;
    pointer-events: none;
}

.played-area {
    position: fixed;
    --area-offset-x: 9.7vmin;
    --area-offset-y: 28vmin;
    left: 50%;
    transform: translateX(-50%);

    min-height: var(--card-height);
    min-width: var(--card-width);

    margin-left: calc(var(--side, 1) * var(--row, 1) * var(--area-offset-x));
}

.played-open   { --side: -1; }
.played-hidden { --side: 1; }

.played-bottom {
    bottom: var(--area-offset-y);
    --row: 1;
}

.played-top {
    top: var(--area-offset-y);
    --row: -1;
}

.played-hidden .sprite img {
    visibility: hidden;
}

.played-hidden .sprite {
    background-image: url('/static/sprites/card_down.png');
    background-size: cover;
}

.end-turn {
    position: fixed;
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 0, 255, 0.5);
}

.table-background {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 50vw;
    height: 100vh;

    background-image: url('/static/sprites/table.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    z-index: -1;
}

.stats {
    position: fixed;
    left: 50%;
    z-index: 2;
    --stats-offset-y: 31vh;
    --stats-offset-x: 17vw;

    transform: translate(calc(-50% + (var(--side, 1) * var(--stats-offset-x))), var(--y-shift, 0%));
}

.stats .kiwi-font {
    font-size: 60px;
    color: #d9d3d9;
}

.stats-bottom {
    bottom: var(--stats-offset-y);
    --side: -1;
    --y-shift: 50%;
}

.stats-top {
    top: var(--stats-offset-y);
    --side: 1;
    --y-shift: -44%;
}

.round {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-19vw, -50%);
}

.round .kiwi-font {
    font-size: 42px;
    color: #d9d3d9;
}

.end-button {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(12.8vw, -50%);
    z-index: 10;
}

.custom-btn {
    transition: all 0.1s ease;
}

.custom-btn .kiwi-font {
    font-size: 42px;
    color: #d9d3d9;
}

.custom-btn:hover {
    transform: translateY(-3px);
}

.custom-btn:hover .kiwi-font {
    color: #ffdb4d;
}

.custom-btn:active {
    transform: translateY(2px);
}