/* TOP only: native, readable interface over an Image2 product artwork. */
@font-face{font-family:"Pokeriba Gothic Top";src:url("pokeriba-gothic-top-20261002.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
.idle.idle-redesign{background:radial-gradient(ellipse at 50% 62%,#211441 0,transparent 64%),linear-gradient(160deg,#080c1c,#0a0818 60%,#070b19);font-family:"Pokeriba Gothic Top","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;overflow:hidden}
.idle-redesign .top-content{position:relative;z-index:2;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px;height:100%;padding:calc(22px + var(--st)) 22px calc(62px + var(--sb));isolation:isolate}
.idle-redesign .top-header{height:44px;display:flex;align-items:center;justify-content:flex-start;margin:0 0 8px}
.idle-redesign .top-brand{width:128px;flex:none;padding:5px 8px;background:#fff;border-radius:10px;box-shadow:0 5px 20px #0003}
.idle-redesign .top-brand img{display:block;width:100%;height:auto}
.idle-redesign .top-copy{text-align:center;z-index:3}
.idle-redesign .top-membership{width:max-content;margin:0 auto 15px;display:flex;align-items:center;gap:8px;padding:5px 13px 5px 6px;border:1px solid #35d47c8c;border-radius:999px;background:linear-gradient(120deg,#0b422b,#09251d);color:#e8ffef;font-size:13px;line-height:22px;font-weight:800;letter-spacing:.075em;box-shadow:0 0 18px #04c75514,inset 0 1px #d1ffdf13}
.idle-redesign .top-line-icon{position:relative;display:grid;place-items:center;width:27px;height:24px;background:#fff;border-radius:50%;font-family:Arial,sans-serif;font-size:9px;letter-spacing:-.025em;font-weight:800;color:#06b853}
.idle-redesign .top-line-icon:after{content:"";position:absolute;bottom:-2px;left:8px;width:5px;height:5px;transform:skewY(-25deg);background:#fff}
.idle-redesign .top-title{margin:0;line-height:1.1;text-align:center;font-weight:900;letter-spacing:-.045em}
.idle-redesign .top-eyebrow{display:block;margin:0 0 8px;font-size:clamp(17px,4.9vw,23px);line-height:1.25;font-weight:700;letter-spacing:.14em;color:#f7f5ff}
.idle-redesign .top-title strong{display:block;font-size:clamp(49px,15.35vw,73px);line-height:1.15;font-weight:900;letter-spacing:-.07em;padding:0 .04em .09em;color:#f7dfa3;background:linear-gradient(178deg,#fffdf3 10%,#ffebae 43%,#f1cf73 70%,#fff2c4 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 #73532a) drop-shadow(0 6px 18px #d7a83c12)}
.idle-redesign .top-offer{margin:10px 0 0;font-size:clamp(12px,3.5vw,16px);line-height:1.65;font-weight:600;letter-spacing:.035em;color:#efedf6}
.idle-redesign .top-hero{position:relative;display:grid;place-items:center;min-height:0;width:calc(100% + 44px);margin-left:-22px;isolation:isolate}
.idle-redesign .top-pack-art{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 15px 20px #01021080);animation:topPackLevitate 5s ease-in-out infinite;animation-play-state:paused;will-change:transform}
.idle-redesign .top-pack-halo{position:absolute;width:76%;height:68%;top:17%;left:12%;border-radius:50%;background:radial-gradient(ellipse,#8b45e642,#6e3aea18 42%,transparent 70%);transform:scale(.95);animation:topHaloBreathe 6s ease-in-out infinite;animation-play-state:paused}
.idle-redesign .top-action{position:relative;z-index:4;padding-top:2px}
.idle-redesign .top-open{position:relative;width:100%;height:76px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 42px 0 18px;border:1px solid #fff1c2;border-radius:22px;overflow:hidden;color:#11172b;background:linear-gradient(173deg,#fff4c7 0%,#f9e5a6 36%,#e7c476 76%,#f2d892 100%);box-shadow:0 0 0 3px #a9864466,inset 0 2px 0 #fff9df,inset 0 -4px 0 #98713a40,0 8px 0 #634a2c,0 14px 34px #0007;font-size:clamp(20px,5.75vw,27px);line-height:1.2;font-weight:900;letter-spacing:.015em;animation:topButtonInvite 3.5s ease-in-out infinite;animation-play-state:paused;transition:filter .16s,box-shadow .16s;touch-action:manipulation}
.idle-redesign .top-open:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(125deg,#fff1 0 1px,transparent 1px 4px);pointer-events:none}
.idle-redesign .top-open:after{content:"";position:absolute;inset:-30% -50%;background:linear-gradient(110deg,transparent 40%,#fff8 49%,transparent 58%);transform:translateX(-100%);animation:topButtonSheen 4.6s ease-in-out infinite;animation-play-state:paused;pointer-events:none}
.idle-redesign .top-open-icon{width:29px;height:34px;flex:none}
.idle-redesign .top-open-arrow{position:absolute;right:21px;width:13px;height:21px;top:50%;transform:translateY(-50%)}
.idle-redesign .top-open:hover,.idle-redesign .top-open:focus-visible{filter:brightness(1.05);animation-play-state:paused}
.idle-redesign .top-open:focus-visible{outline:3px solid #fff;outline-offset:7px}
.idle-redesign .top-open:active{animation:none;transform:translateY(5px);box-shadow:0 0 0 3px #a9864466,inset 0 2px 0 #fff9df,inset 0 -2px 0 #98713a40,0 3px 0 #634a2c,0 8px 18px #0007}
.idle-redesign .top-atmosphere,.idle-redesign .top-atmosphere span{position:absolute;pointer-events:none}
.idle-redesign .top-atmosphere{inset:0;overflow:hidden;z-index:0}
.idle-redesign .top-aura{width:180%;height:100%;border-radius:50%;opacity:.7;animation-play-state:paused;will-change:transform}
.idle-redesign .top-aura-violet{top:-7%;left:-58%;background:radial-gradient(ellipse at 40% 56%,#7640a038 0%,#39225422 34%,transparent 66%);animation:topAtmosphereDrift 15s ease-in-out infinite alternate}
.idle-redesign .top-aura-blue{top:13%;left:-8%;background:radial-gradient(ellipse at 50% 45%,#284b7b38,#251b591a 36%,transparent 64%);animation:topAtmosphereDrift 19s -9s ease-in-out infinite alternate-reverse}
.idle-redesign .top-dust{inset:0;background-repeat:no-repeat;animation-play-state:paused;will-change:transform,opacity}
.idle-redesign .top-dust-near{background-image:radial-gradient(circle,#ffebbd 0 1px,transparent 2px),radial-gradient(circle,#b69cff 0 1px,transparent 3px),radial-gradient(circle,#f7d791 0 1px,transparent 2px),radial-gradient(circle,#c9b8ff 0 1px,transparent 2px),radial-gradient(circle,#f2d99b 0 1px,transparent 3px),radial-gradient(circle,#aa86ff 0 1px,transparent 2px);background-size:5px 5px,8px 8px,6px 6px,5px 5px,7px 7px,5px 5px;background-position:9% 44%,90% 35%,84% 72%,15% 76%,70% 89%,18% 24%;opacity:.65;animation:topDustRise 10s ease-in-out infinite}
.idle-redesign .top-dust-far{background-image:radial-gradient(circle,#cab8ff 0 1px,transparent 2px),radial-gradient(circle,#f4d494 0 1px,transparent 3px),radial-gradient(circle,#a9beff 0 1px,transparent 2px),radial-gradient(circle,#f5cf86 0 1px,transparent 3px),radial-gradient(circle,#b789ed 0 1px,transparent 2px);background-size:5px 5px,7px 7px,5px 5px,8px 8px,6px 6px;background-position:4% 65%,95% 53%,33% 91%,7% 31%,71% 11%;opacity:.4;animation:topDustRise 14s -6s ease-in-out infinite reverse}
.idle-redesign .top-light-cross{left:-35%;top:40%;width:150%;height:70%;background:linear-gradient(135deg,transparent 44%,#a575e808 49%,#cf94ff13 50%,#a575e808 51%,transparent 57%);animation:topLightWander 18s ease-in-out infinite;animation-play-state:paused;will-change:transform}
.idle-redesign .top-hero-glint,.idle-redesign .top-action-glints span{position:absolute;display:block;width:18px;height:18px;background:radial-gradient(circle,#fff8d8 0 10%,#f6d28d 25%,transparent 65%);clip-path:polygon(50% 0,57% 42%,100% 50%,57% 58%,50% 100%,43% 58%,0 50%,43% 42%);pointer-events:none;animation:topGlintTwinkle 4s ease-in-out infinite;animation-play-state:paused}
.idle-redesign .top-hero-glint-a{left:13%;top:39%;animation-delay:-.6s}
.idle-redesign .top-hero-glint-b{right:12%;top:72%;width:13px;height:13px;animation-delay:-2.8s}
.idle-redesign .top-action-glints{position:absolute;inset:-7px;pointer-events:none}
.idle-redesign .top-action-glints span:nth-child(1){left:1%;top:4%;animation-delay:-1.8s}
.idle-redesign .top-action-glints span:nth-child(2){right:3%;top:2%;width:13px;height:13px;animation-delay:-.5s}
.idle-redesign .top-action-glints span:nth-child(3){right:16%;bottom:-4px;width:11px;height:11px;animation-delay:-3s}
.idle-redesign .top-atmosphere span{animation-play-state:paused}
.idle-redesign.is-active .top-pack-art,.idle-redesign.is-active .top-pack-halo,.idle-redesign.is-active .top-open,.idle-redesign.is-active .top-open:after,.idle-redesign.is-active .top-aura,.idle-redesign.is-active .top-dust,.idle-redesign.is-active .top-light-cross,.idle-redesign.is-active .top-hero-glint,.idle-redesign.is-active .top-action-glints span{animation-play-state:running}
.idle-redesign.is-active .top-open:hover,.idle-redesign.is-active .top-open:focus-visible{animation-play-state:paused}
.app[data-state="idle"] .sound-toggle{top:calc(22px + var(--st));bottom:auto;right:22px;min-width:44px;min-height:44px;padding:0 9px;border-radius:12px;border:1px solid #c4c6d04a;background:#ffffff06;color:#d0cfde;font-size:9px;line-height:1.3;font-family:"Pokeriba Gothic Top",sans-serif;box-shadow:none}
.app[data-state="idle"] .sound-toggle[aria-pressed="true"]{border-color:#d4c38b66;color:#f7e7b1}
@keyframes topPackLevitate{0%,100%{transform:translateY(2px) rotate(-.4deg)}50%{transform:translateY(-7px) rotate(.5deg)}}
@keyframes topHaloBreathe{0%,100%{transform:scale(.94);opacity:.7}50%{transform:scale(1.08);opacity:1}}
@keyframes topAtmosphereDrift{from{transform:translate3d(-4%,-3%,0) rotate(-8deg)}to{transform:translate3d(8%,6%,0) rotate(13deg)}}
@keyframes topDustRise{0%,100%{transform:translate3d(0,10px,0);opacity:.3}50%{transform:translate3d(5px,-25px,0);opacity:.8}}
@keyframes topLightWander{0%,100%{transform:translate3d(-12%,-5%,0) rotate(-10deg);opacity:.4}50%{transform:translate3d(10%,8%,0) rotate(8deg);opacity:1}}
@keyframes topGlintTwinkle{0%,100%{opacity:.3;transform:scale(.75) rotate(0)}45%{opacity:1;transform:scale(1.12) rotate(15deg)}}
@keyframes topButtonInvite{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes topButtonSheen{0%,55%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
@media(max-height:700px){.idle-redesign .top-content{padding:calc(13px + var(--st)) 18px calc(43px + var(--sb));gap:5px}.idle-redesign .top-header{height:35px;margin-bottom:3px}.idle-redesign .top-brand{width:112px;padding:4px 7px;border-radius:8px}.idle-redesign .top-membership{margin-bottom:10px;padding-top:3px;padding-bottom:3px;font-size:11px}.idle-redesign .top-eyebrow{font-size:17px;margin-bottom:5px}.idle-redesign .top-title strong{font-size:clamp(48px,15vw,62px)}.idle-redesign .top-offer{font-size:12px;line-height:1.6;margin-top:5px}.idle-redesign .top-hero{width:calc(100% + 36px);margin-left:-18px}.idle-redesign .top-open{height:64px;border-radius:18px;font-size:20px;gap:9px}.idle-redesign .top-open-icon{width:25px;height:30px}.app[data-state="idle"] .sound-toggle{top:calc(10px + var(--st));right:18px}}
@media(prefers-reduced-motion:reduce){.idle-redesign *,.idle-redesign *:before,.idle-redesign *:after{animation:none!important;transition:none!important;will-change:auto!important}}