/* Galerie des héros — médaillon biseauté, anneau de rareté, feuille pleine.
   Jetons Fusion (--go-). Propriétés logiques : 360 px, arabe, encoche du téléphone. */

#mAvatar .av-box.is-galerie {
  display: flex;
  flex-direction: column;
  width: min(520px, 100%) !important;
  max-height: calc(100dvh - 12px);
  height: calc(100dvh - 12px);
  overflow: hidden;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 14px calc(12px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: var(--go-bg);
  border: 1px solid var(--go-glass-line);
  border-radius: var(--go-radius-xl);
  box-shadow: var(--go-shadow-lg), 0 0 0 1px var(--go-gold-deep);
}

#mAvatar .av-box.is-galerie > h3,
#mAvatar .av-box.is-galerie > .sub {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#mAvatar .av-box.is-galerie .avgrid {
  flex: 1 1 auto;
  min-block-size: 0;
  margin-top: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

#mAvatar .av-box.is-galerie .actions { flex: none; margin-top: var(--go-space-2); }

.av-gal-top {
  position: sticky;
  inset-block-start: 0;
  z-index: 4;
  padding-block: var(--go-space-2) var(--go-space-3);
  background: linear-gradient(180deg, var(--go-ink-0) 0%, var(--go-ink-0) 78%, transparent);
}

.av-gal-kicker,
.av-heroes-title,
.av-tier,
.av-count,
#pAvMeta {
  font-family: var(--go-font-display);
  font-weight: 500;
}

.av-gal-kicker {
  margin: 0;
  padding-block-start: 2px;
  font-size: max(12px, var(--go-text-xs));
  letter-spacing: var(--go-tracking-wide);
  text-transform: uppercase;
  color: var(--go-gold-mid);
}

.av-heroes-title {
  margin: var(--go-space-1) 0 0;
  font-size: var(--go-text-xl);
  letter-spacing: var(--go-tracking-title);
  line-height: var(--go-leading-tight);
  text-transform: uppercase;
  color: var(--go-gold);
}

.av-count {
  margin: var(--go-space-1) 0 0;
  font-size: max(12px, var(--go-text-sm));
  letter-spacing: 0.08em;
  color: var(--go-text-soft);
}

.av-gal-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 188px;
  margin-block-start: var(--go-space-2);
}

.av-gal-halo {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: min(220px, 70vw);
  block-size: min(220px, 70vw);
}

.av-gal-sweep {
  position: absolute;
  inset: 4%;
  border-radius: var(--go-radius-pill);
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(242, 207, 122, .42), transparent 86%);
  filter: blur(8px);
  animation: havSweep 9s linear infinite;
  pointer-events: none;
}

.av-gal-halo.r-rare .av-gal-sweep { background: conic-gradient(from 0deg, transparent 0 62%, rgba(127, 178, 255, .55), transparent 86%); }
.av-gal-halo.r-epique .av-gal-sweep { background: conic-gradient(from 0deg, transparent 0 62%, rgba(199, 139, 255, .55), transparent 86%); }
.av-gal-halo.r-legendaire .av-gal-sweep { background: conic-gradient(from 0deg, transparent 0 62%, rgba(255, 154, 60, .7), transparent 86%); }

.av-gal-bits { position: absolute; inset: 0; pointer-events: none; }
.av-gal-bits i {
  position: absolute;
  inline-size: 4px;
  block-size: 4px;
  border-radius: var(--go-radius-pill);
  background: var(--go-gold-light);
  opacity: .75;
  animation: havBit 3.8s ease-in-out infinite;
}
.av-gal-bits i:nth-child(1) { inset-block-start: 12%; inset-inline-start: 18%; animation-delay: 0s; }
.av-gal-bits i:nth-child(2) { inset-block-start: 22%; inset-inline-end: 14%; animation-delay: .6s; }
.av-gal-bits i:nth-child(3) { inset-block-end: 18%; inset-inline-start: 12%; animation-delay: 1.1s; }
.av-gal-bits i:nth-child(4) { inset-block-end: 14%; inset-inline-end: 20%; animation-delay: 1.7s; }
.av-gal-bits i:nth-child(5) { inset-block-start: 46%; inset-inline-start: 6%; animation-delay: 2.2s; }
.av-gal-bits i:nth-child(6) { inset-block-start: 40%; inset-inline-end: 8%; animation-delay: 2.8s; }

@keyframes havSweep { to { transform: rotate(1turn); } }
@keyframes havBit {
  0%, 100% { transform: translateY(0); opacity: .25; }
  50% { transform: translateY(-6px); opacity: .9; }
}

.av-gal-name,
.av-gal-meta,
.av-heroes-sub,
.av-hn,
.av-unlock,
.av-go-sanct {
  font-family: var(--go-font-body);
}

.av-gal-name {
  margin: var(--go-space-2) 0 0;
  font-size: var(--go-text-lg);
  font-weight: 600;
  line-height: var(--go-leading-tight);
  color: var(--go-gold-light);
}

.av-gal-meta,
.av-heroes-sub,
.av-unlock {
  margin: var(--go-space-1) auto 0;
  max-inline-size: 34em;
  font-size: max(12px, var(--go-text-sm));
  font-weight: 500;
  line-height: var(--go-leading-body);
  color: var(--go-text-soft);
}

.av-unlock { color: var(--go-gold); }

.av-go-sanct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--go-tap);
  margin-block-start: var(--go-space-3);
  padding-inline: var(--go-space-4);
  border: 0;
  border-radius: var(--go-radius-pill);
  background: var(--go-gold-metal);
  color: var(--go-text-on-gold);
  font-size: max(12px, var(--go-text-sm));
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--go-emboss);
}

.av-go-sanct:focus-visible { outline: 2px solid var(--go-gold-light); outline-offset: 3px; }

.av-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-block: 2px var(--go-space-3);
  scrollbar-width: none;
}

.av-tab {
  flex: 1 0 auto;
  min-block-size: var(--go-tap);
  max-inline-size: 9.2em;
  padding-inline: 10px;
  border-radius: var(--go-radius-pill);
  border: 1px solid var(--wc, var(--go-gold));
  background: transparent;
  color: var(--wc, var(--go-gold));
  font-family: var(--go-font-body);
  font-size: max(12px, var(--go-text-xs));
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.av-tab[aria-selected="true"] {
  background: var(--wc, var(--go-gold));
  color: var(--go-text-on-accent);
}

.av-tab:focus-visible { outline: 2px solid var(--go-gold-light); outline-offset: 2px; }

[dir="rtl"] .av-heroes-title,
[dir="rtl"] .av-gal-kicker,
[dir="rtl"] .av-tier,
[dir="rtl"] #pAvMeta { letter-spacing: 0; }

/* Médaillon : biseau or, ombre interne, filet sombre, anneau de rareté. */
.hav {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  color: #c5ceda;
}

.hav.r-common, .hav.r-emblem { color: #c5ceda; }
.hav.r-rare { color: var(--go-r-rare); }
.hav.r-epique { color: var(--go-r-epique); }
.hav.r-legendaire { color: #ff9a3c; }

.hav-face {
  position: absolute;
  inset: 12%;
  overflow: hidden;
  background: var(--go-ink-2);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.hav-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 3px 4px 8px rgba(0, 0, 0, .55), inset -1px -2px 0 rgba(255, 246, 220, .14);
}

.hav-face img,
.hav-face svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.hav.is-locked .hav-rim {
  position: absolute;
  inset: -7%;
  inline-size: 114%;
  block-size: 114%;
  object-fit: cover;
  object-position: center 18%;
  filter: blur(8px) sepia(.85) saturate(1.6) brightness(1.2);
  opacity: .75;
}

.hav.is-locked .hav-ink {
  position: relative;
  z-index: 1;
  /* Buste net et sombre. Un brightness(0) plein, sur une photo opaque, ne laisse qu'un octogone noir. */
  filter: grayscale(.8) contrast(1.3) sepia(.45) brightness(0.24);
  opacity: 1;
}

.hav.is-locked .hav-face::after {
  box-shadow: inset 0 0 0 1px rgba(255, 246, 220, .35), inset 0 0 18px rgba(242, 207, 122, .28);
}

.hav-ring {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .55)) drop-shadow(0 0 3px rgba(197, 206, 218, .45));
}

.hav.r-rare .hav-ring { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .55)) drop-shadow(0 0 5px rgba(127, 178, 255, .8)); }
.hav.r-epique .hav-ring { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .55)) drop-shadow(0 0 5px rgba(199, 139, 255, .85)); }
.hav.r-legendaire .hav-ring { animation: havLeg 2.6s ease-in-out infinite; }

@keyframes havLeg {
  0%, 100% { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .55)) drop-shadow(0 0 3px rgba(255, 154, 60, .45)); }
  50% { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(255, 140, 40, .95)); }
}

.hav-shine {
  position: absolute;
  inset: 16%;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
  background: linear-gradient(105deg, transparent 36%, rgba(255, 246, 220, .55) 50%, transparent 64%);
  background-size: 240% 100%;
  background-position: 140% 0;
  mix-blend-mode: screen;
  opacity: 0;
}

.hav.is-sel .hav-shine { opacity: 1; animation: havShine 3.4s ease-in-out infinite; }

.hav.hav-lg { inline-size: min(148px, 42vw); block-size: min(148px, 42vw); }

@keyframes havShine {
  0%, 42% { background-position: 140% 0; }
  78%, 100% { background-position: -40% 0; }
}

.av .hav .av-lock,
.hav .av-lock {
  position: absolute;
  inset-block-end: 8%;
  inset-inline-end: 6%;
  inline-size: 16px;
  block-size: 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 2px;
  box-sizing: border-box;
  color: var(--go-gold-light);
  background: rgba(8, 9, 15, .78);
  border-radius: var(--go-radius-pill);
  z-index: 3;
  pointer-events: none;
  filter: none;
}

.av .hav-check,
.hav-check {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -2px;
  inline-size: 18px;
  block-size: 18px;
  width: 18px;
  height: 18px;
  z-index: 3;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .65));
}

.avsec.av-heroes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--go-space-4) var(--go-space-2);
}

.avopt.av-hero,
.avopt.av-hero.sel {
  position: relative;
  min-inline-size: 0;
  border-color: transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--go-font-body);
  letter-spacing: 0;
  touch-action: manipulation;
  color: var(--go-text-soft);
}

.avopt.av-hero:focus-visible { outline: 2px solid var(--go-gold-light); outline-offset: 3px; }

.avsec.av-heroes .avopt .av {
  position: relative;
  inline-size: min(72px, 100%);
  block-size: auto;
  aspect-ratio: 1;
  margin-inline: auto;
}

.av-hn {
  display: block;
  max-inline-size: 100%;
  margin-block-start: var(--go-space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(12px, var(--go-text-xs));
  font-weight: 600;
  line-height: 1.2;
  color: var(--go-text-soft);
}

.avopt.av-hero.r-rare .av-tier { color: var(--go-r-rare); }
.avopt.av-hero.r-epique .av-tier { color: var(--go-r-epique); }
.avopt.av-hero.r-legendaire .av-tier { color: #ff9a3c; }

.av-tier {
  display: inline-block;
  max-inline-size: 100%;
  margin-block-start: 3px;
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: var(--go-radius-pill);
  font-family: var(--go-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 16px;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avopt.av-hero.sel .av-hn { color: var(--go-gold-light); }
.avopt.av-hero.is-locked .av-hn { color: var(--go-text-muted); }

/* Profil : la pastille Changer ne mord plus le médaillon. */
.pav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 0;
}

.pav > .pedit {
  position: static;
  inset: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.pedit-pen { inline-size: 12px; block-size: 12px; flex: none; }

#pAvMeta {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--go-gold);
}

#pAvMeta[hidden] { display: none; }

@media (max-width: 640px) {
  #mAvatar.show { padding: 0; align-items: stretch; }
  #mAvatar .av-box.is-galerie {
    width: 100% !important;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
}

@media (max-width: 389px) {
  .av-heroes-title { font-size: var(--go-text-lg); }
  .av-gal-stage { min-block-size: 168px; }
  .avsec.av-heroes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .avsec.av-heroes .avopt .av { inline-size: min(78px, 100%); }
}

/* Vidéo de héros dans l'aperçu (hook fiche héros, PR #48) : affiche = portrait, vidéo au toucher. */
.hav-face video.hav-video {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 22%;
  background: var(--go-ink-2);
  z-index: 2;   /* au-dessus de la silhouette d'un héros verrouillé (.hav-ink, z-index 1) : la vidéo ne joue plus cachée */
}
.av-gal-play {
  position: absolute;
  inset-block-end: 2px;
  inset-inline-end: calc(50% - min(110px, 35vw));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  padding: 6px 14px 6px 10px;
  border: 1px solid rgba(242, 207, 122, .55);
  border-radius: var(--go-radius-pill);
  background: rgba(14, 10, 6, .82);
  color: #F2CF7A;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.av-gal-play svg { inline-size: 18px; block-size: 18px; flex: none; }
.av-gal-play[data-state="playing"] span,
.av-gal-play[data-state="paused"] span { display: none; }
.av-gal-play[data-state="playing"],
.av-gal-play[data-state="paused"] { padding: 6px 12px; }
.av-gal-play[data-state="error"] { display: none; }
.av-gal-play:focus-visible { outline: 2px solid #F2CF7A; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hav.is-sel .hav-shine,
  .av-gal-sweep,
  .av-gal-bits i,
  .hav.r-legendaire .hav-ring { animation: none; }
  .hav.is-sel .hav-shine { opacity: .4; background-position: 30% 0; }
}