/* ------------------------------------------------------------------
   Founding a party, in four steps.

   The candidate is the only choice on this screen with consequences, so it
   gets the room: large cards in a rail you swipe, and underneath them the
   four measures and the three regions that decide where the money is worth
   spending. Everything after it is identity, and identity is a short form.
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------- the stepper */

.setup-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.setup-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-top: 10px;
  border-top: 2px solid var(--rule);
  text-align: center;
}
.setup-step.is-on { border-top-color: var(--gold); }
.setup-step.is-done { border-top-color: var(--blue); }

.setup-step-no {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--navy-3);
  font-variant-numeric: tabular-nums;
}
.setup-step.is-on .setup-step-no {
  border-color: var(--gold);
  background: var(--gold);
  color: #fffdf6;
}
.setup-step.is-done .setup-step-no {
  border-color: var(--blue);
  color: var(--blue);
}

.setup-step-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-3);
  line-height: 1.2;
}
.setup-step.is-on .setup-step-label { color: var(--navy); }

/* Under about 380px the labels stop fitting and the numbers carry it. */
@media (max-width: 379px) {
  .setup-step-label { display: none; }
  .setup-step { padding-top: 8px; }
}

/* ------------------------------------------------------- playing as ... */

/*
 * Said once, quietly.
 *
 * A returning player's name is already known, so this is a fact rather than a
 * field — and it appeared three times on the old screen, which made it read
 * as something the game kept needing to check.
 */
.setup-playing {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 4px;
  padding: 9px 12px;
  border-left: 2px solid var(--blue);
  background: var(--wash-blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.setup-playing-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-3);
}
.setup-playing-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy);
}

/* ------------------------------------------------------ candidate cards */

.cd-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.cd-rail::-webkit-scrollbar { display: none; }

.cd-card {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
  font-family: var(--font);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.cd-card:hover { border-color: var(--gold); }
.cd-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/*
 * The chosen one: a gold edge, a lift, and a warmer ground.
 *
 * It had a tick in the corner as well, sitting on the photograph. A tick
 * belongs to a list where several things can be on at once; only one
 * candidate can be, and one card standing out of a rail says that on its own.
 * Three signals rather than four, and none of them written over a face.
 */
.cd-card.is-on {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), var(--shadow);
  background: var(--wash-gold);
  transform: translateY(-2px);
}
.cd-card.is-on .cd-card-art .portrait {
  box-shadow: 0 0 0 3px var(--gold);
}

.cd-card-art { display: block; }
.cd-card-art .portrait { border-radius: 50%; }

.cd-card-body { display: flex; flex-direction: column; gap: 3px; }
.cd-card-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
  line-height: 1.15;
}
.cd-card-blurb {
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--navy-2);
}

.cd-card-state {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  min-height: 0.8em;
}

/* -------------------------------------------------- candidate detail */

/*
 * The footnote to the photo, and sized like one.
 *
 * Every figure that was here is still here. What changed is the room between
 * them: the card used to be most of a phone screen — four full-width bars, a
 * titled block of three more with a two-line explanation, a summary behind a
 * rule, then another titled block and another explanation — and a player
 * choosing a face had to scroll past all of it to reach Continue.
 *
 * The four measures pair up, the two regional blocks sit side by side, the
 * bars are thinner and the type is smaller. Roughly half the height, with
 * nothing taken out of it.
 */
.cd-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

/* Two by two: four measures in the height two of them used to take. */
.cd-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 14px;
}

.cd-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  grid-template-areas: "label value" "track track";
  align-items: center;
  gap: 2px 6px;
}
.cd-stat-label {
  grid-area: label;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--navy-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-stat-track {
  grid-area: track;
  height: 5px;
  border-radius: 999px;
  background: var(--paper-3);
  overflow: hidden;
}
.cd-stat-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
}
/* Less is better here, so it is drawn as a warning rather than as progress. */
.cd-stat.is-bad .cd-stat-fill { background: var(--warn-bad); }
.cd-stat-value {
  grid-area: value;
  text-align: right;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Regional support and grant potential, side by side rather than stacked. */
.cd-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}

.cd-block { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cd-block-title {
  margin: 0;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-3);
}

.cd-regions { display: flex; flex-direction: column; gap: 4px; }
.cd-region {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  grid-template-areas: "name value" "track track";
  align-items: center;
  gap: 2px 5px;
}
.cd-region-name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-region-track {
  grid-area: track;
  height: 5px;
  border-radius: 999px;
  background: var(--paper-3);
  overflow: hidden;
}
.cd-region-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gold);
}
/* Grant potential is an opportunity, not a holding, so it reads in the
   second voice rather than in the accent. */
.cd-region.is-grant .cd-region-fill { background: var(--blue); }
.cd-region-value {
  grid-area: value;
  text-align: right;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.cd-note {
  margin: 1px 0 0;
  font-size: 0.62rem;
  line-height: 1.35;
  color: var(--navy-3);
}

/* Strongest and weakest on one line, under everything they summarise. */
.cd-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding-top: 7px;
  border-top: 1px solid var(--rule);
}
.cd-summary.is-even {
  margin: 0;
  padding-top: 7px;
  font-size: 0.7rem;
  color: var(--navy-2);
}
.cd-summary-part {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.cd-summary-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-3);
  white-space: nowrap;
}
.cd-summary-value {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--warn-good);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-summary-part.is-weak .cd-summary-value { color: var(--warn-bad); }

/*
 * Below 340px the two columns are narrower than a region name, so they
 * stack. Everything else has already given as much as it can.
 */
@media (max-width: 340px) {
  .cd-stats { grid-template-columns: minmax(0, 1fr); }
  .cd-cols { grid-template-columns: minmax(0, 1fr); gap: 9px; }
}

/* ----------------------------------------------------------- the clock */

.clock-option-word {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ----------------------------------------------------------- the recap */

.setup-recap {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  overflow: hidden;
}
.setup-recap-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
}
.setup-recap-line + .setup-recap-line { border-top: 1px solid var(--rule-soft); }
.setup-recap-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-3);
}
.setup-recap-value {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--navy);
  text-align: right;
}

/* A colour nobody chose still shows which one they got. */
.col-option.is-assigned {
  box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 3px var(--rule);
}

@media (min-width: 760px) {
  .cd-card { width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-card { transition: none; }
  .cd-card.is-on { transform: none; }
}


/* -------------------------------------------------- the colour you were given */

/*
 * Informational, and shaped so it cannot be mistaken for a control.
 *
 * Nobody picks a colour: it comes from the slot, so that every device in a
 * game answers "what colour is that player" the same way. What a player wants
 * to know is which one they got, and that is a dot and a word — not twelve
 * swatches with one of them ringed, which is a question.
 */
.id-colour {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-2);
  width: max-content;
  max-width: 100%;
}
.id-colour-dot {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--party, var(--gold));
  box-shadow: 0 0 0 1px rgba(18, 32, 54, 0.16);
}
.id-colour-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}