/* Vibrozz 2 — achievements and rank (/achievements), the celebration dialog */
.vz-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* medal: tier gradients come from #vz-ac-defs; a locked one is drawn with the theme */
.ac-med{display:block;flex:none;overflow:visible}
.ac-med .i{stroke:#fff}
.ac-med.t2 .i,.ac-med.t4 .i{stroke:#fff}
.ac-med.t1,.ac-med.t2,.ac-med.t3,.ac-med.t4,.ac-med.t5{filter:drop-shadow(0 3px 6px rgba(16,24,40,.16))}
.ac-med.off .r{fill:var(--soft-2)}
.ac-med.off .f{fill:var(--soft)}
.ac-med.off .i{stroke:var(--tx-3)}
:root[data-vz-theme=dark] .ac-med.off .r{fill:color-mix(in srgb,var(--soft-2) 50%,var(--soft))}
:root[data-vz-theme=dark] .ac-med.off .f{fill:color-mix(in srgb,var(--soft) 70%,var(--card))}

/* rank emblem (2.8): the avatar frames' glass in the hexagon — a tinted glass body, white edge and highlight, the pulse
   in white, glass beads up to the rank, «Сияние» behind (a soft glow turning and breathing, a glint running round the
   rim; core.js plays them only on screen). Everything in --s (the emblem's width), set per place. */
.rke{--s:44px;position:relative;display:block;flex:none;width:var(--s);height:calc(var(--s)*100/96);isolation:isolate}
:is(.rke,.ac-rk).l0{--c1:#A9B2C1;--c2:#5D6677;--c3:#E4E8EE}
:is(.rke,.ac-rk).l1{--c1:#5FD99B;--c2:#11905A;--c3:#B6F36B}
:is(.rke,.ac-rk).l2{--c1:#6EA6FF;--c2:#2357D4;--c3:#5FE3F0}
:is(.rke,.ac-rk).l3{--c1:#B38CFF;--c2:#6638D2;--c3:#FF8AD8}
:is(.rke,.ac-rk).l4{--c1:#FFB466;--c2:#DB5F14;--c3:#FF6FA0}
:is(.rke,.ac-rk).l5{--c1:#FF7D97;--c2:#BE2346;--c3:#B07CFF}
:is(.rke,.ac-rk).l6{--c1:#FCE59A;--c2:#C68D12;--c3:#FFFFFF}
.rke-g,.rke-d,.rke-r{position:absolute;pointer-events:none}
.rke-g{inset:-7% -9%;z-index:0;border-radius:50%;background:conic-gradient(var(--c1),var(--c3),var(--c2),var(--c1),var(--c3),var(--c1));
  filter:blur(calc(var(--s)*.08));opacity:.5;animation:frspin 6s linear infinite paused,frbreath 3.4s ease-in-out infinite paused}
.rke.l6>.rke-g{background:conic-gradient(#FFD24D,#FF7AB6,#9B7BFF,#58C7FF,#FFD24D,#FF9A4D,#FFD24D);opacity:.62}
.rke-d{inset:0;z-index:1;clip-path:polygon(50% 3%,92.7% 26.5%,92.7% 73.5%,50% 97%,7.3% 73.5%,7.3% 26.5%);
  background:linear-gradient(115deg,transparent 52%,rgba(255,255,255,.14) 52.5% 60%,transparent 60.5%),
    linear-gradient(155deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.2)),
    linear-gradient(180deg,color-mix(in srgb,var(--c1) 52%,transparent),color-mix(in srgb,var(--c2) 70%,transparent));
  -webkit-backdrop-filter:blur(calc(var(--s)*.06)) saturate(1.7);backdrop-filter:blur(calc(var(--s)*.06)) saturate(1.7)}
.rke.l6>.rke-d{background:linear-gradient(115deg,transparent 52%,rgba(255,255,255,.16) 52.5% 60%,transparent 60.5%),
    linear-gradient(155deg,rgba(255,255,255,.5),rgba(255,255,255,.1) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.22)),
    linear-gradient(180deg,color-mix(in srgb,#F2C443 70%,transparent),color-mix(in srgb,#B87A0A 85%,transparent))}
.rke-r{inset:0;z-index:2;mix-blend-mode:screen;opacity:.85;
  clip-path:polygon(evenodd,50% 3%,92.7% 26.5%,92.7% 73.5%,50% 97%,7.3% 73.5%,7.3% 26.5%,50% 3%,50% 8.6%,87.6% 29.3%,87.6% 70.7%,50% 91.4%,12.4% 70.7%,12.4% 29.3%,50% 8.6%)}
.rke-r>i{position:absolute;inset:-22%;border-radius:50%;background:conic-gradient(from 90deg,transparent 0 8%,rgba(255,255,255,.95) 18%,transparent 30% 50%,var(--c3) 62%,transparent 76%);
  animation:frspinr 4.2s linear infinite paused;animation-delay:inherit}
.rke.on>.rke-g,.rke.on>.rke-r>i{animation-play-state:running}
.rke-f{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:3;
  filter:drop-shadow(0 0 calc(var(--s)*.025) var(--c1)) drop-shadow(0 calc(var(--s)*.008) calc(var(--s)*.016) rgba(0,0,0,.28))}
.rke-f .h{fill:url(#vz-shine);opacity:.75}
.rke-f .o{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.4}
.rke-f .e{fill:none;stroke:rgba(255,255,255,.85);stroke-width:max(1px,calc(var(--s)*.014));vector-effect:non-scaling-stroke;stroke-linejoin:round}
.rke-f .i{fill:none;stroke:#fff;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}
.rke-f .p circle{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.62);stroke-width:.9}
.rke-f .p .on{fill:url(#vz-bead);stroke:#fff;stroke-width:.6}
:root:not([data-vz-theme=dark]) .rke-g{opacity:.32}
:root:not([data-vz-theme=dark]) .rke.l6>.rke-g{opacity:.42}
:root:not([data-vz-theme=dark]) .rke:not(.l6)>.rke-d{background:linear-gradient(115deg,transparent 52%,rgba(255,255,255,.14) 52.5% 60%,transparent 60.5%),
    linear-gradient(155deg,rgba(255,255,255,.4),rgba(255,255,255,.06) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.18)),
    linear-gradient(180deg,color-mix(in srgb,var(--c1) 66%,transparent),color-mix(in srgb,var(--c2) 84%,transparent))}
:root:not([data-vz-theme=dark]) .rke-r{mix-blend-mode:normal;opacity:.7}
:root:not([data-vz-theme=dark]) .rke-f{filter:drop-shadow(0 0 calc(var(--s)*.02) var(--c1)) drop-shadow(0 calc(var(--s)*.01) calc(var(--s)*.02) rgba(16,24,40,.3))}
/* no rank: quiet neutral glass */
.rke.l0>.rke-r{display:none}
.rke.l0>.rke-g{animation:none;opacity:.3}
/* small (a tag next to a name): the glass and the pulse; the glow stands still */
.rke.sm>.rke-r,.rke.sm .rke-f .o,.rke.sm .rke-f .p{display:none}
.rke.sm>.rke-g{animation:none;inset:-20%}
.rke.sm .rke-f .i{stroke-width:9}
.rke.sm>.rke-f{filter:drop-shadow(0 0 1px var(--c1))}
/* a rank not reached yet */
.rke.dim{filter:grayscale(1);opacity:.35}
.rke.dim>.rke-g,.rke.dim>.rke-r{display:none}
@media (prefers-reduced-motion:reduce){.rke-g,.rke-r>i{animation:none!important}}

/* page */
.ac{display:grid;gap:20px}
.ac-warn{border-radius:var(--r-card)}
.ac-hero{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,340px);align-items:center;gap:28px;padding:28px 32px;position:relative;overflow:hidden}
.ac-hero::before{content:"";position:absolute;inset:-40% auto auto -10%;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 22%,transparent),transparent);pointer-events:none}
.ac-emb{position:relative}
.ac-emb .rke{--s:132px}
.ac-hi{display:grid;gap:4px;min-width:0;position:relative}
.ac-k{color:var(--tx-3);font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px}
.ac-ld::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:vspin .8s linear infinite}
.ac-hi h2{font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.ac-xp{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.ac-xp b{font-size:20px;font-weight:700;letter-spacing:-.01em}
.ac-xp span{color:var(--tx-3);font-weight:600;font-size:14px}
.ac-bar{height:10px;border-radius:5px;margin-top:8px}
.ac-bar i{border-radius:5px;transition:width .6s ease-out}
.ac-next{display:flex;gap:6px;flex-wrap:wrap;font-size:14px;color:var(--tx-3);margin-top:4px}
.ac-next b{color:var(--tx);font-weight:600}
.ac-sts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:relative}
.ac-st{background:var(--soft);border-radius:var(--r-tile,16px);padding:12px 16px;display:grid;gap:2px;min-width:0}
.ac-st span{color:var(--tx-3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-st b{font-size:20px;font-weight:700;letter-spacing:-.01em}
.ac-st b small{font-size:14px;color:var(--tx-3);font-weight:600}

/* rank ladder */
.ac-lad{padding:18px 12px}
.ac-steps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;overflow-x:auto;scrollbar-width:none;position:relative}
.ac-steps::-webkit-scrollbar{display:none}
.ac-step{display:grid;justify-items:center;gap:6px;text-align:center;padding:10px 6px 12px;border-radius:18px;min-width:96px;position:relative}
.ac-step::after{content:"";position:absolute;top:32px;left:calc(50% + 30px);right:calc(-50% + 30px);height:2px;border-radius:1px;background:var(--line-2)}
.ac-step:last-child::after{display:none}
.ac-step.done::after{background:var(--tx-3)}
.ac-step b{font-size:13px;font-weight:600;line-height:1.25;color:var(--tx-2)}
.ac-step small{font-size:12px;color:var(--tx-3)}
.ac-step.now{background:var(--soft)}
.ac-step.now b{color:var(--tx);font-weight:700}
.ac-step.next b{color:var(--tx-3)}

/* achievements */
.ac-grp .ch h3 small{font-size:14px}
.ac-grid{display:grid;gap:8px;padding:4px 24px 24px}
.ac-it{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:18px;padding:14px 18px;border-radius:var(--r-tile,16px);background:var(--soft);min-width:0;position:relative}
.ac-it.fresh{background:color-mix(in srgb,var(--acc) 16%,var(--card));box-shadow:inset 0 0 0 1.5px var(--acc-2)}
.ac-it.fresh .ac-med{animation:acpop .7s cubic-bezier(.2,1.6,.4,1) both}
.ac-tx{display:grid;gap:4px;min-width:0}
.ac-nm{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.ac-nm b{font-size:15px;font-weight:700}
.ac-it:not(.got) .ac-nm b{color:var(--tx-2)}
.ac-tx>small{color:var(--tx-3);font-size:13px;line-height:1.3}
.ac-rec{font-size:12px;font-weight:600;color:var(--tx-3);background:var(--card);border-radius:7px;padding:2px 7px}
.ac-pr{display:flex;align-items:center;gap:10px;margin-top:2px;max-width:460px}
.ac-pb{flex:1;height:6px;background:var(--card)}
:root[data-vz-theme=dark] .ac-pb{background:var(--line-2)}
.ac-pb i{background:var(--tx-3)}
.ac-pb.t1 i{background:#C07A45}.ac-pb.t2 i{background:#97A2B0}.ac-pb.t3 i{background:#E0A511}.ac-pb.t4 i{background:#3B9BD3}.ac-pb.t5 i{background:#8A4DE2}
/* the five tiers of a badge: reached ones in the tier's colour */
.ac-trk{display:grid;grid-template-columns:repeat(5,62px);gap:6px}
.ac-tk{display:grid;justify-items:center;gap:1px;padding:6px 2px;border-radius:12px;background:var(--card);color:var(--tx-3);min-width:0}
.ac-tk b{font-size:12px;font-weight:800;letter-spacing:.02em}
.ac-tk small{font-size:12px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ac-tk.on{color:#fff}
.ac-tk.t2,.ac-tk.t3,.ac-tk.t4{color:#1F2023}   /* silver, gold, platinum: white is unreadable on them */
.ac-tk.t1{background:linear-gradient(160deg,#D4915C,#8C4A1C)}.ac-tk.t2{background:linear-gradient(160deg,#C3CCD7,#7B8796)}
.ac-tk.t3{background:linear-gradient(160deg,#F5BE34,#B57708)}.ac-tk.t4{background:linear-gradient(160deg,#62C6E3,#2A6FBF)}
.ac-tk.t5{background:linear-gradient(160deg,#B985FF,#6631CC)}
.ac-pr span{font-size:12px;font-weight:600;color:var(--tx-2);white-space:nowrap;font-variant-numeric:tabular-nums}

/* celebration */
.v-dialog.ac-cele{max-width:440px;text-align:center;overflow:hidden}
.v-dialog.ac-cele .v-dialog-body{justify-items:center;gap:6px;padding-top:6px;text-align:center}
.v-dialog.ac-cele .ac-ct+.ac-cs{margin-top:-2px}
.ac-cg{position:relative;display:grid;place-items:center;width:200px;height:170px;margin-bottom:4px}
.ac-glow{position:absolute;inset:-10px;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--acc) 42%,transparent) 0deg 9deg,transparent 9deg 24deg);
  -webkit-mask:radial-gradient(closest-side,#000 30%,transparent 100%);mask:radial-gradient(closest-side,#000 30%,transparent 100%);animation:vspin 14s linear infinite;opacity:.9}
.ac-cg>svg{position:relative}
.ac-cg .rke{--s:120px}
/* a new rank: beams of light in the rank's colours behind the glass */
.ac-cg.ac-rk .ac-glow{inset:-18px;opacity:.8;
  background:repeating-conic-gradient(from 6deg,transparent 0deg,rgba(255,255,255,.7) 2deg,transparent 4deg 30deg),
    repeating-conic-gradient(from 0deg,transparent 0deg,color-mix(in srgb,var(--c1) 70%,transparent) 7.5deg,transparent 15deg),
    radial-gradient(closest-side,color-mix(in srgb,var(--c1) 45%,transparent),transparent)}
.ac-cg.ac-rk.l6 .ac-glow{background:repeating-conic-gradient(from 6deg,transparent 0deg,rgba(255,255,255,.75) 2deg,transparent 4deg 30deg),
    repeating-conic-gradient(from 0deg,transparent 0deg,rgba(255,210,77,.75) 7.5deg,transparent 15deg,transparent 15deg,rgba(255,122,182,.5) 22.5deg,transparent 30deg,transparent 30deg,rgba(88,199,255,.5) 37.5deg,transparent 45deg),
    radial-gradient(closest-side,rgba(255,210,77,.5),transparent)}
:root:not([data-vz-theme=dark]) .ac-cg.ac-rk .ac-glow{opacity:.45;
  background:repeating-conic-gradient(from 0deg,transparent 0deg,color-mix(in srgb,var(--c1) 60%,var(--c2)) 7.5deg,transparent 15deg),
    radial-gradient(closest-side,color-mix(in srgb,var(--c1) 40%,transparent),transparent)}
.pop{animation:acpop .8s cubic-bezier(.2,1.6,.4,1) both}
.ac-ck{color:var(--tx-3);font-size:14px;font-weight:600;text-align:center}
.v-dialog.ac-cele .ac-ct{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.2;padding:0;text-align:center}
.ac-ct span{color:var(--tx-3)}
.ac-cs{color:var(--tx-2);font-size:15px;text-align:center}
.ac-cl{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px;margin:10px 0 4px}
.ac-ci{display:grid;justify-items:center;gap:8px;width:110px}
.ac-ci b{font-size:13px;font-weight:600;line-height:1.25}
.ac-ci.more{place-content:center;height:64px}.ac-ci.more b{font-size:18px;color:var(--tx-3)}
.ac-ci:nth-child(2) .pop{animation-delay:.08s}.ac-ci:nth-child(3) .pop{animation-delay:.16s}.ac-ci:nth-child(4) .pop{animation-delay:.24s}
.ac-ci:nth-child(5) .pop{animation-delay:.32s}.ac-ci:nth-child(6) .pop{animation-delay:.4s}
.v-dialog.ac-cele .acts{width:100%;margin-top:14px}
@keyframes acpop{0%{transform:scale(.4) rotate(-12deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pop,.ac-it.fresh .ac-med,.ac-glow{animation:none}}

@media (max-width:1100px){.ac-it{grid-template-columns:56px minmax(0,1fr)}.ac-trk{grid-column:2/-1;grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:1280px){
  .ac-hero{grid-template-columns:auto minmax(0,1fr)}
  .ac-sts{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .ac{gap:14px}
  .ac-hero{grid-template-columns:minmax(0,1fr);gap:16px;padding:20px 18px}
  .ac-emb{position:absolute;top:18px;right:18px}
  .ac-emb .rke{--s:68px}
  .ac-hi>.ac-k,.ac-hi>h2,.ac-hi>.ac-next{padding-right:80px}
  .ac-hi h2{font-size:22px}
  .ac-xp b{font-size:17px}
  .ac-sts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ac-st{padding:10px 14px}
  .ac-st b{font-size:18px}
  .ac-lad{padding:12px 6px}
  .ac-steps{grid-template-columns:repeat(7,96px);scroll-snap-type:x proximity}
  .ac-step{scroll-snap-align:center}
  .ac-grid{gap:10px;padding:2px 16px 18px}
  .ac-it{grid-template-columns:48px minmax(0,1fr);padding:14px;gap:10px 14px}
  .ac-it .ac-med{width:48px;height:48px}
  .ac-trk{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .ac-tk small{font-size:11px}
  .ac-cg{width:180px;height:150px}
  .ac-cg .ac-med{width:104px;height:auto}
  .ac-cg .rke{--s:104px}
}

/* «О званиях» — folded, quiet */
.ac-about{padding:0 4px}
.ac-about summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--tx-3);font-size:14px;font-weight:600;padding:6px 8px;border-radius:10px;list-style:none;user-select:none}
.ac-about summary::-webkit-details-marker{display:none}
@media (pointer:coarse){.ac-about summary{min-height:40px}}
.ac-about summary:hover{color:var(--tx-2);background:var(--soft)}
.ac-about .ac-chev{transition:transform .15s}
.ac-about[open] .ac-chev{transform:rotate(90deg)}
.ac-about>p{color:var(--tx-2);font-size:14px;line-height:1.5;margin:10px 8px 14px;max-width:760px}
.ac-ab{display:grid;gap:4px;margin:0 0 8px;max-width:760px}
.ac-ar{display:flex;align-items:flex-start;gap:14px;padding:10px 8px;border-radius:14px}
.ac-ar.now{background:var(--card);box-shadow:var(--shadow)}
.ac-ar .rke{--s:30px;margin-top:1px}
.ac-ar b{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:700}
.ac-ar b small{font-size:12px;font-weight:600;color:var(--tx-3)}
.ac-ar .ac-ad{display:block;color:var(--tx-2);font-size:14px;line-height:1.45;margin-top:2px}

/* avatar frame by rank (core.js frame(): drawn around the avatar, the layout does not move) */
/* 2.7 avatar frame: glass ring + «Сияние» + glass details, everything in --s (the avatar's size) so it is full at any size */
.avf{--s:36px;position:relative;display:inline-grid;flex:none;vertical-align:middle;border-radius:50%;isolation:isolate}
.avf:has(>.ava.sm){--s:28px}.avf:has(>.ava.ac-pv){--s:48px}.avf:has(>.adm-ava){--s:44px}.avf:has(>.ava.lg){--s:88px}
.avf.rk1{--c1:#5FD99B;--c2:#11905A;--c3:#B6F36B}.avf.rk2{--c1:#6EA6FF;--c2:#2357D4;--c3:#5FE3F0}
.avf.rk3{--c1:#B38CFF;--c2:#6638D2;--c3:#FF8AD8}.avf.rk4{--c1:#FFB466;--c2:#DB5F14;--c3:#FF6FA0}
.avf.rk5{--c1:#FF7D97;--c2:#BE2346;--c3:#B07CFF}.avf.rk6{--c1:#FCE59A;--c2:#C68D12;--c3:#FFFFFF}
.avf>.ava{position:relative;z-index:2;box-shadow:0 0 0 calc(var(--s)*.012) rgba(255,255,255,.35),0 calc(var(--s)*.02) calc(var(--s)*.05) rgba(0,0,0,.35)}
.avf-g,.avf-d,.avf-r{position:absolute;border-radius:50%;pointer-events:none}
.avf-g{inset:-20%;z-index:0;background:conic-gradient(var(--c1),var(--c3),var(--c2),var(--c1),var(--c3),var(--c1));filter:blur(calc(var(--s)*.08));opacity:.85;
  animation:frspin 6s linear infinite paused,frbreath 3.4s ease-in-out infinite paused}
.avf.rk6 .avf-g{background:conic-gradient(#FFD24D,#FF7AB6,#9B7BFF,#58C7FF,#FFD24D,#FF9A4D,#FFD24D)}
:root:not([data-vz-theme=dark]) .avf-g{opacity:.55}
.avf-d{inset:-13%;z-index:1;
  background:linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 38%,rgba(255,255,255,.04) 62%,rgba(255,255,255,.32)),color-mix(in srgb,var(--c1) 30%,transparent);
  -webkit-backdrop-filter:blur(calc(var(--s)*.05)) saturate(1.7);backdrop-filter:blur(calc(var(--s)*.05)) saturate(1.7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 calc(var(--s)*.02) calc(var(--s)*.03) rgba(255,255,255,.55),inset 0 calc(var(--s)*-.025) calc(var(--s)*.05) rgba(0,0,0,.28),0 calc(var(--s)*.03) calc(var(--s)*.08) rgba(0,0,0,.25)}
:root:not([data-vz-theme=dark]) .avf-d{background:linear-gradient(150deg,rgba(255,255,255,.8),rgba(255,255,255,.25) 40%,rgba(255,255,255,.15) 62%,rgba(255,255,255,.6)),color-mix(in srgb,var(--c1) 38%,transparent)}
.avf-r{inset:-13%;z-index:4;mix-blend-mode:screen;opacity:.8;
  background:conic-gradient(from 90deg,transparent 0 8%,rgba(255,255,255,.9) 18%,transparent 30% 50%,var(--c3) 62%,transparent 76%);
  -webkit-mask:radial-gradient(closest-side,transparent 79%,#000 80%,#000 99%,transparent);mask:radial-gradient(closest-side,transparent 79%,#000 80%,#000 99%,transparent);
  animation:frspinr 4.2s linear infinite paused}
:root:not([data-vz-theme=dark]) .avf-r{mix-blend-mode:normal;opacity:.6}
.avf.on>.avf-g,.avf.on>.avf-r{animation-play-state:running}
.avf-f{position:absolute;left:-25%;top:-25%;width:150%;height:150%;overflow:visible;pointer-events:none;z-index:5;
  filter:drop-shadow(0 0 2.5px var(--c1)) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.avf-f .dk-s,.avf-f .dk-p,.avf-f .dk-l ellipse{fill:color-mix(in srgb,var(--c1) 45%,rgba(255,255,255,.2));stroke:rgba(255,255,255,.75);stroke-width:1.3}
.avf-f .dk-p{stroke-width:5px}
.avf-f .dk-l path{stroke:rgba(255,255,255,.45);stroke-width:1.6}
.avf-f .dk-t{stroke:rgba(255,255,255,.8);stroke-width:2.2;stroke-linecap:round}
.avf-f .dk-o{stroke:var(--c1);stroke-width:2;opacity:.75}
.avf-f .dk-b{stroke:#fff}
.avf-f .dk-hl{fill:#fff;opacity:.55}
@keyframes frspin{to{transform:rotate(360deg)}}
@keyframes frspinr{to{transform:rotate(-360deg)}}
@keyframes frbreath{0%,100%{scale:.95}50%{scale:1.05}}
@media (prefers-reduced-motion:reduce){.avf-g,.avf-r{animation:none!important}}

/* rank checklist (hero) and requirements (about) */
.ac-next{margin-top:2px}
.ac-cks{display:grid;gap:8px;margin-top:10px;max-width:560px}
.ac-ckr{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:4px 10px}
.ac-cki{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--soft-2);color:var(--tx-3)}
.ac-ckr.ok .ac-cki{background:var(--up);color:var(--on-up,#fff)}
.ac-ckl{font-size:14px;color:var(--tx-2);min-width:0}
.ac-ckr.ok .ac-ckl{color:var(--tx)}
.ac-ckv{font-size:13px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.ac-ckv.up{color:var(--up)}.ac-ckv.dn{color:var(--dn)}
.ac-ckb{grid-column:2/-1;height:5px}
.ac-ckb i{background:var(--tx-3)}
.ac-ckr.ok .ac-ckb i{background:var(--up)}
.ac-req{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ac-req em{font-style:normal;font-size:12px;font-weight:600;color:var(--tx-2);background:var(--soft);border-radius:8px;padding:3px 8px}
.ac-ar.now .ac-req em{background:var(--page)}
.ac-req em.ok{color:var(--up);background:var(--up-soft)}
/* chat header: overlapping faces keep overlapping when framed (plain frames there) */
.ct-faces>.avf+*,.ct-faces>*+.avf{margin-left:-10px}
/* rank tag next to a name (chat) */
.rk-tag{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:12px;font-weight:600;color:var(--tx-3);vertical-align:-2px;white-space:nowrap}
.rk-tag .rke{--s:13px}
/* «О званиях»: the viewer's avatar in each rank's frame */
.ac-ar{align-items:center}
.ac-ar>.rke,.ac-ar>.grow{align-self:flex-start}
.ac-ar>.grow{padding-top:5px}
.ac-pvw{flex:none;display:grid;place-items:center;width:84px;height:76px}
.ava.ac-pv{width:48px;height:48px;font-size:17px}
@media (max-width:760px){.ac-pvw{width:64px}.ava.ac-pv{width:40px;height:40px;font-size:15px}}

/* 2.2: discipline streak — header chip */
.v-streak{display:inline-flex;align-items:center;gap:5px;height:42px;padding:0 13px 0 10px;border:0;border-radius:14px;background:var(--card);box-shadow:var(--shadow);color:var(--tx-3);position:relative;flex:none;cursor:pointer}
.v-streak[hidden]{display:none}
.v-streak b{font-size:15px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.v-streak.on b{color:var(--tx)}
.v-streak:hover{background:var(--soft)}
.v-streak:active{transform:scale(.96)}
.v-streak-w{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 2px var(--card);animation:skpulse 1.6s ease-in-out 3}
@keyframes skpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.fl{display:block;flex:none;overflow:visible}
.fl .fo{transform-origin:12px 21px}
.fl .fi{transform-origin:12px 20px}
/* the header chip is on every page: its flame plays a few times when it appears or changes, then rests */
.v-streak.on .fl .fo{animation:flk 2.6s ease-in-out 3}
.v-streak.on .fl .fi{animation:flk2 1.9s ease-in-out 4}
.sk-fl.on .fl .fo,.sk-cg .fl .fo{animation:flk 2.6s ease-in-out infinite}
.sk-fl.on .fl .fi,.sk-cg .fl .fi{animation:flk2 1.9s ease-in-out infinite}
@keyframes flk{0%,100%{transform:scale(1,1) skewX(0)}30%{transform:scale(.97,1.05) skewX(-2deg)}60%{transform:scale(1.02,.97) skewX(1.5deg)}}
@keyframes flk2{0%,100%{transform:scale(1)}50%{transform:scale(.9,1.08)}}
@media (prefers-reduced-motion:reduce){.fl .fo,.fl .fi,.v-streak-w{animation:none!important}}

/* streak dialog */
.v-dialog.sk-dlg{max-width:440px}
.sk-head{display:flex;align-items:center;gap:16px}
.sk-fl{display:grid;place-items:center;width:92px;height:92px;border-radius:28px;background:radial-gradient(closest-side,color-mix(in srgb,#FF8A1F 22%,transparent),transparent);flex:none}
.sk-head>div{display:grid;gap:2px}
.sk-n{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1}
.sk-u{font-size:16px;font-weight:600;color:var(--tx-2)}
.sk-head small{font-size:13px;color:var(--tx-3);font-weight:500}
.sk-today .pill{font-size:13px;padding:5px 10px;border-radius:10px}
.sk-warn{display:grid;gap:6px;padding:10px 12px;border-radius:16px;background:var(--warn-soft)}
.sk-wr{display:flex;align-items:center;gap:10px;font-size:14px}
.sk-wr b{font-weight:700}
.sk-next{display:grid;gap:6px;font-size:14px;color:var(--tx-2)}
.sk-next b{color:var(--tx)}
.sk-bar{height:8px}
.sk-bar i{background:linear-gradient(90deg,#FF8A1F,#FFD43F)}
.sk-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.sk-wd{font-size:11px;font-weight:600;color:var(--tx-3);text-align:center;margin-bottom:-2px}
.sk-c{height:30px;border-radius:9px;background:var(--soft);display:grid;place-items:center}
.sk-c.ok{background:color-mix(in srgb,#FF8A1F 18%,var(--card));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#FF8A1F 55%,transparent)}
.sk-c.bad{background:color-mix(in srgb,var(--dn) 16%,var(--card));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--dn) 70%,transparent)}
.sk-c.bad::after{content:"";width:10px;height:2px;border-radius:1px;background:var(--dn);transform:rotate(-45deg);box-shadow:0 0 0 0 var(--dn)}
.sk-c.fut{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.sk-c.now{outline:2px solid var(--tx);outline-offset:1px}
.sk-rule{font-size:13px;color:var(--tx-3);line-height:1.45}
.sk-cg .ac-glow.sk-glow{background:repeating-conic-gradient(from 0deg,color-mix(in srgb,#FF8A1F 40%,transparent) 0deg 9deg,transparent 9deg 24deg)}
.ac-sst{border:0;text-align:left;cursor:pointer;color:inherit}
.ac-sst:hover{background:var(--soft-2)}
.ac-sst b{display:flex;align-items:center;gap:6px}
.ac-sst b small{font-size:13px;color:var(--tx-3);font-weight:600}
@media (max-width:760px){
  .v-streak{height:40px;padding:0 10px 0 8px;gap:3px}
  .v-streak .fl{width:20px;height:20px}
  .sk-n{font-size:38px}
}