/* ============================================================
   VRTH v3 · kit.css · @layer kit  (DESIGN.md §4 компоненти, §6.1/§6.4 рух)
   Корінь .vx-<name>, модифікатори data-size / data-tone / data-rar,
   стани aria-* / .is-*. Без !important, без backdrop-filter, без filter
   у transition/keyframes, анімуються лише transform/opacity/color/bg/border.
   Нескінченні анімації — тільки через --vx-inf (RM → 1 ітерація).
   ============================================================ */
@layer kit{

/* ================= текстові утиліти (§3.2) ================= */
.vx-display{font:600 var(--vx-t-display)/1.02 var(--vx-f-serif);letter-spacing:-.01em;color:var(--vx-ink-1);font-variant-numeric:lining-nums}   /* A: Cormorant лише ≥ 28 px */
.vx-display.brand{color:var(--vx-gold)}   /* A: без градієнтного тексту */
.vx-h1{font:600 var(--vx-t-h1)/1.06 var(--vx-f-serif);font-variant-numeric:lining-nums;color:var(--vx-ink-1);text-wrap:balance;overflow-wrap:anywhere}
.vx-h2{font:600 var(--vx-t-h2)/1.15 var(--vx-f-display);color:var(--vx-ink-1)}
.vx-h3{font:800 var(--vx-t-h3)/1.25 var(--vx-f-text);color:var(--vx-ink-1)}
.vx-body{font:500 var(--vx-t-body)/1.5 var(--vx-f-text);color:var(--vx-ink-2)}
.vx-small{font:600 var(--vx-t-small)/1.4 var(--vx-f-text);color:var(--vx-ink-3)}
.vx-cap{font:700 var(--vx-t-cap)/1.2 var(--vx-f-text);text-transform:uppercase;letter-spacing:.06em;color:var(--vx-ink-3)}
.vx-deco{font:700 var(--vx-t-deco)/1 var(--vx-f-text);text-transform:uppercase;letter-spacing:.08em;color:var(--vx-ink-4)}
.vx-num-xl{font:500 var(--vx-t-num-xl)/1 var(--vx-f-num);letter-spacing:-.02em;color:var(--vx-ink-1);font-variant-numeric:tabular-nums}
.vx-num-l{font:500 var(--vx-t-num-l)/1 var(--vx-f-num);letter-spacing:-.01em;color:var(--vx-ink-1);font-variant-numeric:tabular-nums}
.vx-num-m{font:500 var(--vx-t-num-m)/1 var(--vx-f-num);color:var(--vx-ink-1);font-variant-numeric:tabular-nums}
.vx-mono{font-family:var(--vx-f-mono);font-size:13px;color:var(--vx-ink-3)}
.vx-tnum{font-variant-numeric:tabular-nums}
.vx-gold{color:var(--vx-gold)} .vx-gem{color:var(--vx-gem)} .vx-ok{color:var(--vx-ok)} .vx-err{color:var(--vx-err)} .vx-warn{color:var(--vx-warn)}
.vx-ink1{color:var(--vx-ink-1)} .vx-ink2{color:var(--vx-ink-2)} .vx-ink3{color:var(--vx-ink-3)} .vx-accink{color:var(--vx-acc-ink)} .vx-rcink{color:var(--vx-rc-ink)}
.vx-row{display:flex;align-items:center;gap:var(--vx-sp-2);flex-wrap:wrap;min-width:0}
.vx-col{display:flex;flex-direction:column;gap:var(--vx-sp-3);min-width:0}
.vx-grid{display:grid;gap:var(--vx-sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.vx-sec{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:var(--vx-sp-5) 0 var(--vx-sp-3)}
.vx-sec .vx-h2{flex:1 1 auto}
.vx-sec .sp{margin-left:auto}

/* ================= 4.1 кнопка ================= */
.vx-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--vx-h-md);padding:0 16px;
  border-radius:12px;border:1px solid var(--vx-ln-2);background:var(--vx-sf-2);color:var(--vx-ink-1);
  font:700 15px/1 var(--vx-f-text);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;overflow:hidden;isolation:isolate;text-decoration:none;margin:0;box-sizing:border-box;
  transition:transform var(--vx-d-2) var(--vx-e-out),background-color var(--vx-d-2),border-color var(--vx-d-2),color var(--vx-d-2),opacity var(--vx-d-2)}
.vx-btn::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity var(--vx-d-2);pointer-events:none}
.vx-btn .vi{width:18px;height:18px;flex:none}
.vx-btn .sfx{margin-left:2px;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.22);font-size:12px;font-weight:800}
.vx-btn[data-tone=primary] .sfx,.vx-btn[data-tone=gold] .sfx{background:rgba(255,255,255,.26)}   /* G2: темне чорнило — темна пігулка давала 4.09 на червоному акценті Mines */
.vx-btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.28);transform:scale(0);pointer-events:none;animation:vx-ripple .6s var(--vx-e-out) forwards}
@keyframes vx-ripple{to{transform:scale(2.5);opacity:0}}
@media (hover:hover){.vx-btn:hover{transform:translateY(-1px)}.vx-btn:hover::after{opacity:.12}}
.vx-btn:active{transform:scale(.97);transition-duration:var(--vx-d-1);transition-timing-function:var(--vx-e-in)}
/* розміри */
.vx-btn[data-size=sm]{height:var(--vx-h-sm);padding:0 12px;font-size:13px;border-radius:10px;min-width:72px}
.vx-btn[data-size=sm]::before{content:"";position:absolute;inset:-4px}          /* тап-площа до 44 */
.vx-btn[data-size=sm] .vi{width:16px;height:16px}
.vx-btn[data-size=lg]{height:var(--vx-h-lg);padding:0 22px;font-size:16px;border-radius:14px}
.vx-btn[data-size=lg] .vi{width:20px;height:20px}
.vx-btn[data-size=hero]{height:var(--vx-h-hero);padding:0 32px;border-radius:14px;font:600 18px/1 var(--vx-f-display);text-transform:uppercase;letter-spacing:.06em}
.vx-btn[data-size=hero] .vi{width:22px;height:22px}
@media (max-width:480px){.vx-btn[data-size=hero]{width:100%}}
/* тони */
.vx-btn[data-tone=primary]{background:var(--vx-acc);color:var(--vx-ink-on-acc);border-color:transparent;box-shadow:0 10px 30px -12px var(--vx-acc-glow)}   /* A: м'який теплий підйом, без неонового ореолу */
.vx-btn[data-tone=gold]{background:var(--vx-gold-grad);color:var(--vx-ink-on-gold);border-color:transparent}
.vx-btn[data-tone=gem]{background:var(--vx-sf-2);border-color:color-mix(in srgb,var(--vx-gem) 40%,transparent);color:var(--vx-gem)}
.vx-btn[data-tone=ghost]{background:transparent;border-color:var(--vx-ln-2);color:var(--vx-ink-2)}
.vx-btn[data-tone=quiet]{background:transparent;border-color:transparent;color:var(--vx-ink-3)}
.vx-btn[data-tone=danger]{background:color-mix(in srgb,var(--vx-err) 12%,transparent);border-color:transparent;color:var(--vx-err)}
.vx-btn[data-tone=rar]{background:var(--vx-rc-soft,var(--vx-sf-2));border-color:color-mix(in srgb,var(--vx-rc,var(--vx-ln-3)) 45%,transparent);color:var(--vx-rc-ink,var(--vx-ink-1))}
.vx-btn[data-tone=ok]{background:color-mix(in srgb,var(--vx-ok) 14%,transparent);border-color:transparent;color:var(--vx-ok)}
/* стани */
.vx-btn:disabled,.vx-btn[aria-disabled=true],.vx-btn.is-disabled{opacity:.45;box-shadow:none;cursor:default;pointer-events:none}
.vx-btn:disabled::after,.vx-btn[aria-disabled=true]::after{display:none}
.vx-btn.is-busy{color:transparent;pointer-events:none}
.vx-btn.is-busy .vi{visibility:hidden}
.vx-btn.is-busy::before{content:"";position:absolute;inset:auto;width:16px;height:16px;border-radius:50%;border:2px solid var(--vx-ink-1);border-right-color:transparent;
  animation:vx-spin .7s linear var(--vx-inf)}
.vx-btn[data-tone=gold].is-busy::before,.vx-btn[data-tone=primary].is-busy::before{border-color:var(--vx-ink-on-acc);border-right-color:transparent}
@keyframes vx-spin{to{transform:rotate(1turn)}}
.vx-btn.icon{width:var(--vx-h-md);padding:0;min-width:0}
.vx-btn.icon[data-size=sm]{width:var(--vx-h-sm)}
.vx-btn.icon[data-size=lg]{width:var(--vx-h-lg)}
.vx-btn.full{width:100%}
.vx-btn.block{display:flex;width:100%}
.vx-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ================= 4.2 чип / сегмент ================= */
.vx-chip{display:inline-flex;align-items:center;gap:6px;height:var(--vx-h-chip);padding:0 12px;border-radius:999px;background:var(--vx-sf-2);border:1px solid transparent;
  color:var(--vx-ink-2);font:700 var(--vx-t-small)/1 var(--vx-f-text);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;user-select:none;margin:0;box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;text-decoration:none;
  transition:transform var(--vx-d-2) var(--vx-e-out),background-color var(--vx-d-2),border-color var(--vx-d-2),color var(--vx-d-2)}
.vx-chip .vi{width:14px;height:14px;flex:none}
@media (hover:hover){.vx-chip:not(.static):hover{border-color:var(--vx-ln-3)}}
.vx-chip:not(.static):active{transform:scale(.96)}
.vx-chip[aria-checked=true],.vx-chip[aria-pressed=true],.vx-chip.is-on{background:var(--vx-acc-soft);color:var(--vx-acc-ink);border-color:var(--vx-ln-acc)}
.vx-chip[data-tone=ok]{background:color-mix(in srgb,var(--vx-ok) 14%,transparent);color:var(--vx-ok)}
.vx-chip[data-tone=err]{background:color-mix(in srgb,var(--vx-err) 14%,transparent);color:var(--vx-err)}
.vx-chip[data-tone=warn]{background:color-mix(in srgb,var(--vx-warn) 14%,transparent);color:var(--vx-warn)}
.vx-chip[data-tone=gold]{background:color-mix(in srgb,var(--vx-gold) 14%,transparent);color:var(--vx-gold)}
.vx-chip[data-tone=gem]{background:color-mix(in srgb,var(--vx-gem) 14%,transparent);color:var(--vx-gem)}
.vx-chip[data-tone=info]{background:color-mix(in srgb,var(--vx-info) 14%,transparent);color:var(--vx-info)}
.vx-chip[data-tone=rar]{background:var(--vx-rc-soft);color:var(--vx-rc-ink)}
.vx-chip[data-tone=live]{background:color-mix(in srgb,var(--vx-live) 16%,transparent);color:var(--vx-ink-1)}
.vx-chip[data-tone=live]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vx-live);animation:vx-pulse 1.6s ease-in-out var(--vx-inf)}
@keyframes vx-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.vx-chip.static{cursor:default}
.vx-chip:disabled,.vx-chip[aria-disabled=true]{opacity:.45;cursor:default;pointer-events:none}
.vx-chips{display:flex;flex-wrap:wrap;gap:8px}
.vx-chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.vx-chips.scroll::-webkit-scrollbar{display:none}
@media (max-width:760px){.vx-chip[role=radio]{height:44px;padding:0 14px}}
/*G1*/
/* G2: ::before inset −4 тап-площу не дає — overflow:hidden .vx-btn ріже й hit-test; 44 — реальним розміром */
@media (max-width:760px),(pointer:coarse){button.vx-chip,a.vx-chip,.vx-chip[role=switch],.vx-chip[role=radio],.vx-btn[data-size=sm],.vx-cab-marquee .ctl .vx-btn{min-height:44px}.vx-btn.icon,.vx-cab-marquee .ctl .vx-btn{min-width:44px}}

/* ================= 4.19 бейдж / медаль ================= */
.vx-badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:999px;background:var(--vx-acc-soft);color:var(--vx-acc-ink);
  font:700 12px/1 var(--vx-f-text);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;vertical-align:middle}
.vx-badge .vi{width:12px;height:12px}
.vx-badge[data-tone=live]{background:var(--vx-live);color:var(--vx-ink-on-acc)}   /* A-VIS-05: #05101a на #ff3b5c = 5.8:1 */
.vx-badge[data-tone=ok]{background:color-mix(in srgb,var(--vx-ok) 18%,transparent);color:var(--vx-ok)}
.vx-badge[data-tone=gold]{background:color-mix(in srgb,var(--vx-gold) 18%,transparent);color:var(--vx-gold)}
.vx-badge[data-tone=gem]{background:color-mix(in srgb,var(--vx-gem) 18%,transparent);color:var(--vx-gem)}
.vx-badge[data-tone=err]{background:color-mix(in srgb,var(--vx-err) 18%,transparent);color:var(--vx-err)}
.vx-badge[data-tone=rar]{background:var(--vx-rc-soft);color:var(--vx-rc-ink)}
.vx-badge[data-tone=new]{background:var(--vx-pink);color:var(--vx-ink-on-acc)} /*G1*/
.vx-badge[data-tone=quiet]{background:var(--vx-sf-2);color:var(--vx-ink-3)}
.vx-medal{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--vx-gold-grad);color:var(--vx-ink-on-gold);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.25);flex:none}
.vx-medal .vi{width:16px;height:16px;stroke-width:2}
.vx-medal[data-m=ag]{background:linear-gradient(135deg,#e8edf7,#8f9bb8);color:#1a2030}
.vx-medal[data-m=cu]{background:linear-gradient(135deg,#e0925a,#8a4b22);color:#2a1200}
.vx-medal[data-size=s]{width:24px;height:24px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.vx-medal[data-size=s] .vi{width:12px;height:12px}
.vx-medal[data-size=l]{width:48px;height:48px}
.vx-medal[data-size=l] .vi{width:24px;height:24px}

/* ================= 4.3 інпут ================= */
.vx-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.vx-field>label{font:700 var(--vx-t-small)/1.2 var(--vx-f-text);color:var(--vx-ink-3)}
.vx-field .box{display:flex;align-items:center;height:var(--vx-h-md);border-radius:12px;background:var(--vx-sf-2);border:1px solid var(--vx-ln-field);padding:0 4px 0 12px;gap:8px;
  transition:border-color var(--vx-d-2)}   /* box-shadow не анімується (§6.1) */
.vx-field .box:focus-within{border-color:var(--vx-acc-ink);box-shadow:0 0 0 3px var(--vx-acc-soft)}
.vx-field input,.vx-field select{flex:1;min-width:0;width:100%;height:100%;background:none;border:0;outline:0;padding:0;margin:0;color:var(--vx-ink-1);
  font:700 16px/1 var(--vx-f-text);font-variant-numeric:tabular-nums;box-sizing:border-box}   /* 16px завжди (MOB-01) */
.vx-field select{appearance:none;-webkit-appearance:none;cursor:pointer}
.vx-field textarea{width:100%;min-height:96px;padding:10px 12px;border-radius:12px;background:var(--vx-sf-2);border:1px solid var(--vx-ln-field);outline:0;color:var(--vx-ink-1);
  font:600 16px/1.45 var(--vx-f-text);resize:vertical;box-sizing:border-box;transition:border-color var(--vx-d-2)}   /* box-shadow не анімується (§6.1) */
.vx-field textarea:focus{border-color:var(--vx-acc-ink);box-shadow:0 0 0 3px var(--vx-acc-soft)}
.vx-field input::placeholder,.vx-field textarea::placeholder{color:var(--vx-ink-4);font-weight:600}
.vx-field input::-webkit-outer-spin-button,.vx-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vx-field .pre,.vx-field .suf{color:var(--vx-ink-3);display:inline-flex;align-items:center;gap:6px;flex:none;font:700 var(--vx-t-small)/1 var(--vx-f-text)}
.vx-field .pre .vi,.vx-field .suf .vi{width:18px;height:18px}
.vx-field .box .vx-btn{height:calc(var(--vx-h-md) - 8px);min-width:0;flex:none}
.vx-field[data-size=lg] .box{height:56px;border-radius:14px}
.vx-field[data-size=lg] input{font-size:20px}
.vx-field[data-size=lg] .box .vx-btn{height:44px}
.vx-field .hint{color:var(--vx-ink-3);font:600 var(--vx-t-small)/1.3 var(--vx-f-text)}
.vx-field .err-msg{display:none;color:var(--vx-err);font:600 var(--vx-t-small)/1.3 var(--vx-f-text)}
.vx-field.is-err .err-msg{display:block}
.vx-field.is-err .box{border-color:var(--vx-err)}
.vx-field.is-err .box:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--vx-err) 20%,transparent)}
.vx-field.is-dis{opacity:.5;pointer-events:none}
.vx-field.is-ok .box{border-color:color-mix(in srgb,var(--vx-ok) 55%,transparent)}
/* тумблер — <button role=switch aria-checked> (§8.5) */
.vx-tgl{position:relative;display:inline-block;width:44px;height:26px;border-radius:999px;background:var(--vx-sf-3);border:1px solid var(--vx-ln-field);cursor:pointer;flex:none;padding:0;margin:0;
  transition:background-color var(--vx-d-2),border-color var(--vx-d-2)}
.vx-tgl::before{content:"";position:absolute;inset:-9px 0}   /* тап-площа до 44 */
.vx-tgl::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--vx-ink-3);
  transition:transform var(--vx-d-2) var(--vx-e-out),background-color var(--vx-d-2)}
/* .on / батьківський [role=switch][aria-checked=true] — для span.vx-tgl усередині кнопки-рядка (drawer аватара, дзвінок; вкладені button заборонені) */
.vx-tgl[aria-checked=true],.vx-tgl.on,[role=switch][aria-checked=true]>.vx-tgl{background:var(--vx-acc);border-color:transparent}
.vx-tgl[aria-checked=true]::after,.vx-tgl.on::after,[role=switch][aria-checked=true]>.vx-tgl::after{transform:translateX(18px);background:var(--vx-ink-on-acc)}
.vx-tgl:disabled{opacity:.45;cursor:default}
.vx-tglrow{display:flex;align-items:center;gap:12px;min-height:44px;font:700 14px/1.2 var(--vx-f-text);color:var(--vx-ink-2)}
.vx-tglrow .vx-tgl{margin-left:auto}

/* ================= 4.10 таби ================= */
.vx-tabs{position:relative;display:flex;gap:2px;padding:4px;border-radius:14px;background:var(--vx-sf-1);border:1px solid var(--vx-ln-1);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;box-sizing:border-box}
.vx-tabs::-webkit-scrollbar{display:none}
.vx-tabs [role=tab]{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:10px;border:0;background:none;margin:0;
  color:var(--vx-ink-3);font:700 var(--vx-t-small)/1 var(--vx-f-text);white-space:nowrap;cursor:pointer;scroll-snap-align:start;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:color var(--vx-d-2)}
.vx-tabs [role=tab] .vi{width:16px;height:16px}
.vx-tabs [role=tab][aria-selected=true]{color:var(--vx-acc-ink)}
.vx-tabs [role=tab] .cnt{font-size:12px;padding:1px 6px;border-radius:999px;background:var(--vx-sf-2);color:var(--vx-ink-3)}
.vx-tabs [role=tab][aria-selected=true] .cnt{background:var(--vx-acc-soft);color:var(--vx-acc-ink)}
.vx-tabs .vx-ind{position:absolute;top:4px;left:0;height:40px;width:80px;border-radius:10px;background:var(--vx-sf-3);border:1px solid var(--vx-ln-acc);box-sizing:border-box;
  transform:translateX(0);transition:transform var(--vx-d-3) var(--vx-e-out);pointer-events:none}   /* width — миттєво, рух лише transform (§4.10, §6.1) */
.vx-tabs.no-ind .vx-ind{opacity:0}
.vx-tabs .dot{width:6px;height:6px;border-radius:50%;background:var(--vx-ok);flex:none}
.vx-tabs.sticky{position:sticky;top:var(--vx-nav-h);z-index:var(--vx-z-raised)}
@media (max-width:760px),(pointer:coarse){.vx-tabs{padding:0;border-radius:12px}.vx-tabs [role=tab]{height:44px;border-radius:12px}   /* тап ≥ 44 (MOB-02); G2: і ландшафт телефона 812 */
  .vx-tabs{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
  .vx-tabs .vx-ind{top:0;height:44px;border-radius:12px}}
.vx-tabpanel[hidden]{display:none}

/* ================= 4.4 картка ================= */
.vx-card{position:relative;display:block;background:var(--vx-sf-1);border:1px solid var(--vx-ln-1);border-radius:var(--vx-r-3);box-shadow:var(--vx-el-1);overflow:visible;min-width:0;color:var(--vx-ink-2);text-decoration:none}
.vx-card-hd{display:flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 0;border-bottom:1px solid var(--vx-ln-1);
  font:700 var(--vx-t-cap)/1 var(--vx-f-text);text-transform:uppercase;letter-spacing:.06em;color:var(--vx-ink-3);white-space:nowrap;overflow:hidden}
.vx-card-hd::before{content:"";width:3px;height:16px;border-radius:2px;background:var(--vx-acc);margin-left:14px;flex:none}
.vx-card-hd .sp{margin-left:auto;font-weight:700;text-transform:none;letter-spacing:0;color:var(--vx-ink-3);display:inline-flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis}
.vx-card-hd .vi{width:16px;height:16px;flex:none}
.vx-card-hd h2,.vx-card-hd h3{font:inherit;color:inherit;margin:0;overflow:hidden;text-overflow:ellipsis}
.vx-card-bd{padding:var(--vx-sp-4)}
@media (min-width:760px){.vx-card-bd{padding:var(--vx-sp-5)}}
.vx-card-ft{display:flex;align-items:center;gap:8px;padding:0 var(--vx-sp-4) var(--vx-sp-4);flex-wrap:wrap}
.vx-card.glow{border-color:var(--vx-ln-acc);box-shadow:var(--vx-el-1),inset 0 1px 0 color-mix(in srgb,var(--vx-acc) 25%,transparent)}
.vx-card.interactive{cursor:pointer;transition:transform var(--vx-d-2) var(--vx-e-out),background-color var(--vx-d-2),border-color var(--vx-d-2)}
@media (hover:hover){.vx-card.interactive:hover{background:var(--vx-sf-2);border-color:var(--vx-ln-3);transform:translateY(-2px)}}
@media (hover:none){.vx-card.interactive:active{background:var(--vx-sf-2)}}
.vx-card.stage{background:var(--vx-sf-cab);border-radius:var(--vx-r-4)}
.vx-card.flat{border:0;box-shadow:none;background:var(--vx-sf-2)}
.vx-card.clip{overflow:hidden}
.vx-card[data-rar]{border-color:color-mix(in srgb,var(--vx-rc) 45%,transparent)}
.vx-card[data-rar] .vx-card-hd::before{background:var(--vx-rc)}
.vx-card .pbg{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:0}   /* фон профілю живе всередині картки (§5.3) */
.vx-card .pbg~*{position:relative;z-index:1}

/* ================= 4.5 page-head ================= */
.vx-ph{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic h a" "ic s a" "ln ln ln";column-gap:14px;row-gap:2px;
  padding-bottom:14px;margin-bottom:var(--vx-sp-5);position:relative}
.vx-ph::after{content:"";grid-area:ln;height:2px;margin-top:12px;border-radius:2px;background:linear-gradient(90deg,var(--vx-acc),color-mix(in srgb,var(--vx-acc) 20%,transparent) 60%,transparent)}
.vx-ph .ic{grid-area:ic;width:44px;height:44px;border-radius:12px;background:var(--vx-acc-soft);display:grid;place-items:center;align-self:start}
.vx-ph .ic .vi{width:22px;height:22px;color:var(--vx-acc-ink)}   /* колір на самому svg (CORE-02) */
.vx-ph h1,.vx-ph .h1{grid-area:h;font:600 var(--vx-t-h1)/1.06 var(--vx-f-serif);font-variant-numeric:lining-nums;color:var(--vx-ink-1);text-wrap:balance;overflow-wrap:anywhere;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vx-ph .sub{grid-area:s;font:600 var(--vx-t-small)/1.4 var(--vx-f-text);color:var(--vx-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-ph .act{grid-area:a;display:flex;gap:8px;align-items:center;align-self:center;flex-wrap:wrap;justify-content:flex-end}
.vx-ph.no-ic{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h a" "s a" "ln ln"}
@media (max-width:760px){.vx-ph{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic h" "ic s" "a a" "ln ln"}.vx-ph.no-ic{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "s" "a" "ln"}
  .vx-ph .act{margin-top:10px;justify-content:flex-start}.vx-ph .sub{white-space:normal}}
.vx-ph[data-hero]{padding:24px 0 16px}
.vx-ph[data-hero] .ic{width:64px;height:64px;border-radius:18px}
.vx-ph[data-hero] .ic .vi{width:36px;height:36px}
.vx-ph[data-hero] h1,.vx-ph[data-hero] .h1{font-size:var(--vx-t-display);font-weight:600}
.vx-ph[data-hero] .sub{font-size:var(--vx-t-body);white-space:normal}

/* ================= 4.6 стат-плитки ================= */
.vx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.vx-stats[data-cols="2"]{grid-template-columns:1fr 1fr}
.vx-stats[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
@media (max-width:560px){.vx-stats[data-cols="4"]{grid-template-columns:1fr 1fr}}
.vx-stat{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:12px;background:var(--vx-sf-1);border:1px solid var(--vx-ln-1);min-width:0;box-sizing:border-box}
.vx-stat .v{font:500 var(--vx-t-num-l)/1 var(--vx-f-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--vx-ink-1);display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-stat .l{display:flex;align-items:center;gap:6px;font:700 var(--vx-t-cap)/1.2 var(--vx-f-text);text-transform:uppercase;letter-spacing:.06em;color:var(--vx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-stat .l .vi{width:14px;height:14px;flex:none}
.vx-stat .d{font:700 13px/1 var(--vx-f-text)}
.vx-stat .d.up{color:var(--vx-ok)} .vx-stat .d.down{color:var(--vx-err)}
.vx-stat[data-tone=gold] .v{color:var(--vx-gold)} .vx-stat[data-tone=ok] .v{color:var(--vx-ok)} .vx-stat[data-tone=err] .v{color:var(--vx-err)} .vx-stat[data-tone=gem] .v{color:var(--vx-gem)}
.vx-stat.live .v{transition:color var(--vx-d-3)}

/* ================= 4.11 капсула балансу ================= */
.vx-bal{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 4px 0 12px;gap:10px;border-radius:999px;background:var(--vx-sf-1);border:1px solid var(--vx-ln-2);
  font:500 var(--vx-t-num-m)/1 var(--vx-f-num);font-variant-numeric:tabular-nums;color:var(--vx-ink-1);white-space:nowrap;box-sizing:border-box}
.vx-bal .cur{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;transition:transform .7s var(--vx-e-out),color .7s}
.vx-bal .cur .vi{width:18px;height:18px}
.vx-bal .cur.vrth .vi{color:var(--vx-gold)} .vx-bal .cur.gem .vi{color:var(--vx-gem)}
.vx-bal .sep{width:1px;height:18px;background:var(--vx-ln-2)}
.vx-bal .plus{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--vx-acc);color:var(--vx-ink-on-acc);cursor:pointer;border:0;padding:0;text-decoration:none}
.vx-bal .plus .vi{width:16px;height:16px;stroke-width:2.2}
.vx-bal .plus::before{content:"";position:absolute;inset:-8px}   /* тап-площа до 44 */
.vx-bal .cur.flash{transform:scale(1.06);color:var(--vx-gold)}    /* один пульс 700 мс, завжди золото */
.vx-bal .delta{position:absolute;left:14px;top:-4px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--vx-ok) 20%,var(--vx-sf-1));color:var(--vx-ok);
  font:800 12px/1.3 var(--vx-f-text);pointer-events:none;animation:vx-delta .7s var(--vx-e-out) forwards}
.vx-bal .delta.neg{background:color-mix(in srgb,var(--vx-err) 20%,var(--vx-sf-1));color:var(--vx-err)}
@keyframes vx-delta{0%{opacity:0;transform:translateY(4px)}20%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
.vx-bal.compact .gem,.vx-bal.compact .sep{display:none}
@media (max-width:560px){.vx-bal .cur.gem,.vx-bal .sep{display:none}.vx-bal{height:36px;padding-left:10px;gap:6px}.vx-bal .plus{width:28px;height:28px}}

/* ================= 4.8 тост ================= */
.vx-toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--vx-sf-3);border:1px solid var(--vx-ln-2);box-shadow:var(--vx-el-2);
  color:var(--vx-ink-1);font:600 14px/1.35 var(--vx-f-text);cursor:pointer;animation:vx-toast-in var(--vx-d-3) var(--vx-e-out) both}
.vx-toast.out{animation:vx-toast-out 160ms var(--vx-e-in) forwards}
@keyframes vx-toast-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes vx-toast-out{to{opacity:0;transform:translateX(16px)}}
@media (max-width:760px){@keyframes vx-toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes vx-toast-out{to{opacity:0;transform:translateY(12px)}}}
.vx-toast .ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;background:var(--vx-sf-2);color:var(--vx-ink-2)}
.vx-toast .ic .vi{width:18px;height:18px}
.vx-toast[data-tone=ok] .ic{background:color-mix(in srgb,var(--vx-ok) 18%,transparent);color:var(--vx-ok)}
.vx-toast[data-tone=err] .ic{background:color-mix(in srgb,var(--vx-err) 18%,transparent);color:var(--vx-err)}
.vx-toast[data-tone=info] .ic{background:color-mix(in srgb,var(--vx-info) 18%,transparent);color:var(--vx-info)}
.vx-toast[data-tone=win] .ic{background:color-mix(in srgb,var(--vx-gold) 18%,transparent);color:var(--vx-gold)}
.vx-toast[data-tone=reward]{border-color:var(--vx-rc,var(--vx-gold));background:linear-gradient(135deg,var(--vx-rc-soft,color-mix(in srgb,var(--vx-gold) 14%,transparent)),var(--vx-sf-3) 60%)}
.vx-toast[data-tone=reward] .ic{background:var(--vx-rc-soft,color-mix(in srgb,var(--vx-gold) 14%,transparent));color:var(--vx-rc-ink,var(--vx-gold));animation:vx-medal-in 240ms var(--vx-e-out)}
@keyframes vx-medal-in{from{transform:rotateY(90deg)}to{transform:none}}
.vx-toast .tx{flex:1;min-width:0;overflow-wrap:anywhere}
.vx-toast .tx small{display:block;color:var(--vx-ink-3);font-weight:600;font-size:12px}
.vx-toast .vx-btn{flex:none}
.vx-toast.compact{padding:8px 12px;gap:10px;font-size:13px;line-height:1.3}   /* CORE-04 / A-VIS-06: cookie-тост в один рядок, ≤ 56 px */
.vx-toast.compact .ic{width:24px;height:24px;border-radius:7px}
.vx-toast.compact .ic .vi{width:14px;height:14px}

/* ================= 4.7 модалка / sheet (нативний dialog) ================= */
.vx-dlg{background:var(--vx-sf-3);color:var(--vx-ink-2);border:1px solid var(--vx-ln-2);border-radius:var(--vx-r-4);box-shadow:var(--vx-el-2);padding:0;margin:auto;
  width:min(480px,calc(100vw - 32px));max-width:none;max-height:min(90vh,90dvh);box-sizing:border-box;overflow:auto;overscroll-behavior:contain;font:500 var(--vx-t-body)/1.5 var(--vx-f-text)}
.vx-dlg[data-size=lg]{width:min(640px,calc(100vw - 32px))}
.vx-dlg[data-size=xl]{width:min(880px,calc(100vw - 32px))}
.vx-dlg::backdrop{background:var(--vx-scrim)}
.vx-dlg[open]{animation:vx-dlg-in var(--vx-d-3) var(--vx-e-out)}
@keyframes vx-dlg-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.vx-dlg .handle{display:none;width:36px;height:4px;border-radius:2px;background:var(--vx-ln-3);margin:10px auto 0;flex:none}
.vx-dlg .hd{display:flex;align-items:center;gap:10px;padding:18px 20px 0}
.vx-dlg .hd h2,.vx-dlg .hd .h2{font:600 var(--vx-t-h2)/1.15 var(--vx-f-display);color:var(--vx-ink-1);flex:1;min-width:0;margin:0;overflow-wrap:anywhere}
.vx-dlg .bd{padding:14px 20px 20px;display:flex;flex-direction:column;gap:12px}
.vx-dlg .ft{display:flex;gap:10px;justify-content:flex-end;padding:0 20px 20px;flex-wrap:wrap}
.vx-dlg .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--vx-sf-2);font-weight:700;font-variant-numeric:tabular-nums}
.vx-dlg .row b{color:var(--vx-ink-1);text-align:right;overflow-wrap:anywhere}
.vx-dlg .row.total{background:color-mix(in srgb,var(--vx-gold) 10%,var(--vx-sf-2));border:1px solid color-mix(in srgb,var(--vx-gold) 30%,transparent)}
.vx-dlg.demo{display:block;position:relative;margin:0;animation:none}
@media (max-width:760px){
  .vx-dlg,.vx-dlg[data-size]{width:auto} /*G1*/
  .vx-dlg{position:fixed;inset:auto 0 0 0;width:auto;max-width:none;max-height:92dvh;border-radius:20px 20px 0 0;margin:0;padding-bottom:env(safe-area-inset-bottom);border-bottom:0}
  .vx-dlg .handle{display:block}
  .vx-dlg[open]{animation:vx-sheet-in var(--vx-d-4) var(--vx-e-out)}
  .vx-dlg .ft{flex-direction:column-reverse}
  .vx-dlg .ft .vx-btn{width:100%}
  .vx-dlg.demo{position:relative;inset:auto;width:100%;border-radius:20px 20px 0 0}
}
@keyframes vx-sheet-in{from{transform:translateY(100%)}to{transform:none}}
.vx-dlg.closing{animation:vx-dlg-out 160ms var(--vx-e-in) forwards}
@keyframes vx-dlg-out{to{opacity:0;transform:scale(.98)}}
@media (max-width:760px){@keyframes vx-dlg-out{to{transform:translateY(100%)}}}
.vx-dlg[data-kind=reveal]{width:min(880px,calc(100vw - 32px));background:var(--vx-sf-cab)}

/* ================= 4.9 скелет / порожній стан ================= */
.vx-sk{position:relative;overflow:hidden;border-radius:10px;background:var(--vx-sf-2);color:transparent;pointer-events:none;user-select:none}
.vx-sk-wrap{position:relative;overflow:hidden}
.vx-sk-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);transform:translateX(-100%);
  animation:vx-sk 1.6s linear var(--vx-inf);pointer-events:none}   /* один блік на батьківському контейнері */
@keyframes vx-sk{to{transform:translateX(100%)}}
.vx-sk-line{height:12px;width:100%}.vx-sk-line.w80{width:80%}.vx-sk-line.w60{width:60%}.vx-sk-line.w40{width:40%}.vx-sk-line.w20{width:20%}
.vx-sk-stat{height:74px;border-radius:12px}
.vx-sk-card{height:120px;border-radius:14px}
.vx-sk-item{aspect-ratio:3/4;border-radius:14px}
.vx-sk-row{height:44px}
.vx-sk-av{width:40px;height:40px;border-radius:50%}
.vx-sk-wrap[hidden]{display:none}
.vx-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:32px 16px;color:var(--vx-ink-3)}
.vx-empty .ic{width:64px;height:64px;border-radius:18px;background:var(--vx-sf-2);display:grid;place-items:center;color:var(--vx-ink-3)}
.vx-empty .ic .vi{width:32px;height:32px}
.vx-empty h3,.vx-empty .h3{font:800 var(--vx-t-h3)/1.25 var(--vx-f-text);color:var(--vx-ink-1);margin:0}
.vx-empty p{color:var(--vx-ink-3);max-width:34ch;margin:0}
.vx-empty .vx-btn{margin-top:4px}

/* ================= 4.12 картка предмета ================= */
.vx-item{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:14px;background:var(--vx-sf-1);border:1px solid var(--vx-ln-2);min-width:0;overflow:hidden;
  isolation:isolate;box-sizing:border-box;color:var(--vx-ink-2);text-decoration:none;
  transition:transform var(--vx-d-2) var(--vx-e-out),border-color var(--vx-d-2)}
.vx-item[data-rar=mythical],.vx-item[data-rar=legendary]{border-color:var(--vx-rc);box-shadow:0 0 24px -10px var(--vx-rc)}
.vx-item[data-rar=immortal],.vx-item[data-rar=exalted],.vx-item[data-rar=arcana],.vx-item[data-rar=ancient],.vx-item[data-rar=cheat]{border-color:transparent}
/* фольга ≥ Immortal: статичний градієнтний обвід через masked ::before */
.vx-item[data-rar=immortal]::before,.vx-item[data-rar=exalted]::before,.vx-item[data-rar=arcana]::before,.vx-item[data-rar=ancient]::before,.vx-item[data-rar=cheat]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,var(--vx-rc),rgba(255,255,255,.55) 45%,var(--vx-rc) 70%,rgba(255,255,255,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.vx-item[data-rar=secret]{border-color:var(--vx-rc);background:radial-gradient(120% 90% at 50% 0%,#1a0033,var(--vx-sf-1) 70%)}
.vx-item .strip{position:absolute;top:0;left:0;right:0;height:3px;background:var(--vx-rc)}
.vx-item[data-rar=common] .strip,.vx-item:not([data-rar]) .strip{display:none}
.vx-item[data-rar=legendary] .strip{height:4px;background:var(--vx-gold-grad)}
.vx-item .meta{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:20px;font:700 var(--vx-t-cap)/1 var(--vx-f-text);letter-spacing:.06em;color:var(--vx-ink-3);margin-top:2px;font-variant-numeric:tabular-nums}
.vx-item .slot{position:relative;align-self:center;width:72px;height:72px;border-radius:16px;display:grid;place-items:center;background:radial-gradient(circle,var(--vx-rc-soft,var(--vx-sf-2)),transparent 70%);color:var(--vx-rc,var(--vx-ink-2))}
.vx-item .slot .vi{width:44px;height:44px;stroke-width:1.4}
.vx-item .slot img{width:56px;height:56px;object-fit:contain}
.vx-item .nm{font:800 var(--vx-t-h3)/1.25 var(--vx-f-text);color:var(--vx-ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-item .rr{font:700 var(--vx-t-cap)/1.2 var(--vx-f-text);text-transform:uppercase;letter-spacing:.06em;color:var(--vx-rc-ink,var(--vx-ink-3));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx-item .af{display:flex;flex-direction:column;gap:3px;font:600 var(--vx-t-small)/1.3 var(--vx-f-text);color:var(--vx-ink-2)}
.vx-item .af span{display:flex;align-items:center;gap:6px;line-height:1.25;min-width:0}
.vx-item .af .vi{width:14px;height:14px;flex:none;color:var(--vx-ok)}
.vx-item .af b{white-space:nowrap;margin-left:auto;color:var(--vx-ok);font-weight:800;font-variant-numeric:tabular-nums}
.vx-item .af .more{color:var(--vx-ink-3);cursor:pointer}
.vx-item .ft{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--vx-ln-1)}
.vx-item .ft .vx-btn{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.vx-item .price{font:500 var(--vx-t-num-m)/1 var(--vx-f-num);font-variant-numeric:tabular-nums;color:var(--vx-gold);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.vx-item .price.gem{color:var(--vx-gem)}
.vx-item .price .vi{width:14px;height:14px}
/* голо-блік ≥ Arcana — лише hover/тап/поява */
.vx-item::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-120%);pointer-events:none;z-index:3}
.vx-item[data-rar=arcana]::after,.vx-item[data-rar=ancient]::after,.vx-item[data-rar=cheat]::after,.vx-item[data-rar=secret]::after{transition:transform var(--vx-d-flip) var(--vx-e-out)}
@media (hover:hover){
  .vx-item[data-rar=arcana]:hover::after,.vx-item[data-rar=ancient]:hover::after,.vx-item[data-rar=cheat]:hover::after,.vx-item[data-rar=secret]:hover::after{transform:translateX(120%)}
  .vx-item.link:hover{transform:translateY(-2px);border-color:var(--vx-ln-3)}
}
.vx-item.is-new::after{animation:vx-sweep 900ms var(--vx-e-out) 1}
@keyframes vx-sweep{to{transform:translateX(120%)}}
.vx-item[data-rar=cheat].is-new .strip{animation:vx-glitch 480ms steps(6) 1}
@keyframes vx-glitch{0%{transform:translateY(0)}50%{transform:translateY(18px)}100%{transform:translateY(0)}}
.vx-item.is-equipped{border-color:var(--vx-ok)}
.vx-item.is-locked .slot,.vx-item.is-locked .nm,.vx-item.is-locked .af{opacity:.5}
.vx-item.is-listed .price{color:var(--vx-ink-3)}
.vx-item .lock{position:absolute;top:10px;right:10px;color:var(--vx-ink-3);z-index:4}
/* перевертання */
.vx-item.flip{transform-style:preserve-3d;transition:transform var(--vx-d-flip) var(--vx-e-out)}
.vx-item.flip[data-face=back]{transform:rotateY(180deg)}
.vx-item .back{position:absolute;inset:0;padding:12px;transform:rotateY(180deg);backface-visibility:hidden;background:var(--vx-sf-1);display:flex;flex-direction:column;gap:6px;z-index:5}
.vx-item.flip>*:not(.back){backface-visibility:hidden}
/* розміри */
.vx-item[data-size=s]{width:64px;height:64px;padding:0;gap:0;border-radius:12px;display:grid;place-items:center;flex:none}
.vx-item[data-size=s] .slot{width:100%;height:100%;border-radius:12px}
.vx-item[data-size=s] .slot .vi{width:32px;height:32px}
.vx-item[data-size=s] .meta,.vx-item[data-size=s] .nm,.vx-item[data-size=s] .rr,.vx-item[data-size=s] .af,.vx-item[data-size=s] .ft{display:none}
.vx-item[data-size=l]{width:260px;padding:16px}
.vx-item[data-size=l] .slot{width:112px;height:112px;border-radius:24px}
.vx-item[data-size=l] .slot .vi{width:64px;height:64px}
.vx-item[data-size=l] .nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vx-item[data-size=xl]{width:320px;padding:20px}
.vx-item[data-size=xl] .slot{width:140px;height:140px;border-radius:28px}
.vx-item[data-size=xl] .slot .vi{width:80px;height:80px}
.vx-item[data-size=xl] .nm{white-space:normal;font-size:var(--vx-t-h2)}
.vx-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:12px}
@media (max-width:400px){.vx-items{grid-template-columns:1fr 1fr;gap:var(--vx-sp-3)}.vx-item .slot{width:56px;height:56px}.vx-item .slot .vi{width:36px;height:36px}}

/* ================= 4.13 ранг · 4.14 рівень · 4.15 прогрес/кільце ================= */
.vx-rank{--s:40px;position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);color:var(--vx-rc-ink,var(--vx-ink-1));
  font:800 max(12px,calc(var(--s)*.38))/1 var(--vx-f-text);font-variant-numeric:tabular-nums;flex:none}
.vx-rank svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:var(--vx-rc-soft,var(--vx-sf-2));stroke:var(--vx-rc,var(--vx-ln-3));stroke-width:1.5}
.vx-rank>span{position:relative;z-index:1}
.vx-rank[data-size=s]{--s:28px}.vx-rank[data-size=l]{--s:56px}.vx-rank[data-size=xl]{--s:88px}
.vx-rank[data-size=xl]{font-family:var(--vx-f-display);font-weight:700;font-size:30px}
.vx-rank[data-size=xl] svg{stroke-width:1.2}
.vx-progress{--p:0;position:relative;height:8px;border-radius:999px;background:var(--vx-sf-2);overflow:hidden;flex:1;min-width:40px}
.vx-progress>i{position:absolute;inset:0;border-radius:inherit;background:var(--vx-xp);transform-origin:left;transform:scaleX(var(--p));transition:transform var(--vx-d-bar) var(--vx-e-out)}
.vx-progress>i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);opacity:0}
.vx-progress.is-changed>i::after{animation:vx-bar-shine var(--vx-d-bar) var(--vx-e-out) 1}
@keyframes vx-bar-shine{0%{opacity:1;transform:translateX(-100%)}100%{opacity:0;transform:translateX(100%)}}
.vx-progress[data-tone=bp]>i{background:var(--vx-bp)} .vx-progress[data-tone=acc]>i{background:var(--vx-acc)} .vx-progress[data-tone=ok]>i{background:var(--vx-ok)}
.vx-progress[data-tone=gold]>i{background:var(--vx-gold)} .vx-progress[data-tone=rar]>i{background:var(--vx-rc)}
.vx-progress.hero{height:12px}
.vx-progress.thin{height:6px}
.vx-prog-row{display:flex;align-items:center;gap:10px;min-width:0}
.vx-prog-row .lbl{font:700 var(--vx-t-small)/1 var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-ink-3);white-space:nowrap;flex:none}
.vx-prog-row .lbl.ok{color:var(--vx-ok)}
.vx-ring{--p:0;--s:64px;--w:5px;position:relative;width:var(--s);height:var(--s);display:grid;place-items:center;flex:none}
.vx-ring>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.vx-ring circle{fill:none;stroke-width:var(--w)}
.vx-ring .tr{stroke:var(--vx-sf-2)}
.vx-ring .fg{stroke:var(--vx-xp);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p)*100);transition:stroke-dashoffset var(--vx-d-reward) var(--vx-e-out)}
.vx-ring[data-tone=bp] .fg{stroke:var(--vx-bp)} .vx-ring[data-tone=acc] .fg{stroke:var(--vx-acc)} .vx-ring[data-tone=ok] .fg{stroke:var(--vx-ok)}
.vx-ring[data-size=s]{--s:28px;--w:3px} .vx-ring[data-size=m]{--s:40px;--w:4px} .vx-ring[data-size=l]{--s:64px;--w:5px} .vx-ring[data-size=xl]{--s:112px;--w:6px}
.vx-ring>b{font:800 var(--vx-t-num-m)/1 var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-ink-1);position:relative;z-index:1}
.vx-ring[data-size=s]>b{font-size:12px}
.vx-level{position:relative;width:44px;height:44px;flex:none;display:inline-block}
.vx-level .av{position:absolute;inset:4px;border-radius:50%;background:var(--vx-sf-3);overflow:hidden;display:grid;place-items:center;color:var(--vx-ink-3)}
.vx-level .av img{width:100%;height:100%;object-fit:cover;display:block}
.vx-level .av .vi{width:20px;height:20px}
.vx-level .vx-ring{--s:44px;--w:3px;position:absolute;inset:0}
.vx-level .lv{position:absolute;right:-4px;bottom:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--vx-sf-3);border:1px solid var(--vx-ln-3);
  font:800 12px/18px var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-ink-1);text-align:center;box-sizing:border-box;z-index:1}
.vx-level .cl{position:absolute;right:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--vx-ok);border:2px solid var(--vx-bg-0);z-index:1}
.vx-level[data-size=l]{width:96px;height:96px}
.vx-level[data-size=l] .vx-ring{--s:96px;--w:5px}
.vx-level[data-size=l] .av{inset:7px}
.vx-level[data-size=l] .lv{min-width:26px;height:26px;font-size:13px;line-height:24px;right:-2px;bottom:-2px}

/* ================= 4.16 ладдер · 4.17 тікер · 4.18 countdown ================= */
.vx-lb{display:flex;align-items:center;gap:10px;height:44px;min-height:44px;flex:none;padding:0 12px;border-radius:10px;color:var(--vx-ink-2);text-decoration:none;box-sizing:border-box;transition:background-color var(--vx-d-2)}
@media (hover:hover){.vx-lb:hover{background:var(--vx-sf-2)}}
.vx-lb:active{background:var(--vx-sf-3)}
.vx-lb .n{width:28px;text-align:center;font:800 14px/1 var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-ink-3);flex:none;display:inline-grid;place-items:center}
.vx-lb .av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;background:var(--vx-sf-2)}
.vx-lb .nick{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--vx-ink-1)}
.vx-lb .val{font:500 var(--vx-t-num-m)/1 var(--vx-f-num);font-variant-numeric:tabular-nums;color:var(--vx-gold);white-space:nowrap;flex:none}
.vx-lb .val.gem{color:var(--vx-gem)} .vx-lb .val.xp{color:var(--vx-acc-ink)}
.vx-lb.me{border:1px solid var(--vx-ln-acc);background:var(--vx-acc-soft)}
.vx-lb.me.sticky{position:sticky;bottom:0;z-index:var(--vx-z-raised);background:color-mix(in srgb,var(--vx-acc) 14%,var(--vx-sf-1))}
.vx-lbs{display:flex;flex-direction:column;gap:2px}
.vx-lbs.long{content-visibility:auto;contain-intrinsic-size:auto 44px}
.vx-ticker{display:flex;align-items:center;gap:18px;height:36px;padding:0 14px;border-radius:10px;background:var(--vx-bg-1);border:1px solid var(--vx-ln-1);
  font:700 var(--vx-t-small)/1 var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-ink-2);overflow:hidden;white-space:nowrap;box-sizing:border-box}
.vx-ticker>span{display:inline-flex;align-items:center;gap:6px;flex:none;transition:opacity 200ms}
.vx-ticker>span.out{opacity:0}
.vx-ticker .vi{width:14px;height:14px;color:var(--vx-acc-ink)}
.vx-ticker b{color:var(--vx-gold)}
@media (max-width:760px){.vx-ticker>span:not(.on){display:none}.vx-ticker>span.on{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}}
.vx-cd{font-variant-numeric:tabular-nums;font-weight:800;color:var(--vx-ink-1);white-space:nowrap}
.vx-cd.soon{color:var(--vx-warn)}
.vx-cd.over{color:var(--vx-ink-3)}

/* ================= 4.19 нагорода · квест · стрік ================= */
.vx-reward{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:96px;min-height:120px;padding:12px 8px 10px;border-radius:12px;background:var(--vx-sf-1);
  border:1px solid var(--vx-ln-1);text-align:center;flex:none;box-sizing:border-box;scroll-snap-align:center}
.vx-reward .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--vx-rc-soft,var(--vx-sf-2));color:var(--vx-rc-ink,var(--vx-ink-2))}
.vx-reward .ic .vi{width:22px;height:22px}
.vx-reward .v{font:800 14px/1.1 var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-ink-1);overflow-wrap:anywhere}
.vx-reward .l{font:700 12px/1.2 var(--vx-f-text);color:var(--vx-ink-3);text-transform:uppercase;letter-spacing:.05em}
.vx-reward .lock{color:var(--vx-ink-3)}
.vx-reward[data-state=locked]{opacity:.5}
.vx-reward[data-state=ready]{border-color:var(--vx-ok);box-shadow:0 0 20px -8px var(--vx-ok)}
.vx-reward[data-state=ready].pop{animation:vx-pop 360ms var(--vx-e-spring)}
.vx-reward[data-state=claimed]{opacity:.6}
.vx-reward[data-state=claimed] .v::before{content:"✓ ";color:var(--vx-ok)}
.vx-reward .vx-btn{margin-top:auto}
.vx-reward .tier{position:absolute;top:-8px;left:50%;transform:translateX(-50%);padding:2px 8px;border-radius:999px;background:var(--vx-sf-3);border:1px solid var(--vx-ln-2);
  font:800 12px/1.2 var(--vx-f-text);color:var(--vx-ink-3);white-space:nowrap}
.vx-reward.is-current{border-color:var(--vx-ln-acc)}
.vx-rewards{display:flex;gap:10px;overflow-x:auto;padding:10px 4px 6px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.vx-rewards::-webkit-scrollbar{display:none}
.vx-quest{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:56px;padding:8px 0}
.vx-quest+.vx-quest{border-top:1px solid var(--vx-ln-1)}
.vx-quest .ic{width:40px;height:40px;border-radius:10px;background:var(--vx-sf-2);display:grid;place-items:center;color:var(--vx-acc-ink)}
.vx-quest .t{display:flex;flex-direction:column;gap:5px;min-width:0}
.vx-quest .t .nm{font-weight:700;color:var(--vx-ink-1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.vx-quest .t .vx-prog-row .lbl{color:var(--vx-ink-3)}
.vx-quest .r{display:flex;align-items:center;gap:10px;white-space:nowrap}
.vx-quest .xp{font:800 13px/1 var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-gold)}
.vx-quest .done{color:var(--vx-ok);display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:13px}
.vx-quest .wait{color:var(--vx-ink-3);display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:13px}
.vx-quest.is-done .ic{background:color-mix(in srgb,var(--vx-ok) 14%,transparent);color:var(--vx-ok)}
.vx-quest.is-claimed{opacity:.55}
@media (max-width:420px){.vx-quest{grid-template-columns:40px minmax(0,1fr)}.vx-quest .r{grid-column:2;justify-content:flex-start}}
.vx-streak{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vx-streak .d{width:40px;height:40px;border-radius:10px;background:var(--vx-sf-2);border:1px solid var(--vx-ln-1);display:grid;place-items:center;
  font:800 13px/1 var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-ink-3);box-sizing:border-box;transition:background-color var(--vx-d-3),border-color var(--vx-d-3),color var(--vx-d-3)}   /* A-VIS-05: ink-3 */
.vx-streak .d.on{background:color-mix(in srgb,var(--vx-gold) 18%,var(--vx-sf-2));border-color:color-mix(in srgb,var(--vx-gold) 50%,transparent);color:var(--vx-gold)}
.vx-streak .d.now{border-color:var(--vx-gold);box-shadow:0 0 16px -4px var(--vx-gold);color:var(--vx-ink-1)}
.vx-streak .d.chest{color:var(--vx-gold)}
.vx-streak .d .vi{width:20px;height:20px}
.vx-streak .d.flip{animation:vx-flip var(--vx-d-flip) var(--vx-e-out) 1}
@keyframes vx-flip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
.vx-streak .cnt{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font:800 18px/1 var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-gold)}
.vx-streak .cnt .vi{width:18px;height:18px;stroke-width:2;color:var(--vx-gold)}
.vx-streak .cnt.pop{animation:vx-pop 360ms var(--vx-e-spring)}
@media (max-width:520px){.vx-streak .d{width:34px;height:34px}.vx-streak{gap:4px}}
@keyframes vx-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.vx-pop{animation:vx-pop 360ms var(--vx-e-spring)}

/* ================= 4.20 «Сегодня» ================= */
.vx-today .row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0}
.vx-today .row+.row{border-top:1px solid var(--vx-ln-1)}
.vx-today .row .ic{width:40px;height:40px;border-radius:10px;background:var(--vx-sf-2);display:grid;place-items:center;color:var(--vx-acc-ink)}
.vx-today .row .ic.gold{color:var(--vx-gold)}
.vx-today .row .t{min-width:0;display:flex;flex-direction:column;gap:6px}
.vx-today .row .t b{color:var(--vx-ink-1)}
.vx-today .row .r{white-space:nowrap;display:flex;align-items:center;gap:8px}
@media (max-width:520px){.vx-today .row{grid-template-columns:40px minmax(0,1fr)}.vx-today .row .r{grid-column:2;justify-content:flex-start;flex-wrap:wrap}}
.vx-today.compact .row{padding:6px 0}

/* ================= 4.21 планка гри · 4.22 автомат ================= */
.vx-gamebar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vx-gamebar .vx-chip.is-on{background:var(--vx-acc-soft);color:var(--vx-acc-ink);border-color:var(--vx-ln-acc)}
.vx-cab{position:relative;width:100%;max-width:var(--vx-container-game);margin:0 auto;border-radius:20px;background:var(--vx-sf-bezel);box-shadow:var(--vx-el-cab);padding:0 12px 12px;
  container-type:inline-size;box-sizing:border-box}
.vx-cab-marquee{display:flex;align-items:center;gap:12px;height:48px;padding:0 6px;white-space:nowrap;min-width:0}
.vx-cab-marquee h1{flex:1 1 auto;min-width:0;font:600 clamp(15px,14px + .6cqw,22px)/1 var(--vx-f-display);color:var(--vx-ink-1);text-shadow:0 0 24px var(--vx-acc-glow);overflow:hidden;text-overflow:ellipsis;margin:0}   /* A-VIS-08: назва бере весь вільний простір; джекпот у короткому форматі (макрос cab → fmt) */
.vx-cab-marquee .rtp{font:700 12px/1 var(--vx-f-text);color:var(--vx-ink-3);text-transform:uppercase;letter-spacing:.06em}
.vx-cab-marquee .jp{display:inline-flex;align-items:center;gap:6px;font:800 13px/1 var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-gold);margin-left:auto}
.vx-cab-marquee .jp .vi{width:14px;height:14px}
.vx-cab-marquee .ctl{display:inline-flex;gap:4px}
.vx-cab-marquee .ctl .vx-btn{width:36px;height:36px;min-width:0;padding:0;border-radius:9px}
.vx-cab-marquee .led{display:none}
.vx-cab.is-win .vx-cab-marquee .led{display:inline-block}
.vx-cab-screen{position:relative;overflow:hidden;border-radius:14px;background:var(--vx-sf-cab) radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--vx-acc) 10%,transparent),transparent 70%);
  border:1px solid var(--vx-ln-1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 12px 40px -10px rgba(0,0,0,.8)}
.vx-cab-screen .flash{position:absolute;inset:0;background:var(--vx-acc-soft);opacity:0;pointer-events:none;z-index:6}
.vx-cab-win{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:var(--vx-scrim);opacity:0;pointer-events:none;transition:opacity var(--vx-d-3)}
.vx-cab-win.show{opacity:1;pointer-events:auto}
.vx-cab-win .box{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:16px}
.vx-cab-win .tier{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--vx-rc-soft);border:1px solid var(--vx-rc);color:var(--vx-rc-ink);
  font:700 12px/1 var(--vx-f-display);letter-spacing:.14em;text-transform:uppercase}
.vx-cab-win .amt{font:800 clamp(40px,8cqw,80px)/1 var(--vx-f-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--vx-gold);text-shadow:0 0 30px color-mix(in srgb,var(--vx-gold) 45%,transparent)}
.vx-cab-win .mult{font:800 var(--vx-t-num-l)/1 var(--vx-f-text);color:var(--vx-ink-1)}
.vx-cab-win .hint{font:700 12px/1 var(--vx-f-text);color:var(--vx-ink-3);text-transform:uppercase;letter-spacing:.08em;margin-top:8px}
.vx-cab-win.show .box{animation:vx-pop 360ms var(--vx-e-spring)}
.vx-cab-banner{position:absolute;top:10px;left:50%;transform:translate(-50%,-140%);z-index:4;padding:8px 18px;border-radius:999px;background:var(--vx-rc-soft);border:1px solid var(--vx-rc);color:var(--vx-rc-ink);
  font:700 13px/1 var(--vx-f-display);letter-spacing:.12em;text-transform:uppercase;transition:transform var(--vx-d-3) var(--vx-e-out),visibility 0s linear var(--vx-d-3);white-space:nowrap;visibility:hidden}
.vx-cab-banner.show{transform:translate(-50%,0);visibility:visible;transition-delay:0s} /*G1*/
.vx-cab-result{display:flex;align-items:center;justify-content:safe center;gap:10px;height:28px;margin-top:8px;font:800 14px/1 var(--vx-f-text);font-variant-numeric:tabular-nums;color:var(--vx-ink-3);white-space:nowrap;overflow:hidden}
.vx-cab-result>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /*G1*/
.vx-cab-result .win{color:var(--vx-gold)}
.vx-cab-result .fs{color:var(--vx-acc-ink)}
.vx-cab-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:10px;padding:12px;border-radius:14px;background:rgba(0,0,0,.25)}
.vx-cab-panel .betrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.vx-cab-panel .betrow .vx-field{width:200px}
/*G1*/
.vx-cab-panel .betrow{grid-column:1;grid-row:1}
.vx-cab-panel .hero{grid-column:2;grid-row:1/3;display:flex;align-items:center}
.vx-cab-panel .vx-gamebar{grid-column:1}
@container (max-width:640px){
  .vx-cab-panel{grid-template-columns:minmax(0,1fr)} /*G1*/
  .vx-cab-panel .betrow,.vx-cab-panel .hero,.vx-cab-panel .vx-gamebar{grid-column:1;grid-row:auto}
  .vx-cab-panel .hero .vx-btn{width:100%}
  .vx-cab-panel .betrow .vx-field{flex:1 1 100%;width:auto}
  .vx-cab-marquee .rtp,.vx-cab-marquee .jp .w{display:none}
  .vx-cab-marquee .ctl .vx-btn{width:32px;height:32px}
  .vx-cab-marquee{gap:8px}
}
@media (max-width:760px){.vx-cab.is-live .vx-cab-panel,.vx-cab.is-spinning .vx-cab-panel,.vx-cab.is-fs .vx-cab-panel{position:sticky;bottom:calc(var(--vx-dock-h) + 8px);z-index:var(--vx-z-sticky);background:var(--vx-sf-cab)}
  body.game .vx-cab.is-live~.vx-dock,body.game:has(.vx-cab.is-live) .vx-dock{transform:translateY(100%)}
  /*G1*/
  body.game:has(.vx-cab.is-live) .vx-cab.is-live .vx-cab-panel{bottom:calc(8px + env(safe-area-inset-bottom))}
  body.game:has(.vx-cab.is-live) #vx-toasts{top:calc(var(--vx-nav-h) + 8px);bottom:auto}}
/*G1*/
body.game:has(.vx-cab.is-live) .cw,body.game:has(.vx-cab.is-spinning) .cw{opacity:.35;pointer-events:none;transition:opacity var(--vx-d-2)}
@media (orientation:landscape) and (max-height:480px) and (max-width:1024px){body.game .vx-cab.is-live~.vx-dock,body.game:has(.vx-cab.is-live) .vx-dock{transform:translateX(-100%)}}
.vx-cab-foot{margin-top:10px}
.vx-cab-foot .vx-stats{grid-template-columns:repeat(4,1fr)}
@container (max-width:640px){.vx-cab-foot .vx-stats{grid-template-columns:1fr 1fr}}
.vx-cab-foot .vx-stat{background:rgba(0,0,0,.25);border-color:transparent;padding:10px 12px}
.vx-cab-foot .vx-stat .v{font-size:18px}

/* ================= 4.23 док · drawer · chatdock (елементи додає A2; стилі — тут) ================= */
/* A-VIS-01: док — теж <nav> у body; top:auto / padding / border-bottom / gap / white-space явно, щоб жодне правило шапки його не дістало */
.vx-dock{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:var(--vx-z-dock);display:none;grid-template-columns:repeat(5,1fr);gap:0;height:var(--vx-dock-h);padding:0 0 env(safe-area-inset-bottom);
  background:var(--vx-bg-1);border:0;border-top:1px solid var(--vx-ln-1);white-space:normal;box-sizing:border-box;transition:transform var(--vx-d-3) var(--vx-e-out);view-transition-name:dock}
@media (max-width:760px), (orientation:landscape) and (max-height:480px) and (max-width:1024px){.vx-dock{display:grid}}
.vx-dock a,.vx-dock button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;color:var(--vx-ink-3);
  font:700 var(--vx-t-deco)/1 var(--vx-f-text);   /* підпис 11 — лише aria-hidden .vx-dock-lbl (§4.23) */
 letter-spacing:.02em;text-decoration:none;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vx-dock a .vi,.vx-dock button .vi{width:24px;height:24px}
.vx-dock .vx-dock-lbl{pointer-events:none}
.vx-dock a.is-on,.vx-dock button.is-on{color:var(--vx-acc-ink)}
.vx-dock a.is-on::before,.vx-dock button.is-on::before{content:"";position:absolute;inset:6px 8px;border-radius:12px;background:var(--vx-acc-soft);z-index:-1}
.vx-dock .today .vi{width:28px;height:28px}
.vx-dock .cl{position:absolute;top:8px;right:calc(50% - 16px);width:9px;height:9px;border-radius:50%;background:var(--vx-ok);border:2px solid var(--vx-bg-1)}
.vx-dock .cnt{position:absolute;top:4px;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--vx-live);color:var(--vx-ink-on-acc);font:800 12px/18px var(--vx-f-text);text-align:center}
.vx-dock.is-hidden{transform:translateY(100%)}
/* ландшафт телефона (812×375, MOB-10, A-VIS-04): лівий стовпчик 56 px під шапкою; main{padding-left:56px} — у base.css */
@media (orientation:landscape) and (max-height:480px) and (max-width:1024px){
  .vx-dock{left:0;right:auto;top:var(--vx-nav-h);bottom:0;width:calc(56px + env(safe-area-inset-left));height:auto;grid-template-columns:1fr;grid-auto-rows:1fr;padding:0 0 0 env(safe-area-inset-left);border-top:0;border-right:1px solid var(--vx-ln-1)}
  .vx-dock .vx-dock-lbl{display:none}
  .vx-dock.is-hidden{transform:translateX(-100%)}
}
/* drawer (A2): нативний <dialog class="vx-drawer"> — геометрія/sheet у base.css (оболонка); тут лише пункти. Класи .vx-dr-* (A-VIS-02: голі .it/.sep/.lbl перекривав інлайн сторінок) */
.vx-drawer a.vx-dr-it,.vx-drawer button.vx-dr-it{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--vx-ink-2);font:700 14px/1.2 var(--vx-f-text);
  text-decoration:none;background:none;border:0;margin:0;cursor:pointer;text-align:left;width:100%;box-sizing:border-box;transition:background-color var(--vx-d-2),color var(--vx-d-2)}
.vx-drawer .vx-dr-it .vi{width:18px;height:18px;color:var(--vx-ink-3);flex:none}
@media (hover:hover){.vx-drawer .vx-dr-it:hover{background:var(--vx-sf-2);color:var(--vx-ink-1)}}
.vx-drawer .vx-dr-it:active{background:var(--vx-sf-3)}
.vx-drawer .vx-dr-it.is-on{background:var(--vx-acc-soft);color:var(--vx-acc-ink)}
.vx-drawer .vx-dr-it.is-on .vi{color:var(--vx-acc-ink)}
.vx-drawer .vx-dr-sep{height:1px;background:var(--vx-ln-1);margin:6px 8px;flex:none}
.vx-drawer .vx-dr-lbl{font:700 var(--vx-t-cap)/1 var(--vx-f-text);text-transform:uppercase;letter-spacing:.06em;color:var(--vx-ink-3);padding:10px 12px 4px}   /* A-VIS-05: ink-3 (7.2:1), не ink-4 */
.vx-chatdock{position:fixed;right:18px;bottom:18px;z-index:var(--vx-z-dock);transition:opacity var(--vx-d-3)}
.vx-chatdock.is-quiet{opacity:.4;pointer-events:none}
@media (max-width:760px), (orientation:landscape) and (max-height:480px) and (max-width:1024px){.vx-chatdock{display:none}}

/* ================= 4.24 церемонія ================= */
.vx-ceremony{background:transparent;border:0;padding:0;margin:auto;width:min(420px,calc(100vw - 32px));max-width:none;color:var(--vx-ink-2);font:500 var(--vx-t-body)/1.5 var(--vx-f-text)}
.vx-ceremony::backdrop{background:var(--vx-scrim)}
.vx-ceremony .box{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:32px 24px;border-radius:20px;background:var(--vx-sf-3);border:1px solid var(--vx-ln-acc);box-shadow:var(--vx-el-2)}
.vx-ceremony[open] .box{animation:vx-pop 360ms var(--vx-e-spring)}
.vx-ceremony .rankpop{animation:vx-pop 360ms var(--vx-e-spring) var(--vx-d-bar) both}
.vx-ceremony .lvl{font:600 var(--vx-t-display)/1 var(--vx-f-serif);font-variant-numeric:lining-nums;color:var(--vx-ink-1);text-shadow:0 0 24px var(--vx-acc-glow);animation:vx-pop 360ms var(--vx-e-spring) calc(var(--vx-d-bar) + 200ms) both}
.vx-ceremony .sum{font:800 var(--vx-t-num-xl)/1 var(--vx-f-display);color:var(--vx-gold);text-shadow:0 0 24px color-mix(in srgb,var(--vx-gold) 40%,transparent)}
.vx-ceremony .unl{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;animation:vx-fade 220ms var(--vx-e-out) calc(var(--vx-d-bar) + 400ms) both}
.vx-ceremony .cta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;animation:vx-fade 220ms var(--vx-e-out) calc(var(--vx-d-bar) + 500ms) both}
.vx-ceremony .hint{font:700 12px/1 var(--vx-f-text);color:var(--vx-ink-3);text-transform:uppercase;letter-spacing:.08em}   /* A-VIS-05 */
@keyframes vx-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ================= пагінація ================= */
.vx-pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:var(--vx-sp-3) 0}
.vx-pager a,.vx-pager button,.vx-pager span{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border-radius:10px;background:var(--vx-sf-1);border:1px solid var(--vx-ln-1);
  color:var(--vx-ink-2);font:700 14px/1 var(--vx-f-text);font-variant-numeric:tabular-nums;text-decoration:none;cursor:pointer;box-sizing:border-box;margin:0}
.vx-pager .is-on{background:var(--vx-acc-soft);color:var(--vx-acc-ink);border-color:var(--vx-ln-acc)}
.vx-pager span.dots{border:0;background:none;color:var(--vx-ink-3);cursor:default}
.vx-pager [aria-disabled=true]{opacity:.4;pointer-events:none}
@media (max-width:760px),(pointer:coarse){.vx-pager a,.vx-pager button{min-width:44px;height:44px}}   /* тап ≥ 44 (MOB-02), і ландшафт телефона */

/* ================= reveal-on-scroll (opt-in, §6.3) ================= */
[data-rv]>.vx-rv{opacity:0;transform:translateY(10px)}
[data-rv]>.vx-rv.in{opacity:1;transform:none;transition:opacity var(--vx-d-3) var(--vx-e-out),transform var(--vx-d-3) var(--vx-e-out);transition-delay:var(--rv-delay,0ms)}

/* ================= 6.9 reduced motion: те, що не покрито токенами ================= */
@media (prefers-reduced-motion:reduce){
  .vx-btn.is-busy::before{animation:none;border-right-color:var(--vx-ln-3)}
  .vx-toast,.vx-toast.out,.vx-dlg[open],.vx-dlg.closing,.vx-ceremony[open] .box,.vx-cab-win.show .box,.vx-reward.pop,.vx-streak .cnt.pop,.vx-pop{animation-duration:1ms}
  .vx-ceremony .rankpop,.vx-ceremony .lvl,.vx-ceremony .unl,.vx-ceremony .cta{animation:vx-fade 120ms both}
  .vx-item.is-new::after,.vx-item[data-rar=cheat].is-new .strip,.vx-streak .d.flip,.vx-progress.is-changed>i::after{animation:none}
  .vx-item::after{transition:none}
  [data-rv]>.vx-rv{opacity:1;transform:none;transition:none}
}

/* ============================================================
   ЛЕГАСІ-КІТ site_base.html (A2, ARC-02: перенесено 1:1 у @layer kit; порядок відносно vrth.css той самий).
   Живе до міграції останньої сторінки (DESIGN §9.2 №1). Нові сторінки ці класи не використовують.
   ============================================================ */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.32);transform:scale(0);animation:rippleA .6s ease-out;pointer-events:none;z-index:1}
@keyframes rippleA{to{transform:scale(2.5);opacity:0}}
.btn,a.btn,.v-btn,.cta,.g-go,.crate-open,.cp-open,.ow-btn,.custbtn,.rv-btn{position:relative;overflow:hidden}
a.btn{display:inline-block;background:linear-gradient(135deg,var(--acc),#7c3aed);color:#fff;font-weight:800;text-decoration:none;padding:12px 22px;border-radius:14px;
  box-shadow:0 10px 28px color-mix(in srgb,var(--acc) 30%,transparent);transition:transform .12s}   /* PM-04: box-shadow не анімується (§6.1) */
a.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px color-mix(in srgb,var(--acc) 45%,transparent)}
a.btn:active{transform:scale(.97)}
.v-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:14px;line-height:1;white-space:nowrap;
  padding:11px 18px;border-radius:13px;text-decoration:none;color:#fff;background:#161b2e;box-shadow:0 6px 18px -8px #0009;transition:transform .12s,background-color .16s}
.v-btn:hover{transform:translateY(-2px)}
.v-btn:active{transform:scale(.97)}
.v-btn:disabled,.v-btn.is-disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.v-btn.primary{background:linear-gradient(135deg,var(--acc),#7c3aed);box-shadow:0 10px 26px -8px color-mix(in srgb,var(--acc) 50%,transparent)}
.v-btn.primary:hover{box-shadow:0 16px 34px -8px color-mix(in srgb,var(--acc) 62%,transparent)}
.v-btn.ghost{background:transparent;color:color-mix(in srgb,var(--acc) 88%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--acc) 42%,transparent)}
.v-btn.ghost:hover{background:color-mix(in srgb,var(--acc) 12%,transparent);color:#fff}
.v-btn.ok{background:linear-gradient(135deg,#22c55e,#16a34a);color:#04140a;box-shadow:0 10px 24px -8px #22c55e88}
.v-btn.danger{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 10px 24px -8px #ef444488}
.v-btn.gold{background:linear-gradient(135deg,#ffd86b,#ffb020);color:#1a1205;box-shadow:0 10px 24px -8px #ffb02088}
.v-btn.sm{padding:8px 13px;font-size:12.5px;border-radius:10px;gap:5px}
.v-btn.lg{padding:14px 26px;font-size:15.5px;border-radius:15px}
.v-btn.block{display:flex;width:100%}
.v-btn .ic{font-size:1.06em;line-height:1}
.v-card{position:relative;border-radius:18px;padding:16px 18px;background:linear-gradient(160deg,#0e1330ee,#0a0b18ee);border:1px solid #ffffff12;box-shadow:0 16px 40px -16px #000a}
.v-card.hov{transition:transform .16s,border-color .16s}
.v-card.hov:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 45%,transparent);box-shadow:0 22px 48px -18px color-mix(in srgb,var(--acc) 40%,#000)}
.v-card.glow{box-shadow:0 16px 40px -16px #000a,0 0 0 1px color-mix(in srgb,var(--acc) 22%,transparent)}
.v-sec{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:22px 0 11px}
.v-sec h2{font-size:17px;font-weight:900;margin:0;color:#fff;display:flex;align-items:center;gap:8px}
.v-sec .sub{font-size:11.5px;color:#8b97b6}
.v-sec .cnt{font-size:12px;font-weight:900;color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,#0a0e1c);border-radius:999px;padding:2px 9px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 30%,transparent)}
.v-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;background:#0e1326;color:#c7cfe6;border:1px solid #ffffff12}
.v-chip.acc{color:color-mix(in srgb,var(--acc) 88%,#fff);border-color:color-mix(in srgb,var(--acc) 35%,transparent);background:color-mix(in srgb,var(--acc) 10%,#0a0e1c)}
.v-tag{display:inline-flex;align-items:center;font-size:.58rem;font-weight:900;text-transform:uppercase;letter-spacing:.6px;padding:2px 7px;border-radius:6px;background:#1e2a4a;color:#9fc4ff}
.v-inp{width:100%;background:#0a0e1f;border:1px solid #ffffff16;border-radius:12px;padding:11px 14px;color:#e8ecf8;font:600 14px inherit;outline:none;transition:border-color .15s}
.v-inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.v-stat{background:linear-gradient(160deg,#0e1330,#0a0b18);border:1px solid #ffffff10;border-radius:14px;padding:13px 15px}
.v-stat .n{font-size:21px;font-weight:900;color:#fff;line-height:1}
.v-stat .l{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#8b97b6;margin-top:5px}
.v-grid{display:grid;gap:12px}
.v-grid.c2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.v-grid.c3{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.v-grid.c4{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
/* тумблер легасі — лише site_owner (.flag .tgl); оболонка (drawer аватара, дзвінок) з A3 використовує .vx-tgl (A-VIS-02) */
.flag .tgl{margin-left:auto;width:40px;height:23px;border-radius:999px;background:#2a3350;position:relative;transition:background-color .2s;flex:none;display:inline-block}
.flag .tgl::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .2s}
.flag .tgl.on{background:linear-gradient(90deg,var(--acc),#a855f7)}
.flag .tgl.on::after{transform:translateX(17px)}
}