/* Sudoku (Pages/Games/Sudoku, wwwroot/js/sudoku.js): the board is a grid of buttons, thick lines mark the boxes. */
.sudoku { max-width: 32rem; }

.sudoku-board {
    display: grid;
    margin: 1.25rem auto .75rem;
    width: min(calc(100% - 1.5rem), 30rem);
    aspect-ratio: 1;
    border: 3px solid #212529;
    border-radius: .5rem;
    overflow: hidden;
    /* White cells on a panel a little lighter than the theme, with a frame, so the board stays readable on a dark page. */
    background: #fff;
    box-shadow: 0 0 0 .75rem var(--game-panel);
    outline: 2px solid var(--game-frame);
    outline-offset: .75rem;
    user-select: none;
    -webkit-user-select: none;
}

.sd-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid #adb5bd;
    border-bottom: 1px solid #adb5bd;
    background: transparent;
    color: #212529;
    font-size: clamp(1.1rem, 6vw, 2rem);
    font-weight: 600;
    line-height: 1;
    touch-action: manipulation;
}

/* Thick lines between boxes (set by the script on the cells that start or end a box). */
.sd-box-right { border-right: 3px solid #212529; }
.sd-box-bottom { border-bottom: 3px solid #212529; }

.sd-given { background: #f1f3f5; font-weight: 800; }
.sd-peer { background: color-mix(in srgb, var(--bs-primary) 8%, transparent); }
.sd-same { background: color-mix(in srgb, var(--bs-primary) 22%, transparent); }
/* An inset shadow, not an outline: Bootstrap removes the outline of a button focused with the mouse. */
.sd-selected { background: color-mix(in srgb, var(--bs-primary) 38%, transparent); box-shadow: inset 0 0 0 3px var(--bs-primary); z-index: 1; }
.sd-user { color: var(--bs-primary); }
.sd-wrong { color: var(--bs-danger); background: color-mix(in srgb, var(--bs-danger) 14%, transparent); }
.sd-hinted { color: var(--bs-success); }

.sd-notes {
    position: absolute;
    inset: 2px;
    display: grid;
    font-size: clamp(.5rem, 2.2vw, .8rem);
    font-weight: 600;
    color: #6c757d;
    pointer-events: none;
}
.sd-notes span { display: flex; align-items: center; justify-content: center; }

.sudoku-pad {
    display: grid;
    grid-template-columns: repeat(var(--sd-digits, 4), 1fr);   /* one row: 4, 6 or 9 digits (set by the script) */
    gap: .4rem;
    margin-top: 1rem;
}
.sudoku-pad .btn {
    min-height: 3.4rem;
    padding: 0;
    border-radius: .9rem;
    border-width: 2px;
    font-size: 1.5rem;
    font-weight: 700;
    touch-action: manipulation;
}

.sudoku-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: .75rem;
}
.sudoku-tools .btn { touch-action: manipulation; }
.sudoku-tools .btn[aria-pressed="true"] { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }

@media (prefers-reduced-motion: no-preference) {
    .sd-cell { transition: background-color .12s; }
}