/* 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 h1 {
  font: 800 italic 44px/1 var(--display);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.intro h1::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;
}
.ranking-capture {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
}
.result-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #1f281f;
  border-radius: 14px;
  background: var(--board);
  color: #f1f4ed;
}
.result-team,
.result-team:last-child {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 24px 26px;
  overflow: hidden;
}
.result-team:last-child {
  flex-direction: row-reverse;
  text-align: right;
}
.result-team::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--team-a-ui, #ff858b), transparent 80%);
  opacity: 0.22;
}
.result-team:last-child::before {
  background: linear-gradient(260deg, var(--team-b-ui, #82b6ff), transparent 80%);
}
.result-team > * {
  position: relative;
}
.result-team small {
  color: #a0aba0;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.result-team strong {
  display: block;
  font: 800 italic 26px/1.05 var(--display);
  text-transform: uppercase;
  color: #f1f4ed;
}
.result-shield {
  width: 52px;
  height: 60px;
  font-size: 30px;
  border-radius: 8px 8px 22px 22px;
  box-shadow: inset 0 -5px 0 #0004;
}
/* « Qui a gagné ? » : chaque moitié du bandeau est le bouton « équipe gagne », « Nul » au milieu. */
button.result-team {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.result-team:last-child {
  text-align: right;
}
button.result-team:disabled {
  opacity: 1;
  cursor: default;
}
button.result-team:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: -3px;
}
.result-team::before {
  transition: opacity 0.2s var(--ease-out);
}
button.result-team:hover:not(:disabled)::before {
  opacity: 0.34;
}
.result-team.is-winner::before {
  opacity: 0.62;
}
.result-team.is-winner {
  box-shadow: inset 0 -5px 0 var(--team-a-ui, #ff858b);
}
.result-team.is-winner:last-child {
  box-shadow: inset 0 -5px 0 var(--team-b-ui, #82b6ff);
}
.result-team-text {
  min-width: 0;
}
.win-tag {
  display: inline-block;
  margin-top: 9px;
  padding: 5px 11px;
  border: 1px solid #ffffff3d;
  border-radius: 6px;
  color: #cfd8cb;
  font: 800 italic 14px/1 var(--display);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transform: skewX(-8deg);
}
.result-team.is-winner .win-tag {
  border-color: #f1f4ed;
  background: #f1f4ed;
  color: #0b0e0c;
}
.result-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 150px;
  padding: 16px 22px;
  background: #050806;
  border-inline: 1px solid #1f281f;
}
.draw-btn {
  min-width: 112px;
  padding: 14px 18px;
  border: 1px solid #2f3a2c;
  border-radius: 10px;
  background: #111811;
  color: #f1f4ed;
  font: 800 italic 26px/1 var(--display);
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: inset 0 -5px 0 #0006;
  cursor: pointer;
}
.draw-btn:hover:not(:disabled) {
  border-color: #6f7d6c;
}
.draw-btn.is-winner {
  border-color: var(--gold-mid);
  background: var(--gold-mid);
  color: #14120d;
}
.draw-btn:disabled {
  cursor: default;
}
.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;
}
.rank-export-stage .result-team:not(.is-winner) .win-tag {
  display: none;
}

/* --- 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-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 310px;
  padding: 18px 14px 18px;
  overflow: hidden;
  border-radius: 18px 18px 48px 48px;
  color: #1d1a12;
  text-align: center;
  box-shadow:
    0 18px 32px #0007,
    inset 0 0 0 2px #ffffff59;
}
.fut-1 {
  min-height: 350px;
  background: linear-gradient(160deg, var(--gold-hi) 0%, var(--gold-mid) 40%, var(--gold-lo) 100%);
}
.fut-2 {
  background: linear-gradient(160deg, var(--silver-hi) 0%, var(--silver-mid) 45%, var(--silver-lo) 100%);
}
.fut-3 {
  background: linear-gradient(160deg, var(--bronze-hi) 0%, var(--bronze-mid) 45%, var(--bronze-lo) 100%);
}
.fut-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, #ffffff1f 0 2px, transparent 2px 15px);
  pointer-events: none;
}
.fut-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--team, transparent);
}
.fut-card > * {
  position: relative;
  z-index: 1;
}
.fut-card > .fut-place {
  position: absolute;
  right: 8px;
  top: -14px;
  z-index: 0;
  color: #00000017;
  font: 900 italic 130px/1 var(--display);
  pointer-events: none;
}
.fut-card > .fut-head {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.fut-rating {
  font: 800 42px/0.9 var(--display);
}
.fut-pos {
  margin-top: 4px;
  font: 800 14px/1 var(--display);
  letter-spacing: 1px;
}
.fut-shirt {
  margin: 26px 0 6px;
}
.fut-shirt svg {
  width: 96px;
  height: 90px;
  filter: drop-shadow(0 8px 6px #0005);
}
.fut-1 .fut-shirt svg {
  width: 116px;
  height: 108px;
}
.fut-name {
  font: 800 italic 27px/1.02 var(--display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.fut-team {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.7;
}
.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);
}
.fut-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 6px;
  background: #14120d;
  color: var(--gold-hi);
  font: 800 13px/1 var(--display);
  letter-spacing: 0.8px;
  transform: skewX(-8deg);
}
.fut-title .icon {
  width: 14px;
  height: 14px;
}
.fut-empty {
  justify-content: center;
  min-height: 220px;
  border: 2px dashed var(--line);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-weight: 700;
}
.fut-empty::before,
.fut-empty::after {
  display: none;
}
.fut-empty > .fut-place {
  color: var(--line);
}
@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;
  }
}
.podium.reveal .fut-card {
  animation: fut-reveal 0.7s var(--ease-out) both;
}
.podium.reveal .fut-3 {
  animation-delay: 0.05s;
}
.podium.reveal .fut-2 {
  animation-delay: 0.35s;
}
.podium.reveal .fut-1 {
  animation:
    fut-reveal 0.85s 0.8s var(--ease-out) both,
    mvp-glow 1.1s 1.6s 1;
}
.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-header h3 {
  font: 800 italic 22px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ranking-list {
  gap: 8px;
}
.rank-row,
.rank-row:first-child {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition:
    transform 0.15s,
    border-color 0.15s;
}
.rank-row:hover:not(.rank-dragging) {
  transform: translateX(4px);
  border-color: var(--muted);
}
/* Sans colonne de buts : poignée, place, joueur, titre, commandes. */
.rank-row {
  grid-template-columns: 25px 34px minmax(140px, 1fr) minmax(150px, auto) 112px;
}
.rank-export-stage .rank-row {
  grid-template-columns: 40px minmax(160px, 1fr) minmax(200px, auto);
}
@media (max-width: 900px) {
  .rank-row {
    grid-template-columns: 22px 28px minmax(100px, 1fr) auto;
  }
  .rank-row .rank-title {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
  }
  .rank-row .rank-title-slot {
    display: none;
  }
  .rank-row .rank-controls {
    grid-column: 4;
    grid-row: 1 / span 2;
  }
}
.rank-row.rank-top-1 {
  border-color: #e9c15d8c;
  background: linear-gradient(90deg, #e9c15d24, transparent 65%), var(--raised);
}
.rank-position,
.rank-row:first-child .rank-position {
  color: var(--muted);
  font: 900 italic 30px/1 var(--display);
}
.rank-top-1 .rank-position,
.rank-row.rank-top-1 .rank-position {
  color: var(--gold-mid);
}
.rank-top-2 .rank-position {
  color: var(--silver-mid);
}
.rank-top-3 .rank-position {
  color: var(--bronze-mid);
}
.rank-name {
  font: 800 italic 19px/1.1 var(--display);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.rank-title,
.rank-title:hover {
  border: 0;
  border-radius: 6px;
  background: #14120d;
  color: var(--gold-hi);
  font: 800 13px/1.2 var(--display);
  letter-spacing: 0.8px;
  transform: skewX(-8deg);
}
.rank-goals .goals-value {
  font: 800 21px/1 var(--display);
}
.ranking-footer strong {
  color: var(--lime);
}

/* --- Tournoi --- */
/* Le titre de la vue (h1) 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 h1 {
    font-size: 30px;
    gap: 10px;
  }
  .ranking-capture {
    padding: 12px;
  }
  .result-team,
  .result-team:last-child,
  button.result-team:last-child {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    text-align: center;
  }
  .result-team small {
    display: none;
  }
  .result-team strong {
    font-size: 14px;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
  }
  .result-shield {
    width: 36px;
    height: 42px;
    font-size: 20px;
  }
  .win-tag {
    margin-top: 6px;
    padding: 4px 7px;
    font-size: 11px;
    letter-spacing: 0.6px;
  }
  .result-mid {
    min-width: 0;
    gap: 8px;
    padding: 10px 8px;
  }
  .draw-btn {
    min-width: 64px;
    padding: 11px 10px;
    font-size: 19px;
  }
  .result-verdict {
    font-size: 13px;
    letter-spacing: 0.8px;
  }
  .podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .fut-card {
    min-height: 220px;
    padding: 10px 6px 14px;
    border-radius: 12px 12px 28px 28px;
  }
  .fut-1 {
    min-height: 250px;
  }
  .fut-card > .fut-head {
    left: 8px;
    top: 8px;
  }
  .fut-rating {
    font-size: 24px;
  }
  .fut-pos {
    font-size: 10px;
  }
  .fut-card > .fut-place {
    font-size: 70px;
    top: -6px;
  }
  .fut-shirt {
    margin: 24px 0 2px;
  }
  .fut-shirt svg {
    width: 56px;
    height: 52px;
  }
  .fut-1 .fut-shirt svg {
    width: 66px;
    height: 62px;
  }
  .fut-name {
    font-size: 15px;
  }
  .fut-team {
    display: none;
  }
  .fut-stats b {
    font-size: 16px;
  }
  .fut-stats span {
    font-size: 8px;
    letter-spacing: 0.4px;
  }
  .fut-title {
    padding: 4px 6px;
    font-size: 10px;
  }
  .fut-title .icon {
    display: none;
  }
  .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,
  .podium.reveal .fut-card,
  .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,
  .rank-row:hover:not(.rank-dragging),
  .fixture-card:hover {
    transform: none;
  }
}