@charset "UTF-8";
/* =========================================
   SudokuES — Desktop, minimal + iOS-like
   ========================================= */

:root {
  --se-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --se-bg: #fff;
  --se-text: #1c1c1e;
  --se-muted: #6b7280;

  --se-hairline: #bfc5cd;
  --se-thick: #4b5563;

  --se-accent: #0a84ff;         /* se sobrescribe abajo con la marca */
  --se-accent-hover: #0872e8;   /* se sobrescribe abajo con la marca */
  --se-selected-bg: #eaf2ff;
  --se-selected-border: #0a84ff;

  /* === Colores de highlight/selección unificados === */
  --se-focus-cell: color-mix(in srgb, var(--se-brand) 28%, white); /* celda seleccionada */
  --se-hl:          color-mix(in srgb, var(--se-brand) 12%, white); /* fila/col/box */
  --se-hl-same:     color-mix(in srgb, var(--se-brand) 20%, white); /* mismo número */

  --se-flash-1: #f2f4f8;
  --se-flash-2: #e9edf5;

  --se-wrong: #ff3b30;
  --se-wrong-bg: #ffe8e6;

  --se-key-bg: #fff;
  --se-key-border: #d1d5db;
  --se-key-hover: #f5f7fb;
  --se-key-active: #eaf2ff;

  --se-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --se-shadow-md: 0 6px 18px rgba(0,0,0,.08);

  /* === Marca === */
  --se-brand: #6b4d5e;
  --se-accent: var(--se-brand);
  --se-focus: var(--se-brand);
  --se-accent-hover: color-mix(in srgb, var(--se-brand) 88%, white);
}


/* nunca pintar correctos en verde ni chillón */
.sudoku-es__cell.correct { background: transparent !important; color: inherit !important; }

/* raíz y box-sizing */
.sudoku-es { font-family: var(--se-font); font-size: 18px; color: var(--se-text); }
.sudoku-es * { box-sizing: border-box; }

/* ===== Layout general (GRID) =====
   Fila 1: topbar (solo sobre el tablero)
   Fila 2: tablero | panel
*/
.sudoku-es__wrap {
  display: grid;
  grid-template-columns: 1fr minmax(220px, clamp(220px, 32cqi, 300px));
  grid-template-rows: auto 1fr;
  column-gap: 20px;
  align-items: start;
  flex-wrap: wrap;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  overflow: hidden;

  /* Para usar cqi en hijos (ancho del contenedor) */
  container-type: inline-size;
}

/* === Topbar sobre el tablero (alineada al ancho del tablero) === */
.sudoku-es__topbar {
  grid-column: 1;  /* solo encima del tablero, NO encima del panel */
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* izq | centro | der relativas al tablero */
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

/* “Aplano” las stats para posicionar cada pill directamente en la grilla de la topbar */
.sudoku-es__topbar .sudoku-es__stats { display: contents; }

/* Selector izq / Tiempo centro / Errores derecha (dentro del ancho del tablero) */
.sudoku-es__topbar .sudoku-es__select { grid-column: 1; justify-self: start; }
.sudoku-es__topbar .sudoku-es__stat:nth-of-type(1) { grid-column: 2; justify-self: center; }
.sudoku-es__topbar .sudoku-es__stat:nth-of-type(2) { grid-column: 3; justify-self: end; }

/* ===== Tablero (toma la altura del panel) ===== */
.sudoku-es__board {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  height: 100%;           /* altura = altura de la fila (igual a la del panel) */
  aspect-ratio: 1 / 1;    /* cuadrado: ancho = alto del panel */
  background: var(--se-bg);
  border-radius: 14px;
  box-shadow: var(--se-shadow-md);
  overflow: hidden;
  border: 2px solid var(--se-thick);
  container-type: size;   /* para cqi relativos al tablero */
  min-width: 0;
}

/* Grilla: gap = línea fina */
.sudoku-es__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: min(1px, 0.2cqi);
  background: var(--se-hairline);
}

/* 4 líneas gruesas perfectas (cada 3 celdas) con gradientes */
.sudoku-es__grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(to right, transparent 33.333%, var(--se-thick) 0 calc(33.333% + 2px), transparent 0),
    linear-gradient(to right, transparent 66.666%, var(--se-thick) 0 calc(66.666% + 2px), transparent 0),
    linear-gradient(to bottom, transparent 33.333%, var(--se-thick) 0 calc(33.333% + 2px), transparent 0),
    linear-gradient(to bottom, transparent 66.666%, var(--se-thick) 0 calc(66.666% + 2px), transparent 0);
}

/* Celdas */
.sudoku-es__cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--se-bg);
  user-select: none;
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(1rem, 6.2cqi, 2.2rem); /* escala con el tablero */
  color: var(--se-text);
  transition: background-color .12s ease, box-shadow .12s ease, transform .08s ease;
  aspect-ratio: 1 / 1;
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
}
.sudoku-es__cell.given { color: var(--se-muted); }

.sudoku-es__cell.highlight-row,
.sudoku-es__cell.highlight-col,
.sudoku-es__cell.highlight-box { background: var(--se-hl); }
.sudoku-es__cell.same-number { background: var(--se-hl-same); }
.sudoku-es__cell.note { color: #b0b0b5; font-style: italic; }
.sudoku-es__cell.wrong { background: var(--se-wrong-bg) !important; color: var(--se-wrong) !important; }
.sudoku-es__cell.conflict { background: #ffeef0 !important; }

/* Seleccionada: tono marca suave (ganando a highlight) */
.sudoku-es__cell.selected {
  background: var(--se-focus-cell) !important;
  box-shadow: none !important;
  color: var(--se-text);
}

/* Celebración */
.sudoku-es__cell.flash {
  animation: se-flash 1.4s ease-in-out, se-pop 0.6s ease-out;
  z-index: 10;
}

@keyframes se-flash {
  0%   { background: rgba(255,255,255,0.2); box-shadow:0 0 0 rgba(255,255,255,0); }
  25%  { background: rgba(255,255,255,0.6); box-shadow:0 0 20px rgba(255,255,255,0.6); }
  55%  { background: rgba(255,255,255,0.9); box-shadow:0 0 40px rgba(255,255,255,0.8); }
  85%  { background: rgba(255,255,255,0.4); box-shadow:0 0 15px rgba(255,255,255,0.3); }
  100% { background: transparent; box-shadow:0 0 0 rgba(255,255,255,0); }
}




@keyframes se-pop { 0%{transform:scale(1)}40%{transform:scale(1.2)}60%{transform:scale(.95)}100%{transform:scale(1)} }
.sudoku-es__cell { border: 0 !important; }

/* ===== Panel derecho ===== */
.sudoku-es__controls {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  gap: 16px;
  grid-auto-rows: min-content;
  min-width: 220px;
  width: clamp(220px, 32cqi, 300px); /* fluido: acompaña al tablero */
}

/* Stats (Tiempo / Errores) — estilo suave unificado */
.sudoku-es__stats { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sudoku-es__stat {
  background: color-mix(in srgb, var(--se-brand) 6%, white);
  border: 1px solid color-mix(in srgb, var(--se-brand) 25%, var(--se-hairline));
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
}

/* ===== Teclado numérico (outlined, look liviano) ===== */
.sudoku-es__kbd {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,1fr);
  gap: clamp(8px, 1.2cqi, 10px);
  background: var(--se-bg);
  border: 1px solid var(--se-hairline);
  border-radius: 14px;
  padding: clamp(12px, 1.6cqi, 14px);
  box-shadow: var(--se-shadow-sm);
}
.sudoku-es__key {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(44px, 8cqi, 56px);
  background: #fff;
  color: var(--se-brand);
  border: 1px solid var(--se-brand);
  border-radius: 12px;
  font-weight: bold;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background-color .1s ease, border-color .1s ease, transform .06s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
}
.sudoku-es__key:hover { background: color-mix(in srgb, var(--se-brand) 10%, white); }
.sudoku-es__key:active { background: color-mix(in srgb, var(--se-brand) 18%, white); transform: translateY(1px); }
.sudoku-es__key:focus-visible { outline: 3px solid var(--se-brand); outline-offset: 2px; }

/* ===== Botones de función (2 filas × 3 columnas) ===== */
.sudoku-es__icons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2cqi, 10px);
  margin-top: 2px;
}
.sudoku-es__btn {
  border: 1px solid color-mix(in srgb, var(--se-brand) 25%, var(--se-hairline));
  background: #fff;
  color: var(--se-text);
  border-radius: 12px;
  padding: 11px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  min-height: clamp(40px, 8cqi, 44px);
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}
.sudoku-es__btn:hover { background: color-mix(in srgb, var(--se-brand) 7%, white); }
.sudoku-es__btn:active { transform: translateY(1px); }
.sudoku-es__btn:focus-visible { outline: 3px solid var(--se-brand); outline-offset: 2px; }

/* Botón primario (ej. “Nuevo juego”) con marca */
.sudoku-es__btn--primary { background: var(--se-brand); border-color: var(--se-brand); color: #fff; }
.sudoku-es__btn--primary:hover { background: var(--se-accent-hover); }

/* Botón primario debajo con separación */
.sudoku-es__controls .sudoku-es__btn.sudoku-es__btn--primary { margin-top: 4px; }

/* ===== Select de dificultad ===== */
.sudoku-es__select {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--se-brand) 25%, var(--se-hairline));
  background:
    var(--se-bg)
    url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231c1c1e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 12px center / 12px 8px;
  color: var(--se-text);
  border-radius: 12px;
  padding: 10px 36px 10px 12px;
  font-weight: 700;
  min-height: 44px;
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .sudoku-es__cell.flash { animation: none; }
}

/* === Modal === */
.sudoku-es__modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); z-index: 9999; }
.sudoku-es__modal { background: #fff; max-width: 420px; width: 92%; border-radius: 14px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.2); font-family: var(--se-font); color: var(--se-text); }
.sudoku-es__modal-title { margin: 0 0 12px; font-size: 20px; font-weight: 700; text-align: center; }
.sudoku-es__modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* ===== Mobile ===== */
@media (max-width: 600px) {
  .sudoku-es__wrap {
    grid-template-columns: 1fr;     /* panel debajo del tablero */
    grid-template-rows: auto auto auto;
    row-gap: 12px;
    max-width: 540px;               /* opcional, para no exceder */
  }

  .sudoku-es__topbar {
    grid-column: 1;
    grid-row: 1;
    gap: 8px 10px;
    margin-bottom: 0;
    /* sigue alineada al tablero */
  }

  .sudoku-es__board {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: auto;       /* en mobile el tablero se ajusta por ancho */
    aspect-ratio: 1/1;
  }

  .sudoku-es__controls {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
  }

  /* Teclado en una sola fila (1–9) */
  .sudoku-es__kbd {
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: none;
    gap: 8px;
  }
  .sudoku-es__key { height: 44px; }

  /* Botones función 3×2 con gap menor */
  .sudoku-es__icons { gap: 8px; }
}
/* === TOPBAR: alineación perfecta sobre el tablero + estilo liviano === */

/* 1) La topbar ocupa solo la columna del tablero y se estira a su ancho */
.sudoku-es__topbar {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  /* auto | 1fr | auto => el centro queda realmente centrado respecto al tablero */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;            /* asegura que tome todo el ancho de la columna del tablero */
  justify-self: stretch;  /* por si acaso */
}

/* 2) Dentro de la topbar, “aplanamos” las stats para posicionarlas directo en la grilla */
.sudoku-es__topbar .sudoku-es__stats { display: contents; }

/* 3) Selector (izquierda), Tiempo (centro), Errores (derecha) */
.sudoku-es__topbar .sudoku-es__select {
  grid-column: 1;
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--se-brand) 25%, var(--se-hairline));
  background:
    var(--se-bg)
    url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231c1c1e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 10px center / 12px 8px;
  border-radius: 12px;
  padding: 8px 28px 8px 10px;  /* más liviano que el default */
  min-height: 36px;
  font-weight: 600;           /* unificamos peso con stats */
  font-size: 14px;            /* tamaño unificado en desktop */
  line-height: 1.1;
}

/* Estilo liviano para Tiempo/Errores (sin “pill”), misma tipografía que el selector */
.sudoku-es__topbar .sudoku-es__stat {
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;   /* igual que el selector */
  font-size: 14px;    /* igual que el selector */
  line-height: 1.1;
  color: var(--se-text);
}

/* TIEMPO (centro exacto del tablero) */
.sudoku-es__topbar .sudoku-es__stat:nth-of-type(1) {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

/* ERRORES (alineado al borde derecho del tablero) */
.sudoku-es__topbar .sudoku-es__stat:nth-of-type(2) {
  grid-column: 3;
  justify-self: end;
  text-align: right;
}
/* ===== DESKTOP: fila principal tope 460px, tablero cuadrado ===== */
@media (min-width: 601px) {
  .sudoku-es__wrap {
    overflow: visible;
    grid-template-columns: minmax(0, 1fr) minmax(220px, clamp(220px, 32cqi, 300px));
    justify-content: center; /* centra tablero + panel dentro del wrap */
  }

  .sudoku-es__board {
    justify-self: start;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1; /* SIEMPRE cuadrado */
    max-height: 460px;
  }

  .sudoku-es__controls {
    max-height: 460px;
    height: 100%;
    overflow: auto; /* o visible, según prefieras */
  }

  /* Topbar se alinea al ancho real del tablero */
  .sudoku-es__topbar {
    max-width: 460px;
    width: 100%;
    justify-self: start;
  }
}

/* ===== Desktop: 22px de separación + alturas sincronizadas ===== */
@media (min-width: 601px) {
  /* 1) Separación exacta entre tablero y panel */
  .sudoku-es__wrap {
    column-gap: 22px;
    /* centrado optativo del bloque completo; si no lo querés, podés quitarlo */
    justify-content: center;
    overflow: visible; /* evita que el panel "se meta" detrás del tablero */
  }

  /* 2) El tablero manda: cuadrado y como máx ~460 si ya lo limitaste */
  .sudoku-es__board {
    width: 100%;
    max-width: 460px;   /* si tu tope es otro, cambialo acá */
    aspect-ratio: 1 / 1;/* SIEMPRE cuadrado */
    /* (no seteamos height:auto para no romper el cuadrado) */
  }

  /* 3) La topbar se alinea al ancho REAL del tablero (no se desfasará) */
  .sudoku-es__topbar {
    width: 100%;
    max-width: 460px;   /* mismo tope que el tablero */
    justify-self: start;
    /* ya tenés grid-template-columns:auto 1fr auto más abajo: se mantiene */
  }

  /* 4) El panel toma EXACTAMENTE la misma altura que el tablero */
  .sudoku-es__controls {
    height: 100%;         /* rellena la altura de la fila que define el tablero */
    max-height: none;     /* lo dejamos seguir a la fila */
    contain: size;        /* el panel no "empuja" la altura de la fila: manda el tablero */
    overflow: visible;    /* sin scroll interno, salvo que prefieras auto */
    display: flex;        /* para espaciar dinámicamente los tres bloques */
    flex-direction: column;
    justify-content: space-between; /* espacio variable entre teclado / botones / nuevo */
    min-height: 0;        /* necesario para que los hijos no generen overflow raro */
  }

  /* 5) Seguridad para hijos del panel en flex */
  .sudoku-es__kbd,
  .sudoku-es__icons {
    min-height: 0;
  }
}
/* ===== Desktop: fijar gap exacto de 22px entre [tablero] y [panel] ===== */
@media (min-width: 601px) {
  /* La columna del tablero mide como máximo 460px y no se estira más que eso */
  .sudoku-es__wrap {
    grid-template-columns: minmax(0, 460px) minmax(220px, clamp(220px, 32cqi, 300px));
    column-gap: 22px;           /* distancia fija: mínima y máxima */
    justify-content: center;    /* (opcional) centra el bloque tablero+panel en el wrap */
  }

  /* El tablero llena su track (que ahora nunca es mayor que 460px) y sigue cuadrado */
  .sudoku-es__board {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
  }

  /* La topbar se acota exactamente al ancho real del tablero: mantiene alineación */
  .sudoku-es__topbar {
    width: 100%;
    max-width: 460px;
    justify-self: start;
  }
}
/* === FIX anti-desborde teclado 3×3 (solo desktop) === */
@media (min-width: 601px) {
  /* Dejá que el contenedor del teclado pueda encogerse sin que su contenido lo rompa */
  .sudoku-es__kbd { 
    min-height: 0; 
    /* cuando hay muy poco espacio vertical, que el gap y el padding también cedan */
    gap: clamp(6px, 1cqi, 10px);
    padding: clamp(8px, 1.2cqi, 14px);
  }

  /* Permití que las teclas bajen un poco más su altura cuando el panel se achica */
  .sudoku-es__key {
    /* antes: height: clamp(44px, 8cqi, 56px);  -> no llegaba a encoger lo suficiente */
    height: clamp(32px, 6.5cqi, 56px);
    /* la fuente ya escala con cqi; no hace falta tocarla */
  }
}
/* === Mobile: tipografía más grande en botones (sin agrandar los botones) === */
@media (max-width: 600px) {
  /* 6 botones función (2×3) */
  .sudoku-es__icons .sudoku-es__btn {
    font-size: clamp(16px, 3.8cqi, 20px);
    line-height: 1.1;           /* más compacto para no forzar altura */
  }

  /* “Nuevo juego” un poco más grande que los de función */
  .sudoku-es__controls .sudoku-es__btn.sudoku-es__btn--primary {
    font-size: clamp(18px, 4.4cqi, 22px);
    line-height: 1.1;
  }
}
.sudoku-es__cell.note {
  color: color-mix(in srgb, var(--se-brand) 85%, white) !important;
}

/* ===== Notas (modo lápiz) como mini-grilla 3×3 dentro de la celda ===== */

/* Marca para “la celda tiene notas” */
.sudoku-es__cell.has-notes {
  /* aseguramos que no haya texto grande compitiendo */
  color: transparent;
}

/* Contenedor 3×3 de las notas (ocupa casi toda la celda) */
.sudoku-es__notes {
  position: absolute;
  inset: 6%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  pointer-events: none;       /* no roba clicks */
}

/* Cada slot (1..9). Si no hay nota, queda vacío. */
.sudoku-es__note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  /* tamaño pequeño que escala con el tablero */
  font-size: clamp(10px, 1.8cqi, 14px);
  line-height: 1;
  color: var(--se-note, var(--se-brand));
  opacity: .95;
}

/* Si querés un tono un poco más claro para la nota */
:root { --se-note: color-mix(in srgb, var(--se-brand) 85%, white); }

/* Botones principales de los modales más grandes en móvil */
@media (max-width: 600px) {
  .sudoku-es__modal .sudoku-es__btn.sudoku-es__btn--primary {
    font-size: 1.2rem;     /* texto más grande */
    padding: 14px 24px;    /* más área táctil */
    width: 100%;           /* ocupar todo el ancho */
    box-sizing: border-box;
  }

  /* Espaciado entre botones cuando hay varios */
  .sudoku-es__modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
    
    
.sudoku-es__kbd {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    gap: 6px; /* pequeño espacio entre los fondos */
  }

  .sudoku-es__key {
    flex: 1;
    background: rgba(128, 0, 128, 0.08); /* violeta muy sutil */
    border: none;
    color: var(--se-brand);
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    padding: 12px 0;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, color 0.2s;
  }

  .sudoku-es__key:active {
    background: rgba(128, 0, 128, 0.2); /* un poco más intenso al tocar */
    color: #fff; /* texto blanco para contraste */
  }
    
    
}

/* Título del Sudoku con fondo violeta y tipografía del sitio */
.sudoku-title{
  background:#6b4d5e;          /* violeta de tu paleta */
  color:#ffffff;               /* texto blanco como tus h1 */
  font-family:'Fredoka One', sans-serif;
  text-align:center;
  width:min(100%, 980px);
  margin:12px auto 16px;
  padding:14px 16px;
  border-radius:12px;
  line-height:1.1;
}

/* Desktop: en una sola línea */
.sudoku-title .s-title-top,
.sudoku-title .s-title-bottom{
  display:inline;
  white-space:normal;
}

/* Tamaños de fuente por viewport */
@media (min-width:601px){
  .sudoku-title{ font-size:2rem; }
}
@media (max-width:600px){
  .sudoku-title{
    font-size:1.5rem;
    padding:12px;
  }
  /* Mobile: forzá el salto de línea “arriba/abajo” */
  .sudoku-title .s-title-bottom{
    display:block;
    margin-top:2px;
  }
}

/* Fade-in suave para el modal de victoria */
.sudoku-es__modal.fade-in {
  opacity: 0;
  transform: scale(0.95);
  animation: se-fadein 0.8s ease forwards;
}

@keyframes se-fadein {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Destello global al ganar (overlay blanco suave) */
.sudoku-es__board.win-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  animation: se-win-flash 0.8s ease-out forwards;
}

@keyframes se-win-flash {
  0%   { opacity: 0; }
  20%  { opacity: 0.75; }
  60%  { opacity: 0.35; }
  100% { opacity: 0; }
}