:root {
    --ng-cell: 26px;
    --ng-gap: 1px;
    --ng-clue: 22px;
}

@media (max-width: 900px) {
    :root {
        --ng-cell: 24px;
    }
}

@media (max-width: 420px) {
    :root {
        --ng-cell: 22px;
    }
}

.nonogram-mount {
    width: max-content;
    max-width: 100%;
    overflow: auto;
    padding: 8px;
    /* mobile scrolling friendly */
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

/* Board grid = top clues row + left clues col + cells */
.ng-board {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
}

/* Left row clues */
.ng-rowclues {
    display: grid;
    gap: var(--ng-gap);
    justify-items: end;
    padding-top: calc(var(--ng-clue) + 6px);
}

.ng-rowclue {
    height: var(--ng-cell);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-right: 6px;
    min-width: 90px;
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
}

/* Top column clues */
.ng-colclues {
    display: grid;
    gap: var(--ng-gap);
    align-items: end;
}

.ng-colclue {
    width: var(--ng-cell);
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    padding-bottom: 6px;
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
}

/* Cells grid */
.ng-cells {
    display: grid;
    gap: var(--ng-gap);
    background: var(--board-bg);
    border: 1px solid var(--board-border);
    border-radius: 18px;
    padding: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

html.light .ng-cells {
    box-shadow: inset 0 0 0 1px rgba(10,16,32,0.03);
}

.ng-cell {
    width: var(--ng-cell);
    height: var(--ng-cell);
    border-radius: 10px;
    border: 1px solid var(--cell-border);
    background: var(--cell-bg);
    cursor: pointer;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    .ng-cell:hover {
        box-shadow: 0 0 0 4px rgba(59,130,246,0.10);
    }

    .ng-cell.filled {
        background: rgba(34,197,94,0.18);
        border-color: rgba(34,197,94,0.45);
    }

    .ng-cell.x::after {
        content: "×";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-weight: 900;
        font-size: 18px;
        color: rgba(239,68,68,0.75);
    }

    .ng-cell.wrong {
        background: rgba(239,68,68,0.14);
        border-color: rgba(239,68,68,0.45);
    }

    /* thicker separators each 5 cells */
    .ng-cell.sep-r {
        box-shadow: 6px 0 0 0 rgba(255,255,255,0.05);
    }

    .ng-cell.sep-b {
        box-shadow: 0 6px 0 0 rgba(255,255,255,0.05);
    }

html.light .ng-cell.sep-r {
    box-shadow: 6px 0 0 0 rgba(10,16,32,0.06);
}

html.light .ng-cell.sep-b {
    box-shadow: 0 6px 0 0 rgba(10,16,32,0.06);
}

/* Mode bar uses existing mobile-keypad styling from site.css */
.nonogram-modebar {
    margin-top: 12px;
}

    .nonogram-modebar .key.active {
        box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
        border-color: rgba(34,197,94,0.45);
    }