@tailwind base; @tailwind components; @tailwind utilities; /* --- ВОССТАНОВЛЕНИЕ БРЕНД-ЦВЕТА examBlue --- В разметке/JS используется кастомный Tailwind-цвет examBlue (активная вкладка, акцентные числа статистики, год во флешкартах), но он не попал в сборку output.css → классы text-/border-/bg-examBlue в СВЕТЛОЙ теме не красили ничего (в тёмной спасал явный dark:text-blue-400/300). Привязываем его к токену бренда — теперь акцент управляется из tokens.css. В тёмной теме приоритет у dark:-утилит (выше специфичность), поэтому поведение тёмной темы не меняется. */ .text-examBlue { color: var(--c-brand-strong); } .border-examBlue { border-color: var(--c-brand-strong); } .bg-examBlue { background-color: var(--c-brand-strong); } /* --- НЕЙТРАЛЬНЫЕ ПОВЕРХНОСТИ ТЁМНОЙ ТЕМЫ ЧЕРЕЗ ТОКЕНЫ --- В разметке/JS поверхности тёмной темы заданы Tailwind-классами с захардкоженными hex: dark:bg-[#1e1e1e] (карточки), dark:bg-[#181818] (вторичная), dark:bg-[#121212] (фон), dark:border-[#2c2c2c] (рамки), dark:border-[#3f3f46] (рамки инпутов). Классы НЕ переименованы — за них цепляются скины (body.skin-X .dark\:bg-[#1e1e1e] …), и переименование бы их осиротило. Вместо этого переопределяем сами классы на токены: специфичность (0,2,0) = как у Tailwind-вывода, но styles.css грузится позже → эти правила выигрывают у базового output.css; скины (0,2,1) специфичнее → по-прежнему перекрывают. Значения токенов в .dark равны прежним hex → внешний вид не меняется, но теперь тёмные поверхности управляются из tokens.css. */ .dark .dark\:bg-\[\#1e1e1e\] { background-color: var(--c-card); } .dark .dark\:bg-\[\#181818\] { background-color: var(--c-card-2); } .dark .dark\:bg-\[\#121212\] { background-color: var(--c-bg); } .dark .dark\:border-\[\#2c2c2c\] { border-color: var(--c-border); } .dark .dark\:border-\[\#3f3f46\] { border-color: var(--c-border-2); } /* --- ИЕРАРХИЯ ТИПОГРАФИКИ В ЛОББИ --- Проблема: заголовки секций и названия карточек визуально равносильны (всё font-black uppercase) — глаз не знает, за что цепляться. Решение: карточки становятся *громче* (но без UPPERCASE), секции остаются тише — получаем чёткую H2 → H3 иерархию. */ #lobby-area > div > h3 { /* Заголовки секций — тихий лейбл */ letter-spacing: 0.15em; font-weight: 800; } #lobby-area h4 { /* Названия карточек режимов — громкие, но без капслока */ text-transform: none !important; letter-spacing: -0.01em !important; font-weight: 900; } /* Подписи под заголовками карточек — чуть крупнее и с лучшим контрастом */ #lobby-area h4 + p { font-weight: 600; letter-spacing: 0; } /* --- ШАПКА: FLOATING ISLAND (графит) --- Сама

прозрачная — никакого белого/чёрного прямоугольника. «Остров» — #top-stats-bar внутри, плавает над контентом со скруглением и тенью. При скролле (sticky) над контентом остаётся только остров, фон страницы виден по краям. */ #main-header { background-color: transparent !important; border-bottom: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Чуть «приподнять» остров над контентом плавной тенью */ #top-stats-bar { background-color: #27272a !important; /* графит, светлая тема */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) !important; } .dark #top-stats-bar { background-color: #18181b !important; /* графит глубже, тёмная тема */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.04) inset !important; } /* --- БЛОКИРОВКА СИСТЕМНОЙ ТЁМНОЙ ТЕМЫ --- Дизайн управляется ТОЛЬКО классом .dark на , добавляемым нашим JS. Системная тёмная тема телефона/браузера игнорируется полностью. */ html:not(.dark) { color-scheme: only light !important; } html.dark { color-scheme: dark !important; } /* --- ГЛОБАЛЬНЫЕ СТИЛИ И ПЕРЕМЕННЫЕ --- */ html, body { overscroll-behavior-y: none; transition: background-color 0.4s, color 0.4s; } body:not(.in-game) { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } body.in-game { padding-bottom: env(safe-area-inset-bottom, 0px); } #bottom-nav { height: calc(70px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); } #bottom-nav.hide-nav { display: none !important; } /* Убираем уродскую белую рамку фокуса/тап-подсветку на кнопках нижнего меню */ #bottom-nav button { outline: none !important; -webkit-tap-highlight-color: transparent; } #bottom-nav button:focus, #bottom-nav button:focus-visible { outline: none !important; box-shadow: none !important; } @media (min-width: 1024px) { #pool-panel { position: sticky !important; top: 4rem !important; height: fit-content !important; align-self: flex-start !important; bottom: auto !important; } } /* --- КАСТОМНЫЙ СКРОЛЛБАР --- */ .custom-scroll::-webkit-scrollbar { width: 4px; height: 4px; } .custom-scroll::-webkit-scrollbar-track { background: transparent; } .custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .dark .custom-scroll::-webkit-scrollbar-thumb { background: #475569; } .dark body { background-color: #121212; color: #d1d5db; } /* --- DRAG & DROP СЛОТЫ --- */ .dnd-slot { min-height: 40px; border: 2px dashed #94a3b8; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; background-color: #f8fafc; cursor: pointer; transition: all 0.2s ease; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); padding: 0.15rem; touch-action: manipulation; font-size: 11px; line-height: 1.1; text-align: center; will-change: background-color, border-color; } .dnd-slot:empty::before { content: attr(data-letter); color: #64748b; font-size: 1.5rem; font-weight: 900; opacity: 0.5; } .dark .dnd-slot { border-color: #3f3f46; background-color: #18181b; } .dark .dnd-slot:empty::before { color: #71717a; opacity: 0.5; } @media (min-width: 768px) { .dnd-slot { min-height: 52px; font-size: 14px;} } .dnd-slot:hover { border-color: #64748b; background-color: #f1f5f9; } .dark .dnd-slot:hover { border-color: #52525b; background-color: #27272a; } /* ── СОСТОЯНИЯ ОТВЕТА: сплошная рамка и заливка, без полупрозрачных ореолов ── Было: у каждого состояния сверху висел `box-shadow: 0 0 0 3px rgba(цвет,.3)`. Полупрозрачный ореол на светлом фоне не читается как рамка — он читается как грязь вокруг элемента («выделяется чем-то мутным»). Хуже того, ореол вылезает за границу ячейки, а у `td` стоит `overflow: hidden` — снизу его срезало, и рамка выглядела незакрытой. Стало: цвет несут РАМКА и ЗАЛИВКА (они внутри border-box и не срезаются), объём — тень из системы (--e-2 = «поднято»), а не цветное свечение. */ .dnd-slot.has-item { border: 2px solid var(--c-brand); background-color: #ffffff; box-shadow: none; padding: 0; } .dark .dnd-slot.has-item { border-color: var(--c-brand); background-color: #18181b; } /* Слоты-результаты (верно/неверно). Высокая специфичность (html body … = 0,3,2), чтобы перебить скины (например constructivism), задающие рамку слота чёрной с !important. Это ЕДИНСТВЕННАЯ авторитетная копия — раньше она дублировалась в inline-