:root{--bg:#0D0B1A;--paper:#171430;--tile:#241F4A;--fg:#F2EFFF;--dark:#0D0B1A;--mute:#A29CD6;--line:#4B4399;--sh:#2A2468;--blue:#5B6BFF;--tc:#9AA5DB;--head:'Unbounded',system-ui,sans-serif;--body:'Onest',system-ui,sans-serif;--bw:2.5px}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh;background:radial-gradient(#201C42 1.3px,transparent 1.4px) 0 0/22px 22px,radial-gradient(90% 38% at 50% 0,#2a2273 0,transparent 70%),var(--bg);color:var(--fg);font:16px/1.4 var(--body);padding:var(--top,env(safe-area-inset-top)) 0 calc(68px + env(safe-area-inset-bottom))}
.app{max-width:480px;margin:0 auto;padding:16px}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:3px}
button:disabled{opacity:.4;cursor:default}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}
h1{font:800 15px var(--head);letter-spacing:-.02em}
.top{display:flex;gap:8px;align-items:center}
.pill,.bonus{border:var(--bw) solid var(--line);border-radius:999px;padding:5px 12px;font-weight:700;font-size:14px;background:var(--paper);box-shadow:3px 3px 0 var(--sh)}
.bonus{background:#FFD23F;color:var(--dark);border-color:#FFD23F;font-size:13px;animation:glow 2s ease-in-out infinite}
.bonus:active{transform:translate(3px,3px);box-shadow:none}
.pill.pop{animation:coin .45s}
@keyframes coin{40%{transform:scale(1.18);color:#FFD23F}}

.stage{position:relative;overflow:hidden;background:var(--paper);border:var(--bw) solid var(--line);border-radius:24px;padding:26px 10px 22px;text-align:center;box-shadow:6px 6px 0 var(--sh);transition:box-shadow .35s,border-color .35s}
.stage.hit{border-color:var(--tc);box-shadow:8px 8px 0 var(--tc)}
.stage.shake{animation:shake .5s}
.stage::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);transform:translateX(-130%);pointer-events:none}
.stage.hit::before{animation:sheen 1s .15s}
@keyframes sheen{to{transform:translateX(130%)}}
@keyframes shake{20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(3px,-1px)}}

.reel{display:flex;justify-content:center;align-items:center;gap:6px;font:800 40px/1 var(--head)}
.at{width:.6em;color:#8C9BFF;text-align:center}
.cell{font-size:.78em;width:1.2em;height:1.5em;overflow:hidden;border-radius:.18em;background:linear-gradient(var(--tile),#1A1640);position:relative;border:2px solid var(--line);box-shadow:0 .08em 0 #05040D;transition:background .3s,color .3s}
.cell::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#05040D;opacity:.7}
.stage.hit .cell{background:var(--tc);color:var(--dark);animation:flash .7s calc(var(--i)*70ms) both}
.stage.hit .cell::after{opacity:.25}
@keyframes flash{0%{filter:brightness(2.2)}100%{filter:none}}
.cell.land{animation:land .4s}
@keyframes land{30%{transform:translateY(7%) scale(1.07)}60%{transform:translateY(-3%)}}
.strip{display:flex;flex-direction:column;transition:transform 1s cubic-bezier(.15,.85,.2,1)}
.strip.go{filter:blur(1.4px)}
.strip span{height:1.5em;line-height:1.5em;flex:none;text-align:center}
.reel.idle .cell{animation:bob 2.2s ease-in-out infinite;animation-delay:calc(var(--i)*130ms)}
@keyframes bob{50%{transform:translateY(-9%)}}

#res:not([hidden]){animation:rise .45s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.badge{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:800 14px var(--head);background:var(--tc);color:var(--dark);border-radius:999px;padding:8px 16px;box-shadow:3px 3px 0 var(--sh);animation:badge .55s .1s both cubic-bezier(.3,1.6,.5,1)}
@keyframes badge{from{transform:scale(.5);opacity:0}}
.badge i{width:9px;height:9px;border-radius:50%;background:var(--dark)}
.hint{color:var(--mute);font-size:14px;margin-top:20px}
.tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px;min-height:26px}
.tag{font-size:12px;font-weight:500;background:var(--tile);border:1.5px solid var(--line);border-radius:8px;padding:3px 8px;animation:rise .4s .25s both}
.tag:nth-child(2){animation-delay:.32s}.tag:nth-child(3){animation-delay:.39s}.tag:nth-child(4){animation-delay:.46s}.tag:nth-child(n+5){animation-delay:.53s}
.tag.odd{background:var(--tc);border-color:var(--tc);color:var(--dark);font-weight:700}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.acts .wide{grid-column:span 2}
.btn{background:var(--tile);border:var(--bw) solid var(--line);border-radius:14px;padding:11px 8px;font-weight:700;font-size:14px;box-shadow:3px 3px 0 var(--sh);transition:transform .08s,box-shadow .08s}
.btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:0 0 0 var(--sh)}
.btn.main{background:var(--tc);border-color:var(--tc);color:var(--dark)}

.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--paper);border:var(--bw) solid var(--line);border-radius:18px;padding:5px;margin:20px 0 14px;box-shadow:4px 4px 0 var(--sh)}
.seg button{padding:9px 4px;border-radius:12px;font-size:13px;font-weight:700;transition:background .2s,color .2s}
.seg small{display:block;font-size:11px;font-weight:500;opacity:.75}
.seg [aria-pressed=true]{background:var(--fg);color:var(--dark)}
.spin{width:100%;padding:18px;border-radius:18px;font:800 15px var(--head);background:var(--blue);color:#fff;border:var(--bw) solid #8C9BFF;box-shadow:5px 5px 0 var(--sh);transition:transform .08s,box-shadow .08s}
.spin:not(:disabled){animation:glow 2.4s ease-in-out infinite}
.spin:active:not(:disabled){transform:translate(5px,5px);box-shadow:0 0 0 var(--sh)}
@keyframes glow{50%{box-shadow:5px 5px 0 var(--sh),0 0 28px rgba(110,125,255,.55)}}
.stats{display:flex;justify-content:space-between;align-items:center;color:var(--mute);font-size:13px;margin-top:16px}
.chip{color:var(--dark);border-radius:8px;padding:2px 8px}

.list h2{font:800 16px var(--head);margin-bottom:4px}
.sum{color:var(--mute);font-size:13px;margin-bottom:16px}
.item{display:flex;align-items:center;gap:8px;padding:11px 10px 11px 14px;background:var(--paper);border:var(--bw) solid var(--line);border-left:10px solid var(--tc);border-radius:14px;margin-bottom:10px;box-shadow:3px 3px 0 var(--sh)}
.item div{flex:1;min-width:0}
.item b{display:block;font:700 14px var(--head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item small{display:inline-block;margin-top:3px;background:var(--tc);color:var(--dark);font-size:11px;font-weight:700;border-radius:6px;padding:1px 7px}
.item button{background:var(--tile);border:2px solid var(--line);border-radius:10px;min-width:38px;height:38px;font-size:14px;font-weight:700;padding:0 8px}
.item button:active{background:var(--tc);color:var(--dark)}
.empty{text-align:center;color:var(--mute);padding:44px 12px}
.empty .btn{margin-top:16px;color:var(--fg)}

.stake{max-height:34vh;overflow:auto;padding:2px 4px 6px 0;margin-bottom:12px}
.pick{cursor:pointer;transition:transform .08s,background .2s}
.pick input{width:20px;height:20px;accent-color:var(--tc);flex:none}
.pick span{font-weight:700;font-size:13px;flex:none}
.pick:has(input:checked){background:var(--tc);color:var(--dark);box-shadow:0 0 0 var(--sh);transform:translate(3px,3px)}
.pick:has(input:checked) small{background:var(--dark);color:var(--tc)}
.targets{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}
.tg{background:var(--paper);border:var(--bw) solid var(--line);border-top:7px solid var(--tc);border-radius:12px;padding:7px 2px;text-align:center;box-shadow:3px 3px 0 var(--sh);transition:transform .08s,background .2s}
.tg b{display:block;font:800 14px var(--head)}
.tg small{display:block;font-size:9px;color:var(--mute)}
.tg.on{background:var(--tc);color:var(--dark);box-shadow:0 0 0 var(--sh);transform:translate(3px,3px)}
.tg.on small{color:var(--dark)}
.meter{position:relative;height:24px;background:var(--paper);border:var(--bw) solid var(--line);border-radius:999px;overflow:hidden;margin:4px 0 10px}
.zone{position:absolute;left:0;top:0;bottom:0;transition:width .3s}
.mark{position:absolute;left:0;top:-2px;bottom:-2px;width:6px;margin-left:-3px;background:#fff;border-radius:3px;box-shadow:0 0 10px #fff}
.upres{margin-top:16px}
.win,.lose{border:var(--bw) solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:4px 4px 0 var(--sh);background:var(--paper);animation:rise .4s both}
.win{background:var(--tc);border-color:var(--tc);color:var(--dark)}

nav{position:fixed;left:0;right:0;bottom:0;display:flex;padding:4px 6px calc(4px + env(safe-area-inset-bottom));background:var(--paper);border-top:2px solid var(--line);box-shadow:0 -8px 24px rgba(5,4,13,.5);z-index:5}
nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px 4px;border-radius:10px;background:none;border:0;color:var(--mute);font-weight:600;font-size:10px;line-height:1.1;transition:background .2s,color .2s}
nav button svg{width:18px;height:18px;flex:none;transition:transform .25s}
nav [aria-selected=true]{background:var(--tile);color:var(--fg)}
nav [aria-selected=true] svg{transform:translateY(-1px) scale(1.08)}
.toast{position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--fg);color:var(--dark);padding:11px 16px;border-radius:14px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:.3s;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
#fx{position:fixed;inset:0;pointer-events:none;z-index:9}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition-duration:.01ms!important}}

/* Рулетка апгрейда */
.rl{position:relative;height:88px;margin:6px 0 12px;background:var(--paper);border:var(--bw) solid var(--line);border-radius:18px;overflow:hidden;box-shadow:4px 4px 0 var(--sh)}
.rl::before,.rl::after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none}
.rl::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.rl::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.ptr{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:#fff;z-index:3;box-shadow:0 0 14px #fff}
.ptr::before{content:"";position:absolute;top:0;left:-8px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
.rl-track{display:flex;gap:6px;height:100%;padding:10px 0;will-change:transform}
.rc{flex:none;width:64px;display:grid;place-items:center;border-radius:12px;font:800 22px var(--head);border:2px solid var(--line)}
.rc.l{background:var(--tile);color:#6A63B0}
.rc.w{background:var(--tc);border-color:var(--tc);color:var(--dark)}
.rc.on{outline:3px solid #fff;outline-offset:2px;animation:land .5s}
.upres .stage{margin-top:14px}

/* Мифический */
.stage.mythic.hit{box-shadow:8px 8px 0 var(--tc),0 0 56px rgba(255,75,62,.6)}
.stage.mythic .badge{background:linear-gradient(90deg,#FF4B3E,#FFC933,#27D9BD,#9B7BFF,#FF5FA2,#FF4B3E);background-size:300% 100%;animation:badge .55s .1s both cubic-bezier(.3,1.6,.5,1),rbow 3s linear infinite}
@keyframes rbow{to{background-position:300% 0}}

/* Секретный */
.stage.secret.hit{border-color:#fff;box-shadow:8px 8px 0 var(--tc),0 0 56px rgba(255,255,255,.55)}
.stage.secret.hit .cell{text-shadow:2px 0 #FF2D55,-2px 0 #00E5FF}
.stage.secret.hit .reel{animation:glitch .8s steps(2,end) 3}
@keyframes glitch{25%{transform:translate(-3px,1px) skewX(-4deg)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,0) skewX(3deg)}}
.stage.secret .badge{background:#fff;color:#000;text-shadow:1px 0 #FF2D55,-1px 0 #00E5FF}
.od small,.tg small{font-size:8.5px}

/* Шапка и профиль */
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.top{margin-left:auto}
.prof-btn{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--paper);border:var(--bw) solid var(--line);box-shadow:3px 3px 0 var(--sh);transition:transform .08s,box-shadow .08s,background .2s}
.prof-btn:active{transform:translate(3px,3px);box-shadow:none}
.prof-btn[aria-pressed=true]{background:var(--fg);color:var(--dark);border-color:var(--fg)}
.pcard{background:var(--paper);border:var(--bw) solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:4px 4px 0 var(--sh);margin-bottom:14px}
.pcard small,.pt small{display:block;color:var(--mute);font-size:12px}
.pcard>b,.pt b{display:block;font:800 18px var(--head);margin-top:2px}
.pcard h3{font:800 15px var(--head);margin-bottom:12px}
.idc{text-align:center;padding:20px 16px}
.idc b{font-size:34px;letter-spacing:.08em}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pgrid+.pgrid{margin-top:10px}
.pgrid>.pcard{margin-bottom:14px}
.pt{background:var(--tile);border:2px solid var(--line);border-left:6px solid var(--tc,var(--blue));border-radius:12px;padding:9px 11px}
.pt b{font-size:15px}
.pt.last{grid-column:span 2}
.inv{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inv b{font:800 15px var(--head)}
.inv .btn{flex:none;padding:11px 18px}
.prof{animation:rise .35s both}

/* Ползунок и приз апгрейда */
.slider{margin:4px 0 12px;background:var(--paper);border:var(--bw) solid var(--line);border-radius:16px;padding:12px 14px 8px;box-shadow:3px 3px 0 var(--sh)}
.srow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;color:var(--mute);font-size:13px}
.srow b{font:800 22px var(--head);color:var(--fg)}
input[type=range]{width:100%;height:28px;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
input[type=range]:disabled{opacity:.4;cursor:default}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--tile);border:2px solid var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:#fff;border:4px solid var(--blue);box-shadow:0 0 0 3px rgba(91,107,255,.35)}
input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--tile);border:2px solid var(--line)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--blue)}
.pz{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--paper);border:var(--bw) solid var(--line);border-left:10px solid var(--tc);border-radius:14px;padding:12px 14px;box-shadow:3px 3px 0 var(--sh);margin-bottom:10px}
.pz small{display:block;color:var(--mute);font-size:11px}
.pz b{display:block;font:800 15px var(--head);overflow:hidden;text-overflow:ellipsis}
.pz em{font-style:normal;font-size:12px;color:var(--tc)}
.pp{text-align:right;flex:none}
#prize .btn{width:100%;margin-bottom:12px}

/* Плавность и новые элементы */
#reels .stage{margin-bottom:12px}
.rrow{animation:rise .4s both}
.rrow .rmeta{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s ease,opacity .5s}
.rrow .rmeta.on{max-height:460px;opacity:1}
.rrow .badge{margin-top:18px}
.hint{text-align:center;margin:6px 0 4px}
#seg{margin-bottom:10px}
.seg.two{grid-template-columns:repeat(2,1fr);margin:0 0 14px}
.tabin{animation:rise .38s both}
#tab-game.tabin{animation:fadein .35s both}
@keyframes fadein{from{opacity:0}}
.chead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:4px}
.chead .sum{margin-bottom:12px}
.cbtns{display:flex;gap:6px;flex:none}
.btn.sm{padding:8px 14px;font-size:13px;flex:none}
.item{transition:max-height .3s ease,opacity .25s,transform .3s,margin .3s,padding .3s,border-width .3s,background .2s}
.item.out{max-height:0!important;opacity:0;transform:translateX(26px);margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}
.selbar{position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));margin:0 auto;width:min(448px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;background:var(--paper);border:var(--bw) solid var(--line);border-radius:16px;box-shadow:4px 4px 0 var(--sh);font-weight:700;font-size:14px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .25s;z-index:5}
.selbar.on{opacity:1;transform:none;pointer-events:auto}
button,.pick,.tg{transition-property:transform,box-shadow,background,color,opacity;transition-duration:.15s}

/* Секретный: медленное появление символов и виньетка */
#vig{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;transition:opacity 1s ease;background:radial-gradient(circle at var(--vx,50%) var(--vy,40%),transparent 0,rgba(2,1,10,.15) 16%,rgba(2,1,10,.78) 50%,rgba(2,1,10,.97) 100%)}
#vig.on{opacity:1}
.cell.sec,.at.sec{opacity:0;transform:scale(.4);filter:blur(10px)}
.cell.sec.in{animation:secIn 1s cubic-bezier(.2,.8,.2,1) forwards}
.at.sec.in{animation:secAt .9s ease forwards}
@keyframes secIn{0%{opacity:0;transform:scale(2);filter:blur(16px)}40%{opacity:1;filter:blur(3px);box-shadow:0 0 70px 12px rgba(255,255,255,.85)}100%{opacity:1;transform:none;filter:none;box-shadow:0 .08em 0 #05040D,0 0 26px rgba(255,255,255,.4)}}
@keyframes secAt{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
.toast{z-index:10}

/* Кнопка бонусов в шапке */
.bon-btn{position:relative;flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--paper);border:var(--bw) solid var(--line);box-shadow:3px 3px 0 var(--sh);transition:transform .08s,box-shadow .08s,background .2s}
.bon-btn:active{transform:translate(3px,3px);box-shadow:none}
.bon-btn[aria-pressed=true]{background:var(--fg);color:var(--dark);border-color:var(--fg)}
.dot{position:absolute;top:-5px;right:-5px;width:13px;height:13px;border-radius:50%;background:#FF3B5C;border:2px solid var(--bg);animation:dotp 1.6s ease-in-out infinite}
@keyframes dotp{50%{transform:scale(1.28)}}

/* Вкладка бонусов */
.bon h2{margin-bottom:14px}
.bhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.bhead h3{margin:0}
.bsub{color:var(--mute);font-size:12px;text-align:right}
.bon .pcard>.btn{width:100%;margin-top:12px}
.lgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.lcell{position:relative;background:var(--tile);border:2px solid var(--line);border-radius:10px;padding:6px 0 5px;text-align:center;transition:background .2s,transform .2s}
.lcell small{display:block;font-size:9px;color:var(--mute)}
.lcell b{display:block;font:800 13px var(--head);margin-top:2px}
.lcell.big{border-color:#FFC933}
.lcell.big b{color:#FFC933}
.lcell.done{opacity:.5}
.lcell.done i{position:absolute;top:-6px;right:-4px;font-style:normal;font-size:11px;font-weight:800;background:#27D9BD;color:var(--dark);border-radius:50%;width:17px;height:17px;display:grid;place-items:center}
.lcell.now{background:var(--blue);border-color:#fff;transform:translateY(-2px);animation:glow 2s ease-in-out infinite}
.lcell.now small{color:#fff}
.wl .rl-track{padding:10px 0}
.wt{flex:none;width:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;border:2px solid var(--line);border-top:6px solid var(--tc,#FFC933);background:var(--tile)}
.wt.co{--tc:#FFC933}
.wt em{font:800 17px var(--head);font-style:normal}
.wt small{font-size:10px;color:var(--mute)}
.wt.on{outline:3px solid #fff;outline-offset:2px;animation:land .5s}
.bon .upres{margin-top:14px}
.bon .upres .stage{margin-bottom:12px}
.quest{padding:12px 0;border-top:2px solid var(--line)}
.quest:first-of-type{border-top:0;padding-top:0}
.qtop{display:flex;justify-content:space-between;gap:10px;font-weight:700;font-size:14px}
.qtop span{flex:none;color:#FFC933}
.qh{display:block;color:var(--mute);font-size:11px;margin-top:2px}
.qbar{height:10px;border-radius:999px;background:var(--tile);border:2px solid var(--line);overflow:hidden;margin:8px 0}
.qbar i{display:block;height:100%;background:var(--blue);transition:width .5s}
.quest.got{opacity:.5}
.qbot{display:flex;justify-content:space-between;align-items:center;color:var(--mute);font-size:12px;min-height:34px}
.qbot em{font-style:normal;color:#27D9BD;font-weight:700}

/* Ставка апгрейда */
.cap{margin:0 0 8px}
.cap b{color:var(--fg)}
.pick:has(input:disabled){opacity:.4;cursor:default}

/* переключатель ников после ×3 */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.picks:empty{display:none}
.pk{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:9px 6px 8px;background:var(--tile);border:2px solid var(--line);border-top:5px solid var(--tc);border-radius:12px;color:var(--fg);font:inherit;cursor:pointer;transition:transform .2s,border-color .2s,background .2s,opacity .2s}
.pk b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12px var(--head)}
.pk small{font-size:10px;color:var(--mute)}
.pk.on{border-color:var(--tc);background:#241E52;transform:translateY(-2px)}
.pk.done{opacity:.55}
.pk:active{transform:scale(.97)}
.acts.one{grid-template-columns:1fr}
/* мифический: вспышка букв, проще секретной */
.cell.myt,.at.myt{opacity:0;animation:mytIn .65s cubic-bezier(.2,.8,.2,1) both}
.at.myt{animation-delay:.15s}
@keyframes mytIn{0%{opacity:0;transform:scale(1.7);filter:blur(7px)}55%{opacity:1;filter:blur(1px);box-shadow:0 0 28px 4px rgba(255,75,62,.7)}100%{opacity:1;transform:none;filter:none}}
/* достижения */
.achbtn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;color:var(--fg);cursor:pointer;font:inherit}
.achbtn b{display:block;font:800 15px var(--head)}
.achbtn small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.mini{--p:0;flex:none;width:44px;height:44px;border-radius:50%;background:conic-gradient(#FFC933 calc(var(--p)*1%),var(--tile) 0);display:grid;place-items:center}
.mini i{width:34px;height:34px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font:800 13px var(--head);font-style:normal}
.ahead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ahead h2{margin:0}
.asum{display:flex;align-items:center;gap:18px;padding:18px;margin-bottom:16px;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 12px),var(--paper);border:var(--bw) solid var(--line);border-radius:20px;box-shadow:4px 4px 0 var(--sh)}
.asum .ring{flex:none}
.ainfo{min-width:0}
.cap2{display:block;font:700 11px var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ainfo .big{display:block;font:800 30px var(--head);margin:2px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip2{background:var(--tile);border:1.5px solid var(--line);border-radius:999px;padding:3px 10px;font:700 12px var(--body)}
.ainfo p{margin-top:8px;font-size:12px;color:var(--mute);line-height:1.35}
.ring{position:relative;width:104px;height:104px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:12}
.ring .rb{stroke:var(--tile)}
.ring .rf{stroke:#FF9F1C;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.ring>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring b{font:800 28px var(--head);line-height:1}
.ring small{color:var(--mute);font-size:12px}
.alist{display:flex;flex-direction:column;gap:10px}
.ach{display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--paper);border:2px solid var(--line);border-radius:16px;opacity:.6}
.ach.on{opacity:1;border-color:#FFC933;box-shadow:3px 3px 0 var(--sh)}
.ach .ai{flex:none;width:44px;height:44px;border-radius:12px;background:var(--tile);display:grid;place-items:center;font-size:22px;filter:grayscale(1)}
.ach.on .ai{filter:none;background:#3a2f12}
.ach .at2{flex:1;min-width:0}
.ach b{display:block;font:700 14px var(--head);line-height:1.25}
.ach small{display:block;font-size:12px;color:var(--mute);margin-top:2px;line-height:1.3}
.ach .qbar{margin:7px 0 3px;height:8px}
.ach em{display:block;font:600 11px var(--head);font-style:normal;color:var(--mute)}
.ach.on em{color:#FFC933}

/* плашка мест в коллекции */
.cpanel{background:var(--paper);border:var(--bw) solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:4px 4px 0 var(--sh);margin-bottom:16px}
.ctop{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.ctop b{font:800 24px var(--head)}
.ctop span{font:700 15px var(--head);color:var(--mute)}
.ctop small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.ctop .r{text-align:right}
.ctop .r b{font-size:20px}
.cbar{height:8px;border-radius:999px;background:var(--tile);margin:12px 0;overflow:hidden}
.cbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#27D96B,#7CF29B);transition:width .5s}
.cwide{display:block;width:100%;margin-top:8px;text-align:center}
.cwide:disabled{opacity:.5}
.crow{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:12px;padding:12px 2px 0;border-top:1.5px solid var(--line);background:none;color:var(--fg);font:inherit;font-size:14px;cursor:pointer}
.crow span{color:var(--mute)}
.crow b{font-weight:700}

.ach .arw{flex:none;font:700 12px var(--head);color:var(--mute);white-space:nowrap}
.ach .arw.got{color:#7CF29B}
.ach .btn.arw{color:var(--dark)}
#tab-ach>.cwide{margin:0 0 14px}

/* переключатель «Бесплатно / За монеты» и энергия */
.src{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--paper);border:var(--bw) solid var(--line);border-radius:18px;padding:5px;margin:20px 0 12px;box-shadow:4px 4px 0 var(--sh)}
.src button{padding:12px 6px;border-radius:13px;font-size:14px;font-weight:700;color:var(--mute);border:2px solid transparent;transition:background .2s,color .2s,border-color .2s}
.src [aria-pressed=true]{background:var(--tile);color:var(--fg);border-color:var(--blue)}
.seg[hidden],.en[hidden]{display:none}
.src+.en,.src+.seg{margin-top:0}
.src~.seg{margin-top:0}
.en{background:var(--paper);border:var(--bw) solid var(--line);border-radius:18px;padding:12px 14px;margin:0 0 14px;box-shadow:4px 4px 0 var(--sh)}
.enrow{display:flex;align-items:center;gap:10px}
.enic{width:34px;height:34px;border-radius:10px;background:linear-gradient(#FFC933,#FF9F1C);display:grid;place-items:center;font-size:18px}
.enl{flex:1;font:700 14px var(--head);color:var(--mute)}
.enn{font:800 20px var(--head)}
.enx{font:700 12px var(--body);font-style:normal;color:#5CE08A}
.enbar{display:grid;grid-template-columns:repeat(15,1fr);gap:3px;margin:12px 0 8px}
.enbar i{height:10px;border-radius:3px;background:var(--tile)}
.enbar i.on{background:linear-gradient(#FFC933,#FF9F1C)}
.en p{font-size:12px;color:var(--mute);text-align:center;line-height:1.35}

/* кнопка «Крутить» закреплена над нижней панелью */
#spin{position:fixed;left:0;right:0;margin:0 auto;width:min(448px,calc(100% - 32px));bottom:calc(64px + env(safe-area-inset-bottom));z-index:4;padding:15px}
#tab-game{padding-bottom:84px}
.toast{bottom:calc(132px + env(safe-area-inset-bottom))}
/* витрины */
.vhead{margin:4px 0 10px}
.vhead h2{margin:0}
.vhead small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.vit{background:var(--paper);border:var(--bw) solid var(--line);border-left:6px solid var(--vc);border-radius:16px;padding:12px 14px;margin-bottom:12px;box-shadow:3px 3px 0 var(--sh)}
.vit.got{opacity:.7}
.vtop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.vtop b{font:800 16px var(--head)}
.vtop em{font:800 15px var(--head);font-style:normal;color:var(--vc)}
.vit>p{color:var(--mute);font-size:13px;margin:3px 0 10px;line-height:1.3}
.vbar{height:8px;border-radius:999px;background:var(--tile);overflow:hidden;margin-bottom:10px}
.vbar i{display:block;height:100%;border-radius:999px;background:var(--vc);transition:width .5s}
.vchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.vchip{font-size:12px;font-weight:600;color:var(--mute);background:var(--tile);border:1.5px solid var(--line);border-radius:999px;padding:4px 10px}
.vchip.ok{color:var(--fg);border-color:var(--vc)}
.vrw{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.vrw em{font:700 12px var(--head);font-style:normal;color:#7CF29B}

/* колесо ежедневной рулетки */
.wheel{position:relative;width:min(310px,88%);aspect-ratio:1;margin:10px auto 18px}
.wrot{width:100%;height:100%;border-radius:50%;will-change:transform;filter:drop-shadow(0 6px 0 var(--sh)) drop-shadow(0 0 22px rgba(110,125,255,.25))}
.wrot svg{width:100%;height:100%;display:block}
.wl1{font:800 12px var(--head);fill:#0D0B1A}
.wl2{font:600 6px var(--body);fill:rgba(13,11,26,.7)}
.lt{fill:#FFE9A8;opacity:.55}
.wheel.spinning .lt{animation:ltb .36s steps(1) infinite}
.wheel.spinning .lt:nth-of-type(even){animation-delay:.18s}
@keyframes ltb{0%{opacity:1;fill:#fff}50%{opacity:.25}}
.wptr{position:absolute;left:50%;top:-10px;width:0;height:0;margin-left:-13px;border-left:13px solid transparent;border-right:13px solid transparent;border-top:26px solid #fff;z-index:3;transform-origin:50% 0;filter:drop-shadow(0 3px 0 #05040D)}
.wptr.tk{animation:flick .14s ease-out}
@keyframes flick{40%{transform:rotate(-26deg)}}
.whub{position:absolute;left:50%;top:50%;width:21%;height:21%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(#3b3380,#171430);border:3px solid #8C9BFF;display:grid;place-items:center;font-size:clamp(16px,6vw,24px);z-index:2;box-shadow:0 0 0 4px #0D0B1A}
.wheel.haswin .ws:not(.won) path{opacity:.3;transition:opacity .5s}
.wheel.haswin .ws:not(.won) text{opacity:.4}
.ws.won path{stroke:#fff;stroke-width:3;filter:brightness(1.2)}
.wheel.haswin .wrot{animation:wglow 1.6s ease-in-out 2}
@keyframes wglow{50%{filter:drop-shadow(0 6px 0 var(--sh)) drop-shadow(0 0 38px rgba(255,255,255,.75))}}
.wheel.haswin .whub{animation:hubpop .6s}
@keyframes hubpop{30%{transform:translate(-50%,-50%) scale(1.25)}60%{transform:translate(-50%,-50%) scale(.95)}}

.wl1.tn{font-size:9.5px;letter-spacing:-.2px}

/* профиль */
.ptitle{margin:0 0 12px}
.pro{background:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,transparent 2px 12px),var(--paper)}
.ptop{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.av{--p:0;position:relative;flex:none;width:72px;height:72px;border-radius:50%;background:conic-gradient(#27D96B calc(var(--p)*1%),var(--tile) 0);display:grid;place-items:center}
.avi{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#9B7BFF,#5B6BFF);display:grid;place-items:center;overflow:hidden;position:relative;border:3px solid var(--paper)}
.avi b{font:800 24px var(--head);color:#fff}
.avi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lvb{position:absolute;right:-4px;bottom:-4px;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--bg);border:2px solid var(--fg);font:800 12px/22px var(--head);font-style:normal;text-align:center}
.pnm{min-width:0;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.pname{font:800 18px var(--head);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank{font:700 12px var(--body);color:var(--rc);background:color-mix(in srgb,var(--rc) 16%,transparent);border:1.5px solid color-mix(in srgb,var(--rc) 55%,transparent);border-radius:999px;padding:3px 10px}
.pnm small{color:var(--mute);font-size:12px}
.pid{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:14px;border:2px solid var(--fg);border-radius:14px;background:var(--bg)}
.idtag{background:#7B6BFF;color:#fff;font:800 12px var(--head);padding:5px 8px;border-radius:8px}
.pid b{flex:1;font:800 22px var(--head);letter-spacing:.04em}
.pid button{width:34px;height:34px;border-radius:10px;background:var(--tile);color:var(--fg);font-size:16px}
.lvrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lvrow b{font:800 17px var(--head)}
.lvrow small{color:var(--mute);font-size:12px}
.xbar{height:10px;border-radius:999px;background:var(--tile);overflow:hidden;margin:8px 0 12px}
.xbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#27D96B,#7CF29B);transition:width .5s}
.path{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:12px;border-radius:12px;background:rgba(39,217,107,.1);border:1.5px solid rgba(39,217,107,.35)}
.path .pi{width:28px;height:28px;border-radius:8px;background:#1d6b45;display:grid;place-items:center;font-size:15px}
.path b{font:800 13px var(--head)}
.path small{margin-left:auto;text-align:right;color:var(--mute);font-size:12px;line-height:1.25}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tri>div{background:var(--tile);border-radius:12px;padding:9px 10px;min-width:0}
.tri small{display:block;color:var(--mute);font-size:11px}
.tri b{display:block;font:800 13px var(--head);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sndrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sndrow b{display:block;font:800 15px var(--head)}
.sndrow small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.sw{position:relative;flex:none;width:54px;height:30px;border-radius:999px;background:var(--tile);border:2px solid var(--line);transition:background .25s,border-color .25s}
.sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--mute);transition:transform .25s,background .25s}
.sw.on{background:#1d6b45;border-color:#27D96B}
.sw.on i{transform:translateX(24px);background:#7CF29B}

/* ---------- эпичная сцена: мифический и секретный ---------- */
.ep{position:fixed;inset:0;z-index:90;display:grid;place-items:center;overflow:hidden;background:#000;animation:epIn .3s both;touch-action:manipulation}
.ep.out{animation:epOut .48s both}
@keyframes epIn{from{opacity:0}}
@keyframes epOut{to{opacity:0}}
.ep-bg,.ep-fx{position:absolute;inset:0;pointer-events:none}
.ep-box{position:relative;text-align:center;padding:0 12px;max-width:100%;animation:epBox .7s .2s cubic-bezier(.2,1.4,.4,1) both}
@keyframes epBox{from{transform:scale(.3);opacity:0}}
.ep-tier{font:800 clamp(16px,5.5vw,28px) var(--head);letter-spacing:.28em;text-transform:uppercase;margin-bottom:22px}
.ep-name{display:flex;justify-content:center;font:800 var(--sz) var(--head);line-height:1.1}
.ep-name span{display:inline-block;opacity:0;color:#fff;animation:epLet .8s calc(var(--st) + var(--i)*var(--sp)) cubic-bezier(.2,1.5,.4,1) both}
.ep-name .at{animation-delay:calc(var(--st) - 300ms)}
.ep-skip{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:12px;color:rgba(255,255,255,.55);animation:epSkip .6s 1.2s both}
@keyframes epSkip{from{opacity:0}}
@keyframes epLet{0%{opacity:0;transform:scale(3) translateY(-14px);filter:blur(14px)}55%{opacity:1;filter:blur(2px)}100%{opacity:1;transform:none;filter:none}}
/* мифический: огонь, лучи, искры */
.ep.myt .ep-bg{background:radial-gradient(circle at 50% 50%,#8a1409 0,#2c0905 45%,#070101 100%);animation:epPulse 1.1s ease-in-out infinite}
@keyframes epPulse{50%{filter:brightness(1.4)}}
.ep-rays{position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;pointer-events:none;background:repeating-conic-gradient(rgba(255,128,64,.38) 0 5deg,transparent 5deg 17deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 46%);mask:radial-gradient(circle,#000 0,transparent 46%);animation:epSpin 10s linear infinite}
@keyframes epSpin{to{transform:rotate(360deg)}}
.ep-ring{position:absolute;left:50%;top:50%;width:22vmin;height:22vmin;margin:-11vmin 0 0 -11vmin;border-radius:50%;border:4px solid #ffb199;opacity:0;pointer-events:none;animation:epRing 1.7s ease-out .25s infinite}
.ep-ring.r2{animation-delay:1.1s;border-color:#ffd9a0}
@keyframes epRing{0%{transform:scale(.2);opacity:.95}100%{transform:scale(7.5);opacity:0}}
.ep.myt .ep-tier{color:#ffd9cf;text-shadow:0 0 16px #ff4b3e,0 0 40px #ff2a14;animation:epTier 1.4s .5s ease-in-out infinite alternate}
@keyframes epTier{to{letter-spacing:.36em;text-shadow:0 0 24px #ffb199,0 0 60px #ff2a14}}
.ep.myt .ep-name span{text-shadow:0 0 14px #ff4b3e,0 0 38px #ff2a14}
.ep-fx span{position:absolute;bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;background:#ffb347;box-shadow:0 0 10px #ff6a00;opacity:0;animation:epRise var(--d) var(--dl) linear infinite}
@keyframes epRise{0%{transform:translate(0,0);opacity:0}12%{opacity:1}100%{transform:translate(var(--x),-112vh);opacity:0}}
/* секретный: тьма, глитч, сканлайны, финальная вспышка */
.ep.sec .ep-bg{background:radial-gradient(circle at 50% 50%,#1d1d30 0,#000 72%);animation:epFlick 2.6s steps(1) infinite}
@keyframes epFlick{0%,90%,100%{opacity:1}91%{opacity:.35}93%{opacity:1}96%{opacity:.6}}
.ep.sec .ep-rays{inset:0;width:auto;height:auto;margin:0;-webkit-mask:none;mask:none;animation:epScan 5s linear infinite;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 2px,transparent 2px 5px)}
@keyframes epScan{to{background-position:0 100px}}
.ep.sec::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 18%,#000 88%)}
.ep.sec::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;animation:epFlash .9s var(--fd) both}
@keyframes epFlash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
.ep.sec .ep-ring{border-color:#fff;animation-duration:2.4s}
.ep.sec .ep-tier{color:#fff;text-shadow:3px 0 #FF2D55,-3px 0 #00E5FF;animation:epBox .7s .2s cubic-bezier(.2,1.4,.4,1) both,epGl .55s steps(2) 1s infinite}
@keyframes epGl{25%{transform:translate(-4px,1px) skewX(-5deg)}50%{transform:translate(4px,-1px)}75%{transform:translate(-2px,0) skewX(4deg)}}
.ep.sec .ep-name span{text-shadow:3px 0 #FF2D55,-3px 0 #00E5FF,0 0 34px #fff}

/* ---------- общая плавность ---------- */
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
button,.btn,.item,.pcard,.pk,.seg button,.src button,nav button,.sw,.sw i,.crow,.vchip,.ach,.lcell{transition:transform .18s cubic-bezier(.3,.9,.4,1),background-color .25s,color .25s,border-color .25s,box-shadow .25s,opacity .25s}
.btn:active:not(:disabled),.seg button:active,.src button:active,nav button:active,.crow:active,.achbtn:active,.pk:active{transform:scale(.96)}
.btn:disabled,button:disabled{transition:opacity .3s}
/* появление блоков при открытии вкладки: каскадом, один раз */
.tabin>*{animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
.tabin>*:nth-child(1){animation-delay:0ms}
.tabin>*:nth-child(2){animation-delay:45ms}
.tabin>*:nth-child(3){animation-delay:90ms}
.tabin>*:nth-child(4){animation-delay:135ms}
.tabin>*:nth-child(5){animation-delay:180ms}
.tabin>*:nth-child(6){animation-delay:225ms}
.tabin>*:nth-child(7){animation-delay:270ms}
.tabin>*:nth-child(8){animation-delay:315ms}
.tabin>*:nth-child(9){animation-delay:360ms}
.tabin>*:nth-child(10){animation-delay:405ms}
/* переключение «Бесплатно / За монеты» и режимов */
.en:not([hidden]),.seg:not([hidden]){animation:rise .32s cubic-bezier(.2,.8,.2,1) both}
.enbar i{transition:background .35s,transform .35s}
.enbar i.on{transform:scaleY(1.12)}
.enn,.lvb,.ctop b,.lvrow b{transition:color .3s}
.rrow .acts{animation:rise .4s .1s both}
.toast{transition:opacity .35s,transform .35s cubic-bezier(.2,.9,.3,1.2)}
.selbar{transition:opacity .3s,transform .3s cubic-bezier(.2,.9,.3,1.2)}
.cbar i,.vbar i,.xbar i,.qbar i{transition:width .7s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* рейтинг */
.trophy{font-size:26px}
.lbmsg{text-align:center;display:grid;gap:8px;justify-items:center}
.lbmsg small,.lbme small{color:var(--mute);font-size:12px}
.lbme{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px}
.lbme b{grid-row:1/3;grid-column:2;font:800 28px var(--head)}
.lbme span{font-weight:700;font-size:14px}
.lbl{display:grid;gap:8px;margin:12px 0}
.lbr{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;background:var(--paper);border:var(--bw) solid var(--line);border-radius:16px;padding:10px 12px}
.lbr.me{border-color:#FFC933;background:var(--tile)}
.lbr em{font:800 15px var(--head);font-style:normal;text-align:center;color:var(--mute)}
.lbn{min-width:0}.lbn b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbn small{color:var(--mute);font-size:12px}
.lbr>span{font:700 13px var(--body);white-space:nowrap}