/* ============================================================
   Hexadoku — encima de sudoku.css (mismo tablero), todo bajo
   .hexadoku-shell para no tocar el Sudoku ni estilos globales.
   16×16: casillas más chicas, teclado de 16 símbolos en 2 filas,
   marcas suaves (sin rojo) y panel de pista en línea, sin ventanas.
   ============================================================ */

.hexadoku-shell { max-width: 780px; }

.hexadoku-shell .su-board {
  /* cabe en el ancho y en el alto visible (cabecera + barra ≈ 260px) */
  --cell: clamp(20px, min(calc(90vw / var(--size)), calc((100vh - 260px) / var(--size))), 44px);
  border-width: 2px;
}
.hexadoku-shell .su-val {
  font-family: var(--font-num, ui-monospace, monospace);
  font-size: calc(var(--cell) * 0.5);
  letter-spacing: 0;
}
.hexadoku-shell .su-box-right { border-right-width: 2px; }
.hexadoku-shell .su-box-bottom { border-bottom-width: 2px; }

/* resaltado suave y transiciones breves (fila, columna y bloque) */
.hexadoku-shell .su-cell { transition: background-color .16s ease, box-shadow .16s ease; }
.hexadoku-shell .su-peer { background: color-mix(in srgb, var(--sel) 7%, var(--surface)); }
.hexadoku-shell .su-same-val:not(.su-cursor) { background: color-mix(in srgb, var(--sel) 13%, var(--surface)); }
.hexadoku-shell .su-cursor { background: color-mix(in srgb, var(--sel) 20%, var(--surface)); }

/* símbolo que no encaja: subrayado ondulado discreto, sin rojo ni fondo */
.hexadoku-shell .su-soft .su-val {
  color: var(--ink-2, var(--ink));
  text-decoration: underline wavy color-mix(in srgb, var(--warn, #c08a2b) 75%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: calc(var(--cell) * 0.08);
}
/* "repetidos" (Marcar símbolos repetidos) también en tono suave */
.hexadoku-shell .su-wrong { background: color-mix(in srgb, var(--warn, #c08a2b) 12%, var(--surface)); }
.hexadoku-shell .su-wrong .su-val { color: var(--ink); }

/* notas: 16 candidatos en 4×4 */
.hexadoku-shell .su-note { font-size: calc(var(--cell) * 0.2); font-family: var(--font-num, ui-monospace, monospace); }

/* pista: casilla señalada y casillas descartadas */
.hexadoku-shell .hx-hint-cell { box-shadow: inset 0 0 0 2px var(--accent); animation: hx-breathe 1.8s ease-in-out 2; }
.hexadoku-shell .hx-blocked { background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--ink) 9%, transparent) 4px 5px); }
@keyframes hx-breathe {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--accent); }
  50% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
}

/* teclado: 16 símbolos en 2 filas de 8; borrar ocupa la fila de abajo */
.hexadoku-shell .su-pad { gap: 5px; max-width: 560px; }
.hexadoku-shell .su-pad-key { height: 42px; font-family: var(--font-num, ui-monospace, monospace); transition: background .12s, opacity .2s, transform .06s; }
.hexadoku-shell .su-pad-erase { grid-column: 1 / -1; height: 36px; }
.hexadoku-shell .su-pad-key.hx-out { opacity: .32; }
.hexadoku-shell .su-pad-key.hx-in { box-shadow: 0 0 0 2px var(--accent); }

/* panel de pista: en línea sobre el tablero, nunca una ventana */
.hx-hint {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  max-width: 704px; margin: 4px auto 10px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 14, 10, .05);
  opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease;
}
.hx-hint.is-open { opacity: 1; transform: none; }
.hx-hint-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent-weak); color: var(--accent-ink); }
.hx-hint-ico .ico { width: 17px; height: 17px; }
.hx-hint-text { flex: 1 1 260px; margin: 3px 0 0; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.hx-hint-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.hx-hint-close { padding-inline: 8px; }
.hx-hint-close .ico { width: 16px; height: 16px; }

/* pantallas anchas: teclado al lado del tablero (4×4), todo a la vista */
@media (min-width: 1100px) {
  .hexadoku-shell { max-width: 940px; }
  .hexadoku-shell .su-wrap { flex-direction: row; align-items: center; justify-content: center; gap: 22px; }
  .hexadoku-shell .su-pad { grid-template-columns: repeat(4, 1fr); width: 208px; max-width: 208px; }
  .hexadoku-shell .su-pad-key { height: 46px; }
}

@media (max-width: 640px) {
  .hexadoku-shell .su-board { --cell: min(calc(94vw / var(--size)), 40px); }
  .hexadoku-shell .su-pad-key { height: 40px; font-size: 1rem; }
  .hx-hint { margin: 2px 6px 8px; }
  .hx-hint-text { font-size: .85rem; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .hexadoku-shell .su-board { --cell: min(calc(5.6vh), calc(4.4vw), 40px); }
  .hexadoku-shell .su-pad { grid-template-columns: repeat(4, 1fr); max-width: 200px; }
  .hexadoku-shell .su-pad-erase { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .hexadoku-shell .su-cell, .hx-hint { transition: none; }
  .hexadoku-shell .hx-hint-cell { animation: none; }
}