/* r828 — visual QA polish after owner review
   Clear official logo, complete text, premium non-human TV scene,
   Store appears only in the top header, and mobile cards never clip copy. */

html[data-home-version="r828-visual-polish"]{
  --r828-purple:#6f2bd9;
  --r828-purple-2:#8a36ef;
  --r828-ink:#281345;
  --r828-muted:#655873;
}

/* Header/logo — keep the approved asset prominent and readable. */
html[data-home-version="r828-visual-polish"] .home-topbar{
  min-height:78px!important;
  padding-block:6px!important;
}
html[data-home-version="r828-visual-polish"] .home-topbar .brand{
  width:118px!important;
  min-width:118px!important;
  height:72px!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  background:transparent!important;
}
html[data-home-version="r828-visual-polish"] .home-topbar .brand-mark{
  width:auto!important;
  max-width:none!important;
  height:70px!important;
  max-height:70px!important;
  object-fit:contain!important;
  background:transparent!important;
  filter:contrast(1.05) saturate(1.08) drop-shadow(0 5px 9px rgba(84,40,127,.14))!important;
}
html[data-home-version="r828-visual-polish"] .brand-word{display:none!important}
html[data-home-version="r828-visual-polish"] .primary-nav{
  gap:clamp(42px,4.5vw,76px)!important;
}
html[data-home-version="r828-visual-polish"] .primary-nav .nav-link{
  font-size:15px!important;
  font-weight:800!important;
}

/* Hero — one main action only; typography is allowed to breathe. */
html[data-home-version="r828-visual-polish"] .home-hero{
  min-height:620px!important;
  padding-top:108px!important;
  padding-bottom:30px!important;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)!important;
  gap:clamp(34px,4.5vw,76px)!important;
}
html[data-home-version="r828-visual-polish"] .hero-copy{
  max-width:610px!important;
  overflow:visible!important;
}
html[data-home-version="r828-visual-polish"] .hero-title{
  width:100%!important;
  max-width:610px!important;
  font-size:clamp(50px,4.7vw,74px)!important;
  line-height:1.12!important;
  letter-spacing:-.02em!important;
  text-wrap:balance!important;
  overflow:visible!important;
}
html[data-home-version="r828-visual-polish"] .hero-title-dark,
html[data-home-version="r828-visual-polish"] .hero-accent{
  overflow:visible!important;
}
html[data-home-version="r828-visual-polish"] .hero-subtitle{
  width:min(100%,560px)!important;
  margin-top:18px!important;
  color:#51435f!important;
  font-size:17px!important;
  line-height:1.85!important;
  font-weight:500!important;
  text-wrap:balance!important;
  overflow:visible!important;
}
html[data-home-version="r828-visual-polish"] .hero-actions{
  width:auto!important;
  margin-top:23px!important;
  display:flex!important;
  justify-content:flex-start!important;
}
html[data-home-version="r828-visual-polish"] .hero-primary{
  min-width:194px!important;
  min-height:56px!important;
  font-size:14px!important;
}
html[data-home-version="r828-visual-polish"] .hero-secondary{display:none!important}
html[data-home-version="r828-visual-polish"] .hero-benefits{
  width:min(100%,560px)!important;
  margin-top:22px!important;
}

/* New artwork: lighter, richer, and not a flat black TV screenshot. */
html[data-home-version="r828-visual-polish"] .hero-visual{
  width:100%!important;
  max-width:760px!important;
  aspect-ratio:1200/780!important;
  border-radius:30px!important;
  background:linear-gradient(135deg,#fffaf4,#f0e8ff)!important;
  border:1px solid rgba(100,52,150,.10)!important;
  box-shadow:0 28px 78px rgba(68,35,92,.14)!important;
  overflow:hidden!important;
}
html[data-home-version="r828-visual-polish"] .hero-reference-art{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  background:transparent!important;
}
html[data-home-version="r828-visual-polish"] .hero-visual::after{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)!important;
}

/* Game text — no forced clipping, more readable descriptions. */
html[data-home-version="r828-visual-polish"] .games-section{
  padding-top:44px!important;
}
html[data-home-version="r828-visual-polish"] .game-card-body{
  min-height:160px!important;
  overflow:visible!important;
}
html[data-home-version="r828-visual-polish"] .game-card-body h3{
  margin:0!important;
  line-height:1.25!important;
  overflow:visible!important;
}
html[data-home-version="r828-visual-polish"] .game-card-body p{
  min-height:42px!important;
  margin:7px 0 12px!important;
  font-size:11.5px!important;
  line-height:1.65!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-wrap:balance!important;
}
html[data-home-version="r828-visual-polish"] .game-card-actions{
  margin-top:auto!important;
}

/* Store belongs ONLY to the header. */
html[data-home-version="r828-visual-polish"] .store-highlight,
html[data-home-version="r828-visual-polish"] .home-app-nav-item[data-app-dest="store"]{
  display:none!important;
}
html[data-home-version="r828-visual-polish"] .home-app-nav{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

/* Keep the useful four-feature strip, but make every label fully visible. */
html[data-home-version="r828-visual-polish"] .feature-card,
html[data-home-version="r828-visual-polish"] .feature-card h3,
html[data-home-version="r828-visual-polish"] .feature-card p{
  overflow:visible!important;
}
html[data-home-version="r828-visual-polish"] .feature-card h3{
  line-height:1.45!important;
  text-wrap:balance!important;
}
html[data-home-version="r828-visual-polish"] .feature-card p{
  line-height:1.6!important;
  text-wrap:balance!important;
}

/* Official cards: logo-first, text never cut. */
html[data-home-version="r828-visual-polish"] .home-trust-visual-card{
  min-height:148px!important;
  overflow:visible!important;
}
html[data-home-version="r828-visual-polish"] .home-trust-visual-card>span,
html[data-home-version="r828-visual-polish"] .home-trust-visual-card small{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.55!important;
}

/* Responsive — preserve complete copy and use a real swipeable card rail on phones. */
@media(max-width:980px){
  html[data-home-version="r828-visual-polish"] .home-topbar{
    min-height:64px!important;
  }
  html[data-home-version="r828-visual-polish"] .home-topbar .brand{
    width:88px!important;
    min-width:88px!important;
    height:60px!important;
  }
  html[data-home-version="r828-visual-polish"] .home-topbar .brand-mark{
    height:58px!important;
  }
  html[data-home-version="r828-visual-polish"] .home-hero{
    grid-template-columns:1fr!important;
    grid-template-areas:"copy" "visual"!important;
    gap:24px!important;
    padding-top:88px!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-copy{
    width:100%!important;
    max-width:660px!important;
    margin-inline:auto!important;
    text-align:center!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-title{
    max-width:620px!important;
    margin-inline:auto!important;
    text-align:center!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-subtitle{
    margin-inline:auto!important;
    text-align:center!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-actions{
    justify-content:center!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-benefits{
    margin-inline:auto!important;
  }
}

@media(max-width:620px){
  html[data-home-version="r828-visual-polish"] .home-hero{
    padding:84px 12px 26px!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-title{
    width:100%!important;
    max-width:356px!important;
    font-size:clamp(34px,9.3vw,38px)!important;
    line-height:1.15!important;
    letter-spacing:-.012em!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-title-dark,
  html[data-home-version="r828-visual-polish"] .hero-accent{
    display:block!important;
    width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-subtitle{
    width:min(100%,338px)!important;
    font-size:12.5px!important;
    line-height:1.8!important;
    color:#5c4e69!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-primary{
    width:min(100%,230px)!important;
    min-width:0!important;
    min-height:50px!important;
    padding-inline:18px!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-benefits{
    width:min(100%,344px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px 12px!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-benefit{
    grid-template-columns:34px 1fr!important;
    justify-items:start!important;
    text-align:right!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-benefit-icon{
    width:34px!important;
    height:34px!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-benefit b{
    font-size:9px!important;
    line-height:1.45!important;
    text-align:right!important;
    white-space:normal!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-visual{
    width:100%!important;
    border-radius:20px!important;
  }

  html[data-home-version="r828-visual-polish"] .games-grid{
    width:100%!important;
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(82vw,310px)!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    padding:4px 14px 14px!important;
    scroll-padding-inline:14px!important;
    scrollbar-width:none!important;
    direction:rtl!important;
  }
  html[data-home-version="r828-visual-polish"] .games-grid::-webkit-scrollbar{display:none!important}
  html[data-home-version="r828-visual-polish"] .home-game-card{
    width:100%!important;
    min-width:0!important;
    aspect-ratio:auto!important;
    min-height:430px!important;
    scroll-snap-align:center!important;
    scroll-snap-stop:always!important;
  }
  html[data-home-version="r828-visual-polish"] .game-art{
    height:260px!important;
    flex:0 0 260px!important;
  }
  html[data-home-version="r828-visual-polish"] .game-card-body{
    min-height:170px!important;
    padding:13px 14px 14px!important;
  }
  html[data-home-version="r828-visual-polish"] .game-card-body h3{
    font-size:25px!important;
  }
  html[data-home-version="r828-visual-polish"] .game-card-body p{
    min-height:40px!important;
    margin:6px 0 10px!important;
    font-size:11px!important;
    line-height:1.55!important;
  }

  html[data-home-version="r828-visual-polish"] .home-trust-visual-grid{
    grid-template-columns:1fr 1fr!important;
  }
  html[data-home-version="r828-visual-polish"] .home-trust-visual-card{
    min-height:132px!important;
  }
}

@media(max-width:360px){
  html[data-home-version="r828-visual-polish"] .hero-title{
    max-width:306px!important;
    font-size:31px!important;
  }
  html[data-home-version="r828-visual-polish"] .hero-subtitle{
    max-width:300px!important;
    font-size:11.5px!important;
  }
  html[data-home-version="r828-visual-polish"] .games-grid{
    grid-auto-columns:min(84vw,286px)!important;
  }
  html[data-home-version="r828-visual-polish"] .home-trust-visual-grid{
    grid-template-columns:1fr!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html[data-home-version="r828-visual-polish"] .home-game-card{transition:none!important}
}