:root {
  --game-night: #080615;
  --game-panel: #100c24;
  --game-white: #fbfaff;
  --game-muted: #b8b1ca;
  --game-purple: #8a36e8;
  --game-pink: #f044b5;
  --game-cyan: #45d8ea;
}

html, body { min-height: 100%; }
.game-body { height: 100svh; margin: 0; overflow: hidden; color: var(--game-white); background: var(--game-night); }
.game-topbar { position: relative; z-index: 5; min-height: 66px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(8,6,21,.94); }
.game-topbar .brand-name { color: #fff; }
.game-coming { padding: 7px 11px; border: 1px solid rgba(69,216,234,.42); border-radius: 999px; color: var(--game-cyan); font-size: .68rem; font-weight: 900; letter-spacing: .14em; }
.game-page, .game-page * { box-sizing: border-box; }

.game-page { position: relative; min-height: calc(100svh - 66px); overflow: hidden; background: var(--game-night); }
.game-backdrop { position: absolute; inset: -40px; opacity: .1; background: url("game-assets/brainrot-bouncers-hero.png") center 38% / cover no-repeat; filter: blur(30px); transform: scale(1.08); }
.game-page::after { position: absolute; inset: 0; background: rgba(8,6,21,.9); content: ""; }

.game-shell { position: relative; z-index: 2; display: grid; width: min(1080px, calc(100% - 48px)); min-height: calc(100svh - 66px); margin: 0 auto; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(50px,8vw,110px); align-items: center; padding: 34px 0; }
.game-copy { max-width: 590px; }
.game-eyebrow { margin: 0 0 16px; color: var(--game-cyan); font-size: .72rem; font-weight: 900; letter-spacing: .17em; }
.game-copy h1 { margin: 0; color: var(--game-white); font-size: clamp(4rem,8vw,7rem); line-height: .82; letter-spacing: -.07em; }
.game-copy h1 span { color: var(--game-pink); }
.game-lead { max-width: 550px; margin: 27px 0 0; color: var(--game-muted); font-size: clamp(1rem,1.8vw,1.17rem); line-height: 1.65; }

.game-form { max-width: 560px; margin-top: 32px; }
.game-form label { display: block; margin-bottom: 10px; color: #ddd8e9; font-size: .78rem; font-weight: 750; }
.game-form__row { display: flex; gap: 9px; }
.game-form input[type="email"] { min-width: 0; height: 52px; flex: 1; padding: 0 16px; border: 1px solid rgba(255,255,255,.17); border-radius: 11px; outline: 0; color: #161027; background: #fff; font: inherit; }
.game-form input[type="email"]:focus { border-color: var(--game-cyan); box-shadow: 0 0 0 3px rgba(69,216,234,.18); }
.game-form button { height: 52px; padding: 0 19px; border: 0; border-radius: 11px; color: #fff; background: var(--game-purple); font: inherit; font-weight: 850; cursor: pointer; }
.game-form button:hover { background: #9b47f4; }
.game-form button:disabled { cursor: wait; opacity: .72; }
.game-form__status { min-height: 20px; margin: 9px 0 0; color: var(--game-cyan); font-size: .78rem; line-height: 1.45; }
.game-privacy { margin: 0; color: #837c98; font-size: .68rem; }
.game-privacy a { color: #b9b3ca; }
.game-honeypot, .game-form-frame { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }

.game-visual { width: 100%; margin: 0; }
.game-visual__frame { overflow: hidden; padding: 7px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: var(--game-panel); box-shadow: 0 28px 70px rgba(0,0,0,.4), 0 0 45px rgba(138,54,232,.15); }
.game-visual img { display: block; width: 100%; height: min(66svh,620px); border-radius: 17px; object-fit: cover; }
.game-visual figcaption { padding: 10px 4px 0; color: #7f7895; font-size: .67rem; letter-spacing: .1em; text-align: center; text-transform: uppercase; }

@media (max-width: 760px) {
  .game-topbar { min-height: 60px; }
  .game-page { min-height: calc(100svh - 60px); }
  .game-shell { width: min(100% - 28px,540px); min-height: calc(100svh - 60px); grid-template-columns: minmax(0,1fr) minmax(120px,34vw); gap: 18px; padding: 24px 0; }
  .game-copy h1 { font-size: clamp(3rem,13vw,4.2rem); }
  .game-lead { margin-top: 19px; font-size: .9rem; line-height: 1.55; }
  .game-form { margin-top: 22px; }
  .game-form__row { flex-direction: column; }
  .game-form input[type="email"], .game-form button { width: 100%; height: 47px; }
  .game-visual img { height: min(64svh,560px); }
}

@media (max-width: 520px) {
  .game-coming { font-size: .58rem; }
  .game-shell { grid-template-columns: 1fr; align-content: center; gap: 18px; padding: 18px 0; }
  .game-copy { display: contents; }
  .game-eyebrow { order: 1; margin-bottom: -7px; }
  .game-copy h1 { order: 2; font-size: clamp(2.8rem,14vw,3.8rem); }
  .game-lead { order: 3; max-width: 350px; margin: 0; font-size: .82rem; }
  .game-visual { order: 4; width: min(100%,330px); margin: 0 auto; }
  .game-visual__frame { padding: 5px; border-radius: 17px; }
  .game-visual img { height: min(34svh,300px); border-radius: 11px; object-position: center 31%; }
  .game-visual figcaption { padding-top: 6px; }
  .game-form { order: 5; width: 100%; margin: 0; }
  .game-form label { margin-bottom: 7px; }
  .game-form__row { flex-direction: row; }
  .game-form input[type="email"], .game-form button { height: 46px; }
  .game-form button { width: auto; white-space: nowrap; }
  .game-privacy { order: 6; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .game-shell { padding: 20px 0; }
  .game-copy h1 { font-size: 5rem; }
  .game-lead { margin-top: 19px; }
  .game-form { margin-top: 22px; }
  .game-visual img { height: 72svh; }
}

@media (prefers-reduced-motion: reduce) { .game-backdrop { filter: blur(24px); } }