@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Poppins:wght@400;600&display=swap');
/* --- GLOBAL BACKGROUND FIX --- */
body {
    /* The Hero background is now the ONLY background */
    background-color: #050810; 
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(0, 163, 255, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(255, 215, 0, 0.05) 0%, transparent 25%);
}

/* Make sections transparent so they float on the body bg */
.hero, .section-duel, .section-economy, .section-roadmap {
    background: transparent !important;
}

/* --- LOGO FIXES --- */
.brand img {
    height: 1000px; /* Twice as big */
    width: 1000px;
    border: none !important; /* Remove yellow circle */
    filter: drop-shadow(0 0 10px rgba(0, 163, 255, 0.5)); /* Cool glow instead */
    transition: transform 0.3s;
}
.brand img:hover { transform: scale(1.1) rotate(5deg); }

/* --- NAV HOVER EFFECTS --- */
.nav-link {
    transition: 0.3s;
    color: #fff;
    opacity: 0.8;
}
.nav-link:hover {
    opacity: 1;
    color: #FFD700; /* Yellowish pop */
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    transform: translateY(-2px);
}

/* --- PLAY BUTTON ORANGE HOVER --- */
.cta-btn-small { transition: 0.3s; }
.cta-btn-small:hover {
    background: #FF5722; /* Orangish */
    box-shadow: 0 0 20px #FF5722;
    transform: scale(1.05);
}
.play-btn:hover {
    background: linear-gradient(to bottom, #FF8A50, #FF5722); /* Orange Gradient */
    box-shadow: 0 10px 0 #bf360c, 0 20px 25px rgba(255, 87, 34, 0.4);
}
:root {
    --bg-dark: #050810;
    --bg-card: #121629;
    --cyan-primary: #00A3FF;
    --cyan-shadow: #0077ba;
    --gold-accent: #FFD700;
    --gold-shadow: #ccac00;
    --green-table: #0f4d19;
    --text-white: #ffffff;
    --font-heading: 'Fredoka', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* --- ANIMATED BACKGROUND --- */
.bg-fx {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: 
        radial-gradient(circle at 15% 50%, rgba(0, 163, 255, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(255, 215, 0, 0.05) 0%, transparent 25%);
    z-index: -1;
}

.floating-symbol {
    position: absolute;
    font-size: 2rem;
    opacity: 0.1;
    animation: floatUp 15s infinite linear;
    z-index: -1;
    color: rgba(255,255,255,0.2);
}

/* --- NAVBAR --- */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--text-white);
    text-transform: uppercase;
}

.brand img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 2px solid var(--gold-accent);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-link {
    color: #b0b5c1;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: none; /* Hidden on small mobile */
}

@media(min-width: 768px) {
    .nav-link { display: block; }
}

.cta-btn-small {
    background: var(--cyan-primary);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 0 var(--cyan-shadow);
    transition: transform 0.1s, box-shadow 0.1s;
}

.cta-btn-small:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--cyan-shadow);
}

/* --- HERO SECTION --- */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6rem 1rem 4rem 1rem;
    position: relative;
}

.ai-badge {
    background: rgba(0, 163, 255, 0.15);
    color: var(--cyan-primary);
    border: 1px solid var(--cyan-primary);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-shadow: 0 5px 15px rgba(0, 163, 255, 0.4);
}

.hero h1 span {
    color: var(--gold-accent);
    text-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

.hero p {
    font-size: 1.1rem;
    max-width: 600px;
    margin-bottom: 2.5rem;
    color: #b0b5c1;
}

.play-btn {
    background: linear-gradient(to bottom, #00C2FF, #0085FF);
    color: white;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    padding: 15px 60px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 0 #0056a3, 0 15px 20px rgba(0,0,0,0.3);
    transition: transform 0.1s, box-shadow 0.1s;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.play-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 10px 0 #0056a3, 0 20px 25px rgba(0,0,0,0.4);
}

.play-btn:active {
    transform: translateY(8px);
    box-shadow: 0 0 0 #0056a3, inset 0 5px 10px rgba(0,0,0,0.2);
}

.play-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

/* --- MOCKUP DISPLAY (3D TILT EFFECT) --- */
.phone-container {
    margin-top: 3rem;
    perspective: 1000px;
    width: 100%;
    max-width: 350px;
    position: relative;
}

.phone-mockup {
    width: 100%;
    background: #000;
    border-radius: 40px;
    border: 8px solid #333;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(0, 163, 255, 0.1);
    overflow: hidden;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
}

.phone-mockup img {
    width: 100%;
    display: block;
    user-select: none; 
    pointer-events: none; 
}

.decor-card {
    position: absolute;
    width: 80px;
    height: 110px;
    background: white;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #333;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    z-index: 10;
}

.card-ace { top: 20%; left: -60px; transform: rotate(-15deg); color: black; }
.card-king { bottom: 20%; right: -60px; transform: rotate(15deg); color: #d00000; }

/* --- SECTION HEADERS --- */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 4rem;
}
.section-header h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: white;
}
.section-header p {
    color: #b0b5c1;
    max-width: 500px;
    margin: 0 auto;
}

/* --- FEATURES GRID --- */
.features {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    transition: 0.3s;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--cyan-primary);
}

.icon-box {
    width: 70px;
    height: 70px;
    background: rgba(0, 163, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    font-size: 2rem;
    color: var(--cyan-primary);
}

.feature-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.feature-card p {
    color: #b0b5c1;
    font-size: 0.95rem;
}

/* --- STATS STRIP --- */
.stats-strip {
    background: var(--gold-accent);
    color: #000;
    padding: 2rem 0;
    margin: 6rem 0;
    transform: skewY(-2deg);
}

.stats-content {
    transform: skewY(2deg);
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    text-align: center;
}

.stat-item h2 {
    font-family: var(--font-heading);
    font-size: 3rem;
    line-height: 1;
}
.stat-item p {
    font-weight: 600;
    text-transform: uppercase;
}

/* --- NEW SECTION: TOKENOMICS (Donut Charts) --- */
.tokenomics-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.token-card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.05);
}

/* CSS Only Donut Chart */
.chart-donut {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(var(--color) calc(var(--percent) * 1%), rgba(255,255,255,0.05) 0);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.chart-donut::after {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    background: var(--bg-card);
    border-radius: 50%;
}

.chart-value {
    position: relative;
    z-index: 2;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: white;
}

/* --- NEW SECTION: ROADMAP (Timeline) --- */
.roadmap-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    position: relative;
}

.timeline {
    position: relative;
    padding: 2rem 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    padding-left: 60px;
}

.timeline-dot {
    position: absolute;
    left: 8px;
    top: 5px;
    width: 28px;
    height: 28px;
    background: var(--bg-dark);
    border: 4px solid var(--cyan-primary);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 15px var(--cyan-primary);
}

.timeline-content h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--cyan-primary);
    margin-bottom: 0.5rem;
}

.timeline-content ul {
    list-style: none;
}

.timeline-content li {
    margin-bottom: 5px;
    color: #b0b5c1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.timeline-content li i {
    color: var(--gold-accent);
    font-size: 0.8rem;
}

/* --- FOOTER --- */
footer {
    padding: 3rem;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: #666;
    margin-top: 4rem;
    background: #020408;
}

.social-icons {
    margin: 1.5rem 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-icons a {
    color: white;
    font-size: 1.5rem;
    transition: 0.3s;
}

.social-icons a:hover {
    color: var(--cyan-primary);
    transform: translateY(-3px);
}

/* --- ANIMATIONS --- */
@keyframes floatUp {
    0% { transform: translateY(110vh) rotate(0deg); }
    100% { transform: translateY(-10vh) rotate(360deg); }
}

@keyframes shine {
    0% { left: -50%; }
    100% { left: 150%; }
}

@media (max-width: 768px) {
    .decor-card { display: none; }
    .stats-content { gap: 2rem; }
}


/* =========================================
   SECTION SOUL 1: THE ALGORITHM (How it Works)
   Vibe: Matrix, Code, Flow, Neon Green
   ========================================= */
.section-algorithm {
    background: #000900; /* Deep Matrix Black */
    position: relative;
    overflow: hidden;
    border-top: 1px solid #003300;
    border-bottom: 1px solid #003300;
}

/* Background Circuit Pattern */
.circuit-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(#00ff41 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.1;
    z-index: 0;
}

.highlight-green { color: #00ff41; font-weight: bold; text-shadow: 0 0 10px rgba(0,255,65,0.4); }

.algorithm-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}

/* The Cards */
.algo-card {
    background: rgba(0, 20, 0, 0.8);
    border: 1px solid #004400;
    padding: 2rem;
    width: 300px;
    border-radius: 4px; /* Sharp corners for tech feel */
    position: relative;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(5px);
}

.algo-card:hover {
    border-color: #00ff41;
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 255, 65, 0.15);
}

.algo-card.featured {
    border-color: #00ff41;
    background: rgba(0, 40, 0, 0.9);
}

.step-number {
    position: absolute; top: -15px; left: -15px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 3rem; color: rgba(0, 255, 65, 0.1);
    font-weight: 900;
}

.algo-visual {
    font-size: 3rem; color: #008f24; margin-bottom: 1.5rem;
    height: 80px; width: 80px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px dashed #004400;
    margin: 0 auto 1.5rem auto;
}

.algo-card:hover .algo-visual {
    color: #00ff41; border-color: #00ff41;
    text-shadow: 0 0 15px #00ff41;
}

/* Connector Arrows */
.connector {
    display: flex; align-items: center; justify-content: center;
    height: 300px; font-size: 2rem; color: #004400;
    animation: pulseArrow 2s infinite;
}

/* =========================================
   SECTION SOUL 2: THE VAULT (Tokenomics)
   Vibe: Casino Luxury, Gold, Hologram, Dark Velvet
   ========================================= */
.section-vault {
    background: radial-gradient(circle at center, #1a1100 0%, #050200 100%);
    position: relative;
}

.tokenomics-dashboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 2rem;
}

/* Left: The Holographic Poker Chip */
.holo-chip-container {
    perspective: 1000px;
    width: 300px; height: 300px;
    display: flex; justify-content: center; align-items: center;
    position: relative;
}

.holo-chip-outer {
    width: 250px; height: 250px;
    border-radius: 50%;
    border: 10px dashed #FFD700;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.2), inset 0 0 30px rgba(255, 215, 0, 0.1);
    display: flex; justify-content: center; align-items: center;
    animation: spinSlow 20s linear infinite;
    background: rgba(0,0,0,0.5);
}

.holo-chip-inner {
    width: 180px; height: 180px;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.5);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    backdrop-filter: blur(5px);
}

.symbol { font-size: 2rem; font-weight: bold; color: white; text-shadow: 0 2px 5px black; }
.supply { font-size: 1.5rem; color: #FFD700; font-family: 'JetBrains Mono', monospace; }

/* Right: The Data Stack */
.data-stack {
    flex: 1;
    max-width: 600px;
    display: flex; flex-direction: column; gap: 15px;
}

.data-row {
    background: rgba(255,255,255,0.03);
    border-left: 4px solid var(--color);
    padding: 15px 25px;
    border-radius: 0 10px 10px 0;
    display: flex; align-items: center; gap: 20px;
    transition: 0.3s;
    cursor: default;
}

.data-row:hover {
    background: rgba(255,255,255,0.08);
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.data-icon {
    font-size: 1.5rem; color: var(--color);
    width: 40px; text-align: center;
}

.data-info { flex: 1; }
.data-info h4 { margin-bottom: 5px; font-size: 1.1rem; }

.progress-bar {
    width: 100%; height: 6px; background: rgba(255,255,255,0.1);
    border-radius: 3px; overflow: hidden;
}

.fill {
    width: 0%; /* JS will animate this to var(--width) */
    height: 100%; background: var(--color);
    box-shadow: 0 0 10px var(--color);
    transition: width 1.5s ease-out;
}

/* Hover effect handled by JS or CSS animation */
.data-row:hover .fill { width: var(--width); }
/* Default state for when JS loads */
.data-row .fill { animation: fillUp 1s forwards 0.5s; }

.data-percent {
    font-size: 1.5rem; font-weight: bold; color: var(--color);
    font-family: 'JetBrains Mono', monospace;
}

/* Animations */
@keyframes spinSlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulseArrow { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; color: #00ff41; } }
@keyframes fillUp { from { width: 0; } to { width: var(--width); } }

@media (max-width: 900px) {
    .connector { transform: rotate(90deg); height: 50px; width: 100%; }
    .tokenomics-dashboard { flex-direction: column; }
    .holo-chip-container { transform: scale(0.8); }
}

/* --- SECTION 2: THE DUEL (Battle Mode) --- */
.section-duel {
    padding: 6rem 1rem;
    position: relative;
    background: #020205;
    overflow: hidden;
}

.neon-grid-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(0, 163, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 163, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 0;
}

.duel-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    margin-top: 3rem;
}

.battle-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem 2rem;
    border-radius: 20px;
    width: 350px;
    text-align: center;
    position: relative;
    transition: transform 0.4s ease;
}

.battle-card:hover {
    transform: translateY(-10px) scale(1.02);
}

.battle-card.card-enemy { border-bottom: 4px solid #ff0055; }
.battle-card.card-hero { border-bottom: 4px solid #00ff41; background: linear-gradient(180deg, rgba(0,255,65,0.05), transparent); }

.card-icon {
    font-size: 3rem; margin-bottom: 1.5rem;
}
.card-enemy .card-icon { color: #ff0055; }
.card-hero .card-icon { color: #00ff41; }

.battle-card h3 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.8rem; margin-bottom: 1.5rem; letter-spacing: 1px;
}

.battle-card ul { list-style: none; text-align: left; padding-left: 10px; }
.battle-card li { margin-bottom: 12px; color: #ccc; font-size: 1.1rem; }
.battle-card li i { margin-right: 10px; width: 20px; text-align: center; }

.card-enemy li i { color: #ff0055; }
.card-hero li i { color: #00ff41; }

/* Stamps */
.stamp-lose, .stamp-win {
    position: absolute; top: -15px; right: -15px;
    padding: 5px 15px; border-radius: 4px;
    font-weight: 900; letter-spacing: 2px;
    transform: rotate(10deg); font-size: 0.8rem;
}
.stamp-lose { background: #ff0055; color: black; box-shadow: 0 0 15px #ff0055; }
.stamp-win { background: #00ff41; color: black; box-shadow: 0 0 15px #00ff41; }

/* VS Badge */
.vs-badge {
    background: #FFD700; color: black;
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-weight: 900; font-size: 1.5rem;
    box-shadow: 0 0 20px #FFD700;
    z-index: 10;
    animation: pulseVS 2s infinite;
}

@keyframes pulseVS { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* --- SECTION 3: THE ECONOMY (HUD) --- */
.section-economy {
    padding: 6rem 1rem;
    background: radial-gradient(circle at center, #1a1500 0%, #000 100%);
}

.economy-hud {
    display: flex; justify-content: center; align-items: center;
    gap: 3rem; flex-wrap: wrap;
    margin-top: 3rem;
}

/* Reactor Core (Center) */
.hud-center {
    position: relative; width: 200px; height: 200px;
    display: flex; justify-content: center; align-items: center;
}
.reactor-ring {
    position: absolute; width: 100%; height: 100%;
    border-radius: 50%; border: 4px dashed #FFD700;
    animation: spinSlow 10s linear infinite;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
}
.reactor-core {
    display: flex; flex-direction: column; align-items: center;
    color: #FFD700; text-shadow: 0 0 10px #FFD700;
}
.reactor-core .val { font-size: 3rem; font-weight: 900; line-height: 1; }
.reactor-core .tkn { font-size: 1.5rem; letter-spacing: 2px; }

/* HUD Cards */
.hud-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    padding: 2rem; border-radius: 15px;
    width: 280px; text-align: center;
    transition: 0.3s;
}
.hud-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-5px);
}

.hud-icon { font-size: 2rem; margin-bottom: 1rem; color: white; }
.card-mining .hud-icon { color: #00A3FF; }
.card-burning .hud-icon { color: #ff0055; }
.card-treasury .hud-icon { color: #FFD700; }

.hud-stat {
    margin-top: 15px; font-weight: 900; font-size: 1.2rem;
    color: #00A3FF; font-family: 'Fredoka', sans-serif;
}

.hud-btn {
    display: inline-block; padding: 12px 30px;
    border: 1px solid #FFD700; color: #FFD700;
    text-decoration: none; border-radius: 50px;
    font-weight: bold; transition: 0.3s;
}
.hud-btn:hover { background: #FFD700; color: black; box-shadow: 0 0 20px #FFD700; }


/* --- SECTION 4: ROADMAP (Level Map) --- */
.section-roadmap {
    padding: 6rem 1rem;
    background: #080808;
}

.level-map {
    max-width: 700px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 1.5rem;
}

.level-item {
    background: #111; border: 1px solid #333;
    padding: 1.5rem; border-radius: 12px;
    display: flex; align-items: center; gap: 20px;
    transition: 0.3s;
}

.level-item.completed { border-color: #00ff41; box-shadow: 0 0 10px rgba(0,255,65,0.1); }
.level-item.active { border-color: #00A3FF; box-shadow: 0 0 15px rgba(0, 163, 255, 0.2); transform: scale(1.02); }
.level-item.locked { opacity: 0.5; border-style: dashed; }

.level-icon { font-size: 1.5rem; width: 40px; text-align: center; }
.level-item.completed .level-icon { color: #00ff41; }
.level-item.active .level-icon { color: #00A3FF; }

.level-content h3 { font-size: 1.2rem; margin-bottom: 5px; }
.level-content p { font-size: 0.9rem; color: #888; margin: 0; }

.status-check { margin-left: auto; font-size: 1.2rem; }
.level-item.completed .status-check { color: #00ff41; }
.level-item.active .status-check { color: #00A3FF; }

/* --- GLOSSY TOKENOMICS CARDS --- */
.glossy-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 0 20px;
}

.glossy-card {
    position: relative;
    width: 300px;
    height: 320px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    background: rgba(255, 255, 255, 0.03); /* Glass base */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.1);
}

.glossy-card:hover {
    transform: translateY(-10px) scale(1.02);
}

/* Internal Shine Effect */
.glossy-shine {
    position: absolute; top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), transparent);
    border-radius: 25px 25px 0 0;
    pointer-events: none;
}

/* --- COLOR VARIANTS --- */
/* Gold Card */
.card-gold { border-bottom: 6px solid #FFD700; box-shadow: 0 10px 30px rgba(255, 215, 0, 0.1); }
.card-gold:hover { box-shadow: 0 0 40px rgba(255, 215, 0, 0.4); }
.card-gold .g-icon, .card-gold .g-value { color: #FFD700; text-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }

/* Blue Card */
.card-blue { border-bottom: 6px solid #00A3FF; box-shadow: 0 10px 30px rgba(0, 163, 255, 0.1); }
.card-blue:hover { box-shadow: 0 0 40px rgba(0, 163, 255, 0.4); }
.card-blue .g-icon, .card-blue .g-value { color: #00A3FF; text-shadow: 0 0 15px rgba(0, 163, 255, 0.6); }

/* Orange Card */
.card-orange { border-bottom: 6px solid #FF5722; box-shadow: 0 10px 30px rgba(255, 87, 34, 0.1); }
.card-orange:hover { box-shadow: 0 0 40px rgba(255, 87, 34, 0.4); }
.card-orange .g-icon, .card-orange .g-value { color: #FF5722; text-shadow: 0 0 15px rgba(255, 87, 34, 0.6); }

/* Typography */
.g-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.g-title { font-size: 1.2rem; font-weight: bold; color: #fff; letter-spacing: 2px; margin-bottom: 5px; opacity: 0.9; }
.g-value { font-size: 4rem; font-family: 'Fredoka', sans-serif; font-weight: 900; line-height: 1; margin-bottom: 5px; }
.g-sub { font-size: 0.9rem; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }

/* --- ECONOMY TREE LAYOUT --- */
.section-economy {
    padding: 6rem 1rem;
    position: relative;
    z-index: 2;
}

.economy-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

/* CARDS COMMON STYLE */
.glossy-card {
    background: rgba(20, 20, 30, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.glossy-card:hover {
    transform: translateY(-5px) scale(1.02);
    z-index: 10;
}

.custom-icon {
    width: 80px; /* Big Icons */
    height: 80px;
    object-fit: contain;
    margin-bottom: 15px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}

.g-value { font-size: 3rem; font-weight: 900; line-height: 1; margin-bottom: 5px; font-family: 'Fredoka', sans-serif; }
.g-title { font-size: 1rem; font-weight: bold; color: #fff; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; }
.g-sub { font-size: 0.8rem; opacity: 0.7; }

/* --- ROW 1: TOP (Supply & Burn) --- */
.eco-row-top {
    display: flex;
    gap: 4rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    width: 100%;
}

/* SUPPLY CARD (Yellow/Gold) */
.card-supply {
    width: 320px;
    border-bottom: 4px solid #FFD700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.1);
}
.card-supply .g-value { color: #FFD700; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }

/* RAIN ANIMATION */
.rain-overlay {
    position: absolute; top: -50px; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
.coin-drop {
    position: absolute;
    width: 10px; height: 10px;
    background: #FFD700;
    border-radius: 50%;
    opacity: 0.6;
    animation: rainFall linear infinite;
}
/* Randomize coin positions */
.coin-drop:nth-child(1) { left: 10%; animation-duration: 2s; animation-delay: 0s; }
.coin-drop:nth-child(2) { left: 30%; animation-duration: 2.5s; animation-delay: 0.5s; }
.coin-drop:nth-child(3) { left: 50%; animation-duration: 1.8s; animation-delay: 1s; }
.coin-drop:nth-child(4) { left: 70%; animation-duration: 2.2s; animation-delay: 0.2s; }
.coin-drop:nth-child(5) { left: 90%; animation-duration: 1.5s; animation-delay: 0.8s; }

@keyframes rainFall {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(350px); opacity: 0; }
}

/* BURN CARD (Red/Orange) */
.card-burn {
    width: 320px;
    border-bottom: 4px solid #FF5722;
    box-shadow: 0 0 30px rgba(255, 87, 34, 0.1);
}
.card-burn .g-value { color: #FF5722; text-shadow: 0 0 20px rgba(255, 87, 34, 0.5); }

/* FIRE PULSE ANIMATION */
.icon-burn {
    animation: burnPulse 1.5s infinite alternate;
}
@keyframes burnPulse {
    0% { filter: drop-shadow(0 0 5px #FF5722) brightness(1); transform: scale(1); }
    100% { filter: drop-shadow(0 0 20px #FF5722) brightness(1.2); transform: scale(1.05); }
}


/* --- ROW 2: PARENT (Community) --- */
.eco-row-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
}

.card-alloc {
    width: 350px;
    border: 2px solid #00A3FF;
    background: linear-gradient(180deg, rgba(0, 163, 255, 0.1), rgba(0,0,0,0.8));
    box-shadow: 0 0 40px rgba(0, 163, 255, 0.2);
    z-index: 2;
}
.card-alloc .g-value { color: #fff; text-shadow: 0 0 10px #00A3FF; }

/* FAMILY TREE LINES */
.connector-vertical {
    height: 40px; width: 2px; background: #00A3FF;
    box-shadow: 0 0 10px #00A3FF;
    margin-bottom: -2px; /* Connect to card below */
}

.tree-fork {
    height: 40px; width: 320px; /* Width of the fork */
    border-left: 2px solid #00A3FF;
    border-right: 2px solid #00A3FF;
    border-top: 2px solid #00A3FF;
    border-radius: 20px 20px 0 0;
    margin-top: 10px; /* Space from parent card */
    box-shadow: 0 -5px 15px rgba(0, 163, 255, 0.2);
}

/* --- ROW 3: CHILDREN --- */
.eco-row-bot {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: -2px; /* Touch the fork lines */
}

.card-mining, .card-treasury {
    width: 280px;
    position: relative;
}

/* MINING (Purple/Cyan) */
.card-mining {
    border-top: 4px solid #d500f9;
    background: linear-gradient(180deg, rgba(213, 0, 249, 0.05), transparent);
}
.card-mining .g-value { color: #d500f9; }

/* TREASURY (Green) */
.card-treasury {
    border-top: 4px solid #00E676;
    background: linear-gradient(180deg, rgba(0, 230, 118, 0.05), transparent);
}
.card-treasury .g-value { color: #00E676; }

/* Responsive Lines */
@media (max-width: 768px) {
    .eco-row-top { gap: 1rem; }
    .tree-fork { width: 90%; }
    .eco-row-bot { flex-direction: column; align-items: center; gap: 1rem; margin-top: 1rem; }
    .tree-fork { display: none; } /* Hide complex lines on mobile */
    .connector-vertical { display: none; }
}


/* --- SCROLLY LAYOUT --- */
.section-scrolly {
    position: relative;
    padding-top: 4rem;
}

.scrolly-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* --- LEFT: STICKY CHART --- */
.sticky-chart-wrapper {
    width: 50%;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.chart-container {
    width: 500px; /* Bigger Chart */
    height: 500px;
    filter: drop-shadow(0 0 30px rgba(0,0,0,0.8));
    transition: transform 0.5s;
}

/* SVG STYLES */
.pie-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.slice {
    stroke: #050810;
    stroke-width: 0.5;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
    cursor: pointer;
    opacity: 0.9; /* More visible by default */
}

/* COLORS */
.slice-community { fill: #00E5FF; }
.slice-liquidity { fill: #FFD700; }
.slice-team { fill: #9D00FF; }
.slice-marketing { fill: #FF0055; }

/* TEXT ON CHART */
.slice-percent {
    font-family: 'Fredoka', sans-serif;
    font-weight: 900;
    font-size: 6px;
    fill: #fff;
    pointer-events: none;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
.slice-lbl {
    font-family: 'Fredoka', sans-serif;
    font-size: 3px;
    fill: #fff;
    font-weight: 700;
    opacity: 0.8;
}

/* --- ACTIVE STATES (THE POP UP) --- */
.slice-group.active .slice {
    opacity: 1;
    transform: scale(1.15); /* POP UP BIGGER */
    stroke: white;
    stroke-width: 1;
    filter: drop-shadow(0 0 20px currentColor);
}
.slice-group.active .slice-percent {
    font-size: 8px; /* Text grows */
    fill: #fff;
}

/* Dim others when one is active */
.pie-svg.has-active .slice-group:not(.active) {
    opacity: 0.3;
}

/* --- RIGHT: SCROLLING TEXT --- */
.scrolling-text-col {
    width: 50%;
    padding-bottom: 20vh;
}

.text-step {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding-left: 2rem;
    opacity: 0.2;
    transition: opacity 0.5s, transform 0.5s;
    transform: translateX(50px) scale(0.9);
}

.text-step.in-view {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* --- FULL COLOR CARDS --- */
.step-card {
    border-radius: 30px;
    padding: 3rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    max-width: 500px;
    color: white;
    font-family: 'Fredoka', sans-serif;
    border: 2px solid rgba(255,255,255,0.2);
}

.step-card h3 { font-size: 1.5rem; margin-bottom: 10px; opacity: 0.9; }
.step-stat { font-size: 2.5rem; font-weight: 900; margin-bottom: 20px; text-shadow: 0 0 20px rgba(0,0,0,0.3); }
.step-list { list-style: none; margin-top: 20px; font-family: 'Poppins', sans-serif; }
.step-list li { margin-bottom: 12px; font-size: 1.1rem; }

/* 1. BLUE CARD */
.card-full-blue {
    background: radial-gradient(circle at top left, rgba(0, 229, 255, 0.2), rgba(0, 10, 30, 0.95));
    border-color: #00E5FF;
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.1);
}
.card-full-blue .step-stat { color: #00E5FF; }

/* 2. GOLD CARD */
.card-full-gold {
    background: radial-gradient(circle at top left, rgba(255, 215, 0, 0.2), rgba(20, 20, 0, 0.95));
    border-color: #FFD700;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.1);
}
.card-full-gold .step-stat { color: #FFD700; }

/* 3. PURPLE CARD */
.card-full-purple {
    background: radial-gradient(circle at top left, rgba(157, 0, 255, 0.2), rgba(20, 0, 30, 0.95));
    border-color: #9D00FF;
    box-shadow: 0 0 40px rgba(157, 0, 255, 0.1);
}
.card-full-purple .step-stat { color: #9D00FF; }

/* 4. RED CARD */
.card-full-red {
    background: radial-gradient(circle at top left, rgba(255, 0, 85, 0.2), rgba(30, 0, 10, 0.95));
    border-color: #FF0055;
    box-shadow: 0 0 40px rgba(255, 0, 85, 0.1);
}
.card-full-red .step-stat { color: #FF0055; }

/* Responsive */
@media (max-width: 900px) {
    .scrolly-container { flex-direction: column; }
    .sticky-chart-wrapper { width: 100%; height: 45vh; position: sticky; top: 0; background: #050810; z-index: 20;}
    .scrolling-text-col { width: 100%; padding: 20px; margin-top: 0; }
    .chart-container { width: 300px; height: 300px; }
    .text-step { min-height: 50vh; }
}

/* --- SCROLLY LAYOUT --- */
.section-scrolly {
    position: relative;
    padding-top: 4rem;
}

.scrolly-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* --- LEFT: STICKY CHART --- */
.sticky-chart-wrapper {
    width: 50%;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.chart-container {
    width: 450px;
    height: 450px;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
    transition: transform 0.5s;
}

/* SVG STYLES */
.pie-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.slice {
    stroke: #050810;
    stroke-width: 0.8;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
    cursor: pointer;
    opacity: 0.9; 
}

/* COLORS - Neon Palette */
.slice-community { fill: #00E5FF; }
.slice-liquidity { fill: #FFD700; }
.slice-team { fill: #9D00FF; }
.slice-marketing { fill: #FF0055; }

/* TEXT ON CHART */
.slice-percent {
    font-family: 'Fredoka', sans-serif;
    font-weight: 900;
    font-size: 6px;
    fill: #fff;
    pointer-events: none;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}
.slice-lbl {
    font-family: 'Fredoka', sans-serif;
    font-size: 2.5px;
    fill: #fff;
    font-weight: 700;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

/* --- ACTIVE STATES (THE POP UP) --- */
.slice-group.active .slice {
    opacity: 1;
    transform: scale(1.1); /* Pop Up */
    stroke: white;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 15px currentColor);
}
.slice-group.active .slice-percent {
    font-size: 8px; /* Grow Text */
    fill: #fff;
    font-weight: 900;
}

/* Dim others */
.pie-svg.has-active .slice-group:not(.active) {
    opacity: 0.3;
    transform: scale(0.95);
}

/* --- RIGHT: SCROLLING TEXT --- */
.scrolling-text-col {
    width: 50%;
    padding-bottom: 20vh;
}

.text-step {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding-left: 2rem;
    opacity: 0.2;
    transition: opacity 0.5s, transform 0.5s;
    transform: translateX(50px) scale(0.9);
}

.text-step.in-view {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* --- FULL COLOR CARDS (No Black Background) --- */
.step-card {
    border-radius: 30px;
    padding: 3rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    max-width: 500px;
    color: white;
    font-family: 'Fredoka', sans-serif;
    position: relative;
    overflow: hidden;
}

/* Internal light sheen for gloss effect */
.step-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), transparent);
    pointer-events: none;
}

.step-card h3 { font-size: 1.5rem; margin-bottom: 10px; opacity: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.step-stat { font-size: 2.8rem; font-weight: 900; margin-bottom: 20px; line-height: 1; text-shadow: 0 2px 15px rgba(0,0,0,0.4); }
.step-list { list-style: none; margin-top: 20px; font-family: 'Poppins', sans-serif; }
.step-list li { margin-bottom: 12px; font-size: 1.1rem; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

/* 1. BLUE CARD */
.card-full-blue {
    background: linear-gradient(135deg, #00C2FF, #0060FF);
    box-shadow: 0 10px 30px rgba(0, 194, 255, 0.4);
}

/* 2. GOLD CARD */
.card-full-gold {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
}

/* 3. PURPLE CARD */
.card-full-purple {
    background: linear-gradient(135deg, #E040FB, #7C4DFF);
    box-shadow: 0 10px 30px rgba(224, 64, 251, 0.4);
}

/* 4. RED CARD */
.card-full-red {
    background: linear-gradient(135deg, #FF5252, #D50000);
    box-shadow: 0 10px 30px rgba(255, 82, 82, 0.4);
}

/* Responsive */
@media (max-width: 900px) {
    .scrolly-container { flex-direction: column; }
    .sticky-chart-wrapper { width: 100%; height: 45vh; position: sticky; top: 0; background: #050810; z-index: 20;}
    .scrolling-text-col { width: 100%; padding: 20px; margin-top: 0; }
    .chart-container { width: 300px; height: 300px; }
    .text-step { min-height: 50vh; }
}


/* --- GAMEPLAY SECTION --- */
.section-duel {
    padding: 6rem 1rem;
    position: relative;
    overflow: hidden;
}

/* PART A: THE LOOP (PvE / PvP) */
.gameplay-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto 4rem auto;
}

.mode-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 2rem;
    flex: 1;
    min-width: 300px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: 0.3s;
}

.mode-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.08);
}

.mode-icon {
    font-size: 2.5rem;
    padding: 15px;
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
}

.mode-pve { border-left: 4px solid #00E676; }
.mode-pve .mode-icon { color: #00E676; box-shadow: 0 0 15px rgba(0, 230, 118, 0.2); }
.mode-pve .highlight { color: #00E676; font-weight: bold; letter-spacing: 1px; font-size: 0.9rem; }

.mode-pvp { border-left: 4px solid #FF5722; }
.mode-pvp .mode-icon { color: #FF5722; box-shadow: 0 0 15px rgba(255, 87, 34, 0.2); }
.mode-pvp .highlight { color: #FF5722; font-weight: bold; letter-spacing: 1px; font-size: 0.9rem; }

.mode-content h3 { font-size: 1.5rem; color: white; margin-bottom: 5px; }
.mode-content .desc { color: #ccc; font-size: 0.95rem; margin-top: 10px; line-height: 1.5; }


/* PART B: THE MODES (Quick / Advanced) */
.modes-container {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 30px;
    padding: 3rem;
    text-align: center;
    position: relative;
}

.modes-header {
    position: absolute;
    top: -15px; left: 50%; transform: translateX(-50%);
    background: #00A3FF;
    color: white;
    padding: 5px 20px;
    border-radius: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    box-shadow: 0 0 15px #00A3FF;
}

.modes-split {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.type-card {
    flex: 1;
    min-width: 250px;
    background: rgba(255,255,255,0.03);
    padding: 2rem;
    border-radius: 15px;
    position: relative;
    border: 1px solid transparent;
    transition: 0.3s;
}

.type-quick { border-color: #FFD700; }
.type-quick:hover { box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); }
.type-quick .type-badge { background: #FFD700; color: black; }

.type-advanced { border-color: #E040FB; }
.type-advanced:hover { box-shadow: 0 0 20px rgba(224, 64, 251, 0.2); }
.type-advanced .type-badge { background: #E040FB; color: white; }

.type-badge {
    position: absolute; top: 10px; right: 10px;
    font-size: 0.7rem; font-weight: bold; padding: 3px 10px; border-radius: 5px;
}

.type-card h4 { font-size: 1.3rem; color: white; margin-bottom: 1rem; font-family: 'Fredoka', sans-serif; }
.type-card ul { list-style: none; text-align: left; padding-left: 10px; }
.type-card li { margin-bottom: 8px; color: #bbb; font-size: 0.95rem; }
.type-card i { margin-right: 8px; width: 20px; text-align: center; color: white; }


/* PART C: THE BATTLE CARDS (Existing Styles Refined) */
.duel-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    margin-top: 3rem;
}

.battle-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem 2rem;
    border-radius: 20px;
    width: 350px;
    text-align: center;
    position: relative;
    transition: transform 0.4s ease;
}

.battle-card:hover { transform: translateY(-10px) scale(1.02); }

.battle-card.card-enemy { border-bottom: 4px solid #ff0055; }
.battle-card.card-hero { border-bottom: 4px solid #00ff41; background: linear-gradient(180deg, rgba(0,255,65,0.05), transparent); }

.card-icon { font-size: 3rem; margin-bottom: 1.5rem; }
.card-enemy .card-icon { color: #ff0055; }
.card-hero .card-icon { color: #00ff41; }

.battle-card h3 { font-family: 'Fredoka', sans-serif; font-size: 1.8rem; margin-bottom: 1.5rem; letter-spacing: 1px; }
.battle-card ul { list-style: none; text-align: left; padding-left: 10px; }
.battle-card li { margin-bottom: 12px; color: #ccc; font-size: 1.1rem; }
.battle-card li i { margin-right: 10px; width: 20px; text-align: center; }
.card-enemy li i { color: #ff0055; }
.card-hero li i { color: #00ff41; }

.stamp-lose, .stamp-win {
    position: absolute; top: -15px; right: -15px;
    padding: 5px 15px; border-radius: 4px;
    font-weight: 900; letter-spacing: 2px;
    transform: rotate(10deg); font-size: 0.8rem;
}
.stamp-lose { background: #ff0055; color: black; box-shadow: 0 0 15px #ff0055; }
.stamp-win { background: #00ff41; color: black; box-shadow: 0 0 15px #00ff41; }

.vs-badge {
    background: #FFD700; color: black;
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-weight: 900; font-size: 1.5rem;
    box-shadow: 0 0 20px #FFD700;
    z-index: 10;
    animation: pulseVS 2s infinite;
}
@keyframes pulseVS { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* --- MODE CARDS IMAGE FIX --- */
.mode-img-box {
    width: 100px;  /* Fixed width */
    height: 100px; /* Fixed height */
    flex-shrink: 0; /* Don't squash it */
    border-radius: 15px; /* Rounded corners */
    overflow: hidden; /* Cut off excess image */
    background: #000; /* Fallback color */
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

.full-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes it fill the box perfectly without stretching */
    display: block;
}

/* Remove old padding/background from .mode-icon since we replaced it */
.mode-card .mode-icon {
    display: none; 
}

/* --- TOKENOMICS CTA --- */
.tokenomics-footer-cta {
    text-align: center;
    padding-bottom: 4rem; /* Spacing before next section */
    margin-top: -10vh; /* Pull it up slightly so it appears naturally after scroll */
    position: relative;
    z-index: 20;
}

.bright-orange-btn {
    display: inline-block;
    background: linear-gradient(135deg, #FF6D00, #FF3D00);
    color: white;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 18px 50px;
    border-radius: 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 30px rgba(255, 61, 0, 0.6);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid #FF9E80; /* Light orange border for pop */
}

.bright-orange-btn:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 0 50px rgba(255, 61, 0, 0.9);
    background: linear-gradient(135deg, #FF9100, #FF3D00);
}

.bright-orange-btn i {
    margin-left: 10px;
    transition: transform 0.2s;
}

.bright-orange-btn:hover i {
    transform: translateX(5px);
}