/* Guardia Civiil — Malta flag inspired (red & white) */
:root {
  /* Primary: Malta red family */
  --malta-red: #ff3fa4;
  --malta-red-soft: #ff7ec0;
  --malta-red-deep: #b3126e;
  --malta-white: #ffffff;
  --malta-white-soft: #ffe8ec;
  /* Secondary (soft rose / white) */
  --malta-rose: #ff8a9a;
  --malta-navy: #10080a;
  --malta-sidebar: #1a0c0e;
  --accent: #ff3fa4;
  --accent-light: #ffb3dc;
  --accent-deep: #b3126e;
  --accent-2: #ff8a9a;
  --background: #10080a;
  --foreground: #fff5f6;
  color-scheme: dark;
}

html, body, main {
  --accent: #ff3fa4 !important;
  --accent-light: #ffb3dc !important;
  --accent-deep: #b3126e !important;
  --accent-2: #ff8a9a !important;
}

main[style*="--accent"],
main {
  --accent: #ff3fa4 !important;
  --accent-light: color-mix(in oklab, #ff7ec0, white 22%) !important;
  --accent-deep: color-mix(in oklab, #b3126e, black 12%) !important;
  background-color: color-mix(in oklab, #b3126e 16%, #0a0506) !important;
}

body {
  background-color: #10080a !important;
  color: #fff5f6;
}

body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 42% at 12% 18%, rgba(200, 16, 46, 0.16), transparent 62%),
    radial-gradient(ellipse 48% 40% at 88% 72%, rgba(142, 10, 28, 0.28), transparent 58%),
    radial-gradient(ellipse 36% 28% at 70% 12%, rgba(255, 255, 255, 0.04), transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(255, 90, 114, 0.08), transparent 55%);
}

/* Keep vignette behind content, but do NOT trap fixed nav/chat in one low layer */
body > *:not(#mb-chat-mobile):not(#mb-chat-desk):not(#mb-nav-overlay) {
  position: relative;
  z-index: 1;
}
/* When mobile menu open: main (sidebar) above chat */
body.mb-nav-lock > main {
  z-index: 220 !important;
  position: relative;
}
body.mb-nav-lock #mb-chat-mobile,
body.mb-nav-lock #mb-chat-desk {
  z-index: 30 !important;
  pointer-events: none !important;
}
body.mb-nav-lock #mb-nav-overlay {
  z-index: 180 !important;
}
/* open drawer above overlay + chat */
body.mb-nav-lock aside.mb-nav-open,
body.mb-nav-lock aside.glass-dark.fixed.left-0.mb-nav-open,
body.mb-nav-lock aside.fixed.inset-y-0.left-0.mb-nav-open {
  z-index: 240 !important;
}
body.mb-nav-lock button[aria-label="Menü öffnen"],
body.mb-nav-lock button[aria-label="Menü schließen"] {
  z-index: 250 !important;
  position: relative;
}

.text-accent,
.text-accent-light { color: #ffb3dc !important; }

/* secondary rose accents (points etc.) */
.mb-auth-slot .pts,
#mb-live-lb .pts,
#bos-auth-bar .pts {
  color: #ffb3dc !important;
}

/* ========== SIDEBAR ========== */
aside.glass-dark.fixed.left-0,
aside.fixed.inset-y-0.left-0,
aside.mb-sidebar {
  flex-direction: column !important;
  background:
    radial-gradient(ellipse 90% 50% at 20% -10%, rgba(200, 16, 46,.16), transparent 55%),
    radial-gradient(ellipse 80% 40% at 100% 100%, rgba(142, 10, 28,.2), transparent 50%),
    linear-gradient(180deg, #1c0c10 0%, #14080a 55%, #0e0608 100%) !important;
  background-color: #1a0c0e !important;
  border-right: 1px solid rgba(255, 90, 114, 0.14) !important;
  box-shadow: 4px 0 28px rgba(0, 0, 0, 0.32);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 1.1rem 0.85rem 1rem !important;
  width: 15.5rem !important;
  max-width: 86vw;
}

@media (min-width: 1024px) {
  aside.glass-dark.fixed.left-0,
  aside.fixed.inset-y-0.left-0,
  aside.mb-sidebar {
    display: flex !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 1023px) {
  aside.glass-dark.fixed.left-0,
  aside.fixed.inset-y-0.left-0,
  aside.mb-sidebar {
    display: flex !important;
    transform: translateX(-105%) !important;
    transition: transform .28s ease;
    pointer-events: none !important;
    z-index: 200 !important;
    touch-action: none;
  }
  aside.glass-dark.fixed.left-0.mb-nav-open,
  aside.fixed.inset-y-0.left-0.mb-nav-open,
  aside.mb-sidebar.mb-nav-open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}

aside.glass-dark.fixed.left-0 > a:first-child,
aside.fixed.inset-y-0.left-0 > a:first-child,
aside.mb-sidebar > a:first-child {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0.65rem 0.5rem 0.85rem !important;
  margin: 0 0.15rem 0.35rem !important;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255, 90, 114, 0.1);
}
aside.glass-dark.fixed.left-0 > a:first-child img,
aside.fixed.inset-y-0.left-0 > a:first-child img,
aside.mb-sidebar > a:first-child img {
  height: 4.5rem !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 16px rgba(200, 16, 46,.22));
}

aside nav {
  margin-top: 0.35rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.15rem 0.1rem 0.5rem !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 90, 114,.3) transparent;
}
aside nav a {
  display: flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  border-radius: 14px !important;
  padding: 0.62rem 0.85rem !important;
  font-size: 0.92rem !important;
  font-weight: 650 !important;
  color: rgba(243, 238, 252, 0.62) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
  text-decoration: none !important;
}
aside nav a svg {
  width: 1rem !important;
  height: 1rem !important;
  color: rgba(255, 179, 190, 0.55) !important;
  flex-shrink: 0;
}
aside nav a:hover {
  color: #fff !important;
  background: rgba(200, 16, 46, 0.1) !important;
  border-color: rgba(255, 90, 114, 0.14) !important;
}
aside nav a:hover svg { color: #ffb3dc !important; }
aside nav a.mb-nav-active,
aside nav a[aria-current="page"] {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(200, 16, 46,.22), rgba(142, 10, 28,.18)) !important;
  border-color: rgba(255, 90, 114, 0.24) !important;
  box-shadow: inset 3px 0 0 0 #ff7ec0, 0 6px 18px rgba(0,0,0,.14) !important;
}
aside nav a.mb-nav-active svg,
aside nav a[aria-current="page"] svg { color: #ffb3dc !important; }

aside > .mt-auto,
aside .mt-auto.flex,
aside > div.mt-auto {
  margin-top: 0.75rem !important;
  padding: 0.85rem 0.35rem 0.35rem !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.4rem !important;
}
aside > .mt-auto a,
aside .mt-auto.flex a,
aside > div.mt-auto a {
  width: 2.15rem !important;
  height: 2.15rem !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.55) !important;
}
aside > .mt-auto a:hover,
aside .mt-auto.flex a:hover {
  color: #fff !important;
  background: rgba(200, 16, 46,0.14) !important;
  border-color: rgba(255, 90, 114,0.28) !important;
}

#mb-sidebar-auth {
  margin-top: 0.65rem !important;
  padding: 0.85rem 0.15rem 0.15rem !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  width: 100% !important;
}
#mb-sidebar-auth .mb-auth-slot {
  background: rgba(200, 16, 46,0.08) !important;
  border: 1px solid rgba(255, 90, 114,0.16) !important;
  border-radius: 16px !important;
  padding: 0.75rem !important;
}

@media (max-width: 1023px) {
  aside.glass-dark.fixed.left-0,
  aside.fixed.inset-y-0.left-0,
  aside.mb-sidebar {
    width: min(17.5rem, 86vw) !important;
    box-shadow: 12px 0 40px rgba(0,0,0,.45) !important;
  }
  aside.glass-dark.fixed.left-0.mb-nav-open,
  aside.fixed.inset-y-0.left-0.mb-nav-open,
  aside.mb-sidebar.mb-nav-open {
    background:
      radial-gradient(ellipse 90% 50% at 20% -10%, rgba(200, 16, 46,.18), transparent 55%),
      radial-gradient(ellipse 80% 40% at 100% 100%, rgba(142, 10, 28,.22), transparent 50%),
      linear-gradient(180deg, #220f12 0%, #1a0c0e 55%, #10080a 100%) !important;
  }
}

@media (min-width: 1024px) {
  #mb-sidebar-auth { display: none !important; }
}

/* Follow / daily */
.mb-follow-btn:not(.mb-following),
a.mb-follow-btn:not(.mb-following) {
  background: linear-gradient(135deg, #ff7ec0, #a31228) !important;
  color: #fff !important;
}
.mb-follow-btn.mb-following {
  background: rgba(200, 16, 46, 0.16) !important;
  color: #ffb3dc !important;
  border: 1px solid rgba(255, 90, 114, 0.28);
}
.mb-auth-slot .daily,
.mb-daily-gift {
  background: linear-gradient(135deg, #ff7ec0, #b3126e) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(200, 16, 46, 0.35) !important;
}

a { --tw-ring-color: #ff3fa4; }
:focus-visible { outline-color: rgba(255, 90, 114, 0.55); }
.glass-dark { border-color: rgba(200, 16, 46, 0.12); }
::selection {
  background: rgba(200, 16, 46, 0.4);
  color: #fff;
}


/* ========== HERO: text left + Hot Pick right (desktop) ========== */
.mb-hero-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  width: 100%;
}
.mb-hero-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.mb-hero-copy > .max-w-\[680px\],
.mb-hero-copy > div.w-full {
  max-width: 680px;
}
#mb-hotpick.mb-hotpick,
#mb-hotpick {
  position: relative;
  margin-top: 0.25rem;
  max-width: 36rem;
  width: 100%;
}
@media (min-width: 1024px) {
  .mb-hero-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 2.5rem;
  }
  .mb-hero-copy {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  .mb-hero-copy > div.w-full.max-w-\[680px\],
  .mb-hero-copy > div[class*="max-w"] {
    max-width: min(680px, 100%);
  }
  #mb-hotpick.mb-hotpick,
  #mb-hotpick {
    flex: 0 0 auto;
    width: min(22.5rem, 38%);
    max-width: 24rem;
    margin-top: 0;
    align-self: center;
  }
  /* stack hotpick content vertically on narrow right column for clean card */
  #mb-hotpick > a > .relative {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #mb-hotpick .mb-hot-cta {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .mb-hero-copy .font-display {
    text-align: left !important;
    width: 100% !important;
  }
  .mb-hero-copy p.max-w-xl,
  .mb-hero-copy > p {
    max-width: 34rem;
  }
  /* Hot Pick card sits at middle of hero text block */
  #mb-hotpick {
    margin-top: 0.5rem;
  }
}

@media (min-width: 1280px) {
  #mb-hotpick.mb-hotpick,
  #mb-hotpick {
    width: min(24rem, 36%);
    max-width: 26rem;
  }
}

/* ========== HOT PICK — red pulse ========== */
#mb-hotpick { position: relative; } /* layout rules in .mb-hero-row */
#mb-hotpick > a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 90, 114, 0.35) !important;
  background:
    linear-gradient(145deg, rgba(40, 24, 72, 0.92), rgba(16, 10, 28, 0.96)) !important;
  box-shadow:
    0 0 0 1px rgba(200, 16, 46, 0.2),
    0 18px 50px rgba(0, 0, 0, 0.4),
    0 0 36px rgba(200, 16, 46, 0.22) !important;
  animation: mbHotPulse 2.4s ease-in-out infinite;
  transition: transform .15s ease, border-color .15s ease;
}
#mb-hotpick > a:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(255, 179, 190, 0.55) !important;
}
#mb-hotpick > a::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 90, 114,.35), transparent 40%);
  animation: mbHotSpin 4.5s linear infinite;
  opacity: .55;
  pointer-events: none;
}
#mb-hotpick > a::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(1.15rem - 1px);
  background: linear-gradient(145deg, rgba(36, 22, 64, 0.96), rgba(14, 10, 24, 0.98));
  pointer-events: none;
  z-index: 0;
}
#mb-hotpick > a > * { position: relative; z-index: 1; }
#mb-hotpick .mb-hot-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #ffb3dc, #ff3fa4 45%, #b3126e);
  box-shadow: 0 0 18px rgba(200, 16, 46, 0.55);
  animation: mbHotBadge 1.6s ease-in-out infinite;
}
#mb-hotpick .mb-hot-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff;
  animation: mbHotBlink 1s ease-in-out infinite;
}
#mb-hotpick .mb-hot-cta {
  background: linear-gradient(135deg, #ffb3dc, #ff3fa4 40%, #b3126e) !important;
  color: #fff !important;
  box-shadow: 0 0 28px rgba(200, 16, 46, 0.45) !important;
}
#mb-hotpick .text-accent-light,
#mb-hotpick .mb-hot-bonus {
  color: #ffb3dc !important;
}

@keyframes mbHotPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(200, 16, 46, 0.25),
      0 18px 50px rgba(0, 0, 0, 0.4),
      0 0 28px rgba(200, 16, 46, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 179, 190, 0.45),
      0 20px 56px rgba(0, 0, 0, 0.45),
      0 0 48px rgba(200, 16, 46, 0.42);
  }
}
@keyframes mbHotSpin {
  to { transform: rotate(360deg); }
}
@keyframes mbHotBadge {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.05); filter: brightness(1.12); }
}
@keyframes mbHotBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  #mb-hotpick > a,
  #mb-hotpick > a::before,
  #mb-hotpick .mb-hot-badge,
  #mb-hotpick .mb-hot-badge .dot {
    animation: none !important;
  }
}


/* CHAT_NAV_SMOOTH_V1 */
body.mb-nav-lock > main {
  z-index: auto !important;
  position: relative;
}
body.mb-nav-lock #mb-nav-overlay {
  z-index: 240 !important;
  pointer-events: auto !important;
}
body.mb-nav-lock aside.mb-nav-open,
body.mb-nav-lock aside.glass-dark.fixed.left-0.mb-nav-open,
body.mb-nav-lock aside.fixed.inset-y-0.left-0.mb-nav-open,
body.mb-nav-lock aside.mb-sidebar.mb-nav-open {
  z-index: 250 !important;
}
body.mb-nav-lock #mb-chat-mobile,
body.mb-nav-lock #mb-chat-desk {
  z-index: 30 !important;
  pointer-events: none !important;
}
body.mb-nav-lock button[aria-label="Menü öffnen"],
body.mb-nav-lock button[aria-label="Menü schließen"] {
  z-index: 260 !important;
  position: relative;
}


/* Desktop chat: reserve width ONCE on main (#top is nested — never double-pad) */
@media (min-width: 1024px) {
  #mb-chat-desk {
    z-index: 120 !important;
    pointer-events: auto !important;
  }
  body.mb-has-chat:not(.mb-chat-desk-collapsed) main {
    padding-right: 20rem !important; /* = --mb-chat-w */
    box-sizing: border-box !important;
  }
  body.mb-has-chat.mb-chat-desk-collapsed main {
    padding-right: 3.2rem !important; /* = --mb-chat-tab */
    box-sizing: border-box !important;
  }
  /* Use full strip between left nav and right chat */
  body.mb-has-chat:not(.mb-chat-desk-collapsed) main .max-w-6xl {
    max-width: 100% !important;
  }
}

/* Kick removed — only Twitch + Instagram */
a[href*="kick.com"] { display: none !important; }