/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS — keyframes, transitions, responsive
   ═══════════════════════════════════════════════════════════════ */

@keyframes pulse-arrow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes piece-appear {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.piece-animate {
  animation: piece-appear 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.shake {
  animation: shake 300ms ease-in-out;
}

@keyframes dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ── Responsive — tablette (≤ 1024px) ────────────────────────── */
/* On conserve 3 colonnes mais on réduit les panneaux latéraux   */

@media (max-width: 1024px) {
  #app {
    grid-template-columns: 180px 1fr 180px;
  }

  :root {
    --board-size: min(56vh, 46vw, 440px);
  }

  .cylinder-indicator { display: none; }
}

/* ── Responsive — mobile (≤ 760px) ───────────────────────────── */
/* Passage en colonne unique : panneaux au-dessus et en-dessous  */

@media (max-width: 760px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "header"
      "left"
      "game"
      "right"
      "footer";
    padding: 0 10px;
    gap: 0;
  }

  :root {
    --board-size: min(86vw, 60vh, 460px);
  }

  /* Panneaux latéraux : disposition horizontale wrappée */
  .side-panel {
    width: 100%;
    padding: 10px 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .side-panel-left,
  .side-panel-right {
    padding: 10px 0;
  }

  /* Chaque section prend au moins 160px et s'étire */
  .side-panel .panel-section { flex: 1; min-width: 160px; }

  /* La section "Coups" prend toute la largeur en mobile */
  .moves-section {
    flex-basis: 100%;
    max-height: 140px;
  }

  /* En mobile le panneau droit n'a pas besoin d'être flex colonne */
  .side-panel-right {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #game-controls-right {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .cylinder-indicator { display: none; }
  .btn-label { display: none; }

  .player-bar {
    width: calc(var(--board-size) + 20px);
  }
}

/* ── Responsive — très petit mobile (≤ 420px) ────────────────── */

@media (max-width: 420px) {
  :root {
    --board-size: min(90vw, 55vh, 340px);
  }

  .player-bar { padding: 6px 8px; width: calc(var(--board-size) + 20px); }
  .player-timer { font-size: 13px; padding: 3px 6px; }
  .player-name { font-size: 11px; }
  .difficulty-selector .diff-btn { font-size: 10px; padding: 5px 2px; }
  .rank-labels .label { width: 14px; font-size: 10px; }
}