/* ===================================================================== DARK LUXE — премиальный визуальный слой онлайн-платформы. Аддитивный оверлей: грузится ПОСЛЕ styles.css и online.css, поэтому выигрывает по порядку источника. Скоуп — только онлайн-секция и входной экран (#onlineGameView, #gameRouteView, .ol-gate). Аналитический модуль не затрагивается. Файл можно отключить одной строкой в . Направление: обсидиановый фон с амбиентным изумрудно-золотым свечением, стеклянные панели с волосяной градиентной рамкой, акценты — изумруд (наследие доски) + шампань-золото, дисплейная антиква Playfair Display, премиальные микро-взаимодействия. ===================================================================== */ /* ----------------------------------------------------- Luxe-токены -- */ #onlineGameView, #gameRouteView, .ol-gate { /* Базовые поверхности */ --lx-obsidian: #06080d; --lx-obsidian-2: #0a0e16; --lx-glass: rgba(17, 23, 33, 0.72); --lx-glass-2: rgba(22, 29, 41, 0.82); --lx-glass-hi: rgba(30, 39, 54, 0.9); /* Изумруд — основной интерактивный акцент (наследие доски) */ --lx-emerald: #1fa971; --lx-emerald-hi: #2fc488; --lx-emerald-deep: #0f6f49; --lx-emerald-glow: rgba(31, 169, 113, 0.45); --lx-emerald-soft: rgba(31, 169, 113, 0.12); /* Шампань-золото — премиальные блики (рейтинг, бренд, фокус) */ --lx-gold: #e7c982; --lx-gold-hi: #f4dca2; --lx-gold-deep: #c39b46; --lx-gold-glow: rgba(231, 201, 130, 0.4); --lx-gold-soft: rgba(231, 201, 130, 0.1); /* Текст */ --lx-ink: #f4f1ea; --lx-ink-soft: #c6ccd8; --lx-muted: #8c95a6; /* Рамки-волоски */ --lx-hair: rgba(231, 222, 200, 0.1); --lx-hair-strong: rgba(231, 222, 200, 0.18); /* Тени */ --lx-shadow: 0 32px 80px -28px rgba(0, 0, 0, 0.8); --lx-shadow-card: 0 20px 56px -26px rgba(0, 0, 0, 0.7); --lx-shadow-glow: 0 24px 64px -30px var(--lx-emerald-glow); /* Геометрия */ --lx-r-lg: 20px; --lx-r: 14px; --lx-r-sm: 10px; /* Шрифты */ --lx-display: "Playfair Display", "Times New Roman", serif; --lx-ui: "Manrope", Inter, ui-sans-serif, system-ui, sans-serif; font-family: var(--lx-ui); letter-spacing: 0.005em; } /* Хайрлайн-рамка через ::before-маску (псевдоэлемент-«ободок»). Используем общий приём box-shadow inset для тонкой светящейся грани. */ /* ============================================================ ВХОД == */ /* Кинематографичный входной экран: обсидиан + амбиентное свечение + grain */ .ol-gate { /* Прокрутка + центрирование «по возможности»: когда карточка выше экрана, она прижимается к верху и скроллится (логотип не режется). */ align-items: flex-start; justify-content: center; overflow-y: auto; padding: max(20px, (100vh - 540px) / 2) 20px 20px; background: radial-gradient(120% 90% at 18% 8%, rgba(31, 169, 113, 0.16), transparent 46%), radial-gradient(120% 90% at 86% 92%, rgba(231, 201, 130, 0.13), transparent 48%), radial-gradient(80% 60% at 50% 50%, rgba(12, 18, 28, 0.4), transparent 70%), linear-gradient(180deg, #04060a, #070b12 60%, #04060a); backdrop-filter: blur(8px) saturate(1.05); -webkit-backdrop-filter: blur(8px) saturate(1.05); } /* Тонкая «аврора» + зерно поверх фона входа */ .ol-gate::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: conic-gradient(from 210deg at 30% 20%, rgba(31, 169, 113, 0.08), transparent 25%, rgba(231, 201, 130, 0.06) 55%, transparent 80%); mix-blend-mode: screen; opacity: 0.9; animation: lx-aurora 18s ease-in-out infinite alternate; } .ol-gate::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes lx-aurora { 0% { transform: translate3d(-2%, -1%, 0) rotate(0deg); } 100% { transform: translate3d(2%, 1%, 0) rotate(8deg); } } .ol-gate-card { position: relative; width: min(440px, 100%); gap: 18px; padding: 40px 36px 34px; border: 1px solid var(--lx-hair-strong); border-radius: var(--lx-r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 32%), var(--lx-glass-2); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); box-shadow: var(--lx-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(231, 201, 130, 0.04); animation: lx-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Золотая «корона»-линия сверху карточки */ .ol-gate-card::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--lx-gold), transparent); opacity: 0.7; } @keyframes lx-rise { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .ol-gate-brand { flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 4px; } .ol-gate-logo { font-size: 2.9rem; color: var(--lx-gold); background: linear-gradient(160deg, var(--lx-gold-hi), var(--lx-gold-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 16px rgba(231, 201, 130, 0.45)); animation: lx-float 5s ease-in-out infinite; } @keyframes lx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .ol-gate-titles { align-items: center; } .ol-gate-titles strong { font-family: var(--lx-display); font-size: 1.7rem; font-weight: 600; letter-spacing: 0.01em; color: var(--lx-ink); line-height: 1.1; } .ol-gate-titles span { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lx-gold); opacity: 0.85; margin-top: 4px; } .ol-gate-tabs { position: relative; padding: 4px; border: 1px solid var(--lx-hair); border-radius: 999px; background: rgba(4, 7, 12, 0.6); } .ol-gate-tab { position: relative; z-index: 1; font-family: var(--lx-ui); font-weight: 700; letter-spacing: 0.01em; color: var(--lx-muted); transition: color 200ms ease; } .ol-gate-tab.active { color: #05140d; background: linear-gradient(180deg, var(--lx-emerald-hi), var(--lx-emerald)); box-shadow: 0 8px 20px -8px var(--lx-emerald-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25); } /* ----------------------------------------------- Поля и кнопки входа -- */ .ol-gate-form { gap: 12px; } .ol-gate-link { color: var(--lx-gold); letter-spacing: 0.02em; transition: color 160ms ease, opacity 160ms ease; } .ol-gate-link:hover { color: var(--lx-gold-hi); text-decoration: none; opacity: 1; } /* ============================================================ ИНПУТЫ == */ #onlineGameView .ol-input, #onlineGameView .ol-select, #gameRouteView .ol-input, #gameRouteView .ol-select, .ol-gate .ol-input, .ol-gate .ol-select { padding: 12px 14px; border-radius: var(--lx-r-sm); border: 1px solid var(--lx-hair); background: rgba(4, 7, 12, 0.55); color: var(--lx-ink); letter-spacing: 0.01em; transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } #onlineGameView .ol-input::placeholder, .ol-gate .ol-input::placeholder { color: var(--lx-muted); } #onlineGameView .ol-input:focus, #onlineGameView .ol-select:focus, #gameRouteView .ol-input:focus, .ol-gate .ol-input:focus, .ol-gate .ol-select:focus { outline: none; border-color: rgba(231, 201, 130, 0.6); background: rgba(6, 10, 16, 0.8); box-shadow: 0 0 0 3px var(--lx-gold-soft), 0 0 22px -6px var(--lx-gold-glow); } /* ============================================================ КНОПКИ == */ #onlineGameView .ol-button, #gameRouteView .ol-button, .ol-gate .ol-button { position: relative; padding: 11px 18px; border-radius: var(--lx-r-sm); border: 1px solid var(--lx-hair-strong); background: var(--lx-glass); color: var(--lx-ink-soft); font-family: var(--lx-ui); font-weight: 700; letter-spacing: 0.01em; overflow: hidden; transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease; } #onlineGameView .ol-button:hover:not(:disabled), #gameRouteView .ol-button:hover:not(:disabled), .ol-gate .ol-button:hover:not(:disabled) { transform: translateY(-1px); background: var(--lx-glass-hi); border-color: rgba(231, 201, 130, 0.4); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.8); } #onlineGameView .ol-button:active:not(:disabled), #gameRouteView .ol-button:active:not(:disabled), .ol-gate .ol-button:active:not(:disabled) { transform: translateY(0); } #onlineGameView .ol-button:focus-visible, #gameRouteView .ol-button:focus-visible, .ol-gate .ol-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lx-gold-soft), 0 0 0 1px var(--lx-gold); } /* Главная кнопка — изумрудный градиент с бликом-«шиммером» */ #onlineGameView .ol-button.primary, #gameRouteView .ol-button.primary, .ol-gate .ol-button.primary { border-color: transparent; color: #04140c; background: linear-gradient(180deg, var(--lx-emerald-hi), var(--lx-emerald) 55%, var(--lx-emerald-deep)); box-shadow: 0 14px 34px -14px var(--lx-emerald-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18); } #onlineGameView .ol-button.primary:hover:not(:disabled), #gameRouteView .ol-button.primary:hover:not(:disabled), .ol-gate .ol-button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #38d196, var(--lx-emerald-hi) 55%, var(--lx-emerald)); box-shadow: 0 18px 44px -14px var(--lx-emerald-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4); } /* Бегущий блик по главной кнопке */ #onlineGameView .ol-button.primary::after, #gameRouteView .ol-button.primary::after, .ol-gate .ol-button.primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-18deg); transition: left 0s; } #onlineGameView .ol-button.primary:hover:not(:disabled)::after, #gameRouteView .ol-button.primary:hover:not(:disabled)::after, .ol-gate .ol-button.primary:hover:not(:disabled)::after { left: 130%; transition: left 720ms ease; } #onlineGameView .ol-button.ghost, #gameRouteView .ol-button.ghost { background: transparent; border-color: var(--lx-hair); } /* ====================================================== ЛОББИ: ХЕДЕР == */ .ol-header h1 { font-family: var(--lx-display); font-weight: 600; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: 0.01em; color: var(--lx-ink); line-height: 1.05; } .ol-header .eyebrow { letter-spacing: 0.26em; text-transform: uppercase; font-size: 0.7rem; color: var(--lx-gold); opacity: 0.85; } .ol-conn { border-color: var(--lx-hair); background: var(--lx-glass); color: var(--lx-muted); letter-spacing: 0.02em; } .ol-conn[data-state="on"]::before { background: var(--lx-emerald-hi); box-shadow: 0 0 10px var(--lx-emerald-glow); } .ol-profile { border-color: var(--lx-hair); background: var(--lx-glass); border-radius: 999px; padding: 8px 16px 8px 10px; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .ol-profile:hover { background: var(--lx-glass-hi); border-color: rgba(231, 201, 130, 0.45); box-shadow: 0 10px 28px -16px var(--lx-gold-glow); transform: translateY(-1px); } .ol-profile-avatar { background: linear-gradient(160deg, rgba(231, 201, 130, 0.22), rgba(31, 169, 113, 0.18)); border: 1px solid var(--lx-hair-strong); } .ol-profile-rating { color: var(--lx-gold); text-shadow: 0 0 16px var(--lx-gold-glow); font-variant-numeric: tabular-nums; } /* ====================================================== ЛОББИ: ТАБЫ == */ .ol-lobby-tabs { gap: 4px; padding: 5px; border: 1px solid var(--lx-hair); border-radius: 999px; background: rgba(4, 7, 12, 0.5); width: fit-content; } .ol-lobby-tab { font-family: var(--lx-ui); font-weight: 700; letter-spacing: 0.02em; color: var(--lx-muted); border-radius: 999px; padding: 9px 20px; transition: color 200ms ease, background 200ms ease, box-shadow 200ms ease; } .ol-lobby-tab.active { color: #05140d; background: linear-gradient(180deg, var(--lx-emerald-hi), var(--lx-emerald)); box-shadow: 0 10px 24px -10px var(--lx-emerald-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25); } /* ==================================================== ЛОББИ: КАРТОЧКИ == */ .ol-card { position: relative; border: 1px solid var(--lx-hair); border-radius: var(--lx-r); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 28%), var(--lx-glass); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); box-shadow: var(--lx-shadow-card); transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .ol-card:hover { border-color: var(--lx-hair-strong); box-shadow: var(--lx-shadow-card), 0 0 0 1px rgba(231, 201, 130, 0.05); } .ol-card h2, .ol-card-heading h2 { font-family: var(--lx-ui); font-weight: 800; letter-spacing: 0.01em; color: var(--lx-ink); } /* Тонкий золотой акцент-маркер слева у заголовков карточек */ .ol-card > h2::before, .ol-card-heading > h2::before { content: ""; display: inline-block; width: 3px; height: 0.95em; margin-right: 9px; vertical-align: -0.12em; border-radius: 2px; background: linear-gradient(180deg, var(--lx-gold-hi), var(--lx-gold-deep)); box-shadow: 0 0 10px var(--lx-gold-glow); } .ol-empty, .ol-hint { color: var(--lx-muted); } /* Сегмент-переключатель (жеребьёвка/классика) */ .ol-segment { border: 1px solid var(--lx-hair); border-radius: 999px; background: rgba(4, 7, 12, 0.5); padding: 3px; } .ol-segment-option { border-radius: 999px; color: var(--lx-muted); font-weight: 700; transition: color 180ms ease, background 180ms ease; } .ol-segment-option.active { color: var(--lx-ink); background: var(--lx-emerald-soft); box-shadow: inset 0 0 0 1px var(--lx-emerald-glow); } /* Топ игроков — золотой пьедестал */ .ol-top-list > li:nth-child(1) .ol-top-rating, .ol-top-list > li:nth-child(1) strong { color: var(--lx-gold); } /* Спиннер поиска соперника */ .ol-spinner { border-top-color: var(--lx-emerald-hi) !important; } .ol-queue { border: 1px solid var(--lx-hair); background: var(--lx-emerald-soft); border-radius: var(--lx-r-sm); } /* Баннеры (идёт партия / входящий вызов) */ .ol-banner { border-color: rgba(231, 201, 130, 0.3); background: linear-gradient(180deg, var(--lx-gold-soft), rgba(231, 201, 130, 0.03)); border-radius: var(--lx-r-sm); } .ol-incoming { border-color: var(--lx-emerald-glow); background: linear-gradient(180deg, var(--lx-emerald-soft), rgba(31, 169, 113, 0.03)); } /* ============================================ ПАРТИЯ: рамка доски == */ #gameRouteView .board-frame, #onlineGameView .board-frame { box-shadow: var(--lx-shadow), 0 0 0 1px var(--lx-hair-strong), 0 0 60px -20px var(--lx-emerald-glow); } /* ============================================ ИГРОВОЙ РОУТ (партия) == */ /* Тихий люкс: парящая доска без массивной рамы + амбиентное изумрудное свечение; подсветки и часы сдержанные, БЕЗ золотого блинга на доске. Клетки тем НЕ трогаем — только обвязку и интерактивные подсветки. */ /* --- Парящая доска + амбиентный изумрудный ореол --- */ #gameRouteView .ol-board, #onlineGameView .ol-board { border-color: var(--lx-hair-strong); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 44px 96px -44px rgba(0, 0, 0, 0.85), 0 18px 40px -24px rgba(0, 0, 0, 0.6), 0 0 80px -30px var(--lx-emerald-glow); } /* --- Карточки игроков: чистое стекло, сдержанный активный акцент --- */ #gameRouteView .ol-player-row { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%), var(--lx-glass); border-color: var(--lx-hair); border-radius: 13px; } #gameRouteView .ol-player-row.active { border-color: rgba(47, 196, 136, 0.42); background: linear-gradient(180deg, var(--lx-emerald-soft), transparent 60%), var(--lx-glass); box-shadow: 0 0 0 1px rgba(47, 196, 136, 0.3), 0 10px 28px -16px var(--lx-emerald-glow); } #gameRouteView .ol-player-dot { background: var(--lx-emerald-hi); } #gameRouteView .ol-player-name { color: var(--lx-ink); letter-spacing: 0.01em; } #gameRouteView .ol-player-rating { color: var(--lx-muted); font-variant-numeric: tabular-nums; } #gameRouteView .ol-player-piece[data-side="white"] { border-color: var(--lx-hair-strong); } /* --- Часы: сдержанно и чисто, крупная табличная моноширина --- */ #gameRouteView .ol-player-clock { font-size: 1.34rem; letter-spacing: 0.02em; padding: 4px 13px; border-radius: var(--lx-r-sm); background: rgba(4, 7, 12, 0.5); border-color: var(--lx-hair); color: var(--lx-ink-soft); transition: color 180ms ease, border-color 180ms ease, background 180ms ease; } #gameRouteView .ol-player-clock.running { color: var(--lx-ink); border-color: rgba(47, 196, 136, 0.5); background: var(--lx-emerald-soft); } #gameRouteView .ol-player-clock.low { color: #ff9a9a; border-color: rgba(239, 107, 115, 0.55); background: rgba(239, 107, 115, 0.08); } /* --- Зум-сегмент под доской --- */ #gameRouteView .ol-board-zoom { border-color: var(--lx-hair); background: var(--lx-glass); } /* --- Боковая панель: заголовки, ходы, состояние --- */ #gameRouteView .ol-side-heading h3 { font-family: var(--lx-ui); font-weight: 800; letter-spacing: 0.01em; color: var(--lx-ink); } #gameRouteView .ol-turn-state { border-radius: var(--lx-r-sm); background: var(--lx-glass); border-color: var(--lx-hair); } #gameRouteView .ol-turn-state[data-state="your"] { border-color: rgba(47, 196, 136, 0.45); color: var(--lx-emerald-hi); } #gameRouteView .ol-turn-state[data-state="your"]::before { background: var(--lx-emerald-hi); box-shadow: 0 0 9px var(--lx-emerald-glow); } /* Текущий ход в списке — тихий изумрудный акцент (без золота). */ #gameRouteView .ol-move-list .current, #gameRouteView .ol-move-list .ol-move.current, #gameRouteView .ol-move-list [aria-current="true"] { background: var(--lx-emerald-soft); box-shadow: inset 0 0 0 1px rgba(47, 196, 136, 0.3); border-radius: 6px; } /* --- Подсветки на доске: переопределяем переменные системы подсветок (styles.css :root --hl-*), заскопив их на онлайн-контейнеры. Так доска анализа и темы клеток не затронуты, а правила-потребители (.piece.selected, .last-move-square, .target-marker) получают тихую изумрудную линию вместо золотого блинга. Custom properties наследуются вниз по дереву. --- */ #onlineGameView, #gameRouteView { /* Система №1 (--hl-*, styles.css:6707) */ --hl-select: var(--lx-emerald-hi); /* выбор — изумруд, не золото */ --hl-lastmove: rgba(47, 196, 136, 0.15); /* последний ход — деликатный изумруд */ --hl-lastmove-ring: rgba(47, 196, 136, 0.5); --hl-hint: rgba(31, 169, 113, 0.4); /* доступный ход — изумруд */ --hl-hint-ring: rgba(47, 196, 136, 0.85); --hl-capture: rgba(225, 90, 71, 0.38); /* взятие — чистый коралл */ --hl-capture-ring: rgba(225, 90, 71, 0.85); /* Система №2 (--selected-square/--last-move, styles.css:7134 — были жёлтыми) */ --selected-square: rgba(47, 196, 136, 0.35); --last-move: rgba(47, 196, 136, 0.2); } /* Онлайн-доска НЕ использует --hl-*: в online.css подсветки захардкожены с специфичностью .ol-board ... (0,3,0). Перебиваем те же селекторы — luxe грузится позже, поэтому при равной специфичности выигрывает. Значения — тихий изумруд (выбор/ход/наведение) и чистый коралл (взятие). */ /* Выбранная шашка — чистое изумрудное кольцо вместо амбер-блинга. */ .ol-board .piece.selected { outline: 3px solid var(--lx-emerald-hi); outline-offset: 2px; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 16px -2px var(--lx-emerald-glow); } /* Наведение на свою ходящую шашку — мягкое изумрудное кольцо. */ .ol-board .piece.can-move:hover { outline: 3px solid rgba(47, 196, 136, 0.55); outline-offset: 2px; } /* Последний ход — деликатный изумрудный тинт вместо жёлтого. */ .ol-board .square.last-move-square::before { background: rgba(47, 196, 136, 0.16); } /* Доступный ход — изумрудная точка. */ .ol-board .move-target .target-marker { background: radial-gradient(circle at 50% 42%, var(--lx-emerald-hi) 0%, var(--lx-emerald) 70%); } /* Взятие — чистый коралл (предупреждение читаемо, но не кричит). */ .ol-board .move-target .target-marker.capture { border-color: #e85a47; box-shadow: 0 0 0 2px rgba(20, 24, 30, 0.3), 0 0 12px -2px rgba(232, 90, 71, 0.6); } /* Вспышка клетки назначения в момент хода использует var(--accent) (под темой = тематический цвет). Переводим её на тихий изумруд. */ .ol-board .square.flash::after { background: var(--lx-emerald); } /* ============================================== Reduced motion guard == */ @media (prefers-reduced-motion: reduce) { .ol-gate::before, .ol-gate-card, .ol-gate-logo { animation: none !important; } #onlineGameView .ol-button, #gameRouteView .ol-button, .ol-gate .ol-button, .ol-card, .ol-profile { transition-duration: 60ms; } #onlineGameView .ol-button.primary::after, .ol-gate .ol-button.primary::after { display: none; } } /* ============================================================ Mobile == */ @media (max-width: 560px) { .ol-gate-card { padding: 30px 22px 26px; } .ol-gate-titles strong { font-size: 1.45rem; } }