/* Odznak podporovatele v3 (core/badge-v3.js). Předloha 1:1: canvas docs/mockups/2026-10-21-odznaky-v3-canvas.dc.html
   (keyframes a malý odznak v chatu) + docs/mockups/2026-10-21-obchod-odznaku-velky.html (velký odznak, třídy .anim).
   Takt srdce 3,6 s. Animace běží jen pod .uc-b3-run (installBadgeV3Motion = jen viditelné odznaky; obchod si třídu
   dá na kontejner sám), prefers-reduced-motion = bez animací. */
.uc-b3 { position: relative; display: inline-block; flex: none; vertical-align: middle; line-height: 0; }
.uc-b3 + .uc-b3, .bdg-img + .uc-b3, .uc-b3 + .bdg-img { margin-left: 3px; }
/* V řádku chatu na střed velkých písmen jména: vertical-align: middle míří na střed malých písmen a odznak (20–24 px)
   tak seděl o 2–3,5 px níž (změřeno headless 13 / 14 / 16 px písma, 2026-10-21). */
.msg .uc-b3 { top: -.19em; }
/* Velikost v chatu = poměr (--b3k, 20 px → 1) × velikost odznaků řádku: malé / střední / velké 20 px (jako dřív),
   XL 25 px, Humongous 38 px, OBS chat 1,4 em (web.css .bdg-img) — dřív pevně 20–24 px, v OBS drobné. */
.msg .uc-b3 { --b3-base: 20px; width: calc(var(--b3-base) * var(--b3k, 1)) !important; height: calc(var(--b3-base) * var(--b3k, 1)) !important; }
.msg .uc-b3 .uc-b3-svg { width: 100%; height: 100%; }
body.layout-xlarge .msg .uc-b3 { --b3-base: 25px; }
body.layout-humongous .msg .uc-b3 { --b3-base: 38px; }
body.uc-raw.uc-font .msg .uc-b3 { --b3-base: 1.4em; }
.uc-b3-svg { position: relative; display: block; overflow: visible; }
.uc-b3-halo { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; opacity: .6; }
.uc-b3 svg * { transform-box: view-box; }

@keyframes bdBeat { 0% { transform: scale(1) } 6% { transform: scale(.88) } 13% { transform: scale(1.32) } 19% { transform: scale(.93) } 25% { transform: scale(1.14) } 33%, 100% { transform: scale(1) } }
@keyframes bdTL { 0%, 4% { transform: translate(0, 0) rotate(0) } 13% { transform: translate(-1.4px, -1.2px) rotate(-50deg) } 22% { transform: translate(-.6px, -.5px) rotate(-20deg) } 33%, 100% { transform: translate(0, 0) rotate(0) } }
@keyframes bdTR { 0%, 4% { transform: translate(0, 0) rotate(0) } 13% { transform: translate(1.4px, -1.2px) rotate(50deg) } 22% { transform: translate(.6px, -.5px) rotate(20deg) } 33%, 100% { transform: translate(0, 0) rotate(0) } }
@keyframes bdBL { 0%, 4% { transform: translate(0, 0) rotate(0) } 13% { transform: translate(-1.4px, 1.3px) rotate(-70deg) } 22% { transform: translate(-.6px, .5px) rotate(-25deg) } 33%, 100% { transform: translate(0, 0) rotate(0) } }
/* Datové tečky obkrouží střed po čtvrtotáčkách a dosednou zpět (360°, smyčka bez skoku). */
@keyframes bdDots { 0%, 4% { transform: rotate(0) scale(1) } 12% { transform: rotate(90deg) scale(.7) } 20% { transform: rotate(180deg) scale(.7) } 30% { transform: rotate(360deg) scale(.7) } 35%, 100% { transform: rotate(360deg) scale(1) } }
@keyframes bdCrown { 0%, 6% { transform: translateY(0) rotate(0) } 13% { transform: translateY(-.6px) rotate(-4deg) } 19% { transform: translateY(.1px) rotate(2deg) } 25% { transform: translateY(-.25px) rotate(-1deg) } 33%, 100% { transform: translateY(0) rotate(0) } }
@keyframes bdPart { 0%, 9% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0) } 15% { opacity: 1; transform: translate(calc(var(--dx) * .35), calc(var(--dy) * .35)) scale(1) rotate(40deg) } 30% { opacity: .9; transform: translate(calc(var(--dx) * .85), calc(var(--dy) * .85)) scale(.8) rotate(110deg) } 40%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.25) rotate(160deg) } }
@keyframes bdHalo { 0%, 100% { opacity: .35; transform: scale(.9) } 14% { opacity: 1; transform: scale(1.08) } 40% { opacity: .5; transform: scale(.95) } }
@keyframes ucB3PvSheen { 0%, 55% { transform: translateX(0) skewX(-18deg) } 100% { transform: translateX(66px) skewX(-18deg) } }
@keyframes ucB3GSheen { 0%, 72% { transform: translateX(0) skewX(-18deg) } 100% { transform: translateX(42px) skewX(-18deg) } }
@keyframes ucB3Spin { to { transform: rotate(360deg) } }
@keyframes ucB3Tw { 0%, 100% { opacity: .25; transform: scale(.55) rotate(0) } 50% { opacity: 1; transform: scale(1.15) rotate(45deg) } }
@keyframes ucB3Ember { 0% { opacity: 0; transform: translate(0, 0) } 20% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--dx), -15px) } }
@keyframes ucB3HTw { 0%, 100% { opacity: .3; transform: scale(.65) } 50% { opacity: .85; transform: scale(1) } }
/* Záře royal rubínu: jen v klidu mezi tepy a jen každý druhý takt (1,4–3,3 s z 7,2 s). */
@keyframes ucB3Sweep { 0%, 19% { stroke-dashoffset: 0; opacity: 0 } 21% { stroke-dashoffset: -4; opacity: 1 } 44% { stroke-dashoffset: -100; opacity: 1 } 46%, 100% { stroke-dashoffset: -100; opacity: 0 } }
@keyframes ucB3Holo { 0% { filter: drop-shadow(0 0 4px var(--hg)) hue-rotate(var(--hr1)) saturate(var(--hs1, 1.15)) brightness(1) } 100% { filter: drop-shadow(0 0 6px var(--hg)) hue-rotate(var(--hr2)) saturate(var(--hs2, 1.3)) brightness(1.08) } }

/* Statický stav (bez .uc-b3-run): efekty, které bez pohybu nedávají smysl, schované. */
.uc-b3 .part, .uc-b3 .ember, .uc-b3 .sweep { opacity: 0; }
.uc-b3 .hint { opacity: .55; }
.uc-b3 .pgemb { opacity: .3; }

.uc-b3-run .beat { transform-origin: 11px 11.5px; animation: bdBeat 3.6s ease-in-out infinite; }
.uc-b3-run .beat.gb { transform-origin: 11.7px 12.3px; }
.uc-b3-run .beat.rb { transform-origin: 10px 11px; }
.uc-b3-run .tl { transform-origin: 3.5px 3.5px; animation: bdTL 3.6s ease-in-out infinite; }
.uc-b3-run .tr { transform-origin: 16.5px 3.5px; animation: bdTR 3.6s ease-in-out infinite; }
.uc-b3-run .bl { transform-origin: 3.5px 16.5px; animation: bdBL 3.6s ease-in-out infinite; }
.uc-b3-run .dots { transform-origin: 10px 10px; animation: bdDots 3.6s ease-in-out infinite; }
.uc-b3-run .crown { transform-origin: 10px 6px; animation: bdCrown 3.6s ease-in-out infinite; }
.uc-b3-run .part { animation: bdPart 3.6s ease-out infinite; }
.uc-b3-run .uc-b3-halo { animation: bdHalo 3.6s ease-in-out infinite; }
.uc-b3-run .pbeat { transform-origin: 20px 20px; animation: bdBeat 3.6s ease-in-out infinite; }
.uc-b3-run .ptl { transform-origin: 13.5px 13.5px; animation: bdTL 3.6s ease-in-out infinite; }
.uc-b3-run .ptr { transform-origin: 26.5px 13.5px; animation: bdTR 3.6s ease-in-out infinite; }
.uc-b3-run .pbl { transform-origin: 13.5px 26.5px; animation: bdBL 3.6s ease-in-out infinite; }
.uc-b3-run .pdots { transform-origin: 20px 20px; animation: bdDots 3.6s ease-in-out infinite; }
.uc-b3-run .pbeatc { transform-origin: 25px 25.5px; animation: bdBeat 3.6s ease-in-out infinite; }
@keyframes ucB3PvBreath { 0%, 12% { opacity: .12 } 88%, 100% { opacity: .55 } }
.uc-b3-run .pgemb { animation: ucB3PvBreath 3.5s ease-in-out infinite alternate; }
.uc-b3-run .psheen { animation: ucB3PvSheen 4.5s ease-in-out infinite; }
.uc-b3-run .gsheen { animation: ucB3GSheen 7.5s ease-in-out infinite; }
.uc-b3-run .rorb { transform-origin: 10px 10.5px; animation: ucB3Spin 16s linear infinite; }
.uc-b3-run .rstar { transform-box: fill-box; transform-origin: center; animation: ucB3Tw 2.4s ease-in-out infinite; }
.uc-b3-run .ember { animation: ucB3Ember 3.2s ease-out infinite; }
.uc-b3-run .horb { transform-origin: 10px 10px; animation: ucB3Spin 24s linear infinite; }
.uc-b3-run .hint { transform-box: fill-box; transform-origin: center; animation: ucB3HTw 3.8s ease-in-out infinite; }
.uc-b3-run .sweep { animation: ucB3Sweep 7.2s linear infinite; }
.uc-b3-run.uc-b3-holo .uc-b3-svg { animation: ucB3Holo 5s ease-in-out infinite alternate; }

/* Odznak v chatu jako animovaný WebP (badgeV3Html img, extension/badges3/): tělo + oběžné hvězdičky, které otáčí CSS
   (transformace obrázku = na grafice, levné). Holo: duhový filtr jako u SVG, v klidu statická záře. */
.uc-b3-im > img { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.uc-b3-run.uc-b3-im .uc-b3-orb { animation: ucB3Spin var(--b3-spin, 16s) linear infinite; }
.uc-b3-im.uc-b3-holo > img { filter: drop-shadow(0 0 2px var(--hg, rgba(232, 169, 46, .45))); }
.uc-b3-run.uc-b3-im.uc-b3-holo > img { animation: ucB3Holo 5s ease-in-out infinite alternate; }
.uc-b3-run.uc-b3-im.uc-b3-holo > .uc-b3-orb { animation: ucB3Spin var(--b3-spin, 16s) linear infinite, ucB3Holo 5s ease-in-out infinite alternate; }

/* Jméno autora s hologramovým odznakem (T8) v chatu i v náhledu obchodu: zlatý lesk (syncBadge3Name).
   Přebije barvu jména i 7TV paint (inline styly), proto !important u pozadí. */
.uc-b3-name-holo { background-image: linear-gradient(100deg, #ff8c00 40%, #ffe9a8 50%, #ff8c00 60%) !important; background-size: 250% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; color: transparent; animation: ucB3NameFlow 3.2s linear infinite; }
@keyframes ucB3NameFlow { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .uc-b3-run *, .uc-b3-run.uc-b3-holo .uc-b3-svg, .uc-b3-run .uc-b3-halo, .uc-b3-name-holo { animation: none !important; }
}