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

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

.sp-grid {
    --sp-cell: 32px;
    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: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.sp-grid[data-cols="9"] {
    --sp-cell: clamp(32px, 6vw, 44px);
    grid-template-columns: repeat(9, var(--sp-cell));
}

.sp-grid[data-cols="16"] {
    --sp-cell: clamp(30px, 4.5vw, 34px);
    grid-template-columns: repeat(16, var(--sp-cell));
}

.sp-grid[data-cols="30"] {
    --sp-cell: 28px;
    grid-template-columns: repeat(30, var(--sp-cell));
}

/* ---------------- Cells ---------------- */

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

.sp-cell:hover {
    background: var(--color-gray-400);
}

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

.sp-cell.is-revealed {
    background: var(--color-gray-100);
    cursor: default;
}

.sp-cell.is-revealed:hover {
    background: var(--color-gray-100);
}

/* revealed numbers keep the pointer cursor — chording is a click action */
.sp-cell.is-revealed[data-n] {
    cursor: pointer;
}

/* Classic minesweeper number colours (deliberate literals, not tokens). */
.sp-cell[data-n="1"] { color: #0000ff; }
.sp-cell[data-n="2"] { color: #008000; }
.sp-cell[data-n="3"] { color: #ff0000; }
.sp-cell[data-n="4"] { color: #000080; }
.sp-cell[data-n="5"] { color: #800000; }
.sp-cell[data-n="6"] { color: #008080; }
.sp-cell[data-n="7"] { color: #000000; }
.sp-cell[data-n="8"] { color: #808080; }

.sp-cell.is-flag {
    font-size: calc(var(--sp-cell) * 0.5);
}

.sp-cell.is-mine {
    background: var(--color-gray-200);
    cursor: default;
}

.sp-cell.is-boom {
    background: var(--color-error);
}

.sp-cell.is-wrong {
    background: var(--color-error-bg);
    color: var(--color-error);
    cursor: default;
}

/* ---------------- Flag-mode toggle ---------------- */

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

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

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

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

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

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

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

    /* Easy and medium keep a >=30px touch target and fit the viewport where
       possible; anything wider scrolls inside .sp-grid-wrap. */
    .sp-grid[data-cols="9"] {
        --sp-cell: clamp(30px, calc((100vw - 2.5rem) / 9), 44px);
    }

    .sp-grid[data-cols="16"] {
        --sp-cell: clamp(30px, calc((100vw - 2.5rem) / 16), 34px);
    }

    .sp-grid[data-cols="30"] {
        --sp-cell: 30px;
    }
}