/* v3.2.59 — Homepage game artwork: always show the complete source image.
   This layer is loaded after modern-ui-r12.css. No cover/crop/mask/transform is
   allowed on the four modern homepage posters. Classic mode is untouched. */

:root[data-ui-mode="modern"] .platform-home .games-grid{
  align-items:start!important;
}

:root[data-ui-mode="modern"] .platform-home .game-card{
  min-width:0!important;
  overflow:hidden!important;
}

/* The poster keeps its intrinsic aspect ratio. A real gutter is reserved on
   every side so even the card's own rounded overflow can never trim artwork. */
:root[data-ui-mode="modern"] .platform-home .game-mark{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  padding:24px!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--game-accent) 13%,transparent),transparent 72%),
    #0b0712!important;
}

:root[data-ui-mode="modern"] .platform-home .game-mark::before,
:root[data-ui-mode="modern"] .platform-home .game-mark::after{
  display:none!important;
  content:none!important;
}

:root[data-ui-mode="modern"] .platform-home .game-mark .modern-game-art{
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:360px!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
  padding:0!important;
  transform:none!important;
  scale:1!important;
  filter:none!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  mask:none!important;
  -webkit-mask:none!important;
  border-radius:0!important;
  image-rendering:auto!important;
}

:root[data-ui-mode="modern"] .platform-home .game-mark .game-mark-image{
  display:none!important;
}

/* Hero marks also remain fully visible. */
:root[data-ui-mode="modern"] .platform-home .hero-game-chip{
  overflow:hidden!important;
  padding:10px!important;
  box-sizing:border-box!important;
}
:root[data-ui-mode="modern"] .platform-home .hero-game-chip img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  mask:none!important;
  -webkit-mask:none!important;
}

:root[data-ui-mode="modern"] .platform-home .game-copy>p{
  display:block!important;
  min-height:0!important;
  font-size:.82rem!important;
  line-height:1.65!important;
}
:root[data-ui-mode="modern"] .platform-home .game-quick-facts dt{font-size:.68rem!important}
:root[data-ui-mode="modern"] .platform-home .game-quick-facts dd{font-size:.78rem!important}

@media(max-width:1120px){
  :root[data-ui-mode="modern"] .platform-home .game-mark{
    padding:22px!important;
  }
  :root[data-ui-mode="modern"] .platform-home .game-mark .modern-game-art{
    max-width:330px!important;
  }
}

@media(max-width:700px){
  :root[data-ui-mode="modern"] .platform-home .games-section{
    padding:22px 10px 36px!important;
  }
  :root[data-ui-mode="modern"] .platform-home .games-grid{
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:430px!important;
    gap:14px!important;
    margin-inline:auto!important;
  }
  :root[data-ui-mode="modern"] .platform-home .game-card{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    border-radius:20px!important;
  }
  /* Give artwork a definite, responsive box. The 22px padding is the real
     unclipped safe area; the image then scales by both width and height. */
  :root[data-ui-mode="modern"] .platform-home .game-mark{
    width:100%!important;
    height:clamp(260px,75vw,330px)!important;
    min-height:clamp(260px,75vw,330px)!important;
    max-height:none!important;
    padding:22px!important;
    align-self:stretch!important;
    overflow:hidden!important;
  }
  :root[data-ui-mode="modern"] .platform-home .game-mark .modern-game-art{
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:100%!important;
    flex:0 1 auto!important;
    transform:none!important;
  }
  :root[data-ui-mode="modern"] .platform-home .game-copy{
    width:100%!important;
    padding:14px 14px 15px!important;
    gap:7px!important;
    text-align:right!important;
    align-items:stretch!important;
  }
  :root[data-ui-mode="modern"] .platform-home .game-copy>.pill{
    justify-self:start!important;
    align-self:flex-start!important;
    font-size:.7rem!important;
    padding:5px 8px!important;
    min-height:0!important;
  }
  :root[data-ui-mode="modern"] .platform-home .game-title-lockup{
    margin:2px 0!important;
    text-align:right!important;
  }
  :root[data-ui-mode="modern"] .platform-home .game-title-lockup h3{font-size:1.45rem!important}
  :root[data-ui-mode="modern"] .platform-home .game-title-lockup small{font-size:.76rem!important}
  :root[data-ui-mode="modern"] .platform-home .game-copy>p{
    font-size:.82rem!important;
    line-height:1.7!important;
    text-align:right!important;
  }
  :root[data-ui-mode="modern"] .platform-home .game-quick-facts{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    width:100%!important;
  }
  :root[data-ui-mode="modern"] .platform-home .card-actions{
    width:100%!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
  }
}

@media(max-width:340px){
  :root[data-ui-mode="modern"] .platform-home .game-mark{
    padding:22px!important;
  }
  :root[data-ui-mode="modern"] .platform-home .game-mark .modern-game-art{
    max-width:100%!important;
    max-height:100%!important;
  }
  :root[data-ui-mode="modern"] .platform-home .game-copy{padding-inline:11px!important}
}

/* Visual QA hotfix — the old skewed side panels read like an empty placeholder
   in the live desktop recording. Keep the depth, but turn them into soft ambient
   glows so the hero feels intentional and balanced. */
:root[data-ui-mode="modern"] .platform-home .home-hero::before,
:root[data-ui-mode="modern"] .platform-home .home-hero::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  pointer-events:none!important;
  width:42%!important;
  height:72%!important;
  bottom:-4%!important;
  border:0!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at center,rgba(143,67,247,.15),rgba(143,67,247,.06) 35%,transparent 72%)!important;
  filter:blur(12px)!important;
  opacity:.78!important;
}
:root[data-ui-mode="modern"] .platform-home .home-hero::before{right:-11%!important;left:auto!important;transform:none!important}
:root[data-ui-mode="modern"] .platform-home .home-hero::after{left:-11%!important;right:auto!important;transform:none!important}

@media(max-width:820px){
  :root[data-ui-mode="modern"] .platform-home .home-hero::before,
  :root[data-ui-mode="modern"] .platform-home .home-hero::after{
    width:62%!important;height:54%!important;bottom:5%!important;opacity:.55!important;
  }
}

/* Preserve the classic design unchanged. */