/* Fabraka homepage visual cleanup — one message, one card identity, one job per section. */

html[data-ui-mode="modern"] body.platform-home.home-v2 .brand-word{
  justify-content:center!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .brand-word small{
  display:block!important;
  margin-top:6px!important;
  color:#c7cedb!important;
  font-size:8px!important;
  line-height:1.25!important;
  font-weight:650!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}

/*
  Older homepage layers used generated marketing copy around the hero, feature
  strip and lower section. The live screenshots proved that those pseudo nodes
  can survive later markup changes and visually concatenate with the approved
  copy. The final layer owns all visible text on these surfaces, so generated
  textual pseudo-elements are explicitly retired here.
*/
html[data-ui-mode="modern"] body.platform-home.home-v2 .brand-word::before,
html[data-ui-mode="modern"] body.platform-home.home-v2 .brand-word::after,
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-copy::before,
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-copy::after,
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-lead::before,
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-lead::after,
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-actions::before,
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-actions::after,
html[data-ui-mode="modern"] body.platform-home.home-v2 #joinGame::before,
html[data-ui-mode="modern"] body.platform-home.home-v2 #joinGame::after,
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-section::before,
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-section::after,
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-grid::before,
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-grid::after,
html[data-ui-mode="modern"] body.platform-home.home-v2 .game-card::before,
html[data-ui-mode="modern"] body.platform-home.home-v2 .game-card::after,
html[data-ui-mode="modern"] body.platform-home.home-v2 .feature-strip::before,
html[data-ui-mode="modern"] body.platform-home.home-v2 .feature-strip::after,
html[data-ui-mode="modern"] body.platform-home.home-v2 .quick-section::before,
html[data-ui-mode="modern"] body.platform-home.home-v2 .quick-section::after,
html[data-ui-mode="modern"] body.platform-home.home-v2 .quick-head::before,
html[data-ui-mode="modern"] body.platform-home.home-v2 .quick-head::after,
html[data-ui-mode="modern"] body.platform-home.home-v2 .quick-head h2::before,
html[data-ui-mode="modern"] body.platform-home.home-v2 .quick-head h2::after{
  content:none!important;
  display:none!important;
}

/* Retire stale real nodes from older premium-home iterations if a runtime or a
   cached document still contains them. The current approved markup does not
   depend on any of these nodes. */
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-micro,
html[data-ui-mode="modern"] body.platform-home.home-v2 .eyebrow,
html[data-ui-mode="modern"] body.platform-home.home-v2 .modern-hero-badges,
html[data-ui-mode="modern"] body.platform-home.home-v2 .modern-stage-sign,
html[data-ui-mode="modern"] body.platform-home.home-v2 .modern-community-strip,
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-copy > p:not(.hero-lead),
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .quick-head > a,
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .quick-grid > :not(.visual-step),
html[data-ui-mode="modern"] body.platform-home.home-v2 .feature-strip > :not(.feature){
  display:none!important;
}

html[data-ui-mode="modern"] body.platform-home.home-v2 .stack-card.front{
  gap:0!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .stack-card.front img{
  width:94px!important;
  height:94px!important;
}

/*
  The four poster artworks already carry each game's complete visual identity.
  Rendering a second SVG mark + text lockup on top of that artwork caused the
  doubled names visible in the production screenshots, especially on phones.
*/
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-grid .game-card .game-mark-image,
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-grid .game-card .game-title-lockup{
  display:none!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-grid .game-card .game-art{
  opacity:1!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-grid .game-card .game-shade{
  background:linear-gradient(180deg,transparent 0 58%,rgba(3,7,17,.10) 78%,rgba(3,7,17,.28) 100%)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-grid .game-card .game-card-inner{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  display:block!important;
  pointer-events:none!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-grid .game-card .game-go{
  z-index:4!important;
  pointer-events:auto!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-grid .game-card .meta{
  position:absolute!important;
  right:12px!important;
  bottom:12px!important;
  z-index:4!important;
  pointer-events:auto!important;
}

/* The lower area is instructional now, not a second copy of the game grid. */
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .quick-head{
  justify-content:center!important;
  margin:9px 4px 12px!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .quick-head h2{
  display:block!important;
  margin:0!important;
  font-size:19px!important;
  line-height:1.35!important;
  text-align:center!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .quick-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .visual-step{
  min-height:92px!important;
  padding:14px 16px!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  border:1px solid rgba(139,166,222,.22)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(8,24,52,.90),rgba(5,17,39,.88))!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.03)!important;
  text-align:right!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .step-number{
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,213,92,.44)!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,rgba(255,206,62,.20),rgba(135,90,20,.14))!important;
  color:#ffd35a!important;
  font-size:19px!important;
  font-weight:900!important;
  box-shadow:0 7px 18px rgba(0,0,0,.20)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .visual-step b{
  display:block!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:900!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .visual-step small{
  display:block!important;
  margin-top:5px!important;
  color:#aeb8ca!important;
  font-size:9.5px!important;
  line-height:1.6!important;
}

/* The full trusted business footer is part of the homepage again. */
html[data-ui-mode="modern"] body.platform-home.home-v2 .fbrkh-site-footer{
  position:relative!important;
  z-index:2!important;
}

@media (max-width:1050px) and (min-width:701px){
  html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .quick-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (max-width:700px){
  html[data-ui-mode="modern"] body.platform-home.home-v2 .brand-word small{
    margin-top:4px!important;
    max-width:165px!important;
    font-size:6.6px!important;
    line-height:1.15!important;
    text-align:center!important;
  }

  /* Keep the phone home intentionally short; the bottom nav exposes the two primary actions. */
  html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps{
    display:none!important;
  }

  /* 86px poster strips hid most of the game name and the explanatory line baked
     into each approved artwork. Give every game a real poster ratio on phones,
     so Fbrkha/Qadha/Khaltaha/Top10 keep the same identity users see on desktop. */
  html[data-ui-mode="modern"] body.platform-home.home-v2 #games.games-section{
    width:100%!important;
    max-width:100%!important;
    padding-inline:13px!important;
    box-sizing:border-box!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 #games .games-grid{
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:11px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 #games .games-grid .game-card{
    width:100%!important;
    min-width:0!important;
    min-height:190px!important;
    height:auto!important;
    aspect-ratio:3 / 2!important;
    border-radius:15px!important;
    overflow:hidden!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 #games .games-grid .game-card .game-art{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 #games .games-grid .game-card .game-card-inner{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 #games .games-grid .game-card .game-shade{
    background:linear-gradient(180deg,rgba(3,7,17,.02) 0 58%,rgba(3,7,17,.12) 78%,rgba(3,7,17,.34) 100%)!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 #games .games-grid .game-card .game-go{
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
  }

  /* Fixed mobile navigation must never cover trust, legal or contact information. */
  html[data-ui-mode="modern"] body.platform-home.home-v2 .fbrkh-site-footer{
    padding-bottom:calc(86px + env(safe-area-inset-bottom))!important;
  }
}