/* ==========================================================================
   bb-desktop.css v7 — DESKTOP-ONLY fixes for BullBett (H5 app)
   --------------------------------------------------------------------------
   Complements the built-in html.bb-desk layout (248px sidebar + content
   offset, rem pinned 37.5px) injected by serve_1ceo.py.
   ALL rules scoped to `html.bb-desk` inside @media (min-width:1024px) —
   cannot affect phones/tablets or any JS/game behaviour.
   Revert: remove the <link> to this file from serve_1ceo.py LOGO_HEAD.
   ========================================================================== */
@media (min-width: 1024px) {
  /* Sidebar: hide duplicated Sign In row (header already has pills). */
  html.bb-desk .logo-no-token .right { display: none !important; }

  /* Header: hide burger — sidebar is permanently open on desktop. */
  html.bb-desk .oneHead .header-left .menu-icon { display: none !important; }

  /* Hide mobile "Download App" strip on desktop. */
  html.bb-desk .down-app-line { display: none !important; }

  /* Keep swipe/drawer layers aligned with the content region. */
  html.bb-desk .wraper-box,
  html.bb-desk .pageEcho {
    left: 248px !important;
    width: calc(100% - 248px) !important;
    right: auto !important;
    transform: none !important;
  }

  /* ----------------------------------------------------------------------
     Section grids: .PlayedRecently sections become row-wrap flex grids.
     Every card (INCLUDING the trailing View All tile) follows the same
     flex rules: grows to fill the row, capped at ~3rem so sections with
     few games keep normal card size. View All is a plain .gameItem, so
     identical size/shape as its neighbours is automatic.
     ---------------------------------------------------------------------- */
  html.bb-desk .PlayedRecently {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    max-height: none !important;
    overflow-x: visible !important;
    align-content: flex-start !important;
  }
  html.bb-desk .PlayedRecently .gameItem {
    flex: 1 0 auto !important;
    min-width: 2.48rem !important;
    max-width: 3rem !important;
  }
  html.bb-desk .PlayedRecently .gameItemBig {
    flex: 1 0 auto !important;
    min-width: 5.01333rem !important;
    max-width: 6.4rem !important;
  }
}

/* ==========================================================================
   v8 — /tabGame (Game Lobby) desktop fixes
   --------------------------------------------------------------------------
   - Page is a full-bleed view (not .publick-page): offset it by the sidebar
     width so it lines up with the rest of the desktop shell.
   - Its grids are ALSO .PlayedRecently, but rendered as display:grid — the
     row-wrap fix needs display:flex first, otherwise items spread into 3
     giant spread columns on desktop.
   ========================================================================== */
@media (min-width: 1024px) {
  html.bb-desk .twoGamePageBox {
    padding-left: 248px !important;
    box-sizing: border-box !important;
  }
  html.bb-desk .twoGamePage .PlayedRecently {
    display: flex !important;
  }
}

/* ==========================================================================
   v9 — Banner slider: bigger + COMPLETE image on desktop
   --------------------------------------------------------------------------
   Problem: .swipePage is forced to aspect 375/254 (~1.48) with
   object-fit:cover, so wider promo images (real ratios 1.74 - 2.83) get
   their sides cropped ~15-48%.
   Fix (desktop only): widen the slider box to 720px with a ~2:1 box and
   switch slides to object-fit:contain -> the FULL banner image is always
   visible. Slight letterboxing on the widest slides is expected.
   Mobile (<1024px): untouched.
   ========================================================================== */
@media (min-width: 1024px) {
  html.bb-desk .swipePage {
    width: min(100% - 1.01333rem, 720px) !important;
    max-width: 720px !important;
    aspect-ratio: 2 / 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html.bb-desk .swipePage .van-swipe-item img,
  html.bb-desk .swipePage .van-image__img {
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* v9b: swipeBox must inherit banner box height so img height:100% resolves to 360px */
@media (min-width:1024px){
html.bb-desk .swipePage{overflow:hidden !important;}
html.bb-desk .swipePage .swipeBox{height:100% !important;}
}

/* v9c: absolute-fill inner chain — % heights don't resolve against aspect-ratio box */
@media (min-width:1024px){
html.bb-desk .swipePage{position:relative !important;}
html.bb-desk .swipePage .swipeBox,
html.bb-desk .swipePage .van-swipe{position:absolute !important;top:0;left:0;right:0;bottom:0;width:100% !important;height:auto !important;}
html.bb-desk .swipePage .van-swipe__track,
html.bb-desk .swipePage .van-swipe-item,
html.bb-desk .swipePage .van-image{height:100% !important;}
html.bb-desk .swipePage .van-image__img{height:100% !important;width:100% !important;object-fit:contain !important;}
}

/* v9d: .swipeBox has aspect-ratio:375/254 which overrides abs top/bottom — reset it */
@media (min-width:1024px){
html.bb-desk .swipePage .swipeBox,
html.bb-desk .swipePage .van-swipe{aspect-ratio:auto !important;}
}

/* v12: bigger banner — 960px wide, 1.9:1 aspect (matches majority of slides => largest complete render) */
@media (min-width:1024px){
html.bb-desk .swipePage{width:min(960px,calc(100% - 32px)) !important;max-width:960px !important;aspect-ratio:19/10 !important;margin-left:auto !important;margin-right:auto !important;}
}

/* v13: no empty space — image fills entire box (width ~1100px, shorter 2.2:1) */
@media (min-width:1024px){
html.bb-desk .swipePage{width:min(1100px,calc(100% - 24px)) !important;max-width:1100px !important;aspect-ratio:11/5 !important;}
html.bb-desk .swipePage .van-image__img{object-fit:fill !important;background:none !important;}
}

/* v14: out-specify inline bb-desk object-fit:contain (same spec, later sheet) */
@media (min-width:1024px){
html.bb-desk body .swipePage .van-swipe-item .van-image__img,
html.bb-desk body .swipePage .van-swipe-item img{object-fit:fill !important;background:none !important;}
}

/* v15: same width 1100px, shorter height (3.2:1) */
@media (min-width:1024px){
html.bb-desk .swipePage{aspect-ratio:16/5 !important;}
}