@font-face{font-family:'Bricolage Grotesque';src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'DM Sans';src:url(../fonts/dm-sans-latin-wght-normal.woff2) format('woff2');font-weight:100 1000;font-display:swap}

:root{
  --ink:#2A1710;
  --ember:#FF6A1F;
  --ember-deep:#D94A0A;
  --ember-ink:#B23A05;
  --honey:#FFB627;
  --teal:#12B5A6;
  --butter:#FFE29A;
  --coral:#FF8F6B;
  --paper:#FFF6E6;
  --cream:#FFF4E0;
  --white:#fff;
  --muted:#6A4B3B;
  --line:rgba(42,23,16,.16);
  --gutter:clamp(18px,4vw,56px);
  --wrap:min(1240px,100% - 2*var(--gutter));
  --display:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.025em;margin:0;line-height:1}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
.on-dark :focus-visible,.hero :focus-visible{outline-color:var(--honey)}
.sheet :focus-visible,.contact :focus-visible{outline-color:var(--ink)}
::selection{background:var(--honey);color:var(--ink)}
.wrap{width:var(--wrap);margin:0 auto}
.skip{position:absolute;left:-999px;top:10px;background:var(--honey);color:var(--ink);padding:10px 16px;border-radius:12px;font-weight:700;z-index:100;border:3px solid var(--ink)}
.skip:focus{left:10px}
.ico{width:1em;height:1em;flex:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* progress */
.progress{position:fixed;left:0;top:0;height:6px;width:100%;background:var(--honey);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:80;border-bottom:2px solid var(--ink)}

/* header */
.hdr{position:fixed;z-index:60;top:16px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.hdr > *{pointer-events:auto}
.pill{background:var(--white);border:3px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--ink)}
.brand{display:flex;align-items:center;gap:10px;padding:5px 18px 5px 8px;text-decoration:none}
.brand svg{width:34px;height:34px;flex:none}
.brand b{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1}
.brand small{font-weight:600;font-size:14px;color:var(--muted);line-height:1;padding-top:3px}
.nav{display:flex;align-items:center;gap:2px;padding:4px}
.nav a{text-decoration:none;font-weight:700;font-size:15px;padding:9px 16px;border-radius:999px;line-height:1.2;transition:background .15s,color .15s}
.nav a:hover{background:var(--paper)}
.nav a[aria-current]{background:var(--ink);color:var(--white)}
.nav a.cta{background:var(--honey);margin-left:4px}
.nav a.cta:hover{background:#FFC95A}
.menu-btn{display:none;align-items:center;gap:10px;font:700 15px var(--body);color:var(--ink);padding:10px 18px;cursor:pointer}
.menu-btn i{display:block;width:18px;height:12px;background:linear-gradient(var(--ink) 0 0) 0 0/100% 3px no-repeat,linear-gradient(var(--ink) 0 0) 0 100%/100% 3px no-repeat;border-radius:2px}
.sheet{position:fixed;inset:0;z-index:70;background:var(--ember);color:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:100px var(--gutter) 40px;gap:6px;transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1);visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sheet a{color:inherit;font-family:var(--display);font-weight:800;font-size:clamp(40px,12vw,64px);letter-spacing:-.03em;text-decoration:none;line-height:1.1}
.sheet a small{font:600 16px var(--body);letter-spacing:0;opacity:.8;margin-left:10px}
.sheet a:hover{color:var(--cream)}
.sheet .sheet-foot{margin-top:28px;font-size:15px;opacity:.85}
.sheet-close{position:absolute;top:16px;right:var(--gutter);background:var(--white);border:3px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--ink);font:700 15px var(--body);padding:10px 18px;cursor:pointer;color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:800;font-size:18px;text-decoration:none;padding:14px 26px;border-radius:16px;border:3px solid var(--ink);color:var(--ink);transition:transform .12s,box-shadow .12s;cursor:pointer}
.btn.sun{background:var(--honey);box-shadow:0 6px 0 var(--ink)}
.btn.white{background:var(--white);box-shadow:0 6px 0 var(--ink)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor;box-shadow:none}
.btn.sun:hover,.btn.white:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--ink)}
.btn.ghost:hover{background:rgba(255,244,224,.14)}
.btn:active{transform:translateY(6px)!important;box-shadow:0 0 0 var(--ink)!important}

.store{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--white);text-decoration:none;border:3px solid var(--ink);border-radius:16px;padding:9px 20px 9px 14px;min-height:56px;box-shadow:0 5px 0 rgba(255,255,255,.28);transition:transform .12s}
.store .ico{font-size:30px}
.store span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store small{font-size:12px;font-weight:600;opacity:.85}
.store b{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.01em}
a.store:not(.soon):hover{transform:translateY(-3px)}
.store.soon{cursor:default;background:rgba(42,23,16,.88);border-style:dashed;border-color:rgba(255,255,255,.55)}
.stores{display:flex;flex-wrap:wrap;gap:14px}

/* hero */
.hero{position:relative;isolation:isolate;background:var(--ink);color:var(--cream);padding:132px 0 160px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;background:radial-gradient(55% 70% at 76% 46%,rgba(255,106,31,.42),transparent 70%),radial-gradient(38% 48% at 4% 100%,rgba(18,181,166,.22),transparent 72%),radial-gradient(rgba(255,244,224,.09) 2px,transparent 2.5px) 0 0/30px 30px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero-copy{transform:translateY(calc(var(--sy,0)*-.04px))}
.chip{display:inline-flex;align-items:center;gap:10px;background:var(--white);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:7px 16px 7px 12px;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.chip:hover{transform:translateY(2px) rotate(-1deg);box-shadow:0 2px 0 var(--ink)}
.chip i{width:11px;height:11px;border-radius:50%;background:var(--ember);animation:ping 1.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,106,31,.75)}100%{box-shadow:0 0 0 12px rgba(255,106,31,0)}}
.hero h1{font-size:clamp(46px,6vw,88px);line-height:.9;margin:26px 0 24px;letter-spacing:-.035em;color:var(--cream)}
.hero h1 .w{display:inline-block;overflow:hidden;padding:.08em .06em .14em;margin:-.08em -.06em -.14em}
.hero h1 .w>span{display:inline-block;animation:rise .9s cubic-bezier(.2,.9,.2,1) backwards;animation-delay:calc(var(--i)*110ms + 120ms)}
.hero h1 .hl{color:var(--honey)}
.jit{display:inline-block;animation:jit 2.8s ease-in-out infinite;animation-delay:calc(var(--j)*-.31s)}
@keyframes rise{from{transform:translateY(115%) rotate(7deg)}}
@keyframes jit{0%,44%,100%{transform:none}4%{transform:translate(-2px,1px) rotate(-2deg)}9%{transform:translate(2px,-1px) rotate(2deg)}14%{transform:translate(-2px,-1px) rotate(-1.5deg)}19%{transform:translate(2px,1px) rotate(1.5deg)}24%{transform:translate(-1px,1px) rotate(-1deg)}30%{transform:translate(1px,-1px) rotate(1deg)}36%{transform:translate(-1px,0)}}
.lead{font-size:clamp(18px,1.7vw,21px);max-width:31em;color:rgba(255,244,224,.92)}
.hero .actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}

/* hero stage: Rumbly the acorn */
.mstage{position:relative;min-height:clamp(400px,46vw,580px);display:grid;place-items:center;transform:translateY(calc(var(--sy,0)*.05px))}
.mstage .rays{position:absolute;width:min(118%,680px);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,182,39,.22) 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 36%,transparent 70%);mask:radial-gradient(circle,#000 36%,transparent 70%);animation:turn 46s linear infinite}
.mstage .disc{position:absolute;width:min(74%,430px);aspect-ratio:1;border-radius:50%;background:var(--cream);border:4px solid var(--ink);box-shadow:0 0 0 8px var(--ember),18px 20px 0 8px rgba(0,0,0,.32)}
.mstage .ring{position:absolute;width:min(74%,430px);aspect-ratio:1;border-radius:50%;border:3px solid var(--honey);opacity:0;animation:shock 3.9s ease-out infinite;animation-delay:calc(var(--n)*1.3s)}
@keyframes shock{0%{transform:scale(.92);opacity:.75}100%{transform:scale(1.6);opacity:0}}
.mascot{position:relative;z-index:2;width:clamp(220px,27vw,360px);padding:0;border:0;background:none;cursor:pointer;color:inherit;animation:mbob 3.4s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.mascot:focus-visible{outline:3px solid var(--honey);outline-offset:10px;border-radius:40px}
@keyframes mbob{50%{transform:translateY(-16px)}}
.rumbly{display:block;width:100%;height:auto;overflow:visible}
.mascot .rumbly{animation:rumble 5.6s ease-in-out infinite}
.mascot:hover .rumbly{animation:shake .32s linear infinite}
@keyframes rumble{0%,60%,100%{transform:none}62%{transform:translate(-3px,1px) rotate(-1.4deg)}64%{transform:translate(3px,-1px) rotate(1.4deg)}66%{transform:translate(-3px,0) rotate(-1deg)}68%{transform:translate(3px,1px) rotate(1deg)}70%{transform:translate(-2px,-1px)}72%{transform:translate(2px,1px)}74%{transform:none}}
@keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2.5px,1px) rotate(-1.2deg)}75%{transform:translate(2.5px,-1px) rotate(1.2deg)}}
.rumbly .eye{transform-box:fill-box;transform-origin:center;animation:blink 5.2s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
.rumbly .brow{transform-box:fill-box;transform-origin:center;animation:brow 4s ease-in-out infinite}
.rumbly .br{animation-delay:-.7s}
@keyframes brow{0%,100%{transform:none}50%{transform:rotate(-5deg) translateY(-1.5px)}}
.rumbly .rl{animation:rlpulse 1.1s ease-in-out infinite alternate;--rx:-3px}
.rumbly .rl-r{animation-delay:-.55s;--rx:3px}
@keyframes rlpulse{from{opacity:.3;transform:translateX(0)}to{opacity:1;transform:translateX(var(--rx))}}
.rumbly .pupil{transform:translate(var(--ex,0px),var(--ey,0px));transition:transform .14s ease-out}
.rumbly .cap{transform-box:fill-box;transform-origin:50% 90%}
.rumbly .nutbody{transform-box:fill-box;transform-origin:50% 100%}
.mascot.poke .cap{animation:cappop .9s cubic-bezier(.3,.7,.3,1)}
.mascot.poke .nutbody{animation:squash .9s ease-out}
@keyframes cappop{0%{transform:none}28%{transform:translate(-6px,-46px) rotate(-16deg)}52%{transform:translate(4px,-2px) rotate(5deg)}68%{transform:translate(-1px,-12px) rotate(-3deg)}100%{transform:none}}
@keyframes squash{0%{transform:none}14%{transform:scale(1.07,.9)}30%{transform:scale(.95,1.08)}52%{transform:scale(1.05,.94)}100%{transform:none}}
.mstage .floor{position:absolute;left:50%;bottom:8%;width:34%;height:4%;margin-left:-17%;border-radius:50%;background:rgba(0,0,0,.38);filter:blur(7px);animation:shad 3.4s ease-in-out infinite}
@keyframes shad{50%{transform:scaleX(.8);opacity:.55}}
.poke-hint{position:absolute;left:2%;top:14%;z-index:4;transform:rotate(-8deg);background:var(--honey);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:4px 14px;font:800 14px var(--display);box-shadow:0 3px 0 var(--ink);animation:nudge 2.4s ease-in-out infinite;transition:opacity .3s,transform .3s}
@keyframes nudge{50%{transform:rotate(-4deg) translateY(-5px)}}
.mstage.poked .poke-hint{opacity:0;transform:scale(.6);animation:none}
.pt{position:absolute;left:50%;top:50%;width:var(--w,14px);height:var(--w,14px);margin:-7px 0 0 -7px;border-radius:50%;background:var(--c);border:2px solid var(--ink);pointer-events:none;z-index:5;animation:burst .95s cubic-bezier(.2,.8,.3,1) forwards}
.pt.sq{border-radius:4px}
@keyframes burst{0%{transform:translate(0,0) scale(.4) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r));opacity:0}}
.mini{position:absolute;right:-1%;bottom:5%;z-index:4;width:min(44%,240px);transform:rotate(5deg);animation:float2 6s ease-in-out infinite}
@keyframes float2{50%{transform:rotate(3deg) translateY(-12px)}}
.mini .mb{aspect-ratio:2.02/1;border:7px solid var(--ink);border-radius:22px;background:var(--ink);overflow:hidden;position:relative;box-shadow:9px 9px 0 rgba(0,0,0,.45)}
.mini .mb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:cyc 16s ease-in-out infinite;animation-delay:calc(var(--i,0)*4s - 1.6s)}
.mini .cap{position:absolute;left:-8px;bottom:-14px;background:var(--honey);color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:4px 12px;font:800 13px var(--display);transform:rotate(-4deg);box-shadow:0 3px 0 var(--ink)}

.stage{position:relative;min-height:420px}
.device{position:relative;margin:30px 0 0 auto;width:min(100%,600px);transform:rotate(-3.5deg);animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:rotate(-2deg) translateY(-14px)}}
.device .body{aspect-ratio:2.02/1;border:11px solid var(--ink);border-radius:38px;background:var(--ink);overflow:hidden;position:relative;box-shadow:14px 14px 0 var(--ink)}
.device .body img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.device .body img{opacity:0;animation:cyc 16s ease-in-out infinite;animation-delay:calc(var(--i,0)*4s - 1.6s)}
@keyframes cyc{0%{opacity:0}4%,25%{opacity:1}29%,100%{opacity:0}}
.device .notch{position:absolute;left:50%;top:-3px;width:70px;height:12px;margin-left:-35px;background:var(--ink);border-radius:0 0 12px 12px;z-index:2}
.device .cap{position:absolute;right:-6px;bottom:-14px;background:var(--honey);color:var(--ink);border:3px solid var(--ink);border-radius:14px;padding:6px 14px;font:800 15px var(--display);transform:rotate(3deg);box-shadow:0 4px 0 var(--ink)}
.tok{position:absolute;z-index:3;width:var(--s,56px);transform:translate(calc(var(--px,0)*var(--k,1)*1px),calc(var(--py,0)*var(--k,1)*1px));transition:transform .25s ease-out;pointer-events:none}
.tok svg{width:100%;height:auto;overflow:visible;animation:bob var(--t,5s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes bob{from{transform:translateY(-10px) rotate(-8deg)}to{transform:translateY(12px) rotate(10deg)}}

/* marquee */
.band{position:relative;z-index:3;margin:-64px -20px 0;background:var(--honey);border-block:4px solid var(--ink);transform:rotate(-1.6deg);overflow:hidden;color:var(--ink)}
.track{display:flex;width:max-content;animation:marq 34s linear infinite}
.band:hover .track{animation-play-state:paused}
.track ul{display:flex;align-items:center;gap:30px;margin:0;padding:14px 15px;list-style:none;flex:none}
.track li{display:flex;align-items:center;gap:30px;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.8vw,34px);letter-spacing:-.02em;white-space:nowrap}
.track svg{width:28px;height:28px;flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:clamp(80px,10vw,140px) 0}
.sec h2{font-size:clamp(40px,5.4vw,76px);letter-spacing:-.035em}
.sec .intro{margin-top:16px;color:var(--muted);max-width:34em;font-size:19px}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(36px,5vw,64px)}
.rv{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv{opacity:0;transform:translateY(34px)}
.js .rv.in{opacity:1;transform:none}

/* portfolio */
#games{padding-top:clamp(70px,9vw,120px)}
.feat{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);color:var(--white);background:#24120C;border:4px solid var(--ink);border-radius:40px;overflow:hidden;box-shadow:14px 14px 0 var(--ink)}
.feat::before{content:"";position:absolute;inset:0;z-index:-2;background:url(../img/skyline.webp) 70% 60%/cover}
.feat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(30,15,9,.94) 0,rgba(30,15,9,.78) 44%,rgba(30,15,9,.1) 100%)}
.feat-copy{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.tag{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:4px 14px;font-weight:800;font-size:14px}
.feat .logo{width:min(100%,380px);margin:2px 0 0 -8px;filter:drop-shadow(0 8px 20px rgba(10,5,25,.5))}
.feat p.desc{color:rgba(255,255,255,.9);max-width:30em}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:4px 0 6px;padding:0;list-style:none}
.facts li{display:flex;flex-direction:column;font-size:15px;line-height:1.3}
.facts small{opacity:.75;font-weight:600}
.facts b{font-weight:700}
.feat-art{position:relative;padding:clamp(24px,3vw,40px) clamp(24px,3vw,44px) 0 0;display:flex;flex-direction:column;justify-content:flex-end}
.shots{position:relative;margin:0 0 0 auto;width:100%;max-width:640px;padding-bottom:40px;transform-style:preserve-3d;transition:transform .2s ease-out}
.frame{border:4px solid var(--ink);border-radius:22px;overflow:hidden;background:var(--ink);box-shadow:8px 8px 0 var(--ink)}
.frame img{width:100%;aspect-ratio:16/9;object-fit:cover}
.shots .a{transform:rotate(-1.5deg)}
.shots .b{position:absolute;right:-12px;bottom:0;width:46%;transform:rotate(3deg);box-shadow:8px 8px 0 var(--honey)}
.lane{position:relative;height:120px;margin-top:4px;overflow:hidden}
.lane::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--ink);opacity:.85}
.lane .mari{position:absolute;left:4%;bottom:6px;width:86px;animation:idle 1.4s ease-in-out infinite}
.lane .foe{position:absolute;bottom:6px;width:72px;left:100%;animation:march 7s linear infinite;animation-delay:var(--d,0s)}
.lane .foe img{transform:scaleX(-1);animation:step .5s ease-in-out infinite alternate}
@keyframes idle{50%{transform:translateY(-6px)}}
@keyframes march{0%{transform:translateX(0);opacity:0}8%{opacity:1}78%{opacity:1}100%{transform:translateX(calc(-1 * var(--travel,560px)));opacity:0}}
@keyframes step{to{transform:scaleX(-1) translateY(-7px)}}

.more{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:28px;margin-top:40px}
.soon-card{position:relative;display:flex;align-items:center;gap:24px;border:4px dashed rgba(42,23,16,.4);border-radius:32px;padding:30px;background:var(--white)}
.soon-card h3{font-size:30px}
.soon-card p{color:var(--muted);margin-top:8px}
.cart{flex:none;width:96px;height:112px;position:relative;animation:wobble 4s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-10px)}}
.cart i{position:absolute;inset:0;background:var(--ember);border:4px solid var(--ink);border-radius:14px 14px 10px 10px;box-shadow:5px 5px 0 var(--ink)}
.cart i::before{content:"";position:absolute;left:12px;right:12px;top:12px;height:46px;background:var(--honey);border:3px solid var(--ink);border-radius:8px}
.cart i::after{content:"";position:absolute;left:18px;right:18px;bottom:-4px;height:14px;background:var(--ink);border-radius:0 0 6px 6px}
.cart b{position:absolute;left:0;right:0;top:15px;text-align:center;font:800 40px var(--display);color:var(--ink);z-index:1}
.platforms{display:flex;flex-direction:column;justify-content:center;gap:16px;background:var(--ink);color:var(--white);border-radius:32px;padding:30px}
.platforms h3{font-size:30px}
.platforms p{color:rgba(255,255,255,.8)}

/* studio */
.studio{background:var(--ink);color:var(--white);position:relative;isolation:isolate}
.studio .intro{color:rgba(255,255,255,.8)}
.studio-top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,6vw,96px);align-items:end}
.studio-top p{font-size:20px;color:rgba(255,255,255,.88);max-width:30em}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(44px,6vw,80px);position:relative}
.steps::before{content:"";position:absolute;left:6%;right:6%;top:-22px;height:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 12px,transparent 12px 22px);transform-origin:0 50%;transform:scaleX(var(--line,1))}
.step{border:4px solid var(--cream);border-radius:28px;padding:24px;color:var(--ink);display:flex;flex-direction:column;gap:12px;min-height:240px;transition:transform .2s}
.step:hover{transform:translateY(-8px) rotate(-1deg)}
.step:nth-child(1){background:var(--honey)}.step:nth-child(2){background:var(--teal)}.step:nth-child(3){background:var(--butter)}.step:nth-child(4){background:var(--coral)}
.step .n{font:800 56px var(--display);line-height:1;letter-spacing:-.04em}
.step h3{font-size:26px}
.step p{font-size:16px;line-height:1.5}
.js .steps::before{--line:0;transition:transform 1.4s cubic-bezier(.3,.7,.2,1)}
.js .steps.in::before{--line:1}

/* founder */
.founder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,7vw,110px);align-items:center}
.portrait{position:relative;width:min(100%,460px);margin:0 auto}
.portrait .frame-p{position:relative;aspect-ratio:4/5;background:var(--honey);border:4px solid var(--ink);border-radius:44px;box-shadow:14px 14px 0 var(--teal);overflow:hidden;transform:rotate(-3deg);transition:transform .3s}
.portrait:hover .frame-p{transform:rotate(0)}
.portrait .frame-p img,.portrait .frame-p svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spin{position:absolute;right:-34px;top:-34px;width:150px;height:150px;animation:turn 18s linear infinite}
.spin text{font:800 12px var(--display);letter-spacing:.1em;fill:var(--ink)}
.spin .disc{fill:var(--honey);stroke:var(--ink);stroke-width:4}
@keyframes turn{to{transform:rotate(360deg)}}
.founder h2{margin-bottom:6px}
.founder .role{font-weight:700;color:var(--ember-ink);font-size:19px}
.founder blockquote{margin:24px 0 0;font:700 clamp(24px,2.6vw,34px)/1.2 var(--display);letter-spacing:-.02em;max-width:22em}
.founder p{margin-top:20px;color:var(--muted);max-width:32em}

/* contact */
.contact{background:var(--ember);color:var(--ink);position:relative;isolation:isolate;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(42,23,16,.11) 2px,transparent 2.5px) 0 0/30px 30px}
.mail{display:inline-block;margin-top:30px;font:800 clamp(20px,5.5vw,88px)/1.05 var(--display);letter-spacing:-.035em;text-decoration:none;color:var(--ink);word-break:break-word;background:linear-gradient(var(--honey),var(--honey)) 0 92%/100% 14px no-repeat;padding-bottom:6px;transition:background-size .25s}
.mail:hover{background-size:100% 100%;color:var(--ink)}
.copy-row{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.copy-row .btn{padding:10px 20px;font-size:16px}
.copy-msg{font-weight:700}
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px;margin-top:clamp(40px,6vw,72px)}
.topic{display:block;text-decoration:none;color:var(--ink);background:var(--white);border:4px solid var(--ink);border-radius:26px;padding:22px 24px;box-shadow:0 7px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.topic:hover{transform:translateY(4px);box-shadow:0 3px 0 var(--ink)}
.topic h3{font-size:24px;margin-bottom:6px}
.topic p{font-size:15.5px;color:var(--muted);line-height:1.45}

/* footer */
.foot{background:var(--ink);color:var(--white);padding:56px 0 36px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:40px}
.foot .brand{background:none;border:0;box-shadow:none;padding:0}
.foot .brand b{color:var(--white)}
.foot .brand small{color:rgba(255,255,255,.7)}
.foot p{color:rgba(255,255,255,.72);font-size:15px;max-width:28em;margin-top:16px}
.foot h4{font-size:16px;letter-spacing:0;margin-bottom:14px;color:var(--honey)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:16px}
.foot ul a{text-decoration:none;opacity:.9}
.foot ul a:hover{text-decoration:underline;opacity:1}
.foot-base{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:14px;color:rgba(255,255,255,.7)}
.totop{position:fixed;right:18px;bottom:18px;z-index:55;width:50px;height:50px;border-radius:50%;background:var(--honey);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .25s,transform .25s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:22px;height:22px}

/* game page */
.ghero{position:relative;isolation:isolate;color:var(--white);padding:150px 0 90px;overflow:hidden;background:#24120C}
.ghero::before{content:"";position:absolute;inset:0;z-index:-2;background:url(../img/skyline.webp) 65% 62%/cover}
.ghero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(30,15,9,.94) 0,rgba(30,15,9,.7) 45%,rgba(30,15,9,.15) 100%),linear-gradient(180deg,rgba(30,15,9,0) 70%,rgba(30,15,9,.9) 100%)}
.crumbs{display:flex;gap:10px;font-weight:600;font-size:15px;margin-bottom:26px;color:rgba(255,255,255,.85)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.ghero .logo{width:min(100%,520px);margin-left:-10px;filter:drop-shadow(0 10px 26px rgba(10,5,25,.55))}
.ghero .lead{margin:18px 0 26px}
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.point{background:var(--white);border:4px solid var(--ink);border-radius:28px;padding:26px;box-shadow:0 8px 0 var(--ink)}
.point:nth-child(1){background:var(--honey)}.point:nth-child(2){background:var(--butter)}.point:nth-child(3){background:var(--teal)}
.point h3{font-size:28px;margin-bottom:10px}
.point p{font-size:17px;line-height:1.5}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.gal .frame{box-shadow:10px 10px 0 var(--ember)}
.cast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.who{background:var(--ink);color:var(--white);border-radius:30px;padding:26px 20px 22px;text-align:center}
.who .pic{height:200px;display:flex;align-items:flex-end;justify-content:center}
.who .pic img{height:100%;width:auto;object-fit:contain}
.who h3{font-size:24px;margin-top:16px}
.who p{font-size:15px;color:rgba(255,255,255,.75);margin-top:4px}

/* privacy / legal */
.legal-hero{padding:150px 0 56px;background:var(--ink);color:var(--cream);position:relative;isolation:isolate;overflow:hidden}
.legal-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 90% at 85% 40%,rgba(255,106,31,.35),transparent 70%),radial-gradient(rgba(255,244,224,.09) 2px,transparent 2.5px) 0 0/30px 30px}
.legal-hero h1{font-size:clamp(44px,6vw,84px);letter-spacing:-.035em}
.legal-hero p{margin-top:16px;max-width:36em;font-size:19px;color:rgba(255,255,255,.92)}
.legal{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(30px,6vw,88px);padding:64px 0 110px;align-items:start}
.toc{position:sticky;top:96px;background:var(--white);border:3px solid var(--ink);border-radius:24px;padding:18px 20px;box-shadow:0 6px 0 var(--ink)}
.toc h2{font-size:18px;margin-bottom:10px;letter-spacing:-.01em}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:15px}
.toc a{display:block;text-decoration:none;padding:6px 10px;border-radius:10px;font-weight:600;color:var(--muted)}
.toc a:hover{background:var(--paper);color:var(--ink)}
.toc a[aria-current]{background:var(--ink);color:var(--white)}
.doc{max-width:46em}
.doc section{padding-top:8px;margin-bottom:46px}
.doc h2{font-size:clamp(28px,3vw,38px);margin-bottom:14px;letter-spacing:-.03em}
.doc h3{font-size:21px;margin:26px 0 8px;letter-spacing:-.015em}
.doc p,.doc li{color:#3B2418}
.doc p+p{margin-top:14px}
.doc ul{padding-left:22px;margin:12px 0}
.doc li{margin:6px 0}
.doc a{color:var(--ember-ink);font-weight:600}
.doc .note{background:var(--white);border:3px solid var(--ink);border-radius:20px;padding:18px 22px;margin:18px 0}
.doc table{border-collapse:collapse;width:100%;font-size:15.5px;margin:16px 0}
.doc th,.doc td{text-align:left;border-bottom:1px solid var(--line);padding:10px 12px 10px 0;vertical-align:top}
.doc th{font-family:var(--display);font-size:15px}
.updated{display:inline-block;margin-top:22px;background:var(--honey);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:5px 16px;font-weight:800;font-size:15px}

/* responsive */
@media (max-width:1060px){
  .feat{grid-template-columns:1fr}
  .feat::after{background:linear-gradient(180deg,rgba(30,15,9,.92) 0,rgba(30,15,9,.7) 55%,rgba(30,15,9,.35) 100%)}
  .feat-art{padding:0 clamp(24px,4vw,44px) 0}
  .shots{margin:0 auto}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps::before{display:none}
}
@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .hero{padding:130px 0 150px}
  .hero-grid{grid-template-columns:1fr}
  .stage{min-height:0;margin-top:10px}
  .device{margin:20px auto 0;width:min(94%,520px)}
  .studio-top,.founder,.foot-grid{grid-template-columns:1fr}
  .portrait{margin-bottom:20px}
  .points,.cast{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .legal{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
}
@media (max-width:560px){
  .brand small{display:none}
  .steps{grid-template-columns:1fr}
  .soon-card{flex-direction:column;align-items:flex-start}
  .spin{width:110px;height:110px;right:-12px;top:-30px}
  .band{margin-top:-44px}
  .store{width:100%}
  .stores{width:100%}
}
/*MOTION*/
/* motion: reveal variants, split headings, marquee, stats, ornaments */
.js .rv[data-rv=left]:not(.in){transform:translateX(-60px)}
.js .rv[data-rv=right]:not(.in){transform:translateX(60px)}
.js .rv[data-rv=pop]:not(.in){transform:scale(.86) translateY(26px)}
.js .rv[data-rv=pop]{transition-timing-function:cubic-bezier(.3,1.5,.4,1)}
.sp .sw{display:inline-block;overflow:hidden;vertical-align:top;padding:.05em .03em .16em;margin:-.05em -.03em -.16em}
.sp .sw>span{display:inline-block;transform:translateY(115%) rotate(5deg);transition:transform .85s cubic-bezier(.2,.9,.2,1);transition-delay:calc(var(--wi)*70ms)}
.sp.in .sw>span{transform:none}
.band{transform:rotate(-1.6deg) skewX(calc(var(--sk,0)*1deg));will-change:transform}
.studio::before{content:"";position:absolute;left:0;right:0;top:-1px;height:26px;z-index:1;background:radial-gradient(circle at 50% 0,var(--paper) 0 17px,transparent 18px) 0 0/46px 26px repeat-x}
.stats{display:flex;flex-wrap:wrap;gap:22px clamp(28px,5vw,64px);list-style:none;padding:0;margin:clamp(34px,4vw,56px) 0 0}
.stats li{display:flex;flex-direction:column;gap:4px}
.stats b{font:800 clamp(52px,6.4vw,92px)/1 var(--display);letter-spacing:-.04em;color:var(--honey)}
.stats span{font-size:15.5px;color:rgba(255,244,224,.82);max-width:13em;line-height:1.3}
.portrait .sticker{position:absolute;left:-30px;bottom:-26px;width:124px;z-index:3;transform:rotate(-10deg);animation:wig 4s ease-in-out infinite;filter:drop-shadow(4px 5px 0 var(--ink))}
@keyframes wig{50%{transform:rotate(6deg) translateY(-7px)}}
.peek{position:absolute;top:clamp(36px,5vw,84px);right:clamp(16px,7vw,130px);width:clamp(110px,15vw,210px);transform:rotate(8deg);animation:mbob 3.8s ease-in-out infinite;z-index:1}
.brand .rumbly{width:34px;height:34px}
@media (max-width:900px){
  .mstage{min-height:clamp(360px,86vw,480px)}
  .mini{right:2%}
  .peek{display:none}
}
@media (max-width:560px){
  .poke-hint{left:0;top:8%}
  .portrait .sticker{width:92px;left:-14px}
}
@media (prefers-reduced-motion:reduce){
  .mini .mb img:first-of-type{opacity:1}
  .sp .sw>span{transform:none}
  .band{transform:rotate(-1.6deg)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .track{overflow-x:auto}
  .device{transform:rotate(-3deg)}
  .device .body img:first-of-type{opacity:1}
}

/* founder portrait: photo <-> game character */
button.frame-p{display:block;width:100%;padding:0;cursor:pointer;font:inherit;color:inherit}
.frame-p .photo{filter:contrast(1.03) saturate(1.05)}
.frame-p .toon{opacity:0;transition:opacity .35s}
.portrait:hover .toon,.portrait.is-toon .toon{opacity:1}
.hint{position:absolute;right:14px;bottom:14px;z-index:2;background:var(--white);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:4px 14px;font:800 13px var(--display);box-shadow:0 3px 0 var(--ink)}
.tok.hm{}
@media (max-width:900px){.tok.hm{display:none}}
@media (hover:none){.portrait:hover .toon{opacity:0}.portrait.is-toon:hover .toon{opacity:1}}

/* legal page: stack the table and wrap long strings on phones */
.doc{overflow-wrap:anywhere}
@media (max-width:640px){
  .doc table,.doc tbody,.doc tr,.doc td{display:block;width:100%}
  .doc thead{display:none}
  .doc tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .doc td{border:0;padding:2px 0}
  .doc td:first-child{font:800 16px var(--display)}
}

@media (min-width:700px){.mail{font-size:clamp(28px,6.4vw,88px)}}

/* screenshot gallery + viewer */
.gal{grid-template-columns:repeat(2,minmax(0,1fr))}
.gal .shot{margin:0}
.gal .shot.wide{grid-column:1/-1}
.gal .frame{padding:0;display:block;width:100%;cursor:zoom-in;background:var(--ink);font:inherit;color:inherit;position:relative}
.gal .frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease}
.gal .frame:hover img,.gal .frame:focus-visible img{transform:scale(1.035)}
.gal .frame .zoom{position:absolute;right:12px;bottom:12px;background:var(--white);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:3px 12px;font:800 13px var(--display);opacity:0;transform:translateY(6px);transition:.2s}
.gal .frame:hover .zoom,.gal .frame:focus-visible .zoom{opacity:1;transform:none}
@media (hover:none){.gal .frame .zoom{opacity:1;transform:none}}
.gal figcaption{margin:16px 6px 0;font-size:16px;color:var(--muted)}
.gal figcaption b{color:var(--ink);font-family:var(--display)}
.wip{margin-top:30px;font-size:15px;color:var(--muted)}
.vid{position:relative;border:4px solid var(--ink);border-radius:22px;overflow:hidden;background:var(--ink);box-shadow:10px 10px 0 var(--ember)}
.vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ink)}
.vid :focus-visible{outline-color:var(--white)}
.vplay{display:none;position:absolute;left:50%;top:50%;width:clamp(64px,9vw,96px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--honey);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);place-items:center;padding:0;cursor:pointer;transition:transform .15s}
.js .vplay{display:grid}
.vplay:hover{transform:translate(-50%,-50%) scale(1.07)}
.vplay svg{width:42%;height:42%;margin-left:8%}
.js .vid.on .vplay{display:none}

/* heat city: hero buttons, mini-game, faq */
.hc-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.hc-ctas .ico{width:18px;height:18px}
.arcade-sec{padding-top:0}
.arcade{position:relative;aspect-ratio:16/9;border:4px solid var(--ink);border-radius:22px;overflow:hidden;background:#24120C;box-shadow:10px 10px 0 var(--teal);user-select:none;-webkit-user-select:none}
.arcade canvas{display:block;width:100%;height:100%;cursor:crosshair}
.arcade.live canvas{touch-action:none;cursor:none}
.hud{position:absolute;left:14px;right:14px;top:12px;display:flex;align-items:center;gap:10px;pointer-events:none}
.hud-stars{display:flex;gap:3px;background:rgba(30,15,9,.72);border:3px solid var(--ink);border-radius:999px;padding:5px 10px}
.hud-stars svg{width:20px;height:20px;opacity:.28;filter:grayscale(1);transition:opacity .2s,filter .2s,transform .3s cubic-bezier(.3,1.6,.4,1)}
.hud-stars svg.on{opacity:1;filter:none;transform:scale(1.15)}
.hud-pill{margin-left:auto;background:var(--white);border:3px solid var(--ink);border-radius:999px;padding:3px 12px;font:800 16px var(--display);font-variant-numeric:tabular-nums;box-shadow:0 3px 0 var(--ink)}
.hud-pill.cash{margin-left:0;background:var(--honey)}
.arcade.siren .hud-stars{animation:siren .5s steps(2) infinite}
@keyframes siren{0%{box-shadow:0 0 0 4px rgba(255,59,59,.85)}100%{box-shadow:0 0 0 4px rgba(60,120,255,.85)}}
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:20px;background:radial-gradient(circle at 50% 45%,rgba(30,15,9,.55),rgba(30,15,9,.88));color:var(--white)}
.ov[hidden]{display:none}
.ov-kicker{font:800 14px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--teal);border:3px solid var(--ink);border-radius:999px;padding:3px 14px}
.ov-title{font:800 clamp(34px,6vw,72px)/1 var(--display);letter-spacing:-.03em;color:var(--honey);-webkit-text-stroke:2px var(--ink);text-shadow:0 5px 0 var(--ink)}
.busted .ov-title{color:var(--ember);animation:bust .5s cubic-bezier(.3,1.7,.4,1)}
@keyframes bust{0%{transform:scale(.4) rotate(-8deg)}100%{transform:none}}
.ov-how,.ov-score{max-width:30em;font-size:clamp(15px,1.8vw,18px);color:rgba(255,255,255,.92)}
.ov-score b{color:var(--honey);font-family:var(--display)}
.ov-best{font-size:14px;color:rgba(255,255,255,.7);min-height:1em}
.ov-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.how-touch{display:none}
@media (hover:none){.how-fine{display:none}.how-touch{display:inline}}
@media (max-width:560px){
  .arcade{aspect-ratio:4/5}
  .ov{gap:10px}
  .ov .btn{font-size:16px;padding:11px 18px}
  .hud-stars svg{width:16px;height:16px}
}
.faq-wrap{max-width:900px}
.faq{display:grid;gap:14px}
.faq details{background:var(--white);border:4px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--ink);transition:background .2s}
.faq details[open]{background:var(--butter)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font:800 clamp(18px,2.2vw,22px)/1.25 var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:50%;background:var(--honey);font-size:22px;line-height:1;transition:transform .25s cubic-bezier(.3,1.6,.4,1)}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--ember)}
.faq details p{padding:0 22px 20px;max-width:46em}
.faq a{color:var(--ember-ink);font-weight:700}

/* 404 */
.lost{min-height:100dvh;display:flex;align-items:center;padding:120px 0 80px}
.lost .ov-title{font-size:clamp(56px,12vw,140px)}
.lost p{max-width:32em;margin:18px auto 0;font-size:19px;color:rgba(255,255,255,.9)}
.lost .hc-ctas{justify-content:center;margin-top:30px}
.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;color:var(--white)}
.lb::backdrop{background:rgba(26,13,8,.92);backdrop-filter:blur(6px)}
.lb .lb-in{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:56px 72px 28px;gap:16px}
.lb img{max-width:100%;max-height:calc(100dvh - 190px);border:4px solid var(--ink);border-radius:20px;box-shadow:12px 12px 0 var(--ember);background:var(--ink)}
.lb p{margin:0;text-align:center;font-size:18px;max-width:52ch}
.lb .n{font:800 14px var(--display);opacity:.7;letter-spacing:.04em}
.lb button{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:3px solid var(--ink);background:var(--honey);color:var(--ink);cursor:pointer;font:800 26px/1 var(--display);box-shadow:0 4px 0 var(--ink)}
.lb button:hover{background:var(--white)}
.lb .x{top:14px;right:16px}
.lb .pv{left:12px;top:50%;margin-top:-26px}
.lb .nx{right:12px;top:50%;margin-top:-26px}
@media (max-width:700px){
  .gal{grid-template-columns:1fr}
  .lb .lb-in{padding:64px 14px 22px}
  .lb .pv,.lb .nx{top:auto;bottom:16px;margin:0}
  .lb .pv{left:14px}.lb .nx{right:14px}
  .lb img{max-height:calc(100dvh - 250px)}
}