/* Obchod odznaků podporovatele v3 (core/badge-shop-ui.js). Předlohy 1:1: docs/mockups/2026-10-21-obchod-odznaku-zalozka.html
   (záložka hubu) a docs/mockups/2026-10-21-obchod-odznaku-velky.html (velký obchod). Jen tmavé téma. Prefix ucbs- (pozor na
   třídy animací odznaku v badge-v3.css: .dots, .beat, .tl… pod .uc-b3-run — tady se nepoužívají pro jiné prvky). */
.ucbs {
  --ucbs-bg: var(--bg-primary, #0e0e10); --ucbs-bg2: var(--bg-secondary, #18181b); --ucbs-bg3: #1f1f23; --ucbs-hover: var(--bg-hover, #26262c);
  --ucbs-border: var(--border, #2f2f35); --ucbs-fg: #efeff1; --ucbs-fg2: #adadb8; --ucbs-mute: #848494; --ucbs-uc1: #ff8c00; --ucbs-uc2: #ffd93d;
  --ucbs-ok: #3ddc84; --ucbs-tile: #1a1a1f; --ucbs-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  position: relative; color: var(--ucbs-fg); font-size: 13px; line-height: 1.4; -webkit-font-smoothing: antialiased;
}
.ucbs, .ucbs * { box-sizing: border-box; }
:where(.ucbs) button { font: inherit; color: inherit; }
.ucbs [hidden] { display: none !important; }
.ucbs .ucbs-num { font-family: var(--ucbs-mono); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ucbs .ucbs-ico { width: 22px; height: 22px; object-fit: contain; flex: none; vertical-align: -6px; }
.ucbs .ucbs-holo { animation: ucbs-hue 5s ease-in-out infinite alternate; }
@keyframes ucbs-hue { from { filter: drop-shadow(0 0 4px rgba(255,200,80,.7)) hue-rotate(-6deg); } to { filter: drop-shadow(0 0 7px rgba(255,200,80,.9)) brightness(1.08); } }
.ucbs .ucbs-empty { padding: 24px 12px; text-align: center; color: var(--ucbs-mute); }

/* ===== záložka v hubu ===== */
.ucbs-tab { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.ucbs-tab .ucbs-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 10px 12px; display: grid; align-content: start; gap: 8px; scrollbar-width: thin; scrollbar-color: #3a3a42 transparent; }

/* peněženka */
.ucbs-wallet { display: flex; align-items: center; gap: 6px; }
.ucbs-wpill { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 7px; border-radius: 10px; background: var(--ucbs-bg2); border: 1px solid var(--ucbs-border); min-width: 0; }
.ucbs-wpill.bal { border-color: rgba(255,170,40,.45); background: linear-gradient(135deg, rgba(255,140,0,.14), rgba(255,217,61,.04)); }
.ucbs-wpill.bal b { color: #ffe9b0; font-size: 15px; }
.ucbs-wpill small { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ucbs-mute); font-weight: 800; line-height: 1.1; }
.ucbs-wpill .v { font-size: 12.5px; font-weight: 800; }
.ucbs-wpill.don { padding-left: 10px; }
.ucbs-wpill.col { margin-left: auto; padding: 0 9px 0 5px; }
.ucbs-wico { display: inline-flex; }
.ucbs-wpill .ucbs-ring { width: 26px; height: 26px; flex: none; display: block; }
.ucbs-ringw { display: inline-flex; }
.ucbs-wallet.home-mode .col { display: none; }
.ucbs .bump { animation: ucbs-bump .45s ease; }
@keyframes ucbs-bump { 30% { transform: scale(1.07); } 100% { transform: none; } }

/* řádek chatu (V chatu / náhled v okně) */
.ucbs-chatline { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; }
.ucbs-chatline .ucbs-t { color: var(--ucbs-mute); font-size: 11.5px; }
.ucbs-chatline .ucbs-n { font-weight: 700; color: #ff8c00; }
.ucbs-chatline .ucbs-m { overflow: hidden; text-overflow: ellipsis; }
.ucbs-chatline .ucbs-bdg { flex: none; }
@keyframes ucbs-nameflow { to { background-position: -200% 0; } }
.ucbs-eqline { min-width: 0; }

/* rozcestník obchodů */
.ucbs-view { display: grid; align-content: start; gap: 8px; }
.ucbs-view.in { animation: ucbs-viewIn .22s cubic-bezier(.2,.8,.3,1); }
.ucbs-view.back { animation: ucbs-viewBack .22s cubic-bezier(.2,.8,.3,1); }
@keyframes ucbs-viewIn { from { opacity: 0; transform: translateX(14px); } }
@keyframes ucbs-viewBack { from { opacity: 0; transform: translateX(-14px); } }
.ucbs-cap { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ucbs-mute); font-weight: 800; }
.ucbs-home > .ucbs-cap { margin: 4px 2px 0; }
.ucbs-shopcard { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%; padding: 12px; border-radius: 12px; text-align: left; cursor: pointer; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(255,170,40,.4); background: radial-gradient(240px 120px at 0% 0%, var(--cg, rgba(255,140,0,.16)), transparent 70%), var(--ucbs-bg2); transition: transform .16s cubic-bezier(.2,.8,.3,1), border-color .15s, box-shadow .15s; }
.ucbs-shopcard:hover { transform: translateY(-2px); border-color: rgba(255,200,80,.75); box-shadow: 0 0 18px rgba(255,150,30,.22); }
.ucbs-shopcard:focus-visible { outline: 2px solid var(--ucbs-uc2); outline-offset: 2px; }
.ucbs-shopcard::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%); transform: translateX(-120%); }
.ucbs-shopcard:hover::after { animation: ucbs-sweep .7s ease-out; }
@keyframes ucbs-sweep { to { transform: translateX(120%); } }
.ucbs-big { grid-row: span 2; position: relative; width: 48px; height: 48px; }
.ucbs-big::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 66%); }
.ucbs-big svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.ucbs-big svg.ucbs-none { filter: grayscale(.8) brightness(.45); }
.ucbs-shopcard h4 { margin: 0; font-size: 14.5px; font-weight: 900; }
.ucbs-hsub { font-size: 11.5px; color: var(--ucbs-fg2); }
.ucbs-go { grid-row: span 2; color: #ffc062; }
.ucbs-foot2 { grid-column: 1 / -1; margin-top: 8px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 8px; }
.ucbs-stat { min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ucbs-fg2); }
.ucbs-stat > i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ucbs-stat.on > i { background: var(--ucbs-ok); box-shadow: 0 0 6px var(--ucbs-ok); }
.ucbs-stat.off > i { background: var(--ucbs-uc1); box-shadow: 0 0 6px var(--ucbs-uc1); }
.ucbs-stat.off { color: #ffb35c; }
.ucbs-info { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid #5a5a66; color: var(--ucbs-fg2); font: 800 10px/1 'Inter', 'Segoe UI', sans-serif; font-style: italic; cursor: help; flex: none; transition: color .15s, border-color .15s; }
.ucbs-info:hover, .ucbs-info:focus-visible { color: var(--ucbs-fg); border-color: var(--ucbs-fg2); outline: none; }
.ucbs-bigb { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--ucbs-border); background: var(--ucbs-bg3); color: var(--ucbs-fg2) !important; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; }
.ucbs-bigb:hover { color: #ffc062 !important; border-color: rgba(255,170,40,.5); background: var(--ucbs-hover); }
.ucbs-vhead { display: flex; align-items: center; gap: 8px; }
.ucbs-vhead b { font-size: 13.5px; font-weight: 900; }
.ucbs-backb { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 6px; border-radius: 7px; border: 1px solid var(--ucbs-border); background: var(--ucbs-bg3); color: var(--ucbs-fg2) !important; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.ucbs-backb:hover { color: var(--ucbs-fg) !important; background: var(--ucbs-hover); }

/* řádek „V chatu“ — přilepený, najetí na odznak ho dočasně mění */
.ucbs-eq { position: sticky; top: -8px; z-index: 6; margin: 0 -10px; padding: 0 10px; background: linear-gradient(var(--ucbs-bg) 82%, transparent); }
.ucbs-eqin { display: flex; flex-wrap: wrap; row-gap: 4px; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; background: var(--ucbs-bg2); border: 1px solid var(--ucbs-border); transition: border-color .15s; }
.ucbs-eq.peek .ucbs-eqin { border-color: rgba(255,200,80,.55); }
/* oba popisky na sobě, šířka podle delšího → řádek chatu se při najetí neposune */
.ucbs-lbl { display: inline-grid; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ucbs-mute); font-weight: 800; flex: none; white-space: nowrap; }
.ucbs-lbl > span { grid-area: 1 / 1; }
.ucbs-lbl .lb2, .peek .ucbs-lbl .la { visibility: hidden; }
.peek .ucbs-lbl .lb2 { visibility: visible; }
.ucbs-eq.peek .ucbs-lbl { color: #ffd36b; }
.ucbs-eqin .ucbs-eqline { flex: 0 1 auto; display: flex; min-width: 0; }
.ucbs-eqnm { margin-left: auto; font-size: 11px; color: var(--ucbs-fg2); font-weight: 700; flex: none; }
.ucbs-eqwarn:empty { display: none; }
.ucbs-eqin .ucbs-eqwarn { width: 100%; }
.ucbs-warn { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #ffb35c; line-height: 1.3; }
.ucbs-warn svg { flex: none; }

/* aktivita */
.ucbs-act { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; border: 1px solid; font-size: 12px; min-height: 38px; }
.ucbs-act.on, .ucbs-pact.on { border-color: rgba(61,220,132,.4); background: linear-gradient(90deg, rgba(61,220,132,.09), rgba(61,220,132,.02)); }
.ucbs-act.off, .ucbs-pact.off { border-color: rgba(255,140,0,.55); background: linear-gradient(90deg, rgba(255,140,0,.14), rgba(255,140,0,.03)); }
.ucbs-act .dot, .ucbs-pact .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ucbs-act.on .dot, .ucbs-pact.on .dot { background: var(--ucbs-ok); box-shadow: 0 0 8px var(--ucbs-ok); }
.ucbs-act.off .dot, .ucbs-pact.off .dot { background: var(--ucbs-uc1); box-shadow: 0 0 8px var(--ucbs-uc1); animation: ucbs-breathe 1.8s ease-in-out infinite; }
@keyframes ucbs-breathe { 0%, 100% { opacity: .6; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
.ucbs-act .tx { min-width: 0; color: var(--ucbs-fg2); }
.ucbs-act .tx b { color: var(--ucbs-fg); }
.ucbs-act .meter { width: 54px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-left: auto; flex: none; }
.ucbs-act .meter i, .ucbs-pact .meter i { display: block; height: 100%; background: linear-gradient(90deg, #2fae68, var(--ucbs-ok)); }

/* přepínač prestiže = .uc-seg (core/seg-switch.css); bublina řetězu */
.ucbs .uc-seg button .ucbs-ch { position: absolute; top: -5px; right: 4px; min-width: 16px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--ucbs-uc1); color: #1a1205; font-size: 9.5px; font-weight: 900; line-height: 15px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; pointer-events: none; }
.ucbs .uc-seg button.ucbs-chain { color: #ffd88a; }
.ucbs .uc-seg button.ucbs-chain .ucbs-ch { opacity: 1; transform: none; }
.ucbs .uc-seg button .n { font-size: 11px; }
.ucbs-seghd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; }
.ucbs-seghd b { font-size: 12.5px; }
.ucbs-seghd span { font-size: 11px; color: var(--ucbs-mute); text-align: right; }

/* mřížka odznaků (záložka 4 × 2) */
.ucbs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ucbs-cell { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 19px 3px 7px; border-radius: 10px; border: 1px solid var(--ucbs-border); background: var(--ucbs-tile); cursor: pointer; text-align: center; overflow: hidden; min-height: 118px; transition: transform .16s cubic-bezier(.2,.8,.3,1), border-color .15s, box-shadow .15s; }
.ucbs-cell::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.1) 50%, transparent 65%); transform: translateX(-120%); }
.ucbs-cell:hover { transform: translateY(-2px); }
.ucbs-cell:hover::after { animation: ucbs-sweep .6s ease-out; }
.ucbs-cell:focus-visible, .ucbs-btn:focus-visible, .ucbs .uc-seg button:focus-visible { outline: 2px solid var(--ucbs-uc2); outline-offset: 2px; }
.ucbs-bw { position: relative; width: 40px; height: 40px; }
.ucbs-bw::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 66%); opacity: var(--go, .5); }
.ucbs-bw svg { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px var(--glow)); }
.ucbs-nm { font-size: 11px; font-weight: 800; color: var(--acc); line-height: 1.15; min-height: 25px; display: flex; align-items: center; }
.ucbs-st { font-size: 10.5px; color: var(--ucbs-fg2); display: flex; align-items: center; justify-content: center; gap: 2px; line-height: 1.15; }
.ucbs-pr { font-size: 12.5px; font-weight: 800; color: #ffe9b0; display: flex; align-items: center; gap: 2px; font-family: var(--ucbs-mono); }
.ucbs-mini { width: 78%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.ucbs-mini i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc2), var(--acc)); }
.ucbs-tag { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 8.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; padding: 1px 5px; border-radius: 5px; }
.ucbs-cell.owned { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 12%, var(--ucbs-tile)), var(--ucbs-tile) 70%); border-color: color-mix(in srgb, var(--acc) 45%, var(--ucbs-border)); }
.ucbs-cell.owned .ucbs-tag { background: rgba(61,220,132,.16); color: var(--ucbs-ok); }
.ucbs-cell.equipped { box-shadow: 0 0 0 2px var(--acc), 0 0 16px color-mix(in srgb, var(--acc) 40%, transparent); }
.ucbs-cell.equipped .ucbs-tag { background: var(--acc); color: #0d0d10; }
.ucbs-cell.buyable { border-color: rgba(255,170,40,.5); }
.ucbs-cell.buyable.afford { animation: ucbs-lure 2.6s ease-in-out infinite; }
@keyframes ucbs-lure { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,150,30,0); } 50% { box-shadow: 0 0 14px 0 rgba(255,150,30,.32); } }
.ucbs-cell.buyable .ucbs-tag { background: rgba(255,140,0,.18); color: #ffc062; }
.ucbs-cell.donate .ucbs-tag { background: rgba(255,255,255,.07); color: var(--ucbs-fg2); }
.ucbs-cell.locked .ucbs-bw svg, .ucbs-cell.donate:not(.owned) .ucbs-bw svg { filter: grayscale(.75) brightness(.55); animation: none; }
.ucbs-cell.locked .ucbs-bw::before, .ucbs-cell.donate:not(.owned) .ucbs-bw::before { opacity: .12; }
.ucbs-cell.locked .ucbs-nm, .ucbs-cell.donate:not(.owned) .ucbs-nm { color: #8d8d99; }
.ucbs-cell.locked { background: #141418; }
.ucbs-cell.locked .ucbs-tag { background: rgba(255,255,255,.06); color: var(--ucbs-mute); }
.ucbs-lock { position: absolute; left: 50%; top: 34px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; display: grid; place-items: center; background: rgba(12,12,15,.85); border: 1px solid #3a3a44; z-index: 2; }
.ucbs-cell.chain { border-color: rgba(255,200,80,.85); box-shadow: inset 0 0 0 1px rgba(255,200,80,.3), 0 0 12px rgba(255,170,40,.22); }
.ucbs-cell.chain::before { content: ''; position: absolute; inset: 0; background: rgba(255,170,40,.07); pointer-events: none; }
.ucbs-cell.target { border-color: #ffd36b; box-shadow: 0 0 0 2px #ffd36b, 0 0 18px rgba(255,200,80,.38); }
.ucbs-cell.t8 { background: linear-gradient(160deg, #1d1608, #121014); }
.ucbs-cell.t8.owned .ucbs-nm { background: linear-gradient(90deg, #fff1c2, #ffd36b, #9eeaff, #ffd36b); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ucbs-nameflow 5s linear infinite; }
.ucbs .unlockfx { animation: ucbs-unlock .9s cubic-bezier(.2,.9,.3,1.2); }
@keyframes ucbs-unlock { 0% { transform: scale(.9); filter: brightness(2.4); } 45% { transform: scale(1.06); } 100% { transform: none; filter: none; } }

/* ultimátní T8 (záložka) */
.ucbs-ult { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 11px 12px; border-radius: 12px; overflow: hidden; isolation: isolate; margin-top: 2px;
  background: radial-gradient(260px 120px at 10% 40%, rgba(255,200,80,.16), transparent 70%), linear-gradient(135deg, #1b1407, #120f0a 55%, #0f0d0a); }
.ucbs-ult::before, .ucbs-pult::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; z-index: 2; pointer-events: none;
  background: conic-gradient(from var(--ucbs-ua), #ffd36b, #ffb627 18%, #a8ffcf 23%, #fff8e6 27%, #fff1c2 34%, #ffd36b 46%, #e9a23b 58%, #9eeaff 63%, #ffb0dc 67%, #ffb627 72%, #fff1c2 85%, #ffd36b);
  -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: ucbs-uaSpin 9s linear infinite; }
@property --ucbs-ua { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ucbs-uaSpin { to { --ucbs-ua: 360deg; } }
.ucbs-dotsbg { position: absolute; inset: 0; z-index: 0; opacity: .45; pointer-events: none; background-image: radial-gradient(circle, rgba(255,211,107,.22) 0 1px, transparent 1.4px); background-size: 8px 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, transparent); mask-image: linear-gradient(90deg, transparent, #000 50%, transparent); }
.ucbs-ult > *, .ucbs-pult > * { position: relative; z-index: 1; }
.ucbs-ult > .ucbs-dotsbg, .ucbs-pult > .ucbs-dotsbg, .ucbs-pult > .ucbs-foil { position: absolute; z-index: 0; }
.ucbs-hero { position: relative; }
.ucbs-ult .ucbs-hero { grid-row: span 3; width: 52px; height: 52px; }
.ucbs-hero svg { width: 100%; height: 100%; overflow: visible; position: relative; }
.ucbs-hero::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(255,200,80,.42), transparent 65%); animation: ucbs-breathe 3.6s ease-in-out infinite; }
.ucbs-kick { font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #ffd36b; }
.ucbs-ult h3 { margin: 0; font-size: 15px; font-weight: 900; line-height: 1.2; }
.ucbs-ult h3, .ucbs-pult h2 { background: linear-gradient(90deg, #fff1c2, #ffd36b 30%, #9eeaff 48%, #ffd36b 60%, #ffb0dc 75%, #fff1c2); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ucbs-nameflow 6s linear infinite; }
.ucbs-urow { display: flex; align-items: center; gap: 8px; }
.ucbs-prog { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.ucbs-prog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #e9a23b, #ffd36b, #fff1c2); transition: width .6s cubic-bezier(.2,.8,.3,1); }
.ucbs-need { font-size: 11px; color: #c9bfa6; white-space: nowrap; }
.ucbs-ufoot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-top: 4px; }
.ucbs-uprice { font-size: 16px; font-weight: 900; display: flex; align-items: center; gap: 4px; color: #fff1c2; }

/* tlačítka */
.ucbs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer; font-weight: 800; font-size: 12.5px; white-space: nowrap; transition: transform .15s, filter .15s; }
.ucbs-btn.buy { color: #1a1205 !important; background: linear-gradient(135deg, var(--ucbs-uc1), #ffc94d); box-shadow: 0 0 14px rgba(255,140,0,.32); }
.ucbs-btn.buy:hover { filter: brightness(1.08); }
.ucbs-btn.gold { color: #2a1800 !important; background: linear-gradient(135deg, #fff1c2, #ffd36b 40%, #e9a23b); box-shadow: 0 0 16px rgba(255,200,80,.4); }
.ucbs-btn.ghost { background: var(--ucbs-bg3); border: 1px solid var(--ucbs-border); color: var(--ucbs-fg); }
.ucbs-btn.sm { height: 26px; padding: 0 9px; font-size: 11.5px; margin-left: auto; }
.ucbs-btn[disabled] { cursor: not-allowed; filter: grayscale(.7) brightness(.7); box-shadow: none; }

/* okno nákupu (záložka: zespodu přes obsah; velký obchod: uprostřed) */
.ucbs-scrim { position: absolute; inset: 0; z-index: 30; background: rgba(5,5,8,.62); display: flex; align-items: flex-end; animation: ucbs-fadeIn .15s ease-out; }
.ucbs-scrim.out { animation: ucbs-fadeOut .16s ease-in forwards; }
@keyframes ucbs-fadeIn { from { opacity: 0; } }
@keyframes ucbs-fadeOut { to { opacity: 0; } }
.ucbs-sheet { width: 100%; max-height: calc(100% - 18px); overflow-y: auto; overflow-x: hidden; border-radius: 14px 14px 0 0; background: #16161b; border-top: 1px solid #3a3a44; box-shadow: 0 -20px 50px rgba(0,0,0,.6); padding: 12px; display: grid; gap: 10px; animation: ucbs-up .22s cubic-bezier(.2,.9,.3,1); scrollbar-width: thin; scrollbar-color: #3a3a42 transparent; }
.ucbs-scrim.out .ucbs-sheet { animation: ucbs-down .16s ease-in forwards; }
@keyframes ucbs-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes ucbs-down { to { transform: translateY(30px); opacity: 0; } }
.ucbs-grab { width: 34px; height: 4px; border-radius: 2px; background: #3a3a44; margin: -4px auto 0; }
.ucbs-hd { display: flex; gap: 10px; align-items: center; }
.ucbs-hbw { width: 44px; height: 44px; flex: none; }
.ucbs-hbw svg { width: 100%; height: 100%; overflow: visible; }
.ucbs-sheet h3 { margin: 0; font-size: 15.5px; font-weight: 900; }
.ucbs-sub { margin: 2px 0 0; color: var(--ucbs-fg2); font-size: 12px; }
.ucbs-pv { display: grid; gap: 8px; padding: 10px; border-radius: 10px; background: #0f0f12; border: 1px solid var(--ucbs-border); }
.ucbs-pv .ucbs-chatline { padding: 5px 8px; border-radius: 7px; background: var(--ucbs-bg2); }
/* karta podporovatele (core/badge-v3-card.js) v náhledu: v toku, ne fixed */
.ucbs-pvcard { display: flex; justify-content: center; padding-top: 12px; }
.ucbs-pvcard .ucsc { position: relative; z-index: 0; left: auto; top: auto; min-width: min(236px, 100%); max-width: min(340px, 100%); }
.ucbs-lines { display: grid; gap: 4px; }
.ucbs-line { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: #1d1d23; }
.ucbs-line svg { width: 22px; height: 22px; overflow: visible; }
.ucbs-lname { font-size: 12px; font-weight: 700; }
.ucbs-lname small { color: var(--ucbs-mute); font-weight: 600; margin-left: 5px; }
.ucbs-lp { display: flex; align-items: center; gap: 3px; font-weight: 800; font-family: var(--ucbs-mono); font-size: 12px; }
.ucbs-line.main { background: linear-gradient(90deg, rgba(255,140,0,.14), #1d1d23); border: 1px solid rgba(255,170,40,.4); }
.ucbs-sum { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--ucbs-border); }
.ucbs-sum > div { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ucbs-fg2); }
.ucbs-sum > div b { display: flex; align-items: center; gap: 3px; color: var(--ucbs-fg); font-family: var(--ucbs-mono); }
.ucbs-sum .tot { color: var(--ucbs-fg); font-weight: 800; font-size: 13.5px; }
.ucbs-sum .tot b { font-size: 16px; color: #ffe9b0; }
.ucbs-sum .neg b { color: #ff8a80; }
.ucbs-acts { display: flex; gap: 8px; justify-content: flex-end; }
.ucbs-acts .ucbs-btn { height: 34px; }
.ucbs-err { font-size: 12px; font-weight: 700; color: #ff8a80; text-align: right; }

.ucbs-toast { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 40; max-width: calc(100% - 24px); padding: 8px 12px; border-radius: 9px; background: #1f2a1f; border: 1px solid rgba(61,220,132,.5); color: #d9ffe8; font-weight: 700; font-size: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: ucbs-up .2s ease-out; }

/* ===== velký obchod ===== */
.ucbs-page { font-size: 14px; line-height: 1.45; padding: 26px max(16px, env(safe-area-inset-right, 0px)) 70px max(16px, env(safe-area-inset-left, 0px)); min-height: 100%;
  --ucbs-bg: #0b0b0e; --ucbs-panel: #141418; --ucbs-line: #2a2a32; --ucbs-fg2: #a8a8b4; --ucbs-mute: #74747f;
  background: var(--ucbs-bg) radial-gradient(1200px 500px at 50% -200px, rgba(255,140,0,.10), transparent 70%) no-repeat; }
.ucbs-page .ucbs-wrap { max-width: 1240px; margin: 0 auto; display: grid; gap: 26px; }
.ucbs-page .ucbs-ico { vertical-align: -5px; }
.ucbs-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.ucbs-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--ucbs-uc1); }
.ucbs-page h1 { margin: 4px 0 0; font-size: 32px; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; }
.ucbs-page h1 span { background: linear-gradient(90deg, var(--ucbs-uc1), var(--ucbs-uc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ucbs-lead { margin: 6px 0 0; color: var(--ucbs-fg2); max-width: 64ch; }
.ucbs-pwallet { display: flex; flex-wrap: wrap; gap: 10px; }
.ucbs-pill { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--ucbs-panel); border: 1px solid var(--ucbs-line); }
.ucbs-pill small { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ucbs-mute); font-weight: 800; }
.ucbs-pill b { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.ucbs-pill.bal { border-color: rgba(255,170,40,.45); background: linear-gradient(135deg, rgba(255,140,0,.14), rgba(255,217,61,.05)); box-shadow: 0 0 22px rgba(255,140,0,.14); }
.ucbs-pill.bal b { color: #ffe9b0; }
.ucbs-pill .ucbs-wico .ucbs-ico { width: 38px; height: 38px; }
.ucbs-page .bump { animation-duration: .5s; }

/* náhled v chatu drží nahoře i při posouvání (najetí na odznak dole ho právě mění) */
.ucbs-preview { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--ucbs-panel) 94%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--ucbs-line); box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.ucbs-preview .ucbs-lbl { font-size: 11px; letter-spacing: .14em; }
.ucbs-preview .ucbs-lbl em { font-style: normal; color: #ffd36b; }
.ucbs-preview.peek { border-color: rgba(255,200,80,.5); }
.ucbs-preview .ucbs-chatline { gap: 7px; padding: 8px 12px; border-radius: 9px; background: #18181b; font-size: 14px; }
.ucbs-preview .ucbs-chatline .ucbs-t { color: #848494; font-size: 12px; }
.ucbs-note { font-size: 12px; color: var(--ucbs-mute); }
.ucbs-preview .ucbs-eqwarn { width: 100%; order: 9; margin-top: -6px; }
.ucbs-collect { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ucbs-collect .ucbs-ring { width: 46px; height: 46px; display: block; }
.ucbs-collect b { font-size: 15px; }
.ucbs-collect span:not(.ucbs-ringw) { color: var(--ucbs-fg2); font-size: 12.5px; display: block; }

/* aktivita (velký obchod) */
.ucbs-pact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid; }
.ucbs-pact .dot { width: 10px; height: 10px; }
.ucbs-pact b { font-size: 14.5px; }
.ucbs-pact > span { color: var(--ucbs-fg2); font-size: 13px; }
.ucbs-pact .meter { width: 160px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-left: auto; }
.ucbs-pact .ucbs-btn { margin-left: auto; }

/* ultimátní T8 (velký obchod) */
.ucbs-pult { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 26px 30px; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: radial-gradient(600px 220px at 15% 50%, rgba(255,200,80,.16), transparent 70%), linear-gradient(135deg, #1b1407, #120f0a 50%, #0f0d0a); }
.ucbs-pult::before { padding: 1.5px; }
.ucbs-foil { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 0 18%, rgba(168,255,207,.07) 22%, rgba(255,248,230,.12) 25%, rgba(158,234,255,.06) 28%, transparent 34% 56%, rgba(255,176,220,.06) 60%, rgba(255,248,230,.1) 63%, transparent 70%); background-size: 260% 100%; animation: ucbs-foil 9s ease-in-out infinite alternate; }
@keyframes ucbs-foil { from { background-position: 0 0; } to { background-position: 100% 0; } }
.ucbs-pult .ucbs-dotsbg { opacity: .5; background-size: 9px 9px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 40%, #000 70%, transparent); }
.ucbs-pult .ucbs-hero { width: 132px; height: 132px; }
.ucbs-pult .ucbs-hero::before { inset: -30px; background: radial-gradient(circle, rgba(255,200,80,.45), transparent 65%); }
.ucbs-pult .ucbs-kick { font-size: 11px; letter-spacing: .22em; }
.ucbs-pult h2 { margin: 6px 0; font-size: 28px; font-weight: 900; letter-spacing: -.01em; }
.ucbs-pult p { margin: 0; color: #d9cfb8; max-width: 58ch; }
.ucbs-chips { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.ucbs-chips span { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,211,107,.1); border: 1px solid rgba(255,211,107,.3); color: #ffe7a8; }
.ucbs-side { display: grid; justify-items: end; gap: 10px; text-align: right; }
.ucbs-pult .ucbs-uprice { font-size: 30px; gap: 8px; }
.ucbs-pult .ucbs-uprice .ucbs-ico { width: 44px; height: 44px; }
.ucbs-pult .ucbs-need { font-size: 12.5px; white-space: normal; }
.ucbs-pult .ucbs-prog { flex: none; width: 220px; height: 8px; border-radius: 4px; }
.ucbs-pult .ucbs-prog i { border-radius: 4px; }
@media (max-width: 860px) { .ucbs-pult { grid-template-columns: minmax(0, 1fr); justify-items: start; } .ucbs-side { justify-items: start; text-align: left; } }
.ucbs-page .ucbs-btn { height: 44px; padding: 0 18px; border-radius: 12px; font-size: 14.5px; gap: 8px; }
.ucbs-page .ucbs-btn.buy:hover { transform: translateY(-1px); }
.ucbs-page .ucbs-btn.gold { box-shadow: 0 0 24px rgba(255,200,80,.45); }
.ucbs-page .ucbs-btn.ghost { background: #1f1f25; border-color: var(--ucbs-line); }
.ucbs-page .ucbs-btn[disabled] { transform: none; }

.ucbs-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ucbs-fg2); font-size: 12.5px; }
.ucbs-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* mřížka 4 prestiže × 8 tierů */
.ucbs-pgrid { overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: #3a3a42 transparent; }
.ucbs-gtable { min-width: 1100px; display: grid; grid-template-columns: 112px repeat(8, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.ucbs-ghead { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ucbs-mute); padding: 0 4px 2px; display: flex; align-items: flex-end; justify-content: center; text-align: center; }
.ucbs-ghead.grp { grid-column: span 3; border-bottom: 1px solid var(--ucbs-line); padding-bottom: 6px; color: #c9c9d2; }
.ucbs-ghead.grp.cur { grid-column: span 4; color: #ffd88a; border-bottom-color: rgba(255,170,40,.5); }
.ucbs-ghead.grp.ult8 { grid-column: span 1; color: #ffe7a8; border-bottom-color: rgba(255,211,107,.55); }
.ucbs-rowlbl { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 4px; }
.ucbs-rowlbl b { font-size: 22px; font-weight: 900; letter-spacing: .04em; }
.ucbs-rowlbl span { font-size: 12px; color: var(--ucbs-fg2); }
.ucbs-gtable .ucbs-cell { gap: 6px; padding: 30px 8px 12px; border-radius: 14px; border-color: var(--ucbs-line); min-height: 168px; transition: transform .18s cubic-bezier(.2,.8,.3,1), border-color .2s, box-shadow .2s, filter .2s; }
.ucbs-gtable .ucbs-cell:hover { transform: translateY(-3px); }
.ucbs-gtable .ucbs-cell:hover::after { animation-duration: .7s; }
.ucbs-gtable .ucbs-bw { width: 64px; height: 64px; }
.ucbs-gtable .ucbs-bw::before { inset: -16px; }
.ucbs-gtable .ucbs-bw svg { filter: drop-shadow(0 0 4px var(--glow)); }
.ucbs-gtable .ucbs-cell.locked .ucbs-bw svg, .ucbs-gtable .ucbs-cell.donate:not(.owned) .ucbs-bw svg { filter: grayscale(.75) brightness(.55) drop-shadow(0 0 2px rgba(0,0,0,.5)); }
.ucbs-gtable .ucbs-nm { font-size: 13px; min-height: 0; }
.ucbs-gtable .ucbs-st { font-size: 11.5px; gap: 4px; min-height: 22px; }
.ucbs-gtable .ucbs-pr { font-size: 15px; gap: 4px; }
.ucbs-gtable .ucbs-mini { position: relative; width: 82%; height: 4px; }
.ucbs-gtable .ucbs-tag { top: 8px; font-size: 9.5px; letter-spacing: .08em; padding: 2px 6px; border-radius: 6px; }
.ucbs-gtable .ucbs-cell.equipped { box-shadow: 0 0 0 2px var(--acc), 0 0 22px color-mix(in srgb, var(--acc) 40%, transparent); }
.ucbs-gtable .ucbs-cell.buyable.afford { animation-name: ucbs-lure-big; }
@keyframes ucbs-lure-big { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,150,30,0); } 50% { box-shadow: 0 0 18px 0 rgba(255,150,30,.35); } }
.ucbs-gtable .ucbs-lock { top: 50px; width: 26px; height: 26px; margin-left: -13px; }
.ucbs-gtable .ucbs-cell.chain { box-shadow: inset 0 0 0 1px rgba(255,200,80,.35), 0 0 14px rgba(255,170,40,.25); }
.ucbs-gtable .ucbs-cell.target { box-shadow: 0 0 0 2px #ffd36b, 0 0 24px rgba(255,200,80,.4); }
.ucbs-gtable .ucbs-cell.t8 .ucbs-nm { background: linear-gradient(90deg, #fff1c2, #ffd36b, #9eeaff, #ffd36b); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ucbs-nameflow 5s linear infinite; }
.ucbs-gtable .ucbs-cell.t8.locked .ucbs-nm { animation: none; background: none; color: #8d8d99; }

/* okno velkého obchodu: uprostřed */
.ucbs-scrim.big { position: fixed; z-index: 40; background: rgba(5,5,8,.68); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; }
.ucbs-scrim.big .ucbs-sheet { width: min(480px, 100%); max-height: calc(100vh - 40px); overflow-x: hidden; overflow-y: auto; border-radius: 18px; border: 1px solid #33333d; box-shadow: 0 30px 80px rgba(0,0,0,.7); padding: 22px; gap: 16px; animation: ucbs-pop .2s cubic-bezier(.2,.9,.3,1.2); }
.ucbs-scrim.big.out .ucbs-sheet { animation: ucbs-down .16s ease-in forwards; }
@keyframes ucbs-pop { from { transform: translateY(8px) scale(.97); opacity: 0; } }
.ucbs-scrim.big h3 { font-size: 20px; }
.ucbs-scrim.big .ucbs-sub { margin-top: 4px; font-size: 13px; }
.ucbs-scrim.big .ucbs-hd { gap: 14px; }
.ucbs-scrim.big .ucbs-hbw { width: 72px; height: 72px; }
.ucbs-scrim.big .ucbs-pv { gap: 10px; padding: 14px; border-radius: 14px; border-color: var(--ucbs-line); }
.ucbs-scrim.big .ucbs-cap { font-size: 10.5px; letter-spacing: .14em; }
.ucbs-scrim.big .ucbs-pv .ucbs-chatline { gap: 7px; padding: 8px 12px; border-radius: 9px; background: #18181b; font-size: 14px; }
.ucbs-scrim.big .ucbs-lines { gap: 6px; }
.ucbs-scrim.big .ucbs-line { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 7px 10px; border-radius: 10px; }
.ucbs-scrim.big .ucbs-line svg { width: 26px; height: 26px; }
.ucbs-scrim.big .ucbs-lname, .ucbs-scrim.big .ucbs-lp { font-size: 13px; }
.ucbs-scrim.big .ucbs-sum { gap: 6px; border-top-color: var(--ucbs-line); }
.ucbs-scrim.big .ucbs-sum > div { font-size: 13.5px; }
.ucbs-scrim.big .ucbs-sum .tot { font-size: 16px; }
.ucbs-scrim.big .ucbs-sum .tot b { font-size: 20px; }
.ucbs-scrim.big .ucbs-acts { gap: 10px; flex-wrap: wrap; }
.ucbs-scrim.big .ucbs-btn { height: 44px; }
.ucbs-toast.big { position: fixed; bottom: max(24px, env(safe-area-inset-bottom, 0px)); z-index: 50; padding: 12px 18px; border-radius: 12px; font-size: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.6); }

/* Pochlubit se (core/badge-reveal.css má odhalení a sbírku): Chci taky = kdo ho už má, šipky do Velkého obchodu, sbírka jako tlačítko.
   Předloha maketa docs/mockups/src/2026-10-21-pochlubit-se/template.html (.social ř. 489–491, .bigopen 123–125). */
.ucbs-social { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: color-mix(in srgb, var(--a) 10%, #141417); border: 1px solid color-mix(in srgb, var(--a) 30%, transparent); font-size: 13px; color: #dcdce2; }
.ucbs-social b { color: #ff8c00; }
.ucbs-faces { display: flex; flex: none; }
.ucbs-faces i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #1b1b20; margin-left: -6px; background: var(--f); }
.ucbs-faces i:first-child { margin-left: 0; }
.ucbs-hd .ucbs-bigopen { 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(--ucbs-fg2); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.ucbs-hd .ucbs-bigopen:hover { color: var(--ucbs-fg); border-color: rgba(255, 170, 40, .55); background: rgba(255, 140, 0, .12); }
.ucbs-hd .ucbs-bigopen svg { width: 17px; height: 17px; }
.ucbs-collbtn { cursor: pointer; transition: border-color .15s, background .15s; }
.ucbs-collbtn:hover { border-color: rgba(255, 170, 40, .55); }
.ucbs-collbtn:focus-visible { outline: 2px solid #ffd93d; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ucbs *, .ucbs *::before, .ucbs *::after, .ucbs-scrim, .ucbs-sheet { animation: none !important; transition: none !important; }
}