/* ==========================================================================
   1. FONTS 
   ========================================================================== */
/* Organized and optimized */
@font-face { font-family: 'Breathe_Fire'; src: url('fonts/Breathe_Fire.otf') format('opentype'); font-weight: bold; }
@font-face { font-family: 'Ritz'; src: url('fonts/Ritzynormal-vKa9.ttf'); }
@font-face { font-family: 'Casino'; src: url('fonts/Casino3DMarqueeItalic-PK7md.ttf'); }
@font-face { font-family: 'Empire'; src: url('fonts/MyEmpireWontFallRegular-9YoY0.ttf'); }

/* *** aAsianNinja Font - Definition verified *** */
@font-face { 
    font-family: 'AsianNinja'; 
    src: url('fonts/aAsianNinja.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 
}

/* ==========================================================================
   2. BASE STYLES
   ========================================================================== */
body { 
    background-color: black !important; /* Force black, purging ghosts */
    color: white; 
    margin: 0; 
    padding: 0; 
    font-family: sans-serif; 
    text-align: center; 
}

/* --- Alignment Container --- */
/* Locks main layout width to 1230px, balanced on desktop, fluid on mobile. */
.page-section {
    width: 100%;            /* Fluid on mobile */
    max-width: 1230px;      /* Locks to table width on desktop */
    margin: 0 auto;         /* Centers the section */
    padding: 0 15px;         /* Standard gutter for mobile */
    box-sizing: border-box; 
}

/* ==========================================================================
   4. NAVIGATION MENU (Asian Motif, Large Gold Fonts)
   ========================================================================== */
#menu { 
    display: flex; 
    justify-content: center; 
    list-style: none; 
    padding: 0; 
    margin: 0;              /* Zero margin to hug the divider above */
    padding-top: 25px;      
    padding-bottom: 25px;
    gap: 65px;              /* Superior spacing */
    z-index: 11; 
    
    /* *** CUSTOM PNG BACKGROUND ACTIVATED *** */
    background-image: url('images/backgrounds/menu-bg-final.png'); 
    background-size: cover;                      
    background-position: center;                 
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.05); 
}
#menu a { 
    font-family: 'AsianNinja', sans-serif; 
    font-size: 30px;       /* V11 Large Size */
    /* *** NOTE: We keep Menu links at 900 bold so they define the motif *** */
    font-weight: 900; 
    color: #CCAA00;        /* ANCIENT GOLD: Rich, thematic color */
    text-decoration: none; 
    text-shadow: 2px 2px 4px #000; 
}
#menu a:hover { color: #730000; /* Dark blood red */ }

/* ==========================================================================
   5. DATA TABLE STRUCTURE (Sizing and Weight Balanced)
   ========================================================================== */
/* Main table container constrained to 1230px. */
#master-tokens { 
    width: 100%;            
    max-width: 1230px;      
    margin: 0 auto;         
    border-collapse: collapse; 
    background: url('images/tables/backgrounds/wood.jpg'); 
}

/* --- Common styling for th (headers) and td (data) --- */
#master-tokens td, #master-tokens th { 
    padding: 8px 10px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.02); 
    text-align: center; 
    font-family: "Segoe UI", Verdana, sans-serif; 
    font-size: 19px; 
}

/* * *** SEMI-BOLD DATA POLISH ***
 * Applying a slightly heavier weight (600 - semi-bold) specifically
 * to all items in all data cells, improving readability against dark wood.
 */
#master-tokens td { 
    font-weight: 600; /* Heavier than default, but not full bold */
}

/* The MCAP button images in the thead remain responsive */
#master-tokens thead img {
    height: auto;
    width: auto;
    max-width: 100%;
}

/* ==========================================================================
   6. DYNAMIC SORT FIX (The Bigger Hammer - Purging the Arrow)
   ========================================================================== */
#master-tokens th .sortfwd, 
#master-tokens th .sortrev,
#master-tokens th span { 
    display: none !important; 
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
}
#master-tokens th img {
    margin: 0 auto !important;
    display: block !important;
}

/* ==========================================================================
   7. ICON CELLS (Custom padding and sizing for table icons)
   ========================================================================== */
.cell-icon { 
    padding: 0 !important; 
    width: 136px; 
    height: 90px; 
    border-right: 1px solid rgba(255, 255, 255, 0.02); 
}
.cell-icon a { display: block; width: 136px; height: 90px; }
.cell-icon img { display: block; width: 136px; height: 90px; object-fit: cover; }

/* ==========================================================================
   8. LINK STYLES (Thematic Coloring Applied)
   ========================================================================== */
/* Default white color for table links */
#master-tokens a { text-decoration: none; color: white; display: block; }

/* Motif coloring shift for specific data columns */
.mcap-link, .tpmc-link { color: #CCAA00 !important; /* Ancient Gold, matching menu */ }
.value-link { color: #CCAA00 !important; /* Ancient Gold, matching menu */ }
.price-link { color: #FF00FF !important; /* Neon Magenta */ }
.percentage-link { color: #bbbbbb; /* Grey */ }
.owned-link { color: #00C9A7 !important; /* Rich Financial Teal */ }
.goal-link { color: #00C9A7 !important; /* Rich Financial Teal */ }

/* ==========================================================================
   10. MOBILE & TABLET FIXES (Responsive Media Queries)
   ========================================================================== */
@media only screen and (max-width: 800px) {
    /* Hide non-core GIFs on very small screens */
    .banner-wrapper img:not(.banner-img) { display: none !important; }

    /* Force the banner wrapper to center */
    .banner-wrapper { 
        display: flex !important; 
        justify-content: center !important; 
        align-items: center !important;
        width: 100% !important; 
    }
    
    /* Ensure the main banner image centers */
    .banner-img { 
        display: block !important; 
        margin: 0 auto !important; 
        width: 90% !important; 
    }
    
    /* Force dividers to center */
    .hoz-divider { 
        display: block !important; 
        margin-left: auto !important; 
        margin-right: auto !important; 
    }

    /* Force the menu to center */
    #menu { 
        display: flex !important; 
        justify-content: center !important; 
        padding-left: 0 !important; 
        width: 100% !important; 
    }
    
    #menu li { 
        display: inline-block !important; 
        margin: 0 10px !important; 
    }
}

/* ==========================================================================
   11. ANIMATIONS (Blinking Effect)
   ========================================================================== */
@keyframes blink-green-anim {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.blink-green {
    animation: blink-green-anim 1s linear infinite;
    color: lime !important;
    text-shadow: 0 0 5px lime; /* Adds a nice 'glowing' effect to the blink */
}