/* ============================================================
   Blocktrix — synthwave landing. Drenched dark neon.
   Display: Tektur (blocky/techno). Body: Manrope.
   ============================================================ */
:root {
  --bg:      #0b0618;
  --bg-2:    #110a26;
  --surface: #160d2e;
  --ink:     #f5f3ff;
  --dim:     #b3a4dd;        /* secondary text — ≥4.5:1 on --bg */
  --line:    rgba(178,158,255,.16);

  --magenta: #ff219e;
  --pink:    #ff4f8c;
  --cyan:    #2ef2ff;
  --purple:  #9c45ff;
  --gold:    #ffd945;
  --green:   #5cff9e;

  --maxw: 1180px;
  --pad:  clamp(1.15rem, 4vw, 3rem);

  --z-nav: 100;

  --ease: cubic-bezier(.16,1,.3,1);            /* ease-out-expo-ish */
  --rise: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  line-height: 1.6;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  /* drenched: faint neon aurora baked into the page bg */
  background-image:
    radial-gradient(60vw 50vw at 82% -8%, rgba(156,69,255,.20), transparent 60%),
    radial-gradient(55vw 45vw at -10% 12%, rgba(255,33,158,.16), transparent 60%),
    radial-gradient(50vw 60vw at 50% 120%, rgba(46,242,255,.12), transparent 60%);
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }
a { color: var(--cyan); text-decoration: none; }
strong, b { color: var(--ink); font-weight: 700; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--cyan); color: #001014; padding: .6rem 1rem; border-radius: 0 0 10px 0;
  font-weight: 700;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* ---------- Headings ---------- */
.h-sec {
  font-family: "Tektur", sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 4rem);
  line-height: .98;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem var(--pad);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.is-stuck { border-bottom-color: var(--line); background: color-mix(in oklab, var(--bg) 86%, transparent); }
.nav__brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); }
.nav__mark {
  width: 18px; height: 18px; border-radius: 4px;
  background: var(--magenta);
  box-shadow: 0 0 0 3px rgba(255,33,158,.18), 6px 6px 0 -2px var(--cyan);
}
.nav__word {
  font-family: "Tektur", sans-serif; font-weight: 800; letter-spacing: .06em;
  font-size: 1.02rem;
}
.nav__links { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.6rem); }
.nav__links a { color: var(--dim); font-weight: 600; font-size: .95rem; transition: color .2s; }
.nav__links a:hover { color: var(--ink); }
.nav__cta {
  color: #07010f !important; background: var(--cyan);
  padding: .5rem .95rem; border-radius: 9px; font-weight: 800 !important;
  box-shadow: 0 0 22px rgba(46,242,255,.4);
}
.nav__cta:hover { background: #fff; }

/* Grouped dropdown menus (Game / Community / Get it) */
.nav__group { position: relative; display: flex; }
.nav__top {
  display: inline-flex; align-items: center; gap: .34rem; padding: 0; border: 0; background: none;
  color: var(--dim); font-family: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: color .2s;
}
.nav__top:hover, .nav__group:hover .nav__top, .nav__group:focus-within .nav__top,
.nav__group.open .nav__top { color: var(--ink); }
.nav__caret { width: .42rem; height: .42rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px,-1px);
  transition: transform .2s ease; opacity: .75; }
.nav__group:hover .nav__caret, .nav__group.open .nav__caret { transform: rotate(-135deg) translate(-1px,-1px); }
.nav__menu {
  position: absolute; top: calc(100% + .6rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 210px; display: flex; flex-direction: column; gap: .1rem; padding: .4rem;
  background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 44px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 10;
  transition: opacity .18s ease, transform .18s ease;
}
.nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu, .nav__group.open .nav__menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav__menu a { padding: .5rem .7rem; border-radius: 8px; font-size: .92rem; color: var(--dim); white-space: nowrap; }
.nav__menu a:hover { color: var(--ink); background: rgba(156,69,255,.16); }
/* invisible bridge so the menu doesn't close while the cursor crosses the gap */
.nav__group::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .7rem; }

/* Hamburger toggle — desktop hides it; mobile shows it and turns the links into a dropdown. */
.nav__toggle {
  display: none; position: relative; z-index: 1;
  width: 42px; height: 38px; padding: 9px 8px; border: 0; border-radius: 9px;
  background: transparent; cursor: pointer; flex-direction: column; justify-content: space-between;
}
.nav__toggle span {
  display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 620px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .1rem;
    padding: .5rem var(--pad) 1rem;
    background: color-mix(in oklab, var(--bg) 94%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
    /* Collapsed by default; opening flips max-height + opacity so it animates cleanly. */
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .3s ease, opacity .2s ease;
  }
  .nav.is-open .nav__links { max-height: 82vh; opacity: 1; pointer-events: auto; overflow: auto; }
  .nav__links a { padding: .85rem .3rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__cta { margin-top: .7rem; text-align: center; }
  /* Grouped menus expand inline on mobile (tap the label), instead of a floating panel. */
  .nav__group { display: block; }
  .nav__top { width: 100%; justify-content: space-between; padding: .85rem .3rem; font-size: 1.05rem;
    border-bottom: 1px solid var(--line); }
  .nav__menu { position: static; transform: none; min-width: 0; display: none; padding: .2rem 0 .4rem .6rem;
    background: none; backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; pointer-events: auto; }
  .nav__group.open .nav__menu { display: flex; transform: none; }
  .nav__menu a { padding: .6rem .3rem; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav__group::after { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: min(94svh, 880px);
  display: grid; align-items: center;
  padding: clamp(4rem, 12vh, 9rem) var(--pad) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.hero__art {
  position: absolute; inset: 0; z-index: -3;
  background: url("assets/hero/hero.jpg") center 38% / cover no-repeat;
  opacity: .9;
}
.hero__rain { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,6,24,.55) 0%, rgba(11,6,24,.2) 30%, rgba(11,6,24,.85) 82%, var(--bg) 100%),
    linear-gradient(90deg, rgba(11,6,24,.5) 0%, rgba(11,6,24,.22) 20%, transparent 42%, transparent 64%, rgba(11,6,24,.3) 84%, rgba(11,6,24,.68) 100%);
}
.hero__inner { max-width: 760px; }
.hero__logo { margin: .4rem 0 0; }
.hero__logo img {
  width: clamp(260px, 46vw, 520px); height: auto;
  filter: drop-shadow(0 0 26px rgba(255,33,158,.55)) drop-shadow(0 0 50px rgba(46,242,255,.3));
}
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Tektur", sans-serif; font-weight: 600; font-size: .76rem;
  letter-spacing: .22em; color: var(--dim);
  padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(22,13,46,.5);
}
.chip span { color: var(--gold); }
.hero__tag {
  font-family: "Tektur", sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.6rem); line-height: 1.05;
  letter-spacing: -0.02em; margin: 1rem 0 .6rem;
  color: #fff; text-shadow: 0 0 24px rgba(46,242,255,.45);
}
.hero__sub { max-width: 56ch; color: var(--ink); font-size: 1.08rem; margin: 0 0 1.7rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
/* Live presence pill — appears only when players are actually online (JS toggles [hidden]). */
.hero__live { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  color: var(--green); font-family: "Tektur", sans-serif; font-size: .82rem; letter-spacing: .02em;
  text-decoration: none; }
.hero__live:hover { text-decoration: underline; }
.hero__live-dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--green);
  box-shadow: 0 0 0 0 rgba(92,255,158,.6); animation: livePulse 2s var(--ease) infinite; }
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(92,255,158,.55); }
  70% { box-shadow: 0 0 0 .5rem rgba(92,255,158,0); }
  100% { box-shadow: 0 0 0 0 rgba(92,255,158,0); }
}
@media (prefers-reduced-motion: reduce) { .hero__live-dot { animation: none; } }
.hero__plats {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  padding: 0; margin: 1.7rem 0 0; color: var(--dim);
  font-family: "Tektur", sans-serif; font-size: .82rem; letter-spacing: .08em;
}
.hero__plats li { position: relative; padding-left: 1.1rem; }
.hero__plats li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 2px; background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid var(--line); border-radius: 14px; z-index: 1;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 2px;
  background: var(--cyan); transform: translateX(-50%);
  animation: scroll 1.8s var(--ease) infinite;
}
@keyframes scroll { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translate(-50%,14px)} }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Tektur", sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  padding: .85rem 1.5rem; border-radius: 11px; border: 0; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn span { transition: transform .25s var(--ease); }
.btn:hover span { transform: translateX(4px); }
.btn--primary {
  color: #0a0010; background: linear-gradient(120deg, var(--magenta), var(--pink));
  box-shadow: 0 0 0 1px rgba(255,79,140,.5), 0 10px 30px -8px rgba(255,33,158,.7);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--pink), 0 16px 40px -8px rgba(255,33,158,.85); }
.btn--ghost {
  color: var(--ink); background: rgba(22,13,46,.6); border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--cyan); color: #fff; box-shadow: 0 0 24px -4px rgba(46,242,255,.5); transform: translateY(-2px); }

/* ---------- Section frame ---------- */
section { padding-block: clamp(3.5rem, 9vh, 7rem); }
.origin, .feature, .worlds, .trio, .gallery, .play { padding-inline: var(--pad); }

/* ---------- Origin band ---------- */
.origin__grid {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
}
.origin__head {
  font-family: "Tektur", sans-serif; font-weight: 900;
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; margin: 0;
}
.origin__head em { font-style: normal; color: var(--magenta); text-shadow: 0 0 26px rgba(255,33,158,.6); }
.origin__body p { margin: 0 0 1rem; color: var(--dim); max-width: 60ch; }
.origin__body strong { color: var(--ink); }
.origin__note { font-weight: 600; }
.origin__note a { color: var(--gold); }
@media (max-width: 760px) { .origin__grid { grid-template-columns: 1fr; gap: 1.2rem; } }

/* ---------- Feature (lead) ---------- */
.feature {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center;
}
.feature__copy .h-sec { color: #fff; }
.feature__copy p { color: var(--dim); max-width: 50ch; }
.feature__copy strong { color: var(--ink); }
.loadout { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .7rem; }
.loadout li {
  position: relative; padding-left: 2rem; font-weight: 600; color: var(--ink);
}
.loadout li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 13px; height: 13px; border-radius: 3px;
  background: var(--accent, var(--cyan)); box-shadow: 0 0 12px var(--accent, var(--cyan));
}
.loadout li[data-c="magenta"] { --accent: var(--magenta); }
.loadout li[data-c="cyan"]    { --accent: var(--cyan); }
.loadout li[data-c="purple"]  { --accent: var(--purple); }
.loadout li[data-c="gold"]    { --accent: var(--gold); }
@media (max-width: 820px) { .feature { grid-template-columns: 1fr; } .feature__shot { order: -1; } }

/* ---------- Shot frames ---------- */
.feature__shot, .worlds__card, .gallery figure {
  margin: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.feature__shot img, .worlds__card img, .gallery figure img { width: 100%; height: auto; }
[data-glow="magenta"] { box-shadow: 0 24px 70px -28px rgba(255,33,158,.7); }
[data-glow="cyan"]    { box-shadow: 0 24px 70px -28px rgba(46,242,255,.6); }

/* ---------- Two worlds ---------- */
.worlds { max-width: var(--maxw); margin-inline: auto; }
.worlds__head { max-width: 60ch; margin-bottom: clamp(1.5rem, 4vw, 2.6rem); }
.worlds__head .h-sec { color: #fff; }
.worlds__head p { color: var(--dim); font-size: 1.1rem; }
.hl { font-weight: 700; }
.hl--magenta { color: var(--magenta); }
.hl--cyan { color: var(--cyan); }
.worlds__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
.worlds__card figcaption {
  padding: .9rem 1.1rem; font-size: .95rem; color: var(--dim);
  border-top: 1px solid var(--line); background: rgba(11,6,24,.4);
}
.worlds__card figcaption b { color: var(--ink); font-family: "Tektur", sans-serif; letter-spacing: .02em; }
@media (max-width: 720px) { .worlds__pair { grid-template-columns: 1fr; } }

/* ---------- Trio ---------- */
.trio {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 4vw, 3rem);
}
.trio__item { padding-top: 1.4rem; border-top: 2px solid var(--line); }
.trio__ico {
  font-size: 1.7rem; line-height: 1; display: inline-block; margin-bottom: .7rem;
  color: var(--c, var(--cyan)); text-shadow: 0 0 16px var(--c, var(--cyan));
}
.trio__ico[data-c="cyan"]   { --c: var(--cyan); }
.trio__ico[data-c="gold"]   { --c: var(--gold); }
.trio__ico[data-c="purple"] { --c: var(--purple); }
.trio h3 { font-family: "Tektur", sans-serif; font-weight: 700; font-size: 1.3rem; margin: 0 0 .4rem; letter-spacing: -0.01em; }
.trio p { color: var(--dim); margin: 0; max-width: 38ch; }
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; gap: 0; } .trio__item { padding-block: 1.3rem; } }

/* ---------- 2.0 Arsenal ---------- */
.arsenal { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.arsenal__head { max-width: 60ch; margin-bottom: clamp(1.5rem, 4vw, 2.6rem); }
.arsenal__head .h-sec { color: #fff; }
.arsenal__head p { color: var(--dim); font-size: 1.1rem; max-width: 58ch; }
.arsenal__shot { margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); max-width: 920px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(124,92,255,.5); }
.arsenal__shot img { width: 100%; height: auto; display: block; }
.arsenal__shot figcaption { padding: .7rem 1.05rem; color: var(--dim); font-size: .95rem; background: rgba(255,255,255,.02); }
.arsenal__shot figcaption b { color: var(--ink); font-family: "Tektur", sans-serif; letter-spacing: .01em; }
.arsenal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 1.6rem); }
.arsenal__card {
  padding: 1.5rem 1.4rem; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.arsenal__ico {
  font-size: 1.9rem; line-height: 1; display: inline-block; margin-bottom: .6rem;
  color: var(--c, var(--cyan)); text-shadow: 0 0 18px var(--c, var(--cyan));
}
.arsenal__card[data-c="magenta"] { --c: var(--magenta); }
.arsenal__card[data-c="cyan"]    { --c: var(--cyan); }
.arsenal__card[data-c="purple"]  { --c: var(--purple); }
.arsenal__card[data-c="gold"]    { --c: var(--gold); }
.arsenal__card h3 { font-family: "Tektur", sans-serif; font-weight: 700; font-size: 1.2rem; margin: 0 0 .4rem; letter-spacing: -0.01em; }
.arsenal__card p { color: var(--dim); margin: 0; font-size: .96rem; }
@media (max-width: 900px) { .arsenal__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .arsenal__grid { grid-template-columns: 1fr; } }

/* "Read more" deep-link under a condensed section — accent set per use via --mc. */
.morelink { display: flex; justify-content: center; margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.morelink a {
  --mc: var(--cyan);
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: Tektur, sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: .01em;
  color: var(--mc); text-decoration: none;
  padding: .66rem 1.25rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mc) 34%, transparent);
  background: color-mix(in srgb, var(--mc) 7%, transparent);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.morelink a:hover {
  border-color: color-mix(in srgb, var(--mc) 72%, transparent);
  background: color-mix(in srgb, var(--mc) 13%, transparent);
}
.morelink a:focus-visible { outline: 2px solid var(--mc); outline-offset: 3px; }
.morelink .arw { transition: transform .18s cubic-bezier(.22,1,.36,1); }
.morelink a:hover .arw { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .morelink a, .morelink .arw { transition: none; } }

/* ---------- Gallery ---------- */
.gallery { max-width: 1320px; margin-inline: auto; }
.gallery .h-sec { color: #fff; text-align: center; margin-bottom: 2rem; }
.gallery__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 540px);
  gap: 1.2rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--purple) transparent;
}
.gallery figure { scroll-snap-align: center; }
.gallery figcaption {
  padding: .8rem 1rem; color: var(--dim); font-size: .92rem;
  border-top: 1px solid var(--line); font-family: "Tektur", sans-serif; letter-spacing: .04em;
}

/* ---------- Play / download ---------- */
.play {
  position: relative; isolation: isolate;
  text-align: center;
  margin: clamp(2rem,6vw,5rem) var(--pad) 0;
  border-radius: 24px; overflow: hidden;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(156,69,255,.25), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  border: 1px solid var(--line);
  padding: clamp(3rem, 8vw, 6rem) var(--pad);
}
.play__inner { max-width: 780px; margin-inline: auto; }
.play__head {
  font-family: "Tektur", sans-serif; font-weight: 900;
  font-size: clamp(2.6rem, 1.6rem + 5vw, 5.5rem); line-height: .9; letter-spacing: -0.03em; margin: 0;
  color: #fff; text-shadow: 0 0 40px rgba(255,33,158,.5);
}
.play__beta {
  font-family: "Tektur", sans-serif; font-weight: 800; font-size: .28em; letter-spacing: .06em;
  vertical-align: middle; text-transform: uppercase; color: var(--bg);
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  padding: .28em .7em; border-radius: 999px; margin-left: .35em; text-shadow: none;
  box-shadow: 0 0 24px -6px var(--magenta); position: relative; top: -.18em;
}
.play__sub { color: var(--dim); font-size: 1.12rem; margin: 1rem auto 2.2rem; max-width: 48ch; }
.play__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1rem; }
.dl {
  display: flex; align-items: center; gap: .9rem; text-align: left;
  padding: 1.1rem 1.15rem; border-radius: 13px;
  background: rgba(22,13,46,.7); border: 1px solid var(--line); color: var(--ink);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.dl__ico { width: 30px; height: 30px; flex: none; }
.dl__txt { display: grid; gap: .15rem; }
.dl__os { font-family: "Tektur", sans-serif; font-weight: 800; font-size: 1.12rem; line-height: 1; }
.dl__meta { color: var(--dim); font-size: .82rem; }
.dl[data-c="cyan"]    .dl__ico { color: var(--cyan); }
.dl[data-c="gold"]    .dl__ico { color: var(--gold); }
.dl[data-c="magenta"] .dl__ico { color: var(--magenta); }
.dl[data-c="purple"]  .dl__ico { color: var(--purple); }
.dl[data-c="cyan"]:hover    { border-color: var(--cyan);    box-shadow: 0 0 30px -6px var(--cyan); }
.dl[data-c="gold"]:hover    { border-color: var(--gold);    box-shadow: 0 0 30px -6px var(--gold); }
.dl[data-c="magenta"]:hover { border-color: var(--magenta); box-shadow: 0 0 30px -6px var(--magenta); }
.dl[data-c="purple"]:hover  { border-color: var(--purple);  box-shadow: 0 0 30px -6px var(--purple); }
.dl:hover { transform: translateY(-3px); }
.play__fine { max-width: 60ch; margin: 1.3rem auto 0; color: var(--dim); font-size: .88rem; line-height: 1.55; }
.play__fine strong { color: var(--ink); }
.play__servers { margin: 2rem 0 0; color: var(--dim); }
.play__servers a { color: var(--gold); font-weight: 600; }
@media (max-width: 620px) { .play__grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot {
  max-width: var(--maxw); margin: clamp(3rem,7vw,6rem) auto 0; padding: 2.4rem var(--pad) 3rem;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; gap: 1.4rem; align-items: start;
}
.foot__brand p { color: var(--dim); margin: .3rem 0 0; font-size: .9rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.foot__links a { color: var(--dim); font-weight: 600; font-size: .92rem; }
.foot__links a:hover { color: var(--cyan); }
.foot__copy { grid-column: 1 / -1; color: var(--dim); font-size: .85rem; margin: .5rem 0 0; }
.foot__copy strong { color: var(--gold); }
@media (max-width: 620px) { .foot { grid-template-columns: 1fr; } }

/* ---------- Reveal motion ----------
   Content is ALWAYS visible by default; .in just plays a one-shot entrance.
   If the observer never runs (headless render, no-JS, reduced motion), nothing
   is hidden — the page can never ship blank. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal.in { animation: rise .7s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll span { animation: none; } }

/* ---------- All-Around champions ---------- */
.champs { padding: clamp(3rem, 7vw, 6rem) var(--pad); }
.champs__inner { max-width: 720px; margin: 0 auto; }
.champs__sub { color: var(--dim); margin: .6rem 0 1.6rem; max-width: 56ch; line-height: 1.6; }
.champs__list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .6rem; counter-reset: champ; }
.champs__list li { display: flex; align-items: baseline; gap: .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .7rem 1rem; }
.champs__list li.champ::before { counter-increment: champ; content: counter(champ);
  font-family: "Manrope", sans-serif; font-weight: 800; color: var(--dim); min-width: 1.4rem; }
.champs__list li.champ:nth-child(1)::before { color: var(--gold); }
.champs__list li.champ:nth-child(2)::before { color: #cfd3e6; }
.champs__list li.champ:nth-child(3)::before { color: #e0a061; }
.champs__name { font-weight: 700; color: var(--ink); flex: 1; text-decoration: none; transition: color .15s ease; }
a.champs__name:hover { color: var(--cyan); text-decoration: none; }
.champs__score { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cyan); }
.champs__empty { color: var(--dim); justify-content: center; }

/* ---------- News / What's new ---------- */
.news { padding: clamp(3rem, 7vw, 6rem) var(--pad); }
.news__inner { max-width: 760px; margin: 0 auto; }
.news .h-sec { color: #fff; }
.news__sub { color: var(--dim); margin: .6rem 0 2rem; line-height: 1.6; }
/* Horizontal paginated carousel: one update per page, so the section stays compact
   however much history piles up. Scroll-snap drives touch/trackpad; JS drives the
   arrows + dots and keeps them in sync with the scroll position. */
.news__carousel { position: relative; }
.news__list { list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  border-radius: 14px; scroll-behavior: smooth; }
.news__list::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .news__list { scroll-behavior: auto; } }
.news__item { flex: 0 0 100%; scroll-snap-align: center; align-self: stretch;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: clamp(1.15rem, 3vw, 1.7rem); }
/* Controls: prev / dots / next, centered under the deck. */
.news__ctrls { display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: 1.15rem; }
.news__arrow { width: 2.2rem; height: 2.2rem; flex: none; display: grid; place-items: center;
  font-family: "Tektur", sans-serif; font-size: 1.5rem; line-height: 1; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; transition: border-color .18s var(--ease), color .18s var(--ease),
  background .18s var(--ease), opacity .18s var(--ease); }
.news__arrow:hover { color: var(--cyan); border-color: rgba(46,242,255,.5); }
.news__arrow:disabled { opacity: .32; cursor: default; }
.news__arrow:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.news__dots { display: flex; align-items: center; gap: .5rem; }
.news__dot { width: .55rem; height: .55rem; padding: 0; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
  transform .18s var(--ease); }
.news__dot:hover { border-color: rgba(46,242,255,.5); }
.news__dot[aria-selected="true"] { background: var(--magenta); border-color: var(--magenta);
  transform: scale(1.15); }
.news__dot:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.news__meta { display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem; flex-wrap: wrap; }
.news__meta time { color: var(--dim); font-size: .85rem; font-variant-numeric: tabular-nums; }
.news__tag { font-family: "Tektur", sans-serif; font-size: .68rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(46,242,255,.4);
  border-radius: 999px; padding: .14rem .6rem; }
.news__build { font-family: "Tektur", sans-serif; font-size: .68rem; letter-spacing: .03em;
  color: var(--dim); font-variant-numeric: tabular-nums; }
.news__item h3 { font-family: "Tektur", sans-serif; font-weight: 700; font-size: 1.15rem;
  letter-spacing: -0.01em; margin: 0 0 .5rem; color: var(--ink); }
.news__item > p { color: var(--dim); margin: 0; line-height: 1.6; }
.news__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.news__pts li { color: var(--dim); line-height: 1.55; padding-left: 1.2rem; position: relative; }
.news__pts li::before { content: "▸"; position: absolute; left: 0; color: var(--magenta); }
.news__pts strong { color: var(--ink); font-weight: 600; }
.news__sub a, .news__pts a, .news__item > p a { color: var(--cyan); }
/* Optional inline figure in a news item (floats beside the bullets on wide cards). */
.news__fig { float: right; margin: .1rem 0 .5rem 1rem; width: clamp(104px, 22%, 148px); }
.news__fig img { display: block; width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.news__fig figcaption { color: var(--dim); font-size: .7rem; text-align: center; margin-top: .35rem; line-height: 1.3; }
@media (max-width: 560px){ .news__fig { float: none; width: 130px; margin: 0 auto .7rem; } }

/* ---------- Old-site top bar ---------- */
.oldsite {
  display: block; text-align: center; background: #000; color: #cbb9ff;
  font-family: "Manrope", sans-serif; font-size: .8rem; letter-spacing: .02em;
  padding: .4rem 1rem; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.oldsite b { color: #fff; }
.oldsite:hover { color: var(--cyan); }

/* ---------- Gallery: auto-scrolling marquee ---------- */
.gallery__strip {
  display: block; overflow: hidden; padding-bottom: 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gallery__track {
  display: flex; width: max-content;
  animation: gallery-scroll 50s linear infinite;
}
.gallery__track:hover { animation-play-state: paused; }
.gallery__track > figure { flex: 0 0 min(80vw, 520px); margin: 0 1.2rem 0 0; }
.gallery__track > figure img, .gallery__track > figure video { display: block; width: 100%; height: auto; }
@keyframes gallery-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .gallery__track { animation: none; }
  .gallery__strip { overflow-x: auto; }
}

/* ---------- Downloads: coming soon ---------- */
.play__soon { text-align: center; margin: .2rem 0 1.1rem; }
.play__soon span {
  display: inline-block; padding: .35rem 1rem; border-radius: 999px;
  background: rgba(255,217,69,.12); border: 1px solid rgba(255,217,69,.4);
  color: var(--gold); font-family: "Tektur", sans-serif;
  font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
}
.play__grid.is-soon { opacity: .6; filter: saturate(.6); pointer-events: none; }
.play__grid.is-soon .dl { position: relative; }
.play__grid.is-soon .dl::after {
  content: "SOON"; position: absolute; top: .5rem; right: .6rem;
  font-family: "Tektur", sans-serif; font-size: .6rem; letter-spacing: .1em;
  color: #0b0618; background: var(--gold); padding: .1rem .4rem; border-radius: 4px;
}

/* ── Founder upsell ─────────────────────────────────────────────────────── */
.founder{padding:clamp(2.5rem,7vw,5rem) clamp(1.1rem,5vw,3rem);max-width:1120px;margin:0 auto}
.founder__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,4vw,3rem);align-items:center;
  background:linear-gradient(155deg,rgba(46,32,10,.55),rgba(10,7,3,.65));border:1px solid rgba(255,196,80,.30);
  border-radius:22px;padding:clamp(1.2rem,3vw,2.4rem);box-shadow:0 0 60px rgba(255,168,40,.12)}
.founder__art img{width:100%;display:block;border-radius:14px;box-shadow:0 10px 44px rgba(255,150,30,.28)}
.founder__eyebrow{color:#ffce5a;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;font-weight:700;margin:0 0 .35em}
.founder__head{font-family:Tektur,sans-serif;font-weight:800;letter-spacing:-.01em;color:#ffcf5e;
  font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.05em 0 .45em;text-shadow:0 2px 24px rgba(255,160,30,.35)}
.founder__desc{color:#ece0c8;max-width:54ch;margin:0 0 1.1em;line-height:1.6}
.founder__list{list-style:none;padding:0;margin:0 0 1.5em;display:grid;gap:.45em}
.founder__list li{color:#dccfac;padding-left:1.5em;position:relative}
.founder__list li::before{content:"\2726";position:absolute;left:0;color:#ffba44}
.founder__buy{display:inline-block;font-family:Tektur,sans-serif;font-weight:700;letter-spacing:.02em;font-size:1.02rem;
  color:#241405;background:linear-gradient(90deg,#ffd64d,#ff9c1e);padding:.9rem 1.7rem;border-radius:999px;
  text-decoration:none;box-shadow:0 8px 32px rgba(255,162,40,.42);transition:filter .15s,transform .15s}
.founder__buy:hover{filter:brightness(1.07);transform:translateY(-1px)}
.founder__note{color:#a3936c;font-size:.86rem;margin:1em 0 0}
/* Limited-offer scarcity badge — filled live from store/founders.php (hidden until it loads). */
.founder__stock{display:inline-flex;align-items:center;gap:.5em;margin:1.1em 0 0;
  font-family:Tektur,sans-serif;font-weight:700;letter-spacing:.02em;font-size:.9rem;color:#ffcf5e;
  background:rgba(255,180,60,.08);border:1px solid rgba(255,190,68,.4);border-radius:999px;padding:.4em .95em}
.founder__stock::before{content:"";width:.55em;height:.55em;border-radius:999px;background:#ffba44;
  box-shadow:0 0 8px rgba(255,186,68,.9)}
.founder__stock b{color:#fff;font-variant-numeric:tabular-nums}
@media(max-width:760px){.founder__inner{grid-template-columns:1fr}.founder__art{order:-1}}
/* Theme Pack — cool-toned variant of the founder block, art on the right */
.founder--pack .founder__inner{grid-template-columns:.95fr 1.05fr;
  background:linear-gradient(155deg,rgba(18,30,52,.6),rgba(6,9,16,.7));border-color:rgba(120,170,255,.3);
  box-shadow:0 0 60px rgba(80,150,255,.12)}
.founder--pack .founder__copy{order:1}
.founder--pack .founder__art{order:2}
.founder--pack .founder__art img{box-shadow:0 10px 44px rgba(80,150,255,.3)}
.founder--pack .founder__eyebrow{color:#7fc6ff}
.founder--pack .founder__head{color:#bfe0ff;text-shadow:0 2px 24px rgba(80,150,255,.35)}
.founder--pack .founder__desc{color:#d7e3f4}
.founder--pack .founder__list li{color:#c3d3e9}
.founder--pack .founder__list li::before{color:#7fc6ff}
.founder--pack .founder__buy{color:#08121f;background:linear-gradient(90deg,#84d4ff,#5b8cff);box-shadow:0 8px 32px rgba(80,150,255,.42)}
.founder--pack .founder__note{color:#8aa0c0}
@media(max-width:760px){.founder--pack .founder__inner{grid-template-columns:1fr}.founder--pack .founder__art{order:-1}}

/* Blocktrix Plus — magenta-toned subscription block, single centred column (no art) */
.founder__inner--solo{grid-template-columns:1fr;max-width:760px;margin-inline:auto;text-align:center}
.founder--plus .founder__inner{background:linear-gradient(155deg,rgba(40,16,52,.62),rgba(8,6,16,.72));
  border-color:rgba(225,120,255,.32);box-shadow:0 0 60px rgba(200,80,255,.13)}
.founder--plus .founder__eyebrow{color:#e79bff}
.founder--plus .founder__head{color:#f0c4ff;text-shadow:0 2px 24px rgba(200,80,255,.4)}
.founder--plus .founder__desc{color:#e8d7f4;margin-inline:auto;max-width:60ch}
.founder--plus .founder__list--grid{grid-template-columns:1fr 1fr;text-align:left;gap:.55em 1.6em;
  max-width:620px;margin-inline:auto}
.founder--plus .founder__list li{color:#d8c3e9}
.founder--plus .founder__list li::before{color:#e79bff}
.founder--plus .founder__buys{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:1.1em}
.founder--plus .founder__buy{color:#120816;background:linear-gradient(90deg,#f1a6ff,#b96bff);
  box-shadow:0 8px 32px rgba(200,80,255,.42)}
.founder--plus .founder__buy--alt{color:#f0c4ff;background:transparent;
  border:1px solid rgba(225,120,255,.55);box-shadow:none}
.founder--plus .founder__buy--alt:hover{background:rgba(225,120,255,.1)}
.founder__save{display:inline-block;margin-left:.4em;font-size:.78em;font-weight:600;opacity:.85}
.founder--plus .founder__note{color:#b596c8}
@media(max-width:620px){.founder--plus .founder__list--grid{grid-template-columns:1fr}}

/* ---- Recent games showcase (home, top of main) ---- */
.recent { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  max-width: 1100px; margin: clamp(1.4rem, 3.5vw, 3rem) auto 0; padding: clamp(1rem, 2.5vw, 1.6rem);
  border-radius: 20px; color: var(--ink); text-decoration: none; position: relative; overflow: hidden;
  background: linear-gradient(120deg, rgba(255,33,158,.13), rgba(46,242,255,.09));
  border: 1px solid rgba(255,33,158,.38);
  box-shadow: 0 0 0 1px rgba(46,242,255,.06), 0 18px 50px -22px rgba(255,33,158,.45);
  transition: transform .2s ease, box-shadow .2s ease; }
.recent:hover { transform: translateY(-3px); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(46,242,255,.14), 0 28px 62px -22px rgba(255,33,158,.6); }
.recent__stage { display: flex; gap: .5rem; flex: 0 0 auto; }
.recent__stage canvas { image-rendering: pixelated; height: 122px; width: auto;
  border-radius: 6px; border: 1px solid var(--line); background: #0a0616; }
.recent__stage canvas.win { border-color: var(--gold); box-shadow: 0 0 18px rgba(255,217,69,.32); }
.recent__body { min-width: 0; }
.recent__eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-family: "Tektur", sans-serif;
  font-weight: 800; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.recent__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(92,255,158,.6); animation: recentPulse 1.8s infinite; }
@keyframes recentPulse { 0% { box-shadow: 0 0 0 0 rgba(92,255,158,.5); }
  70% { box-shadow: 0 0 0 .55rem rgba(92,255,158,0); } 100% { box-shadow: 0 0 0 0 rgba(92,255,158,0); } }
.recent__head { font-family: "Tektur", sans-serif; font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.2rem, 2.6vw, 1.75rem); margin: .4rem 0 .25rem; }
.recent__sub { color: var(--dim); margin: 0 0 .9rem; font-size: .96rem; }
.recent__sub b { color: var(--ink); }
.recent__btn { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #0b0618;
  background: var(--magenta); padding: .5rem 1.05rem; border-radius: 999px; }
.recent:hover .recent__btn { filter: brightness(1.08); }
@media (max-width: 640px) {
  .recent { flex-direction: column; align-items: flex-start; }
  .recent__stage canvas { height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .recent__dot { animation: none; } .recent:hover { transform: none; }
}

/* ---- Hero: two-column (pitch left, live recent-games / gameplay visual right) ---- */
.hero { align-items: start; padding-top: clamp(1.5rem, 5vh, 3.25rem); min-height: min(76svh, 700px); }
.hero__inner { max-width: 1240px; margin: 0 auto; width: 100%; display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(1.4rem, 4vw, 3.4rem);
  align-items: center; }
.hero__col { max-width: 660px; }
/* Black outline on the left-column copy so it stays legible over the art (keeps the tag's cyan glow). */
.hero__tag {
  text-shadow: 0 0 24px rgba(46,242,255,.45),
    1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000,
    1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 0 2px 6px rgba(0,0,0,.5);
}
.hero__sub {
  text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 0 2px 6px rgba(0,0,0,.55);
}
/* The transparent-background wordmark. It "breathes" — dimming the fill + glow and easing back,
   the same slow sine throb the client's main-menu logo uses. */
.hero__logo img { width: clamp(300px, 52vw, 560px); animation: logoBreath 4.4s ease-in-out infinite; }
@keyframes logoBreath {
  0%, 100% { opacity: 1; filter: brightness(1)
    drop-shadow(0 0 26px rgba(255,33,158,.55)) drop-shadow(0 0 50px rgba(46,242,255,.3)); }
  50% { opacity: .74; filter: brightness(.82)
    drop-shadow(0 0 15px rgba(255,33,158,.3)) drop-shadow(0 0 32px rgba(46,242,255,.16)); }
}
@media (prefers-reduced-motion: reduce) { .hero__logo img { animation: none; } }
.hero__visual { position: relative; justify-self: end; width: 100%; max-width: 470px; }
/* static fallback screenshot (shown until a live recent game exists) */
.hero__shot { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.14);
  transform: perspective(1300px) rotateY(-7deg) rotateX(2deg); animation: heroFloat 6.5s ease-in-out infinite;
  box-shadow: 0 34px 80px -22px rgba(255,33,158,.55), 0 0 0 1px rgba(46,242,255,.12); }
.hero__shot img { display: block; width: 100%; height: auto; }
/* live recent-games card, styled for the hero right column */
#recentGames.recent { position: relative; display: flex; flex-direction: column; align-items: stretch;
  gap: .85rem; margin: 0; width: 100%; max-width: 470px; padding: 1rem 1.05rem 1.15rem;
  animation: heroFloat 6.5s ease-in-out infinite; }
#recentGames.recent::before { content: ""; position: absolute; inset: -12%; z-index: -1; border-radius: 26px;
  background: conic-gradient(from 0deg, #ff219e, #9c45ff, #2ef2ff, #5cff9e, #ffd945, #ff219e);
  filter: blur(32px); opacity: .5; animation: heroSpin 13s linear infinite; }
#recentGames.recent:hover { transform: none; animation-play-state: paused; }
#recentGames .recent__stage { justify-content: center; gap: .55rem; }
#recentGames .recent__stage canvas { height: 158px; }
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes heroSpin  { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: none; justify-self: stretch; margin-top: .4rem; }
  .hero__logo img { width: clamp(260px, 62vw, 520px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__shot, #recentGames.recent, #recentGames.recent::before { animation: none; }
}

/* Wide news figure (landscape raid still / clip) — full-width block, not the small floated thumb. */
.news__fig--wide { float: none; width: 100%; max-width: 620px; margin: .2rem 0 .9rem; }
.news__fig--wide img, .news__fig--wide video { display: block; width: 100%; height: auto; border-radius: 10px; }