@media (max-width:960px){.hero{padding:100px 0 40px}}
/* ============ PAGE ACCENT SYSTEM: lime ============ */
:root{--accent:var(--lime);--accent-deep:#5E8A00;--accent-ink:#A6DB2E;--accent-soft:rgba(131,191,0,.22);--acc:131,191,0;--acc-lit:166,219,46}

/* hero headline sized to land in 3 lines like the homepage hero */

/* full-stack glow lines in the page accent */
/* page accent for the remaining interactive elements */
.seg .chip.on{background:rgba(131,191,0,.22);border-color:var(--lime);box-shadow:inset 0 0 0 1px rgba(131,191,0,.5)}

.mm-tools #ddUser .iconbtn{border-color:var(--lime);background:rgba(131,191,0,.12)}
.cta-form::before{background:linear-gradient(140deg,rgba(166,219,46,.7),transparent 45%,transparent 60%,rgba(131,191,0,.4))}
*::-webkit-scrollbar-thumb{background:rgba(131,191,0,.55);background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(131,191,0,.85);background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:rgba(131,191,0,.6) var(--abyss-deep)}
}
/* light section: the accent lines glow softer on white */
/* section rhythm: split heads open these sections, so no mid-section top offset */
/* ============ GAMES PAGE COMPONENTS (ported) ============ */
.showcase{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(30px,4vw,72px);align-items:center}
.show-art{position:relative;align-self:start;aspect-ratio:16/9;border-radius:26px;overflow:hidden;isolation:isolate;
  border:1px solid var(--border-strong);
  background:radial-gradient(120% 96% at 50% 112%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 62%),
    linear-gradient(168deg,var(--abyss-navy) 0%,var(--abyss-deep) 58%,var(--torpedo-black) 100%);
  box-shadow:0 70px 100px -64px rgba(5,5,8,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.show-art .halo{position:absolute;left:50%;top:12%;transform:translateX(-50%);width:74%;aspect-ratio:1;border-radius:50%;
  filter:blur(24px);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 46%,transparent),transparent 66%)}
.show-art .fig{position:absolute;inset:0;z-index:1;border-radius:inherit;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  background-image:url("../img/games/boba.webp");
  background-image:image-set(url("../img/games/boba.avif") type("image/avif"),url("../img/games/boba.webp") type("image/webp"))}
.show-title{margin:18px 0 0;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:.94;
  font-size:clamp(2.1rem,3.6vw,3.2rem);color:#fff}
.show-desc{margin:16px 0 0;max-width:44ch;color:var(--fg-muted);font-size:1.02rem;line-height:1.62}
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:30px}
.specs > div{position:relative;border-radius:16px;padding:14px 14px 13px;border:1px solid transparent}
/* Spec outline: a lime diagonal, the top right and bottom left corners are lime
   and fade out towards the centre and the other sides */
.specs > div::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(45deg,
    color-mix(in srgb,var(--lime) 38%,transparent),
    transparent 50%,
    color-mix(in srgb,var(--lime) 38%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none}
.spec-l{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-subtle);white-space:nowrap}
.spec-v{display:block;margin-top:9px;font-family:var(--font-display);font-weight:800;line-height:1.05;
  font-size:clamp(1.05rem,1.5vw,1.35rem);color:#fff}
.show-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.show-cta .btn.ghost{color:#fff;border-color:transparent}
.show-cta .btn.ghost:hover{color:#fff;border-color:transparent}
/* The copy column gets the full width well before it has to. Below this the spec
   labels, which do not wrap, start pushing out of their cells. */
@media (max-width:1199px){
.showcase{grid-template-columns:1fr;gap:34px}
.show-art{order:-1;margin-inline:0;width:100%}
}
@media (max-width:900px){
.specs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.soon-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.soon-card{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;padding:20px 20px 24px;
  border:1px dashed var(--border-strong);background:linear-gradient(180deg,#ffffff,#EDF2F8)}

/* The title took over the slot the running number used to hold, at the same
   size. Line height opens up a little because a game name wraps and 02 did not. */
.soon-t{display:block;margin:20px 0 0;font-family:var(--font-display);font-weight:800;
  font-size:1.4rem;line-height:1.15;color:#0A1120}
.soon-d{margin:6px 0 0;font-size:.9rem;letter-spacing:.02em;line-height:1.5;color:var(--fg-muted)}
@media (max-width:820px){
.soon-row{grid-template-columns:1fr}
.soon-card{padding:18px 18px 22px}
}
.mnum{display:block;font-family:var(--font-display);font-weight:800;font-size:.78rem;letter-spacing:.18em;color:var(--fg-muted);margin-bottom:14px}
/* ===== PROOF: radial carousel =====
   12 slots, 4 unique cards repeated 3 times, so 360/12 = 30deg per step and the
   loop closes without a seam. Card positions come from JS, everything else is CSS. */
/* --- Method & Proof as LIGHT islands within dark theme --- */
.method,.soon,.statement{
  --bg:#F4F8FC;--bg-alt:#EBF1F8;--surface:#fff;
  --fg:#050508;--fg-muted:#48546B;--fg-subtle:#727E93;
  --border:rgba(9,20,39,.10);--border-strong:rgba(9,20,39,.16);--grid:rgba(9,20,39,.055);
  --stroke-ghost:rgba(9,20,39,.17);--stroke-ghost-soft:rgba(9,20,39,.10);
  --brand-deep:#123D91;--accent-ink:#83BF00;--accent-soft:rgba(131,191,0,.12);
  background:#F4F8FC;color:#050508}
/* arc: rules missed on the first porting pass */
/* off-screen twin of the cards. It is measured, never seen, so the card height
   can follow the copy instead of a hard coded guess that clips the longest one. */
/* custom hero background art */
.sbg-photo{background:url(../img/hero/games.webp) center/cover no-repeat #060D1A}
/* hero: mascot card with soft 3D push-away tilt */
/* ==== fixes: heading ink per section, brand-blue cards, custom panel bg ==== */
#soon .ltop:not(.hl-accent){color:#07090F}
#soon .lbase{-webkit-text-stroke-color:rgba(9,20,39,.17)}

/* hero card: rocket mascot, nose up for flight feel */
/* mascot handled by .mclip stack below */
/* roadmap covers: brand gradient with Coming Soon label */
/* Roadmap covers. Each title overrides the image layer only, so size and position
   keep coming from here; the gradient stays as the fallback if art fails to load. */
/* square, because the new key art is square: matching the box to the art is what
   keeps background-size:cover from cropping anything */
.soon-art{position:relative;display:block;aspect-ratio:1;border-radius:15px;border:1px solid var(--border);
  background-size:cover;background-position:center;background-image:
  radial-gradient(120% 110% at 86% 112%,rgba(131,191,0,.25),transparent 55%),
  radial-gradient(90% 90% at 12% -8%,rgba(60,99,255,.4),transparent 60%),
  linear-gradient(135deg,#071022 0%,#0E2A5C 55%,#0B1730 100%)}
.soon-art.g-street{background-image:url("../img/games/soon-street.webp");
  background-image:image-set(url("../img/games/soon-street.avif") type("image/avif"),url("../img/games/soon-street.webp") type("image/webp"))}
.soon-art.g-miner{background-image:url("../img/games/soon-miner.webp");
  background-image:image-set(url("../img/games/soon-miner.avif") type("image/avif"),url("../img/games/soon-miner.webp") type("image/webp"))}
.soon-art.g-market{background-image:url("../img/games/soon-market.webp");
  background-image:image-set(url("../img/games/soon-market.avif") type("image/avif"),url("../img/games/soon-market.webp") type("image/webp"))}

@keyframes logoShimmer{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(90,165,255,0))}50%{filter:brightness(1.22) drop-shadow(0 0 1.5px rgba(90,165,255,.35))}}

/* static-bg model: page background rides on a scrolling wrapper and covers the fixed hero art;
   layers re-based from doc-space to wrapper-space (body keeps its copy as a safety net) */

/* page-accent fx: ghost ring / orbit / glows follow the page palette */
:root{--fx-deep:131,191,0;--fx-mid:166,219,46;--fx-hi:214,240,150}

/* partner + streamer programmes (new sections) */
.partner-cards .pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,32px)}
.pcard{position:relative;border:1px solid rgba(150,180,255,.14);border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
  padding:clamp(26px,2.8vw,40px);display:flex;flex-direction:column;gap:14px;
  transition:border-color .5s ease,transform .5s ease}
.pcard:hover{border-color:var(--accent-soft);transform:translateY(-3px)}
.pcard-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  color:var(--accent-ink);background:var(--accent-soft)}
.pcard-ic svg{width:26px;height:26px}
.pcard-t{margin:6px 0 0;font-size:clamp(1.4rem,1.8vw,1.9rem);line-height:1.14;letter-spacing:-.01em}
.pcard-p{margin:0;font-size:16px;line-height:1.62;color:var(--fg)}
.pcard-sub{margin-top:6px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);font-weight:700}
.pcard-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pcard-list li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.5}
.pcard-list li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;
  border-radius:50%;background:var(--accent-soft);
  box-shadow:0 0 0 3px rgba(131,191,0,.10)}
.pcard .btn.accent{margin-top:auto;align-self:flex-start}
@media(max-width:860px){
  .partner-cards .pcards{grid-template-columns:1fr}
}

/* tighten gap between "Partner with" intro and the programme cards */
.partner-intro{padding-bottom:0}
.partner-cards{padding-top:clamp(22px,3vw,40px)}
/* lime-forward card borders + minimalist frameless icons */
.pcard{border-color:rgba(166,219,46,.34)}
.pcard:hover{border-color:rgba(166,219,46,.6)}
.pcard-ic{width:auto;height:auto;border-radius:0;background:none;color:var(--accent-ink)}
.pcard-ic svg{width:30px;height:30px}

/* partner section: figure on the right, translucent (mirrors One/Core decorative marks) */
#partner{position:relative;overflow:hidden}
#partner .shell{position:relative;z-index:1}
.partner-mark{position:absolute;z-index:0;pointer-events:none;
  top:50%;right:calc(-1 * clamp(120px,12vw,240px));transform:translateY(-50%) rotate(10deg);
  height:min(112%,600px);aspect-ratio:1;
  background:url("../img/marks/partners.webp") center/contain no-repeat;
  opacity:.16;filter:brightness(.72)}
@media(max-width:760px){
  .partner-mark{height:min(120vw,540px);top:auto;bottom:-4%;
    right:calc(-1 * min(58vw,280px));transform:rotate(10deg)}
}

/* ===== Games partner section fixes ===== */
#partner-programmes .pcard:nth-child(2) .btn.ghost{box-shadow:none}
/* 2. Our First Release: title + copy on one row with a divider */
#featured .sec-head-split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(24px,3.5vw,44px);align-items:start}
@media(max-width:860px){#featured .sec-head-split{grid-template-columns:1fr;gap:16px}}
#featured .sec-head-split .lead,
#stay-connected .sec-head-split .lead{margin:0;max-width:62ch;
  border-left:1px solid rgba(166,219,46,.24);padding-left:clamp(24px,3.5vw,44px)}
@media(max-width:860px){
  #featured .sec-head-split .lead,
  #stay-connected .sec-head-split .lead{border-left:0;padding-left:0}
}
/* 4. tighten the gap between partner intro copy and the cards */
.partner-intro{padding-bottom:clamp(20px,2.4vw,36px)}
.partner-cards{padding-top:0;margin-top:calc(-1 * clamp(10px,1.4vw,22px))}
/* 4. remove the glow behind the streamer (2nd) card button */
/* 5. Stay Connected: bottom border to match the top one */
#stay-connected{border-bottom:1px solid rgba(150,180,255,.06)}

/* 1. ghost button was stretching full-width like accent needs same compact rule */
.pcard .btn{margin-top:auto;align-self:flex-start}
/* 2. icons: left-aligned with breathing room below */
.pcard-ic{justify-self:start;margin:0 0 6px}
/* 3. background image was clipped by cards block: give the intro real bottom padding
      and stop clipping the decorative mark at the section */
.partner-intro{padding-bottom:clamp(40px,6vw,90px)}
#partner{overflow:visible}
.partner-cards{padding-top:0;border-top:0}
/* 1. remove the divider line between heading and cards */
.partner-intro + .partner-cards, .partner-cards.sec{border-top:0}
/* 2. icons: truly left-aligned (flex column needs align-self) + 24px gap below */
.pcard-ic{align-self:flex-start;justify-self:start;margin:0 0 10px}
/* 3. >=24px gap between list and CTA button */
.pcard .btn{margin-top:12px}

/* 4. two-column header (title left, copy right, divider between) like Home.
      Two lead paragraphs stack in the right column. */
.partner-intro .sec-head-split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(24px,3.5vw,44px);align-items:start}
.partner-intro .sec-head-split .fill{margin-bottom:0}
.partner-intro .sec-head-split .split-copy{border-left:1px solid rgba(166,219,46,.24);padding-left:clamp(24px,3.5vw,44px)}
.partner-intro .sec-head-split .split-copy .lead{margin:0;max-width:60ch}
.partner-intro .sec-head-split .split-copy .lead + .lead{margin-top:16px}
@media(max-width:860px){
  .partner-intro .sec-head-split{grid-template-columns:1fr;gap:16px}
  .partner-intro .sec-head-split .split-copy{border-left:0;padding-left:0}
}
/* 5. more interesting card lists: framed rows with lime tick + hairline separators */
.pcard-list li{position:relative;padding:11px 0 11px 26px;font-size:15px;line-height:1.45;
  border-top:1px solid rgba(150,180,255,.10)}
.pcard-list li:first-child{border-top:0}
.pcard-list li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(45deg);
  width:12px;height:12px;border-radius:2px;background:rgba(166,219,46,.18);
  box-shadow:inset 0 0 0 1.5px var(--accent-ink)}
.pcard-list li::after{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:4px;height:4px;border-radius:1px;background:var(--accent-ink)}

/* Stay Connected: two columns - copy left, subscribe form + socials right */
#stay-connected .stay-grid{display:grid;
  grid-template-columns:1fr 1px 1fr;
  column-gap:clamp(20px,2.6vw,32px);align-items:start}
#stay-connected .stay-grid::before{content:"";grid-column:2;grid-row:1;align-self:stretch;
  width:1px;min-height:100%;background:rgba(166,219,46,.24)}
.stay-copy{grid-column:1}
.stay-copy .lead{margin-top:16px;max-width:52ch}
.stay-panel{grid-column:3}
.stay-sub{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--accent-ink);margin-bottom:14px}
.stay-form{display:flex;gap:10px;flex-wrap:wrap}
.stay-input{flex:1 1 220px;min-width:0;height:52px;padding:0 18px;border-radius:14px;
  border:1px solid rgba(150,180,255,.18);background:rgba(255,255,255,.03);color:#fff;
  font-size:15px;outline:none;transition:border-color .3s ease}
.stay-input::placeholder{color:rgba(255,255,255,.4)}
.stay-input:focus{border-color:rgba(166,219,46,.5)}
.stay-btn{height:52px;flex:0 0 auto}
.stay-social{display:flex;gap:12px;margin-top:22px}
.stay-soc{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(150,180,255,.16);background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.72);transition:all .3s ease}
.stay-soc svg{width:20px;height:20px}
.stay-soc:hover{color:#fff;border-color:rgba(166,219,46,.5);
  background:rgba(166,219,46,.10);transform:translateY(-2px)}
@media(max-width:860px){
  #stay-connected .stay-grid{grid-template-columns:1fr;gap:24px}
  #stay-connected .stay-grid::before{display:none}
  .stay-copy,.stay-panel{grid-column:1}
}

/* very narrow: keep subscribe button inline with input, collapse to a round arrow-only button */
@media(max-width:480px){
  .stay-form{flex-wrap:nowrap;gap:8px}
  .stay-input{flex:1 1 auto;min-width:0}
  .stay-btn{flex:0 0 auto;width:52px;min-width:52px;padding:0;border-radius:50%;justify-content:center}
  .stay-btn .stay-btn-t{display:none}
  .stay-btn .i{margin:0}
}
.shared-bg .sbg-photo{transform-origin:100% 100%;will-change:transform;animation:sbgImgIn 1.35s .12s cubic-bezier(.22,.8,.3,1) backwards}

/* ===== games-no-mascot ===== */
/* mirror core/one: single column, copy left */
.hero .hero-title{font-size:clamp(3rem,6.6vw,6rem)}

/* ===== games-arc-outline ===== */
/* card deck: frameless, no panel at all */
@keyframes certScroll{to{transform:translateX(-50%)}}

/* ===== glass-fx-css ===== */
/* WebGL ribbed glass hero background: the canvas sits next to the poster over the
   static webp, which stays as the poster before the first frame, without WebGL
   and on context loss. The canvas crossfades in after the first frame. */

/* ===== games-btn-unify ===== */
/* Buttons: header is a lime fill with white text; hero has none; Play demo and
   Game sheet follow the hero CTA style, shadows plus a glass ghost that hovers to
   lime, accent stays as it is. authbtn is left alone. */
#hdr .btn.accent:not(.authbtn){background:var(--lime);color:#fff;border-color:transparent}
#hdr .btn.accent:not(.authbtn):hover{background:color-mix(in srgb,var(--lime) 86%,#fff);color:#fff}
.show-cta .btn{box-shadow:0 12px 30px -16px rgba(3,7,20,.72)}
.show-cta .btn:hover{box-shadow:0 18px 40px -18px rgba(3,7,20,.82)}
.show-cta .btn.ghost{color:#fff;border-color:transparent}

/* ===== mobile-bg-pos ===== */
/* phones: anchor the hero art by its dark side to keep the copy readable */
@media (max-width:768px){.shared-bg .sbg-photo{background-position:0% 50%}
.shared-bg .sbg-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(9,20,39,.62) 0%,rgba(9,20,39,.34) 34%,rgba(9,20,39,.06) 62%,transparent 80%)}}

/* ===== games-arc-mobile ===== */
@media (max-width:620px){
  /* wheel goes edge to edge: its center = screen center, side cards clip exactly at screen edges */
    /* cheaper paint while the wheel animates */
    /* label to logo ribbon: tight */
  .certs{gap:8px;margin-top:34px;padding-top:24px}}

/* ===== games-hero-center ===== */
/* width:100% is what keeps this a stretched grid item. Auto inline margins alone turn a
   grid item shrink to fit, so the block was as wide as its own longest line and its
   width moved with the text; a definite width centres it without that coupling.
   align-items had nothing to align, the element is a block. */
.hl2{grid-area:copy;width:100%;max-width:min(900px,92vw);margin-inline:auto;text-align:center}.hero-title{text-align:center}.hero-lead{margin-left:auto;margin-right:auto;text-align:center}

/* ===== games-glass-btn ===== */
.btn{background:rgba(255,255,255,.055);color:var(--fg);border:1px solid rgba(150,180,255,.20);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 30px -22px rgba(0,0,0,.7)}.btn:hover{transform:translateY(-2px);border-color:rgba(150,180,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 40px -20px rgba(0,0,0,.7)}.btn.ghost:hover{transform:translateY(-2px)}
.statement .ltop.hl-accent{color:#07090F}
/* statement fill on light: dark ink like the source */
.statement .ltop{color:#07090F}
.statement .ltop.hl-accent{color:#07090F}