/* GLASSMORPHISM & FLAT UI DESIGN SYSTEM */
        :root { 
            --accent: #007A33; 
            --accent-hover: #005a24; 
            --accent-light: rgba(0, 122, 51, 0.15); 
            --bg-body: #f1f5f9; 
            --bg-panel: rgba(255, 255, 255, 0.85);
            --bg-input: rgba(248, 250, 252, 0.7);
            --border-color: rgba(226, 232, 240, 0.6);
            --pattern-color: #cbd5e1;
            --text-main: #1e293b; 
            --text-sub: #64748b; 
            --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.08);
            --radius-md: 20px;
            --radius-sm: 12px;
            --danger: #ef4444; 
            --orange: #f59e0b; 
            --blur-effect: blur(16px);
        }

        /* THEME: NAVY DARK */
        [data-theme="dark"] { 
            --bg-body: #0f172a; 
            --bg-panel: rgba(30, 41, 59, 0.85);
            --bg-input: rgba(15, 23, 42, 0.7);
            --border-color: rgba(51, 65, 85, 0.6);
            --pattern-color: #1e293b;
            --text-main: #f8fafc; 
            --text-sub: #94a3b8; 
            color-scheme: dark; 
        }

        /* THEME: DARK GREY */
        [data-theme="dark-grey"] { 
            --bg-body: #121212; 
            --bg-panel: rgba(30, 30, 30, 0.85);
            --bg-input: rgba(45, 45, 45, 0.7);
            --border-color: rgba(64, 64, 64, 0.6);
            --pattern-color: #333333;
            --text-main: #f5f5f5; 
            --text-sub: #a3a3a3; 
            color-scheme: dark; 
        }

        /* THEME: PITCH BLACK (AMOLED) */
        [data-theme="pitch-black"] { 
            --bg-body: #000000; 
            --bg-panel: rgba(10, 10, 10, 0.85);
            --bg-input: rgba(20, 20, 20, 0.7);
            --border-color: rgba(38, 38, 38, 0.6);
            --pattern-color: #1a1a1a;
            --text-main: #ffffff; 
            --text-sub: #888888; 
            color-scheme: dark; 
        }
        
        /* Auto Dark Map & Crisp Prevention */
        [data-theme="dark"] .leaflet-layer, [data-theme="dark"] .leaflet-control-zoom-in, [data-theme="dark"] .leaflet-control-zoom-out, [data-theme="dark"] .leaflet-control-attribution,
        [data-theme="dark-grey"] .leaflet-layer, [data-theme="dark-grey"] .leaflet-control-zoom-in, [data-theme="dark-grey"] .leaflet-control-zoom-out, [data-theme="dark-grey"] .leaflet-control-attribution,
        [data-theme="pitch-black"] .leaflet-layer, [data-theme="pitch-black"] .leaflet-control-zoom-in, [data-theme="pitch-black"] .leaflet-control-zoom-out, [data-theme="pitch-black"] .leaflet-control-attribution { 
            filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%); transition: filter 0.3s; 
        }

        .leaflet-container .leaflet-tile-container img {
            image-rendering: -webkit-optimize-contrast !important;
            image-rendering: crisp-edges !important;
        }
        
        /* General & Patterns */
        body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; color: var(--text-main); min-height: 100vh; overflow-x: hidden; background-color: var(--bg-body); transition: background-color 0.3s, color 0.3s; }
        body.pattern-dots { background-image: radial-gradient(var(--pattern-color) 1.5px, transparent 1.5px); background-size: 24px 24px; }
        body.pattern-lines { background-image: repeating-linear-gradient(45deg, var(--pattern-color) 0, var(--pattern-color) 1.5px, transparent 0, transparent 50%); background-size: 24px 24px; }
        body.pattern-grid { background-image: linear-gradient(var(--pattern-color) 1px, transparent 1px), linear-gradient(90deg, var(--pattern-color) 1px, transparent 1px); background-size: 24px 24px; }
        body.pattern-floral { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.83-2.022 2.022-2.148-2.148 1.488-1.488 1.852.784zM10.873 60l-.83-.83 2.022-2.022 2.148 2.148-1.488 1.488-1.852-.784zM60 54.627l-.83.83-2.022-2.022 2.148-2.148 1.488 1.488-.784 1.852zM0 10.873l.83-.83 2.022 2.022-2.148 2.148-1.488-1.488.784-1.852zM52.07 0l2.36 2.36-2.147 2.147-2.023-2.023L51.748 1.01 52.07 0zM7.93 60l-2.36-2.36 2.147-2.147 2.023 2.023L8.252 58.99 7.93 60zM60 52.07l-2.36 2.36-2.147-2.147 2.023-2.023L58.99 51.748 60 52.07zM0 7.93l2.36-2.36 2.147 2.147-2.023 2.023L1.01 8.252 0 7.93z' fill='var(--pattern-color)' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); }

        .hidden { display: none !important; }

        /* BENTO UI GRID SYSTEM */
        .bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }
        .bento-box {
            background: var(--bg-panel); backdrop-filter: var(--blur-effect); -webkit-backdrop-filter: var(--blur-effect);
            border: 1px solid var(--border-color); border-radius: 24px; padding: 16px;
            box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: center;
            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s; position: relative; overflow: hidden;
        }
        .bento-box:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--shadow-md); }
        .span-2 { grid-column: span 2; }
        
        /* Denyutan Kotak Jam Masa */
        @keyframes pulse-box-green {
            0% { box-shadow: 0 0 0 0 rgba(0, 122, 51, 0.6); border-color: var(--accent); }
            70% { box-shadow: 0 0 0 10px rgba(0, 122, 51, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 122, 51, 0); border-color: var(--accent); }
        }
        @keyframes pulse-box-red {
            0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); border-color: var(--danger); }
            70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
            100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); border-color: var(--danger); }
        }
        .pulse-green-box { animation: pulse-box-green 2s infinite; border: 2px solid var(--accent) !important; }
        .pulse-red-box { animation: pulse-box-red 2s infinite; border: 2px solid var(--danger) !important; }

        /* Map Popup Mode Anti-Blur CSS */
        #mapBentoBox { transition: all 0.2s ease; }
        #mapBentoBox.popup-mode {
            position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
            margin: auto !important; width: 90vw !important; height: 60vh !important; max-width: 440px; z-index: 4000 !important;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important; transform: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        #mapBackdrop {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 3999; cursor: pointer;
        }

        /* Glassmorphism Panels */
        .flat-panel, .overlay-top, .floating-header, .modal-content { 
            background: var(--bg-panel); backdrop-filter: var(--blur-effect); -webkit-backdrop-filter: var(--blur-effect);
            border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); 
            padding: 24px; box-sizing: border-box; text-align: center; width: 92%; max-width: 440px; transition: all 0.3s ease; 
        }
        .center-card { position: relative; z-index: 500; margin: 90px auto 100px auto; padding-bottom: 24px; box-sizing: border-box; }
        
        .cal-avatars-box { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: auto; width: 100%; padding-bottom: 2px; }
        .cal-av-single { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
        .cal-av-multi { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); }
        
        /* Header & Navigation */
        .floating-header { padding: 10px 16px; position: fixed; top: 15px; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-md); z-index: 1000; border-radius: 50px; }
        .logo-koje { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; } .logo-koje .ko { color: var(--accent); } .logo-koje .je { color: var(--text-main); }
        .profile-pill { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 10px; background: rgba(0,0,0,0.03); border-radius: 50px; border: 1px solid var(--border-color); transition: 0.2s; font-size: 13px; font-weight: 600;}
        [data-theme="dark"] .profile-pill, [data-theme="dark-grey"] .profile-pill, [data-theme="pitch-black"] .profile-pill { background: rgba(255,255,255,0.05); }
        .profile-pill:hover { box-shadow: var(--shadow-md); }
        .profile-pill img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: white;}
        
        .overlay-top { position: fixed; top: 85px; left: 50%; transform: translateX(-50%); z-index: 100; padding: 20px;}
        .overlay-bottom { position: absolute; top: 95px; left: 50%; transform: translateX(-50%); z-index: 100; width: 92%; max-width: 440px; padding-bottom: 120px;}
        
        /* Inputs & Sleek Buttons */
        .input-group { margin-bottom: 15px; text-align: left; } 
        .input-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-sub); margin-bottom: 6px; }
        .input-group input, .input-group select { width: 100%; padding: 12px 14px; background: rgba(0,0,0,0.03); border: 1px solid transparent; border-radius: var(--radius-sm); box-sizing: border-box; font-size: 14px; outline: none; font-family: inherit; color: var(--text-main); transition: all 0.3s ease;}
        [data-theme="dark"] .input-group input, [data-theme="dark-grey"] .input-group input, [data-theme="pitch-black"] .input-group input,
        [data-theme="dark"] .input-group select, [data-theme="dark-grey"] .input-group select, [data-theme="pitch-black"] .input-group select { background: rgba(255,255,255,0.05); }
        .input-group input:focus, .input-group select:focus { background: transparent; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); }
        
        .btn-main { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; font-family: inherit; box-shadow: 0 4px 15px var(--accent-light);}
        .btn-main:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 20px var(--accent-light); }
        .btn-main:active { transform: scale(0.96); }
        .btn-main:disabled { background: var(--border-color); color: var(--text-sub); cursor: not-allowed; box-shadow: none; transform: none;}
        .btn-out { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); }
        .btn-out:hover { box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4); }
        
        /* Typography & Data */
        .time-display { font-size: 56px; color: var(--accent); margin:0; font-weight:800; letter-spacing: -2px; line-height:1; text-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .date-display { font-size: 13px; color: var(--text-sub); font-weight: 500; margin: 8px 0 20px 0; }
        .distance-container { display: flex; justify-content: center; align-items: center; gap: 10px;}
        .distance-txt { font-size: 13px; font-weight: 700; color: white; background: var(--accent); padding: 6px 16px; border-radius: 50px; display: inline-block; word-wrap: break-word; box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
        .distance-txt.far { background: var(--orange); }
        .work-timer { margin-top:12px; font-size:13px; font-weight:600; color: var(--accent); background: var(--accent-light); padding:8px 16px; border-radius:50px; display:inline-block;}
        .cooldown-box { font-size: 13px; color: white; font-weight: 600; margin-bottom: 15px; background: var(--danger); padding: 12px; border-radius: var(--radius-sm); }
        
        /* Map Avatar & Blinking Texts */
        @keyframes blink-text { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
        .blink-danger { animation: blink-text 1s infinite; }
        
        .custom-avatar-marker { background: none; border: none; }
        .avatar-container { border-radius: 50%; overflow: hidden; background: white; transition: 0.3s; }
        .avatar-container img { width: 100%; height: 100%; object-fit: cover; }
        .blink-orange { border: 2px solid var(--orange); animation: pulse-orange 1.5s infinite; }
        @keyframes pulse-orange { 0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(243, 156, 18, 0); } 100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); } }
        
        /* History & Task Cards */
        .history-item { background: rgba(0,0,0,0.02); border: 1px solid var(--border-color); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 12px; text-align: left; }
        [data-theme="dark"] .history-item, [data-theme="dark-grey"] .history-item, [data-theme="pitch-black"] .history-item { background: rgba(255,255,255,0.02); }
        .task-card { background: rgba(0,0,0,0.02); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 16px; text-align: left; margin-bottom: 12px; box-shadow: var(--shadow-sm);}
        [data-theme="dark"] .task-card, [data-theme="dark-grey"] .task-card, [data-theme="pitch-black"] .task-card { background: rgba(255,255,255,0.02); }
        .task-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
        .task-title { font-weight: 700; color: var(--text-main); font-size: 14px; margin-bottom: 6px; }
        .task-meta { font-size: 12px; color: var(--text-sub); margin-top: 10px; line-height: 1.5; }
        .blink-active-task { border-color: var(--orange) !important; border-left: 4px solid var(--orange) !important;}
        
        /* Floating iOS Nav Bottom */
        .nav-bottom { 
            position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 92%; max-width: 400px; 
            background: var(--bg-panel); backdrop-filter: var(--blur-effect); -webkit-backdrop-filter: var(--blur-effect);
            display: flex; border: 1px solid var(--border-color); border-radius: 50px; box-shadow: var(--shadow-md);
            z-index: 1000; padding: 8px 16px; box-sizing: border-box; justify-content: space-around;
        }
        .nav-bottom button { flex: 0 1 auto; padding: 12px; background: transparent; border: none; color: var(--text-sub); cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; border-radius: 50px; }
        .nav-bottom button:hover { color: var(--accent); }
        .nav-bottom button.active { color: var(--accent); background: var(--accent-light); margin: 0; }
        
        @keyframes alertPulse {
            0% { color: var(--danger); transform: scale(1); background: rgba(239, 68, 68, 0.1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
            50% { color: var(--danger); transform: scale(1.1); background: rgba(239, 68, 68, 0.2); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
            100% { color: var(--danger); transform: scale(1); background: rgba(239, 68, 68, 0.1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
        }
        .nav-alert-active { animation: alertPulse 1.5s infinite; color: var(--danger) !important; }

        /* Sub Tabs System */
        .sub-nav-tabs { display: flex; flex-wrap: wrap; background: rgba(0,0,0,0.03); padding: 4px; border-radius: var(--radius-sm); margin-bottom: 20px; border: 1px solid transparent; gap:4px; }
        [data-theme="dark"] .sub-nav-tabs, [data-theme="dark-grey"] .sub-nav-tabs, [data-theme="pitch-black"] .sub-nav-tabs { background: rgba(255,255,255,0.05); }
        .sub-tab-btn { flex: 1; min-width: 60px; padding: 8px 0; border: none; background: transparent; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-sub); cursor: pointer; transition: all 0.2s; }
        .sub-tab-btn.active { background: var(--bg-panel); color: var(--accent); box-shadow: var(--shadow-sm); }
        .filter-btn-group { display: flex; gap: 4px; margin-bottom: 15px; }
        .filter-btn { flex: 1; padding: 8px; font-size: 11px; border-radius: 50px; border: 1px solid var(--border-color); background: transparent; color: var(--text-sub); cursor: pointer; transition: 0.2s; font-weight: 600; }
        .filter-btn.active { background: var(--text-main); color: var(--bg-body); border-color: var(--text-main); }

        /* Calendar & Chat */
        .leave-ticker-container { height: 100px; overflow-y: auto; background: rgba(0,0,0,0.02); border-radius: var(--radius-sm); margin-bottom: 15px; border: 1px solid var(--border-color); padding: 5px;}
        [data-theme="dark"] .leave-ticker-container, [data-theme="dark-grey"] .leave-ticker-container, [data-theme="pitch-black"] .leave-ticker-container { background: rgba(255,255,255,0.02); }
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px;}
        .cal-header { font-size: 11px; font-weight: 600; color: var(--text-sub); padding: 4px 0; }
        .cal-day { aspect-ratio: 1 / 1; background: rgba(0,0,0,0.02); border: 1px solid var(--border-color); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 4px; cursor: pointer; overflow: hidden; position: relative; }
        [data-theme="dark"] .cal-day, [data-theme="dark-grey"] .cal-day, [data-theme="pitch-black"] .cal-day { background: rgba(255,255,255,0.02); }
        .cal-date-num { font-size: 11px; font-weight: 600; color: var(--text-main); align-self: flex-start; line-height: 1; margin-bottom: 2px; }
        .cal-day.today { border-color: var(--accent); background: var(--accent-light); }
        .cal-day.today .cal-date-num { color: var(--accent); font-weight: 800;}
        .cal-day.holiday .cal-date-num { color: var(--danger); }

        .chat-row { display: flex; gap: 10px; margin-bottom: 15px; align-items: flex-start; }
        .chat-row.mine { flex-direction: row-reverse; } 
        .chat-avatar { width: 32px; height: 32px; min-width: 32px; max-width: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); background: white; }
        .chat-bubble { max-width: 72%; padding: 12px 14px; border-radius: 16px; font-size: 13px; position: relative; word-break: break-word; text-align: left; }
        .chat-other { background: rgba(0,0,0,0.04); border: 1px solid var(--border-color); border-top-left-radius: 4px; color: var(--text-main); }
        [data-theme="dark"] .chat-other, [data-theme="dark-grey"] .chat-other, [data-theme="pitch-black"] .chat-other { background: rgba(255,255,255,0.05); }
        .chat-mine { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: white; border-top-right-radius: 4px; box-shadow: 0 4px 10px var(--accent-light); }
        .chat-name { font-size: 11px; font-weight: 600; color: var(--accent); margin-bottom: 4px; display: block; }
        .chat-mine .chat-name { display: none; }
        .chat-time { font-size: 10px; opacity: 0.7; margin-top: 6px; text-align: right; display: block; }

        /* Modals */
        .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 3000; display: flex; justify-content: center; align-items: center; }
        .modal-content { padding: 24px; border-radius: var(--radius-md); width: 92%; max-width: 440px; box-shadow: var(--shadow-md); max-height: 85vh; overflow-y: auto; scrollbar-width: thin; box-sizing: border-box; }

        .av-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-color); scrollbar-width: none; }
        .av-tabs::-webkit-scrollbar { display: none; }
        .av-tab-btn { padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 50px; border: 1px solid var(--border-color); background: transparent; color: var(--text-main); cursor: pointer; white-space: nowrap; transition: 0.2s; }
        .av-tab-btn.active { background: var(--text-main); color: var(--bg-body); border-color: var(--text-main); }
        .scrollable-avatar-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 10px; max-height: 200px; overflow-y: auto; padding: 12px; background: rgba(0,0,0,0.03); border-radius: var(--radius-sm); border: 1px solid var(--border-color); justify-items: center; }
        [data-theme="dark"] .scrollable-avatar-box, [data-theme="dark-grey"] .scrollable-avatar-box, [data-theme="pitch-black"] .scrollable-avatar-box { background: rgba(255,255,255,0.05); }
        .avatar-opt { width: 45px; height: 45px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; background: white; object-fit: cover; }
        .avatar-opt:hover { border-color: var(--accent); }

        /* Animasi Raksasa Peliharaan KOJE */
        @keyframes pet-bounce-anim {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        .pet-bounce { animation: pet-bounce-anim 2s infinite ease-in-out; }
        
        .pet-dead {
            filter: grayscale(100%) sepia(30%) hue-rotate(-50deg) brightness(80%); 
            animation: none !important;
            transform: scaleY(-1) !important;
            opacity: 0.7;
        }
        .pet-sick {
            filter: sepia(60%) hue-rotate(60deg) saturate(200%);
            animation: pet-bounce-anim 4s infinite ease-in-out; /* lambat sikit sebab sakit */
        }

        .arena-row {
            display: flex; justify-content: space-between; align-items: center; 
            padding: 10px; border-bottom: 1px solid var(--border-color); background: rgba(0,0,0,0.02);
            border-radius: 8px; margin-bottom: 8px;
        }
        
        /* Animasi Berlawan (Bergegar) */
        @keyframes fight-anim {
            0% { transform: translateX(0) scale(1); filter: hue-rotate(0deg) contrast(1.2); }
            25% { transform: translateX(-15px) scale(1.2) rotate(-10deg); filter: hue-rotate(45deg); }
            50% { transform: translateX(15px) scale(1.2) rotate(10deg); filter: hue-rotate(-45deg); }
            75% { transform: translateX(-15px) scale(1.1) rotate(-5deg); filter: hue-rotate(90deg); }
            100% { transform: translateX(0) scale(1); filter: hue-rotate(0deg); }
        }
        .pet-fighting { animation: fight-anim 0.4s infinite !important; }

        /* Animasi Memancing (Tarik Joran) */
        @keyframes fishing-anim {
            0% { transform: translateY(0) rotate(0); filter: brightness(80%); }
            50% { transform: translateY(-10px) rotate(5deg); filter: brightness(110%); }
            100% { transform: translateY(0) rotate(0); filter: brightness(80%); }
        }
        .pet-fishing { animation: fishing-anim 1.5s infinite !important; }
   
   /* Animasi Memancing Baru (Pop-up) */
@keyframes rod-shake-light {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
@keyframes rod-shake-hard {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(20deg) scale(1.15); filter: drop-shadow(0 0 10px rgba(239,68,68,0.8)); }
    50% { transform: rotate(-20deg) scale(1.15); }
    75% { transform: rotate(25deg) scale(1.2); }
    100% { transform: rotate(-25deg) scale(1); }
}
.rod-light { animation: rod-shake-light 0.5s infinite; }
.rod-hard { animation: rod-shake-hard 0.15s infinite; color: #ef4444; }

@keyframes live-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; color: #ef4444; }
    100% { opacity: 1; }
}
.live-indicator { animation: live-pulse 1.5s infinite; font-weight: bold; }