/* ══════════════════════════════════════════ BASE — переменные, reset, анимации, утилиты ══════════════════════════════════════════ */ /* ── CSS Variables ── */ :root { --gold: #c8a227; --gold-hi: #f0c040; --gold-lo: #8a6c10; --steel: #2a3545; --steel-hi: #3d4f63; --steel-lo: #1a2230; --teal: #2a9ab0; --bg: #0e1520; --bg2: #141e2e; --txt: #d4c89a; --txt-hi: #f0e8cc; --txt-lo: #7a8fa8; --green: #2fd67a; --orange: #e8832a; --red: #e04040; --blue: #4ab0e0; --radius: 0; /* тактический UI — без скруглений */ --transition: .2s ease; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body, #root { width: 100%; height: 100%; overflow: hidden; background: var(--bg); font-family: "Exo 2", sans-serif; color: var(--txt); -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font-family: inherit; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--steel-lo); } ::-webkit-scrollbar-thumb { background: var(--gold-lo); border-radius: 2px; } /* ── Animations ── */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes pulse-ring { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } } /* ── Utility classes ── */ .fadein { animation: fadein .3s ease-out forwards; } .fadeup { animation: fadeup .4s ease-out forwards; } .float { animation: float 4s ease-in-out infinite; } /* Clip-path helpers — тактический стиль */ .clip-tl { clip-path: polygon(10px 0%,100% 0%,100% calc(100% - 10px),calc(100% - 10px) 100%,0% 100%,0% 10px); } .clip-sm { clip-path: polygon(7px 0%,100% 0%,100% calc(100% - 7px), calc(100% - 7px) 100%,0% 100%,0% 7px); } /* Scanlines overlay — глобально поверх всего */ .scanlines { position: absolute; inset: 0; pointer-events: none; z-index: 10; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0,0,0,.012) 3px, rgba(0,0,0,.012) 6px ); } /* ══════════════════════════════════════════ PORTAL ROOT — контейнер для всех модалок Рендерится прямо в , вне .app ══════════════════════════════════════════ */ .portal-root { position: fixed; inset: 0; pointer-events: none; z-index: 9000; } /* Всё внутри portal-root кликабельно */ .portal-root > * { pointer-events: all; }