/* ============================================================
   Madderverse shared site footer
   - .site-footer       full footer (flowing). Hub, 404, groodle,
                        about, legal. Sits at the bottom of the
                        document flow.
   - .site-footer-slim  thin fixed-position strip. Kiosk games
                        (cookie-cache, eat-worms, bala-draws,
                        friend-picker, giggle-gears, georges-jump,
                        all-munkis, krazy-kritters, gazonionaire).
                        Overlays the game UI; pointer-events: none
                        except on the links inside.
   Both share the same copyright + Madderverse link pattern so the
   branding reads identically across the site.
   ============================================================ */

/* ---------- Full flowing footer ---------- */
.site-footer {
    margin-top: auto;
    padding: 2rem 1rem 1.5rem;
    border-top: 1px solid rgba(0, 255, 204, 0.15);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.site-footer .footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
}
.site-footer .footer-nav a {
    color: #00ffcc;
    text-decoration: none;
    transition: color 0.2s, text-shadow 0.2s;
}
.site-footer .footer-nav a:hover {
    color: #ff00ff;
    text-shadow: 0 0 10px #ff00ff;
}

.site-footer .footer-tagline {
    font-family: monospace;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    margin: 0.4rem 0;
    text-transform: uppercase;
}

.site-footer .footer-copy {
    opacity: 0.55;
    font-size: 0.78rem;
    margin: 0.5rem 0 0;
}
.site-footer .footer-copy a { color: #ffffff; }


/* ---------- Slim kiosk-game footer ---------- */
/* --mv-slim-h is the rendered height of the slim strip. Kiosk games
   that pin UI to the bottom edge (.tray-wrap, .toolbar, etc.) can
   add this value to their bottom padding to keep buttons clear. */
:root { --mv-slim-h: 22px; }

.site-footer-slim {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 3px 10px;
    padding-bottom: max(3px, env(safe-area-inset-bottom, 0));
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(0, 255, 204, 0.12);
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.4px;
    line-height: 1.2;
    pointer-events: none; /* let clicks pass through to game UI */
    user-select: none;
}

.site-footer-slim .sep {
    opacity: 0.4;
    pointer-events: none;
}

.site-footer-slim a {
    color: rgba(0, 255, 204, 0.8);
    text-decoration: none;
    pointer-events: auto; /* but links are still clickable */
    transition: color 0.2s, text-shadow 0.2s;
}
.site-footer-slim a:hover {
    color: #00ffcc;
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.6);
}

@media (max-width: 380px) {
    .site-footer-slim { font-size: 0.62rem; gap: 0.4rem; }
    .site-footer-slim .sep { opacity: 0.3; }
}


/* ---------- Floating home button ----------
   Sits in the top-left of every game page. Replaces the in-game
   "← Madderverse" header bars. Anchored with safe-area insets so
   it dodges notches / status bars. Same blurred-pill aesthetic
   as the slim footer for visual consistency.                     */
.madder-home {
    position: fixed;
    top:  max(12px, env(safe-area-inset-top,  0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    z-index: 60;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 255, 204, 0.35);
    color: rgba(0, 255, 204, 0.85);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    transition: color 0.15s ease,
                border-color 0.15s ease,
                background 0.15s ease,
                box-shadow 0.15s ease,
                transform 0.08s ease;
    -webkit-tap-highlight-color: transparent;
}

.madder-home:hover,
.madder-home:focus-visible {
    color: #ffffff;
    border-color: #ff2e88;
    background: rgba(0, 0, 0, 0.72);
    box-shadow: 0 0 14px rgba(255, 46, 136, 0.4);
    outline: none;
}

.madder-home:active {
    transform: scale(0.93);
}

@media (max-width: 380px) {
    .madder-home { width: 36px; height: 36px; font-size: 20px; }
}


/* ---------- Floating game-control cluster ----------
   Top-right counterpart to .madder-home. A container only —
   it positions whatever the game puts inside it (REMIX, CLEAR,
   MUTE, etc) without overriding the game's own button styles.
   Games can wrap their existing toolbar buttons in this and
   reclaim the vertical space their old <header> used to eat.   */
.madder-controls {
    position: fixed;
    top:   max(12px, env(safe-area-inset-top,   0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    z-index: 55;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    /* Leave room for the .madder-home pill on the left edge so
       a long control row doesn't crash into it. */
    max-width: calc(100vw - 80px);
    pointer-events: none;
}

/* Direct children become interactive again. The wrapper itself
   stays pass-through so taps on empty gaps don't block game UI
   underneath. */
.madder-controls > * {
    pointer-events: auto;
}