/* Спрайтовый скин (00k/00l): кнопки, панели, таблетки = нарисованные PNG через border-image (9-slice). Цвета и пути в токенах. */
body{background:var(--page-bg);color:var(--page-text)}
.phone{border-radius:var(--r-phone);font-family:var(--font);background:var(--bg);box-shadow:var(--phone-shadow);font-variant-numeric:tabular-nums}
.sp{border-style:solid;border-color:transparent}
.top{display:grid;grid-template-columns:1.35fr 1.1fr 1fr;gap:10px;padding:16px 14px 0;background:var(--hud)}
.stat{position:relative;min-width:0;height:50px;padding:0 3px 0 32px;display:flex;align-items:center;border:0;border-style:solid;border-color:transparent;border-width:var(--pill-w);border-image-source:var(--s-pill);border-image-slice:var(--pill-slice);border-image-width:var(--pill-w);border-image-repeat:stretch;box-sizing:border-box}
.stat .lbl{display:none}
.stat img.ov{position:absolute;left:-1px;top:50%;width:22px;height:22px;margin-top:-13px}
.stat img.hi{position:absolute;left:-14px;top:50%;width:48px;height:48px;margin-top:-26px;object-fit:contain}
.stat b{font-weight:800;white-space:nowrap;line-height:1;color:var(--pill-text);margin:0;transform-origin:left}
.money b{font-size:19px}.inc b{font-size:12px}.bl b{font-size:14px}.stat b{text-shadow:var(--tsh)}
.field{background:var(--field)}
.toast{color:var(--toast-text);font-weight:800;font-size:15px;padding:0 20px;height:48px;display:flex;align-items:center;border-style:solid;border-color:transparent;border-width:var(--toast-w);border-image-source:var(--s-toast);border-image-slice:var(--toast-slice);border-image-width:var(--toast-w);transition:transform .55s cubic-bezier(.2,1.3,.4,1),opacity .3s;opacity:0;box-sizing:border-box}
.toast.show{opacity:1}
.buyzone{background:var(--zone)}
.buy{top:10px;height:98px;padding:0 6px 0 14px;border-style:solid;border-color:transparent;border-width:var(--buy-w);border-image-source:var(--s-buy);border-image-slice:var(--buy-slice);border-image-width:var(--buy-w);background:var(--buy-bg,none) center/100% 100% no-repeat;transition:transform .08s,filter .08s;box-sizing:border-box;color:#fff;text-shadow:var(--tsh)}
.buy:active{border-image-source:var(--s-buy-down);transform:translateY(var(--press));filter:var(--press-filter,none)}
.buy-k{font-weight:800;font-size:22px;line-height:1.05}.buy-n{font-weight:700;font-size:13px;opacity:.9}
.buy-p{display:flex;align-items:center;gap:6px;font-weight:800;font-size:19px;padding-right:6px}
.buy-p::before{content:"";width:30px;height:30px;flex:none;background:var(--coin) center/contain no-repeat}
.drawer{height:500px;transform:translateY(var(--dr-closed,436px));border-style:solid;border-color:transparent;border-width:var(--dr-w);border-image-source:var(--s-drawer);border-image-slice:var(--dr-slice);border-image-width:var(--dr-w);box-sizing:border-box;background:none}
.handle{height:16px;margin-top:var(--handle-top)}.handle i{width:48px;height:6px;border-radius:3px;background:var(--handle)}
.tabs{padding:0 2px;gap:6px}
.tab{font-weight:800;font-size:13px;color:var(--tab-text);text-shadow:var(--tab-tsh,none);min-height:46px;border-style:solid;border-color:transparent;border-width:var(--tab-w);border-image-source:var(--s-tab);border-image-slice:var(--tab-slice);border-image-width:var(--tab-w);box-sizing:border-box;transition:transform .15s cubic-bezier(.2,1.5,.4,1);margin-bottom:2px}
.tab.on{border-image-source:var(--s-tab-on);color:var(--tab-on-text);text-shadow:none;transform:translateY(-1px) scale(1.04)}
.cards{padding:8px 4px 0;gap:6px}
.card{height:100px;box-sizing:border-box;grid-template-columns:50px 1fr 104px;gap:8px;padding:0 6px;border-style:solid;border-color:transparent;border-width:var(--card-w);border-image-source:var(--s-card);border-image-slice:var(--card-slice);border-image-width:var(--card-w);background:none;box-shadow:none;border-radius:0;color:var(--card-text);overflow:hidden;position:relative}
.card::before{display:none}
.ic{width:50px;height:50px;position:relative;background:var(--ic-bg) center/contain no-repeat}
.ic img{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-13px 0 0 -12px}
.ic svg{display:none}
.card h3{font-weight:800;font-size:15px;color:var(--card-text);line-height:1.1}
.lv{display:inline-block;margin-top:2px;font-weight:800;font-size:12px;color:var(--lv);transform-origin:left}
.ef{font-weight:800;font-size:15px;margin-top:4px!important;overflow:hidden}
.ef em{color:var(--card-mute);font-style:normal}.ef i{color:var(--card-mute);margin:0 6px!important;font-style:normal}.ef b{color:var(--good-text);font-weight:800}
.pay{height:58px;box-sizing:border-box;margin-bottom:2px;color:#fff;text-shadow:var(--tsh);border-style:solid;border-color:transparent;border-width:var(--pay-w);border-image-source:var(--s-pay);border-image-slice:var(--pay-slice);border-image-width:var(--pay-w);background:none;box-shadow:none;border-radius:0;transition:transform .08s}
.pay:active{border-image-source:var(--s-pay-down);transform:translateY(var(--press))}
.pay small{display:none;font-weight:800;font-size:10px}.pay small:not(:empty){display:block}
.pay b{display:flex;align-items:center;gap:3px;font-weight:800;font-size:13px}
.pay b::before{content:"";width:18px;height:18px;flex:none;background:var(--coin) center/contain no-repeat}
.pay.no{filter:grayscale(1) brightness(.9);opacity:.8}
.card.locked{filter:grayscale(1);opacity:.75}.card.locked .pay b::before{display:none}
.mode{padding:6px 4px 10px;gap:8px}
.mode button{font-weight:800;font-size:16px;color:var(--tab-text);text-shadow:var(--tab-tsh,none);border-style:solid;border-color:transparent;border-width:var(--tab-w);border-image-source:var(--s-tab);border-image-slice:var(--tab-slice);border-image-width:var(--tab-w);box-sizing:border-box;transition:transform .12s cubic-bezier(.2,1.5,.4,1)}
.mode button.on{border-image-source:var(--s-tab-on);color:var(--tab-on-text);text-shadow:none;transform:scale(1.04)}
.badge{position:absolute;right:-4px;top:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;line-height:18px;text-align:center;font-weight:800;text-shadow:none}
.notes{color:var(--page-text)}
.sheen{position:absolute;top:0;bottom:0;left:0;width:36%;pointer-events:none;background:rgba(255,255,255,.35);transform:translateX(-120%) skewX(-18deg);z-index:3}
.fx-fly{position:absolute;z-index:20;pointer-events:none;font-weight:800;font-size:16px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6);white-space:nowrap}
.fx-dot{position:absolute;z-index:20;pointer-events:none;border-radius:2px;background:var(--spark)}
.fx-ring{position:absolute;z-index:20;pointer-events:none;border-radius:50%;background:var(--spark);opacity:.35}
.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:10px;border:0;background:rgba(255,255,255,.14);color:#fff;font:700 13px system-ui,sans-serif;cursor:pointer}
.demo button.on{background:var(--spark);color:#111}
.tokens{width:min(390px,100%);font:12px/1.5 ui-monospace,Menlo,monospace;color:var(--page-text);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(0,0,0,.35)}
.drawer.open{transform:none}