/* Zaplat Gaming — V3.7K.1A Mobile & Tablet Foundation
   Touch-only presentation layer. Desktop/laptop pointer layouts are intentionally
   outside this file's activation contract and keep the existing V3.7J desktop UI. */

.zg-mobile-bottom-nav,
.zg-mobile-more-backdrop,
.zg-mobile-more-sheet{display:none}

@media (max-width:1366px){
  html.zg-mobile-ui{
    --zg-mobile-edge:clamp(10px,2.8vw,18px);
    --zg-mobile-control:44px;
    --zg-mobile-nav-h:66px;
    --zg-mobile-card-radius:16px;
    scroll-padding-block-start:74px!important;
  }

  html.zg-mobile-ui,
  html.zg-mobile-ui body{
    max-width:100%;
    overflow-x:clip;
  }

  html.zg-mobile-ui body{
    padding-bottom:calc(var(--zg-mobile-nav-h) + 22px + env(safe-area-inset-bottom));
  }

  html.zg-mobile-ui body.zg-arena-open{
    padding-bottom:0;
  }

  html.zg-mobile-ui :where(a,button,input,select,textarea){
    touch-action:manipulation;
  }

  html.zg-mobile-ui :where(.btn,button,[role="button"]){
    min-height:var(--zg-mobile-control);
  }

  /* ------------------------------------------------------------
     Compact app header. The desktop navigation is preserved in DOM
     and becomes the source for the mobile More sheet.
     ------------------------------------------------------------ */
  html.zg-mobile-ui .topbar{
    position:sticky!important;
    top:0!important;
    z-index:950!important;
    background:rgba(7,8,11,.965)!important;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    border-bottom-color:rgba(255,255,255,.07)!important;
  }

  html.zg-mobile-ui .topbar-inner.shell{
    width:calc(100% - (var(--zg-mobile-edge) * 2))!important;
    min-height:58px!important;
    height:auto!important;
    padding:6px 0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand member"!important;
    align-items:center!important;
    gap:8px!important;
  }

  html.zg-mobile-ui .topbar-inner>.nav{
    display:none!important;
  }

  html.zg-mobile-ui .topbar-inner>.brand{
    grid-area:brand!important;
    min-width:0!important;
    max-width:100%!important;
    justify-self:start!important;
    gap:9px!important;
  }

  html.zg-mobile-ui .topbar-inner>.brand .brand-logo{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
  }

  html.zg-mobile-ui .topbar-inner>.brand span{
    min-width:0!important;
  }

  html.zg-mobile-ui .topbar-inner>.brand strong{
    display:block!important;
    max-width:min(38vw,190px)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:12px!important;
    line-height:1.1!important;
  }

  html.zg-mobile-ui .topbar-inner>.brand small{
    display:none!important;
  }

  html.zg-mobile-ui .topbar-inner>.member-utilities{
    grid-area:member!important;
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
    max-width:100%!important;
    transform:none!important;
  }

  html.zg-mobile-ui .member-utility-buttons{
    position:static!important;
    gap:5px!important;
  }

  html.zg-mobile-ui .member-utility-btn,
  html.zg-mobile-ui .member-profile-shortcut{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    border-radius:12px!important;
  }

  html.zg-mobile-ui .member-profile-shortcut{
    grid-template-columns:1fr!important;
    padding:3px!important;
  }

  html.zg-mobile-ui .member-profile-avatar{
    width:32px!important;
    height:32px!important;
  }

  html.zg-mobile-ui .member-profile-copy{
    display:none!important;
  }

  html.zg-mobile-ui .member-center-popover{
    position:fixed!important;
    top:66px!important;
    left:var(--zg-mobile-edge)!important;
    right:var(--zg-mobile-edge)!important;
    bottom:calc(var(--zg-mobile-nav-h) + 18px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
    border-radius:18px!important;
  }

  /* ------------------------------------------------------------
     App-style bottom navigation.
     ------------------------------------------------------------ */
  html.zg-mobile-ui .zg-mobile-bottom-nav{
    position:fixed;
    z-index:940;
    inset-inline-start:50%;
    inset-block-end:max(8px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    width:min(720px,calc(100% - (var(--zg-mobile-edge) * 2)));
    min-height:var(--zg-mobile-nav-h);
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    padding:5px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:21px;
    background:rgba(12,13,18,.96);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    box-shadow:0 18px 50px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.018) inset;
    transition:transform .18s ease,opacity .18s ease;
  }

  html.zg-mobile-ui.zg-mobile-input-focus .zg-mobile-bottom-nav{
    transform:translate(-50%,calc(100% + 28px));
    opacity:0;
    pointer-events:none;
  }

  html.zg-mobile-ui body.zg-arena-open .zg-mobile-bottom-nav{
    display:none!important;
  }

  html.zg-mobile-ui .zg-mobile-nav-item{
    position:relative;
    min-width:0;
    min-height:54px;
    display:grid;
    grid-template-rows:23px auto;
    place-items:center;
    align-content:center;
    gap:3px;
    padding:5px 3px;
    border:0;
    border-radius:15px;
    background:transparent;
    color:#858b98;
    text-decoration:none;
    font:800 9px/1.1 Cairo,Inter,system-ui,sans-serif;
    cursor:pointer;
  }

  html.zg-mobile-ui .zg-mobile-nav-item svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  html.zg-mobile-ui .zg-mobile-nav-item>span{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
  }

  html.zg-mobile-ui .zg-mobile-nav-item.active{
    color:#fff;
    background:linear-gradient(145deg,rgba(239,35,60,.18),rgba(239,35,60,.055));
    box-shadow:inset 0 0 0 1px rgba(255,79,104,.20);
  }

  html.zg-mobile-ui .zg-mobile-nav-item.active:after{
    content:"";
    position:absolute;
    inset-block-end:3px;
    width:18px;
    height:2px;
    border-radius:999px;
    background:#ff526b;
    box-shadow:0 0 12px rgba(255,82,107,.55);
  }

  html.zg-mobile-ui .zg-mobile-more-backdrop{
    position:fixed;
    z-index:970;
    inset:0;
    display:block;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:rgba(2,3,6,.66);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    transition:opacity .18s ease,visibility .18s ease;
  }

  html.zg-mobile-ui .zg-mobile-more-sheet{
    position:fixed;
    z-index:980;
    inset-inline-start:50%;
    inset-block-end:0;
    width:min(620px,100%);
    max-height:min(78dvh,760px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transform:translate(-50%,105%);
    border:1px solid rgba(255,255,255,.10);
    border-bottom:0;
    border-radius:24px 24px 0 0;
    background:linear-gradient(165deg,#151720,#0b0c11 72%);
    box-shadow:0 -28px 80px rgba(0,0,0,.58);
    transition:transform .22s cubic-bezier(.2,.75,.2,1);
    padding-bottom:env(safe-area-inset-bottom);
  }

  html.zg-mobile-ui.zg-mobile-menu-open .zg-mobile-more-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  html.zg-mobile-ui.zg-mobile-menu-open .zg-mobile-more-sheet{
    transform:translate(-50%,0);
  }

  html.zg-mobile-ui.zg-mobile-menu-open body{
    overflow:hidden!important;
  }

  html.zg-mobile-ui .zg-mobile-more-head{
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 14px;
    border-bottom:1px solid rgba(255,255,255,.07);
  }

  html.zg-mobile-ui .zg-mobile-more-head>div{
    min-width:0;
  }

  html.zg-mobile-ui .zg-mobile-more-head small{
    display:block;
    color:#ff6077;
    font:900 7px/1 Inter,system-ui,sans-serif;
    letter-spacing:.16em;
  }

  html.zg-mobile-ui .zg-mobile-more-head strong{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:17px;
  }

  html.zg-mobile-ui .zg-mobile-more-close{
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    display:grid;
    place-items:center;
    border:1px solid #343743;
    border-radius:12px;
    background:#181a22;
    color:#fff;
    font-size:22px;
    cursor:pointer;
  }

  html.zg-mobile-ui .zg-mobile-more-scroll{
    overflow:auto;
    overscroll-behavior:contain;
    padding:12px 14px 18px;
  }

  html.zg-mobile-ui .zg-mobile-more-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  html.zg-mobile-ui .zg-mobile-menu-link{
    min-width:0;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:14px;
    background:#101218;
    color:#eceef2;
    text-decoration:none;
    font-weight:800;
  }

  html.zg-mobile-ui .zg-mobile-menu-link small{
    display:block;
    margin-top:3px;
    color:#777d8a;
    font:700 8px/1.2 Inter,system-ui,sans-serif;
  }

  html.zg-mobile-ui .zg-mobile-menu-link:after{
    content:"›";
    color:#ff6077;
    font:900 20px/1 Inter,system-ui,sans-serif;
  }

  html[dir="rtl"].zg-mobile-ui .zg-mobile-menu-link:after{
    content:"‹";
  }

  html.zg-mobile-ui .zg-mobile-language{
    margin-top:12px;
    padding:12px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:15px;
    background:#101218;
  }

  html.zg-mobile-ui .zg-mobile-language label{
    display:block;
    margin-bottom:7px;
    color:#8d93a1;
    font-size:9px;
    font-weight:800;
  }

  html.zg-mobile-ui .zg-mobile-language select{
    width:100%;
    min-height:46px;
    border:1px solid #353844;
    border-radius:12px;
    background:#171922;
    color:#fff;
    padding-inline:11px;
  }

  /* ------------------------------------------------------------
     Smart Home: compact hierarchy and controlled media.
     ------------------------------------------------------------ */
  html.zg-mobile-ui .smart-home-hero-inner{
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding-block:clamp(26px,5.5vw,40px)!important;
  }

  html.zg-mobile-ui .smart-home-hero-copy{
    max-width:none!important;
  }

  html.zg-mobile-ui .smart-home-hero-copy .eyebrow{
    font-size:8px!important;
    letter-spacing:.14em!important;
  }

  html.zg-mobile-ui .smart-home-hero-copy h1{
    max-width:100%!important;
    margin:8px 0 10px!important;
    font-size:clamp(30px,7vw,48px)!important;
    line-height:1.06!important;
    letter-spacing:-.035em!important;
    text-wrap:balance;
  }

  html.zg-mobile-ui .smart-home-hero-copy p{
    max-width:68ch!important;
    font-size:clamp(12px,2.6vw,15px)!important;
    line-height:1.72!important;
  }

  html.zg-mobile-ui .smart-home-hero-actions{
    margin-top:16px!important;
    gap:7px!important;
  }

  html.zg-mobile-ui .smart-home-hero-actions .btn{
    flex:1 1 145px;
    min-height:44px;
    padding:8px 12px!important;
    border-radius:12px!important;
  }

  html.zg-mobile-ui .smart-home-suggestion{
    max-width:100%!important;
    margin-top:13px!important;
    grid-template-columns:32px minmax(0,1fr) auto!important;
    gap:9px!important;
    padding:10px 11px!important;
    border-radius:13px!important;
  }

  html.zg-mobile-ui .smart-home-suggestion>b{
    width:32px!important;
    height:32px!important;
    border-radius:10px!important;
  }

  html.zg-mobile-ui .smart-home-suggestion strong{
    font-size:10.5px!important;
    line-height:1.45!important;
  }

  html.zg-mobile-ui .smart-home-suggestion>i{
    font-size:8px!important;
  }

  html.zg-mobile-ui .smart-home-status-card{
    width:100%!important;
    max-width:none!important;
    min-height:138px!important;
    border-radius:19px!important;
  }

  html.zg-mobile-ui .smart-home-status-copy{
    inset-inline:15px!important;
    inset-block-end:14px!important;
  }

  html.zg-mobile-ui .smart-home-status-copy span{
    font-size:7px!important;
  }

  html.zg-mobile-ui .smart-home-status-copy b{
    margin-top:5px!important;
    font-size:36px!important;
  }

  html.zg-mobile-ui .smart-home-status-copy small{
    font-size:9px!important;
  }

  html.zg-mobile-ui .smart-home-status-art .status-game{
    width:62px!important;
    height:84px!important;
    border-radius:13px!important;
  }

  html.zg-mobile-ui .smart-home-status-art .status-game-0{
    inset-inline-end:12px!important;
    inset-block-start:10px!important;
  }

  html.zg-mobile-ui .smart-home-status-art .status-game-1{
    inset-inline-end:58px!important;
    inset-block-start:2px!important;
  }

  html.zg-mobile-ui .smart-home-status-art .status-game-2{
    inset-inline-end:98px!important;
    inset-block-start:18px!important;
  }

  html.zg-mobile-ui .smart-home-status-card>i{
    inset-inline-start:14px!important;
    inset-block-end:14px!important;
  }

  html.zg-mobile-ui .smart-home-trending{
    padding:12px 0 13px!important;
  }

  html.zg-mobile-ui .smart-home-trending-head{
    align-items:center!important;
    flex-direction:row!important;
    gap:10px!important;
    margin-bottom:8px!important;
  }

  html.zg-mobile-ui .smart-home-trending-head span{
    font-size:12px!important;
  }

  html.zg-mobile-ui .smart-home-trending-head small{
    font-size:8px!important;
  }

  html.zg-mobile-ui .smart-home-trend-chip{
    flex-basis:clamp(145px,40vw,190px)!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    gap:8px!important;
    padding:7px!important;
    border-radius:13px!important;
  }

  html.zg-mobile-ui .smart-home-trend-chip img,
  html.zg-mobile-ui .smart-home-trend-chip>i{
    width:40px!important;
    height:48px!important;
    border-radius:8px!important;
  }

  html.zg-mobile-ui .smart-home-section,
  html.zg-mobile-ui .smart-home-section.size-small,
  html.zg-mobile-ui .smart-home-section.size-large{
    padding-block:clamp(17px,4vw,26px)!important;
  }

  html.zg-mobile-ui .smart-home-section-head{
    margin-bottom:12px!important;
    gap:8px!important;
    align-items:flex-start!important;
  }

  html.zg-mobile-ui .smart-home-section-head h2,
  html.zg-mobile-ui .smart-home-section.size-large .smart-home-section-head h2{
    margin:5px 0 3px!important;
    font-size:clamp(20px,4.8vw,27px)!important;
    line-height:1.18!important;
  }

  html.zg-mobile-ui .smart-home-section-head p{
    max-width:62ch!important;
    font-size:10px!important;
    line-height:1.55!important;
  }

  html.zg-mobile-ui .smart-home-mandatory-badge,
  html.zg-mobile-ui .smart-home-section-action{
    min-height:30px!important;
    padding:0 9px!important;
    font-size:8px!important;
  }

  html.zg-mobile-ui .smart-game-world-card,
  html.zg-mobile-ui .smart-home-section.size-large .smart-game-world-card,
  html.zg-mobile-ui .smart-home-section.size-small .smart-game-world-card{
    min-height:148px!important;
    border-radius:17px!important;
  }

  html.zg-mobile-ui .smart-game-copy{
    inset-inline:14px!important;
    inset-block-end:13px!important;
  }

  html.zg-mobile-ui .smart-game-copy small{
    margin-bottom:5px!important;
    font-size:6.5px!important;
  }

  html.zg-mobile-ui .smart-game-copy b{
    font-size:16px!important;
    line-height:1.15!important;
  }

  html.zg-mobile-ui .smart-game-copy em{
    margin-top:4px!important;
    font-size:7.5px!important;
  }

  html.zg-mobile-ui .smart-game-open{
    inset-inline-end:10px!important;
    inset-block-start:10px!important;
    width:30px!important;
    height:30px!important;
    border-radius:10px!important;
  }

  html.zg-mobile-ui .smart-game-world-card.community-art .smart-game-core-img{
    width:78px!important;
    height:78px!important;
    inset-inline-end:15px!important;
    border-radius:19px!important;
  }

  html.zg-mobile-ui .smart-game-world-card.community-art .smart-game-core-rings{
    width:102px!important;
    height:102px!important;
    inset-inline-end:3px!important;
  }

  html.zg-mobile-ui .smart-game-world-card.community-art .smart-game-copy{
    max-width:62%!important;
  }

  html.zg-mobile-ui .smart-game-world-card.community-art .smart-game-copy>b{
    font-size:17px!important;
  }

  html.zg-mobile-ui .smart-home-latest .media-thumb{
    height:auto!important;
    aspect-ratio:16/9!important;
  }

  html.zg-mobile-ui .smart-home-latest .media-thumb>img,
  html.zg-mobile-ui .smart-home-latest .media-thumb picture,
  html.zg-mobile-ui .smart-home-latest .media-thumb picture>img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  html.zg-mobile-ui .smart-feed-cover{
    aspect-ratio:16/9!important;
  }

  html.zg-mobile-ui .smart-feed-copy{
    padding:12px!important;
  }

  html.zg-mobile-ui .smart-feed-copy>b{
    margin-top:5px!important;
    font-size:13px!important;
    line-height:1.4!important;
  }

  html.zg-mobile-ui .smart-feed-copy>p{
    margin-top:5px!important;
    font-size:9px!important;
    line-height:1.5!important;
  }

  html.zg-mobile-ui .smart-opportunity{
    min-height:170px!important;
    padding:17px!important;
    border-radius:17px!important;
  }

  html.zg-mobile-ui .smart-opportunity-orb{
    inset-inline-end:16px!important;
    inset-block-start:15px!important;
    width:48px!important;
    height:48px!important;
    border-radius:16px!important;
  }

  html.zg-mobile-ui .smart-opportunity-value{
    margin:16px 0 10px!important;
    font-size:30px!important;
  }

  html.zg-mobile-ui .smart-opportunity h3{
    max-width:76%!important;
    margin:20px 0 6px!important;
    font-size:19px!important;
  }

  html.zg-mobile-ui .smart-opportunity p{
    margin-block:6px!important;
    font-size:10px!important;
  }

  html.zg-mobile-ui .smart-opportunity .btn{
    min-height:40px!important;
  }

  html.zg-mobile-ui .smart-home-modal{
    padding:0!important;
    align-items:end!important;
  }

  html.zg-mobile-ui .smart-home-modal-card{
    width:100%!important;
    max-width:680px!important;
    max-height:88dvh!important;
    border-radius:24px 24px 0 0!important;
    padding:20px 16px calc(18px + env(safe-area-inset-bottom))!important;
  }

  html.zg-mobile-ui .smart-home-modal-card>h2{
    padding-inline-end:44px;
    font-size:24px!important;
  }

  html.zg-mobile-ui .smart-home-modal-x{
    inset-inline-end:12px!important;
    inset-block-start:12px!important;
    width:40px!important;
    height:40px!important;
  }

  html.zg-mobile-ui .smart-home-section-row{
    grid-template-columns:32px minmax(0,1fr)!important;
    gap:7px!important;
  }

  html.zg-mobile-ui .smart-home-size-select,
  html.zg-mobile-ui .smart-home-move-buttons{
    grid-column:2!important;
  }

  html.zg-mobile-ui .smart-home-size-select{
    height:42px!important;
  }

  html.zg-mobile-ui .smart-home-section-row button{
    min-height:40px!important;
  }
}

/* Phone composition: horizontal rails keep one image from consuming the viewport. */
@media (max-width:1366px){
  html.zg-mobile-ui .smart-home-hero-copy h1{
    font-size:clamp(29px,9vw,39px)!important;
  }

  html.zg-mobile-ui .smart-home-suggestion{
    grid-template-columns:32px minmax(0,1fr)!important;
  }

  html.zg-mobile-ui .smart-home-suggestion>i{
    grid-column:2!important;
  }

  html.zg-mobile-ui .smart-home-section-head{
    flex-direction:column!important;
  }

  html.zg-mobile-ui .smart-game-world-grid,
  html.zg-mobile-ui .smart-home-latest,
  html.zg-mobile-ui .smart-feed-grid,
  html.zg-mobile-ui .smart-home-completed{
    display:flex!important;
    grid-template-columns:none!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch;
    padding:1px 1px 8px!important;
    scrollbar-width:none!important;
  }

  html.zg-mobile-ui .smart-game-world-grid::-webkit-scrollbar,
  html.zg-mobile-ui .smart-home-latest::-webkit-scrollbar,
  html.zg-mobile-ui .smart-feed-grid::-webkit-scrollbar,
  html.zg-mobile-ui .smart-home-completed::-webkit-scrollbar{
    display:none;
  }

  html.zg-mobile-ui .smart-game-world-grid>.smart-game-world-card{
    flex:0 0 min(78vw,310px)!important;
    width:min(78vw,310px)!important;
    scroll-snap-align:start!important;
  }

  html.zg-mobile-ui .smart-home-latest>.media-card{
    flex:0 0 min(78vw,310px)!important;
    width:min(78vw,310px)!important;
    max-width:min(78vw,310px)!important;
    scroll-snap-align:start!important;
  }

  html.zg-mobile-ui .smart-feed-grid>.smart-feed-card{
    flex:0 0 min(78vw,310px)!important;
    width:min(78vw,310px)!important;
    max-width:min(78vw,310px)!important;
    scroll-snap-align:start!important;
  }

  html.zg-mobile-ui .smart-home-completed>.game-tile{
    flex:0 0 min(72vw,280px)!important;
    width:min(72vw,280px)!important;
    max-width:min(72vw,280px)!important;
    scroll-snap-align:start!important;
  }

  html.zg-mobile-ui .smart-opportunity-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  html.zg-mobile-ui .zg-mobile-more-links{
    grid-template-columns:1fr!important;
  }
}

/* Tablet composition: use the extra canvas instead of scaling phone cards up. */
/* Tablet now shares the phone composition below. */

@media (max-width:430px){
  html.zg-mobile-ui .topbar-inner>.brand span{
    display:none!important;
  }

  html.zg-mobile-ui .topbar-inner>.brand{
    width:40px!important;
    max-width:40px!important;
  }

  html.zg-mobile-ui .zg-mobile-bottom-nav{
    width:calc(100% - 12px)!important;
    border-radius:19px!important;
    padding:4px!important;
  }

  html.zg-mobile-ui .zg-mobile-nav-item{
    font-size:8px!important;
    padding-inline:2px!important;
  }

  html.zg-mobile-ui .smart-home-section{
    width:calc(100% - 18px)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .zg-mobile-more-backdrop,
  .zg-mobile-more-sheet{transition:none!important}
}

/* V3.7K.4 — visual-density pass from S23 Ultra / Tab S8 review. */
@media (max-width:1366px){
  html.zg-mobile-ui .topbar-inner>.brand{
    width:auto!important;
    max-width:165px!important;
  }

  html.zg-mobile-ui .topbar-inner>.brand span{
    display:block!important;
    min-width:0!important;
  }

  html.zg-mobile-ui .topbar-inner>.brand strong{
    display:block!important;
    max-width:112px!important;
    font-size:10.5px!important;
    letter-spacing:.01em!important;
  }

  html.zg-mobile-ui .topbar-inner>.brand small{
    display:none!important;
  }

  html.zg-mobile-ui .zg-mobile-account-shortcut{
    grid-area:member;
    justify-self:end;
    width:40px;
    min-width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid #30323a;
    border-radius:12px;
    background:#111218;
    color:#f6f7fa;
    text-decoration:none;
  }

  html.zg-mobile-ui .zg-mobile-account-shortcut svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  html.zg-mobile-ui .zg-mobile-account-shortcut span{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }

  html.zg-mobile-ui .smart-home-hero-copy h1{
    max-width:15ch!important;
    font-size:clamp(27px,7vw,34px)!important;
    line-height:1.08!important;
    letter-spacing:-.03em!important;
  }

  html.zg-mobile-ui .smart-home-hero-copy p{
    font-size:11.5px!important;
    line-height:1.7!important;
  }

  html.zg-mobile-ui .smart-home-hero-actions{
    margin-top:13px!important;
  }

  html.zg-mobile-ui .smart-home-hero-actions .btn{
    flex:0 1 auto!important;
    min-width:0!important;
    min-height:40px!important;
    padding:7px 11px!important;
    font-size:10.5px!important;
    border-radius:11px!important;
  }

  html.zg-mobile-ui .smart-home-status-card{
    min-height:116px!important;
    padding:14px!important;
  }

  html.zg-mobile-ui .smart-home-status-copy{
    inset-inline:13px!important;
    inset-block-end:12px!important;
  }

  html.zg-mobile-ui .smart-home-status-copy b{
    font-size:30px!important;
  }

  html.zg-mobile-ui .smart-home-status-art .status-game{
    width:52px!important;
    height:70px!important;
    border-radius:11px!important;
  }

  html.zg-mobile-ui .smart-home-status-art .status-game-0{
    inset-inline-end:11px!important;
    inset-block-start:8px!important;
  }

  html.zg-mobile-ui .smart-home-status-art .status-game-1{
    inset-inline-end:50px!important;
    inset-block-start:2px!important;
  }

  html.zg-mobile-ui .smart-home-status-art .status-game-2{
    inset-inline-end:84px!important;
    inset-block-start:15px!important;
  }

  html.zg-mobile-ui .smart-home-section-head h2,
  html.zg-mobile-ui .smart-home-section.size-large .smart-home-section-head h2{
    font-size:clamp(19px,4.7vw,24px)!important;
  }

  html.zg-mobile-ui .smart-home-section-head p{
    font-size:9.5px!important;
  }
}

@media (max-width:1366px){
  html.zg-mobile-ui .topbar-inner.shell{
    grid-template-columns:minmax(0,1fr) auto!important;
    column-gap:8px!important;
  }

  html.zg-mobile-ui .topbar-inner>.brand .brand-logo{
    width:37px!important;
    height:37px!important;
    flex-basis:37px!important;
  }

  html.zg-mobile-ui .topbar-inner>.brand strong{
    max-width:100px!important;
    font-size:10px!important;
  }

  html.zg-mobile-ui .smart-home-hero-inner{
    gap:12px!important;
    padding-block:22px!important;
  }

  html.zg-mobile-ui .smart-home-hero-copy h1{
    margin:7px 0 8px!important;
    font-size:clamp(26px,7.5vw,31px)!important;
  }

  html.zg-mobile-ui .smart-home-hero-copy p{
    font-size:11px!important;
    line-height:1.65!important;
  }

  html.zg-mobile-ui .smart-home-status-card{
    min-height:108px!important;
  }

  /* Latest videos: two compact cards instead of one oversized card per screen. */
  html.zg-mobile-ui .smart-home-latest{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }

  html.zg-mobile-ui .smart-home-latest>.media-card{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    flex:none!important;
  }

  html.zg-mobile-ui .smart-home-latest .media-card{
    border-radius:13px!important;
  }

  html.zg-mobile-ui .smart-home-latest .media-body{
    padding:8px!important;
  }

  html.zg-mobile-ui .smart-home-latest .media-body h3{
    margin:0 0 5px!important;
    font-size:10.5px!important;
    line-height:1.35!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  html.zg-mobile-ui .smart-home-latest .media-body p{
    display:none!important;
  }

  html.zg-mobile-ui .smart-home-latest .media-meta{
    margin-top:7px!important;
    gap:5px!important;
    font-size:7.5px!important;
    flex-wrap:wrap!important;
  }

  html.zg-mobile-ui .smart-home-latest .media-meta .btn,
  html.zg-mobile-ui .smart-home-latest .btn{
    min-height:34px!important;
    padding:5px 8px!important;
    font-size:8.5px!important;
    border-radius:9px!important;
  }

  html.zg-mobile-ui .smart-home-latest .pill{
    top:6px!important;
    right:6px!important;
    padding:3px 5px!important;
    font-size:7px!important;
  }

  /* Followed/editorial content: compact two-column cards. */
  html.zg-mobile-ui .smart-feed-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }

  html.zg-mobile-ui .smart-feed-grid>.smart-feed-card{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    flex:none!important;
    border-radius:13px!important;
  }

  html.zg-mobile-ui .smart-feed-cover{
    aspect-ratio:16/9!important;
  }

  html.zg-mobile-ui .smart-feed-copy{
    padding:8px!important;
  }

  html.zg-mobile-ui .smart-feed-copy>b{
    margin-top:4px!important;
    font-size:10.5px!important;
    line-height:1.35!important;
  }

  html.zg-mobile-ui .smart-feed-copy>p{
    display:none!important;
  }

  html.zg-mobile-ui .smart-feed-meta{
    display:none!important;
  }

  html.zg-mobile-ui .smart-game-world-grid>.smart-game-world-card{
    flex-basis:min(68vw,255px)!important;
    width:min(68vw,255px)!important;
  }
}

/* Keep very narrow phones readable without dropping the full brand name. */
@media (max-width:380px){
  html.zg-mobile-ui .topbar-inner>.brand strong{
    max-width:82px!important;
    font-size:9px!important;
  }

  html.zg-mobile-ui .smart-home-latest,
  html.zg-mobile-ui .smart-feed-grid{
    gap:7px!important;
  }
}

/* V3.7K.5 — resilient mobile navigation + compact home density. */
@media (max-width:1366px){
  html.zg-mobile-ui .topbar-inner.shell{
    grid-template-columns:minmax(0,1fr) auto auto!important;
    grid-template-areas:"brand menu member"!important;
    gap:6px!important;
  }

  html.zg-mobile-ui .zg-mobile-menu-shortcut{
    grid-area:menu;
    justify-self:end;
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    display:grid;
    place-items:center;
    border:1px solid #30323a;
    border-radius:12px;
    background:#111218;
    color:#f6f7fa;
    padding:0;
    cursor:pointer;
  }

  html.zg-mobile-ui .zg-mobile-menu-shortcut svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  html.zg-mobile-ui .zg-mobile-menu-shortcut span{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }

  html.zg-mobile-ui .zg-mobile-bottom-nav{
    z-index:1000!important;
    display:grid!important;
    visibility:visible!important;
    opacity:1;
  }

  html.zg-mobile-ui.zg-mobile-arena-open .zg-mobile-bottom-nav{
    display:none!important;
  }

  html.zg-mobile-ui:not(.zg-mobile-arena-open) body.zg-arena-open .zg-mobile-bottom-nav{
    display:grid!important;
  }

  html.zg-mobile-ui.zg-mobile-input-focus .zg-mobile-bottom-nav{
    display:grid!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  html.zg-mobile-ui.zg-mobile-arena-open.zg-mobile-input-focus .zg-mobile-bottom-nav{
    display:none!important;
  }
}

@media (max-width:1366px){
  html.zg-mobile-ui .topbar-inner>.brand{
    max-width:150px!important;
  }

  html.zg-mobile-ui .smart-home-empty{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    min-height:0!important;
    gap:8px!important;
    padding:13px!important;
    border-radius:14px!important;
    font-size:11px!important;
    line-height:1.45!important;
  }

  html.zg-mobile-ui .smart-home-empty button{
    min-height:38px!important;
    padding:6px 9px!important;
    border-radius:10px!important;
    font-size:9px!important;
  }

  html.zg-mobile-ui .smart-home-latest>.empty{
    grid-column:1/-1!important;
    min-height:92px!important;
    padding:14px!important;
    border-radius:14px!important;
    font-size:10px!important;
  }

  html.zg-mobile-ui .smart-opportunity-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  html.zg-mobile-ui .smart-opportunity{
    min-height:126px!important;
    padding:12px!important;
    border-radius:14px!important;
  }

  html.zg-mobile-ui .smart-opportunity-orb{
    width:36px!important;
    height:36px!important;
    inset-inline-end:10px!important;
    inset-block-start:10px!important;
    border-radius:12px!important;
  }

  html.zg-mobile-ui .smart-opportunity h3{
    max-width:72%!important;
    margin:15px 0 4px!important;
    font-size:14px!important;
    line-height:1.25!important;
  }

  html.zg-mobile-ui .smart-opportunity p{
    margin:4px 0!important;
    font-size:8px!important;
    line-height:1.4!important;
  }

  html.zg-mobile-ui .smart-opportunity-value{
    margin:9px 0 6px!important;
    font-size:22px!important;
  }

  html.zg-mobile-ui .smart-opportunity .btn{
    min-height:42px!important;
    padding:7px 10px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }

  html.zg-mobile-ui .smart-home-completed{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }

  html.zg-mobile-ui .smart-home-completed>.game-tile{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    flex:none!important;
    border-radius:13px!important;
  }

  html.zg-mobile-ui .smart-home-completed .game-tile .info{
    padding:7px!important;
  }

  html.zg-mobile-ui .smart-home-completed .game-tile h3{
    font-size:10px!important;
    line-height:1.3!important;
  }

  html.zg-mobile-ui .smart-home-completed .game-tile p{
    margin-top:3px!important;
    font-size:7.5px!important;
  }

  html.zg-mobile-ui .smart-game-world-grid>.smart-game-world-card{
    flex-basis:min(58vw,220px)!important;
    width:min(58vw,220px)!important;
  }
}

@media (max-width:380px){
  html.zg-mobile-ui .topbar-inner.shell{
    grid-template-columns:minmax(0,1fr) 38px 38px!important;
    gap:5px!important;
  }

  html.zg-mobile-ui .zg-mobile-menu-shortcut,
  html.zg-mobile-ui .zg-mobile-account-shortcut{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
  }

  html.zg-mobile-ui .smart-opportunity-grid{
    grid-template-columns:1fr!important;
  }
}


/* V3.7K.8 — physical centering for RTL mobile app navigation. */
@media (max-width:1366px){
  html.zg-mobile-ui .zg-mobile-bottom-nav{
    left:50%!important;
    right:auto!important;
    inset-inline-start:auto!important;
    inset-inline-end:auto!important;
    transform:translateX(-50%)!important;
  }

  html.zg-mobile-ui.zg-mobile-input-focus .zg-mobile-bottom-nav{
    transform:translate(-50%,calc(100% + 28px))!important;
  }

  html.zg-mobile-ui .zg-mobile-more-sheet{
    left:50%!important;
    right:auto!important;
    inset-inline-start:auto!important;
    inset-inline-end:auto!important;
    transform:translate(-50%,105%)!important;
  }

  html.zg-mobile-ui.zg-mobile-menu-open .zg-mobile-more-sheet{
    transform:translate(-50%,0)!important;
  }
}


/* V3.7K.9 — compact More sheet and overlay separation. */
@media (max-width:1366px){
  html.zg-mobile-ui .zg-mobile-more-sheet{
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    max-height:min(72dvh,620px)!important;
    transform:translateY(105%)!important;
    border-radius:22px 22px 0 0!important;
  }

  html.zg-mobile-ui.zg-mobile-menu-open .zg-mobile-more-sheet{
    transform:translateY(0)!important;
  }

  html.zg-mobile-ui.zg-mobile-menu-open .zg-mobile-bottom-nav,
  html.zg-mobile-ui.zg-mobile-menu-open .arena-dock,
  html.zg-mobile-ui.zg-mobile-menu-open .message-dock{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html.zg-mobile-ui .zg-mobile-more-head{
    min-height:54px!important;
    padding:8px 11px!important;
  }

  html.zg-mobile-ui .zg-mobile-more-head strong{
    margin-top:3px!important;
    font-size:15px!important;
  }

  html.zg-mobile-ui .zg-mobile-more-close{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    border-radius:11px!important;
    font-size:20px!important;
  }

  html.zg-mobile-ui .zg-mobile-more-scroll{
    padding:9px 10px 14px!important;
  }

  html.zg-mobile-ui .zg-mobile-more-links{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  html.zg-mobile-ui .zg-mobile-menu-link{
    min-height:58px!important;
    padding:8px 9px!important;
    border-radius:12px!important;
    gap:6px!important;
  }

  html.zg-mobile-ui .zg-mobile-menu-link strong{
    display:block!important;
    font-size:10.5px!important;
    line-height:1.35!important;
  }

  html.zg-mobile-ui .zg-mobile-menu-link small{
    margin-top:2px!important;
    font-size:7px!important;
    line-height:1.2!important;
  }

  html.zg-mobile-ui .zg-mobile-menu-link:after{
    font-size:16px!important;
  }

  html.zg-mobile-ui .zg-mobile-language{
    margin-top:8px!important;
    padding:9px!important;
    border-radius:12px!important;
  }

  html.zg-mobile-ui .zg-mobile-language select{
    min-height:40px!important;
    border-radius:10px!important;
    font-size:11px!important;
  }
}

@media (max-width:380px){
  html.zg-mobile-ui .zg-mobile-more-links{
    grid-template-columns:1fr!important;
  }
}


/* V3.7K.10 — production mobile hierarchy: top swipe nav, compact profile, horizontal content rails. */
@media (max-width:1366px){
  html.zg-mobile-ui body{
    padding-bottom:88px!important;
  }

  html.zg-mobile-ui body.zg-arena-open{
    padding-bottom:0!important;
  }

  /* Logged-in header stays one clean row: brand | more | member controls. */
  html.zg-mobile-ui .topbar-inner.shell{
    grid-template-columns:minmax(0,1fr) 40px auto!important;
    grid-template-areas:"brand menu member"!important;
    min-height:60px!important;
    padding:7px 0!important;
    align-items:center!important;
  }

  html.zg-mobile-ui .topbar-inner>.member-utilities{
    position:static!important;
    inset:auto!important;
    width:auto!important;
    min-width:0!important;
    height:40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    margin:0!important;
    transform:none!important;
  }

  html.zg-mobile-ui .member-utility-buttons{
    position:static!important;
    inset:auto!important;
    height:40px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    transform:none!important;
  }

  html.zg-mobile-ui .member-utility-btn,
  html.zg-mobile-ui .member-profile-shortcut,
  html.zg-mobile-ui .zg-mobile-menu-shortcut{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
    align-self:center!important;
    border-radius:11px!important;
    box-sizing:border-box!important;
  }

  html.zg-mobile-ui .member-profile-avatar{
    width:30px!important;
    height:30px!important;
  }

  html.zg-mobile-ui #memberLiveNotice[hidden]{
    display:none!important;
  }

  /* Navigation now lives directly below the header as a swipeable app rail. */
  html.zg-mobile-ui .zg-mobile-bottom-nav{
    position:sticky!important;
    top:60px!important;
    left:auto!important;
    right:auto!important;
    inset:auto!important;
    z-index:930!important;
    width:100%!important;
    min-height:52px!important;
    height:52px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    padding:4px 9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
    transform:none!important;
    border:0!important;
    border-top:1px solid rgba(255,255,255,.045)!important;
    border-bottom:1px solid rgba(255,255,255,.075)!important;
    border-radius:0!important;
    background:rgba(8,9,13,.97)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    backdrop-filter:blur(18px)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.24)!important;
  }

  html.zg-mobile-ui .zg-mobile-bottom-nav::-webkit-scrollbar{
    display:none!important;
  }

  html.zg-mobile-ui .zg-mobile-nav-item{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:82px!important;
    min-height:42px!important;
    height:42px!important;
    grid-template-columns:18px auto!important;
    grid-template-rows:1fr!important;
    place-items:center!important;
    align-content:center!important;
    gap:6px!important;
    padding:5px 9px!important;
    border-radius:12px!important;
    scroll-snap-align:start!important;
    font-size:8.5px!important;
  }

  html.zg-mobile-ui .zg-mobile-nav-item svg{
    width:17px!important;
    height:17px!important;
  }

  html.zg-mobile-ui .zg-mobile-nav-item>span{
    width:auto!important;
    max-width:92px!important;
    white-space:nowrap!important;
  }

  html.zg-mobile-ui .zg-mobile-nav-item.active:after{
    inset-block-end:2px!important;
    width:16px!important;
  }

  html.zg-mobile-ui.zg-mobile-input-focus .zg-mobile-bottom-nav{
    transform:none!important;
    opacity:1!important;
    pointer-events:auto!important;
  }

  html.zg-mobile-ui.zg-mobile-arena-open .zg-mobile-bottom-nav,
  html.zg-mobile-ui.zg-mobile-menu-open .zg-mobile-bottom-nav{
    display:none!important;
  }

  /* Member centers no longer reserve space for a bottom navigation bar. */
  html.zg-mobile-ui .member-center-popover{
    top:64px!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
  }

  /* Close glyph is optically centered everywhere on touch UI. */
  html.zg-mobile-ui :where(
    .zg-mobile-more-close,
    .member-center-close,
    .arena-close,
    .arena-picker-close,
    .arena-public-profile-x,
    .arena-member-modal-x
  ){
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    line-height:1!important;
    font-size:0!important;
    text-align:center!important;
  }

  html.zg-mobile-ui :where(
    .zg-mobile-more-close,
    .member-center-close,
    .arena-close,
    .arena-picker-close,
    .arena-public-profile-x,
    .arena-member-modal-x
  )::before{
    content:"×";
    display:block;
    font:500 22px/1 Inter,Arial,sans-serif!important;
    transform:translateY(-1px);
  }
}

@media (max-width:1366px){
  /* Smart Home: Latest is one horizontal rail at the current compact card size. */
  html.zg-mobile-ui .smart-home-latest{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    padding:2px 1px 9px!important;
    scrollbar-width:none!important;
  }

  html.zg-mobile-ui .smart-home-latest::-webkit-scrollbar{
    display:none!important;
  }

  html.zg-mobile-ui .smart-home-latest>.media-card{
    flex:0 0 min(47vw,190px)!important;
    width:min(47vw,190px)!important;
    max-width:190px!important;
    scroll-snap-align:start!important;
  }

  /* Followed content keeps two visible rows because it is the member's priority feed. */
  html.zg-mobile-ui .smart-feed-grid{
    display:grid!important;
    grid-template-rows:repeat(2,auto)!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(155px,min(47vw,190px))!important;
    grid-template-columns:none!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    padding:2px 1px 10px!important;
    scrollbar-width:none!important;
  }

  html.zg-mobile-ui .smart-feed-grid::-webkit-scrollbar{
    display:none!important;
  }

  html.zg-mobile-ui .smart-feed-grid>.smart-feed-card{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    scroll-snap-align:start!important;
  }

  /* Profile: identity first, editing controls compact, no desktop-sized cards. */
  html.zg-mobile-ui .profile-page{
    width:calc(100% - 16px)!important;
    max-width:none!important;
    padding-top:10px!important;
  }

  html.zg-mobile-ui .profile-page .profile-hero,
  html.zg-mobile-ui .profile-experience-v31 .profile-hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
    gap:10px!important;
    padding:12px!important;
    border-radius:17px!important;
    overflow:hidden!important;
  }

  html.zg-mobile-ui .profile-page .profile-main,
  html.zg-mobile-ui .profile-experience-v31 .profile-main{
    order:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    padding:0!important;
    text-align:start!important;
  }

  html.zg-mobile-ui .profile-main-toolbar{
    margin:0 0 7px!important;
    justify-content:flex-start!important;
  }

  html.zg-mobile-ui .profile-page .profile-main h1{
    font-size:clamp(23px,7vw,29px)!important;
    line-height:1.1!important;
    margin-block:5px 7px!important;
  }

  html.zg-mobile-ui .profile-page .profile-meta,
  html.zg-mobile-ui .profile-page .profile-badges{
    justify-content:flex-start!important;
    gap:5px!important;
  }

  html.zg-mobile-ui .profile-identity-visuals{
    order:2!important;
    width:100%!important;
    min-width:0!important;
    flex:0 0 auto!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:start!important;
    gap:8px!important;
  }

  html.zg-mobile-ui .profile-portrait-card,
  html.zg-mobile-ui .profile-identity-visuals>.profile-community-avatar-wrap{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:7px!important;
    border-radius:14px!important;
  }

  html.zg-mobile-ui .profile-portrait-frame{
    border-radius:11px!important;
  }

  html.zg-mobile-ui .profile-portrait-placeholder{
    padding:8px 5px!important;
    gap:4px!important;
  }

  html.zg-mobile-ui .profile-portrait-placeholder-mark{
    width:40px!important;
    height:40px!important;
    border-radius:12px!important;
  }

  html.zg-mobile-ui .profile-portrait-placeholder strong{
    font-size:8.5px!important;
  }

  html.zg-mobile-ui .profile-portrait-placeholder small,
  html.zg-mobile-ui .profile-community-avatar-wrap .avatar-upload-note{
    font-size:6.5px!important;
    line-height:1.45!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  html.zg-mobile-ui .profile-portrait-upload,
  html.zg-mobile-ui .profile-portrait-remove,
  html.zg-mobile-ui .profile-community-avatar-wrap .avatar-upload-btn{
    min-height:36px!important;
    padding:5px 6px!important;
    border-radius:9px!important;
    font-size:7.5px!important;
  }

  html.zg-mobile-ui .profile-community-avatar-wrap .profile-avatar{
    width:54px!important;
    height:54px!important;
    border-radius:16px!important;
  }

  html.zg-mobile-ui .profile-page .profile-hero-side{
    order:3!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:start!important;
    gap:8px!important;
  }

  html.zg-mobile-ui .profile-page .profile-hero-side>.btn{
    align-self:start!important;
    min-height:40px!important;
    padding:7px 11px!important;
    font-size:10px!important;
  }

  html.zg-mobile-ui .profile-page .profile-hero-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  html.zg-mobile-ui .profile-page .profile-hero-kpis article{
    padding:8px 9px!important;
    border-radius:11px!important;
  }

  html.zg-mobile-ui .profile-page .profile-hero-kpis b{
    font-size:16px!important;
  }

  html.zg-mobile-ui .profile-page .profile-hero-kpis span{
    margin-top:3px!important;
    font-size:7.5px!important;
  }

  html.zg-mobile-ui .profile-page :where(.panel,.glass){
    border-radius:15px!important;
  }

  html.zg-mobile-ui .profile-page>.panel,
  html.zg-mobile-ui .profile-page .profile-grid>.panel{
    padding:12px!important;
  }

  html.zg-mobile-ui .profile-page .profile-grid{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }

  html.zg-mobile-ui .profile-page h2{
    font-size:16px!important;
    line-height:1.3!important;
  }

  html.zg-mobile-ui .profile-page .section-head p{
    font-size:8.5px!important;
    line-height:1.55!important;
  }

  html.zg-mobile-ui .profile-security-strip,
  html.zg-mobile-ui .profile-games-strip{
    min-height:60px!important;
    padding:9px 10px!important;
    grid-template-columns:36px minmax(0,1fr) auto 20px!important;
    gap:8px!important;
  }

  html.zg-mobile-ui .profile-security-shield,
  html.zg-mobile-ui .profile-games-icon{
    width:34px!important;
    height:34px!important;
    border-radius:10px!important;
  }

  html.zg-mobile-ui .profile-security-strip-copy strong,
  html.zg-mobile-ui .profile-games-strip-copy strong{
    font-size:12px!important;
  }

  html.zg-mobile-ui .profile-security-strip-copy small,
  html.zg-mobile-ui .profile-games-strip-copy small{
    font-size:7.5px!important;
  }

  html.zg-mobile-ui .profile-page>.zg-account-tier-slot .elite-strip,
  html.zg-mobile-ui .profile-page>.zg-account-tier-slot .zg-verification-strip{
    min-height:62px!important;
    padding:9px 10px!important;
  }
}


/* V3.7K.11 — all core navigation in one swipe rail; no More sheet. */
@media (max-width:1366px){
  html.zg-mobile-ui .zg-mobile-menu-shortcut,
  html.zg-mobile-ui .zg-mobile-more-sheet,
  html.zg-mobile-ui .zg-mobile-more-backdrop{
    display:none!important;
  }

  html.zg-mobile-ui .zg-mobile-bottom-nav{
    gap:4px!important;
    padding:4px 8px!important;
  }

  html.zg-mobile-ui .zg-mobile-nav-item{
    min-width:76px!important;
    height:42px!important;
    min-height:42px!important;
    padding:5px 8px!important;
  }

  html.zg-mobile-ui .zg-mobile-nav-item>span{
    max-width:96px!important;
  }

  /* Game World uses the exact same compact header + swipe navigation as Home. */
  html.zg-mobile-ui .zg-world-site-header .topbar-inner>.nav{
    display:none!important;
  }

  html.zg-mobile-ui.zg-mobile-menu-open{
    overflow:auto!important;
  }
}

@media (max-width:1366px){
  /* Game World discovery cards become touch rails instead of tall vertical stacks. */
  html.zg-mobile-ui .gw-franchise-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding:1px 1px 8px!important;
  }

  html.zg-mobile-ui .gw-franchise-grid::-webkit-scrollbar{
    display:none!important;
  }

  html.zg-mobile-ui .gw-franchise-card{
    flex:0 0 min(78vw,320px)!important;
    width:min(78vw,320px)!important;
    min-height:104px!important;
    scroll-snap-align:start!important;
    grid-template-columns:66px minmax(0,1fr) 26px!important;
    padding:8px!important;
    border-radius:15px!important;
  }

  html.zg-mobile-ui .gw-franchise-art{
    height:86px!important;
  }

  /* World tools stay compact and horizontally swipeable. */
  html.zg-mobile-ui .gw-tools{
    top:112px!important;
    padding:8px 0 4px!important;
  }

  html.zg-mobile-ui .gw-search-wrap{
    grid-template-columns:minmax(0,1fr) 104px!important;
    gap:7px!important;
  }

  html.zg-mobile-ui .gw-search input,
  html.zg-mobile-ui .gw-filter{
    height:40px!important;
    border-radius:11px!important;
    font-size:10px!important;
  }

  html.zg-mobile-ui .gw-filter{
    min-width:0!important;
    width:104px!important;
    padding-inline:8px!important;
  }

  html.zg-mobile-ui .gw-section-tabs{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:6px!important;
    padding:7px 0 10px!important;
    scrollbar-width:none!important;
  }

  html.zg-mobile-ui .gw-section-tabs::-webkit-scrollbar{
    display:none!important;
  }

  html.zg-mobile-ui .gw-tab{
    flex:0 0 auto!important;
    padding:6px 10px!important;
    font-size:9px!important;
  }

  /* Latest content = one swipe rail with three cards visible per phone viewport. */
  html.zg-mobile-ui .gw-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    padding:0 0 18px!important;
    scrollbar-width:none!important;
  }

  html.zg-mobile-ui .gw-grid::-webkit-scrollbar{
    display:none!important;
  }

  html.zg-mobile-ui .gw-grid>.gw-card{
    flex:0 0 calc((100% - 14px)/3)!important;
    width:calc((100% - 14px)/3)!important;
    min-width:0!important;
    border-radius:12px!important;
    scroll-snap-align:start!important;
  }

  html.zg-mobile-ui .gw-card-cover{
    border-radius:0!important;
  }

  html.zg-mobile-ui .gw-card-type{
    top:5px!important;
    inset-inline-start:5px!important;
    padding:3px 5px!important;
    font-size:5.5px!important;
  }

  html.zg-mobile-ui .gw-card-body{
    padding:7px!important;
  }

  html.zg-mobile-ui .gw-card-kicker{
    min-height:12px!important;
    font-size:5.8px!important;
    line-height:1.2!important;
  }

  html.zg-mobile-ui .gw-card h3{
    margin:4px 0 0!important;
    font-size:8.5px!important;
    line-height:1.45!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  html.zg-mobile-ui .gw-card p,
  html.zg-mobile-ui .gw-card-meta{
    display:none!important;
  }

  html.zg-mobile-ui .gw-content-head{
    margin:13px 0 9px!important;
  }

  html.zg-mobile-ui .gw-content-head h2{
    font-size:20px!important;
  }
}


@media (max-width:1366px){
  html.zg-mobile-ui .zg-mobile-nav-language{
    flex:0 0 auto!important;
    min-width:88px!important;
    height:42px!important;
    display:grid!important;
    grid-template-columns:18px minmax(0,1fr)!important;
    align-items:center!important;
    gap:5px!important;
    padding:4px 7px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.025)!important;
  }

  html.zg-mobile-ui .zg-mobile-nav-language>span{
    font-size:13px!important;
    line-height:1!important;
  }

  html.zg-mobile-ui .zg-mobile-nav-language select{
    width:100%!important;
    min-width:0!important;
    height:32px!important;
    padding:0 3px!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:#c9ccd5!important;
    font:800 8.5px/1 Cairo,Inter,sans-serif!important;
  }
}


/* V3.7K.13 — use the real site navigation as the mobile swipe rail.
   This avoids duplicate/injected navigation and keeps Home + Game World identical. */
@media (max-width:1366px){
  html.zg-mobile-ui .zg-mobile-bottom-nav,
  html.zg-mobile-ui .zg-mobile-menu-shortcut,
  html.zg-mobile-ui .zg-mobile-more-sheet,
  html.zg-mobile-ui .zg-mobile-more-backdrop{
    display:none!important;
  }

  html.zg-mobile-ui .topbar-inner.shell{
    width:100%!important;
    min-height:108px!important;
    padding:6px var(--zg-mobile-edge) 0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:52px 50px!important;
    grid-template-areas:
      "brand member"
      "nav nav"!important;
    gap:0 8px!important;
    align-items:center!important;
  }

  html.zg-mobile-ui .topbar-inner>.brand{
    grid-area:brand!important;
    min-width:0!important;
    align-self:center!important;
  }

  html.zg-mobile-ui .topbar-inner>.member-utilities,
  html.zg-mobile-ui .zg-mobile-account-shortcut{
    grid-area:member!important;
    align-self:center!important;
    justify-self:end!important;
  }

  html.zg-mobile-ui #mainNav{
    grid-area:nav!important;
    width:100%!important;
    height:50px!important;
    min-height:50px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    margin:0!important;
    padding:4px 0 5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    border-top:1px solid rgba(255,255,255,.045)!important;
    border-bottom:1px solid rgba(255,255,255,.065)!important;
    background:transparent!important;
  }

  html.zg-mobile-ui #mainNav::-webkit-scrollbar{
    display:none!important;
  }

  html.zg-mobile-ui #mainNav>a{
    flex:0 0 auto!important;
    min-width:82px!important;
    min-height:40px!important;
    height:40px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:1px!important;
    margin:0!important;
    padding:4px 9px!important;
    border:1px solid transparent!important;
    border-radius:12px!important;
    background:transparent!important;
    color:#d6d8df!important;
    font:900 9.5px/1.15 Cairo,Inter,sans-serif!important;
    text-decoration:none!important;
    white-space:nowrap!important;
    scroll-snap-align:start!important;
    box-sizing:border-box!important;
  }

  html.zg-mobile-ui #mainNav>a small{
    display:block!important;
    margin:0!important;
    color:#858996!important;
    font:700 6.5px/1 Inter,Arial,sans-serif!important;
    white-space:nowrap!important;
  }

  html.zg-mobile-ui #mainNav>a.active,
  html.zg-mobile-ui #mainNav>a[aria-current="page"]{
    border-color:rgba(255,78,101,.18)!important;
    background:linear-gradient(145deg,rgba(239,35,60,.16),rgba(239,35,60,.045))!important;
    color:#fff!important;
  }

  html.zg-mobile-ui #mainNav>.language-switcher{
    flex:0 0 auto!important;
    min-width:92px!important;
    height:40px!important;
    margin:0!important;
    padding:4px 7px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.025)!important;
    scroll-snap-align:start!important;
  }

  html.zg-mobile-ui #mainNav>.language-switcher .language-switcher-copy>small{
    display:none!important;
  }

  html.zg-mobile-ui #mainNav>.language-switcher select{
    width:64px!important;
    min-width:64px!important;
    height:30px!important;
    padding:0 3px!important;
    border:0!important;
    background:transparent!important;
    color:#cfd2da!important;
    font-size:8px!important;
  }

  html.zg-mobile-ui .member-center-popover{
    top:112px!important;
  }
}

@media (max-width:1366px){
  html.zg-mobile-ui .topbar-inner.shell{
    min-height:106px!important;
    grid-template-rows:52px 48px!important;
  }

  html.zg-mobile-ui #mainNav{
    height:48px!important;
    min-height:48px!important;
  }

  html.zg-mobile-ui #mainNav>a{
    min-width:78px!important;
    height:39px!important;
    min-height:39px!important;
    padding-inline:8px!important;
    font-size:9px!important;
  }
}


/* V3.7K.14 — signed-in members must never see guest-only Join/Login items. */
@media (max-width:1366px){
  html.zg-mobile-ui #mainNav>a[hidden],
  html.zg-mobile-ui #mainNav>#joinNavLink[style*="display: none"],
  html.zg-mobile-ui #mainNav>#memberNavLink[style*="display: none"]{
    display:none!important;
  }
}


/* V3.7K.15 — mobile-only dense swipe rails.
   Desktop/tablet-desktop presentation is intentionally untouched. */
@media (max-width:1366px){
  /* Game World / Latest: preserve 3-across density, but use two swipeable rows. */
  html.zg-mobile-ui .gw-grid{
    display:grid!important;
    grid-template-rows:repeat(2,auto)!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:calc((100% - 14px)/3)!important;
    align-items:stretch!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:0 0 14px!important;
    scrollbar-width:none!important;
  }

  html.zg-mobile-ui .gw-grid::-webkit-scrollbar{
    display:none!important;
  }

  html.zg-mobile-ui .gw-grid>.gw-card{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
    scroll-snap-align:start!important;
  }

  /* Dedicated Completed Games: four rows, horizontal discovery, newest starts at the RTL edge. */
  html.zg-mobile-ui .completed-grid{
    display:grid!important;
    grid-template-rows:repeat(4,auto)!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(42vw,176px)!important;
    align-items:stretch!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:2px 2px 14px!important;
    scrollbar-width:none!important;
  }

  html[dir="rtl"].zg-mobile-ui .completed-grid{
    direction:rtl!important;
  }

  html.zg-mobile-ui .completed-grid::-webkit-scrollbar{
    display:none!important;
  }

  html.zg-mobile-ui .completed-grid>.game-tile{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    scroll-snap-align:start!important;
  }

  html.zg-mobile-ui .completed-grid .game-poster{
    aspect-ratio:16/9!important;
    min-height:0!important;
  }
}

/* Tablet keeps the phone navigation and stacking, with a wider reading canvas. */
@media (min-width:700px) and (max-width:1366px){
 html.zg-mobile-ui{--zg-mobile-nav-h:70px}
 html.zg-mobile-ui .smart-home-section{width:calc(100% - 48px)!important;max-width:980px!important;margin-inline:auto!important}
 html.zg-mobile-ui .zg-mobile-bottom-nav{max-width:760px!important;margin-inline:auto!important}
 html.zg-mobile-ui .zg-mobile-nav-item{font-size:11px!important;min-height:52px!important}
}