/* ladder.css — the ranked ladder on the Play tab (ranked.js): the ⚔ Ranked
   button in the result card's row, a ranked challenge's heading and chips in
   the duel's banner, and the ladder panel below the board.

   The button and the banner live in slots that hold their size (styles.css,
   duel.css): the button is in the card's row in every state, greyed when it
   cannot be used, and the row is laid out for four at every width, so
   nothing in it moves when a result lands or the cook signs in. The panel is
   below the game and may grow as it fills; nothing above it moves. */

/* ---------- the result card's row: four buttons, one line ----------
   Share and ⚔ Ranked sit together, the friendly link and the ranked one.
   On a phone the four share the row evenly and a long label takes a second
   line inside its own button (Watch / the planner), at the row's height,
   rather than the row wrapping. */
.gm-res-actions { flex-wrap: nowrap; }
.gm-res-actions .gm-small { flex: 0 1 auto; min-width: 0; }
.gm-res-actions .lr-go:not(:disabled) { color: var(--gold); border-color: rgba(240, 196, 25, .55); }
.gm-res-actions .lr-go.lr-sent:not(:disabled) { color: var(--ink); border-color: var(--g-line); }
@media (max-width: 560px) {
  .gm-res-actions { gap: 6px; }
  .gm-res-actions .gm-small { flex: 1 1 0; padding: 0 6px; line-height: 1.15; white-space: normal; }
}

/* ---------- the duel's banner, ranked ----------
   The rating sits by the name; "challenges you" gives way on a phone, where
   the heading shares its line with Leave and ✕. The chip that leads the row
   says where the answer stands, its colour saying it before it is read. */
.gm-duel-h .lr-hr { font: 650 .8rem var(--mono); color: #c3cdd8; }
@media (max-width: 430px) { .gm-duel-h .lr-hw { display: none; } }
/* the tones are `is-` names: a bare .go is the planner's Predict button */
.gm-duel-chip.lr-st { font-weight: 700; }
.gm-duel-chip.lr-st.is-go { color: var(--gold); border-color: rgba(240, 196, 25, .55); }
.gm-duel-chip.lr-st.is-act { color: #241c02; background: linear-gradient(180deg, #ffd955, var(--gold)); border-color: rgba(255, 230, 140, .7); cursor: pointer; }
.gm-duel-chip.lr-st.is-wait { color: #c3cdd8; }
.gm-duel-chip.lr-st.is-warn { color: #ffab8f; border-color: rgba(255, 140, 100, .6); }
.gm-duel-chip.lr-st.is-good { color: #7ee08a; border-color: rgba(126, 224, 138, .55); }
.gm-duel-chip.lr-st.is-bad { color: #ffab8f; }
.gm-duel-chip.lr-st.is-off { color: var(--muted); }

/* ---------- the panel ---------- */
.gm-ladder[hidden] { display: none; }
.gm-ladder .gm-head { margin-bottom: 6px; }
.gm-ladder .gm-head h2 { margin: 0; }
.lr-again { min-height: 32px; }
.lr-me { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 2.9em; }
.lr-me p { margin: 0; }
.lr-out { color: #c3cdd8; font-size: .9rem; flex: 1 1 16em; }
.lr-out b { color: var(--ink); }
.lr-sign { flex: 0 0 auto; color: #241c02; background: linear-gradient(180deg, #ffd955, var(--gold)); border-color: rgba(255, 230, 140, .7); }
.lr-you { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-size: 1rem; flex: 1 1 100%; }
.lr-you b { color: var(--ink); }
.lr-rating { font: 750 1.25rem var(--mono); color: var(--gold); }
.lr-tier { font-size: .82rem; font-weight: 650; color: #c3cdd8; }
.lr-rec { color: var(--muted); flex: 1 1 100%; }
.lr-disp { color: #ffab8f; }
.lr-say { margin: 6px 0 0; min-height: 1.4em; color: var(--gold); }
.lr-wait p { margin: 2px 0; color: #c3cdd8; }
.lr-h { margin: 14px 0 4px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.lr-h[hidden], .lr-rows[hidden] { display: none; }
.lr-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lr-rows li {
  display: grid; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; border-radius: 10px;
  background: var(--g-in-fill); border: 1px solid var(--g-in-line); min-width: 0;
}
.lr-rows li.me { border-color: rgba(240, 196, 25, .55); }
.lr-rows li.gm-off { display: block; background: none; border: none; color: var(--muted); font-size: .86rem; padding: 4px 0; }
/* the standings: place, name, won–lost, rating */
.lr-standings li { grid-template-columns: 2.2em 1fr auto auto; }
.lr-wl { font: 650 .82rem var(--mono); color: var(--muted); }
.lr-pts { min-width: 3.4em; text-align: right; }
/* a match: the other cook, the two scores (yours first), what came of it,
   and Watch their cut */
.lr-matches li { grid-template-columns: 1fr auto auto auto; }
.lr-sc { font: 650 .86rem var(--mono); color: var(--ink); white-space: nowrap; }
.lr-out-w { font-size: .8rem; font-weight: 650; color: #c3cdd8; white-space: nowrap; }
.lr-m.rated .lr-out-w { color: var(--gold); }
.lr-m.void .lr-out-w { color: #ffab8f; }
.lr-m.expired .lr-out-w, .lr-m.capped .lr-out-w { color: var(--muted); }
.lr-matches .gm-mirror { font-size: .8rem; }
.lr-how { margin: 14px 0 0; }
@media (max-width: 400px) {
  .lr-rows li { gap: 7px; padding-left: 8px; }
  .lr-matches li { grid-template-columns: 1fr auto auto; }
  .lr-matches .lr-out-w { grid-column: 1 / -1; grid-row: 2; }
}