/* =============================================================================
   Sudoku — Logic Notebook
   style.css  (local overrides; shared shell in logic-notebook.css)
   ============================================================================= */

/* ── Board wrapper + SVG overlay ───────────────────────────────────────────── */
/* The wrapper is position:relative so the SVG ink overlay is NOT a grid child. */
/* Tiles sit on notebook paper — no background, no border on the board itself.  */
.sudoku-board-wrap {
    position: relative;
    width: min(88vw, 420px);
    margin: 0 auto;
    /* Hair-line separator at the bottom: like a ruled-paper line              */
}

.sudoku-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;                   /* air between boxes — also sets SVG line position */
    width: 100%;
    aspect-ratio: 1 / 1;
    touch-action: none;
    user-select: none;
}


/* Each 3×3 box of tiles */
.sudoku-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
}

/* ── Cell ───────────────────────────────────────────────────────────────────── */
.sudoku-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    overflow: visible;           /* allow jitter to overflow slightly */
    min-width: 0;
    min-height: 0;
}
.sudoku-cell--given { cursor: default; }

/* Paper tile SVG — rotated slightly via per-cell jitter */
.sudoku-tile-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(var(--tile-rotation, 0deg));
    transition: transform 0.12s ease-out;
}

/* ── Selection / highlight overlay ─────────────────────────────────────────── */
/* Sits above tile (z:1), below digit (z:2). No error tint — tile colour owns identity. */
.sudoku-cell-overlay {
    position: absolute;
    inset: -1px;
    pointer-events: none;
    z-index: 1;
    border-radius: 2px;
    transition: background 0.08s;
}
.sudoku-cell--selected  .sudoku-cell-overlay { background: rgba(37, 63, 143, 0.22); }

/* ── Error indicator — coral dot; purple on warm (red/pink) tiles ─────────── */
/* Uses ::after + CSS custom property --error-dot set per-cell by JS            */
.sudoku-cell--error::after {
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 22%;
    height: 22%;
    max-width: 8px;
    max-height: 8px;
    background: var(--error-dot, rgba(221, 82, 67, 0.85));
    border-radius: 50%;
    content: '';
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0.5px 0.5px 0 rgba(80, 30, 10, 0.15);
}

/* ── Digit ──────────────────────────────────────────────────────────────────── */
/* Comic Sans — same as 2048 tile numbers */
.sudoku-cell-digit {
    position: relative;
    z-index: 2;
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: clamp(11px, 3.6vw, 24px);
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
}

/* ── Candidate notes ────────────────────────────────────────────────────────── */
.sudoku-notes-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 90%;
    height: 90%;
    pointer-events: none;
}
.sudoku-note-digit {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: clamp(4px, 1.3vw, 8px);
    color: #253f8f;
    line-height: 1;
}
.sudoku-note-digit--empty { visibility: hidden; }

/* ── Number pad area ────────────────────────────────────────────────── */
/* numpad-area sits inside game-screen-sheet, above the controls sticker bar  */
#numpad-area {
    display: flex;
    justify-content: center;
    padding-top: 14px;
    margin-top: 6px;
}
.sudoku-numpad {
    width: min(88vw, 420px);
    margin: 0;
}
.sudoku-numpad-row {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: nowrap;
}

.sudoku-numpad-btn {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    max-width: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(var(--tile-rotation, 0deg));
}
.sudoku-numpad-btn:active { transform: rotate(var(--tile-rotation, 0deg)) translateY(1px); }

.numpad-tile-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.numpad-digit {
    position: relative;
    z-index: 1;
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: clamp(12px, 3.8vw, 20px);
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
}
.numpad-digit--clear {
    color: #6b5d4f;
    font-size: clamp(10px, 3.2vw, 17px);
}

/* ── Desktop tweaks (minimal — mobile is canonical) ─────────────────────────── */
@media (min-width: 600px) {
    .sudoku-board  { width: min(60vw, 420px); }
    .sudoku-numpad { width: min(60vw, 420px); }
    .sudoku-numpad-btn { max-width: 52px; }
    .sudoku-cell-digit { font-size: clamp(16px, 2.8vw, 26px); }
}
@media (min-width: 900px) {
    .sudoku-board  { width: 400px; }
    .sudoku-numpad { width: 400px; }
}