/* Standalone ranking, with the same palette as the studio's game cards. */
.rating-body { font-family: 'Manrope', sans-serif; }
.rating-page { padding-top: 24px; padding-bottom: 30px; --rating-soft: #8798ba; }
.rating-page h2, .rating-page h3 { color: var(--text); }
.rating-hero { padding: 20px 30px; border: 1px solid rgba(76,200,255,.22); border-radius: 20px; background: radial-gradient(ellipse at 95% 30%,rgba(76,200,255,.13),transparent 55%),linear-gradient(145deg,rgba(21,26,48,.94),rgba(12,17,32,.9)); position: relative; overflow: hidden; }
.rating-header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.rating-header-content { display: grid; grid-template-columns: minmax(0,1fr) 140px; align-items: center; gap: 16px; }
.rating-language { color: var(--brand-2); border: 1px solid rgba(126,247,197,.25); background: rgba(126,247,197,.04); border-radius: 8px; padding: 6px 10px; font: 700 10px 'Manrope', sans-serif; cursor: pointer; white-space: nowrap; }
.rating-language:hover { background: rgba(126,247,197,.12); }
.rating-hero-copy { position: relative; z-index: 1; }
.rating-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--brand-2); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rating-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 12px rgba(126,247,197,.5); flex-shrink: 0; }
.rating-hero h1 { font-size: clamp(1.7rem,3vw,2.3rem); line-height: 1.2; letter-spacing: -.045em; margin-bottom: 10px; font-weight: 800; }
.rating-gradient { background: linear-gradient(95deg,#8ee6ff,#7ef7c5); background-clip: text; -webkit-background-clip: text; color: transparent; }
.rating-hero p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.rating-hero-art { height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.rating-trophy { width: 90px; height: 90px; z-index: 1; transform: rotate(-8deg); filter: drop-shadow(0 6px 15px rgba(74,226,201,.2)); }
.rating-orbit { position: absolute; border: 1px solid rgba(126,247,197,.12); width: 108px; height: 108px; border-radius: 50%; }
.rating-orbit-two { width: 88px; height: 88px; border-style: dashed; border-color: rgba(76,200,255,.18); }
.rating-art-star { position: absolute; color: var(--brand-2); font-size: 15px; }
.rating-art-star-one { top: 10px; right: 4px; }
.rating-art-star-two { bottom: 22px; left: 5px; color: var(--brand); font-size: 12px; }
.rating-art-caption { position: relative; z-index: 1; display: flex; gap: 4px; align-items: baseline; color: #9fc4d2; letter-spacing: .1em; font-size: 7px; line-height: 1; }
.rating-art-caption strong { font-size: 16px; color: #e5fff6; letter-spacing: -.03em; }
.rating-leaders-section { margin-top: 28px; }
.rating-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.rating-kicker { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; color: var(--rating-soft); font-weight: 700; margin-bottom: 6px; }
.rating-section-heading h2 { font-size: 25px; font-weight: 800; line-height: 1.3; letter-spacing: -.035em; }
.rating-heading-note, .rating-order-note { color: var(--rating-soft); font-size: 11px; padding-bottom: 3px; }
.rating-order-note > span:first-child { color: var(--brand-2); margin-right: 5px; }
.rating-podium { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.rating-leader { --leader-accent: #7ef7c5; display: flex; flex-direction: column; min-width: 0; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(ellipse at 80% 0%,rgba(76,200,255,.06),transparent 70%),linear-gradient(145deg,#151c32,#101626); position: relative; overflow: hidden; transition: border-color .2s,transform .2s; }
.rating-leader::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 2px; background: linear-gradient(90deg,transparent,var(--leader-accent),transparent); opacity: .6; }
.rating-leader:hover { transform: translateY(-4px); border-color: rgba(76,200,255,.5); }
.rating-leader-1 { border-color: rgba(126,247,197,.42); background: radial-gradient(ellipse at 80% 0%,rgba(126,247,197,.12),transparent 70%),linear-gradient(145deg,#142830,#101c29); }
.rating-leader-2 { --leader-accent: #a7b8ff; background: radial-gradient(ellipse at 80% 0%,rgba(129,149,255,.11),transparent 70%),linear-gradient(145deg,#1b2037,#121627); }
.rating-leader-3 { --leader-accent: #ffd580; background: radial-gradient(ellipse at 80% 0%,rgba(255,213,128,.08),transparent 70%),linear-gradient(145deg,#222333,#141827); }
.rating-leader-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; margin-bottom: 16px; }
.rating-award { color: var(--leader-accent); font-size: 10px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rating-leader-rank { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; flex-shrink: 0; border: 1px solid rgba(175,189,223,.15); border-radius: 8px; background: rgba(255,255,255,.035); font-weight: 800; font-size: 13px; color: var(--leader-accent); line-height: 1; font-variant-numeric: tabular-nums; }
.rating-leader-main { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 14px; align-items: center; min-width: 0; }
.rating-leader-info { min-width: 0; }
.rating-leader-cover { width: 64px; height: 64px; border-radius: 15px; border: 1px solid rgba(255,255,255,.18); object-fit: cover; box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.rating-leader-genre { display: block; font-size: 9px; line-height: 16px; height: 16px; color: var(--rating-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rating-leader h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; font-size: 18px; line-height: 1.3; font-weight: 800; letter-spacing: -.025em; margin: 0 0 5px; overflow-wrap: anywhere; }
.rating-leader-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid rgba(175,189,223,.13); padding-top: 14px; margin-top: 18px; min-height: 49px; }
.rating-leader-score { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rating-leader-score > span:first-child { color: #ffd580; font-size: 14px; }
.rating-leader-score strong { font-size: 23px; line-height: 1; letter-spacing: -.03em; }
.rating-leader-votes { min-width: 0; color: var(--rating-soft); font-size: 10px; text-align: right; line-height: 1.4; overflow-wrap: anywhere; }
.rating-leader-downloads { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-top: 7px; color: var(--rating-soft); font-size: 9px; line-height: 1.5; }
.rating-leader-downloads > span:first-child { color: #d3e1f3; font-size: 11px; font-weight: 700; }
.rating-scroll-anchor { display: block; position: relative; top: 32px; scroll-margin-top: 16px; }
.rating-list-section { margin-top: 32px; }
.rating-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.rating-page .rating-filter { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 9px 18px; border-radius: 9px; border: 1px solid rgba(175,189,223,.15); background: rgba(21,26,48,.5); color: var(--muted); font-size: 12px; font-weight: 700; transition: color .2s,border-color .2s,background .2s; }
.rating-page .rating-filter:hover { color: #eefbff; border-color: var(--brand); }
.rating-page .rating-filter.is-active { color: #0c201f; background: var(--brand-2); border-color: var(--brand-2); }
.rating-layout { display: block; }
.rating-results { min-width: 0; }
.rating-results-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--rating-soft); font-size: 10px; margin-bottom: 13px; }
.rating-results-meta > span:last-child { color: #b2c5dd; }
.rating-list { display: flex; flex-direction: column; gap: 10px; }
.rating-row { display: grid; grid-template-columns: 26px 64px minmax(0,1fr) auto 76px 65px; align-items: center; gap: 15px; padding: 20px 18px; border: 1px solid rgba(175,189,223,.14); background: linear-gradient(125deg,rgba(21,26,48,.9),rgba(15,21,39,.9)); border-radius: 14px; transition: border-color .2s,background .2s,transform .2s; scroll-margin-top: 100px; }
.rating-row:hover { border-color: rgba(76,200,255,.48); background: linear-gradient(125deg,#1a233c,#131e32); transform: translateX(3px); }
.rating-row-top { border-color: rgba(126,247,197,.24); }
.rating-row-rank { font-weight: 800; font-size: 16px; color: #7d8bab; text-align: center; font-variant-numeric: tabular-nums; }
.rating-row-top .rating-row-rank { color: var(--brand-2); }
.rating-row-cover { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); }
.rating-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 3px; }
.rating-row-title h3 { font-size: 14px; font-weight: 800; line-height: 1.4; letter-spacing: -.02em; overflow-wrap: anywhere; }
.rating-row-genre { font-size: 8px; color: #9edff4; background: rgba(76,200,255,.08); padding: 2px 7px; border: 1px solid rgba(76,200,255,.14); border-radius: 5px; max-width: 100%; overflow-wrap: anywhere; }
.rating-row-studio { font-size: 9px; color: var(--rating-soft); margin-bottom: 5px; overflow-wrap: anywhere; }
.rating-row-info p { font-size: 10px; color: #a3b1cc; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rating-empty { padding: 24px; border: 1px solid rgba(175,189,223,.14); border-radius: 14px; color: var(--rating-soft); background: rgba(21,26,48,.7); }
.rating-platforms { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rating-page .rating-platform-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid rgba(175,189,223,.22); border-radius: 10px; background: rgba(255,255,255,.035); color: #c8d7ed; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: border-color .2s,background .2s,color .2s; }
.rating-platform-link svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.rating-leader-platforms { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; gap: 6px; margin-top: 14px; }
.rating-page .rating-platform-web { color: #85d9ff; }
.rating-page .rating-platform-android { color: #96e5b1; }
.rating-page .rating-platform-ios { color: #e0e6ff; }
.rating-page .rating-platform-link:hover { color: #fff; border-color: var(--brand); background: rgba(76,200,255,.12); }
.rating-page .rating-platform-link:active { background: rgba(126,247,197,.15); }
.rating-row-score { text-align: center; font-variant-numeric: tabular-nums; }
.rating-row-score > div { white-space: nowrap; }
.rating-row-score > div > span { color: #ffd580; font-size: 11px; }
.rating-row-score strong { font-size: 19px; letter-spacing: -.04em; }
.rating-row-score small, .rating-row-downloads small { display: block; font-size: 8px; color: var(--rating-soft); margin-top: 2px; }
.rating-row-downloads { text-align: right; white-space: nowrap; }
.rating-row-downloads strong { font-size: 11px; font-weight: 700; color: #d3e1f3; }
.rating-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.rating-page .rating-page-link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 36px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 700; background: #121a2c; transition: border-color .2s,color .2s; }
.rating-page .rating-page-link:hover { border-color: var(--brand-2); color: #fff; }
.rating-page .rating-page-link.is-current { background: var(--brand-2); color: #0b2220; border-color: var(--brand-2); }
.rating-page .rating-page-link.is-disabled { opacity: .35; cursor: default; }
.rating-page .rating-page-arrow { font-size: 16px; }
.rating-page-info { font-size: 10px; color: var(--rating-soft); text-align: center; margin-top: 12px; }
.rating-bottom-note { display: flex; align-items: center; justify-content: center; gap: 10px; border-top: 1px solid rgba(175,189,223,.12); margin-top: 48px; padding-top: 26px; font-size: 11px; color: var(--rating-soft); text-align: center; }
.rating-bottom-note > span:first-child { color: var(--brand-2); font-size: 17px; }
.rating-page a:focus-visible, .rating-page button:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 4px; }
@media (max-width: 1050px) {
    .rating-leader { padding: 18px; }
    .rating-leader-cover { width: 64px; height: 64px; border-radius: 14px; }
    .rating-leader-main { gap: 12px; }
    .rating-leader h3 { font-size: 18px; }
    .rating-leader-downloads { font-size: 8px; }
}
@media (max-width: 768px) {
    .rating-page { padding-top: 12px; }
    .rating-hero { padding: 14px 18px; border-radius: 16px; }
    .rating-header-top { margin-bottom: 12px; }
    .rating-header-content { grid-template-columns: minmax(0,1fr) 76px; gap: 10px; }
    .rating-eyebrow { font-size: 8px; letter-spacing: .03em; gap: 6px; }
    .rating-language { padding: 5px 7px; font-size: 8px; }
    .rating-hero h1 { font-size: clamp(1.35rem,3.5vw,1.8rem); margin-bottom: 8px; }
    .rating-hero p { font-size: 10px; }
    .rating-hero-art { height: 76px; }
    .rating-trophy { width: 66px; height: 66px; }
    .rating-orbit { width: 76px; height: 76px; }
    .rating-orbit-two { width: 62px; height: 62px; }
    .rating-art-star-one { top: 3px; right: -3px; font-size: 12px; }
    .rating-art-star-two { bottom: 18px; left: -3px; font-size: 10px; }
    .rating-art-caption strong { font-size: 12px; }
    .rating-leaders-section { margin-top: 22px; }
    .rating-heading-note { display: none; }
    .rating-section-heading { margin-bottom: 13px; }
    .rating-section-heading h2 { font-size: 20px; }
    .rating-list-section .rating-section-heading { flex-direction: column; align-items: flex-start; gap: 5px; }
    .rating-list-section .rating-kicker { display: none; }
    .rating-list-section .rating-order-note { max-width: none; text-align: left; }
    .rating-podium { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    .rating-leader { padding: 18px 8px 12px; border-radius: 14px; text-align: center; }
    .rating-leader::before { left: 10px; right: 10px; }
    .rating-leader-main { display: flex; flex-direction: column; gap: 10px; }
    .rating-leader-main > div { width: 100%; min-width: 0; }
    .rating-leader-cover { width: 46px; height: 46px; border-radius: 12px; }
    .rating-leader h3 { -webkit-line-clamp: 3; min-height: 3.9em; font-size: 12px; line-height: 1.3; margin: 0; }
    .rating-leader-top { position: absolute; top: 7px; right: 6px; margin: 0; min-height: 0; }
    .rating-leader-rank { width: auto; height: auto; padding: 0; border: 0; background: none; font-size: 10px; }
    .rating-award, .rating-leader-genre, .rating-leader-downloads { display: none; }
    .rating-leader-bottom { flex-direction: column; justify-content: flex-start; gap: 5px; margin-top: 10px; padding-top: 10px; min-height: 48px; }
    .rating-leader-votes { width: 100%; text-align: center; font-size: 9px; }
    .rating-leader-score strong { font-size: 18px; }
    .rating-leader-score > span:first-child { font-size: 10px; }
    .rating-leader-platforms { justify-content: center; margin-top: 10px; }
    .rating-list-section { margin-top: 26px; }
    .rating-scroll-anchor { top: 26px; }
    .rating-filter { flex-grow: 1; }
    .rating-row { grid-template-columns: 24px 56px minmax(0,1fr) 64px; gap: 12px; padding: 17px 14px; }
    .rating-platforms { grid-column: 2 / -1; grid-row: 2; }
    .rating-page .rating-platform-link { padding: 0 8px; gap: 6px; }
    .rating-row-cover { width: 56px; height: 56px; border-radius: 12px; }
    .rating-row-downloads { display: none; }
    .rating-row-info p { display: none; }
    .rating-row-title h3 { font-size: 13px; }
    .rating-row-score strong { font-size: 17px; }
    .rating-row-studio { margin-bottom: 0; }
    .rating-row-score small { font-size: 7px; }
    .rating-order-note { font-size: 9px; text-align: right; max-width: 108px; }
    .rating-pagination { gap: 5px; }
    .rating-page .rating-page-link { width: 36px; height: 40px; }
}
@media (max-width: 560px) {
    .rating-leader-platforms { gap: 4px; }
    .rating-page .rating-leader-platforms .rating-platform-link { padding: 0 6px; gap: 4px; font-size: 10px; }
    .rating-leader-platforms svg { width: 18px; height: 18px; }
}
@media (max-width: 420px) {
    .rating-hero { padding: 14px; }
    .rating-list-section .rating-section-heading h2 { font-size: 18px; }
    .rating-row { grid-template-columns: 19px 46px minmax(0,1fr) 55px; gap: 9px; padding: 14px 10px; }
    .rating-row-cover { width: 46px; height: 46px; border-radius: 11px; }
    .rating-row-rank { font-size: 13px; }
    .rating-row-title { gap: 4px; }
    .rating-row-title h3 { font-size: 12px; }
    .rating-row-genre { font-size: 7px; }
    .rating-row-studio { font-size: 8px; }
    .rating-page .rating-filter { padding: 8px 13px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .rating-page *, .rating-page *::before, .rating-page *::after { transition: none !important; }
}
/* Server render time follows the site's existing request timer. */
.rating-footer-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0 0 24px;
    text-align: center;
    color: #8996b6;
    font-size: 11px;
}
.rating-render-time { margin: 0; }
.rating-version { padding: 3px 7px; border: 1px solid rgba(137,150,182,.2); border-radius: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }