/* El sudoku. Lo común de la hoja está en `la-hoja.css`. */

.sudoku .nivel { display: inline-flex; align-items: center; gap: 8px; }
.sudoku .nivel .hecho { color: var(--hj-bien); font-weight: 800; }

.sudoku .rejilla {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    max-width: 430px;
    margin: 0 auto;
    border: 2px solid var(--hj-tinta);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.sudoku .casilla {
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    background: #fff;
    color: var(--hj-marca);
    font: inherit;
    font-size: clamp(1.1rem, 5.6vw, 1.6rem);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.sudoku .casilla:nth-child(9n) { border-right: 0; }
.sudoku .casilla:nth-last-child(-n + 9) { border-bottom: 0; }
.sudoku .casilla.raya-derecha { border-right: 2px solid var(--hj-tinta); }
.sudoku .casilla.raya-abajo { border-bottom: 2px solid var(--hj-tinta); }

/* Las de salida, en tinta; las que pone quien juega, en azul. */
.sudoku .casilla.dada { color: var(--hj-tinta); font-weight: 800; }

.sudoku .casilla.pariente { background: #f1f4fb; }
.sudoku .casilla.igual { background: #dfe5f7; }
.sudoku .casilla.elegida { background: #c7d0f0; }

/* El choque, en rojo y subrayado: el subrayado es la pista que no depende del color. */
.sudoku .casilla.choca { color: var(--hj-mal); text-decoration: underline wavy; text-underline-offset: 3px; }

.sudoku .rejilla.resuelta .casilla { background: #ecfdf3; }

.sudoku .apuntes {
    position: absolute;
    inset: 2px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    color: var(--hj-suave);
    font-size: clamp(.5rem, 2.2vw, .7rem);
    font-weight: 600;
    line-height: 1;
}

.sudoku .apuntes span { display: grid; place-items: center; }

.sudoku .teclas {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 5px;
    max-width: 430px;
    margin: 12px auto 0;
}

.sudoku .tecla {
    min-width: 0;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--hj-marca-suave);
    color: var(--hj-marca);
    font: inherit;
    font-size: 1.35rem;
    font-weight: 800;
    cursor: pointer;
}

/* Con las notas puestas, los números se ven más pequeños: es lo que van a escribir. */
.sudoku .teclas.con-notas .tecla { font-size: .95rem; background: #fff7d6; color: #8a6400; }

.sudoku .herramientas { margin-top: 12px; }
.sudoku #notas[aria-pressed="true"] { background: #fff7d6; color: #8a6400; box-shadow: inset 0 0 0 2px #c98a04; }

@media (max-width: 420px) {
    .sudoku .teclas { gap: 3px; }
    .sudoku .tecla { min-height: 44px; font-size: 1.15rem; }
}