/* ═══════════════════════════════════════════════════════
    CSS DESIGN TOKENS & CUSTOM PROPERTIES
    Meep Merge: Evolution (Glitchtown Theme)
    Version: 1.5 - Absolute Visibility & Click Fix
   ═══════════════════════════════════════════════════════ */

:root {
    /* ─── Typography Sizing ─── */
    --font-size-base: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --font-size-ui: 14px;
    
    /* ─── Grid Scaling ─── */
    --cell-size: 85px;             
    --grid-gap: 5px;

    /* ─── Sidebar Geometry ─── */
    --sidebar-width: 250px;        
    --hud-height: 70px;

    /* ─── Core Colors (Glitchtown Cosmic) ─── */
    /* existing colors */
    --bg-primary: #12002b;
    --bg-secondary: #1a0b2e;
    --bg-tertiary: #241445;

    /* ADD THIS */
    --text-primary: #ffffff;
    --text-secondary: #e6e6ff;
    --text-muted: #b8b8d9;
    --gold-400: #ffd86b;
    --gem-purple: #c084fc;

    /* ─── HUD & Sidebar Polish ─── */
    --hud-bg: rgba(18, 0, 43, 0.85); 
    --sidebar-bg: rgba(26, 11, 46, 0.94); /* Increased opacity for text readability */
    --hud-blur: 15px;

    /* ─── Z-Index Stack (The Fix!) ─── */
    --z-bg: -2;
    --z-particles: -1;
    --z-grid: 1;
    --z-backdrop: 400;   /* Sits behind sidebars */
    --z-sidebar: 500;    /* Sidebars stay above everything else */
    --z-hud: 600;        /* Top bar stays on top */
    --z-dragging: 9999;  

    /* ─── Tier Glow Colors ─── */
    --glow-t1: #39ff14;  
    --glow-t2: #00ffff;  
    --glow-t3: #ff00ff;  
    --glow-t10: #f1c40f; 
    --glow-t20: #ffffff; 
}

/* ─── Global Reset & Text Visibility ─── */
body {
    margin: 0;
    padding: 0;
    font-size: var(--font-size-base);
    color: #ffffff;
    overflow: hidden; 
    font-family: 'Outfit', sans-serif;
}

/* ─── The Unreadable Text Fix ─── */
.shop-item, .item-desc, .shop-action-desc, .tier-info, .res-sub, .tier-gps {
    color: rgba(255, 255, 255, 0.9) !important; 
}

.item-name, .tier-name, .shop-action-label, .shop-section-heading {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.item-cost, .shop-action-cost {
    color: #f1c40f !important; 
    font-weight: bold;
}

/* ─── The Dragging Fix ─── */
.tile-dragging, .draggable-mirror, .ui-draggable-dragging {
    z-index: var(--z-dragging) !important;
    pointer-events: none;
}

/* ─── Sidebar Layout & Click Fix ─── */
#civ-log, #shop-panel {
    z-index: var(--z-sidebar);
    background: var(--sidebar-bg);
    backdrop-filter: blur(var(--hud-blur));
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    
    position: fixed;
    top: var(--hud-height);
    width: var(--sidebar-width);
    height: calc(100vh - var(--hud-height));
    
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 15px;
    box-sizing: border-box;
    pointer-events: auto !important; /* FORCES CLICK REGISTRATION */
}

/* Spacing out the individual items */
.shop-item, .civ-log-item {
    padding: 12px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    transition: all 0.2s ease;
    cursor: pointer;
    pointer-events: auto !important;
}

.shop-item:hover, .civ-log-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--gem-pink);
    transform: translateY(-2px);
}

/* Custom Scrollbar */
#civ-log::-webkit-scrollbar, #shop-panel::-webkit-scrollbar {
    width: 6px;
}
#civ-log::-webkit-scrollbar-thumb, #shop-panel::-webkit-scrollbar-thumb {
    background: var(--gem-pink);
    border-radius: 10px;
}

/* ─── HUD Polish ─── */
#hud {
    z-index: var(--z-hud);
    height: var(--hud-height);
    border-bottom: 2px solid var(--border-strong);
    background: var(--hud-bg);
    backdrop-filter: blur(var(--hud-blur));
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

/* ─── Background & Grid Container ─── */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('../assets/bg.png') center center / cover no-repeat !important;
    opacity: 1;
    z-index: var(--z-bg);
    filter: saturate(1.1) brightness(0.8);
}

#main-area {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0 var(--sidebar-width); 
}

#grid {
    position: relative;
    z-index: var(--z-grid);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border: 2px solid var(--border);
    gap: var(--grid-gap);
    border-radius: 12px;
    display: grid;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

/* ─── Animations ─── */
@keyframes discovery-flash {
    0% { box-shadow: 0 0 0 0px rgba(0, 255, 255, 0.8); filter: brightness(1); }
    50% { box-shadow: 0 0 50px 20px rgba(255, 0, 255, 0.6); filter: brightness(1.8); }
    100% { box-shadow: 0 0 15px 2px rgba(0, 255, 255, 0.3); filter: brightness(1); }
}

.new-discovery-effect {
    animation: discovery-flash 0.8s ease-out forwards;
}

.new-badge {
    background: var(--gem-pink);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    animation: pulse-cyan 1.5s infinite ease-in-out;
}

/* ─── Mobile Optimization ─── */
@media (max-width: 850px) {
    #main-area { padding: 0; }
    #civ-log, #shop-panel { display: none; } 
    :root { --cell-size: 70px; }
}