/* =========================================================
   SEVENGAMES — MASTER GAME TEMPLATE
   Premium dark gaming interface

   QUICK CUSTOMISATION:
   Change the variables in :root to adjust the overall look.
   The sections below are labelled to make editing easier.
   ========================================================= */


/* =========================================================
   1. GLOBAL THEME
   Change these colours to rebrand the entire game.
   ========================================================= */

:root {
    color-scheme: dark;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Main colours */
    --bg-main: #07111f;
    --bg-dark: #040a13;
    --bg-panel: #101f33;
    --bg-panel-light: #1a304a;

    /* Brand accent colours */
    --accent: #b6ff36;
    --accent-blue: #36d9ff;
    --accent-purple: #9565ff;

    /* Text colours */
    --text-main: #f5f8ff;
    --text-soft: #c2cee0;
    --text-muted: #8fa2ba;

    /* Borders and effects */
    --border: #2b405a;
    --border-light: #49627f;
    --shadow: 0 20px 70px #000a;

    /* Rounded corners */
    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 22px;

    background: var(--bg-main);
    color: var(--text-main);
}


/* =========================================================
   2. RESET AND BASE ELEMENTS
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg-main);
}

body {
    min-height: 100svh;
    display: grid;
    place-items: center;
}

button,
a {
    font: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 4px;
}


/* =========================================================
   3. MAIN GAME WINDOW
   Controls the overall game container.
   ========================================================= */

.app {
    position: relative;

    width: min(100vw, 1100px);
    height: min(100svh, 780px);
    min-height: 520px;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            #203d60 0%,
            #10233b 38%,
            #081322 72%,
            #050b14 100%
        );

    border: 1px solid var(--border);

    box-shadow:
        0 30px 90px #000b,
        0 0 45px #36d9ff0a,
        inset 0 1px 0 #ffffff12;
}


/* =========================================================
   4. SCREEN MANAGEMENT
   Controls which game screen is visible.
   ========================================================= */

.screen {
    position: absolute;
    inset: 0;
}

.hidden {
    display: none !important;
}


/* =========================================================
   5. MAIN MENU
   Controls the opening screen.
   ========================================================= */

.home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: clamp(22px, 5vw, 60px);

    background:
        radial-gradient(
            circle at 50% 35%,
            #24476b 0%,
            #132a45 35%,
            #0a1728 70%,
            #050c16 100%
        );
}


/* SevenGames branding */

.brand {
    font-weight: 1000;
    letter-spacing: .12em;
    font-size: 1.5rem;
}

.brand span {
    color: var(--accent);
    margin-left: 8px;
}


/* Small heading above the game title */

.eyebrow {
    color: var(--accent);

    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .22em;

    margin: 28px 0 8px;

    text-transform: uppercase;
}


/* Main game title */

h1 {
    font-size: clamp(2.3rem, 8vw, 5rem);
    line-height: 1;

    margin: 8px 0 16px;

    font-weight: 1000;
    letter-spacing: -.045em;

    text-shadow: 0 5px 30px #0008;
}


/* Game description */

.home p {
    max-width: 560px;

    color: var(--text-soft);
    line-height: 1.65;
}


/* =========================================================
   6. BUTTONS
   Main buttons, secondary buttons and text links.
   ========================================================= */

.primary,
.secondary,
.text-button,
.icon-button {
    border: 0;
    font-weight: 900;
}


/* Main Play button */

.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: min(280px, 85%);

    padding: 17px 26px;
    margin-top: 18px;

    border-radius: 12px;

    background:
        linear-gradient(
            110deg,
            var(--accent),
            #75f4b5
        );

    color: #07111f;

    box-shadow:
        0 5px 0 #398b69,
        0 12px 28px #70ffb52b;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.primary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 0 #398b69,
        0 16px 35px #70ffb540;

    filter: brightness(1.08);
}

.primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #398b69;
}


/* Secondary buttons */

.secondary {
    padding: 13px 22px;
    margin-top: 10px;

    border-radius: var(--radius-small);

    background: linear-gradient(
        145deg,
        #29415e,
        #192d46
    );

    color: #fff;

    border: 1px solid #405a78;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.secondary:hover {
    background: #304d6d;
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}


/* Simple text buttons */

.text-button {
    display: block;

    background: none;
    color: #b9c8dc;

    margin: 16px auto 0;
    padding: 10px;

    transition: color .18s ease;
}

.text-button:hover {
    color: var(--accent);
}


/* Muted supporting text */

.muted {
    font-size: .85rem;
    color: var(--text-muted) !important;
}


/* =========================================================
   7. GAME SCREEN AND HUD
   HUD = score, timer, best score and pause controls.
   ========================================================= */

.game {
    display: flex;
    flex-direction: column;
}


/* Top information bar */

.hud {
    display: flex;
    align-items: center;
    justify-content: space-around;

    gap: 8px;
    padding: 12px;

    background: linear-gradient(
        180deg,
        #101f32,
        #091523
    );

    border-bottom: 1px solid var(--border);

    box-shadow: 0 5px 20px #0003;
}


/* Individual HUD information */

.hud div {
    display: grid;
    text-align: center;
    gap: 2px;
}


/* HUD labels */

.hud small {
    font-size: .65rem;
    color: #9fb0c5;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* HUD numbers */

.hud strong {
    font-size: 1.25rem;
    font-weight: 900;
}


/* Pause and sound buttons */

.icon-button {
    width: 42px;
    height: 42px;

    border-radius: var(--radius-small);

    background: linear-gradient(
        145deg,
        #29415e,
        #182b43
    );

    color: #fff;
    font-size: 1.1rem;

    border: 1px solid #405a78;

    transition:
        background .18s ease,
        transform .18s ease;
}

.icon-button:hover {
    background: #345575;
    transform: translateY(-2px);
}


/* =========================================================
   8. GAME MESSAGE
   Short instructions or messages during gameplay.
   ========================================================= */

.game-message {
    text-align: center;

    min-height: 42px;
    padding: 10px;

    color: var(--text-soft);
    font-weight: 700;
}


/* =========================================================
   9. PLAY AREA
   This is where the actual game will appear.
   ========================================================= */

.play-area {
    position: relative;

    flex: 1;

    display: grid;
    place-items: center;

    overflow: hidden;
    padding: 18px;
}


/* Temporary sample game placeholder */

.placeholder {
    display: grid;
    gap: 12px;

    place-items: center;
    text-align: center;

    color: #aebed2;

    border: 1px dashed #47617e;
    border-radius: var(--radius-large);

    padding: 34px;

    width: min(90%, 520px);

    background: #10213988;
}

.placeholder span {
    font-size: 3rem;
}

.placeholder strong {
    font-size: 1.3rem;
}

.placeholder small {
    color: #8297b2;
}


/* =========================================================
   10. PAUSE AND GAME-OVER OVERLAYS
   Darkened background behind popup windows.
   ========================================================= */

.shade {
    position: absolute;
    inset: 0;

    z-index: 5;

    display: grid;
    place-items: center;

    padding: 18px;

    background: #020812d9;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


/* Popup window */

.modal {
    width: min(92%, 390px);
    max-height: 92%;

    overflow: auto;
    text-align: center;

    padding: 28px 22px;

    border: 1px solid #405a78;
    border-radius: var(--radius-large);

    background:
        linear-gradient(
            145deg,
            #1c3450,
            #102037 55%,
            #0a1525
        );

    box-shadow:
        0 25px 80px #000b,
        inset 0 1px 0 #ffffff12;
}

.modal h2 {
    font-size: 1.8rem;
    margin: 10px 0;
    font-weight: 950;
}

.modal p {
    color: #b8c8dc;
    line-height: 1.55;
}

.modal-icon {
    font-size: 2.8rem;
}


/* =========================================================
   11. SPONSOR ADVERTS
   Controls the advert label and sponsor image.
   ========================================================= */

.sponsor-label {
    display: inline-block;

    color: var(--accent);

    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .2em;

    margin-bottom: 12px;
}


/* Sponsor image */

.sponsor-card img {
    display: block;

    width: 100%;
    max-height: 42vh;

    object-fit: contain;

    border-radius: var(--radius-small);

    background: #050b13;
}


/* Sponsor advert link */

.link-button {
    text-decoration: none;
    margin-bottom: 6px;
}


/* =========================================================
   12. LOADING SPINNER
   ========================================================= */

.spinner {
    width: 34px;
    height: 34px;

    border: 4px solid #45607c;
    border-top-color: var(--accent);

    border-radius: 50%;

    margin: 0 auto 16px;

    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   13. TABLET AND MOBILE LAYOUT
   Adjust the game for smaller screens.
   ========================================================= */

@media (max-width: 600px) {

    .app {
        min-height: 100svh;
        height: 100svh;

        border: 0;
    }

    .hud {
        padding: 9px 6px;
    }

    .hud strong {
        font-size: 1.05rem;
    }

    .home {
        padding: 24px;
    }

    .modal {
        padding: 24px 18px;
    }
}


/* =========================================================
   14. ACCESSIBILITY
   Respect the player's reduced-motion preference.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}








/* =========================================================
   SEVENGAMES — AAA MENU FINISH
   Add this section at the bottom of style.css
   ========================================================= */

/* Animated ambient menu lighting */

.home {
    isolation: isolate;
    overflow: hidden;
}

.home::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(circle at 50% 40%,
            #b6ff3618 0%,
            transparent 28%),
        radial-gradient(circle at 15% 75%,
            #36d9ff18 0%,
            transparent 32%),
        radial-gradient(circle at 85% 20%,
            #9565ff18 0%,
            transparent 30%);

    animation: menuAtmosphere 12s ease-in-out infinite alternate;
}

@keyframes menuAtmosphere {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1.12) rotate(4deg);
    }
}

/* Premium SevenGames branding */

.brand {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 1000;
    letter-spacing: .16em;

    text-shadow: 0 0 25px #36d9ff35;
}

.brand span {
    color: var(--accent);
    text-shadow: 0 0 22px #b6ff3680;
}

/* Stronger game title */

.home h1 {
    background: linear-gradient(
        180deg,
        #ffffff 5%,
        #c8d8ed 55%,
        #8ba6c5 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0 8px 18px #0008);
}

/* Premium Play button */

.home .primary {
    min-height: 60px;
    min-width: min(300px, 85%);

    border-radius: 14px;

    font-size: 1.05rem;
    letter-spacing: .06em;
    text-transform: uppercase;

    box-shadow:
        0 5px 0 #398b69,
        0 0 28px #b6ff3635,
        0 12px 35px #0007;
}

.home .primary:hover {
    box-shadow:
        0 8px 0 #398b69,
        0 0 38px #b6ff3660,
        0 15px 40px #0009;
}

/* More refined Back to SevenGames button */

.home .secondary {
    background: #ffffff08;
    border: 1px solid #ffffff25;

    color: #d5e2f2;

    min-width: 190px;
}

.home .secondary:hover {
    background: #36d9ff12;
    border-color: var(--accent-blue);
    color: #fff;
}

/* Cleaner menu description */

.home p {
    line-height: 1.7;
    color: #b9c9dc;
}

/* Small glowing accent above the title */

.home .eyebrow {
    text-shadow: 0 0 15px #b6ff3680;
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
    .home::before {
        animation: none;
    }
}




/* =========================================================
   BACK TO SEVENGAMES BUTTON
   ========================================================= */

#rootBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 28px;
    padding: 13px 24px;

    min-width: 200px;

    background: linear-gradient(
        145deg,
        #1b3048,
        #101e30
    );

    color: #b9c9dc;

    border: 1px solid #405a78;
    border-radius: 12px;

    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .04em;

    box-shadow: 0 6px 18px #0005;

    transition: all .2s ease;
}

#rootBtn:hover {
    color: #ffffff;
    border-color: var(--accent);
    background: #203b54;

    transform: translateY(-2px);

    box-shadow: 0 0 18px #b6ff3625;
}

#rootBtn:active {
    transform: translateY(1px);
}






















/* =========================================================
   SEVENGAMES — PREMIUM GAME HUD
   ========================================================= */

.hud {
    min-height: 76px;
    padding: 12px 18px;
    gap: 14px;

    background: linear-gradient(
        180deg,
        #142740,
        #091523
    );

    border-bottom: 1px solid #36d9ff35;

    box-shadow:
        0 8px 25px #0005,
        inset 0 1px 0 #ffffff0c;
}

.hud div {
    min-width: 65px;
    padding: 5px 10px;
    border-radius: 10px;
}

.hud small {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: #8fa9c5;
}

.hud strong {
    font-size: 1.35rem;
    font-weight: 950;
    color: #f5f8ff;
    text-shadow: 0 0 15px #36d9ff25;
}

/* Timer emphasis */

#time {
    color: var(--accent);
    text-shadow: 0 0 15px #b6ff3650;
}

/* Pause and sound controls */

.icon-button {
    width: 44px;
    height: 44px;

    border-radius: 12px;
    border: 1px solid #405a78;

    background: linear-gradient(
        145deg,
        #29415e,
        #14273d
    );

    box-shadow: 0 4px 12px #0005;
}

.icon-button:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 0 16px #36d9ff25;
}

/* Smaller screens */

@media (max-width: 600px) {
    .hud {
        min-height: 66px;
        padding: 8px 5px;
        gap: 4px;
    }

    .hud div {
        min-width: 48px;
        padding: 4px;
    }

    .hud strong {
        font-size: 1.1rem;
    }

    .icon-button {
        width: 40px;
        height: 40px;
    }
}




/* =========================================================
   SEVENGAMES — PREMIUM PAUSE & GAME-OVER SCREENS
   ========================================================= */

/* Dark, cinematic overlay */

.shade {
    background: #020812e8;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

/* Premium popup panel */

.modal {
    position: relative;
    padding: 32px 26px;

    border: 1px solid #496681;
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 50% 0%,
            #294768 0%,
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #172e49,
            #0b1729 75%
        );

    box-shadow:
        0 25px 80px #000c,
        0 0 30px #36d9ff12,
        inset 0 1px 0 #ffffff15;
}

/* Popup headings */

.modal h2 {
    font-size: clamp(1.7rem, 5vw, 2.2rem);
    font-weight: 1000;
    letter-spacing: -.03em;

    color: #fff;
    text-shadow: 0 4px 18px #0008;
}

/* Supporting text */

.modal p {
    color: #bdcce0;
    line-height: 1.65;
}

/* Large popup icons */

.modal-icon {
    font-size: 3.2rem;
    filter: drop-shadow(0 5px 12px #36d9ff35);
}

/* Buttons inside popups */

.modal .primary,
.modal .secondary {
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* Sponsor label */

.sponsor-label {
    padding: 7px 13px;
    border: 1px solid #b6ff3640;
    border-radius: 30px;
    background: #b6ff3610;
}

/* Mobile popup spacing */

@media (max-width: 600px) {
    .modal {
        padding: 26px 19px;
        border-radius: 18px;
    }
}







/* =========================================================
   SEVENGAMES — MASTER GAMEPLAY AREA
   Neutral premium arcade background
   ========================================================= */

.play-area {
    position: relative;
    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 50% 40%,
            #193653 0%,
            #10243a 45%,
            #091525 100%
        );
}

/* Subtle ambient lighting */

.play-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 15% 20%,
            #36d9ff12,
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 80%,
            #9565ff12,
            transparent 35%
        );
}

/* Faint arcade grid */

.play-area::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image:
        linear-gradient(#ffffff08 1px, transparent 1px),
        linear-gradient(90deg, #ffffff08 1px, transparent 1px);

    background-size: 42px 42px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 25%,
        black 75%,
        transparent
    );
}

/* Temporary sample-game panel */

.placeholder {
    border: 1px solid #496681;
    background: linear-gradient(
        145deg,
        #1a3551cc,
        #0b192bcc
    );

    box-shadow:
        0 20px 50px #0005,
        inset 0 1px 0 #ffffff12;

    backdrop-filter: blur(8px);
}




/* =========================================================
   SEVENGAMES — REUSABLE ARCADE GRID
   Add the class to any game area to use the grid.
   ========================================================= */

.arcade-grid {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background-color: #0b1929;

    background-image:
        linear-gradient(#36d9ff12 1px, transparent 1px),
        linear-gradient(90deg, #36d9ff12 1px, transparent 1px);

    background-size: 42px 42px;
}

/* Cyan neon grid */

.arcade-grid.grid-cyan {
    background-image:
        linear-gradient(#36d9ff25 1px, transparent 1px),
        linear-gradient(90deg, #36d9ff25 1px, transparent 1px);
}

/* SevenGames green grid */

.arcade-grid.grid-green {
    background-image:
        linear-gradient(#b6ff361c 1px, transparent 1px),
        linear-gradient(90deg, #b6ff361c 1px, transparent 1px);
}

/* Purple neon grid */

.arcade-grid.grid-purple {
    background-image:
        linear-gradient(#9565ff25 1px, transparent 1px),
        linear-gradient(90deg, #9565ff25 1px, transparent 1px);
}

/* Finer grid for smaller game areas */

.arcade-grid.grid-fine {
    background-size: 24px 24px;
}

/* Larger grid for open game environments */

.arcade-grid.grid-large {
    background-size: 64px 64px;
}












/* =========================================================
   SEVENGAMES — PREMIUM SPONSOR ADVERT SCREEN

   Controls the appearance of SevenGames sponsor adverts.
   Does not change advert timing or Google AdSense logic.
   ========================================================= */


/* ---------------------------------------------------------
   1. ADVERT BACKGROUND
   --------------------------------------------------------- */

#sponsorOverlay {
    background:
        radial-gradient(
            circle at 50% 40%,
            #173b55cc,
            #020812ed 75%
        );

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* ---------------------------------------------------------
   2. SPONSOR PANEL
   --------------------------------------------------------- */

.sponsor-card {
    width: min(92%, 440px);
    padding: 30px 26px;

    border: 1px solid #36d9ff55;
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 50% 0%,
            #244867,
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #172e49,
            #091525
        );

    box-shadow:
        0 25px 80px #000c,
        0 0 35px #36d9ff18,
        inset 0 1px 0 #ffffff15;
}


/* ---------------------------------------------------------
   3. SPONSORED LABEL
   --------------------------------------------------------- */

.sponsor-label {
    display: inline-block;

    padding: 8px 16px;
    margin-bottom: 18px;

    color: var(--accent);

    background: #b6ff3610;
    border: 1px solid #b6ff3650;
    border-radius: 30px;

    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .2em;

    box-shadow: 0 0 18px #b6ff3615;
}


/* ---------------------------------------------------------
   4. SPONSOR IMAGE
   --------------------------------------------------------- */

.sponsor-card img {
    display: block;

    width: 100%;
    max-height: 340px;

    margin: 0 auto 20px;

    object-fit: contain;

    border: 1px solid #ffffff20;
    border-radius: 14px;

    background: #050b13;

    box-shadow:
        0 12px 30px #0007,
        0 0 20px #36d9ff12;
}


/* ---------------------------------------------------------
   5. SPONSOR HEADING
   --------------------------------------------------------- */

.sponsor-card h2 {
    margin: 12px 0;

    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 950;
    letter-spacing: -.025em;

    color: #ffffff;
}


/* ---------------------------------------------------------
   6. SPONSOR DESCRIPTION
   --------------------------------------------------------- */

.sponsor-card p {
    color: #bdcce0;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   7. VISIT WEBSITE BUTTON
   --------------------------------------------------------- */

.sponsor-card .link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 280px;

    min-height: 54px;

    margin: 20px auto 10px;
    padding: 14px 22px;

    border-radius: 12px;

    background: linear-gradient(
        110deg,
        var(--accent),
        #75f4b5
    );

    color: #07111f;

    font-weight: 950;
    letter-spacing: .06em;

    text-decoration: none;

    box-shadow:
        0 5px 0 #398b69,
        0 0 25px #b6ff3630;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.sponsor-card .link-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 7px 0 #398b69,
        0 0 35px #b6ff3660;
}


/* ---------------------------------------------------------
   8. SMALL SUPPORTING MESSAGE
   --------------------------------------------------------- */

.sponsor-card .muted {
    margin-top: 14px;
    font-size: .8rem;
    color: #8fa2ba !important;
}


/* ---------------------------------------------------------
   9. MOBILE ADVERT DISPLAY
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .sponsor-card {
        padding: 24px 18px;
    }

    .sponsor-card img {
        max-height: 38vh;
    }

}






/* ==================================================
   SEVENGAMES — ROUND TRANSITION MESSAGE
   ================================================== */
/* 
#sponsorOverlay {
    position: relative;
} */

/* Small status message above the sponsor content */
#sponsorOverlay::after {
    content: "PREPARING NEXT ROUND...";
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);

    color: var(--accent);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .18em;
    white-space: nowrap;

    text-shadow: 0 0 14px #b6ff3660;
    animation: transitionPulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes transitionPulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #sponsorOverlay::after {
        animation: none;
    }
}