/* ==========================================================================
   Puissance 4 — habillage.

   Le plateau est dessiné au canevas ; la page porte le choix du mode, le tour
   en cours et le bouton du son. Le plateau est PLUS HAUT QUE LARGE une fois
   compté l'espace du jeton qui attend en haut : c'est là qu'on vise.
   ========================================================================== */
.p4 { display: flex; flex-direction: column; align-items: center; gap: 10px;
      width: 100%; height: 100%; justify-content: center; padding: 6px; }

.p4-modes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.p4-modes button {
  border: 0; border-radius: 999px; cursor: pointer;
  padding: .42rem 1rem; font-size: 13px; font-weight: 600;
  font-family: 'Fredoka', system-ui, sans-serif;
  background: var(--line, #e1e5ec); color: inherit;
}
.p4-modes button[aria-pressed="true"] { background: var(--c-jeu, #3d6ce7); color: #fff; }

.p4-barre { display: flex; align-items: center; gap: 12px; font-size: 14px; min-height: 30px; }
.p4-tour { font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.p4-pion { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.p4-pion.j { background: #f0b429; }
.p4-pion.r { background: #e0484a; }
.p4-serie { opacity: .7; font-size: 13px; }
.p4-son { border: 0; border-radius: 999px; cursor: pointer; width: 32px; height: 32px;
          font-size: 15px; background: var(--line, #e1e5ec); color: inherit; }

.p4-plateau {
  position: relative;
  width: min(100%, 62vh, 460px);
  aspect-ratio: 7 / 7;            /* 6 rangées + la place du jeton qui attend */
  touch-action: manipulation;
}
.p4-plateau canvas { display: block; width: 100%; height: 100%; }

.p4-rejouer {
  border: 0; border-radius: 999px; cursor: pointer;
  padding: .55rem 1.4rem; font-size: 15px; font-weight: 600;
  font-family: 'Fredoka', system-ui, sans-serif;
  background: #ffd866; color: #1f3346; box-shadow: 0 3px 0 #d8ab2e;
}
.p4-rejouer:active { transform: translateY(2px); box-shadow: none; }
.p4-rejouer[hidden] { display: none; }