/* ========================================= */
/* БАЗОВЫЕ НАСТРОЙКИ И ШРИФТЫ */
/* ========================================= */

body {
    font-family: 'Rubik', sans-serif;
    overflow-x: hidden; /* Чтобы не было горизонтальной прокрутки на телефоне */
}

/* Используем Russo One для заголовков (он держит кириллицу) */
h1, h2, h3, h4, h5, h6, 
.font-brawl, 
.btn-brawl-yellow, 
.btn-brawl-blue, 
.btn-brawl-red {
    font-family: 'Russo One', sans-serif;
    letter-spacing: 1px;
    line-height: 1.2; /* Чтобы строки не слипались */
}

/* АДАПТИВНОСТЬ ШРИФТОВ (Фикс для телефонов) */
@media (max-width: 640px) {
    h1 { font-size: 2.5rem !important; } /* Уменьшаем огромные заголовки */
    h2 { font-size: 1.8rem !important; }
    h3 { font-size: 1.5rem !important; }
    .text-5xl { font-size: 2.5rem !important; }
    .text-4xl { font-size: 2rem !important; }
    .text-3xl { font-size: 1.75rem !important; }
}

/* ========================================= */
/* ФОН И АНИМАЦИИ */
/* ========================================= */

.bs-bg {
    background: radial-gradient(circle at center, #2e3192 0%, #1b1464 100%);
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 20%),
        repeating-linear-gradient(45deg, #181452 0, #181452 20px, #130f40 20px, #130f40 40px);
    background-attachment: fixed; /* Фон не дергается при скролле */
}

.particle {
    position: absolute;
    background: #00ff00;
    opacity: 0.3;
    bottom: -50px;
    animation: floatUp linear infinite;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
}

@keyframes floatUp {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.4; }
    90% { opacity: 0.4; }
    100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

/* ========================================= */
/* КНОПКИ BRAWL STARS */
/* ========================================= */

/* Общие стили для кнопок */
.btn-brawl-yellow, .btn-brawl-blue, .btn-brawl-red {
    border: 3px solid #000;
    text-transform: uppercase;
    transition: transform 0.1s, box-shadow 0.1s;
    /* Улучшаем читаемость на мобилках */
    white-space: normal; 
    text-align: center;
    line-height: 1.1;
}

/* Желтая */
.btn-brawl-yellow {
    background: linear-gradient(to bottom, #ffe100, #ffb300);
    box-shadow: 0 4px 0 #cc8e00, 0 6px 10px rgba(0,0,0,0.4);
    color: black;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.btn-brawl-yellow:active { transform: translateY(4px); box-shadow: 0 0 0 #cc8e00; }

/* Синяя */
.btn-brawl-blue {
    background: linear-gradient(to bottom, #00d2ff, #007bff);
    box-shadow: 0 4px 0 #0056b3, 0 6px 10px rgba(0,0,0,0.4);
    color: white;
    text-shadow: 0 2px 0 #000;
}
.btn-brawl-blue:active { transform: translateY(4px); box-shadow: 0 0 0 #0056b3; }

/* Красная */
.btn-brawl-red {
    background: linear-gradient(to bottom, #ff5e62, #ff0000);
    box-shadow: 0 4px 0 #b30000, 0 6px 10px rgba(0,0,0,0.4);
    color: white;
    text-shadow: 0 2px 0 #000;
}
.btn-brawl-red:active { transform: translateY(4px); box-shadow: 0 0 0 #b30000; }

/* ========================================= */
/* ДОП. ЭЛЕМЕНТЫ */
/* ========================================= */

.text-shadow-black {
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Скроллбар */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #181452; }
::-webkit-scrollbar-thumb { background: #ffb300; border-radius: 4px; }

/* Пивной блок */
.beer-locked {
    position: relative;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
}
.beer-locked > * { filter: blur(5px) grayscale(80%); opacity: 0.5; }
.beer-locked::after {
    content: "🔒 НУЖЕН ВХОД";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    background-color: #ffb300;
    border: 3px solid #000;
    padding: 8px 16px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    color: black;
    font-family: 'Russo One', sans-serif;
    font-size: 1.5rem;
    white-space: nowrap;
    z-index: 10;
    text-align: center;
}

/* ========================================= */
/* КАПЧА (ПЯТНАШКИ) */
/* ========================================= */
#captchaModal { z-index: 2000; }

#puzzle-container {
    width: 300px; /* Фикс размер, на маленьких экранах можно масштабировать */
    height: 300px;
    position: relative;
    background: #000;
    margin: 0 auto;
    border: 4px solid #ffb300;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    touch-action: none; /* Чтобы не скроллило страницу при игре */
}
/* Адаптив для очень маленьких экранов (iPhone SE и т.д.) */
@media (max-width: 350px) {
    #puzzle-container {
        transform: scale(0.85);
    }
}

.puzzle-tile {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    cursor: pointer;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
    
    /* УЛУЧШЕНИЕ ПЛАВНОСТИ */
    /* Указываем конкретные свойства вместо 'all', это работает быстрее на мобилках */
    transition: left 0.2s ease-in-out, top 0.2s ease-in-out; 
    /* Включаем аппаратное ускорение для движения */
    will-change: left, top; 
    /* Убираем задержку нажатия на мобильных */
    touch-action: manipulation; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0; 
    color: transparent; 
    z-index: 10;
}
.puzzle-empty { background: #111; z-index: -1; }