/* The rep challenge (challenge.html): what /reps does not have. Two seats in the builder, the
   name fields, and the two lanes on the stage. Everything else is reps.css. */

/* ---------- two Caps ---------- */

.ch-seats {
  display: flex;
  justify-content: center;
  gap: 4px;
  /* room above for the speech bubbles */
  margin-top: 64px;
}
.ch-seat { position: relative; width: 136px; height: 136px; margin: 0; }
.ch-seat .av { --size: 136px; }
/* two figures side by side: each bubble sits over its own Cap, not over the other one */
.ch-seats .av__say,
.ch-lanes .av__say {
  left: 50%;
  bottom: calc(100% - var(--size) * .08);
  translate: -50% 0;
  max-width: min(170px, 44vw);
  border-radius: 18px 18px 18px 18px;
  text-align: center;
}

.ch-add {
  position: absolute;
  inset: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 3px dashed var(--on);
  border-radius: 50%;
  background: color-mix(in srgb, #FFFFFF 16%, transparent);
  color: var(--on);
  font: 800 15px/1.1 var(--font-display);
  cursor: pointer;
  animation: ch-nudge 2.4s ease-in-out infinite;
}
.ch-add__plus { font-size: 44px; line-height: .8; }
.ch-add:active { scale: .94; }
.ch-add[hidden] { display: none; }
@keyframes ch-nudge {
  0%, 70%, 100% { rotate: 0deg; }
  78% { rotate: -6deg; }
  86% { rotate: 5deg; }
  94% { rotate: -2deg; }
}

/* this sentence runs to five lines: more room between them, so the keys do not touch */
.rp-sentence { line-height: 1.4; }
.rp-sentence .rp-slot { margin-block: .1em; }

/* the friend's half of the sentence: wraps like the words around it */
.rp-sentence > .ch-part { white-space: normal; }
.ch-part > span { white-space: nowrap; }
.ch-part[hidden] { display: none; }

/* ---------- the name panel ---------- */

.ch-panel__who {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ch-field {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
}
.ch-field input {
  width: 100%;
  padding: 12px 16px;
  border: 3px solid var(--ink-fixed);
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--ink-fixed);
  font: 800 22px/1.2 var(--font-display);
  box-shadow: 0 4px 0 var(--ink-fixed);
}
.ch-field input:focus { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ---------- the race ---------- */

.ch-lanes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 70px;
  text-align: center;
}
.ch-lane { min-width: 0; }
.ch-seat--stage { width: 120px; height: 120px; }
.ch-seat--stage .av { --size: 120px; }
.ch-lane__name {
  margin: 6px 0 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .8);
}
.ch-lane__count {
  margin: 2px 0 0;
  font: 800 clamp(34px, 11vw, 60px)/1 var(--font-display);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--lane, #FFFFFF);
}

.ch-wallbox { height: min(36vh, 300px); }
.ch-head { text-align: center; }
.ch-line { margin-top: 6px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ch-add { animation: none; }
}

/* ---------- the dare ---------- */

.ch-slot--dare { --c: var(--yellow); --cl: var(--yellow-light); --cs: var(--yellow-shade); --ti: var(--ink-fixed); }
.ch-field--own { margin: 14px 0 0; }

.ch-kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yellow);
}
.ch-title {
  margin: 6px 0 8px;
  font: 800 clamp(30px, 9vw, 46px)/1.05 var(--font-display);
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* the stamp: a paper label with an ink edge, across both walls */
.ch-stamp {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  width: max-content;
  max-width: 88%;
  margin: 0;
  padding: 10px 18px 11px;
  border: 5px solid var(--ink-fixed);
  border-radius: 16px;
  background: var(--yellow);
  box-shadow: 0 16px 26px -10px rgba(0, 0, 0, .6);
  color: var(--ink-fixed);
  font: 900 clamp(22px, 7vw, 32px)/1.05 var(--font-display);
  letter-spacing: -.01em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  translate: -50% -50%;
  rotate: -6deg;
  pointer-events: none;
}
.ch-stamp--ok {
  top: 72%;
  left: 66%;
  border-color: #FFFFFF;
  background: var(--coral, #D83636);
  color: #FFFFFF;
  font-size: clamp(20px, 6vw, 28px);
  rotate: 9deg;
}
.ch-stamp[hidden] { display: none; }

.ch-chicken { display: block; margin: 10px auto 0; }
.ch-chicken[hidden] { display: none; }