/* KICKOFF · écran Trophées : vitrine façon salle des trophées.
   Médailles hexagonales en métal (or / argent / bronze), brillance sur les
   trophées décrochés, métal éteint + jauge sur les verrous. S'appuie sur
   tokens.css (.card, .pill, .kicker, .h-disp) et depth/motion. Zéro lib. */

.tr-wrap { display: flex; flex-direction: column; gap: 16px; }

/* ---------- vitrine : compteur ---------- */
.tr-hero {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 20px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(244, 195, 59, .16), transparent 60%),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line);
}
.tr-hero::after {
  content: "";
  position: absolute;
  right: -34px; bottom: -46px;
  font: italic 700 190px/1 var(--disp);
  color: rgba(244, 195, 59, .05);
  content: "/";
  pointer-events: none;
}
.tr-count { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.tr-count-big {
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  font-size: 58px;
  line-height: .9;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(244, 195, 59, .4);
}
.tr-count-tot {
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  color: var(--muted);
}
.tr-count-lbl {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 2px;
}
.tr-bar {
  height: 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
  margin-top: 14px;
}
.tr-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #b8901f, var(--gold));
  box-shadow: 0 0 14px rgba(244, 195, 59, .5);
  transition: width 1.1s cubic-bezier(.2, .8, .2, 1);
}
.tr-line {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 34ch;
}

/* ---------- section par métal ---------- */
.tr-tier { display: flex; flex-direction: column; gap: 10px; }
.tr-tier-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 2px;
}
.tr-tier-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  transform: rotate(45deg);
  flex: none;
}
.tr-tier-name {
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 14px;
}
.tr-tier-count {
  margin-left: auto;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
}
.tr-list { display: flex; flex-direction: column; gap: 9px; }

/* ---------- ligne trophée ---------- */
.tr-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.tr-row.is-locked { opacity: .82; }
.tr-row.is-earned {
  border-color: rgba(244, 195, 59, .26);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(244, 195, 59, .08), transparent 55%),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
}
.tr-row.tr-or.is-earned { border-color: rgba(244, 195, 59, .34); }
.tr-row.is-new {
  border-color: rgba(232, 0, 13, .5);
  box-shadow: 0 0 0 1px rgba(232, 0, 13, .25), 0 10px 30px rgba(232, 0, 13, .25);
}

/* ---------- médaille hexagonale ---------- */
.tr-medal {
  --metal-1: #d8dde6;
  --metal-2: #8b93a1;
  --metal-glow: rgba(216, 221, 230, .5);
  position: relative;
  flex: none;
  width: 60px; height: 66px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(150deg, var(--metal-1), var(--metal-2));
}
.tr-medal.tr-or { --metal-1: #ffe08a; --metal-2: #b8860f; --metal-glow: rgba(244, 195, 59, .6); }
.tr-medal.tr-argent { --metal-1: #eef2f7; --metal-2: #8b93a1; --metal-glow: rgba(216, 221, 230, .55); }
.tr-medal.tr-bronze { --metal-1: #e6a86b; --metal-2: #8a5326; --metal-glow: rgba(208, 138, 78, .5); }

/* gravure intérieure (biseau) */
.tr-medal::before {
  content: "";
  position: absolute;
  inset: 4px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(150deg, rgba(255, 255, 255, .28), rgba(0, 0, 0, .28));
  mix-blend-mode: overlay;
}
.tr-mono {
  position: relative;
  z-index: 1;
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .02em;
  color: rgba(15, 12, 4, .78);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
.tr-seal {
  position: absolute;
  z-index: 2;
  right: 2px; bottom: 4px;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--metal-2);
  color: var(--metal-1);
}

/* décrochée : métal vif + halo + balayage de brillance */
.tr-medal.on { box-shadow: 0 6px 20px -4px var(--metal-glow); }
.tr-medal.on .tr-seal { background: var(--green); border-color: var(--green); color: #06210f; }
.tr-medal.on::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-16deg);
  animation: trShine 4.4s ease-in-out infinite;
}

/* verrouillée : métal éteint, monogramme fantôme */
.tr-medal.off {
  background: linear-gradient(150deg, var(--ink-3), #101014);
  filter: saturate(.2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tr-medal.off::before { opacity: .25; }
.tr-medal.off .tr-mono { color: rgba(255, 255, 255, .16); text-shadow: none; }
.tr-medal.off .tr-seal { color: var(--muted); border-color: var(--line-2); }

@keyframes trShine {
  0%, 62% { left: -60%; }
  84%, 100% { left: 130%; }
}

/* ---------- corps du trophée ---------- */
.tr-body { flex: 1; min-width: 0; }
.tr-head { display: flex; align-items: center; gap: 8px; }
.tr-name {
  font-size: 15px;
  letter-spacing: .01em;
}
.tr-row.is-locked .tr-name { color: rgba(244, 244, 246, .72); }
.tr-newpill { flex: none; }
.tr-cond {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.tr-foot { margin-top: 9px; }
.tr-foot.earned { margin-top: 8px; }
.tr-unlocked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  color: var(--gold);
}
.tr-unlocked::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(244, 195, 59, .8);
}

.tr-prog { display: flex; align-items: center; gap: 10px; }
.tr-prog-track {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.tr-prog-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--red-deep), var(--red-glow));
  transition: width .9s cubic-bezier(.2, .8, .2, 1);
}
.tr-prog-num {
  flex: none;
  font-family: var(--disp);
  font-style: italic;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--txt);
  letter-spacing: .02em;
}
.tr-prog-num i { color: var(--muted); font-style: italic; padding: 0 1px; }

@media (prefers-reduced-motion: reduce) {
  .tr-medal.on::after { animation: none; display: none; }
}