/* MoonTik — Alerte cadeau / Top Combo / Carte membre (widget + aperçus). Rendu : static/js/mt_fx.js */
@font-face { font-family: "MT Luckiest"; src: url("/static/fonts/LuckiestGuy-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "MT Bangers"; src: url("/static/fonts/Bangers-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "MT Lilita"; src: url("/static/fonts/LilitaOne-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "MT Pixel"; src: url("/static/fonts/PressStart2P-Regular.ttf") format("truetype"); font-display: block; }

/* contour de texte générique : --ol (épaisseur) / --olc (couleur) */
.acx, .tcx, .cmx { --olc: #0b0b12; }
.ol, .fx-ol { text-shadow:
  var(--ol) 0 0 var(--olc), calc(var(--ol) * -1) 0 0 var(--olc), 0 var(--ol) 0 var(--olc), 0 calc(var(--ol) * -1) 0 var(--olc),
  var(--ol) var(--ol) 0 var(--olc), calc(var(--ol) * -1) var(--ol) 0 var(--olc), var(--ol) calc(var(--ol) * -1) 0 var(--olc), calc(var(--ol) * -1) calc(var(--ol) * -1) 0 var(--olc),
  calc(var(--ol) * .6) calc(var(--ol) * 1.6) 0 var(--olc); }
.fx-glow { filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 14px currentColor); }
.fx-rainbow { background: linear-gradient(90deg,#ff0040,#ffcc00,#00ff66,#00ccff,#cc00ff,#ff0040); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none !important; animation: fxRb 3s linear infinite; }
@keyframes fxRb { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

/* avatar commun (photo ou initiale) */
.acx-av, .tcx-av, .cmx-av { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: #26324a; }
.acx-av img, .tcx-av img, .cmx-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acx-av b, .tcx-av b, .cmx-av b { display: none; color: #fff; font: 1em/1 "MT Luckiest", sans-serif; }
.is-ini b { display: block !important; }

/* =====================================================================  ALERTE CADEAU */
.acx { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; --gift: 110px; --accent: #ff4d6d; color: #fff; }
.acx-parts { position: absolute; left: 50%; top: calc(var(--gift) / 2); width: 0; height: 0; z-index: 1; pointer-events: none; }
.acx-pt { position: absolute; left: calc(var(--gift) / -2); top: calc(var(--gift) / -2); width: var(--gift); height: var(--gift); object-fit: contain; opacity: 0;
  animation: acxBoom 1.5s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes acxBoom {
  0% { transform: translate(0,0) scale(.2) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(var(--rot)); opacity: 0; }
}
.acx-hero { position: relative; z-index: 2; display: grid; place-items: center; }
.acx-gift { width: var(--gift); height: var(--gift); object-fit: contain; position: relative; z-index: 2; }
.acx-combo { position: absolute; z-index: 4; right: -58px; top: -14px; font: 46px/1 "MT Luckiest", sans-serif; color: #fff; --ol: 3px; transform: rotate(-10deg);
  text-shadow: 3px 0 0 #0b0b12, -3px 0 0 #0b0b12, 0 3px 0 #0b0b12, 0 -3px 0 #0b0b12, 3px 3px 0 #0b0b12, -3px 3px 0 #0b0b12, 3px -3px 0 #0b0b12, -3px -3px 0 #0b0b12, 2px 6px 0 #0b0b12; }
.acx-combo.bump { animation: acxBump .35s ease; }
@keyframes acxBump { 0% { scale: 1; } 40% { scale: 1.45; } 100% { scale: 1; } }
.acx-user { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; }
.acx-av { width: 44px; height: 44px; border: 3px solid #fff; font-size: 20px; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.acx-name { font: 30px/1 "MT Luckiest", sans-serif; color: #fff; padding-top: 4px; white-space: nowrap; --ol: 3px; }
.acx-meta { position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; }
.acx-gname { font: 17px/1 "MT Luckiest", sans-serif; color: #ffc21a; padding-top: 3px; --ol: 2px; }
.acx-coin { width: 20px; height: 20px; }
.acx-coins { font: 18px/1 "MT Lilita", sans-serif; color: #ffc21a; --ol: 2px; }
.acx :is(.acx-name, .acx-gname, .acx-coins):not(.fx-rainbow) { text-shadow:
  var(--ol) 0 0 var(--olc), calc(var(--ol) * -1) 0 0 var(--olc), 0 var(--ol) 0 var(--olc), 0 calc(var(--ol) * -1) 0 var(--olc),
  var(--ol) var(--ol) 0 var(--olc), calc(var(--ol) * -1) var(--ol) 0 var(--olc), var(--ol) calc(var(--ol) * -1) 0 var(--olc), calc(var(--ol) * -1) calc(var(--ol) * -1) 0 var(--olc), 0 calc(var(--ol) * 1.8) 0 var(--olc); }
/* Classique : image qui surgit + halo */
.acx-classique .acx-hero::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), color-mix(in srgb, var(--accent) 25%, transparent) 45%, transparent 70%); z-index: 1; }
.acx-classique .acx-gift { filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
/* Contour : médaillon cerclé de blanc */
.acx-medal { width: calc(var(--gift) * 1.18); height: calc(var(--gift) * 1.18); border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 0 rgba(0,0,0,.35); position: relative; z-index: 2; }
.acx-medal .acx-gift { width: calc(var(--gift) * .78); height: calc(var(--gift) * .78); }
.acx-contour .acx-name { font-size: 32px; }
.acx-contour .acx-gname { color: #ffb020; font-size: 19px; }
.acx-contour .acx-coins { color: #fff; font-family: "MT Luckiest", sans-serif; font-size: 19px; padding-top: 3px; }
/* Manga Impact : case encrée */
.acx-manga { flex-direction: row; }
.acx-manga .acx-parts { left: 110px; top: 50%; }
.acx-panel { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; padding: 18px 26px 18px 18px; min-width: 330px; transform: rotate(-3deg);
  background: repeating-conic-gradient(from 0deg at 34% 55%, #f8f4ea 0 5deg, #e8e2d2 5deg 8deg); border-radius: 4px;
  box-shadow: 10px 10px 0 #111, 0 0 0 2px #111; }
.acx-frame { width: 150px; height: 150px; flex: 0 0 auto; background: #fbfaf6; border: 7px solid #111; border-radius: 12px; display: grid; place-items: center; transform: rotate(-4deg); box-shadow: 5px 5px 0 #111; }
.acx-manga .acx-gift { width: 92px; height: 92px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.25)); }
.acx-manga .acx-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.acx-manga .acx-av { width: 40px; height: 40px; border: 3px solid #111; font-size: 18px; box-shadow: none; }
.acx-tag { background: #111; padding: 6px 10px 3px; box-shadow: 4px 0 0 #e11d2e, 4px 4px 0 #e11d2e; transform: rotate(-2deg); }
.acx-manga .acx-name { font: 24px/1 "MT Luckiest", sans-serif; color: #fff; --ol: 0px; padding: 0; }
.acx-manga.no-band .acx-tag { background: none; box-shadow: none; }
.acx-manga.no-band .acx-name { color: #111; }
.acx-manga .acx-gname { font: 38px/1 "MT Bangers", sans-serif; color: #e11d2e; letter-spacing: .02em; text-transform: uppercase; --ol: 2.5px; transform: rotate(-5deg); }
.acx-val { display: flex; align-items: center; gap: 6px; }
.acx-manga .acx-coins { font: 26px/1 "MT Bangers", sans-serif; color: #111; --ol: 0px; }
.acx-manga .acx-combo { right: -26px; top: -28px; font: 54px/1 "MT Bangers", sans-serif; color: #e11d2e; }
/* Sticker : stickers à bord blanc collés un par un */
.acx-sticker { flex-direction: row; align-items: center; gap: 26px; }
.acx-sticker .acx-parts { left: 55px; top: 50%; }
.acx-sticker .acx-gift { filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(3px 5px 2px rgba(0,0,0,.45)); transform: rotate(-8deg); }
.acx-sticker .acx-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; position: relative; z-index: 3; }
.acx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px 6px; border: 4px solid #fff; border-radius: 12px; box-shadow: 3px 5px 0 rgba(0,0,0,.35); position: relative; }
.acx-pill::before { content: ""; position: absolute; left: 8px; top: 5px; width: 10px; height: 5px; border-radius: 4px; background: rgba(255,255,255,.75); transform: rotate(-20deg); }
.acx-sticker .acx-av { width: 46px; height: 46px; border: 4px solid #fff; }
.acx-p-name { background: #fff; transform: rotate(-3deg); }
.acx-p-name::before { background: rgba(0,0,0,.08); }
.acx-sticker .acx-name { font: 26px/1 "MT Lilita", sans-serif; color: #1a1033; --ol: 0px; padding: 0; }
.acx-p-gift { background: #2ee6f0; margin-left: 12px; transform: rotate(2deg); }
.acx-sticker .acx-gname { font: 28px/1 "MT Lilita", sans-serif; color: #10233a; --ol: 0px; padding: 0; }
.acx-p-coins { background: #ff2d55; margin-left: 30px; transform: rotate(-2deg); }
.acx-sticker .acx-coins { font: 26px/1 "MT Lilita", sans-serif; color: #fff; --ol: 0px; }
.acx-sticker .acx-combo { right: -14px; top: -18px; font: 26px/1 "MT Lilita", sans-serif; color: #1a1033; background: #ffd60a; border: 4px solid #fff; border-radius: 12px; padding: 4px 10px 2px; text-shadow: none; box-shadow: 3px 4px 0 rgba(0,0,0,.35); }
/* animations d'entrée */
.acx.is-in .acx-hero, .acx.is-in .acx-frame { animation: acxPop .55s cubic-bezier(.2,1.6,.4,1) both; }
.acx.is-in .acx-user, .acx.is-in .acx-meta { animation: acxUp .45s .15s ease both; }
.acx.is-in .acx-panel { animation: acxSlam .5s cubic-bezier(.2,1.5,.4,1) both; }
.acx-sticker.is-in .acx-side > * { animation: acxStick .4s cubic-bezier(.2,1.6,.4,1) both; }
.acx-sticker.is-in .acx-side > *:nth-child(2) { animation-delay: .18s; }
.acx-sticker.is-in .acx-side > *:nth-child(3) { animation-delay: .36s; }
@keyframes acxPop { 0% { scale: .1; } 70% { scale: 1.15; } 100% { scale: 1; } }
@keyframes acxUp { 0% { opacity: 0; translate: 0 14px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes acxSlam { 0% { scale: 1.6; opacity: 0; } 60% { scale: .95; opacity: 1; } 100% { scale: 1; } }
@keyframes acxStick { 0% { scale: 1.8; opacity: 0; } 100% { scale: 1; opacity: 1; } }

/* =====================================================================  TOP COMBO */
.tcx { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; --accent: #ffc21a; }
.tcx :is(.tcx-label, .tcx-name, .tcx-count, .tcx-gname) { white-space: nowrap; }
.tcx-gift { width: 92px; height: 92px; object-fit: contain; }
.tcx-av { width: 38px; height: 38px; border: 3px solid #fff; font-size: 18px; margin-right: 8px; }
.tcx-who { display: flex; align-items: center; }
.tcx-classique .tcx-label, .tcx-contour .tcx-label { font: 20px/1 "MT Luckiest", sans-serif; text-transform: uppercase; color: #d9d9e3; --ol: 2px; }
.tcx-classique .tcx-name, .tcx-contour .tcx-name { font: 40px/1 "MT Luckiest", sans-serif; text-transform: uppercase; color: #fff; --ol: 3px; padding-top: 6px; }
.tcx-classique .tcx-count, .tcx-contour .tcx-count { font: 26px/1 "MT Luckiest", sans-serif; color: #ffc21a; --ol: 2.5px; }
.tcx :is(.tcx-label, .tcx-name, .tcx-count, .tcx-gname):not(.fx-rainbow) { text-shadow:
  var(--ol, 0) 0 0 var(--olc), calc(var(--ol, 0px) * -1) 0 0 var(--olc), 0 var(--ol, 0) 0 var(--olc), 0 calc(var(--ol, 0px) * -1) 0 var(--olc),
  var(--ol, 0) var(--ol, 0) 0 var(--olc), calc(var(--ol, 0px) * -1) var(--ol, 0) 0 var(--olc), var(--ol, 0) calc(var(--ol, 0px) * -1) 0 var(--olc), calc(var(--ol, 0px) * -1) calc(var(--ol, 0px) * -1) 0 var(--olc), 0 calc(var(--ol, 0px) * 1.8) 0 var(--olc); }
.tcx-classique .tcx-gift { filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.tcx-contour .tcx-label { color: #ffc21a; }
.tcx-medal { width: 104px; height: 104px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 5px 0 rgba(0,0,0,.35); margin: 4px 0; }
.tcx-medal .tcx-gift { width: 68px; height: 68px; }
/* Manga */
.tcx-panel { position: relative; padding: 16px 30px 18px 16px; min-width: 300px; transform: rotate(-3deg);
  background: repeating-conic-gradient(from 0deg at 60% 60%, #f8f4ea 0 5deg, #e6e0d0 5deg 8deg); box-shadow: 9px 9px 0 #111, 0 0 0 2px #111; }
.tcx-panel::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46%; height: 40%; background: radial-gradient(circle, rgba(0,0,0,.28) 1.2px, transparent 1.6px) 0 0/7px 7px; -webkit-mask: linear-gradient(20deg, #000, transparent 70%); mask: linear-gradient(20deg, #000, transparent 70%); pointer-events: none; }
.tcx-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: -34px 0 12px -26px; }
.tcx-tag { display: inline-flex; align-items: center; background: #111; color: #fff; padding: 6px 12px 3px; box-shadow: 4px 4px 0 #e11d2e; border: 2px solid #fff; }
.tcx-tag-l .tcx-label { font: 18px/1 "MT Bangers", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.tcx-tag-n { border-color: #e11d2e; }
.tcx-tag-n .tcx-name { font: 26px/1 "MT Luckiest", sans-serif; text-transform: uppercase; }
.tcx-manga .tcx-av { width: 30px; height: 30px; border-width: 2px; }
.tcx-row { display: flex; align-items: center; gap: 16px; }
.tcx-frame { width: 120px; height: 120px; display: grid; place-items: center; background: #fbfaf6; border: 6px solid #111; border-radius: 10px; transform: rotate(-3deg); box-shadow: 5px 5px 0 #111; }
.tcx-manga .tcx-gift { width: 80px; height: 80px; }
.tcx-side { display: flex; flex-direction: column; align-items: flex-start; }
.tcx-manga .tcx-gname { font: 22px/1 "MT Luckiest", sans-serif; text-transform: uppercase; color: #111; }
.tcx-manga .tcx-count { font: 56px/1 "MT Bangers", sans-serif; color: #e11d2e; --ol: 2.5px; transform: rotate(-6deg); }
/* Sticker */
.tcx-sticker { align-items: flex-start; gap: 10px; }
.tcx-pill { display: inline-flex; align-items: center; gap: 8px; border: 4px solid #fff; border-radius: 12px; padding: 7px 16px 5px; box-shadow: 3px 5px 0 rgba(0,0,0,.35); position: relative; }
.tcx-pill::before { content: ""; position: absolute; left: 8px; top: 5px; width: 10px; height: 5px; border-radius: 4px; background: rgba(255,255,255,.75); transform: rotate(-20deg); }
.tcx-p-label { background: #ff2d55; transform: rotate(-3deg); }
.tcx-p-label .tcx-label { font: 18px/1 "MT Lilita", sans-serif; text-transform: uppercase; color: #fff; }
.tcx-p-name { background: #fff; margin-left: 6px; transform: rotate(1deg); }
.tcx-p-name::before { background: rgba(0,0,0,.08); }
.tcx-p-name .tcx-name { font: 24px/1 "MT Lilita", sans-serif; color: #1a1033; }
.tcx-sticker .tcx-row { gap: 34px; margin-top: 4px; }
.tcx-sticker .tcx-gift { width: 76px; height: 76px; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(2px 4px 2px rgba(0,0,0,.4)); transform: rotate(-6deg); }
.tcx-p-gift { background: #2ee6f0; padding: 10px 20px 8px; transform: rotate(-2deg); }
.tcx-p-gift .tcx-gname { font: 30px/1 "MT Lilita", sans-serif; color: #10233a; }
.tcx-p-gift .tcx-count { font: 32px/1 "MT Lilita", sans-serif; color: #fff; --ol: 2px; }
.tcx-sticker .tcx-av { width: 30px; height: 30px; border: 2px solid #1a1033; margin-right: 2px; }

/* =====================================================================  CARTE MEMBRE */
.cmx { position: relative; color: #111; --accent: #ff2d55; }
.cmx :is(.cmx-name) { white-space: nowrap; }
/* Carte à collectionner */
.cmx-collection { width: 300px; padding: 12px 14px 10px; border-radius: 16px; border: 9px solid #e7b94c; overflow: hidden;
  background: linear-gradient(160deg, #a8d8ff 0%, #c6c9ff 40%, #e2c3f5 70%, #ffd3e6 100%); box-shadow: 0 0 0 2px #9a7420, 0 14px 30px rgba(0,0,0,.5); font-family: "Segoe UI", system-ui, sans-serif; }
.cmx-holo { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,255,255,.45) 18px 21px, transparent 21px 40px); animation: cmxHolo 6s linear infinite; pointer-events: none; }
@keyframes cmxHolo { from { background-position: 0 0; } to { background-position: 200px 0; } }
.cmx-collection > * { position: relative; }
.cmx-badge { display: inline-block; font: 800 10px/1 "Segoe UI", sans-serif; letter-spacing: .1em; text-transform: uppercase; background: #fff; border: 2px solid #111; border-radius: 4px; padding: 3px 8px; }
.cmx-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 8px; }
.cmx-collection .cmx-name { font: 900 26px/1 "Segoe UI", system-ui, sans-serif; color: #111; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.cmx-rk { display: flex; align-items: center; gap: 5px; }
.cmx-rk small { font: 900 9px/1 "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.cmx-rk b { font: 36px/1 "MT Bangers", sans-serif; color: #e11d2e; }
.cmx-orb { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd2a8, #f2705a 60%, #c2410c); box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.cmx-photo { border: 5px solid #d9a73a; box-shadow: 0 0 0 1px #8a6418; height: 150px; display: grid; background: linear-gradient(#3b6aa3, #1d3e6b); }
.cmx-collection .cmx-av { width: 100%; height: 100%; border-radius: 0; background: transparent; font-size: 80px; }
.cmx-collection .cmx-av b { font-family: "MT Bangers", sans-serif; }
.cmx-strip { display: flex; justify-content: space-between; background: rgba(255,255,255,.85); margin: 0 4px 6px; padding: 3px 8px; font: 800 8px/1 "Segoe UI", sans-serif; text-transform: uppercase; }
.cmx-stat { display: flex; align-items: center; gap: 10px; padding: 6px 6px; }
.cmx-ic { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; }
.cmx-ic-coin { background: radial-gradient(circle at 40% 35%, #ffe08a, #d79a12); box-shadow: inset 0 0 0 2px #b77d0a; }
.cmx-ic-like { background: radial-gradient(circle at 40% 35%, #ffd0e0, #f05a8a); }
.cmx-lbl { flex: 1; font: 800 14px/1 "Segoe UI", sans-serif; }
.cmx-collection .cmx-stat b { font: 34px/1 "MT Bangers", sans-serif; letter-spacing: .01em; color: #1a1a1a; }
.cmx-lr { font: 12px/1 "MT Luckiest", sans-serif; font-style: normal; color: #fff; background: #ec4f8a; border-radius: 999px; padding: 4px 9px 2px; }
.cmx-collection .cmx-lr { margin-right: 8px; }
.cmx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: rgba(255,255,255,.75); padding: 6px 8px; margin: 4px 0 8px; }
.cmx-grid small { display: block; font: 800 7px/1.1 "Segoe UI", sans-serif; text-transform: uppercase; color: #444; }
.cmx-grid span { font: 13px/1.2 "MT Bangers", sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.cmx-foot { display: flex; justify-content: space-between; align-items: center; font: 800 9px/1 "Segoe UI", sans-serif; }
.cmx-dots { color: #e11d48; letter-spacing: 2px; font-size: 8px; }
/* commun Contour / Manga / Sticker */
.cmx-contour, .cmx-sticker, .cmx-manga { width: 240px; padding: 20px 20px 16px; border-radius: 14px; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cmx-avwrap { position: relative; width: 120px; height: 120px; margin-bottom: 4px; }
.cmx-avwrap .cmx-av { width: 120px; height: 120px; font-size: 52px; }
.cmx-rank { position: absolute; right: -16px; bottom: -6px; width: 62px; height: 62px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cmx-rank b { font: 26px/1 "MT Luckiest", sans-serif; }
.cmx-rank small { font: 7px/1 "MT Luckiest", sans-serif; text-transform: uppercase; }
.cmx-st { align-self: stretch; display: flex; align-items: center; gap: 8px; }
.cmx-st .cmx-lr { margin-left: auto; }
.cmx-l { text-transform: uppercase; }
.cmx-lives { text-transform: uppercase; }
/* Contour */
.cmx-contour { box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.cmx-contour .cmx-av { background: #1f2638; border: 7px solid #111; }
.cmx-contour .cmx-av b { font-family: "MT Luckiest", sans-serif; }
.cmx-contour .cmx-rank { background: #fff; border: 4px solid #111; box-shadow: 0 3px 0 #111; }
.cmx-contour .cmx-rank small { font-size: 6px; }
.cmx-contour .cmx-name { font: 30px/1 "MT Luckiest", sans-serif; color: #fff; --ol: 2.5px; padding-top: 4px; }
.cmx-contour .cmx-v, .cmx-contour .cmx-lives b { font: 28px/1 "MT Luckiest", sans-serif; color: #ffc21a; --ol: 2px; padding-top: 4px; }
.cmx-contour .cmx-l, .cmx-contour .cmx-lives { font: 13px/1 "MT Luckiest", sans-serif; color: #111; }
.cmx-contour .cmx-lr { border: 3px solid #111; box-shadow: 0 3px 0 #111; background: #e8457f; }
.cmx-contour hr { align-self: stretch; border: 0; border-top: 3px solid #111; margin: 6px 0 2px; }
.cmx-contour .cmx-lives b { font-size: 22px; }
.cmx :is(.cmx-name, .cmx-v, .cmx-lives b):not(.fx-rainbow) { text-shadow:
  var(--ol, 0) 0 0 var(--olc), calc(var(--ol, 0px) * -1) 0 0 var(--olc), 0 var(--ol, 0) 0 var(--olc), 0 calc(var(--ol, 0px) * -1) 0 var(--olc),
  var(--ol, 0) var(--ol, 0) 0 var(--olc), calc(var(--ol, 0px) * -1) var(--ol, 0) 0 var(--olc), var(--ol, 0) calc(var(--ol, 0px) * -1) 0 var(--olc), calc(var(--ol, 0px) * -1) calc(var(--ol, 0px) * -1) 0 var(--olc), 0 calc(var(--ol, 0px) * 1.6) 0 var(--olc); }
/* Manga */
.cmx-manga { border-radius: 4px; transform: rotate(-3deg); align-items: flex-start; padding: 24px 22px 18px; background: repeating-conic-gradient(from 0deg at 70% 15%, #f8f4ea 0 5deg, #e6e0d0 5deg 8deg); box-shadow: 9px 9px 0 #111, 0 0 0 2px #111; }
.cmx-manga .cmx-badge { position: absolute; left: 12px; top: -12px; background: #111; color: #fff; border: 0; border-radius: 0; font: 15px/1 "MT Luckiest", sans-serif; padding: 6px 12px 3px; box-shadow: 4px 4px 0 #e11d2e; letter-spacing: 0; }
.cmx-manga .cmx-rank { right: -26px; top: -30px; bottom: auto; width: 92px; height: 92px; border-radius: 0; background: #111; color: #fff;
  clip-path: polygon(50% 0%, 61% 12%, 77% 6%, 80% 22%, 96% 26%, 89% 41%, 100% 54%, 88% 64%, 92% 81%, 75% 82%, 67% 97%, 52% 88%, 37% 100%, 30% 84%, 12% 86%, 14% 69%, 0% 58%, 10% 45%, 2% 29%, 19% 24%, 21% 7%, 37% 13%); }
.cmx-manga .cmx-rank b { font: 34px/1 "MT Luckiest", sans-serif; }
.cmx-manga .cmx-rank small { font-size: 7px; }
.cmx-manga .cmx-photo { align-self: center; width: 130px; height: 130px; border: 5px solid #111; border-radius: 10px; overflow: hidden; box-shadow: 4px 4px 0 #e11d2e; background: #26324a; margin: 6px 0 8px; }
.cmx-manga .cmx-photo .cmx-av { width: 100%; height: 100%; border-radius: 0; font-size: 56px; }
.cmx-manga .cmx-tag { background: #111; padding: 7px 12px 4px; box-shadow: 4px 4px 0 #e11d2e; }
.cmx-manga .cmx-name { font: 22px/1 "MT Luckiest", sans-serif; color: #fff; }
.cmx-manga .cmx-v, .cmx-manga .cmx-lives b { font: 36px/1 "MT Bangers", sans-serif; color: #e11d2e; --ol: 2px; }
.cmx-manga .cmx-l, .cmx-manga .cmx-lives { font: 12px/1 "MT Luckiest", sans-serif; color: #111; }
.cmx-manga .cmx-lr { border-radius: 0; background: #e8457f; border: 3px solid #111; box-shadow: 3px 3px 0 #111; }
.cmx-manga .cmx-lives { margin-top: 6px; }
.cmx-manga .cmx-lives b { font-size: 26px; }
/* Sticker */
.cmx-sticker { box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.cmx-sticker .cmx-av { background: #ff2d55; border: 6px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.cmx-sticker .cmx-av b { font-family: "MT Lilita", sans-serif; }
.cmx-sticker .cmx-rank { background: #ff2d55; color: #fff; border: 4px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.cmx-sticker .cmx-rank b { font-family: "MT Lilita", sans-serif; }
.cmx-sticker .cmx-tag { background: #16131f; color: #fff; padding: 7px 14px 5px; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 3px 6px rgba(0,0,0,.35); }
.cmx-sticker .cmx-name { font: 22px/1 "MT Lilita", sans-serif; }
.cmx-sticker .cmx-st { gap: 14px; }
.cmx-sticker .cmx-v { font: 24px/1 "MT Lilita", sans-serif; color: #10233a; background: #2ee6f0; border: 4px solid #fff; border-radius: 10px; padding: 8px 14px 6px; box-shadow: 0 3px 6px rgba(0,0,0,.3); }
.cmx-sticker .cmx-l { font: 12px/1 "MT Luckiest", sans-serif; color: #111; }
.cmx-sticker .cmx-lr { border-radius: 8px; background: #e8457f; border: 3px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3); }
.cmx-sticker .cmx-lives { font: 12px/1 "MT Luckiest", sans-serif; background: #fff; border-radius: 10px; padding: 10px 18px 7px; box-shadow: 0 3px 8px rgba(0,0,0,.25); margin-top: 6px; }
.cmx-sticker .cmx-lives b { font: 18px/1 "MT Lilita", sans-serif; }
.cmx.is-in { animation: cmxIn .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes cmxIn { 0% { opacity: 0; scale: .6; } 100% { opacity: 1; scale: 1; } }

/* aperçus galerie : mise à l'échelle */
.fx-prev { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fx-prev > .fx-scale { flex: none; }
.fx-prev > .fx-scale { transform-origin: center; display: grid; place-items: center; transform: scale(var(--fxs, .8)); }
.ov-cat-preview .fx-prev-alert { --fxs: .62 !important; }
.ov-cat-preview .fx-prev-alert:has(.acx-manga, .acx-sticker) { --fxs: .5 !important; }
.ov-cat-preview .fx-prev-combo { --fxs: .62 !important; }
.ov-cat-preview .fx-prev-card { --fxs: .5 !important; }
.ov-cat-preview .fx-prev-card:has(.cmx-collection) { --fxs: .42 !important; }
.acx-pt.loop { animation: acxBoomLoop 2.4s cubic-bezier(.15,.7,.3,1) infinite; }
@keyframes acxBoomLoop {
  0% { transform: translate(0,0) scale(.2) rotate(0); opacity: 0; }
  6% { opacity: 1; }
  55% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(var(--rot)); opacity: 1; }
  75%, 100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(var(--rot)); opacity: 0; }
}

/* =====================================================================  BANDEAU DÉFILANT */
.bdx { --h: 44px; display: flex; align-items: stretch; height: var(--h); width: 100%; max-width: 100%; position: relative; font: 800 21px/1 "Segoe UI", system-ui, sans-serif; color: #fff; box-sizing: border-box; }
.bdx-live { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 18px 0 14px; font: 800 12px/1 "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; position: relative; z-index: 2; }
.bdx-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: bdxPulse 1.2s ease-in-out infinite; }
@keyframes bdxPulse { 50% { opacity: .35; } }
.bdx-track { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; -webkit-mask: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 24px), transparent); }
.bdx-run { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; animation: bdxRun 20s linear infinite; will-change: transform; }
@keyframes bdxRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bdx-hl, .bdx-msg { display: inline-flex; align-items: center; padding: 6px 12px 5px; }
.bdx-sep { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; font-size: .8em; }
.bdx-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff2d55; display: inline-block; }
/* Classique */
.bdx-classique { background: #11121a; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 8px 22px rgba(0,0,0,.4); overflow: hidden; }
.bdx-classique .bdx-live { background: #ff2d55; color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-right: 26px; margin-right: -8px; }
.bdx-classique .bdx-hl { background: #ff2d55; border-radius: 6px; color: #fff; }
.bdx-classique .bdx-msg { color: #fff; }
/* Chantier */
.bdx-chantier { --h: 52px; background: #ffd000; transform: rotate(-2deg); box-shadow: 0 6px 14px rgba(0,0,0,.5); padding: 9px 0; }
.bdx-chantier::before, .bdx-chantier::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, #111 0 16px, transparent 16px 26px); }
.bdx-chantier::before { top: 2px; } .bdx-chantier::after { bottom: 2px; }
.bdx-chantier .bdx-track { -webkit-mask: none; mask: none; }
.bdx-chantier :is(.bdx-hl, .bdx-msg) { font: 26px/1 "MT Bangers", Impact, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.bdx-chantier .bdx-hl { background: #111; color: #ffd000; }
.bdx-chantier .bdx-msg { color: #111; }
.bdx-chantier .bdx-sep { color: #111; font-size: 22px; }
/* Sport */
.bdx-sport { background: linear-gradient(90deg, #5b21d6, #7c3aed 70%, #5b21d6); transform: skewX(-14deg); box-shadow: 5px 5px 0 rgba(0,0,0,.4); }
.bdx-sport::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 4px, transparent 4px 10px); }
.bdx-sport .bdx-live { background: linear-gradient(#ffffff, #e5e7eb); color: #3f3f46; padding: 0 22px; }
.bdx-sport .bdx-live i { display: none; }
.bdx-sport .bdx-track { -webkit-mask: none; mask: none; }
.bdx-sport :is(.bdx-hl, .bdx-msg) { font: italic 900 21px/1 "Segoe UI", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.bdx-sport .bdx-hl { background: #fff; color: #6d28d9; }
.bdx-sport .bdx-msg { color: #fff; }
.bdx-sport .bdx-sep { color: #fff; font: italic 900 18px/1 "Segoe UI", sans-serif; opacity: .85; }
/* Contour */
.bdx-contour { background: transparent; }
.bdx-contour :is(.bdx-hl, .bdx-msg) { font: 28px/1 "MT Luckiest", sans-serif; color: #fff; padding-top: 9px; --ol: 2.5px; --olc: #0b0b12;
  text-shadow: 2.5px 0 0 #0b0b12, -2.5px 0 0 #0b0b12, 0 2.5px 0 #0b0b12, 0 -2.5px 0 #0b0b12, 2.5px 2.5px 0 #0b0b12, -2.5px 2.5px 0 #0b0b12, 2.5px -2.5px 0 #0b0b12, -2.5px -2.5px 0 #0b0b12, 1px 5px 0 #0b0b12; }
.bdx-contour .bdx-sep { color: #ffc21a; font-size: 24px; text-shadow: 0 2px 0 #0b0b12; }
.bdx-contour .bdx-track { -webkit-mask: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent); mask: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent); }
/* Manga */
.bdx-manga { --h: 50px; background-color: #fbfaf6; background-image: radial-gradient(circle, rgba(0,0,0,.16) 1.1px, transparent 1.5px); background-size: 6px 6px; border: 3px solid #111; box-shadow: 5px 5px 0 #111; transform: rotate(-1deg); padding: 0 4px; }
.bdx-manga :is(.bdx-hl, .bdx-msg) { font: italic 27px/1 "MT Bangers", Impact, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.bdx-manga .bdx-hl { background: #e11d2e; color: #fff; transform: skewX(-6deg); box-shadow: 3px 3px 0 #111; }
.bdx-manga .bdx-msg { color: #111; }
.bdx-manga .bdx-sep { color: #e11d2e; font-size: 26px; text-shadow: 0 0 1px #111; }
/* Sticker */
.bdx-sticker { --h: 46px; background: #fff; border-radius: 999px; border: 3px solid #d7d7de; box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.3); padding: 0 6px; }
.bdx-sticker .bdx-track { -webkit-mask: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent); mask: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent); }
.bdx-sticker :is(.bdx-hl, .bdx-msg) { font: 22px/1 "MT Lilita", sans-serif; }
.bdx-sticker .bdx-hl { background: #2ee6f0; color: #10233a; border-radius: 999px; padding: 7px 16px 6px; }
.bdx-sticker .bdx-msg { color: #ff2d55; }
.bdx-sticker .bdx-sep { color: #2ee6f0; font-size: 22px; }
/* Pixel */
.bdx-pixel { gap: 8px; background: transparent; }
.bdx-pixel .bdx-live { background: #ff2d55; color: #fff; font: 9px/1 "MT Pixel", monospace; letter-spacing: 0; padding: 0 12px; box-shadow: 0 0 0 3px #a3123a inset; }
.bdx-pixel .bdx-live i { display: none; }
.bdx-pixel .bdx-track { background: #1c1838; box-shadow: 0 -3px 0 #3a3470, 0 3px 0 #0b0920, 3px 0 0 #3a3470, -3px 0 0 #3a3470; -webkit-mask: none; mask: none; }
.bdx-pixel :is(.bdx-hl, .bdx-msg) { font: 13px/1 "MT Pixel", monospace; padding: 8px 10px 7px; }
.bdx-pixel .bdx-hl { background: #ff2d55; color: #fff; box-shadow: 0 0 0 2px #a3123a inset; }
.bdx-pixel .bdx-msg { color: #fff; }
.bdx-pixel .bdx-sep { color: #ff2d55; font-size: 14px; }
.bdx-pixel .bdx-run { animation-timing-function: steps(240, end); }
/* aperçu galerie */
.ov-cat-preview .fx-prev-ticker { --fxs: .5 !important; }
.fx-prev-ticker > .fx-scale { width: calc(100% / var(--fxs, .8)); }
.fx-prev-ticker > .fx-scale { display: block; }
.fx-prev-ticker .bdx { width: 92%; margin: 0 auto; }
.bdx { min-width: 0; overflow: visible; }
.bdx-track { contain: inline-size; }
.ov-cat-preview .bdx-run { animation-play-state: paused; animation-delay: -0.4s; }
.ov-cat-card:hover .ov-cat-preview .bdx-run { animation-play-state: running; }

.acx-sticker .acx-hero { position: relative; }
.acx-trail { position: absolute; left: 70%; top: 20%; display: flex; pointer-events: none; z-index: 0; }
.acx-trail img { width: 28px; height: 28px; object-fit: contain; opacity: calc(0.7 - var(--i) * 0.15); transform: translate(calc(var(--i) * 16px), calc(var(--i) * 10px)) rotate(-12deg); filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }