/* Ladder-only styling. Everything shared with the daily comes from ../style.css,
   which is NOT edited here: the daily is live, and a ladder that restyled it
   would ship a change nobody asked for to the page that already has players. */

.strip {
  list-style: none;
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 4px 0 8px;
  width: 100%;
  max-width: var(--span);
  justify-content: space-between;
}

.strip li {
  flex: 1;
  text-align: center;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 0 4px;
  line-height: 1.15;
}
/* The label sits above its value, in DOM order, so a screen reader and the eye
   read the same thing: "depth", then the number. */
.strip li b {
  display: block;
  font-size: 1.05rem;
  color: var(--ink);
}
/* The three outcomes use the share card's own palette, so the strip on screen
   and the tiles in the pasted card are the same picture. */
.strip li.cleared {
  background: #0b4f7a;
  border-color: #38bdf8;
}
.strip li.cleared b,
.strip li.slipped b,
.strip li.failed b {
  color: #fff;
}
.strip li.slipped {
  background: #6b5a08;
  border-color: #facc15;
}
.strip li.failed {
  background: #7a1f1f;
  border-color: var(--warn);
}
.strip li.now {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.dailylink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.numberlabel {
  margin: 0;
  color: var(--dim);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* The number is the product, so it is the biggest thing on the page. It is
   sized in clamp() rather than a fixed rem because "depth 12-16" is twice the
   width of "depth 27+" and must not wrap on a narrow phone. */
.bignumber {
  margin: 2px 0 10px;
  font-size: clamp(1.6rem, 9vw, 2.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1.1;
}

/* The card is prose, not a grid.
   The daily's <pre> never wraps because its longest line is six tiles wide. The
   ladder's longest line is a sentence, and on a 390px phone it ran off the
   right edge of the panel with the end of it simply invisible - on the one
   element the whole growth mechanism depends on somebody reading. */
#cardText {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-align: center;
  margin: 10px 0 14px;
}

.caveat {
  color: var(--dim);
  margin: 12px 0 10px;
}

.ghost {
  background: none;
  border: 1px solid var(--line);
  color: var(--dim);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.9rem;
  cursor: pointer;
}

footer a {
  color: var(--accent);
}

@media (max-width: 380px) {
  .strip li {
    font-size: 0.6rem;
    padding: 4px 0 3px;
  }
  .strip li b {
    font-size: 0.82rem;
  }
}