/* ==========================================================================
   Écran : Tirage « VS » (scène sombre)
   ========================================================================== */
.tirage { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.tirage-back {
  position: absolute; top: calc(var(--nav-h) + 28px); left: var(--gutter);
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); transition: color 200ms var(--ease); z-index: 2;
}
.tirage-back:hover { color: var(--text); }

.tirage-select { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(48px, 7vh, 88px); }
.tirage-head { text-align: center; display: flex; flex-direction: column; gap: 20px; }
.tirage-head .title-hero { font-size: clamp(40px, 4.6vw, 88px); }

/* ---------------------------------------------------- l'arène de sélection */
.tirage-arena { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(20px, 3vw, 56px); }
.tirage-player { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.tirage-player__name { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.03em; text-align: center; min-height: 1.4em; white-space: nowrap; }
.tirage-player--b .tirage-player__name { color: var(--text-2); }
.tirage-mystery {
  width: 152px; height: 152px; border-radius: 26%; display: grid; place-items: center;
  font-size: 72px; font-weight: 700; letter-spacing: -0.04em; color: var(--text-3);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.tirage-swap-enter-active { transition: opacity 90ms var(--ease), transform 140ms var(--ease); }
.tirage-swap-leave-active { transition: opacity 50ms linear; }
.tirage-swap-enter-from { opacity: 0; transform: scale(0.94); }
.tirage-swap-leave-to { opacity: 0; }

.tirage-grid { display: grid; grid-template-columns: repeat(var(--cols), clamp(108px, 7.6vw, 148px)); gap: clamp(8px, 0.7vw, 12px); }
.tirage-tile {
  position: relative; aspect-ratio: 1 / 1.1; border-radius: 24px; cursor: default;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding: 22px 10px 12px;
  background: var(--bg-raised);
  /* sortie lente : le curseur laisse une traînée */
  transition: background 420ms var(--ease), transform 420ms var(--ease), opacity 600ms var(--ease), box-shadow 420ms var(--ease);
}
.tirage-tile[disabled] { opacity: 1; }
.tirage-tile__name {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); text-align: center; line-height: 1.2; min-height: 2.4em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tirage-tile.is-cursor { transition-duration: 40ms; background: #2C2C2E; transform: scale(1.05); box-shadow: inset 0 0 0 2px #fff; }
.tirage-tile.is-cursor .tirage-tile__name { color: var(--text); }
.tirage-tile.is-chosen {
  transform: scale(1.1); background: #fff; box-shadow: none;
  animation: tirage-elect 900ms var(--ease) both;
}
.tirage-tile.is-chosen .tirage-tile__name { color: #1D1D1F; font-weight: 600; }
.tirage-tile.is-out { opacity: 0.18; transform: scale(0.96); }
@keyframes tirage-elect {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  100% { box-shadow: 0 0 0 26px rgba(255, 255, 255, 0); }
}

.tirage-foot { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tirage-launch { transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.tirage-launch.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.tirage-note { font-size: var(--fs-sm); color: var(--text-2); transition: opacity 400ms var(--ease); }
.tirage--spinning .tirage-note, .tirage--chosen .tirage-note { opacity: 0; }
.tirage-empty { grid-column: 2; text-align: center; max-width: 18em; }

/* ------------------------------------------------------------- le face-à-face */
.tirage-vs { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(48px, 8vh, 96px); }
/* deux lavis très doux, un par camp : la couleur dit qui est qui, sans effet */
.tirage-vs__wash {
  position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.20) 0%, transparent 42%, transparent 58%, rgba(242, 100, 16, 0.18) 100%);
  animation: tirage-fade-in 1400ms var(--ease) 300ms forwards;
}
.tirage-vs__line {
  position: absolute; left: 50%; top: -10%; width: 1px; height: 120%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: scaleY(0); animation: tirage-line 1000ms var(--ease) 520ms forwards;
}
.tirage-vs__row { position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(24px, 4vw, 90px); }
.tirage-vs__side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.tirage-vs__side .clogo { margin-bottom: 22px; }
.tirage-vs__side--a { animation: tirage-in-left 900ms var(--ease) both; }
.tirage-vs__side--b { animation: tirage-in-right 900ms var(--ease) both; }
.tirage-vs__name { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; white-space: nowrap; }
.tirage-vs__sector { font-size: var(--fs-md); color: var(--text-2); }
.tirage-vs__level {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; font-size: var(--fs-sm); color: var(--text-2);
  opacity: 0; animation: rise 800ms var(--ease) 1300ms forwards;
}
.tirage-vs__sector, .tirage-vs__name { opacity: 0; animation: rise 800ms var(--ease) 1100ms forwards; }

.tirage-vs__mark {
  position: relative; z-index: 1; font-size: clamp(140px, 13vw, 250px); font-weight: 700; letter-spacing: -0.06em; line-height: 0.85;
  padding: 0 0.1em 0 0.02em; color: #fff;
  animation: tirage-slam 700ms var(--ease) 460ms both;
}
/* un reflet net traverse le VS, une seule fois */
.tirage-vs__mark::after {
  content: 'VS'; position: absolute; inset: 0; padding: 0 0.1em 0 0.02em;
  background: linear-gradient(100deg, transparent 40%, rgba(124, 58, 237, 0.9) 47%, rgba(242, 100, 16, 0.9) 53%, transparent 60%);
  background-size: 300% 100%; background-position: 150% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: tirage-sweep 1200ms var(--ease) 1200ms both;
}

.tirage-vs__foot { display: flex; flex-direction: column; align-items: center; gap: 28px; opacity: 0; animation: rise 900ms var(--ease) 1700ms forwards; }
.tirage-vs__dates { font-size: var(--fs-lg); color: var(--text-2); letter-spacing: -0.015em; }
.tirage-vs__skills { margin-top: -16px; font-size: var(--fs-md); color: var(--text-2); }
.tirage-vs__skills b { color: var(--text); font-weight: 600; }
.tirage-vs__actions { display: flex; align-items: center; gap: 28px; }
.tirage-again { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); transition: color 200ms var(--ease); }
.tirage-again:hover { color: var(--text); }

.tirage-sound {
  position: fixed; right: 28px; bottom: 26px; z-index: 40; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-3); background: var(--bg-raised);
  transition: color 200ms var(--ease);
}
.tirage-sound:hover { color: var(--text); }

@keyframes tirage-in-left { from { opacity: 0; transform: translateX(-40vw); } to { opacity: 1; transform: none; } }
@keyframes tirage-in-right { from { opacity: 0; transform: translateX(40vw); } to { opacity: 1; transform: none; } }
@keyframes tirage-slam {
  0% { opacity: 0; transform: scale(1.8); }
  65% { opacity: 1; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes tirage-sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes tirage-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tirage-fade-in { to { opacity: 1; } }

@media (max-width: 1100px) {
  .tirage-arena { grid-template-columns: 1fr 1fr; }
  .tirage-grid { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .tirage-vs__row { grid-template-columns: 1fr; }
  .tirage-vs__line { display: none; }
  .tirage-vs__mark { font-size: 110px; }
}
@media (max-width: 640px) {
  .tirage-grid { grid-template-columns: repeat(3, 96px); }
}