/* ScoreBattle · League Detail screen (ld- prefix)
   Minimalist port — built on the app palette in styles.css.
   No new font, no dark theme. Reuses --navy / --red / --bone / --ink / --muted. */

#screen-league-detail.ld-screen {
  background: var(--bone);
  color: var(--ink);
  min-height: 100vh;
  overflow-y: auto;
}

.ld {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 24px 48px;
}

/* ── topbar ─────────────────────────────────────────────── */
.ld__topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 14px;
}
.ld__topbar-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ld__topbar-back:hover { background: var(--field); border-color: #C7CCDE; }
.ld__topbar-back svg { width: 14px; height: 14px; }
.ld__topbar-title {
  flex: 1;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.ld__topbar-spacer { width: 78px; }

/* ── error state ────────────────────────────────────────── */
.ld__error {
  text-align: center;
  padding: 56px 20px;
  color: var(--muted);
}
.ld__error p { margin: 0 0 12px; }

/* ── hero ───────────────────────────────────────────────── */
.ld__hero {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ld__hero-top {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 18px;
  align-items: center;
}
.ld__hero-info {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ld__avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 10px 24px -10px rgba(20,34,74,.45), inset 0 0 0 1px rgba(255,255,255,.08);
  flex-shrink: 0;
}
.ld__avatar--red   { background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%); }
.ld__avatar--gold  { background: linear-gradient(135deg, #c58a1b 0%, #8e620f 100%); }
.ld__avatar--green { background: linear-gradient(135deg, #1F8A5B 0%, #15623f 100%); }
.ld__avatar--ink   { background: linear-gradient(135deg, #2A3252 0%, #0E1530 100%); }

.ld__title-block { min-width: 0; }
.ld__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.15;
}
.ld__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ld__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--field);
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ld__chip svg { width: 11px; height: 11px; }
.ld__chip--navy { background: rgba(27,46,94,.10); color: var(--navy); }
.ld__chip--red  { background: rgba(200,32,47,.10); color: var(--red-deep); }
.ld__chip--gold { background: rgba(197,138,27,.14); color: #8e620f; }

.ld__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12.5px;
  flex-wrap: wrap;
}
.ld__meta b { color: var(--ink-2); font-weight: 700; }
.ld__meta .ld__dot {
  width: 3px;
  height: 3px;
  border-radius: 99px;
  background: #C7CCDE;
}

.ld__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.ld__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ld__status--ns       { background: rgba(107,115,144,.14); color: var(--ink-2); }
.ld__status--ns::before  { content:''; width:6px; height:6px; border-radius:99px; background: var(--muted); }
.ld__status--live     { background: rgba(31,138,91,.14); color: var(--success); }
.ld__status--live::before { content:''; width:6px; height:6px; border-radius:99px; background: var(--success); animation: ldPulse 1.6s infinite; }
.ld__status--fin      { background: rgba(27,46,94,.12); color: var(--navy); }
.ld__status--fin::before  { content:'✓'; font-size:10px; font-weight:900; line-height:1; }
@keyframes ldPulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%     { transform: scale(.55); opacity: .4; }
}

/* buttons in hero — reuse styles.css .btn / .btn--primary, plus a few flavors */
#screen-league-detail .btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}
.ld-btn--leave {
  background: #fff;
  color: var(--ink-2);
  border: 1.5px solid var(--line);
}
.ld-btn--leave:hover { background: var(--field); border-color: #C7CCDE; }
.ld-btn--danger-outline {
  background: #fff;
  color: var(--red-deep);
  border: 1.5px solid rgba(200,32,47,.32);
}
.ld-btn--danger-outline:hover { background: rgba(200,32,47,.06); border-color: var(--red); }
.ld-btn--danger {
  background: var(--red);
  color: #fff;
  border: 0;
}
.ld-btn--danger:hover:not(:disabled) { background: var(--red-deep); }
.ld-btn--danger:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }

/* ── NS banner ──────────────────────────────────────────── */
.ld__banner {
  margin-top: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(197,138,27,.10), rgba(197,138,27,.02));
  border: 1px solid rgba(197,138,27,.22);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: 13px;
}
.ld__banner-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(197,138,27,.18);
  color: var(--warning);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ld__banner-icon svg { width: 14px; height: 14px; }
.ld__banner b { color: var(--ink); font-weight: 700; }

/* ── body (stacked: info card, then tabs card) ──────────── */
.ld__body {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ld__card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
/* capacity bar */
.ld__cap { margin-top: 0; }
.ld__cap-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.ld__cap-head b { color: var(--ink); font-weight: 700; }
.ld__cap-bar {
  height: 6px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.ld__cap-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy), var(--navy-700));
  border-radius: 99px;
  transition: width .4s ease;
}
.ld__cap-fill--warm { background: linear-gradient(90deg, var(--warning), var(--red)); }

/* cta row — message / invite code / password as pill-buttons */
.ld__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ld__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--field);
  border: 1.5px solid var(--line);
  border-radius: 99px;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  max-width: 100%;
  text-align: left;
  min-width: 0;
}
button.ld__cta:hover { background: #fff; border-color: #C7CCDE; }
.ld__cta--pwd { cursor: default; padding-right: 6px; }
.ld__cta--pwd:hover { background: var(--field); border-color: var(--line); }
.ld__cta-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}
.ld__cta-icon svg { width: 14px; height: 14px; }
.ld__cta-label {
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
}
.ld__cta-text {
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 280px;
}
.ld__cta-mono {
  font-family: 'SF Mono','Roboto Mono','Menlo',ui-monospace,monospace;
  font-size: 11.5px;
}
.ld__cta--msg .ld__cta-text {
  font-style: italic;
  font-weight: 500;
}
.ld__cta--share {
  background: linear-gradient(180deg, #4F6FE2 0%, #3D58C5 100%);
  border-color: #2F49AA;
  color: #fff;
}
.ld__cta--share .ld__cta-icon,
.ld__cta--share .ld__cta-label,
.ld__cta--share .ld__cta-text {
  color: #fff;
}
button.ld__cta--share:hover {
  background: linear-gradient(180deg, #5B7BEE 0%, #4863D3 100%);
  border-color: #2F49AA;
}
/* Mobile: collapse the share pill to just the icon + "Share" label —
   the URL text is too long for narrow screens and any tap fires the
   share sheet anyway. */
@media (max-width: 599px) {
  .ld__cta--share .ld__cta-text { display: none; }
}
.ld__cta-mini {
  width: 22px;
  height: 22px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
}
.ld__cta-mini:hover { color: var(--ink-2); background: var(--field); border-color: #C7CCDE; }
.ld__cta-mini svg { width: 12px; height: 12px; }

/* ── tabs ───────────────────────────────────────────────── */
.ld__tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.ld__tab {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 12px 16px;
  color: var(--muted);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ld__tab:hover { color: var(--ink-2); }
.ld__tab.is-active { color: var(--ink); border-bottom-color: var(--red); }
.ld__tab .count {
  font-size: 10.5px;
  background: var(--line);
  color: var(--ink-2);
  padding: 2px 7px;
  border-radius: 99px;
  font-weight: 700;
}
.ld__tab.is-active .count { background: var(--red); color: #fff; }

.ld__panel { display: none; }
.ld__panel.is-active { display: block; }

/* ── members list ───────────────────────────────────────── */
.ld__member {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.ld__member:last-child { border-bottom: 0; }
.ld__member:hover { background: #FAFAF7; }
.ld__member-av {
  width: 36px; height: 36px;
  border-radius: 99px;
  display: grid; place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 2px solid;
  flex-shrink: 0;
}
.ld__member-main { min-width: 0; }
.ld__member-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ld__member-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}
.ld__ubadge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
}
.ld__ubadge--creator { background: rgba(197,138,27,.15); color: #8e620f; }
.ld__ubadge--creator svg { width: 9px; height: 9px; }
.ld__ubadge--sponsor { background: rgba(31,138,91,.12); color: var(--success); }
.ld__ubadge--you     { background: rgba(27,46,94,.10); color: var(--navy); }

.ld__member-menu-wrap { position: relative; }
.ld__menu-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ld__menu-btn:hover { background: var(--field); color: var(--ink-2); }
.ld__menu-btn svg { width: 15px; height: 15px; }
.ld__menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px -10px rgba(20,34,74,.18);
  min-width: 160px;
  z-index: 10;
  overflow: hidden;
  display: none;
}
.ld__menu.is-open { display: block; }
.ld__menu-item {
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.ld__menu-item:hover { background: var(--field); }
.ld__menu-item--danger { color: var(--red-deep); }
.ld__menu-item--danger:hover { background: rgba(200,32,47,.06); }
.ld__menu-item svg { width: 14px; height: 14px; }

.ld__load-more {
  padding: 14px 18px;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--line);
}
.ld__load-more button {
  height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.ld__load-more button:hover { background: var(--field); }

/* ── empty / soon ───────────────────────────────────────── */
.ld__empty {
  text-align: center;
  padding: 40px 22px;
  color: var(--muted);
}
.ld__empty-icon {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 99px;
  background: var(--field);
  margin-bottom: 12px;
}
.ld__empty-icon svg { width: 24px; height: 24px; color: var(--muted); }
.ld__empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.ld__empty-msg {
  font-size: 12.5px;
  color: var(--muted);
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ── H2H fixtures panel (H2H_FRONTEND_GUIDE.md §2) ──────── */
.ld__fx {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 18px;
}
.ld__fx-week {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.ld__fx-wkhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--field);
  border-bottom: 1px solid var(--line);
}
.ld__fx-wktitle {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .02em;
}
.ld__fx-wkpill {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 9px;
}
.ld__fx-wknow {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  background: var(--red, #d11827);
  border-radius: 99px;
  padding: 3px 9px;
  margin-left: auto;
  margin-right: 8px;
}
.ld__fx-week.is-current {
  border-color: var(--red, #d11827);
  box-shadow: 0 0 0 2px rgba(209,24,39,.12);
}
.ld__fx-week.is-current .ld__fx-wkhead {
  background: rgba(209,24,39,.06);
}
.ld__fx-matches {
  display: flex;
  flex-direction: column;
}
.ld__fx-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.ld__fx-match:last-child { border-bottom: 0; }
.ld__fx-side {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ld__fx-side--home { justify-content: flex-end; flex-direction: row; }
.ld__fx-side--away { justify-content: flex-start; flex-direction: row; }
.ld__fx-side--home .ld__fx-user { flex-direction: row-reverse; }
.ld__fx-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ld__fx-av {
  width: 28px; height: 28px;
  border-radius: 99px;
  border: 1.5px solid;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ld__fx-av--avg {
  background: #EEF1FA;
  border-color: #C7CCDE;
  color: var(--muted);
  font-style: italic;
}
.ld__fx-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.ld__fx-user--avg .ld__fx-name {
  color: var(--muted);
  font-style: italic;
  font-weight: 600;
}
.ld__fx-score {
  font-family: 'SF Mono','Roboto Mono','Menlo',ui-monospace,monospace;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  min-width: 26px;
  text-align: center;
}
.ld__fx-side.is-win .ld__fx-score { color: var(--success, #0E7A4D); }
.ld__fx-side.is-win .ld__fx-name  { color: var(--ink); }
.ld__fx-match.is-ns .ld__fx-score { color: var(--muted); }
.ld__fx-vs {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ld__fx-status {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.ld__fx-status--fin { background: #DFF5E8; color: #0E7A4D; }
.ld__fx-status--ns  { background: var(--field); color: var(--muted); }
.ld__fx-status--live {
  background: var(--red, #d11827);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ld__fx-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.9);
  animation: ld-fx-live-pulse 1.4s ease-out infinite;
}
@keyframes ld-fx-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.75); }
  70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.ld__fx-match.is-live .ld__fx-score {
  color: var(--ink);
  font-weight: 900;
}

@media (max-width: 599px) {
  .ld__fx-match {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    row-gap: 6px;
  }
  .ld__fx-status {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .ld__fx-name { max-width: 92px; }
}

/* ── settings tab ───────────────────────────────────────── */
.ld__set { padding: 18px; border-bottom: 1px solid var(--line); }
.ld__set:last-child { border-bottom: 0; }
.ld__set h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.ld__set-lead {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}
.ld__set-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
}
.ld__set-row label {
  font-size: 10.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.ld__input, .ld__textarea {
  width: 100%;
  padding: 9px 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
}
.ld__input:focus, .ld__textarea:focus {
  outline: none;
  border-color: var(--navy);
}
.ld__textarea { min-height: 72px; resize: vertical; }

.ld__set-actions { display: flex; justify-content: flex-end; padding-top: 6px; }

/* ── toast (right-bottom) ───────────────────────────────── */
.ld__toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
}
.ld__toast {
  min-width: 240px;
  max-width: 340px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 16px 32px -10px rgba(0,0,0,.45);
  pointer-events: auto;
  animation: ldToastIn .22s ease-out;
}
.ld__toast.is-leaving { animation: ldToastOut .18s ease forwards; }
@keyframes ldToastIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ldToastOut { to   { opacity: 0; transform: translateY(6px); } }
.ld__toast--ok  { background: #0E3A26; color: #A7E5C6; }
.ld__toast--ok::before  { content: '✓'; color: var(--success); font-weight: 900; }
.ld__toast--err { background: #3A0E14; color: #F4B7BD; }
.ld__toast--err::before {
  content: '!';
  width: 16px; height: 16px;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 900;
}

/* ── app-level toasts (auto-join, deep-link feedback) ───── */
.sb-toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9000;
  pointer-events: none;
}
.sb-toast {
  min-width: 240px;
  max-width: 360px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #1B2030;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 16px 32px -10px rgba(0,0,0,.45);
  pointer-events: auto;
  animation: ldToastIn .22s ease-out;
}
.sb-toast.is-leaving { animation: ldToastOut .18s ease forwards; }
.sb-toast--ok   { background: #0E3A26; color: #A7E5C6; }
.sb-toast--err  { background: #3A0E14; color: #F4B7BD; }
.sb-toast--info { background: #0E2A3A; color: #B7E0F4; }

/* ── standings tab (mock data) ──────────────────────────── */
.ld__stand { display: flex; flex-direction: column; gap: 12px; }
.ld__stand-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 4px 0 2px;
}
.ld__stand-bar .count { font-size: 12px; color: var(--muted); font-weight: 600; }
.ld__stand-mock {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255, 184, 0, .14); color: #8e620f;
  border: 1px solid rgba(255, 184, 0, .35);
  padding: 2px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.ld__stand-search {
  margin-left: auto;
  display: inline-flex; align-items: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 10px;
  min-width: 180px;
}
.ld__stand-search input {
  border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--ink); width: 100%; font-family: inherit;
}
.ld__stand-jumpme {
  background: var(--ink); color: #fff; border: 0;
  border-radius: 10px; padding: 7px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.ld__stand-jumpme:hover { background: #000; }

.ld__stand-tablewrap {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.ld__stand-table { width: 100%; border-collapse: collapse; font-family: inherit; }
.ld__stand-table thead th {
  background: var(--field); color: var(--muted);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 8px; text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ld__stand-table thead th.l { text-align: left; }
.ld__stand-table thead th:first-child { padding-left: 14px; text-align: center; width: 48px; }
.ld__stand-table thead th:last-child  { padding-right: 14px; }
.ld__stand-table tbody td {
  padding: 9px 8px; font-size: 13px; color: var(--ink);
  border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap;
}
.ld__stand-table tbody td:first-child { padding-left: 14px; text-align: center; font-weight: 700; color: var(--muted); }
.ld__stand-table tbody td:last-child  { padding-right: 14px; font-weight: 800; }
.ld__stand-table tbody tr { cursor: pointer; transition: background .12s; }
.ld__stand-table tbody tr:hover { background: rgba(20, 34, 74, .04); }
.ld__stand-table tbody tr:last-child td { border-bottom: 0; }
.ld__stand-row-player { display: flex; align-items: center; gap: 10px; text-align: left; }
.ld__stand-row-player .av {
  width: 28px; height: 28px; border-radius: 7px;
  background: #1B2E5E; color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.ld__stand-row-player .name { font-weight: 700; color: var(--ink); }
.ld__stand-row-player .youtag {
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 99px;
}
.ld__stand-table tbody tr.is-you td { background: rgba(200, 32, 47, .07); }
.ld__stand-table tbody tr.is-you:hover td { background: rgba(200, 32, 47, .12); }
.ld__stand-table .c-player { text-align: left; }

.ld__stand-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px; font-size: 12px; color: var(--muted);
}
.ld__stand-pager .btns { display: flex; gap: 6px; align-items: center; }
.ld__stand-pager button {
  background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px;
  font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ink);
}
.ld__stand-pager button:hover:not([disabled]) { background: var(--field); }
.ld__stand-pager button[disabled] { opacity: .45; cursor: not-allowed; }
.ld__stand-pager .pageinput {
  width: 56px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; text-align: center; font-family: inherit;
}
.ld__stand-empty {
  padding: 36px 16px; text-align: center; color: var(--muted); font-size: 13px;
}

/* ── weekly drill-down modal ───────────────────────────── */
.ld-wkm { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 18px; }
.ld-wkm[hidden] { display: none; }
.ld-wkm__veil { position: absolute; inset: 0; background: rgba(5, 10, 24, .55); animation: ldwk-fade .18s ease; }
.ld-wkm__sheet {
  position: relative; width: 100%; max-width: 540px;
  background: #fff; border-radius: 16px;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 36px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.4);
  animation: ldwk-pop .22s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.ld-wkm__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.ld-wkm__av {
  width: 38px; height: 38px; border-radius: 10px;
  background: #1B2E5E; color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; flex-shrink: 0;
}
.ld-wkm__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ld-wkm__name { font-weight: 800; color: var(--ink); font-size: 15px; }
.ld-wkm__sub { font-size: 12px; color: var(--muted); }
.ld-wkm__close {
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-2); cursor: pointer;
}
.ld-wkm__close:hover { background: var(--field); color: var(--ink); }
.ld-wkm__body { overflow: auto; -webkit-overflow-scrolling: touch; }
.ld-wkm__table { width: 100%; border-collapse: collapse; }
.ld-wkm__table thead th {
  background: var(--field); color: var(--muted);
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 8px; text-align: right;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
}
.ld-wkm__table thead th:first-child { text-align: center; padding-left: 14px; width: 60px; }
.ld-wkm__table thead th.l { text-align: left; }
.ld-wkm__table tbody td {
  padding: 9px 8px; font-size: 13px; color: var(--ink);
  border-bottom: 1px solid var(--line); text-align: right;
}
.ld-wkm__table tbody td:first-child {
  text-align: center; padding-left: 14px;
  font-weight: 700; color: var(--muted);
}
.ld-wkm__table tbody td.l { text-align: left; }
.ld-wkm__table tfoot td {
  background: var(--field); font-weight: 800;
  padding: 10px 8px; text-align: right;
  border-top: 1px solid var(--line);
}
.ld-wkm__table tfoot td:first-child { padding-left: 14px; text-align: left; }
.ld-wkm__pill { display: inline-flex; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ld-wkm__pill--w { background: rgba(31, 138, 91, .14); color: var(--success); }
.ld-wkm__pill--d { background: rgba(20, 34, 74, .08); color: var(--ink-2); }
.ld-wkm__pill--l { background: rgba(200, 32, 47, .12); color: var(--red-deep); }

/* ── H2H weekly matchup cards — vertical 2-team fixture layout ── */
.ld-wkm__summary {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #FBFAF6;
}
.ld-wkm__sum-pill {
  font-size: 10.5px; font-weight: 700; color: var(--ink-2);
  padding: 3px 9px; border-radius: 99px;
  background: #fff; border: 1px solid var(--line);
  letter-spacing: .04em;
}
.ld-wkm__sum-pill b { color: var(--ink); font-weight: 800; margin-right: 2px; }
.ld-wkm__sum-pill--w b { color: var(--success); }
.ld-wkm__sum-pill--l b { color: var(--red-deep); }
.ld-wkm__sum-total {
  margin-left: auto;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.ld-wkm__sum-total b {
  margin-left: 4px; color: var(--ink); font-size: 14px; font-weight: 800;
  letter-spacing: 0;
}

.ld-wkm__matches {
  display: flex; flex-direction: column;
  padding: 10px 12px 14px;
  gap: 8px;
  background: #FBFAF6;
}
.ld-wkm__match {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  border-left: 3px solid transparent;
  overflow: hidden;
}
.ld-wkm__match--w { border-left-color: var(--success); }
.ld-wkm__match--d { border-left-color: #C5CAD8; }
.ld-wkm__match--l { border-left-color: var(--red); }

.ld-wkm__match-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  background: #F6F3EC;
  border-bottom: 1px solid var(--line);
}
.ld-wkm__wk {
  font-size: 10.5px; font-weight: 800; color: var(--muted);
  letter-spacing: .12em; text-transform: uppercase;
}
.ld-wkm__res {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 99px;
}
.ld-wkm__res--w { background: rgba(31, 138, 91, .14); color: var(--success); }
.ld-wkm__res--d { background: rgba(20, 34, 74, .08); color: var(--ink-2); }
.ld-wkm__res--l { background: rgba(200, 32, 47, .12); color: var(--red-deep); }

.ld-wkm__team {
  display: grid;
  grid-template-columns: 28px 1fr 36px;
  align-items: center; gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
}
.ld-wkm__team:first-of-type { border-top: 0; }
.ld-wkm__sav {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: #1B2E5E; color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}
.ld-wkm__sn {
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ld-wkm__tscore {
  font-family: var(--display, var(--sans));
  font-size: 20px; font-weight: 800; color: #B0B6C8;
  text-align: right; letter-spacing: -.01em;
}
.ld-wkm__team.is-win .ld-wkm__sn     { color: var(--ink); font-weight: 800; }
.ld-wkm__team.is-win .ld-wkm__tscore { color: var(--ink); }

@media (max-width: 599px) {
  .ld-wkm__matches { padding: 8px 10px 12px; }
  .ld-wkm__team { grid-template-columns: 24px 1fr 32px; gap: 8px; padding: 8px 10px; }
  .ld-wkm__sav { width: 22px; height: 22px; font-size: 9.5px; }
  .ld-wkm__sn { font-size: 12.5px; }
  .ld-wkm__tscore { font-size: 17px; }
}
@keyframes ldwk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ldwk-pop  { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 599px) {
  .ld-wkm { align-items: flex-end; padding: 0; }
  .ld-wkm__sheet { max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; }
}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .ld { padding: 12px 14px 40px; }
  .ld__hero { padding: 16px; gap: 14px; }
  .ld__hero-top {
    grid-template-columns: 56px 1fr;
    gap: 12px;
  }
  .ld__avatar { width: 56px; height: 56px; font-size: 20px; border-radius: 14px; }
  .ld__title { font-size: 19px; }
  .ld__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .ld__cta-text { max-width: none; }
  .ld__set-row { grid-template-columns: 1fr; gap: 4px; }

  .ld__stand-bar .ld__stand-search { min-width: 0; flex: 1 1 100%; order: 3; }

  /* Mobile standings: just rank / player / points. 1X2 / OU / Challenge
     (and the H2H W/D/L/GD) live in the weekly modal — click a row to see
     them, so the main table stays scroll-free and easy to scan. */
  .ld__stand-table .c-1x2,
  .ld__stand-table .c-ou,
  .ld__stand-table .c-ch,
  .ld__stand-table .c-w,
  .ld__stand-table .c-d,
  .ld__stand-table .c-l,
  .ld__stand-table .c-gd { display: none; }

  /* Weekly modal table: keep the 1X2 / OU / Challenge breakdown visible on
     mobile — this is the whole point of clicking into a row. */
  .ld-wkm__table .c-1x2,
  .ld-wkm__table .c-ou,
  .ld-wkm__table .c-ch { display: table-cell; }
}