/* ==========================================================================
   Skinparty Arena — le salon multijoueur
   ========================================================================== */

/* ---- les invitations reçues ---- */
.party-invites { margin-bottom: 20px; }
.party-invites[hidden] { display: none; }
.party-invite-list { display: grid; gap: 9px; }
.party-invite {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(120deg, rgba(255,138,0,.12), rgba(255,138,0,.03));
  border: 1px solid rgba(255,138,0,.32);
}
.party-invite-text { flex: 1 1 240px; font-size: 13.5px; }
.party-invite-text span {
  display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-dim, #a7adb5);
}
.party-invite-actions { display: flex; gap: 8px; }
.party-invite-actions .case-open-btn,
.party-invite-actions .trade-decline-btn { padding: 8px 16px; font-size: 12.5px; }

/* ---- mon salon ---- */
.party-mine[hidden] { display: none; }
.party-room {
  padding: 16px; border-radius: 14px;
  background: var(--panel, #14171b); border: 1px solid var(--border, #262b31);
}
.party-room-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 13px;
}
.party-room-case b { font-size: 15px; }
.party-room-case span {
  display: block; margin-top: 3px; font-size: 12px; color: var(--text-dim, #a7adb5);
}
.party-room-count {
  font-size: 19px; font-weight: 900; color: var(--accent, #ff8a00);
  font-variant-numeric: tabular-nums;
}

.party-seats {
  display: grid; gap: 8px; margin-bottom: 13px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.party-seat {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: 10px; font-size: 13px;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
}
.party-seat.is-free { border-style: dashed; opacity: .55; }
.party-seat.is-free i { font-style: normal; font-size: 12px; color: var(--text-faint, #6b7280); }
.party-seat.is-me { border-color: var(--accent, #ff8a00); }
.party-seat-num {
  width: 20px; height: 20px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 10.5px; font-weight: 800;
  background: rgba(255,255,255,.07); color: var(--text-faint, #6b7280);
}
.party-seat-host {
  margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--accent, #ff8a00);
}

/* ---- inviter ---- */
.party-invite-box { position: relative; margin-bottom: 12px; }
.party-invite-box input {
  width: 100%; padding: 9px 12px; border-radius: 9px; font: inherit; font-size: 13px;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
  color: var(--text, #eef1f4);
}
.party-invite-box input:focus { outline: none; border-color: var(--accent, #ff8a00); }
.party-invite-results {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px;
}
.party-invite-pick {
  padding: 6px 11px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 12px;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
  color: var(--text, #eef1f4);
}
.party-invite-pick:hover { border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00); }
.party-invite-none { font-size: 12px; color: var(--text-faint, #6b7280); }

.party-room-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.party-room-note {
  margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--text-faint, #6b7280);
}
.party-room-error {
  margin-top: 9px; padding: 8px 11px; border-radius: 9px; font-size: 12.5px;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); color: #ffb4b4;
}
.party-room-error[hidden] { display: none; }

/* ---- les salons ouverts ---- */
.party-card-seats { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.party-chip {
  padding: 3px 9px; border-radius: 99px; font-size: 11px;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
}
.party-chip.is-host { border-color: var(--accent, #ff8a00); color: var(--accent, #ff8a00); }
.party-card-note {
  font-size: 12px; color: var(--accent, #ff8a00); font-weight: 700; padding: 8px 0 2px;
}

/* ---- le salon complet, avant que les bandes ne partent ----
   Rejoindre un salon qui devient complet le résout côté serveur dans la foulée :
   c'est ce qu'il faut faire, un tirage atomique ne laisse aucune place à la
   triche. Mais à l'écran, ça donnait un plein écran de résultats qui surgissait
   au moment même du clic — celui qui rejoignait ne voyait jamais contre qui il
   jouait. Ces trois secondes lui rendent cette information. Rien ne se décide
   pendant ce temps : tout est déjà joué. */
.party-countdown {
  display: grid; justify-items: center; gap: 14px;
  padding: 30px 16px 34px; text-align: center;
}
.party-countdown[hidden] { display: none; }
.party-go-title {
  font-size: 15px; font-weight: 900; letter-spacing: .02em;
  color: var(--text, #eef1f4);
}
.party-go-players {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 100%;
}
.party-go-player {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 6px 12px 6px 6px; border-radius: 99px;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
}
.party-go-player.is-me { border-color: var(--accent, #ff8a00); }
.party-go-avatar {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 900;
  background: linear-gradient(150deg, #7c3aed, #ec4899); color: #fff;
}
.party-go-name {
  font-size: 12.5px; font-weight: 800; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.party-go-count {
  font-size: 46px; font-weight: 900; line-height: 1;
  color: var(--accent, #ff8a00); font-variant-numeric: tabular-nums;
  min-height: 52px; display: grid; place-items: center;
}
.party-go-count span { animation: party-go-tic .8s ease-out both; }
@keyframes party-go-tic {
  from { opacity: 0; transform: scale(1.7); }
  60%  { opacity: 1; transform: scale(1); }
  to   { opacity: 1; transform: scale(1); }
}
.party-go-note { font-size: 12px; color: var(--text-faint, #6b7480); font-weight: 700; }

/* ---- le compte rendu, une colonne par joueur ---- */
.party-result-box { max-width: min(1100px, 96vw); }
.party-board {
  display: grid; gap: 10px; margin: 14px 0;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}
.party-board[hidden] { display: none; }

/* La bande qui défile, une par joueur. Elle est plus basse que celle d'une
   ouverture de caisse : à six colonnes, il faut que les six tiennent à l'écran
   en même temps — c'est tout l'intérêt de les regarder tourner ensemble. */
.party-col .case-reel-viewport {
  height: 72px; margin-bottom: 8px; max-width: 100%;
}
.party-board.is-crowded .party-col .case-reel-viewport { height: 60px; }

.party-col-avatar {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 900;
  background: linear-gradient(150deg, #7c3aed, #ec4899); color: #fff;
}
.party-col-head i { font-style: normal; color: var(--text-faint, #6b7480); font-weight: 700; }

@media (max-width: 760px) {
  /* À six colonnes de front sur un téléphone, chaque skin ferait 40 px. On passe
     donc à deux colonnes qui REVIENNENT À LA LIGNE : six joueurs font trois
     rangées de deux.

     J'ai d'abord essayé de faire défiler la table de côté. C'était pire : on
     voyait deux joueurs, et rien ne disait que les quatre autres étaient là,
     hors cadre à droite. Or l'intérêt d'un duel à six, c'est justement de les
     regarder tirer tous en même temps. En rangées, tout le monde est à l'écran,
     et on descend — le geste naturel sur un téléphone. */
  .party-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .party-col .case-reel-viewport { height: 58px; }
  .party-board.is-crowded .party-col .case-reel-viewport { height: 52px; }

  /* À six joueurs sur dix manches, il y a soixante vignettes à afficher. Le butin
     se lit déjà en lignes partout (voir .party-item plus bas) ; sur un téléphone à
     deux colonnes, on resserre encore d'un cran : l'arme reste reconnaissable, son
     nom et sa valeur restent lisibles, et le verdict reste atteignable. */
  .party-board.is-crowded .party-item {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 7px;
    padding: 5px 6px;
  }
  .party-board.is-crowded .party-item .item-thumb { width: 44px; height: 33px; }
  .party-board.is-crowded .party-item-name  { grid-area: nom; font-size: 10px; }
  .party-board.is-crowded .party-item-value { grid-area: valeur; font-size: 11px; }
}
.party-col {
  border-radius: 12px; padding: 10px; min-width: 0;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
  transition: border-color .25s, box-shadow .25s, opacity .25s;
}
.party-col.is-winner {
  border-color: #4ade80; box-shadow: 0 0 26px -10px #4ade80;
}
.party-col.is-loser { opacity: .55; }
.party-col-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border, #262b31);
  font-size: 12.5px;
}
.party-col-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-col-total {
  font-weight: 900; color: var(--accent, #ff8a00); font-variant-numeric: tabular-nums;
}
.party-col-items { display: grid; gap: 6px; }

/* Le butin, une ligne par caisse ouverte.
   ------------------------------------------------------------------------
   La vignette faisait auparavant « width: 100% ; aspect-ratio: 4/3 » : dans une
   colonne de 330 px, ça donnait une image de 330 × 247 px. D'où les armes en gros
   plan, et une fenêtre qui s'étirait sur plusieurs écrans dès la troisième manche.
   On revient à une taille de vignette normale — celle du reste du site, entre les
   56 px du reel et les 100 px de la carte de révélation — et on range le nom et la
   valeur À CÔTÉ plutôt qu'en dessous. L'arme reste parfaitement reconnaissable, et
   dix manches à six joueurs tiennent enfin dans la fenêtre. */
.party-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: "vignette nom" "vignette valeur";
  align-items: center; column-gap: 10px; row-gap: 1px;
  padding: 6px 8px; border-radius: 9px;
  background: #0b0d10; border-left: 3px solid var(--rarity-color);
  animation: party-pop .35s ease-out both;
}
@keyframes party-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.party-item .item-thumb { grid-area: vignette; width: 72px; height: 54px; }
.party-item .item-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Le skin qui vient de tomber, le temps de le lire. La bande s'est arrêtée dessus,
   cette lueur dit lequel des skins de la colonne est celui de CETTE manche. */
.party-item.is-fresh {
  box-shadow: 0 0 0 1px var(--rarity-color), 0 0 20px -6px var(--rarity-color);
}

.party-item-name {
  grid-area: nom;
  font-size: 11px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere;
  color: var(--text, #eef1f4);
}
.party-item-value {
  grid-area: valeur;
  font-size: 11.5px; font-weight: 800; color: var(--accent, #ff8a00);
  font-variant-numeric: tabular-nums;
}

/* ---- la progression du duel ---- */
.party-progress {
  height: 4px; border-radius: 99px; overflow: hidden; margin: 0 0 12px;
  background: var(--panel-2, #1b1f24); border: 1px solid var(--border, #262b31);
}
.party-progress[hidden] { display: none; }
.party-progress-fill {
  display: block; width: 0; height: 100%; border-radius: 99px;
  background: var(--accent, #ff8a00);
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .party-item { animation: none; }
  .party-progress-fill { transition: none; }
}