.jp-pills{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:12px; width:100%;
}
.jp-pill{
  --jp-c:#f5c542; --jp-glow:rgba(245,197,66,.45);
  position:relative; display:flex; align-items:stretch;
  flex:0 0 auto; max-width:100%;
  height:52px; padding:0 0 0 4px;
  border-radius:12px;
  background:linear-gradient(180deg,#141416,#050506);
  border:2px solid var(--jp-c);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 20px -4px var(--jp-glow), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.jp-pill:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 28px -2px var(--jp-glow); }
.jp-pill--bump{ animation:jpBump .55s cubic-bezier(.2,.9,.3,1.4); }
@keyframes jpBump{ 0%{transform:scale(1)} 35%{transform:scale(1.07)} 100%{transform:scale(1)} }

.jp-pill__icon{ display:flex; align-items:center; justify-content:center; width:38px; flex:0 0 38px; }
.jp-pill__icon svg{ width:20px; height:20px; fill:var(--jp-c); filter:drop-shadow(0 0 6px var(--jp-glow)); }
.jp-pill__sep{ width:1px; align-self:center; height:60%; background:rgba(255,255,255,.16); }
.jp-pill__val{
  display:flex; align-items:center; justify-content:flex-end;
  flex:1 1 auto; min-width:74px; padding:0 12px;
  font:800 19px/1 Geist,'Segoe UI',system-ui,sans-serif;
  color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  text-shadow:0 0 12px rgba(255,255,255,.18); white-space:nowrap;
}
.jp-pill__cur{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:0 0 20px; border-radius:0 8px 8px 0;
  background:linear-gradient(180deg,#26262a,#0d0d0f);
  border-left:1px solid rgba(255,255,255,.10);
}
.jp-pill__cur i{ font:700 8px/1.15 Geist,system-ui,sans-serif; font-style:normal; color:#9aa3b2; letter-spacing:.04em; }

.jp-pill--skeleton{ --jp-c:#5a5a62; --jp-glow:rgba(90,90,98,.3); }
.jp-pill--skeleton .jp-pill__val{ color:#5f6672; animation:jpPulse 1.4s ease-in-out infinite; }
.jp-pill--skeleton .jp-pill__icon::before{
  content:''; width:18px; height:18px; border-radius:5px; background:#2a2a30;
  animation:jpPulse 1.4s ease-in-out infinite;
}
@keyframes jpPulse{ 0%,100%{opacity:.45} 50%{opacity:.9} }

.jp-wrap{
  position:relative; overflow:hidden; border-radius:22px;
  padding:28px 18px 26px;
  background:
    radial-gradient(ellipse 70% 120% at 50% -10%, rgba(255,60,60,.28), transparent 60%),
    radial-gradient(ellipse 60% 100% at 10% 110%, rgba(120,0,20,.55), transparent 60%),
    linear-gradient(160deg,#3d0710 0%,#5a0d18 38%,#7a1120 62%,#450913 100%);
  box-shadow:
    0 24px 60px -28px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,220,180,.14),
    inset 0 -40px 80px -40px rgba(0,0,0,.6);
  isolation:isolate;
}
.jp-wrap::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:2;
  background:radial-gradient(ellipse 80% 90% at 50% 50%, transparent 38%, rgba(0,0,0,.6) 100%);
}
.jp-wrap .jp-pills{ max-width:1100px; }

.jp-ring{
  position:absolute; inset:0; border-radius:inherit; padding:2px;
  pointer-events:none; z-index:4; overflow:hidden;
  border:2px solid rgba(255,190,120,.22);
}
.jp-ring__spin{ display:none; }
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .jp-ring{
    border:0;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite:exclude;
  }
  .jp-ring::before{
    content:''; position:absolute; inset:0; border-radius:inherit;
    box-shadow:inset 0 0 0 2px rgba(255,190,120,.26);
  }
  .jp-ring__spin{
    display:block; position:absolute; top:50%; left:50%;
    width:210%; aspect-ratio:1; transform:translate(-50%,-50%);
    background:conic-gradient(from 0deg,
      transparent 0 18%,
      rgba(255,226,160,.95) 25%,
      rgba(255,150,60,.55) 29%,
      transparent 36% 62%,
      rgba(255,110,110,.85) 70%,
      rgba(255,60,90,.45) 74%,
      transparent 81%);
    animation:jpRingSpin 7s linear infinite;
  }
}
@keyframes jpRingSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.jp-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit; z-index:1; }
.jp-rays{
  position:absolute; top:50%; left:50%; width:180%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(255,210,150,.055) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 8%, transparent 62%);
          mask:radial-gradient(circle at 50% 50%, #000 8%, transparent 62%);
  animation:jpRaysSpin 48s linear infinite;
}
@keyframes jpRaysSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.jp-dots{
  position:absolute; inset:-20%; opacity:.7;
  background-image:
    radial-gradient(circle, rgba(255,90,90,.55) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,150,120,.30) 0 2.5px, transparent 3px),
    radial-gradient(circle, rgba(255,60,60,.22) 0 4px,   transparent 5px);
  background-size:120px 120px, 210px 210px, 340px 340px;
  background-position:0 0, 40px 70px, 130px 20px;
  animation:jpDrift 26s linear infinite;
}
@keyframes jpDrift{ to{ background-position:120px -120px, 250px -140px, 470px -320px; } }
.jp-orb{ position:absolute; border-radius:50%; filter:blur(30px); opacity:.55; }
.jp-orb--1{ width:230px; height:230px; top:-95px;  left:8%;   background:rgba(255,70,70,.5);   animation:jpFloat 9s ease-in-out infinite; }
.jp-orb--2{ width:180px; height:180px; bottom:-85px; right:14%; background:rgba(255,140,60,.35); animation:jpFloat 11s ease-in-out infinite reverse; }
.jp-orb--3{ width:140px; height:140px; top:18%; right:38%;      background:rgba(190,30,60,.45);  animation:jpFloat 13s ease-in-out infinite; }
@keyframes jpFloat{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(20px,-16px,0)} }
.jp-sweep{
  position:absolute; top:-30%; bottom:-30%; width:38%; left:-45%;
  background:linear-gradient(100deg, transparent, rgba(255,235,205,.16) 45%, rgba(255,255,255,.22) 50%, rgba(255,235,205,.16) 55%, transparent);
  transform:skewX(-14deg); mix-blend-mode:screen;
  animation:jpSweep 6.5s ease-in-out infinite;
}
@keyframes jpSweep{ 0%{left:-45%} 55%,100%{left:118%} }
.jp-spark{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#fff4d6; box-shadow:0 0 8px 2px rgba(255,214,140,.85);
  opacity:0; animation:jpTwinkle 4.2s ease-in-out infinite;
}
.jp-spark--1{ top:22%; left:12%; animation-delay:0s;   }
.jp-spark--2{ top:70%; left:26%; animation-delay:.9s;  }
.jp-spark--3{ top:16%; left:47%; animation-delay:1.7s; }
.jp-spark--4{ top:76%; left:63%; animation-delay:2.4s; }
.jp-spark--5{ top:30%; left:82%; animation-delay:3.1s; }
.jp-spark--6{ top:60%; left:92%; animation-delay:3.8s; }
@keyframes jpTwinkle{ 0%,100%{opacity:0;transform:scale(.5)} 45%{opacity:1;transform:scale(1.4)} 70%{opacity:0;transform:scale(.6)} }

.jp-inner{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:20px; }

.jp-title{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:0; line-height:1;
  font-family:Geist,'Segoe UI',system-ui,sans-serif;
  font-size:clamp(28px,4.6vw,50px); font-weight:900;
  letter-spacing:-.01em; text-transform:uppercase; font-style:italic; white-space:nowrap;
}
.jp-word{
  position:relative;
  background-image:linear-gradient(180deg,#ffffff 6%,#ffe9a8 42%,#f5b942 60%,#ffd777 78%,#fff6d6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1.6px rgba(30,12,20,.9); paint-order:stroke fill;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(255,190,90,.45));
}
.jp-word__shine{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
  background-size:260% 100%; background-position:180% 0;
  -webkit-background-clip:text; background-clip:text;
  animation:jpTextShine 5s ease-in-out infinite; mix-blend-mode:screen;
}
@keyframes jpTextShine{ 0%,60%{background-position:180% 0} 100%{background-position:-80% 0} }
.jp-suit{ display:inline-flex; width:clamp(17px,2.3vw,28px); }
.jp-suit svg{ width:100%; height:auto; filter:drop-shadow(0 0 10px rgba(255,160,60,.6)); animation:jpSuit 3.6s ease-in-out infinite; }
.jp-suit--l svg{ fill:#e8eefc; }
.jp-suit--r svg{ fill:#ffc861; animation-delay:1.8s; }
@keyframes jpSuit{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-4px) rotate(-4deg)} }

@media (max-width:720px){
  .jp-wrap{ padding:22px 12px 20px; border-radius:18px; }
  .jp-inner{ gap:16px; }
  .jp-wrap .jp-pills{ gap:10px; row-gap:10px; }
  .jp-wrap .jp-pill{ min-width:calc(50% - 5px); }
  .jp-orb{ filter:blur(24px); }
}
@media (max-width:380px){
  .jp-wrap .jp-pill{ min-width:100%; }
}

.jp-strip{ width:100%; }
.jp-strip .jp-pills{ gap:10px; }

@media (max-width:900px){
  .jp-strip .jp-pills{
    flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity;
    padding-bottom:4px;
    -ms-overflow-style:none; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .jp-strip .jp-pills::-webkit-scrollbar{ display:none; }
  .jp-strip .jp-pill{ scroll-snap-align:center; height:44px; }
  .jp-strip .jp-pill__val{ font-size:15px; min-width:52px; padding:0 9px; }
  .jp-strip .jp-pill__icon{ width:32px; flex-basis:32px; }
  .jp-strip .jp-pill__icon svg{ width:16px; height:16px; }
  .jp-strip .jp-pill__cur i{ font-size:7.5px; }
}

@media (prefers-reduced-motion:reduce){
  .jp-orb,.jp-rays,.jp-dots,.jp-sweep,.jp-spark,.jp-ring__spin,
  .jp-word__shine,.jp-suit svg,.jp-pill--bump,.jp-pill--skeleton .jp-pill__val,
  .jp-pill--skeleton .jp-pill__icon::before{ animation:none !important; }
  .jp-spark{ opacity:.6; }
}