/* ===========================================================
   STRIP DE GROUPE — cabaret, rideau rouge, vestiaire des joueurs
   =========================================================== */
body.strip-groupe {
  --theme: #e0303f;
  --theme-2: #ff8a5c;
  --or: #f2c46d;
  --panneau: rgba(24, 8, 16, 0.9);
  background: #10091a;
}
.rideau {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(120, 10, 30, 0.35) 0 18px, rgba(60, 4, 16, 0.35) 18px 36px),
    radial-gradient(70% 50% at 50% 20%, rgba(224, 48, 63, 0.25), transparent 70%),
    #10091a;
}
.affiche { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or); }

.ecran.jeu { gap: 10px; }
.vestiaire { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; flex: none; }
.vj {
  --c: var(--theme);
  width: 76px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px;
  border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.vj .perso { width: 34px; height: 44px; }
.vj .nom { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; font-weight: 800; }
.vj .pts { font-size: 0.55rem; letter-spacing: 1px; color: var(--c); }
.vj.actuel { border-color: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.vj.nu { opacity: 0.85; }
.vj.perd { animation: secousse 0.5s; }
@keyframes secousse { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

.tableau {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center;
  padding: 16px; border-radius: 22px; background: var(--panneau); border: 1px solid rgba(242, 196, 109, 0.25);
  overflow-y: auto;
}
.t-titre { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--or); text-align: center; }
.t-titre:empty { display: none; }
.t-texte { margin: 0; white-space: pre-line; font-family: var(--serif); font-weight: 700; font-size: clamp(1.2rem, 5.4vw, 1.55rem); line-height: 1.25; text-align: center; color: #fff; }
.t-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t-choix:empty { display: none; }
.t-choix .btn { margin: 0; padding: 11px 8px; font-size: 0.9rem; white-space: normal; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; box-shadow: none; }
.t-choix .btn.bonne { background: #1f8a4c; border-color: #3fbf6a; }
.t-choix .btn.fausse { background: #8a1f2b; border-color: #e0303f; }
.t-actions { display: grid; gap: 8px; margin-top: auto; position: sticky; bottom: 0; }
.t-actions:empty { display: none; }
.t-actions .btn { margin: 0; }

.fin { justify-content: safe center; gap: 12px; overflow-y: auto; text-align: center; }
.fin h2 { font-family: var(--serif); font-size: clamp(1.8rem, 8vw, 2.4rem); margin: 0; }
.palmares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 400px; align-self: center; }
.palmares li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.35); border-left: 4px solid var(--c); text-align: left; }
.palmares span { color: var(--muted); font-size: 0.85rem; }
.fin .btn-chrono { max-width: 400px; align-self: center; }
.fin .actions-fin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 400px; align-self: center; }
.fin .actions-fin .btn { margin: 0; }

@media (max-height: 700px) {
  .vj { width: 68px; }
  .vj .perso { width: 28px; height: 36px; }
  .t-texte { font-size: clamp(1.05rem, 5vw, 1.3rem); }
}
@media (prefers-reduced-motion: reduce) { .vj.perd { animation: none; } }
@media (max-width: 340px) {
  .vj { width: 60px; padding: 2px; }
  .vj .perso { width: 24px; height: 31px; }
  .tableau { padding: 12px; gap: 8px; }
}