/* ══ Puissance 4 ═════════════════════════════════════════════════════════════
   Même famille visuelle que .hilo-table/.boom-table (fond feutré + halo radial),
   teinte propre (bleu-violet) pour ne pas concurrencer les jetons rose/or. */
.p4-table { background:linear-gradient(160deg,#0d1a2e 0%,#1a1030 50%,#0d1a2e 100%); border:1px solid rgba(255,255,255,.1); position:relative; overflow:hidden; }
.p4-table::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(96,165,250,.08) 0%, transparent 70%); pointer-events:none; }

/* Entrée rejouée à chaque changement d'écran (voir p4ShowScreen en JS) —
   un seul point d'entrée pour toutes les transitions de menu du jeu. */
.p4-screen-in { animation:p4ScreenIn .38s cubic-bezier(.16,1,.3,1) both; }
@keyframes p4ScreenIn { 0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:translateY(0)} }
@media (prefers-reduced-motion: reduce) { .p4-screen-in { animation:none; } }

.p4-back { color:rgba(255,255,255,.4); font-size:.8rem; margin-bottom:14px; display:inline-flex; background:none; transition:color .15s; }
.p4-back:hover { color:white; }

.p4-mode-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:32px 20px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-align:center; }
.p4-mode-card:hover { transform:translateY(-3px); border-color:rgba(96,165,250,.45); box-shadow:0 10px 28px rgba(0,0,0,.35); }
.p4-mode-card:active { transform:translateY(-1px) scale(.98); }
.p4-mode-card-icon { font-size:2.2rem; }
.p4-mode-card-title { font-family:'Playfair Display',serif; color:white; font-weight:700; font-size:1.1rem; }
.p4-mode-card-desc { color:rgba(255,255,255,.4); font-size:.8rem; max-width:26ch; }

.p4-ai-portrait { width:96px; height:96px; border-radius:50%; border:2px solid rgba(240,208,60,.4); box-shadow:0 0 20px rgba(240,208,60,.15); }

.p4-diff-chip { padding:8px 16px; border-radius:999px; font-size:.85rem; border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.6); background:rgba(255,255,255,.03); transition:all .18s ease; }
.p4-diff-chip:hover { color:white; background:rgba(255,255,255,.08); }
.p4-diff-chip:active { transform:scale(.96); }
.p4-diff-chip.selected { background:rgba(96,165,250,.18); border-color:rgba(96,165,250,.5); color:white; box-shadow:0 0 14px rgba(96,165,250,.18); }

.p4-pulse-dot { width:14px; height:14px; border-radius:50%; background:#60a5fa; animation:p4PulseDot 1.6s ease-out infinite; }
@keyframes p4PulseDot { 0%{box-shadow:0 0 0 0 rgba(96,165,250,.55);} 100%{box-shadow:0 0 0 22px rgba(96,165,250,0);} }

.p4-lobby-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); transition:background .15s ease, transform .15s ease; }
.p4-lobby-row:hover { background:rgba(255,255,255,.08); transform:translateX(2px); }
.p4-lobby-row > div:first-child { min-width:0; }
.p4-lobby-row > div:first-child p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p4-lobby-row .btn-primary { flex-shrink:0; }

/* ── Plateau : traité comme un véritable objet posé sur la table ── */
.p4-board {
  display:flex; justify-content:center; gap:7px; padding:40px 22px 26px;
  background:linear-gradient(155deg,#1c3a63 0%,#152a4a 55%,#0f1f38 100%);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 22px 40px rgba(0,0,0,.5),
    0 2px 0 rgba(255,255,255,.08) inset,
    0 -6px 14px rgba(0,0,0,.35) inset;
  position:relative;
  overflow-x:auto;
}
/* biseau supérieur : une fine ligne claire qui simule l'angle de coupe du plastique/résine du plateau */
.p4-board::before {
  content:''; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  background:linear-gradient(155deg, rgba(255,255,255,.10) 0%, transparent 18%, transparent 82%, rgba(0,0,0,.25) 100%);
}
.p4-column { display:flex; flex-direction:column; gap:7px; position:relative; cursor:pointer; padding:4px; border-radius:14px; transition:background .15s ease; z-index:1; }
.p4-column:hover:not(.p4-column-disabled) { background:rgba(255,255,255,.05); }
.p4-column-disabled { cursor:default; }
.p4-column:hover:not(.p4-column-disabled)::before {
  content:''; position:absolute; top:-34px; left:50%; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.14); border:2px dashed rgba(255,255,255,.32);
}
.p4-column-pressed::before { animation:p4ColumnPress .25s ease; }
@keyframes p4ColumnPress { 0%{transform:translateX(-50%) scale(1)} 40%{transform:translateX(-50%) scale(.82)} 100%{transform:translateX(-50%) scale(1)} }

/* Le "trou" : socle creusé avec un rebord qui capte la lumière, pas un simple cercle plat. */
.p4-cell {
  width:48px; height:48px; border-radius:50%; position:relative; overflow:visible;
  background:radial-gradient(circle at 50% 38%, #0a1526 0%, #050b16 72%, #0a1526 100%);
  box-shadow:
    inset 0 4px 9px rgba(0,0,0,.6),
    inset 0 -2px 3px rgba(255,255,255,.05),
    0 1px 0 rgba(255,255,255,.06);
}
.p4-cell::after {
  content:''; position:absolute; inset:-2px; border-radius:50%; pointer-events:none;
  border:1px solid rgba(255,255,255,.07);
}

.p4-token { position:absolute; inset:0; border-radius:50%; background-size:cover; background-position:center; filter:drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.p4-token-rose { background-image:url('/assets/img/minigames/puissance4/jeton-rose.svg'); }
.p4-token-jaune { background-image:url('/assets/img/minigames/puissance4/jeton-jaune.svg'); }

.p4-token-dropping { animation:p4Drop .55s cubic-bezier(.32,1,.55,1) both; }
@keyframes p4Drop {
  0%   { transform:translateY(calc(-1 * var(--fall-rows, 1) * 55px)) scale(1,1); opacity:.7; }
  62%  { transform:translateY(3px) scale(1,1); opacity:1; }
  76%  { transform:translateY(0) scale(1.1,.86); }
  100% { transform:translateY(0) scale(1,1); opacity:1; }
}

/* Halo de victoire : pulsation sur le jeton + anneau qui se propage, cohérent
   avec le vocabulaire "signal vivant" déjà utilisé ailleurs (.p4-pulse-dot). */
.p4-token-winning { animation:p4WinPulse 1.1s ease-in-out infinite; z-index:2; }
@keyframes p4WinPulse {
  0%,100% { box-shadow:0 0 0 rgba(255,255,255,0); transform:scale(1); }
  50%     { box-shadow:0 0 20px 6px rgba(255,255,255,.6); transform:scale(1.07); }
}
.p4-token-winning::after {
  content:''; position:absolute; inset:-8px; border-radius:50%; pointer-events:none;
  border:2px solid rgba(255,255,255,.55);
  animation:p4WinRing 1.3s ease-out infinite;
}
@keyframes p4WinRing { 0%{transform:scale(.8);opacity:.75;} 100%{transform:scale(1.45);opacity:0;} }

@media (prefers-reduced-motion: reduce) {
  .p4-token-dropping { animation:none; }
  .p4-token-winning { animation:none; box-shadow:0 0 14px 3px rgba(255,255,255,.4); }
  .p4-token-winning::after { animation:none; opacity:.4; transform:scale(1.1); }
  .p4-column-pressed::before { animation:none; }
}

@media (max-width:640px) {
  .p4-cell { width:36px; height:36px; }
  .p4-board { gap:5px; padding:32px 12px 18px; }
  .p4-column { gap:5px; }
  .p4-column:hover:not(.p4-column-disabled)::before { width:32px; height:32px; top:-26px; }
  @keyframes p4Drop {
    0%   { transform:translateY(calc(-1 * var(--fall-rows, 1) * 41px)) scale(1,1); opacity:.7; }
    62%  { transform:translateY(2px) scale(1,1); opacity:1; }
    76%  { transform:translateY(0) scale(1.08,.88); }
    100% { transform:translateY(0) scale(1,1); opacity:1; }
  }
}