/* The free-commends page. Layers on style.css for tokens, buttons and the
   backdrop; everything here is specific to this one funnel. */

.freepage {
  position: relative; z-index: 2;
  width: 100%; max-width: 700px;
  margin-inline: auto;
  padding: 54px 22px 70px;
  text-align: center;
}

/* ── masthead ──────────────────────────────────────────────────────────*/

.fp-mark {
  display: inline-grid; place-items: center;
  width: 62px; height: 62px;
  margin-bottom: 22px;
  border: 1px solid var(--green);
  border-radius: 10px;
  background: rgba(34,224,106,.08);
  color: var(--green);
  box-shadow: 0 0 26px rgba(34,224,106,.18);
}

.fp-title {
  margin: 0 0 12px;
  font-size: clamp(34px, 6.4vw, 50px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
}
.fp-title .n {
  color: var(--green);
  text-shadow: 0 0 26px rgba(34,224,106,.35);
  font-variant-numeric: tabular-nums;
}

.fp-sub {
  max-width: 460px;
  margin: 0 auto 30px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── the card ──────────────────────────────────────────────────────────*/

.fp-card { text-align: left; padding: 26px; margin: 0; }

.fp-step { padding: 4px 0; }

.fp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fp-head h2 {
  margin: 0;
  font-size: 17px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--text);
}

/* Small square number tile, not a circle - matches the tactical chrome. */
.fp-n {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border: 1px solid var(--orange);
  border-radius: 3px;
  background: rgba(255,122,26,.12);
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  color: var(--orange);
}

/* Divider between steps. Dashed so it reads as a seam, not a border. */
.fp-rule {
  border: 0;
  border-top: 1px dashed rgba(255,255,255,.09);
  margin: 22px 0;
}

/* ── step 1 ────────────────────────────────────────────────────────────*/

.fp-inner {
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: rgba(255,255,255,.025);
}
.fp-inner > p { margin: 0 0 14px; font-size: 14.5px; color: var(--dim); }

.fp-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Discord blurple, deliberately off-palette: people recognise this colour and
   the button is the one thing on the page that must not be mistaken. */
.btn.discord {
  border-color: #5865f2;
  background: #5865f2;
  color: #fff;
}
.btn.discord:hover {
  background: #4752c4;
  border-color: #4752c4;
  color: #fff;
  box-shadow: 0 0 22px rgba(88,101,242,.45);
}

/* ── verification code ─────────────────────────────────────────────────*/

.fp-code {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(0,0,0,.35);
}
.fp-code > p { margin: 0 0 10px; font-size: 13px; color: var(--dim); }

.fp-codebox {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.fp-codebox code {
  flex: 1; min-width: 180px;
  padding: 11px 14px;
  border: 1px solid rgba(255,122,26,.3);
  border-radius: var(--r);
  background: rgba(0,0,0,.5);
  font-family: var(--mono);
  font-size: 15px; font-weight: 700; letter-spacing: .14em;
  color: var(--orange);
  overflow-x: auto;
}

.fp-waiting {
  display: flex; align-items: center; gap: 4px;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .1em;
  color: var(--amber);
}

.fp-ok {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
  padding: 11px 14px;
  border: 1px solid rgba(34,224,106,.35);
  border-radius: var(--r);
  background: rgba(34,224,106,.08);
  font-family: var(--mono);
  font-size: 12.5px; letter-spacing: .08em;
  color: var(--green);
}
.fp-ok b { color: #b6ffd4; }

/* ── step 2 ────────────────────────────────────────────────────────────*/

.fp-console {
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--orange);
  border-radius: var(--r);
  background: rgba(0,0,0,.4);
}
.fp-conlabel {
  display: block;
  margin-bottom: 9px;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  color: var(--orange);
}
.fp-conrow { display: flex; align-items: center; gap: 12px; }
.fp-conrow code {
  flex: 1;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--green);
  overflow-x: auto;
  white-space: nowrap;
  padding: 4px 0;
}
.fp-conrow .btn {
  flex-shrink: 0;
  background: var(--orange);
  color: #14100b;
  border-color: var(--orange);
}
.fp-conrow .btn:hover { box-shadow: 0 0 18px rgba(255,122,26,.5); }

/* Amber callout. This is the single most misread step - people paste their
   Steam ID before joining the server and then wonder why nothing arrives. */
.fp-warn {
  display: flex; gap: 11px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255,194,51,.28);
  border-left: 3px solid var(--amber);
  border-radius: var(--r);
  background: rgba(255,194,51,.07);
  font-family: var(--mono);
  font-size: 12px; line-height: 1.8; letter-spacing: .04em;
  color: #ffd97a;
}
.fp-warnicon, .fp-noteicon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 17px; height: 17px;
  margin-top: 2px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px; font-weight: 700;
}

/* ── step 3 ────────────────────────────────────────────────────────────*/

#claimForm input {
  margin: 0 0 12px;
  padding: 15px 16px;
  font-size: 14px;
  letter-spacing: .04em;
}

.fp-note {
  display: flex; gap: 10px;
  margin: 0 0 16px;
  font-size: 12.5px; line-height: 1.7;
  color: var(--text);
}
.fp-note .fp-noteicon { color: var(--orange); margin-top: 1px; }

.fp-get {
  padding: 16px;
  font-size: 13px;
  letter-spacing: .16em;
  border-color: var(--line-soft);
  background: rgba(255,255,255,.02);
  color: var(--dim);
}
/* Only becomes green once it will actually do something. */
.fp-get.armed {
  border-color: var(--green);
  color: #7cf5ac;
  background: linear-gradient(180deg, rgba(34,224,106,.16), rgba(34,224,106,.05));
}
.fp-get.armed:hover {
  background: var(--green);
  color: #04180c;
  box-shadow: 0 0 24px rgba(34,224,106,.45);
}

/* ── finished / blocked states ─────────────────────────────────────────*/

.fp-result {
  text-align: center;
  padding: 34px 26px;
}
.fp-result .fp-mark { margin-bottom: 18px; }
.fp-result h2 { margin: 0 0 8px; font-size: 21px; }
.fp-result p  { margin: 0 auto; max-width: 400px; color: var(--dim); font-size: 14.5px;
                white-space: pre-line; }
.fp-result .fp-console { text-align: left; margin-top: 22px; }

/* A delivery stalled on the bot pool.

   Amber rather than red: nothing has failed and nothing is lost, the queue
   is waiting on accounts. Red here would read as "your commends are gone"
   and drive exactly the support ticket this message exists to prevent. */
.fp-hold {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--amber);
  border-left-width: 3px;
  border-radius: var(--r);
  background: rgba(255,176,32,.06);
  text-align: left;
}
.fp-hold b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--amber);
}
.fp-hold p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dim);
}
.fp-progress {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--orange);
}

.fp-result.blocked .fp-mark {
  border-color: var(--faint);
  background: rgba(255,255,255,.03);
  color: var(--faint);
  box-shadow: none;
}

/* Steps not yet reachable are dimmed but never hidden - seeing all three up
   front is what makes the offer legible.
   .45 dimmed the text below the WCAG AA contrast floor, so the "set your
   profile to public" note - the one thing here a reader really must not miss -
   became unreadable. The pending state now dims the frame rather than the
   words: a softer overall fade plus a muted heading still reads as inactive. */
.fp-step.pending { opacity: .72; }
.fp-step.pending .fp-head h2 { color: var(--faint); }
.fp-step.pending .fp-n { opacity: .5; }
.fp-step.pending input,
.fp-step.pending button { pointer-events: none; }

.fp-foot { margin: 26px auto 0; max-width: 460px; line-height: 1.8; }

@media (max-width: 560px) {
  .freepage { padding: 34px 16px 50px; }
  .fp-card { padding: 18px; }
  .fp-conrow { flex-direction: column; align-items: stretch; }
  .fp-conrow .btn { width: 100%; }
  .fp-actions .btn { flex: 1; }
}

/* ---------------------------------------------------------------- delivery

   The screen somebody watches while their commends are sent. Everything here
   exists to answer one of three questions without them having to ask us: is it
   moving, how far has it got, and why has it stopped.  */

/* How much is done, at a glance. The bar is the thing people actually read -
   the numbers above it are for when they want to be precise. */
.fp-bar {
  margin: 12px auto 0;
  max-width: 320px;
  height: 6px;
  border-radius: 100px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.fp-bar i {
  display: block;
  height: 100%;
  background: var(--orange);
  border-radius: inherit;
  /* Eases rather than jumps, so a poll landing mid-glance reads as progress
     rather than a flicker. */
  transition: width .45s ease;
}

/* Connected or not. Deliberately loud: it is the difference between the start
   button working and the start button being greyed out, and somebody who
   cannot see why will assume the site is broken. */
.fp-presence {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 12.5px;
  letter-spacing: .04em;
  border: 1px solid var(--line);
}
.fp-presence b { font-weight: 600; }
.fp-presence.on  { border-color: var(--green);  color: var(--green); }
.fp-presence.off { border-color: var(--faint);  color: var(--dim); }

/* The log. Styled as a console because that is what it is describing - the
   commends land in their game, not on this page, and a terminal is the visual
   shorthand everybody already understands for "something is running". */
.fp-term {
  margin-top: 20px;
  text-align: left;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  overflow: hidden;
}
.fp-termlabel {
  display: block;
  padding: 10px 14px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--orange);
}
.fp-termbody {
  margin: 0;
  padding: 8px 14px 14px;
  max-height: 190px;
  /* Scrolls on its own rather than growing the card, so the button never walks
     off the bottom of the screen as lines arrive. */
  overflow-y: auto;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--green);
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

/* A disabled start button has to look disabled, or the first thing somebody
   does is click it repeatedly and then open a ticket. */
.fp-actions .btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.6);
}

/* Room around the action row on the delivery screen.

   .fp-actions only ever had a gap between its buttons, which is spacing
   BETWEEN them and nothing around them - so on this screen the button ended up
   flush against the console box above it and the delivery log below, reading as
   part of both. Every element on this card is a stacked block, so the row needs
   its own margin like the rest of them. */
.fp-result .fp-actions {
  justify-content: center;
  margin: 22px 0 4px;
}

/* Each block on the delivery screen keeps clear of the next. Set here rather
   than on each one so a block added later inherits the rhythm instead of
   needing to be remembered. */
.fp-result .fp-console,
.fp-result .fp-term,
.fp-result .fp-hold,
.fp-result .fp-presence,
.fp-result .fp-progress {
  margin-top: 18px;
}

/* The button itself needs to look pressable at this size - the shared .btn is
   sized for a nav bar, not for the one thing a page is asking you to do. */
.fp-result .fp-actions .btn {
  min-height: 44px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* On a phone the buttons stack, and a stacked row needs space between the rows
   as well as between the columns. */
@media (max-width: 560px) {
  .fp-result .fp-actions { gap: 12px; }
  .fp-result .fp-actions .btn { flex: 1 1 100%; }
}

/* "I already have a code."

   The mirror of the verification step above it: that one issues a code to type
   into Discord, this one accepts a code that came from Discord. Deliberately
   quieter than the VERIFY button - it is the second path, not the main one, and
   most people arrive here from the website rather than the server. */
.fp-havecode {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.fp-havecode.hidden { display: none; }
.fp-havecode label {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--dim);
}
.fp-coderow {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
.fp-coderow input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(0,0,0,.35);
  color: var(--text);
  font-family: var(--mono);
  /* A six-character code is read back character by character, so the tracking
     matters more here than it does anywhere else on the page. */
  font-size: 15px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.fp-coderow input:focus {
  outline: none;
  border-color: var(--orange);
}
.fp-coderow input::placeholder {
  letter-spacing: .12em;
  color: var(--faint);
  text-transform: none;
}
.fp-coderow .btn { flex: 0 0 auto; }
.fp-havecode p { margin: 8px 0 0; min-height: 1em; }

/* The two Steam settings that quietly stop a delivery working.

   Neither can be checked from here - the Game Coordinator just refuses a
   commend for somebody it cannot see - so the only useful thing is to say so
   before the button is pressed rather than after ten have failed. */
.fp-req {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  text-align: left;
}
.fp-req b {
  display: block;
  margin-bottom: 10px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--orange);
}
.fp-req ul { margin: 0; padding: 0; list-style: none; }
.fp-req li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}
.fp-req li + li { margin-top: 7px; }
.fp-reqtick {
  color: var(--green);
  /* Holds the tick on the first line when the text wraps. */
  flex: 0 0 auto;
  line-height: 1.6;
}

/* Tick states in the pre-flight list.

   These used to be green ticks regardless, which is worse than no mark at all:
   a tick beside "your status is Online" told somebody sitting on Invisible that
   they were fine. Each mark now reflects an actual answer. */
.fp-reqtick.ok      { color: var(--green); }
.fp-reqtick.bad     { color: #ff5c5c; }
.fp-reqtick.unknown { color: var(--faint); }

.fp-reqwarn {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 2px solid #ff5c5c;
  border-radius: 4px;
  background: rgba(255,92,92,.07);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
}

/* The account the commends are going to. Only shown once the server has
   confirmed them, so the number is one we matched rather than one they typed. */
.fp-whoami {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.fp-whoamilabel {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--orange);
}
.fp-whoamirow {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.fp-whoamirow code {
  flex: 1 1 auto;
  min-width: 0;
  /* A 17-digit number must not push the card wider than the screen. */
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--green);
}
.fp-whoami p { margin: 8px 0 0; }

/* ---------------------------------------------------------------- verifier

   Three things must be true before a commend is worth spending. This block
   replaced a list of reminders that printed a green tick beside each line
   regardless - which told somebody sitting on Invisible that they were fine.
   A mark here is the result of a check, never decoration. */
.fp-verify {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  text-align: left;
}
.fp-verify.ok { border-color: rgba(46,204,113,.45); }

.fp-verifytitle {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
}
.fp-verify.ok .fp-verifytitle { color: var(--green); }

.fp-verifylist { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.fp-verifyrow {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 9px 0;
}
.fp-verifyrow + .fp-verifyrow { border-top: 1px solid rgba(255,255,255,.04); }

/* Fixed size so the three rows line up whether the badge holds a number or a
   mark - a list that shifts sideways as checks pass reads as a glitch. */
.fp-verifybadge {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  color: var(--faint);
}
.fp-verifyrow.pass .fp-verifybadge {
  border-color: var(--green);
  color: var(--green);
}
.fp-verifyrow.fail .fp-verifybadge {
  border-color: #ff5c5c;
  color: #ff5c5c;
}

.fp-verifybody { min-width: 0; }
.fp-verifylabel {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dim);
}
.fp-verifyrow.pass .fp-verifylabel { color: var(--text); }
.fp-verifyrow.fail .fp-verifylabel { color: var(--text); font-weight: 600; }

/* The fix sits under the check that failed rather than in one paragraph at the
   bottom - scanning a list of crosses should not mean working out which
   explanation belongs to which line. */
.fp-verifyfix {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #ff8f8f;
}
.fp-verifyrow.unknown .fp-verifyfix { color: var(--faint); }

/* Recheck, mid-flight. */
.fp-actions .btn.checking { opacity: .7; cursor: progress; }