/* Кузня Миров — «Пепел и свечи»: мрачный фэнтези-слой поверх app.css.
   Действует только в тёмной теме. Чтобы вернуть прежний вид — уберите этот файл из index.html.
   Все селекторы обёрнуты в :where(), поэтому их вес такой же, как в app.css: особые карточки
   (бой, сессия, ходы) сохраняют свой цвет. */

@property --cc { syntax: '<color>'; inherits: true; initial-value: rgba(184,138,64,.42); }
:root:not([data-theme=light]) {
  --bg: #0b0a09;
  --bg2: #100e0c;
  --panel: #15120f;
  --panel2: #1d1914;
  --line: #2b241d;
  --line2: #443829;
  --text: #e4d8c2;
  --muted: #a5987f;
  --faint: #978871;
  --gold: #b88a40;
  --gold2: #dfb56b;
  --red: #a83b29;
  --green: #6f965a;
  --blue: #6489ab;
  --violet: #9274b3;
  --blood: #5c150e;
  --ember: #d9692c;
  --radius: 4px;
  --shadow: 0 16px 44px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.5);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* гравированные уголки рамки: цвет, длина, отступ от края */
  --cc: rgba(184,138,64,.42); --cl: 13px; --co: 5px;
  color-scheme: dark;
  scrollbar-color: #3a2f24 #0b0a09;
}

/* ── фон: свеча сверху, тлеющий жар снизу, пепел в воздухе */
:where(:root:not([data-theme=light])) body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -15%, rgba(200,150,70,.085), transparent 65%),
    radial-gradient(ellipse 70% 55% at 105% 110%, rgba(120,28,16,.22), transparent 60%),
    radial-gradient(ellipse 60% 45% at -10% 105%, rgba(217,105,44,.07), transparent 60%);
  background-attachment: fixed;
}
/* Искры и пыль рисует js/fx-ambient.js на холсте под содержимым.
   Здесь — дышащий жар у нижнего края и, поверх холста, виньетка и зерно. */
:where(:root:not([data-theme=light])) body::before {
  content: ''; position: fixed; left: -10%; right: -10%; bottom: -30vh; height: 70vh; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(190,70,25,.16), rgba(120,25,12,.07) 45%, transparent 75%);
  animation: grim-heat 7s ease-in-out infinite;
}
@keyframes grim-heat { 0%, 100% { opacity: .7; transform: scaleY(1); } 35% { opacity: 1; transform: scaleY(1.06); } 60% { opacity: .8; transform: scaleY(.97); } }
:where(:root:not([data-theme=light])) body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(0,0,0,.6) 100%),
    var(--grain);
}
:where(:root:not([data-theme=light])) ::selection { background: rgba(168,59,41,.55); color: #fff3e0; }

/* ── полосы прокрутки */
:where(:root:not([data-theme=light])) ::-webkit-scrollbar { width: 10px; height: 10px; }
:where(:root:not([data-theme=light])) ::-webkit-scrollbar-track { background: transparent; }
:where(:root:not([data-theme=light])) ::-webkit-scrollbar-thumb { background: #2f261d; border: 2px solid var(--bg); border-radius: 6px; }
:where(:root:not([data-theme=light])) ::-webkit-scrollbar-thumb:hover { background: #4a3b2a; }

/* ── типографика */
:where(:root:not([data-theme=light])) :is(h1, h2) { color: #ecdcb8; letter-spacing: .015em; text-shadow: 0 0 22px rgba(223,181,107,.14), 0 2px 1px rgba(0,0,0,.9); }
:where(:root:not([data-theme=light])) h3 { color: #e6d5b2; }
:where(:root:not([data-theme=light])) a { color: var(--gold2); }
:where(:root:not([data-theme=light])) hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line2) 20%, rgba(184,138,64,.45) 50%, var(--line2) 80%, transparent); }
:where(:root:not([data-theme=light])) .page-head {
  padding-bottom: 14px;
  background: linear-gradient(90deg, rgba(184,138,64,.55), var(--line2) 35%, transparent 90%) left bottom / 100% 1px no-repeat;
}
:where(:root:not([data-theme=light])) .group-title { font-variant: small-caps; letter-spacing: .04em; }
:where(:root:not([data-theme=light])) .group-title::after { border-top: 0; height: 1px; background: linear-gradient(90deg, rgba(184,138,64,.5), var(--line) 40%, transparent); }
:where(:root:not([data-theme=light])) .prose blockquote { border-left-color: var(--blood); background: linear-gradient(90deg, rgba(92,21,14,.25), transparent 70%); font-style: italic; }

/* ── шапка и меню */
:where(:root:not([data-theme=light])) .topbar {
  background: linear-gradient(180deg, rgba(7,6,5,.97), rgba(13,11,9,.93));
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(184,138,64,.16), 0 10px 28px rgba(0,0,0,.55);
}
:where(:root:not([data-theme=light])) .brand { color: var(--gold2); letter-spacing: .03em; text-shadow: 0 0 16px rgba(223,181,107,.3), 0 2px 1px #000; }
:where(:root:not([data-theme=light])) .brand svg { filter: drop-shadow(0 0 6px rgba(217,105,44,.45)); }
:where(:root:not([data-theme=light])) .topbar .world-name { color: #ecdcb8; }
:where(:root:not([data-theme=light])) .sidebar {
  background: linear-gradient(90deg, #070605, #0d0b09);
  border-right: 1px solid #000;
  box-shadow: inset -1px 0 0 rgba(184,138,64,.1);
}
:where(:root:not([data-theme=light])) .nav a { border-radius: 3px; transition: background-color .2s, color .2s; }
:where(:root:not([data-theme=light])) .nav a:hover { background: rgba(184,138,64,.07); color: #f1e4c8; }
:where(:root:not([data-theme=light])) .nav a.on {
  background: linear-gradient(90deg, rgba(184,138,64,.18), rgba(184,138,64,.03) 80%, transparent);
  color: var(--gold2); text-shadow: 0 0 12px rgba(223,181,107,.35);
  box-shadow: inset 2px 0 0 var(--gold), inset 0 1px 0 rgba(184,138,64,.12), inset 0 -1px 0 rgba(0,0,0,.6);
}
:where(:root:not([data-theme=light])) .nav .group { font-family: var(--serif); font-size: 12.5px; font-weight: 700; letter-spacing: .22em; color: #8f7f63; }
:where(:root:not([data-theme=light])) .bottomnav { background: linear-gradient(0deg, rgba(6,5,4,.98), rgba(12,10,8,.96)); border-top: 1px solid #000; box-shadow: 0 -1px 0 rgba(184,138,64,.14); }

/* ── панели: тёмный пергамент, зерно и гравированные уголки */
:where(:root:not([data-theme=light])) :is(.card, .modal):not(.sessbar, .combatbanner, .actbar, .turnbar) {
  --corners:
    linear-gradient(var(--cc), var(--cc)) left var(--co) top var(--co) / var(--cl) 1px no-repeat,
    linear-gradient(var(--cc), var(--cc)) left var(--co) top var(--co) / 1px var(--cl) no-repeat,
    linear-gradient(var(--cc), var(--cc)) right var(--co) top var(--co) / var(--cl) 1px no-repeat,
    linear-gradient(var(--cc), var(--cc)) right var(--co) top var(--co) / 1px var(--cl) no-repeat,
    linear-gradient(var(--cc), var(--cc)) left var(--co) bottom var(--co) / var(--cl) 1px no-repeat,
    linear-gradient(var(--cc), var(--cc)) left var(--co) bottom var(--co) / 1px var(--cl) no-repeat,
    linear-gradient(var(--cc), var(--cc)) right var(--co) bottom var(--co) / var(--cl) 1px no-repeat,
    linear-gradient(var(--cc), var(--cc)) right var(--co) bottom var(--co) / 1px var(--cl) no-repeat;
  background: var(--corners), var(--grain), linear-gradient(180deg, #19150f, #110f0c 70%);
}
:where(:root:not([data-theme=light])) :is(.card, .sheet .box, .popover, .gimg, .statgrid a) {
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255,225,170,.035), 0 8px 22px rgba(0,0,0,.4);
}
:where(:root:not([data-theme=light])) :is(.sheet .box, .popover, .legendpanel, .combatpanel, .gsres) {
  background: var(--grain), linear-gradient(180deg, #18140f, #110f0c);
}
:where(:root:not([data-theme=light])) .sheet .box h4 { font-family: var(--serif); font-size: 16px; letter-spacing: .14em; }
:where(:root:not([data-theme=light])) .login {
  --cl: 22px; --co: 7px; --cc: rgba(200,150,70,.55);
  padding: 30px 28px; border-color: #3a2f22;
  box-shadow: 0 0 0 1px #000, 0 0 70px rgba(217,105,44,.09), 0 30px 80px rgba(0,0,0,.85);
}
:where(:root:not([data-theme=light])) .login-wrap { position: relative; }
:where(:root:not([data-theme=light])) .login-wrap::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 720px; height: 720px; max-width: 140vw; transform: translate(-50%, -54%);
  background: radial-gradient(circle, rgba(217,120,50,.13), rgba(120,30,16,.06) 40%, transparent 68%);
  pointer-events: none; animation: grim-candle 5s ease-in-out infinite;
}
:where(:root:not([data-theme=light])) .login-wrap > * { position: relative; }
@keyframes grim-candle { 0%, 100% { opacity: .85; } 30% { opacity: 1; } 45% { opacity: .7; } 60% { opacity: .95; } }
:where(:root:not([data-theme=light])) .login .brand { justify-content: center; font-size: 32px !important; margin-bottom: 2px; }
:where(:root:not([data-theme=light])) .login .brand + p { text-align: center; font-style: italic; }

/* ── карточки сущностей */
:where(:root:not([data-theme=light])) .ecard {
  border-radius: var(--radius);
  background: var(--grain), linear-gradient(180deg, #18140f, #12100d);
  box-shadow: inset 0 1px 0 rgba(255,225,170,.03), 0 4px 14px rgba(0,0,0,.35);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
:where(:root:not([data-theme=light])) .ecard:hover { border-color: #5c4a33; box-shadow: inset 0 1px 0 rgba(255,225,170,.05), 0 0 0 1px rgba(184,138,64,.15), 0 10px 26px rgba(0,0,0,.55), 0 0 30px rgba(217,105,44,.06); }
:where(:root:not([data-theme=light])) :is(.ecard .thumb, .ehead .portrait, .cav) {
  border-radius: 3px; border-color: #3d3226;
  box-shadow: inset 0 0 14px rgba(0,0,0,.75), 0 0 0 1px #000;
}
:where(:root:not([data-theme=light])) .ehead .portrait { box-shadow: inset 0 0 30px rgba(0,0,0,.8), 0 0 0 1px #000, 0 0 0 4px #15120f, 0 0 0 5px #3d3226, 0 10px 30px rgba(0,0,0,.6); }
:where(:root:not([data-theme=light])) .ecard .t { color: #ecdcb8; }
:where(:root:not([data-theme=light])) .statgrid a { border-radius: var(--radius); background: var(--grain), linear-gradient(180deg, #18140f, #110f0c); }
:where(:root:not([data-theme=light])) .statgrid a:hover { border-color: #5c4a33; box-shadow: 0 0 24px rgba(217,105,44,.08); }
:where(:root:not([data-theme=light])) .statgrid b { text-shadow: 0 0 14px rgba(223,181,107,.25); }

/* ── кнопки: латунь, железо и кровь */
:where(:root:not([data-theme=light])) .btn {
  border-radius: 3px;
  background: linear-gradient(180deg, #252019, #1a1612);
  border-color: #3e3326;
  box-shadow: inset 0 1px 0 rgba(255,225,170,.06), 0 1px 2px rgba(0,0,0,.6);
  transition: background .2s, border-color .2s, box-shadow .2s, color .2s, transform .05s;
}
:where(:root:not([data-theme=light])) .btn:hover { background: linear-gradient(180deg, #2e271e, #211b15); border-color: #7a6040; box-shadow: inset 0 1px 0 rgba(255,225,170,.08), 0 0 14px rgba(217,105,44,.12); }
:where(:root:not([data-theme=light])) .btn.primary {
  background: linear-gradient(180deg, #c99a4e, #9a6e2c 60%, #7d5620);
  border-color: #d6ab62; color: #170f05;
  text-shadow: 0 1px 0 rgba(255,220,150,.35);
  box-shadow: inset 0 1px 0 rgba(255,235,190,.45), inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,.5);
}
:where(:root:not([data-theme=light])) .btn.primary:hover { background: linear-gradient(180deg, #d8aa5c, #a97a33 60%, #8a6025); box-shadow: inset 0 1px 0 rgba(255,235,190,.5), inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px #000, 0 0 22px rgba(217,135,50,.35); }
:where(:root:not([data-theme=light])) .btn.danger { background: linear-gradient(180deg, #2a1410, #1c0d0a); border-color: #6b2518; color: #eea08c; }
:where(:root:not([data-theme=light])) .btn.danger:hover { background: linear-gradient(180deg, #3d1912, #27100c); border-color: var(--red); box-shadow: 0 0 16px rgba(168,59,41,.35); }
:where(:root:not([data-theme=light])) .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
:where(:root:not([data-theme=light])) .btn.ghost:hover { background: rgba(184,138,64,.07); border-color: var(--line); }
:where(:root:not([data-theme=light])) .btn.on { border-color: var(--gold); color: var(--gold2); box-shadow: inset 0 0 12px rgba(184,138,64,.15); }

/* ── поля ввода: утоплены в камень */
:where(:root:not([data-theme=light])) :is(input[type=text], input[type=password], input[type=number], input[type=search], select, textarea) {
  background: #0c0a08; border-color: #2e261e; border-radius: 3px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.65), 0 1px 0 rgba(255,225,170,.03);
}
:where(:root:not([data-theme=light])) :is(input, select, textarea):focus { border-color: #8a6a3a; box-shadow: inset 0 2px 6px rgba(0,0,0,.65), 0 0 0 3px rgba(184,138,64,.12); }
:where(:root:not([data-theme=light])) ::placeholder { color: #6f6352; }

/* ── мелочи: значки, фишки, вкладки */
:where(:root:not([data-theme=light])) .chip { border-radius: 3px; background: #0f0d0b; border-color: #2e261e; }
:where(:root:not([data-theme=light])) .chip.on { background: linear-gradient(180deg, #2c2416, #1f1910); border-color: var(--gold); box-shadow: 0 0 10px rgba(184,138,64,.15); }
:where(:root:not([data-theme=light])) .badge { border-radius: 2px; letter-spacing: .02em; }
:where(:root:not([data-theme=light])) .tag { border-radius: 2px; }
:where(:root:not([data-theme=light])) .tabs { border-bottom-color: var(--line2); }
:where(:root:not([data-theme=light])) .tabs button { font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: .02em; }
:where(:root:not([data-theme=light])) .tabs button.on { text-shadow: 0 0 12px rgba(223,181,107,.4); border-image: linear-gradient(90deg, transparent, var(--gold), transparent) 1; }
:where(:root:not([data-theme=light])) .empty { border-radius: var(--radius); border-color: #33291f; background: radial-gradient(ellipse at center, rgba(184,138,64,.04), transparent 70%); font-style: italic; }

/* ── окна и уведомления */
:where(:root:not([data-theme=light])) .modal-back { background: radial-gradient(ellipse at center, rgba(10,6,4,.55), rgba(0,0,0,.85)); backdrop-filter: blur(3px); }
:where(:root:not([data-theme=light])) .modal {
  --cl: 16px; --co: 6px;
  border-radius: 5px; border-color: #3f3426;
  box-shadow: 0 0 0 1px #000, 0 30px 90px rgba(0,0,0,.9), 0 0 60px rgba(217,105,44,.05);
}
:where(:root:not([data-theme=light])) .modal .mh { border-bottom-color: var(--line); background: linear-gradient(180deg, rgba(184,138,64,.06), transparent); }
:where(:root:not([data-theme=light])) .modal .mh h3 { color: #ecdcb8; letter-spacing: .02em; }
:where(:root:not([data-theme=light])) .toast { border-radius: 3px; background: var(--grain), linear-gradient(180deg, #1e1914, #15120f); box-shadow: 0 0 0 1px #000, 0 12px 30px rgba(0,0,0,.7); }

/* ── кубы и броски */
:where(:root:not([data-theme=light])) .die {
  border-radius: 6px; border-color: #3a3024;
  background: var(--grain), radial-gradient(circle at 50% 35%, #221c15, #100e0b 75%);
  box-shadow: inset 0 1px 0 rgba(255,225,170,.06), inset 0 -10px 20px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.5);
  text-shadow: 0 0 12px rgba(223,181,107,.35);
}
:where(:root:not([data-theme=light])) .die:hover { border-color: #8a6a3a; box-shadow: inset 0 1px 0 rgba(255,225,170,.08), inset 0 -10px 20px rgba(0,0,0,.5), 0 0 22px rgba(217,105,44,.22); }
:where(:root:not([data-theme=light])) .dice-total { text-shadow: 0 0 18px rgba(223,181,107,.35); }
:where(:root:not([data-theme=light])) .dice-total.crit { text-shadow: 0 0 16px rgba(130,200,100,.6); }
:where(:root:not([data-theme=light])) .dice-total.fail { color: #e0634a; text-shadow: 0 0 16px rgba(168,59,41,.7); }
:where(:root:not([data-theme=light])) .hpbar i, :where(:root:not([data-theme=light])) .token .thp i { background: linear-gradient(90deg, #6e1a10, #a83b29 40%, #6f965a); }

/* ── журнал и бой */
:where(:root:not([data-theme=light])) .jentry .ic { box-shadow: inset 0 0 8px rgba(0,0,0,.6), 0 0 0 1px #000; }
:where(:root:not([data-theme=light])) .combatbanner { background: linear-gradient(90deg, #2c100b, #15120f 75%); border-color: #6b2518; box-shadow: 0 0 24px rgba(168,59,41,.15); }
:where(:root:not([data-theme=light])) .sessbar { background: linear-gradient(90deg, #241009, #15120f); }
:where(:root:not([data-theme=light])) :is(table.ctable tr.cur td, .cprow.cur) { background: linear-gradient(90deg, rgba(184,138,64,.16), rgba(184,138,64,.04)); }
:where(:root:not([data-theme=light])) .viewport { background: radial-gradient(ellipse at center, #0f0d0a, #050404); }

/* ═════════ Живые эффекты (выключаются вместе с частицами: html[data-fx=off]) ═════════ */
/* знак в шапке горит, как свеча */
:where(:root:not([data-theme=light]):not([data-fx=off])) .brand svg { animation: grim-flame 4.2s ease-in-out infinite; }
@keyframes grim-flame {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(217,105,44,.45)); }
  20% { filter: drop-shadow(0 0 9px rgba(240,140,60,.7)); }
  32% { filter: drop-shadow(0 0 4px rgba(217,105,44,.35)); }
  55% { filter: drop-shadow(0 0 8px rgba(230,130,55,.6)); }
  70% { filter: drop-shadow(0 0 6px rgba(217,105,44,.5)); }
}
/* активный пункт меню: значок тлеет */
:where(:root:not([data-theme=light]):not([data-fx=off])) .nav a.on .ico { animation: grim-glow 3s ease-in-out infinite; }
@keyframes grim-glow { 0%, 100% { text-shadow: 0 0 6px rgba(230,150,70,.35); } 50% { text-shadow: 0 0 12px rgba(240,160,80,.8), 0 0 2px rgba(255,210,150,.9); } }
:where(:root) .nav a .ico { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
:where(:root) .nav a:hover .ico { transform: translateX(2px) scale(1.12); }

/* главная кнопка: по латуни пробегает блик */
:where(:root) .btn.primary { position: relative; overflow: hidden; isolation: isolate; }
:where(:root) .btn.primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,240,200,.55), transparent);
  transform: skewX(-18deg) translateX(0); opacity: 0;
}
:where(:root:not([data-fx=off])) .btn.primary:hover::after { animation: grim-sheen .8s cubic-bezier(.3,.6,.3,1); }
@keyframes grim-sheen { 0% { opacity: 1; transform: skewX(-18deg) translateX(0); } 100% { opacity: 1; transform: skewX(-18deg) translateX(420%); } }
:where(:root) .btn:active { transform: translateY(1px) scale(.98); }

/* свет свечи под курсором (координаты --mx/--my ставит js/fx-ambient.js) */
:where(:root) :is(.statgrid a, .gimg, .obstep) { position: relative; }
:where(:root) :is(.ecard, .die, .statgrid a, .gimg, .obstep)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--fxglow, rgba(230,150,70,.11)), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
:where(:root:not([data-fx=off])) :is(.ecard, .die, .statgrid a, .gimg, .obstep):hover::after { opacity: 1; }
:where(:root:not([data-theme=light])) .ecard .thumb { transition: box-shadow .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
:where(:root:not([data-theme=light])) .ecard:hover .thumb { transform: scale(1.05); box-shadow: inset 0 0 14px rgba(0,0,0,.6), 0 0 0 1px #000, 0 0 14px rgba(217,105,44,.18); }

/* кубы: при наведении чуть поворачиваются, при нажатии — вдавливаются */
:where(:root) .die { transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s; }
:where(:root) .die:hover { transform: translateY(-3px) rotate(-3deg); }
:where(:root) .die:active { transform: translateY(0) scale(.94) rotate(2deg); transition-duration: .08s; }
:where(:root) .die svg { transition: opacity .3s, transform .6s cubic-bezier(.2,.8,.2,1); }
:where(:root) .die:hover svg { opacity: .3; transform: rotate(30deg); }

/* результат броска появляется из огня */
:where(:root:not([data-fx=off])) .dice-total.pop { animation: grim-reveal .6s cubic-bezier(.2,.8,.2,1); }
@keyframes grim-reveal {
  0% { opacity: 0; transform: scale(.5) rotate(-10deg); filter: blur(6px) brightness(2.5); }
  55% { opacity: 1; transform: scale(1.12) rotate(2deg); filter: blur(0) brightness(1.6); }
  100% { transform: scale(1); filter: none; }
}
:where(:root:not([data-fx=off])) .dice-total.pop.crit { animation: grim-reveal .6s cubic-bezier(.2,.8,.2,1), grim-crit 1.8s .6s ease-in-out 2; }
@keyframes grim-crit { 50% { text-shadow: 0 0 28px rgba(150,230,110,.9), 0 0 6px #fff; } }
:where(:root:not([data-fx=off])) .dice-total.pop.fail { animation: grim-reveal .6s cubic-bezier(.2,.8,.2,1), grim-shake .45s .55s; }
@keyframes grim-shake { 20% { transform: translateX(-5px) rotate(-2deg); } 40% { transform: translateX(4px) rotate(1deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* окна поднимаются из тьмы */
:where(:root:not([data-fx=off])) .modal { animation: grim-rise .32s cubic-bezier(.2,.8,.2,1); }
@keyframes grim-rise { from { opacity: 0; transform: translateY(14px) scale(.97); } }
:where(:root:not([data-fx=off])) .toast { animation: grim-toast .4s cubic-bezier(.2,.8,.2,1); }
@keyframes grim-toast { from { opacity: 0; transform: translateX(24px); } }

/* идёт бой: баннер и кнопка в шапке тревожно пульсируют */
:where(:root) .combatbanner { position: relative; }
:where(:root) .combatbanner::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(200,60,40,.6), 0 0 26px rgba(200,50,30,.35); opacity: 0;
}
:where(:root:not([data-fx=off])) .combatbanner::after { animation: grim-alarm 2.4s ease-in-out infinite; }
@keyframes grim-alarm { 50% { opacity: 1; } }
:where(:root:not([data-fx=off])) .topbar .btn.danger { animation: grim-alarm-btn 2.4s ease-in-out infinite; }
@keyframes grim-alarm-btn { 50% { box-shadow: 0 0 14px rgba(200,50,30,.5); border-color: #b8442e; } }

/* поле ввода в фокусе: тёплая искра по нижней кромке */
:where(:root:not([data-theme=light])) :is(input[type=text], input[type=password], input[type=number], input[type=search], textarea):focus {
  background-image: linear-gradient(90deg, transparent, rgba(223,160,80,.55), transparent);
  background-size: 100% 1px; background-position: bottom; background-repeat: no-repeat;
}

/* вход: искры гуще, рамка медленно разгорается */
:where(:root:not([data-theme=light]):not([data-fx=off])) .login { animation: grim-rise .7s cubic-bezier(.2,.8,.2,1), grim-frame 6s 1s ease-in-out infinite; }
@keyframes grim-frame { 50% { --cc: rgba(230,170,80,.85); box-shadow: 0 0 0 1px #000, 0 0 90px rgba(217,105,44,.16), 0 30px 80px rgba(0,0,0,.85); } }