/* ==================================================================
   theme.css, l'identité visuelle.

   Elle part du logo : des formes de bonbon brillantes cernées d'un
   trait sombre, un dégradé magenta vers cyan, des éclats dorés. Un jeu
   de collection se reconnaît d'abord à ça : des boutons qu'on a envie
   d'enfoncer, des chiffres qui claquent, un or qui promet quelque chose.

   Règle de coût : tout ce qui bouge ici bouge en transformation ou en
   opacité. Les dégradés, reliefs et lueurs sont posés une fois, jamais
   animés.
   ================================================================== */

/* Lilita One, hébergée ici (licence SIL Open Font) : 12 Ko, et pas de
   requête vers un service tiers à chaque visite. */
@font-face {
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/lilita-one-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/lilita-one-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF;
}

:root {
  --pink:   #ff3ec8;
  --cyan:   #34e1ff;
  --violet: #8b4dff;
  --gold:   #ffd24a;
  --gold-2: #ff9f1c;
  --navy:   #140e33;
  --accent: #b44dff;
  --accent-2: #34e1ff;
  --font-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --bg: #0a0720;
  --bg-2: #120b30;
  --line: rgba(190, 160, 255, .12);
  --line-2: rgba(200, 175, 255, .22);
  --panel: rgba(120, 90, 220, .07);
  --panel-2: rgba(140, 110, 240, .12);
}

/* ------------------------------ le fond ------------------------------
   Une nébuleuse magenta et cyan, et un semis d'étoiles fixe. Le tout est
   peint une fois dans son propre calque et ne bouge jamais. */
body::before {
  background:
    radial-gradient(900px 640px at 12% -6%, rgba(255, 62, 200, .20), transparent 62%),
    radial-gradient(820px 600px at 92% 6%, rgba(52, 225, 255, .16), transparent 60%),
    radial-gradient(1200px 800px at 50% 115%, rgba(139, 77, 255, .22), transparent 66%),
    linear-gradient(180deg, #120b30, #0a0720 55%, #07051a);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 140px 90px, rgba(255,255,255,.8), transparent),
    radial-gradient(1.4px 1.4px at 260px 160px, #ffe7a3, transparent),
    radial-gradient(1px 1px at 80px 210px, rgba(170,230,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 310px 40px, rgba(255,190,240,.9), transparent);
  background-size: 340px 240px;
}

/* ---------------------------- la typographie ---------------------------- */

.page-head h1,
.shop-name,
.carousel-head h2,
.haul-head h2,
.dbzp-box h2,
.detail-id h2,
.empty h2,
.tour-bubble h2,
.auth h1,
.auth-brand {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .005em;
}
.page-head h1 {
  font-size: clamp(30px, 5vw, 44px);
  background: linear-gradient(180deg, #fff 20%, #f5c8ff 60%, #b99aff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(20, 14, 51, .9));
}
.fx-lite .page-head h1 { filter: none; text-shadow: none; }

.kpi b, .dbzp-balance b, .dbzpack-n, .me-id b, .lot-price {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .01em;
}

/* ------------------------------ les boutons ------------------------------
   Des bonbons : un dégradé vertical, un reflet en haut, une tranche plus
   sombre dessous qui donne l'épaisseur. On l'enfonce en le descendant de
   la hauteur de sa tranche. */

.btn {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .02em;
  padding: 11px 24px 12px;
  border-radius: 16px;
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), filter .2s;
}
.btn:active { transform: translateY(3px) scale(.99); }

.btn-primary {
  color: #fff;
  border: 2px solid rgba(20, 14, 51, .85);
  background: linear-gradient(180deg, #ff7be0 0%, #d23cf2 45%, #8b4dff 100%);
  text-shadow: 0 2px 0 rgba(70, 20, 110, .55);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 0 rgba(60, 10, 120, .35),
    0 4px 0 #3c1778,
    0 12px 26px -10px rgba(210, 60, 242, .9);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .6),
    inset 0 -3px 0 rgba(60, 10, 120, .35),
    0 5px 0 #3c1778,
    0 16px 30px -10px rgba(210, 60, 242, 1);
}
.btn-primary:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(60, 10, 120, .35),
    0 1px 0 #3c1778,
    0 6px 16px -8px rgba(210, 60, 242, .9);
}

.btn-ghost {
  color: #efe8ff;
  border: 2px solid rgba(20, 14, 51, .85);
  background: linear-gradient(180deg, #3a2f6e, #261d52);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .16),
    0 4px 0 #120c2c,
    0 10px 20px -12px rgba(0, 0, 0, .9);
}
.btn-ghost:hover { background: linear-gradient(180deg, #463a82, #2e2462); }
.btn-ghost:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 1px 0 #120c2c; }

.btn-danger {
  border: 2px solid rgba(20, 14, 51, .85);
  background: linear-gradient(180deg, #ff7a93, #ff3d6e 50%, #c81e4a);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 #6b0f2a, 0 12px 24px -12px rgba(255, 61, 110, .9);
  text-shadow: 0 2px 0 rgba(100, 10, 40, .5);
}

/* Le bouton qui compte : ouvrir un booster. Il est en or. */
.btn-open {
  color: #3a1d00;
  font-size: 19px;
  padding: 13px 30px 14px;
  border: 2px solid rgba(20, 14, 51, .9);
  background: linear-gradient(180deg, #fff3a8 0%, #ffd24a 38%, #ff9f1c 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .8),
    inset 0 -3px 0 rgba(170, 70, 0, .35),
    0 5px 0 #9a4a00,
    0 14px 34px -10px rgba(255, 170, 40, .95);
}
.btn-open:hover {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .85),
    inset 0 -3px 0 rgba(170, 70, 0, .35),
    0 6px 0 #9a4a00,
    0 18px 40px -10px rgba(255, 170, 40, 1);
}
.btn-open:active {
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 2px 0 #9a4a00, 0 6px 16px -8px rgba(255,170,40,.9);
}
.btn-open .cost { background: rgba(80, 30, 0, .18); color: #3a1d00; }
.btn-open .cost .i { color: #7a3a00; }
.btn-open.is-prem .cost .i { color: #7a3a00; }

/* le reflet qui passe sur le bouton d'ouverture, de temps en temps */
.btn-open { position: relative; overflow: hidden; isolation: isolate; }
.btn-open::after {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%;
  left: 0;
  width: 40%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: btn-shine 3.6s var(--ease-out) 1.2s infinite;
}
@keyframes btn-shine {
  0%, 62% { transform: translateX(-160%) skewX(-18deg); }
  100%    { transform: translateX(360%) skewX(-18deg); }
}
.btn-open.is-locked::after, .fx-lite .btn-open::after { animation: none; opacity: 0; }

.btn-ten {
  color: #fff;
  border: 2px solid rgba(20, 14, 51, .85);
  background: linear-gradient(180deg, #7ad8ff, #3a8dff 50%, #5b3dff);
  text-shadow: 0 2px 0 rgba(20, 30, 110, .5);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 0 rgba(20, 20, 110, .3),
    0 4px 0 #1d2474,
    0 12px 26px -12px rgba(58, 141, 255, .9);
}
.btn-ten:hover { background: linear-gradient(180deg, #8fe0ff, #4a98ff 50%, #6a4dff); }
.btn-ten:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 1px 0 #1d2474; }
.btn-ten em { color: #fff3a8; border-left-color: rgba(255, 255, 255, .3); font-family: system-ui, sans-serif; }
.btn .cost { font-family: system-ui, sans-serif; font-weight: 800; }

.btn.is-locked { opacity: .6; filter: grayscale(.45); }

/* ------------------------------ l'en-tête ------------------------------ */

.topbar {
  background: linear-gradient(180deg, rgba(18, 11, 48, .92), rgba(12, 8, 34, .86));
  border-bottom: 1px solid rgba(190, 150, 255, .16);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
}
.brand-logo { width: 62px; height: 40px; filter: drop-shadow(0 3px 8px rgba(255, 62, 200, .45)); }
.brand-name {
  font-family: var(--font-display);
  font-size: 22px !important;
  letter-spacing: .01em;
  background: linear-gradient(90deg, #ff6ad8, #c56bff 45%, #34e1ff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.brand-name em { color: transparent; }

/* les pastilles de monnaie : une pièce colorée, un chiffre qui claque */
.keys, .dbz {
  position: relative;
  border: 2px solid rgba(20, 14, 51, .9);
  background: linear-gradient(180deg, rgba(60, 46, 120, .95), rgba(34, 24, 78, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 0 rgba(10, 6, 26, .9);
  padding: 3px 11px 3px 4px !important;
  gap: 6px !important;
}
.keys b, .dbz b { font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: .02em; }
.keys-ico, .dbz-ico {
  box-sizing: content-box;
  width: 13px !important; height: 13px !important;
  padding: 4px;
  border-radius: 50%;
  color: #fff !important;
  stroke-width: 2.4;
}
.keys .keys-ico { background: radial-gradient(circle at 35% 30%, #9ef2ff, #16a6d9 70%); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.keys.is-prem .keys-ico { background: radial-gradient(circle at 35% 30%, #fff1a6, #f0a010 70%); }
.dbz .dbz-ico { background: radial-gradient(circle at 35% 30%, #ffb3ec, #d8269f 70%); }
.keys.is-empty .keys-ico { background: radial-gradient(circle at 35% 30%, #ffb3c1, #d62250 70%); }
.keys.is-full { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 0 rgba(10,6,26,.9), 0 0 14px -2px rgba(52,225,255,.55); }
.keys.is-prem.is-full { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 0 rgba(10,6,26,.9), 0 0 14px -2px rgba(255,210,74,.6); }

.top-av {
  border: 2px solid rgba(20, 14, 51, .9);
  box-shadow: 0 0 0 2px rgba(255, 62, 200, .5), 0 3px 0 rgba(10, 6, 26, .9);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
}

/* ------------------------------ les onglets ------------------------------ */

.tabs {
  background: rgba(10, 6, 30, .6);
  border: 1px solid rgba(190, 150, 255, .16);
}
.tab.is-active {
  background: linear-gradient(180deg, #ff6ad8, #b44dff 60%, #7b3cff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 #3c1778, 0 8px 20px -8px rgba(210, 60, 242, .9);
  text-shadow: 0 1px 0 rgba(70, 20, 110, .5);
}
.tabbar { background: linear-gradient(180deg, rgba(20, 12, 50, .97), rgba(10, 6, 28, .99)); }

/* ============================ le présentoir ============================ */

.shop-logo { display: none; }

/* La teinte change d'un coup. Elle glissait autrefois d'une valeur à
   l'autre (--hue déclarée comme nombre, puis animée) : chaque image de
   la transition repeignait tout le décor, rayons, aura, étincelles et
   leurs ombres, sur le fil principal. Sur téléphone, changer de volume
   ou de collection saccadait et faisait clignoter l'écran. */

/* Le décor déborde de la scène : coupé à ses bords, il dessinait un
   rectangle bien visible. C'est la vue entière qui le rogne, au bord de
   l'écran. */
.stage-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.shop { overflow: visible; }
#view-open.is-active { overflow: hidden; overflow: clip; }
.shop-stage { z-index: 1; }

/* l'aura : une grande lueur à la teinte du booster, qui respire */
.sd-aura {
  position: absolute;
  left: 50%; top: 48%;
  width: min(200cqmin, 1100px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    hsl(var(--hue) 95% 60% / .5), hsl(calc(var(--hue) + 40) 95% 55% / .2) 55%, transparent 72%);
  animation: sd-breathe 5s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes sd-breathe {
  0%, 100% { opacity: .75; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* les rayons : une roue de lumière qui tourne lentement derrière le sachet */
.sd-rays {
  position: absolute;
  left: 50%; top: 48%;
  width: min(230cqmin, 1300px);
  aspect-ratio: 1;
  margin: calc(min(230cqmin, 1300px) / -2) 0 0 calc(min(230cqmin, 1300px) / -2);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    hsl(var(--hue) 100% 75% / .20) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 12%, transparent 72%);
          mask-image: radial-gradient(closest-side, #000 12%, transparent 72%);
  animation: sd-spin 60s linear infinite;
  will-change: transform;
}
@keyframes sd-spin { to { transform: rotate(360deg); } }

/* le socle : une ellipse lumineuse sous le sachet, avec une onde qui s'en échappe */
.sd-pedestal {
  position: absolute;
  left: 50%; bottom: 7%;
  width: min(62cqw, 360px);
  height: min(12cqh, 70px);
  translate: -50% 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, hsl(var(--hue) 100% 80% / .55), hsl(var(--hue) 90% 55% / .22) 55%, transparent 75%);
}
.sd-pedestal::before {
  content: "";
  position: absolute;
  inset: 18% 8%;
  border-radius: 50%;
  border: 2px solid hsl(var(--hue) 100% 78% / .55);
  box-shadow: 0 0 18px hsl(var(--hue) 100% 65% / .5), inset 0 0 14px hsl(var(--hue) 100% 70% / .35);
}
.sd-pedestal b {
  position: absolute;
  inset: 18% 8%;
  border-radius: 50%;
  border: 2px solid hsl(var(--hue) 100% 82% / .6);
  animation: sd-ripple 2.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes sd-ripple {
  from { transform: scale(.8); opacity: .9; }
  to   { transform: scale(1.5); opacity: 0; }
}

/* les étincelles qui montent */
.sd-sparks { position: absolute; inset: 0; }
.sd-sparks i {
  position: absolute;
  left: var(--x);
  bottom: 8%;
  width: 10px; height: 10px;
  opacity: 0;
  background:
    linear-gradient(#fff, #fff) center / 2px 100% no-repeat,
    linear-gradient(#fff, #fff) center / 100% 2px no-repeat;
  filter: drop-shadow(0 0 4px hsl(var(--hue) 100% 70%));
  transform: scale(var(--s));
  animation: sd-rise var(--w) linear var(--d) infinite;
}
.sd-sparks i:nth-child(3n) { background:
    radial-gradient(circle, #fff 0 2px, hsl(var(--hue) 100% 75% / .8) 3px, transparent 5px); }
.sd-sparks i:nth-child(4n+1) { filter: drop-shadow(0 0 4px #ffd24a); }
@keyframes sd-rise {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(var(--s)) rotate(0); }
  15%  { opacity: 1; }
  80%  { opacity: .8; }
  100% { opacity: 0; transform: translate3d(12px, -58cqh, 0) scale(calc(var(--s) * .4)) rotate(180deg); }
}

/* le sachet actif flotte au-dessus du socle, et son reflet de prisme défile
   par translation au lieu de repeindre son dégradé à chaque image */
.pack-prism {
  background: none;
  animation: none;
  filter: none;
  overflow: hidden;
}
.pack-prism i {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 200%;
  background: repeating-linear-gradient(104deg,
    #ff0080 0%, #ff8c00 5%, #ffe600 9%, #00ff9d 14%,
    #00b3ff 19%, #8b00ff 24%, #ff0080 28%);
  opacity: .9;
  animation: prism-slide 7s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes prism-slide { from { transform: translateX(0); } to { transform: translateX(-40%); } }
.charge-wrap.is-charging .pack-prism i { animation-duration: 2.5s; }
.shop-slot:not(.is-active) .pack-prism i { animation: none; }

.pack-shell {
  box-shadow:
    0 0 0 2px rgba(20, 14, 51, .95),
    0 0 0 4px hsl(var(--hue) 90% 72% / .55),
    0 4em 6em -3em rgba(0,0,0,.9),
    inset 0 0 0 1px rgba(255,255,255,.16);
}
.plate-name { font-family: var(--font-display); font-weight: 400; font-size: 2.3em; letter-spacing: .01em; }
.plate-kicker, .foot-count, .pack-tab span, .pack-tab b { font-family: var(--font-display); font-weight: 400; }

/* le nom du booster, sous le sachet */
.shop-name {
  font-size: clamp(26px, 4.4vw, 40px);
  color: #fff;
  text-shadow:
    0 3px 0 rgba(20, 14, 51, .95),
    0 0 26px hsl(var(--hue) 100% 65% / .75);
}
.shop-progress .sp-bar {
  height: 10px;
  border: 2px solid rgba(20, 14, 51, .9);
  background: rgba(10, 6, 28, .8);
}
.sp-bar i {
  background: linear-gradient(90deg, hsl(var(--hue) 95% 55%), hsl(calc(var(--hue) + 40) 100% 70%));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4);
  border-radius: 999px;
}

/* les flèches du présentoir */
.shop-nav {
  border: 2px solid rgba(20, 14, 51, .9);
  background: linear-gradient(180deg, #3d3078, #251b55);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 4px 0 #120c2c;
}
.shop-nav:hover { background: linear-gradient(180deg, hsl(var(--hue) 70% 55%), hsl(var(--hue) 70% 38%)); }

/* les volumes : de petites cartouches */
.vol {
  border: 2px solid rgba(20, 14, 51, .9);
  background: linear-gradient(180deg, rgba(60, 46, 120, .7), rgba(30, 22, 70, .7));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 rgba(10,6,26,.9);
}
.vol b { font-family: var(--font-display); font-weight: 400; font-size: 13px; }
.vol.is-on {
  background: linear-gradient(180deg, hsl(var(--hue) 85% 62%), hsl(var(--hue) 75% 42%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 0 hsl(var(--hue) 70% 20%), 0 0 18px -4px hsl(var(--hue) 100% 60%);
}

/* les familles et le rail des collections */
.fam-bar { background: rgba(10, 6, 30, .6); border-color: rgba(190, 150, 255, .16); }
.fam { font-family: var(--font-display); font-weight: 400; font-size: 14px; letter-spacing: .02em; }
.fam[aria-selected="true"] {
  background: linear-gradient(180deg, #ffffff, #e2d6ff);
  color: #2a1a5e;
  box-shadow: 0 3px 0 rgba(10, 6, 26, .9);
}
.coll {
  border: 2px solid rgba(20, 14, 51, .9);
  background: linear-gradient(180deg, rgba(56, 42, 112, .75), rgba(28, 20, 66, .75));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 rgba(10,6,26,.9);
}
.coll-name { font-family: var(--font-display); font-weight: 400; font-size: 14.5px; letter-spacing: .01em; }
.coll[aria-selected="true"] {
  background: linear-gradient(180deg, hsl(var(--hue) 80% 58%), hsl(var(--hue) 70% 34%));
  border-color: rgba(20, 14, 51, .95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 3px 0 hsl(var(--hue) 70% 16%),
    0 0 22px -6px hsl(var(--hue) 100% 62%);
}
.coll-ico.has-art { border: 2px solid rgba(20, 14, 51, .8); }
.coll-fill { height: 3px; background: linear-gradient(90deg, #ffd24a, #fff3a8); box-shadow: none; }

/* ------------------------------ les panneaux ------------------------------ */

.kpi {
  border: 2px solid rgba(20, 14, 51, .8);
  background: linear-gradient(180deg, rgba(60, 46, 120, .55), rgba(30, 22, 70, .55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 rgba(10,6,26,.8);
}
.kpi b { font-size: 21px; }

.dbzp-box, .haul-panel, .detail-panel {
  border: 2px solid rgba(20, 14, 51, .95);
  background: linear-gradient(170deg, rgba(40, 28, 88, .98), rgba(16, 10, 40, .99) 60%);
  box-shadow: 0 0 0 1px rgba(190, 150, 255, .18), 0 30px 70px -20px rgba(0, 0, 0, .95);
}

/* ------------------------------ la scène ------------------------------ */

.rarity-stamp { font-family: var(--font-display); font-weight: 400; letter-spacing: .06em; -webkit-text-stroke: 2px rgba(20, 14, 51, .9); paint-order: stroke fill; }
.carousel-head h2 { font-size: clamp(30px, 5vw, 44px); text-shadow: 0 3px 0 rgba(20,14,51,.95), 0 0 30px color-mix(in srgb, var(--aura) 70%, transparent); }
.stage-hint { font-family: var(--font-display); font-weight: 400; letter-spacing: .12em; font-size: 14px; }
.band-name { font-family: var(--font-display); font-weight: 400; letter-spacing: .1em; }
.card-new { font-family: var(--font-display); font-weight: 400; letter-spacing: .06em; background: linear-gradient(180deg, #ff6ad8, #d23cf2); border: 2px solid rgba(20,14,51,.9); }
.card-count { font-family: var(--font-display); font-weight: 400; border: 2px solid rgba(20,14,51,.9); background: linear-gradient(180deg, #3d3078, #251b55); }

/* ------------------------------ mode allégé ------------------------------ */
.fx-lite .sd-rays { animation: none; }
.fx-lite .sd-sparks i:nth-child(2n) { display: none; }
.fx-lite .sd-sparks i { filter: none; }
.fx-lite .sd-pedestal::before { box-shadow: none; }
.fx-lite .brand-logo { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .sd-aura, .sd-rays, .sd-pedestal b, .sd-sparks i, .btn-open::after { animation: none !important; }
}

@media (max-width: 759px) {
  .btn-open { font-size: 18px; padding: 12px 24px 13px; }
  .brand-logo { width: 56px; height: 36px; }
}