/* Сайт-компаньон AION 2 — «Эфирное стекло». Две темы-противоположности поверх одной системы: асмодиане — тёмное фиолетовое стекло (по умолчанию), элийцы — светлое ледяное/лавандовое стекло (html[data-faction="elyos"]). Арт-направление: docs/design/ART-DIRECTION.md. Шрифты локальные (fonts.css): Unbounded — заголовки экранов и панелей и крупные числа, Onest — интерфейс и текст, Forum — только логотип и заставка, JetBrains Mono — клавиши. Моушен — motion.js; здесь только CSS-часть. Двигаем transform/opacity/clip-path, backdrop-filter не анимируем. */ /* ---------- Токены, которые плавно перетекают при смене стороны (CSS @property) ---------- */ @property --bg0 { syntax: ''; inherits: true; initial-value: #0B0814; } @property --bg1 { syntax: ''; inherits: true; initial-value: #120C22; } @property --glass { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, .045); } @property --glass-2 { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, .075); } @property --glass-pop { syntax: ''; inherits: true; initial-value: rgba(24, 17, 40, .9); } @property --edge { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, .08); } @property --edge-2 { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, .14); } @property --spec-c { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, .07); } @property --well { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, .04); } @property --well-2 { syntax: ''; inherits: true; initial-value: rgba(255, 255, 255, .075); } @property --ink { syntax: ''; inherits: true; initial-value: #F3F0FA; } @property --ink-2 { syntax: ''; inherits: true; initial-value: #BDB5D3; } @property --ink-3 { syntax: ''; inherits: true; initial-value: #948BAE; } @property --accent { syntax: ''; inherits: true; initial-value: #8B5CF6; } @property --accent-2 { syntax: ''; inherits: true; initial-value: #A855F7; } @property --accent-hi { syntax: ''; inherits: true; initial-value: #B79CFF; } @property --accent-soft { syntax: ''; inherits: true; initial-value: rgba(139, 92, 246, .16); } @property --accent-glow { syntax: ''; inherits: true; initial-value: rgba(139, 92, 246, .45); } @property --btn-a { syntax: ''; inherits: true; initial-value: #8456F0; } @property --btn-b { syntax: ''; inherits: true; initial-value: #6A3BDF; } @property --done { syntax: ''; inherits: true; initial-value: #E8C478; } @property --done-ink { syntax: ''; inherits: true; initial-value: #E8C478; } @property --hot { syntax: ''; inherits: true; initial-value: #FF6B8B; } @property --ok { syntax: ''; inherits: true; initial-value: #5EE0A0; } @property --chart-line { syntax: ''; inherits: true; initial-value: #9A7AF0; } @property --chart-target { syntax: ''; inherits: true; initial-value: #B08936; } @property --chart-a { syntax: ''; inherits: true; initial-value: #8B5CF6; } @property --spot { syntax: ''; inherits: true; initial-value: rgba(167, 139, 250, .10); } @property --rim { syntax: ''; inherits: true; initial-value: rgba(196, 170, 255, .8); } /* значения для анимаций */ @property --p { syntax: ''; inherits: true; initial-value: 0; } @property --spin { syntax: ''; inherits: false; initial-value: 0deg; } @property --ang { syntax: ''; inherits: false; initial-value: 0deg; } @property --sw { syntax: ''; inherits: false; initial-value: 1; } :root { color-scheme: dark; /* асмодиане: ночь Пандемониума — глубокий фиолет, багрянец, холодное серебро */ --bg0: #0B0814; --bg1: #120C22; --glass: rgba(255, 255, 255, .045); --glass-2: rgba(255, 255, 255, .075); --glass-pop: rgba(24, 17, 40, .9); --edge: rgba(255, 255, 255, .08); --edge-2: rgba(255, 255, 255, .14); --spec-c: rgba(255, 255, 255, .07); --well: rgba(255, 255, 255, .04); --well-2: rgba(255, 255, 255, .075); --ink: #F3F0FA; --ink-2: #BDB5D3; --ink-3: #948BAE; --ink-4: rgba(243, 240, 250, .3); --accent: #8B5CF6; --accent-2: #A855F7; --accent-hi: #B79CFF; --accent-soft: rgba(139, 92, 246, .16); --accent-glow: rgba(139, 92, 246, .45); --btn-a: #8456F0; --btn-b: #6A3BDF; --on-accent: #FFFFFF; --done: #E8C478; --done-ink: #E8C478; --hot: #FF6B8B; --ok: #5EE0A0; --alert: #EC3639; /* цвета графиков проверены валидатором dataviz: полоса светлоты и контраст ≥ 3:1 к стеклу */ --chart-line: #9A7AF0; --chart-a: #8B5CF6; --chart-target: #B08936; --spot: rgba(167, 139, 250, .10); --rim: rgba(196, 170, 255, .8); --shadow: 0 20px 60px rgba(0, 0, 0, .45); --shadow-pop: 0 30px 80px rgba(0, 0, 0, .6); --blur: 24px; --sat: 140%; --hero-a: #1A0F35; --hero-b: #4C1D95; --hero-c: #8B5CF6; --art-dim: .78; /* грейды — из terms.json (цвет клиента) */ --g-common: #A7ADB8; --g-rare: #5FCB6A; --g-legend: #5C8DFF; --g-unique: #F2C14E; --g-hero: #FF8A4C; --g-special: #3CC8C0; --gt: 0%; /* насколько затемнять цвет грейда в тексте (светлая тема) */ /* шрифты: Unbounded — то, что называет и считает (заголовки, крупные числа); Onest — всё, что читают и нажимают */ --font-ui: 'Onest', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-display: 'Unbounded', 'Onest', 'Segoe UI', system-ui, sans-serif; --font-num: var(--font-display); /* заголовки панелей — Onest 600: широкая кириллица Unbounded в «Показателях персонажа» звучала громко; Unbounded — H1 и числа */ --font-h2: var(--font-ui); --font-brand: 'Forum', 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; --font-body: var(--font-ui); /* шкала: крупные заголовки 32–48, числа 32–40, заголовки панелей 16, текст 14–15, вторичное 12–13 */ --fs-hero: clamp(36px, 3.3vw, 48px); --fs-h1: clamp(32px, 2.6vw, 40px); --fs-greet: clamp(30px, 2.4vw, 36px); --fs-num: clamp(32px, 2.4vw, 38px); --fs-h2: 17px; --fs-h3: 16px; --fs-body: 15px; --fs-ui: 14px; --fs-sm: 13px; --fs-xs: 12px; /* начертания: Unbounded широкий — 600 уже жирный; приветствие светлое (300), чтобы главным оставался герой */ --fw-body: 400; --fw-display: 600; --fw-greet: 300; --fw-num: 600; --fw-h2: 600; /* трекинг: широкие буквы Unbounded на крупном кегле чуть сжимаем */ --ls-display: -.02em; --ls-num: -.02em; --ls-h2: -.005em; /* формы */ --r-xs: 6px; --r-s: 10px; --r-m: 14px; --r-l: 22px; --r-xl: 28px; --gap: 20px; /* движение */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.55, 0, 1, .45); --ease-io: cubic-bezier(.65, 0, .35, 1); --spring: linear(0, 0.067, 0.221, 0.406, 0.586, 0.741, 0.862, 0.949, 1.006, 1.037, 1.051, 1.053, 1.047, 1.038, 1.028, 1.019, 1.011, 1.006, 1.002, 0.999, 0.998, 0.997, 0.997, 0.998, 1); --spring-soft: linear(0, 0.081, 0.249, 0.434, 0.601, 0.735, 0.835, 0.905, 0.951, 0.979, 0.995, 1.003, 1.007, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.001, 1); /* Смена стороны — без перетекания токенов: новая тема раскрывается кругом от нажатой карточки (motion.js themeSwap). Интерполяция цветов давала на 300 мс блёклую серую середину, где пропадал контраст. */ } /* элийцы: свет Элизиума — светлое ледяное стекло, лазурь, индиго, слоновая кость; золото — только «реликвии» */ :root[data-faction="elyos"] { color-scheme: light; --bg0: #EEF1FA; --bg1: #E3E6F7; --glass: rgba(255, 255, 255, .58); --glass-2: rgba(255, 255, 255, .74); --glass-pop: rgba(250, 251, 255, .94); --edge: rgba(255, 255, 255, .85); --edge-2: rgba(110, 120, 190, .26); --spec-c: rgba(255, 255, 255, .95); --well: rgba(91, 96, 160, .06); --well-2: rgba(91, 96, 160, .1); --ink: #1B1E3A; --ink-2: #464C6B; --ink-3: #5F6585; --ink-4: rgba(27, 30, 58, .3); --accent: #4F7BFF; --accent-2: #5B5BD6; --accent-hi: #3152D4; --accent-soft: rgba(79, 123, 255, .13); --accent-glow: rgba(79, 123, 255, .32); --btn-a: #3F63E6; --btn-b: #3A55D4; /* белый текст на верхе градиента — 5,07:1 */ --done: #C99A3C; --done-ink: #87620F; --hot: #C8323F; --ok: #12663F; /* золото у элийцев — только реликвиям (грейды, эмблема); служебные отметки — бирюза #1A7FA0 (4,05:1) */ --chart-line: #5B5BD6; --chart-a: #6F7CF4; --chart-target: #1A7FA0; --teal: #1A7FA0; --spot: rgba(255, 255, 255, .6); --rim: rgba(91, 91, 214, .55); --shadow: 0 20px 50px rgba(80, 90, 160, .15); --shadow-pop: 0 30px 70px rgba(70, 80, 150, .25); --sat: 160%; --hero-a: #DDE6FF; --hero-b: #C9C2FF; --hero-c: #4F7BFF; --gt: 42%; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass: rgba(26, 19, 44, .94); --glass-2: rgba(34, 26, 56, .96); } :root[data-faction="elyos"] { --glass: rgba(250, 251, 255, .95); --glass-2: rgba(255, 255, 255, .97); } } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } html, body { margin: 0; min-height: 100%; } body { background: linear-gradient(180deg, var(--bg1), var(--bg0) 60%) fixed, var(--bg0); color: var(--ink); font: var(--fw-body) var(--fs-body)/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--accent-hi); } img { max-width: 100%; } :focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; } #view:focus, #view:focus-visible { outline: none; } /* первая загрузка: пока сайт спрашивает сервер — эмблема, а не пустой экран (в оверлее не показываем) */ .boot { position: fixed; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; } .boot img { width: 150px; height: auto; opacity: .9; animation: bootp 1.6s var(--ease-io) infinite alternate; } .boot i { width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent-hi), transparent) 0 0 / 50% 100% no-repeat; animation: loadbar 1.1s linear infinite; } @keyframes bootp { from { opacity: .45; } to { opacity: .95; } } html.ov-boot .boot { display: none; } ::selection { background: var(--accent-soft); } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; } h1 { font: var(--fw-display) 30px/1.12 var(--font-display); letter-spacing: var(--ls-display); } h2 { font: var(--fw-h2) var(--fs-h2)/1.3 var(--font-h2); letter-spacing: var(--ls-h2); } h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: 0; } p { margin: 0 0 8px; } .num { font-variant-numeric: tabular-nums; font-weight: 600; } .counting { font-variant-numeric: tabular-nums; } .muted { color: var(--ink-2); } .faint { color: var(--ink-3); } .small { font-size: var(--fs-sm); } small.u { font-size: max(.6em, 12px); font-weight: 500; color: var(--ink-3); } .up { color: var(--ok); } .down { color: var(--hot); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .picto { display: block; } .i-lock { width: 14px; height: 14px; } em { font-style: normal; } /* ---------- Фон: арт стороны, туман (асмодиане) и переливающиеся сферы (элийцы) ---------- */ .atrea { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: var(--bg0); } .atrea-art { position: absolute; inset: -4% -2% auto auto; width: min(1500px, 108vw); height: 112vh; opacity: 0; transition: opacity 1.1s var(--ease-io); background-repeat: no-repeat; background-size: cover; } .atrea-art.a { background-image: image-set(url('/img/art/w/daeva_asmodian_wings-1600.webp') 1x); background-position: 70% 20%; -webkit-mask-image: radial-gradient(120% 90% at 78% 18%, #000 18%, rgba(0, 0, 0, .35) 55%, transparent 78%); mask-image: radial-gradient(120% 90% at 78% 18%, #000 18%, rgba(0, 0, 0, .35) 55%, transparent 78%); } :root:not([data-faction="elyos"]) .atrea-art.a { opacity: .34; } /* Невыбранная сторона не лежит в композиции зря (смена темы идёт кругом View Transition — переход opacity не нужен) */ :root:not([data-faction="elyos"]) .atrea-art.e, :root[data-faction="elyos"] .atrea-art.a { display: none; } /* Главная: крылья уже есть у даэвы в герое — фоновые тише, иначе в первом экране две пары крыльев */ :root:not([data-faction="elyos"])[data-view="home"] .atrea-art.a { opacity: .2; } /* Внутренние экраны: арт фона почти ушёл в темноту и размыт — лицо и перья не просвечивают сквозь стекло списков */ :root:not([data-faction="elyos"]):not([data-view="home"]) .atrea-art.a { opacity: .12; filter: blur(10px); } :root[data-faction="elyos"] .atrea-art.e { opacity: .5; background-image: url('/img/art/w/daeva_elyos_wings-1600.webp'); background-position: 72% 18%; -webkit-mask-image: radial-gradient(110% 90% at 80% 15%, #000 15%, rgba(0, 0, 0, .3) 52%, transparent 75%); mask-image: radial-gradient(110% 90% at 80% 15%, #000 15%, rgba(0, 0, 0, .3) 52%, transparent 75%); } /* Облака света — по всему окну (реф. 1), а не только у верха: низ длинных экранов не становится плоским. Слой фиксированный, размеры в долях окна. */ .atrea::after { content: ''; position: absolute; inset: 0; background: radial-gradient(62% 66% at 14% 8%, rgba(124, 58, 237, .20), transparent 65%), radial-gradient(60% 50% at 88% 104%, rgba(124, 58, 237, .16), transparent 70%), radial-gradient(45% 42% at 6% 62%, rgba(168, 85, 247, .09), transparent 70%), radial-gradient(50% 55% at 94% 46%, rgba(168, 85, 247, .07), transparent 70%); transition: opacity 1s; } :root[data-faction="elyos"] .atrea::after { opacity: 0; } /* Туман асмодиан — статичный: он лежит под стеклом с backdrop-filter, и любое его движение заставляло пересчитывать размытие каждой панели на каждом кадре (замер: GPU компаньона 66 % в простое). */ .fog { position: absolute; border-radius: 50%; opacity: .55; } .fog.f1 { width: 70vw; height: 50vw; left: -18vw; top: 30vh; background: radial-gradient(closest-side, rgba(109, 40, 217, .22), transparent); } .fog.f2 { width: 60vw; height: 40vw; right: -14vw; top: -10vh; background: radial-gradient(closest-side, rgba(190, 70, 160, .12), transparent); } /* Сферы элийцев (реф. 5): размытые переливающиеся шары по краям, четвёртая — внизу, чтобы перламутр был и ниже первого экрана. Размытие статичное (его не анимируем), двигается только transform. */ .orb { position: absolute; border-radius: 50%; opacity: 0; transition: opacity 1.2s var(--ease-io); filter: blur(48px) saturate(140%); } :root[data-faction="elyos"] .fog { opacity: 0; } :root[data-faction="elyos"] .orb { opacity: 1; } .orb.o1 { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: radial-gradient(circle at 35% 35%, rgba(199, 194, 255, 1), rgba(199, 194, 255, .4) 45%, transparent 70%); } .orb.o2 { width: 38vw; height: 38vw; right: -10vw; top: 40vh; background: radial-gradient(circle at 40% 40%, rgba(168, 216, 255, 1), rgba(168, 216, 255, .35) 48%, transparent 70%); } .orb.o3 { width: 30vw; height: 30vw; left: 30vw; bottom: -14vw; background: radial-gradient(circle at 50% 40%, rgba(245, 198, 232, .95), rgba(245, 198, 232, .3) 50%, transparent 70%); } .orb.o4 { width: 34vw; height: 34vw; right: -8vw; bottom: -10vw; background: radial-gradient(circle at 40% 35%, rgba(142, 197, 255, .9), rgba(199, 194, 255, .35) 50%, transparent 70%); } :root[data-faction="elyos"] .orb { will-change: transform; } :root[data-faction="elyos"] .orb.o1 { animation: orb1 34s var(--ease-io) infinite alternate; } :root[data-faction="elyos"] .orb.o2 { animation: orb2 41s var(--ease-io) infinite alternate; } :root[data-faction="elyos"] .orb.o3 { animation: orb3 37s var(--ease-io) infinite alternate; } :root[data-faction="elyos"] .orb.o4 { animation: orb2 45s var(--ease-io) infinite alternate-reverse; } @keyframes orb1 { to { transform: translate3d(8vw, 10vh, 0) scale(1.08); } } @keyframes orb2 { to { transform: translate3d(-10vw, -8vh, 0) scale(.92); } } @keyframes orb3 { to { transform: translate3d(6vw, -12vh, 0) scale(1.12); } } /* Внутренние экраны элийцев: портрет фона не спорит с сеткой — прозрачнее и в правом верхнем углу */ :root[data-faction="elyos"]:not([data-view="home"]) .atrea-art.e { opacity: .22; -webkit-mask-image: radial-gradient(70% 60% at 85% 10%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 60% at 85% 10%, #000 20%, transparent 75%); } /* Параллакс фона при прокрутке — без JS, по шкале прокрутки страницы. При «уменьшить движение» его нет совсем. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .atrea-art { animation: bg-par linear both; animation-timeline: scroll(root); } @keyframes bg-par { to { transform: translateY(-9vh) scale(1.03); } } .orb { translate: 0 0; } :root[data-faction="elyos"] .orb.o1 { animation: orb1 34s var(--ease-io) infinite alternate, par-a linear both; animation-timeline: auto, scroll(root); } :root[data-faction="elyos"] .orb.o2 { animation: orb2 41s var(--ease-io) infinite alternate, par-b linear both; animation-timeline: auto, scroll(root); } :root[data-faction="elyos"] .orb.o3 { animation: orb3 37s var(--ease-io) infinite alternate, par-c linear both; animation-timeline: auto, scroll(root); } @keyframes par-a { to { translate: 0 -14vh; } } @keyframes par-b { to { translate: 0 -28vh; } } @keyframes par-c { to { translate: 0 -8vh; } } } } canvas.ether { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; } :root[data-faction="elyos"] canvas.ether { mix-blend-mode: normal; } /* ---------- Стекло ---------- */ .card, .side, .search, .clk-pill, .tabbar, .kpi { -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)); backdrop-filter: blur(var(--blur)) saturate(var(--sat)); } .card { position: relative; isolation: isolate; min-width: 0; padding: 22px; border-radius: var(--r-l); background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c), var(--shadow); } .card.quiet { box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c); } @supports (corner-shape: squircle) { .card, .banner, .hero, .tile, .kpi, .btn, .search, .side, .gtip, .pal, .sheet, .slot, .dcard, .tplcard, .itemcell .frame, .skc { corner-shape: squircle; } :root { --r-l: 24px; --r-xl: 28px; --r-m: 16px; } } /* живое стекло: блик за курсором и подсветка кромки ближе к курсору (motion.js пишет --mx/--my) */ .card::after, .tile::after, .kpi::after, .banner::after, .dcard::after, .tplcard::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), var(--spot), transparent 55%); opacity: 0; transition: opacity .3s var(--ease-out); } .card::before, .tile::before, .kpi::before, .dcard::before, .tplcard::before { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -40%), var(--rim), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .3s var(--ease-out); } .lit::after, .lit::before { opacity: 1; } /* Элийцы: перламутровая кромка стекла видна всегда (реф. 4–6), наведение лишь усиливает её; нижняя кромка оттенена — без этого белая карточка .46 на #EEF1FA отделялась от фона только тенью. */ :root[data-faction="elyos"] .card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(110, 120, 190, .14), var(--shadow); } :root[data-faction="elyos"] .card::before, :root[data-faction="elyos"] .kpi::before, :root[data-faction="elyos"] .tplcard::before { opacity: .55; background: conic-gradient(from 200deg at 50% 50%, #C7C2FF, #A8D8FF, #F5C6E8, #FFFFFF, #C7C2FF); } :root[data-faction="elyos"] .lit::before { opacity: 1; } /* Тёмная акцентная карточка элийцев (реф. 5): 1–2 на экран — ритм «светлое / тёмное». У асмодиан — обычное стекло. */ /* блик — в правом верхнем углу, подальше от подписей; вторичный текст #D3D6F2 (≥ 4,6:1 даже на светлом стопе) */ :root[data-faction="elyos"] .card.ink { --ink: #F3F0FA; --ink-2: #D3D6F2; --ink-3: #C3C7EA; --well: rgba(255, 255, 255, .07); --well-2: rgba(255, 255, 255, .12); --edge: rgba(255, 255, 255, .14); --edge-2: rgba(255, 255, 255, .22); --accent-hi: #B7C4FF; --accent-soft: rgba(143, 165, 255, .2); --spec-c: rgba(255, 255, 255, .22); color: var(--ink); background: radial-gradient(120% 140% at 100% 0%, #4352B8 0%, #1A1F4D 58%, #121535 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 24px 60px -18px rgba(40, 50, 130, .55); } :root[data-faction="elyos"] .card.ink::before { opacity: .35; } :root[data-faction="elyos"] .card.ink input { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); } /* Блёстки ✦ элийцев — в углу героя и баннеров, мерцают медленно (3–5 с). У асмодиан их нет. */ .sparkles { display: none; } :root[data-faction="elyos"] .sparkles { display: block; position: absolute; right: 7%; top: 14%; width: 180px; height: 120px; z-index: 1; pointer-events: none; } .sparkles i { position: absolute; font-style: normal; color: #fff; text-shadow: 0 0 10px rgba(168, 216, 255, .9), 0 0 2px #fff; animation: twinkle 4s var(--ease-io) infinite; } .sparkles i:nth-child(1) { left: 8%; top: 12%; font-size: 10px; animation-delay: -.4s; } .sparkles i:nth-child(2) { left: 46%; top: 0; font-size: 7px; animation-duration: 3.2s; animation-delay: -1.6s; } .sparkles i:nth-child(3) { left: 78%; top: 30%; font-size: 9px; animation-duration: 5s; } .sparkles i:nth-child(4) { left: 30%; top: 62%; font-size: 6px; animation-duration: 3.6s; animation-delay: -2.2s; } .sparkles i:nth-child(5) { left: 92%; top: 76%; font-size: 8px; animation-duration: 4.4s; animation-delay: -1s; } @keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } } /* Стеклянная переливающаяся сфера (реф. 4, 6) — над краем героя элийцев, медленно плавает и переливается */ .glass-orb { display: none; } :root[data-faction="elyos"] .hero .glass-orb { display: block; position: absolute; z-index: 0; width: 64px; height: 64px; right: 41%; top: 26px; border-radius: 50%; pointer-events: none; opacity: .9; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, .35) 20%, transparent 44%), conic-gradient(from 210deg, #A8D8FF, #C7C2FF, #F5C6E8, #FFFFFF, #A8D8FF); box-shadow: inset -8px -10px 18px rgba(91, 91, 214, .35), inset 6px 8px 14px rgba(255, 255, 255, .7), 0 18px 30px -12px rgba(60, 70, 160, .45); animation: orbfloat 7s var(--ease-io) infinite alternate; animation-play-state: paused; } :root[data-faction="elyos"] .hero.live .glass-orb { animation-play-state: running; } @keyframes orbfloat { to { transform: translateY(10px) rotate(14deg); } } /* Наклон — только у карточек с артом (подземелья, билды): у информационных панелей он читался шаблоном. */ .tilt { transition: transform .6s var(--spring-soft); } .tilt.tilting { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-3px); transition: transform .14s linear; } /* ---------- Каркас: боковое меню, верхняя строка, нижняя панель на телефоне ---------- */ .side { position: fixed; top: 16px; bottom: 16px; left: 16px; z-index: 40; width: 232px; display: flex; flex-direction: column; gap: 6px; padding: 18px 12px 12px; border-radius: var(--r-xl); background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c), var(--shadow); } .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 14px; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; } .brand img { width: 74px; height: auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35)); } /* У элийцев логотип лежит на светлой стеклянной «линзе» (тёмная плашка была единственным тёмным пятном в сайдбаре) */ .brand-lens { display: inline-grid; place-items: center; flex: none; border-radius: 16px; } :root[data-faction="elyos"] .brand-lens { padding: 6px 9px; background: radial-gradient(120% 120% at 30% 18%, #3B4AA8, #1A1F4D 72%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 22px -10px rgba(40, 50, 130, .6); } :root[data-faction="elyos"] .brand img { width: 60px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); } :root[data-faction="elyos"] .brand .brand-t { color: #1B1E3A; } .brand .brand-t { display: grid; font: 400 18px/1.05 var(--font-brand); letter-spacing: .04em; color: var(--ink-2); } .snav { position: relative; display: grid; gap: 2px; } .snav-ind { position: absolute; left: 0; right: 0; top: 0; height: 44px; border-radius: 14px; pointer-events: none; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 8px 24px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .22); transform: translateY(var(--y, 0)); transition: transform .6s var(--spring), opacity .2s; opacity: 0; } .snav-ind.on { opacity: 1; } .sn { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border: 0; border-radius: 14px; background: none; color: var(--ink-2); font: 500 var(--fs-ui)/1 var(--font-ui); cursor: pointer; text-align: left; overflow: hidden; isolation: isolate; transition: color .2s, background .2s; } /* Белым пункт становится, когда «таблетка» уже подъехала (а не мгновенно — у элийцев это было белое на белом) */ .snav .sn.on { transition: color .2s .28s, background .2s; } .sn:hover { color: var(--ink); background: var(--well); } .sn.on { color: #fff; background: transparent; font-weight: 600; } .sn .si { flex: none; width: 22px; height: 22px; display: grid; place-items: center; } .sn .si svg { width: 20px; height: 20px; } .sn .sl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sn .badge { position: relative; top: auto; right: auto; margin-left: auto; flex: none; } /* Карточка персонажа внизу меню (как «Need help?» в реф. 1) */ .side-me { margin-top: auto; padding: 4px 0 8px; } .me-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 16px; cursor: pointer; text-align: left; color: var(--ink); background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); transition: background .2s, box-shadow .2s; } .me-card:hover { background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2); } .me-por { flex: none; width: 38px; height: 38px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, var(--accent-soft), transparent 70%), var(--well-2); } .me-por img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; } .me-por .ph { color: var(--accent-hi); } .me-por .ph svg { width: 18px; height: 18px; } .me-t { display: grid; min-width: 0; line-height: 1.25; } .me-t b { font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me-t small { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; } .side-foot { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--edge); } :root[data-faction="elyos"] .side-foot { border-top-color: var(--edge-2); } .side-foot .who { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; min-width: 0; } .side-foot .who img, .avatar img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; box-shadow: 0 0 0 2px var(--accent-soft); } .side-foot .who b { display: block; font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-foot .who small { display: block; font-size: var(--fs-xs); color: var(--ink-3); } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; margin-left: 264px; padding: 16px 32px 12px; transition: background .3s, box-shadow .3s; } /* Под закреплённой строкой — мягкое затухание, а не жёсткая полоса с линией: карточки уходят под неё плавно */ /* Плотная подложка до нижней кромки пилюль (72 %) и размытие под ней: текст карточек между поиском и часами не читается. */ .topbar::before { content: ''; position: absolute; inset: 0 0 -20px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; background: linear-gradient(var(--bg0) 0 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); -webkit-mask-image: linear-gradient(#000 76%, transparent); mask-image: linear-gradient(#000 76%, transparent); } .topbar.stuck::before { opacity: 1; } :root[data-faction="elyos"] .topbar::before { background: linear-gradient(#EEF1FA 0 70%, rgba(238, 241, 250, 0)); } /* ссылка «К содержимому» — первая по Tab */ .skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--glass-pop); color: var(--ink); font-weight: 600; text-decoration: none; box-shadow: 0 0 0 2px var(--accent-hi), var(--shadow-pop); transition: top .2s var(--ease-out); } .skip:focus { top: 16px; } .search { display: flex; align-items: center; gap: 10px; height: 44px; width: min(440px, 100%); padding: 0 8px 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: var(--glass); color: var(--ink-3); font: 500 var(--fs-ui) var(--font-ui); text-align: left; box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c); transition: box-shadow .2s, color .2s; } .search:hover { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--edge-2), inset 0 1px 0 var(--spec-c), 0 0 0 4px var(--accent-soft); } .search svg { width: 18px; height: 18px; flex: none; } .search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .grow { flex: 1; } .clocks { display: flex; gap: 8px; } .clk-pill { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c); font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; } .clk-pill b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .clk-pill.hot b { color: var(--hot); } /* часы обновляются раз в секунду — без плавного перехода: иначе кольцо анимируется почти непрерывно под стеклом */ .clk-pill .lring { --size: 28px; --th: 3px; transition: none; } .iconbtn { position: relative; width: 44px; height: 44px; display: inline-grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--glass); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); transition: color .2s, transform .2s var(--ease-out); } .iconbtn:hover { color: var(--ink); } .iconbtn:active { transform: scale(.94); } .iconbtn svg { width: 20px; height: 20px; } .iconbtn.busy svg { animation: spinr .9s linear infinite; } @keyframes spinr { to { transform: rotate(360deg); } } .iconbtn.flat { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; width: 40px; height: 40px; } .avatar { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: none; } .avatar img { width: 44px; height: 44px; } .avatar .ph { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-hi); } main { margin-left: 264px; padding: 4px 32px 72px; max-width: 1440px; outline: none; overflow-x: clip; overflow-clip-margin: 40px; } .tabbar { display: none; } /* значок уведомления — ромб, как в меню игры, но в акценте стороны: красный читался как ошибка */ .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; display: grid; place-items: center; font: 700 11px/1 var(--font-ui); color: #fff; z-index: 4; } .badge::before { content: ''; position: absolute; inset: 2px; background: var(--accent); transform: rotate(45deg); border-radius: 3px; z-index: -1; box-shadow: 0 0 10px var(--accent-glow); } .sn.on .badge::before { background: #fff; } .sn.on .badge { color: var(--btn-b); } .badge[hidden] { display: none; } .kbd { display: inline-block; font: 500 11px/16px var(--font-mono); padding: 1px 6px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .08); color: var(--ink-2); box-shadow: 0 0 0 1px var(--edge-2), inset 0 -1px 0 rgba(0, 0, 0, .35); white-space: nowrap; } :root[data-faction="elyos"] .kbd { background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px var(--edge-2), inset 0 -1px 0 rgba(60, 70, 130, .18); } /* ---------- Сетка бенто ---------- */ .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; } .grid > * { min-width: 0; } .c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; } .c12 { grid-column: 1 / -1; } .stack { display: grid; gap: var(--gap); align-content: start; min-width: 0; } /* панели внутри колонки-стопки занимают её целиком, даже если у них свой класс ширины */ .grid > .stack > * { grid-column: 1 / -1; } .stretch { align-self: stretch; } .mt { margin-top: var(--gap); } /* ---------- Типографика экранов ---------- */ .h-display { font: var(--fw-display) var(--fs-h1)/1.06 var(--font-display); letter-spacing: var(--ls-display); } .h-display em, .greet h1 em { color: var(--accent-hi); } :root:not([data-faction="elyos"]) .h-display em, :root:not([data-faction="elyos"]) .greet h1 em { background: linear-gradient(100deg, #C9B5FF, #A855F7 60%, #E7DBFF); -webkit-background-clip: text; background-clip: text; color: transparent; } /* элийцы: хромированный крупный заголовок — статичный металл (горизонт отражения посередине букв), без пробегающей белой полосы: она стирала буквы на светлом фоне («un▢▢ed»). */ :root[data-faction="elyos"] .chrome { background: linear-gradient(180deg, #30356A 0%, #5C66A8 40%, #8A93CF 47%, #1B1E3A 53%, #3C4486 78%, #4B5396 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ключевое слово у элийцев — индиго → бирюза, последний стоп #1A7FA0 (4,05:1 на светлом фоне) */ :root[data-faction="elyos"] .chrome em { background: linear-gradient(100deg, #3152D4, #5B5BD6 55%, #1A7FA0); -webkit-background-clip: text; background-clip: text; color: transparent; } @keyframes chrome { from { background-position: 100% 0; } to { background-position: 0 0; } } .greet { display: flex; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin: 6px 0 22px; } .greet > div { flex: 1; min-width: 260px; } .greet h1 { font: var(--fw-greet) var(--fs-greet)/1.1 var(--font-display); letter-spacing: var(--ls-display); } .greet p { margin: 6px 0 0; color: var(--ink-2); font-size: var(--fs-body); } .greet .acts { display: flex; gap: 10px; flex-wrap: wrap; } .card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; min-width: 0; } .card-h h2 { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } /* Без ромбов-маркеров: заголовок — просто заголовок (реф. 1). Секция страницы между панелями — Onest 600, 20 px, отступ сверху 32 px; подсекция внутри карточки (.sec) — 14 px, вторичный цвет, счётчик справа. */ :not(.card) > .card-h h2, .dgroup > .card-h h2 { font-size: 20px; } .card-h .meta { color: var(--ink-3); font-size: var(--fs-sm); text-align: right; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .card-h .meta b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .lead { color: var(--ink-2); font-size: var(--fs-ui); margin: -6px 0 14px; } .why { background: none; border: 0; padding: 0; color: var(--accent-hi); font: 500 var(--fs-sm) var(--font-ui); cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; } .empty-state { color: var(--ink-2); padding: 14px 0; } .chart-empty { display: grid; place-items: center; min-height: 160px; padding: 20px; text-align: center; color: var(--ink-2); border-radius: var(--r-m); background: var(--well); } .chart-empty .btn { margin-top: 10px; } /* ---------- Кнопки, поля, чипы ---------- */ .btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; text-decoration: none; font: 600 var(--fs-ui)/1 var(--font-ui); color: var(--ink); background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2), inset 0 1px 0 var(--spec-c); transition: background .2s, box-shadow .2s, color .2s, transform .5s var(--spring); } .btn:hover { background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--edge-2), inset 0 1px 0 var(--spec-c), 0 0 0 4px var(--accent-soft); } .btn:active { transform: scale(.97); transition-duration: .12s; } /* Нажатие (motion.js): «вдавливание» и вспышка кромки акцентом на 120 мс */ .pressed { transform: scale(.97) !important; box-shadow: inset 0 0 0 1px var(--accent-hi), 0 0 24px -6px var(--accent-glow) !important; transition: transform .12s, box-shadow .12s !important; } .btn svg { width: 18px; height: 18px; flex: none; } .btn.primary, .btn.gold { color: var(--on-accent); background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 28px -8px var(--accent-glow); } .btn.primary:hover, .btn.gold:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 34px -8px var(--accent-glow); } .btn.ghost { background: transparent; box-shadow: none; color: var(--accent-hi); } .btn.ghost:hover { background: var(--accent-soft); box-shadow: none; } .btn.danger:hover { color: var(--hot); } .btn.sm { padding: 0 14px; font-size: var(--fs-sm); } .btn.lg { min-height: 48px; padding: 0 26px; font-size: 16px; } .btn[disabled] { opacity: .55; cursor: progress; } .btn.busy::after { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spinr .8s linear infinite; } .magnet { transform: translate(var(--tx, 0), var(--ty, 0)); } .magnet.pulled { transition: transform .16s var(--ease-out), filter .2s, box-shadow .2s; } /* блик на главной кнопке «Следующего шага» — один раз при появлении */ .shimmer::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); animation: shimmer 1.1s var(--ease-io) 1.4s 1 both; } @keyframes shimmer { from { transform: translateX(-120%); } to { transform: translateX(120%); } } .linkbtn { background: none; border: 0; padding: 0; color: var(--accent-hi); cursor: pointer; font: 500 var(--fs-sm) var(--font-ui); text-decoration: underline; text-underline-offset: 3px; } input[type=text], input[type=search], input[type=number], input[type=password], input[type=time], input[type=datetime-local], select, textarea { height: 40px; min-width: 0; padding: 0 12px; border: 0; border-radius: 12px; outline: none; background: var(--well-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge-2); transition: box-shadow .2s, background .2s; } textarea { height: auto; width: 100%; min-height: 40vh; padding: 10px 12px; line-height: 1.55; resize: vertical; } select { padding-right: 34px; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23948BAE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } select option { background: #1A1430; color: #F3F0FA; } :root[data-faction="elyos"] select option { background: #fff; color: #1B1E3A; } input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); } /* элийцы: поля — белое стекло с обводкой, а не серые колодцы */ :root[data-faction="elyos"] :is(input[type=text], input[type=search], input[type=number], input[type=password], input[type=time], select, textarea) { background-color: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--edge-2), inset 0 1px 2px rgba(60, 70, 130, .08); } :root[data-faction="elyos"] :is(input, select, textarea):focus { box-shadow: 0 0 0 4px var(--accent-soft), inset 0 0 0 1px var(--accent); } ::placeholder { color: var(--ink-3); opacity: .8; } /* Флажок — стеклянный квадрат с галочкой; переключатель .sw — стеклянная «таблетка» с бегунком */ input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 20px; height: 20px; margin: 0; border-radius: 6px; cursor: pointer; background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2); transition: background .2s var(--spring), box-shadow .2s; } input[type=checkbox]::after { content: ''; position: absolute; inset: 3px; background: #fff; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .25s var(--spring); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } input[type=checkbox]:checked { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 4px 12px -4px var(--accent-glow); } input[type=checkbox]:checked::after { opacity: 1; transform: none; } :root[data-faction="elyos"] input[type=checkbox]:not(:checked) { background: rgba(255, 255, 255, .8); } input[type=checkbox].sw { width: 44px; height: 26px; border-radius: 999px; } input[type=checkbox].sw::after { inset: 3px auto 3px 3px; width: 20px; border-radius: 50%; opacity: 1; transform: none; -webkit-mask: none; mask: none; background: var(--ink-3); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .3s var(--spring), background .2s; } input[type=checkbox].sw:checked::after { transform: translateX(18px); background: #fff; } .sw-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 8px 4px; border-top: 1px solid var(--edge); cursor: pointer; } :root[data-faction="elyos"] .sw-row { border-top-color: var(--edge-2); } .sw-row > span { display: grid; gap: 2px; } .sw-row small { font-size: var(--fs-xs); color: var(--ink-3); } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field > span { font-size: var(--fs-sm); color: var(--ink-2); } .field > select, .field > input { width: 100%; } .field > small { font-size: var(--fs-xs); color: var(--ink-3); } .formrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .checks { display: grid; gap: 10px; margin-top: 14px; font-size: var(--fs-ui); } .checks label { display: flex; align-items: center; gap: 10px; min-height: 40px; } .error { color: var(--hot); } .chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 600 var(--fs-xs)/1 var(--font-ui); white-space: nowrap; color: var(--ink-2); background: var(--well-2); border: 0; } .chip.acc, .chip.pve { color: var(--accent-hi); background: var(--accent-soft); } .chip.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); } .chip.hot, .chip.pvp { color: var(--hot); background: color-mix(in srgb, var(--hot) 14%, transparent); } .chip.done, .chip.hybrid { color: var(--done-ink); background: color-mix(in srgb, var(--done) 16%, transparent); } .chip.fail { color: var(--ink-3); } .chip svg { width: 14px; height: 14px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-sm); color: var(--ink-2); background: var(--well); } .pill b { color: var(--ink); } .note { padding: 10px 14px; border-radius: var(--r-m); font-size: var(--fs-ui); color: var(--ink-2); background: color-mix(in srgb, var(--done) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--done) 30%, transparent); } .note b { color: var(--done-ink); } /* сегменты (переключатель вида) */ .seg { position: relative; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); } .seg button { position: relative; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; overflow: hidden; isolation: isolate; font: 600 var(--fs-sm)/1 var(--font-ui); color: var(--ink-2); transition: color .2s, background .3s var(--ease-out), box-shadow .3s; } .seg button:hover { color: var(--ink); } .seg button[aria-pressed="true"] { color: var(--ink); background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--edge-2), inset 0 1px 0 var(--spec-c), 0 4px 14px -6px rgba(0, 0, 0, .4); } :root[data-faction="elyos"] .seg button[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 4px 14px -6px rgba(80, 90, 160, .22); } /* элийцы: выключенный переключатель — светлая дорожка и белая ручка (тёмная ручка читалась радиокнопкой) */ :root[data-faction="elyos"] input[type=checkbox].sw:not(:checked), :root[data-faction="elyos"] .trow:not([aria-checked="true"]) .sw-vis { background: rgba(120, 128, 180, .24); box-shadow: inset 0 0 0 1px rgba(110, 120, 190, .18); } :root[data-faction="elyos"] input[type=checkbox].sw:not(:checked)::after, :root[data-faction="elyos"] .trow:not([aria-checked="true"]) .sw-vis::after { background: #fff; box-shadow: 0 1px 3px rgba(40, 50, 110, .3); } /* ---------- Жидкое кольцо прогресса ---------- */ .lring { --size: 64px; --th: 6px; position: relative; flex: none; display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%; transition: --p .95s var(--ease-out); } .lring::before, .lring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--th)), #000 calc(100% - var(--th) + .5px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--th)), #000 calc(100% - var(--th) + .5px)); } .lring::before { background: var(--well-2); } .lring::after { background: conic-gradient(from var(--spin), var(--accent), var(--accent-2), #E879F9, var(--accent-hi), var(--accent)); -webkit-mask: conic-gradient(#000 calc(var(--p) * 1turn), transparent 0), radial-gradient(farthest-side, transparent calc(100% - var(--th)), #000 calc(100% - var(--th) + .5px)); -webkit-mask-composite: source-in; mask: conic-gradient(#000 calc(var(--p) * 1turn), transparent 0), radial-gradient(farthest-side, transparent calc(100% - var(--th)), #000 calc(100% - var(--th) + .5px)); mask-composite: intersect; } :root[data-faction="elyos"] .lring::after { background: conic-gradient(from var(--spin), #3CC8C0, var(--accent), var(--accent-2), #8EC5FF, #3CC8C0); } .lring.gold::after { background: conic-gradient(from var(--spin), #F3D79A, var(--done), #FFF1C9, var(--done), #F3D79A); } .lring.hot::after { background: conic-gradient(from var(--spin), var(--hot), #FF9F7A, var(--hot)); } /* «жидкое» перетекание: градиент внутри дуги течёт, только пока кольцо заполняется и под курсором — постоянное вращение перерисовывало conic-маску каждый кадр и грело видеокарту в простое */ .lring.filling::after, :is(.skc, .kpi, .board, .clk-pill):hover .lring::after { animation: lspin 4.5s linear infinite; } @keyframes lspin { to { --spin: 360deg; } } .lring > .head { position: absolute; inset: 0; border-radius: 50%; transform: rotate(calc(var(--p) * 1turn)); pointer-events: none; } .lring > .head::after { content: ''; position: absolute; left: 50%; top: 0; width: var(--th); height: var(--th); margin-left: calc(var(--th) / -2); border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px var(--accent-glow); opacity: .95; } .lring > .lr-c { position: relative; z-index: 1; display: grid; justify-items: center; line-height: 1.05; text-align: center; } .lring.flash { animation: lflash .9s var(--ease-out); } @keyframes lflash { 30% { filter: brightness(1.8) drop-shadow(0 0 14px var(--accent-glow)); transform: scale(1.06); } } .lring.semi { height: calc(var(--size) / 2); border-radius: var(--size) var(--size) 0 0; overflow: hidden; place-items: end center; } .lring.semi::before, .lring.semi::after { inset: 0 0 auto; height: var(--size); } .lring.semi::after { -webkit-mask: conic-gradient(from -90deg, #000 calc(var(--p) * .5turn), transparent 0), radial-gradient(farthest-side, transparent calc(100% - var(--th)), #000 calc(100% - var(--th) + .5px)); mask: conic-gradient(from -90deg, #000 calc(var(--p) * .5turn), transparent 0), radial-gradient(farthest-side, transparent calc(100% - var(--th)), #000 calc(100% - var(--th) + .5px)); /* шортхенд mask сбрасывает композицию — без пересечения вместо дуги рисуется сплошной сектор */ -webkit-mask-composite: source-in; mask-composite: intersect; } .lring.semi > .lr-c { gap: 4px; line-height: 1; } .lring.semi > .head { inset: 0 0 auto; height: var(--size); transform: rotate(calc(-90deg + var(--p) * .5turn)); } /* полоса */ .meter { position: relative; height: 8px; border-radius: 999px; background: var(--well-2); overflow: hidden; } .meter > span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-hi)); transition: transform .9s var(--ease-out); } .meter.warn > span { background: linear-gradient(90deg, var(--hot), #FF9F7A); } /* ---------- Герой главной: «Путь до 45» ---------- */ /* Асмодиане (реф. 2): справа — даэва с тёмными крыльями, кадр растворяется влево в фиолетовое свечение; поверх её крыльев — аура из 45 перьев (горят пройденные уровни) и редкие искры. Элийцы: светлое стекло, лучница с белыми крыльями. */ .hero { position: relative; isolation: isolate; overflow: visible; min-height: 300px; border-radius: var(--r-xl); padding: 34px 40px; display: flex; align-items: center; background: radial-gradient(55% 110% at 80% 45%, rgba(139, 92, 246, .35), transparent 70%), linear-gradient(115deg, var(--hero-a) 0%, #24104C 55%, #3B1680 120%); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow); } .hero.a { overflow: hidden; } :root[data-faction="elyos"] .hero { background: radial-gradient(60% 120% at 82% 30%, rgba(255, 255, 255, .9), transparent 70%), linear-gradient(115deg, #E7ECFF 0%, #D5D0FF 55%, #BFD9FF 100%); } .hero-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; } .hero-art.art-window img { width: 100%; height: calc(100% + 64px); margin-top: -64px; object-fit: cover; object-position: 50% 35%; opacity: .45; mix-blend-mode: luminosity; } :root[data-faction="elyos"] .hero-art.art-window img { opacity: .28; mix-blend-mode: multiply; } .hero-scene { left: 24%; border-radius: 0 var(--r-xl) var(--r-xl) 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, transparent 0%, #000 24%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, transparent 0%, #000 24%); mask-composite: intersect; } .hero-scene .scene { position: absolute; top: 0; left: var(--sx, 54%); height: 100%; width: auto; aspect-ratio: 1440 / 500; translate: -42.5% 0; overflow: visible; } .hero.live .hero-scene .scene { animation: kenburns 40s var(--ease-io) infinite alternate; } .hero-scene .aura { opacity: .38; filter: blur(1.5px); mix-blend-mode: screen; } .hero-scene .aura .feather { fill: rgba(40, 20, 80, .2); stroke: none; } .hero-scene .aura .feather.lit { fill: url(#auraLit); } .hero-scene .aura .feather.now { stroke: #F1E8FF; stroke-width: 1.2; } .hero-sparks { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; } .hero-sparks i { position: absolute; bottom: -8px; width: 3px; height: 3px; border-radius: 50%; background: #EEE6FF; box-shadow: 0 0 8px 2px rgba(168, 120, 255, .85); opacity: 0; animation: spark-up 7s linear infinite; animation-play-state: paused; } .hero.live .hero-sparks i { animation-play-state: running; } .hero-sparks i:nth-child(1) { left: 58%; animation-delay: -1s; } .hero-sparks i:nth-child(2) { left: 64%; animation-delay: -3.4s; animation-duration: 8s; } .hero-sparks i:nth-child(3) { left: 71%; animation-delay: -5.2s; } .hero-sparks i:nth-child(4) { left: 77%; animation-delay: -2.2s; animation-duration: 9s; } .hero-sparks i:nth-child(5) { left: 83%; animation-delay: -6.1s; width: 2px; height: 2px; } .hero-sparks i:nth-child(6) { left: 88%; animation-delay: -.4s; animation-duration: 6.4s; } .hero-sparks i:nth-child(7) { left: 93%; animation-delay: -4.4s; } .hero-sparks i:nth-child(8) { left: 68%; animation-delay: -7.3s; animation-duration: 10s; width: 2px; height: 2px; } .hero-sparks i:nth-child(9) { left: 80%; animation-delay: -8.2s; animation-duration: 8.6s; } @keyframes spark-up { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 80% { opacity: .5; } 100% { transform: translate(24px, -280px); opacity: 0; } } .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgba(10, 6, 22, .82) 0%, rgba(10, 6, 22, .45) 40%, transparent 64%); } :root[data-faction="elyos"] .hero::after { background: linear-gradient(90deg, rgba(240, 243, 255, .9) 0%, rgba(240, 243, 255, .55) 45%, transparent 72%); } .hero-body { position: relative; z-index: 2; max-width: 560px; display: grid; gap: 10px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .hero-meta .chip { background: rgba(255, 255, 255, .12); color: #EDE7FF; } :root[data-faction="elyos"] .hero-meta .chip { background: rgba(255, 255, 255, .75); color: var(--ink-2); } .hero h2.h-display { font-size: var(--fs-hero); color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); } :root[data-faction="elyos"] .hero h2.h-display { color: var(--ink); text-shadow: none; } /* элийцы: самый крупный заголовок — «хром» (реф. 4); выделенное слово держит светлая подложка-тень на арте */ :root[data-faction="elyos"] .hero h2.h-display.chrome { color: transparent; } :root[data-faction="elyos"] .hero h2 em, :root[data-faction="elyos"] .banner h1 em { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)); } .hero-sub { color: rgba(240, 235, 255, .86); font-size: var(--fs-body); margin: 0; max-width: 460px; text-wrap: pretty; } :root[data-faction="elyos"] .hero-sub { color: var(--ink-2); } .hero-sub b { color: #fff; } :root[data-faction="elyos"] .hero-sub b { color: var(--ink); } .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .hero .btn:not(.primary) { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); } :root[data-faction="elyos"] .hero .btn:not(.primary) { background: rgba(255, 255, 255, .7); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge-2); } .hero-lvl { display: flex; align-items: center; gap: 14px; margin-top: 4px; color: rgba(240, 235, 255, .86); font-size: var(--fs-ui); } :root[data-faction="elyos"] .hero-lvl { color: var(--ink-2); } .hero-lvl .meter { flex: 1; max-width: 300px; background: rgba(255, 255, 255, .14); } .hero-fig { position: absolute; right: 2%; bottom: 0; z-index: 1; width: min(520px, 46%); aspect-ratio: 1350 / 959; pointer-events: none; } /* холодная контурная подсветка за фигурой — фигура «в свете», а не наклейка на фоне */ .hero-fig::before { content: ''; position: absolute; inset: 6% 14% 0 18%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(168, 216, 255, .55), rgba(199, 194, 255, .25) 55%, transparent); filter: blur(18px); } .hero-char { position: absolute; inset: auto 0 0 0; width: 100%; height: auto; z-index: 2; filter: drop-shadow(0 30px 40px rgba(80, 90, 160, .35)) drop-shadow(0 0 1px rgba(255, 255, 255, .9)) saturate(.85) hue-rotate(-14deg); -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); } .hero.live .hero-char { animation: float 9s var(--ease-io) infinite alternate; } @keyframes float { to { transform: translateY(-8px); } } /* Крылья — аура за персонажем, а не векторная «гребёнка»: полупрозрачно, чуть размыто, светом поверх фона */ .wings, .wings-glow, .wings-wave { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .wings { z-index: 1; opacity: .5; filter: blur(1.2px); mix-blend-mode: screen; } :root[data-faction="elyos"] .wings { mix-blend-mode: normal; opacity: .62; } .wings-glow { z-index: 0; opacity: .5; } .hero.live .wings-glow { animation: breathe 6s var(--ease-io) infinite alternate; } @keyframes breathe { from { opacity: .32; } to { opacity: .7; } } .wings-wave { z-index: 0; opacity: 0; transform-origin: 32% 32%; } /* Асмодиане: перо от кости почти чёрно-фиолетовое, к кончику разгорается эфиром. Элийцы: белое перо с тёплым золотом. */ .fl-s0 { stop-color: #1E1040; stop-opacity: .96; } .fl-s1 { stop-color: #5B2FC4; stop-opacity: .92; } .fl-s2 { stop-color: var(--accent-hi); stop-opacity: .8; } :root[data-faction="elyos"] .fl-s0 { stop-color: #FFFFFF; stop-opacity: .95; } :root[data-faction="elyos"] .fl-s1 { stop-color: #FFE7B0; stop-opacity: .9; } :root[data-faction="elyos"] .fl-s2 { stop-color: #C99A3C; stop-opacity: .22; } .feather { fill: rgba(16, 9, 34, .42); stroke: rgba(183, 156, 255, .2); stroke-width: .8; } .feather.lit { fill: url(#featherLit); stroke: rgba(205, 184, 255, .62); } .feather.now { stroke: #F1E8FF; stroke-width: 1.5; } .feather.cov { fill: rgba(22, 12, 46, .55); } .feather.cov.lit { fill: url(#featherLit); opacity: .92; } .rachis { fill: none; stroke: rgba(183, 156, 255, .16); stroke-width: .8; stroke-linecap: round; pointer-events: none; } .rachis.lit { stroke: rgba(226, 210, 255, .42); } :root[data-faction="elyos"] .feather.cov { fill: rgba(255, 255, 255, .62); } :root[data-faction="elyos"] .rachis { stroke: rgba(120, 110, 160, .22); } :root[data-faction="elyos"] .rachis.lit { stroke: rgba(170, 130, 60, .4); } :root[data-faction="elyos"] .feather { fill: rgba(255, 255, 255, .5); stroke: rgba(91, 96, 160, .35); } :root[data-faction="elyos"] .feather.lit { stroke: rgba(255, 255, 255, .95); } .wings-glow .feather { fill: var(--accent-hi); stroke: none; } :root[data-faction="elyos"] .wings-glow .feather { fill: #FFFFFF; } .wings-wave .feather { fill: #fff; stroke: none; } /* раскрытие крыльев — один раз за сессию (класс .play ставит app.js) */ .hero.play :is(.wings, .aura) .feather { transform-box: fill-box; transform-origin: 50% 0%; animation: unfurl .52s var(--spring-soft) both; animation-delay: calc(240ms + var(--i) * 12ms); } .hero.play .wings .rachis { animation: chfade .5s var(--ease-out) 1.4s both; } @keyframes unfurl { from { opacity: 0; transform: rotate(-26deg) scaleY(.5); } } .hero.play .wings-wave { animation: wave 1.5s var(--ease-out) .55s both; } @keyframes wave { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.18); } } .hero.play .hero-char { animation: charin 1s var(--ease-out) .1s both; } .hero.play .hero-scene .scene { animation: charin 1.1s var(--ease-out) both; } /* после появления кадр продолжает медленный кен-бёрнс (иначе .play перебивал его до перезагрузки) */ .hero.play.live .hero-scene .scene { animation: charin 1.1s var(--ease-out) both, kenburns 40s var(--ease-io) 1.1s infinite alternate; } @keyframes charin { from { opacity: 0; transform: translateX(30px) scale(.98); } } /* кен-бёрнс (transform) и параллакс прокрутки (translate) — разные свойства, поэтому не перебивают друг друга */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .hero-art.art-window img { animation: kenburns 40s var(--ease-io) infinite alternate, herop linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 520px; animation-play-state: paused, running; } .hero-art.art-window.live img { animation-play-state: running, running; } @keyframes herop { to { translate: 0 48px; } } } } /* ---------- Плитки показателей (реф. 1, верхний ряд) ---------- */ .kpi { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 4px; align-self: stretch; padding: 18px 18px 14px; border-radius: var(--r-l); min-width: 0; overflow: hidden; background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c), var(--shadow); color: var(--ink); text-align: left; border: 0; font: inherit; transition: transform .45s var(--spring-soft), box-shadow .25s; } button.kpi { cursor: pointer; } button.kpi:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--edge-2), inset 0 1px 0 var(--spec-c), var(--shadow), 0 0 40px -16px var(--accent-glow); } :root[data-faction="elyos"] .kpi { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(110, 120, 190, .14), var(--shadow); } .kpi-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .pill-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 60%, var(--btn-b)); box-shadow: 0 6px 18px -4px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .3); } .pill-ic svg { width: 18px; height: 18px; } .pill-ic img { width: 26px; height: 26px; object-fit: contain; } .kpi-l { font-size: var(--fs-ui); color: var(--ink-2); font-weight: 500; } .kpi-v { display: flex; align-items: baseline; gap: 8px; } .kpi-v b { font: var(--fw-num) var(--fs-num)/1.05 var(--font-num); letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; } .kpi-v span { color: var(--ink-3); font-size: var(--fs-ui); } .kpi-d { font-size: var(--fs-sm); color: var(--ink-3); min-height: 18px; } .kpi-d.up { color: var(--ok); } .kpi .kpi-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* мини-график: линия 2 px со свечением, заливка .35 → 0, точка-конец с ореолом */ .kpi .spark { width: 100%; height: 44px; margin-top: auto; padding-top: 6px; flex: none; } .kpi-delta { margin-top: auto; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-xs); color: var(--ink-2); background: var(--well-2); } /* кольцо пути: 84 px, число 15 px, подпись 10 px — подпись не упирается в обводку */ .kpi-ring { padding-right: 112px; } .kpi .lring { position: absolute; right: 18px; top: 50%; translate: 0 -50%; --size: 84px; --th: 7px; } .kpi .lr-c b { font: var(--fw-num) 15px/1 var(--font-num); letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; } .kpi .lr-c small { font-size: 10px; color: var(--ink-3); margin-top: 2px; } /* задачи дня: полоса из N частей (4 px, зазор 3 px) и семь точек недели — сегодня кольцом */ .kpi-week { display: grid; gap: 10px; margin-top: auto; padding-top: 8px; flex: none; } .segbar { display: flex; gap: 3px; height: 4px; } .segbar i { flex: 1; border-radius: 2px; background: var(--well-2); } .segbar i.on { background: linear-gradient(90deg, var(--accent), var(--accent-hi)); box-shadow: 0 0 8px -1px var(--accent-glow); } :root[data-faction="elyos"] .segbar { height: 6px; } :root[data-faction="elyos"] .segbar i { border-radius: 3px; background: rgba(91, 96, 160, .12); } :root[data-faction="elyos"] .segbar i.on { background: linear-gradient(90deg, #3CC8C0, #5B5BD6); box-shadow: none; } .wk7 { display: flex; align-items: center; gap: 8px; } .wk7 i { width: 8px; height: 8px; border-radius: 50%; background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2); } .wk7 i.part { background: var(--accent); box-shadow: none; opacity: .6; } .wk7 i.full { background: var(--accent-hi); box-shadow: 0 0 8px var(--accent-glow); } .wk7 i.today { box-shadow: 0 0 0 2px var(--bg1), 0 0 0 3.5px var(--accent-hi); } .wk7 small { margin-left: auto; font-size: 11px; color: var(--ink-3); } :root[data-faction="elyos"] .wk7 i { background: rgba(91, 96, 160, .22); box-shadow: inset 0 0 0 1px rgba(91, 96, 160, .35); } :root[data-faction="elyos"] .wk7 i.today { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #3F63E6; } /* ур. предметов: полоса до следующего порога вместо копии графика мощи */ .kpi-meter { display: grid; gap: 6px; margin-top: auto; padding-top: 10px; flex: none; } .kpi-meter .meter { height: 6px; } .kpi-meter small { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .kpi .kpi-d { -webkit-line-clamp: 1; } .nw { white-space: nowrap; } /* ---------- «Следующий шаг»: визуальная пара «было → станет», плашки вместо абзаца ---------- */ .next { display: grid; gap: 14px; align-content: start; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 color-mix(in srgb, var(--accent-hi) 50%, transparent), 0 0 40px -18px var(--accent-glow), var(--shadow); } .next-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px -6px -4px 0; } .next-l { font: 600 var(--fs-sm) var(--font-ui); color: var(--accent-hi); } /* узкая колонка рядом с графиком: пара иконок — строкой над заголовком, заголовок — до трёх строк */ .next-row { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; } .nx-pair { flex: none; display: flex; align-items: center; gap: 8px; } .nx-ic { position: relative; flex: none; width: 56px; height: 56px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2), 0 0 22px -8px var(--accent-glow); color: var(--accent-hi); } .nx-ic img { width: 100%; height: 100%; object-fit: cover; } .nx-ic svg { width: 26px; height: 26px; } .nx-ic.lic { background: var(--accent-soft); } .nx-ic.sock-empty { clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); border-radius: 0; background: var(--well-2); color: var(--ink-3); box-shadow: none; } .nx-ic.sock-empty svg { width: 20px; height: 20px; } .nx-pair .nx-ic:first-child:not(:last-child) { width: 44px; height: 44px; opacity: .65; filter: saturate(.6); } .nx-arrow { color: var(--ink-3); display: grid; } .nx-arrow svg { width: 18px; height: 18px; } .next-b { min-width: 0; display: grid; gap: 8px; } .next h3 { font: 700 18px/1.28 var(--font-ui); margin: 0; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; } .next-one { margin: 0; color: var(--ink-2); font-size: var(--fs-ui); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .next-a { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; } .why-d { flex: 1 1 100%; order: 2; } .next-a > .btn { order: 1; } .why-d > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer; color: var(--accent-hi); font: 600 var(--fs-sm) var(--font-ui); } .why-d > summary::-webkit-details-marker { display: none; } .why-d > summary:hover { background: var(--accent-soft); } .why-d > summary svg, details > summary svg { width: 14px; height: 14px; transition: transform .3s var(--spring-soft); } details[open] > summary svg { transform: rotate(180deg); } .why-d p { margin: 6px 0 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--well); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; } .next-a { position: relative; } .next-a .why-d { order: 0; flex: 0 1 auto; } .next-a .why-d[open] { flex-basis: 100%; order: 2; } /* ---------- Быстрые действия (реф. 1): сетка 2×2 ---------- */ /* квадратные стеклянные плитки: иконка сверху, подпись под ней (реф. 1, Quick Actions) */ .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tile { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; row-gap: 5px; min-height: 92px; padding: 12px 8px; border: 0; border-radius: var(--r-m); cursor: pointer; text-align: center; font: 600 var(--fs-ui)/1.25 var(--font-ui); color: var(--ink); background: var(--well); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c); transition: transform .45s var(--spring), background .2s; } .tile:hover { background: var(--well-2); transform: translateY(-2px); } .tile .pill-ic { width: 40px; height: 40px; margin-bottom: 2px; } .tile > span:not(.pill-ic) { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: balance; } :root[data-faction="elyos"] .tile { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 8px 24px -12px rgba(80, 90, 160, .25); } :root[data-faction="elyos"] .tile:hover { background: rgba(255, 255, 255, .8); } .tile small { font: 500 var(--fs-xs) var(--font-ui); color: var(--ink-3); white-space: nowrap; } .tile small.kbd { margin-top: 4px; font-size: 10px; } @media (pointer: coarse) { .fine-only { display: none !important; } .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- «Сегодня вечером»: список со статусами (реф. 1, Recent Requests) ---------- */ .todos { display: grid; gap: 6px; } .todo { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 12px; align-items: center; width: 100%; min-height: 58px; padding: 8px 14px 8px 8px; border: 0; border-radius: var(--r-m); cursor: pointer; text-align: left; color: var(--ink); background: var(--well); box-shadow: inset 0 0 0 1px transparent; transition: background .2s, box-shadow .2s; } .todo:hover { background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2); } .todo { grid-template-columns: 44px minmax(0, 1fr) auto; } .todo .st-chip { justify-self: end; } .todo .st-chip svg { width: 12px; height: 12px; } .chip.warn { color: var(--done-ink); background: color-mix(in srgb, var(--done) 16%, transparent); } .todo .tx { display: grid; min-width: 0; line-height: 1.3; gap: 1px; } .todo .tx b { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-ui); min-width: 0; } .todo .tx b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .todo .dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: var(--ink-3); } .todo .dot.acc { background: var(--accent-hi); box-shadow: 0 0 8px var(--accent-glow); } .todo .dot.hot { background: var(--hot); box-shadow: 0 0 8px color-mix(in srgb, var(--hot) 60%, transparent); } .todo .dot.warn { background: var(--done); } .todo .dot.ok { background: var(--ok); } .todo .tx small { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .todo .st { font-style: normal; font-weight: 600; } .todo .st.acc { color: var(--accent-hi); } .todo .st.hot { color: var(--hot); } .todo .st.warn { color: var(--done-ink); } .todo .st.ok { color: var(--ok); } /* кольцо-отметка справа, как чекбокс: нажимается вся строка */ .todo .chk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-4); transition: background .2s var(--spring), box-shadow .2s, color .2s; } .todo:hover .chk { box-shadow: inset 0 0 0 1.5px var(--accent-hi); } .todo.done .chk { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 0 10px -2px var(--accent-glow); color: #fff; } .todo .chk svg { width: 13px; height: 13px; } .todo.done .ti img, .todo.done .ti .picto { filter: grayscale(.8) brightness(.8); opacity: .6; } .todo.done .tx b { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); } /* ---------- Ячейки задач: плитки 1×1 как пункты меню игры ---------- */ #today, .card { scroll-margin-top: 90px; } .tasks .meter.thin { display: block; height: 3px; margin: -8px 0 14px; } .tasks.flash { animation: cardflash 1.3s var(--ease-out); } @keyframes cardflash { 0%, 100% { box-shadow: inset 0 0 0 1px var(--edge), var(--shadow); } 25% { box-shadow: inset 0 0 0 2px var(--accent-hi), 0 0 50px -10px var(--accent-glow), var(--shadow); } } .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; } .slots:empty { display: none; } .slot { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 118px; padding: 16px 8px 10px; border: 0; border-radius: var(--r-m); cursor: pointer; text-align: center; color: var(--ink); background: var(--well); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c); transition: transform .45s var(--spring), box-shadow .2s, background .2s, opacity .2s; } .slot:hover { transform: translateY(-2px); background: var(--well-2); box-shadow: inset 0 0 0 1px var(--accent), 0 10px 24px -10px var(--accent-glow); } /* Иконка — одна система: круглая «таблетка» 44 px (как «Total Requests» в реф. 1). Своя пиктограмма — белая линия на фиолетовом шаре; игровой арт — в той же круглой рамке с кольцом 1 px. */ .slot .icon, .todo .ti, .trow .icon { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; color: #fff; font-size: 20px; } .slot .icon.game, .todo .ti.game, .trow .icon.game { background: #1A1230; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 16px -8px rgba(0, 0, 0, .7); } .slot .icon.lic, .todo .ti.lic, .trow .icon.lic { background: radial-gradient(circle at 30% 25%, #A78BFA, #6D28D9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px -6px rgba(139, 92, 246, .6); } .slot .icon img, .todo .ti img, .trow .icon img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); } .slot .icon.game::after, .todo .ti.game::after, .trow .icon.game::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); pointer-events: none; } .slot .icon .picto, .todo .ti .picto, .trow .icon .picto { width: 22px; height: 22px; stroke-width: 1.5; } /* иконка меню без своего круга (шиго — фигурка на прозрачном фоне) — внутрь круга с отступом, как остальные */ :is(.slot .icon, .todo .ti, .trow .icon, .ov-r .g) img[src$="/shugo.png"] { object-fit: contain; padding: 6px; transform: none; } /* элийцы: те же круги, светлые — белая кромка, мягкая тень; пиктограмма индиго на перламутре */ :root[data-faction="elyos"] :is(.slot .icon, .todo .ti, .trow .icon).game { background: #2A3170; box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 6px 16px -6px rgba(40, 50, 120, .35); } :root[data-faction="elyos"] :is(.slot .icon, .todo .ti, .trow .icon).lic { color: #3F63E6; background: linear-gradient(160deg, #fff, #E6EBFB); box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 6px 16px -6px rgba(40, 50, 120, .3); } .slot .name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; } .slot .kbd { position: absolute; top: 8px; left: 8px; z-index: 4; font-size: 10px; padding: 0 5px; } @media (hover: none) { .kbd, .slot .kbd, .tile small.kbd { display: none; } } .slot .cnt { position: absolute; top: 6px; right: 8px; z-index: 4; font: 700 var(--fs-xs) var(--font-ui); color: var(--accent-hi); font-variant-numeric: tabular-nums; } /* откат: тёмный сектор на иконке — сколько осталось до сброса, растёт по часовой от 12 часов, как у умения в игре */ .slot .cd { position: absolute; inset: 0; z-index: 2; display: none; --sw: var(--left, 1); background: conic-gradient(rgba(8, 5, 18, .66) calc(var(--sw) * 1turn), transparent 0); } :root[data-faction="elyos"] .slot .cd { background: conic-gradient(rgba(40, 46, 96, .5) calc(var(--sw) * 1turn), transparent 0); } .slot.justdone .cd { animation: cdsweep .75s var(--ease-out) both; } @keyframes cdsweep { from { --sw: 0; } } .slot.done { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); } .slot.done .cd { display: block; } .slot.done .icon img, .slot.done .icon .picto { opacity: .5; filter: saturate(.4); } .slot.done .name { color: var(--ink-3); } .slot .chk-b { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; color: #fff; } .slot .chk-b svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 0 12px -2px var(--accent-glow); } .slot.justdone .chk-b svg { animation: pop .45s var(--spring) both; } @keyframes pop { from { transform: scale(.4); opacity: 0; } } .slot.ready-flash::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: 0 0 0 2px var(--accent-hi); animation: rflash .5s var(--ease-out) both; } @keyframes rflash { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.12); opacity: 0; } } /* «Горит» — тонкая полоса снизу, без обводки и свечения: срочность сказана один раз плашкой в шапке блока */ .slot.hot:not(.done)::before { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--hot); opacity: .9; } .slot.hot:not(.done):has(.bar)::before { display: none; } .slot.hot:not(.done) .bar span { background: var(--hot); } :root[data-faction="elyos"] .slot.hot:not(.done)::before { background: rgba(201, 154, 60, .8); } .hot-pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 12px; border-radius: 999px; white-space: nowrap; font: 600 var(--fs-xs)/1 var(--font-ui); color: var(--hot); background: color-mix(in srgb, var(--hot) 14%, transparent); } .card-h .meta .hot-pill b { color: inherit; font-weight: 700; } .hot-pill small.u { color: inherit; opacity: .8; font-size: 11px; } :root[data-faction="elyos"] .hot-pill { color: #7A5713; background: rgba(201, 154, 60, .16); } .slot .bar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; border-radius: 3px; background: var(--well-2); z-index: 4; overflow: hidden; } .slot .bar span { display: block; height: 100%; background: var(--accent-hi); } .slot.locked { cursor: default; background: transparent; } .slot.locked:hover { transform: none; background: transparent; box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c); } .slot.locked .icon > img, .slot.locked .icon > .picto { filter: grayscale(1) brightness(.6); opacity: .6; } .slot.locked .name { color: var(--ink-3); } /* замок — чипом в углу, а не поверх пиктограммы */ .slot .lockc { position: absolute; top: 6px; right: 6px; z-index: 4; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font: 600 11px/16px var(--font-ui); color: var(--ink-2); background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge); } .slot .lockc .i-lock { width: 11px; height: 11px; } :root[data-faction="elyos"] .slot .lockc { background: rgba(255, 255, 255, .8); } .slot.more { justify-content: center; gap: 4px; background: transparent; box-shadow: inset 0 0 0 1px var(--edge-2); } .slot.more b { font: var(--fw-num) 22px var(--font-num); color: var(--ink-2); } .slot.more .name { color: var(--ink-2); font-weight: 500; } .help { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--edge-2); color: var(--ink-2); font: 600 var(--fs-xs) var(--font-ui); cursor: help; } /* ---------- События, энергия, скан ---------- */ .rows { display: grid; gap: 6px; } .rowline { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--well); } .evline > span { display: grid; min-width: 0; } .evline small { font-size: var(--fs-xs); color: var(--ink-3); } .evline b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--fs-ui); } .evline b.live { color: var(--ok); } .energy { display: flex; align-items: center; gap: 18px; } .energy .lring.semi { --size: 150px; --th: 12px; } .energy .lr-c { padding-bottom: 6px; } .energy .lr-c b { font: var(--fw-num) 30px/1 var(--font-num); letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; } .energy .lr-c small { font-size: var(--fs-xs); color: var(--ink-3); } .energy-t { display: grid; gap: 6px; font-size: var(--fs-ui); color: var(--ink-2); } .hint { font-size: var(--fs-sm); color: var(--done-ink); margin: 0; } details.fix { margin-top: 10px; font-size: var(--fs-sm); } details.fix summary, details.more summary { cursor: pointer; color: var(--ink-3); min-height: 36px; display: inline-flex; align-items: center; gap: 6px; list-style: none; border-radius: 999px; } details.fix summary::-webkit-details-marker, details.more summary::-webkit-details-marker, details summary::-webkit-details-marker { display: none; } details.fix summary:hover, details.more summary:hover { color: var(--ink); } details.fix form { margin-top: 8px; } /* Энергия без данных — одно крупное поле ввода в строку */ .energy-in { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .energy-in input { width: 150px; height: 48px; padding: 0 14px; border-radius: 14px; font: var(--fw-num) 22px/1 var(--font-num); letter-spacing: var(--ls-num); text-align: center; background: var(--well); box-shadow: inset 0 0 0 1px var(--edge-2); } .energy-in input::placeholder { font: 400 var(--fs-ui) var(--font-ui); letter-spacing: 0; } .energy-in .of { color: var(--ink-3); font-size: var(--fs-ui); } .energy-in .btn { margin-left: auto; min-height: 48px; padding: 0 20px; } .energy-note { margin: 10px 0 0; color: var(--ink-3); } /* Неделя задач, пока данных меньше трёх дней: 7 точек-дней, сегодняшний подсвечен */ .wdots { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .wd { display: grid; justify-items: center; gap: 6px; } .wd i { position: relative; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--edge-2); overflow: hidden; background: conic-gradient(var(--accent) calc(var(--f) * 1turn), transparent 0); } .wd.none i { background: none; box-shadow: inset 0 0 0 1.5px var(--edge); opacity: .7; } .wd.today i { box-shadow: inset 0 0 0 2px var(--accent-hi), 0 0 14px -2px var(--accent-glow); } .wd i::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg1); } :root[data-faction="elyos"] .wd i::after { background: #EEF0FB; } .wd small { font-size: 11px; color: var(--ink-3); white-space: nowrap; } .wd.today small { color: var(--ink); font-weight: 600; } .wnote { margin: 12px 0 0; } .scanline { font-size: var(--fs-ui); } /* ---------- Графики ---------- */ /* Заголовок карточки — вкладки «Боевая мощь / Ур. предметов» (активная — как заголовок), справа период */ .ch-head { flex-wrap: wrap; } .ch-tabs { flex: 1; display: flex; gap: 4px 18px; flex-wrap: wrap; min-width: 0; } .ch-tabs button { padding: 4px 0; border: 0; background: none; cursor: pointer; font: var(--fw-h2) var(--fs-h2)/1.3 var(--font-h2); color: var(--ink-3); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; } .ch-tabs button:hover { color: var(--ink-2); } .ch-tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); } .seg.sm button { min-height: 30px; padding: 0 12px; font-size: var(--fs-xs); } .chart { position: relative; min-height: 190px; border-radius: var(--r-m); } /* график главной тянется на высоту ряда (рядом — «Следующий шаг» и быстрые действия): svg вне потока, высоту даёт ряд */ .grid .chart-card { align-self: stretch; display: flex; flex-direction: column; } /* колонка рядом с графиком: «Следующий шаг» и быстрые действия делят высоту ряда */ .grid.home > .c4.stack { align-self: stretch; grid-template-rows: auto 1fr; } .grid.home > .c4.stack .quick { display: grid; grid-template-rows: auto 1fr; } .grid.home > .c4.stack .quick .tiles { grid-auto-rows: 1fr; } .chart-card #mainChart { flex: 1 1 auto; min-height: 240px; } .chart-card #mainChart > svg { position: absolute; left: 0; top: 0; } .chart:focus-visible { outline-offset: 6px; } .chart svg.ch { display: block; overflow: visible; } .ch-grid { stroke: var(--edge); stroke-width: 1; shape-rendering: crispEdges; } :root[data-faction="elyos"] .ch-grid { stroke: rgba(91, 96, 160, .14); } .ch-tick { fill: var(--ink-3); font: 500 var(--fs-xs) var(--font-ui); font-variant-numeric: tabular-nums; } .ch-tick.on { fill: var(--ink); font-weight: 700; } .ch-val { fill: var(--ink); font: 700 var(--fs-xs) var(--font-ui); font-variant-numeric: tabular-nums; } .ch-s0 { stop-color: var(--chart-a); stop-opacity: .45; } .ch-s1 { stop-color: var(--chart-a); stop-opacity: .14; } .ch-s2 { stop-color: var(--chart-a); stop-opacity: 0; } :root[data-faction="elyos"] .ch-s0 { stop-color: #3CC8C0; stop-opacity: .55; } :root[data-faction="elyos"] .ch-s1 { stop-color: #5B5BD6; stop-opacity: .16; } :root[data-faction="elyos"] .ch-s2 { stop-color: #5B5BD6; stop-opacity: 0; } .ch-area { animation: chfade 1s var(--ease-out) .25s both; } @keyframes chfade { from { opacity: 0; } } .ch-line { fill: none; stroke: var(--chart-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(139, 92, 246, .7)); } :root[data-faction="elyos"] .ch-line { filter: drop-shadow(0 4px 8px rgba(91, 91, 214, .35)); } /* элийцы (реф. 5): линия — бирюза → индиго, по верху светлая кромка */ :root[data-faction="elyos"] .ch-line { stroke: url(#chLineGrad); } .ch-lg0 { stop-color: var(--chart-line); } .ch-lg1 { stop-color: var(--chart-line); } :root[data-faction="elyos"] .ch-lg0 { stop-color: #3CC8C0; } :root[data-faction="elyos"] .ch-lg1 { stop-color: #5B5BD6; } .ch-hi { fill: none; stroke: #fff; stroke-width: 1; opacity: 0; transform: translateY(-1px); } :root[data-faction="elyos"] .ch-hi { opacity: .7; } .ch-guide { stroke: var(--accent-hi); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; } .ch-glow { fill: none; stroke: var(--chart-a); stroke-width: 9; opacity: .6; animation: chfade 1.2s var(--ease-out) .35s both; } :root[data-faction="elyos"] .ch-glow { opacity: .3; } .draw { stroke-dasharray: 1; stroke-dashoffset: 1; } .draw.drawn { animation: drawin 1.1s var(--ease-out) forwards; } @keyframes drawin { to { stroke-dashoffset: 0; } } .ch-x { stroke: var(--ink-3); stroke-width: 1; } .ch-hov { fill: var(--chart-line); stroke: var(--bg0); stroke-width: 2; } .ch-dot { fill: var(--chart-line); stroke: var(--bg0); stroke-width: 2; } :root[data-faction="elyos"] .ch-dot, :root[data-faction="elyos"] .ch-hov { stroke: #fff; } .ch-halo { fill: var(--chart-a); opacity: .25; transform-box: fill-box; transform-origin: center; animation: halo 2.4s var(--ease-io) infinite; } @keyframes halo { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(1.8); opacity: 0; } } /* плашка значения «сейчас» — стекло акцента, как «246 Today» в реф. 1 */ .ch-pill { fill: rgba(139, 92, 246, .25); stroke: rgba(167, 139, 250, .5); stroke-width: 1; } :root[data-faction="elyos"] .ch-pill { fill: rgba(255, 255, 255, .85); stroke: rgba(91, 91, 214, .35); } .ch-pill-t { fill: var(--ink); font: 700 13px var(--font-ui); font-variant-numeric: tabular-nums; } .ch-pill-s { fill: var(--ink-2); font: 500 10px var(--font-ui); } .ch-now { animation: chfade .5s var(--ease-out) .9s both; } .ch-tip { position: absolute; z-index: 5; pointer-events: none; display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; white-space: nowrap; background: var(--glass-pop); box-shadow: 0 0 0 1px var(--edge-2), var(--shadow-pop); transform: translate(-50%, calc(-100% - 14px)) scale(.96); opacity: 0; transition: opacity .16s, transform .3s var(--spring-soft); } .ch-tip.on { opacity: 1; transform: translate(-50%, calc(-100% - 14px)); } .ch-tip b { font: 700 var(--fs-body) var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; } .ch-tip span { font-size: var(--fs-xs); color: var(--ink-3); } .col-track { fill: var(--well-2); } .col-bar { fill: var(--chart-a); } .col.today .col-bar { fill: var(--chart-line); filter: drop-shadow(0 0 6px var(--accent-glow)); } .col-bar.grow { transform-box: fill-box; transform-origin: 50% 100%; animation: colgrow .8s var(--spring-soft) both; animation-delay: var(--d, 0ms); } @keyframes colgrow { from { transform: scaleY(0); } } .col:hover .col-track { fill: var(--edge-2); } .spark { display: block; overflow: visible; } .sp-line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(139, 92, 246, .6)); } :root[data-faction="elyos"] .sp-line { stroke: #5B5BD6; filter: drop-shadow(0 2px 4px rgba(91, 91, 214, .35)); } .sp-area { opacity: 1; } .sp-s0 { stop-color: var(--chart-a); stop-opacity: .35; } .sp-s1 { stop-color: var(--chart-a); stop-opacity: 0; } :root[data-faction="elyos"] .sp-s0 { stop-color: #3CC8C0; stop-opacity: .35; } .sp-dot { fill: #fff; } .sp-halo { fill: var(--chart-a); opacity: .3; } .hbar { display: block; overflow: visible; } .hb-track { fill: var(--well-2); } .hb-hatch { fill: var(--accent-hi); opacity: .55; } :root[data-faction="elyos"] .hb-hatch { fill: var(--teal); } .hb-fill { fill: var(--chart-line); } .hb-ghost { fill: var(--accent-soft); } .hb-target { fill: var(--chart-target); } .grow-x { transform-box: fill-box; transform-origin: 0 50%; animation: growx .9s var(--ease-out) both; } @keyframes growx { from { transform: scaleX(0); } } details.ctable { margin-top: 8px; font-size: var(--fs-sm); } details.ctable summary { cursor: pointer; color: var(--ink-3); min-height: 32px; display: inline-flex; align-items: center; } .legend { display: flex; gap: 16px; font-size: var(--fs-sm); color: var(--ink-2); } /* ---------- Баннер раздела: арт игры крупно, заголовок с выделенным словом ---------- */ .banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; gap: 20px; min-height: 210px; padding: 28px 32px; margin-bottom: var(--gap); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, .1), var(--shadow); background: var(--bg1); } .banner.slim { min-height: 168px; } .banner-art { position: absolute; inset: 0; z-index: -2; } .banner-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 45%); } .banner::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(9, 6, 20, .86) 0%, rgba(9, 6, 20, .42) 42%, rgba(9, 6, 20, 0) 78%), linear-gradient(0deg, rgba(9, 6, 20, .5), transparent 50%); } /* Элийцы: вуаль — лаванда, арт светлее; иначе тёмный кадр под белой вуалью давал грязно-серый вместо ледяного */ :root[data-faction="elyos"] .banner::before { background: linear-gradient(90deg, rgba(236, 240, 255, .95) 0%, rgba(226, 230, 255, .72) 42%, rgba(199, 194, 255, .12) 100%), linear-gradient(0deg, rgba(236, 240, 255, .4), transparent 55%); } :root[data-faction="elyos"] .banner-art img { filter: brightness(1.2) saturate(1.15) contrast(.92); } /* Подземелья у асмодиан: арт должен «дышать», а не уходить в черноту */ :root:not([data-faction="elyos"]) .runs-banner .banner-art img { filter: brightness(1.45) saturate(1.1); } /* огненный арт калькулятора у асмодиан — в фиолет стороны: багровые крылья становятся лиловыми */ :root:not([data-faction="elyos"]) .calc-banner .banner-art img { filter: hue-rotate(-62deg) saturate(.8) brightness(.85); } /* «Прокачка» у асмодиан: голубое небо и башня — в фиолет стороны */ :root:not([data-faction="elyos"]) .grow-banner .banner-art img { filter: hue-rotate(28deg) saturate(.85) brightness(.85); } .banner-body { position: relative; flex: 1; min-width: 0; display: grid; gap: 8px; max-width: 640px; } .banner h1 { color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .4); text-wrap: balance; } :root[data-faction="elyos"] .banner h1 { color: var(--ink); text-shadow: none; } :root[data-faction="elyos"] .banner h1.chrome { color: transparent; } .banner-sub { margin: 0; color: rgba(240, 235, 255, .86); font-size: var(--fs-body); } :root[data-faction="elyos"] .banner-sub { color: var(--ink-2); } .banner-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .banner .btn:not(.primary) { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } :root[data-faction="elyos"] .banner .btn:not(.primary) { background: rgba(255, 255, 255, .75); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge-2); } .banner-aside { position: relative; flex: none; display: grid; justify-items: center; gap: 6px; color: #fff; } :root[data-faction="elyos"] .banner-aside { color: var(--ink); } .banner-aside .lring { --size: 116px; --th: 9px; } .banner .seg { background: rgba(0, 0, 0, .25); } :root[data-faction="elyos"] .banner .seg { background: rgba(255, 255, 255, .6); } /* шапка «Персонажа»: свой арт стороны, сильно затемнённый; слева — портрет, имя и четыре одинаковые плашки, справа — мини-график боевой мощи по снимкам */ .char-banner { min-height: 240px; align-items: center; padding-right: 300px; } :root:not([data-faction="elyos"]) .char-banner { background: rgba(14, 10, 26, .72); } :root:not([data-faction="elyos"]) .char-banner .banner-art img { filter: saturate(.6) brightness(.42); } :root:not([data-faction="elyos"]) .char-banner::before { background: linear-gradient(90deg, rgba(11, 8, 20, .92) 30%, rgba(11, 8, 20, .62) 62%, rgba(11, 8, 20, .35)), linear-gradient(0deg, rgba(9, 6, 20, .5), transparent 50%); } :root[data-faction="elyos"] .char-banner .banner-art img { object-position: 70% 18%; } :root[data-faction="elyos"] .char-banner .banner-art { -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); } .banner-tools { position: absolute; top: 18px; right: 18px; z-index: 2; display: flex; align-items: center; gap: 8px; } .char-body { max-width: none; gap: 18px; } .char-id { display: grid; gap: 8px; min-width: 0; } .char-id h1 { font-size: clamp(32px, 2.6vw, 40px); } .char-when { margin: 0; font-size: var(--fs-xs); color: rgba(220, 212, 245, .62); } :root[data-faction="elyos"] .char-when { color: var(--ink-3); } .char-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; } .char-kpis .ck { display: flex; align-items: center; gap: 10px; min-height: 76px; min-width: 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } :root[data-faction="elyos"] .char-kpis .ck { background: rgba(255, 255, 255, .66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 8px 20px -12px rgba(60, 70, 140, .3); } .ck-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; overflow: hidden; color: #fff; background: radial-gradient(circle at 30% 25%, #A78BFA, #6D28D9); } .ck-ic svg { width: 16px; height: 16px; } .ck-ic img { width: 100%; height: 100%; object-fit: contain; background: rgba(0, 0, 0, .25); } :root[data-faction="elyos"] .ck-ic { background: linear-gradient(160deg, #4F7BFF, #5B5BD6); } .ck-t { display: grid; gap: 3px; min-width: 0; } .char-kpis .ck small { font-size: var(--fs-xs); color: rgba(240, 235, 255, .7); } :root[data-faction="elyos"] .char-kpis .ck small { color: var(--ink-3); } .char-kpis .ck b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font: var(--fw-num) 20px/1.1 var(--font-num); letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; } :root[data-faction="elyos"] .char-kpis .ck b { color: var(--ink); } .char-kpis .ck .ck-n { font: 600 var(--fs-ui)/1.25 var(--font-ui); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; } .char-kpis .ck .chip { height: 20px; padding: 0 8px; font-size: 11px; } .char-kpis .ck[data-tip] { cursor: help; } /* мини-график мощи: стеклянная плашка справа, линия со свечением */ .char-spark { position: absolute; right: 24px; bottom: 24px; z-index: 1; width: 252px; display: grid; gap: 8px; padding: 14px 16px 12px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .char-spark small { font-size: var(--fs-xs); color: rgba(240, 235, 255, .7); } .char-spark .spark { width: 100%; height: 80px; } :root[data-faction="elyos"] .char-spark { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); } :root[data-faction="elyos"] .char-spark small { color: var(--ink-3); } /* титулы: категория · имя цветом грейда · сколько получено в категории */ .trows { display: grid; gap: 6px; } .trow2 { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 12px; background: var(--well); cursor: help; } .trow2 .tc { font-size: var(--fs-xs); color: var(--ink-3); } .trow2 b { font-weight: 600; font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trow2 small { font-size: var(--fs-xs); color: var(--ink-3); } /* меню «⋯» */ details.menu { position: relative; } details.menu > summary { list-style: none; } details.menu > summary::-webkit-details-marker { display: none; } .menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; padding: 6px; border-radius: 16px; background: var(--glass-pop); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 0 0 1px var(--edge-2), var(--shadow-pop); animation: tipin .28s var(--spring-soft) both; } .menu-i { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; font: 500 var(--fs-ui) var(--font-ui); text-align: left; } .menu-i:hover { background: var(--well-2); } .menu-i.danger { color: var(--hot); } .menu-i svg { width: 18px; height: 18px; } /* заголовок раздела без баннера («База»: главное — поиск) */ .page-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 18px; } .page-h p { margin: 0; font-size: var(--fs-sm); } /* Компактная шапка внутренних разделов: H1 Unbounded 500 40 px без градиента, строка пояснения, справа — виджет и действия */ .phead { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px 24px; margin: 6px 0 24px; min-height: 72px; } .phead-t { flex: 1 1 360px; min-width: 0; display: grid; gap: 8px; } .phead h1 { font: 500 40px/1.06 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; } .phead p { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: var(--fs-body); text-wrap: pretty; } .phead-a { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .phead-w { display: flex; align-items: center; gap: 12px; } .phead.sm h1 { font-size: 36px; } /* виджет шапки — стеклянная плашка: кольцо или число и подпись */ .hw { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px 10px 10px; border-radius: 18px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c); -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)); backdrop-filter: blur(var(--blur)) saturate(var(--sat)); } .hw .lring { --size: 48px; --th: 5px; } .hw .lring .lr-c b { font: var(--fw-num) 12px/1 var(--font-num); } .hw-t { display: grid; gap: 2px; line-height: 1.2; } .hw-t b { font: var(--fw-num) 22px/1.1 var(--font-num); letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; color: var(--ink); } .hw-t small { font-size: var(--fs-xs); color: var(--ink-3); } .hw.busy .hw-t b { opacity: .55; } /* кен-бёрнс у арт-окон: только на видимых (motion.js ставит .live) */ .art-window img { animation: kenburns 40s var(--ease-io) infinite alternate; animation-play-state: paused; } .art-window.live img { animation-play-state: running; } @keyframes kenburns { to { transform: scale(1.08) translate(-1.5%, -1%); } } :root.paused *, :root.paused *::before, :root.paused *::after { animation-play-state: paused !important; } /* простой (motion.js .idle): замирают только бесконечные «атмосферные» анимации; появление карточек, счётчики и индикаторы загрузки доигрывают — иначе раздел, открытый в окне без фокуса, остался бы прозрачным */ :root.idle :is(.orb, .glass-orb, .sparkles i, .hero-scene .scene, .hero-sparks i, .hero-char, .wings-glow, .art-window img, .ch-halo, .fl-run, .lring), :root.idle :is(.lring, .fnode .d, .itemcell .frame)::after, :root.idle .itemcell .frame::before { animation-play-state: paused !important; } /* появление арта героя (.play → charin) делит элемент с кен-бёрнсом: в окне без фокуса оно не должно замереть на прозрачном первом кадре — иначе баннер «Путь до 45» пустой, пока не шевельнёшь мышью */ :root.idle .hero.play :is(.hero-scene .scene, .hero-char) { animation-play-state: running !important; } /* ---------- Появление и переходы ---------- */ .rv.pre { opacity: 0; } .rv.enter { animation: rise .42s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); } @keyframes rise { from { opacity: 0; transform: translateY(12px); } } /* во время «разлома» — только подъём, без прозрачности: внутри шва новый раздел сразу плотный */ .rv.enter-y { animation: rise-y .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); } @keyframes rise-y { from { transform: translateY(12px); } } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* Постоянные части — меню, верхняя строка, нижняя панель — выведены из перехода: шов идёт только по содержимому, а их новый снимок живой — «таблетка» меню и подложка вкладки видны скользящими. При смене темы имена снимаются: круг раскрывает весь экран. */ .side { view-transition-name: side; } .topbar { view-transition-name: topbar; } @media (max-width: 760px) { .tabbar { view-transition-name: tabbar; } } html[data-vt="theme"] :is(.side, .topbar, .tabbar) { view-transition-name: none; } ::view-transition-group(side), ::view-transition-group(topbar), ::view-transition-group(tabbar) { animation: none; } ::view-transition-old(side), ::view-transition-old(topbar), ::view-transition-old(tabbar) { display: none; } ::view-transition-new(side), ::view-transition-new(topbar), ::view-transition-new(tabbar) { animation: none; } /* «Разлом» — вертикальный шов из точки клика расходится в обе стороны (мотив заставки); 380 мс, кривая с быстрым стартом: шов сразу распахивается и плавно дотягивает края (та же кривая — у кромок в motion.js) */ html[data-vt="rift"]::view-transition-new(root) { animation: rift .38s cubic-bezier(.16, 1, .3, 1) both; } @keyframes rift { from { clip-path: inset(0 calc(100% - var(--vt-x)) 0 var(--vt-x)); } to { clip-path: inset(0 0 0 0); } } /* назад/вперёд и переходы внутри раздела — короткий кроссфейд с подъёмом */ html[data-vt="back"]::view-transition-old(root) { animation: vtout .16s var(--ease-in) both; } html[data-vt="back"]::view-transition-new(root) { animation: vtin .18s var(--ease-out) both; } html[data-vt="fade"]::view-transition-old(root) { animation: vtout .5s var(--ease-io) both; } html[data-vt="fade"]::view-transition-new(root) { animation: vtin .6s var(--ease-io) both; } /* смена стороны — новая тема раскрывается кругом от нажатой карточки */ html[data-vt="theme"]::view-transition-new(root) { animation: themein .7s cubic-bezier(.7, 0, .2, 1) both; } @keyframes themein { from { clip-path: circle(0 at var(--vt-x) var(--vt-y)); } to { clip-path: circle(var(--vt-r) at var(--vt-x) var(--vt-y)); } } @keyframes vtout { to { opacity: 0; } } @keyframes vtin { from { opacity: 0; transform: translateY(8px); } } /* кромки шва — своей группой перехода: их не обрезает раскрывающаяся полоса, свечение видно по обе стороны */ .rift-rim { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 90; pointer-events: none; view-transition-name: rift-rim; } /* край круга смены темы — светящееся кольцо */ .theme-rim { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; view-transition-name: theme-rim; } .theme-rim i { position: absolute; border-radius: 50%; transform: scale(0); box-shadow: inset 0 0 0 2px var(--accent-hi), 0 0 28px 4px var(--accent-glow), inset 0 0 24px 2px var(--accent-glow); } ::view-transition-group(theme-rim) { z-index: 2; } ::view-transition-new(theme-rim), ::view-transition-old(theme-rim) { animation: none; } ::view-transition-group(rift-rim) { z-index: 2; } ::view-transition-new(rift-rim), ::view-transition-old(rift-rim) { animation: none; } .rift-rim i { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, #fff 18%, #fff 82%, transparent); box-shadow: 0 0 24px 6px var(--accent-glow), 0 0 4px 1px var(--accent-hi); } /* смена стороны: вспышка логотипа и мягкий свет от него */ .theme-flash .brand img { animation: embg 1.2s var(--ease-out); } @keyframes embg { 30% { filter: drop-shadow(0 0 18px var(--accent-glow)) brightness(1.35); transform: scale(1.06); } } .theme-flash body::after { content: ''; position: fixed; inset: 0; z-index: 95; pointer-events: none; background: radial-gradient(900px circle at 120px 60px, var(--accent-glow), transparent 60%); animation: tflash 1.2s var(--ease-out) both; } @keyframes tflash { 0% { opacity: 0; } 25% { opacity: .9; } 100% { opacity: 0; } } /* одометр (motion.js): каждая цифра — барабан 0–9, прокатывается с пружиной */ /* цифры и разделители — в одних ячейках 1.1em с общей верхней линией: при прокрутке ничего не «разъезжается» */ .odo { display: inline-flex; align-items: flex-start; line-height: 1.1; } .odo-d { display: inline-block; height: 1.1em; overflow: hidden; line-height: 1.1; } .odo-d > span { display: flex; flex-direction: column; transform: translateY(calc(var(--from) * -1.1em)); } .odo-d i { display: block; height: 1.1em; font-style: normal; } .odo.roll .odo-d > span { transform: translateY(calc(var(--to) * -1.1em)); transition: transform 560ms cubic-bezier(.2, 1.1, .3, 1) var(--d); } .odo-s { display: inline-block; height: 1.1em; line-height: 1.1; } /* первый показ числа — проявление без прокрутки */ .num-in { animation: numin .5s var(--ease-out) both; } @keyframes numin { from { opacity: 0; filter: blur(4px); transform: translateY(4px); } } /* перерисовка после действия: графики сразу в итоге, без повторной анимации */ svg.static .draw, .draw.static { stroke-dashoffset: 0; animation: none; } svg.static .ch-area, svg.static .ch-glow, svg.static .ch-now, svg.static .col-bar.grow, svg.static .ch-hi { animation: none; } .ch-hi { animation: chfade .8s var(--ease-out) 1s both; } /* загрузка раздела дольше 160 мс — тонкая полоса под верхней строкой */ .loading .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-hi), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: loadbar 1s linear infinite; } @keyframes loadbar { from { background-position: -40% 0; } to { background-position: 140% 0; } } /* «Настройки» внизу меню — та же залитая таблетка, что у разделов (индикатор живёт только в верхнем списке) */ .side-foot .sn.on { color: #fff; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 8px 24px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .22); } .lring .lr-c small { font-size: var(--fs-xs); color: var(--ink-3); } .banner-aside .lring .lr-c small { color: inherit; opacity: .8; } .banner-aside .lring .lr-c b { font: var(--fw-num) 34px/1 var(--font-num); letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; } .card-h.mt { margin-top: 32px; } .card-h.mt h2 { font-size: 20px; } .tab > span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* пустое состояние с действием (нет скана, нет забегов) */ .empty-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border-radius: var(--r-m); background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); } .empty-card .ec-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-hi); background: var(--accent-soft); } .empty-card .ec-ic svg { width: 22px; height: 22px; } .empty-card b { display: block; font-size: var(--fs-body); margin-bottom: 4px; } .empty-card p { margin: 0 0 12px; color: var(--ink-2); font-size: var(--fs-sm); } /* совет полосой над панелью */ .strip { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; padding: 10px 14px; border-radius: 12px; font-size: var(--fs-sm); color: var(--ink-2); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); } .strip svg { flex: none; width: 18px; height: 18px; color: var(--accent-hi); } /* списки-сетки в одну колонку: строки тянутся по ширине карточки и не распирают её */ .brk, .lvlbars, .steps, .todos, .rows, .rlist, .stack { grid-template-columns: minmax(0, 1fr); } /* ячейки порядка главной: на ПК прозрачны, на телефоне задают порядок блоков (--o) */ .o { display: contents; } @media (max-width: 760px) { .o > * { order: var(--o); } } /* ---------- Персонаж ---------- */ .char-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding-right: 230px; } .char-por { position: relative; width: 120px; height: 120px; border-radius: 32px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 18px 40px -10px rgba(0, 0, 0, .6); background: radial-gradient(#2B1A55, #0B0814); } :root[data-faction="elyos"] .char-por { background: radial-gradient(#3B4AA8, #161A44); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(91, 91, 214, .35), 0 18px 40px -14px rgba(40, 50, 130, .5); } .char-por img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: opacity .3s; } .char-por img.cutting { opacity: 0; } .char-por img.cut { object-position: 50% 18%; transform: scale(1.18); transform-origin: 50% 20%; } :root[data-faction="elyos"] .char-por:has(img.cut) { background: radial-gradient(90% 90% at 50% 25%, #FFFFFF, #DCE3FF 60%, #C7C2FF); } .char-por .lv { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; font: 700 var(--fs-xs) var(--font-ui); color: #fff; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hero-title { color: var(--accent-hi); font-size: var(--fs-ui); font-weight: 600; } .hero-title span { margin-right: 8px; font-size: var(--fs-xs); font-weight: 500; opacity: .7; } .banner .hero-title { color: #D9CCFF; } :root[data-faction="elyos"] .banner .hero-title { color: var(--accent-hi); } :root[data-faction="elyos"] .hero-title span { opacity: 1; color: var(--ink-3); } /* Кукла: 64 px ячейки, слева 6 брони, справа бижутерия парами, кукла — ряды 1–6, оружие одним рядом по центру под ней */ /* Кукла: 64 px ячейки — слева 6 брони, справа 6 рядов (бижутерия парами, в последнем — крылья и питомец), портрет по центру на всю высоту, под ним — оружие */ /* портрет не шире 440 px: рендер NC квадратный, на широком окне витрина становилась полосой и резала лицо */ .doll { display: grid; grid-template-columns: 64px minmax(0, 440px) 64px 64px; justify-content: center; gap: 10px 12px; grid-template-rows: repeat(6, 64px) auto; grid-template-areas: "p3 por p10 p22" "p4 por p11 p12" "p5 por p13 p14" "p6 por p15 p16" "p7 por p17 p19" "p8 por pw pp" ". wp . ."; } .doll .por { grid-area: por; position: relative; overflow: hidden; border-radius: var(--r-l); background: radial-gradient(60% 55% at 50% 42%, rgba(139, 92, 246, .32), transparent 72%), radial-gradient(90% 40% at 50% 100%, rgba(124, 58, 237, .22), transparent 70%), var(--well); box-shadow: inset 0 0 0 1px var(--edge); } /* фон рендера NC вырезан (portraitCut) — фигура стоит на стекле без смешивания; пока режем — не показываем */ .doll .por img { position: absolute; left: 50%; bottom: 0; width: 112%; max-width: none; height: auto; translate: -50% 0; transition: opacity .35s var(--ease-out); } .doll .por img.cutting { opacity: 0; } .doll .por img.cut { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); } /* запасной вид, если вырезать не вышло: «светлое наложение» растворяет чёрный в стекле */ .doll .por img.raw { inset: 0; left: 0; translate: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000 60%, transparent); mask-image: radial-gradient(70% 80% at 50% 40%, #000 60%, transparent); } /* элийцы: светлая витрина — белый свет сверху, лаванда снизу; фигура — с мягкой тенью */ :root[data-faction="elyos"] .doll .por { background: radial-gradient(120% 90% at 50% 20%, #FFFFFF 0%, #E4E9FB 55%, #CBD3F3 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 20px 50px rgba(80, 90, 160, .18); } :root[data-faction="elyos"] .doll .por img.cut { filter: drop-shadow(0 16px 24px rgba(40, 50, 120, .3)); } :root[data-faction="elyos"] .doll .por img.raw { mix-blend-mode: multiply; } .doll .por .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: var(--fs-sm); text-align: center; padding: 12px; } .doll-weap { grid-area: wp; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; } .itemcell { --gc: #8592A8; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); display: block; } /* Стеклянная рамка: цвет грейда — только нижней кромкой 2 px и мягким свечением снизу, а не яркой линией по всему квадрату */ .itemcell .frame { position: relative; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 16px; background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--gc) 25%, transparent), transparent 60%), var(--well); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -2px 0 var(--gc), 0 0 16px -6px var(--gc); transition: box-shadow .2s, transform .45s var(--spring); } /* элийцы: светлое стекло ячейки, кольцо грейда 2 px; иконка — с тенью, чтобы не тонула в светлом */ :root[data-faction="elyos"] .itemcell .frame { background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(226, 232, 250, .7)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gc) 70%, transparent), 0 6px 14px -8px rgba(40, 50, 120, .35); } :root[data-faction="elyos"] .itemcell .frame img { filter: drop-shadow(0 2px 4px rgba(20, 24, 60, .35)); } .itemcell .frame.sm { width: 46px; height: 46px; border-radius: 12px; } .itemcell .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .itemcell.weap .frame { width: 64px; height: 64px; } .itemcell .enh { position: absolute; top: 2px; right: 5px; z-index: 2; font: 700 var(--fs-xs) var(--font-ui); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; } .itemcell .exc { position: absolute; bottom: 3px; left: 5px; z-index: 2; font: 700 var(--fs-xs) var(--font-ui); color: #F3D79A; text-shadow: 0 0 3px #000; } .itemcell:hover .frame, .itemcell:focus-visible .frame { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 60%, transparent), inset 0 -2px 0 var(--gc), 0 0 22px -4px var(--gc); } .itemcell.empty { cursor: default; } .itemcell.empty .frame { background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); } :root[data-faction="elyos"] .itemcell.empty .frame { background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--edge-2); } .itemcell.empty small { font-size: var(--fs-xs); color: var(--ink-3); text-align: center; line-height: 1.1; padding: 2px; } /* грейды: у Легендарного, Уникального и Героического — медленно вращающаяся переливающаяся обводка, у Уникального ещё и искра */ .itemcell:is(.g-legend, .g-unique, .g-hero) .frame::before, .dbcard:is([style*="5C8DFF"], [style*="F2C14E"], [style*="FF8A4C"]) .itemcell .frame::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ang), var(--gc), transparent 25%, color-mix(in srgb, var(--gc) 40%, #fff) 45%, transparent 60%, var(--gc) 85%, var(--gc)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: gspin 6s linear infinite; animation-play-state: paused; } .itemcell:is(:hover, :focus-visible) .frame::before, .dbcard:is(:hover, :focus-visible) .itemcell .frame::before { animation-play-state: running; } @keyframes gspin { to { --ang: 360deg; } } .itemcell.g-unique .frame::after { content: ''; position: absolute; z-index: 2; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px var(--g-unique); offset-path: inset(0 round 16px); offset-rotate: 0deg; animation: spark 5.5s linear infinite; } @keyframes spark { 0% { offset-distance: 0%; opacity: 0; } 4% { opacity: 1; } 34% { offset-distance: 100%; opacity: 1; } 38%, 100% { offset-distance: 100%; opacity: 0; } } .g-common { color: color-mix(in srgb, var(--g-common), #1B1E3A var(--gt)); } .g-rare { color: color-mix(in srgb, var(--g-rare), #1B1E3A var(--gt)); } .g-legend { color: color-mix(in srgb, var(--g-legend), #1B1E3A var(--gt)); } .g-unique { color: color-mix(in srgb, var(--g-unique), #1B1E3A var(--gt)); } .g-hero { color: color-mix(in srgb, var(--g-hero), #1B1E3A var(--gt)); } .g-special { color: color-mix(in srgb, var(--g-special), #1B1E3A var(--gt)); } .statring { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: ". str ." "con c dex" "int c agi" ". wis ."; gap: 14px 6px; align-content: center; width: min(100%, 300px); aspect-ratio: 1; margin: 6px auto 18px; padding: 26px 14px; border-radius: 50%; background: radial-gradient(circle closest-side, var(--well-2) 0, transparent 84%, var(--well-2) 86%, var(--well) 95%, transparent 96%); box-shadow: inset 0 0 0 1px var(--edge-2), 0 0 0 6px var(--well), inset 0 0 40px var(--accent-soft); } .statring .c { grid-area: c; place-self: center; width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; background: var(--accent); box-shadow: 0 0 16px var(--accent-glow); } .statring .ps { text-align: center; cursor: help; } .statring .ps b { display: block; font: 600 var(--fs-sm) var(--font-ui); color: var(--accent-hi); } .statring .ps span { font: 700 16px var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; } .prim-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .prim-row .pill { cursor: help; padding: 6px 12px; } .statrows { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; } .statrows > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--well); font-size: var(--fs-ui); min-width: 0; color: var(--ink-2); } .statrows b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .statrows b.faint { color: var(--ink-3); } .statrows.one { grid-template-columns: 1fr; } /* божественные — 4 колонки, имя переносится (полное — в подсказке), а не «Справед…» */ .divine { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 4px; } .divine > div { display: grid; gap: 2px; align-content: start; padding: 9px 10px; border-radius: 10px; background: var(--well); cursor: help; min-width: 0; } .divine span { font-size: 11px; line-height: 1.2; color: var(--ink-3); white-space: normal; } .divine b { font: 700 16px var(--font-ui); font-variant-numeric: tabular-nums; } .divine .zero b { color: var(--ink-3); } .sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 600 14px/1.3 var(--font-ui); color: var(--ink-2); margin: 18px 0 10px; } .sec .cnt { font-weight: 500; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; } .boards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .board { display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-m); background: var(--well); } .board img { grid-row: span 2; width: 34px; height: 34px; object-fit: contain; } /* значки досок из API — белые силуэты оружия: на светлом стекле элийцев им нужна тёмная подложка */ :root[data-faction="elyos"] .board img { padding: 5px; border-radius: 10px; background: radial-gradient(120% 110% at 30% 15%, #4352B8, #1A1F4D 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); } .board .bn { font-weight: 600; font-size: var(--fs-ui); } .board small { font-size: var(--fs-xs); color: var(--ink-3); grid-column: 2; } .board .lring, .board .lockr { grid-row: span 2; grid-column: 3; } .board .lring { --size: 46px; --th: 5px; } .board .lring .lr-c { font: 700 11px var(--font-ui); } /* закрытая доска: не полупрозрачная (текст терял контраст), а серая иконка и приглушённое имя */ .board.closed { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); } .board.closed img { filter: grayscale(1) opacity(.7); } .board.closed .bn { color: var(--ink-3); font-weight: 500; } .board .lockr { display: grid; place-items: center; color: var(--ink-3); } /* узлы Даэваниона: иконки умений со значком «+N», как уровень в окне умений игры */ .dnodes { display: flex; flex-wrap: wrap; gap: 8px; } .dnode { position: relative; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; cursor: help; background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2); transition: transform .25s var(--spring-soft), box-shadow .2s; } .dnode img { width: 100%; height: 100%; object-fit: cover; display: block; } .dnode b { position: absolute; right: 2px; bottom: 2px; padding: 1px 5px; border-radius: 6px; font: 700 11px/1.3 var(--font-ui); color: #fff; background: color-mix(in srgb, var(--accent) 85%, #000); box-shadow: 0 0 8px -1px var(--accent-glow); font-variant-numeric: tabular-nums; } .dnode:hover, .dnode:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--accent-hi), 0 0 18px -4px var(--accent-glow); } .tablewrap { overflow-x: auto; } table.tbl { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: var(--fs-ui); } table.tbl th { text-align: left; color: var(--ink-3); font-weight: 500; font-size: var(--fs-xs); padding: 4px 10px; white-space: nowrap; } table.tbl td { padding: 9px 10px; background: var(--well); vertical-align: middle; } table.tbl td:first-child { border-radius: 10px 0 0 10px; } table.tbl td:last-child { border-radius: 0 10px 10px 0; } table.tbl input[type=number] { width: 80px; } /* История развития: последние 5 записей, остальные — «ещё N»; прирост — цветными плашками */ .hlist { display: grid; gap: 6px; } .hrow { display: grid; grid-template-columns: 120px 64px 170px 130px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 48px; padding: 8px 14px; border-radius: 12px; background: var(--well); font-size: var(--fs-ui); } .hrow small { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 400; } .hrow .h-when { color: var(--ink-2); } .hrow .h-pw { display: flex; align-items: center; gap: 8px; } .hrow .h-pw small.up { color: var(--ok); } .hrow .h-pw small.down { color: var(--hot); } .dpbar { flex: none; width: 48px; height: 4px; border-radius: 2px; background: var(--well-2); overflow: hidden; } .dpbar i { display: block; height: 100%; border-radius: 2px; background: var(--ok); } .dpbar.down i { background: var(--hot); } .hrow .h-ch { display: flex; align-items: center; gap: 10px; min-width: 0; } .hrow .h-tx { min-width: 0; font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hrow .h-more { flex: none; font-size: var(--fs-xs); color: var(--ink-3); padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--edge-2); } .hrow .chip { flex: none; height: 24px; } .hmore { margin-top: 8px; } .hmore .hlist { margin-top: 8px; } .ico { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; border-radius: 9px; background: var(--well-2); } /* ---------- Прокачка: поток эфира 22 → 45 ---------- */ /* Прямая линия: пройденное — градиент 2 px со свечением и бегущим светом, будущее — пунктир. Вехи — узлы 40 px, подписи по очереди снизу и сверху (не больше двух строк), остальные уровни — риски 6 px. */ .card.flow { position: relative; padding: 22px 0 8px; } .flow > .card-h { padding: 0 22px; margin-bottom: 4px; } .flow-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0 24px; scroll-padding-inline: 24px; overscroll-behavior-x: contain; } .flow-scroll::-webkit-scrollbar { display: none; } .flow-track { position: relative; min-width: 960px; height: 158px; --line: 52px; } /* плашка «вы здесь» над текущей точкой */ .fl-now { position: absolute; top: calc(var(--line) - 50px); translate: -50% 0; display: grid; justify-items: center; padding: 3px 10px 4px; border-radius: 10px; z-index: 3; pointer-events: none; background: color-mix(in srgb, var(--accent) 28%, var(--bg1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-hi) 50%, transparent), 0 6px 18px -6px var(--accent-glow); line-height: 1.1; } .fl-now b { font: var(--fw-num) 14px/1.1 var(--font-num); color: var(--ink); font-variant-numeric: tabular-nums; } .fl-now small { font-size: 10px; color: var(--ink-2); } .fl-now::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); background: inherit; box-shadow: inset -1px -1px 0 color-mix(in srgb, var(--accent-hi) 50%, transparent); } :root[data-faction="elyos"] .fl-now { background: #fff; box-shadow: 0 0 0 1px rgba(91, 91, 214, .3), 0 6px 18px -8px rgba(60, 70, 160, .4); } .fl-base { position: absolute; left: 4%; right: 4%; top: var(--line); height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--edge-2) 0 6px, transparent 6px 12px); } .fl-lit { position: absolute; left: 4%; width: calc(var(--cur) - 4%); top: var(--line); height: 2px; margin-top: -1px; overflow: hidden; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); box-shadow: 0 0 10px var(--accent-glow); } :root[data-faction="elyos"] .fl-lit { background: linear-gradient(90deg, #3CC8C0, #5B5BD6); box-shadow: 0 0 10px rgba(91, 91, 214, .4); } .fl-run { position: absolute; top: -1px; bottom: -1px; left: 0; width: 90px; background: linear-gradient(90deg, transparent, #fff, transparent); opacity: .85; animation: flowrun 2.8s linear infinite; animation-play-state: paused; } .flow.live .fl-run { animation-play-state: running; } @keyframes flowrun { from { transform: translateX(-90px); } to { transform: translateX(calc(var(--run, 900px))); } } .flow.play .fl-lit { animation: litgrow 1.2s var(--ease-out) both; transform-origin: 0 50%; } @keyframes litgrow { from { transform: scaleX(0); } } .fnode { position: absolute; top: var(--line); translate: -50% -50%; display: grid; justify-items: center; } .fnode .d { position: relative; display: grid; place-items: center; } /* риска уровня */ .fnode.tick .d { width: 6px; height: 6px; border-radius: 50%; background: var(--edge-2); } .fnode.tick.lit .d { background: var(--accent-hi); box-shadow: 0 0 8px var(--accent-glow); } .fnode.tick .n { position: absolute; top: 12px; font: 600 11px var(--font-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; } /* текущий уровень — светящаяся точка, число — плашкой над ней (.fl-now) */ .fnode.cur .d { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--accent), 0 0 18px 4px var(--accent-glow); } .fnode.cur .d::after, .fnode.ms.now .d::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; box-shadow: 0 0 0 2px var(--accent-hi); animation: pulse 1.8s var(--ease-out) infinite; animation-play-state: paused; } .flow.live .fnode .d::after { animation-play-state: running; } @keyframes pulse { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.5); opacity: 0; } } /* веха — узел 40 px с иконкой или кадром подземелья, номер уровня — значком в углу */ .fnode.ms .d { width: 44px; height: 44px; border-radius: 50%; overflow: visible; background: var(--bg1); box-shadow: 0 0 0 2px var(--edge-2), 0 0 0 5px var(--bg1); cursor: help; } .fnode.ms .d img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .fnode.ms .d .pic { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 25%, #A78BFA, #6D28D9); } .fnode.ms .d .pic svg { width: 20px; height: 20px; } .fnode.ms.lit .d { box-shadow: 0 0 0 2px var(--accent-hi), 0 0 0 5px var(--bg1), 0 0 20px 2px var(--accent-glow); } :root[data-faction="elyos"] .fnode.ms .d { background: #fff; box-shadow: 0 0 0 2px rgba(91, 96, 160, .3), 0 0 0 5px #F2F4FB; } :root[data-faction="elyos"] .fnode.ms.lit .d { box-shadow: 0 0 0 2px #4F7BFF, 0 0 0 5px #F2F4FB, 0 6px 16px -4px rgba(79, 123, 255, .5); } :root[data-faction="elyos"] .fnode.ms .d .pic { color: #3F63E6; background: linear-gradient(160deg, #fff, #E6EBFB); } .fnode.ms:not(.lit) .d img { filter: grayscale(.7) brightness(.75); opacity: .85; } .fnode.ms .n { position: absolute; top: -8px; right: -12px; z-index: 1; padding: 1px 6px; border-radius: 999px; font: 700 10px/1.4 var(--font-ui); color: var(--ink-2); background: var(--glass-pop); box-shadow: 0 0 0 1px var(--edge-2); font-variant-numeric: tabular-nums; } .fnode.ms.lit .n { color: var(--ink); } /* подписи — под линией, в две полосы; без обрезки: короткие подписи вех помещаются в две строки */ .fnode .t { position: absolute; left: 50%; translate: -50% 0; width: 112px; text-align: center; font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-2); text-wrap: balance; } .fnode.lane0 .t { top: calc(100% + 12px); } .fnode.lane1 .t { top: calc(100% + 46px); } /* во второй полосе — тонкая нить к своей вехе */ .fnode.lane1 .t::before { content: ''; position: absolute; left: 50%; top: -30px; height: 26px; width: 1px; background: linear-gradient(var(--edge-2), transparent); } .fnode.edge-l.lane1 .t::before { left: 22px; } .fnode.edge-r.lane1 .t::before { left: auto; right: 22px; } .fnode.edge-l .t { left: -6px; translate: 0 0; text-align: left; } .fnode.edge-r .t { left: auto; right: -6px; translate: 0 0; text-align: right; } .fnode.ms.lit .t { color: var(--ink); } .flow.play .fnode.lit .d { animation: nodeflash .7s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); } @keyframes nodeflash { 0% { transform: scale(.4); filter: brightness(2.2); } 60% { transform: scale(1.15); } 100% { transform: none; filter: none; } } @keyframes tick { to { opacity: .8; } } /* следующее очко */ .nextpt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; align-items: center; } .nextpt .ic { position: relative; width: 76px; height: 76px; } .nextpt .ic img { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 0 0 1px var(--edge-2), 0 0 26px -6px var(--accent-glow); } .nextpt h3 { font: 700 20px/1.25 var(--font-ui); } .nextpt .gain { font: 700 var(--fs-body) var(--font-ui); color: var(--ok); } .steps { display: grid; gap: 6px; margin-top: 14px; } .step { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px 8px 10px; border-radius: 12px; background: var(--well); min-height: 52px; cursor: help; } .step .k { font: 700 var(--fs-xs) var(--font-ui); color: var(--ink-3); text-align: center; } .step img { width: 36px; height: 36px; border-radius: 10px; } .step .tx { display: grid; min-width: 0; line-height: 1.3; } .step .tx b { font-weight: 600; font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .step .tx small { font-size: var(--fs-xs); color: var(--ink-3); } .step .v { text-align: right; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; } .step .v b { color: var(--ink); font-variant-numeric: tabular-nums; } .step.later { opacity: .75; } .step.later .k .i-lock { width: 12px; height: 12px; } /* умения: кольцо уровня, «+1», слоты специализаций */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } /* сетка карточки: кольцо 72 · имя (2 строки, прижато книзу) · уровень · специализации — нижние линии ряда совпадают */ .skc { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: 72px 2.6em auto auto; align-content: start; justify-items: center; gap: 6px; padding: 16px 10px 12px; border: 0; border-radius: var(--r-m); cursor: help; background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); text-align: center; font: inherit; transition: background .2s, transform .45s var(--spring); } .skc:hover { background: var(--well-2); transform: translateY(-2px); } .skc .lring { --size: 70px; --th: 4px; } .skc .lring img { width: 54px; height: 54px; border-radius: 14px; } .skc .plus { position: absolute; top: -4px; right: -10px; z-index: 2; padding: 3px 7px; border-radius: 999px; font: 700 var(--fs-xs)/1 var(--font-ui); color: var(--on-accent); background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 4px 12px -2px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .3); overflow: hidden; } .skc .plus.best { background: linear-gradient(180deg, #F3D79A, #C99A3C); color: #1B1407; box-shadow: 0 4px 14px -2px rgba(232, 196, 120, .6); } .skc-n { display: flex; align-items: flex-end; justify-content: center; font-weight: 600; font-size: var(--fs-ui); line-height: 1.3; overflow: hidden; } .skc-l { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.3; } .skc-l b { color: var(--ink); font-variant-numeric: tabular-nums; } .skc-l .ok { color: var(--ok); } .skc-spec { display: flex; gap: 6px; margin-top: 2px; } .skc-spec i { display: grid; place-items: center; width: 24px; height: 22px; font: 700 11px/1 var(--font-ui); font-style: normal; color: var(--ink-3); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--well-2); } .skc-spec i.on { color: var(--on-accent); background: linear-gradient(180deg, var(--accent-2), var(--accent)); } :root[data-faction="elyos"] .skc-spec i:not(.on) { color: var(--ink-2); } :root[data-faction="elyos"] .skc .plus.best { background: linear-gradient(180deg, #4FD1C9, var(--teal)); color: #fff; box-shadow: 0 4px 14px -2px rgba(26, 127, 160, .5); } .skc.maxed .plus { display: none; } .skc.off .lring img { filter: grayscale(1) brightness(.5); } /* гнёзда стигм — восьмиугольники */ .socks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .c12 .socks { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sock .chip { white-space: normal; height: auto; min-height: 26px; padding: 4px 10px; text-align: center; line-height: 1.25; } .sock { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 8px 14px; border-radius: var(--r-m); background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); text-align: center; cursor: help; } .sock .oct { position: relative; width: 84px; height: 84px; display: grid; place-items: center; } .sock .oct::before { content: ''; position: absolute; inset: 0; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: var(--edge-2); } .sock .oct::after { content: ''; position: absolute; inset: 2px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: var(--bg1); } .sock.on .oct::before { background: linear-gradient(160deg, var(--accent-hi), var(--accent)); } .sock.open .oct::before { background: linear-gradient(160deg, var(--done), color-mix(in srgb, var(--done) 30%, transparent)); } :root[data-faction="elyos"] .sock.open .oct::before { background: linear-gradient(160deg, #4FD1C9, color-mix(in srgb, var(--teal) 30%, transparent)); } :root[data-faction="elyos"] .sock .chip.done { color: var(--accent-hi); background: var(--accent-soft); } :root[data-faction="elyos"] .sock .oct::after { background: #E9ECFA; } /* пороги стигмы — значками под гнездом */ .pips { display: flex; gap: 4px; } .pips i { min-width: 22px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 6px; font: 700 10px/1 var(--font-ui); font-style: normal; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--edge-2); cursor: help; } .pips i.on { color: var(--on-accent); background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: none; } .pips i { font-size: 11px; } :root[data-faction="elyos"] .pips i.on { background: #3F63E6; } .sock .oct img { position: relative; z-index: 1; width: 58px; height: 58px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); } .sock.open .oct img { opacity: .4; filter: grayscale(.4); } .sock.locked .oct img { opacity: .25; filter: grayscale(1); } .sock .oct .i-lock { position: relative; z-index: 1; width: 22px; height: 22px; color: var(--ink-3); } .sock .lvl { position: absolute; z-index: 2; bottom: -4px; right: -2px; padding: 2px 7px; border-radius: 999px; font: 700 var(--fs-xs) var(--font-ui); color: var(--ink); background: var(--glass-pop); box-shadow: 0 0 0 1px var(--edge-2); } .sock-n { font-weight: 600; font-size: var(--fs-sm); line-height: 1.25; } .sock-l { font-size: var(--fs-xs); color: var(--ink-3); } /* уровни умений: полосы «сейчас → цель» */ .lvlbars { display: grid; gap: 4px; } .lb { display: grid; grid-template-columns: 28px minmax(110px, 180px) minmax(0, 1fr) 70px; gap: 12px; align-items: center; min-height: 44px; padding: 4px 8px; border-radius: 10px; } .lb:hover { background: var(--well); } .lb img { width: 28px; height: 28px; border-radius: 8px; } .lb-n { font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-v { text-align: right; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; } .lb-v b { color: var(--ink); } .lb-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 8px; } .lb-legend i { display: inline-block; width: 14px; height: 6px; border-radius: 3px; margin-right: 6px; vertical-align: middle; background: var(--chart-line); } .lb-legend i.t { width: 14px; height: 6px; background: repeating-linear-gradient(45deg, var(--accent-hi) 0 2px, transparent 2px 4px); } :root[data-faction="elyos"] .lb-legend i.t { background: repeating-linear-gradient(45deg, var(--teal) 0 2px, transparent 2px 4px); } .lb-ok { margin-top: 10px; } .lb-ok > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; color: var(--ink-2); font-size: var(--fs-sm); } .lb-ok .okm { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ok); } .lb-ok .okm svg { width: 12px; height: 12px; } .lb-okl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .lb-okl .pill { cursor: help; } .lb-okl .pill img { width: 20px; height: 20px; border-radius: 6px; } /* План на 10 очков — горизонтальный степпер */ .stepper-wrap { overflow-x: auto; margin: 0 -6px 12px; padding: 6px 6px 4px; } .stepper { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(92px, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; } .stp { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0 4px; text-align: center; cursor: help; } .stp::before { content: ''; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--edge-2); z-index: 0; } .stp:first-child::before { display: none; } .stp-n { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font-ui); color: var(--ink-2); background: var(--bg1); box-shadow: inset 0 0 0 1.5px var(--edge-2); } .stp.cur .stp-n { color: #fff; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--accent-glow); } .stp-ic { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; margin-top: 4px; background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2); } .stp.cur .stp-ic { box-shadow: inset 0 0 0 2px var(--accent-hi), 0 0 18px -4px var(--accent-glow); } .stp-ic img { width: 100%; height: 100%; object-fit: cover; } .stp-g { font: 700 var(--fs-sm) var(--font-ui); color: var(--ok); font-variant-numeric: tabular-nums; } .stp small { font-size: 11px; line-height: 1.25; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .grid > .stretch { align-self: stretch; } .pas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .pas > div { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--well); cursor: help; min-height: 52px; } .pas-ic { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 25%, #A78BFA, #6D28D9); } .pas-ic svg { width: 20px; height: 20px; } .pas-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--well-2); } :root[data-faction="elyos"] .pas-ic { color: #3F63E6; background: linear-gradient(160deg, #fff, #E6EBFB); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9); } .lvl-card { align-self: start; } .pas b { font-weight: 600; font-size: var(--fs-sm); display: block; } .pas small { font-size: var(--fs-xs); color: var(--ink-3); } .pas .plus { margin-left: auto; padding: 3px 7px; border-radius: 999px; font: 700 var(--fs-xs)/1 var(--font-ui); color: var(--on-accent); background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); } .rules { display: grid; gap: 6px; font-size: var(--fs-ui); color: var(--ink-2); margin: 0; padding: 0; list-style: none; } .rules li { padding: 8px 12px; border-radius: 10px; background: var(--well); } .rules b { color: var(--ink); } /* ---------- Билды ---------- */ /* 9 готовых билдов — ровно три ряда по три, без «сироты» в последнем ряду */ .tplgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 1100px) { .tplgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tplcard.feature { grid-row: auto; } } @media (max-width: 560px) { .tplgrid { grid-template-columns: minmax(0, 1fr); } .tplcard.feature { grid-column: auto; } .tplcard.feature .tpl-cover { height: 180px; } .tplcard.feature .tdps b { font-size: 32px; } } .seg button small { font-weight: 500; color: var(--ink-3); margin-left: 2px; } /* Карточка — стекло; обложка 140 px перетекает в тело (маска снизу), палитра артов сведена к теме стороны */ .tplcard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)); backdrop-filter: blur(var(--blur)) saturate(var(--sat)); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c), var(--shadow); } /* Обложка — натуральные цвета арта (Рудра, Храм огня, пещеры различимы), затемнение снизу; фиолетовый — лёгким тоном */ .tpl-cover { position: relative; height: 140px; margin-bottom: -24px; overflow: hidden; background: #140E26; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); } .tpl-cover.short { height: 96px; } .tpl-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.8); transition: transform 1.2s var(--ease-out); } .tpl-cover::before { content: ''; position: absolute; inset: 0; z-index: 1; background: #7C3AED; mix-blend-mode: color; opacity: .2; pointer-events: none; } .tpl-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(11, 8, 20, .92)); pointer-events: none; } .tplcard:hover .tpl-cover img { transform: scale(1.06); } :root[data-faction="elyos"] .tpl-cover { background: #DCE2F8; } :root[data-faction="elyos"] .tpl-cover img { filter: brightness(1.12) saturate(.85); } :root[data-faction="elyos"] .tpl-cover::before { background: linear-gradient(180deg, rgba(199, 194, 255, .30), rgba(168, 216, 255, .18)); mix-blend-mode: screen; opacity: 1; } :root[data-faction="elyos"] .tpl-cover::after { background: linear-gradient(180deg, transparent 40%, rgba(246, 247, 252, .75) 75%, #F6F7FC); } /* карточка-кнопка: вся нажимается; «Взять за основу» у обычных — только при наведении и фокусе (9 одинаковых кнопок шумели) */ .tplcard[role="button"] { cursor: pointer; transition: transform .45s var(--spring-soft), box-shadow .25s; } .tplcard[role="button"]:hover { box-shadow: inset 0 0 0 1px var(--edge-2), inset 0 1px 0 var(--spec-c), var(--shadow), 0 0 40px -16px var(--accent-glow); } .tplcard[role="button"]:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; } @media (hover: hover) { .tpl-take { opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .3s var(--spring-soft); } .tplcard:is(:hover, :focus-within) .tpl-take { opacity: 1; transform: none; } } .tpl-where { margin: -4px 0 0; font-size: var(--fs-sm); color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* билд под текущую стадию — 2×1: обложка крупно, число 40 px, залитая кнопка */ .tplcard.feature { grid-column: span 2; } .tplcard.feature .tpl-cover { height: 190px; } .tplcard.feature h3 { font: 600 22px/1.2 var(--font-ui); min-height: 0; } .tplcard.feature .tdps b { font-size: 40px; } @media (max-width: 560px) { .tplcard.feature { grid-column: auto; } .tplcard.feature .tpl-cover { height: 170px; } .tplcard.feature .tdps b { font-size: 32px; } } .tpl-now { position: absolute; right: 14px; top: 12px; z-index: 2; } .tplcard .tpl-cover .chips { z-index: 2; } .tpl-cover .chips { position: absolute; left: 14px; top: 12px; z-index: 1; } .tpl-cover .chip { background: rgba(10, 6, 22, .6); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } :root[data-faction="elyos"] .tpl-cover .chip { background: rgba(255, 255, 255, .72); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); } .tpl-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 0 18px 18px; } .tplcard h3 { font-size: 17px; line-height: 1.3; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tplcard.mine h3 { min-height: 0; } /* строка урона одной высоты у всех карточек: число — первой строкой, подпись — второй (до двух строк) */ .tdps { display: grid; align-content: start; gap: 2px; min-height: 64px; } .tdps b { font: var(--fw-num) 26px/1.1 var(--font-num); letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; color: var(--accent-hi); } .tdps span { font-size: var(--fs-sm); line-height: 1.35; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tdps.none b { color: var(--ink-3); } .tdps.none span { color: var(--ink-3); font-style: normal; } .tpl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; } .iconbtn.sm { width: 40px; height: 40px; } .iconbtn.sm svg { width: 18px; height: 18px; transition: transform .3s var(--spring-soft); } .iconbtn[aria-expanded="true"] svg { transform: rotate(180deg); } .tpl-more { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-m); background: var(--well); } .tpl-more p { margin: 0; } .tplcard.mine { cursor: pointer; } /* плитка «+ Новый билд» — пунктирное стекло размером с карточку */ .tplcard.add { display: grid; place-content: center; justify-items: center; gap: 8px; min-height: 220px; border: 0; cursor: pointer; text-align: center; color: var(--ink); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; outline: 1.5px dashed var(--edge-2); outline-offset: -1.5px; transition: background .2s, outline-color .2s; } .tplcard.add:hover { background: var(--well); outline-color: var(--accent-hi); } .tplcard.add b { font-size: var(--fs-body); } .tplcard.add small { font-size: var(--fs-xs); color: var(--ink-3); } .stiglist { display: grid; gap: 8px; min-width: 0; } .sgrow { display: flex; gap: 8px; } .sg { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: help; } .sg::before { content: ''; position: absolute; inset: 0; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: linear-gradient(160deg, var(--accent-hi), color-mix(in srgb, var(--accent) 40%, transparent)); } .sg::after { content: ''; position: absolute; inset: 1.5px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: var(--bg1); } :root[data-faction="elyos"] .sg::after { background: #1A1F4D; } .sg img { position: relative; z-index: 1; width: 36px; height: 36px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); } .nowsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .nowsteps > div { display: flex; gap: 10px; align-items: center; min-width: 0; padding: 10px; border-radius: var(--r-m); background: var(--well); font-size: var(--fs-sm); color: var(--ink-2); } .nowsteps > div.on { box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); } .nowsteps img, .nowsteps i { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--well-2); } .nowsteps > div:not(.on) img { filter: grayscale(.7) brightness(.8); } .nowsteps span { display: grid; min-width: 0; line-height: 1.25; } .nowsteps b { font-size: var(--fs-xs); color: var(--accent-hi); font-weight: 700; } .lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .line { display: grid; gap: 8px; padding: 10px; border-radius: var(--r-m); background: var(--well); } .line .k { font: 700 var(--fs-sm) var(--font-ui); color: var(--accent-hi); } .bslots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin: 4px 0 18px; } .bslot { display: grid; gap: 6px; justify-items: center; } .bslot .cells { display: grid; gap: 4px; width: 100%; max-width: 50px; } .bslot .cells img, .bslot .cells i { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: var(--well-2); } .bslot .cells i { opacity: .5; } .bslot b { font: 700 var(--fs-xs) var(--font-ui); color: var(--accent-hi); } /* ---------- Калькулятор ---------- */ /* Форма — стеклянные шаги; справа — результат, он прилипает и всегда на виду, пока правите поля. */ .grid.calc { align-items: start; } /* форма и результат — своей сеткой: липкость результата кончается до широкой карточки «Что даёт больше урона» (раньше результат заезжал под её стекло и превращался в мутную плиту) */ .calc-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; margin-bottom: var(--gap); } .calc-form { min-width: 0; } .calc-side { position: sticky; top: 88px; min-width: 0; } @media (min-width: 1280px) { .calc-form .calc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* цель: частые — сегментом, остальные — в «Ещё» */ .tgt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tgt-more select { height: 40px; border-radius: 999px; padding-left: 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); } .tgt-more.on select { color: var(--on-accent); background-color: var(--accent); box-shadow: 0 6px 16px -8px var(--accent-glow); } .note.info { display: flex; gap: 10px; align-items: flex-start; background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); color: var(--ink-2); } .note.info svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent-hi); } :root[data-faction="elyos"] .note { background: rgba(79, 123, 255, .08); box-shadow: inset 0 0 0 1px rgba(79, 123, 255, .22); color: #2A3070; } :root[data-faction="elyos"] .note b { color: #2A3070; } /* «Что даёт больше урона» до расчёта — пустое состояние с действием */ .w-empty { display: grid; justify-items: center; gap: 12px; padding: 18px 12px 8px; text-align: center; } .w-empty .ec-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 25%, #A78BFA, #6D28D9); box-shadow: 0 8px 20px -8px var(--accent-glow); } .w-empty .ec-ic svg { width: 22px; height: 22px; } .w-empty p { margin: 0; max-width: 52ch; color: var(--ink-2); font-size: var(--fs-ui); } :root[data-faction="elyos"] .w-empty .ec-ic { background: linear-gradient(160deg, #4F7BFF, #5B5BD6); } /* после расчёта полосы растут по очереди: 600 мс, шаг 60 мс */ .wgrow .grow-x { animation-duration: .6s; animation-delay: var(--d, 0ms); } .calc-fold > summary.calc-sum { display: none; } .calc-fold { display: grid; gap: var(--gap); } .calc-fold[open] { display: grid; } .step-card + .step-card { margin-top: var(--gap); } .step-card .card-h h2 { gap: 12px; } .stepno { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--font-ui); color: #fff; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 4px 12px -4px var(--accent-glow); } .fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stage-ru { margin: 8px 0 14px; } .chipset { display: flex; flex-wrap: wrap; gap: 6px; } .chipset button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font: 600 var(--fs-sm) var(--font-ui); color: var(--ink-2); background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); transition: background .2s, color .2s, box-shadow .2s; } .chipset button:hover { color: var(--ink); background: var(--well-2); } .chipset button[aria-checked="true"] { color: var(--on-accent); background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 6px 16px -8px var(--accent-glow); } .field.dur { margin-top: 14px; max-width: 240px; } /* поле с единицей и стрелками ± */ .stepper-in { display: flex; align-items: center; height: 44px; border-radius: 12px; background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2); overflow: hidden; } :root[data-faction="elyos"] .stepper-in { background: rgba(255, 255, 255, .7); } .stepper-in:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); } .stepper-in input { flex: 1; min-width: 0; height: 100%; padding: 0 4px; text-align: center; border-radius: 0; background: transparent !important; box-shadow: none !important; font: 600 var(--fs-body) var(--font-ui); font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .stepper-in input::-webkit-outer-spin-button, .stepper-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .stepper-in .unit { font-style: normal; font-size: var(--fs-sm); color: var(--ink-3); padding-right: 4px; } .st-b { flex: none; width: 34px; height: 100%; display: grid; place-items: center; border: 0; background: none; color: var(--ink-3); cursor: pointer; transition: color .2s, background .2s; } .st-b:hover { color: var(--ink); background: var(--well-2); } .st-b svg { width: 16px; height: 16px; } .num-field > label { font-size: var(--fs-xs); color: var(--ink-2); min-height: 2.5em; display: flex; align-items: flex-end; line-height: 1.2; } .field.dur > label { min-height: 0; font-size: var(--fs-sm); } .calc-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; margin-top: 10px; } .calc-stats .field.changed .stepper-in { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); } .calc-stats .field small { color: var(--accent-hi); font-size: var(--fs-xs); } .subhead { font-size: var(--fs-xs); color: var(--ink-3); margin: 14px 0 6px; } details.fold { margin-top: 14px; } details.fold > summary.btn { display: inline-flex; color: var(--ink-2); } details.fold > summary svg { width: 16px; height: 16px; } /* панель билда одной строкой ЛКМ…0 */ .lrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; } .lslot { position: relative; display: grid; justify-items: center; gap: 4px; } .lslot img, .lslot.empty::before { width: 100%; max-width: 44px; aspect-ratio: 1; border-radius: 10px; } .lslot img { object-fit: cover; box-shadow: 0 0 0 1px var(--edge-2); } .lslot.empty::before { content: ''; display: block; opacity: .35; box-shadow: inset 0 0 0 1.5px var(--ink-3); background: repeating-linear-gradient(45deg, transparent 0 4px, var(--well-2) 4px 6px); } .lslot i { position: absolute; top: -4px; right: -2px; padding: 0 4px; border-radius: 6px; font: 700 10px/16px var(--font-ui); font-style: normal; color: #fff; background: var(--accent); } .lslot b { font: 700 10px var(--font-ui); color: var(--ink-3); } /* результат: одно крупное число, плашки, разбивка; при пересчёте — полоса 2 px по верхней кромке */ .calc-res { overflow: hidden; } .calc-res .prog { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; background: linear-gradient(90deg, transparent, var(--accent-hi), transparent) 0 0 / 40% 100% no-repeat; transition: opacity .2s; } .calc-res.busy .prog { opacity: 1; animation: loadbar 1s linear infinite; } .calc-res .card-h .meta { gap: 6px; } .resbig { display: grid; gap: 4px; margin: 4px 0 16px; } .resbig .big { font: var(--fw-num) clamp(44px, 3.8vw, 56px)/1 var(--font-num); letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; color: var(--ink); } .calc-res.busy .big { opacity: .55; transition: opacity .2s; } .resbig .muted { font-size: var(--fs-sm); } .respills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; } .respills span { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--well); } .respills small { font-size: var(--fs-xs); color: var(--ink-3); } .respills b { font-size: var(--fs-body); } .sk-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; } .sk-pills .skel { min-height: 50px; border-radius: 12px; } .sk-bars { display: grid; gap: 10px; } .sk-bars .skel { min-height: 32px; width: var(--w); border-radius: 10px; } .calc-res { min-height: 520px; } .brk { display: grid; gap: 4px; } .brk-row { display: grid; grid-template-columns: 32px minmax(120px, 200px) minmax(0, 1fr) 84px 72px; gap: 12px; align-items: center; min-height: 42px; padding: 4px 8px; border-radius: 10px; } .brk-row:hover { background: var(--well); } .brk-row img { width: 32px; height: 32px; border-radius: 9px; } .brk-row .n { font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brk-row .v { text-align: right; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; } .brk-row .v b { color: var(--ink); } .brk-row .v small { display: block; font-size: var(--fs-xs); color: var(--ink-3); } .brk-row.best .hb-fill { fill: var(--accent-hi); } /* компактная разбивка в колонке результата: иконка | имя над полосой | значение */ .brk.compact .brk-row { grid-template-columns: 30px minmax(0, 1fr) 76px; gap: 10px; } .brk.compact .brk-row .n { display: grid; gap: 4px; min-width: 0; white-space: normal; } .brk-row .n .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brk.compact .brk-row .n .hbar { width: 100%; } .brk-head { display: grid; grid-template-columns: 32px minmax(120px, 200px) minmax(0, 1fr) 84px 72px; gap: 12px; padding: 0 8px 4px; font-size: var(--fs-xs); color: var(--ink-3); } .brk-head span:nth-last-child(-n+2) { text-align: right; } .wrow.best .hb-fill { fill: var(--accent-hi); } /* «Что даёт больше урона»: до расчёта — подписанный каркас и кнопка внутри */ .w-skel { display: grid; gap: 10px; } .wsk { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: center; font-size: var(--fs-sm); color: var(--ink-3); } .wsk .skel { min-height: 14px; width: var(--w); border-radius: 7px; } .w-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .w-cta .faint { flex: 1; min-width: 220px; } /* ---------- Подземелья ---------- */ .dgroup { margin-bottom: 26px; } .dgroup > .card-h { margin-bottom: 12px; } .dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .dgrid.one { grid-template-columns: minmax(0, 1fr); } .db-view .dgrid, .dbgrid ~ .dgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } /* ежедневное подземелье и PvP — в одном ряду */ .dpair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; } .dpair .dgrid:not(.one) { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Бенто «Доступно сейчас»: 4 колонки, главная экспедиция 2×2, подземелье дня 2×1, закрытые — одной карточкой */ .dbento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 14px; margin-bottom: 8px; } .dbento .dcard { min-height: 0; } .dbento .dcard.feature { grid-column: span 2; grid-row: span 2; } .dbento .dcard.wide { grid-column: span 2; } /* карточка: арт в натуральных цветах, затемнение снизу; наведение — фиолетовая кромка и свечение */ .dcard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; border-radius: var(--r-l); cursor: pointer; background: #140E26; box-shadow: inset 0 0 0 1px var(--edge), var(--shadow); color: #fff; transition: box-shadow .25s; } .dcard .cover { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #140E26; } .dcard .cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.85); transition: transform 1.4s var(--ease-out), filter .3s; } .dcard:hover .cover img, .dcard:focus-visible .cover img { transform: scale(1.06); } .dcard .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(8, 5, 18, .9)); } .dcard.open:hover, .dcard.open:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent-hi), 0 0 40px -10px var(--accent-glow), var(--shadow); outline: none; } .dcard .dfoot-glass { position: relative; padding: 14px 16px; display: grid; gap: 4px; } .dcard .dcap { display: flex; align-items: center; gap: 10px; min-width: 0; } .dcard .dname { flex: 1; min-width: 0; font: 500 16px/1.25 var(--font-display); letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dcard.feature .dname { font-size: 26px; font-weight: 600; } .dcard .dsub, .dcard .dfoot { font-size: var(--fs-xs); color: rgba(236, 230, 250, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dcard .dfoot { color: #E9DFFF; font-weight: 600; } .dcard.feature .dsub, .dcard.feature .dfoot { font-size: var(--fs-sm); } /* закрытые — серые и тёмные, замок 28 px по центру и уровень открытия под ним */ .dcard.locked { cursor: default; } .dcard.locked .cover img { filter: grayscale(.7) brightness(.5); } .dcard.locked .dname { color: rgba(236, 230, 250, .75); } .lockc2 { position: absolute; inset: 0 0 auto; top: 26%; z-index: 1; display: grid; justify-items: center; gap: 4px; pointer-events: none; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); } .lockc2 .i-lock { width: 28px; height: 28px; opacity: .9; } .lockc2 b { font: 600 var(--fs-ui) var(--font-ui); } .lockc2 small { font-size: var(--fs-xs); opacity: .8; } /* «+ Забег» — круглая кнопка 36 px в углу (вся карточка открывает запись) */ .dcard .dadd { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; pointer-events: none; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px -4px var(--accent-glow); } .dcard .dadd svg { width: 18px; height: 18px; } .dcard .dring { --size: 40px; --th: 4px; flex: none; color: #fff; } .dcard .dring .lr-c b { font: var(--fw-num) 11px/1 var(--font-num); } /* карточка «ещё N закрытых»: миниатюры веером, подпись */ .dfold { position: relative; display: grid; align-content: end; justify-items: start; gap: 4px; padding: 16px 18px; border: 0; border-radius: var(--r-l); cursor: pointer; text-align: left; color: var(--ink); background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); overflow: hidden; } .dfold:hover { box-shadow: inset 0 0 0 1px var(--edge-2), inset 0 1px 0 var(--spec-c), 0 0 30px -12px var(--accent-glow); } .dfold-th { position: absolute; left: 18px; top: 18px; display: flex; } .dfold-th span { width: 54px; height: 54px; margin-right: -14px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px var(--bg1); } .dfold-th img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.8) brightness(.6); } .dfold b { font: 600 var(--fs-body) var(--font-ui); } .dfold small { font-size: var(--fs-sm); color: var(--ink-3); } .dlocked { margin-bottom: 20px; } /* элийцы (реф. 6): подпись — светлое стекло поверх арта (не больше 46 % карточки), закрытые — светлые серые, замок — тёмный */ :root[data-faction="elyos"] .dcard .cover { background: #C9CFF5; } :root[data-faction="elyos"] .dcard { background: #C9CFF5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), var(--shadow); } :root[data-faction="elyos"] .dcard .cover img { filter: brightness(1.1) saturate(.9); } :root[data-faction="elyos"] .dcard .cover::after { background: linear-gradient(180deg, transparent 60%, rgba(27, 30, 58, .18)); } :root[data-faction="elyos"] .dcard .dfoot-glass { margin: 8px; max-height: 46%; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); } :root[data-faction="elyos"] .dcard.feature .dfoot-glass { max-height: none; } :root[data-faction="elyos"] .dcard .dname { text-shadow: none; color: var(--ink); font-size: 15px; } :root[data-faction="elyos"] .dcard.feature .dname { font-size: 22px; } :root[data-faction="elyos"] .dcard .dsub, :root[data-faction="elyos"] .dcard .dfoot { color: var(--ink-2); } :root[data-faction="elyos"] .dcard.locked .cover img { filter: grayscale(1) brightness(1.25) contrast(.85); } :root[data-faction="elyos"] .dcard.locked .cover::after { background: rgba(238, 241, 250, .35); } :root[data-faction="elyos"] .lockc2 { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .8); } :root[data-faction="elyos"] .dcard .dring { color: var(--ink); } :root[data-faction="elyos"] .dfold-th span { box-shadow: 0 0 0 2px #fff; } :root[data-faction="elyos"] .dfold-th img { filter: grayscale(1) brightness(1.2) contrast(.85); } details.dfar { margin: 6px 0 22px; } details.dfar > summary.btn { list-style: none; display: inline-flex; } details.dfar > summary svg { width: 16px; height: 16px; } details.dfar[open] > summary { margin-bottom: 18px; } .rlist { display: grid; gap: 6px; } .rrow { display: grid; grid-template-columns: 52px 90px minmax(0, 1fr) auto 76px 40px; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 12px; background: var(--well); font-size: var(--fs-ui); } .rthumb { width: 52px; height: 36px; overflow: hidden; border-radius: 8px; background: var(--well-2); } .rthumb img { width: 100%; height: 100%; object-fit: cover; } .rname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .run-meta { display: none; } .db-detail { max-width: 760px; overflow: hidden; } .db-detail .th { display: flex; gap: 16px; align-items: center; padding: 22px; border-bottom: 1px solid var(--edge); } .db-detail .frame { position: relative; flex: none; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 16px; background: var(--well); } .db-detail .frame img { width: 100%; height: 100%; object-fit: contain; } .db-detail .tn { font: 700 22px/1.2 var(--font-ui); } .db-detail .ts { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 4px; } .db-detail .tb { display: grid; gap: 16px; padding: 22px; } .db-detail .desc { white-space: pre-line; color: var(--ink-2); margin: 0; } .db-detail .tb .btn { justify-self: start; } /* ---------- База ---------- */ .dbsearch { position: relative; display: flex; align-items: center; margin-bottom: 10px; } .dbsearch svg { position: absolute; z-index: 1; left: 20px; width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; } .dbsearch input { width: 100%; height: 56px; padding-left: 52px; border-radius: 999px; font-size: 17px; background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c), var(--shadow); } :root[data-faction="elyos"] .dbsearch input { background: rgba(255, 255, 255, .72); } .db-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px 14px; min-height: 30px; } .db-ex .chip { cursor: pointer; border: 0; } .db-ex .chip:hover { color: var(--ink); background: var(--accent-soft); } .db-filters { display: grid; gap: 12px; margin-bottom: 18px; } .db-filters > .seg { justify-self: start; } .catrow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding-right: 40px; } .catrow::-webkit-scrollbar { display: none; } .catrow button { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; font: 600 var(--fs-sm) var(--font-ui); color: var(--ink-2); background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); scroll-snap-align: start; white-space: nowrap; } .catrow button:hover { color: var(--ink); background: var(--well-2); } .catrow button.on { color: var(--on-accent); background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 8px 20px -8px var(--accent-glow); } .catrow button span { margin-left: 6px; font-weight: 500; color: var(--ink-3); } .catrow button.on span { color: rgba(255, 255, 255, .85); } /* элийцы (реф. 6): активная «таблетка» — оранжевый → розовый → фиолетовый, середина затемнена до #D24C8C для белого текста */ :root[data-faction="elyos"] .catrow button.on { background: linear-gradient(90deg, #C2531F, #B8326F 50%, #5B3FD0); box-shadow: 0 8px 22px -8px rgba(210, 76, 140, .55); } .dbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; } .dbgrid > .empty-state { grid-column: 1 / -1; } .dbcard { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 92px; padding: 14px; border-radius: var(--r-m); cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 96px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge); transition: background .2s, transform .45s var(--spring); } :root[data-faction="elyos"] .dbcard { background: rgba(255, 255, 255, .72); } .dbcard:hover, .dbcard:focus-visible { background: var(--glass-2); transform: translateY(-2px); } .dbcard .itemcell .frame { width: 56px; height: 56px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gc) 70%, transparent), 0 0 12px -6px var(--gc); } /* плотное стекло списка: фоновый арт не просвечивает сквозь строки описаний */ :root:not([data-faction="elyos"]) .dbcard { background: rgba(20, 14, 36, .6); } .dbcard .t { font-weight: 600; } /* термин клиента ([Срочного уклонения]) — цветом, без скобок */ .term { color: var(--accent-hi); font-weight: 600; } :root[data-faction="elyos"] .term { color: #3F63E6; } /* в «Базе» свой крупный поиск — второй (в верхней строке) не показываем; Ctrl+K работает как прежде */ :root[data-view="db"] .topbar .search { visibility: hidden; pointer-events: none; } .kbd-hint { white-space: nowrap; color: var(--ink-3); } @media (hover: none) { .kbd-hint { display: none; } } .dbcard .t:not([class*="g-"]) { color: var(--ink); } .dbcard .s { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dbcard .chip { margin-left: 4px; height: 22px; } .spec { padding: 6px 0 6px 12px; margin: 4px 0; font-size: var(--fs-ui); box-shadow: inset 2px 0 0 var(--accent); } .spec b { color: var(--accent-hi); font-weight: 700; } /* ---------- Руководство ---------- */ /* Три колонки на широком экране: главы | статья (до 68 знаков в строке) | оглавление главы, липкое. */ /* Две колонки: статья (над ней — кнопка «Главы · 3/13» с выпадающим списком) | оглавление главы на стекле, липкое */ .guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; max-width: 1100px; } .guide.has-toc { grid-template-columns: minmax(0, 1fr) 230px; } .g-main { min-width: 0; display: grid; gap: 14px; } .gnav-m { position: relative; z-index: 5; border-radius: var(--r-l); background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)); backdrop-filter: blur(var(--blur)) saturate(var(--sat)); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c); } .gnav-m > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 60px; padding: 10px 18px; cursor: pointer; border-radius: inherit; } .gnav-m > summary:hover { background: var(--well); } .gnav-m > summary::-webkit-details-marker { display: none; } .gnav-m > summary b { grid-column: 1; font-size: var(--fs-body); } .gnav-m > summary svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; } .gnav-ml { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 8px; max-height: min(60vh, 520px); overflow: auto; padding: 4px 10px 12px; } .gtoc.card { padding: 16px; } .guide .gread .lring { --size: 48px; --th: 5px; } /* тонкие полосы прокрутки в списках (а не серые системные) */ .gnav-ml, .pal-list, .gtoc { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 40%, transparent) transparent; } .gnav-ml::-webkit-scrollbar, .pal-list::-webkit-scrollbar, .gtoc::-webkit-scrollbar { width: 6px; } .gnav-ml::-webkit-scrollbar-thumb, .pal-list::-webkit-scrollbar-thumb, .gtoc::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 3px; } .gnav { position: sticky; top: 84px; display: grid; gap: 2px; max-height: calc(100vh - 110px); overflow: auto; padding: 10px; scrollbar-width: thin; } .gnav button, .gnav-ml button { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; align-items: center; text-align: left; background: none; border: 0; min-height: 44px; padding: 8px 10px; border-radius: 12px; color: var(--ink-2); cursor: pointer; font-size: var(--fs-ui); line-height: 1.3; } .gnav button:hover, .gnav-ml button:hover { color: var(--ink); background: var(--well); } /* активная глава — та же залитая «таблетка», что в главном меню */ .gnav button.on, .gnav-ml button.on { color: #fff; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 8px 24px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .22); } .gn { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--font-ui); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--edge-2); } .gn.ok { color: #fff; background: var(--ok); box-shadow: none; } .gn svg { width: 12px; height: 12px; } button.on .gn { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); } .gnav .chip, .gnav-ml .chip { grid-column: 2; justify-self: start; margin-top: 4px; height: 22px; } button.on .chip { color: #fff; background: rgba(255, 255, 255, .2); } :root[data-faction="elyos"] button.on .chip { color: #3F63E6; background: rgba(255, 255, 255, .92); } .doc > .readbar.readbar { max-width: none; } .gread { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 10px 4px; border-top: 1px solid var(--edge); font-size: var(--fs-sm); color: var(--ink-2); } .gread .lring { --size: 40px; --th: 4px; } .gread .lr-c b { font: 700 12px var(--font-ui); } .gtoc { position: sticky; top: 84px; display: grid; gap: 2px; max-height: calc(100vh - 110px); overflow: auto; font-size: var(--fs-sm); } .gtoc b { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; margin: 0 0 8px 10px; } .gtoc a { display: block; padding: 6px 10px; border-radius: 0 8px 8px 0; color: var(--ink-2); text-decoration: none; line-height: 1.35; box-shadow: inset 2px 0 0 var(--edge); transition: color .2s, background .2s, box-shadow .2s; } .gtoc a:hover { color: var(--ink); background: var(--well); } /* текущий раздел (по прокрутке) — яркий текст и акцентная черта слева */ .gtoc a.on { color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); background: var(--well); } :root[data-faction="elyos"] .gtoc a.on { color: #3F63E6; box-shadow: inset 2px 0 0 #4F7BFF; } .doc { min-width: 0; padding: 34px 36px; overflow-wrap: break-word; font-size: 16px; line-height: 1.7; } .doc > :not(.table-wrap):not(pre) { max-width: 68ch; } .doc { position: relative; } .doc h1 { font: 500 28px/1.12 var(--font-display); letter-spacing: -.02em; margin-bottom: 16px; text-wrap: balance; } .doc h2 { margin: 36px 0 10px; font-size: 21px; scroll-margin-top: 90px; text-wrap: balance; } .doc h3 { margin: 24px 0 8px; font-size: 17px; scroll-margin-top: 90px; } .doc p, .doc li { color: var(--ink-2); } .doc strong { color: var(--ink); } /* вводный абзац — крупнее и не жирный; выделенная фраза — акцентом, а не весом */ .doc > h1 + p, .doc > h1 + blockquote, .doc .lead-p { font-size: 18px; line-height: 1.55; color: var(--ink); font-weight: 400; } .doc .lead-p .key { font-style: normal; font-weight: 500; color: var(--accent-hi); } .doc > h1 + p strong, .doc > h1 + blockquote strong { font-weight: 500; color: var(--accent-hi); } .doc > h1 + blockquote { background: transparent; box-shadow: inset 3px 0 0 var(--accent); padding: 4px 0 4px 18px; } .doc > h1 + blockquote p { color: var(--ink); } .doc .table-wrap { margin: 16px 0; } .doc table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-ui); line-height: 1.5; border-radius: 12px; box-shadow: 0 0 0 1px var(--edge-2); } .doc th, .doc td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--edge); } .doc tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); } :root[data-faction="elyos"] .doc tbody tr:nth-child(even) td { background: rgba(91, 96, 160, .05); } /* липкая шапка таблицы — плотное стекло: строки не проезжают под ней насквозь */ .doc th { position: sticky; top: 72px; z-index: 2; background: rgba(18, 12, 32, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--edge-2); font-weight: 600; color: var(--ink); } :root[data-faction="elyos"] .doc th { background: rgba(246, 247, 252, .96); } .doc th:first-child { border-radius: 12px 0 0 0; } .doc th:last-child { border-radius: 0 12px 0 0; } .doc code { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--well-2); padding: 1px 6px; border-radius: 6px; } .doc pre { background: var(--well-2); padding: 14px; overflow-x: auto; border-radius: 12px; } .doc pre code { background: none; padding: 0; } .doc blockquote { margin: 16px 0; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 3px 0 0 var(--accent); } .doc hr { border: 0; border-top: 1px solid var(--edge-2); margin: 28px 0; } .doc sup.src { font-size: var(--fs-xs); color: var(--ink-3); } /* полоса прогресса чтения — 3 px по верхней кромке карточки статьи, при прокрутке прилипает под верхнюю строку */ .readbar { position: sticky; top: 72px; z-index: 3; display: block; height: 3px; margin: -34px -36px 31px; border-radius: 3px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #8B5CF6, #A855F7); box-shadow: 0 0 12px var(--accent-glow); pointer-events: none; } :root[data-faction="elyos"] .readbar { background: linear-gradient(90deg, #3CC8C0, #5B5BD6); } @supports (animation-timeline: scroll()) { .readbar { animation: readp linear both; animation-timeline: scroll(root); } @keyframes readp { to { transform: scaleX(1); } } } /* «Наверх» в длинной главе */ .totop { position: fixed; right: 24px; bottom: 24px; z-index: 35; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink); background: var(--glass-pop); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 0 0 1px var(--edge-2), var(--shadow-pop); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .25s, transform .45s var(--spring); } .totop.show { opacity: 1; transform: none; pointer-events: auto; } .totop svg { width: 22px; height: 22px; } /* ---------- Настройки ---------- */ .set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 4px; border-bottom: 1px solid var(--edge); } :root[data-faction="elyos"] .set-row { border-bottom-color: var(--edge-2); } .set-row > span { display: grid; min-width: 0; } .set-row small { font-size: var(--fs-xs); color: var(--ink-3); } .set-row input[type=time], .set-row input[type=number], .set-row select { width: 150px; } /* Выбор стороны — карточки-превью: мини-арт и два слоя стекла, у «Авто» — разлом пополам; выбранная — с кольцом */ .theme-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .tcard { position: relative; display: grid; gap: 10px; padding: 10px 10px 14px; border: 2px solid transparent; border-radius: 20px; cursor: pointer; text-align: left; color: var(--ink); background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); transition: transform .45s var(--spring), box-shadow .25s, background .2s; } .tcard:hover { transform: translateY(-3px); background: var(--well-2); } .tcard[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--accent-hi), 0 0 40px -14px var(--accent-glow); } :root[data-faction="elyos"] .tcard[aria-checked="true"] { box-shadow: 0 0 0 2px transparent, 0 18px 40px -18px rgba(60, 70, 160, .5); background: linear-gradient(var(--glass-2), var(--glass-2)) padding-box, conic-gradient(from 200deg, #C7C2FF, #A8D8FF, #F5C6E8, #fff, #C7C2FF) border-box; border: 2px solid transparent; } .tc-prev { position: relative; height: 120px; border-radius: 14px; overflow: hidden; } .tp { position: absolute; inset: 0; } .tp.a { background: radial-gradient(70% 90% at 80% 30%, rgba(139, 92, 246, .55), transparent 70%), url('/img/art/w/daeva_asmodian_wings-800.webp') 70% 20% / cover, #0B0814; background-blend-mode: normal, luminosity, normal; } .tp.a::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 8, 20, .85), rgba(11, 8, 20, .35)); } .tp.e { background: radial-gradient(60% 80% at 20% 20%, rgba(199, 194, 255, .95), transparent 70%), radial-gradient(50% 70% at 90% 90%, rgba(168, 216, 255, .9), transparent 70%), #EEF1FA; } .tp i { position: absolute; display: block; border-radius: 8px; } .tp .p1 { left: 10%; top: 18%; width: 46%; height: 34%; } .tp .p2 { left: 10%; top: 60%; width: 30%; height: 24%; } .tp .dot { right: 14%; top: 22%; width: 14px; height: 14px; border-radius: 50%; } .tp.a .p1, .tp.a .p2 { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .tp.a .dot { background: #8B5CF6; box-shadow: 0 0 14px #8B5CF6; } .tp.e .p1, .tp.e .p2 { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 6px 14px -6px rgba(80, 90, 160, .35); } .tp.e .dot { background: #4F7BFF; box-shadow: 0 0 12px rgba(79, 123, 255, .7); } .tcard.auto .tp.a { clip-path: polygon(52% 0, 100% 0, 100% 100%, 40% 100%); } .tcard.auto .tp.e { clip-path: polygon(0 0, 52% 0, 40% 100%, 0 100%); } .tcard.auto .tc-prev::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: 46%; width: 2px; transform: rotate(7deg); background: linear-gradient(180deg, transparent, #fff, transparent); box-shadow: 0 0 14px rgba(255, 255, 255, .8); } .tc-t { display: grid; gap: 2px; padding: 0 30px 0 4px; } .tc-t b { font-size: var(--fs-body); } .tc-t small { font-size: var(--fs-xs); color: var(--ink-3); } .tc-ring { position: absolute; right: 18px; bottom: 16px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-4); } .tcard[aria-checked="true"] .tc-ring { color: #fff; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 0 10px var(--accent-glow); } .tc-ring svg { width: 12px; height: 12px; } /* задачи на главной — две группы, строки 52 px в 2 колонки с разделителем; скрытые — приглушены и зачёркнуты */ .tgroup + .tgroup { margin-top: 22px; } .tg-h { display: flex; align-items: center; gap: 10px; padding: 0 4px 8px; } .tg-h b { font: 600 14px var(--font-ui); color: var(--ink-2); } .tg-all { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-3); cursor: pointer; } .tasklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } .trow { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; gap: 12px; align-items: center; min-height: 52px; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--edge); border-radius: 0; cursor: pointer; text-align: left; color: var(--ink); background: none; transition: opacity .2s, background .2s; } :root[data-faction="elyos"] .trow { border-bottom-color: var(--edge-2); } .trow:hover { background: var(--well); } .trow .icon, .trow .icon.game, .trow .icon.lic { width: 36px; height: 36px; } .trow .icon .picto { width: 18px; height: 18px; } .trow .name { display: grid; min-width: 0; font-size: var(--fs-ui); font-weight: 500; line-height: 1.25; } .trow.off { opacity: .5; } .trow.off .name { text-decoration: line-through; text-decoration-color: var(--ink-4); } .acct-out { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--edge); } .out-btn { color: var(--ink-2); } .out-btn svg { color: var(--hot); } .sw-vis { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2); transition: background .2s; } .sw-vis::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .3s var(--spring), background .2s; } .trow[aria-checked="true"] .sw-vis { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 4px 12px -4px var(--accent-glow); } .trow[aria-checked="true"] .sw-vis::after { transform: translateX(18px); background: #fff; } .cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; font-size: var(--fs-ui); } .sub-h { font-weight: 600; margin-bottom: 10px; } /* горячие клавиши: колпачки слева, описание сразу за ними */ .hk { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--edge); color: var(--ink-2); } :root[data-faction="elyos"] .hk { border-bottom-color: var(--edge-2); } .hk .keys { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .hk .kbd { font-size: 12px; line-height: 22px; padding: 0 8px; min-width: 26px; text-align: center; } .kplus { color: var(--ink-3); font-size: var(--fs-xs); } /* инструкция по Synapse — аккордеон шагов */ .acc { display: grid; gap: 6px; } .acc-step { border-radius: 14px; background: var(--well); } .acc-step > summary { list-style: none; display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 12px; align-items: center; min-height: 52px; padding: 8px 14px 8px 10px; cursor: pointer; font-weight: 600; } .acc-step > summary::-webkit-details-marker { display: none; } .acc-step .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--font-ui); color: var(--accent-hi); background: var(--accent-soft); } .acc-step[open] .num { color: #fff; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); } .acc-step p { margin: 0; padding: 0 16px 14px 50px; color: var(--ink-2); line-height: 1.6; } .acc-step code { font-family: var(--font-mono); font-size: var(--fs-xs); } .ocr { font-size: var(--fs-xs); color: var(--ink-3); columns: 2; margin-top: 8px; } .fields { display: grid; gap: 12px; } /* ---------- Плавающая подсказка (карточка предмета) ---------- */ /* подсказка — плотнее карточек под ней: тёмное стекло .94 и кольцо 1 px, чтобы не сливалась с панелью */ .gtip { position: fixed; z-index: 70; width: 340px; max-width: calc(100vw - 16px); max-height: 80vh; overflow: auto; font-size: var(--fs-sm); border-radius: 18px; background: rgba(20, 14, 36, .94); -webkit-backdrop-filter: blur(28px) saturate(var(--sat)); backdrop-filter: blur(28px) saturate(var(--sat)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 1px color-mix(in srgb, var(--gc, transparent) 45%, transparent), inset 0 1px 0 var(--spec-c), 0 24px 60px rgba(0, 0, 0, .6); transform-origin: 0 0; animation: tipin .32s var(--spring-soft) both; } @keyframes tipin { from { opacity: 0; transform: translateY(4px) scale(.96); } } .gtip[hidden] { display: none; } .gtip .th { display: flex; gap: 12px; align-items: center; padding: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--gc, transparent) 22%, transparent), transparent); } .gtip .frame { position: relative; flex: none; width: 56px; height: 56px; overflow: hidden; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(to top, color-mix(in srgb, var(--gc, #888) 30%, transparent), transparent 60%), var(--well-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc, #888) 60%, transparent); } .gtip .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .gtip .frame.wide { width: 96px; } .gtip .frame.wide img { object-fit: cover; } .gtip .tn { font: 700 var(--fs-body) var(--font-ui); color: color-mix(in srgb, var(--gc, var(--ink)), #1B1E3A var(--gt)); } .gtip .th:not([style]) .tn { color: var(--ink); } .gtip .tn b { color: var(--ink); } .gtip .ts { font-size: var(--fs-xs); color: var(--ink-3); } .gtip .tb { padding: 0 14px 14px; display: grid; gap: 6px; } .gtip .tsec { font: 600 var(--fs-xs) var(--font-ui); color: var(--ink-2); margin-top: 6px; } .gtip .statrows { margin: 0; } .gtip .statrows > div { padding: 6px 10px; font-size: var(--fs-sm); } .gtip .statrows b { white-space: normal; text-align: right; } .gtip .desc { white-space: pre-line; color: var(--ink-2); margin: 0; } :root[data-faction="elyos"] .gtip { background: rgba(250, 251, 255, .96); box-shadow: 0 0 0 1px rgba(110, 120, 190, .22), 0 0 0 1px color-mix(in srgb, var(--gc, transparent) 40%, transparent), 0 24px 60px rgba(60, 70, 140, .3); } .gtip .ench { display: flex; align-items: center; gap: 10px; color: var(--ink-2); } .gtip .ench b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; } /* заточка — сегменты 8×6, а не текстовые ромбы */ .gtip .segs { display: inline-flex; gap: 3px; } .gtip .segs i { width: 8px; height: 6px; border-radius: 2px; background: var(--well-2); } .gtip .segs i.on { background: var(--g-unique); box-shadow: 0 0 6px -1px color-mix(in srgb, var(--g-unique) 70%, transparent); } .gtip .tnote { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-3); } .gtip .ts { line-height: 1.4; } .gtip .stones { display: flex; flex-wrap: wrap; gap: 6px; } .gtip .stones span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 8px; background: var(--well); color: var(--ink-3); font-size: var(--fs-xs); } .gtip .stones span.on { color: var(--ink); } .gtip .stones i { width: 8px; height: 8px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px var(--ink-3); } .gtip .tfoot { margin: 0; padding: 8px 14px; border-top: 1px solid var(--edge); color: var(--ink-3); font-size: var(--fs-xs); } .gtip .x { position: absolute; top: 8px; right: 8px; z-index: 1; width: 32px; height: 32px; font-size: 18px; } .gtip .spec { font-size: var(--fs-sm); } .gtip .runform { gap: 10px; } .gtip .runform .btn { justify-self: start; } .gtip .tag { font-size: var(--fs-xs); color: var(--ink-3); } /* ---------- Командная палитра (Ctrl+K) и шторка «Ещё» ---------- */ /* Подложка размывает и затемняет страницу — палитра отделяется от содержимого, а не висит поверх резкой главной */ .pal-back, .sheet-back { position: fixed; inset: 0; z-index: 80; background: rgba(8, 6, 16, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadein .2s var(--ease-out) both; } :root[data-faction="elyos"] .pal-back, :root[data-faction="elyos"] .sheet-back { background: rgba(40, 46, 96, .28); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); } @keyframes fadein { from { opacity: 0; } } .pal { position: fixed; z-index: 81; left: 50%; top: 12vh; width: min(640px, calc(100vw - 24px)); translate: -50% 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: min(560px, 72vh); border-radius: 24px; background: var(--glass-pop); -webkit-backdrop-filter: blur(30px) saturate(var(--sat)); backdrop-filter: blur(30px) saturate(var(--sat)); box-shadow: 0 0 0 1px var(--edge-2), inset 0 1px 0 var(--spec-c), var(--shadow-pop); animation: palin .5s var(--spring) both; overflow: hidden; } :root[data-faction="elyos"] .pal { box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 2px rgba(199, 194, 255, .5), var(--shadow-pop); } @keyframes palin { from { opacity: 0; transform: translateY(-14px) scale(.97); } } .pal-in { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--edge); } .pal-in svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; } .pal-in input { flex: 1; height: 44px; padding: 0; font-size: 17px; background: none !important; box-shadow: none !important; border-radius: 0; } .pal-list { overflow: auto; padding: 8px; } .pal-sec { padding: 10px 12px 4px; font: 600 var(--fs-xs) var(--font-ui); color: var(--ink-3); } .pal-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 48px; padding: 6px 12px 6px 8px; border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; } .pal-item[aria-selected="true"] { background: var(--accent-soft); } @media (hover: hover) { .pal-item:hover { background: var(--accent-soft); } } .pal-item .kbd { visibility: hidden; } .pal-item[aria-selected="true"] .kbd { visibility: visible; } .pal-item .pi { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--well-2); color: var(--accent-hi); overflow: hidden; } .pal-item .pi img { width: 100%; height: 100%; object-fit: contain; } .pal-item .pi svg { width: 18px; height: 18px; } .pal-item b { display: block; font-weight: 600; font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* совпадение с запросом — цветом, без заливки; имя вещи — цветом грейда */ .pal-item mark { background: none; color: var(--accent-hi); font-weight: 700; } :root[data-faction="elyos"] .pal-item mark { color: #3F63E6; } .pal-item b:is(.g-legend, .g-unique, .g-hero, .g-rare, .g-special) mark { color: inherit; text-decoration: underline 2px; text-underline-offset: 3px; } .pal-item small { display: block; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pal-foot { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--edge); font-size: var(--fs-xs); color: var(--ink-3); } @media (pointer: coarse) { .pal-foot, .pal-in > .kbd { display: none; } } .pal-empty { padding: 18px; color: var(--ink-3); text-align: center; } /* шторка «Ещё» — стеклянная сетка плиток, как «Быстрые действия»; выход — отдельной строкой внизу */ .sheet { position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; display: grid; gap: 12px; padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: rgba(20, 14, 36, .8); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 -10px 40px rgba(0, 0, 0, .4), inset 0 1px 0 var(--spec-c), inset 0 0 0 1px var(--edge); animation: sheetin .42s var(--spring) both; transition: transform .3s var(--spring); touch-action: none; } :root[data-faction="elyos"] .sheet { background: rgba(246, 247, 255, .82); box-shadow: 0 -10px 40px rgba(60, 70, 130, .25), inset 0 1px 0 #fff; } @keyframes sheetin { from { transform: translateY(100%); } } .sheet-grip { justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--ink-4); } .sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .sh-tile { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 96px; padding: 12px 6px; border: 0; border-radius: 18px; cursor: pointer; color: var(--ink); font: 600 var(--fs-sm)/1.2 var(--font-ui); text-align: center; background: var(--well); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c); } :root[data-faction="elyos"] .sh-tile { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 6px 16px -10px rgba(60, 70, 130, .35); } .sh-tile.on { box-shadow: inset 0 0 0 2px var(--accent-hi), 0 0 24px -8px var(--accent-glow); } .sh-tile .pill-ic { width: 40px; height: 40px; } .pill-ic.duo { position: relative; overflow: hidden; background: #EEF1FA; } .pill-ic.duo i { position: absolute; inset: 0; } .pill-ic.duo i:first-child { background: radial-gradient(circle at 30% 30%, #C7C2FF, #A8D8FF); clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%); } .pill-ic.duo i:last-child { background: radial-gradient(circle at 70% 30%, #8B5CF6, #1A0F35); clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%); } .sh-exit { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 0; border-radius: 14px; cursor: pointer; font: 600 var(--fs-ui) var(--font-ui); color: var(--hot); background: color-mix(in srgb, var(--hot) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hot) 25%, transparent); } .sh-exit svg { width: 18px; height: 18px; } html.modal-open { overflow: hidden; } /* ---------- Тост — пружинный выезд: на ПК снизу справа, на телефоне — над нижней панелью ---------- */ .toast { position: fixed; right: 24px; left: auto; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 999px; background: var(--glass-pop); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: var(--ink); font: 500 var(--fs-ui) var(--font-ui); box-shadow: 0 0 0 1px var(--edge-2), inset 0 1px 0 var(--spec-c), var(--shadow-pop); opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .2s var(--ease-in), transform .26s var(--ease-in); pointer-events: none; } .toast::before { content: ''; flex: none; width: 8px; height: 8px; transform: rotate(45deg); border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .toast.show { opacity: 1; transform: none; transition: opacity .2s var(--ease-out), transform .62s var(--spring); } /* ---------- Скелетон при загрузке ---------- */ .skel { position: relative; overflow: hidden; min-height: 140px; border-radius: var(--r-l); background: var(--well); } .skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--well-2) 50%, transparent 70%); transform: translateX(-100%); animation: skel 1.4s linear infinite; } @keyframes skel { to { transform: translateX(100%); } } /* ---------- Оверлей поверх игры: лёгкое стекло без размытия и бесконечных анимаций ---------- */ /* Следует стороне (ART-DIRECTION: «оверлей следует теме, но лёгкий»): асмодиане — тёмное фиолетовое стекло, элийцы — светлое ледяное. Тяжёлого blur нет: окно висит поверх игры и не должно грузить видеокарту. */ body.overlay-mode { background: transparent !important; overflow: hidden; } body.overlay-mode .atrea, body.overlay-mode canvas.ether { display: none; } .ov { width: 300px; margin: 8px; padding: 12px 14px; border-radius: 18px; font: var(--fs-sm)/18px var(--font-ui); color: #F3F0FA; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); background: rgba(16, 10, 30, .82); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .18), 0 12px 32px rgba(0, 0, 0, .5); --ov-acc: #8B5CF6; --ov-t: #B79CFF; --ov-hot: #FF6B8B; --ov-2: rgba(236, 230, 250, .8); --ov-3: rgba(236, 230, 250, .62); --ov-lic: rgba(139, 92, 246, .22); } .ov.elyos { color: #1B1E3A; text-shadow: none; background: rgba(240, 243, 252, .88); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 12px 32px rgba(30, 40, 90, .28); --ov-acc: #3F63E6; --ov-t: #3F63E6; --ov-hot: #C8323F; --ov-2: #464C6B; --ov-3: #5F6585; --ov-lic: rgba(79, 123, 255, .12); } .ov-h { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; } .ov-h > span { white-space: nowrap; } .ov-h .logo { display: inline-grid; place-items: center; } .ov-h .logo i { display: block; width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; background: var(--ov-acc); box-shadow: 0 0 10px var(--ov-acc); } .ov.elyos .ov-h .logo i { box-shadow: 0 2px 6px rgba(63, 99, 230, .4); } .ov b { font-weight: 600; } .ov .hot { color: var(--ov-hot); } .ov .faint { color: var(--ov-3); } .ov .num { margin-left: auto; font-variant-numeric: tabular-nums; } body.ov-move .ov { outline: 1px dashed var(--ov-acc); outline-offset: 2px; } body.ov-move .ov-h { -webkit-app-region: drag; cursor: move; } .ov-ev { margin-top: 4px; color: var(--ov-2); } /* секции — отступом 12 px, без линий-разделителей: в окне 300 px они только шумели */ .ov-s { margin-top: 12px; } .ov-t { display: flex; align-items: center; gap: 6px; font: 600 var(--fs-xs) var(--font-ui); color: var(--ov-t); margin-bottom: 4px; } .ov-t.hot { color: var(--ov-hot); } .ov-t .num { color: var(--ov-2); font-weight: 600; } .ov-r { display: flex; gap: 8px; align-items: center; min-height: 22px; } .ov-r .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* одна система иконок: картинка игры 18 px в круге или линейная пиктограмма в круге того же размера */ .ov-r .g { flex: none; width: 18px; height: 18px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; } .ov-r .g.lic { color: var(--ov-t); background: var(--ov-lic); } .ov-r .g img { width: 18px; height: 18px; object-fit: cover; } .ov-r .g .picto { width: 12px; height: 12px; } .ov-more { padding-left: 26px; font-size: var(--fs-xs); color: var(--ov-3); } .ov-done { display: flex; align-items: center; gap: 6px; padding-left: 2px; font-size: var(--fs-xs); color: var(--ov-3); } .ov-done svg { width: 14px; height: 14px; color: var(--ov-acc); } /* ---------- Адаптив ---------- */ @media (max-width: 1280px) { .c3.kpi-c { grid-column: span 6; } .guide.has-toc { grid-template-columns: minmax(0, 1fr); } .gtoc { display: none !important; } } @media (max-width: 1100px) { /* колонка «Следующий шаг» уходит под график на всю ширину: быстрые действия — одной строкой из четырёх */ .grid.home .quick .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (pointer: coarse) { .grid.home .quick .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .side { width: 76px; padding: 16px 10px; } .side .sl, .brand .brand-t, .side-me { display: none; } .brand { padding: 0 0 12px; justify-content: center; } .brand img { width: 52px; } .sn { justify-content: center; padding: 0; } .sn .badge { position: absolute; top: 2px; right: 2px; } .side-foot { margin-top: auto; } .topbar, main { margin-left: 108px; } .readbar { left: 108px; } .c4, .c5, .c7, .c8 { grid-column: 1 / -1; } .c4.half, .c5.half, .c7.half { grid-column: span 6; } .hero-fig { width: 46%; right: -2%; } .nowsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide, .guide.has-toc { grid-template-columns: 1fr; } .gnav { display: none; } .gnav-m { display: block; margin-bottom: var(--gap); border-radius: var(--r-l); background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); box-shadow: inset 0 0 0 1px var(--edge), var(--shadow); } .gnav-m > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 16px; cursor: pointer; } .gnav-m > summary::-webkit-details-marker { display: none; } .gnav-m > summary b { grid-column: 1; font-size: var(--fs-body); } .gnav-m > summary svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; } .gnav-ml { display: grid; gap: 2px; padding: 0 8px 10px; } .calc-side { position: static; } .calc-top { grid-template-columns: minmax(0, 1fr); } .dbento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dbento .dfold { grid-column: span 2 !important; min-height: 120px; } .dpair { grid-template-columns: 1fr; } .char-head { padding-right: 0; } .banner-tools { position: static; order: -1; justify-content: flex-end; } .char-banner { padding-right: 32px; } .char-spark { display: none; } .char-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { :root { --gap: 12px; --blur: 16px; --r-l: 20px; --r-xl: 24px; } body { font-size: var(--fs-body); } .side { display: none; } .topbar { margin: 0; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; gap: 8px; } .search { width: 44px; padding: 0; justify-content: center; } .search span, .search .kbd { display: none; } .clocks { margin-left: auto; } .clk-pill { height: 40px; padding: 0 10px 0 6px; font-size: var(--fs-xs); } .clk-pill .lbl { font-size: 11px; color: var(--ink-3); } .clk-pill:nth-child(2) { display: none; } .topbar .iconbtn { width: 40px; height: 40px; } main { margin: 0; padding: 4px 16px calc(96px + env(safe-area-inset-bottom)); } .grid > * { grid-column: 1 / -1 !important; } .grid .m6 { grid-column: span 6 !important; } /* плотное стекло: над светлым портретом и иконками подписи не теряют контраст, пятна не проступают */ .tabbar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 66px; padding: 4px; border-radius: 24px; background: rgba(16, 11, 30, .8); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c), var(--shadow-pop); } :root[data-faction="elyos"] .tabbar { background: rgba(246, 247, 252, .86); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 12px 40px -10px rgba(60, 70, 140, .35); } /* подложка активной вкладки едет пружиной к выбранной (--i — номер вкладки) */ .tab-ind { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / 5); border-radius: 18px; pointer-events: none; background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .35s var(--spring); } .tab { position: relative; z-index: 1; overflow: hidden; isolation: isolate; display: grid; justify-items: center; align-content: center; gap: 4px; border: 0; border-radius: 18px; background: none; cursor: pointer; color: var(--ink-2); font: 600 11px/1 var(--font-ui); letter-spacing: 0; padding: 0 2px; } :root[data-faction="elyos"] .tab { color: #4A5070; } /* главная: колонки складываются в одну, порядок задают ячейки .o (--o) */ .grid.home > .stack { display: contents; } .grid.home .o > * { grid-column: 1 / -1 !important; } .grid.home > .hero { order: 1; } .grid.home > .kpi { order: 2; } .tab svg { width: 22px; height: 22px; } .tab.on { color: var(--ink); } .tab.on svg { color: var(--accent-hi); } .tab .badge { top: 2px; right: calc(50% - 22px); } .greet { margin: 4px 0 14px; } .greet h1 { font-size: 26px; } .kd-x { display: none; } /* график главной: вкладки метрики — одной строкой, период — отдельной строкой под ними */ .ch-head { row-gap: 10px; } .ch-head .ch-tabs { flex: 1 1 100%; flex-wrap: nowrap; gap: 16px; } .ch-head .ch-tabs button { font-size: 16px; white-space: nowrap; } .ch-head .seg { flex: 1 1 100%; display: flex; } .ch-head .seg button { flex: 1; } /* мобильная шапка раздела — одна строка заголовка и виджет, ≤ 120 px; пояснение прячем */ .phead { min-height: 0; margin: 4px 0 14px; gap: 10px 12px; align-items: center; } .phead-t { flex: 1 1 auto; } .phead h1, .phead.sm h1 { font-size: 27px; } .phead p { display: none; } .phead-a { display: none; } .phead-w { flex: 1 1 100%; } .hw { min-height: 52px; padding: 6px 12px 6px 6px; } .hw .lring { --size: 40px; } .greet .acts { width: 100%; } /* герой на телефоне — ~300 px: арт справа за текстом, кнопки ровной сеткой; первый экран доходит до KPI */ .hero { min-height: 0; padding: 20px 18px 20px; align-items: flex-start; } .hero-body { max-width: none; gap: 8px; } .hero h2.h-display { font-size: 32px; } .hero-sub { max-width: 62%; font-size: var(--fs-ui); } .hero-meta .chip:nth-child(n+3) { display: none; } .hero-lvl .meter { max-width: 120px; } .hero-actions { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); width: 100%; gap: 8px; } .hero-actions .btn { padding: 0 14px; min-height: 44px; } .hero-scene { left: 0; -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 55%), linear-gradient(0deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 10%, #000 55%), linear-gradient(0deg, transparent 0%, #000 30%); } .hero-scene .scene { --sx: 78%; } /* фигура — в правых 45 %, не выходит за экран (иначе страница шире окна и телефон уменьшал её), левый край растворён */ .hero-fig { width: min(52%, 220px); right: 0; bottom: 70px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); } :root[data-faction="elyos"] .hero .glass-orb { display: none; } /* строка прогресса — на всю ширину под текстом, на подложке: не лежит на ногах и луке фигуры */ .hero-lvl { position: relative; z-index: 2; width: 100%; padding: 8px 12px; border-radius: 12px; background: rgba(10, 6, 22, .5); } :root[data-faction="elyos"] .hero-lvl { background: rgba(255, 255, 255, .7); } .hero-lvl .meter { max-width: none; } .hero::after { background: linear-gradient(90deg, rgba(10, 6, 22, .86) 0%, rgba(10, 6, 22, .45) 55%, transparent 80%); } :root[data-faction="elyos"] .hero::after { background: linear-gradient(90deg, rgba(240, 243, 255, .92) 0%, rgba(240, 243, 255, .55) 55%, transparent 80%); } .kpi { padding: 14px; } .kpi-v b { font-size: 26px; } .kpi-ring { padding-right: 14px; } .kpi .lring { position: relative; right: auto; top: auto; translate: none; --size: 56px; --th: 6px; margin-top: 8px; } .kpi .lr-c b { font-size: 13px; } .kpi .lr-c small { display: none; } .kpi .pill-ic { width: 32px; height: 32px; } .next { padding: 18px; } .next h3 { font-size: 17px; -webkit-line-clamp: 3; } .next-row { flex-direction: column; align-items: flex-start; gap: 12px; } :root[data-faction="elyos"] .hero .glass-orb { width: 52px; height: 52px; right: 5%; top: -20px; } .nx-pair .nx-ic:first-child:not(:last-child) { width: 36px; height: 36px; } .nx-ic { width: 48px; height: 48px; } .card { padding: 18px; } .card-h { flex-wrap: wrap; row-gap: 8px; } .card-h h2 { flex: 1 1 auto; min-width: 62%; } .card-h .meta { justify-content: flex-start; text-align: left; } /* телефон: плитки вертикальные; скан здесь не работает — остаются три в ряд */ .tile { grid-template-columns: 1fr; justify-items: center; row-gap: 6px; text-align: center; min-height: 96px; padding: 12px 6px; } .tile .pill-ic { grid-row: auto; } .tile > span:not(.pill-ic) { white-space: normal; text-wrap: balance; font-size: var(--fs-sm); } .tile small { justify-self: center; } .todo .tx b, .todo .tx small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .banner { min-height: 0; padding: 22px 18px; flex-direction: column; align-items: stretch; } .banner::before { background: linear-gradient(0deg, rgba(9, 6, 20, .92) 10%, rgba(9, 6, 20, .5) 70%, rgba(9, 6, 20, .25)); } :root[data-faction="elyos"] .banner::before { background: linear-gradient(0deg, rgba(240, 243, 255, .96) 15%, rgba(226, 230, 255, .7) 65%, rgba(199, 194, 255, .25)); } :root[data-faction="elyos"] .banner-art img { filter: brightness(1.15) saturate(1.15); } .banner-aside { justify-items: start; } .banner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .banner-actions .btn { padding: 0 10px; min-height: 44px; } /* «Прокачка»: кольцо 84 px — в потоке над заголовком (в углу оно перекрывало «3-е гнездо») */ .grow-banner .banner-aside { position: static; order: -1; justify-items: start; } .grow-banner .banner-aside .lring { --size: 84px; --th: 7px; } .grow-banner .banner-aside .lring .lr-c b { font-size: 22px; } .grow-banner h1 { font-size: 26px; } .nextpt .ic, .nextpt .ic img { width: 64px; height: 64px; } .slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .slot { min-height: 108px; } .energy .lring.semi { --size: 120px; --th: 10px; } /* «Персонаж» на телефоне — компактная горизонтальная шапка (≤ 280 px): портрет 72 px слева, имя и плашки справа, мощь и ур. предметов — одной строкой; крылья, питомец и график — ниже, в карточках */ .char-banner { align-items: stretch; padding: 16px; padding-right: 16px; gap: 12px; } .char-head { grid-template-columns: 72px minmax(0, 1fr); justify-items: start; text-align: left; gap: 12px; } .char-id { justify-items: start; gap: 6px; } .char-id h1 { font-size: 26px; } .char-id .chips { justify-content: flex-start; } .char-id .side-chip, .char-id .hero-title { display: none; } .char-por { width: 72px; height: 72px; border-radius: 20px; } .char-kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .char-kpis .ck { min-height: 60px; padding: 10px 12px; } .char-kpis .ck b { font-size: 18px; } .char-kpis .ck[data-what] { display: none; } .char-spark { display: none; } .banner-tools { order: -1; } /* узкая витрина: портрет по высоте колонки (лицо крупно), а не маленький квадрат внизу */ .doll .por img.cut { width: auto; height: 94%; } .doll { grid-template-columns: 52px minmax(0, 1fr) 52px 52px; grid-template-rows: repeat(6, 52px) auto; gap: 6px 8px; } .itemcell .frame, .itemcell.weap .frame { width: 52px; height: 52px; border-radius: 14px; } .doll-weap { gap: 8px; grid-area: auto; grid-column: 1 / -1; grid-row: 7; } .divine { grid-template-columns: repeat(3, minmax(0, 1fr)); } .statrows, .boards { grid-template-columns: 1fr; } .statring { padding: 14px 10px; gap: 6px 8px; } .hrow { grid-template-columns: auto auto 1fr; gap: 4px 12px; } .hrow .h-when { grid-column: 1 / -1; font-size: var(--fs-xs); } .hrow .h-il { text-align: right; } .hrow .h-ch { grid-column: 1 / -1; flex-wrap: wrap; } .hrow .h-tx { white-space: normal; } .doll { grid-template-areas: "p3 por p10 p22" "p4 por p11 p12" "p5 por p13 p14" "p6 por p15 p16" "p7 por p17 p19" "p8 por pw pp" "wp wp wp wp"; } .skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lb { grid-template-columns: 28px minmax(0, 1fr) 64px; } .lb .hbar { grid-column: 2 / -1; grid-row: 2; } .pas { grid-template-columns: 1fr; } .brk-row, .brk-head { grid-template-columns: 32px minmax(0, 1fr) 70px; } .brk-row .hbar { grid-column: 2 / -1; grid-row: 2; } .brk.compact .brk-row .hbar { grid-column: auto; grid-row: auto; } .brk-row .c, .brk-head span:nth-child(4), .brk-head span:nth-child(3) { display: none; } .nextpt { grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 12px 14px; } .nextpt h3 { font-size: 17px; } /* «Следующее очко»: название в две строки, прирост — второй строкой под ним */ .step { grid-template-columns: 22px 36px minmax(0, 1fr); } .step .tx b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .step .v { grid-column: 3; text-align: left; } .flow-scroll { padding: 0 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); scroll-snap-type: x proximity; } .flow > .card-h { padding: 0 18px; } .fnode.ms { scroll-snap-align: center; } .dgrid, .dpair .dgrid:not(.one) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* телефон: доступные подземелья — горизонтальной лентой карточек по 280 px с привязкой, край ленты растворён */ .dbento { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px 8px; padding: 0 16px 6px; scroll-padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .dbento::-webkit-scrollbar { display: none; } .dbento > * { flex: 0 0 280px; height: 240px; scroll-snap-align: start; } .dbento .dfold { flex-basis: 200px; grid-column: auto !important; } .dcard.feature .dname { font-size: 20px; } .dcard { min-height: 180px; } .dcard.wide { min-height: 220px; } .dcard .dname { font-size: var(--fs-ui); } .dcard .lm-x { display: none; } .dcard .dfoot-glass { padding: 12px; } .rrow { grid-template-columns: 40px minmax(0, 1fr) 28px; gap: 8px; } .rrow > :nth-child(2), .rrow > :nth-child(4), .rrow > :nth-child(5) { display: none; } .rrow > :nth-child(6) { align-self: start; } .rthumb { width: 40px; height: 40px; } .rname { white-space: normal; } .rtitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .run-difficulty { display: none; } .run-meta { display: block; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.4; } .bslots { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lrow { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 10px; } .nowsteps { grid-template-columns: 1fr 1fr; } /* калькулятор: результат сверху, условия свёрнуты в одну строку */ .grid.calc .calc-side, .calc-top .calc-side { order: -1; } .calc-fold > summary.calc-sum { display: grid; grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; list-style: none; padding: 14px 18px; border-radius: var(--r-l); cursor: pointer; background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge), var(--shadow); } .calc-fold > summary.calc-sum::-webkit-details-marker { display: none; } .calc-fold > summary.calc-sum svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; } .fields.two { grid-template-columns: 1fr; } .calc-res { min-height: 0; } .respills { grid-template-columns: 1fr 1fr; } .wsk { grid-template-columns: 100px minmax(0, 1fr); } .doc { padding: 20px 18px; font-size: var(--fs-body); } .doc > h1 + p { font-size: 17px; } .doc .table-wrap { overflow-x: auto; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .doc table { min-width: 520px; } .doc td:first-child { white-space: nowrap; } .doc th { position: static; } .readbar { left: 0; top: calc(60px + env(safe-area-inset-top)); } .totop { right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 44px; height: 44px; } .readbar { margin: -20px -18px 17px; } .guide.has-toc { grid-template-columns: minmax(0, 1fr); } .gnav-ml { grid-template-columns: minmax(0, 1fr); } .set-row { flex-wrap: wrap; } .set-row input[type=time], .set-row input[type=number], .set-row select { width: 100%; } .fields input { width: 100%; } .hk { grid-template-columns: 1fr; gap: 6px; } .acc-step p { padding-left: 16px; } .ocr { columns: 1; } /* телефон: три строки одной высоты — превью 88×56 слева, название и подпись, отметка справа; выбор — кольцом, без масштаба */ .theme-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; } .tcard { grid-template-columns: 88px minmax(0, 1fr) 24px; align-items: center; gap: 14px; min-height: 88px; padding: 10px 14px 10px 10px; } .tcard:hover { transform: none; } .tc-prev { height: 56px; border-radius: 10px; } .tc-t { padding: 0; } .tc-ring { position: static; } .db-filters .seg { display: flex; width: 100%; } .db-filters .seg button { flex: 1; padding: 0 8px; } .dbcard { min-height: 84px; } .toast { left: 16px; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); max-width: none; justify-content: center; } .pal { top: 8px; height: min(560px, 80vh); } } /* ---------- Без анимаций: итог сразу, остаются кроссфейды до 150 мс ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .001ms !important; } .toast, .seg button, .btn, .gtip { transition-duration: .15s !important; } .rv.pre { opacity: 1; } .tilt.tilting, .magnet { transform: none !important; } .glass-orb, .fog, .orb, .art-window img, .hero-char, .hero-scene .scene, .hero-sparks i, .wings-glow, .fl-run, .ch-halo, .itemcell .frame::before, .itemcell .frame::after, .shimmer::before, .sparkles i, .chrome { animation: none !important; } .hero-sparks, :root[data-faction="elyos"] .sparkles { display: none; } .draw { stroke-dashoffset: 0; } canvas.ether { display: none; } } /* ====================================================================================================== Круг доводки 3 (02.10) — по оценкам критиков. Правила ниже перекрывают базовые выше по порядку каскада. ====================================================================================================== */ /* ---------- Каркас ---------- */ /* Страница никогда не шире окна: подстраховка к правилам верхней строки ниже */ html, body { overflow-x: clip; } /* Верхняя строка в узком окне (761–1100 px; у окна компаньона minWidth 900): поиск сжимается до кнопки-лупы, подписи часов уходят, недельные часы — в подсказку дневных. Раньше «Обновить» и аватар уезжали за край. */ .search { min-width: 44px; } @media (max-width: 1100px) and (min-width: 761px) { .search { flex: 1 1 200px; width: auto; max-width: 440px; } .clk-pill .lbl { display: none; } } @media (max-width: 960px) and (min-width: 761px) { .search { flex: 0 0 44px; width: 44px; padding: 0; justify-content: center; } .search span, .search .kbd { display: none; } .clk-pill[data-clk="w"] { display: none; } } /* Скрытый тост не держит размытие под собой (лишний слой backdrop-filter рядом с игрой) */ .toast:not(.show) { visibility: hidden; transition: opacity .2s var(--ease-in), transform .26s var(--ease-in), visibility 0s .26s; } /* Плашки показателей и часы — размытие легче: на тёмном фоне разницы не видно, видеокарте — заметно */ .kpi, .clk-pill { -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); } /* Нижняя панель телефона не закрывает последние элементы коротких страниц */ @media (max-width: 760px) { main#view { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } } /* Ctrl+K: совпадение — подсветкой (как ), без подчёркивания и «ссылочного» цвета */ .pal-item mark, :root[data-faction="elyos"] .pal-item mark { background: color-mix(in oklab, var(--accent) 24%, transparent); color: inherit; border-radius: 4px; padding: 0 1px; font-weight: inherit; } .pal-item b:is(.g-legend, .g-unique, .g-hero, .g-rare, .g-special) mark { text-decoration: none; } /* Грейды текстом на светлом стекле элийцев — затемнённые стопы, контраст ≥ 4,5:1 (уникальное было ~3,5:1) */ :root[data-faction="elyos"] .g-unique { color: #8A6414; } :root[data-faction="elyos"] .g-legend { color: #2F5FD0; } :root[data-faction="elyos"] .g-rare { color: #2C7A3A; } :root[data-faction="elyos"] .g-hero { color: #B4501A; } :root[data-faction="elyos"] .g-special { color: #1A6F78; } /* ---------- Главная ---------- */ /* Асмодианский герой (реф. 2): даэва выходит за верхнюю кромку панели — слой арта на 44 px выше героя, тёмный фон кадра растворяется в фон страницы маской (без новой вырезки). Кадр проявляется, когда декодирован (.art-in). */ @media (min-width: 761px) { .hero.a { overflow: visible; } .hero.a .hero-scene { top: -44px; border-radius: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%), linear-gradient(180deg, transparent 0, #000 13%, #000 80%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 32%), linear-gradient(180deg, transparent 0, #000 13%, #000 80%, transparent 100%); mask-composite: intersect; } /* кадр поднят и чуть крупнее: корона даэвы пересекает верхнюю кромку панели */ .hero.a .hero-scene .scene { top: -20%; height: 125%; } } .hero.a .hero-scene .scene image { opacity: 0; transition: opacity .4s var(--ease-out); } .hero.a.art-in .hero-scene .scene image { opacity: 1; } /* узкое окно: текст героя не ложится на лицо даэвы — плотнее скрим слева, кадр сдвинут вправо */ @media (max-width: 1100px) and (min-width: 761px) { .hero.a::after { background: linear-gradient(90deg, rgba(12, 8, 24, .92) 0 46%, rgba(12, 8, 24, .4) 70%, transparent); } .hero.a .hero-scene .scene { --sx: 62%; } } /* Две колонки-стопки идут независимо (без растягивания по ряду): слева — задачи, график, быстрые действия, план; справа — следующий шаг, неделя, события, энергия. До 1100 px — одна колонка в порядке --o. */ .grid.home > .stack:is(.home-l, .home-r) { align-self: start; grid-template-rows: none; } .stack > .o > * { grid-column: 1 / -1; } .grid .chart-card { align-self: start; } .chart-card #mainChart { flex: none; height: 250px; min-height: 0; } .grid.home .quick .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.home .quick .tile { min-height: 96px; } @media (pointer: coarse) { .grid.home .quick .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1100px) { .grid.home > .stack { display: contents; } .grid.home .o > * { grid-column: 1 / -1 !important; order: var(--o); } .grid.home > .hero { order: 1; } .grid.home > .kpi { order: 2; } } /* Плитки показателей: точка «сейчас» мини-графика — отдельным кружком (без сплющивания), полоса задач дня 4 px */ .spark-w { position: relative; display: block; flex: none; } .kpi .spark-w { margin-top: auto; } .kpi .spark { height: 40px; margin-top: 0; padding-top: 0; } .sp-end { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; pointer-events: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--chart-a) 30%, transparent), 0 0 12px 2px color-mix(in srgb, var(--chart-a) 80%, transparent); } :root[data-faction="elyos"] .sp-end { box-shadow: 0 0 0 1.5px #5B5BD6, 0 0 0 5px rgba(91, 91, 214, .18), 0 2px 6px rgba(91, 91, 214, .4); } .segbar, :root[data-faction="elyos"] .segbar { height: 4px; gap: 3px; } :root[data-faction="elyos"] .segbar i { border-radius: 2px; } /* элийцы: плитки одного тона — плотнее и почти без насыщения (сфера просвечивала голубым через saturate 160 %) */ :root[data-faction="elyos"] .kpi { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(24px) saturate(105%); backdrop-filter: blur(24px) saturate(105%); } /* Задачи: одна система иконок — круг 44 px в стеклянной рамке. Игровая картинка (меню клиента, миниатюра арта), а где её нет — линейная пиктограмма в той же тёмной рамке, без фиолетовой заливки. */ :is(.slot .icon, .todo .ti, .trow .icon):is(.game, .lic) { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 16px -8px rgba(0, 0, 0, .7); } :is(.slot .icon, .todo .ti, .trow .icon).lic { color: var(--accent-hi); } :is(.slot .icon, .todo .ti, .trow .icon).game::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } /* элийцы: те же медальоны — глубокий индиго с белой кромкой, у запасной пиктограммы — тот же градиент лазурь → индиго */ :root[data-faction="elyos"] :is(.slot .icon, .todo .ti, .trow .icon):is(.game, .lic) { background: radial-gradient(120% 120% at 30% 20%, #4A5BC8, #1F2560 72%); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .95), 0 6px 16px -6px rgba(40, 50, 120, .4); } :root[data-faction="elyos"] :is(.slot .icon, .todo .ti, .trow .icon).lic { color: #fff; } /* сделано: иконка и подпись приглушены, в углу — галочка 18 px цвета «готово» (вместо значка поверх иконки) */ .slot.done .icon, .slot.done .name { opacity: .45; } .slot.done .icon img, .slot.done .icon .picto { opacity: 1; filter: saturate(.5); } .slot .chk-b { inset: auto; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; z-index: 4; background: var(--ok); color: #0B1A12; box-shadow: 0 0 10px -2px color-mix(in srgb, var(--ok) 70%, transparent); } .slot .chk-b svg { width: 12px; height: 12px; padding: 0; background: none; box-shadow: none; border-radius: 0; } :root[data-faction="elyos"] .slot .chk-b { color: #fff; } /* закрытая задача (если раскрыть «+N»): замок — бейджем на кромке иконки, уровень — строкой под именем */ .slot .lock-b { position: absolute; z-index: 4; top: 44px; left: calc(50% + 8px); width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--bg1); color: var(--ink-2); box-shadow: 0 0 0 1px var(--edge-2); } .slot .lock-b .i-lock { width: 10px; height: 10px; } :root[data-faction="elyos"] .slot .lock-b { background: #fff; color: var(--ink-2); } .slot .when { margin-top: -4px; font-size: 11px; color: var(--ink-3); } /* элийцы: плитки — стекло, а не серые блоки внутри карточки */ :root[data-faction="elyos"] .slot:not(.more):not(.locked) { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 6px 18px -10px rgba(80, 90, 160, .3); } :root[data-faction="elyos"] .slot:not(.more):not(.locked):hover { background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(79, 123, 255, .35), 0 12px 26px -10px rgba(79, 123, 255, .4); } :root[data-faction="elyos"] .slot.done:not(.more) { background: rgba(255, 255, 255, .3); } /* «План на сегодня»: иконки строк — квадратные со скруглением 12 px (как в списке реф. 1) */ .todo .ti { border-radius: 12px; } .todo .ti.game::after { border-radius: 12px; } @media (max-width: 760px) { /* заголовок строки — до двух строк, плашка статуса — под ним, а не отнимает ширину справа */ .todo { grid-template-columns: 44px minmax(0, 1fr); row-gap: 6px; } .todo .st-chip { grid-column: 2; justify-self: start; } .chart-card #mainChart { height: 210px; } /* плитки показателей 2×2: без мини-графиков; кольцо «Уровня» — 46 px в правом верхнем углу, а не под текстом */ .kpi .spark-w, .kpi .kpi-meter, .kpi .kpi-delta { display: none; } .kpi-ring { padding-right: 14px; } .kpi .lring { position: absolute; top: 10px; right: 10px; translate: none; margin: 0; --size: 46px; --th: 5px; } .kpi .lr-c b { font-size: 11px; } .kpi .kpi-d { font-size: 12px; } } /* «На сегодня» в колонке 8/12: шесть плиток в ряд — десять задач и «+N» встают в два ряда, без одинокой плитки в третьем */ @media (min-width: 1101px) { .home-l .tasks-d .slots { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } } /* ---------- Персонаж ---------- */ /* Портрет — в тёмной витрине без вырезки: «светлее» растворяет чёрный фон рендера NC в цвете витрины, овальная маска уводит края. У асмодиан витрина — ночной фиолет, у элийцев — глубокий индиго (тёмная карточка-акцент реф. 5). */ .doll .por, .char-por { isolation: isolate; } .doll .por, :root[data-faction="elyos"] .doll .por { background: radial-gradient(60% 50% at 50% 36%, rgba(139, 92, 246, .22), transparent 70%), #0C0916; box-shadow: inset 0 0 0 1px var(--edge), inset 0 -40px 60px -30px rgba(0, 0, 0, .6); } :root[data-faction="elyos"] .doll .por { background: radial-gradient(60% 50% at 50% 36%, rgba(120, 150, 255, .28), transparent 70%), radial-gradient(120% 100% at 50% 30%, #262C6A, #10133A); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 20px 44px -18px rgba(40, 50, 130, .55); } .doll .por img.por-img { position: absolute; inset: 0; left: 0; bottom: auto; width: 100%; height: 100%; max-width: none; translate: none; object-fit: cover; object-position: 50% 24%; mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(ellipse 72% 85% at 50% 38%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 72% 85% at 50% 38%, #000 58%, transparent 100%); } .char-por img.por-img { mix-blend-mode: lighten; object-position: 50% 20%; transform: scale(1.12); transform-origin: 50% 24%; -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 40%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 80% 90% at 50% 40%, #000 62%, transparent 100%); } :root[data-faction="elyos"] .char-por { background: radial-gradient(90% 90% at 50% 30%, #2C3478, #10133A); } /* элийцы: плашка уровня на аватаре и бейджи заточки — светлые/индиго, без тёмных «дыр» на светлом экране */ :root[data-faction="elyos"] .char-por .lv { background: rgba(255, 255, 255, .88); color: #1B1E3A; box-shadow: 0 2px 10px rgba(80, 90, 160, .22); } :root[data-faction="elyos"] .itemcell .enh { top: 3px; right: 3px; padding: 0 5px; border-radius: 999px; font-size: 11px; line-height: 16px; color: #fff; text-shadow: none; background: #3152D4; box-shadow: 0 0 0 1.5px #fff; } /* элийцы: кромка грейда тоньше и светлее, мягкое свечение грейда снизу — не ряд одинаковых зелёных рамок */ :root[data-faction="elyos"] .itemcell .frame { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--gc) 55%, white), 0 4px 14px -6px color-mix(in oklab, var(--gc) 60%, transparent); } :root[data-faction="elyos"] .itemcell:hover .frame, :root[data-faction="elyos"] .itemcell:focus-visible .frame { box-shadow: inset 0 0 0 1.5px var(--gc), 0 8px 20px -6px color-mix(in oklab, var(--gc) 70%, transparent); } /* Плашки шапки: одна схема и одна высота — подпись сверху, значение снизу, дельта зелёным текстом в той же строке */ .char-kpis .ck { min-height: 88px; align-items: center; } .ck-ic, :root[data-faction="elyos"] .ck-ic { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 60%, var(--btn-b)); box-shadow: 0 6px 18px -4px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .3); } .ck-ic svg { width: 18px; height: 18px; } .ck-ic img { border-radius: 50%; background: #140E26; } :root[data-faction="elyos"] .ck-ic img { background: #1F2560; } .ck-t { gap: 4px; } .ck-v { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: nowrap; } .char-kpis .ck .ck-v b { flex-wrap: nowrap; } .ck-d { flex: none; font: 600 12px/1 var(--font-ui); font-style: normal; color: var(--ok); font-variant-numeric: tabular-nums; } /* Даэванион: эмблема доски — круг 40 px в стеклянной рамке с подсветкой цвета доски, значок — светлый */ .board { grid-template-columns: 40px 1fr auto; } .board .b-em { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--bc) 40%, transparent), rgba(255, 255, 255, .04) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 55%, rgba(255, 255, 255, .14)), 0 0 18px -4px color-mix(in srgb, var(--bc) 60%, transparent); } .board .b-em img, :root[data-faction="elyos"] .board .b-em img { grid-row: auto; width: 22px; height: 22px; padding: 0; background: none; box-shadow: none; filter: brightness(0) invert(1) drop-shadow(0 0 4px color-mix(in srgb, var(--bc) 80%, transparent)); } :root[data-faction="elyos"] .board .b-em { background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--bc) 70%, #3B4AA8), #1F2560 75%); box-shadow: 0 0 0 1.5px #fff, 0 6px 16px -6px color-mix(in srgb, var(--bc) 70%, transparent); } .board.closed .b-em { filter: grayscale(1); opacity: .55; } .board.closed img { filter: none; } /* Божественные показатели — строками в две колонки (как показатели от узлов): пять рядов, без одинокой плитки */ .divine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .divine > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 12px; } .divine span { font-size: var(--fs-ui); color: var(--ink-2); } .divine b { font: 600 var(--fs-ui) var(--font-ui); } /* Подсказка вещи — то же стекло, что панели (реф. 1); грейд — кромкой 2 px сверху и свечением рамки иконки */ .gtip { background: rgba(20, 14, 36, .9); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); } :root[data-faction="elyos"] .gtip { background: rgba(250, 251, 255, .9); } .gtip .th[style] { box-shadow: inset 0 2px 0 var(--gc); } .gtip .th[style] .frame { box-shadow: 0 0 0 1px var(--gc), 0 0 18px color-mix(in srgb, var(--gc) 40%, transparent); } @media (max-width: 760px) { /* телефон: сначала аватар и имя, потом плашки, ниже — действия (кнопка на всю ширину, 44 px) */ .char-banner .banner-tools { order: 3; position: static; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; } .char-banner .banner-tools .btn { min-height: 44px; width: 100%; } .char-kpis .ck { min-height: 64px; padding: 10px 12px; gap: 10px; } .ck-ic { width: 32px; height: 32px; } .ck-v { flex-wrap: wrap; row-gap: 2px; } } /* мини-график мощи — внутри плашки «Боевая мощь» (справа сверху, рядом с подписью), а не отдельным блоком: четыре плашки получили всю ширину шапки, число и дельта стоят в одну строку */ .char-banner { padding-right: 40px; } .char-kpis .ck { position: relative; overflow: hidden; } .ck-t { position: static; } .ck-spark { position: absolute; top: 18px; right: 14px; width: 36%; height: 26px; pointer-events: none; } .ck-spark .spark { width: 100%; height: 26px; } @media (max-width: 1100px) { .ck-spark { display: none; } } /* ---------- Прокачка ---------- */ /* «Поток эфира»: близкие вехи — стопкой из двух иконок веером (сдвиг 14 px), подписи — по очереди под и над линией, одним рядом, 12 px, не шире 96 px (у стопки — 120); текущий уровень — кружок с числом на линии */ .flow-track { height: 164px; --line: 84px; } .fnode.ms .ds { display: flex; } .fnode.ms.stack .ds .d + .d { margin-left: -30px; } .fnode.ms .d.off img { filter: grayscale(.7) brightness(.75); opacity: .85; } .fnode.ms .d:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 4px; } .fnode .t { width: max-content; max-width: 96px; font-size: 12px; line-height: 1.3; } .fnode.ms.stack .t { max-width: 156px; } .fnode.down .t { top: calc(100% + 10px); } .fnode.up .t { top: auto; bottom: calc(100% + 10px); } .fnode .t b { font-weight: 700; color: var(--accent-hi); font-variant-numeric: tabular-nums; } .fnode.cur .d { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 0 0 3px var(--bg1), 0 0 0 4px var(--accent-hi), 0 0 20px 4px var(--accent-glow); } .fnode.cur .d b { font: 700 12px/1 var(--font-ui); color: #fff; font-variant-numeric: tabular-nums; } :root[data-faction="elyos"] .fnode.cur .d { box-shadow: 0 0 0 3px #fff, 0 0 0 4px #4F7BFF, 0 6px 18px -2px rgba(79, 123, 255, .55); } /* Умения: одна высота строк в ряду — кольцо в коробке 72 px, имя до двух строк с запасом, подстрока в одну строку, ряд специализаций прижат к низу. «+1 сейчас» — первыми и крупнее (кольцо 72 px против 56). */ .skc { display: flex; flex-direction: column; align-items: center; gap: 6px; } .skc .lring { flex: none; --size: 56px; margin: 8px 0; } .skc .lring img { width: 42px; height: 42px; border-radius: 12px; } .skc.can .lring { --size: 72px; margin: 0; } .skc.can .lring img { width: 56px; height: 56px; border-radius: 14px; } .skc-n { min-height: 2.6em; align-items: center; text-align: center; text-wrap: balance; } .skc-l { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .skc-spec { margin-top: auto; padding-top: 4px; } /* Стигмы: строки карточки — сверху вниз без растягивания, кнопка замены — по низу (у соседней без кнопки — пусто) */ .sock { grid-template-rows: 84px auto auto auto 1fr; align-content: start; } .sock > .chip { align-self: end; } .sock-why { margin-top: 12px; } .sock-why .rules { margin-top: 8px; } /* План: подписи читаются — 12,5 px, вторичный цвет, ширина шага; повторы одного умения — «×N» на иконке */ .stp small { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); max-width: 104px; text-wrap: balance; -webkit-line-clamp: 3; } .stp small .nw { color: var(--ink-3); } .stp-ic { position: relative; overflow: visible; } .stp-ic img { border-radius: 12px; } .stp-x { position: absolute; right: -8px; bottom: -6px; padding: 1px 6px; border-radius: 999px; font: 700 11px/1.4 var(--font-ui); color: #fff; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 0 0 2px var(--bg1); } :root[data-faction="elyos"] .stp-x { background: #3152D4; box-shadow: 0 0 0 2px #fff; } /* Элийцы: стекло спокойнее — без перекраски сферами (соседние панели были розовыми и бирюзовыми), сферы ярче в просветах */ :root[data-faction="elyos"] { --sat: 118%; --glass: rgba(255, 255, 255, .64); } :root[data-faction="elyos"] :is(.step, .sock, .pas > div, .lb, .statrows > div, .divine > div, .rules li) { background: rgba(255, 255, 255, .62); } :root[data-faction="elyos"] .sock { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 6px 18px -12px rgba(80, 90, 160, .3); } /* умения элийцев: без серых клеток — иконка в кольце и имя, ячейки разделены волосяными линиями */ :root[data-faction="elyos"] .skills-grid { gap: 0; overflow: hidden; } :root[data-faction="elyos"] .skc { background: none; box-shadow: none; border-radius: 0; margin: 0 -1px -1px 0; border-right: 1px solid rgba(91, 96, 160, .14); border-bottom: 1px solid rgba(91, 96, 160, .14); } :root[data-faction="elyos"] .skc:hover { background: rgba(255, 255, 255, .55); transform: none; } :root[data-faction="elyos"] .skc.can .lring img { box-shadow: 0 0 0 1px #4F7BFF, 0 10px 30px -12px rgba(79, 123, 255, .5); } /* сферы элийцев (реф. 5): насыщеннее, по углам — видны на каждом экране в просветах между панелями */ :root[data-faction="elyos"] .orb { filter: blur(60px) saturate(150%); } :root[data-faction="elyos"] .orb.o1 { background: radial-gradient(circle at 35% 35%, #B9B2FF, rgba(185, 178, 255, .5) 45%, transparent 70%); } :root[data-faction="elyos"] .orb.o2 { background: radial-gradient(circle at 40% 40%, #94CCFF, rgba(148, 204, 255, .45) 48%, transparent 70%); } :root[data-faction="elyos"] .orb.o3 { background: radial-gradient(circle at 50% 40%, #F2B8E2, rgba(242, 184, 226, .45) 50%, transparent 70%); } /* герой «Прокачки» у элийцев: голова дракона в кадре (не обрезана), а не тёмным пятном за заголовком */ :root[data-faction="elyos"] .grow-banner .banner-art img { object-position: 50% 28%; } /* ---------- Билды ---------- */ /* Карточки — по высоте содержимого (без пустоты под стигмами); «Взять за основу» — в углу обложки (у крупной — всегда, у остальных — при наведении), «под вашу стадию» — чипом рядом с названием */ .tplgrid { align-items: start; } .tpl-cta { position: absolute; top: 12px; right: 14px; z-index: 2; } .tpl-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .tpl-title h3 { min-width: 0; } .tplcard .tpl-now { position: static; } .tdps { min-height: 0; } .tdps.none .chip { justify-self: start; height: auto; padding: 5px 12px; font-size: var(--fs-sm); color: var(--ink-2); background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2); } .tpl-foot { align-items: flex-end; margin-top: 2px; padding-top: 0; } .stiglist { gap: 6px; } .sg.same { opacity: .55; } .sg.diff::before { background: linear-gradient(160deg, #fff, var(--accent-hi) 40%, var(--accent)); } .sg.diff { filter: drop-shadow(0 0 8px var(--accent-glow)); } .sg-diff { font: 600 12px/1.3 var(--font-ui); color: var(--accent-hi); } /* пустое «Ваши билды»: узкая строка на всю ширину — иконка, текст и два действия */ .empty-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; min-height: 120px; padding: 18px 22px; border-radius: var(--r-l); background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)); backdrop-filter: blur(var(--blur)) saturate(var(--sat)); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c), var(--shadow); } .empty-row .ec-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-hi); background: var(--accent-soft); } .empty-row .ec-ic svg { width: 22px; height: 22px; } .empty-row b { display: block; font-size: var(--fs-body); } .empty-row p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-2); } .er-a { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 760px) { .empty-row { grid-template-columns: 44px minmax(0, 1fr); } .er-a { grid-column: 1 / -1; } .er-a .btn { flex: 1; min-height: 44px; } } /* телефон: плашки условий на обложке переносятся, не наезжают друг на друга */ .tpl-cover .chips { flex-wrap: wrap; max-width: calc(100% - 24px); } .tplcard:not(.feature) .tpl-cover .chips { max-width: calc(100% - 28px); } /* ---------- Элийцы: единый вторичный стиль (белое стекло) и хром крупных заголовков ---------- */ :root[data-faction="elyos"] .btn:not(.primary):not(.ghost):not(.gold) { background: rgba(255, 255, 255, .72); color: #1B1E3A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 1px 2px rgba(27, 30, 58, .06), 0 6px 18px -8px rgba(80, 90, 160, .3); } :root[data-faction="elyos"] .btn:not(.primary):not(.ghost):not(.gold):hover { background: rgba(255, 255, 255, .92); transform: translateY(-2px); box-shadow: inset 0 0 0 1px #fff, 0 2px 4px rgba(27, 30, 58, .06), 0 10px 24px -8px rgba(80, 90, 160, .38); } :root[data-faction="elyos"] .card.ink .btn:not(.primary):not(.ghost):not(.gold), :root[data-faction="elyos"] .card.ink .iconbtn { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } /* хром: металл с горизонтом отражения посередине (статично), у всех крупных заголовков — герои, баннеры, шапки разделов */ :root[data-faction="elyos"] .chrome, :root[data-faction="elyos"] .phead h1 { background: linear-gradient(180deg, #262B5A 0%, #4E5690 36%, #A3ABDB 49%, #3D4580 56%, #1B1E3A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* элийцы: меню — перламутровое стекло, активная «таблетка» и главная кнопка — градиент индиго → лазурь → бирюза со свечением */ :root[data-faction="elyos"] .side { background: linear-gradient(180deg, rgba(199, 194, 255, .35), rgba(168, 216, 255, .2)), rgba(255, 255, 255, .5); } :root[data-faction="elyos"] .snav-ind, :root[data-faction="elyos"] .side-foot .sn.on { background: linear-gradient(135deg, #5250CC 0%, #3F63E6 55%, #2F8FBF 100%); box-shadow: 0 8px 24px rgba(79, 123, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .3); } :root[data-faction="elyos"] .btn.primary { background: linear-gradient(135deg, #5250CC 0%, #3F63E6 55%, #2F8FBF 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 24px rgba(79, 123, 255, .35); } /* крупная карточка: число урона и стигмы — в одну строку (карточка не выше соседней в ряду) */ @media (min-width: 761px) { .tplcard.feature .tpl-body { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: 36px; row-gap: 10px; align-items: end; } .tplcard.feature :is(.tpl-title, .tpl-where, .tpl-more) { grid-column: 1 / -1; } .tplcard.feature .tpl-foot { margin: 0; } } @media (hover: none), (max-width: 760px) { .tplcard:not(.feature) .tpl-cta { display: none; } } @media (max-width: 760px) { .tplcard.feature .tpl-cover .chips { max-width: calc(100% - 196px); } } /* ---------- Калькулятор ---------- */ /* «−» и «+» в полях: заметнее и крупнее (36×36), линия 1,75; наведение — акцент */ .st-b { width: 36px; min-height: 36px; color: var(--ink-2); } .st-b:hover { color: var(--accent-hi); background: var(--accent-soft); } .st-b svg { width: 16px; height: 16px; stroke-width: 1.75; } /* «Доля урона»: первая полоса — градиент акцента со свечением, остальные — сплошной акцент, тише по рангу */ svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; } .bt0 { stop-color: var(--accent); } .bt1 { stop-color: var(--accent-2); } :root[data-faction="elyos"] .bt0 { stop-color: #5B5BD6; } :root[data-faction="elyos"] .bt1 { stop-color: #3CC8C0; } .calc-res .brk-row .hb-fill { fill: var(--accent); } .calc-res .brk-row.best .hb-fill { fill: url(#brkTop); filter: drop-shadow(0 0 6px var(--accent-glow)); } .calc-res .brk > .brk-row:nth-child(2) .hb-fill { opacity: .85; } .calc-res .brk > .brk-row:nth-child(3) .hb-fill { opacity: .75; } .calc-res .brk > .brk-row:nth-child(4) .hb-fill { opacity: .65; } .calc-res .brk > .brk-row:nth-child(5) .hb-fill { opacity: .55; } .calc-res .brk > .brk-row:nth-child(n+6) .hb-fill { opacity: .45; } :root[data-faction="elyos"] .calc-res .brk-row .hb-fill { fill: #8FA6FF; } /* пустое «Что даёт больше урона» — строка ~96 px */ .calc-w.w-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 96px; padding: 18px 22px; } .w-row .ec-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 60%, var(--btn-b)); box-shadow: 0 6px 18px -4px var(--accent-glow); } .w-row .ec-ic svg { width: 20px; height: 20px; } .w-row h2 { margin: 0 0 2px; } .w-row p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); } @media (max-width: 760px) { .calc-w.w-row { grid-template-columns: 40px minmax(0, 1fr); } .w-row .btn { grid-column: 1 / -1; min-height: 44px; } } /* элийцы: бейджи «+N» на панели умений — индиго (контраст белого ≈ 6:1) */ :root[data-faction="elyos"] .lslot i { background: #3152D4; font-size: 11px; font-weight: 800; } /* телефон: липкая мини-строка урона, пока результат вне экрана */ .calc-sticky { display: none; } @media (max-width: 760px) { .calc-sticky { position: sticky; top: calc(70px + env(safe-area-inset-top)); z-index: 5; display: block; height: 0; pointer-events: none; } .calc-sticky .cs-in { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 999px; font-size: var(--fs-sm); color: var(--ink-2); background: var(--glass-pop); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--edge-2), var(--shadow); opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .3s var(--ease-out); } .calc-sticky.on .cs-in { opacity: 1; transform: none; } .calc-sticky b { font: var(--fw-num) 18px/1 var(--font-num); color: var(--ink); font-variant-numeric: tabular-nums; } } /* ---------- Подземелья ---------- */ .dcard .dsub, .dcard .dfoot { letter-spacing: normal; } .dcard.feature .dsub, .dcard.feature .dfoot { font: 500 13px/1.4 var(--font-ui); } /* тёмные кадры (лаборатория, башня) — светлее: не «чёрная карточка» среди ярких */ .dcard .cover:is([data-art="cave_throne"], [data-art="tower_of_aion_night"]) img { filter: saturate(.95) brightness(1.3); } /* «Ещё N подземелий» — коллаж кадров на всю карточку, подпись поверх затемнения, стрелка */ .dfold { padding: 0; align-content: end; isolation: isolate; background: #140E26; } .dfold-th { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; left: 0; top: 0; } .dfold-th.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; } .dfold-th.n2 { grid-template-rows: 1fr; } .dfold-th.n3 > span:first-child { grid-row: span 2; } .dfold-th span { width: auto; height: auto; margin: 0; border-radius: 0; box-shadow: none; overflow: hidden; } .dfold-th img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.72); transition: transform 1.2s var(--ease-out); } .dfold:hover .dfold-th img { transform: scale(1.05); } .dfold::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(11, 8, 20, .92), rgba(11, 8, 20, .2) 62%, transparent); } .dfold-t { display: grid; gap: 2px; padding: 16px 64px 16px 18px; } .dfold-t b { font: 600 16px/1.3 var(--font-ui); color: #fff; } .dfold-t small { font-size: var(--fs-sm); color: rgba(236, 230, 250, .78); } .dfold-a { position: absolute; right: 16px; bottom: 16px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: transform .4s var(--spring); } .dfold:hover .dfold-a { transform: translateX(3px); } .dfold-a svg { width: 18px; height: 18px; } /* виджет шапки со словами (а не числом) — шрифт интерфейса */ .hw-t.txt b { font: 600 15px/1.25 var(--font-ui); letter-spacing: 0; } :root[data-faction="elyos"] .dfold { background: #DCE2F8; } :root[data-faction="elyos"] .dfold-th img { filter: saturate(.9) brightness(1.05); opacity: .8; } :root[data-faction="elyos"] .dfold::after { background: linear-gradient(to top, rgba(238, 241, 250, .96), rgba(238, 241, 250, .3) 62%, transparent); } :root[data-faction="elyos"] .dfold-t b { color: var(--ink); } :root[data-faction="elyos"] .dfold-t small { color: var(--ink-2); } :root[data-faction="elyos"] .dfold-a { color: #fff; background: #3F63E6; box-shadow: 0 6px 16px -6px rgba(63, 99, 230, .6); } /* элийцы (реф. 4, «карточки кейсов»): кадр сверху без вуали, подпись — на светлом стекле под ним (а не серой плашкой поверх арта, которая гасила картинку) */ :root[data-faction="elyos"] .dcard { justify-content: flex-start; background: rgba(255, 255, 255, .88); } :root[data-faction="elyos"] .dcard .cover { position: relative; inset: auto; z-index: 0; flex: 1 1 auto; min-height: 0; } :root[data-faction="elyos"] .dcard .cover::after { background: linear-gradient(180deg, transparent 70%, rgba(27, 30, 58, .12)); } :root[data-faction="elyos"] .dcard .cover img { filter: brightness(1.05) saturate(1); } :root[data-faction="elyos"] .dcard .cover:is([data-art="cave_throne"], [data-art="tower_of_aion_night"]) img { filter: brightness(1.3) saturate(1); } :root[data-faction="elyos"] .dcard .dfoot-glass { flex: none; margin: 0; max-height: none; padding: 11px 16px 13px; border-radius: 0; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 #fff; } :root[data-faction="elyos"] .dcard .dname { color: #1B1E3A; } :root[data-faction="elyos"] .dcard.locked .cover::after { background: rgba(238, 241, 250, .3); } /* телефон: лента с точками под ней и строкой «Доступно сейчас · N — Все N →» */ .dcar-h, .dcar-dots { display: none; } @media (max-width: 760px) { .dcar-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-weight: 600; font-size: var(--fs-ui); } .dcar-dots { display: flex; justify-content: center; gap: 6px; margin: 4px 0 16px; } .dcar-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--ink-4); transition: width .25s var(--ease-out), background .25s; } .dcar-dots i.on { width: 18px; background: var(--accent-hi); } .dbento.all { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; margin: 0 0 16px; padding: 0; -webkit-mask-image: none; mask-image: none; } .dbento.all > * { height: 200px; } .dbento.all + .dcar-dots { display: none; } } /* ---------- База ---------- */ /* Поиск базы — в слоте верхней строки (на месте Ctrl+K, та же ширина); кнопка палитры на этом экране скрыта. На телефоне поле — в разделе, а в верхней строке остаётся обычная кнопка поиска (без дыры слева). */ .tb-slot { display: contents; } html.db-top .topbar > button.search { display: none; } :root[data-view="db"] .topbar .search.dbq-top, :root[data-view="db"]:not(.db-top) .topbar .search { visibility: visible; pointer-events: auto; } .dbq-top { width: min(560px, 100%); cursor: text; padding-right: 10px; } .dbq-top input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; outline: none; font: 500 var(--fs-ui) var(--font-ui); color: var(--ink); } .dbq-top input::placeholder { color: var(--ink-3); } .dbq-top:focus-within { box-shadow: inset 0 0 0 1px var(--accent), inset 0 1px 0 var(--spec-c), 0 0 0 4px var(--accent-soft); } .dbq-top .kbd { flex: none; } .db-ex { margin: 0 0 12px; gap: 10px; } /* одна строка управления: разделы — вкладками с подчёркиванием, источник — выбором справа */ .db-filters { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 18px; box-shadow: inset 0 -1px 0 var(--edge); } .catrow { flex: 1 1 520px; min-width: 0; gap: 2px; padding: 0; scroll-padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .catrow button, .catrow button:hover, .catrow button.on { position: relative; min-height: 46px; padding: 0 12px; border-radius: 0; background: none; box-shadow: none; color: var(--ink-2); } .catrow button:hover { color: var(--ink); } .catrow button.on { color: var(--ink); } .catrow button.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .catrow button.on span { color: var(--accent-hi); } .catrow button:last-child { margin-right: 28px; } /* элийцы (реф. 6): разделы — «таблетки», активная — градиент оранжевый → розовый → фиолетовый; источник — тихий выбор */ :root[data-faction="elyos"] .db-filters { box-shadow: none; align-items: center; } :root[data-faction="elyos"] .catrow { gap: 8px; padding: 2px; } :root[data-faction="elyos"] .catrow button { min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); } :root[data-faction="elyos"] .catrow button.on { color: #fff; background: linear-gradient(90deg, #C2531F, #B8326F 50%, #5B3FD0); box-shadow: 0 8px 22px -8px rgba(210, 76, 140, .55); } :root[data-faction="elyos"] .catrow button.on::after { display: none; } :root[data-faction="elyos"] .catrow button.on span { color: rgba(255, 255, 255, .85); } .db-src { flex: none; display: flex; align-items: center; gap: 8px; padding-bottom: 6px; font-size: var(--fs-sm); color: var(--ink-3); } :root[data-faction="elyos"] .db-src { padding-bottom: 0; } .db-src select { height: 36px; min-width: 150px; border-radius: 999px; font: 600 var(--fs-sm) var(--font-ui); } /* карточки: иконка — в стеклянной рамке со свечением грейда; роли — цветом; числа описания — плашками */ .dbcard .itemcell .frame { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 18px color-mix(in srgb, var(--gc) 35%, transparent); } :root[data-faction="elyos"] .dbcard .itemcell .frame { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--gc) 55%, white), 0 6px 18px -6px color-mix(in oklab, var(--gc) 50%, transparent); } .chip.role.r-main { color: var(--accent-hi); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } .chip.role.r-inst { color: #5FE0D6; background: rgba(60, 200, 192, .14); box-shadow: inset 0 0 0 1px rgba(60, 200, 192, .3); } .chip.role.r-buff { color: var(--done-ink); background: color-mix(in srgb, var(--done) 14%, transparent); } :root[data-faction="elyos"] .chip.role.r-inst { color: #0F6E73; background: rgba(60, 200, 192, .16); } .dn { padding: 0 5px; border-radius: 6px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--well-2); white-space: nowrap; } /* элийцы: карточки справочника — ровная белая печать, перелив — только в просветах */ :root[data-faction="elyos"] .dbcard { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(20px) saturate(110%); backdrop-filter: blur(20px) saturate(110%); } /* подсказка — не выше 520 px, с прокруткой; сбоку от карточки, не на поиске */ .gtip { max-height: min(70vh, 520px); } @media (max-width: 760px) { .catrow { flex-basis: 100%; } .db-src { margin-left: auto; } } /* ---------- Руководство ---------- */ /* Один H1 — название главы (Unbounded 600, 40 px); «Руководство · глава 3 из 13 ▾» — надзаголовок 13 px, он же открывает список глав поповером (страница не прыгает) */ .g-head h1 { font: 600 40px/1.08 var(--font-display); letter-spacing: -.02em; } .gpick { position: relative; justify-self: start; } .g-eyebrow { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 0; border-radius: 999px; cursor: pointer; font: 600 13px/1 var(--font-ui); color: var(--accent-hi); } .g-eyebrow::-webkit-details-marker { display: none; } .g-eyebrow:hover { color: var(--ink); } .g-eyebrow svg { width: 14px; height: 14px; transition: transform .3s var(--spring-soft); } .gpick[open] .g-eyebrow svg { transform: rotate(180deg); } .gpick > .gnav-ml { position: absolute; z-index: 40; top: calc(100% + 8px); left: -10px; width: min(680px, calc(100vw - 32px)); padding: 10px; border-radius: 20px; background: var(--glass-pop); -webkit-backdrop-filter: blur(24px) saturate(var(--sat)); backdrop-filter: blur(24px) saturate(var(--sat)); box-shadow: 0 0 0 1px var(--edge-2), inset 0 1px 0 var(--spec-c), var(--shadow-pop); animation: palin .32s var(--spring) both; } .guide .gread .lring { --size: 40px; --th: 5px; } /* сноски не раздвигают строки (строка со сноской была выше соседних) */ .doc sup { line-height: 0; font-size: .68em; vertical-align: .55em; } @media (max-width: 760px) { .g-head h1 { font-size: 26px; } .g-head .phead-w { display: flex; } .gpick > .gnav-ml { left: 0; width: calc(100vw - 32px); grid-template-columns: minmax(0, 1fr); max-height: 60vh; } } /* ---------- Настройки ---------- */ /* Превью темы — мини-главная стороны: кадр героя, меню с активной «таблеткой» её цвета, стеклянная плашка с числом */ .tp { overflow: hidden; } .tp.a { background: linear-gradient(90deg, rgba(11, 8, 20, .2), transparent 40%), url('/img/art/w/hero_asmodian-800.jpg') 72% 30% / cover, #0B0814; background-blend-mode: normal; } .tp.a::before { display: none; } .tp.e { background: url('/img/art/w/class-ranger-720.webp') 108% 0 / auto 150% no-repeat, linear-gradient(180deg, rgba(238, 241, 250, .25), rgba(238, 241, 250, .55)), url('/img/art/w/flight_over_sea-800.webp') 50% 40% / cover, #EEF1FA; } .tp-menu { position: absolute; left: 8px; top: 8px; width: 26%; display: grid; align-content: start; gap: 5px; padding: 8px 6px; border-radius: 10px; } .tp-menu i { display: block; height: 9px; border-radius: 5px; } .tp.a .tp-menu { background: rgba(20, 14, 36, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .tp.a .tp-menu i { background: rgba(255, 255, 255, .14); } .tp.a .tp-menu i.on { background: linear-gradient(180deg, #8456F0, #6A3BDF); box-shadow: 0 0 10px rgba(139, 92, 246, .7); } .tp.e .tp-menu { background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 6px 14px -8px rgba(60, 70, 140, .4); } .tp.e .tp-menu i { background: rgba(91, 96, 160, .16); } .tp.e .tp-menu i.on { background: linear-gradient(135deg, #5250CC, #3F63E6 55%, #2F8FBF); box-shadow: 0 4px 10px -2px rgba(79, 123, 255, .5); } .tp-kpi { position: absolute; left: 36%; bottom: 10px; display: grid; gap: 1px; padding: 6px 10px; border-radius: 10px; line-height: 1.1; } .tp-kpi small { font-size: 9px; } .tp-kpi b { font: 600 15px/1.1 var(--font-num); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .tp.a .tp-kpi { color: #F3F0FA; background: rgba(20, 14, 36, .66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .tp.a .tp-kpi small { color: #BDB5D3; } .tp.e .tp-kpi { color: #1B1E3A; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px #fff, 0 6px 14px -8px rgba(60, 70, 140, .4); } .tp.e .tp-kpi small { color: #5F6585; } .tcard.auto .tp.a .tp-kpi, .tcard.auto .tp.a .tp-menu { display: none; } .tcard.auto .tp.e .tp-kpi { left: 30%; } /* отметка выбора у элийцев — лазурь с белой обводкой */ :root[data-faction="elyos"] .tcard[aria-checked="true"] .tc-ring { background: #4F7BFF; box-shadow: 0 0 0 2px #fff, 0 4px 12px -2px rgba(79, 123, 255, .6); } /* 44 переключателя «на главной» — спокойные: дорожка нейтральная, ручка акцентом; полная заливка — только у «все» */ .trow[aria-checked="true"] .sw-vis, :root[data-faction="elyos"] .trow[aria-checked="true"] .sw-vis { background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2); } .trow[aria-checked="true"] .sw-vis::after { background: var(--accent-hi); box-shadow: 0 0 8px -1px var(--accent-glow); } :root[data-faction="elyos"] .trow[aria-checked="true"] .sw-vis::after { background: #3F63E6; box-shadow: 0 1px 3px rgba(40, 50, 110, .35); } /* пароль — свёрнут в строку «Пароль · Сменить», поля — по нажатию */ .pw > summary { list-style: none; cursor: pointer; } .pw > summary::-webkit-details-marker { display: none; } .pw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; } .pw-row > span:first-child { display: grid; gap: 2px; font-weight: 500; } .pw-row small { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 400; } .pw[open] .pw-row .btn { visibility: hidden; } .pw .fields { margin-top: 8px; } /* шапки разделов — одна высота: H1 стоит на одной линии на всех экранах */ .phead { min-height: 104px; } @media (max-width: 760px) { .phead { min-height: 0; } } /* ---------- Оверлей поверх игры ---------- */ /* Плотнее и без размытия: на светлой сцене (море, небо) мелкий текст не теряется; тень букв — для читаемости поверх игры */ .ov { background: rgba(16, 11, 28, .82); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); --ov-ok: #5EE0A0; } .ov small.u { color: var(--ov-3); } /* иконки — одним видом: игровая картинка 18 px в тонком светлом кольце, запасная пиктограмма — в той же рамке */ .ov-r .g, .ov-r .g.lic { width: 18px; height: 18px; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); } .ov-r .g.lic { color: var(--ov-t); } /* состояние строки справа: «2/5», пустой кружок или галочка; сделанное приглушено, без зачёркивания */ .ov-st { margin-left: auto; display: inline-flex; align-items: center; color: var(--ov-2); font-variant-numeric: tabular-nums; } .ov-st .num { margin: 0; } .ov-st svg { width: 14px; height: 14px; color: var(--ov-ok); } .ov-o { display: block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ov-3); } .ov-r.ok .g, .ov-r.ok .nm { opacity: .45; } /* элийцы: не плоская серая плашка, а светлое стекло со светом сверху; вторичное — #5A6080 */ .ov.elyos { text-shadow: none; background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(228, 233, 255, .9)); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, .85), 0 12px 32px rgba(40, 50, 110, .28); --ov-3: #5A6080; --ov-ok: #12663F; } .ov.elyos .ov-r .g { background: #1F2560; box-shadow: 0 0 0 1px rgba(91, 96, 160, .3); } .ov.elyos .ov-r .g.lic { color: #fff; } @media (max-width: 760px) { /* превью темы 88×56: только кадр и число — меню и подпись не помещаются */ .tp-menu, .tp-kpi small { display: none; } .tp-kpi, .tcard.auto .tp.e .tp-kpi { left: auto; right: 4px; bottom: 4px; padding: 2px 6px; border-radius: 6px; } .tp-kpi b { font-size: 11px; } .tcard.auto .tp.e .tp-kpi { display: none; } } /* ===== Большие экраны: контент растёт вместе с окном, а не упирается в 1440 px ===== */ @media (min-width: 1700px) { main { max-width: min(1960px, calc(100vw - 264px)); padding-inline: 40px; } } @media (min-width: 2200px) { main { max-width: 2240px; padding-inline: 48px; } /* левая колонка главной: задачи и график — на всю ширину, «Быстрые действия» и «План» — рядом (обёртки .o — display: contents, поэтому колонку задаём самим карточкам) */ .home-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); } .home-l > .o > :is(.quick, .plan) { grid-column: auto; min-width: 0; } .home-l .quick { display: grid; grid-template-rows: auto 1fr; } .grid.home .home-l .quick .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } } @media (min-width: 2800px) { main { max-width: 2600px; } } /* «Руководство» на широком окне: колонка чтения остаётся 1100 px (≈ 70 знаков), но статья с оглавлением и шапка стоят по центру, а не прижаты влево с пустой половиной экрана */ @media (min-width: 1700px) { main > .g-head, main > .guide { max-width: 1100px; margin-inline: auto; } } /* ===================================================================================================================== Круг доводки 4 (03.10) — по оценкам критиков. Правила ниже перекрывают базовые выше по порядку каскада. ===================================================================================================================== */ /* ---------- Каркас: стекло асмодиан со светом ---------- */ /* Матовая заливка со светлым верхним левым углом и яркой кромкой (реф. 1): плоские тёмные карточки на почти чёрном фоне не показывали стекла. Ещё один слой тумана — под колонкой содержимого, не только по углам. */ :root:not([data-faction="elyos"]) { --spec-c: rgba(255, 255, 255, .12); } :root:not([data-faction="elyos"]) :is(.card, .kpi) { background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .022) 62%); } :root:not([data-faction="elyos"]) .card.quiet { background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018) 62%); } :root:not([data-faction="elyos"]) .tile { background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 70%); } :root:not([data-faction="elyos"]) .tile:hover { background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035) 70%); } .atrea::after { background: radial-gradient(55% 45% at 58% 42%, rgba(124, 58, 237, .13), transparent 70%), radial-gradient(62% 66% at 14% 8%, rgba(124, 58, 237, .20), transparent 65%), radial-gradient(60% 50% at 88% 104%, rgba(124, 58, 237, .16), transparent 70%), radial-gradient(45% 42% at 6% 62%, rgba(168, 85, 247, .09), transparent 70%), radial-gradient(50% 55% at 94% 46%, rgba(168, 85, 247, .07), transparent 70%); } /* ---------- Шапки разделов: одна короткая строка под H1 ---------- */ .phead p { max-width: 62ch; margin-top: 6px; } .phead-t { gap: 0; } /* «Билды»: фильтр PvE / PvP / Гибрид — своей строкой под заголовком, по левому краю; кнопки — справа на уровне H1 */ .phead:not(.g-head) { align-items: center; } .ph-filter { margin: -8px 0 22px; } @media (max-width: 760px) { .ph-filter { margin: -2px 0 14px; } .ph-filter .seg { width: 100%; } .ph-filter .seg button { flex: 1; } } /* ---------- Меню: внизу — состояние данных вместо второй карточки с портретом ---------- */ .side-data { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 14px; border-radius: 18px; min-height: 96px; } .side-data .sd-ring { --size: 40px; --th: 4px; } .side-data .sd-ring .lr-c b { font: 700 10px/1 var(--font-ui); letter-spacing: .04em; color: var(--ink-2); } .side-data .sd-t { display: grid; gap: 2px; min-width: 0; line-height: 1.25; } .side-data .sd-t b { font: 600 var(--fs-sm) var(--font-ui); color: var(--ink); } .side-data .sd-t small { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-data .sd-btn { grid-column: 1 / -1; justify-content: center; width: 100%; } .side-data .sd-btn svg { width: 15px; height: 15px; } .side-data .sd-btn.busy svg { animation: spinr 1s linear infinite; } .side-data > .sd-t:first-child { grid-column: 1 / -1; } /* кнопка обновления в верхней строке нужна там, где меню свёрнуто (виджета не видно) */ @media (min-width: 1101px) { .topbar > [data-act="sync"] { display: none; } } /* ---------- Вход ---------- */ /* (стили формы — factions.css: Forum 28 px, карточка 360 px, плавающие подписи, свечение кнопки) */ /* ---------- Мини-график: прорисовка шторкой ---------- */ .spark.sweep { clip-path: inset(0 100% 0 0); } .spark.sweep.drawn { animation: spreveal .9s var(--ease-out) forwards; } .spark.sweep.static { clip-path: none; animation: none; } @keyframes spreveal { to { clip-path: inset(0 0 0 0); } } .spark-w .sp-end { opacity: 0; animation: chfade .3s var(--ease-out) .75s forwards; } .spark-w:has(.spark.static) .sp-end { opacity: 1; animation: none; } /* Свечение точки «сейчас» — HTML-элемент поверх графика, анимируются только transform и opacity (композитно) */ .ch-halo-h { position: absolute; z-index: 1; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none; background: var(--chart-a); opacity: 0; animation: halo2 2.4s var(--ease-io) 1.1s infinite; will-change: transform, opacity; } @keyframes halo2 { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(1.8); opacity: 0; } } .chart svg.static ~ .ch-halo-h { animation-delay: 0s; } :root.idle .ch-halo-h { animation-play-state: paused; } .ch-note { position: absolute; left: 56px; top: 4px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); color: var(--ink-2); background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge); pointer-events: none; } .seg button:disabled { opacity: .4; cursor: not-allowed; } .seg button:disabled:hover { color: var(--ink-2); } /* элийцы (реф. 5): заливка бирюза → индиго сверху вниз, линия — градиентом по x, светлая кромка поверх */ :root[data-faction="elyos"] .ch-s0 { stop-color: #3CC8C0; stop-opacity: .38; } :root[data-faction="elyos"] .ch-s1 { stop-color: #5B5BD6; stop-opacity: .2; } :root[data-faction="elyos"] .ch-s2 { stop-color: #5B5BD6; stop-opacity: .06; } :root[data-faction="elyos"] .ch-hi { opacity: .9; stroke: rgba(255, 255, 255, .9); transform: translateY(-1.5px); } :root[data-faction="elyos"] .ch-hi { animation: chfade2 .8s var(--ease-out) 1s both; } @keyframes chfade2 { from { opacity: 0; } to { opacity: .9; } } :root[data-faction="elyos"] svg.static .ch-hi { animation: none; opacity: .9; } /* ---------- Главная: герой ---------- */ /* Высота 236 px: «Следующий шаг» — строкой в герое, на первом экране. */ .hero { min-height: 236px; padding: 32px 40px; } .hero h2.h-display { font-size: 44px; } .hero-body { gap: 12px; max-width: 760px; } .hero-step { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 720px; padding: 10px 12px 10px 10px; border-radius: 18px; background: rgba(14, 9, 28, .52); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } .hero-step .nx-pair { display: flex; align-items: center; gap: 6px; flex: none; } .hero-step .nx-ic { width: 44px; height: 44px; } .hero-step .nx-arrow svg { width: 16px; height: 16px; color: rgba(240, 235, 255, .7); } .hero-step .hs-t { flex: 1 1 220px; display: grid; gap: 2px; min-width: 0; } .hero-step .hs-t small { font-size: var(--fs-xs); color: rgba(225, 215, 255, .72); } .hero-step .hs-t b { font: 600 var(--fs-body)/1.3 var(--font-ui); color: #fff; text-wrap: balance; } .hero-step .hs-a { display: flex; align-items: center; gap: 8px; flex: none; } .hero-step .hs-a .btn.ghost { color: rgba(240, 235, 255, .78); } .why-pop { position: relative; } .why-pop > summary { list-style: none; width: 36px; height: 36px; font: 700 15px/1 var(--font-ui); color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); cursor: pointer; } .why-pop > summary::-webkit-details-marker { display: none; } .why-pop[open] > summary { background: rgba(139, 92, 246, .35); } .why-b { position: absolute; z-index: 20; left: 50%; top: calc(100% + 10px); translate: -50% 0; width: min(380px, 80vw); padding: 14px 16px; border-radius: 16px; background: var(--glass-pop); box-shadow: 0 0 0 1px var(--edge-2), var(--shadow-pop); color: var(--ink); font-size: var(--fs-sm); line-height: 1.45; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: popin .22s var(--ease-out) both; } @keyframes popin { from { opacity: 0; transform: translateY(-4px) scale(.98); } } .why-b p { margin: 0; color: var(--ink-2); } .why-cmp { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); align-items: center; gap: 8px; } .why-cmp > span { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--well-2); } .why-cmp > span.to { box-shadow: inset 0 0 0 1px var(--accent-hi); background: var(--accent-soft); } .why-cmp em { font-size: var(--fs-xs); color: var(--ink-3); } .why-cmp b { font: 600 17px/1.1 var(--font-num); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); } .why-cmp > span.to b { color: var(--ok); } .why-cmp > svg { width: 18px; height: 18px; color: var(--ink-3); } .why-cond { margin-top: 10px !important; font-size: var(--fs-xs); color: var(--ink-3) !important; } /* текст героя не ложится на волосы даэвы: плотнее затемнение слева (до 52 %) */ :root:not([data-faction="elyos"]) .hero::after { background: linear-gradient(90deg, rgba(12, 8, 24, .9) 0 40%, rgba(12, 8, 24, .5) 52%, transparent 62%); } .hero-sub { max-width: 36ch; } /* асмодиане: кадр выходит за верх только короной (−28 px), справа и снизу растворяется — без ровной вертикали по кромке */ @media (min-width: 761px) { .hero.a .hero-scene { top: -28px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent 0%, #000 32%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 80%, transparent); } } /* элийцы: город фона спокойнее, за фигурой — ореол, сфера уходит за текст влево вниз, фигура со своей тенью */ :root[data-faction="elyos"] .hero-art.art-window img { opacity: .38; filter: saturate(.8) blur(1.5px); object-position: 62% 30%; mix-blend-mode: normal; } :root[data-faction="elyos"] .hero::after { background: radial-gradient(38% 60% at 78% 45%, rgba(168, 216, 255, .55), transparent 70%), linear-gradient(90deg, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, .55) 45%, transparent 66%); } :root[data-faction="elyos"] .hero .glass-orb { left: 4%; right: auto; top: auto; bottom: -30px; opacity: .35; } :root[data-faction="elyos"] .hero-char { filter: drop-shadow(0 30px 40px rgba(60, 70, 160, .25)) drop-shadow(0 0 1px rgba(255, 255, 255, .9)) saturate(.85) hue-rotate(-14deg); } :root[data-faction="elyos"] .wings .feather { stroke: rgba(91, 91, 214, .55); } :root[data-faction="elyos"] .hero-step { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px #fff, 0 10px 28px -14px rgba(60, 70, 140, .4); } :root[data-faction="elyos"] .hero-step .hs-t small { color: var(--ink-3); } :root[data-faction="elyos"] .hero-step .hs-t b { color: var(--ink); } :root[data-faction="elyos"] .hero-step .nx-arrow svg { color: var(--ink-3); } :root[data-faction="elyos"] .hero-step .hs-a .btn.ghost { color: var(--ink-2); } :root[data-faction="elyos"] .why-pop > summary { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--edge-2); } :root[data-faction="elyos"] .why-pop[open] > summary { background: var(--accent-soft); } @media (max-width: 760px) { .hero { padding: 20px 18px; } .hero h2.h-display { font-size: 30px; } .hero-step { gap: 10px; padding: 10px; } .hero-step .hs-t { flex-basis: calc(100% - 120px); } .hero-step .hs-a { flex: 1 1 100%; } .hero-step .hs-a .btn.primary { flex: 1; justify-content: center; } .why-b { left: auto; right: 0; translate: none; } :root[data-faction="elyos"] .hero-body { max-width: 60%; } :root[data-faction="elyos"] .hero-body:has(.hero-step) { max-width: none; } :root[data-faction="elyos"] .hero-fig { right: -28px; } } /* ---------- Главная: показатели ---------- */ /* «Задачи дня»: сегменты видны (а не .08), справа — иконка ближайшей задачи 28 px */ .kpi .segbar, :root[data-faction="elyos"] .kpi .segbar { height: 6px; gap: 4px; } .kpi .segbar i, :root[data-faction="elyos"] .kpi .segbar i { border-radius: 3px; } :root:not([data-faction="elyos"]) .kpi .segbar i:not(.on) { background: rgba(255, 255, 255, .16); } .kpi-v .kpi-nx { margin-left: auto; align-self: center; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none; } .kpi-v .kpi-nx img { width: 100%; height: 100%; object-fit: cover; } .kpi-v .kpi-nx.game { background: #1A1230; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } .kpi-v .kpi-nx.lic { color: var(--accent-hi); background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge-2); } .kpi-v .kpi-nx .picto { width: 15px; height: 15px; } .kpi-tasks .kpi-d b { color: var(--ink); font-weight: 600; } /* «Уровень»: кристалл в центре кольца у элийцев */ .kpi-ring .lring .crystal { margin-top: -2px; } /* ---------- Главная: плитки задач — состояние на каждой ---------- */ .slot .cnt { top: 7px; right: 8px; padding: 1px 7px; border-radius: 999px; font: 700 11px/1.5 var(--font-ui); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-hi) 40%, transparent); } .slot .cnt.tbd { font-weight: 600; color: var(--ink-3); background: none; box-shadow: inset 0 0 0 1px var(--edge-2); } .slot.locked .cnt { display: none; } :root[data-faction="elyos"] .slot .cnt { color: #3152D4; } :root[data-faction="elyos"] .slot .cnt.tbd { color: var(--ink-3); } /* ---------- Главная: энергия — поле, «/ 560» внутри, кнопка той же высоты в одну строку ---------- */ .energy-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .energy-in .ein { position: relative; min-width: 0; } .energy-in input { width: 100%; height: 44px; padding: 0 64px 0 14px; text-align: left; } .energy-in .of { position: absolute; right: 14px; top: 50%; translate: 0 -50%; pointer-events: none; font-size: var(--fs-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; } .energy-in .btn { margin: 0; min-height: 44px; height: 44px; padding: 0 18px; } .energy-note { margin: 10px 0 0; } :root[data-faction="elyos"] .card.ink .energy-note { font-size: 13px; color: #D3D6F2; } /* ---------- Главная: большой график — место под плашку-подсказку ---------- */ .chart-card #mainChart { position: relative; } /* ---------- Элийцы: стекло, блик, хром, линза, значки ---------- */ /* Блик за курсором — под содержимым и мягким светом (soft-light): поверх текста белый .6 выбеливал «575» до 2,4:1 */ :root[data-faction="elyos"] { --spot: rgba(255, 255, 255, .22); --glass: rgba(255, 255, 255, .54); --sat: 160%; } :root[data-faction="elyos"] :is(.card, .tile, .kpi, .banner, .dcard, .tplcard)::after { z-index: -1; mix-blend-mode: soft-light; } :root[data-faction="elyos"] .card { background: rgba(255, 255, 255, .54); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } /* сфера под центром содержимого: под стеклом появляется переливание (перламутр реф. 5) */ :root[data-faction="elyos"] .atrea::before { content: ''; position: absolute; left: 45%; top: 38vh; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #C7C2FF, rgba(199, 194, 255, .4) 50%, transparent 70%); filter: blur(80px); opacity: .55; animation: orbmid 40s var(--ease-io) infinite alternate; will-change: transform; } @keyframes orbmid { to { transform: translate3d(12vw, 14vh, 0) scale(1.12); } } /* хром: широкий блик посередине букв (серебро, а не «синие буквы с серой полосой»), 600, крупнее */ :root[data-faction="elyos"] :is(.chrome, .phead h1) { background: linear-gradient(180deg, #1B1E3A 0%, #454C8C 36%, #F4F6FF 50%, #8C93D8 57%, #2B3070 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .85)) drop-shadow(0 10px 22px rgba(91, 91, 214, .16)); } :root[data-faction="elyos"] .phead:not(.g-head) h1 { font: 600 clamp(40px, 3.4vw, 52px)/1.04 var(--font-display); } /* приветствие (300) — без хрома: сплошной тёмный, имя — бирюза → индиго */ :root[data-faction="elyos"] .greet h1.chrome { background: none; color: #1B1E3A; filter: none; -webkit-background-clip: border-box; background-clip: border-box; } :root[data-faction="elyos"] .greet h1.chrome em { background: linear-gradient(100deg, #1F9E97, #3F63E6 55%, #5B5BD6); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-faction="elyos"] .brand-lens { background: linear-gradient(145deg, #5B5BD6 0%, #4F7BFF 55%, #3CC8C0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 20px -8px rgba(79, 123, 255, .55); } /* значки задач — глянцевые «значки приложений» (реф. 5): чёрный фон картинки уходит в градиент, золото остаётся */ :root[data-faction="elyos"] :is(.slot .icon, .todo .ti, .trow .icon, .kpi-nx).game { background: linear-gradient(150deg, #7C8BFF 0%, #4F7BFF 50%, #3CC8C0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1.5px #fff, 0 6px 16px -6px rgba(79, 123, 255, .45); } :root[data-faction="elyos"] :is(.slot .icon, .todo .ti, .trow .icon, .kpi-nx).game img { mix-blend-mode: screen; } :root[data-faction="elyos"] :is(.slot .icon, .todo .ti, .trow .icon).game::after { box-shadow: none; } /* кадры артов (миниатюры подземелий) — не «экран»: у них нет чёрного фона */ :root[data-faction="elyos"] :is(.slot .icon, .todo .ti, .trow .icon, .kpi-nx).game img[src*="/art/t/"] { mix-blend-mode: normal; } /* ---------- Кристалл ---------- */ .crystal { display: inline-grid; place-items: center; flex: none; perspective: 400px; } .crystal svg { width: var(--cs); height: auto; transform-origin: 50% 55%; filter: drop-shadow(0 12px 24px rgba(91, 91, 214, .25)); animation: crys 12s var(--ease-io) infinite alternate; } @keyframes crys { from { transform: rotateY(-28deg) rotateZ(-3deg); } to { transform: rotateY(28deg) rotateZ(3deg); } } /* асмодиане: тот же кристалл — фиолетовое стекло со свечением, как куб в реф. 1 */ :root:not([data-faction="elyos"]) .crystal svg { filter: hue-rotate(28deg) saturate(1.5) brightness(.82) drop-shadow(0 0 18px rgba(139, 92, 246, .6)); } .empty-card > .crystal, .empty-row > .crystal { align-self: center; } .kpi-ring .lring .crystal svg { filter: drop-shadow(0 4px 8px rgba(91, 91, 214, .3)); } /* ---------- Персонаж ---------- */ /* Шапка — имя и показатели, без портрета: стекло, крылья стороны приглушены */ .char-head { grid-template-columns: minmax(0, 1fr); } :root:not([data-faction="elyos"]) .char-banner { background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .022) 62%); } :root:not([data-faction="elyos"]) .char-banner .banner-art img { filter: saturate(.7) brightness(.8); opacity: .25; } :root:not([data-faction="elyos"]) .char-banner::before { background: linear-gradient(90deg, rgba(11, 8, 20, .55) 20%, transparent 70%); } .lv-chip { font-variant-numeric: tabular-nums; } /* плашка «Боевая мощь»: число и дельта в столбик, мини-график 72×28 справа по центру */ .char-kpis .ck .ck-v { display: grid; gap: 2px; } .char-kpis .ck .ck-v .ck-d { font: 600 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: 0; color: var(--ok); font-style: normal; } .char-kpis .ck.has-aside { padding-right: 12px; } .char-kpis .ck.has-aside .ck-t { flex: 1; } .char-kpis .ck .ck-spark { position: static; flex: none; width: 72px; height: 28px; align-self: center; } .char-kpis .ck .ck-spark .spark { width: 72px; height: 28px; } @media (max-width: 1100px) { .char-kpis .ck .ck-spark { display: block; } } @media (max-width: 760px) { .char-kpis .ck .ck-spark { display: none; } .char-head { grid-template-columns: minmax(0, 1fr); } } /* витрина «Экипировки» — арт класса (вырезка) с мягкой маской, свет за головой; без растянутого рендера NC */ .doll .por.por-art { background: radial-gradient(70% 55% at 50% 30%, rgba(139, 92, 246, .32), transparent 72%), linear-gradient(180deg, #160F2A, #0C0916); } .doll .por.por-art .cls-art { position: absolute; inset: 0; left: 0; bottom: auto; width: 100%; height: 100%; max-width: none; translate: none; object-fit: cover; object-position: 26% 8%; transform: scale(1.5); transform-origin: 26% 14%; -webkit-mask-image: radial-gradient(70% 75% at 50% 40%, #000 55%, transparent); mask-image: radial-gradient(70% 75% at 50% 40%, #000 55%, transparent); } :root:not([data-faction="elyos"]) .doll .por.por-art .cls-art { filter: saturate(.8) brightness(.92) drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); } :root[data-faction="elyos"] .doll .por.por-art { background: radial-gradient(70% 55% at 50% 30%, #6F7FE8 0%, #3B3F99 45%, #1E2260 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(79, 123, 255, .25), 0 24px 50px -20px rgba(40, 50, 120, .45); } :root[data-faction="elyos"] .doll .por.por-art .cls-art { filter: drop-shadow(0 16px 26px rgba(20, 24, 70, .45)); } @media (min-width: 761px) { :root[data-faction="elyos"] .doll .por.por-art { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); } } /* элийцы: ячейки снаряжения — подложка темнее белого, грейд — свечением внутри, зелёный темнее */ :root[data-faction="elyos"] .doll .itemcell:not(.empty) .frame { background: linear-gradient(160deg, #E4E8FA, #C9D0EE); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1.5px var(--gc), inset 0 -10px 18px -10px var(--gc); } :root[data-faction="elyos"] .doll .itemcell.g-rare { --gc: #2F9E5A !important; } /* подсказка вещи: полоса грейда 3 px со свечением вверх */ .gtip .th { position: relative; } .gtip .th::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--gc), transparent 80%); box-shadow: 0 -10px 30px -16px var(--gc); } /* «Божественные» и «от узлов»: ряды одной высоты, числа — табличные 600, ненулевые — акцентом */ .divine { grid-auto-rows: 1fr; } .divine b, .statrows.nodes b { font-weight: 600; font-variant-numeric: tabular-nums; } .divine > div:not(.zero) b, .statrows.nodes b { color: var(--accent-hi); } .statrows.nodes { grid-auto-rows: 1fr; } .statrows.nodes > div { align-items: center; } .statrows.nodes > div > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* элийцы: без серых плашек — строки с волосяным разделителем, значение — Unbounded 500 15 px */ :root[data-faction="elyos"] :is(.divine, .statrows.nodes) > div { background: none; border-radius: 0; box-shadow: inset 0 -1px 0 rgba(91, 91, 214, .10); } :root[data-faction="elyos"] :is(.divine, .statrows.nodes) b { font: 500 15px/1.2 var(--font-display); letter-spacing: -.01em; color: #1B1E3A; } :root[data-faction="elyos"] .divine > div:not(.zero) b, :root[data-faction="elyos"] .statrows.nodes b { color: #3F57D9; } :root[data-faction="elyos"] .board .b-em { background: #E6E9FA; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(91, 91, 214, .3); } /* «Гнёзда стигм»: четыре восьмиугольных гнезда 48 px — стоит, открыто и пусто, закрыто до N ур. */ .gsocks { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .gsock { position: relative; width: 48px; height: 48px; display: grid; place-items: center; flex: none; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: var(--well-2); } .gsock img { width: 100%; height: 100%; object-fit: cover; } .gsock.on { background: linear-gradient(160deg, var(--accent-2), var(--btn-b)); padding: 2px; } .gsock.on img { clip-path: inherit; } .gsock.open { background: repeating-linear-gradient(45deg, var(--well-2) 0 4px, transparent 4px 8px), var(--accent-soft); } .gsock.locked { color: var(--ink-3); display: grid; gap: 0; align-content: center; } .gsock.locked .i-lock { width: 12px; height: 12px; } .gsock.locked small { font: 700 10px/1 var(--font-ui); font-variant-numeric: tabular-nums; } .gsock[data-tip] { cursor: help; } .gl-note { margin: 0 0 12px; } /* «История развития»: два главных изменения чипами (иконка, имя, дельта), остальное — по раскрытию строки */ .hrow-d > summary { list-style: none; cursor: pointer; } .hrow-d > summary::-webkit-details-marker { display: none; } .hrow-d[open] .h-more svg { transform: rotate(180deg); } .h-more { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); color: var(--accent-hi); white-space: nowrap; } .h-more svg { width: 14px; height: 14px; transition: transform .2s; } .h-ch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } .hchip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; height: 28px; padding: 0 10px 0 3px; border-radius: 999px; background: var(--well-2); box-shadow: inset 0 0 0 1px var(--edge); font-size: var(--fs-xs); color: var(--ink-2); min-width: 0; } .hchip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; } .hchip:not(:has(img)) { padding-left: 10px; } .hc-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hchip b { flex: none; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .h-all { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 12px clamp(0px, 30%, 360px); } .h-up { margin-left: 4px; font: 700 11px/1 var(--font-ui); color: var(--ok); font-style: normal; } @media (max-width: 760px) { .h-all { padding-left: 0; } .hchip { max-width: 100%; } } :root[data-faction="elyos"] .board .b-em img { filter: brightness(0) saturate(0) opacity(.72); } /* ---------- Прокачка ---------- */ /* «Поток эфира»: текущий уровень — флажок «вы здесь · 33» над линией с ножкой 2 px */ .fnode.flag { z-index: 3; translate: -50% calc(-100% - 2px); display: grid; justify-items: center; pointer-events: none; } .fl-flag { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; color: #fff; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 6px 18px -6px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .25); } .fl-flag small { font: 500 11px/1 var(--font-ui); opacity: .85; } .fl-flag b { font: 700 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; } .fl-stem { display: block; width: 2px; height: 18px; background: linear-gradient(var(--accent-hi), var(--accent)); } .fnode.flag.on-ms .fl-stem { height: 30px; } .fnode.cur-dot .d { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--accent), 0 0 14px 3px var(--accent-glow); } :root[data-faction="elyos"] .fl-flag { background: linear-gradient(135deg, #5250CC, #3F63E6 55%, #2F8FBF); } :root[data-faction="elyos"] .fl-stem { background: #4F7BFF; } :root[data-faction="elyos"] .fnode.cur-dot .d { box-shadow: 0 0 0 3px #4F7BFF, 0 4px 12px rgba(79, 123, 255, .5); } .flow.play .fnode.flag { animation: chfade .5s var(--ease-out) .9s both; } /* «План на N очков»: шаги — стеклянные карточки в ряд (иконка 48, «×3», прирост крупно, имя, «ур. a → b»), между ними — стрелки */ .stepper-wrap { margin: 0 0 14px; padding: 2px; overflow-x: auto; } .stepper { display: grid; grid-auto-flow: row; grid-template-columns: repeat(var(--n, 4), minmax(150px, 1fr)); gap: 14px; } .stp { position: relative; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "ic g" "ic t"; justify-items: start; align-items: center; column-gap: 12px; row-gap: 2px; min-height: 112px; padding: 16px 16px 16px 14px; border-radius: 18px; text-align: left; align-content: center; background: var(--well); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--spec-c); transition: transform .35s var(--spring-soft), box-shadow .25s; } .stp:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--edge-2), inset 0 1px 0 var(--spec-c); } .stp::before { display: none; } .stp + .stp::after { content: ''; position: absolute; left: -12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-top: 2px solid var(--ink-3); border-right: 2px solid var(--ink-3); transform: rotate(45deg); opacity: .6; } .stp-n { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; font-size: 10px; background: none; box-shadow: inset 0 0 0 1px var(--edge-2); } .stp-ic { grid-area: ic; width: 48px; height: 48px; margin: 0; border-radius: 14px; } .stp-ic img { border-radius: 14px; } .stp-g { grid-area: g; font: 600 22px/1.1 var(--font-num); letter-spacing: -.02em; } .stp small { grid-area: t; max-width: none; -webkit-line-clamp: 2; } .stp.cur { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--well); box-shadow: inset 0 0 0 1.5px var(--accent-hi), 0 0 30px -14px var(--accent-glow); } .stp.cur .stp-n { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: none; } :root[data-faction="elyos"] .stp { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px #fff, 0 8px 22px -14px rgba(60, 70, 140, .35); } :root[data-faction="elyos"] .stp-g { color: #1F9E97; } :root[data-faction="elyos"] .stp.cur { background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1.5px #4F7BFF, 0 10px 26px -12px rgba(79, 123, 255, .45); } @media (max-width: 760px) { .stepper { grid-template-columns: repeat(var(--n, 4), minmax(200px, 1fr)); } } /* Умения: кольцо уровня толще (3 px, дорожка .12) */ .skc .lring { --th: 3px; } :root:not([data-faction="elyos"]) .skc .lring::before { border-color: rgba(255, 255, 255, .12); } /* элийцы: умения — отдельные плитки, без волосяных линий таблицы; «+1» — приподняты и с кромкой */ :root[data-faction="elyos"] .skills-grid { gap: 12px; overflow: visible; } :root[data-faction="elyos"] .skc { margin: 0; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); } :root[data-faction="elyos"] .skc:hover { background: rgba(255, 255, 255, .75); } :root[data-faction="elyos"] .skc.can { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(79, 123, 255, .35), 0 10px 24px -14px rgba(79, 123, 255, .5); } /* ---------- Билды ---------- */ /* Арты карточек — к одной гамме ночи (реф. 2–3): синеватый тон и затемнение снизу. Общий класс и для подземелий. */ .art-grade { isolation: isolate; } :root:not([data-faction="elyos"]) .art-grade::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #5B2BB5; mix-blend-mode: color; opacity: .3; } :root:not([data-faction="elyos"]) .art-grade::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(20, 10, 40, .15), rgba(12, 8, 24, .9) 78%); } .art-grade > .chips, .art-grade > .tpl-cta { z-index: 2; } /* ровные нижние кромки карточек в ряду */ .tplgrid { align-items: stretch; } .tplcard { height: 100%; } .tplcard .tpl-body { flex: 1; display: flex; flex-direction: column; } .tplcard .tpl-foot { margin-top: auto; } @media (min-width: 761px) { .tplcard.feature .tpl-body { display: grid; } } /* «Взять за основу» — на всех карточках одинаково: на ПК — при наведении или фокусе, на сенсорных — всегда */ .tplcard .tpl-cta { position: absolute; right: 12px; top: 12px; } @media (hover: hover) and (pointer: fine) { .tplcard .tpl-cta { opacity: 0; transform: translateY(4px) scale(.96); transition: opacity .18s, transform .3s var(--spring-soft); } .tplcard:is(:hover, :focus-visible, :focus-within) .tpl-cta { opacity: 1; transform: none; } } @media (hover: none), (max-width: 760px) { .tplcard:not(.feature) .tpl-cta { display: inline-flex; } } /* элийцы: общие стигмы — серые и тише, отличающаяся — полный цвет с кольцом лазури */ :root[data-faction="elyos"] .sg.same img { filter: grayscale(.85) contrast(.9); opacity: .5; } :root[data-faction="elyos"] .sg.same { background: rgba(255, 255, 255, .5); } :root[data-faction="elyos"] .sg.diff { background: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #4F7BFF, 0 8px 18px -6px rgba(79, 123, 255, .55); } :root[data-faction="elyos"] .sg.diff img { filter: none; opacity: 1; } /* пустые «Ваши билды»: кристалл, заголовок, призраки будущих карточек */ .empty-builds { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 22px; } .empty-builds .eb-t b { font: 500 18px/1.2 var(--font-display); } .empty-builds .eb-t p { margin: 6px 0 12px; } .eb-ghosts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .eb-ghosts i { height: 120px; border-radius: 20px; border: 1.5px dashed rgba(139, 92, 246, .3); background: linear-gradient(180deg, var(--well-2), transparent); opacity: .5; } :root[data-faction="elyos"] .eb-ghosts i { border-color: rgba(91, 91, 214, .3); background: rgba(255, 255, 255, .4); opacity: .35; } @media (max-width: 760px) { .eb-ghosts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eb-ghosts i:nth-child(3) { display: none; } .eb-ghosts i { height: 84px; } } /* ---------- Подземелья ---------- */ :root:not([data-faction="elyos"]) .dcard.norun:not(.locked) .cover img { filter: saturate(.8) brightness(.85); } /* «Снежник спящего урагана» (ключ-арт с двумя героинями): в кадре — башня, без половин лиц по краям */ .dcard .cover[data-art="keyart_banner_wide"] img, .dcard .cover[data-art="keyart_heroines"] img { object-position: 50% 30%; transform: scale(1.35); } /* «+» записи забега — с мышью только при наведении или фокусе (7 одинаковых кнопок поверх артов шумели) */ @media (hover: hover) and (pointer: fine) { .dcard .dadd { opacity: 0; transform: scale(.9); transition: opacity .18s, transform .18s var(--ease-out); } .dcard:is(:hover, :focus-visible, :focus-within) .dadd { opacity: 1; transform: none; } } /* «Ещё N»: один размытый кадр и крупное «+24» */ .dfold { overflow: hidden; isolation: isolate; align-content: center; justify-items: center; text-align: center; } .dfold-th { position: absolute; inset: 0; left: 0; top: 0; display: block; z-index: -1; } .dfold-th img { width: 100%; height: 100%; object-fit: cover; filter: blur(10px) saturate(.6) brightness(.45); transform: scale(1.15); } :root[data-faction="elyos"] .dfold-th img { filter: blur(10px) saturate(.5) brightness(1.15) contrast(.8); } .dfold-t { display: grid; justify-items: center; gap: 4px; } .dfold b.dfold-n { font: 600 48px/1 var(--font-display); letter-spacing: -.03em; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); } :root[data-faction="elyos"] .dfold b.dfold-n { color: #1B1E3A; text-shadow: 0 2px 12px rgba(255, 255, 255, .8); } .dfold small { color: rgba(240, 235, 255, .8); } :root[data-faction="elyos"] .dfold small { color: var(--ink-2); } .dfold-a { position: absolute; right: 16px; bottom: 16px; } /* ---------- База ---------- */ /* числа описания — цветом и весом без фона; плашка — только у первого числа урона */ .dn { padding: 0; border-radius: 0; background: none; color: var(--accent-hi); font-weight: 600; } .dn.dmg { padding: 0 4px; border-radius: 6px; background: var(--accent-soft); } :root[data-faction="elyos"] .dn { color: #3F57D9; background: none; } :root[data-faction="elyos"] .dn.dmg { padding: 0 3px; background: rgba(79, 123, 255, .08); } /* роль — цветной полосой слева; тип (не «Активное») — значком в углу иконки; основные — на две колонки, иконка 64 */ .dbcard { position: relative; overflow: hidden; } .dbcard.rl::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--role, var(--edge-2)); } .dbcard.r-main { --role: var(--accent); } .dbcard.r-inst { --role: #3CC8C0; } .dbcard.r-buff { --role: #E8C478; } :root[data-faction="elyos"] .dbcard.r-buff { --role: #C99A3C; } .dbcard .itemcell { position: relative; } .db-type { position: absolute; right: -5px; bottom: -5px; z-index: 2; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; font: 700 10px/1 var(--font-ui); font-style: normal; color: #fff; background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: 0 0 0 2px var(--bg1); } :root[data-faction="elyos"] .db-type { box-shadow: 0 0 0 2px #fff; } .db-ty { color: var(--ink-3); } @media (min-width: 900px) { .dbgrid { grid-auto-flow: dense; } .dbcard.wide { grid-column: span 2; grid-template-columns: 64px minmax(0, 1fr); min-height: 112px; padding: 18px 18px 18px 20px; } .dbcard.wide .itemcell .frame { width: 64px; height: 64px; } .dbcard.wide .t { font-size: var(--fs-body); } .dbcard.wide .s { -webkit-line-clamp: 3; } } /* «Источник» — в строке заголовка; разделы — на всю ширину; на узких — маска 64 px и шеврон «ещё» */ .phead .db-src { padding-bottom: 0; } .db-filters { position: relative; } .catrow { flex: 1 1 100%; } .cat-more { display: none; } @media (max-width: 1280px) { .db-filters .catrow { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); padding-right: 40px; } .cat-more { display: grid; position: absolute; right: 0; top: 50%; translate: 0 -50%; z-index: 2; width: 32px; height: 32px; min-height: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); } .cat-more svg { width: 16px; height: 16px; } :root[data-faction="elyos"] .cat-more { background: rgba(255, 255, 255, .8); box-shadow: 0 4px 12px -4px rgba(60, 70, 140, .35); } } .catrow button:last-child { margin-right: 0; } /* ---------- Руководство ---------- */ .g-head h1 { font-size: 32px; line-height: 1.1; max-width: 20ch; } .guide { max-width: none; } .gtoc { justify-self: stretch; } .doc sup.src, .src { font-size: .68em; vertical-align: super; line-height: 0; margin-left: 1px; } .doc sup.src sup { font-size: 1em; vertical-align: baseline; } /* ---------- Настройки ---------- */ /* превью тем: вместо «пустых таблеток» — мини-строка (поиск с лупой и два кольца-таймера) */ .tp-menu { display: none; } .tp-bar { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; gap: 4px; opacity: .85; } .tp-s { display: flex; align-items: center; width: 46%; height: 12px; padding: 0 4px; border-radius: 6px; } .tp-s svg { width: 7px; height: 7px; } .tp-bar i { width: 18px; height: 12px; border-radius: 6px; } .tp-bar i:first-of-type { margin-left: auto; } .tp.a .tp-s, .tp.a .tp-bar i { background: rgba(20, 14, 36, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #BDB5D3; } .tp.e .tp-s, .tp.e .tp-bar i { background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px #fff; color: #5F6585; } .tp.a .tp-bar i { box-shadow: inset 0 0 0 1.5px rgba(139, 92, 246, .8); } .tp.e .tp-bar i { box-shadow: inset 0 0 0 1.5px rgba(79, 123, 255, .7); } /* «Авто»: одна плашка поверх шва, фон пополам — светлое стекло слева, тёмное справа; текст — «разностью» */ .tp-kpi.split { left: 50%; translate: -50% 0; z-index: 2; color: #fff; background: linear-gradient(105deg, rgba(255, 255, 255, .85) 50%, rgba(20, 14, 36, .78) 50%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .tp-kpi.split small, .tp-kpi.split b { color: #fff; mix-blend-mode: difference; } @media (max-width: 760px) { .tp-bar { display: none; } .tcard.auto .tp-kpi.split { display: grid; left: 50%; right: auto; } } /* переключатели — один компонент: включено — дорожка акцента и белая ручка, выключено — тёмная дорожка; у ручки тень */ input[type=checkbox].sw:not(:checked), .trow:not([aria-checked="true"]) .sw-vis { background: rgba(255, 255, 255, .10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } input[type=checkbox].sw:not(:checked)::after, .trow:not([aria-checked="true"]) .sw-vis::after { background: #CFC8E4; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); } input[type=checkbox].sw:checked, .trow[aria-checked="true"] .sw-vis { background: rgba(139, 92, 246, .55); box-shadow: inset 0 0 0 1px rgba(183, 156, 255, .5), 0 4px 12px -4px var(--accent-glow); } input[type=checkbox].sw:checked::after, .trow[aria-checked="true"] .sw-vis::after { background: #fff; box-shadow: 0 2px 6px rgba(20, 10, 50, .45); } :root[data-faction="elyos"] input[type=checkbox].sw:checked, :root[data-faction="elyos"] .trow[aria-checked="true"] .sw-vis { background: linear-gradient(90deg, #5B5BD6, #4F7BFF); box-shadow: 0 4px 12px -4px rgba(79, 123, 255, .5); } :root[data-faction="elyos"] .trow[aria-checked="true"] .sw-vis::after, :root[data-faction="elyos"] input[type=checkbox].sw:checked::after { background: #fff; box-shadow: 0 1px 3px rgba(40, 50, 110, .35); } .trow .sw-vis { width: 36px; height: 20px; } .trow .sw-vis::after { width: 14px; height: 14px; } .trow[aria-checked="true"] .sw-vis::after { transform: translateX(16px); } /* ---------- Телефон: шторка «Ещё» не перекрывает нижнюю панель ---------- */ @media (max-width: 760px) { html.sheet-open .tabbar { z-index: 83; } .sheet { left: 8px; right: 8px; bottom: calc(84px + env(safe-area-inset-bottom)); padding-bottom: 14px; border-radius: 24px; } } /* ---------- Оверлей: ближайшее дело выделено ---------- */ .ov-r.next { margin-inline: -6px; padding-inline: 6px; border-radius: 8px; background: rgba(139, 92, 246, .14); } .ov.elyos .ov-r.next { background: rgba(79, 123, 255, .12); } .ov-more { color: var(--ov-3); } /* ---------- Моушен ---------- */ /* «разлом»: 440 мс ровной кривой, новый раздел проявляется и чуть разворачивается от шва, кромки светятся акцентом */ html[data-vt="rift"]::view-transition-new(root) { animation: rift .44s cubic-bezier(.4, .1, .2, 1) both, riftin .44s cubic-bezier(.4, .1, .2, 1) both; transform-origin: var(--vt-x) 40%; } @keyframes riftin { from { opacity: .6; transform: scale(.985); } to { opacity: 1; transform: none; } } .rift-rim i { box-shadow: 0 0 18px var(--accent), 0 0 24px 6px var(--accent-glow), 0 0 4px 1px var(--accent-hi); } /* скелетон раздела, пока грузятся данные дольше 160 мс */ .skel-page { display: grid; gap: var(--gap); } .sk { display: block; border-radius: var(--r-l); background: linear-gradient(90deg, var(--well) 0%, var(--well-2) 50%, var(--well) 100%) 0 0 / 200% 100%; box-shadow: inset 0 0 0 1px var(--edge); animation: shimmer 1.2s linear infinite; } .sk-h { height: 56px; width: min(420px, 60%); border-radius: 16px; } .sk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .sk-row .sk { height: 150px; } .sk-big { height: 320px; } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } @media (max-width: 760px) { .sk-row { grid-template-columns: 1fr; } .sk-row .sk:nth-child(n+2) { display: none; } } /* иконки проявляются, когда загрузились (класс .ok — app.js), — без «выскакивания» по одной */ #view :is(.itemcell .frame, .sg, .gsock, .nowsteps, .stp-ic, .skc .lr-c, .hchip, .stiglist, .dbcard .frame) img { opacity: 0; transition: opacity .25s var(--ease-out); } #view :is(.itemcell .frame, .sg, .gsock, .nowsteps, .stp-ic, .skc .lr-c, .hchip, .stiglist, .dbcard .frame) img.ok { opacity: 1; } #view .itemcell .frame img.ok { opacity: 1; } :root[data-faction="elyos"] #view .sg.same img.ok { opacity: .5; } @media (prefers-reduced-motion: reduce) { .spark.sweep { clip-path: none; animation: none; } .spark-w .sp-end { opacity: 1; animation: none; } .ch-halo-h, .crystal svg, :root[data-faction="elyos"] .atrea::before, .sk { animation: none !important; } .flow.play .fnode.flag { animation: none; } :is(.itemcell .frame, .sg, .gsock, .nowsteps, .stp-ic, .skc .lr-c, .hchip, .stiglist, .dbcard .frame) img { transition: none; } } .invite-code { display: flex; gap: 8px; margin: 12px 0; } .invite-code input { min-width: 0; flex: 1; padding: 8px 10px; border: 1px solid var(--line, #777); border-radius: 8px; background: transparent; color: inherit; font: 12px monospace; } .invite-list > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line, rgba(255,255,255,.12)); font-size: 12px; }