/* ===========================================================
   Pint League — tokens del tema (neon oscuro, estilo Pint-league)
   =========================================================== */
:root {
    --bg: #0B0B12;
    --surface: #18181B;
    --surface-2: #27272A;
    --surface-3: #303036;
    --primary: #FDE047;
    --primary-dark: #EAB308;
    --secondary: #FF007F;
    --cyan: #06B6D4;
    --green: #22C55E;

    --text: #FFFFFF;
    --text-soft: #A1A1AA;
    --text-muted: #71717A;
    --border: #27272A;
    --error: #EF4444;

    --gold: #FDE047;
    --silver: #D4D4D8;
    --bronze: #F97316;

    /* spacing */
    --xs: 4px; --sm: 8px; --md: 12px; --lg: 16px; --xl: 24px; --xxl: 32px;
    /* radius */
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

    --glow: 0 0 18px rgba(253, 224, 71, .45);
    --font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --tabbar-h: 64px;
    --max-w: 540px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
}

body {
    max-width: var(--max-w);
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    color: var(--text);
    background: transparent;
}

/* Fondo ambiental neón fijo (más vivo que el negro sólido). */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1000px 600px at 50% -8%, rgba(253, 224, 71, .10), transparent 60%),
        radial-gradient(820px 620px at 115% 4%, rgba(255, 0, 127, .10), transparent 55%),
        radial-gradient(820px 720px at -15% 22%, rgba(6, 182, 212, .09), transparent 55%),
        radial-gradient(900px 700px at 50% 115%, rgba(168, 85, 247, .08), transparent 60%),
        var(--bg);
}

#app {
    padding: calc(var(--lg) + env(safe-area-inset-top)) var(--lg) calc(var(--tabbar-h) + var(--xl) + env(safe-area-inset-bottom));
    min-height: 100dvh;
}

a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 0; height: 0; }

h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .5px; }