/* ==========================================================================
   ЯДРО ИНТЕРФЕЙСА: СИСТЕМНЫЕ ПЕРЕМЕННЫЕ (ЦВЕТА И НЕОНОВОЕ СВЕЧЕНИЕ)
   ========================================================================== */
:root {
    /* Базовые цвета */
    --color-bg-dark: #000000;
    --color-text-main: #00FF00;
    --color-text-white: #FFFFFF;
    --color-text-yellow: #FFFF00;
    --color-muted: #666666;

    /* Цветовые схемы для неоновых элементов (Кнопки, Индикаторы, Текст) */
    --neon-red: #FF0000;
    --neon-green: #00FF00;
    --neon-orange: #FF8C00;
    --neon-cyan: #00FFFF;
    --neon-purple: #BA55D3;
    --neon-yellow: #FFFF00;

    /* Альфа-компоненты для полупрозрачных фонов кнопок */
    --bg-alpha-high: 0.2;
    --bg-alpha-low: 0.1;
}

/* ==========================================================================
   БАЗОВЫЕ СТИЛИ СТРАНИЦЫ И ХОЛСТА ИГРЫ
   ========================================================================== */
html, body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

/* ==========================================================================
   АДАПТИВНОЕ МАСШТАБИРОВАНИЕ ХОЛСТА
   --------------------------------------------------------------------------
   Дизайн нарисован под фиксированный холст 1376x768 с абсолютным
   позиционированием в пикселях. Чтобы он выглядел пропорционально на любом
   экране, весь холст целиком масштабируется через transform: scale().
   Коэффициент --game-scale = (ширина экрана / 1376) вычисляется в
   js/responsive-scale.js и обновляется при изменении размеров окна.
   За основу берётся ШИРИНА: холст всегда занимает 100% ширины экрана,
   высота (768 * scale) подстраивается, по вертикали холст центрируется
   (леттербокс — чёрные поля сверху/снизу при иных пропорциях экрана).
   ========================================================================== */

/* Фиксированный холст: реальные px остаются прежними, масштаб накладывается поверх */
.game-interface {
    position: relative;
    width: 1376px;
    height: 768px;
    flex: 0 0 auto;                                   /* не сжимать на узких экранах */
    transform: scale(var(--game-scale, 1));          /* масштаб от ширины экрана */
    transform-origin: center center;                 /* центрирование при масштабе */
    color: var(--color-text-main);
    font-family: 'Courier New', Courier, monospace;
    text-shadow: 1px 1px 2px var(--color-bg-dark);
    box-sizing: border-box;
}

/* ==========================================================================
   ОПТИМИЗИРОВАННАЯ ГРУППИРОВКА ФОНОВЫХ ИЗОБРАЖЕНИЙ
   ========================================================================== */
/* Применяем правила масштабирования сразу ко ВСЕМ фоновым классам (включая пропущенные) */
.arena-bg, .admin-bg, .top-bg, .fight-bg, .registration-bg,
.edit-bg, .login-bg, .restore-bg, .character-bg, .info-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

/* Подгрузка конкретных графических файлов подложки */
.arena-bg, .admin-bg, .top-bg { background-image: url('../images/Arena.jpg'); }
.fight-bg                     { background-image: url('../images/Fight.jpg'); }
.registration-bg, .edit-bg    { background-image: url('../images/Registration.jpg'); }
.login-bg, .restore-bg        { background-image: url('../images/Login.jpg'); }
.character-bg                 { background-image: url('../images/Member.jpg'); }
.info-bg                      { background-image: url('../images/Info.jpg'); }
.privacy-bg, .agreement-bg    { background-image: url('../images/Privacy.jpg'); }

/* ==========================================================================
   КОМПОНЕНТ: УНИВЕРСАЛЬНАЯ НЕОНОВАЯ КНОПКА (КОНСТРУКТОР)
   ========================================================================== */
/* Базовый скелет кнопки — общий для всех цветов в игре */
.btn-neon {
    position: absolute;
    padding: 8px 20px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s;
    z-index: 1000;
    box-sizing: border-box;
    font-size: 14px;
}

/* Универсальный шаблон интерактивности кнопок через подмену цвета переменной */
.btn-red    { --btn-color: var(--neon-red);    background: rgba(255, 0, 0, var(--bg-alpha-high)); }
.btn-green  { --btn-color: var(--neon-green);  background: rgba(0, 255, 0, var(--bg-alpha-high)); }
.btn-orange { --btn-color: var(--neon-orange); background: rgba(255, 140, 0, var(--bg-alpha-high)); }
.btn-cyan   { --btn-color: var(--neon-cyan);   background: rgba(0, 255, 255, var(--bg-alpha-low)); }
.btn-purple { --btn-color: var(--neon-purple); background: rgba(186, 85, 211, var(--bg-alpha-low)); }
.btn-yellow { --btn-color: var(--neon-yellow); background: rgba(255, 255, 0, var(--bg-alpha-low)); }

/* Применяем бордеры и свечение ко всем цветовым модификаторам одновременно */
.btn-red, .btn-green, .btn-orange, .btn-cyan, .btn-purple, .btn-yellow {
    border: 1px solid var(--btn-color);
    color: var(--btn-color);
    box-shadow: 0 0 5px var(--btn-color);
}

/* Общий hover-эффект для всех неоновых кнопок (схлопнуто из 6 правил в 1) */
.btn-red:hover, .btn-green:hover, .btn-orange:hover,
.btn-cyan:hover, .btn-purple:hover, .btn-yellow:hover {
    background: var(--btn-color);
    color: var(--color-bg-dark);
    box-shadow: 0 0 15px var(--btn-color);
}

/* Системное безопасное поведение для заблокированных кнопок (перенесено из Арены в ядро) */
.btn-neon:disabled {
    background: rgba(128, 128, 128, 0.1) !important;
    border: 1px solid #555555 !important;
    color: #555555 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ==========================================================================
   СИСТЕМНЫЕ АНИМАЦИИ И ФОРМЫ
   ========================================================================== */
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 140, 0, 0.4); }
    50% { box-shadow: 0 0 15px rgba(255, 140, 0, 0.8); }
}

.combat-form {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}