/* ==========================================================
   VIRELION_OS RESPONSIVE EXPERIENCE
   Desktop artwork remains untouched.
   <= 1024px receives a native touch-first presentation.
========================================================== */

#vosMobileShell {
  display:none;
}


/* ==========================================================
   TABLET + PHONE
========================================================== */

@media (max-width:1024px) {

  html {
    width:100%;
    max-width:100%;
    min-height:100%;
    background:#05060d;
  }


  body.vos-mobile-mode {
    width:100%;
    max-width:100%;

    min-height:100vh;
    min-height:100svh;

    margin:0;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    background:#05060d;
  }


  /*
   * The six original rendered stages remain the desktop
   * experience. We do not crop them into portrait anymore.
   */

  body.vos-mobile-mode #page1,
  body.vos-mobile-mode #page2,
  body.vos-mobile-mode #page3,
  body.vos-mobile-mode #page4,
  body.vos-mobile-mode #page5,
  body.vos-mobile-mode #page6 {
    display:none !important;
  }


  body.vos-mobile-mode #vosMobileShell {
    position:relative;

    z-index:40;

    display:block;

    width:100%;

    min-height:100vh;
    min-height:100svh;

    color:#f4f0f8;

    isolation:isolate;
  }


  .vos-mobile-background {
    position:fixed;

    inset:0;

    z-index:-3;

    background-image:
      linear-gradient(
        180deg,
        rgba(3,5,13,.55),
        rgba(4,5,13,.83) 52%,
        rgba(4,5,13,.97)
      ),
      var(--vos-mobile-bg);

    background-size:cover;
    background-position:center;

    filter:
      saturate(.86)
      brightness(.72);

    transform:scale(1.03);
  }


  .vos-mobile-background::after {
    content:"";

    position:absolute;

    inset:0;

    background:
      radial-gradient(
        circle at 15% 10%,
        rgba(63,201,239,.15),
        transparent 34%
      ),

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

      linear-gradient(
        180deg,
        rgba(3,5,13,.08),
        rgba(3,5,13,.84)
      );
  }


  .vos-mobile-header {
    position:sticky;

    top:0;

    z-index:80;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:68px;

    padding:
      9px 14px;

    border-bottom:
      1px solid rgba(212,175,122,.22);

    background:
      rgba(5,7,17,.89);

    backdrop-filter:
      blur(22px)
      saturate(130%);

    -webkit-backdrop-filter:
      blur(22px)
      saturate(130%);
  }


  .vos-mobile-brand {
    flex:0 0 auto;

    display:flex;

    align-items:center;

    gap:9px;

    color:white;

    font:
      600 .88rem/1
      Georgia,
      serif;

    text-decoration:none;
  }


  .vos-mobile-brand-mark {
    width:21px;
    height:21px;

    border:
      1px solid rgba(255,255,255,.42);

    border-radius:5px;

    background:
      linear-gradient(
        135deg,
        #53d9f5,
        #7350dc 55%,
        #ed59bd
      );

    box-shadow:
      0 0 18px
      rgba(103,96,236,.35);

    transform:
      rotate(45deg);
  }


  .vos-mobile-nav {
    min-width:0;

    display:flex;

    gap:6px;

    overflow-x:auto;

    padding:
      3px 0;

    scrollbar-width:none;

    -webkit-overflow-scrolling:
      touch;
  }


  .vos-mobile-nav::-webkit-scrollbar {
    display:none;
  }


  .vos-mobile-nav button {
    flex:0 0 auto;

    min-height:34px;

    padding:
      0 11px;

    border:
      1px solid rgba(255,255,255,.11);

    border-radius:999px;

    background:
      rgba(255,255,255,.035);

    color:
      rgba(241,237,247,.69);

    font-size:.67rem;

    cursor:pointer;
  }


  .vos-mobile-nav button.active {
    border-color:
      rgba(212,175,122,.53);

    background:
      rgba(212,175,122,.09);

    color:white;

    box-shadow:
      0 0 14px
      rgba(212,175,122,.10);
  }


  .vos-mobile-main {
    width:
      min(
        780px,
        calc(100% - 24px)
      );

    margin:auto;

    padding:
      24px 0
      max(
        46px,
        env(safe-area-inset-bottom)
      );
  }


  .vos-mobile-hero {
    margin-bottom:16px;

    padding:
      clamp(22px,5vw,36px);

    border:
      1px solid rgba(212,175,122,.27);

    border-radius:24px;

    background:
      linear-gradient(
        145deg,
        rgba(20,24,48,.87),
        rgba(7,9,23,.82)
      );

    box-shadow:
      0 30px 90px
      rgba(0,0,0,.42),

      inset 0 1px 0
      rgba(255,255,255,.07);

    backdrop-filter:
      blur(20px);

    -webkit-backdrop-filter:
      blur(20px);
  }


  .vos-mobile-kicker {
    margin-bottom:8px;

    color:#62d8f2;

    font:
      650 .62rem/1.25
      ui-monospace,
      monospace;

    letter-spacing:.17em;

    text-transform:uppercase;
  }


  .vos-mobile-hero h1 {
    margin:
      0 0 12px;

    font:
      600 clamp(2.35rem,10vw,4.5rem)/.96
      Georgia,
      serif;

    letter-spacing:-.035em;
  }


  .vos-mobile-gradient {
    background:
      linear-gradient(
        90deg,
        #74e4fa,
        #d0ddff,
        #df91ef
      );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
  }


  .vos-mobile-copy {
    margin:
      0;

    max-width:660px;

    color:
      rgba(232,228,240,.72);

    font-size:
      clamp(.91rem,2.3vw,1.05rem);

    line-height:1.66;
  }


  .vos-mobile-actions {
    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-top:20px;
  }


  .vos-mobile-button,
  .vos-mobile-actions a {
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:44px;

    padding:
      0 17px;

    border:
      1px solid rgba(92,211,242,.37);

    border-radius:999px;

    background:
      linear-gradient(
        135deg,
        rgba(29,146,190,.17),
        rgba(91,45,142,.21)
      );

    color:white;

    font-size:.78rem;

    font-weight:650;

    text-decoration:none;

    cursor:pointer;

    touch-action:manipulation;
  }


  .vos-mobile-button.secondary {
    border-color:
      rgba(212,175,122,.34);
  }


  .vos-mobile-grid {
    display:grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:12px;
  }


  .vos-mobile-card {
    min-width:0;

    padding:17px;

    border:
      1px solid rgba(255,255,255,.095);

    border-radius:18px;

    background:
      linear-gradient(
        145deg,
        rgba(20,24,46,.80),
        rgba(7,9,20,.77)
      );

    box-shadow:
      0 18px 45px
      rgba(0,0,0,.27);

    backdrop-filter:
      blur(16px);

    -webkit-backdrop-filter:
      blur(16px);
  }


  .vos-mobile-card h2,
  .vos-mobile-card h3 {
    margin:
      0 0 7px;

    color:#f3eff8;

    font-family:
      Georgia,
      serif;
  }


  .vos-mobile-card h2 {
    font-size:1.6rem;
  }


  .vos-mobile-card h3 {
    font-size:1.12rem;
  }


  .vos-mobile-card p {
    margin:
      0;

    color:
      rgba(232,228,240,.61);

    font-size:.78rem;

    line-height:1.55;
  }


  .vos-mobile-card details {
    margin-top:13px;
  }


  .vos-mobile-card summary {
    color:
      rgba(112,222,246,.84);

    font-size:.72rem;

    font-weight:650;

    cursor:pointer;
  }


  .vos-mobile-detail {
    margin-top:11px;

    padding-top:11px;

    border-top:
      1px solid rgba(255,255,255,.07);

    color:
      rgba(232,228,240,.64);

    font-size:.76rem;

    line-height:1.6;

    white-space:pre-line;
  }


  .vos-mobile-category-tabs {
    display:flex;

    gap:7px;

    overflow-x:auto;

    margin:
      0 0 12px;

    padding-bottom:3px;

    scrollbar-width:none;
  }


  .vos-mobile-category-tabs::-webkit-scrollbar {
    display:none;
  }


  .vos-mobile-category-tabs button {
    flex:0 0 auto;

    min-height:36px;

    padding:
      0 13px;

    border:
      1px solid rgba(255,255,255,.11);

    border-radius:999px;

    background:
      rgba(255,255,255,.035);

    color:
      rgba(232,228,240,.64);
  }


  .vos-mobile-category-tabs button.active {
    border-color:
      rgba(87,215,243,.48);

    color:white;

    background:
      rgba(87,215,243,.08);
  }


  .vos-mobile-rail-wrap {
    position:relative;
  }


  .vos-mobile-rail-head {
    display:flex;

    align-items:center;
    justify-content:flex-end;

    gap:7px;

    margin-bottom:8px;
  }


  .vos-mobile-arrow {
    width:40px;
    height:40px;

    display:grid;

    place-items:center;

    padding:0;

    border:
      1px solid rgba(89,215,244,.32);

    border-radius:50%;

    background:
      rgba(7,9,20,.73);

    color:white;

    font-size:1rem;

    cursor:pointer;
  }


  .vos-mobile-arrow:disabled {
    opacity:.24;
  }


  .vos-mobile-rail {
    display:flex;

    gap:12px;

    overflow-x:auto;
    overflow-y:hidden;

    padding:
      2px 1px 10px;

    scroll-snap-type:
      x mandatory;

    scrollbar-width:none;

    -webkit-overflow-scrolling:
      touch;
  }


  .vos-mobile-rail::-webkit-scrollbar {
    display:none;
  }


  .vos-mobile-rail > .vos-mobile-card {
    flex:
      0 0
      min(
        82vw,
        390px
      );

    scroll-snap-align:start;
  }


  .vos-mobile-media {
    width:100%;

    aspect-ratio:16/10;

    overflow:hidden;

    margin-bottom:13px;

    border:
      1px solid rgba(255,255,255,.08);

    border-radius:13px;

    background:
      rgba(1,3,10,.62);
  }


  .vos-mobile-media img,
  .vos-mobile-media video {
    width:100%;
    height:100%;

    object-fit:cover;
  }


  .vos-mobile-engines {
    display:grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:9px;

    margin-top:12px;
  }


  .vos-mobile-engine {
    display:flex;

    flex-direction:column;

    gap:5px;

    min-height:110px;

    padding:13px;

    border:
      1px solid rgba(212,175,122,.22);

    border-radius:15px;

    background:
      radial-gradient(
        circle at 20% 0%,
        rgba(81,214,244,.08),
        transparent 40%
      ),

      rgba(5,7,18,.62);

    color:white;

    text-decoration:none;
  }


  .vos-mobile-engine small {
    color:
      rgba(92,214,243,.68);

    font:
      .57rem/1.3
      ui-monospace,
      monospace;

    letter-spacing:.10em;

    text-transform:uppercase;
  }


  .vos-mobile-engine strong {
    font-family:
      Georgia,
      serif;
  }


  .vos-mobile-link-grid {
    display:grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:11px;
  }


  .vos-mobile-link {
    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:126px;

    padding:16px;

    border:
      1px solid rgba(255,255,255,.10);

    border-radius:18px;

    background:
      rgba(9,12,27,.75);

    color:white;

    text-decoration:none;
  }


  .vos-mobile-link strong {
    font:
      600 1.06rem/1.2
      Georgia,
      serif;
  }


  .vos-mobile-link span {
    color:
      rgba(232,228,240,.51);

    font-size:.69rem;
  }


  .vos-mobile-footer {
    margin-top:20px;

    padding:
      16px 4px;

    display:flex;

    justify-content:space-between;

    gap:12px;

    border-top:
      1px solid rgba(255,255,255,.07);

    color:
      rgba(232,228,240,.42);

    font-size:.63rem;
  }


  #mainPhotonCanvas {
    z-index:12 !important;

    opacity:.36 !important;
  }

}


/* ==========================================================
   PHONE
========================================================== */

@media (max-width:600px) {

  .vos-mobile-header {
    align-items:flex-start;

    flex-direction:column;
  }


  .vos-mobile-nav {
    width:100%;
  }


  .vos-mobile-main {
    width:
      calc(100% - 18px);

    padding-top:12px;
  }


  .vos-mobile-hero {
    padding:20px 17px;

    border-radius:20px;
  }


  .vos-mobile-grid,
  .vos-mobile-link-grid,
  .vos-mobile-engines {
    grid-template-columns:1fr;
  }


  .vos-mobile-actions {
    display:grid;

    grid-template-columns:1fr;
  }


  .vos-mobile-actions > * {
    width:100%;
  }


  .vos-mobile-rail > .vos-mobile-card {
    flex-basis:
      calc(100vw - 38px);
  }


  .vos-mobile-footer {
    flex-direction:column;
  }

}


/* ==========================================================
   POST-LAUNCH HOTFIX — MOBILE SERVICE DETAIL STABILITY
========================================================== */

@media(max-width:1024px) {

  #vosMobileShell details {
    touch-action:
      pan-y;

    overflow:
      visible;
  }


  #vosMobileShell details[open] {
    overflow:
      visible;
  }


  #vosMobileShell .vos-mobile-detail {
    touch-action:
      pan-y;

    white-space:
      pre-wrap;
  }


  #vosMobileShell summary {
    touch-action:
      manipulation;
  }

}