.sliding-board { --sliding-size: 4; display: grid; grid-template-columns: repeat(var(--sliding-size), minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 440px; margin: 20px auto; padding: 10px; border-radius: 16px; border: 1px solid #789cac; background: #12232e; touch-action: none; }
.sliding-board:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.games-main .sliding-tile { position: relative; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; min-width: 0; min-height: 0; width: 100%; padding: 0; border: 1px solid #54717c; border-radius: 10px; box-shadow: none; background: #182e3b; color: #f0f7fa; font: 800 clamp(1rem, 6vw, 2rem) var(--font-mono); line-height: 1; cursor: pointer; touch-action: none; transition: background-color .15s ease, border-color .15s ease; }
.games-main .sliding-tile:hover:not(:disabled) { border-color: #789cac; background: #214b58; }
.games-main .sliding-tile:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.games-main .sliding-tile:disabled { cursor: default; opacity: 1; color: #f0f7fa; }
.games-main .sliding-tile[data-correct="true"] { border: 2px solid #65dbea; background: #1f4a52; }
.sliding-mark { position: absolute; top: 3px; right: 6px; font: 800 clamp(.6rem, 2.4vw, .85rem) var(--font-mono); color: #65dbea; }
.sliding-hole { aspect-ratio: 1; min-width: 0; border: 1px dashed #3f5a66; border-radius: 10px; background: #0d1a22; }
@media (max-width: 540px) { .sliding-board { gap: 6px; padding: 8px; } }
@media (prefers-reduced-motion: reduce) { .games-main .sliding-tile { transition: none; } }