/* --- Global Styles & Color Palette --- */
:root {
    --bg-dark: #0D1A15;      
    --primary-green: #4CBB17; 
    --card-bg: #1A2C23;      
    --border-color: #2a4b3a;
    --text-light: #F0F0F0;
    --text-muted: #8c9ea6;
}

html { scroll-padding-top: 121px; }
body { background-color: var(--bg-dark); color: var(--text-light);  padding-top: 121px;}
section { padding: 100px 0; }
.section-title { color: var(--primary-green); font-weight: bold; margin-bottom: 2rem; }

/* --- Navigation Bar --- */
.navbar { background-color: rgba(13, 26, 21, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); padding-top: 1rem; padding-bottom: 1rem; }
.navbar-brand { font-weight: bold; color: var(--primary-green) !important; display: flex; align-items: center; }
.navbar-logo { height: 40px; margin-right: 10px; }
.nav-link { color: var(--text-light) !important; transition: color 0.3s ease; font-weight: 500; }
.nav-link:hover { color: var(--primary-green) !important; }
.nav-social-icon i { font-size: 1.2rem; color: var(--text-muted); transition: color 0.3s ease; }
.nav-social-icon i:hover { color: var(--primary-green); }

/* --- Ticker Tape --- */
.ticker-wrap {
    /* Positioning from your original CSS */
    position: fixed;
    top: 81px; 
    width: 100%;
    z-index: 1020;

    /* Styling from your original CSS */
    height: 40px;
    background-color: var(--primary-green); 
    color: var(--bg-dark); 

    /* Essential for the seamless effect */
    overflow: hidden; 
}

/* The inner container that holds the content and gets animated. */
.ticker {
    /* These properties create a single, unbroken line of text */
    display: inline-block;
    white-space: nowrap;
    
    /* These ensure consistent height and vertical alignment */
    height: 40px;
    line-height: 40px;
    
    /* 
     * THE ANIMATION ITSELF:
     * - 'ticker-scroll' is the name of our @keyframes animation below.
     * - '40s' is the DURATION. Increase for a slower scroll, decrease for faster.
     * - 'linear' means the speed is constant (no easing).
     * - 'infinite' means it loops forever.
    */
    animation: ticker-scroll 40s linear infinite;
}

/* Each individual item inside the ticker. */
.ticker-item {
    display: inline-block;
    padding: 0 2rem;
    font-weight: bold;
}

/* Optional: Adds a pause effect when the user hovers over the ticker. */
.ticker-wrap:hover .ticker {
    animation-play-state: paused;
}

/* The @keyframes that define the start and end of the animation. */
@keyframes ticker-scroll {
    from {
        /* The animation starts at the original position. */
        transform: translateX(0);
    }
    to {
        /*
         * The animation ends when the content has moved to the left by
         * exactly half of its total width. Because your JavaScript has
         * duplicated the content, this creates a mathematically perfect
         * and seamless loop.
        */
        transform: translateX(-50%);
    }
}
/* --- Hero Section --- */
.hero {
    min-height: 100vh;
    /* The gradient is now just a simple dark overlay */
    background: 
        linear-gradient(rgba(13, 26, 21, 0.8), rgba(13, 26, 21, 0.8)), 
        url('/static/images/hero-bg.jpg');
    background-size: cover;
    background-position: center -30px; /* This keeps your upward shift */
    position: relative; /* This is CRUCIAL for the overlay to work */
}

.hero .container {
    position: relative; /* Establishes a stacking context */
    z-index: 2;         /* Lifts the content above other elements */
}


.hero::after {
    content: ''; /* Required for pseudo-elements to show up */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%; /* The fade will cover the bottom quarter of the section */
    background: linear-gradient(to top, var(--bg-dark), transparent);
}

.btn-primary { background-color: var(--primary-green); border-color: var(--primary-green); font-weight: bold; padding: 12px 30px; transition: all 0.3s ease; }
.btn-primary:hover { background-color: #3e9d13; border-color: #3e9d13; transform: translateY(-2px); }
.hero-livestream-container { max-width: 800px; margin-left: auto; margin-right: auto; border: 2px solid var(--border-color); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.offline-placeholder { background-color: var(--card-bg); padding: 50px; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* --- About Us & Team Section --- */
.team-card { background-color: var(--card-bg); padding: 30px; border-radius: 8px; border: 1px solid var(--border-color); transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; }
.team-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); }
.team-card img { width: 150px; height: 150px; object-fit: cover; border: 3px solid var(--primary-green); }

/* --- Tokenomics Section --- */
.tokenomics { background-color: #08100c; }
.tokenomics-chart-container {
  max-width: 450px;     /* This keeps it from getting too big */
  margin: 0 auto;       /* This centers it horizontally */
  height: 450px;        /* This gives it a defined height to fill */
  position: relative;
}

/* For smaller screens, we can make it a bit smaller */
@media (max-width: 576px) {
  .tokenomics-chart-container {
    height: 350px;
  }
}
.wallet-list { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; }
.wallet-item { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.wallet-item:last-child { border-bottom: none; }
.wallet-item span:first-child { font-weight: bold; color: var(--text-light); }
.wallet-address { font-family: monospace; font-size: 0.9rem; color: var(--text-muted); word-break: break-all; }

/* Roadmap */
.roadmap {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
.roadmap::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--border-color);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}
.roadmap-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}
.roadmap-item:nth-child(odd) { 
    left: 0; 
    text-align: right;
}
.roadmap-item:nth-child(even) { 
    left: 50%; 
    text-align: left;
}
.roadmap-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20px;
    border-radius: 50%;
    z-index: 1;
    background-color: var(--bg-dark);
    border: 4px solid var(--primary-green);
}
.roadmap-item:nth-child(odd)::after { 
    right: -10px; 
}
.roadmap-item:nth-child(even)::after { 
    left: -10px; 
}
.roadmap-item.complete::after { 
    background-color: var(--primary-green); 
}
.roadmap-item.in-progress::after { 
    background-color: #f0ad4e; /* Orange for in-progress */ 
}
.roadmap-content {
    padding: 20px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    position: relative;
}

/* =================================================================
    MOBILE RESPONSIVE FIX FOR ROADMAP
================================================================== */
@media (max-width: 768px) {
    /* Move the central timeline bar to the far left */
    .roadmap::after {
        left: 10px; /* Position it 10px from the left edge */
    }

    /* Make every roadmap item take up the full width */
    .roadmap-item {
        width: 100%;
        padding-left: 40px; /* Add space on the left for the timeline bar */
        padding-right: 10px; /* Reduce padding on the right */
    }

    /* 
     * Override the positioning for both odd and even items.
     * This forces all items into a single column.
     * The !important flag ensures this rule takes priority.
    */
    .roadmap-item:nth-child(odd),
    .roadmap-item:nth-child(even) {
        left: 0;
        text-align: left; /* Align all text to the left for consistency */
    }

    /* Reposition the timeline dot to connect to the new bar position */
    .roadmap-item::after {
        left: 0; /* Align the dot with the timeline bar */
    }

    /* Nudge the dot for odd items to the same position */
    .roadmap-item:nth-child(odd)::after {
        left: 0;
    }
}

/* --- Performance Dashboard --- */
.performance-dashboard { background-color: #08100c; }
.card { background-color: #161a25; border: 1px solid #222633; }
.positive { color: #28a745; }
.negative { color: #dc3545; }
.kpi-secondary-value { font-size: 0.9rem; color: #6c757d; margin-left: 8px; font-weight: normal; }
.chart-wrapper { position: relative; width: 100%; flex-grow: 1; }
.col-xl-3 .card { display: flex; flex-direction: column; }
.equity-card-large { min-height: 400px; flex-basis: 65%; flex-grow: 1; }
.win-loss-card-small { min-height: 250px; flex-basis: 32%; flex-grow: 1; }
#equity-curve-chart, #win-loss-chart { max-height: 100%; }
#trades-table_wrapper, .dataTables_info, .dataTables_length, .dataTables_filter, .dataTables_paginate { color: var(--text-light) !important; }

/* --- Community & Footer --- */
.community { text-align: center; }
.social-icon i { color: var(--text-muted); transition: color 0.3s ease, transform 0.3s ease; }
.social-icon i:hover { color: var(--primary-green); transform: scale(1.1); }
.footer { background-color: #08100c; padding: 40px 0; border-top: 1px solid var(--border-color); }
.financial-disclaimer { color: var(--text-muted); }

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem; /* Makes the main title smaller on phones */
    }
}

/* =================================================================
    COMPREHENSIVE MOBILE RESPONSIVE STYLES (max-width: 768px)
================================================================== */
@media (max-width: 768px) {

    /* --- General Layout & Typography Adjustments --- */

    /* Reduce the top padding to account for the navbar on smaller screens */
    html {
        scroll-padding-top: 70px;
    }
    body {
        padding-top: 70px;
    }

    /* Reduce the vertical space for all sections to make content more compact */
    section {
        padding: 60px 0;
    }

    /* Adjust heading sizes for better readability on small screens */
    .display-3 {
        font-size: 2.8rem; /* Was much larger */
    }
    .section-title {
        font-size: 1.8rem;
    }
    h3 {
        font-size: 1.5rem;
    }
    .lead {
        font-size: 1rem; /* Make lead text slightly smaller */
    }


    /* --- Navigation Bar --- */

    /* Ensure the collapsed navbar items have enough spacing */
    .navbar-nav .nav-item {
        margin: 0.5rem 0;
    }
    .navbar .container {
        max-width: 100%; /* Allow navbar content to stretch full-width */
    }


    /* --- Hero Section --- */

    /* Ensure hero buttons stack vertically and have some space */
    .hero .d-flex.gap-3 {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center;    /* Center the stacked buttons */
        gap: 1rem !important;   /* Adjust space between buttons */
    }
    .hero .btn {
        width: 80%; /* Make buttons wider and easier to tap */
        max-width: 350px;
    }


    /* --- About Us: Roadmap Fix --- */
    
    /* Move the central timeline bar to the far left */
    .roadmap::after {
        left: 10px;
    }

    /* Make every roadmap item take up the full width */
    .roadmap-item {
        width: 100%;
        padding-left: 40px;
        padding-right: 10px;
    }

    /* Force all items into a single, left-aligned column */
    .roadmap-item:nth-child(odd),
    .roadmap-item:nth-child(even) {
        left: 0;
        text-align: left;
    }

    /* Reposition the timeline dot to connect to the new bar position */
    .roadmap-item::after {
        left: 0;
    }
    .roadmap-item:nth-child(odd):after {
        left: 0;
    }


    /* --- Tokenomics Section --- */

    /* Prevent long wallet addresses from overflowing their container */
    .wallet-address {
        font-size: 0.8rem; /* Make address text a bit smaller */
        word-break: break-all; /* Ensure long strings wrap */
    }


    /* --- Dashboard Section --- */

    /* Allow button groups for chart controls to wrap onto the next line */
    #timeframe-switcher, #activity-timeframe-toggle {
        flex-wrap: wrap;
        gap: 5px; /* Add a small gap if they wrap */
    }
    /* Ensure the container for these buttons can also wrap its content */
    .card-body .d-flex.justify-content-between {
        flex-wrap: wrap;
    }

    /* Adjust dashboard card titles for better spacing */
    .card-title {
        margin-bottom: 1rem !important;
    }

}