/* ===================================================================== theme.css — Midnight Black: единый фундамент премиум-визуала (П0). Подключается ПОСЛЕ main.css (перекрывает шрифты и мягкие глобалы), на страницах без main.css — просто первым. Только токены, шрифты, мягкие глобалы и утилиты: ничего не ломает, всё остальное — опционально через классы (см. components.css). ===================================================================== */ /* ---------- шрифты (self-host, variable) ---------- */ @font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/cormorant-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/cormorant-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; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/jetbrainsmono-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/jetbrainsmono-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; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-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; } :root { /* чернила — слои глубины */ --ink-0: #040407; --ink-1: #0a0a14; --ink-2: #12121f; --ink-3: #1a1a2c; /* золото-шампань — деньги, премиум, главные CTA */ --gold-hi: #f6ecd0; --gold: #e8c569; --gold-lo: #9a742c; --gold-grad: linear-gradient(120deg, var(--gold-hi), var(--gold) 45%, #caa14a); --hairline: rgba(232, 197, 105, 0.28); --hairline-strong: rgba(232, 197, 105, 0.55); /* вторичный акцент и статусы */ --violet: #6f7aff; --win: #2fd08c; --lose: #ff4b6e; --wait: #ffb03a; /* фетры */ --felt-green: #0d3528; --felt-bordo: #3a1020; --felt-graphite: #14141f; /* текст */ --tx-hi: #ecedf7; --tx-mid: #a9adcc; --tx-dim: #7d81a3; /* пластика */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --sh-1: inset 0 1px 0 rgba(255,255,255,.05); --sh-2: 0 6px 18px rgba(0,0,0,.4); --sh-3: 0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); --sh-4: 0 30px 80px rgba(0,0,0,.65); --sh-gold: 0 8px 26px rgba(232,197,105,.22); /* движение */ /* --anim-k — множитель скорости анимаций из «Настроек» (js/prefs.js ставит его на ). Все длительности считаются от него, поэтому «Спокойные / Быстрые» реально меняют темп. */ --anim-k: 1; --t-micro: calc(120ms * var(--anim-k)); --t-panel: calc(240ms * var(--anim-k)); --t-scene: calc(420ms * var(--anim-k)); --ease: cubic-bezier(.2,.9,.25,1.05); /* шрифтовые стеки */ --font-ui: 'Manrope', -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --font-disp: 'Cormorant', 'Didot', 'Playfair Display', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---------- мягкие глобалы ---------- */ html, body { font-family: var(--font-ui); } ::selection { background: rgba(232, 197, 105, 0.32); color: #fff; } :focus-visible { outline: 2px solid var(--hairline-strong); outline-offset: 2px; border-radius: 4px; } /* скроллбары: тонкие, золото при наведении */ * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(232,197,105,.45); border: 2px solid transparent; background-clip: padding-box; } /* ---------- утилиты ---------- */ /* табличные цифры для денег: суммы не «прыгают» */ .money, [data-money] { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); } .disp { font-family: var(--font-disp); } /* зерно: убирает «пластиковый» флэт (класс на контейнер с position:relative|absolute) */ .u-noise { position: relative; } .u-noise::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .05; border-radius: inherit; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* золотой градиентный текст (заголовки, логотип) */ .u-goldtext { background: linear-gradient(95deg, var(--gold-hi) 0%, var(--gold) 40%, var(--gold-lo) 62%, var(--gold) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .u-goldtext-animated { animation: mbGoldShift 6s ease-in-out infinite; } @keyframes mbGoldShift { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } } /* общие keyframes движения */ @keyframes mbShine { 0%, 55% { left: -60%; } 75%, 100% { left: 130%; } } @keyframes mbShimmer { 100% { transform: translateX(100%); } } @keyframes mbFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes mbFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mbPop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================= П4 · МИКРОДЕТАЛИ ========================================================= */ /* Плёночное зерно поверх интерфейса: убирает «плоскость» градиентов. Статичная SVG-текстура, 4% в overlay — дёшево и незаметно в лоб. */ body::after { content: ""; position: fixed; inset: 0; z-index: 9990; /* ниже модалок (9998+) — диалоги остаются чистыми */ pointer-events: none; opacity: .04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* Проблеск на золотых CTA (как у .mb-btn--gold в компонент-ките) */ .btn-primary, .auth-submit, .download-item.is-primary { position: relative; overflow: hidden; } .btn-primary::after, .auth-submit::after, .download-item.is-primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: mbShine 3.6s ease-in-out infinite; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .btn-primary::after, .auth-submit::after, .download-item.is-primary::after { animation: none; opacity: 0; } } /* iOS-приложение (WKWebView, viewport-fit=cover): не даём статусбару лечь на хедер, а home-индикатору — на нижнюю навигацию. В обычном браузере env() = 0. */ header { padding-top: env(safe-area-inset-top, 0px); } .bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); } /* ---------- режимы из «Настроек аккаунта» (js/prefs.js) ---------- */ /* Анимации выключены — тот же приём, что и для prefers-reduced-motion */ :root[data-anim="off"] *, :root[data-anim="off"] *::before, :root[data-anim="off"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* Focus-режим — меньше визуального шума. Гасим только декор: зерно, блики, «дыхание» фетра, бегущий отблеск на золотых кнопках. Игровые элементы (карты, фишки, подсветка комбинации, таймер хода) остаются нетронутыми. */ :root[data-focus] .u-noise::before, :root[data-focus] .table-wrap::before, :root[data-focus] .poker-table::after, :root[data-focus] .as-card-glow { opacity: 0 !important; } :root[data-focus] .poker-table-inner::after { animation: none !important; opacity: .3 !important; } :root[data-focus] .mb-btn--gold::after { animation: none !important; opacity: 0 !important; } :root[data-focus] .u-goldtext-animated { animation: none !important; } :root[data-focus] .action-panel.your-turn { animation: none !important; }