:root{--bg:#090604;--ink:#fff3dc;--muted:#c2ad88;--g1:#ffe07a;--g2:#ffab1a;--or:#ff6a10;--line:#f1e4cc;
--display:"Unbounded","Arial Black",system-ui,sans-serif;--body:"Manrope",system-ui,-apple-system,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);overscroll-behavior:none;user-select:none;-webkit-user-select:none;overflow-x:hidden}
[hidden]{display:none!important}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
radial-gradient(65% 40% at 50% 40%,rgba(255,140,30,.15),transparent 72%),
radial-gradient(90% 38% at 50% 105%,rgba(170,60,10,.24),transparent 72%),
radial-gradient(50% 30% at 0 0,rgba(255,210,90,.07),transparent 70%),var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.6))}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.game{position:relative;z-index:2;min-height:100dvh;display:flex;flex-direction:column;padding:14px 16px calc(30px + env(safe-area-inset-bottom));gap:8px;overflow:hidden}
.top{display:flex;justify-content:space-between;align-items:stretch;gap:12px}
.balance{flex:0 1 62%;border-radius:22px;padding:10px 18px 12px;display:flex;flex-direction:column;gap:2px;
background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02));border:1.5px solid rgba(255,225,160,.55);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 26px rgba(0,0,0,.4),0 0 16px rgba(255,160,30,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.balance-label{font-size:13px;color:var(--muted)}
.balance-value{display:flex;align-items:center;gap:10px;font:800 28px var(--display);text-shadow:0 0 14px rgba(255,170,40,.28)}
.btn-outline{align-self:center;border:2px solid var(--g1);background:linear-gradient(180deg,rgba(255,224,122,.14),rgba(255,224,122,.03));color:var(--g1);
font:800 17px var(--body);padding:14px 22px;border-radius:20px;cursor:pointer;box-shadow:0 0 14px rgba(255,200,60,.12),inset 0 0 12px rgba(255,200,60,.07)}
.btn-outline:active{transform:scale(.96)}

.star-ico{width:26px;height:26px;display:inline-block;flex:none;
filter:drop-shadow(0 0 6px rgba(255,180,30,.7));
background:center/contain no-repeat url("img/star.png")}
.star-ico.dark{width:22px;height:22px}
.star-ico.big{width:64px;height:64px}

.stage{position:relative;flex:1;min-height:280px;display:grid;place-items:center}
.rays{position:absolute;left:50%;top:46%;width:170vw;max-width:900px;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
background:repeating-conic-gradient(from 0deg,rgba(255,190,80,.07) 0 5deg,transparent 5deg 20deg);
-webkit-mask:radial-gradient(circle,#000 0,transparent 52%);mask:radial-gradient(circle,#000 0,transparent 52%);animation:spin 90s linear infinite}
@keyframes spin{to{rotate:360deg}}
.halo{position:absolute;left:50%;top:44%;width:80%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(255,190,80,.16),rgba(255,130,30,.05) 55%,transparent 70%);animation:pulse 5s ease-in-out infinite}
@keyframes pulse{50%{opacity:.7;scale:1.05}}
.boss-wrap{position:relative;width:min(100%,620px);animation:bob 3.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-9px) rotate(.6deg)}}
.boss{display:block;width:100%;height:auto;max-height:58dvh;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)) brightness(1);
will-change:transform;touch-action:manipulation}
.boss.hit{animation:shake .2s linear}
@keyframes shake{
0%{transform:translate(0,0) scale(1) rotate(0);filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)) brightness(1.2)}
15%{transform:translate(calc(var(--sx,1)*-12px),6px) scale(.93) rotate(calc(var(--sx,1)*-3.5deg))}
30%{transform:translate(calc(var(--sx,1)*10px),-5px) scale(.955) rotate(calc(var(--sx,1)*3deg))}
45%{transform:translate(calc(var(--sx,1)*-7px),4px) scale(.97) rotate(calc(var(--sx,1)*-2deg))}
62%{transform:translate(calc(var(--sx,1)*4px),-2px) scale(.985) rotate(calc(var(--sx,1)*1deg))}
80%{transform:translate(calc(var(--sx,1)*-2px),1px) scale(.995) rotate(0)}
100%{transform:translate(0,0) scale(1) rotate(0);filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)) brightness(1)}}
/* круговая вспышка света за боссом при ударе */
.flash{position:absolute;left:50%;top:50%;width:96%;max-width:600px;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;opacity:0;
background:radial-gradient(circle,rgba(255,175,70,.80) 0,rgba(255,125,30,.38) 36%,rgba(255,90,10,.13) 56%,transparent 72%);transition:opacity .3s ease-out}
.flash.on{opacity:1;transition:opacity .04s}
.float{position:absolute;pointer-events:none;font:800 36px var(--display);color:#fff;-webkit-text-stroke:1px rgba(255,150,20,.45);
text-shadow:0 0 14px rgba(255,170,30,.6),0 3px 0 rgba(160,70,0,.5);animation:float .95s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes float{from{opacity:1;transform:translate(0,0) scale(.7)}25%{transform:translate(calc(var(--dx)*.3),-30px) scale(1.2)}to{opacity:0;transform:translate(var(--dx),-120px) scale(1)}}

.bottom{display:flex;flex-direction:column;align-items:center;text-align:center}
.hp{position:relative;width:100%;height:16px;border-radius:99px;background:#1c130a;border:1px solid #4a3418;padding:2px;box-shadow:0 0 16px rgba(255,140,20,.12),inset 0 2px 5px rgba(0,0,0,.6)}
.hp-fill{position:relative;height:100%;width:100%;border-radius:99px;overflow:hidden;background:linear-gradient(90deg,var(--or),var(--g1));
box-shadow:0 0 10px rgba(255,150,30,.45);transition:width .15s linear}
.hp-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);translate:-100%;animation:shine 2.6s ease-in-out infinite}
@keyframes shine{to{translate:100%}}
.bottom p{margin:0 0 18px;color:var(--muted);font-size:clamp(13px,4.2vw,18px);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bottom h1{margin:20px 0 4px;font:800 clamp(18px,5.5vw,26px)/1.15 var(--display);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 18px rgba(255,160,40,.2)}
.bottom{transform:translateY(-12px)}


.btn-main{position:relative;overflow:hidden;width:82%;margin-inline:auto;border:0;border-radius:26px;padding:26px 16px;cursor:pointer;font:800 22px var(--body);color:#1a1004;
background:linear-gradient(180deg,#fff0a0,var(--g1) 30%,var(--g2));box-shadow:0 6px 0 #b86f08,0 12px 28px rgba(255,170,30,.28),inset 0 2px 0 rgba(255,255,255,.7);
display:flex;align-items:center;justify-content:center;gap:10px;touch-action:manipulation}
.btn-main::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.65) 50%,transparent 60%);translate:-120%;animation:shine 3.4s ease-in-out infinite 1s}
.btn-main:active{transform:translateY(4px);box-shadow:0 2px 0 #b86f08,0 6px 18px rgba(255,170,30,.4),inset 0 2px 0 rgba(255,255,255,.7)}
.btn-small{font-size:20px;padding:18px 16px;border-radius:20px;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 0 24px rgba(255,170,30,.35)}

.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;background:rgba(8,5,2,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.overlay.solid{background:var(--bg)}
.card{width:100%;max-width:420px;border:1.5px solid rgba(255,225,160,.7);border-radius:30px;padding:28px 22px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;
background:radial-gradient(90% 50% at 50% 0,rgba(255,170,40,.20),transparent 70%),#1a120a;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(255,160,30,.2);animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(12px)}}
.card h2{margin:6px 0 0;font:800 24px var(--display);overflow-wrap:anywhere}
.muted{color:var(--muted)}
.note{margin:10px 0 14px;font-size:17px}
.avatar{width:118px;height:118px;border-radius:50%;padding:4px;display:grid;place-items:center;font:800 44px var(--display);
background:conic-gradient(var(--g1),var(--or),var(--g1),var(--or),var(--g1));box-shadow:0 0 30px rgba(255,170,30,.55);overflow:hidden;position:relative}
.avatar img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%;object-fit:cover}
.avatar span{position:absolute;inset:4px;border-radius:50%;background:#2a1f12;display:grid;place-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#3a2a12,#241a0c);border:1px solid #5a4018;border-radius:16px;padding:8px 18px;font:800 24px var(--display);color:var(--g1)}
.chip .star-ico{width:22px;height:22px}

.win-banner{width:100%;max-width:480px;aspect-ratio:2.1;border-radius:24px;border:1.5px solid #ffcf6a;display:flex;flex-direction:column;align-items:center;justify-content:center;
background:url("img/win.jpg") center/cover,radial-gradient(circle at 50% 25%,#ffd878,#d06a0c 75%);font:800 54px var(--display);color:#fff;text-shadow:0 3px 18px rgba(120,50,0,.7);position:relative;
box-shadow:0 0 50px rgba(255,170,30,.5)}
.win-banner .star-ico{position:absolute;left:12%;top:22%;width:56px;height:56px}
.win-banner > span{position:relative;left:40px}   /* 5000 чуть правее */
.win-banner small{font:800 22px var(--body)}
.badge{border:1px solid #8a5f20;background:rgba(255,170,30,.12);color:var(--g2);border-radius:99px;padding:7px 16px;font:800 14px var(--body);letter-spacing:.04em}
.win h2{margin:0;font:800 34px var(--display);text-shadow:0 0 30px rgba(255,170,40,.6)}
.prize{display:flex;align-items:center;gap:10px;font-size:17px;margin-top:-4px}
.win{padding:20px 20px calc(70px + env(safe-area-inset-bottom))}
.win .btn-main{max-width:480px;margin-top:18px;padding:20px 16px;font-size:19px}
.balance.drain{border-color:rgba(255,110,70,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 28px rgba(255,70,30,.35)}
.balance.drain .balance-value{color:#ff9070;text-shadow:0 0 18px rgba(255,70,30,.8)}
#subtitle.warn{color:#ff8a66}

/* ---- экран победы: фон плавно размывается и темнеет, затем появляется надпись ---- */
body.won #fx{z-index:30}
.win{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:20px;text-align:center;
background:rgba(6,3,1,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
transition:background-color 1.1s ease,backdrop-filter 1.1s ease,-webkit-backdrop-filter 1.1s ease}
.win.show{background:rgba(6,3,1,.68);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15)}
.win::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 45% at 50% 30%,rgba(255,170,30,.30),transparent 70%);opacity:0;transition:opacity 1.4s ease .3s}
.win.show::before{opacity:1}
.win::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(255,236,170,.95),transparent 55%);opacity:0}
.win.show::after{animation:flash 1.2s ease-out}
@keyframes flash{12%{opacity:.9}100%{opacity:0}}
.win>*{position:relative;z-index:2;opacity:0}
.win.show .win-banner{animation:rise .9s .5s cubic-bezier(.2,.9,.3,1.15) both}
.win.show .badge{animation:fade .6s 1s both}
.win.show h2 span{display:inline-block;animation:slam .75s cubic-bezier(.2,.9,.3,1.1) both}
.win.show h2 span:nth-child(1){animation-delay:1.1s}.win.show h2 span:nth-child(2){animation-delay:1.25s}.win.show h2 span:nth-child(3){animation-delay:1.4s}
.win.show h2{opacity:1}
.win.show .prize{animation:fade .6s 1.8s both}
.win.show .muted{animation:fade .6s 2s both}
.win.show .btn-main{animation:fade .6s 2.2s both}
.win-banner{overflow:hidden}
.win-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);translate:-120%}
.win.show .win-banner::after{animation:shine 1.3s 1.3s ease-out}
@keyframes rise{from{opacity:0;scale:.6;translate:0 30px;filter:blur(10px)}to{opacity:1;scale:1;translate:0 0;filter:blur(0)}}
@keyframes fade{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes slam{from{opacity:0;scale:1.9;translate:0 -14px;filter:blur(16px)}to{opacity:1;scale:1;translate:0 0;filter:blur(0)}}

/* ---- загрузочный экран и появление игры ---- */
body.loading #fx{z-index:45}
.game>*{opacity:0}
body.ready .top{animation:drop .7s .1s both}
body.ready .stage{animation:rise 1s .2s cubic-bezier(.2,.9,.3,1.15) both}
body.ready .bottom{animation:fade .8s .6s both}
@keyframes drop{from{opacity:0;translate:0 -16px}to{opacity:1;translate:0 0}}
.splash{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;text-align:center;
background:radial-gradient(60% 40% at 50% 38%,rgba(255,150,40,.16),transparent 70%),rgba(7,4,2,.94);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
transition:opacity .9s ease,backdrop-filter .9s ease,-webkit-backdrop-filter .9s ease}
.splash.out{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);pointer-events:none}
.logo{position:relative;width:132px;height:132px;display:grid;place-items:center;animation:rise 1s .1s cubic-bezier(.2,.9,.3,1.15) both}
.logo .star-ico{width:72px;height:72px;filter:drop-shadow(0 0 16px rgba(255,170,40,.5));animation:bob 3.6s ease-in-out infinite}
.logo::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 55%,rgba(255,210,100,.95));
-webkit-mask:radial-gradient(circle,transparent 60%,#000 62%);mask:radial-gradient(circle,transparent 60%,#000 62%);animation:spin 1.5s linear infinite}
.logo::after{content:"";position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle,rgba(255,180,60,.20),transparent 70%);animation:pulse 3s ease-in-out infinite}
.splash h1{margin:6px 0 0;font:800 30px var(--display);text-shadow:0 0 22px rgba(255,160,40,.3)}
.splash h1 span{display:inline-block;animation:slam .75s cubic-bezier(.2,.9,.3,1.1) both}
.splash h1 span:nth-child(1){animation-delay:.5s}.splash h1 span:nth-child(2){animation-delay:.65s}
.splash-bar{width:min(240px,70%);height:6px;border-radius:99px;background:#241a10;overflow:hidden;animation:fade .6s .8s both}
.splash-bar i{display:block;height:100%;width:6%;border-radius:inherit;background:linear-gradient(90deg,var(--or),var(--g1));box-shadow:0 0 10px rgba(255,150,30,.5);transition:width .6s ease}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:15px;color:var(--muted);text-align:left;animation:fade .6s .9s both}
.steps li{display:flex;align-items:center;gap:11px;transition:color .3s}
.steps li::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid #5a4018;flex:none;transition:all .3s}
.steps li.done{color:var(--ink)}
.steps li.done::before{border-color:var(--g1);box-shadow:0 0 10px rgba(255,200,60,.45);
background:var(--g1) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.3 2.3 4.7-5' fill='none' stroke='%231a1004' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.safe{margin:6px 0 0;font-size:13px;color:#8d7c5f;animation:fade .6s 1.2s both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.game>*,.win>*{opacity:1!important}}

#hit{width:88%;padding:12px 16px}