/* Landing: a single screen, the pitch (centred) next to a phone playing the game, bots flying across it. */
body.lp { background: #4dd6fa; overflow-x: hidden; }

.stage {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: 1fr auto;
}

/* the game's lobby backdrop (sky lattice, clouds, pink checkered ground), drawn by sky.js; the
   gradient is what shows before it starts or without WebGL */
.veil {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, #009ded 0%, #4dd6fa 45%, #dbf2ff 69.5%, #ff9ac4 70.5%, #ff8fbd 100%);
}
.veil canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s; }
.veil canvas.on { opacity: 1; }

/* ------------------------------------------------------------------ pitch + phone */
.center {
  align-self: center; justify-self: center; z-index: 1;
  width: min(1240px, 100%); padding: max(24px, env(safe-area-inset-top)) 24px 28px;
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: center;
  /* bots fly behind the content but stay clickable in the gaps */
  pointer-events: none;
}
.pitch > *, .phone { pointer-events: auto; }
.pitch { display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo {
  width: min(340px, 80vw); height: auto; filter: drop-shadow(0 10px 0 rgba(31, 26, 46, 0.28));
  animation: bob 2.6s ease-in-out infinite, pop-in 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.lp h1 {
  margin-top: 6px; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.08; color: #fff;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink);
}
.lp h1 i, .lp h1 b {
  display: inline-block; font-style: normal; font-weight: 400;
  animation: word-in 0.55s calc(0.15s + var(--i) * 0.09s) cubic-bezier(0.2, 1.8, 0.4, 1) both,
    word-bob 2.8s calc(1s + var(--i) * 0.22s) ease-in-out infinite;
}
.lp h1 i:nth-child(odd) { rotate: -3deg; }
.lp h1 i:nth-child(even) { rotate: 2deg; }
.lp h1 b {
  font-size: 1.32em; color: var(--sun); -webkit-text-stroke-width: 4px; text-shadow: 0 7px 0 var(--ink);
  rotate: -4deg; margin-top: 2px;
}
.lp .lead {
  margin: 18px 0 26px; max-width: 30em; padding: 10px 20px; border-radius: 18px; rotate: -1deg;
  background: rgba(255, 255, 255, 0.92); border: 3px solid var(--ink); box-shadow: var(--pop-sm);
  font-size: clamp(16px, 1.5vw, 19px); font-weight: 600; color: var(--ink);
  animation: rise 0.6s 0.6s ease-out both;
}
.lp .ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; animation: rise 0.6s 0.35s ease-out both; }
.lp .btn { font-size: 24px; padding: 15px 32px; }
.lp .btn img { animation: nudge 1.4s ease-in-out infinite; }
/* the App Store badge is the only call to action, so it gets the play button's old weight */
.lp .store img { height: 72px; }

.chips {
  list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  animation: rise 0.6s 0.45s ease-out both;
}
.chips li {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); border: 3px solid var(--ink); box-shadow: var(--pop-sm); font-weight: 600; font-size: 16px;
}
.chips img { width: 30px; height: 30px; }

/* a phone standing up, playing the teaser */
.phone {
  position: relative; justify-self: center; height: min(640px, 74vh); aspect-ratio: 9 / 18; padding: 12px;
  background: var(--ink); border-radius: 48px; box-shadow: 0 16px 0 rgba(31, 26, 46, 0.3), inset 0 0 0 3px #3a3350;
  rotate: 4deg; animation: phone-in 0.8s 0.2s cubic-bezier(0.2, 1.3, 0.4, 1) both, sway 6s 1s ease-in-out infinite;
}
.phone::before {
  /* the camera island */
  content: ""; position: absolute; top: 24px; left: 50%; width: 30%; height: 12px; translate: -50% 0;
  border-radius: 8px; background: #0d0b14; z-index: 1;
}
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 37px; background: #000; display: block; }

/* ------------------------------------------------------------------ footer */
.lp footer.foot {
  z-index: 1; background: var(--ink); color: rgba(255, 255, 255, 0.85); border: 0; border-top: 3px solid var(--ink);
  padding: 16px 24px max(16px, env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; font-size: 14px; font-weight: 600;
}
.lp .foot nav { display: flex; gap: 20px; margin: 0; }
.lp .foot a { color: #fff; text-decoration: none; }
.lp .foot a:hover { text-decoration: underline; }
.lp .foot .lang { border-color: #fff; }
.lp .foot .rights { opacity: 0.6; }

/* ------------------------------------------------------------------ flying bots */
.flyers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.flyer {
  position: absolute; left: 0; top: 0; width: 92px; height: auto; pointer-events: auto; cursor: pointer; user-select: none;
  -webkit-user-drag: none; filter: drop-shadow(0 6px 0 rgba(31, 26, 46, 0.22)); will-change: transform;
}
.bonk {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  font: 400 34px var(--head); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink);
  animation: bonk 0.7s ease-out forwards;
}

@keyframes word-in { from { scale: 0.2; translate: 0 30px; opacity: 0; } to { scale: 1; translate: 0 0; opacity: 1; } }
@keyframes word-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes bob { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -8px; rotate: 1deg; } }
@keyframes pop-in { from { scale: 0.4; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 3px 0; } }
@keyframes phone-in { from { transform: translateX(80px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sway { 0%, 100% { rotate: 4deg; } 50% { rotate: 2deg; } }
@keyframes bonk { 0% { scale: 0.4; opacity: 0; } 25% { scale: 1.15; opacity: 1; } 100% { scale: 1; opacity: 0; translate: 0 -40px; } }

/* ------------------------------------------------------------------ narrow: stacked, centered */
@media (max-width: 980px) {
  .center { grid-template-columns: 1fr; gap: 34px; padding-inline: 16px; }
  .phone { height: min(560px, 70vh); }
}
@media (max-width: 600px) {
  .flyer { width: 64px; }
  .lp .ctas { flex-direction: column; gap: 14px; }
  .lp .store { flex-direction: column; align-items: center; }
  .lp .store small { position: static; display: block; margin-top: 6px; }
  .chips { margin-top: 28px; }
  .chips li { font-size: 14px; }
  .phone { height: min(480px, 64vh); padding: 9px; border-radius: 38px; }
  .phone video { border-radius: 30px; }
  .phone::before { top: 18px; height: 10px; }
}