:root{--y:#FFC800;--y2:#FFE45C;--bg:#000;--t:#fff;--m:#8a8a8a}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg) radial-gradient(circle at 50% -20%,rgba(255,200,0,.18),transparent 60%) no-repeat;color:var(--t);font-family:Manrope,sans-serif;min-height:100vh;max-width:520px;margin:0 auto;padding:16px}
.top{display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;flex-direction:column;font-family:'Russo One',sans-serif;line-height:.9;font-size:26px}
.l1{color:#fff}.l2{color:var(--y);text-shadow:0 0 14px rgba(255,200,0,.5)}
.balance{display:flex;align-items:center;gap:6px;background:#111;border:1px solid rgba(255,200,0,.4);padding:6px 14px 6px 8px;border-radius:999px;font-weight:800;color:var(--y)}
.balance img{width:30px}
.glass{position:relative;display:flex;margin:18px 0;padding:6px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 30px rgba(0,0,0,.6)}
.tab{flex:1;z-index:1;background:none;border:0;color:#ccc;font:700 15px Manrope;padding:11px;border-radius:999px;cursor:pointer;transition:color .3s}
.tab.active{color:#000}
.pill{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/3);border-radius:999px;background:linear-gradient(180deg,var(--y2),var(--y));box-shadow:0 0 20px rgba(255,200,0,.45),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .4s cubic-bezier(.5,1.6,.4,1)}
.page{display:none;animation:in .35s ease}.page.show{display:block}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card,.soon{aspect-ratio:1;border-radius:22px;background:linear-gradient(160deg,#1a1a1a,#0a0a0a);border:1px solid rgba(255,200,0,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,200,0,.12),transparent 60%)}
.ic{font-size:38px;filter:grayscale(.2)}
.card b,.soon b{font-size:18px;color:var(--y)}
small{color:var(--m);font-size:12px}
.soon{aspect-ratio:auto;padding:60px 20px}
.prof{text-align:center;padding:24px 16px;border-radius:24px;background:#0d0d0d;border:1px solid rgba(255,200,0,.25)}
.lvl-ring{width:120px;height:120px;margin:0 auto 14px;border-radius:50%;border:4px solid var(--y);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(255,200,0,.35)}
.lvl-ring span{font:40px 'Russo One';color:var(--y)}
h2{font-size:20px;margin-bottom:14px}
.bar{height:12px;background:#222;border-radius:99px;overflow:hidden;margin-bottom:14px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--y),var(--y2));border-radius:99px;transition:width .5s}
.muted{color:#bbb;margin:6px 0}
.g{width:18px;vertical-align:middle}
.info{margin-top:16px;padding:12px;border-radius:14px;background:var(--y);color:#000;font-weight:700}
.glass{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:calc(100% - 32px);max-width:488px;margin:0;z-index:10}
main{padding-top:18px;padding-bottom:100px}
/* mega liquid glass */
.glass{padding:7px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 45%,rgba(255,200,0,.08));border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(28px) saturate(200%) brightness(1.1);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.08),inset 0 0 22px rgba(255,255,255,.06),0 12px 40px rgba(0,0,0,.8),0 0 40px rgba(255,200,0,.12);overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 70% at 30% -20%,rgba(255,255,255,.35),transparent 55%);pointer-events:none}
.glass::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);animation:shine 5s infinite;pointer-events:none}
@keyframes shine{60%,100%{left:120%}}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;font-size:12px}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.5,1.8,.4,1)}
.tab.active svg{transform:translateY(-1px) scale(1.12)}
.pill{top:7px;bottom:7px;left:7px;width:calc((100% - 14px)/3);background:linear-gradient(180deg,#FFF1A0,var(--y) 55%,#E0A800);box-shadow:inset 0 2px 1px rgba(255,255,255,.8),inset 0 -2px 4px rgba(150,90,0,.4),0 0 24px rgba(255,200,0,.6),0 4px 14px rgba(255,200,0,.35)}
/* animated icons */
.ic{filter:none;width:72px;height:72px;font-size:0}
.soon .ic{width:96px;height:96px}
.ai{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 10px rgba(255,200,0,.35))}
.ai *{transform-box:fill-box}
.ai .sp,.ai .pt{fill:#FFE45C}
.ai .rays,.ai .stars,.bomb .spark path{stroke:#FFE45C;stroke-width:2;stroke-linecap:round;fill:none}
/* gift */
.gift .lid{transform-origin:10% 100%;animation:lid 2.6s cubic-bezier(.5,1.6,.4,1) infinite}
@keyframes lid{0%,35%,100%{transform:none}50%{transform:translate(2px,-9px) rotate(-14deg)}70%{transform:translate(1px,-6px) rotate(-9deg)}85%{transform:none}}
.gift .bow{transform-origin:50% 100%;animation:bow 2.6s ease-in-out infinite}
@keyframes bow{45%,75%{transform:scale(1.15) rotate(4deg)}}
.gift .glow,.gift .rays{opacity:0;transform-origin:center;animation:glow 2.6s ease-out infinite}
.gift .rays{transform-origin:50% 100%}
@keyframes glow{0%,40%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.3)}85%,100%{opacity:0;transform:scale(1)}}
.ai .sp{transform-origin:center;animation:tw 1.8s ease-in-out infinite}
.ai .s2{animation-delay:.9s}
@keyframes tw{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}
/* upgrade */
.up .ring{transform-origin:center;animation:spin 2.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.up .c{fill:none;stroke:url(#gY2);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;animation:chev 1.2s ease-in-out infinite;opacity:.2}
.up .c2{animation-delay:.2s}.up .c3{animation-delay:.4s}
@keyframes chev{0%{opacity:.15;transform:translateY(4px)}40%{opacity:1;transform:translateY(-2px)}100%{opacity:.15;transform:translateY(-6px)}}
.up .pt circle{animation:rise 1.6s linear infinite}
.up .pt circle:nth-child(2){animation-delay:.5s}.up .pt circle:nth-child(3){animation-delay:1s}
@keyframes rise{from{transform:translateY(0);opacity:1}to{transform:translateY(-30px);opacity:0}}
/* bomb */
.bomb .body{transform-origin:40% 60%;animation:shake 1.4s ease-in-out infinite}
@keyframes shake{0%,60%,100%{transform:none}65%{transform:rotate(-6deg)}70%{transform:rotate(5deg)}75%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}85%{transform:scale(1.04)}}
.bomb .fuse{animation:burn 1.4s linear infinite}
@keyframes burn{from{stroke-dashoffset:0}to{stroke-dashoffset:-3}}
.bomb .spark{transform-origin:center;animation:spark .25s steps(2) infinite alternate}
@keyframes spark{from{transform:scale(.75) rotate(0)}to{transform:scale(1.15) rotate(22deg)}}
/* rocket */
.rocket .rk{animation:fly 1.6s ease-in-out infinite}
@keyframes fly{50%{transform:translate(0,-4px) rotate(2deg)}}
.rocket .flame{transform-origin:50% 0;animation:fl .12s ease-in-out infinite alternate}
@keyframes fl{from{transform:scaleY(.8) scaleX(.95)}to{transform:scaleY(1.25) scaleX(1.05)}}
.rocket .stars path{animation:st .8s linear infinite;opacity:.7}
.rocket .stars path:nth-child(2n){animation-delay:.3s}.rocket .stars path:nth-child(3n){animation-delay:.55s}
@keyframes st{from{transform:translateY(-14px);opacity:0}30%{opacity:.8}to{transform:translateY(24px);opacity:0}}
/* trophy */
.trophy .crown{transform-origin:50% 100%;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-2px) rotate(-2deg)}}
.trophy .sh{animation:sw 2.4s ease-in-out infinite}
@keyframes sw{0%,40%{transform:translateX(0) skewX(-20deg)}80%,100%{transform:translateX(60px) skewX(-20deg)}}
.trophy .star{transform-origin:center;animation:sr 2.4s ease-in-out infinite}
@keyframes sr{50%{transform:scale(1.25) rotate(72deg)}}
/* card tap */
.card{transition:transform .2s}.card:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.ai *{animation:none!important}}
/* image icons */
.card .ic:has(.fx){width:100px;height:100px}
.fx{position:relative;width:100%;height:100%}
.fx i,.fx b{position:absolute;display:block;pointer-events:none}
.fx .obj{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(255,200,0,.25))}
/* case: CS-style shake + lock glow */
.case .obj{transform-origin:50% 90%;animation:cshake 3s ease-in-out infinite}
@keyframes cshake{0%,55%,100%{transform:none}60%{transform:rotate(-5deg) translateY(-2px)}65%{transform:rotate(5deg)}70%{transform:rotate(-4deg)}75%{transform:rotate(3deg) scale(1.05)}82%{transform:scale(1.08) translateY(-4px)}90%{transform:none}}
.case .aura{inset:5%;border-radius:50%;background:radial-gradient(circle,rgba(255,200,0,.45),transparent 65%);animation:aura 3s ease-in-out infinite}
@keyframes aura{0%,55%{opacity:.3;transform:scale(.8)}82%{opacity:1;transform:scale(1.3)}100%{opacity:.3;transform:scale(.8)}}
.case .lockglow{left:57%;top:53%;width:22%;height:22%;border-radius:30%;background:radial-gradient(circle,rgba(255,240,160,.9),transparent 70%);mix-blend-mode:screen;animation:lg 1.5s ease-in-out infinite}
@keyframes lg{50%{opacity:.15;transform:scale(.7)}}
.case .sw{inset:0;-webkit-mask:url(case.png) center/contain no-repeat;mask:url(case.png) center/contain no-repeat;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) -150% 0/250% 100% no-repeat;animation:swp 3s ease-in-out infinite}
@keyframes swp{0%,20%{background-position:-150% 0}50%,100%{background-position:150% 0}}
.fx .p{width:6px;height:6px;border-radius:50%;background:#FFE45C;box-shadow:0 0 8px #FFC800;bottom:30%;opacity:0;animation:pup 3s ease-out infinite}
.p1{left:20%;animation-delay:2.4s!important}.p2{left:50%;animation-delay:2.5s!important}.p3{left:78%;animation-delay:2.6s!important}
@keyframes pup{0%{opacity:0;transform:none}10%{opacity:1}40%{opacity:0;transform:translateY(-60px) scale(.4)}100%{opacity:0}}
/* mine: fuse burns, bomb swells, BOOM */
.mine .obj{transform-origin:50% 70%;animation:bswell 2.8s ease-in infinite}
@keyframes bswell{0%{transform:none;opacity:1}50%{transform:rotate(-3deg)}55%{transform:rotate(3deg)}60%{transform:rotate(-3deg) scale(1.05)}66%{transform:scale(1.15);opacity:1;filter:brightness(1.6)}68%,88%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
.mine .fuse{left:70%;top:6%;width:22%;height:22%;border-radius:50%;background:radial-gradient(circle,#fff,#FFE45C 30%,rgba(255,106,0,.6) 55%,transparent 70%);animation:fz .15s steps(2) infinite alternate,fzh 2.8s linear infinite}
@keyframes fz{to{transform:scale(1.35) rotate(30deg)}}
@keyframes fzh{0%,65%{opacity:1}67%,92%{opacity:0}100%{opacity:1}}
.mine .boom{left:50%;top:45%;width:20px;height:20px;margin:-10px;border-radius:50%;background:radial-gradient(circle,#fff,#FFE45C 25%,#FF7A00 55%,rgba(255,60,0,0) 72%);opacity:0;animation:boom 2.8s ease-out infinite}
@keyframes boom{0%,64%{opacity:0;transform:scale(.2)}68%{opacity:1;transform:scale(5)}85%{opacity:0;transform:scale(7)}100%{opacity:0}}
.mine .ring{left:50%;top:45%;width:20px;height:20px;margin:-10px;border-radius:50%;border:3px solid #FFE45C;opacity:0;animation:rg 2.8s ease-out infinite}
@keyframes rg{0%,66%{opacity:0;transform:scale(.5)}70%{opacity:1}88%,100%{opacity:0;transform:scale(8)}}
.mine .d{left:50%;top:45%;width:7px;height:7px;margin:-3.5px;border-radius:2px;background:#FFC800;box-shadow:0 0 6px #FF7A00;opacity:0;animation:deb 2.8s ease-out infinite}
.d1{--x:-55px;--y:-40px}.d2{--x:50px;--y:-50px}.d3{--x:-60px;--y:20px}.d4{--x:60px;--y:15px}.d5{--x:0px;--y:-65px}.d6{--x:-20px;--y:55px}
@keyframes deb{0%,66%{opacity:0;transform:none}68%{opacity:1}90%,100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(200deg)}}
/* crash: rocket flies through */
.crash{overflow:visible}
.crash .rk{position:absolute;inset:0;animation:launch 2.6s cubic-bezier(.5,0,.6,1) infinite}
@keyframes launch{0%{transform:translate(-70px,70px) scale(.5);opacity:0}15%{opacity:1}30%,65%{transform:translate(0,0) scale(1)}62%{transform:translate(-2px,2px)}66%{transform:translate(2px,-1px)}100%{transform:translate(90px,-90px) scale(.6);opacity:0}}
.crash .rk .obj{animation:vib .08s linear infinite alternate}
@keyframes vib{to{transform:translate(1px,-1px)}}
.crash .smoke{left:4%;bottom:4%;width:40%;height:40%;border-radius:50%;background:radial-gradient(circle,rgba(255,228,92,.9),rgba(255,122,0,.5) 40%,transparent 70%);animation:fl2 .12s ease-in-out infinite alternate}
@keyframes fl2{to{transform:scale(1.3) translate(-4px,4px);opacity:.7}}
.crash .tr{width:2px;height:30px;border-radius:2px;background:linear-gradient(transparent,#FFE45C);transform:rotate(45deg);opacity:0;animation:trail .7s linear infinite}
.t1{left:10%;top:10%}.t2{left:60%;top:40%;animation-delay:.25s!important}.t3{left:30%;top:70%;animation-delay:.5s!important}
@keyframes trail{0%{opacity:0;translate:30px -30px}30%{opacity:.9}100%{opacity:0;translate:-40px 40px}}
@media (prefers-reduced-motion:reduce){.fx *{animation:none!important}}
/* wide mode cards */
.grid{grid-template-columns:1fr;gap:14px}
.card{aspect-ratio:auto;height:150px;flex-direction:row;justify-content:space-between;padding:0 10px 0 24px;text-align:left;overflow:visible}
.card::after{border-radius:inherit}
.card b{font:30px 'Russo One',sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--y);text-shadow:0 0 16px rgba(255,200,0,.45);z-index:1}
.card .ic,.card .ic:has(.fx){width:170px;height:170px;flex:none;margin:-10px 0}
.card .ic .ai{width:75%;height:75%;margin:12.5%}
/* square 2-col */
.grid{grid-template-columns:1fr 1fr;gap:12px}
.card{aspect-ratio:1;height:auto;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:14px 0 0;overflow:hidden}
.card b{font-size:20px;padding-left:14px}
.card .ic,.card .ic:has(.fx){position:absolute;left:8%;right:8%;bottom:4%;top:24%;width:auto;height:auto;margin:0}
.crash{overflow:hidden}
@keyframes launch{0%{transform:translate(-40px,40px) scale(.6);opacity:0}15%{opacity:1}30%,65%{transform:none}62%{transform:translate(-2px,2px)}66%{transform:translate(2px,-1px)}100%{transform:translate(45px,-45px) scale(.7);opacity:0}}
@keyframes boom{0%,64%{opacity:0;transform:scale(.2)}68%{opacity:1;transform:scale(3.5)}85%{opacity:0;transform:scale(4.5)}100%{opacity:0}}
@keyframes rg{0%,66%{opacity:0;transform:scale(.5)}70%{opacity:1}88%,100%{opacity:0;transform:scale(5)}}
/* profile v2 */
.prof2{display:flex;flex-direction:column;gap:14px}
.who{display:flex;gap:14px;align-items:center;padding:16px;border-radius:22px;background:linear-gradient(160deg,#1a1a1a,#0a0a0a);border:1px solid rgba(255,200,0,.25)}
.ava{position:relative;width:76px;height:76px;flex:none;border-radius:50%;border:3px solid var(--y);overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#111;font-size:28px;box-shadow:0 0 20px rgba(255,200,0,.35)}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.ava.has img{display:block}.ava.has span{display:none}
.who-r{flex:1;min-width:0}
.nickrow{display:flex;align-items:center;gap:8px;margin-bottom:10px}
#nick{flex:1;min-width:0;background:none;border:0;border-bottom:1px dashed transparent;color:#fff;font:20px 'Russo One',sans-serif;outline:none}
#nick:focus{border-bottom-color:var(--y)}
.lvb{flex:none;padding:3px 10px;border-radius:99px;background:linear-gradient(180deg,#FFF1A0,var(--y));color:#000;font:800 12px Manrope;box-shadow:0 0 12px rgba(255,200,0,.5)}
.lvb b{font-size:14px}
.bar2{position:relative;height:10px;background:#222;border-radius:99px;overflow:hidden;margin-bottom:8px}
.bar2 i{position:relative;display:block;height:100%;width:0;border-radius:99px;overflow:hidden;background:repeating-linear-gradient(-45deg,var(--y) 0 8px,var(--y2) 8px 16px);background-size:22.6px 100%;animation:barmv .6s linear infinite;transition:width .6s cubic-bezier(.5,1.4,.4,1);box-shadow:0 0 10px rgba(255,200,0,.6)}
.bar2 i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-100%);animation:barsh 1.8s ease-in-out infinite}
@keyframes barmv{to{background-position:22.6px 0}}
@keyframes barsh{to{transform:translateX(100%)}}
.who small b{color:var(--y)}
.wallet{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:22px;background:#0d0d0d;border:1px solid rgba(255,200,0,.25)}
.wb{display:flex;align-items:center;gap:8px;font:32px 'Russo One';color:var(--y)}.wb img{width:40px}
.wbtn{display:flex;gap:10px}.wbtn .btn{flex:1}
.btn{border:0;border-radius:14px;padding:13px;font:800 15px Manrope;cursor:pointer;transition:transform .15s}
.btn:active{transform:scale(.96)}
.btn.y{background:linear-gradient(180deg,#FFF1A0,var(--y) 55%,#E0A800);color:#000;box-shadow:0 0 16px rgba(255,200,0,.4)}
.btn.o{background:#151515;color:var(--y);border:1px solid rgba(255,200,0,.4)}
.btn.sm{padding:7px 12px;font-size:12px;border-radius:10px}
.btn:disabled{opacity:.4}
.invh{display:flex;justify-content:space-between;align-items:center}
.invh b{font:20px 'Russo One';color:var(--y)}
.inv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.it{border-radius:16px;padding:10px 8px;background:linear-gradient(160deg,#1a1a1a,#0a0a0a);border:1px solid rgba(255,200,0,.25);text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.it img{width:56px;height:56px;object-fit:contain}
.it .nm{font-size:12px;font-weight:700}
.empty{grid-column:1/-1;text-align:center;padding:36px 16px;border-radius:18px;border:1px dashed rgba(255,200,0,.3);color:var(--m)}
.empty img{width:64px;opacity:.5;margin-bottom:8px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal.show{display:flex}
.mbox{width:100%;max-width:360px;padding:20px;border-radius:22px;background:#111;border:1px solid rgba(255,200,0,.4);display:flex;flex-direction:column;gap:10px}
.mbox h3{font:22px 'Russo One';color:var(--y)}
.mbox input{background:#000;border:1px solid rgba(255,200,0,.4);border-radius:12px;padding:12px;color:#fff;font:700 18px Manrope;outline:none}
.err{color:#ff6a5a;font-size:13px;min-height:16px}
button.balance{font:inherit;font-weight:800;cursor:pointer;transition:transform .15s}button.balance:active{transform:scale(.95)}
.mtabs{display:flex;gap:8px}.mtabs .btn{flex:1;padding:9px}

.skin{background:radial-gradient(circle at 50% 40%,rgba(255,200,0,.18),#0a0a0a 70%);border:1px solid rgba(255,200,0,.3);border-radius:16px;padding:12px;text-align:center}
.skin img{width:100%;max-height:150px;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(255,200,0,.35))}
.skin b{display:block;font:15px 'Russo One';color:#fff;margin-top:4px}
.wsum{display:flex;justify-content:space-between;align-items:center;background:#000;border:1px solid rgba(255,200,0,.4);border-radius:12px;padding:12px;margin:10px 0}
.wsum span{color:#bbb}.wsum b{font:22px 'Russo One';color:var(--y);display:flex;align-items:center;gap:6px}.wsum .g{width:20px}
#w1,#w2,#w3{display:flex;flex-direction:column;gap:10px}#w1[hidden],#w2[hidden],#w3[hidden]{display:none}
.dice{display:flex;justify-content:center}.dice img{width:84px;animation:dspin 2.4s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(120,255,160,.45))}
@keyframes dspin{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(10deg) translateY(-8px)}}
#wCode{text-align:center;letter-spacing:12px;font:24px 'Russo One'!important}
.upl{border:1.5px dashed rgba(255,200,0,.5);border-radius:14px;min-height:90px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--y);font-weight:800;overflow:hidden}
.upl.has{border-style:solid}.upl img{width:100%;max-height:180px;object-fit:cover}
.done{align-items:center;text-align:center;padding:10px 0}
.chk{width:110px;height:110px;filter:drop-shadow(0 0 24px rgba(0,255,90,.6))}
.chk circle{fill:#00d64f;stroke:#3dff7f;stroke-width:2;transform-origin:center;animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.chk path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .4s .35s forwards}
@keyframes pop{from{transform:scale(0)}}@keyframes draw{to{stroke-dashoffset:0}}
.upg .obj{animation:ujump 2.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ujump{0%,100%{transform:translateY(4px) scale(.96)}45%{transform:translateY(-8px) scale(1.04)}55%{transform:translateY(-6px) scale(1.04)}}
.upg .uaura{inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(255,210,0,.55),transparent 65%);filter:blur(6px);animation:upulse 2.6s ease-in-out infinite}
@keyframes upulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.upg .uring{inset:12%;border-radius:50%;border:2px solid rgba(255,220,80,.7);opacity:0;animation:uring 2.6s ease-out infinite}
@keyframes uring{0%,40%{opacity:0;transform:scale(.6)}50%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
.upg .ush{inset:0;-webkit-mask:url(upgrade.png) center/contain no-repeat;mask:url(upgrade.png) center/contain no-repeat;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%) no-repeat;background-size:250% 100%;animation:swp 2.6s ease-in-out infinite;mix-blend-mode:overlay}
.upg .p1{left:28%}.upg .p2{left:50%;animation-delay:1s}.upg .p3{left:70%;animation-delay:2s}

#openMines{cursor:pointer}
.mines{position:fixed;inset:0;z-index:40;background:radial-gradient(ellipse at 50% 0,#2a2000,#000 60%);display:none;flex-direction:column;gap:12px;padding:14px;max-width:520px;margin:0 auto;overflow:auto}
.mines.show{display:flex;animation:in .3s}
.mhead{display:flex;align-items:center;justify-content:space-between}.mhead .btn{flex:none}
.mhead>b{font:24px 'Russo One';color:var(--y);text-shadow:0 0 14px rgba(255,200,0,.6)}
.mbal{display:flex;gap:6px;align-items:center;font-weight:800;background:#111;border:1px solid rgba(255,200,0,.4);border-radius:12px;padding:6px 10px}.g{width:16px}
.mstat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mstat div{background:#0e0e0e;border:1px solid rgba(255,200,0,.25);border-radius:12px;padding:8px;text-align:center}
.mstat small{display:block;color:#888;font-size:11px}.mstat b{font:18px 'Russo One';color:var(--y)}
.mgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:10px;border-radius:18px;background:#0a0a0a;border:1px solid rgba(255,200,0,.3);box-shadow:0 0 30px rgba(255,200,0,.12) inset}
.mgrid.shake{animation:mshake .45s}
@keyframes mshake{20%{transform:translate(-6px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,0)}}
.cell{aspect-ratio:1;border:1px solid rgba(255,200,0,.12);border-radius:12px;cursor:pointer;background:#000;box-shadow:none;outline:none;-webkit-tap-highlight-color:transparent;appearance:none;padding:0;transition:transform .15s,border-color .15s;background-size:70%;background-position:center;background-repeat:no-repeat}
.cell:disabled{background-color:#000;opacity:1}
.cell:not(:disabled):active{transform:scale(.94)}
.cell:not(:disabled):hover{border-color:rgba(255,200,0,.4)}
.cell.gem{background-image:url(gold.png);border-color:rgba(255,200,0,.5);animation:pop .3s}
.cell.mine{background-image:url(bomb.png);animation:pop .3s}
.cell.boom{border-color:#ff6a3a;animation:pop .3s,bm .6s}
.cell.dim{opacity:.4}
@keyframes pop{from{background-size:0%}}
@keyframes flip{from{transform:rotateY(90deg) scale(.7)}}
@keyframes bm{50%{transform:scale(1.2)}}
.mctl{display:flex;flex-direction:column;gap:8px}.mctl .muted{margin:0}
.brow{display:flex;gap:8px}.brow input{flex:1;min-width:0;background:#000;border:1px solid rgba(255,200,0,.4);border-radius:12px;padding:12px;color:#fff;font:700 18px Manrope;outline:none}.brow .btn{flex:none;width:58px;font-size:15px}
.mcnt{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mcnt button{border:1px solid rgba(255,200,0,.35);background:#111;color:#fff;border-radius:12px;padding:10px;font:16px 'Russo One';cursor:pointer}
.mcnt button::after{content:' мин';font:600 11px Manrope;color:#888}
.mcnt button.a{background:linear-gradient(180deg,#FFF1A0,var(--y) 55%,#E0A800);color:#000}.mcnt button.a::after{color:#000}
.mcnt button:disabled:not(.a){opacity:.4}
.btn.big{padding:16px;font-size:17px}
.mres{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:45}
.mres.show{display:flex}
.rbox{position:relative;text-align:center;padding:26px 30px;border-radius:22px;background:#111;border:1px solid rgba(255,200,0,.5);display:flex;flex-direction:column;gap:10px;animation:pop .4s cubic-bezier(.3,1.6,.5,1);min-width:260px}
.mres.l .rbox{border-color:#ff5a3a}.mres.l h3{color:#ff6a5a}
.rbox h3{font:20px 'Russo One';color:var(--y)}.rbox>b{font:32px 'Russo One';display:flex;gap:8px;justify-content:center;align-items:center}.rbox>b .g{width:26px}
.mres.w .rbox>b{color:#3dff7f;text-shadow:0 0 16px rgba(0,255,90,.6)}.mres.l .rbox>b{color:#ff6a5a}
.rsp{position:absolute;left:50%;top:50%}
.rsp i{position:absolute;width:7px;height:7px;border-radius:50%;box-shadow:0 0 10px currentColor;animation:sp 1.1s var(--d) ease-out forwards;opacity:0}
@keyframes sp{0%{opacity:1;transform:translate(0,0) scale(1.4)}100%{opacity:0;transform:translate(var(--x),calc(var(--y) * -1 + 60px)) scale(.3)}}
.rsp{pointer-events:none;z-index:3}

#openUpg,#openCrash{cursor:pointer}
.vault{position:fixed;inset:0;z-index:100;pointer-events:none;display:none;overflow:hidden}
.vault.on{display:block;pointer-events:auto}
.vd{position:absolute;top:0;bottom:0;width:50%;background:url(door.jpg) #1a1200;background-size:200% 100%;transition:transform .45s cubic-bezier(.6,0,.9,.4);box-shadow:0 0 40px #000;filter:brightness(.5) saturate(.75)}
.vd.l{left:0;background-position:left center;transform:translateX(-101%)}
.vd.r{right:0;background-position:right center;transform:translateX(101%)}
.vault.close .vd{transform:none}
.vault.open .vd{transition:transform .7s cubic-bezier(.3,.6,.2,1)}
.vlock{position:absolute;left:50%;top:50%;width:min(52vw,240px);margin:calc(min(52vw,240px)/-2) 0 0 calc(min(52vw,240px)/-2);opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s;filter:drop-shadow(0 0 25px rgba(0,0,0,.8))}
.vault.close .vlock{opacity:1;transform:scale(1)}
.vault.spin .vlock{animation:vspin .7s ease-in-out}
.vault.open .vlock{opacity:0;transform:scale(1.6)}
.vault.shake .vd,.vault.shake .vlock{animation:vshake .35s}
@keyframes vshake{20%{translate:-7px 3px}40%{translate:6px -4px}60%{translate:-4px 2px}80%{translate:3px 0}}
@keyframes vspin{to{rotate:360deg}}
.vsoon{position:absolute;left:0;right:0;top:calc(50% + min(26vw,120px) + 16px);text-align:center;font:28px 'Russo One';color:#FFE45C;text-shadow:0 0 14px #000,0 0 20px rgba(255,200,0,.6);opacity:0;transition:opacity .3s}
.vsoon.show{opacity:1}

/* ===== сервер: уведомления и экран ошибки ===== */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);max-width:min(92vw,420px);padding:12px 18px;border-radius:16px;background:rgba(20,20,20,.96);border:1px solid rgba(255,200,0,.45);color:#fff;font:600 14px/1.35 Manrope,sans-serif;text-align:center;opacity:0;pointer-events:none;transition:.3s;z-index:120;box-shadow:0 10px 40px rgba(0,0,0,.7)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.fatal{position:fixed;inset:0;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:28px;z-index:200;text-align:center}
.fatal.show{display:flex}
.fbox{max-width:320px}.fbox img{width:90px;margin-bottom:14px}.fbox p{color:#ddd;font-weight:700;line-height:1.45}