/* =========================================================
   PANIER — « Le Sacre » (ajout) + « Le Trésor du Roi » (vue panier)   (logique : panier.js)
   ========================================================= */

/* ---------- le Sacre : onde, carte qui vole, impact ---------- */
.sacre-shock{position:fixed;z-index:321;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;pointer-events:none;
  border:3px solid #ffd65a;box-shadow:0 0 18px #f5b400,inset 0 0 12px #f5b40088;animation:scShock .55s cubic-bezier(.1,.7,.2,1) forwards}
.sacre-shock.big{width:70px;height:70px;margin:-35px 0 0 -35px;border-color:#fff1b8;animation-duration:.7s}
@keyframes scShock{from{transform:scale(.2);opacity:1}to{transform:scale(3.2);opacity:0}}

.sacre-card{position:fixed;left:0;top:0;z-index:322;pointer-events:none;will-change:transform;perspective:500px}
.sacre-card .sc-in{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:118px;max-width:150px;padding:10px 12px 9px;border-radius:16px;
  background:var(--goldgrad);color:#1a1200;box-shadow:0 0 0 2px #fff6,0 10px 30px #000a,0 0 40px #f5b400cc;transform:rotateY(var(--flip,0deg));text-align:center}
.sacre-card .sc-em{font-size:30px;line-height:1;filter:drop-shadow(0 2px 2px #0005)}
.sacre-card b{font-size:12px;font-weight:900;line-height:1.15;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sacre-card i{font-style:normal;font-family:"Russo One",sans-serif;font-size:15px}

#nav-cart.sacre-hit{animation:scHit .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes scHit{0%{transform:scale(1)}25%{transform:scale(1.45) rotate(-10deg);filter:drop-shadow(0 0 16px #ffd65a)}55%{transform:scale(.9) rotate(6deg)}100%{transform:none}}
#cnt.roll{animation:scRoll .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes scRoll{0%{transform:translateY(-120%) scale(.6);filter:blur(2px)}60%{transform:translateY(15%) scale(1.25);filter:none}100%{transform:none}}

.sacre-plus{position:fixed;z-index:323;pointer-events:none;transform:translate(-50%,0);font-family:"Russo One",sans-serif;font-size:20px;font-weight:400;
  background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px #f5b400aa) drop-shadow(0 2px 0 #6b4a00);
  white-space:nowrap;animation:scPlus 1.2s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes scPlus{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}20%{opacity:1;transform:translate(-50%,-14px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}

.sacre-mascot{position:fixed;z-index:322;pointer-events:none;transform:translate(-50%,0);display:flex;align-items:center;gap:6px;animation:scMascot 1.25s cubic-bezier(.2,1.4,.4,1) forwards}
.sacre-mascot img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid #ffd65a;box-shadow:0 0 18px #f5b400aa,0 6px 16px #000a}
.sacre-mascot span{padding:5px 9px;border-radius:12px 12px 12px 4px;background:#111;border:1px solid #ffd65a88;color:#ffd65a;font-weight:900;font-size:13px;white-space:nowrap}
@keyframes scMascot{0%{opacity:0;transform:translate(-50%,30px) scale(.4)}22%{opacity:1;transform:translate(-50%,-6px) scale(1.08)}75%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-16px) scale(.9)}}

/* ---------- le Trésor : coffre en haut du panier ---------- */
.tresor{display:flex;align-items:center;gap:16px;margin:4px 0 16px;padding:16px;border-radius:22px;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 15% 50%,#2a1d06 0%,#0c0b0e 60%);border:1px solid #f5b40055;box-shadow:inset 0 0 40px #f5b40014}
.coffre{position:relative;flex:none;width:92px;height:80px;perspective:300px}
.coffre .base{position:absolute;left:4px;right:4px;bottom:0;height:46px;border-radius:6px 6px 12px 12px;
  background:linear-gradient(180deg,#8a5a12,#4a2e06);box-shadow:inset 0 0 0 3px #ffd65a,inset 0 -8px 12px #0008,0 10px 18px #000a}
.coffre .base:before{content:"";position:absolute;left:0;right:0;top:16px;height:6px;background:var(--goldgrad)}
.coffre .lid{position:absolute;left:4px;right:4px;bottom:44px;height:28px;border-radius:40px 40px 6px 6px;transform-origin:50% 100%;
  background:linear-gradient(180deg,#a26b14,#5a370a);box-shadow:inset 0 0 0 3px #ffd65a,0 -4px 10px #0006;transition:transform .7s cubic-bezier(.3,1.6,.5,1)}
.coffre .lock{position:absolute;z-index:2;left:50%;bottom:12px;width:16px;height:18px;margin-left:-8px;border-radius:4px;background:var(--goldgrad);box-shadow:0 0 8px #f5b400}
.coffre .pile{position:absolute;left:12px;right:12px;bottom:38px;height:18px;opacity:0;border-radius:50% 50% 0 0;
  background:radial-gradient(circle at 20% 70%,#fff1b8 0 5px,#f5b400 6px 8px,transparent 9px),radial-gradient(circle at 48% 45%,#fff1b8 0 6px,#f5b400 7px 9px,transparent 10px),radial-gradient(circle at 78% 70%,#fff1b8 0 5px,#f5b400 6px 8px,transparent 9px),radial-gradient(ellipse at 50% 100%,#ffd65a 0 60%,transparent 70%);
  filter:drop-shadow(0 0 8px #ffd65a)}
.coffre .rays{position:absolute;left:50%;bottom:40px;width:160px;height:120px;margin-left:-80px;opacity:0;pointer-events:none;
  background:conic-gradient(from 200deg at 50% 100%,transparent 0deg,#ffd65a66 18deg,transparent 30deg,#fff1b855 46deg,transparent 60deg,#ffd65a66 78deg,transparent 92deg,#fff1b844 110deg,transparent 140deg);
  filter:blur(2px);transition:opacity .6s .25s}
.tresor.open .lid{transform:translate(-6px,-20px) rotate(-16deg)} .tresor.open .rays,.tresor.open .pile{opacity:1}
.tresor.opening .lid{animation:lidOpen .9s .15s cubic-bezier(.3,1.6,.5,1) forwards}
.tresor.opening .rays{animation:raysOn .8s .45s forwards}
@keyframes lidOpen{0%{transform:none}35%{transform:translate(0,-4px) rotate(4deg)}100%{transform:translate(-6px,-20px) rotate(-16deg)}}
.tresor.opening .pile{animation:pileOn .5s .55s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes pileOn{from{opacity:0;transform:translateY(10px) scale(.6)}to{opacity:1;transform:none}}
@keyframes raysOn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.tr-info{display:flex;flex-direction:column;min-width:0}
.tr-info small{font-family:var(--mono,monospace);font-size:11px;letter-spacing:3px;color:#9a968c}
.tr-total{font-family:"Russo One",sans-serif;font-weight:400;font-size:34px;line-height:1.1;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px #f5b40055)}
.tr-info>span{font-size:12.5px;font-weight:700;color:#cfc9ba}

/* ---------- cartes royales ---------- */
.item.royal{position:relative;overflow:hidden;background:linear-gradient(135deg,#17130a,#0d0c10 60%);border:1px solid #f5b40044;
  box-shadow:0 8px 20px #0006;animation:royalIn .55s var(--d,0ms) cubic-bezier(.2,1.3,.4,1) both}
@keyframes royalIn{from{opacity:0;transform:translateY(18px) rotateX(-25deg) scale(.95)}to{opacity:1;transform:none}}
.item.royal:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,#ffffff14,transparent);transform:skewX(-20deg);animation:royalSheen 5s calc(var(--d,0ms) + 1s) ease-in-out infinite}
@keyframes royalSheen{0%,70%{left:-60%}100%{left:140%}}
.item.royal .em{background:radial-gradient(circle at 35% 30%,#3a2a0a,#120d04);border:2px solid #ffd65a;box-shadow:0 0 14px #f5b40044,inset 0 0 10px #000a;transition:transform .25s cubic-bezier(.2,1.4,.4,1);border-radius:50%}
.item.royal .p{background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.item.royal .qty button{transition:transform .15s}
.item.royal .qty button:active{transform:scale(.8)}
.item.royal .qty .q{min-width:14px;text-align:center}

/* tranché en deux */
.slash-h{clip-path:inset(0 0 50% 0);animation:slashH .6s cubic-bezier(.3,0,.6,1) forwards}
.slash-b{clip-path:inset(50% 0 0 0);animation:slashB .6s cubic-bezier(.3,0,.6,1) forwards}
@keyframes slashH{to{transform:translate(-40px,-30px) rotate(-8deg);opacity:0}}
@keyframes slashB{to{transform:translate(50px,40px) rotate(7deg);opacity:0}}
.slash-line{position:fixed;z-index:331;height:3px;margin-top:-1.5px;pointer-events:none;border-radius:3px;transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,#fff,#ffd65a,#fff,transparent);box-shadow:0 0 14px #ffd65a,0 0 4px #fff;animation:slashLine .35s ease-out forwards}
@keyframes slashLine{0%{transform:scaleX(0) rotate(-4deg);opacity:1}60%{transform:scaleX(1) rotate(-4deg);opacity:1}100%{transform:scaleX(1) rotate(-4deg);opacity:0}}

.undo-pill{position:fixed;left:50%;bottom:calc(98px + var(--safe-b,0px));z-index:240;transform:translateX(-50%);display:flex;align-items:center;gap:12px;
  padding:10px 10px 10px 16px;border-radius:99px;background:#17140c;border:1px solid #ffd65a77;box-shadow:0 10px 30px #000c;font-size:13px;font-weight:700;white-space:nowrap;animation:undoIn .35s cubic-bezier(.2,1.5,.4,1)}
.undo-pill button{padding:7px 13px;border-radius:99px;background:var(--goldgrad);color:#1a1200;font-weight:900;font-size:12.5px}
.undo-pill.out{opacity:0;transform:translate(-50%,20px);transition:.3s}
@keyframes undoIn{from{opacity:0;transform:translate(-50%,30px) scale(.8)}}

/* ---------- souvent pris avec ---------- */
.sugg-h{margin:18px 2px 8px;font-family:"Russo One",sans-serif;font-weight:400;font-size:15px;color:#cfc9ba}
.sugg{display:grid;gap:8px}
.sugg-c{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:16px;text-align:left;background:#ffffff08;border:1px dashed #f5b40055;transition:transform .15s,border-color .2s}
.sugg-c:active{transform:scale(.97);border-color:#ffd65a}
.sg-em{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:19px;background:#1a1408;border:1px solid #f5b40055}
.sg-t{flex:1;min-width:0}
.sg-t b{display:block;font-size:13px}
.sg-t small{display:block;font-size:11.5px;color:#9a968c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-p{flex:none;text-align:right;font-family:"Russo One",sans-serif;font-size:14px;color:#ffd65a}
.sg-p i{display:block;font-style:normal;font-family:Manrope,sans-serif;font-weight:900;font-size:11px;color:#62d0ff}

/* ---------- total, code promo, tampon ---------- */
.sum{position:relative;overflow:hidden}
.sum .st.barre{position:relative;color:#9a968c}
.sum .st.barre:after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px;background:#ff5470;transform-origin:0 50%;animation:barre .5s .3s ease-out both}
@keyframes barre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stamp{position:absolute;right:14px;top:12px;padding:4px 10px;border:3px solid #3ddc84;border-radius:8px;color:#3ddc84;font-style:normal;font-family:"Russo One",sans-serif;font-size:18px;letter-spacing:2px;
  transform:rotate(-14deg) scale(3);opacity:0;pointer-events:none;text-shadow:0 0 10px #3ddc8466}
.sum.stamped .stamp{animation:stamp .55s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stamp{0%{opacity:0;transform:rotate(-14deg) scale(3)}60%{opacity:1;transform:rotate(-14deg) scale(.9)}100%{opacity:.9;transform:rotate(-14deg) scale(1)}}
#promo.bad{animation:bad .45s;border-color:#ff5470}
@keyframes bad{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* ---------- bouton paiement + plongée ---------- */
.go-pay{position:relative;overflow:hidden}
.go-pay:after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,#ffffffaa,transparent);transform:skewX(-20deg);animation:royalSheen 3.2s 1s ease-in-out infinite}
.pay-warp{position:fixed;inset:0;z-index:330;pointer-events:none;background:radial-gradient(circle at 50% 70%,#fff 0%,#ffd65a 18%,#f5b40055 40%,transparent 70%);animation:payWarp .55s ease-out forwards}
@keyframes payWarp{0%{opacity:0;transform:scale(.2)}35%{opacity:1}100%{opacity:0;transform:scale(2.4)}}

/* ---------- panier vide ---------- */
.tresor-vide{text-align:center;padding:24px 4px 10px}
.tv-mascot{width:180px;height:180px;margin:0 auto 10px;border-radius:50%;overflow:hidden;border:3px solid #ffd65a;box-shadow:0 0 40px #f5b40055;animation:tvFloat 3.4s ease-in-out infinite}
.tv-mascot video{width:100%;height:100%;object-fit:cover}
@keyframes tvFloat{50%{transform:translateY(-8px)}}
.tresor-vide h3{font-family:"Russo One",sans-serif;font-weight:400;font-size:22px;margin-bottom:4px}
.tresor-vide p{color:#9a968c;font-size:13.5px;margin-bottom:16px}
.tresor-vide .sugg{text-align:left;margin-bottom:16px}

@media (prefers-reduced-motion:reduce){
  .item.royal,.item.royal:after,.tv-mascot,.go-pay:after{animation:none!important}
  .tresor.opening .lid{animation:none;transform:translate(-6px,-20px) rotate(-16deg)}
  .tresor.opening .pile,.tresor.opening .rays{animation:none;opacity:1}
}
body.lite .item.royal:after,body.lite .go-pay:after{animation:none}

/* =========================================================
   PANIER v2 — Couronnement, coffre 3D, rouleaux, montée de formule, pichenette, piste de paiement
   ========================================================= */
/* ---------- le Couronnement ---------- */
.cr-ov{position:fixed;inset:0;z-index:340;display:grid;place-items:center;touch-action:none;
  background:radial-gradient(circle at 50% 42%,#2a1a0399 0%,#000d 62%);animation:crBg .35s ease-out both;transition:background .35s}
@keyframes crBg{from{background:transparent}}
.cr-rays{position:absolute;left:50%;top:42%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;pointer-events:none;opacity:.85;
  background:repeating-conic-gradient(from 0deg,#ffd65a30 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 55%);mask:radial-gradient(circle,#000 8%,transparent 55%);
  animation:crRays 7s linear infinite,crIn2 .5s ease-out both}
@keyframes crRays{to{transform:rotate(360deg)}}
@keyframes crIn2{from{opacity:0;transform:scale(.3)}}
.cr-stage{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);perspective:700px}
.cr-card{display:flex;flex-direction:column;align-items:center;gap:4px;width:230px;padding:22px 18px 18px;border-radius:24px;text-align:center;color:#1a1200;
  background:var(--goldgrad);box-shadow:0 0 0 3px #fff8,0 30px 70px #000c,0 0 90px #f5b400aa;touch-action:none;
  animation:crCardIn .62s cubic-bezier(.2,1.25,.35,1) both;transition:width .38s cubic-bezier(.3,1.4,.5,1),height .38s,padding .38s,border-radius .38s}
@keyframes crCardIn{from{transform:translate(var(--sx),var(--sy)) scale(.25) rotateY(540deg);opacity:.3}to{transform:none;opacity:1}}
.cr-em{font-size:58px;line-height:1;filter:drop-shadow(0 4px 4px #0006);transition:font-size .38s}
.cr-card b{font-family:"Russo One",sans-serif;font-weight:400;font-size:19px;line-height:1.1}
.cr-card small{font-weight:800;font-size:12px;opacity:.7}
.cr-card i{font-style:normal;font-family:"Russo One",sans-serif;font-size:28px;margin-top:2px}
.cr-crown{position:absolute;left:50%;top:42%;font-size:120px;line-height:1;pointer-events:none;filter:drop-shadow(0 0 30px #ffd65a) drop-shadow(0 12px 10px #000a);
  transform:translate(-50%,-260%) rotate(-24deg);opacity:0;animation:crDrop .4s .55s cubic-bezier(.6,0,.9,.5) forwards}
@keyframes crDrop{0%{opacity:1;transform:translate(-50%,-300%) rotate(-24deg) scale(1.3)}100%{opacity:1;transform:translate(-50%,-128%) rotate(-6deg) scale(1)}}
.cr-ov.hit .cr-stage{animation:crShake .45s}
@keyframes crShake{20%{transform:translate(-50%,-50%) translate(-10px,6px) rotate(-2deg)}40%{transform:translate(-50%,-50%) translate(9px,-5px) rotate(2deg)}60%{transform:translate(-50%,-50%) translate(-6px,3px)}80%{transform:translate(-50%,-50%) translate(4px,-2px)}}
.cr-ov.hit .cr-crown{animation:none;opacity:1;transform:translate(-50%,-128%) rotate(-6deg)}
.cr-sacre{position:absolute;left:0;right:0;top:calc(42% + 120px);text-align:center;font-family:"Russo One",sans-serif;font-weight:400;font-size:42px;letter-spacing:4px;pointer-events:none;
  background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px #f5b400) drop-shadow(0 4px 0 #6b4a00);opacity:0;transform:scale(2.6)}
.cr-ov.hit .cr-sacre{animation:crSacre .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes crSacre{to{opacity:1;transform:scale(1)}}
/* la carte devient une pièce */
.cr-ov.coin .cr-crown{transition:opacity .3s,transform .3s;opacity:0;transform:translate(-50%,-180%) scale(.6)}
.cr-ov.coin .cr-sacre{animation:crSacreOut .3s forwards}
@keyframes crSacreOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.7) translateY(20px)}}
.cr-ov.coin .cr-card{width:128px;height:128px;padding:0;border-radius:50%;justify-content:center;animation:crSpin 1.6s linear infinite}
.cr-ov.coin .cr-card b,.cr-ov.coin .cr-card small,.cr-ov.coin .cr-card i{display:none}
.cr-ov.coin .cr-em{font-size:62px}
.cr-card.free{cursor:grab;animation:crSpin 1.6s linear infinite,crPulse 1s ease-in-out infinite;box-shadow:0 0 0 4px #fff9,0 0 0 10px #f5b40055,0 0 80px #f5b400}
@keyframes crSpin{to{rotate:y 360deg}}
@keyframes crPulse{50%{scale:1.08}}
.cr-ov.grab .cr-card{cursor:grabbing;animation-play-state:paused}
.cr-hint{position:absolute;left:0;right:0;bottom:calc(150px + var(--safe-b,0px));text-align:center;font-weight:900;font-size:17px;color:#fff;opacity:0;pointer-events:none;text-shadow:0 2px 10px #000}
.cr-hint span{display:inline-block;animation:crArrow .8s ease-in-out infinite}
@keyframes crArrow{50%{transform:translateY(8px)}}
.cr-ov.coin .cr-hint{transition:opacity .4s .3s;opacity:1}
.cr-ov.out{background:transparent;pointer-events:none}
.cr-ov.out .cr-rays,.cr-ov.out .cr-hint,.cr-ov.out .cr-crown,.cr-ov.out .cr-sacre{opacity:0;transition:opacity .25s}
.cr-coin-fly{position:fixed;left:0;top:0;z-index:345;pointer-events:none;width:110px;height:110px;border-radius:50%;display:grid;place-items:center;font-size:52px;
  background:var(--goldgrad);box-shadow:0 0 0 3px #fff9,0 0 60px #f5b400;will-change:transform}
.rain-coin{position:fixed;left:0;top:0;z-index:335;pointer-events:none;font-size:24px;font-style:normal;will-change:transform;filter:drop-shadow(0 0 6px #f5b40088)}

/* ---------- coffre 3D ---------- */
.coffre-slot{position:relative;flex:none;width:150px;height:132px;display:grid;place-items:center;margin:-10px -14px -10px -10px}
.coffre3d{position:absolute;inset:0}
.coffre-canvas{width:150px!important;height:132px!important;display:block;touch-action:none;cursor:grab;animation:in .5s}
.tresor.has3d .coffre{display:none}
.tr-info>span{font-size:12px}

/* ---------- total en rouleaux ---------- */
.tr-total{display:inline-flex;align-items:baseline;filter:drop-shadow(0 0 14px #f5b40055)}
.rl{display:inline-block;height:1em;overflow:hidden;line-height:1em}
.rl-s{display:flex;flex-direction:column;transition:transform 1.2s calc(var(--i) * 90ms) cubic-bezier(.2,1.15,.3,1)}
.rl-s span,.rl-x{display:block;height:1em;line-height:1em;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rl-x{display:inline-block}

/* ---------- montée de formule ---------- */
.item.royal .up{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;border-radius:99px;font-size:11.5px;font-weight:900;color:#62d0ff;
  background:#2aabee14;border:1px solid #2aabee66;animation:upPulse 2.4s ease-in-out infinite}
.item.royal .up b{color:#ffd65a}
@keyframes upPulse{50%{box-shadow:0 0 14px #2aabee66}}
.item.royal.upgraded{animation:upgraded .9s cubic-bezier(.2,1.4,.4,1) both;border-color:#ffd65a}
@keyframes upgraded{0%{transform:scale(.85) rotateY(90deg);filter:brightness(3)}50%{transform:scale(1.05) rotateY(0);filter:brightness(1.6)}100%{transform:none;filter:none}}
.item.royal.upgraded:before{content:"⚡ FORMULE SUPÉRIEURE";position:absolute;right:10px;top:8px;font-size:10px;font-weight:900;letter-spacing:1px;color:#1a1200;background:var(--goldgrad);padding:3px 7px;border-radius:6px;z-index:2;animation:in .4s .3s both}

/* ---------- pichenette ---------- */
.flick-hint{margin:8px 2px 0;font-size:11.5px;color:#7a766c;text-align:center}
.item.royal.drag{transition:none;z-index:5}
.item.flying{transition:none;box-shadow:0 20px 50px #000c,0 0 30px #f5b40066}

/* ---------- glisser pour payer ---------- */
.pay-track{position:relative;height:62px;margin-top:16px;border-radius:99px;overflow:hidden;background:#0d0c10;border:1px solid #f5b40066;box-shadow:inset 0 0 20px #000,0 0 30px #f5b40022}
.pt-fill{position:absolute;left:0;top:0;bottom:0;width:62px;border-radius:99px;background:var(--goldgrad);opacity:.9;transition:width .45s cubic-bezier(.3,1.5,.5,1)}
.pt-txt{position:absolute;inset:0;display:grid;place-items:center;padding-left:40px;font-weight:900;font-size:14.5px;pointer-events:none;
  background:linear-gradient(90deg,#cfc9ba 30%,#fff 50%,#cfc9ba 70%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ptShine 2.2s linear infinite;opacity:calc(1 - var(--p,0) * 1.4)}
@keyframes ptShine{to{background-position:-200% 0}}
.pt-knob{position:absolute;left:4px;top:4px;width:54px;height:54px;border-radius:50%;font-size:26px;background:var(--goldgrad);box-shadow:0 0 0 3px #fff6,0 0 24px #f5b400;touch-action:none;
  transition:transform .45s cubic-bezier(.3,1.5,.5,1);z-index:2;animation:knob 1.6s ease-in-out infinite}
@keyframes knob{50%{box-shadow:0 0 0 3px #fff6,0 0 40px #ffd65a}}
.pay-track.drag .pt-knob{animation:none}
.pay-track.done{border-color:#ffd65a;box-shadow:0 0 50px #f5b400}
.pt-alt{display:block;margin:10px auto 0;font-size:12px;font-weight:700;color:#7a766c;text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .rl-s{transition:none}
  .item.royal .up,.pt-txt,.pt-knob{animation:none}
}
body.lite .item.royal .up,body.lite .pt-txt,body.lite .pt-knob{animation:none}