/* Переменные прибора. Числа отсюда — из pribor.md, разделы «Палитра» и «Типографика», с поправками из SYNTHESIS.md (нижняя граница читаемого текста 12 px, разрядка ≤ 0.06em). Почему всё в одном месте: цвет и размер, размазанные по трём файлам, расходятся через неделю. Здесь их можно пересчитать глазами и проверить контраст. */ :root { /* ─── безопасные отступы ─────────────────────────────────────────────── В полноэкранном режиме мини-приложение занимает весь экран, а кнопки Telegram висят ПОВЕРХ содержимого. Поэтому одного env() мало: нужны значения, которые отдаёт сам Telegram (js/tg.js их и проставляет). В обычном браузере переменные остаются нулевыми, и работает env(). */ --tg-top: 0px; --tg-bottom: 0px; --tg-left: 0px; --tg-right: 0px; --safe-top: max(var(--tg-top), env(safe-area-inset-top, 0px)); --safe-bottom: max(var(--tg-bottom), env(safe-area-inset-bottom, 0px)); --safe-left: max(var(--tg-left), env(safe-area-inset-left, 0px)); --safe-right: max(var(--tg-right), env(safe-area-inset-right, 0px)); color-scheme: dark; /* Метка сборки: сверяется с той, что в разметке (см. index.html). */ --build: "a7daa62"; /* ══ ТЁМНАЯ ТЕМА — «старые деньги» ════════════════════════════════════ База — глубокий лесной зелёный, а не нейтральный почти-чёрный: тёмное без тона выглядит дёшево, тёмное с тоном — дорого. Текст цвета слоновой кости, а не белый; свой цвет — золото, а не янтарь. Правило прежнее и нерушимое: тёплое на экране означает «это ты». Золото — единственный тёплый цвет в палитре, и все наборы цветов игроков (js/palette.js) тёплый сектор обходят. Слоновая кость формально тёплая, но её насыщенность 26% против 65% у золота: это не цвет, а оттенок белого. Светлая тема лежит ниже, в [data-theme="light"]. */ /* ══ КАНОНИЧЕСКИЕ ИМЕНА ═══════════════════════════════════════════════ Один набор имён на обе темы и на всё приложение, включая канву кольца. Значение цвета живёт РОВНО ЗДЕСЬ и больше нигде: старые имена ниже объявлены через var() от канонических, поэтому разойтись физически не могут, а компоненты не обязаны переезжать все разом. Канва читает эти же переменные через js/tokens.js — до этой правки у кольца была своя, вторая палитра, и половина её цветов оставалась сине-серой от старого оформления в обеих темах. */ --bg: #0B1310; /* фон сцены */ /* Карточка, клавиша, вкладка — на тон светлее фона. Именно НА ТОН: было #1D2E24, и это давало к фону 1.32:1 — панели читались контурами, а не поверхностями. Стало 1.53:1. Выше поднимать нельзя: цвет игрока на карточке (аватар) должен держать 3:1, а на #2A3F33 он падает до 3.22. */ --bg-elevated: #26392E; --text-primary: #EBE8DD; /* слоновая кость, 15.4:1 к фону */ --text-muted: #8E9C8D; /* 6.5:1 */ --accent-self: #D9B44A; /* «это ты»: золото. 9.5:1 */ --accent-money: #7ECFC0; /* деньги, 10.4:1 */ --timer: #E3DFD2; /* дуга отсчёта — самая длинная линия экрана */ --ring-track: var(--line-hi); /* паз, по которому едет дуга отсчёта */ --gold: #E8C46A; /* первое место. Отдельно от accent-self: «взял больше всех» и «это ты» — разные сообщения */ /* Цвета игроков — ШЕСТНАДЦАТЬ. Один индекс — один игрок весь раунд, и в обеих темах это ОДИН И ТОТ ЖЕ тон: меняется только светлота. Весь тёплый сектор (15–75°) обойдён: тёплое на экране означает «это ты», и пятно это ровно одно. Восьми не хватало с тех пор, как за столом стало по три десятка ботов: цвета выдаются без повторов, пока они есть, а дальше двое игроков садятся на один тон (владелец 2026-09-07: «добавь цветов до 16»). Первые восемь — прежние, с прежним шагом 34°: раунды, снимки и цвета столов (--room-*) от расширения набора не поехали. Новые восемь встали РОВНО В ПРОМЕЖУТКИ между ними (110, 147, 180, 212, 250, 284, 316, 350°), поэтому шаг по кругу упал с 34° до 16–18°. Одного тона на таком шаге уже мало, и различает соседей второй признак — светлота и насыщенность: значения подобраны перебором так, чтобы МИНИМАЛЬНОЕ расстояние между любыми двумя цветами набора (CIE Lab, ΔE76) не упало. Оно и не упало: 17.6 в тёмной теме и 19.2 в светлой — ровно столько же, сколько было у прежних восьми, то есть узкое место набора осталось прежним. Контраст к своему фону: 5.0–11.6 в тёмной теме, 3.0–6.3 в светлой при норме 3. Проверка — test/theme-tokens.test.js. */ --segment-0: #589A26; --segment-1: #2EB840; --segment-2: #279A78; --segment-3: #45ACD1; --segment-4: #7283DC; --segment-5: #B290E3; --segment-6: #D156D5; --segment-7: #E082AE; --segment-8: #57E33A; --segment-9: #70CC99; --segment-10: #68CDCD; --segment-11: #9AC1EE; --segment-12: #836FE7; --segment-13: #BE74DA; --segment-14: #CE52AD; --segment-15: #D05C70; /* ─── служебные экраны: свечение и медали ───────────────────────── Свечение — декоративный слой под главными числами: не текст и не контраст, а воздух вокруг цифры, как у кольца в игре. Медали второго и третьего места — только для подиума лидеров; золото первого уже есть. */ --glow-me: 0 0 18px rgba(217, 180, 74, .28); --glow-gain: 0 0 24px rgba(126, 207, 192, .22); --glow-gold: 0 0 18px rgba(232, 196, 106, .35); --medal-2: #B8C4C2; --medal-3: #C8905F; /* Цвета столов в кошельке: те же оттенки, что у сегментов кольца. Стол узнаётся по цвету полоски на билете, а не только по подписи. */ --room-micro: var(--segment-1); --room-mid: var(--segment-3); --room-whale: var(--segment-5); /* ── база ─────────────────────────────────────────────────────────── */ --ink-0: var(--bg); --ink-1: #111C17; --ink-2: #070E0B; /* выемка ТЕМНЕЕ фона, иначе это не выемка */ --line: #1C2C24; --line-hi: #2C4238; /* ── свет сцены ──────────────────────────────────────────────────── Лампа над центром кольца. Свет холодно-зелёный, почти без насыщенности: тёплая лампа спорила бы с золотом за смысл «это ты». */ --light: 196, 210, 186; /* Куда светит лампа. Раньше здесь стояло 290px — число, снятое с телефона 390×844, и на всех остальных экранах пятно света промахивалось мимо кольца: в полноэкранном режиме сцена уезжает вниз на высоту чёлки, на десктопе кольцо крупнее. Теперь координата выводится из той же раскладки, что и сама сцена: безопасная зона сверху, шапка с рядом столов (108) и половина стороны сцены. */ --light-y: calc(var(--safe-top) + 108px + var(--stage-side) / 2); /* ── поверхности и рёбра: свет строго сверху ─────────────────────── */ --surf-1-top: #1B2A21; --surf-1-mid: #17241C; --surf-1-bot: #131F18; --surf-2-top: var(--bg-elevated); --surf-2-mid: #203127; --surf-2-bot: #1A2A21; --surf-3-top: #2C4235; --surf-3-bot: #16241C; --edge-top: rgba(255, 255, 255, .055); --edge-top-2: rgba(255, 255, 255, .09); --edge-side: rgba(255, 255, 255, .018); /* Разделитель строк — это ЛИНИЯ, а не фаска, и токен у неё свой. На тёмном они совпадают: белая полоска снизу читается как свет на верхнем ребре следующей строки. На светлом фоне белая полоска не видна вовсе, и строки слипаются в сплошное полотно — там нужна настоящая линия. */ --rule: rgba(255, 255, 255, .05); --groove: #070E0B; /* Обводка панели — не краска, а СВЕТ на её ребре: девять процентов белого. Сплошной зелёный #2A3E33 работал как контур поверх фона, а не как грань поверхности, и от этого панели читались рамками. */ --key-line: rgba(255, 255, 255, .09); --plinth-top: #1E2F26; --plinth-mid: #18261F; --plinth-bot: #142019; --plinth-edge: #2C4238; --rail-top: #121D17; --rail-bot: #0C1510; /* ── структура ленты: чипы, заглушки. Это не личности, цвета им не надо ── */ --seg-1: #26352C; --seg-2: #33473A; --seg-3: #42594A; --seg-4: #576F5E; --seg-5: #6F8776; --seg-out: #1A241E; /* ── текст ────────────────────────────────────────────────────────── */ --txt: var(--text-primary); --txt-2: #AFBCAE; /* 9.5:1 */ --txt-3: var(--text-muted); --txt-dim: #98A797; /* 7.5:1 */ --txt-off: #6B7A6C; /* только выключенное: норма контраста не про него */ /* ── «это про тебя»: золото ───────────────────────────────────────── */ --me: var(--accent-self); --me-hi: #F0D584; --me-dim: #5C4A18; /* тускнеющий сегмент на канве, для текста темновато */ --me-out: #B08F32; /* тот же смысл для ТЕКСТА: выбыл, но место за тобой */ --me-grad-1: #F0D584; /* клавиша: свет сверху */ --me-grad-2: #D9B44A; --me-grad-3: #A8862E; --me-press-1: #C9A43C; --me-press-2: #B08F32; --me-press-3: #7E6420; --flash: #FFFFFF; /* ── смысловые цвета: они про то, ЧТО ПРОИСХОДИТ ──────────────────── */ --live: #6FBF8E; /* идёт, жив, пережил; 8.5:1 */ --live-dim: #5C9E77; --risk: #E08A8A; /* опасность; 7.3:1 */ --risk-dim: #C07C7C; --gain: var(--accent-money); --gain-dim: #6BAAA0; /* 7.1:1 к фону; на самой светлой точке клавиши 4.6 */ --ot: #B79ACB; /* время торгуется; 7.6:1 */ --ot-dim: #9C85B0; /* ── лицо клавиши ───────────────────────────────────────────────── Клавиши покупки и вкладки столов — один и тот же прибор, и лицо у них общее. Отдельные токены нужны потому, что на СВЕТЛОЙ теме направление обратное: карточка там светлее фона, а клавиша обязана быть ТЕМНЕЕ его, иначе белая кнопка на почти белом фоне не отделяется вовсе. Одним --bg-elevated это не выразить: у карточки и клавиши на светлом фоне разные роли. */ --key-top: #26392E; --key-mid: #203127; --key-bot: #1A2A21; /* ── подарочный билет: единственная золотая клавиша в игре ────────── Она стоит НА МЕСТЕ ряда покупки и означает не «плати», а «сыграй даром». Золото здесь не спорит с правилом «тёплое — это ты»: правило про КОЛЬЦО, где тёплое пятно ровно одно, а клавиша живёт в цоколе и говорит о том же самом игроке. Тело темнее подписи на четыре ступени — иначе золото на золоте не читается ни в одной теме. */ --bonus-top: #7A6224; --bonus-mid: #5B4917; --bonus-bot: #40330E; --bonus-line: #C9A64E; --bonus-ink: #F8E7B4; --bonus-glow: rgba(232, 196, 106, .30); --bonus-sheen: rgba(255, 246, 214, .22); /* Выбранная вкладка: на ступень светлее остальных. Янтарная планка слева говорит «это твой стол», но заметить её можно, только уже глядя на ряд; заливка отвечает на вопрос «который выбран» с одного взгляда. */ --key-on-top: #2F4537; --key-on-mid: #283C30; --key-on-bot: #223428; /* Нажатая клавиша: на тёмной теме темнеет, «вдавливается». Своя пара нужна по той же причине, что и всё остальное здесь: на светлой теме направление обратное, и брать её у поверхностей карточки нельзя — там нажатая клавиша становилась СВЕТЛЕЕ бумаги, то есть выпуклой. */ --key-press-top: #17241C; --key-press-bot: #223428; /* ── тени и фаски: одним токеном на всю стопку ──────────────────── Раньше эти четыре слоя стояли жёсткими rgba в девятнадцати местах components.css. На тёмном фоне «белое сверху, чёрное снизу» — это свет и тень; на светлом чёрное на 60% даёт грязь, а белая фаска не видна вовсе. Одним значением на тему это чинится один раз, а не в девятнадцати. */ --shadow-key: inset 0 1px 0 rgba(255, 255, 255, .075), /* фаска: клавиша ловит свет */ inset 0 -1px 0 rgba(0, 0, 0, .6), /* нижняя грань в тени */ inset 1px 0 0 rgba(255, 255, 255, .02), 0 1px 0 rgba(0, 0, 0, .6); /* контакт с панелью */ --shadow-key-press: inset 0 2px 3px rgba(0, 0, 0, .72), inset 0 -1px 0 rgba(255, 255, 255, .045); --shadow-key-off: inset 0 1px 0 rgba(255, 255, 255, .022); /* Та же клавиша без верхней фаски: её у широкой клавиши своя, янтарная. */ --shadow-key-body: inset 0 -1px 0 rgba(0, 0, 0, .6), inset 1px 0 0 rgba(255, 255, 255, .02), 0 1px 0 rgba(0, 0, 0, .6); --shadow-panel: 0 -12px 24px -16px rgba(0, 0, 0, .9); --shadow-sheet: 0 18px 40px -18px rgba(0, 0, 0, .95); --shadow-groove: inset 0 1px 2px rgba(0, 0, 0, .85), inset 0 -1px 0 rgba(255, 255, 255, .05); --shadow-contact: 0 1px 0 rgba(0, 0, 0, .65); --shadow-text: 0 1px 1px rgba(0, 0, 0, .35); /* Затенение под выдвижной панелью: снизу вверх, до прозрачного. */ --scrim: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); /* Ровное затемнение под накладкой — не градиент: под меню ставок нужен именно фон, а не растяжка. В светлой теме оно мягче: там и так светло. */ --veil: rgba(0, 0, 0, .45); /* ── канва кольца ───────────────────────────────────────────────── Канва не умеет var(), поэтому js/tokens.js читает эти переменные готовыми значениями при старте и при смене темы. Смысл имён тот же, что у базовых: где смысл совпадает, значение и берётся от базового токена — тогда перекраска темы доезжает до кольца сама. До этой правки у кольца была вторая палитра, зашитая литералами прямо в renderer.js, и она осталась сине-серой от старого оформления: в зелёной теме желоб, риски и линии были синими, а в светлой — теми же синими. */ --ring-groove: var(--ink-2); /* выемка под кольцом */ --ring-groove-hot: #16211B; /* она же на заряде перед волной */ --ring-line: var(--line); --ring-line-hi: var(--line-hi); --ring-txt: var(--txt-off); --ring-risk: var(--risk); --ring-flash: var(--flash); /* Тень под внутренней кромкой лица прибора. Вдвое слабее прежнего половинного чёрного: центр должен быть утопленным, а не вдавленным. */ --ring-lip: rgba(0, 0, 0, .25); --ring-light: var(--light); /* отражённый свет лампы, тройка RGB */ /* Засечки лимба: градиент от внешнего края к внутреннему. Мелкие вдвое ближе к фону, чем были: они задают ритм, а не сообщают числа, и на светлой теме прежняя плотность читалась как штриховка циферблата. */ --limb-minor-a: #232B26; --limb-minor-b: #0D1512; --limb-major-a: #4A5A50; --limb-major-b: #101A16; /* ── шрифты ───────────────────────────────────────────────────────── */ /* Моноширинный ТОЛЬКО для машинных кодов: псевдонимы, хэши, сиды. Там знак есть знак, и одинаковая ширина помогает сверять глазами. Для величин он вреден — разносит цифры так, что «9.4» читается как вывод терминала. */ --font-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Inter: величины, подписи, весь интерфейс. Взят за собранные, уверенные цифры и за то, что у него есть настоящая кириллица и табличные цифры. */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-num: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Трекинг крупных чисел отрицательный: на большом кегле стандартные пробелы между цифрами разваливают число на отдельные знаки. Чем крупнее — тем плотнее. */ --tr-hero: -0.035em; --tr-big: -0.02em; --tr-cap: 0.06em; /* Размеры. Ниже 12 px не опускается ничего, что нужно прочитать (SYNTHESIS). */ --fs-cap: 12px; /* подписи-заголовки, uppercase */ --fs-sm: 12px; /* мелкие числа: цена под кнопкой, остаток окна */ --fs-md: 13px; /* строки ленты, баланс, хэши */ --fs-lg: 18px; /* числа приборной строки */ --ls-cap: 0.06em; /* разрядка подписей: больше SYNTHESIS не разрешает */ /* ── геометрия ────────────────────────────────────────────────────── */ --radius: 3px; /* больше трёх пикселей не скругляется ничего */ --pad-x: 20px; /* поля колонки */ /* Ритм даёт не кратность четырём, а то, что ступеней немного и они РАЗНЫЕ. Пять уровней группировки: внутри элемента, соседи в группе, поле группы, между группами, между секциями. Прежний --gap: 16 стоял между всем сразу и потому не сообщал о группировке ничего; 16 из проекта удалено целиком — оно ровно посередине между --s3 и --s4 и не читается ни как то, ни как другое. */ --s1: 4px; /* внутри элемента: подпись прилипает к своему значению */ --s2: 8px; /* соседи в группе */ --s3: 12px; /* поле группы */ --s4: 20px; /* между группами */ --s5: 32px; /* между секциями */ --col-max: 420px; --hdr-h: 44px; --row-h: 32px; /* строка ленты участников, кратна вертикальному ритму 8 */ /* Сторона сцены повторяет ringMetrics() из ring/layout.js: если CSS и геометрия разойдутся, рендерер сожмёт кольцо и лимб перестанет попадать в кадр. +24 px — запас под лимб, визир и ряд пломб, которые рисуются вне R_out. */ /* Сколько высоты занимает всё, кроме кольца. Число не на глаз, а сложено из замеров стенда (tools/visual/fitcheck.mjs), сверху вниз: 45 шапка 51 ряд комнат в две строки (43) + поле над ним (8) 12 поле над сценой 24 --stage-pad: запас под лимб и визир, он тоже часть габарита сцены ← и его-то в прежних 270 не было, отчего экран не сходился 42 приборная строка в одну строку (30) + поле группы (12) 11 микрошкала (3) + поле (8) 60 ряд клавиш покупки (52) + поле (8) 28 строка состояния (20) + поле (8) 12 нижнее поле body Итого 285. */ --chrome-h: 285px; /* Нижний причал: микрошкала, клавиши покупки и строка состояния вместе с их полями (11 + 60 + 28 + 12 нижнего поля body). Выдвижная панель раунда встаёт НАД ним, а не поверх: смотреть список участников и не иметь возможности купить билет — это отнятый ход. */ --dock-h: 111px; /* Размер кольца выводится из того, сколько высоты РЕАЛЬНО осталось. Три причины считать именно так: — dvh вместо vh: на мобильных vh считается по высоте с раскрытой панелью браузера и не меняется, когда та прячется; — вычитаем безопасные зоны: в полноэкранном режиме Telegram они съедают под 130 пикселей, и кольцо, посчитанное без них, выталкивает кнопки покупки за сгиб; — вычитаем высоту остального интерфейса: кольцо красивое, но бесполезное, если участвовать в раунде нечем. Одна формула заменяет полдюжины частных правил под каждый размер экрана. */ /* Верхний предел 380 держится в согласии с ringMetrics() из ring/layout.js: разойдутся — рендерер сожмёт кольцо и вокруг него останется пустое поле. */ --stage-side: clamp( 150px, min(100vw - 40px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--chrome-h))), 380px ); --stage-pad: 24px; /* ── время и кривые ───────────────────────────────────────────────── */ --t-fast: 120ms; --t-mid: 220ms; --t-slow: 380ms; --ease-out: cubic-bezier(.2, .8, .3, 1); --ease-num: cubic-bezier(.16, .9, .28, 1); /* перекат чисел: без перелёта */ --ease-pop: cubic-bezier(.2, 1.5, .4, 1); /* появление полки, с перелётом */ } /* ══ СВЕТЛАЯ ТЕМА — «бумага на свету» ══════════════════════════════════════ Переопределяются ТОЛЬКО цвета: размеры, шрифты и геометрия общие, иначе две темы разъедутся по вёрстке и придётся чинить каждую отдельно. ОДНА СЕМЬЯ С ТЁМНОЙ. Прежняя светлая была холодной лавандово-серой: фон #F6F4FF, текст сине-фиолетовый, лампа сиреневая. Рядом с тёмной зелёной это выглядело как два разных продукта, а не как две темы одного. Фон подобран перебором, а не на глаз: из 63 цветов с тоном 60..130°, насыщенностью 6..16% и светлотой 94..97% взят самый насыщенный на тёплом краю — #F3F4F0, тон 75°. Красного и зелёного почти поровну, синего меньше: лист тёплый, но с зелёным подтоном. Текст построен от тона ТЁМНОЙ темы: её фон #0B1310 имеет тон 157°, и основной текст светлой — тот же 157°, только светлота перевёрнута. Все 33 фоновых и линейных токена лежат в 72..103°; сиреневых не осталось ни одного. Свет по-прежнему строго сверху, но на светлом фоне это значит другое: верхнее ребро — почти белое, нижнее — тень. Поэтому рёбра здесь не просто другие числа, а другая природа: сверху свет, снизу тьма. Чернила теней тоже зелёно-чёрные rgb(18,33,27), а не фиолетовые. Акценты темнее, чем в тёмной теме, и это не вкус: #3DDC97 на белом даёт 1.7:1 и нечитаем. Каждый цвет ниже проверен счётом: основной текст 15.0:1, второй уровень 8.6:1, приглушённый 6.6:1, подпись 5.6:1 — при нормах 12 / 7 / 6 / 4.5. «Это ты» осталось по-настоящему тёплым: бронзовая охра #9E590A, тон 65° по LCh и 32° по HSL — оба внутри разрешённого сектора 15..75°. */ [data-theme="light"] { color-scheme: light; /* Канонические имена — те же, что в тёмной. Меняются только значения: один индекс игрока = один тон в обеих темах, разная светлота. */ --bg: #F3F4F0; --bg-elevated: #FBFDF7; --text-primary: #14211C; /* 15.0:1 */ --text-muted: #4F675A; /* 5.6:1 */ --accent-self: #9E590A; /* 4.9:1 — золото для ТЕКСТА на светлом */ --accent-money: #08776B; /* 4.9:1 */ --timer: #3C5548; --ring-track: var(--line-hi); --gold: #876806; /* первое место на светлом: 4.7:1 */ --segment-0: #457E1A; --segment-1: #1F9A30; --segment-2: #1A8061; --segment-3: #2590B6; --segment-4: #4F67DB; --segment-5: #9C6EE1; --segment-6: #BE28C4; --segment-7: #DC5293; --segment-8: #2D6022; --segment-9: #19904F; --segment-10: #256565; --segment-11: #2E5581; --segment-12: #462CC7; --segment-13: #8831A8; --segment-14: #B23290; --segment-15: #B03D50; --glow-me: 0 0 14px rgba(135, 104, 6, .18); --glow-gain: 0 0 18px rgba(31, 122, 106, .14); --glow-gold: 0 0 14px rgba(135, 104, 6, .22); --medal-2: #7E8A88; --medal-3: #9A6535; --room-micro: var(--segment-1); --room-mid: var(--segment-3); --room-whale: var(--segment-5); /* Тени: на светлом фоне другая физика. Чёрное на 60% даёт грязь, а белая фаска не видна вовсе — сверху почти белый свет, снизу мягкая тень того же сиреневого семейства, что и линии. */ --shadow-key: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(18, 33, 27, .10), inset 1px 0 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(18, 33, 27, .07); --shadow-key-press: inset 0 2px 4px rgba(18, 33, 27, .16), inset 0 -1px 0 rgba(255, 255, 255, .8); --shadow-key-off: inset 0 1px 0 rgba(255, 255, 255, .7); --shadow-key-body: inset 0 -1px 0 rgba(18, 33, 27, .10), inset 1px 0 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(18, 33, 27, .07); --shadow-panel: 0 -12px 24px -16px rgba(18, 33, 27, .22); --shadow-sheet: 0 18px 40px -18px rgba(18, 33, 27, .28); --shadow-groove: inset 0 1px 2px rgba(18, 33, 27, .14), inset 0 -1px 0 rgba(255, 255, 255, .9); --shadow-contact: 0 1px 0 rgba(18, 33, 27, .08); --shadow-text: 0 1px 1px rgba(255, 255, 255, .55); --scrim: linear-gradient(to top, rgba(18, 33, 27, .16), rgba(18, 33, 27, 0)); --veil: rgba(18, 33, 27, .35); /* Лицо клавиши на светлом ТЕМНЕЕ фона (#F3F4F0), а не светлее: белая кнопка на почти белом фоне не отделяется ни обводкой, ни тенью. */ --key-top: #EDEFE7; --key-mid: #E7EAE0; --key-bot: #E0E4D8; /* Золото на светлом фоне ведёт себя наоборот: тело светлое и насыщенное, подпись — тёмная. Светлая подпись на светлом золоте не читается. */ --bonus-top: #F6DE9B; --bonus-mid: #EAC873; --bonus-bot: #D9B053; --bonus-line: #A87C1C; --bonus-ink: #4A3405; --bonus-glow: rgba(168, 124, 28, .26); --bonus-sheen: rgba(255, 255, 255, .42); /* А выбранная вкладка, наоборот, светлее всех — почти белая. */ --key-on-top: #FFFFFF; --key-on-mid: #FBFCF7; --key-on-bot: #F4F6EF; /* Нажатая — ещё темнее отпущенной: палец вдавливает её в лист. */ --key-press-top: #D9DDD0; --key-press-bot: #E7EAE0; --ring-lip: rgba(18, 33, 27, .16); --ring-groove-hot: #E3E8DA; --limb-minor-a: #E0E5D9; --limb-minor-b: #EFF2E8; --limb-major-a: #A6B29A; --limb-major-b: #E5EADC; --ink-0: var(--bg); --ink-1: #F8FAF3; --ink-2: #E7EBDF; /* выемка на светлом ТЕМНЕЕ фона — как и на тёмном */ --line: #DCE1D3; --line-hi: #C5CDBA; /* Лампа сиреневая и заметная: белым светом на белом фоне не посветишь. */ --light: 94, 137, 88; --surf-1-top: #FAFCF6; --surf-1-mid: #F6F8F1; --surf-1-bot: #EDF0E6; --surf-2-top: var(--bg-elevated); --surf-2-mid: #F4F6EE; --surf-2-bot: #EAEDE2; --surf-3-top: #FDFEFA; --surf-3-bot: #EBEEE4; --edge-top: rgba(255, 255, 255, .95); --edge-top-2: rgba(255, 255, 255, 1); --edge-side: rgba(18, 33, 27, .05); --rule: #DADFD1; --groove: #D9DECF; --key-line: #CCD4C1; --plinth-top: #FCFDF8; --plinth-mid: #F6F8F1; --plinth-bot: #ECEFE5; --plinth-edge: #C5CDBA; --rail-top: #FDFEFA; --rail-bot: #F1F3EB; --seg-1: #D2D9CD; --seg-2: #B9C4B3; --seg-3: #9DAA95; --seg-4: #7F9078; --seg-5: #66755F; --seg-out: #E1E6DA; --txt: var(--text-primary); --txt-2: #354A40; /* 8.6:1 */ --txt-3: var(--text-muted); --txt-dim: #445C50; /* 6.6:1 */ --txt-off: #759181; /* 3.1:1 — только выключенное */ --me: var(--accent-self); --me-hi: #B67A12; --me-dim: #DCB279; --me-out: #7B4508; --me-grad-1: #FFC63A; /* заливка клавиши остаётся ярким янтарём: это */ --me-grad-2: #FFB000; /* большое пятно, а не текст, и оно обязано */ --me-grad-3: #D18E00; /* остаться тем же цветом в обеих темах */ --me-press-1: #E0A81F; --me-press-2: #C98D0B; --me-press-3: #9C6D00; --flash: #111D18; /* «пересвет» на светлом — это наоборот темнота */ --live: #0C7538; /* 5.3:1 */ --live-dim: #0B6031; /* 7.0:1 */ --risk: #C9214B; /* 5.0:1 */ --risk-dim: #A11A3C; /* 7.0:1 */ --gain: var(--accent-money); --gain-dim: #075D52; /* 7.1:1 */ --ot: #775291; /* 5.6:1 */ --ot-dim: #604077; /* 7.6:1 */ } @media (min-width: 600px) { :root { /* На десктопе кольцо не растёт больше 380: раздутое кольцо теряет плотность. */ --chrome-h: 300px; --stage-side: clamp(200px, min(100vw - 40px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--chrome-h))), 404px); --pad-x: 24px; } } /* Большое окно — ноутбук во весь экран, монитор, настольный Telegram. Кольцо 380 посреди окна 1440×900 выглядело мелким прибором в пустом зале: одна ступень крупнее (460 + 24 запаса = 484), и только когда хватает ОБОИХ измерений. Ступень, а не плавный рост: рендерер держит ту же величину в ringMetrics() (ring/layout.js), и у ступени рассинхрон невозможен по построению — оба места сравнивают окно с одними и теми же 1280×880. */ @media (min-width: 1280px) and (min-height: 880px) { :root { --stage-side: 484px; } } /* Табличные цифры на всём, что число. Без этого таймер дёргается по ширине каждый кадр, а колонки ленты перестают быть колонками. Шрифт — не моноширинный: табличные цифры уже дают одинаковую ширину, а моноширинный вдобавок разносит их пробелами и превращает величину в вывод терминала. */ .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; /* Явный трекинг, а не ноль: величина не должна наследовать разрядку от подписи-предка, но и стандартные пробелы между цифрами на крупном кегле разваливают число. Ноль тут стоял раньше и молча убивал заданный трекинг — заявленная типографика не применялась нигде. */ letter-spacing: var(--tr-big); } /* Единственное правило видимости во всём проекте. !important и последнее слово — потому что в прошлой версии .hidden перебивалось порядком объявления, и панели, которые считались скрытыми, видели все (дефект 9). Дублируется в конце components.css: там оно оказывается последним по каскаду. */ .hidden, [hidden] { display: none !important; } /* prefers-reduced-motion: переходов и анимаций нет вообще. Перекат чисел этим не отменяется — он делается в JS, потому что это информация, а не украшение. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } }