/* СГЕНЕРИРОВАНО scripts/build-site.mjs из src/styles/app.css — руками не править */ :root { --paper-0: #141A24; --paper-1: #1B2330; --paper-2: #232E40; --card: #1E2735; --card-sunk: #171F2B; --edge-hair: #2C3950; --edge-soft: #3A4A66; --edge-strong: #4E6188; --ink-0: #EAF1FB; --ink-1: #D2DDEE; --ink-2: #94A6C2; --ink-3: #8497B5; --ink-on-wine: #0C1430; --gold-700: #C2A063; --gold-600: #D4B677; --ink-on-accent: #17202E; --gold-500: #B79A5C; --gold-400: #8A7440; --gold-tint: #2A2616; --positive: #6FCB87; --positive-tint: #15281C; --warning: #D7A356; --warning-tint: #2A2315; --danger: #E06B5C; --danger-tint: #2E1813; --info: #6FA2BE; --info-tint: #142631; --school-abjuration: #7FA8CC; --school-conjuration: #E0A35E; --school-divination: #84B8CE; --school-enchantment: #DB84AC; --school-evocation: #EE7E6B; --school-illusion: #B79AD6; --school-necromancy: #A7B673; --school-transmutation: #6FC2AA; --school-abjuration-tint: #18222E; --school-conjuration-tint: #2A2114; --school-divination-tint: #16242C; --school-enchantment-tint: #2A1A24; --school-evocation-tint: #2E1813; --school-illusion-tint: #211A2C; --school-necromancy-tint: #1E2216; --school-transmutation-tint: #14271F; --dmg-bludgeoning: #BDA9A0; --dmg-bludgeoning-tint: #291A13; --dmg-piercing: #9DB1BE; --dmg-piercing-tint: #0F202A; --dmg-slashing: #B0ABBA; --dmg-slashing-tint: #201C27; --dmg-fire: #F88B72; --dmg-fire-tint: #32140D; --dmg-cold: #6ABAD9; --dmg-cold-tint: #002330; --dmg-lightning: #9EA7F3; --dmg-lightning-tint: #191B35; --dmg-acid: #A8B765; --dmg-acid-tint: #1C2103; --dmg-poison: #7CC08F; --dmg-poison-tint: #082512; --dmg-psychic: #E090C2; --dmg-psychic-tint: #2E1425; --dmg-necrotic: #BCA4C4; --dmg-necrotic-tint: #28162D; --dmg-radiant: #D0A84D; --dmg-radiant-tint: #291C00; --dmg-force: #8AAEF0; --dmg-force-tint: #111D36; --dmg-thunder: #B79AE8; --dmg-thunder-tint: #1C1233; --dmg-on: #14192A; --radius-pill: 999px; --bw-hair: 1px; --text-xs: 12px; --font-sans: 'PT Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ============================================================ Капсулы защит — стихии внутри капсулы. Вынесены из app.css отдельным файлом: блок крупный (~48 КБ), а один сплошной CSS на 139 КБ не доезжает до части пользователей — рвётся передача. Импортируется из DmgCap.tsx, поэтому Vite кладёт его в свой чанк. ============================================================ */ /* Капсула защиты — ДВУХСЛОЙНАЯ: внешний контейнер (.gm-dmg, overflow visible) несёт внешний слой (у СИЛОВОГО ПОЛЯ — неоновая ограда за рамкой); внутренняя капсула (.gm-dmg__cap, overflow hidden) держит стекло + стихию + текст. Слои: cap::before = холст стихии (z1) → стеклянный блик (z2) → span-текст (z3), у span свои ::before/::after — слой ПОД глифами (глифы-снежинки/черепа, морок). --fx — «чернила» эффектов: цвет типа на res, контрастный на imm. Текст всегда в капсуле — цвет не единственный носитель. */ .gm-dmg { position: relative; display: inline-flex; overflow: visible; --dmg-c: var(--ink-2); --dmg-c-tint: var(--card-sunk); /* дефолт: неизвестный тип / состояние */ } .gm-dmg::before { content: none; } /* внешний слой включает только force */ .gm-dmg__cap { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; font-family: var(--font-sans); font-weight: 700; font-size: var(--text-xs); line-height: 1.35; letter-spacing: 0.015em; padding: 0.34em 0.8em; border-radius: var(--radius-pill); text-transform: capitalize; color: var(--dmg-c); --fx: var(--dmg-c); background: linear-gradient(150deg, color-mix(in srgb, var(--dmg-c) 20%, transparent), color-mix(in srgb, var(--dmg-c) 7%, transparent)); border: var(--bw-hair) solid color-mix(in srgb, var(--dmg-c) 42%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 4px color-mix(in srgb, var(--dmg-c) 22%, transparent); } .gm-dmg__cap > span { position: relative; z-index: 3; display: inline-block; } /* текст — над эффектами */ .gm-dmg__cap > span::before, .gm-dmg__cap > span::after { content: none; position: absolute; pointer-events: none; z-index: -1; line-height: 1; /* под глифами, над стеклом */ } .gm-dmg__cap::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; } /* холст стихии */ .gm-dmg__cap::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 44%); } /* стеклянный блик */ /* Сопротивление — тише: мягкий tint, приглушённые слои */ .gm-dmg[data-level="res"] .gm-dmg__cap { background: linear-gradient(150deg, var(--dmg-c-tint), color-mix(in srgb, var(--dmg-c) 9%, var(--dmg-c-tint))); border-color: color-mix(in srgb, var(--dmg-c) 38%, transparent); } .gm-dmg[data-level="res"] .gm-dmg__cap::before { opacity: 0.42; animation: none !important; } .gm-dmg[data-level="res"]::before { opacity: 0.4; } /* Иммунитет — «полная печать»: заливка + кристаллическая огранка + glow + живой эффект */ .gm-dmg[data-level="imm"] .gm-dmg__cap { color: var(--dmg-on); --fx: var(--dmg-on); background: linear-gradient(150deg, var(--dmg-c), color-mix(in srgb, var(--dmg-c) 66%, #000)); border-color: color-mix(in srgb, var(--dmg-c) 78%, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 5px rgba(0, 0, 0, 0.28), inset 0 0 0 1px color-mix(in srgb, var(--dmg-c) 60%, #fff), 0 0 13px color-mix(in srgb, var(--dmg-c) 48%, transparent); } .gm-dmg[data-type="bludgeoning"] { --dmg-c: var(--dmg-bludgeoning); --dmg-c-tint: var(--dmg-bludgeoning-tint); } .gm-dmg[data-type="piercing"] { --dmg-c: var(--dmg-piercing); --dmg-c-tint: var(--dmg-piercing-tint); } .gm-dmg[data-type="slashing"] { --dmg-c: var(--dmg-slashing); --dmg-c-tint: var(--dmg-slashing-tint); } .gm-dmg[data-type="fire"] { --dmg-c: var(--dmg-fire); --dmg-c-tint: var(--dmg-fire-tint); } .gm-dmg[data-type="cold"] { --dmg-c: var(--dmg-cold); --dmg-c-tint: var(--dmg-cold-tint); } .gm-dmg[data-type="lightning"] { --dmg-c: var(--dmg-lightning); --dmg-c-tint: var(--dmg-lightning-tint); } .gm-dmg[data-type="acid"] { --dmg-c: var(--dmg-acid); --dmg-c-tint: var(--dmg-acid-tint); } .gm-dmg[data-type="poison"] { --dmg-c: var(--dmg-poison); --dmg-c-tint: var(--dmg-poison-tint); } .gm-dmg[data-type="psychic"] { --dmg-c: var(--dmg-psychic); --dmg-c-tint: var(--dmg-psychic-tint); } .gm-dmg[data-type="necrotic"] { --dmg-c: var(--dmg-necrotic); --dmg-c-tint: var(--dmg-necrotic-tint); } .gm-dmg[data-type="radiant"] { --dmg-c: var(--dmg-radiant); --dmg-c-tint: var(--dmg-radiant-tint); } .gm-dmg[data-type="force"] { --dmg-c: var(--dmg-force); --dmg-c-tint: var(--dmg-force-tint); } .gm-dmg[data-type="thunder"] { --dmg-c: var(--dmg-thunder); --dmg-c-tint: var(--dmg-thunder-tint); } /* ===== СТИХИИ ВНУТРИ КАПСУЛЫ (заново по эскизам владельца, 2026-07-25). Движение — ТОЛЬКО у иммунитета; сопротивление держит те же слои статично и приглушённо (res-правила ниже). Всё гасится prefers-reduced-motion. ===== */ /* ОГОНЬ — языки пламени бьют высоко (минимальный размер держится лишь миг), по всей капсуле светятся прожилки лавы как в блоке магмы */ .gm-dmg[data-type="fire"] .gm-dmg__cap::before { background: radial-gradient(26% 130% at 18% 140%, #ffe07a 0%, #ff8a00 40%, transparent 66%), radial-gradient(32% 150% at 47% 148%, #ffc21e 0%, #ff6a00 46%, transparent 70%), radial-gradient(26% 128% at 78% 138%, #ff7a13 0%, transparent 66%); mix-blend-mode: screen; transform-origin: 50% 100%; } .gm-dmg[data-level="imm"][data-type="fire"] .gm-dmg__cap::before { animation: dmg-tongues 2.3s ease-in-out infinite; } @keyframes dmg-tongues { 0% { transform: scaleY(0.8) scaleX(1.07); opacity: 0.68; } /* дно — только миг */ 10% { transform: scaleY(1.34) scaleX(0.96); opacity: 1; } 26% { transform: scaleY(1.12) scaleX(1.05); opacity: 0.94; } 42% { transform: scaleY(1.46) scaleX(0.94); opacity: 1; } 58% { transform: scaleY(1.2) scaleX(1.03); } 74% { transform: scaleY(1.52) scaleX(0.95); opacity: 1; } 90% { transform: scaleY(1.16) scaleX(1.02); opacity: 0.95; } 100% { transform: scaleY(0.8) scaleX(1.07); opacity: 0.68; } } /* Блок магмы: КРУПНЫЕ тёмные плиты, между ними широкие лавовые щели — щелей немного, каждая толстая и светится (как в текстуре из майнкрафта). */ .gm-dmg[data-type="fire"] .gm-dmg__cap > span::before { content: ''; inset: -0.5em -1.1em; background: linear-gradient(150deg, #ffe98f 0%, #ffa317 38%, #f2600c 72%, #d43c04 100%); mask: url("data:image/svg+xml;utf8,") center / 60px 29px repeat; opacity: 0.95; } .gm-dmg[data-level="imm"][data-type="fire"] .gm-dmg__cap > span::before { animation: dmg-veins 3.4s ease-in-out infinite; } @keyframes dmg-veins { 0%, 100% { filter: brightness(0.82) saturate(1); } 45% { filter: brightness(1.4) saturate(1.15); } } /* ХОЛОД — полотно снежинок: встречные потоки сталкиваются и падают */ .gm-dmg[data-type="cold"] .gm-dmg__cap::before { background: radial-gradient(circle at 30% 30%, var(--fx) 0 0.8px, transparent 1.3px), radial-gradient(circle at 70% 60%, var(--fx) 0 0.65px, transparent 1.1px), radial-gradient(circle at 15% 75%, color-mix(in srgb, var(--fx) 70%, transparent) 0 0.55px, transparent 1px); background-size: 13px 15px, 10px 12px, 8px 9px; opacity: 0.75; } .gm-dmg[data-level="imm"][data-type="cold"] .gm-dmg__cap::before { animation: dmg-snowfall 5.2s linear infinite; } @keyframes dmg-snowfall { from { background-position: 0 -15px, 5px -12px, -3px -9px; } to { background-position: -13px 15px, 15px 12px, 5px 9px; } } .gm-dmg[data-type="cold"] .gm-dmg__cap > span::before { content: '\2744\FE0E'; left: 8%; top: -34%; font-size: 0.72em; color: var(--fx); text-shadow: 2.6em 0.5em 0, 5.4em -0.3em 1px; opacity: 0.85; } .gm-dmg[data-level="imm"][data-type="cold"] .gm-dmg__cap > span::before { animation: dmg-flakes 4.6s linear infinite; } @keyframes dmg-flakes { 0% { transform: translateY(-40%) rotate(0deg); opacity: 0; } 20% { opacity: 0.9; } 80% { opacity: 0.75; } 100% { transform: translateY(215%) rotate(26deg); opacity: 0; } } /* Сопротивление: снежинки на РАЗНЫХ планах — крупная у самой камеры, средняя чуть дальше, две мелких в глубине; формы разные (лучевая, звёздчатая, точка). */ .gm-dmg[data-level="res"][data-type="cold"] .gm-dmg__cap > span::before { content: '\2744\FE0E'; left: 1%; top: -22%; font-size: 1.3em; color: var(--fx); opacity: 0.95 !important; filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--card) 70%, transparent)); } .gm-dmg[data-level="res"][data-type="cold"] .gm-dmg__cap > span::after { content: '\2745\FE0E'; right: -2%; bottom: -26%; left: auto; top: auto; font-size: 0.95em; color: var(--fx); opacity: 0.75 !important; text-shadow: -2.9em -0.55em 0 color-mix(in srgb, var(--fx) 62%, transparent), -5.1em 0.15em 0 color-mix(in srgb, var(--fx) 45%, transparent); } .gm-dmg[data-level="res"][data-type="cold"] .gm-dmg__cap::before { opacity: 0.45; } /* МОЛНИЯ — разряды бегают внутри и бьют в стенки; по капсуле проходит разряд */ .gm-dmg[data-type="lightning"] .gm-dmg__cap::before { background: linear-gradient(74deg, transparent 44%, var(--fx) 47%, transparent 50%) no-repeat, linear-gradient(-58deg, transparent 45%, color-mix(in srgb, var(--fx) 75%, #fff) 48%, transparent 51%) no-repeat, linear-gradient(104deg, transparent 46%, var(--fx) 48%, transparent 50%) no-repeat; background-size: 30% 170%, 26% 160%, 22% 150%; background-position: 12% 40%, 55% 60%, 82% 30%; opacity: 0.55; } /* Разряд НЕ ездит по капсуле: он бьёт на месте — вспыхивает дугой, коротко дрожит (jitter в доли пикселя) и гаснет; следующий бьёт в другом месте. */ .gm-dmg[data-level="imm"][data-type="lightning"] .gm-dmg__cap::before { animation: dmg-bolt-strike 2.4s steps(1, end) infinite, dmg-bolt-life 1.2s linear infinite, dmg-bolt-jitter 0.11s steps(2, end) infinite; } @keyframes dmg-bolt-strike { /* место удара меняется РЕДКО, между вспышками */ 0%, 49% { background-position: 14% 42%, 58% 58%, 86% 28%; } 50%, 100% { background-position: 88% 34%, 26% 62%, 52% 40%; } } @keyframes dmg-bolt-life { /* сам удар: мгновенный пик, короткое горение, темнота */ 0% { opacity: 1; } 9% { opacity: 0.85; } 17% { opacity: 1; } 26% { opacity: 0.5; } 34% { opacity: 0.12; } 55%, 100% { opacity: 0.06; } } @keyframes dmg-bolt-jitter { from { transform: translate(0, 0); } to { transform: translate(0.6px, -0.5px); } } /* Разряд по всей капсуле — дважды за цикл, синхронно с ударами в стенки */ .gm-dmg[data-level="imm"][data-type="lightning"] .gm-dmg__cap { animation: dmg-zapwall 1.2s ease-out infinite; } @keyframes dmg-zapwall { 0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 5px rgba(0, 0, 0, 0.28), inset 0 0 0 1.5px #fff, inset 0 0 11px color-mix(in srgb, var(--dmg-c) 70%, #fff), 0 0 19px color-mix(in srgb, var(--dmg-c) 75%, transparent); filter: brightness(1.3); } 9% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 5px rgba(0, 0, 0, 0.28), inset 0 0 0 1px color-mix(in srgb, var(--dmg-c) 75%, #fff), inset 0 0 6px color-mix(in srgb, var(--dmg-c) 50%, #fff), 0 0 15px color-mix(in srgb, var(--dmg-c) 58%, transparent); filter: brightness(1.12); } 26%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 5px rgba(0, 0, 0, 0.28), inset 0 0 0 1px color-mix(in srgb, var(--dmg-c) 60%, #fff), 0 0 13px color-mix(in srgb, var(--dmg-c) 48%, transparent); filter: brightness(1); } } /* КИСЛОТА — края капсулы разъедены, в буквах и стекле рытвины */ /* Форма СЪЕДЕНА: глубокие каверны выгрызены из силуэта (вырез — через внутри SVG: только он даёт настоящую прозрачность для CSS-маски). */ .gm-dmg[data-type="acid"] .gm-dmg__cap { mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; } .gm-dmg[data-type="acid"] .gm-dmg__cap > span { mask-image: radial-gradient(circle at 34% 44%, transparent 0.75px, #000 1.2px); mask-size: 6px 5px; } .gm-dmg[data-level="imm"][data-type="acid"] .gm-dmg__cap > span { animation: dmg-etch 7s linear infinite; } @keyframes dmg-etch { from { mask-position: 0 0; } to { mask-position: 6px 5px; } } .gm-dmg[data-type="acid"] .gm-dmg__cap::before { background: radial-gradient(30% 55% at 26% 70%, color-mix(in srgb, var(--fx) 55%, transparent) 0%, transparent 70%), radial-gradient(24% 45% at 72% 30%, color-mix(in srgb, var(--fx) 40%, transparent) 0%, transparent 70%); filter: blur(1.5px); opacity: 0.5; } .gm-dmg[data-level="imm"][data-type="acid"] .gm-dmg__cap::before { animation: dmg-mottle 5.6s ease-in-out infinite alternate; } @keyframes dmg-mottle { from { background-position: 0 0, 0 0; } to { background-position: 8px 3px, -7px -4px; } } /* ЯД — дымные оскаленные черепа плывут по ветру */ .gm-dmg[data-type="poison"] .gm-dmg__cap::before { background: radial-gradient(44% 80% at 24% 58%, color-mix(in srgb, var(--fx) 62%, transparent) 0%, transparent 74%), radial-gradient(38% 68% at 52% 38%, color-mix(in srgb, var(--fx) 52%, transparent) 0%, transparent 72%), radial-gradient(40% 72% at 74% 60%, color-mix(in srgb, var(--fx) 48%, transparent) 0%, transparent 74%), radial-gradient(30% 55% at 90% 34%, color-mix(in srgb, var(--fx) 40%, transparent) 0%, transparent 72%); filter: blur(3.4px); opacity: 0.8; } .gm-dmg[data-level="imm"][data-type="poison"] .gm-dmg__cap::before { animation: dmg-wisp 6.5s ease-in-out infinite alternate; } @keyframes dmg-wisp { from { background-position: -6px 0, 5px 1px; } to { background-position: 7px -2px, -6px 2px; } } /* Черепа: глазницы, нос и зубы ВЫРЕЗАНЫ (через внутри SVG — чёрная заливка поверх не вырезает ничего, она непрозрачна по альфе). */ .gm-dmg[data-type="poison"] .gm-dmg__cap > span::before { content: ''; inset: -0.42em -1em; background: var(--fx); mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; filter: blur(1.9px); opacity: 0.85; } /* Черепа не висят в пустоте — их обволакивает и сносит дымом */ .gm-dmg[data-type="poison"] .gm-dmg__cap > span::after { content: ''; inset: -0.6em -1.2em; background: radial-gradient(26% 60% at 18% 40%, color-mix(in srgb, var(--fx) 70%, transparent) 0%, transparent 70%), radial-gradient(30% 66% at 44% 66%, color-mix(in srgb, var(--fx) 60%, transparent) 0%, transparent 72%), radial-gradient(24% 58% at 70% 36%, color-mix(in srgb, var(--fx) 65%, transparent) 0%, transparent 70%), radial-gradient(20% 50% at 88% 62%, color-mix(in srgb, var(--fx) 55%, transparent) 0%, transparent 70%); filter: blur(4.2px); opacity: 0.5; } .gm-dmg[data-level="imm"][data-type="poison"] .gm-dmg__cap > span::after { animation: dmg-fume 8.2s ease-in-out infinite alternate; } @keyframes dmg-fume { from { background-position: -7px 2px, 5px -2px, -4px 1px, 6px 0; transform: scale(1); } to { background-position: 8px -2px, -6px 3px, 7px -1px, -5px 2px; transform: scale(1.06); } } .gm-dmg[data-level="imm"][data-type="poison"] .gm-dmg__cap > span::before { animation: dmg-skulls 7.4s ease-in-out infinite; } @keyframes dmg-skulls { /* сгустился → уплыл → растаял */ 0% { transform: translateX(-14%) scale(0.9); opacity: 0.1; filter: blur(4.5px); } 26% { opacity: 0.85; filter: blur(1.4px); } 55% { transform: translateX(4%) scale(1.04); opacity: 0.9; filter: blur(1.7px); } 78% { opacity: 0.42; filter: blur(3.4px); } 100% { transform: translateX(16%) translateY(-9%) scale(1.12); opacity: 0.08; filter: blur(5px); } } .gm-dmg[data-level="res"][data-type="poison"] .gm-dmg__cap > span::before { filter: blur(1.5px); opacity: 0.5 !important; } /* ГРОМ — в центре тёмная грозовая туча, из неё волны бьют в стенки, капсула содрогается и на миг вырастает */ /* Туча — кучевой силуэт (маска), тёмная и клубящаяся, а не кольца-мишень */ .gm-dmg[data-type="thunder"] .gm-dmg__cap > span::before { content: ''; inset: -0.55em -1.2em; background: radial-gradient(60% 120% at 45% 25%, #4B3170 0%, #241041 45%, #12071F 100%); mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; filter: blur(0.9px); opacity: 0.92; } .gm-dmg[data-level="imm"][data-type="thunder"] .gm-dmg__cap > span::before { animation: dmg-storm 6.4s ease-in-out infinite; } @keyframes dmg-storm { 0%, 100% { transform: translateX(-1.5%) scale(1); filter: blur(0.9px) brightness(1); } 34% { transform: translateX(1.5%) scale(1.04); filter: blur(1.1px) brightness(1.05); } 52% { filter: blur(0.8px) brightness(1.75); } /* вспыхнуло изнутри */ 58% { filter: blur(0.9px) brightness(1.05); } 70% { transform: translateX(0.5%) scale(1.02); } } /* Никаких лучей и колец: удар — это СВЕТ, заливающий капсулу изнутри тучи */ .gm-dmg[data-type="thunder"] .gm-dmg__cap::before { background: radial-gradient(70% 130% at 46% 45%, color-mix(in srgb, #F0E4FF 85%, var(--fx)) 0%, color-mix(in srgb, var(--fx) 55%, transparent) 38%, transparent 72%); opacity: 0.22; } .gm-dmg[data-level="imm"][data-type="thunder"] .gm-dmg__cap::before { animation: dmg-soundwave 2.6s ease-out infinite; } @keyframes dmg-soundwave { /* разряд в туче — и капсулу заливает светом */ 0%, 50% { opacity: 0.16; } 55% { opacity: 0.95; } 59% { opacity: 0.35; } 63% { opacity: 0.8; } 74%, 100% { opacity: 0.16; } } .gm-dmg[data-level="imm"][data-type="thunder"] .gm-dmg__cap { animation: dmg-boom 2.6s cubic-bezier(0.2, 0.9, 0.3, 1) infinite; } @keyframes dmg-boom { 0%, 55% { transform: scale(1) translateX(0); } 60% { transform: scale(1.075) translateX(0.6px); } 63% { transform: scale(1.05) translateX(-0.9px); } 66% { transform: scale(1.06) translateX(0.5px); } 70% { transform: scale(1.015) translateX(-0.3px); } 76%, 100% { transform: scale(1) translateX(0); } } /* ПСИХИЧЕСКИЙ — морок: фраза плывёт, буквы подменяются заведомо чужими (настоящий текст мигает в transparent ровно в окнах показа data-mirage) */ .gm-dmg[data-type="psychic"] .gm-dmg__cap::before { background: conic-gradient(from 210deg at 50% 50%, color-mix(in srgb, var(--dmg-c) 45%, transparent), color-mix(in srgb, var(--dmg-c) 12%, #7ad), color-mix(in srgb, var(--dmg-c) 40%, #f7c), color-mix(in srgb, var(--dmg-c) 45%, transparent)); filter: blur(5px); background-size: 190% 190%; opacity: 0.5; } .gm-dmg[data-level="imm"][data-type="psychic"] .gm-dmg__cap::before { animation: dmg-haze 6.4s ease-in-out infinite; } @keyframes dmg-haze { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Побуквенно: у каждой «внушённой» буквы своя фаза (--d), поэтому подмены гуляют по всему слову, а не бьются в одно место. */ .gm-dmg[data-type="psychic"] .gm-dmg__cap { text-transform: none; } .gm-dmg__ch { position: relative; display: inline-block; font-style: normal; white-space: pre; } /* Цвет подменной буквы берём из --fx, а НЕ inherit: в момент подмены родитель уходит в transparent, и наследованный цвет утащил бы призрак в невидимость — буква пропадала бы целиком вместо замены. */ .gm-dmg__ch[data-wrong]::after { content: attr(data-wrong); position: absolute; left: 0; top: 0; opacity: 0; color: var(--fx); pointer-events: none; } .gm-dmg[data-level="imm"][data-type="psychic"] .gm-dmg__cap > span { animation: dmg-sway 6.4s ease-in-out infinite; } /* Буква не пропадает «цензурой»: настоящая и внушённая ПЕРЕТЕКАЮТ друг в друга, у каждой свой период (--dur) — подмены разъезжаются, а не идут по очереди. */ .gm-dmg[data-level="imm"][data-type="psychic"] .gm-dmg__ch[data-wrong] { animation: dmg-real var(--dur, 5.3s) steps(1, end) infinite; animation-delay: var(--d, 0s); } .gm-dmg[data-level="imm"][data-type="psychic"] .gm-dmg__ch[data-wrong]::after { animation: dmg-ghost var(--dur, 5.3s) steps(1, end) infinite; animation-delay: var(--d, 0s); } @keyframes dmg-sway { 0%, 100% { transform: translateY(0) skewX(0); filter: blur(0); } 30% { transform: translateY(-0.5px) skewX(2.5deg); filter: blur(0.5px); } 62% { transform: translateY(0.4px) skewX(-2deg); filter: blur(0.35px); } } /* Буква не гаснет и не «запикивается»: в кадре всегда есть буква — просто в какой-то момент она СТАНОВИТСЯ другой (переключение мгновенное, steps). */ @keyframes dmg-real { 0% { color: inherit; } 34% { color: transparent; } 47% { color: inherit; } 63% { color: transparent; } 81%, 100% { color: inherit; } } @keyframes dmg-ghost { 0% { opacity: 0; } 34% { opacity: 1; } 47% { opacity: 0; } 63% { opacity: 1; } 81%, 100% { opacity: 0; } } /* Сопротивление: морок застыл — часть букв подменена и смазана КУСКАМИ */ .gm-dmg[data-level="res"][data-type="psychic"] .gm-dmg__ch[data-wrong] { color: transparent; } .gm-dmg[data-level="res"][data-type="psychic"] .gm-dmg__ch[data-wrong]::after { opacity: 0.85; color: var(--dmg-c); } .gm-dmg[data-level="res"][data-type="psychic"] .gm-dmg__ch:nth-child(3n) { filter: blur(1.1px); } .gm-dmg[data-level="res"][data-type="psychic"] .gm-dmg__ch:nth-child(4n+1) { filter: blur(0.6px); } .gm-dmg[data-level="res"][data-type="psychic"] .gm-dmg__ch[data-wrong] { filter: blur(0.9px); } /* НЕКРОТИК — костяные руки тянутся снизу, всплывает оскал */ .gm-dmg[data-type="necrotic"] .gm-dmg__cap::before { background: var(--fx); mask: url("data:image/svg+xml;utf8,") left bottom / auto 100% repeat-x; opacity: 0.5; transform: translateY(22%); } .gm-dmg[data-level="imm"][data-type="necrotic"] .gm-dmg__cap::before { animation: dmg-claws 4.4s ease-in-out infinite; } @keyframes dmg-claws { 0% { transform: translateY(55%); opacity: 0; } 35% { opacity: 0.75; } 55% { transform: translateY(6%); opacity: 0.8; } 78% { transform: translateY(-4%); opacity: 0.35; } 100% { transform: translateY(-10%); opacity: 0; } } .gm-dmg[data-type="necrotic"] .gm-dmg__cap > span::after { content: '\2620\FE0E'; right: 6%; top: 12%; font-size: 0.9em; color: var(--fx); filter: blur(0.3px); opacity: 0.5; } .gm-dmg[data-level="imm"][data-type="necrotic"] .gm-dmg__cap > span::after { animation: dmg-skullrise 5.3s ease-in infinite; } @keyframes dmg-skullrise { 0% { transform: translateY(90%); opacity: 0; } 30% { opacity: 0.65; } 70% { opacity: 0.5; } 100% { transform: translateY(-95%); opacity: 0; } } /* ИЗЛУЧЕНИЕ — влёт в гиперпространство: свет вытянут в стрики, летящие из точки схода мимо камеры; чем ближе, тем длиннее и размытее. */ .gm-dmg[data-type="radiant"] .gm-dmg__cap::before { background: conic-gradient(from 0deg at 50% 50%, #fffdf5 0 1.2deg, transparent 1.2deg 6deg, #ffe08a 6deg 7.4deg, transparent 7.4deg 13deg, #fff8e2 13deg 13.8deg, transparent 13.8deg 22deg, #d99a24 22deg 23.4deg, transparent 23.4deg 31deg, #fffdf5 31deg 32.6deg, transparent 32.6deg 39deg, #c4441f 39deg 40.2deg, transparent 40.2deg 49deg, #ffeaa8 49deg 50.4deg, transparent 50.4deg 58deg, #fff 58deg 59deg, transparent 59deg 68deg, #ffd257 68deg 69.6deg, transparent 69.6deg 77deg, #a33218 77deg 78.2deg, transparent 78.2deg 87deg, #fffdf5 87deg 88.4deg, transparent 88.4deg 96deg, #ffe08a 96deg 97.2deg, transparent 97.2deg 106deg, #fff8e2 106deg 107.4deg, transparent 107.4deg 115deg, #d99a24 115deg 116.2deg, transparent 116.2deg 125deg, #fff 125deg 126.4deg, transparent 126.4deg 134deg, #c4441f 134deg 135.2deg, transparent 135.2deg 144deg, #ffeaa8 144deg 145.6deg, transparent 145.6deg 153deg, #fffdf5 153deg 154.2deg, transparent 154.2deg 163deg, #ffd257 163deg 164.4deg, transparent 164.4deg 172deg, #fff8e2 172deg 173.2deg, transparent 173.2deg 182deg, #a33218 182deg 183.2deg, transparent 183.2deg 191deg, #fffdf5 191deg 192.6deg, transparent 192.6deg 200deg, #ffe08a 200deg 201.4deg, transparent 201.4deg 210deg, #fff 210deg 211.2deg, transparent 211.2deg 219deg, #d99a24 219deg 220.4deg, transparent 220.4deg 228deg, #fffdf5 228deg 229.6deg, transparent 229.6deg 238deg, #c4441f 238deg 239.2deg, transparent 239.2deg 247deg, #ffeaa8 247deg 248.4deg, transparent 248.4deg 256deg, #fff8e2 256deg 257.2deg, transparent 257.2deg 265deg, #ffd257 265deg 266.6deg, transparent 266.6deg 274deg, #fffdf5 274deg 275.4deg, transparent 275.4deg 284deg, #a33218 284deg 285.2deg, transparent 285.2deg 293deg, #fff 293deg 294.2deg, transparent 294.2deg 302deg, #ffe08a 302deg 303.6deg, transparent 303.6deg 312deg, #d99a24 312deg 313.2deg, transparent 313.2deg 321deg, #fffdf5 321deg 322.4deg, transparent 322.4deg 331deg, #ffeaa8 331deg 332.2deg, transparent 332.2deg 341deg, #fff8e2 341deg 342.4deg, transparent 342.4deg 351deg, #ffd257 351deg 352.2deg, transparent 352.2deg 360deg); mask: radial-gradient(circle at 50% 50%, transparent 0 7%, #000 24%, #000 58%, transparent 84%); transform: scale(0.25); opacity: 0.9; } .gm-dmg[data-level="imm"][data-type="radiant"] .gm-dmg__cap::before { animation: dmg-warp 2.8s cubic-bezier(0.55, 0, 0.85, 0.4) infinite; } @keyframes dmg-warp { /* разгон мимо камеры */ 0% { transform: scale(0.25); opacity: 0.35; filter: blur(0.2px); } 20% { opacity: 1; } 70% { transform: scale(2.6); opacity: 0.9; filter: blur(0.9px); } 100% { transform: scale(5.2); opacity: 0; filter: blur(2.2px); } } /* Вторая волна — со сдвигом фазы: поток не прерывается */ .gm-dmg[data-type="radiant"] .gm-dmg__cap > span::after { content: ''; inset: -0.5em -1.1em; border-radius: inherit; background: conic-gradient(from 18deg at 50% 50%, #fffdf5 0 1.4deg, transparent 1.4deg 11deg, #ffd257 11deg 12.2deg, transparent 12.2deg 24deg, #c4441f 24deg 25deg, transparent 25deg 37deg, #fff 37deg 38.4deg, transparent 38.4deg 50deg, #ffe08a 50deg 51.2deg, transparent 51.2deg 63deg, #a33218 63deg 64deg, transparent 64deg 76deg, #fffdf5 76deg 77.4deg, transparent 77.4deg 89deg, #d99a24 89deg 90.2deg, transparent 90.2deg 102deg, #fff8e2 102deg 103.4deg, transparent 103.4deg 115deg, #ffd257 115deg 116.2deg, transparent 116.2deg 128deg, #fff 128deg 129.2deg, transparent 129.2deg 141deg, #ffeaa8 141deg 142.4deg, transparent 142.4deg 154deg, #c4441f 154deg 155deg, transparent 155deg 167deg, #fffdf5 167deg 168.4deg, transparent 168.4deg 180deg, #ffe08a 180deg 181.2deg, transparent 181.2deg 193deg, #a33218 193deg 194deg, transparent 194deg 206deg, #fff 206deg 207.4deg, transparent 207.4deg 219deg, #d99a24 219deg 220.2deg, transparent 220.2deg 232deg, #fffdf5 232deg 233.4deg, transparent 233.4deg 245deg, #ffd257 245deg 246.2deg, transparent 246.2deg 258deg, #fff8e2 258deg 259.4deg, transparent 259.4deg 271deg, #ffeaa8 271deg 272.2deg, transparent 272.2deg 284deg, #c4441f 284deg 285deg, transparent 285deg 297deg, #fffdf5 297deg 298.4deg, transparent 298.4deg 310deg, #ffe08a 310deg 311.2deg, transparent 311.2deg 323deg, #fff 323deg 324.2deg, transparent 324.2deg 336deg, #d99a24 336deg 337.4deg, transparent 337.4deg 349deg, #fffdf5 349deg 350.2deg, transparent 350.2deg 360deg); mask: radial-gradient(circle at 50% 50%, transparent 0 7%, #000 24%, #000 58%, transparent 84%); transform: scale(0.25); opacity: 0; } .gm-dmg[data-level="imm"][data-type="radiant"] .gm-dmg__cap > span::after { animation: dmg-warp 2.8s cubic-bezier(0.55, 0, 0.85, 0.4) infinite; animation-delay: -1.4s; } .gm-dmg[data-type="radiant"] .gm-dmg__cap > span::before { content: ''; inset: -0.4em -0.9em; background: radial-gradient(90% 140% at 50% 50%, #fff 0%, rgba(255, 255, 255, 0.75) 40%, transparent 78%); opacity: 0; } .gm-dmg[data-level="imm"][data-type="radiant"] .gm-dmg__cap > span::before { animation: dmg-blind 5.2s ease-in-out infinite; } @keyframes dmg-blind { 0%, 16% { opacity: 0; } 27% { opacity: 0.92; } 55% { opacity: 0.5; } 74% { opacity: 0.25; } 88%, 100% { opacity: 0; } } /* Физические (сталь) — блик по металлу + СЛЕДЫ УДАРА в самой форме капсулы */ .gm-dmg[data-type="bludgeoning"] .gm-dmg__cap::before, .gm-dmg[data-type="piercing"] .gm-dmg__cap::before, .gm-dmg[data-type="slashing"] .gm-dmg__cap::before { background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.45) 48%, rgba(255,255,255,.15) 54%, transparent 62%); background-size: 250% 100%; } .gm-dmg[data-level="imm"][data-type="bludgeoning"] .gm-dmg__cap::before, .gm-dmg[data-level="imm"][data-type="piercing"] .gm-dmg__cap::before, .gm-dmg[data-level="imm"][data-type="slashing"] .gm-dmg__cap::before { animation: dmg-steel 4s ease-in-out infinite; } @keyframes dmg-steel { from { background-position: 150% 0; } to { background-position: -50% 0; } } /* ДРОБЯЩИЙ — силуэт СМЯТ: глубокие вмятины продавили край внутрь */ .gm-dmg[data-type="bludgeoning"] .gm-dmg__cap { mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; } .gm-dmg[data-type="bludgeoning"] .gm-dmg__cap > span::before { content: ''; inset: -0.5em -1.1em; background: color-mix(in srgb, var(--fx) 78%, #000); mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; opacity: 0.75; } /* КОЛЮЩИЙ — пробоины РВАНЫЕ: остриё вошло, металл разошёлся звездой, от каждой дыры бегут трещины, край надорван входом клинка */ .gm-dmg[data-type="piercing"] .gm-dmg__cap { mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; } .gm-dmg[data-type="piercing"] .gm-dmg__cap > span::before { content: ''; inset: -0.5em -1.1em; background: radial-gradient(circle at 19% 34%, color-mix(in srgb, var(--fx) 62%, #000) 0 4.4px, transparent 6px), radial-gradient(circle at 40% 62%, color-mix(in srgb, var(--fx) 55%, #000) 0 4.6px, transparent 6.4px), radial-gradient(circle at 60% 30%, color-mix(in srgb, var(--fx) 50%, #000) 0 3.8px, transparent 5.4px), radial-gradient(circle at 79% 72%, color-mix(in srgb, var(--fx) 55%, #000) 0 4.6px, transparent 6.4px); opacity: 0.55; } /* РУБЯЩИЙ — капсула РАССЕЧЕНА: прорези расходятся к середине удара, а два косых среза прошли по касательной и снесли края */ .gm-dmg[data-type="slashing"] .gm-dmg__cap { mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; } /* ===== ВНЕШНИЙ слой — только СИЛОВОЕ ПОЛЕ: неоновая ограда чуть дальше рамки, дышит, периодически напрягается и расходится дальше — ограждает. ===== */ /* Ограда стоит ОТДЕЛЬНО от капсулы — заметный зазор, чтобы «поле» читалось как поле, а не как вторая рамка. */ .gm-dmg[data-type="force"]::before { content: ''; position: absolute; inset: -12px; z-index: -1; pointer-events: none; border-radius: var(--radius-pill); border: 2px solid color-mix(in srgb, var(--dmg-c) 82%, #fff); box-shadow: 0 0 7px color-mix(in srgb, var(--dmg-c) 60%, transparent); opacity: 0.6; } /* Иммунитет — снаружи насыщенно-СИНЯЯ ограда поодаль, внутри голубое свечение */ .gm-dmg[data-level="imm"][data-type="force"]::before { border-width: 3.5px; border-color: #1D4ED8; opacity: 1; box-shadow: 0 0 10px #1D4ED8, 0 0 24px rgba(29, 78, 216, 0.8), inset 0 0 12px rgba(29, 78, 216, 0.55); animation: dmg-ward 4.4s cubic-bezier(0.35, 0, 0.3, 1) infinite; } .gm-dmg[data-level="imm"][data-type="force"] .gm-dmg__cap { border-color: #A6E6FF; box-shadow: inset 0 0 0 1px #7FD7FF, inset 0 0 14px rgba(126, 216, 255, 0.75), inset 0 6px 12px rgba(160, 230, 255, 0.35), 0 0 10px rgba(47, 107, 255, 0.5); } @keyframes dmg-ward { /* ограда отодвигается ЗАМЕТНО */ 0%, 100% { transform: scale(1); opacity: 0.85; } 30% { transform: scale(1.05); opacity: 1; } 46% { transform: scale(1.015); opacity: 0.9; } 68% { transform: scale(1.24); opacity: 1; box-shadow: 0 0 14px #2C63E8, 0 0 34px rgba(29, 78, 216, 0.95), inset 0 0 16px rgba(29, 78, 216, 0.65); } 84% { transform: scale(1.08); opacity: 0.92; } } /* Сопротивление — голубой неон внутри: и в буквах, и подсветкой поля */ .gm-dmg[data-level="res"][data-type="force"] .gm-dmg__cap { color: color-mix(in srgb, var(--dmg-c) 80%, #002B66); text-shadow: 0 0 4px rgba(103, 205, 255, 0.95), 0 0 10px rgba(47, 107, 255, 0.6); box-shadow: inset 0 0 12px rgba(126, 216, 255, 0.4), inset 0 0 0 1px rgba(126, 216, 255, 0.35); } /* ===== СОСТОЯНИЯ (капсулы без типа урона) — у каждого своя ПОВАДКА ===== Цвет берём из УЖЕ выверенных токенов (школы/семантика/типы урона), а не заводим новые: контраст в обеих темах там уже проверен. Прочие состояния остаются нейтральными — цвет только там, где он значит. */ /* Розовый школы Очарования сам по себе даёт лишь 4.1 на своём тинте — подмешиваем ink-0: на свету он затемняет, в темноте осветляет, контраст растёт в обеих. */ .gm-dmg[data-cond="charmed"] { --dmg-c: color-mix(in srgb, var(--school-enchantment) 78%, var(--ink-0)); --dmg-c-tint: var(--school-enchantment-tint); } .gm-dmg[data-cond="frightened"] { --dmg-c: var(--warning); --dmg-c-tint: var(--warning-tint); } .gm-dmg[data-cond="paralyzed"] { --dmg-c: var(--dmg-piercing); --dmg-c-tint: var(--dmg-piercing-tint); } .gm-dmg[data-cond="poisoned"] { --dmg-c: var(--dmg-poison); --dmg-c-tint: var(--dmg-poison-tint); } /* ОЧАРОВАНИЕ — ладонь заходит снизу слева и ПОДНИМАЕТ капсулу за левый край: левая половина выгибается вверх (clip-path), буквы едут за ней. Ладонь живёт на ВНЕШНЕМ контейнере (.gm-dmg, overflow: visible) — внутри капсулы её обрезало бы, и она не была бы видна снаружи. */ /* ВАЖНО: без своего стекового контекста `z-index: -1` уводит ладонь ЗА фон карточки-предка, и её просто не видно. isolation: isolate запирает контекст внутри капсулы — рука остаётся под капсулой, но поверх карточки. */ .gm-dmg[data-cond="charmed"] { isolation: isolate; } .gm-dmg[data-cond="charmed"]::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: -19px; bottom: -11px; width: 31px; height: 31px; /* --fx живёт на .gm-dmg__cap, здесь её НЕТ — берём цвет типа с самого .gm-dmg */ background: var(--dmg-c); mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); opacity: 1; animation: dmg-lift-hand 3.8s cubic-bezier(0.4, 0, 0.35, 1) infinite; } @keyframes dmg-lift-hand { /* рука подхватывает и поднимает; из вида не уходит */ 0% { transform: translate(-3px, 7px) rotate(-16deg); opacity: 0.6; } 22% { transform: translate(0, 2px) rotate(-7deg); opacity: 1; } 50% { transform: translate(2px, -8px) rotate(4deg); opacity: 1; } 74% { transform: translate(1px, -3px) rotate(-2deg); opacity: 0.9; } 100% { transform: translate(-3px, 7px) rotate(-16deg); opacity: 0.6; } } .gm-dmg[data-cond="charmed"] .gm-dmg__cap { text-transform: none; padding-top: calc(0.34em + 6px); margin-top: -6px; animation: dmg-lift 3.8s cubic-bezier(0.4, 0, 0.35, 1) infinite; } @keyframes dmg-lift { /* левый край уходит вверх */ 0%, 100% { clip-path: polygon(5% 19%, 25% 19%, 50% 19%, 75% 19%, 95% 19%, 100% 38%, 100% 68%, 95% 100%, 75% 100%, 50% 100%, 25% 100%, 5% 100%, 0% 68%, 0% 38%); } 50% { clip-path: polygon(5% 0%, 25% 6%, 50% 12%, 75% 16%, 95% 19%, 100% 38%, 100% 68%, 95% 100%, 75% 96%, 50% 92%, 25% 86%, 5% 81%, 0% 52%, 0% 20%); } 76% { clip-path: polygon(5% 6%, 25% 10%, 50% 14%, 75% 17%, 95% 19%, 100% 38%, 100% 68%, 95% 100%, 75% 98%, 50% 95%, 25% 91%, 5% 88%, 0% 58%, 0% 27%); } } .gm-dmg[data-cond="charmed"] .gm-dmg__ch { animation: dmg-lift-ch 3.8s cubic-bezier(0.4, 0, 0.35, 1) infinite; } @keyframes dmg-lift-ch { /* буквы поднимаются вслед за рукой */ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--k, 0) * -5px)); } 76% { transform: translateY(calc(var(--k, 0) * -2.6px)); } } /* ПАРАЛИЧ — капсулу стягивают ТОЛСТЫЕ верёвки с узлом, поверх лежит цепь. Верёвки рисуются целиком (тело + витьё прорезано в маске) и отбрасывают тень — иначе на серой капсуле путы читались как случайные полоски. */ /* Обвязка идёт ПО КРАЯМ и КРОМКАМ — центр капсулы остаётся тексту. Витые обмотки у торцов + нижний виток + узел; всё с тенью, чтобы читалось. */ .gm-dmg[data-cond="paralyzed"] .gm-dmg__cap > span::before { content: ''; inset: -0.62em -1.3em; background: linear-gradient(178deg, color-mix(in srgb, var(--fx) 45%, #fff) 0%, var(--fx) 45%, color-mix(in srgb, var(--fx) 55%, #000) 100%); mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5)); opacity: 0.95; } /* Буквы лежат поверх пут — отрываем их подложкой в цвет капсулы */ .gm-dmg[data-cond="paralyzed"] .gm-dmg__cap > span { text-shadow: 0 0 3px var(--dmg-c-tint), 0 0 2px var(--dmg-c-tint), 0 1px 1px var(--dmg-c-tint); } /* Цепь легла по ВЕРХНЕЙ кромке — тоже мимо текста */ .gm-dmg[data-cond="paralyzed"] .gm-dmg__cap > span::after { content: ''; left: -1.3em; right: -1.3em; top: -0.52em; bottom: auto; height: 0.92em; transform: rotate(-1.5deg); background: linear-gradient(180deg, color-mix(in srgb, var(--fx) 45%, #fff) 0%, var(--fx) 55%, color-mix(in srgb, var(--fx) 55%, #000) 100%); mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5)); opacity: 0.95; } /* Путы ВРЕЗАЮТСЯ в капсулу: силуэт продавлен ровно там, где витки — видно, что её сжимают, а середина (текст) не тронута */ .gm-dmg[data-cond="paralyzed"] .gm-dmg__cap { clip-path: polygon(0% 6%, 7% 14%, 14% 2%, 30% 0%, 50% 0%, 70% 0%, 86% 2%, 93% 14%, 100% 6%, 100% 94%, 93% 86%, 86% 98%, 70% 100%, 50% 100%, 30% 100%, 14% 98%, 7% 86%, 0% 94%); animation: dmg-strain 5.2s ease-in-out infinite; } @keyframes dmg-strain { /* дёрнулся — путы держат */ 0%, 58% { transform: translateX(0) scaleY(1); } 63% { transform: translateX(-0.7px) scaleY(1.035); } 67% { transform: translateX(0.6px) scaleY(0.985); } 71% { transform: translateX(-0.3px) scaleY(1.015); } 78%, 100% { transform: translateX(0) scaleY(1); } } /* ИСПУГ — капсулу колотит короткими приступами */ .gm-dmg[data-cond="frightened"] .gm-dmg__cap { animation: dmg-shiver 3.6s steps(1, end) infinite; } @keyframes dmg-shiver { 0% { transform: translate(0, 0) rotate(0deg); } 2% { transform: translate(-0.9px, 0.5px) rotate(-0.8deg); } 4% { transform: translate(0.8px, -0.6px) rotate(0.7deg); } 6% { transform: translate(-0.7px, -0.4px) rotate(-0.5deg); } 8% { transform: translate(0.9px, 0.5px) rotate(0.9deg); } 10% { transform: translate(-0.6px, 0.3px) rotate(-0.6deg); } 12% { transform: translate(0.5px, -0.3px) rotate(0.4deg); } 14% { transform: translate(0, 0) rotate(0deg); } 46% { transform: translate(0, 0) rotate(0deg); } 48% { transform: translate(0.8px, -0.5px) rotate(0.7deg); } 50% { transform: translate(-0.9px, 0.4px) rotate(-0.9deg); } 52% { transform: translate(0.6px, 0.5px) rotate(0.5deg); } 54% { transform: translate(-0.5px, -0.3px) rotate(-0.4deg); } 56%, 100% { transform: translate(0, 0) rotate(0deg); } } /* ОТРАВЛЕНИЕ — капсулу СГИБАЕТ пополам: форма выгибается дугой вниз (clip-path анимируется), текст едет по той же дуге. Запас снизу (padding+отрицательный margin) даёт место для прогиба, не двигая соседей. */ .gm-dmg[data-cond="poisoned"] .gm-dmg__cap { text-transform: none; padding-bottom: calc(0.34em + 6px); margin-bottom: -6px; animation: dmg-retch 4.4s cubic-bezier(0.4, 0, 0.35, 1) infinite; } @keyframes dmg-retch { 0%, 100% { clip-path: polygon(5% 0%, 25% 0%, 50% 0%, 75% 0%, 95% 0%, 100% 22%, 100% 58%, 95% 81%, 75% 81%, 50% 81%, 25% 81%, 5% 81%, 0% 58%, 0% 22%); } 40% { clip-path: polygon(5% 1%, 25% 8%, 50% 15%, 75% 8%, 95% 1%, 100% 24%, 100% 62%, 95% 84%, 75% 92%, 50% 99%, 25% 92%, 5% 84%, 0% 62%, 0% 24%); } 62% { clip-path: polygon(5% 0%, 25% 4%, 50% 8%, 75% 4%, 95% 0%, 100% 22%, 100% 59%, 95% 82%, 75% 87%, 50% 91%, 25% 87%, 5% 82%, 0% 59%, 0% 22%); } 84% { clip-path: polygon(5% 1%, 25% 9%, 50% 17%, 75% 9%, 95% 1%, 100% 25%, 100% 63%, 95% 85%, 75% 93%, 50% 100%, 25% 93%, 5% 85%, 0% 63%, 0% 25%); } } .gm-dmg[data-cond="poisoned"] .gm-dmg__ch { animation: dmg-slump 4.4s cubic-bezier(0.4, 0, 0.35, 1) infinite; } @keyframes dmg-slump { /* буквы проваливаются дугой */ 0%, 100% { transform: translateY(0); } 40% { transform: translateY(calc(var(--k, 0) * 4px)); } 62% { transform: translateY(calc(var(--k, 0) * 2.1px)); } 84% { transform: translateY(calc(var(--k, 0) * 4.6px)); } } /* Сопротивление — та же стихия, но «замороженная»: движение глушим на всех новых слоях (холст уже приглушён res-правилом выше), глифовые слои тише. Капсул состояний это НЕ касается — их повадка и есть содержание. */ .gm-dmg[data-level="res"]:not([data-cond]) .gm-dmg__cap, .gm-dmg[data-level="res"]:not([data-cond]) .gm-dmg__cap > span, .gm-dmg[data-level="res"]:not([data-cond]) .gm-dmg__cap > span::before, .gm-dmg[data-level="res"]:not([data-cond]) .gm-dmg__cap > span::after, .gm-dmg[data-level="res"]:not([data-cond]) .gm-dmg__ch, .gm-dmg[data-level="res"]:not([data-cond]) .gm-dmg__ch::after { animation: none !important; } .gm-dmg[data-level="res"]:not([data-cond]) .gm-dmg__cap > span::before, .gm-dmg[data-level="res"]:not([data-cond]) .gm-dmg__cap > span::after { opacity: 0.25; } .gm-dmg[data-level="res"][data-type="radiant"] .gm-dmg__cap > span::before { opacity: 0; } /* засветка на res скрыта всегда */ /* Слои, которые НЕСУТ смысл и на сопротивлении (материал и форма, а не движение): прожилки магмы, грозовая туча, следы ударов по металлу — гасить их до 0.25 нельзя. */ .gm-dmg[data-level="res"][data-type="fire"] .gm-dmg__cap > span::before { opacity: 0.55; } .gm-dmg[data-level="res"][data-type="thunder"] .gm-dmg__cap > span::before { opacity: 0.42; } .gm-dmg[data-level="res"][data-type="poison"] .gm-dmg__cap > span::before { opacity: 0.34; } .gm-dmg[data-level="res"][data-type="bludgeoning"] .gm-dmg__cap > span::before, .gm-dmg[data-level="res"][data-type="piercing"] .gm-dmg__cap > span::before { opacity: 0.5; } .gm-dmg[data-level="res"][data-type="cold"] .gm-dmg__cap > span::after { opacity: 0.75; } /* Остановка движения при prefers-reduced-motion (стихия остаётся статичной) */ @media (prefers-reduced-motion: reduce) { .gm-dmg::before, .gm-dmg__cap, .gm-dmg__cap::before, .gm-dmg__cap::after, .gm-dmg__cap > span, .gm-dmg__cap > span::before, .gm-dmg__cap > span::after, .gm-dmg__ch, .gm-dmg__ch::after { animation: none !important; } } /* Заклинание, раскрытое ПРЯМО в Базе знаний (без шторки): те же блоки, что и в всплывающей карточке, только сложены в поток страницы. */ .gm-spell-inline { display: flex; flex-direction: column; gap: 12px; } /* Найденные повторы: имя записи + сколько лишних копий уйдёт */ .gm-dupes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; } .gm-dupes li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; background: var(--card-sunk); border: var(--bw-hair) solid var(--edge-hair); border-radius: var(--radius-sm); padding: 8px 11px; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-1); } .gm-dupes b { font-weight: 700; color: var(--danger); white-space: nowrap; }