/* ============================================================
   VRTH — общий дизайн-кит казино-игр. Подключается из site_base.html.
   Все компоненты тонируются через --acc (задаётся в {% block accent %}).
   Префикс .g- = game component.
   ============================================================ */

/* ---------- единые дизайн-токены (премиум-апгрейд) ---------- */
:root{
  --r-rare:#22d3ee; --r-mythical:#9c5cff; --r-legendary:#f5d020;
  --r-immortal:#ef4444; --r-arcana:#ff4dd2; --r-cheat:#39ff14;
  --grad-gold:linear-gradient(135deg,#f59e0b,#d97706);
  --grad-purple:linear-gradient(135deg,#7c3aed,#a855f7);
  --glass:rgba(13,14,24,.72); --glass-bd:1px solid rgba(255,255,255,.06);
  --spring:cubic-bezier(.22,1.2,.32,1);
}
.glass{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:var(--glass-bd)}

/* ===== дизайн-токены (консистентность по сайту) ===== */
:root{
  --vt-bg:#04050d; --vt-surface:#0c1026; --vt-surface-2:#0b0e1a; --vt-elev:#10142f;
  --vt-line:rgba(255,255,255,.10); --vt-line-soft:rgba(255,255,255,.06);
  --vt-text:#e7eeff; --vt-dim:#8b97b6; --vt-dim-2:#5d6a8c;
  --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:20px; --sp-5:28px;
  --rad-sm:10px; --rad:14px; --rad-lg:18px; --rad-xl:24px;
  --grad-cyan:linear-gradient(135deg,#06b6d4,#3b82f6);
  --grad-fire:linear-gradient(135deg,#ff5e00,#ffb300);
  --grad-holo:linear-gradient(120deg,#ff00cc,#3a86ff,#00ffc8,#ffd166,#ff00cc);
  --shadow-1:0 8px 22px #0008; --shadow-2:0 20px 50px -12px #000c;
}

/* ===== баннеры профиля (паттерны/градиенты, без загрузки файлов) ===== */
.pbn{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.pbn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,#0a0b18ee 98%)}
.pbn.b-aurora2{background:linear-gradient(120deg,#0e7d6e,#0a5a8c,#2a0a4d)}
.pbn.b-ember2 {background:linear-gradient(120deg,#3a0f0a,#7a1f0a,#1a0a0a)}
.pbn.b-royal  {background:linear-gradient(120deg,#3b0764,#7c3aed,#1e1b4b)}
.pbn.b-gold2  {background:linear-gradient(120deg,#3a2a08,#a9760b,#1a1205)}
.pbn.b-holo   {background:var(--grad-holo);background-size:300% 100%;animation:bnHolo 14s linear infinite}
@keyframes bnHolo{to{background-position:300% 0}}
.pbn.b-stars  {background:radial-gradient(1200px 320px at 50% -45%,#1a2350,#06070f)}
.pbn.b-stars::before{content:"";position:absolute;inset:0;opacity:.7;
  background-image:radial-gradient(1px 1px at 20% 30%,#fff9,transparent),radial-gradient(1px 1px at 72% 48%,#fff6,transparent),
    radial-gradient(2px 2px at 45% 76%,#fff7,transparent),radial-gradient(1px 1px at 86% 24%,#fff6,transparent),radial-gradient(1px 1px at 12% 66%,#fff5,transparent);
  background-size:320px 200px}
.pbn.b-cyber  {background:#04141a}
.pbn.b-cyber::before{content:"";position:absolute;inset:0;opacity:.6;
  background-image:repeating-linear-gradient(90deg,#0aff9914 0 2px,transparent 2px 26px),repeating-linear-gradient(0deg,#0aff9910 0 2px,transparent 2px 26px)}

/* ---------- шапка игры ---------- */
.g-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.g-title { font-family:var(--font-display,'Manrope',sans-serif); font-size:1.62rem; font-weight:400;
  letter-spacing:.8px; line-height:1.12; text-transform:none;
  background:linear-gradient(90deg, var(--acc), #a855f7, var(--acc));
  background-size:200%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gShim 3s linear infinite;
  filter:drop-shadow(0 0 14px color-mix(in srgb, var(--acc) 45%, transparent)); }
@keyframes gShim { to { background-position:200%; } }
.g-sub { font-size:.72rem; color:#6b7794; font-weight:700; margin-top:2px; }
.g-sub b { color:var(--acc); }

.g-audio { display:flex; gap:8px; flex-shrink:0; }
.g-atog { width:40px; height:40px; border-radius:11px;
  background:#0a0e1ccc; border:1px solid color-mix(in srgb, var(--acc) 35%, transparent);
  color:var(--acc); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:.15s; position:relative; }
.g-atog:hover { background:color-mix(in srgb, var(--acc) 12%, transparent); transform:translateY(-1px); }
.g-atog.off { color:#475569; border-color:#ffffff14; }
.g-atog.off::after { content:''; position:absolute; left:7px; right:7px; top:50%; height:2px;
  background:#ef4444; transform:rotate(-32deg); border-radius:2px; }

/* ---------- статистика сессии ---------- */
.g-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:12px 0 4px; }
.g-stat { background:#0a0e1aa8; border:1px solid #ffffff10; border-radius:11px; padding:8px 6px; text-align:center; }
.g-stat .k { font-size:.56rem; letter-spacing:.8px; color:#64748b; text-transform:uppercase; font-weight:700; }
.g-stat .v { font-size:.92rem; font-weight:900; color:#cbd5e1; margin-top:2px; }
.g-stat .v.acc { color:var(--acc); }
.g-stat .v.up  { color:#22c55e; }
.g-stat .v.dn  { color:#ef4444; }

/* ---------- ставки ---------- */
.g-bets { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:10px 0 9px; }
.g-bets label { font-size:.8rem; color:#64748b; font-weight:700; }
/* аккуратные таб-кнопки ставок: неактивные монохромные, активная — акцентный градиент */
.g-qb { background:#0c1326; border:1px solid #ffffff14;
  color:#9fb2d8; font-weight:800; font-size:.74rem; padding:7px 13px; border-radius:9px; cursor:pointer;
  transition:transform .12s, border-color .15s, color .15s, background .15s; }
.g-qb:hover { border-color:#ffffff3a; color:#fff; transform:translateY(-1px); }
.g-qb:active { transform:scale(.95); }
.g-qb.active { color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #7c3aed));
  box-shadow:0 4px 14px color-mix(in srgb, var(--acc) 40%, transparent); }
.g-betinput { background:#0c1326; border:1px solid #ffffff1c;
  color:#fff; font-weight:700; padding:8px 12px; border-radius:9px; width:108px; transition:border-color .15s; }
.g-betinput:hover { border-color:#ffffff33; }
.g-betinput:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }

/* главная кнопка действия — компактнее, центрирована, дорогой глубокий градиент, физическое нажатие */
.g-go { display:block; width:100%; max-width:360px; margin:8px auto 0;
  background:linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 58%, #7c3aed));
  color:#04121a; border:none; font-size:1rem; font-weight:900;
  padding:14px; border-radius:14px; cursor:pointer; letter-spacing:.3px;
  transition:transform .12s, filter .18s, box-shadow .18s;
  box-shadow:0 8px 26px color-mix(in srgb, var(--acc) 32%, transparent); }
.g-go:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08);
  box-shadow:0 13px 34px color-mix(in srgb, var(--acc) 46%, transparent); }
.g-go:active:not(:disabled) { transform:scale(.96); }
.g-go:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }

.g-bal { text-align:center; margin-top:10px; font-size:.84rem; color:#64748b; }
.g-bal b { color:var(--acc); transition:color .2s; }
.g-info { text-align:center; font-size:.74rem; color:#64748b; margin-top:6px; }

/* подсветка баланса при изменении */
.bal-flash { animation:balFlash .7s ease-out; }
@keyframes balFlash {
  0%   { color:#fff; text-shadow:0 0 18px color-mix(in srgb, var(--acc) 80%, transparent); transform:scale(1.18); display:inline-block; }
  100% { color:var(--acc); text-shadow:none; transform:scale(1); }
}

/* ---------- тосты ---------- */
.g-toastwrap { position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.g-toast { display:flex; align-items:center; gap:9px; max-width:88vw;
  background:#0b1020f2; border:1px solid #ffffff1a; color:#e7eeff;
  font-weight:700; font-size:.86rem; padding:11px 16px; border-radius:13px;
  box-shadow:0 10px 30px #000a, inset 0 1px 0 #ffffff12;
  opacity:0; transform:translateY(14px) scale(.96); transition:.28s cubic-bezier(.2,.7,.2,1); }
.g-toast.show { opacity:1; transform:translateY(0) scale(1); }
.g-toast .g-tico { width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.74rem; flex-shrink:0; }
.g-toast.ok  { border-color:#22c55e55; } .g-toast.ok  .g-tico { background:#22c55e22; color:#22c55e; }
.g-toast.err { border-color:#ef444455; } .g-toast.err .g-tico { background:#ef444422; color:#ef4444; }
.g-toast.win { border-color:#f5d02066; } .g-toast.win .g-tico { background:#f5d02022; color:#f5d020; }
.g-toast.info .g-tico { background:#ffffff14; color:#9fb2d8; }

/* ---------- мобилка ---------- */
@media (max-width:560px) {
  .g-title { font-size:1.42rem; }
  .g-atog { width:36px; height:36px; }
  .g-stats { gap:5px; }
  .g-stat .v { font-size:.84rem; }
  .g-qb { padding:7px 11px; font-size:.78rem; }   /* крупнее тап-таргет */
  .g-betinput { flex:1; width:auto; min-width:84px; }
  .g-go { padding:15px; font-size:1.08rem; }       /* удобнее палец */
}

/* уважение к настройкам доступности */
@media (prefers-reduced-motion:reduce) {
  .g-title { animation:none; }
  .g-toast { transition-duration:.01ms; }
  .bal-flash { animation-duration:.01ms; }
}

/* ===== Косметика профиля: рамки аватара + фоны (премиум, общие) ===== */
.av-wrap.f-cyan::before    { background:conic-gradient(from 0deg,#00e5ff,#0aa6ff,#7cf6ff,#00e5ff); box-shadow:0 0 20px #00e5ff77; }
.av-wrap.f-frost::before   { background:conic-gradient(from 0deg,#dff6ff,#5fb8ff,#bfeaff,#7fd0ff,#dff6ff); box-shadow:0 0 22px #9fdcff88; }
.av-wrap.f-emerald::before { background:conic-gradient(from 0deg,#34d399,#059669,#a7f3d0,#10b981,#34d399); box-shadow:0 0 22px #34d39988; }
.av-wrap.f-gold::before    { background:conic-gradient(from 0deg,#ffd34d,#a9760b,#ffe9a6,#ffd34d); box-shadow:0 0 22px #ffd34d88; }
.av-wrap.f-sunset::before  { background:conic-gradient(from 0deg,#ff8a5c,#ff5f9e,#ffd36b,#ff7a45,#ff8a5c); box-shadow:0 0 24px #ff7a8e88; }
.av-wrap.f-fire::before    { background:conic-gradient(from 0deg,#ff5e00,#ffb300,#ff2d00,#ff7a18,#ff5e00); box-shadow:0 0 24px #ff5e0099; }
.av-wrap.f-plasma::before  { background:conic-gradient(from 0deg,#e879f9,#8b5cf6,#22d3ee,#e879f9); box-shadow:0 0 26px #c47dff99; }
.av-wrap.f-rainbow::before { background:conic-gradient(from 0deg,#ff00cc,#3a86ff,#00ffc8,#ffd166,#ff00cc); box-shadow:0 0 28px #ff4dd299; }
.av-wrap.f-void::before    { background:radial-gradient(circle,#c084fc,#3b0764); box-shadow:0 0 28px #a855f7bb; animation:pfPulse 3s ease-in-out infinite; }
@keyframes pfPulse { 50% { box-shadow:0 0 44px #a855f7; } }

/* Фоны: непрозрачная база (перекрывает блобы навбара) + слои в % → тянутся и на странице, и в мини-превью */
.pbg { position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
/* мини-превью фона в магазине/кастомизации: relative, БЕЗ отрицательного z-index
   (иначе превью уходит за фон карточки и видно только при :hover, когда у карточки появляется transform) */
.bgprev { position:relative; display:block; width:100%; overflow:hidden; border-radius:10px; }
.b-aurora {
  background:
    radial-gradient(130% 110% at 22% -18%, #16c9a8, transparent 60%),
    radial-gradient(120% 110% at 92% 8%, #1c7fd6, transparent 58%),
    radial-gradient(130% 120% at 55% 125%, #0d4f7a, transparent 62%),
    linear-gradient(160deg,#08263a,#04101c); }
.b-ocean {
  background:
    radial-gradient(130% 110% at 30% -20%, #1f9fe6, transparent 60%),
    radial-gradient(120% 110% at 88% 120%, #0a4fa0, transparent 60%),
    linear-gradient(180deg,#0a3566,#041427); }
.b-ember {
  background:
    radial-gradient(130% 110% at 50% -18%, #ff5a2c, transparent 60%),
    radial-gradient(110% 95% at 88% 110%, #c41e0e, transparent 60%),
    linear-gradient(170deg,#3a1208,#160808); }
.b-lava {
  background:
    radial-gradient(120% 100% at 25% 120%, #ff7a18, transparent 58%),
    radial-gradient(110% 95% at 82% -10%, #ffb300, transparent 55%),
    linear-gradient(180deg,#3a1505,#160803); }
.b-nebula {
  background:
    radial-gradient(130% 110% at 24% -16%, #8b3cff, transparent 60%),
    radial-gradient(120% 110% at 88% 22%, #e0379e, transparent 58%),
    radial-gradient(130% 120% at 55% 125%, #4316a0, transparent 62%),
    linear-gradient(160deg,#1f0a40,#0a0520); }
.b-cyber {
  background:
    radial-gradient(120% 100% at 12% -12%, #ff2bd0, transparent 58%),
    radial-gradient(120% 100% at 92% 10%, #16e0ff, transparent 58%),
    linear-gradient(180deg,#140833,#06031a); }
.b-cyber::after { content:""; position:absolute; inset:0; opacity:.6;
  background-image:linear-gradient(#16e0ff44 1px,transparent 1px),linear-gradient(90deg,#ff2bd03a 1px,transparent 1px);
  background-size:34px 34px,34px 34px; mask:linear-gradient(180deg,#000,transparent 88%); }
.b-matrix { background:linear-gradient(180deg,#04230f,#021810); }
.b-matrix::after { content:""; position:absolute; inset:0; opacity:.7;
  background-image:repeating-linear-gradient(0deg,#0aff6030 0 2px,transparent 2px 5px); }
.b-royal {
  background:
    radial-gradient(130% 110% at 50% -16%, #f5c542, transparent 60%),
    radial-gradient(110% 95% at 85% 110%, #a9760b, transparent 60%),
    linear-gradient(165deg,#2e2008,#120c03); }
.b-royal::after { content:""; position:absolute; inset:0; opacity:.55;
  background-image:radial-gradient(#ffe9a655 1px,transparent 1px); background-size:24px 24px;
  mask:radial-gradient(130% 100% at 50% 0%,#000,transparent 80%); }
.b-galaxy {
  background:
    radial-gradient(110% 95% at 20% -12%, #8b5cf6, transparent 58%),
    radial-gradient(110% 95% at 85% 18%, #ec4899, transparent 58%),
    radial-gradient(130% 120% at 55% 125%, #2b2a8f, transparent 62%),
    linear-gradient(160deg,#150f3a,#070420); }
.b-galaxy::after { content:""; position:absolute; inset:0; opacity:.75;
  background-image:radial-gradient(#ffffff 1px,transparent 1px),radial-gradient(#cdb6ff 1px,transparent 1px);
  background-size:54px 54px,84px 84px; background-position:0 0,28px 36px; animation:twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity:.35; } }

@media (prefers-reduced-motion: no-preference){
  .av-wrap.f-fire::before, .av-wrap.f-rainbow::before, .av-wrap.f-plasma::before { animation:rot 4s linear infinite; }
  .av-wrap.f-frost::before, .av-wrap.f-emerald::before, .av-wrap.f-sunset::before { animation:rot 7s linear infinite; }
}

/* плитка предмета косметики (магазин/кастомизация) */
.cos-card { position:relative; border-radius:14px; padding:14px 12px 12px; text-align:center; cursor:pointer;
  background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--c) 18%,#0b0e1a), #07080f 78%);
  border:1.5px solid color-mix(in srgb,var(--c) 50%,transparent); transition:.18s; }
.cos-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px -8px color-mix(in srgb,var(--c) 55%,transparent); }
.cos-card.sel { box-shadow:0 0 0 2px var(--c), 0 10px 24px -8px var(--c); }
.cos-card .cc-prev { height:56px; display:grid; place-items:center; margin-bottom:8px; }
.cos-card .cc-nm { font-size:.78rem; font-weight:800; color:#e7eeff; }
.cos-card .cc-sub { font-size:.66rem; font-weight:700; margin-top:3px; color:var(--c); }
.cos-card .cc-lock { position:absolute; top:8px; right:9px; font-size:.7rem; }

/* ==== конфетти (VRTH.confetti) ==== */
#g-cfwrap { position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }
.g-cf { position:absolute; top:-16px; display:block; opacity:.95;
  animation:g-cfall linear forwards; will-change:transform,opacity; }
@keyframes g-cfall {
  0%   { transform:translate(0,-16px) rotate(0deg); opacity:1; }
  85%  { opacity:1; }
  100% { transform:translate(var(--dx,0px),105vh) rotate(var(--rz,540deg)); opacity:0; }
}

/* ==== скелетоны загрузки (вместо «Загрузка…») ==== */
.sk { position:relative; overflow:hidden; border-radius:10px; background:#0d1424;
  border:1px solid #ffffff0a; }
.sk::after { content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, #ffffff10 50%, transparent 70%);
  animation:sk-shine 1.4s ease-in-out infinite; }
@keyframes sk-shine { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }
.sk-line  { height:13px; margin:8px 0; }
.sk-line.w60 { width:60%; } .sk-line.w40 { width:40%; } .sk-line.w80 { width:80%; }
.sk-card  { height:88px; margin:10px 0; border-radius:14px; }
.sk-round { width:44px; height:44px; border-radius:50%; }
@media (prefers-reduced-motion: reduce){ .sk::after { animation:none; } }

/* ==== единый пустой стейт (.g-empty) ==== */
.g-empty { text-align:center; padding:44px 18px; color:#64748b; }
.g-empty .ge-ico { font-size:2.6rem; margin-bottom:10px; filter:saturate(.8); }
.g-empty .ge-t { font-weight:800; color:#9fb2d8; font-size:.95rem; }
.g-empty .ge-s { font-size:.78rem; margin-top:5px; line-height:1.5; }
.g-empty a.ge-cta { display:inline-flex; margin-top:14px; padding:9px 18px; border-radius:11px;
  background:linear-gradient(100deg, color-mix(in srgb,var(--acc,#00e5ff) 80%,#fff0), var(--acc,#00e5ff));
  color:#04140d; font-weight:900; font-size:.8rem; text-decoration:none; transition:.15s; }
.g-empty a.ge-cta:hover { filter:brightness(1.12); transform:translateY(-1px); }

/* ==== амбиент-частицы (VRTH.ambient) ==== */
#g-ambwrap { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.g-amb-p { position:absolute; bottom:-8px; border-radius:50%; display:block;
  filter:blur(.6px); box-shadow:0 0 6px currentColor;
  animation:g-ambf linear infinite; will-change:transform,opacity; }
@keyframes g-ambf {
  0%   { transform:translate(0,0) scale(1); }
  50%  { transform:translate(var(--sw,40px),-55vh) scale(1.25); }
  100% { transform:translate(calc(var(--sw,40px)*-.6),-110vh) scale(.6); opacity:0; }
}

/* ==== летящие монеты (VRTH.flyCoins) ==== */
.g-flyc { position:fixed; z-index:10000; pointer-events:none; font-size:17px; line-height:1;
  filter:drop-shadow(0 2px 5px #f5d02066); will-change:transform,opacity; opacity:0; }

/* ==== shine-надгляд главной кнопки (Space-хоткей) ==== */
.g-go { position:relative; overflow:hidden; }
.g-go::after { content:""; position:absolute; top:0; bottom:0; width:46%; left:-60%;
  background:linear-gradient(100deg, transparent, #ffffff38, transparent);
  transform:skewX(-18deg); animation:g-sheen 3.4s ease-in-out infinite; pointer-events:none; }
@keyframes g-sheen { 0%,64% { left:-60%; } 88%,100% { left:130%; } }
@media (prefers-reduced-motion: reduce){ .g-go::after, .g-amb-p { animation:none; } }

/* ==== тактильность (глобально, сдержанно) ==== */
.g-go:active { transform:scale(.965); }
.g-qb { transition:transform .14s ease, box-shadow .14s ease; }
.g-qb:hover { transform:translateY(-1.5px); }
.g-bal b { font-variant-numeric:tabular-nums; }
.g-go:focus-visible, .g-qb:focus-visible { outline:2px solid #ffffff59; outline-offset:2px; }

/* ==== ui-ux-pro-max чеклист: интерактивность и фокус (глобально) ==== */
button, [role="button"], a, select, summary, input[type="checkbox"], input[type="range"], label[for] { cursor:pointer; }
button:disabled { cursor:not-allowed; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, select:focus-visible {
  outline:2px solid color-mix(in srgb, var(--acc,#00e5ff) 70%, #fff); outline-offset:2px; border-radius:6px; }

/* ============================================================
   VRTH · КИНЕМАТОГРАФИЧНЫЙ СЛОЙ (общий для всех 40 страниц)
   Только ДОБАВЛЕНИЯ: ни один существующий класс/id не тронут,
   поэтому шапка, чат, колокольчик и джекпот работают как работали.
   ============================================================ */

/* ---- переход между страницами: сайт ощущается как смена сцены ---- */
.vx-wipe{position:fixed;inset:0;z-index:99999;pointer-events:none;
  background:linear-gradient(180deg,#070a16,#04050d);
  clip-path:inset(0 0 100% 0);will-change:clip-path}
.vx-wipe.in{animation:vxIn .42s cubic-bezier(.7,0,.3,1) forwards}
.vx-wipe.out{clip-path:inset(0 0 0 0);animation:vxOut .44s cubic-bezier(.6,0,.25,1) forwards}
@keyframes vxIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vxOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}
/* Тонкая световая грань, бегущая по шторке. Свечение было 22px/.9 — на светлом
   контенте оно читалось как отдельная вспышка, не связанная с переходом. */
.vx-wipe::after{content:"";position:absolute;left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent,var(--acc,#00e5ff),transparent);
  box-shadow:0 0 14px var(--acc,#00e5ff);opacity:.7}
.vx-wipe.out::after{top:auto;bottom:0}

/* ---- вход страницы ---- */
@keyframes vxRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
body.vx-ready main{animation:vxRise .5s cubic-bezier(.22,1,.36,1) both}
body.vx-ready nav{animation:vxRise .45s cubic-bezier(.22,1,.36,1) both}

/* ---- живой фон-констелляция (canvas под контентом) ---- */
#vx-field{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.55}

/* ---- шапка как игровой HUD ---- */
nav{position:sticky}
nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc,#00e5ff) 55%,transparent),transparent)}
nav .lnk{position:relative;transition:color .18s ease,background .18s ease}
/* активный пункт получает светящуюся риску снизу — сразу видно, где ты */
nav .lnk.on::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--acc,#00e5ff),#a855f7);
  box-shadow:0 0 10px color-mix(in srgb,var(--acc,#00e5ff) 70%,transparent)}
nav .lnk:active{transform:scale(.96)}

/* ---- премиальная тактильность по сайту ---- */
main a,main button{transition:transform .16s cubic-bezier(.22,1,.36,1),filter .18s ease}
main button:active{transform:scale(.97)}

/* ---- дорогая полоса прокрутки ---- */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--acc,#00e5ff) 45%,transparent) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{border-radius:8px;border:3px solid transparent;background-clip:content-box;
  background-color:color-mix(in srgb,var(--acc,#00e5ff) 40%,#243049)}
::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--acc,#00e5ff) 70%,#243049)}

@media (prefers-reduced-motion: reduce){
  .vx-wipe{display:none!important}
  body.vx-ready main,body.vx-ready nav{animation:none}
  #vx-field{display:none}
}

/* ============================================================
   VRTH · КОМПОНЕНТЫ (.v-*) — единая система для всех страниц.
   Заменяют самописные карточки/кнопки/табы, которых по проекту
   было 268/318/… копий. Тонируются через --acc страницы.
   ============================================================ */

/* --- иконки вместо эмодзи --- */
.vi{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;flex:none;color:currentColor}
.vi.lg{width:1.35em;height:1.35em}
.vi.xl{width:22px;height:22px}

/* --- заголовок раздела --- */
.v-head{display:flex;align-items:center;gap:11px;margin:0 0 14px}
.v-head .vi{color:var(--acc,#00e5ff);
  filter:drop-shadow(0 0 9px color-mix(in srgb,var(--acc,#00e5ff) 55%,transparent))}
.v-head h2,.v-head h3{font-family:var(--font-display,'Manrope',sans-serif);font-weight:400;
  font-size:1.12rem;letter-spacing:.6px;color:#fff;margin:0}
.v-head .v-sub{font-size:.72rem;color:#6b7794;font-weight:700;margin-left:auto}

/* --- карточка --- */
.v-card{position:relative;border-radius:16px;padding:16px 18px;overflow:hidden;
  background:linear-gradient(165deg,#0c1122,#080a14);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 34px -22px #000;
  transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .22s,box-shadow .22s}
.v-card.hov:hover{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--acc,#00e5ff) 42%,transparent);
  box-shadow:0 24px 50px -26px color-mix(in srgb,var(--acc,#00e5ff) 70%,#000)}
.v-card.acc::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc,#00e5ff) 70%,transparent),transparent)}

/* --- кнопка --- */
.v-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:inherit;font-size:.82rem;font-weight:800;letter-spacing:.3px;
  padding:10px 18px;border-radius:12px;border:1px solid transparent;
  color:#04121a;background:linear-gradient(120deg,var(--acc,#00e5ff),color-mix(in srgb,var(--acc,#00e5ff) 55%,#7c3aed));
  box-shadow:0 8px 22px -10px color-mix(in srgb,var(--acc,#00e5ff) 80%,transparent);
  transition:transform .16s cubic-bezier(.22,1,.36,1),filter .18s,box-shadow .2s}
.v-btn:hover{transform:translateY(-2px);filter:brightness(1.09)}
.v-btn:active{transform:scale(.96)}
.v-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.v-btn.ghost{background:#0d1322;border-color:rgba(255,255,255,.1);color:#9fb2d8;box-shadow:none}
.v-btn.ghost:hover{color:#fff;border-color:rgba(255,255,255,.22);background:#131a2c}
.v-btn.sm{font-size:.74rem;padding:7px 13px;border-radius:10px}

/* --- сегментные табы со скользящим бегунком --- */
.v-tabs{position:relative;display:flex;gap:2px;padding:5px;border-radius:15px;overflow-x:auto;
  background:#0a0e1a;border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);scrollbar-width:none}
.v-tabs::-webkit-scrollbar{display:none}
.v-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 16px;border-radius:11px;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:.79rem;font-weight:800;color:#7c8aab;
  transition:color .2s cubic-bezier(.22,1,.36,1)}
.v-tab:hover{color:#dfe8ff}
.v-tab.on{color:#fff}
.v-tab .vi{transition:transform .24s cubic-bezier(.22,1.2,.32,1)}
.v-tab.on .vi{color:var(--acc,#00e5ff);transform:scale(1.12);
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--acc,#00e5ff) 70%,transparent))}
.v-tabs .v-ind{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:11px;z-index:0;
  background:linear-gradient(100deg,color-mix(in srgb,var(--acc,#00e5ff) 20%,transparent),
                                    color-mix(in srgb,var(--acc,#00e5ff) 9%,transparent));
  border:1px solid color-mix(in srgb,var(--acc,#00e5ff) 34%,transparent);
  box-shadow:0 0 20px -8px var(--acc,#00e5ff);
  transition:transform .34s cubic-bezier(.22,1,.36,1),width .34s cubic-bezier(.22,1,.36,1),opacity .2s;
  opacity:0;will-change:transform,width}
.v-tabs .v-ind.ready{opacity:1}

/* --- чип / бейдж --- */
.v-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.4px;color:var(--cc,#9fb2d8);
  background:color-mix(in srgb,var(--cc,#9fb2d8) 10%,#080b14);
  border:1px solid color-mix(in srgb,var(--cc,#9fb2d8) 34%,transparent);
  transition:transform .16s cubic-bezier(.22,1,.36,1)}
.v-chip.click{cursor:pointer}
.v-chip.click:hover{transform:translateY(-2px)}
.v-chip.on{color:#04121a;background:var(--cc,var(--acc,#00e5ff));border-color:transparent}

/* --- статистика --- */
.v-stat{text-align:center;padding:13px 10px;border-radius:14px;
  background:#090d18;border:1px solid rgba(255,255,255,.06)}
.v-stat .n{font-family:var(--font-display,'Manrope',sans-serif);font-weight:400;font-size:1.4rem;
  color:var(--cc,var(--acc,#00e5ff));font-variant-numeric:tabular-nums;line-height:1}
.v-stat .k{font-size:.6rem;letter-spacing:1.4px;text-transform:uppercase;color:#5d6a8c;
  font-weight:800;margin-top:6px}

/* --- появление контента (стаггер) --- */
@keyframes vRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.v-in{animation:vRise .5s cubic-bezier(.22,1,.36,1) both}
.v-in:nth-child(2){animation-delay:.05s}
.v-in:nth-child(3){animation-delay:.1s}
.v-in:nth-child(4){animation-delay:.15s}
.v-in:nth-child(5){animation-delay:.2s}
.v-in:nth-child(6){animation-delay:.25s}

@media (prefers-reduced-motion: reduce){ .v-in{animation:none} .v-tabs .v-ind{transition:none} }

/* ════════════════════════════════════════════════════════════
   VRTH · ПРЕМІУМ-ШАР (v3) — піднімає ВСІ сторінки до рівня /v2
   без єдиної правки в самих сторінках.

   Працює по класах, які вже є у розмітці (.g-head на 19 сторінках,
   .panel/.card/.sec/.mini/.chcard/.st/...). Ховає елементи ТІЛЬКИ
   JS: якщо скрипт не виконався — усе лишається видимим, як було.
   ════════════════════════════════════════════════════════════ */

/* ── поява при скролі ── */
/* Ховаємо БЕЗ transition: інакше блок, який уже намальований, спершу
   згасав би до нуля на очах. Анімація живе на .rv-in — тобто працює
   лише «проявлення». JS ховає ТІЛЬКИ те, що нижче згину, тому момент
   приховування фізично не видно. */
html.rv-on .rv{opacity:0;transform:translateY(18px);will-change:opacity,transform}
html.rv-on .rv.rv-in{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--rvi,0) * 55ms);will-change:auto}
html.rv-on .rv.rv-fast.rv-in{transition-duration:.42s;transition-delay:calc(var(--rvi,0) * 28ms)}

/* ── заголовок сторінки: одна велика вступна нота ── */
html.rv-on .g-head{opacity:0;animation:gheadIn .66s cubic-bezier(.22,1,.36,1) .06s forwards}
@keyframes gheadIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* світлова смуга під заголовком — та сама мова, що на лендінгу */
.g-head{position:relative}
.g-head::after{content:"";position:absolute;left:0;bottom:-10px;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--acc,#00e5ff),transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--acc,#00e5ff) 55%,transparent);
  animation:gheadLine .9s cubic-bezier(.22,1,.36,1) .32s forwards}
@keyframes gheadLine{to{width:min(190px,42%)}}

/* ── поверхні: глибина замість пласких прямокутників ── */
.panel,.card,.chcard,.mini{
  transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .2s ease,box-shadow .2s ease}
.panel:hover,.card:hover,.chcard:hover,.mini:hover{
  border-color:color-mix(in srgb,var(--acc,#00e5ff) 26%,#ffffff14)}
/* верхня грань — ледь помітний відблиск, як на склі */
.panel::before,.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#ffffff26,transparent)}
.panel,.card{position:relative}

/* ── порожні стани: не «нічого нема», а запрошення ── */
.empty{position:relative}
.empty .big{display:block;font-size:2.1rem;line-height:1;margin-bottom:10px;opacity:.55;
  animation:emptyFloat 3.4s ease-in-out infinite}
@keyframes emptyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ── цифри: моноширинні, щоб не «стрибали» при оновленні ── */
.st .v,.hcard .val,.stat div b,.g-stat b,.iv-stat .v{font-variant-numeric:tabular-nums}

/* ── доступність: фокус з клавіатури видно завжди ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--acc,#00e5ff);outline-offset:2px;border-radius:8px}

/* ── повага до системного «менше руху»: показуємо ВСЕ, просто без руху ── */
@media (prefers-reduced-motion:reduce){
  html.rv-on .rv{opacity:1;transform:none;transition:none}
  html.rv-on .g-head{opacity:1;animation:none}
  .g-head::after{animation:none;width:min(190px,42%)}
  .empty .big{animation:none}
}