/* ================================================================
   NEW LAYOUT & DESIGN SYSTEM OVERRIDES (gtg- prefixed)
   ================================================================ */
/* Apply Heebo as the base font for all new elements */
[class^="gtg-"], [class*=" gtg-"], [class^="gtg-"] *, [class*=" gtg-"] * {
    font-family: 'Heebo', sans-serif;
}
.gtg-rank, 
.gtg-server-count strong, 
.gtg-server-count strong span,
.gtg-registered strong, 
.gtg-cmd-metric-item strong, 
.gtg-cmd-latency strong {
    font-family: 'Oswald', sans-serif !important;
}

/* Base resets to prevent legacy overrides from inflating layout containers */
.gtg-site-header, .gtg-nav, .gtg-hero, .gtg-hero-inner, .gtg-updates, .gtg-slides, .gtg-slide, .gtg-ranking, .gtg-server-stack, .gtg-server-row, .gtg-games, .gtg-game-shelf, .gtg-game, .gtg-footer-cmd {
    box-sizing: border-box !important;
}
.gtg-site-header {
    margin: 0 !important;
    padding: 0 !important;
}
.gtg-nav, .gtg-hero, .gtg-menu, .gtg-menu li {
    margin: 0 !important;
}
.gtg-menu {
    padding: 0 !important;
    list-style: none !important;
}
.gtg-menu li {
    padding: 0 !important;
}
.gtg-menu a {
    margin: 0 !important;
}

/* Force LTR growth for progress bars representing numbers/ratios */
.new-col-pl-bar, .gtg-pop-bar, .progress {
    direction: ltr !important;
}
.bot-composition-bar {
    display: flex !important;
    flex-direction: row !important;
    direction: ltr !important;
}

/* Missing game colors not defined in vip.css */
.game-color-mta { color: #a855f7 !important; }
.game-color-rust { color: #ef4444 !important; }
.game-color-dayz { color: #facc15 !important; }
.game-color-gmod { color: #ec4899 !important; }
.game-color-arkse { color: #94a3b8 !important; }
.game-color-tf2 { color: #d97706 !important; }
.game-color-teamspeak3 { color: #2563eb !important; }

.gtg-site-header {
    position: relative;
    width: 100%;
    background:
        radial-gradient(circle at 14% 88%, rgba(63,125,240,.18), transparent 31%),
        radial-gradient(circle at 78% 5%, rgba(148,163,184,.15), transparent 28%),
        linear-gradient(135deg, #f7faff 0%, #edf3fb 55%, #e8eef7 100%);
}
.gtg-site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .46;
    background-image:
        linear-gradient(rgba(63,125,240,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(63,125,240,.045) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}
.gtg-site-header::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 132px;
    z-index: -1;
    background: linear-gradient(to bottom, transparent, rgba(248,250,252,.92));
    pointer-events: none;
}
.gtg-nav {
    position: sticky;
    top: 0;
    z-index: 1100;
    height: 76px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(15,23,42,.07) !important;
    background: rgba(248,251,255,.82) !important;
    backdrop-filter: blur(16px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
    box-sizing: border-box !important;
}
.gtg-nav-inner {
    width: min(1280px, calc(100% - 48px));
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
    direction: rtl;
}
.gtg-brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    text-decoration: none;
    min-width: max-content;
}
.gtg-brand-mark {
    width: 37px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: 'Heebo', sans-serif; /* Replaced Oswald with Heebo for text logo */
    font-size: 21px;
    font-weight: 800;
    background: linear-gradient(145deg, #4389ff, #1758c9);
    clip-path: polygon(50% 0, 94% 16%, 88% 77%, 50% 100%, 12% 77%, 6% 16%);
    filter: drop-shadow(0 5px 9px rgba(37,99,235,.22));
}
.gtg-brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.gtg-brand-name { font-size: 21px; font-weight: 900; letter-spacing: -.45px; }
.gtg-brand-name b { color: #3f7df0; }
.gtg-brand-sub { margin-top: 4px; color: #94a3b8; font-size: 10px; font-weight: 700; }
.gtg-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: clamp(30px, 3.5vw, 58px);
    margin: 0;
    padding: 0;
}
.gtg-menu a {
    position: relative;
    display: block;
    padding: 27px 0 25px;
    color: #475569;
    text-decoration: none;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 800;
    transition: color .2s ease;
}
.gtg-menu a::after {
    content: '';
    position: absolute;
    right: 50%;
    bottom: 17px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: #3f7df0;
    transform: translateX(50%);
    transition: width .22s ease;
}
.gtg-menu a:hover, .gtg-menu a.is-active { color: #1d4ed8; }
.gtg-menu a:hover::after, .gtg-menu a.is-active::after { width: 24px; }
.gtg-nav-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
    direction: rtl;
}
.gtg-registered {
    height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(63,125,240,.15);
    border-radius: 7px;
    background: rgba(63,125,240,.07);
    color: #3f7df0;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
.gtg-registered strong { font-family: 'Oswald', sans-serif; font-size: 14px; } /* Kept Oswald for numbers */
.gtg-login {
    height: 36px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dfe6ef;
    border-radius: 7px;
    background: rgba(255,255,255,.8);
    color: #334155;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 800;
    box-shadow: 0 3px 9px rgba(15,23,42,.035);
}
.gtg-login .fa-google { color: #4285f4; }
.gtg-mobile-menu { display: none; }

.gtg-hero {
    position: relative;
    min-height: 500px !important;
    padding: 56px 0 108px !important;
    overflow: hidden;
    box-sizing: border-box !important;
}
.gtg-network-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .72;
}
.gtg-character {
    position: absolute;
    left: max(-42px, calc(50% - 720px));
    bottom: -24px;
    width: 390px;
    max-height: 455px;
    object-fit: contain;
    object-position: bottom;
    opacity: .22;
    filter: saturate(.75) drop-shadow(0 22px 34px rgba(37,99,235,.17));
    mask-image: linear-gradient(to top, transparent 1%, #000 27%, #000 100%);
    animation: gtgFloat 7s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.3s ease;
    transform: translate(var(--gtg-cms-offset-x, 0px), var(--gtg-cms-offset-y, 0px)) scale(var(--gtg-cms-scale, 1));
}
@keyframes gtgFloat { 50% { transform: translate(var(--gtg-cms-offset-x, 0px), calc(var(--gtg-cms-offset-y, 0px) - 10px)) scale(var(--gtg-cms-scale, 1)); } }
.gtg-hero-inner {
    width: min(1220px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
    gap: clamp(46px, 6vw, 82px);
    align-items: center;
    direction: rtl;
}
.gtg-updates {
    position: relative;
    min-height: 314px;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    padding-right: 4px;
}
.gtg-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.gtg-dot {
    width: 3px;
    height: 19px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(100,116,139,.24);
    cursor: pointer;
    transition: .28s ease;
}
.gtg-dot.is-active { height: 43px; background: #3f7df0; box-shadow: 0 0 0 4px rgba(63,125,240,.08); }
.gtg-slides { position: relative; min-height: 314px; }
.gtg-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .42s ease, transform .42s ease, visibility .42s;
}
.gtg-slide.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.gtg-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
}
.gtg-kicker::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: #3f7df0; }
.gtg-title {
    max-width: 610px;
    margin: 13px 0 13px;
    color: #0f172a;
    font-size: clamp(37px, 4vw, 52px);
    line-height: 1.07;
    letter-spacing: -1.7px;
    font-weight: 900;
}
.gtg-title-small { font-size: clamp(29px, 3.2vw, 39px); }
.gtg-title-medium { font-size: clamp(33px, 3.6vw, 45px); }
.gtg-title-large { font-size: clamp(37px, 4vw, 52px); }
.gtg-title-extra-large { font-size: clamp(41px, 4.5vw, 58px); }
.gtg-desc {
    max-width: 610px;
    margin: 0;
    color: #526177;
    font-size: 14px;
    line-height: 1.78;
    font-weight: 500;
    white-space: pre-line;
}
.gtg-desc.is-collapsible {
    /* Keep the existing medium-length announcements fully visible. */
    max-height: 220px;
    overflow: hidden;
    transition: max-height .28s ease;
}
.gtg-desc.is-collapsible.is-overflowing:not(.is-expanded) {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.gtg-desc.is-collapsible.is-expanded {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}
.gtg-slide-foot { display: flex; align-items: center; gap: 13px; margin-top: 22px; }
.gtg-slide-more {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd8ea;
    border-radius: 7px;
    background: rgba(255,255,255,.7);
    color: #335176;
    cursor: pointer;
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.gtg-slide-more[hidden] { display: none; }
.gtg-slide-more:hover,
.gtg-slide-more:focus-visible {
    border-color: #7da7e8;
    background: #fff;
    color: #2563eb;
    transform: translateY(-1px);
}
.gtg-updates.is-expanded,
.gtg-slides.is-expanded { transition: min-height .3s ease; }
@media (min-width: 821px) {
    /*
     * A regular accepted slide needs about 390px for its natural title,
     * description and footer. Prevent flexbox from compressing that content.
     */
    .gtg-updates,
    .gtg-slides { min-height: 410px; }
    .gtg-desc.is-collapsible { flex-shrink: 0; }
    .gtg-desc.is-collapsible.is-overflowing:not(.is-expanded) {
        max-height: 120px;
    }
}
.gtg-primary-btn {
    min-height: 41px;
    padding: 0 21px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 7px;
    background: #3f7df0;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(63,125,240,.22);
    font-size: 12.5px;
    font-weight: 900;
    text-decoration: none;
    transition: .22s ease;
}
.gtg-primary-btn:hover { transform: translateY(-2px); background: #2563eb; }
.gtg-watermark {
    position: absolute;
    right: 31px;
    top: 34px;
    z-index: -1;
    color: rgba(15,23,42,.028);
    font-family: 'Heebo', sans-serif; /* Replaced Oswald with Heebo for watermark text */
    font-size: 103px;
    font-weight: 800;
    letter-spacing: .05em;
    user-select: none;
}

.gtg-ranking { position: relative; min-width: 0; }
.gtg-ranking-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 5px;
}
.gtg-ranking-title { margin: 0; color: #1e293b; font-size: 14px; font-weight: 900; }
.gtg-ranking-title i { color: #f97316; margin-left: 5px; }
.gtg-ranking-month { color: #94a3b8; font-size: 9.5px; font-weight: 800; }
.gtg-server-stack {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(15,23,42,.08);
    border-bottom: 1px solid rgba(15,23,42,.08);
    background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.5), rgba(255,255,255,.12));
    backdrop-filter: blur(5px);
}
.gtg-server-stack::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(#3f7df0, rgba(63,125,240,.08));
}
.gtg-server-row {
    position: relative;
    min-height: 91px !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0,1fr) 70px 34px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 10px 12px 15px !important;
    border-bottom: 1px solid rgba(15,23,42,.075) !important;
    transition: background .22s ease, transform .22s ease !important;
    direction: rtl !important;
    cursor: pointer;
    box-sizing: border-box !important;
}
.gtg-server-row *, .gtg-server-row *::before, .gtg-server-row *::after {
    box-sizing: border-box !important;
}
.gtg-server-row div,
.gtg-server-row span,
.gtg-server-row b,
.gtg-server-row strong,
.gtg-server-row img,
.gtg-server-row a {
    margin: 0;
    padding: 0;
}
.gtg-server-row:last-child { border-bottom: 0; }
.gtg-server-row:hover { background: rgba(255,255,255,.62); transform: translateX(-4px); }
.gtg-server-img { position: relative; width: 72px; height: 60px; overflow: hidden; border-radius: 6px; }
.gtg-server-img img { display: block !important; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.gtg-server-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(15,23,42,.18)); }
.gtg-rank {
    position: absolute;
    left: 5px;
    bottom: 1px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.4);
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
    font-family: 'Oswald', sans-serif; /* Kept Oswald for numbers */
    font-size: 20px;
    font-weight: 800;
}
.gtg-server-copy { min-width: 0; direction: rtl; text-align: right; }
.gtg-server-name { overflow: hidden; color: #142033; font-size: 12.7px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25 !important; direction: ltr; }
.gtg-server-meta { margin-top: 4px !important; display: flex; gap: 7px; align-items: center; color: #7b8a9f; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 700; direction: rtl !important; justify-content: flex-start !important; text-transform: uppercase !important; }
.gtg-server-count { direction: ltr; text-align: center; line-height: 1 !important; }
.gtg-server-count strong { color: #0f172a; font-family: 'Oswald', sans-serif; font-size: 17px; line-height: 1.1 !important; } /* Kept Oswald for numbers */
.gtg-server-count > span { color: #94a3b8; font-size: 9px; line-height: 1 !important; }
.gtg-server-count strong span { font-size: 17px !important; font-family: 'Oswald', sans-serif !important; color: #0f172a !important; }
.gtg-pop-bar { width: 52px; height: 3px; margin: 5px auto 0 !important; overflow: hidden; border-radius: 3px; background: rgba(100,116,139,.15); }
.gtg-pop-bar b { display: block; height: 100%; border-radius: inherit; }
.gtg-play {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(63,125,240,.18);
    border-radius: 6px;
    background: rgba(255,255,255,.48);
    color: #3f7df0;
    text-decoration: none;
    font-size: 9px;
    transition: .2s ease;
}
.gtg-server-row:hover .gtg-play { background: #3f7df0; color: #fff; }
.gtg-play .icon-mobile { display: none !important; }

.gtg-scroll {
    position: absolute;
    left: 50%;
    bottom: 50px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transform: translateX(-50%);
}
.gtg-scroll span { font-size: 9.5px; font-weight: 900; letter-spacing: .06em; }
.gtg-scroll-line { position: relative; width: 2px; height: 30px; overflow: hidden; border-radius: 2px; background: rgba(63,125,240,.15); }
.gtg-scroll-line::after { content: ''; position: absolute; inset: 0; height: 12px; background: #3f7df0; animation: gtgScroll 1.7s ease-in-out infinite; }
@keyframes gtgScroll { from { transform: translateY(-13px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(32px); opacity: 0; } }

.gtg-games {
    position: relative;
    z-index: 8;
    width: min(1240px, calc(100% - 48px));
    margin: -48px auto 0;
    direction: rtl;
}
.gtg-games-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    margin: 0 2px 12px;
}
.gtg-games-title {
    display: inline-flex;
    align-items: center;
    color: #475569;
    font-size: 11.5px;
    font-weight: 900;
    white-space: nowrap;
}
.gtg-games-title i { color: #3f7df0; margin-left: 6px; }
.gtg-game-focus {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    color: #718096;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}
.gtg-game-focus::before {
    content: '';
    width: min(160px, 14vw);
    height: 1px;
    flex: 0 1 auto;
    background: linear-gradient(90deg, transparent, rgba(63,125,240,.35));
}
.gtg-focus-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border: 2px solid rgba(63,125,240,.28);
    border-radius: 50%;
    background: #3f7df0;
    box-shadow: 0 0 0 4px rgba(63,125,240,.08);
    box-sizing: border-box !important;
}
.gtg-game-focus strong {
    max-width: 190px;
    overflow: hidden;
    color: #1e293b;
    font-size: 10.5px;
    font-weight: 900;
    text-overflow: ellipsis;
}
.gtg-focus-count { color: #3f7df0; font-family: 'Oswald', sans-serif !important; font-weight: 700; direction: ltr; }
.gtg-focus-modes {
    min-width: 0;
    overflow: hidden;
    color: #94a3b8;
    font-family: 'Heebo', sans-serif;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtg-game-shelf {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 7px;
    padding: 0 0 13px;
    overflow: visible;
    isolation: isolate;
}
.gtg-game-shelf::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: 2px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148,163,184,.28) 10%, rgba(63,125,240,.22) 50%, rgba(148,163,184,.28) 90%, transparent);
}
.gtg-game {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0 2px 8px;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: color .24s ease, transform .24s cubic-bezier(.2,.8,.2,1);
}
.gtg-game::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 3px;
    background: #3f7df0;
    transform: translateX(-50%);
    transition: width .24s ease;
}
.gtg-game-cover {
    position: relative;
    width: min(78px, 100%);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.09);
    border-radius: 6px;
    background: #172033;
    box-shadow: 0 7px 16px rgba(15,23,42,.11);
    transform-origin: center bottom;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.gtg-game-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7,13,24,.30), transparent 48%);
    pointer-events: none;
    transition: opacity .22s ease;
}
.gtg-game-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.76) brightness(.94);
    transform: scale(1.015);
    transition: transform .32s ease, filter .28s ease;
}
.gtg-game-name {
    width: 100%;
    overflow: hidden;
    color: currentColor;
    font-size: 8.3px;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gtg-game-count {
    color: #9aa8b8;
    font-family: 'Heebo', sans-serif; /* Replaced Oswald with Heebo */
    font-size: 7px;
    font-weight: 700;
    line-height: 1;
    direction: ltr;
}
.gtg-game:hover,
.gtg-game:focus-visible,
.gtg-game.is-active { color: #1d4ed8; outline: none; }
.gtg-game:hover { z-index: 4; transform: translateY(-2px); }
.gtg-game:hover .gtg-game-cover,
.gtg-game:focus-visible .gtg-game-cover {
    border-color: rgba(63,125,240,.45);
    box-shadow: 0 15px 28px rgba(37,99,235,.18);
    transform: translateY(-5px) scale(1.045);
}
.gtg-game:hover .gtg-game-cover img,
.gtg-game:focus-visible .gtg-game-cover img,
.gtg-game.is-active .gtg-game-cover img { filter: saturate(1) brightness(1); transform: scale(1.07); }
.gtg-game.is-active .gtg-game-cover {
    border-color: rgba(37,99,235,.72);
    box-shadow: 0 0 0 2px rgba(63,125,240,.12), 0 11px 24px rgba(37,99,235,.15);
}
.gtg-game:hover::after,
.gtg-game:focus-visible::after,
.gtg-game.is-active::after { width: 42%; }

/* Bot composition: player layout splits when bots are present */
.bot-composition {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
    min-height: 15px;
}
.bot-composition-bar {
    width: 70px;
    height: 4px;
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}
.bot-human-fill,
.bot-ai-fill { display: block; height: 100%; flex: 0 0 auto; }
.bot-human-fill { background: #3f7df0; }
.bot-ai-fill {
    background: repeating-linear-gradient(135deg, #9aa9bc 0 2px, #c4ceda 2px 4px);
    box-shadow: inset 1px 0 rgba(255,255,255,.72);
}
.bot-composition-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 9px;
    color: #8a99aa;
    font-size: 7.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: help;
}
.bot-composition-note i { color: #7f90a5; font-size: 7px; }
.bot-composition-note strong { color: #5f7187; font-family: 'Oswald', sans-serif; font-size: 8px; } /* Kept Oswald for numbers */

/* Mobile Layout Resets */
.gt-lower-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 42px 0 70px;
}
.gt-lower-content .section-title:first-child { margin-top: 0; }
#server-list { scroll-margin-top: 88px; }

.gt-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    background: rgba(15,23,42,.92);
    color: #fff;
    box-shadow: 0 14px 36px rgba(15,23,42,.22);
    backdrop-filter: blur(12px);
    font-size: 12.5px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(18px);
    transition: .25s ease;
}
.gt-toast.is-visible { opacity: 1; transform: translateY(0); }
.gt-toast i { color: #60a5fa; }

@media (max-width: 1120px) and (min-width: 821px) {
    .gtg-game-cover { width: min(68px, 100%); }
    .gtg-game-name { font-size: 7.6px; }
}
@media (max-width: 1050px) {
    .gtg-nav-inner { grid-template-columns: auto 1fr; }
    .gtg-menu { display: none; }
    .gtg-nav-actions { justify-self: end; }
    .gtg-mobile-menu { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #dfe6ef; border-radius: 7px; background: rgba(255,255,255,.7); color: #475569; }
    .gtg-hero-inner { grid-template-columns: 1fr 1fr; gap: 34px; }
    .gtg-title { font-size: 39px; }
}
@media (max-width: 820px) {
    .gtg-nav { height: 66px; }
    .gtg-nav-inner { width: min(100% - 24px, 1280px); }
    .gtg-nav .gtg-brand-sub, .gtg-nav .gtg-login span, .gtg-nav .gtg-registered span { display: none; }
    .gtg-nav .gtg-registered { width: auto; height: 38px; padding: 0 10px; gap: 6px; justify-content: center; }
    .gtg-nav .gtg-login { width: 38px; height: 38px; padding: 0; justify-content: center; }
    .gtg-hero { padding: 38px 0 92px; }
    .gtg-hero-inner { width: min(100% - 28px, 1220px); grid-template-columns: 1fr; gap: 31px; }
    .gtg-updates { min-height: 330px !important; }
    .gtg-slides { min-height: 330px !important; }
    .gtg-title { font-size: clamp(33px, 10vw, 43px); }
    .gtg-desc { font-size: 11.5px !important; line-height: 1.5 !important; }
    .gtg-desc.is-collapsible { max-height: 150px; }
    .gtg-desc.is-collapsible.is-expanded { max-height: none; }
    .gtg-slide-foot { flex-wrap: wrap; margin-top: 16px; }
    .gtg-character { left: -100px; bottom: 196px; width: 290px; opacity: .09; }
    .gtg-server-stack { background: rgba(255,255,255,.42); }
    .gtg-scroll { bottom: 30px; }
    .gtg-games { width: min(100% - 24px, 1220px); margin-top: -26px; }
    .gtg-games-head { display: block; margin-bottom: 9px; }
    .gtg-game-focus { display: none; }
    .gtg-game-shelf {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overflow-y: visible;
        padding: 4px 2px 12px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .gtg-game-shelf::-webkit-scrollbar { display: none; }
    .gtg-game { flex: 0 0 76px; scroll-snap-align: start; }
    .gtg-game-cover { width: 70px; }
    .gtg-game-name { font-size: 8px; }
    .bot-composition-note { font-size: 7px; }
    
    .gtg-game-shelf {
        border-bottom: 1px solid rgba(148,163,184,.2);
    }
    .gtg-game-shelf::after {
        display: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gtg-desc.is-collapsible,
    .gtg-slide-more,
    .gtg-updates.is-expanded,
    .gtg-slides.is-expanded { transition: none; }
}

@media (max-width: 700px) {
    .gt-lower-content {
        padding-top: 30px;
    }
}
@media (max-width: 480px) {
    .gtg-brand-name { font-size: 17px; }
    .gtg-brand-mark { width: 32px; height: 37px; font-size: 18px; }
    .gtg-nav-actions { gap: 6px; }
    .gtg-updates { grid-template-columns: 8px 1fr; gap: 13px; }
    .gtg-watermark { display: none; }
    
    /* Top 3 Servers mobile grid layout optimizations */
    .gtg-server-row { 
        grid-template-columns: 72px 1fr !important; 
        grid-template-rows: auto auto !important; 
        gap: 10px 16px !important; 
        min-height: auto !important; 
        padding: 12px 16px !important; 
    }
    .gtg-server-img { 
        grid-row: 1 !important; 
        grid-column: 1 !important; 
        width: 72px !important; 
        height: 60px !important; 
    }
    .gtg-server-copy {
        grid-row: 1 !important;
        grid-column: 2 !important;
        width: 100% !important;
        text-align: right !important;
    }
    .gtg-server-count { 
        grid-row: 2 !important; 
        grid-column: 1 / -1 !important; 
        align-self: center !important; 
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        direction: ltr !important;
        justify-content: flex-start !important;
        margin-top: 4px !important;
        width: calc(100% - 48px) !important;
        justify-self: start !important;
    }
    .gtg-pop-bar {
        flex: 1 !important;
        height: 4px !important;
        margin: 0 !important;
        order: -1 !important;
    }
    .gtg-play { 
        grid-row: 2 !important; 
        grid-column: 2 !important; 
        justify-self: end !important;
        align-self: center !important;
        width: 36px !important;
        height: 36px !important;
    }
    .gtg-play .icon-desktop { display: none !important; }
    .gtg-play .icon-mobile { display: block !important; font-size: 13px !important; }
    .gtg-server-name { font-size: 12.5px !important; white-space: normal !important; line-height: 1.3 !important; }
    .gtg-server-meta { font-size: 8px !important; gap: 5px !important; margin-top: 3px !important; }

    /* Mobile search / filter controls optimizations */
    .srv-filter-integrated {
        padding: 8px 10px !important;
    }
    .srv-filter-controls {
        gap: 5px !important;
        width: 100% !important;
    }
    .srv-search-box-live {
        padding: 0 10px !important;
        min-width: 0 !important;
        flex: 1 !important;
    }
    .srv-search-box-live input {
        min-width: 0 !important;
        font-size: 11.5px !important;
    }
    .srv-control-btn {
        padding: 0 10px !important;
        font-size: 11.5px !important;
        gap: 4px !important;
        height: 36px !important;
    }
    .srv-control-btn.sort-only-btn {
        width: 36px !important;
        padding: 0 !important;
    }
}