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

/* --- Carte joueur « Blason » (9 octobre 2026) : TOUTES les règles de la carte (blasonHTML), de sa fenêtre
   (move-dialog) 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). 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 3 lignes (11 octobre 2026), aux mêmes repères que l’image (BLASON_STATS) : MJ et HDM en gros,
   barre de bilan V / N / D (segments proportionnels, le nombre dans chacun), forme en 5 pastilles. */
.tc-stats {
  top: 92.4cqw;
  right: 14cqw;
  left: 14cqw;
}
.tc-big {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0.4cqw minmax(0, 1fr);
  align-items: center;
  height: 8.4cqw;
}
.tc-big > i {
  height: 6.4cqw;
  background: var(--c-line);
}
.tc-big span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6cqw;
  min-width: 0;
}
.tc-big b {
  font: 800 8.4cqw/1 var(--display);
}
.tc-big small {
  font: 600 4.6cqw/1 var(--display);
  white-space: nowrap;
  opacity: 0.86;
}
.tc-big svg {
  flex: none;
  width: 4.4cqw;
  height: 4.4cqw;
  margin-right: -0.8cqw;
  color: var(--c-num);
}
.tc .tc-stats .bilan {
  position: relative;
  display: flex;
  height: 7.6cqw;
  margin-top: 1.2cqw;
  overflow: hidden;
  border-radius: 1.4cqw;
  isolation: isolate;
}
.tc .tc-stats .bilan::before,
.tc .tc-stats .bilan::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
/* Fond gris (barre vide sans match) et reflet du haut, comme sur l’image. */
.tc .tc-stats .bilan::before {
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: 0.16;
}
.tc .tc-stats .bilan::after {
  inset: 0 0 58%;
  background: #ffffff29;
}
.tc .tc-stats .bilan i {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.7cqw;
  color: #fff;
  font: 800 5cqw/1 var(--display);
  font-style: normal;
}
.tc .tc-stats .bilan i + i {
  box-shadow: inset 0.3cqw 0 #00000047;
}
.tc .tc-stats .bilan small {
  font: 700 3.8cqw/1 var(--display);
  opacity: 0.85;
}
.tc-stats .tc-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6cqw;
  margin-top: 2.6cqw;
}
.tc-stats .tc-form > small {
  font: 600 4.6cqw/1 var(--display);
  opacity: 0.86;
}
.tc .tc-stats .form-pills {
  display: flex;
  gap: 1.3cqw;
}
.tc .tc-stats .form-pills i {
  display: grid;
  place-items: center;
  width: 7.8cqw;
  height: 6cqw;
  border-radius: 1cqw;
  color: #fff;
  font: 800 4.2cqw/1 var(--display);
  font-style: normal;
}
.tc .tc-stats .form-pills .f-x {
  position: relative;
  background: none;
}
.tc .tc-stats .form-pills .f-x::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c-ink);
  opacity: 0.16;
}
.tc .tc-stats .f-v {
  background: #1fae55;
}
.tc .tc-stats .f-n {
  background: #8b948d;
}
.tc .tc-stats .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;
}

@media (prefers-reduced-motion: reduce) {
  .card-dialog[open] .pc-stage {
    animation: none;
  }
}