/* Odznaky – dlaždice, rámiky, animácie (epický = lesk + žiara, legendárny = lúče, iskry, vznášanie) */
.bdg { position: relative; display: inline-grid; place-items: center; width: var(--bs, 72px); height: var(--bs, 72px); }
.bdg .bsvg { width: 100%; height: 100%; overflow: visible; display: block; }
.bdg.t3 .bsvg { filter: drop-shadow(0 0 6px rgb(var(--gold-rgb) / .45)); animation: bGlow 2.8s ease-in-out infinite; }
.bdg.t4 .bsvg { filter: drop-shadow(0 0 10px rgba(95, 214, 255, .55)); animation: bFloat 3.6s ease-in-out infinite; }
.bdg .shine { animation: bShine 3.4s ease-in-out infinite; }
.bdg.t4 .shine { animation-duration: 2.6s; }
.bdg .aura { transform-origin: 32px 32px; animation: bSpin 14s linear infinite; }
.bdg .spark circle { animation: bTwinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bdg .spark circle:nth-child(2) { animation-delay: .5s; } .bdg .spark circle:nth-child(3) { animation-delay: 1s; } .bdg .spark circle:nth-child(4) { animation-delay: 1.4s; }
@keyframes bShine { 0%, 55% { transform: rotate(25deg) translateX(0); } 100% { transform: rotate(25deg) translateX(120px); } }
@keyframes bSpin { to { transform: rotate(360deg); } }
@keyframes bFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes bGlow { 0%, 100% { filter: drop-shadow(0 0 4px rgb(var(--gold-rgb) / .35)); } 50% { filter: drop-shadow(0 0 11px rgb(var(--gold-rgb) / .7)); } }
@keyframes bTwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.3); } }
.bdg.locked .bsvg { filter: grayscale(1) brightness(.55) contrast(.9); opacity: .55; animation: none; }
.bdg.locked * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .bdg *, .bdg .bsvg { animation: none !important; } }

/* mriežka odznakov */
.bcat { display: grid; gap: 10px; padding: 0; position: relative; }
.bcat-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bcat-h h3 { font-size: 24px; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.btile { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 12px 8px 10px; border-radius: 8px; background: var(--field); border: 1px solid var(--line);
  cursor: default; transition: transform .18s, border-color .18s, background .18s; outline: none; }
.btile:hover, .btile:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--diamond) 40%, var(--line)); background: var(--night-4); z-index: 5; }
.btile.got.t1 { border-color: rgba(208,138,78,.45); } .btile.got.t2 { border-color: rgba(201,211,227,.45); }
.btile.got.t3 { border-color: rgb(var(--gold-rgb) / .55); background: linear-gradient(180deg, rgb(var(--gold-rgb) / .08), var(--field) 60%); }
.btile.got.t4 { border-color: rgba(95,214,255,.6); background: linear-gradient(180deg, rgba(138,92,255,.12), var(--field) 60%); }
.btile .bn { font-size: 13px; font-weight: 600; line-height: 1.25; }
.btile:not(.got) .bn { color: var(--muted); font-weight: 500; }
.btile .bt { font-size: 11px; color: var(--muted); }
.btile .bp { width: 100%; height: 5px; border-radius: 3px; background: var(--night-3); overflow: hidden; }
.btile .bp i { display: block; height: 100%; background: #56607a; }
.btile.pin::after { content: "📌"; position: absolute; top: 4px; right: 6px; font-size: 13px; }
/* bublina s popisom pri prejdení myšou */
.btip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); width: 230px; padding: 10px 12px; border-radius: 8px; text-align: left;
  background: var(--night-3); border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,.55); font-size: 13px; line-height: 1.45; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 30; }
.btile:hover .btip, .btile:focus-visible .btip { opacity: 1; transform: translateX(-50%); }
.btip b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.btip .tt { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.btip .ok { color: var(--good); }
.btip.t1 b { color: #e0a46b; } .btip.t2 b { color: #dfe6f1; } .btip.t3 b { color: #ffc83d; } .btip.t4 b { color: #7df3ff; }

/* hlavička odznakov – level profilu */
.blevel { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.blevel .lv { position: relative; width: 112px; height: 112px; box-sizing: border-box; padding-bottom: 4px; display: grid; place-content: center; justify-items: center; gap: 3px; flex: none; }
.blevel .lv svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.blevel .lv b { position: relative; padding-left: .06em; font-family: var(--f-display); font-weight: 400; font-size: 50px; line-height: .8; white-space: nowrap; color: var(--gold); text-shadow: 0 0 18px rgb(var(--gold-rgb) / .45); }
.blevel .lv b.d3 { font-size: 40px; }
.blevel .lv span { position: relative; font-size: 11px; line-height: 1; margin-right: -.1em; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.bshow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.bshow .slot { width: 64px; height: 64px; border-radius: 8px; border: 1px dashed var(--line); display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.bfilter { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 600px) { .bgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .bdg { --bs: 58px; } .blevel { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* level pri mene (karta, verejný profil) */
.plv { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-display); font-size: 20px; color: var(--gold); }
.plv small { font-family: var(--f-body); font-size: 12px; color: var(--muted); }

/* vitrína – výber kliknutím */
.btile.pickable { cursor: pointer; }
.bshow .sc-item { display: inline-grid; }
.edit-note { font-size: 13px; color: var(--muted); }
.bedit .btile.got { cursor: pointer; }
.bedit .btile.got:hover { border-color: var(--torch); }

/* upozornenie na nový odznak */
.bpop { width: min(380px, 100%); justify-items: center; text-align: center; overflow: hidden; }
.bpop::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgb(var(--gold-rgb) / .18), transparent 30%, rgba(125,243,255,.16), transparent 60%); animation: bSpin 8s linear infinite; pointer-events: none; }
.bpop > * { position: relative; }
.bpop.t1::before, .bpop.t2::before { opacity: .5; }
.bpop-k { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: var(--torch); }
.bpop.t4 .bpop-k { color: #7df3ff; }
.bpop .bdg { animation: bPopIn .7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes bPopIn { from { transform: scale(.2) rotate(-25deg); opacity: 0; } }
.bpop h3 { font-size: 30px; }
.bpop p { margin: 0; }
.bshow-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
a.plevel.on { text-decoration: none; color: inherit; border-style: solid; border-color: rgb(var(--gold-rgb) / .35); transition: border-color .15s, background .15s; }
a.plevel.on:hover { border-color: var(--gold); background: rgb(var(--gold-rgb) / .06); }
.plevel .pl-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffc83d, #7df3ff); }
.plevel .bshow { justify-content: center; gap: 6px; }
.btip.r { left: auto; right: 0; transform: translateY(4px); }
.btip.l { left: 0; transform: translateY(4px); }
.btile:hover .btip.r, .btile:focus-visible .btip.r, .btile:hover .btip.l, .btile:focus-visible .btip.l { transform: none; }

/* =====================================================================================
   Nové obrázky odznakov (/odznaky/<id>.webp) – animácie robí web
   🥉🥈 pokojné · 🥇 lesk po tvare odznaku + zlatá žiara · 💎 točiace sa lúče, iskry, vznášanie, azúrová žiara
   nezískané = sivé bez animácie · tajné nezískané = len tmavý tieň rámu
   ===================================================================================== */
.bdg.img { isolation: isolate; }
.bdg.img img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: contain; image-rendering: auto; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); transition: transform .25s ease, filter .25s ease; }
.btile:hover .bdg.img:not(.locked) img { transform: scale(1.06); }
.bdg.img.t3 img { animation: bGlowImg 2.8s ease-in-out infinite; }
.bdg.img.t4 img { animation: bGlowImg4 3.2s ease-in-out infinite; }
.bdg.img.t4 { animation: bFloat 3.6s ease-in-out infinite; }
@keyframes bGlowImg { 0%, 100% { filter: drop-shadow(0 0 3px rgb(var(--gold-rgb) / .35)) drop-shadow(0 4px 6px rgba(0,0,0,.45)); } 50% { filter: drop-shadow(0 0 12px rgb(var(--gold-rgb) / .75)) drop-shadow(0 4px 6px rgba(0,0,0,.45)); } }
@keyframes bGlowImg4 { 0%, 100% { filter: drop-shadow(0 0 6px rgba(95,214,255,.5)) drop-shadow(0 4px 6px rgba(0,0,0,.45)); } 50% { filter: drop-shadow(0 0 16px rgba(176,124,255,.8)) drop-shadow(0 4px 6px rgba(0,0,0,.45)); } }
/* lesk – svetelný pás prejde len po tvare odznaku (maska z obrázka) */
.bdg.img .shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.0) 42%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 58%, transparent 62%) no-repeat; background-size: 300% 100%;
  mix-blend-mode: screen; animation: bShineImg 3.6s ease-in-out infinite; }
.bdg.img.t4 .shine { animation-duration: 2.8s; background-image: linear-gradient(115deg, transparent 38%, rgba(190,240,255,.0) 42%, rgba(210,245,255,.7) 50%, rgba(190,240,255,0) 58%, transparent 62%); }
@keyframes bShineImg { 0%, 45% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
/* lúče za legendárnym odznakom */
.bdg.img .rays { position: absolute; inset: -18%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(125,243,255,0) 0deg 9deg, rgba(125,243,255,.30) 11deg 13deg, rgba(176,124,255,0) 15deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 68%); mask: radial-gradient(circle, #000 28%, transparent 68%); animation: bSpin 16s linear infinite; }
/* iskry */
.bdg.img .spk { position: absolute; z-index: 3; width: 9%; height: 9%; pointer-events: none; background: radial-gradient(circle, #fff 0 18%, rgba(160,235,255,.9) 30%, transparent 62%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: bTwinkle 2.2s ease-in-out infinite; }
.bdg.img .s1 { left: 8%; top: 14%; } .bdg.img .s2 { right: 6%; top: 30%; animation-delay: .6s; } .bdg.img .s3 { left: 16%; bottom: 10%; animation-delay: 1.1s; } .bdg.img .s4 { right: 14%; bottom: 6%; animation-delay: 1.6s; }
/* nezískané */
.bdg.img.locked img { filter: grayscale(1) brightness(.5) contrast(.95); opacity: .6; animation: none; }
.bdg.img.locked { animation: none; }
.btile:hover .bdg.img.locked img { filter: grayscale(1) brightness(.62) contrast(.95); }
.bdg.img.hidden img { filter: brightness(0) saturate(0); opacity: .38; }
.bdg.img.hidden::after { content: "?"; position: absolute; z-index: 2; font-family: var(--f-display); font-size: calc(var(--bs) * .42); color: rgba(200,210,235,.55); }
@media (prefers-reduced-motion: reduce) { .bdg.img, .bdg.img * { animation: none !important; } }
@media (max-width: 600px) { .bgrid .bdg { --bs: 70px !important; width: 70px; height: 70px; } .bgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }

/* ikona kategórie (grafika 1.3) */
.bcat-h h3 { display: flex; align-items: center; gap: 8px; }
.bcat-ic { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }

/* legenda vzácností (rámy) */
.tleg { container-type: inline-size; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tleg-i { display: grid; justify-items: center; align-content: start; gap: 7px; padding: 10px 10px 12px; border-radius: 10px; background: rgb(var(--glass-rgb) / .55); border: 1px solid var(--line); min-width: 0; }
.tleg-i.t2 { border-color: rgba(190,205,225,.35); } .tleg-i.t3 { border-color: rgb(var(--gold-rgb) / .4); } .tleg-i.t4 { border-color: rgba(125,243,255,.45); box-shadow: 0 0 18px rgba(125,243,255,.12) inset; }
.tleg-h { font-size: 15px; white-space: nowrap; text-align: center; }
.tleg-i.t1 .tleg-h { color: #e0a46b; } .tleg-i.t2 .tleg-h { color: #dfe6f1; } .tleg-i.t3 .tleg-h { color: #ffc83d; } .tleg-i.t4 .tleg-h { color: #7df3ff; }
.tleg-row { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; width: 100%; }
.tleg-i .bdg { flex: none; --bs: 64px; }
.tleg-t { display: grid; gap: 2px; justify-items: center; text-align: center; min-width: 0; flex: 0 1 auto; line-height: 1.25; overflow-wrap: anywhere; } .tleg-t .k { font-size: 12px; }
.tleg-n { font-weight: 700; font-size: 12px; color: var(--gold, #ffd54f); }
/* užšia legenda (menší monitor, mobil) → rám nad textom, nech sa nič nevylieva z bubliny */
@container (max-width: 820px) { .tleg-i .bdg { --bs: 56px; } }
@container (max-width: 700px) { .tleg-row { flex-direction: column; gap: 6px; } }
@media (max-width: 640px) { .tleg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }