:root{
  /* the void */
  --void:#050508;
  --void-2:#0A0A11;
  --panel:#0E0E17;
  --line:#1E1E2C;
  --line-hot:#2A2A3E;
  --ink:#F2F2F7;
  --mute:#8A8A9E;
  --dim:#55556A;

  /* rgbShift channel fringes -> the brand palette.
     the hero shader literally splits into these three; the page is painted
     with its own output. */
  --r:#FF2E6C;
  --g:#17E6A1;
  --b:#4B7BFF;

  --boa:#E8B33C;
  --carn:#E0554F;
  --cvz:#8FE04A;

  --display:"Anton",Impact,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"Archivo",system-ui,sans-serif;

  --gutter:clamp(18px,4.5vw,64px);
  --max:1360px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}

/* Anton's strokes antialias grey against near-black, so headings are set to
   pure white rather than --ink; the tile shadow lifts them off the art plate. */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;text-transform:uppercase;margin:0;line-height:.94;color:#fff}
.tile h3{text-shadow:0 2px 18px rgba(0,0,0,.85)}
.code{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 24px;border:1px solid var(--line-hot);background:transparent;color:var(--ink);
  cursor:pointer;transition:border-color .2s,color .2s,background .2s;display:inline-block;
}
.btn:hover{border-color:var(--g);color:var(--g)}
.btn--solid{background:var(--ink);color:var(--void);border-color:var(--ink)}
.btn--solid:hover{background:var(--g);border-color:var(--g);color:var(--void)}
.btn--ghost{color:var(--dim);border-color:var(--line)}
.btn--ghost:hover{color:var(--mute);border-color:var(--line-hot)}

/* ── nav ────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:90;background:rgba(5,5,8,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:clamp(64px,5.6vw,88px)}
.mark{display:flex;align-items:center;gap:clamp(9px,1vw,14px);min-width:0}
.mark img{width:clamp(28px,2.6vw,38px);height:clamp(28px,2.6vw,38px)}
.mark span{font-family:var(--display);font-size:clamp(16px,1.5vw,22px);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;gap:clamp(14px,2.4vw,34px);min-width:0}
.nav-links a{font-family:var(--mono);font-size:clamp(11px,.92vw,13px);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);white-space:nowrap;transition:color .2s}
.nav-links a:hover{color:var(--ink)}

/* ── hero: the void ─────────────────────────────────────── */
.hero{
  position:relative;min-height:clamp(520px,86vh,860px);
  display:grid;place-items:center;text-align:center;
  padding:60px var(--gutter);overflow:hidden;
}
/* The chamber: a live WebGL field, not an image. Scoped to the hero — the rest
   of the page is deliberately flat black. */
#chamber{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}
/* painted before the canvas reports ready, so the hero is never a white flash */
.hero{background:#050508}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 45%,transparent 30%,rgba(5,5,8,.72) 78%,var(--void) 100%);
}
/* width:100% + min-width:0 matter: `place-items:center` on .hero sizes this item
   to its content, so a wide headline pushed the whole hero past the viewport on
   mobile (hidden by body overflow-x, which is why it read as clipping). */
.hero-in{position:relative;z-index:3;display:grid;justify-items:center;gap:26px;width:100%;max-width:900px;min-width:0}
/* the signature: this is the exact rgbShift moment from the game's loading screen */
#heroLogo{width:clamp(150px,20vw,236px);height:auto}
.hero h1{font-size:clamp(38px,7.2vw,88px);max-width:min(17ch,100%);text-wrap:balance}
.hero h1 .tint{
  background:linear-gradient(96deg,var(--r),var(--g) 52%,var(--b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{color:var(--mute);max-width:min(56ch,100%);font-size:clamp(14px,1.5vw,17px);margin:0}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;color:var(--dim);animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ── thesis + stat row (Hacksaw's slot, our numbers) ────── */
.thesis{text-align:center;padding:clamp(56px,9vw,104px) 0 0}
.thesis h2{font-size:clamp(30px,5.6vw,62px);margin-bottom:18px}
.thesis p{color:var(--mute);max-width:min(56ch,100%);margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(38px,5vw,58px)}
.stat{background:var(--void);padding:26px 18px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:clamp(24px,3.4vw,42px);font-weight:400;letter-spacing:0}
.stat span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.stat:nth-child(1) b{color:var(--r)}
.stat:nth-child(2) b{color:var(--g)}
.stat:nth-child(3) b{color:var(--b)}

/* ── section heads ──────────────────────────────────────── */
.head{text-align:center;padding:clamp(60px,9vw,110px) 0 clamp(24px,3vw,38px)}
.head h2{font-size:clamp(28px,5.2vw,58px)}
.head p{color:var(--mute);max-width:min(58ch,100%);margin:14px auto 0;font-size:15px}

/* ── games: portrait posters ────────────────────────────────
   The supplied tiles are 408x546 and carry their own titles, so the card is
   built around the poster at its exact ratio (no cropping) and the HTML title
   is visually hidden rather than deleted -- otherwise the game name would exist
   only inside a raster image, invisible to screen readers and search. */
.games{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(3,1fr)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.tile{
  position:relative;display:flex;flex-direction:column;
  background:var(--void-2);border:1px solid var(--line);
  transition:border-color .35s,transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s;
}
.tile:hover{
  border-color:var(--accent);transform:translateY(-6px);
  box-shadow:0 18px 44px -18px color-mix(in srgb,var(--accent) 55%,transparent);
}
/* the frame: inset hairline in the game's accent, sitting over the poster edge */
.tile::after{
  content:"";position:absolute;inset:7px;z-index:3;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  transition:border-color .35s;
}
.tile:hover::after{border-color:color-mix(in srgb,var(--accent) 75%,transparent)}

.poster{position:relative;overflow:hidden;aspect-ratio:408/546;background:#000}
.poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.tile:hover .poster img{transform:scale(1.045)}
/* keep the baked-in title legible against the hover lift */
.poster::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(5,5,8,.35));}
/* meta rail below the poster */
.tile-in{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;padding:clamp(14px,1.6vw,20px)}
.tile-desc{color:var(--mute);font-size:13px;margin:0;line-height:1.5}
.tile-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
/* volatility pips — genre convention, and Hacksaw's one good tile affordance */
.pips{display:flex;gap:4px;align-items:center}
.pip{width:9px;height:9px;background:var(--dim);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.pip.on{background:var(--accent)}
.pips-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-right:6px}
.tile-try{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:7px}
.tile-try::after{content:"→";transition:transform .3s}
.tile:hover .tile-try::after{transform:translateX(5px)}
/* live player count — hidden until a real non-zero number arrives */
.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.live[hidden]{display:none}
.live b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.live i{width:6px;height:6px;border-radius:50%;background:var(--g);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--g) 70%,transparent);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--g) 60%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.live--lg{font-size:12px;margin-bottom:22px}
.live--lg i{width:8px;height:8px}

.tile-flag{position:absolute;top:0;left:0;z-index:4;font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;background:var(--accent);color:var(--void);padding:5px 9px}

/* ── pillars (Hacksaw "what we do") ─────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pillar{border:1px solid var(--line);padding:clamp(24px,3vw,38px);position:relative;overflow:hidden;background:var(--void-2);transition:border-color .3s}
.pillar:hover{border-color:var(--pc)}
.pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--pc)}
.pillar-n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--pc);margin-bottom:20px;display:block}
.pillar h3{font-size:clamp(20px,2.4vw,30px);margin-bottom:12px}
.pillar p{color:var(--mute);font-size:14px;margin:0 0 22px}

/* ── stake band ─────────────────────────────────────────── */
.band{margin-top:clamp(60px,9vw,110px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--void-2);position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 120% at 82% 50%,color-mix(in srgb,var(--g) 18%,transparent),transparent 68%);
}
.band-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:clamp(38px,6vw,72px) 0}
.band h2{font-size:clamp(26px,4.4vw,50px);margin-bottom:12px}
.band p{color:var(--mute);max-width:min(52ch,100%);margin:0}
.region-switch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px!important}
.region-switch b{color:var(--g);font-weight:500}
.region-opts{display:flex;gap:8px;flex-wrap:wrap}
/* detection succeeded -> collapse the options behind "Change" so the switcher
   stops competing with the CTA it sits under */
.region-switch.is-quiet .region-opts{display:none}
.region-switch:not(.is-quiet) .region-more{display:none}
.region-more{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:0;border-bottom:1px solid var(--line-hot);color:var(--dim);
  padding:2px 0;cursor:pointer;transition:color .2s,border-color .2s;
}
.region-more:hover{color:var(--g);border-color:var(--g)}
.region-opt{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid var(--line-hot);color:var(--mute);
  padding:6px 11px;cursor:pointer;transition:border-color .2s,color .2s;
}
.region-opt:hover{border-color:var(--g);color:var(--g)}
.region-opt[aria-pressed="true"]{border-color:var(--g);color:var(--void);background:var(--g)}

/* ── lab ────────────────────────────────────────────────── */
.lab-row{display:grid;grid-template-columns:minmax(0,14rem) 1fr auto;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.lab-row:first-of-type{border-top:1px solid var(--line)}
.lab-name{font-family:var(--display);font-size:clamp(18px,2.3vw,26px);text-transform:uppercase}
.lab-note{color:var(--dim);font-size:13px}
.lab-status{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);white-space:nowrap}

/* ── footer ─────────────────────────────────────────────── */
.foot{--strip-h:clamp(56px,6vw,72px);position:relative;margin-top:clamp(60px,9vw,110px);border-top:1px solid var(--line);background:var(--panel);overflow:hidden;isolation:isolate}
.foot-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.foot-plate{width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.9)}
.foot-art::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,5,8,.88) 0%,rgba(5,5,8,.50) 32%,rgba(5,5,8,.86) 100%),
    linear-gradient(90deg,rgba(5,5,8,.95) 0%,rgba(5,5,8,.55) 52%,rgba(5,5,8,.15) 100%);
}
/* He stands ON the compliance strip rather than behind it, and the footer is
   given enough height that his head isn't guillotined by overflow:hidden. */
.foot-char{
  position:absolute;right:clamp(-30px,3vw,80px);bottom:var(--strip-h);z-index:1;
  height:clamp(280px,33vw,480px);width:auto;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.8));
  pointer-events:none;
}
/* atmospheric haze pulled OVER his feet so he sits in the room, not on it */
.foot-haze{
  position:absolute;right:0;bottom:var(--strip-h);z-index:2;
  width:min(46%,620px);height:clamp(90px,11vw,150px);pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(10,8,20,.55) 55%,rgba(5,5,8,.9));
}
.foot-in{
  --gap-for-char:clamp(0px,26vw,420px);
  position:relative;z-index:3;display:grid;gap:22px;
  padding:clamp(40px,6vw,72px) 0 clamp(34px,5vw,56px);
  min-height:clamp(320px,34vw,500px);
  /* keep every line of copy clear of the character's silhouette */
  padding-right:var(--gap-for-char);
}
.foot-top{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:flex-start}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.foot-links a:hover{color:var(--g)}
.foot-note{color:var(--mute);font-size:11.5px;max-width:min(76ch,100%);line-height:1.85;font-family:var(--mono)}
.foot-note strong{color:var(--ink);font-weight:500}
.foot-note a{color:var(--mute);text-decoration:underline;text-underline-offset:2px}
.foot-note a:hover{color:var(--g)}

/* compliance strip — text badges only. We hold no regulator licences, so there
   are deliberately no MGA / UKGC / eCOGRA marks here; printing those would
   claim credentials we do not have. */
.foot-strip{position:relative;z-index:4;border-top:1px solid var(--line);background:rgba(5,5,8,.86);backdrop-filter:blur(6px);min-height:var(--strip-h)}
.strip-row{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,42px);flex-wrap:wrap;padding:16px 0}
.cbadge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.cbadge b{
  font-family:var(--display);font-size:15px;letter-spacing:.02em;color:var(--ink);
  border:2px solid var(--ink);border-radius:50%;width:34px;height:34px;
  display:grid;place-items:center;flex:none;
}
.cbadge--link:hover{color:var(--g)}
.cbadge--stake b{border-radius:0;border-color:var(--g);color:var(--g);width:auto;height:auto;padding:5px 9px;font-size:13px}

/* Reveal is opt-IN via the .js flag set by the inline script in <head>.
   Hiding by default would make the whole catalogue invisible to anyone whose
   JS fails or is blocked -- the content must survive without it. */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rise.in{opacity:1;transform:none}

/* ── responsive ─────────────────────────────────────────── */
@media(max-width:900px){
  .pillars{grid-template-columns:1fr}
  .band-in{grid-template-columns:1fr;padding-bottom:44px}
}
@media(max-width:620px){
  .stats{grid-template-columns:1fr 1fr}
  /* two posters across still reads at phone widths; one would be enormous */
  .games{grid-template-columns:1fr 1fr;gap:10px}
  .nav-links{gap:12px}
  .nav-links a{font-size:10px}
  .mark span{font-size:13px}
  .lab-row{grid-template-columns:1fr;gap:5px}
  .lab-status{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
}

/* ── age gate ─────────────────────────────────────────────
   Rendered visible in plain HTML and only ever HIDDEN by JS, so it fails
   CLOSED: if the script never runs, nobody gets waved through. Body scroll is
   locked while it is up so the page can't be read behind it. */
#gate{position:fixed;inset:0;z-index:300;background:var(--void);
  display:grid;place-items:center;padding:var(--gutter)}
#gate[hidden],html.gate-ok #gate{display:none}
/* scroll is locked only while the gate is actually up */
html:not(.gate-ok) body{overflow:hidden}
.gate-card{max-width:460px;width:100%}
.gate-rule{height:3px;width:64px;background:linear-gradient(90deg,var(--r),var(--g),var(--b))}
.gate-card h2{font-size:clamp(30px,5vw,46px);margin:18px 0 12px}
.gate-card p{color:var(--mute);font-size:14px;margin:0 0 24px;max-width:min(46ch,100%)}