/* bottom nav removed site-wide */
.rsfw-bottom-nav,
#rsfwBottomNav { display: none !important; }

/* RsFw layout — last in cascade.
   Flex = header / actions / bottom tabs (1-D alignment).
   Grid = cards / stats / staff / clan menu (2-D tracks).

   Breakpoints
     375   small phone
     480   phone
     640   large phone
     768   tablet (still hamburger)
     991   last mobile / nav switch
     992   desktop nav
    1200   wide cards
    1400   max content
*/

/* overflow-x:hidden on body kills position:sticky for #siteHeader */
html {
  max-width: 100%;
  overflow-x: clip;
}
body {
  max-width: 100%;
  overflow-x: visible;
}
#siteHeader,
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  padding-top: env(safe-area-inset-top, 0px);
  background: #0d0d1a;
}

#siteHeader img,
.site-header img,
.header-logo img,
.site-logo-img,
.header-avatar,
.rsfw-avatar-img {
  max-width: none;
  height: auto;
}

.header-content {
  display: flex !important;
  align-items: center;
  gap: 12px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  height: 64px;
  padding: 0 24px;
  box-sizing: border-box;
}

.hamburger { flex: 0 0 auto; order: 0; }
.header-logo { flex: 0 0 auto; order: 1; min-width: 0; }
.desktop-nav { flex: 1 1 auto; order: 2; min-width: 0; }
.header-right {
  flex: 0 0 auto;
  order: 3;
  margin-left: auto;
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.cards-grid,
.stats-grid,
.staff-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.cards-grid > .card,
.staff-grid > .staff-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Phone ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .header-content {
    height: 56px;
    padding: 0 12px;
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
    gap: 8px;
  }

  .desktop-nav,
  .desktop-only,
  .header-search { display: none !important; }

  .hamburger,
  .mobile-only { display: flex !important; }

  #siteHeader,
  .site-header {
    position: sticky;
    top: 0;
    z-index: 500;
  }

  .container,
  .main-container,
  .page-wrap,
  #mainContent {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  .page-hero {
    padding: 20px 12px !important;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }


  .btn, a.btn, button.btn {
    width: auto;
    max-width: 100%;
  }
  .btn-block,
  .btn.w-100,
  form .btn[type="submit"] { width: 100%; }

  .notification-dropdown {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px));
    left: 8px;
    right: 8px;
    width: auto !important;
  }

  img, video, iframe {
    max-width: 100%;
    height: auto;
  }

  table { display: block; width: 100%; overflow-x: auto; }

  .live-stream-card,
  .card { max-width: 100%; }
}

@media (max-width: 639px) {
  .cards-grid,
  .stats-grid,
  .staff-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 640px) and (max-width: 991px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .cards-grid,
  .staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .logo-text { font-size: 0.95rem; }
  .site-logo-img { max-height: 28px; }
  .header-avatar { width: 32px; height: 32px; }
}

@media (max-width: 374px) {
  .logo-text { font-size: 0.85rem; }
  .rsfw-bottom-nav a { font-size: 0.58rem; }
}

@media (max-width: 991px) and (orientation: landscape) {
  .header-content { height: 48px; }
  .page-hero { padding: 12px !important; }
}

@media (hover: none) and (pointer: coarse) {
  .nav-link,
  .hamburger,
  .notif-btn,
  .rsfw-bottom-nav a {
    min-height: 44px;
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-content,
  .nav-link,
  .card,
  .btn {
    transition: none !important;
  }
}

/* ── Desktop ───────────────────────────────────────── */
@media (min-width: 992px) {
  .hamburger,
  .mobile-only,
  .rsfw-bottom-nav { display: none !important; }

  .desktop-nav {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    overflow-x: auto;
    overflow-y: visible;
  }

  .desktop-only { display: flex !important; }

  .header-search { display: flex; }
  .header-search input { width: 140px; }

  .container,
  .main-container {
    display: block;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  .cards-grid,
  .stats-grid,
  .staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .nav-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .btn, a.btn, button.btn { width: auto; }
}

@media (min-width: 1200px) {
  .cards-grid,
  .stats-grid,
  .staff-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .nav-dropdown-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .header-search input { width: 180px; }
}

@media (min-width: 1400px) {
  .cards-grid,
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ── Container queries ────────────────────────────────
   A @container rule styles DESCENDANTS, not the container.
   So the page shell is the container; grids/cards react to its width
   (sidebar, padding, and max-width 1400 all count — unlike 100vw).
*/
.container,
.main-container,
.page-wrap,
#mainContent {
  container-type: inline-size;
  container-name: rsfw-page;
}

.card,
.staff-card,
.live-stream-card {
  container-type: inline-size;
  container-name: rsfw-card;
}

/* Page-width examples */
@container rsfw-page (min-width: 520px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container rsfw-page (min-width: 720px) {
  .cards-grid,
  .staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container rsfw-page (min-width: 1080px) {
  .cards-grid,
  .stats-grid,
  .staff-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container rsfw-page (min-width: 1320px) {
  .cards-grid,
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Card-width examples — layout inside a single card */
@container rsfw-card (max-width: 260px) {
  .card-body,
  .staff-card {
    text-align: center;
  }
  .card-title { font-size: 0.95rem; }
}

@container rsfw-card (min-width: 320px) {
  .card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

/* ── Subgrid (optional) ────────────────────────────────
   Card/staff items share the parent row tracks so titles/footers
   line up across a row. Only 2 tracks (body + footer). Ignored
   where subgrid is missing or the card has a different child count.
*/
@supports (grid-template-rows: subgrid) {
  @container rsfw-page (min-width: 720px) {
    .cards-grid > .card,
    .staff-grid > .staff-card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
    }
    .nav-dropdown-grid > .nav-dd-item {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
    }
  }
}

.hero-clan-song{margin:16px auto 10px;max-width:min(420px,92vw);padding:10px 12px;border-radius:14px;background:rgba(18,18,30,.72);border:1px solid rgba(139,92,246,.35);backdrop-filter:blur(8px)}
.hero-clan-song-label{color:#c4b5fd;font-size:12px;font-weight:700;margin-bottom:8px;letter-spacing:.04em}
.hero-clan-song iframe,.hero-clan-song audio{width:100%;border:0;border-radius:10px;display:block}
.hero-clan-song iframe{height:80px}


/* Clan dropdown: fixed panel, internal scroll — does not scroll the whole page */
.nav-dropdown-wrap { position: relative; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1200;
  min-width: 280px;
  max-width: min(420px, 92vw);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #12121a;
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  padding: 8px;
}
.nav-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.nav-dd-item {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 8px;
  color: #e5e7eb;
  text-decoration: none;
}
.nav-dd-item:hover, .nav-dd-item.active { background: rgba(139,92,246,.15); color: #fff; }
.nav-dd-desc { font-size: 11px; opacity: .65; margin-top: 2px; }


/* RSFW clan dropdown visibility fix — do not clip under nav/header */
.site-header, .main-nav, .nav-bar, .navbar, header.site-header {
  overflow: visible !important;
}
.nav-dropdown-wrap {
  position: relative !important;
  z-index: 1300 !important;
}
.nav-dropdown-wrap.open .nav-dropdown-menu,
.nav-dropdown-wrap.active .nav-dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1400 !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  min-width: min(420px, 92vw) !important;
  max-width: min(520px, 96vw) !important;
  max-height: min(70vh, 560px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
@media (max-width: 991px) {
  .nav-dropdown-wrap.open .nav-dropdown-menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    max-width: none !important;
    width: auto !important;
  }
}