/* Final responsive contract. Loaded after legacy overrides so desktop and mobile
   keep the same DOM order and content without page-wide scaling. */
html { width: 100%; max-width: 100%; overflow-x: clip; }
body { width: 100%; max-width: 100%; overflow-x: clip; }
body:not(.admin-page) { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
body:not(.admin-page) *, body.admin-page * { box-sizing: border-box; }
body:not(.admin-page) img, body:not(.admin-page) video { max-width: 100%; }

/* Keep wheel/touch scrolling but remove the page scrollbar requested for the
   public site. Browser-owned sidebars remain outside the website viewport. */
html.public-site {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html.public-site::-webkit-scrollbar,
html.public-site body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* The supplied background always covers the complete browser viewport. */
html.public-site body:not(.admin-page) .bg {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  overflow: hidden !important;
}
html.public-site body:not(.admin-page) .bg > :is(.background-video, .bg__video) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* The music player is independent viewport UI. Community positioning belongs
   exclusively to its Dynamic Island controller and must not be overridden here. */
body:not(.admin-page) #animeMusicPlayer[data-fixed-viewport-ui="bottom"],
body:not(.admin-page) #animeMusicPlayer[data-fixed-viewport-ui="bottom"]:is(:hover, :focus-within, .is-open, .is-forced-closed) {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  left: max(14px, env(safe-area-inset-left)) !important;
  margin: 0 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}
body:not(.admin-page) #animeMusicPlayer[data-fixed-viewport-ui="bottom"] .anime-music__mini {
  animation: none !important;
}

body:not(.admin-page) .shell {
  display: grid !important;
  width: min(calc(100% - 32px), 1180px) !important;
  max-width: 1180px !important;
  grid-template-columns: minmax(238px, 270px) minmax(0, 1fr) !important;
  grid-template-areas: "sidebar panel" "sidebar footer" !important;
  align-items: start !important;
  gap: clamp(18px, 2.5vw, 30px) !important;
  margin: clamp(20px, 4vw, 48px) auto calc(72px + env(safe-area-inset-bottom)) !important;
  transform: none !important;
}
body:not(.admin-page) .sidebar { grid-area: sidebar !important; min-width: 0 !important; }
body:not(.admin-page) .panel { grid-area: panel !important; min-width: 0 !important; max-width: 100% !important; }
body:not(.admin-page) .footer { grid-area: footer !important; position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; }
@media (min-width: 992px) {
  body:not(.admin-page) .library-mobile-mount { display: none !important; }
}
body:not(.admin-page) .card-grid,
body:not(.admin-page) .rank-grid { width: 100% !important; min-width: 0 !important; }
body:not(.admin-page) .item-card,
body:not(.admin-page) .rank-card { width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
body:not(.admin-page) .item-card img,
body:not(.admin-page) .rank-card img { object-fit: contain !important; }
body:not(.admin-page) .tab-content,
body:not(.admin-page) .home-sections-wrapper { max-width: 100% !important; overflow-wrap: anywhere; }

body:not(.admin-page) .shell > *,
body:not(.admin-page) .tab-content,
body:not(.admin-page) :is(
  .home-sections-wrapper, .about-layout, .settings-grid, .social-layout,
  .waifu-panels, .waifu-layout, .contact-layout, .donate-layout
) {
  min-width: 0 !important;
  min-inline-size: 0 !important;
}

/* Laptop/tablet landscape: retain the same order and reduce columns only. */
@media (min-width: 769px) and (max-width: 1200px) {
  body:not(.admin-page) .shell {
    width: min(calc(100% - 28px), 1040px) !important;
    grid-template-columns: minmax(218px, 245px) minmax(0, 1fr) !important;
  }
  body:not(.admin-page) .card-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body:not(.admin-page) .rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body:not(.admin-page) .panel { padding: clamp(16px, 2.3vw, 24px) !important; }
}

/* JS mounts the real Library node here at <=991px. Use the same breakpoint
   for the shell and child grids so no two-column surface can be clipped. */
@media (max-width: 991px) {
  body:not(.admin-page) .shell {
    width: min(calc(100% - 20px), 760px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "sidebar" "library" "panel" "footer" !important;
    gap: 16px !important;
  }
  body:not(.admin-page) .library-mobile-mount {
    display: block !important;
    grid-area: library !important;
    width: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
  }
  body:not(.admin-page) :is(
    .card-grid--three, .rank-grid, .settings-grid, .social-layout,
    .waifu-layout, .donate-layout, .about-layout, .contact-layout
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
  }
}

/* Mobile: keep the compact Library mount in the declared track. Removing the
   named area while the mount still used grid-area: library made CSS Grid add
   implicit zero-width columns, collapsing the sidebar and panel. */
@media (max-width: 768px) {
  :root { --shimeji-size: 76px; }
  body:not(.admin-page) .shell {
    width: min(calc(100% - 20px), 620px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "sidebar" "library" "panel" "footer" !important;
    gap: 16px !important;
    margin: max(10px, env(safe-area-inset-top)) auto calc(100px + env(safe-area-inset-bottom)) !important;
  }
  body:not(.admin-page) .sidebar {
    position: relative !important;
    top: auto !important;
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  body:not(.admin-page) .profile-card { order: 1; width: 100% !important; }
  body:not(.admin-page) .mini-status { order: 2; width: 100% !important; }
  body:not(.admin-page) .status-popover { max-width: calc(100vw - 28px) !important; }
  body:not(.admin-page) .profile-card__cover { height: clamp(130px, 36vw, 190px) !important; }
  body:not(.admin-page) .avatar-wrap { width: clamp(96px, 27vw, 122px) !important; height: clamp(96px, 27vw, 122px) !important; }
  body:not(.admin-page) .panel { position: relative !important; width: 100% !important; padding: 12px !important; overflow: visible !important; }
  body:not(.admin-page) .home-sections-wrapper { padding: 14px 10px !important; }
  body:not(.admin-page) .card-grid--three,
  body:not(.admin-page) .rank-grid,
  body:not(.admin-page) .settings-grid,
  body:not(.admin-page) .social-layout,
  body:not(.admin-page) .waifu-layout,
  body:not(.admin-page) .donate-layout,
  body:not(.admin-page) .about-layout,
  body:not(.admin-page) .contact-layout { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; }
  body:not(.admin-page) .panel > .tabs {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scroll-snap-type: x proximity;
  }
  body:not(.admin-page) .panel > .tabs .tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 74px !important;
    min-height: 44px !important;
    justify-content: center !important;
    padding-inline: 12px !important;
    scroll-snap-align: start;
  }
  body:not(.admin-page) .footer-top,
  body:not(.admin-page) .footer-bottom { display: flex !important; width: 100% !important; align-items: stretch !important; flex-direction: column !important; gap: 14px !important; }
  body:not(.admin-page) .footer-nav { display: flex !important; width: 100% !important; flex-wrap: wrap !important; }
  body:not(.admin-page) .footer-nav a { flex: 1 1 100px; min-height: 44px !important; }
  body:not(.admin-page) .footer-ip { align-self: stretch !important; min-height: 44px !important; }
  .library-viewport { display: none !important; }
  .anime-music {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 84px) !important;
    transform: none !important;
  }
  .anime-music__panel { width: min(360px, calc(100vw - 20px)) !important; max-height: min(68vh, 580px) !important; }
  #chibi-chat-toggle { right: max(10px, env(safe-area-inset-right)) !important; bottom: calc(58px + env(safe-area-inset-bottom)) !important; width: 44px !important; height: 44px !important; }
  .chibi-chat-panel {
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: calc(110px + env(safe-area-inset-bottom)) !important;
    width: min(390px, calc(100vw - 16px)) !important;
    max-height: min(70dvh, 620px) !important;
  }
  .shimeji-layer { z-index: 1200 !important; }
  .shimeji-controls { right: max(8px, env(safe-area-inset-right)) !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; z-index: 1300 !important; }
  .community-menu-launcher { max-width: calc(100vw - 20px) !important; }
}

@media (max-width: 480px) {
  :root { --shimeji-size: 64px; }
  body:not(.admin-page) .shell { width: calc(100% - 12px) !important; gap: 12px !important; }
  body:not(.admin-page) .panel { padding: 8px !important; border-radius: 16px !important; }
  body:not(.admin-page) .home-sections-wrapper { padding: 12px 8px !important; border-radius: 15px !important; }
  body:not(.admin-page) .profile-card__cover { height: 132px !important; }
  body:not(.admin-page) .panel > .tabs .tab { min-width: 70px !important; padding-inline: 10px !important; }
  body:not(.admin-page) .item-card,
  body:not(.admin-page) .rank-card { min-height: 0 !important; padding-inline: 10px !important; }
  body:not(.admin-page) .footer.footer-card { padding: 14px 12px !important; }
  .shimeji-chat-bubble { max-width: min(180px, calc(100vw - 24px)) !important; }
  .anime-music { max-width: calc(100vw - 74px) !important; }
}

/* Admin uses the same form and API at every width. */
@media (max-width: 768px) {
  body.admin-page { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow-x: clip; }
  body.admin-page .admin-shell { width: calc(100% - 16px) !important; max-width: 620px !important; margin-inline: auto !important; }
  body.admin-page .admin-panel, body.admin-page .admin-section { width: 100% !important; min-width: 0 !important; }
  body.admin-page input, body.admin-page select, body.admin-page textarea, body.admin-page button { max-width: 100%; min-height: 44px; }
  body.admin-page .admin-grid, body.admin-page .admin-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  body.admin-page .admin-header { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
  body.admin-page .admin-header > * { min-width: 0; }
  body.admin-page .admin-actions { display: grid !important; width: 100% !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  body.admin-page .admin-actions :is(a, button) { display: inline-flex !important; width: 100% !important; min-width: 0 !important; align-items: center; justify-content: center; text-align: center; overflow-wrap: anywhere; }
  body.admin-page .admin-section-nav { display: flex !important; width: calc(100% + 2px) !important; max-width: none !important; margin-inline: -1px !important; overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body.admin-page .admin-section-nav::-webkit-scrollbar { display: none; }
  body.admin-page .admin-section-nav button { flex: 0 0 auto !important; min-height: 44px !important; scroll-snap-align: start; }
  body.admin-page :is(.admin-table-wrap, .community-storage-files, .community-access-log-list) { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  body.admin-page :is(.community-private-contact, .community-access-log-row) { grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 6px !important; }
}

@media (max-width: 479px) {
  body.admin-page .admin-shell { width: calc(100% - 12px) !important; }
  body.admin-page .admin-panel { padding: 12px !important; }
  body.admin-page .admin-form > .glass-card, body.admin-page .admin-section { padding: 14px !important; }
  body.admin-page .admin-actions { grid-template-columns: minmax(0, 1fr) !important; }
  body.admin-page .admin-header h1 { font-size: clamp(1.3rem, 7vw, 1.65rem) !important; overflow-wrap: anywhere; }
  body:not(.admin-page) #tab-waifu .waifu-masthead { grid-template-columns: 28px minmax(0, 1fr) !important; min-height: 0 !important; }
  body:not(.admin-page) #tab-waifu .waifu-masthead__source { grid-column: 1 / -1; padding: 8px 0 0 38px !important; overflow-wrap: anywhere; }
  body:not(.admin-page) #tab-waifu .waifu-masthead__watermark { right: 8px !important; font-size: 5.4rem !important; opacity: .12 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}