/*
 * Moteur de mots croisés MAISON (N4b/N5) — autonome, sans dépendance.
 * Présentation type grille de presse : bascule Vertical/Horizontal + définitions à
 * GAUCHE, grille quadrillée à DROITE (colonnes 1..X, lignes A..N, sans numéro dans
 * les cases), définition active sous la grille, clavier à l'écran. Charte « glacier ».
 * Lettres BLEUES en saisie, NOIRES une fois figées.
 */
.cw-root { --cw-cell: 36px; color: #10161C; font-family: inherit; }
.cw-layout { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.cw-side { width: 300px; max-width: 100%; flex: none; }
.cw-main { flex: 1; min-width: 280px; display: flex; flex-direction: column; }
/* Mode « plein espace » (challenge) : 2 BLOCS DISTINCTS (cartes). Carte GRILLE à
   gauche (largeur = grille + clavier dessous) ; carte DÉFINITIONS FLEXIBLE à droite
   (remplit l'espace restant, clues sur 2 colonnes). */
.cw-fill .cw-layout { flex-wrap: nowrap; gap: 12px; justify-content: center; }
.cw-fill .cw-main { flex: 0 0 auto; min-width: 0; align-items: center;
  background: #fff; border: 1px solid #E6EEF2; border-radius: 14px; box-shadow: 0 6px 20px rgba(16, 22, 28, .06); padding: 8px; }
/* Bloc définitions : prend le reste MAIS plafonné (ne doit pas écraser la grille) ;
   l'ensemble grille+défs est centré → l'espace restant = marges symétriques. */
/* Largeur ET hauteur pilotées par JS (_fitClues / _syncPanelHeight) : pas de plafond
   fige ici, sinon il bride les colonnes/hauteur calculees -> scroll injustifie. */
.cw-fill .cw-side { width: auto; flex: 0 0 auto; min-width: 240px; max-width: none; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #E6EEF2; border-radius: 14px; box-shadow: 0 6px 20px rgba(16, 22, 28, .06); padding: 10px; }
.cw-fill .cw-gridwrap { justify-content: center; }
/* Zone scrollable à hauteur FIXE (= carte) : le défilement éventuel est VERTICAL ici. */
.cw-fill .cw-cluescroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* Panneau multi-colonnes à hauteur AUTO : s'il dépasse, c'est .cw-cluescroll qui défile
   verticalement (jamais de colonnes fantômes / scroll horizontal). */
.cw-fill .cw-cluepanel { height: auto; max-height: none; overflow: visible; border: 0; border-radius: 0; padding: 0; column-gap: 18px; }
.cw-fill .cw-clue { break-inside: avoid; }

/* Bascule Vertical / Horizontal */
.cw-dirtoggle { display: flex; background: #EEF4F7; border: 1px solid #CFDDE4; border-radius: 100px; padding: 4px; margin-bottom: 12px; }
.cw-dirbtn { flex: 1; border: 0; background: transparent; border-radius: 100px; padding: 9px 12px; font: 700 14px/1 inherit; color: #5A6470; cursor: pointer; transition: .14s; }
.cw-dirbtn:hover { color: #185FA5; }
.cw-dirbtn.on { background: #3FA9C9; color: #fff; }

/* Liste des définitions (gauche, scrollable) */
.cw-cluepanel { max-height: 520px; overflow-y: auto; overflow-x: hidden; border: 1px solid #E6EEF2; border-radius: 12px; padding: 6px; }
.cw-clue span { overflow-wrap: anywhere; } /* défs longues : retour à la ligne, jamais de scroll horizontal */
.cw-clue { display: flex; gap: 8px; align-items: flex-start; padding: 6px 9px; border-radius: 8px; cursor: pointer; font-size: 12.5px; line-height: 1.35; color: #10161C; border: 1px solid transparent; }
.cw-clue:hover { background: #F1F7FA; }
.cw-clue.active { background: #E8F6FB; border-color: #A5E0F2; }
.cw-clue.done { color: #1D9E75; }
.cw-clue.done span:last-child { text-decoration: line-through; }
.cw-clue-b { font-weight: 800; color: #185FA5; min-width: 16px; flex: none; }

/* Grille (centrée dans l'espace dispo) */
.cw-gridwrap { max-width: 100%; overflow-x: auto; padding-bottom: 2px; display: flex; justify-content: center; align-items: flex-start; }
.cw-grid { display: inline-block; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.cw-row { display: flex; }
.cw-cell { width: var(--cw-cell); height: var(--cw-cell); border: 1px solid #D7E0E8; position: relative; box-sizing: border-box; background: #fff; flex: none; }
.cw-block { background: #27313F; border-color: #27313F; }

/* En-têtes : colonnes 1..X (haut), lignes A..N (gauche) — sombres, comme une grille de presse. */
.cw-hrow { display: flex; }
.cw-corner { width: calc(var(--cw-cell) * 0.66); height: calc(var(--cw-cell) * 0.62); flex: none; }
.cw-colh { width: var(--cw-cell); height: calc(var(--cw-cell) * 0.62); flex: none; display: flex; align-items: center; justify-content: center; font: 800 max(10px, calc(var(--cw-cell) * 0.32))/1 inherit; color: #10161C; }
.cw-rowh { width: calc(var(--cw-cell) * 0.66); height: var(--cw-cell); flex: none; display: flex; align-items: center; justify-content: center; font: 800 max(10px, calc(var(--cw-cell) * 0.32))/1 inherit; color: #10161C; }

/* Lettres : BLEUES en saisie, NOIRES une fois la case FIGÉE. */
.cw-cell input {
  width: 100%; height: 100%; border: 0; text-align: center; text-transform: uppercase;
  font-weight: 700; font-size: max(11px, calc(var(--cw-cell) * 0.5)); background: transparent;
  outline: none; color: #2C8FC9; cursor: pointer; caret-color: transparent; padding: 0;
}
.cw-active { background: #DCEFFB; }
.cw-focus { background: #A5E0F2; }
.cw-locked { background: #fff; }
.cw-locked input { color: #10161C; font-weight: 800; cursor: default; }
.cw-ko input { color: #B5392A; }

/* Animation « ronds bleus » à la validation d'un mot. */
.cw-pulse { position: absolute; inset: 3px; border-radius: 50%; border: 3px solid #3FA9C9; opacity: 0; pointer-events: none; z-index: 1; animation: cw-pulse .5s ease-out 2; }
@keyframes cw-pulse { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
.cw-blink { animation: cw-blink .4s ease-in-out 3; }
@keyframes cw-blink { 0%, 100% { background: #E8F6FB; } 50% { background: #A5E0F2; } }

/* Définition active rappelée sous la grille (centrée). */
.cw-caption { display: flex; gap: 10px; align-items: center; justify-content: center; text-align: center; margin: 10px 0 4px; font-size: 14.5px; line-height: 1.3; color: #10161C; min-height: 30px; max-height: 50px; overflow: hidden; }
.cw-cap-badge { width: 26px; height: 26px; border-radius: 50%; background: #3FA9C9; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: none; }
/* En carte : la définition active = simple texte (lettre en bleu), SANS encadré. */
.cw-fill .cw-caption { background: none; border: 0; border-radius: 0; padding: 1px 0; margin: 4px 0 2px; min-height: 0; font-size: 13px; gap: 6px; }
.cw-fill .cw-cap-badge { width: auto; height: auto; border-radius: 0; background: none; color: #185FA5; font-size: 14px; font-weight: 800; }

/* Clavier à l'écran. */
.cw-kb { display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.cw-fill .cw-kb { width: 100%; max-width: none; } /* calé sur la largeur de la grille (carte) */
.cw-kb-row { display: flex; gap: 5px; justify-content: center; }
.cw-key { flex: 1; min-width: 0; height: 40px; border: 1px solid #CFDDE4; border-radius: 8px; background: #fff; font: 700 14px/1 inherit; color: #10161C; cursor: pointer; -webkit-user-select: none; user-select: none; }
.cw-key:hover { border-color: #3FA9C9; color: #185FA5; }
.cw-key:active { background: #E8F6FB; }
.cw-key-fn { flex: 1.7; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 12.5px; color: #185FA5; white-space: nowrap; overflow: hidden; padding: 0 4px; }
.cw-key-lbl { overflow: hidden; text-overflow: ellipsis; }

.cw-tools { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0 0 10px; }
.cw-btn { border: 1px solid #CFDDE4; background: #fff; border-radius: 100px; padding: 9px 17px; font: 700 14px/1 inherit; color: #10161C; cursor: pointer; }
.cw-btn:hover { border-color: #3FA9C9; color: #185FA5; }
.cw-btn-sm { padding: 8px 14px; font-size: 13px; }
.cw-msg { font-weight: 600; min-height: 0; font-size: 14px; text-align: center; }

/* Grille fermée (challenge résolu) : injouable. */
.cw-closed .cw-grid { pointer-events: none; }
.cw-closed .cw-kb, .cw-closed .cw-clue, .cw-closed .cw-dirtoggle { pointer-events: none; opacity: .6; }

/* Mobile : grille d'abord, définitions ensuite (flux naturel, pas de hauteur fixe). */
@media (max-width: 760px) {
  .cw-layout { flex-direction: column; }
  .cw-fill .cw-layout { flex-wrap: wrap; }
  .cw-side { order: 2; width: 100%; flex: none; }
  .cw-main { order: 1; width: 100%; }
  .cw-fill .cw-main { width: 100%; flex: 1 1 auto; }
  .cw-cluepanel { max-height: 300px; }
  .cw-kb { max-width: 100%; }
  /* Challenge sur mobile : on masque la LISTE des définitions ; seule la définition
     active (sous la grille) reste affichée. */
  .cw-fill .cw-side { display: none; }
  .cw-key-fn { flex: 1.4; font-size: 11px; gap: 3px; }
}
@media (max-width: 460px) {
  .cw-key-fn .cw-key-lbl { display: none; } /* icône seule : « fermer »/« suppr » ne débordent plus */
  .cw-key-fn { flex: 1; }
}