/* ========================================================================
   BOMBARERA V69 — HOME CLEAN HERO / LOWER ART
   Goal: keep the desktop home hub inside the shared header/footer viewport.
   The old Continue card stays removed from the visual hierarchy; Story remains
   available from the primary Story tile. No JS timers or resize loops.
   ======================================================================== */

/* The shared shell already owns the viewport. The home screen must use the
   app's remaining height, not create a second 100dvh surface inside it. */
body.ui-v45:has(#screenMenu:not(.hidden)) > .app,
body.ui-v45:has(#screenMenu:not(.hidden)) #screenMenu{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
}

#screenMenu .home-hub-v45{
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}

/* V68 trial: remove the large duplicate Story CTA. */
#screenMenu .home-v23__continue{
  display:none!important;
}

/* V69: the duplicated story progress strip is removed from the hero.
   Progress remains visible on the Story tile / inside Story itself. */
#screenMenu .home-v12__hero p{
  margin-bottom:0!important;
}

/* Frame the lower half of the key art. With cover cropping this keeps more of
   the hero/foreground visible instead of spending the crop on the sky. */
#screenMenu .home-v12__art{
  background-position:66% 100%!important;
}

/* Short desktop / laptop viewport (includes a 1366x768 browser with its UI).
   This is intentionally density-aware rather than scaled with transforms, so
   text stays crisp and hit targets keep normal browser behaviour. */
@media (min-width:1051px) and (max-height:760px){
  #screenMenu .home-hub-v45{
    padding:22px max(24px,calc((100vw - 1320px)/2)) 10px!important;
    gap:14px!important;
  }

  /* Keep the reward card in the top-right of the scene without consuming flow. */
  body.ui-v45:has(#screenMenu:not(.hidden)) .daily-reward-float{
    top:8px!important;
  }

  #screenMenu .home-v12__hero{
    width:min(570px,48vw)!important;
    padding-top:0!important;
  }
  #screenMenu .home-v12__season{
    margin-bottom:7px!important;
    font-size:11px!important;
    line-height:1.35!important;
  }
  #screenMenu .home-v12__hero h1{
    font-size:clamp(48px,4.35vw,60px)!important;
    line-height:.98!important;
  }
  #screenMenu .home-v12__hero p{
    margin-top:8px!important;
    font-size:17px!important;
    line-height:1.35!important;
  }

  #screenMenu .home-v12__dock{
    margin-top:auto!important;
  }
  #screenMenu .home-section-head-v45{
    margin-bottom:9px!important;
  }
  #screenMenu .home-section-head-v45 h2{
    font-size:20px!important;
    line-height:1.15!important;
  }
  #screenMenu .home-v12__modes{
    gap:12px!important;
  }
  #screenMenu .home-v12__mode{
    height:142px!important;
    min-height:142px!important;
  }
  #screenMenu .home-v12__thumb{
    height:78px!important;
  }
  #screenMenu .home-v12__body{
    height:68px!important;
    padding:8px 10px!important;
    grid-template-columns:34px minmax(0,1fr) 18px!important;
    gap:8px!important;
  }
  #screenMenu .home-v12__mode-icon{
    width:34px!important;
    height:34px!important;
  }
  #screenMenu .home-v12__mode-icon img{
    width:27px!important;
    height:27px!important;
  }
  #screenMenu .home-v12__mode-copy{
    gap:2px!important;
  }
  #screenMenu .home-v12__mode-copy b{
    font-size:17px!important;
    line-height:1.15!important;
  }
  #screenMenu .home-v12__mode-copy small{
    font-size:11px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  #screenMenu .home-v23__mode-status{
    top:6px!important;
    right:6px!important;
    min-height:23px!important;
    padding:2px 8px!important;
  }
  #screenMenu .home-v23__mode-status b{
    font-size:11px!important;
  }

  #screenMenu .home-v12__secondary{
    gap:10px!important;
    margin-top:9px!important;
  }
  #screenMenu .home-v12__secondary button{
    width:180px!important;
    height:38px!important;
    min-height:38px!important;
    grid-template-columns:22px minmax(0,1fr) 18px!important;
    gap:7px!important;
    padding-inline:9px!important;
  }
  #screenMenu .home-v12__secondary-art{
    width:22px!important;
    height:22px!important;
  }
  #screenMenu .home-v12__secondary button>span:nth-child(2){
    font-size:12px!important;
  }
}

/* Very short desktop windows get one additional density step. */
@media (min-width:1051px) and (max-height:600px){
  #screenMenu .home-hub-v45{
    padding-top:14px!important;
    padding-bottom:7px!important;
    gap:9px!important;
  }
  body.ui-v45:has(#screenMenu:not(.hidden)) .daily-reward-float{
    top:6px!important;
    min-height:62px!important;
  }
  #screenMenu .home-v12__season{margin-bottom:4px!important;font-size:10px!important}
  #screenMenu .home-v12__hero h1{font-size:46px!important}
  #screenMenu .home-v12__hero p{margin-top:5px!important;font-size:15px!important;line-height:1.25!important}
  #screenMenu .home-section-head-v45{margin-bottom:6px!important}
  #screenMenu .home-v12__mode{height:124px!important;min-height:124px!important}
  #screenMenu .home-v12__thumb{height:66px!important}
  #screenMenu .home-v12__body{height:62px!important}
  #screenMenu .home-v12__secondary{margin-top:6px!important}
  #screenMenu .home-v12__secondary button{height:34px!important;min-height:34px!important}
}

/* ========================================================================
   BOMBARERA V70 — MODE CARD ART THROUGH TEXT PANEL
   Keep the artwork visible beneath the lower text area while preserving
   contrast. Pure CSS gradients only: no blur/backdrop-filter, no extra JS.
   ======================================================================== */

/* Let each mode artwork continue behind the complete card instead of ending
   above the text block. The base card color remains as a safe image fallback. */
#screenMenu .home-v12__thumb{
  inset:0!important;
  height:100%!important;
  background-position:center!important;
}

/* One continuous tonal ramp connects the illustration with the copy area.
   The bottom is dark enough for small metadata, but intentionally translucent. */
#screenMenu .home-v12__thumb::after{
  background:linear-gradient(
    180deg,
    rgba(2,7,17,.01) 0%,
    rgba(2,7,17,.04) 38%,
    rgba(3,10,23,.18) 54%,
    rgba(3,9,21,.56) 72%,
    rgba(3,9,21,.78) 100%
  )!important;
}

/* Replace the old almost-solid lower panel with a translucent readability
   gradient. Artwork remains visible under the icon, title and description. */
#screenMenu .home-v12__body{
  background:linear-gradient(
    180deg,
    rgba(3,10,23,.18) 0%,
    rgba(3,9,21,.52) 34%,
    rgba(3,9,21,.76) 72%,
    rgba(3,9,21,.86) 100%
  )!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* Keep copy crisp over bright parts of the illustrations without turning the
   whole lower half into a solid slab. */
#screenMenu .home-v12__mode-copy b{
  text-shadow:0 2px 4px rgba(0,0,0,.92),0 5px 14px rgba(0,0,0,.48)!important;
}
#screenMenu .home-v12__mode-copy small{
  color:#edf5ff!important;
  text-shadow:0 2px 4px rgba(0,0,0,.96),0 4px 10px rgba(0,0,0,.56)!important;
}
#screenMenu .home-v12__mode-arrow{
  text-shadow:0 2px 6px rgba(0,0,0,.88)!important;
}

/* On compact laptop layouts the art still fills the card; only the body
   dimensions from the existing adaptive rules change. */
@media (min-width:1051px) and (max-height:760px){
  #screenMenu .home-v12__thumb{height:100%!important}
}
@media (min-width:1051px) and (max-height:600px){
  #screenMenu .home-v12__thumb{height:100%!important}
}


/* ========================================================================
   BOMBARERA V71 — HOME QUICK ACTIONS / CLEAN MODE CARDS
   Support + promo now live directly below Daily Reward, using previously
   unused hero-side space. The mode dock is reserved for the four primary
   destinations, allowing them to breathe without increasing page height.
   ======================================================================== */

/* The thin bottom stripe was a mode-progress meter. Progress is already
   communicated by the status chip, so the duplicate meter is removed. */
#screenMenu .home-v12__mode::after{
  display:none!important;
  content:none!important;
}

/* Desktop: align the two quick actions to the Daily Reward card above. */
#screenMenu .home-v12__secondary--reward-stack{
  position:absolute!important;
  z-index:43!important;
  top:168px!important;
  right:max(24px,calc((100vw - 1320px)/2))!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  gap:8px!important;
  width:min(340px,calc(100vw - 48px))!important;
  margin:0!important;
}
#screenMenu .home-v12__secondary--reward-stack button{
  width:100%!important;
  max-width:none!important;
  height:44px!important;
  min-height:44px!important;
  grid-template-columns:28px minmax(0,1fr) 18px!important;
  gap:7px!important;
  padding:0 8px!important;
  border-radius:12px!important;
  box-shadow:0 10px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#screenMenu .home-v12__secondary--reward-stack .home-v12__secondary-art{
  width:28px!important;
  height:28px!important;
  border-radius:9px!important;
}
#screenMenu .home-v12__secondary--reward-stack button>span:nth-child(2){
  font-size:11px!important;
}
#screenMenu .home-v12__secondary--reward-stack button b{
  width:18px!important;
  height:18px!important;
  font-size:10px!important;
}

/* With the secondary row removed from the dock, give primary cards back
   vertical breathing room while keeping the whole home screen in one view. */
@media (min-width:1051px) and (max-height:760px){
  #screenMenu .home-v12__secondary--reward-stack{
    top:90px!important;
    right:max(24px,calc((100vw - 1320px)/2))!important;
    width:min(340px,calc(100vw - 48px))!important;
  }
  #screenMenu .home-v12__mode{
    height:158px!important;
    min-height:158px!important;
  }
  #screenMenu .home-v12__body{
    height:72px!important;
    padding:9px 11px 10px!important;
  }
  #screenMenu .home-v12__mode-icon{
    width:38px!important;
    height:38px!important;
  }
  #screenMenu .home-v12__mode-icon img{
    width:29px!important;
    height:29px!important;
  }
  #screenMenu .home-v12__mode-copy b{font-size:18px!important}
  #screenMenu .home-v12__mode-copy small{font-size:11px!important}
}

@media (min-width:1051px) and (max-height:600px){
  #screenMenu .home-v12__secondary--reward-stack{
    top:76px!important;
  }
  #screenMenu .home-v12__secondary--reward-stack button{
    height:38px!important;
    min-height:38px!important;
  }
  #screenMenu .home-v12__mode{
    height:136px!important;
    min-height:136px!important;
  }
  #screenMenu .home-v12__body{height:64px!important}
}

@media (max-width:1180px){
  #screenMenu .home-v12__secondary--reward-stack{
    right:18px!important;
    width:312px!important;
  }
}

@media (max-width:1050px){
  /* Two-column mode layout needs more vertical space, so keep quick actions
     compact and attached to the reward card instead of returning to the dock. */
  #screenMenu .home-v12__secondary--reward-stack{
    top:154px!important;
    right:14px!important;
    width:292px!important;
  }
  #screenMenu .home-v12__secondary--reward-stack button{
    height:40px!important;
    min-height:40px!important;
    grid-template-columns:25px minmax(0,1fr) 16px!important;
    padding-inline:7px!important;
  }
  #screenMenu .home-v12__secondary--reward-stack .home-v12__secondary-art{
    width:25px!important;
    height:25px!important;
  }
  #screenMenu .home-v12__secondary--reward-stack button>span:nth-child(2){font-size:10px!important}
}

@media (max-width:760px){
  #screenMenu .home-v12__secondary--reward-stack{
    top:136px!important;
    right:12px!important;
    width:250px!important;
    gap:6px!important;
  }
  #screenMenu .home-v12__secondary--reward-stack button{
    grid-template-columns:24px minmax(0,1fr)!important;
    height:38px!important;
    min-height:38px!important;
  }
  #screenMenu .home-v12__secondary--reward-stack button b{display:none!important}
  #screenMenu .home-v12__secondary--reward-stack .home-v12__secondary-art{
    width:24px!important;
    height:24px!important;
  }
}

@media (max-width:520px){
  #screenMenu .home-v12__secondary--reward-stack{
    top:132px!important;
    right:10px!important;
    width:190px!important;
    grid-template-columns:1fr!important;
  }
  #screenMenu .home-v12__secondary--reward-stack button{
    height:34px!important;
    min-height:34px!important;
  }
}


/* ========================================================================
   BOMBARERA V72 — HERO ART LIGHT BALANCE
   V71 was visually too dark on the left side of the key art. Keep enough
   contrast for the hero copy, but let the illustration remain clearly visible.
   ======================================================================== */

/* A very small exposure lift restores detail in the naturally darker forest
   without flattening the bright ice / lava areas on the right. */
#screenMenu .home-v12__art{
  filter:saturate(1.04) brightness(1.055)!important;
}

/* Replace the old near-opaque left and bottom grading with a softer cinematic
   veil. Darkness now exists mainly directly behind copy, then falls off fast. */
#screenMenu .home-v12__grade{
  background:
    radial-gradient(circle at 54% 54%,rgba(255,151,48,.09),transparent 24%),
    radial-gradient(circle at 83% 27%,rgba(90,163,255,.06),transparent 24%),
    linear-gradient(90deg,
      rgba(3,8,18,.55) 0%,
      rgba(3,8,18,.36) 18%,
      rgba(3,8,18,.19) 34%,
      rgba(3,8,18,.07) 48%,
      rgba(3,8,18,.015) 68%,
      rgba(3,8,18,.04) 100%),
    linear-gradient(180deg,
      rgba(2,6,14,.05) 0%,
      rgba(2,6,14,.015) 44%,
      rgba(2,6,14,.07) 66%,
      rgba(2,6,14,.34) 100%)!important;
}

/* The foundation also had a second strong lower vignette. Keep only enough
   separation for the mode cards and footer instead of masking the artwork. */
#screenMenu .home-v12::after{
  height:36%!important;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(2,7,17,.10) 38%,
    rgba(2,7,17,.48) 100%
  )!important;
}

/* Readability belongs to the typography, not to a black slab over the art. */
#screenMenu .home-v12__season{
  text-shadow:0 2px 8px rgba(0,0,0,.92),0 0 18px rgba(0,0,0,.35)!important;
}
#screenMenu .home-v12__hero h1{
  text-shadow:0 3px 8px rgba(0,0,0,.82),0 10px 28px rgba(0,0,0,.38)!important;
}
#screenMenu .home-v12__hero p{
  text-shadow:0 2px 5px rgba(0,0,0,.94),0 7px 18px rgba(0,0,0,.38)!important;
}

/* ========================================================================
   BOMBARERA V73 — PRIMARY MODE CARD SEPARATION
   V72 restored the hero artwork, but the four photographic mode cards could
   visually merge into that brighter scene. Separate the interactive layer
   with framing and depth instead of darkening either the page or card art.
   ======================================================================== */

/* Two-stage frame: a dark neutral keyline cuts the card out of any bright
   background; the accent border still identifies each destination. The outer
   shadow is deliberately compact so four cards remain a single clean row. */
#screenMenu .home-v12__mode{
  outline:1px solid rgba(2,7,16,.92)!important;
  outline-offset:2px!important;
  border-color:color-mix(in srgb,var(--accent) 72%,rgba(255,255,255,.14))!important;
  box-shadow:
    0 9px 22px rgba(0,0,0,.46),
    0 2px 7px rgba(0,0,0,.54),
    0 0 0 1px rgba(255,255,255,.045),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(2,7,16,.18)!important;
}

/* A restrained edge vignette improves silhouette recognition while keeping
   the artwork fully visible. It does not create another opaque text panel. */
#screenMenu .home-v12__thumb{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 22px rgba(1,5,12,.16)!important;
}

/* Hover/focus gets a clearer interactive lift without changing dimensions,
   preventing layout movement and keeping the one-screen composition intact. */
@media (hover:hover) and (pointer:fine){
  #screenMenu .home-v12__mode:hover,
  #screenMenu .home-v12__mode.is-v23-focus{
    outline-color:rgba(3,9,20,.98)!important;
    border-color:color-mix(in srgb,var(--accent) 92%,white 8%)!important;
    box-shadow:
      0 13px 30px rgba(0,0,0,.52),
      0 4px 10px rgba(0,0,0,.50),
      0 0 20px color-mix(in srgb,var(--accent) 18%,transparent),
      inset 0 1px 0 rgba(255,255,255,.13),
      inset 0 0 0 1px rgba(2,7,16,.14)!important;
  }
}

/* Touch layouts do not need the extra outline gap: keep the same separation
   using shadow only so narrow two/one-column grids retain every pixel. */
@media (max-width:760px){
  #screenMenu .home-v12__mode{
    outline-offset:1px!important;
    box-shadow:
      0 7px 18px rgba(0,0,0,.44),
      0 2px 6px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.09)!important;
  }
}