@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { --accent: #c1121f; --bg-dark-start: #050505; --bg-dark-end: #141418; --text-light: #f1f1f1; --text-muted: #9a9aa3; --font-family: "Inter", "Segoe UI", Arial, sans-serif; --font-heading: "Playfair Display", Georgia, serif; --font-mono: "Courier New", monospace; } /* Тема "hacker" (подход 2, Theme Engine) — референс дизайна Resend (DESIGN.md): чистый чёрный холст, графитовые 1px рамки, строгая типографика без засечек. Переключается через document.documentElement[data-theme], см. nav.js initTheme(). Точечные переопределения конкретных компонентов (карточки/модалки/кнопки/инпуты, терминальный режим компьютера/телефона) — в конце файла, см. секцию "HACKER THEME — Component Overrides". */ [data-theme="hacker"] { --font-family: "Inter", sans-serif; --font-heading: "Inter", sans-serif; --font-mono: "JetBrains Mono", monospace; --bg-dark-start: #000000; --bg-dark-end: #000000; --text-light: #ffffff; --text-muted: #8a8f98; --accent: #ff3333; --border-color: #292d30; --border-color-hover: #3f4448; --card-radius: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { height: 100%; background: linear-gradient(160deg, var(--bg-dark-start), var(--bg-dark-end)); overscroll-behavior-y: none; } body { min-height: 100vh; min-height: 100dvh; font-family: var(--font-family); color: var(--text-light); background: linear-gradient(160deg, var(--bg-dark-start), var(--bg-dark-end)); overscroll-behavior-y: none; overflow-x: hidden; } /* Глобальный «киноплёночный» шум поверх всего сайта. */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 180px 180px; } /* В hacker-теме плёночного шума не будет (см. подход 2) — отключаем эффект заранее, чтобы правки styles.css под конкретный визуал не пришлось переплетать с этим селектором позже. */ [data-theme="hacker"] body::after { content: none; } /* Блокировка скролла страницы при открытой модалке — класс переключается в nav.js (setupModalScrollLock()) через MutationObserver за всеми backdrop-элементами сайта. Оба селектора (html и html body) нужны, т.к. в разных браузерах скроллящимся элементом может быть либо , либо . */ html.modal-open, html.modal-open body { overflow: hidden; } /* Верхняя панель с кнопкой входа */ .top-bar { position: fixed; top: 0; left: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 1.5rem; box-sizing: border-box; } .login-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; font-family: inherit; font-size: 0.9rem; color: var(--text-light); text-decoration: none; background: transparent; border: 1px solid var(--accent); border-radius: 6px; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } .login-btn i { font-size: 0.85rem; } .login-btn:hover, .login-btn:focus-visible { background-color: var(--accent); color: var(--bg-dark-start); } /* Hero-секция */ .hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(193, 18, 31, 0.12), transparent 55%), linear-gradient(180deg, #0a0a0c 0%, #050505 45%, #121218 100%); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.65) 100%); } .hero__content { position: relative; z-index: 1; max-width: 960px; } .hero__title { font-family: var(--font-heading); font-size: clamp(2.1rem, 8vw, 5.5rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1.15; white-space: nowrap; } .hero__title .accent { color: var(--accent); } .hero__subtitle { margin-top: 1rem; font-size: clamp(1rem, 2vw, 1.25rem); color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; } .hero__description { margin-top: 1.5rem; margin-left: auto; margin-right: auto; max-width: 42rem; font-size: clamp(0.95rem, 1.5vw, 1.1rem); line-height: 1.7; color: var(--text-muted); } /* Контейнер 3D-куба (Three.js, hero-3d.js) — премиальный элемент темы "hacker" (DESIGN.md/Resend). В noir скрыт: hero остаётся тем же центрированным одноколоночным блоком, что и раньше. Видимость и двухколоночный layout переопределены в секции "HACKER THEME — Component Overrides" в конце файла. */ .hero-3d-container { display: none; } /* Динамический лендинг (блоки из /api/site/active) */ .landing-container { display: flex; flex-direction: column; align-items: center; width: 100%; } /* Зебра-чередование фона блоков по позиции, независимо от типа блока. */ .landing-container > section { width: 100%; } .landing-container > section:nth-child(even) { background: rgba(0, 0, 0, 0.25); } .landing-section__inner { max-width: 960px; margin: 0 auto; } .landing-hero__cta, a.auth-submit.landing-hero__cta { display: inline-block; margin-top: 2.5rem; width: auto; padding: 0.75rem 1.5rem; text-decoration: none; text-align: center; } .landing-cases { padding: 2.5rem 1.5rem 4rem; text-align: center; } .landing-cases__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; text-align: left; } .landing-cases__all, a.auth-submit.landing-cases__all { display: inline-block; width: auto; margin-top: 2.5rem; padding: 0.75rem 1.5rem; text-decoration: none; text-align: center; } .landing-section__title { font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 1.25rem; text-align: center; } .landing-features, .landing-text-image-section, .landing-faq-section { padding: 2.5rem 1.5rem; } .landing-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; } .landing-features__item { text-align: center; padding: 1.25rem 1rem; border: 1px solid rgba(241, 241, 241, 0.12); border-radius: 8px; background: rgba(255, 255, 255, 0.03); } .landing-features__icon { font-size: 1.75rem; color: var(--accent); margin-bottom: 0.75rem; } .landing-features__item-title { font-size: 1.05rem; margin-bottom: 0.5rem; color: var(--text-light); } .landing-features__item-text { font-size: 0.95rem; line-height: 1.5; color: var(--text-muted); } .landing-text-image { display: flex; gap: 2rem; align-items: center; } .landing-text-image.align-right { flex-direction: row-reverse; } .landing-text-image__content { flex: 1; min-width: 0; } .landing-text-image__content .landing-section__title { text-align: left; } .landing-text-image__text { color: var(--text-muted); line-height: 1.65; white-space: pre-wrap; } .landing-text-image__media { flex: 1; min-width: 0; } .landing-text-image__media img { display: block; width: 100%; max-width: 100%; border-radius: 8px; object-fit: cover; } .landing-text-image__media--empty { min-height: 12rem; border: 1px dashed rgba(241, 241, 241, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.02); } .landing-faq__list { display: flex; flex-direction: column; gap: 0.65rem; } .landing-faq__item { border: 1px solid rgba(241, 241, 241, 0.12); border-radius: 8px; padding: 0.85rem 1rem; background: rgba(255, 255, 255, 0.03); } .landing-faq__question { cursor: pointer; list-style: none; color: var(--text-light); font-weight: 500; text-align: center; } .landing-faq__question::-webkit-details-marker { display: none; } .landing-faq__answer { margin-top: 0.75rem; color: var(--text-muted); line-height: 1.55; } .landing-cta { text-align: center; padding: 3rem 1.5rem; } .landing-cta__subtitle { color: var(--text-muted); margin: 0.75rem auto 0; max-width: 36rem; line-height: 1.5; } .landing-cta__btn, a.auth-submit.landing-cta__btn { display: inline-block; width: auto; margin-top: 2rem; padding: 0.75rem 1.5rem; text-decoration: none; } @media (max-width: 768px) { .landing-text-image, .landing-text-image.align-right { flex-direction: column; } .landing-text-image__content .landing-section__title { text-align: center; } } @media (max-width: 480px) { .landing-cases { padding: 1.5rem 1rem 3rem; } .landing-features, .landing-text-image-section, .landing-faq-section, .landing-cta { padding: 2rem 1rem; } } /* Редактор лендинга (site-editor) */ .site-editor-page { overflow: hidden; height: 100vh; height: 100dvh; } .site-editor { display: flex; height: 100vh; height: 100dvh; overflow: hidden; width: 100%; } .site-editor-sidebar { width: 350px; flex-shrink: 0; overflow-y: auto; padding: 1rem 1.1rem 2rem; background: var(--bg-dark-start); border-right: 1px solid rgba(241, 241, 241, 0.08); } .site-editor-sidebar__header { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; } .site-editor-sidebar__actions { display: flex; flex-direction: column; gap: 0.5rem; } .site-editor-sidebar__actions .auth-submit { width: 100%; } .site-editor-section { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(241, 241, 241, 0.08); } .site-editor-section__title { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.85rem; } .site-editor-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; } .site-editor-field--row { flex-direction: row; align-items: center; justify-content: space-between; } .site-editor-field__label { font-size: 0.85rem; color: var(--text-muted); } /* Визуально отделяет "Загрузку новой модели" от "Параметров текущей модели" (#hero-model-section) — разные по смыслу действия (файл vs. трансформация) не должны выглядеть одной формой. */ .site-editor-subsection { border: 1px solid rgba(241, 241, 241, 0.1); border-radius: 8px; padding: 0.85rem; margin-bottom: 0.85rem; background: rgba(255, 255, 255, 0.02); } .site-editor-subsection__title { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.75rem; } /*

используются для аккордеонов анимации (левитация, вращение, качение, интерактив) — только

должен показывать курсор-подсказку сворачивания, обычные

с этим же классом (upload секция) остаются как есть. / summary.site-editor-subsectiontitle { cursor: pointer; } .site-editor-subsection .auth-submit { width: 100%; } .site-editor-notice { color: var(--accent); border: 1px solid rgba(230, 57, 70, 0.35); border-radius: 6px; padding: 0.6rem 0.75rem; background: rgba(230, 57, 70, 0.08); } .site-editor-notice a { color: inherit; text-decoration: underline; } .site-editor-input, .site-editor-select { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(241, 241, 241, 0.15); color: var(--text-light); border-radius: 6px; padding: 0.55rem 0.7rem; font: inherit; } .site-editor-textarea { resize: vertical; min-height: 5rem; } .site-editor-field input[type="color"] { width: 2.5rem; height: 2rem; padding: 0; border: 1px solid rgba(241, 241, 241, 0.2); background: transparent; cursor: pointer; } .site-editor-btn-block { display: flex; width: 100%; justify-content: center; } .site-editor-color-row { display: flex; align-items: center; gap: 0.5rem; flex: 1; justify-content: flex-end; } .site-editor-hex-input { width: 6.5rem; text-align: center; font-family: monospace; text-transform: lowercase; } .site-editor-blocks { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1rem; } .site-editor-blocksempty { font-size: 0.9rem; color: var(--text-muted); } .site-editor-block { border: 1px solid rgba(241, 241, 241, 0.12); border-radius: 8px; padding: 0.75rem; background: rgba(255, 255, 255, 0.03); } .site-editor-blockheader { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; } .site-editor-blocktitle { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.03em; } .site-editor-blockactions { display: flex; gap: 0.25rem; } .site-editor-blockbtn { width: 1.75rem; height: 1.75rem; border: 1px solid rgba(241, 241, 241, 0.18); border-radius: 4px; background: rgba(255, 255, 255, 0.04); color: var(--text-light); cursor: pointer; font-size: 0.85rem; line-height: 1; } .site-editor-blockbtn:hover:not(:disabled) { border-color: rgba(241, 241, 241, 0.4); } .site-editor-blockbtn:disabled { opacity: 0.35; cursor: default; } .site-editor-blockbtn--danger:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .site-editor-add-block .auth-submit { width: 100%; margin-top: 0.35rem; } .site-editor-items { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.5rem; } .site-editor-item { border: 1px solid rgba(241, 241, 241, 0.1); border-radius: 6px; padding: 0.65rem; background: rgba(0, 0, 0, 0.2); } .site-editor-itemheader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .site-editor-add-item { width: 100%; justify-content: center; } .site-editor-case-pick { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.35rem; } .site-editor-case-picklist { display: flex; flex-direction: column; gap: 0.35rem; max-height: 14rem; overflow-y: auto; padding: 0.35rem 0; } .site-editor-case-pickrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.45rem; border-radius: 4px; cursor: pointer; font-size: 0.85rem; } .site-editor-case-pickrow:hover { background: rgba(255, 255, 255, 0.04); } .site-editor-case-picktitle { flex: 1; min-width: 0; color: var(--text-light); } .site-editor-case-pickstatus { color: var(--text-muted); font-size: 0.75rem; flex-shrink: 0; } .site-editor-preview { flex: 1; min-width: 0; background: #2a2a32; } .site-editor-preview iframe { width: 100%; height: 100%; border: none; display: block; background: var(--bg-dark-start); } @media (max-width: 900px) { .site-editor { flex-direction: column; } .site-editor-sidebar { width: 100%; max-height: 45vh; border-right: none; border-bottom: 1px solid rgba(241, 241, 241, 0.08); } } / Анимация появления текста / .fade-in { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease forwards; animation-delay: var(--delay, 0s); } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } / Адаптивность / @media (max-width: 768px) { .hero { padding: 1.5rem; } .herodescription { line-height: 1.5; } } / .top-bar и .account-widget — два независимых fixed-элемента без общего родителя (см. case-editor.html/admin.html/cases.html/...). На мобильных ширинах кнопки шапки при переносе (flex-wrap) могут растянуться под правый верхний угол, где висит виджет аккаунта и открывается его dropdown — поэтому явно резервируем справа зону под .account-widget через max-width, вместо того чтобы позволять кнопкам расти на всю ширину экрана. Виджет теперь — просто иконка+шеврон (без текста email), поэтому резерв заметно меньше, чем раньше. / @media (max-width: 700px) { .top-bar { max-width: calc(100% - 7rem); } } @media (max-width: 480px) { .top-bar { padding: 1rem; gap: 0.5rem; max-width: calc(100% - 5.5rem); } .login-btn { padding: 0.5rem 1rem; font-size: 0.8rem; } .herocontent { max-width: 100%; } .herotitle { letter-spacing: 0.02em; } } @media (prefers-reduced-motion: reduce) { .fade-in { animation: none; opacity: 1; transform: none; } } / Карточка авторизации (login.html) / .auth-card { width: 100%; max-width: 380px; padding: 2rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; backdrop-filter: blur(6px); } .auth-tabs { display: flex; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .auth-tab { flex: 1; padding: 0.75rem; background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 1rem; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; } .auth-tab.is-active { color: var(--text-light); border-bottom-color: var(--accent); } .auth-form { display: none; flex-direction: column; gap: 1rem; } .auth-form.is-active { display: flex; } .auth-field { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; } .auth-field label { font-size: 0.85rem; color: var(--text-muted); } .auth-field input { padding: 0.65rem 0.8rem; font-family: inherit; font-size: 0.95rem; color: var(--text-light); background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; outline: none; transition: border-color 0.2s ease; } .auth-field input:focus { border-color: var(--accent); } .auth-field input[readonly] { color: var(--text-muted); background: rgba(255, 255, 255, 0.02); cursor: default; } .auth-field textarea { padding: 0.65rem 0.8rem; font-family: inherit; font-size: 0.95rem; color: var(--text-light); background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; outline: none; resize: vertical; transition: border-color 0.2s ease; } .auth-field textarea:focus { border-color: var(--accent); } / .auth-field { display: flex; } задан без условия на класс — без этого фикса элемент с атрибутом hidden не спрячется, т.к. авторский display перекрывает правило браузера [hidden] { display: none } (та же история была с .auth-form). / .auth-field[hidden] { display: none; } / Карточка вопроса финального квиза (game.html #quiz-questions) — строка ввода растёт, кнопка «Ответить» по ширине контента; решённое состояние красится в зелёный, как .toast.is-success. / .quiz-questionrow { display: flex; gap: 0.5rem; align-items: center; } .quiz-questionrow input { flex: 1; min-width: 0; } .quiz-question--solved label { color: var(--text-light); } .quiz-questionsolved-answer { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.65rem 0.8rem; color: #7fdba0; background: rgba(127, 219, 160, 0.08); border: 1px solid #7fdba0; border-radius: 6px; } / Неверный ответ (после общей проверки checkAllQuizAnswers) — красная подсветка инпута, тот же принцип, что у зелёного .quiz-questionsolved-answer, но по цвету как .toast.is-error. / .quiz-question--incorrect .quiz-questionrow input { border-color: var(--accent); background: rgba(230, 57, 70, 0.08); color: var(--accent); } .admin-checkbox-field { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-light); cursor: pointer; } .admin-checkbox-field input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); cursor: pointer; } .password-input { position: relative; } .password-input input { width: 100%; padding-right: 2.5rem; } .toggle-password { position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%); padding: 0.25rem; background: none; border: none; color: var(--text-muted); cursor: pointer; transition: color 0.2s ease; } .toggle-password:hover { color: var(--accent); } .auth-submit { margin-top: 0.5rem; padding: 0.7rem; font-family: inherit; font-size: 0.95rem; font-weight: 500; color: var(--bg-dark-start); background: var(--accent); border: none; border-radius: 6px; cursor: pointer; transition: opacity 0.2s ease; } .auth-submit:hover { opacity: 0.9; } / Второстепенное действие рядом с залитой основной кнопкой: обводка акцентом, заливка на наведении. Рамка задаётся вместо `border: none` базовой кнопки, поэтому высота обеих кнопок отличается на 2px — компенсируем паддингом. / .auth-submit--outline { padding: calc(0.7rem - 1px); color: var(--text-light); background: transparent; border: 1px solid var(--accent); transition: color 0.2s ease, background-color 0.2s ease; } .auth-submit--outline:hover { color: var(--bg-dark-start); background: var(--accent); opacity: 1; } / Досье персонажа/жертвы — бумажный светлый фон, на нём светлый текст outline-кнопки нечитаем. / .game-modal--dossier .auth-submit--outline { color: #2b2620; } .game-modal--dossier .auth-submit--outline:hover { color: var(--text-light); } .auth-link { align-self: center; padding: 0; font-family: inherit; font-size: 0.85rem; color: var(--accent); background: none; border: none; cursor: pointer; text-decoration: none; transition: text-decoration-color 0.2s ease; } .auth-link:hover { text-decoration: underline; } / Всплывающие уведомления / .toast-container { position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; max-width: 90%; pointer-events: none; } .toast { pointer-events: auto; padding: 0.75rem 1.25rem; font-size: 0.9rem; color: var(--text-light); background: rgba(20, 18, 22, 0.95); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(-12px); transition: opacity 0.3s ease, transform 0.3s ease; } .toast.is-visible { opacity: 1; transform: translateY(0); } .toast.is-error { border-color: var(--accent); color: var(--accent); } .toast.is-success { border-color: #7fdba0; color: #7fdba0; } .toast.is-warning { border-color: #e6b34d; color: #e6b34d; } / Виджет аккаунта (кнопка пользователя + выпадающее меню) / .account-widget { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 20; } .account-widgetwrapper { position: relative; } .account-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; font-size: 1rem; color: var(--text-light); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; cursor: pointer; transition: border-color 0.2s ease; } .account-btn:hover, .account-btn[aria-expanded="true"] { border-color: var(--accent); } .account-dropdown { position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 200px; max-width: calc(100vw - 2rem); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; background: rgba(20, 18, 22, 0.98); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .account-dropdown.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .account-dropdownheader { padding: 0.4rem 0.7rem 0.6rem; margin-bottom: 0.25rem; font-size: 0.85rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .account-dropdownitem { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; font-family: inherit; font-size: 0.9rem; color: var(--text-light); text-decoration: none; text-align: left; background: none; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .account-dropdownitem:hover { color: var(--accent); background: rgba(255, 255, 255, 0.06); } .account-dropdownitem--logout { margin-top: 0.25rem; padding-top: 0.65rem; color: var(--accent); border-top: 1px solid rgba(255, 255, 255, 0.08); } @media (max-width: 480px) { .account-widget { top: 1rem; right: 1rem; } .account-btn { width: 2.5rem; height: 2.5rem; } } / Личный кабинет (dashboard.html) / .dashboard-card { max-width: 480px; padding: 2rem; text-align: center; } .dashboard-email { color: var(--accent); font-weight: 500; } .logout-btn { margin-top: 1.5rem; padding: 0.6rem 1.2rem; font-family: inherit; font-size: 0.9rem; color: var(--text-light); background: transparent; border: 1px solid var(--text-muted); border-radius: 6px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .logout-btn:hover { border-color: var(--accent); color: var(--accent); } .dashboard-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .dashboard-sectiontitle { margin-bottom: 0.5rem; font-family: var(--font-heading); font-size: 1.25rem; letter-spacing: 0.03em; } .settings-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; text-align: left; } .settings-form + .settings-form { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } / Компактная модалка личного кабинета (сейчас — смена никнейма). Визуально повторяет .game-modal, но без привязки к игровому контексту — используется на dashboard.html. / .account-modal-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .account-modal-backdrop[hidden] { display: none; } .account-modal { position: relative; width: 100%; max-width: 360px; / Тот же фикс переполнения, что и у .game-modal — см. комментарий там. / max-height: calc(100vh - 3rem); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2rem; display: flex; flex-direction: column; gap: 0.9rem; text-align: left; background: rgba(20, 18, 22, 0.98); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } .account-modalclose { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.4rem; font-size: 1.2rem; color: var(--text-muted); background: none; border: none; cursor: pointer; transition: color 0.2s ease; } .account-modalclose:hover { color: var(--accent); } .account-modaltitle { font-family: var(--font-heading); font-size: 1.3rem; letter-spacing: 0.03em; } .account-modalinput { padding: 0.65rem 0.8rem; font-family: inherit; font-size: 0.95rem; color: var(--text-light); background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; outline: none; transition: border-color 0.2s ease; } .account-modalinput:focus { border-color: var(--accent); } .account-modaltext { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); } .account-modalerror { margin: 0; font-size: 0.85rem; color: #ff6b6b; } .account-modalerror[hidden] { display: none; } / Pre-game модалка выбора сложности/режима (public/cases.js, openPregameModal) — расширяет базовый .account-modal, поэтому цвета/рамки наследуются от него и от CSS-переменных темы, отдельных [data-theme="hacker"]-переопределений не требуется. / .pregame-modal { max-width: 560px; } .pregame-modalheader { display: flex; gap: 1rem; } .pregame-modalcover { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: rgba(255, 255, 255, 0.04); } .pregame-modalinfo { display: flex; flex-direction: column; gap: 0.3rem; } .pregame-modaldescription { margin: 0; font-size: 0.85rem; color: var(--text-muted); } .pregame-modalbadges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; } .pregame-modalsection-title { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); } .pregame-modaloptions { display: flex; gap: 0.6rem; flex-wrap: wrap; } .pregame-option-btn { padding: 0.5rem 0.9rem; font-family: inherit; font-size: 0.85rem; color: var(--text-muted); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .pregame-option-btn:hover:not(:disabled) { border-color: var(--accent); } .pregame-option-btn.is-active { color: var(--text-light); background: rgba(230, 57, 70, 0.12); border-color: var(--accent); } .pregame-option-btn:disabled { cursor: not-allowed; opacity: 0.5; } @media (max-width: 768px) { .pregame-modalheader { flex-direction: column; } } / Страница лобби (public/lobby.html, public/lobby.js) — комната ожидания перед стартом кооперативного дела. Использует общие .auth-card/ .dashboard-card/.dashboard-section/.account-modalinput/.auth-submit, поэтому наследует цвета/рамки текущей темы без отдельных переопределений для [data-theme="hacker"] — только сами lobby-* классы ниже нейтральны к теме через CSS-переменные. / .lobby-header { display: flex; gap: 1rem; align-items: center; } .lobby-headercover { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: rgba(255, 255, 255, 0.04); } .lobby-headerinfo { display: flex; flex-direction: column; gap: 0.3rem; } .lobby-invite { display: flex; gap: 0.6rem; } .lobby-inviteinput { flex: 1; min-width: 0; } .lobby-invitecopy { flex-shrink: 0; width: auto; margin-top: 0; white-space: nowrap; } .lobby-players { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; } .lobby-player { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; color: var(--text-light); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; } .lobby-player i { color: var(--text-muted); } .lobby-playername { flex: 1; } .lobby-playerhost-badge { padding: 0.15rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--bg-dark-start); background: var(--accent); border-radius: 4px; } .lobby-start-btn { margin-top: 1.5rem; } @media (max-width: 600px) { .lobby-header { flex-direction: column; text-align: center; } .lobby-invite { flex-direction: column; } .lobby-invitecopy { width: 100%; } } / Кнопка обратной связи тестеров (public/nav.js, setupFeedbackWidget) — фиксирована в левом нижнем углу на всех страницах сайта. z-index ниже модалки (200), но выше игровых fixed-элементов (game-menu-toggle/ game-bottom-bar — 30), чтобы не перекрывалась ими. / .feedback-fab { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 150; width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; background: var(--accent); border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); transition: background-color 0.2s ease, transform 0.2s ease; } .feedback-fab:hover { background: #ff5a64; } .feedback-fab:active { background: #c62d39; transform: scale(0.95); } / Сетка дел (cases.html) / .case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; text-align: left; } .case-tile { display: flex; flex-direction: column; overflow: hidden; color: var(--text-light); text-decoration: none; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .case-tile:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.06); transform: scale(1.03); box-shadow: 0 12px 32px rgba(193, 18, 31, 0.35), 0 0 20px rgba(193, 18, 31, 0.2); } .case-tilecover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: rgba(0, 0, 0, 0.25); } .case-tilecover--placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 2rem; } .case-tilebody { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.9rem 1rem 1.1rem; } .case-tiletitle { font-weight: 500; } .case-tilestatus { font-size: 0.8rem; color: var(--text-muted); } .case-tilebadges { display: flex; flex-wrap: wrap; gap: 0.35rem; } .case-tilebadge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem; font-size: 0.72rem; color: var(--text-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; } .case-tileaction { align-self: flex-start; margin-top: 0.4rem; padding: 0.45rem 0.9rem; font-size: 0.85rem; font-weight: 500; color: var(--bg-dark-start); background: var(--accent); border-radius: 6px; } .case-tile.is-disabled { cursor: default; opacity: 0.6; } .case-tile.is-disabled:hover { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); transform: none; box-shadow: none; } / Достижения (achievements.html) / .achievements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .achievement-card { padding: 1.25rem 1rem; text-align: center; color: var(--text-muted); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; opacity: 0.5; transition: opacity 0.25s ease, border-color 0.25s ease; } .achievement-card.is-granted { color: var(--text-light); border-color: var(--accent); opacity: 1; } .achievement-card i { font-size: 1.6rem; color: var(--accent); } .achievement-cardtitle { margin-top: 0.6rem; font-weight: 500; font-size: 0.9rem; } .achievement-carddescription { margin-top: 0.35rem; font-size: 0.75rem; } / Страница игры (game.html) / / Кнопка-гамбургер шапки + выезжающая слева панель — заменяет старую строку из 4 кнопок ("К списку дел"/"Адресная книга"/"Завершить дело"/"Начать заново"), которые раньше стояли прямо в .top-bar. Открытие/закрытие — setupSideMenu() в game.js; сами кнопки не изменились (те же ID), просто физически лежат внутри панели. / .game-menu-toggle { position: fixed; top: 1.5rem; left: 1.5rem; z-index: 30; width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--text-light); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; cursor: pointer; transition: border-color 0.2s ease; } .game-menu-toggle:hover, .game-menu-toggle[aria-expanded="true"] { border-color: var(--accent); } / Фиксированная панель кнопок «Адресная книга»/«Телефон» по центру низа экрана (раньше — плавающая иконка телефона справа снизу + пункт бокового меню). pointer-events: none на контейнере + auto на кнопках — чтобы пустые зоны панели по краям не перехватывали клики по контенту под ней. / .game-bottom-bar { position: fixed; left: 0; right: 0; bottom: 1.5rem; z-index: 30; display: flex; justify-content: center; gap: 0.75rem; padding: 0 1rem; pointer-events: none; } .game-bottom-barbtn { position: relative; pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 11rem; height: 2.75rem; font-family: inherit; font-size: 0.9rem; color: var(--text-light); background: rgba(13, 13, 13, 0.95); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .game-bottom-barbtn i { font-size: 0.85rem; } .game-bottom-barbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-bottom-barbtn:hover { border-color: var(--accent); } .game-bottom-barbtn:active { background: var(--accent); border-color: var(--accent); color: var(--bg-dark-start); } .game-bottom-barbtn[hidden] { display: none; } .game-phone-togglebadge { position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; line-height: 1; color: #fff; background: #e5484d; border-radius: 999px; box-shadow: 0 0 0 2px var(--bg-dark); } .game-phone-togglebadge[hidden] { display: none; } / Экран телефона (React-остров phone-app.js) — плавающее окно над кнопкой #game-phone-toggle, сама кнопка сидит на bottom:1.5rem/2.75rem высотой, поэтому здесь оставлен зазор в bottom, чтобы окно не перекрывало её. / .game-phone-root { position: fixed; left: 50%; transform: translateX(-50%); bottom: 5rem; z-index: 1000; width: 320px; height: 550px; max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); } .game-phone-root[hidden] { display: none; } .phone-container { width: 100%; height: 100%; padding: 0.6rem; background: linear-gradient(160deg, #2a2a2e, #111113); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 34px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5); } / "Режим улики" (evidenceMode в phone-app.js) — телефон подозреваемого, найденный как улика, а не собственный телефон детектива: красная рамка вместо обычной серой, чтобы визуально отличать чужое устройство. / .phone-container--evidence { border-color: #e05252; box-shadow: 0 20px 48px rgba(224, 82, 82, 0.35), 0 0 0 2px rgba(224, 82, 82, 0.5); } .phone-screen { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #f4f4f6; border-radius: 26px; color: #1b1b1f; } .phone-header { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 0.6rem; background: #ffffff; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .phone-headertitle { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.95rem; text-align: center; } .phone-headerspacer { width: 1.9rem; flex-shrink: 0; } .phone-back-btn, .phone-close-btn { flex-shrink: 0; width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; color: #1b1b1f; background: rgba(0, 0, 0, 0.06); border: none; border-radius: 50%; cursor: pointer; transition: background-color 0.15s ease; } .phone-back-btn:hover, .phone-close-btn:hover { background: rgba(0, 0, 0, 0.12); } .phone-screenbody { flex: 1; overflow-y: auto; padding: 1rem; } .phone-empty-state { margin: 2rem 0; text-align: center; color: #8a8a92; font-size: 0.9rem; } / Главный экран / .phone-home-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .phone-app-icon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.75rem 0.5rem; background: none; border: none; cursor: pointer; color: #1b1b1f; } .phone-app-iconglyph { width: 3.25rem; height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; background: linear-gradient(160deg, var(--accent), #b32330); border-radius: 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .phone-app-icon:nth-child(2) .phone-app-iconglyph { background: linear-gradient(160deg, #4b8bf4, #2f5fc4); } .phone-app-iconlabel { font-size: 0.8rem; } .phone-app-iconbadge { position: absolute; top: 0.35rem; right: 0.9rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; line-height: 1; color: #fff; background: #e5484d; border-radius: 999px; box-shadow: 0 0 0 2px #f4f4f6; } / Экран сообщений / .phone-sms-list { display: flex; flex-direction: column; gap: 0.35rem; } .phone-sms-item { display: grid; grid-template-columns: 0.6rem 1fr; row-gap: 0.2rem; column-gap: 0.5rem; padding: 0.65rem 0.75rem; text-align: left; background: #ffffff; border: none; border-radius: 12px; cursor: pointer; transition: background-color 0.15s ease; } .phone-sms-item:hover { background: #ececee; } .phone-sms-itemsender { grid-column: 2; font-size: 0.88rem; color: #1b1b1f; } .phone-sms-item--unread .phone-sms-itemsender { font-weight: 700; } .phone-sms-itemdot { grid-column: 1; grid-row: 1 / 3; width: 0.4rem; height: 0.4rem; margin-top: 0.35rem; background: var(--accent); border-radius: 50%; } .phone-sms-itempreview { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-size: 0.8rem; color: #6b6b72; } .phone-sms-detailsender { margin-bottom: 0.5rem; font-weight: 700; font-size: 0.95rem; } .phone-sms-detailtext { font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; } / Экран галереи / .phone-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .phone-gallery-item { display: flex; flex-direction: column; gap: 0.3rem; } .phone-gallery-itemimg { width: 100%; aspect-ratio: 1; object-fit: cover; background: #dcdce0; border-radius: 12px; } .phone-gallery-itemlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; text-align: center; color: #4a4a50; } @media (max-width: 480px) { .game-phone-root { right: 0.75rem; bottom: 4rem; left: 0.75rem; width: auto; transform: none; height: min(550px, calc(100vh - 6rem)); height: min(550px, calc(100dvh - 6rem)); } } .game-side-menubackdrop { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, 0.6); } .game-side-menubackdrop[hidden] { display: none; } .game-side-menu { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: 280px; max-width: 85vw; display: flex; flex-direction: column; gap: 0.6rem; padding: 4.5rem 1.25rem 1.5rem; background: rgba(20, 18, 22, 0.98); border-right: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 12px 0 32px rgba(0, 0, 0, 0.4); transform: translateX(-100%); transition: transform 0.25s ease; } .game-side-menu.is-open { transform: translateX(0); } .game-side-menu .login-btn { width: 100%; justify-content: flex-start; } .game-side-menuclose { position: absolute; top: 1rem; right: 1rem; padding: 0.4rem; color: var(--text-muted); background: none; border: none; cursor: pointer; transition: color 0.2s ease; } .game-side-menuclose:hover { color: var(--accent); } / Аккордеон "Сложность" внутри бокового меню — кнопка-заголовок с шевроном (поворачивается на 180deg при раскрытии) + скрытый по умолчанию список вариантов, слегка сдвинутый вправо для визуальной иерархии. / .game-side-menuaccordion-btn { justify-content: space-between; } .game-side-menuaccordion-chevron { margin-left: auto; font-size: 0.8rem; transition: transform 0.2s ease; } .game-side-menuaccordion-btn.is-expanded .game-side-menuaccordion-chevron { transform: rotate(180deg); } .game-side-menuaccordion-body { display: flex; flex-direction: column; gap: 0.4rem; padding-left: 1.5rem; } .game-side-menuaccordion-body[hidden] { display: none; } .game-side-menuoption-btn { padding: 0.5rem 0.9rem; font-family: inherit; font-size: 0.85rem; text-align: left; color: var(--text-muted); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .game-side-menuoption-btn:hover { border-color: var(--accent); } .game-side-menuoption-btn.is-active { color: var(--text-light); background: rgba(230, 57, 70, 0.12); border-color: var(--accent); } / Выезжающая слева панель "Подсказки" — независимая от .game-side-menu, та же геометрия открытия/закрытия (backdrop + translateX). / .game-hints-menubackdrop { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, 0.6); } .game-hints-menubackdrop[hidden] { display: none; } .game-hints-menu { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: 280px; max-width: 85vw; display: flex; flex-direction: column; gap: 0.6rem; padding: 4.5rem 1.25rem 1.5rem; background: rgba(20, 18, 22, 0.98); border-right: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 12px 0 32px rgba(0, 0, 0, 0.4); transform: translateX(-100%); transition: transform 0.25s ease; } .game-hints-menu.is-open { transform: translateX(0); } .game-hints-menutitle { font-family: var(--font-heading); font-size: 1.4rem; letter-spacing: 0.03em; color: var(--text-light); } .game-hints-menulist { display: flex; flex-direction: column; gap: 0.6rem; overflow-y: auto; } .game-hints-menuplaceholder { font-size: 0.9rem; color: var(--text-muted); } @media (max-width: 480px) { .game-menu-toggle { top: 1rem; left: 1rem; width: 2.5rem; height: 2.5rem; } .game-bottom-bar { bottom: 1rem; gap: 0.5rem; padding: 0 0.75rem; } .game-bottom-barbtn { flex: 1 1 0; width: auto; max-width: 11rem; height: 2.5rem; padding: 0 0.6rem; gap: 0.35rem; font-size: 0.75rem; } .game-bottom-barbtn span { min-width: 0; } } .game { display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100dvh; padding: 5.5rem 1.5rem 6.5rem; gap: 1.5rem; } / Карта игры — React-остров (game-map-viewer.js) с zoom/pan через react-zoom-pan-pinch, тот же подход, что и в редакторе (.map-viewer). #game-scene — фиксированная по высоте "рамка" (нужна для TransformWrapper: без определённой высоты контейнера подгонка картинки под размер работать не может); высота min(55vh, 520px), чтобы под картой сразу было видно инвентарь/известных/дневник; .game-sceneviewport — корень React-дерева, замеряется ResizeObserver'ом внутри game-map-viewer.js; .game-sceneinner — контент натурального пиксельного размера внутри TransformComponent, аналог .map-viewerscene. / .game-scene { position: relative; width: 100%; max-width: 960px; height: min(55vh, 520px); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); } .game-sceneviewport { width: 100%; height: 100%; } .game-sceneinner { position: relative; } .game-sceneimage { display: block; user-select: none; } .game-scenecontrols { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; display: flex; gap: 0.4rem; } .game-scenecontrol-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--text-light); background: rgba(13, 13, 13, 0.75); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; cursor: pointer; transition: border-color 0.2s ease; } .game-scenecontrol-btn:hover { border-color: var(--accent); } .game-hotspot { position: absolute; width: 2.25rem; height: 2.25rem; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(230, 57, 70, 0.55); border: 3px solid var(--accent); cursor: pointer; animation: hotspotPulse 1.8s ease-in-out infinite; } @keyframes hotspotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.65); } 50% { box-shadow: 0 0 0 8px rgba(230, 57, 70, 0); } } /* Круглая зона видимости на карте (content.mapZones) — рендерится и в редакторе (map-viewer.js), и в игре (game-map-viewer.js) до хотспотов, чтобы у обоих не задан z-index (auto) и порядок в DOM гарантировал отрисовку хотспотов поверх зон. / .map-zone { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background-color: rgba(46, 204, 113, 0.35); border: 2px dashed rgba(46, 204, 113, 0.8); aspect-ratio: 1; pointer-events: none; } .map-zone--selected { border-style: solid; border-color: #fff; box-shadow: 0 0 15px rgba(46, 204, 113, 1); } .game-inventory { width: 100%; max-width: 960px; padding: 1.25rem; text-align: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; } .game-inventorytitle { margin-bottom: 0.75rem; font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: 0.03em; } .game-inventoryempty { color: var(--text-muted); font-size: 0.9rem; } .game-inventorylist { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .game-inventoryitem { padding: 0.5rem 0.9rem; font-family: inherit; font-size: 0.85rem; color: var(--text-light); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; cursor: pointer; transition: border-color 0.2s ease; } .game-inventoryitem:hover { border-color: var(--accent); } / У улики есть непрочитанное доп. описание (см. hasUnseenAdditions в game.js) — снимается при открытии карточки улики. position: relative нужен только для абсолютного позиционирования точки .game-inventoryitem-dot внутри кнопки. / .game-inventoryitem--updated { position: relative; } / Тот же зелёный, что и у подсветки additionalDescriptions в записной книжке (.game-notebookentry-addition) — зелёный = новая/доп. информация, по аналогии с .game-known-charactersnew-dot. / .game-inventoryitem-dot { position: absolute; top: -0.25rem; right: -0.25rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #7fdba0; box-shadow: 0 0 0 2px var(--bg-dark-start); } .game-modalbackdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .game-modalbackdrop[hidden] { display: none; } .game-modal { position: relative; width: 100%; max-width: 420px; / 1.5rem паддинга backdrop сверху и снизу — без этого длинные модалки (много полей формы/вопросов квиза) обрезаются экраном на мобильных без возможности скролла (см. HANDOFF "Фикс переполнения модалок"). / max-height: calc(100vh - 3rem); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2rem; display: flex; flex-direction: column; gap: 0.75rem; text-align: center; background: rgba(20, 18, 22, 0.98); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } .game-modalclose { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.4rem; color: var(--text-muted); background: none; border: none; cursor: pointer; transition: color 0.2s ease; } .game-modalclose:hover { color: var(--accent); } .game-modalimage { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; } .game-modaltitle { font-family: var(--font-heading); font-size: 1.3rem; letter-spacing: 0.03em; } / Плеер комикс-вступления (#comic-modal-backdrop, см. game.js) — осознанно не .game-modalbackdrop: занимает весь экран, не центрирует небольшую карточку, а главное — клик по фону здесь листает кадры, а не закрывает модалку (закрытия по фону/Esc у неё нет вообще, см. setupComicPlayer). / .comic-player-backdrop { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem 1.5rem; background: #050505; cursor: pointer; } .comic-player-backdrop[hidden] { display: none; } .comic-playerframes { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: 100%; max-width: 720px; max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem; } / Плавное появление кадра (opacity/translate 0 -> 1) — класс is-visible навешивается через requestAnimationFrame сразу после вставки в DOM, см. revealNextComicFrame() в game.js. / .comic-playerframe { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .comic-playerframe.is-visible { opacity: 1; transform: translateY(0); } .comic-playerframe img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); } .comic-playersubtitle { max-width: 90%; padding: 0.6rem 1.2rem; font-family: var(--font-heading); font-size: 1.05rem; text-align: center; color: var(--text-light); background: rgba(0, 0, 0, 0.55); border-radius: 8px; } .comic-playerstart-btn { position: relative; flex-shrink: 0; cursor: pointer; } / Модалка предмета/здания в стиле фото-полароида (#game-modal). / .polaroid-frame { width: 100%; padding: 0.5rem 0.5rem 1.25rem; margin-bottom: 0.5rem; background: #fdfdfa; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); transform: rotate(-1.5deg); } .polaroid-frame .game-modalimage { width: 100%; max-height: 220px; object-fit: cover; border-radius: 0; } / Модалка персонажа/жертвы в стиле личного дела: бумага, тёмный текст, фото в углу со скрепкой. Обёртка .dossier-photo плавает справа, поэтому элементы после фото (список фактов, кнопки) сбрасывают float через clear: both — иначе при коротком описании они наезжают на фото. / .game-modal--dossier { text-align: left; color: #2b2620; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0 1px, transparent 1px 26px), linear-gradient(135deg, #f2e9d4, #e6d8b8); border: 1px solid rgba(60, 45, 20, 0.25); } .game-modal--dossier .game-modalclose { color: rgba(43, 38, 32, 0.6); } .game-modal--dossier .game-modalclose:hover { color: var(--accent); } .game-modal--dossier .game-modaltitle { color: #221d17; } .game-modal--dossier .game-modaldescription, .game-modal--dossier .character-facttext { color: #4a423a; } .game-modal--dossier .character-fact { background: rgba(0, 0, 0, 0.04); border-color: rgba(60, 45, 20, 0.2); } .dossier-photo { position: relative; float: right; width: 6.5rem; margin: 0 0 0.75rem 1rem; background: #fff; padding: 0.3rem 0.3rem 0.5rem; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); transform: rotate(3deg); } .dossier-photo .game-modalimage { width: 100%; height: 8rem; max-height: none; object-fit: cover; border-radius: 0; } .dossier-photoclip { position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 1.4rem; color: #8a8f98; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } .game-modal--dossier .character-fact-list, .game-modal--dossier .game-modalaudio, .game-modal--dossier > .auth-submit, .game-modal--dossier > .auth-link, .game-modal--dossier > div[id$="-bank-btn-container"] { clear: both; } / Текст брифинга дела (#intro-modal-text) — сохраняем переносы строк из textarea редактора и позволяем скроллить длинный текст без раздувания модалки на весь экран. / .game-modalintro-text { max-height: 50vh; overflow-y: auto; text-align: left; white-space: pre-wrap; color: var(--text-muted); line-height: 1.5; } / Переключатель «Художественные описания» (модалка перед обыском, #game-search-flavor-modal) — нативный checkbox спрятан, вместо него пилюля с ползунком, включено — заливка var(--accent) и сдвиг ползунка вправо. / .game-flavor-toggle { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0; cursor: pointer; user-select: none; } .game-flavor-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .game-flavor-toggletrack { position: relative; flex-shrink: 0; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); transition: background-color 0.2s ease, border-color 0.2s ease; } .game-flavor-togglethumb { position: absolute; top: 0.15rem; left: 0.15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--text-light); transition: transform 0.2s ease; } .game-flavor-toggle input[type="checkbox"]:checked ~ .game-flavor-toggletrack { background: var(--accent); border-color: var(--accent); } .game-flavor-toggle input[type="checkbox"]:checked ~ .game-flavor-toggletrack .game-flavor-togglethumb { transform: translateX(1.1rem); } .game-flavor-togglelabel { font-size: 0.9rem; color: var(--text-muted); } / Модалка «Проверить логику» (валидатор дела) — список может быть длинным, поэтому шире и без центрирования текста в отличие от базовой .game-modal. / .validator-modal { max-width: 640px; text-align: left; } .validator-results { display: flex; flex-direction: column; gap: 1rem; max-height: 60vh; overflow-y: auto; } .validator-resultsgroup-title { margin-bottom: 0.5rem; font-family: var(--font-heading); font-size: 1.05rem; letter-spacing: 0.02em; } .validator-list { display: flex; flex-direction: column; gap: 0.5rem; } .validator-listitem { padding: 0.6rem 0.8rem; font-size: 0.92rem; border-radius: 8px; border: 1px solid currentColor; background: rgba(255, 255, 255, 0.03); } .validator-listitem--error { color: var(--accent); } .validator-listitem--warning { color: #e6b800; } / Чип триггера внутри сообщения валидатора: техническое имя, подсказка с описанием по title, клик уводит на сам триггер. Цвет наследуется от сообщения, поэтому чип выглядит частью ошибки/предупреждения. / .validator-trigger-chip { display: inline-block; padding: 0.05rem 0.4rem; color: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; vertical-align: baseline; border: 1px solid currentColor; border-radius: 5px; background: rgba(255, 255, 255, 0.06); cursor: pointer; transition: background 0.2s ease; } .validator-trigger-chip:hover { background: rgba(255, 255, 255, 0.16); } .validator-trigger-chip--missing { cursor: help; opacity: 0.75; text-decoration: line-through; } .validator-trigger-chip--missing:hover { background: rgba(255, 255, 255, 0.06); } .validator-success { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem; color: #7fdba0; border: 1px solid #7fdba0; border-radius: 8px; background: rgba(127, 219, 160, 0.08); } .game-modaldescription { display: flex; flex-direction: column; gap: 0.5rem; } / Тот же повторяющийся паттерн, что у .auth-field[hidden]/.game-modalbackdrop[hidden] и т.д. — без этого переопределения [hidden] проигрывает каскад безусловному display: flex выше (нужно для #police-modal-welcome, скрываемого на под-экранах участка, см. showPoliceDepartment() в game.js). / .game-modaldescription[hidden] { display: none; } .game-modaldescription-main { font-size: 0.9rem; color: var(--text-muted); } .game-modaldescription-addition { padding: 0.5rem 0.75rem; border-left: 2px solid #7fdba0; border-radius: 0 6px 6px 0; background: rgba(127, 219, 160, 0.08); font-size: 0.88rem; color: var(--text-light); } / Ввод ПИН-кода/пароля улики-устройства (openItemModal в game.js) — строка инпут+кнопка внутри модалки улики, вместо отдельного .auth-field. / .game-modaldevice-unlock { display: flex; width: 100%; gap: 0.5rem; margin-top: 0.5rem; } .game-modaldevice-unlock[hidden] { display: none; } .game-modaldevice-unlock input { flex: 1; min-width: 0; padding: 0.65rem 0.8rem; font-family: inherit; font-size: 0.95rem; color: var(--text-light); background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; outline: none; transition: border-color 0.2s ease; } .game-modaldevice-unlock input:focus { border-color: var(--accent); } .game-modaldevice-unlock .auth-submit { flex: 0 0 auto; width: auto; margin-top: 0; } / Модалка оценки дела ("шляпы детектива", #review-modal-backdrop) / .hats-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1rem 0; } .detective-hat { font-size: 1.8rem; color: #3a3a42; cursor: pointer; transition: color 0.15s ease, transform 0.15s ease; } .detective-hat:hover, .detective-hat.active { color: var(--accent); transform: scale(1.1); } / Текст отзыва в модалке завершения дела — необязательный, поэтому кнопка «Отправить» на него не смотрит, а счётчик просто показывает остаток до maxlength (см. setupReviewModal в game.js). / .review-modalcomment-field { margin-bottom: 1rem; } .review-modalcounter { margin: 0; font-size: 0.75rem; color: var(--text-muted); text-align: right; } .game-modalaudio { width: 100%; } / Записная книжка (game.html) / .game-notebook { width: 100%; max-width: 960px; padding: 1.25rem; text-align: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; } .game-notebooktitle { margin-bottom: 0.75rem; font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: 0.03em; } .game-notebookempty { color: var(--text-muted); font-size: 0.9rem; } .game-notebookentry { padding: 0.75rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .game-notebookentry:first-child { border-top: none; } .game-notebookentry-title { margin-bottom: 0.25rem; font-weight: 500; } .game-notebookentry-text { font-size: 0.9rem; color: var(--text-muted); } .game-notebookentry-addition { margin-top: 0.4rem; padding: 0.4rem 0.6rem; border-left: 2px solid #7fdba0; border-radius: 0 6px 6px 0; background: rgba(127, 219, 160, 0.08); font-size: 0.85rem; color: var(--text-light); } / У улики есть непрочитанное доп. описание (см. hasUnseenAdditions в game.js) — снимается при открытии карточки улики. / .game-notebookentry--updated .game-notebookentry-title { color: var(--accent); } .game-notebookentry-badge { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; background: var(--accent); border-radius: 4px; vertical-align: middle; } .game-known-characters { width: 100%; max-width: 960px; padding: 1.25rem; text-align: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; } .game-known-characterstitle { margin-bottom: 0.75rem; font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: 0.03em; } .game-known-charactersempty { color: var(--text-muted); font-size: 0.9rem; } .game-known-characterslist { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .game-known-charactersitem { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.8rem 0.4rem 0.4rem; font-family: inherit; font-size: 0.9rem; color: var(--text-light); text-align: left; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .game-known-charactersitem:hover { border-color: var(--accent); background: rgba(230, 57, 70, 0.1); } .game-known-charactersitem-photo { flex-shrink: 0; width: 2rem; height: 2rem; object-fit: cover; border-radius: 50%; } .game-known-charactersitem-photo--placeholder { display: flex; align-items: center; justify-content: center; color: var(--accent); background: rgba(230, 57, 70, 0.1); } / Индикаторы "новый ответ" (облегчённая сложность) — не меняют размеры фото/плейсхолдера, только оборачивают их для абсолютного позиционирования точек. Жёлтая (диалог) и красная (допрос) точки могут показываться одновременно — разнесены по разным углам, чтобы не перекрываться. / .game-known-charactersitem-photo-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .game-known-charactersnew-dot { position: absolute; width: 0.6rem; height: 0.6rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-dark-start); } .game-known-charactersnew-dot--dialogue { top: -0.1rem; right: -0.1rem; background: #f4c430; } / Тот же зелёный, что и у .game-inventoryitem-dot — "впервые доступен диалог" при самой первой встрече, заменяет жёлтую точку выше (см. isFirstMeeting в renderKnownEntityPhoto, game.js), поэтому позиция та же. / .game-known-charactersnew-dot--first-meeting { top: -0.1rem; right: -0.1rem; background: #7fdba0; } .game-known-charactersnew-dot--interrogation { bottom: -0.1rem; right: -0.1rem; background: var(--accent); } .game-complete { max-width: 640px; margin: 0 auto; padding: 6rem 1.5rem 2rem; text-align: center; } .game-completeanswers { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; text-align: left; } .game-completereturn-btn { display: inline-block; margin-top: 2rem; text-decoration: none; } / Админка (admin.html) / .admin-page { max-width: 1100px; margin: 0 auto; padding: 6rem 1.5rem 2rem; } .admin-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .admin-tabs::-webkit-scrollbar { display: none; } .admin-tab { padding: 0.75rem 1.25rem; background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 1rem; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; flex-shrink: 0; white-space: nowrap; } .admin-tab.is-active { color: var(--text-light); border-bottom-color: var(--accent); } .admin-tab-panel { display: none; text-align: left; } .admin-tab-panel.is-active { display: block; } / Бейджик числа новых записей на вкладке админки (сейчас — «Обратная связь», см. admin.js loadDashboard) — по образцу .game-phone-togglebadge, но инлайново рядом с текстом вкладки, а не абсолютно поверх иконки. / .admin-tabbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; margin-left: 0.4rem; padding: 0 0.3rem; font-size: 0.7rem; font-weight: 600; line-height: 1; color: #fff; background: #e5484d; border-radius: 999px; } .admin-tabbadge[hidden] { display: none; } / Пилюли-подвкладки внутри вкладок «Сущности» и «Общение» / .admin-subtabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .admin-subtab { padding: 0.45rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; color: var(--text-muted); font-family: inherit; font-size: 0.9rem; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .admin-subtab:hover { color: var(--text-light); } .admin-subtab.is-active { color: var(--text-light); background: var(--accent); border-color: var(--accent); } .admin-subtab-panel { display: none; } .admin-subtab-panel.is-active { display: block; } .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .admin-stat-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem; text-align: left; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; } .admin-stat-cardvalue { font-family: var(--font-heading); font-size: 2rem; color: var(--text-light); } .admin-stat-cardlabel { font-size: 0.8rem; color: var(--text-muted); } .admin-users-table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: 0.9rem; } .admin-users-table th, .admin-users-table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .admin-users-table th { color: var(--text-muted); font-weight: 500; } .admin-status-dot { display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.4rem; border-radius: 50%; background: var(--text-muted); } .admin-status-dot.is-online { background: #4caf50; } .admin-status-dot.is-offline { background: var(--text-muted); } .admin-period-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } .admin-period-card { padding: 1rem 1.1rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; } .admin-period-cardtitle { margin-bottom: 0.6rem; font-size: 0.95rem; color: var(--text-light); } .admin-period-cardrow { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.85rem; color: var(--text-muted); } .admin-period-cardrow strong { color: var(--text-light); } .admin-activity-feed { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; } .admin-activity-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; font-size: 0.85rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; } .admin-activity-item i { color: var(--accent); } .admin-activity-item--clickable { cursor: pointer; transition: background 0.2s ease; } .admin-activity-item--clickable:hover { background: rgba(255, 255, 255, 0.06); } .admin-activity-itemtime { margin-left: auto; color: var(--text-muted); white-space: nowrap; } .admin-user-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; } .admin-user-card { padding: 1rem 1.1rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; } .admin-user-card.is-banned { border-color: var(--accent); background: rgba(230, 57, 70, 0.08); } .admin-user-card.is-highlighted { border-color: var(--accent); background: rgba(230, 57, 70, 0.14); } .admin-user-cardheader { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .admin-user-cardheader-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } / На узких экранах роль-селект + кнопка бана не помещаются рядом с именем пользователя (justify-content: space-between их выталкивает за карточку) — переносим блок действий на новую строку на всю ширину. / @media (max-width: 560px) { .admin-user-cardheader-actions { flex-basis: 100%; width: 100%; } .admin-user-cardheader-actions .admin-badge-select { flex: 1 1 auto; min-width: 0; } } .admin-user-cardemail { margin-top: 0.2rem; font-size: 0.8rem; color: var(--text-muted); } .admin-user-cardmeta { margin-top: 0.2rem; font-size: 0.8rem; color: var(--text-muted); } .admin-user-cardban-btn { flex-shrink: 0; padding: 0.4rem 0.8rem; font-size: 0.8rem; background: transparent; border: 1px solid var(--accent); border-radius: 6px; color: var(--text-light); cursor: pointer; } / Всегда акцентно-красная (в отличие от обратимого бана) — самое разрушительное действие в админке должно быть визуально выделено сильнее. / .admin-user-carddelete-btn { flex-shrink: 0; padding: 0.4rem 0.8rem; font-size: 0.8rem; background: transparent; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); cursor: pointer; } .admin-user-carddelete-btn:hover { background: rgba(230, 57, 70, 0.14); } .admin-user-cardprogress { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.85rem; } .admin-user-progress-item { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); } .admin-user-progress-item--empty { font-size: 0.85rem; color: var(--text-muted); } .admin-user-cardbadges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; } .admin-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; font-size: 0.75rem; background: rgba(230, 57, 70, 0.12); border: 1px solid var(--accent); border-radius: 20px; } .admin-badgerevoke { display: inline-flex; align-items: center; padding: 0; background: none; border: none; color: var(--text-muted); cursor: pointer; } .admin-user-cardgrant { display: flex; gap: 0.5rem; margin-top: 0.85rem; } .admin-badge-select { flex: 1; padding: 0.5rem 0.6rem; font-family: inherit; font-size: 0.85rem; color: var(--text-light); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; } / Раскрытый список