/* Papan kayu 3x3. Posisi tiap kotak dihitung dari --r dan --c (diset lewat JS). */

.board {
    width: min(100%, var(--stage-width));
    aspect-ratio: 1;
    padding: clamp(0.5rem, 2.4vw, 0.9rem);
    border-radius: var(--radius-l);
    background: var(--wood-frame);
    box-shadow: 0 0.3rem 0 var(--wood-frame-lo), 0 1.25rem 2.25rem oklch(20% 0.1 262 / 0.4);
}

.board__grid {
    --gap: clamp(0.25rem, 1.3vw, 0.45rem);
    --tile-radius: 0.4rem;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--radius-l) - 0.4rem);
    background: var(--wood-hole);
    box-shadow: inset 0 0.2rem 0.5rem oklch(15% 0.04 50 / 0.55);
    transition: --gap 0.45s cubic-bezier(0.3, 0.7, 0.2, 1), background-color 0.45s;
}

.tile {
    position: absolute;
    left: 0;
    top: 0;
    width: calc((100% - 2 * var(--gap)) / 3);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: var(--tile-radius);
    overflow: hidden;
    background: var(--wood);
    box-shadow: inset 0 0.125rem 0 var(--wood-hi), inset 0 -0.25rem 0 var(--wood-lo);
    transform: translate(
        calc(var(--c, 0) * (100% + var(--gap))),
        calc(var(--r, 0) * (100% + var(--gap)))
    );
    transition:
        transform 0.17s cubic-bezier(0.3, 0.7, 0.2, 1),
        border-radius 0.45s,
        box-shadow 0.45s,
        opacity 0.35s;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.tile[data-movable] {
    cursor: pointer;
}

.tile[data-movable]:hover {
    filter: brightness(1.07);
}

.tile[data-movable]:active {
    filter: brightness(0.95);
}

.tile svg {
    display: block;
    width: 100%;
    height: 100%;
}

.glyph {
    font-family: var(--font-aksara);
    font-weight: 600;
    fill: var(--wood-ink);
    user-select: none;
}

.glyph--highlight {
    fill: var(--wood-hi);
}

/* Kotak kosong: transparan sampai papan selesai. */
.tile--hole {
    opacity: 0;
    pointer-events: none;
}

/* Selesai: celah menutup, sudut kotak rata, aksara tampil utuh di satu papan kayu. */
/* Latar ikut warna kayu supaya tidak ada garis tipis (seam) antar kotak. */
.board.is-solved .board__grid {
    --gap: 0rem;
    --tile-radius: 0;
    overflow: hidden;
    background: var(--wood);
}

/* Kotak saling tumpang 1px supaya tidak ada garis sambungan saat papan menyatu. */
.board.is-solved .tile {
    width: calc((100% - 2 * var(--gap)) / 3 + 1px);
    margin: -0.5px 0 0 -0.5px;
    box-shadow: none;
    transition: border-radius 0.45s, box-shadow 0.45s, opacity 0.35s;
}

.board.is-solved .tile--hole {
    opacity: 1;
}

.board.is-solved .glyph--highlight {
    opacity: 0.8;
}