#loadScreen{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 38%,#2a1d4d 0%,#151b32 45%,#070a16 100%);overflow:hidden;transition:opacity .6s ease,visibility .6s; padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);font-family:'Segoe UI',Arial,sans-serif;color:#eef2ff} #loadScreen.hide{opacity:0;visibility:hidden;pointer-events:none} #loadScreen .rays{position:absolute;left:50%;top:38%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;opacity:.22; background:repeating-conic-gradient(from 0deg,#ffcc33 0 6deg,transparent 6deg 24deg); -webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%);animation:ldSpin 40s linear infinite} @keyframes ldSpin{to{transform:rotate(360deg)}} #loadScreen svg.art{position:relative;width:min(92vw,520px);height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))} .ldL{animation:ldL 1.1s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%} .ldR{animation:ldR 1.1s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%} @keyframes ldL{from{transform:translateX(-4px) rotate(-2deg)}to{transform:translateX(8px) rotate(3deg)}} @keyframes ldR{from{transform:translateX(4px) rotate(2deg)}to{transform:translateX(-8px) rotate(-3deg)}} .ldSpark{animation:ldSpark .55s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center} @keyframes ldSpark{from{transform:scale(.75) rotate(-6deg);opacity:.8}to{transform:scale(1.15) rotate(6deg);opacity:1}} #loadScreen .ldTitle{position:relative;margin-top:-6px;font-size:clamp(34px,11vw,60px);font-weight:900;letter-spacing:3px;line-height:1; background:linear-gradient(90deg,#ffcc33,#ff6a3d);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 18px rgba(255,150,50,.45))} #loadScreen .ldSub{position:relative;margin-top:6px;font-size:13px;letter-spacing:4px;color:#9aa4d0;font-weight:700} #loadScreen .ldBar{position:relative;margin-top:26px;width:min(78vw,380px);height:18px;border-radius:12px;background:rgba(0,0,0,.45); border:2px solid #3a4570;overflow:hidden;box-shadow:0 0 14px rgba(57,209,255,.25)} #loadScreen .ldFill{height:100%;width:0%;border-radius:10px;background:linear-gradient(90deg,#39d1ff,#ffcc33,#ff6a3d);transition:width .25s ease} #loadScreen .ldPct{position:relative;margin-top:8px;font-size:14px;font-weight:900;color:#ffcc33} #loadScreen .ldTip{position:relative;margin-top:12px;min-height:34px;max-width:82vw;text-align:center;font-size:13px;color:#cdd5ff;opacity:.9}(function(){ var scr=document.getElementById('loadScreen'); if(!scr) return; var fill=document.getElementById('ldFill'), pct=document.getElementById('ldPct'), tip=document.getElementById('ldTip'); var tips=['💡 Збирай команду з друзів — разом легше перемагати!','💡 Відкривай бокси, щоб знайти рідкісних бійців.','💡 Виконуй квести та забирай щоденні нагороди.','💡 Піднімайся Дорогою трофеїв за круті призи.','💡 Не забувай прокачувати силу своїх бійців.','💡 Боси сильні — готуйся до бою!']; var ti=Math.floor(Math.random()*tips.length); tip.textContent=tips[ti]; var tipTimer=setInterval(function(){ ti=(ti+1)%tips.length; tip.textContent=tips[ti]; },1800); var p=0, loaded=(document.readyState==='complete'), start=Date.now(), MIN=2600, done=false; window.addEventListener('load',function(){ loaded=true; }); var t=setInterval(function(){ var el=Date.now()-start; var target=loaded ? 100 : Math.min(90, 8+el/60); if(loaded && eltarget) p=target; fill.style.width=p.toFixed(0)+'%'; pct.textContent=p.toFixed(0)+'%'; if((p>=99.5 && loaded && el>=MIN) || el>12000) finish(); },90); function finish(){ if(done) return; done=true; clearInterval(t); clearInterval(tipTimer); fill.style.width='100%'; pct.textContent='100%'; setTimeout(function(){ scr.classList.add('hide'); setTimeout(function(){ if(scr.parentNode) scr.parentNode.removeChild(scr); },700); },250); } scr.addEventListener('pointerdown',function(){ if(loaded && Date.now()-start>1200) finish(); }); })();#boxOpen.bs{background:radial-gradient(circle at 50% 46%,#1f58d8 0%,#0a1f7a 60%,#050c3a 100%);} #boxOpen.bs .bxBg{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2790%27%20height%3D%2790%27%3E%3Cg%20fill%3D%27white%27%20fill-opacity%3D%27.2%27%3E%3Cpath%20d%3D%27M20%2010l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%27/%3E%3Cpath%20d%3D%27M62%2052l3%208%208%203-8%203-3%208-3-8-8-3%208-3z%27/%3E%3C/g%3E%3C/svg%3E") 0 0/90px 90px, radial-gradient(circle at 50% 46%, rgba(40,110,255,.35) 0%, transparent 70%);} #boxOpen.bs .bxRays{opacity:.5!important} .bsGlow{position:absolute;left:50%;top:46%;width:110vmin;height:110vmin;margin:-55vmin 0 0 -55vmin;will-change:opacity;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(120,255,255,.95) 0%,rgba(0,200,255,.6) 28%,rgba(0,120,255,.25) 55%,transparent 72%);opacity:calc(.15 + var(--bsg,0)*.85);transition:opacity .2s;} .bsTitle{position:absolute;left:0;right:0;top:calc(6% + env(safe-area-inset-top,0px));z-index:5;font-size:clamp(20px,6.4vw,30px);font-weight:900;letter-spacing:1px;color:#ffd23f; text-shadow:-2px 0 #3a2400,2px 0 #3a2400,0 -2px #3a2400,0 2px #3a2400,0 4px 0 rgba(0,0,0,.4);animation:bsTitle 1s ease-in-out infinite;pointer-events:none;} @keyframes bsTitle{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}} #boxOpen.bsTap .bxHint{display:none} .bxStage.bsOn .bxPic{box-shadow:0 0 50px rgba(90,230,255,.55)!important;} .bxStage.bsOn .bxLid,.bxStage.bsOn .bxLidFx,.bxStage.bsOn .bxLidG,.bxStage.bsOn .bxInside{display:none!important;} .bxStage.bsOn,.bxStage.bsOn .bxPic,.bxStage.bsOn img{backface-visibility:hidden;-webkit-backface-visibility:hidden;} .bxStage.bsOn{transform:translate3d(-50%,-50%,0) scale(calc(1 + var(--bsg,0)*.07));} .bxStage.bsHit{animation:bsHit .28s ease-out!important;} @keyframes bsHit{0%{transform:translate3d(-50%,-50%,0) scale(calc(1 + var(--bsg,0)*.07))}30%{transform:translate3d(-51.5%,-50%,0) scale(calc(1.06 + var(--bsg,0)*.07))}65%{transform:translate3d(-48.5%,-50%,0) scale(calc(1.03 + var(--bsg,0)*.07))}100%{transform:translate3d(-50%,-50%,0) scale(calc(1 + var(--bsg,0)*.07))}} .bxStage.bsCharge{animation:bsCharge .45s linear!important;} @keyframes bsCharge{0%,100%{transform:translate3d(-50%,-50%,0) scale(1.08)}12%{transform:translate3d(-52.5%,-50%,0) scale(1.09)}25%{transform:translate3d(-47.5%,-50%,0) scale(1.1)}38%{transform:translate3d(-52.5%,-50%,0) scale(1.11)}50%{transform:translate3d(-47.5%,-50%,0) scale(1.12)}62%{transform:translate3d(-52%,-50%,0) scale(1.13)}78%{transform:translate3d(-48%,-50%,0) scale(1.14)}} .bxStage.bsBurst{animation:bsBurst .5s ease-in forwards!important;} @keyframes bsBurst{0%{transform:translate3d(-50%,-50%,0) scale(1.14);opacity:1}100%{transform:translate3d(-50%,-50%,0) scale(1.9);opacity:0}} #bxReveal.bs{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2790%27%20height%3D%2790%27%3E%3Cg%20fill%3D%27white%27%20fill-opacity%3D%27.2%27%3E%3Cpath%20d%3D%27M20%2010l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%27/%3E%3Cpath%20d%3D%27M62%2052l3%208%208%203-8%203-3%208-3-8-8-3%208-3z%27/%3E%3C/g%3E%3C/svg%3E") 0 0/90px 90px, radial-gradient(circle at 50% 45%, var(--r1), var(--r2));} #bxReveal.bs::before{opacity:.45} #bxReveal.bs .bxRvTitle{font-size:clamp(24px,8vw,38px);color:#d3dbee;letter-spacing:2px;} #bxReveal.bs .bxRvNum{font-size:clamp(40px,13vw,66px);} .bsLeft{position:absolute;right:14px;bottom:calc(56px + env(safe-area-inset-bottom,0px));font-size:11px;font-weight:900;color:#fff;letter-spacing:.5px;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000;display:flex;align-items:center;gap:6px;animation:bxPopIn .4s ease-out both;} .bsLeft.gold{color:#ffd23f;text-shadow:-1px 0 #3a2400,1px 0 #3a2400,0 -1px #3a2400,0 1px #3a2400,0 0 10px rgba(255,210,63,.9);animation:bxPopIn .4s ease-out both,bsGold 1s ease-in-out infinite .4s} .bsLeft.gold b{background:#ffc21f;color:#3a2400;box-shadow:0 0 12px #ffc21f,0 2px 0 rgba(0,0,0,.4)} @keyframes bsGold{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}} .bsLeft b{background:#e3171c;border-radius:5px;min-width:22px;padding:2px 5px;font-size:13px;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.4)} .bsSumWrap{position:relative;display:flex;flex-direction:column;align-items:center;width:min(94vw,460px);max-height:94vh;overflow-y:auto;scrollbar-width:none;} .bsStrip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 4px;} .bsTile{width:clamp(66px,19vw,86px);border-radius:10px;padding:5px 3px 4px;background:linear-gradient(180deg,#ffd35a,#f2a516);border:3px solid #fff3b0;box-shadow:0 4px 0 rgba(0,0,0,.35); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;animation:bsTile .5s cubic-bezier(.2,1.4,.4,1) both;} .bsTile .ic{width:100%;height:clamp(36px,11vw,50px);display:flex;align-items:center;justify-content:center;font-size:clamp(28px,9vw,40px);line-height:1} .bsTile .ic svg,.bsTile .ic img{height:100%;width:auto;max-width:100%;object-fit:contain} .bsTile .ic i{width:70%;aspect-ratio:1;border-radius:50%;border:3px solid #fff;display:block} .bsTile .nm{font-size:11px;font-weight:900;color:#3a2400;text-align:center;line-height:1.05;word-break:break-word} @keyframes bsTile{from{transform:translateX(-90vw) scale(.7);opacity:0}to{transform:none;opacity:1}} МАКСИМУМ — Бійці
VS
МАКСИМУМ
БІЙЦІ • 3×3 АРЕНА
0%

Режим

Карта

Зброя

Магазин

🪙 0

Бокси

Скіни