/* ============================================================
   Hitori — rejilla de números grandes. Todo el tamaño sale de
   --cell (lo calcula hitori.js según el espacio disponible).
   Solo tokens de app.css: hereda tema claro/oscuro y rediseños.
   ============================================================ */
.ht-host { display: flex; justify-content: center; padding: 6px 0 12px; }
.ht { width: 100%; display: flex; justify-content: center; }

.ht-board {
  --cell: 56px;
  display: grid;
  grid-template-columns: repeat(var(--w), var(--cell));
  grid-template-rows: repeat(var(--h), var(--cell));
  box-sizing: content-box;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-family: var(--font-num);
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  outline: none;
}
/* anillo de foco solo si se está usando el teclado (en táctil parecería un error) */
.ht.is-kbd .ht-board:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 40%, transparent); }

.ht-cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
  transition: background-color .1s ease, color .1s ease;
}
.ht-cell.ht-lastc { border-right: 0; }
.ht-cell.ht-lastr { border-bottom: 0; }
.ht-num {
  position: relative; z-index: 1;
  font-size: calc(var(--cell) * .46); font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* sombreada: bloque de tinta, el número queda leíble pero apagado */
.ht-cell.is-shaded { background: var(--block, var(--ink)); }
.ht-cell.is-shaded .ht-num { color: color-mix(in srgb, var(--muted) 62%, var(--block, var(--ink))); }

/* marcada como segura: círculo alrededor del número */
.ht-cell.is-safe::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 72%; height: 72%; transform: translate(-50%, -50%);
  border: max(1.5px, calc(var(--cell) * .035)) solid var(--ink-2);
  border-radius: 50%;
}

/* repetidos sin sombrear en la fila/columna activa (sutil). Solo
   después de la primera jugada: al abrir el tablero no hay nada activo */
.ht.is-engaged .ht-cell.is-dup { background: var(--hl-soft, var(--surface-2)); }
.ht.is-engaged .ht-cell.is-dup .ht-num { color: var(--sel-ink, var(--ink)); font-weight: 600; }

/* cursor */
.ht-cell.is-cursor { box-shadow: inset 0 0 0 3px var(--sel, var(--accent)); z-index: 2; }
.ht-cell.is-shaded.is-cursor { box-shadow: inset 0 0 0 3px var(--sel, var(--accent)), inset 0 0 0 5px var(--block, var(--ink)); }

/* choques evidentes: dos sombreadas juntas, o dos círculos iguales */
.ht-cell.is-clash { background: var(--danger-weak); }
.ht-cell.is-clash .ht-num { color: var(--danger); }
.ht-cell.is-shaded.is-clash { background: color-mix(in srgb, var(--danger) 70%, var(--block, var(--ink))); }
.ht-cell.is-shaded.is-clash .ht-num { color: color-mix(in srgb, var(--surface) 70%, var(--danger)); }
.ht-cell.is-safe.is-clash::before { border-color: var(--danger); }

/* puesta por error (tras Comprobar o una pista) */
.ht-cell.is-wrong { background: var(--danger-weak); }
.ht-cell.is-wrong .ht-num { color: var(--danger); font-weight: 700; }
.ht-cell.is-wrong.is-shaded { background: var(--danger); }
.ht-cell.is-wrong.is-shaded .ht-num { color: var(--danger-weak); }
.ht-cell.is-wrong::after {
  content: ""; position: absolute; inset: 3px; border-radius: 4px;
  border: 2px solid var(--danger); pointer-events: none;
}

/* revelada: no se puede cambiar */
.ht-cell.is-locked .ht-num { font-weight: 700; }
.ht-cell.is-locked::after {
  content: ""; position: absolute; right: 5px; bottom: 5px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
}
.ht-cell.is-locked.is-shaded::after { background: var(--muted); }

/* pista: la casilla sugerida late una vez y queda marcada */
.ht-cell.is-hint { background: var(--warn-weak); }
.ht-cell.is-hint::after {
  content: ""; position: absolute; inset: 3px; border-radius: 4px;
  border: 2px dashed var(--warn); pointer-events: none;
  animation: ht-pulse 1.2s var(--ease) 2;
}
@keyframes ht-pulse { 50% { transform: scale(.9); opacity: .6; } }

@media (hover: hover) {
  .ht-cell:not(.is-shaded):not(.is-clash):not(.is-wrong):hover { background: var(--surface-2); }
  .ht.is-done .ht-cell:hover { background: transparent; }
}

/* explicación de la pista / aviso, bajo el tablero */
.ht { flex-direction: column; align-items: center; gap: 12px; }
.ht-note {
  max-width: min(100%, 520px); margin: 0; padding: 10px 14px;
  font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2);
  background: var(--surface-2); border-radius: var(--r-md);
  border-left: 3px solid var(--warn);
}
.ht-note.is-wrong { border-left-color: var(--danger); }
.ht-note[hidden] { display: none; }
.ht-help-keys { color: var(--muted); font-size: var(--t-sm); margin: .6rem 0 0; }

/* resuelto: sin cursor ni marcas; las sombreadas aparecen en cascada */
.ht.is-done .ht-board { cursor: default; }
.ht.is-done .ht-cell.is-cursor { box-shadow: none; }
.ht.is-done .ht-cell.is-shaded { animation: ht-pop .45s var(--ease) both; }
@keyframes ht-pop { 40% { transform: scale(.88); } }

@media (prefers-reduced-motion: reduce) {
  .ht-cell, .ht.is-done .ht-cell.is-shaded, .ht-cell.is-hint::after { animation: none; transition: none; }
}

/* móvil estrecho: la barra (modo + 3 acciones + Más) cabe en una línea */
@media (max-width: 420px) {
  .play-hitori .play-toolbar .tool-btn { padding: 0 8px; }
  .play-hitori .play-toolbar .tool-seg .tool-btn { gap: 5px; }
  .play-hitori .play-toolbar .tool-sep { margin: 0 1px; }
}