/* ═══════════════ Тема «тёплый мультфильм» ═══════════════ Спокойная тёмная палитра, тонкие границы, мягкие тени, оранжево-жёлтые акценты. Все цвета — в переменных ниже: поменяйте их, чтобы перекрасить сайт. */ :root { /* Акцент (по умолчанию оранжевый). Темы в «Админ-панель → Оформление» меняют только эти переменные */ --brand: #ff8a1f; --brand-rgb: 255, 138, 31; --brand-dark: #e8700a; --brand-dark-rgb: 232, 112, 10; --brand-light: #ffc247; --brand-light-rgb: 255, 194, 71; --brand-top: #ffb83a; /* верх градиента кнопок */ --brand-sun: #ffd36b; /* светлый верх логотипа */ --brand-hi: #ffb066; /* светлый акцентный текст */ --brand-tint: #ffd0a8; /* очень светлый оттенок акцента */ --brand-tint-2: #ffe2c6; --brand-shine-rgb: 255, 236, 190; /* блик на линии шапки */ --brand-deep: #b85a00; --on-brand: #2b1706; /* текст на акцентных кнопках */ /* Фон и поверхности */ --bg: #15110e; --bg-rgb: 21, 17, 14; --bg-deep: #120e0b; --bg-2: #1a1411; --surface: #1d1814; --surface-rgb: 29, 24, 20; --surface-2: #261f19; --surface-3: #2a221c; /* Текст и линии */ --text: #efe6dc; --text-hi: #f4ede6; --text-soft: #e7ddd2; --text-2: #d6ccc2; --muted: #a99b8d; --line-rgb: 255, 232, 205; --line: rgba(var(--line-rgb), 0.09); --line-strong: rgba(var(--line-rgb), 0.17); /* Шкалы для Tailwind (RGB-тройки) */ --ink-950-rgb: 21, 17, 14; --ink-900-rgb: 29, 24, 20; --ink-800-rgb: 38, 31, 25; --ink-700-rgb: 52, 43, 35; --ink-600-rgb: 74, 63, 53; --z100-rgb: 246, 239, 232; --z200-rgb: 236, 226, 216; --z300-rgb: 214, 201, 188; --z400-rgb: 170, 156, 142; --z500-rgb: 138, 125, 112; --z600-rgb: 98, 88, 80; --z700-rgb: 74, 66, 59; --ink-950: var(--bg); --ink-900: var(--surface); --ink-800: var(--surface-2); --ink-700: rgb(var(--ink-700-rgb)); --ink-600: rgb(var(--ink-600-rgb)); --grad: linear-gradient(180deg, var(--brand-top) 0%, var(--brand) 100%); --shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.7); } html { scroll-behavior: smooth; } body { font-family: 'Nunito', system-ui, sans-serif; line-height: 1.6; color: var(--text); background-color: var(--bg); background-image: radial-gradient(1000px 480px at 78% -10%, rgba(var(--brand-rgb), 0.13), transparent 70%), radial-gradient(700px 400px at 0% 20%, rgba(255, 96, 64, 0.05), transparent 70%); background-repeat: no-repeat; } body.overlay { background: transparent !important; } :focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; border-radius: 8px; } ::selection { background: var(--brand); color: var(--on-brand); } * { scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent; } /* Шапка: тонкая линия-градиент вместо толстой рамки */ header.site-header { position: relative; } /* Оранжевая полоска под вкладками: та же линия (оранжевый → золотой, прозрачные края), по ней пробегает светлый блик, а сама линия мягко «дышит» свечением */ header.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; opacity: 0.85; background: linear-gradient(90deg, transparent, rgba(var(--brand-shine-rgb), 0.95) 50%, transparent) no-repeat, linear-gradient(90deg, transparent, rgba(var(--brand-rgb), 0.8) 25%, rgba(var(--brand-light-rgb), 0.8) 60%, transparent); background-size: 22% 100%, 100% 100%; background-position: -30% 0, 0 0; animation: header-shine 4.5s ease-in-out infinite, header-glow 3s ease-in-out infinite; } @keyframes header-shine { 0% { background-position: -30% 0, 0 0; } 70%, 100% { background-position: 130% 0, 0 0; } } @keyframes header-glow { 0%, 100% { opacity: 0.75; filter: none; } 50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(var(--brand-rgb), 0.85)); } } /* «Уменьшить движение» в системе: без бегущего блика, остаётся только мягкое свечение */ @media (prefers-reduced-motion: reduce) { header.site-header::after { animation: header-glow 3s ease-in-out infinite; } } /* Заголовки: чистый белый, оранжевая «черта» снизу */ .section-title { display: inline-block; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 2rem; line-height: 1.15; letter-spacing: -0.01em; color: #fff; } .section-title::after { content: ''; display: block; width: 44px; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--grad); } .sticker-text, .brand-name { font-family: 'Nunito', sans-serif; font-weight: 900; background: linear-gradient(180deg, var(--brand-sun), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)); } .brand-name { font-size: 1.45rem; line-height: 1; letter-spacing: 0.01em; } /* Карточки */ .card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0)) , var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); } .card-hover { transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s; } .card-hover:hover { border-color: rgba(var(--brand-rgb), 0.55); transform: translateY(-2px); box-shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.75); } /* Кнопки */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1.05rem; border-radius: 12px; font-weight: 800; font-size: 0.92rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 0.08s, filter 0.15s, border-color 0.15s, background 0.15s; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--grad); color: var(--on-brand); box-shadow: 0 8px 18px -8px rgba(var(--brand-rgb), 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .btn-primary:hover:not(:disabled) { filter: brightness(1.07); } .btn-ghost { background: rgba(255, 255, 255, 0.045); border-color: var(--line-strong); color: #f3e9de; } .btn-ghost:hover:not(:disabled) { border-color: rgba(var(--brand-rgb), 0.7); background: rgba(var(--brand-rgb), 0.08); } .btn-danger { background: rgba(255, 90, 80, 0.1); border-color: rgba(255, 90, 80, 0.38); color: #ff9d94; } .btn-danger:hover:not(:disabled) { background: rgba(255, 90, 80, 0.18); } .btn-ok { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.4); color: #86efac; } .btn-ok:hover:not(:disabled) { background: rgba(74, 222, 128, 0.2); } .btn-sm { padding: 0.28rem 0.7rem; font-size: 0.8rem; border-radius: 10px; } /* Поля ввода */ .input { width: 100%; background: #110d0a; border: 1px solid var(--line-strong); border-radius: 12px; padding: 0.55rem 0.8rem; color: var(--text-hi); font-family: inherit; font-weight: 600; font-size: 0.95rem; transition: border-color 0.15s, box-shadow 0.15s; } .input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.2); } .input::placeholder { color: #85786b; font-weight: 500; } textarea.input { resize: vertical; min-height: 5rem; } label.field { display: block; font-size: 0.85rem; font-weight: 700; color: var(--muted); margin-bottom: 0.3rem; } select.input { cursor: pointer; } /* Чипы */ .chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.12rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong); color: var(--text-soft); } .chip-accent { background: rgba(var(--brand-rgb), 0.14); border-color: rgba(var(--brand-rgb), 0.5); color: var(--brand-light); } .chip-green { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.4); color: #86efac; } .chip-red { background: rgba(255, 99, 99, 0.11); border-color: rgba(255, 99, 99, 0.4); color: #ffa39b; } .chip-yellow { background: rgba(255, 200, 61, 0.1); border-color: rgba(255, 200, 61, 0.4); color: #ffd966; } button.chip { cursor: pointer; transition: border-color 0.15s, background 0.15s; } button.chip:hover { border-color: rgba(var(--brand-light-rgb), 0.8); } button.chip.active { background: var(--grad); border-color: transparent; color: var(--on-brand); box-shadow: 0 6px 14px -6px rgba(var(--brand-rgb), 0.7); } /* Вкладки */ #tabs { scrollbar-width: none; } .tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.9rem; border-radius: 12px; font-weight: 800; font-size: 0.92rem; color: var(--muted); white-space: nowrap; border: 1px solid transparent; transition: background 0.15s, color 0.15s; } .tab:hover { color: #fff; background: rgba(255, 255, 255, 0.05); } .tab.active { color: var(--brand-light); background: rgba(var(--brand-rgb), 0.14); border-color: rgba(var(--brand-rgb), 0.38); } /* Виджет стрима */ .stream-widget { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 0.85rem; font-weight: 800; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong); color: var(--muted); min-width: 0; } .stream-widget span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stream-widget .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #6b5a4b; flex: none; } .stream-widget.live { color: #fff; border-color: rgba(255, 77, 77, 0.7); background: rgba(255, 77, 77, 0.14); } .stream-widget.live .dot { background: #ff4d4d; animation: pulse-dot 1.6s infinite; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.65); } 70% { box-shadow: 0 0 0 9px rgba(255, 77, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); } } .logo-sticker { transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); transform-origin: 50% 80%; } a:hover > .logo-sticker { transform: rotate(-6deg) scale(1.06); } /* Загрузка фото */ .dropzone { border: 2px dashed var(--line-strong); border-radius: 18px; padding: 2rem 1rem; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: rgba(255, 255, 255, 0.02); } .dropzone:hover, .dropzone.dz-active { border-color: var(--brand); background: rgba(var(--brand-rgb), 0.07); } .stage-card { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 16px; padding: 0.7rem; } .stage-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; border: 1px solid var(--line-strong); cursor: pointer; font-weight: 800; line-height: 1; } .stage-x:hover { background: rgba(255, 90, 80, 0.85); } /* Спойлер и статусы фото */ .sp-blur { filter: blur(22px) saturate(0.8); transform: scale(1.12); } .sp-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #fff; font-weight: 800; font-size: 0.85rem; white-space: nowrap; pointer-events: none; } /* Кнопка «показать спойлер»: центрируем без transform — иначе эффект нажатия у .btn (translateY) сбивал центровку, кнопка прыгала вправо-вниз и клик не засчитывался */ .sp-reveal { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; max-width: calc(100% - 2rem); white-space: normal; z-index: 2; background: rgba(20, 14, 10, 0.88); } .sp-reveal:active:not(:disabled) { transform: scale(0.97); } .sp-wrap { overflow: hidden; } .sp-wrap .sp-blur { cursor: pointer; } .photo-badge { position: absolute; left: 8px; top: 8px; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; backdrop-filter: blur(4px); } .badge-wait { background: rgba(255, 200, 61, 0.2); color: #ffd966; border: 1px solid rgba(255, 200, 61, 0.5); } .badge-no { background: rgba(255, 99, 99, 0.2); color: #ffa39b; border: 1px solid rgba(255, 99, 99, 0.5); } /* Модальное окно */ .modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(8, 5, 3, 0.78); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; } .modal-panel { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 22px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85); width: 100%; max-width: 32rem; max-height: calc(100vh - 2rem); overflow-y: auto; animation: pop 0.22s cubic-bezier(0.3, 1.4, 0.5, 1); } .modal-wide { max-width: 64rem; } @keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } } /* Тосты */ .toast { pointer-events: auto; padding: 0.65rem 1rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-hi); font-weight: 700; font-size: 0.9rem; max-width: 24rem; box-shadow: var(--shadow); animation: pop 0.22s cubic-bezier(0.3, 1.4, 0.5, 1); } .toast.error { border-color: rgba(255, 107, 94, 0.8); } .toast.success { border-color: rgba(74, 222, 128, 0.7); } /* Всплывающие «X вступил(а) в розыгрыш» */ .pop-stack { position: fixed; top: 92px; right: 16px; z-index: 55; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; max-width: calc(100vw - 32px); } .join-pop { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.9rem 0.5rem 0.7rem; border-radius: 14px; background: rgba(38, 31, 25, 0.96); border: 1px solid rgba(var(--brand-rgb), 0.55); box-shadow: var(--shadow); font-weight: 700; color: #fff; animation: slide-in 0.3s cubic-bezier(0.3, 1.4, 0.5, 1); } .join-pop b { color: var(--brand-light); } .join-pop .jp-ava { flex: none; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-weight: 900; font-size: 0.85rem; color: #fff; border: 2px solid rgba(255, 255, 255, 0.25); } .join-pop .jp-n { margin-left: 0.2rem; padding: 0 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 0.75rem; color: var(--muted); } .join-pop.out { opacity: 0; transform: translateX(30px); transition: all 0.35s; } @keyframes slide-in { from { transform: translateX(40px) scale(0.95); opacity: 0; } to { transform: none; opacity: 1; } } /* Окно победителя с таймером ответа */ .winner-pop { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: 58; width: min(440px, calc(100vw - 24px)); padding: 1.1rem 1.2rem 1.2rem; border-radius: 22px; text-align: center; background: linear-gradient(180deg, rgba(var(--brand-light-rgb), 0.14), rgba(var(--brand-rgb), 0.05)), var(--surface); border: 1px solid rgba(var(--brand-rgb), 0.7); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9), 0 0 60px -10px rgba(var(--brand-rgb), 0.45); animation: pop 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); } .winner-pop.wp-claimed { border-color: rgba(74, 222, 128, 0.8); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9), 0 0 60px -10px rgba(74, 222, 128, 0.4); } .winner-pop.wp-expired { border-color: rgba(255, 99, 99, 0.8); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9), 0 0 60px -10px rgba(255, 99, 99, 0.35); } .winner-pop .wp-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; } .winner-pop .wp-x:hover { color: #fff; } .winner-pop .wp-title { font-size: 0.85rem; font-weight: 800; color: var(--muted); } .winner-pop .wp-name { font-weight: 900; font-size: 2.3rem; line-height: 1.15; margin: 0.25rem 0 0.4rem; color: var(--brand-light); word-break: break-word; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.4)); } .winner-pop .wp-time { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 1.6rem; color: #fff; } .winner-pop .wp-bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin: 0.6rem 0 0.8rem; } .winner-pop .wp-bar i { display: block; height: 100%; background: var(--grad); border-radius: 8px; transition: width 0.3s linear; } .winner-pop.wp-claimed .wp-bar i { background: linear-gradient(90deg, #4ade80, #22c55e); } .winner-pop.wp-expired .wp-bar i { background: #ff6b5e; } /* ───── Рулетка ───── */ .roulette-viewport { position: relative; height: 160px; overflow: hidden; border-radius: 16px; background: var(--bg-deep); border: 1px solid rgba(var(--brand-rgb), 0.45); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6); } .roulette-viewport::before, .roulette-viewport::after { content: ''; position: absolute; top: 0; bottom: 0; width: 18%; z-index: 2; pointer-events: none; } .roulette-viewport::before { left: 0; background: linear-gradient(90deg, var(--bg-deep), transparent); } .roulette-viewport::after { right: 0; background: linear-gradient(-90deg, var(--bg-deep), transparent); } .roulette-marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--brand-light); z-index: 3; box-shadow: 0 0 20px 3px rgba(var(--brand-light-rgb), 0.6); transition: opacity 0.3s; } .roulette-marker::before { content: ''; position: absolute; top: -1px; left: -9px; border: 10px solid transparent; border-top-color: var(--brand-light); } .roulette-viewport.idle .roulette-marker { opacity: 0; } .roulette-strip { position: absolute; top: 0; left: 0; height: 100%; display: flex; will-change: transform; } .rcard { box-sizing: border-box; flex: none; width: 160px; height: 100%; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-right: 1px solid rgba(var(--line-rgb), 0.06); } .rcard .ava { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.5rem; color: #fff; border: 2px solid rgba(255, 255, 255, 0.18); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); } .rcard .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 0.92rem; } .rcard.rwin { background: rgba(var(--brand-light-rgb), 0.16); box-shadow: inset 0 0 0 2px var(--brand-light); animation: win-bounce 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); } @keyframes win-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } .roulette-idle { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; color: #b09f8e; font-weight: 800; font-size: 1.05rem; text-align: center; padding: 0 1rem; letter-spacing: 0.01em; } .winner-banner { margin-top: 1rem; text-align: center; padding: 1rem; border-radius: 16px; background: linear-gradient(180deg, rgba(var(--brand-light-rgb), 0.16), rgba(var(--brand-rgb), 0.06)); border: 1px solid rgba(var(--brand-rgb), 0.55); animation: pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); } .winner-banner .who { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 2.1rem; line-height: 1.2; color: var(--brand-light); word-break: break-word; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.4)); } .confetti { position: fixed; top: -20px; z-index: 80; font-size: 1.5rem; pointer-events: none; animation: fall linear forwards; } @keyframes fall { to { transform: translateY(110vh) rotate(540deg); opacity: 0.9; } } /* Звёзды, голосование */ .stars { display: inline-flex; gap: 2px; } .star { font-size: 1.4rem; line-height: 1; color: var(--ink-600); background: none; border: 0; cursor: pointer; padding: 0 1px; transition: transform 0.12s cubic-bezier(0.3, 1.8, 0.5, 1), color 0.1s; } .star.on { color: var(--brand-light); } .star:hover { transform: scale(1.25) rotate(-8deg); } .vote { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 54px; padding: 0.4rem 0.3rem; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); color: var(--text-soft); cursor: pointer; font-weight: 900; transition: transform 0.08s, border-color 0.15s; } .vote:hover { border-color: var(--brand-light); } .vote:active { transform: translateY(1px); } .vote.voted { background: var(--grad); border-color: transparent; color: var(--on-brand); } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ───── Календарь посещений ───── */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 30rem; margin-left: auto; margin-right: auto; } .cal-dow { text-align: center; font-size: 0.75rem; font-weight: 800; color: var(--muted); } .cal-day { position: relative; aspect-ratio: 1; min-height: 2rem; border-radius: 12px; display: grid; place-items: center; font-family: inherit; padding: 0; font-weight: 800; font-size: 0.85rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: #c9b5a1; cursor: pointer; transition: transform 0.1s; } .cal-future { opacity: 0.35; } .cal-miss { border-style: dashed; border-color: rgba(255, 99, 99, 0.5); color: #ff9b8f; background: rgba(255, 99, 99, 0.06); } .cal-on { border-color: transparent; color: var(--on-brand); box-shadow: 0 4px 10px -4px rgba(var(--brand-rgb), 0.6); } .cal-l1 { background: #ffe08a; } .cal-l2 { background: var(--brand-light); } .cal-l3 { background: #ff9f2e; } .cal-l4 { background: linear-gradient(180deg, var(--brand-top), #ff7a00); } .cal-today { outline: 2px solid var(--brand-light); outline-offset: 2px; } .cal-key { display: inline-block; width: 14px; height: 14px; border-radius: 5px; } .cal-key.cal-miss { border: 1px dashed rgba(255, 99, 99, 0.7); } /* ───── Рамки аватарок ───── */ .avf { position: relative; display: inline-grid; place-items: center; border-radius: 50%; padding: 3px; flex: none; vertical-align: middle; } .avf > * { position: relative; z-index: 1; border-radius: 50%; display: block; } .frame-none { padding: 0; } .frame-orange { background: var(--grad); } .frame-neon { background: linear-gradient(135deg, #b06cff, #4ad7ff); box-shadow: 0 0 14px rgba(120, 160, 255, 0.65); } .frame-gold { background: linear-gradient(135deg, #fff1a8, #e8b923 50%, #a87400); box-shadow: 0 0 14px rgba(255, 200, 60, 0.55); } .frame-fire { background: linear-gradient(180deg, #ffd36b, #ff6a00 55%, #d62300); animation: flicker 1.6s ease-in-out infinite; } @keyframes flicker { 0%, 100% { box-shadow: 0 0 10px rgba(255, 110, 0, 0.6); } 50% { box-shadow: 0 0 20px rgba(255, 70, 0, 0.9); } } .frame-diamond { background: linear-gradient(135deg, #f1fdff, #7fe3f0 50%, #e9fbff); box-shadow: 0 0 16px rgba(127, 227, 240, 0.65); } .frame-rainbow { background: none; overflow: visible; } .frame-rainbow::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#ff4d4d, #ffb347, #ffe14d, #6bff6b, #4dd6ff, #7a6bff, #ff6bd6, #ff4d4d); animation: spin 4s linear infinite; z-index: 0; } @keyframes spin { to { transform: rotate(360deg); } } .frame-crown { background: linear-gradient(135deg, #fff1a8, #e8b923 50%, #a87400); box-shadow: 0 0 14px rgba(255, 200, 60, 0.6); } .frame-crown::after { content: '👑'; position: absolute; top: calc(var(--sz, 40px) * -0.32); left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: calc(var(--sz, 40px) * 0.42); z-index: 2; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); } /* ───── Баннеры профиля ───── */ .pf-banner { height: 150px; border-radius: 18px 18px 0 0; background-size: cover; position: relative; overflow: hidden; } .banner-sunset { background-image: linear-gradient(120deg, #ff9a3d, #ff5e62 55%, #7a3cff); } .banner-ocean { background-image: linear-gradient(120deg, #0ea5e9, #2563eb 60%, #312e81); } .banner-forest { background-image: linear-gradient(120deg, #22c55e, #0f766e 60%, #14532d); } .banner-night { background-color: #0f172a; background-image: radial-gradient(circle at 15% 30%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px), radial-gradient(circle at 62% 22%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px), radial-gradient(circle at 80% 65%, rgba(255, 255, 255, 0.8) 0 1.5px, transparent 2.5px), radial-gradient(circle at 35% 75%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px), linear-gradient(120deg, #1e1b4b, #0f172a); } .banner-dots { background-color: #3b2a1d; background-image: radial-gradient(rgba(var(--brand-rgb), 0.55) 2px, transparent 2.5px); background-size: 18px 18px; } .banner-ember { background-image: linear-gradient(180deg, #2a0f08, #7a1d05 60%, #ff6a00); } .banner-aurora { background-image: linear-gradient(120deg, #0f172a, #14b8a6 40%, #8b5cf6 70%, #0f172a); } .banner-royal { background-image: linear-gradient(120deg, #3b0764, #7e22ce 55%, #facc15); } .swatch { height: 46px; border-radius: 12px; border: 2px solid transparent; } /* Выбор в окне кастомизации */ .pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0.55rem 0.4rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); cursor: pointer; text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--text-soft); transition: border-color 0.15s, background 0.15s; } .pick:hover:not(:disabled) { border-color: rgba(var(--brand-rgb), 0.6); } .pick.sel { border-color: var(--brand); background: rgba(var(--brand-rgb), 0.12); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25); } .pick:disabled { opacity: 0.5; cursor: not-allowed; } .pick .need { font-size: 0.68rem; color: var(--muted); font-weight: 600; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ───── Оверлей для OBS (overlay.html) ───── */ .overlay .pop-stack { right: auto; left: 24px; top: 24px; align-items: flex-start; } .overlay .join-pop { font-size: 1.15rem; padding: 0.7rem 1.1rem 0.7rem 0.9rem; } .overlay .winner-pop { top: 36px; width: min(560px, 94vw); } .overlay .winner-pop .wp-name { font-size: 3rem; } .ov-roulette { position: fixed; left: 50%; bottom: 48px; transform: translateX(-50%); width: min(1100px, 92vw); opacity: 0; pointer-events: none; transition: opacity 0.4s; } .ov-roulette.show { opacity: 1; } .ov-roulette .roulette-viewport { background: rgba(16, 12, 9, 0.92); } /* ───── Звания у ника (src/badges.js) ───── */ .role-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.65rem; border-radius: 999px; font-weight: 900; font-size: 0.78rem; letter-spacing: 0.02em; line-height: 1.3; white-space: nowrap; vertical-align: middle; } .role-badge.rb-sm { padding: 0.08rem 0.5rem; font-size: 0.68rem; margin-left: 0.35rem; } /* Стример — красный с красным свечением */ .rb-streamer { color: #fff; background: linear-gradient(135deg, #ff3b3b, #c40018); border: 1px solid #ff8080; text-shadow: 0 0 6px rgba(255, 255, 255, 0.55); box-shadow: 0 0 10px rgba(255, 40, 40, 0.75), 0 0 22px rgba(255, 0, 30, 0.4); animation: rb-pulse-red 2.4s ease-in-out infinite; } /* Владелец — чёрный; на тёмном фоне свечение светлое, иначе его не видно */ .rb-owner { color: #fff; background: linear-gradient(135deg, #1b1b1b, #000); border: 1px solid rgba(255, 255, 255, 0.55); text-shadow: 0 0 6px rgba(255, 255, 255, 0.8); box-shadow: 0 0 8px rgba(255, 255, 255, 0.35), 0 0 18px rgba(0, 0, 0, 0.9), inset 0 0 6px rgba(255, 255, 255, 0.12); animation: rb-pulse-white 2.8s ease-in-out infinite; } /* Super Admin — бело-голубой переливающийся градиент */ .rb-superadmin { color: #06283d; background: linear-gradient(90deg, #ffffff, #bae6fd, #38bdf8, #bae6fd, #ffffff); background-size: 250% 100%; border: 1px solid #e0f2fe; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: 0 0 10px rgba(125, 211, 252, 0.85), 0 0 24px rgba(56, 189, 248, 0.45); animation: rb-shine 3s linear infinite; } /* Дополнительные цвета для своих ролей */ .rb-mod { color: #fff; background: linear-gradient(135deg, #22c55e, #15803d); border: 1px solid #86efac; box-shadow: 0 0 10px rgba(34, 197, 94, 0.55); } .rb-vip { color: #fff; background: linear-gradient(135deg, #a855f7, #6d28d9); border: 1px solid #d8b4fe; box-shadow: 0 0 10px rgba(168, 85, 247, 0.6); } .rb-gold { color: #3b2500; background: linear-gradient(135deg, #fde68a, #f59e0b); border: 1px solid #fef3c7; box-shadow: 0 0 10px rgba(245, 158, 11, 0.6); } .rb-plain { color: #f4f4f5; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); } @keyframes rb-pulse-red { 50% { box-shadow: 0 0 14px rgba(255, 40, 40, 0.95), 0 0 30px rgba(255, 0, 30, 0.55); } } @keyframes rb-pulse-white { 50% { box-shadow: 0 0 12px rgba(255, 255, 255, 0.55), 0 0 24px rgba(0, 0, 0, 0.9), inset 0 0 6px rgba(255, 255, 255, 0.18); } } @keyframes rb-shine { to { background-position: -250% 0; } } @media (prefers-reduced-motion: reduce) { .role-badge { animation: none !important; } } /* Чат победителя в окне розыгрыша */ .wp-chat { margin: 0.2rem 0 0.9rem; max-height: 168px; overflow-y: auto; text-align: left; border-radius: 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.55rem 0.75rem; } .wp-chat-h { font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.3rem; } .wp-msg { font-size: 0.92rem; color: var(--text-hi); line-height: 1.35; padding: 0.15rem 0; word-break: break-word; animation: pop 0.2s ease-out; } .wp-msg b { color: var(--brand-light); margin-right: 0.25rem; } .wp-msg-t { color: var(--muted); font-size: 0.72rem; margin-right: 0.4rem; font-variant-numeric: tabular-nums; } .wp-msg-empty { color: var(--muted); font-style: italic; } /* Иконка «копировать» рядом с ником */ .copy-btn { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--muted); background: transparent; border: 0; cursor: pointer; transition: color 0.15s, background 0.15s, transform 0.1s; } .copy-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .copy-btn:active { transform: scale(0.9); } .copy-btn.done { color: #4ade80; } /* Подпись внизу сайта */ .site-footer { font-size: 0.82rem; font-weight: 600; color: #5d5650; letter-spacing: 0.01em; } /* Календарь: расписание с Twitch («как в телефоне») */ .cal-day:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.25); } .cal-day.cal-future { opacity: 0.45; } .cal-day.cal-planned { opacity: 1; border-color: rgba(125, 211, 252, 0.45); background: rgba(56, 189, 248, 0.08); color: #e0f2fe; } .cal-day.cal-vac { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 12px); } .cal-day.cal-sel { background: #f8fafc; color: #111; border-color: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); opacity: 1; } .cal-dots { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; } .cal-dots b { width: 6px; height: 6px; border-radius: 50%; background-color: #38bdf8; } .cal-sel .cal-dots b { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); } .cal-key-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #38bdf8; } .cal-agenda { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .cal-agenda-h { font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.5rem; } .cal-ev { display: flex; gap: 0.8rem; align-items: stretch; padding: 0.55rem 0.7rem; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border-left: 4px solid #38bdf8; margin-bottom: 0.4rem; } .cal-ev-past { border-left-color: var(--brand); } .cal-ev-off { border-left-color: #71717a; opacity: 0.7; } .cal-ev-off .cal-ev-title { text-decoration: line-through; } .cal-ev-time { flex: none; width: 3.1rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; font-size: 0.9rem; line-height: 1.25; } .cal-ev-time span { color: var(--muted); font-weight: 700; font-size: 0.78rem; } .cal-ev-title { font-weight: 800; color: var(--text-hi); } .cal-ev-sub { font-size: 0.8rem; color: var(--muted); } .cal-ev-empty { font-size: 0.9rem; color: var(--muted); padding: 0.3rem 0; } .cal-next { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem; border-radius: 14px; background: rgba(56, 189, 248, 0.06); border: 1px solid rgba(56, 189, 248, 0.25); cursor: pointer; color: inherit; font-family: inherit; text-align: left; } .cal-next:hover { border-color: rgba(56, 189, 248, 0.6); } .cal-next-date { flex: none; width: 2.6rem; display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 0.3rem 0; border-radius: 10px; background: #f8fafc; color: #111; } .cal-next-date b { font-size: 1.15rem; font-weight: 900; } .cal-next-date span { font-size: 0.65rem; font-weight: 800; color: #dc2626; text-transform: uppercase; margin-top: 2px; } /* Бейджи стажа */ .tenure-badge { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.16rem 0.65rem 0.16rem 0.5rem; border-radius: 999px; font-weight: 900; font-size: 0.78rem; cursor: help; white-space: nowrap; border: 1px solid transparent; } .tenure-badge::before { content: '⏳'; font-size: 0.8em; } .t-plain { color: #d4d4d8; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); } .t-plain::before { content: '🌱'; } .t-bronze { color: #ffe1c2; background: linear-gradient(135deg, #8a4b20, #5a2f12); border-color: #c4773d; } .t-bronze::before { content: '🥉'; } .t-silver { color: #1f2937; background: linear-gradient(135deg, #f1f5f9, #94a3b8); border-color: #e2e8f0; } .t-silver::before { content: '🥈'; } .t-gold { color: #3b2500; background: linear-gradient(135deg, #fde68a, #f59e0b); border-color: #fef3c7; box-shadow: 0 0 10px rgba(245, 158, 11, 0.45); } .t-gold::before { content: '🥇'; } .t-emerald { color: #ecfdf5; background: linear-gradient(135deg, #10b981, #047857); border-color: #6ee7b7; box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); } .t-emerald::before { content: '🏆'; } .t-amethyst { color: #faf5ff; background: linear-gradient(135deg, #a855f7, #6b21a8); border-color: #d8b4fe; box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); } .t-amethyst::before { content: '🔮'; } .t-diamond { color: #082f49; background: linear-gradient(120deg, #e0f2fe, #7dd3fc, #e0f2fe); background-size: 200% 100%; border-color: #f0f9ff; box-shadow: 0 0 12px rgba(125, 211, 252, 0.7); animation: rb-shine 4s linear infinite; } .t-diamond::before { content: '💎'; } .t-ruby { color: #fff1f2; background: linear-gradient(135deg, #f43f5e, #9f1239); border-color: #fda4af; box-shadow: 0 0 10px rgba(244, 63, 94, 0.5); } .t-ruby::before { content: '❤️‍🔥'; } /* Всплывающая подсказка [data-tip] — отдельный слой поверх страницы, её не обрезают карточки */ .tip-pop { white-space: pre-line; position: fixed; z-index: 90; max-width: 280px; padding: 0.5rem 0.7rem; border-radius: 10px; background: var(--bg-deep); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--text-hi); font-size: 0.8rem; font-weight: 700; line-height: 1.35; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 0.12s, transform 0.12s; } .tip-pop.show { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .t-diamond { animation: none; } } /* ───── Уровни ───── */ .lvl-chip { flex: none; display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.35rem; border-radius: 999px; font-weight: 900; font-size: 0.75rem; color: #fff; border: 2px solid rgba(255, 255, 255, 0.25); font-variant-numeric: tabular-nums; } .lvl-chip.lvl-big { min-width: 2.1rem; height: 2.1rem; font-size: 0.95rem; } .lv-1 { background: #52525b; } .lv-2 { background: linear-gradient(135deg, #22c55e, #15803d); } .lv-3 { background: linear-gradient(135deg, #38bdf8, #1d4ed8); } .lv-4 { background: linear-gradient(135deg, #a855f7, #6d28d9); } .lv-5 { background: linear-gradient(135deg, #fb923c, #dc2626); box-shadow: 0 0 10px rgba(251, 146, 60, 0.55); } .lv-6 { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #3b2500; border-color: #fff7d6; box-shadow: 0 0 12px rgba(245, 158, 11, 0.7); } .lvl-card { display: flex; align-items: center; gap: 1.1rem; padding: 1rem; border-radius: 18px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); } .lvl-ring { --p: 0; flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--brand) calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0); } .lvl-ring > span { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: var(--surface); font-weight: 900; font-size: 1.7rem; color: #fff; line-height: 1; } .lvl-ring small { font-size: 0.62rem; color: var(--muted); font-weight: 800; text-transform: uppercase; } .lvl-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 0.45rem; } .lvl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-light)); transition: width 0.6s; } .mult-chip { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 999px; font-weight: 900; font-size: 0.8rem; background: rgba(255, 255, 255, 0.07); color: #d4d4d8; border: 1px solid rgba(255, 255, 255, 0.15); cursor: help; } .mult-chip.mult-on { background: rgba(56, 189, 248, 0.15); color: #bae6fd; border-color: rgba(56, 189, 248, 0.5); } .mult-chip.mult-max { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #3b2500; border-color: #fff7d6; box-shadow: 0 0 10px rgba(245, 158, 11, 0.6); } @media (max-width: 480px) { .lvl-card { flex-direction: column; align-items: stretch; text-align: left; } .lvl-ring { align-self: center; } } .cal-host-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); } .cal-dots b { background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); } /* ───── Профиль: вкладки, посты ───── */ .pf-tab { padding: 0.5rem 1rem; border-radius: 12px; font-weight: 900; color: var(--muted); background: transparent; border: 0; cursor: pointer; font-family: inherit; } .pf-tab:hover { color: #fff; } .pf-tab.active { color: #1c1007; background: linear-gradient(135deg, var(--brand-light), var(--brand)); } .pf-posts-h { font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.5rem; } .pf-photo { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg-deep); border: 1px solid rgba(255, 255, 255, 0.08); } .pf-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; } .pf-photo:hover img { transform: scale(1.05); } .pf-photo.spoiler img { filter: blur(14px); } .pf-photo-st { position: absolute; top: 6px; left: 6px; font-size: 0.65rem; } .pf-photo-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.9rem 0.4rem 0.3rem; font-size: 0.7rem; font-weight: 800; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); opacity: 0; transition: opacity 0.15s; } .pf-photo:hover .pf-photo-meta { opacity: 1; } .pf-post { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); color: inherit; } a.pf-post:hover, .pf-post:hover { border-color: rgba(var(--brand-rgb), 0.5); } .pf-recent { display: flex; width: 100%; align-items: center; gap: 0.75rem; font-size: 0.875rem; padding: 0.45rem 0.55rem; border-radius: 12px; background: transparent; border: 1px solid transparent; color: inherit; font-family: inherit; text-align: left; cursor: pointer; } .pf-recent:hover { background: rgba(255, 255, 255, 0.04); } .pf-recent.sel { border-color: rgba(var(--brand-rgb), 0.6); background: rgba(var(--brand-rgb), 0.08); } /* Пост, к которому перешли по ссылке */ .post-focus { animation: post-focus 2.6s ease-out; } @keyframes post-focus { 0%, 40% { box-shadow: 0 0 0 3px var(--brand-light), 0 0 30px rgba(var(--brand-rgb), 0.5); } 100% { box-shadow: none; } } /* ───── Админ-панель: сайдбар во всю высоту у левого края, сворачивается до иконок ───── */ :root { --sbw: 264px; } body.adm-mini { --sbw: 76px; } .adm-layout { display: block; } .adm-side { box-sizing: border-box; position: fixed; z-index: 45; left: 0; top: 0; bottom: 0; width: var(--sbw); display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.6rem; background: var(--bg-deep); border-right: 1px solid var(--line); transition: width 0.18s ease; overflow: hidden; } body.adm-mode { padding-left: var(--sbw); transition: padding-left 0.18s ease; } .adm-side-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.1rem 0.6rem; border-bottom: 1px solid var(--line); } .adm-side-logo { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 1; color: #fff; } .adm-side-logo img { flex: none; width: 2.4rem; height: 2.4rem; object-fit: contain; } .adm-side-logo b { display: block; font-weight: 900; font-size: 0.98rem; white-space: nowrap; } .adm-side-logo small { display: block; font-size: 0.72rem; color: var(--muted); white-space: nowrap; } .adm-side-toggle { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; } .adm-side-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } .adm-side nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; overflow-y: auto; } .adm-nav-btn { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.55rem 0.6rem; border-radius: 12px; background: transparent; border: 1px solid transparent; color: var(--text-soft); text-align: left; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s; white-space: nowrap; } .adm-nav-btn:hover { background: rgba(255, 255, 255, 0.05); } .adm-nav-btn.active { background: rgba(var(--brand-rgb), 0.12); border-color: rgba(var(--brand-rgb), 0.55); } .adm-nav-btn b { display: block; font-weight: 900; font-size: 0.93rem; } .adm-nav-btn small { display: block; font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .adm-nav-ic { flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, 0.06); font-size: 1.05rem; } .adm-nav-btn.active .adm-nav-ic { background: linear-gradient(135deg, var(--brand-light), var(--brand)); } .adm-side-back { margin-top: auto; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; padding-top: 0.7rem; color: var(--muted); } /* Свёрнутый: только иконки, подписи — всплывающими подсказками */ body.adm-mini .adm-side-head { flex-direction: column; } body.adm-mini .adm-side-logo span, body.adm-mini .adm-nav-btn .min-w-0 { display: none; } body.adm-mini .adm-nav-btn { justify-content: center; padding: 0.45rem; } body.adm-mini .adm-side-logo { justify-content: center; } @media (max-width: 900px) { body.adm-mode, body.adm-mode.adm-mini { padding-left: 0; } .adm-side { position: static; width: auto; flex-direction: row; align-items: center; padding: 0.35rem; border: 1px solid var(--line); border-radius: 18px; margin-bottom: 1rem; } .adm-side-head, .adm-side-back { display: none; } .adm-side nav { flex-direction: row; overflow-x: auto; } .adm-nav-btn { width: auto; flex: none; } .adm-nav-btn small { display: none; } body.adm-mini .adm-nav-btn .min-w-0 { display: block; } } /* ───── Модерация: дашборд ───── */ .mod-tile { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); } .mod-tile-ic { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 14px; background: rgba(var(--brand-rgb), 0.12); font-size: 1.3rem; } .mod-search { position: relative; } .mod-search > span { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); opacity: 0.6; pointer-events: none; } .mod-search .input { padding-left: 2.3rem; } .mod-row { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; } .mod-row.open { border-color: rgba(var(--brand-rgb), 0.5); } .mod-row-main { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0.75rem; } .mod-thumb { flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); border: 0; cursor: pointer; font-size: 1.4rem; padding: 0; } .mod-thumb img { width: 100%; height: 100%; object-fit: cover; } .mod-pv { padding: 0.9rem 1rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.2); } .mod-pv-img { max-height: 420px; max-width: 100%; border-radius: 12px; } @media (max-width: 560px) { .mod-row-main { flex-wrap: wrap; } } .pf-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; } /* Подсказки ников под полем ввода */ .sugg-wrap { position: relative; } .sugg { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); min-width: 300px; max-height: 320px; overflow-y: auto; padding: 0.3rem; border-radius: 14px; background: var(--bg-deep); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); } .sugg-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.4rem 0.5rem; border-radius: 10px; border: 0; background: transparent; color: var(--text-hi); text-align: left; cursor: pointer; font-family: inherit; } .sugg-item:hover, .sugg-item.on { background: rgba(var(--brand-rgb), 0.14); } .sugg-item b { font-weight: 800; } .sugg-item small { color: var(--muted); } .sugg-empty { padding: 0.6rem; font-size: 0.82rem; color: var(--muted); } /* ───── Статистика: графики (палитра проверена на тёмной поверхности сайта) ───── */ #view { --viz-brand: var(--brand); --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; --viz-5: #d55181; } .an-kpi { padding: 0.9rem 1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); } .an-svg { width: 100%; height: auto; display: block; overflow: visible; } .an-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; } .an-base { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; } .an-axis { fill: var(--muted); font-size: 10px; font-weight: 700; font-family: inherit; } .an-hit { fill: transparent; cursor: default; } .an-hit:hover { fill: rgba(255, 255, 255, 0.05); } .an-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .an-empty { height: 120px; display: grid; place-items: center; color: var(--muted); font-size: 0.9rem; border: 1px dashed var(--line-strong); border-radius: 12px; } .an-table { width: 100%; font-size: 0.78rem; border-collapse: collapse; } .an-table th, .an-table td { padding: 0.25rem 0.5rem; text-align: right; border-bottom: 1px solid var(--line); color: var(--text-2); } .an-table th:first-child, .an-table td:first-child { text-align: left; } .an-table th { color: var(--muted); font-weight: 800; } .an-top-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.4rem; border-radius: 10px; color: inherit; } .an-top-row:hover { background: rgba(255, 255, 255, 0.05); } .an-top-row img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; } .an-top-row b { font-weight: 800; font-size: 0.88rem; color: var(--text-hi); } .an-top-row small { color: var(--muted); font-size: 0.72rem; } /* ───── Публикации в профиле: карточки ───── */ .pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; } .pcard { position: relative; display: flex; flex-direction: column; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong); overflow: visible; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .pcard:hover { transform: translateY(-2px); border-color: rgba(var(--brand-rgb), 0.5); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.8); } .pc-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 15px 15px 0 0; background: var(--bg-deep); } .pc-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .pcard:hover .pc-cover img { transform: scale(1.04); } .pc-cover img.pc-spoiler { filter: blur(18px) saturate(0.8); transform: scale(1.15); } .pc-sp-label { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #fff; font-weight: 800; font-size: 0.85rem; } .pc-status { position: absolute; top: 10px; left: 10px; } .pc-play { position: absolute; right: 10px; bottom: 10px; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.85rem; } .pc-noimg { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.2rem; text-align: center; } .pc-noimg span { font-size: 2.2rem; } .pc-noimg p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.82); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pc-noimg-ideas { background: radial-gradient(circle at 30% 20%, rgba(var(--brand-light-rgb), 0.35), transparent 60%), linear-gradient(135deg, #3a2410, #1a120c); } .pc-noimg-videos { background: linear-gradient(135deg, #1e1b4b, #0f172a); } .pc-body { padding: 0.8rem 1rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; } .pc-head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .pc-author { font-weight: 800; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-when { margin-left: auto; font-size: 0.8rem; color: var(--muted); white-space: nowrap; } .pc-menu { position: relative; } .pc-dots { width: 1.8rem; height: 1.8rem; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.1rem; font-weight: 900; } .pc-dots:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } .pc-title { font-weight: 900; font-size: 1.15rem; line-height: 1.25; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .pc-title:hover { color: var(--brand-light); } .pc-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 1.3rem; } .pc-tag { padding: 0.05rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 800; color: #b5e48c; background: rgba(132, 204, 22, 0.12); border: 1px solid rgba(132, 204, 22, 0.35); } .pc-stats { display: flex; gap: 1rem; font-size: 0.82rem; font-weight: 800; color: var(--muted); } .pc-stats span { display: inline-flex; align-items: center; gap: 0.3rem; } .pc-pop { position: absolute; z-index: 20; right: 0.8rem; top: calc(56.25% + 0.2rem); min-width: 210px; padding: 0.35rem; border-radius: 12px; background: var(--bg-deep); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; } .pc-pop[hidden] { display: none; } .pc-pop a, .pc-pop button { display: block; padding: 0.45rem 0.6rem; border-radius: 8px; color: var(--text-hi); font-weight: 700; font-size: 0.88rem; text-align: left; background: transparent; border: 0; cursor: pointer; font-family: inherit; } .pc-pop a:hover, .pc-pop button:hover { background: rgba(var(--brand-rgb), 0.14); } /* Кнопка «Фильтрация» */ .pf-filter { position: relative; } .pf-filter summary { list-style: none; display: flex; align-items: center; gap: 1.2rem; min-width: 190px; justify-content: space-between; padding: 0.55rem 0.9rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); font-weight: 800; font-size: 0.9rem; color: var(--text-hi); cursor: pointer; } .pf-filter summary::-webkit-details-marker { display: none; } .pf-filter[open] summary { border-color: rgba(var(--brand-rgb), 0.6); } .pf-filter-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 250px; padding: 0.4rem; border-radius: 14px; background: var(--bg-deep); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); } .pf-filter-h { padding: 0.45rem 0.55rem 0.2rem; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .pf-opt { display: flex; justify-content: space-between; width: 100%; padding: 0.42rem 0.6rem; border-radius: 9px; border: 0; background: transparent; color: var(--text-soft); font-weight: 700; font-size: 0.88rem; text-align: left; cursor: pointer; font-family: inherit; } .pf-opt span { color: var(--muted); } .pf-opt:hover { background: rgba(255, 255, 255, 0.06); } .pf-opt.on { background: rgba(var(--brand-rgb), 0.15); color: #fff; } .user-link:hover span, a.user-link:hover { color: var(--brand-light); } /* Текстовые посты */ .gal-tabs { display: inline-flex; gap: 0.25rem; padding: 0.3rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); } .txt-card { display: flex; flex-direction: column; } .txt-card-body { flex: 1; aspect-ratio: 1; padding: 1rem 1.1rem; overflow: hidden; position: relative; background: radial-gradient(circle at 15% 10%, rgba(var(--brand-rgb), 0.14), transparent 55%), var(--surface-2); } .txt-card-body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3rem; background: linear-gradient(transparent, var(--surface-2)); } .txt-card-body h3 { font-weight: 900; color: #fff; font-size: 1.05rem; margin-bottom: 0.4rem; word-break: break-word; } .txt-card-body p { color: var(--text-2); font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .pc-noimg-posts { align-items: flex-start; justify-content: flex-start; text-align: left; background: radial-gradient(circle at 15% 10%, rgba(var(--brand-rgb), 0.18), transparent 60%), #241c16; } .pc-noimg-posts p { -webkit-line-clamp: 6; font-size: 0.88rem; color: var(--text-soft); white-space: pre-wrap; } .pc-pop .pc-del { color: #fda4af; } .mod-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.75rem; } .ac-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .ac-table th { text-align: left; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line-strong); white-space: nowrap; } .ac-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); color: var(--text-2); white-space: nowrap; } .ac-table td:first-child { white-space: normal; min-width: 220px; } .ac-table tr:hover td { background: rgba(255, 255, 255, 0.03); } .post-text { color: var(--text-soft); white-space: pre-wrap; word-break: break-word; line-height: 1.6; font-size: 1rem; } /* Картинки в комментариях */ .cm-img { max-width: min(100%, 320px); max-height: 260px; border-radius: 10px; margin-top: 0.35rem; border: 1px solid var(--line); display: block; } .cm-img-wait { margin-top: 0.35rem; font-size: 0.8rem; color: var(--muted); font-style: italic; } .cm-clip { padding-left: 0.75rem; padding-right: 0.75rem; cursor: pointer; flex: none; } .cm-prev { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; padding: 0.3rem 0.4rem 0.3rem 0.3rem; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong); max-width: 100%; } .cm-prev img { width: 44px; height: 44px; object-fit: cover; border-radius: 7px; } .cm-prev span { font-size: 0.78rem; color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-prev button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.9rem; } .cm-prev button:hover { color: #fda4af; } /* Логи */ .lg-day { font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.4rem 0.2rem; } .lg-row { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.65rem 0.9rem; } .lg-ic { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, 0.05); font-size: 0.95rem; } .lg-text { font-size: 0.92rem; color: var(--text-soft); line-height: 1.45; word-break: break-word; } .lg-text b, .lg-who { font-weight: 800; color: #fff; } .lg-who:hover { color: var(--brand-light); } .lg-title { color: var(--brand-light); } a.lg-title[href]:hover { text-decoration: underline; } .lg-det { margin-top: 0.15rem; font-size: 0.8rem; color: var(--muted); word-break: break-word; } .lg-time { flex: none; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 0.15rem; } .lg-row > .min-w-0 { flex: 1; min-width: 0; } /* ───── Посты: форма с фото, счётчик фото, просмотр с листанием ───── */ .dz-hint { display: none; position: absolute; inset: 0; border-radius: inherit; place-items: center; font-weight: 800; color: var(--brand-hi); background: rgba(20, 14, 10, 0.82); border: 2px dashed var(--brand); pointer-events: none; } .composer.dz-active .dz-hint { display: grid; } .stage-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .stage-th { position: relative; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--line); flex: none; } .stage-th img { width: 100%; height: 100%; object-fit: cover; } .stage-th .stage-x { top: 4px; right: 4px; width: 24px; height: 24px; font-size: 0.75rem; } .stage-add { display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, 0.03); border-style: dashed; border-color: var(--line-strong); color: var(--muted); font-size: 1.8rem; font-weight: 300; } .stage-add:hover { border-color: var(--brand); color: var(--brand-hi); } .img-count { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; color: #fff; background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(255, 255, 255, 0.15); } .pv-stage { position: relative; overflow: hidden; min-height: 240px; display: flex; align-items: center; justify-content: center; background: #000; } .pv-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 3px; } .pv-nav:hover { background: rgba(var(--brand-rgb), 0.85); } .pv-prev { left: 10px; } .pv-next { right: 10px; } .pv-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 3; } .pv-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.4); cursor: pointer; padding: 0; } .pv-dots button.on { background: var(--brand); transform: scale(1.25); } .pv-num { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 0.75rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; } .pv-open { position: absolute; top: 10px; right: 10px; z-index: 3; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); color: #fff; } .pv-open:hover { background: rgba(var(--brand-rgb), 0.85); } .mod-pv-imgs { display: flex; flex-wrap: wrap; gap: 0.5rem; } .mod-pv-imgs .mod-pv-img { max-height: 220px; } .an-top-txt { width: 36px; height: 36px; border-radius: 8px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); } /* ───── Статистика: отступы между блоками ───── */ .an-stack { display: flex; flex-direction: column; gap: 1.5rem; } .an-stack > .grid { gap: 1rem; } /* ───── Логи: снять бан / таймаут ───── */ .lg-undo { flex: none; align-self: center; font-size: 0.78rem; font-weight: 800; padding: 0.3rem 0.65rem; border-radius: 999px; color: var(--brand-tint); background: rgba(var(--brand-rgb), 0.12); border: 1px solid rgba(var(--brand-rgb), 0.4); cursor: pointer; white-space: nowrap; } .lg-undo:hover { background: rgba(var(--brand-rgb), 0.28); color: #fff; } .lg-done { flex: none; align-self: center; font-size: 0.72rem; color: var(--muted); white-space: nowrap; } /* ───── Лента постов (как в Threads) ───── */ .feed-page { display: grid; grid-template-columns: minmax(0, 660px) 300px; gap: 1.5rem; justify-content: center; align-items: start; } @media (max-width: 1100px) { .feed-page { grid-template-columns: minmax(0, 660px); } .feed-aside { display: none; } } .feed-col { min-width: 0; } .feed-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .feed-sort { position: relative; display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .feed-sort button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--muted); font-weight: 800; font-size: 0.85rem; padding: 0.4rem 0.9rem; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: color 0.2s; } .feed-sort button:hover { color: #fff; } .feed-sort button.on { color: #fff; } .fs-ind { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: 9px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong), 0 4px 14px -6px rgba(var(--brand-rgb), 0.45); transition: transform 0.32s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.32s cubic-bezier(0.3, 1.25, 0.5, 1); } .feed { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; } .fp-empty { padding: 3rem 1.5rem; text-align: center; color: var(--muted); } .fp-login { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; flex-wrap: wrap; } .composer { position: relative; display: flex; gap: 0.8rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); } .composer > img { flex: none; } .composer-main { flex: 1; min-width: 0; } .composer-title, .composer-text { display: block; width: 100%; background: transparent; border: 0; outline: none; color: var(--text); font: inherit; padding: 0; resize: none; } .composer-title { font-weight: 800; font-size: 0.95rem; margin-top: 0.15rem; } .composer-title::placeholder { color: rgba(169, 155, 141, 0.6); font-weight: 600; } .composer-text { font-size: 0.97rem; line-height: 1.45; margin-top: 0.35rem; min-height: 1.5rem; max-height: 420px; overflow-y: auto; } .composer-text::placeholder { color: var(--muted); } .composer #stage:not(:empty) { margin-top: 0.75rem; } .composer-bar { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; } .composer-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--muted); cursor: pointer; } .composer-ic:hover { color: var(--brand-hi); background: rgba(var(--brand-rgb), 0.1); } .composer-count { font-size: 0.75rem; color: var(--muted); } .composer.dz-active { background: rgba(var(--brand-rgb), 0.06); } .fp { display: flex; gap: 0.8rem; padding: 1rem 1.25rem 0.6rem; border-bottom: 1px solid var(--line); } .fp:last-child { border-bottom: 0; } .fp-ava { flex: none; align-self: flex-start; } .fp-main { flex: 1; min-width: 0; } .fp-head { display: flex; align-items: center; gap: 0.4rem; min-width: 0; } .fp-name { font-weight: 800; color: #fff; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fp-name:hover { text-decoration: underline; } .fp-head .role-badge.rb-sm { margin-left: 0.15rem; } .fp-time { color: var(--muted); font-size: 0.85rem; white-space: nowrap; } .fp-time::before { content: '·'; margin-right: 0.4rem; } .fp-handle { color: var(--muted); font-size: 0.82rem; margin-top: -0.1rem; } .fp-more { position: relative; margin-left: auto; flex: none; } .fp-ic { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; } .fp-ic:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } .fp-pop { position: absolute; right: 0; top: 34px; z-index: 20; min-width: 210px; padding: 0.35rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); } .fp-pop button { display: block; width: 100%; text-align: left; padding: 0.55rem 0.75rem; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-weight: 700; font-size: 0.88rem; cursor: pointer; } .fp-pop button:hover { background: rgba(255, 255, 255, 0.06); } .fp-pop .pc-del { color: #fca5a5; } .fp-body { margin-top: 0.35rem; cursor: pointer; } .fp-title { font-weight: 900; color: #fff; font-size: 1.02rem; line-height: 1.3; margin-bottom: 0.2rem; word-break: break-word; } .fp-text { color: var(--text-hi); font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .fp-clamp { display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; } .fp-full { display: inline-block; margin-top: 0.25rem; color: var(--muted); font-size: 0.88rem; font-weight: 700; } .fp-full:hover { color: var(--brand-hi); } .fp-media { position: relative; margin-top: 0.7rem; } .fp-media img { display: block; border-radius: 14px; border: 1px solid var(--line); background: #000; cursor: zoom-in; } .fp-one img { max-width: 100%; max-height: 560px; width: auto; height: auto; object-fit: contain; } .fp-strip { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.35rem; margin-right: -1.25rem; padding-right: 1.25rem; scrollbar-width: thin; } .fp-strip img { height: 300px; width: auto; max-width: 78%; object-fit: cover; flex: none; scroll-snap-align: start; } .fp-hidden img { filter: blur(26px) brightness(0.7); cursor: pointer; } .fp-hidden { overflow: hidden; border-radius: 14px; } .fp-spoiler { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; max-width: calc(100% - 2rem); padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(20, 14, 10, 0.85); color: #fff; font-weight: 800; font-size: 0.88rem; cursor: pointer; } .fp-spoiler:hover { border-color: var(--brand); } .fp-actions { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.4rem; margin-left: -0.5rem; } .fp-act { display: inline-flex; align-items: center; gap: 0.3rem; height: 36px; padding: 0 0.55rem; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-weight: 700; font-size: 0.85rem; cursor: pointer; } .fp-act:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } .fp-act.liked { color: #ff4d6d; } .fp-act.pop svg { animation: fp-pop 0.3s ease; } @keyframes fp-pop { 50% { transform: scale(1.3); } } .fp-views { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); font-size: 0.8rem; } .feed-aside { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; margin-top: 3.4rem; } .fa-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 0.9rem; } .fa-card h3 { font-weight: 900; color: #fff; margin: 0 0 0.5rem 0.25rem; font-size: 0.98rem; } .fa-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.45rem; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; } .fa-row:hover { background: rgba(255, 255, 255, 0.05); } .fa-row img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; } .fa-row img.rounded-full { width: 32px; height: 32px; } .fa-row b { display: block; font-size: 0.86rem; color: var(--text-hi); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fa-row small { display: block; font-size: 0.74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fa-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); } .fa-n { font-size: 0.8rem; font-weight: 800; color: var(--brand-hi); } .fa-none { color: var(--muted); font-size: 0.85rem; padding: 0.25rem; } @media (max-width: 640px) { .fp, .composer { padding-left: 0.9rem; padding-right: 0.9rem; } .fp-strip { margin-right: -0.9rem; padding-right: 0.9rem; } .fp-strip img { height: 220px; } .feed { border-radius: 16px; } } .fa-row > span.flex-1 { flex: 1; min-width: 0; } .fp-one.fp-hidden { width: fit-content; max-width: 100%; } .fp-hidden img { transform: scale(1.05); } /* ───── Подписки ───── */ .fp-follow { margin-left: 0.2rem; padding: 0.12rem 0.6rem; border-radius: 999px; border: 1px solid rgba(var(--brand-rgb), 0.45); background: rgba(var(--brand-rgb), 0.1); color: var(--brand-hi); font-weight: 800; font-size: 0.74rem; cursor: pointer; white-space: nowrap; transition: background 0.15s, transform 0.15s; } .fp-follow:hover { background: rgba(var(--brand-rgb), 0.25); color: #fff; transform: translateY(-1px); } .fp-reason { margin-left: 0.5rem; font-size: 0.74rem; color: var(--text-2); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); padding: 0.05rem 0.5rem; border-radius: 999px; white-space: nowrap; } .follow-btn { flex: none; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid transparent; background: var(--grad); color: var(--on-brand); box-shadow: 0 6px 14px -8px rgba(var(--brand-rgb), 0.8); font-weight: 900; font-size: 0.78rem; cursor: pointer; white-space: nowrap; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s; } .follow-btn:hover { transform: translateY(-1px); filter: brightness(1.08); } .follow-btn:active { transform: scale(0.95); } .follow-btn.on { background: transparent; color: var(--text-hi); border-color: var(--line-strong); box-shadow: none; filter: none; } .follow-btn.on .fb-off { display: none; } .follow-btn.on:hover { border-color: rgba(255, 107, 94, 0.7); color: #fca5a5; background: rgba(255, 107, 94, 0.08); } .follow-btn.on:hover .fb-on { display: none; } .follow-btn.on:hover .fb-off { display: inline; } .follow-btn:disabled { opacity: 0.6; } .follow-lg { padding: 0.55rem 1.2rem; font-size: 0.9rem; } .pf-social { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.88rem; color: var(--muted); } .pf-social b { color: #fff; font-weight: 900; } .follow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; margin-top: 1.25rem; text-align: center; } .follow-card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem 0.75rem; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); animation: fadeUp 0.4s both; } .follow-card a { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: inherit; min-width: 0; max-width: 100%; } .follow-card b { color: #fff; font-weight: 900; font-size: 0.9rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .follow-card small { color: var(--muted); font-size: 0.75rem; } .fa-row .follow-btn { margin-left: 0.25rem; } /* ───── Скелетон загрузки ───── */ .fp-skel { pointer-events: none; } .sk { display: block; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0.05) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; } .sk-ava { width: 40px; height: 40px; border-radius: 50%; flex: none; } .sk-line { height: 11px; margin-bottom: 0.55rem; } .sk-line.w40 { width: 40%; } .sk-line.w70 { width: 70%; } .sk-line.w90 { width: 90%; } .sk-box { height: 180px; border-radius: 14px; margin: 0.4rem 0 0.6rem; } @keyframes shimmer { to { background-position: -200% 0; } } /* ───── Анимации ───── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes modalOut { to { opacity: 0; transform: translateY(10px) scale(0.97); } } @keyframes toastOut { to { opacity: 0; transform: translateX(24px); } } @keyframes freshGlow { 0% { background: rgba(var(--brand-rgb), 0.16); } 100% { background: transparent; } } /* смена вкладки сайта и раздела админки */ /* Только прозрачность и только на время анимации: transform у родителя сломал бы position: fixed внутри (боковая панель админки «прилипала» к странице, а не к окну) */ .view-enter { animation: viewIn 0.35s ease backwards; } @keyframes viewIn { from { opacity: 0; } to { opacity: 1; } } /* вкладки сайта: подсветка переезжает */ #tabs.has-ind { position: relative; } .tab-ind { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 12px; background: rgba(var(--brand-rgb), 0.14); border: 1px solid rgba(var(--brand-rgb), 0.38); pointer-events: none; transition: transform 0.35s cubic-bezier(0.3, 1.2, 0.5, 1), width 0.35s cubic-bezier(0.3, 1.2, 0.5, 1), opacity 0.2s; box-sizing: border-box; } .tab-ind.hide { opacity: 0; } #tabs.has-ind .tab { position: relative; z-index: 1; } #tabs.has-ind .tab.active { background: transparent; border-color: transparent; } .tab span[aria-hidden] { display: inline-block; transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); } .tab:hover span[aria-hidden] { transform: scale(1.18) rotate(-6deg); } /* окна */ .modal-backdrop { animation: fadeIn 0.2s ease both; } .modal-panel { animation: modalIn 0.28s cubic-bezier(0.2, 0.9, 0.25, 1.05) both; } .modal-backdrop.closing { animation: fadeIn 0.2s ease reverse both; pointer-events: none; } .modal-backdrop.closing .modal-panel { animation: modalOut 0.2s ease both; } /* уведомления */ .toast.out { animation: toastOut 0.26s ease both; } /* лента */ .fp-anim .fp { animation: fadeUp 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); } .fp { transition: background 0.2s; } .fp:hover { background: rgba(255, 255, 255, 0.015); } .fp-fresh { animation: freshGlow 2.2s ease both !important; } .fp-media img { animation: fadeIn 0.45s ease both; transition: transform 0.25s ease, border-color 0.2s; } .fp-media:not(.fp-hidden) img:hover { border-color: var(--line-strong); } .fp-hidden img { transition: filter 0.45s ease; } .fp-act svg { transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); } .fp-act:hover svg { transform: scale(1.12); } .fp-act span { display: inline-block; min-width: 0.5ch; } .fp-act.liked span { animation: popIn 0.3s ease; } .fp-pop:not([hidden]), .pc-pop:not([hidden]), .pf-filter[open] .pf-filter-pop, .sugg:not(:empty) { animation: popIn 0.16s ease both; transform-origin: top right; } .feed-aside .fa-card { animation: fadeUp 0.45s 0.12s both; } .feed-aside .fa-card + .fa-card { animation-delay: 0.2s; } .fa-row { transition: background 0.15s, transform 0.15s; } .fa-row:hover { transform: translateX(2px); } .composer-ic svg { transition: transform 0.2s; } .composer-ic:hover svg { transform: rotate(-8deg) scale(1.1); } .stage-th { animation: popIn 0.22s ease both; } /* карточки, кнопки, комментарии */ .btn { transition: transform 0.15s ease, filter 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.2s, color 0.15s; } .btn:hover:not(:disabled) { transform: translateY(-1px); } .btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); } .card-hover { transition: transform 0.22s ease, border-color 0.2s, box-shadow 0.25s; } .card-hover:hover { transform: translateY(-3px); } .pc-grid > .pcard { animation: fadeUp 0.4s both; } .pc-grid > .pcard:nth-child(2) { animation-delay: 0.04s; } .pc-grid > .pcard:nth-child(3) { animation-delay: 0.08s; } .pc-grid > .pcard:nth-child(4) { animation-delay: 0.12s; } .pc-grid > .pcard:nth-child(n + 5) { animation-delay: 0.16s; } .cm-prev, .cm-img-wrap { animation: fadeIn 0.3s both; } .pv-stage img#pm-img { animation: fadeIn 0.3s ease both; } .lg-row, .mod-row { animation: fadeIn 0.3s both; } .an-kpi { transition: transform 0.2s, border-color 0.2s; } .an-kpi:hover { transform: translateY(-2px); } .adm-nav-btn { transition: background 0.18s, color 0.18s, transform 0.15s; } .adm-nav-btn:hover { transform: translateX(2px); } html { scroll-behavior: smooth; } /* ───── Свой цвет значка роли ───── */ .rb-custom { color: var(--rbt, #fff); background: linear-gradient(135deg, color-mix(in srgb, var(--rb) 72%, #fff), var(--rb) 55%, color-mix(in srgb, var(--rb) 80%, #000)); border: 1px solid color-mix(in srgb, var(--rb) 55%, #fff); box-shadow: 0 0 10px color-mix(in srgb, var(--rb) 70%, transparent), 0 0 22px color-mix(in srgb, var(--rb) 30%, transparent); } .role-custom { padding: 0.2rem 0.5rem 0.2rem 0.3rem; border-radius: 12px; border: 1px dashed var(--line-strong); } .role-custom input[type=color] { width: 30px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; } /* ───── Закреп ───── */ .fp-pin { font-size: 0.76rem; font-weight: 800; color: var(--brand-hi); margin-bottom: 0.25rem; letter-spacing: 0.01em; } .fp-pinned { background: linear-gradient(180deg, rgba(var(--brand-rgb), 0.07), transparent 60%); box-shadow: inset 3px 0 0 var(--brand); } /* ───── Подписчики / подписки (окно) ───── */ .pf-social button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; } .pf-social button:hover, .pf-social button:hover b { color: var(--brand-hi); } .fl-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); } .fl-tabs button { flex: 1; padding: 0.6rem; border: 0; background: none; color: var(--muted); font-weight: 800; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s, border-color 0.25s; } .fl-tabs button.on { color: #fff; border-color: var(--brand); } .fl-tabs span { opacity: 0.6; } .fl-list { max-height: 60vh; overflow-y: auto; margin: 0 -0.5rem; } .fl-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.5rem; border-radius: 12px; animation: fadeUp 0.3s both; } .fl-row:hover { background: rgba(255, 255, 255, 0.04); } .fl-row b { color: #fff; font-weight: 800; font-size: 0.92rem; } .fl-row small { display: block; color: var(--muted); font-size: 0.76rem; } /* ───── Уведомления ───── */ :root { --nf-fill: rgba(var(--surface-rgb), 0.92); --nf-border: rgba(var(--brand-rgb), 0.35); --nf-blur: 10px; --nf-accent: var(--brand); --nf-text: var(--text-hi); } .nf-wrap { position: relative; } .nf-bell { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--muted); cursor: pointer; transition: color 0.2s, background 0.2s, transform 0.15s; } .nf-bell:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } .nf-bell.has { color: #fff; } .nf-bell.has svg { animation: bell-ring 2.6s ease-in-out infinite; transform-origin: 50% 10%; } @keyframes bell-ring { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(14deg); } 92% { transform: rotate(-12deg); } 95% { transform: rotate(7deg); } } .nf-count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--nf-accent); color: var(--on-brand); font-size: 0.7rem; font-weight: 900; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); animation: popIn 0.25s ease; } .nf-panel { position: absolute; right: -8px; top: 46px; z-index: 50; width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 110px)); display: flex; flex-direction: column; border-radius: 18px; background: var(--nf-fill); border: 1px solid var(--nf-border); backdrop-filter: blur(var(--nf-blur)); -webkit-backdrop-filter: blur(var(--nf-blur)); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85); color: var(--nf-text); overflow: hidden; animation: popIn 0.18s ease both; transform-origin: top right; } .nf-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem 0.4rem; } .nf-head b { font-weight: 900; font-size: 1.05rem; color: var(--nf-text); } .nf-hbtn { width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; transition: background 0.15s, transform 0.3s; } .nf-hbtn:hover { background: rgba(255, 255, 255, 0.08); transform: rotate(45deg); } .nf-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 1rem 0.6rem; } .nf-tabs button { padding: 0.25rem 0.75rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 800; font-size: 0.8rem; cursor: pointer; } .nf-tabs button.on { background: var(--nf-accent); border-color: var(--nf-accent); color: var(--on-brand); } .nf-list { overflow-y: auto; padding: 0 0.4rem 0.4rem; } .nf-item { display: flex; gap: 0.7rem; padding: 0.6rem; border-radius: 12px; color: var(--nf-text); position: relative; transition: background 0.15s; animation: fadeIn 0.25s both; } .nf-item:hover { background: rgba(255, 255, 255, 0.06); } .nf-item.unread { background: color-mix(in srgb, var(--nf-accent) 9%, transparent); } .nf-item.unread::after { content: ''; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--nf-accent); box-shadow: 0 0 8px var(--nf-accent); } .nf-ava { position: relative; flex: none; width: 38px; height: 38px; } .nf-ava img { width: 38px !important; height: 38px !important; } .nf-ava i { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; font-style: normal; background: var(--bg); border: 2px solid var(--nf-fill); } .nf-sys { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--nf-accent) 25%, transparent); font-size: 1.1rem; } .nf-body { min-width: 0; flex: 1; padding-right: 0.9rem; } .nf-text { display: block; font-size: 0.86rem; line-height: 1.35; word-break: break-word; } .nf-text b { font-weight: 900; } .nf-title { opacity: 0.75; } .nf-time { display: block; font-size: 0.74rem; color: var(--nf-accent); opacity: 0.85; margin-top: 0.15rem; font-weight: 700; } .nf-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); font-size: 0.9rem; } .nf-foot { border-top: 1px solid var(--line); padding: 0.4rem; text-align: center; } .nf-foot button { border: 0; background: none; color: var(--muted); font-size: 0.8rem; font-weight: 700; cursor: pointer; padding: 0.35rem 0.8rem; border-radius: 8px; } .nf-foot button:hover { color: #fca5a5; background: rgba(255, 255, 255, 0.04); } #nf-pops { position: fixed; top: 84px; right: 16px; z-index: 70; display: flex; flex-direction: column; gap: 0.6rem; width: min(360px, calc(100vw - 32px)); pointer-events: none; } .nf-pop { pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.8rem 0.9rem; border-radius: 16px; overflow: hidden; color: var(--nf-text); background: var(--nf-fill); border: 1px solid var(--nf-border); backdrop-filter: blur(var(--nf-blur)); -webkit-backdrop-filter: blur(var(--nf-blur)); box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.2); animation: nfIn 0.42s cubic-bezier(0.2, 1.2, 0.4, 1) both; } .nf-pop.out { animation: nfOut 0.26s ease both; } .nf-pop.static { animation: none; } .nf-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 8px; border: 0; background: transparent; color: var(--nf-text); opacity: 0.55; cursor: pointer; } .nf-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); } .nf-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--nf-accent); transform-origin: left; animation: nfBar 6s linear both; } .nf-pop.static .nf-bar { animation: none; transform: scaleX(0.6); } @keyframes nfIn { from { opacity: 0; transform: translateX(40px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes nfOut { to { opacity: 0; transform: translateX(40px); } } @keyframes nfBar { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* настройки уведомлений */ .nfs-card { padding: 1.1rem 1.2rem; border-radius: 18px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); } .nfs-card h3 { font-weight: 900; color: #fff; font-size: 1.02rem; padding-bottom: 0.7rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--line); } .nfs-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.5rem; } .nfs-type { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .nfs-type:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.02); } .nfs-type b { display: block; font-size: 0.88rem; color: var(--text-hi); } .nfs-type small { display: block; font-size: 0.74rem; color: var(--muted); } .nfs-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); } .nf-switch { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 23px; border-radius: 999px; background: var(--surface-3); position: relative; cursor: pointer; transition: background 0.2s; } .nf-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .nf-switch:checked { background: var(--brand); } .nf-switch:checked::after { transform: translateX(17px); } .nfs-chip { padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font-weight: 800; font-size: 0.84rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; } .nfs-chip:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--brand); } .nfs-chip.on { background: rgba(var(--brand-rgb), 0.16); border-color: var(--brand); color: var(--brand-tint); } .nfs-chip:disabled { opacity: 0.4; cursor: not-allowed; } .nfs-look { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; } @media (max-width: 760px) { .nfs-look { grid-template-columns: 1fr; } } .nfs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; } @media (max-width: 520px) { .nfs-grid { grid-template-columns: 1fr; } } .nfs-wide { grid-column: 1 / -1; } .nfs-color { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-weight: 800; font-size: 0.9rem; color: var(--text-hi); } .nfs-color input[type=color] { width: 40px; height: 40px; padding: 0; border-radius: 11px; border: 1px solid var(--line-strong); background: none; cursor: pointer; overflow: hidden; } .nfs-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .nfs-color input[type=color]::-webkit-color-swatch { border: 0; border-radius: 10px; } .nfs-range > span { display: block; font-weight: 800; font-size: 0.9rem; color: var(--text-hi); margin-bottom: 0.35rem; } .nfs-range > div { display: flex; align-items: center; gap: 0.9rem; } .nfs-range b { min-width: 3.2rem; text-align: right; font-weight: 800; font-size: 0.88rem; color: #fff; font-variant-numeric: tabular-nums; } .nf-range { flex: 1; appearance: none; -webkit-appearance: none; height: 6px; border-radius: 999px; background: var(--surface-3); cursor: pointer; } .nf-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.25); transition: transform 0.15s; } .nf-range::-webkit-slider-thumb:hover { transform: scale(1.15); } .nf-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; } .nfs-preview { position: sticky; top: 0; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem 0.9rem; border-radius: 16px; background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface) 0 50%) 0 0 / 22px 22px, linear-gradient(135deg, #ff8a1f33, #7c3aed33); } .nfs-preview small { text-align: center; color: var(--muted); font-size: 0.72rem; } .nfs-type > span.flex-1, .fl-row > a.flex-1 { flex: 1; min-width: 0; } .nf-pop, .nf-item, .fl-row a { text-decoration: none; } .fl-row > a { display: flex; align-items: center; gap: 0.75rem; color: inherit; } /* ───── Графики статистики: «область с накоплением» в светящейся карточке ───── */ .an-chart { position: relative; padding: 1.25rem 1.35rem 1rem; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 80% at 0% 0%, rgba(var(--brand-rgb), 0.09), transparent 55%), linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid rgba(var(--brand-rgb), 0.28); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 26px -8px rgba(var(--brand-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: box-shadow 0.3s, border-color 0.3s; } .an-chart:hover { border-color: rgba(var(--brand-rgb), 0.5); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 36px -6px rgba(var(--brand-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .an-chart::before { content: ''; position: absolute; left: 1.5rem; top: -1px; width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--brand-hi), transparent); filter: blur(0.5px); } .an-chart > * + * { margin-top: 0.55rem; } .an-chart-title { font-weight: 900; color: #fff; font-size: 1.2rem; letter-spacing: -0.01em; } .an-chart-total { font-weight: 800; font-size: 0.95rem; color: var(--text-2); font-variant-numeric: tabular-nums; } .an-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; font-size: 0.85rem; color: var(--text-soft); } .an-legend span { display: inline-flex; align-items: center; gap: 0.5rem; } .an-legend .an-sw { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px currentColor; } .an-chart-sub { font-size: 0.8rem; font-weight: 700; color: var(--muted); } .an-chart .an-grid { stroke: rgba(var(--line-rgb), 0.1); stroke-dasharray: 4 5; } .an-chart .an-base { stroke: rgba(var(--line-rgb), 0.28); } .an-yaxis { stroke: rgba(var(--line-rgb), 0.22); stroke-width: 1; } .an-chart .an-axis { fill: var(--muted); font-size: 10.5px; } .an-line { filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.35)); } .an-dot { stroke: var(--bg-2); stroke-width: 2; } .an-cross { stroke: rgba(var(--line-rgb), 0.4); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity 0.12s; pointer-events: none; } .an-hdot { stroke: #fff; stroke-width: 2; opacity: 0; transition: opacity 0.12s; pointer-events: none; } .an-col:hover .an-cross, .an-col:hover .an-hdot { opacity: 1; } .an-chart .an-hit:hover { fill: transparent; } .an-draw { animation: anReveal 0.9s cubic-bezier(0.3, 0.8, 0.3, 1) both; } @keyframes anReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } .fp-act span.bump { animation: popIn 0.3s ease; } .fp-act.pop svg { animation: fp-pop 0.3s ease; } .fp-out { animation: fadeIn 0.25s ease reverse both; } /* подсветка слоя при наведении: остальные — серые и почти прозрачные */ .an-chart[data-hl="0"] [data-s]:not([data-s="0"]), .an-chart[data-hl="1"] [data-s]:not([data-s="1"]), .an-chart[data-hl="2"] [data-s]:not([data-s="2"]), .an-chart[data-hl="3"] [data-s]:not([data-s="3"]), .an-chart[data-hl="4"] [data-s]:not([data-s="4"]), .an-chart[data-hl="5"] [data-s]:not([data-s="5"]), .an-chart[data-hl="6"] [data-s]:not([data-s="6"]), .an-chart[data-hl="7"] [data-s]:not([data-s="7"]) { opacity: 0.14; filter: grayscale(1); } .an-chart[data-hl="0"] .an-line[data-s="0"], .an-chart[data-hl="1"] .an-line[data-s="1"], .an-chart[data-hl="2"] .an-line[data-s="2"], .an-chart[data-hl="3"] .an-line[data-s="3"], .an-chart[data-hl="4"] .an-line[data-s="4"], .an-chart[data-hl="5"] .an-line[data-s="5"], .an-chart[data-hl="6"] .an-line[data-s="6"], .an-chart[data-hl="7"] .an-line[data-s="7"] { stroke-width: 3; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)); } .an-chart[data-hl="0"] .an-area[data-s="0"], .an-chart[data-hl="1"] .an-area[data-s="1"], .an-chart[data-hl="2"] .an-area[data-s="2"], .an-chart[data-hl="3"] .an-area[data-s="3"], .an-chart[data-hl="4"] .an-area[data-s="4"], .an-chart[data-hl="5"] .an-area[data-s="5"], .an-chart[data-hl="6"] .an-area[data-s="6"], .an-chart[data-hl="7"] .an-area[data-s="7"] { filter: brightness(1.5) saturate(1.2); } .an-chart[data-hl="0"] .an-legend [data-s="0"], .an-chart[data-hl="1"] .an-legend [data-s="1"], .an-chart[data-hl="2"] .an-legend [data-s="2"], .an-chart[data-hl="3"] .an-legend [data-s="3"], .an-chart[data-hl="4"] .an-legend [data-s="4"], .an-chart[data-hl="5"] .an-legend [data-s="5"], .an-chart[data-hl="6"] .an-legend [data-s="6"], .an-chart[data-hl="7"] .an-legend [data-s="7"] { color: #fff; font-weight: 800; } .an-area, .an-line, .an-dot, .an-legend [data-s] { transition: opacity 0.22s ease, filter 0.22s ease, stroke-width 0.2s ease; } .an-legend [data-s] { cursor: default; padding: 0.1rem 0.35rem; margin: -0.1rem -0.35rem; border-radius: 8px; transition: background 0.2s, opacity 0.22s, filter 0.22s; } .an-legend [data-s]:hover { background: rgba(255, 255, 255, 0.05); } .an-chart[data-hl] .an-hdot:not(.x) { transition: opacity 0.12s, filter 0.2s; } /* ───── Фидбэк ───── */ .fb-btn { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem 0.7rem 0.9rem; border-radius: 999px; border: 1px solid rgba(var(--brand-rgb), 0.55); background: linear-gradient(180deg, var(--surface-3), var(--bg-2)); color: var(--brand-tint-2); font-weight: 900; font-size: 0.9rem; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), 0 0 22px -6px rgba(var(--brand-rgb), 0.55); transition: transform 0.2s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.2s; animation: fadeUp 0.5s 0.6s both; } .fb-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.85), 0 0 30px -4px rgba(var(--brand-rgb), 0.75); } .fb-btn:active { transform: scale(0.96); } .fb-ic { font-size: 1.1rem; display: inline-block; transition: transform 0.3s; } .fb-btn:hover .fb-ic { transform: rotate(-12deg) scale(1.15); } @media (max-width: 640px) { .fb-btn { padding: 0.75rem; } .fb-tx { display: none; } } body.adm-mode .fb-btn { right: 18px; } .fb-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .fb-type { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.7rem 0.5rem; border-radius: 14px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font-weight: 800; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; } .fb-type span { font-size: 1.4rem; transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); } .fb-type:hover { transform: translateY(-2px); } .fb-type.on { border-color: var(--brand); background: rgba(var(--brand-rgb), 0.12); } .fb-type.on span { transform: scale(1.15); } .mod-views { display: inline-flex; padding: 3px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); } .mod-views button { border: 0; background: transparent; color: var(--muted); font-weight: 800; padding: 0.45rem 1rem; border-radius: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: background 0.2s, color 0.2s; } .mod-views button.on { background: var(--surface-2); color: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); } .mod-views-n:not(:empty) { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 0.7rem; display: grid; place-items: center; } .fb-item { padding: 1rem 1.1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.7rem; animation: fadeUp 0.35s both; } .fb-text { color: var(--text-hi); white-space: pre-wrap; word-break: break-word; line-height: 1.5; } .fb-img { max-height: 260px; max-width: 100%; border-radius: 12px; border: 1px solid var(--line); } .fb-tag { font-size: 0.78rem; font-weight: 900; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--line-strong); } .fb-idea { color: #ffd27a; border-color: rgba(255, 194, 71, 0.45); background: rgba(255, 194, 71, 0.08); } .fb-bug { color: #fca5a5; border-color: rgba(255, 107, 94, 0.45); background: rgba(255, 107, 94, 0.08); } .fb-other { color: #c7d2fe; border-color: rgba(129, 140, 248, 0.4); background: rgba(129, 140, 248, 0.08); } .fb-reply { font-size: 0.88rem; color: var(--text-2); padding: 0.6rem 0.8rem; border-left: 3px solid var(--brand); background: rgba(var(--brand-rgb), 0.06); border-radius: 0 10px 10px 0; } /* ───── Заявки (фидбэк): кнопка в шапке, список, переписка ───── */ .fbm-wrap { position: relative; } .fbm-wrap[hidden] { display: none; } .fbm-wrap .nf-bell { animation: popIn 0.3s ease; } .fbm-panel { width: min(400px, calc(100vw - 24px)); } .tk-item { display: flex; align-items: flex-start; gap: 0.7rem; width: 100%; padding: 0.65rem; border: 0; border-radius: 12px; background: transparent; color: var(--nf-text); cursor: pointer; text-align: left; transition: background 0.15s; animation: fadeIn 0.25s both; font: inherit; } .tk-item:hover { background: rgba(255, 255, 255, 0.06); } .tk-item.unread { background: color-mix(in srgb, var(--nf-accent) 9%, transparent); } .tk-item-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; border: 1px solid var(--line-strong); } .tk-item-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .tk-item-top .nf-time { margin: 0; } .tk-item-text { display: block; font-size: 0.86rem; font-weight: 700; margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-item-last { display: block; font-size: 0.78rem; opacity: 0.7; margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-unread { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--nf-accent); color: var(--on-brand); font-size: 0.72rem; font-weight: 900; display: inline-grid; place-items: center; align-self: center; } .tk-st { display: inline-flex; align-items: center; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 800; border: 1px solid; white-space: nowrap; } .st-new { color: #ffd27a; border-color: rgba(255, 194, 71, 0.45); background: rgba(255, 194, 71, 0.08); } .st-progress { color: #93c5fd; border-color: rgba(96, 165, 250, 0.45); background: rgba(96, 165, 250, 0.1); } .st-done { color: #86efac; border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.08); } .st-rejected { color: #fca5a5; border-color: rgba(255, 107, 94, 0.45); background: rgba(255, 107, 94, 0.08); } .fb-item.unread { border-color: rgba(var(--brand-rgb), 0.5); box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.15); } .tk { display: flex; flex-direction: column; height: min(720px, calc(100vh - 2rem)); } .tk-head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.1rem 1.25rem 0.8rem; border-bottom: 1px solid var(--line); } .tk-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); } .tk-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; background: radial-gradient(100% 60% at 50% 0%, rgba(var(--brand-rgb), 0.05), transparent 70%); } .tk-msg { max-width: min(78%, 520px); align-self: flex-start; padding: 0.6rem 0.85rem 0.45rem; border-radius: 16px 16px 16px 6px; background: var(--surface-2); border: 1px solid var(--line); animation: fadeUp 0.3s both; } .tk-msg.me { align-self: flex-end; border-radius: 16px 16px 6px 16px; background: linear-gradient(180deg, rgba(var(--brand-rgb), 0.22), rgba(var(--brand-rgb), 0.14)); border-color: rgba(var(--brand-rgb), 0.35); } .tk-msg.staff:not(.me) { border-color: rgba(96, 165, 250, 0.3); background: linear-gradient(180deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.06)); } .tk-first { border-style: dashed; } .tk-who { display: flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; font-weight: 900; color: #fff; margin-bottom: 0.2rem; } .tk-staff { font-size: 0.66rem; font-weight: 800; color: #93c5fd; border: 1px solid rgba(96, 165, 250, 0.4); padding: 0 0.4rem; border-radius: 999px; } .tk-text { font-size: 0.92rem; color: var(--text-hi); white-space: pre-wrap; word-break: break-word; line-height: 1.45; } .tk-img { margin-top: 0.4rem; max-height: 240px; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); } .tk-time { font-size: 0.68rem; color: var(--muted); text-align: right; margin-top: 0.2rem; } .tk-sys { align-self: center; font-size: 0.76rem; font-weight: 700; color: var(--muted); padding: 0.25rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); text-align: center; animation: fadeIn 0.3s both; } .tk-input { border-top: 1px solid var(--line); padding: 0.7rem 1rem; } .tk-row { display: flex; align-items: flex-end; gap: 0.5rem; } .tk-row textarea { flex: 1; resize: none; min-height: 40px; max-height: 160px; padding: 0.55rem 0.8rem; border-radius: 12px; background: var(--ink-950); border: 1px solid var(--line-strong); color: var(--text); font: inherit; font-size: 0.92rem; outline: none; } .tk-row textarea:focus { border-color: var(--brand); } .tk-row .btn { height: 40px; width: 44px; padding: 0; font-size: 1rem; } .tk-clip { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; transition: background 0.15s; } .tk-clip:hover { background: rgba(255, 255, 255, 0.06); } #tk-attach:not(:empty) { margin-bottom: 0.5rem; } .tk-note { margin: 0.75rem 1rem 1rem; padding: 0.75rem 1rem; border-radius: 14px; font-size: 0.88rem; color: var(--text-soft); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); text-align: center; } .tk-note.done { border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.07); } .tk-note.rejected { border-color: rgba(255, 107, 94, 0.4); background: rgba(255, 107, 94, 0.07); } .tk-reason { margin-top: 0.35rem; font-weight: 700; } .nf-panel[hidden], .nf-count[hidden], .fp-pop[hidden], .pc-pop[hidden] { display: none !important; } /* ───── Числовые поля «− 0 +» ───── */ input[type=number] { -moz-appearance: textfield; appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .num-step { display: inline-flex; align-items: stretch; vertical-align: middle; height: 2.25rem; border-radius: 12px; background: var(--ink-950); border: 1px solid var(--line-strong); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .num-step:hover { border-color: rgba(var(--line-rgb), 0.28); } .num-step:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.18); } .num-step input { width: 3.6rem !important; min-width: 0; padding: 0 0.25rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; height: auto !important; } .num-btn { flex: none; width: 1.9rem; border: 0; background: rgba(255, 255, 255, 0.03); color: var(--muted); font-size: 1.05rem; font-weight: 800; line-height: 1; cursor: pointer; user-select: none; touch-action: manipulation; transition: background 0.15s, color 0.15s; } .num-btn:first-child { border-right: 1px solid var(--line); } .num-btn:last-child { border-left: 1px solid var(--line); } .num-btn:hover { background: rgba(var(--brand-rgb), 0.14); color: var(--brand-hi); } .num-btn:active { background: rgba(var(--brand-rgb), 0.26); color: #fff; } .num-step.bump-up input { animation: numUp 0.18s ease; } .num-step.bump-down input { animation: numDown 0.18s ease; } @keyframes numUp { from { transform: translateY(4px); opacity: 0.5; } } @keyframes numDown { from { transform: translateY(-4px); opacity: 0.5; } } /* ───── Поиск ───── */ .srch-btn { flex: none; } .srch-backdrop { position: fixed; inset: 0; z-index: 65; background: rgba(8, 5, 3, 0.62); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding: 9vh 1rem 1rem; animation: fadeIn 0.18s ease both; } .srch-backdrop.closing { animation: fadeIn 0.18s ease reverse both; } .srch-panel { width: min(620px, 100%); max-height: 76vh; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid rgba(var(--brand-rgb), 0.3); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 40px -12px rgba(var(--brand-rgb), 0.45); animation: modalIn 0.24s cubic-bezier(0.2, 0.9, 0.25, 1.05) both; } .srch-backdrop.closing .srch-panel { animation: modalOut 0.18s ease both; } .srch-bar { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--muted); } .srch-bar svg { flex: none; color: var(--brand-hi); } .srch-bar input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font: inherit; font-size: 1.08rem; font-weight: 600; } .srch-bar input::placeholder { color: var(--muted); font-weight: 500; } kbd { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; font: 700 0.7rem/1.4 inherit; color: var(--muted); background: rgba(255, 255, 255, 0.03); } .srch-res { overflow-y: auto; padding: 0.4rem; transition: opacity 0.15s; } .srch-res.loading { opacity: 0.55; } .srch-h { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.7rem 0.3rem; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .srch-h small { font-size: 0.72rem; opacity: 0.8; } .srch-h button { border: 0; background: none; color: var(--muted); font: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; } .srch-h button:hover { color: var(--brand-hi); } .srch-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.55rem 0.7rem; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; text-decoration: none; animation: fadeUp 0.25s both; } .srch-item.active { background: rgba(var(--brand-rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.3); } .srch-item > .min-w-0 { flex: 1; min-width: 0; } .srch-name { display: block; font-weight: 800; color: #fff; font-size: 0.93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srch-sub { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srch-snip { display: block; font-size: 0.85rem; color: var(--text-soft); margin-top: 0.1rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .srch-item mark { background: rgba(var(--brand-rgb), 0.28); color: #fff; border-radius: 4px; padding: 0 2px; } .srch-thumb { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); } .srch-thumb.sp-blur { transform: none; } .srch-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); } .srch-me { flex: none; font-size: 0.7rem; font-weight: 800; color: var(--brand-hi); border: 1px solid rgba(var(--brand-rgb), 0.35); padding: 0.05rem 0.45rem; border-radius: 999px; } .srch-enter { flex: none; width: 24px; text-align: center; color: var(--muted); opacity: 0; transition: opacity 0.15s; } .srch-item.active .srch-enter { opacity: 1; } .srch-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); } .srch-tip { margin: 0.6rem 0.7rem 0.8rem; padding: 0.8rem 0.9rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--line-strong); font-size: 0.85rem; color: var(--text-2); line-height: 1.55; } .srch-tip span { color: var(--muted); font-size: 0.8rem; } .srch-recent { padding: 0.4rem 0.7rem; } .srch-recent .srch-ic { width: 30px; height: 30px; } /* ───── Оформление (альфа) ───── */ .alpha-badge { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.06em; color: #fde68a; background: repeating-linear-gradient(135deg, rgba(250, 204, 21, 0.16) 0 8px, rgba(250, 204, 21, 0.06) 8px 16px); border: 1px solid rgba(250, 204, 21, 0.5); box-shadow: 0 0 12px -2px rgba(250, 204, 21, 0.35); cursor: help; white-space: nowrap; } .th-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; } .th-preset { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem; border-radius: 16px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: border-color 0.18s, transform 0.18s, box-shadow 0.2s; } .th-preset:hover { transform: translateY(-2px); border-color: var(--brand); } .th-preset.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.35), 0 10px 24px -12px rgba(var(--brand-rgb), 0.7); } .th-custom { cursor: default; } .th-custom:hover { transform: none; } .th-mini { position: relative; display: block; height: 70px; border-radius: 11px; overflow: hidden; background: var(--pb); border: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 0.35rem; } .th-mini-custom { display: grid; place-items: center; font-size: 1.6rem; background: conic-gradient(from 90deg, #ff8a1f, #f43f5e, #b46cff, #60a5fa, #34d399, #e9e9ec, #ff8a1f); opacity: 0.85; } .th-mini-bar { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--ps); border-bottom: 2px solid var(--pa); } .th-mini-card { position: absolute; left: 8px; right: 30px; top: 20px; bottom: 8px; border-radius: 7px; background: var(--ps); padding: 6px; display: flex; flex-direction: column; gap: 4px; } .th-mini-card b { display: block; width: 45%; height: 5px; border-radius: 3px; background: var(--pt); } .th-mini-card s { display: block; width: 80%; height: 4px; border-radius: 3px; background: var(--pm); opacity: 0.7; } .th-mini-btn { position: absolute; right: 7px; bottom: 8px; width: 17px; height: 17px; border-radius: 6px; background: var(--pa); box-shadow: 0 0 10px var(--pa); } .th-pname { font-weight: 900; font-size: 0.9rem; color: var(--text-hi); } .th-pname small { font-weight: 700; font-size: 0.68rem; color: var(--muted); } .th-phint { font-size: 0.74rem; color: var(--muted); } .th-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 1.25rem; align-items: start; } @media (max-width: 1000px) { .th-grid { grid-template-columns: 1fr; } } .th-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.25rem; } @media (max-width: 620px) { .th-fields { grid-template-columns: 1fr; } } .th-wide { grid-column: 1 / -1; margin-top: 0.4rem; } .th-field { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .th-field:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.02); } .th-field > span:first-child { flex: 1; min-width: 0; } .th-field b { display: block; font-size: 0.88rem; color: var(--text-hi); } .th-field small { display: block; font-size: 0.72rem; color: var(--muted); } .th-hex { font-size: 0.74rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; text-transform: uppercase; } .th-field input[type=color] { width: 40px; height: 40px; padding: 0; border-radius: 11px; border: 1px solid var(--line-strong); background: none; cursor: pointer; overflow: hidden; flex: none; } .th-field input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .th-field input[type=color]::-webkit-color-swatch { border: 0; border-radius: 10px; } .th-preview-card { position: sticky; top: 1rem; } .th-preview { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.9rem; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); } .th-pv-tabs { display: flex; gap: 0.4rem; } .th-pv-card { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); } .th-pv-ava { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-light), var(--brand)); flex: none; } .th-pv-text { font-size: 0.88rem; color: var(--text); } html { transition: background-color 0.3s; } body, .card, .feed, .modal-panel, .adm-side { transition: background-color 0.3s, border-color 0.3s, color 0.3s; } /* ───── Баллы ───── */ .pts-chip { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; height: 38px; padding: 0 0.75rem 0 0.55rem; border-radius: 12px; border: 1px solid rgba(var(--brand-rgb), 0.35); background: linear-gradient(180deg, rgba(var(--brand-rgb), 0.14), rgba(var(--brand-rgb), 0.06)); color: var(--text-hi); font-weight: 900; font-size: 0.9rem; cursor: pointer; font-variant-numeric: tabular-nums; transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s; white-space: nowrap; } /* Огонёк серии у баланса */ .streak-chip { position: relative; display: inline-flex; align-items: center; gap: 0.2rem; height: 38px; padding: 0 0.65rem 0 0.5rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--muted); font-weight: 900; font-size: 0.9rem; cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s; } .streak-chip[hidden] { display: none; } .streak-chip:hover { transform: translateY(-1px); } .sk-fire { display: inline-block; font-size: 1.15rem; line-height: 1; transform-origin: 50% 90%; } .streak-chip.off .sk-fire { filter: grayscale(1) brightness(0.8); opacity: 0.75; } .streak-chip.lit { color: #ffb13b; border-color: rgba(255, 138, 31, 0.55); background: linear-gradient(180deg, rgba(255, 106, 0, 0.2), rgba(255, 106, 0, 0.06)); box-shadow: 0 0 16px -6px rgba(255, 120, 0, 0.8); } .streak-chip.lit .sk-fire { animation: skFlicker 1.6s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(255, 120, 0, 0.7)); } .streak-chip.lit.t2 { color: #ffd04a; border-color: rgba(255, 190, 40, 0.65); } .streak-chip.lit.t3 { color: #7dd3fc; border-color: rgba(56, 189, 248, 0.6); background: linear-gradient(180deg, rgba(56, 189, 248, 0.18), rgba(56, 189, 248, 0.05)); box-shadow: 0 0 16px -6px rgba(56, 189, 248, 0.8); } .streak-chip.lit.t3 .sk-fire { filter: hue-rotate(180deg) drop-shadow(0 0 5px rgba(56, 189, 248, 0.8)); } .streak-chip.lit.t4 { color: #d8b4fe; border-color: rgba(192, 132, 252, 0.65); background: linear-gradient(180deg, rgba(192, 132, 252, 0.2), rgba(192, 132, 252, 0.05)); box-shadow: 0 0 18px -5px rgba(192, 132, 252, 0.9); } .streak-chip.lit.t4 .sk-fire { filter: hue-rotate(250deg) drop-shadow(0 0 6px rgba(192, 132, 252, 0.9)); } .streak-chip.risk { border-color: rgba(248, 113, 113, 0.6); color: #fca5a5; animation: skRisk 1.8s ease-in-out infinite; } .streak-chip.sk-pop .sk-fire { animation: skPop 0.8s cubic-bezier(0.3, 1.6, 0.5, 1); } @keyframes skFlicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 25% { transform: scale(1.08) rotate(2deg); } 50% { transform: scale(0.97) rotate(-1deg); } 75% { transform: scale(1.06) rotate(1.5deg); } } @keyframes skRisk { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } 50% { box-shadow: 0 0 14px -2px rgba(248, 113, 113, 0.6); } } @keyframes skPop { 0% { transform: scale(0.4); } 60% { transform: scale(1.5) rotate(8deg); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .streak-chip .sk-fire, .streak-chip.risk { animation: none !important; } } @media (max-width: 640px) { .streak-chip { height: 34px; padding: 0 0.5rem 0 0.4rem; font-size: 0.82rem; } } .pts-chip:hover { transform: translateY(-1px); border-color: rgba(var(--brand-rgb), 0.6); box-shadow: 0 0 18px -6px rgba(var(--brand-rgb), 0.7); } .pts-ic { font-size: 1.05rem; line-height: 1; display: inline-block; } .pts-chip:hover .pts-ic { animation: ptsSpin 0.6s ease; } @keyframes ptsSpin { 50% { transform: rotateY(180deg) scale(1.15); } } .pts-chip.pts-bump { animation: ptsBump 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); } @keyframes ptsBump { 40% { transform: scale(1.12); box-shadow: 0 0 24px -4px rgba(var(--brand-rgb), 0.9); } } .pts-float { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); font-weight: 900; font-size: 0.85rem; pointer-events: none; animation: ptsFloat 1.2s ease-out both; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .pts-float.up { color: #4ade80; } .pts-float.down { color: #fca5a5; } @keyframes ptsFloat { 0% { opacity: 0; transform: translate(-50%, 6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px); } } .pts-pchip { font-variant-numeric: tabular-nums; font-weight: 800; } .pts-pchip[role=button] { cursor: pointer; } .pts-modal { display: flex; flex-direction: column; max-height: min(760px, calc(100vh - 2rem)); } .pts-hero { position: relative; text-align: center; padding: 1.8rem 1.25rem 1.3rem; background: radial-gradient(90% 80% at 50% 0%, rgba(var(--brand-rgb), 0.22), transparent 70%); border-bottom: 1px solid var(--line); } .pts-x { position: absolute; right: 0.8rem; top: 0.8rem; } .pts-hero-ic { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 6px 16px rgba(var(--brand-rgb), 0.55)); animation: ptsFloatIc 3s ease-in-out infinite; } @keyframes ptsFloatIc { 50% { transform: translateY(-5px) rotate(-6deg); } } .pts-hero-bal { font-size: 2.8rem; font-weight: 900; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 0.3rem; } .pts-hero-name { color: var(--text-2); font-weight: 800; } .pts-hero-name b { color: var(--brand-hi); } .pts-hero-sub { color: var(--muted); font-size: 0.8rem; margin-top: 0.2rem; } .pts-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding: 1rem 1.25rem; } @media (max-width: 640px) { .pts-ways { grid-template-columns: 1fr; } } .pts-way { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); } .pts-way span { font-size: 1.3rem; } .pts-way b { color: var(--text-hi); font-size: 0.9rem; } .pts-way small { color: var(--muted); font-size: 0.76rem; line-height: 1.35; } .pts-way.soon { opacity: 0.6; border-style: dashed; } .pts-tabs { padding: 0 1.25rem 0.5rem; } .pts-list { overflow-y: auto; padding: 0 0.75rem 1rem; min-height: 120px; } .pts-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem; border-radius: 12px; color: inherit; text-decoration: none; animation: fadeUp 0.3s both; } .pts-row:hover { background: rgba(255, 255, 255, 0.04); } .pts-row.me { background: rgba(var(--brand-rgb), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.3); } .pts-row > .min-w-0 { flex: 1; min-width: 0; } .pts-row b { color: var(--text-hi); font-size: 0.88rem; } .pts-row small { display: block; color: var(--muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pts-rs { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); } .pts-delta { flex: none; font-weight: 900; font-variant-numeric: tabular-nums; } .pts-delta.up { color: #4ade80; } .pts-delta.down { color: #fca5a5; } .pts-place { flex: none; width: 28px; text-align: center; font-weight: 900; color: var(--muted); } .pts-amt { flex: none; font-weight: 900; color: var(--text-hi); font-variant-numeric: tabular-nums; } .pts-cfg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; } .pts-cfg label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; font-weight: 800; color: var(--text-2); } .pts-cfg .pts-cfg-hint, .pts-cfg button { grid-column: 1 / -1; } .pts-cfg button { justify-self: start; } .pts-cfg-hint { font-size: 0.78rem; color: var(--muted); } .pts-table td, .pts-table th { white-space: nowrap; } .pts-cfg .num-step { align-self: flex-start; } .pts-cfg .num-step input { width: 5.5rem !important; } /* ───── Бот в чате ───── */ .cb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); } .cb-ava { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; background: rgba(var(--brand-rgb), 0.12); border: 1px solid rgba(var(--brand-rgb), 0.35); flex: none; } .cb-head > .min-w-0 { flex: 1; min-width: 200px; } .cb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; } @media (max-width: 900px) { .cb-grid { grid-template-columns: 1fr; } } .cb-sw { flex-direction: row !important; align-items: center; gap: 0.6rem !important; } .cb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } @media (max-width: 560px) { .cb-stats { grid-template-columns: repeat(2, 1fr); } } .cb-stats > div { padding: 0.6rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); } .cb-stats b { display: block; font-size: 1.15rem; font-weight: 900; color: var(--text-hi); font-variant-numeric: tabular-nums; } .cb-stats small { color: var(--muted); font-size: 0.72rem; } .cb-pay td, .cb-pay th { text-align: center !important; } /* ───── Награды (админка) и ежедневный бонус ───── */ .pts-subs { margin-bottom: 0.25rem; } .rew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.9rem; } .rew-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); transition: opacity 0.2s, border-color 0.2s; animation: fadeUp 0.35s both; } .rew-card:hover { border-color: var(--line-strong); } .rew-card.off { opacity: 0.55; } .rew-card.off .rew-fields { filter: grayscale(1); } .rew-top { display: flex; align-items: flex-start; gap: 0.75rem; } .rew-top > .min-w-0 { flex: 1; min-width: 0; } .rew-top b { display: block; color: var(--text-hi); font-weight: 900; } .rew-top small { display: block; color: var(--muted); font-size: 0.76rem; line-height: 1.35; margin-top: 0.15rem; } .rew-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: rgba(var(--brand-rgb), 0.1); border: 1px solid rgba(var(--brand-rgb), 0.25); } .rew-fields { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; } .rew-fields label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.74rem; font-weight: 800; color: var(--text-2); } .rew-ex { font-size: 0.8rem; font-weight: 700; color: var(--brand-hi); } .rew-card.off .rew-ex { color: var(--muted); } .rew-save { position: sticky; bottom: 0.75rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem; padding: 0.75rem 1rem; border-radius: 16px; background: rgba(var(--surface-rgb), 0.92); backdrop-filter: blur(10px); border: 1px solid var(--line-strong); box-shadow: var(--shadow); } .rew-save > span { margin-right: auto; } .rew-line { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.2rem; font-size: 0.86rem; color: var(--text-2); } .rew-line > .min-w-0 { flex: 1; min-width: 0; } .rew-line b { font-size: 0.8rem; color: var(--text-hi); font-weight: 700; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rew-line.off { opacity: 0.5; } .pts-daily { display: flex; align-items: center; gap: 0.8rem; margin: 1rem 1.25rem 0; padding: 0.8rem 1rem; border-radius: 16px; background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.18), rgba(var(--brand-rgb), 0.05)); border: 1px solid rgba(var(--brand-rgb), 0.4); animation: fadeUp 0.35s both; } .pts-quests { margin: 0.8rem 1.25rem 0; padding: 0.85rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); animation: fadeUp 0.35s both; } .pq-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; } .pq-head b { color: var(--text-hi); } .pq-cnt { font-size: 0.78rem; font-weight: 800; color: var(--brand, #ff8a1f); } .pq-head small { margin-left: auto; font-size: 0.72rem; color: var(--muted); } .pq-note { font-size: 0.74rem; color: var(--muted); margin-bottom: 0.4rem; } .pq { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0; border-top: 1px solid var(--line); } .pq-ic { flex: none; width: 2rem; height: 2rem; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); } .pq b { display: block; font-size: 0.86rem; color: var(--text-hi); line-height: 1.25; } .pq small { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; } .pq-bar { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); margin-top: 5px; overflow: hidden; } .pq-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand, #ff8a1f), #ffc247); transition: width 0.4s; } .pq-rw { flex: none; font-weight: 800; font-size: 0.82rem; color: #ffc247; } .pq.done .pq-ic { background: rgba(34, 197, 94, 0.2); color: #86efac; font-weight: 900; } .pq.done b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.25); } .pq.done .pq-rw { color: #86efac; } .pq.done .pq-bar i { background: #22c55e; } .pq-all { margin-top: 0.4rem; padding-top: 0.55rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); } .pq-all b { color: #ffc247; } .pq-all.done { color: #86efac; } .pts-daily.done { background: rgba(255, 255, 255, 0.03); border-color: var(--line); } .pts-daily > .min-w-0 { flex: 1; min-width: 0; } .pts-daily b { display: block; color: var(--text-hi); } .pts-daily small { display: block; color: var(--muted); font-size: 0.78rem; } .pts-daily-ic { font-size: 1.7rem; flex: none; } .pts-daily:not(.done) .pts-daily-ic { animation: ptsGift 1.6s ease-in-out infinite; } @keyframes ptsGift { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-12deg) scale(1.1); } 86% { transform: rotate(10deg) scale(1.1); } } .pts-daily-ok { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(74, 222, 128, 0.15); color: #4ade80; font-weight: 900; } .pts-ways { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; } /* ═══════════════ Магазин и косметика профиля ═══════════════ */ /* Рамки-рисунки (SVG поверх аватарки, торчат за край на 20%) */ .avf.fx { padding: 0; overflow: visible; } .avf-art { position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; z-index: 2; pointer-events: none; overflow: visible; } .avf-art * { transform-box: fill-box; transform-origin: center; } .fa-nebula { filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.6)); } .fa-storm { filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.6)); } .fa-glitch { filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5)); } .fa-king { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55)); } .fa-frost { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55)); } .fa-stardust, .fa-heart, .fa-kitty, .fa-bow, .fa-candy { filter: drop-shadow(0 0 4px rgba(244, 114, 182, 0.5)); } .fa-tw { animation: faTw 2.2s ease-in-out infinite; } .fa-beat { animation: faBeat 1.3s ease-in-out infinite; } .fa-bolt { animation: faBolt 2.6s linear infinite; } .fa-flap { animation: faFlap 0.55s ease-in-out infinite; } .fa-d2 { animation-delay: -0.25s; animation-duration: 0.7s; } .fa-swing { transform-box: view-box !important; animation: faSwing 2.8s ease-in-out infinite; } .fa-ear { transform-box: view-box !important; animation: faEar 4s ease-in-out infinite; } .fa-gl1 { animation: faGl1 2.4s steps(1) infinite; } .fa-gl2 { animation: faGl2 2.4s steps(1) infinite; } @keyframes faTw { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.55); } } @keyframes faBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } } @keyframes faBolt { 0%, 58%, 66%, 74%, 100% { opacity: 0.3; } 60%, 64%, 70% { opacity: 1; filter: drop-shadow(0 0 4px #e0f2fe); } } @keyframes faFlap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.25); } } @keyframes faSwing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } } @keyframes faEar { 0%, 84%, 100% { transform: rotate(0); } 88% { transform: rotate(-9deg); } 92% { transform: rotate(5deg); } 96% { transform: rotate(-3deg); } } @keyframes faGl1 { 0%, 80%, 100% { transform: translate(0, 0); opacity: 0.85; } 84% { transform: translate(-3px, 1px); } 88% { transform: translate(3px, -1px); opacity: 1; } 92% { transform: translate(-1px, 0); } } @keyframes faGl2 { 0%, 80%, 100% { transform: translate(0, 0); } 84% { transform: translate(3px, -1px); } 88% { transform: translate(-2px, 1px); } 92% { transform: translate(1px, 1px); } } /* Баннеры из магазина (картинки) и свой баннер из файла */ .pf-banner-img { background-size: cover; background-position: center; background-color: var(--surface-2); } .bimg { background: #0b0b10; } .bimg-pic { display: block; width: 100%; height: auto; min-height: 150px; max-height: min(380px, 45vw); object-fit: cover; } .pf-banner.bimg { height: auto; } /* превью в магазине — фиксированного размера */ .si-ban.bimg, .sh-pv .sh-pv-ban.bimg { height: 62px; } .sh-pv .sh-pv-ban.bimg { height: 110px; } .si-ban .bimg-pic, .sh-pv-ban .bimg-pic { position: absolute; inset: 0; height: 100%; min-height: 0; max-height: none; } .bfx-pan .bimg-pic { animation: bPan 22s ease-in-out infinite alternate; } .bfx-shine::after, .bfx-sheen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%); background-size: 300% 100%; background-repeat: no-repeat; mix-blend-mode: soft-light; animation: bShine 4.8s ease-in-out infinite; } .bfx-shine::after { mix-blend-mode: overlay; } .bfx-sheen::after { background: linear-gradient(100deg, transparent 30%, rgba(190, 220, 255, 0.35) 50%, transparent 70%); background-size: 300% 100%; animation-duration: 9s; mix-blend-mode: screen; } .bimg-glow { position: absolute; inset: -20%; pointer-events: none; background: radial-gradient(40% 70% at 30% 50%, rgba(var(--bg-glow, 255, 255, 255), 0.35), transparent 70%); mix-blend-mode: screen; animation: bGlow 7s ease-in-out infinite alternate; } .bsp { position: absolute; pointer-events: none; transform: translate(-50%, -50%); background: #fff; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); filter: drop-shadow(0 0 3px #fff); animation: bTw 3s ease-in-out infinite; } @keyframes bPan { from { transform: scale(1.12) translateX(-3%); } to { transform: scale(1.12) translateX(3%); } } @keyframes bShine { 0% { background-position: 130% 0; } 70%, 100% { background-position: -30% 0; } } @keyframes bGlow { from { transform: translateX(-8%); opacity: 0.55; } to { transform: translateX(18%); opacity: 1; } } @keyframes bTw { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); } } /* Стиль ника: шрифты */ .ns { --c1: #fff; --c2: var(--brand-light); } .nf-unbounded { font-family: 'Unbounded', 'Nunito', sans-serif; font-weight: 800; letter-spacing: -0.01em; } .nf-russo { font-family: 'Russo One', 'Nunito', sans-serif; font-weight: 400; } .nf-comfortaa { font-family: 'Comfortaa', 'Nunito', sans-serif; font-weight: 700; } .nf-rubikmono { font-family: 'Rubik Mono One', 'Nunito', sans-serif; font-weight: 400; font-size: 0.86em; } .nf-caveat { font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.22em; line-height: 1; } .nf-marck { font-family: 'Marck Script', cursive; font-weight: 400; font-size: 1.15em; line-height: 1; } .nf-neucha { font-family: 'Neucha', cursive; font-weight: 400; font-size: 1.08em; } .nf-lobster { font-family: 'Lobster', cursive; font-weight: 400; font-size: 1.05em; } .nf-pacifico { font-family: 'Pacifico', cursive; font-weight: 400; font-size: 0.95em; line-height: 1.3; } .nf-pixel { font-family: 'Press Start 2P', monospace; font-weight: 400; font-size: 0.68em; line-height: 1.6; } .nf-rubikglitch { font-family: 'Rubik Glitch', 'Nunito', sans-serif; font-weight: 400; } /* Стиль ника: эффекты */ .nx-solid { color: var(--c1); } .nx-gradient, .nx-gummy, .nx-shimmer, .nx-prism { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .nx-gradient { background-image: linear-gradient(90deg, var(--c1), var(--c2)); } .nx-neon { color: color-mix(in srgb, var(--c1) 30%, #fff); text-shadow: 0 0 2px var(--c1), 0 0 8px var(--c1), 0 0 18px var(--c1); } .nx-toon { color: color-mix(in srgb, var(--c1) 75%, #fff); -webkit-text-stroke: 0.09em color-mix(in srgb, var(--c1) 40%, #000); paint-order: stroke fill; text-shadow: 0 0.09em 0 color-mix(in srgb, var(--c1) 30%, #000), 0 0.12em 0.1em rgba(0, 0, 0, 0.4); } .nx-pop { color: var(--c1); text-shadow: 0.06em 0.06em 0 var(--c2), 0.12em 0.12em 0 color-mix(in srgb, var(--c2) 50%, transparent); } .nx-gummy { background-image: linear-gradient(180deg, color-mix(in srgb, var(--c1) 35%, #fff) 0%, var(--c1) 55%, color-mix(in srgb, var(--c1) 65%, #000) 100%); filter: drop-shadow(0 0.07em 0 color-mix(in srgb, var(--c1) 40%, #000)); } .nx-shimmer { background-image: linear-gradient(100deg, var(--c1) 38%, #fff 50%, var(--c1) 62%); background-size: 250% 100%; animation: nsShimmer 2.6s linear infinite; } .nx-prism { background-image: linear-gradient(90deg, #ff5d5d, #ffcc4d, #57e389, #62a0ff, #c4a6ff, #ff8fb8, #ff5d5d); background-size: 200% 100%; animation: nsPrism 3.5s linear infinite; } .nx-glitch { color: var(--c1); animation: nsGlitch 2.4s steps(1) infinite; text-shadow: 0.05em 0 rgba(255, 45, 85, 0.75), -0.05em 0 rgba(34, 211, 238, 0.75); } @keyframes nsShimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } } @keyframes nsPrism { from { background-position: 0 0; } to { background-position: 200% 0; } } @keyframes nsGlitch { 0%, 82%, 100% { text-shadow: 0.05em 0 rgba(255, 45, 85, 0.75), -0.05em 0 rgba(34, 211, 238, 0.75); transform: none; } 85% { text-shadow: -0.1em 0 rgba(255, 45, 85, 0.9), 0.1em 0.02em rgba(34, 211, 238, 0.9); transform: translateX(1px); } 90% { text-shadow: 0.12em -0.02em rgba(255, 45, 85, 0.9), -0.08em 0 rgba(34, 211, 238, 0.9); transform: translateX(-1px); } } .nx-glitch { display: inline-block; } /* Фоны профиля для админов (живые: от основного фона сайта — свечение в цвете акцента) */ .pbg { --pg: var(--brand-rgb); position: relative; isolation: isolate; border-color: rgba(var(--pg), 0.55); animation: pbgGlow 3.2s ease-in-out infinite alternate; } .pbg::before, .pbg::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; } .pbg-aurora::before { background: radial-gradient(55% 95% at 12% 100%, rgba(var(--brand-rgb), 0.6), transparent 70%), radial-gradient(50% 90% at 88% 95%, rgba(139, 92, 246, 0.55), transparent 70%), radial-gradient(45% 80% at 50% 115%, rgba(34, 211, 238, 0.45), transparent 70%); background-size: 170% 170%; animation: pbgDrift 9s ease-in-out infinite alternate; } .pbg-stars { --pg: 165, 180, 252; } .pbg-stars::before { background: radial-gradient(80% 100% at 50% 130%, rgba(99, 102, 241, 0.5), transparent 70%), linear-gradient(180deg, transparent 40%, rgba(30, 27, 75, 0.55)); } .pbg-stars::after { background-image: radial-gradient(2px 2px at 10% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 70%, #fff, transparent), radial-gradient(2.4px 2.4px at 55% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 75% 80%, #c7d2fe, transparent), radial-gradient(2px 2px at 90% 25%, #fff, transparent), radial-gradient(1.3px 1.3px at 45% 90%, #fff, transparent), radial-gradient(1.8px 1.8px at 20% 95%, #e0e7ff, transparent), radial-gradient(1.6px 1.6px at 65% 15%, #fff, transparent), radial-gradient(1.4px 1.4px at 5% 60%, #fff, transparent), radial-gradient(2px 2px at 82% 52%, #fff, transparent); background-size: 260px 180px; animation: pbgFall 12s linear infinite, pbgTwinkle 2.4s ease-in-out infinite alternate; } .pbg-ember { --pg: 255, 122, 26; } .pbg-ember::before { background: radial-gradient(85% 80% at 50% 120%, rgba(255, 106, 0, 0.7), transparent 70%), radial-gradient(45% 60% at 8% 105%, rgba(255, 60, 30, 0.5), transparent 70%), radial-gradient(45% 60% at 92% 105%, rgba(255, 179, 71, 0.4), transparent 70%); animation: pbgPulse 2.6s ease-in-out infinite alternate; } .pbg-ember::after { background-image: radial-gradient(3px 3px at 12% 80%, #ffb347, transparent), radial-gradient(2.4px 2.4px at 34% 60%, #ff7a1a, transparent), radial-gradient(3.2px 3.2px at 58% 90%, #ffd27a, transparent), radial-gradient(2px 2px at 80% 70%, #ff7a1a, transparent), radial-gradient(2.6px 2.6px at 92% 95%, #ffb347, transparent), radial-gradient(2px 2px at 45% 40%, #ffd27a, transparent); background-size: 240px 200px; animation: pbgRise 5s linear infinite; } .pbg-royal { --pg: 250, 204, 21; } .pbg-royal::before { background: linear-gradient(120deg, rgba(126, 34, 206, 0.6), rgba(126, 34, 206, 0.1) 45%, rgba(250, 204, 21, 0.35) 75%, rgba(126, 34, 206, 0.5)); } .pbg-royal::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 160, 0.35) 48%, transparent 60%); background-size: 250% 100%; animation: nsShimmer 4s ease-in-out infinite; } .pbg-prism { --pg: 196, 166, 255; overflow: hidden; } .pbg-prism::before { inset: -60%; border-radius: 0; background: conic-gradient(from 0deg, rgba(255, 93, 93, 0.4), rgba(255, 204, 77, 0.4), rgba(87, 227, 137, 0.4), rgba(98, 160, 255, 0.4), rgba(196, 166, 255, 0.4), rgba(255, 93, 93, 0.4)); animation: spin 12s linear infinite; } .pbg-prism::after { background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.15), rgba(var(--surface-rgb), 0.55)); } /* ── ещё 8 фонов ── */ /* Серебро: серо-белый, мягкий светлый туман + серебряный блик */ .pbg-silver { --pg: 230, 230, 236; background-color: #2c2d31; } .pbg-silver::before { background: radial-gradient(70% 110% at 12% 115%, rgba(255, 255, 255, 0.5), transparent 70%), radial-gradient(60% 100% at 92% -5%, rgba(235, 237, 242, 0.42), transparent 70%), linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(160, 164, 172, 0.22)); background-size: 160% 160%; animation: pbgDrift 11s ease-in-out infinite alternate; } .pbg-silver::after { background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 255, 255, 0.06) 54%, transparent 62%); background-size: 260% 100%; animation: nsShimmer 5.5s ease-in-out infinite; } /* Кровавый: чёрно-красный, пульсирующее красное зарево и редкие красные искры */ .pbg-blood { --pg: 220, 30, 45; background-color: #0b0507; } .pbg-blood::before { background: radial-gradient(90% 85% at 50% 125%, rgba(200, 16, 32, 0.75), transparent 70%), radial-gradient(40% 70% at 0% 0%, rgba(120, 0, 12, 0.5), transparent 70%), radial-gradient(40% 70% at 100% 0%, rgba(120, 0, 12, 0.45), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1)); animation: pbgBeat 2.4s ease-in-out infinite; } .pbg-blood::after { background-image: radial-gradient(2px 2px at 14% 82%, #ff3b4a, transparent), radial-gradient(1.6px 1.6px at 38% 64%, #ff1f30, transparent), radial-gradient(2.4px 2.4px at 62% 92%, #ff5560, transparent), radial-gradient(1.5px 1.5px at 84% 74%, #ff1f30, transparent), radial-gradient(2px 2px at 92% 40%, #b0101e, transparent); background-size: 260px 220px; animation: pbgRise 8s linear infinite; } /* Глубина: синие волны */ .pbg-ocean { --pg: 56, 140, 255; } .pbg-ocean::before { background: radial-gradient(80% 100% at 20% 125%, rgba(14, 116, 230, 0.75), transparent 70%), radial-gradient(60% 90% at 85% 115%, rgba(34, 211, 238, 0.5), transparent 70%), linear-gradient(180deg, rgba(10, 40, 90, 0.35), rgba(8, 30, 80, 0.65)); background-size: 170% 170%; animation: pbgDrift 10s ease-in-out infinite alternate; } .pbg-ocean::after { background: repeating-linear-gradient(172deg, transparent 0 22px, rgba(150, 210, 255, 0.1) 22px 24px); background-size: 100% 200%; animation: pbgWaves 6s linear infinite; } /* Сакура: розовое сияние и падающие лепестки */ .pbg-sakura { --pg: 255, 150, 190; } .pbg-sakura::before { background: radial-gradient(60% 90% at 85% 0%, rgba(255, 170, 205, 0.45), transparent 70%), radial-gradient(60% 90% at 10% 110%, rgba(236, 72, 153, 0.35), transparent 70%); } .pbg-sakura::after { background-image: radial-gradient(3px 2px at 12% 20%, #ffc0d8, transparent), radial-gradient(2.6px 1.8px at 36% 55%, #ff9cc4, transparent), radial-gradient(3.2px 2.2px at 60% 30%, #ffd1e2, transparent), radial-gradient(2.4px 1.6px at 80% 70%, #ff9cc4, transparent), radial-gradient(3px 2px at 90% 15%, #ffc0d8, transparent), radial-gradient(2.2px 1.6px at 48% 88%, #ffd1e2, transparent); background-size: 300px 240px; animation: pbgPetals 14s linear infinite; } /* Матрица: зелёный «цифровой дождь» */ .pbg-matrix { --pg: 34, 197, 94; } .pbg-matrix::before { background: radial-gradient(80% 100% at 50% 120%, rgba(34, 197, 94, 0.35), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 20, 8, 0.4)); } .pbg-matrix::after { background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(74, 222, 128, 0.5) 22px 24px, transparent 24px 41px, rgba(134, 239, 172, 0.35) 41px 42px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent 80%); mask-image: linear-gradient(180deg, transparent, #000 40%, transparent 80%); -webkit-mask-size: 100% 70%; mask-size: 100% 70%; -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y; animation: pbgRain 2.6s linear infinite; } /* Галактика: фиолетово-синий космос с мерцанием */ .pbg-galaxy { --pg: 139, 92, 246; } .pbg-galaxy::before { background: radial-gradient(45% 80% at 30% 60%, rgba(139, 92, 246, 0.5), transparent 70%), radial-gradient(40% 70% at 75% 40%, rgba(59, 130, 246, 0.42), transparent 70%), radial-gradient(30% 50% at 55% 110%, rgba(236, 72, 153, 0.3), transparent 70%); background-size: 160% 160%; animation: pbgDrift 13s ease-in-out infinite alternate; } .pbg-galaxy::after { background-image: radial-gradient(1.6px 1.6px at 10% 20%, #fff, transparent), radial-gradient(1.2px 1.2px at 30% 60%, #e9d5ff, transparent), radial-gradient(2px 2px at 52% 30%, #fff, transparent), radial-gradient(1.3px 1.3px at 72% 75%, #c7d2fe, transparent), radial-gradient(1.8px 1.8px at 88% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 40% 88%, #fff, transparent); background-size: 220px 160px; animation: pbgTwinkle 2s ease-in-out infinite alternate; } /* Лёд: холодный голубой иней с бликом */ .pbg-frost { --pg: 125, 211, 252; } .pbg-frost::before { background: radial-gradient(60% 90% at 0% 0%, rgba(186, 230, 253, 0.4), transparent 70%), radial-gradient(60% 90% at 100% 110%, rgba(56, 189, 248, 0.38), transparent 70%), repeating-linear-gradient(60deg, transparent 0 34px, rgba(224, 242, 254, 0.05) 34px 35px), repeating-linear-gradient(-60deg, transparent 0 34px, rgba(224, 242, 254, 0.05) 34px 35px); } .pbg-frost::after { background: linear-gradient(115deg, transparent 40%, rgba(224, 242, 254, 0.3) 50%, transparent 60%); background-size: 260% 100%; animation: nsShimmer 6s ease-in-out infinite; } /* Закат: оранжево-розовое переливающееся небо */ .pbg-sunset { --pg: 255, 120, 80; } .pbg-sunset::before { background: linear-gradient(120deg, rgba(255, 94, 98, 0.45), rgba(255, 154, 61, 0.35), rgba(168, 85, 247, 0.4), rgba(255, 94, 98, 0.45)); background-size: 300% 300%; animation: pbgDrift 9s ease-in-out infinite alternate; } .pbg-sunset::after { background: radial-gradient(40% 70% at 70% 120%, rgba(255, 200, 90, 0.45), transparent 70%); animation: pbgPulse 3s ease-in-out infinite alternate; } @keyframes pbgBeat { 0%, 100% { opacity: 0.7; } 15% { opacity: 1; } 30% { opacity: 0.78; } 45% { opacity: 0.95; } } @keyframes pbgWaves { from { background-position: 0 0; } to { background-position: 0 -112px; } } @keyframes pbgPetals { from { background-position: 0 0; } to { background-position: -120px 240px; } } @keyframes pbgRain { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 0 233%; mask-position: 0 233%; } } @keyframes pbgGlow { from { box-shadow: 0 0 0 1px rgba(var(--pg), 0.25), 0 10px 40px -18px rgba(var(--pg), 0.5), var(--shadow); } to { box-shadow: 0 0 0 1px rgba(var(--pg), 0.5), 0 14px 60px -14px rgba(var(--pg), 0.85), var(--shadow); } } @keyframes pbgDrift { from { background-position: 0% 50%; } to { background-position: 100% 30%; } } @keyframes pbgFall { from { background-position: 0 0; } to { background-position: 40px 180px; } } @keyframes pbgTwinkle { from { opacity: 0.55; } to { opacity: 1; } } @keyframes pbgPulse { from { opacity: 0.75; } to { opacity: 1; } } @keyframes pbgRise { from { background-position: 0 0; } to { background-position: 16px -200px; } } /* Примерочная */ .sh-layout { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1.25rem; align-items: start; } .sh-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; } @media (max-width: 860px) { .sh-layout { grid-template-columns: minmax(0, 1fr); } .sh-side { position: static; } } .sh-pv .sh-pv-ban { height: 110px; border-radius: 18px 18px 0 0; } .sh-pv-name { font-weight: 900; font-size: 1.5rem; color: #fff; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.1em 0.05em; } .sh-wallet { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.9rem; border-radius: 16px; border: 1px solid rgba(var(--brand-rgb), 0.4); background: rgba(var(--brand-rgb), 0.08); color: var(--text); cursor: pointer; font: inherit; transition: border-color 0.15s, transform 0.15s; } .sh-wallet:hover { border-color: var(--brand); transform: translateY(-1px); } .sh-wallet span { font-size: 1.4rem; } .sh-wallet b { font-size: 1.35rem; font-weight: 900; color: #fff; } .sh-wallet small { color: var(--muted); font-size: 0.78rem; } .sh-free { margin-top: 0.9rem; padding: 0.7rem 1rem; border-radius: 14px; background: rgba(250, 204, 21, 0.08); border: 1px solid rgba(250, 204, 21, 0.3); color: #fde68a; font-weight: 700; font-size: 0.9rem; } .sh-cats { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.3rem; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 1rem; } .sh-cats button { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: 12px; border: 0; background: transparent; color: var(--text-2); font: inherit; font-weight: 800; font-size: 0.9rem; cursor: pointer; transition: background 0.15s, color 0.15s; } .sh-cats button:hover { color: #fff; background: rgba(255, 255, 255, 0.05); } .sh-cats button.on { background: rgba(var(--brand-rgb), 0.16); color: var(--brand-hi); } .sh-h { font-weight: 900; color: #fff; margin-bottom: 0.6rem; } .si-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.6rem; } .si-grid-wide { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .si { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.85rem 0.5rem 0.6rem; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); color: var(--text-soft); font: inherit; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; min-width: 0; } .si:hover:not(:disabled) { border-color: rgba(var(--brand-rgb), 0.6); transform: translateY(-2px); } .si.sel { border-color: var(--brand); background: rgba(var(--brand-rgb), 0.12); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.28); } .si:disabled { opacity: 0.5; cursor: not-allowed; } .si-pv { display: grid; place-items: center; min-height: 66px; width: 100%; } .si-name { font-weight: 800; font-size: 0.82rem; color: var(--text-hi); line-height: 1.2; } .si-foot { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; font-size: 0.72rem; } .si-anim { position: absolute; top: 0.4rem; right: 0.45rem; font-size: 0.8rem; } .si-ban { display: block; position: relative; overflow: hidden; width: 100%; height: 62px; border-radius: 10px; } .si-txt { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; font-size: 1.1rem; color: #fff; padding: 0.15em 0.1em; } .si-bg { display: grid; place-items: end start; width: 100%; height: 62px; border-radius: 10px; padding: 0.4rem 0.6rem; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; color: #fff; font-size: 0.85rem; } .sh-price { font-weight: 900; color: var(--brand-hi); white-space: nowrap; } .sh-own { color: #86efac; font-weight: 700; } .sh-lock, .sh-or { color: var(--muted); font-weight: 600; } .sh-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-bottom: 1rem; } .sh-upload .si { width: 170px; flex: none; } .sh-cart-h { font-weight: 900; color: #fff; margin-bottom: 0.4rem; } .sh-cart-list { display: flex; flex-direction: column; gap: 0.3rem; } .sh-cart-list li { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.88rem; color: var(--text); } .sh-cart-list small { color: var(--muted); } .sh-cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--line-strong); color: var(--text-2); } .sh-cart-total b { font-size: 1.15rem; font-weight: 900; color: var(--brand-hi); } .sh-short { margin-top: 0.5rem; font-size: 0.82rem; color: #fca5a5; } .sh-rights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.5rem; margin-bottom: 0.8rem; } .sh-right { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 12px; border: 1px solid var(--line); font-size: 0.86rem; } .sh-right b { flex: 1; color: var(--text-hi); } .sh-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.5rem; } .sh-cl { width: 4.2rem; font-size: 0.8rem; font-weight: 800; color: var(--text-2); } .sh-sw { position: relative; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--sw); cursor: pointer; display: grid; place-items: center; color: var(--muted); font-weight: 900; padding: 0; transition: transform 0.12s; } .sh-sw:hover { transform: scale(1.08); } .sh-sw.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--brand); } .sh-sw i { position: absolute; right: -4px; bottom: -4px; font-size: 0.7rem; font-style: normal; } .sh-sw-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .th-tag { align-self: flex-start; margin-top: 0.25rem; font-size: 0.72rem; font-weight: 900; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(var(--brand-rgb), 0.14); color: var(--brand-hi); } .th-tag.own { background: rgba(134, 239, 172, 0.12); color: #86efac; } .nfs-card h3 .th-tag { margin-left: 0.4rem; vertical-align: middle; } .pts-shop { display: flex; align-items: center; gap: 0.6rem; margin: 0.25rem 1.25rem 0.75rem; padding: 0.75rem 0.9rem; border-radius: 14px; border: 1px solid rgba(var(--brand-rgb), 0.45); background: rgba(var(--brand-rgb), 0.09); color: var(--text); font-size: 1.1rem; transition: border-color 0.15s, transform 0.15s; } .pts-shop:hover { border-color: var(--brand); transform: translateY(-1px); } .pts-shop b { font-size: 0.95rem; color: #fff; } .pts-shop small { flex: 1; font-size: 0.78rem; color: var(--muted); } .modal-xl { max-width: 76rem; } .shp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.5rem 1rem; } .shp-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--text); } .shp-row span { flex: 1; } .shp-row .input { width: 7rem; } @media (prefers-reduced-motion: reduce) { .avf-art *, .bimg *, .bimg::after, .bsp, .ns, .pbg::before, .pbg::after { animation: none !important; } } .si-ban .bsp { width: 6px !important; height: 6px !important; } /* Окно поста с картинками: размер по картинке, но не больше вкладки */ .modal-panel.modal-post { width: auto; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); overflow: hidden; } .pv-wrap { display: flex; max-height: calc(100vh - 2rem); } .pv-wrap .pv-stage { flex: none; min-height: 0; max-width: 100%; transition: width 0.25s ease, height 0.25s ease; } .pv-stage #pm-img { width: 100%; height: 100%; object-fit: contain; display: block; } .pv-info { min-width: 0; padding: 1.25rem; display: flex; flex-direction: column; overflow-y: auto; } .pv-wrap.side .pv-info { width: 380px; flex: none; height: var(--pv-h); } .pv-wrap.side .pv-stage { border-radius: 21px 0 0 21px; } .pv-wrap.stack { flex-direction: column; width: var(--pv-w); overflow-y: auto; } .pv-wrap.stack .pv-stage { border-radius: 21px 21px 0 0; } .pv-wrap.stack .pv-info { overflow: visible; } @media (max-width: 767px) { .modal-panel.modal-post { max-width: calc(100vw - 2rem); } } /* Комментарии в окне поста: без отдельной маленькой прокрутки — занимают всю высоту панели */ .pv-wrap.side .pv-info > * { flex: none; } .pv-wrap.side .pv-info > .pv-cm { flex: 1 1 auto; min-height: 200px; display: flex; flex-direction: column; } .pv-wrap.side .pv-cm > [data-comments] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .pv-wrap.side .pv-cm [data-cscroll] { flex: 1 1 auto; min-height: 0; max-height: none; } .pv-wrap.stack .pv-cm [data-cscroll] { max-height: none; overflow: visible; } .pv-cm .cm-img { max-height: 200px; } .pv-zoomable { cursor: zoom-in; } /* Фото на весь экран поверх поста */ .lb { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 3.5rem 1rem 1rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(18px) saturate(0.8); -webkit-backdrop-filter: blur(18px) saturate(0.8); animation: lbIn 0.22s ease both; cursor: zoom-out; } .lb.closing { animation: lbOut 0.2s ease both; } .lb-img { max-width: 100%; max-height: calc(100vh - 4.5rem); object-fit: contain; border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9); animation: lbImg 0.26s cubic-bezier(0.2, 0.9, 0.25, 1.05) both; cursor: default; } .lb-bar { position: absolute; top: 0.75rem; right: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .lb-num { font-size: 0.8rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; } .lb-btn { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1rem; font-weight: 800; cursor: pointer; } .lb-btn:hover { background: rgba(var(--brand-rgb), 0.85); } .lb-nav { position: fixed; } @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } } @keyframes lbOut { from { opacity: 1; } to { opacity: 0; } } @keyframes lbImg { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } } .pf-recent-static, .pf-recent-static:hover { cursor: default; background: rgba(255, 255, 255, 0.025); border-color: var(--line); } /* ═══════════════ Голосовые и звуки ═══════════════ */ .ap { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.75rem 0.5rem 0.5rem; border-radius: 18px; background: rgba(var(--brand-rgb), 0.08); border: 1px solid rgba(var(--brand-rgb), 0.22); max-width: 420px; min-width: 0; } .ap-play { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); cursor: pointer; transition: transform 0.12s, filter 0.15s; padding-left: 2px; } .ap.playing .ap-play { padding-left: 0; } .ap-play:hover { filter: brightness(1.1); transform: scale(1.05); } .ap-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .ap-name { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 800; color: var(--text-hi); min-width: 0; } .ap-name svg { flex: none; width: 14px; height: 14px; color: var(--brand-light); } .ap-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-wave { display: flex; align-items: center; gap: 2px; height: 28px; cursor: pointer; } .ap-wave i { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: rgba(var(--brand-rgb), 0.35); transition: background 0.12s; } .ap-wave i.on { background: var(--brand-light); } .ap-wave:hover i { background: rgba(var(--brand-rgb), 0.5); } .ap-wave:hover i.on { background: var(--brand-light); } .ap-time { flex: none; font-size: 0.75rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .ap-speed { flex: none; font-size: 0.72rem; font-weight: 900; padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid rgba(var(--brand-rgb), 0.35); background: transparent; color: var(--brand-light); cursor: pointer; } .ap-speed:hover { background: rgba(var(--brand-rgb), 0.15); } .fp-audio { margin: 0.15rem 0 0.4rem; } .cm-audio { margin-top: 0.35rem; } .cm-audio .ap { max-width: 320px; padding: 0.35rem 0.6rem 0.35rem 0.35rem; } .cm-audio .ap-play { width: 2.1rem; height: 2.1rem; } .cm-audio .ap-wave { height: 22px; } .ap-attach { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .ap-attach .ap { flex: 1; } .ap-x { flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; } .ap-x:hover { color: #fda4af; border-color: #fda4af; } .cm-mic svg { display: block; } .cm-attach .ap-attach { margin: 0 0 0.5rem; } /* запись */ .rec-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.5rem 0; padding: 0.5rem 0.6rem 0.5rem 0.9rem; border-radius: 16px; border: 1px solid rgba(244, 63, 94, 0.45); background: rgba(244, 63, 94, 0.08); animation: fadeIn 0.2s both; } .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #f43f5e; box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.6); animation: recPulse 1.2s ease-out infinite; } .rec-time { font-variant-numeric: tabular-nums; color: #fff; font-size: 0.95rem; } .rec-lvl { display: flex; align-items: center; gap: 3px; height: 22px; } .rec-lvl i { width: 4px; height: 20%; border-radius: 2px; background: #fb7185; transition: height 0.1s; } .rec-hint { flex: 1; font-size: 0.78rem; color: var(--muted); min-width: 8rem; } @keyframes recPulse { to { box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); } } @media (max-width: 640px) { .ap { max-width: 100%; } .rec-hint { display: none; } } button.composer-ic { border: 0; background: transparent; padding: 0; } /* открытое меню «⋯» у поста — поверх следующих постов */ .fp { position: relative; } .fp.menu-open, .fp:has(.fp-pop:not([hidden])) { z-index: 30; } /* Ответы на комментарии */ .cm-replies { margin: 0.5rem 0 0 2.25rem; padding-left: 0.75rem; border-left: 2px solid rgba(var(--brand-rgb), 0.25); display: flex; flex-direction: column; gap: 0.6rem; } .cm-to { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cm-to b { color: var(--brand-light); font-weight: 700; } .cm-reply-btn { color: var(--muted); font-weight: 700; } .cm-reply-btn:hover { color: var(--brand-light); } .cm-replying { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; padding: 0.4rem 0.5rem 0.4rem 0.75rem; border-radius: 10px; border-left: 3px solid var(--brand); background: rgba(var(--brand-rgb), 0.08); font-size: 0.82rem; color: var(--text); animation: fadeIn 0.2s both; } .cm-replying span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-replying small { margin-left: 0.4rem; color: var(--muted); } .cm-replying button { border: 0; background: transparent; color: var(--muted); cursor: pointer; } .cm-replying button:hover { color: #fda4af; } /* Громкость у аудиофайлов */ .ap-vol { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; flex: none; } .ap-vol-btn { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; } .ap-vol-btn:hover { color: var(--brand-light); background: rgba(var(--brand-rgb), 0.12); } .ap-vol-range { -webkit-appearance: none; appearance: none; width: 70px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-light) var(--v, 80%), rgba(var(--brand-rgb), 0.25) var(--v, 80%)); cursor: pointer; } .ap-vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--brand); } .ap-vol-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--brand); } @media (max-width: 640px) { .ap-vol-range { width: 52px; } } /* ═══════════ Опросы в постах ═══════════ */ .composer-ic.on { color: var(--brand-hi); background: rgba(var(--brand-rgb), 0.14); } .poll-draft { margin-top: 0.7rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); display: grid; gap: 0.5rem; } .poll-draft-h { display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; } .poll-draft-f { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; } .poll-in { width: 100%; padding: 0.5rem 0.7rem; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.18); color: inherit; font: inherit; font-size: 0.9rem; outline: none; } .poll-in:focus { border-color: var(--brand); } .poll-row { display: flex; gap: 0.4rem; align-items: center; } .poll-x { color: var(--muted); width: 28px; height: 28px; border-radius: 8px; flex: none; cursor: pointer; } .poll-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .poll-add { justify-self: start; color: var(--brand-hi); font-weight: 800; font-size: 0.85rem; cursor: pointer; } .poll-add:hover { text-decoration: underline; } .poll { margin-top: 0.7rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); } .poll-q { font-weight: 900; margin-bottom: 0.6rem; overflow-wrap: anywhere; } .poll-list { display: grid; gap: 0.4rem; } .poll-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; text-align: left; padding: 0.55rem 0.75rem; border-radius: 12px; border: 1.5px solid var(--line); background: rgba(0, 0, 0, 0.14); color: inherit; font: inherit; font-weight: 700; font-size: 0.92rem; overflow: hidden; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s; } div.poll-opt.res:not([data-act]) { cursor: default; } .poll-opt:not(.res):hover, .poll-opt.sel { border-color: var(--brand); background: rgba(var(--brand-rgb), 0.12); } .poll-opt:not(.res):active { transform: scale(0.99); } .poll-mark { width: 16px; height: 16px; flex: none; border: 2px solid var(--muted); border-radius: 50%; display: grid; place-items: center; } .poll-opt.multi .poll-mark { border-radius: 5px; } .poll-opt.sel .poll-mark { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 2px #1d1814; } .poll-opt:not(.res) { justify-content: flex-start; } .poll-t { position: relative; z-index: 1; flex: 1; min-width: 0; overflow-wrap: anywhere; } .poll-n { position: relative; z-index: 1; font-weight: 900; display: flex; align-items: baseline; gap: 0.35rem; flex: none; } .poll-n small { color: var(--muted); font-weight: 700; font-size: 0.72rem; } .poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(var(--brand-rgb), 0.2); border-radius: 0; transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .poll-opt.mine { border-color: var(--brand); } .poll-opt.lead .poll-bar { background: rgba(var(--brand-rgb), 0.38); } .poll-ck { color: var(--brand-hi); margin-right: 0.35rem; } .poll-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-top: 0.6rem; font-size: 0.78rem; color: var(--muted); } .poll-foot > span { flex: 1 1 auto; } .poll-foot a { color: var(--brand-hi); font-weight: 800; } .poll-link { color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 0.78rem; } .poll-link:hover { color: #fff; } /* ═══════════ Игровые аккаунты в профиле ═══════════ */ .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.7rem; } .game-tile { --gc: #a78bfa; position: relative; display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0.9rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gc) 35%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 16%, transparent), rgba(255, 255, 255, 0.02) 70%); overflow: hidden; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .game-tile::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--gc); } .game-tile:hover { transform: translateY(-2px); border-color: var(--gc); box-shadow: 0 8px 22px -10px var(--gc); } .game-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; background: color-mix(in srgb, var(--gc) 26%, #15110e); border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); } .game-kind { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gc); } .game-handle { display: block; font-weight: 900; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-go { margin-left: auto; color: var(--muted); font-weight: 900; transition: transform 0.15s, color 0.15s; } .game-tile:hover .game-go { color: var(--gc); transform: translate(2px, -2px); } .gm-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .gm-pick { position: relative; flex: 0 0 235px; width: 235px; } .gm-pick .gm-kind { width: 100%; flex: none; } .gm-kind-btn { display: flex; align-items: center; gap: 0.5rem; text-align: left; cursor: pointer; border-color: color-mix(in srgb, var(--gc, #a78bfa) 45%, var(--line)); } .gm-kind-btn b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text-hi); } .gm-kind-btn:hover, .gm-pick.open .gm-kind-btn { border-color: var(--gc, var(--brand)); } .gm-ic { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 8px; display: grid; place-items: center; font-size: 1rem; background: color-mix(in srgb, var(--gc, #a78bfa) 22%, transparent); } .gm-caret { color: var(--muted); font-size: 0.8rem; transition: transform 0.15s; } .gm-pick.open .gm-caret { transform: rotate(180deg); } .gm-menu { position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); width: 340px; max-width: calc(100vw - 3rem); display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; padding: 0.4rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8); animation: fadeUp 0.15s both; } .gm-opt { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-hi); font-weight: 700; font-size: 0.86rem; text-align: left; cursor: pointer; position: relative; min-width: 0; } .gm-opt:hover { background: rgba(255, 255, 255, 0.06); border-color: color-mix(in srgb, var(--gc) 50%, transparent); } .gm-opt.on { background: color-mix(in srgb, var(--gc) 16%, transparent); border-color: var(--gc); } .gm-opt small { margin-left: auto; font-size: 0.65rem; font-weight: 600; color: var(--muted); white-space: nowrap; } select.poll-in { color-scheme: dark; } .gm-val { flex: 1 1 200px; min-width: 0; width: auto; } .gm-reg { flex: 0 0 90px; width: 90px; } .gm-title { flex: 1 1 100%; } @media (max-width: 560px) { .gm-pick { flex: 1 1 100%; width: 100%; } .gm-menu { width: 100%; max-width: none; } } /* ═══════════ Статистика стрима ═══════════ */ .ss-svg { width: 100%; height: auto; display: block; margin-top: 0.6rem; } .ss-grid { stroke: var(--line); stroke-dasharray: 3 4; } .ss-ax { fill: var(--muted); font-size: 11px; font-weight: 700; } .ss-dot { cursor: pointer; } .ss-dot:hover circle:nth-child(2) { r: 5.5; } .ss-trend { font-size: 0.8rem; font-weight: 800; padding: 0.15rem 0.6rem; border-radius: 999px; } .ss-trend.up { color: #86efac; background: rgba(74, 222, 128, 0.12); } .ss-trend.down { color: #fda4af; background: rgba(251, 113, 133, 0.12); } .ss-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; align-items: end; } .ss-wd-col { display: grid; justify-items: center; gap: 0.2rem; text-align: center; font-size: 0.75rem; color: var(--muted); } .ss-wd-col b { color: #fff; font-size: 0.82rem; } .ss-wd-n { font-weight: 900; color: #fff; min-height: 1.1em; } .ss-wd-bars { position: relative; width: 100%; height: 120px; display: flex; align-items: flex-end; justify-content: center; } .ss-wd-bars i { position: absolute; bottom: 0; width: 70%; border-radius: 8px 8px 3px 3px; } .ss-wd-bars .pk { background: var(--viz-2); opacity: 0.35; } .ss-wd-bars .av { background: var(--viz-brand); } .ss-wd-col.best b { color: var(--brand-hi); } .ss-heat { display: grid; gap: 3px; font-size: 0.68rem; color: var(--muted); } .ss-heat-row, .ss-heat-hrs { display: grid; grid-template-columns: 26px repeat(24, 1fr); gap: 2px; align-items: center; } .ss-heat-hrs span { text-align: center; } .ss-heat-row i { display: block; aspect-ratio: 1; border-radius: 4px; background: rgba(var(--brand-rgb), var(--a)); border: 1px solid rgba(255, 255, 255, 0.05); } .ss-heat-row b { color: #fff; font-size: 0.7rem; } .ss-rank { width: 1.4rem; text-align: center; color: var(--brand-hi); } .ss-kinds { display: grid; gap: 0.35rem; margin-bottom: 0.4rem; } .ss-kind { position: relative; display: grid; grid-template-columns: 1fr auto auto; gap: 0.6rem; align-items: center; padding: 0.35rem 0.6rem; border-radius: 10px; overflow: hidden; font-size: 0.82rem; border: 1px solid var(--line); } .ss-kind i { position: absolute; inset: 0 auto 0 0; background: rgba(var(--brand-rgb), 0.18); } .ss-kind > * { position: relative; } .ss-kind small { color: var(--muted); } .ss-rate { display: inline-block; width: 60px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); vertical-align: middle; overflow: hidden; } .ss-rate i { display: block; height: 100%; background: var(--brand); } .ss-row { cursor: pointer; } .ss-row:hover td { background: rgba(var(--brand-rgb), 0.07); } /* ═══════════ Достижения ═══════════ */ .ach-badge { --ac: #b0763a; flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--ac) 55%, #fff 10%), color-mix(in srgb, var(--ac) 70%, #000)); border: 2px solid color-mix(in srgb, var(--ac) 75%, #fff 10%); box-shadow: 0 4px 12px -4px var(--ac); } .ach-badge.tier-bronze { --ac: #b0763a; } .ach-badge.tier-silver { --ac: #9aa7b5; } .ach-badge.tier-gold { --ac: #e8b92c; } .ach-badge.tier-diamond { --ac: #4cc9f0; } .ach-badge.tier-custom { --ac: #c084fc; } .ach-badge.locked { filter: grayscale(1) brightness(0.55); box-shadow: none; opacity: 0.7; } .ach-prog { display: flex; align-items: center; gap: 0.8rem; } .ach-prog b { font-weight: 900; color: #fff; font-size: 1.2rem; } .ach-prog span { color: var(--muted); font-size: 0.85rem; } .ach-bar { flex: 1; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .ach-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brand), #ffc83d); transition: width 0.6s; } .ach-bar.sm { height: 6px; margin: 0.4rem 0 0.1rem; } .ach-recent { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; } .ach-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.8rem 0.25rem 0.3rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); font-weight: 800; font-size: 0.82rem; color: #fff; cursor: pointer; } .ach-chip:hover { border-color: var(--brand); } .ach-chip .ach-badge { width: 30px; height: 30px; border-radius: 10px; font-size: 1rem; border-width: 1.5px; } .ach-list { display: grid; gap: 0.5rem; max-height: 60vh; overflow-y: auto; padding-right: 0.3rem; } .ach-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0.8rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); } .ach-item.on { border-color: rgba(var(--brand-rgb), 0.4); background: rgba(var(--brand-rgb), 0.07); } .ach-item.off .ach-name { color: var(--muted); } .ach-item.limited.on { border-color: #c084fc88; background: rgba(192, 132, 252, 0.08); } .ach-name { font-weight: 900; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .ach-desc { font-size: 0.82rem; color: var(--muted); } .ach-sub { font-size: 0.74rem; color: var(--muted); margin-top: 0.15rem; } .ach-sub b { color: #e9d5ff; } .ach-tag { font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 900; padding: 0.1rem 0.4rem; border-radius: 6px; background: rgba(192, 132, 252, 0.18); color: #e9d5ff; } .ach-rar { flex: none; font-size: 0.75rem; font-weight: 800; color: var(--muted); } .ad-holders { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } .ad-holder { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.3rem 0.15rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 0.78rem; } .ad-holder button { width: 20px; height: 20px; border-radius: 50%; color: var(--muted); cursor: pointer; } .ad-holder button:hover { background: rgba(251, 113, 133, 0.25); color: #fff; } /* ═══════════ Клипы ═══════════ */ .cl-sep { width: 1px; background: var(--line); margin: 0 0.2rem; } .cl-hero { position: relative; border-radius: 22px; overflow: hidden; cursor: pointer; border: 1px solid var(--line); aspect-ratio: 16 / 7; background: #000; } @media (max-width: 640px) { .cl-hero { aspect-ratio: 16 / 10; } } .cl-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .cl-hero:hover img { transform: scale(1.04); } .cl-hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 7, 5, 0.92), rgba(10, 7, 5, 0.1) 60%); } .cl-hero-info { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1rem; } .cl-hero-info h2 { font-weight: 900; font-size: clamp(1.1rem, 2.6vw, 1.7rem); color: #fff; line-height: 1.15; margin: 0.3rem 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .cl-hero-info p { color: #e8dccf; font-size: 0.85rem; font-weight: 700; } .cl-crown { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--brand); color: #1d1814; font-weight: 900; font-size: 0.75rem; } .cl-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--brand-rgb), 0.92); color: #1d1814; font-size: 1.5rem; padding-left: 4px; box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.7); transition: transform 0.2s; } .cl-hero:hover .cl-play, .cl-card:hover .cl-play { transform: translate(-50%, -50%) scale(1.1); } .cl-play.sm { width: 40px; height: 40px; font-size: 1rem; opacity: 0; transition: opacity 0.2s, transform 0.2s; } .cl-card:hover .cl-play.sm { opacity: 1; } .cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; } .cl-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: transform 0.15s, border-color 0.15s; } .cl-card:hover { transform: translateY(-3px); border-color: var(--brand); } .cl-th { position: relative; aspect-ratio: 16 / 9; background: #000; } .cl-th img { width: 100%; height: 100%; object-fit: cover; } .cl-n { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0 0.5rem; border-radius: 8px; background: rgba(0, 0, 0, 0.7); color: var(--brand-hi); font-weight: 900; font-size: 0.8rem; } .cl-dur { position: absolute; bottom: 0.5rem; right: 0.5rem; padding: 0 0.4rem; border-radius: 6px; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 0.72rem; font-weight: 800; } .cl-meta { display: grid; gap: 0.15rem; padding: 0.65rem 0.8rem 0.8rem; font-size: 0.78rem; color: var(--muted); } .cl-title { color: #fff; font-size: 0.92rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Вкладки: на широких экранах переносим в 2 строки вместо обрезания («Админ-панель» не уезжает за край) */ @media (min-width: 900px) { #tabs { flex-wrap: wrap !important; overflow: visible !important; row-gap: 0.35rem; } } .ach-rw { display: inline-block; margin-top: 0.25rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.74rem; font-weight: 900; color: #fde68a; background: rgba(250, 204, 21, 0.12); border: 1px solid rgba(250, 204, 21, 0.3); } .ach-rw.got { color: #86efac; background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.3); } /* Лента на телефоне: без «дёрганья» прокрутки */ .fp-one img { object-fit: contain; } @media (hover: none) { html { scroll-behavior: auto; } } /* Плашка «вышла новая версия» */ #update-bar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0.7rem 0.55rem 1.1rem; border-radius: 999px; background: #261f19; border: 1px solid rgba(var(--brand-rgb), 0.5); box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.7); color: #fff; font-weight: 800; font-size: 0.9rem; animation: fadeUp 0.35s both; } .info-btn { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #d4d4d8; font: italic 700 12px/1 Georgia, serif; cursor: pointer; vertical-align: middle; transition: .15s; } .info-btn:hover { background: var(--brand, #a78bfa); color: #fff; border-color: transparent; transform: scale(1.1); } .lvl-info-now { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 14px; color: #d4d4d8; margin-bottom: 12px; } .lvl-info-list { display: grid; gap: 10px; padding-left: 20px; list-style: decimal; font-size: 14px; color: #d4d4d8; } .lvl-info-list b { color: #fff; } .lvl-info-tbl { width: 100%; font-size: 13px; border-collapse: collapse; } .lvl-info-tbl td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.06); } .songs-list { display: grid; gap: 12px; } .song-item { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); display: grid; gap: 8px; } .song-name { font-weight: 800; color: #fff; word-break: break-word; } .sg-st { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: rgba(255,255,255,.08); } .sg-pending { color: #fcd34d; } .sg-ok { color: #86efac; } .sg-bad { color: #fda4af; } .sg-form { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); } /* ───── Игры: слоты и 21 ───── */ .ar-wallet { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line-strong, rgba(255,255,255,.14)); font-size: 18px; } .ar-wallet b { font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; } .ar-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } @media (max-width: 820px) { .ar-grid { grid-template-columns: 1fr; } } .ar-bet { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .ar-bet-row { display: flex; gap: 8px; align-items: center; } .ar-bet-in { text-align: center; font-weight: 900; font-size: 20px; flex: 1; min-width: 0; } .ar-step { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; } .ar-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ar-bet button:disabled, .bj-actions button:disabled, .sl-spin:disabled { opacity: .5; cursor: not-allowed; } .ar-pay summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: #e4e4e7; } .ar-pay { padding: 0 0 12px; } .ar-pay > *:not(summary) { margin-left: 16px; margin-right: 16px; } .ar-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 6px; font-size: 14px; } .ar-pay-grid > div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.04); } .ar-pay-s { letter-spacing: 1px; } .ar-pay-grid b { color: #fcd34d; } /* слоты */ .sl-machine { padding: 18px; display: grid; gap: 14px; background: radial-gradient(120% 100% at 50% 0%, rgba(255,138,31,.16), transparent 60%), var(--surface, #1a1512); } .sl-top { text-align: center; font-size: 14px; letter-spacing: .18em; color: #fcd34d; text-shadow: 0 0 14px rgba(252,211,77,.5); } .sl-window { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; border-radius: 20px; background: #0c0a09; border: 2px solid rgba(252,211,77,.35); box-shadow: inset 0 0 30px rgba(0,0,0,.9), 0 0 0 4px rgba(255,255,255,.03); transition: box-shadow .3s; } .sl-window.win { animation: slWin .6s ease 3; border-color: #fcd34d; } @keyframes slWin { 50% { box-shadow: inset 0 0 30px rgba(0,0,0,.9), 0 0 40px 6px rgba(252,211,77,.7); } } .sl-reel { height: 264px; overflow: hidden; border-radius: 12px; background: linear-gradient(#18130f, #241b14 50%, #18130f); position: relative; } .sl-reel.spin .sl-strip { filter: blur(1.6px); } .sl-strip { will-change: transform; } .sl-cell { height: 88px; display: grid; place-items: center; font-size: 52px; line-height: 1; user-select: none; } .sl-line { position: absolute; left: 6px; right: 6px; top: 50%; height: 92px; transform: translateY(-50%); border-top: 2px solid rgba(252,211,77,.55); border-bottom: 2px solid rgba(252,211,77,.55); pointer-events: none; z-index: 2; border-radius: 6px; background: rgba(252,211,77,.05); } .sl-shade { position: absolute; inset: 12px; pointer-events: none; z-index: 3; border-radius: 12px; background: linear-gradient(rgba(12,10,9,.85), transparent 28%, transparent 72%, rgba(12,10,9,.85)); } .sl-msg { text-align: center; min-height: 28px; font-weight: 700; color: #d4d4d8; } .sl-msg.win { color: #86efac; } .sl-msg.lose { color: #a1a1aa; } .sl-msg.jack { color: #fcd34d; font-size: 20px; animation: slJack .5s ease infinite alternate; } @keyframes slJack { to { transform: scale(1.06); text-shadow: 0 0 18px rgba(252,211,77,.8); } } .sl-spin { width: 100%; padding: 16px; font-size: 20px; font-weight: 900; letter-spacing: .12em; } @media (max-width: 480px) { .sl-reel { height: 228px; } .sl-cell { height: 76px; font-size: 44px; } } .ar-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 10; pointer-events: none; } .ar-burst i { position: absolute; left: 0; top: 0; font-style: normal; font-size: 22px; animation: arCoin 1.3s cubic-bezier(.2,.7,.3,1) var(--d) both; } @keyframes arCoin { 0% { transform: translate(0,0) scale(.4); opacity: 0; } 15% { opacity: 1; } 55% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); } 100% { transform: translate(var(--x), calc(var(--y) + 260px)) rotate(var(--r)) scale(.9); opacity: 0; } } .sl-window, .bj-table { position: relative; } /* 21 */ .bj-table { padding: 18px; min-height: 380px; background: radial-gradient(120% 100% at 50% 0%, rgba(34,197,94,.18), transparent 70%), #0f1a14; border-color: rgba(34,197,94,.25); display: grid; align-content: space-between; gap: 10px; } .bj-empty { display: grid; place-items: center; text-align: center; min-height: 330px; font-size: 44px; line-height: 1.6; color: #86efac; } .bj-empty { font-size: 16px; } .bj-empty:first-line { font-size: 52px; } .bj-row { display: grid; gap: 8px; } .bj-who { font-weight: 800; color: #d4d4d8; display: flex; gap: 8px; align-items: center; } .bj-tot { padding: 1px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: 14px; } .bj-hand { display: flex; flex-wrap: wrap; min-height: 96px; padding-left: 4px; } .bj-card { position: relative; width: 66px; height: 94px; margin-left: -18px; border-radius: 10px; background: #fafaf9; color: #18181b; box-shadow: 0 4px 12px rgba(0,0,0,.5); display: grid; place-items: center; font-weight: 900; } .bj-card:first-child { margin-left: 0; } .bj-card b { position: absolute; left: 7px; top: 5px; font-size: 18px; line-height: 1; } .bj-card span { position: absolute; left: 8px; top: 25px; font-size: 16px; line-height: 1; } .bj-card em { font-style: normal; font-size: 34px; } .bj-card.red { color: #dc2626; } .bj-card.back { background: repeating-linear-gradient(45deg, #7c3aed 0 6px, #5b21b6 6px 12px); border: 3px solid #fafaf9; } .bj-card.deal { animation: bjDeal .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--k, 0) * 220ms); } @keyframes bjDeal { from { transform: translate(120px, -140px) rotate(25deg) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } } .bj-mid { text-align: center; min-height: 38px; display: grid; place-items: center; } .bj-bet-pill { padding: 4px 14px; border-radius: 999px; background: rgba(0,0,0,.35); color: #d4d4d8; font-size: 14px; } .bj-res { padding: 8px 18px; border-radius: 14px; font-weight: 900; font-size: 18px; background: rgba(255,255,255,.1); animation: bjRes .4s cubic-bezier(.3,1.5,.5,1) both; } .bj-res.win { background: rgba(34,197,94,.25); color: #bbf7d0; } .bj-res.lose { background: rgba(244,63,94,.2); color: #fecdd3; } @keyframes bjRes { from { transform: scale(.6); opacity: 0; } } .bj-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .bj-actions .btn { padding: 14px 8px; font-weight: 800; } @media (max-width: 480px) { .bj-card { width: 56px; height: 80px; margin-left: -20px; } .bj-card em { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { .bj-card.deal, .sl-window.win { animation: none; } } /* ───── Ивенты (баннер для всех) ───── */ #event-bar:empty { display: none; } #event-bar { display: grid; gap: 10px; padding-top: 12px; } .ev-card { --ec: #ff8a1f; position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 40px 12px 14px; border-radius: 18px; background: linear-gradient(100deg, color-mix(in srgb, var(--ec) 24%, #14110e), #14110e 70%); border: 1px solid color-mix(in srgb, var(--ec) 55%, transparent); box-shadow: 0 8px 30px -14px var(--ec); animation: evIn .5s cubic-bezier(.2,.9,.25,1.1) both; overflow: hidden; } .ev-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%); transform: translateX(-100%); animation: evShine 4.5s ease-in-out 1s infinite; pointer-events: none; } @keyframes evShine { 60%, 100% { transform: translateX(100%); } } @keyframes evIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } } .ev-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; font-size: 26px; border-radius: 14px; background: color-mix(in srgb, var(--ec) 28%, transparent); } .ev-main { min-width: 0; flex: 1; } .ev-title { font-weight: 900; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ev-live { font-size: 10px; letter-spacing: .12em; padding: 2px 7px; border-radius: 999px; background: #ef4444; color: #fff; animation: evPulse 1.4s ease infinite; } .ev-live.soon { background: color-mix(in srgb, var(--ec) 70%, #000); animation: none; } @keyframes evPulse { 50% { opacity: .55; } } .ev-mult { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ec) 35%, transparent); color: #fff; border: 1px solid var(--ec); } .ev-text { font-size: 14px; color: #d4d4d8; margin-top: 2px; word-break: break-word; } .ev-side { display: grid; gap: 6px; justify-items: end; text-align: right; } .ev-left { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ec); font-size: 14px; white-space: nowrap; } .ev-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .ev-done { font-size: 13px; color: #86efac; font-weight: 700; } .ev-x { position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: #a1a1aa; cursor: pointer; font-size: 14px; } .ev-x:hover { background: rgba(255,255,255,.1); color: #fff; } @media (max-width: 640px) { .ev-card { flex-wrap: wrap; padding-right: 36px; } .ev-side { width: 100%; grid-auto-flow: column; justify-content: space-between; justify-items: start; align-items: center; } } @media (prefers-reduced-motion: reduce) { .ev-card, .ev-card::before, .ev-live { animation: none; } } /* ───── Скример ───── */ .scare { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: rgba(0,0,0,.45); animation: scareIn .12s ease both; } .scare.out { opacity: 0; transition: opacity .25s; } .scare::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(160,0,0,.55)); animation: scareFlash .9s ease-out both; } .scare canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: scareShake .12s linear infinite; } @keyframes scareIn { from { opacity: 0; } } @keyframes scareFlash { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes scareShake { 0% { transform: translate(0,0); } 25% { transform: translate(-6px,4px); } 50% { transform: translate(5px,-5px); } 75% { transform: translate(-4px,-3px); } 100% { transform: translate(0,0); } } .scare-toggle { margin-left: 14px; background: none; border: 0; color: inherit; opacity: .55; cursor: pointer; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; } .scare-toggle:hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { .scare canvas, .scare::before { animation: none; } } /* Дуэли в 21 */ #duel-pop { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70; width: min(92vw, 420px); padding: 14px 16px; border-radius: 16px; background: rgba(24,24,27,.96); border: 1px solid rgba(249,115,22,.55); box-shadow: 0 12px 40px rgba(0,0,0,.6); animation: dpIn .35s cubic-bezier(.2,.9,.3,1.2); } @keyframes dpIn { from { opacity: 0; transform: translate(-50%, 24px); } } #duel-pop .dp-t { color: #fff; font-size: 15px; } #duel-pop .dp-s { color: #a1a1aa; font-size: 13px; margin-top: 2px; } #duel-pop .dp-b { display: flex; gap: 8px; margin-top: 10px; } .dl-inv { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: #e4e4e7; } .dl-btns { display: inline-flex; gap: 6px; } @media (prefers-reduced-motion: reduce) { #duel-pop { animation: none; } } .dl-sugg { min-width: 0; padding: 0.35rem; } .dl-sugg .srch-item { padding: 0.45rem 0.6rem; } .dl-sugg .srch-item:hover { background: rgba(var(--brand-rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.3); } /* Шоу «Дождь из тако» */ .taco-show { position: fixed; inset: 0; z-index: 55; pointer-events: none; animation: scareIn .4s ease both; } .taco-show.out { opacity: 0; transition: opacity .6s; } .taco-show > canvas:first-child { position: absolute; inset: 0; width: 100%; height: 100%; } .taco-actor { position: absolute; bottom: 0; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); } .taco-actor.side-left { left: 10px; transform-origin: 50% 100%; } .taco-actor.side-right { right: 10px; transform-origin: 50% 100%; } .taco-actor.side-center { left: 50%; margin-left: calc(var(--w, 260px) / -2); transform-origin: 50% 100%; } .taco-actor.enter { animation: tacoIn .7s cubic-bezier(.2,.9,.3,1.25) both; } .taco-actor.leave { animation: tacoOut .55s ease-in both; } .taco-show.ending .taco-actor { opacity: 0; transition: opacity 1s; } @keyframes tacoIn { from { transform: translateY(110%) scale(.9); opacity: 0; } } @keyframes tacoOut { to { transform: translateY(110%); opacity: 0; } } .taco-ctl { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.55); backdrop-filter: blur(6px); color: #fff; } .taco-ctl .mix-range { width: 90px; height: 22px; } .taco-mx, .taco-off { background: none; border: 0; color: inherit; cursor: pointer; font-size: 16px; padding: 0 3px; opacity: .85; } .taco-mx:hover, .taco-off:hover { opacity: 1; } @media (max-width: 640px) { .taco-ctl { top: auto; bottom: 14px; right: 50%; transform: translateX(50%); } .taco-ctl .mix-range { width: 70px; } } /* Микшер громкости */ .mix-row { display: flex; align-items: center; gap: 12px; } .mix-ic { font-size: 22px; width: 28px; text-align: center; } .mix-range { width: 100%; accent-color: var(--brand, #ff8a1f); height: 28px; cursor: pointer; } /* Онлайн сайта */ .an-online { padding: 16px 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(34,197,94,.09), rgba(255,255,255,.03)); border: 1px solid rgba(34,197,94,.28); } .an-online-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .an-live { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #bbf7d0; } .an-live i { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: anPulse 1.8s infinite; } @keyframes anPulse { 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } .an-online-n { font-size: 34px; line-height: 1; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; } .an-online-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .an-ou { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #e4e4e7; font-size: 13px; text-decoration: none; } .an-ou:hover { background: rgba(255,255,255,.12); } @media (prefers-reduced-motion: reduce) { .an-live i { animation: none; } } /* Лайки комментариев */ .cm-like { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 700; padding: 0 2px; } .cm-like b { font-weight: 700; min-width: 0; } .cm-like:hover { color: #fb7185; } .cm-like.on { color: #fb7185; } .cm-like.pop .cm-heart { animation: cmPop .35s cubic-bezier(.2,.9,.3,1.6); } @keyframes cmPop { 0% { transform: scale(1); } 45% { transform: scale(1.5); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .cm-like.pop .cm-heart { animation: none; } } .cm-actions { display: flex; align-items: center; gap: 18px; margin-top: 6px; font-size: 13px; } .cm-actions .cm-like { font-size: 14px; } .cm-actions .cm-heart { font-size: 17px; line-height: 1; } /* Стикеры в комментариях */ .cm-sticker { display: block; width: 112px; height: 112px; margin-top: 6px; border-radius: 16px; object-fit: cover; background: #0f0f0f; box-shadow: 0 2px 10px rgba(0,0,0,.45); } .cm-stk-pop { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; margin-bottom: 8px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line-strong, rgba(255,255,255,.14)); max-height: 190px; overflow-y: auto; animation: popIn .16s ease both; } .cm-stk-pop[hidden] { display: none; } .cm-stk { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: #0f0f0f; cursor: pointer; aspect-ratio: 1; transition: transform .12s, border-color .12s; } .cm-stk img { width: 100%; height: 100%; object-fit: cover; display: block; } .cm-stk:hover { transform: scale(1.07); border-color: var(--brand, #ff8a1f); } .cm-stk-btn.on { background: rgba(var(--brand-rgb), .22); } /* Форма комментария: широкое поле ввода, стикеры внутри строки справа, кнопки ниже */ .cm-inwrap { position: relative; width: 100%; } .cm-inwrap .cm-input { width: 100%; min-height: 48px; padding-right: 52px; font-size: 15px; } .cm-stk-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; font-size: 22px; cursor: pointer; filter: grayscale(.2); transition: background .12s, transform .12s; } .cm-stk-btn:hover { background: rgba(255,255,255,.08); transform: translateY(-50%) scale(1.08); } .cm-stk-btn.on { background: rgba(var(--brand-rgb), .25); } .cm-inwrap.has-text .cm-stk-btn { display: none; } .cm-inwrap.has-text .cm-input { padding-right: 14px; } .cm-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; } /* Окно поста: у списка комментариев нет своей маленькой прокрутки — прокручивается вся правая панель, а поле ответа приклеено к низу панели и всегда на виду */ .modal-panel [data-cscroll] { max-height: none !important; overflow: visible !important; padding-right: 0 !important; } .pv-wrap.side .pv-cm [data-cscroll] { flex: none !important; } .modal-panel [data-comments] form { position: sticky; bottom: 0; z-index: 3; background: var(--surface); margin-top: auto; padding: 12px 0 4px; border-top: 1px solid var(--line); } .pv-wrap.side .pv-info.space-y-4 > * + * { margin-top: .75rem; } .pv-acts { gap: .5rem; } .pv-acts .btn { padding: .42rem .8rem; font-size: .82rem; border-radius: 12px; } /* форма доходит до самого низа панели, чтобы под ней не просвечивали комментарии */ .pv-wrap.side .pv-cm form { bottom: -1.25rem; padding-bottom: calc(1.25rem + 4px); } .modal-panel > .p-6 [data-comments] form { bottom: -1.5rem; padding-bottom: calc(1.5rem + 4px); } #notify-btn.on { border-color: rgba(34,197,94,.5); color: #bbf7d0; } /* Рейтинг: аккуратная обводка вокруг тех, кто сейчас общается в чате стрима */ .lb-live { position: relative; box-shadow: inset 0 0 0 1.5px rgb(var(--lb-live, 74 222 128) / 0.75), 0 0 12px rgb(var(--lb-live, 74 222 128) / 0.18); border-radius: 0.6rem; animation: lbLive 2.6s ease-in-out infinite; } .card.lb-live { border-color: rgb(var(--lb-live, 74 222 128) / 0.8) !important; } .lb-live-key { display: inline-block; width: 0.9rem; height: 0.6rem; vertical-align: -1px; border-radius: 0.25rem; box-shadow: inset 0 0 0 1.5px rgb(74 222 128 / 0.85); } @keyframes lbLive { 0%, 100% { box-shadow: inset 0 0 0 1.5px rgb(var(--lb-live, 74 222 128) / 0.7), 0 0 8px rgb(var(--lb-live, 74 222 128) / 0.12); } 50% { box-shadow: inset 0 0 0 1.5px rgb(var(--lb-live, 74 222 128) / 0.95), 0 0 16px rgb(var(--lb-live, 74 222 128) / 0.28); } } @media (prefers-reduced-motion: reduce) { .lb-live { animation: none; } } /* ═══ Аимка, Гео-бой, рейтинги игр ═══ */ #pvp-pop { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70; width: min(92vw, 420px); padding: 14px 16px; border-radius: 16px; background: rgba(24,24,27,.96); border: 1px solid rgba(var(--brand-rgb), .55); box-shadow: 0 12px 40px rgba(0,0,0,.6); animation: dpIn .35s cubic-bezier(.2,.9,.3,1.2); } #pvp-pop .dp-t { color: #fff; font-size: 15px; } #pvp-pop .dp-b { display: flex; gap: 8px; margin-top: 10px; } #duel-pop ~ #pvp-pop, #pvp-pop ~ #duel-pop { bottom: 150px; } .pv-hero { background: linear-gradient(160deg, rgba(var(--brand-rgb), .12), transparent 60%); } .pv-wait { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px dashed var(--line-strong); } .pv-wait > span:nth-child(2) { flex: 1; font-weight: 700; color: #fff; } .pv-wait small { display: block; font-weight: 500; color: var(--muted); font-size: .75rem; } .pv-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--brand); animation: pvSpin .8s linear infinite; flex: none; } @keyframes pvSpin { to { transform: rotate(360deg); } } .pv-top { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .pv-board { display: flex; flex-direction: column; gap: 2px; } .pv-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: inherit; transition: background .15s; } .pv-row:hover { background: rgba(255,255,255,.05); } .pv-row.me { background: rgba(var(--brand-rgb), .12); } .pv-rank { width: 1.7rem; text-align: center; font-weight: 900; color: var(--muted); flex: none; } .pv-name { flex: 1; min-width: 0; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px; } .pv-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; flex: none; } .pv-main { font-weight: 900; color: #fff; font-size: 1rem; } .pv-sub { font-size: .7rem; color: var(--muted); } .pv-cols { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center; } .pv-col { padding: 10px 18px; border-radius: 14px; border: 1px solid var(--line); } .pv-col.w { border-color: rgba(74,222,128,.6); box-shadow: 0 0 18px rgba(74,222,128,.18); } .pv-vs { font-weight: 900; color: var(--muted); } /* Аимка */ .aim-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; } .aim-bar i { display: block; height: 100%; width: 0; background: var(--grad); } .aim-arena { position: relative; width: 100%; max-height: 72vh; margin: 0 auto; border-radius: 14px; overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; border: 1px solid var(--line-strong); background: radial-gradient(ellipse at center, rgba(var(--brand-rgb), .10), transparent 70%), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 62.5px 62.5px, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 62.5px 62.5px, #0d0a09; } .aim-t { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0 16%, #ff4d4d 18% 40%, #fff 42% 60%, #ff4d4d 62% 100%); box-shadow: 0 0 18px rgba(255,77,77,.55); animation: aimIn .12s ease-out; } .aim-t b { position: absolute; inset: -70%; border-radius: 50%; border: 3px solid rgba(255,255,255,.75); animation: aimRing linear forwards; } @keyframes aimIn { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } } @keyframes aimRing { from { transform: scale(1); opacity: .9; } to { transform: scale(.42); opacity: .25; } } .aim-pop { position: absolute; transform: translate(-50%, -50%); font-weight: 900; color: #fde047; text-shadow: 0 2px 8px #000; pointer-events: none; animation: aimPop .65s ease-out forwards; } @keyframes aimPop { to { transform: translate(-50%, -140%); opacity: 0; } } .aim-miss { position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255,255,255,.45); pointer-events: none; animation: aimMiss .3s ease-out forwards; } @keyframes aimMiss { to { transform: translate(-50%, -50%) scale(2); opacity: 0; } } .aim-cd { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(3rem, 14vw, 7rem); font-weight: 900; color: #fff; pointer-events: none; text-shadow: 0 4px 24px rgba(0,0,0,.7); } /* Гео-бой */ .gf-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 700px) { .gf-boards { grid-template-columns: 1fr; } } .gf-cap { font-weight: 800; color: #fff; font-size: .85rem; margin-bottom: 4px; } .gf { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line-strong); background: radial-gradient(circle at 30% 20%, #17324f, #0b1624 75%); touch-action: manipulation; } .gf-click { cursor: crosshair; box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .55); } .gf-l { stroke: rgba(130,190,255,.2); stroke-width: 2; } .gf-t { fill: rgba(150,200,255,.5); font-size: 28px; font-weight: 800; text-anchor: middle; pointer-events: none; } .gf-me { fill: rgba(90,169,255,.35); stroke: #5aa9ff; stroke-width: 6; } .gf-opp { fill: rgba(255,140,60,.32); stroke: #ff8c3c; stroke-width: 6; } .gf-pend { fill: rgba(90,169,255,.18); stroke: #5aa9ff; stroke-width: 5; stroke-dasharray: 14 10; } .gf-me-shot path, .gf-me-shot circle, .gf-pend-shot path, .gf-pend-shot circle { fill: none; stroke: #4ade80; stroke-width: 7; stroke-linecap: round; } .gf-pend-shot path, .gf-pend-shot circle { stroke-dasharray: 10 8; } .gf-opp-shot path, .gf-opp-shot circle { fill: none; stroke: #f87171; stroke-width: 7; stroke-linecap: round; } .gf-ln { stroke: rgba(255,255,255,.55); stroke-width: 3; stroke-dasharray: 10 8; } .gf-status { min-height: 1.6rem; color: #e4e4e7; font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .gf-afk { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; } .gf-afk.hot { background: rgba(255,90,80,.25); color: #fca5a5; animation: pvPulse 1s infinite; } @keyframes pvPulse { 50% { opacity: .55; } } .gf-score { display: flex; align-items: center; gap: 10px; color: #d4d4d8; font-size: .9rem; } .gf-score b { color: #fff; font-size: 1.15rem; } .gp-row { display: inline-flex; gap: 4px; } .gp { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.12); } .gp.w { background: #4ade80; } .gp.l { background: #f87171; } .gp.t { background: #a1a1aa; } .gp.cur { box-shadow: 0 0 0 2px var(--brand); } .gf-hist { display: grid; gap: 2px; margin-top: 6px; font-size: .8rem; } @media (prefers-reduced-motion: reduce) { .aim-t, .aim-t b, .gf-afk.hot, #pvp-pop { animation: none; } } .gf-hov { fill: rgba(var(--brand-rgb), .22); stroke: rgba(var(--brand-rgb), .9); stroke-width: 3; pointer-events: none; } .gf-cell { stroke-width: 3; } .gf-cell.gf-me { fill: rgba(90,169,255,.18); } .gf-cell.gf-opp { fill: rgba(255,140,60,.18); } .gf-cell.gf-pend { fill: rgba(90,169,255,.1); } .gf-warn { padding: 8px 12px; border-radius: 10px; background: rgba(255,90,80,.09); border: 1px solid rgba(255,90,80,.3); color: #fca5a5; font-size: .82rem; } .gp { width: 13px; height: 13px; } /* Режим «как в шутере» */ .aim-fps { cursor: none; } .aim-xh { position: absolute; width: 26px; height: 26px; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; } .aim-xh::before, .aim-xh::after { content: ''; position: absolute; background: #4ade80; box-shadow: 0 0 6px #000; } .aim-xh::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); } .aim-xh::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); } .aim-lock { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; text-align: center; gap: 6px; background: rgba(0,0,0,.55); color: #fff; font-weight: 800; font-size: 1.05rem; pointer-events: none; } .aim-lock small { font-weight: 500; color: #d4d4d8; font-size: .78rem; } .aim-lock[hidden] { display: none; } .sn-f { display: flex; flex-direction: column; gap: 3px; font-size: .75rem; color: var(--muted); } .sn-f[hidden] { display: none; } .mention{color:var(--brand,#ff8a1f);font-weight:600}.mention .ns{font-weight:inherit}.mention:hover{text-decoration:underline} .mus-now{background:rgba(var(--brand-rgb),.1)} .btn.is-on{color:#ff8a1f;border-color:#ff8a1f} .mention-ok{color:#d4d4d8} .mention-pop{position:fixed;z-index:200;background:#1d1814;border:1px solid rgba(var(--brand-rgb),.35);border-radius:12px;padding:4px;box-shadow:0 8px 28px rgba(0,0,0,.5)} .mention-opt{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:8px;text-align:left;color:#f4ede6} .mention-opt small{color:#a1a1aa;font-size:11px} .mention-opt.on,.mention-opt:hover{background:rgba(var(--brand-rgb),.16)} /* Музыка: минималистичные кнопки и плеер внизу сайта */ .mb{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:#a1a1aa;cursor:pointer;transition:color .15s,background .15s} .mb:hover:not(:disabled){color:#fff;background:rgba(255,255,255,.08)} .mb:disabled{opacity:.3;cursor:default} .mb.on{color:var(--brand,#ff8a1f)} .mb-play{border:1.5px solid var(--brand,#ff8a1f);color:var(--brand,#ff8a1f);width:38px;height:38px} .mb-play:hover:not(:disabled){background:var(--brand,#ff8a1f);color:#1d1814} .mb-txt{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#d4d4d8;font-size:13px;cursor:pointer} .mb-txt:hover{border-color:rgba(255,255,255,.35);color:#fff} .mb-txt.on{color:var(--brand,#ff8a1f);border-color:var(--brand,#ff8a1f)} .mb-txt svg{width:15px;height:15px} .mus-pub{display:inline-flex;margin-left:4px;vertical-align:-2px;opacity:.8} .mus-user{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#e4e4e7;font-size:13px;cursor:pointer} .mus-user small{color:#71717a} .mus-user:hover,.mus-user.on{border-color:var(--brand,#ff8a1f)} .mus-user.on{cursor:default;padding-right:2px} .mus-user .mb{width:22px;height:22px} #mus-dock{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:8px 12px calc(8px + env(safe-area-inset-bottom));pointer-events:none} #mus-dock .dock-in{pointer-events:auto;max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:8px 14px;border-radius:16px;background:rgba(29,24,20,.94);border:1px solid rgba(var(--brand-rgb),.35);backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(0,0,0,.5)} #mus-dock .dock-title{flex:1 1 160px;min-width:0} #mus-dock .dock-btns{display:flex;align-items:center;gap:2px} #mus-dock .dock-seek{display:flex;align-items:center;gap:8px;flex:1 1 220px;min-width:0} #mus-dock input[type=range]{accent-color:var(--brand,#ff8a1f);flex:1;min-width:0} #mus-dock .dock-vol{flex:0 0 70px} body.has-dock{padding-bottom:84px} @media(max-width:640px){body.has-dock{padding-bottom:130px}} .pf-pl-item{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:6px 12px} .pf-pl-item summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:4px 0} .pf-pl-item summary::-webkit-details-marker{display:none} .pf-pl-item summary span{flex:1} .pf-pl-item summary small{color:#71717a} .cm-stk-btn{color:#a1a1aa} .cm-stk-btn:hover,.cm-stk-btn.on{color:var(--brand,#ff8a1f)} #mus-dock .dock-vol{display:flex;align-items:center;gap:6px;flex:0 0 112px;color:#a1a1aa} #mus-dock .dock-vol svg{flex:none} #mus-dock input#mus-vol{-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;background:rgba(255,255,255,.22);outline:none;accent-color:#e4e4e7} #mus-dock input#mus-vol::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:#e4e4e7;border:0} #mus-dock input#mus-vol::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#e4e4e7;border:0} #mus-dock input#mus-vol::-moz-range-progress{background:#e4e4e7;height:3px} #mus-dock .dock-seek{border-right:1px solid rgba(255,255,255,.1);padding-right:14px} #mus-rows{overflow:hidden} #mus-dock .dock-vol{flex:0 0 78px} #mus-dock .dock-title{flex:1 1 130px} #mus-dock .dock-seek{flex:3 1 300px} /* Окно «Позвать играть» на чужом профиле */ .inv-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .inv-game { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: #d4d4d8; text-align: center; transition: border-color .15s, background .15s, transform .15s; cursor: pointer; } .inv-game:hover { border-color: rgba(255,255,255,.25); } .inv-game .inv-ic { font-size: 1.6rem; line-height: 1.2; } .inv-game b { font-size: .85rem; color: #fff; } .inv-game small { font-size: .7rem; color: #a1a1aa; } .inv-game.on { border-color: var(--brand, #ff8a1f); background: color-mix(in srgb, var(--brand, #ff8a1f) 16%, transparent); transform: translateY(-1px); } /* Окно «Патч» (описание обновления) */ .patch-modal { padding: 28px; display: flex; flex-direction: column; gap: 20px; max-height: 85vh; overflow-y: auto; } .patch-head { display: flex; flex-direction: column; gap: 6px; } .patch-ver { align-self: flex-start; font-weight: 900; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #1a140f; background: var(--brand, #ff8a1f); } .patch-head h2 { font-weight: 900; font-size: 1.7rem; line-height: 1.15; color: #fff; } .patch-head p { color: #a1a1aa; font-size: .9rem; } .patch-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; } .patch-row { display: flex; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .patch-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.4rem; font-weight: 900; border-radius: 12px; background: color-mix(in srgb, var(--brand, #ff8a1f) 18%, transparent); } .patch-row b { color: #fff; font-size: 1rem; } .patch-row p { margin: 2px 0 0; color: #c4c4cc; font-size: .9rem; line-height: 1.45; } @media (max-width: 640px) { .patch-modal { padding: 20px; } .patch-head h2 { font-size: 1.4rem; } } .modal-panel.modal-wide:has(.patch-modal) { max-width: 42rem; } .patch-head h2, .patch-head p { margin: 0; } /* Значки (инвентарь) в профиле и в админке */ .ub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .ub-item { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); transition: border-color .15s, transform .15s; } .ub-item.on { border-color: var(--brand, #ff8a1f); background: color-mix(in srgb, var(--brand, #ff8a1f) 10%, transparent); } .ub-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ub-on { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-light, #ffb15c); } .ub-desc { font-size: .88rem; line-height: 1.4; color: #d4d4d8; margin: 0; } .ub-meta { font-size: .75rem; line-height: 1.4; color: #8b8b94; margin-top: auto; } .ub-item .btn { align-self: flex-start; } .ub-x { margin-left: 4px; opacity: .6; cursor: pointer; background: none; border: 0; color: inherit; } .ub-x:hover { opacity: 1; } /* ── Профиль бота (#profile/aglerbot) ── */ .pf-bot{--bp:#9146ff;--bp2:#c9a4ff} .bp-hero{border-color:rgba(145,70,255,.35)} .bp-banner{position:relative;height:150px;overflow:hidden;background:linear-gradient(120deg,#2a1260 0%,#5b2bb8 55%,#9146ff 100%)} .bp-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)} .bp-orb{position:absolute;border-radius:50%;filter:blur(30px);opacity:.55} .bp-orb.o1{width:180px;height:180px;background:#c9a4ff;right:8%;top:-60px;animation:bpf 7s ease-in-out infinite} .bp-orb.o2{width:140px;height:140px;background:#ff8a1f;left:12%;bottom:-70px;opacity:.35;animation:bpf 9s ease-in-out infinite reverse} .bp-bubble{position:absolute;padding:.25rem .65rem;border-radius:.75rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:.8rem;font-weight:700;backdrop-filter:blur(4px);animation:bpf 6s ease-in-out infinite} .bp-bubble.b1{left:55%;top:28px}.bp-bubble.b2{left:72%;top:78px;animation-delay:-2s}.bp-bubble.b3{left:38%;top:88px;animation-delay:-4s} @keyframes bpf{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .bp-ava{position:relative;width:104px;height:104px;flex:none;border-radius:50%;box-shadow:0 0 0 4px var(--bg,#12100d),0 0 28px rgba(145,70,255,.7)} .bp-ava>*:first-child{border-radius:50%} .bp-dot{position:absolute;right:4px;bottom:6px;width:18px;height:18px;border-radius:50%;background:#71717a;border:3px solid #12100d} .bp-dot.on{background:#22c55e;box-shadow:0 0 10px #22c55e} .bp-tag{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:.5rem;background:var(--bp);color:#fff;font-size:.75rem;font-weight:900;letter-spacing:.08em} .bp-status{display:inline-flex;align-items:center;gap:.35rem;padding:.1rem .6rem;border-radius:999px;background:rgba(113,113,122,.2);font-size:.75rem} .bp-status b{width:7px;height:7px;border-radius:50%;background:#71717a} .bp-status.on{background:rgba(34,197,94,.15);color:#86efac}.bp-status.on b{background:#22c55e} .bp-lead{margin-top:.6rem;color:#d4d4d8;max-width:46rem;line-height:1.5} .bp-chat{border-radius:1rem;overflow:hidden;background:#0e0c14;border:1px solid rgba(145,70,255,.35);align-self:start} .bp-chat-h{display:flex;justify-content:space-between;padding:.6rem .9rem;background:#1c1530;color:var(--bp2);font-weight:800;font-size:.8rem} .bp-chat-b{padding:.8rem;display:flex;flex-direction:column;gap:.55rem;font-size:.85rem;color:#e4e4e7} .bp-msg{display:block;line-height:1.4;animation:bpin .5s both} @keyframes bpin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .bp-who,.bp-bot{margin-right:.35rem}.bp-who{font-weight:800;color:#60a5fa}.bp-who.bot{color:var(--bp2)} .bp-bot{padding:0 .35rem;border-radius:.25rem;background:var(--bp);color:#fff;font-size:.65rem;font-weight:900} .bp-grid3{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))} .bp-card{border-radius:1rem;padding:1.1rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:.2s} .bp-card:hover{border-color:rgba(145,70,255,.6);transform:translateY(-2px)} .bp-ic{font-size:1.6rem}.bp-card h3{font-weight:900;color:#fff;margin:.2rem 0}.bp-card p{font-size:.85rem;color:#a1a1aa;margin-bottom:.6rem} .bp-names{display:flex;flex-wrap:wrap;gap:.35rem} .bp-cmd{cursor:pointer;padding:.15rem .55rem;border-radius:.5rem;background:rgba(145,70,255,.18);border:1px solid rgba(145,70,255,.4);color:var(--bp2);font-weight:700;font-size:.8rem;transition:.15s} .bp-cmd:hover{background:rgba(145,70,255,.35)}.bp-cmd.done{background:#22c55e;color:#fff;border-color:#22c55e} .bp-ex{display:block;margin-top:.6rem;font-size:.75rem;color:#71717a} .bp-note{margin-top:.8rem;font-size:.8rem;color:#71717a} .bp-table{width:100%;border-collapse:collapse;font-size:.9rem} .bp-table th{text-align:left;color:#71717a;font-weight:700;font-size:.75rem;padding:.4rem .5rem;border-bottom:1px solid rgba(255,255,255,.1)} .bp-table td{padding:.5rem;border-bottom:1px solid rgba(255,255,255,.05);color:#e4e4e7} .bp-table .sym{font-size:1.4rem}.bp-table b{color:var(--brand-light)} .bp-fact{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.1rem;border-radius:1rem;background:rgba(145,70,255,.1);border:1px solid rgba(145,70,255,.3)} .bp-fact span{color:#a1a1aa;font-size:.85rem}.bp-fact b{color:#fff;font-size:1.2rem} .bp-list{display:flex;flex-direction:column;gap:.5rem;font-size:.85rem;color:#d4d4d8}.bp-list b{color:var(--brand-light)} @media(max-width:640px){.bp-banner{height:110px}.bp-bubble.b1,.bp-bubble.b3{display:none}} @media(prefers-reduced-motion:reduce){.bp-orb,.bp-bubble,.bp-msg{animation:none}} /* ── Окошко «причина» (вместо prompt) ── */ .modal-panel:has(.ask-box){max-width:30rem} .ask-box{padding:1.5rem;display:flex;flex-direction:column;gap:.75rem} .ask-head{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:.25rem} .ask-head h2{font-weight:900;font-size:1.35rem;color:#fff;line-height:1.2} .ask-head p{font-size:.85rem;color:#a1a1aa;margin-top:.2rem} .ask-ic{flex:none;width:2.6rem;height:2.6rem;border-radius:.8rem;display:grid;place-items:center;font-size:1.3rem;background:rgba(var(--brand-rgb),.15);border:1px solid rgba(var(--brand-rgb),.4)} .ask-head.danger .ask-ic{background:rgba(255,99,99,.14);border-color:rgba(255,99,99,.45)} .ask-box textarea{resize:vertical;min-height:6rem} .ask-quick{display:flex;flex-wrap:wrap;gap:.4rem} .ask-foot{display:flex;align-items:center;gap:.5rem;margin-top:.25rem} .ask-foot #ask-cnt{margin-right:auto} .cb-ann{display:flex;flex-direction:column;gap:.6rem;padding:.9rem;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)} .cb-say{display:flex;gap:.5rem;margin:.9rem 0}.cb-say .input{flex:1} /* Логотип-надпись в шапке (0.51c) */ .logo-wordmark{height:44px;width:auto;display:block;transform-origin:50% 70%} @media(max-width:480px){.logo-wordmark{height:36px}} .cb-ccform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem} .cb-ccform label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:#d4d4d8} .cb-cc-wide{grid-column:1/-1}.cb-cc-flags{display:flex;gap:1.2rem;align-items:center;grid-column:1/-1} .cb-cc-text{max-width:26rem;color:#a1a1aa;font-size:.85rem;word-break:break-word} .cb-cctable{width:100%} @media(max-width:700px){.cb-ccform{grid-template-columns:1fr}} .bp-custom{margin-top:1rem;padding:1rem;border-radius:1rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)} .bp-custom h3{font-weight:900;color:#fff;margin-bottom:.6rem} .bp-crow{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.35rem 0;font-size:.85rem;color:#a1a1aa;border-top:1px solid rgba(255,255,255,.05)} .bp-crow:first-of-type{border-top:0} .mc-video{display:block;width:100%;max-width:44rem;margin-top:.5rem;border-radius:14px;background:#000;border:1px solid rgba(255,255,255,.1);max-height:70vh} .mc-vid-box{padding:.8rem;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)} /* Окно «Огонёк» */ .modal-panel:has(.sk-modal) { max-width: 26rem; overflow: hidden; } .sk-modal { width: 100%; } .sk-hero { position: relative; text-align: center; padding: 1.6rem 1rem 1.1rem; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 106, 0, 0.3), transparent 70%); } .sk-hero.off { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 70%); } .sk-hero.risk { background: radial-gradient(120% 90% at 50% 0%, rgba(248, 113, 113, 0.25), transparent 70%); } .sk-hero.lit.t2 { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 190, 40, 0.3), transparent 70%); } .sk-hero.lit.t3 { background: radial-gradient(120% 90% at 50% 0%, rgba(56, 189, 248, 0.28), transparent 70%); } .sk-hero.lit.t4 { background: radial-gradient(120% 90% at 50% 0%, rgba(192, 132, 252, 0.3), transparent 70%); } .sk-flame { display: inline-block; font-size: 4.4rem; line-height: 1; transform-origin: 50% 90%; } .sk-hero.lit .sk-flame { animation: skFlicker 1.6s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(255, 120, 0, 0.7)); } .sk-hero.lit.t3 .sk-flame { filter: hue-rotate(180deg) drop-shadow(0 0 14px rgba(56, 189, 248, 0.8)); } .sk-hero.lit.t4 .sk-flame { filter: hue-rotate(250deg) drop-shadow(0 0 14px rgba(192, 132, 252, 0.9)); } .sk-hero.off .sk-flame { filter: grayscale(1) brightness(0.8); opacity: 0.7; } .sk-num { font-size: 3rem; font-weight: 900; line-height: 1; color: var(--text-hi); margin-top: 0.55rem; } .sk-cap { color: var(--muted); font-weight: 700; margin-top: 0.15rem; } .sk-status { margin-top: 0.5rem; font-size: 0.85rem; color: var(--muted); } .sk-hero.risk .sk-status { color: #fca5a5; } .sk-body { padding: 0.9rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; } .sk-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; } .sk-day { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .sk-day > span { width: 100%; aspect-ratio: 1; max-width: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); font-size: 1.1rem; } .sk-day.on > span { background: rgba(255, 106, 0, 0.18); border-color: rgba(255, 138, 31, 0.55); } .sk-day.today > span { border: 2px solid rgba(255, 138, 31, 0.8); } .sk-day small { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; } .sk-claim { width: 100%; justify-content: center; } .sk-done { text-align: center; font-size: 0.85rem; color: #86efac; padding: 0.55rem; border-radius: 12px; background: rgba(34, 197, 94, 0.1); } .sk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .sk-stats > div { text-align: center; padding: 0.55rem 0.3rem; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); } .sk-stats b { display: block; font-size: 1.35rem; color: var(--text-hi); } .sk-stats small { font-size: 0.7rem; color: var(--muted); } .sk-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.8rem; font-size: 0.78rem; color: var(--muted); } .sk-tiers li { display: flex; align-items: center; gap: 0.4rem; opacity: 0.55; } .sk-tiers li.got { opacity: 1; color: var(--text-hi); } .sk-tiers i { width: 10px; height: 10px; border-radius: 50%; flex: none; } .sk-hint { margin: 0; font-size: 0.75rem; color: var(--muted); line-height: 1.45; } .sk-link { color: #ffc247; font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; } /* Кнопка «Выйти из аккаунта» в профиле показывается только на телефоне */ .pf-logout { display: none; } /* Шапка на телефоне: всё должно помещаться в ширину (на 360–430 px), ничего не обрезается справа */ @media (max-width: 560px) { header.site-header > div:first-child { padding-left: 0.5rem; padding-right: 0.5rem; gap: 0.35rem; } .logo-wordmark { height: 30px; } .stream-widget { padding: 0.35rem; gap: 0; } .stream-widget span:last-child { display: none; } #user-area > div { gap: 0.2rem; } #user-area .pts-chip, #user-area .streak-chip { height: 32px; padding: 0 0.4rem 0 0.35rem; font-size: 0.78rem; gap: 0.15rem; border-radius: 10px; } #user-area .pts-chip .pts-ic { font-size: 0.9rem; } #user-area .sk-fire { font-size: 1rem; } #user-area .nf-bell { width: 32px; height: 32px; border-radius: 10px; } #user-area a[href^="#profile"] img { width: 30px !important; height: 30px !important; } #user-area [data-act="logout"] { display: none; } /* на телефоне «Выйти» живёт в своём профиле */ .pf-logout { display: inline-flex; } } @media (max-width: 380px) { .logo-wordmark { height: 26px; } #user-area .nf-bell { width: 30px; } } /* Модерация ссылок профиля */ .game-tile.game-wait{opacity:.7;border-style:dashed} .game-st{margin-left:auto;font-size:.68rem;font-weight:800;color:#fbbf24;white-space:normal;max-width:9rem;text-align:right} .game-st.bad{color:#fb7185} .gm-st{flex-basis:100%;font-size:.75rem;color:#fbbf24} .gm-st.bad{color:#fb7185} .gm-flag{font-size:.7rem;font-weight:700;color:#fbbf24;background:rgba(251,191,36,.12);border-radius:6px;padding:2px 6px} /* Жалобы на посты */ .rp-reasons{display:grid;gap:.4rem} .rp-reason{text-align:left;padding:.6rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#e4e4e7;font-weight:700;cursor:pointer} .rp-reason.on{border-color:#fb7185;background:rgba(251,113,133,.12);color:#fff} .rp-modal{display:flex;flex-direction:column;gap:.9rem} .rp-post{max-height:260px;overflow:auto;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.8rem;display:grid;gap:.5rem} .rp-post img{max-width:100%;max-height:200px;border-radius:8px;object-fit:cover} .rp-text{white-space:pre-wrap;word-break:break-word;color:#e4e4e7} .rp-items{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.85rem;color:#a1a1aa} .rp-items b{color:#fff}.rp-items span{display:block;color:#d4d4d8} .rp-btns{display:flex;flex-wrap:wrap;gap:.5rem}.rp-btns .btn{flex:1 1 auto} .rp-done{padding:.7rem .9rem;border-radius:10px;background:rgba(251,191,36,.1);color:#fbbf24;font-size:.85rem} /* 0.55a — телефон: ничего не должно расширять страницу шире экрана (иначе браузер «отдаляет» весь сайт) */ .mod-views { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .mod-views::-webkit-scrollbar { display: none; } .mod-views > * { flex: none; } .fp-handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fp-reason { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; display: inline-block; } html, body { overflow-x: clip; } @media (max-width: 400px) { #user-area > div { gap: 0.12rem; } header.site-header > div:first-child { gap: 0.25rem; } #user-area .pts-chip, #user-area .streak-chip { padding: 0 0.3rem; } } /* ═══════════════ Хеллоуин (public/season.js) ═══════════════ */ .hw-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .hw-glow { position: absolute; inset: 0; background: radial-gradient(900px 520px at 85% -5%, rgba(124, 58, 237, 0.16), transparent 70%), radial-gradient(700px 420px at 0% 100%, rgba(234, 88, 12, 0.14), transparent 70%), radial-gradient(600px 300px at 100% 100%, rgba(124, 58, 237, 0.1), transparent 70%); } .hw-stars { position: absolute; inset: 0 0 40% 0; opacity: 0.55; background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 8%, #e9d5ff, transparent), radial-gradient(1.4px 1.4px at 46% 22%, #fff, transparent), radial-gradient(1px 1px at 63% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 78% 30%, #e9d5ff, transparent), radial-gradient(1px 1px at 92% 16%, #fff, transparent), radial-gradient(1px 1px at 36% 34%, #fff, transparent), radial-gradient(1.2px 1.2px at 6% 40%, #fff, transparent); animation: hwTwinkle 4s ease-in-out infinite alternate; } .hw-moon { position: absolute; top: 190px; right: 5vw; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fff7d6, #fde68a 45%, #f59e0b 100%); box-shadow: 0 0 60px 18px rgba(253, 230, 138, 0.25), 0 0 140px 50px rgba(249, 115, 22, 0.12); opacity: 0.85; } .hw-moon i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(9px 9px at 30% 60%, rgba(180, 120, 20, 0.35), transparent), radial-gradient(14px 14px at 62% 38%, rgba(180, 120, 20, 0.3), transparent), radial-gradient(7px 7px at 58% 72%, rgba(180, 120, 20, 0.3), transparent); } .hw-grave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; opacity: 0.95; } .hw-fog { position: absolute; left: -50%; right: -50%; bottom: -20px; height: 170px; background: radial-gradient(50% 60% at 25% 70%, rgba(196, 181, 253, 0.13), transparent 70%), radial-gradient(45% 55% at 70% 80%, rgba(196, 181, 253, 0.11), transparent 70%); animation: hwFog 38s linear infinite alternate; } .hw-fog2 { bottom: -40px; opacity: 0.8; animation-duration: 52s; animation-direction: alternate-reverse; } .hw-web { position: absolute; left: 0; top: 0; width: 92px; height: 92px; pointer-events: none; opacity: 0.45; } .hw-web svg { width: 100%; height: 100%; } .hw-spider { position: absolute; right: max(8px, calc((100vw - 1280px) / 4 - 13px)); top: 34px; width: 26px; z-index: 2; cursor: pointer; transform-origin: 50% -40px; animation: hwDangle 4.5s ease-in-out infinite; transition: transform 0.9s cubic-bezier(0.5, 0, 0.75, 0); } .hw-spider svg { display: block; width: 26px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); } .hw-thread { position: absolute; left: 50%; bottom: 100%; width: 1px; height: 60px; margin-bottom: -6px; background: linear-gradient(rgba(226, 232, 240, 0.05), rgba(226, 232, 240, 0.55)); } .hw-spider.up { animation: none; transform: translateY(-90px); } .hw-pumpkin { position: absolute; right: -16px; top: -8px; width: 24px; height: 24px; pointer-events: none; transform: rotate(12deg); filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.55)); } .season-hw header a[aria-label="На главную"] { position: relative; } .hw-candle { animation: hwCandle 2.2s ease-in-out infinite; } .hw-bat { position: fixed; left: -80px; z-index: 35; pointer-events: none; animation: hwFly 9s linear both; opacity: 0.9; } .hw-bat.rtl { left: auto; right: -80px; animation-name: hwFlyRtl; } .hw-bat svg { display: block; width: 100%; animation: hwFlap 0.22s ease-in-out infinite alternate; transform-origin: 50% 40%; } .hw-bat.rtl svg { scale: -1 1; } @keyframes hwTwinkle { from { opacity: 0.35; } to { opacity: 0.65; } } @keyframes hwFog { from { transform: translateX(-6%); } to { transform: translateX(6%); } } @keyframes hwDangle { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(6px) rotate(4deg); } } @keyframes hwCandle { 0%, 100% { opacity: 1; } 40% { opacity: 0.7; } 55% { opacity: 0.95; } 70% { opacity: 0.6; } } @keyframes hwFlap { from { transform: scaleY(1); } to { transform: scaleY(0.45); } } @keyframes hwFly { 0% { transform: translate(0, 0); } 25% { transform: translate(28vw, -4vh); } 50% { transform: translate(55vw, 3vh); } 75% { transform: translate(82vw, -3vh); } 100% { transform: translate(calc(100vw + 160px), 2vh); } } @keyframes hwFlyRtl { 0% { transform: translate(0, 0); } 25% { transform: translate(-28vw, -4vh); } 50% { transform: translate(-55vw, 3vh); } 75% { transform: translate(-82vw, -3vh); } 100% { transform: translate(calc(-100vw - 160px), 2vh); } } /* акценты: оранжевый → фиолетовый */ .season-hw header.site-header::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 50%, transparent) no-repeat, linear-gradient(90deg, transparent, #f97316 25%, #a855f7 70%, transparent); background-size: 22% 100%, 100% 100%; } .season-hw .section-title::after { background: linear-gradient(90deg, #f97316, #a855f7); } .season-hw .site-footer { padding-bottom: 150px; } /* Профиль админа, где он выключил оформление: декор прячем, акценты обычные (класс season-hw снят) */ .hw-paused .hw-bg, .hw-paused .hw-web, .hw-paused .hw-spider, .hw-paused .hw-pumpkin, .hw-paused .hw-bat { display: none; } .season-hw main#view { padding-bottom: 60px; } @media (max-width: 640px) { .hw-moon { width: 60px; height: 60px; top: 130px; right: 4vw; } .hw-pumpkin { width: 18px; height: 18px; right: -10px; top: -6px; } .hw-grave { height: 90px; } .hw-fog { height: 110px; } .hw-web { width: 64px; height: 64px; } .season-hw .site-footer { padding-bottom: 100px; } } @media (prefers-reduced-motion: reduce) { .hw-stars, .hw-fog, .hw-spider, .hw-candle { animation: none; } } /* паучок висит сверху в шапке справа; где шапка тесная (кнопки до самого края) — прячем, чтобы не мешал нажимать */ @media (max-width: 1360px) { .hw-spider { display: none; } } /* Профиль: колонка с ником не сжимается в узкую полосу — кнопки лучше переносятся ниже */ .pf-namecol { flex-basis: 15rem; } /* Кнопка «🎃» в своём профиле админа (вкл/выкл Хеллоуин на профиле) */ .pf-hw { padding-left: 0.7rem; padding-right: 0.7rem; } .pf-hw.off { filter: grayscale(1); opacity: 0.55; } /* Журнал ошибок */ .er-id{font-weight:800;color:#fbbf24;background:rgba(251,191,36,.1);padding:1px 6px;border-radius:6px} .er-n{font-size:.75rem;font-weight:800;color:#fb7185} .er-msg{word-break:break-word} .er-stack{margin:.7rem 0;padding:.7rem;border-radius:10px;background:rgba(0,0,0,.35);color:#d4d4d8;font-size:.72rem;white-space:pre-wrap;word-break:break-all;max-height:220px;overflow:auto} .cm-edited{color:#71717a;font-style:italic} .cm-editor{margin-top:.3rem}