/* VYNEXA V59 — responsive mobile-first final pass */
*{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{min-width:0}
img,video,canvas,svg,iframe{max-width:100%;height:auto}
main,.app,.layout,.center,.wrap,.shell,.panel,.card,.glass,.item,.creatorCard,.profileHero,.previewCard,.kpi,.top,.hero{min-width:0;max-width:100%}
input,textarea,select,button{min-width:0;max-width:100%}
pre,code,.copy,.kv,.sub,.metaSub,.caption,p,span,div{overflow-wrap:anywhere}

/* AGE GATE: isolate it from generic animated .card rules */
body.vx-age-page{padding:0!important;background:#000!important;overflow:hidden!important}
.vx-age-page #ageGate{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;min-height:100svh!important;overflow:hidden!important;background:#000!important}
.vx-age-page #ageGate .bg{position:absolute!important;inset:0!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important}
.vx-age-page #ageGate .shade{position:absolute!important;inset:0!important}
.vx-age-page #ageGate .card{position:absolute!important;z-index:4!important;left:50%!important;top:59%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(850px,calc(100vw - 30px))!important;max-width:850px!important;margin:0!important;overflow:visible!important}
.vx-age-page #ageGate .card:hover{transform:translate(-50%,-50%)!important}
.vx-age-page #ageGate .card::before{display:none!important}
.vx-age-page .logo,.vx-age-page .entryTitle{max-width:100%!important}
.vx-age-page #movie{width:100vw!important;height:100dvh!important}
.vx-age-page #introVideo{width:100%!important;height:100%!important;object-fit:cover!important}

@media(max-width:900px){
  html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body:not(.vx-age-page){width:100%!important;max-width:100%!important;margin:0!important}
  .app,.wrap{width:100%!important;max-width:100%!important;margin:0 auto!important;padding-left:10px!important;padding-right:10px!important}
  .layout,.layout.admin,.shell{width:100%!important;max-width:100%!important;margin:0!important}
  .center,main{width:100%!important;max-width:100%!important;margin:0!important;padding-left:0!important;padding-right:0!important}
  .glass,.card,.panel,.creatorCard,.profileHero,.item,.previewCard,.kpi,.hero{width:100%;max-width:100%!important}
  .grid,.grid2,.grid3,.grid4,.form,.formgrid,.paygrid,.cryptoRow,.methods,.kpis{grid-template-columns:minmax(0,1fr)!important}
  .row,.between,.top{max-width:100%;flex-wrap:wrap!important}
  .table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tr{min-width:0!important;max-width:100%!important}
  input,.input,textarea,.textarea,select{width:100%!important;max-width:100%!important;font-size:16px!important}
  button,.btn,.cta,.follow,.smallbtn{max-width:100%!important;min-height:44px}
  .media,.mediaReal,.mediaVideo{max-width:100%!important;height:auto!important;object-fit:cover}
  dialog,.modal,.modalCard,.sheet{max-width:calc(100vw - 20px)!important;width:calc(100vw - 20px)!important;margin-left:auto!important;margin-right:auto!important}
}

@media(max-width:640px){
  /* The age page now behaves like a real mobile screen, not a desktop overlay. */
  body.vx-age-page{overflow:auto!important}
  .vx-age-page #ageGate{overflow:auto!important;overscroll-behavior:none!important}
  .vx-age-page #ageGate .bg{background-position:center 30%!important;filter:brightness(.68) contrast(1.08)!important}
  .vx-age-page #ageGate .shade{background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.10) 35%,rgba(0,0,0,.74) 68%,rgba(0,0,0,.94) 100%)!important}
  .vx-age-page #ageGate .card{
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    top:auto!important;
    bottom:max(12px,env(safe-area-inset-bottom,0px))!important;
    transform:none!important;
    width:auto!important;
    max-width:none!important;
    padding:16px 14px 15px!important;
    border-radius:22px!important;
    background:linear-gradient(180deg,rgba(8,9,12,.76),rgba(5,6,8,.94))!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.52)!important;
  }
  .vx-age-page #ageGate .card:hover{transform:none!important}
  .vx-age-page .logo{width:min(230px,72vw)!important;max-height:94px!important;margin:0 auto -2px!important}
  .vx-age-page .entryTitle{width:min(330px,92vw)!important;margin:0 auto 5px!important}
  .vx-age-page .desc{font-size:13px!important;line-height:1.45!important;max-width:34rem!important;margin:0 auto!important}
  .vx-age-page .check{width:100%!important;justify-content:flex-start!important;text-align:left!important;gap:11px!important;margin:13px 0 11px!important;padding:12px 13px!important;font-size:13px!important}
  .vx-age-page .check input{flex:0 0 22px!important}
  .vx-age-page .enter{width:100%!important;height:50px!important;border-radius:14px!important;font-size:14px!important}
  .vx-age-page #videoError{left:12px!important;right:12px!important;bottom:18px!important;transform:none!important;text-align:center!important}

  /* Public/auth/KYC/payment pages */
  .wrap{padding:10px 8px calc(78px + env(safe-area-inset-bottom,0px))!important}
  .panel,.card,.glass,.hero{border-radius:16px!important}
  .panel,.card{padding:13px!important}
  .hero{padding-left:10px!important;padding-right:10px!important}
  .hero h1,h1,.h1{font-size:clamp(24px,8vw,34px)!important;line-height:1.08!important}
  h2,.h2{font-size:clamp(19px,6vw,25px)!important}
  .plans{grid-template-columns:1fr!important}
  .feature{grid-template-columns:42px minmax(0,1fr)!important;gap:10px!important}
  .feature b{font-size:15px!important}.feature span{font-size:13px!important}
  .creatorSubscribeCard .between{display:grid!important;grid-template-columns:1fr!important}
  .creatorSubscribeCard .creator-sub-cta{width:100%!important;min-width:0!important}
  #profileActions{grid-template-columns:1fr!important}
  #profileActions>*{grid-column:auto!important}
  .profileHero .statsRow{grid-template-columns:1fr 1fr!important}
  .vx-profile-grid,.vx-post-grid{grid-template-columns:1fr!important}
  .vx-profile-card{padding:13px!important;border-radius:17px!important}
  .vx-profile-actions{grid-template-columns:1fr!important}
  .vx-home-hero{padding:15px!important;border-radius:18px!important}
  .thread{height:min(54dvh,500px)!important}
  .bubble{max-width:90%!important}
}

@media(max-width:390px){
  .vx-age-page #ageGate .card{left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom,0px))!important;padding:13px 11px!important}
  .vx-age-page .logo{width:min(200px,68vw)!important;max-height:82px!important}
  .vx-age-page .entryTitle{width:min(300px,90vw)!important}
  .vx-age-page .desc{font-size:12px!important}
  .vx-age-page .check{font-size:12px!important;padding:10px 11px!important;margin:10px 0!important}
  .vx-mobile-bottom a{font-size:9px!important}
}

@media(min-width:901px){
  /* Keep desktop centered and stable even with global hover animations. */
  .vx-age-page #ageGate .card{top:59%!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}