/*
 * Elevators — game shell styling.
 *
 * The surrounding chrome (this file + the boot/offline overlay in index.html) is
 * styled to match the appsinnovate website: brand green (#75AC58) accents, a dark
 * surface, rounded cards, and pill buttons. It reads the same whether the game is
 * served standalone (offline fallback at /elevator-endless/) or embedded in the
 * site's product page iframe.
 */

:root {
    --brand: #75ac58;
    --brand-dark: #5b8e48;
    --brand-tint: #d9f0cc;
    --surface: #141414;
    --surface-2: #0d0d0d;
    --text: rgba(255, 255, 255, 0.92);
    --text-muted: rgba(255, 255, 255, 0.6);
    --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: var(--font);
    /* Flat neutral dark backdrop — shows on first paint and around the canvas.
       Kept tint-free so the surround reads as a plain dark, matching the site. */
    background-color: var(--surface);
}

#app {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Hidden until the splash has fully faded out (overlay.ts sets
       data-ready), so the game never shows through the fading splash. */
    opacity: 0;
    transition: opacity 0.5s ease;
}

#app[data-ready="true"] {
    opacity: 1;
}

/* ------------------------------------------------------- Splash overlay --- */

/* White splash: the Appsinnovate logo dead-centered on a clean white
   background, shown while the game loads (and, offline, with a note). */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    text-align: center;
    background: #ffffff;
    /* Stage 2 of the dismiss: fade the white background away. */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Dismissed: background faded out; let the game receive input. */
.overlay[data-state="hidden"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.overlay__logo {
    width: min(90vw, 560px);
    height: auto;
    display: block;
    /* Splash entrance: fade + gentle rise once the shell paints. */
    animation: splash-fade-in 0.7s ease both;
    /* Stage 1 of the dismiss: fade the logo out before the background. */
    transition: opacity 0.5s ease;
}

/* Stage 1: the logo fades out first, while the white background still holds. */
.overlay[data-state="logo-out"] .overlay__logo,
.overlay[data-state="hidden"] .overlay__logo {
    opacity: 0;
}

@keyframes splash-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

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

/* Offline note. Pinned near the bottom (not in the flow) so the logo stays
   dead-centered whether or not the note is showing. Hidden by default; it
   fades in only in the offline state. */
.overlay__msg {
    position: absolute;
    left: 50%;
    bottom: 9%;
    transform: translateX(-50%);
    margin: 0;
    max-width: 30ch;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(17, 17, 17, 0.65);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.overlay[data-state="offline"] .overlay__msg {
    opacity: 1;
}