/* Хранилище (11.10.2026). Стиль по референсу владельца: тонкая неоновая рамка с белыми бликами и свечением, тёмное стекло внутри. */
.app[data-route="CONTAINERS"] > main { padding:0; background:#02070d; }
.app.desktop[data-route="CONTAINERS"] > main { height:calc(100vh - 86 * var(--u)); overflow:hidden; }
.vt-screen { width:100%; max-width:none; margin:0; color:#edf6ff; }
.vt-screen :is(h1,h2,h3,p,dl,dd,ul) { margin:0; }
.vt-screen ul { padding:0; list-style:none; }

/* ---------- палитра ---------- */
:where(.vt-frame, .vt-cta, .vt-stage, .vt-family-guarantee) { --c:#2b9fd6; --hi:#a8e8ff; --glow:rgba(43,159,214,.32); }
.vt-blue { --c:#1ea7ff; --hi:#d2f2ff; --glow:rgba(30,167,255,.5); }
.vt-violet { --c:#c04dff; --hi:#f6d8ff; --glow:rgba(192,77,255,.55); }
.vt-gold { --c:#f2b33d; --hi:#fff4c8; --glow:rgba(242,179,61,.5); }
/* учебный контейнер новичка — серебро (владелец 11.10) */
.vt-silver { --c:#d6e4f0; --hi:#ffffff; --glow:rgba(214,228,240,.5); }

/* ---------- неоновая рамка ---------- */
.vt-frame, .vt-cta { --cut:12px; --lw:2px; --gr:6px; --shape:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut)); position:relative; isolation:isolate; min-width:0; }
.vt-f-line, .vt-f-glass { position:absolute; pointer-events:none; }
/* линия: свечение снаружи (filter на обёртке, чтобы срез его не отрезал), сама линия — градиент с белыми бликами */
.vt-f-line { inset:0; z-index:-2; filter:drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 var(--gr) var(--glow)); }
.vt-f-line::before { content:""; position:absolute; inset:0; clip-path:var(--shape); background:var(--line, linear-gradient(135deg,var(--hi) 0,var(--c) 9%,var(--c) 40%,var(--hi) 50%,var(--c) 60%,var(--c) 91%,var(--hi) 100%)); }
.vt-gold { --line:linear-gradient(135deg,#fff4c8 0,#f6c24c 8%,#c98a22 28%,#ffe39a 50%,#e6a838 68%,#b07216 86%,#fff1bc 100%); }
.vt-f-glass { inset:var(--lw); z-index:-1; clip-path:polygon(calc(var(--cut) - 1px) 0,calc(100% - var(--cut) + 1px) 0,100% calc(var(--cut) - 1px),100% calc(100% - var(--cut) + 1px),calc(100% - var(--cut) + 1px) 100%,calc(var(--cut) - 1px) 100%,0 calc(100% - var(--cut) + 1px),0 calc(var(--cut) - 1px)); background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,#070b14),#04070d); box-shadow:inset 0 0 22px color-mix(in srgb,var(--c) 24%,transparent); }
.vt-f-body { position:relative; min-width:0; height:100%; }

/* ---------- компьютер ---------- */
.vt-desktop { height:100%; }
.vt-desktop .vt-scene { --vs:min(calc((100vw - 228 * var(--u)) / 1600),calc((100vh - 86 * var(--u)) / 900)); position:relative; width:100%; height:100%; overflow:hidden; container-type:size; }
.vt-desktop .vt-scene > :not(.vt-bgbox) { position:absolute; }
/* фон всегда целиком на экран (cover) без искажения; сундук и кольцо — в процентах фона, поэтому всегда на подиуме */
.vt-desktop .vt-bgbox { position:absolute; left:50%; top:50%; width:max(100cqw,177.705cqh); aspect-ratio:1672 / 941; transform:translate(-50%,-50%); background:url('/app/client/assets/ui/vault/vault-bg.png') 0 0 / 100% 100% no-repeat; }
.vt-desktop .vt-stage { position:absolute; left:37.13%; top:27.76%; width:25.75%; height:45.75%; }

.vt-heading { padding:calc(4 * var(--vs, 1px)) calc(14 * var(--vs, 1px)); border-left:2px solid #2b9fd6; background:linear-gradient(90deg,#020c17c4,#020c1755,transparent); text-shadow:0 2px 8px #000; }
.vt-desktop .vt-heading { left:calc(24 * var(--vs)); top:calc(18 * var(--vs)); width:calc(270 * var(--vs)); }
.vt-heading p { color:#5fd0ff; font-size:calc(13 * var(--vs, 1px)); letter-spacing:.2em; }
.vt-heading h1 { margin:calc(6 * var(--vs, 1px)) 0; font-size:calc(35 * var(--vs, 1px)); font-weight:850; line-height:1.08; letter-spacing:.02em; }
.vt-heading span { color:#bcd2e2; font-size:calc(14 * var(--vs, 1px)); }

/* карточки выбора: одинаковые; выбор — линия толще, свечение сильнее, стрелка к подиуму */
.vt-desktop .vt-picks { left:50%; top:calc(24 * var(--vs)); width:calc(930 * var(--vs)); height:calc(358 * var(--vs)); transform:translateX(-50%); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(24 * var(--vs)); }
.vt-pick { --cut:calc(12 * var(--vs, 1px)); }
.vt-pick > .vt-f-body { display:flex; flex-direction:column; padding:var(--lw); }
.vt-pick header { display:flex; flex-direction:column; align-items:flex-start; gap:calc(7 * var(--vs, 1px)); padding:calc(12 * var(--vs, 1px)) calc(14 * var(--vs, 1px)) calc(9 * var(--vs, 1px)); }
.vt-pill { padding:calc(2 * var(--vs, 1px)) calc(12 * var(--vs, 1px)); border:1px solid var(--c); border-radius:calc(4 * var(--vs, 1px)); background:color-mix(in srgb,var(--c) 16%,#050a12); color:color-mix(in srgb,var(--c) 55%,#fff); font-size:calc(12 * var(--vs, 1px)); font-weight:850; letter-spacing:.06em; box-shadow:0 0 8px var(--glow); }
.vt-pick h2 { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-size:calc(20 * var(--vs, 1px)); font-weight:800; line-height:1.2; text-shadow:0 2px 6px #000; }
.vt-pick-art { position:relative; flex:1; min-height:0; overflow:hidden; border-block:1px solid color-mix(in srgb,var(--c) 45%,transparent); }
.vt-pick-art img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.vt-count { position:absolute; right:calc(8 * var(--vs, 1px)); bottom:calc(8 * var(--vs, 1px)); padding:calc(3 * var(--vs, 1px)) calc(9 * var(--vs, 1px)); border:1px solid var(--c); border-radius:calc(3 * var(--vs, 1px)); background:#03070ee6; color:#fff; font-size:calc(12 * var(--vs, 1px)); font-weight:800; letter-spacing:.04em; box-shadow:0 0 8px var(--glow); }
.vt-count-empty { border-color:#5d7385; color:#a9bccb; box-shadow:none; }
.vt-pick dl { display:grid; grid-template-columns:.62fr 1.1fr; gap:calc(8 * var(--vs, 1px)); padding:calc(10 * var(--vs, 1px)) calc(12 * var(--vs, 1px)) 0; }
.vt-pick dl > div { min-width:0; padding:calc(6 * var(--vs, 1px)) calc(10 * var(--vs, 1px)); border:1px solid color-mix(in srgb,var(--c) 32%,#1b2a38); background:#050a12cc; }
.vt-pick dt { color:#9fb3c4; font-size:calc(10 * var(--vs, 1px)); text-transform:uppercase; letter-spacing:.04em; }
.vt-pick dd { margin-top:2px; color:#fff; font-size:calc(17 * var(--vs, 1px)); font-weight:800; line-height:1.2; }
.vt-pick p { padding:calc(8 * var(--vs, 1px)) calc(14 * var(--vs, 1px)) calc(10 * var(--vs, 1px)); color:#cfdbe6; font-size:calc(13 * var(--vs, 1px)); line-height:1.35; }
.vt-pick-hit { position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
.vt-pick-hit:focus-visible { outline:2px solid #fff; outline-offset:-6px; }
.vt-pick .vt-f-line { transition:filter .2s ease; }
.vt-pick:hover .vt-f-line { filter:drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 10px var(--glow)); }
.vt-pick.vt-selected { --lw:3px; }
.vt-pick.vt-selected .vt-f-line { filter:drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 16px var(--glow)) drop-shadow(0 0 28px var(--glow)); }
.vt-pick.vt-selected .vt-f-glass { box-shadow:inset 0 0 30px color-mix(in srgb,var(--c) 34%,transparent); }
.vt-pick.vt-selected > .vt-f-body::after { content:""; position:absolute; left:50%; bottom:calc(-22 * var(--vs, 1px)); width:calc(28 * var(--vs, 1px)); height:calc(13 * var(--vs, 1px)); transform:translateX(-50%); background:linear-gradient(180deg,var(--hi),var(--c)); clip-path:polygon(0 0,100% 0,50% 100%); filter:drop-shadow(0 0 6px var(--c)); }

/* подиум: на фоне; кодом — цвет кольца и свечение */
.vt-stage { pointer-events:none; }
.vt-ring { position:absolute; left:-23.5%; top:82%; width:146.4%; height:14.6%; }
.vt-ring i { position:absolute; inset:0; border-radius:50%; }
.vt-ring i:nth-child(1) { background:var(--c); mix-blend-mode:color; }
.vt-ring i:nth-child(2) { inset:-30% -6%; background:radial-gradient(ellipse,color-mix(in srgb,var(--c) 40%,transparent) 0,transparent 68%); mix-blend-mode:screen; animation:vt-ring-pulse 3.2s ease-in-out infinite; }
.vt-chest { position:absolute; inset:0; animation:vt-chest-in .42s cubic-bezier(.2,.8,.25,1) both; }
.vt-chest img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 22px color-mix(in srgb,var(--c) 45%,transparent)); animation:vt-chest-idle 3.2s ease-in-out .45s infinite; }
/* экран обновляется морфингом DOM: у каждого цвета своё имя анимации, чтобы появление проигрывалось при переключении */
.vt-chest-violet { animation-name:vt-chest-in-violet; } .vt-chest-gold { animation-name:vt-chest-in-gold; }
@keyframes vt-chest-in { from { opacity:0; transform:translateY(22px) scale(.92); filter:brightness(1.8); } to { opacity:1; transform:none; filter:none; } }
@keyframes vt-chest-in-violet { from { opacity:0; transform:translateY(22px) scale(.92); filter:brightness(1.8); } to { opacity:1; transform:none; filter:none; } }
@keyframes vt-chest-in-gold { from { opacity:0; transform:translateY(22px) scale(.92); filter:brightness(1.8); } to { opacity:1; transform:none; filter:none; } }
@keyframes vt-chest-idle { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-1.2%); } }
@keyframes vt-ring-pulse { 0%,100% { opacity:.75; } 50% { opacity:1; } }

/* кнопки подиума: тёмные, неоновая рамка и цветная надпись — как на референсе */
.vt-actions { display:flex; justify-content:center; gap:calc(16 * var(--vs, 1px)); }
/* кнопка — сразу под передним краем подиума фона при любой пропорции окна: фон (cover) центрирован, его высота = max(высота сцены, 56,28% ширины) */
.vt-desktop .vt-actions { left:50%; top:calc(50cqh + 0.335 * max(100cqh, 56.28cqw)); width:calc(540 * var(--vs)); transform:translateX(-50%); }
.vt-cta { --cut:calc(14 * var(--vs, 1px)); --lw:3px; --gr:12px; flex:1 1 0; min-height:calc(66 * var(--vs, 1px)); margin:0; padding:0 calc(20 * var(--vs, 1px)); border:0; background:transparent; cursor:pointer; }
.vt-cta .vt-f-glass { background:linear-gradient(180deg,color-mix(in srgb,var(--c) 20%,#0a0712),color-mix(in srgb,var(--c) 7%,#04060c)); box-shadow:inset 0 0 26px color-mix(in srgb,var(--c) 30%,transparent); }
.vt-cta-label { position:relative; display:block; color:color-mix(in srgb,var(--c) 42%,#fff); font-size:calc(21 * var(--vs, 1px)); font-weight:850; line-height:1.15; letter-spacing:.05em; text-transform:uppercase; text-shadow:0 0 10px var(--glow); }
.vt-cta .vt-f-line { transition:filter .18s ease; }
.vt-cta:hover:enabled .vt-f-line { filter:drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 18px var(--glow)); }
.vt-cta:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.vt-cta:disabled { --c:#526b80; --hi:#a7bccd; --glow:transparent; --line:linear-gradient(135deg,#9fb4c5,#526b80 14%,#3c5163 50%,#526b80 86%,#9fb4c5); cursor:default; opacity:1; }
.vt-cta:disabled .vt-cta-label { color:#a9bccb; text-shadow:none; }
.vt-store { flex:0 0 auto; width:calc(240 * var(--vs, 1px)); }
.vt-store .vt-cta-label { color:#fff; font-size:calc(16 * var(--vs, 1px)); }
.vt-actions-empty .vt-open .vt-cta-label { font-size:calc(17 * var(--vs, 1px)); }
.vt-error { padding:10px 14px; border:1px solid #dc6071; background:#260e1ce6; color:#ffd4dd; font-size:14px; }
.vt-desktop .vt-error { left:50%; top:calc(396 * var(--vs)); transform:translateX(-50%); }

/* панели */
/* фоновая картинка панели — внутри стекла (повторяет срез рамки), cover без искажения, притемнена слева направо и снизу */
.vt-panel-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--art-pos,50% 50%); transform:scale(var(--art-zoom,1)); transform-origin:var(--art-pos,50% 50%); }
.vt-panel-shade { position:absolute; inset:0; background:linear-gradient(90deg,#03070de6 0,#03070dbf 38%,#03070d7a 72%,#03070d66 100%),linear-gradient(0deg,#03070d80,transparent 50%); }
/* картинки заранее вырезаны под пропорции панелей («сблизь»): кубок справа от текста, покупатели крупно */
.vt-guarantees { --art-pos:70% 50%; }
.vt-rewards { --art-pos:50% 50%; }
.vt-rewards .vt-panel-shade { background:linear-gradient(90deg,#03070d40,transparent 30%,transparent 70%,#03070d40),linear-gradient(180deg,#03070dc7 0,#03070d80 42%,#03070da8 100%); }
.vt-has-art .vt-reward { background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 20%,#050a1270),#04070d8c); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.vt-has-art .vt-f-body { text-shadow:0 1px 3px #000,0 0 10px #000c; }
.vt-panel { --cut:calc(10 * var(--vs, 1px)); }
.vt-panel > .vt-f-body { padding:calc(15 * var(--vs, 1px)) calc(18 * var(--vs, 1px)); }
.vt-panel h3 { color:#5fd0ff; font-size:calc(15 * var(--vs, 1px)); font-weight:850; letter-spacing:.06em; margin-bottom:calc(10 * var(--vs, 1px)); }
.vt-desktop .vt-guarantees { left:calc(24 * var(--vs)); top:calc(690 * var(--vs)); width:calc(460 * var(--vs)); }
.vt-desktop .vt-rewards { right:calc(24 * var(--vs)); top:calc(486 * var(--vs)); width:calc(460 * var(--vs)); }
.vt-desktop .vt-history { right:calc(24 * var(--vs)); top:calc(676 * var(--vs)); width:calc(460 * var(--vs)); }
.vt-family-guarantee { color:#fff; font-size:calc(14 * var(--vs, 1px)); font-weight:700; margin-bottom:calc(6 * var(--vs, 1px))!important; }
.vt-guarantees li { display:flex; align-items:center; gap:calc(12 * var(--vs, 1px)); padding:calc(5 * var(--vs, 1px)) 0; font-size:calc(14 * var(--vs, 1px)); font-weight:600; }
.vt-g-icon { flex:none; width:calc(40 * var(--vs, 1px)); height:calc(40 * var(--vs, 1px)); object-fit:contain; }
.vt-guarantee-epic { color:#dc96ff; }
.vt-guarantee-legendary { color:#ffcf6a; }
/* прогресс гарантий (этап 3): подпись, под ней полоска, справа счётчик — как на референсе */
.vt-g-text { flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:calc(12 * var(--vs, 1px)); row-gap:calc(6 * var(--vs, 1px)); }
.vt-g-text > span:first-child { grid-column:1; grid-row:1; }
.vt-g-meter { grid-column:1; grid-row:2; position:relative; display:block; height:calc(8 * var(--vs, 1px)); padding:1px; border:1px solid color-mix(in srgb,currentColor 45%,#1b2a38); border-radius:2px; background:#050a12d9; box-shadow:inset 0 0 6px #000; }
.vt-g-meter > i { display:block; height:100%; min-width:3px; border-radius:1px; background:linear-gradient(90deg,color-mix(in srgb,currentColor 55%,#05070d),currentColor 70%,color-mix(in srgb,currentColor 40%,#fff)); box-shadow:0 0 8px currentColor; transition:width .5s ease; }
.vt-g-count { grid-column:2; grid-row:1 / span 2; color:#fff; font-size:calc(15 * var(--vs, 1px)); font-weight:800; letter-spacing:.03em; white-space:nowrap; text-shadow:0 1px 3px #000; }
.vt-guarantees li.vt-has-meter { padding:calc(6 * var(--vs, 1px)) 0; }
.vt-guarantees li.vt-no-icon::before { content:""; flex:none; width:calc(4 * var(--vs, 1px)); height:calc(18 * var(--vs, 1px)); background:currentColor; box-shadow:0 0 8px currentColor; }
.vt-rewards ul { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(8 * var(--vs, 1px)); }
.vt-reward { --rc:#9db8c8; display:flex; flex-direction:column; align-items:center; gap:calc(3 * var(--vs, 1px)); padding:calc(9 * var(--vs, 1px)) calc(4 * var(--vs, 1px)); border:1px solid var(--rc); border-radius:calc(4 * var(--vs, 1px)); background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 16%,#050a12),#04070d); box-shadow:inset 0 0 12px color-mix(in srgb,var(--rc) 18%,transparent); }
.vt-reward strong { color:var(--rc); font-size:calc(22 * var(--vs, 1px)); line-height:1.1; text-shadow:0 0 8px color-mix(in srgb,var(--rc) 45%,transparent); }
.vt-reward span { color:#e3edf5; font-size:calc(11 * var(--vs, 1px)); text-transform:uppercase; letter-spacing:.03em; }
.vt-rewards small { display:block; margin-top:calc(8 * var(--vs, 1px)); color:#8ea4b5; font-size:calc(11 * var(--vs, 1px)); }
.vt-rarity-common { --rc:#9db8c8; } .vt-rarity-rare { --rc:#1ea7ff; } .vt-rarity-epic { --rc:#c04dff; } .vt-rarity-legendary { --rc:#f2b33d; }
.vt-history li { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:calc(14 * var(--vs, 1px)); padding:calc(5 * var(--vs, 1px)) 0; border-bottom:1px solid #12303f; font-size:calc(13 * var(--vs, 1px)); }
.vt-history li:last-child { border-bottom:0; }
.vt-history time { color:#8ea4b5; }
.vt-history li > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eef6fc; }
.vt-tag { min-width:calc(92 * var(--vs, 1px)); padding:calc(2 * var(--vs, 1px)) calc(6 * var(--vs, 1px)); border:1px solid var(--rc); border-radius:calc(3 * var(--vs, 1px)); background:color-mix(in srgb,var(--rc) 16%,#020b14); color:color-mix(in srgb,var(--rc) 70%,#fff); text-align:center; font-size:calc(11 * var(--vs, 1px)); font-weight:800; letter-spacing:.04em; }
.vt-history .service-empty { color:#8ea4b5; font-size:calc(13 * var(--vs, 1px)); }

/* ---------- телефон ---------- */
.vt-mobile .vt-scene { --vs:1px; display:flex; flex-direction:column; gap:16px; padding:20px 16px 28px; }
.vt-mobile .vt-bgbox { display:contents; }
.vt-mobile .vt-scene > .vt-bgbox { order:3; }
.vt-mobile .vt-heading { order:1; }
.vt-mobile .vt-picks { order:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.vt-mobile .vt-actions { order:4; flex-direction:column; }
.vt-mobile .vt-error { order:5; }
.vt-mobile .vt-guarantees { order:6; } .vt-mobile .vt-rewards { order:7; } .vt-mobile .vt-history { order:8; }
.vt-mobile .vt-heading h1 { font-size:32px; }
.vt-mobile .vt-pick { --cut:9px; }
.vt-mobile .vt-pick header { padding:8px 6px 6px; }
.vt-mobile .vt-pill { font-size:11px; padding:1px 8px; }
.vt-mobile .vt-pick h2, .vt-mobile .vt-pick dl, .vt-mobile .vt-pick p { display:none; }
.vt-mobile .vt-pick-art { aspect-ratio:4/3; flex:none; }
.vt-mobile .vt-count { left:4px; right:4px; bottom:4px; text-align:center; font-size:10px; padding:2px; }
.vt-mobile .vt-pick.vt-selected > .vt-f-body::after { bottom:-18px; }
.vt-mobile .vt-stage { order:3; position:relative; width:calc(100% + 32px); margin:4px -16px 0; aspect-ratio:358 / 280; overflow:hidden; background:url('/app/client/assets/ui/vault/vault-bg.png') 50% 38% / 200% auto no-repeat; }
.vt-mobile .vt-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#02070d,transparent 18%,transparent 82%,#02070d); }
.vt-mobile .vt-ring { left:12.3%; top:77.5%; width:75.4%; height:9.3%; }
.vt-mobile .vt-chest { left:15%; top:1.5%; right:auto; bottom:auto; width:70%; aspect-ratio:1; height:auto; }
.vt-mobile .vt-cta { min-height:58px; width:100%; flex:none; }
.vt-mobile .vt-cta-label, .vt-mobile .vt-store .vt-cta-label, .vt-mobile .vt-actions-empty .vt-open .vt-cta-label { font-size:17px; }
.vt-mobile .vt-rewards ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
.vt-mobile .vt-history li { grid-template-columns:1fr auto; }
.vt-mobile .vt-history time { grid-column:1 / -1; font-size:11px; }
.vt-mobile .vt-tag { min-width:84px; }

/* ---------- вскрытие на странице (этап 2) ---------- */
/* ожидание ответа сервера: сундук дрожит и наливается светом */
.vt-charging .vt-chest img { animation:vt-shake .42s ease-in-out infinite; filter:drop-shadow(0 0 30px var(--c)) brightness(1.15); }
@keyframes vt-shake { 0%,100% { transform:translate(0,0) rotate(0); } 20% { transform:translate(-1.1%,0) rotate(-.8deg); } 40% { transform:translate(1.1%,-.4%) rotate(.8deg); } 60% { transform:translate(-.8%,0) rotate(-.5deg); } 80% { transform:translate(.8%,-.3%) rotate(.5deg); } }
/* сундук: закрытый заряжается → вспышка → открытый (та же рамка 900×900, корпус не прыгает) */
.vt-chest-open-scene { animation:none; }
.vt-chest-open-scene img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 26px color-mix(in srgb,var(--c) 55%,transparent)); }
.vt-chest-open-scene .vt-chest-closed { animation:vt-charge .75s ease-in both, vt-fade-out .1s linear .75s forwards; }
.vt-chest-open-scene .vt-chest-opened { opacity:0; animation:vt-open-pop .6s cubic-bezier(.2,.9,.3,1.2) .75s forwards; }
@keyframes vt-charge { 0% { transform:none; filter:drop-shadow(0 0 18px var(--glow)); } 15%,35%,55%,75% { transform:translate(-1%,0) rotate(-.7deg); } 25%,45%,65%,85% { transform:translate(1%,-.3%) rotate(.7deg); } 100% { transform:scale(1.03); filter:drop-shadow(0 0 40px var(--c)) brightness(1.5); } }
@keyframes vt-fade-out { to { opacity:0; } }
@keyframes vt-open-pop { 0% { opacity:0; transform:scale(.95); filter:brightness(2.2) drop-shadow(0 0 40px var(--c)); } 35% { opacity:1; transform:scale(1.05); } 100% { opacity:1; transform:none; filter:drop-shadow(0 0 26px color-mix(in srgb,var(--c) 55%,transparent)); } }
.vt-flash { position:absolute; left:-45%; right:-45%; top:-35%; bottom:-5%; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 50% 58%,#fff 0,color-mix(in srgb,var(--c) 55%,#fff) 14%,color-mix(in srgb,var(--c) 45%,transparent) 34%,transparent 62%); mix-blend-mode:screen; animation:vt-flash .8s ease-out .72s both; }
@keyframes vt-flash { 0% { opacity:0; transform:scale(.55); } 16% { opacity:1; } 100% { opacity:0; transform:scale(1.35); } }

/* карты */
.vt-rarity-common { --rc:#9db8c8; } .vt-rarity-rare { --rc:#1ea7ff; } .vt-rarity-epic { --rc:#c04dff; } .vt-rarity-legendary { --rc:#f2b33d; }
.vt-desktop .vt-reveal { left:50%; top:calc(22 * var(--vs)); width:0; height:0; z-index:5; }
.vt-received { margin:0; color:#fff; font-size:calc(30 * var(--vs, 1px)); font-weight:850; letter-spacing:.06em; white-space:nowrap; text-shadow:0 0 14px var(--glow),0 2px 6px #000; opacity:0; animation:vt-received .5s ease-out var(--end) forwards; }
.vt-desktop .vt-received { position:absolute; left:0; top:0; transform:translateX(-50%); }
@keyframes vt-received { from { opacity:0; letter-spacing:.2em; } to { opacity:1; letter-spacing:.06em; } }
.vt-desktop .vt-rc-row { position:absolute; left:0; top:calc(60 * var(--vs)); }
.vt-rc { --cw:calc(var(--w) * var(--vs, 1px)); position:absolute; left:calc(var(--x) * var(--vs) - var(--cw) / 2); top:calc(var(--y) * var(--vs)); width:var(--cw); height:calc(var(--cw) * 1.45); transform:rotate(var(--r)); perspective:1000px; opacity:0; animation:vt-rc-fly .62s cubic-bezier(.18,.9,.25,1.08) var(--fly) forwards; }
@keyframes vt-rc-fly { 0% { opacity:0; transform:translate(calc(var(--x) * var(--vs) * -1),calc(400 * var(--vs))) scale(.12) rotate(0deg); } 45% { opacity:1; } 100% { opacity:1; transform:rotate(var(--r)); } }
.vt-rc-inner { position:absolute; inset:0; transform-style:preserve-3d; transform:rotateY(180deg); animation:vt-rc-flip .5s ease-in-out var(--flip) forwards; }
@keyframes vt-rc-flip { from { transform:rotateY(180deg) scale(1); } 50% { transform:rotateY(90deg) scale(1.08); } to { transform:rotateY(0deg) scale(1); } }
.vt-rc-face { position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.vt-rc-back { transform:rotateY(180deg); filter:drop-shadow(0 0 5px var(--rc)) drop-shadow(0 0 22px color-mix(in srgb,var(--rc) 80%,transparent)); }
.vt-rarity-common .vt-rc-back { filter:drop-shadow(0 0 4px #9db8c899) drop-shadow(0 0 12px #9db8c855); }
.vt-rc-back > img { display:block; width:100%; height:100%; object-fit:contain; }
/* временная рубашка до PNG владельца: тёмный металл, окантовка цвета редкости */
.vt-rc-back-temp { position:absolute; inset:0; clip-path:polygon(9% 0,91% 0,100% 6%,100% 94%,91% 100%,9% 100%,0 94%,0 6%); background:linear-gradient(var(--rc),var(--rc)); }
.vt-rc-back-temp::after { content:""; position:absolute; inset:3px; clip-path:inherit; background:repeating-linear-gradient(135deg,#ffffff07 0 2px,transparent 2px 9px),radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--rc) 30%,#0b121b),#05080e 70%); }
.vt-rc-front { filter:drop-shadow(0 6px 14px #000c); }
.vt-rc-frame { position:absolute; inset:0; }
.vt-rc-content { display:flex; flex-direction:column; width:100%; height:100%; background:#03070c; }
.vt-rc-rarity { flex:none; padding:calc(4 * var(--vs, 1px)) 0 calc(3 * var(--vs, 1px)); text-align:center; color:#fff; font-size:calc(10 * var(--vs, 1px)); font-weight:850; letter-spacing:.1em; text-transform:uppercase; background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 55%,#03070c),color-mix(in srgb,var(--rc) 18%,#03070c)); text-shadow:0 1px 2px #000; }
.vt-rc-art { position:relative; flex:1; min-height:0; overflow:hidden; }
.vt-rc-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.vt-rc-content strong { padding:calc(5 * var(--vs, 1px)) calc(6 * var(--vs, 1px)) 0; text-align:center; color:#fff; font-size:calc(13 * var(--vs, 1px)); font-weight:800; line-height:1.15; text-transform:uppercase; }
.vt-rc-content small { text-align:center; color:color-mix(in srgb,var(--rc) 70%,#fff); font-size:calc(9 * var(--vs, 1px)); letter-spacing:.05em; text-transform:uppercase; }
.vt-rc-new { align-self:center; white-space:nowrap; margin:calc(4 * var(--vs, 1px)) 0 calc(6 * var(--vs, 1px)); padding:1px calc(7 * var(--vs, 1px)); border:1px solid currentColor; border-radius:3px; font-size:calc(9 * var(--vs, 1px)); font-style:normal; font-weight:850; letter-spacing:.06em; }
.vt-rc-first { color:#7dffc4; } .vt-rc-dup { color:#9fb3c4; }
.vt-rc-hit { position:absolute; inset:0; z-index:6; width:100%; height:100%; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
.vt-rc-hit:focus-visible { outline:2px solid #fff; outline-offset:2px; }
/* после переворота: вспышка цвета редкости, у легендарной — золотой взрыв */
.vt-rc-front::after { content:""; position:absolute; inset:-30%; z-index:7; pointer-events:none; opacity:0; background:radial-gradient(circle,color-mix(in srgb,var(--rc) 75%,#fff) 0,color-mix(in srgb,var(--rc) 40%,transparent) 32%,transparent 62%); mix-blend-mode:screen; animation:vt-card-burst .7s ease-out calc(var(--flip) + .25s) both; }
.vt-rarity-common .vt-rc-front::after { animation:none; }
.vt-rarity-legendary .vt-rc-front::after { inset:-80%; animation-duration:1.1s; }
.vt-rarity-legendary .vt-rc-front { filter:drop-shadow(0 6px 14px #000c) drop-shadow(0 0 18px #f2b33d99); }
.vt-rarity-epic .vt-rc-front { filter:drop-shadow(0 6px 14px #000c) drop-shadow(0 0 14px #c04dff80); }
@keyframes vt-card-burst { 0% { opacity:0; transform:scale(.4); } 25% { opacity:1; } 100% { opacity:0; transform:scale(1.25); } }
/* клик по экрану во время показа — сразу все карты */
.vt-reveal-skip { position:absolute; z-index:8; margin:0; padding:0; border:0; background:transparent; cursor:pointer; animation:vt-skip-off 0s linear var(--end) forwards; }
.vt-desktop .vt-reveal-skip { left:-50cqw; top:calc(-22 * var(--vs)); width:100cqw; height:100cqh; }
@keyframes vt-skip-off { to { visibility:hidden; pointer-events:none; } }
/* на время показа карточки выбора уходят: веер занимает их место, под ним виден открытый сундук со столбом света */
.vt-desktop .vt-picks { transition:opacity .35s ease, visibility .35s, transform .35s ease; }
.vt-desktop .vt-heading { transition:opacity .35s ease; }
.vt-desktop .vt-scene-revealing .vt-heading { opacity:0; }
.vt-desktop .vt-scene-revealing .vt-picks { opacity:0; visibility:hidden; transform:translateX(-50%) translateY(calc(-30 * var(--vs))); }
.vt-continue { --c:#f2b33d; --hi:#fff4c8; --glow:rgba(242,179,61,.5); }
.vt-continue.vt-blue { --c:#1ea7ff; --hi:#d2f2ff; --glow:rgba(30,167,255,.5); }
.vt-continue.vt-silver { --c:#d6e4f0; --hi:#ffffff; --glow:rgba(214,228,240,.5); }
.vt-continue.vt-violet { --c:#c04dff; --hi:#f6d8ff; --glow:rgba(192,77,255,.55); }
/* пропущено (клик, возврат из досье, «меньше движения») — сразу финальное состояние */
.vt-reveal-skipped, .vt-reveal-skipped * { animation:none !important; }
.vt-reveal-skipped .vt-rc { opacity:1; transform:rotate(var(--r)); }
.vt-reveal-skipped .vt-rc-inner { transform:none; }
.vt-reveal-skipped .vt-received, .vt-reveal-skipped .vt-chest-open-scene .vt-chest-opened { opacity:1; }
.vt-reveal-skipped .vt-chest-open-scene .vt-chest-closed, .vt-reveal-skipped .vt-flash { opacity:0; }
.vt-stage.vt-reveal-skipped .vt-ring i:nth-child(2) { opacity:1; }

/* телефон: карты рядами под подиумом */
.vt-mobile .vt-reveal { order:3; position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; padding:4px 0 6px; }
.vt-mobile .vt-rc-row { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 8px; }
.vt-mobile .vt-rc { --cw:var(--mw); position:relative; left:auto; top:auto; transform:none; animation-name:vt-rc-fly-m; }
@keyframes vt-rc-fly-m { 0% { opacity:0; transform:translateY(-70px) scale(.3); } 100% { opacity:1; transform:none; } }
.vt-mobile .vt-reveal-skipped .vt-rc { transform:none; }
.vt-mobile .vt-received { font-size:22px; }
.vt-mobile .vt-reveal-skip { inset:0; width:100%; height:100%; }
.vt-mobile .vt-rc-content strong { font-size:9px; } .vt-mobile .vt-rc-rarity, .vt-mobile .vt-rc-content small, .vt-mobile .vt-rc-new { font-size:7px; }


/* ---------- узкое высокое окно (ВКонтакте/Max/Telegram в оконном режиме): столбик, как на телефоне ----------
   Решает пропорция самого окна хранилища (container query), а не тип устройства. Добавлено 11.10.2026. */
.vt-desktop { container:vtroot / size; }
@container vtroot (aspect-ratio < 5/4) {
  .vt-desktop { overflow-y:auto; }
  .vt-desktop .vt-scene { height:auto; min-height:100%; max-width:720px; margin:0 auto; overflow:visible; container-type:normal; }
  .vt-desktop .vt-scene::before { display:none; }
  .vt-desktop .vt-scene > :not(.vt-bgbox) { position:relative; left:auto; right:auto; top:auto; width:auto; height:auto; transform:none; }
  .vt-desktop .vt-stage { left:auto; top:auto; height:auto; }
  .vt-desktop .vt-rc-row, .vt-desktop .vt-received { position:static; transform:none; }
  .vt-desktop .vt-scene-revealing .vt-picks, .vt-desktop .vt-scene-revealing .vt-heading { opacity:1; visibility:visible; transform:none; }
  .vt-desktop .vt-scene { --vs:1px; display:flex; flex-direction:column; gap:16px; padding:20px 16px 28px; }
  .vt-desktop .vt-bgbox { display:contents; }
  .vt-desktop .vt-scene > .vt-bgbox { order:3; }
  .vt-desktop .vt-heading { order:1; }
  .vt-desktop .vt-picks { order:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .vt-desktop .vt-actions { order:4; flex-direction:column; }
  .vt-desktop .vt-error { order:5; }
  .vt-desktop .vt-guarantees { order:6; } .vt-desktop .vt-rewards { order:7; } .vt-desktop .vt-history { order:8; }
  .vt-desktop .vt-heading h1 { font-size:32px; }
  .vt-desktop .vt-pick { --cut:9px; }
  .vt-desktop .vt-pick header { padding:8px 6px 6px; }
  .vt-desktop .vt-pill { font-size:11px; padding:1px 8px; }
  .vt-desktop .vt-pick h2, .vt-desktop .vt-pick dl, .vt-desktop .vt-pick p { display:none; }
  .vt-desktop .vt-pick-art { aspect-ratio:4/3; flex:none; }
  .vt-desktop .vt-count { left:4px; right:4px; bottom:4px; text-align:center; font-size:10px; padding:2px; }
  .vt-desktop .vt-pick.vt-selected > .vt-f-body::after { bottom:-18px; }
  .vt-desktop .vt-stage { order:3; position:relative; width:calc(100% + 32px); margin:4px -16px 0; aspect-ratio:358 / 280; overflow:hidden; background:url('/app/client/assets/ui/vault/vault-bg.png') 50% 38% / 200% auto no-repeat; }
  .vt-desktop .vt-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#02070d,transparent 18%,transparent 82%,#02070d); }
  .vt-desktop .vt-ring { left:12.3%; top:77.5%; width:75.4%; height:9.3%; }
  .vt-desktop .vt-chest { left:15%; top:1.5%; right:auto; bottom:auto; width:70%; aspect-ratio:1; height:auto; }
  .vt-desktop .vt-cta { min-height:58px; width:100%; flex:none; }
  .vt-desktop .vt-cta-label, .vt-desktop .vt-store .vt-cta-label, .vt-desktop .vt-actions-empty .vt-open .vt-cta-label { font-size:17px; }
  .vt-desktop .vt-rewards ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vt-desktop .vt-history li { grid-template-columns:1fr auto; }
  .vt-desktop .vt-history time { grid-column:1 / -1; font-size:11px; }
  .vt-desktop .vt-tag { min-width:84px; }
  .vt-desktop .vt-reveal { order:3; position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; padding:4px 0 6px; }
  .vt-desktop .vt-rc-row { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 8px; }
  .vt-desktop .vt-rc { --cw:var(--mw); position:relative; left:auto; top:auto; transform:none; animation-name:vt-rc-fly-m; }
  .vt-desktop .vt-reveal-skipped .vt-rc { transform:none; }
  .vt-desktop .vt-received { font-size:22px; }
  .vt-desktop .vt-reveal-skip { inset:0; width:100%; height:100%; }
  .vt-desktop .vt-rc-content strong { font-size:9px; } .vt-desktop .vt-rc-rarity, .vt-desktop .vt-rc-content small, .vt-desktop .vt-rc-new { font-size:7px; }
}

/* учебный контейнер: заголовок по центру над подиумом (на телефоне и в высоком окне — как обычно, столбиком) */
.vt-desktop .vt-training-heading { left:50%; top:calc(70 * var(--vs)); width:auto; transform:translateX(-50%); text-align:center; border-left:0; background:radial-gradient(ellipse at 50% 50%,#020c17b3,transparent 72%); padding:calc(10 * var(--vs)) calc(60 * var(--vs)); }
.vt-desktop .vt-training-heading h1 { font-size:calc(52 * var(--vs)); white-space:nowrap; text-shadow:0 0 18px #d6e4f066,0 3px 8px #000; }
.vt-desktop .vt-training-heading p { color:#e6f0f8; letter-spacing:.26em; }
.vt-training .vt-silver .vt-cta-label, .vt-training .vt-open.vt-silver .vt-cta-label { color:#fff; }

@media (prefers-reduced-motion:reduce) { .vt-chest, .vt-chest img, .vt-ring i { animation:none; } .vt-f-line { transition:none; } .vt-charging .vt-chest img { animation:none; } }