/* styles.css — «Заходи», приложение гостя. Шесть тем заведения (acid / white / neon / gold / industrial / emerald) — это только набор переменных. Отдельных копий вёрстки нет и быть не должно. */ /* ─────────────── Шрифт индустриальной темы ─────────────── Oswald, SIL Open Font License 1.1, файлы скачаны с fonts.gstatic.com и лежат в /fonts. Лицензия рядом: /fonts/OFL.txt. Почему он: узкий плакатный гротеск с настоящей кириллицей — 100 кодовых позиций в кириллическом подмножестве, проверено по таблице cmap. Разложен на два файла по unicode-range: кириллицу качаем всегда, латиницу — только если на экране встретится латиница. Файл переменный (ось wght 400-700), поэтому одна запись на весь диапазон. font-display:swap — пока файл едет, текст виден системным шрифтом. */ @font-face{ font-family:"Oswald"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/fonts/oswald-cyrillic.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:"Oswald"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/fonts/oswald-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; } /* ─────────────── Тема по умолчанию: acid ─────────────── «По умолчанию» тут значит «если у заведения тема неизвестна или это acid». Цветом первого кадра эта тема больше не работает: в index.html на стоит data-theme="emerald", иначе до ответа сервера экран заливался оливковым и потом перекрашивался. */ :root{ /* Метка темы. По ней applyTheme в app.js проверяет, что тема не просто разрешена сервером, а действительно описана здесь. Не совпало — экран красится основной темой, а не переменными :root. */ --theme-name:"acid"; /* Пять тем из шести тёмные, поэтому схема тёмная. Раньше её объявлял только мета-тег значением "light dark", и на светлом телефоне браузер считал страницу светлой: белый холст под нашим фоном и светлая полоса прокрутки. */ color-scheme: dark; --c-bg:#0d0f0b; --c-card:#171a13; --c-card-2:#1f2418; --c-text:#eef4e2; --c-dim:#98a487; --c-line:#262b1e; --c-accent:#b6ff2e; --c-accent-2:#7ee81a; --c-on-accent:#0d1400; --c-glow:rgba(182,255,46,.30); /* Акцент буквами. В тёмных темах это тот же цвет, но в светлой теме кнопочный акцент слишком светлый для текста — там переменные расходятся. */ --c-accent-txt: var(--c-accent); --wheel-bg:#0a0c07; --wheel-card:#171c11; --wheel-edge:#2b331d; --wheel-txt:#eef4e2; --wheel-mark:#b6ff2e; /* Цвета редкости тёмных тем. Владелец задал прямо: обычный — синий, редкий — красный, очень редкий — фиолетовый. Легендарный остаётся золотым. Светлая тема переопределяет их у себя: на белом эти же цвета не читаются. */ --r-common:#5aa9ff; --r-rare:#ff7a6b; --r-epic:#c08bff; --r-legend:#ffc44d; --r-legend-ink:#221700; /* буквы на золотой плашке «Гарантированный приз» */ /* Уровень гостя. Раньше цвета стояли прямо в правиле .chip и были рассчитаны только на тёмный фон — на белой карточке серебро давало 1,3:1. */ --tier-silver:#cfd6e2; --tier-gold:#ffcf5c; --tier-bronze:#d09a6b; /* ── Овальная панель вкладок и монеты ── Пилюля всегда противоположна фону: на пяти тёмных темах она светлая, на светлой — тёмная. Иначе на белом экране светлая пилюля даёт 1,14:1 и панель перестаёт быть отдельным предметом. Монетный цвет свой, а не акцент темы: полос прогресса в приложении две, и «до товара» обязана отличаться от «до крупного приза». */ --tabbar-bg:#e7f0d9; /* светлая пилюля: 16,38:1 к фону */ --tabbar-edge:rgba(0,0,0,.10); --tabbar-ink:#2c3720; /* спящая вкладка — 10,67:1 на пилюле */ --tabbar-on:#11150d; /* активная капсула */ --tabbar-on-ink:#b6ff2e; /* 15,25:1 на капсуле */ --c-coin:#ffd23f; /* заливка полосы, ярлычок, плашка цены */ --c-coin-2:#eda818; /* тёмный край градиента монеты */ --c-coin-ink:#2a1c00; /* цифры по монетному — 11,50:1 */ --c-coin-txt:#ffd23f; /* монетный буквами на карточке — 12,18:1 */ --c-rail:#0d0f0b; /* прорезь монетной полосы */ --c-rail-edge:rgba(0,0,0,.35); /* Высота. viewport-stable-height не прыгает при открытой клавиатуре, в отличие от viewport-height — прямое предупреждение в документации Telegram. */ --app-h: var(--tg-viewport-stable-height, 100dvh); /* Низ. env() внутри вебвью Telegram на iOS часто равен 0, а телеграмные инсеты появились только с Bot API 8.0 — поэтому нужен жёсткий минимум. 22px: полоса жестов iPhone — 34px, при нуле от системы вкладки уезжали под неё. */ --pad-b: max( var(--tg-content-safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px), 22px ); --pad-t: max( var(--tg-content-safe-area-inset-top, 0px), env(safe-area-inset-top, 0px), 0px ); } @supports not (height: 100dvh){ :root{ --app-h: var(--tg-viewport-stable-height, 100vh); } } /* ─────────────── Тема: белая (она же системная) ─────────────── Здесь телеграмная переменная стоит первой, а наш цвет — фолбэком: внутри Telegram страница подхватит тему клиента, в браузере — наши значения. Отсюда и второй, тёмный набор ниже: раз цвета берутся у клиента, тема обязана уметь быть тёмной — иначе при тёмном Telegram фон уедет в тёмный, а наши не-телеграмные цвета (лента, редкость, линии) останутся светлыми. По-хорошему тема так и должна называться — «системная», а не «белая». */ [data-theme="white"]{ --theme-name:"white"; /* Единственная тема, которая умеет быть светлой, — ей схему возвращаем */ color-scheme: light dark; --c-bg: var(--tg-theme-bg-color, #ffffff); --c-card: var(--tg-theme-secondary-bg-color, #f2f3f7); --c-card-2: var(--tg-theme-secondary-bg-color, #e9ebf1); --c-text: var(--tg-theme-text-color, #14161b); --c-dim: var(--tg-theme-hint-color, #5a606b); /* было #767c88 — 4,19:1 на белом */ --c-line: rgba(0,0,0,.10); --c-accent: var(--tg-theme-button-color, #1a56d6); --c-accent-2:var(--tg-theme-button-color, #1447b8); --c-on-accent: var(--tg-theme-button-text-color, #ffffff); /* Акцент буквами берём свой, а не телеграмный: голубая кнопочная синь на белом даёт 3-4:1, а этим цветом набраны 11-14px. */ --c-accent-txt:#1a56d6; --c-glow:rgba(26,86,214,.20); /* Светлая тема: пилюля тёмная. Светлая на белом неотличима от страницы. */ --tabbar-bg:#1e2534; /* 15,33:1 к белому фону */ --tabbar-edge:rgba(255,255,255,.10); --tabbar-ink:#c9d1de; /* 9,97:1 на пилюле */ --tabbar-on:#ffffff; /* активная капсула — белая, текст навыворот */ --tabbar-on-ink:#14161b; /* 18,10:1 */ /* Монета тут тёмная: светлое золото на светлой прорези давало 1,86:1 */ --c-coin:#8a5a00; --c-coin-2:#6f4800; --c-coin-ink:#ffffff; /* 5,93:1 */ --c-coin-txt:#8a5a00; /* 5,35:1 на карточке */ --c-rail:#e4e7ee; --c-rail-edge:rgba(0,0,0,.14); /* Редкость на белом фоне: те же цвета, но тёмные версии — 4,9-6,0:1 */ --r-common:#1f5fd8; --r-rare:#c2352b; --r-epic:#7a2fd0; --r-legend:#8a5a00; --r-legend-ink:#ffffff; --tier-silver:#5a616e; --tier-gold:#7d5f14; --tier-bronze:#8a5330; --wheel-bg:#eceef4; --wheel-card:#ffffff; --wheel-edge:#d5d9e3; --wheel-txt:#14161b; --wheel-mark:#1a56d6; } /* Тёмная системная тема для браузерной двери. Внутри Telegram --tg-theme-* перебьют это. Переопределяем ВСЁ, что зависит от светлого фона, — иначе акцент и редкость остаются тёмными на тёмном. */ @media (prefers-color-scheme: dark){ [data-theme="white"]{ --c-bg: var(--tg-theme-bg-color, #17212b); --c-card: var(--tg-theme-secondary-bg-color, #232e3c); --c-card-2: var(--tg-theme-secondary-bg-color, #2b3948); --c-text: var(--tg-theme-text-color, #f3f5f7); --c-dim: var(--tg-theme-hint-color, #9aa6b5); /* было #8794a3 — 3,8:1 на карточке */ --c-line:rgba(255,255,255,.10); --c-accent: var(--tg-theme-button-color, #6aa8ff); --c-accent-2:var(--tg-theme-button-color, #3f86e8); --c-on-accent: var(--tg-theme-button-text-color, #0b1220); --c-accent-txt:#6aa8ff; --c-glow:rgba(106,168,255,.28); /* Фон снова тёмный — пилюля возвращается к светлой */ --tabbar-bg:#e4eaf2; --tabbar-edge:rgba(0,0,0,.12); --tabbar-ink:#39414f; /* 8,49:1 */ --tabbar-on:#121a26; --tabbar-on-ink:#6aa8ff; /* 7,21:1 */ --c-coin:#ffc04d; --c-coin-2:#e39c18; --c-coin-ink:#2a1c00; /* 10,20:1 */ --c-coin-txt:#ffc04d; /* 8,44:1 на карточке */ --c-rail:#1a2430; --c-rail-edge:rgba(0,0,0,.5); /* Карточка тут светлее прочих тёмных тем, поэтому цвета редкости на полтона ярче базовых. Смыслы те же: синий, красный, фиолетовый, золото. */ --r-common:#7cbcff; --r-rare:#ff8f80; --r-epic:#cc9dff; --r-legend:#ffc04d; --r-legend-ink:#221700; --tier-silver:#cfd6e2; --tier-gold:#ffcf5c; --tier-bronze:#d09a6b; --wheel-bg:#141d26; --wheel-card:#232e3c; --wheel-edge:#33414f; --wheel-txt:#f3f5f7; --wheel-mark:#6aa8ff; } } /* ─────────────── Тема: неон ─────────────── */ [data-theme="neon"]{ --theme-name:"neon"; --c-bg:#0d0712; --c-card:#1a1024; --c-card-2:#22152f; --c-text:#fbeaff; --c-dim:#a48cb8; --c-line:#2c1c3c; --c-accent:#ff2e97; --c-accent-2:#b44dff; /* Белые буквы на кислотно-розовом дают 3,45:1 — кнопка и плашка не читались. Тёмные чернила по яркому акценту, как в темах acid и gold: 4,9-5,5:1. */ --c-on-accent:#2a0016; --c-glow:rgba(255,46,151,.32); --tabbar-bg:#f0e4f6; --tabbar-edge:rgba(0,0,0,.10); --tabbar-ink:#402649; /* 10,77:1 */ --tabbar-on:#1a0a24; --tabbar-on-ink:#ff2e97; /* 5,47:1 */ --c-coin:#ffcf4d; --c-coin-2:#f0a92e; --c-coin-ink:#2a1c00; /* 11,30:1 */ --c-coin-txt:#ffcf4d; /* 12,49:1 на карточке */ --c-rail:#12081a; --c-rail-edge:rgba(0,0,0,.45); --wheel-bg:#0a0510; --wheel-card:#1c1128; --wheel-edge:#37214a; --wheel-txt:#fbeaff; --wheel-mark:#ff2e97; } /* ─────────────── Тема: золото ─────────────── */ [data-theme="gold"]{ --theme-name:"gold"; --c-bg:#12100a; --c-card:#1e1a11; --c-card-2:#272115; --c-text:#fff4dd; --c-dim:#b0a184; --c-line:#332c1b; --c-accent:#f0c04a; --c-accent-2:#d99b23; --c-on-accent:#241a00; --c-glow:rgba(240,192,74,.30); --tabbar-bg:#f4e9d0; --tabbar-edge:rgba(0,0,0,.10); --tabbar-ink:#3d3116; /* 10,56:1 */ --tabbar-on:#191308; --tabbar-on-ink:#f0c04a; /* 10,85:1 */ /* Монета светлее акцента темы (1,23:1 между ними) — в золотой теме две полосы разводит не цвет, а форма: высота, насечки, ярлычок, замок. */ --c-coin:#ffd76b; --c-coin-2:#e8ab2c; --c-coin-ink:#241a00; /* 12,42:1 */ --c-coin-txt:#ffd76b; /* 12,54:1 на карточке */ --c-rail:#0f0d07; --c-rail-edge:rgba(0,0,0,.45); --wheel-bg:#0e0c07; --wheel-card:#1f1a11; --wheel-edge:#3a301c; --wheel-txt:#fff4dd; --wheel-mark:#f0c04a; } /* ─────────────── Тема: индустриальная ─────────────── Промышленный цех: бетон, стальные пластины на заклёпках, жёлтый предупреждающий акцент. Все переменные объявлены заново, ничего не наследуется от acid. Ниже своя пачка --i-* — это не цвета темы, а заготовки фактуры (пластина, заклёпка, зерно, полоса опасности), чтобы не переписывать их у каждого блока. */ [data-theme="industrial"]{ --theme-name:"industrial"; --c-bg:#1c1c1c; --c-card:#2a2a28; --c-card-2:#212120; --c-text:#ecebe6; --c-dim:#b0aea6; --c-line:#4d4d47; --c-accent:#ffc21a; --c-accent-2:#ef8f16; --c-on-accent:#191204; --c-accent-txt:#ffc21a; --c-glow:rgba(255,194,26,.30); --tabbar-bg:#dcdbd4; /* светлая стальная пластина — 12,28:1 к бетону */ --tabbar-edge:rgba(0,0,0,.35); --tabbar-ink:#2c2c28; /* 10,10:1 */ --tabbar-on:#1b1b1a; --tabbar-on-ink:#ffc21a; /* 10,66:1 */ --c-coin:#ffd35e; --c-coin-2:#e8a012; --c-coin-ink:#191204; /* 13,04:1 */ --c-coin-txt:#ffd35e; /* 10,09:1 на пластине */ --c-rail:#131312; --c-rail-edge:#3c3c37; /* Редкость под тёмный металл. Легендарная НЕ жёлтая намеренно: жёлтый в этой теме занят кнопками и активной карточкой, и золотая редкость с ними спорила. Раскалённый оранжевый читается как «горячий металл» и в стиль попадает. */ --r-common:#b3b1a8; --r-rare:#6ab6ff; --r-epic:#c49aff; --r-legend:#ff8a52; --r-legend-ink:#2a0d00; --tier-silver:#cfd0d6; --tier-gold:#ffd066; --tier-bronze:#dda173; --wheel-bg:#151514; --wheel-card:#2a2a28; --wheel-edge:#55554e; --wheel-txt:#ecebe6; --wheel-mark:#ffc21a; /* Шрифт. Запасные — тоже узкие; если не нашлось ни одного, спасают капс и разрядка, они прописаны отдельно у каждого заголовка. */ --f-poster:"Oswald","PT Sans Narrow","Roboto Condensed","Arial Narrow", system-ui,-apple-system,"Segoe UI",Arial,sans-serif; /* Пластина и её раскалённый вариант */ --i-plate:linear-gradient(180deg,#363634 0%,#2a2a28 46%,#1f1f1e 100%); --i-plate-hot:linear-gradient(180deg,#ffd24a 0%,#ffc21a 44%,#ef8f16 100%); /* Заклёпка. Центр круга поднят к 42% и радиус меряется до ближней стороны — из-за этого блик садится выше центра, а тёмный ободок снизу шире. Так плоское пятно читается выпуклым. Разметки не требует: это слой фона. */ --i-riv:radial-gradient(circle closest-side at 50% 42%, rgba(255,255,255,.82) 0%,rgba(178,178,168,.62) 34%, rgba(58,58,52,.92) 66%,rgba(0,0,0,.70) 88%,rgba(0,0,0,0) 100%); --i-riv-hot:radial-gradient(circle closest-side at 50% 42%, rgba(255,255,255,.92) 0%,rgba(214,164,40,.75) 34%, rgba(96,60,6,.92) 66%,rgba(28,17,0,.72) 88%,rgba(0,0,0,0) 100%); /* Зерно бетона и металла: SVG-шум в data-URI, никаких файлов картинок. Крупная версия для фона, слабая — для пластин, чтобы не мешать читать. */ --i-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)' opacity='.24'/%3E%3C/svg%3E"); --i-grain-lite:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)' opacity='.11'/%3E%3C/svg%3E"); /* Предупреждающая полоса. Старая запись градиента (цвет, потом позиция), а не двойные позиции — работает в любом вебвью. */ --i-hazard:repeating-linear-gradient(45deg, #f2b705,#f2b705 9px,#191919 9px,#191919 18px); /* Внутренние тени пластины: сверху светлая, снизу тёмная */ --i-emboss:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.55); /* Раскладка шести слоёв фона пластины: 4 заклёпки, зерно, металл. Большая — для широких блоков, малая — где содержимое подходит близко к углам. */ --i-rl-size:8px 8px,8px 8px,8px 8px,8px 8px,150px 150px,auto; --i-rl-pos:7px 7px,calc(100% - 7px) 7px,7px calc(100% - 7px),calc(100% - 7px) calc(100% - 7px),0 0,0 0; --i-rs-size:6px 6px,6px 6px,6px 6px,6px 6px,150px 150px,auto; --i-rs-pos:5px 5px,calc(100% - 5px) 5px,5px calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),0 0,0 0; --i-r-rep:no-repeat,no-repeat,no-repeat,no-repeat,repeat,no-repeat; } /* ─────────────── Тема: изумруд ─────────────── Два цвета заданы владельцем: Emerald Ink #064E3B и Champagne #F8E7C9. Всё остальное — их оттенки: фон темнее изумруда (иначе карточки на нём тонут), плиты — сам изумруд светлее и темнее, рамки и разделители — кремовый с малой непрозрачностью, а не отдельный серый. Посторонний цвет разрешён только редкости: четыре ступени обязаны различаться с одного взгляда. Объявлено всё, что объявляет :root, — от acid не наследуется ничего. */ [data-theme="emerald"]{ --theme-name:"emerald"; --c-bg:#021a13; /* темнее #064E3B: карточка на нём даёт 1,86:1 */ --c-card:#064e3b; /* Emerald Ink — карточки и пластины */ --c-card-2:#033a2b; /* утопленная плита: прорезь шкалы, отсчёт, поле ссылки */ --c-text:#f8e7c9; /* Champagne — 7,99:1 на карточке, 14,89:1 на фоне */ --c-dim:#c9bfa6; /* приглушённый кремовый — 5,32:1 на карточке */ /* Линия кремовая, а не зелёная: разделитель обязан быть из той же пары. 18% поверх карточки — 1,54:1, край видно и он не спорит с текстом. */ --c-line:rgba(248,231,201,.18); --c-accent:#f8e7c9; /* кнопка «Крутить» — самое светлое пятно экрана */ --c-accent-2:#e8d2a4; /* тёмный край градиента кнопки */ --c-on-accent:#05372a; /* буквы на креме: 8,94:1 даже по тёмному краю */ /* Акцент буквами — тот же крем. Отличие от подписей даёт не оттенок, а яркость: 5,32:1 у подписи против 7,99:1 у акцента, плюс вес шрифта. */ --c-accent-txt:#f8e7c9; --c-glow:rgba(248,231,201,.30); /* Пилюля кремовая, но на полтона глуше кнопки «Крутить» (#f8e7c9): второе такое же яркое пятно отобрало бы у кнопки роль главного. */ --tabbar-bg:#ecdcbc; /* 13,39:1 к фону */ --tabbar-edge:rgba(2,26,19,.22); --tabbar-ink:#05372a; /* 9,79:1 на пилюле */ --tabbar-on:#04261c; /* активная капсула — глубокий изумруд */ --tabbar-on-ink:#f8e7c9; /* 13,29:1 */ /* Монета золотая, кнопка и полоса «до крупного приза» кремовые — две полосы в приложении не спутать даже боковым зрением. */ --c-coin:#ffc24d; --c-coin-2:#e09a24; --c-coin-ink:#05372a; /* 8,24:1 */ --c-coin-txt:#ffc24d; /* 6,05:1 на карточке */ --c-rail:#021a13; --c-rail-edge:rgba(0,0,0,.5); /* Редкость. Лестница «дешевле — дороже» читается по насыщенности: блёклый шалфей → холодная небесная → фиолетовая → горячее золото. Золото намеренно насыщенное: с кремовой кнопкой его не спутать, а кремовым легендарную делать нельзя — она бы слилась с кнопкой. */ /* Владелец задал цвета сам: обычный синий, редкий красный, очень редкий фиолетовый. Рамка карточки красится ими — три соседних приза перестают сливаться, даже когда это две скидки подряд. */ --r-common:#5aa9ff; /* 3,21:1 на карточке */ --r-rare:#ff7a6b; /* 3,09:1 */ --r-epic:#c08bff; /* 3,14:1 */ --r-legend:#ffc24d; /* 6,05:1 */ --r-legend-ink:#05372a; /* буквы на золотой плашке — 8,24:1 */ /* Уровень гостя. Это металлы, а не цвета темы: серебро сведено в зелень, чтобы не выпадать из палитры, золото и бронза остались тёплыми. */ --tier-silver:#d6e0da; --tier-gold:#ffcf5c; --tier-bronze:#dfa97c; --wheel-bg:#01120d; --wheel-card:#064e3b; --wheel-edge:#2c6852; /* тёплый край карточки, тот же тон, что и линии */ --wheel-txt:#f8e7c9; --wheel-mark:#f8e7c9; /* указатель кремовый: он ведёт взгляд в центр ленты */ } /* ══════════════════════════════════════════════════════════════════════ СЕМЬ ТЕМ ВЛАДЕЛЬЦА Фон, текст и акцент каждой — из D:/ai_project/ПАЛИТРЫ_ШАБЛОН.md, менять их нельзя. Всё остальное (плиты, линии, монета, редкость, лента) подобрано под этот фон и посчитано по формуле WCAG. Каждая тема объявляет ВЕСЬ набор переменных — те же 36, что объявляет :root. Ничего не наследуется: пропущенная переменная взяла бы оливковый цвет темы acid и дала бы чужеродное пятно. Четыре темы светлые (butter, acidg, mint, orange). Приложение построено на тёмном фоне, поэтому у светлых расходятся не три цвета, а девять групп: • свечение и подсветки ленты — тёмные, а не белые (ниже, отдельным блоком); • подложки: карточка светлее фона, утопленная плита темнее — на тёмных темах наоборот; • линии и края — чёрные с прозрачностью, а не белые; • --c-glow — тёмный, иначе тени кнопки и плашки не видно; • редкость — тёмные версии синего, красного, фиолетового и золотого; • монета — тёмная заливка в светлой прорези, а не золото на чёрном; • пилюля вкладок — тёмная (светлая на светлом фоне не отделяется); • металлы уровня — тёмные; • color-scheme:light, иначе холст и полоса прокрутки остаются тёмными. ══════════════════════════════════════════════════════════════════════ */ /* ─────────────── Тема: мягкое масло (светлая) ─────────────── Фон #fff1a6, текст и кнопка #5a3921 — 9,00:1. Карточка светлее фона, утопленная плита темнее: на светлом фоне глубину даёт не тень, а порядок яркостей. Монета — тёмный янтарь: золото по маслу нечитаемо (1,2:1). */ [data-theme="butter"]{ --theme-name:"butter"; color-scheme: light; --c-bg:#fff1a6; --c-card:#fff9d9; /* карточка светлее фона — 1,08:1, край держит линия */ --c-card-2:#f2de93; /* утопленная плита: прорезь шкалы, поле ссылки, отсчёт */ --c-text:#5a3921; /* 9,00:1 на фоне, 9,70:1 на карточке */ --c-dim:#7a5330; /* 6,37:1 на карточке, 5,03:1 на утопленной плите */ /* Линия коричневая: белая на масле исчезает. .53, а не .30: на .30 край карточки давал к фону 1,71:1 при норме 3:1 для рамок, и четыре товара магазина шли подряд одинаковыми кремовыми прямоугольниками. Теперь 3,03:1 — ровно норма, край видно, а карточка не превращается в обведённую коробку. */ --c-line:rgba(58,36,16,.53); --c-accent:#5a3921; --c-accent-2:#43290f; --c-on-accent:#fff1a6; /* масляные буквы на коричневой кнопке — 9,00:1 */ /* Акцент буквами равен основному тексту: в палитре у этой темы два цвета, и различать «Крутить осталось: 3» от подписи должен вес, а не оттенок. */ --c-accent-txt:#5a3921; --c-glow:rgba(58,36,16,.28); /* тень тёмная: светлая на светлом не видна */ --tabbar-bg:#5a3921; /* пилюля тёмная — 9,00:1 к фону */ --tabbar-edge:rgba(0,0,0,.30); --tabbar-ink:#e4d3a8; /* спящая вкладка — 6,95:1 на пилюле */ --tabbar-on:#fff1a6; /* активная капсула масляная, буквы навыворот */ --tabbar-on-ink:#5a3921; /* 9,00:1 */ --c-coin:#8a4b00; --c-coin-2:#6b3800; --c-coin-ink:#fff1a6; /* 5,96:1 */ --c-coin-txt:#8a4b00; /* 6,42:1 на карточке */ --c-rail:#f0de93; /* прорезь светлая, заливка тёмная — 5,05:1 */ --c-rail-edge:rgba(58,36,16,.34); /* Редкость в тёмных версиях: синий, красный, фиолетовый, золото — 5,2-6,4:1 */ --r-common:#1f5fd8; --r-rare:#c2352b; --r-epic:#7a2fd0; --r-legend:#8a4b00; --r-legend-ink:#fff1a6; --tier-silver:#5c6470; --tier-gold:#7a5a10; --tier-bronze:#8a4e28; --wheel-bg:#f0de93; /* окошко темнее карточек — лента читается прибором */ --wheel-card:#fff9d9; --wheel-edge:#d8bf6e; --wheel-txt:#5a3921; --wheel-mark:#5a3921; /* указатель тёмный: светлый на масле пропадает */ } /* ─────────────── Тема: кислотный зелёный (светлая) ─────────────── Фон #39ff88, текст #0a0a0a — 14,93:1, самая громкая из семи. Карточка темнее фона: светлее уже некуда, кислота почти на потолке яркости. */ [data-theme="acidg"]{ --theme-name:"acidg"; color-scheme: light; --c-bg:#39ff88; --c-card:#12e06b; /* карточка глубже фона — 1,33:1 */ --c-card-2:#04c459; --c-text:#0a0a0a; /* 14,93:1 на фоне, 11,22:1 на карточке */ --c-dim:#0f3d22; /* тёмная зелень — 6,96:1 на карточке */ --c-line:rgba(10,10,10,.37); /* .28 давало краю карточки 2,45:1 к фону, норма для рамок 3:1 */ --c-accent:#0a0a0a; --c-accent-2:#000000; --c-on-accent:#39ff88; /* кнопка чёрная, буквы зелёные — 14,93:1 */ --c-accent-txt:#0a0a0a; --c-glow:rgba(10,10,10,.30); --tabbar-bg:#0a0a0a; /* 14,93:1 к фону */ --tabbar-edge:rgba(255,255,255,.16); --tabbar-ink:#c7d8cc; /* 13,31:1 на пилюле */ --tabbar-on:#39ff88; --tabbar-on-ink:#0a0a0a; /* 14,93:1 */ /* Монета тёплая: чёрный уже занят кнопками, и по цвету полосу «до товара» от полосы «до крупного приза» отличает именно тепло. */ --c-coin:#6b3200; --c-coin-2:#4e2400; --c-coin-ink:#ffe7c2; /* 8,39:1 */ --c-coin-txt:#6b3200; /* 5,72:1 на карточке */ --c-rail:#04c459; --c-rail-edge:rgba(10,10,10,.34); --r-common:#0b3fbe; --r-rare:#9e1414; --r-epic:#5e1b9e; --r-legend:#6b3200; --r-legend-ink:#ffe7c2; --tier-silver:#2e3a44; --tier-gold:#4a3608; --tier-bronze:#5a3218; --wheel-bg:#04c459; --wheel-card:#12e06b; --wheel-edge:#037a38; --wheel-txt:#0a0a0a; --wheel-mark:#0a0a0a; } /* ─────────────── Тема: северный индиго (тёмная) ─────────────── Единственная, где акцент — другой цвет набора: масляный #fff1a6 по индиго, 8,03:1. Карточка ТЕМНЕЕ фона, а не светлее: фон здесь задан владельцем и сам по себе яркий, светлая карточка съедала контраст у оранжевой монеты (3,4:1) и у бронзы (3,9:1). Утопив карточку, вернули 4,8-6,1:1. */ [data-theme="indigo"]{ --theme-name:"indigo"; color-scheme: dark; --c-bg:#263baa; --c-card:#1f3096; --c-card-2:#15205c; --c-text:#f5efe0; /* 8,00:1 на фоне, 9,53:1 на карточке */ --c-dim:#c7ccec; /* 6,91:1 на карточке */ --c-line:rgba(245,239,224,.22); --c-accent:#fff1a6; --c-accent-2:#e8d68a; --c-on-accent:#1b2670; /* индиговые буквы на масляной кнопке — 11,80:1 */ --c-accent-txt:#fff1a6; /* 8,03:1 на фоне */ --c-glow:rgba(255,241,166,.30); --tabbar-bg:#f2ead3; /* светлая пилюля — 7,64:1 к фону */ --tabbar-edge:rgba(0,0,0,.28); --tabbar-ink:#232f73; /* 10,13:1 на пилюле */ --tabbar-on:#141f63; --tabbar-on-ink:#fff1a6; /* 13,08:1 */ /* Монета оранжевая, а не золотая: золото и масло — почти один цвет, и две полосы приложения перестали бы различаться. */ --c-coin:#ff9030; --c-coin-2:#e0700f; --c-coin-ink:#2a1000; /* 7,92:1 */ --c-coin-txt:#ff9030; /* 4,83:1 на карточке */ --c-rail:#101a4e; --c-rail-edge:rgba(0,0,0,.5); /* Обычная — голубая, а не синяя: синяя рамка на синей карточке пропадает */ --r-common:#7ed4ff; --r-rare:#ff9182; --r-epic:#d6a6ff; --r-legend:#ffc24d; --r-legend-ink:#2a1a00; --tier-silver:#dce2f5; --tier-gold:#ffd066; --tier-bronze:#e9b78f; --wheel-bg:#141f63; --wheel-card:#1f3096; --wheel-edge:#5063ce; --wheel-txt:#f5efe0; --wheel-mark:#fff1a6; } /* ─────────────── Тема: мятный иней (светлая) ─────────────── Фон #b7f7d4, текст и кнопка #4c1d95 — 9,01:1. Единственная светлая тема с холодным фоном и тёплой монетой: янтарь рядом с фиолетовым не спутать. */ [data-theme="mint"]{ --theme-name:"mint"; color-scheme: light; --c-bg:#b7f7d4; --c-card:#d5fbe7; --c-card-2:#a0edc4; --c-text:#4c1d95; /* 9,01:1 на фоне, 9,80:1 на карточке */ --c-dim:#63359f; /* 7,39:1 на карточке */ --c-line:rgba(76,29,149,.57); /* .28 давало 1,57:1 — самая плоская карточка набора. Теперь 3,07:1 */ --c-accent:#4c1d95; --c-accent-2:#3a1176; --c-on-accent:#b7f7d4; /* мятные буквы на фиолетовой кнопке — 9,01:1 */ --c-accent-txt:#4c1d95; --c-glow:rgba(76,29,149,.28); --tabbar-bg:#4c1d95; /* 9,01:1 к фону */ --tabbar-edge:rgba(0,0,0,.28); --tabbar-ink:#dacaf3; /* 7,16:1 на пилюле */ --tabbar-on:#b7f7d4; --tabbar-on-ink:#4c1d95; /* 9,01:1 */ --c-coin:#8f4e00; --c-coin-2:#6e3b00; --c-coin-ink:#fff3df; /* 5,87:1 */ --c-coin-txt:#8f4e00; /* 5,77:1 на карточке */ --c-rail:#a0edc4; --c-rail-edge:rgba(76,29,149,.32); /* Очень редкая уведена в маджентовый край фиолетового: чистый фиолетовый совпал бы с цветом текста темы, и рамка перестала бы что-то значить. */ --r-common:#1450c6; --r-rare:#b62a20; --r-epic:#8b1fc7; --r-legend:#8f4e00; --r-legend-ink:#fff3df; --tier-silver:#4e5866; --tier-gold:#6e5210; --tier-bronze:#7e4624; --wheel-bg:#a0edc4; --wheel-card:#d5fbe7; --wheel-edge:#79d3a6; --wheel-txt:#4c1d95; --wheel-mark:#4c1d95; } /* ─────────────── Тема: неоновый оранж (светлая) ─────────────── Фон #ff9030, текст #0a0a0a — 8,75:1. Карточка светлее фона намеренно: на самом оранжевом тёмная редкость держала только 3,6-4,3:1, а надпись «ОЧЕНЬ РЕДКИЙ» на шторке приза — это 12px, ей нужны 4,5:1. Осветлили карточку — редкость поднялась до 4,9-5,6:1. */ [data-theme="orange"]{ --theme-name:"orange"; color-scheme: light; --c-bg:#ff9030; --c-card:#ffb570; --c-card-2:#f2882a; --c-text:#0a0a0a; /* 8,75:1 на фоне, 11,40:1 на карточке */ --c-dim:#47280a; /* 7,68:1 на карточке */ --c-line:rgba(10,10,10,.57); /* .30 давало 1,48:1 к фону. Теперь 3,05:1 — край товара видно */ --c-accent:#0a0a0a; --c-accent-2:#000000; --c-on-accent:#ff9030; /* кнопка чёрная, буквы оранжевые — 8,75:1 */ --c-accent-txt:#0a0a0a; --c-glow:rgba(10,10,10,.32); --tabbar-bg:#0a0a0a; /* 8,75:1 к фону */ --tabbar-edge:rgba(255,255,255,.16); --tabbar-ink:#dacec2; /* 12,81:1 на пилюле */ --tabbar-on:#ff9030; --tabbar-on-ink:#0a0a0a; /* 8,75:1 */ /* Монета и легендарная редкость здесь один цвет — тёмный янтарь. Так же сделано в изумруде: золото есть золото, и второго тёплого тёмного, который не спорил бы с оранжевым фоном, в этой теме просто нет. */ --c-coin:#6b4100; --c-coin-2:#523100; --c-coin-ink:#fff1a6; /* 7,72:1 */ --c-coin-txt:#6b4100; /* 5,08:1 на карточке */ --c-rail:#f2882a; --c-rail-edge:rgba(10,10,10,.34); /* Красная уведена в вишню: обычный красный на оранжевом фоне — тот же тон */ --r-common:#0b44ae; --r-rare:#98122f; --r-epic:#5f1aa2; --r-legend:#6b4100; --r-legend-ink:#fff1a6; --tier-silver:#31383f; --tier-gold:#4a3608; --tier-bronze:#5a3218; --wheel-bg:#f2882a; --wheel-card:#ffb570; --wheel-edge:#b85c0c; --wheel-txt:#0a0a0a; --wheel-mark:#0a0a0a; } /* ─────────────── Тема: уголь (тёмная) ─────────────── Спокойная рабочая тема. Акцент — тот же неоновый оранж, что и в теме orange, но здесь он светится на угле, а не заливает экран. */ [data-theme="coal"]{ --theme-name:"coal"; color-scheme: dark; --c-bg:#111827; --c-card:#1b2436; --c-card-2:#141c2b; --c-text:#e8eaf0; /* 14,75:1 на фоне, 12,91:1 на карточке */ --c-dim:#a6afc2; /* 7,05:1 на карточке */ --c-line:rgba(232,234,240,.16); --c-accent:#ff9030; --c-accent-2:#e5721a; --c-on-accent:#1a0c00; /* тёмные чернила по яркому акценту — 8,47:1 */ --c-accent-txt:#ff9030; /* 7,84:1 на фоне */ --c-glow:rgba(255,144,48,.30); --tabbar-bg:#e4e8f2; /* светлая пилюля — 14,47:1 к фону */ --tabbar-edge:rgba(0,0,0,.25); --tabbar-ink:#2b3446; /* 10,18:1 на пилюле */ --tabbar-on:#0b1120; --tabbar-on-ink:#ff9030; /* 8,32:1 */ /* Монета жёлтая, акцент оранжевый: полосу «до товара» и полосу «до крупного приза» разводит цвет, а не только форма. */ --c-coin:#ffd24d; --c-coin-2:#e5a81a; --c-coin-ink:#2a1c00; /* 11,53:1 */ --c-coin-txt:#ffd24d; /* 10,78:1 на карточке */ --c-rail:#0b111d; --c-rail-edge:rgba(0,0,0,.5); --r-common:#6ab6ff; --r-rare:#ff8a7a; --r-epic:#c49aff; --r-legend:#ffd24d; --r-legend-ink:#241800; --tier-silver:#cfd6e2; --tier-gold:#ffcf5c; --tier-bronze:#d09a6b; --wheel-bg:#0c121f; --wheel-card:#1b2436; --wheel-edge:#3b4860; --wheel-txt:#e8eaf0; --wheel-mark:#ff9030; } /* ─────────────── Тема: абсолютный чёрный (тёмная) ─────────────── Самый высокий контраст из всех: текст 18,21:1, акцент 20,38:1. Цвет здесь разрешён только тому, что обязано различаться, — монете и четырём ступеням редкости. Всё остальное чёрное, белое и серое. */ [data-theme="black"]{ --theme-name:"black"; color-scheme: dark; --c-bg:#050505; --c-card:#141414; --c-card-2:#0d0d0d; --c-text:#f2f2f2; /* 18,21:1 на фоне, 16,46:1 на карточке */ --c-dim:#a8a8a8; /* 7,75:1 на карточке */ --c-line:rgba(242,242,242,.18); --c-accent:#ffffff; --c-accent-2:#dcdcdc; --c-on-accent:#050505; /* 20,38:1 */ --c-accent-txt:#ffffff; --c-glow:rgba(255,255,255,.22); /* Пилюля не чисто белая: второе белое пятно спорило бы с кнопкой «Крутить» */ --tabbar-bg:#dedede; /* 15,15:1 к фону */ --tabbar-edge:rgba(0,0,0,.35); --tabbar-ink:#1a1a1a; /* 12,94:1 на пилюле */ --tabbar-on:#0a0a0a; --tabbar-on-ink:#ffffff; /* 19,80:1 */ --c-coin:#ffc24d; --c-coin-2:#e09a24; --c-coin-ink:#1a1200; /* 11,57:1 */ --c-coin-txt:#ffc24d; /* 11,47:1 на карточке */ --c-rail:#000000; --c-rail-edge:rgba(255,255,255,.14); --r-common:#5aa9ff; --r-rare:#ff7a6b; --r-epic:#c08bff; --r-legend:#ffc24d; --r-legend-ink:#1a1200; --tier-silver:#d8dce4; --tier-gold:#ffcf5c; --tier-bronze:#d9a177; --wheel-bg:#000000; --wheel-card:#141414; --wheel-edge:#3a3a3a; --wheel-txt:#f2f2f2; --wheel-mark:#ffffff; } /* ─────────────── Каркас ─────────────── */ *{ -webkit-tap-highlight-color: transparent; } [hidden]{ display:none !important; } html,body{ margin:0; padding:0; height:100%; } body{ background: var(--c-bg); color: var(--c-text); font: 400 15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; overscroll-behavior-y: none; /* без резинки: иначе из-под приложения виден фон Telegram */ -webkit-text-size-adjust: 100%; overflow: hidden; } #app{ display:flex; flex-direction:column; height: var(--app-h); max-width: 560px; margin: 0 auto; box-sizing: border-box; } /* ── Шапка ── */ .top{ flex:0 0 auto; display:flex; align-items:center; padding: calc(var(--pad-t) + 12px) 14px 10px; } .top__who{ min-width:0; flex:1 1 auto; } .top__hi{ font-size:17px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .top__venue{ font-size:12px; color:var(--c-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chip{ flex:0 0 auto; margin-left:10px; padding:6px 11px; border-radius:999px; background:var(--c-card); border:1px solid var(--c-line); font-size:12px; font-weight:700; white-space:nowrap; } /* Правил .chip[data-tier] здесь больше нет: плашка уровня из шапки убрана, уровень живёт в личном кабинете. Переменные --tier-* остались — их взял себе .prof-tier, цвет металла у названия уровня прежний. */ /* Монетная плашка. Монетным цветом, а не общим: со вкладки «Монеты» гость уходит, а плашка видна со всех трёх экранов — и это единственное, что напоминает о второй валюте. Цвет тот же, что у чисел на экране монет. */ .chip--coins{ color:var(--c-coin-txt); } /* ── Прокручиваемая часть ── */ .body{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding: 0 14px 16px; } /* Экран занимает всю высоту прокручиваемой части, а лишнее место раздаётся между блоками. Без этого на коротком содержимом (а это обычное состояние: спинов нет, призов нет) контент занимал две трети экрана, а нижняя треть оставалась провалом над вкладками — в ролике кадр выглядел незаполненным. min-height, а не height: когда содержимое длиннее экрана, оно спокойно прокручивается, ничего не сжимается. */ .screen{ display:flex; flex-direction:column; justify-content:space-between; min-height:100%; } /* hidden обязан побеждать display:flex, иначе скрытые экраны покажутся все разом */ .screen[hidden]{ display:none; } /* ── Иконки из спрайта ── svg — строчный элемент: он стоит на базовой линии, и под ним оставался зазор в 2-4 точки, которого у эмодзи не было. display:block его убирает, а авто-поля возвращают центрирование там, где раньше работал text-align. */ .ico{ display:block; flex:0 0 auto; margin:0 auto; } .h2{ margin:6px 0 8px; font-size:19px; font-weight:800; letter-spacing:-.01em; } /* Плакатный заголовок. В базовых темах его нет: у них своя шапка, и появиться он должен только там, где его просит референс. */ .poster{ display:none; } .card{ background:var(--c-card); border:1px solid var(--c-line); border-radius:16px; padding:14px; margin-bottom:12px; } .hint{ margin:10px 2px 0; font-size:13px; line-height:1.45; color:var(--c-dim); text-align:center; } .hint--lead{ text-align:left; margin:0 2px 12px; } /* ── Плашка счастливого часа ── */ .banner{ display:flex; align-items:center; border-radius:16px; padding:12px 14px; margin-bottom:12px; background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2)); color:var(--c-on-accent); box-shadow:0 6px 22px var(--c-glow); } .banner__i{ font-size:24px; line-height:1; margin-right:10px; } .banner b{ font-size:15px; } /* Без opacity: 12px поверх яркого градиента и так на грани, полупрозрачность сажала контраст до 2,7:1. Разницу веса и размера хватает для иерархии. */ .banner__sub{ font-size:12px; margin-top:1px; } /* ── Счётчик до гарантии ── */ .pity{ padding:12px 14px; } /* Надпись-шапка «Рулетка». Полос в приложении две, и различать их гость должен с первого взгляда — значит слово, которое их называет, обязано читаться шапкой, а не первой строкой текста: мелкий разряженный капс приглушённым цветом. На экране монет ту же работу делает первое слово подписи под ним («Копилка · до следующего товара»), отдельной шапки там нет. */ .pity__kicker{ margin-bottom:6px; font-size:11px; font-weight:700; line-height:1.2; letter-spacing:.08em; text-transform:uppercase; color:var(--c-dim); } /* Подпись слева, число справа. На 360 точках две самые длинные пары («Крупный приз готов» + «ждёт ежедневного спина») в строку не влезают. flex-wrap переносит число целиком на вторую строку и прижимает его вправо полем auto — вместо того чтобы ломать подпись пополам и оставлять число висеть напротив её первой половины. Число само по себе не переносится: flex-shrink:0 не даёт его ужать, поэтому перенос всегда идёт по строке. */ .pity__row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; } .pity__label{ font-size:13px; color:var(--c-dim); flex:0 1 auto; } .pity__num{ flex:0 0 auto; margin-left:auto; font-size:14px; font-weight:800; color:var(--c-accent-txt); white-space:nowrap; } /* Объяснение под полоской: почему число вдруг выросло. Живёт секунды, поэтому места заранее не занимает — в разметке стоит с hidden. Перенос по словам разрешён: фраза длиннее строки, обрезать её нельзя. */ .pity__note{ margin-top:8px; font-size:12px; line-height:1.35; color:var(--c-dim); } .bar{ margin-top:9px; height:8px; border-radius:99px; background:var(--c-card-2); overflow:hidden; } .bar--thin{ height:5px; margin-top:10px; } .bar__fill{ height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg,var(--c-accent-2),var(--c-accent)); transition:width .5s ease; } /* ── Три счётчика ── */ .spins{ display:flex; margin-bottom:12px; } .spins__box{ flex:1 1 0; min-width:0; margin-right:8px; background:var(--c-card); border:1px solid var(--c-line); border-radius:14px; padding:10px 6px; text-align:center; } .spins__box:last-child{ margin-right:0; } .spins__box.is-on{ border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent) inset; } .spins__n{ font-size:19px; font-weight:800; line-height:1.1; } .spins__t{ font-size:12px; color:var(--c-dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Строка про уровень на «Игре». Уровень уехал в кабинет, и на экране, где гость проводит всё время, о нём не осталось ни слова — а вместе с ним пропала причина ходить чаще. Строка кликабельная и ведёт в кабинет, поэтому и рамка, и высота как у кнопки, а не как у подписи. font:inherit обязателен: своего шрифта кнопка иначе не наследует. */ .tier-hint{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; box-sizing:border-box; margin:0 0 12px; padding:8px 12px; min-height:40px; background:var(--c-card); border:1px solid var(--c-dim); border-radius:12px; font:inherit; font-size:13px; font-weight:800; color:var(--c-text); text-align:center; cursor:pointer; -webkit-appearance:none; appearance:none; } .tier-hint:active{ transform:translateY(1px); } /* Корона — тот же знак, что и в кабинете: одинаковый значок значит одно и то же */ .tier-hint .ico{ margin:0; flex:0 0 auto; color:var(--c-coin-txt); } .tier-hint__t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Место под ленту занято заранее. Ленту собирает wheel.js, а список призов за визит приходит отдельным запросом — до ответа контейнер был нулевой высоты, и лента, появившись, сдвигала вниз плашку и кнопку. В ролике это прыжок вёрстки на первых же секундах. 154 = высота карточки 132 плюс 22 точки полей окошка (обе цифры из wheel.js); в индустриальной теме у окошка ещё рамка в 1 точку с каждой стороны. */ .wheel-box{ margin-bottom:14px; min-height:154px; } /* Правил .wheel-note* здесь больше нет: подпись о направлении ленты владелец убрал как лишний шум, в разметке её нет ни одной строки. */ /* ── Плашка-пояснение над кнопкой ── Постоянный текст про то, что выигрыш известен только после остановки ленты. */ .note{ display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:11px 12px; background:var(--c-card); border:1px solid var(--c-line); border-radius:14px; } .note__i{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--c-accent); color:var(--c-on-accent); } /* Атрибуты width/height у svg проигрывают правилу — размер задаём здесь */ .note__i .ico{ width:14px; height:14px; } .note__t{ min-width:0; font-size:13px; line-height:1.35; color:var(--c-dim); } /* Вторая строка карточки ленты. В базовых темах её нет: карточка там рассчитана на две строки, и менять их вид эта правка не должна. */ .wcard__s{ display:none; } /* ── Кнопки ── */ .btn{ display:block; width:100%; min-height:52px; padding:14px 16px; border:0; border-radius:14px; font:800 16px/1.2 inherit; cursor:pointer; box-sizing:border-box; } .btn--main{ background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2)); color:var(--c-on-accent); box-shadow:0 8px 24px var(--c-glow); } .btn--main:active{ transform:translateY(1px); } .btn--main[disabled],.btn--main[aria-disabled="true"]{ background:var(--c-card-2); color:var(--c-dim); box-shadow:none; cursor:default; } /* Рамка — единственное, что делает призрачную кнопку кнопкой. Общая --c-line даёт к карточке 1,17-1,69:1, и «Скопировать ссылку» читалось как подпись к полю. --c-dim — те же 5,3-7,3:1, что уже держит дорожка переключателя. */ .btn--ghost{ margin-top:8px; background:transparent; color:var(--c-dim); border:1px solid var(--c-dim); font-weight:600; min-height:48px; } /* ── Мои призы ── */ /* Карточка нажимается: под ней открывается код приза, и это единственный вход к QR — вкладку «Мой код» убрали. Поэтому и курсор-указатель, и просадка при нажатии, как у кнопок: без них карточка читается как строка списка. Но НЕ у всякой карточки: приз без номера выдачи обработчика не получает (app.js, renderInventory), и курсор с просадкой на нём обещали нажатие, которого нет. Поэтому оба правила привязаны к тому же признаку, по какому app.js делает карточку кнопкой, — role="button". */ .inv{ position:relative; display:flex; align-items:center; background:var(--c-card); border:1px solid var(--c-line); border-left:4px solid var(--r-common); border-radius:14px; padding:12px 14px; margin-bottom:10px; } .inv[role="button"]{ cursor:pointer; } .inv[role="button"]:active{ transform:translateY(1px); } .inv:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; } .inv[data-r="rare"]{ border-left-color:var(--r-rare); } .inv[data-r="epic"]{ border-left-color:var(--r-epic); } .inv[data-r="legend"]{ border-left-color:var(--r-legend); } /* .42 гасило и заголовок приза до 2,7:1 — сгоревший приз всё же надо прочитать */ .inv.is-dead{ opacity:.6; } .inv__i{ font-size:28px; line-height:1; flex:0 0 auto; margin-right:12px; } .inv__b{ min-width:0; flex:1 1 auto; } .inv__t{ font-size:15px; font-weight:700; overflow-wrap:break-word; overflow-wrap:anywhere; } .inv__n{ font-size:12px; color:var(--c-dim); margin-top:2px; overflow-wrap:break-word; overflow-wrap:anywhere; } .inv__left{ font-size:12px; font-weight:700; margin-top:5px; color:var(--c-accent-txt); } /* Слово «Сгорел» и примечание к призу — основным цветом текста, во ВСЕХ темах. Приглушённый цвет на карточке, уже погашенной непрозрачностью, гаснет дважды и падает до 2,5-4,3:1 при норме 4,5 — гость видит название приза, но не может прочитать, что с ним не так. Правило было расписано по темам поимённо и семь тёмных тем в список не попали; общее правило список держать не заставляет. Карточка остаётся потухшей: гасит её opacity, а не цвет букв. */ .inv.is-dead .inv__left, .inv.is-dead .inv__n{ color:var(--c-text); } .inv__major{ display:inline-block; margin-top:5px; margin-right:6px; padding:2px 7px; border-radius:99px; font-size:11px; font-weight:800; letter-spacing:.02em; /* 10px не читались */ background:var(--r-legend); color:var(--r-legend-ink); } /* «Показать код» — плашка со значком, а не серая строка. Обычным текстом она читалась как ещё одна строка описания приза, и единственный вход к QR пропадал. Обводка акцентом, а не заливка: заливка спорила бы с плашкой «КРУПНЫЙ» рядом. Поля у значка ставим полной записью — .ico кладёт margin:0 auto, и один auto слева растащил бы значок и текст по краям. */ .inv__code{ display:inline-flex; align-items:center; margin-top:6px; padding:5px 10px; border-radius:999px; background:var(--c-card-2); color:var(--c-accent-txt); box-shadow:inset 0 0 0 1px var(--c-accent-txt); font-size:12px; font-weight:800; line-height:1.2; } .inv__code .ico{ width:14px; height:14px; margin:0 5px 0 0; } /* У сгоревшего приза кода нет и быть не может: app.js на нажатие отвечает отказом «Срок этого приза уже вышел». Поэтому плашку УБИРАЕМ, а не гасим. Погашенная плашка врала дважды: выглядела кнопкой, которой не является, и на карточке с opacity держала 2,4-4,5:1 в двенадцати темах из тринадцати. Что приз сгорел, говорит слово «Сгорел» слева — второго указателя не нужно. */ .inv.is-dead .inv__code{ display:none; } /* ── Карточка «Отметиться» ── Стоит последней на «Моих призах», под списком призов, и не должна читаться как ещё один приз: отступ сверху отрезает её от списка. Разница между кодом приза и кодом отметки — самое опасное место в механике, поэтому у заголовка и пояснения разный вес и размер, а не один кегль на двоих. */ .checkin{ margin-top:18px; } .checkin__t{ font-size:15px; font-weight:800; line-height:1.3; overflow-wrap:break-word; overflow-wrap:anywhere; } .checkin__s{ margin-top:5px; font-size:13px; line-height:1.45; color:var(--c-dim); } .empty{ text-align:center; padding:36px 18px; } .empty__i{ font-size:42px; } .empty__t{ font-size:17px; font-weight:800; margin-top:8px; } .empty__s{ font-size:13px; color:var(--c-dim); margin-top:6px; line-height:1.5; } /* ── Мой код ── Правил .qr-card, .qr-box, .qr-digits, .qr-sub и .qr-timer здесь больше нет: на шторке кода эти имена стояли вторыми рядом с .prize-code__*, два набора правил спорили за одни и те же элементы, и побеждал то один, то другой — по порядку строк в файле. Содержимое шторки называется одним семейством .prize-code__* (оно ниже, вместе с темовыми переопределениями). */ /* Карточка приглашения в бота на «Моих призах». Её строит app.js: сама карточка там обычная .card, своего оформления у неё нет — есть у двух строк внутри. Поля .link-card__in здесь больше нет: единственное поле со ссылкой уехало в личный кабинет и называется .prof-link__in. */ .link-card__t{ font-size:14px; font-weight:800; } .link-card__s{ font-size:12px; color:var(--c-dim); margin-top:4px; line-height:1.45; } /* ══════════════════════════════════════════════════════════════════════ ЛИЧНЫЙ КАБИНЕТ Отдельный экран, а не четвёртая вкладка. Строки кабинета — обычные .card, поэтому все шесть тем красят их сами: в индустриальной это пластина с заклёпками, в изумрудной — тёплый кант. Своего фона тут не заводим. ══════════════════════════════════════════════════════════════════════ */ /* ── Значок кабинета в шапке ── Подложка и рамка те же, что у плашки монет рядом, иначе шапка расползается. Круг 36 точек, а нажимается 44: невидимый :before растягивает область нажатия до нормы, не раздувая сам круг. Он абсолютный, места не занимает и наружу экрана не вылезает — до края справа остаётся 10 точек. */ .head-prof{ flex:0 0 auto; margin-left:10px; position:relative; display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border-radius:50%; border:1px solid var(--c-line); background:var(--c-card); color:var(--c-text); cursor:pointer; -webkit-appearance:none; appearance:none; } .head-prof:before{ content:''; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%); } /* Авто-поля .ico растащили бы значок к краю — во flex-кнопке они не нужны */ .head-prof .ico{ margin:0; } .head-prof:active{ transform:translateY(1px); } /* Точка «до уровня один визит» — та же, что у вкладки «Мои призы»: одинаковый знак должен значить одно и то же. Обводка цветом шапки отрезает точку от значка, иначе на акцентном фоне открытого кабинета они сливаются. */ .head-prof__dot{ position:absolute; top:-1px; right:-1px; width:9px; height:9px; border-radius:50%; background:var(--c-coin); box-shadow:0 0 0 2px var(--c-bg); } /* Кабинет открыт — значок горит акцентом. Второе нажатие закрывает кабинет, и гость должен видеть, что кнопка сейчас нажата. */ .head-prof[aria-expanded="true"]{ background:var(--c-accent); color:var(--c-on-accent); border-color:transparent; } /* В светлой теме круг залит --c-card на --c-bg: 1,11:1, а рамка --c-line — 1,38:1. Виден один человечек, и кнопкой это не читается; внутри Telegram secondary-bg часто равен фону, и круг исчезает совсем. Даём заметный край. */ [data-theme="white"] .head-prof{ border-color:rgba(0,0,0,.28); } @media (prefers-color-scheme: dark){ [data-theme="white"] .head-prof{ border-color:rgba(255,255,255,.28); } } /* ── Кнопка «Назад» ── В браузере системной «назад» нет, и без своей кнопки кабинет — тупик. В Telegram она дублирует BackButton, это не мешает. */ .prof-back{ display:inline-flex; align-items:center; gap:8px; box-sizing:border-box; min-height:44px; margin:2px 0 10px; padding:10px 16px 10px 13px; border-radius:999px; border:1px solid var(--c-line); background:var(--c-card); color:var(--c-text); font:700 15px/1.2 inherit; cursor:pointer; -webkit-appearance:none; appearance:none; } .prof-back .ico{ margin:0; } .prof-back:active{ transform:translateY(1px); } .prof-back__t{ min-width:0; } .prof{ display:block; } /* Строка кабинета. Фон, рамку и скругление даёт .card, здесь — только внутренняя раскладка и типографика. */ .prof-row{ box-sizing:border-box; } .prof-row__t{ font-size:14px; font-weight:800; overflow-wrap:break-word; overflow-wrap:anywhere; } .prof-row__s{ margin-top:4px; font-size:12px; line-height:1.45; color:var(--c-dim); overflow-wrap:break-word; overflow-wrap:anywhere; } /* ── 1. Имя и уровень ── Цвет металла берём из тех же --tier-*, что раньше красили плашку в шапке. */ .prof-tier__name{ font-size:15px; font-weight:800; overflow-wrap:break-word; overflow-wrap:anywhere; } .prof-tier__row{ display:flex; align-items:center; gap:8px; margin-top:4px; color:var(--tier-bronze); } .prof-tier[data-tier="silver"] .prof-tier__row{ color:var(--tier-silver); } .prof-tier[data-tier="gold"] .prof-tier__row{ color:var(--tier-gold); } .prof-tier__row .ico{ margin:0; } .prof-tier__t{ min-width:0; font-size:26px; font-weight:800; line-height:1.15; letter-spacing:-.01em; overflow-wrap:break-word; overflow-wrap:anywhere; } /* Что уровень даёт — основным цветом: ради этой строки кабинет и открывают. */ .prof-tier__perk{ margin:8px 0 0; font-size:13px; line-height:1.45; } /* Как получить следующий — приглушённо: это обещание, а не сегодняшний факт. */ .prof-tier__next{ margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--c-dim); } /* Чем меряем визиты. Тише строки «как поднять уровень»: это не приглашение, а правило — но и прятать его нельзя, оно объясняет, почему уровень падает. */ .prof-tier__window{ margin:6px 0 0; font-size:12px; line-height:1.45; color:var(--c-dim); } /* ── 2. Три числа за всё время ── Устроены как счётчики на «Игре», но карточка своя: те меняются каждый спин, эти копятся годами, и путать их нельзя. */ .prof-stats{ margin-bottom:12px; } .prof-stats__t{ margin:0 2px 6px; font-size:12px; color:var(--c-dim); } .prof-stats__row{ display:flex; } .prof-stat{ flex:1 1 0; min-width:0; margin-right:8px; background:var(--c-card); border:1px solid var(--c-line); border-radius:14px; padding:10px 6px; text-align:center; } .prof-stat:last-child{ margin-right:0; } .prof-stat__n{ font-size:22px; font-weight:800; line-height:1.1; } .prof-stat__t{ margin-top:2px; font-size:12px; color:var(--c-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ── 3. Переключатель напоминания ── */ .prof-switch{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; } .prof-switch__b{ flex:1 1 auto; min-width:0; } .prof-switch__t{ display:block; font-size:14px; font-weight:800; line-height:1.3; overflow-wrap:break-word; overflow-wrap:anywhere; } .prof-switch__s{ display:block; margin-top:4px; font-size:12px; line-height:1.4; color:var(--c-dim); overflow-wrap:break-word; overflow-wrap:anywhere; } /* Выключенную дорожку обводим приглушённым цветом, а не общей линией: --c-line даёт к карточке 1,1-1,3:1, и выключенный переключатель просто пропадал бы с экрана. --c-dim держит 5,3-7,3:1 во всех шести темах. */ .prof-switch__box{ flex:0 0 auto; position:relative; width:52px; height:32px; border-radius:999px; background:var(--c-card-2); box-shadow:inset 0 0 0 2px var(--c-dim); } .prof-switch__knob{ position:absolute; top:5px; left:5px; width:22px; height:22px; border-radius:50%; background:var(--c-dim); transition:left .18s ease,background-color .18s ease; } .prof-switch--on .prof-switch__box{ background:var(--c-accent); box-shadow:inset 0 0 0 2px var(--c-accent); } .prof-switch--on .prof-switch__knob{ left:25px; background:var(--c-on-accent); } @media (prefers-reduced-motion:reduce){ .prof-switch__knob{ transition:none; } } /* Кнопка живёт под переключателем и относится к нему, поэтому прижата вплотную, а до следующей карточки — обычный отступ строки кабинета. */ .prof-tg{ margin-top:-6px; margin-bottom:12px; } /* ── 4. Личная ссылка ── Поле переехало сюда с «Моих призов» вместе с карточкой; правило то же, что было у .link-card__in, только имя новое. */ .prof-link__in{ display:block; width:100%; box-sizing:border-box; margin-top:10px; padding:11px 12px; border-radius:10px; border:1px solid var(--c-line); background:var(--c-card-2); color:var(--c-dim); font:400 12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* Поле и кнопка под ним стоят на одинаковом расстоянии: у кнопки-призрака своё поле 8, у поля ввода 10 — рядом эта разница видна. */ .prof-link .btn--ghost{ margin-top:10px; } /* Ссылка входит в аккаунт без пароля. Предупреждение стоит под кнопкой — гость читает его ровно в тот момент, когда ссылка уже в буфере обмена. */ .prof-link__warn{ margin-top:8px; font-size:12px; line-height:1.45; color:var(--c-dim); overflow-wrap:anywhere; } /* ── 5. Заведение и связь ── Перенос разрешён: в контакте бывает и длинный телефон, и адрес почты. */ .prof-contact{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-top:10px; } .prof-contact__label{ flex:0 0 auto; font-size:12px; color:var(--c-dim); } .prof-contact__value{ min-width:0; font-size:15px; font-weight:700; overflow-wrap:break-word; overflow-wrap:anywhere; } /* ── Нижние вкладки: одна овальная пилюля ── Вся панель — светлая пилюля во всю ширину, активная вкладка — вложенная капсула контрастного цвета с текстом навыворот. У спящих вкладок нет ни рамок, ни подложек, ни полосок: их состояние читается тем, что они НЕ капсула. Цвета лежат в переменных --tabbar-* у каждой темы, здесь только форма. Старых имён (.tabs, .tab, .tab__i, .tab__t, .tab.is-on, .tab__dot) в селекторах больше нет: разметка перешла на .tabbar* целиком, и вторые имена не находили на экране ничего. Они стояли здесь только на время переезда. */ .tabbar{ flex:0 0 auto; display:flex; box-sizing:border-box; /* Пилюля не приклеена к краю экрана, она над ним плавает. Снизу --pad-b (минимум 22) плюс 12 — это ровно 34 точки полосы жестов iPhone; там, где система сообщает настоящий инсет, отступ вырастет сам. */ margin:4px 12px calc(var(--pad-b) + 12px); padding:5px; border:1px solid var(--tabbar-edge); border-radius:999px; background:var(--tabbar-bg); box-shadow:0 6px 20px rgba(0,0,0,.30); } .tabbar__btn{ flex:1 1 0; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:48px; padding:6px 2px; /* 48 больше нормы в 44 */ border:0; border-radius:999px; background:transparent; color:var(--tabbar-ink); font:700 11px/1.15 inherit; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background-color .22s ease,color .22s ease,box-shadow .22s ease; } .tabbar__btn + .tabbar__btn{ margin-left:2px; } /* Иконки над подписями остаются — отдельное требование владельца. Размер задаём правилом: атрибуты width/height у svg ему проигрывают. */ .tabbar__ico{ width:22px; height:22px; font-size:20px; line-height:1; } .tabbar__label{ margin-top:3px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Активная вкладка — вложенная капсула, единственная закрашенная область панели */ .tabbar__btn--active{ background:var(--tabbar-on); color:var(--tabbar-on-ink); box-shadow:0 2px 8px rgba(0,0,0,.28); } .tabbar__btn:active{ transform:translateY(1px); } /* Точка «есть новый приз». Кольцо тёмное: на светлой пилюле именно оно отделяет точку от фона — одна монетная заливка дала бы там 1,2:1. */ .tabbar__dot{ position:absolute; top:5px; left:50%; margin-left:9px; width:8px; height:8px; border-radius:50%; background:var(--c-coin); box-shadow:0 0 0 2px var(--tabbar-on); } @media (prefers-reduced-motion:reduce){ .tabbar__btn,.pillswitch__btn{ transition:none; } } /* ── Переключатель «Магазин / История» ── Тот же овальный приём и те же переменные, что у вкладок: гость должен узнать форму с первого взгляда. Отличается только размером. */ .pillswitch{ display:flex; box-sizing:border-box; margin:0 0 12px; padding:4px; border:1px solid var(--tabbar-edge); border-radius:999px; background:var(--tabbar-bg); } .pillswitch__btn{ flex:1 1 0; min-width:0; min-height:44px; padding:8px 10px; border:0; border-radius:999px; background:transparent; color:var(--tabbar-ink); font:800 14px/1.2 inherit; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-appearance:none; appearance:none; transition:background-color .22s ease,color .22s ease; } .pillswitch__btn + .pillswitch__btn{ margin-left:2px; } .pillswitch__btn--active{ background:var(--tabbar-on); color:var(--tabbar-on-ink); box-shadow:0 2px 8px rgba(0,0,0,.22); } .pillswitch__btn:active{ transform:translateY(1px); } /* Второй переключатель — месяц внутри «Истории». Стоит под первым, и две одинаковые пилюли подряд читаются как одна ошибка вёрстки: делаем его тише размером букв. Высоту 44 не трогаем — это палец, а не курсор. */ .pillswitch--period{ margin-bottom:10px; } .pillswitch--period .pillswitch__btn{ font-size:13px; font-weight:700; } /* ══════════════════════════════════════════════════════════════════════ ЭКРАН МОНЕТ ══════════════════════════════════════════════════════════════════════ */ #view-coins{ display:block; } /* ── Шапка: баланс и путь до товара ── */ .coins-head{ position:relative; box-sizing:border-box; background:var(--c-card); border:1px solid var(--c-line); border-radius:20px; padding:16px 14px 14px; margin-bottom:12px; } /* Правила .coins-head__t здесь больше нет: заголовок экрана — обычный .h2 «Монеты», как и на «Моих призах», а мелкой шапки над балансом в разметке нет ни одной. */ .coins-balance{ display:flex; align-items:center; justify-content:center; margin-top:6px; font-size:40px; font-weight:800; line-height:1; letter-spacing:-.02em; } /* Поля полной записью: .ico кладёт margin:0 auto, и один auto слева уводил значок с числом вправо от середины карточки. Одного margin-right мало — он перебивает только правую сторону. */ .coins-balance__ico{ flex:0 0 auto; width:30px; height:30px; margin:0 9px 0 0; color:var(--c-coin-txt); } .coins-balance__n{ min-width:0; overflow-wrap:break-word; overflow-wrap:anywhere; } .coins-head__s{ margin:8px 2px 0; text-align:center; font-size:13px; line-height:1.4; color:var(--c-dim); } /* ── Копилка: подпись над полосой ── Устроена ровно как строка «До крупного приза» на «Игре»: подпись слева, число справа, обе на одной базовой линии. Разница одна и намеренная — там акцент темы, тут монетный цвет: полос две, и путать их нельзя. Число прижато вправо и набрано крупнее: «ещё 40 монет» — единственное, ради чего эту строку читают. */ .coins-goal{ margin-top:14px; } .coins-goal__row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .coins-goal__label{ min-width:0; font-size:12px; line-height:1.3; color:var(--c-dim); } .coins-goal__num{ flex:0 0 auto; font-size:14px; font-weight:800; color:var(--c-coin-txt); white-space:nowrap; } /* Копить больше не на что — хорошая новость, а не пустая строка: акцентом и по центру, на месте, где обычно стоит полоса. */ .coins-goal__all{ margin:12px 2px 0; text-align:center; font-size:13px; font-weight:700; line-height:1.4; color:var(--c-accent-txt); } /* ── Полоса до товара ── От полосы «до крупного приза» на «Игре» её отличают четыре вещи сразу: вдвое толще, в насечках, с плавающим ярлычком и с замком на конце. Цвет тоже другой — монетное золото против акцента темы. Замок стоит не у правого края экрана, а там, где кончается дорожка: дорожка занимает две трети ширины, треть отдана замку и подписи. Это прямое требование владельца — цель должна выглядеть близкой. Врать в числе при этом нельзя: --p приходит честный, приём чисто геометрический. */ .coins-track{ display:flex; align-items:flex-start; margin-top:34px; /* место под ярлычок над полосой */ } .coins-track__run{ position:relative; flex:1 1 auto; min-width:0; margin-right:16px; } .coins-track__rail{ height:14px; border-radius:99px; background:var(--c-rail); box-shadow:inset 0 0 0 1px var(--c-rail-edge),inset 0 1px 3px rgba(0,0,0,.45); overflow:hidden; } .coins-track__fill{ display:block; height:100%; border-radius:99px; background-color:var(--c-coin); /* Насечки — «монеты в столбик». Запись старая (цвет, потом позиция): двойные позиции понимает не всякий вебвью. */ background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.18),rgba(0,0,0,.18) 2px, rgba(0,0,0,0) 2px,rgba(0,0,0,0) 11px), linear-gradient(90deg,var(--c-coin-2),var(--c-coin)); transition:width .6s cubic-bezier(.22,1,.36,1); width:var(--p,0%); /* Минимальный язычок: при нуле монет полоса не выглядит сломанной, и ярлычку есть на чём стоять. Число рядом при этом настоящее. */ width:max(var(--p,0%),22px); } /* Ярлычок с текущим значением и хвостиком вниз */ .coins-track__badge{ position:absolute; bottom:calc(100% + 6px); transform:translateX(-50%); padding:4px 9px; border-radius:9px; background:var(--c-coin); color:var(--c-coin-ink); font:800 13px/1.15 inherit; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.3); transition:left .6s cubic-bezier(.22,1,.36,1); left:var(--p,0%); /* Слева ярлычок не вылезает за дорожку, справа не уезжает дальше её конца. От конца дорожки до замка 36 точек, а половина ярлычка — 22-26: даже на трёхзначном балансе остаётся зазор в 10 точек. */ left:clamp(24px,var(--p,0%),100%); } .coins-track__badge:after{ content:""; position:absolute; top:100%; left:50%; margin-left:-5px; width:0; height:0; border:5px solid transparent; border-bottom:0; border-top-color:var(--c-coin); } /* Цель: кружок с замком, под ним цена и название товара */ .coins-track__goal{ flex:0 0 92px; display:flex; flex-direction:column; align-items:center; margin-top:-19px; /* кружок 52 центрируем по полосе 14 */ text-align:center; } .coins-track__goal-i{ flex:0 0 auto; box-sizing:border-box; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--c-rail); border:2px dashed var(--c-coin); color:var(--c-coin-txt); } .coins-track__goal-i .ico{ width:22px; height:22px; } /* Накопили — замок открылся: пунктир становится сплошным, кружок заливается */ .coins-track__goal--open .coins-track__goal-i{ border-style:solid; background-image:linear-gradient(180deg,var(--c-coin),var(--c-coin-2)); color:var(--c-coin-ink); box-shadow:0 0 14px var(--c-glow); } .coins-track__goal-n{ display:flex; align-items:center; justify-content:center; margin-top:7px; font:800 14px/1.1 inherit; } /* Поля полной записью: auto слева от .ico ломает центрирование цены под замком */ .coins-track__goal-n .ico{ width:14px; height:14px; margin:0 4px 0 0; color:var(--c-coin-txt); } .coins-track__goal-t{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:3px; font-size:11px; line-height:1.25; color:var(--c-dim); overflow-wrap:break-word; overflow-wrap:anywhere; } /* ── Магазин ── */ .shop{ display:block; } /* Магазин не обновился: карточки на экране старые, и замок на них может врать. Говорит об этом строка .shop__stale над списком — она и есть предупреждение. Буквы НЕ гасим ничем. Прежнее гашение всего списка (opacity .55) держалось до возвращения связи и роняло цену, срок и описание до 2,3-4,0:1 во всех тринадцати темах: гость не мог прочитать цену, но нажать и купить по ней мог, а сервер проводит покупку по настоящей цене. Гашение значков тоже не годится: значок и в полную силу держит всего 3,50:1 в «Оранже» при норме 3,0. Сигнал даём формой, а не яркостью — рамка карточки идёт пунктиром, «цена под вопросом». Двойное имя в селекторе нужно, чтобы правило перебило рамки тем («Цех», «Изумруд»), которые задают свою и стоят ниже по файлу. */ .shop.shop--stale .shop-card{ border-style:dashed; } .shop__stale{ margin:0 2px 12px; text-align:center; font-size:12px; line-height:1.4; color:var(--c-dim); } .shop-card{ position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; width:100%; box-sizing:border-box; margin:0 0 10px; padding:12px 12px 10px; border:1px solid var(--c-line); border-radius:16px; background:var(--c-card); color:var(--c-text); font:inherit; text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none; } .shop-card:active{ transform:translateY(1px); } .shop-card__ico{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:12px; border-radius:12px; background:var(--c-card-2); color:var(--c-coin-txt); font-size:24px; line-height:1; } .shop-card__ico .ico{ width:24px; height:24px; } .shop-card__b{ flex:1 1 0; min-width:0; padding-right:28px; } /* место под замок */ /* display:block обязателен: app.js строит эти части как span, и без него название, описание и срок слипаются в один абзац без переносов. */ .shop-card__t{ display:block; font-size:15px; font-weight:800; line-height:1.25; overflow-wrap:break-word; overflow-wrap:anywhere; } .shop-card__n{ display:block; margin-top:3px; font-size:12px; line-height:1.35; color:var(--c-dim); overflow-wrap:break-word; overflow-wrap:anywhere; } /* Нижняя строка карточки: срок слева, цена справа. Отдельной строкой, а не в одном ряду с названием: на 360 точках цена отгрызала у названия полстроки. */ .shop-card__foot{ flex:1 0 100%; display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px dashed var(--c-line); } .shop-card__ttl{ min-width:0; font-size:12px; line-height:1.3; color:var(--c-dim); } .shop-card__price{ flex:0 0 auto; margin-left:10px; display:inline-flex; align-items:center; padding:7px 13px; border-radius:99px; background-color:var(--c-coin); background-image:linear-gradient(180deg,var(--c-coin),var(--c-coin-2)); color:var(--c-coin-ink); font:800 15px/1 inherit; white-space:nowrap; } /* Поля полной записью: .ico кладёт margin:0 auto, и один auto слева отодвигал монету с числом от левого края плашки — между значком и цифрой появлялся лишний зазор, а сама плашка выглядела набитой не по центру. */ .shop-card__price .ico{ width:15px; height:15px; margin:0 5px 0 0; } /* Замок, а не приглушённый текст, говорит «пока не по карману»: гасить буквы нельзя, они и так на пределе нормы. */ .shop-card__lock{ position:absolute; top:10px; right:10px; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--c-card-2); color:var(--c-dim); box-shadow:inset 0 0 0 1px var(--c-line); } .shop-card__lock .ico{ width:14px; height:14px; } /* Недоступный товар: плашка цены пустеет, но цифры остаются в полную силу. Второго имени .is-locked здесь больше нет — app.js его никогда не ставил. */ .shop-card--locked .shop-card__price{ background-image:none; background-color:transparent; color:var(--c-coin-txt); box-shadow:inset 0 0 0 1px var(--c-coin-txt); } /* ── История монет ── */ .chist{ display:block; } /* Ответ ещё в пути. Числа под подсвеченным месяцем в этот момент от прошлого запроса, и читать их нельзя: гасим их вместе со списком, а словами говорим строка ниже. Без этого гость видел цифры не того месяца и ничего об этом не знал — тост к тому времени уже погас. */ .chist--wait .chist-stats, .chist--wait .chist-list{ opacity:.35; } .chist__note{ margin:0 2px 10px; text-align:center; font-size:12px; line-height:1.4; color:var(--c-dim); } /* Не загрузилось — это не фоновое состояние, а причина не верить числам */ .chist__note--fail{ font-weight:700; color:var(--c-accent-txt); } .chist__empty{ margin:0; padding:22px 12px; text-align:center; font-size:13px; line-height:1.45; color:var(--c-dim); } .chist-stats{ display:flex; margin-bottom:12px; } .chist-stat{ flex:1 1 0; min-width:0; margin-right:8px; box-sizing:border-box; background:var(--c-card); border:1px solid var(--c-line); border-radius:14px; padding:11px 6px; text-align:center; } .chist-stat:last-child{ margin-right:0; } .chist-stat__num{ font-size:19px; font-weight:800; line-height:1.1; } /* Собранное — монетным, остальные два столбца обычным цветом: собрать монеты приятно, потратить и потерять — нет, и цветом это праздновать незачем. */ .chist-stat--in .chist-stat__num{ color:var(--c-coin-txt); } .chist-stat__label{ margin-top:3px; font-size:11px; line-height:1.2; color:var(--c-dim); } .chist-list{ background:var(--c-card); border:1px solid var(--c-line); border-radius:16px; padding:0 12px; } .chist-list__row{ display:flex; align-items:center; justify-content:space-between; min-height:46px; padding:9px 0; border-top:1px solid var(--c-line); } .chist-list__row:first-child{ border-top:0; } .chist-list__b{ min-width:0; flex:1 1 auto; margin-right:10px; } .chist-list__reason{ font-size:14px; font-weight:600; line-height:1.25; overflow-wrap:break-word; overflow-wrap:anywhere; } .chist-list__at{ margin-top:2px; font-size:11px; color:var(--c-dim); } .chist-list__delta{ flex:0 0 auto; font:800 15px/1 inherit; white-space:nowrap; color:var(--c-coin-txt); } .chist-list__delta--minus{ color:var(--c-dim); } /* ── Содержимое шторки кода ── Сама шторка — это .won (затемнение) и .won__sheet (лист снизу), общие со шторкой приза. Здесь только то, что внутри: белое поле кода, шесть цифр, подписи и отсчёт. Правил самой .prize-code (встроенная плитка под карточкой приза), её @keyframes codein, вариантов .prize-code[data-r] и парного .inv.is-open здесь больше нет: встроенной плитки в приложении не осталось ни одной, а на полноэкранной шторке её отрицательное поле открывало внизу экрана непокрытую полоску в 10 точек. */ /* Белое поле кода не красит ни одна тема: камере нужен чистый контраст, а полям вокруг кода — та самая «тихая зона», без неё сканер мажет. */ .prize-code__qr{ width:100%; max-width:250px; margin:0 auto; box-sizing:border-box; background:#fff; border-radius:14px; padding:12px; box-shadow:0 4px 18px rgba(0,0,0,.35); } .prize-code__qr svg{ width:100%; height:auto; display:block; } /* Пока код едет с сервера, коробка держит высоту сама — иначе список призов подпрыгивает в момент ответа. */ .prize-code__qr:empty{ min-height:250px; } .prize-code__digits{ display:inline-block; margin:14px 0 0; padding:9px 14px; /* letter-spacing вешает пустоту после последней цифры — справа поле меньше, иначе шесть цифр стоят левее середины. */ padding-right:calc(14px - .16em); border-radius:12px; background:var(--c-card); box-shadow:inset 0 0 0 1px var(--c-line); font:800 34px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.16em; } /* Строка «продиктуйте эти шесть цифр» — прямо под цифрами, без отрыва: это подпись к ним, а не отдельное примечание. */ .prize-code__sub{ margin-top:8px; font-size:12px; line-height:1.4; color:var(--c-dim); } .prize-code__hint{ margin:10px 2px 0; font-size:13px; line-height:1.4; color:var(--c-dim); } .prize-code__timer{ margin-top:7px; font-size:12px; color:var(--c-dim); } /* ── Кнопка демо-режима ── Пунктир намеренно: это ручка для съёмки, а не часть игры для гостя. Заливки нет, чтобы она не спорила с «Крутить». */ .again-btn{ display:flex; align-items:center; justify-content:center; width:100%; box-sizing:border-box; min-height:46px; padding:11px 16px; margin:2px 0 12px; border:1px dashed var(--c-accent-txt); border-radius:999px; background:transparent; color:var(--c-accent-txt); font:800 14px/1.15 inherit; cursor:pointer; -webkit-appearance:none; appearance:none; } /* Правила .again-btn .ico здесь нет: значка внутри кнопки нет ни в разметке, ни в app.js — это просто строка текста. */ .again-btn:active{ transform:translateY(1px); } /* ── Заставка и ошибка ── */ .splash,.fail{ position:fixed; top:0; right:0; bottom:0; left:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px calc(24px + env(safe-area-inset-right,0px)) calc(24px + var(--pad-b)) calc(24px + env(safe-area-inset-left,0px)); background:var(--c-bg); color:var(--c-text); text-align:center; z-index:40; box-sizing:border-box; } .splash__s{ width:34px; height:34px; border-radius:50%; border:3px solid var(--c-line); border-top-color:var(--c-accent); animation:spin 900ms linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .splash__t{ font-size:13px; color:var(--c-dim); margin-top:12px; } .fail__i{ font-size:44px; } .fail__t{ font-size:19px; font-weight:800; margin-top:12px; } .fail__s{ font-size:14px; color:var(--c-dim); max-width:320px; line-height:1.5; margin-top:10px; overflow-wrap:break-word; overflow-wrap:anywhere; } .fail .btn{ max-width:280px; margin-top:6px; } /* ── Экран приза ── */ .won{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:50; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:0; } .won__sheet{ width:100%; max-width:520px; box-sizing:border-box; background:var(--c-card); border:1px solid var(--c-line); border-bottom:0; border-radius:22px 22px 0 0; padding:22px 18px calc(18px + var(--pad-b)); text-align:center; max-height:92%; overflow-y:auto; animation:up 320ms cubic-bezier(.22,1,.36,1) both; } @keyframes up{ from{ transform:translateY(28px); opacity:0 } to{ transform:none; opacity:1 } } @media (prefers-reduced-motion:reduce){ .won__sheet{ animation:none } } .won__badge{ display:inline-block; margin-bottom:10px; padding:5px 12px; border-radius:99px; background:var(--r-legend); color:var(--r-legend-ink); font-size:11px; font-weight:800; } .won__i{ font-size:64px; line-height:1; } .won__rarity{ margin-top:8px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--r-common); } .won__rarity[data-r="rare"]{ color:var(--r-rare); } .won__rarity[data-r="epic"]{ color:var(--r-epic); } .won__rarity[data-r="legend"]{ color:var(--r-legend); } .won__title{ margin:6px 0 0; font-size:23px; font-weight:800; letter-spacing:-.01em; overflow-wrap:break-word; overflow-wrap:anywhere; } .won__note{ margin:8px 0 0; font-size:14px; color:var(--c-dim); overflow-wrap:break-word; overflow-wrap:anywhere; } /* Подписи «Сгорит через» тут больше нет: в #won-left приходит целая фраза, иначе получалось «Сгорит через приз сгорел». */ .won__timer{ margin:16px auto 0; padding:10px 14px; display:inline-block; max-width:100%; box-sizing:border-box; border-radius:12px; background:var(--c-card-2); } .won__timer-v{ font:800 16px/1.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow-wrap:break-word; overflow-wrap:anywhere; } .won__hint{ margin:14px 0 16px; font-size:13px; color:var(--c-dim); line-height:1.45; } /* Вторая награда за спин — монеты. Тем же приглушённым серым, что и служебные пояснения ниже, зритель ролика её не замечал: даём монетный цвет, вес и значок монеты. Это единственное место, где про монеты говорят в момент выдачи. Поля значка полной записью: auto слева от .ico растащил бы строку. */ .won__coins{ display:inline-flex; align-items:center; color:var(--c-coin-txt); font-weight:800; } .won__coins .ico{ width:16px; height:16px; margin:0 6px 0 0; } /* ── Шторка вопроса «Купить?» ── Та же шторка, что у приза, но это вопрос, а не праздник: значок товара вдвое меньше праздничного, зато строка про списание — главное в ней — набрана монетным цветом и жирным, как сама цена в магазине. */ .ask__i{ font-size:44px; } .ask__price{ margin-top:10px; font-weight:800; color:var(--c-coin-txt); } /* ── Тост: свой, а не showAlert. Одинаково работает в обеих дверях, не зависит от версии клиента и не может «залипнуть», как телеграмный попап. ── */ .toast{ position:fixed; left:50%; bottom:calc(84px + var(--pad-b)); transform:translate(-50%,14px); max-width:min(92vw,420px); box-sizing:border-box; padding:12px 16px; border-radius:12px; background:#1c1f26; color:#fff; border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.45); font-size:13px; line-height:1.4; text-align:center; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:60; overflow-wrap:break-word; overflow-wrap:anywhere; } .toast.on{ opacity:1; transform:translate(-50%,0); } /* Барабан красим темой заведения. wheel.js объявляет свои --wh-* прямо на .wheel, а объявление на элементе бьёт наследование от :root. Поэтому перекрываем правилом с большей специфичностью. */ html .wheel{ --wh-bg: var(--wheel-bg); --wh-card: var(--wheel-card); --wh-edge: var(--wheel-edge); --wh-txt: var(--wheel-txt); --wh-mark: var(--wheel-mark); } /* Свечение победителя и рамки редкости wheel.js красит своими цветами и про тему не знает: белое свечение на белой карточке гость не видел. Правим здесь — селекторы длиннее, значит бьют стиль из wheel.js, а сам файл не трогаем. Свечение победителя = цвет его редкости, отдельной переменной под него НЕТ и заводить не надо. Раньше тут стояла --wheel-won, объявленная во всех темах, но правило с ней имело вес меньше, чем четыре правила по редкости ниже, а data-r wheel.js вешает на каждую карточку — значит переменная не рисовала ничего никогда. Правил её править бесполезно: меняйте цвета редкости. У четырёх светлых тем победитель вообще не светится, а чернеет — светлого свечения на светлом экране не видно; эти правила в самом низу файла. */ html .wheel .wcard[data-r="common"]:after{ color:var(--r-common); } html .wheel .wcard[data-r="rare"]:after{ color:var(--r-rare); } html .wheel .wcard[data-r="epic"]:after{ color:var(--r-epic); } html .wheel .wcard[data-r="legend"]:after{ color:var(--r-legend); } /* Рамку красим и у обычной карточки тоже: владелец просил, чтобы все карточки на экране различались цветом рамки. Раньше обычная оставалась серой и две скидки подряд выглядели одинаково. */ html .wheel .wcard[data-r="common"]{ border-color:var(--r-common); } html .wheel .wcard[data-r="rare"]{ border-color:var(--r-rare); } html .wheel .wcard[data-r="epic"]{ border-color:var(--r-epic); } html .wheel .wcard[data-r="legend"]{ border-color:var(--r-legend); } /* Узкие телефоны (360 точек и меньше). Подписи счётчиков тут больше не уменьшаем: 10px и так были нечитаемы. */ @media (max-width:360px){ .spins__n{ font-size:17px; } /* Шесть цифр в 34px на 320 точках упираются в края плитки вместе с разрядкой */ .prize-code__digits{ font-size:28px; letter-spacing:.12em; } .won__i{ font-size:54px; } .ask__i{ font-size:38px; } .won__title{ font-size:21px; } /* Три плитки истории делят 292 точки на троих: сужаем поля, а не подписи — 11px это нижняя читаемая граница, ниже опускаться нельзя. */ .chist-stat{ padding:11px 3px; } .coins-balance{ font-size:36px; } .coins-balance__ico{ width:27px; height:27px; margin:0 8px 0 0; } /* Три плитки кабинета делят те же 332 точки: по 105 на плитку. Пятизначное число монет за всё время в 22px туда упирается, в 19px — входит с запасом. */ .prof-stat__n{ font-size:19px; } } /* ══════════════════════════════════════════════════════════════════════ ИНДУСТРИАЛЬНАЯ ТЕМА: оформление Разметка общая со всеми темами, поэтому тут только правила с префиксом [data-theme="industrial"]. Ни одна строчка выше не тронута — остальные четыре темы работают ровно как раньше. ══════════════════════════════════════════════════════════════════════ */ /* ── Бетон ── Плоской заливки нет: зерно, две большие засветки-затемнения (будто плита лежала неровно), редкие косые потёртости и общий градиент. Всё слоями, ни одного файла картинки. Прозрачности подобраны так, чтобы белый текст поверх держал 14:1 — фактура видна, но читать не мешает. */ [data-theme="industrial"] body, [data-theme="industrial"] .splash, [data-theme="industrial"] .fail{ background-color:#1c1c1c; background-image: var(--i-grain), radial-gradient(ellipse 130% 55% at 16% 4%,rgba(255,255,255,.06),rgba(255,255,255,0) 62%), radial-gradient(ellipse 100% 55% at 86% 96%,rgba(0,0,0,.50),rgba(0,0,0,0) 70%), repeating-linear-gradient(101deg, rgba(255,255,255,.016),rgba(255,255,255,.016) 2px, rgba(0,0,0,0) 2px,rgba(0,0,0,0) 11px), linear-gradient(180deg,#242423 0%,#1b1b1a 52%,#141413 100%); background-size:150px 150px,auto,auto,auto,auto; background-repeat:repeat,no-repeat,no-repeat,repeat,no-repeat; } /* ── Предупреждающие полосы по верхнему и нижнему краю экрана ── Референс держится на этой симметрии, поэтому полосы две и обе по краю. Верхняя стоит на --pad-t, а не на нуле: в полноэкранном режиме Telegram безопасная зона доходит до 59 точек, и полоса ушла бы под часы и сеть. Нижняя ложится в отступ --pad-b (минимум 22 точки) под подписями вкладок — ни текста, ни полосы жестов iPhone не задевает. z-index 45: видны и поверх заставки, но ниже шторки приза (50). */ [data-theme="industrial"] body:before, [data-theme="industrial"] body:after{ content:""; position:fixed; left:0; right:0; height:9px; z-index:45; pointer-events:none; background-image: linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.42)), var(--i-hazard); } [data-theme="industrial"] body:before{ top:var(--pad-t); box-shadow:0 1px 0 rgba(0,0,0,.75); } [data-theme="industrial"] body:after{ bottom:0; background-image: linear-gradient(0deg,rgba(255,255,255,.16),rgba(0,0,0,.42)), var(--i-hazard); box-shadow:0 -1px 0 rgba(0,0,0,.75); } /* ── Пластины: раскладка заклёпок ── Шесть слоёв фона у всех одинаковые по геометрии, разные по цвету. Заклёпка — слой фона, поэтому лишних элементов в разметке не нужно. */ [data-theme="industrial"] .card, [data-theme="industrial"] .btn--main, [data-theme="industrial"] .btn--ghost, [data-theme="industrial"] .won__sheet{ background-color:transparent; background-size:var(--i-rl-size); background-position:var(--i-rl-pos); background-repeat:var(--i-r-rep); } [data-theme="industrial"] .spins__box, [data-theme="industrial"] .inv, [data-theme="industrial"] .banner, [data-theme="industrial"] .note, [data-theme="industrial"] .wheel .wcard{ background-color:transparent; background-size:var(--i-rs-size); background-position:var(--i-rs-pos); background-repeat:var(--i-r-rep); } /* Тёмные пластины */ [data-theme="industrial"] .card, [data-theme="industrial"] .btn--ghost, [data-theme="industrial"] .won__sheet, [data-theme="industrial"] .spins__box, [data-theme="industrial"] .inv, [data-theme="industrial"] .note, [data-theme="industrial"] .wheel .wcard{ background-image:var(--i-riv),var(--i-riv),var(--i-riv),var(--i-riv), var(--i-grain-lite),var(--i-plate); } /* Раскалённые пластины */ [data-theme="industrial"] .btn--main, [data-theme="industrial"] .banner{ background-image:var(--i-riv-hot),var(--i-riv-hot),var(--i-riv-hot),var(--i-riv-hot), var(--i-grain-lite),var(--i-plate-hot); } /* Углы у промышленного железа почти прямые, рамка светло-серая */ [data-theme="industrial"] .card{ border-radius:6px; border:1px solid var(--c-line); box-shadow:var(--i-emboss),0 2px 0 rgba(0,0,0,.45),0 7px 16px rgba(0,0,0,.38); } /* ── Шапка ── Приветствие остаётся обычной строкой: имя приходит с сервера, бывает любой длины и обрезается многоточием — плакатом такое делать нельзя. От темы ему достаётся только шрифт и разрядка. */ [data-theme="industrial"] .top__hi{ font-family:var(--f-poster); font-weight:600; font-size:17px; letter-spacing:.05em; text-transform:uppercase; } /* ── Плакатный заголовок ── Узкий капс, металлический перелив сверху вниз. Обводку и тень даёт filter: при background-clip:text буквы залиты прозрачным, и обычный text-shadow просвечивал бы сквозь них насквозь. drop-shadow работает по готовой картинке, поэтому ведёт себя правильно. */ [data-theme="industrial"] .poster{ display:block; text-align:center; margin:2px 0 14px; } [data-theme="industrial"] .poster__t{ margin:0; font-family:var(--f-poster); font-weight:700; font-size:32px; line-height:1.06; letter-spacing:.06em; text-transform:uppercase; color:var(--c-accent); filter:drop-shadow(0 1px 0 rgba(12,9,2,.95)) drop-shadow(0 2px 0 rgba(12,9,2,.80)) drop-shadow(0 4px 7px rgba(0,0,0,.60)); } /* Если браузер не умеет background-clip:text — остаётся сплошной жёлтый выше, и заголовок не пропадает. Тёмный стоп поднят с #c9720a до #d9820f: на нём буквы дают 4,3:1 и перестают зависеть от послабления для крупного текста. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ [data-theme="industrial"] .poster__t{ background-image:linear-gradient(180deg, #fff3c4 0%,#ffd24a 32%,#f5a81a 56%,#d9820f 80%,#ffcf55 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } } [data-theme="industrial"] .poster__s{ margin:7px 0 0; font-size:13px; font-weight:700; line-height:1.35; color:#ecebe6; /* 10,9:1 на бетоне */ } [data-theme="industrial"] .top__venue{ font-family:var(--f-poster); font-weight:500; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#e6e4dd; /* 13,3:1 на бетоне */ margin-top:3px; } [data-theme="industrial"] .chip{ border-radius:3px; border:1px solid var(--c-line); background-color:#2a2a28; background-image:var(--i-grain-lite),var(--i-plate); background-size:150px 150px,auto; background-repeat:repeat,no-repeat; font-family:var(--f-poster); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; box-shadow:var(--i-emboss); } [data-theme="industrial"] .h2{ font-family:var(--f-poster); font-weight:700; font-size:24px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-accent-txt); text-shadow:0 1px 0 rgba(0,0,0,.85),0 3px 7px rgba(0,0,0,.55); } /* ── Счастливый час: раскалённая пластина ── */ [data-theme="industrial"] .banner{ border-radius:6px; border:1px solid #6b4405; box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(126,76,4,.7), 0 3px 0 rgba(0,0,0,.45),0 8px 18px rgba(0,0,0,.4); } [data-theme="industrial"] .banner b{ font-family:var(--f-poster); font-weight:700; font-size:17px; letter-spacing:.06em; text-transform:uppercase; } /* ── Шкала-датчик ── Утопленная прорезь в металле, заливка в косую штриховку под ту же полосу. */ [data-theme="industrial"] .bar{ height:7px; border-radius:2px; background:#131312; border:1px solid #3c3c37; box-shadow:inset 0 1px 3px rgba(0,0,0,.85); } [data-theme="industrial"] .bar--thin{ height:5px; } [data-theme="industrial"] .bar__fill{ border-radius:1px; background-color:var(--c-accent); background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.22),rgba(0,0,0,.22) 4px, rgba(0,0,0,0) 4px,rgba(0,0,0,0) 8px); } [data-theme="industrial"] .pity__num, [data-theme="industrial"] .inv__left{ font-family:var(--f-poster); font-weight:600; letter-spacing:.06em; } /* ── Три счётчика ── */ [data-theme="industrial"] .spins__box{ border-radius:6px; border:1px solid var(--c-line); box-shadow:var(--i-emboss),0 2px 0 rgba(0,0,0,.45); } [data-theme="industrial"] .spins__box.is-on{ border-color:var(--c-accent); box-shadow:var(--i-emboss),0 0 0 1px var(--c-accent) inset,0 0 14px var(--c-glow); } [data-theme="industrial"] .spins__n{ font-family:var(--f-poster); font-weight:700; font-size:23px; letter-spacing:.03em; } [data-theme="industrial"] .spins__t{ font-family:var(--f-poster); font-weight:500; letter-spacing:.07em; text-transform:uppercase; } /* ── Лента призов ── Селекторы длиннее, чем в wheel.js, поэтому бьют его стиль, а сам файл цел. */ /* Окошко ленты тут в рамке, и оно на 2 точки выше — столько же занимаем заранее */ [data-theme="industrial"] .wheel-box{ min-height:156px; } [data-theme="industrial"] .wheel__vp{ border-radius:8px; border:1px solid #46463f; background-color:#151514; background-image:var(--i-grain), linear-gradient(180deg,#101010 0%,#191918 50%,#0d0d0c 100%); background-size:150px 150px,auto; background-repeat:repeat,no-repeat; box-shadow:inset 0 3px 9px rgba(0,0,0,.85),inset 0 -2px 7px rgba(0,0,0,.7); } /* Указатель. Сама линия почти прозрачная — иначе она резала бы карточку пополам; работают треугольники сверху и снизу, направленные друг на друга. */ [data-theme="industrial"] .wheel .wheel__mark{ background:rgba(255,194,26,.28); box-shadow:none; } [data-theme="industrial"] .wheel .wheel__mark:before, [data-theme="industrial"] .wheel .wheel__mark:after{ margin-left:-8px; border-left-width:8px; border-right-width:8px; filter:drop-shadow(0 0 3px rgba(255,194,26,.55)); } [data-theme="industrial"] .wheel .wheel__mark:before{ border-top-width:10px; } [data-theme="industrial"] .wheel .wheel__mark:after{ border-bottom-width:10px; } [data-theme="industrial"] .wheel .wcard{ border-radius:6px; border:1px solid #5a5a52; color:var(--wheel-txt); box-shadow:var(--i-emboss),0 2px 0 rgba(0,0,0,.5); } /* Название в две строки, а не в три: третью строку занимает подпись .wcard__s, и вместе они должны уложиться в 132 точки высоты карточки. */ [data-theme="industrial"] .wheel .wcard__t{ font-family:var(--f-poster); font-weight:600; font-size:13px; line-height:1.18; letter-spacing:.04em; text-transform:uppercase; -webkit-line-clamp:2; } /* Подпись помельче под названием — третья строка карточки из референса. Цвет не задаём: opacity сохраняет и светлый текст на металле, и тёмный на жёлтой карточке-победителе. */ [data-theme="industrial"] .wheel .wcard__s{ display:-webkit-box; margin-top:3px; font-family:var(--f-poster); font-weight:400; font-size:10px; line-height:1.2; letter-spacing:.02em; opacity:.78; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Ореол победителя рисует wheel.js с радиусом 16px — на пластине в 6px он отходил от углов и висел в воздухе. 8px, а не 6px: псевдоэлемент растянут на 2 точки наружу со всех сторон. */ [data-theme="industrial"] .wheel .wcard:after{ border-radius:8px; } /* Редкость подсвечивает пластину изнутри, рамку красит правило html .wheel выше */ [data-theme="industrial"] .wheel .wcard[data-r="rare"]{ box-shadow:var(--i-emboss),inset 0 0 20px rgba(106,182,255,.20),0 2px 0 rgba(0,0,0,.5); } [data-theme="industrial"] .wheel .wcard[data-r="epic"]{ box-shadow:var(--i-emboss),inset 0 0 20px rgba(196,154,255,.22),0 2px 0 rgba(0,0,0,.5); } [data-theme="industrial"] .wheel .wcard[data-r="legend"]{ box-shadow:var(--i-emboss),inset 0 0 22px rgba(255,138,82,.26),0 2px 0 rgba(0,0,0,.5); } /* Активная карточка. Идёт после правил редкости намеренно: вес селекторов одинаковый, решает порядок — иначе редкость перекрывала бы заливку. */ [data-theme="industrial"] .wheel .wcard.is-won{ border-color:#8a5806; color:#191204; background-image:var(--i-riv-hot),var(--i-riv-hot),var(--i-riv-hot),var(--i-riv-hot), var(--i-grain-lite),var(--i-plate-hot); box-shadow:inset 0 2px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(140,84,4,.7), 0 0 20px rgba(255,194,26,.45); } /* ── Главная кнопка ── */ [data-theme="industrial"] .btn{ border-radius:6px; } [data-theme="industrial"] .btn--main{ border:1px solid #6b4405; color:var(--c-on-accent); /* 7,6:1 на тёмном крае градиента */ font-family:var(--f-poster); font-weight:700; font-size:22px; letter-spacing:.1em; text-transform:uppercase; min-height:56px; box-shadow:inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(126,76,4,.72), 0 3px 0 #120d04,0 9px 20px rgba(0,0,0,.5); } [data-theme="industrial"] .btn--main:active{ box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 1px 0 #120d04; } /* Заблокированная кнопка: правило .btn--main[disabled] выше весит столько же, сколько [data-theme] .btn--main, — нужен селектор длиннее, иначе кнопка осталась бы жёлтой и звала нажимать. */ [data-theme="industrial"] .btn--main[disabled], [data-theme="industrial"] .btn--main[aria-disabled="true"]{ border:1px solid #3c3c37; color:var(--c-dim); background-color:transparent; background-image:var(--i-riv),var(--i-riv),var(--i-riv),var(--i-riv), var(--i-grain-lite),var(--i-plate); box-shadow:inset 0 2px 5px rgba(0,0,0,.6); } [data-theme="industrial"] .btn--ghost{ border:1px solid var(--c-line); color:var(--c-text); font-family:var(--f-poster); font-weight:500; font-size:15px; letter-spacing:.09em; text-transform:uppercase; box-shadow:var(--i-emboss),0 2px 0 rgba(0,0,0,.45); } /* ── Подписи над обеими полосами ── Плакатным шрифтом, как и остальные мелкие подписи темы. Правила для .wheel-note здесь больше нет: подписи о направлении ленты в разметке нет. */ [data-theme="industrial"] .pity__kicker, [data-theme="industrial"] .coins-goal__label{ font-family:var(--f-poster); font-weight:500; letter-spacing:.1em; } /* ── Плашка-пояснение над кнопкой ── Пластина с рамкой, заклёпками и жёлтым кружком «i». Пластина в теме одна: раньше её роль играл ещё и #spin-hint под кнопкой, и значков «i» выходило два. */ [data-theme="industrial"] .note{ border-radius:6px; border:1px solid var(--c-line); box-shadow:var(--i-emboss),0 2px 0 rgba(0,0,0,.4); } [data-theme="industrial"] .note__i{ width:20px; height:20px; box-shadow:0 1px 0 rgba(0,0,0,.6); } [data-theme="industrial"] .note__t{ font-size:13px; /* 5,4:1 на светлом крае пластины */ } /* Подпись под кнопкой — по референсу обычная мелкая строка, без пластины: в неё app.js кладёт свой текст про попытки, и второй плашкой она быть не должна. */ [data-theme="industrial"] #spin-hint{ font-family:var(--f-poster); font-weight:400; font-size:13px; letter-spacing:.04em; } /* ── Мои призы ── */ [data-theme="industrial"] .inv{ border-radius:6px; border:1px solid var(--c-line); border-left:5px solid var(--r-common); box-shadow:var(--i-emboss),0 2px 0 rgba(0,0,0,.45); } [data-theme="industrial"] .inv[data-r="rare"]{ border-left-color:var(--r-rare); } [data-theme="industrial"] .inv[data-r="epic"]{ border-left-color:var(--r-epic); } [data-theme="industrial"] .inv[data-r="legend"]{ border-left-color:var(--r-legend); } [data-theme="industrial"] .inv__t{ font-family:var(--f-poster); font-weight:600; font-size:16px; letter-spacing:.03em; } [data-theme="industrial"] .inv__major, [data-theme="industrial"] .won__badge{ border-radius:3px; letter-spacing:.08em; box-shadow:0 1px 0 rgba(0,0,0,.55); } [data-theme="industrial"] .empty__t, [data-theme="industrial"] .fail__t{ font-family:var(--f-poster); font-weight:700; letter-spacing:.06em; text-transform:uppercase; } /* Оправу белого поля кода тема правит ниже, вместе с остальным экраном монет: правило .qr-box отсюда убрано, оно повторяло .prize-code__qr слово в слово. */ [data-theme="industrial"] .prof-link__in{ border-radius:4px; border:1px solid #3c3c37; background:#141413; color:var(--c-dim); /* 8,53:1 на этом фоне */ box-shadow:inset 0 1px 3px rgba(0,0,0,.8); } /* ── Личный кабинет ── Плитки счётчиков — такие же мелкозаклёпочные пластины, как счётчики на «Игре»; значок в шапке и «Назад» — гладкие пластины, как плашка монет. */ [data-theme="industrial"] .prof-stat{ border-radius:6px; border:1px solid var(--c-line); box-shadow:var(--i-emboss),0 2px 0 rgba(0,0,0,.45); background-color:transparent; background-size:var(--i-rs-size); background-position:var(--i-rs-pos); background-repeat:var(--i-r-rep); background-image:var(--i-riv),var(--i-riv),var(--i-riv),var(--i-riv), var(--i-grain-lite),var(--i-plate); } [data-theme="industrial"] .prof-stat__n{ font-family:var(--f-poster); font-weight:700; font-size:23px; letter-spacing:.03em; } [data-theme="industrial"] .prof-stat__t, [data-theme="industrial"] .prof-stats__t{ font-family:var(--f-poster); font-weight:500; letter-spacing:.07em; text-transform:uppercase; } [data-theme="industrial"] .prof-tier__t{ font-family:var(--f-poster); font-weight:700; letter-spacing:.05em; text-transform:uppercase; } [data-theme="industrial"] .head-prof, [data-theme="industrial"] .prof-back{ border:1px solid var(--c-line); background-color:#2a2a28; background-image:var(--i-grain-lite),var(--i-plate); background-size:150px 150px,auto; background-repeat:repeat,no-repeat; box-shadow:var(--i-emboss); } [data-theme="industrial"] .prof-back{ border-radius:6px; } [data-theme="industrial"] .prof-back__t{ font-family:var(--f-poster); font-weight:600; letter-spacing:.08em; text-transform:uppercase; } /* Нажатый значок — раскалённая пластина. Правило обязано быть здесь: у общего .head-prof[aria-expanded] тот же вес селектора, и пластина выше перебила бы его просто потому, что стоит ниже в файле. */ [data-theme="industrial"] .head-prof[aria-expanded="true"]{ background-color:var(--c-accent); background-image:var(--i-grain-lite),var(--i-plate-hot); color:var(--c-on-accent); border-color:#6b4405; } /* ── Шторка приза ── */ [data-theme="industrial"] .won__sheet{ border-radius:10px 10px 0 0; border:1px solid var(--c-line); border-bottom:0; box-shadow:0 -8px 28px rgba(0,0,0,.6); } [data-theme="industrial"] .won__rarity{ font-family:var(--f-poster); font-weight:600; font-size:13px; letter-spacing:.16em; } [data-theme="industrial"] .won__title{ font-family:var(--f-poster); font-weight:700; font-size:26px; letter-spacing:.05em; text-transform:uppercase; } [data-theme="industrial"] .won__timer{ border-radius:4px; background:#141413; border:1px solid #3c3c37; box-shadow:inset 0 1px 3px rgba(0,0,0,.8); } /* ── Нижняя панель: стальная пилюля ── Полосы опасности здесь нет, она ушла на нижний край экрана (body:after). Пластина светлая: пилюля обязана быть противоположна бетону, иначе панель перестаёт быть отдельным предметом. Слоёв четыре: две заклёпки по торцам, зерно, металл. Число слоёв в image, size, position и repeat обязано совпадать. Форму (овал) тема не трогает — она общая для всех шести. */ [data-theme="industrial"] .tabbar, [data-theme="industrial"] .pillswitch{ border:1px solid #a9a89f; background-color:#dcdbd4; background-image: var(--i-riv),var(--i-riv), var(--i-grain-lite), linear-gradient(180deg,#ecebe3 0%,#dcdbd4 46%,#c2c1b9 100%); background-size:8px 8px,8px 8px,150px 150px,auto; background-position:14px 50%,calc(100% - 14px) 50%,0 0,0 0; background-repeat:no-repeat,no-repeat,repeat,no-repeat; box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.28), 0 4px 0 rgba(0,0,0,.45),0 10px 22px rgba(0,0,0,.45); } [data-theme="industrial"] .pillswitch{ box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.28), 0 2px 0 rgba(0,0,0,.4); } [data-theme="industrial"] .tabbar__btn, [data-theme="industrial"] .pillswitch__btn{ font-family:var(--f-poster); font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; } /* Активная вкладка — прорезанное в пластине окно с горящей надписью. Тень внутрь, а не наружу: капсула утоплена, а не наклеена. */ [data-theme="industrial"] .tabbar__btn--active, [data-theme="industrial"] .pillswitch__btn--active{ background-color:#1b1b1a; background-image:var(--i-grain-lite), linear-gradient(180deg,#101010 0%,#1e1e1c 55%,#141413 100%); background-size:150px 150px,auto; background-repeat:repeat,no-repeat; box-shadow:inset 0 3px 7px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.5); } /* Иконка. Фильтра нет: контурный svg берёт цвет от кнопки через currentColor, а фильтр сначала гасил его в серый, потом красил заново. */ [data-theme="industrial"] .tabbar__ico{ opacity:.92; } [data-theme="industrial"] .tabbar__btn--active .tabbar__ico{ opacity:1; } /* ── Экран монет: пластины и датчики ── */ [data-theme="industrial"] .coins-head, [data-theme="industrial"] .shop-card, [data-theme="industrial"] .chist-stat, [data-theme="industrial"] .chist-list{ border-radius:6px; border:1px solid var(--c-line); background-color:transparent; background-image:var(--i-riv),var(--i-riv),var(--i-riv),var(--i-riv), var(--i-grain-lite),var(--i-plate); background-size:var(--i-rl-size); background-position:var(--i-rl-pos); background-repeat:var(--i-r-rep); box-shadow:var(--i-emboss),0 2px 0 rgba(0,0,0,.45); } [data-theme="industrial"] .chist-stat__label{ font-family:var(--f-poster); font-weight:500; letter-spacing:.09em; text-transform:uppercase; } [data-theme="industrial"] .coins-balance, [data-theme="industrial"] .chist-stat__num, [data-theme="industrial"] .coins-goal__num, [data-theme="industrial"] .coins-track__badge, [data-theme="industrial"] .coins-track__goal-n, [data-theme="industrial"] .shop-card__price, [data-theme="industrial"] .chist-list__delta{ font-family:var(--f-poster); font-weight:700; letter-spacing:.03em; } [data-theme="industrial"] .shop-card__t{ font-family:var(--f-poster); font-weight:600; font-size:16px; letter-spacing:.03em; } /* Прорезь монетной полосы — тот же утопленный паз, что у датчика на «Игре», но вдвое шире и с насечками: две шкалы обязаны различаться. */ [data-theme="industrial"] .coins-track__rail{ border-radius:3px; background:#131312; border:1px solid #3c3c37; box-shadow:inset 0 1px 4px rgba(0,0,0,.9); } [data-theme="industrial"] .coins-track__fill{ border-radius:2px; } [data-theme="industrial"] .coins-track__badge{ border-radius:3px; } [data-theme="industrial"] .shop-card__ico, [data-theme="industrial"] .shop-card__lock{ border-radius:4px; } /* Плашка «Показать код» — тоже прямые углы: в «Цехе» капсул нет нигде, и круглая плашка на «Моих призах» осталась бы единственной. */ [data-theme="industrial"] .inv__code{ border-radius:4px; } [data-theme="industrial"] .shop-card__price, [data-theme="industrial"] .again-btn{ border-radius:4px; } [data-theme="industrial"] .again-btn{ font-family:var(--f-poster); font-weight:500; font-size:15px; letter-spacing:.09em; text-transform:uppercase; } /* Белое поле кода не красим, только оправу */ [data-theme="industrial"] .prize-code__qr{ border-radius:4px; box-shadow:0 0 0 2px #55554e,0 3px 0 rgba(0,0,0,.5); } [data-theme="industrial"] .prize-code__digits{ border-radius:4px; background:#141413; box-shadow:inset 0 1px 3px rgba(0,0,0,.8); } /* ── Тост ── */ [data-theme="industrial"] .toast{ border-radius:4px; background-color:#242422; background-image:var(--i-grain-lite),linear-gradient(180deg,#33332f,#1e1e1c); background-size:150px 150px,auto; background-repeat:repeat,no-repeat; border:1px solid #4d4d47; border-left:3px solid var(--c-accent); color:#f0efe9; } /* Узкие телефоны: плакатный шрифт узкий, но 24px заголовка на 320 точках вместе с плашкой уровня всё равно упирается в край. */ @media (max-width:360px){ [data-theme="industrial"] .poster__t{ font-size:27px; } [data-theme="industrial"] .h2{ font-size:21px; } [data-theme="industrial"] .btn--main{ font-size:19px; letter-spacing:.08em; } [data-theme="industrial"] .won__title{ font-size:23px; } [data-theme="industrial"] .spins__n{ font-size:20px; } } /* ══════════════════════════════════════════════════════════════════════ ИЗУМРУДНАЯ ТЕМА: оформление Разметка общая со всеми темами, поэтому тут только правила с префиксом [data-theme="emerald"] и только про цвет, градиент и тень. Ни одного правила про размер, отступ, шрифт или анимацию — ни одна строка выше не тронута, остальные пять тем работают ровно как раньше. Три места усилены намеренно: их зритель ролика читает без звука. ══════════════════════════════════════════════════════════════════════ */ /* ── Фон ── Плоская заливка плюс мягкая изумрудная засветка сверху и затемнение снизу: шапка не висит в пустоте, а кремовая кнопка внизу бьёт по самому тёмному месту экрана. Поверх засветки основной текст держит 11,74:1, подписи 7,81:1. */ [data-theme="emerald"] body, [data-theme="emerald"] .splash, [data-theme="emerald"] .fail{ background-color:#021a13; background-image: radial-gradient(ellipse 120% 58% at 50% 0%,rgba(6,78,59,.45),rgba(6,78,59,0) 70%), radial-gradient(ellipse 100% 46% at 50% 100%,rgba(0,0,0,.45),rgba(0,0,0,0) 72%); background-repeat:no-repeat,no-repeat; } /* ── 1. Кнопка «Крутить» ── Кремовая плашка на почти чёрном изумруде: 15,7:1 к фону. Светлая линия по верхнему краю и кремовый ореол снизу — в кадре это первое, что видит глаз. */ [data-theme="emerald"] .btn--main{ box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 30px rgba(248,231,201,.24); } /* Заблокированная кнопка гаснет совсем: ореол у неё звал бы нажимать. */ [data-theme="emerald"] .btn--main[disabled], [data-theme="emerald"] .btn--main[aria-disabled="true"]{ box-shadow:inset 0 0 0 1px rgba(248,231,201,.12); } /* Второстепенные кнопки («Закрыть», «Скопировать ссылку») прозрачные, и рамка — единственное, что делает их кнопкой. Общая --c-line даёт 1,54:1 и выглядит как строка текста; 50% крема — 3,17:1, край видно. Правим только у изумруда: базовое правило общее на все шесть тем. */ [data-theme="emerald"] .btn--ghost{ border-color:rgba(248,231,201,.5); } /* ── 2. Полоса «до крупного приза» ── Главное отличие от конкурента. Карточку обводит тёплый кант, прорезь уходит в самый тёмный изумруд, заливка кремовая и светится — полосу видно издалека. */ [data-theme="emerald"] .pity{ box-shadow:inset 0 0 0 1px rgba(248,231,201,.28); } [data-theme="emerald"] .bar{ background:#021a13; box-shadow:inset 0 1px 3px rgba(0,0,0,.6); } [data-theme="emerald"] .bar__fill{ box-shadow:0 0 10px rgba(248,231,201,.55); } /* ── 3. Момент остановки ленты ── Внутреннюю подсветку карточек редкости wheel.js зашивает кислотными цветами (синий, фиолетовый, оранжевый) и про тему не знает. Рамку и ореол тема уже перебила выше, а подсветку — нет: оранжевая на изумрудной карточке уводила край в хаки, то есть кислотный оттенок оставался в кадре. Перекрываем теми же цветами, что и рамка. Так же поступила индустриальная тема. */ [data-theme="emerald"] .wheel .wcard[data-r="common"]{ box-shadow:inset 0 0 22px rgba(90,169,255,.18); } [data-theme="emerald"] .wheel .wcard[data-r="rare"]{ box-shadow:inset 0 0 22px rgba(255,122,107,.20); } [data-theme="emerald"] .wheel .wcard[data-r="epic"]{ box-shadow:inset 0 0 22px rgba(192,139,255,.20); } [data-theme="emerald"] .wheel .wcard[data-r="legend"]{ box-shadow:inset 0 0 22px rgba(255,194,77,.20); } /* Выигравшая карточка становится кремовой — тем же цветом, что и кнопка: зритель без звука сразу понимает, что лента встала на приз. Стоит после правил редкости намеренно: вес селекторов одинаковый, решает порядок — иначе подсветка редкости перебила бы свечение победителя. */ [data-theme="emerald"] .wheel .wcard.is-won{ background:linear-gradient(180deg,#fdf3e0,#f8e7c9 55%,#e8d2a4); border-color:#05372a; color:#05372a; /* 10,88:1 на креме */ box-shadow:0 0 26px rgba(248,231,201,.45); } /* Своего правила для указателя у темы нет намеренно: линия берёт кремовый --wheel-mark сплошным, как во всех остальных темах. На ходу это единственная метка, куда встанет лента (7,99:1 на карточке, 15,79:1 в зазоре). Карточку-победителя она не разрезает: крем на креме даёт 1,1:1 — не видно. */ /* Тёплый кант вокруг самой ленты: в кадре она читается как отдельный прибор */ [data-theme="emerald"] .wheel__vp{ box-shadow:inset 0 0 0 1px rgba(248,231,201,.14); } /* ── Шторка приза: событие, а не обычный экран ── Затемнение под ней уходит в изумруд, у самой шторки светящийся кремовый кант. Подсветку внутрь шторки не кладём намеренно: она села бы под текст редкости и уронила бы его контраст ниже нормы. */ [data-theme="emerald"] .won{ background:rgba(1,15,11,.82); } [data-theme="emerald"] .won__sheet{ border-color:rgba(248,231,201,.5); box-shadow:0 -1px 0 rgba(248,231,201,.55),0 -18px 50px rgba(248,231,201,.12); } [data-theme="emerald"] .won__timer{ box-shadow:inset 0 0 0 1px rgba(248,231,201,.14); } /* ── Плашка счастливого часа ── Не кремовая: второй большой кремовый прямоугольник отобрал бы у кнопки роль самого заметного пятна. Изумрудная пластина с тёплым кантом, текст кремовый. */ [data-theme="emerald"] .banner{ background:linear-gradient(135deg,#0a6a4f,#064e3b); color:var(--c-text); /* 5,42:1 на светлом крае градиента */ box-shadow:inset 0 0 0 1px rgba(248,231,201,.35),0 6px 22px rgba(0,0,0,.35); } /* ── Три счётчика ── */ [data-theme="emerald"] .spins__box.is-on{ box-shadow:0 0 0 1px var(--c-accent) inset,0 0 14px rgba(248,231,201,.22); } /* ── Панель вкладок ── Кремовая пилюля на почти чёрном изумруде: 13,39:1 к фону, состояние видно площадью и цветом, а не оттенком мелких букв. Крем взят на полтона глуше кнопки «Крутить» (#ecdcbc против #f8e7c9): второе такое же яркое пятно отобрало бы у кнопки роль главного в кадре. Активная вкладка — капсула глубокого изумруда с кремовыми буквами, то есть та же пара цветов навыворот. */ [data-theme="emerald"] .tabbar, [data-theme="emerald"] .pillswitch{ background:linear-gradient(180deg,#f3e5c9 0%,#ecdcbc 55%,#dfcda6 100%); border-color:rgba(2,26,19,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 24px rgba(0,0,0,.45); } [data-theme="emerald"] .pillswitch{ box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 12px rgba(0,0,0,.3); } [data-theme="emerald"] .tabbar__btn--active, [data-theme="emerald"] .pillswitch__btn--active{ background:linear-gradient(180deg,#05372a,#02201a); box-shadow:inset 0 1px 0 rgba(248,231,201,.22),0 2px 8px rgba(0,0,0,.45); } /* ── Экран монет ── Кант у шапки тот же тёплый, что у карточки «до крупного приза»: обе шапки с полосой — родня. А вот сами полосы разведены нарочно: на «Игре» заливка кремовая и светится кремовым, тут — золотая, толще и в насечках. */ [data-theme="emerald"] .coins-head{ box-shadow:inset 0 0 0 1px rgba(248,231,201,.28); } [data-theme="emerald"] .coins-track__rail{ background:#021a13; box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset 0 1px 3px rgba(0,0,0,.6); } [data-theme="emerald"] .coins-track__fill{ box-shadow:0 0 10px rgba(255,194,77,.5); } [data-theme="emerald"] .coins-track__goal--open .coins-track__goal-i{ box-shadow:0 0 16px rgba(255,194,77,.55); } /* Карточка товара: тёплый кант вместо общей линии — она даёт 1,54:1 и на изумруде читается как строка текста, а не как край предмета. */ [data-theme="emerald"] .shop-card, [data-theme="emerald"] .chist-stat, [data-theme="emerald"] .chist-list{ border-color:rgba(248,231,201,.22); } [data-theme="emerald"] .prize-code__digits{ box-shadow:inset 0 0 0 1px rgba(248,231,201,.28); } /* Пунктир демо-кнопки: общая --c-line на изумруде почти не видна */ [data-theme="emerald"] .again-btn{ border-color:rgba(248,231,201,.55); } /* ── Личный кабинет ── Карточка уровня получает тот же тёплый кант, что и полоса «до крупного приза»: это первая карточка экрана, и она должна читаться как главная. */ [data-theme="emerald"] .prof-tier{ box-shadow:inset 0 0 0 1px rgba(248,231,201,.28); } /* Край плитки счётчика — как у карточки товара */ [data-theme="emerald"] .prof-stat{ border-color:rgba(248,231,201,.22); } /* Значок кабинета и «Назад» — кнопки на тёмном фоне, и рамка у них единственное, что делает их кнопкой. Общая --c-line даёт тут 1,54:1; половина крема — 4,01:1, край видно. Так же сделаны .btn--ghost. */ [data-theme="emerald"] .head-prof, [data-theme="emerald"] .prof-back{ border-color:rgba(248,231,201,.5); } /* ── Сгоревший приз ── Общее правило гасит карточку до .6. У остальных тем карточка почти чёрная, и погашенный кремовый на ней держит 5,3-6,4:1; изумрудная карточка светлее, и на ней те же .6 давали 3,92:1 — название сгоревшего приза уже не прочесть. .72 возвращает 4,93:1: приз по-прежнему явно потухший, но читаемый. */ [data-theme="emerald"] .inv.is-dead{ opacity:.72; } /* Цвет «Сгорел» и примечания здесь больше не задаётся: общее правило .inv.is-dead .inv__left/.inv__n даёт основной цвет текста всем темам сразу. Список тем поимённо и был причиной беды — семь тёмных в него не попали. */ /* ── Тост ── Общий тост синевато-серый и из палитры выпадает. */ [data-theme="emerald"] .toast{ background:#033a2b; border-color:rgba(248,231,201,.22); color:#f8e7c9; /* 10,50:1 */ } /* ══════════════════════════════════════════════════════════════════════ СЕМЬ ТЕМ ВЛАДЕЛЬЦА: оформление Переменных мало там, где цвет зашит цифрами: свечение победителя и внутренние подсветки редкости рисует wheel.js и про тему не знает, белое поле QR не красит никто, а общие тени рассчитаны на тёмный фон. Ниже — только эти места. Ни одна строка выше не тронута, шесть старых тем работают ровно как раньше. ══════════════════════════════════════════════════════════════════════ */ /* ─────── Общее для четырёх светлых тем ─────── Все значения через переменные темы, поэтому одно правило на все четыре: у каждой оно возьмёт её собственные цвета. */ /* Тень пилюли вкладок. Общее правило кладёт под неё чёрный на 30% — на светлом фоне это грязное пятно. Тёмный ореол темы даёт ту же приподнятость мягче. */ [data-theme="butter"] .tabbar, [data-theme="acidg"] .tabbar, [data-theme="mint"] .tabbar, [data-theme="orange"] .tabbar{ box-shadow:0 6px 18px var(--c-glow); } /* Прорезь полосы «до крупного приза». На тёмных темах она видна сама собой — тёмная дырка в тёмной карточке; на светлой её надо продавить внутрь. */ [data-theme="butter"] .bar, [data-theme="acidg"] .bar, [data-theme="mint"] .bar, [data-theme="orange"] .bar{ box-shadow:inset 0 1px 2px var(--c-rail-edge); } /* Кант вокруг ленты: на светлом фоне окошко без края растекается по странице */ [data-theme="butter"] .wheel__vp, [data-theme="acidg"] .wheel__vp, [data-theme="mint"] .wheel__vp, [data-theme="orange"] .wheel__vp{ box-shadow:inset 0 0 0 1px var(--c-line); } /* Белое поле QR. Красить его нельзя ни в одной теме — камере нужен чистый чёрный код на чистом белом (21:1) и белая тихая зона по краям. Но на светлом фоне белый прямоугольник сливается со страницей: масло 1,14:1, мята 1,22:1. Даём внешнее кольцо и тень — само поле остаётся нетронутым, кольцо лежит СНАРУЖИ и в тихую зону не залезает. */ [data-theme="butter"] .prize-code__qr, [data-theme="acidg"] .prize-code__qr, [data-theme="mint"] .prize-code__qr, [data-theme="orange"] .prize-code__qr{ box-shadow:0 0 0 1px var(--c-line),0 4px 18px var(--c-glow); } /* Насечки полосы копилки — «монеты в столбик». Общее правило кладёт их чёрным на 18% и рассчитано на золотую заливку тёмных тем (1,47-1,51:1). На светлых темах заливка сама стала тёмной, и чёрные насечки по ней пропадают: масло 1,30, кислота 1,20, мята 1,31, оранж 1,24. Насечка навыворот, белым, даёт 1,83-2,15 — как на тёмных темах и выше. Это важно: насечки одна из четырёх примет, которыми полоса копилки отличается от полосы «до крупного приза», без них в ролике оба прогресса выглядят одним прибором. */ [data-theme="butter"] .coins-track__fill, [data-theme="acidg"] .coins-track__fill, [data-theme="mint"] .coins-track__fill, [data-theme="orange"] .coins-track__fill{ background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.28),rgba(255,255,255,.28) 2px, rgba(255,255,255,0) 2px,rgba(255,255,255,0) 11px), linear-gradient(90deg,var(--c-coin-2),var(--c-coin)); } /* Тень ярлычка копилки. Общая нейтрально-чёрная на тёплой светлой карточке (масло #fff9d9, оранж #ffb570) читается не как тень предмета, а как грязное пятно не в цвет — тем более что в двух сантиметрах у пилюли вкладок тень уже переведена на тёмный ореол темы. */ [data-theme="butter"] .coins-track__badge, [data-theme="acidg"] .coins-track__badge, [data-theme="mint"] .coins-track__badge, [data-theme="orange"] .coins-track__badge{ box-shadow:0 2px 8px var(--c-glow); } /* Значок кабинета и «Назад». Обе кнопки держатся на одной рамке, а --c-line на светлом даёт 1,7-1,9:1 — читается как складка, а не как край кнопки. --c-dim держит 6,4-7,7:1, тем же цветом обведена кнопка-призрак. */ [data-theme="butter"] .head-prof, [data-theme="butter"] .prof-back, [data-theme="acidg"] .head-prof, [data-theme="acidg"] .prof-back, [data-theme="mint"] .head-prof, [data-theme="mint"] .prof-back, [data-theme="orange"] .head-prof, [data-theme="orange"] .prof-back{ border-color:var(--c-dim); } /* ── Сгоревший приз ── Общее правило гасит карточку до .6. У тёмных тем карточка почти чёрная, и погашенный текст держит на ней 5,3-6,5:1. На светлых карточка сама светлая, и те же .6 роняют НАЗВАНИЕ приза ниже нормы 4,5:1: масло 3,29, мята 3,60, оранж 4,34, кислота 4,38. Индиго с ярким фоном туда же — 4,41. .8 возвращает 5,5-7,7:1: приз по-прежнему явно потухший, а прочесть его можно. Изумруду ровно из-за этой просадки уже подняли до .72 выше. В «Моих призах» просроченное лежит сверху — в ролике это первая карточка. */ [data-theme="butter"] .inv.is-dead, [data-theme="acidg"] .inv.is-dead, [data-theme="mint"] .inv.is-dead, [data-theme="orange"] .inv.is-dead, [data-theme="indigo"] .inv.is-dead{ opacity:.8; } /* «Системная» тоже светлая, и на ней .6 давало 4,45:1 даже названию приза — ниже нормы. Ставим ту же непрозрачность, что и остальным светлым темам. */ [data-theme="white"] .inv.is-dead{ opacity:.8; } /* Цвет «Сгорел» и примечания здесь больше не перечисляется по темам: общее правило .inv.is-dead .inv__left/.inv__n красит их основным цветом во всех тринадцати темах сразу. Перечень и был причиной беды — тёмные темы в него не попали, и объяснение, почему приз погас, на них не читалось. */ /* Тост. Общий синевато-серый выпадает из светлой палитры целиком. Тёмная плашка цветом кнопки: 8,7-14,9:1 на буквах. */ [data-theme="butter"] .toast, [data-theme="acidg"] .toast, [data-theme="mint"] .toast, [data-theme="orange"] .toast{ background:var(--c-accent); border-color:var(--c-line); color:var(--c-on-accent); } /* ─────── Лента: подсветки редкости и свечение победителя ─────── wheel.js зашивает подсветку цифрами: синяя #3d7dff у редкой, фиолетовая у очень редкой, оранжевая у легендарной — и рассчитана она на тёмную карточку. На светлой она не подсвечивает, а пачкает: синее пятно на масляной карточке уводит её в зелень. Плюс «редкая» у wheel.js синяя, а по правилу владельца она красная — рамку styles.css уже перебил выше, подсветку нет. Перекрываем теми же цветами, что и рамка, у каждой темы. Обычной карточке подсветку тоже даём: владелец просил, чтобы различались все четыре ступени, а не три. */ /* Мягкое масло */ [data-theme="butter"] .wheel .wcard[data-r="common"]{ box-shadow:inset 0 0 22px rgba(31,95,216,.16); } [data-theme="butter"] .wheel .wcard[data-r="rare"]{ box-shadow:inset 0 0 22px rgba(194,53,43,.16); } [data-theme="butter"] .wheel .wcard[data-r="epic"]{ box-shadow:inset 0 0 22px rgba(122,47,208,.16); } [data-theme="butter"] .wheel .wcard[data-r="legend"]{ box-shadow:inset 0 0 22px rgba(138,75,0,.18); } /* Победитель. Белое свечение из wheel.js на светлой карточке не существует. Вместо свечения карточка ЧЕРНЕЕТ: на светлом экране одно тёмное пятно — самый понятный сигнал «лента встала здесь», и он читается без звука. Стоит после правил редкости намеренно: вес селекторов одинаковый, решает порядок — иначе подсветка редкости перебила бы победителя. */ [data-theme="butter"] .wheel .wcard.is-won{ background:linear-gradient(180deg,#6b452a,#5a3921 55%,#43290f); border-color:#43290f; color:#fff1a6; /* 9,00:1 на светлом крае, 11,6:1 на тёмном */ box-shadow:0 0 26px rgba(58,36,16,.45); } /* Кислотный зелёный */ [data-theme="acidg"] .wheel .wcard[data-r="common"]{ box-shadow:inset 0 0 22px rgba(11,63,190,.18); } [data-theme="acidg"] .wheel .wcard[data-r="rare"]{ box-shadow:inset 0 0 22px rgba(158,20,20,.18); } [data-theme="acidg"] .wheel .wcard[data-r="epic"]{ box-shadow:inset 0 0 22px rgba(94,27,158,.18); } [data-theme="acidg"] .wheel .wcard[data-r="legend"]{ box-shadow:inset 0 0 22px rgba(107,50,0,.20); } [data-theme="acidg"] .wheel .wcard.is-won{ background:linear-gradient(180deg,#1c1c1c,#0a0a0a 55%,#000000); border-color:#000000; color:#39ff88; /* 14,93:1 */ box-shadow:0 0 26px rgba(10,10,10,.45); } /* Мятный иней */ [data-theme="mint"] .wheel .wcard[data-r="common"]{ box-shadow:inset 0 0 22px rgba(20,80,198,.16); } [data-theme="mint"] .wheel .wcard[data-r="rare"]{ box-shadow:inset 0 0 22px rgba(182,42,32,.16); } [data-theme="mint"] .wheel .wcard[data-r="epic"]{ box-shadow:inset 0 0 22px rgba(139,31,199,.16); } [data-theme="mint"] .wheel .wcard[data-r="legend"]{ box-shadow:inset 0 0 22px rgba(143,78,0,.18); } [data-theme="mint"] .wheel .wcard.is-won{ background:linear-gradient(180deg,#5c2aa8,#4c1d95 55%,#3a1176); border-color:#3a1176; color:#b7f7d4; /* 9,01:1 на светлом крае, 11,4:1 на тёмном */ box-shadow:0 0 26px rgba(76,29,149,.45); } /* Неоновый оранж */ [data-theme="orange"] .wheel .wcard[data-r="common"]{ box-shadow:inset 0 0 22px rgba(11,68,174,.18); } [data-theme="orange"] .wheel .wcard[data-r="rare"]{ box-shadow:inset 0 0 22px rgba(152,18,47,.18); } [data-theme="orange"] .wheel .wcard[data-r="epic"]{ box-shadow:inset 0 0 22px rgba(95,26,162,.18); } [data-theme="orange"] .wheel .wcard[data-r="legend"]{ box-shadow:inset 0 0 22px rgba(107,65,0,.20); } [data-theme="orange"] .wheel .wcard.is-won{ background:linear-gradient(180deg,#1c1c1c,#0a0a0a 55%,#000000); border-color:#000000; color:#ff9030; /* 8,75:1 */ box-shadow:0 0 26px rgba(10,10,10,.45); } /* Три тёмные новые темы. Свечение победителя тут работает как везде — белое на тёмном; правим только подсветку редкости, чтобы она совпадала с рамкой. Индиго это обязательно: синяя подсветка wheel.js на синей карточке — просто грязь, а обычная ступень у этой темы голубая, а не синяя. */ [data-theme="indigo"] .wheel .wcard[data-r="common"]{ box-shadow:inset 0 0 22px rgba(126,212,255,.20); } [data-theme="indigo"] .wheel .wcard[data-r="rare"]{ box-shadow:inset 0 0 22px rgba(255,145,130,.20); } [data-theme="indigo"] .wheel .wcard[data-r="epic"]{ box-shadow:inset 0 0 22px rgba(214,166,255,.20); } [data-theme="indigo"] .wheel .wcard[data-r="legend"]{ box-shadow:inset 0 0 22px rgba(255,194,77,.22); } [data-theme="coal"] .wheel .wcard[data-r="common"]{ box-shadow:inset 0 0 22px rgba(106,182,255,.18); } [data-theme="coal"] .wheel .wcard[data-r="rare"]{ box-shadow:inset 0 0 22px rgba(255,138,122,.20); } [data-theme="coal"] .wheel .wcard[data-r="epic"]{ box-shadow:inset 0 0 22px rgba(196,154,255,.20); } [data-theme="coal"] .wheel .wcard[data-r="legend"]{ box-shadow:inset 0 0 22px rgba(255,210,77,.22); } [data-theme="black"] .wheel .wcard[data-r="common"]{ box-shadow:inset 0 0 22px rgba(90,169,255,.18); } [data-theme="black"] .wheel .wcard[data-r="rare"]{ box-shadow:inset 0 0 22px rgba(255,122,107,.20); } [data-theme="black"] .wheel .wcard[data-r="epic"]{ box-shadow:inset 0 0 22px rgba(192,139,255,.20); } [data-theme="black"] .wheel .wcard[data-r="legend"]{ box-shadow:inset 0 0 22px rgba(255,194,77,.22); } /* Тост трёх тёмных тем: общий синевато-серый рядом с индиго и углём выглядит как чужая плашка, а на абсолютно чёрном — как светлое пятно не в тему. */ [data-theme="indigo"] .toast{ background:#15205c; border-color:rgba(245,239,224,.22); color:#f5efe0; } [data-theme="coal"] .toast{ background:#1b2436; border-color:rgba(232,234,240,.18); color:#e8eaf0; } [data-theme="black"] .toast{ background:#141414; border-color:rgba(242,242,242,.20); color:#f2f2f2; } /* ═════════════════ ПЕРЕКЛЮЧАТЕЛЬ ТЕМ ═════════════════ Это оформление САМОГО ПЕРЕКЛЮЧАТЕЛЯ, а не тем. Блоки тем — выше и ниже, их сюда не дописывать: здесь только классы .theme-pick*. Живёт в личном кабинете, третьим пунктом — сразу под числами. Разметку собирает app.js из списка, который прислал сервер: ключ, название и признак «тёмная». Своего списка тем у браузера нет. Кружок слева залит фоном темы, точка внутри — её акцентом. Только так видно разницу между «Углём» и «Абсолютно чёрным» и между четырьмя светлыми. Цвета здесь записаны цифрами, а не переменными темы, и это единственно возможный способ: переменные --c-bg и --c-accent действуют, только пока тема включена, а кружки должны показывать двенадцать выключенных тем сразу. Цифры взяты из блоков тем в этом же файле и из палитры владельца (D:/ai_project/ПАЛИТРЫ_ШАБЛОН.md). Меняется тема — меняется и её кружок. */ .theme-pick{ display:grid; /* Два столбца: тринадцать строк в один столбец — это полтора экрана прокрутки, и переключатель перестаёт читаться одним взглядом. minmax(0,1fr) обязателен: без него длинное название распирает столбец. */ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:10px; } .theme-pick__item{ display:flex; align-items:center; gap:9px; box-sizing:border-box; min-height:46px; /* палец, а не курсор */ padding:8px 10px; border:0; border-radius:12px; background:var(--c-card-2); color:var(--c-text); font:inherit; font-size:13px; font-weight:700; line-height:1.25; text-align:left; cursor:pointer; /* Край плитки. Обычная рамка сдвигала бы содержимое при выборе: там обводка становится вдвое толще, а тень внутрь размеров не меняет. */ box-shadow:inset 0 0 0 1px var(--c-line); -webkit-appearance:none; appearance:none; } .theme-pick__item:active{ transform:translateY(1px); } .theme-pick__item:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; } /* Выбранная тема. Отмечена тремя способами сразу — обводкой, цветом плитки и галочкой: в ролике без звука и на сжатом видео одной обводки мало, а на светлых темах она к тому же тоньше на вид. */ .theme-pick__item--on{ background:var(--c-card); box-shadow:inset 0 0 0 2px var(--c-accent); } .theme-pick__name{ min-width:0; overflow-wrap:break-word; overflow-wrap:anywhere; } .theme-pick__item--on .theme-pick__name{ font-weight:800; } .theme-pick__item--on .theme-pick__name:after{ /* Галочка кодом, а не самим знаком: css без объявленной кодировки читается браузером как latin-1, и знак из файла превратился бы в кракозябры. */ content:'\00a0\2713'; color:var(--c-accent-txt); font-weight:800; } .theme-pick__dot{ flex:0 0 auto; position:relative; box-sizing:border-box; width:26px; height:26px; border-radius:50%; background:var(--c-card); /* запасной цвет: тема, которой тут ещё нет */ color:var(--c-text); /* акцент темы: им же рисуется точка внутри */ /* Кант серединным серым. Он держится и на белом кружке светлой темы, и на чёрном кружке «Абсолютно чёрного»: без него один пропадает на светлой плитке, другой — на тёмной. */ box-shadow:inset 0 0 0 1px rgba(128,128,128,.75); } .theme-pick__dot:before{ content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:currentColor; } /* «Как у заведения» — не тема, своего цвета у неё нет. Поэтому кружок пустой и обведён пунктиром: цвет сюда подставит клуб. Точку внутри убираем — она означала бы «вот такой цвет», а какой именно, решает не гость. */ .theme-pick__item[data-key="auto"] .theme-pick__dot{ background:transparent; color:var(--c-dim); box-shadow:none; border:2px dashed currentColor; } .theme-pick__item[data-key="auto"] .theme-pick__dot:before{ display:none; } /* ── Кружки шести прежних тем ── */ .theme-pick__item[data-key="acid"] .theme-pick__dot{ background:#0d0f0b; color:#b6ff2e; } /* Системная берёт цвета у клиента Telegram и бывает и светлой, и тёмной — кружок разрезан по диагонали, иначе он обещал бы белый экран в тёмном клиенте. */ .theme-pick__item[data-key="white"] .theme-pick__dot{ background:linear-gradient(135deg, #ffffff 0 50%, #17212b 50% 100%); color:#1a56d6; } .theme-pick__item[data-key="neon"] .theme-pick__dot{ background:#0d0712; color:#ff2e97; } .theme-pick__item[data-key="gold"] .theme-pick__dot{ background:#12100a; color:#f0c04a; } .theme-pick__item[data-key="industrial"] .theme-pick__dot{ background:#1c1c1c; color:#ffc21a; } .theme-pick__item[data-key="emerald"] .theme-pick__dot{ background:#021a13; color:#f8e7c9; } /* ── Кружки семи новых тем, палитра владельца ── */ .theme-pick__item[data-key="butter"] .theme-pick__dot{ background:#fff1a6; color:#5a3921; } .theme-pick__item[data-key="acidg"] .theme-pick__dot{ background:#39ff88; color:#0a0a0a; } .theme-pick__item[data-key="indigo"] .theme-pick__dot{ background:#263baa; color:#fff1a6; } .theme-pick__item[data-key="mint"] .theme-pick__dot{ background:#b7f7d4; color:#4c1d95; } .theme-pick__item[data-key="orange"] .theme-pick__dot{ background:#ff9030; color:#0a0a0a; } .theme-pick__item[data-key="coal"] .theme-pick__dot{ background:#111827; color:#ff9030; } .theme-pick__item[data-key="black"] .theme-pick__dot{ background:#050505; color:#ffffff; } /* Узкий телефон: два столбца при 320px оставляют названию 90px, и «Кислотный зелёный» ложится в три строки. Один столбец там честнее. Порог 360, а не 359: на 360 — самой ходовой узкой ширине — приложение уже переходит в узкий режим везде (баланс, счётчики, плитки истории, цифры кода), и выбор темы обязан переходить вместе с ними, а не на точку позже. */ @media (max-width:360px){ .theme-pick{ grid-template-columns:minmax(0, 1fr); } } /* ── Отсчёт до сгорания приза ────────────────────────────── Владелец: «таймер смешивается, а должен быть красным цветом и больше выделяться». Раньше он красился акцентом темы и стоял в один ряд с прочими подписями — гость не видел, что время уходит. Красный + крупнее + жирнее. Оттенок свой у каждой группы тем: один и тот же красный на изумрудной карточке даёт 2,8:1 при норме 4,5, а на оранжевой теме тёмный — 2,9:1. */ :root{ --c-timer:#ff6b5a; } /* тёмные темы: 5,1-6,8:1 */ [data-theme="emerald"], [data-theme="indigo"]{ --c-timer:#ffb3a8; } /* глубокий фон: 4,5-4,6:1 */ [data-theme="white"], [data-theme="butter"], [data-theme="acidg"], [data-theme="mint"]{ --c-timer:#b3261e; } /* светлые: 4,9-5,9:1 */ [data-theme="orange"]{ --c-timer:#6b0f08; } /* на оранжевом: 5,5:1 */ .inv__left, .won__left{ color:var(--c-timer); font-size:14px; font-weight:800; letter-spacing:.02em; font-variant-numeric:tabular-nums; /* цифры не пляшут по ширине каждую секунду */ } /* Сгоревший приз красным не кричит: гореть уже нечему. Правило стоит после, поэтому побеждает. */ .inv.is-dead .inv__left{ color:var(--c-text); font-weight:700; }