:root
{
--primary-blue:#489eee;--secondary-blue:#3498db;--success-green:#4CAF50;--danger-red:#e74c3c;--warning-orange:#f39c12;--money-yellow:#ffcb05ed;--charm-pink:#f9595f;--panel-bg:rgb(77 123 134 / 44%);--panel-border:rgb(77 110 131 / 17%);--coins-bg:rgb(255 180 20 / 17%);--charm-bg:rgb(226 0 0 / 13%);--modal-bg:#fff1c5eb;--loader-bg:rgba(40, 40, 40, 0.493);--notification-bg:#2e6f8b87;--shadow-sm:0 3px 8px rgba(0, 0, 0, 0.25);--shadow-md:0 5px 15px rgba(0, 0, 0, 0.25);--shadow-lg:0 10px 30px rgba(0, 0, 0, 0.3);--spacing-xs:5px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:20px;--spacing-xl:30px;--radius-sm:7px;--radius-md:12px;--radius-lg:20px;--radius-xl:30px;--avatar-size:40px;--level-circle-size:20px;--experience-bar-height:14px;--control-icon-size:30px;--bottom-icon-size:35px;--tg-viewport-height:100vh;--tg-safe-area-inset-top:0px;--tg-safe-area-inset-right:0px;--tg-safe-area-inset-bottom:0px;--tg-safe-area-inset-left:0px;--tg-content-safe-area-inset-top:0px;--tg-content-safe-area-inset-right:0px;--tg-content-safe-area-inset-bottom:0px;--tg-content-safe-area-inset-left:0px;--app-safe-top:max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top), var(--tg-content-safe-area-inset-top));--app-safe-right:max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right), var(--tg-content-safe-area-inset-right));--app-safe-bottom:max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom));--app-safe-left:max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left), var(--tg-content-safe-area-inset-left));--desktop-hud-max-width:1240px;--farm-field-hud-clearance:0px;--farm-scene-background-image:url("image/themes/defoult/background1.png?v=20260602-bg1");
}
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;src:url('fonts/russo-one-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;src:url('fonts/russo-one-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
*
{
-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}
input,textarea,[contenteditable]
{
-webkit-user-select:auto;-khtml-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;
}
.hidden
{
display:none !important;
}
img[data-deferred-src]
{
opacity:0;
}
body
{
overflow:hidden;width:100%;margin:0;padding:0;position:relative;background:linear-gradient(176deg, #18232e, #000000);
}
.user-panel
{
position:fixed;top:calc(var(--app-safe-top) + 50px);left:calc(var(--app-safe-left) + 4px);z-index:100;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none;
}
.user-panel-background
{
position:relative;overflow:hidden;padding:15px 0px;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;width:175px;height:100px;pointer-events:auto;top:0px;left:5px;background:radial-gradient(circle at 30% 30%, #3d85b157, #155e956b);border-radius:20px;box-shadow:0 0 0 1px rgba(114, 158, 185, 0.61), 0 10px 20px rgba(0, 50, 100, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.34);
}
.user-panel-background::before,.user-panel-background::after
{
content: '';position:absolute;background:rgba(255, 255, 255, 0.2);border-radius:50%;filter:blur(8px);z-index:0;pointer-events:none;
}
.user-panel-background::before
{
width:80px;height:40px;top:10px;left:-15px;
}
.user-panel-background::after
{
width:100px;height:50px;bottom:5px;right:-20px;
}
.star
{
position:absolute;width:2px;height:2px;background:white;border-radius:50%;box-shadow:0 0 6px white;opacity:0.8;animation:twinkle 2s infinite ease-in-out;z-index:1;
}
.star:nth-child(1)
{
top:11%;left:31%;
}
.star:nth-child(2)
{
top:85%;left:85%;width:3px;height:3px;animation-delay:0.5s;
}
.star:nth-child(3)
{
top:45%;left:50%;animation-delay:1s;
}
.star:nth-child(4)
{
top:87%;left:20%;animation-delay:1.7s;
}
.star:nth-child(5)
{
top:25%;left:75%;width:3px;height:3px;animation-delay:0.2s;
}
.star:nth-child(6)
{
top:56%;left:10%;animation-delay:1.7s;
}
@keyframes twinkle
{
0%, 100%
{
opacity:0.3;transform:scale(1);
}
50%
{
opacity:1;transform:scale(1.3);
}

}
.avatar
{
width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255, 255, 255, 0.9);outline:3px solid rgba(173, 216, 230, 0.6);outline-offset:2px;box-shadow:0 0 15px rgba(135, 206, 235, 0.8), 0 4px 10px rgba(0, 0, 0, 0.2);object-fit:cover;background:rgba(255, 255, 255, 0.2);flex-shrink:0;z-index:2;
}
.avatar-stack
{
position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.row
{
display:flex;align-items:center;gap:10px;width:88%;position:relative;z-index:2;left:8px;top:0px;
}
.experience-bar-container
{
display:flex;align-items:center;gap:10px;flex:1;min-width:0;
}
.level-circle
{
width:19px;height:19px;background:linear-gradient(135deg, #87cefa, #009ace);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:bold;outline:2px solid rgb(0 113 221 / 41%);outline-offset:2px;box-shadow:0 0 12px #87cefa, 0 0 20px #00bfff, 0 1px 5px rgba(0, 0, 0, 0.25);flex-shrink:0;font-size:10px;text-shadow:0 1px 2px rgba(0, 0, 0, 0.6);z-index:2;
}
.experience-bar
{
flex:1;height:20px;background:rgba(255, 255, 255, 0.25);border-radius:9px;position:relative;overflow:hidden;border:0.5px solid rgba(255, 255, 255, 0.5);box-shadow:0 0 10px rgba(255, 255, 255, 0.5), inset 0 1px 4px rgba(0, 0, 0, 0.2);min-width:45px;z-index:2;
}
#experience-fill
{
position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(90deg, #ffd700, #ffb347);border-radius:6px;transition:width 0.5s ease;box-shadow:0 0 15px #ffb347, inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.experience-text
{
position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:8px;color:white;font-weight:bold;z-index:1;pointer-events:none;white-space:nowrap;text-shadow:0 0 5px #00bfff, 0 0 10px #87cefa, 0 1px 2px rgba(0, 0, 0, 0.8);font-family:'Quicksand', sans-serif;padding:0 2px;
}
.bottom-row
{
display:flex;justify-content:space-between;align-items:center;gap:6px;width:86%;margin-top:7px;left:11px;position:relative;z-index:2;
}
.coins-container, .charm-container
{
display:flex;align-items:center;gap:3px;padding:4px 6px;border-radius:12px;flex:1;justify-content:center;min-width:0;background:rgba(255, 255, 255, 0.2);backdrop-filter:blur(4px);outline:2px solid rgba(255, 255, 255, 0.7);outline-offset:0;box-shadow:0 0 15px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.3);z-index:2;border:none;
}
.coins-container
{
outline-color:rgb(203 182 56 / 50%);box-shadow:0 0 15px rgb(228 179 0 / 30%), inset 0 0 8px rgb(255 223 0 / 20%);
}
.charm-container
{
outline-color:rgba(255, 182, 193, 0.6);box-shadow:0 0 15px rgba(255, 182, 193, 0.4), inset 0 0 8px rgba(255, 192, 203, 0.3);
}
.coins-icon
{
width:16px;height:16px;filter:drop-shadow(0 0 5px gold);margin-top:-2px;
}
.charm-icon
{
width:14px;height:14px;filter:drop-shadow(0 0 5px #ffb6c1);
}
.coins-value
{
font-size:11px;font-weight:bold;color:#fff9c4;text-shadow:0 0 8px gold, 0 0 12px #ffd700, 0 1px 2px rgba(0, 0, 0, 0.7);min-width:22px;text-align:center;font-family:'Quicksand', sans-serif;
}
.charm-value
{
font-size:11px;font-weight:bold;color:#ffe4e1;text-shadow:0 0 8px #ffb6c1, 0 0 12px #ff69b4, 0 1px 2px rgba(0, 0, 0, 0.7);min-width:22px;text-align:center;font-family:'Quicksand', sans-serif;
}
.balance-updated
{
animation:coinPulse 0.5s ease;
}
.coins-container.balance-changed
{
background:rgba(255, 215, 0, 0.2);animation:glowEffect 1s ease;
}
@keyframes coinPulse
{
0%
{
transform:scale(1);
}
50%
{
transform:scale(1.15);
}
100%
{
transform:scale(1);
}

}
@keyframes glowEffect
{
0%, 100%
{
box-shadow:0 0 8px rgba(255, 215, 0, 0.5);
}
50%
{
box-shadow:0 0 20px rgba(255, 215, 0, 0.9);
}

}
.control-panel
{
position:fixed;top:calc(var(--app-safe-top) + 50px);right:calc(var(--app-safe-right) + 4px);z-index:100;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;
}
.control-panel-background
{
position:relative;overflow:hidden;padding:8px 15px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:7px;right:5px;height:55px;pointer-events:auto;background:radial-gradient(circle at 30% 30%, rgba(122, 191, 233, 0.23), #0b5e9cad);border-radius:20px;box-shadow:0 0 0 1px rgba(114, 158, 185, 0.6), 0 10px 20px rgba(0, 50, 100, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.39);
}
.control-panel-background::before,.control-panel-background::after
{
content: '';position:absolute;background:rgba(255, 255, 255, 0.2);border-radius:50%;filter:blur(8px);z-index:0;pointer-events:none;
}
.control-panel-background::before
{
width:60px;height:30px;top:5px;left:-10px;
}
.control-panel-background::after
{
width:80px;height:40px;bottom:5px;right:-15px;
}
.control-panel-background .star
{
position:absolute;width:2px;height:2px;background:white;border-radius:50%;box-shadow:0 0 6px white;opacity:0.8;animation:twinkle 2s infinite ease-in-out;z-index:1;
}
.control-panel-background .star:nth-child(1)
{
top:20%;left:15%;
}
.control-panel-background .star:nth-child(2)
{
top:70%;left:80%;width:3px;height:3px;animation-delay:0.5s;
}
.control-panel-background .star:nth-child(3)
{
top:50%;left:40%;animation-delay:1s;
}
.control-panel-background .star:nth-child(4)
{
top:85%;left:25%;animation-delay:1.7s;
}
.control-panel-background .star:nth-child(5)
{
top:30%;left:70%;width:3px;height:3px;animation-delay:0.2s;
}
@keyframes twinkle
{
0%, 100%
{
opacity:0.3;transform:scale(1);
}
50%
{
opacity:1;transform:scale(1.3);
}

}
.control-button
{
width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;background:rgba(255, 255, 255, 0.2);backdrop-filter:blur(4px);position:relative;z-index:2;flex-shrink:0;outline:2px solid rgb(72 142 178 / 36%);outline-offset:0;box-shadow:0 0 15px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.3);border:none;
}
.control-button.disabled
{
opacity:0.6;cursor:not-allowed;filter:grayscale(0.3);background:rgba(255, 255, 255, 0.1);outline-color:rgba(255, 255, 255, 0.3);box-shadow:none;
}
.control-icon
{
width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));transition:transform 0.2s ease;
}
.control-button:not(.disabled):hover .control-icon
{
transform:scale(1.1);
}
.bottom-control-panel
{
position:fixed;bottom:calc(var(--app-safe-bottom) + 18px);left:50%;transform:translateX(-50%) scale(0.9);transform-origin:bottom center;z-index:100;display:flex;flex-direction:column;align-items:center;pointer-events:none;
}
.bottom-control-panel-background
{
position:relative;display:flex;justify-content:center;align-items:center;gap:24px;pointer-events:all;padding:12px 28px;border-radius:40px;background:rgb(20 20 20 / 50%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255, 255, 255, 0.15);box-shadow:0 10px 25px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.1);
}
.bottom-panel-mode
{
display:flex;gap:24px;align-items:center;
}
.bottom-panel-mode.hidden
{
display:none;
}
.bottom-control-button
{
display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:55px;cursor:pointer;transition:all 0.2s ease;background:transparent;border:none;padding:0;position:relative;outline:2px solid rgba(255, 255, 255, 0.2);outline-offset:2px;border-radius:12px;box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
}
.bottom-control-icon
{
width:35px;height:35px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));transition:transform 0.2s ease;margin-bottom:2px;
}
.bottom-control-icon-text
{
font-size:11px;font-weight:bold;color:#f0f0f0;text-shadow:0 1px 3px black;font-family:'Quicksand', sans-serif;line-height:1.2;text-align:center;max-width:52px;word-break:break-word;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.bottom-control-button:hover
{
outline-color:rgba(255, 255, 255, 0.6);box-shadow:0 0 15px rgba(255, 255, 255, 0.3);transform:translateY(-2px);
}
.bottom-control-button:hover .bottom-control-icon
{
transform:scale(1.05);
}
.bottom-control-button.active
{
outline-color:#ffaa33;box-shadow:0 0 20px #ffaa33, inset 0 0 8px #ffaa33;animation:activePulse 1.5s infinite alternate;
}
.bottom-control-button.active .bottom-control-icon
{
filter:drop-shadow(0 0 8px #ffaa33);
}
@keyframes activePulse
{
from
{
outline-color:#ffaa33;box-shadow:0 0 15px #ffaa33;
}
to
{
outline-color:#ff5500;box-shadow:0 0 25px #ff5500;
}

}
.bottom-control-button.inventory-btn:hover
{
outline-color:#6ab04c;box-shadow:0 0 15px #6ab04c;
}
.bottom-control-button.warehouse-btn:hover
{
outline-color:#f39c12;box-shadow:0 0 15px #f39c12;
}
.bottom-control-button.weed-remove-btn:hover,.bottom-control-button.weed-plant-btn:hover
{
outline-color:#e67e22;box-shadow:0 0 15px #e67e22;
}
.weed-remove-btn .bottom-control-icon-text,.weed-plant-btn .bottom-control-icon-text
{
font-size:10px;line-height:1.3;display:flex;align-items:center;justify-content:center;height:100%;padding:0 2px;
}
.viewing-farm-banner
{
position:fixed;top:calc(var(--app-safe-top) + 194px);left:50%;transform:translateX(-50%);z-index:90;display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 20px;border-radius:20px;background:linear-gradient(135deg, rgba(90, 156, 74, 0.96) 0%, rgba(74, 140, 58, 0.96) 100%);box-shadow:0 -2px 16px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.2);max-width:calc(100vw - 32px);
}
.viewing-farm-banner.hidden
{
display:none;
}
.load-user-farm-overlay.hidden
{
opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.5s ease, visibility 0.5s ease;
}
.user-panel.hidden
{
opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.3s ease, visibility 0.3s ease;
}
.bottom-panel-mode
{
display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap;
}
.bottom-panel-mode.hidden
{
display:none !important;
}
.bottom-control-button .bottom-control-icon-text
{
font-size:12px;font-weight:700;color:#5c4a32;
}
.bottom-control-button.weed-plant-btn.active,.bottom-control-button.weed-remove-btn.active
{
box-shadow:0 0 0 3px rgba(180, 100, 50, 0.6);
}
.viewing-farm-name
{
font-family:'Quicksand', sans-serif;font-size:15px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0, 0, 0, 0.3);
}
.return-to-my-farm-btn
{
padding:8px 16px;border:none;border-radius:12px;background:rgba(255, 255, 255, 0.95);color:#2e7d32;font-family:'Quicksand', sans-serif;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 2px 6px rgba(0, 0, 0, 0.15);transition:transform 0.2s, box-shadow 0.2s;
}
.return-to-my-farm-btn:hover
{
transform:translateY(-1px);box-shadow:0 4px 10px rgba(0, 0, 0, 0.2);
}
.user-panel-actions
{
position:absolute;display:flex;gap:7px;z-index:26;flex-direction:column-reverse;
}
.user-panel-actions--left
{
top:calc(var(--app-safe-top) + 176px);left:calc(var(--app-safe-left) + 10px);
}
.user-panel-actions--right
{
top:calc(var(--app-safe-top) + 176px);right:calc(var(--app-safe-right) + 10px);
}
.user-panel-action-btn
{
position:relative;width:42px;height:42px;border:1px solid rgb(40 88 149 / 33%);border-radius:14px;background:linear-gradient(180deg, rgb(218 206 235 / 52%), #8ec6cdc7);box-shadow:0 0px 15px rgb(0 0 0 / 21%);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.user-panel-action-btn:active
{
transform:translateY(1px);
}
.user-panel-action-icon
{
width:22px;height:22px;object-fit:contain;
}
.user-panel-action-badge
{
position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#d94747;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(136, 24, 24, 0.28);
}
.user-active-achievement-badge
{
position:absolute;left:80%;top:calc(100% - 11px);transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:999px;background:rgba(255, 249, 228, 0.92);border:1px solid rgba(184, 143, 76, 0.55);box-shadow:0 4px 10px rgba(92, 68, 35, 0.16);font-size:8px;line-height:1;cursor:help;z-index:3;
}
@media (max-width: 768px)
{
    .user-panel-actions--left
{
top:calc(var(--app-safe-top) + 176px);left:calc(var(--app-safe-left) + 10px);
}
.user-panel-actions--right
{
top:calc(var(--app-safe-top) + 117px);right:calc(var(--app-safe-right) + 10px);
}

}
.users-list
{
display:flex;flex-direction:column;gap:10px;padding:8px 0;
}
.user-list-item
{
display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg, rgba(250, 246, 237, 0.9) 0%, rgba(240, 233, 216, 0.85) 100%);border:2px solid rgba(166, 124, 82, 0.4);cursor:pointer;transition:transform 0.2s, box-shadow 0.2s;list-style:none;text-align:left;width:100%;box-sizing:border-box;font-family:inherit;appearance:none;margin:0;
}
.user-list-item:hover
{
transform:translateY(-2px);box-shadow:0 4px 14px rgba(0, 0, 0, 0.12);
}
.user-list-item-avatar
{
width:44px;height:44px;border-radius:50%;object-fit:cover;background:#e0d5c5;
}
.user-list-item-info
{
flex:1;min-width:0;
}
.user-list-item-name
{
font-family:'Quicksand', sans-serif;font-size:16px;font-weight:700;color:#4a3c2e;
}
.user-list-item-meta
{
font-size:13px;color:#6b5344;margin-top:2px;
}
.users-list-pagination
{
display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 0 8px;margin-top:8px;border-top:1px solid rgba(166, 124, 82, 0.25);
}
.users-pagination-btn
{
padding:8px 14px;border-radius:10px;border:2px solid rgba(166, 124, 82, 0.5);background:linear-gradient(135deg, rgba(250, 246, 237, 0.95), rgba(240, 233, 216, 0.9));color:#5c4a32;font-weight:600;cursor:pointer;transition:transform 0.15s, box-shadow 0.15s;
}
.users-pagination-btn:hover:not(:disabled)
{
transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.users-pagination-btn:disabled
{
opacity:0.5;cursor:not-allowed;
}
.users-pagination-info
{
font-size:14px;color:#6b5344;font-weight:600;
}
.users-table-wrap
{
width:100%;overflow-x:auto;
}
.users-table-sort
{
margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.users-table-sort label
{
font-size:13px;color:#6b5344;
}
.users-sort-select
{
padding:6px 10px;border-radius:8px;border:2px solid rgba(166,124,82,0.5);background:#faf6ed;color:#5c4a32;font-weight:600;
}
.users-table
{
width:100%;border-collapse:collapse;font-size:14px;
}
.users-table th, .users-table td
{
padding:10px 12px;text-align:left;border-bottom:1px solid rgba(166,124,82,0.25);
}
.users-table th
{
background:rgba(166,124,82,0.15);color:#5c4a32;font-weight:700;
}
.users-table tbody tr:hover:not(.user-table-row-me)
{
background:rgba(250,246,237,0.8);
}
.user-table-row-me
{
background:rgba(94, 140, 60, 0.12);font-weight:600;
}
.user-table-me-label
{
color:#2e7d32;font-size:12px;
}
.user-table-avatar
{
width:44px;
}
.user-table-avatar .user-list-item-avatar
{
width:36px;height:36px;border-radius:50%;object-fit:cover;
}
.user-table-avatar .user-list-item-avatar-fallback
{
width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#c4a574;color:#5c4a32;font-weight:bold;font-size:14px;
}
.user-table-level, .user-table-money
{
white-space:nowrap;
}
.users-tabbar,.users-search-form
{
display:flex;align-items:center;gap:8px;margin:0;
}
.users-tab-btn
{
min-height:28px;padding:4px 12px;border-radius:8px;border:2px solid rgba(166,124,82,0.45);background:rgba(250,246,237,0.95);color:#5c4a32;font-weight:700;cursor:pointer;position:relative;
}
.users-tab-btn.active
{
background:rgba(94,140,60,0.16);border-color:rgba(94,140,60,0.45);color:#2e7d32;
}
.users-tab-badge
{
min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:999px;background:#b3261e;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;
}
.users-search-input
{
flex:1 1 160px;min-width:0;min-height:30px;padding:4px 10px;border-radius:8px;border:2px solid rgba(166,124,82,0.45);background:#faf6ed;color:#5c4a32;font-weight:600;
}
.users-search-submit
{
min-height:28px;padding:5px 10px;border-radius:8px;border:2px solid rgba(166,124,82,0.45);background:rgba(250,246,237,0.95);color:#5c4a32;font-weight:700;cursor:pointer;
}
.users-search-clear
{
min-height:28px;padding:5px 10px;border-radius:8px;border:2px solid rgba(166,124,82,0.45);background:rgba(250,246,237,0.95);color:#5c4a32;font-weight:700;cursor:pointer;
}
.user-friend-action-btn
{
min-height:28px;border-radius:8px;border:2px solid rgba(166,124,82,0.45);background:rgba(250,246,237,0.95);color:#5c4a32;font-weight:700;cursor:pointer;
}
.friend-request-response-btn
{
min-height:28px;border-radius:8px;border:2px solid rgba(166,124,82,0.45);background:rgba(250,246,237,0.95);color:#5c4a32;font-weight:700;cursor:pointer;
}
.users-search-clear:disabled,.user-friend-action-btn:disabled,.friend-request-response-btn:disabled
{
opacity:0.55;cursor:not-allowed;
}
.user-table-username,.user-table-status
{
display:block;margin-top:2px;font-size:11px;line-height:1.2;color:#7a6757;font-weight:600;
}
.user-table-status
{
color:#6b7d2e;
}
.user-table-gift
{
display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap;
}
.user-friend-action-btn,.friend-request-response-btn
{
width:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;
}
.friend-request-actions
{
display:inline-flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:74px;
}
.friend-request-response-btn--danger,.user-friend-action-btn--cancel
{
border-color:rgba(179,38,30,0.45);color:#8c1d18;
}
.friend-requests-block
{
margin:0 0 10px;padding:8px;border:1px solid rgba(94,140,60,0.22);border-radius:8px;background:rgba(94,140,60,0.08);
}
.friend-requests-title
{
margin:0 0 6px;font-size:12px;font-weight:800;color:#2e7d32;
}
.users-table-wrap
{
padding:10px !important;
}
.users-table
{
font-size:12px !important;
}
.users-table th,.users-table td
{
padding:7px 8px !important;
}
.users-table-sort
{
margin-bottom:8px !important;
}
.users-table-sort label
{
font-size:11px !important;
}
.users-sort-select
{
min-height:32px !important;padding:5px 9px !important;font-size:11px !important;
}
.user-table-avatar
{
width:36px !important;
}
.user-table-avatar .user-list-item-avatar,.user-table-avatar .user-list-item-avatar-fallback
{
width:28px !important;height:28px !important;font-size:11px !important;
}
.user-table-me-label
{
font-size:10px !important;
}
.users-list-pagination
{
gap:8px !important;padding:10px 0 4px !important;
}
.container
{
overflow-x:auto;overflow-y:hidden;max-width:100%;width:100vw;height:100vh;position:fixed;inset:0;display:flex;flex-direction:column;touch-action:pan-x;overscroll-behavior:none;min-height:100vh;scrollbar-width:none;-ms-overflow-style:none;
}
.container::-webkit-scrollbar
{
display:none;
}
@media (min-width: 769px) and (pointer: fine)
{
  .container
{
background:#101820;
}
.container::before
{
content: "";position:fixed;inset:-32px;z-index:0;pointer-events:none;background-image:var(--farm-scene-background-image);background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(26px) saturate(1.08);transform:scale(1.08);opacity:0.72;
}

}
#fireflyCanvas
{
position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9;display:block;
}
#scene-scroll-spacer
{
flex:0 0 1px;align-self:flex-start;width:100vw;height:1px;opacity:0;pointer-events:none;
}
.app-outer-container
{
position:relative;width:100%;min-height:123vh;display:flex;justify-content:center;align-items:center;overflow:hidden;
}
.bg-img-full-height
{
height:885.6px;width:auto;min-width:0;flex-shrink:0;object-fit:contain;pointer-events:none;margin-top:-7px;z-index:3;
}
.scene-layer
{
position:absolute;top:0;left:0;width:682px;height:885.6px;transform-origin:top left;pointer-events:none;z-index:1;
}
.scene-layer picture
{
position:absolute;top:0;left:0;z-index:1;display:block;pointer-events:none;
}
.scaled-content
{
position:absolute;top:0;left:0;transform-origin:top left;pointer-events:none;
}
.farm-animal-layer
{
position:absolute;top:0;left:0;width:682px;height:885.6px;transform-origin:top left;pointer-events:none;z-index:9;
}
.farm-animal-layer .animal
{
pointer-events:auto;
}
.garden-bed, .booth, .video-item, .animation_water, .animation_tree, .zabor2, .alhimia, .inventory-cry, .animal-container
{
pointer-events:auto;z-index:1;
}
.booth, .zabor2, .inventory-cry, .animation_water, .animation_tree, .video-item
{
transition:all 0.3s ease;transform-origin:top left;
}
.farm-decor-item.hidden
{
display:none !important;
}
.booth
{
position:absolute;flex-shrink:0;width:75px;height:72px;margin:0 auto;margin-top:253px;left:85px;z-index:2;transform:rotate(28deg) skewY(339deg) skewX(25deg);
}
.zabor2
{
position:absolute;width:231px;height:237px;top:285px;left:450px;z-index:1;transform:rotate(0deg) skewY(0) skewX(0deg);
}
.inventory-cry
{
position:absolute;flex-shrink:0;width:149px;height:204px;margin:0 auto;margin-top:149px;left:295px;z-index:1;transform:rotate(26deg) skewY(-29deg) skewX(22deg);
}
.bg-animations
{
position:absolute;top:0;left:0;z-index:-1;pointer-events:none;transform-origin:top left;
}
.video-item, .animation_water, .animation_tree
{
position:absolute;pointer-events:none;z-index:0;opacity:1;
}
.video-item
{
width:682px;height:220px;top:0px;left:0px;
}
.animation_water
{
width:236px;height:101px;top:187px;left:-13px;
}
.animation_tree
{
width:240px;height:312px;top:500px;left:-11px;
}
.modal-overlay
{
position:fixed;inset:0;background:#0000008c;display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease;pointer-events:none;
}
.modal-overlay.active
{
opacity:1;visibility:visible;pointer-events:all;
}
.modal-overlay:not(.active)
{
display:none !important;opacity:0 !important;visibility:hidden !important;pointer-events:none !important;background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}

.modal-overlay.active .modal-window
{
transform:scale(1);opacity:1;
}
.modal-scrollable
{
padding:0px 23px 0px 23px;max-height:calc(85vh - 120px);min-height:300px;overflow-y:auto;overflow-x:hidden;flex:1;scrollbar-width:none;
}
.modal-scrollable::-webkit-scrollbar
{
display:none;width:0;height:0;
}
.close-btn
{
position:absolute;top:13px;right:17px;width:32px;height:32px;border:none;background:transparent;cursor:pointer;z-index:201;pointer-events:all;padding:0;overflow:hidden;border-radius:0;display:flex;align-items:center;justify-content:center;
}
.close-btn-png-background
{
position:absolute;top:0;left:0;right:0;bottom:0;background:url('image/window/close-btn-bg.png') no-repeat center center;background-size:100% 100%;z-index:1;pointer-events:none;transition:all 0.3s ease;
}
.close-btn:hover .close-btn-png-background
{
transform:scale(1.0);filter:brightness(1.05);
}
.close-btn:hover
{
transform:rotate(90deg);color:#ffcccc;
}
.close-btn:active .close-btn-png-background
{
transform:scale(0.95);
}
.bottom-close-btn-container
{
position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);width:100%;display:flex;justify-content:center;z-index:150;pointer-events:none;
}
.bottom-close-btn
{
width:140px;height:50px;border:none;background:transparent;cursor:pointer;padding:0;position:relative;pointer-events:all;border-radius:0;display:flex;align-items:center;justify-content:center;
}
.bottom-close-btn-png-background
{
position:absolute;top:0;left:0;right:0;bottom:0;background:url('image/window/close-btn-bg.png') no-repeat center center;background-size:100% 100%;z-index:1;pointer-events:none;transition:all 0.3s ease;
}
.bottom-close-btn-text
{
position:relative;z-index:2;font-size:18px;font-weight:bold;color:#ffffff;text-shadow:1px 1px 2px rgba(0, 0, 0, 0.8),        0 0 10px rgba(255, 255, 255, 0.3);transition:all 0.3s ease;font-family:'Quicksand', sans-serif;letter-spacing:0.5px;
}
.bottom-close-btn:hover .bottom-close-btn-png-background
{
transform:scale(1.05);filter:brightness(1.2) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.bottom-close-btn:hover .bottom-close-btn-text
{
transform:translateY(-2px);text-shadow:1px 1px 2px rgba(0, 0, 0, 0.8),        0 0 15px rgba(255, 255, 255, 0.5);
}
.bottom-close-btn:active .bottom-close-btn-png-background
{
transform:scale(0.98);
}
.bottom-close-btn:active .bottom-close-btn-text
{
transform:translateY(1px);
}
@keyframes close-btn-pulse
{
0%
{
transform:scale(1);filter:brightness(1);
}
50%
{
transform:scale(1.03);filter:brightness(1.1);
}
100%
{
transform:scale(1);filter:brightness(1);
}

}
.warning-message::before
{
content: '';position:absolute;top:0;left:0;right:0;bottom:0;background:url('image/window/open_notif.png') no-repeat center center;background-size:100% 100%;z-index:-1;border-radius:15px;
}
.warning-message .message-content p
{
color:#ff9800;
}
.bottom-control-button.water-btn:hover
{
outline-color:#3498db;box-shadow:0 0 15px #3498db;
}
.bottom-control-button.water-btn.active
{
outline-color:#3498db;box-shadow:0 0 20px #3498db, inset 0 0 8px #3498db;animation:waterPulse 1.5s infinite alternate;
}
@keyframes waterPulse
{
from
{
outline-color:#3498db;box-shadow:0 0 15px #3498db;
}
to
{
outline-color:#1f618d;box-shadow:0 0 25px #1f618d;
}

}
.bed-water-info
{
display:block !important;margin-top:12px;padding:10px;background:#e8f5e9;border-radius:6px;border:1px solid #81c784;color:#2e7d32;font-size:14px;text-align:center;
}
.bed-water-info.drought
{
background:#ffebee;border-color:#ef5350;color:#c62828;
}
.banner-header
{
position:absolute;top:-31px;left:0;right:0;height:80px;z-index:150;pointer-events:none;
}
.banner-content
{
width:100%;height:100%;bottom:10px;display:flex;justify-content:center;align-items:center;position:relative;z-index:200;
}
.banner-png-background
{
position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:var(--banner-width, 200px);height:var(--banner-height, 70px);background-image:var(--banner-image, url('image/window/side_text.png'));background-repeat:no-repeat;background-position:center center;background-size:contain;z-index:1;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));transition:all 0.3s ease;
}
.banner-title
{
position:relative;z-index:2;top:-2px;font-size:28px;color:#f7c917f0;font-weight:bold;text-shadow:2px 2px 4px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 255, 255, 0.3);font-family:'Dancing Script', cursive;text-align:center;padding:5px 20px;white-space:nowrap;pointer-events:none;
}
.banner-header[data-banner-type="shop"] .banner-png-background
{
--banner-width:220px;--banner-height:75px;--banner-image:url('image/window/side_text.png');
}
.banner-header[data-banner-type="inventory"] .banner-png-background
{
--banner-width:250px;--banner-height:80px;--banner-image:url('image/window/side_text.png');
}
.banner-header[data-banner-type="warehouse"] .banner-png-background
{
--banner-width:240px;--banner-height:78px;--banner-image:url('image/window/side_text.png');
}
.banner-header[data-banner-type="default"] .banner-png-background
{
--banner-width:200px;--banner-height:70px;--banner-image:url('image/window/side_text.png');
}
@keyframes bannerSlideDown
{
from
{
transform:translateY(-20px) translateX(-50%);opacity:0;
}
to
{
transform:translateY(0) translateX(-50%);opacity:1;
}

}
.bed-modal-content
{
padding-top:40px;
}
.bed-title
{
margin:0 0 16px 0;font-family:'Quicksand', sans-serif;font-size:18px;font-weight:700;color:#5c4a32;text-align:center;letter-spacing:0.02em;text-shadow:0 1px 0 rgba(255, 255, 255, 0.6);
}
.bed-info.bed-info--empty
{
text-align:center;padding:16px 20px;border-radius:14px;background:linear-gradient(135deg, rgba(210, 190, 160, 0.4) 0%, rgba(195, 175, 145, 0.3) 100%);border:1px solid rgba(139, 105, 82, 0.25);color:#5c4a32;font-style:italic;
}
.bed-plant-card
{
padding:18px 20px;border-radius:16px;background:linear-gradient(165deg, rgba(250, 246, 237, 0.95) 0%, rgba(240, 233, 216, 0.9) 100%);border:2px solid rgba(166, 124, 82, 0.5);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.08);box-sizing:border-box;
}
.bed-plant-name
{
display:block;font-size:20px;font-weight:700;color:#4a3c2e;text-align:center;margin-bottom:14px;text-transform:capitalize;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
}
.bed-plant-icon
{
display:block;width:clamp(42px, 13vw, 58px);height:clamp(42px, 13vw, 58px);object-fit:contain;margin:0 auto 6px;
}
.bed-growth
{
margin-bottom:14px;
}
.bed-stage-label
{
font-size:11px;font-weight:600;color:#6b5344;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;
}
.bed-stage-bar
{
height:10px;border-radius:6px;background:rgba(139, 115, 85, 0.35);overflow:hidden;margin-bottom:6px;
}
.bed-stage-fill
{
height:100%;border-radius:6px;background:linear-gradient(90deg, #7cb86a 0%, #5a9c4a 100%);transition:width 0.35s ease-out;
}
.bed-stage-text
{
font-size:13px;color:#6b5344;font-weight:600;
}
.bed-time-block
{
padding:10px 14px;border-radius:10px;background:rgba(90, 156, 74, 0.12);border:1px solid rgba(90, 156, 74, 0.35);text-align:center;
}
.bed-time
{
font-size:14px;font-weight:600;color:#3d6b32;
}
.bed-plant-card--ready .bed-ready-badge
{
display:inline-block;margin-top:8px;padding:8px 16px;border-radius:12px;background:linear-gradient(135deg, #5a9c4a 0%, #4a8c3a 100%);color:#fff;font-size:15px;font-weight:700;text-shadow:0 1px 2px rgba(0, 0, 0, 0.2);box-shadow:0 2px 8px rgba(90, 156, 74, 0.4);
}
.bed-plant-card--ready .bed-growth,.bed-plant-card--ready .bed-time-block
{
display:none;
}
.access-message
{
text-align:center;padding:16px;border-radius:14px;background:rgba(220, 200, 180, 0.4);border:1px solid rgba(139, 105, 82, 0.3);color:#5c4a32;font-size:14px;line-height:1.5;margin-bottom:16px;
}
.access-message p
{
margin:0 0 8px 0;
}
.access-message p:last-child
{
margin-bottom:0;
}
.plant-actions
{
display:flex;flex-direction:column;gap:0px;margin-bottom:var(--spacing-xl);
}
.plant-actions button
{
border:none;border-radius:14px;cursor:pointer;font-family:'Quicksand', sans-serif;font-size:15px;font-weight:700;transition:transform 0.2s, box-shadow 0.2s, filter 0.2s;box-shadow:0 3px 10px rgba(0, 0, 0, 0.12);
}
.plant-actions button:not(.danger):not(:disabled)
{
background:linear-gradient(180deg, #f0e9d8 0%, #e8dfc8 100%);color:#775b36d1;border:2px solid rgba(166, 124, 82, 0.5);margin-left:2px;
}
.plant-actions button:hover:not(:disabled)
{
box-shadow:0 5px 14px rgba(0, 0, 0, 0.15);filter:brightness(1.02);
}
.plant-actions button:disabled
{
opacity:0.6;cursor:not-allowed;
}
.plant-actions .harvest-btn
{
background:linear-gradient(135deg, #5a9c4a 0%, #4a8c3a 100%) !important;color:#fff !important;border:none !important;font-size:16px;box-shadow:0 4px 14px rgba(90, 156, 74, 0.35);
}
.plant-actions .harvest-btn:hover:not(:disabled)
{
background:linear-gradient(135deg, #6aac5a 0%, #5a9c4a 100%) !important;box-shadow:0 6px 18px rgba(90, 156, 74, 0.45);
}
.plant-actions .danger
{
background:linear-gradient(135deg, #c75c5c 0%, #a63c3c 100%);color:#fff;border:none;
}
.plant-actions .danger:hover
{
background:linear-gradient(135deg, #d66c6c 0%, #b64c4c 100%);box-shadow:0 5px 14px rgba(166, 60, 60, 0.3);
}
.lilies-decoration
{
position:absolute;bottom:20px;right:20px;width:80px;height:80px;transform:rotate(3deg);pointer-events:none;z-index:1;
}
.modal-frame
{
position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:140;
}
.modal-scrollable::-webkit-scrollbar
{
display:none;width:0;height:0;
}
.modal-scrollable::-webkit-scrollbar-track
{
background:rgba(255,255,255,0.3);border-radius:5px;margin:5px 0;
}
.modal-scrollable::-webkit-scrollbar-thumb
{
background:#888;border-radius:5px;border:2px solid rgba(255,255,255,0.5);
}
.modal-scrollable::-webkit-scrollbar-thumb:hover
{
background:#555;
}
#farm-field-container
{
position:absolute;inset:0;z-index:0;width:100%;height:100vh;pointer-events:auto;touch-action:pan-x;bottom:auto;
}
.farm-bed
{
position:absolute;cursor:pointer;z-index:3;transition:transform 0.2s ease;pointer-events:auto;
}
.farm-bed-content
{
width:100%;height:100%;position:relative;pointer-events:auto;
}
.farm-bed-content svg
{
display:block;width:100%;height:100%;
}
.farm-bed img.plant
{
position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);pointer-events:none;width:60%;height:auto;z-index:5;max-width:100%;
}
.harvest-btn
{
background:linear-gradient(135deg, var(--warning-orange), #e67e22);color:white;border:none;padding:12px 20px;border-radius:var(--radius-md);font-size:1.1em;font-weight:bold;cursor:pointer;transition:all 0.3s ease;margin-bottom:10px;width:100%;box-shadow:0 4px 6px rgba(243, 156, 18, 0.3);
}
.harvest-btn:hover
{
background:linear-gradient(135deg, #e67e22, #d35400);transform:translateY(-2px);box-shadow:0 6px 8px rgba(243, 156, 18, 0.4);
}
.time-left
{
display:block;margin-top:8px;padding:5px 10px;background:linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(41, 128, 185, 0.1));border-radius:10px;border:1px solid var(--secondary-blue);color:#2c3e50;font-size:0.9em;font-weight:bold;text-align:center;animation:pulse 2s infinite;
}
@keyframes pulse
{
0%
{
box-shadow:0 0 0 0 rgba(52, 152, 219, 0.4);
}
70%
{
box-shadow:0 0 0 5px rgba(52, 152, 219, 0);
}
100%
{
box-shadow:0 0 0 0 rgba(52, 152, 219, 0);
}

}
#remove-btn
{
background:linear-gradient(135deg, var(--danger-red), #c0392b);color:white;border:none;padding:12px 20px;border-radius:var(--radius-md);font-size:1.1em;font-weight:bold;cursor:pointer;transition:all 0.3s ease;margin-top:10px;width:100%;box-shadow:0 4px 6px rgba(231, 76, 60, 0.3);
}
#remove-btn:hover
{
background:linear-gradient(135deg, #c0392b, #a93226);transform:translateY(-2px);box-shadow:0 6px 8px rgba(231, 76, 60, 0.4);
}
.loading-inventory, .loading-shop
{
text-align:center;padding:var(--spacing-xl);color:#666;
}
.loading-inventory p, .loading-shop p
{
margin:10px 0;font-size:16px;
}
.plant-success-message .notification-close-btn,.error-message .notification-close-btn,.info-message .notification-close-btn,.plant-selection-message .notification-close-btn, .end-of-plants-message .notification-close-btn,.shovel-notification .notification-close-btn,.permanent-planting-message .notification-close-btn
{
position:absolute;top:8px;right:8px;width:28px;height:28px;border:none;background:transparent;cursor:pointer;z-index:10;padding:0;display:flex;align-items:center;justify-content:center;
}
.plant-success-message .close-btn-png-background,.error-message .close-btn-png-background,.info-message .close-btn-png-background,.plant-selection-message .close-btn-png-background, .end-of-plants-message .close-btn-png-background,.shovel-notification .close-btn-png-background,.permanent-planting-message .close-btn-png-background
{
position:absolute;top:0;left:0;right:0;bottom:0;background:url('image/window/close-btn-bg.png') no-repeat center center;background-size:100% 100%;z-index:1;pointer-events:none;transition:all 0.3s ease;
}
.plant-success-message .close-btn-text,.error-message .close-btn-text,.info-message .close-btn-text,.plant-selection-message .close-btn-text,.end-of-plants-message .close-btn-text,.shovel-notification .close-btn-text,.permanent-planting-message .close-btn-text
{
position:relative;z-index:2;color:white;font-size:16px;font-weight:bold;text-shadow:0 1px 2px rgba(0, 0, 0, 0.5);pointer-events:none;
}
.plant-success-message .notification-close-btn:hover .close-btn-png-background,.error-message .notification-close-btn:hover .close-btn-png-background,.info-message .notification-close-btn:hover .close-btn-png-background,.plant-selection-message .notification-close-btn:hover .close-btn-png-background,.end-of-plants-message .notification-close-btn:hover .close-btn-png-background,.shovel-notification .notification-close-btn:hover .close-btn-png-background,.permanent-planting-message .notification-close-btn:hover .close-btn-png-background
{
transform:scale(1.05);filter:brightness(1.1);
}
.plant-success-message .notification-close-btn:hover .close-btn-text,.error-message .notification-close-btn:hover .close-btn-text,.info-message .notification-close-btn:hover .close-btn-text,.plant-selection-message .notification-close-btn:hover .close-btn-text,.end-of-plants-message .notification-close-btn:hover .close-btn-text,.shovel-notification .notification-close-btn:hover .close-btn-text,.permanent-planting-message .notification-close-btn:hover .close-btn-text
{
color:#ffcccc;
}
.permanent-planting-message
{
position:fixed;top:calc(var(--app-safe-top) + 250px);left:50%;color:white;padding:15px 25px;z-index:17000;text-align:center;font-weight:bold;backdrop-filter:none;border:none;width:min(calc(100vw - 24px), 320px);max-width:calc(100vw - 24px);min-width:0;box-sizing:border-box;animation:floatMessage 3s ease-in-out infinite;min-height:118px;transform:translateX(-50%);
}
.permanent-planting-message::before
{
content: '';position:absolute;top:0;left:0;right:0;bottom:0;background:url('image/window/open_notif.png') no-repeat center center;background-size:100% 100%;z-index:-1;pointer-events:none;border-radius:15px;
}
.permanent-planting-message .message-content
{
max-width:73%;
}
.permanent-planting-message .message-content p
{
font-size:13px;line-height:1.2;max-height:none;margin:1px 0;
}
.permanent-planting-message .message-content .hint-text
{
font-size:12px;line-height:1.15;opacity:0.95;
}
.permanent-planting-message .message-content button
{
margin-top:5px;padding:4px 10px;font-size:12px;max-width:75%;
}
.plant-selection-message
{
position:fixed;top:194px;left:50%;color:white;padding:15px 25px;z-index:17000;text-align:center;font-weight:bold;backdrop-filter:none;border:none;width:min(calc(100vw - 24px), 400px);max-width:calc(100vw - 24px);min-width:0;box-sizing:border-box;animation:floatMessage 3s ease-in-out infinite;min-height:80px;transform:translateX(-50%);
}
.plant-selection-message::before
{
content: '';position:absolute;top:0;left:0;right:0;bottom:0;background:url('image/window/open_notif.png') no-repeat center center;background-size:100% 100%;z-index:-1;pointer-events:none;border-radius:15px;
}
.plant-success-message,.error-message,.info-message,.plant-selection-message,.end-of-plants-message,.shovel-notification,.permanent-planting-message,.empty-bed-quote-box
{
position:fixed;top:194px;left:50%;color:white;padding:15px 25px;z-index:17000;text-align:center;font-weight:bold;backdrop-filter:none;border:none;width:min(calc(100vw - 24px), 360px);max-width:calc(100vw - 20px);min-width:0;max-height:110px;box-sizing:border-box;animation:floatMessage 3s ease-in-out infinite;min-height:80px;transform:translateX(-50%);max-width:calc(100vw - 25px);
}
.plant-success-message::before,.error-message::before,.info-message::before,.plant-selection-message::before,.end-of-plants-message::before,.shovel-notification::before,.permanent-planting-message::before
{
content: '';position:absolute;top:0;left:0;right:0;bottom:0;background:url('image/window/open_notif.png') no-repeat center center;background-size:100% 100%;z-index:-1;pointer-events:none;border-radius:15px;
}
.empty-bed-quote-box
{
background:linear-gradient(135deg, rgba(139, 195, 74, 0.9), rgba(76, 175, 80, 0.9));border-radius:15px;box-shadow:0 10px 25px rgba(0, 0, 0, 0.3);backdrop-filter:blur(10px);padding:20px 30px;
}
.empty-bed-quote-box::before
{
content:none !important;background:none !important;
}
.message-content
{
position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;box-sizing:border-box;text-align:center;max-width:90%;max-height:90%;margin:-4px auto;
}
.message-content p
{
margin:3px 0;padding:0px;position:relative;width:99%;max-width:95%;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;font-size:14px;text-align:center;text-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);max-height:70px;overflow-y:auto;white-space:pre-line;
}
.message-content p::-webkit-scrollbar
{
width:4px;
}
.message-content p::-webkit-scrollbar-thumb
{
background:rgba(255, 255, 255, 0.3);border-radius:2px;
}
.message-content .long-text
{
font-size:13px;line-height:1.2;
}
.message-content button
{
background:rgba(0, 190, 216, 0.7);border:none;border-radius:8px;font-weight:bold;cursor:pointer;transition:all 0.3s ease;width:auto;line-height:1.2;max-height:36px;min-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;top:11px;
}
.plant-success-message .message-content p
{
font-size:16px;max-height:60px;
}
.error-message .message-content p
{
font-size:15px;max-height:65px;
}
.info-message .message-content p
{
font-size:16px;max-height:70px;
}
.plant-selection-message .message-content p
{
font-size:15px;max-height:55px;
}
.end-of-plants-message .message-content p
{
font-size:15px;max-height:50px;
}
.end-of-plants-message .message-content .long-text
{
font-size:13px;max-height:40px;
}
.end-of-plants-message .message-content button
{
max-width:80%;font-size:14px;padding:7px 18px;
}
.shovel-notification .message-content p
{
font-size:16px;max-height:50px;
}
.shovel-notification .message-content button
{
max-width:90%;
}
.permanent-planting-message .message-content
{
max-width:73%;
}
.permanent-planting-message .message-content p
{
font-size:14px;line-height:1.2;max-height:none;margin:1px 0;
}
.permanent-planting-message .message-content button
{
margin-top:5px;padding:4px 10px;font-size:12px;max-width:75%;
}
@keyframes floatMessage
{
0%, 100%
{
transform:translateX(-50%) translateY(0);
}
50%
{
transform:translateX(-50%) translateY(-5px);
}

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

}
.message-content.text-xs p
{
font-size:11px;
}
.message-content.text-sm p
{
font-size:13px;
}
.message-content.text-md p
{
font-size:15px;
}
.message-content.text-lg p
{
font-size:17px;
}
.message-content.text-xl p
{
font-size:19px;
}
.message-content.height-xs p
{
max-height:40px;
}
.message-content.height-sm p
{
max-height:50px;
}
.message-content.height-md p
{
max-height:60px;
}
.message-content.height-lg p
{
max-height:70px;
}
.message-content.height-xl p
{
max-height:80px;
}
.message-content.width-xs
{
max-width:80%;
}
.message-content.width-sm
{
max-width:85%;
}
.message-content.width-md
{
max-width:90%;
}
.message-content.width-lg
{
max-width:95%;
}
.message-content .btn-xs
{
font-size:11px;padding:3px 8px;min-width:80px;max-width:70%;
}
.message-content .btn-sm
{
font-size:13px;padding:5px 12px;min-width:100px;max-width:80%;
}
.message-content .btn-md
{
font-size:15px;padding:7px 16px;min-width:120px;max-width:85%;
}
.message-content .btn-lg
{
font-size:17px;padding:9px 20px;min-width:140px;max-width:90%;
}
.notification-close-btn
{
background:transparent;border:none;color:white;font-size:20px;cursor:pointer;margin-left:10px;padding:0 8px;display:flex;align-items:center;justify-content:center;height:24px;width:24px;border-radius:50%;transition:all 0.3s ease;line-height:1;
}
.notification-close-btn:hover
{
background:rgba(255, 255, 255, 0.2);transform:scale(1.1);
}
.shovel-notification.temporary
{
animation:floatMessage 3s ease-in-out infinite, fadeOut 0.5s ease forwards;animation-delay:0s, calc(var(--duration, 3000ms) - 500ms);
}
.shovel-notification.permanent
{
display:flex;align-items:center;justify-content:space-between;padding-right:10px;
}
.shovel-notification
{
position:fixed;top:calc(var(--app-safe-top) + 194px);left:50%;color:white;padding:15px 25px;z-index:17000;text-align:center;font-weight:bold;backdrop-filter:none;border:none;width:min(calc(100vw - 24px), 400px);max-width:calc(100vw - 24px);min-width:0;box-sizing:border-box;animation:floatMessage 3s ease-in-out infinite;min-height:80px;transform:translateX(-50%);
}
.shovel-notification::before
{
content: '';position:absolute;top:0;left:0;right:0;bottom:0;background:url('image/window/open_notif.png') no-repeat center center;background-size:100% 100%;z-index:-1;pointer-events:none;border-radius:15px;
}
.shovel-notification.temporary
{
animation:floatMessage 3s ease-in-out infinite, fadeOut 0.5s ease forwards;animation-delay:0s, calc(var(--duration, 3000ms) - 500ms);
}
.shovel-notification.permanent
{
display:flex;align-items:center;justify-content:space-between;padding-right:10px;
}
.shovel-notification.permanent .notification-close-btn
{
flex-shrink:0;margin-left:10px;
}
.shovel-notification.permanent .notification-close-btn
{
flex-shrink:0;
}
.prices-container
{
margin-top:5px;
}
.price-buy
{
color:var(--danger-red);font-weight:bold;margin:2px 0;
}
.price-sell
{
color:var(--success-green);font-weight:bold;margin:2px 0;
}
.empty-bed-quote-box
{
position:fixed;z-index:10000;min-width:280px;max-width:320px;background:transparent;animation:quoteAppear 0.3s ease forwards;cursor:pointer;user-select:none;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:auto;
}
@keyframes quoteAppear
{
from
{
opacity:0;transform:translate(-50%, -40%);
}
to
{
opacity:1;transform:translate(-50%, -50%);
}

}
.quote-container
{
position:relative;background:linear-gradient(135deg, #73b7eecc, #778421);border:2px solid #49a22085;border-radius:var(--radius-md);padding:20px 25px;box-shadow:0 10px 25px rgba(0, 0, 0, 0.2);margin-bottom:8px;
}
.quote-top, .quote-bottom
{
position:absolute;left:20px;right:20px;height:2px;background:linear-gradient(90deg, transparent, var(--success-green), transparent);
}
.quote-top
{
top:-2px;
}
.quote-bottom
{
bottom:-2px;
}
.quote-text
{
font-size:15px;color:#f9ffba;font-style:italic;text-align:center;line-height:1.4;font-weight:500;padding:0 10px;position:relative;
}
.quote-text::before
{
content: '"';position:absolute;left:-15px;top:-5px;font-size:40px;color:rgba(76, 175, 80, 0.2);font-family:serif;
}
.quote-text::after
{
content: '"';position:absolute;right:-15px;bottom:-15px;font-size:40px;color:rgba(76, 175, 80, 0.2);font-family:serif;
}
.progress-bar-container
{
width:100%;height:4px;background:rgba(0, 0, 0, 0.1);border-radius:2px;overflow:hidden;position:relative;
}
.progress-bar
{
position:absolute;right:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg, #2E7D32, var(--success-green));animation:progressBarMove 3s linear forwards;
}
@keyframes progressBarMove
{
0%
{
transform:translateX(0%);
}
100%
{
transform:translateX(-100%);
}

}
.empty-bed-quote-box.fade-out
{
opacity:0;transform:translate(-50%, -60%);transition:opacity 0.3s ease, transform 0.3s ease;
}
.next-bed-png
{
position:absolute;top:-38%;left:22%;width:55%;height:auto;z-index:15;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}
.next-bed-png img
{
width:100%;height:100%;object-fit:contain;
}
.shop-tabs
{
display:flex;margin:0 0 8px 0;border-bottom:1px solid #4CAF50;background:transparent;
}
.shop-tab-btn
{
flex:1;padding:6px 2px;background:none;border:none;font-size:13px;font-weight:600;color:#888;cursor:pointer;transition:all 0.2s;border-bottom:2px solid transparent;
}
.shop-tab-btn:hover
{
color:#4CAF50;
}
.shop-tab-btn.active
{
color:#4CAF50;border-bottom-color:#4CAF50;background:rgba(76, 175, 80, 0.05);
}
.shop-items-container::-webkit-scrollbar
{
display:none;width:0;height:0;
}
.shop-items-container::-webkit-scrollbar-track
{
background:#f0f0f0;border-radius:2px;
}
.shop-items-container::-webkit-scrollbar-thumb
{
background:#4CAF50;border-radius:2px;
}
.shop-item-compact
{
margin:0;position:relative;
}
.item-top-line
{
height:1px;background:linear-gradient(90deg, transparent, #4CAF50, transparent);margin:4px 0;
}
.item-bottom-line
{
height:1px;background:linear-gradient(90deg, transparent, #e0e0e0, transparent);margin:4px 0 8px 0;
}
.item-content
{
display:flex;align-items:center;padding:5px 0;gap:6px;min-height:50px;
}
.item-image
{
flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #4CAF50;background:white;display:flex;align-items:center;justify-content:center;
}
.item-image img
{
width:28px;height:28px;object-fit:contain;
}
.item-info
{
flex:1;min-width:0;
}
.item-name
{
font-size:13px;font-weight:bold;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;
}
.item-stats
{
display:flex;gap:8px;font-size:11px;
}
.stat
{
padding:2px 6px;border-radius:4px;font-weight:600;
}
.stat.time
{
background:#e8f5e9;color:#2E7D32;
}
.stat.profit
{
background:#fff3e0;color:#ef6c00;
}
.item-controls
{
display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.quantity-control-compact
{
display:flex;align-items:center;border:1px solid #4CAF50;border-radius:5px;overflow:hidden;background:white;
}
.qty-btn
{
width:24px;height:24px;background:#4CAF50;color:white;border:none;font-size:14px;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;user-select:none;-webkit-user-select:none;
}
.qty-btn:active
{
background:#388E3C;
}
.qty-value
{
width:30px;height:24px;text-align:center;font-size:13px;font-weight:bold;color:#333;display:flex;align-items:center;justify-content:center;background:#f9f9f9;
}
.buy-btn-compact
{
width:70px;height:24px;background:linear-gradient(135deg, #4CAF50, #2E7D32);color:white;border:none;border-radius:5px;font-size:12px;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;transition:all 0.2s;padding:0 6px;
}
.buy-btn-compact:hover
{
background:linear-gradient(135deg, #43A047, #1B5E20);transform:scale(1.05);
}
.buy-btn-compact:disabled
{
background:#cccccc;cursor:not-allowed;transform:none;
}
.coin-icon
{
font-size:10px;
}
.buy-loading
{
animation:pulse 0.8s infinite;font-size:10px;
}
.animals-compact-message
{
display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;text-align:center;padding:20px;
}
.animals-compact-message .animals-icon
{
font-size:36px;margin-bottom:10px;animation:pulse 2s infinite;
}
.animals-compact-message .animals-title
{
font-size:16px;font-weight:bold;color:#666;margin-bottom:5px;
}
.animals-compact-message .animals-desc
{
font-size:12px;color:#999;
}
.quick-confirm-popup
{
position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn 0.2s ease;
}
.popup-content
{
background:white;border-radius:10px;padding:20px;width:85%;max-width:280px;text-align:center;animation:slideUp 0.3s ease;box-shadow:0 5px 20px rgba(0,0,0,0.3);
}
.popup-title
{
font-size:15px;font-weight:600;color:#333;margin-bottom:10px;
}
.popup-price
{
font-size:22px;font-weight:bold;color:#4CAF50;margin-bottom:8px;
}
.popup-balance
{
font-size:12px;color:#666;margin-bottom:15px;padding:5px;background:#f5f5f5;border-radius:5px;
}
.popup-buttons
{
display:flex;gap:10px;
}
.popup-buttons button
{
flex:1;padding:10px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;
}
.popup-cancel
{
background:#e0e0e0;color:#666;
}
.popup-cancel:hover
{
background:#d5d5d5;
}
.popup-confirm
{
background:linear-gradient(135deg, #4CAF50, #2E7D32);color:white;
}
.popup-confirm:hover
{
background:linear-gradient(135deg, #43A047, #1B5E20);
}
.harvest-animation
{
animation:harvestPop 0.3s ease-out forwards;
}
@keyframes harvestPop
{
0%
{
opacity:1;transform:scale(1);
}
50%
{
opacity:0.5;transform:scale(1.2);
}
100%
{
opacity:0;transform:scale(0);
}

}
.bed-fx-layer
{
position:fixed;inset:0;pointer-events:none;z-index:1400;overflow:hidden;
}
.harvest-coin-fly,.harvest-burst-particle,.bed-water-droplet,.bed-water-splash
{
position:fixed;pointer-events:none;will-change:transform, opacity;
}
.harvest-coin-fly
{
width:11px;height:11px;margin-left:-5.5px;margin-top:-5.5px;border-radius:50%;background:radial-gradient(circle at 32% 32%, #fff6bf 0%, #ffd95e 35%, #f2a600 70%, #c97c00 100%);box-shadow:0 0 10px rgba(255, 209, 71, 0.55);animation:harvestCoinFly 0.7s cubic-bezier(.22,.78,.24,1) forwards;animation-delay:var(--coin-delay, 0s);
}
.harvest-burst-particle
{
width:8px;height:8px;margin-left:-4px;margin-top:-4px;border-radius:50%;background:radial-gradient(circle, rgba(255,244,187,0.95) 0%, rgba(255,181,45,0.92) 58%, rgba(255,139,0,0.12) 100%);animation:harvestBurst 0.5s ease-out forwards;animation-delay:var(--burst-delay, 0s);
}
.bed-water-droplet
{
width:6px;height:12px;margin-left:-3px;margin-top:-6px;border-radius:60% 60% 70% 70%;background:linear-gradient(180deg, rgba(187,244,255,0.95) 0%, rgba(86,190,255,0.95) 70%, rgba(23,117,212,0.9) 100%);box-shadow:0 0 8px rgba(91, 196, 255, 0.4);transform-origin:center top;animation:waterDropletFall var(--water-duration, 0.56s) ease-in forwards;animation-delay:var(--water-delay, 0s);
}
.bed-water-splash
{
width:16px;height:8px;margin-left:-8px;margin-top:-4px;border:1.5px solid rgba(135, 220, 255, 0.9);border-radius:50%;opacity:0;transform:scale(0.2);animation:waterSplashRing var(--water-duration, 0.56s) ease-out forwards;animation-delay:calc(var(--water-delay, 0s) + 0.16s);
}
@keyframes harvestCoinFly
{
0%
{
opacity:0;transform:translate3d(0, 0, 0) scale(0.5);
}
18%
{
opacity:1;transform:translate3d(0, -18px, 0) scale(1);
}
100%
{
opacity:0;transform:translate3d(var(--target-x), var(--target-y), 0) scale(0.62);
}

}
@keyframes harvestBurst
{
0%
{
opacity:0;transform:translate3d(0, 0, 0) scale(0.2);
}
25%
{
opacity:1;
}
100%
{
opacity:0;transform:translate3d(var(--burst-x), var(--burst-y), 0) scale(1.3);
}

}
@keyframes waterDropletFall
{
0%
{
opacity:0;transform:translate3d(0, -8px, 0) scale(0.6);
}
20%
{
opacity:1;
}
100%
{
opacity:0;transform:translate3d(0, 30px, 0) scale(0.82);
}

}
@keyframes waterSplashRing
{
0%
{
opacity:0;transform:scale(0.2);
}
35%
{
opacity:0.9;
}
100%
{
opacity:0;transform:scale(var(--splash-scale, 1.3));
}

}
.control-button.lang-btn
{
position:relative;min-width:60px;
}
.lang-code
{
position:absolute;bottom:-5px;right:-5px;background:#4CAF50;color:white;font-size:10px;font-weight:bold;padding:2px 4px;border-radius:4px;border:1px solid white;
}
.lang-updated
{
animation:langPulse 0.5s ease;
}
@keyframes langPulse
{
0%
{
transform:scale(1);
}
50%
{
transform:scale(1.2);
}
100%
{
transform:scale(1);
}

}
.settings-content
{
padding:10px 5px;
}
.settings-row
{
display:flex;align-items:center;justify-content:space-between;padding:12px 10px;background:rgba(255, 255, 255, 0.4);border-radius:10px;margin-bottom:12px;border:1px solid rgba(76, 175, 80, 0.2);
}
.settings-label
{
display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#2E7D32;
}
.settings-icon
{
font-size:18px;
}
.settings-select-wrapper
{
position:relative;width:140px;
}
.settings-select
{
width:100%;padding:8px 12px;padding-right:30px;background:white;border:1px solid #4CAF50;border-radius:8px;font-size:13px;font-weight:500;color:#333;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;transition:all 0.2s;
}
.settings-select:hover
{
border-color:#2E7D32;box-shadow:0 2px 6px rgba(76, 175, 80, 0.2);
}
.settings-select:focus
{
outline:none;border-color:#2E7D32;box-shadow:0 0 0 2px rgba(76, 175, 80, 0.3);
}
.select-arrow
{
position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#4CAF50;font-size:12px;pointer-events:none;
}
.settings-select option
{
padding:8px;font-size:13px;
}
.settings-note
{
font-size:11px;color:#666;text-align:center;margin:10px 0 15px 0;padding:8px;background:rgba(255, 255, 255, 0.3);border-radius:6px;font-style:italic;
}
.settings-actions
{
display:flex;justify-content:flex-end;gap:8px;margin-top:15px;padding-top:10px;border-top:1px solid rgba(166, 124, 82, 0.2);
}
.settings-apply-btn
{
background:linear-gradient(135deg, #4CAF50, #2E7D32);color:white;border:none;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;min-width:90px;
}
.settings-apply-btn:hover:not(:disabled)
{
background:linear-gradient(135deg, #43A047, #1B5E20);transform:translateY(-1px);box-shadow:0 4px 10px rgba(76, 175, 80, 0.3);
}
.settings-apply-btn:disabled
{
background:#cccccc;cursor:not-allowed;opacity:0.6;
}
.settings-cancel-btn
{
background:linear-gradient(135deg, #f44336, #d32f2f);color:white;border:none;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;min-width:90px;
}
.settings-cancel-btn:hover
{
background:linear-gradient(135deg, #d32f2f, #b71c1c);transform:translateY(-1px);box-shadow:0 4px 10px rgba(244, 67, 54, 0.3);
}
.buy-loading
{
animation:pulse 0.8s infinite;
}
@keyframes pulse
{
0%, 100%
{
opacity:1;
}
50%
{
opacity:0.5;
}

}
.language-selector, .lang-option,.lang-flag,.lang-name,.lang-native,.lang-check
{
display:none;
}
.bed-base-image
{
position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:110%;height:auto;z-index:5;
}
.drought-overlay
{
position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:110%;height:auto;z-index:5;pointer-events:none;opacity:0.8;
}
.plant-image
{
position:absolute;left:50%;top:50%;transform-origin:center bottom;will-change:translate, rotate;animation:sway-organic 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes sway-organic
{
0%{rotate:0deg;}
25%{rotate:4.5deg;}
50%{rotate:-1.2deg;}
72%{rotate:3deg;}
88%{rotate:-2.8deg;}
100%{rotate:0deg;}
}
.weed-badge
{
position:absolute;left:50%;top:50%;transform:translate(-50%, -50%) translate(0, -3.0625px);width:27.25px;height:auto;z-index:7;pointer-events:none;opacity:1;
}
:root
{
--qty-container-width:97px;--qty-container-height:24px;--qty-btn-size:26px;--qty-value-width:28px;--buy-btn-width:97px;--buy-btn-height:30px;--actions-container-width:210px;--actions-container-height:32px;
}
.shop-tabs-mini
{
display:flex;gap:4px;margin:-9px 0 8px 0;justify-content:center;padding:0 5px;
}
.shop-tab-btn-mini
{
width:58px;height:42px;background:rgba(255, 255, 255, 0.3);border-radius:8px;font-size:18px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(76, 175, 80, 0.2);
}
.shop-tab-btn-mini.active
{
background:#4CAF50;border-color:#2E7D32;box-shadow:0 2px 6px rgba(76, 175, 80, 0.3);
}
.shop-items-container
{
overflow-y:auto;overflow-x:hidden;padding:8px 12px;background:rgba(255, 247, 235, 0.6);border-radius:12px;width:100%;box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none;border:2px solid rgba(166, 124, 82, 0.5);box-shadow:2px 2px 3px rgb(0 0 0 / 19%);
}
.shop-item-divider
{
height:1px;background:linear-gradient(90deg,         transparent,         rgba(76, 175, 80, 0.4),         rgba(46, 125, 50, 0.6),         rgba(76, 175, 80, 0.4),         transparent    );margin:15px 5px;
}
.shop-item
{
padding:0px 0px;margin:0px -10px 0px -6px;
}
.item-row
{
display:flex;gap:5px;margin-bottom:7px;padding:0px;
}
.item-icon
{
flex-shrink:0;width:48px;height:48px;margin-top:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, #69cb2b5c, #f0f8f040);border-radius:14px;border:2px solid #4CAF50;box-shadow:0 2px 6px rgba(76, 175, 80, 0.2);
}
.item-icon img
{
width:40px;height:40px;object-fit:contain;
}
.item-info
{
flex:1;min-width:0;padding-right:5px;
}
.item-name
{
font-size:16px;font-weight:700;color:#2E7D32;margin-bottom:6px;line-height:1.3;
}
.item-description
{
font-size:13px;line-height:1.5;color:#4a3c2e;background:rgba(255, 255, 255, 0.3);padding:6px 8px;border-radius:6px;border-left:2px solid #4CAF50;
}
.item-description strong
{
color:#2E7D32;font-weight:600;
}
.item-description br
{
display:block;content: "";margin:3px 0;
}
.info-icon
{
position:relative;display:inline-block;margin-left:6px;cursor:help;
}
.icon
{
display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#4CAF50;color:white;border-radius:50%;font-size:12px;font-weight:bold;font-style:normal;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
}
.tooltip
{
visibility:hidden;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:rgba(0, 0, 0, 0.85);color:white;padding:8px 12px;border-radius:8px;font-size:12px;white-space:nowrap;z-index:1000;margin-bottom:8px;pointer-events:none;opacity:0;transition:opacity 0.2s;box-shadow:0 4px 10px rgba(0, 0, 0, 0.2);
}
.tooltip::after
{
content: '';position:absolute;top:100%;left:50%;transform:translateX(-50%);border-width:5px;border-style:solid;border-color:rgba(0, 0, 0, 0.85) transparent transparent transparent;
}
.info-icon:hover .tooltip
{
visibility:visible;opacity:1;
}
.item-actions
{
display:flex;justify-content:space-between;align-items:center;margin:0px auto 0 auto;padding:2px 8px;width:var(--actions-container-width);height:var(--actions-container-height);background:rgba(255, 255, 255, 0.2);border-radius:8px;border:1px solid rgba(76, 175, 80, 0.15);margin-right:10px;
}
.item-qty
{
display:flex;align-items:center;background:white;border:1px solid #929b93;border-radius:6px;overflow:hidden;padding:2px;width:var(--qty-container-width);height:var(--qty-container-height);box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);
}
.qty-btn
{
width:var(--qty-btn-size);height:var(--qty-container-height);background:#4CAF50;color:white;border:none;font-size:16px;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;user-select:none;transition:background-color 0.2s;flex-shrink:0;
}
.qty-btn:active
{
background:#2E7D32;
}
.qty-value
{
width:var(--qty-value-width);height:var(--qty-container-height);text-align:center;font-size:13px;font-weight:600;color:#333;display:flex;align-items:center;justify-content:center;background:#f9f9f9;border-left:1px solid #9da39d59;border-right:1px solid #9da39d59;flex-shrink:0;margin-left:4px;margin-right:4px;
}
.buy-btn
{
width:var(--buy-btn-width);height:var(--buy-btn-height);background:linear-gradient(135deg, #4CAF50, #2E7D32);color:white;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 10px;white-space:nowrap;transition:all 0.2s;box-shadow:0 2px 5px rgba(76, 175, 80, 0.3);flex-shrink:0;
}
.buy-btn:disabled
{
background:#cccccc;cursor:not-allowed;opacity:0.7;box-shadow:none;
}
.animals-message
{
display:flex;align-items:center;justify-content:center;gap:12px;height:180px;background:rgba(255, 247, 235, 0.7);border-radius:16px;padding:20px;margin:10px 5px;
}
.animal-icon
{
font-size:40px;animation:bounce 2s infinite;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.animal-text
{
font-size:14px;font-weight:500;color:#2E7D32;background:rgba(255, 255, 255, 0.5);padding:8px 16px;border-radius:20px;border:1px solid #4CAF50;
}
@keyframes bounce
{
0%, 100%
{
transform:translateY(0);
}
50%
{
transform:translateY(-5px);
}

}
.buy-loading
{
animation:pulse 0.8s infinite;
}
@keyframes pulse
{
0%, 100%
{
opacity:1;
}
50%
{
opacity:0.5;
}

}
.shop-items-container
{
scrollbar-width:none;-ms-overflow-style:none;
}
.shop-items-container::-webkit-scrollbar
{
display:none;width:0;height:0;
}
.animal
{
position:absolute;text-align:center;z-index:10;cursor:default;transition:none;background:transparent;
}
.animal:hover
{
transform:none;
}
.animal img
{
width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}
.hunger-bar
{
position:absolute;bottom:-12px;left:0;height:6px;border-radius:3px;transition:width 0.3s ease;background-color:#4caf50;
}
.animal-cow
{
left:590px;top:315px;z-index:9;
}
.animal-chicken
{
left:630px;top:410px;z-index:10;
}
.animal-pig
{
left:610px;top:410px;z-index:10;
}
.animal-info-card
{
padding:15px;background:rgba(255,255,255,0.3);border-radius:16px;text-align:center;
}
.animal-avatar img
{
width:100px;height:100px;object-fit:contain;margin-bottom:10px;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.animal-avatar-preview
{
position:relative;margin:0 auto;
}
.animal-avatar-image
{
position:absolute;object-fit:contain;
}
.animal-name
{
font-size:22px;font-weight:bold;margin-bottom:15px;text-transform:capitalize;color:#2e7d32;
}
.animal-stats
{
display:flex;flex-direction:column;gap:12px;
}
.stat-row
{
display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:8px;background:rgba(255,255,255,0.5);border-radius:10px;
}
.hunger-bar-container
{
flex:1;margin:0 10px;
}
.hunger-bar-large
{
height:10px;border-radius:5px;transition:width 0.3s;
}
.stat-value
{
font-weight:bold;min-width:80px;text-align:right;
}
.ready-text
{
color:#4caf50;font-weight:bold;
}
.harvest-btn--feed
{
background:linear-gradient(135deg, #4caf50, #2e7d32);
}
.harvest-btn--collect
{
background:linear-gradient(135deg, #ff9800, #f57c00);
}
.harvest-btn--purchase
{
background:linear-gradient(135deg, #4CAF50, #2E7D32);
}
.danger--neutral
{
background:linear-gradient(135deg, #9e9e9e, #757575);
}
.bed-purchase-summary
{
text-align:center;padding:15px;
}
.bed-purchase-desc
{
font-size:14px;color:#666;margin:10px 0;
}
.bed-purchase-pricing
{
margin:20px 0;
}
.bed-purchase-price
{
font-size:24px;font-weight:bold;
}
.bed-purchase-price.is-affordable
{
color:#4CAF50;
}
.bed-purchase-price.is-unaffordable
{
color:#f44336;
}
.bed-purchase-balance
{
font-size:14px;margin-top:5px;
}
.bed-purchase-warning
{
color:#f44336;margin-top:10px;
}
.inventory-item-icon
{
width:40px;height:40px;
}
.modal-window--feed-options
{
max-width:350px;
}
.modal-scrollable--padded
{
padding:20px;
}
.food-options-list
{
display:flex;flex-direction:column;gap:10px;
}
.food-option-btn
{
display:block;width:100%;padding:12px;margin:5px 0;background:linear-gradient(135deg, #f0e9d8, #e8dfc8);border:2px solid rgba(166, 124, 82, 0.5);border-radius:10px;font-family:'Quicksand', sans-serif;font-size:14px;font-weight:bold;cursor:pointer;transition:all 0.2s;text-align:center;
}
.food-option-btn:hover
{
transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.hunger-bar-large
{
height:10px;border-radius:5px;transition:width 0.5s ease;
}
.hunger-bar
{
transition:width 0.5s ease;
}
.stat-value
{
transition:color 0.3s ease;
}
.harvest-btn:not(:disabled)
{
cursor:pointer;transition:transform 0.2s, box-shadow 0.2s;
}
.harvest-btn:not(:disabled):hover
{
transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.2);
}
.harvest-btn:disabled
{
opacity:0.5;cursor:not-allowed;
}
.ready-text
{
color:#4caf50;font-weight:bold;animation:pulseReady 1s ease-in-out;
}
.plant-fallback
{
position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:rgba(255, 248, 225, 0.96);border:2px solid rgba(166, 124, 82, 0.55);color:#6d4c41;font-family:'Quicksand', sans-serif;font-size:20px;font-weight:700;line-height:1;text-align:center;box-shadow:0 4px 10px rgba(0, 0, 0, 0.12);pointer-events:none;
}
@keyframes pulseReady
{
0%, 100%
{
opacity:1;
}
50%
{
opacity:0.7;
}

}
.modal-overlay
{
background:radial-gradient(circle at top, rgba(255, 236, 185, 0.12), transparent 38%),        linear-gradient(180deg, rgba(23, 18, 11, 0.32), rgba(15, 11, 7, 0.62));backdrop-filter:blur(8px);padding:24px 14px;box-sizing:border-box;z-index:250;
}

.modal-overlay.active .modal-window
{
transform:translateY(0) scale(1);opacity:1;
}
.modal-window > *
{
position:relative;
}
.modal-window--feed-options
{
width:min(92vw, 420px);max-width:420px;
}
.modal-frame
{
position:absolute;inset:0;pointer-events:none;
}
.modal-frame-art
{
position:absolute;inset:0;
}
.banner-header
{
top:-26px;left:50%;right:auto;width:auto;transform:translateX(-50%);height:96px;display:flex;align-items:flex-start;justify-content:center;pointer-events:none;
}
.banner-content
{
position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:220px;min-height:78px;padding:0 34px 12px;
}
.banner-png-background
{
position:absolute;inset:0;width:var(--banner-width, 240px) !important;height:var(--banner-height, 84px) !important;margin:0 auto;background-image:var(--banner-image, none) !important;background-size:100% 100% !important;background-repeat:no-repeat !important;background-position:center !important;filter:drop-shadow(0 8px 14px rgba(72, 32, 17, 0.22));
}
.banner-title
{
position:relative;z-index:1;display:inline-block;max-width:235px;padding:8px 18px 18px;text-align:center;font-family:'Quicksand', sans-serif;font-size:20px;line-height:1.05;font-weight:700;color:#fff6dc;text-shadow:0 2px 0 rgba(97, 36, 23, 0.5), 0 4px 12px rgba(54, 26, 16, 0.25);
}
.modal-scrollable
{
position:relative;max-height:min(54vh, 470px);padding:8px 8px 4px;overflow-y:auto;overflow-x:hidden;
}
.modal-scrollable::-webkit-scrollbar
{
width:8px;
}
.modal-scrollable::-webkit-scrollbar-thumb
{
background:rgba(121, 82, 45, 0.42);border-radius:999px;
}
.bed-info
{
margin-top:8px;
}
.bed-info:empty
{
display:none !important;margin:0 !important;padding:0 !important;min-height:0 !important;border:none !important;background:transparent !important;box-shadow:none !important;
}
.bed-info,.bed-info.bed-info--empty,.animal-info-card,.settings-content,.bed-purchase-summary,.users-list,.users-table-wrap,.empty-inventory,.empty-warehouse
{
border-radius:22px;background:linear-gradient(180deg, rgba(255, 249, 236, 0.94), rgba(242, 230, 201, 0.9));border:2px solid rgba(168, 123, 67, 0.28);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px rgba(66, 42, 20, 0.08);
}
.bed-info,.animal-info-card,.settings-content,.bed-purchase-summary,.empty-inventory,.empty-warehouse
{
padding:18px 18px 16px;
}
.bed-plant-card,.animal-stats,.settings-row
{
gap:12px;
}
.bed-plant-name,.animal-name
{
font-size:24px;font-weight:700;color:#5d391e;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.45);
}
.bed-stage-bar
{
height:14px;border-radius:999px;background:rgba(126, 92, 53, 0.18);overflow:hidden;box-shadow:inset 0 2px 4px rgba(78, 52, 28, 0.16);
}
.bed-stage-fill
{
height:100%;border-radius:inherit;background:linear-gradient(90deg, #7dbd55, #a9da70);box-shadow:inset 0 1px 0 rgba(255,255,255,0.45);
}
.bed-ready-badge
{
display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:999px;background:linear-gradient(180deg, #8dcf62, #5fa848);color:#fff;font-weight:700;box-shadow:0 8px 18px rgba(89, 148, 66, 0.18);
}
.bed-time-block,.bed-water-info,.stat-row,.bed-purchase-balance,.bed-purchase-warning
{
border-radius:16px;background:rgba(255, 255, 255, 0.45);border:1px solid rgba(160, 118, 74, 0.18);
}
.bed-time-block,.bed-water-info,.stat-row
{
padding:10px 12px;
}
.bed-water-info,.stat-row,.users-pagination-info,.user-list-item-meta,.bed-stage-text,.bed-stage-label,.bed-purchase-desc,.bed-purchase-balance
{
color:#6f5238;
}
.animal-avatar-preview
{
margin:0 auto 12px;width:120px;height:120px;border-radius:28px;background:linear-gradient(180deg, rgba(255,255,255,0.75), rgba(237,226,198,0.92));border:2px solid rgba(164, 121, 70, 0.24);box-shadow:inset 0 2px 0 rgba(255,255,255,0.65), 0 10px 24px rgba(73, 50, 30, 0.08);
}
.animal-avatar-image
{
filter:drop-shadow(0 8px 10px rgba(0,0,0,0.12));
}
.plant-actions
{
display:flex;flex-direction:column;gap:12px;margin:18px 4px 0;
}
.plant-actions button,.bottom-close-btn
{
position:relative;border:none;border-radius:18px;cursor:pointer;font-family:'Quicksand', sans-serif;font-size:16px;font-weight:700;min-height:54px;
}
.plant-actions .danger,.danger--neutral
{
background:linear-gradient(180deg, #c98557 0%, #ab6438 100%);color:#fff4e6;border:2px solid rgba(125, 70, 36, 0.72);box-shadow:0 10px 18px rgba(123, 71, 38, 0.18), inset 0 1px 0 rgba(255,255,255,0.18);
}
.plant-actions button:hover:not(:disabled),.bottom-close-btn:hover
{
transform:translateY(-1px);filter:brightness(1.04);
}
.bottom-close-btn-container
{
bottom:-14px;left:50%;transform:translateX(-50%);
}
.bottom-close-btn
{
width:176px;height:62px;background:transparent;
}
.bottom-close-btn-png-background
{
background:url('image/window/modal-close-btn.png') no-repeat center center;background-size:100% 100%;
}
.bottom-close-btn-text
{
color:#fff6e3;font-size:19px;letter-spacing:0.2px;text-shadow:0 2px 0 rgba(42, 73, 32, 0.4), 0 2px 8px rgba(21, 39, 17, 0.18);
}
.bottom-close-btn:hover .bottom-close-btn-png-background
{
transform:translateY(-1px) scale(1.02);filter:brightness(1.06) drop-shadow(0 8px 12px rgba(46, 78, 35, 0.2));
}
.users-list,.users-table-wrap
{
padding:14px;
}
.user-list-item
{
border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,0.72), rgba(245, 234, 209, 0.96));border:1px solid rgba(167, 124, 81, 0.28);box-shadow:0 8px 18px rgba(73, 50, 30, 0.06);
}
.settings-select,.users-sort-select
{
border-radius:14px;background:rgba(255,255,255,0.78);
}
@media (max-width: 480px)
{
.banner-title
{
font-size:18px;max-width:220px;
}
.bottom-close-btn
{
width:164px;height:58px;
}

}
.modal-overlay
{
align-items:center;justify-content:center;overflow:auto;
}

.modal-window::after
{
content: '';position:absolute;inset:14px 16px 20px;border-radius:30px;background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0));pointer-events:none;z-index:0;
}
.modal-overlay.active .modal-window
{
animation:modal-window-enter 420ms cubic-bezier(0.18, 0.88, 0.24, 1) both;
}
.modal-overlay.active .banner-header
{
animation:modal-banner-swing 540ms cubic-bezier(0.16, 0.84, 0.32, 1) both;transform-origin:top center;
}
.modal-overlay.active .bottom-close-btn-container
{
animation:modal-cta-rise 420ms cubic-bezier(0.18, 0.88, 0.24, 1) both;
}
@keyframes modal-window-enter
{
0%
{
opacity:0;transform:translateY(32px) scale(0.92);filter:blur(10px);
}
60%
{
opacity:1;transform:translateY(-4px) scale(1.01);filter:blur(0);
}
100%
{
opacity:1;transform:translateY(0) scale(1);filter:blur(0);
}

}
@keyframes modal-banner-swing
{
0%
{
opacity:0;transform:translateX(-50%) translateY(-18px) rotate(-4deg) scale(0.94);
}
65%
{
opacity:1;transform:translateX(-50%) translateY(2px) rotate(1.5deg) scale(1.02);
}
100%
{
opacity:1;transform:translateX(-50%) translateY(0) rotate(0deg) scale(1);
}

}
@keyframes modal-cta-rise
{
0%
{
opacity:0;transform:translateX(-50%) translateY(16px) scale(0.92);
}
100%
{
opacity:1;transform:translateX(-50%) translateY(0) scale(1);
}

}
.modal-window[data-modal-variant="animal"]::before
{
filter:saturate(1.05) hue-rotate(-8deg);
}
.modal-window[data-modal-variant="shop"]::before
{
filter:saturate(1.04) hue-rotate(2deg);
}
.modal-window[data-modal-variant="warehouse"]::before
{
filter:saturate(0.98) contrast(1.02);
}
.modal-window[data-modal-variant="users"]::before
{
filter:saturate(1.02) hue-rotate(10deg);
}
.modal-window[data-modal-variant="settings"]::before
{
filter:saturate(0.94) hue-rotate(18deg);
}
.bed-modal-content
{
display:flex;flex-direction:column;gap:16px;padding-top:0;min-height:min-content;
}
.modal-scrollable
{
flex:1 1 auto;min-height:0;max-height:none;height:auto;padding:4px 6px 8px;margin-top:2px;
}
.plant-actions
{
margin-top:0;margin-bottom:6px;
}
.plant-actions:empty
{
display:none;
}
.banner-header[data-banner-type="shop"] .banner-png-background
{
--banner-image:none;
}
.banner-header[data-banner-type="inventory"] .banner-png-background
{
--banner-image:none;
}
.banner-header[data-banner-type="warehouse"] .banner-png-background
{
--banner-image:none;
}
.banner-header[data-banner-type="users"] .banner-png-background
{
--banner-image:none;
}
.banner-header[data-banner-type="settings"] .banner-png-background
{
--banner-image:none;
}
.banner-header[data-banner-type="animal"] .banner-png-background
{
--banner-image:none;
}
.animal-info-card--showcase
{
padding:20px 18px 18px;background:radial-gradient(circle at top right, rgba(255, 224, 194, 0.7), transparent 34%),        linear-gradient(180deg, rgba(255,251,242,0.96), rgba(245, 230, 210, 0.92));
}
.animal-hero
{
display:grid;gap:14px;align-items:center;margin-bottom:14px;
}
.animal-hero-copy
{
display:flex;flex-direction:column;gap:8px;min-width:0;
}
.animal-type-chip
{
display:inline-flex;align-items:center;width:fit-content;max-width:100%;padding:7px 12px;border-radius:999px;background:linear-gradient(180deg, rgba(255, 235, 197, 0.95), rgba(237, 204, 154, 0.92));border:1px solid rgba(168, 118, 67, 0.28);color:#7d562f;font-size:13px;font-weight:700;
}
.animal-subtitle
{
color:#7a5a3e;font-size:13px;line-height:1.35;
}
.animal-stats--grid
{
display:grid;grid-template-columns:1fr;gap:10px;
}
.stat-row--animal
{
display:grid;grid-template-columns:minmax(0, 1.15fr) minmax(90px, 1fr) auto;align-items:center;gap:10px;padding:12px 14px;
}
.stat-label
{
color:#66472c;font-weight:700;line-height:1.25;
}
.hunger-bar-container
{
min-width:0;margin:0;
}
.animal-name
{
text-align:left;word-break:break-word;
}
.animal-avatar-preview
{
width:124px !important;height:124px !important;justify-self:end;
}
.shop-tabs-mini
{
position:sticky;top:0;z-index:3;display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;padding:4px;margin-bottom:14px;border-radius:18px;background:rgba(255, 248, 233, 0.94);border:2px solid rgba(168, 123, 67, 0.18);box-shadow:0 8px 18px rgba(61, 39, 22, 0.06);
}
.shop-tab-btn-mini
{
min-height:44px;border-radius:14px;border:1px solid rgba(165, 121, 78, 0.18);background:linear-gradient(180deg, rgba(255,255,255,0.82), rgba(242,230,203,0.95));font-size:22px;transition:transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.shop-tab-btn-mini.active
{
background:linear-gradient(180deg, #90c864, #659f45);color:#fff;box-shadow:0 10px 20px rgba(84, 131, 55, 0.18);
}
.shop-item,.warehouse-item,.inventory-item
{
border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(243, 231, 205, 0.94));border:1px solid rgba(167, 124, 81, 0.25);box-shadow:0 8px 18px rgba(73, 50, 30, 0.05);
}
.inventory-item,.warehouse-item,.shop-item
{
box-sizing:border-box;
}
.inventory-item,.warehouse-item
{
width:100%;
}
.item-row
{
align-items:center;gap:12px;
}
.item-icon
{
width:64px;height:64px;flex:0 0 64px;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,0.78), rgba(234,223,198,0.92));border:1px solid rgba(168, 123, 67, 0.22);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.item-icon img,.inventory-item-icon
{
max-width:100%;max-height:100%;object-fit:contain;
}
.settings-content
{
padding:18px 16px;
}
.settings-row
{
display:flex;flex-direction:column;align-items:stretch;gap:10px;
}
.settings-select-wrapper
{
position:relative;
}
.settings-select
{
width:100%;min-height:48px;padding:0 42px 0 14px;border:2px solid rgba(167, 124, 81, 0.2);font-weight:700;
}
.settings-actions
{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.settings-cancel-btn,.settings-apply-btn
{
min-height:48px;border-radius:14px;font-weight:700;
}
.settings-cancel-btn
{
background:linear-gradient(180deg, rgba(223, 172, 132, 0.95), rgba(193, 137, 92, 0.98));color:#fff8f0;border:1px solid rgba(136, 87, 49, 0.4);
}
.settings-apply-btn
{
background:linear-gradient(180deg, #90c864, #659f45);color:#fff;border:1px solid rgba(63, 109, 46, 0.5);
}
.settings-apply-btn:disabled
{
opacity:0.6;
}
@media (max-height: 760px)
{
.banner-header
{
top:-20px;
}
.banner-title
{
font-size:18px;
}
.modal-scrollable
{
max-height:none;
}

}
@media (max-width: 520px)
{
    .modal-overlay
{
padding:12px 10px;
}
.banner-content
{
min-width:200px;
}
.animal-hero
{
grid-template-columns:1fr;
}
.animal-avatar-preview
{
justify-self:center;
}
.animal-name
{
text-align:center;
}
.stat-row--animal
{
grid-template-columns:1fr;
}
.settings-actions
{
grid-template-columns:1fr;
}

}
.modal-window::before
{
display:block !important;
}
.modal-window::after
{
display:none !important;
}
.modal-frame
{
position:absolute;inset:0;pointer-events:none;z-index:0;
}
.modal-window > *:not(.modal-frame)
{
position:relative;
}
.banner-header
{
top:-18px !important;z-index:4;
}
.banner-content
{
min-height:84px !important;
}
.banner-title
{
padding-top:10px !important;padding-bottom:20px !important;font-size:22px !important;
}
.modal-scrollable
{
padding:0 6px 6px !important;margin-top:0 !important;
}
.bed-modal-content
{
gap:14px !important;
}
.bed-info,.animal-info-card,.settings-content,.bed-purchase-summary,.users-list,.users-table-wrap,.empty-inventory,.empty-warehouse,.shop-item,.warehouse-item,.inventory-item
{
border-radius:18px !important;background:linear-gradient(180deg, rgba(255, 252, 244, 0.98), rgba(244, 234, 212, 0.98)) !important;border:1px solid rgba(176, 132, 79, 0.28) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.82),        0 8px 18px rgba(78, 53, 30, 0.06) !important;
}
.shop-tabs-mini
{
margin-bottom:10px !important;
}
.plant-actions
{
gap:10px !important;
}
.bottom-close-btn-container
{
bottom:-10px !important;
}
.bottom-close-btn
{
width:176px !important;height:58px !important;
}
@media (max-width: 520px)
{
.modal-frame-center
{
top:28px;right:28px;bottom:28px;left:28px;
}
.banner-title
{
font-size:20px !important;
}

}
.modal-overlay
{
padding:16px !important;align-items:center !important;justify-content:center !important;overflow-y:auto !important;overflow-x:hidden !important;
}
.modal-overlay.active .modal-window,.modal-overlay.active .banner-header,.modal-overlay.active .bottom-close-btn-container
{
animation:none !important;
}
.modal-frame
{
position:absolute !important;inset:0 !important;z-index:0 !important;
}
.modal-window > *:not(.modal-frame)
{
position:relative !important;
}
.banner-header
{
position:relative !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;height:auto !important;margin:0 auto !important;transform:none !important;display:flex !important;align-items:flex-start !important;justify-content:center !important;pointer-events:none !important;z-index:4 !important;
}
.banner-content
{
position:relative !important;display:flex !important;align-items:center !important;justify-content:center !important;width:min(100%, 292px) !important;min-height:84px !important;margin:0 auto !important;padding:0 18px 14px !important;box-sizing:border-box !important;
}
.banner-png-background
{
position:absolute !important;left:50% !important;top:0 !important;inset:auto !important;transform:translateX(-50%) !important;margin:0 !important;background-size:100% 100% !important;background-repeat:no-repeat !important;background-position:center center !important;z-index:0 !important;
}
.banner-title
{
position:relative !important;z-index:1 !important;display:block !important;max-width:228px !important;margin:0 auto !important;padding:12px 20px 22px !important;text-align:center !important;line-height:1.08 !important;font-size:22px !important;white-space:normal !important;word-break:break-word !important;
}
.modal-scrollable
{
position:relative !important;min-height:0 !important;height:auto !important;max-height:none !important;padding:6px 8px 10px !important;margin:0 !important;overflow-y:auto !important;overflow-x:hidden !important;overscroll-behavior:contain !important;
}
.bed-modal-content
{
display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:14px !important;width:100% !important;min-width:0 !important;
}
.bed-info,.plant-actions,.settings-content,.users-list,.users-table-wrap,.empty-inventory,.empty-warehouse,.shop-item,.warehouse-item,.inventory-item,.animal-info-card,.bed-purchase-summary
{
width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important;
}
.plant-actions
{
display:flex !important;flex-direction:column !important;gap:12px !important;margin:0 !important;
}
.plant-actions:empty,.bed-info:empty
{
display:none !important;
}
.shop-item,.warehouse-item,.inventory-item
{
margin:0 !important;padding:14px !important;
}
.item-row
{
display:flex !important;align-items:center !important;gap:12px !important;margin:0 0 12px !important;padding:0 !important;
}
.item-actions
{
display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;flex-wrap:nowrap !important;width:100% !important;
}
.item-qty
{
flex:0 0 auto !important;
}
.buy-btn
{
flex:0 0 auto !important;min-width:118px !important;
}
.settings-content
{
display:flex !important;flex-direction:column !important;gap:14px !important;padding:18px 16px !important;
}
.settings-row
{
display:flex !important;flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important;gap:10px !important;margin:0 !important;padding:14px !important;
}
.settings-select-wrapper
{
width:100% !important;
}
.settings-select
{
width:100% !important;
}
.bottom-close-btn-container
{
position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;transform:none !important;display:flex !important;justify-content:center !important;align-items:center !important;width:100% !important;margin-top:2px !important;padding-top:4px !important;z-index:4 !important;
}
.lilies-decoration
{
display:none !important;
}
@media (max-width: 520px)
{
    .modal-overlay
{
padding:10px !important;
}
.banner-content
{
width:min(100%, 264px) !important;min-height:76px !important;padding-bottom:12px !important;
}
.banner-title
{
max-width:206px !important;padding:12px 16px 18px !important;font-size:20px !important;
}
.modal-scrollable
{
padding:4px 4px 8px !important;
}
.item-actions,    .settings-actions
{
flex-direction:column !important;align-items:stretch !important;
}
.buy-btn,    .settings-cancel-btn,    .settings-apply-btn
{
width:100% !important;
}

}
.modal-overlay
{
background:rgba(18, 24, 18, 0.42) !important;backdrop-filter:blur(10px) saturate(1.08) !important;-webkit-backdrop-filter:blur(10px) saturate(1.08) !important;
}
.modal-window::before,.modal-window::after
{
content: '' !important;position:absolute !important;inset:0 !important;display:block !important;pointer-events:none !important;
}
.modal-window::before
{
background:url(../image/back2.png?v=66) center/cover no-repeat !important;z-index:0 !important;
}
.modal-window::after
{
inset:12px !important;border-radius:22px !important;border:1px solid rgba(173, 140, 96, 0.18) !important;background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)) !important;z-index:1 !important;
}
.modal-frame,.modal-frame-center,.modal-frame-corner,.modal-frame-legacy-edge,.banner-png-background
{
display:none !important;
}
.modal-window > *:not(.modal-frame)
{
position:relative !important;
}
.banner-header
{
position:relative !important;inset:auto !important;width:100% !important;margin:0 !important;transform:none !important;display:flex !important;justify-content:center !important;align-items:center !important;
}
.banner-content
{
width:auto !important;max-width:min(100%, 300px) !important;min-height:0 !important;margin:0 auto !important;padding:0 !important;display:flex !important;justify-content:center !important;align-items:center !important;
}
.banner-title
{
display:inline-flex !important;align-items:center !important;justify-content:center !important;min-height:52px !important;max-width:100% !important;margin:0 auto !important;padding:10px 22px !important;border-radius:18px !important;border:1px solid rgba(99, 136, 63, 0.2) !important;background:linear-gradient(180deg, rgba(255,255,255,0.88), rgba(250, 242, 223, 0.9)),        linear-gradient(135deg, rgba(144, 200, 100, 0.16), rgba(223, 170, 108, 0.12)) !important;box-shadow:0 12px 24px rgba(79, 61, 37, 0.12),        inset 0 1px 0 rgba(255,255,255,0.92) !important;color:#4e3c24 !important;text-shadow:none !important;font-family:'Russo One', "Trebuchet MS", "Segoe UI", sans-serif !important;font-size:26px !important;font-weight:800 !important;line-height:1.1 !important;white-space:normal !important;word-break:break-word !important;letter-spacing:0.01em !important;
}
.modal-window[data-modal-variant="shop"] .banner-title
{
background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(254, 241, 217, 0.92)),        linear-gradient(135deg, rgba(118, 190, 87, 0.18), rgba(235, 178, 104, 0.16)) !important;
}
.modal-window[data-modal-variant="settings"] .banner-title
{
background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(241, 235, 250, 0.92)),        linear-gradient(135deg, rgba(120, 150, 214, 0.16), rgba(182, 146, 210, 0.18)) !important;
}
.modal-window[data-modal-variant="users"] .banner-title
{
background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(235, 248, 237, 0.92)),        linear-gradient(135deg, rgba(100, 179, 144, 0.16), rgba(104, 176, 211, 0.16)) !important;
}
.modal-window[data-modal-variant="animal"] .banner-title
{
background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255, 240, 226, 0.92)),        linear-gradient(135deg, rgba(232, 165, 104, 0.18), rgba(129, 192, 115, 0.16)) !important;
}
.modal-scrollable,.modal-scrollable.modal-scrollable--padded
{
min-height:0 !important;height:auto !important;max-height:none !important;margin:0 !important;padding:2px 2px 6px !important;overflow-y:auto !important;overflow-x:hidden !important;
}
.bed-modal-content
{
display:flex !important;flex-direction:column !important;gap:14px !important;width:100% !important;
}
.bed-info,.animal-info-card,.settings-content,.bed-purchase-summary,.users-list,.users-table-wrap,.empty-inventory,.empty-warehouse,.shop-item,.warehouse-item,.inventory-item,.food-option-btn
{
width:100% !important;border-radius:20px !important;border:1px solid rgba(174, 139, 93, 0.18) !important;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(251, 245, 232, 0.96)) !important;box-shadow:0 10px 24px rgba(87, 67, 40, 0.08),        inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
.shop-item,.warehouse-item,.inventory-item
{
margin:0 !important;padding:16px !important;
}
.item-row
{
display:flex !important;align-items:center !important;gap:14px !important;margin:0 0 14px !important;padding:0 !important;
}
.item-icon
{
width:68px !important;height:68px !important;flex:0 0 68px !important;margin:0 !important;border-radius:18px !important;background:linear-gradient(180deg, rgba(242, 255, 233, 0.92), rgba(228, 239, 207, 0.98)) !important;border:1px solid rgba(108, 164, 79, 0.28) !important;
}
.item-info
{
flex:1 1 auto !important;min-width:0 !important;padding:0 !important;
}
.item-description
{
border-left:3px solid rgba(102, 172, 86, 0.82) !important;border-radius:12px !important;background:rgba(255, 255, 255, 0.64) !important;padding:10px 12px !important;
}
.item-actions
{
display:flex !important;align-items:center !important;justify-content:space-between !important;gap:14px !important;width:100% !important;
}
.item-qty
{
flex:0 0 auto !important;
}
.buy-btn,.settings-cancel-btn,.settings-apply-btn,.sell-all-btn,.harvest-btn,.food-option-btn
{
border-radius:16px !important;min-height:50px !important;font-weight:800 !important;box-shadow:0 12px 22px rgba(78, 120, 56, 0.16) !important;
}
.buy-btn,.settings-apply-btn,.sell-all-btn,.harvest-btn:not(.danger),.food-option-btn
{
background:linear-gradient(180deg, #89cd5f, #5f9b43) !important;border:1px solid rgba(72, 115, 53, 0.38) !important;color:#fffdf7 !important;
}
.settings-cancel-btn,.harvest-btn.danger
{
background:linear-gradient(180deg, #f0d5b3, #d39b67) !important;border:1px solid rgba(150, 103, 63, 0.38) !important;color:#fffaf1 !important;
}
.settings-content
{
display:flex !important;flex-direction:column !important;gap:14px !important;padding:18px !important;
}
.settings-row
{
display:flex !important;flex-direction:column !important;gap:10px !important;align-items:stretch !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;
}
.settings-select-wrapper
{
width:100% !important;
}
.settings-note
{
margin:0 !important;border-radius:14px !important;background:rgba(255, 255, 255, 0.62) !important;padding:12px !important;
}
.plant-actions
{
display:flex !important;flex-direction:column !important;gap:12px !important;margin:0 !important;
}
.bottom-close-btn-container
{
position:relative !important;inset:auto !important;transform:none !important;display:flex !important;justify-content:center !important;width:100% !important;margin-top:0 !important;padding-top:2px !important;
}
.bottom-close-btn
{
width:auto !important;min-width:170px !important;height:52px !important;padding:0 26px !important;border-radius:16px !important;border:1px solid rgba(74, 118, 54, 0.36) !important;background:linear-gradient(180deg, #74b853, #4f8338) !important;box-shadow:0 12px 24px rgba(65, 99, 47, 0.18) !important;
}
.bottom-close-btn-png-background
{
display:none !important;
}
.bottom-close-btn-text
{
position:static !important;transform:none !important;color:#fffef9 !important;font-size:18px !important;font-weight:800 !important;text-shadow:none !important;
}
.lilies-decoration
{
display:none !important;
}
@media (max-width: 520px)
{
    .banner-title
{
min-height:48px !important;padding:10px 18px !important;font-size:22px !important;
}
.item-actions,    .settings-actions
{
flex-direction:column !important;align-items:stretch !important;
}
.buy-btn,    .settings-cancel-btn,    .settings-apply-btn,    .sell-all-btn,    .harvest-btn,    .food-option-btn,    .bottom-close-btn
{
width:100% !important;
}

}
.modal-overlay
{
padding:clamp(18px, 4vh, 100px) 5vw !important;
}

.modal-window::before
{
background:url(../image/back2.png?v=66) center/cover no-repeat !important;
}
.modal-window::after
{
inset:10px !important;border-radius:20px !important;
}
.banner-content
{
max-width:min(100%, 250px) !important;
}
.banner-title
{
min-height:46px !important;padding:8px 18px !important;font-size:22px !important;
}
.modal-scrollable,.modal-scrollable.modal-scrollable--padded
{
padding:0 2px 4px !important;
}
.modal-scrollable::before,.modal-scrollable::after
{
content: '' !important;position:absolute !important;width:88px !important;height:88px !important;pointer-events:none !important;opacity:0.5 !important;z-index:0 !important;
}
.modal-scrollable::before
{
top:6px !important;right:0 !important;background:radial-gradient(circle at 50% 50%, rgba(255, 222, 171, 0.95) 0 10%, transparent 11%),        radial-gradient(circle at 28% 36%, rgba(139, 196, 102, 0.65) 0 18%, transparent 19%),        radial-gradient(circle at 72% 36%, rgba(139, 196, 102, 0.65) 0 18%, transparent 19%),        radial-gradient(circle at 36% 68%, rgba(139, 196, 102, 0.55) 0 16%, transparent 17%),        radial-gradient(circle at 64% 68%, rgba(139, 196, 102, 0.55) 0 16%, transparent 17%);filter:blur(0.2px);
}
.modal-scrollable::after
{
bottom:2px !important;left:0 !important;background:radial-gradient(circle at 40% 28%, rgba(144, 200, 100, 0.7) 0 14%, transparent 15%),        radial-gradient(circle at 58% 50%, rgba(255, 219, 178, 0.9) 0 10%, transparent 11%),        radial-gradient(circle at 70% 28%, rgba(144, 200, 100, 0.62) 0 14%, transparent 15%),        radial-gradient(circle at 36% 68%, rgba(144, 200, 100, 0.52) 0 13%, transparent 14%),        radial-gradient(circle at 74% 68%, rgba(144, 200, 100, 0.52) 0 13%, transparent 14%);filter:blur(0.2px);
}
.bed-modal-content
{
position:relative !important;z-index:1 !important;gap:10px !important;
}
.bed-info,.animal-info-card,.settings-content,.bed-purchase-summary,.users-list,.users-table-wrap,.empty-inventory,.empty-warehouse,.shop-item,.warehouse-item,.inventory-item,.food-option-btn
{
border-radius:18px !important;
}
.shop-tabs-mini
{
margin-bottom:6px !important;gap:8px !important;padding:0 2px !important;
}
.shop-tab-btn-mini
{
width:60px !important;height:50px !important;border-radius:16px !important;font-size:22px !important;
}
.shop-item,.warehouse-item,.inventory-item
{
padding:12px !important;
}
.item-row
{
gap:10px !important;margin-bottom:10px !important;
}
.item-icon
{
width:56px !important;height:56px !important;flex-basis:56px !important;border-radius:15px !important;
}
.item-icon img,.inventory-item-icon
{
max-width:78% !important;max-height:78% !important;
}
.item-description
{
padding:8px 10px !important;font-size:12px !important;line-height:1.35 !important;
}
.item-actions
{
gap:10px !important;
}
.item-qty
{
padding:2px !important;
}
.qty-btn
{
width:28px !important;height:28px !important;font-size:20px !important;
}
.qty-value
{
min-width:32px !important;font-size:14px !important;
}
.buy-btn,.settings-cancel-btn,.settings-apply-btn,.sell-all-btn,.harvest-btn,.food-option-btn,.bottom-close-btn
{
min-height:44px !important;font-size:15px !important;
}
.buy-btn
{
min-width:108px !important;padding:0 16px !important;
}
.settings-content
{
gap:12px !important;padding:14px !important;
}
.settings-row
{
gap:8px !important;
}
.settings-label
{
font-size:14px !important;
}
.settings-select
{
min-height:42px !important;padding:0 38px 0 12px !important;font-size:14px !important;
}
.settings-note
{
padding:10px !important;font-size:12px !important;line-height:1.4 !important;
}
.settings-actions
{
gap:10px !important;
}
.animal-info-card
{
padding:14px !important;
}
.animal-hero
{
gap:10px !important;margin-bottom:10px !important;
}
.animal-avatar-preview
{
transform:scale(0.92) !important;transform-origin:center !important;
}
.animal-stats--grid
{
gap:8px !important;
}
.stat-row--animal
{
gap:8px !important;
}
.users-list,.users-table-wrap
{
padding:12px !important;
}
.bottom-close-btn-container
{
padding-top:0 !important;
}
.bottom-close-btn
{
min-width:152px !important;height:46px !important;padding:0 22px !important;
}
.bottom-close-btn-text
{
font-size:17px !important;
}
@media (max-width: 520px)
{
    .modal-overlay
{
padding:12px 4vw !important;
}

.banner-title
{
font-size:20px !important;padding:8px 16px !important;
}
.shop-tab-btn-mini
{
width:54px !important;height:46px !important;font-size:20px !important;
}
.item-actions,    .settings-actions
{
gap:8px !important;
}

}
.user-table-gift
{
min-width:76px;text-align:center;
}
.user-send-flower-btn
{
width:38px;height:38px;border:0;border-radius:12px;background:linear-gradient(180deg, #ffe7f2, #ffd5e8);box-shadow:0 8px 18px rgba(182, 96, 137, 0.16);font-size:20px;cursor:pointer;transition:transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}
.user-send-flower-btn:hover:not(:disabled)
{
transform:translateY(-1px);box-shadow:0 12px 22px rgba(182, 96, 137, 0.22);
}
.user-send-flower-btn:disabled
{
opacity:0.45;cursor:not-allowed;
}
.user-send-flower-btn--empty
{
opacity:0.45;
}
.flower-gift-panel
{
margin-top:14px;padding:16px;border-radius:18px;border:1px solid rgb(246 180 219 / 22%);background:linear-gradient(26deg, rgb(233 150 203 / 20%), rgb(255 237 245 / 61%));box-shadow:0 12px 24px rgba(114, 73, 91, 0.08);overflow:hidden;
}
.flower-gift-panel-head
{
margin-bottom:12px;
}
.flower-gift-panel-title
{
font-size:18px;font-weight:800;color:#714f63;
}
.flower-gift-panel-subtitle
{
font-size:13px;color:#8c6b79;
}
.flower-gift-panel-grid
{
display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 110px);gap:10px;margin-bottom:10px;
}
.flower-gift-field
{
display:flex;flex-direction:column;gap:6px;font-size:13px;color:#6e5761;min-width:0;
}
.flower-gift-select,.flower-gift-quantity
{
width:100%;min-width:0;box-sizing:border-box;min-height:42px;border-radius:12px;border:1px solid rgba(188, 132, 165, 0.26);background:rgba(255, 255, 255, 0.9);padding:0 12px;font-weight:600;color:#513e46;
}
.flower-gift-preview
{
margin-bottom:12px;padding:10px 12px;border-radius:14px;background:rgba(255, 251, 240, 0.74);color:#6b5a3c;font-weight:700;
}
.flower-gift-actions
{
display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:10px;
}
.flower-gift-actions .shop-detail-cancel-btn,
.flower-gift-actions .settings-apply-btn
{
width:auto !important;min-width:0 !important;flex:0 0 auto !important;padding:8px 16px !important;
}
.flower-gift-notification
{
width:min(92vw, 360px);right:16px;left:auto;
}
.flower-gift-card
{
position:relative;padding:18px 18px 16px;border-radius:22px;border:1px solid rgba(214, 166, 188, 0.28);background:radial-gradient(circle at top right, rgba(255, 228, 236, 0.95), transparent 34%),        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255, 245, 249, 0.95));box-shadow:0 18px 32px rgba(85, 54, 68, 0.16);
}
.flower-gift-hero
{
display:flex;align-items:center;gap:12px;margin-bottom:12px;
}
.flower-gift-icon
{
width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;background:linear-gradient(180deg, #ffe7f2, #ffd1e3);box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
}
.flower-gift-title
{
font-size:17px;font-weight:800;color:#654a59;
}
.flower-gift-subtitle
{
font-size:13px;color:#90717f;font-weight:700;
}
.flower-gift-list
{
list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
}
.flower-gift-list li
{
display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,0.74);color:#614c55;font-weight:700;
}
.flower-gift-item-qty
{
color:#9c5c78;
}
@media (max-width: 520px)
{
    .flower-gift-panel-grid,    .flower-gift-actions
{
grid-template-columns:1fr;
}
.flower-gift-notification
{
width:min(94vw, 340px);right:10px;
}

}
.modal-overlay
{
padding:clamp(24px, 10vh, 120px) 5vw !important;align-items:center !important;justify-content:center !important;
}

.modal-window::before
{
background:url(../image/back2.png?v=66) center/cover no-repeat !important;
}
.modal-window::after
{
inset:9px !important;border-radius:18px !important;
}
.banner-header
{
flex:0 0 auto !important;margin-bottom:2px !important;
}
.banner-content
{
max-width:min(100%, 230px) !important;
}
.banner-title
{
min-height:40px !important;padding:7px 16px !important;font-size:20px !important;border-radius:15px !important;
}
.modal-scrollable,.modal-scrollable.modal-scrollable--padded
{
position:relative !important;flex:1 1 auto !important;min-height:0 !important;max-height:none !important;padding:0 2px 2px !important;
}
.modal-scrollable::before,.modal-scrollable::after
{
width:72px !important;height:72px !important;opacity:0.42 !important;
}
.bed-modal-content
{
width:min(100%, 420px) !important;margin:0 auto !important;gap:8px !important;
}
.bed-info,.animal-info-card,.settings-content,.bed-purchase-summary,.users-list,.users-table-wrap,.empty-inventory,.empty-warehouse,.shop-item,.warehouse-item,.inventory-item,.food-option-btn
{
border-radius:16px !important;
}
.shop-item,.warehouse-item,.inventory-item,.settings-content,.users-table-wrap,.animal-info-card,.bed-purchase-summary
{
padding:10px !important;
}
.shop-tabs-mini
{
justify-content:center !important;margin-bottom:4px !important;
}
.shop-tab-btn-mini
{
width:52px !important;height:42px !important;border-radius:14px !important;font-size:18px !important;
}
.item-row
{
gap:8px !important;margin-bottom:8px !important;
}
.item-icon
{
width:48px !important;height:48px !important;flex-basis:48px !important;border-radius:13px !important;
}
.item-description,.warehouse-item-info,.settings-note,.flower-gift-preview
{
font-size:11px !important;line-height:1.3 !important;
}
.item-description
{
padding:7px 9px !important;
}
.item-actions
{
gap:8px !important;
}
.item-qty
{
transform:scale(0.94);transform-origin:left center;
}
.qty-btn
{
width:24px !important;height:24px !important;font-size:18px !important;
}
.qty-value
{
min-width:28px !important;font-size:13px !important;
}
.buy-btn,.settings-apply-btn,.sell-all-btn,.harvest-btn,.food-option-btn,.bottom-close-btn
{
min-height:38px !important;font-size:13px !important;border-radius:13px !important;
}
.buy-btn
{
min-width:96px !important;padding:0 14px !important;
}
.settings-content,.flower-gift-panel
{
gap:10px !important;
}
.settings-actions,.flower-gift-actions
{
grid-template-columns:1fr !important;gap:8px !important;
}
.settings-note,.flower-gift-preview
{
padding:8px 10px !important;border-radius:12px !important;
}
.settings-label,.flower-gift-field
{
font-size:12px !important;
}
.settings-select,.flower-gift-select,.flower-gift-quantity
{
min-height:38px !important;font-size:13px !important;
}
.settings-row--slider
{
gap:8px !important;
}
.settings-slider-wrapper
{
display:grid !important;grid-template-columns:1fr auto !important;gap:10px !important;align-items:center !important;
}
.settings-slider
{
width:100% !important;accent-color:#4f8f3a !important;
}
.settings-slider-value
{
min-width:46px !important;text-align:right !important;font-size:12px !important;color:#6b4e2f !important;font-weight:700 !important;
}
.flower-gift-panel
{
width:100% !important;margin-top:10px !important;padding:12px !important;border-radius:16px !important;
}
.flower-gift-panel-title
{
font-size:16px !important;
}
.flower-gift-panel-subtitle
{
font-size:12px !important;
}
.animal-info-card,.animal-info-card--showcase
{
padding:12px !important;
}
.animal-name
{
font-size:18px !important;
}
.animal-subtitle,.stat-label,.stat-value
{
font-size:12px !important;
}
.users-table
{
font-size:12px !important;
}
.users-table th,.users-table td
{
padding:8px 9px !important;
}
.users-table-sort
{
justify-content:center !important;
}
.users-sort-select
{
min-height:34px !important;font-size:12px !important;
}
.bottom-close-btn-container
{
flex:0 0 auto !important;padding-top:2px !important;
}
.bottom-close-btn
{
min-width:134px !important;height:40px !important;padding:0 18px !important;
}
.bottom-close-btn-text
{
font-size:15px !important;
}
.flower-gift-notification
{
position:fixed !important;top:calc(var(--app-safe-top) + 120px) !important;left:50% !important;right:auto !important;transform:translateX(-50%) !important;width:min(92vw, 360px) !important;z-index:1400 !important;
}
.flower-gift-card
{
padding:16px 16px 14px !important;border-radius:18px !important;
}
.flower-gift-title
{
font-size:16px !important;
}
.flower-gift-subtitle,.flower-gift-list li
{
font-size:12px !important;
}
@media (max-width: 520px)
{
    .modal-overlay
{
padding:20px 4vw !important;
}

.banner-title
{
font-size:18px !important;
}
.flower-gift-notification
{
top:calc(var(--app-safe-top) + 96px) !important;width:min(94vw, 340px) !important;
}

}

.modal-scrollable,.modal-scrollable.modal-scrollable--padded
{
flex:0 1 auto !important;max-height:calc(85vh - 132px) !important;
}
.modal-window[data-modal-variant="shop"] .modal-scrollable,.modal-window[data-modal-variant="inventory"] .modal-scrollable,.modal-window[data-modal-variant="warehouse"] .modal-scrollable,.modal-window[data-modal-variant="users"] .modal-scrollable,.modal-window[data-modal-variant="settings"] .modal-scrollable,.modal-window[data-modal-variant="animal"] .modal-scrollable
{
flex:0 1 auto !important;
}
.modal-window[data-modal-variant="shop"] .bed-modal-content,.modal-window[data-modal-variant="inventory"] .bed-modal-content,.modal-window[data-modal-variant="warehouse"] .bed-modal-content,.modal-window[data-modal-variant="users"] .bed-modal-content,.modal-window[data-modal-variant="settings"] .bed-modal-content,.modal-window[data-modal-variant="animal"] .bed-modal-content
{
align-items:center !important;
}
@media (max-width: 520px)
{
    .modal-scrollable,    .modal-scrollable.modal-scrollable--padded
{
max-height:calc(85vh - 118px) !important;
}

}
.flower-gift-notification
{
pointer-events:auto !important;
}
.flower-gift-card
{
overflow:hidden !important;
}
.flower-gift-card .notification-close-btn
{
position:absolute !important;top:10px !important;right:10px !important;left:auto !important;width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important;margin:0 !important;padding:0 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;flex:0 0 32px !important;border-radius:50% !important;background:transparent !important;z-index:2 !important;
}
.flower-gift-card .close-btn-png-background
{
width:100% !important;height:100% !important;
}
.flower-gift-card .flower-gift-hero
{
padding-right:38px !important;
}
.gift-summary-block + .gift-summary-block
{
margin-top:10px;padding-top:10px;border-top:1px solid rgba(171, 141, 103, 0.18);
}
.auth-disabled
{
opacity:0.55 !important;cursor:not-allowed !important;filter:grayscale(0.35) !important;
}
button.auth-disabled
{
pointer-events:none !important;
}
body.app-auth-required #farm-field-container
{
position:fixed;inset:0;z-index:150;width:100%;height:var(--tg-viewport-height);bottom:auto;display:flex;align-items:center;justify-content:center;padding:max(24px, var(--app-safe-top)) max(20px, var(--app-safe-right)) max(24px, var(--app-safe-bottom)) max(20px, var(--app-safe-left));box-sizing:border-box;pointer-events:none;
}
body.app-auth-required::before
{
content: "";position:fixed;inset:0;z-index:140;background:linear-gradient(180deg, rgba(8, 23, 32, 0.26) 0%, rgba(8, 23, 32, 0.1) 46%, rgba(8, 23, 32, 0.5) 100%),        url("image/loading/farm-homecoming-loading.webp?v=20260611-homecoming3") center / cover no-repeat;
}
body.app-auth-required::after
{
content: "";position:fixed;inset:0;z-index:141;background:linear-gradient(180deg, rgba(8, 21, 30, 0.28), rgba(8, 21, 30, 0.18)),        linear-gradient(90deg, rgba(8, 21, 30, 0.35), transparent 28%, transparent 72%, rgba(8, 21, 30, 0.35));pointer-events:none;
}
body.app-auth-required .app-outer-container
{
min-height:var(--tg-viewport-height);align-items:center;background:#101d26;
}
body.app-auth-required .container
{
z-index:150;overflow:visible;pointer-events:none;
}
body.app-auth-required .bg-img-full-height
{
display:none !important;
}
body.app-auth-required .user-panel,body.app-auth-required .user-panel-actions,body.app-auth-required .control-panel,body.app-auth-required .bottom-control-panel,body.app-auth-required .foreign-actions-panel,body.app-auth-required .scaled-content,body.app-auth-required .bg-animations,body.app-auth-required .scene-layer,body.app-auth-required #fireflyCanvas,body.app-auth-required picture
{
display:none !important;
}
body.app-auth-required #farm-field
{
width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform:none !important;padding-top:min(10vh, 72px);box-sizing:border-box;
}
.farm-auth-required
{
position:relative;z-index:151;width:min(calc(100vw - 40px), 390px);box-sizing:border-box;padding:24px 24px 26px;border-radius:8px;background:rgba(14, 31, 40, 0.88);box-shadow:0 22px 55px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.18);color:#fff;text-align:center;pointer-events:auto;backdrop-filter:blur(14px);
}
body.app-auth-required .farm-auth-required
{
position:fixed;top:50%;left:50%;z-index:151;max-height:calc(var(--tg-viewport-height) - 48px);overflow-y:auto;transform:translate(-50%, -50%);
}
.farm-auth-required-badge
{
display:inline-flex;align-items:center;justify-content:center;min-height:24px;margin-bottom:14px;padding:0 11px;border-radius:999px;background:rgba(84, 178, 230, 0.18);color:#bceaff;font-size:12px;font-weight:700;line-height:1;
}
.farm-auth-required-icon
{
display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;margin:0 auto 14px;border-radius:50%;background:#32a8e6;box-shadow:0 12px 26px rgba(12, 115, 172, 0.38);color:#fff;font-size:18px;font-weight:800;letter-spacing:0;
}
.farm-auth-required-title
{
margin:0 0 10px;font-size:24px;line-height:1.2;letter-spacing:0;
}
.farm-auth-required-message
{
margin:0;color:rgba(255, 255, 255, 0.88);font-size:16px;line-height:1.45;
}
.farm-auth-required-action
{
display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:18px;padding:0 20px;border-radius:8px;background:#32a8e6;box-shadow:0 12px 26px rgba(12, 115, 172, 0.32);color:#fff;font-size:15px;font-weight:800;line-height:1;text-decoration:none;
}
.farm-auth-required-action:focus-visible
{
outline:3px solid rgba(255, 255, 255, 0.9);outline-offset:3px;
}
.farm-auth-required-hint
{
max-width:300px;margin:12px auto 0;color:rgba(255, 255, 255, 0.66);font-size:12px;line-height:1.35;
}
body.app-access-denied #farm-field-container
{
position:fixed;inset:0;z-index:150;width:100%;height:var(--tg-viewport-height);bottom:auto;display:flex;align-items:center;justify-content:center;padding:max(24px, var(--app-safe-top)) max(20px, var(--app-safe-right)) max(24px, var(--app-safe-bottom)) max(20px, var(--app-safe-left));box-sizing:border-box;pointer-events:none;
}
body.app-access-denied::before
{
content: "";position:fixed;inset:0;z-index:140;background:linear-gradient(180deg, rgba(8, 23, 32, 0.42) 0%, rgba(8, 23, 32, 0.22) 46%, rgba(8, 23, 32, 0.62) 100%),        url("image/loading/farm-homecoming-loading.webp?v=20260611-homecoming3") center / cover no-repeat;
}
body.app-access-denied::after
{
content: "";position:fixed;inset:0;z-index:141;background:linear-gradient(180deg, rgba(8, 21, 30, 0.32), rgba(8, 21, 30, 0.22)),        linear-gradient(90deg, rgba(8, 21, 30, 0.4), transparent 28%, transparent 72%, rgba(8, 21, 30, 0.4));pointer-events:none;
}
body.app-access-denied .app-outer-container
{
min-height:var(--tg-viewport-height);align-items:center;background:#101d26;
}
body.app-access-denied .container
{
z-index:150;overflow:visible;pointer-events:none;
}
body.app-access-denied .bg-img-full-height
{
display:none !important;
}
body.app-access-denied .user-panel,body.app-access-denied .user-panel-actions,body.app-access-denied .control-panel,body.app-access-denied .bottom-control-panel,body.app-access-denied .foreign-actions-panel,body.app-access-denied .scaled-content,body.app-access-denied .bg-animations,body.app-access-denied .scene-layer,body.app-access-denied #fireflyCanvas,body.app-access-denied picture
{
display:none !important;
}
body.app-access-denied #farm-field
{
width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform:none !important;padding-top:min(10vh, 72px);box-sizing:border-box;
}
.farm-access-required
{
position:fixed;top:50%;left:50%;z-index:151;width:min(calc(100vw - 36px), 400px);max-height:calc(var(--tg-viewport-height) - 40px);overflow-y:auto;box-sizing:border-box;padding:20px 20px 24px;border-radius:18px;background:linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(16, 34, 43, 0.72) 42%, rgba(10, 24, 31, 0.84) 100%);border:1px solid rgba(255, 255, 255, 0.22);box-shadow:0 26px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 24px rgba(0, 0, 0, 0.25);color:#fff;text-align:center;transform:translate(-50%, -50%);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);animation:fa-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.farm-access-badge
{
display:inline-flex;align-items:center;justify-content:center;min-height:24px;margin-bottom:12px;padding:0 12px;border-radius:999px;background:rgba(125, 214, 121, 0.2);color:#d6ffd2;font-size:12px;font-weight:700;line-height:1;
}
.farm-access-icon
{
display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;margin:0 auto 12px;border-radius:50%;background:#5aa93a;box-shadow:0 12px 26px rgba(56, 115, 30, 0.42);font-size:28px;line-height:1;
}
.farm-access-title
{
margin:0 0 10px;font-size:22px;line-height:1.2;letter-spacing:0;
}
.farm-access-message
{
margin:0;color:rgba(255, 255, 255, 0.9);font-size:15px;line-height:1.45;
}
.farm-access-hint
{
margin-top:10px;color:rgba(255, 255, 255, 0.72);font-size:13px;line-height:1.35;
}
.farm-access-code-row
{
display:flex;gap:8px;margin-top:16px;
}
.farm-access-code-input
{
flex:1 1 auto;min-width:0;height:46px;padding:0 12px;border:2px solid rgba(255, 255, 255, 0.28);border-radius:8px;background:rgba(255, 255, 255, 0.1);color:#fff;font-size:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-align:center;outline:none;
}
.farm-access-code-input::placeholder
{
color:rgba(255, 255, 255, 0.5);letter-spacing:normal;font-weight:500;
}
.farm-access-code-input:focus
{
border-color:#7dd679;box-shadow:0 0 0 3px rgba(125, 214, 121, 0.25);
}
.farm-access-code-btn
{
flex:0 0 auto;height:46px;padding:0 18px;border:0;border-radius:8px;background:#5aa93a;box-shadow:0 10px 22px rgba(56, 115, 30, 0.4);color:#fff;font-size:15px;font-weight:800;cursor:pointer;
}
.farm-access-code-btn:hover:not(:disabled)
{
background:#67be40;
}
.farm-access-code-btn:disabled
{
opacity:0.6;cursor:not-allowed;
}
.farm-access-error
{
min-height:18px;margin-top:8px;color:#ff9a9a;font-size:13px;
}
.farm-access-footnote
{
max-width:320px;margin:14px auto 0;color:rgba(255, 255, 255, 0.6);font-size:12px;line-height:1.35;
}
.farm-access-scene
{
position:relative;margin:2px 0 16px;border-radius:14px;overflow:hidden;border:1px solid rgba(255, 255, 255, 0.18);box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 26px rgba(0, 0, 0, 0.28);
}
.fa-scene-svg
{
display:block;width:100%;height:auto;
}
.fa-scene-svg [class^="fa-"],.fa-scene-svg [class*=" fa-"]
{
transform-box:fill-box;transform-origin:center;
}
.fa-sun-rays
{
animation:fa-rotate 16s linear infinite;
}
.fa-lock
{
animation:fa-bob 2.4s ease-in-out infinite;
}
.fa-ticket
{
animation:fa-float 3.8s ease-in-out infinite;
}
.fa-grass path
{
animation:fa-sway 2.6s ease-in-out infinite;transform-origin:bottom center;
}
.fa-grass path:nth-child(2)
{
animation-delay:0.4s;
}
.fa-grass path:nth-child(3)
{
animation-delay:0.9s;
}
.fa-gear-spin
{
animation:fa-rotate 9s linear infinite;
}
.fa-gear-spin--slow
{
animation-duration:14s;
}
.fa-gear-spin--mid
{
animation-duration:10s;
}
.fa-gear-spin--fast
{
animation-duration:5s;
}
.fa-gear-spin--rev
{
animation-name:fa-rotate-rev;
}
.fa-spark
{
animation:fa-twinkle 1.8s ease-in-out infinite;
}
.fa-spark--b
{
animation-delay:0.6s;
}
.fa-spark--c
{
animation-delay:1.1s;
}
.fa-cloud
{
animation:fa-drift 9s ease-in-out infinite alternate;
}
.fa-cloud--b
{
animation-duration:12s;animation-delay:1.2s;
}
@keyframes fa-pop
{
from
{
opacity:0;transform:translate(-50%, -46%) scale(0.96);
}
to
{
opacity:1;transform:translate(-50%, -50%) scale(1);
}
}
@keyframes fa-rotate
{
to
{
transform:rotate(360deg);
}
}
@keyframes fa-rotate-rev
{
to
{
transform:rotate(-360deg);
}
}
@keyframes fa-bob
{
0%,100%
{
transform:translateY(0);
}
50%
{
transform:translateY(-5px);
}
}
@keyframes fa-float
{
0%,100%
{
transform:translateY(0) rotate(-3deg);
}
50%
{
transform:translateY(-6px) rotate(3deg);
}
}
@keyframes fa-sway
{
0%,100%
{
transform:skewX(0deg);
}
50%
{
transform:skewX(7deg);
}
}
@keyframes fa-drift
{
from
{
transform:translateX(-10px);
}
to
{
transform:translateX(12px);
}
}
@keyframes fa-twinkle
{
0%,100%
{
opacity:0.2;transform:scale(0.7);
}
50%
{
opacity:1;transform:scale(1.15);
}
}
@media (prefers-reduced-motion: reduce)
{
.fa-scene-svg [class^="fa-"],.fa-scene-svg [class*=" fa-"]
{
animation:none !important;
}
.farm-access-required
{
animation:none !important;
}
}
.settings-row--note
{
justify-content:flex-start;
}
.settings-note
{
display:block;width:100%;color:rgba(255, 255, 255, 0.66);font-size:12px;line-height:1.35;
}
.farm-init-failure-detail
{
max-width:340px;margin:10px auto 0;color:rgba(255, 255, 255, 0.62);font-size:12px;line-height:1.4;word-break:break-word;
}
#farm-background-static
{
position:relative;z-index:1;
}
#bg-animations
{
z-index:0;
}
#scaled-content
{
z-index:6;
}
#farm-field-container
{
z-index:8;
}
.onboarding-overlay
{
position:fixed;inset:0;pointer-events:none;z-index:17000;
}
.onboarding-shade,.onboarding-spotlight
{
position:fixed;box-sizing:border-box;transition:left 0.35s ease,top 0.35s ease,width 0.35s ease,height 0.35s ease;
}
.onboarding-spotlight--full
{
border:none !important;box-shadow:none !important;animation:none !important;
}
.onboarding-shade
{
z-index:17000;background:rgba(8, 17, 20, 0.48);pointer-events:auto;touch-action:none;
}
.onboarding-spotlight
{
z-index:17001;border-radius:16px;border:2px solid rgba(255, 229, 136, 0.96);box-shadow:0 0 0 4px rgba(255, 229, 136, 0.22), 0 0 28px rgba(255, 229, 136, 0.62);pointer-events:none;animation:onboardingSpotlightPulse 1.6s ease-in-out infinite;
}
body.onboarding-active .onboarding-overlay
{
z-index:20000;
}
body.onboarding-active .onboarding-shade
{
z-index:20000;
}
body.onboarding-active .onboarding-spotlight
{
z-index:20001;
}
.onboarding-dialogue
{
position:fixed;left:14px;right:14px;bottom:64px;max-width:400px;margin:0 auto;pointer-events:none;z-index:20002;transition:bottom 0.35s ease,top 0.35s ease;
}
body.app-modal-active .onboarding-dialogue
{
bottom:150px;
}
.onboarding-dialogue--top
{
bottom:auto !important;top:calc(var(--app-safe-top, 0px) + 110px);
}
.onboarding-dialogue-inner
{
display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:22px;background:rgba(255, 250, 236, 0.97);border:1px solid rgba(191, 148, 81, 0.3);box-shadow:0 18px 40px rgba(41, 29, 16, 0.22);
}
.onboarding-avatar
{
flex:0 0 64px;width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid rgba(144, 200, 100, 0.5);background:#fff;box-shadow:0 4px 12px rgba(41, 29, 16, 0.12);
}
.onboarding-avatar img
{
width:100%;height:100%;object-fit:cover;
}
.onboarding-content
{
flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.onboarding-text
{
font-size:14px;line-height:1.45;color:#5d452b;white-space:pre-wrap;word-break:break-word;min-height:3em;pointer-events:none;
}
.onboarding-cursor
{
display:inline;animation:onboardingCursorBlink 0.8s step-end infinite;color:#7a5a34;font-weight:700;pointer-events:none;
}
.onboarding-actions
{
display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;pointer-events:auto;
}
.onboarding-skip-btn
{
background:none;border:none;color:#8a7a6a;font-size:13px;font-weight:700;padding:6px 10px;cursor:pointer;border-radius:10px;transition:background 0.15s;pointer-events:auto;
}
.onboarding-skip-btn:hover
{
background:rgba(0,0,0,0.06);
}
.onboarding-action-btn
{
min-height:36px;padding:0 16px;border-radius:14px;font-weight:800;font-size:13px;border:none;cursor:pointer;background:linear-gradient(180deg,#90c864,#659f45);color:#fff;box-shadow:0 8px 18px rgba(78,120,56,0.16);pointer-events:auto;
}
.onboarding-action-btn:active
{
transform:translateY(1px);
}
.onboarding-target
{
z-index:17002 !important;border-radius:16px;
}
.onboarding-target:not(#farm-field-container)
{
box-shadow:0 0 0 3px rgba(255, 222, 121, 0.88), 0 0 0 10px rgba(255, 222, 121, 0.18) !important;animation:onboardingPulse 1.6s ease-in-out infinite;
}
.onboarding-target:not(.farm-bed)
{
position:relative;
}
#farm-field-container.onboarding-target--field-container
{
z-index:8 !important;
}
@keyframes onboardingSpotlightPulse
{
0%, 100%
{
box-shadow:0 0 0 4px rgba(255, 229, 136, 0.22), 0 0 28px rgba(255, 229, 136, 0.62);
}
50%
{
box-shadow:0 0 0 7px rgba(255, 229, 136, 0.14), 0 0 36px rgba(255, 229, 136, 0.72);
}

}
@keyframes onboardingPulse
{
0%, 100%
{
box-shadow:0 0 0 3px rgba(255, 222, 121, 0.88), 0 0 0 10px rgba(255, 222, 121, 0.18);
}
50%
{
box-shadow:0 0 0 3px rgba(255, 222, 121, 0.98), 0 0 0 15px rgba(255, 222, 121, 0.1);
}

}
@keyframes onboardingCursorBlink
{
0%,100%
{
opacity:1;
}
50%
{
opacity:0;
}

}
@media (max-width: 430px) and (min-height: 780px)
{
    body:not(.app-auth-required) .user-panel,    body:not(.app-auth-required) .control-panel
{
top:calc(var(--app-safe-top) + 50px);
}
body:not(.app-auth-required) .user-panel-actions--left,    body:not(.app-auth-required) .user-panel-actions--right
{
top:calc(var(--app-safe-top) + 176px);
}
.farm-auth-required
{
width:min(calc(100vw - 32px), 360px);padding:22px 18px 24px;
}
.farm-auth-required-title
{
font-size:22px;
}
.farm-auth-required-message
{
font-size:15px;
}
.plant-success-message,    .error-message,    .info-message,    .plant-selection-message,    .end-of-plants-message,    .shovel-notification,    .permanent-planting-message
{
top:calc(var(--app-safe-top) + 162px);
}

}
@media (min-width: 1024px)
{
    .user-panel
{
left:max(calc(var(--app-safe-left) + 4px), calc((100vw - var(--desktop-hud-max-width)) / 2 + 12px));
}
.control-panel
{
right:max(calc(var(--app-safe-right) + 4px), calc((100vw - var(--desktop-hud-max-width)) / 2 + 12px));
}
.user-panel-actions--left
{
left:max(calc(var(--app-safe-left) + 10px), calc((100vw - var(--desktop-hud-max-width)) / 2 + 16px));
}
.user-panel-actions--right
{
right:max(calc(var(--app-safe-right) + 10px), calc((100vw - var(--desktop-hud-max-width)) / 2 + 16px));
}

}
@media (min-width: 900px) and (min-height: 760px)
{
    body:not(.app-auth-required)
{
--farm-field-hud-clearance:92px;
}

}
body.app-modal-active .container
{
overflow:hidden !important;touch-action:none !important;
}
body.app-modal-active #scene-layer,body.app-modal-active #farm-field-container,body.app-modal-active #bg-animations,body.app-modal-active #fireflyCanvas
{
pointer-events:none !important;
}
body.app-modal-active .modal-overlay.active,body.app-modal-active .animal-feed-overlay.active
{
z-index:16000 !important;isolation:isolate;
}
body.app-modal-active .modal-overlay.active .modal-window,body.app-modal-active .animal-feed-overlay.active .modal-window,body.app-modal-active .animal-feed-overlay.active .animal-feed-popup,body.app-modal-active .modal-overlay.active .banner-header,body.app-modal-active .modal-overlay.active .bottom-close-btn-container
{
z-index:16001 !important;
}
body.app-modal-active .user-panel,body.app-modal-active .user-panel-actions,body.app-modal-active .control-panel,body.app-modal-active .bottom-control-panel,body.app-modal-active .foreign-actions-panel,body.app-modal-active .viewing-farm-banner,body.app-modal-active .shovel-notification
{
opacity:0 !important;visibility:hidden !important;pointer-events:none !important;
}

.network-status-indicator
{
position:fixed;top:calc(var(--app-safe-top) + 4px);left:50%;transform:translateX(-50%);z-index:99999;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 12px;border-radius:12px;background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.12);opacity:1;visibility:visible;transition:opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;white-space:nowrap;
}
.network-status-indicator.hidden
{
opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transform:translateX(-50%) translateY(-8px);
}
.network-status-icon
{
flex:0 0 auto;width:8px;height:8px;border-radius:50%;border:2px solid rgba(255,255,255,0.7);box-shadow:0 0 6px rgba(0,0,0,0.3), inset 0 0 4px rgba(255,255,255,0.2);transition:background 0.3s ease, border-color 0.3s ease;position:relative;
}
.network-status-text
{
font-size:11px;font-weight:600;color:rgba(255,255,255,0.9);text-shadow:0 1px 2px rgba(0,0,0,0.3);font-family:'Quicksand', sans-serif;letter-spacing:0.3px;
}
.network-status--excellent
{
background:#4CAF50;border-color:rgba(76,175,80,0.8);box-shadow:0 0 8px rgba(76,175,80,0.5);
}
.network-status--good
{
background:#8BC34A;border-color:rgba(139,195,74,0.8);box-shadow:0 0 8px rgba(139,195,74,0.5);
}
.network-status--weak
{
background:#FFC107;border-color:rgba(255,193,7,0.8);box-shadow:0 0 8px rgba(255,193,7,0.5);
}
.network-status--poor
{
background:#FF5722;border-color:rgba(255,87,34,0.8);box-shadow:0 0 8px rgba(255,87,34,0.5);animation:networkPulse 1.5s infinite;
}
.network-status--offline
{
background:#e74c3c;border-color:rgba(231,76,60,0.8);box-shadow:0 0 8px rgba(231,76,60,0.5);
}
.network-status--offline::before,.network-status--offline::after
{
content:'';position:absolute;top:50%;left:50%;width:2px;height:8px;background:rgba(255,255,255,0.9);border-radius:1px;transform:translate(-50%,-50%) rotate(45deg);
}
.network-status--offline::after
{
transform:translate(-50%,-50%) rotate(-45deg);
}
@keyframes networkPulse
{
0%,100%{box-shadow:0 0 8px rgba(255,87,34,0.5);}
50%{box-shadow:0 0 14px rgba(255,87,34,0.8);}
}

/* Plain system-font overrides for selected UI text. Declared in an EARLIER
   cascade layer than app-font, so these !important rules win over the global
   Russo One display font (important declarations prefer earlier layers). */
@layer ff-plain {
    .daily-login-reward-line,
    .daily-login-reward-text {
        font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .dog-kv .k,
    .dog-kv .v {
        font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif !important;
        font-weight: 700 !important;
        font-size: 11px !important;
    }

    .shop-catalog-item-name,
    .shop-catalog-item-name * {
        font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif !important;
        font-weight: 700 !important;
    }

    .message-content p {
        font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif !important;
        font-weight: 700 !important;
        font-size: 13px !important;
    }

    #foreign-profile-panel {
        position: fixed !important;
        top: calc(var(--app-safe-top, 0px) + 50px) !important;
        left: calc(var(--app-safe-left, 0px) + 4px) !important;
        right: auto !important;
        z-index: 360 !important;
        width: min(162px, calc(50vw - 16px)) !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        padding: 6px 10px !important;
        color: #eaf6ff !important;
        background: radial-gradient(circle at 30% 30%, #3d85b157, #155e9594) !important;
        border-radius: 20px !important;
        box-shadow: 0 0 0 1px rgb(114 158 185 / 70%), 0 10px 20px rgba(0, 50, 100, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.6) !important;
    }

    #foreign-profile-panel .foreign-action-btn {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 3px 4px;
        border-radius: 10px;
        border: 1px solid rgba(176, 144, 103, 0.35);
        background: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        font-family: inherit;
        font-size: 10px;
        font-weight: 600;
        color: #5a3f24;
        transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, background 0.12s ease;
    }

    #foreign-actions-panel .foreign-actions-list {
        display: grid;
        gap: 5px;
    }

    #foreign-actions-panel .foreign-actions-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 11px;
        color: rgb(255 255 255 / 90%);
        padding: 7px 9px;
        border-radius: 10px;
        background: rgb(76 118 159 / 51%);
        border: 1px solid rgba(255, 255, 255, 0.22);
        white-space: nowrap;
    }

    #foreign-actions-panel .foreign-actions-item strong {
        color: #55f3f0de;
        font-weight: 800;
        white-space: nowrap;
    }

    .bed-plant-name, .animal-name, .profile-stats-name, .level-up-title,
    .flower-gift-panel-title, .shop-detail-title, .inventory-item-name, .shop-catalog-name {
        color: #6d7c33 !important;
        font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        text-shadow: none !important;
    }

    .banner-title {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        transform: translateY(var(--frame-title-y-offset)) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #754d23c9 !important;
        text-align: center !important;
        -webkit-text-stroke: 0.35px rgb(255 245 188 / 72%) !important;
        text-shadow: 0 1px 0 rgb(122 118 97 / 34%), 0 0px 0 rgb(122 115 85 / 66%), 0 2px 9px rgba(91, 49, 11, 0.16) !important;
        font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
        font-size: var(--frame-title-font) !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        text-wrap: balance !important;
        overflow: hidden !important;
    }
}

/* Global display font: apply Russo One everywhere. Wrapping the rule in a
   cascade layer gives it priority over the unlayered !important font-family
   declarations used across the other stylesheets. */
@layer app-font {
    * {
        font-family: 'Russo One', 'Segoe UI', 'Trebuchet MS', Arial, sans-serif !important;
        /* Russo One ships a single 400 weight; disable synthetic bold so desktop
           browsers do not fake a heavy weight (mobile already renders it thin). */
        font-synthesis: none !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Flower gift panel: compact sizing / width */
.flower-gift-panel {
    width: 94% !important;
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
}

/* Inline emoji-replacement icons */
.inline-emoji-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: inline-block;
    vertical-align: -3px;
}

.quick-panel-big-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.achievement-icon-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}

.user-achievement-icon-img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    display: block;
}

.user-name-achievement-icon-img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

/* Next-level rewards block: compact grid + dividers */
.profile-next-rewards-card {
    display: grid;
    gap: 6px;
}

.profile-next-rewards-title {
    font-size: 12.5px;
    margin-bottom: 0;
}

.profile-next-rewards-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(74, 50, 22, 0.3) 20%, rgba(74, 50, 22, 0.3) 80%, transparent);
}

.profile-next-rewards-rewards {
    display: grid;
    gap: 6px;
}

.profile-next-rewards-money {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    padding: 7px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(178, 142, 94, 0.18);
    color: #4b8d38;
    font-size: 12px;
    font-weight: 800;
}

.profile-next-rewards-list {
    gap: 6px;
    margin-top: 0;
}

.profile-next-reward-item,
.profile-next-reward-empty {
    padding: 7px 9px;
    font-size: 12px;
}

.profile-next-rewards-subtitle {
    font-size: 12px;
    line-height: 1.3;
}

/* Animal info window: single background, avatar left / stats right, compact */
.animal-info-card--showcase {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.animal-showcase-body {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.animal-showcase-body .animal-hero {
    margin-bottom: 0;
}

.animal-showcase-body .animal-avatar-preview,
.animal-showcase-body .animal-avatar-image {
    width: 108px !important;
    height: 108px !important;
    left: 0 !important;
    top: 0 !important;
}

.animal-actions-row {
    display: flex;
    gap: 10px;
}

.animal-actions-row .harvest-btn {
    flex: 1 1 0;
}

/* Animal info showcase: shop-like layout */
.animal-info-showcase .shop-detail-avatar,
.animal-info-showcase .shop-detail-avatar img {
    width: 90px !important;
    height: 90px !important;
}

.shop-detail-stats--single {
    grid-template-columns: 1fr !important;
}

.animal-actions-row .buy-btn {
    flex: 1 1 0;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 16px 7px 16px 7px !important;
    border: 1px solid rgba(74, 121, 49, 0.42) !important;
    background: linear-gradient(180deg, #8fce62, #5f9b43) !important;
    color: #fffdf7 !important;
    box-shadow: 0 5px 10px rgba(62, 94, 38, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer;
}

.animal-actions-row .buy-btn:disabled {
    filter: grayscale(0.35);
    opacity: 0.75;
    cursor: not-allowed;
}

/* Animal info showcase layout (available regardless of loaded style group) */
.animal-info-showcase .shop-detail-main {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.animal-info-showcase .shop-detail-media {
    display: block;
}

.animal-info-showcase .shop-detail-copy {
    min-width: 0;
}

.animal-info-showcase .shop-detail-title {
    font-size: 15px;
    font-weight: 800;
    color: #5a4327;
    margin-bottom: 6px;
    background: rgb(247 228 172 / 30%) !important;
    border: 1px solid rgb(176 144 103 / 30%) !important;
    border-radius: 12px !important;
    padding: 7px 10px !important;
    text-align: center !important;
}

.animal-info-showcase .shop-detail-desc {
    font-size: 12px;
    color: #71593e;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(176, 144, 103, 0.2) !important;
    border-radius: 12px !important;
    padding: 7px 10px !important;
    text-align: center !important;
}

.animal-info-showcase .shop-detail-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 10px;
}

.animal-info-showcase .shop-detail-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(175, 142, 102, 0.16);
    font-size: 12px;
    color: #6e583e;
    min-width: 0;
}

.animal-info-showcase .shop-detail-stat strong {
    color: #4f6f2f;
}

.animal-info-showcase .shop-detail-stat strong.is-starving {
    color: #d32f2f !important;
}

.animal-feed-list {
    display: grid;
    gap: 10px;
}

.animal-feed-list .food-option-btn {
    width: 100%;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 16px 7px 16px 7px !important;
    border: 1px solid rgba(74, 121, 49, 0.42) !important;
    background: linear-gradient(180deg, #8fce62, #5f9b43) !important;
    color: #fffdf7 !important;
    box-shadow: 0 5px 10px rgba(62, 94, 38, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: center;
    cursor: pointer;
}

.animal-feed-list .food-option-btn:hover:not(:disabled) {
    filter: brightness(1.04);
}

.animal-feed-list .food-option-btn:disabled {
    filter: grayscale(0.35);
    opacity: 0.75;
    cursor: not-allowed;
}

/* Feed selection grid (max 3 per row) */
.animal-feed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.animal-feed-card {
    position: relative;
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
    padding: 8px 6px 6px;
    border-radius: 14px;
    border: 1px solid rgba(175, 142, 93, 0.28);
    background: rgb(159 144 49 / 16%);
    color: #5b4227;
    cursor: pointer;
    font-family: inherit;
}

.animal-feed-card:hover {
    background: rgba(255, 250, 231, 0.95);
}

.animal-feed-card.is-selected {
    border-color: rgba(95, 154, 58, 0.7);
    background: linear-gradient(180deg, #eef7e2, #d9ecc2);
    box-shadow: inset 0 0 0 1px rgba(95, 154, 58, 0.5);
}

.animal-feed-dot {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(95, 154, 58, 0.6);
    background: #fff;
}

.animal-feed-card.is-selected .animal-feed-dot {
    background: #5f9a3a;
    box-shadow: inset 0 0 0 2px #fff;
}

.animal-feed-name {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    color: #a26a00bd;
}

.animal-feed-restore {
    font-size: 11px;
    font-weight: 700;
    color: #506f2fd4;
}

.animal-feed-qty {
    font-size: 10px;
    color: #8b7152;
}

.animal-feed-empty {
    display: grid;
    gap: 8px;
    text-align: center;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 250, 231, 0.92);
    border: 1px solid rgba(191, 148, 81, 0.3);
}

.animal-feed-empty-title {
    font-size: 14px;
    font-weight: 800;
    color: #866326;
}

.animal-feed-empty-text {
    font-size: 12px;
    color: #765d40;
    line-height: 1.4;
}

/* Foreign farm panel styling/font lives in the ff-plain layer above. */

/* Hide the "return to my farm" bar while a modal is open on a foreign farm */
body.viewing-farm-mode.app-modal-active #viewing-return-bar {
    display: none !important;
}

/* Do not show (nor allow interacting with) animals on someone else's farm */
body.viewing-farm-mode #farm-animal-layer {
    display: none !important;
}

/* Farmer window: reputation block as a tidy grid */
.profile-reputation-card {
    display: grid !important;
    gap: 8px !important;
    align-content: start !important;
}

.profile-reputation-head {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #5f7937 !important;
    margin-bottom: 0 !important;
}

.profile-reputation-name {
    justify-self: center !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #5a6b4e !important;
    margin-bottom: 0 !important;
    padding: 6px 14px !important;
    border-radius: 12px !important;
    background: rgba(255, 250, 231, 0.9) !important;
    border: 1px solid rgba(191, 148, 81, 0.3) !important;
    text-align: center !important;
}

.profile-reputation-desc {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    color: #775328c9 !important;
    margin: 0 !important;
}

.profile-reputation-footnote {
    margin-top: 2px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(175, 142, 102, 0.25) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #8a7358 !important;
    font-style: italic !important;
}

@media (max-width: 520px) {
    .animal-showcase-body {
        grid-template-columns: 88px minmax(0, 1fr);
    }
    .animal-showcase-body .animal-avatar-preview,
    .animal-showcase-body .animal-avatar-image {
        width: 88px !important;
        height: 88px !important;
    }
}
/* ==========================================================================
   Tools upgrade panel ("Прокачивание") + tool charge indicators
   ========================================================================== */

.profile-panel-card .panel-value-banner {
    margin-top: -8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #6b5237;
    text-align: left;
    background: rgb(255 247 131 / 31%);
    border: 1px solid rgba(191, 148, 81, 0.3);
    border-radius: 12px;
}

.profile-panel-card .profile-next-rewards-card {
    margin-top: -8px;
    padding: 9px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(175, 142, 102, 0.18);
}

.tools-upgrade-card {
    margin-top: -8px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(175, 142, 102, 0.18);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tools-upgrade-title {
    font-size: 13px;
    font-weight: 800;
    color: #6b5237;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tool-upgrade-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(255, 244, 214, 0.75);
    border: 1px solid rgba(191, 148, 81, 0.22);
}

.tool-upgrade-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 2px 3px rgba(120, 90, 40, 0.25));
}

.tool-upgrade-icon--shovel { background-image: url(image/icon/icon-lopata.png); }
.tool-upgrade-icon--bucket { background-image: url(image/icon/icon-leika.png); }

.tool-upgrade-info { flex: 1 1 auto; min-width: 0; }

.tool-upgrade-name {
    font-size: 13px;
    font-weight: 800;
    color: #5c4a32;
}

.tool-upgrade-lvl {
    font-weight: 600;
    color: #8a7358;
    font-size: 12px;
}

.tool-upgrade-meta {
    font-size: 12px;
    color: #7a6a55;
}

.tool-upgrade-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 96px;
    padding: 7px 10px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
    color: #4d3a22;
    background: linear-gradient(180deg, #ffe08a, #f6c453);
    box-shadow: 0 3px 0 rgba(150, 110, 50, 0.45);
    font-family: inherit;
}

.tool-upgrade-btn-btn-price { font-size: 12px; font-weight: 700; }
.tool-upgrade-btn-price { font-size: 12px; font-weight: 700; }

.tool-upgrade-btn.is-disabled {
    opacity: 0.55;
    cursor: default;
    box-shadow: none;
    filter: grayscale(0.3);
}

/* Charge fill on the bottom panel tool buttons (icon-shaped via mask) */
.bottom-control-fill {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 35px;
    height: 35px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.bottom-control-fill[data-tool-fill="shovel"] {
    -webkit-mask-image: url(image/icon/icon-lopata.png);
    mask-image: url(image/icon/icon-lopata.png);
}

.bottom-control-fill[data-tool-fill="bucket"] {
    -webkit-mask-image: url(image/icon/icon-leika.png);
    mask-image: url(image/icon/icon-leika.png);
}

.bottom-control-fill i {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: block;
    transition: height 0.35s ease;
}

.bottom-control-fill[data-tool-fill="shovel"] i {
    background: #c8a06a;
    opacity: 0.78;
}

.bottom-control-fill[data-tool-fill="bucket"] i {
    background: #7fc4e8;
    opacity: 0.82;
}

/* Status badge above a bottom panel button (with a downward arrow) */
.bottom-tool-status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0;
    pointer-events: none;
    z-index: 110;
}

.bottom-tool-status-item {
    position: absolute;
    bottom: 8px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bottom-tool-status-item.hidden { display: none; }

.bottom-tool-status-text {
    display: block;
    padding: 3px 9px;
    border-radius: 10px;
    background: rgba(20, 20, 20, 0.82);
    color: #ffe8b0;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.bottom-tool-status-arrow {
    width: 0;
    height: 0;
    margin-top: -1px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid rgba(20, 20, 20, 0.82);
}

/* Stream/pond "fetch water" button */
.farm-water-refill-btn {
    position: absolute;
    top: 176px;
    left: 70px;
    width: 44px;
    height: 44px;
    z-index: 6;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.92), rgba(150, 200, 240, 0.88));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.55);
    animation: waterRefillPulse 2s ease-in-out infinite;
}

.farm-water-refill-btn.hidden { display: none !important; }

.farm-water-refill-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
    color: #2b4a63;
    background: rgba(255, 255, 255, 0.88);
    padding: 2px 7px;
    border-radius: 9px;
    border: 1px solid rgba(90, 150, 200, 0.4);
    pointer-events: none;
}

.farm-water-refill-svg {
    width: 26px;
    height: 26px;
    display: block;
}

@keyframes waterRefillPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.04); }
}

.farm-water-refill-btn.is-pouring .water-refill-bucket {
    animation: waterScoop 0.9s ease;
    transform-origin: 50% 30%;
}

.farm-water-refill-btn.is-pouring .water-refill-splash {
    animation: waterSplash 0.9s ease;
    opacity: 0;
}

@keyframes waterScoop {
    0% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(14px) rotate(-32deg); }
    55% { transform: translateY(14px) rotate(-32deg); }
    80% { transform: translateY(0) rotate(4deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes waterSplash {
    0%, 40% { opacity: 0; }
    55% { opacity: 1; }
    100% { opacity: 0; }
}
/* v2: robust charge gauge — the button cell fills behind the icon */
.bottom-control-fill {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 12px;
    overflow: hidden;
    z-index: 0;
    -webkit-mask: none;
    mask: none;
}
.bottom-control-fill i { border-radius: 12px 12px 0 0; }
.bottom-control-fill[data-tool-fill="shovel"] i { background: linear-gradient(180deg, #d8b585, #b98a52); opacity: 0.5; }
.bottom-control-fill[data-tool-fill="bucket"] i { background: linear-gradient(180deg, #a9dbf5, #6bb8e0); opacity: 0.55; }
.bottom-control-icon { position: relative; z-index: 1; }
.farm-water-refill-btn { top: 199px; left: 100px; pointer-events: auto; }
/* v3: charge gauge ABOVE the icon and filling the whole button cell; smaller centered pond button */
.bottom-control-fill { z-index: 2; }
.bottom-control-icon { position: relative; z-index: 1; }
.bottom-control-fill[data-tool-fill="shovel"] i { opacity: 0.55; }
.bottom-control-fill[data-tool-fill="bucket"] i { opacity: 0.62; }
.farm-water-refill-btn {
    width: 36px;
    height: 36px;
    top: 207px;
    left: 104px;
    padding: 0;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.farm-water-refill-svg { width: 22px; height: 22px; }
.farm-water-refill-label { font-size: 10px; top: -18px; }
/* v4: smaller centered stream badge */
.farm-water-refill-btn {
    width: 34px;
    height: 34px;
    top: 208px;
    left: 105px;
    cursor: pointer;
}
.farm-water-refill-svg { width: 18px; height: 18px; }
.farm-water-refill-label { font-size: 10px; top: -17px; }
/* v5: stream button look per design + half-bucket visibility (JS toggles .hidden) */
.farm-water-refill-btn {
    position: absolute;
    top: 176px;
    left: 70px;
    width: 44px;
    height: 44px;
    z-index: 6;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.92), rgb(150 200 240 / 38%));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgb(68 132 125 / 29%);
    animation: waterRefillPulse 2s ease-in-out infinite;
    pointer-events: auto;
}
.farm-water-refill-label {
    position: absolute;
    top: -20px;
    left: 44%;
    transform: translateX(-49%);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
    color: #d0f7ff;
    background: rgb(47 134 166 / 68%);
    padding: 2px 7px;
    border-radius: 9px;
    border: 1px solid rgb(90 150 200 / 60%);
    pointer-events: none;
}
.farm-water-refill-label {
    font-size: 11px;
    top: -22px;
}
.farm-water-refill-svg { width: 22px; height: 22px; }
/* v6: charge gauge BEHIND the icon, full cell (mask disabled); SVG scoop animation */
.bottom-control-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 12px;
    overflow: hidden;
    z-index: 0;
    -webkit-mask: none !important;
    mask: none !important;
}
.bottom-control-fill[data-tool-fill] {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
.bottom-control-icon {
    position: relative;
    z-index: 1;
}
.bottom-control-fill[data-tool-fill="shovel"] i { background: linear-gradient(180deg, #d8b585, #b98a52); opacity: 0.7; }
.bottom-control-fill[data-tool-fill="bucket"] i { background: linear-gradient(180deg, #a9dbf5, #6bb8e0); opacity: 0.72; }

.farm-water-refill-btn.is-pouring .water-refill-bucket {
    animation: waterScoopV2 1.1s ease;
    transform-origin: 50% 18%;
}
.farm-water-refill-btn.is-pouring .water-refill-splash {
    animation: waterSplashV2 1.1s ease;
    opacity: 0;
    transform-origin: 20px 7px;
}
@keyframes waterScoopV2 {
    0% { transform: translateY(0) rotate(0deg); }
    22% { transform: translateY(4px) rotate(-20deg); }
    44% { transform: translateY(7px) rotate(-34deg); }
    62% { transform: translateY(6px) rotate(-30deg); }
    82% { transform: translateY(0) rotate(6deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
@keyframes waterSplashV2 {
    0%, 32% { opacity: 0; transform: translateY(3px) scale(0.5); }
    55% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-7px) scale(1.15); }
}
/* v7: nudge the shovel timer 3px to the right so it sits centered over the shovel button */
.bottom-tool-status-item[data-tool-status="shovel"] {
    transform: translateX(calc(-50% + 3px));
}