/* =============================================================================
   NONOGRAMY / NONOGRAMS — game-specific styles
   Loaded together with games.css via $extraCss. Uses site design tokens.
   ============================================================================= */

/* Wrapper scrolls horizontally so the 15-column board never makes the page
   body scroll sideways. */
.no-grid-wrap {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 0.35rem;
}

/* The board is a CSS grid: first column = row clues (auto width), first row =
   column clues (auto height), the rest = play cells. */
.no-grid {
    display: grid;
    gap: 2px;
    width: -moz-max-content;
    width: max-content;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 0.5rem;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.no-grid[data-size="small"] {
    --no-cell: clamp(34px, 8vw, 48px);
    grid-template-columns: auto repeat(5, var(--no-cell));
}

.no-grid[data-size="medium"] {
    --no-cell: clamp(26px, 5vw, 36px);
    grid-template-columns: auto repeat(10, var(--no-cell));
}

.no-grid[data-size="large"] {
    --no-cell: clamp(20px, 3.4vw, 30px);
    grid-template-columns: auto repeat(15, var(--no-cell));
}

/* ---------------- Clue cells ---------------- */

.no-corner {
    background: transparent;
}

.no-cluecol {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1px;
    padding-bottom: 0.2rem;
    min-height: var(--no-cell);
}

.no-cluerow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    height: var(--no-cell);
    padding-right: 0.35rem;
}

.no-clue-num {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: calc(var(--no-cell) * 0.42);
    line-height: 1;
    color: var(--color-gray-700);
}

.no-clue-zero {
    color: var(--color-gray-400);
}

/* ---------------- Play cells ---------------- */

.no-cell {
    width: var(--no-cell);
    height: var(--no-cell);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-sm);
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: calc(var(--no-cell) * 0.5);
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: var(--transition-fast);
}

.no-cell:hover {
    background: var(--color-gray-200);
}

.no-cell:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
    z-index: 1;
}

.no-cell.is-fill {
    background: var(--color-gray-900);
    border-color: var(--color-gray-900);
}

.no-cell.is-fill:hover {
    background: var(--color-gray-800);
}

.no-cell.is-cross {
    background: var(--color-gray-100);
    color: var(--color-error);
}

/* ---------------- X-mode toggle ---------------- */

.no-x-toggle[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* ---------------- Stats modal: best times ---------------- */

.no-best-title {
    margin-top: 1rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.no-best-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    font-size: 0.95rem;
    color: var(--color-gray-600);
}

.no-best-list li {
    padding: 0.15rem 0;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 600px) {
    .no-grid {
        padding: 0.35rem;
        gap: 1px;
    }

    .no-grid[data-size="small"] {
        --no-cell: clamp(32px, calc((100vw - 6rem) / 5), 48px);
    }

    .no-grid[data-size="medium"] {
        --no-cell: clamp(24px, calc((100vw - 5rem) / 10), 36px);
    }

    .no-grid[data-size="large"] {
        --no-cell: 22px;
    }
}