:root {
    --game-tile-inset: 5px;
}

.game-slot-module {
    width: min(var(--board-width, 86vw), 430px);
}

.gameplay-module {
    width: 100%;
    aspect-ratio: 1 / 1;
    touch-action: none;
}

.gameplay-board {
    position: absolute;
    inset: 0;
}

.game-grid-ink {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.game-grid-line {
    fill: none;
    opacity: 0.68;
    stroke: var(--pen-blue);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.05;
    vector-effect: non-scaling-stroke;
}

.game-grid-defect {
    vector-effect: non-scaling-stroke;
}

.game-grid-defect--paper {
    fill: var(--paper);
    opacity: 0.56;
}

.game-grid-defect--dark {
    fill: rgba(26, 28, 32, 0.58);
    opacity: 0.42;
}

.game-grid-defect--blue {
    fill: var(--pen-blue);
    opacity: 0.32;
}

.game-tile {
    position: absolute;
    z-index: 1;
    background: transparent;
    line-height: 1;
    transform: rotate(var(--tile-rotation, 0deg));
    user-select: none;
    transition:
        left 0.11s ease-out,
        top 0.11s ease-out,
        opacity 0.12s ease-out,
        transform 0.16s ease-out;
}

.game-tile-number {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--tile-number-color, #253f8f);
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: var(--tile-font-size);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    opacity: 0.96;
    pointer-events: none;
    text-shadow:
        -1.2px -1.2px 0 color-mix(in srgb, var(--tile-number-color, #253f8f) 38%, #ffffff),
        -0.6px -0.6px 0 color-mix(in srgb, var(--tile-number-color, #253f8f) 48%, #ffffff),
        0.7px 0.7px 0 color-mix(in srgb, var(--tile-number-color, #253f8f) 62%, #101b54),
        1.2px 1.2px 0 rgba(92, 73, 47, 0.12);
    transform: translateY(1px);
}