@font-face {
    font-family: 'GameFont';
    src: url('assets/Rubik-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

* {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    outline: none;
}
body, html {
    margin: 0; padding: 0; 
    width: 100%; height: 100%;
    position: fixed;
    top: 0; left: 0;
    overflow: hidden !important; 
    background-color: #111820; 
    font-family: 'GameFont', 'Segoe UI', Tahoma, sans-serif;
    touch-action: none !important; 
    color: white;
}
/* Приложение занимает 100% экрана на любом устройстве */
#app {
    position: relative;
    width: 100%; height: 100%;
    background-color: #111820; /* Темный фон на время загрузки */
    overflow: hidden;
}
canvas {
    display: block; width: 100%; height: 100%;
}

/* === ЭКРАНЫ И МЕНЮ === */
.game-screen { 
    display: none; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; overflow-y: auto; 
}
.game-screen.active { display: block; }

#bottom-nav { 
    position: absolute; 
    bottom: 20px; left: 50%; transform: translateX(-50%); 
    width: 90%; max-width: 400px; height: 70px; 
    background: rgba(26, 37, 47, 0.95); /* Сделали фон чуть плотнее вместо размытия */
    border-radius: 35px; display: flex; justify-content: space-around; 
    align-items: center; z-index: 1000; box-shadow: 0 10px 25px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08);
}
.nav-btn { 
    background: none; border: none; color: #7f8c8d; display: flex; flex-direction: column; 
    align-items: center; cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
}
.nav-btn.active { color: #f1c40f; transform: translateY(-4px); }
.nav-btn svg { 
    width: 26px; height: 26px; margin-bottom: 4px; 
    stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; 
}

/* === ДОСКА ЗАКАЗОВ === */
.orders-screen-bg {
    background-color: #8B4513; 
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px);
}
/* Ограничиваем ширину сетки на широких мониторах ПК */
.orders-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; 
    padding: 20px 15px 110px 15px; max-width: 600px; margin: 0 auto;
}
.order-paper {
    background: #fdf5e6; color: #2c3e50; padding: 10px 5px; text-align: center;
    border-radius: 2px; box-shadow: 2px 4px 6px rgba(0,0,0,0.4);
    font-size: 11px; cursor: pointer; aspect-ratio: 1;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    position: relative; transition: transform 0.1s;
}
.order-paper:active { transform: scale(0.95); }
.order-pin {
    width: 8px; height: 8px; background: #e74c3c; border-radius: 50%;
    position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* === СЕТКА САДА (БЕСШОВНАЯ) === */
.garden-container { 
    /* 1. Убрали боковые отступы (было 10px, стало 2px), чтобы сад был от края до края экрана */
    padding: 0 2px 120px 2px; 
    display: flex; justify-content: center; 
} 
.garden-grid { 
    display: grid; grid-template-columns: repeat(10, 1fr); gap: 0; 
    width: 100%; 
    max-width: 900px; 
    height: fit-content; 
    
    border: none; 
    border-radius: 8px;
    box-shadow: none; /* Убрали тень! */

    background-color: #229954;
    background-image: url('assets/grass_good.png');
    background-size: 40% auto;
    background-repeat: repeat;
}

.tile { 
    text-align: center; cursor: pointer; user-select: none; 
    aspect-ratio: 1; 
    position: relative; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    
    /* 3. Сделали шрифт крупнее и читабельнее (минимальный размер был 5px, стал 8px) */
    font-size: clamp(8px, 2.5vw, 14px); 
    
    font-weight: bold; transition: background 0.1s;
    border: none; 
    padding: 1px; box-sizing: border-box; line-height: 1.0;
}
.tile:active { filter: brightness(0.8); transform: scale(0.95); z-index: 5; }

/* Мертвая трава */
.tile.ruined { 
    background-color: transparent !important;
    background-image: url('assets/grass_bad.png') !important; 
    
    /* 1. Делаем размер точно таким же, как под забором (200%) */
    background-size: 200% 200% !important; 
    
    /* 2. Меняем шаг математического пазла для размера 200% */
    background-position: calc(var(--col) * 100%) calc(var(--row) * 100%) !important;
    
    color: rgba(255,255,255,0.9) !important; 
}

/* Поднимаем иконки и текст поверх пунктирной линии */
.tile svg, .tile span {
    position: relative; z-index: 2;
}

/* Цветовые стили нерастительных тайлов */
/* === ЗАБОРЫ (КАРТИНКИ И ТРАВА) === */

/* 1. ХОРОШИЙ ЗАБОР (Прозрачный фон пропускает зеленую траву сада) */
.tile.fence { 
    background-color: transparent; 
    background-image: url('assets/fense_g.png'); 
    background-size: 85% 85%; /* Размер картинки забора внутри клетки */
    background-repeat: no-repeat;
    background-position: center;
}

/* 2. ПЛОХОЙ ЗАБОР (Склеиваем два слоя: картинку сломанного забора и сухую траву) */
.tile.fence.ruined {
    background-image: url('assets/fense_b.png'), url('assets/grass_bad.png') !important; 
    background-size: 85% 85%, 400% 400% !important; 
    
    /* Первый position для забора (по центру), второй — для математического пазла травы */
    background-position: center, calc(var(--col) * 33.333%) calc(var(--row) * 33.333%) !important;
}
.tile.path { background: #d35400; color: rgba(255,255,255,0.8); }

/* Живые растения прозрачные, чтобы было видно хорошую траву */
.tile.grass, .tile.plant, .tile.decor { 
    background: transparent; 
    color: white; 
}

/* Мертвая трава */
.tile.ruined { 
    background-color: transparent !important;
    background-image: url('assets/grass_bad.png') !important; 
    background-size: 400% 400% !important; 
    background-position: calc(var(--col) * 33.333%) calc(var(--row) * 33.333%) !important;
    color: rgba(255,255,255,0.9) !important; 
}

/* Затемняем иконки на мертвой траве */
.tile.ruined svg { 
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.8)) brightness(0.4); 
    stroke: #2c3e50 !important; 
}

/* Иконки растений */
.tile svg { 
    /* 4. Иконки теперь занимают больше места в клетке (было 45%, стало 55%) */
    width: 55%; height: 55%; 
    
    /* 5. Сняли жесткий лимит роста, чтобы они увеличивались вместе с садом (было 24px) */
    max-width: 40px; max-height: 40px; 
    
    margin-bottom: 3px; stroke: currentColor; fill: none; 
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; 
}
/* === КНОПКА САЧОК (РЕКЛАМА) === */
.booster-btn {
    position: absolute; top: 15px; left: 15px; z-index: 100;
    width: 45px; height: 45px; background: rgba(52, 152, 219, 0.8);
    border-radius: 50%; border: 2px solid #2980b9;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; color: white; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.booster-btn:active { transform: scale(0.9); }
.booster-btn svg { width: 24px; height: 24px; }
.booster-badge {
    position: absolute; bottom: -8px; background: #e74c3c;
    font-size: 8px; font-weight: bold; padding: 2px 6px;
    border-radius: 6px; white-space: nowrap; border: 1px solid white;
}
/* ========================================= */
/* === УМНЫЕ ЗАБОРЫ (УВЕЛИЧЕННЫЕ В 2 РАЗА) === */
/* ========================================= */

/* 1. Делаем фон клеток забора прозрачным */
.tile.fence { 
    background-color: transparent !important; 
}

/* У купленного забора убираем картинку фона (сквозь него светит зеленый газон сада) */
/* А сломанный забор АВТОМАТИЧЕСКИ получит бесшовную плохую траву из класса .tile.ruined! */
.tile.fence:not(.ruined) { 
    background-image: none !important; 
}

/* === ВОЗВРАЩАЕМ ПЛОХУЮ ТРАВУ ПОД СЛОМАННЫЙ ЗАБОР === */
.tile.fence.ruined {
    background-image: url('assets/grass_bad.png') !important;
    background-size: 200% 200% !important;
    background-position: calc(var(--col) * 100%) calc(var(--row) * 100%) !important;
    background-repeat: repeat !important;
}

/* Убираем белую штрих-линию на сломанном заборе */
.tile.fence.ruined::before {
    display: none !important;
}

/* 2. СОЗДАЕМ ПСЕВДОЭЛЕМЕНТ (Сам 3D-забор, который вылезает за пределы клетки) */
.tile.fence::after {
    content: '';
    position: absolute;
    
    /* УВЕЛИЧИВАЕМ РАЗМЕР (он будет перекрывать соседние клетки) */
    top: -40%; bottom: -40%; /* Общая высота почти 200% */
    width: 150%;             /* Делаем забор шире и массивнее */
    
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1; /* Оставляем под текстом с ценой, чтобы цену было видно (у текста z-index: 2) */
    pointer-events: none; /* Забор не блокирует клики мышкой */
}

/* === 3. ЛЕВЫЕ ЗАБОРЫ === */
/* Хороший */
.tile.fence:nth-child(10n + 1):not(.ruined)::after {
    background-image: url('assets/fense_g_left.png');
    left: -40%; /* Смещаем каменные столбики к левому краю экрана */
}
/* Сломанный */
.tile.fence.ruined:nth-child(10n + 1)::after {
    background-image: url('assets/fense_b_left.png');
    left: -40%;
}

/* === 4. ПРАВЫЕ ЗАБОРЫ === */
/* Хороший */
.tile.fence:nth-child(10n):not(.ruined)::after {
    background-image: url('assets/fense_g_right.png');
    right: -40%; /* Смещаем каменные столбики к правому краю экрана */
}
/* Сломанный */
.tile.fence.ruined:nth-child(10n)::after {
    background-image: url('assets/fense_b_right.png');
    right: -40%;
}
/* Отключаем прокрутку экрана при свайпе по игре */
canvas {
    touch-action: none !important;
}
/* === ЖЕСТКО БЛОКИРУЕМ ПРОКРУТКУ НА ИГРОВОМ ЭКРАНЕ === */
#screen-game {
    overflow: hidden !important;
    background-color: #111820;
    touch-action: none; /* Дополнительная защита от мобильного скролла */
}
/* === КНОПКА ПЕРЕМЕШИВАНИЯ (РЕКЛАМА) === */
.shuffle-btn {
    position: absolute; z-index: 100;
    touch-action: manipulation;
    transform: translate(-50%, -50%);
    width: 55px; height: 55px; /* Размер картинки (можно менять) */
    background: none; /* Убрали фиолетовый фон */
    border: none; /* Убрали рамку */
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; 
}
.shuffle-btn:active { transform: translate(-50%, -50%) scale(0.9); }
.shuffle-btn svg { width: 24px; height: 24px; stroke: white; }
@media (min-width: 1024px) {
    .shuffle-btn {
        width: 110px; 
        height: 110px;
    }
}
@keyframes winPop {
    0% { transform: scale(0) rotate(-4deg); opacity: 0; }
    70% { transform: scale(1.05) rotate(1deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}