.sp-shell{--sp-bg:#12182a;--sp-card:#1b2338;--sp-line:#354263;--sp-text:#f4efff;--sp-muted:#bac3d8;--sp-accent:#c0a8ff;--sp-rarity:#bfabff;color:var(--sp-text);background:radial-gradient(ellipse at 85% 0,#282044 0,transparent 58%),var(--sp-bg);border:1px solid var(--sp-line);border-radius:24px;padding:clamp(16px,3vw,36px)}
.sp-shell h1,.sp-shell h2,.sp-shell h3,.sp-shell .kicker,.sp-shell strong{color:var(--sp-text)}
.sp-shell p,.sp-shell small{color:var(--sp-muted)}
.sp-shell .panel{color:var(--sp-text);background:var(--sp-card);border:1px solid var(--sp-line);box-shadow:none}
.sp-shell a:not(.btn){color:var(--sp-accent)}
.sp-shell .btn.primary{color:#150c29;background:#c4a9ff;border-color:#c4a9ff}
.sp-shell .btn.secondary{color:var(--sp-text);background:#252d47;border-color:var(--sp-line)}
.sp-heading,.sp-week,.sp-answers{display:flex;align-items:center;justify-content:space-between;gap:18px}
.sp-heading{margin-bottom:18px}
.sp-heading h1{margin:5px 0}
.sp-heading p{margin:0}
.sp-balance,.sp-nav a,.sp-nav button,.sp-filters button{border:1px solid var(--sp-line);border-radius:12px;background:var(--sp-card);padding:8px 12px;color:var(--sp-text);text-decoration:none}
.sp-balance{display:grid;justify-items:end;white-space:nowrap}
.sp-money,.sp-shortcut{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.sp-money svg,.sp-shortcut svg{width:20px;height:20px;flex:none}
.sp-shortcut{border-radius:12px;padding:5px 7px;text-decoration:none;font-weight:800;font-size:.88rem}
.sp-shortcut svg{width:24px;height:24px}
.sp-nav,.sp-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sp-nav a[aria-current],.sp-filters button[aria-pressed="true"]{border-color:var(--sp-accent);background:#393054}
.sp-sound{margin-left:auto}
.sp-lucky-banner{width:100%;display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;text-align:left;padding:12px 16px;margin-bottom:18px;border-radius:16px;border:1px solid #9c6939;background:linear-gradient(105deg,#352344,#633c35);color:#fff0d9}
.sp-lucky-banner>span:nth-child(2){display:grid;gap:2px}
.sp-lucky-banner strong{font-size:1.25rem}
.sp-lucky-banner small{color:#ffcf83;font-weight:800;letter-spacing:.13em}
.sp-lucky-banner[aria-pressed=true]{outline:2px solid #ffd185}
.sp-layout,.sp-wallet{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);gap:18px;align-items:start}
.sp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:10px}
.sp-tile{display:grid;justify-items:center;align-content:start;gap:7px;padding:10px 6px;min-height:136px;text-align:center;border-radius:14px;background:var(--sp-card);border:1px solid var(--sp-line);color:var(--sp-text);font:inherit;cursor:pointer}
.sp-tile[aria-pressed=true]{border-color:var(--sp-accent);background:#30274c}
.sp-tile>span{font-size:.83rem;font-weight:750}
.sp-tile svg.sp-item-art{width:64px;height:64px}
.sp-preview{height:clamp(150px,24vw,285px);display:grid;place-items:center;border-radius:14px;background:radial-gradient(ellipse at 50% 58%,#40345e,#161b2d 71%);overflow:hidden;margin-bottom:16px}
.sp-preview svg{height:96%;max-width:100%;width:auto}
.sp-lucky-detail .sp-preview .sp-item-art{height:67%;filter:drop-shadow(0 0 20px #ffbb6555)}
.sp-rarity{text-transform:uppercase;font-size:.63rem;letter-spacing:.1em;font-weight:850;color:var(--sp-rarity);padding:2px 5px;border:1px solid currentColor;border-radius:5px}
.sp-epic{--sp-rarity:#c2acff}.sp-mythic{--sp-rarity:#ffa8ce}.sp-legendary,.sp-special{--sp-rarity:#ffd183}
.sp-detail h2{margin:9px 0 4px}.sp-after{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sp-odds{margin-top:17px}.sp-odds summary{cursor:pointer;font-weight:800}.sp-odds ul,.sp-recent ol,.sp-week ol,.sp-rule-list{list-style:none;margin:0;padding:0}
.sp-odds li,.sp-recent li,.sp-rule-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--sp-line);padding:8px 0}
.sp-odds li span span{display:inline-block;margin-top:3px}
.sp-wallet progress{width:100%;accent-color:#ae91ff}.sp-wallet table{width:100%}.sp-wallet td,.sp-wallet th{text-align:left;padding:5px;border-bottom:1px solid var(--sp-line)}
.sp-recent li small{display:block}.sp-recent,.sp-week{margin-top:18px}.sp-week{margin-bottom:18px}.sp-week p{margin:3px 0}
.sp-week ol{display:flex;gap:clamp(4px,1.4vw,15px)}
.sp-week li{display:grid;justify-items:center;gap:3px}
.sp-week li span{border-radius:50%;width:30px;height:30px;display:grid;place-items:center;background:#dbe1ea;color:#323b50;font-weight:800}
.sp-week li span.sp-visited{background:#30d6ab;color:#102b24}
.sp-week li[aria-current] span{outline:2px solid #ad90f6;outline-offset:2px}
.sp-answers{justify-content:flex-start;flex-wrap:wrap;gap:5px 12px;padding:7px 10px;margin:10px 0 14px;border-radius:10px;border:1px solid #a78ae583;font-size:.86rem}
.sp-message{margin-bottom:0}
.sp-reveal{color:var(--sp-text);background:#1d2039;border:1px solid var(--sp-rarity);border-radius:24px;text-align:center;padding:26px;width:min(420px,90vw);position:fixed;overflow:hidden}
.sp-reveal::backdrop{background:#0b0c1be0}.sp-reveal-body{position:relative}.sp-reveal-rays{position:absolute;inset:-55%;background:repeating-conic-gradient(from 10deg,transparent 0deg 17deg,var(--sp-rarity) 20deg 24deg,transparent 30deg);opacity:.12;animation:sp-spin 18s linear infinite}
.sp-reward-object{width:152px;margin:auto;animation:sp-reward .55s cubic-bezier(.2,.8,.3,1) both;filter:drop-shadow(0 0 15px var(--sp-rarity))}
.sp-reveal .sp-piece{animation-duration:.8s;animation-iteration-count:1}
.sp-opening .sp-reward-object{animation:sp-crack 1.15s both}
.sp-opening .sp-reveal-rays{opacity:.28}
.sp-opened .sp-reward-object{animation:sp-prize .64s both}
.av-art .sp-piece,.sp-item-art .sp-piece,.av-art .sp-orbit,.av-art .sp-riding,.sp-tails,.sp-notes,.sp-chakra-core{transform-box:fill-box;transform-origin:center}
.av-art .sp-riding{animation:sp-ride 3.3s ease-in-out infinite}
.av-art .sp-orbit{animation:sp-spin 11s linear infinite}
.av-art .sp-orbit .sp-piece{animation:none}
.av-art .sp-piece-star,.sp-reveal .sp-piece-star{animation:sp-star 2.6s ease-in-out infinite}
.av-art .sp-piece-boot,.sp-reveal .sp-piece-boot{animation:sp-shine 4s infinite}
.av-art .sp-piece-mushroom,.sp-reveal .sp-piece-mushroom{animation:sp-bounce 2.4s ease-in-out infinite}
.av-art .sp-piece-kunai,.sp-reveal .sp-piece-kunai{animation:sp-glint 3s infinite}
.av-art .sp-piece-scroll,.sp-reveal .sp-piece-scroll{animation:sp-settle .75s both}
.av-art .sp-piece-hat,.sp-reveal .sp-piece-hat{animation:sp-settle .6s both}
.av-art .sp-piece-cloak,.sp-reveal .sp-piece-cloak{transform-origin:top;animation:sp-cape 3s ease-in-out infinite}
.av-art .sp-piece-guitar,.sp-reveal .sp-piece-guitar{animation:sp-strum 2.4s infinite}
.av-art .sp-notes,.sp-reveal .sp-notes{animation:sp-note 1.9s ease-out infinite}
.av-art .sp-piece-nimbus,.sp-reveal .sp-piece-nimbus{animation:sp-cloud 3.3s ease-in-out infinite}
.av-art .sp-piece-champions,.sp-reveal .sp-piece-champions{animation:sp-silver 4.2s infinite}
.av-art .sp-piece-grammy,.sp-reveal .sp-piece-grammy{animation:sp-brass 3.8s infinite}
.av-art .sp-piece-ballon,.sp-reveal .sp-piece-ballon{animation:sp-ballon 4s infinite}
.av-art .sp-tails,.sp-reveal .sp-tails{transform-origin:bottom;animation:sp-tails 2.7s ease-in-out infinite}
.av-art .sp-piece-shenlong,.sp-reveal .sp-piece-shenlong{animation:sp-dragon 4.8s ease-in-out infinite}
.av-art .sp-piece-chakra,.av-art .sp-chakra-core,.sp-reveal .sp-piece-chakra{animation:sp-fire 1.4s ease-in-out infinite}
.av-art .sp-piece-worldCup,.sp-reveal .sp-piece-worldCup{animation:sp-world 4.5s infinite}
.av-art .sp-piece[class*="sp-piece-ball"]:not(.sp-piece-ballon),.sp-reveal .sp-piece[class*="sp-piece-ball"]:not(.sp-piece-ballon){animation:sp-ball 3s ease-in-out infinite}
.av-art .sp-orbit .sp-piece[class*="sp-piece-ball"]{animation:none}
@keyframes sp-spin{to{transform:rotate(360deg)}}
@keyframes sp-star{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-4px) rotate(7deg);filter:drop-shadow(0 0 6px #ffc453)}}
@keyframes sp-shine{50%{filter:brightness(1.28)}}
@keyframes sp-bounce{50%{transform:translateY(-11%) scale(1.06,.94)}}
@keyframes sp-glint{75%{filter:none}83%{filter:brightness(1.6);transform:rotate(-5deg)}}
@keyframes sp-settle{from{transform:translateY(-16%) rotate(-10deg);opacity:.45}to{transform:none;opacity:1}}
@keyframes sp-cape{50%{transform:skewX(2deg) scaleX(1.04)}}
@keyframes sp-strum{20%,35%{transform:rotate(-4deg)}28%{transform:rotate(3deg)}}
@keyframes sp-note{0%{opacity:0;transform:none}35%{opacity:1}100%{opacity:0;transform:translate(8px,-18px)}}
@keyframes sp-ride{50%{transform:translateY(-5px)}}
@keyframes sp-cloud{50%{transform:scale(1.035,.95)}}
@keyframes sp-silver{60%{filter:brightness(1.34) drop-shadow(0 0 4px #c6d7ff)}}
@keyframes sp-brass{48%{filter:drop-shadow(0 0 5px #ffc555);transform:skewY(-2deg)}}
@keyframes sp-ballon{65%{filter:brightness(1.38);transform:scale(1.02)}}
@keyframes sp-tails{50%{transform:rotate(9deg) scaleX(1.06)}}
@keyframes sp-dragon{35%{transform:translate(-4%,-7%) rotate(6deg)}70%{transform:translate(3%,5%) rotate(-7deg)}}
@keyframes sp-fire{0%,100%{opacity:.8;filter:drop-shadow(0 0 6px #ff8836)}50%{opacity:1;filter:drop-shadow(0 0 12px #ffe26d);transform:scaleX(1.035)}}
@keyframes sp-world{50%{filter:drop-shadow(0 0 7px #ffdf80) brightness(1.2)}}
@keyframes sp-ball{50%{transform:translateY(-6px);filter:drop-shadow(0 0 4px #ff9c4c)}}
@keyframes sp-reward{from{transform:scale(.55) translateY(20px);opacity:0}to{transform:none;opacity:1}}
@keyframes sp-crack{0%,35%,65%{transform:none}21%,48%{transform:translateY(-23px) rotate(-12deg)}56%{transform:translateY(-8px) rotate(9deg)}85%{transform:scale(1.18);filter:brightness(2) drop-shadow(0 0 32px #ffd183)}100%{transform:scale(.15);opacity:0}}
@keyframes sp-prize{0%{transform:scale(.1) rotate(-15deg);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:none}}
@media(max-width:710px){.sp-layout,.sp-wallet{grid-template-columns:1fr}.sp-detail{grid-row:1}.sp-preview{height:175px}.sp-sound{margin-left:0}.sp-week{align-items:flex-start;flex-direction:column}}
@media(max-width:425px){.sp-heading{align-items:flex-start;flex-direction:column;gap:7px}.sp-balance{justify-items:start}.sp-shortcut{padding:3px;gap:1px}.sp-shortcut svg{width:19px}.sp-lucky-banner{grid-template-columns:44px 1fr auto;padding:10px;gap:7px}}
@media(prefers-reduced-motion:reduce){.sp-shell *,.av-art [class^="sp-"]{animation:none!important;transition:none!important}}
.sp-detail-price{color:var(--sp-accent);margin:6px 0;font-weight:750}