/* Online Sudoku: board, number pad and controls. Shared styles are in puzzles/assets/puzzles.css. Buttons need !important
   and a specific selector because tool-dark.css styles every button on a tool page. */

.sp-game { max-width: 560px; margin-left: auto; margin-right: auto; }
.sp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sp-buttons { display: flex; gap: 10px; }
.sp-title { margin: 14px 0 0; color: var(--text-primary, #E6EDF3); font-weight: 600; }
.sp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.sp-stats div { padding: 8px 10px; border: 1px solid var(--border, #2A2F36); border-radius: 10px; background: #111827; text-align: center; }
.sp-stats dt { color: var(--text-muted, #9AA4AE); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.sp-stats dd { margin: 2px 0 0; color: var(--heading, #F8FAFC); font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* The board keeps its square shape from the first paint, so nothing moves while the game loads. */
.sp-board { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); width: 100%; aspect-ratio: 1; border: 3px solid #E6EDF3; border-radius: 6px; background: #E6EDF3; overflow: hidden; touch-action: manipulation; }
.pz .sp-cell { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; margin: 0; padding: 0 !important; border: 0 !important; border-right: 1px solid #4b5563 !important; border-bottom: 1px solid #4b5563 !important; border-radius: 0 !important; background: #0F172A !important; box-shadow: none !important; color: #93c5fd !important; font: inherit; font-size: clamp(1.05rem, 5.4vw, 1.6rem); font-weight: 600; line-height: 1; cursor: pointer; }
.pz .sp-cell:nth-child(3n) { border-right: 2px solid #E6EDF3 !important; }
.pz .sp-cell:nth-child(9n) { border-right: 0 !important; }
.pz .sp-cell:nth-child(n+19):nth-child(-n+27), .pz .sp-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid #E6EDF3 !important; }
.pz .sp-cell:nth-child(n+73) { border-bottom: 0 !important; }
.pz .sp-cell.is-given { color: #F8FAFC !important; font-weight: 700; }
.pz .sp-cell.is-peer { background: #172033 !important; }
.pz .sp-cell.is-same { background: #1E3A5F !important; }
.pz .sp-cell.is-selected { background: #7F1D1D !important; }
.pz .sp-cell.is-conflict { color: #fca5a5 !important; }
.pz .sp-cell.is-wrong { background: #5B1414 !important; color: #fecaca !important; text-decoration: underline; }
.pz .sp-cell:focus-visible { outline: 2px solid #f87171; outline-offset: -3px; }
.sp-board.is-solved { border-color: #4ade80; }
.sp-notes { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; color: #9AA4AE; font-size: clamp(0.5rem, 1.9vw, 0.68rem); font-weight: 500; line-height: 1; }
.sp-notes span { display: flex; align-items: center; justify-content: center; }

.sp-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-top: 14px; }
.pz .sp-digit { min-width: 0; min-height: 48px; margin: 0; padding: 0 !important; border: 1px solid var(--border, #2A2F36) !important; border-radius: 8px !important; background: #1F2937 !important; box-shadow: none !important; color: var(--heading, #F8FAFC) !important; font: inherit; font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.pz .sp-digit.is-done { opacity: 0.45; }
.pz .sp-digit:focus-visible { outline: 2px solid #f87171; outline-offset: 1px; }
.sp-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.pz .sp-tools .pz-btn { min-width: 0; padding: 8px 4px !important; font-size: 0.9rem; }
.pz .sp-tools .pz-btn[aria-pressed="true"] { border-color: #f87171 !important; color: #fca5a5 !important; }
.sp-help { margin: 12px 0 0; font-size: 0.9rem; }
.sp-status { min-height: 1.5em; margin: 8px 0 0; color: var(--text-primary, #E6EDF3); font-weight: 600; }

@media (max-width: 480px) {
    .sp-top { flex-direction: column; align-items: stretch; }
    .sp-buttons .pz-btn { flex: 1; }
    .pz-levels { justify-content: stretch; }
    .pz-levels label { flex: 1; text-align: center; }
}