/* La Quête du Cavalier — adaptation aux écrans et au survol. Chargé en dernier : ses règles priment. */

/* ---------- Survol (appareils qui le permettent uniquement) ---------- */

@media (hover: hover) {
  .icon-button:hover { background: var(--surface-2); color: var(--ink); }
  .control:hover:not(:disabled) { border-color: var(--line-strong); }
  .btn:hover { border-color: var(--ink-soft); }
  .level-card:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .cell.is-available:hover::after { transform: scale(1.18); animation: none; }
}

/* ---------- Adaptation aux écrans ---------- */

@media (max-width: 440px) {
  /* Pas de largeur de colonne fixée à la main pour « Recommencer » : la piste `1fr` de
     base (layout.css) a déjà une largeur minimale automatique égale à son contenu, donc
     elle s'élargit d'elle-même pour ce mot insécable, y compris à une taille de texte
     plus grande que celle testée ici — une piste `minmax(0, …)` ne le ferait pas. */
  .control { padding: 6px 2px; font-size: 0.74rem; letter-spacing: -0.01em; }
  .brand { font-size: 1rem; }
  /* Raccourci visuel seulement : gardé dans l'arbre d'accessibilité (pas de display:none),
     pour que « 3 / 10 » reste annoncé comme « 3 / 10 terminés » aux lecteurs d'écran. */
  .progress-pill__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 350px) {
  .app { --chrome: 380px; --gutter: 12px; }
  .controls { grid-template-columns: repeat(2, 1fr); }
  .control { flex-direction: row; min-height: 48px; }
  .progress-pill { display: none; }
}

@media (min-width: 900px) and (min-height: 820px) {
  .app { --app-max: 780px; --chrome: 350px; }
  .board { --cell-max: max(84px, min(112px, calc(360px / var(--cols)))); }
}

/* Grand écran à l'horizontale (ordinateur, tablette) : le plateau occupe le centre sur
   toute la hauteur, les informations du niveau à gauche, le message et les commandes à droite.
   La colonne du plateau est `minmax(0, 1fr)`, jamais `auto` : une piste élastique se voit
   attribuer l'espace restant par la grille elle-même (gouttières, colonnes latérales,
   marge de sécurité comprises), là où un calcul en vw à la main les ignorait et débordait
   sur certaines largeurs. `.board-wrap` garde son confinement `inline-size` (board.css) :
   avec une piste élastique plutôt que `auto`, aucune dépendance circulaire entre la taille
   du conteneur de requête et celle de son contenu. */
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 541px) {
  .app { --app-max: 1440px; --chrome: 96px; --side: clamp(230px, 22vw, 300px); }
  .game {
    display: grid;
    grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
    grid-template-rows: auto auto 1fr;
    justify-content: center;
    align-content: start;
    gap: 16px 36px;
    padding: 16px 0 24px;
  }
  .level-head {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 6px;
  }
  .counter { text-align: left; margin: 10px 0 0; }
  .board-wrap {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
  }
  .board {
    --cell-max: max(84px, min(120px, calc(420px / var(--cols))));
  }
  .message { grid-column: 3; grid-row: 1; }
  .controls {
    grid-column: 3;
    grid-row: 2;
    position: static;
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
    background: none;
  }
}

/* Téléphone à l'horizontale : plateau à gauche, commandes à droite. Même principe de
   piste élastique qu'au-dessus : `minmax(0, 1fr)` pour le plateau, jamais une largeur en
   vw calculée à la main, pour ne jamais déborder horizontalement (exigence du cahier des
   charges) quelle que soit la largeur réelle une fois les gouttières et marges de
   sécurité déduites. */
@media (orientation: landscape) and (max-height: 540px) {
  .app { --app-max: 1100px; --chrome: 70px; }
  .topbar { min-height: 46px; }
  .game {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 40%);
    grid-template-rows: auto auto 1fr;
    align-items: start;
    gap: 10px 22px;
  }
  .board-wrap {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
  }
  .level-head,
  .message,
  .controls { grid-column: 2; }
  .controls {
    position: static;
    padding-top: 0;
    background: none;
  }
}