/* FIX7 — final mobile geometry, touch, media and safe-area authority. */
html.vx-hf17-fix7{--vx7-gutter:12px;--vx7-dock:78px}
@supports(height:100dvh){html.vx-hf17-fix7{min-height:100dvh}}

@media(max-width:820px){
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:clip!important}
  body{padding-bottom:calc(var(--vx7-dock) + env(safe-area-inset-bottom) + 16px)!important}
  img,svg,video,canvas{max-width:100%;height:auto}
  input,select,textarea{max-width:100%!important;font-size:16px!important}
  button,a,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  #mainContent{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0!important;overflow:visible!important}
  #mainContent>.page{display:none!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0 var(--vx7-gutter)!important;overflow:visible!important;transform:none!important}
  #mainContent>.page.active{display:block!important}
  #mainContent>#page-home.active{padding-inline:0!important}
  #mainContent .wrap{width:100%!important;max-width:100%!important;min-width:0!important;margin-inline:auto!important;padding-inline:0!important}
  #mainContent :is(h1,h2,h3,h4,h5,h6,p,span,small,strong,b,em,a,button,label,li){writing-mode:horizontal-tb!important;text-orientation:mixed!important;word-break:normal!important;overflow-wrap:break-word!important}
  #mainContent :is(h1,h2,h3,h4,h5,h6,p){width:auto!important;min-width:0!important;max-width:100%!important}
  #mainContent :is(span,small,strong,b,em,a){min-width:0!important;max-width:none!important}

  /* Reference-style compact mobile header. */
  #topbar,#topbar.vx320-header,#topbar.vx475-topbar,#topbar.vx46-topbar{top:0!important;padding-top:max(7px,env(safe-area-inset-top))!important;height:calc(68px + env(safe-area-inset-top))!important;min-height:calc(68px + env(safe-area-inset-top))!important}
  #topbar .vx320-brand-name,#topbar .vx46-brand-copy b,#topbar .vx95-brand-copy strong{display:block!important;white-space:nowrap!important;word-break:keep-all!important;overflow:hidden!important;text-overflow:clip!important}
  .vx320-mobile-menu{position:fixed!important;top:calc(68px + env(safe-area-inset-top))!important;right:8px!important;left:8px!important;bottom:auto!important;width:auto!important;max-height:calc(100dvh - 90px - env(safe-area-inset-bottom))!important;overflow-y:auto!important;overscroll-behavior:contain!important;border-radius:18px!important;z-index:10000!important}

  /* Universal page grids. */
  #mainContent :is(.game-grid,.server-directory,.server-list,.market-grid,.discord-grid,.streamer-grid,.give-grid,.profile-grid,.support-grid,.ranking-grid,.forum-grid,.vx490-rank-layout,.vx490-forum-layout,.vx490-discord-layout,.vx477-feed-grid,.vx477-social-grid){grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;gap:10px!important}
  #mainContent :is(.srv,.item-card,.discord-card,.streamer-card,.give-card,.profile-card,.support-card,.thread,.vx64-board-row,.vx490-rank-row){width:100%!important;max-width:100%!important;min-width:0!important;margin-inline:0!important;transform:none!important}
  #mainContent :is(.card,.panel,.shell,section,article,aside)>*{min-width:0!important}

  /* Home: remove desktop absolute positioning and tall empty regions. */
  #page-home :is(.vx475-hero,.vx475-network,.vx475-community,.vx475-final,.vx74-home-stage,.vx66-network-map){height:auto!important;min-height:0!important;max-height:none!important}
  #page-home :is(.vx475-quick,.vx475-final,.vx475-hero-copy,.vx475-social-grid,.vx475-feed-grid){position:static!important;inset:auto!important;translate:none!important;transform:none!important}
  #page-home .vx475-hero{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  #page-home .vx475-hero-copy{padding:26px 18px!important}
  #page-home .vx475-metric-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #page-home .vx475-metric-grid>article{min-height:104px!important;overflow:hidden!important}
  #page-home .vx66-network-map{padding:12px!important}
  #page-home .vx66-net-node{position:static!important;display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;width:100%!important;margin:7px 0!important;transform:none!important}
  #page-home .vx66-net-core{position:relative!important;inset:auto!important;display:grid!important;margin:18px auto!important;transform:none!important}

  /* Market: copy, illustration, benefits, filters and listings all remain readable. */
  #page-market :is(.vx477-market-hero,.vx477-market-copy,.vx477-market-benefits,.vx477-market-art){width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;position:static!important;inset:auto!important;transform:none!important}
  #page-market .vx477-market-hero{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  #page-market .vx477-market-copy{padding:22px 14px!important}
  #page-market .vx477-market-copy>div{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  #page-market .vx477-market-copy button{min-height:48px!important;white-space:normal!important}
  #page-market .vx477-market-art{min-height:180px!important;max-height:250px!important;overflow:hidden!important}
  #page-market .vx477-market-art img{width:100%!important;height:230px!important;object-fit:contain!important}
  #page-market .vx477-market-benefits{display:grid!important;grid-template-columns:minmax(0,1fr)!important;padding:8px!important}
  #page-market .vx477-market-benefits>div{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;align-items:center!important}
  #page-market :is(.market-toolbar,.vx477-market-tools,.v2-toolbar){display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:8px!important}

  /* Servers: bounded cards, horizontal filter rail and paged rendering. */
  #page-servers :is(.v2-toolbar,.vx476-toolbar,.server-filters){display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:8px!important}
  #page-servers :is(.game-tabs,.filter-tabs,.vx476-game-rail){display:flex!important;width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important}
  #page-servers :is(.game-tabs,.filter-tabs,.vx476-game-rail)::-webkit-scrollbar{display:none}
  #page-servers :is(.game-tabs,.filter-tabs,.vx476-game-rail)>*{flex:0 0 auto!important;white-space:nowrap!important}
  #page-servers #serverList{display:grid!important;grid-template-columns:minmax(0,1fr)!important;contain:layout style!important}
  #page-servers #serverList>*{content-visibility:auto!important;contain-intrinsic-size:172px!important;overflow:hidden!important}
  #page-servers .vx71-server-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  #page-servers .vx71-telemetry{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #page-servers .vx71-actions{display:flex!important;flex-wrap:wrap!important}

  /* Rankings keep column semantics through a deliberate horizontal table viewport. */
  #page-server-rankings :is(.vx500-rank-layout,.vx490-rank-layout){display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important}
  #page-server-rankings :is(#vx500RankRows,#vx490RankTable){display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important}
  #page-server-rankings :is(.vx500-rank-head,.vx500-rank-row,.vx490-rank-head,.vx490-rank-row){min-width:680px!important;max-width:none!important}
  #page-server-rankings :is(.vx500-rank-tools,.vx490-rank-tools,.vx500-rank-tabs,.vx490-rank-tabs){display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:8px!important}

  /* Forum, Discord, messages, support and profile. */
  #page-forum .vx64-board-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;height:auto!important;min-height:0!important;gap:10px!important}
  #page-forum .vx64-board-latest{border-left:0!important;border-top:1px solid rgba(130,150,195,.13)!important;padding:10px 0 0!important}
  #page-discord :is(.vx490-discord-card,.discord-card){display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:hidden!important}
  #page-discord :is(.discord-banner,.vx490-discord-banner) img{width:100%!important;height:100%!important;object-fit:cover!important}
  #page-support :is(.support-shell,.vx65-support-shell,.support-layout){display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important}
  #page-profile :is(.profile-layout,.profile-top,.profile-main){grid-template-columns:minmax(0,1fr)!important;width:100%!important}
  #page-messages.active{height:calc(100dvh - 68px - var(--vx7-dock) - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;min-height:430px!important;padding:0!important;overflow:hidden!important}
  #page-messages #vx11DmShell{height:100%!important;grid-template-columns:minmax(0,1fr)!important}
  #page-messages .vx480-sidebar{display:grid!important}
  #page-messages .vx480-chat{display:none!important}
  #page-messages.vx17-mobile-chat-open .vx480-sidebar{display:none!important}
  #page-messages.vx17-mobile-chat-open .vx480-chat{display:grid!important}
  #page-messages #vx11Composer{padding-bottom:max(7px,env(safe-area-inset-bottom))!important}

  /* Fixed UI cannot cover content or drift outside iOS safe areas. */
  .bottom-nav{position:fixed!important;inset:auto 0 0!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;width:100%!important;max-width:100%!important;height:calc(var(--vx7-dock) + env(safe-area-inset-bottom))!important;margin:0!important;padding:7px max(5px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))!important;overflow:visible!important;transform:none!important;z-index:9000!important}
  .bottom-nav :is(.bnav,.bn){min-width:0!important;height:58px!important;padding:4px 2px!important;white-space:nowrap!important;font-size:10px!important}
  .bottom-nav :is(.bnav-fab,.bn-center){transform:translateY(-12px)!important}
  :is(.chat-fab,.support-fab,.live-chat-launch){right:max(12px,env(safe-area-inset-right))!important;bottom:calc(var(--vx7-dock) + env(safe-area-inset-bottom) + 16px)!important;transform:none!important}
  .modal,.modal-card{width:calc(100% - 20px)!important;max-width:620px!important;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px)!important;overflow-y:auto!important;overscroll-behavior:contain!important}
  .vx17-page-pager,.vx500-page-pager{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;width:100%!important;gap:6px!important;margin:14px 0!important}
  .vx17-page-pager button,.vx500-page-pager button{min-width:38px!important;height:38px!important}
  .vx17-page-pager>span:last-child,.vx500-page-pager>span:last-child{flex:1 0 100%!important;text-align:center!important}
}

@media(max-width:390px){
  html.vx-hf17-fix7{--vx7-gutter:10px}
  #page-home .vx475-metric-grid,#page-servers .vx71-telemetry{grid-template-columns:minmax(0,1fr)!important}
  #page-home .vx475-hero-copy h1,#page-market .vx477-market-copy h1{font-size:clamp(32px,10vw,42px)!important}
}

@media(hover:none) and (pointer:coarse){#mainContent :is(button,.btn,a,[role="button"]){min-height:42px}}
@media(prefers-reduced-motion:reduce){html.vx-hf17-fix7 *,html.vx-hf17-fix7 *::before,html.vx-hf17-fix7 *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
