:root{--bg:#0B0D26;--card1:#1B1E4B;--card2:#14173A;--mut:#9CA2DA;--blue1:#7B7DFF;--blue2:#4F51F2;--gold1:#FFD45A;--gold2:#F59E0B;--lime:#A3E635;--red:#FB7185;--line:rgba(255,255,255,.08)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:#fff;font-family:'Onest',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{background:radial-gradient(120% 60% at 50% -10%,#2A2D86 0%,#12143A 45%,#0B0D26 100%) fixed;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;color:inherit}
img{display:block;-webkit-user-drag:none;user-select:none}
#app{max-width:480px;margin:0 auto;height:100%;display:flex;flex-direction:column;position:relative}
#top{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 12px 6px}
#view{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 14px 96px;-webkit-overflow-scrolling:touch}
.pill{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:99px;background:#1D2052;border:1px solid var(--line);font-weight:800;font-size:13px;white-space:nowrap}
.pill img{width:22px;height:22px}
.pill.g img{filter:hue-rotate(-60deg) saturate(1.2)}
.pill.e{background:linear-gradient(180deg,#2B2A6E,#1D2052)}
.lvl{margin-left:auto;display:flex;align-items:center;gap:8px;border:0;background:#22255E;border-radius:99px;padding:4px 12px 4px 4px;font-weight:800;font-size:13px}
.lvl b{display:grid;place-items:center;width:26px;height:26px;border-radius:99px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);font-size:12px}
.card{border-radius:20px;background:linear-gradient(180deg,var(--card1),var(--card2));border:1px solid var(--line);padding:14px;margin-bottom:12px}
.row{display:flex;align-items:center;gap:10px}
.sp{justify-content:space-between}
.mut{color:var(--mut)}
.h{font-weight:800;font-size:16px}
.h2{font-weight:800;font-size:20px;margin:6px 0 10px}
.small{font-size:12px}
.btn{height:50px;width:100%;border:0;border-radius:15px;background:linear-gradient(180deg,var(--blue1),var(--blue2));color:#fff;font-weight:800;font-size:15px;box-shadow:0 6px 18px rgba(79,81,242,.45),inset 0 1px 0 rgba(255,255,255,.35);position:relative;overflow:hidden}
.btn.gold{background:linear-gradient(180deg,var(--gold1),var(--gold2));color:#2A1700;box-shadow:0 6px 18px rgba(245,158,11,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ghost{background:#22255E;box-shadow:none;color:#B9BDF5}
.btn.sm{height:38px;font-size:13px;border-radius:12px;width:auto;padding:0 14px}
.btn[disabled]{opacity:.45;box-shadow:none}
.btn.shine::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:translateX(-150%) skewX(-20deg);animation:shim 2.8s ease-in-out infinite;pointer-events:none}
@keyframes shim{0%{transform:translateX(-150%) skewX(-20deg)}55%,100%{transform:translateX(350%) skewX(-20deg)}}
.chip{border:1px solid var(--line);background:transparent;color:#B9BDF5;border-radius:99px;height:32px;padding:0 14px;font-weight:700;font-size:12px;white-space:nowrap}
.chip.on{background:#2F3282;color:#fff;border-color:transparent}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.seg{padding:4px;border-radius:16px;background:var(--card2);border:1px solid var(--line);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin-bottom:12px}
.seg button{height:34px;border:0;border-radius:12px;background:transparent;color:var(--mut);font-weight:800;font-size:12px}
.seg button.on{background:linear-gradient(180deg,#3A3E8F,#2A2D6E);color:#fff}
#nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));width:min(452px,calc(100% - 20px));display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:6px;border-radius:24px;background:rgba(24,27,74,.94);border:1px solid var(--line);backdrop-filter:blur(10px);z-index:20}
#nav button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;border-radius:18px;font-size:10px;font-weight:700;color:var(--mut);position:relative}
#nav button img{width:26px;height:26px;opacity:.7}
#nav button.on{background:linear-gradient(180deg,#3A3E8F,#2A2D6E);color:#fff}
#nav button.on img{opacity:1}
#nav i{position:absolute;top:4px;right:20%;width:9px;height:9px;border-radius:9px;background:var(--red);border:2px solid #1B1E4B}
.bar{height:10px;border-radius:99px;background:#0E1030;overflow:hidden;border:1px solid var(--line)}
.bar>div{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lime),#65A30D);transition:width .4s}
.bar.b>div{background:linear-gradient(90deg,var(--blue1),var(--blue2))}
.grid{display:grid;gap:10px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.slot{border-radius:16px;background:#0F1236;border:1px dashed rgba(255,255,255,.14);min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px;text-align:center;position:relative}
.bird{border-radius:16px;background:linear-gradient(180deg,#232763,#181B48);border:2px solid var(--rc,#555);padding:8px 4px 6px;text-align:center;position:relative;min-height:104px;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 14px -4px var(--rc,#555)}
.bird img.art{width:58px;height:58px;margin:0 auto}
.bird .n{font-size:11px;font-weight:800;margin-top:2px;line-height:1.1}
.bird .s{font-size:10px;color:var(--mut)}
.bird .lv{position:absolute;top:4px;left:5px;font-size:10px;font-weight:800;background:#0E1030;border-radius:8px;padding:1px 5px}
.bird .tag{position:absolute;top:4px;right:5px;font-size:9px;font-weight:800;color:var(--gold1)}
.bird.sel{outline:3px solid var(--gold1)}
.egg img.art{width:64px;height:64px;margin:0 auto}
.egg{border-radius:18px;background:linear-gradient(180deg,#232763,#181B48);border:1px solid var(--line);padding:10px 6px;text-align:center;position:relative}
.egg .n{font-size:12px;font-weight:800;margin:4px 0}
.egg.lock{opacity:.55}
.price{display:inline-flex;align-items:center;gap:4px;padding:5px 10px 5px 6px;border-radius:99px;background:linear-gradient(180deg,var(--blue1),var(--blue2));font-weight:800;font-size:12px;border:0;color:#fff}
.price img{width:16px;height:16px}
.price.f{background:linear-gradient(180deg,#7BD13A,#3F8F12)}
.price.g img{filter:hue-rotate(-60deg) saturate(1.2)}
.price.gold{background:linear-gradient(180deg,var(--gold1),var(--gold2));color:#2A1700}
.coll{display:inline-flex;gap:6px}
.sheet-bg{position:fixed;inset:0;background:rgba(5,6,20,.7);z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{width:100%;max-width:480px;max-height:90%;overflow-y:auto;background:linear-gradient(180deg,#1E2152,#14173A);border-radius:26px 26px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));border:1px solid var(--line);animation:up .25s}
.sheet.mid{border-radius:26px;margin:auto;max-width:400px}
.sheet-bg.mid{align-items:center;padding:16px}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);background:#2B2E78;border:1px solid var(--line);padding:10px 16px;border-radius:14px;font-weight:700;font-size:13px;z-index:99;max-width:92%;text-align:center;animation:up .2s;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.toast.err{background:#6A1F3A}
.toast.ok{background:#1E5B34}
.tag{display:inline-block;border-radius:8px;padding:2px 8px;font-size:11px;font-weight:800;background:#2F3282}
.stat{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.stat:last-child{border:0}
input[type=range]{width:100%;accent-color:#7B7DFF}
input[type=number],input[type=text]{width:100%;height:46px;border-radius:13px;border:1px solid var(--line);background:#0E1030;color:#fff;font-size:16px;font-weight:700;padding:0 14px;font-family:inherit}
.big{font-size:30px;font-weight:800;line-height:1}
.lime{color:var(--lime)}.gold{color:var(--gold1)}.red{color:var(--red)}
.hero{position:relative;text-align:center;padding:18px 14px}
.hero img.art{width:96px;height:96px;margin:0 auto}
.flt{animation:flt 3.2s ease-in-out infinite}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.wob{animation:wob .7s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.rays{position:absolute;left:50%;top:44%;width:340px;height:340px;margin:-170px 0 0 -170px;background:conic-gradient(from 0deg,rgba(255,212,90,.0),rgba(255,212,90,.35),rgba(255,212,90,0),rgba(255,212,90,.35),rgba(255,212,90,0),rgba(255,212,90,.35),rgba(255,212,90,0),rgba(255,212,90,.35),rgba(255,212,90,0));border-radius:50%;animation:spin 8s linear infinite;-webkit-mask:radial-gradient(circle,#000 25%,transparent 70%);mask:radial-gradient(circle,#000 25%,transparent 70%)}
@keyframes spin{to{transform:rotate(360deg)}}
.spark{position:absolute;width:6px;height:6px;border-radius:6px;background:var(--gold1);animation:spk 1s ease-out forwards}
@keyframes spk{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.banner{display:block;width:100%;text-align:left;border:0;border-radius:18px;padding:12px 14px;margin-bottom:12px;background:linear-gradient(90deg,#3A3E8F,#2A2D6E);font-weight:700;font-size:13px}
.offer{background:linear-gradient(135deg,#5B3DF5,#C026D3);border-radius:20px;padding:14px;margin-bottom:12px;position:relative;overflow:hidden}
.faq summary{font-weight:800;padding:12px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details{border-bottom:1px solid var(--line)}
.faq p{margin:0 0 12px;color:#C9CDF7;font-size:13px;line-height:1.45}
.doc h4{margin:16px 0 4px}.doc p{margin:0;color:#C9CDF7;font-size:13px;line-height:1.5}
.step{display:flex;gap:10px;align-items:center;padding:8px 0}
.ok-dot,.no-dot{width:22px;height:22px;border-radius:99px;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.ok-dot{background:#1E5B34;color:var(--lime)}.no-dot{background:#3B3F8F;color:var(--mut)}
.center{text-align:center}
.gate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px 22px;min-height:100%;text-align:center}
.gate img{width:110px;height:110px}
.kbd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.skel{height:60px;border-radius:16px;background:linear-gradient(90deg,#1B1E4B,#262A66,#1B1E4B);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*,.btn.shine::after{animation:none!important}}

.btn,.chip,.price{white-space:nowrap}
.btn.sm{flex:none}
.row>.btn:not(.sm){min-width:0}


/* ===== макеты: общие ===== */
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 0}
.logo{font-weight:800;font-size:26px;letter-spacing:1px;background:linear-gradient(180deg,#fff 30%,#9EA1FF);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #2A2D86)}
.pill{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:99px;background:#1D2052;border:1px solid rgba(255,255,255,.09);font-weight:800;font-size:13px}
.pill img{width:24px;height:24px}
.add{height:30px;padding:0 12px;border:0;border-radius:99px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);color:#fff;font-weight:800;font-size:12px;box-shadow:0 4px 12px rgba(79,81,242,.5)}
.btn{height:48px;width:100%;border:0;border-radius:15px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);color:#fff;font-weight:800;font-size:15px;box-shadow:0 6px 18px rgba(79,81,242,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.lime{background:linear-gradient(180deg,#C8FF6A,#8FE01E);color:#173300;box-shadow:0 6px 18px rgba(143,224,30,.35),inset 0 1px 0 rgba(255,255,255,.5)}
.card{border-radius:20px;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.07)}
.mut{color:#9CA2DA}
.h{font-weight:800;font-size:18px}
.nav{margin:0 10px 10px;padding:6px;border-radius:24px;background:rgba(27,30,74,.92);border:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.nav button{border:0;background:transparent;color:#8F95CF;font-weight:700;font-size:10px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 5px;border-radius:18px}
.nav button img{width:30px;height:30px}
.nav button.on{background:linear-gradient(180deg,#3A3E8F,#2A2D6E);color:#fff}
.tile{border-radius:18px;padding:10px;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.07)}
.stage{height:92px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.stage img{width:84px;height:84px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.nm{margin-top:6px;font-weight:800;font-size:14px}
.sub{font-size:11px;font-weight:600;color:#9CA2DA}
.rar{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:800}
.shine,.price,.buy,.go{position:relative;overflow:hidden}
.shine::after,.price::after,.buy::after,.go::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-150%) skewX(-20deg);animation:shim 2.8s ease-in-out infinite;pointer-events:none}
@keyframes shim{0%{transform:translateX(-150%) skewX(-20deg)}55%,100%{transform:translateX(350%) skewX(-20deg)}}
.wob{animation:wob 4.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes wob{0%,50%,100%{transform:rotate(0) scale(1)}54%{transform:rotate(-5deg) scale(1.01,.99)}60%{transform:rotate(5deg) scale(1)}66%{transform:rotate(-3.5deg)}72%{transform:rotate(2deg)}78%{transform:rotate(-1deg)}84%{transform:rotate(0)}}
.flt{animation:flt 3.2s ease-in-out infinite}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.glow{animation:glow 2.6s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.65}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.shine::after,.price::after,.buy::after,.go::after,.wob,.flt,.glow,.hat *{animation:none!important}}
.chip{border:1px solid rgba(255,255,255,.1);background:transparent;color:#B9BDF5;border-radius:99px;height:32px;padding:0 14px;font-weight:700;font-size:12px}
.chip.on{background:#2F3282;color:#fff;border-color:transparent}
.row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.price{display:inline-flex;align-items:center;gap:4px;padding:4px 9px 4px 5px;border-radius:99px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);font-weight:800;font-size:12px}
.price img{width:16px;height:16px}
.lot{display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.07)}
.pic{width:68px;height:68px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none}
.pic img{width:60px;height:60px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.buy{height:38px;padding:0 12px;border:0;border-radius:12px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;gap:5px;box-shadow:0 4px 12px rgba(79,81,242,.4)}
.buy img{width:16px;height:16px}
.box{flex:1;height:56px;border-radius:16px;background:#0E1030;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:8px;padding:0 12px;font-weight:800;font-size:19px}
.box img{width:30px;height:30px}
.task{display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.07)}
.task .ic{width:46px;height:46px;border-radius:14px;background:#22255E;display:flex;align-items:center;justify-content:center;flex:none}
.task .ic img{width:32px;height:32px}
.go{height:34px;padding:0 12px;border:0;border-radius:11px;background:linear-gradient(180deg,#C8FF6A,#8FE01E);color:#173300;font-weight:800;font-size:12px}
.t{font-weight:800;font-size:13px}
.s{font-size:11px;font-weight:600;color:#9CA2DA;margin-top:2px}
/* ===== макеты: экраны ===== */
.s-Bird .card{border-radius:20px;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.07)}
.s-Bird .mut{color:#9CA2DA}
.s-Bird .h{font-weight:800;font-size:18px}
.s-Bird .stat{display:flex;align-items:center;gap:10px;margin-top:10px}
.s-Bird .stat .l{width:118px;font-size:12px;font-weight:700;color:#B9BDF5}
.s-Bird .stat .b{flex:1;height:8px;border-radius:99px;background:#0E1030;overflow:hidden}
.s-Bird .stat .b i{display:block;height:100%;border-radius:99px}
.s-Bird .stat .v{width:54px;text-align:right;font-size:12px;font-weight:800}
.s-Bird .buff{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,107,214,.1);border:1px solid rgba(255,107,214,.35);margin-top:8px;font-size:13px;font-weight:700}
.s-Bird .shine, .s-Bird .price, .s-Bird .buy, .s-Bird .go{position:relative;overflow:hidden}
.s-Bird .shine::after, .s-Bird .price::after, .s-Bird .buy::after, .s-Bird .go::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-150%) skewX(-20deg);animation:shim_Bird 2.8s ease-in-out infinite;pointer-events:none}
@keyframes shim_Bird{0%{transform:translateX(-150%) skewX(-20deg)}55%,100%{transform:translateX(350%) skewX(-20deg)}}
.s-Bird .wob{animation:wob_Bird 4.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes wob_Bird{0%,50%,100%{transform:rotate(0) scale(1)}54%{transform:rotate(-5deg) scale(1.01,.99)}60%{transform:rotate(5deg) scale(1)}66%{transform:rotate(-3.5deg)}72%{transform:rotate(2deg)}78%{transform:rotate(-1deg)}84%{transform:rotate(0)}}
.s-Bird .flt{animation:flt_Bird 3.2s ease-in-out infinite}
@keyframes flt_Bird{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.s-Bird .glow{animation:glow_Bird 2.6s ease-in-out infinite}
@keyframes glow_Bird{0%,100%{opacity:.65}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.shine::after,.price::after,.buy::after,.go::after,.wob,.flt,.glow,.hat *{animation:none!important}}
.s-Upgrader .top{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 0}
.s-Upgrader .bk{width:36px;height:36px;border:0;border-radius:12px;background:#22255E;color:#fff;font-weight:800;font-size:18px}
.s-Upgrader .ttl{font-weight:800;font-size:18px}
.s-Upgrader .pill{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:99px;background:#1D2052;border:1px solid rgba(255,255,255,.09);font-weight:800;font-size:13px}
.s-Upgrader .pill img{width:24px;height:24px}
.s-Upgrader .card{border-radius:20px;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.07)}
.s-Upgrader .mut{color:#9CA2DA}
.s-Upgrader .h{font-weight:800;font-size:16px}
.s-Upgrader .btn{height:50px;width:100%;border:0;border-radius:15px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);color:#fff;font-weight:800;font-size:15px;box-shadow:0 6px 18px rgba(79,81,242,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.s-Upgrader .btn.gold{background:linear-gradient(180deg,#FFD45A,#F59E0B);color:#2A1700;box-shadow:0 6px 18px rgba(245,158,11,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.s-Upgrader .btn.ghost{background:#22255E;box-shadow:none;color:#B9BDF5}
.s-Upgrader .chip{border:1px solid rgba(255,255,255,.1);background:transparent;color:#B9BDF5;border-radius:99px;height:32px;padding:0 14px;font-weight:700;font-size:12px;white-space:nowrap}
.s-Upgrader .chip.on{background:#2F3282;color:#fff;border-color:transparent}
.s-Upgrader .seg{padding:4px;border-radius:16px;background:#14173A;border:1px solid rgba(255,255,255,.07);display:grid;gap:4px}
.s-Upgrader .seg button{height:34px;border:0;border-radius:12px;background:transparent;color:#9CA2DA;font-weight:800;font-size:12px}
.s-Upgrader .seg button.on{background:linear-gradient(180deg,#3A3E8F,#2A2D6E);color:#fff}
.s-Upgrader .shine, .s-Upgrader .price{position:relative;overflow:hidden}
.s-Upgrader .shine::after, .s-Upgrader .price::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-150%) skewX(-20deg);animation:shim_Upgrader 2.8s ease-in-out infinite;pointer-events:none}
@keyframes shim_Upgrader{0%{transform:translateX(-150%) skewX(-20deg)}55%,100%{transform:translateX(350%) skewX(-20deg)}}
.s-Upgrader .flt{animation:flt_Upgrader 3.2s ease-in-out infinite}
@keyframes flt_Upgrader{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.s-Upgrader .glow{animation:glow_Upgrader 2.6s ease-in-out infinite}
@keyframes glow_Upgrader{0%,100%{opacity:.65}50%{opacity:1}}
.s-Upgrader .price{display:inline-flex;align-items:center;gap:4px;padding:4px 9px 4px 5px;border-radius:99px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);font-weight:800;font-size:12px}
.s-Upgrader .price img{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){*,.shine::after,.price::after{animation:none!important}}
.s-Upgrader .ringw{position:relative;width:170px;height:170px;margin:0 auto}
.s-Upgrader .ringw svg{width:170px;height:170px;transform:rotate(-90deg)}
.s-Upgrader .arc{stroke-dasharray:440;stroke-dashoffset:440;animation:arc_Upgrader 4s ease-out infinite}
@keyframes arc_Upgrader{0%{stroke-dashoffset:440}30%,100%{stroke-dashoffset:255}}
.s-Upgrader .slot{width:78px;height:92px;border-radius:16px;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1.5px dashed rgba(255,255,255,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.s-Upgrader .slot.f{border-style:solid;border-color:rgba(123,125,255,.6)}
.s-Upgrader .slot img{width:52px;height:52px}
.s-Upgrader .tg{width:44px;height:26px;border-radius:99px;background:#4F51F2;position:relative;flex:none}
.s-Upgrader .tg::after{content:'';position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff}
.s-Duel .top{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 0}
.s-Duel .bk{width:36px;height:36px;border:0;border-radius:12px;background:#22255E;color:#fff;font-weight:800;font-size:18px}
.s-Duel .ttl{font-weight:800;font-size:18px}
.s-Duel .pill{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:99px;background:#1D2052;border:1px solid rgba(255,255,255,.09);font-weight:800;font-size:13px}
.s-Duel .pill img{width:24px;height:24px}
.s-Duel .card{border-radius:20px;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.07)}
.s-Duel .mut{color:#9CA2DA}
.s-Duel .h{font-weight:800;font-size:16px}
.s-Duel .btn{height:50px;width:100%;border:0;border-radius:15px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);color:#fff;font-weight:800;font-size:15px;box-shadow:0 6px 18px rgba(79,81,242,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.s-Duel .btn.gold{background:linear-gradient(180deg,#FFD45A,#F59E0B);color:#2A1700;box-shadow:0 6px 18px rgba(245,158,11,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.s-Duel .btn.ghost{background:#22255E;box-shadow:none;color:#B9BDF5}
.s-Duel .chip{border:1px solid rgba(255,255,255,.1);background:transparent;color:#B9BDF5;border-radius:99px;height:32px;padding:0 14px;font-weight:700;font-size:12px;white-space:nowrap}
.s-Duel .chip.on{background:#2F3282;color:#fff;border-color:transparent}
.s-Duel .seg{padding:4px;border-radius:16px;background:#14173A;border:1px solid rgba(255,255,255,.07);display:grid;gap:4px}
.s-Duel .seg button{height:34px;border:0;border-radius:12px;background:transparent;color:#9CA2DA;font-weight:800;font-size:12px}
.s-Duel .seg button.on{background:linear-gradient(180deg,#3A3E8F,#2A2D6E);color:#fff}
.s-Duel .shine, .s-Duel .price{position:relative;overflow:hidden}
.s-Duel .shine::after, .s-Duel .price::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-150%) skewX(-20deg);animation:shim_Duel 2.8s ease-in-out infinite;pointer-events:none}
@keyframes shim_Duel{0%{transform:translateX(-150%) skewX(-20deg)}55%,100%{transform:translateX(350%) skewX(-20deg)}}
.s-Duel .flt{animation:flt_Duel 3.2s ease-in-out infinite}
@keyframes flt_Duel{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.s-Duel .glow{animation:glow_Duel 2.6s ease-in-out infinite}
@keyframes glow_Duel{0%,100%{opacity:.65}50%{opacity:1}}
.s-Duel .price{display:inline-flex;align-items:center;gap:4px;padding:4px 9px 4px 5px;border-radius:99px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);font-weight:800;font-size:12px}
.s-Duel .price img{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){*,.shine::after,.price::after{animation:none!important}}
.s-Duel .die{position:relative;width:78px;height:78px;border-radius:20px;background:linear-gradient(145deg,#fff,#CfD3FF);box-shadow:0 10px 0 #7E82D8,0 18px 24px rgba(0,0,0,.45)}
.s-Duel .d1{animation:roll1_Duel 3.6s ease-in-out infinite}
.s-Duel .d2{animation:roll2_Duel 3.6s ease-in-out infinite}
@keyframes roll1_Duel{0%,70%,100%{transform:translateY(0) rotate(0)}10%{transform:translateY(-34px) rotate(140deg)}20%{transform:translateY(0) rotate(250deg)}30%{transform:translateY(-14px) rotate(330deg)}40%{transform:translateY(0) rotate(360deg)}}
@keyframes roll2_Duel{0%,70%,100%{transform:translateY(0) rotate(0)}12%{transform:translateY(-40px) rotate(-160deg)}24%{transform:translateY(0) rotate(-260deg)}34%{transform:translateY(-12px) rotate(-340deg)}44%{transform:translateY(0) rotate(-360deg)}}
.s-Duel .pl{flex:1;border-radius:18px;padding:10px;text-align:center;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.08)}
.s-Duel .av{width:48px;height:48px;border-radius:50%;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;font-weight:800}
.s-Duel .st{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:99px;font-weight:800;font-size:12px;background:#14173A;border:1px solid rgba(255,255,255,.1);color:#B9BDF5}
.s-Duel .st.on{background:#2F3282;color:#fff;border-color:#7B7DFF}
.s-Daily .top{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 0}
.s-Daily .bk{width:36px;height:36px;border:0;border-radius:12px;background:#22255E;color:#fff;font-weight:800;font-size:18px}
.s-Daily .ttl{font-weight:800;font-size:18px}
.s-Daily .pill{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:99px;background:#1D2052;border:1px solid rgba(255,255,255,.09);font-weight:800;font-size:13px}
.s-Daily .pill img{width:24px;height:24px}
.s-Daily .card{border-radius:20px;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.07)}
.s-Daily .mut{color:#9CA2DA}
.s-Daily .h{font-weight:800;font-size:16px}
.s-Daily .btn{height:50px;width:100%;border:0;border-radius:15px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);color:#fff;font-weight:800;font-size:15px;box-shadow:0 6px 18px rgba(79,81,242,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.s-Daily .btn.gold{background:linear-gradient(180deg,#FFD45A,#F59E0B);color:#2A1700;box-shadow:0 6px 18px rgba(245,158,11,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.s-Daily .btn.ghost{background:#22255E;box-shadow:none;color:#B9BDF5}
.s-Daily .chip{border:1px solid rgba(255,255,255,.1);background:transparent;color:#B9BDF5;border-radius:99px;height:32px;padding:0 14px;font-weight:700;font-size:12px;white-space:nowrap}
.s-Daily .chip.on{background:#2F3282;color:#fff;border-color:transparent}
.s-Daily .seg{padding:4px;border-radius:16px;background:#14173A;border:1px solid rgba(255,255,255,.07);display:grid;gap:4px}
.s-Daily .seg button{height:34px;border:0;border-radius:12px;background:transparent;color:#9CA2DA;font-weight:800;font-size:12px}
.s-Daily .seg button.on{background:linear-gradient(180deg,#3A3E8F,#2A2D6E);color:#fff}
.s-Daily .shine, .s-Daily .price{position:relative;overflow:hidden}
.s-Daily .shine::after, .s-Daily .price::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-150%) skewX(-20deg);animation:shim_Daily 2.8s ease-in-out infinite;pointer-events:none}
@keyframes shim_Daily{0%{transform:translateX(-150%) skewX(-20deg)}55%,100%{transform:translateX(350%) skewX(-20deg)}}
.s-Daily .flt{animation:flt_Daily 3.2s ease-in-out infinite}
@keyframes flt_Daily{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.s-Daily .glow{animation:glow_Daily 2.6s ease-in-out infinite}
@keyframes glow_Daily{0%,100%{opacity:.65}50%{opacity:1}}
.s-Daily .price{display:inline-flex;align-items:center;gap:4px;padding:4px 9px 4px 5px;border-radius:99px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);font-weight:800;font-size:12px}
.s-Daily .price img{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){*,.shine::after,.price::after{animation:none!important}}
.s-Daily .dy{border-radius:16px;padding:8px 2px;text-align:center;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.08);font-size:10px;font-weight:700}
.s-Daily .dy.on{border-color:#FFD45A;box-shadow:0 0 18px rgba(255,212,90,.5)}
.s-Daily .dy.dn{opacity:.55}
.s-Daily .dy img{width:34px;height:34px;display:block;margin:4px auto}
.s-Daily .tk{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#14173A;border:1px solid rgba(255,255,255,.07)}
.s-Daily .pr{height:6px;border-radius:99px;background:#0E1030;overflow:hidden;margin-top:5px}
.s-Daily .pr i{display:block;height:100%;background:linear-gradient(90deg,#8FE01E,#C8FF6A)}

/* ---------- дизайн по макетам ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(14px + env(safe-area-inset-top)) 14px 6px}
#top .logo{font-size:19px;flex:none;letter-spacing:.5px}
.tr{display:flex;gap:6px;align-items:center;min-width:0}
.pill{font-size:12px;gap:4px;padding:3px 8px 3px 3px}
.pill img{width:20px;height:20px}
.tr{gap:5px}
.top{gap:6px;padding-left:12px;padding-right:12px}
.add.lv{width:32px;height:32px;padding:0;display:grid;place-items:center;font-size:13px;flex:none}
#view{padding:6px 14px 100px}
.nav{margin:0}
#nav{padding:6px;border-radius:24px}
#nav button img{width:30px;height:30px;opacity:.75}
.g2,.g3{display:grid;gap:10px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.sec{margin:16px 0 0;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.more{color:#9CA2DA;font-size:12px;font-weight:700}
.sub{font-size:11px;font-weight:600;color:#9CA2DA}
.tile{position:relative;min-width:0}
.tile.emp{border-style:dashed;border-color:rgba(255,255,255,.18);background:transparent;text-align:center}
.tile.emp .plus{font-size:30px;opacity:.45}
.tile.sel{outline:3px solid var(--gold1)}
.tile.lockd{opacity:.55}.tile.off{opacity:.5}
.tile .row{gap:6px;justify-content:space-between}
.tile .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clk{margin-top:4px;font-weight:800;font-size:13px;color:#C8FF6A;text-align:center}
.clk.mut{color:#9CA2DA}
.mb{margin-top:6px;width:100%;height:28px;border:0;border-radius:10px;background:#22255E;color:#C9CCF8;font-weight:800;font-size:11px}
.mb.gl{background:linear-gradient(180deg,#FFD45A,#F59E0B);color:#2A1700}
.lvb{position:absolute;top:6px;left:7px;z-index:2;font-size:10px;font-weight:800;background:#0E1030;border-radius:8px;padding:1px 6px}
.lvb.r{left:auto;right:7px;color:var(--gold1)}
.bar2{margin-top:12px;height:8px;border-radius:99px;background:#0E1030;overflow:hidden;position:relative}
.bar2>div{height:100%;border-radius:99px;background:linear-gradient(90deg,#8FE01E,#C8FF6A);transition:width .4s}
.hero2{position:relative;margin:6px 0 0;padding:14px;border-radius:22px;background:linear-gradient(120deg,#3A2A08 0%,#2A1F5A 55%,#1A1D52 100%);border:1px solid rgba(255,210,90,.35);overflow:hidden}
.hero2 .hg{position:absolute;right:-30px;top:-30px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,90,.5),rgba(255,210,90,0) 70%)}
.hb{display:inline-block;padding:3px 9px;border-radius:99px;background:#FFD45A;color:#2A1700;font-weight:800;font-size:10px}
.ht{margin-top:8px;font-weight:800;font-size:24px;line-height:1.1}
.hbtn{margin-top:12px;height:38px;padding:0 16px;border:0;border-radius:12px;background:linear-gradient(180deg,#FFD45A,#F59E0B);color:#2A1700;font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.sell{height:32px;padding:0 12px;border:0;border-radius:99px;background:linear-gradient(180deg,#FFD45A,#F59E0B);color:#2A1700;font-weight:800;font-size:12px;white-space:nowrap}
.lots{display:flex;flex-direction:column;gap:10px}
.lot .nm{margin:0}
.topt{display:inline-block;border-radius:8px;padding:1px 7px;font-size:10px;font-weight:800;background:#2F3282;vertical-align:middle}
.note{margin:10px 0 0;font-size:11px;color:#7F86C4;font-weight:600;line-height:1.45}
.pbadge{padding:4px 10px;border-radius:99px;background:rgba(163,230,53,.15);color:#C8FF6A;font-size:11px;font-weight:800}
.rate{margin-top:8px;display:flex;align-items:center;gap:8px;font-weight:800;font-size:21px}
.rate img{width:30px;height:30px}
.infobox{margin-top:10px;padding:10px 12px;border-radius:12px;background:#0E1030;font-size:12px;line-height:1.5;font-weight:600;color:#9CA2DA}
.feedc{padding:10px 14px;display:flex;align-items:center;gap:10px;border-color:rgba(200,255,106,.4)}
.feedc .dot{width:9px;height:9px;border-radius:50%;background:#C8FF6A;box-shadow:0 0 10px #C8FF6A;flex:none}
.frb{position:relative;margin:6px 0 0;padding:14px;border-radius:22px;background:linear-gradient(120deg,#12306B 0%,#2A2D86 70%);border:1px solid rgba(125,180,255,.35);overflow:hidden}
.frg{position:absolute;right:-30px;top:-30px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.5),rgba(96,165,250,0) 70%)}
.frt{display:inline-block;padding:3px 9px;border-radius:99px;background:#7DD3FC;color:#06284A;font-weight:800;font-size:10px}
.lnk{flex:1;min-width:0;height:42px;border-radius:12px;background:#0B1B45;display:flex;align-items:center;padding:0 12px;font-size:12px;font-weight:700;color:#7DD3FC;white-space:nowrap;overflow:hidden}
.invb{width:104px;height:42px;border:0;border-radius:12px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);color:#fff;font-weight:800;font-size:13px;position:relative;overflow:hidden}
.tasks{display:flex;flex-direction:column;gap:10px}
.go[disabled]{background:#22255E;color:#8F95CF;box-shadow:none}
.go.ghost{background:#22255E;color:#C9CCF8}
.dayc{margin:12px 0 0;padding:12px;display:flex;align-items:center;gap:12px}
.gbtn{height:36px;padding:0 14px;border:0;border-radius:12px;background:linear-gradient(180deg,#FFD45A,#F59E0B);color:#2A1700;font-weight:800;font-size:13px;position:relative;overflow:hidden}
.btn[disabled]{opacity:.5}
.page{position:fixed;inset:0;z-index:30;overflow-y:auto;overflow-x:hidden;background:radial-gradient(120% 60% at 50% -10%,#2A2D86 0%,#12143A 45%,#0B0D26 100%) #0B0D26;animation:up .22s}
.app2{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.tb{padding:calc(16px + env(safe-area-inset-top)) 14px 0;display:flex;align-items:center;justify-content:space-between}
.tb .bk,.top .bk{width:36px;height:36px;border:0;border-radius:12px;background:#22255E;color:#fff;font-weight:800;font-size:18px;flex:none}
.top .ttl{font-weight:800;font-size:17px;flex:1;text-align:center}
.rp{padding:5px 12px;border-radius:99px;font-weight:800;font-size:12px}
.upb{flex:1;height:50px;border:0;border-radius:15px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);color:#fff;font-weight:800;font-size:15px;box-shadow:0 6px 18px rgba(79,81,242,.45),inset 0 1px 0 rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;gap:6px;position:relative;overflow:hidden}
.upb.dis{background:#22255E;box-shadow:none;color:#8F95CF}
.mkb{width:110px;height:50px;border:0;border-radius:15px;background:linear-gradient(180deg,#FFD45A,#F59E0B);color:#2A1700;font-weight:800;font-size:14px}
.plb{width:100%;height:46px;border:0;border-radius:14px;background:#22255E;color:#C9CCF8;font-weight:800;font-size:14px}
.dstage{margin:14px 0 0;height:170px;display:flex;justify-content:center;align-items:center;gap:26px;background:radial-gradient(60% 70% at 50% 60%,rgba(123,125,255,.35),rgba(0,0,0,0) 70%)}
.s-Duel .die.d1,.s-Duel .die.d2{animation-play-state:running}
.tg2{width:44px;height:26px;border-radius:99px;background:#4F51F2;position:relative;flex:none}
.tg2 i{position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:all .2s}
.tg2.off{background:#2A2D6E}.tg2.off i{right:auto;left:3px}
.s-Bird .stat .b{flex:1}
@media (prefers-reduced-motion:reduce){.page{animation:none}}

.chips{max-width:100%}
.card,.tile,.lot,.frb,.hero2{max-width:100%}

.s-Reveal .logo{font-weight:800;font-size:26px;letter-spacing:1px;background:linear-gradient(180deg,#fff 30%,#9EA1FF);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #2A2D86)}
.s-Reveal .card{border-radius:20px;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.07)}
.s-Reveal .mut{color:#9CA2DA}
.s-Reveal .btn{height:52px;width:100%;border:0;border-radius:16px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);color:#fff;font-weight:800;font-size:16px;box-shadow:0 8px 22px rgba(79,81,242,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.s-Reveal .shine{position:relative;overflow:hidden}
.s-Reveal .shine::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-150%) skewX(-20deg);animation:shim_Reveal 2.8s ease-in-out infinite;pointer-events:none}
@keyframes shim_Reveal{0%{transform:translateX(-150%) skewX(-20deg)}55%,100%{transform:translateX(350%) skewX(-20deg)}}
.s-Reveal .wob{animation:wob_Reveal 4.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes wob_Reveal{0%,50%,100%{transform:rotate(0) scale(1)}54%{transform:rotate(-5deg) scale(1.01,.99)}60%{transform:rotate(5deg) scale(1)}66%{transform:rotate(-3.5deg)}72%{transform:rotate(2deg)}78%{transform:rotate(-1deg)}84%{transform:rotate(0)}}
.s-Reveal .flt{animation:flt_Reveal 3.2s ease-in-out infinite}
@keyframes flt_Reveal{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){*,.shine::after{animation:none!important}}
.s-Reveal .rays{position:absolute;left:50%;top:330px;width:900px;height:900px;margin:-450px 0 0 -450px;background:repeating-conic-gradient(from 0deg,rgba(255,210,90,.28) 0 10deg,rgba(255,210,90,0) 10deg 20deg);-webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.0) 62%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,0) 62%);animation:spin_Reveal 18s linear infinite}
@keyframes spin_Reveal{to{transform:rotate(360deg)}}
.s-Reveal .cf{position:absolute;top:-30px;border-radius:2px;opacity:0;animation:fall_Reveal 3.2s ease-in infinite}
@keyframes fall_Reveal{0%{transform:translateY(0) rotate(var(--r));opacity:0}6%{opacity:1}100%{transform:translateY(900px) rotate(calc(var(--r) + 540deg));opacity:1}}
.s-Reveal .drop{animation:drop_Reveal 6s ease-out infinite}
@keyframes drop_Reveal{0%{transform:translateY(-420px) scale(.6);opacity:0}10%{opacity:1}22%{transform:translateY(0) scale(1.12,.88)}28%{transform:translateY(-34px) scale(.96,1.06)}34%{transform:translateY(0) scale(1.04,.96)}40%,100%{transform:none;opacity:1}}
.s-Reveal .pop1{animation:p1_Reveal 6s ease-out infinite}
@keyframes p1_Reveal{0%,30%{opacity:0;transform:translateY(16px) scale(.9)}42%{opacity:1;transform:translateY(0) scale(1.04)}48%,100%{opacity:1;transform:none}}
.s-Reveal .pop2{animation:p2_Reveal 6s ease-out infinite}
@keyframes p2_Reveal{0%,40%{opacity:0;transform:translateY(16px)}52%,100%{opacity:1;transform:none}}
.s-Reveal .flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.9),rgba(255,230,150,.4) 30%,rgba(255,210,90,0) 60%);opacity:0;animation:fl_Reveal 6s ease-out infinite}
@keyframes fl_Reveal{0%,18%{opacity:0}22%{opacity:1}40%,100%{opacity:0}}
.s-Reveal .lab{display:inline-block;padding:6px 18px;border-radius:99px;background:linear-gradient(180deg,#FFD45A,#F59E0B);color:#2A1700;font-weight:800;font-size:13px;letter-spacing:.8px;position:relative;overflow:hidden}
.s-Reveal .lab::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0));transform:translateX(-150%) skewX(-20deg);animation:shim_Reveal 2.2s ease-in-out infinite}
.s-CaseOpen .card{border-radius:20px;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.07)}
.s-CaseOpen .mut{color:#9CA2DA}
.s-CaseOpen .h{font-weight:800;font-size:18px}
.s-CaseOpen .mult{width:44px;height:36px;border:0;border-radius:12px;background:#22255E;color:#B9BDF5;font-weight:800;font-size:13px}
.s-CaseOpen .mult.on{background:linear-gradient(180deg,#7B7DFF,#4F51F2);color:#fff}
.s-CaseOpen .drop{border-radius:16px;padding:8px 4px;text-align:center;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.07)}
.s-CaseOpen .drop img{width:58px;height:58px}
.s-CaseOpen .drop b{display:block;font-size:11px;margin-top:2px}
.s-CaseOpen .drop span{font-size:10px;font-weight:700}
.s-CaseOpen .shine, .s-CaseOpen .price, .s-CaseOpen .buy, .s-CaseOpen .go{position:relative;overflow:hidden}
.s-CaseOpen .shine::after, .s-CaseOpen .price::after, .s-CaseOpen .buy::after, .s-CaseOpen .go::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-150%) skewX(-20deg);animation:shim_CaseOpen 2.8s ease-in-out infinite;pointer-events:none}
@keyframes shim_CaseOpen{0%{transform:translateX(-150%) skewX(-20deg)}55%,100%{transform:translateX(350%) skewX(-20deg)}}
.s-CaseOpen .wob{animation:wob_CaseOpen 4.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes wob_CaseOpen{0%,50%,100%{transform:rotate(0) scale(1)}54%{transform:rotate(-5deg) scale(1.01,.99)}60%{transform:rotate(5deg) scale(1)}66%{transform:rotate(-3.5deg)}72%{transform:rotate(2deg)}78%{transform:rotate(-1deg)}84%{transform:rotate(0)}}
.s-CaseOpen .flt{animation:flt_CaseOpen 3.2s ease-in-out infinite}
@keyframes flt_CaseOpen{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.s-CaseOpen .glow{animation:glow_CaseOpen 2.6s ease-in-out infinite}
@keyframes glow_CaseOpen{0%,100%{opacity:.65}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.shine::after,.price::after,.buy::after,.go::after,.wob,.flt,.glow,.hat *{animation:none!important}}
.s-CaseOpen .hat{position:relative;width:230px;height:230px}
.s-CaseOpen .hat .eg, .s-CaseOpen .hat .bd, .s-CaseOpen .hat .fx{position:absolute;left:0;top:0;width:230px;height:230px}
.s-CaseOpen .hat img, .s-CaseOpen .hat svg{position:absolute;left:0;top:0;width:230px;height:230px;display:block}
.s-CaseOpen .hat .eg{transform-origin:50% 92%;animation:hegg_CaseOpen 7s ease-in-out infinite}
.s-CaseOpen .hat .eg img{filter:drop-shadow(0 14px 22px rgba(0,0,0,.5))}
.s-CaseOpen .hat .t{clip-path:polygon(0 0,100% 0,100% 50%,85.9% 57.8%,73.4% 48.4%,60.9% 57.8%,48.4% 48.4%,35.9% 57.8%,23.4% 48.4%,10.9% 57.8%,0 51.6%);transform-origin:45% 60%;animation:htop_CaseOpen 7s ease-in-out infinite}
.s-CaseOpen .hat .bl{clip-path:polygon(0 51.6%,10.9% 57.8%,23.4% 48.4%,35.9% 57.8%,48.4% 48.4%,50% 51%,50% 100%,0 100%);transform-origin:50% 92%;animation:hbl_CaseOpen 7s ease-in-out infinite}
.s-CaseOpen .hat .br{clip-path:polygon(50% 51%,60.9% 57.8%,73.4% 48.4%,85.9% 57.8%,100% 50%,100% 100%,50% 100%);transform-origin:50% 92%;animation:hbr_CaseOpen 7s ease-in-out infinite}
.s-CaseOpen .hat .cr{stroke-dasharray:1;stroke-dashoffset:1;animation:hcr_CaseOpen 7s ease-in-out infinite}
.s-CaseOpen .hat .lt{opacity:0;animation:hlt_CaseOpen 7s ease-in-out infinite}
.s-CaseOpen .hat .bd{animation:hbd_CaseOpen 7s ease-in-out infinite;transform-origin:50% 92%;opacity:0}
.s-CaseOpen .hat .bd img{filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.s-CaseOpen .hat .fl{background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(255,236,160,.7) 28%,rgba(255,210,90,0) 66%);border-radius:50%;opacity:0;animation:hfl_CaseOpen 7s ease-out infinite}
.s-CaseOpen .hat .sp{position:absolute;left:103px;top:103px;width:24px;height:24px;opacity:0;animation:hsp_CaseOpen 7s ease-out infinite}
.s-CaseOpen .hat .sp svg{width:24px;height:24px}
@keyframes hegg_CaseOpen{0%,8%,100%{transform:none}4%{transform:scale(1.02,.985)}14%{transform:rotate(-4deg)}18%{transform:rotate(4deg)}22%{transform:rotate(-3deg)}26%{transform:rotate(2deg)}30%{transform:rotate(0)}34%{transform:rotate(-6deg)}38%{transform:rotate(6deg)}42%{transform:rotate(-7deg)}46%{transform:rotate(5deg)}48%{transform:rotate(0) scale(1.05,.93)}50%{transform:scale(.97,1.06)}54%{transform:none}}
@keyframes hcr_CaseOpen{0%,34%{stroke-dashoffset:1;opacity:1}46%{stroke-dashoffset:0;opacity:1}50%{stroke-dashoffset:0;opacity:1}53%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hlt_CaseOpen{0%,36%{opacity:0}48%{opacity:.55}51%{opacity:.9}56%,100%{opacity:0}}
@keyframes htop_CaseOpen{0%,50%{transform:none;opacity:1}58%{transform:translate(-16px,-70px) rotate(-24deg);opacity:1}66%{transform:translate(-28px,-80px) rotate(-38deg);opacity:1}76%{transform:translate(-36px,-24px) rotate(-60deg);opacity:0}96%{transform:none;opacity:0}100%{transform:none;opacity:1}}
@keyframes hbd_CaseOpen{0%,49.5%{opacity:0;transform:translateY(8px) scale(.78)}50%{opacity:1;transform:translateY(8px) scale(.78)}56%{transform:translateY(6px) scale(.8,.78) rotate(-5deg)}60%{transform:translateY(4px) scale(.79,.8) rotate(5deg)}64%{transform:translateY(8px) scale(.76,.72) rotate(0)}69%{transform:translateY(-22px) scale(1.04,1.14)}74%{transform:translateY(0) scale(1.08,.92)}78%{transform:scale(.98,1.03)}82%{transform:scale(1)}88%{transform:translateY(-5px)}93%{transform:translateY(0);opacity:1}97%,100%{opacity:0;transform:translateY(0)}}
@keyframes hbl_CaseOpen{0%,64%{transform:none;opacity:1}70%{transform:translate(-30px,18px) rotate(-16deg);opacity:1}78%{transform:translate(-48px,64px) rotate(-30deg);opacity:0}96%{transform:none;opacity:0}100%{transform:none;opacity:1}}
@keyframes hbr_CaseOpen{0%,64%{transform:none;opacity:1}70%{transform:translate(30px,18px) rotate(16deg);opacity:1}78%{transform:translate(48px,64px) rotate(30deg);opacity:0}96%{transform:none;opacity:0}100%{transform:none;opacity:1}}
@keyframes hfl_CaseOpen{0%,49%{opacity:0;transform:scale(.6)}53%{opacity:.85;transform:scale(1)}72%,100%{opacity:0;transform:scale(1.5)}}
@keyframes hsp_CaseOpen{0%,52%{opacity:0;transform:translate(0,0) scale(.3)}56%{opacity:1}68%{opacity:1;transform:translate(var(--x),var(--y)) scale(1) rotate(60deg)}78%,100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.5) rotate(90deg)}}
.caseb{width:100%;height:54px;border:0;border-radius:16px;background:linear-gradient(180deg,#7B7DFF,#4F51F2);color:#fff;font-weight:800;font-size:17px;box-shadow:0 8px 22px rgba(79,81,242,.5),inset 0 1px 0 rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}
.dropt{border-radius:16px;padding:8px 4px;text-align:center;background:linear-gradient(180deg,#1B1E4B,#14173A);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;gap:2px}
.dropt b{font-size:11px}.dropt span{font-size:11px;font-weight:800}
.s-Reveal .app2,.s-Reveal.page{background:#090A1E}
.s-Upgrader .btn.gold[disabled]{background:#22255E;color:#8F95CF;box-shadow:none;opacity:1}