@font-face{font-family:"Pixelify Sans";src:url("/assets/fonts/PixelifySans/PixelifySans-VariableFont_wght.ttf") format("truetype");font-weight:400 700;font-display:swap}@font-face{font-family:"Press Start 2P";src:url("/assets/fonts/Press_Start_2P/PressStart2P-Regular.ttf") format("truetype");font-weight:400;font-display:swap}:root{--navy:#080b1d;--navy-2:#0e1429;--panel:#11182c;--ink:#fffaf3;--muted:#c8c3d0;--cyan:#2ce5ef;--pink:#ff36bb;--yellow:#ffe253;--purple:#2a1b4e;--display:"Pixelify Sans",sans-serif;--pixel:"Press Start 2P",monospace;--body:system-ui,-apple-system,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--ink);font-family:var(--body);overflow-x:hidden}.arcade-page{min-width:320px}a{color:inherit}a:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1180px,calc(100% - 48px));margin:auto;padding:25px 0;border-bottom:1px solid rgba(44,229,239,.28)}.wordmark{display:inline-flex;gap:5px;align-items:baseline;color:var(--ink);font:400 .7rem var(--pixel);letter-spacing:.03em;text-decoration:none}.wordmark span{color:var(--cyan)}.site-header nav{display:flex;gap:30px;margin-left:auto}.site-header nav a,.site-footer a{color:var(--muted);font:400 .52rem var(--pixel);text-decoration:none;text-transform:uppercase}.site-header nav a:hover,.site-footer a:hover{color:var(--pink)}main{width:100%}.section-shell{width:min(1180px,calc(100% - 48px));margin:auto}.eyebrow,.store-status,.visual-label,.feature-image figcaption,.reel-frame figcaption,.setup-image figcaption,.truth-list{font:400 .52rem/1.6 var(--pixel);letter-spacing:.02em;text-transform:uppercase}.eyebrow{margin:0 0 17px;color:var(--cyan)}h1,h2,h3,p{margin-top:0}.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,.78fr);align-items:center;gap:50px;min-height:680px;width:min(1180px,calc(100% - 48px));margin:auto;padding:70px 0 80px;isolation:isolate}.hero:before{content:"";position:absolute;z-index:-1;inset:0 -100vw;background:radial-gradient(circle at 78% 38%,rgba(44,229,239,.12),transparent 25%),linear-gradient(180deg,#0b1024,#11162c 80%,#231837)}.hero-copy{position:relative;z-index:2}.hero h1,.section-heading h2,.section-copy h2,.feature-copy h2,.setup-copy h2,.privacy-section h2{font:700 clamp(3.4rem,6.5vw,6.8rem)/.84 var(--display);letter-spacing:-.055em;text-transform:uppercase;margin:0}.hero h1 em,.section-heading h2 em,.section-copy h2 em,.feature-copy h2 em,.setup-copy h2 em,.privacy-section h2 em{font-style:normal;color:var(--pink)}.hero-lead{margin:24px 0 12px;color:var(--yellow);font:700 clamp(1.3rem,2.2vw,2.05rem)/1 var(--display)}.hero-description{max-width:470px;color:var(--muted);font-size:1rem;line-height:1.65}.hero-actions{display:flex;align-items:center;gap:22px;margin-top:27px}.button{display:inline-block;text-decoration:none;font:400 .59rem var(--pixel);text-transform:uppercase}.button-primary{padding:16px 18px;color:#151327;background:var(--yellow);box-shadow:6px 6px 0 var(--pink)}.button-primary:hover{background:var(--cyan)}.store-status{color:var(--muted);line-height:1.8}.store-status b{color:var(--pink);font-weight:400}.hero-visual{position:relative;width:min(100%,520px);margin:0 auto;padding:13px;background:#080b1a;border:3px solid var(--pink);box-shadow:11px 11px 0 var(--cyan);transform:rotate(1.5deg)}.hero-visual:before{content:"";position:absolute;left:24px;top:-7px;width:90px;height:7px;background:var(--yellow)}.hero-visual>img:not(.hero-cat){display:block;width:100%;height:auto}.hero-visual figcaption{padding:9px 0 2px;color:var(--cyan);font:400 .45rem var(--pixel);text-transform:uppercase}.visual-label{position:absolute;z-index:3;right:-22px;top:15px;padding:9px 11px;color:#151327;background:var(--yellow);transform:rotate(5deg)}.hero-cat{position:absolute;z-index:3;left:-18%;bottom:-25px;width:58%;height:auto;image-rendering:pixelated;filter:drop-shadow(7px 8px 0 rgba(0,0,0,.75))}.how-section,.reel-section,.feature-section,.setup-section,.privacy-section{position:relative;padding:100px 0}.how-section:before,.reel-section:before,.feature-section:before,.setup-section:before,.privacy-section:before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;top:0;bottom:0;transform:translateX(-50%);background:#0c1225}.section-heading{max-width:650px}.section-heading h2,.section-copy h2,.feature-copy h2,.setup-copy h2,.privacy-section h2{font-size:clamp(2.8rem,5.3vw,5.6rem)}.section-heading>p:last-child,.section-copy>p:not(.eyebrow),.feature-copy>p:not(.eyebrow),.setup-copy>p:not(.eyebrow),.privacy-section>div>p:not(.eyebrow){color:var(--muted);line-height:1.65;font-size:1rem}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}.steps article{position:relative;min-height:230px;padding:25px 25px 38px;background:var(--panel);border:1px solid rgba(44,229,239,.4);border-top:4px solid var(--cyan);box-shadow:7px 7px 0 rgba(255,54,187,.25)}.steps article:nth-child(2){transform:translateY(-16px);border-top-color:var(--pink);background:#19132f}.steps article:nth-child(3){transform:translateY(10px);border-top-color:var(--yellow)}.step-number{color:var(--yellow);font:400 .62rem var(--pixel)}.steps h3{margin:23px 0 10px;font:700 1.55rem/1 var(--display);text-transform:uppercase}.steps p{color:var(--muted);line-height:1.55;font-size:.94rem}.reel-section{display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:90px}.reel-proof{position:relative;min-height:515px}.reel-frame{position:absolute;right:19%;top:0;width:min(60%,310px);margin:0;padding:11px;background:#080b1a;border:3px solid var(--cyan);box-shadow:9px 9px 0 var(--pink);transform:rotate(-2deg)}.reel-frame picture,.reel-frame picture img{display:block;width:100%;height:auto}.reel-frame figcaption,.feature-image figcaption,.setup-image figcaption{padding-top:9px;color:var(--cyan)}.reel-covers{position:absolute;z-index:2;left:0;bottom:36px;width:65%;height:auto;border:3px solid var(--pink);box-shadow:6px 6px 0 var(--cyan);transform:rotate(2deg)}.feature-section{display:grid;grid-template-columns:1.15fr .85fr;gap:90px;align-items:center}.feature-section:before{background:#11162a}.feature-section:nth-of-type(5):before{background:#0c1225}.feature-section:nth-of-type(6){grid-template-columns:.85fr 1.15fr}.feature-image{margin:0;padding:13px;background:#080b1a;border:3px solid var(--cyan);box-shadow:10px 10px 0 var(--pink);transform:rotate(-1deg)}.feature-section:nth-of-type(5) .feature-image{transform:rotate(1deg);border-color:var(--pink);box-shadow:10px 10px 0 var(--cyan)}.feature-image img{display:block;width:100%;height:auto}.feature-copy{max-width:440px}.truth-list{margin:29px 0 0}.truth-list div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid rgba(200,195,208,.3);color:var(--muted)}.truth-list dd{margin:0;color:var(--cyan)}.setup-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:95px;align-items:center}.setup-section:before{background:linear-gradient(145deg,#171631,#211b45)}.steam-logo{display:block;width:141px;height:auto;margin:0 0 28px}.setup-copy{max-width:430px}.setup-image{margin:0;padding:13px;background:#080b1a;border:3px solid var(--yellow);box-shadow:10px 10px 0 var(--pink);transform:rotate(-1deg)}.setup-image img{display:block;width:100%;height:auto}.setup-image figcaption{color:var(--yellow)}.privacy-section{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding-bottom:70px}.privacy-section:before{background:#090e20;border-top:1px solid rgba(44,229,239,.25)}.text-link{display:inline-block;margin-top:16px;color:var(--cyan);font:400 .54rem/1.6 var(--pixel);text-decoration:none;text-transform:uppercase}.text-link:hover{color:var(--pink)}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1180px,calc(100% - 48px));margin:auto;padding:26px 0;border-top:1px solid rgba(255,54,187,.35);color:var(--muted)}.site-footer .wordmark{color:var(--ink)}
@media(max-width:820px){.site-header,.hero,.section-shell,.site-footer{width:calc(100% - 32px)}.site-header{padding:20px 0}.site-header nav{gap:17px}.site-header nav a{font-size:.43rem}.hero{grid-template-columns:1fr;gap:50px;padding:58px 0 85px}.hero-copy{max-width:620px}.hero h1{font-size:clamp(3.1rem,11vw,5.7rem)}.hero-visual{width:min(100%,490px);margin-right:5%}.hero-cat{left:-10%;width:48%;bottom:-15px}.how-section,.reel-section,.feature-section,.setup-section,.privacy-section{padding:76px 0}.steps{gap:12px}.steps article{padding:20px 18px}.steps h3{font-size:1.18rem}.reel-section{grid-template-columns:1fr;gap:45px}.reel-proof{min-height:540px;width:min(100%,600px);margin:auto}.feature-section,.feature-section:nth-of-type(6),.setup-section{grid-template-columns:1fr;gap:45px}.feature-copy{max-width:650px}.feature-section:nth-of-type(5) .feature-copy{order:2}.feature-section:nth-of-type(5) .feature-image{order:1}.setup-image{width:min(100%,650px);margin:auto}.privacy-section{gap:35px}.site-footer{font-size:.43rem}}
@media(max-width:560px){.site-header nav{gap:11px}.site-header nav a{font-size:.38rem}.wordmark{font-size:.58rem}.hero{padding-top:45px}.hero h1{font-size:clamp(2.8rem,13.5vw,4.7rem)}.hero-lead{font-size:1.15rem}.hero-description{font-size:.93rem}.hero-actions{display:block}.store-status{display:block;margin-top:20px}.hero-visual{width:92%;margin-right:3%;padding:9px;box-shadow:7px 7px 0 var(--cyan)}.visual-label{right:-10px;font-size:.4rem}.hero-cat{width:49%;left:-7%;bottom:-14px}.section-heading h2,.section-copy h2,.feature-copy h2,.setup-copy h2,.privacy-section h2{font-size:clamp(2.5rem,12vw,4.3rem)}.steps{display:block;margin-top:32px}.steps article,.steps article:nth-child(2),.steps article:nth-child(3){min-height:0;margin-bottom:14px;transform:none}.steps h3{font-size:1.3rem}.reel-proof{min-height:455px}.reel-frame{right:9%;width:62%}.reel-covers{left:0;bottom:24px;width:63%}.feature-image,.setup-image{padding:9px;box-shadow:7px 7px 0 var(--pink)}.feature-section:nth-of-type(5) .feature-image{box-shadow:7px 7px 0 var(--cyan)}.truth-list{font-size:.44rem}.privacy-section{display:block}.privacy-section>div+div{margin-top:28px}.site-footer{display:flex;flex-wrap:wrap;gap:16px;padding:22px 0}.site-footer .wordmark{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.steps article:nth-child(2),.steps article:nth-child(3),.hero-visual,.reel-frame,.reel-covers,.feature-image,.setup-image{transform:none}}
 .hero{overflow:hidden}
 html{overflow-x:hidden}
/* Reel section: one upright dominant GIF with a separate supporting cover image. */
.reel-proof{display:flex;align-items:center;justify-content:center;gap:28px;min-height:0}
.reel-frame{position:relative;right:auto;top:auto;width:min(56%,340px);flex:0 0 auto;margin:0;transform:none}
.reel-covers-figure{width:min(42%,270px);flex:0 0 auto;margin:0;padding:11px;background:#080b1a;border:3px solid var(--pink);box-shadow:8px 8px 0 var(--cyan)}
.reel-covers-figure img{display:block;width:100%;height:auto}
.reel-covers-figure figcaption{padding-top:9px;color:var(--pink);font:400 .45rem/1.6 var(--pixel);text-transform:uppercase}
@media(max-width:820px){.reel-proof{gap:22px}.reel-frame{width:58%}.reel-covers-figure{width:38%}}
@media(max-width:560px){.reel-proof{display:block;min-height:0}.reel-frame{width:72%;margin:0 auto}.reel-covers-figure{width:72%;margin:28px auto 0}.reel-covers-figure figcaption{text-align:center}}
/* Hero-only spacing and framing polish. */
.hero{overflow:visible;width:min(1240px,calc(100% - 40px));grid-template-columns:minmax(0,1.08fr) minmax(500px,.92fr);gap:88px;min-height:760px;padding:92px 0 110px}
.hero-copy{max-width:650px}
.hero-visual{width:min(100%,540px);padding:18px;border-width:2px;box-shadow:8px 8px 0 var(--cyan);transform:none}
.hero-visual:before{display:none}
.hero-cat{left:-14%;bottom:-42px;width:55%}
@media(max-width:820px){.hero{width:calc(100% - 32px);grid-template-columns:1fr;gap:70px;min-height:0;padding:72px 0 105px}.hero-visual{width:min(100%,520px);margin:0 auto}.hero-cat{left:-10%;bottom:-28px;width:50%}}
@media(max-width:560px){.hero{padding:54px 0 92px;gap:58px}.hero-visual{width:94%;padding:11px}.hero-cat{left:-8%;bottom:-20px;width:50%}}
 .hero-cat{bottom:55px}
 @media(max-width:820px){.hero-cat{bottom:26px}}
 @media(max-width:560px){.hero-cat{bottom:18px}}
 @media(max-width:560px){.hero-cat{bottom:140px}}
 @media(max-width:560px){.hero-cat{bottom:220px}}
/* Keep the reel section intentional with one dominant visual. */
.reel-proof{display:flex;align-items:center;justify-content:center;min-height:0}
.reel-frame{width:min(100%,430px);margin:0;transform:none}
@media(max-width:820px){.reel-frame{width:min(100%,520px)}}
@media(max-width:560px){.reel-frame{width:92%;margin:0 auto}}

/* Reel cameo: the cat peeks from behind the cabinet frame. */
.reel-proof{position:relative}
.reel-frame{position:relative;z-index:1}
.reel-peek-cat{position:absolute;z-index:0;right:14%;bottom:85px;width:145px;height:auto;image-rendering:pixelated;filter:drop-shadow(5px 5px 0 rgba(0,0,0,.5))}
@media(max-width:820px){.reel-peek-cat{right:1%;bottom:70px;width:125px}}
@media(max-width:560px){.reel-peek-cat{right:0;bottom:72px;width:112px}}

/* Reel cameo: anchor the peeking cat behind the cabinet's lower-left edge. */
.reel-peek-cat{right:auto;left:calc(50% - 275px);bottom:16px}
@media(max-width:820px){.reel-peek-cat{left:calc(50% - 285px);bottom:14px}}
@media(max-width:560px){.reel-peek-cat{left:0;bottom:-18px}}

/* Show more of the cameo while keeping the cabinet in front. */
.reel-peek-cat{left:calc(50% - 357px);bottom:15px;width:190px;z-index:0}
@media(max-width:820px){.reel-peek-cat{left:calc(50% - 250px);bottom:14px}}
@media(max-width:560px){.reel-peek-cat{left:-6px;bottom:40px;width:170px;z-index:2}}

/* Steam setup: give the screenshot the wider left column after the swap. */
.setup-section{grid-template-columns:1.2fr .8fr}
@media(max-width:820px){.setup-section{grid-template-columns:1fr}}
/* Ground the hero mascot at the cabinet base. */
.hero-cat{bottom:-18px}
@media(max-width:820px){.hero-cat{bottom:-14px}}
@media(max-width:560px){.hero-cat{bottom:-12px}}
/* Match the onboarding screenshot frame to the other cyan screenshot treatments. */
.setup-image{border-color:var(--cyan)}
/* Friendly companion for the How It Works introduction only. */
.section-heading{position:relative}
.how-cat{position:absolute;right:-58px;bottom:-82px;width:135px;height:auto;image-rendering:pixelated;filter:drop-shadow(5px 5px 0 rgba(0,0,0,.45))}
@media(max-width:820px){.how-cat{right:0;bottom:-78px;width:120px}}
@media(max-width:560px){.how-cat{position:relative;right:auto;bottom:auto;display:block;width:128px;margin:18px 0 0 auto}}
 .how-cat{right:-160px;bottom:-40px}
 @media(max-width:820px){.how-cat{right:-100px;bottom:-40px}}
@media(max-width:560px){.how-cat{right:auto;bottom:auto}}

/* Slightly larger heading companion, kept clear of the heading and step cards. */
.how-cat{width:155px}
@media(max-width:820px){.how-cat{width:136px}}
@media(max-width:560px){.how-cat{width:140px}}

/* Bring the heading companion into the same visual world scale as the hero cat. */
.how-cat{width:235px;right:-250px;bottom:-45px}
@media(max-width:820px){.how-cat{width:205px;right:-150px;bottom:-45px}}
@media(max-width:560px){.how-cat{position:relative;right:auto;bottom:auto;width:210px;margin:18px 0 0 auto}}

/* Match the Settings screenshot to the GAME STATS frame treatment and scale. */
.feature-section.feature-settings .feature-image{width:130%;max-width:none;margin-left:-30%;border-color:var(--cyan);box-shadow:10px 10px 0 var(--pink);transform:rotate(-1deg)}
@media(max-width:820px){.feature-section.feature-settings .feature-image{width:min(100%,650px);margin-left:auto;border-color:var(--cyan);box-shadow:7px 7px 0 var(--pink);transform:rotate(-1deg)}}

/* Ground the controller cat on the middle step card. */
.steps article:nth-child(2) .how-cat{position:absolute;z-index:3;left:50%;right:auto;bottom:calc(100% - 2px);width:235px;height:auto;margin:0;transform:translateX(-50%)}
@media(max-width:820px){.steps article:nth-child(2) .how-cat{width:205px}}
@media(max-width:560px){.steps article:nth-child(2) .how-cat{width:210px}}

/* Clear the desktop heading while keeping the cat anchored to the middle card. */
@media(min-width:821px){.steps article:nth-child(2) .how-cat{left:calc(50% + 85px)}}

/* Bring only the Settings image a little closer to its copy on desktop. */
@media(min-width:821px){.feature-section.feature-settings{gap:35px}}

/* Keep the still reel image inside its frame after replacing the GIF. */
.reel-frame>img{display:block;width:100%;height:auto}