/* ======================================================
   VIRELION_OS | RESPONSIVE LAUNCH POLISH
   Mobile + Tablet glass, particles, and nav refinement
   Non-destructive additive layer
   ====================================================== */

:root {
  --vos-mobile-glass-top: rgba(10, 16, 36, 0.46);
  --vos-mobile-glass-bottom: rgba(6, 10, 24, 0.58);
  --vos-mobile-border: rgba(115, 170, 255, 0.20);
  --vos-mobile-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  --vos-mobile-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Fallback responsive particles canvas */
.vos-responsive-particles {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0.92;
}

/* keep primary shells above particle layer */
#tbz-wrapper,
main,
.site-shell,
.page-shell,
.page-frame,
.vos-page,
.vos-site,
.viewcast-shell,
.note-shell,
body > *:not(canvas) {
  position: relative;
  z-index: 2;
}

/* maintain transparent base so particles / art show through */
html,
body {
  background: #040814;
}

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

audio {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1024px) {

  /* ------------------------------
     Nav / tabs / pill rows
     ------------------------------ */
  :is(
    .vos-nav-links,
    .nav-links,
    .tab-row,
    .tabs-row,
    .pill-row,
    .page-tabs,
    .section-tabs,
    .built-tabs,
    .collection-tabs,
    .portal-tabs,
    .control-tabs,
    .top-links,
    .top-tabs
  ) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0.55rem !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    align-items: center;
    padding-bottom: 0.2rem;
  }

  :is(
    .vos-nav-links,
    .nav-links,
    .tab-row,
    .tabs-row,
    .pill-row,
    .page-tabs,
    .section-tabs,
    .built-tabs,
    .collection-tabs,
    .portal-tabs,
    .control-tabs,
    .top-links,
    .top-tabs
  )::-webkit-scrollbar {
    display: none;
  }

  :is(
    .vos-nav-link,
    .nav-link,
    .tab-pill,
    .page-pill,
    .pill,
    .tab,
    button[class*="tab"],
    a[class*="tab"]
  ) {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* ------------------------------
     Glass effect recovery
     ------------------------------ */
  :is(
    .glass-card,
    .glass-panel,
    .glass-shell,
    .hero-panel,
    .section-panel,
    .service-card,
    .built-card,
    .connect-card,
    .supporter-card,
    .portal-card,
    .stream-card,
    .status-card,
    .control-card,
    .admin-card,
    .studio-card,
    .feature-card,
    .content-card,
    .modal-card,
    .chamber-card,
    .card,
    .panel,
    .shell,
    .chamber,
    [class*="glass"],
    [class*="card"],
    [class*="panel"],
    [class*="chamber"],
    [class*="shell"]
  ) {
    background:
      linear-gradient(
        180deg,
        var(--vos-mobile-glass-top),
        var(--vos-mobile-glass-bottom)
      ) !important;
    border: 1px solid var(--vos-mobile-border) !important;
    box-shadow:
      var(--vos-mobile-shadow),
      var(--vos-mobile-inner-highlight) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  }

  /* improve text clarity while preserving glass depth */
  :is(
    .glass-card,
    .glass-panel,
    .glass-shell,
    .hero-panel,
    .section-panel,
    .service-card,
    .built-card,
    .connect-card,
    .supporter-card,
    .portal-card,
    .stream-card,
    .status-card,
    .control-card,
    .admin-card,
    .studio-card,
    .feature-card,
    .content-card,
    .modal-card,
    .chamber-card,
    .card,
    .panel,
    .shell,
    .chamber,
    [class*="glass"],
    [class*="card"],
    [class*="panel"],
    [class*="chamber"],
    [class*="shell"]
  ) :is(h1, h2, h3, h4, h5, h6, p, span, li, a, label, small, strong) {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.20);
  }

  /* ------------------------------
     Main page chamber rhythm
     ------------------------------ */
  :is(
    .services-grid,
    .service-grid,
    .connect-grid,
    .built-grid,
    .support-grid,
    .feature-grid,
    .content-grid,
    .card-grid,
    .portal-grid
  ) {
    gap: 1rem !important;
  }

  .connect-card,
  .portal-card,
  .service-card,
  .built-card,
  .supporter-card {
    min-height: 148px;
  }

  .hero-panel,
  .section-panel,
  .glass-panel,
  .glass-shell,
  .hero-shell {
    padding: clamp(1rem, 2.6vw, 1.5rem) !important;
  }

  /* footer breathing room */
  footer,
  .site-footer,
  .footer-bar,
  .page-footer {
    padding-bottom: 1rem !important;
  }
}

/* Tablet specific tuning */
@media (min-width: 768px) and (max-width: 1024px) {

  :is(
    .services-grid,
    .service-grid,
    .connect-grid,
    .feature-grid,
    .card-grid,
    .portal-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-panel,
  .section-panel,
  .glass-panel,
  .glass-shell,
  .hero-shell {
    min-height: 220px;
  }
}

/* Mobile specific tuning */
@media (max-width: 767px) {

  :is(
    .services-grid,
    .service-grid,
    .connect-grid,
    .built-grid,
    .support-grid,
    .feature-grid,
    .content-grid,
    .card-grid,
    .portal-grid
  ) {
    grid-template-columns: 1fr !important;
  }

  .hero-panel,
  .section-panel,
  .glass-panel,
  .glass-shell,
  .hero-shell {
    min-height: auto;
  }

  /* built collection cards should show one primary card comfortably */
  :is(
    .built-track,
    .built-rail,
    .carousel-track,
    .slider-track
  ) > * {
    min-width: min(88vw, 420px);
  }
}


/* ==========================================================
   MAIN VIRELION MOBILE / TABLET — PHOTON GLASS FINAL PASS
========================================================== */

@media (max-width:1024px) {

  /*
   * Main responsive shell stacking:
   *
   * -2  reference artwork
   *  1  particles
   *  2  glass/content
   *  4  navigation
   */

  body.vos-mobile-mode #vosMobileShell {
    isolation:isolate;
  }


  body.vos-mobile-mode
  #vosMobileShell
  > .vos-responsive-particles {

    position:fixed !important;

    inset:0 !important;

    width:100vw !important;
    height:100svh !important;

    z-index:1 !important;

    opacity:.90 !important;

    pointer-events:none !important;

    mix-blend-mode:screen;

    filter:
      saturate(115%)
      brightness(1.06);
  }


  body.vos-mobile-mode
  #vosMobileShell
  .vos-mobile-background {

    z-index:-2 !important;

    background-image:

      linear-gradient(
        180deg,
        rgba(3,5,13,.22),
        rgba(4,5,13,.40) 52%,
        rgba(4,5,13,.58)
      ),

      var(--vos-mobile-bg)

      !important;

    filter:
      saturate(.96)
      brightness(.84)
      !important;
  }


  body.vos-mobile-mode
  #vosMobileShell
  .vos-mobile-background::after {

    background:

      radial-gradient(
        circle at 15% 10%,
        rgba(63,201,239,.11),
        transparent 36%
      ),

      radial-gradient(
        circle at 88% 12%,
        rgba(157,68,222,.13),
        transparent 35%
      ),

      linear-gradient(
        180deg,
        rgba(3,5,13,.02),
        rgba(3,5,13,.35)
      )

      !important;
  }


  body.vos-mobile-mode
  #vosMobileShell
  .vos-mobile-main {

    position:relative;

    z-index:2;
  }


  body.vos-mobile-mode
  #vosMobileShell
  .vos-mobile-header {

    z-index:4;
  }


  /*
   * Primary glass.
   * Enough density for text, but intentionally allows
   * background architecture + particles to remain visible.
   */

  body.vos-mobile-mode
  #vosMobileShell
  :is(
    .vos-mobile-hero,
    .vos-mobile-card,
    .vos-mobile-link,
    .vos-mobile-engine
  ) {

    background:

      radial-gradient(
        circle at 10% 0%,
        rgba(72,207,241,.055),
        transparent 37%
      ),

      radial-gradient(
        circle at 92% 5%,
        rgba(189,87,229,.055),
        transparent 40%
      ),

      linear-gradient(
        145deg,
        rgba(12,18,42,.38),
        rgba(6,9,24,.49)
      )

      !important;

    border:
      1px solid
      rgba(121,176,255,.22)
      !important;

    box-shadow:

      0 18px 52px
      rgba(0,0,0,.30),

      inset 0 1px 0
      rgba(255,255,255,.085),

      inset 0 0 24px
      rgba(80,157,230,.018)

      !important;

    backdrop-filter:
      blur(10px)
      saturate(145%)
      !important;

    -webkit-backdrop-filter:
      blur(10px)
      saturate(145%)
      !important;
  }


  body.vos-mobile-mode
  #vosMobileShell
  .vos-mobile-hero {

    background:

      radial-gradient(
        circle at 18% 5%,
        rgba(63,210,243,.07),
        transparent 40%
      ),

      radial-gradient(
        circle at 85% 10%,
        rgba(179,77,224,.075),
        transparent 42%
      ),

      linear-gradient(
        145deg,
        rgba(13,19,44,.43),
        rgba(6,9,24,.52)
      )

      !important;
  }


  body.vos-mobile-mode
  #vosMobileShell
  .vos-mobile-link {

    background:

      linear-gradient(
        145deg,
        rgba(10,15,35,.30),
        rgba(5,8,21,.43)
      )

      !important;
  }


  body.vos-mobile-mode
  #vosMobileShell
  .vos-mobile-engine {

    background:

      radial-gradient(
        circle at 18% 0%,
        rgba(81,214,244,.10),
        transparent 43%
      ),

      linear-gradient(
        145deg,
        rgba(8,14,33,.31),
        rgba(5,8,21,.45)
      )

      !important;
  }


  /*
   * Keep text legible even as the chambers become clearer.
   */

  body.vos-mobile-mode
  #vosMobileShell
  :is(
    .vos-mobile-hero,
    .vos-mobile-card,
    .vos-mobile-link,
    .vos-mobile-engine
  )
  :is(
    h1,
    h2,
    h3,
    h4,
    p,
    span,
    strong,
    small,
    summary
  ) {

    text-shadow:
      0 2px 10px
      rgba(0,0,0,.42);
  }


  /*
   * Any dialog / pop-up chamber created by managed content
   * stays translucent over the photon field.
   */

  body.vos-mobile-mode
  :is(
    dialog,
    [role="dialog"],
    [class*="modal-card"],
    [class*="modal-panel"],
    [class*="dialog-card"],
    [class*="dialog-panel"]
  ) {

    background:

      radial-gradient(
        circle at 10% 0%,
        rgba(70,211,243,.07),
        transparent 38%
      ),

      linear-gradient(
        145deg,
        rgba(10,17,39,.48),
        rgba(4,7,19,.61)
      )

      !important;

    border:
      1px solid
      rgba(129,180,255,.25)
      !important;

    box-shadow:

      0 28px 80px
      rgba(0,0,0,.52),

      inset 0 1px 0
      rgba(255,255,255,.09)

      !important;

    backdrop-filter:
      blur(13px)
      saturate(150%)
      !important;

    -webkit-backdrop-filter:
      blur(13px)
      saturate(150%)
      !important;
  }


  /*
   * Undo the earlier broad "[class*=shell]" glass match
   * on structural wrappers. Only actual chambers should
   * look like glass.
   */

  :is(
    .admin-shell,
    .ott-shell,
    .vc-shell,
    .vc-admin-shell,
    .vc-studio-shell,
    .vos-mobile-main
  ) {

    background:
      transparent !important;

    border:
      0 !important;

    box-shadow:
      none !important;

    backdrop-filter:
      none !important;

    -webkit-backdrop-filter:
      none !important;
  }

}