/* v4 S3: per-game hub pages (game-<slug>.html). Accent vars come from /assets/css/hub-acc.3adcc4c626.css (.acc-<slug>). CSP: no inline styles. */
:where(main){--acc:#8b3dff;--acc-rgb:139,61,255;--acc-l:#d9c2ff}
.gh{--cw:clamp(200px,22vw,320px);position:relative;isolation:isolate;overflow:hidden;padding:clamp(2.2rem,5vw,4rem) 0 clamp(2.6rem,5vw,4.4rem);border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 60% 70% at 72% 55%,rgba(var(--acc-rgb),.34),transparent 62%),radial-gradient(ellipse 80% 60% at 10% 0,rgba(139,61,255,.18),transparent 60%),linear-gradient(180deg,#07060d,#05040a)}
.gh::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);pointer-events:none}
.gh-floor{position:absolute;left:-20%;right:-20%;bottom:0;height:45%;z-index:-1;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background:linear-gradient(rgba(var(--acc-rgb),.45) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(var(--acc-rgb),.45) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 80%);mask-image:linear-gradient(to top,#000 5%,transparent 80%);animation:vgrid 7s linear infinite}
.gh-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.gh-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem .5rem;margin:0 0 1.4rem;padding:0;font:600 .82rem/1.4 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gh-crumb li+li::before{content:"/";margin-right:.5rem;color:rgba(var(--acc-rgb),.9)}
.gh-crumb a{color:#d9ccff;text-decoration:none}.gh-crumb a:hover{color:#fff;text-decoration:underline}
.gh-crumb [aria-current]{color:var(--acc-l)}
.gh-title{margin:.8rem 0 1.1rem;font:900 clamp(2.8rem,7.4vw,7rem)/.92 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;overflow-wrap:anywhere;
  background:linear-gradient(180deg,#fff 0,#fff 35%,var(--acc-l) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(var(--acc-rgb),.6)) drop-shadow(0 3px 0 rgba(var(--acc-rgb),.45))}
.gh-title.gh-long{font-size:clamp(2.3rem,5.6vw,5.2rem)}
.gh-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.gh-plat{display:inline-flex;align-items:center;min-height:34px;padding:.45rem .9rem;font:800 .82rem/1 var(--f-disp);letter-spacing:.12em;text-transform:uppercase;color:#05040a;background:var(--acc-l);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);box-shadow:0 0 24px rgba(var(--acc-rgb),.6)}
.gh-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.gh-tag{font:700 .76rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;padding:.5rem .7rem;border:1px solid rgba(var(--acc-rgb),.7);color:#fff;background:rgba(10,8,20,.65);border-radius:2px}
.gh-sub{max-width:36rem;margin:1.3rem 0 0;color:var(--muted);font-size:clamp(1rem,1.4vw,1.12rem)}
.gh-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.gh-stage{position:relative;display:grid;place-items:center;min-height:calc(var(--cw)*1.62);perspective:1200px}
.gh-ring{position:absolute;width:calc(var(--cw)*1.7);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--acc-rgb),.55),rgba(var(--acc-rgb),.12) 60%,transparent);filter:blur(6px)}
.gh-ring::after{content:"";position:absolute;inset:12%;border-radius:50%;border:2px solid rgba(var(--acc-rgb),.55);box-shadow:0 0 30px rgba(var(--acc-rgb),.5),inset 0 0 30px rgba(var(--acc-rgb),.35)}
.gh-spin{position:relative;width:var(--cw);transform-style:preserve-3d;animation:ghspin 9s ease-in-out infinite}
@keyframes ghspin{0%,100%{transform:rotateY(-24deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(14deg) rotateX(-2deg) translateY(-12px)}}
.gh .cs.gh-cs{position:relative;left:auto;top:auto;transform:none;width:100%;--k:1;--d:calc(var(--cw)*.13);--hl:.36;filter:drop-shadow(0 0 34px rgba(var(--acc-rgb),.7)) drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.gh .cs.gh-cs.p-switch{width:89%;margin-inline:auto}
.gh-pad{position:absolute;bottom:2%;width:calc(var(--cw)*1.3);height:28px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--acc-rgb),.75),transparent);filter:blur(4px)}
/* sections */
.gh-sec{padding:clamp(3rem,6vw,5rem) 0}
.gh-sec .sec-head h2 span{color:var(--acc-l);text-shadow:0 0 18px rgba(var(--acc-rgb),.6)}
.gh-alt{background:linear-gradient(90deg,rgba(var(--acc-rgb),.08),transparent 60%);border-block:1px solid var(--line)}
.gh-runs,.gh-moments,.gh-guides{list-style:none;margin:0;padding:0}
.gh-runs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.gh-runs li,.gh-moments li{display:flex}.gh-runs .card,.gh-moments .card{width:100%}
.gh-run .media img,.gh-mo .media img{display:block;width:100%;height:auto}
.gh-moments{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.gh-mo .media img{aspect-ratio:9/14;object-fit:cover}
.gh-mo .dur{right:.5rem;bottom:.5rem}
.gh-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:2rem 4rem;align-items:start}
.gh-h2{font:900 clamp(1.9rem,4.4vw,3.2rem)/1 var(--f-disp);margin:.8rem 0 .6rem;color:#fff;text-shadow:0 0 22px rgba(var(--acc-rgb),.55)}
.gh-note{color:var(--muted);margin:0}
.gh-guides{display:grid;gap:.7rem}
.gh-guides li{display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:center;padding:1rem 1.2rem;background:rgba(18,13,36,.72);border:1px solid var(--line);border-left:3px solid var(--acc);clip-path:var(--cham)}
.gg-n{font:900 1.3rem/1 var(--f-disp);color:var(--acc-l)}
.gg-t{font:700 1.06rem/1.25 var(--f-ui);letter-spacing:.04em;text-transform:uppercase}
.gg-m{font:600 .8rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* prev / vault / next */
.gh-nav{padding:clamp(2.4rem,5vw,4rem) 0;border-top:1px solid var(--line);background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(139,61,255,.2),transparent 70%)}
.gh-nav-in{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:center}
.gh-pn{--cw:84px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:1.1rem;align-items:center;text-decoration:none;color:var(--text);padding:1rem 1.2rem;border:1px solid var(--line);background:rgba(18,13,36,.6);clip-path:var(--cham);transition:border-color .25s,background .25s}
.gh-next{grid-template-columns:1fr auto;text-align:right}
.gh-pn-case{grid-row:1/span 3;width:var(--cw);perspective:700px}
.gh-next .gh-pn-case{grid-column:2}
.gh-pn .cs.gh-pn-cs{position:relative;left:auto;top:auto;width:100%;--k:1;--d:8px;--hl:.26;transform:rotateY(18deg);transition:transform .35s}
.gh-next .cs.gh-pn-cs{transform:rotateY(-18deg)}
.gh-pn .cs.gh-pn-cs.p-switch{width:89%}
.gh-pn-k{font:700 .74rem/1.2 var(--f-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--acc-l)}
.gh-pn-t{font:800 clamp(1rem,1.6vw,1.25rem)/1.15 var(--f-disp);text-transform:uppercase;margin:.3rem 0}
.gh-pn-p{font:600 .74rem/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.gh-pn:hover,.gh-pn:focus-visible{border-color:var(--acc);background:rgba(var(--acc-rgb),.12)}
.gh-pn:hover .cs,.gh-pn:focus-visible .cs{transform:rotateY(0) translateY(-4px);filter:drop-shadow(0 0 16px var(--acc))}
.gh-back{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-decoration:none;color:#fff;padding:1.1rem 1.6rem;border:2px solid var(--cyan);border-radius:3px;box-shadow:0 0 24px rgba(25,230,255,.25),inset 0 0 20px rgba(25,230,255,.12)}
.gh-back:hover,.gh-back:focus-visible{background:rgba(25,230,255,.12)}
.gh-back-k{font:700 .72rem/1 var(--f-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--cyan)}
.gh-back-t{font:900 1.35rem/1 var(--f-disp);text-transform:uppercase}
.gh-back-n{font:600 .74rem/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
@media (max-width:960px){
  .gh-runs{grid-template-columns:repeat(2,1fr)}
  .gh-moments{grid-template-columns:repeat(2,1fr)}
  .gh-split{grid-template-columns:1fr}
}
@media (max-width:760px){
  .gh{--cw:min(54vw,230px)}
  .gh-in{grid-template-columns:1fr}
  .gh-stage{order:-1;min-height:calc(var(--cw)*1.5)}
  .gh-crumb ol{margin-bottom:.8rem}
  .gh-runs{grid-template-columns:1fr}
  .gh-nav-in{grid-template-columns:1fr 1fr}
  .gh-back{grid-column:1/-1;grid-row:2}
  .gh-pn{--cw:60px;grid-template-columns:1fr;text-align:left;padding:.9rem}
  .gh-next{grid-template-columns:1fr;text-align:right}
  .gh-pn-case,.gh-next .gh-pn-case{grid-row:auto;grid-column:auto;margin-bottom:.6rem}
  .gh-next .gh-pn-case{justify-self:end}
  .gh-guides li{grid-template-columns:auto 1fr;padding:.9rem 1rem}
  .gg-m{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .gh-floor,.gh-spin{animation:none}
  .gh-spin{transform:rotateY(-16deg) rotateX(3deg)}
  .gh-pn .cs.gh-pn-cs,.gh-pn{transition:none}
}
.gh-full{display:block;margin-top:.7rem;font:700 clamp(.85rem,1.3vw,1.05rem)/1.3 var(--f-ui);letter-spacing:.22em;color:var(--acc-l);-webkit-text-fill-color:var(--acc-l);filter:none}