/* Grafito — estilos de tableros de juego */

.board-row { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }

.grid { display: grid; gap: 3px; width: 100%; container-type: inline-size; }
.cell { aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 6px; font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; user-select: none; cursor: pointer; background: var(--surface2); color: var(--ink); border: 1px solid transparent; }

/* Sudoku */
#sudoku-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; max-width: 400px; background: var(--line); border: 2px solid var(--ink); border-radius: 8px; padding: 2px; }
#sudoku-grid .cell { font-size: max(13px, min(22px, 8.8cqw)); background: var(--surface); border-radius: 2px; }
#sudoku-grid .cell.given { color: var(--ink); font-weight: 600; background: var(--surface2); cursor: default; }
#sudoku-grid .cell.sel { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--sel-bg); }
#sudoku-grid .cell.bad { background: var(--err-bg); color: var(--err-ink); }
#sudoku-grid .cell.hint { color: var(--ok-ink); }
#sudoku-grid .cell.br { border-right: 2px solid var(--ink); }
#sudoku-grid .cell.bb { border-bottom: 2px solid var(--ink); }
/* línea de progreso de variaciones (Sudoku, Crucigrama) */
.sudoku-progress, .cruci-progress, .ahorcado-progress, .sopa-progress, .memoria-progress, .slide-progress, .minas-progress { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ink2); margin: 0 0 12px; }
#sudoku-donelabel, #cruci-donelabel, #ahorcado-donelabel, #sopa-donelabel, #memoria-donelabel, #slide-donelabel, #minas-donelabel { color: var(--primary); font-weight: 600; }

/* teclado numérico a la derecha del tablero (keypad 3×3 + Borrar).
   El tablero encoge para que el teclado quede siempre a la derecha; en
   móvil (≤560px) el teclado pasa a ocupar todo el ancho debajo. */
.sudoku-layout { align-items: flex-start; flex-wrap: nowrap; }
.sudoku-board { flex: 1 1 auto; min-width: 0; max-width: 400px; }
.sudoku-side { flex: 0 0 174px; align-self: flex-start; display: flex; flex-direction: column; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.sudoku-side .status-line { margin-top: 12px; text-align: center; }
.numpad button { min-width: 0; min-height: 52px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; }
.numpad button:hover { border-color: var(--accent); color: var(--accent); }
/* Número ya completo en el tablero: se resalta en verde para indicar que no hace falta. */
.numpad button.done { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); font-weight: 700; }
.numpad button.done:hover { border-color: var(--ok-line); color: var(--ok-ink); }
.numpad button.erase { grid-column: 1 / -1; min-height: 44px; font-size: 14px; }
@media (max-width: 560px) {
  .sudoku-layout { flex-direction: column; align-items: stretch; }
  .sudoku-board { max-width: 100%; }
  .sudoku-side { flex: 0 0 auto; width: 100%; max-width: 300px; }
}

/* Crucigrama */
.cw-layout { position: relative; display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
/* Input oculto que invoca el teclado en pantalla en móvil (font-size 16px evita el zoom de iOS). */
.cw-hidden-input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0; background: transparent; font-size: 16px; }
#cw-grid { gap: 2px; max-width: 380px; background: var(--line); border: 1px solid var(--ink); padding: 2px; border-radius: 6px; }
#cw-grid .cw-cell { position: relative; aspect-ratio: 1/1; background: var(--surface); display: grid; place-items: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: max(11px, min(20px, 7cqw)); cursor: text; color: var(--ink); text-transform: uppercase; }
#cw-grid .cw-cell.blank { background: var(--bg); cursor: default; }
#cw-grid .cw-cell.sel { background: var(--sel-bg); }
#cw-grid .cw-cell.inword { background: var(--surface2); }
#cw-grid .cw-cell.hint { color: var(--ok-ink); }
#cw-grid .cw-cell.bad { color: var(--err-ink); }
#cw-grid .cw-cell .num { position: absolute; top: 1px; left: 3px; font-size: 8px; color: var(--ink3); }
.cw-clues { display: flex; flex-direction: column; gap: 18px; min-width: 220px; flex: 1 1 220px; }
.cw-clues h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; letter-spacing: 0.1em; color: var(--primary); margin-bottom: 8px; }
.cw-clues ol { margin: 0; padding-left: 0; list-style: none; font-size: 13px; color: var(--ink2); line-height: 1.7; }
.cw-clues li.active { color: var(--accent); font-weight: 600; }
.cw-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cw-clues .status-line { margin-top: 0; }

/* Ahorcado */
.hang-layout { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; }
.gallows { width: 160px; height: 190px; flex: 0 0 auto; }
.gallows svg { width: 100%; height: 100%; }
.gallows .part { stroke: var(--ink); stroke-width: 4; fill: none; stroke-linecap: round; }
.hang-word { display: flex; gap: 8px; flex-wrap: wrap; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(18px, 4vw, 28px); letter-spacing: 0.08em; margin-bottom: 10px; }
.hang-word span { border-bottom: 3px solid var(--ink3); min-width: 0.9em; text-align: center; text-transform: uppercase; }
.hang-keyboard { display: flex; flex-wrap: wrap; gap: 6px; max-width: 480px; }
.hang-keyboard button { min-width: 36px; min-height: 40px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; }
.hang-keyboard button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hang-keyboard button.hit { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.hang-keyboard button.miss { background: var(--err-bg); border-color: var(--err-ink); color: var(--err-ink); }
.hang-keyboard button:disabled { cursor: default; }

/* Sopa de letras — tablero a la izquierda, lista de palabras a la derecha */
.ws-layout { display: flex; gap: clamp(16px, 3vw, 24px); align-items: flex-start; flex-wrap: wrap; }
#ws-grid { flex: 0 1 420px; min-width: 240px; max-width: 420px; touch-action: none; }
#ws-grid .cell { font-size: max(11px, min(18px, 6.5cqw)); background: var(--surface); border: 1px solid var(--line); }
#ws-grid .cell.sel { background: var(--sel-bg); }
#ws-grid .cell.found { background: var(--ok-bg); color: var(--ok-ink); }
#ws-grid .cell.hint { outline: 2px solid var(--accent); outline-offset: -2px; }
.ws-side { flex: 1 1 150px; min-width: 130px; }
.ws-words-title { font-size: 11px; letter-spacing: 0.1em; color: var(--primary); margin-bottom: 10px; }
.ws-words { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ws-words .w { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; color: var(--ink2); }
.ws-words .w.found { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); text-decoration: line-through; }
.ws-count { margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); }
@media (max-width: 560px) {
  .ws-layout { flex-direction: column; }
  .ws-words { flex-direction: row; flex-wrap: wrap; }
}

/* Memoria */
#mem-grid { max-width: 440px; gap: 8px; }
#mem-grid .card { aspect-ratio: 1/1; border-radius: 10px; cursor: pointer; position: relative; }
#mem-grid .card .face { position: absolute; inset: 0; border-radius: 10px; display: grid; place-items: center; backface-visibility: hidden; transition: transform .25s; }
#mem-grid .card .back { background: var(--primary); }
#mem-grid .card .front { background: var(--surface); border: 1px solid var(--line); transform: rotateY(180deg); overflow: hidden; }
#mem-grid .card .front img { width: 100%; height: 100%; object-fit: cover; }
#mem-grid .card.up .back { transform: rotateY(180deg); }
#mem-grid .card.up .front { transform: rotateY(0deg); }
#mem-grid .card.done .front { outline: 2px solid var(--ok-line); }

/* Rompecabezas */
#slide-grid { max-width: 340px; gap: 5px; }
#slide-grid .cell { background: var(--primary); color: var(--on-accent); font-size: max(14px, min(28px, 9cqw)); font-weight: 600; cursor: pointer; }
#slide-grid .cell.blank { background: transparent; cursor: default; }
#slide-grid .cell.correct { background: var(--ok-line); color: var(--ok-ink); }
#slide-grid .cell.hint { outline: 3px solid var(--hi); outline-offset: -3px; }

/* Buscaminas */
#mine-grid { max-width: 400px; gap: 2px; user-select: none; }
#mine-grid .cell { font-size: max(10px, min(16px, 6cqw)); background: var(--surface2); border-radius: 3px; font-weight: 700; }
#mine-grid .cell.rev { background: #CBD5E1; cursor: default; }
#mine-grid .cell.flag { background: var(--hi-soft); }
#mine-grid .cell.mine { background: var(--err-bg); }
#mine-grid .cell[data-n="1"] { color: #2563EB; }
#mine-grid .cell[data-n="2"] { color: #16A34A; }
#mine-grid .cell[data-n="3"] { color: #DC2626; }
#mine-grid .cell[data-n="4"] { color: #7C3AED; }
#mine-grid .cell[data-n="5"] { color: #B45309; }
#mine-grid .cell[data-n="6"] { color: #0891B2; }
#mine-grid .cell[data-n="7"] { color: #1F2937; }
#mine-grid .cell[data-n="8"] { color: #6B7280; }

/* Tres en línea */
#ttt-grid { max-width: 260px; gap: 6px; grid-template-columns: repeat(3, 1fr); }
#ttt-grid .cell { background: var(--surface); font-size: clamp(28px, 10vw, 44px); font-weight: 700; border: 1px solid var(--line); }
#ttt-grid .cell.x { color: var(--primary); }
#ttt-grid .cell.o { color: var(--hi); }
#ttt-grid .cell.win { background: var(--ok-bg); }
#ttt-grid .cell.hint { outline: 3px solid var(--hi); outline-offset: -3px; }

/* confetti canvas */
#confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

@media (max-width: 560px) {
  .cw-layout, .hang-layout, .board-row { flex-direction: column; }
}