@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root { --primary: #6366f1; --bg: #f8fafc; --surface: #ffffff; }

html, body {
    font-family: 'Outfit', sans-serif;
    color: #1e293b;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    height: 100%;
}

/* ---------- Animated gaming backdrop behind the phone shell ---------- */
body {
    background: #05040d;
    overflow-x: hidden;
}
#bg-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.bg-glow {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 20%, rgba(99,102,241,0.35), transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(217,70,239,0.28), transparent 45%),
        radial-gradient(circle at 50% 90%, rgba(56,189,248,0.22), transparent 45%),
        linear-gradient(160deg, #05040d 0%, #0b0a1f 45%, #120a24 100%);
    background-size: 200% 200%;
    animation: bgShift 18s ease-in-out infinite;
}
@keyframes bgShift {
    0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; }
    50% { background-position: 20% 30%, 80% 30%, 40% 70%, 100% 100%; }
}
.bg-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .25;
    background-image:
        linear-gradient(rgba(99,102,241,0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.18) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 90%);
}

#phone-shell {
    position: relative;
    z-index: 1;
}

/* ---------- Utilities ---------- */
.no-scroll::-webkit-scrollbar { display: none; }
.touch-btn:active { transform: scale(0.96); transition: 0.1s; }

.glass { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.05); }
.glass-dark { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(10px); }

.grad-main { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }
.grad-gold { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); }

/* ---------- Entrance animations ---------- */
.anim-up { animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(20px); }
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }

.anim-pop { animation: pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Neon glow accents (gaming feel) ---------- */
.glow-ring {
    position: relative;
}
.glow-ring::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #6366f1, #d946ef, #38bdf8, #6366f1);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: glowSpin 6s linear infinite;
    opacity: .55;
}
@keyframes glowSpin { to { background-position: 300% 0; } }

.btn-pulse { animation: btnPulse 2.4s ease-in-out infinite; }
@keyframes btnPulse {
    0%, 100% { box-shadow: 0 8px 24px -6px rgba(79,70,229,.55); }
    50% { box-shadow: 0 8px 34px -4px rgba(124,58,237,.85); }
}

.splash-ring {
    position: absolute; inset: 0; border-radius: 9999px;
    border: 2px solid transparent;
    border-top-color: #818cf8; border-right-color: #d946ef;
    animation: spin 1.4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Toast ---------- */
#toast-box { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; width: 90%; max-width: 350px; display: flex; flex-direction: column; gap: 10px; }
.toast { background: white; padding: 12px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; animation: toastIn 0.3s ease-out; border-left: 4px solid var(--primary); }
@keyframes toastIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- Nav ---------- */
.nav-btn.active i { color: #4f46e5; transform: translateY(-4px); filter: drop-shadow(0 4px 6px rgba(79, 70, 229, 0.3)); }
.nav-btn.active span { color: #4f46e5; font-weight: 700; }
.nav-btn i, .nav-btn span { transition: 0.3s; }

/* ---------- Loader ---------- */
.loader { width: 30px; height: 30px; border: 3px solid #e2e8f0; border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }

/* ---------- Card hover/press feel ---------- */
.game-card { transition: transform .18s ease, box-shadow .18s ease; }
.game-card:active { transform: scale(0.97); }