/* ========================================================================
   BOMBARERA V92 — TRUE FULL-WIDTH HOME HUB
   The home menu uses the whole available viewport on every desktop width.
   No legacy 1320px centering gutter remains on the header, hero, reward stack
   or primary mode grid. Spacing stays responsive instead of hard-coded.
   ======================================================================== */

:root{
  --home-v92-edge:clamp(18px,2vw,36px);
}

/* Shared product header: keep the shell full-width and align its contents to
   the same responsive edge as the menu itself. */
body.ui-v45[data-ui-context="menu"] > .header,
body.ui-v45:has(#screenMenu:not(.hidden)) > .header{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-left:var(--home-v92-edge)!important;
  padding-right:var(--home-v92-edge)!important;
}

body.ui-v45[data-ui-context="menu"] > .header .header__brand,
body.ui-v45[data-ui-context="menu"] > .header .header__right{
  margin-left:0!important;
  margin-right:0!important;
  max-width:none!important;
}

/* The app and menu are the viewport canvas, not a centered web-page column. */
body.ui-v45[data-ui-context="menu"] > .app,
body.ui-v45[data-ui-context="menu"] #screenMenu,
body.ui-v45:has(#screenMenu:not(.hidden)) > .app,
body.ui-v45:has(#screenMenu:not(.hidden)) #screenMenu{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
}

/* V45/V73 used calc((100vw - 1320px)/2), which produced the large empty
   gutters visible on wide monitors. Only the safe edge remains now. */
#screenMenu .home-hub-v45{
  width:100%!important;
  max-width:none!important;
  padding-left:var(--home-v92-edge)!important;
  padding-right:var(--home-v92-edge)!important;
}

/* Main hero stays readable but is anchored to the true left edge of the
   composition. It can breathe a little more on wide screens without becoming
   an overlong text line. */
#screenMenu .home-v12__hero{
  width:min(660px,46vw)!important;
  max-width:660px!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Right-side actions follow the same full-width geometry. */
body.ui-v45:has(#screenMenu:not(.hidden)) .daily-reward-float{
  right:var(--home-v92-edge)!important;
}
#screenMenu .home-v12__secondary--reward-stack{
  right:var(--home-v92-edge)!important;
}

/* Primary navigation always consumes all available horizontal room. */
#screenMenu .home-v12__dock,
#screenMenu .home-v12__modes{
  width:100%!important;
  max-width:none!important;
}
#screenMenu .home-v12__modes{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
#screenMenu .home-v12__mode{
  width:100%!important;
  max-width:none!important;
}

/* On large and ultra-wide monitors let card artwork use the extra room rather
   than leaving empty side oceans. Height scales gently, not proportionally. */
@media (min-width:1800px) and (min-height:760px){
  #screenMenu .home-v12__mode{
    height:clamp(172px,10.4vw,214px)!important;
    min-height:clamp(172px,10.4vw,214px)!important;
  }
  #screenMenu .home-v12__body{
    min-height:76px!important;
  }
  #screenMenu .home-v12__mode-copy b{font-size:clamp(18px,1.08vw,23px)!important}
  #screenMenu .home-v12__mode-copy small{font-size:clamp(11px,.68vw,14px)!important}
}

/* Laptop/tablet landscape: still edge-to-edge, with the existing two-column
   responsive layout restored where four columns would become unreadable. */
@media (max-width:1050px){
  :root{--home-v92-edge:clamp(12px,1.8vw,18px)}
  #screenMenu .home-v12__hero{
    width:min(520px,58vw)!important;
    max-width:520px!important;
  }
  #screenMenu .home-v12__modes{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:760px){
  :root{--home-v92-edge:12px}
  #screenMenu .home-v12__hero{
    width:100%!important;
    max-width:none!important;
  }
  #screenMenu .home-v12__modes{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:520px){
  :root{--home-v92-edge:10px}
  #screenMenu .home-v12__modes{
    grid-template-columns:1fr!important;
  }
}