/* #assets/css/main.css — Yummy Lunchbox/assets/css */

/* 1. ПОДКЛЮЧЕНИЕ ШРИФТА (Balsamiq Sans, веса 400 и 700) */
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&display=swap');

:root {
    /* --- KAWAII PALETTE --- */
    --col-primary: #FF8BA7;
    --col-primary-dark: #FF5E85;
    --col-secondary: #4ECDC4;
    --col-accent: #FFD93D;
    
    /* Фоны */
    --bg-main: #FFF8F0;
    
    /* --- PLASTIC THEME --- */
    --bg-plastic: rgba(250, 250, 250, 0.95); /* Плотный фон для читаемости */
    --shadow-plastic: rgba(0, 0, 0, 0.1);
    --border-plastic: #FFFFFF;
    
    /* Текст */
    --col-text-main: #5D576B;
    --col-text-light: #FFFFFF;
    
    /* Интерфейс */
    --radius-main: 50%;
    --radius-box: 1rem; /* Используем rem для масштабируемости */
    
    /* Основной шрифт */
    --font-main: 'Balsamiq Sans', cursive, sans-serif;
}

/* --- GLOBAL RESET & APP BEHAVIOR --- */
*, *::before, *::after {
    box-sizing: border-box;
    /* Убираем "серый квадрат" при клике на Android/iOS */
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    /* КЛЮЧЕВОЕ: 100dvh (Dynamic Viewport Height) 
       Решает проблему с "прыгающей" адресной строкой в Safari/Chrome Mobile */
    height: 100dvh; 
    
    margin: 0;
    padding: 0;
    overflow: hidden; /* Никакого скролла страницы */
    background-color: var(--bg-main);
    color: var(--col-text-main);
    
    font-family: var(--font-main);
    font-weight: 400;
    
    /* --- ОТКЛЮЧЕНИЕ СИСТЕМНЫХ ЖЕСТОВ (App-like feel) --- */
    
    /* 1. Запрет выделения текста */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    /* 2. Запрет контекстного меню (iOS) при долгом тапе */
    -webkit-touch-callout: none;
    
    /* 3. Запрет жестов браузера (зум, свайп назад) */
    touch-action: none;
    
    /* 4. Запрет "резиновой" прокрутки и pull-to-refresh */
    overscroll-behavior: none;
}

/* Запрет перетаскивания изображений (Drag & Drop) */
img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none; /* Чтобы клики проходили сквозь декор */
}

/* Возвращаем кликабельность для кнопок */
button, .ui-btn, .icon-btn {
    pointer-events: auto;
    touch-action: manipulation; /* Оптимизация для тач-устройств */
}

/* --- LAYOUT CONTAINERS --- */
#app {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    /* Убрали pixelated, чтобы векторная графика была гладкой */
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;       
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none; 
}

.screen > * {
    pointer-events: auto;
}

/* =========================================
   ПРИНУДИТЕЛЬНАЯ ЖИРНОСТЬ (FIX)
   ========================================= */
h1, h2, h3,                 
.game-title,                
button, .ui-btn,            
.shop-title,                
.shop-price-sticker,        
.level-badge,               
.leaderboard-item span {    
    font-family: var(--font-main) !important;
    font-weight: 700 !important;
}

/* --- LOADER --- */
#loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-main);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.loader-spinner {
    /* Относительные размеры (зависят от меньшей стороны экрана) */
    width: 12vmin;
    height: 12vmin;
    border: 1vmin solid #fff;
    border-top: 1vmin solid var(--col-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* Utilities */
.hidden { display: none !important; }
.center-flex { display: flex; justify-content: center; align-items: center; }

/* =========================================
   SPECIFIC FIXES (ЗАГОЛОВОК ИГРЫ)
   ========================================= */
.game-title {
    color: var(--col-primary-dark) !important; /* Ярко-розовый */
    
    /* Жирная белая обводка */
    -webkit-text-stroke: 4px #FFF; 
    paint-order: stroke fill;
    
    text-shadow: 3px 3px 0px rgba(0,0,0,0.1);
    
    /* Крупный адаптивный размер */
    font-size: clamp(2.5rem, 8vw, 4rem); 
    font-weight: 900 !important;
    text-align: center;
    line-height: 1.1;
    margin-bottom: 2vh;
}