/* ============================================================================
   The claim screen.

   One viewport, no scroll. This is a screen in an app, not the top of a website.
   Anything that makes this page scroll on a phone is a bug.
   ============================================================================ */

.app-body {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.screen {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 22px;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.screen-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 4px;
}

.screen-mid {
  min-height: 0;
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 4px 0;

  /* `safe center` matters: a centred flex column whose content overflows clips the TOP
     and makes it unreachable. `safe` falls back to flex-start in that case. Browsers
     that do not know the keyword ignore this line and keep the plain `center` above. */
  justify-content: center;
  justify-content: safe center;

  /* Safety valve. The screen is designed not to scroll, but a 320x568 phone or any
     phone held sideways genuinely cannot fit this, and a locked body would leave the
     button unreachable. This lets the middle scroll while the header and the footer
     stay pinned, so it still reads as an app and never traps anyone. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.screen-bot {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 12px 0 20px;
}

/* -------------------------------------------------------------------- art */

.hero-art {
  position: relative;
  display: grid; place-items: center;
  min-height: 0;
  flex-shrink: 1;
}
.hero-art .boo-hero {
  width: min(62vw, 250px); height: auto;
  max-height: 28dvh;
  animation: float 4.2s ease-in-out infinite;
}

.deco { position: absolute; font-size: 20px; animation: float 5s ease-in-out infinite; }
.deco-1 { top: 2%;  right: 8%;  animation-delay: -.6s; }
.deco-2 { top: 22%; left: 4%;   font-size: 16px; animation-delay: -1.8s; }
.deco-3 { bottom: 8%; left: 9%; font-size: 17px; animation-delay: -2.8s; }

/* ------------------------------------------------------------------- copy */

.hero-copy { display: flex; flex-direction: column; gap: 9px; text-align: center; }

.hero-copy h1 {
  font-size: clamp(28px, 8.2vw, 40px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.025em;
}
.hero-copy h1 em { font-style: normal; color: var(--pink); }
.hero-copy h1 .pop { color: var(--purple); }

.lede { font-size: 15.5px; line-height: 1.45; color: var(--text); }

/* Shown when somebody arrives from a friend's link having just answered a question:
   the thing they are about to ask, so the button is concrete rather than abstract. */
.arriving {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface); border: 1.5px dashed var(--border-2);
  border-radius: var(--r-md); padding: 12px 16px;
}
.arriving-label {
  font-family: var(--display); font-weight: 500; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.arriving-q {
  font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--pink);
  text-align: center;
}

/* ------------------------------------------------------------------ claim */

.claim { display: flex; flex-direction: column; gap: 11px; }

.claim-input {
  display: flex; align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-pill);
  padding: 4px 6px 4px 20px;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.claim-input:focus-within {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px var(--pink-soft);
}
.claim-prefix {
  font-weight: 600; font-size: 15px; color: var(--muted); white-space: nowrap;
}
.claim-input input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: var(--body); font-weight: 800; font-size: 15px;
  color: var(--ink); padding: 15px 8px 15px 1px;
}
.claim-input input::placeholder { color: var(--muted); font-weight: 400; }

.suggestions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.suggestions:empty { display: none; }

.error { text-align: center; }

.return { gap: 13px; align-items: center; }
.return .btn span { font-weight: 700; }

.linkish {
  background: none; border: 0; padding: 6px; cursor: pointer;
  font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--purple); }

/* ------------------------------------------------------------------ trust */

.trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.why {
  font-family: var(--display); font-weight: 500; font-size: 14.5px;
  color: var(--purple);
}

/* ---------------------------------------------------- short phones, safety */

@media (max-height: 680px) {
  .hero-art .boo-hero { max-height: 20dvh; }
  .screen-mid { gap: 12px; }
  .hero-copy h1 { font-size: clamp(25px, 7vw, 32px); }
  .lede { font-size: 14.5px; }
  .deco { display: none; }
}

/* A phone held sideways is about 360px tall. There is no room for a mascot there, and
   trying to keep one is what pushes the button off the screen. */
@media (max-height: 520px) {
  .hero-art { display: none; }
  .screen-mid { gap: 10px; }
  .hero-copy h1 { font-size: 23px; }
  .lede { font-size: 14px; }
  .screen-bot { gap: 6px; padding: 8px 0 12px; }
  .trust { font-size: 11.5px; }
}

/* On a wide screen the single column would look lost, so give it more air but
   keep the same one-screen structure. Never let it become a scrolling page. */
@media (min-width: 820px) and (min-height: 700px) {
  .screen { max-width: 520px; }
  .hero-art .boo-hero { width: 300px; max-height: 32dvh; }
}