.ranking-preview { padding-top: 20px; }
.ranking-preview-card,
.fairness-card,
.rules-limits-shell {
    display: grid;
    gap: clamp(28px, 6vw, 80px);
    border: 1px solid var(--line);
    border-radius: 28px;
}
.ranking-preview-card {
    grid-template-columns: 1.05fr .95fr;
    padding: clamp(30px, 6vw, 70px);
    background: radial-gradient(circle at 85% 18%, rgba(255, 189, 69, .15), transparent 28%), linear-gradient(135deg, #112719, #08120c);
}
.ranking-preview-copy h2,
.rules-heading h2,
.fairness-card h2,
.ranking-final-cta h2 {
    margin: 14px 0;
    font-family: var(--display);
    font-size: clamp(42px, 5.3vw, 68px);
    font-style: italic;
    line-height: .93;
    letter-spacing: -.04em;
    text-transform: uppercase;
}
.ranking-preview-copy h2 em,
.rules-heading h2 em,
.fairness-card h2 em,
.ranking-final-cta h2 em { color: var(--gold); font-style: inherit; }
.ranking-preview-copy p { max-width: 560px; color: var(--muted); }
.ranking-preview-link,
.ranking-hero-link { color: var(--green); font-weight: 900; text-decoration: none; }
.ranking-preview-link span,
.ranking-hero-link span { margin-left: 6px; font-size: 20px; }
.ranking-preview-stats { display: grid; gap: 12px; }
.ranking-preview-stats div { display: grid; align-content: center; min-height: 94px; padding: 15px 20px; background: rgba(6, 16, 11, .72); border: 1px solid rgba(183, 255, 199, .12); border-radius: 15px; }
.ranking-preview-stats strong { color: var(--gold); font-family: var(--display); font-size: 29px; font-style: italic; line-height: 1; }
.ranking-preview-stats span { margin-top: 5px; color: #afc0b4; font-size: 12px; }

.ranking-rules-page { background: #07100b; }
.ranking-header { position: relative; background: rgba(5, 15, 9, .92); border-bottom: 1px solid var(--line); }
.ranking-nav { display: flex; align-items: center; gap: 21px; color: #c3d1c7; font-size: 13px; font-weight: 800; }
.ranking-nav a { text-decoration: none; }
.ranking-hero { position: relative; overflow: hidden; padding: 125px 20px 115px; background: radial-gradient(circle at 50% -10%, rgba(83, 236, 106, .26), transparent 40%), linear-gradient(145deg, #0d2818, #06100b 65%); text-align: center; }
.ranking-hero-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(100,237,121,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(100,237,121,.1) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 50% 30%, black, transparent 73%); }
.ranking-hero-shell { position: relative; width: min(780px, 100%); margin: auto; }
.ranking-badge { display: inline-block; padding: 8px 13px; color: #0a1a0e; background: var(--green); border-radius: 99px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ranking-hero h1 { margin: 24px 0 18px; font-family: var(--display); font-size: clamp(50px, 7vw, 86px); font-style: italic; line-height: .9; letter-spacing: -.05em; text-transform: uppercase; }
.ranking-hero h1 em { color: var(--gold); font-style: inherit; }
.ranking-hero p { max-width: 650px; margin: 0 auto; color: #bdccc1; font-size: clamp(16px, 2vw, 19px); }
.ranking-hero-link { display: inline-block; margin-top: 32px; }
.rules-section { width: min(1120px, calc(100% - 40px)); margin: auto; padding: 100px 0; }
.rules-heading { max-width: 660px; }
.rules-heading > p { color: var(--muted); font-size: 16px; }
.rules-heading.centered { margin-inline: auto; text-align: center; }
.rules-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: none; }
.rules-steps li { display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 14px; min-height: 88px; padding: 16px; color: #d4dfd7; background: #0d1c12; border: 1px solid var(--line); border-radius: 15px; font-size: 14px; }
.rules-steps b { display: grid; place-items: center; width: 35px; height: 35px; color: #07100b; background: var(--green); border-radius: 50%; font-size: 10px; }
.rules-points { max-width: none; width: 100%; padding-inline: max(20px, calc((100% - 1120px) / 2)); background: linear-gradient(180deg, #07100b, #0b1c11); border-block: 1px solid var(--line); }
.points-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; margin-top: 45px; }
.points-side { display: grid; gap: 16px; }
.points-card { padding: clamp(24px, 4vw, 38px); background: linear-gradient(145deg, rgba(20, 46, 29, .94), rgba(9, 22, 14, .96)); border: 1px solid var(--line); border-radius: 21px; }
.points-card-match { min-height: 100%; }
.points-card-title { display: flex; align-items: center; gap: 13px; }
.points-card-title > span { display: grid; place-items: center; width: 46px; height: 46px; background: rgba(100,237,121,.12); border-radius: 13px; font-size: 23px; }
.points-card-title small { color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.points-card-title h3 { margin: 2px 0 0; font-size: 23px; }
.points-card dl { margin: 28px 0 0; }
.points-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(183,255,199,.1); }
.points-card dt { color: #cad7ce; font-size: 14px; }
.points-card dd { margin: 0; color: var(--gold); font-weight: 900; white-space: nowrap; }
.compact-card { padding-block: 25px; }
.compact-card dl { margin-top: 18px; }
.compact-card dl div { padding: 7px 0; }
.points-note { margin: 24px 0 0; color: #aebfb4; font-size: 13px; }
.points-note strong { color: var(--green); }
.rules-disclaimer { margin: 24px auto 0; color: #879d8b; font-size: 12px; text-align: center; }
.challenge-section { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 65px; }
.challenge-grid { display: grid; gap: 12px; }
.challenge-grid article { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 15px; padding: 18px 20px; background: rgba(16, 35, 23, .75); border: 1px solid var(--line); border-radius: 15px; }
.challenge-grid article > span { font-size: 25px; grid-row: span 2; }
.challenge-grid small { color: #9daf9f; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.challenge-grid h3 { margin: 2px 0 0; font-size: 15px; }
.challenge-grid b { grid-column: 3; grid-row: 1 / span 2; color: var(--gold); font-size: 17px; }
.rules-fairness { padding-top: 10px; }
.fairness-card { grid-template-columns: 1fr .9fr; padding: clamp(30px, 6vw, 68px); background: radial-gradient(circle at 15% 80%, rgba(255,189,69,.13), transparent 27%), #102319; }
.fairness-card p { color: #afc0b4; }
.fairness-card ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.fairness-card li { display: grid; gap: 4px; padding: 15px; background: rgba(5, 15, 9, .58); border-radius: 12px; }
.fairness-card strong { color: var(--green); font-size: 13px; }
.fairness-card span { color: #a8baad; font-size: 13px; }
.prizes-section { padding-bottom: 110px; }
.prizes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 43px; }
.prizes-grid article { min-height: 220px; padding: 25px; background: linear-gradient(145deg, #12271a, #0b1710); border: 1px solid var(--line); border-radius: 17px; text-align: center; }
.prizes-grid span { font-size: 35px; }
.prizes-grid h3 { margin: 18px 0 8px; font-size: 18px; }
.prizes-grid p { margin: 0; color: #9daf9f; font-size: 12px; }
.prizes-note { margin: 22px 0 0; color: #829485; font-size: 12px; text-align: center; }
.rules-limits { padding: 0 20px 100px; }
.rules-limits-shell { grid-template-columns: 55px 1fr; width: min(850px, 100%); margin: auto; padding: 25px 30px; color: #d9e5dc; background: rgba(255, 189, 69, .08); border-color: rgba(255,189,69,.22); }
.rules-limits-shell > span { font-size: 35px; }
.rules-limits-shell h2 { margin: 0 0 5px; color: var(--gold); font-size: 18px; }
.rules-limits-shell p { margin: 0; color: #b6c5ba; font-size: 13px; }
.ranking-final-cta { display: grid; place-items: center; min-height: 500px; padding: 70px 20px; background: radial-gradient(circle, rgba(100,237,121,.18), transparent 37%), linear-gradient(145deg, #0b2314, #050a07); text-align: center; }
.ranking-final-cta > div { display: grid; justify-items: center; }
.ranking-final-cta img { margin-bottom: 22px; border-radius: 19px; box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.ranking-final-cta h2 { margin-top: 16px; }

@media (max-width: 850px) {
    .ranking-preview-card, .points-layout, .challenge-section, .fairness-card { grid-template-columns: 1fr; }
    .rules-steps { grid-template-columns: 1fr; }
    .prizes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .ranking-nav { gap: 12px; font-size: 11px; }
    .ranking-nav .nav-download { padding: 9px 11px; }
    .ranking-hero { padding: 80px 20px; }
    .rules-section { width: min(100% - 30px, 1120px); padding: 70px 0; }
    .rules-points { width: 100%; padding-inline: 15px; }
    .challenge-grid article { grid-template-columns: 36px 1fr; }
    .challenge-grid b { grid-column: 2; grid-row: auto; }
    .prizes-grid { grid-template-columns: 1fr; }
    .prizes-grid article { min-height: auto; }
    .rules-limits { padding: 0 15px 70px; }
    .rules-limits-shell { grid-template-columns: 1fr; gap: 9px; padding: 22px; }
}