/* Mobile fixes for coreball.co — v8 (2026-04-16) */

/* ==========================================
   MOBILE LAYOUT: Stack right sidebar below game
   ========================================== */
@media(max-width:1024px){
  /* Force columns to stack vertically */
  .columns.mobile-column{
    display:flex!important;
    flex-direction:column!important;
  }

  /* Main content column: full width */
  .column.is-12-tablet.is-9-desktop,
  .columns.mobile-column>.column.is-9-desktop{
    width:100%!important;
    flex:none!important;
    order:1;
  }

  /* Right sidebar (Hot Games): full width, stacked BELOW main content */
  .column.is-12-tablet.is-3-desktop,
  .columns.mobile-column>.column.is-3-desktop{
    display:block!important;
    width:100%!important;
    flex:none!important;
    order:2;
    margin-top:20px;
    padding:0 10px;
  }

  /* Suggested games listing (sibling of columns, not inside right col):
     must render AFTER main content, not before it.
     Without this, its default order:0 puts it above order:1 main content. */
  .columns.mobile-column>.columns.is-multiline.listing{
    order:3!important;
    width:100%!important;
    flex:none!important;
  }

  /* Convert the vertical hot-games list to a horizontal scrollable strip on mobile */
  .column.is-3-desktop .columns.is-multiline.listing{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    gap:12px;
    padding-bottom:12px;
    scroll-snap-type:x mandatory;
  }

  /* Each hot-game card: fixed width, horizontal scroll items */
  .column.is-3-desktop .columns.is-multiline.listing>.column.is-12.show.grid1{
    flex:0 0 140px!important;
    width:140px!important;
    max-width:140px!important;
    scroll-snap-align:start;
    padding:0!important;
  }

  /* Hot games card thumbnail: square, proper size */
  .column.is-3-desktop .g-card-2{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .column.is-3-desktop .g-card-2 .pic{
    width:120px!important;
    height:120px!important;
    margin:0 auto 8px;
  }

  .column.is-3-desktop .g-card-2 .pic figure{
    width:100%;
    height:100%;
  }

  .column.is-3-desktop .g-card-2 .pic figure img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:12px;
  }

  .column.is-3-desktop .g-card-2 .g-info{
    padding:0!important;
    width:100%;
  }

  .column.is-3-desktop .g-card-2 .g-info .grid-title{
    font-size:12px!important;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .column.is-3-desktop .g-card-2 .g-info .rating{
    font-size:11px!important;
  }

  /* Section title for Hot Games on mobile */
  .column.is-3-desktop .section-title{
    margin-bottom:12px!important;
    padding-left:0!important;
    font-size:16px;
  }

  /* Hide scrollbar but keep functionality */
  .column.is-3-desktop .columns.is-multiline.listing::-webkit-scrollbar{
    height:4px;
  }
  .column.is-3-desktop .columns.is-multiline.listing::-webkit-scrollbar-track{
    background:rgba(255,255,255,0.05);
    border-radius:2px;
  }
  .column.is-3-desktop .columns.is-multiline.listing::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.15);
    border-radius:2px;
  }

  /* Sidebar: only show the header bar (logo+burger), hide categories */
  .sidebar{
    overflow:visible!important;
    z-index:100;
    width:auto!important;
    height:auto!important;
    position:static!important;
  }
  .sidebar .category_title{display:none!important}

  /* Side-menu hidden by default; shown when burger adds .show class (via scripts.js) */
  .sidebar .side-menu{display:none!important}
  .sidebar .side-menu.show{
    display:block!important;
    position:fixed!important;
    top:80px!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:200!important;
    background:#2b4450!important;
    overflow-y:scroll!important;
    -webkit-overflow-scrolling:touch;
    padding:12px 16px 80px!important;
    margin:0!important;
    height:auto!important;
    width:100%!important;
    max-height:none!important;
    overscroll-behavior:contain;
  }

  /* Force mCustomScrollbar wrapper to flow naturally so native scroll works */
  .sidebar .side-menu.show .mCustomScrollBox{
    position:static!important;
    overflow:visible!important;
    max-height:none!important;
    height:auto!important;
    min-height:100%!important;
  }
  .sidebar .side-menu.show .mCSB_container{
    position:static!important;
    overflow:visible!important;
    height:auto!important;
    top:auto!important;
  }
  .sidebar .side-menu.show .mCSB_scrollTools{display:none!important}
  .sidebar .side-menu.show .mCSB_draggerContainer{display:none!important}

  /* Lock body scroll when menu is open */
  body.menu-open{
    overflow:hidden!important;
    position:fixed!important;
    width:100%!important;
    height:100%!important;
  }

  /* Header bar fixed at top — lighter teal to match site bg */
  .sidebar .side-header{
    display:flex!important;
    visibility:visible!important;
    pointer-events:auto!important;
    position:fixed;top:0;left:0;right:0;
    z-index:201;
    background:#2b4450;
    height:80px;
  }
  .g-content{padding-top:80px}

  /* Fullscreen: CSS-based expand when .game-fullscreen is active */
  .game-iframe-container.game-fullscreen{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:100%!important;
    z-index:9999!important;
    background:#000!important;
    border-radius:0!important;
    margin:0!important;
    padding:0!important;
  }
  .game-iframe-container.game-fullscreen .game-iframe{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
  }
  .game-fullscreen-close{
    display:none;
    position:fixed;
    top:12px;
    right:12px;
    z-index:10000;
    background:rgba(0,0,0,0.7);
    color:#fff;
    border:none;
    border-radius:50%;
    width:40px;
    height:40px;
    font-size:20px;
    cursor:pointer;
    line-height:40px;
    text-align:center;
  }
  .game-fullscreen .game-fullscreen-close{display:block}

  /* Footer at bottom */
  .footer{
    position:relative!important;
    clear:both;
    width:100%!important;
  }
  .footer .menu-footer{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }
  .footer .menu-footer a{
    font-size:12px;
    padding:4px 8px;
  }

  /* Game iframe: proper sizing on mobile */
  .game-iframe-container{
    width:100%!important;
    max-width:100vw;
    overflow:hidden;
  }
  .game-iframe{
    width:100%!important;
    max-height:60vh;
  }
}

/* ==========================================
   AD BLOCKER: Prevent overlay/popup ads on mobile
   ========================================== */
@media(max-width:1024px){
  /* Block any dynamically injected overlays/popups from game iframes */
  body>div[style*="z-index"]:not(.master):not(.btn_up):not(#button-gotop),
  body>div[style*="position: fixed"]:not(.master):not(#button-gotop),
  body>div[style*="position:fixed"]:not(.master):not(#button-gotop),
  body>iframe[style*="z-index"],
  body>iframe[style*="position: fixed"],
  body>iframe[style*="position:fixed"],
  div[id*="ad-overlay"],
  div[id*="interstitial"],
  div[class*="ad-overlay"],
  div[class*="interstitial"],
  div[class*="popup-ad"],
  div[id*="popup-ad"]{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    width:0!important;
    height:0!important;
    position:absolute!important;
    left:-9999px!important;
  }
}

/* ==========================================
   NEW GAMES highlight (all viewports)
   ========================================== */
.side-menu .new-games-link{
  display:flex!important;
  align-items:center;
  gap:8px;
  padding:10px 15px!important;
  margin:0 8px 8px!important;
  background:linear-gradient(135deg,#51c2ce 0%,#3a9da8 100%);
  border-radius:12px;
  color:#fff!important;
  font-weight:600!important;
  font-size:14px;
  text-decoration:none;
  transition:transform .15s,box-shadow .15s;
  box-shadow:0 2px 8px rgba(81,194,206,0.3);
}
.side-menu .new-games-link:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(81,194,206,0.45);
  background:linear-gradient(135deg,#5dd4e0 0%,#42b1bc 100%);
}
.side-menu .new-games-link .ng-icon{
  font-size:16px;
  flex-shrink:0;
}
.side-menu .new-games-link .ng-badge{
  margin-left:auto;
  background:rgba(255,255,255,0.2);
  padding:2px 7px;
  border-radius:8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
}

/* Card grid fixes (all viewports) */
.g-card{overflow:hidden;position:relative;cursor:pointer}
.ct,.g-info{overflow:hidden}
.grid-title.ellipsis,.grid-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}