/**
 * The entry gate.
 *
 * One screen, one decision, on a phone held in one hand. Everything here is
 * sized for a thumb and for the 360×640 end of the range, because that is what
 * this audience holds; the wide layout is the exception, not the base.
 *
 * Colours come from the same tokens as game.css and styles.css — the gate is
 * the first surface of the product a player sees, and it has to be visibly the
 * same product as the game behind it.
 */

@font-face {
  font-family: "Vazirmatn Variable";
  src: url("/fonts/vazirmatn-arabic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF,
    U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FBB2-FBC1;
}
@font-face {
  font-family: "Vazirmatn Variable";
  src: url("/fonts/vazirmatn-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --ink: #211c19;
  --ink-2: #453a34;
  --ink-3: #6a5e57;
  --ground: #f4efe9;
  --surface: #fff;
  --surface-2: #f7f1ea;
  --line: rgba(61, 47, 40, .14);
  --line-strong: rgba(61, 47, 40, .28);
  --orange: #ed6d1c;
  --orange-deep: #d7570e;
  --orange-soft: #b34a06;
  --orange-ink: #8f3a04;
  --green: #31805c;
  --green-ink: #276548;
  --radius: 16px;
  --shadow-1: 0 .35rem .9rem rgba(69, 42, 26, .07), 0 0 0 1px rgba(237, 109, 28, .05);
  --shadow-2: 0 1rem 2.6rem rgba(48, 33, 25, .14);
  color-scheme: light;
  font-family: "Vazirmatn Variable", Vazirmatn, Tahoma, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
/* An author `display` beats the user-agent rule for [hidden]. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(70% 48% at 78% -8%, rgba(237, 109, 28, .17), transparent 72%),
    radial-gradient(52% 38% at 7% 68%, rgba(237, 109, 28, .07), transparent 75%),
    linear-gradient(rgba(255, 255, 255, .28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .28) 1px, transparent 1px),
    var(--ground);
  background-size: auto, auto, 2.8rem 2.8rem, 2.8rem 2.8rem, auto;
  background-attachment: fixed;
  color: var(--ink);
  font-weight: 450;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--orange-soft);
  outline-offset: 2px;
  border-radius: 10px;
}

.gate {
  width: min(100%, 34rem);
  margin: 0 auto;
  padding: 1.1rem 1.1rem calc(2rem + env(safe-area-inset-bottom));
  display: grid;
  gap: 1.1rem;
}

/* ---------------------------------------------------------------- *
 * Header and the three notches
 * ---------------------------------------------------------------- */

.gate-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: -.01em;
}
.brand i {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--orange);
  box-shadow: inset 0 0 0 .28rem var(--ground);
}

.stage-tag {
  margin: 0; font-size: .78rem; font-weight: 700; color: var(--orange-ink);
  background: rgba(237, 109, 28, .12);
  border-radius: 999px; padding: .15rem .7rem;
}

.rail {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem;
  position: relative;
}
/* The connector sits behind the notches rather than between them, so it does
   not have to know how wide a label wrapped to. */
.rail::before {
  content: ""; position: absolute; inset-inline: 16%; top: 1.05rem; height: 2px;
  background: var(--line); border-radius: 2px;
}
.rail li {
  display: grid; justify-items: center; gap: .3rem;
  position: relative; z-index: 1;
}
.rail b {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); color: var(--ink-3);
  border: 2px solid var(--line); font-weight: 800; font-size: .9rem;
}
.rail span { font-size: .74rem; color: var(--ink-3); font-weight: 600; }

.rail li[data-state="done"] b {
  background: var(--orange); border-color: var(--orange-deep); color: var(--ink);
}
.rail li[data-state="done"] span { color: var(--ink-2); }
.rail li[data-state="now"] b {
  border-color: var(--orange); color: var(--orange-ink);
  box-shadow: 0 0 0 4px rgba(237, 109, 28, .16);
}
.rail li[data-state="now"] span { color: var(--ink); font-weight: 700; }
.rail li[data-state="skip"] b { border-style: dashed; opacity: .55; }
.rail li[data-state="skip"] span { color: var(--ink-3); }

/* ---------------------------------------------------------------- *
 * The card
 * ---------------------------------------------------------------- */

.card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: 22px;
  box-shadow: var(--shadow-2);
  padding: 1.3rem 1.15rem 1.15rem;
  display: grid; gap: .85rem;
}

.card-art {
  display: grid; justify-items: center; align-content: start; gap: .25rem;
  min-width: 0;
}

.art-frame {
  width: min(58vw, 14rem); aspect-ratio: 1;
  display: grid; place-items: center;
  position: relative; isolation: isolate;
}
.art-frame::before {
  content: ""; position: absolute; inset: 12%; z-index: -2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 42%, #fff 0 28%, rgba(255, 246, 237, .94) 55%, rgba(237, 109, 28, .13) 70%, transparent 71%);
  box-shadow: 0 1.2rem 2.7rem rgba(215, 87, 14, .13);
}
.art-orbit {
  position: absolute; inset: 14%; z-index: -1;
  border: 1px dashed rgba(179, 74, 6, .38);
  border-radius: 47% 53% 49% 51%;
  transform: rotate(-18deg);
}
.art-spark {
  position: absolute; z-index: 1;
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 .35rem rgba(237, 109, 28, .12);
}
.art-spark-a { inset-inline-start: 8%; top: 30%; }
.art-spark-b { inset-inline-end: 10%; bottom: 24%; width: .34rem; height: .34rem; }

.figure {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 1rem 1.15rem rgba(48, 33, 25, .14));
  transform-origin: 50% 72%;
}

[data-art="handoff"] .art-frame { width: min(64vw, 16rem); }
[data-art="handoff"] .art-orbit { border-radius: 44%; transform: rotate(12deg) scaleX(1.08); }
[data-art="inapp"] .art-orbit { border-style: dotted; transform: rotate(22deg); }
[data-art="ready"] .art-orbit,
[data-art="waiting"] .art-orbit { border-style: solid; border-color: rgba(237, 109, 28, .28); }

.state {
  margin: 0; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 700;
  border-radius: 999px; padding: .25rem .8rem;
}
.state i { width: .55rem; height: .55rem; border-radius: 50%; }
.state[data-state="pending"] { background: var(--surface-2); color: var(--ink-2); }
.state[data-state="pending"] i { background: var(--line-strong); }
.state[data-state="done"] { background: rgba(49, 128, 92, .12); color: var(--green-ink); }
.state[data-state="done"] i { background: var(--green); }
.state[data-state="blocked"] { background: rgba(237, 109, 28, .14); color: var(--orange-ink); }
.state[data-state="blocked"] i { background: var(--orange-deep); }

.eyebrow {
  width: fit-content; margin: 0; font-size: .76rem; font-weight: 750; letter-spacing: .01em;
  color: var(--orange-ink); background: rgba(237, 109, 28, .10);
  border: 1px solid rgba(237, 109, 28, .16); border-radius: 999px;
  padding: .14rem .62rem;
}

h1 {
  margin: 0; font-size: clamp(1.35rem, 5.6vw, 1.72rem); line-height: 1.55;
  font-weight: 800; letter-spacing: -.015em;
}

.lead { margin: 0; color: var(--ink-2); font-size: .95rem; }

/* ---------------------------------------------------------------- *
 * The instructions
 * ---------------------------------------------------------------- */

.steps {
  list-style: none; margin: .2rem 0 0; padding: 0;
  display: grid; gap: .55rem;
}
.steps li {
  display: grid; grid-template-columns: 1.75rem 1fr; gap: .65rem; align-items: start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .6rem .7rem;
}
.steps b {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--orange-ink); font-weight: 800; font-size: .85rem;
  line-height: 1;
}
.steps span { display: grid; gap: .1rem; }
.steps strong { font-size: .93rem; font-weight: 700; line-height: 1.7; }
.steps small { font-size: .8rem; color: var(--ink-3); line-height: 1.75; }

/* ---------------------------------------------------------------- *
 * Actions
 * ---------------------------------------------------------------- */

.actions { display: grid; gap: .5rem; margin-top: .2rem; }

.primary {
  /* Brand orange with ink text. White on this orange is 3.1:1 and fails; this
     pairing is 5.5:1 — see the token block in game.css. */
  background: var(--orange); color: #211c19;
  border: 0; border-radius: 14px;
  padding: .95rem 1rem; min-height: 3rem;
  font-weight: 800; font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 .5rem 1.1rem rgba(215, 87, 14, .22);
  transition: transform 120ms cubic-bezier(.2, .8, .2, 1), background-color 120ms;
}
.primary:hover { background: var(--orange-deep); }
.primary:active { transform: translateY(1px); }
.primary[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }

.ghost {
  background: none; border: 1px solid var(--line);
  border-radius: 12px; padding: .6rem .9rem;
  color: var(--ink-2); font-weight: 700; font-size: .88rem; cursor: pointer;
}
.ghost:hover { border-color: var(--line-strong); color: var(--ink); }

.note { margin: 0; min-height: 1.2rem; font-size: .85rem; color: var(--ink-3); }
.note[data-tone="error"] { color: #b3391c; font-weight: 600; }
.note[data-tone="good"] { color: var(--green-ink); font-weight: 600; }

.link-row { display: flex; gap: .4rem; }
.link-row input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); padding: .6rem .7rem;
  font-size: .82rem; color: var(--ink-2);
}

.help { border-top: 1px solid var(--line); padding-top: .6rem; }
.help summary {
  cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--ink-2);
  list-style: none;
}
.help summary::-webkit-details-marker { display: none; }
/* The same «+» the landing page uses for its own disclosure. A «؟» here read as
   a second question mark on a line that already ends in one. */
.help summary::after { content: "+"; color: var(--orange-ink); font-weight: 800; padding-inline-start: .4rem; }
.help[open] summary::after { content: "−"; }
.help-body { font-size: .85rem; color: var(--ink-3); display: grid; gap: .5rem; padding-top: .5rem; }
.help-body p { margin: 0; }
.help-body strong { color: var(--ink-2); }

/* ---------------------------------------------------------------- *
 * The three facts, and the foot
 * ---------------------------------------------------------------- */

.facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
}
.facts li {
  display: grid; gap: .1rem; position: relative; overflow: hidden;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--line);
  border-radius: 14px; padding: .55rem .75rem;
}
.facts li::before {
  content: ""; position: absolute; inset-block: .55rem; inset-inline-start: 0;
  width: 3px; border-radius: 2px; background: var(--orange);
}
.facts b { font-size: .88rem; font-weight: 800; }
.facts span { font-size: .8rem; color: var(--ink-3); }

.gate-footer { text-align: center; color: var(--ink-3); font-size: .78rem; }
.gate-footer p { margin: .15rem 0; }
.gate-footer a { color: var(--orange-ink); }

.noscript {
  margin: 1rem auto; max-width: 34rem; padding: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}

/* ---------------------------------------------------------------- *
 * Wider than a phone
 * ---------------------------------------------------------------- */

/*
 * The action stays under the thumb.
 *
 * The card is taller than a phone by design — the reason has to be readable
 * before the ask — which on a 640-tall screen put the one button below three
 * instruction cards. Sticky keeps it on screen for the whole scroll without
 * moving it out of the reading order, and the fade stops body text from
 * appearing to slide *through* it.
 */
@media (max-width: 45.99rem) {
  .actions {
    position: sticky;
    bottom: calc(.5rem + env(safe-area-inset-bottom));
    z-index: 5;
    padding-top: 1.5rem;
    background: linear-gradient(to top, var(--surface) 52%, rgba(255, 255, 255, 0));
  }
}

@media (max-width: 45.99rem) and (max-height: 42rem) {
  .gate { padding-top: .75rem; gap: .75rem; }
  .card { gap: .65rem; padding-top: 1rem; }
  .art-frame,
  [data-art="handoff"] .art-frame { width: min(46vw, 10.25rem); }
  .lead { font-size: .9rem; }
}

@media (min-width: 46rem) {
  .gate { width: min(100%, 72rem); padding: 2.2rem 1.6rem 3rem; gap: 1.3rem; }
  .card {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
    column-gap: clamp(1.8rem, 5vw, 4.8rem);
    padding: 2.2rem clamp(2rem, 4vw, 3.6rem);
    min-height: 34rem;
    align-content: center;
  }
  .card-art { grid-column: 2; grid-row: 1 / span 9; align-self: center; }
  .card > :not(.card-art) { grid-column: 1; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .art-frame { width: min(26vw, 20rem); }
  [data-art="handoff"] .art-frame { width: min(30vw, 23rem); }
  h1 { font-size: clamp(1.75rem, 3vw, 2.45rem); }
  .lead { font-size: 1rem; }
}

/* The entrance is a nicety and nothing waits on it. */
@media (prefers-reduced-motion: no-preference) {
  .card, .rail, .facts { animation: rise 260ms cubic-bezier(.2, .8, .2, 1) both; }
  .rail { animation-delay: 40ms; }
  .facts { animation-delay: 90ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(.6rem); }
    to { opacity: 1; transform: none; }
  }
  .art-orbit { animation: orbit 16s linear infinite; }
  .art-spark { animation: spark 2.4s ease-in-out infinite; }
  .art-spark-b { animation-delay: -1.1s; }
  [data-art="install"] .figure { animation: art-install 4.8s cubic-bezier(.4, 0, .2, 1) infinite; }
  [data-art="ready"] .figure { animation: art-ready 4.6s cubic-bezier(.4, 0, .2, 1) infinite; }
  [data-art="waiting"] .figure { animation: art-waiting 3.4s cubic-bezier(.4, 0, .2, 1) infinite; }
  [data-art="inapp"] .figure { animation: art-inapp 5.2s cubic-bezier(.4, 0, .2, 1) infinite; }
  [data-art="handoff"] .figure { animation: art-handoff 5.4s cubic-bezier(.4, 0, .2, 1) infinite; }
  body[data-outcome="error"] .figure { animation: art-error 380ms ease-out both; }

  @keyframes orbit { to { transform: rotate(342deg); } }
  @keyframes spark {
    0%, 100% { opacity: .28; transform: scale(.75); }
    50% { opacity: 1; transform: scale(1); }
  }
  @keyframes art-install {
    0%, 100% { transform: translateY(0) rotate(-.4deg); }
    52% { transform: translateY(-.45rem) rotate(.7deg); }
  }
  @keyframes art-ready {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-.3rem) scale(1.015); }
  }
  @keyframes art-waiting {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-.38rem); }
  }
  @keyframes art-inapp {
    0%, 100% { transform: translateX(0); }
    48% { transform: translateX(-.35rem); }
  }
  @keyframes art-handoff {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-.32rem) rotate(.5deg); }
  }
  @keyframes art-error {
    0%, 100% { transform: translateX(0); }
    35% { transform: translateX(.3rem); }
    70% { transform: translateX(-.2rem); }
  }
}

/* ---------------------------------------------------------------- *
 * One screen.
 *
 * This is step one of «ورود» — the screen a phone actually lands on
 * when somebody taps it — and it ran 1478px on a 390×844 phone, so
 * «نصبش کردم» sat below the fold on the page whose entire job is to
 * get that button pressed. Sign-in behind it is one screen; so is
 * the landing in front of it; this was the gap between them.
 *
 * Same contract as both: the page does not scroll, the card does
 * when it has to, and below 620px of viewport — landscape, or 200%
 * browser zoom — normal scrolling comes back rather than anything
 * being clipped. No copy was removed to fit; the illustration and
 * the chrome gave up the room.
 * ---------------------------------------------------------------- */
@media (min-height: 621px) {
  body { height: 100dvh; overflow: hidden; }
  .gate {
    height: 100dvh;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: clamp(.5rem, 1.4vh, 1.1rem);
    padding-block: calc(clamp(.6rem, 1.6vh, 1.1rem) + env(safe-area-inset-top, 0px))
                   calc(clamp(.6rem, 1.6vh, 1.1rem) + env(safe-area-inset-bottom, 0px));
  }
  .card {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(61, 47, 40, .22) transparent;
  }
  .card::-webkit-scrollbar { width: 6px; }
  .card::-webkit-scrollbar-thumb { background: rgba(61, 47, 40, .22); border-radius: 99px; }

  /* The object still does its job at half the size, and it was 261px of the
     only screen this page has. */
  .art-frame { width: min(27vw, 7rem); }
  [data-art="handoff"] .art-frame { width: min(30vw, 7.75rem); }

  /* Three reassurances, one line each instead of three stacked cards. Every
     word survives; the boxes around them do not. */
  .facts {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
  }
  .facts li {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    font-size: .78rem;
    line-height: 1.6;
  }
  .facts li::before { display: none; }
  .facts b { font-size: .78rem; }
  .facts b::after { content: " — "; color: var(--ink-3); font-weight: 500; }
  .facts span { display: inline; font-size: .78rem; }

  .rail { gap: .2rem; }
  .rail b { width: 1.7rem; height: 1.7rem; }
  .rail span { font-size: .72rem; }
  .gate-footer { font-size: .75rem; }
  .gate-footer p { margin: 0; }

  /* The card's own rhythm, one step tighter. The primary button is sticky, so
     it stays on screen whatever the card does — what this buys is the three
     install steps being readable without moving. */
  .card { padding: .95rem .95rem .85rem; gap: .55rem; }
  .card .eyebrow { font-size: .75rem; }
  .card h1 { font-size: clamp(1.15rem, 5vw, 1.5rem); line-height: 1.5; }
  .card .lead { font-size: .82rem; line-height: 1.8; }
  .steps { gap: .4rem; }
  .steps li { padding: .55rem .7rem; }
  .steps strong { font-size: .86rem; line-height: 1.6; }
  .steps small { font-size: .76rem; line-height: 1.65; }
}

/* Short phones: one more step down before the card has to scroll at all. */
@media (min-height: 621px) and (max-height: 740px) {
  .art-frame { width: min(22vw, 5.5rem); }
  .card { padding: .85rem .85rem .8rem; gap: .45rem; }
  .card h1 { font-size: 1.1rem; }
  .card .lead { font-size: .78rem; line-height: 1.7; }
  .steps li { padding-block: .45rem; }
  .facts li { font-size: .74rem; }
}