/* --- Глобальные стили --- */
:root {
    --bg-dark: #1a1a2e; /* Очень темный фон */
    --primary-neon: #00bcd4; /* Основной голубой неон */
    --secondary-neon: #ff007f; /* Вторичный розовый неон */
    --accent-green: #76ff03; /* Яркий зеленый акцент */
    --text-light: #e0e0e0; /* Светлый текст */
    --border-dark: #33334d; /* Темная рамка */
    --shadow-color-primary: rgba(0, 188, 212, 0.6); /* Тень для голубого неона */
    --shadow-color-secondary: rgba(255, 0, 127, 0.6); /* Тень для розового неона */
    --shadow-color-green: rgba(118, 255, 3, 0.6); /* Тень для зеленого неона */
}

body {
    font-family: 'Consolas', monospace, sans-serif; /* Моноширинный шрифт для "кибер" вида */
    background-color: var(--bg-dark);
    color: var(--text-light);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden; /* Предотвращаем горизонтальный скролл */
}

.game-container {
    background-color: #0f0f1c; /* Чуть светлее, чем основной фон */
    border-radius: 15px;
    box-shadow: 0 0 25px var(--shadow-color-primary); /* Неоновая тень контейнера */
    padding: 30px;
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
    border: 2px solid var(--border-dark);
    position: relative;
    z-index: 1; /* Для эффекта слоев */
}

/* --- Заголовок и Статистика Игрока --- */
.header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px dashed var(--border-dark);
}

.header h1 {
    color: var(--primary-neon);
    text-shadow: 0 0 10px var(--shadow-color-primary), 0 0 20px var(--shadow-color-primary);
    margin-bottom: 15px;
    font-size: 2.8em;
    letter-spacing: 2px;
    animation: neonGlowPrimary 1.5s ease-in-out infinite alternate;
}

.player-stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
    background-color: #0d0d18;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--border-dark);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.player-stats p {
    margin: 0;
    font-size: 1.2em;
    color: var(--text-light);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}

.player-stats p span {
    color: var(--accent-green);
    text-shadow: 0 0 8px var(--shadow-color-green);
    font-weight: bold;
}

.exp-bar-container {
    width: 90%;
    background-color: #3a003a; /* Темный фон для бара опыта */
    border-radius: 8px;
    height: 18px;
    margin: 15px auto 0;
    overflow: hidden;
    border: 1px solid var(--secondary-neon);
    box-shadow: 0 0 10px var(--shadow-color-secondary);
}

.exp-bar {
    height: 100%;
    background-color: var(--secondary-neon); /* Розовый неон для заполнения */
    width: 0%;
    border-radius: 8px;
    transition: width 0.6s ease-in-out;
    box-shadow: inset 0 0 8px var(--shadow-color-secondary);
}

/* --- Навигационная панель --- */
.top-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-dark);
    border-top: 1px solid var(--border-dark);
}

.nav-button {
    background-color: #33334d; /* Темно-синий фон кнопки */
    color: var(--text-light);
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, text-shadow 0.3s ease;
    flex-grow: 1;
    min-width: 120px;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}

.nav-button:hover {
    background-color: #4a4a6e;
    transform: translateY(-2px);
    box-shadow: 0 0 15px var(--shadow-color-primary);
    text-shadow: 0 0 8px var(--shadow-color-primary);
}

.nav-button.active {
    background-color: var(--primary-neon);
    color: #fff;
    box-shadow: 0 0 20px var(--shadow-color-primary), 0 0 30px var(--shadow-color-primary);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 15px var(--primary-neon);
    transform: translateY(0);
}

/* --- Секции Игры --- */
.game-section {
    display: none;
    padding: 25px;
    border: 2px solid var(--border-dark);
    border-radius: 12px;
    background-color: #121220; /* Фон секции */
    margin-top: 25px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.5s ease-out;
}

.game-section.active {
    display: block;
}

.game-section h2 {
    text-align: center;
    color: var(--accent-green);
    text-shadow: 0 0 10px var(--shadow-color-green);
    margin-bottom: 30px;
    font-size: 2.2em;
    letter-spacing: 1px;
    animation: neonGlowGreen 1.5s ease-in-out infinite alternate;
}

/* --- Анимации неона --- */
@keyframes neonGlowPrimary {
    from { text-shadow: 0 0 10px var(--shadow-color-primary), 0 0 20px var(--shadow-color-primary); }
    to { text-shadow: 0 0 15px var(--shadow-color-primary), 0 0 30px var(--shadow-color-primary), 0 0 40px var(--shadow-color-primary); }
}

@keyframes neonGlowGreen {
    from { text-shadow: 0 0 10px var(--shadow-color-green), 0 0 20px var(--shadow-color-green); }
    to { text-shadow: 0 0 15px var(--shadow-color-green), 0 0 30px var(--shadow-color-green), 0 0 40px var(--shadow-color-green); }
}

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

/* --- Сообщения --- */
.messages {
    text-align: center;
    margin: 20px 0;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    text-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.messages.error {
    background-color: #ff4d4d; /* Красный */
    color: #fff;
    border: 1px solid #ff1a1a;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
    opacity: 1;
}

.messages.success {
    background-color: #39e600; /* Ярко-зеленый */
    color: #000;
    border: 1px solid #28b800;
    box-shadow: 0 0 15px rgba(57, 230, 0, 0.5);
    opacity: 1;
}

.messages.info {
    background-color: var(--primary-neon);
    color: #000;
    border: 1px solid #00a3bd;
    box-shadow: 0 0 15px var(--shadow-color-primary);
    opacity: 1;
}

/* --- Ферма --- */
.farm-plots-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 20px;
    justify-content: center;
    padding: 20px;
    border: 2px dashed var(--accent-green);
    border-radius: 12px;
    background-color: #121220;
    box-shadow: inset 0 0 15px var(--shadow-color-green);
}

.farm-plot {
    position: relative;
    width: 130px;
    height: 130px;
    border: 2px solid var(--accent-green);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #2a2a40; /* Темная земля */
    box-shadow: 0 0 10px var(--shadow-color-green);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.farm-plot:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px var(--shadow-color-green), 0 0 30px var(--shadow-color-green);
}

.farm-plot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    filter: brightness(0.9) contrast(1.1); /* Немного приглушаем, чтобы неон выделялся */
}

.farm-plot button.harvest-button {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--secondary-neon);
    color: #fff;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 0 10px var(--shadow-color-secondary);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.farm-plot button.harvest-button:hover {
    background-color: #ff3399;
    box-shadow: 0 0 15px var(--shadow-color-secondary), 0 0 25px var(--shadow-color-secondary);
}

.growth-timer {
    position: absolute;
    top: 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--text-light);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8em;
    z-index: 10;
    border: 1px solid var(--primary-neon);
    box-shadow: 0 0 8px var(--shadow-color-primary);
}


/* --- Магазин --- */
.shop-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 25px;
    padding: 15px;
    border: 2px solid var(--border-dark);
    border-radius: 12px;
    background-color: #121220;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
}

.shop-item-button {
    background-color: #3a003a; /* Темный фиолетовый */
    color: var(--text-light);
    padding: 15px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-align: center;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.3);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}

.shop-item-button:hover:not(:disabled) {
    background-color: #550055;
    transform: translateY(-3px);
    box-shadow: 0 0 20px var(--shadow-color-secondary), 0 0 30px var(--shadow-color-secondary);
    text-shadow: 0 0 8px var(--shadow-color-secondary);
}

.shop-item-button:disabled {
    background-color: #2a2a40;
    color: #777;
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
    text-shadow: none;
}

/* --- Инвентарь --- */
.inventory-items {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    min-height: 100px;
    padding: 20px;
    border: 2px dashed var(--primary-neon);
    border-radius: 12px;
    background-color: #121220;
    box-shadow: inset 0 0 15px var(--shadow-color-primary);
}

#emptyInventoryMessage {
    text-align: center;
    color: #888;
    font-style: italic;
    width: 100%;
    margin-top: 20px;
    font-size: 1.1em;
}

.inventory-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #0f0f1c;
    border: 1px solid var(--primary-neon);
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 1.1em;
    color: var(--text-light);
    box-shadow: 0 0 8px var(--shadow-color-primary);
    text-shadow: 0 0 5px rgba(0, 188, 212, 0.3);
}

.inventory-item img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
}

#sellAllButton {
    display: block;
    margin: 30px auto 0;
    background-color: var(--secondary-neon);
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 15px var(--shadow-color-secondary);
    text-shadow: 0 0 8px var(--shadow-color-secondary);
}

#sellAllButton:hover {
    background-color: #ff3399;
    transform: translateY(-3px);
    box-shadow: 0 0 25px var(--shadow-color-secondary), 0 0 40px var(--shadow-color-secondary);
}

/* --- Здания --- */
.building-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 25px;
    justify-content: center;
    padding: 15px;
    border: 2px solid var(--border-dark);
    border-radius: 12px;
    background-color: #121220;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
}

.building-card {
    background-color: #0f0f1c;
    border: 1px solid var(--primary-neon);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 15px var(--shadow-color-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.building-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px var(--shadow-color-primary), 0 0 40px var(--shadow-color-primary);
}

.building-card h3 {
    margin-top: 0;
    color: var(--primary-neon);
    text-shadow: 0 0 10px var(--shadow-color-primary);
    font-size: 1.5em;
    margin-bottom: 10px;
}

.building-card img.building-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin: 15px auto;
    display: block;
    filter: drop-shadow(0 0 8px var(--shadow-color-primary));
}

.building-card p {
    font-size: 1em;
    color: var(--text-light);
    margin: 8px 0;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
}

.building-card button {
    margin-top: 15px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    text-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.building-card button.build-button {
    background-color: var(--accent-green);
    color: #000;
    box-shadow: 0 0 10px var(--shadow-color-green);
}
.building-card button.build-button:hover:not(:disabled) {
    background-color: #99ff33;
    transform: translateY(-2px);
    box-shadow: 0 0 20px var(--shadow-color-green), 0 0 30px var(--shadow-color-green);
}

.building-card button.upgrade-button {
    background-color: var(--primary-neon);
    color: #000;
    box-shadow: 0 0 10px var(--shadow-color-primary);
}
.building-card button.upgrade-button:hover:not(:disabled) {
    background-color: #00e6ff;
    transform: translateY(-2px);
    box-shadow: 0 0 20px var(--shadow-color-primary), 0 0 30px var(--shadow-color-primary);
}

.building-card button.produce-button {
    background-color: var(--secondary-neon);
    color: #fff;
    box-shadow: 0 0 10px var(--shadow-color-secondary);
}
.building-card button.produce-button:hover:not(:disabled) {
    background-color: #ff3399;
    transform: translateY(-2px);
    box-shadow: 0 0 20px var(--shadow-color-secondary), 0 0 30px var(--shadow-color-secondary);
}

.building-card button.collect-button {
    background-color: var(--accent-green); /* Для сбора тоже зеленый, как урожай */
    color: #000;
    box-shadow: 0 0 10px var(--shadow-color-green);
}
.building-card button.collect-button:hover:not(:disabled) {
    background-color: #99ff33;
    transform: translateY(-2px);
    box-shadow: 0 0 20px var(--shadow-color-green), 0 0 30px var(--shadow-color-green);
}

.building-card button:disabled {
    background-color: #2a2a40;
    color: #777;
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
    text-shadow: none;
}

.building-timer {
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--text-light);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.9em;
    margin-top: 10px;
    display: inline-block;
    border: 1px solid var(--secondary-neon);
    box-shadow: 0 0 8px var(--shadow-color-secondary);
}


/* --- Квесты --- */
.current-quests {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
}

#noQuestsMessage {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 25px;
    border: 2px dashed var(--border-dark);
    border-radius: 12px;
    font-size: 1.1em;
}

.quest-item {
    background-color: #0f0f1c;
    border: 1px solid var(--primary-neon);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    box-shadow: 0 0 15px var(--shadow-color-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quest-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px var(--shadow-color-primary), 0 0 40px var(--shadow-color-primary);
}

.quest-item h3 {
    margin-top: 0;
    color: var(--accent-green);
    text-shadow: 0 0 10px var(--shadow-color-green);
    font-size: 1.3em;
    margin-bottom: 10px;
}

.quest-item p {
    margin-bottom: 8px;
    font-size: 1em;
    color: var(--text-light);
}

.progress-bar-container {
    background-color: #3a003a;
    border-radius: 6px;
    height: 15px;
    margin: 15px 0;
    overflow: hidden;
    border: 1px solid var(--secondary-neon);
    box-shadow: 0 0 10px var(--shadow-color-secondary);
}

.progress-bar {
    height: 100%;
    background-color: var(--secondary-neon);
    width: 0%;
    border-radius: 6px;
    transition: width 0.5s ease-out;
    box-shadow: inset 0 0 8px var(--shadow-color-secondary);
}

.quest-item button.complete-button {
    background-color: var(--accent-green);
    color: #000;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    margin-top: 15px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px var(--shadow-color-green);
}

.quest-item button.complete-button:hover {
    background-color: #99ff33;
    transform: translateY(-2px);
    box-shadow: 0 0 20px var(--shadow-color-green), 0 0 30px var(--shadow-color-green);
}

/* --- Достижения --- */
.achievement-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 25px;
    padding: 15px;
    border: 2px solid var(--border-dark);
    border-radius: 12px;
    background-color: #121220;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
}

#noAchievementsMessage {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 25px;
    border: 2px dashed var(--border-dark);
    border-radius: 12px;
    font-size: 1.1em;
}

.achievement-item {
    background-color: #0f0f1c;
    border: 1px solid var(--secondary-neon);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 0 15px var(--shadow-color-secondary);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.achievement-item.completed {
    border-color: var(--accent-green);
    box-shadow: 0 0 15px var(--shadow-color-green);
    opacity: 0.9;
}

.achievement-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px var(--shadow-color-secondary), 0 0 40px var(--shadow-color-secondary);
}
.achievement-item.completed:hover {
    box-shadow: 0 0 25px var(--shadow-color-green), 0 0 40px var(--shadow-color-green);
}

.achievement-item h3 {
    margin-top: 0;
    color: var(--secondary-neon);
    text-shadow: 0 0 10px var(--shadow-color-secondary);
    font-size: 1.4em;
    margin-bottom: 8px;
}

.achievement-item.completed h3 {
    color: var(--accent-green);
    text-shadow: 0 0 10px var(--shadow-color-green);
}

.achievement-item p {
    font-size: 0.95em;
    color: var(--text-light);
    margin-bottom: 8px;
}

.achievement-item p.status {
    font-weight: bold;
    font-size: 1.1em;
}

.achievement-item.completed p.status {
    color: var(--accent-green);
    text-shadow: 0 0 5px var(--shadow-color-green);
}

.achievement-item:not(.completed) p.status {
    color: #ff4d4d; /* Красный для невыполненных */
    text-shadow: 0 0 5px rgba(255, 77, 77, 0.5);
}

/* --- Настройки --- */
#settings-section {
    text-align: center;
    padding: 40px;
}

#resetGame {
    background-color: #ff4d4d; /* Ярко-красный */
    color: #fff;
    padding: 18px 35px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.4em;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
}

#resetGame:hover {
    background-color: #ff1a1a;
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.7), 0 0 50px rgba(255, 0, 0, 0.5);
}

/* --- Событие (Попап) --- */
.event-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Более темный оверлей */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.event-content {
    background-color: #0f0f1c;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 0 30px var(--shadow-color-primary), 0 0 50px var(--shadow-color-secondary); /* Двойной неон */
    border: 3px solid var(--primary-neon);
    animation: popIn 0.4s ease-out;
}

.event-content p {
    font-size: 1.5em;
    margin-bottom: 25px;
    color: var(--text-light);
    font-weight: bold;
    text-shadow: 0 0 10px var(--shadow-color-primary);
}

.event-content button {
    background-color: var(--primary-neon);
    color: #000;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2em;
    margin: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px var(--shadow-color-primary);
}

.event-content button:hover {
    background-color: #00e6ff;
    transform: translateY(-3px);
    box-shadow: 0 0 20px var(--shadow-color-primary), 0 0 30px var(--shadow-color-primary);
}

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

/* --- Адаптивный дизайн --- */
@media (max-width: 768px) {
    .game-container {
        padding: 20px;
    }

    .header h1 {
        font-size: 2.2em;
    }

    .player-stats {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .player-stats p {
        font-size: 1em;
    }

    .top-nav {
        gap: 10px;
    }

    .nav-button {
        font-size: 1em;
        padding: 10px 15px;
        min-width: 90px;
    }

    .game-section {
        padding: 20px;
    }

    .game-section h2 {
        font-size: 1.8em;
    }

    .farm-plots-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 15px;
    }

    .farm-plot {
        width: 100px;
        height: 100px;
    }

    .shop-items, .building-slots, .achievement-list {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }

    .shop-item-button, #sellAllButton {
        font-size: 1em;
        padding: 12px 18px;
    }

    .inventory-item {
        font-size: 1em;
    }

    .building-card {
        padding: 15px;
    }

    .building-card h3 {
        font-size: 1.3em;
    }

    .building-card img.building-image {
        width: 100px;
        height: 100px;
    }

    .quest-item {
        padding: 15px;
    }

    .achievement-item {
        padding: 15px;
    }

    #resetGame {
        padding: 15px 25px;
        font-size: 1.1em;
    }

    .event-content {
        max-width: 90%;
        padding: 25px;
    }

    .event-content p {
        font-size: 1.2em;
    }

    .event-content button {
        font-size: 1em;
        padding: 10px 20px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }

    .game-container {
        padding: 15px;
        border-radius: 10px;
    }

    .header h1 {
        font-size: 1.5em;
    }

    .player-stats {
        padding: 8px;
    }

    .player-stats p {
        font-size: 0.9em;
    }

    .top-nav {
        gap: 5px;
    }

    .nav-button {
        font-size: 0.8em;
        padding: 8px 10px;
        min-width: unset;
    }

    .game-section {
        padding: 15px;
        margin-top: 15px;
    }

    .game-section h2 {
        font-size: 1.5em;
    }

    .farm-plots-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 10px;
    }

    .farm-plot {
        width: 80px;
        height: 80px;
    }

    .farm-plot button.harvest-button {
        font-size: 0.7em;
        padding: 4px 8px;
    }

    .shop-items, .building-slots, .achievement-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .shop-item-button, #sellAllButton {
        font-size: 0.9em;
        padding: 10px 15px;
    }

    .inventory-item {
        font-size: 0.9em;
        padding: 8px 10px;
    }

    .building-card {
        padding: 10px;
    }

    .building-card h3 {
        font-size: 1.1em;
    }

    .building-card img.building-image {
        width: 80px;
        height: 80px;
    }

    .building-card p {
        font-size: 0.8em;
    }

    .building-card button {
        font-size: 0.9em;
        padding: 8px 12px;
    }

    .quest-item {
        padding: 10px;
    }

    .achievement-item {
        padding: 10px;
    }

    #resetGame {
        padding: 12px 20px;
        font-size: 1em;
    }

    .event-content {
        padding: 20px;
    }

    .event-content p {
        font-size: 1em;
    }

    .event-content button {
        font-size: 0.9em;
        padding: 8px 15px;
    }
}

.production-slider {
    display: flex;
    flex-direction: column; /* Элементы будут выстраиваться в колонку */
    align-items: center;   /* Центрируем содержимое по горизонтали */
    justify-content: center;
    gap: 15px; /* Расстояние между элементами (product-view, стрелка 1, стрелка 2) */
    margin: 20px 0;
}

.product-view {
    /* Стили для блока продукта (иконка + текст) */
    background-color: #3f4551; /* Темно-серый цвет, похожий на ваш скриншот */
    color: #e0e0e0; /* Светлый текст */
    padding: 20px;
    border-radius: 10px;
    text-align: center; /* Центрируем текст внутри product-view */
    width: fit-content; /* Чтобы блок не растягивался на всю ширину, а подстраивался под контент */

    /* Убедитесь, что содержимое внутри product-view тоже выровнено */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* Расстояние между иконкой и текстом, если они отдельные элементы */
}

.slider-arrow {
    background-color: #007bff; /* Яркий синий цвет для кнопок */
    color: #fff;
    border: none;
    font-size: 24px; /* Увеличил размер шрифта для стрелок */
    padding: 10px 20px; /* Увеличил padding для большей кликабельности */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 200px; /* Задаем фиксированную ширину, чтобы кнопки были одинакового размера и центрировались */
    /* Вы можете настроить width или использовать max-content, если текст разный */
}

.slider-arrow:hover {
    background-color: #0056b3;
}

.product-view {
    flex: 1;
    display: flex;
    justify-content: center;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.fade-in {
    opacity: 1;
    transition: opacity 0.2s ease;
}

---
#building-category-tabs {
  margin-bottom: 15px; /* Slightly more space below the tabs */
  display: flex;
  gap: 10px; /* Increased space between tabs */
  flex-wrap: wrap; /* Allow tabs to wrap to the next line on smaller screens */
  justify-content: center; /* Center the tabs horizontally */
}

.category-tab {
  padding: 10px 20px; /* More padding for a larger, more clickable area */
  border: 1px solid #ccc; /* Lighter, softer border */
  border-radius: 25px; /* More rounded, pill-like shape */
  background: #f8f8f8; /* Slightly lighter background for inactive tabs */
  color: #555; /* Softer text color */
  font-size: 16px; /* Slightly larger font size */
  font-weight: 600; /* A bit bolder than regular bold */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition for hover and active states */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.category-tab:hover {
  background: #e0e0e0; /* Lighter background on hover */
  border-color: #b0b0b0; /* Slightly darker border on hover */
  transform: translateY(-2px); /* Slight lift effect on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* More prominent shadow on hover */
}

.category-tab.active-tab {
  background: linear-gradient(
    45deg,
    #4caf50,
    #66bb6a
  ); /* Gradient background for active tab */
  color: white;
  border-color: #4caf50;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More prominent shadow for active tab */
  transform: translateY(0); /* Reset transform for active tab */
}