/* ----------------------------------------- */
/* 1. Estilos Base (Mobile First)            */
/* ----------------------------------------- */

.kana-grid {
  display: grid;
  /* 6 columnas para el diseño móvil por defecto */
  grid-template-columns: repeat(6, auto); 
  gap: 6px;
  justify-content: center;
  font-family: sans-serif;
  font-size: 24px;
}

.kana-cell {
  --size: 50px;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Estilos de color base */
.kana-cell.kana {
  background: #58585b;
  color: #fff !important;
  cursor: pointer;
}
.kana-cell.kana:hover {
  background-color: #c94b40;
}
.kana-cell.header {
  background: transparent;
  color: #808284;
  font-weight: bold;
}
.kana-cell.empty {
  background: transparent;
  pointer-events: none;
}

/* ----------------------------------------- */
/* 2. Estilos para Tablet y Escritorio       */
/* ----------------------------------------- */

@media (min-width: 769px) {
  /* Activamos el layout de Grid complejo para escritorio */
  .kana-grid {
    grid-template-columns: repeat(12, auto);
  }

  /* --- Posicionamiento Exacto con CSS Grid --- */

  /* Headers (consonantes) - Fila 1 */
  .kana-cell[data-kana="k-header"] { grid-column: 10; grid-row: 1; }
  .kana-cell[data-kana="s-header"] { grid-column: 9; grid-row: 1; }
  .kana-cell[data-kana="t-header"] { grid-column: 8; grid-row: 1; }
  .kana-cell[data-kana="n-header"] { grid-column: 7; grid-row: 1; }
  .kana-cell[data-kana="h-header"] { grid-column: 6; grid-row: 1; }
  .kana-cell[data-kana="m-header"] { grid-column: 5; grid-row: 1; }
  .kana-cell[data-kana="y-header"] { grid-column: 4; grid-row: 1; }
  .kana-cell[data-kana="r-header"] { grid-column: 3; grid-row: 1; }
  .kana-cell[data-kana="w-header"] { grid-column: 2; grid-row: 1; }
  .kana-cell[data-kana="emptyset-header"] { grid-column: 11; grid-row: 1; }

  /* Headers (vocales) - Columna 12 */
  .kana-cell[data-kana="a-header"] { grid-column: 12; grid-row: 2; }
  .kana-cell[data-kana="i-header"] { grid-column: 12; grid-row: 3; }
  .kana-cell[data-kana="u-header"] { grid-column: 12; grid-row: 4; }
  .kana-cell[data-kana="e-header"] { grid-column: 12; grid-row: 5; }
  .kana-cell[data-kana="o-header"] { grid-column: 12; grid-row: 6; }

  /* Fila A - Fila 2 */
  .kana-cell[data-kana="a"] { grid-column: 11; grid-row: 2; }
  .kana-cell[data-kana="ka"] { grid-column: 10; grid-row: 2; }
  .kana-cell[data-kana="sa"] { grid-column: 9; grid-row: 2; }
  .kana-cell[data-kana="ta"] { grid-column: 8; grid-row: 2; }
  .kana-cell[data-kana="na"] { grid-column: 7; grid-row: 2; }
  .kana-cell[data-kana="ha"] { grid-column: 6; grid-row: 2; }
  .kana-cell[data-kana="ma"] { grid-column: 5; grid-row: 2; }
  .kana-cell[data-kana="ya"] { grid-column: 4; grid-row: 2; }
  .kana-cell[data-kana="ra"] { grid-column: 3; grid-row: 2; }
  .kana-cell[data-kana="wa"] { grid-column: 2; grid-row: 2; }

  /* Fila I - Fila 3 */
  .kana-cell[data-kana="i"] { grid-column: 11; grid-row: 3; }
  .kana-cell[data-kana="ki"] { grid-column: 10; grid-row: 3; }
  .kana-cell[data-kana="shi"] { grid-column: 9; grid-row: 3; }
  .kana-cell[data-kana="chi"] { grid-column: 8; grid-row: 3; }
  .kana-cell[data-kana="ni"] { grid-column: 7; grid-row: 3; }
  .kana-cell[data-kana="hi"] { grid-column: 6; grid-row: 3; }
  .kana-cell[data-kana="mi"] { grid-column: 5; grid-row: 3; }
  .kana-cell[data-kana="ri"] { grid-column: 3; grid-row: 3; }

  /* Fila U - Fila 4 */
  .kana-cell[data-kana="u"] { grid-column: 11; grid-row: 4; }
  .kana-cell[data-kana="ku"] { grid-column: 10; grid-row: 4; }
  .kana-cell[data-kana="su"] { grid-column: 9; grid-row: 4; }
  .kana-cell[data-kana="tsu"] { grid-column: 8; grid-row: 4; }
  .kana-cell[data-kana="nu"] { grid-column: 7; grid-row: 4; }
  .kana-cell[data-kana="fu"] { grid-column: 6; grid-row: 4; }
  .kana-cell[data-kana="mu"] { grid-column: 5; grid-row: 4; }
  .kana-cell[data-kana="yu"] { grid-column: 4; grid-row: 4; }
  .kana-cell[data-kana="ru"] { grid-column: 3; grid-row: 4; }

  /* Fila E - Fila 5 */
  .kana-cell[data-kana="e"] { grid-column: 11; grid-row: 5; }
  .kana-cell[data-kana="ke"] { grid-column: 10; grid-row: 5; }
  .kana-cell[data-kana="se"] { grid-column: 9; grid-row: 5; }
  .kana-cell[data-kana="te"] { grid-column: 8; grid-row: 5; }
  .kana-cell[data-kana="ne"] { grid-column: 7; grid-row: 5; }
  .kana-cell[data-kana="he"] { grid-column: 6; grid-row: 5; }
  .kana-cell[data-kana="me"] { grid-column: 5; grid-row: 5; }
  .kana-cell[data-kana="re"] { grid-column: 3; grid-row: 5; }

  /* Fila O - Fila 6 */
  .kana-cell[data-kana="o"] { grid-column: 11; grid-row: 6; }
  .kana-cell[data-kana="ko"] { grid-column: 10; grid-row: 6; }
  .kana-cell[data-kana="so"] { grid-column: 9; grid-row: 6; }
  .kana-cell[data-kana="to"] { grid-column: 8; grid-row: 6; }
  .kana-cell[data-kana="no"] { grid-column: 7; grid-row: 6; }
  .kana-cell[data-kana="ho"] { grid-column: 6; grid-row: 6; }
  .kana-cell[data-kana="mo"] { grid-column: 5; grid-row: 6; }
  .kana-cell[data-kana="yo"] { grid-column: 4; grid-row: 6; }
  .kana-cell[data-kana="ro"] { grid-column: 3; grid-row: 6; }
  .kana-cell[data-kana="wo"] { grid-column: 2; grid-row: 6; }

  /* Caracter 'n' especial */
  .kana-cell[data-kana="n"] { grid-column: 1; grid-row: 4; }
}