/* =====================================================================
   Norynex v1.75
   – Video-Wasserzeichen: klein & clean (wie YouTube-Branding)
   – Creator-Code-Zeile in Kauf-Fenstern
   – Cast-Button-Zustände
   ===================================================================== */

/* ---------- Video-Wasserzeichen ---------- */
.nx-wm {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  height: clamp(18px, 6.5%, 42px);
  width: auto;
  max-width: 16%;
  object-fit: contain;
  opacity: .42;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .25s ease, transform .25s ease;
}
/* Steuerleiste sichtbar → Wasserzeichen rutscht darüber, statt die Knöpfe zu verdecken */
.nxp.nxp-show .nx-wm,
.nxp.is-paused .nx-wm { transform: translateY(-46px); opacity: .7; }
.nxp.is-fs .nx-wm { height: clamp(24px, 5%, 56px); right: 24px; bottom: 22px; }
.nx-wm--short { bottom: 86px; height: clamp(16px, 5%, 32px); }
@media (max-width: 640px) {
  .nx-wm { right: 8px; bottom: 8px; height: clamp(14px, 7%, 26px); opacity: .38; }
  .nxp.nxp-show .nx-wm, .nxp.is-paused .nx-wm { transform: translateY(-40px); }
}

/* ---------- Creator-Code in Kauf-Fenstern ---------- */
.co-cc-on--sm { padding: 8px 10px; gap: 8px; text-align: left; }
.co-cc-on--sm b { font-size: 13px; }
.co-cc-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px; font-size: 12.5px; color: #ec4899; }
.co-cc-add i { color: #ec4899; }

/* ---------- Cast ---------- */
.nxp-cast.is-casting, #nxd-cast-btn.is-casting { color: #60a5fa; }
.nxp-cast.is-busy { opacity: .6; pointer-events: none; }
.nx-cast-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9998; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px; border-radius: 14px; background: var(--bg-card, #16161d); border: 1px solid var(--border, rgba(255,255,255,.1));
  box-shadow: 0 12px 40px rgba(0,0,0,.45); font-size: 13px; color: var(--text-primary, #fff); max-width: calc(100vw - 32px); }
.nx-cast-bar i.fa-tv { color: #60a5fa; }
.nx-cast-bar b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.nx-cast-bar button { border: 0; border-radius: 9px; padding: 7px 10px; cursor: pointer; background: rgba(255,255,255,.08); color: inherit; font: inherit; font-weight: 600; }
.nx-cast-bar button:hover { background: rgba(255,255,255,.14); }

/* ---------- Fix: Sticker im Shop passen immer komplett in ihre Kachel ---------- */
/* Grid-Zellen dürfen schrumpfen, sonst drückt ein breiter Sticker (CLUTCH, LEGEND, TO THE MOON)
   die Spalte auf und wird vom Kartenrand abgeschnitten. */
.si-prev, .sb-art-cell { min-width: 0; }
.si-prev--sticker, .sb-art-cell, .sb-art-cell .si-prev { grid-template-columns: minmax(0, 1fr); justify-items: center; overflow: visible; }
.si-prev--sticker .nx-sticker, .sb-art-cell .nx-sticker, .stp-art .nx-sticker {
  white-space: nowrap; flex-shrink: 0; max-width: none;
  scale: var(--nx-fit, 1); /* wird von nxFitStickers() gesetzt; unabhängig von transform/Animationen */
}
.si-prev--sticker .nx-sticker-img, .sb-art-cell .nx-sticker-img { max-width: 100%; max-height: 100%; }

/* ---------- Fix: Livestream-Tabs – alle Tabs sichtbar ---------- */
/* Vorher: eine Zeile mit versteckter Scrollleiste → „Aufzeichnungen“ halb, „Statistik“ gar nicht sichtbar. */
@media (min-width: 701px) {
  .lt-tabs { flex-wrap: wrap; overflow: visible; row-gap: 0; }
}
@media (max-width: 700px) {
  /* Am Handy weiter wischbar, aber mit Verlauf am Rand als Hinweis, dass es weitergeht */
  .lt-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); scroll-padding-inline: 24px; }
  .lt-tabs.is-end { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- OBS-Plugin-Karte (Livestream → OBS & Apps) ---------- */
.lt-plugin { border-color: color-mix(in srgb, var(--lv-purple, #9147ff) 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--lv-purple, #9147ff) 12%, transparent), transparent 60%), var(--bg-card, transparent); }
.lt-plugin-head { display: flex; gap: 14px; align-items: flex-start; }
.lt-plugin-head h4 { margin: 0 0 4px; }
.lt-plugin-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; color: #fff; background: linear-gradient(135deg, #a855f7, #6d28d9); box-shadow: 0 6px 18px rgba(109, 40, 217, .35); }
.lt-plugin-feat { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; font-size: 13px; font-weight: 600; }
.lt-plugin-feat li { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.lt-plugin-feat i { width: 16px; text-align: center; color: var(--lv-purple, #a855f7); }
.lt-plugin .lt-btnrow { margin: 4px 0 10px; }