/* Explain: Base reset, typography, custom shadows, gradient text, and animations. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    color: var(--text-color);
}

[x-cloak] {
    display: none !important;
}

/* Custom Soft Shadows for Premium Look */
.card-premium {
    box-shadow: 0 4px 20px rgba(33, 150, 243, 0.08);
    transition: all 0.3s ease;
}
.card-premium:hover {
    box-shadow: 0 12px 30px rgba(33, 150, 243, 0.15);
    transform: translateY(-4px);
}

.gradient-text {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Floating Animation for Hero Arrow */
@keyframes float-up {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.animate-float-up {
    animation: float-up 2.5s ease-in-out infinite;
}

/* Neon green arrows beside the currency notice line */
.neon-arrow {
    color: #39FF14;
    text-shadow: 0 0 4px #39FF14, 0 0 10px #39FF14, 0 0 18px rgba(57, 255, 20, 0.7);
}

/* Neon orange arrows placed behind the green ones */
.neon-arrow-orange {
    color: #FF7A00;
    text-shadow: 0 0 4px #FF7A00, 0 0 10px #FF7A00, 0 0 18px rgba(255, 122, 0, 0.7);
}
@keyframes neon-arrow-move-right {
    0%, 100% { transform: translateX(-4px); opacity: 0.55; }
    50%      { transform: translateX(4px);  opacity: 1; }
}
@keyframes neon-arrow-move-left {
    0%, 100% { transform: translateX(4px);  opacity: 0.55; }
    50%      { transform: translateX(-4px); opacity: 1; }
}
.neon-arrow-right {
    animation: neon-arrow-move-right 1.3s ease-in-out infinite;
}
.neon-arrow-left {
    animation: neon-arrow-move-left 1.3s ease-in-out infinite;
}

/* Animated neon frame around the currency notice bar — shown on phones & tablets only */
@keyframes neon-frame-pulse {
    0%, 100% {
        box-shadow:
            0 0 6px #FF7A00,
            0 0 14px #FF7A00,
            0 0 24px rgba(255, 152, 0, 0.8),
            inset 0 0 8px rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 152, 0, 0.7);
    }
    50% {
        box-shadow:
            0 0 12px #FF9800,
            0 0 26px #FF7A00,
            0 0 42px #FFB74D,
            inset 0 0 16px rgba(255, 255, 255, 0.4);
        border-color: rgba(255, 183, 77, 1);
    }
}
@media (max-width: 1023px) {
    .neon-frame-mobile {
        border: 2px solid rgba(255, 152, 0, 0.7);
        animation: neon-frame-pulse 2s ease-in-out infinite;
    }
}

/* Elegant score inputs on the match-prediction page: hide native number spinners */
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.score-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Telegram Badge Glow */
@keyframes telegram-badge-glow {
    0%, 100% {
        box-shadow: 0 0 4px rgba(34, 158, 217, 0.4), 0 0 8px rgba(34, 158, 217, 0.2);
    }
    50% {
        box-shadow: 0 0 10px rgba(34, 158, 217, 0.9), 0 0 18px rgba(34, 158, 217, 0.6);
    }
}
.animate-telegram-glow {
    animation: telegram-badge-glow 1.5s infinite;
}

/* Moving glow around the "Today's matches" button */
@keyframes match-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(34, 211, 238, 0.7), 0 0 14px rgba(34, 211, 238, 0.45), 0 0 22px rgba(34, 211, 238, 0.25);
        border-color: rgba(34, 211, 238, 0.8);
    }
    50% {
        box-shadow: 0 0 12px rgba(34, 211, 238, 1), 0 0 26px rgba(34, 211, 238, 0.8), 0 0 42px rgba(34, 211, 238, 0.5);
        border-color: rgba(103, 232, 249, 1);
    }
}
.animate-match-glow {
    animation: match-glow-pulse 1.8s ease-in-out infinite;
}