/* Categories overview: hero, official champions carousel and period selector */
.categories-page .categories-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 178px;
    margin-bottom: 16px;
    padding: 26px 28px;
    overflow: hidden;
    border: 1px solid #293443;
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 82% 0%, rgba(214,255,63,.13), transparent 38%),
        linear-gradient(135deg,#171e29 0%,#10151d 58%,#0c1016 100%);
}
.categories-page .categories-hero-copy { flex: 1 1 auto; min-width: 0; }
.categories-page .categories-hero h1 {
    margin: 10px 0 9px;
    color: #f8fafc;
    font-size: clamp(30px,3.4vw,44px);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -.045em;
}
.categories-page .categories-hero p {
    max-width: 660px;
    margin: 0;
    color: #aab4c2;
    font-size: 14px;
    line-height: 1.6;
}
.categories-page .categories-champion-carousel {
    position: relative;
    display: flex;
    flex: 0 0 390px;
    align-items: center;
    min-width: 0;
    min-height: 122px;
    padding: 0 0 0 26px;
    border-left: 1px solid rgba(148,163,184,.22);
}
.categories-page .categories-champion-slide {
    position: absolute;
    inset: 0 0 10px 26px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.categories-page .categories-champion-slide.is-active {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.categories-page .categories-champion-image,
.categories-page .categories-champion-placeholder {
    display: grid;
    place-items: center;
    flex: 0 0 82px;
    width: 82px;
    height: 98px;
    overflow: hidden;
    border: 2px solid #d6ff3f;
    border-radius: 13px;
    background: #111923;
    color: #d6ff3f;
    font-size: 28px;
    font-weight: 900;
}
.categories-page .categories-champion-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.categories-page .categories-champion-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.categories-page .categories-champion-label {
    margin-bottom: 5px;
    color: #caff36;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}
.categories-page .categories-champion-category {
    margin-bottom: 3px;
    color: #9aa8ba;
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.categories-page .categories-champion-name {
    max-width: 100%;
    overflow: hidden;
    color: #f8fafc;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.categories-page .categories-champion-name:hover { color: #d6ff3f; }
.categories-page .categories-champion-country {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    color: #cbd5e1;
    font-size: 11px;
}
.categories-page .categories-champion-country img { width: 20px; height: auto; border-radius: 3px; }
.categories-page .categories-champion-link {
    margin-top: 7px;
    color: #d6ff3f;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}
.categories-page .categories-champion-link:hover { text-decoration: underline; }
.categories-page .categories-champion-controls {
    position: absolute;
    right: 0;
    bottom: -1px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #8f9caf;
    font-size: 9px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.categories-page .categories-champion-controls button {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    padding: 0;
    border: 1px solid #354153;
    border-radius: 7px;
    background: #111923;
    color: #d6ff3f;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.categories-page .categories-champion-controls button:hover { border-color: #d6ff3f; background: #d6ff3f12; }
.categories-page .categories-champion-progress {
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 26px;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255,255,255,.08);
}
.categories-page .categories-champion-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: #d6ff3f;
}
.categories-page .categories-period-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 76px;
    margin: 0 0 13px;
    padding: 14px 18px;
    border: 1px solid #293443;
    border-radius: 14px;
    background: linear-gradient(110deg,#121923,#0f151e);
}
.categories-page .categories-period-copy { display: flex; flex-direction: column; gap: 5px; }
.categories-page .categories-period-copy label {
    color: #d6ff3f;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}
.categories-page .categories-period-copy span { color: #8f9caf; font-size: 11px; }
.categories-page .categories-period-switch select {
    min-width: 230px;
    min-height: 48px;
    padding: 10px 42px 10px 15px;
    border: 1px solid #46536a;
    border-radius: 10px;
    background-color: #0b111b;
    color: #f4f6fa;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.categories-page .categories-period-switch select:focus {
    outline: 2px solid rgba(214,255,63,.5);
    outline-offset: 2px;
}
.categories-page .geo-period-note { margin-bottom: 18px; }

@media (max-width: 1050px) {
    .categories-page .categories-hero { align-items: stretch; gap: 22px; }
    .categories-page .categories-champion-carousel { flex-basis: 350px; }
}
@media (max-width: 760px) {
    .categories-page .categories-hero { display: block; padding: 22px 19px; }
    .categories-page .categories-champion-carousel {
        min-height: 116px;
        margin-top: 20px;
        padding: 17px 0 0;
        border-top: 1px solid rgba(148,163,184,.22);
        border-left: 0;
    }
    .categories-page .categories-champion-slide { inset: 17px 0 10px 0; }
    .categories-page .categories-champion-slide.is-active { inset: auto; }
    .categories-page .categories-champion-progress { left: 0; }
    .categories-page .categories-period-switch { align-items: stretch; flex-direction: column; gap: 12px; }
    .categories-page .categories-period-switch select { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .categories-page .categories-champion-slide { transition: none; }
}


/* Weekly / monthly change labels in category ranking cards */
.geo-rank-page .geo-metric-card li .geo-metric-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 0;
}
.geo-rank-page .geo-metric-card li .geo-metric-values > strong {
    color: #f7f9fc;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}
.geo-rank-page .geo-period-change {
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.geo-rank-page .geo-period-change.is-positive { color: #9be15d; }
.geo-rank-page .geo-period-change.is-negative { color: #ff777e; }
.geo-rank-page .geo-period-change.is-neutral { color: #8f9caf; }