@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');

/* ════════════════════════════════════════════════════════════════
   ▼ CASCADE LAYERS — explicit cascade order ▼
   Layers are evaluated in declaration order; later layers WIN over
   earlier ones regardless of selector specificity. Anything NOT in
   a layer (the bulk of this file today) is treated as "unlayered"
   and beats every layer below — that's the migration ramp: new
   sections move into layers when they're touched, old sections
   keep working unchanged.
   Order:
     reset       — global resets / normalize
     base        — typography, body background
     components  — reusable widgets (buttons, inputs, cards)
     panels      — menu side/battle panels, modals, screens
     ui          — topbar, HUD overlays, in-game widgets
     overrides   — last-resort tweaks that should always win
   Browser support: Chrome 99+, FF 97+, Safari 15.4+ (universal 2025).
   ════════════════════════════════════════════════════════════════ */
@layer reset, base, components, panels, ui, overrides;

@layer reset {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

body {
    background: #0e1108;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #d4cdb8;
    width: 100vw;
    height: 100vh;
}

#gameCanvas {
    display: block;
    width: 100vw;
    height: 100vh;
    cursor: crosshair;
}

.screen {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    justify-content: center;
    align-items: center;
}

/* ── Запрет выделения текста на UI-хроме ──
   Случайное выделение заголовков/счётчиков/кнопок (двойной клик, протяжка)
   сбивает и выглядит неаккуратно. Глушим во всех «оболочечных» экранах меню,
   зала славы, ангара и их попапах. Выделение ОСТАВЛЯЕМ там, где оно уместно:
   поля ввода (позывной, поиск друзей), textarea, select, contenteditable и
   всё помеченное .selectable — правило ниже их явно реактивирует, и оно
   побеждает наследование от родителя (свойство задано прямо на элементе). */
#mainMenu, #globalTopbar, #garageScreen, #globalLeaderboardScreen,
#ranksModal, #settingsModal, #duelSettingsModal, #missionsPopup,
#hallOfFameModal, #battleLoadingOverlay, #matchEndScreen {
    -webkit-user-select: none;
    user-select: none;
}
input, textarea, select, [contenteditable="true"], .selectable {
    -webkit-user-select: text;
    user-select: text;
}
.screen.active {
    display: flex;
}
.screen.overlay {
    background: rgba(5,8,3,0.82);
    z-index: 20;
}

/* ── Military background (shared by auth + menu) ── */
.military-bg {
    background-color: #1e2a18;
    background-image:
        /* diagonal hatch lines */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 24px,
            rgba(120,145,75,0.08) 24px,
            rgba(120,145,75,0.08) 25px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 24px,
            rgba(120,145,75,0.08) 24px,
            rgba(120,145,75,0.08) 25px
        ),
        /* large camo patches */
        radial-gradient(ellipse 320px 260px at 10% 20%, rgba(75,100,45,0.35) 0%, transparent 70%),
        radial-gradient(ellipse 280px 350px at 80% 10%, rgba(60,85,40,0.32) 0%, transparent 70%),
        radial-gradient(ellipse 400px 220px at 50% 75%, rgba(65,90,42,0.30) 0%, transparent 70%),
        radial-gradient(ellipse 300px 300px at 20% 85%, rgba(70,95,48,0.28) 0%, transparent 70%),
        radial-gradient(ellipse 340px 240px at 90% 55%, rgba(55,78,35,0.34) 0%, transparent 70%),
        radial-gradient(ellipse 250px 320px at 40% 30%, rgba(80,105,50,0.26) 0%, transparent 70%),
        /* medium patches for detail */
        radial-gradient(ellipse 180px 140px at 65% 45%, rgba(90,115,55,0.24) 0%, transparent 65%),
        radial-gradient(ellipse 150px 180px at 30% 55%, rgba(60,85,40,0.26) 0%, transparent 65%),
        radial-gradient(ellipse 200px 120px at 75% 80%, rgba(70,95,45,0.22) 0%, transparent 65%),
        /* vignette */
        radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.3) 100%),
        /* base gradient */
        linear-gradient(160deg, #232e1c, #192214);
}

/* ═══════════ Main Menu — Unified Dark Theme ═══════════ */
#mainMenu {
    flex-direction: column;
    padding: 0;
}