:root {
  --pet-cv: 104px;
  --pet-opt-art: 72px;
  --pet-glow: rgba(247, 197, 72, 0.28);
  --league-glow: rgba(247, 197, 72, 0.32);
  --league-dim: 0.38;
  --league-step: 40px;
  --league-summary-min: 8rem;
  --league-rank-w: 2.25rem;
  --league-row-pad: 6px;
  --bst-seg-h: 36px;
  --bst-seg-pad: 6px;
  --bst-off-fs: 0.625rem;
  --bst-gap: 4px;
}

.lc {
  --bst-gap: 8px;
}

.pet-pick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-s);
  margin-bottom: var(--gap-s);
}

.pet-opt {
  min-width: 0;
}

.pet-opt .cl-art {
  width: var(--pet-opt-art);
  height: var(--pet-opt-art);
  display: grid;
  place-items: center;
}

.pet-opt.on {
  border-color: var(--accent);
}

.pet-hero,
.league-hero {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  margin-bottom: var(--gap-s);
}

.pet-hero {
  background: radial-gradient(circle at 12% 50%, var(--pet-glow), transparent 55%), var(--surface-2);
}

.pet-cv {
  flex: none;
  width: var(--pet-cv);
  height: var(--pet-cv);
}

.pet-hero .grow,
.league-hero .grow,
.pet-treats .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.pet-treats .grow {
  flex: 1 1 12rem;
}

.pet-hero small,
.league-hero small,
.pet-treats small,
.league-mine small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.pet-top,
.pet-rename {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.pet-field {
  margin-bottom: var(--gap-s);
}

.pet-name {
  font-size: var(--fs-l);
  font-weight: var(--fw-x);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pet-rename .text {
  flex: 1;
  min-width: 0;
}

.pet-hero .pet-max {
  color: var(--gold-ink);
  font-weight: var(--fw-b);
}

.pet-acts {
  margin-bottom: var(--gap-s);
}

.pet-acts .btn small {
  display: block;
  font-size: var(--fs-xs);
  opacity: 0.8;
}

.pet-treats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--gap-s);
}

.pet-wear .cl-foot small {
  font-weight: var(--fw-b);
  color: var(--accent-ink);
}

.pet-fine,
.league-note {
  display: block;
  margin-top: var(--gap-s);
  font-size: var(--fs-xs);
  text-align: center;
}

.league-hero {
  flex-wrap: wrap;
  background: radial-gradient(circle at 10% 40%, var(--league-glow), transparent 55%), var(--surface-2);
}

.league-hero .grow {
  flex: 1 0 var(--league-summary-min);
}

.league-mine {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
  max-width: 100%;
  margin-left: auto;
  text-align: end;
}

.league-mine b,
.league-row .num:last-child {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: var(--fw-x);
}

.league-last {
  margin: 0 0 var(--gap-s);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m);
  background: var(--surface-3);
  font-size: var(--fs-s);
}

.league-ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-1);
  margin: 0 0 var(--gap-s);
  padding: 0;
  list-style: none;
}

.league-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-1) 0;
  border-radius: var(--r-m);
}

.league-step:not(.got) > .ic {
  opacity: var(--league-dim);
}

.league-step.on {
  background: var(--surface-2);
  box-shadow: var(--clay);
}

.league-step small {
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 359px) {
  .pet-pick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .league-step small {
    font-size: var(--fs-2xs);
  }
}

.league-list,
.league-prizes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.league-row {
  display: grid;
  grid-template-columns: var(--league-rank-w) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--league-row-pad) var(--sp-3);
  border-radius: var(--r-m);
  background: var(--surface-2);
  font-size: var(--fs-s);
}

.league-row .grow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-row.me {
  background: var(--accent-soft);
  font-weight: var(--fw-x);
}

.league-prize {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m);
  background: var(--surface-2);
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
}

.lc .bst-grid {
  grid-template-columns: minmax(0, 1fr);
}

.bst-live {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--gap-s);
}

.bst-qty {
  width: 100%;
  gap: var(--bst-gap);
  flex-wrap: nowrap;
}

.bst-qty > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: max(var(--bst-seg-h), var(--target));
  padding: 0 var(--bst-seg-pad);
  font-size: var(--fs-xs);
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bst-qty small {
  font-size: var(--bst-off-fs);
  opacity: 0.85;
}

.bst-use {
  margin-top: var(--sp-1);
}

.lb-failed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.lb-failed > span {
  flex: 1 1 var(--row-text-min);
}