/* Базовый скин: весь вид задан токенами :root (см. пример внизу страницы). */
body{background:var(--page-bg);color:var(--text-2)}
.phone{border-radius:var(--r-phone);font-family:var(--font-ui);background:var(--bg);box-shadow:var(--phone-shadow)}
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:9;box-shadow:inset 0 0 0 1px var(--line),inset 0 0 40px var(--vignette)}
.top{display:grid;grid-template-columns:1.55fr 1.1fr .85fr;background:linear-gradient(var(--surface-2),var(--surface));box-shadow:0 1px 0 var(--line),0 6px 18px rgba(0,0,0,.45),inset 0 -2px 0 var(--accent-dim)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:var(--top-line,.8)}
.stat{padding:13px 8px 0 16px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--line)}
.stat:first-child{border:0}
.lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.stat b{font-family:var(--font-num);font-weight:var(--num-w);white-space:nowrap;margin-top:3px}
.money b{font-size:var(--money-size);color:var(--gold);text-shadow:var(--money-shadow,0 0 var(--glow-r) var(--gold-glow));transform-origin:left}
.inc b{font-size:15px;color:var(--good)}.bl b{font-size:17px;color:var(--text)}
.field{box-shadow:var(--field-frame)}
.lamps span{display:none;width:5px;height:5px;border-radius:50%;background:var(--lamp);box-shadow:0 0 6px 1px var(--lamp);animation:breathe 2.8s ease-in-out infinite var(--d);opacity:.3}
.lamps span:nth-child(3n+1){display:var(--lamps,block)}
@keyframes breathe{0%,100%{opacity:.18}50%{opacity:var(--lamp-max)}}
.toast{background:linear-gradient(var(--surface-3),var(--surface-2));color:var(--text);font-weight:700;font-size:14px;padding:10px 20px 10px 16px;border-radius:var(--r);border:1px solid var(--accent);box-shadow:var(--toast-shadow,0 8px 24px rgba(0,0,0,.6),0 0 var(--glow-r) var(--accent-glow));transition:transform .55s cubic-bezier(.2,1.25,.4,1),opacity .35s;opacity:0}
.toast.show{opacity:1}
.toast::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:var(--dot-glow,0 0 8px var(--accent));margin-right:10px;vertical-align:1px}
.buyzone{background:linear-gradient(var(--bg),var(--surface))}
.buy{border-radius:var(--r-lg);padding:0 14px 0 20px;background:linear-gradient(var(--accent-hi),var(--accent) 55%,var(--accent-lo));color:var(--accent-ink);box-shadow:var(--buy-shadow,inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.22),0 6px 0 var(--accent-dark),0 10px 26px var(--accent-glow));transition:transform .08s,box-shadow .08s;overflow:visible}
.buy:active{transform:translateY(5px);box-shadow:var(--buy-shadow-active,inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.2),0 1px 0 var(--accent-dark),0 4px 12px var(--accent-glow))}
.buy-k{font-family:var(--font-head);font-weight:var(--head-w);font-size:23px;letter-spacing:.01em;text-transform:var(--head-case)}
.buy-n{font-weight:700;font-size:13px;opacity:.78}
.buy-p{font-family:var(--font-num);font-weight:var(--num-w);font-size:18px;color:var(--gold);background:var(--bg);padding:11px 13px;border-radius:var(--r);box-shadow:inset 0 2px 6px #000,0 0 0 1px var(--accent-dark);text-shadow:var(--price-shadow,0 0 8px var(--gold-glow))}
.drawer{background:linear-gradient(var(--surface-2),var(--surface) 30%);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--drawer-shadow,0 -1px 0 var(--accent),0 -14px 34px rgba(0,0,0,.7),0 -2px 18px var(--accent-glow))}
.handle i{width:48px;height:5px;border-radius:3px;background:var(--text-3)}
.handle:hover i{background:var(--accent)}
.tab{font-weight:700;font-size:14px;color:var(--text-3);position:relative;transition:color .2s}
.tab::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--accent);box-shadow:var(--tab-glow,0 0 10px var(--accent));transform:scaleX(0);transition:transform .3s cubic-bezier(.2,1.2,.4,1)}
.tab.on{color:var(--accent)}.tab.on::after{transform:scaleX(1)}
.cards{padding-top:10px}
.card{position:relative;border-radius:var(--r);background:linear-gradient(135deg,var(--surface-3),var(--surface-2) 60%);box-shadow:var(--card-shadow,inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.07),0 4px 10px rgba(0,0,0,.35));overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);box-shadow:var(--bar-glow,0 0 10px var(--accent))}
.card>*{position:relative}
.ic{width:52px;height:52px;border-radius:var(--r);padding:12px;color:var(--accent);background:var(--bg);box-shadow:var(--ic-shadow,inset 0 0 0 1px var(--line),inset 0 -8px 14px var(--accent-faint))}
.card h3{font-family:var(--font-head);font-weight:var(--head-w2);font-size:16px;color:var(--text);text-transform:var(--head-case-2)}
.lv{color:var(--text-3);font-weight:700;display:inline-block;transform-origin:left}
.ef{font-family:var(--font-num);font-weight:var(--num-w);overflow:hidden;margin-top:6px}
.ef em{color:var(--text-3);font-style:normal;display:inline-block}.ef i{color:var(--text-3);margin:0 6px}.ef b{color:var(--good);display:inline-block;font-weight:var(--num-w)}
.pay{border-radius:var(--r);background:linear-gradient(var(--accent-hi),var(--accent) 60%,var(--accent-lo));color:var(--accent-ink);box-shadow:var(--pay-shadow,inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 var(--accent-dark),0 6px 14px var(--accent-faint));margin-bottom:3px;transition:transform .08s,box-shadow .08s;position:relative}
.pay:active{transform:translateY(3px);box-shadow:var(--pay-shadow-active,inset 0 1px 0 rgba(255,255,255,.3),0 0 0 var(--accent-dark))}
.pay small{font-weight:700;letter-spacing:.04em;opacity:.8}.pay b{font-family:var(--font-num);font-weight:var(--num-w)}
.pay.no{filter:saturate(.2) brightness(.7)}
.card.locked{opacity:.6;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface)}
.card.locked::before{background:var(--text-3);box-shadow:none}.card.locked .ic{color:var(--text-3)}
.card.locked .pay{background:var(--surface-3);color:var(--text-3);box-shadow:none}
.card.locked .ef em{font-family:var(--font-ui);font-weight:500}
.mode{gap:0;padding:8px 14px 10px}
.mode button{font-family:var(--font-num);font-weight:var(--num-w);font-size:16px;color:var(--text-2);background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line);transition:.2s}
.mode button:first-child{border-radius:var(--r) 0 0 var(--r)}.mode button:last-child{border-radius:0 var(--r) var(--r) 0}
.mode button.on{color:var(--accent-ink);background:linear-gradient(var(--accent-hi),var(--accent));box-shadow:var(--mode-on-shadow,0 0 14px var(--accent-glow))}
.notes{color:var(--text-2)}
/* --- анимации прокачки --- */
.sheen{position:absolute;top:0;bottom:0;left:0;width:46%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:translateX(-120%) skewX(-18deg);z-index:3}
.fx-fly{position:absolute;z-index:20;pointer-events:none;font-family:var(--font-num);font-weight:var(--num-w);font-size:16px;color:var(--gold);text-shadow:var(--fly-shadow,0 0 10px var(--gold-glow),0 2px 0 #000);white-space:nowrap}
.fx-dot{position:absolute;z-index:20;pointer-events:none;border-radius:50%;background:var(--accent-hi);box-shadow:var(--dot-glow2,0 0 8px 2px var(--accent))}
.fx-ring{position:absolute;z-index:20;pointer-events:none;border-radius:50%;border:2px solid var(--accent);box-shadow:var(--ring-glow,0 0 14px var(--accent))}
.demo{width:min(390px,100%);display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font:13px/1.2 system-ui,sans-serif}
.demo button{padding:10px 12px;min-height:44px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);color:#fff;font:inherit;cursor:pointer}
.demo button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tokens{width:min(390px,100%);font:12px/1.5 ui-monospace,Menlo,monospace;color:var(--text-2);columns:2;column-gap:14px}
.tokens div{break-inside:avoid;display:flex;gap:6px;align-items:center}.tokens i{width:11px;height:11px;border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}