/* Teamazo · Habillage « jeu de foot », 1re passe : menu des modes, Après-match, podium, tournoi, barre mobile, animations. */

/* ==================================================================
   HABILLAGE « JEU DE FOOT » — couche finale : menu des modes, après-match,
   tournoi, barre mobile et animations. Elle prime sur les couches précédentes.
   Rien d’exporté en image (#match-capture, #ranking-capture) n’utilise
   color-mix() ni clip-path, non pris en charge par html2canvas.
   ================================================================== */
:root {
  --ease-snap: cubic-bezier(0.2, 0.9, 0.25, 1.15);
  --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1);
  --gold-hi: #fbe6a2;
  --gold-mid: #e9c15d;
  --gold-lo: #b8862f;
  --silver-hi: #f4f7fa;
  --silver-mid: #c9d1da;
  --silver-lo: #8d99a6;
  --bronze-hi: #f6c79d;
  --bronze-mid: #d58f58;
  --bronze-lo: #8e5530;
  --board: #0b0f0c;
}
button:not(:disabled):not(.player-token):active {
  transform: scale(0.96);
}

/* --- Titre de la vue --- */
.intro h2 {
  font: 800 italic 44px/1 var(--display);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.intro h2::before {
  content: '';
  width: 12px;
  height: 0.78em;
  background: var(--lime);
  transform: skewX(-14deg);
  flex-shrink: 0;
}

/* --- Menu des modes : tuiles inclinées et curseur qui glisse --- */
.main-view-tabs.mode-menu {
  position: relative;
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 820px;
  padding: 6px;
  margin-bottom: 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.mode-menu .mode-cursor {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: var(--cursor-w, 0);
  transform: translateX(var(--cursor-x, 0)) skewX(-10deg);
  background: var(--lime);
  border-radius: 6px;
  transition:
    transform 0.34s var(--ease-snap),
    width 0.34s var(--ease-snap);
}
.main-view-tabs.mode-menu button,
.main-view-tabs.mode-menu button.active,
.main-view-tabs.mode-menu button[data-main-view='postmatch'].active {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  transition: color 0.2s;
}
.main-view-tabs.mode-menu button:hover:not(.active) {
  color: var(--white);
}
.main-view-tabs.mode-menu button.active,
.main-view-tabs.mode-menu button[data-main-view='postmatch'].active {
  color: var(--accent-ink, #15200e);
}
.mode-menu strong {
  display: block;
  font: 800 italic 21px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.main-view-tabs.mode-menu .icon {
  width: 24px;
  height: 24px;
}
.mode-key {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: 700 11px/1 var(--font);
  opacity: 0.55;
}
@media (hover: none) {
  .mode-key {
    display: none;
  }
}

/* --- Entrée d’une vue --- */
@keyframes view-enter {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.view-enter {
  animation: view-enter 0.32s var(--ease-out) backwards;
}
.field-expanded #prematch-view {
  animation: none;
}

/* --- Notifications façon jeu --- */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 22px) skewX(-6deg);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.toast:not([hidden]) {
  animation: toast-in 0.3s var(--ease-snap) both;
  background: #11160f;
  color: #f1f4ed;
  border-left: 5px solid var(--lime);
  font-weight: 700;
  box-shadow: 0 14px 40px #000a;
}
.toast .icon {
  color: var(--lime);
}

/* --- Maillots qui entrent sur le terrain --- */
@keyframes token-enter {
  from {
    opacity: 0;
    scale: 0.4;
  }
  60% {
    opacity: 1;
  }
}
/* Sans « to » et sans remplissage final : le maillot finit à sa propre taille (réduite si l’équipe est nombreuse). */
.player-token.token-enter {
  animation: token-enter 0.42s var(--ease-snap) backwards;
}

/* --- Après-match : tableau de score de stade --- */
.postmatch-view {
  max-width: 1120px;
}

/* « Qui a gagné ? » : chaque moitié du bandeau est le bouton « équipe gagne », « Nul » au milieu. */

.result-verdict {
  margin: 0;
  color: var(--gold-mid);
  font: 800 italic 18px/1.15 var(--display);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
}

/* --- Podium : cartes de joueur façon Ultimate Team --- */
.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 230px));
  justify-content: center;
  align-items: end;
  gap: 22px;
  max-width: none;
  margin: 0 auto 34px;
  padding-top: 22px;
  perspective: 1100px;
}

.fut-shirt {
  margin: 26px 0 6px;
}
.fut-shirt svg {
  width: 96px;
  height: 90px;
  filter: drop-shadow(0 8px 6px #0005);
}

.fut-stats {
  display: flex;
  width: 100%;
  margin: 12px 0 12px;
  border-block: 1px solid #0000002e;
}
.fut-stats span {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}
.fut-stats span + span {
  border-left: 1px solid #0000002e;
}
.fut-stats b {
  font: 800 23px/1 var(--display);
}

@keyframes fut-reveal {
  0% {
    opacity: 0;
    transform: translateY(46px) rotateY(85deg) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(-8px) rotateY(-8deg) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes mvp-glow {
  50% {
    box-shadow:
      0 0 0 5px #fbe6a299,
      0 20px 50px #e9c15d8c;
  }
}

.fut-confetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  pointer-events: none;
}
.podium.reveal .fut-confetti {
  display: block;
}
@keyframes confetti {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r));
  }
}
.fut-confetti i {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 8px;
  height: 14px;
  opacity: 0;
  background: var(--team);
  animation: confetti 1.15s 1.45s var(--ease-out) forwards;
}
.fut-confetti i:nth-child(odd) {
  background: #14120d;
}
.fut-confetti i:nth-child(3n) {
  background: #ffffff;
}
.fut-confetti i:nth-child(1) {
  --dx: -95px;
  --dy: -120px;
  --r: 220deg;
}
.fut-confetti i:nth-child(2) {
  --dx: 90px;
  --dy: -130px;
  --r: -200deg;
}
.fut-confetti i:nth-child(3) {
  --dx: -120px;
  --dy: -40px;
  --r: 160deg;
}
.fut-confetti i:nth-child(4) {
  --dx: 125px;
  --dy: -50px;
  --r: -260deg;
}
.fut-confetti i:nth-child(5) {
  --dx: -60px;
  --dy: -150px;
  --r: 300deg;
}
.fut-confetti i:nth-child(6) {
  --dx: 55px;
  --dy: -155px;
  --r: -140deg;
}
.fut-confetti i:nth-child(7) {
  --dx: -110px;
  --dy: 40px;
  --r: 120deg;
}
.fut-confetti i:nth-child(8) {
  --dx: 115px;
  --dy: 30px;
  --r: -180deg;
}
.fut-confetti i:nth-child(9) {
  --dx: -20px;
  --dy: -170px;
  --r: 240deg;
}
.fut-confetti i:nth-child(10) {
  --dx: 20px;
  --dy: -110px;
  --r: -300deg;
}
.fut-confetti i:nth-child(11) {
  --dx: -135px;
  --dy: -95px;
  --r: 90deg;
}
.fut-confetti i:nth-child(12) {
  --dx: 135px;
  --dy: -90px;
  --r: -90deg;
}

/* --- Après-match : les notes du match --- */

.ranking-list {
  gap: 8px;
}

/* Sans colonne de buts : poignée, place, joueur, titre, commandes. */

.rank-goals .goals-value {
  font: 800 21px/1 var(--display);
}
.ranking-footer strong {
  color: var(--lime);
}

/* --- Tournoi --- */
/* Le titre de la vue (h2 #main-title) suffit : pas de second titre dans l’en-tête du tournoi. */
#tournament-view .season-heading h2 {
  display: none;
}

.season-badge {
  position: relative;
  overflow: hidden;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--raised);
  color: var(--white);
  font: 800 15px/1 var(--display);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.season-badge::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: var(--lime);
  opacity: 0.28;
  transition: width 0.5s var(--ease-out);
}
.cup-bracket {
  display: flex;
  align-items: stretch;
  gap: 36px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.cup-round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 16px;
  min-width: 260px;
}
.cup-round h3 {
  color: var(--muted);
  font: 800 italic 16px/1 var(--display);
  letter-spacing: 2px;
}
.fixture-card {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  transition:
    transform 0.15s,
    border-color 0.15s;
}
.fixture-card:hover {
  transform: translateY(-2px);
}
.cup-round:not(:last-child) .fixture-card::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -37px;
  width: 36px;
  border-top: 2px solid var(--line);
}
.fixture-card.is-ready {
  border-color: var(--lime);
  box-shadow: inset 0 0 0 1px var(--lime);
}
.fixture-card.is-waiting,
.fixture-card.is-bye {
  opacity: 0.6;
}
.fixture-top {
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
@keyframes live-dot {
  50% {
    opacity: 0.25;
  }
}
.fixture-card.is-ready .fixture-top span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lime);
}
.fixture-card.is-ready .fixture-top span:last-child::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  animation: live-dot 1.2s infinite;
}
.fixture-side {
  margin: 6px 0;
  padding-left: 10px;
  border-left: 4px solid var(--side-color, var(--line));
  font: 700 17px/1.1 var(--display);
  text-transform: uppercase;
}
.fixture-side input {
  width: 56px;
  height: 42px;
  font: 800 24px/1 var(--display);
}
.fixture-side.won span {
  color: var(--white);
  font-weight: 800;
}
.fixture-side.won span::after {
  content: ' ◀';
  color: var(--lime);
  font-size: 13px;
}
.fixture-side.lost {
  opacity: 0.45;
}
.season-table .leader td {
  color: var(--white);
  font-weight: 800;
}
.season-table .leader td:first-child {
  color: var(--gold-mid);
}
@keyframes winner-in {
  from {
    opacity: 0;
    transform: scale(0.85) rotate(-2deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes shine {
  from {
    transform: translateX(-130%) skewX(-20deg);
  }
  to {
    transform: translateX(260%) skewX(-20deg);
  }
}
.tournament-winner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  padding: 22px 26px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-mid) 45%, var(--gold-lo));
  color: #1d1a12;
  text-align: center;
  animation: winner-in 0.6s var(--ease-snap) both;
}
.tournament-winner::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, #ffffff8c, transparent);
  animation: shine 1.6s 0.5s 1 both;
}
.tournament-winner small {
  color: #1d1a12;
  font-weight: 800;
  letter-spacing: 3px;
}
.tournament-winner strong {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1d1a12;
  font: 900 italic 38px/1 var(--display);
  text-transform: uppercase;
}
.tournament-winner .icon {
  width: 34px;
  height: 34px;
}

/* --- Barre mobile façon menu de jeu --- */
.mobile-tabs button span:not(.tab-count) {
  font: 800 italic 12px/1 var(--display);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.mobile-tabs button.active::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 24%;
  right: 24%;
  height: 3px;
  border-radius: 3px;
  background: var(--lime);
}
.mobile-tabs button.active .icon {
  transform: translateY(-1px) scale(1.08);
}

/* Le bouton « Partager » du haut couvre déjà le tournoi. */
#tournament-export {
  display: none;
}
@media (max-width: 760px) {
  .main-view-tabs.mode-menu {
    display: none;
  }
  /* Sur téléphone, le bouton Salon Live de l’en-tête suffit, sauf pendant une reconnexion. */

  .intro h2 {
    font-size: 30px;
    gap: 10px;
  }

  .result-verdict {
    font-size: 13px;
    letter-spacing: 0.8px;
  }
  .podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .fut-shirt {
    margin: 24px 0 2px;
  }
  .fut-shirt svg {
    width: 56px;
    height: 52px;
  }

  .fut-stats b {
    font-size: 16px;
  }
  .fut-stats span {
    font-size: 8px;
    letter-spacing: 0.4px;
  }

  .season-heading h2 {
    font-size: 32px;
  }
  .cup-bracket {
    flex-direction: column;
    gap: 18px;
  }
  .cup-round {
    min-width: 0;
  }
  .cup-round .fixture-card::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mode-menu .mode-cursor,
  .view-enter,
  .toast:not([hidden]),
  .player-token.token-enter,
  .fut-confetti i,
  .tournament-winner,
  .tournament-winner::before,
  .fixture-card.is-ready .fixture-top span:last-child::before {
    animation: none !important;
    transition: none !important;
  }
  button:not(:disabled):not(.player-token):active,
  .fixture-card:hover {
    transform: none;
  }
}