/* 移除天空渐变，背景色将与草地颜色同步，形成无边界的大地 */



        body { margin: 0; overflow: hidden; background-color: #8bc34a; transition: background-color 1s; touch-action: none; font-family: 'Segoe UI', sans-serif; }



        canvas {
            display: block;
            outline: none;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 0 !important;
        }

        #ui-layer {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            pointer-events: none !important;
        }

        /* 确保 ui-layer 穿透时，其内部所有交互控件与菜单恢复响应 */
        #ui-layer button,
        #ui-layer a,
        #ui-layer input,
        #ui-layer select,
        #ui-layer textarea,
        #ui-layer [role="button"],
        #ui-layer [onclick],
        #ui-layer .modal-overlay,
        #ui-layer .modal-content,
        #ui-layer .sidebar-toggle-btn,
        #ui-layer .left-sidebar-drawer,
        #ui-layer #top-right-ui,
        #ui-layer #top-right-ui button,
        #ui-layer #scene-nav-banner,
        #ui-layer #scene-nav-banner button,
        #ui-layer #btn-return-farm-top,
        #ui-layer #visiting-banner,
        #ui-layer #player-profile .avatar-wrapper,
        #ui-layer #toolbar-wrapper,
        #ui-layer .item-card,
        #ui-layer .action-tab,
        #ui-layer .tool-card {
            pointer-events: auto !important;
        }



        



        #player-profile { position: absolute; top: 35px; left: 15px; display: flex; align-items: center; pointer-events: none; z-index: 100; }



        



        .avatar-wrapper { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; margin-right: 12px; cursor: pointer; pointer-events: auto !important; }



        .avatar-wrapper:hover .avatar-circle { transform: scale(1.06); }



        .avatar-wrapper:active .avatar-circle { transform: scale(0.96); }



        



        .avatar-circle { 



            width: 68px; height: 68px; border-radius: 50%; 



            background: #c3b1e1; overflow: visible; position: relative; 



            border: 4px solid transparent; 



            box-shadow: 0 4px 10px rgba(0,0,0,0.4); 



            transition: all 0.25s; 



            cursor: pointer; pointer-events: auto !important;



        }



        .img-container { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }



        .img-container img { width: 100%; height: 100%; object-fit: cover; }



        



        .level-badge { 



            color: white; font-weight: bold; font-size: 14px; 



            padding: 2px 14px; border-radius: 12px; 



            border: 2px solid rgba(255,255,255,0.8); 



            margin-top: -12px; z-index: 11; 



            box-shadow: 0 2px 6px rgba(0,0,0,0.6); 



            transition: all 0.5s; 



            text-shadow: 1px 1px 1px rgba(0,0,0,0.8);



            background: #7f8c8d;



        }



        /* Base Frame Colors & Badges (All Tiers) */



        .tier-1 .avatar-circle, .tier-2 .avatar-circle { border-color: #aeb6bf; }



        .tier-1 .level-badge, .tier-2 .level-badge { background: #7f8c8d; }



        .tier-3 .avatar-circle, .tier-4 .avatar-circle { border-color: #e59866; }



        .tier-3 .level-badge, .tier-4 .level-badge { background: #ba4a00; }



        .tier-5 .avatar-circle, .tier-6 .avatar-circle { border-color: #f2f3f4; }



        .tier-5 .level-badge, .tier-6 .level-badge { background: #95a5a6; }



        .tier-7 .avatar-circle, .tier-8 .avatar-circle { border-color: #f4d03f; }



        .tier-7 .level-badge, .tier-8 .level-badge { background: #b7950b; }



        .tier-9 .avatar-circle, .tier-10 .avatar-circle { border-color: #4dd0e1; }



        .tier-9 .level-badge, .tier-10 .level-badge { background: #00838f; }



        /* 单数等级 (1, 3, 5, 7, 9, 11, 13, 15, 17, 19): 纯边框，无发光，无特效 */



        .tier-1 .avatar-circle, .tier-3 .avatar-circle, .tier-5 .avatar-circle, 



        .tier-7 .avatar-circle, .tier-9 .avatar-circle, .tier-11 .avatar-circle, 



        .tier-13 .avatar-circle, .tier-15 .avatar-circle, .tier-17 .avatar-circle, 



        .tier-19 .avatar-circle { 



            border-width: 5px; 



            box-shadow: none !important; 



        }



        .tier-1 .avatar-circle::before, .tier-1 .avatar-circle::after,



        .tier-3 .avatar-circle::before, .tier-3 .avatar-circle::after,



        .tier-5 .avatar-circle::before, .tier-5 .avatar-circle::after,



        .tier-7 .avatar-circle::before, .tier-7 .avatar-circle::after,



        .tier-9 .avatar-circle::before, .tier-9 .avatar-circle::after,



        .tier-11 .avatar-circle::before, .tier-11 .avatar-circle::after,



        .tier-13 .avatar-circle::before, .tier-13 .avatar-circle::after,



        .tier-15 .avatar-circle::before, .tier-15 .avatar-circle::after,



        .tier-17 .avatar-circle::before, .tier-17 .avatar-circle::after,



        .tier-19 .avatar-circle::before, .tier-19 .avatar-circle::after { 



            display: none !important; 



            content: none !important; 



        }



        /* 双数等级 (2, 4, 6, 8, 10, 12, 14, 16, 18, 20): 特效与发光 */



        .tier-2 .avatar-circle { border-width: 6px; box-shadow: 0 0 10px #95a5a6; }



        .tier-2 .avatar-circle::before { content: '⚙️'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 18px; filter: grayscale(1); z-index: 10; }



        .tier-4 .avatar-circle { border-width: 6px; box-shadow: 0 0 15px #d35400; }



        .tier-4 .avatar-circle::before { content: '🔥'; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 20px; z-index: 10; }



        .tier-6 .avatar-circle { border-width: 6px; box-shadow: 0 0 15px #bdc3c7; }



        .tier-6 .avatar-circle::before { content: ''; position: absolute; top: -15%; left: -15%; width: 130%; height: 130%; border-radius: 50%; border: 3px dashed #ecf0f1; pointer-events: none; animation: spin 8s linear infinite; }



        .tier-8 .avatar-circle { border-width: 6px; box-shadow: 0 0 25px #f1c40f; }



        .tier-8 .avatar-circle::after { content: '🌿'; position: absolute; left: -14px; top: 0px; font-size: 22px; transform: scaleX(-1) rotate(-15deg); filter: hue-rotate(60deg) brightness(2); pointer-events: none; z-index: 0; }



        .tier-8 .avatar-circle::before { content: '🌿'; position: absolute; right: -14px; top: 0px; font-size: 22px; transform: rotate(-15deg); filter: hue-rotate(60deg) brightness(2); pointer-events: none; z-index: 0; }



        .tier-10 .avatar-circle { border-width: 6px; box-shadow: 0 0 40px #00e5ff; }



        .tier-10 .level-badge { box-shadow: 0 0 15px #00e5ff; text-shadow: 0 0 5px white; }



        .tier-10 .avatar-circle::before { content: '👑'; position: absolute; top: -35px; left: 50%; transform: translateX(-50%); font-size: 38px; filter: drop-shadow(0 0 8px #00e5ff); z-index: 10; }



        



        @keyframes spin { 100% { transform: rotate(360deg); } }



        @keyframes pulse { 50% { opacity: 0.5; transform: scale(1.1); } }



        /* 面板数据区无背景，添加强文字阴影 */



        .stat-tail { display: flex; flex-direction: column; gap: 8px; justify-content: center; pointer-events: auto; }



        .stat-row { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: bold; color: white; text-shadow: 1px 1px 3px rgba(0,0,0,0.8), -1px -1px 2px rgba(0,0,0,0.8); }



        .env-text { color: #81d4fa; font-size: 13px; } 



        .power { color: #ffca28; }



        



        .exp-row { display: flex; align-items: center; gap: 8px; }



        .exp-bar-container { width: 100px; height: 16px; background: rgba(0,0,0,0.6); border-radius: 8px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 2px 5px rgba(0,0,0,0.5); }



        .exp-bar { height: 100%; background: linear-gradient(90deg, #00b4db, #0083b0); width: 0%; transition: width 0.3s; }



        .exp-text { position: absolute; top: 0; left: 0; width: 100%; text-align: center; font-size: 10px; line-height: 16px; color: white; text-shadow: 1px 1px 1px black; font-weight: bold; }



        



        .btn-level-up { background: #7f8c8d; color: #bdc3c7; border: 1px solid #555; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: bold; cursor: not-allowed; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.5);}



        .btn-level-up.ready { background: #f1c40f; color: #8e44ad; border-color: #f39c12; cursor: pointer; box-shadow: 0 0 10px #f1c40f; animation: pulse 1.5s infinite; }



        .btn-env-up { background: #4CAF50; color: white; border: 1px solid #2E7D32; border-radius: 5px; padding: 2px 8px; font-size: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.5);}



        .btn-env-up.disabled { background: #757575; color: #bdbdbd; border-color: #424242; cursor: not-allowed; }



        /* ================= 其他 UI ================= */



        



        



        #save-status { position: absolute; top: 150px; left: 15px; color: #ffeb3b; font-size: 14px; font-weight: bold; text-shadow: 1px 1px 2px black; pointer-events: none;}



        



        #btn-quests:hover { transform: scale(1.05); }



        



        #btn-mastery:hover { transform: scale(1.05); }



        #toast-msg { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: white; padding: 12px 25px; border-radius: 20px; font-size: 16px; opacity: 0; transition: opacity 0.3s; pointer-events: none; font-weight: bold; z-index: 100000; text-align: center; line-height: 1.4; }



        #floating-ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none !important; overflow: hidden; z-index: 50; }
        .floating-timer { pointer-events: none !important; }



        .floating-timer { position: absolute; transform: translate(-50%, -50%); background: rgba(0,0,0,0.72); color: #fff; padding: 1.5px 5px; border-radius: 6px; font-size: 9px; font-weight: bold; border: 1px solid rgba(255,255,255,0.35); white-space: nowrap; text-shadow: 1px 1px 1px black; display: none; letter-spacing: -0.2px; line-height: 1.1; }



        @keyframes orderBadgePulse {



            0% { transform: scale(1); box-shadow: 0 0 3px rgba(255, 23, 68, 0.6); }



            50% { transform: scale(1.08); box-shadow: 0 0 8px rgba(255, 23, 68, 0.95); }



            100% { transform: scale(1); box-shadow: 0 0 3px rgba(255, 23, 68, 0.6); }



        }



        .order-seed-badge {



            animation: orderBadgePulse 1.8s infinite ease-in-out;



        }



        /* ================= 商店工具栏 (含浇水施肥) ================= */



        #shop-toolbar { }



        



        .tools-panel { display: flex; gap: 6px; padding-right: 8px; border-right: 2px dashed #8b4513; flex-shrink: 0;}



        .tool-card { background: #fdf5e6; border: 2px solid #a0522d; border-radius: 6px; width: 45px; height: 95px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: 0.1s; font-size: 12px; font-weight: bold; color: #3e2723; text-align: center; box-shadow: inset 0 0 5px rgba(0,0,0,0.1);}



        .tool-card.active { border-color: #2196F3; background: #e3f2fd; transform: translateY(-5px); box-shadow: 0 5px 10px rgba(0,0,0,0.4); border-width: 3px; color: #1565c0;}



        .tool-card .icon { font-size: 24px; margin-bottom: 2px; }



        .tool-card .cost { font-size: 10px; color: #c62828; margin-top: 2px; line-height: 1.1; font-weight: bold;}



        .shop-grid { display: flex; gap: 6px; justify-content: flex-start; }



        .shop-nav { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;}



        .shop-nav button { background: #8b4513; color: #fdf5e6; border: 2px solid #5c3a21; border-radius: 5px; width: 32px; height: 32px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 2px 4px rgba(0,0,0,0.4); }



        .shop-nav button:active { background: #5c3a21; transform: translateY(1px); box-shadow: none; }



        .shop-nav button:disabled { opacity: 0.4; cursor: not-allowed; }



        .seed-card { background: #fdf5e6; border: 2px solid #a0522d; border-radius: 6px; width: 60px; height: 85px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: transform 0.1s, opacity 0.3s; box-shadow: inset 0 0 8px rgba(0,0,0,0.1); flex-shrink: 0;}



        .seed-card.active { border-color: #4CAF50; transform: translateY(-5px); box-shadow: 0 5px 10px rgba(0,0,0,0.4); background: #ffffff; border-width: 3px;}



        .seed-card .crop-name { font-size: 9.5px; font-weight: bold; color: #5d4037; margin-top: -3px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56px; line-height: 1.1; text-align: center; }



        .seed-card .icon { font-size: 24px; filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); }



        .seed-card .price { font-size: 11px; color: #c62828; font-weight: bold; margin-top: 2px; text-align: center; line-height:1;}



        .seed-card .detail { font-size: 10px; color: #4e342e; font-weight: bold; margin-top: 1px; line-height:1.1; text-align: center;}



        



        .seed-card.locked { background: #9e9e9e; border-color: #616161; }



        .seed-card.locked .icon { filter: grayscale(1); opacity: 0.5; }



        .seed-card.locked .price, .seed-card.locked .detail { display: none; }



        .lock-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; z-index: 5; flex-direction: column; text-align: center; text-shadow: 1px 1px 2px black; border-radius: 4px;}



        /* ================= 说明弹窗 ================= */



        .modal-overlay { 



            position: fixed; 



            top: 0; 



            left: 0; 



            right: 0; 



            bottom: 0; 



            width: 100%; 



            height: 100%; 



            height: 100dvh; 



            background: rgba(0,0,0,0.7); 



            z-index: 1000; 



            display: flex; 



            align-items: center; 



            justify-content: center; 



            backdrop-filter: blur(4px); 



            -webkit-backdrop-filter: blur(4px); 



            box-sizing: border-box; 



        }



        .modal-content { background: #fdf5e6; border: 4px solid #8b4513; border-radius: 12px; width: 95%; max-width: 500px; max-height: 85%; overflow-y: auto; padding: 15px 20px; position: relative; color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.8); pointer-events: auto;}



        .modal-close { position: absolute; top: 10px; right: 15px; background: transparent; border: none; font-size: 28px; font-weight: bold; color: #d32f2f; cursor: pointer; }



        .modal-content h2 { margin-top: 0; text-align: center; color: #aaa; padding-bottom: 0px; font-size: 20px;}



        .modal-tabs { display: flex; border-bottom: 2px solid #deb887; margin-bottom: 15px; margin-top: 15px;}



        .tab-btn { flex: 1; padding: 10px 5px; background: none; border: none; font-size: 15px; font-weight: bold; color: #aaa; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s;}



        .tab-btn.active { border-bottom-color: #d35400; color: #d35400; }



        .tab-content { display: none; }



        .tab-content.active { display: block; animation: fadeIn 0.3s ease; }



        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



        .help-section h3 { color: #2e7d32; margin-bottom: 5px; font-size: 15px; margin-top:0;}



        .help-section p { font-size: 13px; line-height: 1.5; margin-top: 0; color: #ccc; margin-bottom: 15px;}



        .data-table { width: 100%; border-collapse: collapse; font-size: 11px; text-align: center; margin-bottom: 15px; }



        .data-table th { background: #deb887; padding: 8px 2px; border: 1px solid rgba(255,255,255,0.2); color: #5c3a21; font-weight: bold;}



        .data-table td { padding: 6px 2px; border: 1px solid rgba(255,255,255,0.2); color: #fff;}



        .data-table tr:nth-child(even) { background: rgba(222, 184, 135, 0.3); }



        .tier-preview-list { display: flex; flex-wrap: wrap; justify-content: space-around; margin-top: 20px; margin-bottom: 5px; }



        .tier-item { width: 45%; display: flex; flex-direction: column; align-items: center; transform: scale(0.85); transform-origin: top center; height: 110px; margin-bottom: 10px; }



        .tier-item .avatar-circle { pointer-events: none; }



        .tier-column-header { display: flex; justify-content: space-around; font-size: 12px; font-weight: bold; color: #aaa; margin-top: 15px; margin-bottom: -10px;}



        /* ================= 商店工具栏动态等级彻底重构 ================= */



        #shop-toolbar {



            display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 8px;



            transition: all 0.5s; margin-bottom: 5px; position: relative; pointer-events: auto;



            /* 默认样式 */



            background: #d2a679; border: 4px solid #8b4513; border-radius: 12px; box-shadow: 0 8px 15px rgba(0,0,0,0.5);



        }



        



        /* 废铁/实木 (方形稳重) */



        #shop-toolbar.tier-1 { background: #cfd8dc; border: 4px solid #78909c; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }



        #shop-toolbar.tier-2 { background: #b0bec5; border: 4px solid #546e7a; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.5), inset 0 0 10px #263238; }



        /* 青铜/红铜 (圆角，暖色) */



        #shop-toolbar.tier-3 { background: #fbe9e7; border: 4px solid #d84315; border-radius: 12px; }



        #shop-toolbar.tier-4 { background: #ffccbc; border: 4px solid #bf360c; border-radius: 12px; box-shadow: 0 0 15px #ff5722, inset 0 0 10px #ff5722; }



        /* 白银/精钢 (超大圆角，未来感) */



        #shop-toolbar.tier-5 { background: #eceff1; border: 3px solid #90a4ae; border-radius: 20px; box-shadow: inset 0 0 15px rgba(255,255,255,1); }



        #shop-toolbar.tier-6 { background: #cfd8dc; border: 3px dashed #607d8b; border-radius: 20px; box-shadow: 0 0 20px #03a9f4; }



        /* 黄金/皇家 (双层边框，华丽) */



        #shop-toolbar.tier-7 { background: #fff8e1; border: 6px double #ffb300; border-radius: 15px; }



        #shop-toolbar.tier-8 { background: #ffecb3; border: 6px double #ffa000; border-radius: 15px; box-shadow: 0 0 25px #ffd54f; }



        /* 钻石/水晶 (半透明玻璃态) */



        #shop-toolbar.tier-9 { background: rgba(224,247,250,0.7); border: 3px solid #00acc1; border-radius: 8px; backdrop-filter: blur(5px); }



        #shop-toolbar.tier-10 { background: rgba(178,235,242,0.85); border: 4px solid #00838f; border-radius: 8px; box-shadow: 0 0 30px #00e5ff, inset 0 0 20px #00e5ff; backdrop-filter: blur(8px); }



        .tier-11 .avatar-circle, .tier-12 .avatar-circle { border-color: #ce93d8; }



        .tier-11 .level-badge, .tier-12 .level-badge { background: #8e24aa; }



        .tier-13 .avatar-circle, .tier-14 .avatar-circle { border-color: #ef9a9a; }



        .tier-13 .level-badge, .tier-14 .level-badge { background: #c62828; }



        .tier-15 .avatar-circle, .tier-16 .avatar-circle { border-color: #a5d6a7; }



        .tier-15 .level-badge, .tier-16 .level-badge { background: #2e7d32; }



        .tier-17 .avatar-circle, .tier-18 .avatar-circle { border-color: #90caf9; }



        .tier-17 .level-badge, .tier-18 .level-badge { background: #1565c0; }



        .tier-19 .avatar-circle, .tier-20 .avatar-circle { border-color: #ffb74d; box-shadow: 0 0 15px #ffb74d; }



        .tier-19 .level-badge, .tier-20 .level-badge { background: #e65100; box-shadow: 0 0 10px #e65100; }



        .tier-12 .avatar-circle { box-shadow: 0 0 18px #ce93d8; }



        .tier-12 .avatar-circle::before { content: '✨'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 20px; z-index: 10; }



        .tier-14 .avatar-circle { box-shadow: 0 0 18px #ef9a9a; }



        .tier-14 .avatar-circle::before { content: '🌟'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 20px; z-index: 10; }



        .tier-16 .avatar-circle { box-shadow: 0 0 18px #a5d6a7; }



        .tier-16 .avatar-circle::before { content: '💫'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 20px; z-index: 10; }



        .tier-18 .avatar-circle { box-shadow: 0 0 18px #90caf9; }



        .tier-18 .avatar-circle::before { content: '🌠'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 20px; z-index: 10; }



        .tier-20 .avatar-circle { box-shadow: 0 0 35px #ffb74d; }



        .tier-20 .avatar-circle::before { content: '🏆'; position: absolute; top: -35px; left: 50%; transform: translateX(-50%); font-size: 40px; z-index: 10; }



        #shop-toolbar.tier-11, #shop-toolbar.tier-12 { background: rgba(243,229,245,0.85); border: 4px solid #ab47bc; border-radius: 12px; box-shadow: 0 0 20px #ab47bc; }



        #shop-toolbar.tier-13, #shop-toolbar.tier-14 { background: rgba(255,235,238,0.85); border: 4px solid #ef5350; border-radius: 12px; box-shadow: 0 0 20px #ef5350; }



        #shop-toolbar.tier-15, #shop-toolbar.tier-16 { background: rgba(232,245,233,0.85); border: 4px solid #66bb6a; border-radius: 12px; box-shadow: 0 0 20px #66bb6a; }



        #shop-toolbar.tier-17, #shop-toolbar.tier-18 { background: rgba(227,242,253,0.85); border: 4px solid #42a5f5; border-radius: 12px; box-shadow: 0 0 20px #42a5f5; }



        #shop-toolbar.tier-19, #shop-toolbar.tier-20 { background: rgba(255,243,224,0.95); border: 5px solid #ff9800; border-radius: 15px; box-shadow: 0 0 40px #ff9800, inset 0 0 30px #ff9800; }



    @keyframes drip { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } } 



    /* Left Main Menu (Collapsible Drawer - Aligned with Town standard) */



    .left-main-menu {



        position: absolute;



        left: 15px;



        top: 135px;



        z-index: 1000;



        pointer-events: auto;



        display: flex;



        flex-direction: column;



        align-items: flex-start;



    }



    .main-menu-toggle-btn {



        position: relative;



        background: linear-gradient(135deg, #2c3e50, #1a252f);



        color: #f1c40f;



        border: 1.5px solid #d4af37;



        border-radius: 8px;



        padding: 8px 12px;



        font-size: 13px;



        font-weight: bold;



        cursor: pointer;



        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);



        display: flex;



        align-items: center;



        justify-content: space-between;



        width: 120px;



        box-sizing: border-box;



        transition: all 0.25s ease;



    }



    .main-menu-toggle-btn:hover {



        background: linear-gradient(135deg, #34495e, #2c3e50);



        transform: translateY(-1px);



        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);



        border-color: #f39c12;



    }



    .main-menu-label {



        display: flex;



        align-items: center;



        gap: 6px;



    }



    .main-menu-icon {



        font-size: 14px;



    }



    .main-menu-arrow {



        font-size: 12px;



        color: #f1c40f;



        transition: transform 0.25s ease;



    }



    .left-main-menu.is-open .main-menu-arrow {



        transform: rotate(180deg);



    }



    .main-menu-badge {



        position: absolute;



        top: -4px;



        right: -4px;



        background: #e74c3c;



        color: white;



        border-radius: 50%;



        width: 14px;



        height: 14px;



        font-size: 10px;



        line-height: 14px;



        text-align: center;



        font-weight: bold;



        box-shadow: 0 2px 4px rgba(0,0,0,0.3);



        border: 1.5px solid white;



    }



    .left-menu-dropdown {



        display: flex;



        flex-direction: column;



        gap: 6px;



        margin-top: 6px;



        animation: fadeInDownMenu 0.22s ease-out forwards;



    }



    @keyframes fadeInDownMenu {



        from {



            opacity: 0;



            transform: translateY(-6px);



        }



        to {



            opacity: 1;



            transform: translateY(0);



        }



    }



    #btn-quests, #btn-mastery, #btn-friends, #btn-activity-board, #btn-guestbook, #btn-go-town, #btn-go-mine, #btn-return-farm {



        position: relative;



        top: auto;



        left: auto;



        color: white;



        border: none;



        padding: 10px;



        border-radius: 8px;



        font-weight: bold;



        cursor: pointer;



        width: 120px;



        text-align: left;



        box-shadow: 0 4px 6px rgba(0,0,0,0.2);



        z-index: 100;



        transition: transform 0.2s;



        box-sizing: border-box;



        display: flex;



        align-items: center;



        justify-content: flex-start;



    }



    #btn-quests { background: #4CAF50; }



    #btn-mastery { background: #9c27b0; }



    #btn-friends { background: #2196F3; }



    #btn-activity-board { background: #6d4c41; }



    #btn-guestbook { background: #d84315; }



    #btn-go-town { background: linear-gradient(135deg, #00897b, #004d40); }



    #btn-go-mine { background: linear-gradient(135deg, #8e44ad, #5e35b1); }



    #btn-return-farm { background: #ff9800; }



    #btn-quests:hover, #btn-mastery:hover, #btn-friends:hover, #btn-activity-board:hover, #btn-guestbook:hover, #btn-go-town:hover, #btn-go-mine:hover, #btn-return-farm:hover {



        transform: scale(1.03);



    }



    body.is-visiting #btn-go-town, body.is-visiting #btn-go-mine { display: none !important; }



        #toast-msg, #floating-ui-layer {



            pointer-events: none !important;



        }



        



        /* Grouped Top Right UI */



        #top-right-ui {



            position: absolute;



            top: 15px;



            right: 15px;



            display: flex;



            gap: 10px;



            z-index: 100;



        }



        #top-right-ui button {



            position: static;



            padding: 8px 12px;



            color: #ffffff !important;



            border: none;



            border-radius: 8px;



            font-weight: bold;



            cursor: pointer;



            box-shadow: 0 4px 6px rgba(0,0,0,0.2);



            transition: transform 0.2s;



            font-size: 14px;



        }



        #btn-help { background: linear-gradient(135deg, #42a5f5, #1976d2) !important; color: #ffffff !important; }



        #btn-logout { background: linear-gradient(135deg, #78909c, #455a64) !important; color: #ffffff !important; }



        #btn-reset { background: linear-gradient(135deg, #ef5350, #c62828) !important; color: #ffffff !important; }



        /* Quest modal fixed sizing matching order tab so switching tabs never jumps */



        #quest-modal .modal-content {



            width: 95% !important;



            max-width: 460px !important;



            height: 470px !important;



            max-height: 86vh !important;



            max-height: 86dvh !important;



            padding: 14px 18px !important;



            text-align: center !important;



            box-sizing: border-box !important;



            display: flex !important;



            flex-direction: column !important;



            overflow: hidden !important;



        }



        #quest-desc {



            flex: 1 !important;



            min-height: 0 !important;



            overflow-y: auto !important;



            padding: 6px 8px !important;



        }



        /* ================= Mobile Responsive Optimization ================= */



        /* ================= 订单弹窗 ================= */



        .order-modal-box {



            max-width: 440px !important;



            display: flex !important;



            align-items: center !important;



            padding: 16px 18px !important;



            background: #fff3e0 !important;



            border: 3.5px solid #ffcc80 !important;



            border-radius: 18px !important;



            box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;



        }



        #order-modal-avatar {



            font-size: 64px;



            margin-right: 14px;



            text-shadow: 2px 2px 0px rgba(0,0,0,0.15);



            flex-shrink: 0;



        }



        .order-modal-box .speech-bubble {



            flex: 1;



            background: white;



            padding: 12px 14px;



            border-radius: 12px;



            position: relative;



            border: 1.5px solid #ffe0b2;



            box-shadow: 0 3px 6px rgba(0,0,0,0.06);



            text-align: left;



        }



        .order-modal-box .speech-arrow-outer {



            position: absolute;



            left: -11px;



            top: 24px;



            width: 0;



            height: 0;



            border-top: 8px solid transparent;



            border-bottom: 8px solid transparent;



            border-right: 11px solid #ffe0b2;



        }



        .order-modal-box .speech-arrow-inner {



            position: absolute;



            left: -8px;



            top: 24px;



            width: 0;



            height: 0;



            border-top: 6px solid transparent;



            border-bottom: 6px solid transparent;



            border-right: 9px solid white;



            z-index: 2;



        }



        #order-modal-title {



            margin-top: 0;



            color: #e65100;



            margin-bottom: 8px;



            font-size: 16px;



            font-weight: 800;



        }



        #order-modal-desc {



            color: #5d4037;



            font-size: 13.5px;



            line-height: 1.45;



            margin-bottom: 10px;



        }



        .order-modal-btns {



            display: flex;



            justify-content: flex-end;



            gap: 8px;



            margin-top: 8px;



        }



        .order-btn-reject {



            pointer-events: auto !important;



            background: linear-gradient(135deg, #e53935, #c62828);



            color: white;



            border: none;



            padding: 6px 14px;



            border-radius: 8px;



            font-weight: bold;



            font-size: 12.5px;



            cursor: pointer;



            box-shadow: 0 2px 4px rgba(0,0,0,0.2);



            transition: transform 0.1s;



        }



        .order-btn-accept {



            pointer-events: auto !important;



            background: linear-gradient(135deg, #ff9800, #e65100);



            color: white;



            border: none;



            padding: 6px 14px;



            border-radius: 8px;



            font-weight: bold;



            font-size: 12.5px;



            cursor: pointer;



            box-shadow: 0 2px 4px rgba(0,0,0,0.2);



            transition: transform 0.1s;



        }



@media (max-width: 768px) {



    /* 手机端全局文字统一缩小 10% */



    html {



        font-size: 90% !important;



    }



    



    /* Mobile Compact Order Modal */



    .order-modal-box {



        width: 88% !important;



        max-width: 320px !important;



        padding: 10px 12px !important;



        border-radius: 14px !important;



        border-width: 2.5px !important;



        flex-direction: column !important;



        align-items: center !important;



        gap: 6px !important;



        font-size: 90% !important;



    }



    #order-modal-avatar {



        font-size: 36px !important;



        margin-right: 0 !important;



        margin-bottom: 0 !important;



        line-height: 1 !important;



    }



    .order-modal-box .speech-bubble {



        width: 100% !important;



        box-sizing: border-box !important;



        padding: 8px 10px !important;



        border-radius: 10px !important;



    }



    .order-modal-box .speech-arrow-outer,



    .order-modal-box .speech-arrow-inner {



        display: none !important;



    }



    #order-modal-title {



        font-size: 12.6px !important;



        margin-bottom: 6px !important;



        text-align: center !important;



    }



    #order-modal-desc {



        font-size: 10.35px !important;



        line-height: 1.35 !important;



        margin-bottom: 6px !important;



    }



    .order-btn-reject, .order-btn-accept {



        padding: 5px 12px !important;



        font-size: 10.35px !important;



    }



    /* 1. Header / Profile Area */



    #player-profile {



        top: 8px !important;



        left: 8px !important;



    }



    .avatar-circle {



        width: 44px !important;



        height: 44px !important;



        border-width: 2.5px !important;



    }



    .level-badge {



        font-size: 9px !important;



        padding: 1px 6px !important;



        margin-top: -6px !important;



    }



    #current-user {



        font-size: 10.8px !important;



        top: -15px !important;



        left: 4px !important;



    }



    .avatar-wrapper {



        margin-right: 6px !important;



    }



    .exp-bar-container {



        width: 80px !important;



        height: 11px !important;



    }



    .exp-text {



        font-size: 7.5px !important;



        line-height: 11px !important;



        display: block !important;



    }



    #dog-upkeep-container {



        font-size: 8.1px !important;



    }



    #coin-display {



        font-size: 10px !important;



    }



    /* 2. Top-Right Buttons (White text, compact) */



    #top-right-ui {



        top: 8px !important;



        right: 8px !important;



        gap: 4px !important;



    }



    #top-right-ui button {



        padding: 4px 8px !important;



        font-size: 10px !important;



        border-radius: 8px !important;



        color: #ffffff !important;



    }



    /* 3. Left Stacked Buttons & Drawer on Mobile */



    .left-main-menu {



        left: 8px !important;



        top: 96px !important;



    }



    .main-menu-toggle-btn {



        width: 96px !important;



        padding: 5px 8px !important;



        font-size: 11px !important;



        border-radius: 6px !important;



    }



    #btn-quests, #btn-mastery, #btn-friends, #btn-activity-board, #btn-guestbook, #btn-go-town, #btn-go-mine, #btn-return-farm {



        left: auto !important;



        top: auto !important;



        width: 96px !important;



        padding: 4px 6px !important;



        font-size: 10px !important;



        border-radius: 6px !important;



        white-space: nowrap !important;



        box-sizing: border-box !important;



        text-align: left !important;



        justify-content: flex-start !important;



        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;



    }



    /* Scene Navigation Banner on Mobile (Pond/Ranch) - Positioned below top-right UI, avoids occluding profile/stats */



    #scene-nav-banner {



        top: 42px !important;



        right: 8px !important;



        left: auto !important;



        transform: none !important;



        padding: 4px 10px !important;



        border-radius: 18px !important;



        gap: 6px !important;



        border-width: 1.5px !important;



        box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;



    }



    #scene-nav-title {



        font-size: 10px !important;



    }



    #btn-return-farm-top {



        padding: 4px 10px !important;



        font-size: 10px !important;



        border-radius: 12px !important;



    }



    /* 4. Bottom Toolbar (Toolbar wrapper holds top-row and tray tightly together) */



    #toolbar-wrapper {



        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;



        transform: translateX(-50%) scale(0.85) !important;



        transform-origin: bottom center !important;



    }



    #toolbar-top-row {



        gap: 16px !important;



        margin-bottom: 3px !important;



    }



    #btn-batch, #btn-open-shop-top {



        padding: 6px 14px !important;



        font-size: 10.8px !important;



        border-radius: 14px !important;



    }



    #shop-toolbar {



        transform: none !important;



        margin-bottom: 0 !important;



        padding: 4px 6px !important;



        gap: 5px !important;



    }



    .tool-card {



        font-size: 90% !important;



    }



    .tool-card .cost {



        font-size: 9px !important;



    }



    .tool-card #tool-water-title, .tool-card #tool-fert-title, .tool-card #tool-seed-title {



        font-size: 11.5px !important;



    }



    .seed-card .crop-name {



        font-size: 8.5px !important;



    }



    .seed-card .price {



        font-size: 10px !important;



    }



    .seed-card .detail {



        font-size: 9px !important;



    }



    /* 5. Floating Crop Timers */



    .floating-timer {
        padding: 1px 3.5px !important;
        font-size: 7.5px !important; /* +20% enlarged per user feedback */
        transform-origin: center center !important;
        border-radius: 4px !important;
        border: 0.5px solid rgba(255,255,255,0.30) !important;
        letter-spacing: -0.2px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }



    /* 6. Mobile Shop Modal Position (comfortably lifted up from screen bottom) */



    #shop-modal {



        align-items: flex-start !important;



        justify-content: center !important;



        padding-top: max(38px, env(safe-area-inset-top, 24px)) !important;



        padding-bottom: 24px !important;



        box-sizing: border-box !important;



    }



    #shop-modal .modal-content {



        width: 92% !important;



        height: auto !important;



        max-height: 72vh !important;



        margin: 0 auto !important;



        transform: none !important;



    }



    /* 7. Mobile Modal Centering & Proportions */



    /* 全球农场主弹窗居中 */



    #friends-modal {



        align-items: center !important;



        justify-content: center !important;



    }



    #friends-modal .modal-content {



        width: 90% !important;



        max-width: 380px !important;



        height: auto !important;



        max-height: 68vh !important;



        max-height: 68dvh !important;



        margin: auto !important;



        transform: translateY(-20px) !important;



        padding: 16px 14px !important;



        box-sizing: border-box !important;



    }



    #friends-list {



        max-height: 42vh !important;



        max-height: 42dvh !important;



        overflow-y: auto !important;



    }



    /* 图鉴大师弹窗居中 */



    #mastery-modal {



        align-items: center !important;



        justify-content: center !important;



    }



    #mastery-modal .modal-content {



        width: 92% !important;



        max-width: 400px !important;



        height: auto !important;



        max-height: 70vh !important;



        max-height: 70dvh !important;



        padding: 14px 12px !important;



        margin: auto !important;



        transform: translateY(-20px) !important;



        box-sizing: border-box !important;



        display: flex !important;



        flex-direction: column !important;



    }



    #mastery-grid {



        max-height: 36vh !important;



        max-height: 36dvh !important;



        overflow-y: auto !important;



    }



    /* 任务列表弹窗居中 (消除桌面固定520px) */



    #quest-modal {



        align-items: center !important;



        justify-content: center !important;



    }



    #quest-modal .modal-content {



        width: 95% !important;



        max-width: 420px !important;



        height: 460px !important;



        max-height: 86vh !important;



        max-height: 86dvh !important;



        padding: 10px 12px !important;



        margin: auto !important;



        transform: none !important;



        box-sizing: border-box !important;



        display: flex !important;



        flex-direction: column !important;



        overflow: hidden !important;



    }



    #quest-desc {



        flex: 1 !important;



        min-height: 0 !important;



        overflow-y: auto !important;



        padding: 5px 6px !important;



    }



    /* 活动看板紧凑精致居中 (防止过大填满屏幕) */



    #activity-log-modal {



        align-items: center !important;



        justify-content: center !important;



    }



    #activity-log-modal .activity-log-card {



        width: 88% !important;



        max-width: 360px !important;



        height: auto !important;



        max-height: 60vh !important;



        max-height: 60dvh !important;



        margin: auto !important;



        transform: translateY(-20px) !important;



        border-radius: 14px !important;



        box-sizing: border-box !important;



    }



    #activity-log-modal .activity-log-header {



        padding: 9px 14px !important;



        font-size: 12.6px !important;



    }



    #activity-log-modal .activity-log-header .modal-close {



        font-size: 16px !important;



    }



    #activity-log-modal #activity-log-list {



        padding: 8px 10px !important;



        max-height: 42vh !important;



        max-height: 42dvh !important;



        overflow-y: auto !important;



    }



    #activity-log-modal .activity-item {



        padding: 7px 9px !important;



        margin-bottom: 6px !important;



        font-size: 10px !important;



        border-radius: 8px !important;



    }



    #activity-log-modal .activity-visitor-avatar {



        font-size: 16px !important;



    }



    #activity-log-modal button {



        padding: 6px 24px !important;



        font-size: 11.2px !important;



    }



}



@media (max-width: 440px) {



    #top-right-ui button {



        padding: 3px 6px !important;



        font-size: 9px !important;



        color: #ffffff !important;



    }



    .avatar-circle {



        width: 38px !important;



        height: 38px !important;



    }



    .main-menu-toggle-btn {



        width: 92px !important;



        padding: 4.5px 6px !important;



        font-size: 10px !important;



    }



    #btn-quests, #btn-mastery, #btn-friends, #btn-activity-board, #btn-guestbook, #btn-go-town, #btn-go-mine, #btn-return-farm {



        width: 92px !important;



        font-size: 9.5px !important;



        padding: 3.5px 4px !important;



        left: auto !important;



        top: auto !important;



        text-align: left !important;



        justify-content: flex-start !important;



    }



    #scene-nav-banner {



        top: 38px !important;



        right: 6px !important;



        left: auto !important;



        transform: none !important;



        padding: 3px 8px !important;



        border-radius: 16px !important;



        gap: 5px !important;



    }



    #scene-nav-title {



        font-size: 9px !important;



    }



    #btn-return-farm-top {



        padding: 3px 8px !important;



        font-size: 9px !important;



        border-radius: 10px !important;



    }



    #toolbar-wrapper {



        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;



        transform: translateX(-50%) scale(0.78) !important;



        transform-origin: bottom center !important;



    }



    #toolbar-top-row {



        gap: 12px !important;



        margin-bottom: 2px !important;



    }



    #btn-batch, #btn-open-shop-top {



        padding: 5px 12px !important;



        font-size: 10px !important;



        border-radius: 12px !important;



    }



    #shop-toolbar {



        transform: none !important;



        margin-bottom: 0 !important;



    }



    #shop-modal {



        align-items: flex-start !important;



        justify-content: center !important;



        padding-top: max(30px, env(safe-area-inset-top, 18px)) !important;



        padding-bottom: 24px !important;



        box-sizing: border-box !important;



    }



    #shop-modal .modal-content {



        width: 94% !important;



        height: auto !important;



        max-height: 68vh !important;



        margin: 0 auto !important;



        transform: none !important;



    }



    /* Small Phone (<= 440px) Modal Refinements */



    #friends-modal .modal-content {



        width: 92% !important;



        max-width: 350px !important;



        max-height: 66vh !important;



        max-height: 66dvh !important;



        padding: 12px 10px !important;



        transform: translateY(-20px) !important;



    }



    #friends-list {



        max-height: 38vh !important;



        max-height: 38dvh !important;



    }



    #mastery-modal .modal-content {



        width: 94% !important;



        max-width: 360px !important;



        max-height: 68vh !important;



        max-height: 68dvh !important;



        padding: 12px 10px !important;



        transform: translateY(-20px) !important;



    }



    #mastery-grid {



        max-height: 34vh !important;



        max-height: 34dvh !important;



        gap: 5px !important;



    }



    #quest-modal .modal-content {



        width: 96% !important;



        max-width: 380px !important;



        height: 450px !important;



        max-height: 88vh !important;



        max-height: 88dvh !important;



        padding: 8px 10px !important;



        transform: none !important;



        overflow: hidden !important;



    }



    #quest-desc {



        flex: 1 !important;



        min-height: 0 !important;



        overflow-y: auto !important;



        padding: 4px 6px !important;



    }



    #activity-log-modal .activity-log-card {



        width: 90% !important;



        max-width: 330px !important;



        max-height: 58vh !important;



        max-height: 58dvh !important;



        transform: translateY(-20px) !important;



    }



    #activity-log-modal #activity-log-list {



        max-height: 40vh !important;



        max-height: 40dvh !important;



        padding: 6px 8px !important;



    }



    #activity-log-modal .activity-item {



        padding: 6px 8px !important;



        margin-bottom: 5px !important;



        font-size: 9.5px !important;



    }



    #activity-log-modal .activity-visitor-avatar {



        font-size: 14.5px !important;



    }



}



/* Premium UI Upgrades */



        button {



            border: 1px solid rgba(255,255,255,0.3) !important;



            box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.4) !important;



            text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important;



            border-radius: 12px !important;



            font-family: 'Noto Sans SC', sans-serif !important;



            letter-spacing: 0.5px;



        }



        button:active {



            box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.4) !important;



            transform: scale(0.95) translateY(2px) !important;



        }



        



        #btn-quests { background: linear-gradient(135deg, #4CAF50, #2E7D32) !important; }



        #btn-mastery { background: linear-gradient(135deg, #ab47bc, #7b1fa2) !important; }



        #btn-friends { background: linear-gradient(135deg, #42a5f5, #1976d2) !important; }



        #btn-help { background: linear-gradient(135deg, #42a5f5, #1976d2) !important; color: #ffffff !important; }



        #btn-logout { background: linear-gradient(135deg, #78909c, #455a64) !important; color: #ffffff !important; }



        #btn-reset { background: linear-gradient(135deg, #ef5350, #c62828) !important; color: #ffffff !important; }



        #btn-batch { background: linear-gradient(135deg, #ff9800, #e65100) !important; border-radius: 20px !important; }



        #btn-activity-board { background: linear-gradient(135deg, #6d4c41, #4e342e) !important; }



        #btn-go-town { background: linear-gradient(135deg, #00897b, #004d40) !important; color: #ffffff !important; }



        #btn-return-farm { background: linear-gradient(135deg, #ff9800, #f57c00) !important; }



        



        .modal-content {



            background: linear-gradient(135deg, rgba(30,40,30,0.95), rgba(20,30,20,0.95)) !important;



            border: 1px solid rgba(255,255,255,0.15) !important;



            box-shadow: 0 15px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1) !important;



            backdrop-filter: blur(10px);



            -webkit-backdrop-filter: blur(10px);



            border-radius: 20px !important;



            color: white !important;



        }



        



        .modal-content h2, .modal-content h3 {



            text-shadow: 1px 1px 3px rgba(0,0,0,0.8);



            color: #ffffff !important;



        }



/* ================= 升级弹窗专用样式 ================= */



#levelup-modal {



    position: fixed !important;



    top: 0 !important;



    left: 0 !important;



    right: 0 !important;



    bottom: 0 !important;



    width: 100% !important;



    height: 100% !important;



    height: 100dvh !important;



    background-color: rgba(0, 0, 0, 0.88) !important;



    background: rgba(0, 0, 0, 0.88) !important;



    display: none;



    align-items: center;



    justify-content: center;



    z-index: 10000;



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



    box-sizing: border-box;



}



.levelup-card {



    background-color: #23180f !important;



    background: #23180f linear-gradient(145deg, #2d1f14, #18110a) !important;



    border: 3px solid #ffb300 !important;



    border-radius: 20px !important;



    padding: 24px 20px !important;



    width: 86% !important;



    max-width: 340px !important;



    box-shadow: 0 16px 45px rgba(0,0,0,0.95), 0 0 30px rgba(255,179,0,0.35) !important;



    text-align: center;



    color: white !important;



    box-sizing: border-box !important;



    display: flex;



    flex-direction: column;



    align-items: center;



    margin: auto !important;



    opacity: 1 !important;



    isolation: isolate !important;



    transform: translateZ(0);



    -webkit-transform: translateZ(0);



}



.levelup-title {



    font-size: 22px !important;



    font-weight: 900 !important;



    color: #ffca28 !important;



    margin: 2px 0 4px 0 !important;



    text-shadow: 0 2px 4px rgba(0,0,0,0.6) !important;



}



.levelup-subtitle {



    font-size: 12.5px !important;



    color: #cfd8dc !important;



    margin: 0 0 10px 0 !important;



}



.levelup-level-badge {



    font-size: 22px !important;



    font-weight: 900 !important;



    color: #fff !important;



    background: linear-gradient(135deg, #ff9800, #e65100) !important;



    border: 2px solid #ffe082 !important;



    padding: 3px 20px !important;



    border-radius: 18px !important;



    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;



    display: inline-block;



}



.levelup-reward-row {



    font-size: 13px !important;



    line-height: 1.5 !important;



    color: #e0e0e0 !important;



    margin: 4px 0 !important;



}



.levelup-coin-reward {



    font-size: 15px !important;



    font-weight: bold !important;



    color: #ffd54f !important;



    margin: 6px 0 !important;



}



.levelup-btn {



    background: linear-gradient(135deg, #4caf50, #2e7d32) !important;



    color: white !important;



    border: none !important;



    padding: 9px 28px !important;



    border-radius: 10px !important;



    font-weight: bold !important;



    font-size: 14px !important;



    cursor: pointer !important;



    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;



    margin-top: 12px !important;



}



@keyframes levelup-star {



    0%, 100% { transform: scale(1) rotate(0deg); }



    50% { transform: scale(1.15) rotate(5deg); }



}



/* ================= 全球农场主弹窗与列表样式 ================= */



#friends-modal {



    position: fixed !important;



    top: 0 !important;



    left: 0 !important;



    right: 0 !important;



    bottom: 0 !important;



    width: 100% !important;



    height: 100% !important;



    height: 100dvh !important;



    background: rgba(0, 0, 0, 0.75) !important;



    display: none;



    align-items: center;



    justify-content: center;



    z-index: 2000;



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



    box-sizing: border-box;



}



#friends-modal .modal-content {



    background: linear-gradient(135deg, #263238, #1a2327) !important;



    border: 2px solid #455a64 !important;



    border-radius: 18px !important;



    width: 90% !important;



    max-width: 400px !important;



    max-height: 80vh !important;



    margin: auto !important;



    box-shadow: 0 12px 35px rgba(0,0,0,0.7) !important;



    display: flex;



    flex-direction: column;



}



.friend-item-row {



    display: flex;



    align-items: center;



    justify-content: space-between;



    padding: 10px 12px;



    margin: 4px 0;



    background: rgba(0, 0, 0, 0.35);



    border-radius: 12px;



    border: 1px solid rgba(255, 255, 255, 0.1);



    box-sizing: border-box;



    width: 100%;



}



.friend-avatar-wrap {



    position: relative;



    width: 46px;



    height: 46px;



    display: flex;



    align-items: center;



    justify-content: center;



    flex-shrink: 0;



    margin-right: 12px;



}



.friend-avatar-wrap .avatar-circle {



    width: 42px !important;



    height: 42px !important;



    border-radius: 50% !important;



    background: #c3b1e1;



    display: flex;



    align-items: center;



    justify-content: center;



    box-sizing: border-box;



    position: relative;



    overflow: visible !important;



    border-width: 3.5px !important;



    box-shadow: 0 2px 6px rgba(0,0,0,0.3);



}



.friend-avatar-wrap .level-badge {



    position: absolute;



    bottom: -6px;



    left: 50%;



    transform: translateX(-50%);



    font-size: 10px !important;



    font-weight: bold;



    color: white !important;



    border: 1.5px solid #fff !important;



    padding: 1px 6px !important;



    border-radius: 10px !important;



    line-height: 1 !important;



    box-shadow: 0 1px 3px rgba(0,0,0,0.4);



    white-space: nowrap;



    z-index: 12;



    margin-top: 0 !important;



}



/* 缩放适配移动端全球农场主列表段位头像框配件 */



.friend-avatar-wrap.tier-2 .avatar-circle::before { top: -11px !important; font-size: 13px !important; }



.friend-avatar-wrap.tier-4 .avatar-circle::before { top: -13px !important; font-size: 14px !important; }



.friend-avatar-wrap.tier-6 .avatar-circle::before { top: -15% !important; left: -15% !important; width: 130% !important; height: 130% !important; border-width: 2.5px !important; }



.friend-avatar-wrap.tier-8 .avatar-circle::before { right: -10px !important; top: -2px !important; font-size: 15px !important; }



.friend-avatar-wrap.tier-8 .avatar-circle::after { left: -10px !important; top: -2px !important; font-size: 15px !important; }



.friend-avatar-wrap.tier-10 .avatar-circle::before { top: -23px !important; font-size: 24px !important; }



.friend-avatar-wrap.tier-12 .avatar-circle::before { top: -12px !important; font-size: 14px !important; }



.friend-avatar-wrap.tier-14 .avatar-circle::before { top: -12px !important; font-size: 14px !important; }



.friend-avatar-wrap.tier-16 .avatar-circle::before { top: -12px !important; font-size: 14px !important; }



.friend-avatar-wrap.tier-18 .avatar-circle::before { top: -12px !important; font-size: 14px !important; }



.friend-avatar-wrap.tier-20 .avatar-circle::before { top: -23px !important; font-size: 26px !important; }



/* ================= 头像选择弹窗样式 ================= */



.avatar-card-item {



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    padding: 8px 4px;



    border-radius: 10px;



    background: rgba(255, 255, 255, 0.08);



    border: 1.5px solid rgba(255, 255, 255, 0.14);



    cursor: pointer;



    transition: all 0.2s ease;



    user-select: none;



}



.avatar-card-item:hover {



    background: rgba(255, 255, 255, 0.2);



    border-color: #81c784;



    transform: translateY(-2px);



    box-shadow: 0 4px 10px rgba(0,0,0,0.35);



}



.avatar-card-item:active {



    transform: scale(0.95);



}



.avatar-card-item.selected {



    background: rgba(76, 175, 80, 0.3) !important;



    border-color: #4caf50 !important;



    box-shadow: 0 0 12px rgba(76, 175, 80, 0.6) !important;



}



/* ================= 紧凑响应式头像选择弹窗 ================= */



.avatar-modal-card {



    max-width: 440px;



    width: 92%;



    max-height: 72vh;



    max-height: 72dvh;



    display: flex;



    flex-direction: column;



    padding: 12px 10px;



    border-radius: 14px;



    background: linear-gradient(135deg, rgba(32, 42, 32, 0.98), rgba(18, 26, 18, 0.98));



    border: 2px solid #81c784;



    box-shadow: 0 10px 30px rgba(0,0,0,0.8);



    box-sizing: border-box;



    margin: auto;



}



#avatar-list-grid {



    flex: 1;



    overflow-y: auto;



    display: grid;



    grid-template-columns: repeat(5, 1fr);



    gap: 6px;



    padding: 4px 2px;



}



.avatar-card-item .avatar-item-emoji {



    font-size: 28px;



    line-height: 1.1;



}



.avatar-card-item .avatar-item-name {



    font-size: 10.5px;



    margin-top: 3px;



    color: #c8e6c9;



    text-align: center;



    white-space: nowrap;



    overflow: hidden;



    text-overflow: ellipsis;



    max-width: 58px;



}



@media (max-width: 768px) {



    #avatar-modal {



        align-items: center !important;



        justify-content: center !important;



    }



    .avatar-modal-card {



        width: 92% !important;



        max-height: 70vh !important;



        max-height: 70dvh !important;



        padding: 10px 8px !important;



    }



    #avatar-list-grid {



        grid-template-columns: repeat(5, 1fr) !important;



        gap: 5px !important;



    }



    .avatar-card-item {



        padding: 5px 2px !important;



        border-radius: 8px !important;



    }



    .avatar-card-item .avatar-item-emoji {



        font-size: 24px !important;



    }



    .avatar-card-item .avatar-item-name {



        font-size: 9.5px !important;



        margin-top: 2px !important;



        max-width: 52px !important;



    }



}



/* ================= 全球农场主滚动条与提示动画 ================= */



#friends-list::-webkit-scrollbar {



    width: 6px;



}



#friends-list::-webkit-scrollbar-track {



    background: rgba(0, 0, 0, 0.25);



    border-radius: 3px;



}



#friends-list::-webkit-scrollbar-thumb {



    background: #4caf50;



    border-radius: 3px;



}



@keyframes scrollHintPulse {



    0%, 100% { opacity: 0.85; transform: translateY(0); }



    50% { opacity: 1; transform: translateY(-2px); }



}



.scroll-arrow-anim {



    display: inline-block;



    animation: scrollHintPulse 1.6s ease-in-out infinite;



}



/* ================= 聊天气泡样式 ================= */



.quick-msg-tag {



    background: rgba(255, 255, 255, 0.12);



    border: 1px solid rgba(255, 152, 0, 0.45);



    color: #ffe0b2;



    font-size: 11px;



    padding: 3px 8px;



    border-radius: 12px;



    cursor: pointer;



    transition: all 0.2s;



    user-select: none;



    white-space: nowrap;



}



.quick-msg-tag:hover {



    background: rgba(255, 152, 0, 0.25);



    color: #fff;



    border-color: #ff9800;



}



.quick-msg-tag:active {



    transform: scale(0.96);



}



#guestbook-modal {



    align-items: center !important;



    justify-content: center !important;



}



#guestbook-modal .guestbook-card {



    width: 92% !important;



    max-width: 480px !important;



    height: 500px !important;



    max-height: 85vh !important;



    max-height: 85dvh !important;



    margin: auto !important;



    transform: translateY(-5px) !important;



    box-sizing: border-box !important;



    display: flex !important;



    flex-direction: column !important;



}



#guestbook-modal .guestbook-header {



    padding: 10px 14px !important;



    font-size: 14.5px !important;



}



#guestbook-modal #guestbook-list {



    padding: 8px 12px !important;



    height: 330px !important;



    min-height: 330px !important;



    max-height: 330px !important;



    overflow-y: auto !important;



    box-sizing: border-box !important;



}



#chat-farmer-list-view {



    height: 390px !important;



    min-height: 390px !important;



    max-height: 390px !important;



    overflow-y: auto !important;



    box-sizing: border-box !important;



}



.chat-farmer-card {



    display: flex !important;



    align-items: center !important;



    gap: 12px !important;



    padding: 11px 14px !important;



    background: #ffffff !important;



    border: 2px solid #ff9800 !important;



    border-radius: 14px !important;



    cursor: pointer !important;



    transition: all 0.2s !important;



    box-shadow: 0 4px 10px rgba(0,0,0,0.07) !important;



    margin-bottom: 9px !important;



    box-sizing: border-box !important;



}



.chat-farmer-card:hover {



    background: #fff8e1 !important;



    border-color: #e65100 !important;



    transform: translateY(-1px) !important;



    box-shadow: 0 6px 14px rgba(230,81,0,0.18) !important;



}



.chat-farmer-card:active {



    transform: scale(0.99) !important;



}



.chat-farmer-avatar-wrap {



    width: 44px !important;



    height: 44px !important;



    border-radius: 50% !important;



    background: #fff3e0 !important;



    border: 2.5px solid #ff9800 !important;



    display: flex !important;



    align-items: center !important;



    justify-content: center !important;



    font-size: 22px !important;



    flex-shrink: 0 !important;



    position: relative !important;



    box-shadow: 0 2px 5px rgba(0,0,0,0.12) !important;



}



.chat-farmer-level-badge {



    position: absolute !important;



    bottom: -3px !important;



    right: -4px !important;



    background: linear-gradient(135deg, #ff9800, #e65100) !important;



    color: #fff !important;



    font-size: 10px !important;



    font-weight: bold !important;



    padding: 0 5px !important;



    border-radius: 8px !important;



    border: 1.5px solid #fff !important;



    line-height: 14px !important;



    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;



}



.chat-farmer-info {



    flex: 1 !important;



    min-width: 0 !important;



    display: flex !important;



    flex-direction: column !important;



    justify-content: center !important;



}



.chat-farmer-top-row {



    display: flex !important;



    justify-content: space-between !important;



    align-items: center !important;



    margin-bottom: 3px !important;



}



.chat-farmer-name {



    font-weight: bold !important;



    font-size: 14.5px !important;



    color: #3e2723 !important;



    overflow: hidden !important;



    text-overflow: ellipsis !important;



    white-space: nowrap !important;



    max-width: 65% !important;



}



.chat-farmer-time {



    font-size: 11px !important;



    color: #8d6e63 !important;



    background: #efebe9 !important;



    padding: 1px 6px !important;



    border-radius: 6px !important;



    flex-shrink: 0 !important;



    margin-left: 6px !important;



    white-space: nowrap !important;



}



.chat-farmer-snippet {



    font-size: 12px !important;



    color: #6d4c41 !important;



    overflow: hidden !important;



    text-overflow: ellipsis !important;



    white-space: nowrap !important;



    margin-top: 1px !important;



}



.chat-farmer-arrow {



    width: 26px !important;



    height: 26px !important;



    border-radius: 50% !important;



    background: #fff3e0 !important;



    border: 1.5px solid #ffb74d !important;



    display: flex !important;



    align-items: center !important;



    justify-content: center !important;



    color: #e65100 !important;



    font-size: 15px !important;



    font-weight: bold !important;



    flex-shrink: 0 !important;



    margin-left: 4px !important;



}



/* ================= 现代聊天框气泡风格 ================= */



.chat-row {



    display: flex;



    gap: 8px;



    align-items: flex-start;



    margin-bottom: 12px;



    width: 100%;



    box-sizing: border-box;



}



.chat-row.chat-self {



    justify-content: flex-end;



}



.chat-avatar-wrap {



    width: 38px;



    height: 38px;



    border-radius: 50%;



    background: #fff3e0;



    border: 2px solid #ff9800;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 20px;



    flex-shrink: 0;



    box-shadow: 0 2px 4px rgba(0,0,0,0.12);



}



.chat-row.chat-self .chat-avatar-wrap {



    order: 2;



    background: #e8f5e9;



    border-color: #4caf50;



}



.chat-bubble-wrap {



    max-width: 78%;



    display: flex;



    flex-direction: column;



}



.chat-row.chat-self .chat-bubble-wrap {



    align-items: flex-end;



    order: 1;



}



.chat-bubble-meta {



    font-size: 11px;



    color: #8d6e63;



    margin-bottom: 3px;



    display: flex;



    gap: 6px;



    align-items: center;



}



.chat-row.chat-self .chat-bubble-meta {



    justify-content: flex-end;



}



.chat-bubble-card {



    padding: 9px 13px;



    border-radius: 4px 14px 14px 14px;



    background: #ffffff;



    border: 2px solid #ffcc80;



    color: #3e2723;



    font-size: 13px;



    line-height: 1.45;



    word-break: break-word;



    box-shadow: 0 2px 6px rgba(0,0,0,0.06);



    position: relative;



}



.chat-row.chat-self .chat-bubble-card {



    border-radius: 14px 4px 14px 14px;



    background: linear-gradient(135deg, #ff9800, #e65100);



    border: 1.5px solid #bf360c;



    color: #ffffff;



    box-shadow: 0 3px 8px rgba(230, 81, 0, 0.25);



}



.chat-delete-btn {



    opacity: 0.6;



    cursor: pointer;



    font-size: 11px;



    color: #d32f2f;



    margin-left: 6px;



    transition: opacity 0.2s;



}



.chat-delete-btn:hover {



    opacity: 1;



}



/* 聊天框底部输入栏 */



.chat-input-bar {



    display: flex;



    gap: 8px;



    padding: 10px 14px;



    background: #ede0d4;



    border-top: 1px solid #d7ccc8;



    align-items: center;



}



.chat-input-bar input {



    flex: 1;



    padding: 8px 14px;



    border: 1.5px solid #bcaaa4;



    border-radius: 20px;



    font-size: 13px;



    outline: none;



    background: #ffffff;



    color: #3e2723;



    transition: border-color 0.2s;



}



.chat-input-bar input:focus {



    border-color: #ff9800;



}



.chat-input-bar button {



    background: linear-gradient(135deg, #43a047, #2e7d32);



    color: white;



    border: none;



    padding: 8px 16px;



    border-radius: 20px;



    font-weight: bold;



    font-size: 13px;



    cursor: pointer;



    box-shadow: 0 2px 6px rgba(0,0,0,0.25);



    white-space: nowrap;



    transition: transform 0.1s;



}



.chat-input-bar button:active {



    transform: scale(0.96);



}



/* 造访横幅防遮挡样式 */



#visiting-banner {



    position: fixed;



    top: 75px;



    left: 50%;



    transform: translateX(-50%);



    z-index: 99999;



    background: linear-gradient(135deg, rgba(38, 50, 56, 0.96), rgba(24, 32, 36, 0.96));



    border: 2px solid #ff9800;



    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



    border-radius: 20px;



    padding: 10px 20px;



    color: white;



    text-align: center;



    box-sizing: border-box;



    max-width: 92vw;



    display: none;



    flex-direction: column;



    align-items: center;



}



@media (max-width: 768px) {



    #visiting-banner {



        top: auto !important;



        bottom: calc(20px + env(safe-area-inset-bottom, 12px)) !important;



        padding: 8px 16px !important;



        border-radius: 18px !important;



        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65) !important;



    }



}





/* =========================================================================
   Antigravity Unified Sidebar Drawer & Mobile Hierarchy Guardrails (v20261029_2055)
   ========================================================================= */
.modal-overlay {
    z-index: 20000 !important;
}

/* ==========================================================================
   三端统一快捷侧边栏与导航抽屉规范 (Unified Sidebar & Quick Navigation Drawer)
   ========================================================================== */
.sidebar-toggle-btn {
    position: fixed;
    top: 130px;
    left: 14px;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: rgba(18, 28, 40, 0.88);
    border: 1.5px solid rgba(100, 255, 218, 0.55);
    border-radius: 20px;
    color: #64ffda;
    font-size: 12.5px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    pointer-events: auto;
    user-select: none;
}

.sidebar-toggle-btn:hover {
    transform: scale(1.06);
    background: rgba(26, 42, 60, 0.95);
    border-color: #64ffda;
    box-shadow: 0 6px 18px rgba(100, 255, 218, 0.35);
}

.sidebar-toggle-btn:active {
    transform: scale(0.96);
}

.sidebar-toggle-btn.open {
    background: rgba(30, 41, 59, 0.95);
    border-color: #ffd54f;
    color: #ffd54f;
    box-shadow: 0 4px 14px rgba(255, 213, 79, 0.3);
}

.sidebar-toggle-btn .toggle-icon {
    font-size: 13px;
    line-height: 1;
}

.left-sidebar-drawer {
    position: fixed;
    top: 172px;
    left: 14px;
    z-index: 1015;
    width: 128px;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 8px 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.22s ease;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    user-select: none;
    box-sizing: border-box;
}

.left-sidebar-drawer.collapsed {
    transform: translateX(-160px);
    opacity: 0;
    pointer-events: none;
}

.sidebar-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px 6px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 11.5px;
    font-weight: bold;
    color: #b0bec5;
}

.sidebar-drawer-title {
    color: #ffd54f;
    display: flex;
    align-items: center;
    gap: 3px;
}

.sidebar-drawer-close {
    background: transparent;
    border: none;
    color: #90a4ae;
    font-size: 13px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.sidebar-drawer-close:hover {
    color: #ffffff;
}

.sidebar-drawer-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-drawer-stack button {
    position: relative;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: none !important;
    color: white !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.18s, filter 0.18s !important;
    box-sizing: border-box !important;
}

.sidebar-drawer-stack button:hover {
    transform: translateX(3px) !important;
    filter: brightness(1.1) !important;
}

.sidebar-drawer-stack button:active {
    transform: scale(0.96) !important;
}

/* 按钮专属主题色统一化 (对齐水乡城镇) */
.sidebar-drawer-stack #btn-quests { background: #4CAF50 !important; }
.sidebar-drawer-stack #btn-mastery { background: #9c27b0 !important; }
.sidebar-drawer-stack #btn-friends { background: #2196F3 !important; }
.sidebar-drawer-stack #btn-activity-board { background: #6d4c41 !important; }
.sidebar-drawer-stack #btn-guestbook { background: #d84315 !important; }
.sidebar-drawer-stack #btn-go-town,
.sidebar-drawer-stack #btn-return-town-left { background: linear-gradient(135deg, #00897b, #004d40) !important; }
.sidebar-drawer-stack #btn-go-mine,
.sidebar-drawer-stack #btn-town-go-mine { background: linear-gradient(135deg, #7c4dff, #512da8) !important; }
.sidebar-drawer-stack #btn-return-farm,
.sidebar-drawer-stack #btn-return-farm-left { background: linear-gradient(135deg, #ff9800, #f57c00) !important; }

/* 弹窗打开时彻底隐藏左侧菜单按钮与抽屉，确保无遮挡 */
body.has-open-modal .main-menu-toggle-btn,
body.has-open-modal .sidebar-toggle-btn,
body.has-open-modal .left-sidebar-drawer,
body:has(.modal-overlay:not([style*="display: none"]):not([style*="display:none"])) .main-menu-toggle-btn,
body:has(.modal-overlay:not([style*="display: none"]):not([style*="display:none"])) .sidebar-toggle-btn,
body:has(.modal-overlay:not([style*="display: none"]):not([style*="display:none"])) .left-sidebar-drawer {
    display: none !important;
}

/* 子场景全局隐藏右上角系统菜单 (退出登录/重置游戏)，彻底杜绝与顶部横幅冲突 */
body.in-subscene #top-right-ui,
body[data-scene="POND"] #top-right-ui,
body[data-scene="RANCH"] #top-right-ui {
    display: none !important;
}

@media (max-width: 768px) {
    /* 1. 快捷菜单学习城镇设计：紧随头像框下方 (top: 96px)，自成一体不飘空 */
    .sidebar-toggle-btn {
        position: fixed !important;
        top: 96px !important;
        left: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 5px 9px !important;
        background: rgba(18, 28, 40, 0.90) !important;
        border: 1.5px solid rgba(100, 255, 218, 0.55) !important;
        border-radius: 18px !important;
        color: #64ffda !important;
        font-size: 10.5px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        z-index: 1020 !important;
    }

    /* 抽屉容器：紧跟在快捷菜单按钮下方展开 (top: 130px) */
    .left-sidebar-drawer {
        position: fixed !important;
        top: 130px !important;
        left: 8px !important;
        z-index: 1015 !important;
        width: 116px !important;
        padding: 6px 4px !important;
        background: rgba(15, 23, 42, 0.94) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }
    .left-sidebar-drawer.collapsed {
        transform: translateX(-150px) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .sidebar-drawer-header {
        font-size: 11px !important;
        padding: 2px 2px 5px 2px !important;
    }
    .sidebar-drawer-stack button {
        font-size: 10px !important;
        padding: 5px 6px !important;
    }

    /* 2. 鱼池/牧场顶部返回按钮：放置在右上角 (右上角系统退出按钮在子场景已隐藏)，与左上头像绝对零重叠 */
    #scene-nav-banner {
        position: fixed !important;
        top: max(10px, calc(env(safe-area-inset-top) + 6px)) !important;
        right: 10px !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding: 4px 10px !important;
        border-radius: 16px !important;
        gap: 6px !important;
        background: linear-gradient(135deg, rgba(20,30,20,0.95), rgba(30,45,30,0.95)) !important;
        border: 1.5px solid #ff9800 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.45) !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
    }
    #scene-nav-banner #scene-nav-title {
        font-size: 11px !important;
    }
    #scene-nav-banner #btn-return-farm-top {
        padding: 4px 10px !important;
        font-size: 11px !important;
        border-radius: 12px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* 3. 种植倒数标签在手机端调大 20%：字号 7.5px */
    .floating-timer {
        padding: 1px 3.5px !important;
        font-size: 7.5px !important;
        transform-origin: center center !important;
        border-radius: 4px !important;
        border: 0.5px solid rgba(255,255,255,0.30) !important;
    }
}