.ranking-page { color: #eaf5ff; background: #071522; }
.ranking-page .site-header { background: rgba(250,252,253,.94); }
.ranking-hero { min-height: 320px; padding: 72px 10vw 48px; display: flex; align-items: end; justify-content: space-between; border-bottom: 1px solid rgba(124,190,232,.24); background: linear-gradient(125deg, rgba(17,66,104,.88), rgba(7,21,34,.6) 58%), url('../assets/background.png') center/cover; }
.ranking-kicker { margin: 0; color: #ff7864; font: 700 10px var(--body); letter-spacing: 1.7px; text-transform: uppercase; }
.ranking-hero h1, .podium-section h2, .vote-section h2 { margin: 14px 0 0; color: white; font-size: clamp(58px, 7vw, 100px); line-height: .8; }
.ranking-hero h1 em, .podium-section h2 em, .vote-section h2 em { color: #6dccff; }
.ranking-hero p:last-child { max-width: 330px; margin: 21px 0 0; color: #b8d2e2; font-size: 14px; line-height: 1.6; }
.vote-summary { min-width: 180px; padding: 18px 0 18px 22px; border-left: 1px solid rgba(109,204,255,.45); }
.vote-summary span { display: block; color: #6dccff; font: 800 54px var(--display); line-height: .8; }
.vote-summary small { display: block; margin-top: 10px; color: #a9c7db; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.podium-section, .vote-section { padding: 62px 10vw 70px; }
.podium-section { background: #091b2a; }
.section-heading, .vote-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.podium-heading { justify-content: center; text-align: center; }
.podium-heading > p:empty { display: none; }
.section-heading h2, .vote-section h2 { font-size: clamp(48px, 5vw, 72px); }
.section-heading > p, .vote-section-heading > p { max-width: 285px; margin: 0 0 6px; color: #a9c7db; font-size: 13px; line-height: 1.65; }
.ranking-podium { display: grid; grid-template-columns: 1fr 1.16fr 1fr; gap: 14px; align-items: end; margin-top: 36px; }
.podium-card { position: relative; overflow: hidden; border: 1px solid rgba(124,190,232,.28); background: #06131f; }
.podium-card img { display: block; width: 100%; height: 380px; object-fit: contain; background: #f6f8fb; }
.podium-rank-1 { order: 2; border-color: #ffcf63; box-shadow: 0 0 28px rgba(255,207,99,.2); }
.podium-rank-1 img { height: 460px; }
.podium-rank-2 { order: 1; }
.podium-rank-3 { order: 3; }
.podium-caption { display: flex; align-items: center; gap: 10px; padding: 15px 17px; background: #0d314d; }
.podium-rank-1 .podium-caption { background: #17445f; }
.podium-caption span { color: #ff7864; font: 800 20px var(--display); }
.podium-caption h3 { flex: 1; margin: 0; color: white; font: 700 26px var(--display); text-transform: uppercase; }
.podium-caption strong { color: #8fcbef; font-size: 10px; }
.vote-section { background: #071522; }
.ranking-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgba(124,190,232,.25); background: rgba(5,22,36,.7); }
.ranking-tab { min-width: 100px; padding: 9px 13px; border: 0; color: #a9c7db; background: transparent; font: 700 11px var(--body); letter-spacing: .7px; text-transform: uppercase; }
.ranking-tab.active { color: #071522; background: #6dccff; }
.vote-section-heading { margin-top: 28px; }
.ranking-vote-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
.vote-card { min-height: 84px; padding: 8px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid rgba(124,190,232,.24); background: rgba(10,41,68,.72); }
.vote-card.selected { border-color: #ff7864; box-shadow: inset 0 0 0 1px rgba(255,120,100,.25); }
.vote-card > img { width: 58px; height: 64px; object-fit: cover; object-position: center 18%; }
.vote-card strong, .vote-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote-card strong { color: white; font: 700 19px var(--display); text-transform: uppercase; }
.vote-card small { margin-top: 4px; color: #8fcbef; font-size: 9px; }
.vote-card button { padding: 7px 9px; border: 1px solid rgba(109,204,255,.45); color: #d9f3ff; background: transparent; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.vote-card.selected button, .vote-card button:hover { border-color: #ff7864; color: white; background: #ff7864; }
@media (max-width: 900px) { .ranking-vote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .podium-card img { height: 300px; } .podium-rank-1 img { height: 360px; } }
@media (max-width: 760px) { .ranking-hero { min-height: 265px; padding: 44px 7vw 32px; } .vote-summary { display: none; } .podium-section, .vote-section { padding: 44px 7vw 50px; } .section-heading, .vote-section-heading { display: block; } .section-heading > p, .vote-section-heading > p { margin-top: 17px; } .ranking-podium { grid-template-columns: 1fr; } .podium-rank-1, .podium-rank-2, .podium-rank-3 { order: initial; } .podium-card img, .podium-rank-1 img { height: auto; max-height: 480px; } .ranking-vote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vote-card { grid-template-columns: 48px minmax(0, 1fr); } .vote-card > img { width: 48px; height: 58px; } .vote-card button { grid-column: 1 / -1; width: 100%; } }