/* Home server browser — premium 2026 upper interface. */

:root {
    --topbar-h: 64px;
    --home-width: 1480px;
}

body {
    background-color: #070a10;
    background-image:
        radial-gradient(820px 360px at 56% 13%, rgba(255, 148, 25, 0.065), transparent 70%),
        radial-gradient(760px 420px at 92% 6%, rgba(49, 94, 156, 0.06), transparent 72%),
        linear-gradient(180deg, #080b12 0, #070a10 470px, #080a0f 100%);
}

body::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    height: 520px;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.42), transparent 90%);
}

/* Navigation */

.topbar {
    height: var(--topbar-h);
    background: rgba(6, 9, 15, 0.9);
    border-bottom: 1px solid rgba(151, 166, 193, 0.18);
    box-shadow: 0 10px 35px rgba(0,0,0,.2);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.topbar-inner {
    max-width: var(--home-width);
    padding: 0 28px;
    gap: 26px;
}

.brand { gap: 0; margin-left: 4px; }
.brand-wordmark { font-size: 1.34rem; letter-spacing: .96px; }

.top-nav { gap: 9px; }
.top-nav-link { padding: 8px 13px; border-radius: 8px; font-size: .86rem; }
.top-nav-api {
    min-height: 38px;
    padding-inline: 15px;
    color: #ffbd2e;
    border-color: rgba(255,174,29,.42);
    background: linear-gradient(180deg, rgba(255,178,36,.09), rgba(255,178,36,.035));
    transition: color .2s ease, border-color .2s ease, filter .2s ease, transform .2s ease;
}
.top-nav-api:hover {
    color: #ffc94f;
    border-color: rgba(255,190,58,.72);
    background: linear-gradient(180deg, rgba(255,178,36,.09), rgba(255,178,36,.035));
    filter: brightness(1.09);
    transform: translateY(-1px);
}

.live-pill {
    padding: 7px 13px;
    border-radius: 999px;
    border-color: rgba(128,147,177,.22);
    background: rgba(12,17,26,.8);
}
.live-dot { width: 7px; height: 7px; }
.live-label { font-size: .64rem; letter-spacing: 1.65px; }
.live-updated { font-size: .68rem; }

/* Hero */

main {
    max-width: var(--home-width);
    padding-left: 28px;
    padding-right: 28px;
}

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(370px, 440px);
    align-items: stretch;
    gap: 18px;
    margin: 0;
    padding: 32px 0 18px;
    overflow: hidden;
    isolation: isolate;
}

.hero::before,
.hero::after { display: none; }

.hero-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 6px 0 0 8px;
    justify-content: flex-start;
}

.hero-kicker {
    width: fit-content;
    margin: 0 0 10px;
    padding: 5px 11px 5px 8px;
    color: #ffc028;
    border: 1px solid rgba(255,170,20,.19);
    border-radius: 999px;
    background: rgba(5,8,13,.55);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: 1.8px;
}
.hero-kicker .icon { width: 14px; height: 14px; color: #ffb71d; }

.hero h1 {
    max-width: 850px;
    margin: 0 0 10px;
    color: #f3f4f7;
    font-size: clamp(2.35rem, 3.45vw, 3.5rem);
    line-height: .98;
    letter-spacing: -1.65px;
    text-wrap: balance;
}
.hero h1 span {
    color: #ffb71d;
    text-shadow: 0 0 30px rgba(255,169,20,.18);
}
.hero-sub {
    max-width: 65ch;
    color: #a6adbd;
    font-size: .9rem;
    line-height: 1.55;
}

.hero-globe {
    position: absolute;
    z-index: 0;
    top: -138px;
    left: 46%;
    width: 470px;
    aspect-ratio: 1;
    border: 1px solid rgba(255,140,16,.075);
    border-radius: 50%;
    opacity: .62;
    transform: rotate(-12deg);
    pointer-events: none;
    background:
        radial-gradient(circle at 67% 42%, rgba(255,131,0,.55) 0 1px, transparent 2px),
        radial-gradient(circle at 45% 69%, rgba(255,131,0,.55) 0 1px, transparent 2px),
        radial-gradient(circle at 73% 66%, rgba(255,131,0,.5) 0 1px, transparent 2px),
        repeating-radial-gradient(ellipse at center, transparent 0 37px, rgba(255,136,10,.075) 38px 39px),
        radial-gradient(circle at center, rgba(255,123,0,.035), transparent 67%);
    box-shadow: inset 0 0 70px rgba(255,128,0,.025), 0 0 80px rgba(0,0,0,.4);
}
.hero-globe::before,
.hero-globe::after,
.hero-globe span,
.hero-globe i,
.hero-globe b {
    content: "";
    position: absolute;
    inset: 8% 47%;
    border: 1px solid rgba(255,136,10,.09);
    border-radius: 50%;
}
.hero-globe::after { inset: 3% 31%; }
.hero-globe span { inset: 2% 17%; }
.hero-globe i { inset: 47% 4%; }
.hero-globe b { inset: 28% 4%; }

/* Network statistics */

.hero .stat-grid {
    margin: 22px 0 0;
    padding: 5px;
    border: 1px solid rgba(142,160,190,.2);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(13,18,28,.88), rgba(8,12,19,.95));
    box-shadow: inset 0 1px rgba(255,255,255,.03), 0 14px 32px -28px #000;
}
.hero .stat-grid::before {
    left: 8%;
    right: 8%;
    width: auto;
    background: linear-gradient(90deg, transparent, #ffb71d, #3ddc84, #5db8ff, #bd8cff, transparent);
    opacity: .5;
}
.hero .stat-grid::after { display: none; }
.hero .stat-card {
    min-height: 58px;
    padding: 8px 16px;
    gap: 10px;
    border-radius: 7px;
}
.hero .stat-card::after { left: 16px; width: 30px; }
.hero .stat-icon { width: 34px; height: 34px; border-radius: 8px; }
.hero .stat-value { font-size: 1.13rem; }
.hero .stat-label { font-size: .5rem; letter-spacing: 1.05px; }

/* Public API panel */

.api-spotlight {
    position: relative;
    z-index: 2;
    align-self: stretch;
    min-height: 0;
    margin: 0;
    padding: 19px 20px;
    justify-content: center;
    border: 1px solid rgba(255,178,36,.3);
    border-radius: 11px;
    background:
        radial-gradient(280px 140px at 100% 0, rgba(255,154,22,.075), transparent 70%),
        linear-gradient(145deg, rgba(15,20,29,.97), rgba(8,12,19,.99));
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 35px rgba(255,151,17,.045), 0 22px 45px -36px #000;
}
.api-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.018), transparent 70%);
}
.api-spotlight::after { display: none; }
.api-spotlight-top { color: #ffbd2e; font-size: .61rem; letter-spacing: 1.25px; }
.api-spotlight-top > .icon { width: 14px; height: 14px; }
.api-spotlight-top b {
    padding: 2px 6px;
    color: #48e39a;
    border: 1px solid rgba(61,220,132,.15);
    border-radius: 4px;
    background: rgba(61,220,132,.08);
    font-size: .5rem;
}
.api-spotlight h2 { margin: 9px 0 3px; font-size: 1.16rem; letter-spacing: -.25px; }
.api-spotlight p { color: #a4abba; font-size: .75rem; }
.api-endpoint {
    margin: 13px 0;
    padding: 8px 10px;
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-color: rgba(143,161,192,.18);
    border-radius: 7px;
    background: rgba(4,8,14,.6);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.api-endpoint:hover {
    border-color: rgba(67,221,145,.34);
    background: rgba(8,15,20,.82);
    box-shadow: 0 0 20px rgba(67,221,145,.055);
}
.api-endpoint:focus-visible { outline: 2px solid rgba(67,221,145,.72); outline-offset: 2px; }
.api-endpoint span { color: #43dd91; }
.api-endpoint code {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    color: #d9deea;
    font-size: .63rem;
    text-overflow: clip;
}
.api-endpoint > .copy-btn {
    width: 24px;
    height: 24px;
    color: #8f99aa;
    pointer-events: none;
}
.api-endpoint:hover > .copy-btn { color: #43dd91; border-color: rgba(67,221,145,.24); }
.api-spotlight-actions { gap: 17px; }
.api-spotlight-actions .api-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 7px;
    color: var(--accent-ink);
    border-color: #ffbd27;
    background: linear-gradient(135deg, #ffb20f, #ffc02d);
    box-shadow: 0 8px 22px -14px rgba(255,177,14,.9);
    transform: translateY(0);
    will-change: transform;
    transition:
        transform .22s cubic-bezier(.2,.75,.25,1),
        box-shadow .22s ease,
        filter .22s ease,
        border-color .22s ease;
}
.api-spotlight-actions .api-primary::before {
    content: "";
    position: absolute;
    inset: -80% auto -80% -45%;
    width: 32%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent);
    opacity: 0;
    transform: skewX(-18deg) translateX(0);
    transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .18s ease;
}
.api-spotlight-actions .api-primary:hover {
    color: var(--accent-ink);
    border-color: #ffd36b;
    background: linear-gradient(135deg, #ffb20f, #ffc02d);
    box-shadow: 0 12px 28px -12px rgba(255,177,14,.72), 0 0 0 1px rgba(255,217,133,.16);
    filter: brightness(1.08) saturate(1.03);
    transform: translateY(-2px);
}
.api-spotlight-actions .api-primary:hover::before {
    opacity: .62;
    transform: skewX(-18deg) translateX(520%);
}
.api-spotlight-actions .api-primary:active {
    filter: brightness(1.01);
    transform: translateY(0) scale(.985);
}
.api-spotlight-actions .api-primary:focus-visible {
    outline: 2px solid #fff3c5;
    outline-offset: 3px;
}
.api-spotlight-actions > a:last-child { color: #9099aa; font-size: .72rem; }

/* Game artwork selector */

.selector-shell {
    position: relative;
    margin: 0 0 11px;
    padding: 6px;
    border: 1px solid rgba(145,163,193,.2);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(14,19,28,.95), rgba(8,12,18,.98));
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 38px -32px #000;
}
.selector-shell::before { display: none; }
.selector-shell .game-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
}

.selector-shell .game-tab {
    --game: #ffb71d;
    --game-rgb: 255,183,29;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
    min-height: 132px;
    padding: 20px 18px 15px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    background: #0b0f16;
    box-shadow: inset 0 1px rgba(255,255,255,.03);
    isolation: isolate;
    transform: translateZ(0);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.selector-shell .game-tab[data-game="cod1"] { --game: #ffb71d; --game-rgb: 255,183,29; }
.selector-shell .game-tab[data-game="coduo"] { --game: #45d895; --game-rgb: 69,216,149; }
.selector-shell .game-tab[data-game="cod2"] { --game: #ff6873; --game-rgb: 255,104,115; }
.selector-shell .game-tab[data-game="cod4"] { --game: #79be67; --game-rgb: 121,190,103; }

.gt-art {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .7;
    filter: saturate(.9) contrast(1.06) brightness(.82);
    transform: scale(1.01);
    transition: transform .26s ease, opacity .22s ease, filter .22s ease;
}
.selector-shell .game-tab::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: inherit;
    opacity: 1;
    filter: none;
    transform: none;
    background:
        linear-gradient(90deg, rgba(4,7,11,.96) 0, rgba(4,7,11,.8) 38%, rgba(4,7,11,.28) 76%, rgba(4,7,11,.18)),
        linear-gradient(0deg, rgba(3,6,10,.88), transparent 76%);
    transition: background .22s ease;
}
.selector-shell .game-tab::before {
    z-index: 3;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 3px;
    border-radius: 0 0 8px 8px;
    opacity: .7;
    background: var(--game);
    box-shadow: 0 0 14px rgba(var(--game-rgb),.6);
}
.selector-shell .game-tab:hover {
    color: var(--text);
    transform: translateY(-2px);
    border-color: rgba(var(--game-rgb),.46);
    background: #0b0f16;
    box-shadow: 0 10px 26px -18px rgba(var(--game-rgb),.5);
}
.selector-shell .game-tab:hover .gt-art { transform: scale(1.045); opacity: .78; }
.selector-shell .game-tab[aria-selected="true"] {
    color: var(--text);
    transform: translateY(-2px);
    border-color: rgba(var(--game-rgb),.92);
    background: #0b0f16;
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 0 1px rgba(var(--game-rgb),.12), 0 0 22px rgba(var(--game-rgb),.24);
}
.selector-shell .game-tab[aria-selected="true"] .gt-art {
    opacity: .86;
    filter: saturate(1.02) contrast(1.06) brightness(.9);
    transform: scale(1.025);
}
.selector-shell .game-tab[aria-selected="true"]::before { height: 3px; opacity: 1; animation: none; }
.selector-shell .game-tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-color: var(--game);
}

.selector-shell .gt-title {
    z-index: 2;
    padding: 0 54px 0 0;
    gap: 8px;
}
.selector-shell .gt-code {
    padding: 3px 5px;
    color: var(--game);
    border-color: rgba(var(--game-rgb),.45);
    border-radius: 4px;
    background: rgba(4,8,12,.58);
    font-size: .53rem;
}
.selector-shell .gt-name {
    color: #f4f5f7;
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .15px;
}
.selector-shell .gt-year {
    z-index: 2;
    top: 13px;
    right: 14px;
    color: rgba(232,237,245,.62);
    font-size: .57rem;
}
.selector-shell .gt-meta {
    z-index: 2;
    color: #c0c6d0;
    font-size: .69rem;
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.selector-shell .gt-meta b { color: #eef1f5; }
.selector-shell .game-tab[aria-selected="true"] .gt-meta b { color: var(--game); }
.gt-state {
    display: none;
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 15px;
    color: var(--game);
    font: 700 .47rem/1 var(--font-mono);
    letter-spacing: .9px;
    text-transform: uppercase;
}
.game-tab[aria-selected="true"] .gt-state { display: block; }

/* Search and filters */

.toolbar {
    margin-bottom: 13px;
    padding: 10px 12px;
    border-color: rgba(145,163,193,.18);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(14,19,28,.94), rgba(9,13,20,.98));
    box-shadow: inset 0 1px rgba(255,255,255,.03), 0 18px 38px -34px #000;
}
.toolbar-main { gap: 12px; }
.search-input {
    min-height: 42px;
    border-color: rgba(145,163,193,.18);
    border-radius: 8px;
    background: rgba(5,9,15,.62);
    font-size: .88rem;
}
.select-wrap select {
    min-height: 39px;
    border-color: rgba(145,163,193,.18);
    border-radius: 8px;
    background: rgba(5,9,15,.62);
    font-size: .82rem;
}
.sort-wrap .select-wrap { min-width: 168px; }
.filter-row {
    grid-template-columns: repeat(6, minmax(0,1fr)) auto;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-color: rgba(145,163,193,.13);
}
.field-label { font-size: .62rem; letter-spacing: 1.05px; }
.filter-reset { min-height: 39px; color: #62baff; }

@media (max-width: 1200px) {
    .hero { grid-template-columns: minmax(0, 1fr) 390px; }
    .hero h1 { font-size: clamp(2.25rem, 4vw, 3rem); }
    .hero .stat-card { padding-inline: 10px; }
    .hero .stat-icon { width: 31px; height: 31px; }
    .selector-shell .game-tab { min-height: 120px; padding-inline: 14px; }
    .selector-shell .gt-title { padding-right: 40px; gap: 6px; }
    .selector-shell .gt-name { font-size: .84rem; }
    .gt-state { display: none !important; }
    .filter-row { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .filter-reset { grid-column: auto; justify-self: stretch; justify-content: center; }
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 23px 0 14px;
    }
    .hero-copy { padding-left: 0; }
    .hero-globe { left: 47%; top: -160px; }
    .api-spotlight {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        column-gap: 20px;
        row-gap: 1px;
        padding: 14px 16px;
    }
    .api-spotlight-top { grid-column: 1 / -1; }
    .api-spotlight h2,
    .api-spotlight p,
    .api-endpoint { grid-column: 1; }
    .api-spotlight-actions {
        grid-column: 2;
        grid-row: 2 / 5;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }
    .api-endpoint { margin-bottom: 0; }
    .selector-shell .game-tab { min-height: 112px; padding: 16px 11px 13px; }
    .selector-shell .gt-code { font-size: .48rem; }
    .selector-shell .gt-name { font-size: .76rem; }
    .selector-shell .gt-year { display: none; }
}

@media (max-width: 720px) {
    :root { --topbar-h: 56px; }
    main { padding-left: 12px; padding-right: 12px; }
    .topbar-inner { padding: 0 11px; gap: 8px; }
    .brand { margin-left: 0; }
    .brand-wordmark { font-size: 1.02rem; letter-spacing: .62px; }
    .top-nav-link:not(.top-nav-api) { display: none; }
    .top-nav-api { min-height: 34px; padding-inline: 10px; }
    .live-pill { padding: 6px 9px; }

    .hero { padding-top: 17px; }
    .hero-kicker { margin-bottom: 8px; font-size: .54rem; letter-spacing: 1.25px; }
    .hero h1 { font-size: clamp(2rem, 9vw, 2.65rem); letter-spacing: -1.2px; }
    .hero-sub { font-size: .79rem; }
    .hero-globe { width: 390px; left: 42%; opacity: .4; }
    .hero .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 15px; }
    .hero .stat-card { min-height: 52px; }
    .hero .stat-card:nth-child(2) { border-right: 0; }

    .api-spotlight { display: flex; padding: 13px 14px; }
    .api-spotlight p { display: none; }
    .api-spotlight h2 { font-size: 1.03rem; }
    .api-endpoint { margin: 8px 0; }
    .api-endpoint code { font-size: clamp(.49rem, 2.35vw, .6rem); }
    .api-spotlight-actions { flex-direction: row; align-items: center; }

    .selector-shell { padding: 5px; }
    .selector-shell .game-tabs {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
    }
    .selector-shell .game-tabs::-webkit-scrollbar { display: none; }
    .selector-shell .game-tab {
        flex: 0 0 min(78vw, 310px);
        min-height: 126px;
        padding: 18px 15px 14px;
        scroll-snap-align: center;
    }
    .selector-shell .gt-name { font-size: .9rem; }
    .selector-shell .gt-year { display: block; }
    .toolbar-main { flex-wrap: wrap; }
    .search-wrap { flex: 1 1 100%; order: -1; }
    .filters-toggle { display: inline-flex; min-height: 40px; }
    .sort-wrap { margin-left: auto; }
    .sort-wrap .field-label { display: none; }
    .filter-row { display: none; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .filter-row.open { display: grid; }
    .filter-reset { grid-column: 1 / -1; }
}

@media (max-width: 470px) {
    .brand-word { font-size: .79rem; letter-spacing: 1px; }
    .top-nav-api { display: none; }
    .live-pill { margin-left: auto; }
    .hero h1 { font-size: 2.05rem; }
    .hero .stat-icon { width: 30px; height: 30px; }
    .hero .stat-value { font-size: 1rem; }
    .api-spotlight { padding: 12px; }
    .api-spotlight p { display: none; }
    .api-spotlight-actions { flex-wrap: wrap; gap: 9px; }
    .api-spotlight-actions > a:last-child { display: inline-flex !important; font-size: .66rem; }
    .selector-shell .game-tab { flex-basis: 78vw; }
    .sort-wrap .select-wrap { min-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
    .selector-shell .game-tab,
    .gt-art { transition: none; }
}

/* Home-page colour pass. app.css owns the palette; this cancels the older
   black/amber campaign layer that otherwise loads after it. */
body {
    background-color: var(--bg);
    background-image: none;
}
body::before { display: none; content: none; }

.topbar {
    background: #2b4052;
    border-bottom-color: rgba(11,25,39,.38);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.top-nav-api,
.top-nav-api:hover {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
    filter: none;
}
.top-nav-api:hover { background: #e85d00; }
.live-pill { background: #263d56; border-color: rgba(255,255,255,.1); }

.hero { grid-template-columns: minmax(0, 1fr) minmax(330px, 390px); }
.hero-globe { display: none; }
.hero-kicker {
    color: #ffba7d;
    border-color: rgba(255,102,0,.35);
    background: #263d56;
}
.hero-kicker .icon,
.hero h1 span { color: var(--accent); text-shadow: none; }
.hero h1 { color: var(--text); }
.hero-sub { color: var(--text-2); }

.hero .stat-grid,
.api-spotlight,
.selector-shell,
.toolbar {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-1);
}
.hero .stat-grid::before { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.hero .stat-card {
    --stat: #ff9755;
    --stat-rgb: 255,151,85;
    background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(20,40,58,.1));
}
.hero .stat-card::before { opacity: .07; }
.hero .stat-card::after { background: var(--accent); box-shadow: none; opacity: .8; }
.hero .stat-icon {
    color: #ff9755;
    border-color: rgba(255,102,0,.32);
    background: rgba(255,102,0,.075);
    box-shadow: inset 0 1px rgba(255,255,255,.045);
}
.hero .stat-value { color: #f4f6f8; text-shadow: none; }
.hero .stat-label { color: #a8adca; }
.hero .stat-card:hover { background: rgba(255,255,255,.04); }
.api-spotlight { border-color: rgba(255,102,0,.5); }
.api-spotlight::before { display: none; }
.api-spotlight-top { color: #ffba7d; }
.api-spotlight p { color: var(--text-2); }
.api-endpoint { background: #263d56; border-color: rgba(255,255,255,.12); }
.api-endpoint:hover { background: #243a51; border-color: rgba(255,102,0,.62); box-shadow: none; }
.api-spotlight-actions .api-primary,
.api-spotlight-actions .api-primary:hover {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: none;
    filter: none;
}
.api-spotlight-actions .api-primary:hover { background: #e85d00; border-color: #e85d00; }
.api-spotlight-actions .api-primary::before { display: none; }

.selector-shell .game-tabs { background: #263d56; }
.selector-shell .game-tab,
.selector-shell .game-tab:hover,
.selector-shell .game-tab[aria-selected="true"] { background-color: #243a51; }
.selector-shell .game-tab:hover { border-color: rgba(255,102,0,.65); }
.selector-shell .game-tab[aria-selected="true"] {
    border-color: var(--accent);
    box-shadow: inset 0 -3px 0 var(--accent);
}
.selector-shell .game-tab::before { background: var(--accent); box-shadow: none; }
.selector-shell .game-tab::after {
    background:
        linear-gradient(90deg, rgba(24,45,64,.64) 0, rgba(24,45,64,.47) 42%, rgba(24,45,64,.12) 78%),
        linear-gradient(0deg, rgba(20,40,58,.6), transparent 74%);
}
.selector-shell .gt-code { color: #ffba7d; border-color: rgba(255,102,0,.5); background: rgba(24,45,64,.78); }
.selector-shell .game-tab[aria-selected="true"] .gt-meta b,
.gt-state { color: #ffba7d; }

.search-input,
.select-wrap select { background: #263d56; border-color: rgba(255,255,255,.12); }
.search-input:focus,
.select-wrap select:focus,
.select-wrap select:hover { background: #243a51; border-color: rgba(255,102,0,.62); }
.filter-reset { color: #ffba7d; }

@media (max-width: 1200px) {
    .hero { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
}