/* 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:has(.sudoku-board[data-n="16"]) { max-width: 36rem; }

.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; }
}

/* 16×16: smaller digits, a wider board and a two-row pad of 8 digits (1-9, A-G). */
.sudoku-board[data-n="16"] { width: min(calc(100% - 1.5rem), 34rem); border-radius: .35rem; }
.sudoku-board[data-n="16"] .sd-cell { font-size: clamp(.7rem, 3.4vw, 1.25rem); }
.sudoku-board[data-n="16"] .sd-notes { inset: 1px; font-size: clamp(.3rem, 1.1vw, .45rem); }
.sudoku-pad[style*="--sd-digits: 16"] { grid-template-columns: repeat(8, 1fr); }
.sudoku-pad[style*="--sd-digits: 16"] .btn { min-height: 2.9rem; font-size: 1.25rem; }

/* Binary sudoku and sumdoku (wwwroot/js/binary.js, sumdoku.js): the same board, without the thick lines of boxes. */
.sudoku-board[data-n="10"] .sd-cell { font-size: clamp(1rem, 5vw, 1.7rem); }
.sudoku-board[data-n="12"] .sd-cell { font-size: clamp(.9rem, 4.4vw, 1.5rem); }
.sudoku-pad[style*="--sd-digits: 2"] { max-width: 18rem; margin-left: auto; margin-right: auto; }

/* Sumdoku (wwwroot/js/sumdoku.js): cages are outlined with thick lines, the sum sits in the corner of the first cell of a cage. */
.sumdoku-board .sd-cell { border-right: 1px dotted #adb5bd; border-bottom: 1px dotted #adb5bd; }
.sumdoku-board .sm-r { border-right: 3px solid #212529; }
.sumdoku-board .sm-b { border-bottom: 3px solid #212529; }
.sm-sum {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: clamp(.6rem, 2.8vw, .85rem);
    font-weight: 700;
    line-height: 1;
    color: #495057;
    pointer-events: none;
}
.sumdoku-board .sd-notes { inset: 1rem 2px 2px 2px; }
.sm-cage-peer { background: color-mix(in srgb, var(--bs-warning) 16%, transparent); }