:root {
    --bg-color: #87CEEB;
    --tile-width-half: 65px;
    --tile-height-half: 38px;
    --wood-border: #3E2723;
    --slot-bg: #3E2723;
    
    /* Mahjong settings */
    --mj-tile-w: 46px;
    --mj-tile-h: 60px;
    --mj-tile-depth: 6px;
}

* { box-sizing: border-box; user-select: none; -webkit-user-select: none; }

body {
    background: linear-gradient(180deg, #4facfe 0%, #a1c4fd 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100vh; margin: 0; overflow: hidden;
    font-family: 'Segoe UI', Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent; 
}

.game-wrapper {
    position: relative; width: 100%; height: 100%;
    max-width: 500px; overflow: hidden;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

/* --- СИСТЕМА СЦЕН (ВКЛАДКИ) --- */
.game-scene {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; /* Скрыта и не кликабельна */
    transition: opacity 0.3s ease-in-out;
    z-index: 1;
}

.game-scene.active {
    opacity: 1; pointer-events: all; z-index: 2;
}

/* Фон для сцен (общий класс) */
.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* Специально для маджонга - фон должен быть строго по центру */
#scene-mahjong .bg-image {
    background-position: center center;
    background-size: cover;
}

/* Фоны для игротеки и игр (день) - используем предзаблюренные версии */
#scene-games-menu .bg-image,
#scene-match3 .bg-image,
#scene-mahjong .bg-image,
#scene-mahjong-no-attempts .bg-image,
#scene-blocked .bg-image,
#scene-watersort .bg-image {
    background-image: url('farm_assets/bg_igroteka_blur_day.png');
    transition: background-image 2s ease-in-out;
}

/* Смена фона в зависимости от времени суток для игр и игротеки (ночь) */
body.night-mode #scene-games-menu .bg-image,
body.night-mode #scene-match3 .bg-image,
body.night-mode #scene-mahjong .bg-image,
body.night-mode #scene-mahjong-no-attempts .bg-image,
body.night-mode #scene-blocked .bg-image,
body.night-mode #scene-watersort .bg-image {
    background-image: url('farm_assets/bg_igroteka_blur_night.png');
}

/* Умная обертка для хлева - контейнер по размеру изображения */
.barn-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.barn-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Растягиваем изображение, заполняя контейнер */
    object-position: center;
    display: block;
    transition: opacity 0.5s ease-in-out;
}

/* Контейнер для слотов теперь позиционируется относительно изображения */
#coops-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

/* Сообщение о ночи в хлеве */
.barn-night-message {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none; /* По умолчанию скрыто */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    pointer-events: none; /* Чтобы не мешало кликам */
}

.barn-night-text {
    background: rgba(0, 0, 0, 0.8);
    border: 3px solid #8B4513;
    border-radius: 15px;
    padding: 30px 40px;
    text-align: center;
    max-width: 80%;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.barn-night-title {
    font-size: 24px;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.barn-night-details {
    font-size: 16px;
    color: #FFFFFF;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Контейнер для яиц */
#eggs-container {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    pointer-events: none;
    z-index: 8;
}

/* Яйцо на полу */
/* Яйцо на полу */
.chicken-egg {
    position: absolute;
    width: 32px; /* Чуть меньше, чтобы соответствовало масштабу */
    height: 32px;
    background-image: url('farm_assets/egg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom; /* Прижимаем к низу блока */
    
    cursor: pointer;
    pointer-events: auto;
    
    /* Z-индекс должен быть ВЫШЕ пола, но НИЖЕ интерфейса. 
       У слотов z-index: 20. 
       Сделаем яйца z-index: 25, чтобы они перекрывали край гнезда, если упадут близко, 
       создавая эффект, что они лежат "перед" гнездом. */
    z-index: 25; 
    
    transition: transform 0.2s;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); /* Тень на полу */

    /* Анимация появления */
    animation: eggPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chicken-egg:active {
    transform: scale(0.9);
}

@keyframes eggPop {
    0% { transform: scale(0) translateY(-10px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Корыто для кормления кур */
/* Корыто удалено */
/*.chicken-trough {
    position: absolute;
    bottom: 46%;
    left: 38%;
    transform: translateX(-50%);
    width: 100px;
    height: 80px;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s;
}

.chicken-trough:hover {
    transform: translateX(-50%) scale(1.1);
}

.chicken-trough img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Облака и листья только для фермы */
#scene-farm .clouds-layer,
#scene-farm .leaves-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2;
}
#scene-farm .clouds-layer { height: 60%; }

/* --- ФОН (ТВОЙ, НЕ ТРОГАЛ) --- */
.background-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; }
.static-bg {
    width: 100%; height: 100%;
    background-image: url('farm_assets/farm_bg2.png');
    background-size: cover; background-position: center bottom; background-repeat: no-repeat;
    transition: background-image 2s ease-in-out;
}
body::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('farm_assets/farm_bg2.png'); background-size: cover; 
    /* УБРАЛИ filter: blur(20px) - ЭТО ТОРМОЗИТ GPU! */
    z-index: -100;
    transition: background-image 2s ease-in-out;
}
body.night-mode::before {
    background-image: url('farm_assets/farm_bg_night.png');
    /* УБРАЛИ filter: blur(20px) - ЭТО ТОРМОЗИТ GPU! */
}

/* Затемнение через отдельный слой (легче чем blur) */
body::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3); /* Просто затемнение вместо blur */
    pointer-events: none; z-index: -99;
}
body.night-mode::after {
    background: rgba(0,0,0,0.5); /* Более темное затемнение ночью */
}

/* Облака */
#scene-farm .clouds-layer { position: absolute; top: 0; left: 0; width: 100%; height: 60%; z-index: 1; pointer-events: none; transition: opacity 2s ease-in-out; }
#scene-farm .clouds-layer.night-mode { opacity: 0.3; }
#scene-farm .cloud { position: absolute; background: #fff; border-radius: 100px; box-shadow: 0 8px 5px rgba(0,0,0,0.1); opacity: 0.8; animation: moveCloud linear infinite; transition: opacity 2s ease-in-out; }
body.night-mode #scene-farm .cloud { opacity: 0.2; }
#scene-farm .cloud::after, #scene-farm .cloud::before { content: ''; position: absolute; background: #fff; z-index: -1; }
#scene-farm .cloud::after { width: 100px; height: 100px; top: -50px; left: 50px; border-radius: 100px; }
#scene-farm .cloud::before { width: 120px; height: 120px; top: -70px; right: 50px; border-radius: 200px; }
@keyframes moveCloud { from { transform: translateX(-300px); } to { transform: translateX(600px); } }
#scene-farm .c1 { top: 10%; left: -10%; width: 150px; height: 50px; animation-duration: 35s; animation-delay: -5s; opacity: 0.9; transform: scale(0.8); transition: opacity 2s ease-in-out; }
#scene-farm .c2 { top: 25%; left: -20%; width: 200px; height: 60px; animation-duration: 55s; animation-delay: 0s; opacity: 0.7; transform: scale(1.2); transition: opacity 2s ease-in-out; }
#scene-farm .c3, #scene-farm .c4 { transition: opacity 2s ease-in-out; }
body.night-mode #scene-farm .c3,
body.night-mode #scene-farm .c4 { opacity: 0; display: none; }

/* Листья - скрыты ночью */
#scene-farm .leaves-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: hidden; transition: opacity 2s ease-in-out; }
#scene-farm .leaves-layer.night-hide { opacity: 0; pointer-events: none; }
#scene-farm .leaves-layer.night-hide .leaf { animation: none; display: none; }
#scene-farm .leaf { position: absolute; top: -20px; width: 15px; height: 15px; background: linear-gradient(to bottom right, #FF5722, #FFC107); border-radius: 0 15px 0 15px; animation: fall linear infinite; transition: opacity 2s ease-in-out; }
@keyframes fall { 0% { top: -10%; transform: translateX(0) rotate(0deg); opacity: 1; } 100% { top: 110%; transform: translateX(50px) rotate(360deg); opacity: 0; } }
.l1 { left: 10%; animation-duration: 8s; } .l2 { left: 80%; width: 10px; height: 10px; background: #FF9800; animation-duration: 12s; }

/* --- HUD (Обновленный под твой референс) --- */
.game-hud {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 480px;
    height: 75px; /* Чуть выше, чтобы вместить элементы */
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* Имитация того самого деревянного бруска */
    background: linear-gradient(to bottom, #D7A674, #A87246); /* Градиент дерева */
    border: 4px solid #5D361F; /* Темно-коричневая обводка как на скрине */
    border-radius: 25px; /* Сильные скругления по бокам */
    
    /* Внутренняя тень для объема + внешняя тень */
    box-shadow: 
        inset 0 2px 0 rgba(255,255,255,0.3), /* Блик сверху */
        inset 0 -4px 0 rgba(0,0,0,0.2),      /* Тень снизу внутри */
        0 8px 0 #3E2415,                     /* "Толщина" 3D снизу */
        0 15px 20px rgba(0,0,0,0.4);         /* Тень на землю */
        
    padding: 0 15px;
    z-index: 5000;
    box-sizing: border-box;
}

/* Гвоздики по углам (чисто декор) */
.game-hud::before, .game-hud::after {
    content: '';
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 10px; height: 10px;
    background: #8D5E38;
    border-radius: 50%;
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.3);
    z-index: 2;
}
.game-hud::before { left: 8px; }
.game-hud::after { right: 8px; }

/* --- ЛЕВАЯ ЧАСТЬ: Уровень + Шкала --- */
.level-group {
    display: flex;
    align-items: center;
    flex: 2; /* Занимает больше места */
    margin-right: 15px;
    position: relative;
}

/* Звезда (вылезает за пределы) */
.star-container {
    position: absolute;
    left: 0; /* Свешивается слева */
    top: 40%;
    transform: translateY(-50%);
    width: 65px;
    height: 65px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4));
}

.star-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.level-circle {
    position: absolute;
    width: 24px; height: 24px;
    /* Белый кружок внутри звезды */
    display: flex; align-items: center; justify-content: center;
    
    font-family: 'Segoe UI', sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: #D84315;
}

/* Слот под полоску (Темная выемка) */
.progress-track {
    background: #3B2213; /* Темно-коричневый, почти черный, как на скрине */
    height: 32px; /* Жирная полоска */
    width: 100%;
    margin-left: 35px; /* Место под звезду */
    border-radius: 16px;
    
    /* Внутренняя тень, чтобы казалось, что это углубление */
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    
    position: relative;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    /* Зеленый градиент как на картинке */
    background: linear-gradient(180deg, #9BDD00 0%, #689F38 100%);
    border-radius: 14px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), 2px 0 5px rgba(0,0,0,0.3);
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.xp-text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%; transform: translateY(-50%);
    font-size: 12px;
    font-weight: 900;
    color: #FFF;
    text-shadow: 0 1px 2px #000;
    font-family: 'Verdana', sans-serif;
    letter-spacing: 0.5px;
    z-index: 5;
}

/* --- ПРАВАЯ ЧАСТЬ: Валюта --- */
.currency-group {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    padding-right: 10px;
}

/* Слот под деньги */
.res-pill {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #3B2213; /* Та же темная выемка */
    height: 32px;
    width: 100%; /* Растягиваем */
    max-width: 120px;
    padding-right: 12px;
    
    border-radius: 16px;
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.2);
    position: relative;
}

.res-icon-container {
    position: absolute;
    left: -15px; /* Мешок свисает слева */
    top: 50%; transform: translateY(-50%);
    width: 50px;
    height: 50px;
    z-index: 10;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.5));
}

.res-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.res-amount {
    color: #FFEB3B; /* Желтый текст */
    font-weight: 900;
    font-size: 16px;
    text-shadow: 0 2px 0 #000;
    font-family: 'Segoe UI', sans-serif;
}

/* --- BOTTOM NAVIGATION (UPDATED) --- */
.bottom-nav {
    position: absolute; 
    bottom: 20px; 
    left: 50%; 
    transform: translateX(-50%);
    width: 95%; 
    max-width: 400px; 
    height: 70px;
    display: flex; 
    justify-content: space-around; 
    align-items: center;
    z-index: 5000;
    /* Подложка под меню */
    background: rgba(62, 39, 35, 0.9);
    border-radius: 20px;
    border: 2px solid #8D6E63;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    padding: 0 10px;
}

.nav-btn {
    width: 60px; 
    height: 55px;
    background: transparent;
    border-radius: 10px;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    transition: transform 0.1s, background 0.2s;
    color: #A1887F;
}
.nav-btn.active-tab {
    background: rgba(255,255,255,0.1);
    color: #FFD700;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.nav-btn:active { transform: scale(0.95); }
.nav-icon { font-size: 24px; margin-bottom: 2px; }
.nav-text { font-size: 10px; font-weight: bold; }

/* Floating Action Button (Harvest) - Только для фермы */
.fab-harvest {
    position: absolute;
    bottom: 100px; 
    right: 20px;
    width: 60px; 
    height: 60px;
    background: linear-gradient(180deg, #FBC02D 0%, #F57F17 100%);
    border: 3px solid #FFF; 
    border-radius: 50%;
    box-shadow: 0 6px 10px rgba(0,0,0,0.4);
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 30px; 
    cursor: pointer; 
    z-index: 4000;
    transition: transform 0.2s;
}
.fab-harvest:active { transform: scale(0.9); }
/* Скрываем, если мы не на ферме */
.game-wrapper:not(.state-farm) .fab-harvest { display: none; }

/* Ночной режим для навигации */
body.night-mode .bottom-nav {
    background: rgba(45, 30, 25, 0.9);
    border-color: #5D4037;
}
body.night-mode .nav-btn.active-tab {
    background: rgba(255,255,255,0.15);
    color: #FFD700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}
body.night-mode .fab-harvest {
    background: linear-gradient(180deg, #E65100 0%, #BF360C 100%);
    border-color: #FFD700;
}

/* --- TOAST NOTIFICATIONS --- */
#toast-container {
    position: absolute; top: 90px; left: 50%; transform: translateX(-50%);
    width: 90%; max-width: 400px; z-index: 8000;
    display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none;
}
.toast {
    background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(6px); color: #fff;
    padding: 10px 20px; border-radius: 25px; border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); font-size: 14px; font-weight: bold;
    display: flex; align-items: center; gap: 8px;
    animation: slideDown 0.2s ease-out; transition: opacity 0.3s, transform 0.3s;
}
.toast.hiding { opacity: 0; transform: translateY(-20px); }
.count-pulse { animation: pulseScale 0.2s ease-in-out; color: #FFD700; font-size: 1.2em; }
@keyframes pulseScale { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- MODALS --- */
.modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 6000; display: none; align-items: center; justify-content: center; animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box { width: 90%; max-width: 380px; background: #8D6E63; border: 4px solid #3E2723; border-radius: 20px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.5); padding-bottom: 20px; }
.modal-roof { position: absolute; top: -30px; left: -5%; width: 110%; height: 50px; background: repeating-linear-gradient(45deg, #D32F2F, #D32F2F 15px, #FFEBEE 15px, #FFEBEE 30px); border-radius: 10px; border-bottom: 5px solid #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.3); z-index: 2; }
.modal-sign { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #5D4037; color: #FFD700; padding: 5px 20px; border-radius: 8px; border: 2px solid #FFD700; font-weight: 900; font-size: 18px; z-index: 3; box-shadow: 0 4px 0 rgba(0,0,0,0.5); }
.close-btn { position: absolute; top: -20px; right: -10px; width: 40px; height: 40px; background: #D32F2F; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 3px solid white; cursor: pointer; z-index: 4; box-shadow: 0 4px 5px rgba(0,0,0,0.3); }

/* Вкладки магазина */
.shop-tabs {
    display: flex;
    gap: 10px;
    margin-top: 40px;
    padding: 0 15px;
    justify-content: center;
}
.shop-tab {
    flex: 1;
    padding: 10px 15px;
    background: #5D4037;
    border: 2px solid #3E2723;
    border-radius: 12px;
    color: #A1887F;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.shop-tab.active-tab {
    background: #8D6E63;
    color: #FFD700;
    border-color: #FFD700;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.shop-tab:active {
    transform: scale(0.98);
}

.items-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 15px; max-height: 60vh; overflow-y: auto; }
.items-grid:has(.empty-inventory-message) { display: flex; align-items: center; justify-content: center; grid-template-columns: none; padding: 0; margin-top: 0; }

/* --- КАРТОЧКА ТОВАРА (ОБНОВЛЕНО) --- */
.item-card { 
    background: #5D4037; border-radius: 12px; 
    min-height: 160px; 
    position: relative; box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 4px 0 #3E2723; border: 2px solid #8D6E63; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 10px; 
    cursor: pointer; transition: transform 0.1s, filter 0.1s;
}
.item-card:active { transform: scale(0.97); filter: brightness(1.1); box-shadow: inset 0 0 15px rgba(0,0,0,0.9), 0 2px 0 #3E2723; }

/* Иконка монетки в тексте */
.icon-tiny { width: 16px; height: 16px; vertical-align: middle; margin-bottom: 2px; }

.item-img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); margin-bottom: 10px; }
.item-name { color: #fff; font-size: 15px; font-weight: bold; text-align: center; margin-bottom: 5px; }

/* Ценник */
.price-tag { 
    background: #FFD700; color: #3E2723; 
    font-weight: 900; padding: 4px 12px; border-radius: 15px; 
    font-size: 14px; border: 1px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    display: flex; align-items: center; gap: 5px;
}

/* Кнопка INFO */
.info-btn {
    position: absolute; top: 5px; left: 5px;
    width: 28px; height: 28px;
    background: #2196F3; color: white; border-radius: 50%;
    border: 2px solid white;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-family: serif; font-style: italic;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 5; /* Выше карточки */
}
.info-btn:active { transform: scale(0.9); background: #1976D2; }

.count-badge { position: absolute; top: 5px; right: 5px; background: #D32F2F; color: white; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; border: 2px solid white; }

/* INFO MODAL CONTENT */
.info-content { text-align: center; color: white; padding: 10px; }
.info-title { font-size: 22px; font-weight: bold; color: #FFD700; margin-bottom: 10px; }
.info-row { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 8px 0; font-size: 14px; }
.info-row span:last-child { font-weight: bold; color: #8BC34A; }

/* Стили для модального окна с информацией о курице */
.chicken-modal-content {
    padding: 25px 20px;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chicken-modal-header {
    text-align: center;
    margin-bottom: 25px;
}

.chicken-avatar-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

.chicken-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
    padding: 5px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.chicken-avatar-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    animation: pulse 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.chicken-modal-title {
    font-size: 28px;
    font-weight: 900;
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.5);
    margin: 0;
    letter-spacing: 1px;
}

.chicken-info-cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.info-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.info-card-icon {
    font-size: 36px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    flex-shrink: 0;
}

.info-card-content {
    flex: 1;
    min-width: 0;
}

.info-card-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.info-card-value {
    font-size: 24px;
    font-weight: 900;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.egg-time {
    color: #64B5F6;
    text-shadow: 0 0 10px rgba(100, 181, 246, 0.5);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

.hunger-progress-wrapper {
    width: 100%;
}

.hunger-progress-bar {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    height: 28px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hunger-progress-fill {
    height: 100%;
    border-radius: 12px;
    transition: width 0.5s ease-out;
    position: relative;
    z-index: 2;
}

.hunger-progress-glow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 12px;
    filter: blur(8px);
    z-index: 1;
    transition: width 0.5s ease-out;
}

.hunger-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
}

.hunger-percentage {
    font-size: 18px;
    font-weight: 900;
    text-shadow: 0 0 8px currentColor;
}

.hunger-text {
    font-size: 13px;
    opacity: 0.9;
}

.hunger-warning {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.3) 0%, rgba(211, 47, 47, 0.2) 100%);
    border: 2px solid #F44336;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: warningPulse 2s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.5), inset 0 0 10px rgba(244, 67, 54, 0.2);
}

@keyframes warningPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(244, 67, 54, 0.5), inset 0 0 10px rgba(244, 67, 54, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(244, 67, 54, 0.8), inset 0 0 15px rgba(244, 67, 54, 0.4);
    }
}

.warning-icon {
    font-size: 28px;
    animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

.warning-text {
    font-size: 16px;
    font-weight: 900;
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}
/* Кнопки в инвентаре */
.card-actions { display: flex; gap: 5px; width: 100%; margin-top: 10px; }
.action-btn { flex: 1; padding: 8px 0; border: none; border-radius: 8px; color: white; font-weight: bold; cursor: pointer; font-size: 12px; position: relative; }
.btn-green { background: #4CAF50; box-shadow: 0 3px 0 #2E7D32; }
.btn-green:active { transform: translateY(2px); box-shadow: 0 0 0 #2E7D32; }
.btn-orange { background: #FF9800; box-shadow: 0 3px 0 #E65100; } 
.btn-orange:active { transform: translateY(2px); box-shadow: 0 0 0 #E65100; }
.btn-gray { 
    background: linear-gradient(180deg, #9E9E9E 0%, #616161 100%); 
    border: 3px solid #424242; 
    color: white; 
    box-shadow: 0 4px 0 #212121, 0 6px 12px rgba(0,0,0,0.3); 
    font-family: 'Courier New', monospace; 
    font-weight: bold; 
    letter-spacing: 1px;
}
.btn-gray:active { transform: none; }
.btn-disabled { background: #757575; opacity: 0.7; cursor: not-allowed; box-shadow: none; }

/* --- SCENE & TILES --- */
.scene { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: translate(-35px, -40px); transition: filter 0.3s; }
.tile { position: absolute; left: calc(50% + (var(--i) - var(--j)) * var(--tile-width-half)); top: calc(50% + (var(--i) + var(--j)) * var(--tile-height-half)); width: 130px; height: 90px; margin-left: -65px; margin-top: -45px; z-index: calc(var(--i) + var(--j)); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: filter 2s ease-in-out; }
.tile:hover .asset-wrapper { transform: translateY(-10px); filter: brightness(1.1); }
.tile:active .asset-wrapper { transform: translateY(4px) scale(0.98); transition: transform 0.05s ease; }
.asset-wrapper { position: relative; width: 100%; height: 100%; pointer-events: none; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 2s ease-in-out; }
.soil-base { 
    position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 140px; height: auto; padding-bottom: 100%; 
    background-image: url('farm_assets/plot.png'); background-size: contain; background-repeat: no-repeat; background-position: bottom center; 
    transition: filter 2s ease-in-out;
}
/* Ночной режим для грядок - деликатное изменение цвета и яркости */
body.night-mode .tile {
    filter: brightness(0.85) saturate(0.9);
}
body.night-mode .soil-base {
    filter: brightness(0.8) saturate(0.85) hue-rotate(-5deg);
    transition: filter 2s ease-in-out;
}
body.night-mode .asset-wrapper {
    filter: brightness(0.9);
    transition: filter 2s ease-in-out, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.night-mode .tile:hover .asset-wrapper {
    filter: brightness(1.0);
}
body.night-mode .tile.ready .plant-layer {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
}
body.night-mode .tile.growing .plant-layer {
    filter: grayscale(0.1) brightness(0.95);
}
.plant-layer { position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%) scale(0); width: 100px; height: 100px; background-image: url('farm_assets/seed.png'); background-size: contain; background-repeat: no-repeat; background-position: bottom center; opacity: 0; transform-origin: bottom center; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 5; }
.tile.growing .plant-layer { opacity: 1; transform: translateX(-50%) scale(0.7); filter: grayscale(0.2); background-image: url('farm_assets/seed.png') !important; }
.tile.ready .plant-layer { opacity: 1; transform: translateX(-50%) scale(0.9); filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)); }
.timer-text { position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%); font-family: 'Courier New', monospace; font-weight: 900; font-size: 16px; color: #FFD700; background: rgba(0,0,0,0.85); padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 2px 4px rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s; z-index: 20; pointer-events: none; }
.tile.growing .timer-text { opacity: 1; }
.tile.locked { filter: grayscale(0.8); }
.lock-overlay { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 30; pointer-events: none; }
.lock-icon { font-size: 32px; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.lock-price { background: #D32F2F; color: white; font-weight: bold; font-size: 14px; padding: 2px 8px; border-radius: 10px; border: 2px solid #fff; margin-top: -5px; box-shadow: 0 2px 4px rgba(0,0,0,0.4); }
@keyframes shake { 0%, 100% { transform: translateX(-50%); } 25% { transform: translateX(-55%); } 75% { transform: translateX(-45%); } }
.tile.shake .lock-overlay { animation: shake 0.3s ease-in-out; }

/* FLYING COIN */
.flying-reward-container { position: absolute; left: 50%; top: -80px; width: 100px; height: 100px; margin-left: -50px; pointer-events: none; z-index: 7000; display: flex; flex-direction: column; align-items: center; animation: floatUp 1s forwards ease-out; }
.flying-coin { width: 60px; height: 60px; background-image: url('farm_assets/coin.png'); background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3)); animation: spinCoin 1s infinite linear; }
.flying-text { color: #fff; font-weight: 900; font-size: 24px; text-shadow: 0 2px 5px rgba(0,0,0,0.8), 0 0 10px gold; margin-top: -10px; display: flex; align-items: center; gap: 5px; }
@keyframes floatUp { 0% { opacity: 1; margin-top: 20px; transform: scale(0.5); } 100% { opacity: 0; margin-top: -100px; transform: scale(1.2); } }
@keyframes spinCoin { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.1); } 100% { transform: scaleX(1); } }

/* --- КУРИЦЫ (ФИНАЛЬНАЯ ВЕРСИЯ) --- */
#chickens-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 5; 
}

.chicken {
    position: absolute;
    width: 64px;
    height: 64px;
    background-repeat: no-repeat;
    /* Статичная картинка */
    background-image: url('farm_assets/chickenHen.webp');
    background-size: contain;
    background-position: center;
    
    transform-origin: center center; /* Важно для разворота вокруг центра */
    /* transition ТОЛЬКО для координат. Transform не анимируем, чтобы разворот был мгновенным */
    transition: top linear, left linear; 
    
    pointer-events: auto; 
    cursor: pointer;
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3));
    z-index: 10;
}

/* --- ХОДЬБА --- */
.chicken.walking {
    /* Спрайт ходьбы */
    background-image: url('farm_assets/sprite-256px-36 (1).png');
    /* Размер фона: 
       Если ширина кадра 64px и их 6 штук = 384px ширина.
       Высоту ставим равную высоте одной строки (64px), если нам нужна только она,
       ИЛИ ставим 384px, если это квадратный спрайт, но фиксируем позицию Y.
    */
    background-size: 384px 384px;
    
    /* ВАЖНО: background-position-y: 0px; 
       Мы берем ТОЛЬКО ВЕРХНЮЮ СТРОКУ (или ту, где у тебя ходьба боком).
       Если ходьба на второй строке, поставь -64px и т.д.
    */
    background-position-y: 0px; 
    
    /* Анимируем только по X (кадры) */
    animation: walk-cycle 0.6s steps(6) infinite;
}

/* --- РАЗВОРОТ (ЗЕРКАЛО) --- */
.chicken.flip {
    transform: scaleX(-1); 
}

/* --- АНИМАЦИЯ КАДРОВ --- */
@keyframes walk-cycle {
    from { background-position-x: 0px; }
    to { background-position-x: -384px; } /* Сдвигаем на всю ширину полоски кадров */
}

/* --- ДРУГИЕ СОСТОЯНИЯ (Оставляем простыми) --- */
.chicken.eating {
    background-image: url('farm_assets/sprite-256px-36 (2).png');
    background-size: 384px 384px;
    background-position-y: 0px; /* Тоже фиксируем строку */
    animation: walk-cycle 0.8s steps(6) infinite;
}

.chicken.idle {
    background-image: url('farm_assets/sprite-256px-36.png');
    background-size: 384px 384px;
    background-position-y: 0px;
    animation: walk-cycle 1s steps(6) infinite;
}

/* --- LOADING SCREEN (UI КОДОМ) --- */
#loading-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('farm_assets/loading_screen.png'); /* Твоя чистая картинка */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10000;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Прижимаем к низу */
    align-items: center;
    padding-bottom: 15%; /* Отступ от низа экрана (регулируй это) */
    
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

#loading-screen.finished {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-content {
    width: 80%;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.loading-text {
    color: #FFD700; /* Золотой текст */
    font-weight: 900;
    font-size: 20px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 10px rgba(255, 215, 0, 0.5);
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: 1px;
}

/* Сам контейнер бара (Оболочка) */
.loading-bar-box {
    width: 100%;
    height: 32px;
    background: #3E2723; /* Темно-коричневая подложка */
    border: 3px solid #8D6E63; /* Светло-коричневая рамка */
    border-radius: 16px; /* Закругленные края */
    padding: 3px; /* Отступ внутри, чтобы заливка не касалась краев */
    
    /* Тени для объема */
    box-shadow: 
        0 10px 20px rgba(0,0,0,0.5), /* Тень на фоне */
        inset 0 2px 5px rgba(0,0,0,0.8); /* Внутренняя тень (вдавленность) */
    
    position: relative;
    overflow: hidden;
}

/* Жидкость (Заливка) */
.loading-fill {
    width: 0%;
    height: 100%;
    border-radius: 10px;
    
    /* Сочный градиент (Оранжевый -> Желтый) */
    background: linear-gradient(90deg, #FF6F00, #FFD700);
    
    /* Блик сверху для объема */
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.4);
    
    transition: width 0.2s linear;
    position: relative;
}

/* Эффект "полосок" на полоске загрузки (опционально, для красоты) */
.loading-fill::after {
    content: '';
    position: absolute; top: 0; left: 0; bottom: 0; right: 0;
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
    background-size: 20px 20px;
    opacity: 0.5;
}

/* --- MAJHONG (FINAL FIX) --- */
.mj-game-area {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; 
}

/* Доска строго по центру */
.mj-board {
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0; height: 0; 
    overflow: visible;
    z-index: 10;
    pointer-events: all;
}

.mj-tile {
    position: absolute;
    width: 54px; height: 72px;
    
    /* Четкий градиент и границы */
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    border-radius: 8px;
    border: 1px solid #999;
    
    /* Тень стала жестче и понятнее */
    box-shadow: 
        1px 1px 0 #8D6E63, 
        2px 2px 0 #8D6E63, 
        3px 3px 0 #8D6E63, 
        4px 4px 0 #5D4037, 
        5px 5px 10px rgba(0,0,0,0.5);
    
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    /* Оптимизация для плавной анимации */
    transition: transform 0.15s ease-out;
    will-change: transform; /* Подсказка браузеру для оптимизации */
    backface-visibility: hidden; /* Устраняет мерцание */
    transform: translateZ(0); /* Включает GPU ускорение */
    /* Для цветного слоя поверх фона */
    overflow: hidden; /* Чтобы цветной слой не выходил за границы */
}

.mj-tile.selected {
    background: #FFF9C4;
    border: 2px solid #FFD700;
    transform: translate(-5px, -5px) translateZ(0);
    /* Очень большая тень и высокий индекс при выборе */
    box-shadow: 
        1px 1px 0 #FFD700, 2px 2px 0 #FFD700, 3px 3px 0 #FFD700,
        8px 8px 15px rgba(0,0,0,0.5);
    z-index: 99999 !important;
}

.mj-tile.blocked {
    filter: brightness(0.7); /* Просто затемняем */
    color: #888;
    cursor: default;
    will-change: auto; /* Отключаем оптимизацию для заблокированных */
}
/* Делаем картинку на заблокированной плитке полупрозрачной */
.mj-tile.blocked .mj-img { opacity: 0.4; }

.mj-img { 
    width: 38px; 
    height: 38px; 
    object-fit: contain; 
    pointer-events: none;
    image-rendering: -webkit-optimize-contrast; /* Резкость изображений */
    image-rendering: crisp-edges;
    position: relative;
    z-index: 2; /* Иконка поверх цветного слоя фона */
    filter: none !important; /* Убираем все фильтры с иконки - она должна быть в оригинальном цвете */
}

/* --- MAJHONG FIXES (удалены дублирующие стили) --- */

/* 2. Верхняя плашка уровня - ПОД HUD, НАД игровым полем */
.mj-top-bar {
    position: absolute;
    top: 100px; /* Отступ от верхнего HUD (75px высота HUD + отступ) */
    left: 0; 
    width: 100%;
    display: flex; 
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    pointer-events: none; /* Чтобы не мешала кликать */
    z-index: 15; /* Под HUD (5000), но над игровым полем (10) */
}

.mj-level-badge {
    background: linear-gradient(180deg, #FF9800, #F57C00);
    color: white; font-weight: 900; font-size: 18px;
    padding: 8px 25px; 
    border-radius: 20px; 
    border: 3px solid #FFF;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    text-shadow: 0 2px 0 rgba(0,0,0,0.3);
    pointer-events: auto;
}

.mj-attempts-badge {
    background: linear-gradient(180deg, #2196F3, #1976D2);
    color: white; font-weight: 900; font-size: 14px;
    padding: 6px 20px; 
    border-radius: 20px; 
    border: 3px solid #FFF;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    text-shadow: 0 2px 0 rgba(0,0,0,0.3);
    pointer-events: auto;
}

/* 3. Нижние кнопки - строго по центру */
.mj-bottom-controls {
    position: absolute;
    bottom: 100px; /* Отступ от нижнего меню (70px высота + отступ) */
    left: 50%; 
    transform: translateX(-50%);
    width: 90%; 
    max-width: 350px;
    display: flex; 
    justify-content: space-between; 
    gap: 15px;
    z-index: 50;
}

.mj-btn {
    flex: 1;
    padding: 12px; 
    border-radius: 12px; 
    font-weight: bold; font-size: 14px;
    color: white; border: none; cursor: pointer; 
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.3), 0 5px 10px rgba(0,0,0,0.2);
    transition: transform 0.1s;
}
.mj-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.3); }

.shuffle-btn { background: linear-gradient(180deg, #2196F3, #1976D2); border-bottom: 3px solid #0D47A1; }
.surrender-btn { background: linear-gradient(180deg, #EF5350, #D32F2F); border-bottom: 3px solid #B71C1C; }
.ws-undo-btn { background: linear-gradient(180deg, #8D6E63, #5D4037); border-bottom: 3px solid #3E2723; }

/* Увеличим тайлы еще немного */
.mj-tile {
    width: 58px; height: 78px; /* Было 56/74 */
    /* Остальные стили тайла оставь как есть */
}

/* Модалки победы/поражения */
.victory-modal {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(5px);
    z-index: 8000; display: none;
    flex-direction: column; align-items: center; justify-content: center;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.victory-content {
    background: #8D6E63; padding: 30px; border-radius: 20px;
    border: 4px solid #FFD700; text-align: center; color: white; width: 80%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.victory-title { font-size: 32px; font-weight: 900; margin-bottom: 15px; text-shadow: 0 3px 0 #000; }

.victory-rewards { display: flex; gap: 20px; justify-content: center; margin: 20px 0; }

.v-reward { display: flex; flex-direction: column; align-items: center; font-weight: bold; font-size: 18px; color: #FFD700; }

.v-img { width: 60px; height: 60px; margin-bottom: 5px; filter: drop-shadow(0 0 10px gold); }

@keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --- ЦВЕТОВЫЕ ФИЛЬТРЫ ДЛЯ СЛОЖНОСТИ --- */
/* Фильтры применяются к background тайла через псевдоэлемент, иконки не перекрашиваются */
.mj-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    z-index: 1; /* Поверх фона, но под иконкой */
    pointer-events: none; /* Чтобы не мешало кликам */
    opacity: 0; /* По умолчанию скрыт */
    transition: opacity 0.2s;
}

/* Цветные фильтры - применяются к фону тайла */
.mj-tile.filter-red::before {
    background: rgba(255, 100, 100, 0.4); /* Красный оттенок */
    opacity: 1;
}

.mj-tile.filter-blue::before {
    background: rgba(100, 150, 255, 0.4); /* Синий оттенок */
    opacity: 1;
}

.mj-tile.filter-green::before {
    background: rgba(100, 255, 100, 0.4); /* Зеленый оттенок */
    opacity: 1;
}

.mj-tile.filter-yellow::before {
    background: rgba(255, 255, 100, 0.4); /* Желтый оттенок */
    opacity: 1;
}

.mj-tile.filter-purple::before {
    background: rgba(200, 100, 255, 0.4); /* Фиолетовый оттенок */
    opacity: 1;
}

.mj-tile.filter-orange::before {
    background: rgba(255, 150, 100, 0.4); /* Оранжевый оттенок */
    opacity: 1;
}

.mj-tile.filter-cyan::before {
    background: rgba(100, 255, 255, 0.4); /* Голубой оттенок */
    opacity: 1;
}

.mj-tile.filter-pink::before {
    background: rgba(255, 150, 200, 0.4); /* Розовый оттенок */
    opacity: 1;
}

.mj-tile.filter-dark::before {
    background: rgba(0, 0, 0, 0.3); /* Темный оттенок */
    opacity: 1;
}

/* Иконка должна быть поверх цветного слоя */
.mj-tile .mj-img {
    position: relative;
    z-index: 2; /* Иконка поверх цветного слоя */
}

/* Убеждаемся, что сцена маджонга не имеет лишних трансформаций */
#scene-mahjong {
    transform: none !important;
}

/* Оверлей когда закончились общие попытки (только на сцене маджонга) */
.no-attempts-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

.no-attempts-content {
    background: #8D6E63;
    padding: 40px;
    border-radius: 20px;
    border: 4px solid #FFD700;
    text-align: center;
    color: white;
    max-width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.no-attempts-title {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow: 0 3px 0 #000;
    color: #FFD700;
}

.no-attempts-message {
    font-size: 18px;
    margin-bottom: 20px;
    color: #ddd;
}

.no-attempts-timer {
    font-size: 36px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

/* --- ПУСТОЙ СКЛАД --- */
.empty-inventory-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 400px;
    padding: 60px 20px 40px;
    animation: fadeInUp 0.4s ease-out;
    position: relative;
    margin: 0 auto;
}

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

.empty-inventory-title {
    color: #FFF;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 25px;
    text-shadow: 
        0 1px 0 rgba(255,255,255,0.15),
        0 -1px 2px rgba(0,0,0,0.9),
        0 -2px 2px rgba(0,0,0,0.8),
        0 -3px 3px rgba(0,0,0,0.7),
        0 -4px 4px rgba(0,0,0,0.6),
        0 -5px 5px rgba(0,0,0,0.5),
        0 -6px 6px rgba(0,0,0,0.4),
        0 -7px 8px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(0,0,0,0.4);
    letter-spacing: 2px;
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
}

.empty-inventory-subtitle {
    color: #9E9E9E;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 60px;
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
}

.empty-inventory-btn {
    background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
    border: 3px solid #FFD700;
    border-radius: 15px;
    padding: 16px 45px;
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 6px 0 #1B5E20, 0 8px 15px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.1s;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin-top: auto;
    min-width: 200px;
}

.empty-inventory-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #1B5E20, 0 4px 8px rgba(0,0,0,0.3);
}

.empty-inventory-btn:hover {
    background: linear-gradient(180deg, #66BB6A 0%, #388E3C 100%);
    box-shadow: 0 6px 0 #1B5E20, 0 10px 20px rgba(0,0,0,0.5);
}

.btn-icon {
    font-size: 24px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}

.btn-text {
    letter-spacing: 1px;
}

/* --- СТИЛИ ДЛЯ МЕНЮ ИГР --- */
.menu-container {
    position: relative;
    z-index: 2;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.menu-title {
    text-align: center;
    color: #fff;
    font-size: 32px;
    text-shadow: 0 3px 0 #3E2723;
    margin-bottom: 20px;
}

.menu-title-image {
    display: block;
    margin: 0 auto 20px auto;
    max-width: 90%;
    height: auto;
    object-fit: contain;
}

.game-select-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 6px 0 rgba(0,0,0,0.2);
    transition: transform 0.1s;
    cursor: pointer;
}

.game-select-card:active {
    transform: scale(0.98) translateY(2px);
    box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

.game-select-card[style*="cursor: default"]:active {
    transform: none;
    box-shadow: 0 6px 0 rgba(0,0,0,0.2);
}

.game-icon {
    font-size: 40px;
    width: 60px;
    height: 60px;
    background: #e0f2f1;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-info {
    flex: 1;
}

.game-name {
    font-size: 18px;
    font-weight: 800;
    color: #3E2723;
}

.game-desc {
    font-size: 14px;
    color: #795548;
}

/* --- СТИЛИ ДЛЯ ПЕРЕЛИВАЕК (WATER SORT) --- */
.ws-game-area {
    position: absolute;
    top: 60px;
    bottom: 80px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.tubes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Расстояние между колбами */
    width: 100%;
    max-width: 350px;
    padding: 20px;
}

.tube {
    width: 50px;
    height: 160px;
    border: 3px solid rgba(255, 255, 255, 0.6);
    border-top: none;
    border-radius: 0 0 25px 25px;
    position: relative;
    overflow: hidden; /* Чтобы жидкость не вылезала */
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.27);
    display: flex;
    flex-direction: column-reverse; /* Заполняем снизу вверх */
}

/* Эффект блика на стекле */
.tube::after {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 8px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
    border-radius: 5px;
    pointer-events: none;
    z-index: 5;
}

/* Выбранная колба поднимается */
.tube.selected {
    transform: translateY(-20px);
    border-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.liquid {
    width: 100%;
    height: 25%; /* 4 слоя = 25% каждый */
    transition: height 0.3s, background-color 0.3s;
    position: relative;
}

/* Верхняя поверхность жидкости (для объема) */
.liquid::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.3);
}

/* Цвета жидкостей */
.color-0 { background: transparent; height: 0; } /* Пусто */
.color-1 { background: #FF5252; } /* Красный */
.color-2 { background: #448AFF; } /* Синий */
.color-3 { background: #FFD700; } /* Желтый */
.color-4 { background: #69F0AE; } /* Зеленый */
.color-5 { background: #E040FB; } /* Фиолетовый */
.color-6 { background: #FF9800; } /* Оранжевый */
.color-7 { background: #00BCD4; } /* Голубой */
.color-8 { background: #795548; } /* Коричневый */

/* Крышка для заполненной колбы */
.tube.completed {
    position: relative;
}

.tube-cap {
    position: absolute;
    top: -8px;
    left: -3px;
    right: -3px;
    height: 12px;
    background: linear-gradient(180deg, #8D6E63 0%, #5D4037 100%);
    border: 2px solid #3E2723;
    border-radius: 8px 8px 4px 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
    animation: capClose 0.4s ease-out;
    transform-origin: top center;
}

@keyframes capClose {
    0% {
        transform: translateY(-15px) scaleY(0.3);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scaleY(1);
        opacity: 1;
    }
}

/* Анимация всплеска воды */
.water-splash {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 20;
    transform: translate(-50%, -50%);
}

.water-splash::before,
.water-splash::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(173,216,230,0.6) 50%, transparent 100%);
    border-radius: 50%;
    animation: splashParticle 0.6s ease-out forwards;
}

.water-splash::before {
    top: 10px;
    left: 15px;
    animation-delay: 0s;
}

.water-splash::after {
    top: 15px;
    right: 10px;
    animation-delay: 0.1s;
}

.water-splash {
    background: radial-gradient(circle at center, rgba(255,255,255,0.7) 0%, rgba(173,216,230,0.4) 30%, transparent 70%);
    border-radius: 50%;
    animation: splashExpand 0.6s ease-out forwards;
}

@keyframes splashExpand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

@keyframes splashParticle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx, 15px), var(--dy, -20px)) scale(0.3);
        opacity: 0;
    }
}

/* --- АНИМАЦИЯ ТАЙМЕРА В МЕНЮ ИГР --- */
.timer-display {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    letter-spacing: 1px;
}

.timer-hours,
.timer-minutes,
.timer-seconds {
    display: inline-block;
    position: relative;
    min-width: 1.2em;
    text-align: center;
    overflow: visible;
    vertical-align: middle;
}

.timer-digit-old {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: timerDigitFlyOut 0.4s ease-out forwards;
    z-index: 1;
    pointer-events: none;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
}

@keyframes timerDigitFlyOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px);
    }
}

/* --- СИСТЕМА СЛОТОВ (НОВАЯ) --- */
#coops-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10;
    pointer-events: none; /* Чтобы клики сквозь пустоту проходили */
}

.coop-slot {
    position: absolute;
    width: 80px; height: 80px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    z-index: 20;
    /* border: 1px solid red; /* Раскомментируй, чтобы настроить позиции */
}

/* Позиции слотов теперь вычисляются динамически в JavaScript */
/* Базовые координаты для эталонного разрешения (375x667 - iPhone SE) */
/* .slot-0, .slot-1, .slot-2 - позиции задаются через inline styles */

/* Кнопка ПЛЮС (Пустой слот) - Дизайн "Деревянная монета" */
.add-chicken-btn {
    /* --- ЖЕЛЕЗНАЯ СЕТКА (Не трогаем, чтобы не уехала) --- */
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    
    /* --- РАЗМЕРЫ --- */
    width: 54px; 
    height: 54px;
    
    /* --- КРАСИВЫЙ ДИЗАЙН --- */
    /* Деревянный фон */
    background: linear-gradient(180deg, #8D6E63 0%, #5D4037 100%);
    /* Золотая рамка */
    border: 3px solid #FFD700;
    /* Круглая */
    border-radius: 50%;
    
    /* Текст (Плюсик) */
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: #FFD700;
    font-size: 32px; 
    font-weight: 900;
    line-height: 1; /* Чтобы плюс был ровно по вертикали */
    padding-bottom: 4px; /* Микро-коррекция плюсика визуально */
    
    /* Тени для объема */
    box-shadow: 
        inset 0 2px 5px rgba(255,255,255,0.2), /* Блик сверху */
        0 6px 0 #3E2723,                       /* "Толщина" кнопки снизу */
        0 10px 10px rgba(0,0,0,0.4);           /* Тень на землю */
    
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    
    /* Легкая анимация пульсации, чтобы привлекать внимание */
    animation: floatBtn 2s ease-in-out infinite;
}

/* Эффект нажатия */
.add-chicken-btn:active { 
    transform: translate(-50%, -45%); /* Кнопка вдавливается вниз */
    box-shadow: 
        inset 0 2px 5px rgba(0,0,0,0.4),
        0 2px 0 #3E2723, 
        0 4px 4px rgba(0,0,0,0.4);
}

/* Анимация плавного покачивания */
@keyframes floatBtn {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -55%); } /* Чуть всплывает вверх */
}

/* Сидящая курица */
.chicken-static {
    width: 70px; height: 70px;
    background-image: url('farm_assets/chick_sitting_new.png'); /* Твоя картинка */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    bottom: 10px; left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.5));
    cursor: pointer;
    transition: transform 0.1s;
}

.chicken-static:active { transform: translateX(-50%) scale(0.95); }

/* --- НОВЫЙ ДИЗАЙН СЛОТА КУРИЦЫ --- */

/* 1. Имя курицы (Деревянная табличка) */
/* Имя курицы (Деревянная табличка) - ОБНОВЛЕНО */
.chicken-name-plate {
    position: absolute;
    top: -25px; /* Чуть ниже опустим, ближе к голове */
    left: 50%;
    transform: translateX(-50%);
    
    background: #5D4037;
    color: #FFD700;
    border: 2px solid #3E2723;
    border-radius: 6px;
    padding: 2px 6px; /* Чуть меньше отступы */
    
    font-size: 10px; /* Уменьшаем шрифт, чтобы влезало */
    font-weight: bold;
    white-space: nowrap; /* Запрещаем перенос строк */
    max-width: 90px; /* Ограничиваем ширину */
    overflow: hidden; /* Обрезаем лишнее */
    text-overflow: ellipsis; /* Добавляем троеточие (...) если не влезло */
    
    z-index: 25;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    text-shadow: 0 1px 0 rgba(0,0,0,0.8);
    pointer-events: none;
}

/* Треугольничек внизу таблички (стрелка) */
.chicken-name-plate::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #3E2723;
}

/* 2. Контейнер голода (Внизу) */
.hunger-indicator-container {
    position: absolute;
    bottom: -5px; /* В ногах курицы */
    left: 50%;
    transform: translateX(-50%);
    
    display: flex;
    align-items: center;
    gap: 4px;
    
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 4px;
    border-radius: 10px;
    z-index: 25;
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Иконка колоска */
.hunger-icon-small {
    font-size: 10px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* Фон полоски */
.hunger-bar-bg {
    width: 40px; /* Компактная ширина */
    height: 6px;
    background: #3E2723;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Заливка полоски */
.hunger-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
}

/* --- НОВЫЙ ДИЗАЙН МОДАЛКИ КУРИЦЫ --- */

/* Контейнер модалки */
.modern-modal {
    background: linear-gradient(180deg, #FFF8E1 0%, #FFE0B2 100%); /* Светлый кремовый градиент */
    border-radius: 24px;
    border: 4px solid #8D6E63; /* Деревянная рамка */
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.5),
        inset 0 0 20px rgba(255,255,255,0.5);
    padding: 0; /* Убираем стандартные отступы, расставим сами */
    width: 90%;
    max-width: 340px;
    position: relative;
    overflow: visible; /* Важно, чтобы аватарка могла торчать */
    margin-top: 40px; /* Отступ сверху для аватарки */
}

/* Верхняя часть с аватаром */
.modal-header-modern {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -50px; /* Вытаскиваем аватарку наверх */
    margin-bottom: 15px;
}

/* Аватарка (Круг с свечением) */
.avatar-circle {
    width: 100px; height: 100px;
    background: #fff;
    border-radius: 50%;
    border: 4px solid #FFD700;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    background-image: radial-gradient(circle, #FFF 60%, #FFF9C4 100%);
    z-index: 10;
}

.avatar-img-big {
    width: 80%; height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Блок с именем и карандашом */
.name-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.6);
    padding: 5px 15px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.chicken-name-title {
    font-size: 24px;
    font-weight: 900;
    color: #5D4037;
    margin: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.edit-btn {
    font-size: 18px;
    cursor: pointer;
    opacity: 0.6;
    transition: transform 0.2s, opacity 0.2s;
}

.edit-btn:hover { opacity: 1; transform: scale(1.1); }
.edit-btn:active { transform: scale(0.9); }

/* Контейнер карточек статистики */
.stats-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px 25px 20px;
}

/* Карточка статистики (Стеклянный эффект) */
.stat-card-modern {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 
        0 4px 6px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.4);
}

/* Иконка слева */
.stat-icon {
    width: 40px; height: 40px;
    background: #FFF3E0;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    color: #E65100;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

/* Текстовая часть */
.stat-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #8D6E63;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 18px;
    font-weight: 800;
    color: #3E2723;
    font-family: 'Courier New', monospace; /* Моноширинный шрифт для цифр */
}

/* Прогресс бар */
.modern-progress-bg {
    width: 100%;
    height: 12px;
    background: #E0E0E0;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.modern-progress-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
    transition: width 0.5s ease-out;
    position: relative;
}

/* Блик на прогресс-баре */
.modern-progress-fill::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%;
    background: rgba(255,255,255,0.3);
}

/* Кнопка закрытия (новая) */
.close-btn-modern {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    background: #D32F2F;
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 2px solid #fff;
    z-index: 20;
    transition: transform 0.2s;
}

.close-btn-modern:active { transform: scale(0.9); }


/* Всплывающее меню покупки (Гармошка вправо) */
.buy-popup {
    position: absolute;
    left: 70px; /* Справа от слота */
    top: 50%; transform: translateY(-50%) scale(0); /* Скрыто */
    background: #5D4037;
    border: 2px solid #FFD700;
    border-radius: 12px;
    padding: 10px;
    width: 140px;
    z-index: 100;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transform-origin: left center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; flex-direction: column; align-items: center; gap: 5px;
}

.buy-popup.open { transform: translateY(-50%) scale(1); }

/* Стрелочка влево у попапа */
.buy-popup::before {
    content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
    border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #FFD700;
}

.buy-price { color: #fff; font-weight: bold; font-size: 14px; display: flex; align-items: center; gap: 5px; }

.buy-btn-action {
    background: #4CAF50; color: white; border: none; padding: 5px 10px;
    border-radius: 6px; font-weight: bold; cursor: pointer; width: 100%; font-size: 12px;
    box-shadow: 0 2px 0 #2E7D32;
}

.buy-btn-action:active { transform: translateY(2px); box-shadow: none; }

/* Меню действий курицы (при клике) - ОБНОВЛЕНО */
.chicken-action-menu {
    position: absolute;
    top: -70px; 
    left: 50%;
    transform: translateX(-50%) scale(0);
    display: flex;
    gap: 15px !important; 
    
    /* ВАЖНО: Поднимаем поверх всего */
    z-index: 9999 !important; 
    
    transform-origin: center bottom;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chicken-action-menu.open {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.chicken-action-btn {
    width: 45px !important; /* Компактный размер для иконки */
    height: 45px !important;
    min-width: 45px !important; /* Запрещаем сжатие */
    min-height: 45px !important;
    border-radius: 50%;
    border: 2px solid #FFD700;
    background: #5D4037;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #fff;
    position: relative;
    animation: buttonFloat 2.5s ease-in-out infinite;
    flex-shrink: 0; /* Запрещаем сжатие */
    padding: 0;
}

.chicken-action-btn:nth-child(1) {
    animation-delay: 0s;
}

.chicken-action-btn:nth-child(2) {
    animation-delay: 0.3s;
}

@keyframes buttonFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }
    50% {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 6px 15px rgba(255, 215, 0, 0.4);
    }
}

.chicken-action-btn span {
    font-size: 22px;
    line-height: 1;
    display: block;
}

.chicken-action-btn:hover {
    transform: translateY(-5px) scale(1.15) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    z-index: 201;
}

.chicken-action-btn:active {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

.chicken-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #757575 !important;
    animation: none;
    transform: scale(0.9);
}

.chicken-action-btn:disabled:hover {
    transform: scale(0.9) !important;
}

.chicken-action-btn.info-btn {
    background: #1976D2 !important;
    border-color: #64B5F6;
}

.chicken-action-btn.info-btn:hover {
    background: #1565C0 !important;
    border-color: #90CAF9;
}

.chicken-action-btn.feed-btn {
    background: #4CAF50 !important;
    border-color: #81C784;
}

.chicken-action-btn.feed-btn:hover {
    background: #388E3C !important;
    border-color: #A5D6A7;
}

/* Эффект сна для кур ночью */
body.night-mode .chicken-static {
    position: relative;
}

body.night-mode .chicken-static::after {
    content: 'Zzz';
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    text-shadow: 0 2px 2px rgba(0,0,0,0.5);
    animation: sleepZzz 2s infinite;
    opacity: 0;
    pointer-events: none;
    z-index: 30;
}

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

/* --- MATCH-3 STYLES (FINAL FIX) --- */

/* Верхний контейнер */
.m3-header-controls {
    position: absolute; top: 100px; left: 0; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; z-index: 20; pointer-events: none; 
}

/* Кнопка круглая */
.m3-btn-round {
    width: 45px; height: 45px; /* Чуть меньше */
    border-radius: 50%;
    border: 2px solid #8D6E63;
    background: #5D4037; /* Без градиента - быстрее */
    color: #FFD700;
    font-size: 18px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 3px 0 rgba(0,0,0,0.3); /* Простая тень */
    display: flex; align-items: center; justify-content: center;
}
.m3-btn-round:active { transform: translateY(2px); box-shadow: none; }

/* Статы */
.m3-stats-wrapper { display: flex; gap: 8px; pointer-events: auto; }

.m3-stat-box {
    background: rgba(62, 39, 35, 0.9); border: 1px solid #8D6E63;
    border-radius: 10px; padding: 4px 8px;
    display: flex; flex-direction: column; align-items: center; min-width: 60px;
}
.m3-stat-box.main { border-color: #FFD700; transform: scale(1.1); z-index: 21; background: #5D4037; }
.m3-label { font-size: 8px; color: #AAA; font-weight: bold; margin-bottom: 1px; }
.m3-value { font-size: 16px; color: #FFF; font-weight: 900; font-family: monospace; }
.m3-value.highlight { color: #FFD700; font-size: 20px; }

/* Игровое поле */
.m3-game-area {
    position: absolute; top: 60%; left: 50%; /* Чуть ниже */
    transform: translate(-50%, -50%);
    width: 96%; max-width: 360px; aspect-ratio: 1/1;
    background: rgba(30, 20, 10, 0.5); 
    border-radius: 12px; padding: 4px; 
    border: 3px solid #5D4037;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

.m3-grid { width: 100%; height: 100%; position: relative; }

/* Тайл */
.m3-tile {
    position: absolute; top: 0; left: 0;
    width: 14.28%; height: 14.28%; padding: 3px;
    transform: translate3d(0,0,0); /* GPU */
    transition: transform 0.2s ease-out;
    cursor: pointer; z-index: 5;
}

.m3-tile-inner {
    width: 100%; height: 100%;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    position: relative !important; /* ВАЖНО для бонусов */
    z-index: 1;
}

.m3-tile.selected .m3-tile-inner {
    transform: scale(1.1);
    filter: brightness(1.2);
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

/* --- БОНУСЫ (ЖЕСТКОЕ ПОЗИЦИОНИРОВАНИЕ) --- */
/* Стили перенесены в блок "НОВЫЕ ЭФФЕКТЫ" ниже */

/* --- ИСПРАВЛЕННАЯ АНИМАЦИЯ УДАЛЕНИЯ --- */
/* Сам тайл остается на месте, чтобы не лететь в угол */
.m3-tile.matched {
    pointer-events: none; /* Чтобы нельзя было кликнуть пока исчезает */
    z-index: 1;
}

/* А сжимается только ВНУТРЕННОСТЬ */
.m3-tile.matched .m3-tile-inner {
    transition: transform 0.25s ease-in, opacity 0.2s ease-in;
    transform: scale(0);
    opacity: 0;
}

/* Анимация появления бонуса */
.m3-tile.bonus-pop .m3-tile-inner {
    animation: bonusPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bonusPop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Остальные стили (оверлей) без изменений */
.m3-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 100; display: flex; align-items: center; justify-content: center; }

/* --- НОВЫЙ ДИЗАЙН МОДАЛОК (Match-3 Start) --- */
.m3-modal {
    background: linear-gradient(180deg, #5D4037 0%, #3E2723 100%); /* Объемный фон */
    border: 4px solid #8D6E63;
    border-radius: 24px;
    padding: 30px 20px;
    text-align: center;
    color: white;
    width: 85%;
    max-width: 320px;
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.7),
        inset 0 0 20px rgba(0,0,0,0.5);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

/* Декор "гвоздики" по углам */
.m3-modal::after, .m3-modal::before {
    content: ''; position: absolute; top: 10px; width: 8px; height: 8px; 
    background: #25150E; border-radius: 50%; box-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.m3-modal::before { left: 10px; }
.m3-modal::after { right: 10px; }

.m3-level-title { 
    font-size: 28px; 
    font-weight: 900; 
    margin-bottom: 10px; 
    text-transform: uppercase;
    color: #FFD700;
    text-shadow: 0 2px 0 #3E2723, 0 0 15px rgba(255, 215, 0, 0.4);
}

.m3-goal-desc { 
    font-size: 18px; 
    margin-bottom: 25px; 
    color: #EFEBE9;
    font-weight: 500;
}

/* Кнопка "ПОГНАЛИ" */
.m3-modal .action-btn {
    width: 100%;
    padding: 16px;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 16px;
    background: linear-gradient(180deg, #66BB6A 0%, #2E7D32 100%); /* Сочный зеленый */
    box-shadow: 
        0 6px 0 #1B5E20, 
        0 10px 20px rgba(0,0,0,0.4),
        inset 0 2px 0 rgba(255,255,255,0.3);
    border: none;
    transition: transform 0.1s, box-shadow 0.1s;
}

.m3-modal .action-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #1B5E20, 0 4px 10px rgba(0,0,0,0.3);
}
.floating-score { position: absolute; color: #FFD700; font-weight: 900; font-size: 20px; text-shadow: 0 2px 0 #000; pointer-events: none; z-index: 20; animation: floatScore 0.8s forwards; }
@keyframes floatScore { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 100% { transform: translateY(-50px) scale(1); opacity: 0; } }

/* Стили для таймера восстановления */
.restore-timer {
    font-size: 12px;
    color: #BDBDBD;
    background: rgba(0,0,0,0.2);
    padding: 5px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.restore-timer span {
    color: #FFD700;
    font-weight: bold;
    font-family: monospace;
}

/* --- НОВЫЕ ЭФФЕКТЫ (JUICY) --- */

/* 1. Эффект "Луча" для Линии */
.beam-effect {
    position: absolute;
    background: #FFF;
    box-shadow: 0 0 15px #448AFF, 0 0 30px #FFF;
    z-index: 40;
    pointer-events: none;
    opacity: 0.8;
}

.beam-h {
    height: 10px;
    left: 0; width: 100%;
    transform: scaleX(0);
    animation: beamShootH 0.3s ease-out forwards;
}

.beam-v {
    width: 10px;
    top: 0; height: 100%;
    transform: scaleY(0);
    animation: beamShootV 0.3s ease-out forwards;
}

@keyframes beamShootH {
    0% { transform: scaleX(0); opacity: 1; }
    50% { transform: scaleX(1); opacity: 0.8; }
    100% { transform: scaleX(1); opacity: 0; }
}

@keyframes beamShootV {
    0% { transform: scaleY(0); opacity: 1; }
    50% { transform: scaleY(1); opacity: 0.8; }
    100% { transform: scaleY(1); opacity: 0; }
}

/* 2. Тряска поля (для Бомбы) */
.shake-animation {
    animation: boardShake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes boardShake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* 3. Вспышка (Flash) */
.flash-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: white;
    opacity: 0;
    z-index: 100;
    pointer-events: none;
    animation: flashAnim 0.2s ease-out forwards;
}

@keyframes flashAnim {
    0% { opacity: 0.6; }
    100% { opacity: 0; }
}

/* 4. Улучшенная анимация появления тайлов (Мягкая посадка) */
@keyframes tileLand {
    0% { transform: scale(1, 1); }
    30% { transform: scale(1.15, 0.85); } /* Сплющивание при ударе */
    50% { transform: scale(0.95, 1.05); } /* Отскок */
    100% { transform: scale(1, 1); }
}

.tile-landed .m3-tile-inner {
    animation: tileLand 0.3s ease-out;
}

/* Часики на тайле */
.m3-tile.bonus-time .m3-tile-inner::before {
    content: '⏰';
    position: absolute;
    bottom: 0; right: 0;
    font-size: 16px;
    filter: drop-shadow(0 0 2px #FFF);
    z-index: 5;
    animation: pulseClock 1s infinite;
}

@keyframes pulseClock {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* --- НОВЫЕ ЭФФЕКТЫ (OPTIMIZED & FIXED) --- */

/* 1. ЛЕД (Быстрый, без blur) */
.m3-tile.frozen-2 .m3-tile-inner::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.5); /* Просто полупрозрачность */
    border: 2px solid #81D4FA;
    border-radius: 8px;
    z-index: 15;
    /* УБРАЛИ backdrop-filter */
}

.m3-tile.frozen-2 .m3-tile-inner::after {
    content: '❄️'; position: absolute; top: 2px; right: 2px; font-size: 14px; opacity: 0.9; z-index: 16;
}

.m3-tile.frozen-1 .m3-tile-inner::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.3);
    border: 1px dashed #B3E5FC;
    border-radius: 8px;
    z-index: 15;
}

/* 2. ЦЕЛИ УРОВНЯ (В шапке) */
.m3-goals-container {
    display: flex; gap: 8px;
    background: rgba(0,0,0,0.3);
    padding: 4px 8px; border-radius: 12px;
    margin-left: 10px;
}

.goal-item {
    position: relative;
    width: 40px; height: 40px;
    background: #5D4037; border: 1px solid #8D6E63; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}

.goal-img { width: 28px; height: 28px; object-fit: contain; }

.goal-count {
    position: absolute; bottom: -5px; right: -5px;
    background: #FFD700; color: #3E2723;
    font-size: 10px; font-weight: 900;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #FFF;
}

.goal-check {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(76, 175, 80, 0.8); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 20px; opacity: 0; transition: opacity 0.3s;
}

.goal-item.completed .goal-check { opacity: 1; }

/* 2. БОНУСЫ (Простые и понятные) */
.m3-tile.bonus-bomb .m3-tile-inner::after {
    content: '💣'; position: absolute; font-size: 24px;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 10; pointer-events: none;
}

.m3-tile.bonus-line .m3-tile-inner::after {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid #FFF; border-radius: 8px;
    z-index: 5;
}

.m3-tile.bonus-line.horizontal .m3-tile-inner::before { 
    content: '↔'; position: absolute; color: #FFF; font-weight: 900; font-size: 24px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: none;
}

.m3-tile.bonus-line.vertical .m3-tile-inner::before { 
    content: '↕'; position: absolute; color: #FFF; font-weight: 900; font-size: 24px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: none;
}

/* 3. ЭФФЕКТЫ ВЗРЫВОВ (С высоким Z-Index) */
.explosion-effect {
    position: absolute; width: 100px; height: 100px;
    /* Простой градиент вместо сложного radial */
    background: radial-gradient(circle, #FFD700 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    z-index: 9999 !important; /* ПОВЕРХ ВСЕГО */
    pointer-events: none;
    animation: boom 0.3s ease-out forwards;
}

@keyframes boom { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }

.bomb-flash {
    position: absolute; top: 50%; left: 50%;
    width: 250%; height: 250%; /* Большой радиус */
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, #FFF 0%, rgba(255,100,0,0.5) 50%, transparent 100%);
    z-index: 9998 !important;
    pointer-events: none;
    animation: flashBoom 0.3s ease-out forwards;
}

@keyframes flashBoom { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }

/* Лазеры */
.beam-effect {
    position: absolute; background: #FFF;
    box-shadow: 0 0 10px #FFF; /* Упростили тень */
    z-index: 9990 !important;
    pointer-events: none;
}

.beam-h { height: 4px; left: 0; width: 100%; transform: scaleX(0); animation: beamH 0.2s ease-out forwards; }

.beam-v { width: 4px; top: 0; height: 100%; transform: scaleY(0); animation: beamV 0.2s ease-out forwards; }

@keyframes beamH { 0% { transform: scaleX(0); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

@keyframes beamV { 0% { transform: scaleY(0); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* 4. ЧАСТИЦЫ (GPU) */
.m3-particle {
    position: absolute; width: 6px; height: 6px; border-radius: 50%;
    pointer-events: none; z-index: 50;
    transform: translate3d(0,0,0); /* GPU */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.goals-preview {
    display: flex; 
    justify-content: center; 
    align-items: center;
    gap: 15px; 
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 20px; 
    font-weight: bold; 
    color: #FFD700;
}