/* ── схемы сайта: шахта и метлаба (js/vig_site.js) ─────────────────────────
   Шаги - классы p1, p2 ... на корневом svg, как в shared/css/vig.css.     */

/* ── шахта ─────────────────────────────────────────────────────────────── */
.mn-st{fill:var(--em)}
.mn-cl{font:600 12px var(--hj);fill:var(--ink2);letter-spacing:.04em}
.mn-sl{font:700 10px var(--nar);letter-spacing:.16em;fill:#C8DC4E;opacity:.85}
.mn-pl{font:600 16px var(--hj);fill:#E4F07A}
.mn-nl{font:700 12px var(--nar);letter-spacing:.18em;fill:var(--ink)}
.mn-u{font:600 11px var(--hj);fill:#C8DC4E}
.mn-cnt{font:600 22px var(--hj);fill:var(--red)}
.mn-zl{font:700 10.5px var(--nar);letter-spacing:.16em;fill:var(--red);opacity:0;transition:opacity .4s}
.mn-os{font:600 15px var(--hj);fill:var(--ink3)}
.mn-on{font:700 9.5px var(--nar);letter-spacing:.14em;fill:var(--ink4)}
.mn-o.on rect{stroke:#C8DC4E} .mn-o.on .mn-os{fill:#C8DC4E} .mn-o.on .mn-on{fill:var(--ink2)}
.mn-at{font:700 13px var(--nar);letter-spacing:.2em;fill:#5BC8FF}

.mn-drill{opacity:0;transition:opacity .4s}
.p1 .mn-drill{opacity:1}
.p2 .mn-drill{opacity:0}
.mn-bit{stroke-dasharray:3 2;animation:flow .25s linear infinite}
.mn-h{opacity:0;transition:opacity .2s}
.mn-h.on{opacity:1}
.mn-chg{opacity:0;transition:opacity .3s}
.p2 .mn-chg{opacity:1}
.p4 .mn-holes{opacity:0;transition:opacity .1s}
.mn-wire,.mn-box,.mn-zone{opacity:0;transition:opacity .5s}
.p3 .mn-wire,.p3 .mn-box,.p3 .mn-zone,.p3 .mn-zl{opacity:1}
.p5 .mn-wire,.p5 .mn-box,.p5 .mn-zone,.p5 .mn-zl{opacity:0}
.p3 .mn-wire{animation:flow 1s linear infinite}
.mn-plg{transition:transform .25s}
.p4 .mn-plg{transform:translateY(9px)}
.p3:not(.p4) .mn-lamp{animation:siren .5s steps(2) infinite}
@keyframes siren{0%{fill:#E74C3C}50%{fill:#F1C40F}}
.mn-flash{opacity:0;pointer-events:none}
.mn-cl{opacity:0;transition:opacity .3s}
.p5:not(.p6) .mn-cl{opacity:1}
.p4:not(.p5){animation:mnshake .45s ease}
@keyframes mnshake{20%{transform:translate(3px,-2px)}40%{transform:translate(-3px,2px)}60%{transform:translate(2px,1px)}80%{transform:translate(-1px,-1px)}}
.mn-pile{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.p4 .mn-pile{opacity:1;animation:rise .6s cubic-bezier(.2,1.3,.4,1)}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.mn-d{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.mn-pl{opacity:0}
.p4 .mn-pl{opacity:1}
.p4 .mn-d{animation:deb 1s cubic-bezier(.2,.7,.4,1) forwards}
.p4 .mn-d1{animation-delay:.03s} .p4 .mn-d2{animation-delay:.06s} .p4 .mn-d3{animation-delay:.02s}
.p4 .mn-d4{animation-delay:.08s} .p4 .mn-d5{animation-delay:.04s} .p4 .mn-d6{animation-delay:.07s}
.p4 .mn-d7{animation-delay:.05s} .p4 .mn-d8{animation-delay:.01s}
@keyframes deb{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(-110px,40px) rotate(-200deg)}}
.p4 .mn-d2,.p4 .mn-d5,.p4 .mn-d8{animation-name:deb2}
@keyframes deb2{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(-170px,-10px) rotate(160deg)}}
.mn-seam{transition:opacity .6s}
.p4 .mn-seam{opacity:.75}
.mn-fall{opacity:0}
.p6 .mn-fall circle{animation:fall .6s ease-in .35s 2}
.p6 .mn-fall{opacity:1}
.p6 .mn-fall circle:nth-child(2){animation-delay:.45s} .p6 .mn-fall circle:nth-child(3){animation-delay:.4s}
.p6 .mn-fall circle:nth-child(4){animation-delay:.5s} .p6 .mn-fall circle:nth-child(5){animation-delay:.42s}
@keyframes fall{0%{opacity:0;transform:translateY(-10px)}30%{opacity:1}100%{opacity:0;transform:translateY(30px)}}
.p7 .mn-fall{opacity:0}

.mn-flow{opacity:0}
.p7 .mn-flow{opacity:1;animation:flow .5s linear infinite}
.mn-led{transition:fill .3s}
.mn-n.on .mn-led{fill:var(--em)}
.mn-n rect{transition:stroke .4s}
.mn-n.on rect:first-child{stroke:#3E6B52}
.mn-rot{transform-box:fill-box;transform-origin:50% 50%}
.mn-n.on .mn-rot{animation:spin 1.1s linear infinite}
.mn-n.on .mn-shake{animation:mnsh .18s ease-in-out infinite alternate}
@keyframes mnsh{to{transform:translateX(2px)}}
.mn-liq{transition:fill .8s}
.mn-n3.on .mn-liq{fill:#C8DC4E;opacity:.5}
.mn-drum{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:translateY(-14px)}
.p8 .mn-drum{opacity:1;transform:none;transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1)}
.mn-aes{opacity:0;transition:opacity .6s}
.p8 .mn-aes{opacity:1}

/* ── метлаба ───────────────────────────────────────────────────────────── */
.mt-st{fill:var(--em)}
.mt-cn{font:600 15px var(--hj);fill:var(--ink3);transition:fill .3s}
.mt-cs{font:700 8.5px var(--nar);letter-spacing:.14em;fill:var(--ink4);transition:fill .3s}
.mt-c rect{transition:stroke .3s,fill .3s}
.mt-c.on rect{stroke:var(--em);fill:rgba(46,204,113,.08)}
.mt-c.on .mt-cn{fill:var(--em)} .mt-c.on .mt-cs{fill:var(--ink2)}
.mt-rl{font:700 11px var(--nar);letter-spacing:.2em;fill:var(--ink2)}
.mt-ax{font:600 11px var(--hj);fill:var(--ink4)}
.mt-win{font:700 9.5px var(--nar);letter-spacing:.16em;fill:rgba(46,204,113,.7)}
.mt-evt{font:700 10px var(--nar);letter-spacing:.12em}
.mt-big{font:600 34px var(--hj);fill:var(--ink)}
.mt-u{font-size:15px;fill:var(--ink3)}
.mt-pv{font:600 20px var(--hj);fill:var(--ink)}
.mt-bn{font:700 9.5px var(--nar);letter-spacing:.14em}
.mt-bp{font:600 12.5px var(--hj);fill:var(--ink3)}
.mt-sp{font:400 19px var(--stencil);fill:#E74C3C;letter-spacing:.06em}

.mt-liq{transition:fill .25s}
.mt-stir{transform-box:fill-box;transform-origin:50% 50%}
.p1:not(.p2) .mt-stir{animation:stir .5s linear infinite}
@keyframes stir{0%{transform:scaleX(1)}50%{transform:scaleX(.15)}100%{transform:scaleX(1)}}
.mt-bub circle{fill:rgba(255,255,255,.55);opacity:0}
.p1:not(.p2) .mt-bub circle{animation:bub 1.1s ease-in infinite}
.p1:not(.p2) .mt-bub circle:nth-child(2){animation-delay:.3s} .p1:not(.p2) .mt-bub circle:nth-child(3){animation-delay:.65s} .p1:not(.p2) .mt-bub circle:nth-child(4){animation-delay:.85s}
.mt-foam{opacity:0;transform:translateY(12px);transition:opacity .3s,transform .6s}
.foam .mt-foam{opacity:1;transform:translateY(-6px)}
.mt-steam{opacity:0}
.hot .mt-steam{animation:heat .6s ease-in-out infinite}
.mt-pc{transition:fill .2s}
.hot .mt-p{fill:var(--red)}
.foam .mt-t{fill:var(--amb)}
.mt-ev{opacity:0;transition:opacity .4s}
.e1 .mt-e1,.e2 .mt-e2{opacity:1}
.mt-head{filter:drop-shadow(0 0 4px rgba(46,204,113,.9))}
.p2 .mt-head{opacity:0;transition:opacity .4s}
.mt-seg{opacity:.18;transition:opacity .4s}
.mt-seg.on{opacity:.95}
.mt-b{transition:transform .6s cubic-bezier(.3,1.4,.5,1),opacity .5s}
.mt-b rect:first-child{transition:stroke .4s}
.p4 .mt-b{opacity:.35}
.p4 .mt-b.win{opacity:1;transform:translateY(-6px) scale(1.06)}
.mt-b.win rect:first-child{stroke:#4FA8F0;filter:drop-shadow(0 0 8px rgba(79,168,240,.55))}
.mt-stamp{opacity:0}
.p4 .mt-stamp{animation:mtst .45s cubic-bezier(.5,0,.75,0) .35s forwards}
@keyframes mtst{0%{opacity:0;transform:translate(660px,496px) rotate(-12deg) scale(2.2)}100%{opacity:.92;transform:translate(660px,496px) rotate(-12deg) scale(.8)}}

/* шахта: свет, пыль, отсвет сирены, выемка, свечение урана */
.mn-sl2{font:700 8.5px var(--nar);letter-spacing:.16em;fill:#8FA232}
.mn-mote{fill:#E8E2C8;opacity:0;animation:mote 9s linear infinite}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}20%{opacity:.35}80%{opacity:.25}100%{opacity:0;transform:translate(26px,-18px)}}
.mn-lit{animation:lit 4.2s steps(1) infinite}
@keyframes lit{0%,100%{opacity:1}46%{opacity:.55}48%{opacity:1}51%{opacity:.7}53%{opacity:1}}
.mn-wash{opacity:0}
.p3:not(.p4) .mn-wash{animation:wash .5s steps(2) infinite}
@keyframes wash{0%{opacity:.09}50%{opacity:0}}
.mn-crater{opacity:0}
.p4 .mn-crater{opacity:1}
.mn-ng{opacity:0;transition:opacity .5s}
.mn-n.on .mn-ng{opacity:1}
.mn-bits{opacity:0}
.mn-n.on .mn-bits{animation:bits .5s linear infinite}
@keyframes bits{0%{opacity:0;transform:translateY(-4px)}50%{opacity:1}100%{opacity:0;transform:translateY(4px)}}
.mn-waste{opacity:0}
.mn-n.on .mn-waste{opacity:1;animation:flow .6s linear infinite}
.mn-glow{opacity:0}
.p8 .mn-glow{animation:uglow 2s ease-in-out infinite}
@keyframes uglow{0%,100%{opacity:.45}50%{opacity:1}}
.p8 .mn-aesl{animation:flow .6s linear infinite}

/* ── денежный цех: настоящая купюра ────────────────────────────────────── */
.pb-st{fill:var(--em)}
.pb-head{opacity:0}
.p1 .pb-head{opacity:1}
.p2 .pb-head{opacity:0;transition:opacity .3s}
.pb-cell{opacity:0}
.pb-cell.on{opacity:1;transition:opacity .25s}
.pb-holo,.pb-zholo{opacity:0;mix-blend-mode:screen}
.pb-cell.on .pb-holo{opacity:.55;transition:opacity .6s .2s}
.znum .pb-zholo,.pb-zholo.on{opacity:.55;transition:opacity .6s .2s}
.pb-znum{opacity:0}
.znum .pb-znum{opacity:1;transition:opacity .3s}
.p5 .pb-printl{opacity:0}
.pb-paper{transition:opacity .6s}
.p5 .pb-paper{opacity:0}
.pb-nhead{opacity:0}
.p3 .pb-nhead{opacity:1;transition:opacity .3s}
.p4 .pb-nhead{opacity:0}
.pb-ir path{stroke:#FF9A3C;stroke-width:2.5;fill:none;opacity:0}
.p4:not(.p5) .pb-ir path{animation:heat 1s ease-in-out infinite}
.p4:not(.p5) .pb-ir path:nth-child(2){animation-delay:.25s} .p4:not(.p5) .pb-ir path:nth-child(3){animation-delay:.5s} .p4:not(.p5) .pb-ir path:nth-child(4){animation-delay:.75s}
.pb-cut{opacity:0}
.p5 .pb-cut{opacity:1;transition:opacity .2s}
.p6 .pb-cut{opacity:0}
.pb-lens{opacity:0}
.p2 .pb-lens{opacity:1;transition:opacity .4s}
.p2b .pb-lens{opacity:0}
.pb-mk{opacity:0;transition:opacity .4s}
.pb-mk.on{opacity:1}
.pb-mn{font:600 13px var(--hj);fill:var(--em)}
.pb-ll{font:700 12px var(--nar);letter-spacing:.2em;fill:#FFF4D6}
.pb-ls{font:13px var(--pt);fill:#DDE6E1}
.pb-lg{opacity:.28;transition:opacity .4s}
.pb-lg.on{opacity:1}
.pb-lg.on circle{stroke:var(--em)}
.pb-ln{font:600 10.5px var(--hj);fill:var(--ink3)}
.pb-lg.on .pb-ln{fill:var(--em)}
.pb-lt{font:700 11.5px var(--nar);letter-spacing:.18em;fill:var(--ink)}
.pb-ld{font:11.5px var(--pt);fill:var(--ink3)}
.pb-cnt{font:600 26px var(--hj);fill:var(--ink)}
.p6 .pb-cnt{fill:var(--em)}
.pb-bundle{opacity:0}
.p6 .pb-bundle{opacity:1;transition:opacity .35s}
.pb-bn{font:600 13px var(--hj);fill:#2A2E2B}
.pb-pv{font:600 18px var(--hj);fill:var(--ink3)}
.pb-pq{font:700 9.5px var(--nar);letter-spacing:.14em;fill:var(--ink4)}
.pb-pl.on rect{stroke:var(--em)} .pb-pl.on .pb-pv{fill:var(--em)} .pb-pl.on .pb-pq{fill:var(--ink2)}
.pb-err{font:700 12px var(--nar);letter-spacing:.12em;fill:var(--amb);opacity:0}
.p7 .pb-err{opacity:1;animation:blink .8s steps(2) infinite}
.p7 .pb-k3 .pr-cb{fill:var(--red)} .p7 .pb-k3 .pr-pc{fill:var(--red)}

/* ── экономика: казна за час ─────────────────────────────────────────────── */
.ec-st{fill:var(--em)}
.ec-h{font:700 10.5px var(--nar);letter-spacing:.2em;fill:var(--ink3)}
.ec-h.in{fill:#5FD394} .ec-h.out{fill:#E2725B}
.ec-n{font:12px var(--pt);fill:var(--ink2);transition:fill .3s}
.ec-v{font:600 13px var(--hj);transition:fill .3s} .ec-v.in{fill:#9BF0BE} .ec-v.out{fill:#FFB199}
.ec-r{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s}
.p1 .ec-r{opacity:1;transform:none}
.ec-bar{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .3s}
.ec-r[class*="ec-o"] .ec-bar{transform-origin:100% 50%}
.p1 .ec-bar{transform:none}
.ec-f{opacity:0;transition:opacity .8s .5s,stroke-opacity .2s}
.p1 .ec-f{opacity:1}
.ec-fd{opacity:0}
.p1 .ec-fd{opacity:1;animation:ecflow 1.1s linear infinite}
@keyframes ecflow{to{stroke-dashoffset:-13}}
.ec-glow{animation:ecg 3s ease-in-out infinite}
@keyframes ecg{50%{opacity:.5}}
.ec-ring{animation:ecg 2s ease-in-out infinite}
.ec-vt{font:700 12px var(--nar);letter-spacing:.3em;fill:var(--em)}
.ec-cash{font:600 30px var(--hj);fill:var(--ink)}
.ec-clk{font:700 9.5px var(--nar);letter-spacing:.18em;fill:var(--ink3)} .ec-min{fill:var(--em)}
.ec-sub{font:11px var(--pt);fill:var(--ink4)}
.ec-tl{font:700 9.5px var(--nar);letter-spacing:.2em;fill:var(--ink3)}
.ec-tv{font:600 17px var(--hj)} .ec-tv.in{fill:#9BF0BE} .ec-tv.out{fill:#FFB199}
.ec-sv{font:600 14px var(--hj);fill:var(--ink)}
.ec-lim{font:600 10px var(--hj);fill:var(--ink4)}
.ec-saldo{font:600 28px var(--hj);fill:var(--em)}
.ec-dec{font:700 10px var(--nar);letter-spacing:.12em;fill:var(--amb);opacity:0;transition:opacity .4s}
.p3 .ec-dec{opacity:1}
.p3 .ec-s0 .ec-th{filter:drop-shadow(0 0 6px #2ECC71)}
.p3 .ec-i1 .ec-v,.p3 .ec-i1 .ec-n{fill:#fff}
.p2:not(.p3) .ec-i0 .ec-n,.p2:not(.p3) .ec-o0 .ec-n{fill:#fff}
.ec-ru{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s}
.p4 .ec-ru{opacity:1;transform:none}
.p4 .ec-u1{transition-delay:.12s} .p4 .ec-u2{transition-delay:.24s} .p4 .ec-u3{transition-delay:.36s}
.ec-rt{font:13px var(--pt);fill:var(--ink2)}
.ec-note{font:10.5px var(--pt);fill:var(--ink4)}

/* ── навыки: витрина вкладки F4 (HTML в рамке схемы, размеры в cqw рамки) ───── */
.skw{position:absolute;left:0;top:0;right:0;bottom:0;container-type:inline-size;font-family:var(--pt);color:var(--ink)}
.skw>*{margin:0}
.sk-top{position:absolute;left:2.2cqw;right:2.2cqw;top:2.2cqw;height:14cqw;display:flex;align-items:center;gap:2.4cqw;padding:1.2cqw 2cqw;
  border:1px solid #22302A;border-left:2px solid var(--em);background:rgba(10,16,13,.7);box-sizing:border-box}
.sk-sum{width:22cqw;flex:none}
.sk-sum s{display:block;font:700 1.15cqw/1 var(--nar);letter-spacing:.24em;color:var(--ink2);text-decoration:none}
.sk-big{display:flex;align-items:flex-end;gap:.8cqw;margin:.9cqw 0 .5cqw;color:var(--ink)}
.sk-big i{font:600 2.4cqw/1 var(--hj);font-style:normal;color:var(--ink3)}
.sk-pct{font-size:1.25cqw;color:var(--ink3)} .sk-pct b{color:var(--em)}
.sk-meter{height:.5cqw;background:#16201C;margin-top:.8cqw} .sk-meter i{display:block;height:100%;background:var(--em);transition:width 1s}
.sk-eq{flex:1;align-self:stretch;display:flex;align-items:stretch;gap:.8cqw}
.sk-eqc{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.5cqw;color:var(--c)}
.sk-eqc i{display:block;width:60%;height:calc(var(--h) * .7);min-height:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--c),rgba(0,0,0,.25));transition:height .8s cubic-bezier(.2,.8,.2,1)}
.sk-eqc .skg{width:1.7cqw;height:1.7cqw;flex:none}
.sk-who{font:700 .95cqw/1.5 var(--nar);letter-spacing:.2em;color:var(--amb);text-align:right;flex:none}
.sk-feat{position:absolute;left:2.2cqw;top:18cqw;width:52cqw;bottom:2cqw;display:flex;flex-direction:column;gap:.9cqw}
.sk-feat.in{animation:skin .5s ease}
@keyframes skin{from{opacity:0;transform:translateY(1cqw)}to{opacity:1;transform:none}}
.sk-art{position:relative;flex:none;height:22.75cqw;border:1px solid rgba(var(--cr),.5);border-radius:.8cqw;overflow:hidden;box-shadow:0 0 3cqw rgba(var(--cr),.18)}
.sk-art svg.art{width:100%;height:100%;display:block}
.sk-lv{position:absolute;right:1.4cqw;bottom:.9cqw;display:flex;align-items:flex-end;gap:.3cqw;color:#fff;filter:drop-shadow(0 .3cqw .6cqw rgba(0,0,0,.85))}
.sk-lv em{font:600 1.9cqw/1 var(--hj);color:rgba(255,255,255,.75);font-style:normal}
.sk-mst{position:absolute;left:1.2cqw;bottom:1.1cqw;color:var(--c);padding:.45cqw .7cqw;border:2px solid var(--c);border-radius:.4cqw;
  background:rgba(5,7,6,.75);transform:rotate(-6deg);opacity:0;line-height:0}
.max .sk-mst{opacity:1;animation:skst .45s cubic-bezier(.5,0,.75,0)}
@keyframes skst{from{opacity:0;transform:rotate(-6deg) scale(2)}to{opacity:1;transform:rotate(-6deg) scale(1)}}
.sk-up{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font:400 3.2cqw/1 var(--stencil);color:#fff;letter-spacing:.08em;
  text-shadow:0 0 2cqw rgba(var(--cr),.95),0 .2cqw .6cqw rgba(0,0,0,.8);opacity:0;white-space:nowrap}
.lvl .sk-up{animation:skup 1.7s ease forwards}
@keyframes skup{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-65%) scale(1)}}
.lvl .sk-art{animation:skfl .9s ease}
@keyframes skfl{30%{box-shadow:0 0 5cqw rgba(var(--cr),.75)}}
.sk-hd{display:flex;align-items:center;gap:1.2cqw}
.sk-hd b{font:700 2.3cqw/1 var(--nar);letter-spacing:.14em}
.sk-side{font:700 .95cqw/1 var(--nar);letter-spacing:.2em;padding:.4cqw .6cqw;border:1px solid}
.sk-side.legal{color:var(--em)} .sk-side.illegal{color:var(--red)} .sk-side.common{color:#B28DD6}
.sk-job{font-size:1.4cqw;color:var(--ink3)} .sk-rank{color:var(--c);font-style:normal;font-weight:700}
.sk-xp{height:.6cqw;background:#16201C;border-radius:.3cqw;overflow:hidden;flex:none}
.sk-xp i{display:block;height:100%;width:25%;background:var(--c);box-shadow:0 0 1cqw var(--c)}
.sk-steps{list-style:none;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:.5cqw;margin:0;padding:0}
.sk-steps li{padding:.55cqw .3cqw 0;border-top:.35cqw solid #22302A;font-size:1cqw;line-height:1.2;color:var(--ink4);overflow:hidden}
.sk-steps li b{display:block;font:600 1.4cqw/1.2 var(--hj)}
.sk-steps li.on{border-top-color:var(--c);color:var(--ink2)}
.sk-steps li.cur{color:#fff} .sk-steps li.cur b{color:var(--c)}
.sk-desc{font-size:1.4cqw;line-height:1.45;color:var(--ink2);margin:0}
.sk-vip{font-size:1.2cqw;line-height:1.4;color:#C9B37A;margin:0} .sk-vip b{color:#E8C766;letter-spacing:.06em}
.sk-grid{position:absolute;left:56cqw;right:2.2cqw;top:18cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw}
.sk-t{border:1px solid #22302A;border-radius:.5cqw;overflow:hidden;opacity:.5;transition:opacity .3s,border-color .3s,transform .3s,box-shadow .3s}
.sk-ta{height:5.5cqw} .sk-ta svg{width:100%;height:100%;display:block}
.sk-t b{display:block;font:700 .85cqw/1 var(--nar);letter-spacing:.12em;padding:.45cqw .5cqw;color:var(--ink2);background:#0A0F0C;white-space:nowrap;overflow:hidden}
.sk-t.on{opacity:1;border-color:var(--c);transform:scale(1.05);box-shadow:0 0 1.6cqw rgba(var(--cr),.4)}
.sk-t.on b{color:var(--c)}
.sk-t .mv{animation-play-state:paused!important}

/* экономика: казна дышит - вспышки получки и поступлений, столбики минут */
.ec-hx,.ec-cash{transition:stroke .25s,fill .25s}
.pay .ec-hx{stroke:#E74C3C;fill:#1C0C09} .pay .ec-cash{fill:#FFB199}
.gain .ec-hx{stroke:#7CF29A;fill:#0C2216} .gain .ec-cash{fill:#9BF0BE}
.po path[class*="ec-fo"]{stroke-opacity:.9}
.pi0 .ec-fi0,.pi2 .ec-fi2,.pi4 .ec-fi4{stroke-opacity:.95}
.ec-b{opacity:0} .ec-b.on{opacity:1;transition:opacity .12s}
.ec-fl{font:600 15px var(--hj)} .ec-fl.in{fill:#9BF0BE} .ec-fl.out{fill:#FF8A70}
.ec-lg{font:11px var(--pt);fill:var(--ink3)}

/* навыки: нажимаются карточки и столбики */
.sk-t,.sk-eqc{cursor:pointer}
.sk-t:hover{opacity:.9;border-color:rgba(var(--cr),.7)}
.sk-eqc{transition:filter .2s,transform .2s}
.sk-eqc:hover,.sk-eqc.on{filter:brightness(1.35)}
.sk-eqc.on{transform:translateY(-.3cqw)}
.sk-hint{position:absolute;left:56cqw;right:2.2cqw;top:60.5cqw;display:flex;align-items:center;gap:.8cqw;font:700 1cqw/1.3 var(--nar);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.sk-hint i{width:.9cqw;height:.9cqw;flex:none;border:.2cqw solid var(--em);border-radius:50%;animation:skhint 1.6s ease-in-out infinite}
@keyframes skhint{50%{transform:scale(1.5);opacity:.4}}
.manual .sk-hint{color:var(--em)}

/* ── метлаба: Кухня и цепочка Голубого ───────────────────────────────────── */
.mx-sc{opacity:0;transition:opacity .45s;pointer-events:none}
.mx-sc.on{opacity:1}
.mx-stp{font:700 14px var(--nar);letter-spacing:.14em;fill:#fff}
.mx-key{font:700 11px var(--nar);letter-spacing:.18em;fill:var(--em)}
.mx-cap{font:700 10.5px var(--nar);letter-spacing:.18em;fill:var(--ink3)}
.mx-chl{font:700 10px var(--nar);letter-spacing:.2em;fill:#4FA8F0}
.mx-fn{font:700 11px var(--nar);letter-spacing:.14em;fill:var(--ink3)}
.mx-fv{font:600 13px var(--hj);fill:var(--ink3)}
.mx-fr.on .mx-fn,.mx-fr.on .mx-fv{fill:var(--em)}
.mx-note{font:12px var(--pt);fill:var(--ink3)}
.mx-note2{font:700 11px var(--nar);letter-spacing:.12em;fill:#4FA8F0}
.mx-gl{font:700 12px var(--nar);letter-spacing:.2em;fill:#fff}
.mx-kl{font:700 8.5px var(--nar);letter-spacing:.12em;fill:var(--ink3)}
.mx-pk{font:700 10px var(--nar);letter-spacing:.12em;fill:#3B2E22}
.mx-pk2{font:700 7.5px var(--nar);letter-spacing:.1em;fill:#3B2E22}
.mx-pk3{font:700 8px var(--nar);letter-spacing:.06em;fill:#2A1E10}
.mx-big{font:600 46px var(--hj);fill:var(--ink)}
.mx-timer{font:600 18px var(--hj);fill:var(--amb);opacity:0;transition:opacity .3s}
.k-boil .mx-timer{opacity:1}
.mx-fl{opacity:0;transform:scaleY(.3);transition:opacity .3s,transform .5s}
.k-fire .mx-fl{opacity:1;transform:scaleY(.75)}
.mx-spark{opacity:0}
.k-spark .mx-spark{opacity:1}
.mx-steam path{opacity:0}
.k-boil .mx-steam path{animation:heat 1.2s ease-in-out infinite}
.k-boil .mx-steam path:nth-child(2){animation-delay:.4s} .k-boil .mx-steam path:nth-child(3){animation-delay:.8s}
.mx-crack{opacity:0;transition:opacity .5s}
.k-crust .mx-crack{opacity:1}
.mx-tf{transition:fill .6s}
.k-crust .mx-tf{fill:#9AA39E}
.mx-crumb{opacity:0;transition:opacity .3s}
.k-box .mx-crumb{opacity:1}
.mx-intro{opacity:0;transition:opacity .5s;pointer-events:none}
.intro .mx-intro{opacity:1}
.mx-it{font:400 34px var(--stencil);fill:#4FA8F0;letter-spacing:.06em;filter:drop-shadow(0 0 12px rgba(79,168,240,.6))}
.mx-is{font:13px var(--pt);fill:var(--ink2)}
.mx-w{opacity:.35;transition:opacity .3s}
.mx-w.on{opacity:1}
.mx-wk{opacity:0} .mx-w.on .mx-wk{opacity:1} .mx-w.on circle{stroke:var(--em)}
.mx-dm{transition:fill .2s} .mx-dm.on{fill:#D9963A}
.mx-foam{opacity:0;transform:translateY(12px);transition:opacity .3s,transform .6s}
.foam .mx-foam{opacity:1;transform:translateY(-4px)}
.mx-stir{transform-box:fill-box;transform-origin:50% 50%}
.b-cook .mx-stir{animation:stir .5s linear infinite}
.b-cook .mt-bub circle{animation:bub 1.1s ease-in infinite}
.b-cook .mt-bub circle:nth-child(2){animation-delay:.3s} .b-cook .mt-bub circle:nth-child(3){animation-delay:.65s} .b-cook .mt-bub circle:nth-child(4){animation-delay:.85s}
.mx-pb{transition:fill .1s}
.b-press .mx-pb{fill:#2ECC71}
.mx-pv{font:600 16px var(--hj);fill:var(--ink)}
.mx-hint{font:700 9px var(--nar);letter-spacing:.18em;fill:var(--em)}
.mx-trend{font:600 22px var(--hj);fill:var(--em)}
.mx-lamp.lit{filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
.mx-disp{font:600 13px var(--hj);fill:#4FA8F0}
.d-seed .mx-disp{fill:#F1C40F;animation:blink .5s steps(2) infinite}
.mx-spk{opacity:0}
.d-seed .mx-spk{opacity:1;animation:blink .4s steps(2) infinite}
.mx-hoses{animation:ecflow 1s linear infinite}
.mx-ck1,.mx-ck2,.mx-shards{opacity:0}
.e-h1 .mx-ck1,.e-h2 .mx-ck2,.e-h3 .mx-shards{opacity:1}
.e-h3 .mx-sheet{opacity:.25}
.e-scale .mx-shards{transform:translate(222px,-16px) scale(.5);opacity:0;transition:transform .6s,opacity .5s .3s}
.mx-scale{font:600 11px var(--hj);fill:var(--em)}
.mx-bag{opacity:0;transform:translateY(20px);transition:opacity .4s,transform .5s}
.e-bag .mx-bag{opacity:1;transform:none}
.mx-stamp{opacity:0}
.e-bag .mx-stamp{opacity:.92;transition:opacity .2s .5s}
.mx-gn{font:400 22px var(--stencil);letter-spacing:.06em;fill:var(--ink3)}
.mx-gp{font:600 16px var(--hj);fill:var(--ink2)}

/* ── АЭС: блок № 1 (VIG.npp в js/vig_site.js) ───────────────────────────────
   Старые np-* из shared/css/vig.css (np-glow, np-steam, np-v ...) здесь не
   используются. Всё движение - из JS (T.anim): CSS-переходов нет.          */
.np-lb{font:700 11.5px var(--nar);letter-spacing:.12em;fill:var(--ink3)}
.np-lbw{font:700 11.5px var(--nar);letter-spacing:.14em;fill:var(--em)}
.np-dl{font:400 15px var(--stencil);letter-spacing:.06em;fill:var(--ink)}
.np-cap{font:700 12.5px var(--nar);letter-spacing:.08em;fill:var(--em)}
.np-cap.amb{fill:var(--amb)} .np-cap.red{fill:var(--red)}
.np-sub{font:700 11.5px var(--nar);letter-spacing:.06em;fill:var(--ink2)}
.np-hs{fill:var(--em)} .np-hs.red{fill:var(--red)}
.np-kv{font:600 21px var(--hj)}
.np-swl{font:700 11px var(--nar);letter-spacing:.06em;fill:var(--ink3)}
.np-mt{font:600 11px var(--hj);fill:#2B2A24}
.np-mv{font:600 22px var(--hj)}
.np-rl{font:700 11px var(--nar);letter-spacing:.06em;fill:var(--ink3)}
.np-rv{font:600 15px var(--hj)}
.np-cn{font:700 11.5px var(--nar);letter-spacing:.1em;fill:var(--ink3)}
.np-cs{font:11px var(--pt);fill:var(--ink4)}
.np-ch.on rect{stroke:var(--em2)} .np-ch.on .np-cn{fill:var(--ink)} .np-ch.on .np-cs{fill:var(--ink2)}