/* Karta podporovatele v3 (core/badge-v3-card.js). Předloha 1:1: canvas docs/mockups/2026-10-21-odznaky-v3-canvas.dc.html
   (CSS ř. 13–182, šablona karty a cardLook v renderVals). Efekty podle prestiže (pe = T8 ? 4 : prestiž): II kovový okraj
   + přechod jména, III textura QR teček + lesk karty + třpyt průběhu, IV obíhající světlo, jiskry, přelévání jména,
   paprsky pod plaketkou; T8 hologram (okraj, aura, fólie sledující myš, tečky, vnitřní stín, střepy, náklon).
   Otevření podle prestiže (I naskočí 0,16 s, II rozbalí se zábleskem 0,22 s, III + lesk, IV + jiskry, T8 hologram 0,22 s),
   zavření 0,16 s (T8 hologram pozpátku 0,22 s). prefers-reduced-motion = bez animací. */
@property --ucsc-ca { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ucsc-cw { syntax: '<angle>'; inherits: false; initial-value: 180deg; }

/* Šířka podle jména: nejméně 236 px, s dlouhým jménem roste do 340 px (pak „…“); úzký host ji zúží (placeSupporterCard). */
.ucsc { position: fixed; z-index: 10050; width: max-content; min-width: 236px; max-width: 340px; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', sans-serif; color: #efeff1; text-align: left; line-height: normal; }
.ucsc, .ucsc * { box-sizing: border-box; }
.ucsc-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 15px; border-radius: 12px; }
.ucsc-row { position: relative; display: flex; align-items: center; gap: 14px; }
.ucsc-bw { position: relative; width: 48px; height: 48px; flex: none; }
.ucsc-bw .uc-b3 { display: block; }
.ucsc-bw .uc-b3-halo { inset: -18px; }
.ucsc-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ucsc-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.ucsc-nw { position: relative; min-width: 0; }
/* Řádek jména s pilulkou streaku: jméno v celé délce, pilulka se při nedostatku místa zalomí pod něj. */
.ucsc-who:has(> .ucsc-namerow) { flex: 1; }
.ucsc-namerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 6px; min-width: 0; }
.ucsc-namerow > .ucsc-nw { flex: none; max-width: 100%; }
.ucsc-name { position: relative; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ucsc-nshadow { position: absolute; left: 0; top: 0; right: 0; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(0, 0, 0, .9); filter: blur(4px); pointer-events: none; transform-origin: 50% 100%; transform: translate(var(--sx, 0px), var(--sy, 4px)) perspective(260px) rotateX(calc(var(--tx, 0deg) * 1.6)) rotateY(calc(var(--ty, 0deg) * 1.6)) skewX(calc(var(--ty, 0deg) * -1.2)); transition: transform .25s ease-out; }
.ucsc-tot { position: relative; display: flex; flex-direction: column; gap: 2px; }
.ucsc-lbl { font-size: 11px; font-weight: 600; color: #adadb8; }
.ucsc-sum { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.ucsc-prog { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ucsc-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ucsc-bar { height: 100%; border-radius: 3px; }
.ucsc-lvls { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ucsc-lvl { font-size: 11px; color: #adadb8; flex: none; }
.ucsc-month { position: relative; display: flex; justify-content: space-between; align-items: baseline; padding: 7px 10px; border-radius: 7px; }
.ucsc-mlbl { font-size: 12px; color: #adadb8; }
.ucsc-msum { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; color: #efeff1; }

/* Dekorace uvnitř karty (ořez okrajem). */
.ucsc-deco { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.ucsc-tex { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--tx) 0 .9px, transparent 1.2px); background-size: 7px 7px; -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 55%); mask-image: linear-gradient(225deg, #000 0%, transparent 55%); }
.ucsc-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--sh), transparent); transform: translateX(-130%) skewX(-18deg); animation: ucscSheen var(--shd, 8s) ease-in-out infinite; }
@keyframes ucscSheen { 0%, 62% { transform: translateX(-130%) skewX(-18deg) } 100% { transform: translateX(330%) skewX(-18deg) } }
.ucsc-ring { position: absolute; inset: -1.5px; border-radius: 13.5px; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ucsc-ca), transparent 0 60%, var(--ra) 80%, #ffffff 86%, var(--ra) 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); filter: drop-shadow(0 0 3px var(--ra)); animation: ucscRing var(--rd, 6s) linear infinite; }
@keyframes ucscRing { to { --ucsc-ca: 360deg } }
.ucsc-dust { position: absolute; bottom: -4px; width: 3px; height: 3px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 5px var(--dc); opacity: 0; animation: ucscDust var(--dd) linear infinite; }
@keyframes ucscDust { 0% { opacity: 0; transform: translate(0, 0) } 15% { opacity: .85 } 100% { opacity: 0; transform: translate(var(--dx), -210px) } }
.ucsc-flow { animation: ucscName 5s linear infinite; }
@keyframes ucscName { to { background-position: -200% 0 } }
.ucsc-bar-run { position: relative; overflow: hidden; }
.ucsc-bar-run::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-100%); animation: ucscBar 3.4s ease-in-out infinite; }
@keyframes ucscBar { 0%, 45% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }

/* T8: duhový okraj obíhá (+ rozmazaná kopie = aura), třpytky, fólie s odleskem podle myši, tečky, vnitřní stín. */
.ucsc-holor { position: absolute; inset: -1.5px; border-radius: 13.5px; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ucsc-ca), var(--ha), var(--hb) 18%, var(--r1) 23%, var(--he) 27%, var(--hc) 34%, var(--ha) 46%, var(--hd) 58%, var(--r2) 63%, var(--r3) 67%, var(--hb) 72%, var(--hc) 85%, var(--ha)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: ucscRing 9s linear infinite; }
.ucsc-holor.aura { inset: -5px; border-radius: 16px; padding: 5px; filter: blur(7px); opacity: .55; }
.ucsc-glit { position: absolute; width: 7px; height: 7px; background: var(--gc); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 3px var(--gc)); opacity: 0; animation: ucscGlit var(--gd) ease-in-out infinite; }
@keyframes ucscGlit { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0) } 45% { opacity: .95; transform: scale(1) rotate(45deg) } 60% { opacity: .2; transform: scale(.6) rotate(90deg) } }
.ucsc-holo { animation: ucscBob 5.5s ease-in-out infinite; }
@keyframes ucscBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
.ucsc-prism { position: absolute; inset: -46px -40px; pointer-events: none; background: repeating-conic-gradient(from var(--ucsc-ca), color-mix(in srgb, var(--ha) 0%, transparent) 0deg 9deg, color-mix(in srgb, var(--ha) 22%, transparent) 12deg, color-mix(in srgb, var(--hb) 20%, transparent) 15deg, color-mix(in srgb, var(--hc) 20%, transparent) 18deg, color-mix(in srgb, var(--hd) 0%, transparent) 22deg 30deg); -webkit-mask: radial-gradient(closest-side, transparent 42%, #000 62%, transparent 100%); mask: radial-gradient(closest-side, transparent 42%, #000 62%, transparent 100%); filter: blur(5px); animation: ucscRing 40s linear infinite; opacity: .55; }
.ucsc-cone { position: absolute; left: 22%; right: 22%; bottom: -14px; height: 30px; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--ha) 55%, transparent), color-mix(in srgb, var(--hb) 25%, transparent) 45%, color-mix(in srgb, var(--hc) 8%, transparent) 80%, transparent); clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0); filter: blur(5px); animation: ucscCone 3.6s ease-in-out infinite; }
@keyframes ucscCone { 0%, 100% { opacity: .3 } 50% { opacity: .55 } }
.ucsc-shards { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; transform: scaleY(1.25); }
.ucsc-shards.front { z-index: 4; }
.ucsc-hring { position: absolute; width: var(--d); height: var(--d); left: calc(var(--d) / -2); top: calc(var(--d) / -2); animation: ucscSpin var(--t) linear infinite; animation-direction: var(--dir, normal); }
@keyframes ucscSpin { to { transform: rotate(360deg) } }
.ucsc-shard { position: absolute; left: 50%; top: -6px; width: var(--w, 7px); height: calc(var(--w, 7px) * 1.6); margin-left: calc(var(--w, 7px) / -2); clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%); background: linear-gradient(160deg, var(--he), var(--ha) 30%, var(--r2) 52%, var(--hb) 68%, var(--r3) 86%, var(--hc)); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ha) 80%, transparent)); animation: ucscShard 2.8s ease-in-out infinite; }
@keyframes ucscShard { 0%, 100% { opacity: .25; transform: scale(.6) rotate(0) } 50% { opacity: .8; transform: scale(1) rotate(25deg) } }
.ucsc-foil { position: absolute; inset: 0; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 36%, color-mix(in srgb, var(--r1) 8%, transparent) 43%, color-mix(in srgb, var(--ha) 14%, transparent) 47%, color-mix(in srgb, var(--he) 16%, transparent) 50%, color-mix(in srgb, var(--hb) 14%, transparent) 53%, color-mix(in srgb, var(--r2) 8%, transparent) 56%, color-mix(in srgb, var(--r3) 6%, transparent) 59%, transparent 64%); background-size: 260% 100%; background-position: var(--mx, 30%) 0; opacity: var(--fo, .55); transition: background-position .2s ease-out, opacity .25s ease-out; }
.ucsc-tex.live { animation: ucscBreath 4s ease-in-out infinite; }
@keyframes ucscBreath { 0%, 100% { opacity: .7 } 50% { opacity: 1 } }
.ucsc-twk { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 70%); mask-image: linear-gradient(225deg, #000 0%, transparent 70%); }
.ucsc-twk i { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--tc) 0 .95px, transparent 1.35px); opacity: 0; animation: ucscTw var(--td) ease-in-out infinite; }
@keyframes ucscTw { 0%, 100% { opacity: 0 } 50% { opacity: .38 } }
.ucsc-inset { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 26px 6px rgba(0, 0, 0, .6), inset 0 -14px 22px -6px rgba(0, 0, 0, .45), inset 0 14px 22px -6px rgba(0, 0, 0, .45), inset 0 0 0 1px color-mix(in srgb, var(--ha) 18%, transparent); }

/* Otevření podle prestiže. */
.ucsc-in1 { animation: ucscIn1 .16s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes ucscIn1 { from { opacity: 0; transform: translateY(8px) scale(.96) } to { opacity: 1; transform: none } }
.ucsc-in2 { animation: ucscIn2 .22s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes ucscIn2 { 0% { opacity: 0; transform: scale(.9) rotateX(18deg); filter: blur(4px) brightness(1) } 55% { opacity: 1; filter: blur(0) brightness(1.6) } 100% { opacity: 1; transform: none; filter: none } }
.ucsc-in3 { animation: ucscIn3 .22s ease-out both; }
@keyframes ucscIn3 { 0% { opacity: 0; clip-path: inset(49% 0 49% 0 round 12px); filter: brightness(2.2) saturate(1.4) } 35% { opacity: 1; clip-path: inset(47% 0 47% 0 round 12px) } 75% { clip-path: inset(0 0 0 0 round 12px); filter: brightness(1.35) } 100% { clip-path: inset(-60px -60px -60px -60px); filter: none } }
/* výbuch jisker u odznaku (Royal a T8) jen při otevření */
.ucsc-burst { position: absolute; left: 39px; top: 39px; width: 0; height: 0; pointer-events: none; z-index: 6; }
.ucsc-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: var(--bc); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px var(--bc)); opacity: 0; animation: ucscBurst .45s ease-out 60ms both; }
@keyframes ucscBurst { 0% { opacity: 0; transform: translate(0, 0) scale(.3) } 20% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(.6) rotate(90deg) } }
/* lesk, který jednou přejede kartou při otevření (prestiž III a IV) */
.ucsc-osh { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; pointer-events: none; z-index: 6; }
.ucsc-osh::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent); transform: translateX(-120%) skewX(-15deg); animation: ucscOsh .5s ease-out 80ms both; }
@keyframes ucscOsh { from { transform: translateX(-120%) skewX(-15deg) } to { transform: translateX(340%) skewX(-15deg) } }

/* P4 (a T8): paprsky pod plaketkou, pomalu se otáčí a ke krajům se ztrácí; neon = rozmazaná kopie. */
.ucsc-rays { position: absolute; top: 0; left: 50%; width: 150px; height: 62px; margin-left: -75px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--pr) 50%, transparent 100%) 0 -62px / 100% 62px no-repeat, linear-gradient(180deg, var(--pr) 0%, var(--pa) 45%, transparent 100%); -webkit-mask: repeating-conic-gradient(from var(--ucsc-cw) at 50% -12px, #000 0deg 7deg, transparent 10deg 20deg), radial-gradient(34% 62% at 50% 0%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%); -webkit-mask-composite: source-in; mask: repeating-conic-gradient(from var(--ucsc-cw) at 50% -12px, #000 0deg 7deg, transparent 10deg 20deg), radial-gradient(34% 62% at 50% 0%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%); mask-composite: intersect; filter: blur(.5px); mix-blend-mode: plus-lighter; animation: ucscSway 7s linear infinite, ucscRayFlow 2.8s ease-in infinite; }
@keyframes ucscRayFlow { 0% { background-position: 0 -62px, 0 0 } 70%, 100% { background-position: 0 62px, 0 0 } }
.ucsc-raysw { position: absolute; inset: 0; pointer-events: none; filter: blur(4px) saturate(1.5) brightness(1.15); mix-blend-mode: plus-lighter; animation: ucscBloom 3.6s ease-in-out infinite; }
@keyframes ucscBloom { 0%, 100% { opacity: .5 } 50% { opacity: .75 } }
@keyframes ucscSway { from { --ucsc-cw: 180deg } to { --ucsc-cw: 200deg } }

/* Plaketka prestiže: 3D kovový rámeček s vyraženou římskou číslicí na horní hraně karty uprostřed. */
.ucsc-plq { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 7; display: inline-flex; padding: 2px; border-radius: 7px; overflow: hidden; pointer-events: none; }
.ucsc-plq > span { display: flex; align-items: center; justify-content: center; min-width: 24px; height: 15px; padding: 0 8px; border-radius: 5px; font: 900 10.5px/15px 'Inter', 'Segoe UI', sans-serif; letter-spacing: .14em; text-indent: .14em; white-space: nowrap; }
.ucsc-plq.shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .65) 50%, transparent 65%); transform: translateX(-120%); animation: ucscPqShine 4.5s ease-in-out infinite; }
@keyframes ucscPqShine { 0%, 70% { transform: translateX(-120%) } 100% { transform: translateX(120%) } }

/* Efekty T8 kolem karty naběhnou s kartou; zavření: karta se zmenší a zprůhlední (0,16 s), T8 hologram pozpátku. */
.ucsc .ucsc-hx { animation: ucscHx .3s ease-out both; }
@keyframes ucscHx { from { opacity: 0 } to { opacity: 1 } }
.ucsc { transition: opacity .15s ease-out, transform .15s ease-out, visibility 0s; }
.ucsc.closed { visibility: hidden; opacity: 0; transform: translateY(6px) scale(.95); transition: opacity .16s ease-in, transform .16s ease-in, visibility 0s linear .16s; }
.ucsc.closed *:not(.ucsc-outH):not(.ucsc-hx) { animation-play-state: paused !important; }
.ucsc.ucsc-holo.closed { transform: none; transition: opacity .06s ease-in .16s, visibility 0s linear .22s; }
.ucsc-outH { animation: ucscOutH .22s ease-in both; }
.ucsc.ucsc-holo.closed .ucsc-hx { animation: ucscHxOut .16s ease-in both !important; }
@keyframes ucscHxOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes ucscOutH { 0% { clip-path: inset(-60px -60px -60px -60px); filter: none } 25% { clip-path: inset(0 0 0 0 round 12px); filter: brightness(1.35) } 70% { clip-path: inset(47% 0 47% 0 round 12px); filter: brightness(2.2) saturate(1.4) } 100% { clip-path: inset(49.5% 0 49.5% 0 round 12px); filter: brightness(2.4); opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .ucsc, .ucsc *, .ucsc *::before, .ucsc *::after { animation: none !important; transition: none !important; }
  .ucsc-dust, .ucsc-burst i { opacity: 0; }
}