/* Teamazo · Carte joueur « Blason », sa fenêtre, notes aux 5 paliers, podium : TOUTES leurs règles. */

/* --- Carte joueur « Blason » (9 octobre 2026) : TOUTES les règles de la carte (blasonHTML), de sa fenêtre
   (move-dialog) et du podium sont ici. Cadre, face, fond, silhouette et bandeau du prénom sont dans un SVG
   (pas de clip-path ni de color-mix en CSS : le podium est exporté par html2canvas). Taille libre : tout est
   en cqw (largeur de la carte = 100 cqw), aux mêmes repères que l’image (paintBlason). Couleurs du palier ou
   de la carte spéciale en variables (--c-ink, --c-num, --c-line, --c-band-ink…), depuis CARD_TIERS. --- */
.tc {
  container-type: inline-size;
  position: relative;
  flex: none;
  width: var(--w, 300px);
  aspect-ratio: 100 / 140;
  color: var(--c-ink);
  font-family: var(--font);
  line-height: 1;
  text-align: left;
}
.tc.is-small {
  aspect-ratio: 100 / 126;
}
.tc-body,
.tc-shape,
.tc-face {
  position: absolute;
  inset: 0;
}
.tc-body {
  filter: drop-shadow(0 1.6cqw 2.2cqw #0000008c);
}
.tc-shape {
  display: block;
  width: 100%;
  height: 100%;
}
.tc-face > * {
  position: absolute;
  z-index: 1;
}
.tc-ovr {
  top: 12.5cqw;
  left: 7.5cqw;
  display: grid;
  justify-items: center;
  width: 24cqw;
}
.tc-ovr b {
  color: var(--c-num);
  font: 800 22cqw/0.82 var(--display);
  letter-spacing: -0.4cqw;
  white-space: nowrap;
}
.tc-ovr > span {
  min-width: 12cqw;
  margin-top: 1.4cqw;
  padding-bottom: 1.6cqw;
  border-bottom: 0.4cqw solid var(--c-line);
  font: 700 7.4cqw/1 var(--display);
  letter-spacing: 0.3cqw;
  text-align: center;
}
.tc-club {
  display: block;
  width: 7.4cqw;
  height: 7.4cqw;
  margin-top: 1.4cqw;
  border: 0.7cqw solid var(--c-line);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--k1) 50%, var(--k2) 50%);
  box-shadow: 0 0 0 0.3cqw #ffffff2e;
}
.tc-badges {
  display: grid;
  gap: 1.4cqw;
  margin-top: 2cqw;
}
.tc-badges i,
.tc-badges svg {
  display: block;
  width: 5.2cqw;
  height: 5.2cqw;
}
.tc-tier {
  top: 13.2cqw;
  right: 11cqw;
  display: grid;
  justify-items: end;
  gap: 2cqw;
}
.tc-tier em {
  font: 800 italic 4cqw/1 var(--display);
  letter-spacing: 0.4cqw;
}
.tc-tier svg {
  width: 7.5cqw;
  height: 7.5cqw;
  margin-top: -0.7cqw;
  color: var(--c-num);
  filter: drop-shadow(0 0.4cqw 0.6cqw #0007);
}
.tc-level {
  display: flex;
  gap: 0.7cqw;
}
.tc-level i {
  display: block;
  width: 1.6cqw;
  height: 3.4cqw;
  background: var(--c-ink);
  opacity: 0.22;
  transform: skewX(-14deg);
}
.tc-level i.on {
  opacity: 0.9;
}
/* Plaque de la carte spéciale, sous la crête. */
.tc-special {
  top: 6.4cqw;
  left: 50%;
  max-width: 70cqw;
  height: 4.95cqw;
  padding: 0 2.64cqw;
  background: var(--c-plate);
  box-shadow: 0 0.5cqw 1.2cqw #0006;
  color: var(--c-plate-ink);
  font: 800 italic 3.3cqw/4.95cqw var(--display);
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%) skewX(-10deg);
}
.tc-special span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Prénom : en grand, en majuscules, sur le bandeau (dessiné dans le SVG). */
.tc-name {
  top: 79cqw;
  right: 7cqw;
  left: 7cqw;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  height: 9.7cqw;
  color: var(--c-band-ink);
}
.tc-name > span,
.tc-name input {
  display: block;
  min-width: 0;
  overflow: hidden;
  font: 800 italic var(--fs) / 1 var(--display);
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Stats sur 2 colonnes de 3 : valeur en gras (alignée à droite), abréviation à côté. */
.tc-stats {
  top: 92.4cqw;
  right: 0;
  left: 0;
  display: grid;
  grid-template-rows: repeat(3, 9.2cqw);
  grid-template-columns: 50cqw 50cqw;
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-stats::before {
  content: '';
  position: absolute;
  top: 0.6cqw;
  left: 49.8cqw;
  width: 0.4cqw;
  height: 26cqw;
  background: var(--c-line);
}
.tc-stats li {
  display: grid;
  grid-template-columns: 11cqw auto;
  align-items: center;
  gap: 1.8cqw;
  height: 8cqw;
  padding-left: 16cqw;
}
.tc-stats li:nth-child(n + 4) {
  padding-left: 4cqw;
}
.tc-stats b {
  font: 800 8cqw/1 var(--display);
  text-align: right;
}
.tc-stats small {
  overflow: hidden;
  font: 600 5.2cqw/1 var(--display);
  white-space: nowrap;
  opacity: 0.86;
}
.tc-stats .tc-form {
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 1.4cqw;
}
.tc-form span {
  display: flex;
  gap: 0.45cqw;
}
.tc-form b {
  width: 11cqw;
}
.tc-form i {
  display: grid;
  place-items: center;
  width: 3cqw;
  height: 5.2cqw;
  border-radius: 0.6cqw;
  color: #fff;
  font: 800 3.2cqw/1 var(--display);
}
.tc-form .f-v {
  background: #1fae55;
}
.tc-form .f-n {
  background: #8b948d;
}
.tc-form .f-d {
  background: #e0434e;
}
.tc-brand {
  top: 123.6cqw;
  left: 35cqw;
  width: 30cqw;
  overflow: hidden;
  font: 800 italic 3.4cqw/3.6cqw var(--display);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.72;
}
/* En petit (podium) : note, poste, pastille, silhouette, prénom ; ni stats ni badges. */
.tc.is-small .tc-ovr {
  top: 12cqw;
  left: 9cqw;
}
.tc.is-small .tc-ovr b {
  font-size: 25cqw;
}
.tc.is-small .tc-ovr > span {
  margin-top: 1.6cqw;
  font-size: 8.6cqw;
}
.tc.is-small .tc-club {
  width: 8cqw;
  height: 8cqw;
}
.tc.is-small .tc-tier {
  top: 12cqw;
  right: 14cqw;
}
.tc.is-small .tc-tier svg {
  width: 10cqw;
  height: 10cqw;
  margin: 0;
}
.tc.is-small .tc-special {
  top: 4.6cqw;
  height: 7.5cqw;
  padding: 0 4cqw;
  font-size: 5cqw;
  line-height: 7.5cqw;
}
.tc.is-small .tc-name {
  top: 87cqw;
  height: 13.7cqw;
}
/* Reflet : il balaie la carte au survol (souris) et une fois à l’ouverture de la fenêtre (.shine). */
.tc-gloss {
  transform: translateX(-20px);
}
@keyframes tc-gloss {
  from {
    transform: translateX(-20px);
  }
  to {
    transform: translateX(150px);
  }
}
/* « Joueur de la saison » : reflets irisés qui ondulent et étoiles qui scintillent (quelques fois). */
@keyframes tc-holo {
  from {
    transform: translateX(-50px);
  }
  to {
    transform: translateX(50px);
  }
}
@keyframes tc-holo-again {
  from {
    transform: translateX(-50px);
  }
  to {
    transform: translateX(50px);
  }
}
@keyframes tc-twinkle {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .tc-body {
    transition: transform 0.25s var(--ease-out);
  }
  .tier-saison .tc-holo {
    animation: tc-holo 3.2s ease-in-out 4 alternate both;
  }
  .tier-saison .tc-stars {
    animation: tc-twinkle 1.4s ease-in-out 6 alternate;
  }
  .pc-card.shine .tc-gloss {
    animation: tc-gloss 1s 0.45s var(--ease-out) both;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tc:hover .tc-body {
    transform: translateY(-1.2cqw);
  }
  .tc:hover .tc-gloss {
    animation: tc-gloss 0.9s var(--ease-out);
  }
  .tier-saison:hover .tc-holo {
    animation: tc-holo-again 1.6s ease-in-out 2 alternate both;
  }
}
/* Fenêtre de la carte. */
.card-dialog {
  width: min(380px, calc(100vw - 24px));
  padding: 12px 16px 14px;
  overflow-x: hidden;
  border-radius: 18px;
}
.pc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.pc-eyebrow {
  color: var(--muted);
  font: 800 italic 13px/1 var(--display);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.card-close {
  flex: none;
}
@keyframes pc-flip {
  from {
    opacity: 0;
    transform: perspective(800px) rotateY(70deg) scale(0.9);
  }
  60% {
    transform: perspective(800px) rotateY(-6deg) scale(1.02);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pc-stage {
  width: min(292px, 100%);
  margin: 0 auto;
}
.card-dialog[open] .pc-stage {
  animation: pc-flip 0.55s var(--ease-out) both;
}
.pc-card .tc {
  --w: 100%;
}
.pc-card .tc-name-edit {
  cursor: text;
}
/* Le champ déborde du bandeau comme le texte (un champ coupe ce qui dépasse de sa boîte). */
.pc-card .tc-name input {
  width: 100%;
  height: calc(var(--fs) * 1.2);
  padding: 0 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
}
.pc-card .tc-name input:hover:not(:disabled) {
  background: #ffffff14;
}
.pc-card .tc-name input:focus {
  outline: 2px solid var(--team);
  outline-offset: -2px;
  background: #ffffff1f;
}
.pc-card .tc-name-edit .icon {
  position: absolute;
  top: 50%;
  right: 0;
  width: 4cqw;
  height: 4cqw;
  opacity: 0.6;
  transform: translateY(-50%);
  pointer-events: none;
}
.pc-card .tc-name input:disabled + .icon {
  display: none;
}
.pc-under {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
}
.pc-status {
  margin: 0;
  color: var(--muted);
  font: 700 12px var(--font);
  letter-spacing: 0.8px;
  text-align: center;
  text-transform: uppercase;
}
/* Réglages sous la carte */
.pc-section {
  margin-top: 14px;
}
.pc-label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font: 800 italic 13px/1 var(--display);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.pc-rating-control {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
}
.pc-step {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raised);
  color: var(--white);
  font: 800 24px/1 var(--display);
}
.pc-step:hover:not(:disabled) {
  border-color: var(--lime);
  color: var(--lime);
}
#pc-rating {
  width: 100%;
  accent-color: var(--lime);
}
.pc-roles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.pc-roles button {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
  color: var(--muted);
  font: 800 italic 15px/1 var(--display);
}
.pc-roles button[aria-pressed='true'] {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--accent-ink, #15200e);
  transform: translateY(-2px);
}
.move-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
/* Maillot en haut, nom d’équipe en entier dessous (2 lignes au plus) : lisible même sur téléphone. */
.move-options button {
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 64px;
  padding: 8px 6px;
  border-color: var(--line);
  background: var(--raised);
  color: var(--white);
  font: 800 italic 14px/1.05 var(--display);
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
}
.move-options button span {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.move-options .icon {
  flex: none;
  width: 22px;
  height: 22px;
}
.pc-present {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raised);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.pc-present input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--lime);
}
.pc-footer {
  margin-top: 12px;
}
.pc-footer .outline-btn {
  justify-content: center;
  width: 100%;
}
.pc-bottom {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
@media (max-width: 420px), (max-height: 700px) {
  .pc-stage {
    width: min(262px, 100%);
  }
  .pc-section {
    margin-top: 11px;
  }
}

/* Feuille de match : numéro, poste et prénom, note. Colonne étroite (Grand écran sur ordinateur, 2 équipes
   côte à côte) : le poste passe sous le prénom pour lui laisser la place. */
.ms-row {
  grid-template-columns: 18px minmax(0, 1fr) auto;
}
.ms-team {
  container-type: inline-size;
}
.ms-who {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.ms-who .ms-name {
  min-width: 0;
}
@container (max-width: 260px) {
  .ms-who {
    display: grid;
    justify-items: start;
    gap: 2px;
  }
  .ms-who .ms-name {
    order: -1;
    max-width: 100%;
  }
  .ms-who .ms-role {
    min-width: 0;
    padding: 2px 4px 1px;
    font-size: 8.5px;
  }
}

/* Notes aux couleurs des 5 paliers de la carte (vestiaire, face-à-face, feuille de match, banc) : bronze cuivré,
   argent, or, platine nacré à reflets glacier (bleu nuit), Crack noir et or. */
.squad-row .squad-rating.tier-bronze,
.tier-bronze .vs-rating,
.ms-rating.tier-bronze,
.seat-rating.tier-bronze,
.ms-ovr.tier-bronze {
  background: linear-gradient(160deg, #f8d3ae, #c47c46 55%, #7a3f1d);
  color: #2b1206;
}
.squad-row .squad-rating.tier-silver,
.tier-silver .vs-rating,
.ms-rating.tier-silver,
.seat-rating.tier-silver,
.ms-ovr.tier-silver {
  background: linear-gradient(160deg, #ffffff, #c9d1da 55%, #8996a4);
  color: #17202a;
}
.squad-row .squad-rating.tier-gold,
.tier-gold .vs-rating,
.ms-rating.tier-gold,
.seat-rating.tier-gold,
.ms-ovr.tier-gold {
  background: linear-gradient(160deg, #fff3c4, #e8bf55 55%, #a6761b);
  color: #2a1b02;
}
.squad-row .squad-rating.tier-platinum,
.tier-platinum .vs-rating,
.ms-rating.tier-platinum,
.seat-rating.tier-platinum,
.ms-ovr.tier-platinum {
  background: linear-gradient(160deg, #ffffff, #b8f0f7 50%, #5fd0e6);
  box-shadow: inset 0 0 0 1px #ffffffb3;
  color: #0a1f4d;
}
.squad-row .squad-rating.tier-elite,
.tier-elite .vs-rating,
.ms-rating.tier-elite,
.seat-rating.tier-elite,
.ms-ovr.tier-elite {
  background: linear-gradient(160deg, #2e2412, #120e07 60%, #020202);
  color: #ffcf4a;
  box-shadow: inset 0 0 0 1px #ffcf4a;
}

/* Podium de l’Après-match : cartes « Blason » en petit, le 1er en carte « Homme du match » ; une marche sous
   chaque carte avec la place. */
.fut-card:not(.fut-empty) {
  min-height: 0;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.fut-card:not(.fut-empty)::before,
.fut-card:not(.fut-empty)::after {
  display: none;
}
.fut-card .tc {
  --w: 100%;
}
.fut-2 .tc,
.fut-3 .tc {
  --w: 90%;
}
.fut-card:not(.fut-empty) > .fut-place {
  position: relative;
  top: auto;
  right: auto;
  display: grid;
  place-items: center;
  width: 86%;
  height: 26px;
  margin-top: 10px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #ffffff26, #ffffff08);
  color: var(--white);
  font: 900 italic 20px/1 var(--display);
}
.fut-1 > .fut-place {
  height: 42px;
  color: #f2c14e;
}
.fut-2 > .fut-place {
  height: 32px;
}
.podium.reveal .fut-1 {
  animation: fut-reveal 0.85s 0.8s var(--ease-out) both;
}
@media (max-width: 760px) {
  .fut-card:not(.fut-empty) > .fut-place {
    font-size: 16px;
  }
  .fut-1 > .fut-place {
    height: 32px;
  }
  .fut-2 > .fut-place {
    height: 24px;
  }
  .fut-3 > .fut-place {
    height: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-dialog[open] .pc-stage {
    animation: none;
  }
}