/* ==========================================================================
   Leaderboard v2 — built on Skynet UI (https://skynetui.com)
   Only page-specific layout lives here; components come from skynet-ui.css.
   Every color below is a Skynet UI token so the page follows the theme.
   ========================================================================== */

/* Palettes live in public/css/themes-v2.css — one copy for all six
   themes, loaded before this file. What stays here is this page's own
   layout, which is not a colour and does not change with the theme. */

/* Skynet UI declares `.hidden` before its component display rules, so a
   hidden `.sk-alert` / `.sk-btn` would still render. Scope a hard override
   to this page. */
#lb-page .hidden,
#share-modal .hidden {
  display: none !important;
}

/* ---------- page header ---------- */
.lb-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.lb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sk-primary-text);
}
.lb-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ---------- tabs ---------- */
.lb-tabs {
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.lb-tabs .sk-tab {
  white-space: nowrap;
}
.lb-tabs .sk-tab i {
  margin-right: 0.4rem;
}

/* ---------- toolbar ---------- */
.lb-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.lb-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lb-control .sk-label {
  white-space: nowrap;
}
.lb-search {
  position: relative;
  flex: 1 1 16rem;
  min-width: 0;
}
.lb-search .sk-input-group {
  width: 100%;
}
.lb-search .sk-input-group .sk-input {
  min-width: 0;
}
.lb-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  min-height: 1.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--sk-muted);
}
.lb-summary strong {
  color: var(--sk-text-2);
  font-weight: 600;
}

/* ---------- ranked list ---------- */
.lb-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lb-list.lb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
}
.lb-list[aria-busy="true"] {
  pointer-events: none;
}

.lb-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  overflow: hidden;
  transition: border-color var(--sk-transition), box-shadow var(--sk-transition);
}
.lb-row:hover {
  border-color: var(--sk-border-2);
}
.lb-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
}
.lb-top-1::before {
  background: linear-gradient(180deg, #fde68a, #f59e0b);
}
.lb-top-2::before {
  background: linear-gradient(180deg, #f3f4f6, #9ca3af);
}
.lb-top-3::before {
  background: linear-gradient(180deg, #f9c58d, #b45309);
}

.lb-row-main {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lb-rank {
  display: flex;
  flex: 0 0 3.25rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  height: 3.25rem;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  background: var(--sk-surface-2);
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lb-rank i {
  margin-bottom: 0.2rem;
  font-size: 0.6rem;
  line-height: 1;
  opacity: 0.9;
}
.lb-rank > span {
  line-height: 1;
}
/* the toolbar hosts the suggestion dropdown, so it must not clip */
.lb-toolbar,
.lb-toolbar > .sk-card-body {
  overflow: visible;
}
.lb-rank-lg {
  flex-basis: 4rem;
  height: 4rem;
  font-size: 1.25rem;
}
.lb-top-1 .lb-rank {
  border-color: transparent;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #451a03;
}
.lb-top-2 .lb-rank {
  border-color: transparent;
  background: linear-gradient(135deg, #f3f4f6, #9ca3af);
  color: #111827;
}
.lb-top-3 .lb-rank {
  border-color: transparent;
  background: linear-gradient(135deg, #f9c58d, #b45309);
  color: #3b1a03;
}

.lb-identity {
  flex: 1 1 auto;
  min-width: 0;
}
.lb-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.lb-name {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--sk-muted);
}
.lb-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
}
.lb-fav {
  position: relative;
}
.lb-fav i {
  color: var(--sk-muted);
  transition: color var(--sk-transition), transform var(--sk-transition);
}
.lb-fav.is-fav i {
  color: var(--sk-warning);
}
.lb-fav:hover i {
  color: var(--sk-warning-text);
  transform: scale(1.15);
}

/* the signed-in visitor's own row */
.lb-row-me {
  border-color: var(--sk-primary);
  box-shadow: 0 0 0 1px var(--sk-primary-soft);
}
.lb-row-me:not(.lb-top-1):not(.lb-top-2):not(.lb-top-3)::before {
  background: var(--sk-primary);
}
.lb-me-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sk-primary-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.lb-me-link:hover,
.lb-me-link:focus-visible {
  text-decoration: underline;
}

/* stat tiles */
.lb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.75rem, 1fr));
  gap: 0.5rem;
}
.lb-stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  padding: 0.5rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--sk-radius-sm);
  background: var(--sk-surface-2);
}
.lb-stat-label {
  overflow: hidden;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sk-muted);
}
.lb-stat-value {
  overflow: hidden;
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sk-text);
}
.lb-stat.is-sorted {
  border-color: var(--sk-primary);
  background: var(--sk-primary-soft);
}
.lb-stat.is-sorted .lb-stat-label {
  color: var(--sk-primary-text);
}

/* rank insignia inside badges */
.lb-rank-badge {
  gap: 0.35rem;
}
.lb-rank-insignia {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
  vertical-align: middle;
}
.lb-rank-insignia svg {
  width: 100%;
  height: 100%;
}
.lb-tier-bronze { color: #d9975a; border-color: rgba(205, 127, 50, 0.45); }
.lb-tier-silver { color: #d6d6d6; border-color: rgba(192, 192, 192, 0.45); }
.lb-tier-gold { color: #ffd700; border-color: rgba(255, 215, 0, 0.45); }
.lb-tier-platinum { color: #eeeeec; border-color: rgba(229, 228, 226, 0.55); }
.lb-tier-diamond { color: #b9f2ff; border-color: rgba(185, 242, 255, 0.55); }

/* expandable detail panel: grid-row trick animates height without JS measuring */
.lb-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lb-detail.is-open {
  grid-template-rows: 1fr;
}
.lb-detail-inner {
  min-height: 0;
  overflow: hidden;
}
.lb-detail-body {
  padding-top: 0.875rem;
  border-top: 1px solid var(--sk-border);
}
.lb-detail .sk-table {
  font-size: 0.875rem;
}
.lb-detail .sk-table th,
.lb-detail .sk-table td {
  padding: 0.5rem 0.75rem;
}
.lb-detail .sk-pagination {
  justify-content: center;
}
.lb-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.625rem;
}
.lb-detail-head h4 {
  margin: 0;
  font-size: 0.9375rem;
}
.lb-detail-filter {
  flex: 1 1 12rem;
  max-width: 18rem;
}

/* ---------- featured cards ---------- */
.lb-featured-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.lb-featured-card > .sk-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.5rem;
}
.lb-featured-tag {
  position: absolute;
  top: -0.7rem;
  left: 1rem;
}
.lb-featured-notes {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--sk-text-2);
}
.lb-featured-card .lb-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lb-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
}
.lb-card-actions .lb-push {
  margin-left: auto;
}

/* ---------- search profile ---------- */
.lb-profile {
  max-width: 56rem;
  margin: 0 auto;
}
.lb-profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.lb-profile .lb-stats {
  grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
}
.lb-profile-name {
  margin: 0;
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* ---------- loading skeleton ---------- */
.lb-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
}
.lb-skeleton-main {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lb-skeleton-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.75rem, 1fr));
  gap: 0.5rem;
}

/* ---------- admin manage list ---------- */
.lb-manage-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* ---------- share modal ---------- */
.lb-qr {
  display: inline-block;
  padding: 0.5rem;
  border-radius: var(--sk-radius);
  background: #fff;
}

/* ---------- rivals ---------- */
.lb-row-rival {
  border-color: rgba(248, 113, 113, 0.55);
}
.lb-row-rival:not(.lb-top-1):not(.lb-top-2):not(.lb-top-3)::before {
  background: var(--sk-danger);
}
.lb-rival-toggle i {
  color: var(--sk-muted);
  transition: color var(--sk-transition), transform var(--sk-transition);
}
.lb-rival-toggle.is-active i,
.lb-rival-toggle:hover i {
  color: var(--sk-danger);
}
.lb-rival-toggle:hover i {
  transform: scale(1.15);
}
.lb-rivals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px dashed var(--sk-border-2);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-surface-2);
  font-size: 0.8125rem;
}
.lb-rivals-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sk-danger-text);
}
.lb-rival-gap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.lb-rivals .js-compare {
  margin-left: auto;
}
.lb-gap-pos {
  color: var(--sk-success-text);
  font-weight: 600;
}
.lb-gap-neg {
  color: var(--sk-danger-text);
  font-weight: 600;
}
.lb-vs-me {
  font-size: 0.8125rem;
}
.lb-compare td,
.lb-compare th {
  white-space: nowrap;
}
.lb-compare .lb-gap {
  margin-left: 0.25rem;
  font-size: 0.75rem;
}
.lb-compare-mobile {
  display: none;
}
.lb-compare-card {
  margin-bottom: 1rem;
}
.lb-compare-card h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}
.lb-compare-card h4 i {
  color: var(--sk-danger-text);
}
.lb-compare-small {
  width: 100%;
  table-layout: fixed;
  font-size: 0.8125rem;
}
.lb-compare-small th,
.lb-compare-small td {
  padding: 0.4rem 0.4rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.lb-compare-small th:first-child,
.lb-compare-small td:first-child {
  width: 34%;
}
.lb-compare-small .lb-gap {
  display: block;
  margin-left: 0;
  font-size: 0.75rem;
}
.lb-compare-foot {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.875rem;
  font-size: 0.875rem;
  color: var(--sk-text-2);
}
.lb-compare-line i {
  color: var(--sk-danger-text);
}

/* ---------- streaks, hot, weapon, achievements ---------- */
.lb-streak {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
}
.lb-weapon {
  color: var(--sk-text-2);
}
.lb-weapon-slot:empty,
.lb-podium-weapon:empty {
  display: none;
}
.lb-podium-weapon {
  font-size: 0.75rem;
}
.lb-achievements {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.lb-ach {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--sk-border-2);
  border-radius: 50%;
  background: var(--sk-surface-2);
  font-size: 0.6875rem;
  color: var(--sk-text-2);
  transition: transform var(--sk-transition), border-color var(--sk-transition);
}
.lb-ach:hover {
  transform: translateY(-1px) scale(1.1);
  border-color: currentColor;
}
.lb-ach-warlord { color: #fbbf24; }
.lb-ach-headhunter { color: #f87171; }
.lb-ach-marksman { color: #38bdf8; }
.lb-ach-apex { color: #c48ff3; }
.lb-ach-streaker { color: #fb923c; }
.lb-ach-veteran { color: #34d399; }
.lb-ach-heavy { color: #e2e8f0; }

/* ---------- seasons ---------- */
.lb-page-head > div {
  min-width: 0;
  max-width: 100%;
}
.lb-season-chip {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
}
.lb-season-chip i {
  margin-right: 0.3rem;
}
.lb-season-card .sk-card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lb-season-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-surface-2);
}
.lb-season-now strong {
  font-size: 1.05rem;
}
.lb-season-meta {
  font-size: 0.8125rem;
  color: var(--sk-muted);
}
.lb-season-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.lb-season-forms form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lb-season-forms .sk-field {
  margin-bottom: 0;
}
.lb-season-forms h4 {
  margin: 0;
  font-size: 0.9375rem;
}

/* ---------- live badge + refresh pill ---------- */
.lb-live-dot {
  position: relative;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--sk-success);
  vertical-align: middle;
}
.lb-live-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--sk-success);
  border-radius: 50%;
  opacity: 0;
}
.lb-summary-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}
.lb-updated {
  color: var(--sk-faint);
}

/* ---------- search suggestions ---------- */
.lb-suggest {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 40;
  max-height: 16rem;
  margin-top: 0.35rem;
  padding: 0.25rem;
  overflow: auto;
  border: 1px solid var(--sk-border-2);
  border-radius: var(--sk-radius);
  background: var(--sk-surface);
  box-shadow: var(--sk-shadow-lg);
}
.lb-suggest[hidden] {
  display: none;
}
.lb-suggest button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: var(--sk-radius-sm);
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lb-suggest button:hover,
.lb-suggest button.is-active {
  background: var(--sk-primary-soft);
  color: var(--sk-primary-text);
}
.lb-suggest button > span:first-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-suggest mark {
  background: transparent;
  color: var(--sk-primary-text);
  font-weight: 700;
}
.lb-suggest-rank {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--sk-muted);
}
.lb-suggest-empty {
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  color: var(--sk-muted);
}

/* ---------- top-3 podium ---------- */
.lb-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
}
.lb-podium-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.875rem 0.75rem 0;
  overflow: hidden;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  background: var(--sk-surface);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--sk-transition), transform var(--sk-transition), box-shadow var(--sk-transition);
}
.lb-podium-card:hover,
.lb-podium-card:focus-visible {
  border-color: var(--lb-podium);
  transform: translateY(-3px);
  box-shadow: var(--sk-shadow-lg);
}
.lb-podium-card:focus-visible {
  outline: 2px solid var(--sk-primary);
  outline-offset: 2px;
}
.lb-podium-1 { --lb-podium: #f59e0b; --lb-bar: 4.25rem; order: 2; }
.lb-podium-2 { --lb-podium: #9ca3af; --lb-bar: 3rem; order: 1; }
.lb-podium-3 { --lb-podium: #b45309; --lb-bar: 2.25rem; order: 3; }
.lb-podium-medal {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1a1206;
  background: var(--lb-podium);
}
.lb-podium-1 .lb-podium-medal {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
}
.lb-podium-2 .lb-podium-medal {
  background: linear-gradient(135deg, #f3f4f6, #9ca3af);
}
.lb-podium-3 .lb-podium-medal {
  background: linear-gradient(135deg, #f9c58d, #b45309);
}
.lb-podium-name {
  max-width: 100%;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-podium-stat {
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.lb-podium-stat small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sk-muted);
}
.lb-podium-bar {
  width: 100%;
  height: var(--lb-bar);
  margin-top: 0.5rem;
  border-radius: var(--sk-radius-sm) var(--sk-radius-sm) 0 0;
  background: linear-gradient(180deg, var(--lb-podium), transparent);
  opacity: 0.75;
  transform-origin: bottom;
}

/* ---------- back to top ---------- */
.lb-totop {
  position: fixed;
  right: 1rem;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  z-index: 60;
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  box-shadow: var(--sk-shadow-lg);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lb-totop.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ---------- motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lb-enter {
    animation: lb-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: var(--lb-delay, 0ms);
  }
  @keyframes lb-rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .lb-live-dot::after {
    animation: lb-ping 1.8s ease-out infinite;
  }
  @keyframes lb-ping {
    0% {
      transform: scale(0.6);
      opacity: 0.9;
    }
    100% {
      transform: scale(1.9);
      opacity: 0;
    }
  }
  .lb-top-1 .lb-rank,
  .lb-top-2 .lb-rank,
  .lb-top-3 .lb-rank {
    position: relative;
    overflow: hidden;
  }
  .lb-top-1 .lb-rank::after,
  .lb-top-2 .lb-rank::after,
  .lb-top-3 .lb-rank::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: lb-shine 4.5s ease-in-out infinite;
  }
  .lb-top-2 .lb-rank::after {
    animation-delay: 0.6s;
  }
  .lb-top-3 .lb-rank::after {
    animation-delay: 1.2s;
  }
  @keyframes lb-shine {
    0%,
    65% {
      transform: translateX(-120%);
    }
    100% {
      transform: translateX(120%);
    }
  }
  .lb-stat.is-sorted,
  .lb-flash {
    animation: lb-glow 1.2s ease-out;
  }
  @keyframes lb-glow {
    0% {
      box-shadow: 0 0 0 0 var(--sk-primary-soft);
    }
    45% {
      box-shadow: 0 0 0 8px var(--sk-primary-soft);
    }
    100% {
      box-shadow: 0 0 0 0 transparent;
    }
  }
  .lb-fav.is-burst i {
    animation: lb-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
  }
  @keyframes lb-pop {
    0% {
      transform: scale(0.6) rotate(-20deg);
    }
    60% {
      transform: scale(1.5) rotate(10deg);
    }
    100% {
      transform: none;
    }
  }
  .lb-fav.is-burst::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--sk-warning);
    border-radius: 50%;
    animation: lb-ring 0.5s ease-out forwards;
  }
  @keyframes lb-ring {
    from {
      transform: scale(0.6);
      opacity: 0.9;
    }
    to {
      transform: scale(1.9);
      opacity: 0;
    }
  }
  .lb-refresh-pill,
  .lb-hot {
    animation: lb-pulse 1.8s ease-in-out infinite;
  }
  @keyframes lb-pulse {
    0%,
    100% {
      box-shadow: 0 0 0 0 var(--sk-primary-soft);
    }
    50% {
      box-shadow: 0 0 0 6px var(--sk-primary-soft);
    }
  }
  .lb-podium-bar {
    animation: lb-grow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: var(--lb-delay, 0ms);
  }
  @keyframes lb-grow {
    from {
      transform: scaleY(0);
    }
    to {
      transform: scaleY(1);
    }
  }
}

/* ---------- responsive ---------- */
/* The site navbar is position:fixed at z-index 10000 and the review banner at 9990, while
   Skynet UI modals sit at 300, so on phones a modal taller than the screen had its header hidden
   under the navbar. Lift every modal on this page (the rivals, alerts and share modals and the
   confirm dialogs Skynet UI creates) above the site chrome, and keep toasts above the modals. */
.sk-modal {
  z-index: 10010;
}
.sk-toast-container {
  z-index: 10020;
}

/* Page modals: size from the fixed overlay itself rather than 100vh, so the box never grows
   taller than what is actually visible when a phone's address bar or an in-app browser's chrome
   is showing. Safe-area padding keeps the header out from under a notch or status bar
   (the page uses viewport-fit=cover). The box centres when it fits and top-aligns when it
   cannot, so the header stays reachable and the body scrolls instead of the header being clipped. */
#share-modal,
#rivals-modal,
#alerts-modal {
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
}
#share-modal .sk-modal-box,
#rivals-modal .sk-modal-box,
#alerts-modal .sk-modal-box {
  margin: auto;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#share-modal .sk-modal-header,
#rivals-modal .sk-modal-header,
#alerts-modal .sk-modal-header,
#share-modal .sk-modal-footer,
#rivals-modal .sk-modal-footer,
#alerts-modal .sk-modal-footer {
  flex: 0 0 auto;
}
#share-modal .sk-modal-body,
#rivals-modal .sk-modal-body,
#alerts-modal .sk-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .lb-row-main {
    flex-wrap: wrap;
  }
  .lb-rank {
    flex-basis: 2.75rem;
    height: 2.75rem;
    font-size: 0.95rem;
  }
  .lb-identity {
    flex: 1 1 60%;
  }
  .lb-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .lb-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lb-toolbar-row .lb-control {
    width: 100%;
    justify-content: space-between;
  }
  .lb-toolbar-row .lb-control .sk-select {
    flex: 1;
    min-width: 0;
  }
  .lb-detail-filter {
    max-width: none;
  }
  .lb-podium {
    gap: 0.5rem;
  }
  .lb-podium-card {
    padding: 0.625rem 0.375rem 0;
  }
  .lb-podium-stat {
    font-size: 1rem;
  }
  .lb-podium-name {
    font-size: 0.8125rem;
  }
  .lb-totop {
    right: 0.75rem;
  }
  /* Rivals strip: one rival per line, name left, gap right, full-width compare button */
  .lb-rivals {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    font-size: 0.8125rem;
  }
  .lb-rivals-title {
    margin-bottom: 0.125rem;
  }
  .lb-rival-gap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }
  .lb-rival-gap strong {
    flex: 0 1 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lb-rival-gap > span {
    flex: 1 1 auto;
    text-align: right;
  }
  .lb-rivals .js-compare {
    margin-left: 0;
    width: 100%;
  }
  .lb-vs-me {
    display: block;
    width: 100%;
  }
  /* Page modals on phones: use the whole width with a slim gutter; height comes from the
     overlay rules above so the header is never pushed off the top of the screen. */
  #share-modal,
  #rivals-modal,
  #alerts-modal {
    padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px))
      max(0.5rem, env(safe-area-inset-left, 0px));
  }
  #rivals-modal .sk-modal-box,
  #alerts-modal .sk-modal-box {
    width: 100%;
    max-width: none;
  }
  #rivals-modal .sk-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lb-compare {
    font-size: 0.8125rem;
  }
  .lb-compare th,
  .lb-compare td {
    padding: 0.4rem 0.5rem;
  }
  .lb-compare-desktop,
  .lb-compare-foot {
    display: none;
  }
  .lb-compare-mobile {
    display: block;
  }
  #rivals-modal .js-unpin {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb-row,
  .lb-fav i {
    transition: none;
  }
}