:root {
    /* --- Main Layout --- */
    --body-bg: #0a0a0c;
    --card-bg: #151518;
    --border: #333333;
    --primary: #ffcc2d;    /* Gold Theme */
    --secondary: #722fff;  /* Purple Theme */
    
    /* --- Basic Colors --- */
    --white: #ffffff;
    --black: #000000;
    --red: #ff0000;
    --yellow: #ffcc2d;
    --blue: #007bff;
    --gray: #888888;

    /* --- Ranking Tiers --- */
    --gold: #ffcc2d;
    --silver: #e5e5e5;
    --bronze: #cd7f32;
    --steel: #888888;

    /* --- Status & Social --- */
    --online: #00ff88;
    --offline: #ff3e3e;
    --live: #ff4757;
    --maintenance: #ffa500;
    --whatsapp: #25d366;
    --facebook: #1877f2;
    --instagram: #e4405f;
    --tiktok: #ff0050;
    --x: #000000;

    /* --- Feature Specific --- */
    --raast: #ed7d31;
    --advance: #722fff;
    --patch-bg: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    --patch: #00d2ff;
    --gv-cyan: #00d2ff;

    /* --- Typography --- */
    --body-font: 'GFFDevanagari', sans-serif;
    --name-font: 'SF Pro Display', sans-serif;
    --logo-font: 'Teko Light', sans-serif;

    /* --- Effects & Shadows --- */
    --glow: 0 0 15px rgba(255, 204, 45, 0.3);
    --shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    --transition: 0.3s ease;
}

/* Font Loading remains same */
@font-face {
    font-family: 'GFFDevanagari';
    src: url('GFFDevanagari.ttf') format('truetype');
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('SF-Pro.ttf') format('truetype');
}
@font-face {
    font-family: 'Teko Light';
    src: url('Teko.ttf') format('truetype');
    }

/* --- Tactical Diamond Click Effect --- */
.click-ripple {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--primary);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%) rotate(45deg);
    /* Diamond shape ◆ */
    box-shadow: 0 0 10px var(--primary);
    animation: diamond-burst 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* Burst effect with Diamond shape */
@keyframes diamond-burst {
    0% {
        width: 3px;
        height: 3px;
        opacity: 1;
        outline: 2px solid var(--primary);
        outline-offset: 0px;
    }

    50% {
        opacity: 0.8;
        outline: 1px solid var(--primary);
        outline-offset: 20px;
    }

    100% {
        width: 15px;
        height: 15px;
        opacity: 0;
        outline: 0px solid var(--primary);
        outline-offset: 40px;
        transform: translate(-50%, -50%) rotate(225deg);
    }
}