: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.15s cubic-bezier(0.25, 1.15, 0.4, 1),
        top 0.15s cubic-bezier(0.25, 1.15, 0.4, 1),
        opacity 0.15s ease-out,
        transform 0.16s ease-out;
}

/* 2048 uses a slightly springier tile response than the shared default. */
.paper-tile-motion-appear {
    animation: tile-spawn-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.paper-tile-motion-emphasis {
    animation: tile-merge-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    z-index: 2;
}

@keyframes tile-spawn-pop {
    0% { opacity: 0; transform: rotate(calc(var(--tile-rotation, 0deg) - 5deg)) scale(0.3); }
    100% { opacity: 1; transform: rotate(var(--tile-rotation, 0deg)) scale(1); }
}

@keyframes tile-merge-pop {
    0% { transform: rotate(var(--tile-rotation, 0deg)) scale(1); }
    50% { transform: rotate(calc(var(--tile-rotation, 0deg) + 2deg)) scale(1.15); }
    100% { transform: rotate(var(--tile-rotation, 0deg)) scale(1); }
}

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