/* Pochlubit se odznakem — odhalení, vrstva přes obchod a sbírka (core/badge-reveal.js, core/badge-shop-ui.js).
   Předloha 1:1: docs/mockups/src/2026-10-21-pochlubit-se/template.html (odhalení ř. 144–236, sbírka 408–427, Velký obchod 428–455).
   Vše pod kořenem .ucbb (základ karty, tlačítek a okna = core/badge-brag.css), animace s prefixem ucbr-. Jen tmavé téma. */

/* ── Vrstva přes obchod (hub: přes celý panel, Velký obchod: přes okno prohlížeče) ── */
.ucbb.ucbb-layer { position: absolute; inset: 0; z-index: 40; background: rgba(5, 5, 8, .62); animation: ucbr-fadeIn .15s ease-out; }
.ucbb.ucbb-layer.big { position: fixed; z-index: 60; background: rgba(5, 5, 8, .68); }
.ucbb.ucbb-layer.rv { background: transparent; }
@keyframes ucbr-fadeIn { from { opacity: 0 } }
.ucbb.ucbb-rv { position: absolute; inset: 0; }
/* okno vzkazu nad odhalením: odhalení ztlumené jako chat pod oknem v maketě (opacity nerestartuje animace) */
.ucbb.ucbb-layer.dlg > .ucbb-rv { opacity: .3; transition: opacity .2s; }
/* tečka sbírky: .cdot (sidepanel má globální .dot) */
/* náhled karty v okně Pochlubit se: logo platformy kreslí jen .msg (sidepanel / web), bez paddingu a hoveru zprávy */
.ucbb .msg.ucbb-pvmsg { padding: 0; contain: none; background: none; }
.ucbb .msg.ucbb-pvmsg:hover { background: none; }

/* ── Odhalení ─────────────────────────────────────────────────── */
.ucbb .reveal { --t0: .3s; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 50% at 50% 38%, color-mix(in srgb, var(--a) 26%, transparent), transparent 70%), #0d0d10; }
.ucbb .reveal .flash { position: absolute; inset: 0; z-index: 5; background: radial-gradient(circle at 50% 38%, #fff, color-mix(in srgb, var(--a) 60%, transparent) 30%, transparent 65%); opacity: 0; pointer-events: none; animation: ucbr-flash .7s ease-out calc(var(--t0) + .05s) both; }
@keyframes ucbr-flash { 0% { opacity: 0 } 15% { opacity: .9 } 100% { opacity: 0 } }
.ucbb .reveal .rays { position: absolute; z-index: -1; left: 50%; top: 38%; width: 760px; height: 760px; margin: -380px 0 0 -380px; opacity: 0; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--a) 55%, transparent) 0deg 5deg, transparent 5deg 20deg); -webkit-mask: radial-gradient(circle, #000 0 8%, transparent 58%); mask: radial-gradient(circle, #000 0 8%, transparent 58%); animation: ucbr-raysIn .9s ease-out calc(var(--t0) + .1s) forwards, ucbr-spin var(--rs, 30s) linear infinite; mix-blend-mode: plus-lighter; }
@keyframes ucbr-raysIn { to { opacity: var(--ro2, .7) } }
@keyframes ucbr-spin { to { transform: rotate(360deg) } }
.ucbb .reveal .halo2 { position: absolute; z-index: -1; left: 50%; top: 38%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--a) 55%, transparent), transparent 65%); animation: ucbr-breathe 3.6s ease-in-out infinite; }
@keyframes ucbr-breathe { 50% { transform: scale(1.12); opacity: .75 } }
.ucbb .reveal .big { position: relative; width: 132px; height: 132px; animation: ucbr-pop .9s cubic-bezier(.2, 1.4, .3, 1) var(--t0) both; }
.ucbb .reveal .big .uc-b3 { display: block; }
@keyframes ucbr-pop { 0% { opacity: 0; transform: scale(.2) rotate(-25deg); filter: brightness(3) } 55% { opacity: 1; transform: scale(1.18) rotate(4deg); filter: brightness(1.6) } 100% { transform: none; filter: none } }
.ucbb .reveal .burst i { position: absolute; left: 50%; top: 38%; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); opacity: 0; animation: ucbr-burst 1.1s cubic-bezier(.1, .8, .3, 1) both; }
@keyframes ucbr-burst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.3) } }
.ucbb .reveal .confetti i { position: absolute; top: -10px; width: 6px; height: 10px; border-radius: 1px; background: var(--c); opacity: 0; animation: ucbr-fall var(--d) linear var(--dl) infinite; }
@keyframes ucbr-fall { 0% { opacity: 0; transform: translateY(0) rotate(0) } 10% { opacity: 1 } 100% { opacity: 0; transform: translateY(760px) rotate(540deg) } }
.ucbb .reveal .eb { justify-content: center; animation: ucbr-fadeUp .4s ease-out calc(var(--t0) + .5s) both; }
.ucbb .reveal .bname { justify-content: center; font-size: 34px; animation: ucbr-fadeUp .45s ease-out calc(var(--t0) + .6s) both; }
.ucbb .reveal .stats { justify-content: center; animation: ucbr-fadeUp .45s ease-out calc(var(--t0) + .75s) both; margin-top: 0; }
.ucbb .reveal .eq { display: inline-flex; align-items: center; gap: 6px; color: #9be59b; font: 700 12px var(--sans); animation: ucbr-fadeUp .45s ease-out calc(var(--t0) + .85s) both; }
.ucbb .reveal .acts { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 300px; margin-top: 6px; animation: ucbr-fadeUp .45s ease-out calc(var(--t0) + 1s) both; }
.ucbb .reveal .acts .btn { justify-content: center; }
.ucbb .reveal .acts .ghost { background: transparent; border-color: transparent; color: var(--mut); height: 34px; }
@keyframes ucbr-fadeUp { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.ucbb .reveal .trail { display: flex; align-items: center; gap: 6px; justify-content: center; animation: ucbr-fadeUp .45s ease-out calc(var(--t0) + .7s) both; color: var(--mut); font: 700 12px var(--sans); }
.ucbb .reveal .trail .uc-b3 { opacity: .9; }
.ucbb .reveal .trail .uc-b3:last-of-type { opacity: 1; filter: drop-shadow(0 0 6px var(--a)); }

/* ── Epičtější odhalení podle prestiže (l3 = P3, l4 = P4, holo = Hologram) ── */
.ucbb .reveal.l3 { --t0: .95s; --rs: 18s; }
.ucbb .reveal.l4 { --t0: 1.2s; --rs: 12s; }
.ucbb .reveal.holo { --t0: 1.5s; --rs: 9s; }
.ucbb .reveal .core { position: relative; width: 132px; height: 132px; flex: none; transform: perspective(520px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--cs, 1)); transition: transform .25s ease-out; }
.ucbb .reveal .core > .fx { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.ucbb .reveal .core .big { position: absolute; inset: 0; }
.ucbb .reveal .core > .rays, .ucbb .reveal .core > .halo2 { top: 50%; }
.ucbb .reveal .core > .burst i { top: 50%; }
@keyframes ucbr-fadeIn2 { to { opacity: 1 } }
/* nabíjení: energie se stahuje do středu */
.ucbb .reveal .charge i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c), 0 0 2px #fff; opacity: 0; animation: ucbr-charge var(--cd) cubic-bezier(.55, 0, 1, .55) var(--dl) both; }
@keyframes ucbr-charge { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.6) } 25% { opacity: 1 } 99% { opacity: 1; transform: translate(0, 0) scale(.3) } 100% { opacity: 0; transform: translate(0, 0) scale(.3) } }
.ucbb .reveal .cglow { width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: radial-gradient(circle, #fff, color-mix(in srgb, var(--a) 80%, transparent) 40%, transparent 70%); opacity: 0; animation: ucbr-cglow var(--t0) ease-in both; mix-blend-mode: plus-lighter; }
@keyframes ucbr-cglow { 0% { transform: scale(0); opacity: 0 } 80% { transform: scale(1.7); opacity: 1 } 100% { transform: scale(3.4); opacity: 0 } }
/* rázové vlny */
.ucbb .reveal .shock { width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; border: 3px solid var(--rc, var(--a)); box-shadow: 0 0 22px var(--rc, var(--a)), inset 0 0 22px var(--rc, var(--a)); opacity: 0; animation: ucbr-shock 1.1s cubic-bezier(.1, .7, .3, 1) calc(var(--t0) + var(--rd, 0s)) both; }
@keyframes ucbr-shock { 0% { opacity: 1; transform: scale(.25) } 100% { opacity: 0; transform: scale(4.4); border-width: 1px } }
/* odlesk přes celé okno */
.ucbb .reveal .streak { width: 620px; height: 5px; margin: -2.5px 0 0 -310px; border-radius: 6px; background: linear-gradient(90deg, transparent, var(--a) 28%, #fff 50%, var(--a) 72%, transparent); opacity: 0; animation: ucbr-streak 1s ease-out calc(var(--t0) + .04s) both; mix-blend-mode: plus-lighter; }
.ucbb .reveal .streak.v { width: 360px; margin-left: -180px; animation-name: ucbr-streakV; }
@keyframes ucbr-streak { 0% { opacity: 0; transform: scaleX(.05) } 18% { opacity: 1; transform: scaleX(1) } 100% { opacity: 0; transform: scaleX(1.25) scaleY(.3) } }
@keyframes ucbr-streakV { 0% { opacity: 0; transform: rotate(90deg) scaleX(.05) } 18% { opacity: .8; transform: rotate(90deg) scaleX(1) } 100% { opacity: 0; transform: rotate(90deg) scaleX(1.2) scaleY(.3) } }
/* hvězdy na oběžné dráze */
.ucbb .reveal .orbit { width: 0; height: 0; animation: ucbr-spin var(--os, 7s) linear infinite; }
.ucbb .reveal .orbit.rev { animation-direction: reverse; }
.ucbb .reveal .orbit i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; background: var(--c); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; transform: rotate(var(--ang)) translateY(calc(var(--r, 98px) * -1)) scale(var(--s, 1)); animation: ucbr-fadeIn2 .5s ease-out calc(var(--t0) + .3s) forwards; }
/* P4: otřes, sloup světla, gejzír jisker, jméno po písmenech */
.ucbb .reveal.l4, .ucbb .reveal.holo { animation: ucbr-shake .6s cubic-bezier(.3, .8, .4, 1) var(--t0) both; }
/* P3: menší otřes v okamžiku odhalení (pokyn usera 2026-10-21). */
.ucbb .reveal.l3 { animation: ucbr-shake3 .45s ease-out var(--t0) both; }
@keyframes ucbr-shake3 { 0% { transform: none } 15% { transform: translate(-3px, 2px) } 35% { transform: translate(3px, -2px) } 60% { transform: translate(-1px, 1px) } 100% { transform: none } }
@keyframes ucbr-shake { 0% { transform: none } 12% { transform: translate(-7px, 4px) } 24% { transform: translate(6px, -5px) } 38% { transform: translate(-4px, 3px) } 54% { transform: translate(3px, -2px) } 72% { transform: translate(-1px, 1px) } 100% { transform: none } }
.ucbb .reveal .core > .fx.pillar { top: auto; bottom: calc(50% - 60px); width: 110px; height: 820px; margin-left: -55px; transform-origin: 50% 0; opacity: 0;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--a) 55%, transparent) 50%, #fff 86%, color-mix(in srgb, var(--a) 60%, #fff) 100%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent), linear-gradient(to bottom, #000 84%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent), linear-gradient(to bottom, #000 84%, transparent); mask-composite: intersect;
  animation: ucbr-pillar 1.4s cubic-bezier(.3, 0, .2, 1) calc(var(--t0) - .35s) both; mix-blend-mode: plus-lighter; }
@keyframes ucbr-pillar { 0% { opacity: 0; transform: scaleY(0) scaleX(.3) } 25% { opacity: 1; transform: scaleY(1) scaleX(1.25) } 45% { opacity: .9; transform: scaleY(1) scaleX(.7) } 100% { opacity: .22; transform: scaleY(1) scaleX(.55) } }
.ucbb .reveal .embers i { position: absolute; bottom: -12px; width: var(--w, 4px); height: var(--w, 4px); border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); opacity: 0; animation: ucbr-ember var(--d) cubic-bezier(.2, .6, .4, 1) var(--dl) infinite; }
@keyframes ucbr-ember { 0% { opacity: 0; transform: translate(0, 0) } 12% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--x), -560px) } }
.ucbb .reveal.l4 .bname, .ucbb .reveal.holo .bname { animation: none; }
.ucbb .reveal.l4 .bname .g, .ucbb .reveal.holo .bname .g { background: none; animation: none; color: inherit; }
.ucbb .reveal .bname .g .ch { display: inline-block; white-space: pre; background: var(--ng); background-size: 400% 100%; background-position: calc(var(--i) * -18%) 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--a) 70%, transparent)); animation: ucbr-letter .55s cubic-bezier(.2, 1.5, .3, 1) calc(var(--t0) + .55s + var(--i) * .07s) both; }
@keyframes ucbr-letter { 0% { opacity: 0; transform: translateY(18px) scale(1.9); filter: blur(8px) brightness(3) } 60% { opacity: 1; filter: blur(0) brightness(1.6) } 100% { transform: none; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--a) 70%, transparent)) } }
.ucbb .reveal.l4 .plq, .ucbb .reveal.holo .plq { animation: ucbr-fadeUp .4s ease-out calc(var(--t0) + 1s) both; }
/* Hologram: duhový hranol, aura, barevné rozdvojení, LEGENDÁRNÍ, zlatý déšť */
.ucbb .reveal .prism { position: absolute; z-index: 4; inset: -40% -60%; pointer-events: none; mix-blend-mode: plus-lighter; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 60, 160, .38) 43%, rgba(255, 210, 60, .38) 47%, rgba(80, 255, 170, .38) 51%, rgba(60, 170, 255, .38) 55%, rgba(190, 90, 255, .38) 59%, transparent 64%);
  animation: ucbr-prism 1.5s ease-in-out calc(var(--t0) - .2s) both, ucbr-prism2 2.6s ease-in-out calc(var(--t0) + 4s) infinite; }
@keyframes ucbr-prism { 0% { opacity: 1; transform: translateX(-55%) } 99% { opacity: 1; transform: translateX(55%) } 100% { opacity: 0; transform: translateX(55%) } }
@keyframes ucbr-prism2 { 0% { opacity: .55; transform: translateX(-55%) } 99% { opacity: .55; transform: translateX(55%) } 100% { opacity: 0; transform: translateX(55%) } }
.ucbb .reveal .core > .fx.aura { width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; opacity: 0; background: conic-gradient(#ff3c9f, #ffcf3c, #4dffae, #3cb1ff, #b45cff, #ff3c9f); filter: blur(26px);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 46%, #000 58%, transparent 71%); mask: radial-gradient(circle, transparent 30%, #000 46%, #000 58%, transparent 71%);
  animation: ucbr-auraIn .8s ease-out var(--t0) forwards, ucbr-spin 7s linear infinite; mix-blend-mode: plus-lighter; }
@keyframes ucbr-auraIn { to { opacity: .75 } }
.ucbb .reveal .chroma { position: absolute; inset: 0; animation: ucbr-chroma 1.3s ease-out calc(var(--t0) + .05s) both; }
@keyframes ucbr-chroma { 0% { filter: drop-shadow(-9px 0 0 rgba(255, 40, 120, .9)) drop-shadow(9px 0 0 rgba(40, 220, 255, .9)) } 30% { filter: drop-shadow(-4px 1px 0 rgba(255, 40, 120, .7)) drop-shadow(4px -1px 0 rgba(40, 220, 255, .7)) } 100% { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent) } }
.ucbb .reveal .legend { font: 900 11px var(--sans); letter-spacing: .32em; text-transform: uppercase; padding: 5px 12px 5px 15px; border-radius: 99px; color: #2a1600;
  background: linear-gradient(90deg, var(--ha), var(--hc), var(--hb), var(--he), var(--ha)); background-size: 300% 100%; box-shadow: 0 0 18px rgba(255, 200, 80, .55), 0 0 0 1px rgba(255, 255, 255, .5) inset;
  animation: ucbr-legendIn .6s cubic-bezier(.2, 1.6, .3, 1) calc(var(--t0) + .4s) both, ucbr-flow 3s linear infinite; }
@keyframes ucbr-legendIn { 0% { opacity: 0; transform: scale(2.4); filter: blur(6px) brightness(3) } 100% { opacity: 1; transform: none; filter: none } }
@keyframes ucbr-flow { to { background-position: -200% 0 } }
.ucbb .reveal .coins i { position: absolute; top: -16px; width: var(--w, 10px); height: var(--w, 10px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc83d 45%, #b06d00); box-shadow: 0 0 8px rgba(255, 200, 60, .7); opacity: 0; animation: ucbr-coin var(--d) linear var(--dl) infinite; }
@keyframes ucbr-coin { 0% { opacity: 0; transform: translateY(0) rotateY(0) } 8% { opacity: 1 } 100% { opacity: 0; transform: translateY(780px) rotateY(1080deg) } }

/* Velký obchod: odhalení přes celou stránku (ztmavené pozadí), odznak 1,5× větší, jméno 46 px, tlačítka vedle sebe. */
.ucbb.ucbb-big .reveal { background: radial-gradient(60% 55% at 50% 40%, color-mix(in srgb, var(--a) 26%, transparent), transparent 70%), rgba(9, 9, 12, .82); }
.ucbb.ucbb-big .reveal .core { --cs: 1.5; margin: 40px 0 34px; }
.ucbb.ucbb-big .reveal .bname { font-size: 46px; }
.ucbb.ucbb-big .reveal .acts { flex-direction: row; max-width: 460px; }
.ucbb.ucbb-big .reveal .acts .btn { flex: 1; }

/* ── Ze sbírky: zpětné pochlubení ── */
.ucbb .collsheet .x { margin-left: auto; align-self: flex-start; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid #34343c; background: #141417; color: var(--mut); cursor: pointer; font: 700 16px var(--sans); }
.ucbb .collsheet .x:hover { color: var(--fg); }
.ucbb .cgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ucbb .tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 10px; border: 1px solid var(--line); background: #141417; cursor: pointer; color: var(--fg); font: 700 11px var(--sans); transition: border-color .15s, background .15s, transform .12s; min-width: 0; }
.ucbb .tile:hover { border-color: #4a4a54; }
.ucbb .tile.on { border-color: var(--uc2); background: rgba(255, 140, 0, .08); }
.ucbb .tile:focus-visible { outline: 2px solid var(--uc1); outline-offset: 1px; }
.ucbb .tile .tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ucbb .tile .cdot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--uc2); box-shadow: 0 0 0 2px #141417, 0 0 8px var(--uc2); animation: ucbr-breathe 1.8s ease-in-out infinite; }
.ucbb .tile .done { position: absolute; top: 4px; right: 5px; color: #7bd88f; font-size: 11px; }
.ucbb .tile.lower { opacity: .42; }
.ucbb .tile.lower .uc-b3 { filter: grayscale(.6); }
.ucbb .box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #141417; display: flex; flex-direction: column; gap: 8px; }
.ucbb .cdet { display: flex; flex-direction: column; gap: 10px; }
.ucbb .cdet .sh p b { color: var(--fg); }
.ucbb .btn.off { opacity: .55; cursor: default; filter: none; }
.ucbb.ucbb-big .sheet.collsheet { display: flex; flex-direction: column; width: min(760px, 94%); }
.ucbb.ucbb-big .collsheet .cgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Velký obchod: potvrzení „Karta je v chatu“ (stránka chat nemá) */
.ucbb.ucbb-bigtoast { position: fixed; z-index: 61; top: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 14px; background: #1b1b20; border: 1px solid color-mix(in srgb, var(--a, #ff8c00) 50%, #34343c); box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 20px color-mix(in srgb, var(--a, #ff8c00) 25%, transparent); font-weight: 700; white-space: nowrap; animation: ucbr-toastIn .4s cubic-bezier(.2, 1.3, .3, 1) .1s both; }
.ucbb.ucbb-bigtoast .ok { color: #7bd88f; }
.ucbb.ucbb-bigtoast .btn { height: 34px; }
@keyframes ucbr-toastIn { from { opacity: 0; transform: translate(-50%, -14px) } to { opacity: 1; transform: translate(-50%, 0) } }

@media (prefers-reduced-motion: reduce) {
  .ucbb .reveal.l3, .ucbb .reveal.l4, .ucbb .reveal.holo { animation: none; }
  .ucbb .reveal .core { transition: none; }
}