/* =============================================
   BASE.CSS — Shared design system
   Sofia's Game Arcade
   ============================================= */

:root {
    /* Colors */
    --bg-deep:       #0b0e1a;
    --bg-surface:    #131627;
    --bg-card:       rgba(255, 255, 255, 0.06);
    --border-subtle: rgba(255, 255, 255, 0.1);
    --text-primary:  #f0f0f5;
    --text-muted:    rgba(240, 240, 245, 0.55);
    --accent-green:  #4ade80;
    --accent-red:    #f87171;
    --accent-yellow: #facc15;
    --accent-blue:   #60a5fa;
    --accent-purple: #a78bfa;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 50px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-med:  0.3s ease;
    --transition-slow: 0.5s ease;

    /* Font stack */
    --font-main: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-main);
    background: linear-gradient(160deg, var(--bg-deep) 0%, #141832 50%, #1a1040 100%);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* ---- Site logo — fixed top-left, every page ---- */
.site-logo {
    position: fixed;
    top: var(--space-md);
    left: var(--space-md);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    opacity: 0.55;
    z-index: 20;
    transition: opacity var(--transition-med);
}

.site-logo:hover {
    opacity: 0.85;
}

/* ---- Back nav (game pages) ---- */
.back-nav {
    position: fixed;
    top: var(--space-md);
    left: calc(var(--space-md) + 32px);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 10;
    transition: color var(--transition-fast);
}

.back-nav:hover {
    color: var(--text-primary);
}

@media (max-width: 420px) {
    .back-nav {
        font-size: 0.8rem;
    }
}