:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}

:root{--ac:#5ef2ff;--mg:#ff4fd8;--ink:#e8ecff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{margin:0;position:fixed;width:100%;height:100%;background:#05060f;color:var(--ink);font-family:-apple-system,system-ui,"Segoe UI",sans-serif;overflow:hidden;overscroll-behavior:none;touch-action:none}
#app{display:flex;flex-direction:column;height:100%}
#hud{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + var(--sat)) 16px 6px;z-index:3}
.lab{font-size:10px;letter-spacing:.3em;opacity:.55;margin-top:4px}
#score{font-size:36px;font-weight:200;font-variant-numeric:tabular-nums;line-height:1}
#lvl{text-align:center}#lv{font-size:12px;letter-spacing:.3em;font-weight:600}
#bar{width:110px;height:3px;background:rgba(255,255,255,.12);border-radius:2px;margin-top:7px;overflow:hidden}
#bf{height:100%;width:0;background:var(--ac);transition:width .2s}
.ib{width:42px;height:42px;border-radius:13px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--ink);font-size:16px;padding:0;margin-left:6px}
#fw{position:relative;flex:1;min-height:0}
#ti{position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;border:0;padding:0;font-size:16px;z-index:0;caret-color:transparent;pointer-events:none;-webkit-user-select:text;user-select:text}
#g{position:absolute;inset:0;width:100%;height:100%}
#kb{padding:8px 5px calc(10px + var(--sab));display:flex;flex-direction:column;gap:7px;background:linear-gradient(180deg,transparent,rgba(94,242,255,.05))}
.r{display:flex;gap:5px;justify-content:center}
.k{flex:1;max-width:60px;height:clamp(42px,6.6vh,54px);border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:var(--ink);font-size:20px;font-weight:500;padding:0;touch-action:none}
.k.p{background:var(--ac);color:#001018;border-color:var(--ac)}
.k.w{flex:1.5;max-width:92px;color:var(--mg)}
.ov{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:24px;background:rgba(5,6,15,.84)}
.ov.s{display:flex}
h1{margin:0;font-size:clamp(38px,11vw,74px);font-weight:200;letter-spacing:.28em;margin-right:-.28em;background:linear-gradient(90deg,var(--ac),var(--mg));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{margin:0;font-size:15px;letter-spacing:.4em;font-weight:600;color:var(--ac)}
.sub{font-size:12px;letter-spacing:.22em;opacity:.6;line-height:1.9}
.btn{border:1px solid var(--ac);background:rgba(94,242,255,.1);color:var(--ac);padding:15px 46px;border-radius:14px;font-size:14px;letter-spacing:.3em;font-weight:600}
.btn:active{background:var(--ac);color:#001018}
.btn.a{border-color:rgba(255,255,255,.2);color:var(--ink);background:transparent}
#o1{justify-content:flex-start;overflow-y:auto;touch-action:pan-y;padding-top:calc(26px + var(--sat))}
#fg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.2vh,26px) 14px;width:100%;max-width:540px;padding:6px 2px calc(14px + var(--sab))}
#sb{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}
.sr{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.25em}
.sg{display:flex;border:1px solid rgba(255,255,255,.18);border-radius:11px;overflow:hidden}
.sg button{background:transparent;border:0;color:var(--ink);opacity:.6;padding:10px 12px;font-size:10px;letter-spacing:.15em;font-weight:600}
.sg button.on{background:var(--ac);color:#001018;opacity:1}
.st{display:flex;gap:28px}.st b{display:block;font-size:30px;font-weight:200}.st span{font-size:10px;letter-spacing:.25em;opacity:.55}
.fd{position:relative;height:clamp(104px,15.2vh,138px);padding:0;border:0;background:none;color:var(--ink);text-align:left;font-family:inherit;cursor:pointer;animation:rise .55s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:var(--d,0s);transition:transform .2s}
.fd .bk{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:4px 18px 18px 18px;background:linear-gradient(180deg,rgba(var(--c),.55),rgba(var(--c),.25));box-shadow:0 0 22px rgba(var(--c),.22)}
.fd .bk:before{content:"";position:absolute;left:0;top:-15px;width:46%;height:18px;border-radius:10px 0 0 0;background:rgba(var(--c),.55);clip-path:polygon(0 0,86% 0,100% 100%,0 100%)}
.fd .sh{position:absolute;left:14px;right:14px;top:10px;height:70px;border-radius:7px;background:linear-gradient(180deg,#f4f6ff,#cdd4f5);color:#1a1f45;font-size:11px;font-weight:800;letter-spacing:.22em;padding:9px 12px;transition:transform .25s ease;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.fd .s1{transform:rotate(-3.5deg)}
.fd .s2{left:22px;right:22px;top:4px;transform:rotate(2.5deg);background:linear-gradient(180deg,#fff,#dfe4fb);opacity:.95}
.fd .fr{position:absolute;left:0;right:0;bottom:0;height:78%;border-radius:14px 14px 18px 18px;border-top:1px solid rgba(255,255,255,.45);background-size:cover,cover;background-position:center;box-shadow:0 -6px 16px rgba(0,0,0,.25),0 10px 26px rgba(var(--c),.28),inset 0 1px 0 rgba(255,255,255,.18);padding:12px 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;overflow:hidden;backdrop-filter:blur(2px)}
.fd .fr:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%);pointer-events:none}
.fd .ic{position:absolute;right:10px;top:6px;font-size:40px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.fd b{display:block;font-size:15px;letter-spacing:.18em;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.fd .mt{display:flex;gap:6px;flex-wrap:wrap}
.fd .mt i{font-style:normal;font-size:9.5px;letter-spacing:.14em;font-weight:700;padding:4px 8px;border-radius:20px;background:rgba(5,6,15,.55);border:1px solid rgba(var(--c),.55);color:#fff}
.fd .mt i.rc{color:rgb(var(--c))}
.fd:active{transform:scale(.96)}
.fd:active .s1{transform:rotate(-6deg) translateY(-12px)}
.fd:active .s2{transform:rotate(5deg) translateY(-8px)}
@media (hover:hover){.fd:hover{transform:translateY(-3px)}.fd:hover .s1{transform:rotate(-5deg) translateY(-10px)}.fd:hover .s2{transform:rotate(4deg) translateY(-6px)}}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
.hero{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px;width:100%}
.lg{display:flex;justify-content:center;font-size:clamp(34px,10.4vw,68px);font-weight:300;line-height:1}
.lg span{display:inline-block;margin:0 .02em;animation:drop .75s cubic-bezier(.2,1.3,.4,1) both,bob 3.4s ease-in-out infinite;animation-delay:var(--d),calc(var(--d) + .8s)}
.ln{position:relative;width:min(70%,280px);height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--ac),var(--mg),transparent);box-shadow:0 0 14px rgba(94,242,255,.6);animation:grow .9s .5s both}
.ln:after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px var(--ac);animation:sweep 3.2s 1.2s ease-in-out infinite}
.tg{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.3em;font-weight:600;color:rgba(232,236,255,.75);animation:fade .8s .7s both}
.tg:before,.tg:after{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,236,255,.5))}
.tg:after{transform:scaleX(-1)}
.hs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;animation:fade .8s .85s both}
.hs i{font-style:normal;font-size:9.5px;letter-spacing:.16em;font-weight:700;padding:7px 12px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:rgba(232,236,255,.7)}
.hs b{color:var(--ac);font-weight:800;margin-left:4px;font-variant-numeric:tabular-nums}
.pk{font-size:11px;letter-spacing:.34em;font-weight:600;color:var(--ac);opacity:.85;margin-top:2px;animation:fade .8s 1s both}
.pk span{display:inline-block;margin-left:4px;animation:nudge 1.4s ease-in-out infinite}
.gb{border-radius:50%;background:rgba(255,255,255,.07);backdrop-filter:blur(6px);box-shadow:0 0 14px rgba(94,242,255,.18);transition:transform .35s}
.gb:active{transform:rotate(90deg) scale(.92)}
@keyframes drop{from{opacity:0;transform:translateY(-70px) rotate(-14deg) scale(.6)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes grow{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
@keyframes sweep{0%,100%{left:0;opacity:0}15%,85%{opacity:1}50%{left:calc(100% - 8px)}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.inmenu #hud,.inmenu #kb{display:none}
#o1{gap:clamp(10px,2vh,16px)}
.lg{font-size:clamp(30px,9.4vw,60px)}
@supports (height:1dvh){.fd{height:clamp(104px,15.2dvh,138px)}#fg{row-gap:clamp(20px,3.2dvh,26px)}}
#up{position:fixed;inset:0;z-index:20;display:none;align-items:flex-end;justify-content:center;padding:16px 16px calc(16px + var(--sab));background:rgba(5,6,15,.62);backdrop-filter:blur(3px)}
#up.s{display:flex}
#upc{width:100%;max-width:420px;border-radius:20px;border:1px solid rgba(94,242,255,.45);background:linear-gradient(160deg,rgba(94,242,255,.16),rgba(10,12,35,.97) 60%);box-shadow:0 0 30px rgba(94,242,255,.25);padding:20px 18px;display:flex;flex-direction:column;gap:12px;animation:rise .45s cubic-bezier(.2,.9,.3,1.2) both}
#upt{font-size:12px;letter-spacing:.3em;font-weight:700;color:var(--ac)}
#upv{font-size:11px;letter-spacing:.2em;opacity:.6;margin-top:-6px}
#upl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:1.4}
#upl li:before{content:"✦ ";color:var(--mg)}
#upP{display:none;flex-direction:column;gap:10px;align-items:center;text-align:center}
#upc.busy #upP{display:flex}#upc.busy .upb,#upc.busy #upl{display:none}
#upPt{font-size:13px;letter-spacing:.14em;font-weight:700}
#upBar{width:100%;height:10px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
#upBi{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--ac),var(--mg));transition:width .25s}
#upPn{font-size:11px;opacity:.65;line-height:1.4}
.upb{display:flex;gap:10px;margin-top:4px}.upb .btn{flex:1;padding:13px 10px;letter-spacing:.2em;font-size:12px}
.btn,.ib,.hs i{position:relative;overflow:hidden;-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);border:1px solid rgba(255,255,255,.28);background:radial-gradient(120% 70% at 25% 0%,rgba(255,255,255,.34),transparent 55%),linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05));color:var(--ink);box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -10px 18px rgba(255,255,255,.04),0 8px 22px rgba(0,0,0,.38);transition:transform .25s cubic-bezier(.3,1.7,.5,1)}
.btn{border-radius:30px;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.35);background:radial-gradient(120% 70% at 25% 0%,rgba(255,255,255,.38),transparent 55%),linear-gradient(135deg,rgba(94,242,255,.48),rgba(255,79,216,.28));color:#fff}
.btn.a{background:radial-gradient(120% 70% at 25% 0%,rgba(255,255,255,.3),transparent 55%),linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.04));color:var(--ink)}
.btn:active,.ib:active{transform:scale(.93);color:#fff}
.btn:active{background:radial-gradient(120% 70% at 25% 0%,rgba(255,255,255,.4),transparent 55%),linear-gradient(135deg,rgba(94,242,255,.72),rgba(255,79,216,.42))}
.ib{border-radius:50%}
.hs i{box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 4px 14px rgba(0,0,0,.3);color:rgba(240,244,255,.92)}
.btn.pr,.ib.pr{transform:perspective(420px) rotateX(calc(var(--ty,0)*-9deg)) rotateY(calc(var(--tx,0)*9deg)) scale(1.07);transition:transform .09s ease-out;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.6),transparent 48%),linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.08));box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 0 26px rgba(94,242,255,.5),0 12px 30px rgba(0,0,0,.45)}
.btn.pr:not(.a){background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.6),transparent 48%),linear-gradient(135deg,rgba(94,242,255,.72),rgba(255,79,216,.42))}
.btn.jl,.ib.jl{animation:jel .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes jel{0%{transform:scale(1.07)}30%{transform:scale(.94,1.06)}55%{transform:scale(1.04,.97)}80%{transform:scale(.99,1.01)}100%{transform:none}}
#o1{background:rgba(5,6,15,.4)}
#qp{width:min(80%,300px);padding:14px 20px;font-size:14px;letter-spacing:.24em;animation:fade .8s 1s both,qpg 2.6s 2s ease-in-out infinite}
#qp.pr{animation:none}#qp.jl{animation:jel .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes qpg{0%,100%{box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 0 0 rgba(94,242,255,0),0 8px 22px rgba(0,0,0,.38)}50%{box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 0 26px rgba(94,242,255,.55),0 8px 22px rgba(0,0,0,.38)}}
.hs i.hot{border-color:rgba(255,160,70,.6);animation:fl 2.2s ease-in-out infinite}.hs i.hot b{color:#ffb25c}
@keyframes fl{0%,100%{box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 0 0 rgba(255,150,60,0)}50%{box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 0 16px rgba(255,150,60,.55)}}
@media (max-height:760px){.tg{display:none}}
body.eco .btn,body.eco .ib,body.eco .hs i{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.rkb{width:min(92%,420px);border:1px solid rgba(255,255,255,.2);border-radius:20px;background:rgba(255,255,255,.06);color:var(--ink);padding:12px 16px;display:flex;flex-direction:column;gap:9px;font-family:inherit}
.rkb:active{transform:scale(.97)}.rkt{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.25em;font-weight:700}
#rkn{color:var(--ac)}.rkt em{font-style:normal;opacity:.7}.rkr{height:6px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}.rkr i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ac),var(--mg));transition:width .6s}
.mb{display:flex;gap:10px;width:min(92%,420px)}.mb .btn{flex:1;padding:15px 8px;letter-spacing:.18em;font-size:13px}
#qp{width:auto;animation:none}
#o5,#o6{background:rgba(5,6,15,.94)}
#fg{display:flex;grid-template-columns:none;gap:16px;width:100%;max-width:none;overflow-x:auto;scroll-snap-type:x mandatory;touch-action:pan-x;padding:30px 14vw 20px;-webkit-overflow-scrolling:touch}
#fg .fd{flex:0 0 72%;max-width:340px;height:clamp(220px,42dvh,340px);scroll-snap-align:center}
#fg .fd .sh{height:90px}
#rl{width:100%;max-width:420px;display:flex;flex-direction:column;gap:9px;max-height:62dvh;overflow-y:auto;touch-action:pan-y}
.rr{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);font-size:12px;letter-spacing:.2em;font-weight:700;text-align:left}
.rr small{display:block;font-size:10px;opacity:.6;margin-top:4px;letter-spacing:.14em;font-weight:500}.rr.lk{opacity:.4}.rr.cu{border-color:var(--ac);background:rgba(94,242,255,.12)}.rr.cu b{color:var(--ac)}
#o1{justify-content:center;gap:clamp(18px,3.6dvh,32px);padding-top:calc(20px + var(--sat))}
.lg{font-size:clamp(38px,12vw,70px)}
.rkb{width:min(88%,380px);padding:16px 18px;border-radius:24px;border-color:rgba(94,242,255,.35);background:linear-gradient(135deg,rgba(94,242,255,.14),rgba(255,79,216,.08));box-shadow:0 0 26px rgba(94,242,255,.12),inset 0 1px 1px rgba(255,255,255,.25)}
.rkt{font-size:12px}.rkr{height:8px}
.mb{flex-direction:column;width:min(88%,380px);gap:12px}.mb .btn{width:100%;flex:none}
#tp{padding:20px 10px;font-size:17px;letter-spacing:.3em}#qp{padding:15px 10px;font-size:13px}
#o5{justify-content:center;gap:12px;padding:calc(20px + var(--sat)) 0 calc(20px + var(--sab))}
#o5 .mb{flex-direction:row;padding:0 18px;width:100%;max-width:420px}#o5 .mb .btn{width:auto;flex:1;padding:16px 8px;font-size:13px;letter-spacing:.2em}
#fg{position:relative;padding:20px 14vw 24px}
#fg .fd{animation:none;opacity:var(--o,1);transform:scale(var(--s,1));transition:transform .15s,opacity .15s;flex:0 0 100%;max-width:300px;height:clamp(300px,52dvh,430px)}
#fg .fd:active{transform:scale(calc(var(--s,1)*.97))}
#fg .fd .fr{height:100%;border-radius:30px;border:1px solid rgba(var(--c),.6);padding:20px;gap:10px;box-shadow:0 0 34px rgba(var(--c),.35),inset 0 1px 0 rgba(255,255,255,.25)}
#fg .fd .ic{font-size:52px;right:18px;top:16px}
#fg .fd b{font-size:24px;letter-spacing:.14em}
.wp{position:absolute;font-size:11px;letter-spacing:.2em;font-weight:800;padding:8px 14px;border-radius:20px;background:rgba(5,6,15,.55);border:1px solid rgba(var(--c),.7);color:#fff;animation:bob 3.6s ease-in-out infinite}
.w1{left:16px;top:26%}.w2{left:38%;top:42%;animation-delay:-1.2s}.w3{left:14%;top:58%;animation-delay:-2.2s}
.stz{font-size:22px;letter-spacing:.2em;color:rgb(var(--c));text-shadow:0 0 10px rgba(var(--c),.7)}
#dt{display:flex;gap:8px;justify-content:center}#dt i{width:8px;height:8px;border-radius:5px;background:rgba(255,255,255,.25);transition:all .25s}#dt i.on{width:26px;background:var(--ac)}
#hud{gap:8px}#hud>div:first-child{flex:1;min-width:0}#hud>div:last-child{display:flex;gap:6px;flex:none}
#lvl{flex:none}#lv{font-size:11px;letter-spacing:.2em}#bar{width:84px}
.lab{font-size:9px;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{width:40px;height:40px;margin-left:0;flex:none;font-size:15px}
.gl{border:1px solid rgba(255,255,255,.22);border-radius:22px;background:radial-gradient(120% 70% at 25% 0%,rgba(255,255,255,.18),transparent 55%),linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 8px 22px rgba(0,0,0,.38)}
#o7,#o8,#o9{background:rgba(5,6,15,.94)}
.ov.sc{justify-content:flex-start;overflow-y:auto;touch-action:pan-y;gap:12px;padding:calc(22px + var(--sat)) 18px calc(18px + var(--sab))}
.sc>*{flex:none}
.av{border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,rgba(94,242,255,.5),rgba(255,79,216,.4));background-size:cover;background-position:center;box-shadow:0 0 22px rgba(94,242,255,.4),inset 0 1px 1px rgba(255,255,255,.6);flex:none;line-height:1}
.ib.pcb{position:absolute;left:16px;top:calc(16px + var(--sat));width:auto;max-width:56%;height:40px;border-radius:30px;padding:4px 14px 4px 4px;display:flex;align-items:center;gap:8px;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.12em}
#pcN{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
#hi{display:none;font-size:13px;letter-spacing:.22em;font-weight:600;text-align:center;max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hi.s{display:block}#hi b{color:var(--ac);font-weight:800;text-transform:uppercase}
#vr{position:absolute;right:16px;bottom:calc(12px + var(--sab));font-size:10px;letter-spacing:.2em;opacity:.45;font-weight:600;pointer-events:none}
.phero{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;width:100%}
.avw{position:relative}.avw .ed{position:absolute;right:-2px;bottom:-2px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:15px;background:linear-gradient(135deg,var(--ac),var(--mg));box-shadow:0 4px 12px rgba(0,0,0,.5);color:#001018}
.pnm{font-size:22px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prk{font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--ac)}
.pbig{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,420px)}
.pbig div{padding:14px;text-align:left}.pbig b{display:block;font-size:30px;font-weight:200;font-variant-numeric:tabular-nums}.pbig span{font-size:9px;letter-spacing:.16em;opacity:.65}.pbig .hot b{color:#ffb25c}
.prow{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;width:min(100%,420px);font-size:10.5px;letter-spacing:.08em;padding:0 4px}
.psec,.lbl{text-align:left;width:min(100%,420px);font-size:10px;letter-spacing:.3em;font-weight:700;opacity:.65;padding:0 4px}
#pTh{display:flex;flex-direction:column;gap:9px;width:min(100%,420px)}
.tb{padding:10px 14px;display:flex;flex-direction:column;gap:7px}.tb.z{opacity:.55}
.tb .h{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.16em;font-weight:800}.tb .h em{font-style:normal;font-weight:300;font-size:13px;letter-spacing:0}
.tb .p{height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}.tb .p i{display:block;height:100%;background:rgb(var(--c));box-shadow:0 0 8px rgba(var(--c),.8)}
.inp{width:min(100%,420px);padding:4px 18px;display:flex;align-items:center;gap:8px;border-color:rgba(94,242,255,.6);box-shadow:0 0 22px rgba(94,242,255,.2),inset 0 1px 1px rgba(255,255,255,.4)}
#ni{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font-family:inherit;font-size:20px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:10px 0;-webkit-user-select:text;user-select:text}
#ni::placeholder{opacity:.35}.inp small{font-size:10px;opacity:.5;letter-spacing:.1em}
#ag{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;width:min(100%,420px)}
.ao{aspect-ratio:1;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);font-size:28px;padding:0;position:relative;color:inherit;line-height:1}
.ao.on{border-color:var(--ac);background:rgba(94,242,255,.18);box-shadow:0 0 16px rgba(94,242,255,.5)}
.ao.lk{opacity:.4}.ao.lk:after{content:"🔒";position:absolute;right:3px;bottom:2px;font-size:10px}
.phb{display:flex;gap:10px;width:min(100%,420px)}.phb .btn{flex:1;padding:13px 6px;font-size:11px;letter-spacing:.14em}
.hint{font-size:10px;letter-spacing:.1em;opacity:.55;text-align:center;line-height:1.6;min-height:16px}
.cw{width:240px;height:240px;border-radius:50%;overflow:hidden;border:2px solid var(--ac);box-shadow:0 0 26px rgba(94,242,255,.35)}
.cw canvas{width:100%;height:100%;display:block;touch-action:none}
#cz{width:min(80%,300px);accent-color:var(--ac)}
#lgs{flex:none}#lgs button{padding:9px 16px;font-size:11px;letter-spacing:.18em}
#lgh{flex:none;min-height:0}
.ib.idb{position:absolute;right:64px;top:calc(16px + var(--sat));border-radius:50%;background-color:rgba(255,255,255,.07);box-shadow:0 0 14px rgba(255,209,102,.28),inset 0 1px 1px rgba(255,255,255,.55),0 8px 22px rgba(0,0,0,.38);font-size:17px}
#o10{background:rgba(5,6,15,.94)}
.gl.ta{width:min(100%,420px);padding:6px 16px;display:block;border-color:rgba(94,242,255,.6);box-shadow:0 0 22px rgba(94,242,255,.2),inset 0 1px 1px rgba(255,255,255,.4)}
#idT{display:block;width:100%;min-height:150px;resize:none;background:none;border:0;outline:0;color:var(--ink);font-family:inherit;font-size:16px;line-height:1.5;padding:10px 0;-webkit-user-select:text;user-select:text}
#idT::placeholder{opacity:.35}
.hint.ok{color:var(--ac);opacity:1}.hint.er{color:#ff7a90;opacity:1}
.btn:disabled{opacity:.5}
@media (min-width: 760px) and (hover: hover) {
  html, body { background: radial-gradient(ellipse at 50% 15%, #121b3b 0, #05060f 65%); }
  #app { width: min(100%, 1120px); margin: 0 auto; border-inline: 1px solid rgba(94,242,255,.08); box-shadow: 0 0 90px rgba(0,0,0,.35); }
  #kb { display: none !important; }
  #hud { padding-inline: 28px; }
  #fw { min-height: min(420px, 45vh); }
  #o1 { align-items: center; }
  #fg { max-width: 900px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .fd { height: 150px; }
  .hero { max-width: 920px; }
  .lg { font-size: clamp(48px, 6vw, 76px); }
  .btn { cursor: pointer; transition: transform .16s, background .16s; }
  .btn:hover { transform: translateY(-2px); background: rgba(94,242,255,.16); }
  .ib { cursor: pointer; }
  #ti { position: fixed; width: 2px; height: 2px; opacity: .01; }
}
@media (max-width: 759px) {
  #cloudPanel { width: 100%; }
}
#o11 { overflow-y: auto; touch-action: pan-y; }
.cloud-form { width: min(100%, 440px); display: flex; flex-direction: column; gap: 10px; }
.cloud-form input { width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid rgba(94,242,255,.28); border-radius: 12px; background: rgba(255,255,255,.06); color: var(--ink); font: inherit; font-size: 15px; outline: none; -webkit-user-select: text; user-select: text; }
.cloud-form input:focus { border-color: var(--ac); box-shadow: 0 0 0 2px rgba(94,242,255,.12); }
.cloud-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cloud-actions .btn { flex: 1 1 130px; padding: 12px 10px; font-size: 11px; letter-spacing: .12em; }
#cloudStatus { min-height: 20px; }
#cloudRanks { width: min(100%, 480px); display: flex; flex-direction: column; gap: 7px; text-align: left; }
.cloud-rank { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.045); font-size: 12px; }
.cloud-rank b { color: var(--ac); font-variant-numeric: tabular-nums; }

/* Облачный интерфейс временно отключён; Telegram-бот и идеи не затрагиваются. */
#cloudOpen,
{
  display: none !important;
}

/* ===== Обучение «Как играть» ===== */
#hwB{padding:13px 10px;font-size:12px;letter-spacing:.22em}
.btn.new:not(.pr):not(.jl){animation:qpg 2.6s ease-in-out infinite}
#tut{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;padding:calc(14px + var(--sat)) 14px calc(14px + var(--sab));background:rgba(3,4,12,.97)}
#tut.s{display:flex;animation:tfade .35s both}
@keyframes tfade{from{opacity:0}to{opacity:1}}
.tc{width:min(100%,460px);max-height:100%;display:flex;flex-direction:column;gap:13px;touch-action:pan-y;animation:rise .55s cubic-bezier(.2,.9,.3,1.2) both}
.ttop{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.3em;font-weight:700;color:var(--ac);padding:0 4px}
.tsk{background:none;border:1px solid rgba(255,255,255,.22);color:var(--ink);border-radius:20px;padding:8px 15px;font-family:inherit;font-size:10px;letter-spacing:.22em;font-weight:700;opacity:.8}
.tsk:active{background:rgba(255,255,255,.14)}
.tstage{height:clamp(190px,36dvh,280px);border-radius:26px;overflow:hidden;border:1px solid rgba(94,242,255,.38);box-shadow:0 0 34px rgba(94,242,255,.2),inset 0 1px 1px rgba(255,255,255,.3);transition:opacity .14s;flex:none}
.tstage.sw{opacity:.15}
.tstage canvas{width:100%;height:100%;display:block}
.ttxt{text-align:center;min-height:172px;padding:0 4px;flex:none}
.ttxt h3{margin:0 0 10px;font-size:clamp(17px,5vw,21px);font-weight:700;letter-spacing:.22em;margin-right:-.22em;background:linear-gradient(90deg,var(--ac),var(--mg));-webkit-background-clip:text;background-clip:text;color:transparent}
.ttxt p{margin:0;font-size:14px;line-height:1.55;letter-spacing:.02em;opacity:.86}
.ttxt.in h3{animation:tin .5s cubic-bezier(.2,.9,.3,1.2) both}
.ttxt.in p{animation:tin .55s .08s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes tin{from{opacity:0;transform:translateX(var(--dx,24px))}to{opacity:1;transform:none}}
.tdots{display:flex;gap:8px;justify-content:center;flex:none}
.tdots i{width:8px;height:8px;border-radius:5px;background:rgba(255,255,255,.25);transition:all .3s;cursor:pointer}
.tdots i.on{width:26px;background:linear-gradient(90deg,var(--ac),var(--mg))}
.tnav{display:flex;gap:10px;flex:none}
.tnav .btn{padding:15px 10px;font-size:13px;letter-spacing:.2em}
#tPv{flex:0 0 64px;letter-spacing:0;font-size:16px}
#tNx{flex:1}
@media (min-width:760px) and (hover:hover){
  .tc{width:min(100%,560px)}
  .tstage{height:clamp(240px,40dvh,340px)}
  .tsk,.tdots i{cursor:pointer}
  .ttxt p{font-size:15px}
}
@media (max-height:620px){.ttxt{min-height:150px}.ttxt p{font-size:13px;line-height:1.45}.tc{gap:10px}}

/* ===== Обучение на живом экране ===== */
#coach{position:fixed;inset:0;z-index:25;pointer-events:none;display:none}
#coach.ex,#coach.hn,#coach.dn{display:block}
#coach.off{display:none!important}
#coach.ex,#coach.dn{pointer-events:auto}
#coach.dn::before{content:"";position:absolute;inset:0;background:rgba(3,4,12,.9);animation:tfade .4s both}
#csp{position:fixed;left:50%;top:50%;width:0;height:0;border-radius:18px;pointer-events:none;display:none;box-shadow:0 0 0 9999px rgba(3,4,12,.84),0 0 0 2px rgba(94,242,255,.95),0 0 30px 6px rgba(94,242,255,.55),inset 0 0 22px rgba(94,242,255,.28);transition:left .55s cubic-bezier(.3,1.15,.4,1),top .55s cubic-bezier(.3,1.15,.4,1),width .55s cubic-bezier(.3,1.15,.4,1),height .55s cubic-bezier(.3,1.15,.4,1)}
#coach.ex #csp{display:block}
#csp::after{content:"";position:absolute;inset:-4px;border-radius:22px;border:2px solid rgba(94,242,255,.85);animation:cring 1.5s ease-out infinite}
@keyframes cring{from{transform:scale(1);opacity:.9}to{transform:scale(1.12,1.35);opacity:0}}
#ccard{position:fixed;left:50%;top:20px;width:min(92vw,360px);transform:translateX(-50%);padding:16px 18px;border-radius:22px;text-align:center;background:rgba(10,14,40,.93);border:1px solid rgba(94,242,255,.5);box-shadow:0 0 34px rgba(94,242,255,.25),inset 0 1px 1px rgba(255,255,255,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:top .5s cubic-bezier(.3,1.1,.4,1),left .5s cubic-bezier(.3,1.1,.4,1),border-color .3s,box-shadow .3s}
#ccard.pop{animation:cpop .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes cpop{from{opacity:0;transform:translateX(-50%) scale(.9) translateY(10px)}to{opacity:1;transform:translateX(-50%)}}
.cct{font-size:15px;font-weight:700;letter-spacing:.2em;margin-right:-.2em;background:linear-gradient(90deg,var(--ac),var(--mg));-webkit-background-clip:text;background-clip:text;color:transparent}
.ccp{margin-top:8px;font-size:13.5px;line-height:1.5;opacity:.88}
.cce,.cdots,.ccb{display:none}
#coach.ex .ccb,#coach.dn .ccb{display:flex;gap:10px;margin-top:14px;align-items:center}
#coach.ex .ccb .btn,#coach.dn .ccb .btn{flex:1;padding:13px 10px;font-size:12px;letter-spacing:.18em}
#coach.dn .ccb{flex-direction:column-reverse}
#coach.dn .ccb .tsk{width:100%;padding:12px}
#coach.dn .ccb .btn{width:100%;flex:none}
#coach.hn .cdots{display:flex;gap:7px;justify-content:center;margin-top:10px}
.cdots i{width:9px;height:9px;border-radius:5px;background:rgba(255,255,255,.22);transition:all .3s}
.cdots i.on{width:22px;background:var(--ac)}
.cdots i.ok{background:#ffd166;box-shadow:0 0 10px rgba(255,209,102,.8)}
#coach.hn #ccard{padding:11px 16px;pointer-events:none;background:rgba(10,14,40,.82)}
#coach.hn .ccp{margin-top:5px;font-size:13px}
#coach.hn .cct{font-size:12px}
#ccard.good{border-color:rgba(184,255,92,.9);box-shadow:0 0 34px rgba(184,255,92,.4)}
#ccard.good .cct{background:linear-gradient(90deg,#b8ff5c,#5ef2ff);-webkit-background-clip:text;background-clip:text}
#ccard.good .ccp{font-size:22px;color:#b8ff5c}
#ccard.bad{border-color:rgba(255,77,109,.9);box-shadow:0 0 34px rgba(255,77,109,.4)}
#ccard.bad .cct{background:none;color:#ff4d6d}
#coach.dn .cce{display:block;font-size:54px;margin-bottom:6px;animation:ctro 2s ease-in-out infinite}
@keyframes ctro{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}
#coach.dn #ccard{padding:24px 20px 20px;border-color:rgba(255,209,102,.7);box-shadow:0 0 44px rgba(255,209,102,.35)}
#coach.dn .cct{font-size:18px}

/* ===== Достижения ===== */
#achT{position:fixed;left:50%;top:calc(12px + var(--sat));width:min(92vw,380px);z-index:40;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:22px;background:rgba(14,12,34,.95);border:1px solid rgba(255,209,102,.8);box-shadow:0 0 40px rgba(255,209,102,.4),0 10px 30px rgba(0,0,0,.5);transform:translate(-50%,-190%);transition:transform .7s cubic-bezier(.2,1.4,.4,1);cursor:pointer}
#achT.s{transform:translate(-50%,0)}
.aci{flex:none;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;background:radial-gradient(circle,rgba(255,209,102,.35),rgba(255,209,102,.08));border:1px solid rgba(255,209,102,.7);box-shadow:0 0 18px rgba(255,209,102,.5)}
#achT.s .aci{animation:ctro 2s ease-in-out infinite}
.acx{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left}
.acx small{font-size:9px;letter-spacing:.28em;color:#ffd166;font-weight:700}
.acx b{font-size:15px;letter-spacing:.12em;font-weight:700}
.acx span{font-size:12px;opacity:.75;line-height:1.35}
.cf{position:absolute;left:41px;top:41px;width:7px;height:11px;border-radius:2px;pointer-events:none;animation:cf 1.4s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes cf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}

/* Горизонтальный телефон: обучение в две колонки, чтобы кнопки не уезжали за экран */
@media (max-height:520px) and (orientation:landscape){
  #tut{padding:calc(8px + var(--sat)) calc(14px + env(safe-area-inset-right,0px)) calc(8px + var(--sab)) calc(14px + env(safe-area-inset-left,0px))}
  .tc{width:min(100%,860px);display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"top top" "stage txt" "stage dots" "stage nav";gap:8px 20px;align-content:center}
  .ttop{grid-area:top}.tstage{grid-area:stage;height:clamp(140px,calc(100dvh - 70px),300px)}
  .ttxt{grid-area:txt;min-height:0;align-self:center}.tdots{grid-area:dots}.tnav{grid-area:nav;align-self:start}
  .ttxt h3{margin-bottom:6px;font-size:16px}.ttxt p{font-size:13px;line-height:1.45}
  .tnav .btn{padding:12px 10px}
  #ccard{width:min(60vw,360px);padding:11px 14px}
  .ccp{font-size:12.5px;line-height:1.4;margin-top:5px}
  #coach.ex .ccb,#coach.dn .ccb{margin-top:9px}
  #coach.ex .ccb .btn,#coach.dn .ccb .btn{padding:10px}
  #coach.dn .cce{font-size:34px;margin-bottom:2px}
  #coach.dn #ccard{padding:14px 16px}
}

/* Узкие телефоны (iPhone SE и меньше): кнопки обучения не переносят текст */
@media (max-width:360px){
  #coach.ex .ccb,#coach.dn .ccb{gap:8px}
  #coach.ex .ccb .btn,#coach.dn .ccb .btn{white-space:nowrap;letter-spacing:.08em;font-size:11px;padding:12px 6px}
  .tsk{padding:8px 11px;letter-spacing:.16em}
}

.shc{font-size:22px;font-weight:700;letter-spacing:.12em;color:var(--g,#ffd166)}.shc.no{animation:shk .35s}
@keyframes shk{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.shg{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(94%,460px)}
.si{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:20px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--ink);font-family:inherit;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.7,.5,1)}
.si:active{transform:scale(.95)}.si.on{border-color:var(--ac);box-shadow:0 0 18px rgba(94,242,255,.3)}.si.lk{opacity:.75}
.si b{font-size:13px;letter-spacing:.14em}.si small{font-size:11px;letter-spacing:.1em;opacity:.8}
.pv{display:flex;flex-direction:column;justify-content:center;gap:7px;width:100%;height:64px;border-radius:12px;overflow:hidden;padding:0 14px;box-sizing:border-box;background:#070a1c}
.pv i{display:block;height:4px;border-radius:4px}
.pv[style]{padding:0}

.ib.tgb{right:112px;box-shadow:0 0 14px rgba(94,200,255,.38),inset 0 1px 1px rgba(255,255,255,.55),0 8px 22px rgba(0,0,0,.38)}
.ib.tgb svg{display:block;width:28px;height:28px;margin:auto}
.rkt{gap:16px}.rkt em{flex:none;white-space:nowrap}#rkn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.shh{display:flex;align-items:center;gap:12px;width:min(94%,460px)}.shh .ib{position:static;flex:none}.shx{flex:1;text-align:left}.shx h2{margin:0;font-size:22px}.shh .shc{padding:8px 14px;border-radius:16px;border:1px solid rgba(255,209,102,.5);background:rgba(255,209,102,.08);font-size:18px}
.shtb{display:flex;gap:10px;width:min(94%,460px)}.shtb button{flex:1;padding:13px 8px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--ink);font:700 12px inherit;letter-spacing:.2em;opacity:.7}.shtb button.on{opacity:1;border-color:var(--ac);background:linear-gradient(90deg,rgba(94,242,255,.18),rgba(255,79,216,.14));box-shadow:0 0 18px rgba(94,242,255,.25)}
.sx{padding:0;overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.16);background:rgba(8,10,30,.7);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.3,1.7,.5,1)}.sx:active{transform:scale(.97)}.sx.on{border-color:var(--ac);box-shadow:0 0 22px rgba(94,242,255,.35)}
.sx canvas{display:block;width:100%;aspect-ratio:224/120}.sf{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 10px 11px 12px}.sf b{font-size:12px;letter-spacing:.16em;text-align:left}
.pl{font-size:11px;font-weight:700;letter-spacing:.08em;padding:6px 11px;border-radius:999px;white-space:nowrap}.pl.on{background:var(--ac);color:#04121a}.pl.eq{border:1px solid rgba(255,255,255,.4)}.pl.pr{border:1px solid rgba(255,209,102,.6);background:rgba(255,209,102,.1);color:#ffd166}
#o12{background:rgba(4,5,16,.96)}
.sf{flex-wrap:nowrap;padding:10px 9px 11px 11px}.sf b{min-width:0;font-size:11px;letter-spacing:.09em}.pl{padding:6px 9px;font-size:10px;letter-spacing:.05em}

/* Экскурсия по меню */
#tour{position:fixed;inset:0;z-index:26;display:none}
#tour.s{display:block}
#tsp{position:fixed;left:50%;top:50%;width:0;height:0;border-radius:18px;pointer-events:none;box-shadow:0 0 0 9999px rgba(3,4,12,.84),0 0 0 2px rgba(94,242,255,.95),0 0 30px 6px rgba(94,242,255,.55),inset 0 0 22px rgba(94,242,255,.28);transition:left .55s cubic-bezier(.3,1.15,.4,1),top .55s cubic-bezier(.3,1.15,.4,1),width .55s cubic-bezier(.3,1.15,.4,1),height .55s cubic-bezier(.3,1.15,.4,1),border-radius .4s}
#tsp::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid rgba(94,242,255,.85);animation:cring 1.5s ease-out infinite}
#tcard{position:fixed;left:50%;top:20px;width:min(92vw,360px);transform:translateX(-50%);padding:16px 18px 14px;border-radius:22px;text-align:center;background:rgba(10,14,40,.95);border:1px solid rgba(94,242,255,.5);box-shadow:0 0 34px rgba(94,242,255,.25),inset 0 1px 1px rgba(255,255,255,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:top .5s cubic-bezier(.3,1.1,.4,1),left .5s cubic-bezier(.3,1.1,.4,1)}
#tcard.pop{animation:cpop .5s cubic-bezier(.2,1.3,.4,1) both}
.tcn{font-size:10px;letter-spacing:.3em;opacity:.55;margin-bottom:8px;font-weight:700}
.tdd{display:flex;gap:6px;justify-content:center;margin-top:12px}
.tdd i{width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.22);transition:all .3s}
.tdd i.on{width:20px;background:var(--ac)}
.tdd i.ok{background:var(--ac);opacity:.55}
.tcb{display:flex;gap:8px;margin-top:14px;align-items:center}
.tcb .btn{padding:13px 10px;font-size:12px;letter-spacing:.16em}
#tourP{flex:0 0 52px;letter-spacing:0;padding:13px 0}
#tourN{flex:1}
@media (max-height:520px) and (orientation:landscape){#tcard{width:min(60vw,360px);padding:11px 14px}#tcard .ccp{font-size:12.5px;line-height:1.4;margin-top:5px}.tdd{margin-top:8px}.tcb{margin-top:9px}.tcb .btn{padding:10px 8px}}

/* Достижения в профиле */
#pAch{width:min(100%,420px);margin-top:6px;display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:left}
.apt{height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.apt i{display:block;height:100%;background:linear-gradient(90deg,var(--ac),var(--mg));border-radius:3px;transition:width .5s}
.adt{padding:14px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:10px;animation:fade .35s both}
.adt.on{background:rgba(255,209,102,.08);border-color:rgba(255,209,102,.65);box-shadow:0 0 24px rgba(255,209,102,.18)}
.adh{font-size:9px;letter-spacing:.28em;font-weight:700;color:var(--ac)}
.adt.on .adh{color:#ffd166}
.adr{display:flex;align-items:center;gap:14px}
.adt .aci{width:46px;height:46px;font-size:22px}
.adt:not(.on) .aci{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);box-shadow:none}
.apb{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.apb i{display:block;height:100%;background:var(--ac);border-radius:3px;box-shadow:0 0 10px rgba(94,242,255,.6)}
.apn{font-size:11px;letter-spacing:.12em;opacity:.7;font-variant-numeric:tabular-nums}
.apw{font-size:11px;letter-spacing:.12em;color:#ffd166;font-weight:700}
.acat{font-size:10px;letter-spacing:.3em;font-weight:700;opacity:.55;margin-top:8px;padding:0 4px}
.abg{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
.abd{position:relative;aspect-ratio:1;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--ink);padding:0;display:flex;align-items:center;justify-content:center;font-size:24px}
.abd span{filter:grayscale(1);opacity:.45}
.abd.on{border-color:rgba(255,209,102,.7);background:radial-gradient(circle,rgba(255,209,102,.28),rgba(255,209,102,.06));box-shadow:0 0 14px rgba(255,209,102,.25)}
.abd.on span{filter:none;opacity:1}
.abd.sel{outline:2px solid var(--ac);outline-offset:2px}
.abd i{position:absolute;left:9px;right:9px;bottom:6px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.abd u{display:block;height:100%;background:var(--ac)}
.acr{display:block;font-style:normal;font-size:11px;color:#ffd166;letter-spacing:.14em;font-weight:700;margin-top:2px}

/* ===== Slovopad ID ===== */
.sid-form { width: min(100%, 440px); display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.sid-lock { font-size: 44px; text-align: center; filter: drop-shadow(0 0 14px rgba(94,242,255,.55)); }
.sid-form input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(94,242,255,.28); border-radius: 12px; background: rgba(255,255,255,.06); color: var(--ink); font: inherit; font-size: 15px; outline: none; -webkit-user-select: text; user-select: text; }
.sid-form input:focus { border-color: var(--ac); box-shadow: 0 0 0 2px rgba(94,242,255,.14); }
.sid-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sid-actions .btn { flex: 1 1 130px; padding: 13px 10px; font-size: 11px; letter-spacing: .14em; }
.sid-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; background: radial-gradient(120% 90% at 50% 0%, rgba(94,242,255,.16), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); }
.sid-nm { font-size: 20px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sid-cap { font-size: 9px; letter-spacing: .26em; font-weight: 700; opacity: .6; }
.sid-code { font-size: 30px; font-weight: 800; letter-spacing: .16em; color: var(--ac); text-shadow: 0 0 18px rgba(94,242,255,.5); font-variant-numeric: tabular-nums; }
.sid-card .btn { padding: 10px 22px; font-size: 11px; letter-spacing: .18em; margin-top: 4px; }
#sidPriv { display: flex; flex-direction: column; gap: 7px; }
.sid-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.045); color: var(--ink); font-size: 12px; letter-spacing: .12em; text-align: left; }
.sid-sw i { position: relative; flex: none; width: 42px; height: 24px; border-radius: 12px; background: rgba(255,255,255,.16); transition: background .2s; }
.sid-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sid-sw.on i { background: var(--ac); box-shadow: 0 0 12px rgba(94,242,255,.5); }
.sid-sw.on i::after { transform: translateX(18px); }
#sidRanks { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.cloud-rank.me { border-color: var(--ac); background: rgba(94,242,255,.09); }
.sid-chip { display: none; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, 440px); padding: 11px 16px; border: 1px solid rgba(94,242,255,.35); border-radius: 14px; background: rgba(94,242,255,.08); cursor: pointer; font-size: 10px; letter-spacing: .24em; font-weight: 700; }
.sid-chip.on { display: flex; }
.sid-chip b { font-size: 14px; letter-spacing: .14em; color: var(--ac); }
.sid-chip::after { content: "›"; font-size: 20px; opacity: .6; }

/* Сообщение об ошибке на экране */
#dbg{position:fixed;left:8px;right:8px;top:calc(var(--sat) + 8px);z-index:99;padding:10px 12px;border-radius:12px;background:rgba(255,77,109,.94);color:#fff;font:600 12px/1.35 -apple-system,system-ui,sans-serif;word-break:break-word;text-align:left}

/* Вход по QR */
.sid-qr{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(94,242,255,.3)}
.sid-qr[hidden]{display:none}
.sid-qr canvas{width:min(66vw,240px);height:auto;aspect-ratio:1;border-radius:12px;image-rendering:pixelated;background:#fff;transition:opacity .3s,filter .3s}
.sid-qr.old canvas{opacity:.18;filter:blur(2px)}
.sid-qrc{font-size:24px;font-weight:800;letter-spacing:.22em;color:var(--ac);text-shadow:0 0 18px rgba(94,242,255,.5);font-variant-numeric:tabular-nums}
.sid-qr .hint{text-align:center}
.sid-qr .sid-actions{width:100%}
#sidVid{width:100%;max-height:260px;border-radius:14px;background:#000;object-fit:cover}
#sidVid[hidden],#sidQrBtn[hidden],#sidQrNew[hidden]{display:none}
#sidCodeIn,#sidPinIn{text-align:center;letter-spacing:.18em;font-weight:700}

#sidQrPin{font-size:20px;letter-spacing:.1em;color:#ffd166}
#sidDel{color:#ff6b81;border-color:rgba(255,107,129,.5)}

/* ===== Slovopad ID: обновлённый вид ===== */
#o11 .sid-form { gap: 12px; }
#o11 [hidden] { display: none !important; }
.sid-lock { width: 72px; height: 72px; margin: 0 auto 2px; display: grid; place-items: center; font-size: 32px; border-radius: 50%; filter: none;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, rgba(94,242,255,.38), rgba(255,79,216,.26));
  border: 1px solid rgba(255,255,255,.32); box-shadow: 0 0 30px rgba(94,242,255,.35), inset 0 1px 1px rgba(255,255,255,.5); }
.sid-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.sid-tabs button { padding: 13px 6px; border: 0; border-radius: 14px; background: transparent; color: rgba(232,236,255,.6); font-size: 11px; font-weight: 700; letter-spacing: .18em; transition: background .2s, color .2s; }
.sid-tabs button.on { color: #fff; background: linear-gradient(135deg, rgba(94,242,255,.46), rgba(255,79,216,.3)); box-shadow: 0 0 16px rgba(94,242,255,.25), inset 0 1px 1px rgba(255,255,255,.4); }
.sid-pw { position: relative; }
.sid-pw input { padding-right: 54px; }
.sid-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: transparent; font-size: 18px; line-height: 1; opacity: .55; }
.sid-eye.on { opacity: 1; }
#sidReg, #sidLogin { flex: 1 1 100%; padding: 16px 10px; font-size: 13px; letter-spacing: .22em; }
.sid-or { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; opacity: .45; }
.sid-or::before, .sid-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.28); }
#sidQrBtn { padding: 14px 10px; font-size: 12px; letter-spacing: .2em; }

.sid-card { align-items: stretch; gap: 14px; padding: 16px; }
.sid-id { display: flex; align-items: center; gap: 14px; text-align: left; }
.sid-av { width: 62px; height: 62px; font-size: 32px; }
.sid-who { min-width: 0; flex: 1; }
.sid-nm { font-size: 19px; text-align: left; }
.sid-cap { margin-top: 4px; font-size: 8.5px; letter-spacing: .2em; text-align: left; }
.sid-codebar { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 12px 12px; border-radius: 16px; background: rgba(0,0,0,.28); border: 1px solid rgba(94,242,255,.25); }
.sid-code { font-size: 28px; letter-spacing: .12em; white-space: nowrap; }
.sid-card .sid-codebar .btn { margin: 0; width: 100%; padding: 11px 12px; font-size: 10px; letter-spacing: .16em; }
.sid-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sid-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 12px 8px; border-radius: 22px; font-size: 10px; font-weight: 600; letter-spacing: .14em; line-height: 1.3; }
.sid-tile::before { font-size: 24px; line-height: 1; letter-spacing: 0; }
#sidSync::before { content: "↻"; color: var(--ac); }
#sidScan::before { content: "📷"; }
#sidScanH { margin-top: -2px; }
#sidPriv { gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
#sidPriv .sid-sw { border: 0; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; background: transparent; padding: 14px 16px; font-size: 11px; letter-spacing: .14em; }
#sidPriv .sid-sw:last-child { border-bottom: 0; }
#sidRanks { gap: 6px; }
.sid-danger { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.sid-danger .btn { padding: 13px 8px; font-size: 10px; letter-spacing: .14em; opacity: .85; }
.sid-foot { position: sticky; bottom: calc(-18px - var(--sab)); z-index: 3; margin: auto -18px 0; width: calc(100% + 36px); padding: 18px 18px calc(18px + var(--sab));
  display: flex; flex-direction: column; align-items: center; gap: 8px; background: linear-gradient(to top, rgba(5,6,15,.92) 48%, rgba(5,6,15,0)); }
.sid-foot .hint { min-height: 0; }
.sid-foot .btn { width: min(100%, 440px); }

/* ---------- Друзья ---------- */
#frB{position:relative}
.bdg{position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#ff4fd8;color:#fff;font-size:11px;font-style:normal;font-weight:700;letter-spacing:0;line-height:20px;box-shadow:0 0 12px rgba(255,79,216,.7)}
.bdg[hidden]{display:none}
#o13,#o14{align-items:center}
#o13>*,#o14>*{width:min(100%,440px);flex:none}
.frh{display:flex;align-items:center;gap:12px;text-align:left}
.frt{flex:1;min-width:0}.frt h2{margin:0}.frt .sub{margin-top:4px;letter-spacing:.14em}
.frcode{color:var(--ac);letter-spacing:.14em;cursor:pointer;border-bottom:1px dashed rgba(94,242,255,.5)}
.fradd{display:flex;gap:8px;padding:8px;align-items:center}
.fradd input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:inherit;font-size:15px;padding:10px 12px;letter-spacing:.06em}
.fradd .btn{padding:10px 18px;letter-spacing:0;font-size:20px;line-height:1;flex:none}
.frtabs{display:flex;gap:6px;padding:4px;border-radius:18px;background:rgba(255,255,255,.06)}
.frtab{flex:1;position:relative;border:0;border-radius:14px;background:transparent;color:var(--ink);opacity:.65;padding:11px 4px;font:inherit;font-size:11px;font-weight:700;letter-spacing:.16em}
.frtab.a{opacity:1;background:linear-gradient(135deg,rgba(94,242,255,.32),rgba(255,79,216,.2));box-shadow:inset 0 1px 1px rgba(255,255,255,.3)}
.frtab .bdg{top:-5px;right:2px}
.frlist{display:flex;flex-direction:column;gap:10px;text-align:left}
.frsec{font-size:10px;letter-spacing:.24em;font-weight:700;opacity:.6;margin:6px 4px 0}
.frrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:20px;color:var(--ink)}
.frrow.tap{cursor:pointer}.frrow.tap:active{transform:scale(.98)}
.frrow.me{border-color:rgba(94,242,255,.55);box-shadow:0 0 22px rgba(94,242,255,.16),inset 0 1px 1px rgba(255,255,255,.4)}
.frm{flex:1;min-width:0}.frn{font-size:16px;font-weight:700;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frs{font-size:11px;letter-spacing:.06em;line-height:1.4;opacity:.65;margin-top:2px}
.frs.on,.fps.on{color:#7dffb0;opacity:1}
.frsc{font-size:15px;font-weight:800;letter-spacing:.04em;white-space:nowrap}.frsc.w{color:#7dffb0}
.frmed{width:28px;text-align:center;font-size:20px;font-weight:700;opacity:.9}
.fav{flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(94,242,255,.35),rgba(255,79,216,.3));border:1px solid rgba(255,255,255,.3);position:relative;font-weight:700;background-size:cover;background-position:center}
.fav.on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#34e07d;border:2px solid #0a0c1c;box-shadow:0 0 8px #34e07d}
.fracts{display:flex;gap:6px;flex:none}
.frgo,.frno{border:1px solid rgba(94,242,255,.5);background:rgba(94,242,255,.14);color:var(--ink);border-radius:14px;padding:9px 12px;font:inherit;font-size:11px;font-weight:700;letter-spacing:.12em;min-width:40px}
.frno{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.frgo:active,.frno:active{transform:scale(.95)}
.frempty{padding:26px 20px;border-radius:24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.fre-i{font-size:44px}.fre-t{font-size:15px;font-weight:700;letter-spacing:.14em}.fre-s{font-size:12px;line-height:1.6;opacity:.7}
.frempty .btn{margin-top:6px;padding:13px 34px}
.frpick{padding:12px 14px;border-radius:18px;font-size:12px;letter-spacing:.08em;text-align:center;border-color:rgba(255,79,216,.5)}
#frSt,#fpSt{min-height:18px}.hint.bad{color:#ff8aa0;opacity:1}
.fph{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px}
.fpn{font-size:24px;font-weight:800;letter-spacing:.08em;margin-top:8px}.fps{font-size:12px;letter-spacing:.14em;opacity:.7}.fpc{font-size:11px;letter-spacing:.2em;color:var(--ac);opacity:.9}
.fpst{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fpst>div{border-radius:20px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px}
.fpst b{font-size:26px;letter-spacing:.04em}.fpst span{font-size:10px;letter-spacing:.2em;opacity:.6}
.fpchal{display:flex;flex-direction:column;gap:8px}.fpchal .btn,.fpdel{width:100%}
.frth{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-radius:18px;color:var(--ink);font:inherit;font-size:14px;letter-spacing:.06em;text-align:left}
.frth b{color:var(--ac)}.frth:active{transform:scale(.98)}
.chres{font-size:13px;letter-spacing:.06em;line-height:1.5;padding:12px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.2);max-width:min(88%,380px)}
.chres:empty{display:none}.chres.w{border-color:#34e07d;color:#7dffb0;background:rgba(52,224,125,.1)}.chres.l{border-color:rgba(255,79,216,.55);background:rgba(255,79,216,.08)}
#frCh[hidden]{display:none}

/* ---------- Настройки: группы и переключатели ---------- */
#o4{align-items:center}
#sb{gap:8px}
.sgh{font-size:10px;letter-spacing:.26em;font-weight:700;opacity:.6;text-align:left;margin:10px 6px 0}
.scard{border-radius:22px;padding:4px 16px;display:flex;flex-direction:column;text-align:left}
.scard .sr{padding:13px 0;font-size:12px;letter-spacing:.14em;gap:12px;border-top:1px solid rgba(255,255,255,.1)}
.scard .sr:first-child{border-top:0}
.sx-i{font-size:20px;width:28px;text-align:center;flex:none}.sn{flex:1;min-width:0;font-weight:600}
.scard .sg{border-radius:12px;background:rgba(0,0,0,.25);flex:none}
.scard .sg button{padding:9px 11px}
.sw{flex:none;width:52px;height:30px;border-radius:15px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);position:relative;padding:0;transition:background .2s,border-color .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .2s}
.sw.on{background:linear-gradient(135deg,rgba(94,242,255,.75),rgba(255,79,216,.55));border-color:rgba(94,242,255,.7)}
.sw.on::after{transform:translateX(22px)}
#bRs{width:min(100%,420px);padding:13px 10px;font-size:11px;letter-spacing:.2em;border-color:rgba(255,120,140,.45);color:#ffb3c0;margin-top:10px}
#bBk{width:min(100%,420px)}
.scard .sr.col{flex-wrap:wrap}.scard .sr.col .sg{width:100%;order:3}.scard .sr.col .sg button{flex:1}

/* ---------- Профиль: лёгкая доводка ---------- */
#o7 .phero .av{box-shadow:0 0 0 3px rgba(94,242,255,.35),0 0 34px rgba(94,242,255,.28),0 0 60px rgba(255,79,216,.18)}
#o7 .pnm{background:linear-gradient(90deg,#fff,#bfe9ff 60%,#ffc2f0);-webkit-background-clip:text;background-clip:text;color:transparent}
#o7 .prk{padding:6px 16px;border:1px solid rgba(94,242,255,.4);border-radius:20px;background:rgba(94,242,255,.1)}
.prbar{position:relative;width:min(70%,260px);height:6px;border-radius:3px;background:rgba(255,255,255,.12);margin-top:2px}
.prbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#5ef2ff,#ff4fd8);box-shadow:0 0 12px rgba(94,242,255,.5)}
.prbar em{position:absolute;left:0;right:0;top:12px;font-style:normal;font-size:9px;letter-spacing:.18em;opacity:.6}
#o7 .phero{margin-bottom:12px}
#o7 .pbig div:first-child b{color:var(--ac)}
#o7 .pbig b{font-weight:300}
#o7 .prow{padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
#o7 .psec{display:flex;align-items:center;gap:10px;margin-top:6px}
#o7 .psec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.25),transparent)}
@media (max-height:690px){#o1 .mb{gap:7px}#o1 .mb .btn{padding-top:10px;padding-bottom:10px;font-size:12px}#o1 .rkb{padding:10px 14px}}

/* Главное меню: одна большая кнопка и две пары поменьше */
#o1 .mb{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(88%,380px)}
#o1 .mb #tp{grid-column:1/-1}
#o1 .mb .btn{width:auto;min-width:0;padding:14px 6px;font-size:12px;letter-spacing:.1em;white-space:nowrap}
#o1 .mb #tp{font-size:15px;letter-spacing:.3em;padding:18px 8px}
@media (max-height:690px){#o1 .mb{gap:8px}#o1 .mb .btn{padding-top:11px;padding-bottom:11px}#o1 .mb #tp{padding:15px 8px}}
#o1 .mb #shopB{font-size:11px;letter-spacing:.05em}

/* Профиль: кнопка закрытия ✕ всегда сверху, листать вниз не нужно */
#o7 .pclose{position:sticky;top:0;align-self:flex-end;z-index:4;flex:none;width:44px;height:44px;margin:-6px 0 -38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,12,28,.8);color:var(--ink);font-size:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ===== Плавные переходы и стекло (2.11.0) ===== */
.ov{display:flex;opacity:0;visibility:hidden;transform:scale(.97);transition:opacity .32s cubic-bezier(.2,.7,.2,1),transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s linear .32s}
.ov.s{opacity:1;visibility:visible;transform:none;transition:opacity .32s cubic-bezier(.2,.7,.2,1),transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s}
.btn,.ib{transition:transform .22s cubic-bezier(.2,.8,.2,1),background-color .25s ease,box-shadow .25s ease,color .25s ease,border-color .25s ease}
.btn.pr,.ib.pr{transition:none}
body.gls .btn,body.gls .ib{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.25)}
body.eco .btn::after,body.eco .ib::after{display:none}
@media (prefers-reduced-motion:reduce){.ov,.ov.s,.btn,.ib,.btn::after,.ib::after{transition:none!important}}

/* Блик на стекле: без автоматического движения, виден только при наклоне телефона или движении мыши */
.btn::after,.ib::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle 150px at var(--lx,50%) var(--ly,-200%),rgba(255,255,255,.6) 0,rgba(255,255,255,.28) 30%,rgba(255,255,255,.07) 62%,transparent 100%);transition:opacity .3s ease}
body.gls.gyro .btn::after,body.gls.gyro .ib::after,body.gls.ptr .btn::after,body.gls.ptr .ib::after{opacity:1}
body.eco .btn::after,body.eco .ib::after{display:none}

/* меню рангов: карточки с цветом каждого ранга */
#rl{gap:10px}
.rkh{display:flex;align-items:center;gap:14px;padding:16px;border-radius:22px;border:1px solid rgba(var(--c),.45);background:linear-gradient(135deg,rgba(var(--c),.22),rgba(255,255,255,.04));box-shadow:0 0 28px rgba(var(--c),.18)}
.rkhi{font-size:46px;line-height:1;flex:none;filter:drop-shadow(0 0 12px rgba(var(--c),.6))}
.rkhx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;text-align:left}
.rkhx small{font-size:10px;letter-spacing:.18em;opacity:.7;font-weight:600}
.rkhx b{font-size:17px;letter-spacing:.14em;color:rgb(var(--c))}
.rkbar{height:8px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden;margin:4px 0 2px}
.rkbar i{display:block;height:100%;background:linear-gradient(90deg,rgb(var(--c)),var(--mg));box-shadow:0 0 10px rgba(var(--c),.7);transition:width .6s}
.rc{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);text-align:left;position:relative;overflow:hidden}
.rc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:rgb(var(--c));opacity:.85}
.rci{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;flex:none;background:rgba(var(--c),.16);border:1px solid rgba(var(--c),.5)}
.rcx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rcx b{font-size:13px;letter-spacing:.16em}
.rcx small{font-size:10px;opacity:.6;letter-spacing:.12em}
.rcd{font-size:10px;letter-spacing:.12em;color:rgb(var(--c))}
.rcs{font-size:16px;flex:none;color:rgb(var(--c))}
.rc.done .rcs{text-shadow:0 0 10px rgb(var(--c))}
.rc.cu{border-color:rgba(var(--c),.6);background:rgba(var(--c),.12);box-shadow:0 0 18px rgba(var(--c),.18)}
.rc.lk{opacity:.5}
.rc.lk .rci{border-style:dashed;filter:grayscale(.6)}
body.hold .btn,body.hold .ib{-webkit-backdrop-filter:none;backdrop-filter:none}
#tut .tc{will-change:transform}
.ttxt.in h3,.ttxt.in p{will-change:transform,opacity}
body.hold .btn::after,body.hold .ib::after{display:none}

/* Обучение: карточка не прыгает между шагами */
.tc{justify-content:flex-start}
.tdots{margin-top:auto}

#spl{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(120% 80% at 50% 30%,#171a48 0%,#070918 60%,#05060f 100%);transition:opacity .55s ease,transform .55s ease}
#spl.out{opacity:0;transform:scale(1.04);pointer-events:none}
#splW{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#splW i{position:absolute;top:-10%;font-style:normal;font-weight:700;font-size:15px;letter-spacing:.2em;color:rgba(94,242,255,.5);text-shadow:0 0 12px rgba(94,242,255,.6);animation:splfall 5s linear infinite}
@keyframes splfall{to{transform:translateY(120vh)}}
#splL{position:relative;font-size:clamp(34px,11vw,54px);font-weight:800;letter-spacing:.14em;background:linear-gradient(90deg,var(--ac),var(--mg));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(94,242,255,.35));animation:splpulse 2s ease-in-out infinite}
@keyframes splpulse{50%{filter:drop-shadow(0 0 26px rgba(255,79,216,.5))}}
#splBar{position:relative;width:min(70%,300px);height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
#splB{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--ac),var(--mg));box-shadow:0 0 12px rgba(94,242,255,.6)}
#splT{position:relative;font-size:11px;letter-spacing:.28em;opacity:.7;font-weight:600}
@media (prefers-reduced-motion:reduce){#splW i,#splL{animation:none}#spl{transition:opacity .2s}}

#splU{position:relative;display:none;flex-direction:column;align-items:center;gap:12px;width:min(80%,320px)}
#spl.upd #splU{display:flex}#spl.upd #splT{display:none}
#spl.upd #splBar{margin-top:-4px}
#splUt{font-size:13px;letter-spacing:.18em;font-weight:700;color:var(--ac);text-align:center}
#splUv{font-size:12px;letter-spacing:.2em;opacity:.7;margin-top:-6px}
#splY{width:100%;padding:14px 10px;letter-spacing:.24em;font-size:13px}
#splN{background:none;border:0;color:var(--ink);opacity:.55;font-size:11px;letter-spacing:.22em;padding:8px;font-family:inherit;cursor:pointer}
#spl.busy #splUv{display:none}#spl.busy #splT{display:block;order:9;font-size:10px;opacity:.6}
@media (max-width:400px){.hs{gap:5px;flex-wrap:nowrap}.hs i{padding:7px 8px;letter-spacing:.1em;font-size:9px}.rkt{font-size:10.5px;letter-spacing:.14em;gap:8px}.rkb{padding-left:14px;padding-right:14px}}
@media (max-width:340px){.hs i{padding:6px 6px;letter-spacing:.06em;font-size:8.5px}.rkt{font-size:9.5px;letter-spacing:.08em}}
@media (max-width:420px){.tg{letter-spacing:.14em;font-size:10px;white-space:nowrap}.tg::before,.tg::after{flex:none}}
/* ---------- чат с другом ---------- */
#o15{justify-content:flex-start;gap:10px;padding:calc(18px + var(--sat)) 14px calc(12px + var(--sab));overflow:hidden;touch-action:manipulation}
#o15 [hidden]{display:none!important}
#o15 .frh{width:100%;flex:none}
.chl{flex:1;min-height:0;width:100%;max-width:520px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:6px;padding:6px 2px;text-align:left}
.chm{display:flex;flex-direction:column;align-items:flex-start;max-width:82%}
.chm.me{align-self:flex-end;align-items:flex-end}
.chb{display:block;padding:9px 13px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-size:15px;line-height:1.35;word-break:break-word;overflow-wrap:anywhere}
.chm.me .chb{border-radius:18px 18px 6px 18px;background:linear-gradient(135deg,rgba(94,242,255,.3),rgba(255,79,216,.22));border-color:rgba(94,242,255,.3)}
.chm.rx .chb{background:none;border:0;padding:2px 4px;font-size:38px;line-height:1.1}
.cht{font-style:normal;font-size:9px;letter-spacing:.1em;opacity:.45;margin:2px 6px 0}
.chem{margin:auto;opacity:.6;font-size:13px;letter-spacing:.06em;text-align:center;padding:20px}
.chbar{display:flex;gap:8px;align-items:center;width:100%;max-width:520px;flex:none;padding:6px;border-radius:26px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.chbar input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:inherit;font-size:16px;padding:9px 6px}
.chbar input:disabled{opacity:.4}
.chrx{width:40px;height:40px;flex:none;font-size:20px;padding:0;display:flex;align-items:center;justify-content:center}
.chsn{flex:none;padding:0;width:44px;height:40px;border-radius:20px;letter-spacing:0;font-size:18px;line-height:1}
.chrp{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;width:100%;max-width:520px;flex:none;padding:8px;border-radius:22px;background:rgba(20,22,50,.92);border:1px solid rgba(255,255,255,.16)}
.chre{background:none;border:0;font-size:28px;line-height:1;padding:6px 8px;border-radius:14px}
.chre:active{transform:scale(1.25);background:rgba(255,255,255,.1)}
.chmenu{display:flex;flex-direction:column;gap:8px;width:100%;max-width:520px;flex:none}
.chmenu .btn{padding:12px;font-size:12px}
.frchat{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--ink);font-size:16px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.frchat .bdg{top:-5px;right:-5px;min-width:18px;height:18px;line-height:18px;padding:0 5px;font-size:10px}
.fracts{align-items:center}
#o15 .hint{flex:none;min-height:0;margin:0}
/* магазин: название сверху, кнопка снизу — длинные названия не налезают на «Выбрано» */
.sf{flex-direction:column;align-items:stretch;gap:8px;padding:10px 10px 11px}
.sf b{min-width:0;text-align:center;font-size:12px;letter-spacing:.12em;line-height:1.25;overflow-wrap:anywhere}
.sf .pl{flex:none;text-align:center;white-space:nowrap;padding:7px 8px}
/* ===== 2.16: красивее меню и «Тематики» ===== */
#o5{--tc:94,242,255}
#tbg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(75% 46% at 50% 36%,rgba(var(--tc),.2),transparent 72%),radial-gradient(60% 40% at 15% 92%,rgba(var(--tc),.12),transparent 72%),radial-gradient(50% 35% at 90% 8%,rgba(var(--tc),.1),transparent 72%)}
#tbg b{position:absolute;left:var(--x);top:var(--y);font-size:var(--z);font-weight:400;opacity:0;animation:tfl var(--d) ease-in-out var(--dl) infinite}
@keyframes tfl{0%{opacity:0;transform:translateY(24px) rotate(-10deg) scale(.8)}30%,70%{opacity:.3}100%{opacity:0;transform:translateY(-70px) rotate(12deg) scale(1.1)}}
#o5>*:not(#tbg){position:relative;z-index:1}
#o5 h2{text-shadow:0 0 22px rgba(var(--tc),.65);color:rgb(var(--tc))}
#fg{perspective:1100px}
#fg .fd{transform:scale(var(--s,1)) rotateY(var(--r,0deg));will-change:transform}
#fg .fd:active{transform:scale(calc(var(--s,1)*.97)) rotateY(var(--r,0deg))}
#fg .fd .fr{overflow:hidden;background-blend-mode:normal;box-shadow:0 0 0 1px rgba(var(--c),.25),0 18px 44px rgba(0,0,0,.5),0 0 40px rgba(var(--c),.4),inset 0 1px 0 rgba(255,255,255,.3)}
#fg .fd .fr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 48%,transparent 60%);transform:translateX(-120%);animation:glr 5.5s ease-in-out infinite}
@keyframes glr{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
#fg .fd .ic{font-size:62px;right:16px;top:12px;filter:drop-shadow(0 8px 14px rgba(var(--c),.7));animation:ifl 4.2s ease-in-out infinite}
@keyframes ifl{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(5deg)}}
.nx{display:block;height:6px;border-radius:5px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:-2px}
.nx i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,rgba(var(--c),.95),#fff);box-shadow:0 0 10px rgba(var(--c),.8)}
#dt{gap:7px;overflow-x:auto;max-width:100%;padding:6px 16px;justify-content:safe center;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#dt::-webkit-scrollbar{display:none}
#dt button{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-size:17px;line-height:1;padding:0;color:inherit;opacity:.62;transition:all .25s}
#dt button.on{width:46px;height:46px;font-size:22px;opacity:1;border-color:rgba(var(--tc),.95);background:rgba(var(--tc),.25);box-shadow:0 0 18px rgba(var(--tc),.55)}
#o5 #pl{border-color:rgba(var(--tc),.8);background:radial-gradient(120% 70% at 25% 0%,rgba(255,255,255,.38),transparent 55%),linear-gradient(135deg,rgba(var(--tc),.7),rgba(var(--tc),.28));box-shadow:0 0 24px rgba(var(--tc),.45),inset 0 1px 1px rgba(255,255,255,.45)}
/* главное меню */
#o1::before{content:"";position:absolute;inset:-8%;z-index:-1;pointer-events:none;background:radial-gradient(42% 30% at 18% 18%,rgba(120,70,255,.2),transparent 70%),radial-gradient(42% 30% at 86% 78%,rgba(255,79,216,.15),transparent 70%),radial-gradient(40% 28% at 70% 12%,rgba(94,242,255,.1),transparent 70%);animation:mdr 16s ease-in-out infinite alternate}
@keyframes mdr{from{transform:translate(-2%,-1%) scale(1)}to{transform:translate(2%,2%) scale(1.06)}}
.lg{filter:drop-shadow(0 0 16px rgba(94,242,255,.28)) drop-shadow(0 0 30px rgba(255,79,216,.18))}
#o1.s .mb .btn{animation:rise .6s cubic-bezier(.2,1.1,.4,1) both}
#o1.s .mb .btn:nth-child(1){animation-delay:.55s}#o1.s .mb .btn:nth-child(2){animation-delay:.65s}#o1.s .mb .btn:nth-child(3){animation-delay:.75s}#o1.s .mb .btn:nth-child(4){animation-delay:.85s}#o1.s .mb .btn:nth-child(5){animation-delay:.95s}
#tp{background:radial-gradient(120% 70% at 25% 0%,rgba(255,255,255,.4),transparent 55%),linear-gradient(110deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%) 200% 0/260% 100% no-repeat,linear-gradient(135deg,rgba(94,242,255,.6),rgba(255,79,216,.4));animation:rise .6s cubic-bezier(.2,1.1,.4,1) .55s both,tps 4.5s ease-in-out 1.4s infinite,tpg 3s ease-in-out infinite;box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 0 24px rgba(94,242,255,.35),0 10px 26px rgba(0,0,0,.4)}
@keyframes tps{0%,50%{background-position:0 0,200% 0,0 0}100%{background-position:0 0,-100% 0,0 0}}
@keyframes tpg{0%,100%{box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 0 18px rgba(94,242,255,.28),0 10px 26px rgba(0,0,0,.4)}50%{box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 0 34px rgba(255,79,216,.45),0 10px 26px rgba(0,0,0,.4)}}
/* блик на полоске ранга убран: на iPhone он ломал отрисовку рамки ранга */
body.eco #o1::before,body.eco #tbg b,body.eco #fg .fd .fr::after,body.eco #fg .fd .ic{animation:none}
@media (prefers-reduced-motion:reduce){#o1::before,#tbg b,#fg .fd .fr::after,#fg .fd .ic,#tp{animation:none}#o1.s .mb .btn{animation:none}}
/* «Тематики» на низких экранах: карточка по высоте экрана, слова не лезут на название */
#fg .fd{height:clamp(190px,calc(100dvh - 340px),430px)}
@media (max-height:700px){#fg .fd .w3{display:none}#fg .fd .w2{top:44%}#fg .fd .ic{font-size:50px}#fg .fd b{font-size:21px}#fg .fd .fr{padding:16px}}
@media (max-height:600px){#fg .fd .w2{display:none}#fg .fd b{font-size:19px}#fg .fd .stz{font-size:18px}}
@media (max-height:520px) and (orientation:landscape){#o5{gap:4px;padding-top:calc(6px + var(--sat))}#o5 h2{font-size:15px;margin:0}#lgh{display:none}#fg{padding:4px 22vw 6px}#fg .fd{height:clamp(120px,calc(100dvh - 170px),230px);max-width:360px}#fg .fd .wp{display:none}#fg .fd .ic{font-size:40px}#dt button{width:28px;height:28px;font-size:14px}#dt button.on{width:34px;height:34px;font-size:17px}#o5 .mb .btn{padding:9px 8px}}
/* карусель «Тематики»: плавнее — без 3D-наклона, анимации только у выбранной карточки */
#fg{perspective:none;overflow-y:hidden;overscroll-behavior:contain;touch-action:pan-x}
#o5{overflow:hidden;overscroll-behavior:none;touch-action:pan-x}
#fg .fd,#fg .fd:active{transition:none}
#fg .fd{transform:perspective(900px) rotateY(var(--r,0deg)) scale(var(--s,1));transform-origin:50% 50%;backface-visibility:hidden;will-change:transform,opacity;contain:layout style}
#fg .fd:active{transform:perspective(900px) rotateY(var(--r,0deg)) scale(calc(var(--s,1)*.97))}
#fg .fd .fr{box-shadow:0 0 0 1px rgba(var(--c),.25),0 10px 22px rgba(0,0,0,.45),0 0 22px rgba(var(--c),.32),inset 0 1px 0 rgba(255,255,255,.3)}
#fg .fd .ic{animation:none;filter:drop-shadow(0 4px 8px rgba(var(--c),.6))}
#fg .fd .fr::after{animation:none}
#fg .fd .wp{animation:none}
#fg .fd.cur .ic{animation:ifl 4.2s ease-in-out infinite}
#fg .fd.cur .fr::after{animation:glr 5.5s ease-in-out infinite}
#fg .fd.cur .wp{animation:bob 3.6s ease-in-out infinite}
#fg .fd.cur .w2{animation-delay:-1.2s}#fg .fd.cur .w3{animation-delay:-2.2s}
#o1:not(.s)::before,#o5:not(.s) #tbg b{animation-play-state:paused}
/* карточка ранга: своя стабильная графическая подложка, чтобы рамка и текст не пропадали после возврата из «Тематик» */
.rkb{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;isolation:isolate}
body.eco #fg .fd.cur .ic,body.eco #fg .fd.cur .fr::after,body.eco #fg .fd.cur .wp{animation:none}
@media (prefers-reduced-motion:reduce){#fg .fd.cur .ic,#fg .fd.cur .fr::after,#fg .fd.cur .wp{animation:none}}
/* главное меню: не двигается и стоит ровно по центру */
#o1{overflow:hidden;touch-action:none;overscroll-behavior:none;justify-content:center;padding:calc(66px + var(--sat)) 16px calc(66px + var(--sab))}
#o1 .hero{margin-top:0}
@media (max-height:520px) and (orientation:landscape){#o1{padding:calc(6px + var(--sat)) 16px calc(46px + var(--sab))}}

/* ЭХО: мессенджер */
#o16{justify-content:flex-start;gap:12px;padding:calc(18px + var(--sat)) 14px calc(16px + var(--sab))}
#o16 .frh,#o16 .frtabs,#o16 .frlist,#o16 .ecai,#o16 .ecset,#o16 .mb{width:100%;max-width:520px;flex:none}
#o16 .frlist{flex:1 1 auto;min-height:60px;display:flex;flex-direction:column;gap:8px}
#o17,#o18{justify-content:flex-start;gap:10px;padding:calc(18px + var(--sat)) 14px calc(12px + var(--sab));overflow:hidden;touch-action:manipulation}
#o17 [hidden],#o18 [hidden],#o16 [hidden]{display:none!important}
#o17 .frh,#o18 .frh{width:100%;flex:none}
#o17 .hint,#o18 .hint{flex:none;min-height:0;margin:0}
.ecai{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:14px 16px;border-radius:20px;border:1px solid rgba(94,242,255,.35);background:linear-gradient(135deg,rgba(94,242,255,.16),rgba(255,79,216,.12));color:var(--ink);font:inherit;cursor:pointer}
.ecai b{font-size:14px;letter-spacing:.14em}.ecai span{font-size:12px;opacity:.7;letter-spacing:.04em}
.ecai:active{transform:scale(.985)}
.ecrow{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.ecrow:active{background:rgba(255,255,255,.12)}
.ect{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ect b{font-size:14px;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ect span{font-size:12px;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecb{position:static;flex:none}
.ecset,.aiset{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:20px;text-align:left;font-size:13px;line-height:1.45}
.ecset b,.aiset b{letter-spacing:.14em;font-size:13px}
.ecset span,.aiset span{opacity:.8}.ecdim{opacity:.55!important}
.aiset{width:100%;max-width:520px;flex:none;max-height:52vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.aist{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px;opacity:.9}
.ailink{color:var(--cyan,#5ef2ff);word-break:break-all;font-size:12px}
.aifld{width:100%;padding:11px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);color:var(--ink);font:inherit;font-size:16px;outline:0}
.airow{display:flex;gap:8px}.airow .btn{flex:1;padding:12px 8px;font-size:12px}
.aiset>.btn{padding:11px;font-size:12px}
.aibar{display:flex;gap:8px;width:100%;max-width:520px;flex:none}
.aibar select{flex:1;min-width:0;padding:9px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--ink);font:inherit;font-size:13px}
.aibar select option{color:#111}
.aib{white-space:pre-wrap}.aiw{opacity:.6}
.chw{font-style:normal;font-size:10px;letter-spacing:.12em;opacity:.6;margin:0 6px 2px;color:var(--cyan,#5ef2ff)}
.ecmem{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.07);font-size:14px}
.ecx{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,100,100,.5);background:rgba(255,100,100,.15);color:#ff8c8c;font-size:14px;cursor:pointer}
#echoB{position:relative}
#echoB .bdg{top:50%;right:16px;transform:translateY(-50%)}
.aiset{max-height:58vh}
/* ЭХО: общая шапка и единый список */
.ech{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;flex:none}
.ech .frh{width:100%}
#o13>.frh{display:none}
#o13{align-items:center}
#o13 .ech{margin-bottom:2px}
.ecsec{align-self:flex-start;margin:6px 4px 0;font-size:11px;letter-spacing:.2em;opacity:.55}
.ecnone{font-size:12px;padding:4px 6px;line-height:1.4}
.ecai2{border-color:rgba(94,242,255,.35);background:linear-gradient(135deg,rgba(94,242,255,.16),rgba(255,79,216,.12))}
#o16 .frlist{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}

/* ЭХО 2: рейка «орбит» слева, панель справа, сообщения как в мессенджере */
#o16,#o13{justify-content:flex-start;align-items:stretch;gap:0;overflow:hidden;padding:calc(8px + var(--sat)) 8px calc(8px + var(--sab));text-align:left;touch-action:manipulation}
#o13>.ecw,#o16>.ecw{width:100%;max-width:560px;flex:1 1 auto;min-height:0;margin:0 auto}
.ecw{display:flex;gap:8px}
.ecrail{flex:none;width:62px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0;border-radius:26px;background:linear-gradient(180deg,rgba(94,242,255,.08),rgba(255,79,216,.06));border:1px solid rgba(255,255,255,.1);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y}
.ecrail::-webkit-scrollbar{display:none}
.orb{position:relative;flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);color:var(--ink);font:inherit;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-radius .22s,transform .15s,box-shadow .22s,background .22s;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.orb:active{transform:scale(.9)}
.orb.on{border-radius:16px;background:linear-gradient(135deg,rgba(94,242,255,.55),rgba(255,79,216,.45));box-shadow:0 0 18px rgba(94,242,255,.45);border-color:rgba(255,255,255,.5)}
.orb.on::before{content:"";position:absolute;left:-9px;top:50%;width:4px;height:24px;transform:translateY(-50%);border-radius:0 4px 4px 0;background:#fff;box-shadow:0 0 8px #fff}
.orb .bdg{top:-4px;right:-4px}
.orb.ping{animation:ecping 2.2s ease-out infinite}
@keyframes ecping{0%{box-shadow:0 0 0 0 rgba(255,79,216,.55)}70%,100%{box-shadow:0 0 0 11px rgba(255,79,216,0)}}
.orb-add{border:1.5px dashed rgba(255,255,255,.45);background:transparent;font-size:24px;font-weight:400}
.ecdiv{flex:none;width:26px;height:2px;border-radius:2px;background:rgba(255,255,255,.16)}
.ecsp{flex:1 1 auto;min-height:6px}
.ecpan{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:2px 2px 6px}
.ecpan>*{width:100%;flex:none}
.ecpan>.frh{display:none}
#o16 .frlist{flex:none;overflow:visible;min-height:0}
.ecph{display:flex;align-items:center;gap:10px}
.ecph .frt{flex:1;min-width:0;text-align:left}
.ecph h2{font-size:17px;margin:0;letter-spacing:.14em}
.ecph .sub{font-size:10px;letter-spacing:.14em;opacity:.55}
.ecnew{color:#fff;text-shadow:0 0 10px rgba(255,79,216,.8)}
.ecrh .frt h2{text-transform:none;letter-spacing:.06em}
.ecfeed{gap:0!important;padding:8px 4px!important}
.msg{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;border-radius:14px}
.msg.cont{padding-top:0}
.msg.mine{background:rgba(94,242,255,.06)}
.mav{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.3)}
.msg.cont .mav{height:1px;border:0;background:none!important;visibility:hidden}
.mbody{min-width:0;flex:1}
.mhead{display:flex;align-items:baseline;gap:8px;margin-bottom:1px}
.mnm{font-size:14px;letter-spacing:.04em}
.mtm{font-style:normal;font-size:10px;opacity:.45}
.mtx{font-size:15px;line-height:1.4;word-break:break-word;overflow-wrap:anywhere}
.orb-home{font-size:22px}
#o17,#o18{padding-bottom:calc(30px + var(--sab))}

/* Анимации Эха */
@keyframes orbIn{0%{opacity:0;transform:translateX(-18px) scale(.5)}100%{opacity:1;transform:none}}
@keyframes rowIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes panIn{0%{opacity:0;transform:translateX(18px)}100%{opacity:1;transform:none}}
@keyframes msgIn{0%{opacity:0;transform:translateY(10px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes bdgPop{0%{transform:scale(0)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes menuIn{0%{opacity:0;transform:translateY(-8px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes pill{0%{height:0;opacity:0}100%{height:24px;opacity:1}}
@keyframes onl{0%,100%{box-shadow:0 0 6px #34e07d}50%{box-shadow:0 0 0 5px rgba(52,224,125,.12),0 0 12px #34e07d}}
@keyframes dots{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-5px);opacity:1}}
@keyframes bdgBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.ecopen .orb{animation:orbIn .5s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--i,0)*45ms)}
.ecopen .orb.ping{animation:orbIn .5s cubic-bezier(.2,.9,.3,1.3) both,ecping 2.2s ease-out .6s infinite;animation-delay:calc(var(--i,0)*45ms),.6s}
.ecopen .ecpan{animation:panIn .38s cubic-bezier(.2,.8,.3,1) both}
.ecopen .ecrow,.ecopen .ecsec{animation:rowIn .42s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i,0)*40ms)}
.ecopen .frlist>:nth-child(1){animation-delay:45ms}.ecopen .frlist>:nth-child(2){animation-delay:90ms}.ecopen .frlist>:nth-child(3){animation-delay:135ms}.ecopen .frlist>:nth-child(4){animation-delay:180ms}.ecopen .frlist>:nth-child(5){animation-delay:225ms}.ecopen .frlist>:nth-child(6){animation-delay:270ms}.ecopen .frlist>:nth-child(7){animation-delay:315ms}.ecopen .frlist>:nth-child(8){animation-delay:360ms}.ecopen .frlist>:nth-child(9){animation-delay:405ms}.ecopen .frlist>:nth-child(10){animation-delay:450ms}
.ecopen .frlist>*{animation:rowIn .42s cubic-bezier(.2,.8,.3,1) both}
.orb.on::before{animation:pill .3s ease-out both}
.orb .bdg,.ecb,.frtab .bdg{animation:bdgPop .38s cubic-bezier(.2,.9,.3,1.4) both}
#echoBd:not([hidden]){animation:bdgBeat 2.4s ease-in-out infinite}
.msg{animation:msgIn .3s cubic-bezier(.2,.8,.3,1) both}
.chmenu:not([hidden]),.ecset:not([hidden]),.aiset:not([hidden]){animation:menuIn .24s cubic-bezier(.2,.8,.3,1) both}
.ecrow{transition:transform .15s,background .2s}
.ecrow:active{transform:scale(.975)}
.fav.on::after{animation:onl 2.4s ease-in-out infinite}
.chsn{transition:transform .15s}.chsn:active{transform:scale(.86) rotate(-14deg)}
.aiw{display:flex;gap:5px;align-items:center;padding:12px 16px!important;opacity:1}
.aiw .dot{width:7px;height:7px;border-radius:50%;background:var(--ink);display:block;animation:dots 1.1s ease-in-out infinite}
.aiw .dot:nth-child(2){animation-delay:.15s}.aiw .dot:nth-child(3){animation-delay:.3s}
/* глубокие экраны (комната, чат, ИИ) выезжают справа */
#o15,#o17,#o18{transform:translateX(34px)}
#o15.s,#o17.s,#o18.s{transform:none}
@media (prefers-reduced-motion:reduce){.ecopen .orb,.ecopen .ecpan,.ecopen .ecrow,.ecopen .ecsec,.ecopen .frlist>*,.orb .bdg,.ecb,.msg,.chmenu,.ecset,.aiset,.fav.on::after,#echoBd,.orb.ping{animation:none!important}#o15,#o17,#o18{transform:none}}

/* Экран загрузки 2: туманность, звёзды, светящийся кристалл с орбитами */
#spl{background:radial-gradient(55% 38% at 18% 16%,rgba(120,70,255,.30),transparent 70%),radial-gradient(50% 38% at 86% 82%,rgba(255,79,216,.22),transparent 70%),radial-gradient(40% 30% at 70% 14%,rgba(94,242,255,.12),transparent 70%),radial-gradient(120% 80% at 50% 30%,#171a48 0%,#070918 60%,#05060f 100%);gap:14px}
#spl::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.85;background-image:radial-gradient(1.6px 1.6px at 12% 22%,#fff,transparent),radial-gradient(1.2px 1.2px at 28% 70%,#cfe,transparent),radial-gradient(1.8px 1.8px at 46% 12%,#fff,transparent),radial-gradient(1.2px 1.2px at 63% 84%,#fff,transparent),radial-gradient(1.6px 1.6px at 78% 36%,#bdf,transparent),radial-gradient(1.2px 1.2px at 90% 64%,#fff,transparent),radial-gradient(1.4px 1.4px at 8% 88%,#fdf,transparent),radial-gradient(1.2px 1.2px at 54% 52%,#fff,transparent),radial-gradient(1.6px 1.6px at 35% 40%,#fff,transparent),radial-gradient(1.2px 1.2px at 94% 10%,#fff,transparent);animation:splTw 3.2s ease-in-out infinite alternate}
@keyframes splTw{0%{opacity:.45}100%{opacity:1}}
#splW i{color:rgba(94,242,255,.38);text-shadow:0 0 10px rgba(94,242,255,.5)}
#splW i:nth-child(even){color:rgba(255,120,230,.34);text-shadow:0 0 10px rgba(255,79,216,.45)}
#splE{position:relative;width:118px;height:118px;margin-bottom:8px;animation:splIn .8s cubic-bezier(.2,.9,.3,1.2) both}
#splE::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--ac),transparent 35%,var(--mg) 60%,transparent 85%,var(--ac));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:splRot 4s linear infinite;filter:drop-shadow(0 0 8px rgba(94,242,255,.6))}
#splE i{position:absolute;inset:-10px;animation:splRot 3.4s linear infinite}
#splE i::after{content:"";position:absolute;top:0;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px var(--ac)}
#splE i+i{inset:6px;animation-duration:2.4s;animation-direction:reverse}
#splE i+i::after{width:6px;height:6px;margin-left:-3px;background:#ffd6f6;box-shadow:0 0 10px 3px var(--mg)}
#splE b{position:absolute;inset:34px;border-radius:15px;transform:rotate(45deg);background:linear-gradient(135deg,var(--ac),var(--mg));box-shadow:0 0 30px rgba(94,242,255,.55),0 0 60px rgba(255,79,216,.3),inset 0 2px 6px rgba(255,255,255,.5);animation:splGem 2.4s ease-in-out infinite}
#splE b::after{content:"";position:absolute;inset:7px;border-radius:9px;border:2px solid rgba(255,255,255,.55);border-right-color:transparent;border-bottom-color:transparent}
@keyframes splRot{to{transform:rotate(360deg)}}
@keyframes splGem{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(1.1)}}
@keyframes splIn{0%{opacity:0;transform:translateY(16px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes splSheen{to{background-position:-250% 0}}
#splL{background:linear-gradient(100deg,var(--ac) 0%,var(--mg) 38%,#fff 50%,var(--ac) 62%,var(--mg) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:splpulse 2s ease-in-out infinite,splSheen 3.6s linear infinite,splIn .8s .12s cubic-bezier(.2,.9,.3,1.2) both}
#splS{position:relative;font-size:10px;letter-spacing:.3em;opacity:.6;font-weight:600;text-align:center;padding:0 16px;animation:splIn .8s .25s both}
#splBar{height:10px;width:min(72%,310px);margin-top:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 3px rgba(0,0,0,.45),0 0 20px rgba(94,242,255,.12);animation:splIn .8s .35s both}
#splB{position:relative;overflow:hidden}
#splB::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-100%);animation:splSh 1.3s ease-in-out infinite}
@keyframes splSh{to{transform:translateX(100%)}}
#splT{animation:splIn .8s .45s both}
@media (prefers-reduced-motion:reduce){#spl::before,#splE::before,#splE i,#splE b,#splB::after,#splL,#splE,#splS,#splBar,#splT{animation:none!important}}

/* переход Чаты ⇄ Друзья: рейка стоит на месте, меняется только панель */
.ecswap .ecpan{animation:panIn .3s cubic-bezier(.2,.8,.3,1) both}
.ecswap .ecrow,.ecswap .ecsec{animation:rowIn .34s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i,0)*30ms)}
#o13 .frlist>*{animation:none!important}

/* Объявления и подарки от создателя */
.spbn{position:fixed;left:50%;top:calc(12px + var(--sat));transform:translateX(-50%);z-index:9000;width:min(92%,420px);display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:20px;background:linear-gradient(135deg,rgba(24,28,76,.96),rgba(40,20,70,.96));border:1px solid rgba(94,242,255,.5);box-shadow:0 10px 36px rgba(0,0,0,.55),0 0 24px rgba(94,242,255,.25);color:var(--ink);cursor:pointer;animation:spbIn .45s cubic-bezier(.2,.9,.3,1.2) both}
.spbn.out{animation:spbOut .35s ease-in both}
.spbn i{font-style:normal;font-size:26px;flex:none}
.spbt{display:flex;flex-direction:column;gap:2px;min-width:0}.spbt b{font-size:13px;letter-spacing:.14em}
.spbt span{font-size:13px;line-height:1.4;opacity:.9;white-space:pre-line;overflow-wrap:anywhere}
@keyframes spbIn{0%{opacity:0;transform:translate(-50%,-30px) scale(.94)}100%{opacity:1;transform:translateX(-50%)}}
@keyframes spbOut{to{opacity:0;transform:translate(-50%,-24px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.spbn,.spbn.out{animation:none}}

/* Кнопка «на весь экран» */
.ib.fsb{position:absolute;right:16px;bottom:calc(62px + var(--sab));border-radius:50%;background:rgba(255,255,255,.07);backdrop-filter:blur(6px);box-shadow:0 0 14px rgba(94,242,255,.18);font-size:20px;line-height:1;z-index:6}
.ib.fsb:active{transform:scale(.9)}
#fsH{position:fixed;left:16px;right:16px;bottom:calc(120px + var(--sab));z-index:40;padding:16px 18px;border-radius:20px;background:rgba(14,16,40,.96);border:1px solid rgba(94,242,255,.35);box-shadow:0 12px 40px rgba(0,0,0,.55);color:#e9eeff;font-size:14px;line-height:1.45}
#fsH b{display:block;margin-bottom:6px;color:#5ef2ff}#fsH ol{margin:0 0 12px;padding-left:20px}#fsH li{margin:3px 0}#fsH i{color:#ffd166;font-style:normal}
#fsH button{width:100%;height:40px;border-radius:14px;border:0;background:linear-gradient(90deg,#5ef2ff,#ff4fd8);color:#05060f;font-weight:700}
.ib.fsb svg{display:block;margin:auto}