/* 2026-09-22 SITE-WIDE LANDING BACKGROUND CONTRACT
   Every non-Kids route that loads the shared poster wall uses the exact landing-page
   composition. Kids Mode is explicitly excluded in poster-wall.js and by .kids-body. */
body{isolation:isolate}.poster-wall{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--theme-bg,#100a23)}
body:has(.poster-wall) #ambient-bg{display:none!important}
.poster-wall-grid{position:absolute;inset:-30% -20%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1.1vw;transform:rotate(-12deg) scale(1.05);opacity:.4}
.poster-wall-tile{position:relative;overflow:hidden;border-radius:1vw;aspect-ratio:2/3;background:var(--theme-panel,#241636);box-shadow:0 1rem 2rem #0005}
.poster-wall-tile>img{width:100%;height:100%;object-fit:contain;display:block}.poster-wall-brand{position:absolute;right:5%;bottom:4%;display:flex;align-items:center;gap:.3rem;padding:.25rem .4rem;background:#100a23d9;color:#fff;font:700 clamp(8px,.65vw,14px)/1.2 system-ui;border-radius:.45rem}.poster-wall-brand img{width:1.25em;height:1.25em;border-radius:25%}
.poster-wall::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--theme-bg,#100a23) 62%,transparent),color-mix(in srgb,var(--theme-bg,#100a23) 96%,transparent) 32% 68%,color-mix(in srgb,var(--theme-bg,#100a23) 62%,transparent)),linear-gradient(0deg,var(--theme-bg,#100a23),transparent 80%)}
@media(max-width:600px){.poster-wall-grid{inset:-12% -42%;grid-template-columns:repeat(4,minmax(0,1fr));gap:2vw;opacity:.3}.poster-wall-tile{border-radius:2vw}.poster-wall-brand{font-size:9px}.poster-wall::after{background:linear-gradient(90deg,color-mix(in srgb,var(--theme-bg,#100a23) 80%,transparent),color-mix(in srgb,var(--theme-bg,#100a23) 95%,transparent) 25% 75%,color-mix(in srgb,var(--theme-bg,#100a23) 80%,transparent))}}
@media(prefers-reduced-motion:reduce){.poster-wall-grid,.poster-wall-tile{animation:none!important;will-change:auto}}.reduce-motion .poster-wall-grid,.reduce-motion .poster-wall-tile{animation:none!important;will-change:auto}
@media(forced-colors:active){.poster-wall{display:none}}@media print{.poster-wall{display:none}}
/* All external captions stay beneath the original, unobscured cover. */
html .marquee-item{height:auto!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;align-self:stretch}
html .marquee-item img{height:auto!important;aspect-ratio:2/3;object-fit:contain;flex:0 0 auto!important}
html .marquee-title{position:static!important;inset:auto!important;box-sizing:border-box;width:100%!important;background:var(--theme-surface,#241636)!important;color:var(--theme-text,#fff)!important;font-size:clamp(.75rem,1vw,.95rem)!important;line-height:1.45;padding:.6rem .45rem!important;z-index:auto!important;white-space:normal;overflow-wrap:anywhere;flex:1}

body:has(.poster-wall)>:is(main,footer,.main-layout,.container,.content,.app-container,.premium-card,.top-ask-wrap,.live-strip,.upgrade-ribbon){position:relative;z-index:1}
body:has(.poster-wall)::before,body:has(.poster-wall)::after{display:none!important}

/* ===== POSTER WALL — CINEMATIC TREATMENT =====
   The wall existed but read as texture rather than as entertainment. Three
   things were muting it: the grid sat at 40% opacity, the readability veil
   was 96% opaque straight through the centre where posters actually show,
   and posterGlow animated TOWARD saturate(.65) brightness(.8) — actively
   draining colour out of the artwork over 24 seconds.

   These rules come after the originals so they win on cascade order without
   editing the minified base file. Content still sits on .premium-card
   surfaces with their own opaque backgrounds, so raising the wall behind
   them changes atmosphere without touching text contrast. */

/* Real posters, readable as posters. */
.poster-wall-grid {
  opacity: .62;
  filter: saturate(1.15) contrast(1.06);
}

/* Lift the veil in the centre. 96% -> 86% is the single change that makes the
   artwork legible; below about 80% text over the gaps starts to suffer. */
.poster-wall::after {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--theme-bg, #100a23) 52%, transparent),
      color-mix(in srgb, var(--theme-bg, #100a23) 86%, transparent) 30% 70%,
      color-mix(in srgb, var(--theme-bg, #100a23) 52%, transparent)),
    linear-gradient(0deg, var(--theme-bg, #100a23), transparent 78%),
    /* Vignette: pulls the eye to the centre and gives the wall depth rather
       than reading as flat wallpaper. */
    radial-gradient(ellipse 120% 80% at 50% 45%, transparent 30%,
      color-mix(in srgb, var(--theme-bg, #100a23) 55%, transparent) 100%);
}

/* Glow now ADDS warmth instead of removing it — the tiles breathe between
   neutral and slightly richer, which reads as living artwork rather than
   a static screenshot. */
@keyframes posterGlow {
  0%   { filter: saturate(1) brightness(.92); }
  100% { filter: saturate(1.28) brightness(1.08); }
}

/* PROJECTOR SWEEP
   A soft warm beam drifting across the wall, like light moving over a cinema
   foyer. Deliberately slow (28s) and low-contrast: an effect you notice on
   the second look, not one that competes with the page. transform/opacity
   only, so it composites on the GPU and costs nothing in layout. */
.poster-wall::before {
  content: '';
  position: absolute;
  top: -30%; bottom: -30%; left: 0;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent,
    rgba(240, 216, 120, .07) 35%,
    rgba(255, 243, 163, .13) 50%,
    rgba(240, 216, 120, .07) 65%,
    transparent);
  filter: blur(22px);
  transform: skewX(-12deg);
  display:none;
  z-index: 1;
}
/* Translate rather than animate `left`: animating a position property
   triggers layout every frame, whereas transform is handled by the
   compositor on its own thread. Same motion, no reflow. (My own bug from
   the cinematic-treatment commit.) */
@keyframes posterSweep {
  0%        { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
  12%       { opacity: 1; }
  88%       { opacity: 1; }
  100%      { transform: translateX(320%) skewX(-12deg); opacity: 0; }
}

/* Gold edge on each tile so the poster grid picks up the brand rather than
   floating as unrelated artwork. */
.poster-wall-tile {
  box-shadow: 0 1rem 2rem #0006, inset 0 0 0 1px rgba(228, 192, 108, .18);
}

/* MOBILE: raised too, but less — a phone screen is mostly content, so the
   wall has proportionally less room to breathe before it crowds text. */
@media (max-width: 600px) {
  .poster-wall-grid { opacity: .46; filter: saturate(1.12) contrast(1.04); }
  .poster-wall::after {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--theme-bg, #100a23) 72%, transparent),
        color-mix(in srgb, var(--theme-bg, #100a23) 90%, transparent) 25% 75%,
        color-mix(in srgb, var(--theme-bg, #100a23) 72%, transparent)),
      linear-gradient(0deg, var(--theme-bg, #100a23), transparent 82%);
  }
  /* The sweep is the first thing to go on a phone: least value, most cost. */
  .poster-wall::before { display: none; }
}

/* TV / large screens: the wall is the room's ambience, so let it show. */
@media (min-width: 2560px) {
  .poster-wall-grid { opacity: .7; }
}

/* Every effect here is decoration, so all of it stops. */
@media (prefers-reduced-motion: reduce) {
  .poster-wall::before { animation: none; opacity: 0; }
  .poster-wall-grid { filter: saturate(1.1); }
}
.reduce-motion .poster-wall::before { animation: none; opacity: 0; }

/* Keep the current artwork/composition, but avoid repainting a large filtered
   layer behind every card while mobile browsers resize their address bars. */
@media (max-width: 900px), (pointer: coarse) {
  .poster-wall { height: 100vh; height: 100lvh; bottom: auto; contain: strict; }
  .poster-wall-grid, .poster-wall-tile { animation: none !important; will-change: auto; }
  .poster-wall::before { display: none; }
}

/* Visible cinema artwork on phones, with a stable, unfiltered layer. The
   cards retain their own solid surfaces for text contrast. */
@media(max-width:900px){
  .poster-wall-grid{inset:-8% -18%;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;opacity:.78;filter:none;transform:rotate(-9deg) scale(1.02);align-content:start}
  .poster-wall::after{background:linear-gradient(90deg,color-mix(in srgb,var(--theme-bg,#100a23) 28%,transparent),color-mix(in srgb,var(--theme-bg,#100a23) 48%,transparent) 35% 65%,color-mix(in srgb,var(--theme-bg,#100a23) 28%,transparent)),linear-gradient(0deg,color-mix(in srgb,var(--theme-bg,#100a23) 75%,transparent),transparent 85%)}
  .poster-wall-tile{border-radius:12px;box-shadow:0 5px 15px #0004}
  body:has(.poster-wall) :is(.hero-lede,.hero-title){text-shadow:0 2px 12px var(--theme-bg,#100a23)}
}


/* posterGlow animated `filter`, which repaints each of the 32 tiles every
   frame — filter is not a compositor-only property. Their mobile rules
   already disable tile animation on phones and touch devices; this makes the
   desktop path cheap too, by breathing opacity instead. Visually near
   identical, composited rather than repainted. */
@keyframes posterGlow {
  0%   { opacity: .82; }
  100% { opacity: 1; }
}
.poster-wall-tile { will-change: opacity; }


/* ===== 2026-09-19 SCALE CORRECTION =====
   Background posters are atmosphere, not a second content rail. Smaller tiles,
   tighter gaps and a gentler rotation align the wall with the 960px UI rhythm. */
.poster-wall-grid{
  inset:-9% -8%!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:clamp(8px,.72vw,13px)!important;
  transform:rotate(-6deg) scale(1)!important;
  opacity:.50!important;
  align-content:start!important;
}
.poster-wall-tile{
  border-radius:clamp(8px,.55vw,12px)!important;
  box-shadow:0 8px 24px #0005,inset 0 0 0 1px rgba(240,202,98,.20)!important;
}
.poster-wall-brand{display:none!important}
@keyframes posterDrift{
  from{transform:rotate(-6deg) translate3d(0,0,0)}
  to{transform:rotate(-6deg) translate3d(0,-3.5%,0)}
}
@media (min-width:901px) and (max-width:1400px){
  .poster-wall-grid{
    inset:-8% -10%!important;
    grid-template-columns:repeat(14,minmax(0,1fr))!important;
    gap:10px!important;
  }
}
@media (max-width:900px){
  .poster-wall-grid{
    inset:-6% -24%!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:8px!important;
    transform:rotate(-5deg) scale(1)!important;
    opacity:.44!important;
  }
  .poster-wall-tile{border-radius:9px!important}
  .poster-wall::after{
    background:
      linear-gradient(90deg,
        color-mix(in srgb,var(--theme-bg,#100a23) 64%,transparent),
        color-mix(in srgb,var(--theme-bg,#100a23) 86%,transparent) 28% 72%,
        color-mix(in srgb,var(--theme-bg,#100a23) 64%,transparent)),
      linear-gradient(0deg,color-mix(in srgb,var(--theme-bg,#100a23) 84%,transparent),transparent 82%)!important;
  }
}
@media (max-width:480px){
  .poster-wall-grid{
    inset:-4% -34%!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:6px!important;
    opacity:.40!important;
  }
}
@media (min-width:2560px){
  .poster-wall-grid{
    grid-template-columns:repeat(14,minmax(0,1fr))!important;
    gap:16px!important;
    opacity:.56!important;
  }
}

/* 2026-09-20 renderer crash guard: keep the exact poster composition, but do not
   promote 32 decorative tiles (plus sweep/grid) into continuously animated
   compositor layers. This final cascade intentionally wins over earlier
   will-change declarations on every viewport. */
.poster-wall-grid,
.poster-wall-tile,
.poster-wall::before{
}

/* 2026-09-20 Home poster-wall restore: all eight real title images render once.
   No animation, filters or promoted layers; only the background composition is
   restored. 4x2 on wider screens and 2x4 on phones keeps the wall full-bleed
   without changing any foreground layout. */
html body:not(.kids-body) .poster-wall-grid{
  inset:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:clamp(6px,.6vw,12px)!important;
  transform:none!important;
  opacity:.42!important;
  filter:none!important;
  align-content:stretch!important;
  animation:none!important;
  will-change:auto!important;
}
html body:not(.kids-body) .poster-wall-tile{
  aspect-ratio:auto!important;
  min-width:0!important;
  min-height:0!important;
  border-radius:clamp(8px,.55vw,12px)!important;
  animation:none!important;
  will-change:auto!important;
}
html body:not(.kids-body) .poster-wall-tile>img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center top!important;
}
html body:not(.kids-body) .poster-wall::before{display:none!important}
@media(max-width:700px){
  html body:not(.kids-body) .poster-wall-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
    opacity:.36!important;
  }
}

/* 2026-09-20 Home all-time-cover wall.
   Static only: smaller covers and stronger visibility without animation,
   filters, blur, backdrop work or promoted compositor layers. */
html body:not(.kids-body) .poster-wall-grid{
  inset:-2% -1%!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  grid-template-rows:none!important;
  grid-auto-rows:auto!important;
  align-content:center!important;
  gap:clamp(5px,.45vw,9px)!important;
  opacity:.58!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
  will-change:auto!important;
}
html body:not(.kids-body) .poster-wall-tile{
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:2/3!important;
  border-radius:8px!important;
  animation:none!important;
  will-change:auto!important;
}
html body:not(.kids-body) .poster-wall-tile>img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center top!important;
}
html body:not(.kids-body) .poster-wall::after{
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--theme-bg,#100a23) 44%,transparent),
      color-mix(in srgb,var(--theme-bg,#100a23) 68%,transparent) 24% 76%,
      color-mix(in srgb,var(--theme-bg,#100a23) 44%,transparent)),
    linear-gradient(0deg,color-mix(in srgb,var(--theme-bg,#100a23) 68%,transparent),transparent 84%)!important;
}
@media(min-width:701px) and (max-width:1100px){
  html body:not(.kids-body) .poster-wall-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    inset:-2% -8%!important;
    opacity:.56!important;
  }
}
@media(max-width:700px){
  html body:not(.kids-body) .poster-wall-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    inset:-1% -10%!important;
    gap:5px!important;
    opacity:.54!important;
  }
  html body:not(.kids-body) .poster-wall::after{
    background:
      linear-gradient(90deg,
        color-mix(in srgb,var(--theme-bg,#100a23) 52%,transparent),
        color-mix(in srgb,var(--theme-bg,#100a23) 70%,transparent) 22% 78%,
        color-mix(in srgb,var(--theme-bg,#100a23) 52%,transparent)),
      linear-gradient(0deg,color-mix(in srgb,var(--theme-bg,#100a23) 72%,transparent),transparent 84%)!important;
  }
}


/* 2026-09-20 scattered static poster background */
.poster-wall-grid{
  inset:0!important;
  display:block!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
  will-change:auto!important;
}
.poster-wall-tile{
  position:absolute!important;
  width:clamp(50px,5.4vw,84px)!important;
  aspect-ratio:2/3!important;
  opacity:.88!important;
  border-radius:10px!important;
  overflow:hidden!important;
  animation:none!important;
  will-change:auto!important;
  box-shadow:0 6px 18px rgba(0,0,0,.30),0 0 0 1px rgba(229,193,88,.22)!important;
}
.poster-wall-tile>img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}
.poster-wall-brand{display:none!important}
.poster-wall::before{display:none!important}
.poster-wall::after{
  background:
    linear-gradient(180deg,rgba(8,7,20,.10),rgba(8,7,20,.20)),
    radial-gradient(circle at 50% 38%,transparent 0 50%,rgba(8,7,20,.10) 100%)!important;
}
.poster-wall-tile:nth-child(1){top:1%;left:2%}
.poster-wall-tile:nth-child(2){top:9%;left:17%}
.poster-wall-tile:nth-child(3){top:3%;left:35%}
.poster-wall-tile:nth-child(4){top:16%;left:53%}
.poster-wall-tile:nth-child(5){top:5%;right:3%}
.poster-wall-tile:nth-child(6){top:29%;left:8%}
.poster-wall-tile:nth-child(7){top:39%;left:25%}
.poster-wall-tile:nth-child(8){top:27%;left:44%}
.poster-wall-tile:nth-child(9){top:45%;left:63%}
.poster-wall-tile:nth-child(10){top:31%;right:5%}
.poster-wall-tile:nth-child(11){top:58%;left:3%}
.poster-wall-tile:nth-child(12){top:70%;left:20%}
.poster-wall-tile:nth-child(13){top:56%;left:39%}
.poster-wall-tile:nth-child(14){top:75%;left:58%}
.poster-wall-tile:nth-child(15){top:61%;right:4%}
.poster-wall-tile:nth-child(16){top:83%;left:34%}
@media(max-width:700px){
  .poster-wall-tile{width:clamp(44px,12vw,60px)!important;opacity:.82!important;border-radius:8px!important}
  .poster-wall-tile:nth-child(n+13){display:none!important}
  .poster-wall::after{background:linear-gradient(180deg,rgba(8,7,20,.16),rgba(8,7,20,.24))!important}
}
@media(min-width:2200px){
  .poster-wall-tile{width:clamp(80px,4.4vw,118px)!important}
}


/* 2026-09-20 final scattered all-time title background.
   Static absolute placement only: no timers, animation, filter or observer work. */
html body:not(.kids-body) .poster-wall-grid{
  inset:0!important;
  display:block!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
  will-change:auto!important;
}
html body:not(.kids-body) .poster-wall-tile{
  position:absolute!important;
  width:clamp(42px,4.6vw,72px)!important;
  aspect-ratio:2/3!important;
  opacity:.94!important;
  border-radius:8px!important;
  overflow:hidden!important;
  animation:none!important;
  will-change:auto!important;
  box-shadow:0 5px 16px rgba(0,0,0,.32),0 0 0 1px rgba(229,193,88,.28)!important;
}
html body:not(.kids-body) .poster-wall-tile>img{
  width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;
}
html body:not(.kids-body) .poster-wall::before{display:none!important}
html body:not(.kids-body) .poster-wall::after{
  background:linear-gradient(180deg,rgba(8,7,20,.06),rgba(8,7,20,.14))!important;
}
html body:not(.kids-body) .poster-wall-tile:nth-child(1){top:2%;left:2%;transform:rotate(-3deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(2){top:12%;left:15%;transform:rotate(2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(3){top:3%;left:33%;transform:rotate(-2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(4){top:18%;left:49%;transform:rotate(3deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(5){top:4%;right:3%;transform:rotate(-2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(6){top:31%;left:6%;transform:rotate(2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(7){top:43%;left:21%;transform:rotate(-3deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(8){top:32%;left:39%;transform:rotate(2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(9){top:47%;left:58%;transform:rotate(-2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(10){top:30%;right:5%;transform:rotate(3deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(11){top:62%;left:3%;transform:rotate(-2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(12){top:74%;left:18%;transform:rotate(3deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(13){top:59%;left:36%;transform:rotate(-3deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(14){top:77%;left:54%;transform:rotate(2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(15){top:63%;right:3%;transform:rotate(-2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(16){top:86%;left:35%;transform:rotate(3deg)!important}
@media(max-width:700px){
  html body:not(.kids-body) .poster-wall-tile{
    width:clamp(38px,10.5vw,52px)!important;
    opacity:.90!important;
    border-radius:7px!important;
  }
  html body:not(.kids-body) .poster-wall-tile:nth-child(n+13){display:none!important}
  html body:not(.kids-body) .poster-wall::after{
    background:linear-gradient(180deg,rgba(8,7,20,.10),rgba(8,7,20,.18))!important;
  }
}
@media(min-width:2200px){
  html body:not(.kids-body) .poster-wall-tile{width:clamp(66px,3.7vw,96px)!important}
}


/* 2026-09-20 final scattered-cover visibility pass.
   Smaller, clearer real-title covers across the fixed page background.
   Static only: no animation, filters, observers or promoted compositor layers. */
html body:not(.kids-body) .poster-wall-tile{
  width:clamp(34px,3.9vw,60px)!important;
  opacity:.98!important;
  border-radius:7px!important;
  box-shadow:0 6px 20px rgba(0,0,0,.34),0 0 0 1px rgba(229,193,88,.36)!important;
  animation:none!important;
  will-change:auto!important;
}
html body:not(.kids-body) .poster-wall::after{
  background:linear-gradient(180deg,rgba(8,7,20,.035),rgba(8,7,20,.09))!important;
}
@media(max-width:700px){
  html body:not(.kids-body) .poster-wall-tile{
    width:clamp(32px,9vw,46px)!important;
    opacity:.96!important;
  }
  html body:not(.kids-body) .poster-wall::after{
    background:linear-gradient(180deg,rgba(8,7,20,.06),rgba(8,7,20,.12))!important;
  }
}


/* 2026-09-20 full-document Home poster field.
   Real all-time-title covers are distributed down the whole page rather than
   repeated in viewport rows. Everything is static to protect scroll stability. */
html body.page-home{position:relative!important}
html body.page-home .poster-wall{
  position:absolute!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  height:auto!important;
  min-height:100%!important;
  overflow:hidden!important;
  contain:paint!important;
}
html body:not(.kids-body) .poster-wall-grid{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
  will-change:auto!important;
}
html body:not(.kids-body) .poster-wall-tile{
  position:absolute!important;
  width:clamp(32px,3.5vw,54px)!important;
  aspect-ratio:2/3!important;
  opacity:1!important;
  border-radius:7px!important;
  overflow:hidden!important;
  animation:none!important;
  will-change:auto!important;
  box-shadow:0 7px 22px rgba(0,0,0,.38),0 0 0 1px rgba(229,193,88,.42)!important;
}
html body:not(.kids-body) .poster-wall-tile>img{
  width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;
}
html body:not(.kids-body) .poster-wall::before{display:none!important}
html body:not(.kids-body) .poster-wall::after{
  background:linear-gradient(180deg,rgba(8,7,20,.015),rgba(8,7,20,.065))!important;
}
html body:not(.kids-body) .poster-wall-tile:nth-child(1){top:1.5%;left:2.5%;transform:rotate(-4deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(2){top:7%;right:7%;transform:rotate(3deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(3){top:13.5%;left:18%;transform:rotate(-2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(4){top:20%;right:23%;transform:rotate(4deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(5){top:26.5%;left:4%;transform:rotate(2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(6){top:33%;right:3%;transform:rotate(-3deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(7){top:39.5%;left:31%;transform:rotate(3deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(8){top:46%;right:34%;transform:rotate(-4deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(9){top:52.5%;left:9%;transform:rotate(2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(10){top:59%;right:12%;transform:rotate(-2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(11){top:65.5%;left:39%;transform:rotate(4deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(12){top:72%;right:2.5%;transform:rotate(-3deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(13){top:78.5%;left:16%;transform:rotate(3deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(14){top:84.5%;right:27%;transform:rotate(-4deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(15){top:90.5%;left:3%;transform:rotate(2deg)!important}
html body:not(.kids-body) .poster-wall-tile:nth-child(16){top:95%;right:42%;transform:rotate(-2deg)!important}
@media(max-width:700px){
  html body:not(.kids-body) .poster-wall-tile{
    width:clamp(28px,8.2vw,42px)!important;
    opacity:.98!important;
    display:block!important;
  }
  html body:not(.kids-body) .poster-wall::after{
    background:linear-gradient(180deg,rgba(8,7,20,.03),rgba(8,7,20,.085))!important;
  }
}
@media(min-width:2200px){
  html body:not(.kids-body) .poster-wall-tile{width:clamp(46px,2.8vw,72px)!important}
}


/* 2026-09-20 compact full-page poster finish.
   Smaller all-time-title covers with stronger separation from the page background.
   Static only: no animation, filters, observers or promoted compositor layers. */
html body:not(.kids-body) .poster-wall-tile{
  width:clamp(28px,3.05vw,48px)!important;
  opacity:1!important;
  border-radius:6px!important;
  box-shadow:
    0 7px 22px rgba(0,0,0,.42),
    0 0 0 1px rgba(229,193,88,.58),
    0 0 14px rgba(229,193,88,.12)!important;
  animation:none!important;
  will-change:auto!important;
}
html body:not(.kids-body) .poster-wall::after{
  background:linear-gradient(180deg,rgba(8,7,20,.008),rgba(8,7,20,.045))!important;
}
@media(max-width:700px){
  html body:not(.kids-body) .poster-wall-tile{
    width:clamp(24px,7.2vw,36px)!important;
    opacity:1!important;
  }
  html body:not(.kids-body) .poster-wall::after{
    background:linear-gradient(180deg,rgba(8,7,20,.018),rgba(8,7,20,.055))!important;
  }
}
@media(min-width:2200px){
  html body:not(.kids-body) .poster-wall-tile{width:clamp(38px,2.4vw,60px)!important}
}

/* ===== 2026-09-21 tilted key-art collage — EVERY viewport =====
   The reference is a streaming-service sign-in wall: a dense grid of key art,
   rotated a few degrees, bleeding past all four edges, under a heavy scrim so
   the centre UI stays readable. The artwork is MatchApp's own reviewed
   catalogue, pooled by poster-wall.js — not another service's line-up.

   The wall is pinned to the viewport, so the grid fills one screen on every
   device and the page scrolls over it.

   Deliberately static at every width: the 2026-09-20 renderer crash guard
   above stays in force and nothing in this pass declares animation,
   will-change, filter or backdrop-filter. A fixed, unanimated backdrop is also
   cheaper to scroll than a page-height one, because it does not repaint as
   newly exposed page regions come into view. */
html body.page-home .poster-wall{
  position:fixed!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  contain:paint!important;
}

/* One transparency layer on the grid rather than one per tile. Higher
   specificity than the inline compact sheet's .poster-wall-grid{opacity:1},
   which would otherwise win on source order. */
html body.page-home .poster-wall .poster-wall-grid{
  position:absolute!important;
  inset:-34% -15%!important;
  display:grid!important;
  grid-auto-rows:min-content!important;
  align-content:start!important;
  gap:0.55vw!important;
  transform:rotate(-12deg)!important;
  transform-origin:50% 50%!important;
  opacity:.76!important;
}

/* Tiles flow in the grid instead of being individually placed. */
html body:not(.kids-body) .poster-wall-tile{
  position:relative!important;
  top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  width:auto!important;
  height:auto!important;
  aspect-ratio:2/3!important;
  overflow:hidden!important;
  border-radius:4px!important;
  opacity:1!important;
  transform:none!important;
  box-shadow:0 4px 12px rgba(0,0,0,.42)!important;
  background:rgba(12,10,26,.55)!important;
}
html body:not(.kids-body) .poster-wall-tile>img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}
html body.page-home .poster-wall-brand{display:none!important}
html body:not(.kids-body) .poster-wall::before{display:none!important}

/* Column count per breakpoint. Tiles must stay large enough to read as key art
   and numerous enough to overfill the rotated grid at every size. */
@media(max-width:700px){
  html body.page-home .poster-wall .poster-wall-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:1.2vw!important;
    opacity:.92!important;
  }
}
@media(min-width:701px) and (max-width:1099px){
  html body.page-home .poster-wall .poster-wall-grid{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:.8vw!important;
  }
}
@media(min-width:1100px){
  html body.page-home .poster-wall .poster-wall-grid{
    grid-template-columns:repeat(11,minmax(0,1fr))!important;
  }
}
@media(min-width:1800px){
  html body.page-home .poster-wall .poster-wall-grid{
    grid-template-columns:repeat(14,minmax(0,1fr))!important;
  }
}

/* The scrim: a deep pool of midnight behind the centre column of UI, fading
   out towards the edges so the collage stays visible all the way to the
   corners, plus top and bottom bands. */
html body:not(.kids-body) .poster-wall::after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(ellipse 60% 40% at 50% 27%,
      rgba(5,4,16,.90) 0%,
      rgba(5,4,16,.70) 44%,
      rgba(5,4,16,.26) 78%,
      rgba(5,4,16,0) 100%),
    linear-gradient(180deg,
      rgba(5,4,16,.70) 0%,
      rgba(5,4,16,.22) 13%,
      rgba(5,4,16,.26) 72%,
      rgba(5,4,16,.86) 100%)!important;
}
@media(max-width:700px){
  /* A handset is almost entirely content, so the pool is tightened and the
     edges are left brighter, otherwise the collage disappears completely. */
  html body:not(.kids-body) .poster-wall::after{
    background:
      radial-gradient(ellipse 96% 22% at 50% 33%,
        rgba(5,4,16,.80) 0%,
        rgba(5,4,16,.52) 52%,
        rgba(5,4,16,.12) 86%,
        rgba(5,4,16,0) 100%),
      linear-gradient(180deg,
        rgba(5,4,16,.52) 0%,
        rgba(5,4,16,.06) 10%,
        rgba(5,4,16,.08) 82%,
        rgba(5,4,16,.66) 100%)!important;
  }
}

#trending-rail .trending-week-label{margin:2px 14px 10px;font-family:Georgia,serif;font-size:22px;font-weight:700;letter-spacing:.02em;text-transform:none;color:#f2cf69}
#trending-rail .marquee-viewport{touch-action:pan-x}