.ranking-page {
    --ranking-surface: rgba(18, 18, 18, 0.92);
    --ranking-surface-strong: rgba(28, 28, 28, 0.96);
    --ranking-surface-soft: rgba(255, 255, 255, 0.05);
    --ranking-border: rgba(255, 255, 255, 0.08);
    --ranking-border-strong: rgba(230, 126, 34, 0.26);
    --ranking-table-gutter: 14px;
    --ranking-text: #f5f5f5;
    --ranking-muted: #c8c8c8;
    --ranking-accent: #e67e22;
    --ranking-accent-soft: rgba(230, 126, 34, 0.16);
    --slayer-accent: #4f87c2;
    --vampire-accent: #d65a5a;
    --ouster-accent: #38a169;
    position: relative;
    min-height: 75vh;
    padding: 24px;
    background:
        radial-gradient(circle at top left, rgba(230, 126, 34, 0.14), rgba(230, 126, 34, 0) 34%),
        radial-gradient(circle at top right, rgba(86, 204, 242, 0.11), rgba(86, 204, 242, 0) 28%),
        linear-gradient(180deg, rgba(38, 38, 38, 0.96) 0%, rgba(18, 18, 18, 0.98) 100%);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.ranking-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.ranking-page > * {
    position: relative;
    z-index: 1;
}

.ranking-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 360px);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 20px;
}

.ranking-hero-copy,
.ranking-spotlight,
.ranking-nav-card,
.ranking-section,
.ranking-highlight-card {
    background: linear-gradient(180deg, rgba(37, 37, 37, 0.98) 0%, rgba(20, 20, 20, 0.98) 100%);
    border: 1px solid var(--ranking-border);
    border-radius: 5px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.ranking-hero-copy {
    padding: 24px;
}

.ranking-eyebrow,
.ranking-section-eyebrow,
.ranking-nav-eyebrow,
.ranking-highlight-race,
.ranking-spotlight-label,
.ranking-stat-label {
    display: inline-block;
    color: #f1b374;
    font-size: 0.8em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ranking-title {
    margin: 8px 0 10px;
    color: #ffffff;
    font-size: 2.3em;
    line-height: 1.05;
}

.ranking-description,
.ranking-section-copy,
.ranking-nav-note,
.ranking-highlight-meta,
.ranking-spotlight-meta,
.ranking-stat-label {
    color: var(--ranking-muted);
}

.ranking-description {
    max-width: 620px;
    font-size: 1.02em;
}

.ranking-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.ranking-stat-card {
    flex: 1 1 180px;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(35, 37, 38, 0.94) 0%, rgba(65, 67, 69, 0.94) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ranking-stat-value {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 1.55em;
}

.ranking-spotlight {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    overflow: hidden;
}

.ranking-spotlight::after {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.26), rgba(230, 126, 34, 0));
    pointer-events: none;
}

.slayer-spotlight {
    border-color: rgba(79, 135, 194, 0.35);
}

.vampire-spotlight {
    border-color: rgba(214, 90, 90, 0.35);
}

.ouster-spotlight {
    border-color: rgba(56, 161, 105, 0.35);
}

.ranking-spotlight-name {
    margin: 10px 0 8px;
    color: #ffffff;
    font-size: 1.85em;
    line-height: 1.1;
}

.ranking-spotlight-level {
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.ranking-spotlight-level-label {
    color: var(--ranking-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.82em;
}

.ranking-spotlight-level-value {
    color: var(--ranking-accent);
    font-size: 2.4em;
    line-height: 1;
}

.ranking-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.ranking-menu-button {
    appearance: none;
    width: 100%;
    padding: 0;
    border: none;
    text-align: left;
    color: inherit;
    cursor: pointer;
    background: none;
}

.ranking-menu-button:focus {
    outline: none;
}

.ranking-menu-button:focus-visible {
    outline: none;
    box-shadow: var(--btn-focus-ring);
}

.ranking-nav-card {
    --card-accent: var(--ranking-accent);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
    padding: 20px 18px 18px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ranking-nav-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid transparent;
    pointer-events: none;
    transition: border-color 0.2s ease;
}

.ranking-nav-card::before {
    content: "";
    position: absolute;
    inset: auto 18px 0 18px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
    opacity: 0.8;
}

.ranking-nav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}

.ranking-nav-card.active::after {
    border-color: var(--ranking-accent);
}

.ranking-nav-top10 {
    --card-accent: #e67e22;
}

.ranking-nav-all-slayer {
    --card-accent: #4f87c2;
}

.ranking-nav-all-vampire {
    --card-accent: #d65a5a;
}

.ranking-nav-all-ouster {
    --card-accent: #38a169;
}

.ranking-nav-badge {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ranking-nav-badge.popular {
    background: linear-gradient(90deg, #e74c3c 60%, #ff7675 100%);
}

.ranking-nav-badge.vip {
    background: linear-gradient(90deg, #2f80ed 0%, #56ccf2 100%);
}

.ranking-nav-title {
    color: #ffffff;
    font-size: 1.26em;
    font-weight: 700;
}

.ranking-nav-value {
    color: #ffffff;
    font-size: 2em;
    font-weight: 700;
    line-height: 1;
}

.ranking-nav-suffix {
    color: #f1b374;
    font-size: 0.46em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.ranking-nav-note {
    margin-top: auto;
    font-size: 0.9em;
    line-height: 1.45;
}

.ranking-sections-container {
    display: grid;
    gap: 18px;
}

.ranking-section {
    padding: 20px;
}

.ranking-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    padding-left: var(--ranking-table-gutter);
    padding-right: var(--ranking-table-gutter);
}

.ranking-section-title {
    margin-top: 6px;
    color: #ffffff;
    font-size: 1.75em;
}

.ranking-section-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(230, 126, 34, 0.28);
    background: rgba(230, 126, 34, 0.1);
    color: #f1b374;
    font-size: 0.86em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ranking-section-copy {
    margin-bottom: 16px;
    max-width: 760px;
    padding-left: var(--ranking-table-gutter);
    padding-right: var(--ranking-table-gutter);
}

.ranking-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
    padding-left: var(--ranking-table-gutter);
    padding-right: var(--ranking-table-gutter);
}

.ranking-highlight-card {
    --highlight-accent: var(--ranking-accent);
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 18px 18px;
    overflow: hidden;
}

.ranking-highlight-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--highlight-accent), transparent);
}

.slayer-highlight {
    --highlight-accent: var(--slayer-accent);
}

.vampire-highlight {
    --highlight-accent: var(--vampire-accent);
}

.ouster-highlight {
    --highlight-accent: var(--ouster-accent);
}

.ranking-highlight-badge {
    position: absolute;
    top: 12px;
    left: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 700;
}

.ranking-highlight-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-end;
    min-width: 0;
    padding-top: 28px;
}

.ranking-highlight-name {
    color: #ffffff;
    font-size: 1.28em;
    line-height: 1.15;
    word-break: break-word;
}

.ranking-highlight-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    text-align: right;
}

.ranking-highlight-level {
    color: #ffffff;
    font-size: 1.3em;
}

.ranking-table-container {
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(9, 9, 9, 0.42) 0%, rgba(16, 16, 16, 0.3) 100%);
}

.ranking-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    background: transparent;
    color: var(--ranking-text);
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
}

.ranking-th,
.ranking-td {
    padding: 12px var(--ranking-table-gutter);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ranking-th {
    background: rgba(255, 255, 255, 0.06);
    color: #f8d2a8;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ranking-td {
    color: var(--ranking-text);
}

.ranking-td strong {
    color: #ffffff;
}

.ranking-td-center {
    text-align: center;
}

.ranking-row {
    --race-color: rgba(255, 255, 255, 0.2);
}

.ranking-row td:first-child {
    border-left: 4px solid var(--race-color);
}

.ranking-row:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.ranking-row.slayer-row {
    --race-color: var(--slayer-accent);
    background: linear-gradient(90deg, rgba(79, 135, 194, 0.16), rgba(79, 135, 194, 0.03));
}

.ranking-row.vampire-row {
    --race-color: var(--vampire-accent);
    background: linear-gradient(90deg, rgba(214, 90, 90, 0.16), rgba(214, 90, 90, 0.03));
}

.ranking-row.ouster-row {
    --race-color: var(--ouster-accent);
    background: linear-gradient(90deg, rgba(56, 161, 105, 0.16), rgba(56, 161, 105, 0.03));
}

.ranking-empty-text,
.ranking-empty-cell {
    color: #b0b0b0;
}

.ranking-empty-cell {
    text-align: center;
}

.ranking-rank-img {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.pagination-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px 6px;
}

.pagination-link,
.pagination-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: var(--btn-compact-height);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border-radius: var(--btn-radius);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    letter-spacing: var(--btn-letter-spacing);
    line-height: 1;
    text-transform: uppercase;
}

.pagination-link {
    border: var(--btn-border);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    box-shadow: var(--btn-shadow), var(--btn-bottom-highlight);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, font-weight 0.2s ease;
}

.pagination-link:hover,
.pagination-link:focus {
    border-color: var(--btn-border-hover);
    background: var(--btn-bg-hover);
    color: var(--btn-text-hover);
    box-shadow: var(--btn-shadow-hover), var(--btn-bottom-highlight);
    font-weight: 700;
}

.pagination-link:focus {
    outline: none;
}

.pagination-link:focus-visible {
    outline: none;
    box-shadow: var(--btn-focus-ring), var(--btn-shadow), var(--btn-bottom-highlight);
}

.pagination-link.active {
    border-color: var(--btn-accent-border);
    background: var(--btn-accent-bg);
    color: var(--btn-accent-text);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.14), var(--btn-bottom-highlight);
    font-weight: 700;
}

.pagination-disabled {
    opacity: 0.42;
    pointer-events: none;
}

.pagination-dots {
    color: var(--ranking-muted);
}

@media (max-width: 1100px) {
    .ranking-hero {
        grid-template-columns: 1fr;
    }

    .ranking-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ranking-highlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .ranking-page {
        padding: 18px;
    }

    .ranking-title {
        font-size: 1.9em;
    }

    .ranking-menu,
    .ranking-highlight-grid {
        grid-template-columns: 1fr;
    }

    .ranking-section {
        padding: 16px;
    }

    .ranking-section-header {
        flex-direction: column;
    }

    .ranking-section-pill {
        align-self: flex-start;
    }
}

@media (max-width: 560px) {
    .ranking-page {
        padding: 16px 14px;
    }

    .ranking-hero-copy,
    .ranking-spotlight,
    .ranking-nav-card {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ranking-stat-card {
        flex-basis: 100%;
    }

    .ranking-nav-card {
        min-height: 180px;
    }

    .ranking-table {
        min-width: 540px;
    }

    .pagination-container {
        gap: 6px;
        padding-left: 0;
        padding-right: 0;
    }

    .pagination-link,
    .pagination-dots {
        min-width: 36px;
        padding: 8px 11px;
        font-size: 0.88em;
    }
}