@font-face { font-family: Fredoka; src: url(/assets/fonts/fredoka-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Fredoka; src: url(/assets/fonts/fredoka-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
:root { --top: #3C1D74; --bottom: #1D0C40; --cream: #F6E9D2; --gold: #E8A93B; --rose: #F2647A; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(120% 80% at 50% 0%, #5a2fa0 0%, var(--top) 45%, var(--bottom) 100%);
  color: var(--cream); font-family: Fredoka, system-ui, sans-serif; font-weight: 600; text-align: center;
}
main { max-width: 440px; width: 100%; }
.icon { width: 128px; height: 128px; border-radius: 28px; box-shadow: 0 12px 32px rgba(0,0,0,.4); }
h1 { font-weight: 700; font-size: 36px; margin: 18px 0 4px; letter-spacing: .3px; text-shadow: 0 3px 0 #150A28; }
.tag { margin: 0 0 6px; opacity: .9; }
.free { margin: 0 0 22px; color: var(--gold); }
.noads { display: inline-block; background: var(--rose); color: #3A0D18; border-radius: 999px; padding: 2px 12px; margin-left: 2px; }
.badges { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
/* Apple's badge is drawn edge to edge; Google's PNG carries its own padding, so it sits taller to
   read the same size (both companies' guidelines ask for visually matching badges). */
.badges .apple img { height: 52px; width: auto; display: block; }
.badges .google img { height: 77px; width: auto; display: block; margin: -12px -10px; }
/* Without JavaScript (or on a computer) the buttons show; only a phone being redirected hides them. */
.wait { display: none; margin: 0 0 18px; opacity: .8; }
.redirecting .wait { display: block; }
.redirecting .links { display: none; }
.qr { margin: 26px auto 0; }
.qr img { width: 148px; height: 148px; background: #fff; padding: 8px; border-radius: 14px; }
.qr p { margin: 10px 0 0; font-size: 14px; opacity: .8; }
.mobile-only .qr { display: none; }
.home { margin-top: 22px; font-size: 15px; }
.home a { color: var(--cream); opacity: .8; }
.off { opacity: .4; pointer-events: none; }