/* ============================================================ ТЕМЫ ОФОРМЛЕНИЯ — переключаются через Каждая тема переопределяет набор переменных, остальной CSS ниже использует только var(--...), поэтому смена темы мгновенна. ============================================================ */ :root, [data-theme="classic"] { --bg: #DFE0FF; --bg-pattern: url("/assets/pattern.png"); --panel: #ffffff; --panel-2: #f7f8fc; --ink: #444b66; --ink-soft: #9a9bc0; --head: #2b577f; --head-2: #336a9e; --accent: #7dab2e; /* зелёный */ --accent-2: #8fbe3a; --warn: #de990e; /* оранжевый */ --warn-2: #f2ab2e; --danger: #c0392b; /* красный */ --danger-2: #e05a4b; --gold: #FFCF54; --line: #e2e3f0; --radius: 12px; --radius-sm: 9px; --shadow: 0 2px 8px rgba(45,87,127,.06); --shadow-btn: 0 2px 4px rgba(45,87,127,.12), inset 0 1px 0 rgba(255,255,255,.25); --font: Verdana, Arial, Tahoma, sans-serif; } /* 🌌 Современный космос — тёмный фон, неон, тема Марса */ [data-theme="space"] { --bg: #0a0e1a; --bg-pattern: none; --panel: #141a2e; --panel-2: #1d2540; --ink: #c8d0e8; --ink-soft: #6b76a0; --head: #1a2138; --head-2: #232c4a; --accent: #ff5a3c; /* марсианский оранжево-красный */ --accent-2: #ff7a52; --warn: #f0a830; --warn-2: #ffc04d; --danger: #e8413c; --danger-2: #ff5f5a; --gold: #ffd76a; --line: #2a3458; --radius: 14px; --radius-sm: 10px; --shadow: 0 4px 18px rgba(0,0,0,.4); --shadow-btn: 0 2px 10px rgba(255,90,60,.25), inset 0 1px 0 rgba(255,255,255,.12); --font: "Segoe UI", Roboto, Verdana, sans-serif; } /* 🎮 Яркий игровой — сочные цвета, крупные кнопки */ [data-theme="vivid"] { --bg: #ffe8d6; --bg-pattern: none; --panel: #ffffff; --panel-2: #fff3e8; --ink: #3a2a4a; --ink-soft: #b08aa8; --head: #7b2ff7; /* фиолетовый */ --head-2: #9d4dff; --accent: #00c853; /* ярко-зелёный */ --accent-2: #00e676; --warn: #ff9100; --warn-2: #ffab2e; --danger: #ff1744; --danger-2: #ff4569; --gold: #ffd600; --line: #ffd9bd; --radius: 18px; --radius-sm: 13px; --shadow: 0 4px 14px rgba(123,47,247,.12); --shadow-btn: 0 4px 0 rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.4); --font: "Segoe UI", Roboto, Verdana, sans-serif; } /* ⚪ Минимализм — чисто, много воздуха, тонкие линии */ [data-theme="minimal"] { --bg: #f2f3f5; --bg-pattern: none; --panel: #ffffff; --panel-2: #f7f8fa; --ink: #2b2f36; --ink-soft: #98a0ad; --head: #2b2f36; --head-2: #3a3f49; --accent: #2b7a5b; --accent-2: #34936e; --warn: #c47d1a; --warn-2: #d68f2b; --danger: #b3372a; --danger-2: #c44537; --gold: #c9a23a; --line: #e8eaed; --radius: 8px; --radius-sm: 6px; --shadow: 0 1px 3px rgba(0,0,0,.06); --shadow-btn: 0 1px 2px rgba(0,0,0,.08); --font: "Segoe UI", system-ui, sans-serif; } /* 🚀 Туманность — марсианский космос: реголит + окисленная медь */ [data-theme="nebula"] { --bg: #0b0a14; --bg-pattern: none; --panel: #14121f; --panel-2: #1d1a2c; --ink: #ece6f5; --ink-soft: #9a93b4; --head: #c9b8e8; /* светло-сиреневый: читаем как текст на тёмном */ --head-2: #a88fd4; --accent: #ff6a3d; /* реголит — тёплый оранжевый */ --accent-2: #ff9152; --warn: #ffcf54; --warn-2: #ffd96f; --danger: #e8413c; --danger-2: #ff5f5a; --gold: #ffcf54; --line: #2c2840; --radius: 18px; --radius-sm: 12px; --shadow: 0 8px 28px rgba(0,0,0,.45); --shadow-btn: 0 2px 14px rgba(255,106,61,.3), inset 0 1px 0 rgba(255,255,255,.14); --font: "Unbounded", "Segoe UI", sans-serif; /* фирменная деталь темы — бирюзовая «медь» для прогресса и готовых наград */ --copper: #36d6b0; } /* подключаем космические шрифты только когда выбрана эта тема */ [data-theme="nebula"] body, body[data-theme="nebula"] { font-family: var(--font); } /* ============================================================ 🆕 Новый дизайн («Аврора») — стеклянные карточки, неоновое сияние, тёмный индиго-фон с переливами северного сияния. ============================================================ */ [data-theme="aurora"] { --bg: #0a0a1a; --bg-pattern: none; --panel: rgba(30, 28, 58, .55); --panel-2: rgba(42, 38, 82, .6); --ink: #eef0ff; --ink-soft: #9d9bc4; --head: #7ef7d4; /* мятно-неоновый — читаем на тёмном */ --head-2: #4bd8ae; --accent: #ff5fae; /* неон-розовый акцент */ --accent-2: #ff8ac2; --warn: #ffd84d; --warn-2: #ffe680; --danger: #ff4d6a; --danger-2: #ff7a90; --gold: #ffd84d; --line: rgba(126, 247, 212, .18); --radius: 20px; --radius-sm: 14px; --shadow: 0 10px 34px rgba(0,0,0,.5); --shadow-btn: 0 3px 16px rgba(255,95,174,.35), inset 0 1px 0 rgba(255,255,255,.18); --font: "Poppins", "Segoe UI", sans-serif; --aurora-glow: #4bd8ae; } [data-theme="aurora"] body, body[data-theme="aurora"] { font-family: var(--font); } /* фон: несколько мягких переливающихся сияний вместо плоского цвета */ body[data-theme="aurora"] { background: radial-gradient(ellipse 900px 500px at 15% -5%, rgba(255,95,174,.22), transparent 60%), radial-gradient(ellipse 800px 600px at 100% 15%, rgba(75,216,174,.20), transparent 55%), radial-gradient(ellipse 700px 500px at 20% 100%, rgba(126,140,255,.18), transparent 55%), var(--bg) !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } /* стеклянные карточки: размытие фона под ними */ [data-theme="aurora"] .card, [data-theme="aurora"] .bordered, [data-theme="aurora"] .content, [data-theme="aurora"] .menu-list a, [data-theme="aurora"] .hub-row, [data-theme="aurora"] .bp-card, [data-theme="aurora"] .boss-hero, [data-theme="aurora"] .boss-char { backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--line); } /* неоновое свечение вокруг основных кнопок */ [data-theme="aurora"] .btn.primary, [data-theme="aurora"] .btni.price, [data-theme="aurora"] .boss-atk-btn { box-shadow: 0 0 0 1px rgba(255,95,174,.4), 0 4px 20px rgba(255,95,174,.35); } /* полосы прогресса — переливающийся неоновый градиент */ [data-theme="aurora"] .progress-fill, [data-theme="aurora"] .bp-bar-fill, [data-theme="aurora"] .task-bar i, [data-theme="aurora"] .boss-hp-fill { background: linear-gradient(90deg, #ff5fae, #7e8cff, #4bd8ae) !important; background-size: 200% 100%; animation: auroraShift 3s linear infinite; } @keyframes auroraShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* шапка и длинные кнопки — тёмное стекло, а не светлый мятный градиент (--head тут светлый для текста, но фон шапки должен остаться тёмным, иначе белые цифры баланса потеряются) */ [data-theme="aurora"] .topbar, [data-theme="aurora"] td .btnl, [data-theme="aurora"] .topbar .bar-main { background: linear-gradient(180deg, rgba(42,38,82,.85), rgba(20,18,42,.9)) !important; backdrop-filter: blur(14px); border: 1px solid var(--line); } * { box-sizing: border-box; } html, div, span, form, p, img, ul, li, a { padding: 0; margin: 0; } body { margin: 0 auto; max-width: 490px; color: var(--ink); background: var(--bg) var(--bg-pattern) repeat; font-family: var(--font); font-size: 15px; line-height: 1.45; } input, textarea, select, button { font-family: var(--font); } img { border: 0; max-width: 100%; vertical-align: middle; } li { list-style: none; } a { color: var(--head); text-decoration: none; } .wrap { background: var(--panel); min-height: 60vh; padding: 6px 8px 10px; } /* верхний бар */ .topbar { display: flex; background: var(--panel); } td .btnl, .topbar .bar-main { background: linear-gradient(180deg, var(--head-2), var(--head)) !important; border-radius: 0; box-shadow: none; margin: 0; } .balance { margin-left: auto; text-align: right; } .money { display: block; color: #fff; line-height: 1em; padding-top: 4px; } .persec { font-size: 0.8em; color: var(--gold); line-height: 0.9em; } /* кнопки */ .btni, .pg, .btn, button.btn { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; border: 0; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; font-size: 0.85em; line-height: 1.3; padding: 9px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow-btn); transition: transform .08s, filter .15s; } .btni { font-size: 0.82em; padding: 8px 12px; } .pg { padding: 6px 12px; } .btni:hover, .pg:hover, .btn:hover { filter: brightness(1.07); } .btni:active, .pg:active, .btn:active { transform: translateY(1px); } span.btni, span.pg, .btni:disabled, .btni.cant, .btn:disabled, .btn.cant { background: linear-gradient(180deg, #c4c4c4, #b5b5b5); color: #fff; box-shadow: none; cursor: default; filter: none; } .btn.primary, .btn.wide { background: linear-gradient(180deg, var(--accent-2), var(--accent)); } .btn.wide, .wide { width: 100%; } .btnl { background: linear-gradient(180deg, var(--warn-2), var(--warn)); color: #fff; display: block; text-align: center; text-decoration: none; font-size: 1em; line-height: 1.3; padding: 12px 14px; border: 0; border-radius: var(--radius); cursor: pointer; margin: 0 4px; box-shadow: var(--shadow-btn); transition: transform .08s, filter .15s; } .btnl:hover { filter: brightness(1.05); } .btnl:active { transform: translateY(1px); } .btnr { background: linear-gradient(180deg, var(--danger-2), var(--danger)); color: #fff; border: 0; border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer; font-size: 0.9em; box-shadow: var(--shadow-btn); transition: transform .08s, filter .15s; } .btnr:hover { filter: brightness(1.05); } .btnr:active { transform: translateY(1px); } .mini-btn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; color: var(--head); font-size: 11px; padding: 4px 8px; cursor: pointer; } .mini-btn:hover { filter: brightness(.97); } /* карточки */ .card, .bordered { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 0 4px 10px; background: var(--panel); box-shadow: var(--shadow); } .bordered { margin: 8px 4px; } .content { padding: 10px 8px; margin: 6px 0; } h2, h3, h4 { color: var(--head); line-height: 1.25; } h2 { font-size: 1.3em; } h3 { font-size: 1.15em; margin-bottom: 4px; } /* формы */ label { display: block; margin: 6px 0; font-size: 0.92em; } input, textarea, select { width: 100%; padding: 10px 12px; margin: 4px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--panel-2); font-size: 16px; transition: border-color .15s, box-shadow .15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(125,171,46,.2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); background: var(--panel); } .row { display: flex; } .row.gap { gap: 6px; } .grow { flex: 1 1 auto; min-width: 60px; } .fl { float: left; } .fr { float: right; } .cb { clear: both; } /* сообщения */ .feedback { margin: 8px 4px; padding: 11px 14px; border-radius: var(--radius); background: var(--panel-2); background: color-mix(in srgb, var(--accent) 15%, var(--panel)); color: var(--accent); text-align: center; font-size: 0.92em; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .feedback.err { background: var(--panel-2); background: color-mix(in srgb, var(--danger) 12%, var(--panel)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } /* списки/рейтинги */ .toprow { display: flex; align-items: center; gap: 8px; padding: 9px 10px; margin: 3px 4px; border-radius: var(--radius-sm); background: var(--panel-2); font-size: 0.92em; } .toprow:hover { filter: brightness(.98); } .toprow.me { background: var(--panel-2); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); } .place { width: 26px; text-align: center; color: var(--ink-soft); font-weight: 700; } .nick { flex: 1; color: var(--head); font-weight: 600; } .tmoney { color: var(--warn); font-weight: 600; } .stat { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 0.95em; } .stat:last-child { border-bottom: 0; } .stat span { color: var(--ink-soft); } .stat b { color: var(--head); } /* бизнес-строка */ .biz { margin: 6px 4px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .biz .lvl-badge, .lvl-badge { padding: 3px 8px; color: #fff; border-radius: 8px; background: linear-gradient(180deg, var(--head-2), var(--head)); font-weight: 700; font-size: 0.85em; } .biz .income, .income { color: var(--warn); font-weight: 600; } .biz-ico-img { float: left; margin: 3px 4px 0 0; } .main_menu { text-align: center; padding: 4px 0; } .main_menu .btni { min-width: 150px; margin: 4px; } /* меню-плитки */ .menu-list a { display: flex; align-items: center; gap: 8px; padding: 13px 16px; margin: 6px 4px; background: var(--panel); color: var(--ink); font-weight: 600; font-size: 0.95em; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .08s, filter .15s; } .menu-list a:hover { filter: brightness(.98); transform: translateX(2px); } .menu-list a.alt { border-left: 4px solid var(--warn); } /* чаты/форум/стены */ .msg { padding: 6px 2px; border-bottom: 1px solid var(--line); } .msg-author { color: var(--head-2); font-weight: 700; font-size: 0.9em; } .msg-time { color: var(--ink-soft); font-size: 0.75em; margin-left: 4px; } .msg-text { font-size: 0.92em; word-break: break-word; } .msg-del { float: right; background: none; border: 0; color: var(--ink-soft); cursor: pointer; } .msg-del:hover { color: var(--danger); } /* форум: закреплённый пост */ .topic-head { border-left: 4px solid var(--accent); } .topic-author { margin: 4px 0; } .topic-body { margin-top: 8px; white-space: pre-wrap; } .discussion-label { margin: 12px 4px 6px; font-weight: 700; color: var(--head); font-size: 0.95em; } .msg-card { margin-bottom: 6px !important; } /* BB-панель */ .bb-toolbar { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0; } .bb-btn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; color: var(--ink); } .bb-btn:hover { filter: brightness(.96); } /* нижний бар */ .footbar { margin: 12px 4px 6px; padding: 10px 6px; background: var(--panel-2); border-radius: var(--radius); display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; box-shadow: var(--shadow); } .footbar a:active { transform: scale(.9); } #rating_icon,#help_icon,#profile_icon,#chat_icon,#corp_icon,#forum_icon,#union_icon { display: inline-block; width: 46px; height: 46px; background-repeat: no-repeat; background-size: 46px 46px; } #rating_icon { background-image: url("/assets/img/foot/rating.png"); } #help_icon { background-image: url("/assets/img/foot/help.png"); } #profile_icon { background-image: url("/assets/img/foot/profile.png"); } #chat_icon { background-image: url("/assets/img/foot/chat.png"); } #corp_icon { background-image: url("/assets/img/foot/corp.png"); } #forum_icon { background-image: url("/assets/img/foot/forum.png"); } /* иконки-эмодзи в нижней панели (для действий без готовой картинки, например админ-ссылки) */ .foot-emoji-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; font-size: 26px; text-decoration: none; background: var(--panel); border-radius: 50%; border: 1px solid var(--line); } .foot-emoji-icon:hover { filter: brightness(1.1); } /* пагинация/подвал */ .pager { text-align: center; margin: 10px 0; } .pager a, .pager span { margin: 0 2px; } .foot { text-align: center; font-size: 0.8em; color: var(--ink-soft); padding: 12px 0 18px; } .foot a, .minor a { color: var(--head); } .minor { font-size: 0.85em; } .muted { color: var(--ink-soft); font-size: 0.9em; } .small { font-size: 0.8em; } .center { text-align: center; } .ok { color: var(--accent); } .tred { color: var(--danger); } .mt4 { margin-top: 8px; } .mb4 { margin-bottom: 8px; } hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; } /* смайлы/карты/прочее из старого стиля */ .smile { width: 21px; height: 21px; vertical-align: middle; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 10px; margin-top: 8px; } .card-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; text-align: center; } .card-img { width: 100%; max-width: 200px; border-radius: 10px; box-shadow: var(--shadow); margin-bottom: 6px; } .auth-card { background: var(--panel); margin: 20px 6px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } /* превью тем в настройках */ .theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .theme-card { border: 2px solid var(--line); border-radius: var(--radius); padding: 10px; cursor: pointer; text-align: center; background: var(--panel); } .theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(125,171,46,.25); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .theme-swatch { display: flex; gap: 4px; justify-content: center; margin-bottom: 6px; } .theme-swatch i { width: 22px; height: 22px; border-radius: 6px; display: inline-block; } /* ============================================================ Профиль — центрированная читаемая вёрстка (на переменных темы) ============================================================ */ .profile-head { padding: 14px 8px 6px; } .profile-avatar { font-size: 56px; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); } .profile-nick { font-size: 1.35em; font-weight: 700; color: var(--head); } .profile-status { font-size: 0.9em; margin-top: 2px; } .profile-about { margin: 8px auto 0; max-width: 320px; font-size: 0.9em; color: var(--ink-soft); font-style: italic; } /* баланс-карточки и доход/ангелы — две колонки */ .balance-row { display: flex; gap: 8px; margin: 8px 4px; } .balance-pill, .stat-box { flex: 1; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 8px; text-align: center; box-shadow: var(--shadow); } .balance-pill img { width: 26px; height: 26px; vertical-align: middle; } .balance-pill .bp-label { display: block; font-size: 0.78em; color: var(--ink-soft); margin: 4px 0 2px; } .balance-pill .bp-val { font-size: 1.1em; color: var(--accent); } .stat-box img { display: block; margin: 0 auto 4px; } .stat-box .sb-label { font-size: 0.8em; color: var(--ink-soft); } .stat-box .sb-val { font-size: 1.15em; color: var(--head); } .stat-box .sb-unit { font-size: 0.8em; color: var(--ink-soft); } /* инфо-строки профиля — ключ слева, значение справа, всё читаемо */ .info-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 0.92em; } .info-line:last-child { border-bottom: 0; } .info-line .il-key { color: var(--ink-soft); } .info-line .il-val { color: var(--ink); font-weight: 600; text-align: right; } .info-line .il-val.link { color: var(--accent); } .info-line .il-val.ok { color: var(--accent); } /* ============================================================ Акции — кликабельные плашки внизу страниц ============================================================ */ .promo-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 4px 4px; } .promo-chip { flex: 1; min-width: 140px; cursor: pointer; background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 22%, var(--panel)), var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: var(--radius); padding: 9px 12px; box-shadow: var(--shadow); transition: transform .08s; } .promo-chip { background: var(--panel-2); } /* фолбэк */ .promo-chip:active { transform: scale(.98); } .promo-chip .pc-head { display: block; font-weight: 700; color: var(--warn); font-size: 0.9em; } .promo-chip .pc-head i { font-style: normal; color: var(--ink-soft); font-weight: 400; font-size: 0.85em; } .promo-chip .pc-desc { display: none; margin-top: 6px; font-size: 0.85em; color: var(--ink); border-top: 1px solid var(--line); padding-top: 6px; } .promo-chip.open .pc-desc { display: block; } /* прогресс-бар контрактов */ .progress-bar { height: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 6px 0; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .3s; } /* название бизнеса в строке */ .biz-name { font-size: 0.82em; font-weight: 600; color: var(--head); margin: 2px 0 0 44px; line-height: 1.2; } /* ============================================================ АНИМАЦИИ — оживление интерфейса (чистый CSS, бережно к слабым телефонам) ============================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes popIn { 0% { opacity: 0; transform: scale(.92); } 60% { opacity: 1; transform: scale(1.02); } 100% { transform: scale(1); } } @keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes spinSlow { to { transform: rotate(360deg); } } @keyframes coinFlip { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } @keyframes flashOk { 0% { background-color: color-mix(in srgb, var(--accent) 40%, var(--panel)); } 100% { background-color: var(--panel); } } @keyframes slideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 400px; } } /* карточки плавно появляются при загрузке страницы */ .card, .bordered, .biz, .toprow { animation: fadeUp .32s ease both; } /* лёгкая каскадная задержка для первых строк-списков */ .toprow:nth-child(1){animation-delay:.02s} .toprow:nth-child(2){animation-delay:.05s} .toprow:nth-child(3){animation-delay:.08s} .toprow:nth-child(4){animation-delay:.11s} .toprow:nth-child(5){animation-delay:.14s} .toprow:nth-child(6){animation-delay:.17s} /* кнопки: мягкий отклик + всплытие важных */ .btn, .btni, .btnl, .btnr, .pg { transition: transform .1s, filter .15s, box-shadow .15s; } .btn:hover, .btnl:hover, .btnr:hover { transform: translateY(-1px); } .btn:active, .btni:active, .btnl:active, .btnr:active, .pg:active { transform: translateY(1px) scale(.98); } /* флеш-сообщение въезжает сверху */ .feedback { animation: popIn .3s ease both; } /* готовая награда/смена пульсирует, привлекая внимание (только явный класс) */ .ready-glow { animation: pulseGlow 2.2s ease-in-out infinite; } /* живой счётчик денег слегка «дышит» при обновлении */ #persec { display: inline-block; transition: transform .2s; } .persec-bump { animation: popIn .25s ease; } /* монета в шапке медленно вращается */ .coin-spin { animation: spinSlow 8s linear infinite; transform-origin: center; } /* иконки нижнего бара чуть подлетают по очереди */ .footbar a:hover img { animation: floaty 1.2s ease-in-out infinite; } /* логотип корпорации/союза парит */ .corp-logo-float { animation: floaty 3s ease-in-out infinite; } /* плашки акций мягко появляются и подсвечиваются */ .promo-chip { animation: fadeUp .4s ease both; } .promo-chip .pc-desc { animation: slideDown .3s ease; } /* прогресс-бар контрактов с бегущим бликом */ .progress-fill { background-image: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 40%, #fff6 50%, var(--accent-2) 60%, var(--accent) 100%); background-size: 200% 100%; animation: shimmer 2s linear infinite; } /* спин-кнопка обновления (рефреш) крутится при наведении */ .refresh-spin:active { animation: spinSlow .6s linear; } /* успешная покупка — короткая зелёная вспышка строки бизнеса (через :target/JS-класс) */ .flash-ok { animation: flashOk .8s ease; } /* уважение к настройке «меньше движения» — отключаем анимации */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============================================================ РУЛЕТКА — вращающийся барабан ============================================================ */ .roulette-wheel-wrap { position: relative; overflow: hidden; margin: 14px auto; max-width: 280px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--panel-2); box-shadow: var(--shadow); height: 72px; } .roulette-pointer { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); color: var(--danger); font-size: 20px; z-index: 3; text-shadow: 0 1px 2px rgba(0,0,0,.4); } .roulette-strip { display: flex; align-items: center; height: 100%; padding-left: 130px; /* старт примерно по центру */ will-change: transform; } .rsym { flex: 0 0 auto; width: 56px; text-align: center; font-size: 34px; line-height: 72px; border-right: 1px solid var(--line); } .roulette-wheel-wrap::before, .roulette-wheel-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none; } .roulette-wheel-wrap::before { left: 0; background: linear-gradient(90deg, var(--panel-2), transparent); } .roulette-wheel-wrap::after { right: 0; background: linear-gradient(270deg, var(--panel-2), transparent); } .roulette-result-box { min-height: 8px; } .roulette-result { margin: 8px auto; padding: 10px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 18%, var(--panel)); background: var(--panel-2); color: var(--head); font-weight: 700; font-size: 1.05em; animation: popIn .4s ease both, flashOk 1s ease; } /* ============================================================ СУНДУКИ — тряска и открытие ============================================================ */ .chest-stage { position: relative; height: 130px; display: flex; align-items: center; justify-content: center; margin: 10px 0; } .chest-big { font-size: 84px; line-height: 1; cursor: pointer; user-select: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); transition: transform .2s; } .chest-glow { position: absolute; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--gold), transparent 70%); opacity: 0; pointer-events: none; } .chest-glow.flash { animation: chestFlash .6s ease; } @keyframes chestFlash { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: .9; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.8); } } @keyframes chestShake { 0%,100% { transform: rotate(0) translateX(0); } 20% { transform: rotate(-8deg) translateX(-3px); } 40% { transform: rotate(7deg) translateX(3px); } 60% { transform: rotate(-6deg) translateX(-2px); } 80% { transform: rotate(5deg) translateX(2px); } } .chest-big.shaking { animation: chestShake .25s linear infinite; } @keyframes chestBurst { 0% { transform: scale(1); } 50% { transform: scale(1.25) translateY(-6px); } 100% { transform: scale(1); } } .chest-big.bursting { animation: chestBurst .45s ease; } .chest-prize { animation: popIn .45s ease both; font-size: 1.05em; } /* ============================================================ Админка — вкладки ============================================================ */ .admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 4px; } .admin-tabs .atab { flex: 1; min-width: 90px; text-align: center; padding: 9px 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: 0.85em; font-weight: 600; text-decoration: none; transition: background .15s, transform .08s; } .admin-tabs .atab:hover { filter: brightness(.97); } .admin-tabs .atab.active { background: linear-gradient(180deg, var(--head-2), var(--head)); color: #fff; border-color: var(--head); } .feat-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 4px 0; cursor: pointer; } .admin-tabs + a.btnl { margin-top: 4px; } /* ============================================================ Фирменные штрихи темы «Туманность» (только при data-theme="nebula") ============================================================ */ /* числа дохода/баланса — моноширинная «телеметрия» */ [data-theme="nebula"] #money, [data-theme="nebula"] #persec, [data-theme="nebula"] .income, [data-theme="nebula"] .biz-ico-img + * .income { font-family: "JetBrains Mono", monospace; letter-spacing: -.3px; } /* доход бизнеса бирюзовой «медью» */ [data-theme="nebula"] .income { color: var(--copper); } /* готовые награды светятся медью, а не оранжевым */ [data-theme="nebula"] .ready-glow { box-shadow: 0 0 0 0 color-mix(in srgb, var(--copper) 55%, transparent); animation: pulseCopper 2.2s ease-in-out infinite; } @keyframes pulseCopper { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--copper) 55%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--copper) 0%, transparent); } } /* стеклянная нижняя навигация */ [data-theme="nebula"] .footbar { background: rgba(20,18,31,.82); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 20px; } /* заголовки названий бизнесов — космическим шрифтом крупнее */ [data-theme="nebula"] .biz-name { font-family: "Unbounded", sans-serif; font-weight: 600; } /* монета в шапке с медным ободком */ [data-theme="nebula"] .coin-spin { filter: drop-shadow(0 0 6px rgba(255,207,84,.5)); } /* ============================================================ Туманность — фоны шапки/кнопок тёмные (т.к. --head теперь светлый для текста) ============================================================ */ [data-theme="nebula"] .topbar, [data-theme="nebula"] td .btnl, [data-theme="nebula"] .topbar .bar-main { background: linear-gradient(180deg, var(--panel-2), var(--panel)) !important; border: 1px solid var(--line); } [data-theme="nebula"] .menu-list a, [data-theme="nebula"] .card, [data-theme="nebula"] .bordered { background: linear-gradient(180deg, var(--panel-2), var(--panel)); } /* активная вкладка админки — на реголите, а не на сиреневом */ [data-theme="nebula"] .admin-tabs .atab.active { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: var(--accent); } /* заголовки в nebula — чуть ярче для контраста */ [data-theme="nebula"] h2, [data-theme="nebula"] h3, [data-theme="nebula"] .biz-name, [data-theme="nebula"] .profile-nick { color: var(--ink); } /* прогноз ангелов — три ровные колонки */ .angel-forecast .stat { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .angel-forecast .stat span:nth-child(2), .angel-forecast .stat b:nth-child(2) { text-align: right; } .angel-forecast .stat span:last-child, .angel-forecast .stat b:last-child { text-align: right; } /* быстрые действия в карточке игрока — сетка кнопок */ .quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .quick-grid form { margin: 0; } .quick-grid .btn { width: 100%; padding: 12px 4px; font-size: 0.9em; } /* кнопки прокачки бизнеса: цена + ×10 ×100 МАКС в ряд */ .buy-btns { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .buy-btns form { margin: 0; display: inline; } .buy-btns .btni { padding: 7px 10px; font-size: 0.8em; } .btni.xn { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); min-width: 42px; } .btni.xmax { background: linear-gradient(180deg, var(--warn-2), var(--warn)); color: #3a2600; font-weight: 700; min-width: 50px; } /* экран «с возвращением» — офлайн-доход */ .welcome-back { animation: fadeUp .5s ease; } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ежедневные задания */ .task-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); } .task-row:last-child { border-bottom: 0; } .task-info { flex: 1; min-width: 0; } .task-info > span { font-size: 0.9em; } .task-bar { height: 6px; background: var(--panel-2); border-radius: 4px; margin-top: 4px; overflow: hidden; } .task-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; transition: width .3s; } .task-done { font-size: 1.1em; } /* туториал новичка */ .tutorial { animation: fadeUp .5s ease; } .tut-step { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.9em; line-height: 1.5; } .tut-step:last-of-type { border-bottom: 0; } /* колесо фортуны */ .wheel-emoji { font-size: 64px; margin: 10px 0; display: inline-block; } .wheel-emoji.ready { animation: spinSlow 4s linear infinite; } @keyframes spinSlow { to { transform: rotate(360deg); } } .wheel-prizes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0; } .wheel-prizes span { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 0.85em; } /* кнопка-ссылка внутри письма */ .msg-btn { display: inline-block; margin-top: 8px; padding: 8px 16px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; border-radius: 10px; font-weight: 600; font-size: 0.9em; text-decoration: none; box-shadow: var(--shadow-btn); } .msg-btn:hover { filter: brightness(1.07); } /* ============================================================ Сезонный пропуск (баттлпасс) — hero-блок и сетка карточек ============================================================ */ .bp-hero { background: linear-gradient(135deg, var(--head-2), var(--head)); border-radius: var(--radius); padding: 16px; margin: 8px 4px 14px; box-shadow: var(--shadow); color: #fff; position: relative; overflow: hidden; } .bp-hero::before { content: ''; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); } .bp-hero-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .bp-ticket { font-size: 34px; flex: 0 0 auto; animation: bpFloat 3s ease-in-out infinite; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); } @keyframes bpFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } } .bp-hero-text { flex: 1; min-width: 0; } .bp-hero-text h2 { margin: 0; font-size: 1.25em; color: #fff; } .bp-sub { font-size: .8em; opacity: .8; } .bp-days { text-align: center; flex: 0 0 auto; background: rgba(255,255,255,.12); border-radius: 12px; padding: 6px 12px; } .bp-days-num { font-size: 1.3em; font-weight: 800; line-height: 1; } .bp-days-label { font-size: .68em; opacity: .85; white-space: nowrap; } .bp-ring-row { display: flex; gap: 10px; margin-bottom: 10px; } .bp-stat { flex: 1; background: rgba(255,255,255,.1); border-radius: 10px; padding: 8px; text-align: center; } .bp-stat-num { font-size: 1.15em; font-weight: 800; } .bp-stat-label { font-size: .72em; opacity: .8; } .bp-bar { height: 12px; background: rgba(0,0,0,.25); border-radius: 8px; overflow: hidden; position: relative; } .bp-bar-fill { height: 100%; border-radius: 8px; position: relative; overflow: hidden; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s ease; } .bp-bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-100%); animation: bpShimmer 2.4s linear infinite; } @keyframes bpShimmer { to { transform: translateX(280%); } } .bp-hint { font-size: .75em; opacity: .8; margin: 8px 0 0; line-height: 1.4; } .bp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 4px; } .bp-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 10px; text-align: center; position: relative; box-shadow: var(--shadow); animation: bpCardIn .4s ease backwards; transition: transform .15s; } .bp-grid .bp-card:nth-child(1) { animation-delay: .01s; } .bp-grid .bp-card:nth-child(2) { animation-delay: .03s; } .bp-grid .bp-card:nth-child(3) { animation-delay: .05s; } .bp-grid .bp-card:nth-child(4) { animation-delay: .07s; } .bp-grid .bp-card:nth-child(n+5) { animation-delay: .08s; } @keyframes bpCardIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } } .bp-card-lvl { position: absolute; top: 8px; left: 10px; font-size: .72em; font-weight: 700; color: var(--ink-soft); } .bp-card-icon { font-size: 30px; margin: 10px 0 2px; } .bp-card-reward { display: block; } .bp-big { font-size: 1.3em; font-weight: 800; color: var(--head); } .bp-unit { font-size: .72em; color: var(--ink-soft); margin-left: 3px; } .bp-extras { font-size: .68em; color: var(--ink-soft); margin-top: 2px; } .bp-card-need { font-size: .72em; color: var(--ink-soft); margin: 6px 0 8px; } .bp-status { font-size: .82em; font-weight: 700; padding: 7px 4px; border-radius: 8px; } .bp-status-done { background: rgba(52,147,110,.12); color: var(--accent-2, #2b7a5b); } .bp-status-locked { background: var(--panel-2); color: var(--ink-soft); } .bp-claim-form { margin: 0; } .bp-claim-btn { width: 100%; padding: 8px 4px; border: none; border-radius: 8px; cursor: pointer; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 700; font-size: .85em; box-shadow: var(--shadow-btn); transition: transform .1s; } .bp-claim-btn:active { transform: scale(.95); } /* доступная к сбору карточка — светится и слегка пульсирует */ .bp-card.bp-ready { border-color: var(--accent); animation: bpCardIn .4s ease backwards, bpPulseGlow 1.8s ease-in-out infinite; } @keyframes bpPulseGlow { 0%,100% { box-shadow: var(--shadow), 0 0 0 0 rgba(255,106,61,.35); } 50% { box-shadow: var(--shadow), 0 0 0 8px rgba(255,106,61,0); } } /* уже собранная — приглушена */ .bp-card.bp-claimed { opacity: .55; } .bp-card.bp-claimed .bp-card-icon { filter: grayscale(.4); } /* заблокированная — тусклее */ .bp-card.bp-locked .bp-card-icon { opacity: .5; filter: grayscale(.5); } .bp-card.bp-locked .bp-big { color: var(--ink-soft); } /* финальный (мега) уровень — крупнее и золотой акцент */ .bp-card.bp-mega { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(255,207,84,.14), var(--panel)); border-color: var(--gold); } .bp-card.bp-mega .bp-card-icon { font-size: 40px; } .bp-card.bp-mega .bp-big { font-size: 1.6em; } /* подсказка "следующая цель" на ближайшей запертой карточке */ .bp-card.bp-next { border-color: var(--accent-2); border-width: 2px; animation: bpCardIn .4s ease backwards, bpNextGlow 2.2s ease-in-out infinite; } @keyframes bpNextGlow { 0%,100% { box-shadow: var(--shadow), 0 0 0 0 rgba(255,145,82,.25); } 50% { box-shadow: var(--shadow), 0 0 0 6px rgba(255,145,82,0); } } .bp-next-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; font-size: .62em; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25); z-index: 1; } /* баттлпасс — блок "За что даются очки" */ .bp-tasks { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); margin: 10px 4px; overflow: hidden; box-shadow: var(--shadow); } .bp-tasks-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 0.95em; color: var(--ink); user-select: none; } .bp-tasks-arrow { transition: transform .25s ease; color: var(--accent); } .bp-tasks-head.open .bp-tasks-arrow { transform: rotate(180deg); } .bp-tasks-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding: 0 14px; } .bp-tasks-body.open { max-height: 600px; padding: 0 14px 12px; } .bp-task-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.9em; } .bp-task-row:last-of-type { border-bottom: 0; } .bp-task-ico { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; } .bp-task-name { flex: 1; color: var(--ink); } .bp-task-pts { font-weight: 700; color: var(--accent); background: var(--panel-2); padding: 2px 8px; border-radius: 10px; font-size: 0.85em; } .bp-tasks-note { font-size: 0.8em; color: var(--ink-soft); margin-top: 8px; text-align: center; } /* ============================================================ Босс-астероид ============================================================ */ .boss-hero { text-align: center; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 14px; margin: 10px 4px; box-shadow: var(--shadow); } .boss-emoji { font-size: 64px; display: inline-block; margin-bottom: 6px; } .boss-emoji.boss-alive { animation: bossFloat 3s ease-in-out infinite, bossSpin 12s linear infinite; } .boss-emoji.boss-dead { opacity: .3; filter: grayscale(1); } @keyframes bossFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes bossSpin { to { transform: rotate(360deg); } } .boss-hp-wrap { margin: 14px 0 10px; } .boss-hp-bar { height: 22px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; position: relative; } .boss-hp-fill { height: 100%; background: linear-gradient(90deg, #e8413c, #ff8a3d); border-radius: 12px; transition: width .4s ease; position: relative; overflow: hidden; } .boss-hp-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-100%); animation: shimmer 2s linear infinite; } .boss-hp-label { margin-top: 6px; font-family: monospace; font-weight: 700; font-size: 0.9em; color: var(--ink); } .boss-atk-btn { font-size: 1.05em; padding: 14px; margin-top: 4px; animation: bossBtnPulse 1.6s ease-in-out infinite; } .boss-atk-btn:disabled { animation: none; opacity: .6; } @keyframes bossBtnPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(232,65,60,.4); } 50% { box-shadow: 0 0 0 8px rgba(232,65,60,0); } } /* ============================================================ Празднование вехи (первый миллион/миллиард и т.д.) ============================================================ */ .ms-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; animation: msFadeIn .3s ease; } @keyframes msFadeIn { from { opacity: 0; } to { opacity: 1; } } .ms-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .ms-confetti i { position: absolute; top: -20px; width: 8px; height: 14px; opacity: .9; animation: msFall 2.6s linear infinite; border-radius: 2px; } @keyframes msFall { to { transform: translateY(110vh) rotate(540deg); opacity: 0; } } .ms-box { position: relative; z-index: 1; text-align: center; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 2px solid var(--accent); border-radius: var(--radius); padding: 32px 24px; max-width: 320px; margin: 0 16px; animation: msPopIn .5s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 12px 40px rgba(0,0,0,.5); } @keyframes msPopIn { 0% { transform: scale(.3) translateY(30px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } .ms-emoji { font-size: 52px; animation: msBounce 1s ease-in-out infinite; } @keyframes msBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .ms-box h2 { margin: 8px 0; font-size: 1.2em; } /* ============================================================ Сочность: вспышка смены разряда + комбо-бейдж ============================================================ */ .suffix-flash { animation: suffixFlash .6s ease; } @keyframes suffixFlash { 0% { color: var(--gold); text-shadow: 0 0 12px var(--gold); transform: scale(1.15); } 100% { color: inherit; text-shadow: none; transform: scale(1); } } .combo-badge { position: fixed; top: 18%; left: 50%; transform: translate(-50%, -10px) scale(.7); background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 800; font-size: 1.1em; padding: 8px 18px; border-radius: 20px; box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 500; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .combo-badge.combo-show { opacity: 1; transform: translate(-50%, 0) scale(1); } .combo-badge.combo-pop { animation: comboPop .3s ease; } @keyframes comboPop { 0% { transform: translate(-50%, 0) scale(1.3); } 100% { transform: translate(-50%, 0) scale(1); } } /* ============================================================ Центр активности (хаб) ============================================================ */ .hub-row { display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 8px 4px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .1s ease; } .hub-row:active { transform: scale(.98); } .hub-row.hub-hot { border-color: var(--accent); } .hub-ico { font-size: 26px; flex-shrink: 0; width: 34px; text-align: center; } .hub-info { flex: 1; display: flex; flex-direction: column; gap: 2px; } .hub-info b { font-size: 0.95em; } .hub-badge { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 700; font-size: 0.85em; padding: 5px 11px; border-radius: 14px; animation: hubPulse 1.6s ease-in-out infinite; white-space: nowrap; } @keyframes hubPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,106,61,.4); } 50% { box-shadow: 0 0 0 6px rgba(255,106,61,0); } } .hub-ok { color: var(--ink-soft); font-size: 0.85em; font-weight: 600; } /* ============================================================ Боевая система босса: персонаж и снаряжение ============================================================ */ .boss-char { text-align: center; } .boss-hp-bar-player .boss-hp-fill-player { background: linear-gradient(90deg, #36d6b0, #4de8c2) !important; } .boss-death { padding: 10px 0; animation: bossDeathIn .4s ease; } @keyframes bossDeathIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } } .boss-death #respawnTimer { color: var(--danger); font-family: monospace; font-size: 1.1em; } .gear-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); } .gear-row:last-child { border-bottom: 0; } .gear-ico { font-size: 28px; flex-shrink: 0; width: 34px; text-align: center; } .gear-info { flex: 1; min-width: 0; } .gear-info b { font-size: 0.92em; } /* ============================================================ Магазин снаряжения: манекен, вкладки редкости, карточки предметов ============================================================ */ /* большой манекен на странице магазина: 6 слотов в вертикальной раскладке */ /* (старый .mannequin убран — заменён полным блоком mn-* ниже) */ .mannequin-slot { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; transition: box-shadow .2s ease; } .mannequin-ico { font-size: 26px; flex-shrink: 0; width: 32px; text-align: center; } .mannequin-label { font-size: 0.78em; color: var(--ink-soft); width: 54px; flex-shrink: 0; } .mannequin-set { flex: 1; font-size: 0.82em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mannequin-lvl { font-size: 0.75em; color: var(--ink-soft); flex-shrink: 0; } .mannequin-empty { flex: 1; font-size: 0.8em; color: var(--ink-soft); opacity: .6; font-style: italic; } /* мини-манекен на странице босса: компактная сетка иконок */ .mannequin-mini { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0; } .mannequin-mini .mannequin-slot { width: 52px; height: 52px; flex-direction: column; justify-content: center; padding: 4px; border-width: 2px; border-radius: 12px; gap: 2px; } .mannequin-mini .mannequin-ico { font-size: 22px; width: auto; } .mannequin-mini .mannequin-lvl { font-size: 0.65em; } /* вкладки категорий редкости */ .tier-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 4px; } .tier-tab { flex: 1; min-width: 80px; text-align: center; padding: 8px 6px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 0.8em; font-weight: 700; text-decoration: none; background: var(--panel-2); transition: transform .1s ease; } .tier-tab.active { color: #fff !important; transform: scale(1.03); } /* карточка сета — раскрывающийся список (details/summary) */ .gear-set { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1.5px solid var(--line); border-radius: var(--radius); margin: 8px 4px; overflow: hidden; box-shadow: var(--shadow); } .gear-set summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; cursor: pointer; font-weight: 700; list-style: none; } .gear-set summary::-webkit-details-marker { display: none; } .gear-set-owned { background: var(--panel-2); font-size: 0.7em; padding: 2px 8px; border-radius: 10px; color: var(--ink-soft); } .gear-set-body { padding: 0 10px 10px; } /* строка отдельного предмета внутри сета */ .gear-piece { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--line); } .gear-piece:first-child { border-top: 0; } .gear-piece-ico { font-size: 26px; width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--panel-2); border: 2px solid var(--line); border-radius: 10px; } .gear-piece-info { flex: 1; min-width: 0; } .gear-piece-info b { font-size: 0.9em; } .gear-piece-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .gear-piece-actions .btn { padding: 6px 10px; font-size: 0.78em; } /* ============================================================ Манекен персонажа в магазине снаряжения — марсианский HUD-стиль ============================================================ */ .mn-card { position: relative; overflow: visible; padding-top: 22px; } /* показатель «Мощь» — крупная цифра над манекеном */ .mn-power { text-align: center; font-size: 1.15em; font-weight: 800; letter-spacing: .02em; color: var(--gold); margin-bottom: 14px; text-shadow: 0 0 16px rgba(255, 207, 84, .5); } .mn-power b { font-size: 1.15em; } /* HUD-рамка вокруг манекена: тонкая линия + угловые скобки как на сканере */ .mannequin-frame { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 18px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(ellipse at 50% 30%, rgba(255,106,61,.08), transparent 65%), var(--panel-2); } .mn-corner { position: absolute; width: 20px; height: 20px; pointer-events: none; z-index: 2; border: 2px solid var(--accent); opacity: .8; } .mn-corner-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; } .mn-corner-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; } .mn-corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-radius: 0 0 0 6px; } .mn-corner-br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 6px 0; } /* колонки слотов по бокам портрета */ .mn-col { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } /* один слот снаряжения */ .mn-slot { width: 68px; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); transition: transform .15s ease, box-shadow .2s ease; } .mn-slot:active { transform: scale(.95); } .mn-ico { font-size: 24px; line-height: 1; } .mn-label { font-size: 0.6em; color: var(--ink-soft); text-align: center; line-height: 1.1; } .mn-lvl { font-size: 0.65em; font-weight: 700; } .mn-empty { font-size: 0.7em; color: var(--ink-soft); opacity: .5; } /* портрет персонажа в центре */ .mn-portrait { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 110px; } .mn-portrait-glow { position: absolute; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(255,106,61,.35), transparent 70%); animation: mnGlowPulse 2.4s ease-in-out infinite; z-index: 0; } @keyframes mnGlowPulse { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } } .mn-portrait-figure { position: relative; z-index: 1; font-size: 62px; line-height: 1; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); animation: mnFloat 3.5s ease-in-out infinite; } @keyframes mnFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .mn-portrait-stats { position: relative; z-index: 1; display: flex; gap: 10px; font-size: 0.78em; font-weight: 700; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 5px 12px; } /* ============================================================ Крестики-нолики: доска, лобби, статистика ============================================================ */ .kn-wrap { padding-top: 18px; } .kn-hero-ico { font-size: 48px; margin-bottom: 4px; animation: bpFloat 3s ease-in-out infinite; } /* верхняя панель "игрок vs игрок" с банком по центру */ .kn-vs { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 16px; } .kn-side { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; } .kn-side-sign { font-size: 30px; line-height: 1; } .kn-side-name { font-size: 0.78em; color: var(--ink-soft); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kn-bank { font-size: 0.72em; font-weight: 700; color: var(--gold); text-align: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; line-height: 1.3; } /* статус хода */ .kn-status { display: inline-block; padding: 8px 18px; border-radius: 20px; font-weight: 700; font-size: 0.9em; margin-bottom: 14px; } .kn-status-turn { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; animation: bossBtnPulse 1.6s ease-in-out infinite; } .kn-status-wait { background: var(--panel-2); color: var(--ink-soft); border: 1px solid var(--line); } /* игровое поле 3×3 */ .kn-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 270px; margin: 0 auto; } .kn-cell, .kn-cell-form { margin: 0; } .kn-cell { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; border-radius: 14px; border: 2px solid var(--line); background: var(--panel-2); transition: transform .1s ease, background .15s ease; } .kn-cell-empty { cursor: pointer; } .kn-cell-empty:hover { background: var(--panel); border-color: var(--accent); } .kn-cell-empty:active { transform: scale(.92); } .kn-cell.static.kn-x { color: var(--accent); animation: knPop .25s ease; } .kn-cell.static.kn-o { color: var(--copper, #4fc3f7); animation: knPop .25s ease; } @keyframes knPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* статистика игрока над лобби */ .kn-stats-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0 4px; } .kn-stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 5px 11px; font-size: 0.82em; font-weight: 700; } .kn-stat-win { color: #4caf50; } .kn-stat-draw { color: var(--ink-soft); } .kn-stat-lose { color: var(--danger); } /* быстрый выбор ставки */ .kn-chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; } .kn-chip { background: var(--panel-2); border: 1.5px solid var(--line); color: var(--ink); border-radius: 12px; padding: 8px 14px; font-weight: 700; font-size: 0.88em; cursor: pointer; transition: transform .1s ease; } .kn-chip:active { transform: scale(.94); } .kn-chip.active { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; border-color: var(--accent); }