/* ---------- RESET & BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
:root{
  --void:#f3ead6;
  --panel:#e8dbb9;
  --panel-2:#1c2540;
  --line:#cdbb92;
  --line-soft:#ddd0ac;
  --amber:#ff9640;
  --amber-soft:#ffb87a;
  --amber-ink:#a85c12;
  --teal:#3ddcb4;
  --teal-soft:#7ce8cb;
  --teal-ink:#0f7a5c;
  --kaiju:#e0396b;
  --kaiju-soft:#f06f92;
  --kaiju-ink:#9c2350;
  --ink:#1c2540;
  --ink-soft:#565e80;
  --ink-dim:#7a715a;
  --font-display:'Righteous', sans-serif;
  --font-pixel:'Righteous', sans-serif;
  --font-body:'Chakra Petch', sans-serif;
  --nav-h:76px;
}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:.5px;line-height:1.05;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
img,svg{display:block;max-width:100%;}
section{position:relative;padding:120px 24px;}
.wrap{max-width:1180px;margin:0 auto;}
::selection{background:var(--amber);color:var(--ink);}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--teal-ink);
  outline-offset:3px;
}

/* angled corner clip */
.pixel-corners{
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.pixel-corners-sm{
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

/* eyebrow label */
.eyebrow{
  font-family:var(--font-pixel);
  font-size:11px;
  letter-spacing:1px;
  color:var(--amber-ink);
  display:inline-block;
  margin-bottom:18px;
}
.eyebrow::before{content:"// ";color:var(--ink-dim);}

/* buttons */
.btn{
  font-family:var(--font-pixel);
  font-size:12px;
  letter-spacing:.5px;
  padding:18px 26px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:transform .15s ease, background .15s ease;
}
.btn-primary{background:var(--amber);color:var(--ink);}
.btn-primary:hover{transform:translateY(-3px);background:var(--amber-soft);}
.btn-outline{border:2px solid var(--teal-ink);color:var(--teal-ink);background:transparent;}
.btn-outline:hover{transform:translateY(-3px);background:rgba(15,122,92,.1);}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- BACKGROUND LAYERS ---------- */
.bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.35;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 90%);
  pointer-events:none;
}
.bg-stripes{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:-1;}
.stripe{
  fill:none;
  stroke-width:42;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.9;
}
.stripe-amber{stroke:var(--amber);}
.stripe-teal{stroke:var(--teal);}
.stripe-kaiju{stroke:var(--kaiju);}
.scanlines{
  position:fixed;inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(28,37,64,0.035) 0px,
    rgba(28,37,64,0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events:none;
  z-index:200;
  mix-blend-mode:overlay;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;
  height:var(--nav-h);
  z-index:100;
  background:rgba(243,234,214,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1180px;margin:0 auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
}
.nav-logo{
  font-family:var(--font-pixel);
  font-size:12px;
  line-height:1.5;
  color:var(--ink);
  letter-spacing:.5px;
}
.nav-logo span{color:var(--amber-ink);}
.nav-links{display:flex;gap:36px;}
.nav-link{
  font-size:14px;
  font-weight:500;
  letter-spacing:.5px;
  color:var(--ink-soft);
  position:relative;
  padding:6px 0;
  transition:color .15s ease;
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--teal-ink);transition:width .2s ease;
}
.nav-link:hover,.nav-link.active{color:var(--ink);}
.nav-link.active::after{width:100%;}

.hamburger{
  display:none;
  width:36px;height:28px;
  position:relative;
  z-index:110;
}
.hamburger span{
  position:absolute;left:0;right:0;height:2px;background:var(--ink);
  transition:transform .25s ease, opacity .25s ease, top .25s ease;
}
.hamburger span:nth-child(1){top:2px;}
.hamburger span:nth-child(2){top:13px;}
.hamburger span:nth-child(3){top:24px;}
.hamburger.active span:nth-child(1){top:13px;transform:rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){top:13px;transform:rotate(-45deg);}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;
  display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + 40px);
  overflow:hidden;
}
.hero-inner{
  max-width:1180px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
  padding:0 24px;
}
.hero h1{
  font-size:clamp(56px,9vw,108px);
  color:var(--ink);
  text-shadow:4px 4px 0 var(--kaiju);
  margin-bottom:20px;
}
.hero .subhead{
  font-family:var(--font-pixel);
  font-size:13px;
  color:var(--teal-ink);
  letter-spacing:1px;
  margin-bottom:22px;
  line-height:1.8;
}
.hero p{
  color:var(--ink-soft);
  font-size:18px;
  max-width:46ch;
  margin-bottom:36px;
}
.hero-visual{position:relative;height:420px;}

/* exploded mech (hero) */
.mech-hero{width:100%;height:100%;overflow:visible;}
.mech-hero .guide{stroke:var(--line);stroke-width:1;stroke-dasharray:4 5;fill:none;opacity:.6;}
.mech-hero .part{stroke:var(--teal);stroke-width:2;fill:var(--panel-2);}
.mech-hero .detail{stroke:var(--amber);stroke-width:2;fill:none;}
.mech-hero .part-head{animation:float-head 5s ease-in-out infinite;}
.mech-hero .part-armL{animation:float-armL 6s ease-in-out infinite .3s;}
.mech-hero .part-armR{animation:float-armR 6.4s ease-in-out infinite .6s;}
.mech-hero .part-legL{animation:float-legL 5.6s ease-in-out infinite .2s;}
.mech-hero .part-legR{animation:float-legR 5.8s ease-in-out infinite .5s;}
@keyframes float-head{
  0%,100%{transform:translate(228px,58px) rotate(9deg);}
  50%{transform:translate(228px,50px) rotate(9deg);}
}
@keyframes float-armL{
  0%,100%{transform:translate(78px,150px) rotate(-16deg);}
  50%{transform:translate(78px,142px) rotate(-16deg);}
}
@keyframes float-armR{
  0%,100%{transform:translate(342px,150px) rotate(16deg);}
  50%{transform:translate(342px,142px) rotate(16deg);}
}
@keyframes float-legL{
  0%,100%{transform:translate(160px,340px) rotate(-9deg);}
  50%{transform:translate(160px,332px) rotate(-9deg);}
}
@keyframes float-legR{
  0%,100%{transform:translate(258px,340px) rotate(9deg);}
  50%{transform:translate(258px,332px) rotate(9deg);}
}

/* ---------- PITCH ---------- */
.pitch{background:rgba(232,219,185,.6);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{max-width:640px;margin-bottom:64px;}
.section-head h2{font-size:clamp(32px,4vw,48px);}
.section-head p{color:var(--ink-soft);font-size:17px;margin-top:14px;}
.pitch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pitch-card{
  background:var(--void);
  border:1px solid var(--line);
  padding:36px 28px;
}
.pitch-card .icon{width:52px;height:52px;margin-bottom:24px;}
.pitch-card h3{font-family:var(--font-pixel);font-size:15px;color:var(--teal-ink);letter-spacing:.5px;margin-bottom:16px;line-height:1.6;}
.pitch-card p{color:var(--ink-soft);font-size:15px;}
.pitch-card:nth-child(2) h3{color:var(--kaiju-ink);}
.pitch-card:nth-child(3) h3{color:var(--amber-ink);}

/* ---------- HOW TO PLAY ---------- */
.steps{counter-reset:step;}
.step-list{display:flex;flex-direction:column;gap:0;}
.step{
  counter-increment:step;
  display:grid;grid-template-columns:110px 1fr;gap:32px;
  padding:36px 0;
  border-top:1px solid var(--line);
  position:relative;
}
.step:last-child{border-bottom:1px solid var(--line);}
.step::before{
  content:"0" counter(step);
  font-family:var(--font-display);
  font-size:64px;
  color:var(--line);
  line-height:1;
}
.step h3{font-size:24px;color:var(--ink);margin-bottom:8px;}
.step p{color:var(--ink-soft);font-size:15px;max-width:56ch;}
.step-tag{
  display:inline-block;
  font-family:var(--font-pixel);
  font-size:10px;
  letter-spacing:.5px;
  color:var(--teal-ink);
  border:1px solid var(--teal-ink);
  padding:4px 8px;
  margin-bottom:12px;
}

/* ---------- GALLERY ---------- */
.gallery{background:rgba(232,219,185,.6);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.placeholder-img{
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(45deg, var(--panel-2) 0 10px, var(--void) 10px 20px);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.placeholder-chip{
  background:var(--void);
  border:1px solid var(--line);
  padding:16px 18px;
  display:flex;flex-direction:column;align-items:center;
  gap:10px;
}
.placeholder-chip svg{width:30px;height:30px;stroke:var(--ink-dim);}
.placeholder-chip span{
  font-family:var(--font-pixel);
  font-size:9px;
  letter-spacing:1px;
  color:var(--ink-dim);
  text-align:center;
  padding:0 4px;
}

/* ---------- CTA (print & play / playtest) ---------- */
.cta{
  text-align:center;
}
.cta-panel{
  max-width:720px;margin:0 auto;
  border:1px solid var(--line);
  background:var(--panel);
  padding:64px 40px;
}
.cta-panel h2{font-size:clamp(30px,4vw,44px);margin-bottom:18px;}
.cta-panel p{color:var(--ink-soft);font-size:16px;max-width:52ch;margin:0 auto 32px;}
.cta-note{
  margin-top:20px;
  font-family:var(--font-pixel);
  font-size:10px;
  letter-spacing:.5px;
  color:var(--ink-dim);
}
.contents-list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
  margin:28px 0 8px;
  font-size:14px;color:var(--ink-soft);
}
.contents-list li::before{content:"▸ ";color:var(--teal-ink);}

/* ---------- FOOTER ---------- */
footer{
  padding:60px 24px 40px;
  border-top:1px solid var(--line);
}
.footer-inner{
  max-width:1180px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;
}
.footer-mark{font-family:var(--font-pixel);font-size:12px;color:var(--ink-soft);line-height:1.8;}
.footer-mark span{color:var(--amber-ink);}
.footer-credit{font-size:13px;color:var(--ink-dim);max-width:44ch;}
.footer-legal{font-size:12px;color:var(--ink-dim);width:100%;margin-top:32px;padding-top:24px;border-top:1px solid var(--line-soft);}

/* ---------- BACK TO TOP ---------- */
.back-to-top{
  position:fixed;right:24px;bottom:24px;
  width:52px;height:52px;
  background:var(--panel-2);
  border:1px solid var(--teal);
  display:flex;align-items:center;justify-content:center;
  z-index:90;
  opacity:0;visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top svg{width:20px;height:20px;stroke:var(--teal);}
.back-to-top:hover{background:var(--teal);}
.back-to-top:hover svg{stroke:var(--void);}

/* ---------- CORNER MECH BADGE (scroll-linked assembly) ---------- */
.mech-badge{
  position:fixed;
  right:20px;bottom:90px;
  width:104px;height:104px;
  z-index:80;
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.mech-badge.shown{opacity:.65;}
.mech-badge .part{fill:var(--panel-2);stroke:var(--teal);stroke-width:1.5;}
.mech-badge .p-head{transform:translate(calc((1 - var(--p-head,0)) * 8px), calc((1 - var(--p-head,0)) * -36px));}
.mech-badge .p-armL{transform:translate(calc((1 - var(--p-arms,0)) * -34px), calc((1 - var(--p-arms,0)) * -6px));}
.mech-badge .p-armR{transform:translate(calc((1 - var(--p-arms,0)) * 34px), calc((1 - var(--p-arms,0)) * -6px));}
.mech-badge .p-legL{transform:translate(calc((1 - var(--p-legs,0)) * -8px), calc((1 - var(--p-legs,0)) * 28px));}
.mech-badge .p-legR{transform:translate(calc((1 - var(--p-legs,0)) * 8px), calc((1 - var(--p-legs,0)) * 28px));}
.mech-badge.complete .p-head{stroke:var(--amber);}
.mech-badge-label{
  position:fixed;right:20px;bottom:200px;
  font-family:var(--font-pixel);font-size:9px;letter-spacing:.5px;
  color:var(--amber-ink);
  opacity:0;transition:opacity .4s ease;
  z-index:80;
  text-align:right;
}
.mech-badge-label.shown{opacity:.9;}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ---------- MOBILE NAV ---------- */
@media (max-width:900px){
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--void);
    border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-links.open{max-height:400px;}
  .nav-link{width:100%;padding:18px 24px;border-bottom:1px solid var(--line-soft);}
  .nav-link::after{display:none;}
  .hamburger{display:block;}
  .hero-inner{grid-template-columns:1fr;text-align:left;}
  .hero-visual{height:280px;order:-1;}
  .pitch-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .step{grid-template-columns:70px 1fr;}
  .step::before{font-size:44px;}
}
@media (max-width:600px){
  section{padding:80px 20px;}
  .gallery-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .hero h1{text-shadow:3px 3px 0 var(--kaiju);}
  .mech-badge,.mech-badge-label{display:none;}
  .cta-panel{padding:44px 24px;}
  .stripe{stroke-width:18!important;}
  .stripe-kaiju{display:none;}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .mech-hero .part{animation:none;}
  .mech-badge .part{transition:none;}
  .reveal{opacity:1;transform:none;transition:none;}
  .btn:hover{transform:none;}
}