/* PRE-REGISTRATION PAGE (P2-388)
   ===========================================================================
   Its own file rather than more of checkout.css, because checkout.css is 3,500
   lines that every page already loads and this is one page. Variables and the
   button styles come from styles.css / aaa.css, so nothing here restates the
   palette, it only uses it.
   =========================================================================== */

.prereg-hero { padding-bottom: 28px; }

.prereg-count {
  margin: 16px 0 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--gold, #E8C169);
}

.prereg-wrap { max-width: 760px; }

.prereg-card {
  margin: 0 0 22px;
  padding: 22px;
  background: rgba(61, 40, 17, 0.92);
  border: 3px solid var(--gold-dark, #c89a2f);
  border-radius: 4px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.28);
  color: var(--cream, #f4e9d0);
}

.prereg-card__h {
  margin: 0 0 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--gold, #E8C169);
}

/* 24 Sep (Ketema): "Your referral link" was in Press Start 2P at 0.7rem, which
   is a display face doing body-copy work and reads as noise. Pixelify Sans
   keeps the pixel feel and is legible at this size. */
.prereg-h3 {
  margin: 26px 0 6px;
  font-family: 'Pixelify Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--gold, #E8C169);
  /* styles.css gives every h1-h5 a white drop shadow, which is right on the
     parchment and wrong on a dark card: at this size it haloes every glyph and
     the heading turns to mush. Dark shadow, same depth, legible again. */
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

.prereg-sub { margin: 0 0 14px; font-size: 0.95rem; color: rgba(244, 233, 208, 0.86); }
/* The numbers that matter ("200 gems", "level 5") were picking up a display
   font from elsewhere and turning into mush. Same face as the sentence around
   them, just gold and bold, so they stand out AND can be read. */
/* 25 Sep (Ketema): "5 is unreadable", "200 also unreadable". Pixelify Sans has
   soft, rounded digits: at body size its 5 reads as an S and its 2 as an 8, and
   every number on this page is a promise somebody is counting on. Press Start
   2P's digits are unambiguous blocks, so the numbers switch to it while the
   sentence around them stays in the body face.

   0.8em, not a fixed size, so a number is always in proportion to whatever it
   sits inside. Press Start 2P sits high on the line, hence the nudge down. */
.prereg-sub b,
.prereg-card b,
.milestone__text b {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0.02em;
  vertical-align: -1px;
  /* Press Start 2P has no side bearings worth the name, so a number set inline
     runs into the word before it. */
  margin: 0 2px;
  color: var(--gold, #E8C169);
}
.prereg-sub a { color: var(--gold, #E8C169); }
.prereg-fine { margin: 12px 0 0; font-size: 0.85rem; color: rgba(244, 233, 208, 0.66); }

.prereg-note {
  margin: 4px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft, #5a4632);
}

/* ------------------------------------------------------------------ rewards */

.rewards { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }

.reward {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(200, 154, 47, 0.45);
  border-radius: 3px;
}

/* The ticket's "green claimed around the borders of the items once
   registered". It is the only thing on the page that says YOURS rather than
   on offer, so it is a border and a tick, not a colour change nobody notices. */
.reward.is-claimed {
  border-color: #6f9a63;
  box-shadow: 0 0 0 1px rgba(111, 154, 99, 0.5) inset;
}
.reward.is-claimed::after {
  content: '✓ Claimed';
  margin-left: auto;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  color: #8fc07f;
  white-space: nowrap;
}

/* 24-25 Sep (Ketema): the game's own icons on the reward rows. Pixel art, so
   nearest-neighbour or it turns to mush. The box is a fixed square and the art
   is contained inside it rather than stretched, because these come straight out
   of the game at whatever size they happen to be (112x128, 88x88, 64x64) and a
   fixed square keeps the three rows in line whatever arrives next. */
.reward__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

/* The gem sitting inline before the word GEMS. It is type-sized, not
   icon-sized, and nudged down so it sits on the text's optical centre. */
.gem-ico {
  display: inline-block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-right: 4px;
  vertical-align: -3px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
.gem-ico--lg { width: 26px; height: 26px; margin-right: 6px; vertical-align: -5px; }

.reward__qty {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.8rem;
  color: var(--gold, #E8C169);
  min-width: 46px;
}
.reward__name { font-size: 1rem; font-weight: 600; }
.reward__note { font-size: 0.85rem; color: rgba(244, 233, 208, 0.6); }

/* --------------------------------------------------------------------- form */

.prereg-form { display: grid; gap: 8px; margin: 6px 0 0; }

.prereg-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  color: rgba(244, 233, 208, 0.7);
}

.prereg-input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--cream, #f4e9d0);
  background: rgba(0, 0, 0, 0.32);
  border: 2px solid rgba(200, 154, 47, 0.5);
  border-radius: 3px;
}
.prereg-input:focus { outline: none; border-color: var(--gold, #E8C169); }
.prereg-input::placeholder { color: rgba(244, 233, 208, 0.35); }

.prereg-input--code {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.35em;
  text-align: center;
}

.prereg-btn { margin-top: 4px; justify-self: start; }
.prereg-btn[disabled] { opacity: 0.6; cursor: default; }

.prereg-err {
  margin: 10px 0 0;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: #ffd9d3;
  background: rgba(150, 40, 30, 0.4);
  border: 2px solid #8d3b2f;
  border-radius: 3px;
}

.prereg-invited {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: #d8f0cf;
  background: rgba(60, 100, 50, 0.32);
  border: 2px solid #6f9a63;
  border-radius: 3px;
}

/* ----------------------------------------------------------- referral link */

.reflink { display: flex; gap: 8px; align-items: stretch; }
.reflink__input { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; }
.reflink__copy { flex: 0 0 auto; }
.reflink__share { margin-top: 10px; }

.reflist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }

.reflist__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(200, 154, 47, 0.3);
  border-radius: 3px;
  font-size: 0.92rem;
}
.reflist__row.is-earned { border-color: #6f9a63; }
.reflist__who { overflow: hidden; text-overflow: ellipsis; }
.reflist__lvl { font-family: 'Press Start 2P', monospace; font-size: 0.72rem; color: var(--gold, #E8C169); }
.reflist__state { font-size: 0.8rem; color: rgba(244, 233, 208, 0.6); }
.reflist__state b,
.prereg-empty b {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.8em;
  font-weight: 400;
  vertical-align: -1px;
  margin: 0 2px;
}
.reflist__row.is-earned .reflist__state { color: #8fc07f; }

.prereg-empty { margin: 8px 0 0; font-size: 0.92rem; color: rgba(244, 233, 208, 0.6); }

.prereg-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 9px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.68rem;
  color: #2a1a08;
  background: var(--gold, #E8C169);
  border-radius: 10px;
}

.prereg-gems {
  margin: 14px 0 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.72rem;
  line-height: 1.8;
  color: #8fc07f;
}

/* ----------------------------------------------------- founder + milestone */

.prereg-founder {
  margin: 0 0 14px;
  font-size: 0.95rem;
  color: rgba(244, 233, 208, 0.9);
}
.prereg-pill--founder {
  background: #E8C169;
  color: #2a1a08;
  font-family: 'Press Start 2P', monospace;
  margin: 0 4px 0 0;
  vertical-align: 2px;
}

.milestone {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(200, 154, 47, 0.45);
  border-radius: 3px;
}
.milestone.is-earned { border-color: #6f9a63; box-shadow: 0 0 0 1px rgba(111, 154, 99, 0.5) inset; }

/* Square box, contained art, same as the reward rows. It was 56x56 with no
   object-fit, which squashed the 56x36 hippo sprite into a square and made it
   look stretched. The source files are all padded to squares now, so this box
   only has to pick the size. */
.milestone__icon {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
.milestone__body { flex: 1 1 auto; min-width: 0; }
.milestone__text { margin: 0 0 8px; font-size: 0.95rem; color: rgba(244, 233, 208, 0.9); }

/* A bar rather than a number alone: "3 of 10" is a fact, a bar that is not yet
   full is an invitation to send one more link. */
.milestone__bar {
  height: 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(200, 154, 47, 0.4);
  border-radius: 2px;
  overflow: hidden;
}
.milestone__fill {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, #E8C169 0%, #c89a2f 100%);
  transition: width 0.4s ease;
}
.milestone.is-earned .milestone__fill { background: linear-gradient(180deg, #8fc07f 0%, #6f9a63 100%); }

.milestone__count {
  margin: 8px 0 0;
  font-family: 'Press Start 2P', monospace;
  /* 0.55rem is under 9px, which is unreadable on a phone whatever the face. */
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--gold, #E8C169);
}

/* -------------------------------------------------------------- alpha strip */

/* The strip of life skills with the wordmark under it. It carried a
   "Public Alpha / Early October" line until 25 Sep, removed at Ketema's
   request. */
.alpha {
  margin: 34px auto 0;
  max-width: 880px;
  text-align: center;
}

.alpha__img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--gold-dark, #c89a2f);
  border-radius: 4px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

.alpha__cap { margin: 22px 0 0; }

/* 25 Sep (Ketema): the wordmark under the strip, on its own now that the date
   line is gone, so it carries no bottom margin. */
.alpha__logo {
  display: block;
  width: auto;
  /* The wordmark is 948x124 and white with a dark outline, so it reads on the
     parchment as well as on the wood. 56px tall puts it at 428px wide, wide
     enough to close the block without crowding the strip above. */
  height: 56px;
  margin: 0 auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

/* -------------------------------------------------------------------- phone */

@media (max-width: 560px) {
  .prereg-card { padding: 16px; }
  .prereg-card__h { font-size: 0.72rem; }
  .prereg-h3 { font-size: 1.05rem; }

  /* Side by side, the input shrinks to nothing and Copy is the only thing you
     can read. Stacked, both are full width and both are tappable. */
  .reflink { flex-direction: column; }
  .reflink__copy { width: 100%; }

  /* Three columns at 360px means "Level 1" wrapping mid-word. */
  .reflist__row { grid-template-columns: 1fr auto; }
  .reflist__state { grid-column: 1 / -1; }

  .alpha__logo { height: 48px; }
  .milestone__icon { width: 72px; height: 72px; }
  .milestone { flex-direction: column; align-items: flex-start; }
  .milestone__body { width: 100%; }
  .reward { flex-wrap: wrap; }
  .reward.is-claimed::after { margin-left: 0; width: 100%; }
}