/*
Theme Name: LingvoCat Starter
Theme URI: https://lingvocat.com
Author: Yuriy
Description: Мінімалістична та швидка тема для платформи вивчення мов LingvoCat. Оптимізована під швидкість, AdSense та ігрові модулі.
Version: 1.0
Text Domain: lingvocat
*/

/* Базові змінні кольорів LingvoCat */
:root {
    --bg-color: #f8fafc;
    --text-color: #1e293b;
    --primary: #8b5cf6; /* Magic Violet */
    --secondary: #38bdf8; /* Sky Blue */
    --success: #10b981; /* Green */
    --warning: #fbbf24; /* Yellow */
    --error: #ef4444; /* Red */
}

/* Базовий скидання стилів (щоб браузери не додавали свої відступи) */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Контейнер для центрування контенту */
.site-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Основний контент (щоб футер завжди був внизу) */
.site-content {
    min-height: calc(100vh - 150px); /* 150px - приблизна висота хедера і футера */
    padding: 40px 0;
}


/* --- СТИЛІ КОНСТРУКТОРА РЕЧЕНЬ --- */
.cat-character {
    font-size: 60px;
    margin-bottom: 10px;
    transition: transform 0.3s;
}
.question-text {
    font-size: 1.2rem;
    margin-bottom: 20px;
}
.builder-zone {
    min-height: 60px;
    border-bottom: 2px solid var(--secondary);
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.bank-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.word-btn {
    background: white;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 15px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 0 #cbd5e1;
    transition: all 0.1s;
}
.word-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #cbd5e1;
}
.word-btn.hidden {
    visibility: hidden; /* Ховаємо, але залишаємо місце */
}
.active-word {
    background: var(--primary);
    color: white;
    border-color: #7c3aed;
    box-shadow: 0 4px 0 #7c3aed;
}

/* Анімації кота */
@keyframes cat-jump {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
.cat-jump { animation: cat-jump 0.5s ease; }

@keyframes cat-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}
.cat-shake { animation: cat-shake 0.3s ease; }



/* =========================================
   ВІЗУАЛ КОНСТРУКТОРА LingvoCat
   ========================================= */

/* Головні кнопки */
.btn-primary {
    background: var(--primary, #8b5cf6);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    display: inline-block;
}
.btn-primary:hover { background: #7c3aed; }
.btn-primary:disabled { background: #cbd5e1; cursor: not-allowed; }

/* Зона, куди збираємо речення */
.builder-zone {
    min-height: 65px;
    border-bottom: 2px dashed #cbd5e1;
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding-bottom: 15px;
}

/* Зона, де лежать доступні слова */
.bank-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Кнопки зі словами (Ефект об'єму) */
.word-btn {
    background: white;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 0 #cbd5e1;
    transition: all 0.1s ease;
    color: #334155;
}
.word-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #cbd5e1;
}
.word-btn.hidden { 
    display: none; 
}

/* Виділене слово (яке вже в реченні) */
.active-word {
    background: var(--primary, #8b5cf6);
    color: white;
    border-color: #7c3aed;
    box-shadow: 0 4px 0 #7c3aed;
}

/* Емодзі Кота */
.cat-character { 
    font-size: 70px; 
    margin-bottom: 10px; 
    display: inline-block; 
}

/* Анімації для Кота */
@keyframes cat-jump { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-20px); } 
}
.cat-jump { animation: cat-jump 0.5s ease; }

@keyframes cat-shake { 
    0%, 100% { transform: translateX(0); } 
    25% { transform: translateX(-10px); } 
    75% { transform: translateX(10px); } 
}
.cat-shake { animation: cat-shake 0.3s ease; }