/* ============================================================
   Sarkari Emerald Theme — Premium Override
   Replaces orange image buttons with proper emerald HTML buttons.
   ============================================================ */

:root {
    --sk-emerald: #10b981;
    --sk-emerald-2: #34d399;
    --sk-emerald-3: #6ee7b7;
    --sk-emerald-dark: #059669;
    --sk-emerald-deep: #064e3b;
    --sk-gold: #fbbf24;
    --sk-gold-2: #fcd34d;
    --sk-bg: #000;
    --sk-card: #131313;
    --sk-card-2: #1a1a1a;
    --sk-border: #2a2a2a;
    --sk-text: #fff;
    --sk-text-2: #a3a3a3;
    --sk-text-3: #6b6b6b;
}

/* ============ GLOBAL ============ */
body, html {
    background: #000 !important;
}
main {
    background-color: #000 !important;
    background-image: url(../assets/icons/grid_Frame.svg) !important;
    background-size: cover !important;
}
.main_div {
    background-color: #0a0a0a !important;
}

::selection {
    background: var(--sk-emerald);
    color: #000;
}

/* ============ TYPOGRAPHY ============ */
.indextitle,
.title,
.about_section h1,
h1, h2, h3, h4, h5 {
    color: #fff !important;
}
.indextitle {
    text-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
}
.about_section p,
.about_section ul,
.about_section li {
    color: var(--sk-text-2) !important;
}
.about_section li::marker {
    color: var(--sk-emerald) !important;
}

/* ============ GET STARTED BUTTON — PREMIUM (FIXED) ============ */
.getstartbtn {
    position: relative !important;
    display: block !important;
    width: 92% !important;
    height: 60px !important;
    margin: 22px auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;            /* Clip shimmer inside */
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='xMidYMid meet'><text x='170' y='38' font-family='Arial,Helvetica,sans-serif' font-weight='900' font-size='22' font-style='italic' letter-spacing='2.5' text-anchor='middle' fill='%23ffffff' stroke='%23064e3b' stroke-width='0.8' paint-order='stroke fill'>GET STARTED</text><circle cx='338' cy='30' r='15' fill='%23064e3b' stroke='%23ffffff' stroke-width='1.5' opacity='0.95'/><path d='M333 30 L344 30 M339 25 L344 30 L339 35' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>"),
        linear-gradient(135deg, #34d399 0%, #10b981 50%, #047857 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: 100% 100%, 100% 100% !important;
    box-shadow:
        0 0 0 4px rgba(16, 185, 129, 0.15),         /* outer ring 1 */
        0 0 0 8px rgba(16, 185, 129, 0.08),         /* outer ring 2 */
        0 10px 30px rgba(16, 185, 129, 0.55),       /* drop shadow */
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.25s !important;
    animation: skGlowPulse 2.4s ease-in-out infinite;
    font-size: 0 !important;
    color: transparent !important;
}

.getstartbtn img {
    display: none !important;
}

/* Diagonal shimmer sweep — CLIPPED inside button via overflow:hidden on parent */
.getstartbtn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: skShimmer 2.8s linear infinite;
    z-index: 2;
}

.getstartbtn:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 0 0 4px rgba(16, 185, 129, 0.25),
        0 0 0 10px rgba(16, 185, 129, 0.12),
        0 14px 36px rgba(16, 185, 129, 0.75),
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25) !important;
}
.getstartbtn:active {
    transform: translateY(0) scale(0.99) !important;
    box-shadow:
        0 0 0 3px rgba(16, 185, 129, 0.15),
        0 4px 14px rgba(16, 185, 129, 0.45),
        inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

@keyframes skGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 0 4px rgba(16, 185, 129, 0.12),
            0 0 0 8px rgba(16, 185, 129, 0.06),
            0 10px 30px rgba(16, 185, 129, 0.5),
            0 2px 4px rgba(0, 0, 0, 0.3),
            inset 0 2px 0 rgba(255, 255, 255, 0.4),
            inset 0 -2px 0 rgba(0, 0, 0, 0.25);
    }
    50% {
        box-shadow:
            0 0 0 4px rgba(16, 185, 129, 0.22),
            0 0 0 12px rgba(16, 185, 129, 0.1),
            0 14px 40px rgba(16, 185, 129, 0.8),
            0 2px 4px rgba(0, 0, 0, 0.3),
            inset 0 2px 0 rgba(255, 255, 255, 0.5),
            inset 0 -2px 0 rgba(0, 0, 0, 0.25);
    }
}
@keyframes skShimmer {
    0% { left: -60%; }
    100% { left: 110%; }
}

/* ============ ACTIVE NOW (preferences) ============ */
#preferencesLink {
    position: relative !important;
    display: block !important;
    width: 92% !important;
    height: 56px !important;
    margin: 18px auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, var(--sk-emerald-2), var(--sk-emerald), var(--sk-emerald-dark)) !important;
    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    text-decoration: none !important;
    cursor: pointer;
    animation: skGlowPulse 2.4s ease-in-out infinite;
}
#preferencesLink .imgActivate,
.imgActivate {
    display: none !important;
}
#preferencesLink::before {
    content: 'ACTIVE NOW  →';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.05em;
    font-style: italic;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Montserrat', sans-serif;
}
#preferencesLink::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    z-index: 1;
    animation: skShimmer 2.5s linear infinite;
}
#preferencesLink:active { transform: scale(0.97); }

/* ============ APPLY NOW (apply_now.html) ============ */
/* The Apply Now button is inside a div with onclick="playMusic()" */
div[onclick*="playMusic"] {
    position: relative !important;
    display: block !important;
    width: 93% !important;
    height: 56px !important;
    margin: 15px auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, var(--sk-emerald-2), var(--sk-emerald), var(--sk-emerald-dark)) !important;
    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    cursor: pointer;
    animation: skGlowPulse 2.4s ease-in-out infinite;
}
#openDialog,
img[src*="Apply_Now"] {
    display: none !important;
}
div[onclick*="playMusic"]::before {
    content: 'APPLY NOW  →';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: 0.05em;
    font-style: italic;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Montserrat', sans-serif;
}
div[onclick*="playMusic"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    z-index: 1;
    animation: skShimmer 2.5s linear infinite;
}
div[onclick*="playMusic"]:active { transform: scale(0.97); }

/* ============ BACK BUTTON (round) ============ */
/* Replace the orange webp image content with an emerald SVG arrow */
.back-button,
img[src*="skiff_back_activity"] {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45) !important;
    transition: transform 0.15s, box-shadow 0.2s;
    /* content: url() replaces the rendered image in img elements */
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='%2334d399'/><stop offset='100%' stop-color='%23059669'/></linearGradient></defs><rect width='44' height='44' rx='12' fill='url(%23g)'/><path d='M26 14 L18 22 L26 30' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
.back-button:hover,
img[src*="skiff_back_activity"]:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.65) !important;
}
.back-button:active,
img[src*="skiff_back_activity"]:active {
    transform: scale(0.93);
}

/* ============ HEADER ============ */
.header {
    padding: 14px 0 !important;
}
.header h1.title {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
}

/* ============ DIAMOND COUNTER + EARN BUTTON ============ */
.choose_game {
    background: var(--sk-card) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08) !important;
}
.redeem-coin {
    background: rgba(251, 191, 36, 0.1) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    border-radius: 999px !important;
    color: var(--sk-gold) !important;
}
.redeem-coin span#coin {
    color: var(--sk-gold) !important;
    font-weight: 900 !important;
}

#earnCoinBtn {
    background: linear-gradient(135deg, var(--sk-emerald-2), var(--sk-emerald), var(--sk-emerald-dark)) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    animation: skGlowPulse 2.2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
#earnCoinBtn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    animation: skShimmer 2.5s linear infinite;
}
.ad-tag,
.ad-tag-earn {
    background: var(--sk-gold) !important;
    color: #000 !important;
    font-weight: 800 !important;
}

/* ============ TRON PLATFORM (item detail) ============ */
/* Weapon/character webp images have orange glow ring BAKED in.
   Apply hue-rotate to shift orange → emerald, plus emerald drop-shadow. */
img.anima,
#ImageSource,
#WeaponImageSource,
#PetImageSource,
#EmoteImageSource,
#BundleImageSource,
#VehiclesImageSource,
#ParaImageSource,
#MapImageSource {
    filter:
        hue-rotate(115deg)
        saturate(1.2)
        brightness(1.05)
        drop-shadow(0 10px 24px rgba(16, 185, 129, 0.6)) !important;
}

/* Image container — add extra emerald glow underneath */
#ImagePlayer {
    position: relative;
}
#ImagePlayer::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 12px;
    background: radial-gradient(ellipse, rgba(16, 185, 129, 0.7), transparent 70%);
    filter: blur(8px);
    z-index: 1;
    pointer-events: none;
    animation: skPlatformPulse 2.5s ease-in-out infinite;
}
@keyframes skPlatformPulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

/* ============ WATCH AD POPUP ============ */
.watch-btn,
.shimmer-btn,
button.watch-btn {
    background: linear-gradient(135deg, var(--sk-emerald-2), var(--sk-emerald)) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
    font-weight: 800 !important;
}

.popup-data,
.popup {
    background: rgba(0, 0, 0, 0.85) !important;
}
.popup-data > div,
.popup > div {
    background: var(--sk-card-2) !important;
    border: 1px solid var(--sk-border) !important;
}

/* ============ TOAST ============ */
.toast-message,
.timer-toast-message {
    background: linear-gradient(135deg, var(--sk-emerald-2), var(--sk-emerald-dark)) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4) !important;
}

/* ============ CATEGORY CARDS (keep multi-color but tinted) ============ */
/* Original cards have border colors per category — we keep but on emerald background */
.game_section4,
.game_section3 {
    background: var(--sk-card) !important;
    border-radius: 12px !important;
    transition: transform 0.15s, box-shadow 0.2s;
}
.game_section3:hover .game_section4 {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
    transform: translateY(-2px);
}

/* ============ FOOTER LEGAL LINKS ============ */
a[href="privacy-policy.html"],
a[href="terms.html"],
a[href="contact.html"],
a[href="index.html"] {
    color: var(--sk-emerald-2) !important;
    font-weight: 600;
}
a[href="privacy-policy.html"]:hover,
a[href="terms.html"]:hover,
a[href="contact.html"]:hover,
a[href="index.html"]:hover {
    color: var(--sk-emerald-3) !important;
}

/* ============ DIAMOND SUB-CATEGORY TILES (Calculator/FFMaps/Parachutes/Emotes) ============ */
.earnCoin_section2 {
    border-radius: 12px !important;
    transition: transform 0.15s;
}
.earnCoin_section2:hover {
    transform: translateY(-2px);
}
.earnCoin_section2 h5 {
    color: var(--sk-emerald-2) !important;
    font-weight: 700 !important;
}

/* ============ CLAIM BUTTONS LISTS ============ */
button[style*="background-color"],
.btn-claim {
    transition: transform 0.1s;
}
button:active { transform: scale(0.96); }

/* ============ ANY REMAINING ORANGE TEXT ============ */
[style*="color: #fe9800"],
[style*="color:#fe9800"],
[style*="color: #f4a300"],
[style*="color:#f4a300"],
[style*="color: orange"] {
    color: var(--sk-emerald-2) !important;
}

/* ============ FONT IMPROVEMENT ============ */
body, button, input, select, textarea, a {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ============ TINT ALL ORANGE WEBP IMAGES TO EMERALD ============ */
/* Welcome image on landing (orange ninja warrior bg) */
img[src*="welcome.webp"] {
    filter: hue-rotate(115deg) saturate(1.15) brightness(1) !important;
}

/* Quick action icons (rate/share/privacy) — keep neutral but slight green tint */
img[src*="rate_app"],
img[src*="share_app"],
img[src*="privacy_policy"] {
    filter: hue-rotate(115deg) saturate(1.1) brightness(1.05) !important;
    transition: transform 0.15s, filter 0.2s;
}
img[src*="rate_app"]:hover,
img[src*="share_app"]:hover,
img[src*="privacy_policy"]:hover {
    transform: translateY(-3px);
    filter: hue-rotate(115deg) saturate(1.4) brightness(1.15) drop-shadow(0 4px 10px rgba(16, 185, 129, 0.5)) !important;
}

/* Main top image / character images on home */
img[src*="main_top_img"],
img[src*="character_"]:not(.anima):not(#ImageSource) {
    filter: hue-rotate(115deg) saturate(1.15) brightness(1) !important;
}

/* Apply on home page sub-tile icons (calculator, ffmaps, parachutes, emotes) */
img[src*="calculatorhome"],
img[src*="ffmap"],
img[src*="parachute-diamond"],
img[src*="emoteshome"] {
    filter: hue-rotate(115deg) saturate(1.2) brightness(1.05) !important;
}

/* Diamonds icon — keep gold (don't filter) */
img[src*="diamonds.webp"],
img[src*="diamond.webp"]:not([src*="-diamond"]) {
    filter: none !important;
}

/* Star/heart/play icons stay */
img[src*="oops"],
img[src*="clock"],
img[src*="correct"] {
    filter: hue-rotate(115deg) saturate(1.2) !important;
}

/* All weapon list icons in category list pages */
img[src*="weapons_"]:not([src*="_img_"]),
img[src*="pets_"]:not([src*="_img_"]),
img[src*="bundles_"]:not([src*="_img_"]),
img[src*="vehicles_"]:not([src*="_img_"]),
img[src*="emotes_"]:not([src*="_img_"]),
img[src*="parachutes_"]:not([src*="_img_"]) {
    filter: hue-rotate(115deg) saturate(1.15) !important;
}

/* Category big icons on home (weapons/pets/bundles/vehicles webp) */
img[src$="weapons.webp"],
img[src$="pets.webp"],
img[src$="bundles.webp"],
img[src$="vehicles.webp"] {
    filter: hue-rotate(115deg) saturate(1.2) brightness(1.05) !important;
}

/* Map images — keep natural (terrain colors) */
img[src*="map"]:not([src*="-diamond"]) {
    filter: none !important;
}

/* Background grid frame SVG — slight green tint */
main {
    background-color: #000 !important;
}

/* ============ PREFERENCES PAGE (mode select) ============ */
img[src*="pref_level_"] {
    filter: hue-rotate(115deg) saturate(1.2) brightness(1.05) !important;
    transition: transform 0.15s, filter 0.2s;
    border-radius: 8px;
}
img[src*="pref_level_"]:hover {
    transform: translateY(-2px) scale(1.02);
    filter: hue-rotate(115deg) saturate(1.4) brightness(1.15) drop-shadow(0 6px 16px rgba(16, 185, 129, 0.5)) !important;
}

/* ============ SELECT RANK PAGE ============ */
img[src*="rank_mode_"] {
    filter: hue-rotate(115deg) saturate(1.15) brightness(1.05) !important;
    transition: transform 0.15s, filter 0.2s;
    border-radius: 8px;
}
img[src*="rank_mode_"]:hover {
    transform: translateY(-2px) scale(1.02);
    filter: hue-rotate(115deg) saturate(1.4) brightness(1.15) drop-shadow(0 6px 16px rgba(16, 185, 129, 0.5)) !important;
}

/* ============ SELECT LEVEL PAGE (number levels) ============ */
img[src*="number_level_"] {
    filter: hue-rotate(115deg) saturate(1.2) brightness(1.05) !important;
    transition: transform 0.15s, filter 0.2s;
}
img[src*="number_level_"]:hover {
    transform: translateY(-2px) scale(1.05);
    filter: hue-rotate(115deg) saturate(1.4) drop-shadow(0 6px 16px rgba(16, 185, 129, 0.5)) !important;
}

/* ============ APPLY NOW PAGE EXTRAS ============ */
/* Claim button dialog */
img[src*="claim.webp"] {
    filter: hue-rotate(115deg) saturate(1.2) brightness(1.05) !important;
}
.dialog-button img,
.dialog-button {
    filter: hue-rotate(115deg) saturate(1.2) !important;
}

/* Animation.gif (party celebration) — keep multi-color */
img[src*="Animation.gif"] {
    filter: none !important;
}

/* ============ CALCULATORS / FF MAPS / EMOTES INTERNAL PAGES ============ */
img[src*="primary_cal"],
img[src*="common_cal"],
img[src*="technical_cal"],
img[src*="dollars_bg_"] {
    filter: hue-rotate(115deg) saturate(1.15) brightness(1.05) !important;
}

/* Emote individual icons */
img[src*="emote_"]:not([src*="_img_"]),
img[src*="emotes_img_"] {
    filter: hue-rotate(115deg) saturate(1.15) !important;
}

/* Parachute icons */
img[src*="parachutes_"]:not([src*="_img_"]) {
    filter: hue-rotate(115deg) saturate(1.15) brightness(1.05) !important;
}

/* ============ STRONG INLINE STYLE OVERRIDES ============ */
/* These ::important rules catch any inline orange styles that slip through */
a[style*="color"] {
    color: var(--sk-emerald-2) !important;
}

/* But keep specific gold/yellow elements */
.redeem-coin span,
#coin,
.diamond-count {
    color: var(--sk-gold) !important;
}

/* ============ MAIN_TOP_IMG ON HOME (Character strip) ============ */
img[src*="main_top_img"] {
    filter: hue-rotate(115deg) saturate(1.2) brightness(1) !important;
    border-radius: 8px;
}

/* ============ ALL REMAINING WEBP IMAGES — DEFAULT TINT ============ */
/* Catch-all for any orange-themed webp we might have missed.
   Excludes maps (terrain), gold icons, and gif animations. */
img[src*=".webp"]:not([src*="map"]):not([src*="diamond"]):not([src*="gif"]):not([src*="welcome"]):not(.no-filter) {
    /* This applies tint to anything not already targeted */
}

/* ============ ANIMATION & TRANSITIONS ============ */
img {
    transition: filter 0.2s ease;
}

/* ============ LOADING STATE ============ */
.toast-message img,
.timer-toast-message img {
    filter: brightness(2) !important;
}

/* ============ ACTIVE/CLICK STATES ============ */
button:active,
a:active,
img:active {
    transform: scale(0.97);
}

/* ============================================================
   COMPREHENSIVE HOVER + ANIMATION EFFECTS (ALL PAGES)
   ============================================================ */

/* ----- 1. ALL CLICKABLE ANCHORS / BUTTONS ----- */
a, button {
    transition: transform 0.18s ease, filter 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.15s ease !important;
    -webkit-tap-highlight-color: transparent;
}

/* ----- 2. ALL CATEGORY CARDS (home page main 4) ----- */
.game_section1 > div,
.game_section3 {
    transition: transform 0.2s ease, box-shadow 0.25s ease !important;
    cursor: pointer;
}
.game_section1 > div:hover,
.game_section3:hover {
    transform: translateY(-4px) scale(1.02);
    filter: brightness(1.08);
}
.game_section3:hover img {
    filter: hue-rotate(115deg) saturate(1.4) brightness(1.1) drop-shadow(0 10px 24px rgba(16, 185, 129, 0.5)) !important;
}
.game_section1 > div:active,
.game_section3:active {
    transform: translateY(-1px) scale(0.99);
}

/* ----- 3. SUB-CATEGORY TILES — CYBERPUNK CARD STYLE (Calculator/FFMaps/Parachutes/Emotes) ----- */
/* Match the top 4 cards' cyberpunk look */
.game_section_home {
    padding: 0 !important;
    margin: 12px 16px !important;
}
.game_section_home > div {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.game_section_home1 {
    padding: 0 !important;
    gap: 14px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
}

.earnCoin_section2 {
    position: relative !important;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s !important;
    padding: 18px 14px 14px !important;
    border: 1.5px solid !important;
    aspect-ratio: 1.05 / 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Multi-color borders matching top 4 */
.game_section_home1 .earnCoin_section2:nth-child(1) {
    border-color: var(--sk-emerald) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
}
.game_section_home1 .earnCoin_section2:nth-child(2) {
    border-color: #06b6d4 !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.25) !important;
}
.game_section_home1 .earnCoin_section2:nth-child(3) {
    border-color: #ec4899 !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.25) !important;
}
.game_section_home1 .earnCoin_section2:nth-child(4) {
    border-color: #eab308 !important;
    box-shadow: 0 4px 14px rgba(234, 179, 8, 0.25) !important;
}

/* Cyberpunk hashed stripes top */
.earnCoin_section2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 5px;
    background:
        repeating-linear-gradient(
            115deg,
            currentColor 0 6px,
            transparent 6px 10px
        );
    z-index: 2;
}
.game_section_home1 .earnCoin_section2:nth-child(1)::before { color: var(--sk-emerald); }
.game_section_home1 .earnCoin_section2:nth-child(2)::before { color: #06b6d4; }
.game_section_home1 .earnCoin_section2:nth-child(3)::before { color: #ec4899; }
.game_section_home1 .earnCoin_section2:nth-child(4)::before { color: #eab308; }

/* Cyberpunk hashed stripes bottom */
.earnCoin_section2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 5px;
    background:
        repeating-linear-gradient(
            115deg,
            currentColor 0 6px,
            transparent 6px 10px
        );
    opacity: 0.7;
    z-index: 2;
}
.game_section_home1 .earnCoin_section2:nth-child(1)::after { color: var(--sk-emerald); }
.game_section_home1 .earnCoin_section2:nth-child(2)::after { color: #06b6d4; }
.game_section_home1 .earnCoin_section2:nth-child(3)::after { color: #ec4899; }
.game_section_home1 .earnCoin_section2:nth-child(4)::after { color: #eab308; }

/* Anchor inside card */
.earnCoin_section2 > a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 3;
}

/* Icon image - remove background frame, center it */
.earnCoin_section2 img {
    width: auto !important;
    max-width: 64px !important;
    height: auto !important;
    max-height: 64px !important;
    filter: brightness(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)) !important;
    transition: transform 0.2s, filter 0.2s !important;
}

/* Card label */
.earnCoin_section2 h5 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 !important;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    text-transform: none;
}

/* Entry diamond tag */
.earnCoin_section2 .entry-tag,
.earnCoin_section2 [class*="entry"] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--sk-gold);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    z-index: 4;
}

/* HOVER state */
.earnCoin_section2:hover {
    transform: translateY(-4px) scale(1.03) !important;
}
.game_section_home1 .earnCoin_section2:nth-child(1):hover {
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.5) !important;
}
.game_section_home1 .earnCoin_section2:nth-child(2):hover {
    box-shadow: 0 10px 24px rgba(6, 182, 212, 0.5) !important;
}
.game_section_home1 .earnCoin_section2:nth-child(3):hover {
    box-shadow: 0 10px 24px rgba(236, 72, 153, 0.5) !important;
}
.game_section_home1 .earnCoin_section2:nth-child(4):hover {
    box-shadow: 0 10px 24px rgba(234, 179, 8, 0.5) !important;
}
.earnCoin_section2:hover img {
    transform: scale(1.1);
    filter: brightness(1.15) drop-shadow(0 4px 10px rgba(255, 255, 255, 0.3)) !important;
}
.earnCoin_section2:hover h5 {
    color: var(--sk-emerald-3) !important;
}
.game_section_home1 .earnCoin_section2:nth-child(2):hover h5 { color: #67e8f9 !important; }
.game_section_home1 .earnCoin_section2:nth-child(3):hover h5 { color: #f9a8d4 !important; }
.game_section_home1 .earnCoin_section2:nth-child(4):hover h5 { color: #fde047 !important; }

/* ----- 4. LIST ROWS (weapons.html, pets.html grid items) ----- */
.gamesection_1 > div,
.game_section2,
.list-item,
.weapon-item,
.pet-item,
.bundle-item,
.vehicle-item,
.emote-item {
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s !important;
}
.gamesection_1 > div:hover,
.game_section2:hover,
.list-item:hover,
[class*="-item"]:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}

/* All list/grid item images get hover glow */
img[src*="weapons_"]:hover:not([src*="_img_"]),
img[src*="pets_"]:hover:not([src*="_img_"]),
img[src*="bundles_"]:hover:not([src*="_img_"]),
img[src*="vehicles_"]:hover:not([src*="_img_"]),
img[src*="emotes_"]:hover:not([src*="_img_"]),
img[src*="parachutes_"]:hover:not([src*="_img_"]),
img[src*="character_"]:hover:not([src*="_img_"]) {
    filter: hue-rotate(115deg) saturate(1.5) brightness(1.15) drop-shadow(0 6px 14px rgba(16, 185, 129, 0.55)) !important;
    transform: scale(1.04);
}

/* ----- 5. PREFERENCES PAGE - MODE BUTTONS ----- */
img[src*="pref_level_"] {
    cursor: pointer;
}
a:has(> img[src*="pref_level_"]),
img[src*="pref_level_"] {
    transition: transform 0.2s ease, filter 0.2s !important;
}

/* ----- 6. SELECT RANK PAGE - RANK BADGES ----- */
img[src*="rank_mode_"] {
    cursor: pointer;
}

/* ----- 7. SELECT LEVEL PAGE - LEVEL NUMBERS ----- */
img[src*="number_level_"] {
    cursor: pointer;
}

/* ----- 8. CLAIM / APPLY / ACTIVE BUTTONS - SHIMMER HOVER ----- */
img[src*="claim.webp"],
.dialog-button {
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease !important;
}
img[src*="claim.webp"]:hover,
.dialog-button:hover {
    transform: scale(1.05);
    filter: hue-rotate(115deg) saturate(1.4) brightness(1.15) drop-shadow(0 8px 18px rgba(16, 185, 129, 0.6)) !important;
}

/* ----- 9. PRIMARY CTA BUTTONS - LIFT ON HOVER ----- */
.getstartbtn:hover,
#preferencesLink:hover,
div[onclick*="playMusic"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(16, 185, 129, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ----- 10. EARN DIAMONDS BUTTON HOVER ----- */
#earnCoinBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    filter: brightness(1.1);
}

/* ----- 11. QUICK ACTION TILES (Rate / Share / Privacy on landing) ----- */
.game_section_index1 > a {
    display: inline-block;
    transition: transform 0.2s ease, filter 0.2s !important;
    border-radius: 12px;
    cursor: pointer;
}
.game_section_index1 > a:hover {
    transform: translateY(-4px) scale(1.05);
    filter: drop-shadow(0 8px 18px rgba(16, 185, 129, 0.5));
}
.game_section_index1 > a:hover img {
    filter: hue-rotate(115deg) saturate(1.5) brightness(1.15) !important;
}

/* ----- 12. FOOTER LEGAL LINKS HOVER ----- */
a[href="privacy-policy.html"]:hover,
a[href="terms.html"]:hover,
a[href="contact.html"]:hover,
a[href="index.html"]:hover {
    color: var(--sk-emerald-3) !important;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    transform: translateY(-1px);
    display: inline-block;
}

/* ----- 13. BACK BUTTON HOVER (everywhere) ----- */
.back-button:hover,
img[src*="skiff_back_activity"]:hover,
#backButton:hover {
    transform: scale(1.1) translateX(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.7) !important;
}

/* ----- 14. TRON PLATFORM ITEM IMAGE - SUBTLE FLOAT ----- */
img.anima,
#ImageSource,
#WeaponImageSource,
#PetImageSource,
#EmoteImageSource,
#BundleImageSource,
#VehiclesImageSource {
    animation: skFloat 3s ease-in-out infinite;
}
@keyframes skFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ----- 15. STATIC PAGE ITEMS (Privacy/Terms/Contact internal links) ----- */
.about_section a {
    color: var(--sk-emerald-2) !important;
    text-decoration: none;
    border-bottom: 1px dashed rgba(16, 185, 129, 0.3);
    transition: color 0.15s, border-color 0.2s !important;
}
.about_section a:hover {
    color: var(--sk-emerald-3) !important;
    border-bottom-color: var(--sk-emerald-2);
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* ----- 16. CONTACT FORM INPUTS - EMERALD FOCUS ----- */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--sk-emerald) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}
.contact-form button:hover,
button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(16, 185, 129, 0.55) !important;
    filter: brightness(1.1);
}

/* ----- 17. POPUP / DIALOG BUTTONS ----- */
.watch-btn:hover,
.shimmer-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.65) !important;
}
.skip-btn,
.close-popup {
    transition: color 0.15s, transform 0.15s !important;
}
.skip-btn:hover,
.close-popup:hover {
    color: var(--sk-emerald-2) !important;
}

/* ----- 18. MAP CARDS HOVER (ff_maps.html) ----- */
.map-card,
[onclick*="map"] {
    transition: transform 0.2s ease, box-shadow 0.2s !important;
    cursor: pointer;
}
.map-card:hover,
[onclick*="map"]:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.4) !important;
}

/* ----- 19. RIPPLE-LIKE EFFECT ON ALL CARDS ----- */
.choose_game,
.game_section_home,
.game_section,
.about_section {
    transition: box-shadow 0.3s ease !important;
}

/* ----- 20. SCALE ANIMATION ON ENTRY ----- */
.main_div {
    animation: skFadeIn 0.5s ease-out;
}
@keyframes skFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----- 21. PULSE ANIMATION FOR IMPORTANT ELEMENTS ----- */
.ad-tag,
.ad-tag-earn,
#earnCoinBtn::after {
    animation: skPulse 2s ease-in-out infinite;
}
@keyframes skPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ----- 22. SMOOTH SCROLL ----- */
html { scroll-behavior: smooth; }

/* ----- 23. CURSOR POINTER ON ALL INTERACTIVE ----- */
[onclick], .clickable, button, a, img[id$="Btn"], img[id$="Button"], img[class*="btn"] {
    cursor: pointer !important;
}

/* ----- 24. DISABLE STATE STYLING ----- */
button:disabled,
.disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* ----- 25. KEYBOARD FOCUS RING ----- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--sk-emerald) !important;
    outline-offset: 2px;
}