/* ============================================================ «Слово дня» — оформление. Окружение (шапка, лента) повторяет настоящую главную Дзена: серый фон сверху с поиском Яндекса и рекламой, ниже — белая панель ленты со скруглённым верхом, карточки с источником. Логотип и вход прижаты к краям окна, поиск с погодой и реклама выровнены по одной центральной колонке (--col). Цвета статусов букв — по ТЗ §6.2: зелёный, жёлтый, серый; фирменный акцент остаётся на кнопках игры. ============================================================ */ :root { --bg: #eff0f2; /* фон страницы и шапки — точный серый Дзена */ --panel: #ffffff; /* белая панель с лентой, начинается под рекламой */ --surface: #ffffff; --modal: #ece5db; --tile: #ffffff; /* пустая клетка поля и её граница */ --tile-line: #ddd6ca; --text: #1a1a1a; --muted: #83838c; --line: #e6e6ea; --hover: #e9e9ec; /* активный пункт меню и вкладка на белой панели */ --accent: #ff5317; /* фирменный оранжевый Дзена */ --yellow: #ffcc00; /* жёлтый Яндекса: рамка поиска и кнопка «Найти» */ --verified: #4a8cf7; --key: #e8e9eb; --correct: #4a9d4e; --present: #d9a514; --absent: #8e8e96; --gold: #f0b429; --shadow: 0 24px 80px rgba(0, 0, 0, 0.24); --radius: 16px; /* Общая колонка: поиск, погода, рекламный ряд. Ширину ограничивает место, остающееся по краям под логотип и правую группу с виджетом игры. Вычет считаем по самой широкой правой группе — с виджетом, балансом, шестерёнкой и кнопкой «Войти»: она шире, чем аватар после входа. */ --col: clamp(500px, calc(100vw - 880px), 1040px); color-scheme: light; } /* Тёмная палитра: по системной настройке или принудительно из настроек игры. data-theme ставится на , иначе переопределение не доходит до body. */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; --bg: #171719; --panel: #202022; --surface: #232325; --modal: #202022; --tile: #26262c; --tile-line: #3b3b45; --text: #fafafa; --muted: #b5b5bd; --line: #35353d; --hover: #26262c; --key: #36363d; --absent: #6d6d76; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #171719; --panel: #202022; --surface: #232325; --modal: #202022; --tile: #26262c; --tile-line: #3b3b45; --text: #fafafa; --muted: #b5b5bd; --line: #35353d; --hover: #26262c; --key: #36363d; --absent: #6d6d76; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); min-height: 100dvh; -webkit-font-smoothing: antialiased; } button, input { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* ===================== Шапка ===================== */ .topbar { display: flex; align-items: center; gap: 14px; padding: 14px 24px; position: relative; } .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; flex: 1; } .brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--text); color: var(--bg); } .brand-mark svg { width: 24px; height: 24px; } /* Поиск: белое поле с жёлтой рамкой Яндекса и жёлтой кнопкой «Найти» */ .search { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 2px solid var(--yellow); border-radius: 12px; padding: 3px 3px 3px 14px; /* flex: 0 1 — колонка задаёт ширину, но при нехватке места поиск ужимается. min-width: 0 обязателен: без него флекс-элемент не сжимается ниже контента и правая группа наезжает на поиск, а не отодвигает его. */ flex: 0 1 var(--col); width: var(--col); min-width: 0; } .topbar-right { display: flex; align-items: center; gap: 10px; /* basis по содержимому и flex-shrink: 0 — иначе группа получала долю наравне с логотипом, содержимое в неё не влезало и виджет выезжал влево, на кнопку «Найти». Сжиматься должен поиск, а не эта группа. */ flex: 1 0 auto; justify-content: flex-end; } .search-placeholder { flex: 1; color: var(--muted); font-size: 14px; } .search-kbd { color: var(--muted); display: grid; place-items: center; } .search-kbd svg { width: 22px; height: 22px; } .search-go { background: var(--yellow); color: #1a1a1a; border-radius: 9px; padding: 9px 22px; font-weight: 600; font-size: 15px; } /* Виджет игры в шапке */ .word-widget { display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 12px; padding: 7px 14px 7px 10px; text-align: left; flex: none; transition: background .15s; } .word-widget:hover { background: var(--hover); } .word-widget b { display: block; font-size: 14px; } .word-widget small { display: block; font-size: 12px; color: var(--accent); } .mini-grid { display: flex; gap: 2px; } .mini-grid i { width: 11px; height: 15px; border-radius: 3px; /* пустые клетки на светло-серой плашке виджета иначе сливаются с фоном */ background: color-mix(in srgb, var(--key) 70%, var(--text) 12%); font-style: normal; } .mini-grid i.correct { background: var(--correct); } .mini-grid i.present { background: var(--present); } .mini-grid i.absent { background: var(--absent); } .coin-balance { display: inline-flex; align-items: center; gap: 5px; background: color-mix(in srgb, var(--gold) 22%, var(--panel)); border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: 14px; flex: none; } .coin-balance i { color: var(--gold); font-style: normal; font-size: 15px; } .gear { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--muted); flex: none; } .gear:hover { background: var(--panel); color: var(--text); } .gear svg { width: 24px; height: 24px; } /* Всплывающее меню настроек */ .settings-wrap { position: relative; flex: none; } .settings-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 300px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 44px rgba(0, 0, 0, .18); } .settings-title { text-align: center; font-weight: 600; font-size: 16px; padding: 8px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .settings-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 12px; text-decoration: none; color: var(--text); font-size: 15px; text-align: left; } .settings-row:hover { background: var(--bg); } .settings-ico { width: 22px; height: 22px; color: var(--muted); flex: none; } .settings-label { flex: 1; } .settings-row em { font-style: normal; color: var(--muted); font-size: 14px; } .settings-row .chev { color: var(--muted); font-size: 18px; line-height: 1; } .settings-row .mark { color: var(--accent); font-weight: 700; opacity: 0; } .settings-row.chosen .mark { opacity: 1; } .settings-row.chosen .settings-label { font-weight: 600; } .settings-back { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px 12px; font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .login { height: 40px; padding: 0 22px; border-radius: 12px; background: var(--panel); font-weight: 500; font-size: 15px; flex: none; } .login:hover { background: var(--hover); } .profile { position: relative; flex: none; } .profile-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--key); } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-avatar img:not([src]) { display: none; } /* Пока аватар не загрузился (или его нет у профиля) — первая буква имени */ .profile-fallback { position: absolute; font-size: 16px; font-weight: 700; color: var(--muted); } .profile-avatar img[src] + .profile-fallback { display: none; } .profile-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 220px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 44px rgba(0, 0, 0, .18); } .profile-name { padding: 8px 12px 10px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--line); margin-bottom: 6px; } /* ===================== Лента ===================== */ .feed { display: flex; flex-direction: column; } /* Погода, курсы и реклама живут в той же центральной колонке, что и поиск, — панель ленты ниже идёт во всю ширину. Так это устроено на главной Дзена. */ .services, .promo-row { width: min(100% - 48px, var(--col)); margin: 0 auto; } .services { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); padding: 4px 0 16px; } .weather { display: inline-flex; align-items: center; gap: 6px; } .weather svg { width: 20px; height: 20px; } .weather b { color: var(--text); font-weight: 600; } .services .rates { margin-left: auto; display: flex; gap: 18px; } /* Рекламный ряд над лентой */ .promo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 20px; } .promo { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border-radius: 14px; padding: 10px; } .promo-visual { width: 128px; height: 68px; border-radius: 8px; flex: none; } .promo-visual.wood { background: repeating-linear-gradient(90deg, #c89b63 0 14px, #b98a52 14px 28px); } .promo-visual.roof { background: repeating-linear-gradient(45deg, #2f3238 0 10px, #383c44 10px 20px); } .promo-text { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* Заголовок объявления — не больше двух строк, как в ленте Дзена */ .promo-text b { font-size: 14px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Домен и пометка «Реклама» держим в одну строку: перенос ломает ритм карточки */ .promo .src { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; } .promo .more { color: var(--muted); font-size: 15px; letter-spacing: .06em; } /* Строка источника: кружок-фавикон, домен, пометка «Реклама» */ .src { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); font-weight: 500; min-width: 0; } .src em { font-style: normal; color: var(--muted); font-weight: 400; font-size: 12px; } .fav { width: 18px; height: 18px; border-radius: 50%; flex: none; } .fav-wood { background: linear-gradient(135deg, #f5c26b, #d08a3c); } .fav-roof { background: linear-gradient(135deg, #7f8895, #3c424c); } .fav-picnic { background: linear-gradient(135deg, #7bd88f, #2f9e56); } .fav-travel { background: linear-gradient(135deg, #8fb8ff, #3f6fd0); } /* Панель ленты: светло-серая, со скруглённым верхом — как у Дзена */ .portal { display: grid; /* Левая колонка не по ширине меню, а до начала поисковой строки: в оригинале лента выровнена по поиску, а меню просто стоит в этой зоне слева. 22px — отступ панели (margin 10 + padding 12), 24px — gap самой сетки. */ grid-template-columns: calc((100vw - var(--col)) / 2 - 46px) minmax(0, 1fr); gap: 24px; background: var(--panel); border-radius: 24px 24px 0 0; padding: 20px 12px 80px; margin: 0 10px; min-height: 80vh; } /* --- Боковое меню --- */ .sidenav { display: flex; flex-direction: column; gap: 2px; width: 232px; } .sidenav > a { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--text); font-size: 14px; } .sidenav > a:hover { background: var(--hover); } .sidenav > a.active { background: var(--hover); font-weight: 600; } .sidenav .ico { width: 22px; height: 22px; flex: none; } .sidenav hr { border: none; border-top: 1px solid var(--line); margin: 10px 14px; } .sidenav-links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding: 18px 14px 0; border-top: 1px solid var(--line); font-size: 13px; } .sidenav-links a { color: var(--muted); text-decoration: none; } .sidenav-links a:hover { color: var(--text); } .sidenav-links .more-link { display: inline-flex; align-items: center; gap: 4px; } /* --- Центральная колонка --- */ /* Одна сетка на всю ленту: две колонки под карточки плюс колонка рекламы. Новости занимают первый ряд целиком по левой части, поэтому во втором ряду обе карточки и вторая реклама стартуют с одной высоты — картинки в линию. Ширину левой части задаёт та же переменная, что и поиск, поэтому реклама стоит вплотную к новостям, а не улетает к краю панели. */ .stream { display: grid; grid-template-columns: repeat(2, minmax(0, calc((var(--col) - 20px) / 2))) 340px; gap: 26px 20px; align-items: start; justify-content: start; } .news-block { grid-column: 1 / 3; } .news-block { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .tabs { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); /* В оригинале вкладки в одну строку и уезжают за край, а не переносятся */ flex-wrap: nowrap; overflow: hidden; } .tabs b, .tabs span { white-space: nowrap; } .tabs b, .tabs span { padding: 6px 12px; border-radius: 10px; font-weight: 400; } .tabs b { color: var(--text); background: var(--hover); font-weight: 500; } .tabs span:hover { background: var(--hover); } .tabs .tabs-more { letter-spacing: 0; } .headlines { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .headlines p { display: flex; align-items: center; gap: 10px; padding: 4px 0; line-height: 1.35; } /* Кружок источника новости — у Дзена это логотип издания */ .headlines i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--absent); color: #fff; font-size: 10px; font-weight: 700; font-style: normal; flex: none; } .headlines p:nth-of-type(1) i { background: #e8353e; } .headlines p:nth-of-type(2) i { background: #1f2a37; } .headlines p:nth-of-type(3) i { background: #2f6fd0; } .headlines p:nth-of-type(4) i { background: #4a9d4e; } .headlines p:nth-of-type(5) i { background: #d0492f; } .headlines p:nth-of-type(6) i { background: #6a56d8; } /* Шеврон сразу за заголовком — в Дзене он разворачивает сюжет */ .headlines p::after { content: "⌄"; color: var(--muted); font-size: 13px; line-height: 1; margin-left: -4px; } .headlines b { font-size: 15px; padding-top: 6px; } /* --- Рекламная карточка справа от новостей --- */ .side-promo { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); } .side-promo-art { position: relative; height: 180px; border-radius: var(--radius); background: linear-gradient(165deg, #7fb069 0%, #a8c686 45%, #4a7c3f 100%); } .side-promo-badge { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, .5); color: #fff; border-radius: 6px; padding: 3px 7px; font-size: 11px; } .side-promo b { font-size: 15px; line-height: 1.3; font-weight: 600; } /* --- Карточки ленты --- */ .card { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .card .art { margin-bottom: 4px; } .card h2 { font-size: 17px; line-height: 1.28; font-weight: 600; } .card h3 { font-size: 16px; line-height: 1.3; font-weight: 600; } .card p { font-size: 13px; line-height: 1.42; color: var(--muted); } .card-meta { font-size: 12px; color: var(--muted); } .ava { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; font-style: normal; flex: none; } .ava-science { background: #2f6fd0; } .ava-city { background: #d0492f; } .check { width: 14px; height: 14px; color: var(--verified); flex: none; } /* Заглушки вместо фотографий: у демо-окружения нет реальных изображений */ .art { height: 168px; border-radius: var(--radius); position: relative; overflow: hidden; } .art-space { background: radial-gradient(120% 120% at 30% 20%, #3a3550, #17151f); } .planet { position: absolute; left: 34%; top: 34%; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9d6b, #e2603a); } .orbit { position: absolute; left: 20%; top: 40%; width: 190px; height: 60px; border: 2px solid rgba(255,255,255,.55); border-radius: 50%; transform: rotate(-16deg); } .art-city { background: linear-gradient(160deg, #9fc3d8 55%, #2d3a45 55%); } .art-travel { background: linear-gradient(140deg, #f0a86a, #6f8fa8); } /* На широком экране поиск держим ровно по центру окна, как на главной Дзена: в потоке он сдвигался, потому что правая группа с виджетом и «Войти» заметно шире логотипа. Ниже 1180px место кончается — там обычный поток. */ @media (min-width: 1181px) { /* Справа живёт более широкая группа (виджет, стеллы, настройки и вход), поэтому геометрический центр пересекается с виджетом. Сдвигаем поиск влево на её половину и сохраняем явный зазор между карточками. */ .search { position: absolute; left: calc(50% - 96px); transform: translateX(-50%); } /* Поиск вышел из потока, поэтому логотип занимает место по содержимому, а правая группа забирает остаток и прижимает виджет к краю окна */ .brand { flex: 0 0 auto; } } @media (max-width: 900px) { /* На узком экране оставляем компактный индикатор; на desktop у виджета всегда есть название и статус, а не только пять клеток. */ .word-widget > span:not(.mini-grid) { display: none; } .word-widget { padding: 7px 10px; } } @media (max-width: 1180px) { .stream { grid-template-columns: repeat(2, minmax(0, 1fr)); } .news-block { grid-column: 1 / -1; } /* Баланс стелл не прячем: игрок должен видеть, на что покупает подсказки. */ .coin-balance { padding: 7px 10px; } } @media (max-width: 900px) { .portal { grid-template-columns: 1fr; } .sidenav { display: none; } .promo-row { grid-template-columns: 1fr; } .search { max-width: none; } .search-kbd { display: none; } } @media (max-width: 640px) { .stream { grid-template-columns: 1fr; } .brand-name, .services .rates { display: none; } } /* ===================== Модалка игры ===================== */ .backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 16px; z-index: 40; } .game-modal { position: relative; width: min(460px, 100%); max-height: 92dvh; overflow-y: auto; background: var(--modal); border-radius: 26px; box-shadow: var(--shadow); padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 14px; } .game-header { display: grid; /* Средняя колонка остаётся в геометрическом центре карточки: количество иконок справа не сдвигает название игры. */ grid-template-columns: minmax(32px, 1fr) auto minmax(32px, 1fr); align-items: center; gap: 10px; } .game-header > div:nth-child(2) { text-align: center; } .game-header h2 { font-size: 17px; } .game-header span { font-size: 12px; color: var(--muted); } .actions { display: flex; justify-content: flex-end; gap: 4px; } .icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--muted); font-size: 15px; } .icon-btn:hover { background: rgba(0,0,0,.06); color: var(--text); } :root[data-theme="dark"] .icon-btn:hover, :root[data-theme="system"] .icon-btn:hover { background: rgba(255,255,255,.08); } .game-view { display: flex; flex-direction: column; gap: 14px; align-items: center; } .game-intro { text-align: center; display: flex; flex-direction: column; gap: 6px; } .game-intro h3 { font-size: 17px; } .game-intro p { font-size: 13px; color: var(--muted); line-height: 1.4; } .day-pill { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--accent); } .toast { min-height: 20px; font-size: 13px; font-weight: 600; text-align: center; } /* Игровое поле */ .board { display: flex; flex-direction: column; gap: 8px; } .board-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .tile { width: 58px; height: 58px; border-radius: 12px; /* Своя пара токенов, а не --surface: в тёмной теме поверхность совпадает с фоном модалки, и пустое поле становилось невидимым. */ background: var(--tile); border: 2px solid var(--tile-line); font-size: 26px; font-weight: 700; display: grid; place-items: center; position: relative; transition: transform .15s, background-color .2s, border-color .2s, color .2s; } .tile:disabled { cursor: default; } .tile.filled { transform: scale(1.02); } .tile.selected { border-color: var(--accent); } .tile.selected::after { content: ""; position: absolute; bottom: 9px; width: 42%; height: 3px; border-radius: 2px; background: var(--accent); animation: caret 1.1s steps(1) infinite; } .tile.filled.selected::after { opacity: .35; } @keyframes caret { 50% { opacity: 0; } } /* У раскрытых клеток граница не нужна: цвет статуса сам задаёт форму */ .tile.correct { background: var(--correct); color: #fff; border-color: transparent; } .tile.present { background: var(--present); color: #fff; border-color: transparent; } .tile.absent { background: var(--absent); color: #fff; border-color: transparent; } .tile em { position: absolute; top: 3px; right: 6px; font-size: 11px; font-style: normal; opacity: .85; } .reveal { animation: flip .5s ease; } @keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } } .shake { animation: shake .42s; } @keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .reduced .reveal, .reduced .shake, .reduced .tile { animation: none !important; transition: none !important; } .attempt-counter { display: flex; justify-content: space-between; width: 100%; font-size: 12px; color: var(--muted); gap: 12px; } .attempt-counter span:last-child { text-align: right; } .submit-word { width: 100%; background: var(--accent); color: #fff; border-radius: 14px; padding: 13px; font-weight: 700; font-size: 15px; } .submit-word:disabled { opacity: .45; cursor: default; } .ghost-btn { width: 100%; border-radius: 14px; padding: 11px; font-weight: 600; font-size: 14px; color: var(--muted); } .ghost-btn:hover { color: var(--text); } .ghost-btn.demo { font-size: 13px; } /* Клавиатура */ .keyboard { display: flex; flex-direction: column; gap: 6px; width: 100%; } .key-row { display: flex; gap: 4px; justify-content: center; } .key { flex: 0 1 64px; min-width: 0; height: 46px; border-radius: 8px; background: var(--key); font-size: 14px; font-weight: 600; transition: background-color .2s, color .2s; } .key:hover { filter: brightness(.95); } .key.delete { flex: 0 1 96px; } .key.correct { background: var(--correct); color: #fff; } .key.present { background: var(--present); color: #fff; } .key.absent { background: var(--absent); color: #fff; } /* ===================== Результат ===================== */ .result { text-align: center; } .result-kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--accent); } .result h3 { font-size: 19px; } .coin-reward { display: flex; align-items: center; gap: 12px; width: 100%; background: rgba(240, 180, 41, .16); border-radius: 14px; padding: 12px 16px; text-align: left; } .coin-reward .coin-burst { font-size: 22px; color: var(--gold); } .coin-reward div { flex: 1; } .coin-reward small { display: block; font-size: 11px; color: var(--muted); } .coin-reward b { font-size: 16px; } .coin-reward em { font-style: normal; font-size: 12px; color: var(--muted); } .answer { width: 100%; background: var(--surface); border-radius: 14px; padding: 18px; font-size: 28px; font-weight: 800; letter-spacing: .22em; } .context { width: 100%; background: var(--surface); border-radius: 14px; padding: 14px 16px; text-align: left; } .context small { font-size: 10px; letter-spacing: .07em; color: var(--muted); text-transform: uppercase; } .context p { font-size: 13px; line-height: 1.45; margin-top: 6px; } .related { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 8px; } .related > small { font-size: 12px; color: var(--muted); } #related-list { display: flex; flex-direction: column; gap: 12px; } .related a { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 14px; padding: 10px 14px; text-decoration: none; color: var(--text); } .related .thumb { width: 44px; height: 44px; border-radius: 10px; flex: none; background: linear-gradient(140deg, #f0a86a, #6f8fa8); } .related small { font-size: 11px; color: var(--muted); } .related b { display: block; font-size: 13px; line-height: 1.3; } .related .arrow { color: var(--muted); } .result-actions { width: 100%; display: flex; flex-direction: column; gap: 6px; } .next-game { font-size: 12px; color: var(--muted); } .next-game b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; } /* ===================== Панели ===================== */ .panel { align-items: stretch; text-align: left; } .panel h3 { font-size: 17px; } .panel h4 { font-size: 13px; color: var(--muted); font-weight: 600; } .panel p { font-size: 13px; line-height: 1.5; color: var(--muted); } .rules-example { display: flex; flex-direction: column; gap: 10px; } .rules-example > div { display: flex; align-items: center; gap: 10px; } .rules-example .row { display: flex; gap: 4px; } .rules-example .tile { width: 34px; height: 34px; font-size: 15px; border-radius: 8px; } .rules-example p { flex: 1; font-size: 12px; } .stats-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; } .stats-summary b { display: block; font-size: 20px; } .stats-summary small { font-size: 10px; color: var(--muted); } .stats-distribution { display: flex; flex-direction: column; gap: 5px; } .dist-row { display: flex; align-items: center; gap: 8px; font-size: 12px; } .dist-row > span { width: 10px; font-weight: 700; } .dist-bar { background: var(--correct); color: #fff; border-radius: 5px; padding: 2px 8px; font-size: 11px; font-weight: 700; text-align: right; min-width: 26px; } .dist-bar.empty { background: var(--absent); } /* Рейтинг */ .leaderboard { display: flex; flex-direction: column; gap: 4px; } .leaderboard-note { font-size: 12px; } .leaderboard { display: flex; flex-direction: column; gap: 6px; } .lb-row { display: grid; grid-template-columns: 30px 36px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--tile); border: 1px solid var(--tile-line); font-size: 14px; } /* Своя строка выделена рамкой акцента, а не только жирным: в длинном списке жирный шрифт теряется */ .lb-row.me { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--tile)); font-weight: 600; } .lb-row .rank { text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 15px; } .lb-row.top-1 .rank, .lb-row.top-2 .rank, .lb-row.top-3 .rank { font-size: 18px; } .lb-row img, .lb-row .avatar-stub { width: 36px; height: 36px; border-radius: 50%; background: var(--key); object-fit: cover; } .lb-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-row .points { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-weight: 700; } .lb-row .points i { color: var(--gold); font-style: normal; } .lb-row.gap { display: block; text-align: center; color: var(--muted); background: none; border: none; padding: 2px; } .switch { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; text-align: left; } .switch input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); } .switch-text { display: flex; flex-direction: column; gap: 2px; } .switch-text b { font-size: 14px; font-weight: 600; } .switch-text small { font-size: 12px; line-height: 1.35; color: var(--muted); } .switch input:disabled + .switch-text { opacity: .55; } /* ===================== Онбординг ===================== */ .onboarding { z-index: 50; } .onboarding-card { width: min(380px, 100%); background: var(--modal); border-radius: 24px; padding: 26px 24px 22px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; position: relative; box-shadow: var(--shadow); } .onboarding-close { position: absolute; top: 12px; right: 12px; } .onboarding-logo { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--surface); color: var(--accent); font-size: 24px; } .onboarding-card h2 { font-size: 24px; } .onboarding-card p { font-size: 14px; color: var(--muted); line-height: 1.45; } .onboarding-demo { display: flex; gap: 6px; } .onboarding-demo .tile { width: 46px; height: 46px; font-size: 20px; } .login-error { color: var(--accent); font-weight: 600; } .login-dev { display: flex; flex-direction: column; gap: 8px; width: 100%; } .login-dev label { font-size: 12px; color: var(--muted); } .login-dev input { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 11px 14px; font-size: 15px; } .legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); flex-wrap: wrap; justify-content: center; } .legend span { display: inline-flex; align-items: center; gap: 5px; } .legend .chip { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .legend .chip.correct { background: var(--correct); } .legend .chip.present { background: var(--present); } .legend .chip.absent { background: var(--absent); } /* ===================== Адаптив ===================== */ @media (max-width: 900px) { .portal { grid-template-columns: 1fr; } .portal aside { flex-direction: row; overflow-x: auto; } .portal aside hr { display: none; } .promo-row { grid-template-columns: 1fr; } .search { display: none; } } @media (max-width: 560px) { .topbar { flex-wrap: wrap; gap: 8px; padding: 12px; } .word-widget { order: 3; flex: 1; } .feed { padding: 0 12px 40px; } .game-modal { padding: 14px 14px 20px; border-radius: 22px; } .tile { width: 52px; height: 52px; font-size: 23px; } .key { flex: 1; height: 42px; font-size: 13px; } .key.delete { flex: 1.5; } } @media (max-width: 380px) { .tile { width: 44px; height: 44px; font-size: 20px; } } /* ===================== Окно входа ===================== По образцу Дзена: белая карточка, крупные кнопки во всю ширину, юридическая сноска внизу. Синий #2688eb взят из их же виджета авторизации (button_one_tap_auth.css сохранённой страницы). */ .auth-backdrop { z-index: 50; } .auth-card { position: relative; width: min(400px, 100%); background: var(--surface); border-radius: 24px; padding: 30px 24px 18px; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .28); } .auth-close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); border-radius: 50%; } .auth-close:hover { background: var(--bg); color: var(--text); } .auth-close svg { width: 20px; height: 20px; } .auth-card h2 { font-size: 22px; line-height: 1.25; font-weight: 700; margin-bottom: 10px; } .auth-safe { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 15px; margin-bottom: 22px; } .auth-shield { width: 20px; height: 20px; flex: none; } /* При отказе VK строка становится сообщением об ошибке — щит тут лишний */ .auth-safe:has(.login-error) .auth-shield { display: none; } .auth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 18px; border-radius: 12px; font-size: 16px; font-weight: 600; } .auth-btn-vk { background: #2688eb; color: #fff; } .auth-btn-vk:hover { background: #2d81e0; } .auth-vk-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #fff; color: #2688eb; font-size: 11px; font-weight: 800; letter-spacing: -.02em; } .auth-btn-plain { background: var(--bg); color: var(--text); } .auth-btn-plain:hover { background: var(--hover); } .auth-dev { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; text-align: left; } .auth-dev label { font-size: 13px; color: var(--muted); text-align: center; } .auth-dev input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); } .auth-legal { margin-top: 18px; font-size: 13px; line-height: 1.4; color: var(--muted); } .auth-legal a, .auth-help { color: #2688eb; text-decoration: none; } .auth-help { display: inline-block; margin-top: 10px; font-size: 13px; } .auth-legal a:hover, .auth-help:hover { text-decoration: underline; } /* ===================== Архив прошедших дней ===================== */ .archive-note { font-size: 13px; color: var(--muted); margin-bottom: 12px; } .archive { display: flex; flex-direction: column; gap: 10px; } .archive-empty { font-size: 14px; color: var(--muted); } .archive-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--tile); border: 1px solid var(--tile-line); text-align: left; } .archive-head { display: flex; align-items: center; gap: 10px; } .archive-head b { font-size: 18px; letter-spacing: .08em; } .archive-item small { font-size: 12px; color: var(--muted); } .archive-item p { font-size: 13px; line-height: 1.4; color: var(--muted); } .archive-won, .archive-lost, .archive-skip { margin-left: auto; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; } .archive-won { background: var(--correct); color: #fff; } .archive-lost { background: var(--absent); color: #fff; } .archive-skip { background: var(--key); color: var(--muted); font-weight: 500; } .switch-note { font-size: 12px; color: var(--muted); margin: -4px 0 4px; } /* Вход редакции по паролю — под кнопкой VK, отделён подписью */ .auth-pass { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .auth-or { font-size: 13px; color: var(--muted); } .auth-pass input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); } /* Иконки в шапке игры рисуются SVG — глифы ▥/▤ было не отличить */ .icon-btn svg { width: 19px; height: 19px; } /* Раздел «Редакция»: формы идут одна за другой, поэтому каждая отбита рамкой */ #view-editor .editor-form, #view-editor .editor-players { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--tile); border: 1px solid var(--tile-line); text-align: left; } .editor-current { font-size: 13px; line-height: 1.5; margin-bottom: 10px; } .editor-current b { letter-spacing: .08em; } .editor-form { display: flex; flex-direction: column; gap: 8px; } .editor-form label { font-size: 12px; color: var(--muted); } .editor-form input { height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); text-transform: uppercase; letter-spacing: .12em; } .editor-note { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.4; } .editor-form textarea { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font: inherit; font-size: 13px; resize: vertical; } .editor-actions { display: flex; gap: 8px; } .editor-actions .submit-word { flex: 1; } .editor-actions .ghost { background: var(--key); color: var(--text); } .editor-msg { margin: 8px 0 4px; font-size: 12px; line-height: 1.4; color: var(--correct); font-weight: 600; } .editor-msg.error { color: var(--accent); } /* Заголовки ленты под словом дня: объясняют, откуда взялось слово */ .result-news { list-style: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .result-news li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.4; text-align: left; } .result-news li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ===================== Подсказки за стеллы ===================== */ .hint-btn { width: 100%; margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--key); color: var(--text); font-size: 14px; font-weight: 600; } .hint-btn .hint-star { color: var(--gold); margin-left: 6px; } .hint-btn:hover { background: var(--tile-line); } .open-hints { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .open-hint { padding: 5px 10px; border-radius: 999px; background: var(--tile); border: 1px solid var(--tile-line); font-size: 12px; } .open-hint.text { font-style: italic; } .open-hint.letter b { letter-spacing: .06em; } .hints-balance { font-size: 14px; margin-bottom: 12px; } .hints-balance b { font-size: 17px; } .hints-balance span { color: var(--gold); } .hint-option { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 8px; padding: 12px 14px; border-radius: 14px; background: var(--tile); border: 1px solid var(--tile-line); text-align: left; } .hint-option:hover:not(:disabled) { border-color: var(--accent); } .hint-option:disabled { opacity: .5; } .hint-option span { flex: 1; display: flex; flex-direction: column; gap: 3px; } .hint-option b { font-size: 14px; } .hint-option small { font-size: 12px; color: var(--muted); line-height: 1.35; } .hint-option em { font-style: normal; font-weight: 700; color: var(--gold); white-space: nowrap; } .hints-msg { margin: 10px 0; font-size: 13px; font-weight: 600; color: var(--correct); } .hints-msg.error { color: var(--accent); } /* Настройки экономики в редакторском блоке */ .econ-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .econ-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); } .econ-grid input { height: 36px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); } .econ-switch { padding: 4px 0; } /* Окно подсказок поверх поля: игрок видит, куда встала открытая буква */ .hints-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .35); border-radius: inherit; } .hints-card { position: relative; width: min(340px, 100%); padding: 20px 18px 18px; border-radius: 20px; background: var(--surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); text-align: left; } .hints-close { position: absolute; top: 10px; right: 10px; } .hints-card h3 { font-size: 17px; margin-bottom: 6px; } /* Буква, открытая подсказкой: видно, что клетка занята не игроком */ .tile.hinted { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--tile)); } /* Раздел «Игроки» в редакторском блоке */ .editor-players { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .editor-players > label { font-size: 12px; color: var(--muted); } .players-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; } .players-empty { font-size: 12px; color: var(--muted); } .player-row { padding: 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); } .player-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; } .player-main b { font-size: 13px; } .player-main small { width: 100%; font-size: 11px; color: var(--muted); } .player-badge { padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; } .player-actions { display: flex; flex-wrap: wrap; gap: 6px; } .player-actions input { width: 64px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; } .player-actions button { padding: 0 10px; height: 30px; border-radius: 8px; background: var(--key); font-size: 12px; font-weight: 600; } .player-actions button:hover { background: var(--tile-line); } /* Текстовая подсказка над полем — карточкой, а не мелкой плашкой */ .open-hints { display: block; margin-bottom: 12px; } .open-hint.text { display: block; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 14%, var(--tile)); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--tile-line)); font-size: 15px; font-style: normal; font-weight: 600; text-align: center; } .open-hint.text::before { content: "ПОДСКАЗКА"; display: block; margin-bottom: 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--muted); } /* Второстепенное действие в редакции: тот же размер, но без заливки акцентом */ .submit-word.ghost { background: var(--key); color: var(--text); } .submit-word.ghost:hover { background: var(--tile-line); }