@import url("https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Bungee+Shade&family=Press+Start+2P&display=swap");

* { box-sizing: border-box; }

:root {
    --bg: #08090c;
    --panel: #111319;
    --panel-2: #171a22;
    --text: #f5f6f8;
    --muted: #9298a7;
    --line: rgba(255,255,255,.09);
    --purple: #2f7bff;
    --green: #53fc18;
    --red: #ff304f;
}

/* Streamwrld home — modern 8-bit direction */
.home-arcade {
    --arcade-black: #050506;
    --arcade-panel: #0d0d12;
    --arcade-panel-2: #07131f;
    --arcade-purple: #2f7bff;
    --arcade-purple-dark: #102d5a;
    --arcade-blue: #34aee4;
    background: var(--arcade-black);
    color: #f7f5ff;
}

.home-arcade .page-shell { width: min(1380px, calc(100% - 56px)); }
.home-arcade .site-header { background: #050506; border-bottom: 3px solid #14263d; }
.home-arcade .navbar { width: min(1380px, calc(100% - 56px)); height: 78px; }
.home-arcade .arcade-header-logo { gap: 8px; font-family: "Bungee Inline", Impact, sans-serif; font-size: 15px; font-weight: 400; letter-spacing: -.055em; line-height: 1; }
.arcade-header-globe,
.arcade-falling-globe {
    position: relative;
    display: block;
    overflow: hidden;
    border: 2px solid #bdeaff;
    border-radius: 50%;
    background:
        linear-gradient(#73ca56 0 0) 16% 68% / 12% 9% no-repeat,
        linear-gradient(#73ca56 0 0) 74% 13% / 10% 8% no-repeat,
        #167dbb;
    box-shadow: inset -9px -10px 0 rgba(4,49,105,.3);
}
.arcade-header-globe { width: 29px; height: 29px; flex: 0 0 29px; }
.arcade-header-globe::before,
.arcade-falling-globe::before {
    content: "";
    position: absolute;
    width: 47%;
    height: 35%;
    left: 7%;
    top: 17%;
    clip-path: polygon(8% 20%, 29% 20%, 29% 7%, 56% 7%, 56% 21%, 78% 21%, 78% 41%, 61% 41%, 61% 63%, 40% 63%, 40% 80%, 18% 80%, 18% 54%, 4% 54%, 4% 34%, 8% 34%);
    background: #73ca56;
    transform: rotate(-13deg);
}
.arcade-header-globe i,
.arcade-falling-globe i {
    position: absolute;
    width: 43%;
    height: 30%;
    right: 2%;
    bottom: 17%;
    clip-path: polygon(16% 7%, 58% 7%, 58% 21%, 85% 21%, 85% 41%, 100% 41%, 100% 68%, 75% 68%, 75% 91%, 44% 91%, 44% 75%, 17% 75%, 17% 55%, 0 55%, 0 24%, 16% 24%);
    background: #73ca56;
    transform: rotate(18deg);
}
.arcade-header-globe::after,
.arcade-falling-globe::after {
    content: "";
    position: absolute;
    width: 82%;
    height: 34%;
    left: 8%;
    bottom: 7%;
    border-bottom: 2px solid #8adcf3;
    border-radius: 50%;
}
.home-arcade .header-search-link,
.home-arcade .create-account-nav,
.home-arcade .account-nav-link { border-radius: 0; }
.home-arcade .header-search-link { color: #c9c4d1; }
.home-arcade .header-search-link:hover { background: #091828; }
.home-arcade .create-account-nav,
.home-arcade .account-nav-link {
    padding: 11px 13px;
    border: 2px solid var(--arcade-purple);
    background: #071525;
    color: #fff;
    box-shadow: 4px 4px 0 var(--arcade-purple-dark);
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
}
.home-arcade .mobile-menu-button {
    position: relative;
    display: block;
    width: 90px;
    height: 42px;
    padding: 0 10px 0 35px;
    border: 2px solid var(--arcade-purple);
    border-radius: 0;
    background: #071525;
    box-shadow: 4px 4px 0 var(--arcade-purple-dark);
    color: #fff;
}
.home-arcade .mobile-menu-button span { position: absolute; left: 10px; width: 16px; height: 2px; margin: 0; border-radius: 0; transition: none; }
.home-arcade .mobile-menu-button span:nth-child(1) { top: 12px; }
.home-arcade .mobile-menu-button span:nth-child(2) { top: 19px; }
.home-arcade .mobile-menu-button span:nth-child(3) { top: 26px; }
.home-arcade .mobile-menu-button b { font-family: "Press Start 2P", monospace; font-size: 7px; font-weight: 400; }
.home-arcade .mobile-menu-button[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.home-arcade .mobile-menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.home-arcade .mobile-menu-button[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
.home-arcade .mobile-navigation:not([hidden]) {
    inset: 76px max(28px, calc((100vw - 1380px) / 2)) auto auto;
    width: min(520px, calc(100vw - 28px));
    gap: 8px;
    padding: 16px;
    border: 3px solid var(--arcade-purple);
    border-radius: 0;
    background: #08080b;
    box-shadow: 8px 8px 0 #102b56;
    backdrop-filter: none;
    counter-reset: world-choice;
}
.home-arcade .mobile-navigation::before,
.home-arcade .mobile-navigation::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--arcade-purple);
}
.home-arcade .mobile-navigation::before { left: -11px; top: 18px; box-shadow: 0 8px var(--arcade-purple), -8px 8px var(--arcade-purple); }
.home-arcade .mobile-navigation::after { right: -11px; bottom: 18px; box-shadow: 0 -8px var(--arcade-purple), 8px -8px var(--arcade-purple); }
.home-arcade .mobile-navigation-label { display: flex; align-items: center; justify-content: space-between; margin: 1px 2px 5px; font-family: "Press Start 2P", monospace; color: #59e1ff; font-size: 8px; font-weight: 400; }
.home-arcade .mobile-navigation-label::after { content: "WORLD MAP"; color: #5c5764; font-size: 6px; }
.home-arcade .mobile-navigation > a,
.home-arcade .mobile-coming-soon { position: relative; min-height: 60px; padding: 0 14px 0 48px; border: 2px solid #101f31; border-radius: 0; background: #0d0d12; }
.home-arcade .mobile-navigation > a { counter-increment: world-choice; }
.home-arcade .mobile-navigation > a::before { content: counter(world-choice, decimal-leading-zero); position: absolute; left: 13px; top: 50%; color: #2f7bff; font-family: "Press Start 2P", monospace; font-size: 7px; transform: translateY(-50%); }
.home-arcade .mobile-coming-soon::before { content: "??"; position: absolute; left: 13px; top: 50%; color: #5c5764; font-family: "Press Start 2P", monospace; font-size: 7px; transform: translateY(-50%); }
.home-arcade .mobile-navigation > a:hover,
.home-arcade .mobile-navigation > a[aria-current="page"] { border-color: #2671e8; background: #071b30; box-shadow: inset 4px 0 0 #59e1ff; }
.home-arcade .mobile-coming-soon small,
.home-arcade .mobile-platform-links a { border-radius: 0; }

.arcade-hero {
    position: relative;
    min-height: 690px;
    padding: 142px 0 80px;
    overflow: hidden;
    border-bottom: 3px solid #14263d;
    background: #050506;
}
.arcade-hero-featured { display: flex; align-items: center; min-height: 720px; }
.arcade-hero-background,
.arcade-hero-shade { position: absolute; inset: 0; }
.arcade-hero-background { z-index: 0; background: #111319; }
.arcade-hero-background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.76) contrast(1.04); }
.arcade-hero-shade { z-index: 1; background: linear-gradient(90deg, rgba(5,5,6,.96) 0%, rgba(5,5,6,.89) 35%, rgba(5,5,6,.54) 68%, rgba(5,5,6,.75) 100%), linear-gradient(0deg, rgba(5,5,6,.9) 0%, transparent 42%); }
.arcade-hero > .arcade-edge-bits { z-index: 2; }
.arcade-hero-content { position: absolute; inset: 0 auto auto 50%; z-index: 3; display: block; width: min(1380px, calc(100% - 56px)); height: 100%; padding-top: 124px; transform: translateX(-50%); }
.arcade-hero-copy { max-width: 765px; }
.arcade-kicker,
.arcade-section-code { margin: 0; color: #59e1ff; font-family: "Press Start 2P", monospace; font-size: 9px; font-weight: 400; letter-spacing: .04em; line-height: 1.6; }
.arcade-logo-lockup {
    display: flex;
    align-items: baseline;
    width: max-content;
    max-width: 100%;
    padding: 22px 0 94px;
    color: #f7f5ff;
    -webkit-text-stroke: 0;
    paint-order: stroke fill;
    text-shadow: none;
    font-family: "Press Start 2P", monospace;
    font-size: clamp(30px,4.3vw,62px);
    line-height: .92;
    white-space: nowrap;
}
.arcade-word-left { position: relative; }
.arcade-falling-globe {
    position: absolute;
    z-index: 2;
    width: clamp(52px,5.3vw,76px);
    height: clamp(52px,5.3vw,76px);
    right: clamp(-38px,-2.7vw,-26px);
    top: calc(100% + 15px);
    box-shadow: inset -12px -13px 0 rgba(4,49,105,.3), 0 13px 0 -7px rgba(33,105,221,.36);
}
.arcade-intro { max-width: 680px; margin: 0; color: #b9b4c1; font-size: clamp(16px,1.5vw,20px); line-height: 1.6; }
.arcade-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.home-arcade .primary-button,
.home-arcade .secondary-button {
    min-height: 52px;
    padding: 0 20px;
    border-radius: 0;
    font-family: "Press Start 2P", monospace;
    font-size: 8px;
    font-weight: 400;
    transition: none;
}
.home-arcade .primary-button { border: 2px solid #fff; box-shadow: 6px 6px 0 #1f62c9; }
.home-arcade .secondary-button { border: 2px solid var(--arcade-purple); background: #071525; box-shadow: 5px 5px 0 var(--arcade-purple-dark); backdrop-filter: none; }
.home-arcade .primary-button:hover,
.home-arcade .secondary-button:hover { transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--arcade-purple-dark); }
.arcade-edge-bits { position: absolute; z-index: 0; width: 13px; height: 13px; background: var(--arcade-purple); opacity: .66; }
.arcade-edge-bits.top-right { top: 115px; right: 3%; box-shadow: 13px 0 var(--arcade-purple), 26px 0 var(--arcade-purple), 26px 13px var(--arcade-purple), 39px 13px var(--arcade-purple), 52px 13px var(--arcade-purple), 52px 26px var(--arcade-purple); }
.arcade-edge-bits.bottom-left { left: 0; bottom: 56px; background: var(--arcade-blue); box-shadow: 13px 0 var(--arcade-blue), 26px 0 var(--arcade-blue), 26px -13px var(--arcade-blue), 39px -13px var(--arcade-blue), 52px -13px var(--arcade-blue), 52px -26px var(--arcade-blue); opacity: .45; }
.arcade-hero-stream-info { position: absolute; top: 250px; right: 0; display: grid; gap: 8px; width: 290px; padding: 16px; border: 1px solid rgba(47,123,255,.58); background: rgba(7,7,10,.9); color: #fff; text-decoration: none; box-shadow: 5px 5px 0 rgba(18,67,148,.48); }
.arcade-hero-stream-info::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(89,225,255,.12); pointer-events: none; }
.arcade-hero-stream-info:hover { border-color: #8eeaff; background: rgba(15,10,24,.94); transform: translate(-2px,-2px); }
.arcade-featured-topline { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: #59e1ff; font-family: "Press Start 2P", monospace; font-size: 6px; line-height: 1.6; }
.arcade-hero-stream-info .arcade-live-badge { padding: 6px 7px; background: #ff3659; color: #fff; font-family: "Press Start 2P", monospace; font-size: 6px; }
.arcade-featured-rank { display: none; }
.arcade-hero-stream-name { position: relative; z-index: 1; overflow: hidden; margin-top: 3px; font-size: 20px; font-weight: 900; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.arcade-hero-stream-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; color: #bbb5c6; font-size: 11px; line-height: 1.4; }
.arcade-hero-stream-meta b { padding: 4px 6px; color: #fff; background: #0c3150; font-size: 10px; letter-spacing: .06em; }
.arcade-featured-viewer-count { position: relative; z-index: 1; color: #f4efff; font-family: "Press Start 2P", monospace; font-size: 7px; line-height: 1.6; }
.arcade-featured-viewer-count i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: #ff3659; box-shadow: 0 0 9px rgba(255,54,89,.72); }
.arcade-featured-title { display: none; }
.arcade-featured-cta { position: relative; z-index: 1; display: flex; justify-content: space-between; margin: 2px -16px -16px; padding: 12px 16px; border-top: 1px solid rgba(89,225,255,.18); color: #fff; font-family: "Press Start 2P", monospace; font-size: 7px; }
.arcade-featured-cta span { color: #59e1ff; font-size: 14px; line-height: .6; }

.home-arcade .content-shell { margin-top: 0; padding-top: 54px; padding-bottom: 82px; }
.home-arcade .search-hero,
.home-arcade .live-overview,
.home-arcade .overview-stat,
.home-arcade .overview-ranking,
.home-arcade .stream-card,
.home-arcade .catalog-empty,
.home-arcade .provider-warning { border-radius: 0; }
.home-arcade .search-hero { margin-bottom: 22px; padding: 21px 24px; border: 3px solid #2c2534; background: #0c0c10; }
.home-arcade .search-hero h1 { margin: 7px 0 5px; font-size: clamp(24px,2.5vw,35px); }
.home-arcade .search-hero > p:not(.arcade-section-code) { color: #9994a1; }
.home-arcade .search-hero > p:not(.arcade-section-code) { margin: 0 0 16px; font-size: 14px; }
.home-arcade .universal-search input,
.home-arcade .universal-search select { padding-block: 11px; border-radius: 0; border-width: 2px; background: #050506; }
.home-arcade .universal-search .primary-button { min-height: 44px; padding-inline: 16px; }
.home-arcade .search-quick-links { margin-top: 14px; }
.home-arcade .search-quick-links a { border-radius: 0; }
.home-arcade .live-overview { position: relative; padding: 22px 24px; border: 3px solid #142a42; background: #0b0b0f; box-shadow: 7px 7px 0 #0b1c2e; backdrop-filter: none; overflow: hidden; }
.home-arcade .live-overview-heading { margin-bottom: 16px; }
.home-arcade .live-overview-heading h2 { margin-top: 7px; font-size: clamp(23px,2.4vw,31px); }
.home-arcade .overview-freshness { border-radius: 0; background: #0c1510; }
.home-arcade .overview-stat,
.home-arcade .overview-ranking { min-height: 102px; padding: 15px; border: 2px solid #29242f; background: #101014; }
.home-arcade .overview-stat > strong,
.home-arcade .overview-ranking > strong { margin: 6px 0 3px; font-size: 23px; }
.home-arcade .overview-stat-primary > strong { font-size: 32px; }
.home-arcade .overview-stat-primary { border-color: #17498f; background: #071827; }
.home-arcade .overview-ranking { box-shadow: inset 5px 0 0 #1e5cc0; }
.overview-bits { right: 0; bottom: 28px; box-shadow: -13px 0 var(--arcade-purple), -26px 0 var(--arcade-purple), -26px -13px var(--arcade-purple), -39px -13px var(--arcade-purple); opacity: .38; }
.home-arcade .provider-warning { border-width: 2px; background: #16130c; }
.home-arcade .discovery-header { padding-top: 72px; }
.home-arcade .discovery-header h2 { margin-top: 10px; font-size: clamp(29px,3.5vw,46px); }
.home-arcade .quick-links a { border: 2px solid #13263b; border-radius: 0; background: #0d0d12; }
.home-arcade .stream-section { position: relative; margin-bottom: 62px; }
.home-arcade .stream-section::after { content: ""; position: absolute; right: -28px; top: 48%; width: 8px; height: 8px; background: #1f62c9; box-shadow: -8px 0 #1f62c9, -16px 0 #1f62c9, -16px -8px #1f62c9; opacity: .55; }
.home-arcade .section-heading .eyebrow { font-family: "Press Start 2P", monospace; font-size: 8px; font-weight: 400; }
.home-arcade .section-heading h2 { margin-top: 9px; font-size: 27px; }
.home-arcade .view-all { color: #8eeaff; }
.home-arcade .stream-card { border: 2px solid #29242f; background: #0e0e13; box-shadow: 4px 4px 0 #0d2237; }
.home-arcade .stream-card:hover { transform: translate(-1px,-3px); border-color: #1f62c9; background: #091521; }
.home-arcade .thumbnail { transition: none; }
.home-arcade .stream-card:hover .thumbnail { transform: none; }
.home-arcade .live-badge,
.home-arcade .position,
.home-arcade .mature-badge,
.home-arcade .viewer-overlay,
.home-arcade .platform-label,
.home-arcade .platform-badge,
.home-arcade .streamer-avatar { border-radius: 0; }

.arcade-account-cta { position: relative; padding: 78px 0; overflow: hidden; border-block: 3px solid #14283f; background: #071725; text-align: center; }
.arcade-account-cta h2 { margin: 14px 0 10px; font-size: clamp(30px,4vw,50px); }
.arcade-account-cta p:not(.arcade-section-code) { margin: 0 0 28px; color: #aaa4b2; }
.cta-bits { left: 2%; top: 28px; box-shadow: 13px 0 var(--arcade-purple), 26px 0 var(--arcade-purple), 26px 13px var(--arcade-purple), 39px 13px var(--arcade-purple); opacity: .46; }
.arcade-footer { padding: 50px 0; background: #050506; }
.arcade-footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3,1fr); gap: 34px; }
.arcade-footer strong { font-family: "Bungee Inline", Impact, sans-serif; font-size: 25px; }
.arcade-footer p { color: #8f8997; font-size: 13px; }
.arcade-footer b { display: block; margin-bottom: 12px; color: #fff; }
.arcade-footer a { display: block; margin: 9px 0; color: #918b99; font-size: 13px; text-decoration: none; }
.arcade-footer a:hover { color: #fff; }

.home-arcade .site-header { border-bottom: 0; }

@media (max-width: 980px) {
    .arcade-hero-stream-info { top: 265px; width: 260px; }
    .home-arcade .live-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .arcade-footer-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 620px) {
    .home-arcade { overflow-x: hidden; }
    .home-arcade .page-shell,
    .home-arcade .navbar { width: min(100% - 28px,1380px); }
    .home-arcade .navbar { height: 68px; }
    .arcade-header-globe { width: 27px; height: 27px; flex-basis: 27px; }
    .home-arcade .arcade-header-logo { gap: 7px; font-size: 12px; }
    .home-arcade .header-search-link,
    .home-arcade .create-account-nav { display: none; }
    .home-arcade .mobile-menu-button { width: 78px; height: 39px; }
    .home-arcade .mobile-navigation:not([hidden]) { inset: 66px 14px auto 14px; width: auto; grid-template-columns: 1fr; }
    .home-arcade .mobile-navigation-label,
    .home-arcade .mobile-platform-links { grid-column: 1; }
    .arcade-hero { min-height: 575px; padding: 96px 0 42px; }
    .arcade-hero-featured { display: block; }
    .arcade-hero-content { display: grid; grid-template-columns: 1fr; width: min(100% - 28px,1380px); height: 100%; min-height: 0; padding-top: 82px; align-items: flex-start; }
    .arcade-hero-shade { background: linear-gradient(90deg, rgba(5,5,6,.93), rgba(5,5,6,.59)), linear-gradient(0deg, rgba(5,5,6,.95) 0%, transparent 52%); }
    .arcade-hero-stream-info { position: relative; top: auto; right: auto; width: 100%; margin-top: 16px; padding: 12px; gap: 5px; box-shadow: 4px 4px 0 rgba(18,67,148,.42); }
    .arcade-hero-stream-info::before { inset: 4px; }
    .arcade-featured-topline { font-size: 5px; }
    .arcade-hero-stream-info .arcade-live-badge { padding: 4px 5px; font-size: 5px; }
    .arcade-hero-stream-name { margin-top: 1px; padding-right: 105px; font-size: 17px; }
    .arcade-hero-stream-meta { font-size: 9px; }
    .arcade-hero-stream-meta span { display: none; }
    .arcade-featured-viewer-count { font-size: 6px; }
    .arcade-featured-cta { position: absolute; right: 12px; bottom: 14px; margin: 0; padding: 0; border: 0; font-size: 6px; gap: 8px; }
    .arcade-logo-lockup { padding: 12px 0 56px; font-size: clamp(24px,8.2vw,38px); }
    .arcade-falling-globe { right: -24px; top: calc(100% + 10px); }
    .arcade-intro { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.48; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .arcade-actions { display: grid; gap: 9px; margin-top: 18px; }
    .home-arcade .primary-button,
    .home-arcade .secondary-button { width: 100%; text-align: center; }
    .arcade-actions .primary-button { min-height: 46px; }
    .arcade-actions .secondary-button { min-height: 0; padding: 6px; border: 0; background: transparent; box-shadow: none; color: #b9b4c1; text-decoration: underline; text-underline-offset: 4px; }
    .arcade-actions .secondary-button:hover { transform: none; box-shadow: none; color: #fff; }
    .home-arcade .content-shell { padding-top: 35px; }
    .home-arcade .search-hero,
    .home-arcade .live-overview { padding: 21px; }
    .home-arcade .universal-search { grid-template-columns: 1fr; }
    .home-arcade .live-overview-heading { align-items: flex-start; flex-direction: column; }
    .home-arcade .live-overview-grid { grid-template-columns: 1fr; }
    .home-arcade .discovery-header { align-items: flex-start; flex-direction: column; }
    .home-arcade .quick-links { justify-content: flex-start; }
    .arcade-account-cta { padding: 60px 0; }
    .arcade-footer-grid { grid-template-columns: 1fr; }
}

/* Stream Spin discovery block on the home page. */
.home-spin-feature {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    min-height: 310px;
    margin: 38px 0 54px;
    overflow: hidden;
    border: 2px solid #123e79;
    background: #030405;
    box-shadow: 8px 8px 0 #071d38;
}
.home-spin-copy { position: relative; z-index: 2; padding: 42px 46px; }
.home-spin-copy h2 { max-width: 760px; margin: 12px 0 18px; font-size: clamp(38px, 4vw, 68px); }
.home-spin-copy > p:not(.arcade-section-code) { max-width: 680px; margin: 0 0 27px; color: #aeb5c2; font-size: 17px; line-height: 1.55; }
.home-spin-copy .primary-button { display: inline-flex; align-items: center; gap: 20px; }
.home-spin-visual { position: relative; min-height: 310px; border-left: 1px solid #123e79; background: radial-gradient(circle at 50% 50%, rgba(47,123,255,.12), transparent 58%); }
.home-spin-orbit { position: absolute; top: 50%; left: 50%; width: min(78%, 430px); aspect-ratio: 1.35; border: 1px dashed rgba(47,123,255,.7); border-radius: 50%; transform: translate(-50%,-50%); }
.home-spin-globe { position: absolute; top: 50%; left: 50%; width: 150px; aspect-ratio: 1; background: url('/static/assets/stream-spin-globe.png') center/contain no-repeat; image-rendering: pixelated; transform: translate(-50%,-50%); }
.home-spin-node { position: absolute; display: grid; min-width: 62px; min-height: 34px; place-items: center; border: 2px solid #17529a; background: #03070c; color: #30d9ff; font: 6px 'Press Start 2P', monospace; box-shadow: 3px 3px 0 #071d38; }
.home-spin-node.node-one { top: 18%; left: 44%; color: #fff; }
.home-spin-node.node-two { top: 43%; right: 8%; }
.home-spin-node.node-three { right: 25%; bottom: 13%; color: #fff; }
.home-spin-node.node-four { bottom: 18%; left: 11%; }

@media (max-width: 900px) {
    .home-spin-feature { grid-template-columns: 1fr; }
    .home-spin-visual { min-height: 260px; border-top: 1px solid #123e79; border-left: 0; }
}

@media (max-width: 620px) {
    .home-spin-feature { margin: 26px 0 40px; }
    .home-spin-copy { padding: 28px 22px; }
    .home-spin-copy h2 { font-size: 38px; }
    .home-spin-copy > p:not(.arcade-section-code) { font-size: 15px; }
}

/* Shared launch footer and legal documents. */
.site-legal-footer {
    border-top: 1px solid rgba(142, 234, 255, .22);
    background: #05070a;
    color: #b9bec9;
    padding: 42px 0 24px;
}

.site-legal-footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(120px, 1fr));
    gap: 32px;
}

.site-legal-footer nav,
.site-legal-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.site-legal-footer b,
.site-legal-footer strong { color: #fff; }
.site-legal-brand strong { font-family: "Press Start 2P", monospace; font-size: 10px; }
.site-legal-brand p { margin: 0; max-width: 260px; }
.site-legal-footer a { color: #b9bec9; text-decoration: none; }
.site-legal-footer a:hover,
.site-legal-footer a:focus-visible { color: #8eeaff; text-decoration: underline; }
.site-legal-fineprint {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid #1d232c;
    margin-top: 34px;
    padding-top: 20px;
    font-size: 12px;
}

.legal-page { padding-top: 126px; padding-bottom: 80px; max-width: 1240px; }
.legal-hero { position: relative; overflow: hidden; border: 1px solid #17375c; background: linear-gradient(135deg, #080b10 0%, #09111b 62%, #061b28 100%); padding: clamp(28px, 5vw, 62px); box-shadow: 8px 8px 0 #0a2443; }
.legal-hero::after { content: ""; position: absolute; right: -70px; bottom: -120px; width: 330px; height: 330px; border: 1px solid rgba(48, 217, 255, .18); border-radius: 50%; box-shadow: 0 0 0 46px rgba(48, 217, 255, .025), 0 0 0 92px rgba(48, 217, 255, .018); pointer-events: none; }
.legal-hero-copy { position: relative; z-index: 1; max-width: 800px; }
.legal-hero h1 { margin: 12px 0 18px; font-size: clamp(42px, 7vw, 82px); line-height: .96; }
.legal-hero-copy > p:not(.eyebrow) { color: #c5cad4; font-size: clamp(18px, 2vw, 23px); max-width: 760px; }
.legal-hero-copy > span { display: block; margin-top: 24px; color: #7f8998; font-size: 13px; }
.legal-hero-terms { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.legal-hero-mark { position: relative; z-index: 1; flex: 0 0 190px; aspect-ratio: 1; border: 1px solid rgba(48, 217, 255, .35); display: grid; place-content: center; text-align: center; background: rgba(3, 9, 15, .58); transform: rotate(3deg); }
.legal-hero-mark span { color: #fff; font-size: 64px; font-weight: 800; line-height: .9; }
.legal-hero-mark small { margin-top: 14px; color: #30d9ff; font-family: "Press Start 2P", monospace; font-size: 9px; line-height: 1.7; }
.legal-page-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0; }
.legal-page-nav a { border: 1px solid #263444; color: #c8cfda; padding: 11px 14px; text-decoration: none; }
.legal-page-nav a:hover,
.legal-page-nav a:focus-visible,
.legal-page-nav a[aria-current="page"] { border-color: #4b9cff; background: #071b30; color: #fff; }
.terms-overview { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #1c344b; margin: 0 0 48px; background: #070a0f; }
.terms-overview > div { padding: 24px; min-height: 160px; }
.terms-overview > div + div { border-left: 1px solid #1c344b; }
.terms-overview span { display: block; color: #30d9ff; font-family: "Press Start 2P", monospace; font-size: 9px; margin-bottom: 22px; }
.terms-overview strong { display: block; color: #fff; font-size: 20px; margin-bottom: 8px; }
.terms-overview p { margin: 0; color: #929cab; line-height: 1.55; }
.legal-content-shell { display: block; }
.legal-content-shell-terms { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(34px, 6vw, 82px); align-items: start; }
.terms-index { position: sticky; top: 104px; display: flex; flex-direction: column; border-top: 2px solid #30d9ff; padding-top: 22px; }
.terms-index .eyebrow { margin: 0 0 18px; }
.terms-index a { color: #8995a5; text-decoration: none; padding: 9px 0; border-bottom: 1px solid #18202a; font-size: 13px; }
.terms-index a:hover,
.terms-index a:focus-visible { color: #fff; padding-left: 5px; }
.legal-document { max-width: 900px; }
.legal-document section { scroll-margin-top: 110px; border-top: 1px solid #232a34; padding: 34px 0 38px; }
.legal-document h2 { margin: 0 0 16px; font-size: clamp(25px, 4vw, 36px); letter-spacing: -.03em !important; }
.legal-content-shell-terms .legal-document h2 { display: flex; align-items: baseline; gap: 15px; }
.legal-content-shell-terms .legal-document h2 span { color: #30d9ff; font-family: "Press Start 2P", monospace; font-size: 9px; letter-spacing: 0; }
.legal-document p,
.legal-document li { color: #c5cad4; font-size: 16px; line-height: 1.75; }
.legal-document ul { padding-left: 22px; }
.legal-document li + li { margin-top: 8px; }
.legal-document a { color: #8eeaff; }
.legal-operator-details { display: grid; grid-template-columns: minmax(140px,.45fr) minmax(0,1fr); margin: 22px 0 0; border: 1px solid #17375c; background: #070b10; }
.legal-operator-details dt,
.legal-operator-details dd { margin: 0; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.legal-operator-details dt { color: #64dcff; font-family: "Press Start 2P", monospace; font-size: 7px; line-height: 1.7; }
.legal-operator-details dd { color: #e8edf5; overflow-wrap: anywhere; }
.legal-launch-warning { padding: 14px 16px; border-left: 3px solid #f2bd46; background: rgba(242,189,70,.08); color: #ddd3bd !important; }
.legal-table-wrap { overflow-x: auto; }
.legal-document table { border-collapse: collapse; width: 100%; min-width: 620px; }
.legal-document th,
.legal-document td { border: 1px solid #28313d; padding: 14px; text-align: left; vertical-align: top; }
.legal-document th { color: #fff; background: #0b1520; }
.legal-mail-button { display: inline-block; color: #050506 !important; text-decoration: none; }
.account-delete-link { margin-top: 24px; }
.account-delete-link a { color: #9ba8b8; }
.consent-row a { color: #8eeaff; }

@media (max-width: 900px) {
    .site-legal-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-legal-brand { grid-column: 1 / -1; }
    .legal-hero-mark { flex-basis: 140px; }
    .legal-hero-mark span { font-size: 48px; }
    .legal-content-shell-terms { grid-template-columns: 1fr; }
    .terms-index { position: static; display: none; }
}

@media (max-width: 620px) {
    .legal-page { padding-top: 88px; }
    .legal-hero { padding: 22px; box-shadow: 4px 4px 0 #0a2443; }
    .legal-hero h1 { font-size: clamp(34px, 11vw, 48px); }
    .legal-hero-mark { display: none; }
    .terms-overview { grid-template-columns: 1fr; }
    .terms-overview > div { min-height: 0; }
    .terms-overview > div + div { border-left: 0; border-top: 1px solid #1c344b; }
    .site-legal-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
    .site-legal-fineprint { flex-direction: column; }
    .legal-operator-details { grid-template-columns: 1fr; }
    .legal-operator-details dt { padding-bottom: 3px; border-bottom: 0; }
    .legal-operator-details dd { padding-top: 3px; }
}

html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.page-shell { width: min(1480px, calc(100% - 56px)); margin: 0 auto; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; background: linear-gradient(180deg, rgba(5,6,9,.95), rgba(5,6,9,.66), transparent); }
.navbar { display: flex; align-items: center; gap: 20px; width: min(1480px, calc(100% - 56px)); height: 74px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 850; letter-spacing: -.03em; text-decoration: none; }
.brand-header-logo { gap: 8px; font-family: "Bungee Inline", Impact, sans-serif; font-size: 15px; font-weight: 400; letter-spacing: -.055em; line-height: 1; }
.logo-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: linear-gradient(135deg, var(--purple), #1f67db); box-shadow: 0 8px 30px rgba(145,70,255,.28); }
.nav-links { display: flex; align-items: center; gap: 26px; flex: 1; }
.nav-links a, .coming-soon { color: #b6bac5; font-size: 14px; font-weight: 650; text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }
.coming-soon { opacity: .52; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.header-search-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 8px; color: #d5d8e1; font-size: 11px; font-weight: 800; text-decoration: none; }
.header-search-link svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.header-search-link:hover, .header-search-link[aria-current="page"] { background: rgba(255,255,255,.055); color: #fff; }
.login-nav-link { padding: 8px 6px; color: #d5d8e1; font-size: 11px; font-weight: 800; text-decoration: none; }
.login-nav-link:hover { color: #fff; }
.create-account-nav { padding: 9px 13px; border: 1px solid rgba(190,155,255,.55); border-radius: 9px; background: linear-gradient(135deg,var(--purple),#2671e8); color: #fff; font-size: 11px; font-weight: 900; text-decoration: none; box-shadow: 0 8px 24px rgba(145,70,255,.22); }
.create-account-nav:hover { filter: brightness(1.1); transform: translateY(-1px); }
.auth-nav-user[hidden], [data-auth-guest][hidden], [data-auth-user][hidden] { display: none !important; }
.platform-pill { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(16,18,24,.72); color: #c6cad3; font-size: 12px; font-weight: 750; text-decoration: none; backdrop-filter: blur(14px); }
.platform-pill span { width: 7px; height: 7px; border-radius: 50%; }
.platform-pill.twitch span { background: var(--purple); box-shadow: 0 0 10px var(--purple); }
.platform-pill.kick span { background: var(--green); box-shadow: 0 0 10px var(--green); }
.platform-pill.youtube span { background: #ff3040; box-shadow: 0 0 10px rgba(255,48,64,.75); }
.mobile-menu-button { display: grid; width: 40px; height: 40px; place-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(17,19,25,.86); cursor: pointer; }
.mobile-menu-button span { display: block; width: 18px; height: 2px; margin: 2px 0; border-radius: 999px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
.mobile-menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-header:has(.mobile-menu-button[aria-expanded="true"]) { background: rgba(8,9,12,.98); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.mobile-navigation { display: none; }
.mobile-navigation:not([hidden]) { position: fixed; inset: 68px max(28px,calc((100vw - 1480px)/2)) auto auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: min(430px,calc(100vw - 28px)); max-height: calc(100vh - 82px); gap: 4px; padding: 14px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; background: rgba(10,11,15,.98); box-shadow: 0 24px 60px rgba(0,0,0,.48); backdrop-filter: blur(20px); }
.mobile-navigation-label { grid-column: 1/-1; margin: 2px 10px 8px; color: #777e8e; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.mobile-navigation > a, .mobile-coming-soon { display: flex; min-height: 44px; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 9px; color: #c9cdd6; font-size: 12px; font-weight: 750; text-decoration: none; }
.mobile-navigation > a:hover, .mobile-navigation > a[aria-current="page"] { background: rgba(47,123,255,.11); color: #fff; }
.mobile-coming-soon { color: #717786; }
.mobile-coming-soon small { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 8px; }
.mobile-platform-links { display: grid; grid-column: 1/-1; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 9px; padding-top: 13px; border-top: 1px solid var(--line); }
.mobile-platform-links a { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 6px; padding: 10px 5px; border: 1px solid var(--line); border-radius: 9px; color: #bec3ce; font-size: 10px; font-weight: 800; text-decoration: none; }
.mobile-platform-links i { width: 7px; height: 7px; border-radius: 50%; }
.mobile-platform-links .twitch i { background: var(--purple); box-shadow: 0 0 9px var(--purple); }
.mobile-platform-links .kick i { background: var(--green); box-shadow: 0 0 9px var(--green); }
.mobile-platform-links .youtube i { background: var(--red); box-shadow: 0 0 9px var(--red); }
.mobile-bottom-navigation { display: none; }

@media (max-width: 800px) {
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
    .mobile-bottom-navigation { position: fixed; z-index: 1200; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding-bottom: env(safe-area-inset-bottom); border-top: 2px solid #2f7bff; background: rgba(3,4,5,.98); box-shadow: 0 -12px 32px rgba(0,0,0,.58); }
    .mobile-bottom-navigation > a { display: grid; min-width: 0; min-height: 68px; place-items: center; align-content: center; gap: 7px; border-right: 1px solid #102a4b; color: #858e9e; font-family: "Press Start 2P",monospace; font-size: 6px; line-height: 1; text-align: center; text-decoration: none; }
    .mobile-bottom-navigation > a:last-child { border-right: 0; }
    .mobile-bottom-navigation > a[aria-current="page"] { background: #071b30; color: #fff; box-shadow: inset 0 4px 0 #30d9ff; }
    .mobile-bottom-navigation svg { width: 21px; height: 21px; fill: none; stroke: #30d9ff; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
    .mobile-bottom-spin i { position: relative; display: block; width: 29px; height: 29px; overflow: hidden; border: 2px solid #8adcf3; border-radius: 50%; background: #167dbb; box-shadow: inset -5px -5px 0 rgba(4,49,105,.34); }
    .mobile-bottom-spin i::before,
    .mobile-bottom-spin i b { content: ""; position: absolute; background: #73ca56; }
    .mobile-bottom-spin i::before { width: 13px; height: 9px; top: 5px; left: 3px; clip-path: polygon(0 20%,35% 20%,35% 0,70% 0,70% 35%,100% 35%,100% 70%,65% 70%,65% 100%,25% 100%,25% 72%,0 72%); }
    .mobile-bottom-spin i b { width: 12px; height: 8px; right: 1px; bottom: 5px; clip-path: polygon(0 0,58% 0,58% 25%,100% 25%,100% 72%,72% 72%,72% 100%,25% 100%,25% 70%,0 70%); }
    .mobile-menu-open .mobile-bottom-navigation { visibility: hidden; }
}

@media (max-width: 360px) {
    .mobile-bottom-navigation > a { font-size: 5px; }
}

/* Shared responsive foundation */
@media (max-width: 620px) {
    .page-shell,
    .navbar { width: min(100% - 28px,1480px); }
    .navbar { height: 68px; gap: 12px; }
    .brand-header-logo { gap: 7px; font-size: 12px; }
    .brand-header-logo .arcade-header-globe { width: 27px; height: 27px; flex-basis: 27px; }
    .header-search-link,
    .create-account-nav,
    .account-nav-link { display: none; }
    .mobile-navigation:not([hidden]) { inset: 66px 14px auto 14px; width: auto; grid-template-columns: 1fr; }
    .mobile-navigation-label,
    .mobile-platform-links { grid-column: 1; }
    .primary-button,
    .secondary-button { min-height: 44px; }
    .section-heading { align-items: flex-start; }
}

.hero { position: relative; min-height: 650px; display: flex; align-items: flex-end; overflow: hidden; background: var(--hero-image) center 24% / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,7,10,.98) 0%, rgba(6,7,10,.86) 34%, rgba(6,7,10,.25) 68%, rgba(6,7,10,.44) 100%); }
.hero-backdrop { position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0%, transparent 35%), linear-gradient(180deg, rgba(8,9,12,.15), transparent 30%); }
.hero-content { position: relative; z-index: 2; padding-bottom: 112px; }
.hero-copy { max-width: 670px; }
.live-kicker { display: flex; align-items: center; gap: 9px; color: #d2d5dc; font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.live-kicker span { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(83,252,24,.12), 0 0 15px rgba(83,252,24,.7); animation: status-pulse-green 1.9s ease-in-out infinite; }
.live-kicker.offline span { background: var(--red); box-shadow: 0 0 0 5px rgba(255,48,79,.13), 0 0 15px rgba(255,48,79,.58); animation: none; }
.hero h1 { margin: 18px 0 12px; font-size: clamp(52px, 7vw, 96px); line-height: .95; letter-spacing: -.06em; }
.hero-stream-title { max-width: 600px; margin: 0 0 22px; color: #d4d7df; font-size: 18px; line-height: 1.5; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: #b7bbc6; font-size: 14px; }
.hero-meta strong { color: #fff; }
.platform-label, .platform-badge { padding: 5px 8px; border-radius: 6px; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.platform-label.twitch, .platform-badge.twitch { background: var(--purple); color: #fff; }
.platform-label.kick, .platform-badge.kick { background: var(--green); color: #071005; }
.hero-actions { display: flex; gap: 10px; margin-top: 30px; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; text-decoration: none; transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; }
.primary-button { border: 1px solid #fff; background: #fff; color: #0b0c10; }
.secondary-button { border: 1px solid rgba(47,123,255,.42); background: rgba(23,26,34,.82); color: #f5f6f8; backdrop-filter: blur(12px); }
.primary-button:hover:not(:disabled), .secondary-button:hover:not(:disabled) { transform: translateY(-1px); }
.secondary-button:hover:not(:disabled) { border-color: rgba(47,123,255,.78); background: rgba(47,123,255,.14); color: #fff; }
.primary-button:focus-visible, .secondary-button:focus-visible { outline: 2px solid rgba(190,155,255,.9); outline-offset: 3px; }
.primary-button:disabled, .secondary-button:disabled { border-color: rgba(255,255,255,.12); background: rgba(23,26,34,.55); color: #8e94a3; cursor: not-allowed; opacity: 1; transform: none; }
.empty-hero { padding: 140px 0 64px; }

.content-shell { position: relative; z-index: 4; margin-top: -58px; padding-bottom: 72px; }
.live-overview { padding: 27px; border: 1px solid var(--line); border-radius: 18px; background: rgba(17,19,25,.93); box-shadow: 0 24px 70px rgba(0,0,0,.35); backdrop-filter: blur(18px); }
.live-overview-heading { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.live-overview-heading h2 { margin: 6px 0 6px; font-size: clamp(24px,2.7vw,34px); letter-spacing: -.035em; }
.live-overview-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.overview-freshness { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid rgba(83,252,24,.16); border-radius: 11px; background: rgba(83,252,24,.035); }
.overview-freshness strong, .overview-freshness small { display: block; }
.overview-freshness strong { font-size: 11px; }
.overview-freshness small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.live-overview-grid { display: grid; grid-template-columns: .72fr 1fr 1.38fr .9fr; gap: 10px; }
.overview-stat, .overview-ranking { min-width: 0; min-height: 126px; padding: 19px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: #0d0f14; }
.overview-stat > span, .overview-ranking > span { display: block; color: #777e8e; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.overview-stat > strong, .overview-ranking > strong { display: block; margin: 9px 0 5px; overflow: hidden; font-size: 27px; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.overview-stat > small, .overview-ranking > small { color: var(--muted); font-size: 10px; }
.overview-stat-primary { border-color: rgba(47,123,255,.2); background: radial-gradient(circle at 15% 10%, rgba(47,123,255,.18), transparent 60%), #0d0f14; }
.overview-stat-primary > strong { color: #fff; font-size: 38px; line-height: .95; }
.overview-platforms { padding-right: 12px; }
.platform-counts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 17px; }
.platform-counts > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 7px; min-width: 0; }
.platform-counts i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; }
.platform-counts i.twitch { background: var(--purple); box-shadow: 0 0 10px rgba(47,123,255,.45); }
.platform-counts i.kick { background: var(--green); box-shadow: 0 0 10px rgba(83,252,24,.4); }
.platform-counts i.youtube { background: var(--red); box-shadow: 0 0 10px rgba(255,48,79,.4); }
.platform-counts b { overflow: hidden; font-size: 17px; text-overflow: ellipsis; }
.platform-counts small { color: var(--muted); font-size: 9px; }
.overview-ranking { display: flex; flex-direction: column; color: #fff; text-decoration: none; background: linear-gradient(145deg, rgba(47,123,255,.13), rgba(13,15,20,.96)); transition: transform .2s ease, border-color .2s ease; }
.overview-ranking > small { margin-top: auto; }
.overview-ranking > small b { margin-left: 4px; color: #fff; }
.overview-ranking:hover { transform: translateY(-2px); border-color: rgba(47,123,255,.42); }
.overview-note { margin: 16px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.overview-note strong { color: #cfd2da; }

.discovery-header { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 62px 0 30px; }
.eyebrow { margin: 0; color: var(--purple); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.discovery-header h2 { max-width: 820px; margin: 7px 0 0; font-size: clamp(28px, 3.3vw, 39px); letter-spacing: -.04em; }
.quick-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.quick-links a { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: #c8cbd3; font-size: 12px; font-weight: 750; text-decoration: none; }
.quick-links a:hover { border-color: rgba(47,123,255,.62); color: #fff; }

.stream-section { margin-bottom: 48px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.section-heading h2 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.025em; }
.view-all { color: var(--muted); font-size: 12px; font-weight: 800; text-decoration: none; }
.view-all span { margin-left: 4px; color: #fff; }
.view-all:hover { color: #fff; }
.stream-grid { display: flex; gap: 14px; margin: -8px -12px 0; padding: 8px 12px 18px; overflow-x: auto; scroll-snap-type: inline proximity; scrollbar-width: thin; scrollbar-color: #2b2f3a transparent; }
.stream-grid.grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 0; padding: 0; overflow: visible; }
.stream-card { flex: 0 0 clamp(260px, 22vw, 330px); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); text-decoration: none; scroll-snap-align: start; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.stream-grid.grid .stream-card { min-width: 0; }
.stream-card:hover { z-index: 2; transform: translateY(-4px); border-color: rgba(47,123,255,.5); background: var(--panel-2); }
.stream-card.kick:hover { border-color: rgba(83,252,24,.42); }
.thumbnail-wrapper { position: relative; overflow: hidden; }
.thumbnail { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .3s ease; }
.stream-card:hover .thumbnail { transform: scale(1.025); }
.card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.52)); }
.live-badge, .position, .mature-badge, .viewer-overlay { position: absolute; border-radius: 5px; font-size: 10px; font-weight: 900; }
.live-badge { top: 10px; left: 10px; padding: 5px 7px; background: var(--red); }
.live-badge.cached { background: #7b8190; }
.live-kicker.cached span { background: #ffbd4a; box-shadow: 0 0 0 5px rgba(255,189,74,.13), 0 0 12px rgba(255,189,74,.48); animation: none; }
.position { top: 10px; right: 10px; padding: 5px 7px; background: rgba(7,8,11,.82); }
.mature-badge { bottom: 10px; left: 10px; padding: 5px 7px; background: rgba(7,8,11,.86); }
.viewer-overlay { right: 10px; bottom: 10px; padding: 5px 7px; background: rgba(7,8,11,.74); backdrop-filter: blur(8px); }
.viewer-overlay::first-letter { color: var(--red); }
.stream-info { padding: 14px; }
.stream-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stream-title-row h3 { display: flex; min-width: 0; align-items: center; gap: 8px; margin: 0; overflow: hidden; font-size: 16px; white-space: nowrap; }
.streamer-avatar { display: inline-grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: #242833; color: #fff; font-size: 9px; font-weight: 900; line-height: 1; box-shadow: 0 0 0 2px rgba(8,9,12,.92); }
.streamer-avatar.twitch { background: #2f7bff; }
.streamer-avatar.kick { background: #3fba23; color: #071009; }
.streamer-avatar.youtube { background: #d93243; }
.streamer-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stream-title-row .streamer-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.platform-badge { flex-shrink: 0; font-size: 9px; }
.stream-title { display: -webkit-box; min-height: 38px; margin: 9px 0 7px; overflow: hidden; color: #c5c9d3; font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.stream-meta { margin: 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.provider-warning { display: flex; align-items: start; gap: 13px; margin: 22px 0 0; padding: 15px 16px; border: 1px solid rgba(255,190,65,.27); border-radius: 12px; background: linear-gradient(90deg,rgba(255,190,65,.075),rgba(17,19,25,.96)); color: #f1d494; }
.provider-warning-icon { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,190,65,.35); border-radius: 50%; font-size: 11px; font-weight: 900; }
.provider-warning strong { display: block; color: #ffdc91; font-size: 12px; }
.provider-warning p { margin: 4px 0 0; color: #bbb3a3; font-size: 11px; line-height: 1.5; }
.provider-state-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.provider-state-list i { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 8px; font-style: normal; }
.provider-state-list i.ok { border-color: rgba(83,252,24,.16); color: #9de889; }
.provider-state-list i.degraded { border-color: rgba(255,190,65,.25); color: #f0ca78; }
.provider-state-list i.error { border-color: rgba(255,48,79,.24); color: #ff8798; }

/* Live ranking */
.ranking-page { --rank-accent: var(--purple); --rank-accent-rgb: 154,104,255; padding-top: 92px; padding-bottom: 80px; }
.ranking-theme-kick { --rank-accent: var(--green); --rank-accent-rgb: 83,252,24; }
.ranking-theme-youtube { --rank-accent: #ff4052; --rank-accent-rgb: 255,64,82; }
.ranking-intro { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 34px; margin: 20px 0 16px; padding: 34px; overflow: hidden; border: 1px solid rgba(var(--rank-accent-rgb),.2); border-radius: 20px; background: radial-gradient(circle at 4% 0%, rgba(var(--rank-accent-rgb),.18), transparent 40%), linear-gradient(145deg,#12141b,#0d0f14); box-shadow: 0 28px 75px rgba(0,0,0,.23); }
.ranking-intro::after { content: ""; position: absolute; right: -90px; bottom: -150px; width: 340px; height: 340px; border: 1px solid rgba(var(--rank-accent-rgb),.13); border-radius: 50%; box-shadow: 0 0 90px rgba(var(--rank-accent-rgb),.08); pointer-events: none; }
.ranking-intro-copy, .ranking-intro-aside { position: relative; z-index: 1; }
.ranking-intro .eyebrow { color: var(--rank-accent); }
.ranking-intro h1 { max-width: 940px; margin: 8px 0 13px; font-size: clamp(42px,5.7vw,78px); line-height: .96; letter-spacing: -.055em; }
.ranking-intro p:not(.eyebrow) { max-width: 700px; margin: 0; color: #a8adba; font-size: 14px; line-height: 1.6; }
.ranking-intro-aside { flex: 0 0 260px; }
.ranking-live { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 9px; padding: 13px 15px; border: 1px solid rgba(83,252,24,.16); border-radius: 11px; background: rgba(8,10,13,.64); backdrop-filter: blur(14px); }
.ranking-live > span { grid-row: 1 / 3; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(83,252,24,.11); }
.ranking-live strong { font-size: 12px; }
.ranking-live small { color: var(--muted); font-size: 9px; }
.ranking-method { margin-top: 8px; color: var(--muted); font-size: 10px; }
.ranking-method summary { width: max-content; margin-left: auto; color: #c8ccd5; font-weight: 800; cursor: pointer; list-style: none; }
.ranking-method summary::before { content: "?"; display: inline-grid; width: 16px; height: 16px; margin-right: 6px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 9px; }
.ranking-method[open] summary { color: #fff; }
.ranking-method p { margin: 9px 0 0 !important; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(8,10,13,.78); font-size: 9px !important; line-height: 1.5 !important; }
.ranking-scope-tabs { display: flex; width: max-content; max-width: 100%; gap: 5px; margin-bottom: 10px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #0e1015; }
.ranking-scope-tabs a { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: 11px; font-weight: 850; text-decoration: none; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.ranking-scope-tabs a:hover { color: #fff; background: rgba(255,255,255,.045); }
.ranking-scope-tabs a.active { border-color: rgba(var(--rank-accent-rgb),.28); background: rgba(var(--rank-accent-rgb),.12); color: #fff; }
.ranking-scope-tabs i { width: 7px; height: 7px; border-radius: 50%; }
.ranking-scope-tabs .twitch i { background: var(--purple); box-shadow: 0 0 9px var(--purple); }
.ranking-scope-tabs .kick i { background: var(--green); box-shadow: 0 0 9px var(--green); }
.ranking-scope-tabs .youtube i { background: #ff4052; box-shadow: 0 0 9px rgba(255,64,82,.8); }
.ranking-card { overflow: clip; border: 1px solid var(--line); border-radius: 15px; background: #101218; box-shadow: 0 24px 70px rgba(0,0,0,.2); }
.ranking-head, .ranking-row { display: grid; grid-template-columns: 54px 86px minmax(240px,1.5fr) minmax(130px,.75fr) 92px 112px; align-items: center; gap: 12px; }
.ranking-head { position: sticky; z-index: 5; top: 74px; min-height: 46px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(15,17,23,.94); color: #777e8e; font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; backdrop-filter: blur(16px); }
.ranking-row { position: relative; min-height: 76px; padding: 8px 18px; border-bottom: 1px solid rgba(255,255,255,.055); color: #fff; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.ranking-row:last-child { border-bottom: 0; }
.ranking-row:hover { z-index: 2; background: rgba(255,255,255,.04); }
.ranking-row:focus-visible { z-index: 3; outline: 2px solid var(--rank-accent); outline-offset: -2px; }
.ranking-row.is-top-three::before { content: ""; position: absolute; inset: 10px auto 10px 0; width: 2px; border-radius: 0 2px 2px 0; background: #9298a7; }
.ranking-row.is-top-1 { background: linear-gradient(90deg,rgba(246,200,95,.055),transparent 40%); }
.ranking-row.is-top-1::before { background: #f6c85f; box-shadow: 0 0 12px rgba(246,200,95,.45); }
.ranking-row.is-top-2::before { background: #cbd0da; }
.ranking-row.is-top-3::before { background: #d78c5e; }
.ranking-position { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(255,255,255,.035); font-size: 18px; font-variant-numeric: tabular-nums; }
.is-top-1 .ranking-position { border-color: rgba(246,200,95,.25); background: rgba(246,200,95,.09); color: #f6c85f; }
.is-top-2 .ranking-position { border-color: rgba(203,208,218,.2); color: #dbe0e9; }
.is-top-3 .ranking-position { border-color: rgba(215,140,94,.22); color: #e5a076; }
.rank-movement { width: max-content; min-width: 50px; padding: 6px 8px; border-radius: 7px; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: center; }
.rank-movement.up { background: rgba(83,252,24,.09); color: var(--green); }
.rank-movement.down { background: rgba(255,77,103,.1); color: #ff5f76; }
.rank-movement.flat { background: rgba(255,255,255,.055); color: #8a91a0; }
.ranking-streamer { display: flex; min-width: 0; align-items: center; gap: 13px; }
.ranking-streamer img { width: 82px; aspect-ratio: 16/9; flex: 0 0 auto; border-radius: 7px; object-fit: cover; }
.ranking-streamer > .ranking-copy { min-width: 0; }
.ranking-streamer strong, .ranking-streamer small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-streamer strong { font-size: 14px; }
.ranking-streamer small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.ranking-mobile-meta { display: none; }
.ranking-category { overflow: hidden; color: #c3c7d0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ranking-row i { display: inline-block; font-style: normal; }
.ranking-viewers { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.ranking-viewers small { display: block; color: var(--muted); font-size: 8px; font-weight: 700; }
.ranking-note { max-width: 900px; margin: 15px 3px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.stream-status-dot { display: inline-block; width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; }
.stream-status-dot.live { background: var(--green); box-shadow: 0 0 0 4px rgba(83,252,24,.11), 0 0 14px rgba(83,252,24,.72); animation: status-pulse-green 1.9s ease-in-out infinite; }
.stream-status-dot.offline { background: var(--red); box-shadow: 0 0 0 4px rgba(255,48,79,.11), 0 0 12px rgba(255,48,79,.58); }
.stream-status-dot.stale { background: #ffbd4a; box-shadow: 0 0 0 4px rgba(255,189,74,.1), 0 0 12px rgba(255,189,74,.5); }
@keyframes status-pulse-green {
    0%, 100% { box-shadow: 0 0 0 4px rgba(83,252,24,.11), 0 0 10px rgba(83,252,24,.58); }
    50% { box-shadow: 0 0 0 7px rgba(83,252,24,0), 0 0 18px rgba(83,252,24,.9); }
}
@media (prefers-reduced-motion: reduce) {
    .stream-status-dot.live, .live-kicker span { animation: none; }
}
.ranking-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0 0 15px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ranking-filters label { display: grid; gap: 6px; }
.ranking-filters label > span { color: #737a89; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ranking-filters select { min-width: 130px; height: 36px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #0c0e13; color: #fff; font: inherit; font-size: 11px; }
.ranking-category-filter { flex: 1 1 250px; }
.ranking-category-filter select { width: 100%; }
.ranking-filters button, .ranking-filters > a { height: 36px; padding: 0 13px; border-radius: 8px; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.ranking-filters button { border: 0; background: #fff; color: #090a0d; transition: transform .16s ease, box-shadow .16s ease; }
.ranking-filters button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(var(--rank-accent-rgb),.18); }
.ranking-filters > a { display: inline-flex; align-items: center; border: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.ranking-filters > a:hover { border-color: rgba(255,255,255,.18); color: #fff; }
.ranking-board-meta { display: flex; align-items: end; justify-content: space-between; gap: 22px; padding: 9px 3px 12px; }
.ranking-board-meta > div:first-child > span { display: block; color: #717887; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.ranking-board-meta > div:first-child > strong { display: block; margin-top: 4px; font-size: 17px; }
.ranking-board-stats { display: flex; gap: 9px; }
.ranking-board-stats > span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 9px; }
.ranking-board-stats strong { color: #fff; font-size: 10px; }

@media (max-width: 900px) {
    .ranking-intro { display: block; }
    .ranking-intro-aside { display: flex; width: 100%; align-items: start; gap: 12px; margin-top: 24px; }
    .ranking-live { width: max-content; }
    .ranking-method { margin: 10px 0 0 auto; }
    .ranking-head, .ranking-row { grid-template-columns: 48px 72px minmax(240px,1fr) 90px; }
    .ranking-head span:nth-child(4), .ranking-head span:nth-child(5), .ranking-row > .ranking-category, .ranking-row > .ranking-platform { display: none; }
}

@media (max-width: 620px) {
    .ranking-page { width: min(100% - 20px,1480px); padding-top: 74px; }
    .ranking-intro { margin-top: 10px; padding: 24px 20px; border-radius: 16px; }
    .ranking-intro h1 { font-size: clamp(37px,12vw,54px); }
    .ranking-intro p:not(.eyebrow) { font-size: 12px; }
    .ranking-intro-aside { display: block; }
    .ranking-live { width: 100%; }
    .ranking-method { margin-top: 10px; }
    .ranking-method summary { margin-left: 0; }
    .ranking-scope-tabs { width: 100%; }
    .ranking-scope-tabs a { flex: 1 1 0; justify-content: center; padding: 0 7px; font-size: 10px; }
    .ranking-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px; }
    .ranking-filters label, .ranking-filters select { width: 100%; min-width: 0; }
    .ranking-category-filter { grid-column: 1 / -1; }
    .ranking-filters button, .ranking-filters > a { justify-content: center; }
    .ranking-board-meta { display: block; padding: 9px 3px 12px; }
    .ranking-board-stats { margin-top: 10px; overflow-x: auto; }
    .ranking-head { display: none; }
    .ranking-row { min-width: 0; min-height: 92px; grid-template-columns: 42px minmax(0,1fr) auto; grid-template-areas: "position streamer viewers" "movement streamer viewers"; gap: 5px 9px; padding: 12px 11px; }
    .ranking-position { grid-area: position; align-self: end; width: 34px; height: 34px; }
    .rank-movement { grid-area: movement; align-self: start; min-width: 34px; padding: 4px 5px; font-size: 9px; }
    .ranking-streamer { grid-area: streamer; gap: 8px; }
    .ranking-streamer img { width: 64px; }
    .ranking-streamer > .stream-status-dot { width: 8px; height: 8px; }
    .ranking-streamer strong { font-size: 12px; }
    .ranking-streamer small { font-size: 9px; }
    .ranking-mobile-meta { display: flex !important; max-width: 100%; align-items: center; gap: 6px; margin-top: 6px; overflow: hidden; }
    .ranking-mobile-meta b { overflow: hidden; color: #9fa5b2; font-size: 8px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
    .ranking-mobile-meta .platform-badge { font-size: 7px; }
    .ranking-category, .ranking-platform { display: none !important; }
    .ranking-viewers { grid-area: viewers; align-self: center; font-size: 12px; }
}

/* Categories */
.page-content { width: min(1480px, calc(100% - 56px)); margin: 0 auto; padding: 120px 0 72px; }
.intro { max-width: 720px; padding: 28px 0 40px; }
.intro h1 { margin: 8px 0 12px; font-size: clamp(42px,6vw,72px); letter-spacing: -.05em; }
.intro p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 17px; }
.category-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.category-card { position: relative; min-height: 260px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; color: #fff; text-decoration: none; }
.category-card img, .category-card-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.category-card img { object-fit: cover; transition: transform .3s ease; }
.category-card-overlay { background: linear-gradient(180deg, rgba(8,9,12,.08), rgba(8,9,12,.95)); }
.category-card-content { position: absolute; inset: auto 20px 19px; }
.category-card-content span { color: #c4c8d1; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.category-card-content h2 { margin: 5px 0; font-size: 27px; }
.category-card-content p { margin: 0; color: #bdc1cb; font-size: 13px; line-height: 1.4; }
.category-card:hover { border-color: rgba(255,255,255,.24); }
.category-card:hover img { transform: scale(1.035); }

/* Explore 2.0 */
.explore-page { max-width: 1480px; }
.explore-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 22px; padding: 31px; border: 1px solid rgba(47,123,255,.20); border-radius: 18px; background: radial-gradient(circle at 8% 0%, rgba(47,123,255,.16), transparent 46%), var(--panel); }
.explore-intro h1 { margin: 5px 0 9px; font-size: clamp(44px,6vw,78px); line-height: .95; letter-spacing: -.055em; }
.explore-intro > div > p:last-child { max-width: 690px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.explore-live-summary { display: grid; grid-template-columns: repeat(2,minmax(120px,1fr)); flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,12,16,.70); }
.explore-live-summary > div { position: relative; min-width: 150px; padding: 17px 19px; }
.explore-live-summary > div + div { border-left: 1px solid var(--line); }
.explore-live-summary .stream-status-dot { position: absolute; top: 21px; right: 18px; }
.explore-live-summary strong, .explore-live-summary small { display: block; }
.explore-live-summary strong { font-size: 23px; }
.explore-live-summary small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.explore-category-chips { display: flex; gap: 8px; margin: 0 0 12px; padding: 4px 1px; overflow-x: auto; scrollbar-width: none; }
.explore-category-chips::-webkit-scrollbar { display: none; }
.explore-category-chips a { flex: 0 0 auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(16,18,24,.72); color: #c7cbd4; font-size: 11px; font-weight: 800; text-decoration: none; }
.explore-category-chips a:hover, .explore-category-chips a.active { border-color: rgba(47,123,255,.48); background: rgba(47,123,255,.12); color: #fff; }
.explore-category-chips a span { margin-left: 3px; color: #ff7a8e; font-size: 9px; }
.explore-filters { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px; margin-bottom: 30px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.explore-filters label { display: grid; grid-column: span 2; gap: 6px; min-width: 0; }
.explore-filters label > span { color: #737a89; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.explore-filters input, .explore-filters select { width: 100%; min-width: 0; height: 40px; padding: 0 32px 0 11px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #0c0e13; color: #fff; font: inherit; font-size: 11px; }
.explore-filters input { padding-right: 11px; }
.explore-filters input:focus, .explore-filters select:focus { border-color: rgba(47,123,255,.70); box-shadow: 0 0 0 3px rgba(47,123,255,.10); }
.explore-filters .explore-search-filter { grid-column: span 4; }
.explore-filters .explore-category-filter { grid-column: span 4; }
.explore-filter-actions { display: flex; grid-column: span 3; align-items: end; gap: 8px; }
.explore-filter-actions button, .explore-filter-actions a { display: inline-flex; height: 40px; align-items: center; justify-content: center; padding: 0 14px; border-radius: 8px; font: inherit; font-size: 11px; font-weight: 850; text-decoration: none; white-space: nowrap; }
.explore-filter-actions button { border: 0; background: #fff; color: #090a0d; cursor: pointer; }
.explore-filter-actions a { border: 1px solid var(--line); color: var(--muted); }
.explore-filter-actions a:hover { color: #fff; }
.explore-results-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 2px 18px; }
.explore-results-heading h2 { margin: 4px 0; font-size: 28px; }
.explore-results-heading div > p:last-child, .explore-results-heading > span { margin: 0; color: var(--muted); font-size: 10px; }
.explore-page-summary { display: flex; align-items: center; gap: 12px; }
.explore-page-summary span { color: var(--muted); font-size: 10px; }
.explore-page-summary a { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; color: #fff; font-size: 10px; font-weight: 800; text-decoration: none; }
.explore-page-summary a:hover { border-color: rgba(47,123,255,.62); }
.explore-stream-grid { row-gap: 28px; }
.explore-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.explore-card-meta > span { overflow: hidden; max-width: 52%; padding: 4px 6px; border: 1px solid rgba(255,255,255,.07); border-radius: 5px; text-overflow: ellipsis; white-space: nowrap; }
.explore-card-meta b { margin-left: auto; font-size: 9px; }
.explore-card-meta b.positive { color: var(--green); }
.explore-card-meta b.negative { color: #ff6178; }
.explore-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.explore-pagination a { width: max-content; padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; color: #d4d7df; font-size: 11px; font-weight: 800; text-decoration: none; }
.explore-pagination a:last-child { justify-self: end; }
.explore-pagination strong { color: var(--muted); font-size: 10px; }

@media (max-width: 1100px) {
    .navbar { gap: 28px; }
    .nav-actions .platform-pill { display: none; }
    .live-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .stream-grid.grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 800px) {
    .page-shell, .navbar, .page-content { width: min(100% - 28px,1480px); }
    .nav-links { display: none; }
    .navbar { height: 64px; }
    .nav-actions { margin-left: auto; }
    .mobile-menu-button { display: grid; margin-left: 0; }
    .site-header:has(.mobile-menu-button[aria-expanded="true"]) { background: rgba(8,9,12,.98); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
    .mobile-navigation:not([hidden]) { position: fixed; inset: 64px 0 auto; display: grid; grid-template-columns: 1fr; width: auto; max-height: calc(100vh - 64px); gap: 3px; padding: 14px max(18px,calc((100vw - 720px)/2)); overflow-y: auto; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: rgba(10,11,15,.98); box-shadow: 0 24px 60px rgba(0,0,0,.45); backdrop-filter: blur(20px); }
    .mobile-navigation > a, .mobile-coming-soon { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 0 13px; border-radius: 9px; color: #c9cdd6; font-size: 14px; font-weight: 750; text-decoration: none; }
    .mobile-navigation > a:hover, .mobile-navigation > a[aria-current="page"] { background: rgba(47,123,255,.11); color: #fff; }
    .mobile-coming-soon { color: #717786; }
    .mobile-coming-soon small { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 8px; }
    .mobile-platform-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 9px; padding-top: 13px; border-top: 1px solid var(--line); }
    .mobile-platform-links a { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 6px; padding: 10px 5px; border: 1px solid var(--line); border-radius: 9px; color: #bec3ce; font-size: 10px; font-weight: 800; text-decoration: none; }
    .mobile-platform-links i { width: 7px; height: 7px; border-radius: 50%; }
    .mobile-platform-links .twitch i { background: var(--purple); box-shadow: 0 0 9px var(--purple); }
    .mobile-platform-links .kick i { background: var(--green); box-shadow: 0 0 9px var(--green); }
    .mobile-platform-links .youtube i { background: var(--red); box-shadow: 0 0 9px var(--red); }
    body.mobile-menu-open { overflow: hidden; }
    .hero { min-height: 610px; }
    .hero::before { background: linear-gradient(90deg, rgba(6,7,10,.96), rgba(6,7,10,.42)), linear-gradient(0deg,var(--bg),transparent 45%); }
    .hero-content { padding-bottom: 100px; }
    .hero h1 { font-size: clamp(48px,14vw,76px); }
    .live-overview-heading { display: block; }
    .overview-freshness { width: max-content; margin-top: 16px; }
    .discovery-header { display: block; padding-top: 48px; }
    .quick-links { justify-content: flex-start; margin-top: 20px; }
    .stream-grid.grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 540px) {
    .login-nav-link { display: none; }
    .create-account-nav { padding: 8px 10px; font-size: 10px; }
    .mobile-create-account { border: 1px solid rgba(190,155,255,.45); background: rgba(47,123,255,.14); color: #fff !important; }
    .hero { min-height: 590px; }
    .hero-stream-title { font-size: 15px; }
    .hero-actions { flex-direction: column; align-items: stretch; max-width: 260px; text-align: center; }
    .live-overview { padding: 18px; }
    .live-overview-grid { grid-template-columns: 1fr; }
    .overview-stat, .overview-ranking { min-height: 112px; padding: 17px; }
    .stream-card { flex-basis: min(82vw,310px); }
    .stream-grid.grid { grid-template-columns: 1fr; }
    .category-grid { grid-template-columns: 1fr; }
    .category-card { min-height: 230px; }
}

/* Streamer profile */
.solid-header { background: rgba(8,9,12,.88); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.profile-page { --profile-accent: #59e1ff; --profile-accent-rgb: 169,117,255; padding-top: 106px; padding-bottom: 80px; }
.profile-theme-kick { --profile-accent: #53fc18; --profile-accent-rgb: 83,252,24; }
.profile-theme-twitch { --profile-accent: #4d96ff; --profile-accent-rgb: 169,112,255; }
.profile-theme-youtube { --profile-accent: #ff3f4f; --profile-accent-rgb: 255,63,79; }
.back-link { display: inline-block; margin-bottom: 22px; color: var(--muted); font-size: 13px; font-weight: 750; text-decoration: none; }
.back-link:hover { color: #fff; }
.profile-hero { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(320px,.75fr); gap: 34px; align-items: center; }
.profile-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; border: 1px solid rgba(var(--profile-accent-rgb),.24); border-radius: 18px; background: #000; color: #fff; text-decoration: none; box-shadow: 0 30px 90px rgba(0,0,0,.38), 0 0 70px rgba(var(--profile-accent-rgb),.06); }
.profile-player-poster { position: absolute; inset: 0; cursor: pointer; }
.profile-media img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .3s ease; }
.profile-player-poster:hover img { transform: scale(1.015); }
.profile-media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.55)); }
.profile-play { position: absolute; inset: 50% auto auto 50%; display: grid; width: 68px; height: 68px; place-items: center; padding: 0 0 0 4px; transform: translate(-50%,-50%); border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: #090a0d; font: inherit; font-size: 25px; cursor: pointer; box-shadow: 0 12px 40px rgba(0,0,0,.35); transition: transform .2s ease; }
.profile-player-poster:hover .profile-play { transform: translate(-50%,-50%) scale(1.07); }
.profile-watch-label { position: absolute; right: 18px; bottom: 16px; text-align: right; }
.profile-watch-label strong, .profile-watch-label span { display: block; }
.profile-watch-label strong { font-size: 14px; }
.profile-watch-label span { margin-top: 2px; color: #c2c6d0; font-size: 10px; }
.profile-summary h1 { margin: 15px 0 10px; font-size: clamp(42px,5.5vw,76px); line-height: .98; letter-spacing: -.055em; }
.profile-name-row { display: flex; align-items: center; gap: 15px; }
.profile-name-row .stream-status-dot { width: 13px; height: 13px; }
.profile-title { margin: 0 0 20px; color: #c6cad3; font-size: 16px; line-height: 1.55; }
.profile-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.profile-tags a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; color: #cdd0d8; font-size: 11px; font-weight: 750; text-decoration: none; }
.profile-state-card { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding: 12px 14px; border: 1px solid rgba(var(--profile-accent-rgb),.18); border-radius: 10px; background: rgba(var(--profile-accent-rgb),.055); }
.profile-state-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--profile-accent); box-shadow: 0 0 0 6px rgba(var(--profile-accent-rgb),.10), 0 0 15px rgba(var(--profile-accent-rgb),.65); }
.profile-state-card strong, .profile-state-card div > span { display: block; }
.profile-state-card strong { font-size: 12px; }
.profile-state-card div > span { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.profile-state-card.offline { border-color: rgba(255,77,103,.18); background: rgba(255,77,103,.045); }
.profile-state-card.offline .profile-state-dot { background: #ff4d67; box-shadow: 0 0 0 6px rgba(255,77,103,.09); }
.profile-state-card.cached { border-color: rgba(255,183,77,.18); background: rgba(255,183,77,.045); }
.profile-state-card.cached .profile-state-dot { background: #ffb74d; box-shadow: 0 0 0 6px rgba(255,183,77,.09); }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.profile-actions > .secondary-button { display: inline-flex; align-items: center; justify-content: center; margin: 0; text-decoration: none; }
.profile-compare-button { border-color: rgba(var(--profile-accent-rgb),.3); color: #fff; }
.profile-compare-button:hover { border-color: rgba(var(--profile-accent-rgb),.7); background: rgba(var(--profile-accent-rgb),.09); }
.profile-share-button { border-color: rgba(89,225,255,.34); color: #fff; }
.profile-share-button:hover { border-color: rgba(89,225,255,.78); background: rgba(89,225,255,.08); }
.share-rank-dialog { width: min(760px,calc(100vw - 32px)); max-width: none; padding: 24px; border: 1px solid #1c4f7c; border-radius: 16px; background: #080a0f; color: #f6f5ff; box-shadow: 14px 14px 0 #0b2f59, 0 30px 100px rgba(0,0,0,.72); }
.share-rank-dialog::backdrop { background: rgba(1,3,7,.78); backdrop-filter: blur(7px); }
.share-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.share-dialog-heading h2 { margin: 6px 0 0; font-size: clamp(22px,4vw,34px); letter-spacing: -.035em; }
.share-dialog-close { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: transparent; color: #fff; font: inherit; font-size: 25px; line-height: 1; cursor: pointer; }
.share-dialog-close:hover { border-color: #59e1ff; color: #59e1ff; }
.streamwrld-share-card { position: relative; display: flex; aspect-ratio: 1200/630; overflow: hidden; flex-direction: column; padding: clamp(22px,4vw,42px); border: 2px solid #164a7c; background: radial-gradient(circle at 83% 12%,rgba(67,182,255,.20),transparent 27%), linear-gradient(120deg,#05070b 0 61%,#071827 100%); box-shadow: inset 0 0 0 5px #080b11; }
.streamwrld-share-card::before { content: ""; position: absolute; top: -24%; right: -4%; width: 37%; aspect-ratio: 1; border: 1px solid rgba(89,225,255,.22); border-radius: 50%; }
.streamwrld-share-card::after { content: ""; position: absolute; right: 0; bottom: 14%; width: 9%; height: 14px; background: #2f7bff; box-shadow: 25px 20px 0 #59e1ff, -25px -20px 0 #15365a; }
.share-card-topline { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; font-family: "Press Start 2P", monospace; font-size: clamp(7px,1.2vw,11px); }
.share-card-topline em { margin-left: auto; color: #59e1ff; font-style: normal; letter-spacing: .08em; }
.share-card-globe { position: relative; display: block; width: 31px; height: 31px; flex: 0 0 31px; border: 2px solid #96ddff; border-radius: 50%; background: #1683c3; box-shadow: inset 0 -7px 0 #08609c, 0 4px 0 #0a315e; }
.share-card-globe::before { content: ""; position: absolute; width: 10px; height: 7px; top: 5px; left: 5px; background: #78cf48; clip-path: polygon(0 25%,35% 0,100% 15%,82% 68%,42% 100%,9% 72%); }
.share-card-globe::after { content: ""; position: absolute; width: 11px; height: 8px; right: 3px; bottom: 5px; background: #78cf48; clip-path: polygon(15% 0,75% 16%,100% 64%,57% 100%,0 70%); }
.share-card-body { position: relative; z-index: 1; margin: auto 0; }
.share-card-body p { margin: 0 0 10px; color: #59e1ff; font-family: "Press Start 2P", monospace; font-size: clamp(7px,1.35vw,12px); line-height: 1.7; }
.share-card-body strong { display: block; color: #fff; font-size: clamp(52px,11vw,108px); line-height: .88; letter-spacing: -.07em; }
.share-card-body h3 { max-width: 82%; overflow: hidden; margin: 12px 0 0; color: #fff; font-size: clamp(23px,5vw,50px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.share-card-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.16); color: #c9d0db; font-size: clamp(9px,1.55vw,14px); }
.share-card-footer span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-dialog-note { margin: 13px 0 0; color: #8e96a4; font-size: 11px; line-height: 1.5; }
.share-dialog-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.share-dialog-actions .primary-button, .share-dialog-actions .secondary-button { margin: 0; cursor: pointer; }
.share-dialog-feedback { min-height: 18px; margin: 10px 0 0; color: #59e1ff; font-size: 11px; }
.profile-cta { display: inline-flex; margin: 0; border: 0; background: var(--profile-accent); color: #07080a; cursor: pointer; font-family: inherit; font-weight: 850; box-shadow: 0 9px 28px rgba(var(--profile-accent-rgb),.18); }
.profile-cta:hover { filter: brightness(1.08); }
.profile-external-link { display: inline-block; }
.profile-more-actions { position: relative; }
.profile-more-actions > summary { gap: 8px; list-style: none; cursor: pointer; }
.profile-more-actions > summary::-webkit-details-marker { display: none; }
.profile-more-actions > summary span, .chart-advanced > summary span, .profile-more-stats > summary span { transition: transform .18s ease; }
.profile-more-actions[open] > summary span, .chart-advanced[open] > summary span, .profile-more-stats[open] > summary span { transform: rotate(180deg); }
.profile-action-menu { position: absolute; z-index: 8; top: calc(100% + 8px); right: 0; display: grid; width: 235px; overflow: hidden; padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: #111319; box-shadow: 0 18px 45px rgba(0,0,0,.42); }
.profile-action-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 7px; color: #e7e9ee; font-size: 11px; font-weight: 800; text-decoration: none; }
.profile-action-menu a:hover { background: rgba(var(--profile-accent-rgb),.1); color: #fff; }
.provider-disclosure { margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.embedded-stream-player { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.profile-media.is-playing { border-color: rgba(47,123,255,.34); }
.profile-stat-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 34px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.profile-stat-grid > div, .profile-stat-grid > a { position: relative; padding: 19px 21px; border-right: 1px solid var(--line); }
.profile-stat-grid > :last-child { border-right: 0; }
.profile-stat-grid span, .profile-stat-grid strong, .profile-stat-grid small { display: block; }
.profile-stat-grid span { color: #777e8e; font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.profile-stat-grid strong { margin: 5px 0 2px; font-size: 24px; }
.profile-stat-grid small { color: var(--muted); font-size: 11px; }
.profile-stat-grid .momentum-stat.up strong { color: #61e7a0; }
.profile-stat-grid .momentum-stat.down strong { color: #ff6f85; }
.profile-stat-grid .momentum-stat.flat strong { color: #d7dbe4; }
.profile-stat-grid .momentum-stat.pending strong { color: #8a91a0; font-size: 17px; }
.profile-stat-grid .rank-stat-label { display: flex; align-items: center; gap: 6px; }
.profile-stat-link { color: inherit; text-decoration: none; transition: background .16s ease, box-shadow .16s ease; }
.profile-stat-grid > .profile-stat-link::after, .rank-stat > .profile-stat-link::after { content: "→"; position: absolute; right: 18px; bottom: 17px; color: var(--purple); opacity: .72; transition: transform .16s ease, opacity .16s ease; }
.profile-stat-grid > .profile-stat-link:hover, .rank-stat > .profile-stat-link:hover { background: rgba(47,123,255,.075); box-shadow: inset 0 0 0 1px rgba(47,123,255,.16); }
.profile-stat-grid > .profile-stat-link:hover::after, .rank-stat > .profile-stat-link:hover::after { transform: translateX(3px); opacity: 1; }
.profile-stat-link:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
.profile-stat-grid > .rank-stat { padding: 0; }
.rank-stat > .profile-stat-link { position: relative; display: block; min-height: 100%; padding: 19px 52px 19px 21px; }
.rank-stat > .rank-info-button { position: absolute; z-index: 2; top: 18px; right: 21px; }
.rank-info-button { display: inline-grid; width: 17px; height: 17px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.055); color: #aeb4c0; font: inherit; font-size: 10px; font-weight: 900; line-height: 1; cursor: pointer; }
.rank-info-button:hover, .rank-info-button[aria-expanded="true"] { border-color: rgba(47,123,255,.65); background: rgba(47,123,255,.14); color: #fff; }
.profile-stat-grid .rank-info-popover { margin: 0 21px 19px; padding: 12px; border: 1px solid rgba(47,123,255,.22); border-radius: 9px; background: #0c0e13; }
.profile-stat-grid .rank-info-popover[hidden] { display: none; }
.profile-stat-grid .rank-info-popover strong { margin: 0 0 5px; font-size: 12px; }
.rank-info-popover p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.profile-stats-note { margin: 9px 3px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.profile-more-stats { margin-top: 14px; }
.profile-more-stats > summary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; color: #c9cdd6; font-size: 11px; font-weight: 800; list-style: none; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.profile-more-stats > summary::-webkit-details-marker { display: none; }
.profile-more-stats > summary:hover, .profile-more-stats[open] > summary { border-color: rgba(47,123,255,.45); background: rgba(47,123,255,.07); color: #fff; }
.profile-more-stats > .performance-panel { margin-top: 10px; }
.performance-panel { margin-top: 24px; }
.performance-heading { align-items: center; margin-bottom: 16px; }
.performance-heading .status-chip { white-space: nowrap; }
.performance-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.performance-grid article, .performance-grid .performance-rank-link { position: relative; min-width: 0; min-height: 112px; padding: 17px; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; background: rgba(8,10,14,.56); }
.performance-grid article > span, .performance-grid article > strong, .performance-grid article > small, .performance-grid .performance-rank-link > span, .performance-grid .performance-rank-link > strong, .performance-grid .performance-rank-link > small, .normal-level-stat div > span, .normal-level-stat div > strong, .normal-level-stat div > small { display: block; }
.performance-grid article > span, .performance-grid .performance-rank-link > span, .normal-level-stat div > span { color: #737a89; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.performance-grid article > strong, .performance-grid .performance-rank-link > strong, .normal-level-stat div > strong { overflow-wrap: anywhere; margin: 9px 0 5px; font-size: clamp(18px,2vw,25px); line-height: 1.05; font-variant-numeric: tabular-nums; }
.performance-grid article > small, .performance-grid .performance-rank-link > small, .normal-level-stat div > small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.performance-rank-link::after { content: "→"; position: absolute; right: 16px; bottom: 14px; color: var(--purple); }
.performance-grid .momentum-stat.up strong, .normal-level-stat.up strong { color: #61e7a0; }
.performance-grid .momentum-stat.down strong, .normal-level-stat.down strong { color: #ff6f85; }
.performance-grid .momentum-stat.flat strong, .normal-level-stat.flat strong { color: #d7dbe4; }
.performance-grid .momentum-stat.pending strong { color: #8a91a0; font-size: 17px; }
.performance-grid .normal-level-stat { display: flex; grid-column: 1/-1; min-height: 92px; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(120deg,rgba(47,123,255,.10),rgba(8,10,14,.65)); }
.normal-level-stat div { min-width: 0; }
.normal-level-stat i { display: block; flex: 0 0 88px; height: 7px; border-radius: 999px; background: #737a89; box-shadow: 0 0 18px rgba(115,122,137,.2); }
.normal-level-stat.up i { background: #61e7a0; box-shadow: 0 0 18px rgba(97,231,160,.32); }
.normal-level-stat.down i { background: #ff6f85; box-shadow: 0 0 18px rgba(255,111,133,.28); }
.performance-note { margin: 13px 2px 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.profile-columns { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
.profile-panel { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.panel-heading h2 { margin: 5px 0 0; font-size: 25px; }
.status-chip { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 800; }
.empty-community { max-width: 470px; margin: 35px auto 18px; text-align: center; }
.empty-community-icon { color: #6e7482; font-size: 42px; }
.empty-community h3 { margin: 9px 0 7px; }
.empty-community p, .panel-note { color: var(--muted); font-size: 13px; line-height: 1.55; }
.community-trait { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.community-trait strong, .community-trait span { display: block; }
.community-trait div span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.community-trait.muted { opacity: .58; }
.verified-trait { color: var(--green); }
.panel-note { margin: 16px 2px 0; }
.similar-section { margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--line); }
.section-link { align-self: end; color: #c8ccd5; font-size: 11px; font-weight: 800; text-decoration: none; }
.section-link:hover { color: #fff; }
.chart-panel { overflow: hidden; }
.chart-heading { display: grid; grid-template-columns: minmax(190px,.35fr) minmax(0,1fr); align-items: end; gap: 28px; }
.chart-controls { display: grid; gap: 8px; min-width: 0; }
.chart-primary-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.chart-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.chart-control-group { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chart-metric-group { justify-content: flex-end; }
.chart-control-label { color: #6f7686; font-size: 8px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.chart-types, .chart-intervals, .chart-metrics, .chart-periods { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #0c0e13; }
.chart-types button, .chart-intervals button, .chart-metrics button, .chart-periods button { padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.chart-types button:hover, .chart-intervals button:hover, .chart-metrics button:hover, .chart-periods button:hover { color: #fff; }
.chart-types button.active, .chart-intervals button.active, .chart-metrics button.active, .chart-periods button.active { background: #fff; color: #0a0b0e; }
.chart-intervals.is-daily { opacity: .42; }
.chart-intervals button:disabled { cursor: not-allowed; }
.chart-advanced { justify-self: end; }
.chart-advanced > summary { display: inline-flex; align-items: center; gap: 7px; float: right; padding: 5px 2px; color: #8f96a5; font-size: 9px; font-weight: 800; list-style: none; cursor: pointer; }
.chart-advanced > summary::-webkit-details-marker { display: none; }
.chart-advanced > summary:hover, .chart-advanced[open] > summary { color: #fff; }
.chart-advanced-controls { clear: both; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.viewer-chart-wrap { position: relative; height: 330px; margin-top: 19px; overflow: hidden; border: 1px solid rgba(255,255,255,.055); border-radius: 11px; background: #0c0e13; }
#viewer-chart { display: block; width: 100%; height: 100%; }
.chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.chart-empty[hidden], #viewer-chart[hidden] { display: none; }
.chart-empty strong { margin-top: 13px; font-size: 16px; }
.chart-empty p { max-width: 390px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.chart-pulse { width: 11px; height: 11px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 7px rgba(47,123,255,.13); animation: chart-pulse 1.8s ease-in-out infinite; }
@keyframes chart-pulse { 50% { box-shadow: 0 0 0 13px rgba(47,123,255,0); } }
.chart-tooltip { position: absolute; z-index: 4; max-width: calc(100% - 16px); padding: 8px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; background: rgba(6,7,10,.94); color: #e8eaf0; font-size: 10px; font-weight: 700; pointer-events: none; white-space: nowrap; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.chart-footer { display: flex; align-items: center; gap: 14px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.chart-footer span:last-child { margin-left: auto; }
.chart-footer i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 2px; }
.chart-footer b { font-weight: inherit; }
.chart-legend-up { background: var(--green); }
.chart-legend-down { background: #ff4d67; }
.chart-legend-line { width: 12px !important; height: 3px !important; border-radius: 999px !important; background: var(--purple); }
.candle-legend { display: none; }
.chart-mode-candles .candle-legend { display: inline; }
.chart-mode-candles .line-legend { display: none; }
.profile-community-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.community-preview-body { display: flex; align-items: center; gap: 15px; margin-top: 20px; padding: 15px; border: 1px dashed rgba(255,255,255,.10); border-radius: 10px; }
.community-preview-icon { flex: 0 0 auto; color: #777e8e; font-size: 32px; }
.community-preview-body strong { display: block; font-size: 13px; }
.community-preview-body p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.community-strip-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.community-strip-items .community-trait { margin: 0; }

@media (max-width: 900px) {
    .explore-intro { display: block; }
    .explore-live-summary { width: 100%; margin-top: 22px; }
    .explore-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .explore-filters label, .explore-filters .explore-search-filter, .explore-filters .explore-category-filter { grid-column: span 1; }
    .explore-filters .explore-search-filter, .explore-filters .explore-category-filter { grid-column: 1 / -1; }
    .explore-filter-actions { grid-column: 1 / -1; }
    .profile-hero { grid-template-columns: 1fr; }
    .profile-summary { max-width: 700px; }
    .profile-stat-grid { grid-template-columns: repeat(3,1fr); }
    .profile-columns { grid-template-columns: 1fr; }
    .chart-heading { grid-template-columns: 1fr; align-items: start; gap: 18px; }
    .chart-toolbar, .chart-primary-controls, .chart-metric-group, .chart-advanced-controls { justify-content: flex-start; }
    .chart-advanced { justify-self: start; }
    .chart-advanced > summary { float: left; }
    .profile-community-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .explore-intro { padding: 22px 19px; }
    .explore-intro h1 { font-size: 47px; }
    .explore-live-summary > div { min-width: 0; padding: 14px; }
    .explore-live-summary .stream-status-dot { top: 18px; right: 13px; }
    .explore-filters { grid-template-columns: 1fr; padding: 13px; }
    .explore-filters label, .explore-filters .explore-search-filter, .explore-filters .explore-category-filter, .explore-filter-actions { grid-column: 1; }
    .explore-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .explore-results-heading { align-items: start; }
    .explore-results-heading > span { padding-top: 8px; white-space: nowrap; }
    .profile-page { padding-top: 88px; }
    .profile-hero { gap: 24px; }
    .profile-play { width: 54px; height: 54px; font-size: 20px; }
    .profile-watch-label { display: none; }
    .profile-summary h1 { font-size: 44px; }
    .profile-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .profile-actions .profile-cta { grid-column: 1/-1; width: 100%; text-align: center; }
    .profile-actions .secondary-button { width: 100%; padding-inline: 10px; justify-content: center; text-align: center; }
    .share-rank-dialog { width: calc(100vw - 20px); padding: 15px; border-radius: 11px; box-shadow: 7px 7px 0 #0b2f59; }
    .streamwrld-share-card { padding: 17px; }
    .share-card-globe { width: 24px; height: 24px; flex-basis: 24px; }
    .share-dialog-actions { display: grid; grid-template-columns: 1fr; }
    .share-dialog-actions .primary-button, .share-dialog-actions .secondary-button { width: 100%; }
    .profile-more-actions { grid-column: 1/-1; min-width: 0; }
    .profile-more-actions > summary { width: 100%; justify-content: center; }
    .profile-action-menu { right: 0; width: min(270px,calc(200vw - 38px)); }
    .profile-stat-grid { grid-template-columns: 1fr; }
    .profile-stat-grid > div, .profile-stat-grid > a { border-right: 0; border-bottom: 1px solid var(--line); }
    .profile-stat-grid > :last-child { border-bottom: 0; }
    .profile-stat-grid > div, .profile-stat-grid > a { padding: 15px; }
    .profile-stat-grid > .rank-stat { padding: 0; }
    .rank-stat > .profile-stat-link { padding: 15px 45px 15px 15px; }
    .rank-stat > .rank-info-button { top: 14px; right: 15px; }
    .profile-stat-grid .rank-info-popover { margin: 0 15px 15px; }
    .profile-stat-grid strong { font-size: 20px; }
    .profile-panel { padding: 18px; }
    .performance-heading { align-items: flex-start; }
    .performance-heading .status-chip { white-space: normal; }
    .chart-heading { display: block; }
    .chart-controls { margin-top: 14px; overflow: hidden; }
    .chart-toolbar, .chart-primary-controls, .chart-advanced-controls { display: grid; grid-template-columns: 1fr; }
    .chart-control-group { display: block; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
    .chart-control-label { display: block; margin: 0 0 5px 2px; }
    .chart-types, .chart-intervals, .chart-metrics, .chart-periods { width: max-content; min-width: 100%; }
    .viewer-chart-wrap { height: 270px; }
    .chart-footer { flex-wrap: wrap; }
    .chart-footer span:last-child { width: 100%; margin-left: 0; }
    .community-strip-items { grid-template-columns: 1fr; }
    .community-preview-body { align-items: flex-start; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.search-hero { margin: 0 0 24px; padding: 28px; border: 1px solid rgba(47,123,255,.22); border-radius: 16px; background: radial-gradient(circle at 20% 0%, rgba(47,123,255,.16), transparent 45%), var(--panel); }
.search-hero h1, .search-hero h2 { max-width: 780px; margin: 5px 0 18px; }
.search-hero h2 { font-size: clamp(24px,3vw,38px); }
.search-intro-copy { max-width: 700px; margin: -8px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.universal-search { display: grid; grid-template-columns: minmax(0,1fr) 180px auto; gap: 8px; }
.search-input-wrap { position: relative; min-width: 0; }
.universal-search input, .universal-search select { width: 100%; min-width: 0; padding: 14px 15px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: #0b0d12; color: #f5f6f8; font: inherit; }
.universal-search input:focus, .universal-search select:focus { border-color: rgba(47,123,255,.75); box-shadow: 0 0 0 3px rgba(47,123,255,.11); }
.universal-search .primary-button { margin: 0; border: 0; cursor: pointer; }
.search-platform-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.search-quick-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 13px; color: var(--muted); font-size: 10px; }
.search-quick-links a { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: #c7cbd4; font-weight: 750; text-decoration: none; }
.search-quick-links a:hover { border-color: rgba(47,123,255,.42); color: #fff; }
.search-suggestions { position: absolute; z-index: 40; inset: calc(100% + 7px) 0 auto; overflow: hidden; border: 1px solid rgba(47,123,255,.24); border-radius: 11px; background: rgba(12,14,19,.98); box-shadow: 0 22px 55px rgba(0,0,0,.48); backdrop-filter: blur(18px); }
.search-suggestions[hidden] { display: none; }
.search-suggestion { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; min-height: 55px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.055); color: #fff; text-decoration: none; }
.search-suggestion:last-child { border-bottom: 0; }
.search-suggestion:hover, .search-suggestion:focus-visible, .search-suggestion.is-selected { background: rgba(47,123,255,.12); outline: 0; }
.search-suggestion span, .search-suggestion strong, .search-suggestion small { display: block; min-width: 0; }
.search-suggestion strong, .search-suggestion small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion strong { font-size: 12px; }
.search-suggestion small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.search-suggestion b { color: #c8ccd5; font-size: 9px; font-variant-numeric: tabular-nums; }
.search-suggestion-platform { padding: 4px 6px; border-radius: 5px; background: #252a38; color: #e5e8ef; font-size: 8px; font-style: normal; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.search-suggestion-platform.twitch { background: #2f7bff; color: #fff; }
.search-suggestion-platform.kick { background: #53fc18; color: #071003; }
.search-suggestion-platform.youtube { background: #f33333; color: #fff; }
.search-suggestion-status { padding: 16px; color: var(--muted); font-size: 10px; text-align: center; }
.search-suggestion-status.loading::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border: 2px solid rgba(47,123,255,.3); border-top-color: var(--purple); border-radius: 50%; animation: search-spin .7s linear infinite; }
@keyframes search-spin { to { transform: rotate(360deg); } }
.search-page { padding-top: 108px; padding-bottom: 80px; }
.compact-search { margin-top: 20px; }
.search-summary { display: flex; gap: 8px; margin: 24px 0; color: var(--muted); }
.search-summary strong { color: #fff; }
.search-profile-list { display: grid; gap: 8px; }
.search-profile-result { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; background: var(--panel); }
.search-profile-result:hover { border-color: rgba(47,123,255,.45); transform: translateY(-1px); }
.search-profile-result img { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; }
.search-profile-result strong, .search-profile-result span { display: block; }
.search-profile-name { display: flex !important; align-items: center; gap: 9px; }
.search-profile-result div span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.search-empty, .catalog-empty { margin-top: 22px; padding: 58px 22px; border: 1px dashed rgba(255,255,255,.12); border-radius: 15px; background: linear-gradient(145deg,rgba(17,19,25,.8),rgba(10,11,15,.9)); color: var(--muted); text-align: center; }
.search-empty-icon, .catalog-empty-icon { display: grid; width: 48px; height: 48px; margin: 0 auto 15px; place-items: center; border: 1px solid rgba(47,123,255,.25); border-radius: 14px; background: rgba(47,123,255,.08); color: #8eeaff; font-size: 26px; }
.search-empty h2, .catalog-empty h2 { margin: 0; color: #fff; font-size: 23px; }
.search-empty p, .catalog-empty p { max-width: 570px; margin: 9px auto 0; font-size: 12px; line-height: 1.6; }
.search-empty > div, .catalog-empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.search-empty .primary-button, .search-empty .secondary-button, .catalog-empty .primary-button, .catalog-empty .secondary-button { padding: 10px 14px; font-size: 11px; }
.catalog-empty { margin: 20px 0 50px; }
.connected-accounts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.favorite-button { cursor: pointer; font: inherit; }
.favorite-button.is-saved { border-color: rgba(255,214,92,.45); color: #ffd65c; }
.platform-badge.youtube, .platform-label.youtube { border-color: rgba(255,48,64,.35); color: #ff7c87; }

.favorites-page { padding-top: 118px; padding-bottom: 80px; }
.favorites-intro { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.favorites-intro h1 { margin: 5px 0 10px; font-size: clamp(38px,6vw,72px); letter-spacing: -.05em; }
.favorites-intro p { margin: 0; color: var(--muted); }
.notification-button { flex: 0 0 auto; cursor: pointer; font: inherit; }
.notification-button:disabled { cursor: default; }
.device-note { margin: 18px 0 30px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 12px; background: var(--panel); }
.favorites-status { display: grid; gap: 7px; padding: 60px 20px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; }
.favorites-status[hidden] { display: none; }
.favorites-status strong { color: #fff; font-size: 20px; }
.favorites-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.favorite-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.favorite-card.is-live { border-color: rgba(97,231,160,.28); }
.favorite-card-link { display: grid; grid-template-columns: 170px minmax(0,1fr); min-width: 0; color: inherit; text-decoration: none; }
.favorite-card-image { position: relative; min-height: 126px; background: #0a0b0e; }
.favorite-card-image img { width: 100%; height: 100%; object-fit: cover; }
.favorite-card-image .live-badge { position: absolute; top: 10px; left: 10px; }
.favorite-card-copy { min-width: 0; padding: 18px; }
.favorite-card-copy h2 { margin: 0 0 6px; font-size: 22px; }
.favorite-card-copy h3 { overflow: hidden; margin: 0 0 6px; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.favorite-name-row { display: flex; align-items: center; gap: 10px; }
.favorite-name-row h2 { min-width: 0; }
.favorite-card-copy p { margin: 0 0 6px; font-size: 12px; }
.favorite-card-copy > span:not(.platform-badge) { display: block; overflow: hidden; margin-bottom: 12px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.favorite-remove { align-self: start; margin: 12px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 10px; cursor: pointer; }
.favorite-remove:hover { color: #ff8797; border-color: rgba(255,77,103,.4); }

.my-hub-page { padding-top: 112px; padding-bottom: 90px; }
.my-hub-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 42px; padding: 34px; border: 1px solid rgba(47,123,255,.22); border-radius: 19px; background: radial-gradient(circle at 8% 0%,rgba(47,123,255,.19),transparent 46%),linear-gradient(125deg,#091624,#101217 62%); }
.my-hub-hero h1 { margin: 6px 0 12px; font-size: clamp(48px,7vw,84px); line-height: .94; letter-spacing: -.06em; }
.my-hub-hero-copy > p:last-of-type { max-width: 720px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.my-hub-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.my-hub-actions .primary-button, .my-hub-actions .secondary-button { margin: 0; }
.my-hub-summary { display: grid; grid-template-columns: repeat(3,minmax(105px,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(8,9,13,.68); }
.my-hub-summary div { min-width: 110px; padding: 22px 18px; }
.my-hub-summary div + div { border-left: 1px solid var(--line); }
.my-hub-summary strong, .my-hub-summary span { display: block; }
.my-hub-summary strong { font-size: 29px; font-variant-numeric: tabular-nums; }
.my-hub-summary span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.my-hub-trust-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 14px 2px 38px; color: var(--muted); font-size: 10px; }
.my-hub-trust-row p { margin: 0; }
.my-hub-preferences { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.my-hub-preferences span { align-self: center; }
.my-hub-preferences b { padding: 5px 8px; border: 1px solid rgba(47,123,255,.22); border-radius: 999px; background: rgba(47,123,255,.08); color: #b8f2ff; font-size: 9px; }
.my-hub-section { margin-top: 42px; }
.my-hub-section[hidden] { display: none; }
.my-hub-section .section-heading { margin-bottom: 14px; }
.my-hub-section .section-heading h2 { margin-top: 4px; font-size: 30px; }
.my-hub-explanation { margin: -5px 0 17px; color: var(--muted); font-size: 10px; }
.my-hub-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.my-hub-card-grid .favorite-card { display: block; }
.my-hub-card-grid .favorite-card-link { display: block; }
.my-hub-card-grid .favorite-card-image { aspect-ratio: 16/9; min-height: 0; }
.my-hub-card-grid .favorite-card-copy { padding: 15px; }
.my-hub-card-grid .favorite-card-title { min-height: 16px; }
.recommendation-reason { display: block; overflow: hidden; margin: 9px 0 12px; color: #8eeaff; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.my-hub-recent-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.my-hub-recent-grid .favorite-card { display: block; }
.my-hub-recent-grid .favorite-card-link { display: block; }
.my-hub-recent-grid .favorite-card-image { aspect-ratio: 16/9; min-height: 0; }
.my-hub-recent-grid .favorite-card-copy { padding: 13px; }
.my-hub-recent-grid .favorite-card-copy h3 { font-size: 15px; }
.text-button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 9px; cursor: pointer; }
.text-button:hover { color: #fff; }
.favorites-status .secondary-button { width: max-content; margin: 10px auto 0; text-decoration: none; }

@media (max-width: 700px) {
    .universal-search { grid-template-columns: 1fr; }
    .universal-search select { width: 100%; }
    .search-hero { padding: 20px; }
    .favorites-intro { display: block; }
    .notification-button { margin-top: 18px; }
    .favorites-grid { grid-template-columns: 1fr; }
    .favorite-card-link { grid-template-columns: 125px minmax(0,1fr); }
    .my-hub-page { padding-top: 92px; }
    .my-hub-hero { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
    .my-hub-hero h1 { font-size: 50px; }
    .my-hub-summary { width: 100%; }
    .my-hub-summary div { min-width: 0; padding: 17px 10px; }
    .my-hub-summary strong { font-size: 23px; }
    .my-hub-trust-row { display: block; margin-bottom: 30px; }
    .my-hub-preferences { justify-content: flex-start; margin-top: 10px; }
    .my-hub-card-grid { grid-template-columns: 1fr; }
    .my-hub-recent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .my-hub-recent-grid .favorite-card-copy { padding: 10px; }
    .my-hub-recent-grid .favorite-card-title { display: none !important; }
    .performance-heading { align-items: start; }
    .performance-heading .status-chip { font-size: 8px; }
    .performance-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .performance-grid article { min-height: 102px; padding: 13px; }
    .performance-grid article > strong { font-size: 18px; }
    .normal-level-stat i { display: none; }
}

@media (min-width: 701px) and (max-width: 1050px) {
    .my-hub-hero { grid-template-columns: 1fr; }
    .my-hub-summary { width: max-content; }
    .my-hub-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .my-hub-recent-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .performance-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Streamer comparison */
.compare-page { padding-top: 108px; padding-bottom: 90px; }
.compare-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 250px; align-items: end; gap: 42px; padding: 38px; overflow: hidden; border: 1px solid rgba(47,123,255,.24); border-radius: 20px; background: radial-gradient(circle at 9% 0%,rgba(47,123,255,.2),transparent 45%),linear-gradient(135deg,#091524,#0e1015 66%); }
.compare-hero::after { content: "VS"; position: absolute; right: 290px; bottom: -36px; color: rgba(255,255,255,.025); font-size: 180px; font-weight: 950; letter-spacing: -.1em; pointer-events: none; }
.compare-hero > * { position: relative; z-index: 1; }
.compare-hero h1 { max-width: 850px; margin: 8px 0 13px; font-size: clamp(43px,6vw,78px); line-height: .94; letter-spacing: -.057em; }
.compare-hero > div > p:last-child { max-width: 760px; margin: 0; color: #a9aebb; font-size: 14px; line-height: 1.65; }
.compare-hero aside { display: grid; gap: 5px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: rgba(8,9,13,.66); }
.compare-hero aside strong { font-size: 21px; }
.compare-hero aside span { color: #b8f2ff; font-size: 11px; font-weight: 800; }
.compare-hero aside small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }

.compare-builder { position: relative; z-index: 8; margin-top: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #111319; }
.compare-builder-heading, .compare-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; }
.compare-builder-heading span { color: #777e8e; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.compare-builder-heading h2 { margin: 5px 0 0; font-size: 25px; letter-spacing: -.035em; }
.compare-builder-heading > strong { padding: 7px 10px; border: 1px solid rgba(47,123,255,.25); border-radius: 999px; background: rgba(47,123,255,.08); color: #b8f2ff; font-size: 10px; }
.compare-selection { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.compare-selected-person, .compare-empty-slot { min-height: 78px; border: 1px solid var(--line); border-radius: 11px; background: #0c0e13; }
.compare-selected-person { position: relative; display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px; }
.compare-selected-person img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
.compare-selected-person div { min-width: 0; }
.compare-selected-person strong, .compare-selected-person span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-selected-person strong { font-size: 14px; }
.compare-selected-person span { margin-top: 5px; color: var(--muted); font-size: 9px; }
.compare-selected-person button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); font-size: 17px; cursor: pointer; }
.compare-selected-person button:hover { border-color: rgba(255,77,103,.45); color: #ff8797; }
.compare-empty-slot { display: flex; align-items: center; justify-content: center; gap: 9px; border-style: dashed; color: #686f7e; }
.compare-empty-slot span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #303440; border-radius: 50%; font-size: 17px; }
.compare-empty-slot small { font-size: 10px; font-weight: 750; }
.compare-search-wrap { position: relative; margin-top: 15px; }
.compare-search-wrap > label { display: block; margin: 0 0 7px 2px; color: #7d8493; font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.compare-search-box { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 49px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #090b0f; }
.compare-search-box:focus-within { border-color: rgba(47,123,255,.56); box-shadow: 0 0 0 3px rgba(47,123,255,.08); }
.compare-search-box > span { color: #8be9ff; font-size: 22px; }
.compare-search-box input { min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 13px; }
.compare-search-box kbd { padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: #11141a; color: #6f7685; font: inherit; font-size: 8px; }
.compare-search-results { position: absolute; z-index: 20; top: calc(100% + 7px); right: 0; left: 0; max-height: 360px; padding: 6px; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; background: rgba(12,14,19,.98); box-shadow: 0 22px 60px rgba(0,0,0,.5); backdrop-filter: blur(18px); }
.compare-search-results[hidden] { display: none; }
.compare-search-result { display: grid; width: 100%; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.compare-search-result:hover { background: rgba(47,123,255,.1); }
.compare-search-result img { width: 46px; height: 46px; object-fit: cover; border-radius: 7px; }
.compare-search-result > span { min-width: 0; }
.compare-search-result strong, .compare-search-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-search-result strong { font-size: 12px; }
.compare-search-result small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.compare-search-result i { color: #9decff; font-size: 9px; font-style: normal; font-weight: 850; }
.compare-search-empty { margin: 0; padding: 20px; color: var(--muted); font-size: 11px; text-align: center; }

.compare-chart-panel, .compare-scoreboard { margin-top: 18px; padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: #111319; }
.compare-section-heading h2 { margin: 5px 0 0; font-size: 27px; letter-spacing: -.035em; }
.compare-section-heading > div > p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.compare-section-heading > span { color: var(--muted); font-size: 9px; }
.compare-periods { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #0b0d12; }
.compare-periods button { padding: 8px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.compare-periods button.active { background: #fff; color: #090a0d; }
.compare-chart-wrap { position: relative; height: 380px; margin-top: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.055); border-radius: 12px; background: #0b0d12; }
#comparison-chart { display: block; width: 100%; height: 100%; }
.compare-chart-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 7px; padding: 25px; color: var(--muted); text-align: center; }
.compare-chart-empty[hidden] { display: none; }
.compare-chart-empty strong { color: #fff; font-size: 18px; }
.compare-chart-empty span { font-size: 10px; }
.compare-chart-legend { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 12px; color: #b5bac5; font-size: 10px; }
.compare-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.compare-chart-legend i { width: 15px; height: 3px; border-radius: 999px; }
.compare-data-note { margin: 14px 0 0; color: #747b8a; font-size: 9px; line-height: 1.55; }

.compare-person-heads, .compare-matrix { display: grid; grid-template-columns: minmax(155px,.72fr) repeat(var(--compare-count),minmax(170px,1fr)); }
.compare-person-heads { margin-top: 19px; border: 1px solid var(--line); border-radius: 12px 12px 0 0; background: #0d0f14; }
.compare-person-heads > * { min-width: 0; padding: 13px; }
.compare-person-heads > * + * { border-left: 1px solid var(--line); }
.compare-person-head { position: relative; display: grid; grid-template-columns: 45px auto minmax(0,1fr); align-items: center; gap: 9px; color: #fff; text-decoration: none; }
.compare-person-head:hover { background: rgba(255,255,255,.025); }
.compare-person-head img { width: 45px; height: 45px; object-fit: cover; border-radius: 7px; }
.compare-person-head > div { min-width: 0; }
.compare-person-head strong { display: block; overflow: hidden; margin-bottom: 5px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.compare-person-head .platform-badge { display: inline-block; }
.compare-matrix { overflow: hidden; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; }
.compare-matrix > div { min-width: 0; min-height: 82px; padding: 16px 14px; border-top: 1px solid rgba(255,255,255,.055); }
.compare-metric-label { display: flex; flex-direction: column; justify-content: center; }
.compare-metric-label > strong { color: #d5d8df; font-size: 11px; }
.compare-metric-label > span { margin-top: 4px; color: #6f7685; font-size: 8px; line-height: 1.4; }
.compare-person-heads > .compare-metric-label { color: #777e8e; font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.compare-value { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,.055); }
.compare-value > strong { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.compare-value > span { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.compare-value.momentum-stat.up > strong { color: var(--green); }
.compare-value.momentum-stat.down > strong { color: #ff6178; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(83,252,24,.75); }
.compare-waiting { margin-top: 18px; padding: 75px 25px; border: 1px dashed rgba(47,123,255,.25); border-radius: 16px; background: radial-gradient(circle at 50% 0%,rgba(47,123,255,.09),transparent 45%),#0e1015; text-align: center; }
.compare-waiting > span { display: grid; width: 54px; height: 54px; margin: 0 auto 16px; place-items: center; border: 1px solid rgba(47,123,255,.33); border-radius: 16px; background: rgba(47,123,255,.09); color: #a4edff; font-size: 15px; font-weight: 950; }
.compare-waiting h2 { margin: 0; font-size: 25px; }
.compare-waiting p { max-width: 550px; margin: 9px auto 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

@media (max-width: 900px) {
    .compare-hero { grid-template-columns: 1fr; gap: 25px; padding: 27px; }
    .compare-hero aside { width: min(100%,330px); }
    .compare-selection { grid-template-columns: 1fr; }
    .compare-empty-slot { min-height: 58px; }
    .compare-scoreboard { overflow-x: auto; }
    .compare-person-heads, .compare-matrix { min-width: 720px; }
}

@media (max-width: 600px) {
    .compare-page { padding-top: 90px; }
    .compare-hero { padding: 22px; }
    .compare-hero h1 { font-size: 47px; }
    .compare-builder, .compare-chart-panel, .compare-scoreboard { padding: 16px; }
    .compare-builder-heading, .compare-section-heading { align-items: flex-start; }
    .compare-section-heading { display: block; }
    .compare-periods { width: max-content; max-width: 100%; margin-top: 15px; overflow-x: auto; }
    .compare-chart-wrap { height: 300px; }
    .compare-search-box kbd { display: none; }
}

/* Account and authentication */
.account-nav-link { padding: 8px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #fff; font-size: 10px; font-weight: 850; text-decoration: none; }
.account-nav-link:hover, .account-nav-link[aria-current="page"] { border-color: rgba(47,123,255,.5); background: rgba(47,123,255,.12); }
.account-page { min-height: 100vh; padding-top: 126px; padding-bottom: 90px; }
.account-intro { max-width: 780px; margin-bottom: 34px; }
.account-intro h1 { max-width: 720px; margin: 8px 0 14px; font-size: clamp(42px,6vw,78px); line-height: .98; letter-spacing: -.055em; }
.account-intro > p:last-child { max-width: 620px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.account-shell { display: grid; grid-template-columns: minmax(240px,.65fr) minmax(390px,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #0d0f14; box-shadow: 0 30px 90px rgba(0,0,0,.24); }
.account-benefits { display: grid; align-content: center; gap: 24px; padding: clamp(28px,5vw,62px); border-right: 1px solid var(--line); background: radial-gradient(circle at 10% 10%,rgba(145,70,255,.2),transparent 38%),linear-gradient(145deg,#10121a,#090a0e); }
.account-benefits span { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; color: #d8dbe4; font-size: 12px; line-height: 1.45; }
.account-benefits b { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(47,123,255,.32); border-radius: 10px; color: #9decff; font-size: 9px; }
.auth-card { min-height: 560px; padding: clamp(28px,5vw,62px); }
.auth-status { margin-bottom: 18px; padding: 11px 13px; border: 1px solid rgba(47,123,255,.25); border-radius: 9px; background: rgba(47,123,255,.08); color: #b9f3ff; font-size: 11px; line-height: 1.5; }
.auth-status[data-type="error"] { border-color: rgba(255,77,103,.34); background: rgba(255,77,103,.08); color: #ff9aaa; }
.auth-status[data-type="success"] { border-color: rgba(97,231,160,.3); background: rgba(97,231,160,.08); color: #91edbd; }
.auth-panel h2 { margin: 6px 0 10px; font-size: clamp(27px,3vw,40px); letter-spacing: -.04em; }
.auth-panel > p:not(.eyebrow) { max-width: 510px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 28px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: #090a0d; }
.auth-tabs button { padding: 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.auth-tabs button.active { background: #1a1d25; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.22); }
.auth-form { display: grid; gap: 15px; }
.auth-form[hidden], .auth-panel[hidden], [data-auth-root] [hidden] { display: none !important; }
.auth-form h2 { margin-bottom: 3px; }
.auth-form label:not(.consent-row) { display: grid; gap: 7px; color: #d5d8e0; font-size: 10px; font-weight: 800; }
.auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="text"] { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #090a0e; color: #fff; font: inherit; font-size: 13px; }
.auth-form input:focus { border-color: rgba(47,123,255,.7); box-shadow: 0 0 0 3px rgba(47,123,255,.1); }
.auth-form small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.auth-form .primary-button { justify-content: center; width: 100%; margin-top: 3px; border: 0; cursor: pointer; }
.auth-form .text-button { justify-self: center; }
.consent-row { display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start; color: var(--muted); font-size: 9px; line-height: 1.55; }
.consent-row input { margin-top: 2px; accent-color: var(--purple); }
.account-email { word-break: break-word; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.account-actions .secondary-button { cursor: pointer; }
.auth-switch { margin: 20px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.auth-switch a { color: #b9f3ff; font-weight: 850; text-decoration: none; }
.auth-switch a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 900px) {
    .account-shell { grid-template-columns: 1fr; }
    .account-benefits { grid-template-columns: repeat(3,1fr); padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); }
    .account-benefits span { grid-template-columns: 1fr; align-content: start; }
}

@media (max-width: 600px) {
    .account-page { padding-top: 96px; }
    .account-intro h1 { font-size: 46px; }
    .account-benefits { grid-template-columns: 1fr; gap: 14px; }
    .account-benefits span { grid-template-columns: 34px 1fr; }
    .auth-card { min-height: 0; padding: 24px 18px; }
    .account-actions { display: grid; }
    .account-actions .primary-button, .account-actions .secondary-button { justify-content: center; width: 100%; }
}

/* Shared Streamwrld visual system — every page follows the home screen */
.site-page.home-arcade {
    --page-border: #172d47;
    --page-border-soft: #29242f;
    --page-shadow: #0b1c2e;
    --page-surface: #0b0b0f;
    --page-surface-raised: #101014;
    min-width: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 82% 4%, rgba(47,123,255,.055), transparent 26rem),
        #050506;
}

.site-page.home-arcade .page-shell,
.site-page.home-arcade .page-content,
.site-page.home-arcade .navbar {
    width: min(1380px, calc(100% - 56px));
}

.site-page.home-arcade .ranking-page,
.site-page.home-arcade .search-page,
.site-page.home-arcade .compare-page,
.site-page.home-arcade .my-hub-page,
.site-page.home-arcade .account-page,
.site-page.home-arcade .profile-page,
.site-page.home-arcade .page-content {
    padding-top: 112px;
    padding-bottom: 86px;
}

.site-page.home-arcade h1,
.site-page.home-arcade .ranking-intro h1,
.site-page.home-arcade .explore-intro h1,
.site-page.home-arcade .search-hero h1,
.site-page.home-arcade .compare-hero h1,
.site-page.home-arcade .my-hub-hero h1,
.site-page.home-arcade .account-intro h1,
.site-page.home-arcade .profile-summary h1 {
    font-family: "Bungee Inline", Impact, sans-serif;
    font-weight: 400;
    letter-spacing: -.045em;
}

.site-page.home-arcade .eyebrow,
.site-page.home-arcade .ranking-board-meta > div:first-child > span,
.site-page.home-arcade .explore-filters label > span,
.site-page.home-arcade .ranking-filters label > span,
.site-page.home-arcade .chart-control-label,
.site-page.home-arcade .compare-builder-heading span,
.site-page.home-arcade .compare-person-heads > .compare-metric-label {
    color: #59e1ff;
    font-family: "Press Start 2P", monospace;
    font-size: 7px;
    font-weight: 400;
    letter-spacing: .04em;
    line-height: 1.65;
}

.site-page.home-arcade .ranking-intro,
.site-page.home-arcade .explore-intro,
.site-page.home-arcade .search-hero,
.site-page.home-arcade .compare-hero,
.site-page.home-arcade .my-hub-hero,
.site-page.home-arcade .account-intro {
    margin-top: 0;
    margin-bottom: 22px;
    padding: 28px 30px;
    border: 3px solid var(--page-border);
    border-radius: 0;
    background:
        linear-gradient(120deg, rgba(17,43,70,.34), transparent 43%),
        var(--page-surface);
    box-shadow: 7px 7px 0 var(--page-shadow);
}

.site-page.home-arcade .ranking-intro::after,
.site-page.home-arcade .compare-hero::after { display: none; }

.site-page.home-arcade .account-intro { max-width: none; }
.site-page.home-arcade .account-intro > p:last-child { max-width: 720px; }

.site-page.home-arcade .ranking-intro h1,
.site-page.home-arcade .explore-intro h1,
.site-page.home-arcade .compare-hero h1,
.site-page.home-arcade .my-hub-hero h1,
.site-page.home-arcade .account-intro h1 {
    margin: 9px 0 12px;
    font-size: clamp(36px, 5vw, 66px);
    line-height: 1;
}

/* Explore keeps the same 8-bit headline face as the home-screen logo. */
.site-page.home-arcade .explore-intro h1 {
    font-family: "Press Start 2P", monospace;
    font-size: clamp(30px, 4.2vw, 58px);
    letter-spacing: -.065em;
    line-height: 1.15;
}

.site-page.home-arcade .ranking-intro p:not(.eyebrow),
.site-page.home-arcade .explore-intro > div > p:last-child,
.site-page.home-arcade .compare-hero > div > p:last-child,
.site-page.home-arcade .my-hub-hero-copy > p:last-of-type,
.site-page.home-arcade .account-intro > p:last-child,
.site-page.home-arcade .search-intro-copy {
    color: #aaa5b2;
    font-size: 13px;
    line-height: 1.65;
}

.site-page.home-arcade .ranking-card,
.site-page.home-arcade .ranking-filters,
.site-page.home-arcade .explore-filters,
.site-page.home-arcade .account-shell,
.site-page.home-arcade .profile-media,
.site-page.home-arcade .profile-stat-grid,
.site-page.home-arcade .profile-panel,
.site-page.home-arcade .performance-panel,
.site-page.home-arcade .compare-builder,
.site-page.home-arcade .compare-chart-panel,
.site-page.home-arcade .compare-scoreboard,
.site-page.home-arcade .compare-waiting,
.site-page.home-arcade .my-hub-summary,
.site-page.home-arcade .my-hub-section,
.site-page.home-arcade .favorites-status,
.site-page.home-arcade .catalog-empty,
.site-page.home-arcade .search-empty {
    border-color: var(--page-border-soft);
    border-radius: 0;
    background-color: var(--page-surface);
    box-shadow: 5px 5px 0 rgba(11,28,46,.82);
}

.site-page.home-arcade .ranking-scope-tabs,
.site-page.home-arcade .ranking-scope-tabs a,
.site-page.home-arcade .explore-category-chips a,
.site-page.home-arcade .status-chip,
.site-page.home-arcade .ranking-board-stats > span,
.site-page.home-arcade .compare-periods,
.site-page.home-arcade .compare-periods button,
.site-page.home-arcade .profile-tags a,
.site-page.home-arcade .profile-state-card,
.site-page.home-arcade .profile-more-stats > summary,
.site-page.home-arcade .chart-types,
.site-page.home-arcade .chart-metrics,
.site-page.home-arcade .chart-periods,
.site-page.home-arcade .chart-types button,
.site-page.home-arcade .chart-metrics button,
.site-page.home-arcade .chart-periods button,
.site-page.home-arcade .auth-status,
.site-page.home-arcade .auth-form input,
.site-page.home-arcade .universal-search input,
.site-page.home-arcade .universal-search select,
.site-page.home-arcade .explore-filters input,
.site-page.home-arcade .explore-filters select,
.site-page.home-arcade .ranking-filters select {
    border-radius: 0;
}

.site-page.home-arcade .primary-button,
.site-page.home-arcade .secondary-button,
.site-page.home-arcade .ranking-filters button,
.site-page.home-arcade .ranking-filters > a,
.site-page.home-arcade .explore-filter-actions button,
.site-page.home-arcade .explore-filter-actions a,
.site-page.home-arcade .explore-page-summary a,
.site-page.home-arcade .explore-pagination a {
    border-radius: 0;
    font-family: "Press Start 2P", monospace;
    font-size: 7px;
    font-weight: 400;
    line-height: 1.5;
}

.site-page.home-arcade .ranking-filters button,
.site-page.home-arcade .explore-filter-actions button,
.site-page.home-arcade .primary-button {
    border: 2px solid #fff;
    background: #f7f5ff;
    color: #050506;
    box-shadow: 4px 4px 0 #1f62c9;
}

.site-page.home-arcade .ranking-filters > a,
.site-page.home-arcade .explore-filter-actions a,
.site-page.home-arcade .secondary-button {
    border: 2px solid #2f7bff;
    background: #071525;
    color: #fff;
    box-shadow: 4px 4px 0 #102d5a;
}

.site-page.home-arcade .ranking-filters button:hover,
.site-page.home-arcade .explore-filter-actions button:hover,
.site-page.home-arcade .primary-button:hover,
.site-page.home-arcade .secondary-button:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #102d5a;
}

.site-page.home-arcade .stream-card,
.site-page.home-arcade .ranking-row,
.site-page.home-arcade .compare-selected-person,
.site-page.home-arcade .favorite-card {
    border-radius: 0;
}

.site-page.home-arcade .provider-warning { margin-block: 18px 24px; }
.site-page.home-arcade .back-link { color: #8eeaff; font-family: "Press Start 2P", monospace; font-size: 7px; }
.site-page.home-arcade .profile-hero { margin-top: 3px; }
.site-page.home-arcade .profile-media { border-width: 2px; }
.site-page.home-arcade .account-benefits { background: #071725; }
.site-page.home-arcade .account-benefits b { border-radius: 0; }

@media (max-width: 900px) {
    .site-page.home-arcade .ranking-page,
    .site-page.home-arcade .search-page,
    .site-page.home-arcade .compare-page,
    .site-page.home-arcade .my-hub-page,
    .site-page.home-arcade .account-page,
    .site-page.home-arcade .profile-page,
    .site-page.home-arcade .page-content { padding-top: 94px; }

    .site-page.home-arcade .ranking-intro,
    .site-page.home-arcade .explore-intro,
    .site-page.home-arcade .compare-hero,
    .site-page.home-arcade .my-hub-hero { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .site-page.home-arcade .page-shell,
    .site-page.home-arcade .page-content,
    .site-page.home-arcade .navbar { width: min(100% - 28px, 1380px); }

    .site-page.home-arcade .ranking-page,
    .site-page.home-arcade .search-page,
    .site-page.home-arcade .compare-page,
    .site-page.home-arcade .my-hub-page,
    .site-page.home-arcade .account-page,
    .site-page.home-arcade .profile-page,
    .site-page.home-arcade .page-content { padding-top: 84px; padding-bottom: 56px; }

    .site-page.home-arcade .ranking-intro,
    .site-page.home-arcade .explore-intro,
    .site-page.home-arcade .search-hero,
    .site-page.home-arcade .compare-hero,
    .site-page.home-arcade .my-hub-hero,
    .site-page.home-arcade .account-intro { padding: 20px; box-shadow: 4px 4px 0 var(--page-shadow); }

    .site-page.home-arcade .ranking-intro h1,
    .site-page.home-arcade .explore-intro h1,
    .site-page.home-arcade .compare-hero h1,
    .site-page.home-arcade .my-hub-hero h1,
    .site-page.home-arcade .account-intro h1 { font-size: clamp(32px, 11vw, 48px); }

    .site-page.home-arcade .explore-intro h1 {
        font-size: clamp(25px, 8.5vw, 38px);
        line-height: 1.25;
    }

    .site-page.home-arcade .mobile-navigation:not([hidden]) { overflow-x: hidden; }
    .site-page.home-arcade .mobile-navigation > *,
    .site-page.home-arcade .mobile-platform-links { min-width: 0; max-width: 100%; }
}

/* Readable headline system across Streamwrld. Pixel type remains on logos and small labels. */
body.home-arcade h1,
body.home-arcade h2 {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 850 !important;
    letter-spacing: -.045em !important;
    line-height: 1 !important;
}

/* A creator name is content, not a page heading: keep it fast to scan. */
body.home-arcade .profile-summary h1 {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .98;
}

@media (max-width: 620px) {
    body.home-arcade h1,
    body.home-arcade h2 {
        letter-spacing: -.05em !important;
        line-height: 1.05 !important;
    }
}