:root {
  --ink: #102d25;
  --forest: #173d31;
  --forest-2: #244f41;
  --cream: #f3e9cf;
  --paper: #e8dfc4;
  --mint: #a9c3ad;
  --acid: #d6ff48;
  --red: #ef5357;
  --pink: #e74375;
  --orange: #ee9145;
  --line: rgba(16, 45, 37, .28);
  --shell: 88rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  min-width: 20rem;
  color: var(--ink);
  background: var(--paper);
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
a { color: inherit; }
img { max-width: 100%; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100; padding: .8rem 1rem; transform: translateY(-150%); background: var(--acid); font-weight: 900; }
.skip-link:focus { transform: translateY(0); }
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.section-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 1rem; }
.eyebrow { margin: 0 0 .9rem; font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.eyebrow.acid { color: var(--acid); }
h1, h2, h3 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 900; line-height: .84; letter-spacing: -.035em; text-transform: uppercase; }
p { line-height: 1.6; }

/* Launch status */
.launch-banner { position: relative; z-index: 45; min-height: 4.5rem; padding: .75rem 1rem; display: grid; gap: .35rem; align-items: center; color: var(--cream); background: var(--red); border-bottom: .35rem solid var(--acid); }
.launch-banner strong { display: flex; align-items: center; gap: .55rem; font-size: .72rem; letter-spacing: .08em; }
.launch-banner strong i { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 .28rem rgba(214,255,72,.2); animation: pulse 1.4s ease-in-out infinite; }
.launch-banner p { margin: 0; font-size: .72rem; line-height: 1.4; }
.launch-banner a { min-height: 44px; display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--cream); text-underline-offset: .25rem; font-size: .68rem; font-weight: 900; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; min-height: 4.75rem; padding: .65rem 1rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(243,233,207,.2); color: var(--cream); background: rgba(16,45,37,.96); backdrop-filter: blur(.7rem); }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: .65rem; width: max-content; text-decoration: none; }
.brand-mark { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; color: var(--ink); background: var(--acid); box-shadow: .22rem .22rem 0 var(--pink); font-family: Impact, sans-serif; font-size: 1.25rem; letter-spacing: -.04em; transform: rotate(-2deg); }
.brand-copy { display: grid; font-size: .8rem; line-height: 1; letter-spacing: .08em; }
.brand-copy small { margin-top: .23rem; color: var(--acid); font-size: .62rem; font-weight: 900; letter-spacing: .22em; }
.menu-toggle { min-width: 4rem; min-height: 2.75rem; padding: .6rem; border: 1px solid rgba(243,233,207,.45); color: var(--cream); background: transparent; cursor: pointer; font-size: .72rem; font-weight: 900; }
.site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; border-bottom: .4rem solid var(--acid); background: var(--forest); }
.site-nav.open { display: grid; }
.site-nav a { min-height: 3.5rem; padding: 1rem; display: flex; align-items: center; border-top: 1px solid rgba(243,233,207,.18); color: var(--cream); text-decoration: none; font-size: .78rem; font-weight: 900; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--acid); background: rgba(255,255,255,.04); }
.header-cta { display: none; }

/* Hero */
.hero { position: relative; min-height: calc(100svh - 4.75rem); padding: 3.5rem 1rem 2rem; display: grid; align-items: center; gap: 3rem; overflow: hidden; border-bottom: 1px solid var(--line); background-color: var(--paper); background-image: linear-gradient(rgba(16,45,37,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(16,45,37,.055) 1px, transparent 1px); background-size: 3rem 3rem; }
.hero::before { content: "RH"; position: absolute; right: -1rem; top: 2rem; color: rgba(16,45,37,.04); font: 26rem/.75 Impact, sans-serif; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; max-width: 49rem; }
.hero-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.5rem; font-size: .67rem; font-weight: 900; letter-spacing: .1em; }
.hero-kicker i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--red); animation: pulse 1.4s ease-in-out infinite; }
.hero h1 { font-size: clamp(4.6rem, 24vw, 9.5rem); }
.hero h1 em { color: var(--red); font-style: normal; text-shadow: .055em .055em 0 var(--ink); }
.lede { max-width: 42rem; margin: 1.4rem 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.08rem, 3vw, 1.45rem); line-height: 1.5; }
.hero-actions, .final-actions { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
.primary-button, .secondary-button { min-height: 3.35rem; padding: .9rem 1.05rem; display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; border: 2px solid var(--ink); text-decoration: none; cursor: pointer; font-weight: 900; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.primary-button { background: var(--acid); color: var(--ink); box-shadow: .35rem .35rem 0 var(--ink); }
.primary-button:hover, .primary-button:focus-visible { transform: translate(.15rem,.15rem); box-shadow: .18rem .18rem 0 var(--ink); }
.secondary-button { background: transparent; }
.secondary-button:hover, .secondary-button:focus-visible { color: var(--cream); background: var(--ink); }
.secondary-button.light { border-color: var(--cream); color: var(--cream); }
.secondary-button.light:hover { color: var(--ink); background: var(--cream); }
.wallet-note { margin: 1.5rem 0 0; max-width: 42rem; font-size: .72rem; }
.wallet-note b { color: var(--pink); }
.hero-art { position: relative; width: min(100%, 31rem); min-height: 26rem; justify-self: center; display: grid; place-items: center; }
.sun-disc { position: absolute; width: min(85vw, 25rem); aspect-ratio: 1; border-radius: 50%; background: var(--acid); box-shadow: inset 0 0 0 .8rem rgba(16,45,37,.08); }
.sun-disc::after { content: ""; position: absolute; inset: -1.4rem; border: 1px dashed var(--ink); border-radius: 50%; animation: rotate 22s linear infinite; }
.hero-art > img { position: relative; z-index: 2; width: min(94%, 29rem); height: auto; filter: drop-shadow(.8rem 1rem 0 rgba(16,45,37,.22)); animation: kittyFloat 3.8s ease-in-out infinite; }
.art-note { position: absolute; z-index: 3; padding: .55rem .65rem; color: var(--cream); background: var(--ink); font-size: .6rem; font-weight: 900; line-height: 1.25; transform: rotate(-5deg); }
.note-one { top: 1rem; left: 0; }
.note-two { top: 5rem; right: .2rem; color: var(--ink); background: var(--red); transform: rotate(5deg); }
.specimen-tag { position: absolute; z-index: 4; left: 1rem; right: 1rem; bottom: -.3rem; padding: .75rem 1rem; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .2rem 1rem; border: 2px solid var(--ink); background: var(--cream); box-shadow: .45rem .45rem 0 var(--pink); transform: rotate(-1deg); }
.specimen-tag span, .specimen-tag small { font-size: .58rem; font-weight: 900; }
.specimen-tag strong { grid-row: span 2; font-family: Impact, sans-serif; font-size: 1.5rem; }

/* Collection */
.ticker { overflow: hidden; color: var(--acid); background: var(--ink); border-bottom: .45rem solid var(--red); }
.ticker > div { min-width: max-content; padding: .9rem 0; display: flex; align-items: center; gap: 1.5rem; animation: tickerDrift 28s linear infinite; font-size: .75rem; font-weight: 900; letter-spacing: .08em; }
.ticker i { color: var(--pink); font-style: normal; }
.manifesto { padding-top: 5rem; padding-bottom: 5rem; display: grid; gap: 2rem; }
.section-number { padding-top: .65rem; border-top: 1px solid var(--ink); font-size: .66rem; font-weight: 900; }
.manifesto-heading h2, .arcade-intro h2, .holder-copy h2, .roadmap h2, .faq h2, .final-cta h2 { font-size: clamp(3rem, 13vw, 7rem); }
.manifesto-copy .big-copy { margin-top: 0; font-family: Georgia, serif; font-size: clamp(1.25rem, 4vw, 1.85rem); font-weight: 700; line-height: 1.35; }
.manifesto-copy > p:not(.big-copy) { max-width: 43rem; }
.text-link { min-height: 2.75rem; margin-top: 1rem; display: inline-flex; align-items: center; gap: .8rem; text-underline-offset: .3rem; font-size: .75rem; font-weight: 900; }
.collection-principles { display: grid; border-top: 1px solid var(--ink); }
.collection-principles article { min-height: 11rem; padding: 1.2rem 0; border-bottom: 1px solid var(--ink); }
.collection-principles span { color: var(--pink); font-size: .65rem; font-weight: 900; }
.collection-principles h3 { margin-top: 2rem; font-size: 2rem; }
.collection-principles p { margin-bottom: 0; font-size: .8rem; }

/* Arcade cards */
.arcade-section { padding: 5rem 0; color: var(--cream); background: var(--forest); }
.arcade-intro { display: grid; gap: 1.5rem; }
.arcade-intro > p { max-width: 39rem; margin: 0; align-self: end; color: rgba(243,233,207,.76); }
.game-cards { padding-top: 3rem; display: grid; gap: 1.25rem; }
.game-card { overflow: hidden; border: 1px solid rgba(243,233,207,.3); background: #0d2821; transition: transform .2s ease, border-color .2s ease; }
.game-card:hover { transform: translateY(-.35rem); border-color: var(--acid); }
.game-poster { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--mint); }
.game-poster img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease, filter .45s ease; }
.game-card:hover .game-poster img { transform: scale(1.035); filter: saturate(1.12); }
.game-state { position: absolute; top: .7rem; right: .7rem; padding: .4rem .6rem; color: var(--ink); background: var(--acid); font-size: .58rem; font-weight: 900; box-shadow: .2rem .2rem 0 var(--ink); }
.game-state.calm { background: var(--cream); }
.game-card-copy { padding: 1.25rem; }
.game-index { color: var(--pink); font-size: .62rem; font-weight: 900; }
.game-card-copy h3 { margin-top: .8rem; font-size: clamp(2.2rem, 9vw, 3.8rem); }
.game-card-copy p { min-height: 4.8rem; color: rgba(243,233,207,.74); font-size: .8rem; }
.game-card-copy > a { min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(243,233,207,.25); color: var(--acid); text-decoration: none; font-size: .72rem; font-weight: 900; }

/* Holder utility */
.holder-band { min-height: 40rem; display: grid; overflow: hidden; background: var(--acid); }
.holder-art { position: relative; min-height: 23rem; display: grid; place-items: end center; overflow: hidden; background: var(--red); }
.holder-art::before { content: "HOLDER"; position: absolute; left: -.5rem; top: 1rem; color: rgba(16,45,37,.1); font: 8rem/.8 Impact, sans-serif; writing-mode: vertical-rl; }
.holder-art img { position: relative; z-index: 1; display: block; width: min(78%, 29rem); height: auto; max-height: calc(100% - 3rem); object-fit: contain; filter: drop-shadow(.7rem .8rem 0 rgba(16,45,37,.3)); transform: translateY(4%); }
.holder-copy { padding: 3rem 1rem 4rem; display: flex; flex-direction: column; justify-content: center; }
.holder-copy > p:not(.eyebrow) { max-width: 45rem; font-family: Georgia, serif; font-size: 1.08rem; }
.holder-steps { margin-top: 1.5rem; display: grid; border-top: 2px solid var(--ink); }
.holder-steps span { min-height: 3.4rem; padding: .8rem 0; display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--ink); font-size: .72rem; font-weight: 900; }
.holder-steps b { color: var(--pink); }

/* Playable cabinet */
.game-section { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 5rem 1rem; }
.game-label { padding: .7rem 0; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--ink); font-size: .66rem; font-weight: 900; }
.game-frame { overflow: hidden; border: .45rem solid var(--ink); background: var(--forest); box-shadow: .75rem .75rem 0 rgba(16,45,37,.25); }
.hud { min-height: 4.4rem; display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; color: var(--cream); border-bottom: 1px solid rgba(243,233,207,.2); }
.hud-block { padding: .75rem; display: flex; flex-direction: column; gap: .2rem; border-right: 1px solid rgba(243,233,207,.18); }
.hud-block small { font-size: .55rem; opacity: .68; }
.hud-block strong { color: var(--acid); font-size: 1.05rem; }
.hud-block.wide { grid-column: span 2; }
.hud-block.right { border-right: 0; }
.hearts { color: var(--red); letter-spacing: .08em; white-space: nowrap; }
.sound-button { min-height: 44px; grid-column: span 3; border: 0; border-top: 1px solid rgba(243,233,207,.18); color: var(--cream); background: transparent; cursor: pointer; font-size: .62rem; font-weight: 900; }
.canvas-wrap { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: #87a98d; }
#gameCanvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.overlay { position: absolute; inset: 0; padding: 1.2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--cream); background: rgba(16,45,37,.78); backdrop-filter: blur(3px); }
.overlay.hidden { display: none; }
.overlay h2 { max-width: 12ch; font-size: clamp(2rem, 7vw, 5.2rem); }
.overlay p:not(.eyebrow) { max-width: 40rem; font-size: .78rem; }
.stamp { margin-bottom: 1rem; padding: .35rem .65rem; color: var(--ink); background: var(--acid); font-size: .65rem; font-weight: 900; transform: rotate(-2deg); }
.stamp.danger { color: white; background: var(--red); }
.overlay .primary-button { min-width: 12rem; margin-top: .7rem; }
.xp-track { height: .65rem; background: #0c241d; }
.xp-track div { width: 0; height: 100%; background: var(--acid); transition: width .2s; }
.upgrade-grid { width: min(100%,45rem); margin-top: 1rem; display: grid; gap: .65rem; }
.upgrade-card { min-height: 7rem; padding: .9rem; border: 2px solid var(--cream); color: var(--cream); background: var(--forest); cursor: pointer; text-align: left; }
.upgrade-card:hover { background: var(--forest-2); transform: translateY(-.2rem); }
.upgrade-card strong { display: block; color: var(--acid); font: 1.4rem Impact, sans-serif; }
.upgrade-card span { display: block; margin-top: .45rem; font-size: .66rem; line-height: 1.4; }
.mobile-controls { min-height: 8.5rem; padding: 1rem; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(243,233,207,.18); }
.dpad { width: 9rem; display: grid; grid-template-columns: repeat(3,2.75rem); grid-template-rows: repeat(2,2.75rem); gap: .15rem; }
.dpad button, .dash-button { min-width: 44px; min-height: 44px; border: 1px solid rgba(243,233,207,.35); color: var(--cream); background: rgba(0,0,0,.16); touch-action: none; user-select: none; }
.dpad [data-key="up"] { grid-column: 2; }
.dpad [data-key="left"] { grid-row: 2; grid-column: 1; }
.dpad [data-key="down"] { grid-row: 2; grid-column: 2; }
.dpad [data-key="right"] { grid-row: 2; grid-column: 3; }
.dash-button { width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--red); font-weight: 900; }
.cabinet-instructions { padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.cabinet-instructions span { padding: .45rem .6rem; border: 1px solid var(--ink); font-size: .65rem; font-weight: 900; }
kbd { color: var(--pink); font: inherit; }

/* Scores, roadmap, FAQ */
.leaderboard-section { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 5rem 1rem; display: grid; gap: 2.5rem; border-top: 1px solid var(--ink); }
.leaderboard-copy h2 { font-size: clamp(3rem, 12vw, 6.5rem); }
.leaderboard-copy > p:not(.eyebrow) { max-width: 39rem; }
.name-field { max-width: 18rem; margin-top: 1.5rem; display: grid; gap: .5rem; font-size: .66rem; font-weight: 900; }
.name-field input { min-height: 48px; padding: .75rem; border: 2px solid var(--ink); border-radius: 0; outline: none; color: var(--ink); background: var(--cream); font-weight: 900; text-transform: uppercase; }
.name-field input:focus { box-shadow: .3rem .3rem 0 var(--pink); }
.scoreboard-wrap { align-self: start; border: .45rem solid var(--ink); color: var(--cream); background: var(--forest); box-shadow: .65rem .65rem 0 var(--red); }
.scoreboard-head { padding: .8rem 1rem; display: flex; justify-content: space-between; color: var(--acid); background: var(--ink); font-size: .64rem; font-weight: 900; }
.scoreboard { min-height: 18rem; margin: 0; padding: .45rem 1rem .7rem 3rem; }
.scoreboard li { min-height: 2.8rem; padding: .65rem .2rem; border-bottom: 1px dashed rgba(243,233,207,.2); font-size: .74rem; }
.scoreboard li::marker { color: var(--pink); font-weight: 900; }
.score-row { display: flex; justify-content: space-between; gap: 1rem; }
.score-row strong { color: var(--acid); }
.score-empty { margin-left: -2rem; list-style: none; opacity: .65; }
.board-note { margin: 0; padding: .75rem 1rem; border-top: 1px solid rgba(243,233,207,.2); font-size: .58rem; opacity: .65; }
.roadmap { padding-top: 5rem; padding-bottom: 5rem; display: grid; gap: 2.5rem; border-top: 1px solid var(--ink); }
.trail-map { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.trail-map li { min-height: 7rem; padding: 1rem 0; display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: start; border-bottom: 1px solid var(--ink); }
.trail-map li > span { color: var(--pink); font-size: .65rem; font-weight: 900; }
.trail-map strong { font: 1.7rem/.95 Impact, sans-serif; }
.trail-map p { margin: .45rem 0 0; font-size: .78rem; }
.trail-map li > b { grid-column: 2; width: max-content; padding: .3rem .45rem; border: 1px solid var(--ink); font-size: .58rem; }
.trail-map .done > b { background: var(--acid); }
.trail-map .next > b { color: white; background: var(--pink); }
.faq { padding-top: 5rem; padding-bottom: 5rem; display: grid; gap: 2.5rem; color: var(--cream); background: var(--ink); max-width: none; }
.faq-heading, .faq-list { width: 100%; max-width: 42rem; }
.faq-list { border-top: 1px solid rgba(243,233,207,.35); }
.faq details { border-bottom: 1px solid rgba(243,233,207,.35); }
.faq summary { min-height: 4.5rem; padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none; color: var(--acid); font-size: .8rem; font-weight: 900; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { font-size: 1.5rem; transition: transform .2s ease; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 2rem 1.5rem 0; color: rgba(243,233,207,.75); font-family: Georgia, serif; }
.final-cta { padding: 5rem 1rem; display: grid; gap: 2rem; color: var(--cream); background: var(--red); }

/* Footer */
footer { min-height: 12rem; padding: 2rem 1rem; display: grid; gap: 2rem; align-items: end; color: var(--cream); background: #091f19; }
.footer-brand { min-height: 44px; display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.footer-brand span { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; color: var(--ink); background: var(--acid); font: 1.2rem Impact, sans-serif; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-links a { min-width: 44px; min-height: 44px; padding-inline: .25rem; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 900; text-underline-offset: .25rem; }
footer p { margin: 0; max-width: 38rem; font-size: .62rem; opacity: .6; }

@keyframes pulse { 50% { opacity: .25; } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes kittyFloat { 50% { transform: translateY(-.65rem) rotate(1deg); } }
@keyframes tickerDrift { from { transform: translateX(0); } to { transform: translateX(-12%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@media (max-width: 399px) {
  .start-overlay p { display: none; }
  .overlay { padding: .5rem; }
  .overlay h2 { font-size: 1.7rem; }
  .stamp { margin-bottom: .45rem; }
  .overlay .primary-button { min-height: 44px; margin-top: .3rem; }
  .hero-art { min-height: 23rem; }
  .specimen-tag small { display: none; }
}

@media (min-width: 640px) {
  .section-shell, .site-header, .hero, .game-section, .leaderboard-section, .final-cta, footer { padding-left: 2rem; padding-right: 2rem; }
  .launch-banner { padding-left: 2rem; padding-right: 2rem; grid-template-columns: auto 1fr auto; gap: 1.5rem; }
  .hero-actions, .final-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .primary-button, .secondary-button { min-width: 13rem; }
  .collection-principles { grid-template-columns: repeat(3,1fr); }
  .collection-principles article { padding: 1.2rem; border-right: 1px solid var(--ink); }
  .collection-principles article:first-child { padding-left: 0; }
  .collection-principles article:last-child { border-right: 0; }
  .game-cards { grid-template-columns: repeat(2,1fr); }
  .game-card.featured { grid-column: span 2; display: grid; grid-template-columns: 1.35fr .65fr; }
  .game-card.featured .game-poster { height: 100%; }
  .hud { grid-template-columns: 7rem 7rem 1fr 9rem auto; }
  .hud-block.wide, .sound-button { grid-column: auto; }
  .sound-button { padding: 0 1rem; border-top: 0; }
  .upgrade-grid { grid-template-columns: repeat(3,1fr); }
  .trail-map li { grid-template-columns: 2.5rem 1fr auto; align-items: center; }
  .trail-map li > b { grid-column: auto; }
  footer { grid-template-columns: 1fr auto; }
  footer p { grid-column: 1/-1; }
}

@media (min-width: 768px) {
  .menu-toggle { display: none; }
  .site-header { grid-template-columns: auto 1fr auto; }
  .site-nav { position: static; display: flex; justify-content: center; border: 0; background: transparent; }
  .site-nav a { min-height: 2.75rem; padding: .7rem .8rem; border: 0; font-size: .65rem; }
  .header-cta { min-height: 2.75rem; padding: .6rem .8rem; display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--acid); color: var(--acid); text-decoration: none; font-size: .64rem; font-weight: 900; }
  .hero { min-height: 47rem; grid-template-columns: minmax(0,1.08fr) minmax(20rem,.92fr); gap: 2rem; }
  .hero h1 { font-size: clamp(6rem, 12vw, 10.5rem); }
  .manifesto { grid-template-columns: .35fr 1fr 1fr; }
  .collection-principles { grid-column: 2/-1; }
  .arcade-intro { grid-template-columns: 1.15fr .85fr; align-items: end; }
  .holder-band { grid-template-columns: .9fr 1.1fr; }
  .holder-art { min-height: 40rem; }
  .holder-copy { padding: 4rem; }
  .mobile-controls { display: none; }
  .leaderboard-section { grid-template-columns: minmax(16rem,.9fr) minmax(22rem,1.1fr); gap: 5rem; }
  .roadmap { grid-template-columns: minmax(16rem,.8fr) minmax(22rem,1.2fr); gap: 5rem; }
  .faq { padding-left: max(2rem,calc((100vw - 88rem)/2 + 2rem)); padding-right: max(2rem,calc((100vw - 88rem)/2 + 2rem)); grid-template-columns: .85fr 1.15fr; }
  .final-cta { grid-template-columns: 1.2fr .8fr; align-items: end; }
  .final-actions { justify-content: flex-end; }
}

@media (min-width: 1024px) {
  .section-shell, .site-header, .hero, .game-section, .leaderboard-section, .final-cta, footer { padding-left: 3rem; padding-right: 3rem; }
  .launch-banner { padding-left: max(3rem,calc((100vw - 88rem)/2 + 3rem)); padding-right: max(3rem,calc((100vw - 88rem)/2 + 3rem)); }
  .site-nav a { padding-inline: 1rem; }
  .game-cards { grid-template-columns: repeat(3,1fr); }
  .game-card.featured { grid-column: auto; display: block; }
  .game-frame { border-width: .65rem; }
  .faq { padding-left: max(3rem,calc((100vw - 88rem)/2 + 3rem)); padding-right: max(3rem,calc((100vw - 88rem)/2 + 3rem)); }
  footer { grid-template-columns: 1fr auto auto; }
  footer p { grid-column: auto; text-align: right; }
}

@media (min-width: 1440px) {
  .hero { padding-inline: max(3rem,calc((100vw - 88rem)/2)); }
  .hero-art { width: 34rem; }
}