/* Shared website theme. Game canvases and the dashboard own their presentation. */
:root {
    --bs-primary: var(--gge-blue-0d6efd, #0d6efd);
    --bs-primary-rgb: var(--gge-blue-0d6efd-rgb, 13,110,253);
    --bs-info-rgb: var(--gge-blue-0dcaf0-rgb, 13,202,240);
}

body {
    background-color: var(--gge-background-color, #0c0d13);
    background-image: var(--gge-background-image, none);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

.topGlow {
    background-image: var(--gge-top-glow, url('/assets/images/topGlow.png.webp'));
}

.btn-primary {
    --bs-btn-bg: var(--gge-blue-0d6efd, #0d6efd);
    --bs-btn-border-color: var(--gge-blue-0d6efd, #0d6efd);
    --bs-btn-hover-bg: var(--gge-blue-0b5ed7, #0b5ed7);
    --bs-btn-hover-border-color: var(--gge-blue-0a58ca, #0a58ca);
    --bs-btn-active-bg: var(--gge-blue-0a58ca, #0a58ca);
    --bs-btn-active-border-color: var(--gge-blue-0a53be, #0a53be);
    --bs-btn-disabled-bg: var(--gge-blue-0d6efd, #0d6efd);
    --bs-btn-disabled-border-color: var(--gge-blue-0d6efd, #0d6efd);
    --bs-btn-focus-shadow-rgb: var(--gge-blue-3184fd-rgb, 49,132,253);
}

.header-div {
    background-image: linear-gradient(360deg, var(--gge-accent, #00baef) 0%, rgba(var(--gge-accent-rgb, 0,186,239), .29) 35%, transparent 100%), var(--gge-hero-image, none);
    background-size: cover;
    background-position: center;
}

html[data-gge-hero-art="off"] .header-div > img {
    display: none;
}

.logo {
    background-image: var(--gge-footer-logo, url('/assets/images/logo_footer.png'));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.gge-theme-preview-bar {
    display: flex;
    position: relative;
    z-index: 1050;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
    padding: 10px 16px;
    background: #1f1729;
    border-block-end: 1px solid #a77cbd;
    color: #fff;
    font: 500 13px/1.5 Poppins, sans-serif;
}

.gge-theme-preview-bar a,
.gge-theme-preview-bar button {
    border: 1px solid #bc9dcd;
    border-radius: 6px;
    background: transparent;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    font: inherit;
}

.gge-theme-preview-bar button:focus-visible,
.gge-theme-preview-bar a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

#particles-js.gge-site-effects {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

#particles-js.gge-site-effects[hidden] {
    display: none;
}

.gge-site-effect-bat {
    position: absolute;
    top: -60px;
    animation: gge-theme-bat-fall var(--effect-duration, 20s) var(--effect-delay, 0s) linear infinite;
}

.gge-site-effect-bat img {
    display: block;
    animation: gge-theme-bat-sway 4s ease-in-out infinite alternate;
}

.gge-effects-paused .gge-site-effect-bat,
.gge-effects-paused .gge-site-effect-bat img {
    animation-play-state: paused;
}

@keyframes gge-theme-bat-fall {
    to { transform: translateY(calc(100vh + 120px)); }
}

@keyframes gge-theme-bat-sway {
    from { transform: translateX(-12px) rotate(-12deg); }
    to { transform: translateX(18px) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
    #particles-js.gge-site-effects { display: none; }
}