/* =============================================================================
   TALYA GAMES — talyagames.com
   One dark canvas, one neon-green accent. The studio mark is white, so the green
   carries all the voltage; each game keeps its own --tint for its status pip and
   rail, which lets three unrelated palettes share a page without fighting.
   No external stylesheets, no icon font, no libraries.
   ============================================================================= */

/* --- fonts ---------------------------------------------------------------- */
/* latin-ext carries the Turkish glyphs in "Şengüloğlu"; the browser picks per codepoint. */
@font-face{font-family:Inter;src:url(/assets/fonts/inter-400-ext.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-400.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-500-ext.woff2)format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-500.woff2)format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-600-ext.woff2)format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-600.woff2)format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-700-ext.woff2)format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-700.woff2)format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Registered so the rail edge fades can transition; a bare custom property is not
   animatable. Browsers without @property simply snap between the two values. */
@property --fade-l{syntax:"<length>";inherits:false;initial-value:0px}
@property --fade-r{syntax:"<length>";inherits:false;initial-value:0px}

/* --- tokens --------------------------------------------------------------- */
:root{
  --ink:#070A08;
  --ink-2:#0C110E;
  --panel:#111814;
  --panel-2:#18211B;

  --volt:#00FF7B;
  --volt-2:#9BFF5A;
  --volt-dim:#00B85A;
  --volt-ink:#04120B;
  --glow:rgba(0,255,123,.30);

  --fg:#FFFFFF;
  --fg-2:#C8D4CC;
  /* Raised from #7C8B81: the notes, section intros and footer links set in this tone
     were legible but hard work at normal viewing distance. Now ~8:1 on --ink. */
  --fg-3:#9DACA2;

  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.18);
  --line-volt:rgba(0,255,123,.35);

  --wrap:1240px;
  --gutter:20px;
  --nav-h:76px;
  --r-sm:12px;
  --r:18px;
  --r-lg:28px;
  --pad:clamp(64px,8vw,140px);

  --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,picture,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.04;font-weight:700;letter-spacing:-.025em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:6px}

/* Moved off-screen by transform: a negative offset would widen the scroll box and
   show up as a phantom horizontal scrollbar on narrow screens. */
.skip{
  position:fixed;left:0;top:0;z-index:200;padding:12px 20px;
  background:var(--volt);color:var(--volt-ink);border-radius:0 0 10px 0;font-weight:700;
  transform:translateY(-120%);transition:transform .15s;
}
.skip:focus{transform:none}

.wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto}

/* --- lattice backdrop ----------------------------------------------------- */
/* The outer layer is exactly viewport-sized and clips; the inner one is oversized so
   it can drift a full cell without its edge ever showing. Letting the oversized layer
   be the fixed element instead would push documentElement.scrollWidth past the
   viewport, which only body{overflow-x:hidden} was hiding. */
.lattice{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lattice::before{
  content:"";position:absolute;inset:-70px;
  background-image:
    linear-gradient(to right,var(--line-volt) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line-volt) 1px,transparent 1px);
  background-size:64px 64px;
  opacity:.09;
  animation:drift 60s linear infinite;
}
@keyframes drift{to{transform:translate3d(64px,64px,0)}}

/* Everything above the lattice. */
.nav,main,.foot{position:relative;z-index:1}

/* --- nav ------------------------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s,backdrop-filter .25s;
}
.nav.is-stuck{
  background:rgba(7,10,8,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav__in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:var(--nav-h);
}
.nav__brand img{transition:filter .25s}
.nav__brand:hover img{filter:drop-shadow(0 0 14px var(--glow))}
.nav__links{display:flex;gap:clamp(14px,3vw,34px);align-items:center}
.nav__links a{
  font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);padding:6px 2px;position:relative;transition:color .2s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--volt);transition:right .25s;
}
.nav__links a:hover{color:var(--fg)}
.nav__links a:hover::after{right:0}

/* --- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:999px;
  background:var(--volt);color:var(--volt-ink);
  font-weight:700;font-size:15px;letter-spacing:.01em;
  border:1px solid var(--volt);
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 34px var(--glow);background:var(--volt-2)}
.btn--ghost{
  background:transparent;color:var(--fg);border-color:var(--line-2);
}
.btn--ghost:hover{background:transparent;border-color:var(--volt);color:var(--volt);box-shadow:0 10px 30px rgba(0,255,123,.14)}
.btn--steam{background:var(--panel-2);color:var(--fg);border-color:var(--line-2)}
.btn--steam:hover{background:var(--panel-2);border-color:var(--volt);color:var(--fg)}
.btn--steam img{width:22px;height:22px}

.badge img{
  height:48px;width:auto;border-radius:8px;
  transition:transform .2s,box-shadow .2s;
}
.badge:hover img{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.5)}

.lnk{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:15px;color:var(--volt);
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.lnk:hover{border-bottom-color:var(--volt)}
.lnk span{transition:transform .2s}
.lnk:hover span{transform:translateX(4px)}

/* --- hero ----------------------------------------------------------------- */
.hero{
  padding-block:clamp(56px,9vw,120px) var(--pad);
  position:relative;
  /* The glow below is deliberately wider than the column and, under ~1100px, wider
     than the viewport. Clipping it here keeps it from adding real page overflow —
     it is meant to bleed off the edges, not to be scrollable. */
  overflow:hidden;
}
/* A soft green pool behind the mark, so the hero has depth without an image. */
.hero::before{
  content:"";position:absolute;left:50%;top:0;translate:-50% 0;
  width:min(900px,120vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(0,255,123,.13),transparent 62%);
  pointer-events:none;
}
.hero__in{position:relative;text-align:center;display:grid;justify-items:center;gap:clamp(22px,3vw,34px)}
.hero__mark{
  width:clamp(180px,26vw,300px);height:auto;
  filter:drop-shadow(0 0 40px rgba(0,255,123,.28));
}
.hero__h{
  font-size:clamp(34px,7vw,74px);
  max-width:16ch;
  text-wrap:balance;
}
.hero__h em{
  font-style:normal;
  background:linear-gradient(100deg,var(--volt),var(--volt-2));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.hero__sub{
  max-width:62ch;color:var(--fg-2);
  font-size:clamp(16px,1.5vw,19px);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* --- stats ---------------------------------------------------------------- */
.stats{border-block:1px solid var(--line);background:rgba(255,255,255,.014)}
.stats__in{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line);
}
.stat{
  background:var(--ink);
  padding:clamp(22px,3.2vw,38px) clamp(14px,2vw,26px);
  display:grid;gap:5px;justify-items:center;text-align:center;
}
.stat__n{
  font-size:clamp(30px,4.4vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--volt);
}
.stat__label{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.stat__note{font-size:12.5px;color:var(--fg-3);line-height:1.4}

/* --- section heads -------------------------------------------------------- */
.sec__head{padding-block:var(--pad) clamp(28px,4vw,56px);display:grid;gap:12px}
.sec__title{
  font-size:clamp(28px,4.6vw,54px);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.sec__title::after{
  content:"";flex:1 1 60px;height:1px;min-width:40px;
  background:linear-gradient(to right,var(--line-volt),transparent);
}
.sec__note{color:var(--fg-3);font-size:16px}

/* --- games ---------------------------------------------------------------- */
.game{padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.game:first-of-type{border-top:0}
.game__in{display:grid;gap:clamp(26px,4vw,60px);align-items:center}

.game__art{position:relative;isolation:isolate}

/* Flat art — the one band whose key image is a finished store graphic rather than a
   raw capture. Matched on the direct child so it never reaches inside a device shell. */
.game__art > picture{
  display:block;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 26px 70px rgba(0,0,0,.55);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-color .45s;
}
.game__art > picture img{width:100%;height:auto;border-radius:inherit}
.game:hover .game__art > picture{
  transform:translateY(-6px);
  border-color:var(--line-volt);
  box-shadow:0 34px 84px rgba(0,0,0,.6),0 0 44px rgba(0,255,123,.16);
}

/* --- device mockups ------------------------------------------------------- */
/* Raw screenshots are never shown bare: phone captures sit in a phone, PC captures
   sit in a laptop. Both shells are pure CSS, so they cost nothing to download and stay
   sharp at any size. The chrome dimensions are variables, so the same component works
   at band size and at rail size. Adapted from the Snitch Switch site's shells, retinted
   from its violet-grey to this page's green-grey. */
.device{position:relative;margin-inline:auto;width:100%}
.device__screen{position:relative;overflow:hidden;background:#000}
.device__screen picture{display:block;width:100%;height:100%}
.device__screen img{width:100%;height:100%;object-fit:cover;display:block}

.device--phone{
  --bz:9px;--rad:40px;--isl:22px;
  max-width:300px;padding:var(--bz);border-radius:var(--rad);
  background:linear-gradient(148deg,#414d45,#161b18 34%,#0b0f0d 68%,#2e3a33);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 34px 70px -24px rgba(0,0,0,.95);
}
.device--phone .device__screen{border-radius:calc(var(--rad) - var(--bz));aspect-ratio:1206/2622}
/* dynamic island */
.device--phone::before{
  content:"";position:absolute;z-index:2;top:calc(var(--bz) + 8px);left:50%;
  transform:translateX(-50%);width:30%;height:var(--isl);
  border-radius:999px;background:#07060b;
}
/* power rail */
.device--phone::after{
  content:"";position:absolute;right:calc(var(--bz) * -0.28);top:26%;width:3px;height:12%;
  border-radius:0 3px 3px 0;background:linear-gradient(180deg,#525f57,#28312c);
}

.device--laptop{--bz:11px;max-width:760px}
/* The base is wider than the lid, as on a real laptop. That width comes from insetting
   the lid rather than outsetting the base: an outset base hangs past the shell's own box
   and pushed 13px of real horizontal overflow onto the page at tablet widths. */
.device--laptop .device__lid{
  position:relative;margin-inline:4.5%;
  padding:var(--bz) var(--bz) calc(var(--bz) + 3px);
  border-radius:15px 15px 5px 5px;
  background:linear-gradient(158deg,#414d45,#191f1b 46%,#121714);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 28px 62px -26px rgba(0,0,0,.95);
}
/* webcam */
.device--laptop .device__lid::before{
  content:"";position:absolute;top:calc(var(--bz) / 2 - 1px);left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:#39443d;
}
/* The captures are 1920x1080, so the lid is a true 16/9. Leaving it at 1600/842
   made object-fit:cover crop ~6% off the top, which ate the player nameplates. */
.device--laptop .device__screen{border-radius:5px;aspect-ratio:16/9}
.device--laptop .device__base{
  position:relative;height:13px;
  border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#36413a,#191f1b);
  box-shadow:0 16px 30px -14px rgba(0,0,0,.85);
}
.device--laptop .device__base::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:15%;height:5px;border-radius:0 0 7px 7px;background:#0e1310;
}

/* Slimmer chrome inside the rails, so the shell frames the shot instead of competing. */
.rail .device--phone{--bz:7px;--rad:30px;--isl:16px}
.rail .device--laptop{--bz:8px}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.floating{animation:floaty 6.5s ease-in-out infinite;will-change:transform}

.game__copy{display:grid;gap:16px;justify-items:start}
.game__status{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-2);
  padding:7px 15px 7px 12px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.03);
}
.pip{
  width:8px;height:8px;border-radius:50%;
  background:var(--tint,var(--volt));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tint,var(--volt)) 22%,transparent);
}
.game__name{font-size:clamp(26px,3.6vw,44px)}
.game__hook{
  font-size:clamp(17px,1.9vw,22px);font-weight:600;color:var(--volt);
  letter-spacing:-.01em;
}
.game__body{color:var(--fg-2);max-width:56ch}
.game__meta{
  display:flex;flex-wrap:wrap;gap:8px;
  font-size:13px;color:var(--fg-3);
}
.game__meta li{
  padding:5px 12px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.02);
}
.game__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}

/* --- screenshot rail ------------------------------------------------------ */
/* Boxed to the page grid and grabbed with the mouse rather than pushed with a
   scrollbar. The scrollbar is hidden on purpose: it spanned the full bleed width and
   read as a stray page-level control. Native overflow still does the scrolling, so
   touch, trackpad, shift+wheel and keyboard all keep working for free — main.js only
   adds pointer dragging and the edge fades on top. */
.rail{
  margin-top:clamp(26px,3.6vw,44px);
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  cursor:grab;

  /* Hidden, not merely thin. */
  scrollbar-width:none;
  -ms-overflow-style:none;

  /* Only the side with more content off-screen is faded; main.js sets these. Both are
     0 until it runs, so a no-JS visitor gets clean square edges rather than a
     permanently half-faded first image. */
  --fade-l:0px;
  --fade-r:0px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
  transition:--fade-l .2s,--fade-r .2s;
}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline-offset:4px}
.rail.can-prev{--fade-l:48px}
.rail.can-next{--fade-r:48px}
.rail.is-drag{cursor:grabbing}
/* While dragging, nothing inside should select or start a native image drag. */
.rail.is-drag,.rail.is-drag *{user-select:none;-webkit-user-select:none}
.rail img{-webkit-user-drag:none;user-drag:none}
/* Everything fits: no grab cursor, nothing to hint at. */
.rail.is-static{cursor:default}

.rail__track{
  display:flex;gap:14px;width:max-content;
  /* Room for the hover lift and its shadow: overflow-y is hidden, so a -3px transform
     against a 2px pad clipped the top edge of every card being hovered. */
  padding-block:8px 10px;
}
.rail__item{flex:0 0 auto;width:min(82vw,520px)}
.rail--tall .rail__item{width:min(52vw,228px)}
/* Direct child only: images inside a device shell are framed by the shell instead. */
.rail__item > picture{
  display:block;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
  transition:border-color .25s,transform .25s;
}
.rail__item > picture img{width:100%;height:auto;border-radius:inherit}
.rail__item:hover > picture{border-color:var(--tint,var(--volt));transform:translateY(-3px)}
.rail__item .device{transition:transform .25s}
.rail__item:hover .device{transform:translateY(-3px)}

/* --- marquee -------------------------------------------------------------- */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);
  padding-block:16px;background:rgba(255,255,255,.014);
  user-select:none;
}
.marquee__track{
  display:flex;align-items:center;gap:26px;width:max-content;
  animation:slide 44s linear infinite;
  font-size:clamp(18px,2.4vw,30px);font-weight:700;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px var(--line-2);
}
.marquee__dot{color:var(--volt);-webkit-text-stroke:0}
/* The track holds the same pair 8 times, so shifting by half of it loops seamlessly. */
@keyframes slide{to{transform:translateX(-50%)}}

/* --- bands ---------------------------------------------------------------- */
.band{padding-block:var(--pad)}
/* The measure is capped on the paragraphs, not on .band__in — .band__in is also a
   .wrap, and a max-width there would let margin-inline:auto centre the whole block
   away from the page's left edge. */
.band__in{display:grid;gap:20px}
.band__lead{font-size:clamp(19px,2.2vw,26px);font-weight:600;color:var(--fg);letter-spacing:-.015em;line-height:1.35;max-width:46ch}
.band__body{color:var(--fg-2);max-width:72ch}

.band--dev{border-top:1px solid var(--line);background:rgba(255,255,255,.014)}
.dev__in{display:grid;gap:26px;align-items:center}
.dev__eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--volt);margin-bottom:10px;
}
.dev__name{font-size:clamp(26px,3.4vw,40px);margin-bottom:14px}
.dev__in .band__body{max-width:52ch}

/* --- footer --------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);background:var(--ink-2);padding-top:clamp(44px,6vw,72px)}
.foot__in{display:grid;gap:clamp(28px,4vw,40px)}
.foot__brand p{color:var(--fg-3);font-size:14px;margin-top:14px;line-height:1.6}
.foot__col{display:grid;gap:10px;align-content:start}
.foot__col h2{
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg);margin-bottom:4px;
}
.foot__col a{color:var(--fg-3);font-size:14.5px;transition:color .2s}
.foot__col a:hover{color:var(--volt)}
.foot__bottom{
  margin-top:clamp(34px,5vw,56px);padding-block:24px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  color:var(--fg-3);font-size:13.5px;
}
.foot__note{color:#8A978F}

/* --- scroll reveal -------------------------------------------------------- */
/* Only hides when JS is confirmed live — otherwise the page renders as normal. */
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.in{
  opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (min-width:640px){
  .stats__in{grid-template-columns:repeat(4,1fr)}
  .foot__in{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:900px){
  .game__in{grid-template-columns:1.02fr 1fr}
  /* A phone shell is only 300px wide, so it does not need half the page. */
  .game--art-phone .game__in{grid-template-columns:.66fr 1fr}
  /* Alternate the art side down the page. .sec__head is a div, so the articles
     count 1,2,3 here and only the middle band flips. */
  .game:nth-of-type(even) .game__art{order:2}
  .dev__in{grid-template-columns:1fr auto;gap:40px}
  .foot__in{grid-template-columns:1.4fr 1fr 1.2fr .8fr}
}

@media (min-width:1200px){
  body{font-size:17.5px}
}

/* Coarse pointers get no hover lift — it only ever fires as a sticky tap state. */
@media (hover:none){
  .game:hover .game__art > picture{transform:none;box-shadow:0 26px 70px rgba(0,0,0,.55);border-color:var(--line)}
  .rail__item:hover > picture{transform:none;border-color:var(--line)}
  .rail__item:hover .device{transform:none}
  .btn:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .lattice::before{animation:none}
  .marquee__track{animation:none}
  .floating{animation:none}
  .js .reveal{opacity:1;transform:none}
}

/* =============================================================================
   LEGAL PAGES  (/ecommerce-simulator-privacy)
   A long single-column document with a contents rail. Same tokens as the studio
   page, wider measure control, no reveal animations — nothing here should be
   hidden waiting on a scroll.
   ============================================================================= */
.page-legal{--wrap:1120px}
.page-legal main{padding-bottom:clamp(50px,7vw,90px)}

.legal__head{padding-block:clamp(38px,6vw,72px) clamp(22px,3vw,34px)}
.legal__eyebrow{margin-bottom:16px}
.legal__eyebrow a{
  font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--volt);
}
.legal__eyebrow a:hover{text-decoration:underline;text-underline-offset:4px}
.legal__head h1{font-size:clamp(32px,5.4vw,60px);margin-bottom:20px}
.legal__lead{color:var(--fg-2);max-width:70ch;font-size:clamp(16px,1.5vw,18.5px)}
.legal__lead code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;padding:2px 7px;border-radius:6px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--fg);
  overflow-wrap:anywhere;
}
.legal__dates{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;
}
.legal__dates > div{
  padding:11px 16px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
}
.legal__dates dt{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.legal__dates dd{font-size:14.5px;font-weight:600;margin-top:3px}

.legal{display:grid;gap:clamp(24px,3vw,48px);align-items:start}

/* --- contents ------------------------------------------------------------- */
.toc{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);padding:6px 18px;
}
.toc__summary{
  cursor:pointer;list-style:none;padding:12px 0;
  font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
}
.toc__summary::-webkit-details-marker{display:none}
.toc__summary::after{content:"+";float:right;color:var(--volt);font-size:16px;line-height:1}
.toc[open] .toc__summary::after{content:"\2212"}
.toc__list{list-style:none;counter-reset:toc;padding:4px 0 14px;display:grid;gap:2px}
.toc__list a{
  display:block;padding:7px 10px;border-radius:8px;
  font-size:14px;color:var(--fg-3);line-height:1.4;
  transition:color .18s,background .18s;
}
.toc__list a:hover{color:var(--volt);background:rgba(0,255,123,.07)}

/* --- policy prose --------------------------------------------------------- */
.prose{max-width:78ch}
.prose__block + .prose__block{margin-top:clamp(30px,3.6vw,46px)}
.prose h2{
  font-size:clamp(21px,2.6vw,29px);
  padding-top:14px;margin-bottom:16px;
  border-top:1px solid var(--line);
  /* Sticky nav is 76px; clear it plus a little air when jumping from the contents. */
  scroll-margin-top:calc(var(--nav-h) + 22px);
}
.prose__block:first-child h2{border-top:0;padding-top:0}
.prose h3{
  font-size:clamp(16.5px,1.8vw,19px);margin:30px 0 12px;color:var(--fg);
  scroll-margin-top:calc(var(--nav-h) + 22px);
}
.prose p{color:var(--fg-2);margin-bottom:14px}
.prose ul{margin:0 0 16px;padding-left:22px;list-style:disc}
.prose li{color:var(--fg-2);margin-bottom:8px;padding-left:4px}
.prose li::marker{color:var(--volt-dim)}
.prose strong{color:var(--fg);font-weight:600}
.prose a{color:var(--volt);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose > *:last-child,.prose__block > *:last-child{margin-bottom:0}

/* A callout for the one paragraph that is scoping rather than policy. */
.prose .note{
  border:1px solid var(--line-volt);border-radius:var(--r);
  background:rgba(0,255,123,.05);
  padding:16px 18px;margin:18px 0;
}
.prose .note p{margin:0;color:var(--fg-2)}

.page-legal .foot{margin-top:0}
.page-legal .foot__bottom{border-top:0}
.page-legal .foot__note a{color:var(--fg-3);transition:color .2s}
.page-legal .foot__note a:hover{color:var(--volt)}

@media (min-width:1000px){
  .legal{grid-template-columns:264px minmax(0,1fr);gap:56px}
  .toc{
    position:sticky;top:calc(var(--nav-h) + 20px);
    max-height:calc(100vh - var(--nav-h) - 44px);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  }
  /* Always expanded at this size — the disclosure toggle is a small-screen affordance. */
  .toc__summary{display:none}
  .toc__list{padding-block:10px}
}