/* ui_components.css — Вынесенные статические стили интерфейса орбиты */

/* Экран игрового процесса */
.game-screen-container {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: relative;

    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom, 0px);   
}

.game-screen-container canvas {
    touch-action: none; /* Запрещает браузеру смартфона таскать страницу при движении пальца */

    width: 100%;
    height: 100%;
}

/* Кастомные комбобоксы (Селекты) */
.ui-select {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 4px;
    padding: 3px 8px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    margin-left: 5px;
}
.ui-select.actor-select {
    color: #00ffcc;
}
.ui-select.skin-select {
    color: #ff007f;
}
.ui-select.chat-signal-select {
    color: #ffaa00; /* Яркий оранжевый цвет */
}
.ui-select-option {
    color: #fff;
    background: #0d1117;
}

/* Контейнер блока заряда ранца */
.charge-container {
    --charge-pct: 100;
    margin-bottom: 12px;
    background: rgba(1, 4, 9, 0.6);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0, 255, 204, 0.1);
}

.charge-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: bold;
}

.charge-label {
    color: #ffcc00;
}

/* Базовый стиль текста значения */
.charge-value-text {
    transition: color 0.2s ease;
}

.charge-track {
    width: 100%;
    height: 8px;
    background: #1f2937;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #374151;
}

/* Базовый стиль бара */
.charge-bar {
    width: clamp(0%, calc(var(--charge-pct) * 1%), 100%); 
    height: 100%;
    transition: width 0.1s ease-out, background 0.3s ease, box-shadow 0.3s ease;
}

/* --- УПРАВЛЕНИЕ ЦВЕТАМИ ЧЕРЕЗ КЛАССЫ ВУЕ --- */

/* 1. Нормальный уровень (>= 60%) */
.charge-level-normal .charge-value-text {
    color: #00ffcc;
}
.charge-level-normal .charge-bar {
    background: #00ff66;
    box-shadow: 0 0 8px rgba(0, 255, 102, 0.6);
}

/* 2. Предупреждение (25% - 59%) */
.charge-level-warning .charge-value-text {
    color: #ffcc00;
}
.charge-level-warning .charge-bar {
    background: #ffcc00;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.6);
}

/* 3. Опасность / Текст становится красным при < 20%, а бар при < 25% */
/* Для точного соответствия вашему первому условию (текст < 20) — Vue сам решит когда вешать класс */
.charge-level-danger .charge-value-text {
    color: #ff5252;
}
.charge-level-danger .charge-bar {
    background: #ff5252;
    box-shadow: 0 0 10px rgba(255, 82, 82, 0.8);
}

/* Кнопка перехода в Конструктор */
.btn-editor-trigger {
    width: 100%;
    margin-bottom: 10px;
    background: rgba(255, 0, 127, 0.2);
    border: 1px solid #ff007f;
    color: #fff;
    border-radius: 4px;
    padding: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
}

/* Кнопки управления комнатой (+/- Бот) */
.room-controls {
    display: flex;
    gap: 6px;
    margin: 10px 0;
}
.btn-ctrl {
    flex: 1;
    color: #fff;
    border-radius: 4px;
    padding: 5px;
    cursor: pointer;
    font-size: 12px;
}
.btn-ctrl.spawn {
    background: rgba(0, 255, 204, 0.2);
    border: 1px solid #00ffcc;
}
.btn-ctrl.remove {
    background: rgba(255, 82, 82, 0.2);
    border: 1px solid #ff5252;
}

/* Вспомогательный текст */
.ui-hint-text {
    font-size: 11px;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Кошелек бананов в правом верхнем углу */
.banana-wallet-widget {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(5, 8, 16, 0.85);
    border: 1px solid #ffcc00; /* Золотая неоновая рамка */
    box-shadow: 0 4px 25px rgba(255, 204, 0, 0.2);
    border-radius: 12px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    pointer-events: none; /* Пропускает клики сквозь себя на Canvas! */
}

.banana-icon {
    font-size: 28px;
    animation: pulseBanana 2s infinite ease-in-out;
}

.banana-amount-block {
    display: flex;
    flex-direction: column;
}

.banana-count-label {
    font-size: 10px;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

.banana-value {
    font-size: 22px;
    font-weight: 900;
    color: #ffcc00;
    font-family: monospace; /* Моноширинный шрифт, чтобы цифры не прыгали при росте счета */
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

/* Мягкое покачивание банана*/
@keyframes pulseBanana {
    0% { transform: scale(1); }
    50% { transform: scale(1.1) rotate(10deg); }
    100% { transform: scale(1); }
}

/* Класс-вспышка, который Vue набросит на кошелек ровно в момент финала отсчета! */
.banana-wallet-widget.is-glowing {
    border-color: #ffffff; /* Рамка на мгновение вспыхивает белым */
    background: rgba(40, 30, 0, 0.95); /* Фон наполняется золотым свечением */
    box-shadow: 0 0 40px #ffcc00, inset 0 0 20px #ffcc00; /* Внутреннее и внешнее неоновое сияние */
    animation: walletPopFx 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* упругий толчок */
    transition: all 0.05s ease-out; /* Мгновенный переход во вспышку */
}

/* Анимация физического подпрыгивания и расширения плашки кошелька */
@keyframes walletPopFx {
    0% { transform: scale(1); }
    30% { transform: scale(1.23) rotate(-2deg); } /* Плашка подпрыгивает и делает микро-наклон */
    60% { transform: scale(0.95) rotate(1deg); }  /* Мягкое сжатие амортизации */
    100% { transform: scale(1) rotate(0deg); }    /* Возврат в дефолт */
}

/* ========================================================
   КИТЧЕВЫЙ НЕОНОВЫЙ СТАРТОВЫЙ ОВЕРЛЕЙ (ASTRO APES MENU)
   ======================================================== */
.start-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    
    /* Используем глубокую космическую палитру с радиальным градиентом */
    background: radial-gradient(circle, rgba(13, 17, 23, 0.99) 0%, rgba(5, 8, 16, 1) 100%) !important;
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* Жёстко перекрываем Canvas, ui-panel и banana-wallet-widget (у которого z-index: 10) */
    z-index: 999999 !important; 
    font-family: sans-serif;
    box-sizing: border-box;
}

/* Скрывает разваленный интерфейс до полной загрузки Vue 3 (Защита от FOUC) */
[v-cloak] {
    display: none !important;
}

.start-menu-box {
    /* Копируем дизайн кошелька бананов и админки */
    background: rgba(5, 8, 16, 0.95);
    padding: 40px;
    border-radius: 16px;
    
    /* Скрещиваем золотую рамку кошелька и нефритовый неон админки */
    border: 2px solid #ffcc00; 
    box-shadow: 0 0 35px rgba(255, 204, 0, 0.15), inset 0 0 15px rgba(0, 255, 204, 0.1);
    
    text-align: center;
    width: 400px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}

.start-menu-box h2 {
    margin: 0;
    color: #00ffcc; /* нефритовый неон */
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(0, 255, 204, 0.6);
}

.welcome-text {
    font-size: 14px;
    color: #8b949e; /* цвет подписей */
    margin: 0;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.highlight {
    color: #ffcc00; /* Выделение золотом */
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.3);
}

/* Стилизация инпута входа (инпуты чата) */
.menu-input {
    width: 100%;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 12px;
    color: #ffffff;
    font-size: 16px;
    font-family: monospace; /* Как значение кошелька, чтобы буквы не прыгали */
    box-sizing: border-box;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.menu-input:focus {
    outline: none;
    border-color: #00ffcc;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.4);
}

/* кнопка Взлёта (Интегрируем стиль розовой кнопки конструктора) */
.start-btn {
    width: 100%;
    background: rgba(255, 0, 127, 0.15); /* малиновый неон */
    border: 1px solid #ff007f;
    color: #ffffff;
    border-radius: 6px;
    padding: 14px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 0 12px rgba(255, 0, 127, 0.3);
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.start-btn:hover {
    background: rgba(255, 0, 127, 0.35);
    box-shadow: 0 0 20px #ff007f;
}

/* Кнопка Показать логин/пароль (Копирует стиль кнопок админки) */
.info-btn {
    width: 100%;
    background: rgba(0, 255, 204, 0.1);
    border: 1px solid #00ffcc;
    color: #00ffcc;
    border-radius: 6px;
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.info-btn:hover {
    background: rgba(0, 255, 204, 0.25);
}

/* Выпадающая секретная карточка с паролем */
.credentials-card {
    background: rgba(1, 4, 9, 0.8);
    border: 1px solid rgba(255, 204, 0, 0.2);
    border-radius: 6px;
    padding: 14px;
    text-align: left;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}

.credentials-card p {
    margin: 0;
    color: #8b949e;
}

.credentials-card code {
    background: #0d1117;
    padding: 3px 8px;
    border-radius: 4px;
    color: #ffcc00;
    font-family: monospace;
    font-size: 14px;
    border: 1px solid #30363d;
    margin-left: 5px;
    text-shadow: 0 0 4px rgba(255, 204, 0, 0.3);
}

.main-title {
    margin: 0 !important;
    color: #00ffcc !important; /* неоновый нефрит */
    font-size: 28px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 15px rgba(0, 255, 204, 0.6);
}

.sub-title {
    color: #ffcc00 !important; /* космическое золото */
    font-size: 12px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: -5px;
    margin-bottom: 10px;
    opacity: 0.8;
}