/* ═══════════════════════════════════════════════════════════════════════════ css/v2-tokens.css — V2 design tokens (порт визуального языка LB v2) .......................................................................... Портирует систему lb-v2.css (Rival Ladder) на остальные экраны игры: • токены --v2-* со значениями, идентичными --lbv2-*; • тема: светлая по умолчанию, тёмная — класс .v2-dark на (ставит js/v2-theme.js из Telegram colorScheme, дефолт — dark, как в lbv2-overlay.js); • шрифт Nunito (variable, self-hosted: css/fonts/Nunito-var-*.woff2). НЕ КОНФЛИКУЕТ с lb-v2.css: • неймспейс токенов --v2-* ≠ --lbv2-* (значения совпадают намеренно); • класс .v2-dark ≠ .lbv2-dark (последний живёт только на #lbv2-overlay); • ни один селектор не трогает #lbv2-overlay / .lbv2-* / #lb-overlay / .lb-*. Файл подключается в index.html ПОСЛЕ старых css и ДО css/v2-skin.css. Откат: убрать из index.html — старые стили продолжают работать. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Nunito (variable font, 400–900, self-hosted) ────────────────────────── Те же сабсеты, что отдаёт Google Fonts: cyrillic-ext, cyrillic, latin-ext, latin. Один woff2 на сабсет покрывает все веса (variable). */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('./fonts/Nunito-var-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('./fonts/Nunito-var-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('./fonts/Nunito-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('./fonts/Nunito-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ─── Светлая тема (по умолчанию) ─────────────────────────────────────────── Значения 1:1 из #lbv2-root (light) в lb-v2.css. */ :root { --v2-font: 'Nunito', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --v2-bg: #f4f6f9; --v2-box: #ffffff; /* фон модалок: аналог листа #lbv2-root */ --v2-surface: #ffffff; --v2-surface-2: #f1f5f9; --v2-surface-3: #e2e8f0; --v2-ink: #111827; --v2-ink-2: #4b5563; --v2-ink-3: #9ca3af; --v2-line: rgba(0, 0, 0, 0.08); --v2-gold: #d97706; --v2-gold-2: #b45309; --v2-gold-ink: #ffffff; --v2-gold-tint: rgba(217, 119, 6, 0.10); --v2-gold-soft: rgba(217, 119, 6, 0.04); --v2-gold-faint: rgba(217, 119, 6, 0.02); --v2-gold-brd: rgba(217, 119, 6, 0.22); --v2-accent: #2563eb; /* текст/иконка «бирюзового» акцента */ --v2-accent-bg: rgba(37, 99, 235, 0.10); --v2-accent-brd: rgba(37, 99, 235, 0.20); --v2-up: #16a34a; --v2-up-tint: rgba(22, 163, 74, 0.10); --v2-down: #dc2626; --v2-down-tint: rgba(220, 38, 38, 0.10); --v2-grad: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); /* gold */ --v2-grad-primary: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); /* slate */ --v2-track: rgba(0, 0, 0, 0.08); --v2-hud-bg: rgba(244, 246, 249, 0.85); /* аналог --lbv2-topbar-bg */ --v2-sh-sm: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03); --v2-sh-md: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04); --v2-sh-gold: 0 4px 16px rgba(217, 119, 6, 0.25); color-scheme: light; } /* ─── Тёмная тема (Telegram colorScheme = dark; дефолт игры) ──────────────── Значения 1:1 из #lbv2-overlay.lbv2-dark #lbv2-root в lb-v2.css. */ :root.v2-dark { --v2-bg: #121e2b; --v2-box: #121e2b; --v2-surface: rgba(255, 255, 255, 0.04); --v2-surface-2: rgba(255, 255, 255, 0.07); --v2-surface-3: rgba(255, 255, 255, 0.11); --v2-ink: #ffffff; --v2-ink-2: rgba(255, 255, 255, 0.70); --v2-ink-3: rgba(255, 255, 255, 0.48); --v2-line: rgba(255, 255, 255, 0.08); --v2-gold: #f5cf6d; --v2-gold-2: #dfaf41; --v2-gold-ink: #101721; --v2-gold-tint: rgba(245, 207, 109, 0.14); --v2-gold-soft: rgba(245, 207, 109, 0.06); --v2-gold-faint: rgba(245, 207, 109, 0.03); --v2-gold-brd: rgba(245, 207, 109, 0.28); --v2-accent: #d2e5f5; --v2-accent-bg: rgba(29, 54, 74, 0.7); --v2-accent-brd: rgba(255, 255, 255, 0.08); --v2-up: #34c759; --v2-up-tint: rgba(52, 199, 89, 0.14); --v2-down: #eb5b5b; --v2-down-tint: rgba(235, 91, 91, 0.14); --v2-grad: linear-gradient(135deg, #f7d984 0%, #dfaf41 100%); --v2-grad-primary: linear-gradient(135deg, #254660 0%, #172d3e 100%); --v2-track: rgba(0, 0, 0, 0.32); --v2-hud-bg: rgba(18, 30, 43, 0.82); --v2-sh-sm: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.18); --v2-sh-md: 0 10px 24px -4px rgba(0, 0, 0, 0.38), 0 4px 8px -2px rgba(0, 0, 0, 0.25); --v2-sh-gold: 0 4px 16px rgba(0, 0, 0, 0.35); color-scheme: dark; } /* ─── Глобальный шрифт: старые Rajdhani/Orbitron → Nunito ─────────────────── Точечные упоминания Orbitron (комбо-попапы в канвасе и т.п.) не трогаем. */ body { font-family: var(--v2-font); } /* ─── Служебные кейфреймы V2 (мягкий подъём, без неона) ───────────────────── */ @keyframes v2Rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes v2Pop { 0% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } } /* Мягкое золотое кольцо вместо неонового missionGlow */ @keyframes v2GoldRing { 0%, 100% { box-shadow: 0 0 0 2px var(--v2-gold-brd); } 50% { box-shadow: 0 0 0 5px var(--v2-gold-brd); } }