.jp-home{position:relative;isolation:isolate}
.jp-home::before{
  content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 18% 22%,rgba(140,82,230,.22),transparent 70%),
    radial-gradient(34vmax 28vmax at 84% 30%,rgba(92,60,200,.18),transparent 70%),
    radial-gradient(40vmax 30vmax at 60% 88%,rgba(196,96,210,.13),transparent 70%);
}
.jp-home .jp-kicker{font-size:11px;letter-spacing:.14em}
.jp-home .jp-adventure p{font-size:14px;line-height:1.55}
.jp-home .jp-section-intro>p{font-size:15px;line-height:1.6}

.jp-home .jp-connect{
  margin-top:36px;max-width:440px;padding:18px 20px 16px;border-top:0;border-radius:20px;
  background:linear-gradient(160deg,rgba(150,96,220,.16),rgba(40,22,64,.42));
  box-shadow:inset 0 0 0 1px rgba(201,161,229,.22),inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -22px rgba(0,0,0,.9);
}
.jp-home .jp-connect>button{gap:4px 18px;cursor:pointer}
.jp-home .jp-connect small{font-size:11px;letter-spacing:.14em;color:#b9a3cc}
.jp-home .jp-connect strong{font-size:26px}
.jp-home .jp-connect button>span{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;font-size:20px;color:#f4ecfb;
  background:linear-gradient(180deg,#a274e8,#7c4fd0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -8px rgba(0,0,0,.8);
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s;
}
.jp-home .jp-connect>button:hover>span{transform:translateY(-2px) scale(1.04);background:linear-gradient(180deg,#b28af0,#8a5ddb)}
.jp-home .jp-connect .network-status{
  margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(201,161,229,.16);
  font-size:13px;gap:6px 14px;line-height:1.5;color:#c3b1d6;
}
.jp-home .jp-connect .network-status strong{font-size:13px;font-weight:700;color:#efe6f7}
.jp-home .network-status.is-online .status-dot{position:relative}
.jp-home .network-status.is-online .status-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
  animation:jp-ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes jp-ping{75%,100%{transform:scale(2.6);opacity:0}}

.jp-home .jp-hero-scene{transform:perspective(1200px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .6s cubic-bezier(.16,1,.3,1);will-change:transform}
.jp-home .jp-hero-scene img{transform:scale(1.04) translate(var(--px,0),var(--py,0));transition:transform .8s cubic-bezier(.16,1,.3,1)}
.jp-home .jp-hero-scene::after{
  content:"";position:absolute;left:77%;top:39%;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(214,160,255,.85),rgba(160,90,255,.3) 45%,transparent 70%);
  z-index:1;mix-blend-mode:screen;animation:jp-portal 4.5s ease-in-out infinite;
}
@keyframes jp-portal{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
.jp-home .jp-scene-note{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.jp-home .jp-scene-note:hover{transform:rotate(0deg) translateY(-3px)}

.jp-home .jp-adventure{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .5s}
.jp-home .jp-adventure img{transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .6s}
.jp-home .jp-adventure:hover{transform:translateY(-8px);border-color:rgba(201,161,229,.5);box-shadow:0 34px 60px -30px rgba(0,0,0,.95)}
.jp-home .jp-adventure:hover img{transform:scale(1.07);filter:saturate(1.15) brightness(1.06)}
.jp-home .jp-world-links a{transition:background-color .3s}
.jp-home .jp-world-links a:hover{background:rgba(160,110,220,.08)}

.jp-home .jp-seasons img{transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.jp-home .jp-seasons:hover img{transform:scale(1.04)}
.jp-home .jp-season-labels span{padding:6px 12px;border-radius:999px;font-size:11px;box-shadow:inset 0 0 0 1px rgba(201,161,229,.22)}
.jp-home .jp-season-labels span:nth-child(1){color:#b6e8a8}
.jp-home .jp-season-labels span:nth-child(2){color:#f5d58c}
.jp-home .jp-season-labels span:nth-child(3){color:#f2ad7c}
.jp-home .jp-season-labels span:nth-child(4){color:#bcdaf6}

.jp-home .jp-steps{gap:20px;border-top:0;position:relative}
.jp-home .jp-steps>article{
  position:relative;padding:26px 26px 28px;border-radius:22px;
  background:linear-gradient(170deg,rgba(54,30,84,.62),rgba(22,13,34,.75));
  box-shadow:inset 0 0 0 1px rgba(201,161,229,.16),0 24px 46px -30px rgba(0,0,0,.95);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s;
}
.jp-home .jp-steps>article:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(201,161,229,.34),0 30px 52px -30px rgba(0,0,0,.95)}
.jp-home .jp-steps>article>span{
  display:grid;place-items:center;width:58px;height:58px;margin-bottom:18px;border-radius:18px;
  font-size:22px;font-weight:800;color:#f4ecfb;letter-spacing:-.02em;
  background:linear-gradient(160deg,#a274e8,#6a3fc0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 24px -12px rgba(0,0,0,.9);
}
.jp-home .jp-steps h3{font-size:22px}
.jp-home .jp-steps p{font-size:15px;line-height:1.6}

.jp-home .jp-player-box{padding-bottom:30px}
.jp-fame{list-style:none;margin:22px 0 6px;padding:0;display:grid;gap:8px}
.jp-fame li{
  display:grid;grid-template-columns:28px 34px 1fr auto;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;
  background:rgba(20,11,32,.55);box-shadow:inset 0 0 0 1px rgba(201,161,229,.12);
  transition:background-color .25s,transform .35s cubic-bezier(.16,1,.3,1);
}
.jp-fame li:hover{background:rgba(70,40,110,.45);transform:translateX(3px)}
.jp-fame b{font-size:15px;font-weight:800;text-align:center;color:#b48ae6}
.jp-fame li:nth-child(1) b{color:#f2cf73}
.jp-fame li:nth-child(2) b{color:#d6dbe6}
.jp-fame li:nth-child(3) b{color:#e0a274}
.jp-fame img{width:34px;height:34px;border-radius:8px;image-rendering:pixelated}
.jp-fame a{font-weight:700;color:#efe6f7;text-decoration:none;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jp-fame a:hover{color:#d2b4f2}
.jp-fame span{font-size:13px;color:#bba8cf;font-variant-numeric:tabular-nums;white-space:nowrap}
.jp-fame-label{margin:24px 0 0;font-size:11px;font-weight:800;letter-spacing:.14em;color:#c2a9d3}

.jp-home .jp-store-art{overflow:visible}
.jp-home .jp-store-art img{animation:jp-float 6s ease-in-out infinite;filter:drop-shadow(0 26px 30px rgba(0,0,0,.7))}
@keyframes jp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.jp-reveal .jp-home [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.jp-reveal .jp-home [data-reveal].is-in{opacity:1;transform:none}

@media (max-width:650px){
  .jp-home .jp-connect{max-width:none}
  .jp-home .jp-connect strong{font-size:22px}
  .jp-home .jp-hero-scene::after{width:120px;height:120px;margin:-60px 0 0 -60px}
}
@media (prefers-reduced-motion:reduce){
  .jp-home .jp-hero-scene::after,.jp-home .jp-store-art img,.jp-home .network-status .status-dot::after{animation:none}
  .jp-reveal .jp-home [data-reveal]{opacity:1;transform:none;transition:none}
  .jp-home .jp-hero-scene,.jp-home .jp-hero-scene img{transform:none}
}