/* =============================================
   QUANTUM BUTTON V1.0.0 — MAIN.CSS
   Foundation: CSS variables, body, utility classes
   ============================================= */

:root {
    --neon-blue: #00f3ff;
    --neon-pink: #ff0099;
    --neon-green: #22ff22;
    --neon-gold: #ffd700;
    --neon-red: #ff4444;
    --bg-dark: #050505;
}

body {
    background: radial-gradient(circle at 50% 0%, #1a0b2e 0%, #000000 70%);
    color: white;
    font-family: 'Orbitron', Arial, sans-serif;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none;
}

/* --- BASE UTILITY CLASSES --- */
.hidden { display: none !important; }
.flex { display: flex !important; }
.pointer-events-none { pointer-events: none; }

/* ========== FIX: Missing Tailwind utility classes ========== */
/* Used in ui.js but not included in Tailwind compilation      */
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

/* ========== NEON COLOR UTILITY CLASSES ========== */
/* Tailwind-style classes for custom neon colors    */
/* ================================================ */

/* --- text colors --- */
.text-neon-blue { color: var(--neon-blue); }
.text-neon-pink { color: var(--neon-pink); }
.text-neon-green { color: var(--neon-green); }
.text-neon-gold { color: var(--neon-gold); }

/* --- text colors with opacity --- */
.text-neon-blue\/80 { color: rgba(0, 243, 255, 0.8); }

/* --- background colors --- */
.bg-neon-blue { background-color: var(--neon-blue); }
.bg-neon-blue\/10 { background-color: rgba(0, 243, 255, 0.1); }
.bg-neon-blue\/20 { background-color: rgba(0, 243, 255, 0.2); }

/* --- border colors --- */
.border-neon-blue { border-color: var(--neon-blue); }
.border-neon-blue\/30 { border-color: rgba(0, 243, 255, 0.3); }
.border-neon-blue\/50 { border-color: rgba(0, 243, 255, 0.5); }
.border-neon-gold { border-color: var(--neon-gold); }
.border-neon-gold\/30 { border-color: rgba(255, 215, 0, 0.3); }
.border-neon-gold\/50 { border-color: rgba(255, 215, 0, 0.5); }
.border-neon-green { border-color: var(--neon-green); }

/* --- ring colors --- */
.ring-neon-blue { --tw-ring-color: var(--neon-blue); }

/* --- state variants --- */
.focus\:border-neon-blue:focus { border-color: var(--neon-blue); }
.hover\:text-neon-pink:hover { color: var(--neon-pink); }

/* =============================================
   DESKTOP BACKGROUND DECORATIONS
   Shows game name on large screens so the empty
   space beside the phone container isn't boring
   ============================================= */

@media (min-width: 1025px) {
    body::before {
        content: 'QUANTUM BUTTON';
        position: fixed;
        top: 50%;
        left: 3%;
        transform: translateY(-50%) rotate(-90deg);
        font-family: 'Orbitron', sans-serif;
        font-size: 3rem;
        font-weight: 900;
        color: rgba(0, 243, 255, 0.04);
        letter-spacing: 0.5em;
        pointer-events: none;
        z-index: 0;
        white-space: nowrap;
    }
    body::after {
        content: 'QUANTUM BUTTON';
        position: fixed;
        top: 50%;
        right: 3%;
        transform: translateY(-50%) rotate(90deg);
        font-family: 'Orbitron', sans-serif;
        font-size: 3rem;
        font-weight: 900;
        color: rgba(0, 243, 255, 0.04);
        letter-spacing: 0.5em;
        pointer-events: none;
        z-index: 0;
        white-space: nowrap;
    }
}

/* Hide reCAPTCHA Enterprise badge — attribution is in privacy.html & terms.html */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    bottom: -100px !important;
}