/* ═══════════════════════════════════════════════════════════════════════
   sudoku-kids-6x6.css — surcharges propres à la grille 6x6
   Pages : sudoku-junior.html, en/sudoku-junior.html

   Créé le 2026-09-06 avec sudoku-kids.css (point 21). 16 règles qui
   diffèrent d'une taille de grille à l'autre : géométrie de la grille et du
   pavé numérique, tailles de police, séparateurs de blocs.

   ⚠️ À CHARGER APRÈS sudoku-core.css ET sudoku-kids.css — plusieurs règles
   d'ici surchargent les deux à spécificité égale (.cell, .num-btn, .numpad,
   .howto, .legend, #numpad.side-mode…).
   ═══════════════════════════════════════════════════════════════════════ */

.site-title { font-family: 'Baloo 2', sans-serif; font-size: clamp(1.4rem,4vw,2rem); font-weight: 800; line-height: 1.1; }

.site-title .w1 { color: var(--accent-text); }

.site-title .w2 { color: var(--accent2-text); }

.game-wrapper { max-width: 440px; }

/* Grille 6 colonnes */
    .grid-container {
      grid-template-columns: repeat(6, 1fr);
      gap: 4px;
      padding: 12px;
    }

/* Séparateurs de blocs 2×3 via overlay (même technique que sudoku-enfant / FR sudoku-junior) */
    .grid-container::before {
      content: '';
      position: absolute;
      top: 12px; bottom: 12px;
      left: calc(50% - 1px);
      width: 2px;
      background: var(--separator);
      border-radius: 2px;
      pointer-events: none;
    }

.grid-container::after {
      content: '';
      position: absolute;
      top: 12px; bottom: 12px;
      left: 12px; right: 12px;
      background-image:
        linear-gradient(var(--separator), var(--separator)),
        linear-gradient(var(--separator), var(--separator));
      background-repeat: no-repeat;
      background-size: 100% 2px;
      background-position:
        0 calc(33.333% - 0.667px),
        0 calc(66.667% + 0.667px);
      pointer-events: none;
    }

/* Police grille */
    .cell {
      font-size: clamp(1.1rem, 5vw, 1.7rem);
    }

/* Notes 6 = grille 3×2 */
    .cell .notes-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
    }

.cell .notes-grid span { font-size: clamp(0.8rem, 1vw, 0.5rem); }

/* Numpad 6 colonnes */
    .numpad { grid-template-columns: repeat(6, 1fr); }

.numpad.side-mode { grid-template-columns: 1fr; margin-top: 0; }

.numpad.side-mode .num-btn { width: 52px; height: 52px; }

.num-btn { font-size: clamp(1rem, 4vw, 1.5rem); }

/* Ombre manquante sur layout-btn par rapport aux autres boutons
       (Effacer/Indice/Anneau ont tous box-shadow: 3px 3px 0 var(--border),
       pas layout-btn dans le core). Taille jugée correcte par
       Jean-Christophe, seule l'ombre manquait. */
    #layout-btn { box-shadow: 3px 3px 0 var(--border); }

/* ── Aide bouton Anneau ── */
    .ring-row { display: flex; align-items: center; gap: 8px; }