.top-page { max-width: 1200px; padding: 24px 48px 64px; margin: auto; }
.top-hero { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; min-height: 250px; display: flex; align-items: center; background: #121319; }
.top-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.top-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #101116f5 10%, #101116a0 60%, #10111645), linear-gradient(0deg, #101116a0, transparent); }
.top-hero-copy { padding: 32px 36px; }
.top-hero h1 { margin: 0; font: 800 clamp(38px, 5vw, 58px)/1.1 'Barlow Condensed', sans-serif; }
.top-hero-copy > p:not(.eyebrow) { color: #d5d5df; font-size: 13px; margin: 14px 0; line-height: 1.6; }
.top-example { color: #a7a8b6; font-size: 11px; }
.rank-navigation { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 14px 18px; margin: 24px 0; border: 1px solid var(--border); border-radius: 10px; background: #111218f5; backdrop-filter: blur(12px); }
.rank-navigation-label { color: var(--muted); font-size: 12px; }
#rank-links { display: flex; gap: 8px; flex: 1; justify-content: flex-end; }
.rank-jump { min-width: 34px; height: 34px; display: grid; place-items: center; color: #bcbcca; border: 1px solid transparent; border-radius: 6px; font: 700 18px 'Barlow Condensed', sans-serif; }
.rank-jump:hover, .rank-jump.active { color: white; background: #921b3133; border-color: var(--accent); }
.ranking-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.rank-entry { --rank-color: #9293a3; scroll-margin-top: 90px; }
.rank-card { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); border: 1px solid var(--border); border-radius: 13px; background: #121319; overflow: hidden; }
.rank-number { display: flex; align-items: center; justify-content: center; padding: 14px 8px; border-right: 1px solid var(--border); background: #0f1016; color: var(--rank-color); font: 800 48px/1 'Barlow Condensed', sans-serif; }
.rank-number small { font-size: 22px; margin-right: 2px; font-weight: 700; opacity: .7; }
.rank-content { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.rank-media { position: relative; background: #191a21; min-height: 200px; aspect-ratio: 16 / 10; align-self: stretch; }
.rank-media img, .rank-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.rank-media video { position: absolute; inset: 0; object-fit: contain; background: black; }
.clip-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #08090b45; }
.clip-placeholder .clip-play { display: grid; place-items: center; width: 46px; height: 36px; padding-left: 2px; background: #181920e8; border: 1px solid #ffffff30; border-radius: 8px; color: white; }
.clip-placeholder .clip-note { padding: 5px 8px; background: #08090bce; border-radius: 5px; color: #ededf1; font-size: 11px; }
.rank-copy { padding: 24px; align-self: center; min-width: 0; }
.rank-copy h2 { margin: 0; font: 700 29px/1.15 'Barlow Condensed', sans-serif; overflow-wrap: anywhere; }
.rank-genres { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.rank-genres span { border: 1px solid #37303a; border-radius: 5px; padding: 4px 7px; color: #c6bac5; background: #921b3117; font-size: 11px; }
.rank-description { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.podium-label { margin: 0 0 10px; color: var(--rank-color); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.rank-entry.bronze { --rank-color: #c28b64; }
.rank-entry.silver { --rank-color: #c6d0dc; }
.rank-entry.gold { --rank-color: #e2bc63; }
.rank-entry.bronze .rank-card { border-color: #8f624640; box-shadow: inset 0 0 0 1px #c28b6420; }
.rank-entry.silver .rank-card { border-color: #c6d0dc60; box-shadow: 0 0 20px #c6d0dc08; }
.rank-entry.gold .rank-card { border-color: #e2bc6390; box-shadow: 0 0 28px #e2bc6314; }
.rank-entry.bronze .rank-number { font-size: 56px; background: #c28b640a; }
.rank-entry.silver .rank-number { font-size: 64px; background: #c6d0dc0a; }
.rank-entry.gold .rank-number { font-size: 76px; background: #e2bc630d; }
.rank-entry.gold .rank-copy h2 { font-size: 34px; }
.rank-jump.bronze { color: #c28b64; }
.rank-jump.silver { color: #c6d0dc; }
.rank-jump.gold { color: #e2bc63; }
@media (max-width: 850px) {
  .top-page { padding: 22px 22px 48px; }
  .rank-card { grid-template-columns: 60px minmax(0, 1fr); }
  .rank-copy { padding: 18px; }
  .rank-copy h2 { font-size: 25px; }
  .rank-number { font-size: 40px; }
  .rank-navigation { gap: 10px; padding: 10px; }
  #rank-links { gap: 3px; }
}
@media (max-width: 600px) {
  .top-hero-copy { padding: 26px 22px; }
  .rank-navigation { flex-direction: column; align-items: stretch; gap: 5px; }
  .rank-navigation-label { font-size: 11px; }
  #rank-links { justify-content: flex-start; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: thin; padding: 4px 2px 7px; }
  .rank-jump { min-width: 32px; flex: 0 0 32px; height: 32px; font-size: 16px; }
  .rank-card { display: block; }
  .rank-number { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 8px 10px; border: 1px solid #ffffff30; border-radius: 8px; background: #101116e8 !important; font-size: 32px; }
  .rank-number small { font-size: 16px; }
  .rank-content { display: flex; flex-direction: column; }
  .rank-media { min-height: 0; width: 100%; aspect-ratio: 16 / 9; }
  .rank-copy { padding: 18px; }
  .rank-copy h2 { font-size: 28px; }
  .rank-entry.bronze .rank-number { font-size: 36px; }
  .rank-entry.silver .rank-number { font-size: 40px; }
  .rank-entry.gold .rank-number { font-size: 46px; }
  .rank-entry { scroll-margin-top: 90px; }
}