/* ============================================
   FarmBrawl — Premium Farm Game UI Overhaul
   Enhanced visual design with ambient effects,
   glassmorphism, sparklines, and farm-game feel
   ============================================ */

/* --- IMPORTS & CUSTOM PROPERTIES --- */
:root {
    --fb-green-50: #f0fdf4;
    --fb-green-100: #dcfce7;
    --fb-green-200: #bbf7d0;
    --fb-green-300: #86efac;
    --fb-green-400: #4ade80;
    --fb-green-500: #22c55e;
    --fb-green-600: #16a34a;
    --fb-green-700: #15803d;
    --fb-green-800: #166534;
    --fb-green-900: #14532d;
    --fb-amber-50: #fffbeb;
    --fb-amber-100: #fef3c7;
    --fb-amber-200: #fde68a;
    --fb-amber-300: #fcd34d;
    --fb-amber-400: #fbbf24;
    --fb-amber-500: #f59e0b;
    --fb-amber-600: #d97706;
    --fb-soil-50: #fdf8f6;
    --fb-soil-100: #f5ede5;
    --fb-soil-200: #e8d5c4;
    --fb-soil-500: #a16207;
    --fb-soil-600: #854d0e;
    --fb-soil-700: #713f12;
    --fb-soil-800: #422006;
    --fb-bg-primary: #0c1a14;
    --fb-bg-card: rgba(15, 23, 42, 0.85);
    --fb-bg-card-solid: #0f172a;
    --fb-border-subtle: rgba(255, 255, 255, 0.06);
    --fb-border-accent: rgba(52, 211, 153, 0.25);
    --fb-glow-green: rgba(52, 211, 153, 0.15);
    --fb-glow-amber: rgba(251, 191, 36, 0.15);
    --fb-text-primary: #f1f5f9;
    --fb-text-secondary: #94a3b8;
    --fb-text-muted: #64748b;
    --fb-radius-sm: 0.5rem;
    --fb-radius-md: 0.85rem;
    --fb-radius-lg: 1.25rem;
    --fb-radius-xl: 1.75rem;
    --fb-radius-full: 9999px;
    --fb-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
    --fb-shadow-glow: 0 0 30px var(--fb-glow-green);
    --fb-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --fb-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --fb-transition-slow: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- AMBIENT PARTICLE CONTAINER (reducido para no competir con atmósfera) --- */
#fb-ambient-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.25;
    transition: opacity 0.6s ease;
}

/* --- AMBIENT WARM FARM TEXTURE OVERLAY --- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(106, 176, 74, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 20% 100%, rgba(200, 169, 110, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(180, 140, 80, 0.03) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* --- PREMIUM BODY BACKGROUND (cálido, tierra-madera) --- */
body {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(180, 140, 80, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 100%, rgba(106, 176, 74, 0.04) 0%, transparent 50%),
        linear-gradient(180deg, var(--farm-bg-deep) 0%, rgba(22, 16, 12, 0.5) 100%) !important;
    min-height: 100vh;
    color: var(--farm-text-primary);
}

/* --- PREMIUM TOPBAR (madera oscura) --- */
.game-topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(106, 176, 74, 0.04) 0%,
        transparent 40%,
        rgba(200, 169, 110, 0.03) 80%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

.game-topbar {
    background: linear-gradient(180deg, var(--farm-bg-surface) 0%, var(--farm-bg-deep) 100%) !important;
    border-bottom: 1px solid var(--farm-border-subtle) !important;
    box-shadow: var(--farm-shadow-md), 0 1px 0 rgba(139, 115, 85, 0.06) !important;
}

/* --- PREMIUM BALANCE TRAY (Pergamino barnizado claro) --- */
body.light-mode .hud-balance-tray {
    --tray-bg: rgba(249, 242, 229, 0.88);
    --tray-bg-2: rgba(236, 230, 214, 0.82);
    --tray-border: rgba(120, 92, 48, 0.14);
    --tray-highlight: rgba(255, 252, 244, 0.72);
    --tray-shadow-1: rgba(88, 61, 28, 0.08);
    --tray-shadow-2: rgba(132, 101, 44, 0.10);
    --tray-ambient: rgba(126, 157, 92, 0.08);

    background:
        linear-gradient(180deg, var(--tray-highlight) 0%, rgba(255,255,255,0) 22%),
        linear-gradient(135deg, rgba(206, 226, 188, 0.20) 0%, rgba(249, 242, 229, 0.94) 38%, rgba(241, 232, 210, 0.96) 100%) !important;
    backdrop-filter: blur(14px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.04) !important;
    border: 1px solid var(--tray-border) !important;
    border-radius: 18px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 251, 241, 0.92),
        inset 0 -1px 0 rgba(181, 157, 110, 0.08),
        0 2px 6px var(--tray-shadow-1),
        0 10px 26px var(--tray-shadow-2),
        0 0 0 1px rgba(255,255,255,0.22),
        0 12px 30px var(--tray-ambient) !important;
}

/* Premium HUD chips (Fichas esmaltadas con profundidad) */
body.light-mode .hud-chip {
    --chip-uglow: rgba(140, 120, 80, 0.10);

    background:
        linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0) 30%),
        linear-gradient(180deg, #fffaf0 0%, #f2e8d7 100%) !important;
    border: 1px solid rgba(114, 86, 45, 0.12) !important;
    border-radius: 14px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        inset 0 -1px 0 rgba(176, 145, 87, 0.08),
        0 1px 2px rgba(90, 67, 29, 0.06),
        0 6px 14px rgba(86, 61, 24, 0.10),
        0 0 0 1px rgba(255,255,255,0.18),
        0 4px 16px var(--chip-uglow) !important;
}

body.light-mode .hud-chip:hover {
    border-color: rgba(114, 86, 45, 0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        inset 0 -1px 0 rgba(176, 145, 87, 0.08),
        0 1px 2px rgba(90, 67, 29, 0.06),
        0 10px 22px rgba(86, 61, 24, 0.14),
        0 0 0 1px rgba(255,255,255,0.18),
        0 4px 20px var(--chip-uglow) !important;
}

/* Labels: compactos, uppercase, tracking */
body.light-mode .hud-chip-label {
    font-size: 0.65rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    opacity: 0.88 !important;
}

/* Values: grandes, bold, tabular */
body.light-mode .hud-chip-val {
    font-size: 1rem !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    font-variant-numeric: tabular-nums lining-nums !important;
}

/* backdrop-filter fallback for older browsers */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.light-mode .hud-balance-tray {
        background: rgba(245, 240, 228, 0.96) !important;
    }
}

/* ── USDC: borde esmeralda suave ── */
body.light-mode .hud-chip--usdc {
    --chip-uglow: rgba(60, 146, 105, 0.16);
    border-top: 2px solid #67b88a !important;
}
body.light-mode .hud-chip--usdc .hud-chip-label { color: #3f7655 !important; }
body.light-mode .hud-chip--usdc .hud-chip-val { color: #255b3f !important; text-shadow: 0 1px 0 rgba(255,255,255,0.30) !important; }

/* ── USDC Retirable: borde ámbar ── */
body.light-mode .hud-chip--retirable {
    --chip-uglow: rgba(202, 150, 62, 0.18);
    border-top: 2px solid #d6a24b !important;
}
body.light-mode .hud-chip--retirable .hud-chip-label { color: #8c5712 !important; }
body.light-mode .hud-chip--retirable .hud-chip-val { color: #7b4a12 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.30) !important; }

/* ── BC (Brawl Coins): borde violeta ── */
body.light-mode .hud-chip--bc {
    --chip-uglow: rgba(138, 104, 196, 0.16);
    border-top: 2px solid #9a7ad8 !important;
}
body.light-mode .hud-chip--bc .hud-chip-label { color: #7756b1 !important; }
body.light-mode .hud-chip--bc .hud-chip-val { color: #55358c !important; text-shadow: 0 1px 0 rgba(255,255,255,0.30) !important; }

/* ── Gemas: borde teal ── */
body.light-mode .hud-chip--gem {
    --chip-uglow: rgba(77, 168, 189, 0.18);
    border-top: 2px solid #61bdd2 !important;
}
body.light-mode .hud-chip--gem .hud-chip-label { color: #2b7284 !important; }
body.light-mode .hud-chip--gem .hud-chip-val { color: #1b6a7b !important; text-shadow: 0 1px 0 rgba(255,255,255,0.30) !important; }

/* ── Tasa: borde neutro cálido ── */
body.light-mode .hud-chip--rate {
    --chip-uglow: rgba(110, 90, 70, 0.12);
    border-top: 2px solid #bcad9a !important;
}
body.light-mode .hud-chip--rate .hud-chip-label { color: #706251 !important; }
body.light-mode .hud-chip--rate .hud-chip-val { color: #4a3f35 !important; }
body.light-mode .hud-chip--rate .hud-chip-val strong { color: #3a7d55 !important; }

/* ── Agua: borde cielo ── */
body.light-mode .hud-chip--water {
    --chip-uglow: rgba(72, 187, 207, 0.18);
    border-top: 2px solid #63c5d9 !important;
}
body.light-mode .hud-chip--water .hud-chip-label { color: #218099 !important; }
body.light-mode .hud-chip--water .hud-chip-val { color: #197688 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.30) !important; }

/* ── Deposit button: violeta premium ── */
body.light-mode .hud-chip--deposit {
    --chip-uglow: rgba(109, 40, 217, 0.25);
    border: 1px solid rgba(109, 40, 217, 0.25) !important;
    border-top: 2px solid #a78bfa !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), #6d28d9) !important;
}
body.light-mode .hud-chip--deposit .hud-chip-label { color: rgba(255, 255, 255, 0.85) !important; }
body.light-mode .hud-chip--deposit .hud-chip-val--deposit { color: #FFFFFF !important; }
body.light-mode .hud-chip--deposit:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), #7c3aed) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    box-shadow: 0 6px 20px rgba(109, 40, 217, 0.35) !important;
    transform: translateY(-2px);
}

/* --- WALLET BUTTON --- */
.game-topbar-wallet-btn {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    box-shadow: 0 4px 0 #5b21b6, 0 6px 20px rgba(124, 58, 237, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    position: relative;
    overflow: hidden;
}

.game-topbar-wallet-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 50%);
    pointer-events: none;
}

/* --- PREMIUM TOOL BUTTONS --- */
.game-tools-row .game-tool-btn,
.game-tools-row .vip-btn {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.game-tools-row .game-tool-btn::after,
.game-tools-row .vip-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 60%);
    pointer-events: none;
}

.game-tools-row .game-tool-calc {
    background: linear-gradient(135deg, var(--fb-green-500), var(--fb-green-600)) !important;
    color: #fff !important;
    border-color: var(--fb-green-400) !important;
    box-shadow: 0 3px 0 var(--fb-green-700), 0 6px 16px rgba(34, 197, 94, 0.35) !important;
}

/* --- DAILY DASHBOARD PANEL --- */
.fb-daily-dash {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(20, 30, 48, 0.95));
    border: 1px solid rgba(52, 211, 153, 0.15);
    border-radius: var(--fb-radius-xl);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--fb-shadow-card);
}

.fb-daily-dash::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 0% 0%, rgba(52, 211, 153, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(251, 191, 36, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.fb-daily-dash::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.3), transparent);
}

.fb-daily-dash__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.fb-daily-dash__greeting {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.fb-daily-dash__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fb-green-400), var(--fb-green-600));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: 2px solid rgba(52, 211, 153, 0.3);
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.2);
}

.fb-daily-dash__name {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--fb-text-primary);
    line-height: 1.2;
}

.fb-daily-dash__sub {
    font-size: 0.78rem;
    color: var(--fb-text-secondary);
    font-weight: 500;
}

.fb-daily-dash__date {
    font-size: 0.75rem;
    color: var(--fb-text-muted);
    font-weight: 600;
    text-align: right;
    line-height: 1.3;
}

.fb-daily-dash__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.fb-dash-stat {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--fb-radius-md);
    padding: 0.75rem 0.85rem;
    text-align: center;
    transition: var(--fb-transition-base);
    position: relative;
    overflow: hidden;
}

.fb-dash-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.02), transparent);
    pointer-events: none;
}

.fb-dash-stat:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.fb-dash-stat__icon {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
    display: block;
}

.fb-dash-stat__value {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.15rem;
}

.fb-dash-stat__label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fb-text-muted);
}

.fb-dash-stat--green .fb-dash-stat__value { color: var(--fb-green-400); }
.fb-dash-stat--amber .fb-dash-stat__value { color: var(--fb-amber-400); }
.fb-dash-stat--purple .fb-dash-stat__value { color: #c084fc; }
.fb-dash-stat--blue .fb-dash-stat__value { color: #38bdf8; }

/* Sparkline */
.fb-sparkline {
    width: 100%;
    height: 24px;
    margin-top: 0.35rem;
    display: block;
}

.fb-sparkline path {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fb-sparkline--green path { stroke: var(--fb-green-400); }
.fb-sparkline--amber path { stroke: var(--fb-amber-400); }
.fb-sparkline--purple path { stroke: #c084fc; }
.fb-sparkline--blue path { stroke: #38bdf8; }

.fb-sparkline .sparkline-area {
    fill: none;
    stroke: none;
    opacity: 0.15;
}

.fb-sparkline--green .sparkline-area { fill: var(--fb-green-400); }
.fb-sparkline--amber .sparkline-area { fill: var(--fb-amber-400); }
.fb-sparkline--purple .sparkline-area { fill: #c084fc; }
.fb-sparkline--blue .sparkline-area { fill: #38bdf8; }

/* --- ENHANCED HARVEST STAT CARD --- */
.farm-stat-card--harvest {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(20, 30, 48, 0.85)) !important;
    border: 1px solid rgba(251, 191, 36, 0.15) !important;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* --- PREMIUM STAT CARDS (glassmorphism) --- */
.farm-stat-card {
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(51, 65, 85, 0.5) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: var(--fb-transition-base);
    position: relative;
    overflow: hidden;
}

.farm-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.02), transparent);
    pointer-events: none;
}

.farm-stat-card:hover {
    border-color: rgba(52, 211, 153, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(52, 211, 153, 0.08) !important;
}

.farm-stat-label {
    color: var(--fb-text-secondary) !important;
}

.farm-stat-value {
    color: var(--fb-green-400) !important;
    text-shadow: 0 0 12px rgba(52, 211, 153, 0.2);
}

.farm-stat-icon {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* --- PREMIUM PLOT CARDS --- */
.plot-card {
    border-color: rgba(161, 98, 7, 0.28) !important;
    box-shadow:
        0 4px 0 rgba(120, 53, 15, 0.12),
        0 12px 32px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(15, 23, 42, 0.06) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.plot-card:hover {
    border-color: rgba(251, 191, 36, 0.45) !important;
    box-shadow:
        0 6px 0 rgba(120, 53, 15, 0.15),
        0 20px 44px rgba(15, 23, 42, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(15, 23, 42, 0.08) !important;
}

.plot-card--empty {
    border-color: rgba(52, 211, 153, 0.18) !important;
}

.plot-card--empty:hover {
    border-color: rgba(52, 211, 153, 0.35) !important;
    box-shadow:
        0 6px 0 rgba(120, 53, 15, 0.15),
        0 20px 44px rgba(15, 23, 42, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(15, 23, 42, 0.08) !important;
}

/* Ready plot CTA — forced emerald border + soft glow on main container */
.plot-card--ready {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(52, 211, 153, 0.6) !important; /* border-emerald-400/60 */
    box-shadow:
        0 0 0 1px rgba(52, 211, 153, 0.85),
        0 0 25px rgba(52, 211, 153, 0.25), /* shadow-[0_0_25px_rgba(52,211,153,0.25)] */
        0 0 15px rgba(16, 185, 129, 0.3),
        0 8px 28px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.plot-card--ready:hover {
    border-color: rgba(52, 211, 153, 0.75) !important;
    box-shadow:
        0 0 0 1px rgba(52, 211, 153, 1),
        0 0 28px rgba(52, 211, 153, 0.35),
        0 0 22px rgba(16, 185, 129, 0.45),
        0 12px 36px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Continuous subtle pulse on inner ring + small ready leaf */
.plot-card--ready .plot-ready-inner-ring,
.plot-card--ready .plot-ready-leaf {
    animation: plotReadyPulse 1.6s ease-in-out infinite;
}

/* Plot card inner glow for ready harvest */
.plot-card--ready .plot-card-soil::after {
    background: linear-gradient(
        180deg,
        rgba(16, 185, 129, 0.14) 0%,
        rgba(16, 185, 129, 0.05) 30%,
        rgba(10, 18, 14, 0.55) 70%,
        rgba(10, 18, 14, 0.75) 100%
    ) !important;
}

.plot-card--ready .strawberry.plot-ready-pulse,
.plot-card--ready .strawberry.animate-pulse {
    animation: plotReadyPulse 1.6s ease-in-out infinite;
}

.plot-card--ready .plot-btn-harvest.plot-ready-cta,
.plot-card--ready .plot-btn-harvest.animate-pulse {
    animation: plotReadyPulse 1.6s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

@keyframes plotReadyPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: 0.92; }
}

/* Plot card premium buttons */
.plot-btn {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    position: relative;
    overflow: hidden;
}

.plot-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 60%);
    pointer-events: none;
}

.plot-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 2px 0 !important;
}

.plot-btn-water {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    background: rgba(14, 165, 233, 0.2) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #38bdf8 !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}
.plot-btn-water:hover {
    background: rgba(14, 165, 233, 0.4) !important;
    border-color: rgba(56, 189, 248, 0.8) !important;
    color: #e0f2fe !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3) !important;
}

.plot-actions__group {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
}

.plot-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(30, 41, 59, 0.7) !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}

.plot-btn-icon:hover {
    transform: translateY(-1px) !important;
}

.plot-btn-pest {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    color: #fca5a5 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important;
}
.plot-btn-pest:hover {
    background: rgba(239, 68, 68, 0.45) !important;
    color: #ffffff !important;
}

.plot-btn-sell {
    background: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: #fbbf24 !important;
}
.plot-btn-sell:hover {
    background: rgba(245, 158, 11, 0.35) !important;
    color: #fef08a !important;
}

.plot-btn-package {
    background: rgba(168, 85, 247, 0.18) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: #c084fc !important;
}
.plot-btn-package:hover {
    background: rgba(168, 85, 247, 0.35) !important;
    color: #f3e8ff !important;
}

.plot-btn-remove {
    background: rgba(100, 116, 139, 0.18) !important;
    border-color: rgba(100, 116, 139, 0.35) !important;
    color: #94a3b8 !important;
}
.plot-btn-remove:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #fca5a5 !important;
}

/* --- LIVE ACTIVITY FEED (FOMO) --- */
/* Container positioning handled by style.css (position: relative, full-width banner) */

.fb-feed-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.9rem;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(52, 211, 153, 0.15);
    border-radius: var(--fb-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    animation: feedSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
}

.fb-feed-item--exit {
    animation: feedSlideOut 0.3s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

.fb-feed-item__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fb-green-500), var(--fb-green-700));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.3);
}

.fb-feed-item__text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fb-text-primary);
    line-height: 1.35;
}

.fb-feed-item__text strong {
    color: var(--fb-green-400);
}

@keyframes feedSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes feedSlideOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-10px) scale(0.9); }
}

/* --- ENHANCED SHIELD INDICATOR --- */
.farm-shield-indicator--active {
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.4), 0 0 0 1px rgba(16, 185, 129, 0.3) !important;
    animation: shieldDotGlow 3s ease-in-out infinite;
}

@keyframes shieldDotGlow {
    0%, 100% { box-shadow: 0 0 16px rgba(16, 185, 129, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.25); }
    50% { box-shadow: 0 0 26px rgba(16, 185, 129, 0.5), 0 0 0 1px rgba(16, 185, 129, 0.35); }
}

/* --- PREMIUM HARVEST BUTTON --- */
.farm-harvest-btn {
    background: linear-gradient(135deg, var(--fb-amber-400), var(--fb-amber-600)) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 0 var(--fb-soil-600), 0 6px 16px rgba(217, 119, 6, 0.35), 0 0 16px rgba(251, 191, 36, 0.12) !important;
    position: relative;
    overflow: hidden;
}

.farm-harvest-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
}

.farm-harvest-btn:hover {
    box-shadow: 0 3px 0 var(--fb-soil-600), 0 8px 24px rgba(217, 119, 6, 0.45), 0 0 22px rgba(251, 191, 36, 0.18) !important;
}

/* --- PREMIUM TAB CONTENT PANELS ---
   No position:relative + overflow:hidden aquí: los .tab-view son
   position:absolute y necesitan el containing block de #tab-views.
   Si el wrapper se colapsa, el panel solo mide ~66px y “no se ve nada”. */
#content-missions,
#content-rewards,
#content-staking {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: static !important;
    overflow: visible !important;
}

#content-missions::before,
#content-rewards::before,
#content-staking::before {
    content: none;
}

/* --- VIDEO CARDS PREMIUM --- */
.video-card {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: var(--fb-shadow-card);
    transition: var(--fb-transition-base);
    position: relative;
    overflow: hidden;
}

.video-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.02), transparent);
    pointer-events: none;
}

.video-card:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-3px);
}

/* --- STREAK REWARD PREMIUM --- */
#content-missions .mt-2.px-6.py-2 {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--fb-transition-base);
}

#content-missions .mt-2.px-6.py-2:hover {
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

/* --- ROULETTE MODAL PREMIUM --- */
.roulette-modal .modal-content {
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(10, 15, 30, 0.99)) !important;
    border: 1px solid rgba(251, 191, 36, 0.2);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), 0 0 60px rgba(251, 191, 36, 0.1);
    backdrop-filter: blur(20px);
}

/* --- FARMER ASSESSOR WIDGET --- */
.farmer-widget {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    animation: none !important;
}

/* --- FLOATING ACTION BUTTON --- */
.fb-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: var(--farm-z-modal);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fb-green-500), var(--fb-green-600));
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 0 var(--fb-green-800), 0 10px 30px rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    cursor: pointer;
    transition: var(--fb-transition-base);
    animation: fabPulse 4s ease-in-out infinite;
}

.fb-fab:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 0 var(--fb-green-800), 0 14px 40px rgba(16, 185, 129, 0.5);
}

.fb-fab:active {
    transform: translateY(2px);
    box-shadow: 0 3px 0 var(--fb-green-800);
}

@keyframes fabPulse {
    0%, 100% { box-shadow: 0 6px 0 var(--fb-green-800), 0 10px 30px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 6px 0 var(--fb-green-800), 0 10px 40px rgba(16, 185, 129, 0.5), 0 0 24px rgba(52, 211, 153, 0.2); }
}

/* --- SECTION HEADERS PREMIUM --- */
.game-heading {
    font-family: 'Fredoka', 'Nunito', sans-serif !important;
}

/* --- PREMIUM MODAL BACKDROPS --- */
.modal {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* --- TOAST NOTIFICATIONS PREMIUM --- */
#toast-container .toast {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(52, 211, 153, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(12px);
    border-radius: var(--fb-radius-lg);
}

/* --- SHINE BUTTON EFFECT --- */
.shine-btn {
    position: relative;
    overflow: hidden;
}

.shine-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    animation: shineEffect 4s linear infinite;
    pointer-events: none;
}

@keyframes shineEffect {
    0% { transform: translateX(-100%) rotate(45deg); }
    30%, 100% { transform: translateX(100%) rotate(45deg); }
}

/* --- ORACLE WIDGET PREMIUM --- */
.oracle-widget--hud {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(52, 211, 153, 0.15) !important;
    border-radius: var(--fb-radius-full);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* --- PREMIUM SCROLLBAR --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(52, 211, 153, 0.3);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(52, 211, 153, 0.5);
}

/* --- SELECTION COLOR --- */
::selection {
    background: rgba(52, 211, 153, 0.3);
    color: #fff;
}

/* --- FOCUS RING GLOBAL --- */
:focus-visible {
    outline: 2px solid var(--fb-green-400);
    outline-offset: 2px;
}

/* --- LOADING SKELETON --- */
@keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.fb-skeleton {
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.6) 25%, rgba(51, 65, 85, 0.6) 50%, rgba(30, 41, 59, 0.6) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--fb-radius-md);
}

/* --- ANIMATE ON SCROLL --- */
.fb-animate-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fb-animate-in.fb-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- RESPONSIVE ENHANCEMENTS --- */
@media (max-width: 768px) {
    .fb-daily-dash__stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* #live-feed-container responsive handled by style.css */

    .fb-fab {
        bottom: 1rem;
        right: 1rem;
        width: 3rem;
        height: 3rem;
    }

    .fb-daily-dash {
        padding: 1rem 1.15rem;
    }

    .fb-daily-dash__date {
        display: none;
    }
}

@media (max-width: 480px) {
    .fb-daily-dash__stats {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .fb-dash-stat {
        padding: 0.6rem 0.7rem;
    }

    .fb-dash-stat__value {
        font-size: 1.1rem;
    }
}

/* --- LIGHT MODE OVERRIDES (sólidos, sin translucidez) --- */
body.light-mode .game-topbar {
    background: linear-gradient(180deg, #ede6d8 0%, #e5ddd0 100%) !important;
    border-bottom: 1px solid #d4c8b8 !important;
}

body.light-mode .farm-stat-card,
html.light-mode .farm-stat-card {
    background: #ffffff !important;
    border: 1px solid #ddd0c0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

html.light-mode .farm-stat-card--harvest {
    background: #ffffff !important;
}

/* ── SIDEBAR COMPLETO ── */
html.light-mode .game-sidebar {
    background: linear-gradient(180deg, #ede6d8 0%, #e5ddd0 100%) !important;
    border-right: 1px solid #d4c8b8 !important;
}
html.light-mode .game-sidebar .nav-tab {
    color: #4a3a2a !important;
    border-bottom: 1px solid rgba(180, 165, 145, 0.15) !important;
}
html.light-mode .game-sidebar .nav-tab .nav-tab-label {
    color: #4a3a2a !important;
    font-weight: 600 !important;
}
html.light-mode .game-sidebar .nav-tab .nav-tab-ico {
    color: #5a4a3a !important;
    opacity: 0.75;
}
html.light-mode .game-sidebar .nav-tab.active {
    background: rgba(106, 176, 74, 0.08) !important;
    border-left: 3px solid #6ab04a !important;
}
html.light-mode .game-sidebar .nav-tab.active .nav-tab-label {
    color: #2d2418 !important;
    font-weight: 800 !important;
}
html.light-mode .game-sidebar .nav-tab.active .nav-tab-ico {
    color: #4e8d33 !important;
    opacity: 1;
}
html.light-mode .game-sidebar .nav-section-header {
    color: #8a7a6a !important;
}

/* ── SIDEBAR DIVIDERS ── */
html.light-mode .game-sidebar [class*="border-"],
html.light-mode .game-sidebar hr,
html.light-mode .game-sidebar .border-t,
html.light-mode .game-sidebar .border-b {
    border-color: #d4c8b8 !important;
}

/* ── SIDEBAR USER CARD ── */
html.light-mode .sistema-user-card {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid #d4c8b8 !important;
}
html.light-mode .sistema-user-name {
    color: #2d2418 !important;
}
html.light-mode .sistema-user-role {
    color: #6b5a48 !important;
}

/* ── HUD CHIPS ── */
html.light-mode .hud-chip {
    background: #ffffff !important;
    border: 1px solid #ddd0c0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
html.light-mode .hud-chip:hover {
    background: #fafaf7 !important;
    border-color: #c8b8a0 !important;
}
html.light-mode .hud-chip-label {
    color: #9a8a78 !important;
}
html.light-mode .hud-chip-val {
    color: #2d2418 !important;
}

/* ── BALANCE TRAY ── */
html.light-mode .hud-balance-tray {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid #ddd0c0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* ── MODAL OVERLAYS ── */
html.light-mode .fixed.inset-0,
html.light-mode [class*="modal-backdrop"] {
    background: rgba(60, 50, 40, 0.35) !important;
}
html.light-mode [class*="modal-panel"],
html.light-mode [class*="panel-"] {
    background: #ffffff !important;
    border: 1px solid #ddd0c0 !important;
    color: #2d2418 !important;
}

/* ── SHOP / BAZAAR / EXCHANGE ── */
html.light-mode .shop-item-card,
html.light-mode .market-card,
html.light-mode .exchange-rate-card {
    background: #ffffff !important;
    border: 1px solid #ddd0c0 !important;
}
html.light-mode .shop-item-card:hover,
html.light-mode .market-card:hover {
    background: #fafaf7 !important;
    border-color: rgba(106, 176, 74, 0.25) !important;
}
html.light-mode .shop-hero-cinematic,
html.light-mode .bazaar-hero-cinematic,
html.light-mode .exchange-hero-cinematic {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* ── PLOT CARDS ── */
html.light-mode .plot-card {
    background: #ffffff !important;
    border: 1px solid #ddd0c0 !important;
}
html.light-mode .plot-card:hover {
    border-color: rgba(106, 176, 74, 0.3) !important;
}

/* ── TEXT / ICON LEGIBILITY ── */
html.light-mode .text-muted,
html.light-mode .text-gray-400,
html.light-mode .text-gray-500 {
    color: #8a7a6a !important;
}
html.light-mode .text-gray-300,
html.light-mode .text-slate-300,
html.light-mode .text-slate-400 {
    color: #6b5a48 !important;
}

/* ── GAME TOOLS ROW ── */
html.light-mode .game-tools-row {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid #ddd0c0 !important;
}
html.light-mode .game-tool-btn {
    background: rgba(106, 176, 74, 0.1) !important;
    color: #3a6e25 !important;
    border: 1px solid rgba(106, 176, 74, 0.2) !important;
}

/* ── SHOP FILTERS ── */
html.light-mode .shop-filter-btn {
    background: #ffffff !important;
    color: #4a3a2a !important;
    border: 1px solid #ddd0c0 !important;
}
html.light-mode .shop-filter-btn.active {
    background: rgba(106, 176, 74, 0.1) !important;
    color: #3a6e25 !important;
    border-color: rgba(106, 176, 74, 0.3) !important;
}

/* ── SETTINGS ── */
html.light-mode .settings-panel,
html.light-mode .settings-section {
    background: #ffffff !important;
    border: 1px solid #ddd0c0 !important;
}

/* ── SCROLLBAR ── */
html.light-mode ::-webkit-scrollbar-track {
    background: #ede6d8 !important;
}
html.light-mode ::-webkit-scrollbar-thumb {
    background: #c8b8a0 !important;
}
html.light-mode ::-webkit-scrollbar-thumb:hover {
    background: #b0a090 !important;
}

/* ── SHOP CALC BUTTON ── */
html.light-mode .shop-calc-btn {
    background: #ffffff !important;
    color: #4a3a2a !important;
    border-color: #ddd0c0 !important;
}
html.light-mode .shop-calc-btn:hover {
    background: rgba(106, 176, 74, 0.08) !important;
    color: #3a6e25 !important;
}

/* ════════════════════════════════════════════════════════════
   OVERRIDES GLOBALES DE LIGHT MODE — Tailwind + Componentes
   ════════════════════════════════════════════════════════════ */

/* ── FONDOS (bg-slate / bg-gray) ── */
html.light-mode .bg-slate-900,
html.light-mode .bg-slate-900\/90,
html.light-mode .bg-slate-900\/80,
html.light-mode .bg-slate-900\/75,
html.light-mode .bg-slate-900\/70,
html.light-mode .bg-slate-900\/60,
html.light-mode .bg-slate-900\/50 {
    background: var(--farm-bg-surface) !important;
}
html.light-mode .bg-slate-950,
html.light-mode .bg-slate-950\/90,
html.light-mode .bg-slate-950\/80 {
    background: var(--farm-bg-deep) !important;
}
html.light-mode .bg-slate-800,
html.light-mode .bg-slate-800\/50 {
    background: rgba(200, 188, 170, 0.2) !important;
}
html.light-mode .bg-gray-900,
html.light-mode .bg-gray-900\/90,
html.light-mode .bg-gray-900\/80,
html.light-mode .bg-gray-900\/50 {
    background: var(--farm-bg-surface) !important;
}
html.light-mode .bg-gray-800 { background: rgba(200, 188, 170, 0.15) !important; }
html.light-mode .bg-gray-950 { background: var(--farm-bg-deep) !important; }

/* ── TEXTOS (text-slate / text-gray) ── */
html.light-mode .text-slate-100,
html.light-mode .text-slate-200 {
    color: #2d2418 !important;
}
html.light-mode .text-slate-300 {
    color: #4a3a2a !important;
}
html.light-mode .text-slate-400 {
    color: #6b5a48 !important;
}
html.light-mode .text-slate-500 {
    color: #8a7a6a !important;
}
html.light-mode .text-gray-100,
html.light-mode .text-gray-200 {
    color: #2d2418 !important;
}
html.light-mode .text-gray-300 {
    color: #4a3a2a !important;
}
html.light-mode .text-gray-400 {
    color: #6b5a48 !important;
}
html.light-mode .text-gray-500 {
    color: #8a7a6a !important;
}

/* ── TEXT WHITE (controlado: no en botones de acción) ── */
html.light-mode .text-white:not(.shine-btn):not(.shop-buy-btn):not(.game-topbar-wallet-btn):not(.farm-harvest-btn):not(.plot-btn):not([class*="bg-green-"]):not([class*="bg-emerald-"]):not([class*="bg-amber-"]):not([class*="bg-purple-"]):not([class*="bg-orange-"]):not([class*="bg-red-"]):not([class*="bg-fuchsia-"]):not([class*="bg-blue-"]) {
    color: #2d2418 !important;
}

/* ── BORDES (border-slate) ── */
html.light-mode .border-slate-700,
html.light-mode .border-slate-700\/50,
html.light-mode .border-slate-700\/60,
html.light-mode .border-slate-800,
html.light-mode .border-slate-800\/60,
html.light-mode .border-slate-800\/50 {
    border-color: #ddd0c0 !important;
}
html.light-mode .border-slate-600,
html.light-mode .border-slate-600\/50 {
    border-color: #c8b8a0 !important;
}
html.light-mode .border-white\/10,
html.light-mode .border-white\/20 {
    border-color: rgba(200, 188, 170, 0.3) !important;
}
html.light-mode .border-gray-700,
html.light-mode .border-gray-800 {
    border-color: #ddd0c0 !important;
}

/* ── BACKDROP BLUR (eliminar blur lechoso en light) ── */
html.light-mode .backdrop-blur-md,
html.light-mode .backdrop-blur-lg,
html.light-mode .backdrop-blur-xl,
html.light-mode .backdrop-blur-2xl {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── FROM-BLACK VIA / TO-TRANSPARENT GRADIENTS ── */
html.light-mode [class*="from-black"],
html.light-mode [class*="via-black"] {
    --tw-gradient-from: rgba(200, 188, 170, 0.3) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via-stops) !important;
}

/* ════════════════════════════════════════════════════════════
   OVERRIDES POR COMPONENTE (archivos específicos)
   ════════════════════════════════════════════════════════════ */

/* ── ACCOUNTS (wallet connect, perfil) ── */
html.light-mode .account-panel,
html.light-mode .account-modal,
html.light-mode .account-card {
    background: #ffffff !important;
    border-color: #ddd0c0 !important;
}

/* ── AEGIS CORE (seguridad, 2FA) ── */
html.light-mode .aegis-panel,
html.light-mode .aegis-modal {
    background: #ffffff !important;
    border-color: #ddd0c0 !important;
}

/* ── ATTACK / RAID ── */
html.light-mode .attack-panel,
html.light-mode .attack-panel-art,
html.light-mode .raid-modal-panel {
    background: #ffffff !important;
    border-color: #ddd0c0 !important;
}
html.light-mode .attack-hero-cinematic {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* ── SETTINGS PANEL ── */
html.light-mode .settings-panel {
    background: #ffffff !important;
    border-color: #ddd0c0 !important;
}
html.light-mode .settings-row-title {
    color: #2d2418 !important;
}
html.light-mode .settings-row-hint {
    color: #6b5a48 !important;
}

/* ── MODAL DROPDOWNS / POPOVERS ── */
html.light-mode .dropdown-menu,
html.light-mode .popover-panel,
html.light-mode .game-mas-grid {
    background: #ffffff !important;
    border-color: #ddd0c0 !important;
}
html.light-mode .game-mas-item {
    color: #2d2418 !important;
}
html.light-mode .game-mas-item:hover {
    background: rgba(106, 176, 74, 0.06) !important;
}

/* ── ORACLE WIDGET ── */
html.light-mode .oracle-widget--hud {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: #ddd0c0 !important;
}
html.light-mode .oracle-widget-title {
    color: #2d2418 !important;
}
html.light-mode .oracle-widget-sub {
    color: #6b5a48 !important;
}

/* ── PLANT MODAL ── */
html.light-mode .plant-modal-panel,
html.light-mode .purchase-confirm-panel,
html.light-mode .welcome-chest-panel {
    background: #ffffff !important;
    border-color: #ddd0c0 !important;
}

/* ── HUD BALANCE CHIP ICONS ── */
html.light-mode .hud-chip-ico {
    color: #5a4a3a !important;
}

/* ── TICKER / LIVE PRICE ── */
html.light-mode .ticker-bar,
html.light-mode .live-price-bar {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: #ddd0c0 !important;
}

/* ── FOOTER STATUS ── */
html.light-mode .game-footer,
html.light-mode .status-bar {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: #ddd0c0 !important;
}

/* ── NAV SECTION SEPARATORS ── */
html.light-mode .nav-section-header {
    color: #8a7a6a !important;
}

/* ── SETTINGS PILLS ── */
html.light-mode .settings-pill {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #2d2418 !important;
    border-color: #ddd0c0 !important;
}
html.light-mode .settings-pill:hover {
    background: rgba(106, 176, 74, 0.1) !important;
}
html.light-mode .settings-pill[aria-pressed="true"] {
    background: rgba(106, 176, 74, 0.15) !important;
    color: #3a6e25 !important;
    border-color: rgba(106, 176, 74, 0.3) !important;
}

/* ── AVATAR DON JOSÉ ── */
html.light-mode .sistema-user-avatar {
    border-color: rgba(107, 90, 72, 0.2) !important;
}

@keyframes sparkleFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(-5px, -5px) scale(1.2); opacity: 1; }
}

/* --- TAB TRANSITION SMOOTH --- */
.game-main-shell [id^="content-"] {
    animation: tabFadeIn 0.3s ease-out;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}