/* =====================================================================
   HvaSkjer – merkelappen på kortene (genre.js): «Metal», «Jazz», «Quiz» …
   Erstatter det runde kategori-ikonet (samme plass, samme kategorifarge) – ingen ekstra merker.
   ===================================================================== */
.bubble.genre-tag{display:inline-flex;align-items:center;gap:6px;width:auto!important;height:28px!important;padding:0 11px 0 6px;border-radius:999px;
  font:700 12px/1 var(--body,system-ui);letter-spacing:.01em;color:#fff;white-space:nowrap;max-width:calc(100% - 20px)}
.bubble.genre-tag .ico,.bubble.genre-tag svg{width:15px!important;height:15px!important;flex:0 0 15px}
.bubble.genre-tag b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.card-media .bubble.genre-tag,.row-media .bubble.genre-tag{box-shadow:0 0 0 2px rgba(255,255,255,.75),0 4px 12px -4px rgba(0,0,0,.45)}
/* en tydelig, fylt pille i kategorifargen (litt mørkere for lesbar hvit tekst) – overstyrer den bleke glass-stilen til ikonet */
html:root body .bubble.genre-tag,html:root body .card-media .bubble.genre-tag,html:root body .row-media > .bubble.genre-tag,html:root body .slide-cat .bubble.genre-tag{
  background:color-mix(in srgb,var(--c) 80%,#000)!important;color:#fff!important;border:0!important}
html:root body .bubble.genre-tag .ico{opacity:1;color:#fff}
html:root body .row-media > .bubble.genre-tag{width:auto!important;height:28px!important}
/* karusellen: merkelappen står alene, uten den ekstra glass-ringen rundt */
.slide-cat:has(.genre-tag){padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;max-width:62%}
.slide-cat .bubble.genre-tag{height:30px!important;max-width:100%;box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}
/* lister (søk, i nærheten, Min side): først i infolinja */
.ev-genre,.ms-genre{font-weight:800;color:var(--accent-ink);font-style:normal}
/* Matrix */
html[data-skin=matrix]:root body .bubble.genre-tag{background:#000!important;color:var(--mx-green)!important;border:1px solid var(--mx-line-2)!important;border-radius:0!important;
  box-shadow:0 0 12px -4px rgba(var(--mx-rgb),.6)!important;font-family:var(--mx-mono)!important;text-transform:uppercase;letter-spacing:.05em}
html[data-skin=matrix]:root body .bubble.genre-tag .ico{color:var(--mx-green)}
html[data-skin=matrix] .ev-genre,html[data-skin=matrix] .ms-genre{color:var(--mx-green);text-transform:uppercase;letter-spacing:.04em}