/* =========================================================
   iDjems — puissance4.css
   Puissance 4 version « objet » : plateau bleu laqué percé de 42 trous,
   jetons rouges et jaunes en relief (anneau concentrique + reflet) qui
   tombent derrière la façade. S'appuie sur jeux.css (en-tête, boutons,
   modales, toasts). Mobile d'abord ; le plateau tient dans l'écran.
   ========================================================= */

body.p4 {
  --p4-r: #ef4444;
  --p4-r-2: #f87171;
  --p4-j: #fbbf24;
  --p4-j-2: #fde047;
  --p4-bleu: #1f45c2;
  --p4-bleu-2: #2f5fe0;
  --p4-bleu-3: #16339a;
  --p4-fond: #0b1026;
  --bg: #0a0d1f;
  --bg-2: #101734;
}
body.p4::before {
  background:
    radial-gradient(60% 40% at 50% -8%, rgba(47, 95, 224, 0.38), transparent 70%),
    radial-gradient(42% 30% at 0% 70%, rgba(239, 68, 68, 0.13), transparent 72%),
    radial-gradient(42% 30% at 100% 78%, rgba(251, 191, 36, 0.11), transparent 72%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 60%);
}
.p4 .btn-principal {
  color: #fff;
  background: linear-gradient(135deg, #4b7bff, #1d4ed8);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.p4 .btn-principal:hover:not(:disabled) { box-shadow: 0 12px 34px rgba(37, 99, 235, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.p4 .champ:focus { border-color: #6b93ff; box-shadow: 0 0 0 4px rgba(75, 123, 255, 0.22); }

/* Logo de l'en-tête : 4 jetons en carré */
.p4-logo { display: grid; grid-template-columns: repeat(2, 9px); gap: 2px; padding: 4px; border-radius: 7px; background: var(--p4-bleu); flex: none; }
.p4-logo i { width: 9px; height: 9px; border-radius: 50%; background: var(--p4-fond); }
.p4-logo i:nth-child(2) { background: var(--p4-j); }
.p4-logo i:nth-child(3), .p4-logo i:nth-child(4) { background: var(--p4-r); }

/* ── Jetons ──────────────────────────────────────────────── */
/* .jeton = la case (sert d'unité à l'animation de chute) ; ::before = le disque */
.jeton { position: absolute; width: calc(100% / 7); height: calc(100% / 6); pointer-events: none; will-change: transform; }
.jeton::before {
  content: ''; position: absolute; top: 7.5%; right: 7.5%; bottom: 7.5%; left: 7.5%; border-radius: 50%;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.28);
  transition: filter .35s, transform .35s;
}
/* relief : reflet, anneau concentrique (creux + arête), dégradé de la matière */
.jeton.R::before {
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle, transparent 50%, rgba(80, 0, 6, 0.32) 53%, transparent 58%, rgba(255, 190, 190, 0.22) 61%, transparent 65%),
    radial-gradient(circle at 42% 38%, #ff6b6b 0%, #ef2f37 34%, #c4131c 70%, #8a0a12 100%);
}
.jeton.J::before {
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle, transparent 50%, rgba(120, 70, 0, 0.32) 53%, transparent 58%, rgba(255, 250, 210, 0.3) 61%, transparent 65%),
    radial-gradient(circle at 42% 38%, #fff08a 0%, #ffd23f 34%, #f2ad00 70%, #a96f00 100%);
}
/* dernier jeton posé : petit point lumineux au centre */
.jeton.dernier::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 14%; height: 14%; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}
/* jeton « pastille » dans le texte */
.jeton.mini { position: relative; display: inline-block; vertical-align: -0.16em; width: 1.05em; height: 1.05em; flex: none; }
.jeton.mini::before { top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4); }

/* ── Plateau ─────────────────────────────────────────────── */
.p4-hote { display: flex; justify-content: center; }
.p4-zone {
  --l: min(100%, 560px, max(250px, calc(100dvh - 300px)));
  width: var(--l);
  position: relative;
  user-select: none; -webkit-user-select: none;
}
.p4-fantome { position: relative; aspect-ratio: 7.4 / 1; }
.p4-fantome-in { position: absolute; top: 0; right: 2.703%; bottom: 0; left: 2.703%; }
.p4-jeton-fantome { height: 100%; opacity: 0; transform: translateY(8%); transition: left .12s ease-out, opacity .15s, transform .15s; }
.p4-jeton-fantome.vu { opacity: .92; transform: none; animation: flotte 1.4s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-5%); } }

.p4-cadre {
  position: relative; aspect-ratio: 7.4 / 6.4; border-radius: 5% / 5.8%;
  background: linear-gradient(180deg, var(--p4-bleu-2), var(--p4-bleu) 45%, var(--p4-bleu-3));
  box-shadow:
    inset 0 2px 0 rgba(140, 175, 255, 0.55),
    inset 0 -6px 0 rgba(10, 26, 90, 0.75),
    inset 2px 0 0 rgba(140, 175, 255, 0.18),
    inset -2px 0 0 rgba(10, 26, 90, 0.4),
    0 26px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.35);
}
.p4-jetons, .p4-facade, .p4-colonnes, .p4-halos { position: absolute; top: 3.125%; right: 2.703%; bottom: 3.125%; left: 2.703%; }
/* l'intérieur du plateau (vu à travers les trous vides) */
.p4-jetons {
  overflow: hidden; border-radius: 2%;
  background: radial-gradient(120% 90% at 50% 0%, #142057, #070b1f 70%);
}
.p4-facade { width: 94.6%; height: 93.75%; overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25)); }
.p4-colonnes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.p4-col { position: relative; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.p4-col:disabled { cursor: default; }
.p4-col::after { content: ''; position: absolute; top: 0; right: 6%; bottom: 0; left: 6%; border-radius: 999px; background: rgba(255, 255, 255, 0); transition: background .15s; }
.p4-zone.actif .p4-col.vise:not(:disabled)::after,
.p4-zone.actif .p4-col:focus-visible::after { background: rgba(255, 255, 255, 0.09); }
.p4-zone.actif .p4-col:active:not(:disabled)::after { background: rgba(255, 255, 255, 0.16); }
.p4-col:focus-visible { outline: none; }

/* victoire : halos au-dessus de la façade, les autres jetons s'éteignent */
.p4-halos { pointer-events: none; }
.p4-halos i {
  position: absolute; width: calc(100% / 7); height: calc(100% / 6);
  animation: halo-in .5s cubic-bezier(.2, .9, .3, 1.4) both;
}
.p4-halos i::before {
  content: ''; position: absolute; top: 6%; right: 6%; bottom: 6%; left: 6%; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 14px 3px rgba(255, 255, 255, 0.75), inset 0 0 12px rgba(255, 255, 255, 0.6);
  animation: pulse 1.15s ease-in-out .5s infinite;
}
@keyframes halo-in { from { transform: scale(.4); opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.07); box-shadow: 0 0 26px 8px rgba(255, 255, 255, 0.85), inset 0 0 16px rgba(255, 255, 255, 0.8); } }
.p4-zone.fini .jeton:not(.gagnant)::before { filter: saturate(.55) brightness(.55); }
.jeton.gagnant::before { filter: brightness(1.18) saturate(1.15); }
.p4-zone.fini .p4-col::after { display: none; }

.p4-pieds { display: flex; justify-content: space-between; padding: 0 7%; margin-top: -2px; }
.p4-pieds i {
  width: 13%; height: clamp(8px, 2.4vw, 14px); border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, var(--p4-bleu-3), #0f2672);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45);
}

/* ── Joueurs, statut, actions ────────────────────────────── */
.p4-joueurs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.p4-vs { font-family: var(--titre); font-weight: 700; color: var(--dim); font-size: 0.85rem; text-align: center; display: flex; flex-direction: column; line-height: 1.15; }
.p4-vs small { font-weight: 500; font-size: 0.68rem; color: var(--dim); }
.p4-joueur {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 11px; border-radius: 16px;
  background: var(--surface); border: 1.5px solid var(--border); transition: border-color .25s, box-shadow .25s, background .25s, transform .25s;
}
.p4-joueur.J { flex-direction: row-reverse; text-align: right; }
.p4-joueur .jeton.mini { font-size: 1.35rem; }
.p4-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.p4-nom b { font-family: var(--titre); font-weight: 600; font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p4-nom small { font-size: 0.72rem; color: var(--dim); }
.p4-score { font-family: var(--titre); font-weight: 700; font-size: 1.55rem; line-height: 1; min-width: 1ch; text-align: center; }
.p4-joueur.son-tour.R { border-color: rgba(239, 68, 68, 0.75); background: rgba(239, 68, 68, 0.1); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12), 0 8px 24px rgba(239, 68, 68, 0.18); }
.p4-joueur.son-tour.J { border-color: rgba(251, 191, 36, 0.8); background: rgba(251, 191, 36, 0.09); box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.12), 0 8px 24px rgba(251, 191, 36, 0.16); }
.p4-joueur.son-tour .jeton.mini { animation: rebond 1.2s ease-in-out infinite; }
@keyframes rebond { 50% { transform: translateY(-3px); } }
.p4-joueur.gagne { transform: scale(1.03); border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(255, 255, 255, 0.12); }
.p4-joueur.absent { opacity: .62; }
.p4-joueur.absent .p4-nom b { font-style: italic; font-weight: 500; }

.p4-statut { text-align: center; font-size: 1.02rem; min-height: 1.6em; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.p4-statut b { color: var(--text); }
.p4-statut.moi b { color: #fff; }
.p4-statut.gagne { font-family: var(--titre); font-size: 1.25rem; color: var(--text); animation: apparait .45s cubic-bezier(.2, .9, .3, 1.3); }
.p4-statut.gagne.R b { color: var(--p4-r-2); }
.p4-statut.gagne.J b { color: var(--p4-j); }
.p4-statut.nul { font-family: var(--titre); font-size: 1.15rem; color: var(--text); }
.p4-statut.discret { font-size: 0.9rem; color: var(--dim); }
@keyframes apparait { from { transform: scale(.85); opacity: 0; } }

.p4-actions { display: flex; flex-direction: column; gap: 10px; }
.p4-actions:empty { display: none; }
.p4-actions-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p4-actions-2 .btn { min-height: 48px; font-size: 0.93rem; }
.p4-spect { text-align: center; font-size: 0.86rem; color: var(--dim); }
.p4-invite { padding-top: 16px; }

/* écran de jeu : resserré pour que le plateau tienne sans défiler */
.ecran-local, .ecran-partie { gap: 10px; padding-top: 12px; }

/* ── Accueil ─────────────────────────────────────────────── */
.p4-hero { text-align: center; padding: 10px 0 4px; }
.p4-mini {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 168px; margin: 0 auto 14px; padding: 7px;
  border-radius: 14px; background: linear-gradient(180deg, var(--p4-bleu-2), var(--p4-bleu-3));
  box-shadow: inset 0 1.5px 0 rgba(140, 175, 255, 0.5), inset 0 -3px 0 rgba(10, 26, 90, 0.7), 0 16px 34px rgba(0, 0, 0, 0.5);
}
.p4-mini i { aspect-ratio: 1; border-radius: 50%; background: #0a1130; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6); }
.p4-mini i.R, .p4-mini i.J { animation: tombe .55s cubic-bezier(.55, 0, 1, .45) var(--d) both; }
.p4-mini i.R { background: radial-gradient(circle at 35% 30%, #ff8080, #e3262e 55%, #9b0d14); }
.p4-mini i.J { background: radial-gradient(circle at 35% 30%, #fff3a0, #f7c22c 55%, #b07700); }
@keyframes tombe { from { transform: translateY(-160%); opacity: 0; } 60% { opacity: 1; } }
.p4-hero .titre { font-size: clamp(2rem, 9vw, 2.6rem); }

.p4-mode-tete { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.p4-mode-ico { font-size: 1.6rem; width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.p4-mode-tete h2 { font-size: 1.12rem; }
.p4-noms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p4-nom-champ { position: relative; display: block; }
.p4-nom-champ .jeton.mini { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; z-index: 1; }
.p4-nom-champ .champ { padding-left: 42px; }
.p4-nom-champ.R .champ:focus { border-color: var(--p4-r-2); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2); }
.p4-nom-champ.J .champ:focus { border-color: var(--p4-j); box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2); }
.p4-code { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

@media (min-width: 700px) {
  .p4 .app { max-width: 640px; }
  .p4-zone { --l: min(100%, 600px, max(280px, calc(100dvh - 290px))); }
}
@media (prefers-reduced-motion: reduce) {
  .p4-halos i, .p4-halos i::before, .p4-joueur.son-tour .jeton.mini, .p4-jeton-fantome.vu, .p4-mini i { animation: none !important; }
}