/* GachaData — HOMEPAGE-ONLY CSS (ported from the approved gan-preview design).
   Only the homepage-specific pieces live here; shared tokens/nav/buttons/footer/cards come from
   site.css. Preview design tokens are remapped to the shared v2 tokens:
     --panel-3/-2 -> --bg-soft/--panel · --stroke -> --line · --stroke-strong -> --line-strong
     --ink-soft -> --mut · --ink-faint -> --faint · --accent -> --brand · --accent-deep -> --brand-deep
     --font-display -> --disp · --font-alt -> --alt · --font-mono -> --alt (Space Grotesk numerals)
   The hero accent FIELD is driven by --g1/--g2 (already shared, reskinned per atlas game via JS). */

/* a couple of homepage-local surface tokens the preview used that site.css doesn't name */
:root{ --panel-3:var(--bg-soft); --node-ink:var(--ink); --hease:cubic-bezier(.22,.61,.36,1); }

/* ---------------- HERO ---------------- */
.home-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:0;
  min-height:calc(100dvh - 61px);display:flex;flex-direction:column;justify-content:center}   /* fill the viewport below the sticky nav, content vertically centered */
.home-hero .field{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 70% at 88% 4%,color-mix(in srgb,var(--g1) 42%,transparent),transparent 66%),
    radial-gradient(50% 62% at 100% 60%,color-mix(in srgb,var(--g2) 34%,transparent),transparent 70%),
    radial-gradient(60% 70% at 6% 100%,color-mix(in srgb,var(--brand-deep) 16%,transparent),transparent 72%)}

/* ---- HERO SPECIMEN RAIL — living archive of portrait tiles gliding past ---- */
.home-hero .rail{position:absolute;z-index:1;top:0;right:0;bottom:0;width:min(58%,820px);pointer-events:none;
  display:flex;gap:16px;justify-content:flex-end;padding:0 clamp(10px,3vw,46px) 0 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%),linear-gradient(180deg,transparent 0,#000 9%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mask-image:linear-gradient(90deg,transparent 0,#000 40%),linear-gradient(180deg,transparent 0,#000 9%,#000 90%,transparent 100%);
  opacity:0;animation:railin 1.2s var(--hease) .15s forwards}
@keyframes railin{to{opacity:1}}
.home-hero .rail .col{flex:none;width:clamp(78px,9vw,110px);display:flex;flex-direction:column;gap:14px;
  will-change:transform;animation:railroll var(--dur,40s) linear infinite}
.home-hero .rail .col.down{animation-direction:reverse}
.home-hero .rail .col:nth-child(1){--dur:44s}
.home-hero .rail .col:nth-child(2){--dur:34s;margin-top:-46px}
.home-hero .rail .col:nth-child(3){--dur:52s;margin-top:-24px}
.home-hero .rail .col:nth-child(4){--dur:40s;margin-top:-60px}
@keyframes railroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
/* set by home.js (IntersectionObserver) when the element scrolls out of view — an infinite animation
   nobody can see still costs a composite every frame. Purely a cost cut: the visible state is unchanged. */
.home-hero .rail.anim-off .col,.tk-track.anim-off{animation-play-state:paused}
/* NO HOVER-PAUSE ON THE RAIL. It used to be `.home-hero:hover`, which is the whole top viewport —
   headline, lead, both CTAs, stat strip — so the mosaic froze whenever the cursor was anywhere near
   the copy or reaching for "Pick your game", i.e. almost always. It read as the animation being
   broken. It cannot be scoped to the rail instead: .rail is pointer-events:none and aria-hidden,
   purely decorative, so .rail:hover can never fire.
   WCAG 2.2.2 still holds — the mechanism for stopping it is prefers-reduced-motion, honoured for
   this element specifically further down this file and globally in site.css. The TICKER keeps its
   hover-pause: it is scoped to itself, it carries readable text, and stopping it to read a title is
   the point. */
.home-hero .rail .spec{position:relative;aspect-ratio:1;width:100%;overflow:hidden;flex:none;
  background:color-mix(in srgb,var(--panel-3) 88%,var(--g1) 12%);
  border:1px solid color-mix(in srgb,var(--g1) 30%,var(--line-strong));
  box-shadow:0 14px 30px -14px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.03);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.home-hero .rail .spec img{width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:saturate(.62) contrast(1.03) brightness(.92)}
.home-hero .rail .spec::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(155deg,color-mix(in srgb,var(--g1) 26%,transparent),transparent 62%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px),
    linear-gradient(0deg,rgba(4,6,12,.5),transparent 55%)}
.home-hero .rail .spec.gone{display:none}
.home-hero .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(103deg,var(--bg) 0,var(--bg) 42%,color-mix(in srgb,var(--bg) 84%,transparent) 56%,transparent 78%),
    linear-gradient(0deg,var(--bg) 0,transparent 26%)}
.home-hero .veil{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,var(--bg),transparent)}
.home-hero-inner{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:44px 26px 40px}
.home-hero .copy{max-width:660px}
.home-hero h1{font-family:var(--disp);font-weight:900;font-style:italic;letter-spacing:-.02em;line-height:.9;
  text-transform:uppercase;font-size:clamp(38px,6.1vw,74px);margin:.24em 0 0}
.home-hero h1 .l2{display:block}
.home-hero .lead{font-size:clamp(16px,2.1vw,19px);color:var(--mut);max-width:52ch;margin:24px 0 0}
.home-hero .lead b{color:var(--ink);font-weight:600}
.home-hero .cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.home-hero .btn{font-size:16px;padding:15px 26px}
.home-hero .btn.ghost .fav{width:22px;height:22px;overflow:hidden;flex:none;border:1px solid var(--line-strong)}
.home-hero .btn.ghost .fav img{width:100%;height:100%;object-fit:cover}
/* full-screen hero scroll cue */
.scrollcue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;color:var(--faint);
  opacity:.65;transition:color .2s,opacity .2s;animation:cuebob 1.9s ease-in-out infinite}
.scrollcue svg{width:26px;height:26px;display:block}
.scrollcue:hover{color:var(--brand);opacity:1;text-decoration:none}
@keyframes cuebob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
@media(max-height:760px){.scrollcue{display:none}}   /* only when the centered hero leaves room below */
@media(prefers-reduced-motion:reduce){.scrollcue{animation:none}}

/* STAT STRIP under the hero copy */
.statstrip{display:flex;flex-wrap:wrap;gap:0;margin-top:36px;width:fit-content;border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 70%,transparent);backdrop-filter:blur(8px);
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px)}
.statstrip .s{padding:14px 22px 13px;border-right:1px solid var(--line);position:relative}
.statstrip .s:last-child{border-right:0}
.statstrip .n{font-family:var(--alt);font-weight:700;font-size:clamp(22px,3.2vw,26px);line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.statstrip .n .pl{color:var(--brand);margin-left:1px}
.statstrip .n.hot{color:var(--brand)}
.statstrip .k{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:6px}

/* ---- HERO ATLAS (interactive per-game dataset fan) ---- */
.atlaswrap{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:6px 26px 60px}
.atlas{position:relative;border:1px solid var(--line-strong);overflow:hidden;
  background:linear-gradient(165deg,var(--bg-soft),var(--panel));box-shadow:var(--shadow);
  clip-path:polygon(0 0,100% 0,100% 100%,22px 100%,0 calc(100% - 22px))}
.atlas::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;z-index:4;
  background:linear-gradient(180deg,var(--g1),var(--g2))}
.atlas .ribbon{position:absolute;top:14px;right:-40px;z-index:5;transform:rotate(45deg);
  background:linear-gradient(96deg,var(--g1),var(--g2));color:#fff;font-family:var(--alt);font-weight:700;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:5px 52px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.atlas .ribbon.growing{background:linear-gradient(96deg,var(--faint),var(--dim))}
/* promo scene panel (right side of the atlas) */
.atlas .ascene{position:absolute;top:0;right:0;bottom:0;width:min(40%,340px);overflow:hidden;z-index:1;
  clip-path:polygon(72px 0,100% 0,100% 100%,0 100%);
  background:linear-gradient(200deg,color-mix(in srgb,var(--g1) 24%,var(--bg-soft)),var(--bg-soft) 76%)}
.atlas .ascene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:saturate(1.08)}
.atlas .ascene .asc-veil{position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg-soft) 0,color-mix(in srgb,var(--bg-soft) 40%,transparent) 40%,transparent 66%),
    linear-gradient(0deg,color-mix(in srgb,var(--bg-soft) 55%,transparent) 0,transparent 40%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 4px)}
.atlas .ascene::after{content:"";position:absolute;left:72px;bottom:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--g1),var(--g2))}
.atlas .inner{position:relative;z-index:2;padding:22px 24px 20px 26px;margin-right:min(34%,300px)}
.switchwrap{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.switchwrap .fanlabel.sw{color:var(--brand);margin:0 0 10px}
.switchwrap .fanlabel.sw::before{background:var(--brand)}
.atlas .ah{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;padding-right:40px}
.atlas .ah .who{display:flex;align-items:center;gap:13px;min-width:0}
.atlas .ah .badge{width:44px;height:44px;flex:none;position:relative;
  background:linear-gradient(140deg,var(--g1),var(--g2));
  clip-path:polygon(50% 0,100% 27%,100% 73%,50% 100%,0 73%,0 27%);
  box-shadow:0 6px 18px -6px color-mix(in srgb,var(--g1) 80%,transparent)}
.atlas .ah .who>div{min-width:0}   /* let the name column shrink so a long name wraps instead of overrunning the count */
.atlas .ah .nm{font-family:var(--disp);font-weight:800;font-style:italic;font-size:22px;
  letter-spacing:-.01em;text-transform:uppercase;line-height:1.05;white-space:normal;overflow-wrap:anywhere}
.atlas .ah .sub{font-family:var(--alt);font-size:11.5px;color:var(--faint);letter-spacing:.04em;
  text-transform:uppercase;font-weight:500;margin-top:4px}
.atlas .ah .count{text-align:right;flex:none}
.atlas .ah .count .cn{font-family:var(--alt);font-weight:700;font-size:30px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.atlas .ah .count .cl{font-family:var(--alt);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:4px}
.fanlabel{font-family:var(--alt);font-weight:600;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin:16px 0 10px;display:flex;align-items:center;gap:10px}
.fanlabel::before{content:"";width:14px;height:2px;background:var(--g1)}
.fanlabel::after{content:"";flex:1;height:1px;background:var(--line)}
.nodes{display:flex;flex-wrap:wrap;gap:7px}
.node{position:relative;font-family:var(--alt);font-size:12.5px;font-weight:500;color:var(--node-ink);
  border:1px solid var(--line);padding:8px 12px 8px 30px;background:var(--panel);white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% 100%,5px 100%,0 calc(100% - 5px));animation:nodein .5s var(--hease) both}
.node svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;
  stroke:var(--g1);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.node.native{color:var(--mut)}
.node.native svg{stroke:var(--faint)}
.node.tool{background:linear-gradient(120deg,color-mix(in srgb,var(--g1) 18%,var(--panel)),var(--panel));
  border-color:color-mix(in srgb,var(--g1) 40%,var(--line));color:var(--ink);font-weight:600}
a.node.tool{text-decoration:none;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
a.node.tool:hover{border-color:color-mix(in srgb,var(--g1) 75%,var(--line));transform:translateY(-1px);
  box-shadow:0 5px 16px -7px color-mix(in srgb,var(--g1) 75%,transparent)}
a.node.tool:focus-visible{outline:2px solid var(--g1);outline-offset:2px}
@keyframes nodein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.switch{display:flex;gap:6px;flex-wrap:wrap}
.swpill{font-family:var(--alt);font-weight:600;font-size:11.5px;color:var(--mut);cursor:pointer;
  border:1px solid var(--line);background:var(--panel);padding:7px 12px;transition:.2s var(--hease);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;letter-spacing:.03em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% 100%,4px 100%,0 calc(100% - 4px))}
.swpill .dt{width:8px;height:8px;background:linear-gradient(135deg,var(--p1),var(--p2))}
.swpill:hover{border-color:var(--line-strong);color:var(--ink)}
.swpill[aria-selected="true"]{color:#fff;border-color:transparent;
  background:linear-gradient(120deg,var(--p1),var(--p2))}
.swpill[aria-selected="true"] .dt{background:rgba(255,255,255,.9)}
.swpill:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------------- SECTION SHELL (homepage rich headers) ---------------- */
.home-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.home-sec-head .lft{position:relative;padding-left:18px}
.home-sec-head .lft::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;
  background:linear-gradient(180deg,var(--brand),var(--brand-deep))}
.home-sec-head .kicker{font-family:var(--alt);font-weight:600;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);display:flex;align-items:center;gap:10px}
.home-sec-head h2{font-family:var(--disp);font-weight:900;font-style:italic;font-size:clamp(32px,5.4vw,58px);
  letter-spacing:-.02em;margin-top:10px;line-height:.92;text-transform:uppercase}
.home-sec-head p{color:var(--mut);max-width:58ch;margin-top:14px;font-size:15.5px}
.home-sec-head p em{color:var(--ink);font-style:normal;font-weight:600}

/* ---------------- GAMES — GRID OF CARDS ---------------- */
.games{padding:80px 0 34px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.gcard{position:relative;display:block;overflow:hidden;color:var(--ink);text-decoration:none;
  background:linear-gradient(120deg,color-mix(in srgb,var(--g1a) 20%,var(--panel)) 0,var(--panel) 66%);
  border:1px solid var(--line);transition:.3s var(--hease);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.gcard:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow);text-decoration:none}
.gcard:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.gc-art{display:flex;gap:2px;height:120px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px)}
.gc-art-cell{flex:1;overflow:hidden;background:rgba(0,0,0,.3)}
.gc-art-cell img{width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(1.1)}
.gc-art.empty{background:linear-gradient(135deg,var(--g1a),var(--g2a));opacity:.5}
.gc-body{padding:16px 20px 17px}
.gcard .gn{font-family:var(--disp);font-weight:900;font-style:italic;font-size:22px;line-height:1.05;
  text-transform:uppercase;letter-spacing:-.01em}
.gcard .gmeta{margin-top:6px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gcard .gmeta .pub{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard .gmeta .cnt{font-family:var(--alt);font-weight:700;font-size:13px;color:var(--mut);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gcard .chips{margin-top:11px;display:flex;flex-wrap:wrap;gap:6px}
.gcard .chips .chip{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--mut);
  background:rgba(0,0,0,.28);border:1px solid var(--line-strong);padding:3px 8px;
  clip-path:polygon(5px 0,100% 0,100% 100%,0 100%,0 5px)}
[data-theme="light"] .gcard .chips .chip{background:color-mix(in srgb,var(--g1a) 10%,#fff)}
.gcard.soon{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:22px;
  background:none;border:1px dashed var(--line-strong)}
.gcard.soon .gn{color:var(--ink)}
.gcard.soon .sd{font-size:13.5px;color:var(--faint);line-height:1.5}

/* ---------------- PIPELINE — "launching here on day one" ---------------- */
.pipe{padding:70px 0 40px;position:relative;z-index:2}
.pipe-banner{position:relative;border:1px solid var(--line-strong);background:var(--bg-soft);overflow:hidden;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:22px 26px;
  clip-path:polygon(0 0,100% 0,100% 100%,16px 100%,0 calc(100% - 16px))}
.pipe-banner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--brand),var(--brand-deep))}
.pipe-banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--brand) 6%,transparent) 0 12px,transparent 12px 30px);
  opacity:.5;mask:linear-gradient(90deg,transparent,#000 60%)}
.pipe-banner .bl{position:relative;z-index:2;padding-left:6px}
.pipe-banner .bl .kick{font-family:var(--alt);font-weight:600;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);display:flex;align-items:center;gap:9px}
.pipe-banner .bl .kick .pulse{width:7px;height:7px;background:var(--brand);flex:none;box-shadow:0 0 8px var(--brand)}
.pipe-banner .bl h2{font-family:var(--disp);font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(26px,4.2vw,42px);letter-spacing:-.02em;line-height:.94;margin-top:9px}
.pipe-banner .bl h2 em{font-style:italic;color:transparent;
  background:linear-gradient(96deg,var(--brand),var(--brand-deep));-webkit-background-clip:text;background-clip:text}
.pipe-banner .bp{position:relative;z-index:2;font-size:14px;color:var(--mut);max-width:42ch;flex:1;min-width:240px}
.pipe-banner .bnum{position:relative;z-index:2;text-align:right;flex:none;padding-right:4px}
.pipe-banner .bnum .n{font-family:var(--alt);font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.pipe-banner .bnum .l{font-family:var(--alt);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:5px}
/* ---------------- PIPELINE TICKER ---------------- */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-sunk);
  -webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.tk-track{display:flex;width:max-content;animation:tick 40s linear infinite;padding:13px 0}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk-item{font-family:var(--alt);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:0 28px;white-space:nowrap}
.tk-item .d{color:var(--brand)}

/* ---------------- BUILT LIKE A DATABASE ---------------- */
.lower{padding:80px 0 30px}
.lower .kicker.acc{font-family:var(--alt);font-weight:600;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.lower-h{font-family:var(--disp);font-weight:900;font-style:italic;font-size:clamp(30px,5vw,44px);
  text-transform:uppercase;letter-spacing:-.02em;line-height:.95;margin:0 0 24px}


/* ---------------- PATCH INTELLIGENCE BAND ---------------- */
.patchband{padding:42px 0;position:relative;z-index:2}
.patchband-in{display:grid;grid-template-columns:1.06fr .94fr;gap:36px;align-items:center}
.pb-copy .kicker.acc{display:inline-flex;align-items:center;gap:8px;font-family:var(--alt);font-weight:600;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.pb-copy .kicker .pulse{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none;
  box-shadow:0 0 8px var(--brand);animation:pbpulse 1.8s infinite}
@keyframes pbpulse{0%,100%{opacity:1}50%{opacity:.35}}
.pb-copy h2{font-family:var(--disp);font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(23px,3.2vw,33px);line-height:1.02;letter-spacing:-.02em;margin:0 0 11px}
.pb-copy p{color:var(--mut);font-size:14.5px;line-height:1.56;max-width:52ch;margin:0 0 18px}
.pb-copy .cta{display:flex;gap:10px;flex-wrap:wrap}
.pb-feed{border:1px solid var(--line-strong);background:var(--panel);padding:6px 8px 8px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.pf-head{font-family:var(--alt);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);display:flex;align-items:center;gap:8px;padding:13px 12px 12px}
.pf-head .pf-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand)}
.pf-row{display:flex;align-items:center;gap:12px;padding:13px 12px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink)}
.pf-row s{color:var(--faint)}.pf-row b{color:var(--brand)}
.pf-tag{font-family:var(--alt);font-weight:700;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 8px;flex:none;border:1px solid var(--line-strong);white-space:nowrap}
.pf-tag.add{color:#54d18a;border-color:color-mix(in srgb,#54d18a 40%,var(--line))}
.pf-tag.chg{color:#f0b64a;border-color:color-mix(in srgb,#f0b64a 40%,var(--line))}
.pf-tag.rem{color:#e77b7b;border-color:color-mix(in srgb,#e77b7b 40%,var(--line))}
.pf-tag.arc{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
@media(max-width:760px){.patchband-in{grid-template-columns:1fr;gap:26px}}

/* ---------------- API BAND ---------------- */
.apiband{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg-sunk),var(--bg));padding:52px 0}
.apiband .wrap{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.apiband .l{flex:1;min-width:280px}
.apiband .l h2{font-family:var(--disp);font-weight:900;font-style:italic;font-size:clamp(26px,4vw,32px);
  text-transform:uppercase;letter-spacing:-.02em;margin:0}
.apiband .l p{color:var(--mut);font-size:15px;max-width:46ch;margin:10px 0 0}
.apiband .ep{flex:1;min-width:300px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  background:var(--panel);border:1px solid var(--line-strong);padding:16px 18px;color:#c7cde4;
  white-space:nowrap;overflow-x:auto;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.apiband .ep .m{color:var(--brand);font-weight:700}
.apiband .lnk{font-family:var(--alt);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:.2s var(--hease)}
.apiband .lnk:hover{gap:9px}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1080px){
  .home-hero .rail{width:min(54%,540px);opacity:.9}
  .home-hero .rail .col:nth-child(3){display:none}
  .home-hero .scrim{background:
    linear-gradient(100deg,var(--bg) 0,var(--bg) 48%,color-mix(in srgb,var(--bg) 84%,transparent) 64%,transparent 84%),
    linear-gradient(0deg,var(--bg) 0,transparent 30%)}
  .matrix{grid-template-columns:repeat(2,1fr)}
  .grail{grid-template-columns:repeat(2,1fr)}
  .sig{grid-template-columns:1fr;gap:18px}
}
@media(max-width:820px){
  .moat{padding:70px 0 32px}
  .games{padding:70px 0 32px}
  .pipe{padding:52px 0 32px}
  .pipe-banner{gap:16px;padding:20px}
  .pipe-banner .bnum{text-align:left}
  .home-hero .rail{width:78%;opacity:.32;gap:12px}
  .home-hero .rail .col{gap:12px}
  .home-hero .scrim{background:
    linear-gradient(180deg,var(--bg) 0,color-mix(in srgb,var(--bg) 78%,transparent) 34%,color-mix(in srgb,var(--bg) 88%,transparent) 66%,var(--bg) 100%)}
}
@media(max-width:640px){
  .home-hero-inner{padding:52px 18px 34px}
  .atlaswrap{padding:6px 18px 48px}
  .atlas .ah{flex-direction:column;align-items:flex-start;gap:12px}   /* name gets full width; count drops below it */
  .atlas .ah .count{text-align:left}
  .matrix{grid-template-columns:1fr}
  .grail{grid-template-columns:1fr;gap:12px}
  .trio{gap:12px}
  .sig{padding:20px}
  .apiline{padding:16px 18px}
  .score .s{flex:1 1 40%}
}
@media(max-width:420px){
  .home-hero h1{font-size:clamp(40px,13vw,52px)}
  .home-hero .btn{flex:1;justify-content:center}
  .home-hero .cta{gap:10px}
  .atlas .inner{padding:18px 16px 16px 18px}
  .home-hero .rail{opacity:.24}
}
@media(prefers-reduced-motion:reduce){
  .node{animation:none}
  .home-hero .rail{opacity:1;animation:none}
  .home-hero .rail .col{animation:none;margin-top:0!important;overflow:hidden}
  .home-hero .rail .col:nth-child(2){margin-top:0}
  .tk-track{animation:none}
}
/* v2 responsive additions */
@media(max-width:1080px){ .home-hero .rail .col:nth-child(4){display:none} }
@media(max-width:860px){
  .atlas .inner{margin-right:0}
  /* show the game's key-visual art as a full-width top banner on mobile (was display:none) */
  .atlas .ascene{position:relative;display:block;width:auto;height:150px;top:auto;right:auto;bottom:auto;left:auto;clip-path:none}
  .atlas .ascene img{object-position:center 26%}
  .atlas .ascene::after{left:0}
  .atlas .ascene .asc-veil{background:
    linear-gradient(0deg,var(--bg-soft) 2%,color-mix(in srgb,var(--bg-soft) 25%,transparent) 46%,transparent 80%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 4px)}
}
@media(max-width:640px){ .statstrip{width:100%} .statstrip .s{flex:1 1 40%} }