/* css/layout.css - Z-INDEX FIX & LAYOUT CORRECTION */

/* --- 1. GLOBAL LAYERS (Sabse Zaroori) --- */
/* Backgrounds: Click Roko Mat */
.cyber-lines-container, canvas, #bgCanvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1 !important; 
    pointer-events: none !important; /* Click pass-through */
}

/* Page Content */
.page {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow-y: auto; overflow-x: hidden;
    padding: 90px 15px 120px; /* Header aur Footer ke liye jagah */
    display: none; z-index: 10;
    -webkit-overflow-scrolling: touch;
}
.page.active { display: block; }

/* --- 2. HEADER (Top HUD) --- */
.top-hud {
    position: fixed; top: 0; left: 0; width: 100%; height: 75px;
    z-index: 500; /* Page se upar */
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px;
    pointer-events: auto; /* Clickable */
}

/* Header Elements Styles */
.hud-profile { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.avatar-container { position: relative; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; }
.avatar-img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #1a1a1a; z-index: 2; }
.avatar-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px dashed rgba(0, 255, 156, 0.5); animation: spinSlow 10s linear infinite; z-index: 1; }
@keyframes spinSlow { 100% { transform: rotate(360deg); } }
.online-dot { position: absolute; bottom: 2px; right: 2px; width: 10px; height: 10px; background: #00ff9c; border-radius: 50%; border: 2px solid #000; animation: blink 2s infinite; z-index: 3; }
@keyframes blink { 50% { opacity: 0.5; } }
.profile-meta { display: flex; flex-direction: column; }
.user-name { font-size: 14px; font-weight: 800; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.2); }
.user-rank-badge { font-size: 9px; color: #888; background: rgba(255, 255, 255, 0.05); padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); }
.hud-brand { position: absolute; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; background: linear-gradient(180deg, rgba(255, 0, 64, 0.1), transparent); border-top: 2px solid #ff0040; display: flex; justify-content: center; align-items: center; clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); }
.hud-actions { display: flex; gap: 10px; }
.action-chip { width: 35px; height: 35px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; }
.chip-dot { position: absolute; top: 8px; right: 8px; width: 4px; height: 4px; background: #ff0040; border-radius: 50%; }

/* --- 3. CORE (Mining Circle) --- */
.core-stage { 
    display: flex; justify-content: center; align-items: center; 
    height: 300px; margin-top: 10px; position: relative;
    z-index: 20; /* Page content ke barabar */
}
/* IMPORTANT: Core click hone chahiye par Sidebar ke upar nahi */
.core-unit {
    position: relative; z-index: 21; 
    cursor: pointer;
    touch-action: manipulation; /* Zoom rokne ke liye */
}

/* --- 4. FLOATING NAVBAR (Footer) --- */
.navbar {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    width: 92%; max-width: 400px;
    background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 25px; padding: 10px 5px;
    display: flex; justify-content: space-around; align-items: center;
    z-index: 500; /* Page se upar */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    pointer-events: auto;
}
.nav-btn { background: transparent; border: none; color: #666; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 10px; cursor: pointer; padding: 5px 12px; border-radius: 12px; transition: all 0.3s; position: relative; }
.nav-btn.active { color: #fff; background: rgba(0, 255, 156, 0.1); }
.nav-btn.active i { color: #00ff9c; transform: translateY(-3px); filter: drop-shadow(0 0 8px #00ff9c); }
.nav-btn.active::after { content: ''; position: absolute; bottom: -5px; width: 4px; height: 4px; background: #00ff9c; border-radius: 50%; box-shadow: 0 0 5px #00ff9c; }

/* --- 5. SIDEBAR & MODALS (Ye Sabse Upar Hone Chahiye) --- */
.sidebar {
    position: fixed; top: 0; right: 0; width: 85%; height: 100%;
    background: #050505; 
    z-index: 9000 !important; /* 🔥 FIX: Core (21) se bohot upar */
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 50px rgba(0,0,0,0.9);
    border-left: 1px solid rgba(0, 255, 156, 0.1);
    padding: 20px 20px 100px 20px; overflow-y: auto;
    pointer-events: auto;
}
.sidebar.open { transform: translateX(0); }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); 
    z-index: 9500 !important; /* Sidebar se bhi upar */
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(8px);
    pointer-events: auto;
}
.modal-overlay.hidden { display: none !important; }

/* --- 6. NOTIFICATION (Cloud Saved) --- */
#cloudStatus {
    z-index: 10000 !important; /* Sabse upar */
    pointer-events: none; /* Click pass hone do */
}

/* --- 7. WALLET & STATS --- */
.stats-container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.glass-panel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(10px); }
.airdrop-card { background: linear-gradient(160deg, rgba(20, 20, 20, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 20px; padding: 30px 20px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 0 30px rgba(0,0,0,0.8); margin-top: 20px; }
.coin-pulse { width: 120px; filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.4)); animation: coinFloat 3s ease-in-out infinite; }
@keyframes coinFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: rgba(255,255,255,0.03); border-radius: 12px; margin-bottom: 10px; }
.toggle-switch { width: 40px; height: 20px; background: #333; border-radius: 20px; position: relative; transition: 0.3s; }
.toggle-switch.active { background: #00ff9c; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: 0.3s; }
.toggle-switch.active::after { left: 22px; }
/* css/layout.css - FIXED: CORE TAP, SLIM CARDS & ROUND WHEEL */

/* --- 1. GLOBAL & BACKGROUNDS (Click Fixer) --- */
.cyber-lines-container, canvas, #bgCanvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0 !important; /* Sabse peeche */
    pointer-events: none !important; /* Click pass hone do */
}

/* Page Structure */
.page {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow-y: auto; overflow-x: hidden;
    padding: 85px 15px 100px; /* Header aur Footer ke beech jagah */
    display: none; 
    z-index: 5; /* Background se upar */
    -webkit-overflow-scrolling: touch;
}
.page.active { display: block; }

/* --- 2. STATS CARDS (Lamba aur Patla Fix) --- */
.stats-container { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 12px; 
    margin-bottom: 15px; 
}

.glass-panel { 
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(255,255,255,0.08); 
    backdrop-filter: blur(10px);
    border-radius: 12px; 
    /* Yahan size change kiya hai */
    padding: 8px 15px; /* Height kam kar di (Patla) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 70px; /* Fixed height for consistency */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Text Styling inside Cards */
.glass-panel i { margin-right: 5px; }
.stat-value { font-size: 18px; font-weight: 800; letter-spacing: 0.5px; }


/* --- 3. BARS (Energy & Core) --- */
.bars-container { display: flex; gap: 8px; margin-bottom: 20px; }
.bar-box { 
    flex: 1; background: rgba(0,0,0,0.6); padding: 8px 12px; 
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05);
}


/* --- 4. CORE STAGE (Tapping Fix) --- */
.core-stage { 
    display: flex; justify-content: center; align-items: center; 
    height: 320px; /* Thoda space badhaya */
    position: relative;
    z-index: 10; /* Page content ke upar */
    margin-top: 10px;
}

.core-unit {
    position: relative; 
    width: 260px; height: 260px; /* Size adjust */
    border-radius: 50%;
    z-index: 20; /* CLICKABLE ZONE */
    cursor: pointer;
    touch-action: manipulation; /* Fast Tap Enable */
    /* Visuals are in components.css or inline */
}


/* --- 5. LUCKY WHEEL FIX (Oval Problem Solved) --- */
#wheelCanvas {
    max-width: 90vw; /* Screen se bahar na jaye */
    max-height: 90vw; /* Height bhi width jitni rahe (Square) */
    aspect-ratio: 1 / 1; /* Zabardasti GOL karega */
    border-radius: 50%;
    margin: 0 auto;
    display: block;
}


/* --- 6. HEADER (HUD) --- */
.top-hud {
    position: fixed; top: 0; left: 0; width: 100%; height: 75px;
    z-index: 50; /* Cards se upar */
    background: rgba(8, 8, 8, 0.9);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px;
}
/* HUD Elements (Same as before) */
.hud-profile { display: flex; align-items: center; gap: 10px; }
.avatar-img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #222; }
.hud-brand { position: absolute; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-top: 2px solid #ff0040; display: flex; justify-content: center; align-items: center; background: linear-gradient(to bottom, rgba(255,0,64,0.1), transparent); }
.hud-actions { display: flex; gap: 8px; }
.action-chip { width: 36px; height: 36px; background: rgba(255,255,255,0.05); border-radius: 10px; display: flex; justify-content: center; align-items: center; border: 1px solid rgba(255,255,255,0.05); }


/* --- 7. FOOTER NAVBAR --- */
.navbar {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    width: 90%; max-width: 380px;
    background: rgba(15, 15, 15, 0.85); 
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 30px; 
    padding: 10px 0;
    display: flex; justify-content: space-evenly; align-items: center;
    z-index: 100; /* Core se upar */
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.nav-btn { background: none; border: none; color: #555; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; font-family: inherit; }
.nav-btn.active { color: #fff; }
.nav-btn.active i { color: #00ff9c; transform: translateY(-2px); filter: drop-shadow(0 0 8px #00ff9c); }


/* --- 8. MODALS & OVERLAYS --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); 
    z-index: 2000 !important; /* Sabse upar */
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(5px);
}
.modal-overlay.hidden { display: none !important; }

/* Notification Toast Fix */
#cloudStatus {
    z-index: 5000 !important; /* Header se bhi upar */
}