.rankings-hero {
  padding-top: calc(var(--space-8) + var(--header-height));
}

.rankings-breadcrumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  margin-bottom: var(--space-4);
}

.rankings-breadcrumbs li::after {
  content: "/";
  margin-left: 0.35rem;
  color: var(--color-text-soft);
}

.rankings-breadcrumbs li:last-child::after {
  content: "";
  margin: 0;
}

.rankings-breadcrumbs li[aria-current="page"] {
  color: var(--color-text-muted);
}

.rankings-hero-layout {
  align-items: flex-start;
}

.rankings-hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rankings-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.rankings-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.rankings-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rankings-hero-card {
  max-width: 480px;
  margin-inline: auto;
}

.rankings-hero-chart {
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.rankings-hero-chart-lines,
.rankings-hero-chart-points {
  position: absolute;
  inset: 0;
}

.rankings-hero-chart-lines::before,
.rankings-hero-chart-lines::after {
  content: "";
  position: absolute;
  inset-inline: 8%;
  border-radius: var(--radius-full);
}

.rankings-hero-chart-lines::before {
  bottom: 34%;
  height: 2px;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.15), rgba(59, 130, 246, 0.85));
}

.rankings-hero-chart-lines::after {
  bottom: 18%;
  height: 2px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.3), transparent);
}

.rankings-hero-chart-points::before,
.rankings-hero-chart-points::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.26);
}

.rankings-hero-chart-points::before {
  left: 22%;
  bottom: 40%;
  background: #22c55e;
}

.rankings-hero-chart-points::after {
  right: 18%;
  bottom: 32%;
  background: #38bdf8;
}

.rankings-hero-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.rankings-hero-mini dt {
  color: var(--color-text-soft);
  margin-bottom: 0.1rem;
}

.rankings-hero-mini dd {
  margin: 0;
}

.rankings-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.rankings-section-header p {
  max-width: 640px;
}

.rankings-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.rankings-grid-main {
  gap: var(--space-4);
}

.rankings-table-wrapper {
  overflow-x: auto;
  margin-top: var(--space-2);
}

.rankings-table {
  width: 100%;
  font-size: var(--font-size-sm);
  border-spacing: 0;
}

.rankings-table thead {
  background: var(--color-primary-soft);
}

.rankings-table th,
.rankings-table td {
  padding: 0.75rem 0.85rem;
  text-align: left;
  white-space: nowrap;
}

.rankings-table th {
  font-weight: 600;
  color: var(--color-accent-navy-soft);
  border-bottom: 1px solid var(--color-border-subtle);
}

.rankings-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.015);
}

.rankings-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.04);
}

.rankings-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
}

.rankings-position--gold {
  background: linear-gradient(135deg, #facc15, #f97316);
  color: #111827;
}

.rankings-position--silver {
  background: linear-gradient(135deg, #e5e7eb, #9ca3af);
  color: #020617;
}

.rankings-position--bronze {
  background: linear-gradient(135deg, #fed7aa, #c2410c);
  color: #111827;
}

.rankings-manager-name {
  display: block;
  font-weight: 600;
}

.rankings-manager-tag {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
}

.rankings-table-footnote {
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
}

.rankings-aside-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.rankings-aside-list h3,
.rankings-aside-list h4 {
  margin-bottom: 0.25rem;
}

.rankings-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rankings-figure-img {
  border-radius: var(--radius-lg);
}

.rankings-figure figcaption {
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
}

.rankings-month-season-grid {
  align-items: flex-start;
  gap: var(--space-4);
}

.rankings-month-chart {
  margin-block: var(--space-3);
}

.rankings-month-chart-line::before {
  content: "";
  position: absolute;
  inset-inline: 8%;
  bottom: 20%;
  height: 0;
  border-radius: var(--radius-full);
  border: 2px solid rgba(34, 197, 94, 0.8);
  border-right-color: transparent;
  border-top-color: transparent;
  transform: skewX(-18deg);
}

.rankings-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.rankings-stats dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
  margin-bottom: 0.15rem;
}

.rankings-stats dd {
  margin: 0;
}

.rankings-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.rankings-bullets li {
  font-size: var(--font-size-sm);
}

.rankings-more-link {
  display: inline-flex;
  margin-top: var(--space-2);
}

.rankings-managers-grid {
  gap: var(--space-4);
}

.rankings-manager-card h3 {
  margin-bottom: 0.1rem;
}

.rankings-manager-role {
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  margin-bottom: var(--space-3);
}

.rankings-manager-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.rankings-manager-meta dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
  margin-bottom: 0.1rem;
}

.rankings-manager-meta dd {
  margin: 0;
}

.rankings-manager-quote {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.rankings-live-grid {
  gap: var(--space-4);
  align-items: flex-start;
}

.rankings-live-legends {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.rankings-leaders-stats {
  margin-bottom: var(--space-3);
}

.rankings-progress-grid {
  gap: var(--space-4);
}

.rankings-stats.compact {
  grid-template-columns: 1fr;
}

.rankings-history-chart {
  margin-top: var(--space-3);
}

.rankings-history-lines::before,
.rankings-history-lines::after {
  content: "";
  position: absolute;
  inset-inline: 10%;
  border-radius: var(--radius-full);
}

.rankings-history-lines::before {
  bottom: 26%;
  height: 2px;
  background: linear-gradient(90deg, #22c55e, transparent);
}

.rankings-history-lines::after {
  bottom: 40%;
  height: 2px;
  background: linear-gradient(90deg, #60a5fa, transparent);
}

.rankings-quotes-grid {
  gap: var(--space-4);
}

.rankings-quote-text {
  font-style: italic;
  margin-bottom: var(--space-2);
}

.rankings-quote-author {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-accent-navy);
}

.rankings-howto-grid {
  align-items: flex-start;
  gap: var(--space-4);
}

.rankings-howto-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-left: 0;
  counter-reset: howto;
}

.rankings-howto-steps li {
  list-style: none;
}

.rankings-howto-steps h3 {
  margin-bottom: 0.15rem;
}

.rankings-newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rankings-newsletter-form {
  margin-top: var(--space-2);
}

.rankings-howto-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (max-width: 1024px) {
  .rankings-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .rankings-hero {
    padding-top: calc(var(--space-6) + var(--header-height));
  }

  .rankings-hero-mini {
    grid-template-columns: minmax(0, 1fr);
  }

  .rankings-section-header {
    margin-bottom: var(--space-4);
  }

  .rankings-grid-main,
  .rankings-live-grid,
  .rankings-progress-grid,
  .rankings-managers-grid,
  .rankings-quotes-grid,
  .rankings-month-season-grid,
  .rankings-howto-grid {
    gap: var(--space-3);
  }

  .rankings-table th,
  .rankings-table td {
    padding-inline: 0.6rem;
  }
}

@media (max-width: 640px) {
  .rankings-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .rankings-section-actions {
    width: 100%;
  }

  .rankings-section-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}