/* public/css/sudoku.css — public-facing Sudoku styling.
 * CSS Grid for the 9x9 board (responsive), thick lines for 3x3 boxes,
 * cell highlights for the active cell / peer cells / same-digit cells,
 * pencil-mark 3x3 candidate grid inside empty cells. Dark-theme aware
 * via the existing CSS vars; like the crossword we keep the grid
 * black-and-white in dark mode (newspaper look), only the status tints
 * adjust.
 */

.sd-puzzle { margin: 16px 0; }

/* ===== Controls (timer / tokens / buttons) ================================= */

.sd-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    background: var(--background-alt, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 14px;
}
.sd-status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
}
.sd-spacer { flex: 1 1 auto; }
.sd-difficulty-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.sd-diff-easy   { background: #dcfce7; color: #065f46; }
.sd-diff-medium { background: #fef3c7; color: #92400e; }
.sd-diff-hard   { background: #fee2e2; color: #991b1b; }
.sd-diff-expert { background: #ede9fe; color: #5b21b6; }

.sd-timer {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color, #111827);
}
.sd-tokens-badge {
    padding: 4px 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px;
    font-size: 13px;
}
.sd-tokens-badge strong { color: var(--primary-color, #2563eb); }

.sd-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.sd-control-row button {
    padding: 6px 12px;
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--card-bg, #fff);
    color: var(--text-color, #374151);
    border-radius: 4px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.sd-control-row button:hover:not(:disabled) { border-color: var(--primary-color, #2563eb); }
.sd-control-row button[disabled] { opacity: 0.45; cursor: not-allowed; }
.sd-control-row button small { color: var(--text-light, #6b7280); font-weight: 400; }
.sd-btn-pencil[aria-pressed="true"] {
    background: var(--primary-color, #2563eb);
    color: #fff;
    border-color: var(--primary-color, #2563eb);
    font-weight: 600;
}
.sd-btn-help {
    background: var(--primary-color, #2563eb);
    color: #fff;
    border-color: var(--primary-color, #2563eb);
    font-weight: 600;
}
.sd-btn-help:hover { background: var(--secondary-color, #1d4ed8); }

.sd-result {
    padding: 14px 18px;
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    font-size: 15px;
    margin-top: 6px;
}
[data-theme="dark"] .sd-result { background: rgba(16, 185, 129, 0.12); color: #a7f3d0; border-color: rgba(16, 185, 129, 0.35); }
.sd-result[data-state="fail"]   { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* ===== The 9x9 grid itself ================================================ */

.sd-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0;
    width: min(540px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    background: #fff;
    border: 2px solid #111827;
    user-select: none;
}
.sd-cell {
    position: relative;
    background: #fff;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 4vw, 24px);
    font-weight: 500;
    color: #2563eb;                 /* user-entered digits blue */
    border-right: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
    cursor: pointer;
    outline: none;
    transition: background 80ms ease;
}
.sd-cell-given {
    color: #111827;                 /* givens black */
    font-weight: 700;
    cursor: default;
    background: #fafafa;
}
/* Thick borders between 3x3 boxes */
.sd-grid > .sd-cell:nth-child(3n)  { border-right-width: 2px; border-right-color: #111827; }
.sd-grid > .sd-cell:nth-child(n+19):nth-child(-n+27),
.sd-grid > .sd-cell:nth-child(n+46):nth-child(-n+54) { border-bottom-width: 2px; border-bottom-color: #111827; }
/* Remove the extra border on the final column / row (outer border handles it) */
.sd-grid > .sd-cell:nth-child(9n)  { border-right: 0; }
.sd-grid > .sd-cell:nth-child(n+73) { border-bottom: 0; }

/* Highlight states — applied by JS */
.sd-cell.sd-cell-peer       { background: #f0f9ff; }  /* same row / col / box as selected */
.sd-cell.sd-cell-same-digit { background: #dbeafe; }  /* any cell with the same entered digit */
.sd-cell.sd-cell-active     { background: #bfdbfe; }  /* the selected cell itself */
.sd-cell.sd-cell-error      { background: #fecaca; color: #991b1b; }
.sd-cell.sd-cell-revealed   { background: #fde68a; color: #92400e; }
.sd-cell.sd-cell-correct    { background: #a7f3d0; }  /* post-check feedback */

/* Pencil-mark (candidate) 3x3 mini-grid inside an empty cell */
.sd-cell-pencils {
    position: absolute;
    inset: 2px;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    font-size: clamp(7px, 1.3vw, 10px);
    color: #6b7280;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}
.sd-cell.sd-has-pencils .sd-cell-pencils { display: grid; }
.sd-cell.sd-has-pencils .sd-cell-value   { display: none; }
.sd-cell-pencils > span {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Number pad (mobile-friendly) ======================================= */

.sd-numpad {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4px;
    width: min(540px, 100%);
    margin: 12px auto 0;
}
.sd-numpad-btn {
    padding: 12px 0;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--card-bg, #fff);
    color: var(--text-color, #111827);
    border-radius: 6px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 80ms ease, border-color 80ms ease;
}
.sd-numpad-btn:hover { background: #eff6ff; border-color: #2563eb; }
.sd-numpad-btn:active { background: #dbeafe; }
.sd-numpad-clear { color: #991b1b; }

/* ===== Help menu popover ================================================== */

.sd-help-menu {
    position: absolute;
    z-index: 900;
    min-width: 240px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15));
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sd-help-menu button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: var(--text-color, #111827);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}
.sd-help-menu button:hover:not(:disabled) { background: var(--card-hover-bg, #eff6ff); }
.sd-help-menu button:disabled { opacity: 0.45; cursor: not-allowed; }
.sd-help-menu button small { color: var(--text-light, #6b7280); font-weight: 400; }

/* ===== Sudoku list on hub page (shared with sort-toggle) ================= */

.sudoku-list { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.sudoku-list-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.sudoku-list-item:hover { border-color: var(--primary-color, #2563eb); transform: translateY(-1px); box-shadow: var(--shadow-md, 0 4px 10px rgba(0,0,0,0.08)); }
.sudoku-list-title { display: flex; flex-direction: column; text-decoration: none; color: var(--primary-color, #2563eb); flex: 1 1 auto; }
.sudoku-list-title:hover strong { text-decoration: underline; }
.sudoku-list-title strong { font-size: 15px; }
.sudoku-list-title small { font-size: 11px; color: var(--text-light, #6b7280); margin-top: 4px; font-weight: 400; display: inline-flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.sudoku-list-diff {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.sudoku-list-answers {
    font-size: 12px;
    color: var(--text-light, #6b7280);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px;
    white-space: nowrap;
    margin-left: 8px;
}
.sudoku-list-answers::before { content: "→ "; }
.sudoku-list-answers:hover { color: var(--primary-color, #2563eb); border-color: var(--primary-color, #2563eb); }

/* Puzzle of the day card */
.sudoku-daily {
    padding: 14px 18px;
    border-left: 4px solid var(--primary-color, #2563eb);
    background: var(--background-alt, #f9fafb);
    border-radius: 6px;
    margin: 16px 0;
}
.sudoku-daily-h { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light, #6b7280); font-weight: 700; }
.sudoku-daily-link { text-decoration: none; color: var(--primary-color, #2563eb); font-size: 16px; }
.sudoku-daily-link small { color: var(--text-light, #6b7280); margin-left: 6px; }

/* ===== Dark theme — keep the grid black & white like a newspaper ========== */

[data-theme="dark"] .sd-grid { border-color: #000; }
[data-theme="dark"] .sd-cell { background: #fff; color: #2563eb; border-right-color: #d1d5db; border-bottom-color: #d1d5db; }
[data-theme="dark"] .sd-cell-given { background: #fafafa; color: #111827; }
[data-theme="dark"] .sd-grid > .sd-cell:nth-child(3n) { border-right-color: #000; }
[data-theme="dark"] .sd-grid > .sd-cell:nth-child(n+19):nth-child(-n+27),
[data-theme="dark"] .sd-grid > .sd-cell:nth-child(n+46):nth-child(-n+54) { border-bottom-color: #000; }
[data-theme="dark"] .sd-cell.sd-cell-peer       { background: #dbeafe; }
[data-theme="dark"] .sd-cell.sd-cell-same-digit { background: #bfdbfe; }
[data-theme="dark"] .sd-cell.sd-cell-active     { background: #93c5fd; }
[data-theme="dark"] .sd-cell.sd-cell-error      { background: #fecaca; color: #991b1b; }
[data-theme="dark"] .sd-cell.sd-cell-revealed   { background: #fde68a; color: #92400e; }
[data-theme="dark"] .sd-cell.sd-cell-correct    { background: #a7f3d0; }
[data-theme="dark"] .sd-cell-pencils { color: #6b7280; }

/* ===== Print ============================================================== */

@media print {
    .sd-controls, .sd-numpad, .sd-help-menu, .sd-result { display: none !important; }
    .sd-grid { border: 2px solid #000; }
    .sd-cell { border-right: 1px solid #6b7280; border-bottom: 1px solid #6b7280; color: #000 !important; }
    .sd-grid > .sd-cell:nth-child(3n)  { border-right-color: #000; }
    .sd-grid > .sd-cell:nth-child(n+19):nth-child(-n+27),
    .sd-grid > .sd-cell:nth-child(n+46):nth-child(-n+54) { border-bottom-color: #000; }
    /* Hide user-entered values on the printable puzzle page so people solve on paper */
    .sd-puzzle:not(.sd-puzzle-answers) .sd-cell:not(.sd-cell-given) .sd-cell-value,
    .sd-puzzle:not(.sd-puzzle-answers) .sd-cell:not(.sd-cell-given) .sd-cell-pencils { display: none !important; }
}