/* ═══════════════════════════════════════════════════════════════════════════
   The pick form (js/predictions/pick-form.js), wherever a pick is placed:
   /predictions.html, the home page's Predictions desk and the cup page. The
   player's balance above the picks, each open round under one countdown,
   and each match's picks with the credits on them. Blue lights, silver acts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Above the picks: the balance and today's allowance ───────────────── */
.predict-standing {
  margin: 0 0 var(--space-8);
}

.predict-standing__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  margin: 0;
}

.predict-standing__line .stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
}

.predict-standing__line .t-figure {
  font-size: var(--text-2xl);
  color: var(--text-primary);
}

/* Silver, since it acts; the pair of classes outranks each page's own
   .desk__link, which loads after this file on the home. */
.predict-standing .predict-standing__more {
  color: var(--accent-hover);
  font-size: var(--text-sm);
}

.predict-standing .predict-standing__more:hover {
  color: var(--text-primary);
}

/* "of 1 prediction left today" is a sentence beside its figure, too long
   for a tracked uppercase label. */
.predict-standing__of {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Under the smallest stake: what is missing and where credits come from. */
.predict-need {
  max-width: 52ch;
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

/* ── A round: its cup and stage, and when its picks close ─────────────── */
/* Its matches side by side where there is room, as on the page and the cup
   page, and one under another on the home desk; its heading across them. */
.predict-round {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-10) var(--space-12);
}

.predict-round + .predict-round {
  margin-top: var(--space-12);
}

/* The clock is the round's headline, set like the ticket's: three minutes
   is the most there is to know about an open round. The cup is named in
   Marcellus beside it. The heading is the cup and the stage alone, so a
   screen reader's list of headings does not change every second. */
.predict-round__head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--text-secondary);
}

.predict-round__name {
  margin: 0;
  font: inherit;
  color: inherit;
}

.predict-round__cup {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--text-primary);
}

.predict-round__clock {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-secondary);
  white-space: nowrap;
}

.predict-round__clock .t-label {
  color: var(--led-bright);
}

.predict-round__clock .t-figure {
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* On a phone the clock comes first, above the cup's name. */
@media (max-width: 575.98px) {
  .predict-round__clock {
    order: -1;
    flex-basis: 100%;
  }
}

/* ── One match ─────────────────────────────────────────────────────────── */
.pick {
  min-width: 0;
  margin: 0;
}

.pick__teams {
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
  overflow-wrap: break-word;
}

.pick__v {
  margin: 0 0.35em;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* The picks are frosted glass under the floodlights. Behind each row the
   two banks of lamps from the sky spill in from the upper corners, as they
   do over the page head, so the glass has light to catch; on the home the
   pitch's chalk sits behind it too and blurs away. The glass is lit along
   its top edge, like the ticket, and throws no glow round itself. */
.pick__options {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-2);
}

.pick__options::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(45% 140% at 6% 0%, rgba(219, 229, 255, 0.4), rgba(143, 176, 255, 0.2) 35%, transparent 72%),
    radial-gradient(45% 140% at 94% 0%, rgba(219, 229, 255, 0.3), rgba(143, 176, 255, 0.14) 35%, transparent 72%),
    radial-gradient(60% 90% at 50% 100%, rgba(47, 91, 255, 0.16), transparent 70%);
}

.pick__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(219, 229, 255, 0.14);
  border-top-color: rgba(219, 229, 255, 0.3);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(219, 229, 255, 0.1) 0%, rgba(219, 229, 255, 0.03) 45%, rgba(2, 6, 23, 0.3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: var(--text-primary);
  text-align: left;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

a.pick__option {
  text-decoration: none;
}

.pick__option:hover:not(:disabled) {
  border-color: rgba(143, 176, 255, 0.6);
  border-top-color: var(--led-bright);
  background-color: var(--led-10);
}

/* The chosen pick is the glass with the floodlight through it. */
.pick__option[aria-pressed="true"] {
  border-color: var(--led-bright);
  background:
    linear-gradient(180deg, rgba(143, 176, 255, 0.34) 0%, rgba(47, 91, 255, 0.2) 55%, rgba(11, 29, 107, 0.5) 100%);
  box-shadow: inset 0 1px 0 rgba(219, 229, 255, 0.45);
}

/* Without backdrop blur, or for a visitor who asks for less transparency,
   the glass turns solid so the chalk and the lamps never show through. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pick__option {
    background: linear-gradient(180deg, #111a3a 0%, #070d26 100%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .pick__options::before {
    display: none;
  }

  .pick__option {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg-elevated);
  }
}

/* A placed pick is set apart from one only chosen: its top edge at full
   light, and marked as the player's. */
.pick.is-placed .pick__option[aria-pressed="true"] {
  box-shadow: inset 0 1px 0 var(--led-pale);
}

.pick__mine {
  margin-top: 2px;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--led-pale);
}

/* A cell that cannot be picked dims its glass and its name, and keeps
   its pool readable. */
.pick__option:disabled {
  cursor: default;
  color: var(--text-secondary);
  border-color: rgba(219, 229, 255, 0.08);
}

.pick__option:disabled:not([aria-pressed="true"]) .pick__staked {
  color: var(--text-secondary);
}

.pick__option[aria-pressed="true"]:disabled {
  color: var(--text-primary);
  border-color: var(--led-bright);
}

.pick__option:focus-visible,
.pick__chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A club is a name, so Marcellus. Two lines before it gives up, so "Old
   Quarter FC" reads in full in a third of the desk; the full name is in
   the title for the rest. */
.pick__label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.3;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 400;
}

/* Marcellus is wide, so where the row is narrower than on a 375px phone
   the names step down and the cells' sides close in, and "Real Madrugada"
   still breaks between its words at 320px. */
.pick__options {
  container-type: inline-size;
}

@container (max-width: 21.5rem) {
  .pick__option {
    padding-inline: var(--space-2);
  }

  .pick__label {
    font-size: var(--text-sm);
  }
}

/* Tinted from the light, not grey, so it reads on the glass. */
.pick__staked {
  color: rgba(219, 229, 255, 0.7);
  font-size: var(--text-xs);
}

/* ── The stake, under the pick once one is chosen ──────────────────────── */
.pick__stake {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.pick__stake[hidden] {
  display: none;
}

/* The four amounts that fill the field, capped at the balance. */
.pick__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-basis: 100%;
}

.pick__chip {
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent-hover);
  font-family: var(--font-figures);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.pick__chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* The chip for the amount in the field. */
.pick__chip[aria-pressed="true"] {
  border-color: var(--accent-hover);
  background: var(--accent-10);
  color: var(--text-primary);
}

.pick__stake-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.pick__input {
  width: 7rem;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-figures);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

/* The chips step the stake; the browser's spinner only crowds the field. */
.pick__input {
  -moz-appearance: textfield;
  appearance: textfield;
}

.pick__input::-webkit-inner-spin-button,
.pick__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pick__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* What a right pick would pay so far, under the stake. */
.pick__return {
  flex-basis: 100%;
  max-width: 52ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-wrap: pretty;
}

.pick__return:empty {
  display: none;
}

.pick__return .t-label {
  color: var(--led-bright);
  margin-right: var(--space-1);
}

.pick__return .t-figure {
  color: var(--text-primary);
  font-size: var(--text-base);
}

/* A pick cannot be taken back: said once, quietly, under the return. */
.pick__final {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.pick__final:empty {
  display: none;
}

/* The button names the stake and the pick, so it may run to two lines
   beside a long club. As tall as the field beside it: the pair of classes
   outranks night.css's 36px for a small button. */
.pick__stake .pick__place {
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.pick__status {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.pick__status:empty {
  display: none;
}

/* Signed out, the way in comes before the matches. */
.predict-signin {
  margin: 0 0 var(--space-8);
}

/* ── Nothing open: the next cup, then when picks open ───────────────────── */
.predict-next__cup {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-3);
}

.predict-next__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--text-primary);
}

.predict-next__cup .stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
}

.predict-next__cup .t-figure {
  font-size: var(--text-xl);
  color: var(--text-primary);
}

/* The rest of the open matches, on the page. */
.predict-more {
  margin: var(--space-8) 0 0;
  font-size: var(--text-sm);
}