/* ════════════════════════════════════════════════════
   DESKTOP LAYOUT
   Mobile (< 768px): native app look — unchanged.
   Tablet (768-1023px): full-screen background, app centered.
   Desktop (≥ 1024px): left sidebar + full-width content area.
   ════════════════════════════════════════════════════ */

/* ── iOS Safari momentum-scroll fix: keeps position:fixed elements
   (logo bar, account button, language flag) pinned during fling scroll
   when the inner .app container is the scroll context. Applies site-wide. ── */
.app { -webkit-overflow-scrolling: touch !important; }

/* ── Mobile header: shrink the ONLY ▶ CLIPS text + language flag +
   account-initial circle so they stop overlapping each other on phones
   narrower than the 430px logo-bar max-width. ── */
@media (max-width: 430px) {
  #oc-logo-bar span {
    font-size: 46px !important;
    letter-spacing: 4px !important;
  }
  #oc-lang-flag-btn {
    width: 28px !important;
    height: 21px !important;
    left: 10px !important;
  }
  /* Account button now uses top:50% + translateY(-50%) inside the
     logo bar (same centring as the language flag), so size is all we
     need to override on mobile. */
  #oc-account-btn {
    width: 34px !important;
    height: 34px !important;
    right: 10px !important;
  }
}
@media (max-width: 380px) {
  #oc-logo-bar span {
    font-size: 40px !important;
    letter-spacing: 3px !important;
  }
  #oc-lang-flag-btn { width: 26px !important; height: 19px !important; }
  #oc-account-btn  { width: 32px !important; height: 32px !important; }
}

/* ── Top backdrop — frosted-glass strip that masks page content
   scrolling behind the (transparent) logo bar, language flag, and
   account button. Sits at z=9000: below logo bar (9999) and account
   button (10000), above page content. Only on pages that include
   the logo bar. ── */
body:has(#oc-logo-bar)::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  z-index: 9000;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,13,26,0.92) 0%, rgba(6,13,26,0.78) 65%, rgba(6,13,26,0) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
/* Desktop with sidebar: backdrop only covers the content area to the
   right of the 220px sidebar (sidebar has its own glass blur). */
@media (min-width: 1024px) {
  body:has(#oc-desktop-sidebar)::before {
    left: 220px !important;
  }
}

/* ── Base background — all breakpoints, all pages ── */
html, body {
  background-color: #060d1a !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='60' height='60' fill='%23060d1a'/%3E%3Crect x='60' width='60' height='60' fill='%230b1930'/%3E%3Crect y='60' width='60' height='60' fill='%230b1930'/%3E%3Crect x='60' y='60' width='60' height='60' fill='%23060d1a'/%3E%3Cg opacity='0.22'%3E%3Cpath d='M20 24 L20 18 Q20 10 30 10 Q40 10 40 18 L40 24' fill='none' stroke='%2300AAFF' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='34' r='10' fill='none' stroke='%2300AAFF' stroke-width='1.5'/%3E%3Cpolygon points='26.5,30 26.5,38 34.5,34' fill='%2300AAFF'/%3E%3C/g%3E%3Cg opacity='0.22'%3E%3Cpath d='M80 24 L80 18 Q80 10 90 10 Q100 10 100 18 L100 24' fill='none' stroke='%2300AAFF' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='90' cy='34' r='10' fill='none' stroke='%2300AAFF' stroke-width='1.5'/%3E%3Cpolygon points='86.5,30 86.5,38 94.5,34' fill='%2300AAFF'/%3E%3C/g%3E%3Cg opacity='0.22'%3E%3Cpath d='M20 84 L20 78 Q20 70 30 70 Q40 70 40 78 L40 84' fill='none' stroke='%2300AAFF' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='94' r='10' fill='none' stroke='%2300AAFF' stroke-width='1.5'/%3E%3Cpolygon points='26.5,90 26.5,98 34.5,94' fill='%2300AAFF'/%3E%3C/g%3E%3Cg opacity='0.22'%3E%3Cpath d='M80 84 L80 78 Q80 70 90 70 Q100 70 90 78 L100 84' fill='none' stroke='%2300AAFF' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='90' cy='94' r='10' fill='none' stroke='%2300AAFF' stroke-width='1.5'/%3E%3Cpolygon points='86.5,90 86.5,98 94.5,94' fill='%2300AAFF'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 120px 120px !important;
}

/* ── Tablet ── */
@media (min-width: 768px) {
  body { background-color: #060d1a !important; }
  .app { max-width: 480px !important; margin: 0 auto !important; }
  #oc-logo-bar, #oc-main-nav {
    max-width: 100% !important; left: 0 !important; right: 0 !important;
    transform: none !important; width: 100% !important;
  }
  .category-bar, .earnings-strip {
    max-width: 100% !important; left: 0 !important; right: 0 !important;
    transform: none !important; width: 100% !important;
  }
  .sheet {
    max-width: 480px !important; left: 50% !important; right: auto !important;
    transform: translateX(-50%) translateY(110%) !important;
  }
  .sheet.show { transform: translateX(-50%) translateY(0) !important; }
}

/* ── Desktop (≥ 1024px) ── */
@media (min-width: 1024px) {
  body {
    background-color: #060d1a !important;
  }

  #oc-desktop-sidebar { display: flex !important; }

  /* Logo bar + app offset — only on pages that have a sidebar */
  body:has(#oc-desktop-sidebar) #oc-logo-bar {
    left: 220px !important; right: 0 !important;
    width: auto !important; max-width: none !important;
    transform: translateZ(0) !important; transition: none !important;
    will-change: transform;
  }

  body:has(#oc-desktop-sidebar) .app {
    max-width: none !important;
    width: calc(100vw - 220px) !important;
    margin-left: 220px !important;
    margin-right: 0 !important;
  }

  /* Friends row: cap width so 18+ avatars always overflow and scroll */
  #friends-row {
    max-width: 640px !important;
    flex: none !important;
  }

  /* Social strip */
  #social-strip-wrap {
    left: 220px !important; right: 0 !important;
    width: calc(100vw - 220px) !important;
    max-width: none !important; transform: none !important;
    top: 90px !important;
  }
  .earnings-strip {
    left: 220px !important; right: 0 !important;
    width: calc(100vw - 220px) !important;
    max-width: none !important; transform: none !important;
    top: 90px !important;
  }
  .category-bar {
    left: 220px !important; right: 0 !important;
    width: calc(100vw - 220px) !important;
    max-width: none !important; transform: none !important;
  }

  /* Bottom nav hidden */
  #oc-main-nav { display: none !important; }

  /* Desktop multi-feed grid */
  #oc-desktop-multifeed {
    display: grid !important;
    background: radial-gradient(ellipse at 50% -5%, rgba(0,120,255,0.22) 0%, rgba(0,60,180,0.08) 40%, transparent 70%) !important;
  }

  /* Single-clip feed hidden on desktop */
  .feed { display: none !important; }

  /* Platform panels — glass morphism */
  .oc-platform-panel {
    background: rgba(4,10,30,0.62) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
  }

  /* Sheets */
  .sheet {
    max-width: 600px !important; left: calc(50vw + 110px) !important;
    right: auto !important; transform: translateX(-50%) translateY(110%) !important;
  }
  .sheet.show { transform: translateX(-50%) translateY(0) !important; }

  /* FAB */
  #oc-creator-fab {
    position: fixed !important; bottom: 24px !important;
    right: 24px !important; left: auto !important; top: auto !important;
  }

  /* AI button */
  #oc-ai-btn { right: 80px !important; left: auto !important; bottom: 28px !important; }
}

/* ── Floating glass nav — mobile / tablet (all pages) ── */
@media (max-width: 1023px) {
  #oc-main-nav {
    display: flex !important;
    background: transparent !important;
    border-top: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 6px 8px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 5px !important;
  }
  .oc-nav-tab {
    background: rgba(4,8,26,0.85) !important;
    border: 1px solid rgba(0,170,255,0.28) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: 0 0 12px rgba(0,120,255,0.16), inset 0 1px 0 rgba(255,255,255,0.06), 0 3px 10px rgba(0,0,0,0.45) !important;
    padding: 8px 4px 10px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .oc-nav-tab.active {
    border-color: rgba(0,170,255,0.72) !important;
    background: rgba(0,25,72,0.88) !important;
    box-shadow: 0 0 20px rgba(0,170,255,0.52), 0 0 40px rgba(0,170,255,0.22), inset 0 1px 0 rgba(0,170,255,0.18), 0 3px 10px rgba(0,0,0,0.45) !important;
  }
}

/* ── Desktop sidebar — glass on all pages ── */
@media (min-width: 1024px) {
  #oc-desktop-sidebar {
    background: rgba(4,5,14,0.38) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
  }
}

/* Hide legacy brick-wall overlay divs (sponsor-match page) */
body > div[style*="brightness(0.55)"] {
  display: none !important;
}