/* ---------- Zik Hunter v2 look ----------
   Same structure and colours; the covers bring the colour, less text and chrome, a mini player. */

/* colour from the covers: two big blurred artworks behind the whole page, cross-fading */
#v2Amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#v2Amb i{position:absolute;inset:-25%;background-size:cover;background-position:center;filter:blur(90px) saturate(1.5);opacity:0;transition:opacity 1.6s ease;transform:scale(1.1)}
#v2Amb i.on{opacity:.62}
#v2Amb::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0,transparent,rgba(9,7,13,.35) 70%),linear-gradient(transparent 50%,rgba(9,7,13,.5))}
.v2 .sidebar{background:linear-gradient(180deg,rgba(14,10,20,.72),rgba(9,7,13,.78));backdrop-filter:blur(18px)}
.v2 header.top{background:transparent}

/* booster page: no long paragraph, a "?" for the rules and the odds */
.v2 #view-shop>h2{display:flex;align-items:center;gap:12px}
.v2-help{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#e9e2f3;font:700 15px/1 var(--body);cursor:pointer;flex:none}
.v2-help:hover{background:rgba(255,255,255,.14)}
.v2 #view-shop>.sub,.v2 #view-shop>.odds{display:none}
.v2 #view-shop.v2-open>.sub,.v2 #view-shop.v2-open>.odds{display:block}
.v2 #view-shop.v2-open>.odds{max-width:640px}

/* the stage: a big booster in the middle, the covers of your last pulls drifting behind it */
.v2 #view-shop .shelf{position:relative;display:grid;grid-template-columns:1fr;justify-items:center;gap:18px;padding:46px 20px 40px;min-height:560px;overflow:hidden;
  background:none;border:0;box-shadow:none;border-radius:28px}
.v2-wall{position:absolute;inset:0;display:grid;align-content:center;gap:18px;pointer-events:none;opacity:.55;
  -webkit-mask:radial-gradient(70% 70% at 50% 50%,transparent 18%,#000 46%,transparent 92%);mask:radial-gradient(70% 70% at 50% 50%,transparent 18%,#000 46%,transparent 92%)}
.v2-wall .row{display:flex;gap:18px;width:max-content;animation:v2drift 70s linear infinite}
.v2-wall .row:nth-child(2){animation-direction:reverse;animation-duration:85s}
.v2-wall .row:nth-child(3){animation-duration:60s}
.v2-wall img{width:150px;height:150px;border-radius:10px;object-fit:cover;filter:saturate(1.1) brightness(.8);box-shadow:0 12px 30px rgba(0,0,0,.5)}
@keyframes v2drift{to{transform:translateX(-50%)}}
.v2 .pack-stage{position:relative;z-index:1;gap:26px;perspective:900px}
.v2 .pack-stage .pack{width:270px;animation:none;transition:transform .25s ease-out;transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) translateY(var(--ty,0));
  box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18),0 0 80px rgba(231,177,74,.18)}
.v2 .pack-stage .pack:hover{--ty:-8px}
.v2 .pack-stage .pack::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:radial-gradient(60% 50% at var(--gx,50%) var(--gy,30%),rgba(255,236,200,.28),transparent 60%)}
.v2 #openBig{min-width:260px}
.v2 .stock{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:rgba(10,8,14,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);font-size:.85rem}
.v2 .stock b{font-size:.92rem;white-space:nowrap}
.v2 .stock small{display:none}
.v2 .stock .pips{display:none}
.stock-timer{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:99px;background:rgba(245,194,77,.12);border:1px solid rgba(245,194,77,.35);
  color:#f7d77f;font-size:.8rem;white-space:nowrap}
.stock-timer time{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;color:#fff1c4}
.stock-timer em{font-style:normal;color:var(--muted)}
.stock-timer.full{background:rgba(120,220,150,.12);border-color:rgba(120,220,150,.35);color:#9fe8b4}
.st-ic{width:12px;height:12px;border-radius:50%;border:1.6px solid currentColor;position:relative}
.st-ic::after{content:"";position:absolute;left:50%;top:1.5px;width:1.6px;height:4px;margin-left:-.8px;background:currentColor;transform-origin:50% 100%;animation:stHand 4s linear infinite}
@keyframes stHand{to{transform:rotate(360deg)}}
@media (max-width:520px){.stock-timer em{display:none}}
@media (prefers-reduced-motion:reduce){.st-ic::after{animation:none}}

/* cards on the table keep their stats; they lift a little on hover */
.v2 .slot .flip.on .front .cq{transition:transform .3s ease}
.v2 .slot .flip.on:hover .front .cq{transform:translateY(-6px) scale(1.03)}
.v2 #view-shop .table{background:rgba(12,9,18,.45);backdrop-filter:blur(14px)}

/* mini player */
#v2Player{position:fixed;left:50%;bottom:18px;z-index:40;translate:-50% 0;display:flex;align-items:center;gap:12px;width:min(520px,calc(100vw - 24px));padding:8px 10px 8px 8px;border-radius:16px;
  background:rgba(16,12,22,.72);backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.5);
  transition:opacity .35s ease,transform .35s ease}
#v2Player[hidden]{display:flex;opacity:0;pointer-events:none;transform:translateY(20px)}
#v2Player img{width:46px;height:46px;border-radius:9px;object-fit:cover;flex:none}
#v2Player .t{flex:1;min-width:0;line-height:1.25}
#v2Player .t b{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#v2Player .t span{font-size:.78rem;color:#b7aec6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
#v2Player .eq{display:flex;align-items:flex-end;gap:3px;height:20px;width:30px}
#v2Player .eq i{flex:1;height:30%;border-radius:1px;background:var(--pc,#e7b14a)}
#v2Player.playing .eq i{animation:v2eq .9s ease-in-out infinite alternate}
#v2Player .eq i:nth-child(2){animation-delay:-.3s}#v2Player .eq i:nth-child(3){animation-delay:-.6s}#v2Player .eq i:nth-child(4){animation-delay:-.15s}
@keyframes v2eq{0%{height:20%}100%{height:100%}}
#v2Player .bar{position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:1px;background:rgba(255,255,255,.08);overflow:hidden}
#v2Player .bar s{display:block;height:100%;width:0;background:var(--pc,#e7b14a)}
#v2Player button{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:14px;cursor:pointer;flex:none}
#v2Player button.pp{background:#f4ead6;color:#140f1c}
#v2Player button:hover{filter:brightness(1.15)}
@media (max-width:860px){#v2Player{bottom:calc(76px + env(safe-area-inset-bottom,0px))}.v2 .pack-stage .pack{width:220px}.v2-wall img{width:110px;height:110px}}


/* design pack demo: boosters and card backs printed in 3D (studio.js) */
.pack-gl,.back-gl{display:block;position:absolute;opacity:0;pointer-events:none}   /* sized but unseen until the studio has drawn it */
.pack.gl{background:none!important;border:0;box-shadow:none!important;overflow:visible}
.pack.gl>.pack-logo,.pack.gl>.lbl,.pack.gl>.pack-shine,.pack.gl::before,.pack.gl::after{display:none!important}
.pack-gl{inset:-4% -8%;width:116%;height:108%}
.pack.gl .pack-gl{opacity:1;pointer-events:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
.v2 .pack-stage .pack.gl{transform:translateY(var(--ty,0))}
.pack.gl.god .pack-gl{filter:sepia(.6) saturate(1.8) brightness(1.15) drop-shadow(0 0 30px rgba(245,194,77,.8))}
.back.gl{padding:0;background:none;box-shadow:none;overflow:visible}
.back.gl .in{display:none}
.back-gl{inset:0;width:100%;height:100%}
.back.gl .back-gl{opacity:1;pointer-events:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}   /* the card leans toward the pointer */
.v2 .slot .flip:not(.on) .back.gl{transition:transform .3s ease}
.v2 .slot .flip:not(.on):hover .back.gl{transform:translateY(-6px) scale(1.03)}
.tear-hint{display:none;margin:-10px 0 0;font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#cdbfdc;text-align:center}
.pack.gl+.tear-hint{display:block}
.rip .tear-hint{display:none!important}
.tear-stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;align-content:center;gap:14px;padding:20px;background:rgba(6,4,10,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:tsIn .3s ease-out}
.tear-stage[hidden]{display:none}
@keyframes tsIn{from{opacity:0}}
.ts-head{text-align:center}
.ts-head b{display:block;font:900 clamp(20px,3vw,28px) var(--display);color:#ffe2a0}
.ts-head small{font:500 .75rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#cdbfdc}
.stage-pack{position:relative;height:min(64vh,600px);aspect-ratio:5/8;cursor:default;animation:none!important}
.stage-pack:hover{transform:none!important}
.ts-hint{margin:0;font:500 .75rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#cdbfdc}

/* Légendaire: a concert poster. The sleeve fills the card, the artist's signature in gold, the title huge, the stats on one line */
.card.legend{background:linear-gradient(135deg,#fff4cf,#f5c24d 25%,#a8741f 50%,#f5c24d 75%,#fff4cf)}
.card.legend .in{display:block;background:#120d10}
.card.legend .in::after{display:none}
.card.legend .ext{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(18px) saturate(1.3) brightness(.7);transform:scaleY(-1)}   /* the sleeve's own colours carry on below it */
.card.legend .art{position:absolute;left:0;top:0;width:100%;aspect-ratio:1;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}   /* the whole sleeve, nothing cut */
.card.legend .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,6,22,.6),transparent 17%,transparent 45%,rgba(20,6,22,.85) 82%)}
.card.legend .lhead{position:absolute;z-index:2;left:4.4cqw;right:4.4cqw;top:4.4cqw;display:flex;justify-content:space-between;align-items:center;font:500 3.2cqw var(--mono);letter-spacing:.2em;color:#ffe08a}
.card.legend .lpw{display:grid;place-items:center;width:12cqw;height:12cqw;border-radius:50%;border:.5cqw solid #ffe08a;font:900 4.6cqw var(--display);letter-spacing:0}
.card.legend .lfoot{position:absolute;z-index:2;left:3.4cqw;right:3.4cqw;bottom:3cqw;display:flex;flex-direction:column;gap:1.6cqw}
.card.legend .sig{padding:3cqw 8cqw 1.4cqw 6cqw;margin:-3cqw -4cqw -3.8cqw -5cqw;font:13cqw/1 "Mrs Saint Delafield",cursive;white-space:nowrap;transform:rotate(-6deg);transform-origin:left bottom;
  background:linear-gradient(100deg,#9a6c22 20%,#fff6cf 35%,#e2b450 50%,#8a5c18 70%,#e2b450 85%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.7));animation:sigShine 4.5s ease-in-out infinite}
@keyframes sigShine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.card.legend .lttl{font:900 11cqw/.9 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:#fff3d6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.card.legend .lttl.long{font-size:8cqw}
.card.legend .lttl.xlong{font-size:6.4cqw}
.card.legend .lst{display:flex;justify-content:space-between;margin-top:.6cqw;font:500 2.8cqw var(--mono);letter-spacing:.12em;color:rgba(255,224,138,.85)}
.card.legend .lst b{color:#fff3d6;font-weight:500}
.card.legend:not(.shiny) .foil{display:none}
.card.legend.shiny .lhead{right:17cqw}
.card.legend.shiny .shade{background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 17%),linear-gradient(0deg,#000 0%,rgba(0,0,0,.88) 18%,rgba(0,0,0,.45) 38%,transparent 55%)}   /* Shiny: a black fade rising from the bottom */
@media (prefers-reduced-motion:reduce){.card.legend .sig{animation:none}}

/* Artiste Disque de diamant: the Icône. Platinum frame, photo in colour, the name down the side in chrome with depth, a silver signature */
.dcard{position:relative;width:100%;aspect-ratio:63/88;border-radius:5cqw;padding:1.5cqw;color:#fff;text-align:left;user-select:none;overflow:hidden;
  background:linear-gradient(135deg,#ffffff,#b9c4d6 22%,#6f7c94 40%,#eef3fb 58%,#8e9bb3 78%,#ffffff);box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 30px rgba(159,216,255,.16)}
.dcard .in{position:relative;height:100%;border-radius:3.8cqw;overflow:hidden;background:#05070d}
.dcard .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:contrast(1.08) saturate(1.12)}
.dcard .ice{position:absolute;inset:0;background:linear-gradient(200deg,rgba(159,216,255,.45),transparent 45%);mix-blend-mode:soft-light;opacity:.35}
.dcard .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,13,.45),transparent 22%,transparent 50%,rgba(5,7,13,.92) 84%)}
.dcard .vname{position:absolute;z-index:5;left:0;top:50%;rotate:-90deg;translate:-50% -50%;margin-left:9.5cqw}
.dcard .chrome{position:relative;display:inline-block;white-space:nowrap;font-family:var(--display);font-weight:900;line-height:1;letter-spacing:-.02em}
.dcard .chrome .depth{position:absolute;inset:0;color:#16233b;text-shadow:.15cqw .15cqw 0 #1b2a44,.3cqw .3cqw 0 #1b2a44,.45cqw .45cqw 0 #18263f,.6cqw .6cqw 0 #142035,.75cqw .75cqw 0 #101a2c,.9cqw .9cqw 0 #0c1424,1.6cqw 1.8cqw 2cqw rgba(0,0,0,.7)}
.dcard .chrome .face{position:relative;color:transparent;background:linear-gradient(180deg,#ffffff 0%,#e4ecf7 30%,#8391a9 48%,#1d2638 52%,#9fb2cc 66%,#f4f8ff 85%,#b9c7da 100%);-webkit-background-clip:text;background-clip:text}
.dcard .head{position:absolute;z-index:8;left:3.6cqw;right:3.6cqw;top:3.6cqw;display:flex;justify-content:space-between;align-items:center}
.dcard .gem{display:inline-block;width:5.4cqw;aspect-ratio:1.15;flex:none;background:conic-gradient(from 200deg at 50% 38%,#ffffff,#bfe6ff,#7fb6e8,#e9f6ff,#9fd8ff,#ffffff);clip-path:polygon(22% 0,78% 0,100% 30%,50% 100%,0 30%);filter:drop-shadow(0 0 .8cqw rgba(159,216,255,.9))}
.dcard .badge{display:inline-flex;align-items:center;gap:1.4cqw;padding:.7cqw 2.4cqw .7cqw 1.4cqw;border-radius:99px;background:rgba(6,10,20,.55);border:.3cqw solid rgba(214,236,255,.7);font:500 2.7cqw var(--mono);letter-spacing:.2em;color:#e6f3ff}
.dcard .pw{display:grid;place-items:center;width:10.5cqw;height:10.5cqw;border-radius:50%;border:.45cqw solid #d6ecff;font:900 4.2cqw var(--display);color:#fff;background:rgba(6,10,20,.5)}
.dcard .foot{position:absolute;z-index:6;left:21cqw;right:4cqw;bottom:4cqw}
.dcard .sig{font-family:"Mrs Saint Delafield",cursive;line-height:1;white-space:nowrap;padding:2cqw 6cqw 1cqw 4cqw;margin:-2cqw -4cqw -1cqw -4cqw;transform:rotate(-6deg);color:transparent;
  background:linear-gradient(100deg,#8d9ab0,#ffffff 35%,#bfe6ff 55%,#8d9ab0);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.8))}
.dcard .fans{margin:2cqw 0 2.4cqw;font:900 7.6cqw/1 var(--display);color:#fff}
.dcard .fans small{display:block;margin-top:.8cqw;font:500 2.7cqw var(--mono);letter-spacing:.24em;color:#9fd8ff}
.dcard .stl{display:flex;justify-content:space-between;font:500 2.7cqw var(--mono);letter-spacing:.12em;color:rgba(214,236,255,.8)}
.dcard .stl b{color:#fff;font-weight:500}
.dcard .ribbon{position:absolute;top:5.5cqw;right:-9cqw;width:40cqw;transform:rotate(38deg);text-align:center;z-index:10;background:#000;color:#e6f0ff;border-block:.35cqw solid #d6e2f2;
  font:500 3.1cqw var(--mono);letter-spacing:.24em;padding:.6cqw 0;box-shadow:0 .6cqw 1.2cqw rgba(0,0,0,.6)}
.dcard.collector .head,.dcard.bd .head{right:15cqw}
/* its Shiny, the Black Diamond: black lacquer, a platinum double line, one slow sweep, the photo in black and white */
.dcard.bd{background:linear-gradient(145deg,#050506,#24222a 30%,#0a0a0c 50%,#2c2a33 70%,#060607);
  box-shadow:0 10px 26px rgba(0,0,0,.7),inset 0 0 0 .5cqw #d6e2f2,inset 0 0 0 1.2cqw #0b0b0d,inset 0 0 0 1.5cqw rgba(214,226,242,.45)}
.dcard.bd .in{box-shadow:0 0 0 .3cqw rgba(214,226,242,.6)}
.dcard.bd .photo{filter:grayscale(1) contrast(1.32) brightness(1.02)}
.dcard.bd .ice{display:none}
.dcard.bd .badge{background:#000;border-color:#d6e2f2}
.dcard.bd .chrome .depth{color:#000;text-shadow:.15cqw .15cqw 0 #0b0b0d,.3cqw .3cqw 0 #0b0b0d,.45cqw .45cqw 0 #0b0b0d,.6cqw .6cqw 0 #0b0b0d,1.4cqw 1.6cqw 2cqw rgba(0,0,0,.8)}
.dcard.bd .sig{background:linear-gradient(100deg,#8d9ab0,#ffffff 30%,#cfd9e8 55%,#ffffff 75%,#8d9ab0);-webkit-background-clip:text;background-clip:text}
.dcard.bd .fans small{color:#d6e2f2}
.dcard .sweep{position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 38%,rgba(214,232,255,.10) 45%,rgba(240,248,255,.45) 50%,rgba(214,232,255,.10) 55%,transparent 62%);background-size:320% 100%;background-position:120% 0;animation:sweep 7s cubic-bezier(.45,0,.25,1) infinite}
@media (prefers-reduced-motion:reduce){.dcard .sweep{animation:none}}

/* ---------- Disque de diamant: the very first Diamant look — an octagon cut like a stone, an iridescent frame turning
   through ice, pink, champagne and mint, a dark inner bezel, sparkles and foil — with the name down the side and the signature ---------- */
.dcard{border-radius:0;padding:0;box-shadow:none;clip-path:polygon(9% 0,91% 0,100% 6.5%,100% 93.5%,91% 100%,9% 100%,0 93.5%,0 6.5%);
  background:conic-gradient(from var(--spin,0deg),#bdf0ff,#f8c8ff,#fff7c2,#c2ffe1,#bdf0ff,#f8c8ff,#fff7c2,#bdf0ff);animation:spin 6s linear infinite}
.dcard::before{content:"";position:absolute;inset:1.9cqw;z-index:1;background:rgba(0,0,0,.45);clip-path:polygon(8% 0,92% 0,100% 6%,100% 94%,92% 100%,8% 100%,0 94%,0 6%)}
.dcard .in{z-index:2;border-radius:0;box-shadow:none;background:#120e16;clip-path:polygon(7% 0,93% 0,100% 5.5%,100% 94.5%,93% 100%,7% 100%,0 94.5%,0 5.5%)}
.dcard .ice{z-index:4;opacity:1;mix-blend-mode:normal;pointer-events:none;
  background:radial-gradient(circle at 22% 18%,#fff 0 .5cqw,transparent 1.5cqw),radial-gradient(circle at 80% 38%,#fff 0 .4cqw,transparent 1.2cqw),radial-gradient(circle at 64% 10%,#fff 0 .3cqw,transparent 1cqw),radial-gradient(circle at 12% 56%,#fff 0 .3cqw,transparent 1cqw);
  animation:dtwinkle 2.4s ease-in-out infinite}
@keyframes dtwinkle{0%,100%{opacity:.2}50%{opacity:1}}
.dcard .pave{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:color-dodge;opacity:.35;
  background:linear-gradient(115deg,transparent 25%,rgba(255,80,160,.55) 38%,rgba(255,220,90,.55) 46%,rgba(80,255,200,.5) 54%,rgba(90,140,255,.55) 62%,transparent 75%);
  background-size:260% 260%;animation:foil 5s linear infinite}
.dcard .head{left:5.5cqw;right:5.5cqw;top:4.2cqw}
.dcard .badge,.dcard .pw{background:rgba(0,0,0,.55);border-color:#bdf0ff}
.dcard .foot{bottom:5cqw}
.dcard .tw{display:none}
/* its Shiny, the Black Diamond: the same stone, cut in black — a dark iridescent frame, the photo in black and white */
.dcard.bd{background:conic-gradient(from var(--spin,0deg),#0b0b0f,#3d4a5c,#0b0b0f,#bdf0ff 7%,#0b0b0f,#5a4560,#0b0b0f,#f8c8ff 5%,#0b0b0f);box-shadow:none}
.dcard.bd::before{background:rgba(0,0,0,.7)}
.dcard.bd .in{background:#050506;box-shadow:none}
.dcard.bd .pave{opacity:.22}
.dcard.bd .ice{display:block}
.dcard.bd .badge,.dcard.bd .pw{background:#000;border-color:#d6e2f2}
.dcard .ribbon,.dcard .sweep{z-index:10}
.big .dcard .pave{animation:none;background-position:var(--fx,50%) var(--fy,50%)}
@media (prefers-reduced-motion:reduce){.dcard,.dcard .ice,.dcard .pave{animation:none}}

/* the black versions: a black lacquer stone with a thin edge of colour — iridescent for the Shiny, gold for the Collector */
.dcard.bd,.dcard.collector{background:conic-gradient(from var(--spin,0deg),#bdf0ff,#f8c8ff,#fff7c2,#c2ffe1,#bdf0ff,#f8c8ff,#fff7c2,#bdf0ff)}
.dcard.collector{background:linear-gradient(135deg,#7a5a14,#f7e08a 22%,#b38a26 40%,#fff1b0 58%,#8f6b18 78%,#efd27a);animation:none}
.dcard.bd::after,.dcard.collector::after{content:"";position:absolute;inset:.6cqw;z-index:0;clip-path:polygon(8.6% 0,91.4% 0,100% 6.2%,100% 93.8%,91.4% 100%,8.6% 100%,0 93.8%,0 6.2%);
  background:linear-gradient(145deg,#050506,#24222a 30%,#0a0a0c 50%,#2c2a33 70%,#060607)}
.dcard.bd::before,.dcard.collector::before{background:#000}
.dcard.bd .photo,.dcard.collector .photo{filter:grayscale(1) contrast(1.3) brightness(1.02)}
.dcard.bd .in,.dcard.collector .in{background:#050506}
.dcard.bd .chrome .face{background:linear-gradient(180deg,#ffffff 0%,#bdf0ff 25%,#f8c8ff 45%,#2a2433 50%,#fff7c2 62%,#c2ffe1 80%,#ffffff 100%);-webkit-background-clip:text!important;background-clip:text!important;color:transparent}
.dcard.bd .sig{background:linear-gradient(100deg,#bdf0ff,#ffffff 30%,#f8c8ff 50%,#fff7c2 70%,#c2ffe1);-webkit-background-clip:text;background-clip:text}
.dcard.bd .pave{opacity:.55}
.dcard.bd .fans small{color:#f8c8ff}
.dcard.collector .chrome .depth{color:#000;text-shadow:.15cqw .15cqw 0 #0b0b0d,.3cqw .3cqw 0 #0b0b0d,.45cqw .45cqw 0 #0b0b0d,.6cqw .6cqw 0 #0b0b0d,1.4cqw 1.6cqw 2cqw rgba(0,0,0,.8)}
.dcard.collector .chrome .face{background:linear-gradient(180deg,#fff6cf 0%,#f7e08a 30%,#b38a26 48%,#3a2a08 52%,#d9a83f 66%,#fff1b0 85%,#efd27a);-webkit-background-clip:text!important;background-clip:text!important;color:transparent}
.dcard.collector .sig{background:linear-gradient(100deg,#b8862b,#fff1b8 30%,#d9a83f 55%,#fff6cf 75%,#b8862b);-webkit-background-clip:text;background-clip:text}
.dcard.collector .badge,.dcard.collector .pw{background:#000;border-color:#e9c46a;color:#f5d27a}
.dcard.collector .gem{background:linear-gradient(135deg,#fff6cf,#d9a83f 50%,#fff1b8)}
.dcard.collector .fans small,.dcard.collector .stl{color:#e9c46a}
.dcard.collector .pave{display:none}
.dcard.collector .ribbon{background:#000;color:#f5d27a;border-color:#e9c46a}

/* the Shiny is metal, not hologram: a silver edge, silver chrome, and only a white light when you pass over it */
.dcard.bd{background:linear-gradient(135deg,#ffffff,#b9c4d6 22%,#6f7c94 40%,#eef3fb 58%,#8e9bb3 78%,#ffffff);animation:none}
.dcard.bd .pave{display:none}
.dcard.bd .chrome .face{background:linear-gradient(180deg,#ffffff 0%,#e4ecf7 30%,#8391a9 48%,#1d2638 52%,#9fb2cc 66%,#f4f8ff 85%,#b9c7da 100%);-webkit-background-clip:text!important;background-clip:text!important;color:transparent}
.dcard.bd .sig{background:linear-gradient(100deg,#8d9ab0,#ffffff 30%,#cfd9e8 55%,#ffffff 75%,#8d9ab0);-webkit-background-clip:text;background-clip:text}
.dcard.bd .fans small{color:#d6e2f2}
/* the same Shiny light as the music cards: a warm sweep every few seconds, under the finger in the big view */
.dcard.bd .sweep{opacity:1;mix-blend-mode:screen;animation:sweep 7s cubic-bezier(.45,0,.25,1) infinite;
  background:linear-gradient(115deg,transparent 38%,rgba(255,236,190,.10) 45%,rgba(255,248,230,.42) 50%,rgba(255,236,190,.10) 55%,transparent 62%) 120% 0/320% 100%}
.big .dcard.bd .sweep{animation:none;background-position:calc(110% - var(--fx,50%) * 1.3) 0}
/* gold outlines on the lettering */
/* the outline sits on the layer behind the chrome: a clean gold edge all round, no stroke drawn over the letters */
.dcard.bd .chrome{filter:drop-shadow(.8cqw 1cqw 1.2cqw rgba(0,0,0,.75))}
.dcard.bd .chrome .depth{color:transparent;text-shadow:none;-webkit-text-stroke:.7cqw #e9c46a}
.dcard.bd .sig{-webkit-text-stroke:.12cqw #e9c46a}
.dcard.bd .fans{-webkit-text-stroke:.18cqw #e9c46a}
.dcard.bd .badge,.dcard.bd .pw{border-color:#e9c46a}
.dcard.bd .ribbon{border-color:#e9c46a}

/* iOS Safari can leave a percentage height unresolved inside an aspect-ratio box: the inside then outgrows the
   coloured frame and the frame looks cut at the bottom. Anchor the inside to the frame instead of sizing it. */
.card .in{position:absolute;inset:1.6cqw;height:auto}
.dcard .in{position:absolute;inset:2.6cqw;height:auto}
.acard .frame{position:absolute;inset:4.2cqw;height:auto}
.acard.collector .frame{position:absolute}   /* the Collector raised its frame with position:relative, which undid the anchoring: the frame shrank to its text */

/* ---------- Disque de platine: the Icône's little sister — the same full photo and name down the side, but a rounded
   frame of brushed platinum, a satin name without chrome or depth, a disc in the badge, and no signature (that stays the Diamant's) ---------- */
.dcard.pcard{clip-path:none;border-radius:5cqw;animation:none;
  background:linear-gradient(135deg,#9fb3c8,#ffffff 20%,#c3d1e0 38%,#f6f9fd 55%,#8ea3ba 76%,#e6eef8);
  box-shadow:0 10px 26px rgba(0,0,0,.6),inset 0 0 0 .3cqw rgba(255,255,255,.75)}
.dcard.pcard::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;mix-blend-mode:overlay;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 .2cqw,rgba(0,0,0,.06) .2cqw .5cqw)}
.dcard.pcard::before{clip-path:none;border-radius:4.2cqw;background:rgba(10,14,22,.55)}
.dcard.pcard .in{clip-path:none;border-radius:3.6cqw;background:#0b0f17}
.dcard.pcard .photo{filter:contrast(1.05) saturate(1.05)}
.dcard.pcard .shade{background:linear-gradient(180deg,rgba(6,9,15,.5),transparent 22%,transparent 48%,rgba(6,9,15,.92) 82%)}
.dcard.pcard .chrome{filter:drop-shadow(.4cqw .6cqw 1cqw rgba(0,0,0,.7))}
.dcard.pcard .chrome .face{background:linear-gradient(180deg,#ffffff 0%,#f2f6fb 40%,#cdd8e6 62%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dcard.pcard .badge,.dcard.pcard .pw{background:rgba(6,10,20,.55);border-color:#e6eef8}
.dcard.pcard .vinyl{width:4.4cqw;height:4.4cqw;border-radius:50%;flex:none;box-shadow:0 0 0 .3cqw #e6eef8;
  background:radial-gradient(circle,#0b0f17 0 12%,#e6eef8 13% 30%,transparent 31%),repeating-radial-gradient(circle,#1a2230 0 .35cqw,#2d3a4d .35cqw .6cqw)}
.dcard.pcard .fans small{color:#cfdbea}
.dcard.pcard.shiny .head{right:15cqw}
/* its Shiny: black lacquer with a double gold line, gold lettering, the photo in colour and the warm Shiny light */
.dcard.pcard.shiny{background:linear-gradient(145deg,#050506,#24222a 30%,#0a0a0c 50%,#2c2a33 70%,#060607);
  box-shadow:0 10px 26px rgba(0,0,0,.7),inset 0 0 0 .4cqw #e9c46a,inset 0 0 0 1.1cqw #0b0b0d,inset 0 0 0 1.4cqw rgba(233,196,106,.45)}
.dcard.pcard.shiny::after{content:none}
.dcard.pcard.shiny::before{background:#000}
.dcard.pcard.shiny .in{background:#050506}
.dcard.pcard.shiny .chrome .face,.dcard.pcard.collector .chrome .face{background:linear-gradient(180deg,#fff6cf 0%,#f7e08a 35%,#d9a83f 60%,#fff1b0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dcard.pcard.shiny .badge,.dcard.pcard.shiny .pw{background:#000;border-color:#e9c46a;color:#f5d27a}
.dcard.pcard.shiny .vinyl,.dcard.pcard.collector .vinyl{box-shadow:0 0 0 .3cqw #e9c46a;
  background:radial-gradient(circle,#000 0 12%,#e9c46a 13% 30%,transparent 31%),repeating-radial-gradient(circle,#0b0b0d 0 .35cqw,#24222a .35cqw .6cqw)}
.dcard.pcard.shiny .fans small,.dcard.pcard.shiny .stl{color:#e9c46a}
.dcard.pcard.shiny .ribbon{color:#f5d27a;border-color:#e9c46a}
.dcard.pcard.shiny .sweep{background:linear-gradient(115deg,transparent 38%,rgba(255,236,190,.10) 45%,rgba(255,248,230,.42) 50%,rgba(255,236,190,.10) 55%,transparent 62%) 120% 0/320% 100%}
.big .dcard.pcard.shiny .sweep{animation:none;background-position:calc(110% - var(--fx,50%) * 1.3) 0}
/* its Collector: the Diamant's black and gold, with rounded corners */
.dcard.pcard.collector::after{inset:.6cqw;border-radius:4.6cqw;clip-path:none;mix-blend-mode:normal;background:linear-gradient(145deg,#050506,#24222a 30%,#0a0a0c 50%,#2c2a33 70%,#060607)}
.dcard.pcard.collector{background:linear-gradient(135deg,#7a5a14,#f7e08a 22%,#b38a26 40%,#fff1b0 58%,#8f6b18 78%,#efd27a);box-shadow:0 10px 26px rgba(0,0,0,.7)}
.dcard.pcard.collector::before{background:#000}
.dcard.pcard.collector .in{background:#050506}
.dcard.pcard.collector .photo{filter:grayscale(1) contrast(1.3) brightness(1.02)}

/* ---------- Diamant Shiny (Black Diamond): the colours of the Platine Shiny — black lacquer inside a gold edge, gold
   lettering without outline — the photo stays in black and white ---------- */
.dcard.bd{background:linear-gradient(135deg,#7a5a14,#f7e08a 22%,#b38a26 40%,#fff1b0 58%,#8f6b18 78%,#efd27a)}
.dcard.bd .chrome .depth{display:none}
.dcard.bd .chrome .face{background:linear-gradient(180deg,#fff6cf 0%,#f7e08a 35%,#d9a83f 60%,#fff1b0 100%);-webkit-background-clip:text!important;background-clip:text!important;color:transparent}
.dcard.bd .sig{background:linear-gradient(100deg,#b8862b,#fff1b8 30%,#d9a83f 55%,#fff6cf 75%,#b8862b);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0}
.dcard.bd .fans{-webkit-text-stroke:0}
.dcard.bd .fans small,.dcard.bd .stl{color:#e9c46a}
.dcard.bd .stl b{color:#f5d27a}
.dcard.bd .badge,.dcard.bd .pw{background:#000;border-color:#e9c46a;color:#f5d27a}
.dcard.bd .gem{background:linear-gradient(135deg,#fff6cf,#d9a83f 50%,#fff1b8);filter:drop-shadow(0 0 .8cqw rgba(233,196,106,.8))}
.dcard.bd .ribbon{color:#f5d27a;border-color:#e9c46a}