/*
 * The landing page's stylesheet.
 *
 * The markup it dresses came from a rendered Next.js page whose compiled CSS
 * was not part of it, so this is written against those class names rather than
 * recovered. The palette is not invented either: every colour here is one the
 * game already uses, read out of `apps/frontend/lib/core/theme.dart` and the
 * object templates — the same teal, the same warm amber, the same near-black.
 * A marketing page in different colours from the product is a page about a
 * different product.
 */

:root {
  --backdrop: #05070c;
  --surface: #0b0f18;
  --surface-2: #101725;
  --ink: #f5f7fa;
  --ink-dim: #93a2b3;
  --accent: #7de0d3;
  --accent-blue: #8fb3ff;
  --accent-warm: #f2a65a;
  --accent-pink: #ff5fd6;
  --line: rgba(245, 247, 250, 0.1);
  --radius: 18px;
  --container: 1120px;
  --font: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The sticky header would otherwise sit on top of whatever an in-page link
     just jumped to. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--backdrop);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The same atmosphere the game paints behind the tower: a soft teal radial
   over a near-black field. Fixed, so it does not scroll away. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(125, 224, 211, 0.1), transparent 70%),
    radial-gradient(50% 50% at 85% 30%, rgba(143, 179, 255, 0.07), transparent 70%),
    linear-gradient(180deg, #070b13 0%, var(--backdrop) 55%, #04060a 100%);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- type ----------------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.heading-lg {
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.heading-md {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.body-lg {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--ink-dim);
  margin: 0 0 8px;
  max-width: 62ch;
}

.body-md {
  font-size: 15px;
  color: var(--ink-dim);
  margin: 0;
}

.text-center {
  text-align: center;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.inline-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--accent);
  color: #06231f;
  font-weight: 700;
  border-radius: 0 0 12px 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.btn-primary {
  background: var(--accent);
  color: #06231f;
  box-shadow: 0 10px 30px rgba(125, 224, 211, 0.22);
}

.btn-secondary {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.btn-block {
  display: flex;
  width: 100%;
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
  }
  .btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
}

/* --- header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(5, 7, 12, 0.72);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand img {
  height: 34px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-nav__links {
  display: flex;
  gap: 24px;
}

.site-nav__links a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.18s ease;
}

.site-nav__links a:hover {
  color: var(--ink);
}

.site-nav__cta {
  padding: 9px 20px;
  font-size: 14px;
}

.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.site-nav__toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav__toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.site-nav__toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px 20px;
  border-top: 1px solid var(--line);
}

.mobile-nav[data-open='true'] {
  display: flex;
}

.mobile-nav a:not(.btn) {
  padding: 12px 4px;
  font-weight: 600;
  color: var(--ink-dim);
  text-decoration: none;
}

.mobile-nav .btn {
  margin-top: 8px;
}

@media (max-width: 860px) {
  .site-nav__links,
  .site-nav__cta {
    display: none;
  }
  .site-nav__toggle {
    display: flex;
  }
}

/* --- hero ----------------------------------------------------------------- */

.hero {
  padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 9vw, 104px);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero__logo {
  width: clamp(200px, 26vw, 300px);
  height: auto;
  margin-bottom: 20px;
}

.hero__headline {
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero__art {
  position: relative;
  min-height: 420px;
}

.hero__piece {
  position: absolute;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45));
  transform: rotate(var(--rot, 0deg));
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: rotate(var(--rot, 0deg)) translateY(0);
  }
  50% {
    transform: rotate(var(--rot, 0deg)) translateY(-16px);
  }
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__art {
    min-height: 260px;
    order: -1;
  }
}

/* --- store badges --------------------------------------------------------- */

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(245, 247, 250, 0.04);
  text-decoration: none;
  transition: border-color 0.18s ease;
}

.store-badge:hover {
  border-color: var(--accent);
}

.store-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.store-badge-text small {
  font-size: 10px;
  color: var(--ink-dim);
}

.store-badge-text strong {
  font-size: 15px;
}

/* --- sections ------------------------------------------------------------- */

.section {
  padding: clamp(56px, 8vw, 96px) 0;
}

.section--tight {
  padding: clamp(40px, 6vw, 72px) 0;
}

.card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(245, 247, 250, 0.05), rgba(245, 247, 250, 0.02));
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.step-card {
  position: relative;
  overflow: hidden;
  padding-top: 34px;
}

.step-card__piece {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 96px;
  opacity: 0.18;
}

.step-card__num {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 10px;
}

/* --- showcase ------------------------------------------------------------- */

.showcase__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .showcase__grid {
    grid-template-columns: 1fr;
  }
}

.shots {
  justify-self: center;
  width: min(300px, 82vw);
}

.phone-mock {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 42px;
  background: linear-gradient(180deg, rgba(245, 247, 250, 0.09), rgba(245, 247, 250, 0.02));
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

/* The five screenshots share one grid cell, which is what lets them crossfade:
   the frame takes its height from the pictures rather than from a number typed
   here, and nothing has to be positioned absolutely to sit on top of anything
   else. No notch either — these are real captures and brought their own status
   bar with them. */
.phone-mock__screen {
  display: grid;
  border-radius: 34px;
  background: var(--backdrop);
  overflow: hidden;
}

.shot {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.shot[data-active='true'] {
  opacity: 1;
}

/* Stacked the same way, so the block is as tall as the longest caption and the
   dots underneath do not move as the captions change. */
.shots__captions {
  display: grid;
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-dim);
}

.shots__captions span {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.shots__captions span[data-active='true'] {
  opacity: 1;
}

.shots__dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
}

/* A 9px dot is not something a thumb can hit, so the button is thumb-sized and
   only the thing it draws is small. */
.shots__dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.shots__dot::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(245, 247, 250, 0.25);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.shots__dot[aria-current='true']::before {
  background: var(--accent);
  transform: scale(1.35);
}

@media (hover: hover) {
  .shots__dot:hover::before {
    background: rgba(245, 247, 250, 0.5);
  }
}

/* --- leaderboard ---------------------------------------------------------- */

.leaderboard__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.leaderboard__table th,
.leaderboard__table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.leaderboard__table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: rgba(245, 247, 250, 0.04);
}

.leaderboard__table tbody tr:last-child td {
  border-bottom: none;
}

.leaderboard__score {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.leaderboard__empty {
  text-align: center;
  color: var(--ink-dim);
}

.leaderboard__note {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  color: var(--ink-dim);
}

/* --- download ------------------------------------------------------------- */

.download-cta {
  padding: clamp(56px, 8vw, 88px) 0;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(60% 120% at 50% 0%, rgba(125, 224, 211, 0.12), transparent 70%);
}

/* --- faq ------------------------------------------------------------------ */

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item__heading {
  margin: 0;
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 4px;
  background: none;
  border: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.faq-item__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent);
  transition: transform 0.22s ease;
}

.faq-item[data-open='true'] .faq-item__icon {
  transform: rotate(45deg);
}

/* Collapsed by height rather than `display`, so it animates — and the panel
   stays in the accessibility tree either way, which `display: none` would not
   allow. `aria-expanded` on the button is what announces the state.
   
   Three elements, and each earns its place. The outer one is the grid whose
   single row animates from `0fr` to `1fr`. The clip is what actually has zero
   height: a grid item defaults to `min-height: auto`, which means "at least as
   tall as my content" and quietly defeats the whole thing, so it is overridden
   here. And the padding lives on the innermost element, because padding is not
   part of the track and 20px of it would still show under a collapsed
   answer. */
.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.24s ease;
}

.faq-item[data-open='true'] .faq-item__answer {
  grid-template-rows: 1fr;
}

.faq-item__answer-clip {
  min-height: 0;
  overflow: hidden;
}

.faq-item__answer-inner {
  margin: 0;
  padding: 0 4px 20px;
  color: var(--ink-dim);
}

/* --- footer --------------------------------------------------------------- */

.site-footer {
  padding: 56px 0 32px;
  border-top: 1px solid var(--line);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.footer__col h4 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col a {
  font-size: 15px;
  color: var(--ink-dim);
  text-decoration: none;
}

.footer__col a:hover {
  color: var(--accent);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-dim);
}

/* Someone who has asked their system not to animate things gets a page that
   does not. The floating pieces are the whole reason this block exists. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}