/* Gameplay-led presentation. Shared branding, signup and outfit interactions stay in style.css. */
:root { --paper:#101715; --green:#17221e; --muted:#bac5bd; --line:#34433a; }
.wrap { max-width:1328px; padding-inline:48px; }
.nav { min-height:100px; }
nav { gap:27px; }
nav a:not(.button) { transition:color .18s; }
nav a:not(.button):hover { color:var(--orange); }
.hero-top { padding-top:30px; }
h1 { font-size:clamp(80px,9.8vw,132px); letter-spacing:-7px; line-height:.95; margin:32px 0 22px; }
.hero-bottom { margin-bottom:32px; }
.hero-bottom p { font-size:18px; line-height:1.7; }
.hero-picture { height:auto; aspect-ratio:2.25; border-radius:8px; }
.hero-picture img { height:100%; }
.picture-label { letter-spacing:1px; }
.chapter-nav { display:grid; grid-template-columns:repeat(4,1fr); margin-top:42px; }
.chapter-nav a { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 12px; font-size:13px; font-weight:600; }
.chapter-nav a:first-child { padding-left:0; }
.chapter-nav a:hover { color:var(--orange); }
.chapter-nav span { font-size:10px; color:var(--orange); margin-right:15px; font-variant-numeric:tabular-nums; }
.section { padding-top:100px; padding-bottom:100px; }
.section-heading { margin-bottom:42px; }
h2 { font-size:clamp(38px,4.3vw,60px); line-height:1.06; letter-spacing:-2.4px; }
.section-heading p { max-width:360px; font-size:15px; }
.game-card .clip { aspect-ratio:16/11; border-radius:6px; }
.game-card p { max-width:none; }
.game-card .card-heading h3 { font-size:23px; letter-spacing:-.6px; }
.arcade-section { background:#1a2421; border-block:1px solid var(--line); }
.arcade-feature { display:grid; grid-template-columns:1.6fr 1fr; gap:56px; align-items:center; margin-bottom:54px; }
.arcade-floor { aspect-ratio:16/10; border:1px solid #46564c; }
.arcade-note h3 { font-size:35px; letter-spacing:-1.3px; line-height:1.12; margin:18px 0; }
.arcade-note p { color:var(--muted); font-size:15px; line-height:1.8; }
.arcade-modes { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.arcade-modes span { border:1px solid #4c6053; border-radius:4px; color:#d7e7d8; padding:8px 10px; font-size:10px; }
.arcade-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.arcade-card { background:#101916; border:1px solid #3a4a40; border-radius:8px; overflow:hidden; }
.arcade-card .clip { border-radius:0; aspect-ratio:16/10; background:#282538; border-bottom:1px solid #3a4a40; }
.pixel-clip video { object-fit:contain; image-rendering:pixelated; }
.arcade-card-body { padding:26px; }
.arcade-views [hidden] { display:none; }
.arcade-view-switch { display:flex; gap:6px; padding:12px 16px; border-bottom:1px solid var(--line); }
.arcade-view-switch button { flex:1; border:1px solid #46574c; background:transparent; color:var(--muted); border-radius:4px; padding:9px 8px; font-size:11px; }
.arcade-view-switch button[aria-pressed=true] { color:var(--ink); border-color:var(--orange); background:#29392e; }
.game-gif { display:block; width:fit-content; margin-top:18px; }
.arcade-card .eyebrow { color:#bbd9c4; font-size:9px; letter-spacing:1.4px; }
.arcade-card h3 { font-size:27px; letter-spacing:-.8px; margin:13px 0 12px; }
.arcade-card p { color:var(--muted); font-size:14px; line-height:1.75; min-height:100px; margin:0 0 21px; }
.media-download { color:#e1cfaa; font-size:11px; text-decoration:underline; text-underline-offset:5px; }
.image-caption a { text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.footage-note { color:var(--muted); font-size:11px; line-height:1.7; margin:25px 0 0; }
.park-layout { display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:center; }
.park-reel { aspect-ratio:16/10; }
.park-menu > div { display:grid; grid-template-columns:30px 1fr; gap:0 10px; padding:21px 0; border-bottom:1px solid var(--line); }
.park-menu > div:first-child { padding-top:0; }
.park-menu > div:last-child { border:0; }
.park-menu span { grid-row:span 2; font-size:10px; color:var(--orange); padding-top:5px; }
.park-menu h3 { font-size:19px; margin:0 0 8px; letter-spacing:-.4px; }
.park-menu p { font-size:13px; line-height:1.6; color:var(--muted); margin:0; }
.create-section { padding:88px 0; border-block:1px solid var(--line); scroll-margin-top:25px; background:#1b2821; }
.build-layout { display:grid; grid-template-columns:1.6fr 1fr; gap:56px; align-items:center; }
.builder-reel { aspect-ratio:16/10; }
.build-layout .image-caption { flex-wrap:wrap; row-gap:10px; }
.build-steps { list-style:none; margin:0; padding:0; }
.build-steps li { display:flex; gap:20px; padding:24px 0; border-top:1px solid #3e5041; }
.build-steps li:first-child { padding-top:0; border:0; }
.build-steps li > span { color:#e7c27e; font-size:11px; padding-top:4px; }
.build-steps h3 { font-size:20px; margin:0 0 10px; letter-spacing:-.4px; }
.build-steps p { font-size:14px; line-height:1.7; margin:0; color:var(--muted); }
.build-types { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:45px; padding-top:27px; border-top:1px solid #3e5041; }
.build-types h3 { font-size:17px; margin:0 0 10px; }
.build-types p { color:var(--muted); font-size:13px; line-height:1.6; margin:0; }
.cosmetics-section { padding-top:100px; padding-bottom:0; }
.cosmetics-copy h2 { font-size:clamp(42px,5vw,64px); }
.alpha-copy h2 { font-size:clamp(40px,4.2vw,57px); letter-spacing:-2.6px; line-height:1.05; }
.alpha-panel { gap:45px; padding:48px; }
.alpha-note { line-height:1.8; }
@media(min-width:1600px) { .hero-picture { aspect-ratio:2.4; } }
@media(max-width:1050px) {
  .wrap { padding-inline:30px; }
  nav { gap:20px; }
  .nav-discord { display:none; }
  .arcade-feature,.park-layout,.build-layout { gap:30px; grid-template-columns:1.3fr 1fr; }
  .arcade-note h3 { font-size:30px; }
  .arcade-card-body { padding:21px; }
  .arcade-card p { min-height:150px; }
  .game-card .card-heading h3 { font-size:21px; }
}
@media(max-width:760px) {
  .wrap { padding-inline:22px; }
  .nav { min-height:88px; }
  nav { gap:15px; }
  .nav-explore,.nav-cosmetics,.nav-build { display:none; }
  .nav-arcades { font-size:12px; }
  .wordmark { font-size:13px; }
  .wordmark .brand-art { width:36px; height:36px; }
  .button.small { padding-inline:13px; gap:12px; }
  h1 { font-size:clamp(66px,13vw,98px); letter-spacing:-4px; line-height:.99; }
  .hero-bottom { display:block; }
  .hero-bottom p { font-size:15px; margin-bottom:22px; }
  .hero-picture { aspect-ratio:1.55; height:auto; margin-top:25px; }
  .picture-label { font-size:7px; padding:11px; left:14px; bottom:14px; }
  .picture-arrow { width:34px; height:34px; right:14px; bottom:14px; }
  .chapter-nav { grid-template-columns:1fr 1fr; margin-top:28px; }
  .chapter-nav a { padding:17px 8px; font-size:11px; border-top:0; }
  .chapter-nav a:nth-child(-n+2) { border-top:1px solid var(--line); }
  .chapter-nav a:nth-child(3) { padding-left:0; }
  .chapter-nav span { margin-right:8px; }
  .section { padding-block:65px; }
  .section-heading { display:block; margin-bottom:30px; }
  .section-heading p { margin-top:22px; max-width:100%; font-size:14px; }
  .section-heading p br { display:none; }
  h2 { font-size:42px; letter-spacing:-1.8px; }
  .game-grid,.arcade-grid { grid-template-columns:1fr; gap:34px; }
  .game-card .clip { aspect-ratio:16/10; }
  .game-card .card-heading h3 { font-size:25px; }
  .arcade-feature,.park-layout,.build-layout { grid-template-columns:1fr; gap:32px; }
  .arcade-feature { margin-bottom:34px; }
  .arcade-floor,.park-reel,.builder-reel { aspect-ratio:16/10; }
  .arcade-note h3 { font-size:31px; }
  .arcade-card p { min-height:0; }
  .arcade-card .clip { aspect-ratio:16/9; }
  .arcade-card .snake { aspect-ratio:16/11; }
  .park-menu { display:grid; grid-template-columns:1fr 1fr; column-gap:20px; }
  .park-menu > div:first-child { padding-top:21px; }
  .park-menu > div:nth-child(3) { border:0; }
  .park-menu h3 { font-size:16px; }
  .park-menu > div { grid-template-columns:21px 1fr; gap:0 4px; }
  .create-section { padding-block:65px; }
  .build-types { grid-template-columns:1fr; gap:22px; margin-top:28px; }
  .build-steps li:last-child { padding-bottom:0; }
  .cosmetics-section { padding-top:65px; }
  .alpha-panel { grid-template-columns:1fr; padding:30px 24px; }
  .alpha-copy h2 { font-size:46px; letter-spacing:-2px; }
  .image-caption { gap:15px; font-size:9px; line-height:1.6; }
}

.game-card .clip,.arcade-floor,.park-reel,.builder-reel { aspect-ratio:16/9; }
.machine-clip video { object-fit:contain; }