/* ============================================================
   page-home.css v2.0 — near-black night hero, glowing serif
   display type, large halo'd character. Original CSS.
   Loaded from _home.html AFTER style.css so overrides win.
   ============================================================ */

/* page base: darker than the rest of the site, home only */
body { background-color: #0a0d14 !important; }
.pg-dot-bg { display: none; }

/* ── HERO ─────────────────────────────────────────────────── */
.home-night {
    position: relative;
    background: linear-gradient(180deg, #05070d 0%, #070b16 40%, #0a101f 72%, #0a0d14 100%);
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* sparse stars + the faintest nebula breath */
.home-night::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
    radial-gradient(1000px 600px at 70% 30%, rgba(70,100,190,0.10), transparent 65%),
    radial-gradient(760px 620px at 69% 62%, rgba(205,222,255,0.13), rgba(150,180,255,0.05) 55%, transparent 76%),
    radial-gradient(800px 500px at 20% 15%, rgba(90,80,180,0.07), transparent 62%),
    radial-gradient(1.2px 1.2px at 32.7% 15.3%, rgba(235,242,255,0.23), transparent 55%),
    radial-gradient(0.7px 0.7px at 53.5% 34.2%, rgba(235,242,255,0.43), transparent 55%),
    radial-gradient(0.7px 0.7px at 4.7% 40.2%, rgba(235,242,255,0.24), transparent 55%),
    radial-gradient(0.8px 0.8px at 42.6% 74.8%, rgba(235,242,255,0.3), transparent 55%),
    radial-gradient(1.1px 1.1px at 62.5% 85.4%, rgba(235,242,255,0.38), transparent 55%),
    radial-gradient(1.3px 1.3px at 96.7% 6.1%, rgba(235,242,255,0.33), transparent 55%),
    radial-gradient(0.9px 0.9px at 15.1% 12.4%, rgba(235,242,255,0.57), transparent 55%),
    radial-gradient(1.1px 1.1px at 18.7% 53.2%, rgba(235,242,255,0.37), transparent 55%),
    radial-gradient(0.7px 0.7px at 54.7% 7.5%, rgba(235,242,255,0.29), transparent 55%),
    radial-gradient(0.9px 0.9px at 67.7% 39.6%, rgba(235,242,255,0.46), transparent 55%),
    radial-gradient(1.3px 1.3px at 45.4% 28.4%, rgba(235,242,255,0.51), transparent 55%),
    radial-gradient(1.1px 1.1px at 24.9% 52.5%, rgba(235,242,255,0.59), transparent 55%),
    radial-gradient(1.4px 1.4px at 72.5% 27.3%, rgba(235,242,255,0.25), transparent 55%),
    radial-gradient(0.8px 0.8px at 42.0% 68.6%, rgba(235,242,255,0.42), transparent 55%),
    radial-gradient(1.2px 1.2px at 4.8% 60.8%, rgba(235,242,255,0.46), transparent 55%),
    radial-gradient(1.2px 1.2px at 86.8% 29.6%, rgba(235,242,255,0.47), transparent 55%),
    radial-gradient(1.3px 1.3px at 57.8% 42.1%, rgba(235,242,255,0.63), transparent 55%),
    radial-gradient(0.7px 0.7px at 47.5% 60.4%, rgba(235,242,255,0.52), transparent 55%),
    radial-gradient(1.3px 1.3px at 64.4% 89.4%, rgba(235,242,255,0.33), transparent 55%),
    radial-gradient(0.7px 0.7px at 38.8% 60.8%, rgba(235,242,255,0.41), transparent 55%),
    radial-gradient(0.7px 0.7px at 17.5% 12.3%, rgba(235,242,255,0.55), transparent 55%),
    radial-gradient(1.0px 1.0px at 13.7% 23.8%, rgba(235,242,255,0.59), transparent 55%),
    radial-gradient(1.1px 1.1px at 8.9% 41.5%, rgba(235,242,255,0.6), transparent 55%),
    radial-gradient(0.9px 0.9px at 81.3% 78.0%, rgba(235,242,255,0.39), transparent 55%),
    radial-gradient(1.4px 1.4px at 36.2% 79.8%, rgba(235,242,255,0.27), transparent 55%),
    radial-gradient(0.9px 0.9px at 18.3% 22.4%, rgba(235,242,255,0.42), transparent 55%),
    radial-gradient(0.7px 0.7px at 58.7% 25.1%, rgba(235,242,255,0.39), transparent 55%),
    radial-gradient(1.4px 1.4px at 37.2% 51.8%, rgba(235,242,255,0.51), transparent 55%),
    radial-gradient(1.2px 1.2px at 51.5% 56.3%, rgba(235,242,255,0.22), transparent 55%),
    radial-gradient(1.3px 1.3px at 89.2% 70.6%, rgba(235,242,255,0.56), transparent 55%);
}
.home-night::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
    radial-gradient(1.0px 1.0px at 39.5% 37.1%, rgba(235,242,255,0.67), transparent 55%),
    radial-gradient(1.1px 1.1px at 7.1% 7.9%, rgba(235,242,255,0.43), transparent 55%),
    radial-gradient(0.9px 0.9px at 34.3% 6.6%, rgba(235,242,255,0.43), transparent 55%),
    radial-gradient(0.9px 0.9px at 10.9% 34.0%, rgba(235,242,255,0.79), transparent 55%),
    radial-gradient(1.1px 1.1px at 61.2% 15.1%, rgba(235,242,255,0.52), transparent 55%),
    radial-gradient(1.7px 1.7px at 36.7% 12.8%, rgba(235,242,255,0.85), transparent 55%),
    radial-gradient(1.0px 1.0px at 46.7% 44.6%, rgba(235,242,255,0.4), transparent 55%),
    radial-gradient(1.6px 1.6px at 34.6% 25.3%, rgba(235,242,255,0.43), transparent 55%),
    radial-gradient(1.4px 1.4px at 3.3% 85.7%, rgba(235,242,255,0.42), transparent 55%),
    radial-gradient(1.4px 1.4px at 54.2% 4.4%, rgba(235,242,255,0.84), transparent 55%),
    radial-gradient(1.1px 1.1px at 85.6% 63.3%, rgba(235,242,255,0.53), transparent 55%),
    radial-gradient(1.4px 1.4px at 17.4% 69.9%, rgba(235,242,255,0.74), transparent 55%),
    radial-gradient(1.6px 1.6px at 33.3% 21.6%, rgba(235,242,255,0.84), transparent 55%),
    radial-gradient(1.6px 1.6px at 84.6% 72.9%, rgba(235,242,255,0.72), transparent 55%),
    radial-gradient(1.2px 1.2px at 23.2% 47.6%, rgba(235,242,255,0.36), transparent 55%),
    radial-gradient(1.1px 1.1px at 3.7% 26.6%, rgba(235,242,255,0.7), transparent 55%),
    radial-gradient(1.7px 1.7px at 94.7% 41.4%, rgba(235,242,255,0.84), transparent 55%),
    radial-gradient(1.1px 1.1px at 94.6% 34.1%, rgba(235,242,255,0.46), transparent 55%);
    animation: homeTwinkle 5s ease-in-out infinite alternate;
}
@keyframes homeTwinkle { 0% { opacity: .25; } 100% { opacity: 1; } }

.home-night .container-fluid { position: relative; z-index: 2; }

/* ── CHARACTER: big, halo'd, cropped at the bottom ────────── */
.home-gisele {
    position: absolute;
    left: 50%;
    margin-left: clamp(-150px, -6.5vw, -50px); /* overlaps behind the text panel, like the reference */
    right: auto;
    bottom: -13%;
    height: min(117%, 74vw);   /* capped by width so the box never letterboxes */
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: bottom;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    filter:
        drop-shadow(0 0 18px rgba(220,232,255,0.45))
        drop-shadow(0 0 55px rgba(150,180,255,0.30));
    animation: homeGiseleIn 1.1s ease 0.1s both;
}
@keyframes homeGiseleIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* wide soft glare pool behind her */
.home-night .home-gisele-glow {
    /* geometry mirrors .home-gisele exactly, so anything positioned inside it
       in % tracks the artwork at any window size */
    position: absolute;
    left: 50%;
    margin-left: clamp(-150px, -6.5vw, -50px);
    right: auto;
    bottom: -13%;
    height: min(117%, 74vw);
    aspect-ratio: 685 / 1100;   /* same ratio as website-gisele.webp */
    width: auto;
    background: none;
    z-index: 2;                 /* above the character so the muzzle burns through */
    pointer-events: none;
}

/* ── MUZZLE FIRE ───────────────────────────────────────────
   Anchored to the cannon mouth at 11.6% / 11.2% of the artwork.
   Two layers on different periods so the flicker never repeats
   visibly: ::before = hot core, ::after = outer flame/heat haze. */
.home-night .home-gisele-glow::before,
.home-night .home-gisele-glow::after {
    content: "";
    position: absolute;
    left: 11.6%;
    top: 11.2%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: opacity, transform;
}

/* hot core — white-gold centre, quick irregular flicker */
.home-night .home-gisele-glow::before {
    width: 19%;
    background: radial-gradient(closest-side at 50% 50%,
        rgba(255,255,255,0.98) 0%,
        rgba(255,236,190,0.92) 14%,
        rgba(255,171,24,0.72) 34%,
        rgba(255,128,0,0.36) 56%,
        rgba(255,110,0,0.12) 74%,
        transparent 88%);
    animation: homeMuzzleCore 2.3s ease-in-out infinite;
}

/* outer flame — orange bloom that swells and drifts upward like heat */
.home-night .home-gisele-glow::after {
    width: 38%;
    background: radial-gradient(closest-side at 50% 55%,
        rgba(255,171,24,0.42) 0%,
        rgba(255,128,0,0.26) 32%,
        rgba(255,110,0,0.12) 55%,
        rgba(255,90,0,0.05) 72%,
        transparent 86%);
    filter: blur(2px);
    animation: homeMuzzleFlame 3.7s ease-in-out infinite;
}

@keyframes homeMuzzleCore {
    0%   { opacity: .80; transform: translate(-50%, -50%) scale(0.94); }
    9%   { opacity: 1;   transform: translate(-50%, -51%) scale(1.09); }
    18%  { opacity: .74; transform: translate(-50%, -50%) scale(0.97); }
    31%  { opacity: .97; transform: translate(-50%, -52%) scale(1.14); }
    42%  { opacity: .82; transform: translate(-50%, -50%) scale(1.00); }
    55%  { opacity: 1;   transform: translate(-51%, -51%) scale(1.07); }
    67%  { opacity: .71; transform: translate(-50%, -50%) scale(0.93); }
    79%  { opacity: .95; transform: translate(-50%, -51%) scale(1.11); }
    90%  { opacity: .78; transform: translate(-50%, -50%) scale(0.98); }
    100% { opacity: .80; transform: translate(-50%, -50%) scale(0.94); }
}

@keyframes homeMuzzleFlame {
    0%   { opacity: .55; transform: translate(-50%, -50%) scale(0.92); }
    14%  { opacity: .78; transform: translate(-50%, -53%) scale(1.06); }
    27%  { opacity: .60; transform: translate(-49%, -51%) scale(0.98); }
    41%  { opacity: .88; transform: translate(-50%, -55%) scale(1.14); }
    56%  { opacity: .62; transform: translate(-51%, -51%) scale(1.01); }
    70%  { opacity: .80; transform: translate(-50%, -54%) scale(1.09); }
    85%  { opacity: .58; transform: translate(-50%, -51%) scale(0.95); }
    100% { opacity: .55; transform: translate(-50%, -50%) scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
    .home-night .home-gisele-glow::before,
    .home-night .home-gisele-glow::after { animation: none; }
}

/* ── TEXT BLOCK: centered-left, glowing serif ─────────────── */
@media (min-width: 992px) {
    .home-night .gz-banner-text {
        position: relative;
        margin: 0 auto;
        left: clamp(-240px, -12vw, -90px); /* shifted left of center, stays glued to the character */
        max-width: 640px;
        text-align: center;
        padding-top: 16vh;
    }
}
.home-night .andro-logo { max-width: 300px; }
.home-night .gz-banner-text > img.img-fluid { display: none; } /* old divider */

.home-night .gz-banner-text h3 {
    font-size: 30px;
    line-height: 1.35;
    text-shadow: none;
    padding-top: 26px;
}

/* line 1 — spaced serif eyebrow */
.home-night .gz-banner-text h3 .anim-slide-left {
    font-family: 'Playfair Display', 'Times New Roman', serif !important;
    font-size: clamp(20px, 2vw, 30px);
    letter-spacing: .48em;
    margin-right: -.48em; /* recentre spaced text */
    font-weight: 500;
    color: #f2f6ff !important;
    text-shadow: 0 0 14px rgba(190,210,255,0.65), 0 0 42px rgba(140,170,255,0.35);
}

/* line 2 — huge glowing serif title (replaces the orange box) */
.home-night .gz-banner-text h3 .reborn-highlight {
    background: transparent !important;
    color: #eef4ff !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    padding: .05em 0 !important;
    display: inline-block !important;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-weight: 800;
    font-size: clamp(54px, 6.6vw, 104px);
    line-height: 1.06;
    letter-spacing: .02em;
    text-shadow:
        0 0 10px rgba(225,236,255,0.85),
        0 0 30px rgba(180,205,255,0.55),
        0 0 80px rgba(130,165,255,0.35) !important;
}

/* line 3 — clean sub-line, like the reference date row */
.home-night .gz-banner-text h3 .anim-slide-right {
    font-family: 'Mukta', sans-serif !important;
    font-size: clamp(17px, 1.6vw, 24px);
    font-weight: 500;
    letter-spacing: .30em;
    margin-right: -.30em;
    color: rgba(255,255,255,0.92) !important;
    text-shadow: 0 0 18px rgba(160,190,255,0.40);
}

/* bullets — translucent panel with corner accents (GE-style) */
.home-night .enumeration {
    position: relative;
    display: inline-block;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.015) 38%, rgba(10,13,22,0.30) 100%),
        rgba(10, 13, 22, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 0;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.55),
        0 0 34px rgba(120, 155, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    margin-top: 32px;
    padding: 24px 42px;
    text-align: left;
}

/* bright corner brackets, top-left and bottom-right */
.home-night .enumeration::before,
.home-night .enumeration::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
    border: 2px solid rgba(226, 236, 255, 0.92);
    filter: drop-shadow(0 0 6px rgba(150, 185, 255, 0.55));
}
.home-night .enumeration::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}
.home-night .enumeration::after {
    right: -1px;
    bottom: -1px;
    border-left: 0;
    border-top: 0;
}

.home-night .gz-banner-text ul li {
    font-family: 'Mukta', sans-serif;
    font-size: 15px;
    letter-spacing: .03em;
    color: rgba(255,255,255,0.80);
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
    line-height: 1.75;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: color .25s ease;
}
.home-night .gz-banner-text ul li:last-child { border-bottom: 0; }
.home-night .gz-banner-text ul li:hover { color: #fff; }

/* ── NAV: thin-bordered, serif caps (home page only) ──────── */
.home-night .gz-menu li a {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 14px;
    color: rgba(255,255,255,0.88);
}
.home-night .gz-menu li a:hover { color: #fff; text-shadow: 0 0 12px rgba(190,210,255,0.8); }
.home-night a.gz-all-btn.gz-top-btn,
.home-night .dropbtn.gz-all-btn.gz-top-btn {
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 0;
    background: rgba(6,9,18,0.35);
    color: #fff;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 13px;
}
.home-night a.gz-all-btn.gz-top-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.8);
    color: #fff !important;
}

/* fade the hero into the page below */
.home-night .gz-banner-wrapper-bottom {
    height: 140px;
    background: linear-gradient(to bottom, transparent, #0a0d14);
    z-index: 3;
}

/* ── SECTIONS BELOW: match the darker theme ───────────────── */
.gz-about-wrapper { background-color: #0a0d14; }
.gz-about-wrapper .gz-about-right h3,
.gz-about-box h3 {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    letter-spacing: .06em;
    text-shadow: 0 0 16px rgba(170,195,255,0.35);
}
.gz-about-box {
    background-color: rgba(10,13,25,0.82);
    border: 1px solid rgba(255,255,255,0.30);
    box-shadow: 0 0 30px rgba(120,150,255,0.12);
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .home-night { min-height: 100vh; padding-bottom: 0; }
    /* text rides above the artwork */
    .home-night .gz-banner-text {
        position: relative;
        z-index: 3;
        padding-top: 18px;
        left: auto;
        margin: 0 auto;
        width: 100%;
    }
    /* character stays on screen, centred, tucked BEHIND the texts */
    .home-gisele,
    .home-night .home-gisele-glow {
        position: absolute;
        left: 50%;
        right: auto;
        margin-left: 0;
        transform: translateX(-50%);
        bottom: 0;
        height: min(40vh, 92vw); /* smaller now the box is gone — she no longer needs to fill the space it used to occupy */
        width: auto;
        max-width: none;
        animation: none;
    }
    .home-gisele { z-index: 0; opacity: .92; }
    .home-night .home-gisele-glow { z-index: 1; }
    .home-night .gz-banner-text h3 .reborn-highlight { font-size: clamp(44px, 12vw, 64px); }
    /* too much on a small screen at once — drop the bullet panel entirely
       and let the welcome text breathe in the space it frees up, nudged
       down toward the middle of the space above her (not centred in the
       full viewport, or the logo lands right across her face) */
    .home-night .enumeration { display: none; }
    .home-night .container-fluid {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    .home-night .container-fluid > .row {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 18vh; /* keeps the block clear of her head, now that she's shorter */
    }
}

/* ── SHOOTING STARS: brief white streaks, ~1-2 every 3-4s ── */
.home-night > .home-shooting-star {
    position: absolute;
    top: var(--top);
    left: var(--left);
    width: 120px;
    height: 2px;
    z-index: 0;
    pointer-events: none;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95));
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.75));
    opacity: 0;
    transform: rotate(var(--ang)) translateX(0);
    animation: homeShoot var(--dur) linear var(--delay) infinite;
}
.home-shooting-star:not(.home-night > *) { display: none; }
@keyframes homeShoot {
    0%   { opacity: 0;  transform: rotate(var(--ang)) translateX(0); }
    4%   { opacity: .9; }
    13%  { opacity: .9; }
    18%  { opacity: 0;  transform: rotate(var(--ang)) translateX(380px); }
    100% { opacity: 0;  transform: rotate(var(--ang)) translateX(380px); }
}
@media (prefers-reduced-motion: reduce) {
    .home-night > .home-shooting-star { animation: none; }
}

/* ── TWINKLE SPARKS: bright 4-point pops, ~1-2 every 2s ── */
.home-night > .home-twinkle-star {
    position: absolute;
    top: var(--top);
    left: var(--left);
    width: 16px;
    height: 16px;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.95))
            drop-shadow(0 0 9px rgba(190,215,255,0.70));
    animation: homeTwinklePop var(--dur) ease-in-out var(--delay) infinite;
}
.home-night > .home-twinkle-star::before,
.home-night > .home-night > .home-twinkle-star::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: linear-gradient(90deg, transparent, #fff 45%, #fff 55%, transparent);
    border-radius: 2px;
}
.home-night > .home-twinkle-star::before {
    width: 16px; height: 1.5px;
    transform: translate(-50%, -50%);
}
.home-night > .home-twinkle-star::after {
    width: 1.5px; height: 16px;
    transform: translate(-50%, -50%);
}
/* small bright core so the centre reads as a star, not a cross */
.home-night > .home-twinkle-star {
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.35) 18%, transparent 45%);
}
@keyframes homeTwinklePop {
    0%   { opacity: 0;   transform: scale(0.25) rotate(0deg); }
    6%   { opacity: 1;   transform: scale(1.15) rotate(20deg); }
    11%  { opacity: .85; transform: scale(0.95) rotate(32deg); }
    18%  { opacity: 0;   transform: scale(0.25) rotate(45deg); }
    100% { opacity: 0;   transform: scale(0.25) rotate(45deg); }
}
.home-twinkle-star:not(.home-night > *) { display: none; }
@media (prefers-reduced-motion: reduce) {
    .home-night > .home-twinkle-star { animation: none; }
}

/* ── PLAYERS-ONLINE BADGE (restored from live site) ────────── */
.gz-online-wrap {
    position: fixed;
    left: 20px;
    /* env(safe-area-inset-bottom) clears the phone's own gesture bar; the
       plain px floor covers browsers before the address bar has settled
       on first paint, where a bare bottom:30px can render partly hidden. */
    bottom: 30px;
    bottom: max(30px, env(safe-area-inset-bottom, 0px) + 22px);
    z-index: 1000;
    opacity: 0;
    animation: gzOnlineFadeIn 0.8s ease forwards;
    animation-delay: 1.1s;
}
.gz-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(29, 31, 31, 0.6);
    border: 1px solid rgba(255, 128, 0, 0.45);
    border-radius: 40px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 14px rgba(255, 128, 0, 0.2), inset 0 0 8px rgba(255, 128, 0, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.gz-online-badge:hover {
    box-shadow: 0 0 20px rgba(255, 128, 0, 0.35), inset 0 0 8px rgba(255, 128, 0, 0.1);
    transform: translateY(-1px);
}
.gz-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gz-orange-color);
    box-shadow: 0 0 5px var(--gz-orange-color), 0 0 10px var(--gz-orange-color);
    flex: 0 0 auto;
    animation: gzOnlinePulse 1.8s ease-in-out infinite;
}
.gz-online-count-num {
    color: var(--gz-yellow-color);
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 15px;
    letter-spacing: 0.5px;
    line-height: 1;
    min-width: 1.4ch;
    display: inline-block;
}
.gz-online-label {
    color: var(--gz-white-color);
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-shadow: none;
}
@keyframes gzOnlinePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
}
@keyframes gzOnlineFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* maintenance state -- red instead of orange, no count shown */
.gz-online-badge.is-maintenance {
    border-color: rgba(255, 59, 48, 0.5);
    box-shadow: 0 0 14px rgba(255, 59, 48, 0.25), inset 0 0 8px rgba(255, 59, 48, 0.08);
}
.gz-online-badge.is-maintenance .gz-online-dot {
    background: #ff3b30;
    box-shadow: 0 0 5px #ff3b30, 0 0 10px #ff3b30;
    animation: gzOnlinePulse 1s ease-in-out infinite;
}
.gz-online-badge.is-maintenance .gz-online-label {
    color: #ff9b95;
}
@media (max-width: 480px) {
    .gz-online-wrap {
        left: 14px;
        bottom: 20px;
        bottom: max(20px, env(safe-area-inset-bottom, 0px) + 16px);
    }
    .gz-online-badge { padding: 5px 10px; gap: 5px; }
    .gz-online-dot { width: 6px; height: 6px; }
    .gz-online-count-num { font-size: 12px; }
    .gz-online-label { font-size: 8px; }
}

/* redesigned home: make sure the badge clears the hero's sky layers */
.home-night ~ * .gz-online-wrap,
.gz-online-wrap { z-index: 1200; }