/* TIG Gacha — l'identité des cartes TIG dessinées par la TIG : encre, papier crème et rose TIG ;
   Big Shoulders Display en capitales pour les titres, Archivo pour le reste ; coins coupés et rayures
   roses en biais, rien d'autre. Les sachets et les cartes gardent leur propre style (Fraunces, or).
   La couche « Identité TIG », en fin de fichier, habille l'interface par-dessus les règles de base. */

:root {
  /* Identité TIG, d'après ses cartes Goon-tier : encre, papier crème, rose TIG. */
  --ink: #0b0a0d;
  --panel: #16131a;
  --panel-2: #211c25;
  --line: #322b37;
  --cream: #f4ecdc;
  --paper: #f4ecdc;
  --paper-2: #e4d9c3;
  --ink-soft: #4a4248;
  --muted: #a8a0ad;
  --gold: #ff2d8a;
  --gold-deep: #c41866;
  --pink: #ff2d8a;
  --pink-deep: #c41866;
  /* L'or reste celui des sachets et des cartes, qui gardent leur propre style. */
  --card-gold: #e0c48a;
  --essence: #8fd0e8;
  --danger: #ff8aa0;

  --r0: #c5ccd6;
  --r1: #7dcea0;
  --r2: #7eb6ff;
  --r3: #c9a6ff;
  --r4: #f0c15a;
  --r5: #ff6b86;
  --r6: #ff2d95;

  --display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --ui: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Coin coupé en bas à droite, comme le cadre des cartes TIG. */
  --cut: polygon(0 0, 100% 0, 100% calc(100% - .7rem), calc(100% - .7rem) 100%, 0 100%);
  --hatch: repeating-linear-gradient(-55deg, var(--pink) 0 5px, transparent 5px 11px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { background: var(--ink); color: var(--cream); }
body { margin: 0; min-height: 100dvh; font: 400 16px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
body.lock { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button:not(:disabled) { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.backdrop { display: none; }

.r0 { --rc: var(--r0); }
.r1 { --rc: var(--r1); }
.r2 { --rc: var(--r2); }
.r3 { --rc: var(--r3); }
.r4 { --rc: var(--r4); }
.r5 { --rc: var(--r5); }
.r6 { --rc: var(--r6); }
.rname { font-weight: 600; color: var(--rc); }

.eyebrow { margin: 0; color: var(--gold); letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; font-weight: 600; }

/* ---------- Barre du haut ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
  padding: max(.5rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) .5rem max(1.25rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
}
/* Le flou vit sur un calque à part : posé sur la barre elle-même, il
   piégerait le dock fixe du mobile à l'intérieur du header. */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}
.wordmark { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
/* Son logo : le ninja masqué « TIG GACHA », en pastille sur son fond d'origine. */
.wordmark-logo { width: 2.75rem; height: 2.75rem; border-radius: .7rem; box-shadow: 0 0 0 1px color-mix(in srgb, #ff2d95 35%, transparent); }
.wordmark-name { font: 560 1.35rem/1 var(--display); letter-spacing: -.03em; }

.tabs { position: relative; display: flex; align-items: center; gap: .25rem; }
.tabs a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .25s ease;
}
.tabs a svg { display: none; width: 1.3rem; height: 1.3rem; }
.tabs a:hover:not([aria-current="page"]) { color: var(--cream); }
.tabs a[aria-current="page"] { color: var(--ink); }
/* La pilule crème glisse d'un onglet à l'autre. */
.tab-ink {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: var(--w, 0);
  height: 2.2rem;
  margin-top: -1.1rem;
  border-radius: 999px;
  background: var(--cream);
  transform: translateX(var(--x, 0));
  transition: transform .4s var(--ease), width .4s var(--ease);
}
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: .7rem;
  font-weight: 700;
}

.wallet { margin-left: auto; display: flex; gap: .5rem; }
.pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem .35rem .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.pill small { color: var(--muted); font-weight: 500; font-size: .78rem; }
.pill:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); }
.pill-timer { font-variant-numeric: tabular-nums; }
.pill-label { display: none; }
@media (min-width: 1180px) { .pill-label { display: inline; } }
/* Icônes des compteurs : un mini sachet pour les boosters, un cristal pour l'essence. */
.ico-pack, .ico-essence { flex: none; display: inline-block; }
.ico-pack {
  width: .62rem;
  height: .86rem;
  border-radius: 1.5px;
  background:
    linear-gradient(180deg, transparent 0 14%, rgba(7, 9, 12, .55) 14% 20%, transparent 20% 78%, rgba(7, 9, 12, .55) 78% 84%, transparent 84%),
    linear-gradient(160deg, #ffe9b0, var(--gold) 50%, #a77b35);
}
.ico-essence {
  width: .78rem;
  height: .9rem;
  background: linear-gradient(150deg, #e6f8ff, var(--essence) 45%, #3a87a6);
  clip-path: polygon(50% 0, 100% 36%, 50% 100%, 0 36%);
}
/* Anneau autour du sachet : il se remplit jusqu'au prochain booster gratuit. */
.ring { position: relative; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.ring circle { fill: none; stroke-width: 2.6; }
.ring-bg { stroke: color-mix(in srgb, var(--cream) 14%, transparent); }
.ring-fg { stroke: var(--gold); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.pill-stock { padding-left: .3rem; }
/* Pendant le chargement, les compteurs scintillent au lieu d'afficher des valeurs provisoires. */
.wallet.is-loading strong { color: transparent; border-radius: .3rem; background: var(--panel-2); animation: skel 1.2s ease-in-out infinite; }
.skel { display: block; border-radius: .6rem; background: linear-gradient(90deg, var(--panel), var(--panel-2) 50%, var(--panel)) 0 0 / 200% 100%; animation: skel 1.2s ease-in-out infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel-eyebrow { width: 5rem; height: .7rem; }
.skel-title { width: min(320px, 70vw); height: 4rem; }
.skel-line { width: min(300px, 70vw); height: .9rem; }
.rail .skel-line { width: 100%; height: 1.4rem; margin-bottom: .6rem; }
.skel-pack { width: min(230px, 60vw); aspect-ratio: 640 / 1176; border-radius: 1rem; margin: .8rem 0 .4rem; }
.skel-btn { width: 15rem; height: 3.5rem; border-radius: 999px; }
.pill.is-bumped { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.08); } }
/* Gain ou dépense d'essence, qui s'envole sous le compteur. */
.pill-delta {
  position: absolute;
  right: .6rem;
  top: 100%;
  font-weight: 600;
  font-size: .9rem;
  color: var(--essence);
  pointer-events: none;
  animation: delta 1.1s var(--ease) forwards;
}
.pill-delta.is-spent { color: var(--danger); }
@keyframes delta {
  0% { transform: translateY(2px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(22px); opacity: 0; }
}

.account { display: flex; align-items: center; gap: .6rem; }
.account:empty { display: none; }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line); flex: none; }
.avatar-empty { display: inline-block; background: var(--panel-2); }
.account-name { font-weight: 500; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 1.5rem 0 5rem; }

/* ---------- Boutons ---------- */

.btn, .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.btn:hover:not(:disabled), .ghost:hover:not(:disabled) { border-color: var(--gold); }
.btn:active:not(:disabled), .ghost:active:not(:disabled) { transform: scale(.97); }
.btn:disabled, .ghost:disabled { color: var(--muted); cursor: not-allowed; }
.btn-tag { color: var(--essence); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Action principale : la pilule crème. */
.btn.btn-primary {
  flex-direction: column;
  gap: .1rem;
  min-height: 3.25rem;
  min-width: 14rem;
  padding: .55rem 1.4rem;
  border: 0;
  background: var(--cream);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  transition: transform .15s ease-out, background .15s ease-out;
}
.btn.btn-primary:hover:not(:disabled) { background: #fff; }
.btn.btn-primary:active:not(:disabled) { transform: scale(.96); }
.btn.btn-primary:disabled { background: var(--panel-2); color: var(--muted); }
.btn.btn-big { min-width: 15rem; min-height: 3.5rem; font-size: 1.1rem; }
.btn.btn-primary.btn-small { min-width: 0; min-height: 2.5rem; padding: 0 1rem; font-size: .9rem; }
.btn-sub { font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.claim {
  align-self: flex-start;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  transition: transform .15s ease;
}
.claim:hover { background: #ecd3a0; }
.claim:active { transform: scale(.96); }
.text-btn, .link-btn, .btn-ghost {
  padding: .3rem 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: .88rem;
  text-align: left;
  text-decoration: none;
}
.text-btn:hover, .link-btn:hover, .btn-ghost:hover { color: var(--cream); }
.icon-btn { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); }
.icon-btn svg { width: 1.2rem; height: 1.2rem; }
.icon-btn:hover { color: var(--cream); background: var(--panel-2); }
.btn.btn-discord { border-color: transparent; background: #5865f2; color: #fff; }
.btn.btn-discord:hover:not(:disabled) { background: #6c78ff; border-color: transparent; }

/* ---------- Accueil ---------- */

.atelier {
  display: grid;
  grid-template-columns: auto 300px;
  justify-content: center;
  align-items: center;
  gap: 4.5rem;
  min-height: calc(100dvh - 9rem);
}
.stage { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }
.stage-title { font: 560 clamp(3.2rem, 7vw, 5.4rem)/.92 var(--display); letter-spacing: -.045em; }
.lede { margin: 0; max-width: 34ch; color: var(--muted); }
.booster-pack { width: min(230px, 60vw); margin: .8rem 0 .4rem; animation: float 5.6s ease-in-out infinite; }
.booster-pack:hover { animation-play-state: paused; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-12px) rotate(1.2deg); }
}
.stock-note { margin: 0; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

.rail { display: flex; flex-direction: column; gap: .85rem; padding: .4rem 0 .4rem 1.5rem; border-left: 1px solid var(--line); }
.meter { display: grid; gap: .3rem; }
.meter header { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; color: var(--muted); }
.meter strong { color: var(--cream); font-weight: 560; font-variant-numeric: tabular-nums; }
.track { display: block; height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--cream) 18%, transparent); overflow: hidden; }
.track i { display: block; height: 100%; background: var(--gold); transition: width .6s var(--ease); }
.track-lg { max-width: 420px; margin-top: .9rem; }
.rail-block { display: flex; flex-direction: column; gap: .4rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.rail-title { margin: 0; font: 500 1.15rem/1.2 var(--display); letter-spacing: -.03em; }
.rail-title span { margin-left: .35rem; font: 500 .82rem/1 var(--ui); letter-spacing: 0; color: var(--gold); }
.rail-note { margin: 0; color: var(--muted); font-size: .85rem; }
.daily { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .75rem; align-items: center; }
.daily img { width: 52px; height: 72px; object-fit: cover; border-radius: .4rem; }
.daily .ghost { margin-top: .35rem; align-self: flex-start; }
.daily > div { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.rail-links { display: flex; flex-direction: column; align-items: flex-start; padding-top: .5rem; border-top: 1px solid var(--line); }

/* Entrée de l'accueil, une seule fois : le texte se met au point, puis le sachet. */
.intro .stage > * { animation: rise .7s var(--ease) both; animation-delay: calc(var(--k, 0) * 80ms); }
.intro .stage > :nth-child(2) { --k: 1; }
.intro .stage > :nth-child(3) { --k: 2; }
.intro .stage > :nth-child(5) { --k: 4; }
.intro .stage > :nth-child(6) { --k: 5; }
.intro .stage > .booster-pack { animation: rise .7s var(--ease) .24s both, float 5.6s ease-in-out .94s infinite; }
.intro .rail { animation: rise .8s var(--ease) .3s both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }

/* ---------- Sachet de booster ---------- */

.pack {
  position: relative;
  display: block;
  aspect-ratio: 640 / 1176;
  container-type: inline-size;
  transition: transform .35s var(--ease);
}
.pack-img { width: 100%; height: 100%; filter: drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }
.pack-open { padding: 0; border: 0; background: none; text-align: left; }
.pack-open:disabled { cursor: not-allowed; }
.pack-open:not(:disabled):hover .pack:not(.tilt) { transform: translateY(-6px) rotate(-1deg); }
.pack-gold .pack-img { filter: sepia(.45) saturate(1.7) hue-rotate(-14deg) brightness(1.08) drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }
.pack-prestige .pack-img { filter: hue-rotate(250deg) saturate(1.35) brightness(1.05) drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }
.pack-band {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 79.6%;
  height: 11.8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6cqw;
  padding: 0 3cqw;
  background: #08090c;
  border-block: 1px solid var(--card-gold);
  text-align: center;
}
.pack-band strong { font: 600 6cqw/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--card-gold); }
.pack-band.long strong { font-size: 4.6cqw; letter-spacing: .12em; }
.pack-band span { font: 500 max(9px, 4.4cqw)/1.1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.pack-prestige .pack-band strong { color: #e7c2ff; }
/* Sachet en 3D (pack3d.js) : le canevas déborde pour que le sachet pivote sans être coupé ; l'image reste
   à sa place, invisible, pour garder la taille et le texte accessible. */
.pack3d { position: absolute; left: -25%; right: -25%; top: -10%; bottom: -10%; width: 150%; height: 120%; z-index: 2; pointer-events: none; }
.pack.is-3d { transform: none; }
.pack.is-3d .pack-img, .pack.is-3d .pack-band, .pack.is-3d .pack-sheen { opacity: 0; }
.pack.is-3d::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -6%; height: 7%; z-index: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(6px); pointer-events: none; }
.pack-big.is-3d .tear-top, .pack-big.is-3d .tear-seam { visibility: hidden; }
/* Tant qu'il est en 3D, le sachet est entier : la découpe de la bande à déchirer ne s'applique qu'à l'image. */
.pack-big.is-3d .tear-body { clip-path: none; }

/* Titre du jeu, posé sur la plaque qui recouvre les anciens logos (tools/prepare_booster.py, TITLE_PLATE). */
.pack-title {
  position: absolute;
  left: 5.94%;
  right: 5.94%;
  top: 7.14%;
  height: 19.56%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  text-align: center;
  pointer-events: none;
}
.pack-title strong {
  font: 600 13cqw/.9 var(--serif);
  letter-spacing: -.04em;
  background: linear-gradient(180deg, #fff3cf 0%, #f0c46b 50%, #b07a2c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.pack-title span { font: 500 3.3cqw/1.2 var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--cream); }
/* Reflet de la feuille métallisée, découpé à la forme du sachet ; il repasse de temps en temps. */
.pack-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 60%) 130% 0 / 250% 100% no-repeat;
  mix-blend-mode: overlay;
  -webkit-mask: url(assets/booster-lol.webp) center / 100% 100%;
          mask: url(assets/booster-lol.webp) center / 100% 100%;
  opacity: 0;
}
.booster-pack .pack-sheen { opacity: 1; animation: sheen-loop 5.2s ease-in-out infinite; }
@keyframes sheen-loop {
  0%, 62% { background-position: 130% 0; }
  88%, 100% { background-position: -30% 0; }
}
@keyframes sheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.pack.tilting .pack-sheen {
  animation: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 40%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%);
}
.tilt {
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform .45s var(--ease);
  will-change: transform;
}
.tilt.tilting { transition: transform .08s linear; }

/* ---------- Fenêtres : taux et fiche ---------- */

.sheet, .detail {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--panel);
  color: var(--cream);
}
.sheet::backdrop, .detail::backdrop { background: color-mix(in srgb, var(--ink) 78%, transparent); }
.sheet[open], .detail[open] { animation: rise .35s var(--ease); }
/* Les fenêtres (taux de tirage…) ne débordent jamais en largeur ; l'en-tête et sa croix restent visibles en haut. */
.sheet { width: min(760px, calc(100% - 2rem)); max-height: min(86dvh, 760px); overflow-x: hidden; overscroll-behavior: contain; }
.sheet header { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.sheet .table-wrap { max-width: 100%; overflow-x: auto; }
.sheet .rules p, .sheet .rules li { overflow-wrap: anywhere; }
.sheet header { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.2rem .2rem; }
.sheet h2 { font: 560 1.8rem/1 var(--display); letter-spacing: -.03em; }
.rules { display: grid; gap: .4rem; padding: 0 1.2rem 1.3rem; }
.rules > * { min-width: 0; }
.rules h3 { margin: 1rem 0 .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.rules p, .rules li { color: var(--muted); font-size: .9rem; }
.rules ul { padding-left: 1.1rem; margin: .4rem 0 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
th, td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th { color: var(--muted); font-weight: 500; }
td.num, th.num { text-align: right; }
.odds-note { margin-top: .6rem; }

.detail { width: min(860px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; }
.detail-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 2rem;
  padding: 3.8rem 1.6rem 1.6rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--panel) 70%, transparent), var(--panel) 60%), var(--splash, none) center / cover no-repeat;
}
.detail { touch-action: pan-y; }
.detail-card { align-self: start; display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: .75rem; }
.detail-card:not(:disabled) { cursor: zoom-in; }
.detail-hint { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; }
/* Passer d'une carte à l'autre : la fiche glisse dans le sens du geste. */
.detail-wrap.from-right { animation: from-right .35s var(--ease); }
.detail-wrap.from-left { animation: from-left .35s var(--ease); }
@keyframes from-right { from { opacity: 0; transform: translateX(28px); } }
@keyframes from-left { from { opacity: 0; transform: translateX(-28px); } }
.detail-navbar { position: absolute; top: .8rem; left: .8rem; z-index: 5; display: flex; align-items: center; gap: .4rem; }
.detail-nav {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  color: var(--cream);
}
.detail-nav svg { width: 1.2rem; height: 1.2rem; }
.detail-nav:hover:not(:disabled) { border-color: var(--gold); }
.detail-nav:disabled { opacity: .3; }
.detail-pos { min-width: 4.5rem; text-align: center; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.detail-body { display: flex; flex-direction: column; gap: .7rem; padding-top: .3rem; }
.detail-rarity { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--rc); }
.detail-body h2 { font: 560 clamp(2rem, 4vw, 2.8rem)/1 var(--display); letter-spacing: -.04em; }
.detail-sub { margin: 0; color: var(--muted); }
.detail dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: .4rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .92rem; }
.detail dt { color: var(--muted); }
.detail dd { margin: 0; }
.detail-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.detail-close { position: absolute; top: .8rem; right: .8rem; z-index: 5; }
.detail-close.btn-primary { min-width: 0; min-height: 2.4rem; padding: 0 1rem; font-size: .88rem; }

/* ---------- Cartes ---------- */

/* Cartes en pleine illustration, comme les versions premium des jeux de cartes :
   liseré de la couleur de la rareté, nom en bas sur un dégradé, reflet sur les Épiques et plus. */
.card {
  position: relative;
  display: block;
  aspect-ratio: 63 / 88;
  container-type: inline-size;
  border-radius: .75rem;
  overflow: hidden;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc, var(--line)) 70%, transparent), 0 14px 30px -18px rgba(0, 0, 0, .8);
}
.card.r4:not(.fcard), .card.r5:not(.fcard) { box-shadow: inset 0 0 0 1.5px var(--rc), 0 14px 30px -18px rgba(0, 0, 0, .8), 0 0 22px -8px color-mix(in srgb, var(--rc) 60%, transparent); }
.card-art { position: absolute; inset: 0; display: block; }
.card-art > img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.card-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: linear-gradient(180deg, transparent, rgba(7, 9, 12, .94)); pointer-events: none; }
.card-r {
  position: absolute;
  top: .4rem;
  left: .4rem;
  z-index: 2;
  font-size: clamp(.5rem, 5.4cqw, .7rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rc);
  padding: .1rem .4rem;
  border-radius: 999px;
  background: rgba(7, 9, 12, .62);
}
.card-n {
  position: absolute;
  top: .4rem;
  right: .4rem;
  z-index: 2;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: var(--ink);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.card-meta { position: absolute; left: .55rem; right: .55rem; bottom: .5rem; z-index: 2; display: flex; flex-direction: column; gap: .1rem; }
.card-name {
  font: 560 clamp(.72rem, 9.2cqw, 1.25rem)/1.08 var(--serif);
  letter-spacing: -.03em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.card-type { font-size: clamp(.5rem, 5.6cqw, .72rem); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-tag {
  position: absolute;
  top: .4rem;
  right: .4rem;
  z-index: 3;
  padding: .12rem .45rem;
  border-radius: 999px;
  font-size: clamp(.5rem, 5.2cqw, .64rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tag-new { background: var(--cream); color: var(--ink); }
.tag-dupe { background: rgba(7, 9, 12, .7); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line); }

/* Monstres, poros et objets : aplat de couleur et portrait net. */
.plain {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 14cqw 8cqw 34cqw;
  gap: 5cqw;
  background: var(--tint);
  text-align: center;
}
.plain-icon { flex: none; object-fit: cover; }
.k-m .plain-icon { width: 72%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 2px var(--rc), 0 0 0 5px rgba(0, 0, 0, .3); }
.k-p .plain { padding: 0 0 34cqw; }
.k-p .plain-icon { width: 100%; aspect-ratio: 1; }
.k-o .plain { padding-top: 21cqw; }
.k-o .plain-icon { width: 36%; aspect-ratio: 1; border-radius: 8%; box-shadow: 0 0 0 2px var(--card-gold); }
.plain-sub { font-size: 6.4cqw; color: var(--cream); line-height: 1.25; }
.plain-stats { display: flex; flex-direction: column; gap: 1cqw; font-size: 6cqw; line-height: 1.25; color: var(--cream); overflow-wrap: anywhere; }

.card.missing { --rc: var(--line); }
.missing .card-art > img, .missing .plain-icon { filter: grayscale(1) brightness(.45); }
.missing .plain { background: var(--panel-2); }
.missing .card-r { color: var(--muted); }
.missing .card-name { color: var(--muted); }

/* Reflet qui passe sur les Épiques, Légendaires et Mythiques. */
.foil-glint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--rc) 55%, white) 48%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.card.shiny .foil-glint { animation: glint 2.8s ease-in-out infinite; }
@keyframes glint {
  0%, 55% { opacity: 0; transform: translateX(-50%); }
  75% { opacity: .55; }
  100% { opacity: 0; transform: translateX(50%); }
}
/* Lumière qui suit la souris sur les Légendaires et Mythiques qu'on possède. */
.card.r4::after, .card.r5::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 42%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .3s ease;
}
.card.tilting::after { opacity: 1; }
/* Reflet holographique des Épiques et plus : il apparaît quand on incline la carte. */
.card.shiny:not(.fcard)::before, .fcard.shiny .f-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 92, 160, .5) 32%, rgba(255, 214, 102, .45) 42%, rgba(102, 255, 214, .45) 52%, rgba(110, 140, 255, .5) 62%, transparent 78%) var(--mx, 50%) var(--my, 50%) / 260% 260% no-repeat;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity .3s ease;
}
.card.shiny.tilting:not(.fcard)::before, .fcard.shiny.tilting .f-art::before { opacity: .45; }
/* Sur les cadres par jeu, ::before dessine la bordure intérieure : le reflet passe donc sur l'illustration. */

/* ---------- Pages Collection, Défis, Boutique ---------- */

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-title { margin-top: .15rem; font: 560 clamp(2.2rem, 4vw, 3.2rem)/.95 var(--display); letter-spacing: -.04em; }
.page-sub { margin: .35rem 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.page-lead { margin: 0 0 1rem; max-width: 70ch; color: var(--muted); }
.section-title { font: 560 1.6rem/1 var(--display); letter-spacing: -.03em; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-note { margin: 0; color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }

.rarity-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.rarity-bar button {
  display: inline-flex;
  color: var(--cream);
  background: transparent;
  transition: border-color .2s ease, background .2s ease;
  align-items: center;
  gap: .4rem;
  min-height: 2.1rem;
  padding: 0 .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
}
.rarity-bar button:hover { border-color: color-mix(in srgb, var(--rc) 60%, var(--line)); }
.rarity-bar button[aria-pressed="true"] { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 16%, transparent); }
.rarity-bar .gem { width: .45rem; height: .45rem; border-radius: 99px; background: var(--rc); }
.rarity-bar strong { font-weight: 500; color: var(--muted); }
.rarity-bar span { font-weight: 560; font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.search {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: 0 .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
}
.search svg { width: 1.1rem; height: 1.1rem; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--cream); outline: none; }
.search:focus-within { border-color: var(--gold); }
.select { position: relative; display: flex; }
.select select {
  appearance: none;
  min-height: 2.75rem;
  padding: 0 2.2rem 0 .95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239aa3b2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right .9rem center / .7rem no-repeat;
  color: var(--cream);
  font-size: .9rem;
}
.select select:focus { outline: none; border-color: var(--gold); }
.lol-category { display: inline-flex; align-items: center; gap: .2rem; padding: .2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.lol-category button { min-height: 2.25rem; padding: 0 .9rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 .88rem/1 var(--ui); white-space: nowrap; transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.lol-category button[aria-pressed="true"] { background: color-mix(in srgb, var(--gold) 18%, var(--panel-2)); color: var(--cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 48%, transparent); }
.lol-category button:hover { color: var(--cream); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
.card-btn { position: relative; display: block; padding: 0; border: 0; background: none; text-align: left; border-radius: .75rem; }
/* Quand les filtres changent, les cartes arrivent en cascade. */
.grid.enter .card-btn { animation: card-in .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
/* Point doré sur les cartes pas encore regardées. */
.card-btn.is-unseen::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 4;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
}
/* Cartes tout juste tirées : un halo de leur rareté. */
.card-btn.is-just .card { animation: just 1.6s ease-in-out 3; }
@keyframes just { 50% { box-shadow: inset 0 0 0 2px var(--rc), 0 0 26px -2px color-mix(in srgb, var(--rc) 80%, transparent); } }
.card-btn .card:not(.tilt) { transition: transform .25s var(--ease); }
.card-btn:hover .card:not(.tilt) { transform: translateY(-4px); }
.empty { color: var(--muted); padding: 2rem 0; }

/* Défis */
.defis { display: flex; flex-direction: column; gap: .65rem; }
.defi { border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); transition: border-color .2s ease; }
.defi:hover, .defi[open] { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.defi.complete { border-color: var(--gold-deep); }
.defi summary {
  display: grid;
  grid-template-columns: 72px minmax(0, 1.6fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .9rem;
  padding: .7rem;
  cursor: pointer;
  list-style: none;
}
.defi summary::-webkit-details-marker { display: none; }
.defi[open] summary { border-bottom: 1px solid var(--line); }
/* Les vignettes se resserrent pour rester dans leur colonne, quel que soit leur nombre. */
.defi-art { display: flex; min-width: 0; height: 64px; overflow: hidden; }
.defi-art img { flex: 0 1 28px; min-width: 12px; height: 64px; object-fit: cover; border-radius: .3rem; margin-right: -8px; box-shadow: 0 0 0 1px var(--ink); }
.defi-art img:last-child { margin-right: 0; }
.defi-art img.is-missing { filter: grayscale(1) brightness(.5); }
.defi-name strong { display: block; font-size: 1.05rem; font-weight: 560; }
.defi-name span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.defi-count { font-weight: 560; font-size: .9rem; font-variant-numeric: tabular-nums; }
.defi-progress .track { margin-top: .4rem; }
.defi.complete .track i { background: var(--cream); }
.defi-reward { color: var(--essence); font-weight: 560; font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.defi-action { justify-self: end; }
.defi-state { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.defi-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .8rem; padding: .9rem; }

/* Boutique */
.shop-wallet { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.shop-wallet span { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.shop-wallet strong { font: 560 2.6rem/1 var(--display); letter-spacing: -.04em; color: var(--essence); font-variant-numeric: lining-nums; }
.shop-section { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 2.5rem; }
.shop-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.shop-pack { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); }
.shop-pack.is-gold { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.shop-pack.is-prestige { border-color: color-mix(in srgb, var(--r3) 45%, var(--line)); }
.shop-pack-art .pack { width: 100%; }
.shop-pack-text { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.shop-pack-text h3 { font: 560 1.35rem/1.05 var(--display); letter-spacing: -.03em; }
.shop-pack-text p { margin: 0; color: var(--muted); font-size: .88rem; }
.shop-pack-text .btn-primary { min-width: 0; min-height: 2.9rem; margin-top: .3rem; font-size: .95rem; }
.shop-missing { font-size: .8rem !important; }
.shop-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
.shop-card { display: flex; flex-direction: column; gap: .5rem; }
.shop-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.shop-old { font-size: .8rem; color: var(--muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.btn.btn-buy { flex: 1; min-height: 2.3rem; padding: 0 .7rem; border: 0; background: var(--cream); color: var(--ink); font-weight: 600; font-size: .85rem; }
.btn.btn-buy:hover:not(:disabled) { background: #fff; }
.btn.btn-buy:disabled { background: var(--panel-2); color: var(--muted); }
.earn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.earn-item { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); }
.earn-item h3 { font: 560 1.2rem/1.1 var(--display); letter-spacing: -.03em; }
.earn-item p { margin: 0; flex: 1; color: var(--muted); font-size: .9rem; }

/* Bandeau de cadeau */
.notice { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; padding: .7rem .8rem .7rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); animation: rise .5s var(--ease) both; }
.notice p { flex: 1; margin: 0; font-size: .92rem; }

/* ---------- Ouverture d'un booster ---------- */

.opening {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom));
  background: var(--ink);
  overflow-x: hidden;
  overflow-y: auto;
}
.opening-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.opening-title { margin: 0; color: var(--cream); }
/* Centré par des marges auto plutôt que par place-items : un tirage plus haut que l'écran (téléphone) n'est plus coupé
   en haut, et on peut faire défiler jusqu'aux boutons. */
.stage-open { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); place-items: start center; }
.stage-open > * { grid-area: 1 / 1; margin-block: auto; }
.opening-foot { display: flex; flex-direction: column; align-items: center; gap: .7rem; min-height: 4.2rem; }
.opening-summary { width: 100%; margin: 0; text-align: center; color: var(--muted); }
.opening-summary:empty { display: none; }
.opening-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; }

.pack-big { position: relative; isolation: isolate; display: grid; width: min(240px, 60vw); touch-action: none; animation: pack-in .55s var(--ease) both; }
.pack-big.no-enter { animation: none; }
.pack-big > span { grid-area: 1 / 1; }
.pack-big .pack-sheen { opacity: 1; animation: sheen 1.4s cubic-bezier(.3, .6, .3, 1) .45s both; }
.pack-big:not(.tearing):hover .pack { transform: translateY(-6px) rotate(-1deg); }
/* La bande scellée du haut se déchire, puis le sachet tombe. */
.tear-top { clip-path: inset(0 0 94.6% 0); transform-origin: calc(50% - 50% * var(--dir, 1)) 4%; transition: transform .35s var(--ease); }
.tear-body { clip-path: inset(5.4% 0 0 0); }
.pack-big.tearing { pointer-events: none; }
.pack-big.tearing .tear-top { animation: rip .42s cubic-bezier(.3, .6, .4, 1) forwards; }
/* Pendant le geste, la bande du haut suit le doigt et la couture s'illumine jusqu'où il est allé. */
.pack-big.dragging .tear-top {
  transition: none;
  transform: translate(calc(var(--tear) * 14px * var(--dir, 1)), calc(var(--tear) * -12px)) rotate(calc(var(--tear) * 7deg * var(--dir, 1)));
}
.pack-big.tearing .tear-body { animation: shake .3s ease-in-out .12s, drop .55s cubic-bezier(.55, 0, .75, .2) .42s forwards; }
@keyframes pack-in { from { transform: translateY(-30px) scale(.95); opacity: 0; } }
@keyframes rip {
  from { transform: translate(calc(var(--tear, 0) * 14px * var(--dir, 1)), calc(var(--tear, 0) * -12px)) rotate(calc(var(--tear, 0) * 7deg * var(--dir, 1))); }
  35% { transform: translate(calc(18px * var(--dir, 1)), -14px) rotate(calc(8deg * var(--dir, 1))); opacity: 1; }
  to { transform: translate(calc(70px * var(--dir, 1)), -80px) rotate(calc(20deg * var(--dir, 1))); opacity: 0; }
}
@keyframes shake {
  0%, 100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-4deg) scale(1.03); }
  45% { transform: rotate(4deg) scale(1.05); }
  70% { transform: rotate(-2deg) scale(1.04); }
}
@keyframes drop { to { transform: translateY(80vh) rotate(10deg); } }

/* La main de cartes : en éventail, et qui défile sur un petit écran. */
.spread {
  display: flex;
  align-items: flex-end;
  justify-content: safe center;
  gap: .7rem;
  width: 100%;
  padding: 2.5rem .5rem 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rc {
  position: relative;
  flex: none;
  display: grid;
  gap: .5rem;
  width: clamp(132px, 15vw, 176px);
  padding: 0;
  border: 0;
  background: none;
  isolation: isolate;
  scroll-snap-align: center;
  rotate: calc((var(--d) - 2.5) * 1.4deg);
  animation: deal .64s var(--ease) backwards;
  animation-delay: calc(var(--d) * 70ms);
}
@keyframes deal { from { opacity: 0; transform: translateY(36px) scale(.92); } }

/* Deux mouvements séparés pour un retournement fluide :
   .rc-inner tourne d'un seul geste continu, .rc-lift soulève la carte puis la repose. */
.rc-lift { position: relative; display: block; perspective: 1200px; translate: 0 0; transition: translate .25s var(--ease); will-change: transform; }
.rc:not(.flipped):hover .rc-lift { translate: 0 -6px; }
.rc.flipped .rc-lift { animation: lift .72s both; }
@keyframes lift {
  0% { transform: none; animation-timing-function: cubic-bezier(.33, 0, .4, 1); }
  50% { transform: translateY(-16px) scale(1.05); animation-timing-function: cubic-bezier(.6, 0, .67, 1); }
  100% { transform: none; }
}
.rc-inner { display: grid; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform .72s cubic-bezier(.45, .05, .2, 1); will-change: transform; }
.rc.r2 .rc-inner { transition-duration: .8s; }
.rc.r3 .rc-inner { transition-duration: .86s; }
.rc.r4 .rc-inner, .rc.r5 .rc-inner { transition-duration: .9s; }
.rc.flipped .rc-inner { transform: rotateY(180deg); }
.rc-face { grid-area: 1 / 1; min-width: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.spread > .rc, .rc-inner { min-width: 0; }
.rc-front { transform: rotateY(180deg); }
.rc.flipped { cursor: default; }
.rc.flipped.r4, .rc.flipped.r5 { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--rc) 65%, transparent)); }

/* Dos des cartes : sceau doré. */
.rc-back {
  display: grid;
  place-items: center;
  aspect-ratio: 63 / 88;
  border-radius: .75rem;
  background:
    radial-gradient(60% 40% at 50% 42%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 70%),
    linear-gradient(180deg, #1c2430, #0d1116);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.back-frame {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .8rem;
  width: 100%;
  height: 100%;
  color: var(--gold);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.back-frame svg { width: 38%; height: auto; }
.rc.hint .rc-back { box-shadow: inset 0 0 0 1px var(--rc); }
.rc.hint .back-frame { color: var(--rc); }
.rc.hint .rc-back { animation: quiver .45s ease-in-out calc(.9s + var(--d) * 70ms) 3; }
.rc.r5.hint .rc-back { animation-duration: .32s; animation-iteration-count: 5; }
@keyframes quiver {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-3px) rotate(-1.2deg); }
  75% { transform: translateX(3px) rotate(1.2deg); }
}

/* Rareté visible dès la distribution : une aura derrière la carte.
   Rien pour une Commune, une lueur pour Peu commune et Rare, une lueur qui respire pour une Épique,
   des rayons et un faisceau pour une Légendaire, des rayons multicolores pour une Mythique. */
.rc-aura { position: absolute; left: -22%; right: -22%; top: -14%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; }
.rc-aura::before, .rc-aura::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.rc-aura::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 70%, transparent), transparent); filter: blur(6px); }
.rc.r1 .rc-aura { opacity: .5; }
.rc.r2 .rc-aura { opacity: .75; }
.rc.r3 .rc-aura { opacity: .95; animation: breathe 1.8s ease-in-out infinite; }
.rc.r2 .rc-back, .rc.r3 .rc-back { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 70%, transparent); }
.rc.r4 .rc-aura, .rc.r5 .rc-aura { opacity: 1; }
.rc.r4 .rc-aura::after, .rc.r5 .rc-aura::after {
  inset: -18%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 50%, transparent) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 72%);
          mask: radial-gradient(closest-side, #000 25%, transparent 72%);
  animation: rays 9s linear infinite;
}
.rc.r5 .rc-aura::after {
  background: repeating-conic-gradient(from 0deg, rgba(255, 107, 134, .65) 0deg 6deg, transparent 6deg 14deg, rgba(143, 208, 232, .55) 14deg 20deg, transparent 20deg 28deg, rgba(240, 193, 90, .55) 28deg 34deg, transparent 34deg 45deg);
  animation-duration: 5s;
}
.rc.r4 .rc-lift::before, .rc.r5 .rc-lift::before {
  content: "";
  position: absolute;
  left: 32%;
  right: 32%;
  top: -55%;
  bottom: -18%;
  z-index: -1;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rc) 65%, transparent) 35%, color-mix(in srgb, var(--rc) 35%, transparent) 70%, transparent);
  filter: blur(10px);
  animation: beam 2.2s ease-in-out infinite;
  pointer-events: none;
}
.rc.flipped.r2 .rc-aura, .rc.flipped.r3 .rc-aura { animation: burst .9s var(--ease) both; }
.rc.flipped.r4 .rc-aura, .rc.flipped.r5 .rc-aura { animation: burst 1.1s var(--ease) both; }
.rc-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--rc);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease .5s, transform .4s var(--ease) .5s;
}
.rc.r0 .rc-label { color: var(--muted); }
.rc.flipped .rc-label { opacity: 1; transform: none; }
@keyframes breathe { 50% { opacity: .45; transform: scale(.94); } }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes beam { 50% { opacity: .55; transform: scaleX(.8); } }
@keyframes burst {
  0% { transform: scale(.5); filter: brightness(2.2); }
  40% { transform: scale(1.25); filter: brightness(1.6); }
  100% { transform: scale(1); filter: none; }
}

/* Grand moment : Légendaire ou Mythique en plein écran. */
.moment { position: fixed; inset: 0; z-index: 50; background: var(--ink); cursor: pointer; overflow: hidden; opacity: 0; transition: opacity .2s ease; }
.moment.on { opacity: 1; }
.moment::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--rc); opacity: 0; pointer-events: none; }
.moment.on::before { animation: flash .55s ease-out; }
@keyframes flash { 0% { opacity: .7; } 100% { opacity: 0; } }
.moment > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 20%; }
/* Gooner : l'illustration entière au centre, et elle-même floutée en fond pour remplir l'écran. */
.moment.contain-moment::after { content: ""; position: absolute; z-index: 0; inset: -6%; background: var(--art) center / cover no-repeat; filter: blur(28px) brightness(.45) saturate(1.3); }
.moment.contain-moment > img { z-index: 1; object-fit: contain; object-position: center; }
.moment.contain-moment .moment-plate, .moment.contain-moment .moment-fx, .moment.contain-moment .moment-video { z-index: 2; }

/* Cinématique d'une Épique Gooner : la vidéo en 16:9 qui couvre l'écran ; les touchers passent au travers. */
.moment-video { position: absolute; top: 50%; left: 50%; width: max(100vw, 177.78vh); height: max(100vh, 56.25vw); translate: -50% -50%; border: 0; pointer-events: none; }
.moment-video.is-over, .moment-video.is-waiting { opacity: 0; transition: opacity .6s ease; }
.moment.on > img { animation: splash-in .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes splash-in { from { transform: scale(1.08); } }
.moment.plain-moment { background: var(--tint); }
.moment.plain-moment > img { inset: 0; margin: auto; width: var(--mw, 200px); height: var(--mh, 200px); max-width: 92vw; max-height: 78vh; object-fit: contain; }
.moment.plain-moment.k-m > img, .moment.plain-moment.k-p > img, .moment.plain-moment.k-o > img, .moment.plain-moment.k-b > img, .moment.plain-moment.k-c > img { border-radius: .75rem; box-shadow: 0 0 0 3px var(--rc); }
.moment.k-a > img { inset: auto 0 0; height: var(--mh); object-position: center bottom; }
.moment.k-w > img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.moment.k-m > img { border-radius: 50%; }
.moment-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 30vh 7vw 7vh;
  background: linear-gradient(180deg, rgba(7, 9, 12, 0), rgba(7, 9, 12, .9) 60%);
}
.moment.r5 .moment-plate { background: radial-gradient(50% 40% at 50% 70%, color-mix(in srgb, var(--r5) 22%, transparent), transparent 70%), linear-gradient(180deg, rgba(7, 9, 12, 0), rgba(7, 9, 12, .92) 60%); }
.moment-plate p { margin: 0; }
.moment-rarity { color: var(--rc); letter-spacing: .2em; text-transform: uppercase; font-size: .78rem; font-weight: 600; }
.moment-name { margin-top: .3rem !important; font: 560 clamp(2.6rem, 6vw, 4.6rem)/.95 var(--display); letter-spacing: -.045em; }
.moment.on .moment-name { animation: rise .7s var(--ease) .1s both; }
.moment-champ { margin-top: .4rem !important; color: var(--muted); }
.moment-hint { margin-top: 1.2rem !important; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* Couture du sachet : un point de lumière la parcourt pour inviter à glisser. */
.tear-seam {
  position: absolute;
  z-index: 2;
  top: 5.2%;
  left: 7%;
  right: 7%;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 243, 207, .9) 50%, transparent) -40% 0 / 40% 100% no-repeat;
  animation: seam 2.6s ease-in-out .8s infinite;
}
@keyframes seam { 0% { background-position: -40% 0; } 60%, 100% { background-position: 140% 0; } }
.pack-big.dragging .tear-seam {
  animation: none;
  background: linear-gradient(90deg, rgba(255, 243, 207, .95), #fff) 0 0 / calc(var(--tear) * 100%) 100% no-repeat;
  box-shadow: 0 0 12px rgba(255, 243, 207, .8);
  transform-origin: calc(50% - 50% * var(--dir, 1)) 50%;
}
.pack-big.tearing .tear-seam, .pack-big.tearing .pack-count { opacity: 0; transition: opacity .2s; }

/* Booster doré, prestige, Mythique assurée : une lueur derrière le sachet et une annonce au-dessus. */
.pack-big.is-gold::before, .pack-big.is-prestige::before {
  content: "";
  position: absolute;
  inset: -28% -40%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 55%, transparent), transparent);
  animation: breathe 2.2s ease-in-out infinite;
  pointer-events: none;
}
.pack-big.is-gold { --glow: var(--r4); }
.pack-big.is-prestige { --glow: var(--r3); }
.pack-announce {
  position: absolute;
  z-index: 3;
  top: -2.9rem;
  left: 50%;
  translate: -50% 0;
  padding: .35rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(100deg, #b98a3a, #ffe9b0 45%, #e0b25a 60%, #b98a3a) 0 0 / 220% 100%;
  box-shadow: 0 0 24px color-mix(in srgb, var(--r4) 60%, transparent);
  animation: announce .7s cubic-bezier(.3, 1.5, .5, 1) .35s both, foil 2.4s linear 1.1s infinite;
}
.pack-announce.r5 { background-image: linear-gradient(100deg, #ff6b86, #ffe1a8 30%, #8fd0e8 55%, #c9a6ff 75%, #ff6b86); box-shadow: 0 0 28px color-mix(in srgb, var(--r5) 60%, transparent); }
@keyframes announce { from { opacity: 0; transform: translateY(-14px) scale(.7); } }
@keyframes foil { to { background-position: -220% 0; } }

/* Ouverture : l'écran apparaît en fondu et s'efface en rangeant les cartes vers l'onglet Collection. */
.opening.entering { animation: fade-in .3s ease both; }
@keyframes fade-in { from { opacity: 0; } }
.opening { transition: background-color .45s ease; }
.opening.closing { background-color: transparent; pointer-events: none; }
.opening.closing .opening-bar, .opening.closing .opening-foot { opacity: 0; transition: opacity .25s ease; }
.opening.closing .spread { overflow: visible; }
.opening.closing .rc {
  translate: var(--tx) var(--ty);
  scale: .08;
  rotate: 0deg;
  opacity: 0;
  transition: translate .6s cubic-bezier(.55, 0, .7, .2) var(--sd), scale .6s cubic-bezier(.55, 0, .7, .2) var(--sd), opacity .25s ease calc(var(--sd) + .38s);
}
.opening.closing .rc-aura, .opening.closing .rc-label { opacity: 0; transition: opacity .2s; }
.tabs a.bump { animation: tab-bump .6s var(--ease); }
@keyframes tab-bump { 30% { transform: scale(1.18); color: var(--gold); } }

/* « Encore » : les cartes glissent vers le bas avant qu'un nouveau sachet tombe. */
.spread.leaving .rc { animation: leave .42s cubic-bezier(.5, 0, .75, 0) both; animation-delay: calc(var(--d) * 30ms); }
@keyframes leave { to { opacity: 0; transform: translateY(60px) scale(.94); } }

.opening-bar { position: relative; z-index: 2; }
.opening-head { min-width: 0; }
.opening-tools { display: flex; align-items: center; gap: .45rem; }
.opening-tools .pill { padding-block: .3rem; }
#sound-toggle .snd-on, #sound-toggle[aria-pressed="true"] .snd-off { display: none; }
#sound-toggle[aria-pressed="true"] .snd-on { display: block; }
#sound-toggle[aria-pressed="true"] { color: var(--cream); }

/* Ouverture carte par carte : la carte du dessus en grand, la pile derrière, la frise des cartes vues en bas. */
.deck-view { display: flex; flex-direction: column; align-items: center; gap: .8rem; width: min(560px, 100%); padding: .4rem 0 .2rem; user-select: none; -webkit-user-select: none; }
.deck-count { align-self: flex-start; margin: 0; font: 560 2.1rem/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.deck-count span { font-size: 1.1rem; color: var(--muted); }
.deck { position: relative; width: min(300px, 78vw, 46svh); aspect-ratio: 63 / 88; touch-action: pan-y; cursor: pointer; }
/* La pile : des bords de cartes décalés en haut à droite, d'autant plus nombreux qu'il en reste. */
.deck-pile {
  position: absolute;
  inset: 0;
  border-radius: .75rem;
  background: #161c25;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
  translate: calc(min(var(--left, 0), 1) * 6px) calc(min(var(--left, 0), 1) * -6px);
  opacity: calc(min(var(--left, 0), 1));
  filter: drop-shadow(6px -6px 0 #121820) drop-shadow(6px -6px 0 #0f141b) drop-shadow(5px -5px 0 #0c1016);
  transition: opacity .3s ease;
}
.deck .rc { position: absolute; inset: 0; width: 100%; rotate: none; animation: deck-in .42s var(--ease) both; animation-delay: 0s; }
.deck .rc-label { display: none; }
.deck .rc.dragging { transition: none; }
.deck .rc:not(.dragging):not(.stowing) { transition: translate .3s var(--ease), rotate .3s var(--ease), scale .5s var(--ease); }
.deck .rc.stowing {
  translate: var(--tx) var(--ty);
  scale: var(--ts);
  opacity: .6;
  transition: translate .34s cubic-bezier(.5, 0, .75, 0), scale .34s cubic-bezier(.5, 0, .75, 0), opacity .34s ease;
}
@keyframes deck-in { from { opacity: 0; transform: translateY(-18px) scale(.95); } }
.deck .card-name { font-size: clamp(.9rem, 9cqw, 1.5rem); }
.deck-caption { min-height: 5.4rem; text-align: center; }
.deck-caption p { margin: 0; }
.deck-rarity { color: var(--rc); font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; animation: rise .4s var(--ease) both; }
.deck-rarity span { color: var(--cream); }
.deck-name { margin-top: .2rem !important; font: 560 clamp(1.5rem, 6vw, 2.1rem)/1.05 var(--display); letter-spacing: -.035em; animation: rise .45s var(--ease) .05s both; }
.deck-sub { margin-top: .25rem !important; color: var(--muted); font-size: .9rem; animation: rise .45s var(--ease) .1s both; }
.deck-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; max-width: 100%; }
.deck-strip li { width: 18px; height: 25px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); overflow: hidden; transition: border-color .2s ease; }
.deck-strip li.is-current { border-color: var(--cream); }
.deck-strip li.is-done { border-color: var(--rc); animation: slot-in .3s var(--ease); }
.deck-strip img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
@keyframes slot-in { from { transform: scale(1.5); } }
.deck-hint { margin: 0; color: var(--muted); font-size: .8rem; }
/* Tirage complet : les cartes déjà vues s'affichent retournées, sans rejouer le retournement. */
.rc.instant .rc-inner { transition: none; }
.rc.instant .rc-lift { animation: none; }
.rc.instant .rc-aura { animation: none; }
.rc.instant .tag-new { animation: none; opacity: 1; }
.rc.instant .rc-label { transition: none; }
.rc.instant .tag-new { transform: rotate(-5deg); }

/* ---------- Retournement spectaculaire, selon la rareté ----------
   L'attente : le dos pulse, des rayons tournent (Épique+), l'écran s'assombrit et l'énergie converge (Légendaire+).
   Le retournement : la carte bondit et dépasse un peu avant de se poser.
   L'éclat : reflet qui balaie la face, onde de choc (Rare+), éclair (Épique+), double onde et tremblement (Légendaire+). */
.deck { isolation: isolate; }
.deck-rays {
  position: absolute;
  inset: -55% -75%;
  z-index: -2;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 55%, transparent) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 70%);
          mask: radial-gradient(closest-side, #000 18%, transparent 70%);
  opacity: 0;
  transition: opacity .5s ease;
}
.deck.r5 .deck-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 107, 134, .6) 0deg 5deg, transparent 5deg 12deg, rgba(143, 208, 232, .5) 12deg 17deg, transparent 17deg 24deg, rgba(240, 193, 90, .55) 24deg 29deg, transparent 29deg 36deg); }
.deck.r3.is-charging .deck-rays, .deck.r3.is-popping .deck-rays { opacity: .55; animation: rays 7s linear infinite; }
.deck.r4.is-charging .deck-rays, .deck.r4.is-popping .deck-rays, .deck.r5.is-charging .deck-rays, .deck.r5.is-popping .deck-rays { opacity: .9; animation: rays 4s linear infinite; }
.deck.r5.is-charging .deck-rays { animation-duration: 2.2s; }

/* Le dos pulse et grossit, de plus en plus fort. */
.deck .rc.charging { scale: 1.03; }
.deck.r3 .rc.charging { scale: 1.05; }
.deck.r4 .rc.charging, .deck.r5 .rc.charging { scale: 1.08; }
.deck .rc.charging .rc-back { animation: quiver .2s linear infinite, back-glow .9s ease-in-out infinite; }
.deck.r4 .rc.charging .rc-back { animation-duration: .12s, .6s; }
.deck.r5 .rc.charging .rc-back { animation-duration: .08s, .4s; }
@keyframes back-glow { 50% { box-shadow: inset 0 0 0 2px var(--rc), 0 0 40px color-mix(in srgb, var(--rc) 75%, transparent); } }
.deck .rc.charging .rc-aura { opacity: 1; scale: 1.35; }

/* Retournement : un bond vers l'avant, puis la carte dépasse légèrement avant de se poser. */
.deck .rc-inner { transition-timing-function: cubic-bezier(.3, 1.32, .52, 1); }
.deck .rc.flipped .rc-lift { animation: deck-lift .9s both; }
@keyframes deck-lift {
  0% { transform: none; animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
  45% { transform: translateY(-26px) scale(1.1); animation-timing-function: cubic-bezier(.5, 0, .5, 1.4); }
  100% { transform: none; }
}

/* Reflet qui balaie la face au moment où elle apparaît, plus vif pour les rares. */
.deck .rc-front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 48%, color-mix(in srgb, var(--rc) 50%, white) 52%, transparent 65%) -120% 0 / 250% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
}
.deck .rc.flipped .rc-front::before { animation: sweep .9s ease-out .38s both; }
.deck.r3 .rc.flipped .rc-front::before, .deck.r4 .rc.flipped .rc-front::before, .deck.r5 .rc.flipped .rc-front::before { animation-duration: 1.2s; }
@keyframes sweep { 0% { opacity: 1; background-position: -120% 0; } 100% { opacity: 0; background-position: 130% 0; } }

/* Ondes de choc. */
.deck-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 120%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 3px solid var(--rc);
  border-radius: 50%;
  box-shadow: 0 0 24px var(--rc), inset 0 0 24px var(--rc);
  opacity: 0;
  pointer-events: none;
}
.deck.is-popping .deck-ring { animation: shock .85s cubic-bezier(.2, .7, .3, 1); }
.deck-ring-2 { display: none; }
.deck.r4 .deck-ring-2, .deck.r5 .deck-ring-2 { display: block; }
.deck.is-popping .deck-ring-2 { animation-delay: .16s; animation-duration: 1.1s; }
@keyframes shock { 0% { opacity: .95; scale: .35; } 100% { opacity: 0; scale: 1.9; } }

/* Éclair de la couleur de la rareté (Épique et mieux). */
.deck::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260vmax;
  height: 260vmax;
  translate: -50% -50%;
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(circle closest-side, #fff 0, color-mix(in srgb, var(--rc) 80%, white) 4%, color-mix(in srgb, var(--rc) 40%, transparent) 14%, transparent 34%);
  opacity: 0;
}
.deck.r3.is-popping::after { animation: deck-flash .5s ease-out; }
.deck.r4.is-popping::after, .deck.r5.is-popping::after { animation: deck-flash .8s ease-out; }
@keyframes deck-flash { 0% { opacity: .85; } 100% { opacity: 0; } }

/* Tremblement de l'écran pour les Légendaires et Mythiques. */
.deck.is-quaking { animation: quake .6s ease-out; }
.deck.r5.is-quaking { animation-duration: .9s; }

/* Pendant l'attente d'une Légendaire : tout le reste s'efface, l'écran s'assombrit sur les bords. */
.opening { transition: background-color .45s ease, box-shadow .6s ease; }
.opening.is-tense { box-shadow: inset 0 0 160px 60px rgba(0, 0, 0, .92); }
.opening .deck-count, .opening .deck-caption, .opening .deck-strip, .opening .deck-hint, .opening .opening-bar, .opening .opening-foot { transition: opacity .45s ease; }
.opening.is-tense .deck-count, .opening.is-tense .deck-caption, .opening.is-tense .deck-strip, .opening.is-tense .deck-hint,
.opening.is-tense .opening-bar, .opening.is-tense .opening-foot { opacity: .15; }

/* Le point d'où partent les éclats et où convergent les particules : le centre de la carte. */
.deck-fx { position: absolute; left: 50%; top: 50%; z-index: 6; width: 0; height: 0; pointer-events: none; }
.fx-mote {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c), 0 0 3px #fff;
  animation: mote 1s cubic-bezier(.5, 0, .9, .6) both;
}
@keyframes mote {
  0% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(0, 0) scale(1.3); opacity: 0; }
}

/* Carte achetée : seule, au centre, en grand. */
.spread.single .rc { width: min(230px, 58vw); rotate: none; }

/* Une carte rare frémit avant de se retourner. */
.rc.charging .rc-back { animation: quiver .18s linear infinite; }
.rc.charging .rc-aura { opacity: 1; scale: 1.18; transition: scale .4s var(--ease); }

/* Légendaire et Mythique : la carte vient au centre, les autres s'effacent. */
.rc { transition: translate .55s var(--ease), scale .55s var(--ease), rotate .55s var(--ease), opacity .4s ease, filter .4s ease; }
.spread.has-focus { overflow: visible; }
.spread.has-focus .rc:not(.focus) { opacity: .18; filter: blur(1.5px); scale: .94; }
.rc.focus { z-index: 5; translate: var(--fx) var(--fy); scale: var(--fs); rotate: 0deg; }
.rc.focus .rc-label { opacity: 0; }
.rc.focus.charging .rc-back { animation-duration: .1s; }
.rc.r5.focus.charging .rc-aura::after { animation-duration: 1.2s; }

/* Tampon « Nouvelle » : il frappe la carte une fois qu'elle est retournée. */
.rc .tag-new { opacity: 0; }
.rc.flipped .tag-new { animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: .55s; }
.rc.r2.flipped .tag-new, .rc.r3.flipped .tag-new { animation-delay: .65s; }
@keyframes stamp {
  0% { opacity: 0; transform: scale(2.6) rotate(-14deg); }
  55% { opacity: 1; transform: scale(.9) rotate(-5deg); }
  100% { opacity: 1; transform: rotate(-5deg); }
}
.rc .tag-dupe { opacity: 0; transition: opacity .3s ease .6s; }
.rc.flipped .tag-dupe { opacity: 1; }

/* Doublon recyclé : un voile bleu monte sur la carte pendant que les éclats partent. */
.rc-front { position: relative; }
.rc.dissolve .rc-front::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: .75rem;
  pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--essence) 70%, transparent), transparent 70%) 0 100% / 100% 0 no-repeat;
  animation: dissolve 1.1s ease-out both;
}
@keyframes dissolve {
  40% { background-size: 100% 100%; opacity: 1; }
  100% { background-size: 100% 100%; opacity: 0; }
}
.rc.dissolve .card { animation: dim 1.1s ease-out; }
@keyframes dim { 40% { filter: saturate(.2) brightness(1.3); } }

/* Bilan du tirage : collection vers le prochain palier, défis qui avancent. */
.opening-recap { display: grid; gap: .35rem; width: min(560px, 100%); }
.opening-recap:empty { display: none; }
.recap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .25rem .8rem;
  padding: .45rem .75rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: var(--panel);
  font-size: .85rem;
  animation: rise .45s var(--ease) both;
}
.recap-row:nth-child(2) { animation-delay: .08s; }
.recap-row:nth-child(3) { animation-delay: .16s; }
.recap-row:nth-child(4) { animation-delay: .24s; }
.recap-row .track { grid-column: 1 / -1; }
.recap-row .track i { transition: width .9s var(--ease); }
.recap-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.recap-name small { margin-left: .35rem; font-weight: 400; color: var(--muted); }
.recap-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.recap-count strong { color: var(--cream); }
.recap-row.is-done { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.recap-row.is-done .track i { background: var(--cream); }
.recap-row .claim, .recap-row .stamp { grid-column: 1 / -1; justify-self: start; }
.claim.claim-small { min-height: 2rem; padding: 0 .8rem; font-size: .82rem; }
.stamp {
  display: inline-block;
  padding: .15rem .6rem;
  border: 1.5px solid var(--gold);
  border-radius: .3rem;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  rotate: -4deg;
  animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1) both;
}

/* Éclats qui volent vers un compteur, gerbes des grands moments. */
.fx-spark {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  margin: -5px 0 0 -5px;
  border-radius: 2px;
  background: linear-gradient(135deg, #fff, var(--c));
  box-shadow: 0 0 10px var(--c);
  pointer-events: none;
}
.moment-fx { position: absolute; left: 50%; top: 42%; z-index: 3; width: 0; height: 0; pointer-events: none; }
.fx-shard {
  position: absolute;
  width: 8px;
  height: 14px;
  margin: -7px 0 0 -4px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 12px var(--c);
  animation: shard 1.2s cubic-bezier(.15, .7, .3, 1) both;
}
@keyframes shard {
  from { transform: translate(0, 0) rotate(var(--r)) scale(1.3); opacity: 1; }
  70% { opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) + 220deg)) scale(.3); opacity: 0; }
}
/* Mythique : l'écran tremble et un arc-en-ciel le balaie. */
.moment.r5.on:not(.viewer) > img { animation: splash-in .9s cubic-bezier(.2, .7, .2, 1) both, quake .5s ease-out .05s; }
@keyframes quake {
  15% { translate: -10px 6px; }
  30% { translate: 9px -7px; }
  45% { translate: -6px 4px; }
  60% { translate: 4px -3px; }
  80% { translate: -2px 1px; }
}
.moment.r5::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 107, 134, .0), rgba(255, 107, 134, .35), rgba(240, 193, 90, .3), rgba(143, 208, 232, .35), rgba(201, 166, 255, .35), rgba(255, 107, 134, .0));
  mix-blend-mode: screen;
  opacity: 0;
}
.moment.r5.on:not(.viewer)::after { animation: rainbow 1.8s ease-out both; }
@keyframes rainbow { 0% { opacity: .9; transform: rotate(0); } 100% { opacity: 0; transform: rotate(140deg); } }
.moment.r5 .moment-rarity {
  background: linear-gradient(90deg, var(--r5), var(--r4), var(--essence), var(--r3), var(--r5)) 0 0 / 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: foil 2.4s linear infinite;
}
.moment.on:not(.viewer) .moment-rarity { animation: letters .9s var(--ease) both; }
.moment.r5.on:not(.viewer) .moment-rarity { animation: letters .9s var(--ease) both, foil 2.4s linear infinite; }
@keyframes letters { from { letter-spacing: .9em; opacity: 0; } }
.moment.viewer::before { display: none; }

/* Bulles d'annonce, au-dessus de tout. */
.toasts {
  position: fixed;
  top: calc(.8rem + env(safe-area-inset-top));
  left: 50%;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: min(440px, calc(100% - 2rem));
  translate: -50% 0;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .7rem .8rem .7rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  pointer-events: auto;
  animation: toast-in .5s cubic-bezier(.3, 1.4, .5, 1) both;
}
.toast { flex-wrap: wrap; row-gap: .15rem; }
.toast > strong, .toast > span { display: block; flex: 1 1 100%; }
.toast strong { font-weight: 600; }
.toast span { color: var(--muted); font-size: .88rem; }
.toast-gold { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, var(--gold) 16%, var(--panel)), var(--panel) 60%); }
.toast-gold strong { color: var(--gold); }
.toast.is-leaving { animation: toast-out .3s ease both; }
.toast-action { margin-left: auto; padding: .35rem .8rem; border: 0; border-radius: 999px; background: var(--cream); color: var(--ink); font-weight: 600; font-size: .85rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px); } }

/* Le sachet de l'accueil qui s'envole vers l'ouverture. */
::view-transition-group(pack) { animation-duration: .62s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
html.vt-pack::view-transition-old(root) { animation: .28s ease both view-out; }
html.vt-pack::view-transition-new(root) { animation: .32s ease both fade-in; }

/* Récompense du jour : sept cadeaux, le dernier plus gros. */
.gifts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 4px; margin: .25rem 0 .35rem; padding: 0; list-style: none; }
.gift {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: .3rem .1rem .35rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--panel);
  font-size: .62rem;
  color: var(--muted);
}
.gift svg { width: 1.25rem; height: 1.25rem; overflow: visible; }
.gift-body, .gift-lid { fill: color-mix(in srgb, var(--cream) 22%, var(--panel-2)); }
.gift-ribbon, .gift-bow { fill: color-mix(in srgb, var(--cream) 40%, var(--panel-2)); }
.gift-lid, .gift-bow { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
.gift-day { font-weight: 600; letter-spacing: .06em; }
.gift-reward { display: flex; align-items: center; justify-content: center; gap: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gift-reward .ico-pack { width: .42rem; height: .58rem; }
.gift-reward .ico-essence { width: .5rem; height: .58rem; }
.gift.is-big svg { width: 1.6rem; height: 1.6rem; }
.gift.is-done { opacity: .45; }
.gift.is-done .gift-lid, .gift.is-done .gift-bow { transform: translateY(-5px) rotate(-14deg); opacity: .6; }
.gift.is-today { border-color: var(--gold); color: var(--cream); box-shadow: 0 0 16px -4px color-mix(in srgb, var(--gold) 70%, transparent); }
.gift.is-today .gift-body, .gift.is-today .gift-lid { fill: var(--gold); }
.gift.is-today .gift-ribbon, .gift.is-today .gift-bow { fill: #fff3cf; }
.gift.is-today svg { animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -9deg; } 82% { rotate: 8deg; } 88% { rotate: -5deg; } 94% { rotate: 3deg; } }
.gift.is-big.is-today { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 22%, var(--panel)), var(--panel)); }
.gift.is-opening svg { animation: none; }
.gift.is-opening .gift-lid { transform: translateY(-9px) rotate(-22deg); }
.gift.is-opening .gift-bow { transform: translateY(-14px) rotate(18deg); opacity: 0; }

/* Paliers de collection. */
.milestone { margin: -.35rem 0 0; color: var(--muted); font-size: .78rem; }
.milestone.is-ready { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0; padding: .45rem .6rem; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: .6rem; color: var(--cream); font-size: .82rem; }
.coll-milestone { display: flex; flex-direction: column; gap: .4rem; max-width: 420px; margin-top: .6rem; }
.coll-milestone .milestone { margin: 0; }

/* Pastilles des onglets : elles sautent quand elles changent, et respirent tant qu'il y a quelque chose. */
.badge { position: relative; }
.badge.pop { animation: badge-pop .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes badge-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } }
.badge:not([hidden])::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1.5px solid var(--gold);
  opacity: 0;
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping { 0% { opacity: .8; transform: scale(.8); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
.badge-new { background: var(--cream); }

/* Accueil : raccourcis du téléphone (cadeau, pack du jour, palier) et sachet en attente. */
.perks { display: none; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.perk {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.5rem;
  padding: .25rem .9rem .25rem .35rem;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 10%, var(--panel));
  color: var(--cream);
  font-size: .85rem;
  font-weight: 500;
  animation: rise .5s var(--ease) both;
}
.perk svg { width: 1.6rem; height: 1.6rem; padding: .2rem; animation: wobble 2.4s ease-in-out infinite; }
.perk .gift-body, .perk .gift-lid { fill: var(--gold); }
.perk .gift-ribbon, .perk .gift-bow { fill: #fff3cf; }
.perk img { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.perk .ico-pack { margin: 0 .35rem 0 .45rem; }
.booster-pack { position: relative; }
.booster-pack.is-empty { animation: none; }
.booster-pack.is-empty .pack { filter: grayscale(.85) brightness(.45); }
.booster-pack.is-empty .pack-sheen { display: none; }
.pack-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .2rem; text-align: center; }
.pack-wait strong { font: 560 2.6rem/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pack-wait span { color: var(--muted); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

/* Bienvenue : un éventail de trois cartes, trois étapes, un bouton. */
.welcome { width: min(520px, calc(100% - 2rem)); padding: 1.6rem 1.5rem 1.3rem; text-align: center; }
.welcome h2 { font: 560 2rem/1 var(--display); letter-spacing: -.035em; }
.welcome-fan { display: flex; justify-content: center; height: 150px; margin-bottom: 1rem; }
.welcome-fan > span { width: 96px; margin: 0 -14px; rotate: calc((var(--k) - 1) * 9deg); animation: fan-in .7s var(--ease) both; animation-delay: calc(.15s + var(--k) * 90ms); }
.welcome-fan > span:nth-child(odd) { translate: 0 10px; }
@keyframes fan-in { from { opacity: 0; transform: translateY(30px) rotate(calc((1 - var(--k)) * 9deg)); } }
.welcome-lead { margin: .5rem 0 1rem; color: var(--muted); }
.welcome-lead strong { color: var(--gold); }
.welcome-steps { display: grid; gap: .7rem; margin: 0 0 1.2rem; padding: 0; list-style: none; text-align: left; }
.welcome-steps li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .7rem; align-items: start; }
.welcome-steps li > i, .welcome-steps li > svg { justify-self: center; margin-top: .25rem; }
.welcome-steps li > svg { width: 1.2rem; height: 1.2rem; color: var(--gold); }
.welcome-steps strong { display: block; font-weight: 600; }
.welcome-steps span { color: var(--muted); font-size: .9rem; }
.welcome-actions { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.welcome-actions .text-btn { text-align: center; }
.welcome-note { margin: .8rem 0 0; color: var(--muted); font-size: .78rem; }
.labubuzz-intro { text-align: left; }
.labubuzz-intro .eyebrow { margin: 0 0 .45rem; color: var(--pink); }
.labubuzz-intro h2 { margin-bottom: .55rem; }
.labubuzz-intro .welcome-lead { margin-bottom: 1.25rem; }
.labubuzz-intro .welcome-steps { gap: .95rem; }
.labubuzz-intro .welcome-actions { align-items: stretch; margin-top: 1.2rem; }
.labubuzz-intro .welcome-actions .btn { align-self: flex-start; }
.narrow-only { display: none; }

/* Boosters offerts : une ligne par jeu, son sachet, et le nombre pris. */
.perk-choose { margin: 0 auto .9rem; }
.pick-packs { width: min(520px, calc(100% - 2rem)); }
.pick-lead { margin: .3rem 1.2rem 1rem; color: var(--muted); }
.pick-lead strong { color: var(--gold); }
.pick-list { display: grid; gap: .5rem; margin: 0; padding: 0 1.2rem; list-style: none; }
.pick-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .45rem .6rem .45rem .45rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: var(--panel-2);
  transition: border-color .2s, background-color .2s;
}
.pick-list li.is-picked { border-color: color-mix(in srgb, var(--gc) 70%, var(--line)); background: color-mix(in srgb, var(--gc) 12%, var(--panel-2)); }
.pick-pack { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.pick-pack:disabled { cursor: default; }
.pick-pack img { width: 2.9rem; height: auto; flex: none; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .45)); }
.pick-pack strong { display: block; font: 560 1.15rem/1.1 var(--display); letter-spacing: -.02em; }
.pick-pack > span > span { color: var(--muted); font-size: .82rem; }
.pick-step { display: flex; align-items: center; gap: .2rem; flex: none; }
.pick-step button {
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--cream);
  font-size: 1.15rem;
  line-height: 1;
}
.pick-step button:not(:disabled):hover { border-color: var(--gold); }
.pick-step button:disabled { opacity: .4; }
.pick-step output { min-width: 1.8rem; text-align: center; font: 560 1.25rem/1 var(--display); font-variant-numeric: tabular-nums; }
.pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem 1.3rem; }
.pick-left { margin: 0; color: var(--muted); }
.pick-left strong { color: var(--cream); }
.install-ios { width: min(440px, calc(100% - 2rem)); }
.install-steps { margin: .4rem 0 0; padding: 0 1.2rem 1.4rem 2.6rem; color: var(--muted); }
.install-steps li { margin-bottom: .5rem; }
.install-steps strong { color: var(--cream); }

/* Classement : podium des trois premiers, liste avec vitrines, fil des gros tirages. */
.ladder-sort { display: inline-flex; gap: .25rem; padding: .25rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 999px; }
.ladder-sort button { padding: .4rem .9rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .88rem; font-weight: 500; }
.ladder-sort button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.ladder-me { margin: -.4rem 0 1.2rem; color: var(--muted); }
.ladder-me strong { color: var(--gold); }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .8rem; max-width: 640px; margin: 0 auto 2rem; padding: 0; list-style: none; }
.podium-step { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; animation: rise .6s var(--ease) both; animation-delay: calc(var(--k) * 120ms); }
.podium-step strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.podium-value { color: var(--cream); font-variant-numeric: tabular-nums; }
.podium-value small { color: var(--muted); }
.podium-base {
  display: grid;
  place-items: center;
  width: 100%;
  margin-top: .3rem;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: .7rem .7rem 0 0;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  font: 560 2rem/1 var(--display);
  color: var(--muted);
}
.p1 .podium-base { height: 7rem; color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 20%, var(--panel-2)), var(--panel)); }
.p2 .podium-base { height: 5rem; }
.p3 .podium-base { height: 3.6rem; }
.p1 .avatar-lg { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold), 0 0 26px color-mix(in srgb, var(--gold) 50%, transparent); }
.avatar-lg { width: 3.6rem; height: 3.6rem; }
.podium-step.is-me strong { color: var(--gold); }
.ladder-list { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.ladder-row {
  display: grid;
  grid-template-columns: 2.2rem 2rem minmax(0, 1fr) auto 4.5rem;
  align-items: center;
  gap: .8rem;
  padding: .55rem .8rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--panel);
  animation: rise .45s var(--ease) both;
  animation-delay: calc(var(--k) * 30ms);
}
.ladder-row.is-me { border-color: var(--gold); background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 12%, var(--panel)), var(--panel) 60%); }
.ladder-rank { font: 560 1.2rem/1 var(--display); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.ladder-name { min-width: 0; display: flex; flex-direction: column; }
.ladder-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ladder-name small { color: var(--muted); font-size: .8rem; }
.ladder-showcase { display: flex; gap: .3rem; }
.ladder-showcase .mini { width: 34px; }
.ladder-showcase .card-meta, .ladder-showcase .card-r, .ladder-showcase .card-n, .ladder-showcase .card-shade { display: none; }
.ladder-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ladder-login { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; max-width: 520px; padding: 1.3rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.ladder-login h2 { font: 560 1.5rem/1.1 var(--display); letter-spacing: -.03em; }
.ladder-login p { margin: 0; color: var(--muted); }
.ladder-loading { display: grid; gap: .4rem; }
.skel-row { height: 3.4rem; border-radius: .8rem; }
.ladder-feed { display: flex; flex-direction: column; gap: .8rem; }
.feed { display: flex; flex-direction: column; gap: .55rem; margin: .2rem 0 .3rem; padding: 0; list-style: none; }
.feed li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .6rem; align-items: center; }
.feed-card { padding: 0; border: 0; background: none; border-radius: .35rem; overflow: hidden; box-shadow: 0 0 0 1.5px var(--rc), 0 0 14px -4px var(--rc); }
.feed-card img { width: 2.6rem; height: 3.6rem; object-fit: cover; object-position: center 20%; }
.feed-text { min-width: 0; font-size: .85rem; line-height: 1.35; }
.feed-text strong { font-weight: 600; }
.feed-text small { display: block; color: var(--muted); font-size: .75rem; }
.ladder-feed .feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; }

/* ---------- Plusieurs jeux ---------- */

/* Choix du jeu, d'après son modèle : une barre arrondie, un segment par jeu avec son emblème, séparés par des filets
   en biais ; le jeu choisi est un parallélogramme cerné de sa couleur. Une flèche signale les jeux cachés à droite. */
.game-switch-wrap { position: relative; display: inline-flex; max-width: 100%; border: 1px solid color-mix(in srgb, var(--cream) 16%, transparent); border-radius: 999px; background: #0b0e13; }
.game-switch { display: flex; max-width: 100%; padding: 0 .9rem; overflow-x: auto; scrollbar-width: none; }
.game-switch::-webkit-scrollbar { display: none; }
.game-switch button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  flex: none;
  min-height: 3.2rem;
  padding: 0 1.25rem;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Filet en biais à gauche de chaque jeu, dans sa couleur ; pas autour du jeu choisi. */
.game-switch button + button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1.5px;
  background: linear-gradient(transparent, var(--gc) 25%, var(--gc) 75%, transparent);
  transform: skewX(-22deg);
  opacity: .7;
}
.game-switch button[aria-pressed="true"]::after, .game-switch button[aria-pressed="true"] + button::after { display: none; }
.game-switch button[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  inset: .3rem .1rem;
  z-index: -1;
  border: 1.5px solid var(--gc);
  border-radius: 3px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--gc) 30%, #0b0e13), color-mix(in srgb, var(--gc) 8%, #0b0e13) 70%);
  box-shadow: 0 0 16px -4px var(--gc);
  transform: skewX(-22deg);
}
.game-switch button { isolation: isolate; }
.gs-icon { width: 2rem; height: 2rem; flex: none; color: var(--gc); }
.game-switch button:hover:not([aria-pressed="true"]) .gs-name { color: #fff; }
/* Boosters offerts restants pour ce jeu, dans sa couleur. */
.free-badge { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .35rem; border-radius: 999px; background: var(--gc, var(--gold)); color: #10131a; font-size: .78rem; font-weight: 700; }
.game-switch [data-pick="val"] .free-badge { color: #fff; }
.gs-more { display: none; position: absolute; right: 0; top: 0; bottom: 0; width: 2.6rem; place-items: center; border: 0; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, transparent, #0b0e13 40%); color: var(--cream); }
.gs-more svg { width: 1.2rem; height: 1.2rem; }
.game-switch-wrap.has-more .gs-more { display: grid; }

/* Nombre de boosters à ouvrir d'un coup. */
.qty { display: inline-flex; gap: .3rem; }
.qty button {
  min-width: 3.1rem;
  padding: .4rem .6rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: transparent;
  color: var(--cream);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, background .2s ease;
}
.qty button[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.qty button:disabled { opacity: .35; cursor: not-allowed; }

/* Énergie : un éclair doré. */
.ico-energy {
  flex: none;
  display: inline-block;
  width: .62rem;
  height: .9rem;
  background: linear-gradient(170deg, #fff1c4, var(--gold) 55%, #b5813a);
  clip-path: polygon(62% 0, 8% 58%, 44% 58%, 32% 100%, 92% 38%, 55% 38%);
}
.gift-reward .ico-energy { width: .42rem; height: .62rem; }

/* Plusieurs boosters : des sachets empilés derrière, et le nombre en pastille. */
.booster-pack.is-stack, .pack-big.is-stack { isolation: isolate; }
.pack-ghost {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform-origin: 50% 90%;
  transition: transform .45s var(--ease), opacity .3s ease;
}
.pack-ghost img { width: 100%; height: 100%; filter: brightness(.5) saturate(.85) drop-shadow(0 18px 22px rgba(0, 0, 0, .6)); }
.pack-ghost[style*="--k:1"] { transform: translate(18px, 4px) rotate(7deg); }
.pack-ghost[style*="--k:2"] { transform: translate(-16px, 6px) rotate(-6deg); }
.pack-ghost[style*="--k:3"] { transform: translate(34px, 12px) rotate(13deg); }
.booster-pack:not(:disabled):hover .pack-ghost[style*="--k:1"] { transform: translate(26px, 2px) rotate(10deg); }
.booster-pack:not(:disabled):hover .pack-ghost[style*="--k:2"] { transform: translate(-24px, 4px) rotate(-9deg); }
.booster-pack:not(:disabled):hover .pack-ghost[style*="--k:3"] { transform: translate(44px, 10px) rotate(16deg); }
.pack-big.tearing .pack-ghost { opacity: 0; transform: translateY(40px) rotate(0deg); }
.pack-count {
  position: absolute;
  z-index: 4;
  top: -.7rem;
  right: -.9rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font: 600 1.05rem/1 var(--display);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8);
  animation: badge-pop .5s cubic-bezier(.3, 1.8, .5, 1);
}
.booster-pack.swap .pack { animation: swap .5s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateX(40px) rotate(6deg) scale(.94); } }

/* Sachet Valorant : son bandeau du bas recouvre « 10 cartes supplémentaires » (le booster en a 6). */
.pack-g-lol { aspect-ratio: 640 / 1173; }
.pack-g-lol .pack-sheen { -webkit-mask-image: url(assets/booster-lol.webp); mask-image: url(assets/booster-lol.webp); }
.pack-g-lol .pack-band { top: 78.6%; height: 11.6%; left: 15.8%; right: 15.8%; }
.pack-g-val { aspect-ratio: 640 / 1190; }
.pack-g-val .pack-sheen { -webkit-mask-image: url(assets/booster-valorant.webp); mask-image: url(assets/booster-valorant.webp); }
.pack-g-val .pack-band { top: 82.6%; height: 8.8%; left: 14.5%; right: 14.5%; border-color: #ff4655; background: #0b0709; }
.pack-g-val .pack-band strong { color: #f3ead7; }
.pack-g-val .pack-band span { color: #ff8a93; }
.pack-gold.pack-g-val .pack-img { filter: sepia(.45) saturate(1.6) hue-rotate(-8deg) brightness(1.08) drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }
.pack-prestige.pack-g-val .pack-img { filter: hue-rotate(250deg) saturate(1.3) brightness(1.05) drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }

/* Cartes Valorant : l'agent sur son dégradé, l'arme en biais sur la couleur de sa gamme. */
.agent { position: absolute; inset: 0; overflow: hidden; background: var(--grad); }
.agent-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; mix-blend-mode: luminosity; }
.agent-art { position: absolute; left: 50%; top: 2%; height: 112%; width: auto; max-width: none; translate: -50% 0; }
.weapon { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tint) 85%, white 15%), var(--tint) 45%, #0b0e13 100%); }
.weapon::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 10px); }
.weapon-img { position: absolute; left: 50%; top: 36%; width: 128%; max-width: none; translate: -50% -50%; rotate: -38deg; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.k-c .card-art > img { object-position: center; }
.k-b .plain-icon { width: 58%; aspect-ratio: 1; object-fit: contain; }
.missing .agent-art, .missing .weapon-img, .missing .agent-bg { filter: grayscale(1) brightness(.45); }
.missing .agent, .missing .weapon { background: var(--panel-2); }

/* Cartes Minecraft : pixel art agrandi sans flou, créatures sur leur couleur, tableaux encadrés de bois. */
.pixel, .moment.k-f > img, .moment.k-d > img, .moment.k-i > img { image-rendering: pixelated; }
.mob { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tint) 75%, white 25%), var(--tint) 55%, #0b0e13 100%); }
.mob::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 8px, transparent 8px 16px), linear-gradient(180deg, #4f8a35 0 14%, #6b4a2e 14%); opacity: .9; }
.mob-img { position: absolute; left: 50%; bottom: 22%; z-index: 1; width: 84%; height: 62%; object-fit: contain; object-position: center bottom; translate: -50% 0; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.painting { position: absolute; inset: 0; display: grid; place-items: center; padding: 14% 10% 34%; background: repeating-linear-gradient(0deg, #6e5233 0 6px, #634a2e 6px 12px); }
.painting-frame { display: block; width: 100%; aspect-ratio: var(--ratio); max-height: 100%; padding: 4%; background: #3b2a1a; box-shadow: inset 0 0 0 2px #8a6a43, 0 8px 14px rgba(0, 0, 0, .5); }
.painting-frame img { width: 100%; height: 100%; object-fit: cover; }
.disc { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 30%; background: radial-gradient(circle at 50% 36%, #3a3346, var(--tint) 55%, #08070a 100%); }
.disc-img { width: 66%; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); }
.k-i .plain-icon { width: 48%; aspect-ratio: 1; object-fit: contain; border-radius: 0; box-shadow: none; }
.missing .mob-img, .missing .painting-frame img, .missing .disc-img { filter: grayscale(1) brightness(.45); }
.pack-g-mc { aspect-ratio: 640 / 1174; }
.pack-g-mc .pack-sheen { -webkit-mask-image: url(assets/booster-minecraft.webp); mask-image: url(assets/booster-minecraft.webp); }
.pack-g-mc .pack-band { top: 77.6%; height: 11.6%; left: 18.5%; right: 18.5%; border-color: #7ed957; background: #10140e; }
.pack-g-mc .pack-band strong { color: #f3ead7; }
.pack-g-mc .pack-band span { color: #a8e58c; }
.pack-gold.pack-g-mc .pack-img { filter: sepia(.45) saturate(1.6) hue-rotate(-8deg) brightness(1.08) drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }
.pack-prestige.pack-g-mc .pack-img { filter: hue-rotate(230deg) saturate(1.3) brightness(1.05) drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }

/* ---------- Cadres de cartes, un par jeu ----------
   Même structure pour tous, sur le modèle Minecraft qu'elle a fourni : fenêtre d'illustration en haut,
   plaque avec le nom et le type en bas, liseré de la couleur de la rareté, badge de rareté et bandeau « Nouvelle ».
   Chaque jeu change les couleurs, la forme et la police. */
.fcard {
  --cut-x: 6%;
  --cut-y: 4.3%;
  --frame: #0c0c0c;
  --plate: #141414;
  --name: var(--cream);
  /* Pourcentages et non cqw : la carte est le conteneur de ses unités cqw, elle ne peut pas s'en servir elle-même. */
  --shape: polygon(var(--cut-x) 0, calc(100% - var(--cut-x)) 0, 100% var(--cut-y), 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, var(--cut-x) 100%, 0 calc(100% - var(--cut-y)), 0 var(--cut-y));
  border-radius: 0;
  background: var(--frame);
  clip-path: var(--shape);
  box-shadow: none;
}
.fcard.r0 { --rc: #8b8f96; }
.fcard::before { content: ""; position: absolute; inset: 2.4cqw; z-index: 3; pointer-events: none; border: max(1.5px, .9cqw) solid var(--rc); clip-path: var(--inner-shape, polygon(4cqw 0, calc(100% - 4cqw) 0, 100% 4cqw, 100% calc(100% - 4cqw), calc(100% - 4cqw) 100%, 4cqw 100%, 0 calc(100% - 4cqw), 0 4cqw)); opacity: .9; }
.f-art { position: absolute; left: 5cqw; right: 5cqw; top: 5cqw; height: 66%; overflow: hidden; background: #1a2030; }
.f-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.f-bg { position: absolute; inset: -4%; background: center / cover no-repeat; }
.f-subject { position: absolute; inset: 0; display: grid; place-items: center; }
.f-plainbg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tint) 85%, white 15%), var(--tint) 55%, #08090c 100%); }
.f-icon { width: 54%; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.k-m-icon { width: 66%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--rc), 0 0 0 5px rgba(0, 0, 0, .3); }
.k-p-icon { width: 78%; aspect-ratio: 1; object-fit: cover; border-radius: 6%; }
.k-o-icon, .k-x-icon { width: 46%; border-radius: 10%; box-shadow: 0 0 0 2px var(--card-gold); }
.k-b-icon { width: 60%; }
.mc-mob { width: 82%; height: 82%; object-fit: contain; object-position: center bottom; align-self: end; margin-bottom: 4%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
.mc-icon { width: 58%; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); rotate: -12deg; }
.mc-icon.is-disc { width: 62%; rotate: 0deg; }
.f-subject .painting-frame { width: 78%; padding: 3%; }
.f-plate {
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  bottom: 5cqw;
  top: calc(66% + 7cqw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  padding: 0 4cqw;
  background: var(--plate);
  text-align: center;
}
.f-name { max-width: 100%; font: 700 clamp(.6rem, 8.6cqw, 1.5rem)/1.02 var(--name-font, var(--serif)); letter-spacing: var(--name-track, -.01em); text-transform: var(--name-case, none); color: var(--name); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.f-type { display: flex; align-items: center; gap: 3cqw; width: 100%; font-size: clamp(.45rem, 4.6cqw, .75rem); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--type, var(--muted)); white-space: nowrap; }
.f-type::before, .f-type::after { content: ""; flex: 1; height: 1px; background: var(--rc); opacity: .8; }
.f-gem { display: none; }
.fcard .card-r { top: 3.6cqw; left: auto; right: 3.6cqw; border-radius: 0; background: var(--frame); color: var(--rc); }
.fcard .card-tag { top: 6cqw; left: -11cqw; right: auto; width: 56cqw; padding: .8cqw 0; border-radius: 0; text-align: center; rotate: -35deg; letter-spacing: .08em; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.fcard .tag-new { background: linear-gradient(90deg, #b98a3a, #ffe1a0, #d9a849); color: #1a1206; }
/* Doublon : le même bandeau, mais gris ardoise sur tous les cadres, pour ne jamais le confondre avec une Nouvelle. */
.fcard .tag-dupe { background: #2b323d; color: #c9d0da; box-shadow: inset 0 0 0 max(1px, .3cqw) #4a5463, 0 2px 6px rgba(0, 0, 0, .5); }
.fcard .card-n { top: auto; bottom: 3cqw; right: 3cqw; border-radius: 0; background: var(--frame); }
.fcard.missing .f-art > *, .fcard.missing .f-subject img { filter: grayscale(1) brightness(.42); }
.fcard.missing .f-name { color: var(--muted); }
.rc .fcard .tag-new { animation: none; }
.rc.flipped .fcard .tag-new { animation: ribbon .45s var(--ease) .55s both; }
@keyframes ribbon { from { opacity: 0; transform: translateX(-30%); } }

/* Minecraft : noir, coins taillés, police pixel, panorama de l'écran-titre. */
.f-mc { --name-font: "Silkscreen", var(--ui); --name-case: uppercase; --name-track: .02em; --plate: linear-gradient(90deg, rgba(255, 255, 255, .03) 50%, transparent 50%) 0 0 / 6cqw 6cqw, linear-gradient(rgba(255, 255, 255, .03) 50%, transparent 50%) 0 0 / 6cqw 6cqw, #141414; }
.f-mc .f-art { background: #2b3a48; }
.f-mc .card-r, .f-mc .card-tag, .f-mc .card-n { font-family: "Silkscreen", var(--ui); }

/* League of Legends : bleu nuit et or, coins taillés comme le client du jeu, double filet, losange hextech. */
/* League of Legends, dans l'esprit de la carte Gooner mais en hextech : l'illustration du skin sur toute la carte,
   médaillon hexagonal doré serti à la couleur de la rareté, cartouche bleu nuit au liseré or, trois losanges
   sur le côté, plaque de verre sombre en bas pour le nom du skin et du champion. */
.f-lol {
  --gold-lol: #c8aa6e;
  --gold-lol-2: #785a28;
  --name: #f0e6d2;
  --type: var(--gold-lol);
  --name-font: "Cinzel", var(--display);
  --name-case: uppercase;
  --name-track: .03em;
  --cut-x: 5%;
  --cut-y: 3.6%;
  background: linear-gradient(165deg, #33465c, #0a1428 40%, #010a13);
}
.f-lol::before { inset: 1.3cqw; border: max(1px, .45cqw) solid var(--gold-lol); opacity: 1; }
/* Équerres dorées dans les coins, comme les cadres du client. */
.f-lol::after {
  content: "";
  position: absolute;
  inset: 3cqw;
  z-index: 3;
  pointer-events: none;
  --l: linear-gradient(var(--gold-lol), var(--gold-lol));
  background:
    var(--l) left top / 7cqw max(1px, .5cqw) no-repeat, var(--l) left top / max(1px, .5cqw) 7cqw no-repeat,
    var(--l) right top / 7cqw max(1px, .5cqw) no-repeat, var(--l) right top / max(1px, .5cqw) 7cqw no-repeat,
    var(--l) left bottom / 7cqw max(1px, .5cqw) no-repeat, var(--l) left bottom / max(1px, .5cqw) 7cqw no-repeat,
    var(--l) right bottom / 7cqw max(1px, .5cqw) no-repeat, var(--l) right bottom / max(1px, .5cqw) 7cqw no-repeat;
}
.f-lol .f-art { left: 3.2cqw; right: 3.2cqw; top: 3.2cqw; bottom: 3.2cqw; height: auto; background: #0a1428; box-shadow: inset 0 0 0 max(1px, .3cqw) rgba(200, 170, 110, .45); clip-path: polygon(3cqw 0, calc(100% - 3cqw) 0, 100% 3cqw, 100% calc(100% - 3cqw), calc(100% - 3cqw) 100%, 3cqw 100%, 0 calc(100% - 3cqw), 0 3cqw); }
.f-lol .f-art > img { object-position: center 16%; }
/* Reflet hextech (bleu et or) sur les Épiques et mieux. */
.f-lol.r3 .f-art::after, .f-lol.r4 .f-art::after, .f-lol.r5 .f-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, transparent 30%, rgba(80, 200, 255, .2) 43%, rgba(240, 200, 120, .24) 53%, transparent 66%);
  mix-blend-mode: screen;
}
/* Médaillon hexagonal : or, serti d'une gemme à la couleur de la rareté. */
.f-lol .f-medal {
  display: grid;
  place-items: center;
  position: absolute;
  top: 2.4cqw;
  left: 2.4cqw;
  z-index: 4;
  width: 11.5cqw;
  height: 13cqw;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, #f0e6d2, var(--gold-lol) 45%, var(--gold-lol-2));
}
.f-lol .f-medal::after {
  content: "";
  width: 7cqw;
  height: 8cqw;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: radial-gradient(circle at 40% 30%, #fff, var(--rc) 45%, color-mix(in srgb, var(--rc) 50%, #010a13));
}
/* Cartouche de rareté en haut. */
.f-lol .card-r {
  top: 4.6cqw;
  left: 16cqw;
  right: 11cqw;
  z-index: 4;
  padding: 1.2cqw 0;
  border: max(1px, .35cqw) solid var(--gold-lol);
  border-radius: 0;
  background: rgba(1, 10, 19, .82);
  color: var(--rc);
  font: 700 clamp(.36rem, 4.2cqw, .72rem)/1 "Cinzel", var(--display);
  letter-spacing: .14em;
  text-align: center;
  box-shadow: 0 .6cqw 1.4cqw rgba(0, 0, 0, .45);
}
/* Trois losanges sur le côté droit, à la couleur de la rareté. */
.f-lol .f-seal {
  display: block;
  position: absolute;
  top: 17cqw;
  right: 5.4cqw;
  z-index: 4;
  width: 3.6cqw;
  height: 3.6cqw;
  rotate: 45deg;
  background: var(--rc);
  border: max(1px, .35cqw) solid var(--gold-lol);
  box-shadow: 4.6cqw 4.6cqw 0 -.35cqw var(--rc), 4.6cqw 4.6cqw 0 0 var(--gold-lol), 9.2cqw 9.2cqw 0 -.35cqw var(--rc), 9.2cqw 9.2cqw 0 0 var(--gold-lol);
}
.f-lol .f-seal::before { display: none; }
/* Plaque de verre sombre en bas : le nom du skin et le champion. */
.f-lol .f-plate {
  top: auto;
  left: 6cqw;
  right: 6cqw;
  bottom: 6.4cqw;
  height: auto;
  gap: .8cqw;
  padding: 2.8cqw 3cqw 2.4cqw;
  background: rgba(1, 10, 19, .74);
  border: max(1px, .3cqw) solid rgba(200, 170, 110, .85);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.f-lol .f-name { font-size: clamp(.5rem, 6.4cqw, 1.2rem); line-height: 1.1; text-shadow: 0 1px 2px #000; }
.f-lol .f-type { font-size: clamp(.32rem, 3.2cqw, .58rem); letter-spacing: .18em; }
.f-lol .f-type::before, .f-lol .f-type::after { background: var(--gold-lol); opacity: .8; }
.f-lol .f-gem { display: block; position: absolute; top: -2.6cqw; left: 50%; width: 4.6cqw; height: 4.6cqw; translate: -50% 0; rotate: 45deg; background: #010a13; border: max(1px, .35cqw) solid var(--gold-lol); box-shadow: inset 0 0 0 1cqw var(--rc); }
.f-lol .card-n { bottom: 1.6cqw; right: 5cqw; background: #010a13; color: var(--gold-lol); border: 1px solid var(--gold-lol); }
.f-lol.missing .f-medal, .f-lol.missing .f-seal { filter: grayscale(1); }

/* Valorant : noir bleuté et rouge, coupes nettes en biais, grosses capitales condensées. */
.f-val {
  --frame: #0f1923;
  --plate: linear-gradient(110deg, #ff4655 0 2.6cqw, transparent 2.6cqw), #111c27;
  --name: #ece8e1;
  --type: #ff8a93;
  --name-font: "Anton", var(--ui);
  --name-case: uppercase;
  --name-track: .03em;
  --shape: polygon(0 0, 89% 0, 100% 7.9%, 100% 100%, 11% 100%, 0 92.1%);
  --inner-shape: polygon(0 0, calc(100% - 9cqw) 0, 100% 9cqw, 100% 100%, 9cqw 100%, 0 calc(100% - 9cqw));
}
.f-val .f-name { font-weight: 400; font-size: clamp(.7rem, 10cqw, 1.7rem); line-height: .98; }
.f-val .f-art { clip-path: polygon(0 0, calc(100% - 7cqw) 0, 100% 7cqw, 100% 100%, 0 100%); }
.f-val .card-r { right: 12cqw; }
.f-val .tag-new { background: #ff4655; color: #fff; }

.f-medal, .f-seal, .f-rule, .f-stars { display: none; }

/* World of Warcraft : ses cadres, un par rareté (assets/frames/wow-r0…r5.webp, tools/prepare_frames.py), posés
   par-dessus l'illustration. Le médaillon et la rareté sont dans l'image ; le nom, dans la plaque du bas, prend la
   couleur de qualité des objets de Warcraft (blanc, vert, bleu, violet, orange, doré). */
.f-wow {
  --name-font: "Cinzel", var(--display);
  --name-track: .01em;
  --type: #d9c9a3;
  --wow-q: #e4e7ec;
  background: transparent;
  clip-path: none;
}
.f-wow.r1 { --wow-q: #4ee86a; }
.f-wow.r2 { --wow-q: #58adff; }
.f-wow.r3 { --wow-q: #c37bff; }
.f-wow.r4 { --wow-q: #ffa640; }
.f-wow.r5 { --wow-q: #ff6b7d; }
.f-wow::before { display: none; }
.f-wow .f-art { left: 9%; right: 9%; top: 8%; height: 74%; background: #070c17; }
.f-frame { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: url(assets/frames/wow-r0.webp) center / 100% 100% no-repeat; }
.f-wow.r1 .f-frame { background-image: url(assets/frames/wow-r1.webp); }
.f-wow.r2 .f-frame { background-image: url(assets/frames/wow-r2.webp); }
.f-wow.r3 .f-frame { background-image: url(assets/frames/wow-r3.webp); }
.f-wow.r4 .f-frame { background-image: url(assets/frames/wow-r4.webp); }
.f-wow.r5 .f-frame { background-image: url(assets/frames/wow-r5.webp); }
.f-wow.missing .f-frame { filter: grayscale(.8) brightness(.65); }
/* La rareté est écrite sur le cadre : l'onglet du site reste pour les lecteurs d'écran seulement. */
.f-wow .card-r { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
/* Plaque d'après sa maquette : nom en grandes capitales crème (réduites pour les noms longs, --len = nombre de
   lettres), type doré et espacé entre deux filets. */
.f-wow .f-plate { left: 11%; right: 11%; top: 82.2%; bottom: 8.4%; z-index: 4; gap: 1.2cqw; padding: 0; background: none; }
.f-wow .f-name { display: block; width: 100%; font: 700 min(6.2cqw, calc(92cqw / var(--len, 14)))/1.15 "Cinzel", var(--display); letter-spacing: .01em; text-transform: uppercase; color: #f3ead7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, .85); }
.f-wow.missing .f-name { color: var(--muted); text-shadow: none; }
.f-wow .f-type { justify-content: center; gap: 2.4cqw; font: 600 clamp(.28rem, 3.4cqw, .62rem)/1.2 "Cinzel", var(--display); letter-spacing: .32em; color: #d4ad62; }
.f-wow .f-type::before, .f-wow .f-type::after { content: ""; flex: 0 0 15cqw; height: max(1px, .3cqw); background: linear-gradient(90deg, transparent, #d4ad62); opacity: 1; }
.f-wow .f-type::after { background: linear-gradient(270deg, transparent, #d4ad62); }
.f-wow .card-n { top: auto; bottom: 19%; right: 10%; z-index: 4; }
.f-wow .card-tag { top: 22%; left: 6%; z-index: 4; width: auto; padding: .7cqw 2.6cqw; rotate: 0deg; border-radius: 0; font-family: "Cinzel", var(--display); letter-spacing: .12em; }
.f-wow .tag-new { background: linear-gradient(90deg, #8a6a1f, #ffd100, #b8901e); color: #1a1206; }
.pack-g-el { aspect-ratio: 640 / 1174; }
.pack-g-el .pack-sheen { -webkit-mask-image: url(assets/booster-elsword.webp); mask-image: url(assets/booster-elsword.webp); }
.pack-g-el .pack-band { top: 78%; height: 10.6%; left: 15.5%; right: 15.5%; border-color: #e0283a; background: #0b0506; }
.pack-g-el .pack-band strong { color: #f3ead7; }
.pack-g-el .pack-band span { color: #ff7a86; }
.pack-gold.pack-g-el .pack-img { filter: sepia(.45) saturate(1.6) hue-rotate(-8deg) brightness(1.08) drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }
.pack-prestige.pack-g-el .pack-img { filter: hue-rotate(250deg) saturate(1.3) brightness(1.05) drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }

/* Elsword, d'après son modèle : cadre rouge sombre à double filet argent, grand portrait rond cerclé de rouge,
   rareté dans un cartouche en haut à droite, plaque noire avec losange rouge, type en rouge entre deux filets, logo en bas. */
.f-el {
  --frame: radial-gradient(120% 80% at 50% 30%, #4a0c14, #23060b 60%, #12040a);
  --plate: linear-gradient(180deg, #1a0609, #0b0304);
  --name: #f5ece6;
  --type: #ff3b4e;
  --name-font: "Cinzel", var(--display);
  --name-case: uppercase;
  --name-track: .02em;
  --shape: inset(0 round 2.2%);
  background: var(--frame);
}
.f-el::before { inset: 1.6cqw; border: max(1px, .5cqw) solid #b9b4bd; clip-path: none; opacity: .85; }
.f-el::after { content: ""; position: absolute; inset: 3.4cqw; z-index: 3; pointer-events: none; border: 1px solid #7d7880; opacity: .9; }
.f-el .f-art { left: 5cqw; right: 5cqw; top: 9cqw; height: 61%; overflow: visible; background: none; }
.f-el .f-art > img {
  inset: 0;
  width: auto;
  height: 100%;
  max-width: 100%;
  margin: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 0 0 max(2px, .9cqw) #e0283a, 0 0 0 max(3px, 1.3cqw) rgba(10, 2, 4, .9), 0 0 5cqw rgba(224, 40, 58, .45);
}
.f-el .f-plate { left: 3.4cqw; right: 3.4cqw; top: calc(9cqw + 61% + 4cqw); bottom: 3.4cqw; gap: 1.6cqw; justify-content: flex-start; padding: 5cqw 4cqw 0; border-top: max(1.5px, .5cqw) solid #e0283a; }
.f-el .f-plate::after { content: "ELSWORD"; position: absolute; left: 0; right: 0; bottom: 3.4cqw; font: 700 clamp(.4rem, 5.2cqw, .95rem)/1 "Cinzel", var(--display); letter-spacing: .12em; text-align: center; background: linear-gradient(180deg, #ffffff, #c9c4cc 55%, #8a8590); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 3px rgba(224, 40, 58, .7)); }
.f-el .f-name { font-size: clamp(.6rem, 9cqw, 1.6rem); line-height: 1.05; text-shadow: 0 1px 0 #000, 0 0 10px rgba(0, 0, 0, .6); }
.f-el .f-type { font-size: clamp(.4rem, 4.6cqw, .8rem); letter-spacing: .14em; }
.f-el .f-type::before, .f-el .f-type::after { background: #8a8590; opacity: 1; }
.f-el .f-gem { display: block; position: absolute; top: -3.6cqw; left: 50%; width: 6.4cqw; height: 6.4cqw; translate: -50% 0; rotate: 45deg; background: #ff2a40; border: max(1px, .35cqw) solid #ffd0d5; box-shadow: 0 0 10px rgba(255, 42, 64, .8); }
.f-el .card-r { top: 4.4cqw; right: 4.4cqw; padding: 1.2cqw 3cqw; background: #0b0304; border: max(1px, .35cqw) solid #e0283a; color: #e9e3e3; letter-spacing: .18em; }
.f-el .card-n { bottom: 5cqw; right: 6cqw; }
.f-el.missing .f-art > img { box-shadow: 0 0 0 max(2px, .9cqw) #4a3a3d, 0 0 0 max(3px, 1.3cqw) rgba(10, 2, 4, .9); }
.f-el .tag-new { background: #e0283a; color: #fff; }
.pack-g-nar { aspect-ratio: 640 / 1066; }
.pack-g-nar .pack-sheen { -webkit-mask-image: url(assets/booster-naruto.webp); mask-image: url(assets/booster-naruto.webp); }
/* Le sachet Norauto n'a pas de mention « 10 cartes » à couvrir, et pas de place libre pour le bandeau : on n'en met pas. */
.pack-g-nar .pack-band { display: none; }
.pack-gold.pack-g-nar .pack-img { filter: sepia(.45) saturate(1.6) brightness(1.08) drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }
.pack-prestige.pack-g-nar .pack-img { filter: hue-rotate(250deg) saturate(1.2) brightness(1.05) drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }

.pack-g-gg { aspect-ratio: 640 / 1179; }
.pack-g-gg .pack-sheen { -webkit-mask-image: url(assets/booster-gooner.webp); mask-image: url(assets/booster-gooner.webp); }
/* Le bandeau couvre « 10 cartes supplémentaires ». */
.pack-g-gg .pack-band { top: 76.4%; height: 6.6%; left: 18%; right: 18%; border-color: #ff2d95; background: #0b0508; }
.pack-g-gg .pack-band strong { color: #ffe6f6; }
.pack-g-gg .pack-band span { color: #ff9be0; }

/* Gooner-Gacha, d'après la carte Genius Invokation qu'elle a envoyée : bordure ivoire à coins carrés, illustration dans
   une fenêtre arrondie, médaillon en goutte en haut à gauche (le rang de la carte), cartouche ivoire en haut pour la
   rareté, trois losanges sur le côté droit, encadré blanc translucide en bas pour le nom et le jeu d'origine. */
.f-gg {
  --ivory: #f1e7d0;
  --ivory-2: #d9c7a0;
  --ink-gg: #3b2f22;
  --name: var(--ink-gg);
  --type: #8a6a3a;
  --name-font: "Cinzel", var(--display);
  --name-case: none;
  --shape: inset(0 round 3.6%);
  background: linear-gradient(160deg, #f7efdc, var(--ivory) 45%, #e6d6b2);
}
.f-gg::before { inset: 1.6cqw; clip-path: none; border: max(1px, .35cqw) solid var(--ivory-2); border-radius: 2.6cqw; opacity: 1; }
/* Petits carrés dans les coins de la bordure. */
.f-gg::after {
  content: "";
  position: absolute;
  inset: .9cqw;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(var(--ivory-2), var(--ivory-2)) left top / 2.4cqw 2.4cqw no-repeat,
    linear-gradient(var(--ivory-2), var(--ivory-2)) right top / 2.4cqw 2.4cqw no-repeat,
    linear-gradient(var(--ivory-2), var(--ivory-2)) left bottom / 2.4cqw 2.4cqw no-repeat,
    linear-gradient(var(--ivory-2), var(--ivory-2)) right bottom / 2.4cqw 2.4cqw no-repeat;
}
.f-gg .f-art { left: 4.4cqw; right: 4.4cqw; top: 4.4cqw; bottom: 4.4cqw; height: auto; border-radius: 2.2cqw; background: #1c2436; box-shadow: inset 0 0 0 max(1px, .3cqw) rgba(59, 47, 34, .35); }
.f-gg .f-art > img { object-position: center 12%; }
/* Reflet holographique sur les Épiques et mieux, comme la carte d'origine. */
.f-gg.r3 .f-art::after, .f-gg.r4 .f-art::after, .f-gg.r5 .f-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, transparent 30%, rgba(255, 120, 220, .22) 42%, rgba(120, 220, 255, .22) 52%, transparent 64%);
  mix-blend-mode: screen;
}
/* Médaillon en goutte : le rang de la carte (1 à 6). */
.f-gg .f-medal {
  display: grid;
  place-items: center;
  position: absolute;
  top: 3.4cqw;
  left: 3.4cqw;
  z-index: 4;
  width: 12cqw;
  height: 12cqw;
  border-radius: 50% 50% 50% 8%;
  rotate: 45deg;
  background: radial-gradient(circle at 40% 35%, #fff9ea, var(--ivory) 55%, var(--ivory-2));
  box-shadow: 0 0 0 max(1px, .4cqw) #b89c66, 0 1cqw 2cqw rgba(0, 0, 0, .35);
}
.f-gg .f-medal::after { rotate: -45deg; font: 700 7cqw/1 "Cinzel", var(--display); color: var(--ink-gg); }
.f-gg.r0 .f-medal::after { content: "1"; }
.f-gg.r1 .f-medal::after { content: "2"; }
.f-gg.r2 .f-medal::after { content: "3"; }
.f-gg.r3 .f-medal::after { content: "4"; }
.f-gg.r4 .f-medal::after { content: "5"; }
.f-gg.r5 .f-medal::after { content: "6"; }
/* Cartouche ivoire en haut : la rareté, à la couleur de la rareté. */
.f-gg .card-r {
  top: 5.6cqw;
  left: 20cqw;
  right: 14cqw;
  z-index: 4;
  padding: 1.2cqw 0;
  border: max(1px, .35cqw) solid #b89c66;
  border-radius: 1.6cqw;
  background: linear-gradient(180deg, #fbf4e2, var(--ivory));
  color: var(--ink-gg);
  font: 700 clamp(.36rem, 4.2cqw, .72rem)/1 "Cinzel", var(--display);
  letter-spacing: .14em;
  text-align: center;
  box-shadow: 0 .6cqw 1.4cqw rgba(0, 0, 0, .3);
}
.f-gg .card-r::before { content: ""; position: absolute; left: 1.6cqw; top: 50%; width: 1.6cqw; height: 1.6cqw; translate: 0 -50%; rotate: 45deg; background: var(--rc); }
.f-gg .card-r::after { content: ""; position: absolute; right: 1.6cqw; top: 50%; width: 1.6cqw; height: 1.6cqw; translate: 0 -50%; rotate: 45deg; background: var(--rc); }
/* Trois losanges sur le côté droit, comme les icônes d'élément, de région et d'arme. */
.f-gg .f-seal {
  display: block;
  position: absolute;
  top: 18cqw;
  right: 6.4cqw;
  z-index: 4;
  width: 4.4cqw;
  height: 4.4cqw;
  rotate: 45deg;
  background: var(--ivory);
  border: max(1px, .35cqw) solid #b89c66;
  /* Le losange est tourné de 45° : pour descendre de 7,4 cqw à l'écran, l'ombre se décale de 7,4 / √2 sur chaque axe. */
  box-shadow: 5.2cqw 5.2cqw 0 -.35cqw var(--ivory), 5.2cqw 5.2cqw 0 0 #b89c66, 10.5cqw 10.5cqw 0 -.35cqw var(--ivory), 10.5cqw 10.5cqw 0 0 #b89c66;
}
.f-gg .f-seal::before { display: none; }
/* Encadré blanc translucide en bas : le nom et le jeu d'origine. */
.f-gg .f-plate {
  top: auto;
  left: 7cqw;
  right: 7cqw;
  bottom: 7.4cqw;
  height: auto;
  gap: .8cqw;
  padding: 2.8cqw 3cqw 2.4cqw;
  border-radius: 2cqw;
  background: rgba(255, 252, 244, .84);
  box-shadow: 0 0 0 max(1px, .3cqw) rgba(184, 156, 102, .7);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.f-gg .f-name { font-size: clamp(.5rem, 6.8cqw, 1.2rem); line-height: 1.1; color: var(--ink-gg); text-shadow: none; }
.f-gg .f-type { font-size: clamp(.32rem, 3.2cqw, .58rem); letter-spacing: .18em; font-weight: 600; }
.f-gg .f-type::before, .f-gg .f-type::after { background: #b89c66; opacity: .8; }
.f-gg .f-gem { display: none; }
.f-gg .card-n { bottom: 2cqw; right: 6cqw; background: var(--ivory); color: var(--ink-gg); }
.f-gg.missing .f-medal, .f-gg.missing .f-plate { filter: grayscale(1); }

/* Goon-tier, pour tous les jeux : les mèmes de la TIG. Noir et rose néon comme son logo, scotch en travers,
   le mème montré en entier (jamais recadré : son texte compte). */
.f-goon {
  --frame: #0d0509;
  --plate: linear-gradient(180deg, #1a0712, #0b0306);
  --name: #fff;
  --type: #ff2d95;
  --name-font: "Anton", var(--ui);
  --name-case: uppercase;
  --name-track: .02em;
  --shape: inset(0 round 3%);
  background: repeating-linear-gradient(135deg, #12060c 0 6cqw, #1c0812 6cqw 12cqw);
}
.f-goon::before { inset: 2.4cqw; clip-path: none; border: max(2px, 1cqw) solid #ff2d95; box-shadow: 0 0 4cqw rgba(255, 45, 149, .55), inset 0 0 4cqw rgba(255, 45, 149, .35); opacity: 1; }
/* Full art : le mème couvre toute la carte, en entier, sur un fond fait de lui-même flouté. */
.f-goon .f-art { left: 0; right: 0; top: 0; height: 100%; display: grid; place-items: center; background: #120408; }
.f-goon .f-art::before { content: ""; position: absolute; inset: -8%; background: var(--art) center / cover no-repeat; filter: blur(4cqw) brightness(.45) saturate(1.4); }
.f-goon .f-art > img { position: relative; inset: auto; width: 92%; height: auto; max-height: 66%; object-fit: contain; rotate: -2deg; margin-top: -16%; filter: drop-shadow(0 1.4cqw 2cqw rgba(0, 0, 0, .7)); }
.f-goon .f-plate { top: auto; left: 0; right: 0; bottom: 0; height: 30%; justify-content: flex-end; padding: 0 7cqw 7cqw; background: linear-gradient(180deg, transparent, rgba(13, 5, 9, .85) 45%, rgba(13, 5, 9, .96)); }
.f-goon .f-name { font-weight: 400; font-size: clamp(.7rem, 10cqw, 1.8rem); line-height: 1; text-shadow: 0.5cqw 0.5cqw 0 #ff2d95, 0 0 10px rgba(0, 0, 0, .8); }
.f-goon .f-type { letter-spacing: .3em; font-weight: 700; }
.f-goon .f-type::before, .f-goon .f-type::after { background: #ff2d95; opacity: .8; }
.f-goon .card-r { background: #ff2d95; color: #0d0509; font-weight: 800; letter-spacing: .14em; }
.f-goon .tag-new { background: linear-gradient(90deg, #ff2d95, #ff8fc6); color: #fff; }
/* Carte dessinée par elle, cadre compris : l'image remplit la carte, sans le cadre ni les textes du site. */
.f-goon.is-designed { background: none; --shape: inset(0 round 4.5%); }
.f-goon.is-designed::before, .f-goon.is-designed .f-plate, .f-goon.is-designed .card-r { display: none; }
.f-goon.is-designed .f-art { inset: 0; height: 100%; background: none; display: block; }
.f-goon.is-designed .f-art::before { display: none; }
.f-goon.is-designed .f-art > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; rotate: 0deg; object-fit: cover; filter: none; }
.f-goon.is-designed.missing .f-art > img { filter: blur(3.4cqw) grayscale(.6) brightness(.5); }

/* Pas encore tirée : le mème et son nom restent un mystère (effet de surprise). */
.f-goon.missing .f-art > img, .f-goon.missing .f-art::before { filter: blur(3.4cqw) grayscale(.6) brightness(.5); }
.f-goon.missing .f-name { position: relative; color: transparent; text-shadow: none; }
.f-goon.missing .f-name::after { content: "???"; position: absolute; inset: 0; color: #ff8fc6; text-shadow: 0 0 10px rgba(0, 0, 0, .8); }
.defi-thumbs img.is-goon-hidden, img.is-goon-hidden { filter: blur(6px) brightness(.5); }
.moment.r6 .moment-plate { background: radial-gradient(50% 40% at 50% 70%, rgba(255, 45, 149, .25), transparent 70%), linear-gradient(180deg, rgba(7, 9, 12, 0), rgba(7, 9, 12, .92) 60%); }

/* Naruto : son cadre (assets/frames/nar-r*.webp, tools/prepare_frame_naruto.py) posé par-dessus l'illustration :
   nuages, feuilles et kunaï autour de la fenêtre, plaque rouge et noire avec le village, logo Norauto en bas.
   Le site écrit la rareté dans le cartouche du haut, le nom et le type dans la plaque. */
.f-nar { --name: #f6ead8; --type: #e9dcc5; background: #120a08; clip-path: inset(0 round 3%); }
.f-nar::before { display: none; }
.f-nar .f-art { left: 3.5%; right: 3.5%; top: 2.5%; height: 68.5%; background: #1a0e0a; }
.f-nar .f-art > img { object-position: center 20%; }
/* Un cadre par rareté (tools/prepare_frame_naruto.py) : acier, vert, bleu, violet, or, rouge d'origine pour les Mythiques. */
.f-nar .f-frame { background-image: url(assets/frames/nar-r0.webp); }
.f-nar.r1 .f-frame { background-image: url(assets/frames/nar-r1.webp); }
.f-nar.r2 .f-frame { background-image: url(assets/frames/nar-r2.webp); }
.f-nar.r3 .f-frame { background-image: url(assets/frames/nar-r3.webp); }
.f-nar.r4 .f-frame { background-image: url(assets/frames/nar-r4.webp); }
.f-nar.r5 .f-frame { background-image: url(assets/frames/nar-r5.webp); }
.f-nar.missing .f-frame { filter: grayscale(.85) brightness(.6); }
.f-nar .card-r { top: 2.3%; left: 70.2%; right: 2.9%; height: 3.2%; display: grid; place-items: center; padding: 0; z-index: 4; border: 0; background: none; color: #f3e6d2; font-size: clamp(.32rem, 3.4cqw, .62rem); letter-spacing: .22em; }
.f-nar .f-plate { top: 73.6%; height: 9%; left: 14%; right: 14%; z-index: 4; justify-content: space-between; gap: 0; padding: 0; background: none; }
.f-nar .f-name { display: block; width: 100%; font: 400 clamp(.5rem, 6.4cqw, 1.2rem)/1.25 "Marcellus SC", "Cinzel", var(--display); letter-spacing: .03em; color: var(--name); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, .8); }
.f-nar .f-type { justify-content: center; font-size: clamp(.28rem, 2.7cqw, .52rem); font-weight: 500; letter-spacing: .3em; line-height: 1.2; }
.f-nar .f-type::before, .f-nar .f-type::after { display: none; }
.f-nar .f-gem { display: none; }
.f-nar .card-n { top: auto; bottom: 19%; right: 6%; z-index: 4; }
/* Plus bas que sur les autres cadres (le symbole de Konoha occupe le coin) : plus long, pour sortir par les deux bords. */
.f-nar .card-tag { top: 17cqw; left: -22cqw; width: 84cqw; z-index: 4; }
.f-nar .tag-new { background: linear-gradient(90deg, #c4161c, #ff5a3a); color: #fff; }
.pack-g-wow { aspect-ratio: 640 / 1056; }
.pack-g-wow .pack-sheen { -webkit-mask-image: url(assets/booster-warcraft.webp); mask-image: url(assets/booster-warcraft.webp); }
.pack-g-wow .pack-band { top: 82.3%; height: 7.4%; left: 17.5%; right: 17.5%; border-color: #d8b56a; background: #0a1124; }
.pack-g-wow .pack-band strong { color: #f3e2b8; }
.pack-g-wow .pack-band span { color: #c9b07a; }
.pack-gold.pack-g-wow .pack-img { filter: sepia(.4) saturate(1.5) brightness(1.08) drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }
.pack-prestige.pack-g-wow .pack-img { filter: hue-rotate(250deg) saturate(1.2) brightness(1.05) drop-shadow(0 28px 28px rgba(0, 0, 0, .55)); }

/* Lost Ark : illustrations de classe en pleine carte, sachet dessiné en attendant un visuel. */
.class-art { object-position: center 12% !important; }

/* Ouverture en rafale : une table de petites cartes. */
.spread.multi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  align-items: start;
  gap: 1rem .6rem;
  width: min(1180px, 100%);
  padding: 1rem 0;
  overflow: visible;
}
.spread.multi .rc { width: auto; rotate: none; }
.spread.multi .rc-label { font-size: .6rem; letter-spacing: .1em; }
.spread.multi .card-tag { font-size: .5rem; padding: .08rem .3rem; }
.spread.multi .card-r { display: none; }

/* Accès réservé : un écran plein qui cache le jeu tant que l'appartenance à la TIG n'est pas vérifiée. */
body.gated { overflow: hidden; }
.gate {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(60% 50% at 50% 35%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%),
    var(--ink);
}
.gate-card { display: flex; flex-direction: column; align-items: center; gap: .8rem; max-width: 440px; text-align: center; animation: rise .6s var(--ease) both; }
.gate-logo { width: 6rem; height: 6rem; margin-bottom: .6rem; border-radius: 1.2rem; }
.gate-card h1 { font: 560 clamp(1.8rem, 6vw, 2.4rem)/1.05 var(--display); letter-spacing: -.035em; }
.gate-card p { margin: 0; color: var(--muted); }
.gate-card .btn-discord { margin-top: .6rem; }

/* ---------- Changement de page ---------- */

::view-transition-old(root) { animation: .2s ease both view-out; }
::view-transition-new(root) { animation: .35s var(--ease) both view-in; }
@keyframes view-out { to { opacity: 0; } }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Pied de page ---------- */

.footer { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 0 0 3rem; color: var(--muted); font-size: .75rem; }
.footer p { max-width: 70ch; margin: 0 0 .5rem; }
.footer .text-btn { font-size: .75rem; }

/* ---------- Tablettes et téléphones ---------- */

/* Entre la tablette et le grand écran : l'en-tête se resserre pour garder ses cinq onglets sur une ligne. */
/* ---------- Profils, marché, échanges ---------- */
.toast-warn { border-color: color-mix(in srgb, var(--r5) 55%, var(--line)); }
.account-me { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; border-radius: 999px; }
.account-me:hover .account-name { color: var(--gold); }
.account-me .badge { margin-left: -.9rem; align-self: flex-start; }
.podium-link { display: contents; color: inherit; text-decoration: none; }
a.ladder-name { color: inherit; text-decoration: none; }
a.ladder-name:hover strong { color: var(--gold); }
.ladder-title { color: var(--gold); font-style: normal; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.market-door { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; padding: 1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius: .9rem; background: linear-gradient(100deg, color-mix(in srgb, var(--gold) 10%, var(--panel)), var(--panel) 55%); color: inherit; text-decoration: none; }
.market-door strong { display: block; font: 560 1.35rem/1.1 var(--display); letter-spacing: -.03em; }
.market-door small { display: block; margin-top: .2rem; color: var(--muted); font-size: .88rem; }
.market-door-go { font-size: 1.4rem; color: var(--gold); transition: translate .25s var(--ease); }
.market-door:hover .market-door-go { translate: 4px 0; }

.profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; margin-bottom: 1.8rem; }
.avatar-xl { width: 5.5rem; height: 5.5rem; box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--gold); }
.profile-id .page-title { overflow-wrap: anywhere; }
.profile-title { margin: .35rem 0 0; color: var(--gold); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.profile-title-pick select { max-width: 17rem; }
.profile-pseudo-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .55rem; max-width: 28rem; margin-top: .8rem; }
.profile-pseudo-form .field { flex: 1 1 12rem; margin: 0; }
.profile-pseudo-form input { width: 100%; color: var(--ink); caret-color: var(--pink); }
.profile-pseudo-form input::placeholder { color: #615964; opacity: 1; }
.profile-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.profile-block { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 2rem; }
.profile-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.profile-slot { display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.profile-slot .card-btn { width: 100%; }
.profile-tag { font-size: .75rem; color: var(--muted); }
.profile-tag.is-good { color: var(--r1); font-weight: 600; }
.profile-coll { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.profile-coll .profile-slot .card-btn { width: 100%; }
.their-more { align-self: center; }
.profile-empty { margin: 0; padding: 1rem 1.1rem; border: 1px dashed var(--line); border-radius: .8rem; color: var(--muted); font-size: .9rem; }
.profile-defis { border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }
.profile-defis summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums; }
.profile-game { display: inline-flex; align-items: center; gap: .5rem; }
.profile-game::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gc); }
.profile-defis ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .3rem 1rem; margin: 0; padding: 0 1rem 1rem; list-style: none; }
.profile-defis li { display: flex; flex-direction: column; font-size: .9rem; }
.profile-defis li small { color: var(--muted); font-size: .75rem; }

.mk-chip { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; font-size: .82rem; }
.mk-chip img { width: 2.1rem; height: 2.9rem; flex: none; object-fit: cover; object-position: center 20%; border-radius: .3rem; box-shadow: 0 0 0 1.5px var(--rc); background: var(--panel-2); }
.mk-chip > span { display: flex; flex-direction: column; min-width: 0; }
.mk-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-chip small { color: var(--rc); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mk-chips { display: flex; flex-direction: column; gap: .45rem; }
.mk-none { color: var(--muted); font-size: .85rem; }
.mk-sub { margin: .4rem 0 0; color: var(--gold); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.mk-trades { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.mk-trade { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); }
.mk-trade.is-past { opacity: .7; }
.mk-trade-who { margin: 0; font-weight: 600; }
.mk-trade-who a { color: inherit; }
.mk-trade-msg { margin: 0; color: var(--muted); font-size: .9rem; font-style: italic; }
.mk-trade-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.mk-trade-sides small { display: block; margin-bottom: .4rem; color: var(--muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.mk-trade-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-mine { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mk-mine li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }
.mk-mine strong { display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; }

.mk-check { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: .9rem; cursor: pointer; }
.mk-check input { accent-color: var(--gold); }
#mk-count { margin-bottom: .9rem; }
.mk-seller { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; color: var(--muted); font-size: .8rem; }
.mk-seller a { color: var(--cream); }
.mk-tag { padding: .05rem .45rem; border: 1px solid var(--line); border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mk-tag.is-wish { border-color: var(--gold); color: var(--gold); }

.mk-sheet { width: min(860px, calc(100% - 2rem)); }
.mk-form { display: flex; flex-direction: column; gap: 1rem; padding: .6rem 1.2rem 1.3rem; overflow-y: auto; }
#mk-sell-form { flex-direction: row; gap: 1.4rem; align-items: flex-start; }
.mk-sell-card { width: 11rem; flex: none; }
.mk-sell-body { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.mk-sell-body h3 { font: 560 1.6rem/1.05 var(--display); letter-spacing: -.03em; }
.mk-note { margin: 0; color: var(--muted); font-size: .85rem; }
.mk-price { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: var(--muted); }
.mk-price input { width: 12rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.mk-msg input { width: 100%; }
.mk-price input:focus { outline: none; border-color: var(--gold); }
.mk-pickers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mk-pickers section { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.mk-pickers .search { flex: none; min-height: 2.4rem; }
.mk-pick { display: flex; flex-direction: column; gap: .3rem; max-height: 21rem; overflow-y: auto; padding-right: .2rem; }
.mk-pick-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--ink); color: var(--cream); text-align: left; }
.mk-pick-item:hover { border-color: color-mix(in srgb, var(--rc) 50%, var(--line)); }
.mk-pick-item[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--ink)); }
.mk-pick-item em { flex: none; color: var(--gold); font-style: normal; font-size: .7rem; font-weight: 600; }
#mk-send { align-self: flex-start; }

@media (max-width: 720px) {
  .profile-head { grid-template-columns: auto minmax(0, 1fr); }
  .profile-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .avatar-xl { width: 4rem; height: 4rem; }
  .profile-cols, .mk-pickers { grid-template-columns: 1fr; }
  #mk-sell-form { flex-direction: column; align-items: center; }
  .mk-sell-card { width: 8.5rem; }
  .mk-pick { max-height: 14rem; }
  .mk-mine li { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-mine li .btn { grid-column: 1 / -1; }
}

/* Logo seul tant que les onglets et les compteurs n'ont pas la place à côté du nom. */
@media (max-width: 1520px) {
  .pill-label { display: none; }
}
@media (max-width: 1340px) {
  .wordmark-name { display: none; }
}
@media (max-width: 1100px) {
  .topbar { gap: 1rem; }
  .tabs a { padding-inline: .6rem; }
  .pill .pill-timer, .account .wide-only { display: none; }
}

@media (max-width: 960px) {
  .shop-packs, .earn { grid-template-columns: minmax(0, 1fr); }
  .detail-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 3.6rem 1.2rem 1.4rem; }
  .detail-card { width: min(240px, 70vw); }
  .defi summary { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .defi-progress { grid-column: 2 / -1; }
  .defi-reward { grid-column: 2; }
}
/* Sur téléphone : une seule colonne et une barre d'onglets en bas, comme une appli. */
@media (max-width: 860px) {
  .atelier { grid-template-columns: minmax(0, 1fr); justify-content: stretch; min-height: 0; gap: 1.5rem; }
  .rail { border-left: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); }
  main { padding-bottom: 6.5rem; }
  .footer { padding-bottom: 6.5rem; }
  .tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    padding: .35rem .4rem calc(.4rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--ink) 92%, transparent);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }
  .tabs a { flex-direction: column; justify-content: center; gap: .15rem; min-height: 3rem; padding: 0; border-radius: .7rem; font-size: .74rem; }
  .tabs a svg { display: block; }
  .tabs a[aria-current="page"] { color: var(--cream); }
  .perks { display: flex; flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 0 .2rem; }
  .perks::-webkit-scrollbar { display: none; }
  .perk { flex: none; min-height: 2.2rem; font-size: .8rem; padding-right: .75rem; }
  .tab-ink { display: none; }
  .tabs .badge { position: absolute; top: .2rem; left: calc(50% + .45rem); }
}
/* Six onglets (sept avec l'admin) sur un petit téléphone : des libellés un peu plus petits. */
@media (max-width: 420px) {
  .tabs a { font-size: .66rem; letter-spacing: -.01em; }
}
@media (max-width: 560px) {
  .topbar { gap: .8rem; padding: max(.5rem, env(safe-area-inset-top)) 1rem .5rem; }
  .account-name, .wide-only { display: none; }
  .narrow-only { display: block; }
  .detail-close { width: 2.4rem; min-width: 0; padding: 0; }
  .detail-close svg { width: 1.1rem; height: 1.1rem; }
  .wallet { gap: .35rem; }
  .pill .pill-timer { display: none; }
  .grid, .shop-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .btn.btn-big, .btn.btn-primary { min-width: 12rem; }
  .stage { gap: .8rem; }
  .shop-wallet { flex-direction: row; align-items: baseline; gap: .7rem; }
  /* À l'ouverture, les six cartes tiennent dans l'écran : on voit d'un coup où brille la rare. */
  .spread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1.3rem .6rem; padding: 1rem 0; overflow: visible; }
  .rc { width: auto; rotate: none; }
  .rc .card-r { display: none; }
  .recap-row:nth-child(n+4) { display: none; }
  .spread.single { display: flex; justify-content: center; }
  .spread.multi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem .4rem; }
  .game-switch { padding: 0 .4rem; }
  .game-switch button { gap: .5rem; min-height: 2.9rem; padding: 0 .95rem; font-size: .86rem; }
  .gs-icon { width: 1.5rem; height: 1.5rem; }
  .stage-title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .qty button { min-width: 2.7rem; }
  .opening-foot { gap: .55rem; }
  /* Les puces de rareté défilent sur une ligne, les menus passent en 2×2. */
  .rarity-bar { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .rarity-bar::-webkit-scrollbar { display: none; }
  .rarity-bar button { flex: none; }
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .search { grid-column: 1 / -1; }
  .filters-defis .search { grid-column: 1 / -1; }
  .select select { width: 100%; min-width: 0; text-overflow: ellipsis; }
  .booster-pack { width: min(170px, 46vw, 25svh); margin: .4rem 0 .2rem; }
  .lede { font-size: .9rem; }
  .shop-pack { grid-template-columns: 72px minmax(0, 1fr); }
  .ladder-row { grid-template-columns: 1.6rem 2rem minmax(0, 1fr) 3.4rem; gap: .6rem; }
  .ladder-showcase { display: none; }
  .podium { gap: .5rem; }
  .avatar-lg { width: 3rem; height: 3rem; }
}
@media (max-width: 380px) {
  .topbar { gap: .5rem; padding-inline: .75rem; }
  .wordmark-name { font-size: 1.15rem; }
  .pill { padding: .3rem .55rem .3rem .45rem; }
  .account .btn { padding: 0 .75rem; }
}

/* ---------- Identité TIG ----------
   Habillage de toute l'interface d'après les cartes TIG : bandeau noir fermé par un filet rose, titres
   condensés en capitales, fiches crème au texte noir, boutons à coin coupé, rayures roses en biais.
   Aucun arrondi de pilule ni halo ; le mouvement reste sur les sachets et les cartes. */

body { font-family: var(--ui); }
.filter-row { display: contents; }
::selection { background: var(--pink); color: var(--ink); }
:focus-visible { outline-color: var(--pink); }
.eyebrow { color: var(--pink); font-weight: 700; letter-spacing: .14em; font-size: .7rem; }

/* Barre du haut */
.topbar { gap: 2rem; border-bottom: 2px solid var(--pink); }
.topbar::before { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Le logo et son nom ne rétrécissent jamais : ils ne passent plus sous les onglets. */
.wordmark { flex: none; }
.wordmark-logo { border-radius: .45rem; box-shadow: none; }
.wordmark-name { font: 900 1.55rem/1 var(--display); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.tabs { gap: 0; }
.tabs a { padding: .9rem .75rem; border-radius: 0; font: 700 .78rem/1 var(--ui); font-stretch: 112%; letter-spacing: .09em; text-transform: uppercase; }
.tabs a:hover:not([aria-current="page"]) { color: var(--paper); }
.tabs a[aria-current="page"] { color: var(--paper); }
/* Le trait rose glisse sous l'onglet ouvert. */
.tab-ink { top: auto; bottom: .25rem; height: 3px; margin: 0; border-radius: 0; background: var(--pink); }
.badge { border-radius: 2px; background: var(--pink); color: var(--ink); font-weight: 800; }
.badge:not([hidden])::after { border-color: var(--pink); }
.pill { gap: .45rem; padding: .3rem .6rem .3rem .4rem; border: 0; border-radius: 0; background: transparent; }
.pill strong { font: 900 1.35rem/1 var(--display); letter-spacing: .01em; }
.pill small { font: 700 .62rem/1.1 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.pill:hover { background: var(--panel); }
.ring-bg { stroke: var(--line); }
.ring-fg { stroke-linecap: butt; }
.account .btn, .btn.btn-discord { min-height: 2.6rem; border: 0; border-radius: 0; background: var(--paper); color: var(--ink); font: 800 .78rem/1 var(--ui); font-stretch: 110%; letter-spacing: .08em; text-transform: uppercase; clip-path: var(--cut); }
.btn.btn-discord:hover:not(:disabled), .account .btn:hover:not(:disabled) { background: #fff; }
.avatar { border-radius: 0; box-shadow: 0 0 0 2px var(--pink); }

/* Boutons */
.btn, .ghost { min-height: 2.6rem; border: 1.5px solid var(--line); border-radius: 0; font: 700 .78rem/1 var(--ui); font-stretch: 110%; letter-spacing: .08em; text-transform: uppercase; }
.btn:hover:not(:disabled), .ghost:hover:not(:disabled) { border-color: var(--paper); }
.btn.btn-primary { gap: .2rem; min-height: 3.6rem; padding: .7rem 1.8rem .7rem 1.4rem; border-radius: 0; background: var(--pink); color: var(--ink); font: 900 1.6rem/1 var(--display); letter-spacing: .02em; clip-path: var(--cut); }
.btn.btn-primary:hover:not(:disabled) { background: #ff5aa3; }
.btn.btn-primary:disabled { background: var(--panel-2); color: var(--muted); }
.btn.btn-primary.btn-small { min-height: 2.6rem; padding: 0 1.2rem 0 1rem; font-size: 1.15rem; }
.btn.btn-big { min-width: 16rem; min-height: 4rem; font-size: 1.75rem; }
.btn-sub { font: 700 .66rem/1.2 var(--ui); letter-spacing: .1em; opacity: .75; }
.claim { min-height: 2.6rem; border-radius: 0; background: var(--ink); color: var(--paper); font: 800 .76rem/1 var(--ui); font-stretch: 110%; letter-spacing: .09em; text-transform: uppercase; clip-path: var(--cut); padding: 0 1.2rem 0 1rem; }
.claim:hover { background: #2a2430; }
.text-btn, .link-btn, .btn-ghost { font-weight: 600; }
.icon-btn { border-radius: 0; }
.btn.btn-buy { border-radius: 0; background: var(--paper); font: 800 .76rem/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.btn.btn-buy:hover:not(:disabled) { background: #fff; }

/* Accueil : le titre et les réglages à gauche, le sachet à droite, les fiches dans la colonne. */
.atelier { grid-template-columns: minmax(0, 1fr) 330px; justify-content: stretch; align-items: start; gap: 3rem; min-height: 0; padding-top: .5rem; }
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  grid-template-areas:
    "gift   gift"
    "switch switch"
    "title  pack"
    "lede   pack"
    "perks  pack"
    "qty    pack"
    "action pack"
    "note   pack";
  grid-template-rows: auto auto auto auto auto auto auto 1fr;
  align-items: start;
  justify-items: start;
  column-gap: 2rem;
  row-gap: 1.1rem;
  text-align: left;
  /* Le titre se règle sur la largeur de la scène : un mot long (« Invocation ») tient sur sa ligne. */
  container-type: inline-size;
}
.stage > .perk-choose { grid-area: gift; margin: 0; }
.stage > .game-switch-wrap { grid-area: switch; justify-self: stretch; margin-bottom: 1.2rem; }
.stage > .stage-title { grid-area: title; margin-top: 1rem; }
.stage > .lede { grid-area: lede; }
.stage > .perks { grid-area: perks; }
/* Le sachet laisse de la place à droite pour la pile quand on en ouvre plusieurs. */
.stage > .booster-pack { grid-area: pack; align-self: center; justify-self: start; width: min(280px, 76%); margin: 0 0 0 4%; }
.stage > .qty { grid-area: qty; margin-top: .6rem; }
.stage > .btn, .stage > .empty-actions { grid-area: action; }
.stage > .stock-note { grid-area: note; }
.stage-title { font: 900 min(7.2rem, 10.5cqi)/.86 var(--display); letter-spacing: 0; text-transform: uppercase; }
.stage-title em { display: block; font-style: normal; color: var(--pink); }
.stage-title::after, .page-title::after { content: ""; display: block; width: 4.6rem; height: 1rem; margin-top: 1.1rem; background: var(--hatch); }
.lede { max-width: 36ch; font-size: 1.08rem; }
.stock-note { font-size: .82rem; }
.qty { gap: .35rem; }
.qty button { min-width: 3.3rem; padding: .7rem .6rem; border: 1.5px solid var(--line); border-radius: 0; color: var(--muted); font: 800 .9rem/1 var(--ui); }
.qty button[aria-pressed="true"] { border-color: var(--paper); background: transparent; color: var(--paper); }
.booster-pack { rotate: 3deg; }
.pack-count { border-radius: 0; background: var(--paper); font: 900 1.5rem/1 var(--display); padding: .35rem .6rem; }
.perks { justify-content: flex-start; }
.perk { border: 0; border-radius: 0; background: var(--panel-2); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.perk .gift-body, .perk .gift-lid { fill: var(--pink); }
.perk .gift-ribbon, .perk .gift-bow { fill: var(--paper); }
.perk img { border-radius: 0; }
.notice { border: 0; border-left: 4px solid var(--pink); border-radius: 0; background: var(--panel); }

/* Choix du jeu : une rangée d'onglets ; le jeu ouvert devient une plaque crème. */
.game-switch-wrap { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.game-switch { padding: 0; }
.game-switch button { gap: .55rem; min-height: 3.1rem; padding: 0 1rem; color: var(--muted); font: 800 .8rem/1 var(--ui); font-stretch: 115%; letter-spacing: .07em; text-transform: uppercase; }
.game-switch button + button::after { display: none; }
.game-switch button[aria-pressed="true"] { color: var(--ink); }
.game-switch button[aria-pressed="true"]::before { inset: 0; border: 0; border-radius: 0; background: var(--paper); box-shadow: none; transform: none; }
.game-switch button:hover:not([aria-pressed="true"]) .gs-name { color: var(--paper); }
.gs-icon { width: 1.55rem; height: 1.55rem; }
.free-badge { min-width: 1.3rem; height: 1.3rem; border-radius: 0; background: var(--pink); color: var(--ink); font-size: .72rem; font-weight: 800; }
.game-switch [data-pick="val"] .free-badge { color: var(--ink); }
.gs-more { border-radius: 0; background: linear-gradient(90deg, transparent, var(--ink) 45%); }

/* Colonne de l'accueil : la progression sur fond sombre, le cadeau et le pack du jour sur des fiches crème. */
.rail { position: relative; z-index: 1; gap: 1rem; padding: 0; border-left: 0; }
#counters { padding: 1rem 1.1rem; background: var(--panel); border-top: 3px solid var(--pink); display: grid; gap: .7rem; }
.track { height: 5px; border-radius: 0; background: var(--line); }
.track i { background: var(--pink); }
.rail-block { gap: .45rem; padding: 1.1rem 1.15rem 1.2rem; border-top: 0; }
/* Cadeau et pack du jour : un voile rose translucide sur le fond sombre, liseré fin, texte clair. */
.rail-block.streak, .rail-block.daily {
  background: color-mix(in srgb, var(--pink) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--pink) 30%, transparent);
  color: var(--cream);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.rail-block.streak .eyebrow, .rail-block.daily .eyebrow { color: var(--pink); }
.rail-title { font: 900 1.65rem/1 var(--display); letter-spacing: .005em; text-transform: uppercase; }
.rail-title span { display: block; margin: .3rem 0 0; font: 700 .78rem/1.2 var(--ui); letter-spacing: .02em; text-transform: none; color: var(--pink); }
.rail-block.streak .rail-note, .rail-block.daily .rail-note { color: var(--muted); }
.rail-block.daily .ghost { border-color: color-mix(in srgb, var(--cream) 70%, transparent); color: var(--cream); }
.rail-block.daily .ghost:hover { background: var(--cream); color: var(--ink); }
.daily { grid-template-columns: 60px minmax(0, 1fr); align-items: start; }
.daily img { width: 60px; height: 84px; border-radius: 0; }
.gift { border: 1.5px solid color-mix(in srgb, var(--cream) 35%, transparent); border-radius: 0; background: transparent; color: var(--cream); }
.gift .gift-body, .gift .gift-lid { fill: color-mix(in srgb, var(--cream) 70%, transparent); }
.gift .gift-ribbon, .gift .gift-bow { fill: var(--ink); }
.gift.is-done { opacity: 1; border-color: transparent; background: color-mix(in srgb, var(--cream) 8%, transparent); color: var(--muted); }
.gift.is-done .gift-body, .gift.is-done .gift-lid { fill: color-mix(in srgb, var(--cream) 30%, transparent); }
.gift.is-today { border-color: var(--pink); background: var(--pink); color: var(--ink); box-shadow: none; }
.gift.is-today .gift-body, .gift.is-today .gift-lid { fill: var(--ink); }
.gift.is-today .gift-ribbon, .gift.is-today .gift-bow { fill: var(--pink); }
.gift.is-big.is-today { background: var(--pink); }
#feed .rail-block { padding: 1rem 0 0; border-top: 1px solid var(--line); }
.feed-card { border-radius: 0; }
.rail-links { border-top: 1px solid var(--line); }
.milestone.is-ready { border-radius: 0; border-color: var(--pink); }

/* En-têtes de page : grand titre en capitales et rayures roses, sans libellé au-dessus. */
.page-head { align-items: flex-end; margin-bottom: 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.page-title { margin: 0; font: 900 clamp(3.4rem, 6.4vw, 5.6rem)/.86 var(--display); letter-spacing: 0; text-transform: uppercase; }
.page-title::after { width: 3.6rem; height: .8rem; margin: .9rem 0 .2rem; }
.page-sub { margin-top: .5rem; }
.page-lead { max-width: 64ch; }
.section-title { font: 900 2.1rem/1 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.track-lg { max-width: 460px; }

/* Collection */
.rarity-bar { gap: .3rem; }
.rarity-bar button { min-height: 2.2rem; padding: 0 .7rem; border: 1.5px solid var(--line); border-radius: 0; font-size: .8rem; }
.rarity-bar .gem { width: .55rem; height: .55rem; border-radius: 0; rotate: 45deg; }
.rarity-bar button[aria-pressed="true"] { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent); }
.search, .select select, .mk-check, .mk-price input { border: 1.5px solid var(--line); border-radius: 0; background-color: var(--panel); }
.search:focus-within, .select select:focus, .mk-price input:focus { border-color: var(--pink); }
.select select { font-weight: 600; }
.card-btn.is-unseen::after { border-radius: 0; rotate: 45deg; background: var(--pink); }

/* Défis */
.defis { gap: .5rem; }
.defi { border: 0; border-left: 4px solid var(--line); border-radius: 0; }
.defi:hover, .defi[open] { border-left-color: var(--paper); }
.defi.complete { border-left-color: var(--pink); }
.defi-art img { border-radius: 0; }
.defi-name strong { font: 900 1.45rem/1 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.defi-name span { font-weight: 700; font-size: .7rem; }
.defi-state { color: var(--pink); font-weight: 700; }
.defi.complete .track i { background: var(--paper); }

/* Boutique */
.market-door { border: 0; border-radius: 0; background: var(--paper); color: var(--ink); clip-path: var(--cut); }
.market-door strong { font: 900 1.9rem/1 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.market-door small { color: var(--ink-soft); }
.market-door-go { color: var(--pink-deep); font-weight: 800; }
.shop-wallet span { font-weight: 700; }
.shop-wallet strong { font: 900 3.4rem/1 var(--display); letter-spacing: 0; }
.shop-pack, .earn-item, .mk-trade, .mk-mine li, .ladder-login, .profile-defis, .pick-list li, .mk-pick-item { border-radius: 0; }
.shop-pack { border: 0; border-top: 3px solid var(--line); }
.shop-pack.is-gold { border-top-color: var(--r4); }
.shop-pack.is-prestige { border-top-color: var(--r3); }
.shop-pack-text h3, .earn-item h3, .mk-sell-body h3, .ladder-login h2, .welcome h2, .gate-card h1 { font: 900 1.7rem/1 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.shop-pack-text .btn-primary { font-size: 1.25rem; }
.earn-item { border: 0; border-top: 3px solid var(--pink); }

/* Classement, profils, marché */
.ladder-sort { border-radius: 0; padding: 0; gap: 0; border: 1.5px solid var(--line); }
.ladder-sort button { border-radius: 0; font: 700 .76rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; padding: .75rem 1rem; }
.ladder-sort button[aria-pressed="true"] { background: var(--paper); }
.podium-base { border-radius: 0; background: var(--panel); font: 900 2.6rem/1 var(--display); }
.p1 .podium-base { border-color: var(--pink); background: var(--pink); color: var(--ink); }
.p1 .avatar-lg { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--pink); }
.ladder-row { border: 0; border-left: 4px solid transparent; border-radius: 0; }
.ladder-row.is-me { border-left-color: var(--pink); background: var(--panel-2); }
.ladder-rank { font: 900 1.6rem/1 var(--display); }
.avatar-xl { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--pink); }
.profile-empty { border-radius: 0; }
.mk-chip img, .mk-tag { border-radius: 0; }

/* Fenêtres */
.sheet, .detail, dialog.sheet { border: 0; border-top: 3px solid var(--pink); border-radius: 0; }
.sheet h2 { font: 900 2.2rem/1 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.rules h3 { color: var(--pink); font-weight: 700; }
.detail-body h2 { font: 900 clamp(2.4rem, 5vw, 3.6rem)/.92 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.detail-rarity { font-weight: 700; }
.detail-nav { border-radius: 0; }
.detail-card { border-radius: 0; }
.toast { border: 0; border-left: 4px solid var(--pink); border-radius: 0; background: var(--panel); }
.toast-gold { background: var(--panel); }
.toast-gold strong { color: var(--pink); }
.toast-action { border-radius: 0; background: var(--paper); font-weight: 800; }
.pick-step button { border-radius: 0; }
.pick-pack strong, .pick-step output, .pack-wait strong, .deck-count, .ladder-rank { font-family: var(--display); font-weight: 900; }
.pick-pack strong { text-transform: uppercase; font-size: 1.35rem; }

/* Plein écran d'une carte et paquet ouvert : le nom en grandes capitales. */
.moment-name { font: 900 clamp(3rem, 7vw, 5.6rem)/.88 var(--display) !important; letter-spacing: .005em !important; text-transform: uppercase; }
.deck-name { font: 900 clamp(1.8rem, 6vw, 2.6rem)/.95 var(--display) !important; letter-spacing: .005em !important; text-transform: uppercase; }
.opening-title { font-family: var(--display); font-weight: 900; text-transform: uppercase; }

/* Récapitulatif d'ouverture, annonces et squelettes de chargement : angles droits eux aussi. */
.recap-row, .pack-announce, .skel, .skel-btn, .wallet.is-loading strong, .detail-close.btn-primary { border-radius: 0; }
.recap-row { border-left: 3px solid var(--line); }

/* Pied de page : un vrai bas de page, séparé du contenu. */
.footer { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }

/* Logo seul tant que les onglets et les compteurs n'ont pas la place à côté du nom. */
@media (max-width: 1520px) {
  .pill-label { display: none; }
}
@media (max-width: 1340px) {
  .wordmark-name { display: none; }
}
@media (max-width: 1100px) {
  .topbar { gap: 1rem; }
  .tabs a { padding-inline: .55rem; letter-spacing: .06em; }
  .atelier { grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; }
}
/* Fenêtre étroite sur ordinateur : onglets et compte resserrés pour garder la barre sur une ligne. */
@media (min-width: 861px) and (max-width: 1040px) {
  .topbar { gap: .6rem; padding-inline: 1rem; }
  .wordmark { flex: none; }
  .tabs a { padding-inline: .4rem; font-size: .7rem; font-stretch: 100%; letter-spacing: .03em; }
  .wallet { gap: 0; }
  .account .btn, .btn.btn-discord { padding-inline: .8rem; font-size: .7rem; }
}
@media (max-width: 960px) {
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
}
/* Téléphone : une colonne, le sachet sous le titre ; la barre d'onglets du bas en noir et rose. */
@media (max-width: 860px) {
  .atelier { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "gift" "switch" "title" "lede" "perks" "pack" "qty" "action" "note";
    grid-template-rows: none;
    row-gap: .9rem;
  }
  .stage > .game-switch-wrap { margin-inline: -1rem; width: calc(100% + 2rem); max-width: none; margin-bottom: .4rem; }
  .stage > .game-switch-wrap .game-switch { padding-inline: 1rem; }
  .stage > .stage-title { margin-top: .4rem; }
  .stage > .booster-pack { justify-self: center; width: min(210px, 56vw, 30svh); margin: .4rem 0; }
  .stage-title { font-size: min(5.6rem, 19cqi); }
  .stage > .btn { width: 100%; }
  .tabs { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 2px solid var(--pink); padding-inline: .25rem; }
  .tabs a { gap: .25rem; min-width: 0; min-height: 3.1rem; border-radius: 0; font-size: .6rem; font-stretch: 75%; letter-spacing: .03em; }
  .tabs a[aria-current="page"] { background: var(--paper); color: var(--ink); }
  .rail { border-top: 0; padding: 0; }
  .perk { font-size: .72rem; }
}
@media (max-width: 560px) {
  .wordmark-name { display: none; }
  .page-title { font-size: clamp(2.8rem, 14vw, 3.6rem); }
  .page-head { margin-bottom: 1.1rem; padding-bottom: 1rem; }
  .btn.btn-big, .btn.btn-primary { min-width: 0; }
  /* Les filtres tiennent sur deux lignes : la recherche, puis les menus qui défilent de côté. */
  .filters { display: flex; flex-direction: column; flex-wrap: nowrap; gap: .4rem; }
  .filters .search { flex: none; }
  .filter-row { display: flex; gap: .4rem; margin-inline: -1rem; padding-inline: 1rem; overflow-x: auto; scrollbar-width: none; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-row .select { flex: none; }
  .filter-row .select select { width: auto; min-height: 2.5rem; font-size: .82rem; }
  .pill strong { font-size: 1.2rem; }
}
@media (max-width: 420px) {
  .tabs a { font-size: .56rem; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ---------- Fond texturé et sachets mis en avant ----------
   Un fond un peu moins noir, avec un grain de papier et deux halos (rose en haut, violet en bas) ;
   derrière chaque booster, un halo à la couleur de son jeu et une trame de points façon carte à collectionner. */
:root {
  --bg: #19141f;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
  --glow-top: radial-gradient(1100px 620px at 12% -8%, rgba(255, 45, 138, .16), transparent 62%);
  --glow-bottom: radial-gradient(900px 700px at 105% 105%, rgba(132, 84, 214, .17), transparent 60%);
}
html { background: var(--bg); }
body { background: var(--grain), var(--glow-top), var(--glow-bottom), var(--bg); background-attachment: fixed; }
.opening { background: var(--grain), radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--gc, var(--pink)) 20%, transparent), transparent 70%), var(--glow-bottom), var(--bg); }

.booster-pack, .pack-big { isolation: isolate; }
.booster-pack::before, .pack-big::before {
  content: "";
  position: absolute;
  inset: -30% -55%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--gc, var(--pink)) 42%, transparent), color-mix(in srgb, var(--gc, var(--pink)) 12%, transparent) 55%, transparent 78%),
    radial-gradient(circle, color-mix(in srgb, var(--gc, var(--pink)) 55%, transparent) 1.3px, transparent 1.8px) 0 0 / 11px 11px;
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent 80%);
          mask: radial-gradient(closest-side, #000 35%, transparent 80%);
  rotate: -3deg;
  transition: opacity .4s ease;
}
.booster-pack.is-empty::before { opacity: .25; }
.pack-big.tearing::before { opacity: 0; }

/* ---------- Accueil : la scène et les derniers tirages à gauche, la progression à droite ----------
   Les gros tirages passent sous le sachet : plus de grand vide à gauche quand la colonne de droite s'allonge. */
.atelier { grid-template-areas: "stage rail" "feed rail"; grid-template-rows: auto 1fr; row-gap: 2.2rem; }
.atelier > .stage { grid-area: stage; }
.atelier > .rail { grid-area: rail; }
.atelier > .atelier-feed { grid-area: feed; align-self: start; min-width: 0; }
.atelier-feed:empty { display: none; }
.atelier-feed .rail-block { padding: 1.2rem 0 0; border-top: 1px solid var(--line); }
.atelier-feed .feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem 1.4rem; margin: .4rem 0 .5rem; }
.atelier-feed .feed li { grid-template-columns: 3.2rem minmax(0, 1fr); gap: .75rem; }
.atelier-feed .feed-card img { width: 3.2rem; height: 4.45rem; }
.atelier-feed .feed-text { font-size: .9rem; }
@media (max-width: 860px) {
  .atelier { grid-template-areas: "stage" "rail" "feed"; grid-template-rows: none; row-gap: 2rem; }
}

/* ---------- Labubu (labubu.js) ---------- */
.labubu-home { display: flex; flex-direction: column; gap: .4rem; margin-top: .2rem; }
.labubu-toggle { display: flex; align-items: center; align-self: flex-end; gap: .45rem; margin: .2rem 0 -.1rem; color: var(--muted); font-size: .76rem; cursor: pointer; }
.labubu-toggle input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--pink); cursor: pointer; }
.labubu-stage { position: relative; height: 320px; background: radial-gradient(60% 45% at 50% 62%, color-mix(in srgb, var(--pink) 16%, transparent), transparent 75%); }
.labubu-canvas { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: pan-y; }
.labubu-loading { position: absolute; left: 50%; top: 50%; width: 2rem; height: 2rem; margin: -1rem; border: 3px solid color-mix(in srgb, var(--pink) 30%, transparent); border-top-color: var(--pink); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.labubu-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.labubu-foot p { display: flex; flex-direction: column; margin: 0; }
.labubu-foot strong { font: 900 1.4rem/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.labubu-foot span { color: var(--muted); font-size: .8rem; }

/* Garde-robe : le Labubu sur son podium à gauche, les catégories et les accessoires à droite, comme dans les Sims. */
.wardrobe { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--grain), radial-gradient(60% 60% at 30% 55%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 70%), var(--bg); color: var(--cream); }
.wardrobe[open] { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); animation: fade-in .25s ease both; }
.wardrobe::backdrop { background: var(--ink); }
.wardrobe-stage { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 1.2rem 1.4rem; }
.wardrobe-head { display: flex; justify-content: space-between; align-items: flex-start; }
.wardrobe-head h2 { margin: .1rem 0 0; font: 900 clamp(2.4rem, 5vw, 4rem)/.9 var(--display); text-transform: uppercase; }
.wardrobe-view { position: relative; flex: 1; min-height: 0; }
.wardrobe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; z-index: 1; }
.wardrobe-canvas:active { cursor: grabbing; }
.wardrobe-podium { position: absolute; left: 50%; bottom: 9%; width: min(46%, 300px); aspect-ratio: 3.2; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pink) 35%, #2a2030), #1b1522 70%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pink) 40%, transparent), 0 18px 40px -10px #000; }
.wardrobe-preview { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0 auto; max-width: 34rem; padding: .7rem 1rem; border: 1px solid color-mix(in srgb, var(--pink) 50%, transparent); background: color-mix(in srgb, var(--ink) 80%, transparent); font-size: .88rem; text-align: center; }
.wardrobe-hint { margin: .5rem 0 0; color: var(--muted); font-size: .8rem; text-align: center; }
.wardrobe-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 55%, transparent); }
.wardrobe-tabs { display: flex; flex-wrap: wrap; gap: .3rem; padding: 1.2rem 1.2rem .8rem; border-bottom: 1px solid var(--line); }
.wardrobe-tabs button { position: relative; padding: .55rem .8rem; border: 1.5px solid var(--line); background: transparent; color: var(--muted); font: 800 .74rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.wardrobe-tabs button[aria-selected="true"] { border-color: var(--pink); background: var(--pink); color: var(--ink); }
.wardrobe-tabs button i { position: absolute; top: -4px; right: -4px; width: .55rem; height: .55rem; rotate: 45deg; background: var(--paper); }
.wardrobe-items { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.2rem; }
.wardrobe-note { margin: 0 0 .8rem; color: var(--muted); font-size: .88rem; }
.wardrobe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; }
.ward-item { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; padding: .5rem; border: 1.5px solid var(--line); background: var(--panel); color: var(--cream); text-align: left; transition: border-color .15s ease, translate .15s ease; }
.ward-item:hover { border-color: color-mix(in srgb, var(--pink) 60%, var(--line)); translate: 0 -2px; }
.ward-item.is-on { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 14%, var(--panel)); }
.ward-item.is-locked .ward-thumb { filter: grayscale(.7) brightness(.7); }
.ward-thumb { display: grid; place-items: center; aspect-ratio: 1; background: radial-gradient(closest-side, #2b2233, #19141f) center / cover no-repeat; color: var(--muted); font-size: 1.6rem; }
.ward-thumb[style*="url"] { background-size: contain, cover; background-color: #1d1724; }
.ward-name { font-weight: 700; font-size: .82rem; line-height: 1.2; }
.ward-src { color: var(--muted); font-size: .7rem; line-height: 1.25; }
.ward-item.is-locked .ward-src { color: var(--pink); }
.wardrobe-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; }
.swatch { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1.5px solid var(--line); background: var(--panel); color: var(--cream); font-weight: 700; font-size: .82rem; }
.swatch span { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
.swatch.is-on { border-color: var(--pink); }
.wardrobe-foot { display: flex; justify-content: space-between; gap: .6rem; padding: 1rem 1.2rem max(1rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  .wardrobe[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 46dvh) minmax(0, 1fr); }
  .wardrobe-stage { padding: .9rem 1rem .4rem; }
  .wardrobe-head h2 { font-size: 2.2rem; }
  .wardrobe-hint { display: none; }
  .wardrobe-panel { border-left: 0; border-top: 1px solid var(--line); }
  .wardrobe-tabs { flex-wrap: nowrap; overflow-x: auto; padding: .7rem 1rem; scrollbar-width: none; }
  .wardrobe-tabs button { flex: none; }
  .wardrobe-items { padding: .8rem 1rem; }
  .wardrobe-grid, .wardrobe-swatches { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .labubu-stage { height: 280px; }
}

/* ---------- Cinématique des skins LoL Légendaires et mieux ----------
   Bandes de cinéma qui entrent puis se retirent, lent travelling sur le splash art officiel, éclat de lumière ;
   le splash animé du client (s'il existe) apparaît en fondu par-dessus. */
.moment .moment-anim { object-fit: cover; transition: opacity .9s ease; }
.moment.cine.on > img { animation: cine-pan 9s cubic-bezier(.25, .6, .3, 1) both; }
@keyframes cine-pan {
  0% { transform: scale(1.32) translate(-2%, 8%); filter: brightness(.35) saturate(1.2); }
  18% { filter: brightness(1) saturate(1.1); }
  100% { transform: scale(1.04) translate(0, 0); filter: none; }
}
.moment.cine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(#000, #000) top / 100% 11vh no-repeat,
    linear-gradient(#000, #000) bottom / 100% 11vh no-repeat;
}
.moment.cine.on::after { animation: cine-bars 3.8s cubic-bezier(.6, 0, .3, 1) both; }
@keyframes cine-bars {
  0%, 65% { background-size: 100% 11vh, 100% 11vh; }
  100% { background-size: 100% 0, 100% 0; }
}
/* L'éclat traverse tout l'écran (le point d'origine des particules, lui, n'a pas de taille). */
.moment.cine .moment-fx::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: -60vw;
  width: 220vw;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, color-mix(in srgb, var(--rc) 45%, rgba(255, 255, 255, .55)) 50%, transparent 58%);
  mix-blend-mode: screen;
  translate: -60% 0;
}
.moment.cine.on .moment-fx::before { animation: cine-sweep 1.6s cubic-bezier(.5, 0, .3, 1) 1s both; }
@keyframes cine-sweep { to { translate: 60% 0; } }
.moment.cine.on .moment-plate { animation: rise .9s var(--ease) 1.4s both; }
.moment.cine.on:not(.viewer) .moment-name { animation: cine-title 1.1s var(--ease) 1.6s both; }
@keyframes cine-title { from { opacity: 0; letter-spacing: .3em; filter: blur(6px); } }

/* ---------- Téléphone : la page ne défile jamais de côté ----------
   Les 6 onglets du bas tiennent dans la largeur de l'écran (ils rétrécissent, un libellé trop long se coupe),
   et les effets qui débordent exprès (halo et canevas 3D du sachet) ne créent plus de défilement horizontal. */
html, body { overflow-x: clip; }
@media (max-width: 860px) {
  .tabs { grid-auto-columns: minmax(0, 1fr); padding-inline: .2rem; }
  .tabs a { min-width: 0; padding-inline: .1rem; }
  .tabs a > span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Boutique et capsules du Labubu ---------- */
.labubu-actions { display: flex; gap: .4rem; }
.wardrobe-head { gap: 1rem; }
.wardrobe-wallet { display: inline-flex; align-items: center; gap: .4rem; margin: .4rem 0 0 auto; padding: .35rem .7rem; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 60%, transparent); font: 900 1.3rem/1 var(--display); font-variant-numeric: tabular-nums; }
.wardrobe-tabs .tab-capsule { border-color: color-mix(in srgb, var(--pink) 60%, var(--line)); color: var(--pink); }
.wardrobe-tabs .tab-capsule[aria-selected="true"] { color: var(--ink); }
.swatch b { display: flex; flex-direction: column; font-weight: 700; }
.swatch small { color: var(--pink); font-size: .68rem; font-weight: 700; }
.swatch.is-locked span { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), 0 0 0 2px var(--pink); }
.ward-item.is-shop .ward-src { color: var(--paper); font-weight: 700; }
.ward-item.is-capsule { border-color: color-mix(in srgb, var(--rc) 45%, var(--line)); }
.ward-item.is-capsule .ward-src { color: var(--rc); }
.ward-item.is-capsule.is-on { border-color: var(--rc); }
/* Aperçu : une ligne par chose qui n'est pas encore à toi, avec son bouton d'achat. */
.wardrobe-preview { display: flex; flex-direction: column; gap: .45rem; text-align: left; }
.wardrobe-preview-title { margin: 0; color: var(--pink); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wardrobe-preview-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.wardrobe-preview-row .btn { flex: none; min-height: 2.2rem; font-size: 1rem; }

/* La capsule mystère : une boîte rose qui tremble, s'ouvre dans un éclat à la couleur de la rareté. */
.capsule-zone { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: .6rem 0 1rem; text-align: center; }
.capsule-box { position: relative; width: 150px; height: 170px; margin-top: 1.4rem; --rc: var(--pink); }
.capsule-body { position: absolute; inset: 22% 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid var(--paper); background: linear-gradient(160deg, #ff7cb8, var(--pink) 45%, #a3135a); box-shadow: inset 0 -14px 0 rgba(0, 0, 0, .18), 0 18px 30px -12px #000; }
.capsule-body b { font: 900 4.4rem/1 var(--display); color: var(--paper); text-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.capsule-body small { font: 800 .7rem/1 var(--ui); letter-spacing: .3em; color: var(--paper); opacity: .8; }
.capsule-lid { position: absolute; left: -6%; right: -6%; top: 8%; height: 18%; z-index: 2; border: 3px solid var(--paper); background: linear-gradient(180deg, #ff9fcd, #e2307e); box-shadow: 0 6px 0 rgba(0, 0, 0, .2); transform-origin: 10% 100%; }
.capsule-rays { position: absolute; inset: -55%; z-index: -1; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 55%, transparent) 0deg 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 72%); mask: radial-gradient(closest-side, #000 25%, transparent 72%); opacity: 0; }
.capsule-box.is-shaking { animation: capsule-shake .18s linear infinite; }
@keyframes capsule-shake { 25% { transform: translateX(-4px) rotate(-3deg); } 75% { transform: translateX(4px) rotate(3deg); } }
.capsule-box.is-open .capsule-lid { animation: capsule-lid .6s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes capsule-lid { to { transform: translate(-30%, -90%) rotate(-38deg); opacity: .9; } }
.capsule-box.is-open .capsule-rays { opacity: 1; animation: rays 6s linear infinite; }
.capsule-box.is-open .capsule-body { box-shadow: inset 0 -14px 0 rgba(0, 0, 0, .18), 0 0 50px color-mix(in srgb, var(--rc) 70%, transparent); }
.capsule-box.is-open .capsule-body b { animation: capsule-q .4s ease forwards; }
@keyframes capsule-q { to { opacity: 0; transform: scale(.4); } }
.capsule-box .fx-shard { left: 50%; top: 45%; z-index: 3; }
.capsule-result { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .3rem .9rem; align-items: center; width: 100%; max-width: 26rem; padding: .8rem; border: 1.5px solid var(--rc); background: color-mix(in srgb, var(--rc) 12%, var(--panel)); text-align: left; animation: rise .5s var(--ease) both; }
.capsule-result .ward-thumb { grid-row: span 2; }
.capsule-got { display: flex; flex-direction: column; gap: .15rem; }
.capsule-got small { color: var(--rc); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.capsule-got strong { font: 900 1.4rem/1 var(--display); text-transform: uppercase; }
.capsule-got em { color: var(--muted); font-size: .8rem; font-style: normal; }
.capsule-result .btn { justify-self: start; }
.capsule-pool { display: flex; flex-direction: column; gap: .35rem; width: 100%; margin: .2rem 0 0; padding: 0; list-style: none; text-align: left; }
.capsule-pool li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .8rem; padding: .5rem .7rem; border-left: 3px solid var(--rc); background: var(--panel); }
.capsule-rate { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
.capsule-rate b { color: var(--rc); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.capsule-items { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .85rem; }
.capsule-items .is-owned { color: var(--paper); font-weight: 700; }
.capsule-items span:not(.is-owned) { color: var(--muted); }

/* Accueil : le Labubu en tête de colonne, en grand ; le pack du jour disparaît une fois ouvert. */
#daily:empty { display: none; }
.labubu-home { margin-top: 0; }
.labubu-stage { height: 460px; }
@media (max-width: 860px) {
  .labubu-stage { height: 380px; }
}
/* Décale ensemble le compagnon, sa carte, son cadre et son interrupteur vers l'espace libre à droite. */
@media (min-width: 640px) {
  .labubu-home, .labubu-toggle { position: relative; left: clamp(3rem, 12vw, 7rem); }
}
/* Nom du Labubu, modifiable dans la garde-robe. */
.labubu-name { width: 100%; max-width: 14ch; margin: .1rem 0 0; padding: 0 0 .1rem; border: 0; border-bottom: 2px dashed color-mix(in srgb, var(--pink) 55%, transparent); background: transparent; color: var(--cream); font: 900 clamp(2.4rem, 5vw, 4rem)/.9 var(--display); text-transform: uppercase; outline: none; }
.labubu-name:focus { border-bottom-color: var(--pink); }
/* Inventaire : tout ce qu'il possède, par provenance. */
.inv-group { margin-bottom: 1.2rem; }
.inv-group h3 { display: flex; justify-content: space-between; margin: 0 0 .5rem; color: var(--pink); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.inv-group h3 span { color: var(--muted); letter-spacing: 0; }
.inv-empty { margin: 0; padding: .7rem .9rem; border: 1px dashed var(--line); color: var(--muted); font-size: .85rem; }
.ward-item.is-card .ward-src { color: var(--gold); }
@media (max-width: 860px) {
  .labubu-name { font-size: 2.2rem; }
}
.labubu-foot { flex-wrap: wrap; }
.labubu-foot p { flex: 1 1 8rem; min-width: 0; }
.labubu-foot strong { overflow-wrap: anywhere; }

/* Le Labubu dans son propre cadre : il ne se mélange plus à la scène du booster. */
.labubu-home { padding: .4rem 1rem 1rem; border: 1px solid color-mix(in srgb, var(--pink) 30%, transparent); background: color-mix(in srgb, var(--pink) 7%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.labubu-stage { margin-inline: -1rem; }
.labubu-foot { padding-top: .6rem; border-top: 1px solid color-mix(in srgb, var(--pink) 22%, transparent); }

/* Boîte mystère 3D : la boîte dessinée ne sert plus que de secours. */
.capsule-stage { position: relative; display: grid; place-items: center; width: 260px; height: 330px; --rc: var(--pink); }
.capsule-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.capsule-stage.has-3d .capsule-box { visibility: hidden; }
.capsule-stage .capsule-rays { z-index: 0; }
.capsule-stage.is-open .capsule-rays { opacity: 1; animation: rays 6s linear infinite; }
.capsule-stage .fx-shard { left: 50%; top: 40%; z-index: 3; }

/* ---------- Moins de rose ----------
   Le rose reste l'accent (boutons, onglet ouvert, titres) ; les grandes surfaces passent en tons neutres. */
:root { --glow-top: radial-gradient(1100px 620px at 12% -8%, rgba(150, 132, 200, .12), transparent 62%); --veil: color-mix(in srgb, var(--cream) 4%, transparent); --veil-line: color-mix(in srgb, var(--cream) 13%, transparent); }
.rail-block.streak, .rail-block.daily, .labubu-home { background: var(--veil); border-color: var(--veil-line); }
.rail-block.daily .eyebrow { color: var(--muted); }
.labubu-foot { border-top-color: var(--veil-line); }
.labubu-stage { background: radial-gradient(60% 45% at 50% 62%, color-mix(in srgb, var(--cream) 7%, transparent), transparent 75%); }
.wardrobe { background: var(--grain), radial-gradient(60% 60% at 30% 55%, color-mix(in srgb, var(--cream) 6%, transparent), transparent 70%), var(--bg); }
.wardrobe-podium { background: radial-gradient(closest-side, #3a3442, #1b1722 70%); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--cream) 18%, transparent), 0 18px 40px -10px #000; }
.wardrobe-preview { border-color: var(--veil-line); }
.wardrobe-tabs .tab-capsule { border-color: var(--line); color: var(--cream); }
.labubu-name { border-bottom-color: var(--veil-line); }

/* Le Labubu d'un joueur sur son profil. */
.profile-labubu { align-items: center; padding: 1rem; border: 1px solid var(--veil-line); background: var(--veil); }
.profile-labubu-stage { position: relative; width: min(100%, 360px); height: 380px; }

/* ---------- Cadres du Labubu (labubu.js, FRAMES) ----------
   ::before dessine le décor derrière lui, ::after le socle sous ses pieds. Même cadre sur l'accueil,
   dans la garde-robe, sur le profil et en vignette. */
.lf { position: relative; isolation: isolate; }
.lf::before, .lf::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.lf::before { inset: 0; }
.lf::after { left: 50%; bottom: 3%; width: 62%; height: 11%; translate: -50% 0; border-radius: 50%; }
.labubu-stage.lf { background: none; }

/* TIG collection UX refresh: ink, paper and soft brass; card art keeps each game's own identity. */
:root {
  --gold: #c9a86d;
  --gold-deep: #927044;
  --pink: #78b7bd;
  --pink-deep: #477f86;
  --panel: #151820;
  --panel-2: #1d222c;
  --line: #303743;
  --muted: #aaaeb8;
  --glow-top: radial-gradient(900px 460px at 20% -10%, rgba(124, 183, 189, .11), transparent 64%);
  --veil: rgba(245, 239, 224, .035);
  --veil-line: rgba(245, 239, 224, .12);
}
html, body { background-color: #0b0e13; }
.skip-link { position: fixed; top: .7rem; left: .7rem; z-index: 100; translate: 0 -160%; padding: .7rem 1rem; border-radius: .45rem; background: var(--cream); color: var(--ink); font-weight: 700; }
.skip-link:focus { translate: 0; }
#main-content:focus { outline: none; }
.topbar { gap: clamp(.7rem, 2vw, 2rem); border-bottom: 1px solid var(--line); background: rgba(11, 14, 19, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.topbar::before { background: transparent; }
.wordmark-name { font-family: var(--serif); font-weight: 700; letter-spacing: -.03em; text-transform: none; }
.tabs { align-items: center; gap: .18rem; }
.tabs a { min-height: 2.8rem; padding: .7rem .8rem; border-radius: .5rem; font: 650 .78rem/1 var(--ui); letter-spacing: .025em; text-transform: none; }
.tabs a[aria-current="page"] { background: rgba(245, 239, 224, .075); color: var(--cream); }
.tab-ink { bottom: -.05rem; height: 2px; border-radius: 3px; background: var(--gold); }
.tab-more { position: relative; align-self: stretch; display: flex; align-items: center; }
.tab-more > summary { display: flex; min-height: 2.8rem; align-items: center; gap: .45rem; padding: .55rem .8rem; border-radius: .5rem; color: var(--muted); cursor: pointer; list-style: none; font-size: .78rem; font-weight: 650; }
.tab-more > summary::-webkit-details-marker { display: none; }
.tab-more > summary > span:first-child { letter-spacing: .12em; color: var(--gold); }
.tab-more[open] > summary, .tab-more.is-active > summary { background: rgba(245, 239, 224, .075); color: var(--cream); }
.tab-more-menu { position: absolute; top: calc(100% - .25rem); right: 0; z-index: 30; min-width: 11rem; padding: .35rem; border: 1px solid var(--line); border-radius: .7rem; background: #151820; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.tab-more-menu a { display: block; padding: .7rem .75rem; border-radius: .45rem; color: var(--muted); text-decoration: none; font-size: .88rem; }
.tab-more-menu a:hover, .tab-more-menu a[aria-current="page"] { background: var(--panel-2); color: var(--cream); }
.pill { border-radius: .55rem; }
.btn.btn-primary { border-radius: .55rem; clip-path: none; background: linear-gradient(135deg, #dfc48e, #b38d50); color: #17140e; box-shadow: 0 8px 26px rgba(201, 168, 109, .18); }
.account .btn, .btn.btn-discord { border-radius: .5rem; clip-path: none; }
.page-title, .stage-title { font-family: var(--serif); letter-spacing: -.045em; text-transform: none; }
.page-head { border-bottom-color: var(--line); }
.panel, .rail-block, .filters, .rarity-bar button, .defi, .earn-item, .market-door, .ladder-row, .notice, .toast { border-radius: .7rem; }
.filters { padding: .85rem; border: 1px solid var(--line); background: rgba(21, 24, 32, .78); }
.search, .select select { border-color: var(--line); border-radius: .5rem; background-color: #10141b; }
.select select { min-height: 2.75rem; }
.filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .1rem .2rem 0; }
.filter-results { margin: 0; color: var(--muted); font-size: .82rem; }
.filter-reset { color: var(--gold); text-decoration: underline; text-underline-offset: .2em; }
.rarity-bar button { border-radius: .55rem; }
.milestone, .track { border-radius: 99px; }
.track i { background: linear-gradient(90deg, var(--pink), var(--gold)); }
.badge { background: var(--gold); color: #17140e; }
.badge:not([hidden])::after { border-color: var(--gold); }
::selection { background: var(--gold); color: #17140e; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Révélation Kaïra : décor plein cadre permanent, carte au centre, lumière et travelling même sans vidéo. */
.moment.g-kai.cine.contain-moment::after { display: block; inset: -9%; background: var(--art) center 34% / cover no-repeat; filter: blur(26px) brightness(.56) saturate(1.42); transform: scale(1.12); animation: kai-stage-breathe 12s ease-in-out infinite alternate; }
.moment.g-kai.cine.contain-moment .moment-backdrop { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 42%, rgba(18, 25, 34, .08), rgba(5, 7, 11, .4) 88%), linear-gradient(90deg, rgba(5, 7, 11, .38), transparent 25% 75%, rgba(5, 7, 11, .38)); }
.moment.g-kai.cine.contain-moment > img { inset: auto; top: 50%; left: 50%; translate: -50% -50%; width: auto; height: min(98dvh, 1120px); max-width: min(72vw, 760px); max-height: none; object-fit: contain; object-position: center; border: 1px solid color-mix(in srgb, var(--rc) 72%, white); border-radius: .4rem; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 5rem color-mix(in srgb, var(--rc) 32%, transparent), 0 2rem 6rem rgba(0,0,0,.55); }
.moment.g-kai.cine .moment-plate { z-index: 5; padding: 0 5vw max(5vh, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(5,7,11,.96), rgba(5,7,11,.75) 44%, transparent); }
.moment.g-kai.cine .moment-rarity { color: var(--rc); font-size: .82rem; font-weight: 800; text-shadow: 0 1px 14px #000; }
.moment.g-kai.cine .moment-name { max-width: 12ch; margin-top: .45rem !important; font-size: clamp(3.4rem, 10vw, 8.5rem) !important; line-height: .82 !important; text-shadow: 0 4px 28px rgba(0,0,0,.72); }
.moment.g-kai.cine .moment-champ { margin-top: .7rem !important; color: rgba(248, 245, 237, .8); }
.moment.g-kai.cine .moment-hint { color: var(--cream); font-size: .75rem; }
.moment.g-kai.r4.cine::before { background: linear-gradient(115deg, transparent 20%, rgba(240,193,90,.22), transparent 68%); }
.moment.g-kai.r5.cine::before { background: radial-gradient(circle at 50% 42%, rgba(201,166,255,.25), transparent 58%), linear-gradient(115deg, transparent 20%, rgba(255,107,134,.24), transparent 68%); }
.moment.g-kai.cine .moment-fx::after { z-index: 4; background: radial-gradient(ellipse at center, transparent 38%, rgba(3,5,9,.44) 100%); }
@keyframes kai-stage-breathe { to { transform: scale(1.2) translateY(-1%); filter: blur(32px) brightness(.72) saturate(1.65); } }
.moment.g-kai.r4.cine.on > img { animation: kai-fallback-legend 8s cubic-bezier(.18,.68,.28,1) both; }
.moment.g-kai.r5.cine.on > img { animation: kai-fallback-mythic 8.6s cubic-bezier(.16,.72,.24,1) both; }
@keyframes kai-fallback-legend { 0% { scale: 1.12; filter: brightness(.32) saturate(.7) blur(8px); opacity: .15; } 22% { filter: brightness(.95) saturate(1.1) blur(0); opacity: 1; } 100% { scale: 1; filter: brightness(1.05) saturate(1.12); opacity: 1; } }
@keyframes kai-fallback-mythic { 0% { scale: 1.2; filter: brightness(.18) saturate(.55) blur(16px); opacity: .08; } 20% { filter: brightness(1.12) saturate(1.35) blur(0); opacity: 1; } 100% { scale: 1; filter: brightness(1.08) saturate(1.2); opacity: 1; } }
@media (max-width: 860px) {
  .topbar { gap: .35rem; }
  .tabs { gap: .1rem; }
  .tabs > a { flex: 1 1 0; padding-inline: .45rem; }
  .tab-more > summary { padding-inline: .55rem; }
  .tab-more > summary > span:last-child { display: none; }
  .tab-more-menu { top: auto; right: 0; bottom: calc(100% + .45rem); }
}
@media (max-width: 560px) {
  .topbar { gap: .3rem; }
  .tabs { min-width: 0; }
  .tabs > a { min-height: 3rem; font-size: .66rem; }
  .tabs > a:nth-of-type(4) span { font-size: .61rem; }
  .filter-actions { padding-inline: .25rem; }
  .moment.g-kai.cine.contain-moment::after { filter: blur(20px) brightness(.48) saturate(1.4); }
  .moment.g-kai.cine.contain-moment > img { height: min(78dvh, 820px); max-width: 88vw; border-radius: .3rem; }
  .moment.g-kai.cine .moment-plate { padding-inline: 1.25rem; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  .moment.g-kai.cine .moment-name { max-width: 10ch; font-size: clamp(3rem, 15vw, 5.3rem) !important; }
  .moment.g-kai.cine .moment-champ { max-width: 25ch; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .moment.g-kai.cine.contain-moment::after { animation: none; }
  .moment.g-kai.cine.on > img { animation: none; scale: 1; filter: none; opacity: 1; }
}

/* One consistent interface across boosters, collection, challenges, shop, market and profiles. */
body { background: var(--ink); }
main { width: min(1380px, calc(100% - 3rem)); padding-top: clamp(1.3rem, 3vw, 2.6rem); }
.view { animation: view-arrive .28s ease both; }
@keyframes view-arrive { from { opacity: 0; translate: 0 7px; } }
.topbar { min-height: 4.35rem; padding-inline: max(1.5rem, env(safe-area-inset-left)); }
.wordmark { gap: .75rem; }
.wordmark-logo { border-radius: .7rem; box-shadow: 0 0 0 1px var(--veil-line); }
.tabs a svg { display: block; width: 1.05rem; height: 1.05rem; color: var(--muted); }
.tabs a[aria-current="page"] svg { color: var(--gold); }
.wallet { gap: .3rem; }
.pill { padding: .45rem .65rem; border: 1px solid transparent; }
.pill:hover { border-color: var(--line); background: var(--panel); }
.avatar { border-radius: 50%; box-shadow: 0 0 0 2px var(--veil-line); }
main > .notice { margin-bottom: 1.2rem; padding: .8rem 1rem; border: 1px solid var(--veil-line); border-left: 3px solid var(--gold); border-radius: .75rem; background: var(--panel); }

/* Booster landing: selector, pack and cost read as one focused action; progression sits beside it. */
.atelier { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: clamp(1.2rem, 3vw, 2.5rem); row-gap: 1.8rem; }
.stage { padding: clamp(1.2rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: 1.1rem; background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 48%), #11151c; box-shadow: 0 22px 60px rgba(0,0,0,.18); }
.stage > .game-switch-wrap { margin: 0 0 .25rem; border: 1px solid var(--line); border-radius: .75rem; background: #0d1117; }
.game-switch { gap: .2rem; padding: .3rem; }
.game-switch button { min-height: 2.65rem; padding-inline: .75rem; border-radius: .55rem; font-size: .74rem; letter-spacing: .015em; text-transform: none; }
.game-switch button[aria-pressed="true"] { color: var(--cream); background: rgba(201,168,109,.13); }
.game-switch button[aria-pressed="true"]::before { inset: 0; border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent); border-radius: .55rem; background: transparent; }
.gs-more { border-radius: 0 .65rem .65rem 0; }
.stage > .stage-title { margin-top: .25rem; font-size: clamp(3.5rem, 7.5cqi, 5.8rem); line-height: .91; }
.stage-title em { color: var(--gold); }
.stage-title::after, .page-title::after { display: none; }
.stage > .lede { max-width: 34ch; color: #c2c5ce; font-size: 1rem; line-height: 1.55; }
.stage > .booster-pack { width: min(300px, 80%); margin-left: 0; filter: drop-shadow(0 22px 28px rgba(0,0,0,.48)); }
.stage > .qty { gap: .4rem; }
.qty button { min-width: 2.9rem; min-height: 2.7rem; padding: .5rem; border: 1px solid var(--line); border-radius: .55rem; background: #0d1117; }
.qty button[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, #0d1117); color: var(--cream); }
.stage > .btn.btn-primary { min-width: 16rem; min-height: 3.5rem; border-radius: .65rem; font: 750 1.12rem/1.15 var(--ui); }
.stage > .stock-note { color: var(--muted); font-size: .8rem; }
.perks { gap: .45rem; }
.perk { min-height: 2.55rem; padding: .4rem .65rem; border: 1px solid var(--line); border-radius: .55rem; background: rgba(255,255,255,.035); font-size: .72rem; letter-spacing: .01em; text-transform: none; }
.perk:hover { border-color: var(--gold); background: rgba(201,168,109,.08); }
.rail { gap: .8rem; }
#counters { padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }
.rail-block { padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }
.rail-block.streak, .rail-block.daily { border-color: var(--line); background: var(--panel); }
.rail-title { font: 700 1.25rem/1.1 var(--serif); letter-spacing: -.025em; text-transform: none; }
.rail-title span { color: var(--gold); }
.rail-block.streak .eyebrow, .rail-block.daily .eyebrow { color: var(--gold); }
.daily img, .feed-card img { border-radius: .45rem; }
.gift { border-radius: .4rem; }
.gift.is-today { border-color: var(--gold); background: var(--gold); color: #17140e; }
.gift.is-today .gift-ribbon, .gift.is-today .gift-bow { fill: #17140e; }
.labubu-home { border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }
.labubu-home .labubu-stage { border-radius: .7rem; overflow: hidden; }
.atelier-feed .rail-block { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.atelier-feed .rail-title { margin-bottom: .25rem; }

/* Shared page hierarchy and controls. */
.page-head { align-items: center; margin-bottom: 1.25rem; padding-bottom: 1.15rem; }
.page-title { font: 700 clamp(2.5rem, 5vw, 4rem)/.98 var(--serif); letter-spacing: -.055em; text-transform: none; }
.page-sub { max-width: 68ch; font-size: .95rem; line-height: 1.5; }
.section-title { font: 700 clamp(1.45rem, 2.4vw, 1.9rem)/1.1 var(--serif); letter-spacing: -.035em; text-transform: none; }
.page-lead { max-width: 72ch; margin-bottom: 1.25rem; line-height: 1.65; }
.btn, .ghost { min-height: 2.7rem; padding-inline: 1rem; border: 1px solid var(--line); border-radius: .55rem; font: 650 .84rem/1.1 var(--ui); letter-spacing: 0; text-transform: none; }
.btn:hover:not(:disabled), .ghost:hover:not(:disabled) { border-color: var(--gold); }
.btn.btn-primary { gap: .4rem; border: 0; border-radius: .6rem; background: linear-gradient(135deg, #dfc48e, #b38d50); color: #17140e; font: 750 1rem/1.1 var(--ui); letter-spacing: 0; clip-path: none; }
.btn.btn-primary:hover:not(:disabled) { background: #ead4a7; }
.btn.btn-primary.btn-small, .btn.btn-small { min-height: 2.45rem; padding-inline: .85rem; font-size: .82rem; }
.btn.btn-big { min-width: 14rem; min-height: 3.4rem; font-size: 1.05rem; }
.btn.btn-buy { border-radius: .45rem; background: var(--cream); color: var(--ink); font-size: .82rem; letter-spacing: 0; text-transform: none; }
.btn.btn-discord { border-radius: .5rem; clip-path: none; }
.text-btn, .link-btn { text-underline-offset: .2em; }
.icon-btn { border-radius: .5rem; }
.track { height: 7px; border-radius: 99px; }
.track i { border-radius: inherit; }
.track-lg { max-width: 560px; }
.milestone { border-radius: .55rem; }
.empty { padding: 1.25rem; border: 1px dashed var(--line); border-radius: .75rem; background: rgba(255,255,255,.02); color: var(--muted); }

/* Collection: progress first, filters grouped, card art remains the star. */
.rarity-bar { gap: .45rem; margin: .15rem 0 .9rem; }
.rarity-bar button { min-height: 2.45rem; padding-inline: .75rem; border: 1px solid var(--line); border-radius: .55rem; background: rgba(255,255,255,.025); }
.rarity-bar button[aria-pressed="true"] { background: color-mix(in srgb, var(--rc) 12%, var(--panel)); }
.rarity-bar strong { color: var(--cream); }
.filters { gap: .65rem; margin-bottom: 1rem; padding: .8rem; border-radius: .8rem; }
.filters .search { min-height: 2.9rem; border-radius: .55rem; background: #0e1218; }
.filters .search:focus-within { border-color: var(--gold); }
.select select, .mk-price input { border-radius: .55rem; }
.filter-results { font-size: .78rem; }
.filter-reset { min-height: 2rem; padding: .2rem .35rem; border: 0; color: var(--muted); }
.filter-reset:hover { color: var(--gold); }
.grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: clamp(.65rem, 1.4vw, 1rem); }
.card-btn { border-radius: .75rem; }
.card-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* Challenges, shop and market share quiet surfaces and clear action states. */
.defis { gap: .65rem; }
.defi { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: .75rem; background: var(--panel); }
.defi:hover, .defi[open] { border-color: color-mix(in srgb, var(--gold) 42%, var(--line)); }
.defi.complete { border-color: color-mix(in srgb, var(--r1) 55%, var(--line)); }
.defi summary { padding: .8rem; }
.defi-name strong { font: 650 1rem/1.2 var(--ui); letter-spacing: 0; text-transform: none; }
.defi-name span, .defi-state { letter-spacing: .035em; }
.defi-art img { border-radius: .3rem; }
.shop-wallet { padding: .65rem .9rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel); }
.shop-wallet span { letter-spacing: .06em; }
.shop-wallet strong { font: 700 2rem/1 var(--serif); color: var(--essence); }
.shop-section { gap: 1rem; margin-bottom: 2.4rem; }
.section-head { align-items: center; }
.shop-packs { gap: .8rem; }
.shop-pack { border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: .8rem; background: linear-gradient(150deg, rgba(255,255,255,.035), transparent 70%), var(--panel); }
.shop-pack.is-gold { border-color: color-mix(in srgb, var(--r4) 40%, var(--line)); }
.shop-pack.is-prestige { border-color: color-mix(in srgb, var(--r3) 40%, var(--line)); }
.shop-pack-text h3, .earn-item h3 { font: 700 1.3rem/1.1 var(--serif); letter-spacing: -.02em; text-transform: none; }
.market-door { border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line)); border-radius: .8rem; background: linear-gradient(100deg, rgba(201,168,109,.12), var(--panel) 70%); color: var(--cream); clip-path: none; }
.market-door strong { font: 700 1.25rem/1.15 var(--serif); letter-spacing: -.025em; text-transform: none; }
.market-door small { color: var(--muted); }
.market-door-go { color: var(--gold); }
.shop-cards { gap: 1rem; }
.earn-item, .mk-trade, .mk-mine li, .mk-pick-item, .profile-defis, .ladder-login { border: 1px solid var(--line); border-radius: .75rem; background: var(--panel); }
.earn-item { border-top: 1px solid var(--line); }
.mk-check { border-radius: .55rem; }
.mk-chip img, .mk-tag { border-radius: .3rem; }
.mk-sub { color: var(--gold); letter-spacing: .08em; }
.mk-pick-item { background: #10141b; }

/* Leaderboard and player profiles. */
.ladder-sort { gap: .2rem; padding: .25rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--panel); }
.ladder-sort button { padding: .55rem .85rem; border-radius: .45rem; font: 600 .8rem/1.1 var(--ui); letter-spacing: 0; text-transform: none; }
.ladder-sort button[aria-pressed="true"] { background: var(--gold); color: #17140e; }
.podium-base { border: 1px solid var(--line); border-radius: .75rem; background: linear-gradient(180deg, #252a33, #151820); font: 700 2.2rem/1 var(--serif); }
.p1 .podium-base { border-color: var(--gold); background: linear-gradient(160deg, #e4cc9a, #9d7940); color: #17140e; }
.p1 .avatar-lg { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold); }
.ladder-list { gap: .5rem; }
.ladder-row { min-height: 4rem; border: 1px solid var(--line); border-left: 3px solid transparent; border-radius: .65rem; background: var(--panel); }
.ladder-row.is-me { border-color: color-mix(in srgb, var(--gold) 48%, var(--line)); background: color-mix(in srgb, var(--gold) 7%, var(--panel)); }
.ladder-rank { font: 700 1.25rem/1 var(--serif); }
.profile-head { grid-template-columns: auto minmax(0, 1fr) auto; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); }
.profile-id .page-title { font: 700 clamp(2rem, 4vw, 3.2rem)/1 var(--serif); text-transform: none; }
.profile-title { color: var(--gold); letter-spacing: .08em; }
.profile-cols { gap: 1.2rem; }
.profile-block { padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(255,255,255,.018); }
.profile-empty { border-radius: .6rem; }
.profile-defis summary { padding: .8rem 1rem; }

/* Dialogs, loading and footer. */
.sheet, .detail, dialog.sheet { border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: .9rem; box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.sheet h2, .detail-body h2 { font: 700 clamp(1.8rem, 4vw, 2.7rem)/1.02 var(--serif); letter-spacing: -.04em; text-transform: none; }
.detail-card { border-radius: .7rem; }
.detail-nav { border-radius: .5rem; }
.toast { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: .7rem; }
.toast-gold { border-color: color-mix(in srgb, var(--gold) 48%, var(--line)); }
.toast-gold strong { color: var(--gold); }
.footer { width: min(1380px, calc(100% - 3rem)); margin-top: 2.6rem; padding: 1.2rem 0 max(2rem, env(safe-area-inset-bottom)); font-size: .78rem; line-height: 1.6; }
.footer p { max-width: 100ch; }

@media (max-width: 1000px) {
  main { width: min(100% - 2rem, 860px); }
  .atelier { grid-template-columns: minmax(0, 1fr) 270px; gap: 1rem; }
  .stage { padding: 1.3rem; }
  .shop-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 860px) {
  main { width: min(100% - 1.5rem, 680px); padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
  .topbar { gap: .5rem; }
  .tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tabs > a { flex-direction: column; gap: .15rem; min-height: 3.3rem; padding: .25rem .15rem; font-size: .68rem; }
  .tabs > a svg { width: 1.1rem; height: 1.1rem; }
  .tab-more { justify-content: center; }
  .tab-more > summary { min-width: 2.6rem; min-height: 3.3rem; flex-direction: column; justify-content: center; gap: .1rem; }
  .tab-more > summary > span:last-child { display: block; font-size: .68rem; }
  .tab-more-menu { min-width: 12rem; }
  .atelier { grid-template-columns: minmax(0,1fr); }
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  .rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: .3rem; }
  #counters { grid-column: 1 / -1; }
  .labubu-home { grid-column: 1 / -1; }
  .atelier-feed { grid-row: auto; }
}
@media (max-width: 600px) {
  main { width: calc(100% - 1.1rem); padding-top: 1rem; }
  .topbar { padding-inline: .65rem; }
  .wordmark-logo { width: 2.35rem; height: 2.35rem; }
  .wallet { gap: 0; }
  .pill { padding-inline: .35rem; }
  .account .btn { min-height: 2.3rem; padding-inline: .55rem; font-size: .7rem; }
  .stage { display: flex; align-items: stretch; gap: .8rem; padding: .9rem; border-radius: .85rem; text-align: left; }
  .stage > .game-switch-wrap { order: 0; margin-bottom: .1rem; }
  .stage > .stage-title { order: 1; margin-top: .35rem; font-size: clamp(3rem, 15vw, 4.5rem); }
  .stage > .lede { order: 2; max-width: 38ch; font-size: .9rem; }
  .stage > .perks { order: 3; }
  .stage > .booster-pack { order: 4; width: min(205px, 58vw); margin: .25rem auto .15rem; }
  .stage > .qty { order: 5; justify-content: center; }
  .stage > .btn.btn-primary, .stage > .empty-actions { order: 6; align-self: center; width: min(100%, 23rem); }
  .stage > .stock-note { order: 7; align-self: center; text-align: center; }
  .stage > .perk-choose { order: -1; }
  .game-switch { overflow-x: auto; scrollbar-width: none; }
  .game-switch::-webkit-scrollbar { display: none; }
  .game-switch button { flex: none; }
  .rail { grid-template-columns: minmax(0,1fr); gap: .65rem; }
  #counters, .labubu-home { grid-column: auto; }
  .page-head { align-items: flex-start; }
  .page-title { font-size: clamp(2.25rem, 12vw, 3.4rem); }
  .page-head > .btn, #recycle-all { width: 100%; }
  .rarity-bar { margin-inline: -.55rem; padding-inline: .55rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .rarity-bar::-webkit-scrollbar { display: none; }
  .rarity-bar button { flex: none; }
  .filters { padding: .6rem; }
  .filter-row { gap: .4rem; }
  .filter-row .select select { min-height: 2.55rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .shop-packs { grid-template-columns: minmax(0,1fr); }
  .shop-pack { grid-template-columns: 74px minmax(0,1fr); gap: .75rem; padding: .75rem; }
  .profile-head { grid-template-columns: auto minmax(0,1fr); gap: .8rem; padding: .85rem; }
  .profile-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .profile-cols { grid-template-columns: minmax(0,1fr); gap: .6rem; }
  .profile-slots { gap: .5rem; }
  .mk-trades { grid-template-columns: minmax(0,1fr); }
  .mk-trade-sides { gap: .45rem; }
  .mk-mine li { grid-template-columns: minmax(0,1fr) auto; }
  .mk-mine li > button { grid-column: 1 / -1; justify-self: start; }
  .ladder-row { grid-template-columns: 1.5rem 2.25rem minmax(0,1fr) auto; gap: .45rem; padding-inline: .5rem; }
  .ladder-showcase { display: none; }
  .footer { width: calc(100% - 1.1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
}

/* Le décalage latéral historique du Labubu n'a plus lieu d'être dans la nouvelle grille. */
@media (min-width: 640px) {
  .rail > .labubu-home, .rail > .labubu-toggle { left: auto; right: auto; }
}

.wardrobe-view.lf .wardrobe-podium { display: none; }
.wardrobe-view.lf::after { bottom: 7%; width: min(46%, 300px); }

/* Un décor peint par jeu, recadré en portrait derrière le compagnon. */
.lf-lolscene::before { background: linear-gradient(180deg, rgba(10, 18, 28, .08), rgba(10, 18, 28, .4)), url("assets/frames/companions/lolscene.webp") center / cover; }
.lf-valscene::before { background: linear-gradient(180deg, rgba(15, 10, 28, .08), rgba(15, 10, 28, .38)), url("assets/frames/companions/valscene.webp") center / cover; }
.lf-mcscene::before { background: linear-gradient(180deg, rgba(12, 24, 8, .08), rgba(12, 24, 8, .42)), url("assets/frames/companions/mcscene.webp") center / cover; }
.lf-wowscene::before { background: linear-gradient(180deg, rgba(12, 20, 30, .08), rgba(12, 20, 30, .4)), url("assets/frames/companions/wowscene.webp") center / cover; }
.lf-elscene::before { background: linear-gradient(180deg, rgba(15, 12, 32, .08), rgba(15, 12, 32, .4)), url("assets/frames/companions/elscene.webp") center / cover; }
.lf-narscene::before { background: linear-gradient(180deg, rgba(20, 15, 10, .08), rgba(20, 15, 10, .4)), url("assets/frames/companions/narscene.webp") center / cover; }
.lf-ggscene::before { background: linear-gradient(180deg, rgba(5, 8, 24, .08), rgba(5, 8, 24, .4)), url("assets/frames/companions/ggscene.webp") center / cover; }

/* Verre (offert) : équerres dans les coins, halo de projecteur, socle de verre. */
.lf-verre::before {
  --c: color-mix(in srgb, var(--cream) 45%, transparent);
  background:
    linear-gradient(var(--c), var(--c)) left 4% top 4% / 9% 2px no-repeat, linear-gradient(var(--c), var(--c)) left 4% top 4% / 2px 7% no-repeat,
    linear-gradient(var(--c), var(--c)) right 4% top 4% / 9% 2px no-repeat, linear-gradient(var(--c), var(--c)) right 4% top 4% / 2px 7% no-repeat,
    linear-gradient(var(--c), var(--c)) left 4% bottom 4% / 9% 2px no-repeat, linear-gradient(var(--c), var(--c)) left 4% bottom 4% / 2px 7% no-repeat,
    linear-gradient(var(--c), var(--c)) right 4% bottom 4% / 9% 2px no-repeat, linear-gradient(var(--c), var(--c)) right 4% bottom 4% / 2px 7% no-repeat,
    conic-gradient(from 160deg at 50% -6%, transparent 0 8deg, rgba(255, 255, 255, .08) 14deg 26deg, transparent 32deg),
    radial-gradient(60% 45% at 50% 62%, color-mix(in srgb, var(--cream) 8%, transparent), transparent 75%);
}
.lf-verre::after { background: radial-gradient(closest-side, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 70%, transparent); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }

/* Nuages : ciel pastel, nuages qui dérivent, socle en nuage. */
.lf-nuages::before {
  background:
    radial-gradient(9% 6% at 18% 22%, #fff 62%, transparent 66%), radial-gradient(7% 5% at 25% 19%, #fff 62%, transparent 66%),
    radial-gradient(10% 6% at 68% 34%, #fff 62%, transparent 66%), radial-gradient(7% 5% at 75% 30%, #fff 62%, transparent 66%),
    radial-gradient(8% 5% at 42% 12%, rgba(255, 255, 255, .85) 62%, transparent 66%),
    linear-gradient(180deg, #8ec9f2, #c8b8ef 60%, #f2c6dc);
  background-size: 200% 100%, 200% 100%, 200% 100%, 200% 100%, 200% 100%, 100% 100%;
  animation: lf-drift 40s linear infinite;
}
@keyframes lf-drift { to { background-position: -200% 0, -200% 0, -200% 0, -200% 0, -200% 0, 0 0; } }
.lf-nuages::after { background: radial-gradient(closest-side, #fff 55%, rgba(255, 255, 255, .7) 70%, transparent 74%); filter: drop-shadow(0 4px 8px rgba(80, 90, 160, .35)); }

/* Néon : liseré qui grésille, socle en anneau lumineux. */
.lf-neon::before {
  inset: 6px;
  border: 2px solid #ff4fd8;
  border-radius: 14px;
  background: radial-gradient(70% 50% at 50% 62%, rgba(80, 220, 255, .14), transparent 70%), #120a1e;
  box-shadow: 0 0 12px #ff4fd8, inset 0 0 16px rgba(255, 79, 216, .45), 0 0 34px rgba(80, 220, 255, .25);
  animation: lf-flicker 5s infinite;
}
@keyframes lf-flicker { 0%, 90%, 100% { opacity: 1; } 91% { opacity: .5; } 93% { opacity: 1; } 95% { opacity: .7; } }
.lf-neon::after { border: 2px solid #50dcff; box-shadow: 0 0 12px #50dcff, inset 0 0 10px #50dcff; }

/* Ciel étoilé : nuit bleue, étoiles qui scintillent, lune. */
.lf-etoiles::before {
  background:
    radial-gradient(9% 7% at 80% 16%, #fff4cf 56%, transparent 60%),
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 99%, transparent), radial-gradient(1.4px 1.4px at 30% 9%, #fff 99%, transparent),
    radial-gradient(1.8px 1.8px at 46% 24%, #fff 99%, transparent), radial-gradient(1.2px 1.2px at 63% 8%, #fff 99%, transparent),
    radial-gradient(1.6px 1.6px at 88% 40%, #fff 99%, transparent), radial-gradient(1.3px 1.3px at 8% 48%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 22% 64%, #fff 99%, transparent), radial-gradient(1.2px 1.2px at 92% 70%, #fff 99%, transparent),
    radial-gradient(1.6px 1.6px at 72% 56%, #fff 99%, transparent), radial-gradient(1.2px 1.2px at 38% 44%, #fff 99%, transparent),
    linear-gradient(180deg, #0b1030, #241c4f 70%, #3a2a5f);
  animation: lf-twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes lf-twinkle { to { filter: brightness(1.25) saturate(1.1); } }
.lf-etoiles::after { background: radial-gradient(closest-side, rgba(170, 190, 255, .45), rgba(120, 140, 255, .12) 70%, transparent); box-shadow: 0 0 0 1px rgba(190, 200, 255, .3); }

/* Sakura : nuit douce et pétales qui tombent. */
.lf-sakura::before {
  background:
    radial-gradient(3% 2% at 15% 10%, #ffb7d0 62%, transparent 66%), radial-gradient(2.4% 1.6% at 38% 32%, #ffc9dc 62%, transparent 66%),
    radial-gradient(3% 2% at 62% 18%, #ffb7d0 62%, transparent 66%), radial-gradient(2.2% 1.5% at 84% 44%, #ffd6e4 62%, transparent 66%),
    radial-gradient(2.6% 1.7% at 28% 70%, #ffc9dc 62%, transparent 66%), radial-gradient(2.4% 1.6% at 74% 80%, #ffb7d0 62%, transparent 66%),
    linear-gradient(180deg, #3a2a38, #1d1620);
  background-size: 100% 200%, 100% 200%, 100% 200%, 100% 200%, 100% 200%, 100% 200%, 100% 100%;
  animation: lf-petals 18s linear infinite;
}
@keyframes lf-petals { to { background-position: 0 200%, 0 200%, 0 200%, 0 200%, 0 200%, 0 200%, 0 0; } }
.lf-sakura::after { background: radial-gradient(closest-side, rgba(255, 183, 208, .35), rgba(255, 183, 208, .08) 70%, transparent); box-shadow: 0 0 0 1px rgba(255, 200, 220, .3); }

/* Hextech : bleu nuit, liseré or, coins taillés. */
.lf-hextech::before {
  inset: 6px;
  border: 2px solid #c8aa6e;
  background: radial-gradient(60% 50% at 50% 56%, rgba(60, 170, 255, .2), transparent 70%), linear-gradient(165deg, #133050, #0a1428 55%, #010a13);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}
.lf-hextech::after { background: radial-gradient(closest-side, rgba(60, 170, 255, .55), rgba(60, 170, 255, .12) 70%, transparent); box-shadow: 0 0 0 2px #c8aa6e; }

/* Doré baroque : double filet d'or, ornements dans les coins, socle doré. */
.lf-dore::before {
  inset: 4px;
  border: 5px double #e2bd5c;
  background:
    radial-gradient(circle at 0 0, #e2bd5c 0 6px, transparent 7px), radial-gradient(circle at 100% 0, #e2bd5c 0 6px, transparent 7px),
    radial-gradient(circle at 0 100%, #e2bd5c 0 6px, transparent 7px), radial-gradient(circle at 100% 100%, #e2bd5c 0 6px, transparent 7px),
    radial-gradient(60% 50% at 50% 45%, rgba(255, 214, 120, .18), transparent 70%),
    linear-gradient(180deg, #2e2214, #16110b);
  box-shadow: inset 0 0 0 2px #6e5222, 0 0 18px rgba(226, 189, 92, .25);
}
.lf-dore::after { height: 9%; background: radial-gradient(closest-side, #f5d27a, #a77b2c 70%, transparent 74%); box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }

/* Vignette d'un cadre, avec une petite silhouette de Labubu pour l'échelle. */
.frame-mini { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.frame-mini i { position: absolute; left: 50%; bottom: 12%; width: 26%; height: 44%; translate: -50% 0; border-radius: 46% 46% 32% 32%; background: #6b4a3a; }
.frame-mini i::before, .frame-mini i::after { content: ""; position: absolute; top: -34%; width: 26%; height: 46%; border-radius: 50%; background: #6b4a3a; }
.frame-mini i::before { left: 14%; }
.frame-mini i::after { right: 14%; }
/* Kaïra : une aura de feuille d'or adoucit le détourage transparent du sachet sur la scène sombre. */
.pack-g-kai { aspect-ratio: 2 / 3; isolation: isolate; }
.pack-g-kai::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -16% -24%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 48%, rgba(237, 190, 82, .3), rgba(146, 103, 38, .13) 36%, rgba(115, 79, 157, .08) 53%, transparent 72%);
  filter: blur(12px);
  opacity: .9;
  pointer-events: none;
  animation: kai-pack-aura 4.8s ease-in-out infinite;
}
.pack-g-kai > .pack-img { filter: drop-shadow(0 0 1.2rem rgba(237, 190, 82, .2)) drop-shadow(0 1.2rem 1.4rem rgba(0, 0, 0, .62)); }
@keyframes kai-pack-aura { 50% { opacity: .58; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .pack-g-kai::before { animation: none; } }
.pack-g-kai .pack-sheen { -webkit-mask-image: url(assets/booster-kaira.webp); mask-image: url(assets/booster-kaira.webp); }
.pack-g-kai .pack-band { display: none; }
/* Kaïra : illustration bord à bord, sujet entier au premier plan et fond étiré doux pour les images portrait.
   La série reste lisible même très longue ; la rareté pilote les reflets et la scène plein écran. */
.f-kai {
  --frame: #100b17;
  --plate: transparent;
  --name: #fff5e9;
  --type: #d4c3e5;
  --name-font: "Fraunces", Georgia, serif;
  --name-case: none;
  --name-track: -.025em;
  --shape: inset(0 round 2.2%);
  background: #100b17;
}
.f-kai::before {
  inset: 1.5cqw;
  clip-path: none;
  border: max(1.5px, .55cqw) solid color-mix(in srgb, var(--rc) 82%, #fff);
  border-radius: 1.3cqw;
  opacity: .9;
  box-shadow: inset 0 0 0 .8cqw rgba(7, 5, 11, .2), 0 0 1.5cqw color-mix(in srgb, var(--rc) 48%, transparent);
}
.f-kai .f-art { inset: 0; height: 100%; background: #100b17; }
.f-kai .kai-bleed {
  position: absolute;
  inset: -5%;
  background: var(--art) center 22% / cover no-repeat;
  filter: blur(2.6cqw) brightness(.36) saturate(1.4);
  transform: scale(1.06);
}
.f-kai .f-art > img {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 .8cqw 1.8cqw rgba(0, 0, 0, .48));
}
.f-kai .f-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 8, 18, .05) 40%, rgba(12, 8, 18, .22) 62%, rgba(12, 8, 18, .92) 100%);
}
.f-kai .f-plate {
  top: auto;
  left: 3%;
  right: 3%;
  bottom: 0;
  z-index: 4;
  height: 29%;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 2.4cqw;
  padding: 0 7cqw 7cqw;
  background: linear-gradient(180deg, transparent, rgba(12, 8, 18, .35) 24%, rgba(12, 8, 18, .94) 100%);
  text-align: left;
}
.f-kai .f-name {
  display: -webkit-box;
  width: 100%;
  font: 700 clamp(.66rem, 7.4cqw, 1.42rem)/1.04 "Fraunces", Georgia, serif;
  letter-spacing: -.02em;
  text-shadow: 0 .4cqw 1.6cqw rgba(0, 0, 0, .9);
  -webkit-line-clamp: 2;
}
.f-kai .f-type {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 clamp(.32rem, 3.05cqw, .58rem)/1.2 var(--ui);
  letter-spacing: .13em;
  color: #d4c3e5;
}
.f-kai .f-type::before, .f-kai .f-type::after { display: none; }
.f-kai .card-r {
  top: 5.2cqw;
  right: 5.2cqw;
  z-index: 6;
  padding: 1.1cqw 2.2cqw;
  border: max(1px, .35cqw) solid color-mix(in srgb, var(--rc) 78%, #fff);
  border-radius: 999px;
  background: rgba(12, 8, 18, .78);
  color: var(--rc);
  font: 700 clamp(.34rem, 3.3cqw, .62rem)/1 var(--display);
  letter-spacing: .12em;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 2cqw color-mix(in srgb, var(--rc) 35%, transparent);
}
.f-kai .card-tag { z-index: 6; }
.f-kai.r2 .f-art::after {
  background: radial-gradient(55% 28% at 50% 35%, color-mix(in srgb, var(--rc) 22%, transparent), transparent), linear-gradient(180deg, transparent 42%, rgba(12, 8, 18, .94) 100%);
}
.f-kai.r3 .f-art::after, .f-kai.r4 .f-art::after, .f-kai.r5 .f-art::after {
  background-image: linear-gradient(180deg, transparent 38%, rgba(12, 8, 18, .92) 100%), linear-gradient(115deg, transparent 28%, color-mix(in srgb, var(--rc) 8%, transparent) 38%, color-mix(in srgb, var(--rc) 50%, white) 47%, color-mix(in srgb, var(--essence) 38%, transparent) 54%, transparent 66%);
  background-size: 100% 100%, 240% 240%;
  background-position: 0 0, -130% -80%;
  mix-blend-mode: screen;
  animation: kai-foil 4.8s ease-in-out infinite;
}
@keyframes kai-foil { 55%, 100% { background-position: 0 0, 140% 140%; } }
.f-kai.r4::before { animation: kai-legend-frame 3s ease-in-out infinite; }
@keyframes kai-legend-frame { 50% { opacity: .58; filter: brightness(1.6); } }
.f-kai.r5::before {
  border-color: #ff9ecb;
  box-shadow: inset 0 0 0 .8cqw rgba(7, 5, 11, .2), 0 0 2.6cqw color-mix(in srgb, var(--r5) 72%, transparent);
  animation: kai-mythic-frame 2.2s ease-in-out infinite alternate;
}
@keyframes kai-mythic-frame { to { border-color: #d6b8ff; filter: brightness(1.5); } }
.f-kai.r5 .f-art::after {
  background-image: linear-gradient(180deg, transparent 38%, rgba(12, 8, 18, .92) 100%), repeating-conic-gradient(from 0deg at 50% 44%, color-mix(in srgb, var(--r5) 16%, transparent) 0deg 8deg, transparent 8deg 21deg, color-mix(in srgb, var(--r3) 17%, transparent) 21deg 29deg, transparent 29deg 44deg);
  background-size: 100% 100%;
  mix-blend-mode: screen;
  animation: kai-mythic-rays 12s linear infinite;
}
@keyframes kai-mythic-rays { to { background-position: 0 0, 100% 100%; } }
@media (prefers-reduced-motion: reduce) {
  .f-kai.r3 .f-art::after, .f-kai.r4 .f-art::after, .f-kai.r5 .f-art::after,
  .f-kai.r4::before, .f-kai.r5::before { animation: none; }
}
.moment.g-kai.r4::after {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 1;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(240, 193, 90, .19) 0deg 5deg, transparent 5deg 17deg, rgba(201, 166, 255, .16) 17deg 23deg, transparent 23deg 36deg);
  -webkit-mask: radial-gradient(closest-side, transparent 36%, #000 56%, transparent 84%);
          mask: radial-gradient(closest-side, transparent 36%, #000 56%, transparent 84%);
  animation: kai-cine-rays 18s linear infinite;
}
@keyframes kai-cine-rays { to { rotate: 360deg; } }
.moment.g-kai.r4.on > img { animation: kai-legend-arrive 1.35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes kai-legend-arrive {
  from { transform: scale(1.18); filter: brightness(.5) saturate(.65) blur(5px); opacity: .25; }
  62% { filter: brightness(1.25) saturate(1.2) blur(0); opacity: 1; }
  to { transform: scale(1); filter: brightness(1) saturate(1); opacity: 1; }
}
.moment.g-kai.r5.on:not(.viewer) > img { animation: kai-mythic-arrive 1.25s cubic-bezier(.2, .7, .2, 1) both, quake .5s ease-out .05s; }
@keyframes kai-mythic-arrive {
  from { transform: scale(1.22); filter: brightness(.35) saturate(.55) blur(12px); opacity: .1; }
  58% { filter: brightness(1.35) saturate(1.4) blur(0); opacity: 1; }
  to { transform: scale(1); filter: brightness(1.05) saturate(1.18); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .moment.g-kai.r4::after, .moment.g-kai.r4.on > img, .moment.g-kai.r5.on:not(.viewer) > img { animation: none; }
}


/* ---------- Kaïra : laque noire et feuille d'or, comme son sachet ----------
   Bordure noire à double filet d'or et trame de points dorés, illustration dans une fenêtre bordée d'or,
   médaillon doré au kanji 開 (anneau à la couleur de la rareté), cartouche de rareté, plaque noire au filet doré.
   Les reflets animés selon la rareté (plus haut) sont gardés. */
.f-kai {
  --gold-k: #e2bd5c;
  --gold-k2: #8a6a22;
  background:
    radial-gradient(circle, rgba(226, 189, 92, .22) .5cqw, transparent .62cqw) 0 0 / 3cqw 3cqw,
    linear-gradient(160deg, #1d1712, #0b0907 60%, #15100b);
}
.f-kai::before {
  inset: 1.4cqw;
  border: max(1px, .5cqw) solid var(--gold-k);
  border-radius: 1.6cqw;
  opacity: 1;
  box-shadow: inset 0 0 0 1cqw #0b0907, inset 0 0 0 calc(1cqw + max(1px, .25cqw)) color-mix(in srgb, var(--gold-k) 60%, transparent), 0 0 1.5cqw color-mix(in srgb, var(--rc) 30%, transparent);
}
.f-kai .f-art { inset: 4.4cqw 4.4cqw 4.4cqw; height: auto; border-radius: 1.2cqw; overflow: hidden; box-shadow: 0 0 0 max(1px, .35cqw) var(--gold-k), 0 0 0 calc(max(1px, .35cqw) + 1px) #000; }
.f-kai .f-plate {
  left: 4.4cqw;
  right: 4.4cqw;
  bottom: 4.4cqw;
  height: auto;
  gap: 1.2cqw;
  padding: 3.4cqw 4cqw 3cqw;
  border-top: max(1px, .35cqw) solid var(--gold-k);
  border-radius: 0 0 1.2cqw 1.2cqw;
  background: linear-gradient(180deg, rgba(11, 9, 7, .88), #0b0907);
  align-items: center;
  text-align: center;
}
.f-kai .f-plate::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2.6cqw;
  height: 2.6cqw;
  translate: -50% -55%;
  rotate: 45deg;
  background: linear-gradient(135deg, #fff3cf, var(--gold-k));
  box-shadow: 0 0 0 max(1px, .3cqw) #0b0907;
}
.f-kai .f-name { font-size: clamp(.6rem, 6.8cqw, 1.3rem); text-align: center; color: #fbf3e2; }
.f-kai .f-type { text-align: center; color: var(--gold-k); letter-spacing: .16em; text-transform: uppercase; }
/* Médaillon doré au kanji 開, cerclé de la couleur de la rareté. */
.f-kai .f-medal {
  display: grid;
  place-items: center;
  position: absolute;
  top: 2.6cqw;
  left: 2.6cqw;
  z-index: 6;
  width: 11cqw;
  height: 11cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3cf, var(--gold-k) 45%, var(--gold-k2));
  box-shadow: 0 0 0 max(1px, .45cqw) #0b0907, 0 0 0 max(2px, .9cqw) var(--rc), 0 .8cqw 1.6cqw rgba(0, 0, 0, .5);
}
.f-kai .f-medal::after { content: "開"; font: 900 6.2cqw/1 "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif; color: #1a1209; }
.f-kai .card-r {
  top: 4.4cqw;
  right: 4.4cqw;
  padding: 1.2cqw 2.6cqw;
  border: max(1px, .35cqw) solid var(--gold-k);
  border-radius: 0 1.2cqw 0 1.2cqw;
  background: #0b0907;
  color: var(--rc);
  box-shadow: none;
  backdrop-filter: none;
}

/* Naruto : la ligne sous le nom porte la scène de la carte (« Mode Ermite contre Pain »), parfois longue : deux lignes au plus. */
.f-nar .f-type { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: center; letter-spacing: .1em; white-space: normal; }


/* Kaïra : un même cadre laqué, décliné selon les six raretés. Les Mythiques portent un double serti animé ; les Communes restent sobres. */
.f-kai.r0::before {
  border-color: #a7adb7;
  box-shadow: inset 0 0 0 1cqw #0b0907, inset 0 0 0 calc(1cqw + max(1px, .25cqw)) rgba(167, 173, 183, .38);
}
.f-kai.r1::before {
  border-color: #7dcea0;
  box-shadow: inset 0 0 0 1cqw #0b0907, inset 0 0 0 calc(1cqw + max(1px, .25cqw)) rgba(125, 206, 160, .45), 0 0 1.2cqw rgba(125, 206, 160, .18);
}
.f-kai.r2::before {
  border: max(1px, .55cqw) double #7eb6ff;
  box-shadow: inset 0 0 0 1cqw #0b0907, inset 0 0 0 calc(1cqw + max(1px, .25cqw)) rgba(126, 182, 255, .52), 0 0 1.5cqw rgba(126, 182, 255, .24);
}
.f-kai.r3::before {
  border-color: #c9a6ff;
  box-shadow: inset 0 0 0 1cqw #0b0907, inset 0 0 0 calc(1cqw + max(1px, .25cqw)) rgba(201, 166, 255, .62), 0 0 2cqw rgba(201, 166, 255, .3);
}
.f-kai.r4::before {
  border-color: #f0c15a;
  box-shadow: inset 0 0 0 1cqw #0b0907, inset 0 0 0 calc(1cqw + max(1px, .25cqw)) rgba(240, 193, 90, .72), 0 0 2.8cqw rgba(240, 193, 90, .42);
}
.f-kai.r5::before {
  border: max(1.2px, .72cqw) double #ff6b86;
  box-shadow: inset 0 0 0 1cqw #0b0907, inset 0 0 0 calc(1cqw + max(1px, .3cqw)) rgba(201, 166, 255, .8), 0 0 3cqw rgba(255, 107, 134, .62);
}
.f-kai.r0 .card-r { border-color: #a7adb7; }
.f-kai.r1 .card-r { border-color: #7dcea0; }
.f-kai.r2 .card-r { border-color: #7eb6ff; }
.f-kai.r3 .card-r { border-color: #c9a6ff; }
.f-kai.r4 .card-r { border-color: #f0c15a; }
.f-kai.r5 .card-r { border-color: #ff6b86; box-shadow: 0 0 2cqw rgba(255, 107, 134, .38); }
.f-kai.r0 .f-medal { filter: saturate(.55); }
.f-kai.r1 .f-medal { box-shadow: 0 0 0 max(1px, .45cqw) #0b0907, 0 0 0 max(2px, .9cqw) #7dcea0, 0 .8cqw 1.6cqw rgba(0, 0, 0, .5); }
.f-kai.r2 .f-medal { box-shadow: 0 0 0 max(1px, .45cqw) #0b0907, 0 0 0 max(2px, .9cqw) #7eb6ff, 0 0 2cqw rgba(126, 182, 255, .5); }
.f-kai.r3 .f-medal { box-shadow: 0 0 0 max(1px, .45cqw) #0b0907, 0 0 0 max(2px, .9cqw) #c9a6ff, 0 0 2.4cqw rgba(201, 166, 255, .55); }
.f-kai.r4 .f-medal { box-shadow: 0 0 0 max(1px, .45cqw) #0b0907, 0 0 0 max(2px, .9cqw) #f0c15a, 0 0 2.8cqw rgba(240, 193, 90, .62); }
.f-kai.r5 .f-medal { box-shadow: 0 0 0 max(1px, .45cqw) #0b0907, 0 0 0 max(2px, .9cqw) #ff6b86, 0 0 3.2cqw rgba(255, 107, 134, .72); }
@media (prefers-reduced-motion: reduce) {
  .f-kai.r4::before, .f-kai.r5::before { animation: none; }
}


/* Kaïra : la carte devient un splash plein écran ; l'illustration continue en fond dans une profondeur colorée. */
.moment.g-kai.cine.contain-moment::after { display: none; }
.moment.g-kai.cine.contain-moment .moment-backdrop {
  position: absolute;
  inset: -7%;
  z-index: 0;
  background: var(--art) center 30% / cover no-repeat;
  filter: blur(30px) brightness(.28) saturate(1.55);
  transform: scale(1.12);
  animation: kai-splash-backdrop 14s ease-in-out infinite alternate;
}
.moment.g-kai.cine.contain-moment > img {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 0 3rem rgba(0, 0, 0, .48));
}
@keyframes kai-splash-backdrop {
  to { transform: scale(1.2) translateY(-1.5%); filter: blur(34px) brightness(.36) saturate(1.7); }
}
/* Cadres de cinéma au-dessus des rayons de rareté : les deux effets restent visibles ensemble. */
.moment.g-kai.cine .moment-fx::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(#050406, #050406) top / 100% 10vh no-repeat,
              linear-gradient(#050406, #050406) bottom / 100% 10vh no-repeat;
}
.moment.g-kai.cine.on .moment-fx::after { animation: cine-bars 4.2s cubic-bezier(.6, 0, .3, 1) both; }
/* Légendaire : travelling posé, révélation dorée. Mythique : arrivée plus ample, halo rose-violet et impact. */
.moment.g-kai.r4.cine.on > img {
  animation: kai-r4-splash 8.6s cubic-bezier(.18, .68, .28, 1) both;
}
@keyframes kai-r4-splash {
  0% { transform: scale(1.2) translateY(2%); filter: brightness(.3) saturate(.7) blur(8px); opacity: .18; }
  20% { filter: brightness(.92) saturate(1.05) blur(0); opacity: 1; }
  100% { transform: scale(1.035) translateY(-.4%); filter: brightness(1.06) saturate(1.08); opacity: 1; }
}
.moment.g-kai.r5.cine::after {
  background: conic-gradient(from 0deg, transparent, rgba(255, 107, 134, .35), rgba(201, 166, 255, .5), rgba(240, 193, 90, .35), transparent);
  mix-blend-mode: screen;
  animation: kai-r5-aura 12s linear infinite;
}
@keyframes kai-r5-aura { to { rotate: 360deg; } }
.moment.g-kai.r5.cine.on > img {
  animation: kai-r5-splash 8.8s cubic-bezier(.16, .72, .24, 1) both, quake .5s ease-out .08s;
}
@keyframes kai-r5-splash {
  0% { transform: scale(1.28); filter: brightness(.16) saturate(.5) blur(18px); opacity: .05; }
  18% { filter: brightness(1.25) saturate(1.45) blur(0); opacity: 1; }
  100% { transform: scale(1.06); filter: brightness(1.08) saturate(1.22); opacity: 1; }
}
.moment.g-kai.cine.on .moment-plate { animation: rise .8s var(--ease) 1.55s both; }
.moment.g-kai.cine.on:not(.viewer) .moment-name { animation: cine-title 1.1s var(--ease) 1.8s both; }
@media (prefers-reduced-motion: reduce) {
  .moment.g-kai.cine.contain-moment .moment-backdrop,
  .moment.g-kai.cine.on > img,
  .moment.g-kai.cine .moment-fx::after,
  .moment.g-kai.r5.cine::after { animation: none; }
  .moment.g-kai.cine.contain-moment > img { transform: none; filter: none; }
}


/* LoL : les objets méritent une vraie scène, pas une petite vignette perdue dans un aplat violet. */
.f-lol.k-o .f-art {
  background: radial-gradient(ellipse at 50% 42%, #344b70 0, #15243e 42%, #08121f 78%);
}
.f-lol.k-o .f-plainbg {
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--tint) 65%, #fff 12%), transparent 38%),
    radial-gradient(ellipse at 50% 48%, color-mix(in srgb, var(--tint) 72%, #182b43), #0b1424 75%);
}
.f-lol.k-o .f-art::before {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: 1;
  pointer-events: none;
  border: max(1px, .35cqw) solid rgba(200, 170, 110, .48);
  clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
  background: repeating-linear-gradient(135deg, transparent 0 12cqw, rgba(255,255,255,.025) 12cqw 12.5cqw);
  box-shadow: inset 0 0 7cqw rgba(117, 180, 255, .1);
}
.f-lol.k-o .f-subject { inset: 4%; z-index: 2; }
.f-lol.k-o .k-o-icon {
  width: 64%;
  aspect-ratio: 1;
  border: max(1.5px, .65cqw) solid rgba(235, 211, 155, .9);
  border-radius: 17%;
  object-fit: cover;
  rotate: -4deg;
  box-shadow: 0 0 0 1.8cqw rgba(5, 12, 23, .85), 0 0 0 2.3cqw rgba(200, 170, 110, .55), 0 0 8cqw color-mix(in srgb, var(--rc) 48%, transparent), 0 2cqw 5cqw rgba(0, 0, 0, .65);
  filter: saturate(1.16) contrast(1.06);
}
.f-lol.k-o .f-plate {
  background: linear-gradient(180deg, rgba(7, 14, 26, .72), rgba(1, 8, 17, .96));
  border-color: color-mix(in srgb, var(--rc) 42%, var(--gold-lol));
}
.f-lol.k-o .f-name { font-size: clamp(.56rem, 6.9cqw, 1.28rem); }

/* Le splash reste visible pendant le chargement ; la vidéo le remplace par un fondu et une ouverture de cadre. */
.moment.video-reveal > img {
  opacity: 0;
  transition: opacity .9s ease, filter 1.1s ease;
  filter: brightness(.3) saturate(.7);
}
.moment.video-reveal .moment-anim:not(.is-waiting) {
  animation: video-unveil 1.15s cubic-bezier(.18, .7, .28, 1) both;
}
@keyframes video-unveil {
  from { clip-path: inset(42% 34% round 8%); opacity: .3; filter: brightness(.55) saturate(.8); }
  to { clip-path: inset(0); opacity: 1; filter: brightness(1) saturate(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .moment.video-reveal > img { opacity: 0; transition: none; }
  .moment.video-reveal .moment-anim:not(.is-waiting) { animation: none; }
}

/* Barre de navigation : panneau flottant, avec l'accent doré réservé à l'onglet actif. */
.topbar {
  width: min(1680px, calc(100% - 2rem));
  min-height: 4.35rem;
  margin: .55rem auto 0;
  padding: .35rem 1.1rem;
  gap: clamp(.8rem, 1.6vw, 1.7rem);
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.topbar::before {
  inset: 0;
  border: 1px solid rgba(245, 239, 224, .1);
  border-radius: 1rem;
  background: rgba(18, 21, 28, .88);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .025);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.wordmark-logo { border-radius: .75rem; box-shadow: 0 0 0 1px rgba(245, 239, 224, .12); }
.tabs { gap: .2rem; }
.tabs a {
  min-height: 2.8rem;
  padding: .65rem .8rem;
  border-radius: .65rem;
  color: #a9adb7;
  font-size: .8rem;
  letter-spacing: .035em;
  transition: color .2s ease, background-color .2s ease;
}
.tabs a:hover:not([aria-current="page"]) { background: rgba(245, 239, 224, .045); color: var(--cream); }
.tabs a[aria-current="page"] { background: transparent; color: var(--cream); }
.tab-ink { bottom: .12rem; height: 2px; border-radius: 99px; background: var(--gold); }
.tab-more > summary { border-radius: .65rem; }
.tab-more[open] > summary, .tab-more.is-active > summary { background: rgba(245, 239, 224, .055); }
.wallet { gap: .7rem; }
.pill { border-radius: 999px; }
.account { padding-left: .25rem; }

@media (max-width: 1100px) {
  .topbar { width: calc(100% - 1.25rem); padding-inline: .8rem; }
  .tabs a { padding-inline: .6rem; }
}
@media (max-width: 860px) {
  .topbar { width: calc(100% - 1rem); min-height: 3.8rem; margin-top: .4rem; padding-inline: .65rem; }
  .topbar::before { border-radius: .85rem; }
  .tabs a[aria-current="page"] { background: rgba(245, 239, 224, .045); }
  .tab-ink { display: none; }
}

/* Sélecteur des boosters : une rangée de navigation intégrée au panneau, sans cadre dans le cadre. */
.game-switch-wrap,
.stage > .game-switch-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 0 .25rem;
  border: 0;
  border-bottom: 1px solid rgba(245, 239, 224, .1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.game-switch { gap: .15rem; padding: 0 .1rem; }
.game-switch button {
  min-height: 3.1rem;
  padding-inline: .9rem;
  border-radius: .55rem .55rem 0 0;
  color: #a9adb7;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .015em;
  transition: color .2s ease, background-color .2s ease;
}
.game-switch button + button::after { display: none; }
.game-switch button:hover:not([aria-pressed="true"]) { background: rgba(245, 239, 224, .04); }
.game-switch button[aria-pressed="true"] {
  color: var(--cream);
  background: color-mix(in srgb, var(--gc) 7%, transparent);
}
.game-switch button[aria-pressed="true"]::before {
  inset: auto .65rem 0;
  height: 2px;
  border: 0;
  border-radius: 99px;
  background: var(--gc);
  box-shadow: 0 0 12px color-mix(in srgb, var(--gc) 42%, transparent);
  transform: none;
}
.gs-icon { width: 1.7rem; height: 1.7rem; }
.gs-more { background: linear-gradient(90deg, transparent, #11151c 45%); }

@media (max-width: 860px) {
  .game-switch-wrap, .stage > .game-switch-wrap { margin-inline: 0; width: 100%; }
  .game-switch { padding-inline: 0; }
  .game-switch button { min-height: 3rem; padding-inline: .65rem; }
}

/* Une carte doit avoir une vraie face de collection, même avant son retournement. */
.rc-back {
  position: relative;
  overflow: hidden;
  border-radius: 1.8%;
  background:
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--rc, var(--gold)) 16%, transparent), transparent 48%),
    repeating-linear-gradient(135deg, transparent 0 2.2cqw, rgba(226, 189, 92, .025) 2.2cqw 2.35cqw),
    linear-gradient(145deg, #20232b, #11151c 50%, #090c11);
  box-shadow: inset 0 0 0 1px rgba(226, 189, 92, .38), inset 0 0 5cqw rgba(0, 0, 0, .56), 0 1.2cqw 3cqw rgba(0, 0, 0, .28);
}
.rc-back::before {
  content: "";
  position: absolute;
  inset: 4.2%;
  z-index: 0;
  border: max(1px, .35cqw) solid color-mix(in srgb, var(--rc, var(--gold)) 42%, rgba(226, 189, 92, .48));
  clip-path: polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);
  background:
    linear-gradient(var(--rc, var(--gold)), var(--rc, var(--gold))) left top / 12% max(1px, .42cqw) no-repeat,
    linear-gradient(var(--rc, var(--gold)), var(--rc, var(--gold))) right bottom / 12% max(1px, .42cqw) no-repeat;
  opacity: .9;
}
.rc-back::after {
  content: "";
  position: absolute;
  inset: 25% 20%;
  z-index: 0;
  border: max(1px, .35cqw) solid rgba(226, 189, 92, .14);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 189, 92, .075), transparent 68%);
  box-shadow: 0 0 8cqw color-mix(in srgb, var(--rc, var(--gold)) 12%, transparent);
}
.back-frame {
  position: relative;
  z-index: 1;
  gap: 1.4cqw;
  width: 100%;
  height: 100%;
  color: #e4c77e;
}
.back-frame svg {
  width: 43%;
  filter: drop-shadow(0 0 2cqw color-mix(in srgb, var(--rc, var(--gold)) 34%, transparent));
}
.back-cap, .back-detail { color: #b7a779; font: 600 clamp(.38rem, 3.1cqw, .62rem)/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; }
.back-cap { position: absolute; top: 10%; }
.back-brand { font: 700 clamp(.7rem, 6.4cqw, 1.05rem)/1 var(--serif); letter-spacing: .24em; }
.back-detail { font-size: clamp(.32rem, 2.6cqw, .5rem); letter-spacing: .15em; }
.rc.hint .rc-back {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 76%, #e4c77e), inset 0 0 5cqw rgba(0, 0, 0, .56), 0 0 3cqw color-mix(in srgb, var(--rc) 24%, transparent);
}

/* Sur le recto, l'illustration garde la vedette ; le bandeau Nouvelle/Doublon devient une pastille nette. */
.fcard .f-plate {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 -2cqw 8cqw rgba(0, 0, 0, .24);
}
.fcard .card-tag {
  top: 5.2cqw;
  left: 5.2cqw;
  right: auto;
  width: auto;
  padding: 1.2cqw 2.5cqw;
  border: max(1px, .3cqw) solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  rotate: 0deg;
  font-size: clamp(.4rem, 3.8cqw, .68rem);
  letter-spacing: .08em;
  box-shadow: 0 .5cqw 1.5cqw rgba(0, 0, 0, .4);
}
.fcard .tag-new { background: rgba(15, 17, 21, .82); color: #f5e9c9; }
.fcard .tag-dupe { background: rgba(15, 19, 26, .84); color: #e0e4eb; }
.fcard .f-gem { display: block; position: absolute; top: 5cqw; left: 5cqw; width: 4.2cqw; aspect-ratio: 1; rotate: 45deg; background: var(--rc); box-shadow: 0 0 2.2cqw color-mix(in srgb, var(--rc) 55%, transparent); }
.f-lol .f-gem, .f-kai .f-gem { display: none; }
.f-kai .f-art > img { transform: scale(1.065); }
.f-kai .f-plate { min-height: 27%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

@media (prefers-reduced-motion: reduce) {
  .rc-back, .fcard .f-plate { scroll-behavior: auto; }
}

/* Révélation : une déchirure nette, puis un pivot de carte précis au lieu d'un tremblement continu. */
.pack-big.tearing .tear-top { animation: foil-rip .62s cubic-bezier(.16, .76, .22, 1) forwards; }
.pack-big.tearing .tear-body { animation: foil-drop .78s cubic-bezier(.22, .7, .2, 1) .12s forwards; }
.pack-big.tearing::after {
  content: "";
  position: absolute;
  inset: -24%;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--glow, var(--gold)) 52%, transparent);
  border-radius: 50%;
  pointer-events: none;
  animation: foil-wave .82s cubic-bezier(.12, .7, .2, 1) both;
}
@keyframes foil-rip {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  28% { opacity: 1; transform: translateY(-8%) rotate(-5deg); }
  100% { opacity: 0; transform: translateY(-44%) rotate(-14deg) scale(.92); }
}
@keyframes foil-drop {
  0% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
  18% { transform: translateY(0) rotate(-1.8deg) scale(1.015); }
  100% { opacity: 0; transform: translateY(75vh) rotate(7deg) scale(.9); }
}
@keyframes foil-wave {
  0% { opacity: .8; transform: scale(.56); }
  100% { opacity: 0; transform: scale(1.3); }
}

.deck .rc.charging .rc-back { animation: rare-charge 1.1s cubic-bezier(.4, 0, .2, 1) infinite; }
.deck.r4 .rc.charging .rc-back { animation-duration: .92s; }
.deck.r5 .rc.charging .rc-back { animation-name: mythic-charge; animation-duration: .78s; }
@keyframes rare-charge {
  0%, 100% { filter: brightness(1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 55%, var(--gold)), 0 0 2cqw color-mix(in srgb, var(--rc) 15%, transparent); }
  50% { filter: brightness(1.22); box-shadow: inset 0 0 0 .8cqw var(--rc), inset 0 0 12cqw color-mix(in srgb, var(--rc) 18%, transparent), 0 0 8cqw color-mix(in srgb, var(--rc) 52%, transparent); }
}
@keyframes mythic-charge {
  0%, 100% { filter: brightness(1) hue-rotate(0); transform: scale(1); }
  50% { filter: brightness(1.28) hue-rotate(12deg); transform: scale(1.018); }
}
.deck .rc.flipped .rc-inner { animation: card-turn 0.9s cubic-bezier(.16, .82, .22, 1) both; }
.deck.r3 .rc.flipped .rc-inner { animation-duration: .98s; }
.deck.r4 .rc.flipped .rc-inner { animation-name: card-turn-rare; animation-duration: 1.16s; }
.deck.r5 .rc.flipped .rc-inner { animation-name: card-turn-mythic; animation-duration: 1.34s; }
@keyframes card-turn {
  0% { transform: rotateY(0); }
  48% { transform: rotateY(88deg) translateZ(22px) scale(1.035); }
  100% { transform: rotateY(180deg); }
}
@keyframes card-turn-rare {
  0% { transform: rotateY(0) rotateZ(0); }
  36% { transform: rotateY(64deg) rotateZ(-2deg) translateZ(24px) scale(1.04); }
  54% { transform: rotateY(100deg) rotateZ(1deg) translateZ(28px) scale(1.06); }
  100% { transform: rotateY(180deg) rotateZ(0); }
}
@keyframes card-turn-mythic {
  0% { transform: rotateY(0) rotateZ(0); filter: brightness(1); }
  32% { transform: rotateY(58deg) rotateZ(-3deg) translateZ(30px) scale(1.05); filter: brightness(1.18); }
  53% { transform: rotateY(98deg) rotateZ(2deg) translateZ(34px) scale(1.08); filter: brightness(1.3); }
  100% { transform: rotateY(180deg) rotateZ(0); filter: brightness(1); }
}
.deck .rc.flipped .rc-lift { animation: deck-lift-polished .82s cubic-bezier(.18, .74, .22, 1) both; }
.deck.r4 .rc.flipped .rc-lift { animation-duration: 1.04s; }
.deck.r5 .rc.flipped .rc-lift { animation-duration: 1.22s; }
@keyframes deck-lift-polished {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-18px) scale(1.055); }
  70% { transform: translateY(-10px) scale(1.025); }
  100% { transform: translateY(0) scale(1); }
}
.deck.is-popping .deck-ring { animation: reveal-ring .92s cubic-bezier(.14, .7, .2, 1) both; }
.deck.is-popping .deck-ring-2 { animation-delay: .12s; animation-duration: 1.12s; }
@keyframes reveal-ring {
  0% { opacity: .85; scale: .44; filter: brightness(1.4); }
  100% { opacity: 0; scale: 1.7; filter: brightness(1); }
}
.deck.r4.is-quaking { animation: legendary-impact .52s cubic-bezier(.18, .7, .22, 1); }
.deck.r5.is-quaking { animation: mythic-impact .68s cubic-bezier(.18, .7, .22, 1); }
@keyframes legendary-impact {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-.35%); }
  48% { transform: translateX(.28%); }
  72% { transform: translateX(-.14%); }
}
@keyframes mythic-impact {
  0%, 100% { transform: translateX(0) scale(1); }
  20% { transform: translateX(-.45%) scale(1.006); }
  42% { transform: translateX(.34%) scale(1.003); }
  66% { transform: translateX(-.18%) scale(1.001); }
}
.rc:not(.instant).flipped .rc-inner { animation: card-turn .9s cubic-bezier(.16, .82, .22, 1) both; }
.rc.r3:not(.instant).flipped .rc-inner { animation-duration: .98s; }
.rc.r4:not(.instant).flipped .rc-inner { animation-name: card-turn-rare; animation-duration: 1.16s; }
.rc.r5:not(.instant).flipped .rc-inner { animation-name: card-turn-mythic; animation-duration: 1.34s; }
.rc:not(.instant).flipped .rc-lift { animation: deck-lift-polished .82s cubic-bezier(.18, .74, .22, 1) both; }
.rc.r4:not(.instant).flipped .rc-lift { animation-duration: 1.04s; }
.rc.r5:not(.instant).flipped .rc-lift { animation-duration: 1.22s; }
@media (prefers-reduced-motion: reduce) {
  .pack-big.tearing .tear-top, .pack-big.tearing .tear-body,
  .pack-big.tearing::after, .deck .rc.charging .rc-back,
  .deck .rc.flipped .rc-inner, .deck .rc.flipped .rc-lift,
  .deck.is-popping .deck-ring, .deck.r4.is-quaking, .deck.r5.is-quaking { animation: none; }
}

/* Cadre commun des collections : même composition que Gooner, avec l’accent de rareté conservé. */
.fcard:not(.f-goon) {
  --frame: #14131a;
  --plate: linear-gradient(180deg, rgba(20, 18, 24, .74), rgba(12, 11, 16, .97));
  --name: #f5efe2;
  --type: #c6beae;
  --shape: inset(0 round 3.6%);
  clip-path: var(--shape);
  border-radius: 0;
  background: linear-gradient(155deg, #29232b, #121219 46%, #211921);
}
.fcard:not(.f-goon)::before {
  inset: 1.6cqw;
  clip-path: none;
  border: max(1.5px, .55cqw) solid color-mix(in srgb, var(--rc) 56%, #e4d5b5);
  border-radius: 2.4cqw;
  opacity: 1;
  box-shadow: inset 0 0 0 .9cqw rgba(13, 10, 15, .48), 0 0 2.2cqw color-mix(in srgb, var(--rc) 30%, transparent);
}
.fcard:not(.f-goon)::after { display: none; }
.fcard:not(.f-goon) .f-frame { display: none; }
.fcard:not(.f-goon) .f-art {
  left: 4.4cqw;
  right: 4.4cqw;
  top: 4.4cqw;
  bottom: 4.4cqw;
  height: auto;
  border: max(1px, .35cqw) solid rgba(238, 226, 204, .46);
  border-radius: 2.2cqw;
  box-shadow: inset 0 0 4cqw rgba(0, 0, 0, .24), 0 1cqw 2cqw rgba(0, 0, 0, .2);
}
.fcard:not(.f-goon) .f-plate {
  left: 6.6cqw;
  right: 6.6cqw;
  top: auto;
  bottom: 6.6cqw;
  height: 27%;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1.8cqw;
  padding: 0 5cqw 4.6cqw;
  border: max(1px, .35cqw) solid rgba(238, 226, 204, .64);
  border-radius: 1.7cqw;
  background: linear-gradient(180deg, rgba(22, 18, 25, .78), rgba(12, 10, 15, .96));
  box-shadow: 0 1cqw 2.2cqw rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: left;
}
.fcard:not(.f-goon) .f-name {
  width: 100%;
  color: #f5efe2;
  font: 700 clamp(.58rem, 7.6cqw, 1.34rem)/1.04 var(--serif);
  letter-spacing: -.02em;
  text-align: left;
  text-shadow: 0 .5cqw 1.5cqw rgba(0, 0, 0, .86);
}
.fcard:not(.f-goon) .f-type {
  width: 100%;
  color: color-mix(in srgb, var(--rc) 48%, #f2e7d4);
  font: 650 clamp(.32rem, 3.3cqw, .58rem)/1.1 var(--ui);
  letter-spacing: .17em;
  text-align: left;
}
.fcard:not(.f-goon) .f-type::before { display: block; flex: 0 0 7cqw; background: var(--rc); opacity: .8; }
.fcard:not(.f-goon) .f-type::after { display: none; }
.fcard:not(.f-goon) .f-medal {
  display: grid;
  place-items: center;
  position: absolute;
  top: 3.3cqw;
  left: 3.3cqw;
  z-index: 6;
  width: 11cqw;
  height: 11cqw;
  border: max(1px, .35cqw) solid rgba(238, 226, 204, .9);
  border-radius: 50%;
  rotate: 0deg;
  background: radial-gradient(circle at 34% 28%, #fff8e8, #dfcfad 55%, #9f8a67);
  box-shadow: 0 0 0 .55cqw rgba(13, 10, 15, .88), 0 0 0 1cqw color-mix(in srgb, var(--rc) 74%, #2a2027), 0 0 2.8cqw color-mix(in srgb, var(--rc) 42%, transparent);
}
.fcard:not(.f-goon) .f-medal::after {
  content: "";
  width: 37%;
  height: 37%;
  rotate: 45deg;
  border: max(1px, .3cqw) solid rgba(255, 255, 255, .72);
  background: var(--rc);
  box-shadow: 0 0 1.8cqw color-mix(in srgb, var(--rc) 72%, transparent);
}
.fcard:not(.f-goon) .f-seal {
  display: block;
  position: absolute;
  top: 17cqw;
  right: 6.2cqw;
  z-index: 6;
  width: 3.6cqw;
  height: 3.6cqw;
  rotate: 45deg;
  border: max(1px, .3cqw) solid rgba(255, 255, 255, .86);
  background: var(--rc);
  box-shadow: 4.8cqw 4.8cqw 0 -.3cqw #17131a, 4.8cqw 4.8cqw 0 0 rgba(255,255,255,.8), 9.6cqw 9.6cqw 0 -.3cqw #17131a, 9.6cqw 9.6cqw 0 0 rgba(255,255,255,.72);
}
.fcard:not(.f-goon) .card-r {
  top: 4.7cqw;
  left: 19cqw;
  right: 5.2cqw;
  z-index: 6;
  padding: 1.4cqw 2cqw;
  border: max(1px, .35cqw) solid rgba(238, 226, 204, .78);
  border-radius: 999px;
  background: rgba(14, 12, 17, .88);
  color: var(--rc);
  font: 750 clamp(.34rem, 3.6cqw, .64rem)/1 var(--ui);
  letter-spacing: .14em;
  text-align: center;
  box-shadow: 0 .7cqw 1.8cqw rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fcard:not(.f-goon) .card-n { top: auto; bottom: 3.7cqw; right: 4.2cqw; z-index: 7; border-radius: 999px; }
.fcard:not(.f-goon) .card-tag { z-index: 7; }
.fcard:not(.f-goon).missing::before { border-color: #8b8f96; box-shadow: inset 0 0 0 .9cqw rgba(13, 10, 15, .48); }

/* Matières de rareté : chaque rang reçoit son métal, son reflet et sa profondeur propres. */
.fcard { --metal-hi: #f5f7fa; --metal-low: #9ca6b3; --metal-glow: rgba(218, 228, 240, .18); }
.fcard.r0 { --metal-hi: #f1f4f8; --metal-low: #858f9d; --metal-glow: rgba(202, 214, 228, .16); }
.fcard.r1 { --metal-hi: #d9ffe8; --metal-low: #4a9d70; --metal-glow: rgba(91, 210, 147, .2); }
.fcard.r2 { --metal-hi: #e1f4ff; --metal-low: #4b78c6; --metal-glow: rgba(92, 158, 255, .22); }
.fcard.r3 { --metal-hi: #f4e7ff; --metal-low: #8060c3; --metal-glow: rgba(182, 130, 255, .25); }
.fcard.r4 { --metal-hi: #fff1bd; --metal-low: #a8701c; --metal-glow: rgba(255, 190, 64, .3); }
.fcard.r5 { --metal-hi: #ffe3ed; --metal-low: #b74468; --metal-glow: rgba(255, 88, 139, .34); }
.fcard.r6 { --metal-hi: #ffe0f8; --metal-low: #923fc5; --metal-glow: rgba(222, 90, 255, .36); }
.fcard:not(.f-goon)::before {
  border-color: color-mix(in srgb, var(--rc) 62%, var(--metal-hi));
  box-shadow: inset 0 0 0 .9cqw rgba(13, 10, 15, .4), inset 0 0 1.2cqw var(--metal-glow), 0 0 2.4cqw var(--metal-glow);
}
.fcard .f-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .13;
  background: linear-gradient(118deg, transparent 18%, color-mix(in srgb, var(--metal-low) 52%, transparent) 34%, color-mix(in srgb, var(--metal-hi) 78%, white) 43%, transparent 56%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%);
  mix-blend-mode: screen;
  transition: opacity .28s ease, background-position .6s ease;
}
.fcard.r1 .f-art::before { background-image: linear-gradient(118deg, transparent 18%, color-mix(in srgb, var(--metal-low) 40%, transparent) 34%, color-mix(in srgb, var(--metal-hi) 70%, white) 43%, transparent 56%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
.fcard.r2 .f-art::before { background-image: linear-gradient(132deg, transparent 19%, color-mix(in srgb, var(--metal-low) 44%, transparent) 35%, color-mix(in srgb, var(--metal-hi) 84%, white) 44%, transparent 58%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
.fcard.r3 .f-art::before { background-image: linear-gradient(112deg, transparent 14%, color-mix(in srgb, var(--metal-low) 38%, transparent) 29%, color-mix(in srgb, var(--metal-hi) 84%, white) 40%, color-mix(in srgb, var(--rc) 34%, transparent) 50%, transparent 64%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
.fcard.r4 .f-art::before { background-image: linear-gradient(108deg, transparent 16%, color-mix(in srgb, var(--metal-low) 48%, transparent) 32%, #fff6d5 42%, color-mix(in srgb, var(--metal-hi) 70%, white) 48%, transparent 62%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
.fcard.r5 .f-art::before { background-image: linear-gradient(112deg, transparent 10%, color-mix(in srgb, var(--rc) 42%, transparent) 24%, #fff4fb 37%, color-mix(in srgb, var(--r2) 54%, transparent) 48%, color-mix(in srgb, var(--r3) 54%, transparent) 58%, transparent 72%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
.fcard.r6 .f-art::before { background-image: repeating-linear-gradient(116deg, transparent 0 17%, color-mix(in srgb, var(--rc) 28%, transparent) 22%, color-mix(in srgb, var(--metal-hi) 76%, white) 25%, transparent 31% 48%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
.card-btn:hover .fcard .f-art::before, .card-btn:focus-visible .fcard .f-art::before, .fcard.tilting .f-art::before { opacity: .62; background-position: 120% 0, center; }
.fcard.r4 .f-medal, .fcard.r5 .f-medal, .fcard.r6 .f-medal {
  background: radial-gradient(circle at 30% 25%, var(--metal-hi), color-mix(in srgb, var(--rc) 35%, #24202a) 56%, var(--metal-low));
  box-shadow: 0 0 0 .55cqw rgba(13, 10, 15, .88), 0 0 0 1cqw color-mix(in srgb, var(--rc) 74%, #2a2027), 0 0 3cqw var(--metal-glow), inset 0 0 1.2cqw rgba(255,255,255,.34);
}
.fcard.r5::before { animation: rarity-metal-pulse 3.8s ease-in-out infinite; }
.fcard.r6::before { animation: rarity-metal-pulse 2.5s ease-in-out infinite; }
@keyframes rarity-metal-pulse { 50% { filter: brightness(1.2); opacity: .76; } }
@media (prefers-reduced-motion: reduce) {
  .fcard.r5::before, .fcard.r6::before { animation: none; }
  .fcard .f-art::before { transition: none; }
}

/* La feuille foil se révèle au survol, à l'inclinaison et au retournement ; sa teinte suit le rang. */
.fcard.r0 { --foil-strength: .24; --foil-idle: .08; --foil-speed: 1.15s; }
.fcard.r1 { --foil-strength: .34; --foil-idle: .1; --foil-speed: 1.2s; }
.fcard.r2 { --foil-strength: .43; --foil-idle: .12; --foil-speed: 1.25s; }
.fcard.r3 { --foil-strength: .56; --foil-idle: .15; --foil-speed: 1.35s; }
.fcard.r4 { --foil-strength: .68; --foil-idle: .18; --foil-speed: 1.45s; }
.fcard.r5 { --foil-strength: .8; --foil-idle: .22; --foil-speed: 1.6s; }
.fcard.r6 { --foil-strength: .9; --foil-idle: .24; --foil-speed: 1.8s; }
.fcard .f-art::before {
  z-index: 3;
  opacity: var(--foil-idle, .1);
  background-size: 270% 270%, 100% 100%;
  background-position: -95% 0, center;
  transition: opacity .25s ease;
}
.fcard.r0 .f-art::before {
  background-image: linear-gradient(125deg, transparent 18%, rgba(172, 185, 203, .2) 32%, rgba(255, 255, 255, .9) 43%, rgba(161, 175, 192, .28) 49%, transparent 63%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%);
}
.fcard.r1 .f-art::before {
  background-image: linear-gradient(118deg, transparent 15%, rgba(38, 113, 78, .34) 29%, rgba(203, 255, 226, .88) 42%, rgba(75, 184, 122, .36) 51%, transparent 67%), radial-gradient(ellipse at 48% 4%, var(--metal-glow), transparent 68%);
}
.fcard.r2 .f-art::before {
  background-image: linear-gradient(128deg, transparent 14%, rgba(50, 98, 171, .34) 28%, rgba(224, 247, 255, .92) 40%, rgba(94, 169, 255, .48) 51%, transparent 68%), radial-gradient(ellipse at 48% 4%, var(--metal-glow), transparent 68%);
}
.fcard.r3 .f-art::before {
  background-image: linear-gradient(112deg, transparent 10%, rgba(106, 63, 190, .42) 25%, rgba(255, 255, 255, .94) 39%, rgba(104, 214, 255, .66) 48%, rgba(211, 127, 255, .56) 57%, transparent 72%), radial-gradient(ellipse at 50% 4%, var(--metal-glow), transparent 68%);
}
.fcard.r4 .f-art::before {
  background-image: linear-gradient(108deg, transparent 10%, rgba(143, 89, 18, .48) 24%, #fff5d2 37%, #ffd36b 44%, rgba(255, 247, 208, .94) 50%, rgba(203, 143, 37, .5) 58%, transparent 73%), radial-gradient(ellipse at 50% 4%, var(--metal-glow), transparent 68%);
}
.fcard.r5 .f-art::before {
  background-image: linear-gradient(112deg, transparent 5%, rgba(194, 47, 99, .45) 19%, #fff1f7 32%, rgba(255, 106, 149, .8) 39%, rgba(111, 231, 255, .83) 49%, rgba(205, 133, 255, .8) 59%, rgba(255, 224, 146, .62) 68%, transparent 82%), radial-gradient(ellipse at 50% 4%, var(--metal-glow), transparent 68%);
}
.fcard.r6 .f-art::before {
  background-image: repeating-linear-gradient(118deg, transparent 0 14%, rgba(131, 34, 177, .42) 18%, rgba(255, 255, 255, .96) 22%, rgba(255, 67, 179, .72) 26%, rgba(91, 224, 255, .68) 30%, transparent 35% 49%), radial-gradient(ellipse at 50% 4%, var(--metal-glow), transparent 68%);
}
.card-btn:hover .fcard .f-art::before,
.card-btn:focus-visible .fcard .f-art::before,
.card-btn:active .fcard .f-art::before,
.fcard.tilting .f-art::before,
.rc.flipped .fcard .f-art::before,
.detail-card:hover .fcard .f-art::before {
  opacity: var(--foil-strength, .3);
  animation: rarity-foil-pass var(--foil-speed, 1.2s) ease-in-out 1;
}
@keyframes rarity-foil-pass {
  from { background-position: -95% 0, center; }
  to { background-position: 75% 0, center; }
}
.fcard.r4:not(.f-goon)::before, .fcard.r5:not(.f-goon)::before, .fcard.r6:not(.f-goon)::before {
  border-color: color-mix(in srgb, var(--metal-hi) 64%, var(--rc));
  box-shadow: inset 0 0 0 .9cqw rgba(13, 10, 15, .3), inset 0 0 1.5cqw var(--metal-glow), 0 0 3.2cqw var(--metal-glow), 0 0 .8cqw color-mix(in srgb, var(--metal-hi) 65%, transparent);
}
.fcard.r4 .card-r, .fcard.r5 .card-r, .fcard.r6 .card-r {
  border-color: color-mix(in srgb, var(--metal-hi) 78%, var(--rc));
  box-shadow: inset 0 1px rgba(255,255,255,.32), 0 0 .8cqw var(--metal-glow), 0 .7cqw 1.8cqw rgba(0,0,0,.35);
}
@media (prefers-reduced-motion: reduce) {
  .card-btn:hover .fcard .f-art::before,
  .card-btn:focus-visible .fcard .f-art::before,
  .card-btn:active .fcard .f-art::before,
  .fcard.tilting .f-art::before,
  .rc.flipped .fcard .f-art::before,
  .detail-card:hover .fcard .f-art::before { animation: none; }
}

/* Le reflet legacy faisait une barre dure ; la feuille foil gère désormais le reflet de toutes les cartes encadrées. */
.fcard .foil-glint { display: none; }
.fcard.r0 { --foil-strength: .2; --foil-idle: .035; }
.fcard.r1 { --foil-strength: .28; --foil-idle: .045; }
.fcard.r2 { --foil-strength: .36; --foil-idle: .055; }
.fcard.r3 { --foil-strength: .46; --foil-idle: .07; }
.fcard.r4 { --foil-strength: .56; --foil-idle: .085; }
.fcard.r5 { --foil-strength: .68; --foil-idle: .1; }
.fcard.r6 { --foil-strength: .76; --foil-idle: .11; }
.fcard .f-art::before { background-size: 220% 220%, 100% 100%; background-position: -80% 0, center; }
.fcard.r0 .f-art::before { background-image: linear-gradient(118deg, transparent 40%, rgba(174, 188, 204, .25) 46%, rgba(255,255,255,.85) 49%, rgba(165,179,197,.3) 53%, transparent 60%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
.fcard.r1 .f-art::before { background-image: linear-gradient(118deg, transparent 40%, rgba(55,139,94,.32) 46%, rgba(221,255,235,.88) 49%, rgba(68,183,119,.42) 53%, transparent 60%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
.fcard.r2 .f-art::before { background-image: linear-gradient(118deg, transparent 40%, rgba(55,106,181,.35) 46%, rgba(227,248,255,.92) 49%, rgba(86,167,255,.5) 53%, transparent 60%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
.fcard.r3 .f-art::before { background-image: linear-gradient(118deg, transparent 39%, rgba(111,71,192,.38) 45%, rgba(255,255,255,.96) 48%, rgba(106,222,255,.75) 51%, rgba(205,132,255,.52) 55%, transparent 62%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
.fcard.r4 .f-art::before { background-image: linear-gradient(118deg, transparent 39%, rgba(155,100,28,.42) 45%, #fff9e4 48%, #ffd66e 51%, rgba(255,246,210,.92) 54%, transparent 62%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
.fcard.r5 .f-art::before { background-image: linear-gradient(118deg, transparent 38%, rgba(205,54,111,.45) 44%, #fff6fb 47%, rgba(255,111,162,.92) 49%, rgba(121,232,255,.85) 53%, rgba(210,153,255,.75) 56%, transparent 64%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
.fcard.r6 .f-art::before { background-image: linear-gradient(118deg, transparent 36%, rgba(141,48,192,.55) 43%, #fff 46%, rgba(255,79,190,.94) 49%, rgba(93,233,255,.9) 52%, rgba(255,219,126,.85) 56%, transparent 66%), radial-gradient(ellipse at 50% 0%, var(--metal-glow), transparent 68%); }
/* La Mythique Kaïra garde son fond sombre ; on retire les rayons coniques fixes. */
.f-kai.r5 .f-art::after {
  background-image: linear-gradient(180deg, rgba(12, 8, 18, .04) 40%, rgba(12, 8, 18, .2) 62%, rgba(12, 8, 18, .92) 100%);
  background-size: 100% 100%;
  background-position: 0 0;
  mix-blend-mode: normal;
  animation: none;
}

/* Full art : l'illustration couvre toute la carte, les informations se fondent dans un voile bas. */
.fcard:not(.is-designed) .f-art {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
}
.fcard:not(.is-designed) .f-art > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  margin: 0;
  rotate: 0deg;
}
.fcard:not(.is-designed) .f-plate {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  height: 29%;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1.7cqw;
  padding: 0 7cqw 6.4cqw;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 9, 14, .12) 20%, rgba(8, 9, 14, .74) 54%, rgba(8, 9, 14, .96) 100%);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-align: left;
}
.fcard:not(.is-designed) .f-plate::before { display: none; }
.fcard:not(.is-designed) .f-name { text-shadow: 0 .5cqw 1.5cqw rgba(0, 0, 0, .92), 0 1px 2px rgba(0,0,0,.9); }

/* Kaïra Épique et au-dessus : pleine illustration colorée, avec le nom et la rareté posés sur l'image. */
.f-kai.r3 .f-art, .f-kai.r4 .f-art, .f-kai.r5 .f-art { inset: 0; }
.f-kai.r3 .f-art > img, .f-kai.r4 .f-art > img, .f-kai.r5 .f-art > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.f-kai.r3 .f-plate, .f-kai.r4 .f-plate, .f-kai.r5 .f-plate {
  left: 0;
  right: 0;
  height: 27%;
  padding: 0 7cqw 6.4cqw;
  background: linear-gradient(180deg, transparent, rgba(8, 7, 13, .2) 20%, rgba(8, 7, 13, .78) 58%, rgba(8, 7, 13, .96));
}
.f-kai.r3 .f-art::after, .f-kai.r4 .f-art::after, .f-kai.r5 .f-art::after {
  background: linear-gradient(180deg, transparent 50%, rgba(10, 8, 15, .16) 72%, rgba(10, 8, 15, .48));
  background-size: 100% 100%;
  background-position: 0 0;
  mix-blend-mode: normal;
  animation: none;
}
/* Une carte manquante reste grisée, comme dans les autres jeux, même en Épique et au-dessus. */
.f-kai.missing .f-art > img {
  filter: drop-shadow(0 .8cqw 1.8cqw rgba(0, 0, 0, .48)) grayscale(1) brightness(.42);
}
.f-kai.missing .kai-bleed {
  filter: blur(2.6cqw) grayscale(1) brightness(.3);
}

/* Labubuzz de la boîte mystère : la collection de figurines et la boîte, dans la garde-robe. */
.figure-zone { align-items: stretch; text-align: left; }
.figure-zone .inv-group { margin-bottom: .4rem; }
.figure-shop { display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
.figure-shop h3 { align-self: stretch; }
.figure-stage { width: min(100%, 300px); height: 360px; }
.figure-thumb { background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--ft, #c9a6ff) 70%, transparent) 0 52%, transparent 53%), radial-gradient(closest-side, #2b2233, #19141f); }
.figure-thumb[style*="url"] { background-size: contain, auto, cover; background-position: center; background-repeat: no-repeat; }
.figure-thumb b { color: #fff; font: 800 2rem/1 var(--sans, system-ui); text-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.figure-item.is-secret { border-color: color-mix(in srgb, var(--r5) 45%, var(--line)); }
.figure-item.is-secret .ward-src { color: var(--r5); }
.figure-item.is-locked:not(.is-secret) .ward-thumb { filter: grayscale(.85) brightness(.75); }
.figure-pool li .capsule-items span { white-space: nowrap; }
.wardrobe-tabs .tab-figures { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); color: var(--gold); }
.wardrobe-tabs .tab-figures[aria-selected="true"] { color: var(--ink); }
.labubu-actions .btn-mystery { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); color: var(--gold); }

/* Mode test (admins et éditeurs) : une languette sur le bord gauche, à mi-hauteur, pour ne cacher aucun menu. */
.test-banner { position: fixed; left: 0; top: 50%; translate: 0 -50%; z-index: 10000; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .7rem .3rem; padding-left: calc(.3rem + env(safe-area-inset-left, 0px)); border: 1px solid var(--essence); border-left: 0; border-radius: 0 .8rem .8rem 0; background: color-mix(in srgb, var(--ink) 88%, var(--essence)); color: var(--cream); box-shadow: 0 6px 24px rgb(0 0 0 / .35); }
.test-banner strong { writing-mode: vertical-rl; rotate: 180deg; color: var(--essence); letter-spacing: .14em; text-transform: uppercase; font-size: .66rem; white-space: nowrap; }
.test-banner span { display: none; }
.test-banner button { flex: none; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; background: var(--essence); color: var(--ink); font-weight: 700; font-size: .85rem; line-height: 1; cursor: pointer; }
/* Sur téléphone, au-dessus de la barre d'onglets du bas. */
@media (max-width: 760px) { .test-banner { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* iPhone (Safari) : backface-visibility ne suffit pas quand la face a ses propres calques (filtres, animations, inclinaison),
   le dos transparaissait en miroir sur la carte retournée. On cache donc vraiment la face qui n'est pas visible,
   au moment où la carte passe sur la tranche (vers la moitié du retournement). */
.rc-back { visibility: visible; transition: visibility 0s linear 0s; }
.rc-front { visibility: hidden; transition: visibility 0s linear 0s; }
.rc.flipped .rc-back { visibility: hidden; transition-delay: .42s; }
.rc.flipped .rc-front { visibility: visible; transition-delay: .42s; }
.rc.r4.flipped .rc-back, .rc.r4.flipped .rc-front { transition-delay: .52s; }
.rc.r5.flipped .rc-back, .rc.r5.flipped .rc-front { transition-delay: .58s; }
.rc.instant .rc-back, .rc.instant .rc-front { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .rc .rc-back, .rc .rc-front { transition-delay: 0s !important; }
}

/* Choix du booster en deux temps : Kaïra ou Jeux vidéo, puis la licence (remplace la longue rangée de jeux). */
.pick-universe { display: grid; gap: .7rem; width: 100%; }
.stage > .pick-universe { grid-area: switch; justify-self: stretch; margin-bottom: .6rem; order: 0; }
.pu-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pu-tabs button {
  display: flex; align-items: center; gap: .7rem; min-width: 0; min-height: 3.6rem; padding: .55rem .9rem;
  border: 1px solid rgba(245, 239, 224, .1); border-radius: .8rem; background: rgba(245, 239, 224, .025);
  color: #a9adb7; text-align: left; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.pu-tabs button:hover:not([aria-pressed="true"]) { border-color: rgba(245, 239, 224, .22); color: var(--cream); }
.pu-tabs button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--gc) 60%, transparent);
  background: color-mix(in srgb, var(--gc) 10%, transparent);
  color: var(--cream);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gc) 25%, transparent), 0 8px 24px color-mix(in srgb, var(--gc) 12%, transparent);
}
.pu-tabs .gs-icon, .pu-icon { width: 1.9rem; height: 1.9rem; flex: none; color: var(--gc); }
.pu-label { display: grid; gap: .15rem; min-width: 0; margin-right: auto; }
.pu-label strong { font: 750 .95rem/1.1 var(--ui); letter-spacing: .01em; white-space: nowrap; }
.pu-label small { color: #858a95; font: 500 .72rem/1.1 var(--ui); white-space: nowrap; }
.pu-games { display: flex; flex-wrap: wrap; gap: .4rem; }
.pu-games button {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.4rem; padding: 0 .8rem 0 .55rem;
  border: 1px solid rgba(245, 239, 224, .1); border-radius: 999px; background: transparent;
  color: #a9adb7; font: 650 .78rem/1 var(--ui); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.pu-games button:hover:not([aria-pressed="true"]) { color: var(--cream); border-color: rgba(245, 239, 224, .22); }
.pu-games button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--gc) 70%, transparent);
  background: color-mix(in srgb, var(--gc) 14%, transparent);
  color: var(--cream);
}
.pu-games .gs-icon { width: 1.25rem; height: 1.25rem; color: var(--gc); }
.pick-universe .free-badge { min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; font-size: .68rem; }
@media (max-width: 520px) {
  .pu-tabs button { gap: .5rem; min-height: 3.2rem; padding: .5rem .65rem; }
  .pu-tabs .gs-icon, .pu-icon { width: 1.6rem; height: 1.6rem; }
  .pu-label strong { font-size: .86rem; }
  .pu-games button { min-height: 2.2rem; padding: 0 .65rem 0 .45rem; font-size: .74rem; }
}


/* ---------- Garde-robe, nouvelle version ----------
   Plus douce et plus actuelle : onglets en pastilles avec icônes, cartes arrondies en verre dépoli,
   boîte mystère présentée comme une vitrine. Placé en fin de fichier pour passer devant l'ancien style. */
.wardrobe-panel { border-left: 1px solid var(--veil-line); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)); backdrop-filter: blur(18px); }
.wardrobe-tabs { gap: .45rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 0; }
.wardrobe-tabs button { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem .5rem .65rem; border: 1px solid var(--veil-line); border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--muted); font: 600 .84rem/1 var(--ui); letter-spacing: 0; text-transform: none; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.wardrobe-tabs button svg { flex: none; width: 1.05rem; height: 1.05rem; opacity: .85; }
.wardrobe-tabs button:hover { background: rgba(255, 255, 255, .08); color: var(--cream); }
.wardrobe-tabs button[aria-selected="true"] { border-color: transparent; background: var(--cream); color: var(--ink); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .7); }
.wardrobe-tabs button[aria-selected="true"] svg { opacity: 1; }
.wardrobe-tabs button i { position: static; order: 3; width: .42rem; height: .42rem; rotate: none; border-radius: 50%; background: var(--pink); }
.wardrobe-tabs .tab-capsule, .wardrobe-tabs .tab-figures { border-color: color-mix(in srgb, var(--gold) 50%, transparent); color: var(--gold); }
.wardrobe-tabs .tab-figures[aria-selected="true"] { background: linear-gradient(135deg, #f6e2b6, var(--gold)); color: #231909; }
.wardrobe-items { padding: .3rem 1.2rem 1.4rem; }
.wardrobe-note { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.inv-group { margin-bottom: 1.6rem; }
.inv-group h3 { align-items: center; margin: 0 0 .7rem; color: var(--cream); font: 700 1rem/1.2 var(--ui); letter-spacing: 0; text-transform: none; }
.inv-group h3 span { padding: .2rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--muted); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-empty { border: 1px dashed var(--veil-line); border-radius: 16px; background: rgba(255, 255, 255, .02); }
.wardrobe-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: .75rem; }
.ward-item { gap: .35rem; padding: .45rem .45rem .7rem; border: 1px solid var(--veil-line); border-radius: 18px; background: rgba(255, 255, 255, .035); transition: transform .25s var(--ease), border-color .2s, background .2s, box-shadow .25s; }
.ward-item:hover { translate: none; transform: translateY(-3px); border-color: color-mix(in srgb, var(--cream) 22%, transparent); background: rgba(255, 255, 255, .06); }
.ward-item.is-on { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 12%, rgba(255, 255, 255, .03)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 24%, transparent), 0 14px 30px -16px color-mix(in srgb, var(--pink) 80%, #000); }
.ward-thumb { border-radius: 13px; background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .1), rgba(255, 255, 255, .015) 70%); }
.ward-thumb[style*="url"] { background-color: rgba(255, 255, 255, .03); }
.ward-name { padding: .15rem .3rem 0; font-size: .85rem; font-weight: 650; }
.ward-src { align-self: flex-start; margin: 0 .3rem; font-size: .72rem; }
.ward-item.is-shop .ward-src, .ward-item.is-locked .ward-src { padding: .22rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--cream); font-weight: 650; }
.ward-none .ward-thumb { color: color-mix(in srgb, var(--cream) 35%, transparent); }
.swatch { border: 1px solid var(--veil-line); border-radius: 999px; background: rgba(255, 255, 255, .035); }
.swatch.is-on { border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 24%, transparent); }
.frame-item .frame-mini { border-radius: 13px; }
.wardrobe-preview { border-radius: 18px; background: color-mix(in srgb, var(--ink) 70%, transparent); backdrop-filter: blur(14px); }
.wardrobe-foot { border-top: 1px solid var(--veil-line); background: rgba(0, 0, 0, .18); }
.wardrobe-foot .btn { border-radius: 999px; }

/* La boîte mystère, en vitrine. */
.figure-zone { gap: 1.4rem; padding-top: .3rem; }
.figure-shop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.1rem 1.1rem 1.3rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); border-radius: 26px; background: radial-gradient(90% 55% at 50% 42%, rgba(255, 176, 150, .16), transparent 65%), linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 50px -30px #000; text-align: center; }
.figure-shop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; }
.figure-shop-head .eyebrow { margin: 0 0 .25rem; color: var(--gold); }
.figure-shop-head h3 { margin: 0; color: var(--cream); font: italic 700 clamp(1.4rem, 2.4vw, 1.8rem)/1.05 var(--serif); letter-spacing: -.01em; }
.figure-shop-tag { flex: none; padding: .3rem .7rem; border: 1px solid color-mix(in srgb, #f08a5d 60%, transparent); border-radius: 999px; color: #f4a37c; font: 700 .72rem/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.figure-stage { width: 100%; height: clamp(320px, 46vh, 430px); margin: -.4rem 0 -.6rem; }
.figure-stage .capsule-rays { inset: -20%; }
.figure-open { min-width: min(100%, 17rem); border-radius: 999px; }
.figure-shop .wardrobe-note { margin: -.3rem 0 0; }
.figure-odds { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.figure-odds li { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .75rem; border: 1px solid var(--veil-line); border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--muted); font-size: .78rem; }
.figure-odds li b { color: var(--cream); font-weight: 650; }
.figure-odds li em { font-style: normal; font-variant-numeric: tabular-nums; }
.figure-odds li.is-owned b::before { content: "✓ "; color: var(--pink); }
.figure-odds li.is-secret { border-color: color-mix(in srgb, var(--r5) 45%, transparent); background: color-mix(in srgb, var(--r5) 12%, transparent); }
.figure-odds li.is-secret em { color: var(--r5); }
.capsule-result { border-radius: 20px; border-width: 1px; backdrop-filter: blur(12px); }
.capsule-result .ward-thumb { border-radius: 14px; }
.capsule-result .btn { border-radius: 999px; }
.figure-thumb { border-radius: 13px; }

@media (max-width: 900px) {
  .wardrobe-tabs { flex-wrap: nowrap; overflow-x: auto; padding: .7rem 1rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .wardrobe-tabs::-webkit-scrollbar { display: none; }
  .wardrobe-tabs button { flex: none; }
  .wardrobe-items { padding: .2rem 1rem 1.2rem; }
  .wardrobe-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .6rem; }
  .figure-shop { padding: 1rem .9rem 1.1rem; border-radius: 22px; }
}
.wardrobe-wallet { border: 1px solid var(--veil-line); border-radius: 999px; background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px); }
.wardrobe-head .icon-btn { border-radius: 50%; background: rgba(255, 255, 255, .06); }
.wardrobe .labubu-name:focus, .wardrobe .labubu-name:focus-visible { outline: none; border-bottom-color: var(--pink); }

/* La boîte en image pendant que la 3D se prépare, puis fondu vers la 3D. */
.figure-box-poster { position: absolute; left: 50%; top: 50%; z-index: 1; height: 72%; width: auto; translate: -50% -50%; pointer-events: none; transition: opacity .35s ease; animation: poster-float 3.2s ease-in-out infinite; }
@keyframes poster-float { 50% { translate: -50% -53%; } }
.figure-stage .capsule-canvas { opacity: 0; transition: opacity .35s ease; }
.figure-stage.has-3d .capsule-canvas { opacity: 1; }
.figure-stage.has-3d .figure-box-poster { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .figure-box-poster { animation: none; } }

/* Notes de patch : montrées une fois à chaque grosse mise à jour (data/patch-notes.json). */
.patch-notes { text-align: left; }
.patch-notes .eyebrow { margin: 0 0 .45rem; color: var(--pink); }
.patch-notes h2 { margin-bottom: .55rem; }
.patch-notes .welcome-lead { margin-bottom: 1rem; }
.patch-note + .patch-note { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(245, 239, 224, .1); }
.patch-date { margin: 0 0 .3rem; color: var(--muted); font-size: .78rem; letter-spacing: .04em; }
.patch-dot { width: .5rem; height: .5rem; margin-top: .45rem !important; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px color-mix(in srgb, var(--pink) 55%, transparent); }
.patch-notes .welcome-actions { align-items: stretch; margin-top: 1.2rem; }
.patch-notes .welcome-actions .btn { align-self: flex-start; }

/* ---------- Fluidité (tout en bas : ces règles l'emportent sur les précédentes) ---------- */

/* Flou d'arrière-plan à l'intérieur des cartes : avec 72 cartes à l'écran, c'est des centaines de calques flous à
   recalculer à chaque défilement. Les bandeaux ont déjà des fonds presque opaques : le rendu ne change pas. */
.card, .card * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Cinématiques : plus de flou ni de filtre ANIMÉ en plein écran (c'est ce qui saturait les téléphones,
   surtout avec la vidéo par-dessus). Les mêmes entrées se font en fondu et en zoom, bien moins coûteux. */
.moment .moment-backdrop, .moment.contain-moment::after { animation: none !important; }
/* Fond flou : dessiné en petit puis agrandi, le flou coûte vingt fois moins pour le même effet. */
.moment.g-kai.cine.contain-moment .moment-backdrop {
  inset: auto; left: 50%; top: 50%; width: 26vw; height: 26dvh;
  transform: translate(-50%, -50%) scale(4.4);
  filter: blur(7px) brightness(.3) saturate(1.5);
}
.moment.contain-moment::after {
  inset: auto; left: 50%; top: 50%; width: 24vw; height: 24dvh;
  transform: translate(-50%, -50%) scale(4.6);
  filter: blur(6px) brightness(.45) saturate(1.3);
}
.moment.g-kai.cine.contain-moment > img { filter: none; }
.moment-video { contain: strict; }
@keyframes kai-fallback-mythic { 0% { scale: 1.2; opacity: 0; } 20% { opacity: 1; } 100% { scale: 1; opacity: 1; } }
@keyframes kai-fallback-legend { 0% { scale: 1.12; opacity: .1; } 22% { opacity: 1; } 100% { scale: 1; opacity: 1; } }
@keyframes kai-mythic-arrive { from { transform: scale(1.22); opacity: .1; } 58% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes kai-legend-arrive { from { transform: scale(1.18); opacity: .25; } 62% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes cine-pan { 0% { transform: scale(1.32) translate(-2%, 8%); opacity: .35; } 18% { opacity: 1; } 100% { transform: scale(1.04) translate(0, 0); opacity: 1; } }

/* Les sections cachées (autres onglets) ne sont ni mises en page ni dessinées. */
.view[hidden] { display: none !important; }

/* iPhone (appli installée, barre d'état transparente) : la barre du jeu passait sous l'heure, la batterie et l'encoche. */
.topbar { margin-top: calc(.55rem + env(safe-area-inset-top)); }
@media (max-width: 860px) { .topbar { margin-top: calc(.4rem + env(safe-area-inset-top)); } }

/* Les raccourcis (cadeau du jour, pack du jour, palier) restent visibles sur ordinateur aussi :
   le bloc de la récompense du jour a quitté la colonne de l'accueil, c'est désormais le seul accès. */
.perks { display: flex; }
/* Défis : les récompenses à récupérer, toujours en tête de liste. */
.defis-group-title { margin: .4rem 0 .6rem; color: var(--gold); font: 700 .78rem/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.defis-group-title:not(:first-child) { margin-top: 1.4rem; color: var(--muted); }

/* ---------- Logo du site : relief et lumière ---------- */
.wordmark { gap: .8rem; }
.wordmark-logo {
  padding: 2px;
  border-radius: .85rem;
  background: conic-gradient(from 210deg, #ff2d95, #ffb86b, #f5efe0, #8fd0e8, #ff2d95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 6px 18px -6px rgba(255, 45, 149, .55), 0 2px 0 rgba(255, 255, 255, .06) inset;
  rotate: -5deg;
  transition: rotate .35s cubic-bezier(.3, 1.6, .5, 1), scale .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s;
}
.wordmark:hover .wordmark-logo { rotate: 3deg; scale: 1.07; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 10px 26px -6px rgba(255, 45, 149, .75); }
.wordmark-name { display: inline-flex; align-items: baseline; gap: .35rem; font: 900 1.6rem/1 var(--display); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.wordmark-name b {
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff 0%, #f5efe0 45%, #b9b1a2 52%, #efe6d4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(255, 255, 255, .08));
}
.wordmark-name i {
  font: italic 700 1.45rem/1 var(--serif);
  letter-spacing: -.02em;
  text-transform: none;
  background: linear-gradient(100deg, #ff5fae 0%, #ffb86b 55%, #ffe3a3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5));
  padding-right: .1em;
}

/* ---------- Plusieurs boosters : le médaillon ×2, ×5, ×10 ----------
   Une pastille bombée à la couleur du jeu, inclinée, avec un reflet qui passe. */
.pack-count {
  top: -1rem;
  right: -1rem;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .05em;
  min-width: 3.4rem;
  padding: .45rem .75rem .5rem .6rem;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 1rem;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, .55), transparent 45%),
    linear-gradient(160deg, color-mix(in srgb, var(--gc, #c9a86d) 70%, #fff) 0%, var(--gc, #c9a86d) 45%, color-mix(in srgb, var(--gc, #c9a86d) 55%, #000) 100%);
  color: #fff;
  font: 900 1.75rem/1 var(--display);
  letter-spacing: -.01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 12px rgba(0, 0, 0, .25);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--gc, #c9a86d) 80%, #000), 0 0 0 3px rgba(0, 0, 0, .35), inset 0 -3px 0 rgba(0, 0, 0, .18);
  rotate: 8deg;
  animation: badge-pop .5s cubic-bezier(.3, 1.8, .5, 1);
}
.pack-count small { font-size: .62em; font-weight: 800; opacity: .85; }
.pack-count::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 40%;
  rotate: 20deg;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: count-shine 3.2s ease-in-out 1s infinite;
}
@keyframes count-shine { 0%, 70% { translate: 0 0; } 100% { translate: 420% 0; } }
@media (prefers-reduced-motion: reduce) { .pack-count::after { animation: none; display: none; } }

/* Pastille des onglets (défis à récupérer) : une bulle de notification posée sur le coin de l'icône,
   détourée de la couleur de la barre, rose orangé, au lieu d'un gros rectangle doré à côté du mot. */
.tabs a { position: relative; }
.tabs .badge {
  position: relative;
  top: -.45rem;
  left: auto;
  margin-left: -.15rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .3rem;
  border: 2px solid #12151c;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4d8d, #ff9a5a);
  color: #fff;
  font: 800 .6rem/1 var(--ui);
  letter-spacing: 0;
  box-shadow: 0 4px 12px -3px rgba(255, 77, 141, .7);
  box-sizing: content-box;
}
.tabs .badge:not([hidden])::after { border-color: #ff6f8f; }
@media (max-width: 860px) { .tabs .badge { position: absolute; top: .15rem; left: calc(50% + .3rem); margin: 0; } }
.tabs .badge:not([hidden])::after { inset: -2px; }

/* ======================================================================
   Barre du haut, version « dock flottant » (29 octobre 2026).
   Une capsule de verre centrée : le logo, les onglets dans un rail avec une pastille dorée qui glisse
   (.tab-ink, déplacée par moveTabInk), les compteurs en jetons ronds, le bouton Discord à sa couleur.
   Sur téléphone, les onglets restent dans la barre du bas ; seul le haut prend le style du dock.
   Toutes les règles passent par .topbar.dock pour l'emporter sur les couches de styles plus anciennes.
   ====================================================================== */
.topbar.dock {
  width: fit-content;
  max-width: calc(100% - 2rem);
  min-height: 0;
  margin: calc(.7rem + env(safe-area-inset-top)) auto 0;
  padding: .45rem .5rem .45rem .55rem;
  gap: .8rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.topbar.dock::before {
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(40, 44, 58, .78), rgba(18, 21, 29, .86));
  box-shadow: 0 18px 50px -18px #000, 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

/* Logo rond, cerclé de rose ; le nom en deux tons. */
.dock .wordmark { gap: .6rem; padding-right: .2rem; }
.dock .wordmark-logo {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
  background: none;
  rotate: none;
  box-shadow: 0 0 0 2px #ff4d8d, 0 0 0 4px rgba(255, 77, 141, .18), 0 0 18px rgba(255, 77, 141, .45);
  transition: scale .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s;
}
.dock .wordmark:hover .wordmark-logo { rotate: none; scale: 1.08; box-shadow: 0 0 0 2px #ffb86b, 0 0 0 5px rgba(255, 184, 107, .2), 0 0 22px rgba(255, 140, 120, .6); }
.dock .wordmark-name b { font-size: 1.5rem; }
.dock .wordmark-name i { font-size: 1.32rem; }

/* Jetons : énergie (anneau qui se remplit jusqu'à la prochaine) et essence (gemme). */
.dock .wallet { gap: .45rem; }
.dock .pill {
  gap: .5rem;
  height: 2.6rem;
  padding: 0 .85rem 0 .3rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  color: var(--cream);
  transition: background .2s, border-color .2s;
}
.dock .pill:hover { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .09); }
.dock .pill strong { font: 900 1.4rem/1 var(--display); letter-spacing: .01em; }
.dock .pill .pill-label { display: none; }
.dock .pill .pill-timer { color: #8d93a1; font: 600 .7rem/1 var(--ui); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.dock .pill-stock .ring { width: 2rem; height: 2rem; }
.dock .pill-stock .ring svg { width: 100%; height: 100%; }
.dock .ring-bg { stroke: rgba(255, 255, 255, .12); }
.dock .ring-fg { stroke: #ffcf5a; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 207, 90, .6)); }
.dock .pill-stock .ico-energy { width: .58rem; height: .85rem; background: linear-gradient(170deg, #fff4c7, #ffcf5a 55%, #e0902e); }
.dock .pill-essence { padding-left: .3rem; }
.dock .pill-essence .ico-essence {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e6f8ff, #6fcdf0 55%, #2a7ea3);
  clip-path: none;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .25), 0 0 12px rgba(92, 195, 232, .35);
  -webkit-mask: none;
  mask: none;
  position: relative;
}
.dock .pill-essence .ico-essence::after {
  content: "";
  position: absolute;
  inset: 28% 30%;
  background: #fff;
  clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%);
  opacity: .95;
}

/* Connexion : le bleu de Discord, en pastille. Connecté : avatar et pseudo dans un jeton, sortie en icône. */
.dock .account { display: flex; align-items: center; gap: .3rem; }
.dock .account .btn.btn-discord {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.6rem;
  padding: 0 1.1rem 0 .9rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #6b76ff, #5865f2);
  color: #fff;
  font: 700 .88rem/1 var(--ui);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 8px 20px -8px #5865f2, inset 0 1px rgba(255, 255, 255, .25);
  clip-path: none;
}
.dock .account .btn.btn-discord:hover:not(:disabled) { background: linear-gradient(180deg, #7d87ff, #6470ff); }
.dock .discord-ico { width: 1.15rem; height: 1.15rem; }
.dock .account-me { gap: .5rem; height: 2.6rem; padding: 0 .9rem 0 .25rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; background: rgba(255, 255, 255, .055); }
.dock .account-me .avatar { width: 2.05rem; height: 2.05rem; border-radius: 50%; }
.dock .account-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 .88rem/1 var(--ui); }
.account-out { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8d93a1; cursor: pointer; transition: background .2s, color .2s; }
.account-out svg { width: 1.15rem; height: 1.15rem; }
.account-out:hover { background: rgba(255, 255, 255, .08); color: var(--cream); }

/* Ordinateur : les onglets dans un rail creusé, la pastille dorée glisse sous l'onglet ouvert. */
@media (min-width: 861px) {
  .dock .tabs {
    position: relative;
    gap: .1rem;
    padding: .25rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 1px rgba(255, 255, 255, .04);
  }
  .dock .tabs > a, .dock .tab-more > summary {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.5rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: transparent;
    color: #9aa0ad;
    font: 600 .9rem/1 var(--ui);
    letter-spacing: 0;
    text-transform: none;
    transition: color .25s;
  }
  .dock .tabs > a svg { display: block; width: 1.1rem; height: 1.1rem; }
  .dock .tabs > a:hover:not([aria-current="page"]), .dock .tab-more > summary:hover { color: var(--cream); background: transparent; }
  .dock .tabs > a[aria-current="page"] { color: #1d160a; background: transparent; }
  .dock .tabs > a[aria-current="page"] svg { color: #1d160a; opacity: .85; }
  .dock .tabs > a[aria-current="page"]::after { display: none; }
  .dock .tab-more > summary > span:first-child { color: inherit; letter-spacing: .1em; }
  .dock .tab-more > summary > span:last-child { display: none; }
  .dock .tab-more[open] > summary, .dock .tab-more.is-active > summary { background: rgba(255, 255, 255, .08); color: var(--cream); }
  .dock .tab-more-menu { top: calc(100% + .6rem); border-radius: 1rem; background: rgba(22, 25, 34, .96); box-shadow: 0 18px 40px -12px #000; }
  .dock .tab-ink {
    display: block;
    top: .25rem;
    bottom: .25rem;
    left: 0;
    height: auto;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #f6e4be, #c9a86d);
    box-shadow: 0 6px 16px -6px rgba(201, 168, 109, .85), inset 0 1px rgba(255, 255, 255, .6);
  }
  .dock .tabs .badge { top: -.35rem; }
}
/* Écrans moyens : on retire d'abord le nom, puis le minuteur et les icônes des onglets. */
@media (max-width: 1240px) and (min-width: 861px) { .dock .wordmark-name { display: none; } }
@media (max-width: 1060px) and (min-width: 861px) {
  .dock .pill .pill-timer { display: none; }
  .dock .tabs > a svg { display: none; }
  .dock .tabs > a, .dock .tab-more > summary { padding: 0 .8rem; }
  .dock .account .btn.btn-discord span { display: none; }
  .dock .account .btn.btn-discord { padding: 0 .75rem; }
}

/* Téléphone : le haut devient une capsule pleine largeur ; les onglets restent dans la barre du bas. */
@media (max-width: 860px) {
  .topbar.dock { width: calc(100% - 1rem); max-width: none; margin-top: calc(.4rem + env(safe-area-inset-top)); padding: .4rem .45rem .4rem .45rem; gap: .5rem; }
  .dock .wordmark-logo { width: 2.3rem; height: 2.3rem; }
  .dock .wallet { margin-left: auto; gap: .35rem; }
  .dock .pill { height: 2.4rem; padding-right: .7rem; }
  .dock .pill-stock .ring, .dock .pill-essence .ico-essence { width: 1.8rem; height: 1.8rem; }
  .dock .pill strong { font-size: 1.25rem; }
  .dock .account .btn.btn-discord { min-height: 2.4rem; padding: 0 .75rem; }
  .dock .account .btn.btn-discord span { display: none; }
  .dock .account-me { height: 2.4rem; padding-right: .25rem; }
  .dock .account-name { display: none; }
  .dock .wordmark-name { display: none; }
}
@media (max-width: 400px) { .dock .pill .pill-timer { display: none; } }
/* Compagnon qui n'a pas pu se charger : un message à la place de la boîte vide. */
.labubu-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; height: 100%; padding: 1.5rem; text-align: center; color: var(--muted); font-size: .85rem; }
.labubu-error strong { display: block; margin-bottom: .3rem; color: var(--cream); }
/* Bilan d'ouverture : une carte retournée s'agrandit au clic. */
.spread .rc.flipped { cursor: zoom-in; }
/* Bilan d'ouverture : qui cherche les doublons qu'on vient de tirer. */
.wishers { margin-top: .9rem; text-align: left; }
.wishers ul { display: grid; gap: .5rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.wishers li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.wishers-who { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.wishers-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem .2rem .2rem; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--cream); font: inherit; font-size: .78rem; cursor: pointer; }
.wishers-btn:hover { border-color: var(--gold); }
.wishers-btn .avatar { width: 1.5rem; height: 1.5rem; }
/* Boutique : acheter un booster, 5 ou 10. */
.shop-qty { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Révélation vivante : Légendaires et Mythiques LoL et Kaïra (app.js, mountLive) ---------- */
.moment-live { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.moment-live > *, .live-par > *, .live-shine { position: absolute; }
/* Parallaxe : propriété translate à part, elle se combine avec les animations (transform) sans les gêner. */
.live-par { inset: 0; transition: translate .5s cubic-bezier(.2, .7, .3, 1); }
.live-bgpar { translate: calc(var(--px, 0) * 1.2vw) calc(var(--py, 0) * .9vh); }
.live-charpar { translate: calc(var(--px, 0) * -2.4vw) calc(var(--py, 0) * -1.4vh); }

/* Kaïra : le fond maison en grand (dégradé teinté, halo, trame de points), qui respire lentement. */
.live-bg {
  position: absolute; inset: -6%;
  background:
    radial-gradient(ellipse 46% 52% at 50% 40%, color-mix(in srgb, var(--tint) 62%, transparent), transparent 72%),
    radial-gradient(circle, rgba(255, 255, 255, .11) 1.1px, transparent 1.7px) 0 0 / 15px 15px,
    radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--rc) 26%, transparent), transparent 55%),
    linear-gradient(180deg, var(--deep), #09070d 88%);
  animation: live-bg 16s ease-in-out infinite alternate;
}
@keyframes live-bg { to { transform: scale(1.07) translateY(-1.2%); } }
.live-halo {
  left: 50%; top: 44%; width: 110vmin; height: 110vmin; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tint) 46%, transparent), transparent 62%);
  animation: live-halo 4.8s ease-in-out infinite alternate;
}
@keyframes live-halo { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }

/* Le perso : arrive, puis respire (léger gonflement depuis les pieds) et un reflet passe sur lui. */
.live-char { left: 50%; bottom: 0; height: min(94dvh, 148vw, 1400px); translate: -50% 0; transform-origin: 50% 100%;
  animation: live-char-in 1.3s cubic-bezier(.2, .7, .2, 1) both, live-breathe 5.2s ease-in-out 1.3s infinite alternate; }
.live-char > img { display: block; height: 100%; width: auto; max-width: none;
  filter: drop-shadow(0 0 1.6vmin color-mix(in srgb, var(--tint) 70%, transparent)) drop-shadow(0 2.5vmin 5vmin rgba(0, 0, 0, .55)); }
@keyframes live-char-in { from { opacity: 0; scale: 1.1; } 60% { opacity: 1; } to { opacity: 1; scale: 1; } }
@keyframes live-breathe { to { transform: translateY(-.9%) scale(1.014); } }
.live-shine { inset: 0; overflow: hidden;
  -webkit-mask: var(--cut) center / 100% 100% no-repeat; mask: var(--cut) center / 100% 100% no-repeat; }
.live-shine::before { content: ""; position: absolute; inset: -10% 0; width: 60%;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .42) 50%, transparent 80%);
  animation: live-shine 6.5s ease-in-out 1.8s infinite; translate: -120% 0; }
@keyframes live-shine { 0% { translate: -120% 0; } 26%, 100% { translate: 260% 0; } }
/* Écran large : le perso un peu à droite, le nom garde sa place à gauche. */
@media (min-aspect-ratio: 5 / 4) { .live-char, .live-halo, .moment.live.has-cut .live-rays { left: 62%; } }

/* Rayons qui tournent très lentement, derrière le perso (Kaïra) ou par-dessus le splash (LoL). */
.live-rays { left: 50%; top: 40%; width: 170vmax; height: 170vmax; translate: -50% -50%; opacity: .08;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 80%, #fff) 0deg 2.5deg, transparent 2.5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 58%); mask: radial-gradient(circle, #000 8%, transparent 58%);
  animation: live-rays 70s linear infinite; }
.moment.r5 .live-rays { opacity: .12; animation-duration: 44s; }
@keyframes live-rays { to { rotate: 360deg; } }
.moment.live.has-cut .live-rays { z-index: 0; }
.moment.live:not(.has-cut) .live-rays { opacity: .07; }

/* Reflet plein écran (LoL et Kaïra sans détourage). */
.live-sheen { inset: 0; overflow: hidden; }
.moment.live.has-cut .live-sheen { display: none; }
.live-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 35%; rotate: 12deg;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 225, .13), transparent);
  translate: -150% 0; animation: live-sweep 8s ease-in-out 2.4s infinite; }
@keyframes live-sweep { 0% { translate: -150% 0; } 30%, 100% { translate: 420% 0; } }

/* Poussières de lumière qui montent. */
.live-dust { inset: 0; }
.live-dust i { position: absolute; bottom: -4%; border-radius: 50%; background: var(--c); opacity: 0;
  box-shadow: 0 0 6px var(--c), 0 0 14px color-mix(in srgb, var(--c) 60%, transparent);
  animation-name: live-dust; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes live-dust {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .9; }
  80% { opacity: .6; }
  100% { transform: translate(var(--dx), -108vh); opacity: 0; }
}

/* LoL : le splash entre vite, puis dérive en boucle (zoom et glissement lents), avec la parallaxe. */
.moment.live.g-lol.on > img {
  animation: live-lol-in 2.2s cubic-bezier(.2, .7, .2, 1) both, live-lol-drift 18s ease-in-out 2.2s infinite alternate;
  translate: calc(var(--px, 0) * -1.4vw) calc(var(--py, 0) * -1vh);
  transition: translate .5s cubic-bezier(.2, .7, .3, 1);
}
.moment.live.g-lol > img { inset: -3%; width: 106%; height: 106%; }
@keyframes live-lol-in { from { transform: scale(1.24); opacity: .3; } 40% { opacity: 1; } to { transform: scale(1.04); opacity: 1; } }
@keyframes live-lol-drift { from { transform: scale(1.04); } 50% { transform: scale(1.09) translate(-1.2%, -.8%); } to { transform: scale(1.06) translate(1%, .4%); } }
.moment.live.g-lol .moment-live { z-index: 1; }
.moment.live.g-lol .moment-plate { z-index: 5; }

/* Kaïra avec détourage : la scène remplace la carte et son fond flou. */
.moment.live.has-cut > img, .moment.live.has-cut .moment-backdrop { display: none; }
.moment.live.has-cut::after { display: none !important; }
.moment.live.g-kai .moment-plate { z-index: 5; }

/* Kaïra, scène de l'anime : le décor dérive lentement, le perso (détouré de la même image) un peu plus,
   et à l'opposé avec la souris : on sent la profondeur sans voir de doublure. */
.live-scenepar, .live-fgpar { inset: 0; }
.live-scenepar { translate: calc(var(--px, 0) * .35vw) calc(var(--py, 0) * .25vh); }
.live-fgpar { translate: calc(var(--px, 0) * -.7vw) calc(var(--py, 0) * -.45vh); }
.live-scenepar > img, .live-fgpar > img { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none;
  object-fit: cover; object-position: var(--pos); }
.live-scenepar > img { animation: live-scene-in 2.2s cubic-bezier(.2, .7, .2, 1) both, live-scene-drift 20s ease-in-out 2.2s infinite alternate; }
.live-fgpar > img { animation: live-scene-in 2.2s cubic-bezier(.2, .7, .2, 1) both, live-fg-drift 20s ease-in-out 2.2s infinite alternate; }
@keyframes live-scene-in { from { transform: scale(1.16); opacity: .2; } 45% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes live-scene-drift { 50% { transform: scale(1.045) translate(-.8%, -.5%); } to { transform: scale(1.03) translate(.6%, .2%); } }
@keyframes live-fg-drift { 50% { transform: scale(1.06) translate(-1.1%, -.9%); } to { transform: scale(1.04) translate(.8%, 0); } }
.moment.live.has-scene .live-sheen { display: block; }
.moment.live.has-scene .moment-plate { background: linear-gradient(0deg, rgba(5, 7, 11, .9), rgba(5, 7, 11, .45) 45%, transparent),
  linear-gradient(90deg, rgba(5, 7, 11, .55), transparent 55%); }

@media (prefers-reduced-motion: reduce) {
  .moment-live *, .moment-live *::before, .moment.live > img { animation: none !important; }
  .live-dust, .live-shine, .live-sheen { display: none; }
}