html[data-theme="night"]{--bg:#101118;--head:#0d0f16;--head-ink:#f4f3f3;--panel:#1a1e29;--surface:#232936;--line:#363e50;--ink:#f3f6ef;--muted:#b7bfcb;--accent:#c2f64a;--accent-text:#c2f64a;--on-accent:#162006;--radius:15px;--button-radius:6px;}

*{box-sizing:border-box}
html{color-scheme:dark;scroll-padding-top:1rem}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%;object-fit:cover}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.06;overflow-wrap:anywhere}
h1{font-size:clamp(2.4rem,6vw,5.25rem);letter-spacing:-.065em}
h2{font-size:clamp(1.5rem,3.4vw,2.7rem);letter-spacing:-.045em}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.wrap{width:min(100% - 2*clamp(16px,4vw,56px),1320px);margin-inline:auto}
.skip{position:absolute;left:1rem;top:-100px;padding:.6rem 1rem;z-index:9;background:var(--bg)}
.skip:focus{top:1rem}
.site-head{background:var(--head);color:var(--head-ink);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,3vw,3rem);min-height:76px}
.brand img{width:clamp(155px,18vw,232px);height:auto;object-fit:contain}
.desktop-nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.45rem clamp(.45rem,1.1vw,1.2rem)}
.desktop-nav a,.mobile-nav a{font-weight:700;font-size:.88rem;padding:.48rem .25rem;white-space:nowrap}
.desktop-nav a:hover,.desktop-nav [aria-current]{color:var(--accent)}
.category-button{display:none}
.category-button,.close{background:transparent;border:1px solid currentColor;border-radius:8px;padding:.5rem .75rem}
dialog{color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);width:min(92vw,440px);padding:1.25rem}
dialog::backdrop{background:#080b12bc}
.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.mobile-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.mobile-nav a{padding:.8rem .6rem;background:var(--surface);border:1px solid var(--line);border-radius:8px;white-space:normal}
.mobile-nav a[aria-current]{border-color:var(--accent)}
main.wrap{min-height:55vh}
.front{padding-top:clamp(1.25rem,4vw,3.25rem)}
.block{margin-block:clamp(2.25rem,6vw,5rem)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:1.1rem}
.section-head p,.muted{color:var(--muted)}
.kicker{font-size:.73rem;font-weight:850;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin-bottom:.65rem}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;align-self:start;border-radius:var(--button-radius,8px);padding:.7rem 1.05rem;background:var(--accent);color:var(--on-accent);font-weight:850;border:1px solid transparent;min-height:44px}
.button:hover{filter:brightness(.9)}
.feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4.2rem);align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.25rem,4vw,3.8rem)}
.feature-copy{display:grid;gap:1rem;justify-items:start}
.feature-copy .kicker{margin:0}
.feature-copy>p:not(.kicker){color:var(--muted);max-width:42ch}
.feature-media{position:relative;display:block;min-width:0;border-radius:var(--radius);isolation:isolate}
.feature-media>img{width:100%;aspect-ratio:1.36;max-height:450px;border-radius:inherit}
.media-label{position:absolute;inset:auto .65rem .65rem;display:flex;justify-content:space-between;gap:.4rem;align-items:center;background:#101218e8;color:white;padding:.65rem .8rem;font-size:.93rem;font-weight:800;border-radius:8px}
.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.65rem,1.6vw,1.25rem)}
.tile{min-width:0;display:grid;align-content:start;gap:.65rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.55rem}
.tile img{width:100%;aspect-ratio:1.42;border-radius:max(3px,calc(var(--radius) - 5px));background:var(--surface)}
.tile span{padding:0 .35rem .35rem;font-weight:760;overflow-wrap:anywhere}
.tile:hover,.rank:hover,.spot:hover{border-color:var(--accent)}
.rank-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;list-style:none;padding:0;margin:0;counter-reset:rank}
.rank{display:grid;grid-template-columns:2ch 55px minmax(0,1fr);align-items:center;gap:.7rem;height:100%;background:var(--panel);padding:.7rem;border:1px solid var(--line);border-radius:var(--radius);font-weight:760;overflow-wrap:anywhere}
.rank::before{counter-increment:rank;content:counter(rank,decimal-leading-zero);font-size:.73rem;font-weight:850;color:var(--accent);font-variant-numeric:tabular-nums}
.rank img{width:55px;height:55px;border-radius:6px;background:var(--surface)}
.spot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.65rem,1.6vw,1.25rem)}
.spot{display:grid;align-content:start;gap:.85rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:0;padding:.8rem}
.spot img{aspect-ratio:1.65;width:100%;border-radius:max(3px,calc(var(--radius) - 5px));background:var(--surface)}
.spot strong{display:block;font-size:1.1rem;overflow-wrap:anywhere}
.spot small{color:var(--muted)}
.category-shelf{border-top:1px solid var(--line);padding-top:1.4rem}
.catalog-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.inner{padding-block:clamp(1.5rem,5vw,4rem)}
.inner h1{font-size:clamp(2rem,5vw,4rem)}
.intro{padding:clamp(1.2rem,4vw,3rem);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:1.6rem}
.intro .muted{margin-top:.7rem}
.detail{display:grid;grid-template-columns:minmax(150px,245px) minmax(0,1fr);align-items:start;gap:clamp(1.1rem,4vw,3.5rem);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1rem,4vw,2.75rem)}
.detail-cover{width:min(100%,245px);aspect-ratio:1;object-fit:cover;border-radius:var(--radius);background:var(--surface)}
.detail-copy{display:grid;gap:.85rem;justify-items:start}
.detail-copy p{max-width:69ch}
.detail-copy .kicker{margin:0}
.detail-note{color:var(--muted);font-size:.86rem}
.detail-note a,.prose a,.footer a:not(.brand){text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere}
.detail-note a:hover,.prose a:hover,.footer a:hover{text-decoration-thickness:2px}
.play-bar{display:flex;justify-content:space-between;align-items:center;gap:.6rem 1.2rem;flex-wrap:wrap;margin-bottom:1rem}
.play-bar a{font-weight:750}
.play-bar h1{font-size:clamp(1.6rem,3.8vw,3rem)}
.game-frame{width:100%;height:clamp(320px,75svh,850px);display:block;border:0;border-radius:var(--radius);background:#101217}
.status{color:var(--muted);padding:1.2rem 0}
.prose{max-width:82ch;margin-inline:auto;background:var(--panel);padding:clamp(1.1rem,4vw,3rem);border:1px solid var(--line);border-radius:var(--radius);overflow-wrap:anywhere}
.prose h1{margin-bottom:.6rem}
.prose h2{font-size:clamp(1.25rem,3vw,1.75rem);margin:1.65rem 0 .65rem;letter-spacing:-.02em}
.prose p+p{margin-top:.85rem}
.prose ul{padding-left:1.3rem}
.prose li+li{margin-top:.5rem}
.prose dl{margin:0}
.prose dt{font-weight:800;margin-top:.7rem}
.prose dd{margin:0;color:var(--muted)}
.footer{color:var(--head-ink);background:var(--head);border-top:1px solid var(--line);margin-top:1.5rem}
.footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1.4rem;padding-block:1.8rem}
.footer-brand p{font-size:.84rem;margin-top:.6rem}
.footer nav{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.88rem}
[hidden]{display:none!important}
/* Five editorial compositions */
.night .feature{background:linear-gradient(120deg,#171b25,#101118 68%);border-left:4px solid var(--accent)}
.night .feature-media{transform:rotate(-2deg);box-shadow:0 16px 36px #0007}
.night .category-shelf:nth-child(even) .tile img{aspect-ratio:1.8}
.skid .feature{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);padding:0;gap:0;overflow:hidden}
.skid .feature-media{border-radius:0;height:100%;min-height:340px}
.skid .feature-media>img{height:100%;max-height:none;position:absolute;inset:0}
.skid .feature-copy{padding:clamp(1.4rem,4vw,3rem)}
.skid .front-duo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem}
.skid .rank-list{grid-template-columns:1fr}
.skid .spot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.skid .spot:first-child{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.skid .category-shelf .tile{border:0;background:transparent;padding:0}
.skid .detail .detail-cover{grid-column:2;grid-row:1}
.skid .detail{grid-template-columns:minmax(0,1fr) minmax(150px,245px)}
.garage .feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.1rem}
.garage .feature-copy{grid-column:1/-1;justify-items:center;text-align:center}
.garage .feature-copy>p:not(.kicker){max-width:62ch}
.garage .feature-media>img{aspect-ratio:1.85}
.garage .rank-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.garage .category-shelf .tile{grid-template-columns:minmax(0,1fr);padding:0;overflow:hidden}
.garage .category-shelf .tile img{border-radius:0}
.garage .category-shelf .tile span{padding:.15rem .8rem .65rem}
.paddock .feature{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);background:var(--panel);box-shadow:0 10px 0 var(--surface)}
.paddock .feature-media>img{aspect-ratio:1;max-height:400px}
.paddock .feature-copy{border-top:4px solid var(--accent);padding-top:1.2rem}
.paddock .front-duo{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(0,1fr);gap:2rem}
.paddock .rank-list{grid-template-columns:1fr}
.paddock .rank::before,.paddock .kicker{color:var(--accent-text)}
.paddock .category-shelf .tile{box-shadow:0 3px 0 var(--surface)}
.legend .feature{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(360px,53vw,560px);background:#171411;color:#fff}
.legend .feature-copy{position:relative;z-index:1;padding-top:4rem}
.legend .feature-copy>p:not(.kicker){color:#f4ece1}
.legend .feature-media{position:absolute;inset:0;border-radius:0;pointer-events:none}
.legend .feature-media>img{width:100%;height:100%;max-height:none;object-position:center 52%}
.legend .feature-media::after{content:"";position:absolute;inset:0;background:linear-gradient(88deg,#17110bf5 8%,#17110baf 49%,#17110b2b 100%),linear-gradient(0deg,#17110bc9,transparent 70%)}
.legend .spot{position:relative;padding:0;overflow:hidden}
.legend .spot img{aspect-ratio:1.38;border-radius:0}
.legend .spot>div{padding:0 1rem 1rem}
.legend .category-shelf .tile{grid-template-columns:78px minmax(0,1fr);align-items:center}
.legend .category-shelf .tile img{aspect-ratio:1}
.legend .category-shelf .tile span{padding:0}
@media(max-width:940px){
 .desktop-nav{display:none}
 .category-button{display:inline-flex;align-items:center;gap:.55rem}
 .catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .legend .category-shelf .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
 .topbar{min-height:64px}
 .feature,.skid .feature,.paddock .feature{grid-template-columns:minmax(0,1fr)}
 .night .feature-media{transform:none}
 .feature-media>img,.paddock .feature-media>img{aspect-ratio:1.65;max-height:300px}
 .skid .feature-media{min-height:0}
 .skid .feature-media>img{position:static;height:auto}
 .skid .front-duo,.paddock .front-duo{display:block}
 .game-grid,.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .rank-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .spot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:480px){
 .game-grid,.catalog-grid,.spot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .rank-list,.garage .rank-list{grid-template-columns:1fr}
 .detail,.skid .detail{grid-template-columns:minmax(0,1fr)}
 .skid .detail .detail-cover{grid-column:auto;grid-row:auto}
 .detail-cover{width:min(100%,165px)}
 .legend .category-shelf .tile{grid-template-columns:1fr}
 .legend .category-shelf .tile img{aspect-ratio:1.6}
 .legend .category-shelf .tile span{padding:0 .2rem .3rem}
 .tile span,.spot strong{font-size:.9rem}
 .garage .feature{gap:.65rem}
 .legend .feature-media::after{background:linear-gradient(0deg,#17110b 0%,#17110bc4 52%,#17110b40)}
}

.paddock .desktop-nav a:hover,.paddock .desktop-nav [aria-current]{color:#ffc0ae}

/* Google ad placement. Slot HTML and scripts are supplied by the publisher. */
main.adx-page {
  padding-block-start: 0;
}

.adx-placement {
  display: grid;
  grid-template-columns: minmax(0, 336px);
  justify-content: center;
  padding-block: 50px;
}

.adx-home-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* The 50px on each adjoining ad wrapper completes the viewport gap. */
  min-height: calc(100vh - 100px);
  min-height: calc(100lvh - 100px);
}

.adx-home-between .front-duo > .block {
  margin-block-end: 0;
}

.adx-home-shelves > .category-shelf:first-child {
  margin-block-start: 0;
}

@media (max-width: 400px) {
  .adx-placement {
    margin-inline: -16px;
  }
}