/* Same tokens as lib/theme/colors.dart, which come from
   design/stitch/spill-app-v5-3.html. Keep the two in step. */
:root {
  --deep: #2e1178;
  --mid: #6b25ce;
  --warm: #c43bb4;
  --ink: #2a1354;
  --yellow: #ffd429;
  --yellow-d: #d19a00;
  --green-1: #7cee84;
  --green-2: #3fc94b;
  --green-d: #2fa83a;
  --disp: "Baloo 2", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--body);
  min-height: 100dvh;
  background: linear-gradient(178deg, var(--deep) 0%, var(--mid) 50%, var(--warm) 100%);
  background-attachment: fixed;
  display: grid;
  place-items: start center;
  padding: 32px 16px 48px;
  position: relative;
}

/* Sparkle field — .phone::before */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.8) 1.6px, transparent 2px),
    radial-gradient(circle, rgba(255,212,41,.75) 2.2px, transparent 2.6px),
    radial-gradient(circle, rgba(255,255,255,.45) 1.1px, transparent 1.5px);
  background-size: 128px 128px, 186px 186px, 76px 76px;
  background-position: 22px 44px, 104px 128px, 58px 12px;
}

.phone {
  position: relative;
  width: 100%;
  max-width: 428px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

.logo {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(56px, 18vw, 70px);
  color: var(--yellow);
  line-height: .88;
  letter-spacing: -.02em;
  text-align: center;
  text-shadow:
    -3px 0 var(--ink), 3px 0 var(--ink), 0 -3px var(--ink), 0 3px var(--ink),
    -3px -3px var(--ink), 3px -3px var(--ink), -3px 3px var(--ink), 3px 3px var(--ink),
    0 9px 0 rgba(42,19,84,.6);
}
.logo.small { font-size: clamp(40px, 13vw, 52px); }

.tagline {
  color: #fff;
  font-weight: 900;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 2px 0 rgba(42,19,84,.5);
}

/* .panel + .ribbon */
.panel {
  position: relative;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 28px;
  box-shadow: 0 8px 0 rgba(42,19,84,.5), 0 16px 30px rgba(20,5,50,.4);
  padding: 28px 16px 16px;
  margin-top: 15px;
}

.ribbon {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: linear-gradient(180deg, #ffe178, var(--yellow));
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 5px 18px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 11.5px;
  color: var(--ink);
  box-shadow: 0 4px 0 var(--yellow-d);
}

.code {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(44px, 15vw, 50px);
  color: var(--ink);
  letter-spacing: .12em;
  line-height: 1.1;
  text-align: center;
}

.steps {
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.5;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.muted {
  color: rgba(42,19,84,.62);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  margin-top: 10px;
}

/* .gel */
.gel {
  display: block;
  text-align: center;
  text-decoration: none;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 15px 16px 17px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(42,19,84,.4);
  box-shadow: 0 6px 0 var(--c3), 0 11px 20px rgba(20,5,50,.45), inset 0 2px 0 rgba(255,255,255,.55);
  background: linear-gradient(180deg, var(--c1), var(--c2));
  transition: transform .07s, box-shadow .07s;
}
.gel:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--c3); }
.gel-green { --c1: var(--green-1); --c2: var(--green-2); --c3: var(--green-d); }

.note {
  color: rgba(255,255,255,.6);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* The store listing does not exist yet, so this is deliberately not a link.
   A dead "GET THE APP" button is worse than an honest label. */
.gel-soon {
  --c1: #9B8AC4; --c2: #6E5C9E; --c3: #47386B;
  cursor: default;
  opacity: .92;
}
.linkish {
  display: block;
  text-align: center;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
  text-decoration: underline;
}
.note a { color: rgba(255,255,255,.75); }