/* === FONT FIX: Using corrected relative paths for local fonts. This is best for an APK. === */
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('vendor/fonts/saira/saira-v14-latin-regular.woff2') format('woff2'),
       url('vendor/fonts/saira/saira-v14-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('vendor/fonts/saira/saira-v14-latin-500.woff2') format('woff2'), 
       url('vendor/fonts/saira/saira-v14-latin-500.woff') format('woff');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('vendor/fonts/saira/saira-v14-latin-700.woff2') format('woff2'), 
       url('vendor/fonts/saira/saira-v14-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('vendor/fonts/saira/saira-v14-latin-800.woff2') format('woff2'), 
       url('vendor/fonts/saira/saira-v14-latin-800.woff') format('woff');
}
@font-face {
  font-family: 'Saira';
  font-style: italic;
  font-weight: 900;
  src: local(''),
       url('vendor/fonts/saira/saira-v14-latin-900italic.woff2') format('woff2'), 
       url('vendor/fonts/saira/saira-v14-latin-900italic.woff') format('woff');
}
/* ========================================= */

/* Custom style for the main "Rechaz" logo */
.brand-logo {
    font-family: 'Saira', sans-serif;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.4px;
}

/* Custom style for the brand subtitle text */
.brand-subtitle {
    font-family: 'Saira', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
}


/* === APK SETUP: NATIVE FEEL CSS & FONT SETUP === */
html, body {
    /* Set the default font for the entire application */
    font-family: 'Saira', sans-serif;

    /* Disable text selection */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;

    /* Disable the tap highlight color */
    -webkit-tap-highlight-color: transparent;

    /* Hide scrollbars */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}
/* ===================================== */


:where([class^="ri-"])::before { content: "\f3c2"; }
.gradient-bg { background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%); }
.card-shadow { box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05); }
.progress-ring { transform: rotate(-90deg); }
.floating-animation { animation: float 3s ease-in-out infinite; }
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.confetti { animation: confetti 1s ease-out; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); } 50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.6); } }
@keyframes confetti { 0% { transform: scale(0) rotate(0deg); opacity: 1; } 100% { transform: scale(1) rotate(360deg); opacity: 0; } }
.milestone-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.achievement-badge { background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%); }
.leaderboard-item { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }

.falling-coin {
    position: absolute;
    top: -50px;
    color: rgba(255, 223, 0, 0.7);
    font-size: 24px;
    animation: fall linear infinite;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(0,0,0,0.3);
}

@keyframes fall {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0;
    }
}

/* --- New Enhanced Network Card Styles --- */
.network-card {
    position: relative;
    overflow: hidden;
    background: #fdfdff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    transform: perspective(1000px); /* Adds a bit of depth */
}

.network-card h3 {
    transition: color 0.3s ease;
    color: #4b5563; /* Default text color */
}

.network-card.selected {
    border-color: transparent;
    background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
}

.network-card.selected h3 {
    color: white;
}

/* Diagonal Shine Effect */
.network-card::before, .shine-effect::before {
    content: '';
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      -45deg, 
      transparent, 
      transparent 40%, 
      rgba(255, 255, 255, 0.7) 50%, 
      transparent 60%, 
      transparent 100%
    );
    background-size: 300% 300%;
    background-position: 100% 100%;
    animation: shine 4s infinite linear;
}

.network-card::before {
    /* Stagger the animation start time for each card */
    animation-delay: calc(var(--card-index) * 0.4s); 
}

.shine-effect {
    position: relative;
    overflow: hidden;
}

@keyframes shine {
    0% {
        background-position: 120% 120%;
    }
    100% {
        background-position: -20% -20%;
    }
}

/* --- Text Shine Effect --- */
.shine-text {
    /* Use a gradient for the text color */
    background: linear-gradient(90deg, #6366F1, #3B82F6, #6366F1);
    background-size: 250% auto; /* Make the gradient wider than the text */
    
    /* Crucial properties to make the gradient show through the text */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Animate the gradient position */
    animation: shine-text-anim 4s linear infinite;
}

/* === NEW: Screen Transition Classes === */
.screen {
    /* All screens will have this transition */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.screen.hidden {
    /* When hidden, make it invisible and move it slightly */
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none; /* Prevents interacting with hidden screens */
}

@keyframes shine-text-anim {
    to {
        background-position: -250% center; /* Move the gradient to the left */
    }
}