.ranking-page { background: radial-gradient(ellipse 850px 760px at 55% 180px, #65574750, transparent), #172236; }
.ranking-page .page-stars { max-height: 1100px; }
.ranking-page main { max-width: 1100px; }
.ranking-context { color: #b7bcc8; font-size: 11px; line-height: 1.8; margin: 16px 0 48px; }
.ranking-context a { color: #dfcfb8; margin-left: 6px; text-underline-offset: 4px; }
.ranking-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 24px; }
h2 { font: 36px/1.1 var(--serif); margin: 0; font-weight: 400; }
#results-count { color: #b7bcc8; font-size: 11px; margin: 8px 0 0; }
.ranking-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 24px; padding: 0 16px; }
.ranking-search svg { width: 16px; height: 16px; stroke: #bdc4cf; fill: none; stroke-width: 1.5; }
.ranking-search input { background: transparent; border: 0; min-height: 46px; width: 210px; font-size: 12px; }
.ranking-search input::placeholder { color: #aeb7c5; }
.your-city { padding: 15px 18px; margin-bottom: 18px; border-left: 2px solid #edcb9d; background: linear-gradient(90deg,#f0c48d0d,transparent); font-size: 12px; line-height: 1.8; color: #c8cdd6; }
.your-city a { color: #ffe0a9; text-underline-offset: 4px; }
.your-city strong { font-weight: 500; color: #f7eedc; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { text-align: left; color: #c5c7cc; font-size: 10px; font-weight: 400; padding: 0 10px 18px; vertical-align: bottom; }
th span { display: block; color: #929fb2; font-size: 7px; letter-spacing: 1px; margin-top: 8px; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
.rank-col { width: 7%; }
.season-col { width: 28%; }
.score-col { width: 20%; text-align: right; }
.average-col { width: 17%; text-align: right; }
td { border-top: 1px solid #f6e7ce17; padding: 19px 10px; }
.city-rank { color: #9eabbd; font-size: 12px; font-variant-numeric: tabular-nums; }
tr[data-podium] .city-rank { color: #edcb9d; }
.city-name { font: 25px var(--serif); text-decoration: none; }
.city-name:hover { color: #ffe0a9; text-decoration: underline; text-underline-offset: 5px; }
.city-country { display: block; color: #9faabc; font-size: 10px; margin-top: 5px; }
.score { text-align: right; color: #f4d4a5; font: 30px var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.daily-average { text-align: right; font-size: 11px; color: #b7c0cd; font-variant-numeric: tabular-nums; }
.season-bars { width: 100%; max-width: 190px; height: 45px; display: block; overflow: visible; }
.season-bars rect { fill: #e7c596; opacity: .68; }
.season-bars .bar-tip { fill: #fff0cd; opacity: .8; }
.empty-results { padding: 50px 0; color: #c8cdd6; text-align: center; }
.ranking-method { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; padding: 50px 0 45px; margin-top: 36px; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.ranking-method > .eyebrow { grid-column: 1/-1; color: #d9c3a8; margin: 0 0 18px; }
.ranking-method h2 { font-size: 40px; line-height: 1.15; }
.ranking-method h2 em { color: #edcb9d; }
.ranking-method p:not(.eyebrow) { color: #b7c0cd; font-size: 12px; line-height: 1.9; margin-top: 0; }
.ranking-method details { margin-top: 20px; }
.ranking-method summary { cursor: pointer; color: #e8d5b6; font-size: 12px; padding: 10px 0; }
.ranking-method details p { margin: 12px 0; }
.ranking-method a { text-underline-offset: 3px; }
.ranking-page footer { margin: 0; }
@media(max-width:1050px) { .season-col { width: 25%; } .average-col { width: 15%; } .ranking-method { column-gap: 35px; } }
@media(max-width:720px) {
 .ranking-context { font-size: 10px; margin-bottom: 32px; }
 .ranking-toolbar { align-items: stretch; flex-direction: column; gap: 18px; }
 .ranking-toolbar h2 { font-size: 32px; }
 .ranking-search input { width: 100%; font-size: 16px; }
 .ranking-search { width: 100%; }
 .your-city { font-size: 11px; padding: 12px; }
 .rank-col { width: 11%; }
 .season-col { width: 23%; font-size: 0; }
 .season-col span { font-size: 7px; line-height: 1.6; letter-spacing: .3px; }
 .score-col { width: 25%; font-size: 9px; }
 .average-col, .daily-average { display: none; }
 th { padding: 0 5px 14px; }
 td { padding: 18px 5px; }
 .city-rank { font-size: 10px; }
 .city-name { font-size: 22px; }
 .city-country { font-size: 9px; }
 .score { font-size: 27px; }
 .season-bars { height: 36px; }
 .ranking-method { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; margin-top: 24px; }
 .ranking-method > .eyebrow { margin: 0; }
 .ranking-method h2 { font-size: 34px; }
}

.ranking-filters { display: flex; align-items: center; gap: 12px; }
.year-control select { min-height: 48px; min-width: 94px; border: 1px solid var(--line); border-radius: 24px; background: #15223555; padding: 0 12px; color: #f3dfbe; font-size: 12px; }
@media(max-width:720px) {
 .ranking-filters { width: 100%; gap: 10px; }
 .ranking-filters .ranking-search { flex: 1; min-width: 0; padding: 0 12px; }
 .ranking-filters .ranking-search input { min-width: 0; font-size: 14px; }
}

.ranking-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; }
.ranking-pagination button { min-height: 44px; padding: 10px 18px; border: 1px solid #fff2dc40; border-radius: 24px; color: #f4e3c9; background: #1f2b3c25; font-size: 11px; }
.ranking-pagination button:hover:not(:disabled) { background: #fff0d526; }
.ranking-pagination button:disabled { cursor: default; }
#ranking-page-status { color: #b7c0cd; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
#rankings-title { scroll-margin-top: 24px; }
#rankings-title:focus { outline: none; }
@media(max-width:400px) { .ranking-pagination { gap: 8px; } .ranking-pagination button { padding: 10px 13px; } #ranking-page-status { font-size: 10px; } }