/* TapTap landing page, in the game's purple and yellow. Only self-hosted files: Helmet's CSP
   blocks external fonts and scripts. */
:root {
  --ink: #2b1650;
  --lavender: #f3eafd;
  --yellow: #fad236;
  --shadow: #3a1f7a;
  --muted: #e6dafc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #5a36b8 linear-gradient(180deg, #a56cff 0%, #7b4fe0 30%, #4b2f9e 100%);
  color: #fff;
  font: 17px/1.6 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

h1, h2 { font-weight: 800; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: normal; color: var(--yellow); }

/* Hero */
.hero { padding: 48px 0 32px; overflow: hidden; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.logo { width: min(300px, 68%); margin-bottom: 12px; filter: drop-shadow(0 10px 18px rgba(30, 10, 70, 0.35)); }
h1 { margin: 0 0 16px; font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.08; text-shadow: 0 5px 0 var(--shadow); }
.lead { max-width: 36em; margin: 0; font-size: 1.12rem; color: var(--muted); }

.stores-caption { margin: 26px 0 8px; font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
/* Apple's and Google's badges are official artwork: shown as supplied, never recoloured,
   outlined or filtered. They aren't links yet because the app isn't released. */
.store { position: relative; display: inline-flex; align-items: center; overflow: hidden; }
/* Both badges render at the same height so the pair looks even; widths follow each artwork. */
.store img { display: block; width: auto; height: 48px; }

/* A store that isn't out yet gets a diagonal ribbon across its top-right corner. `overflow`
   above clips the band's ends to the badge outline, so these radii are measured from the
   artwork itself at this 48px height — Apple's corner runs 14% of its height (6.8px), Google's
   11% (5.4px). Rounded up by a fraction: too large only shaves an already-transparent corner,
   while too small would leak red outside the badge's edge. */
.store-apple { border-radius: 7px; }
.store-google { border-radius: 6px; }
/* Band geometry: it cuts the corner 34px along each edge, so it is centred at half that in from
   the top and right, and overhangs on both sides to be clipped square by the corner. */
.store .soon {
  position: absolute;
  top: 11px;
  right: -22px;
  width: 78px;
  transform: rotate(45deg);
  background: #e5322d;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  line-height: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(20, 6, 52, 0.45);
}
.note { margin: 0; font-size: 0.95rem; color: var(--muted); }

.hero-phone { position: relative; justify-self: center; }
.phone {
  width: min(290px, 70vw);
  padding: 10px;
  border-radius: 46px;
  background: #16122a;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.14), 0 30px 60px rgba(20, 6, 52, 0.5);
}
.phone img { border-radius: 36px; }

.deco { position: absolute; z-index: 1; width: 70px; filter: drop-shadow(0 8px 10px rgba(20, 6, 52, 0.35)); }
.deco-1 { top: 6%; left: -52px; transform: rotate(-12deg); }
.deco-2 { top: 38%; right: -56px; transform: rotate(10deg); }
.deco-3 { bottom: 12%; left: -44px; transform: rotate(8deg); }
.deco-4 { bottom: -12px; right: -26px; transform: rotate(-8deg); }

/* Feature sections */
.feature { padding: 44px 0; }
.feature .wrap { display: grid; gap: 28px; align-items: center; }
.feature .phone { width: min(250px, 62vw); margin: 0 auto; }
h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.1; text-shadow: 0 4px 0 var(--shadow); }
.feature p { max-width: 30em; margin: 0; font-size: 1.1rem; color: var(--muted); }

/* Cards */
.cards { padding: 28px 0 44px; }
.cards .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card { padding: 22px; border-radius: 22px; background: var(--lavender); color: var(--ink); box-shadow: 0 6px 0 #5b3a96; }
.card h3 { margin: 0 0 6px; font-size: 1.2rem; }
.card p { margin: 0; }
.card a { color: #6a2fc2; font-weight: 700; }

.help { padding: 0 0 52px; text-align: center; }
.help p { margin: 0; color: var(--muted); }
.help a { color: var(--yellow); font-weight: 700; }

footer { padding: 28px 0 36px; background: #2a1760; font-size: 0.95rem; color: var(--muted); }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 10px; }
footer a { color: #fff; font-weight: 600; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer p { margin: 0; }

@media (min-width: 900px) {
  .hero { padding: 72px 0 48px; }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}

@media (min-width: 800px) {
  .feature .wrap { grid-template-columns: 0.8fr 1.2fr; }
  .feature.flip .phone-col { order: 2; }
}

/* Below 900px the hero is one stacked column, so the logo is centred over the text */
@media (max-width: 899px) {
  .logo { display: block; margin-left: auto; margin-right: auto; }
}

@media (max-width: 600px) {
  .deco { width: 48px; }
  .deco-1 { top: -10px; left: -34px; }
  .deco-3 { left: -34px; }
  .deco-2, .deco-4 { right: -34px; }
}