/* Темы оформления. Каждая переопределяет переменные из style.css и немного формы;
   декорации фона для каждой темы рисует fx.js. Тема включается атрибутом <html data-theme="…">.
   «anime» — это style.css как есть. */

/* ======================= Тёмное фэнтези: угли, пергамент, кровь и старое золото ======================= */
[data-theme="fantasy"] {
  --body-bg:
    radial-gradient(1100px 520px at 50% 115%, rgba(196, 72, 24, .32), transparent 65%),
    radial-gradient(700px 420px at 90% -10%, rgba(120, 20, 20, .28), transparent 60%),
    linear-gradient(180deg, #0b0807 0%, #15100d 55%, #1d1410 100%) fixed;
  --glow: 214, 120, 52;
  --glow-2: 150, 34, 30;
  --glow-3: 205, 172, 112;
  --red-rgb: 200, 50, 40;
  --surface: 34, 26, 21;
  --surface-2: 20, 15, 12;
  --deep: 8, 6, 5;
  --hi: 255, 232, 200;
  --text-hi: #fff4e2;
  --on-accent: #1a0c06;
  --option-bg: #1e1611;
  --bubble: linear-gradient(135deg, #ecdfc2, #d8c49c 60%, #c9b184);
  --bubble-tail: #c9b184;
  --bubble-em: #6b1f17;
  --bubble-ooc: linear-gradient(135deg, #d9d2c0, #b9b09a);
  --bubble-ooc-tail: #b9b09a;
  --narrator: '⚔ Рассказчик';
  --ornament: '⚜ ✠ ⚜';
  --bullet: '✠ ';
  --empty-face: '☠';
  --err-face: '✖ ';
  --toast-mark: '⚜ ';
  --head-mark: '⚔ ';
  --hero-sub: 'хроники · клинки · кровь';
  --bg: #0b0807;
  --bg-2: rgba(22, 16, 13, .97);
  --panel: rgba(40, 30, 24, .55);
  --panel-2: rgba(62, 45, 34, .7);
  --glass: rgba(22, 16, 12, .72);
  --line: rgba(205, 160, 105, .15);
  --line-2: rgba(214, 170, 110, .32);
  --text: #efe4d2;
  --text-2: #cdbb9e;
  --muted: #8f7c63;
  --pink: #d9773a;
  --pink-2: #e8b27a;
  --violet: #9e2b25;
  --violet-2: #d99a6a;
  --cyan: #c9a96b;
  --gold: #e0b25c;
  --pink-dim: rgba(217, 119, 58, .16);
  --grad: linear-gradient(120deg, #8e1f1a 0%, #c8622c 55%, #e0b25c 100%);
  --grad-soft: linear-gradient(120deg, rgba(142, 31, 26, .3), rgba(200, 98, 44, .18) 55%, rgba(224, 178, 92, .12));
  --red: #e0544a;
  --green: #a3c27a;
  --amber: #e0b25c;
  --blue: #c9a96b;
  --prose: 'PT Serif', Georgia, serif;
  --display: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  --sans: 'PT Sans', 'Segoe UI', sans-serif;
  --radius: 6px;
}
[data-theme="fantasy"] .msg-ai { border-radius: 4px; background: linear-gradient(180deg, rgba(38, 28, 22, .86), rgba(18, 13, 10, .9)); }
[data-theme="fantasy"] .msg-ai::after { border-radius: 2px; letter-spacing: 2.5px; }
[data-theme="fantasy"] .msg-user { border-radius: 4px; font-family: var(--prose); font-weight: 400; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 30px rgba(120, 80, 30, .25); }
[data-theme="fantasy"] .msg-user .who { border-radius: 2px; }
[data-theme="fantasy"] :is(.btn, .chip, .tab, .filter, #tabs, .tag, .badge, .toast) { border-radius: 3px; }
[data-theme="fantasy"] .icon-btn { border-radius: 4px; }
[data-theme="fantasy"] #input { border-radius: 6px; }
[data-theme="fantasy"] dialog { border-radius: 8px; }
[data-theme="fantasy"] .prose p:first-child::first-letter { font-size: 3.4em; }
[data-theme="fantasy"] .brand svg { filter: drop-shadow(0 0 10px rgba(214, 120, 52, .8)) sepia(.8) hue-rotate(-30deg) saturate(2); }
[data-theme="fantasy"] .ava { border-radius: 4px; filter: sepia(.55) saturate(1.2); }
[data-theme="fantasy"] .hero h2, [data-theme="fantasy"] #title { letter-spacing: 1px; }

/* ======================= Школа: тетрадь в клетку, ручка, стикеры ======================= */
[data-theme="school"] {
  --body-bg:
    linear-gradient(90deg, transparent 71px, rgba(232, 92, 92, .4) 72px, rgba(232, 92, 92, .4) 73px, transparent 74px),
    linear-gradient(rgba(70, 120, 210, .13) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(70, 120, 210, .13) 1px, transparent 1px) 0 0 / 24px 24px,
    #fbf9f2;
  --glow: 59, 120, 231;
  --glow-2: 239, 111, 94;
  --glow-3: 255, 196, 0;
  --red-rgb: 220, 60, 60;
  --surface: 255, 255, 255;
  --surface-2: 252, 250, 244;
  --deep: 232, 228, 216;
  --hi: 30, 50, 90;
  --text-hi: #0f1d33;
  --on-accent: #ffffff;
  --option-bg: #ffffff;
  --bubble: linear-gradient(135deg, #fff9b0, #ffef7a);
  --bubble-tail: #ffef7a;
  --bubble-em: #7a5a00;
  --bubble-ooc: linear-gradient(135deg, #d6f0ff, #b9e3ff);
  --bubble-ooc-tail: #b9e3ff;
  --narrator: '✎ Рассказчик';
  --ornament: '✎ ✐ ✎';
  --bullet: '✓ ';
  --empty-face: '(・_・;)';
  --err-face: '✗ ';
  --toast-mark: '✎ ';
  --head-mark: '✎ ';
  --hero-sub: 'школьные истории';
  --bg: #fbf9f2;
  --bg-2: rgba(251, 249, 242, .98);
  --panel: rgba(255, 255, 255, .82);
  --panel-2: #ffffff;
  --glass: rgba(255, 254, 249, .9);
  --line: rgba(40, 70, 130, .14);
  --line-2: rgba(40, 70, 130, .28);
  --text: #1f2d47;
  --text-2: #43557a;
  --muted: #7d8ba6;
  --pink: #3b78e7;
  --pink-2: #2a5fc4;
  --violet: #ef6f5e;
  --violet-2: #d0533f;
  --cyan: #e3a400;
  --gold: #e3a400;
  --pink-dim: rgba(59, 120, 231, .13);
  --grad: linear-gradient(120deg, #3b78e7, #5a95ff);
  --grad-soft: linear-gradient(120deg, rgba(59, 120, 231, .14), rgba(239, 111, 94, .08));
  --red: #d94848;
  --green: #2f9e6b;
  --amber: #d0533f;
  --blue: #3b78e7;
  --prose: 'Nunito', 'Segoe UI', sans-serif;
  --display: 'Caveat', 'Comic Sans MS', cursive;
  --sans: 'Nunito', 'Segoe UI', sans-serif;
  --radius: 10px;
  color-scheme: light;
}
[data-theme="school"] #title { font-size: 34px; }
[data-theme="school"] .hero h2 { font-size: 50px; }
[data-theme="school"] .brand-name { font-size: 30px; }
[data-theme="school"] .card-title { font-size: 20px; }
[data-theme="school"] .msg-ai { background: #fffef9; border-radius: 4px; box-shadow: 0 2px 0 rgba(30, 50, 90, .06), 0 12px 30px rgba(30, 50, 90, .12); }
[data-theme="school"] .msg-ai::before { display: none; }
[data-theme="school"] .msg-ai::after { border-radius: 2px; transform: rotate(-2deg); background: rgba(255, 220, 90, .85); color: #5a4300; box-shadow: none; font-family: var(--display); font-size: 17px; letter-spacing: 0; padding: 3px 14px; }
[data-theme="school"] .msg-user { border-radius: 2px; transform: rotate(.6deg); box-shadow: 0 8px 18px rgba(30, 50, 90, .16); color: #3a2c00; }
[data-theme="school"] .msg-user::after { display: none; }
[data-theme="school"] .msg-user .who { background: #ef6f5e; color: #fff; border: 0; border-radius: 3px; }
[data-theme="school"] .msg-ooc { color: #0b3a5c; }
[data-theme="school"] .prose p:first-child::first-letter { font-size: 3.6em; background: none; color: var(--pink); -webkit-text-fill-color: currentColor; }
[data-theme="school"] .chip.gold, [data-theme="school"] .tab.active, [data-theme="school"] .btn.primary { color: #fff; text-shadow: none; }
[data-theme="school"] :is(#sidebar, #memory, #topbar) { backdrop-filter: none; }
[data-theme="school"] dialog { background: #fffef9; }
[data-theme="school"] dialog::backdrop { background: rgba(40, 50, 70, .35); }
[data-theme="school"] .toast { background: #fffef9; color: var(--text); }
[data-theme="school"] .toast.err { color: #a12a2a; }
[data-theme="school"] .bar { background: #e9e5d8; box-shadow: none; }
[data-theme="school"] .ava { box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(30, 50, 90, .2); }
[data-theme="school"] .brand svg { filter: hue-rotate(160deg) saturate(1.2) drop-shadow(0 2px 4px rgba(30, 50, 90, .3)); }

/* ======================= Комикс: полутона, жирный контур, плашки и «БАМ!» ======================= */
[data-theme="comic"] {
  --body-bg:
    radial-gradient(circle at 2px 2px, rgba(230, 57, 70, .16) 1.6px, transparent 2.2px) 0 0 / 14px 14px,
    radial-gradient(1000px 600px at 100% 0%, #ffe28a, transparent 60%),
    radial-gradient(900px 600px at 0% 100%, #a8d8ff, transparent 60%),
    #fff6dc;
  --glow: 230, 57, 70;
  --glow-2: 29, 120, 230;
  --glow-3: 255, 200, 0;
  --red-rgb: 230, 57, 70;
  --surface: 255, 255, 255;
  --surface-2: 255, 252, 240;
  --deep: 240, 232, 210;
  --hi: 0, 0, 0;
  --text-hi: #000;
  --on-accent: #111;
  --option-bg: #fff;
  --bubble: #ffffff;
  --bubble-tail: #ffffff;
  --bubble-em: #c1121f;
  --bubble-ooc: #dff1ff;
  --bubble-ooc-tail: #dff1ff;
  --narrator: 'РАССКАЗЧИК';
  --ornament: '★ БАМ! ★';
  --bullet: '★ ';
  --empty-face: '?!';
  --err-face: 'ОЙ! ';
  --toast-mark: '★ ';
  --head-mark: '★ ';
  --hero-sub: 'выпуск №1';
  --bg: #fff6dc;
  --bg-2: #fffaf0;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --glass: rgba(255, 252, 240, .95);
  --line: #111;
  --line-2: #111;
  --text: #121212;
  --text-2: #2c2c2c;
  --muted: #666;
  --pink: #e63946;
  --pink-2: #c1121f;
  --violet: #1d78e6;
  --violet-2: #1557b0;
  --cyan: #1d78e6;
  --gold: #ffb703;
  --pink-dim: rgba(230, 57, 70, .14);
  --grad: linear-gradient(120deg, #ffd23f, #ffb703);
  --grad-soft: linear-gradient(120deg, rgba(255, 210, 63, .5), rgba(255, 183, 3, .35));
  --red: #e63946;
  --green: #2a9d3f;
  --amber: #e07a00;
  --blue: #1d78e6;
  --prose: 'Pangolin', 'Comic Sans MS', cursive;
  --display: 'Rubik Mono One', 'Arial Black', sans-serif;
  --sans: 'Pangolin', 'Comic Sans MS', cursive;
  --radius: 4px;
  color-scheme: light;
}
[data-theme="comic"] :is(.msg-ai, .msg-user, .card, .fact, .file-row, dialog, #input, .feature, .toast, .memo) { border: 2.5px solid #111 !important; box-shadow: 5px 5px 0 #111 !important; backdrop-filter: none; }
[data-theme="comic"] :is(.btn, .icon-btn, .chip, .tab.active, .filter.active) { border: 2px solid #111; box-shadow: 3px 3px 0 #111; }
[data-theme="comic"] .btn:active:not(:disabled) { box-shadow: 1px 1px 0 #111; transform: translate(2px, 2px); }
[data-theme="comic"] .btn.primary::after { display: none; }
[data-theme="comic"] .msg-ai { background: #fff; border-radius: 4px; }
[data-theme="comic"] .msg-ai::before { display: none; }
[data-theme="comic"] .msg-ai::after { border: 2.5px solid #111; border-radius: 0; background: #ffd23f; color: #111; font: 400 11px/1 var(--display); letter-spacing: 1px; top: -15px; padding: 6px 12px; box-shadow: 3px 3px 0 #111; transform: rotate(-1.5deg); }
[data-theme="comic"] .msg-user { border-radius: 26px 26px 26px 26px; color: #111; font-weight: 400; font-size: 17px; }
[data-theme="comic"] .msg-user::after { right: 34px; bottom: -18px; width: 22px; height: 18px; background: #111; clip-path: polygon(0 0, 100% 0, 85% 100%); }
[data-theme="comic"] .msg-user::before { content: ''; position: absolute; right: 37px; bottom: -12px; width: 15px; height: 13px; background: var(--bubble-tail); clip-path: polygon(0 0, 100% 0, 85% 100%); z-index: 1; }
[data-theme="comic"] .msg-user .who { background: #e63946; color: #fff; border: 2px solid #111; border-radius: 0; transform: rotate(2deg); font-family: var(--display); font-weight: 400; }
[data-theme="comic"] .prose { font-size: 18px; line-height: 1.7; }
[data-theme="comic"] .prose p:first-child::first-letter { font: 400 2.6em/0.9 var(--display); background: none; color: #e63946; -webkit-text-fill-color: currentColor; text-shadow: 3px 3px 0 #111; }
[data-theme="comic"] #title, [data-theme="comic"] .hero h2 { background: none; color: #111; -webkit-text-fill-color: currentColor; text-shadow: 3px 3px 0 #ffd23f; filter: none; text-transform: uppercase; }
[data-theme="comic"] #title { font-size: 22px; }
[data-theme="comic"] .brand-name { background: none; color: #e63946; -webkit-text-fill-color: currentColor; text-shadow: 2px 2px 0 #111; font-size: 17px; }
[data-theme="comic"] :is(#sidebar, #memory, #topbar) { backdrop-filter: none; }
[data-theme="comic"] #sidebar { border-right: 3px solid #111; }
[data-theme="comic"] #memory { border-left: 3px solid #111; }
[data-theme="comic"] #topbar { border-bottom: 3px solid #111; background: #ffd23f; }
[data-theme="comic"] dialog { background: #fffaf0; }
[data-theme="comic"] dialog::backdrop { background: rgba(0, 0, 0, .4); }
[data-theme="comic"] .toast { background: #fff; color: #111; }
[data-theme="comic"] .toast.err { color: #c1121f; }
[data-theme="comic"] .bar { background: #fff; border: 1.5px solid #111; box-shadow: none; }
[data-theme="comic"] .ava { border: 2px solid #111; box-shadow: 2px 2px 0 #111; }
[data-theme="comic"] .card.k-character, [data-theme="comic"] .card.k-location, [data-theme="comic"] .card.k-faction, [data-theme="comic"] .card.k-item { border-left-width: 8px !important; }
[data-theme="comic"] .card.k-character { border-left-color: #e63946 !important; }
[data-theme="comic"] .card.k-location { border-left-color: #1d78e6 !important; }
[data-theme="comic"] .card.k-item { border-left-color: #ffb703 !important; }
[data-theme="comic"] .brand svg { filter: drop-shadow(2px 2px 0 #111); }

/* ======================= Киберпанк: неон, сетка горизонта, развёртка ======================= */
[data-theme="cyber"] {
  --body-bg:
    radial-gradient(900px 380px at 50% 100%, rgba(255, 0, 170, .28), transparent 70%),
    radial-gradient(700px 400px at 100% 0%, rgba(0, 240, 255, .14), transparent 60%),
    linear-gradient(180deg, #04050c 0%, #090a1a 60%, #12081f 100%) fixed;
  --glow: 0, 240, 255;
  --glow-2: 255, 0, 170;
  --glow-3: 180, 255, 60;
  --red-rgb: 255, 60, 90;
  --surface: 8, 16, 30;
  --surface-2: 5, 9, 18;
  --deep: 2, 4, 10;
  --hi: 160, 250, 255;
  --text-hi: #f0feff;
  --on-accent: #03040a;
  --option-bg: #080f1d;
  --bubble: linear-gradient(135deg, #8ffaff, #00d6e6);
  --bubble-tail: #00d6e6;
  --bubble-em: #6b0050;
  --bubble-ooc: linear-gradient(135deg, #ff9be0, #ff3cbf);
  --bubble-ooc-tail: #ff3cbf;
  --narrator: '▸ RASSKAZCHIK.EXE';
  --ornament: '◢◤ ◢◤ ◢◤';
  --bullet: '▸ ';
  --empty-face: '[ NO DATA ]';
  --err-face: '[ERR] ';
  --toast-mark: '» ';
  --head-mark: '▸ ';
  --hero-sub: 'SYS://ИСТОРИИ';
  --bg: #04050c;
  --bg-2: rgba(5, 8, 18, .97);
  --panel: rgba(8, 18, 34, .6);
  --panel-2: rgba(10, 26, 48, .75);
  --glass: rgba(4, 8, 18, .72);
  --line: rgba(0, 240, 255, .16);
  --line-2: rgba(0, 240, 255, .36);
  --text: #d9f7ff;
  --text-2: #94cfe0;
  --muted: #557685;
  --pink: #00f0ff;
  --pink-2: #7ff8ff;
  --violet: #ff00aa;
  --violet-2: #ff6bd0;
  --cyan: #b4ff3c;
  --gold: #ffe14d;
  --pink-dim: rgba(0, 240, 255, .14);
  --grad: linear-gradient(120deg, #00f0ff 0%, #8a5cff 50%, #ff00aa 100%);
  --grad-soft: linear-gradient(120deg, rgba(0, 240, 255, .16), rgba(255, 0, 170, .14));
  --red: #ff3c5a;
  --green: #b4ff3c;
  --amber: #ffe14d;
  --blue: #00f0ff;
  --prose: 'Exo 2', 'Segoe UI', sans-serif;
  --display: 'Russo One', 'Exo 2', sans-serif;
  --sans: 'JetBrains Mono', Consolas, monospace;
  --radius: 2px;
}
[data-theme="cyber"] body { font-size: 13px; }
/* У Russo One и Rubik Mono One одно начертание: браузерный «жирный» их размазывает. */
:is([data-theme="cyber"], [data-theme="comic"]) :is(#title, .brand-name, .camp-title, .card-title, .mem-head, .m-head, .hero h2, .feature b, .prose p:first-child::first-letter) { font-weight: 400; }
[data-theme="cyber"] .msg-ai { border-radius: 0; clip-path: polygon(0 -20px, calc(100% - 22px) -20px, 100% 2px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); background: linear-gradient(180deg, rgba(8, 20, 38, .85), rgba(4, 8, 18, .9)); }
[data-theme="cyber"] .msg-ai::before { opacity: .9; }
[data-theme="cyber"] .msg-ai::after { border-radius: 0; font-weight: 700; letter-spacing: 2px; box-shadow: 0 0 18px rgba(0, 240, 255, .6); }
[data-theme="cyber"] .msg-user { border-radius: 0; font-weight: 600; box-shadow: 0 0 24px rgba(0, 240, 255, .35); }
[data-theme="cyber"] .msg-user::after { display: none; }
[data-theme="cyber"] .msg-user .who { border-radius: 0; background: #ff00aa; color: #fff; border: 0; }
[data-theme="cyber"] :is(.btn, .chip, .tab, .filter, #tabs, .tag, .badge, .toast, .icon-btn, #input, dialog, .card, .fact, .memo, .file-row) { border-radius: 0; }
[data-theme="cyber"] .prose p:first-child::first-letter { font-size: 2.6em; text-shadow: 0 0 18px rgba(0, 240, 255, .7); }
[data-theme="cyber"] #title, [data-theme="cyber"] .brand-name { text-transform: uppercase; letter-spacing: 2px; filter: drop-shadow(0 0 10px rgba(0, 240, 255, .5)); }
[data-theme="cyber"] .prose em { color: #ff6bd0; }
[data-theme="cyber"] .ava { border-radius: 0; filter: hue-rotate(160deg) saturate(1.6); }
[data-theme="cyber"] .brand svg { filter: hue-rotate(150deg) saturate(2) drop-shadow(0 0 10px #00f0ff); }

/* ======================= Нуар: чёрно-белое кино, дождь, жалюзи, красный акцент ======================= */
[data-theme="noir"] {
  --body-bg:
    repeating-linear-gradient(-28deg, rgba(255, 255, 255, .035) 0 26px, transparent 26px 64px),
    radial-gradient(1100px 700px at 75% -10%, rgba(255, 250, 235, .12), transparent 60%),
    linear-gradient(180deg, #0b0b0c 0%, #141414 60%, #1a1918 100%) fixed;
  --glow: 235, 228, 212;
  --glow-2: 179, 38, 46;
  --glow-3: 160, 156, 148;
  --red-rgb: 200, 40, 50;
  --surface: 26, 26, 26;
  --surface-2: 15, 15, 15;
  --deep: 6, 6, 6;
  --hi: 255, 255, 255;
  --text-hi: #fffaf0;
  --on-accent: #0b0b0c;
  --option-bg: #161616;
  --bubble: linear-gradient(135deg, #f1ece2, #d8d0bf);
  --bubble-tail: #d8d0bf;
  --bubble-em: #8a1c22;
  --bubble-ooc: linear-gradient(135deg, #c9c9c9, #a9a9a9);
  --bubble-ooc-tail: #a9a9a9;
  --narrator: 'РАССКАЗЧИК';
  --ornament: '— ◆ —';
  --bullet: '· ';
  --empty-face: '…';
  --err-face: '✕ ';
  --toast-mark: '◆ ';
  --head-mark: '';
  --hero-sub: 'город не спит';
  --bg: #0b0b0c;
  --bg-2: rgba(14, 14, 14, .97);
  --panel: rgba(32, 32, 32, .55);
  --panel-2: rgba(48, 48, 48, .7);
  --glass: rgba(14, 14, 14, .74);
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .24);
  --text: #ece8e1;
  --text-2: #b9b3a8;
  --muted: #77726a;
  --pink: #e8e2d6;
  --pink-2: #fffaf0;
  --violet: #b3262e;
  --violet-2: #d9535b;
  --cyan: #a39e94;
  --gold: #c9a45c;
  --pink-dim: rgba(232, 226, 214, .12);
  --grad: linear-gradient(120deg, #f1ece2, #b9b3a8);
  --grad-soft: linear-gradient(120deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  --red: #d9535b;
  --green: #a9b39a;
  --amber: #c9a45c;
  --blue: #a39e94;
  --prose: 'Lora', Georgia, serif;
  --display: 'Playfair Display', Georgia, serif;
  --sans: 'PT Mono', Consolas, monospace;
  --radius: 0px;
}
[data-theme="noir"] body { font-size: 13px; }
[data-theme="noir"] .msg-ai { border-radius: 0; background: linear-gradient(180deg, rgba(26, 26, 26, .86), rgba(10, 10, 10, .92)); box-shadow: 0 20px 60px rgba(0, 0, 0, .7); }
[data-theme="noir"] .msg-ai::before { opacity: .25; }
[data-theme="noir"] .msg-ai::after { border-radius: 0; letter-spacing: 4px; background: #0b0b0c; color: var(--text); border: 1px solid var(--line-2); box-shadow: none; font-weight: 400; }
[data-theme="noir"] .msg-user { border-radius: 0; font-family: var(--sans); font-weight: 400; font-size: 14.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
[data-theme="noir"] .msg-user::after { display: none; }
[data-theme="noir"] .msg-user .who { border-radius: 0; background: #b3262e; color: #fff; border: 0; }
[data-theme="noir"] :is(.btn, .chip, .tab, .filter, #tabs, .tag, .badge, .toast, .icon-btn, #input, dialog, .card, .fact, .memo, .file-row) { border-radius: 0; }
[data-theme="noir"] .btn.primary { box-shadow: none; text-shadow: none; }
[data-theme="noir"] .prose p:first-child::first-letter { font-size: 3.4em; background: none; color: #b3262e; -webkit-text-fill-color: currentColor; }
[data-theme="noir"] .prose em { color: #e8e2d6; }
[data-theme="noir"] .prose strong { color: #d9535b; }
[data-theme="noir"] #title, [data-theme="noir"] .hero h2 { font-style: italic; }
[data-theme="noir"] .ava { border-radius: 0; filter: grayscale(1) contrast(1.2); }
[data-theme="noir"] .brand svg { filter: grayscale(1) brightness(1.3); }
[data-theme="noir"] .thread .dot { background: #b3262e; box-shadow: 0 0 10px #b3262e; }

/* ======================= Кубики в каждой теме ======================= */
[data-theme="fantasy"] { --die-bg: linear-gradient(145deg, #f3e6c8, #d8c39a 60%, #b89b6c); --die-edge: #7a5a32; --die-pip: #3a1a0c; --die-pip-1: #8e1f1a; --die-glow: rgba(214, 120, 52, .45); --ok: #a3c27a; --mid: #e0b25c; --bad: #e0544a; }
[data-theme="school"] { --die-bg: linear-gradient(145deg, #ffffff, #f2f5ff); --die-edge: #c9d6f2; --die-pip: #2a5fc4; --die-pip-1: #ef6f5e; --die-glow: rgba(59, 120, 231, .25); --ok: #2f9e6b; --mid: #d08a00; --bad: #d94848; }
[data-theme="comic"] { --die-bg: #ffffff; --die-edge: #111; --die-pip: #111; --die-pip-1: #e63946; --die-glow: rgba(255, 210, 63, .7); --ok: #2a9d3f; --mid: #e07a00; --bad: #e63946; }
[data-theme="comic"] .die .face { border-width: 4px; box-shadow: none; }
[data-theme="comic"] .dice-verdict { -webkit-text-stroke: 2px #111; text-shadow: 4px 4px 0 #111; }
[data-theme="comic"] .dice-layer { background: radial-gradient(circle at 2px 2px, rgba(0, 0, 0, .18) 1.5px, transparent 2px) 0 0 / 12px 12px, rgba(255, 220, 90, .88); }
[data-theme="comic"] :is(.dice-check, .dice-math, .dice-hint) { color: #111; }
[data-theme="comic"] .die-num, [data-theme="comic"] .dice-math b { color: #111; text-shadow: 3px 3px 0 #fff; }
[data-theme="cyber"] { --die-bg: linear-gradient(145deg, rgba(10, 30, 50, .95), rgba(4, 10, 22, .95)); --die-edge: #00f0ff; --die-pip: #00f0ff; --die-pip-1: #ff00aa; --die-glow: rgba(0, 240, 255, .55); --ok: #b4ff3c; --mid: #ffe14d; --bad: #ff3c5a; }
[data-theme="cyber"] .die .face { border-radius: 6%; }
[data-theme="cyber"] .die .face i { box-shadow: 0 0 10px currentColor; color: var(--die-pip); }
[data-theme="cyber"] .die .f1 i { color: var(--die-pip-1); }
[data-theme="noir"] { --die-bg: linear-gradient(145deg, #f4f0e8, #d8d2c6); --die-edge: #9a948a; --die-pip: #111; --die-pip-1: #b3262e; --die-glow: rgba(255, 255, 255, .18); --ok: #e8e2d6; --mid: #c9a45c; --bad: #d9535b; }
[data-theme="noir"] .die .face { border-radius: 12%; }
[data-theme="school"] .dice-layer { background: rgba(251, 249, 242, .9); }
[data-theme="school"] .die-num, [data-theme="school"] .dice-math b { color: #1f2d47; text-shadow: none; }

/* ======================= Декорации фона (общее) ======================= */
#sky .fx { position: absolute; pointer-events: none; }
/* угли тёмного фэнтези */
.ember {
  position: absolute; bottom: -20px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #fff1c2, #ff9a3c 45%, rgba(255, 80, 20, 0) 70%);
  filter: blur(.3px) drop-shadow(0 0 6px rgba(255, 120, 40, .9));
  animation: ember-rise var(--d) linear var(--delay) infinite, ember-flicker 1.4s ease-in-out infinite alternate;
}
@keyframes ember-rise { to { transform: translate3d(var(--drift), -112vh, 0); opacity: 0; } }
@keyframes ember-flicker { to { filter: blur(.6px) drop-shadow(0 0 2px rgba(255, 120, 40, .4)); } }
.fog {
  position: absolute; left: -50%; width: 200%; height: 45vh; bottom: var(--y);
  background: radial-gradient(ellipse at 30% 60%, rgba(160, 130, 110, .12), transparent 60%), radial-gradient(ellipse at 75% 40%, rgba(140, 110, 100, .1), transparent 55%);
  animation: fog-drift var(--d) linear infinite alternate;
}
@keyframes fog-drift { to { transform: translateX(25%); } }
#sky .blood-moon {
  position: absolute; top: 7vh; right: 28vw; width: 130px; height: 130px; border-radius: 50%; opacity: .75;
  background: radial-gradient(circle at 40% 38%, #f3c9a4 0%, #c9643f 50%, #7a1d14 100%);
  box-shadow: 0 0 70px 20px rgba(200, 70, 30, .3);
}
#sky .runes { position: absolute; right: 410px; bottom: 7vh; writing-mode: vertical-rl; font: 400 70px/1 serif; letter-spacing: 16px; color: transparent; -webkit-text-stroke: 1px rgba(224, 178, 92, .14); }
/* школа: каракули на полях и бумажные самолётики */
.doodle { position: absolute; left: var(--x); top: var(--y); font: 400 var(--s) 'Caveat', cursive; color: rgba(59, 120, 231, .22); transform: rotate(var(--r)); }
.plane {
  position: absolute; left: -60px; top: var(--y); font-size: 26px; color: rgba(59, 120, 231, .35);
  animation: plane-fly var(--d) linear var(--delay) infinite;
}
@keyframes plane-fly {
  0% { transform: translate(0, 0) rotate(8deg); }
  50% { transform: translate(55vw, -6vh) rotate(-4deg); }
  100% { transform: translate(115vw, 4vh) rotate(10deg); }
}
/* комикс: звукоподражания и «линии скорости» */
.boom {
  position: absolute; left: var(--x); top: var(--y); font: 400 var(--s)/1 'Rubik Mono One', 'Arial Black', sans-serif;
  color: #ffd23f; -webkit-text-stroke: 2px #111; text-shadow: 5px 5px 0 #e63946; transform: rotate(var(--r)); opacity: .32;
  animation: boom-pulse 3.2s ease-in-out var(--delay) infinite;
}
@keyframes boom-pulse { 50% { transform: rotate(var(--r)) scale(1.08); opacity: .45; } }
.speedlines {
  position: absolute; inset: -20%; opacity: .08;
  background: repeating-conic-gradient(from 0deg at 100% 0%, #111 0deg 1.2deg, transparent 1.2deg 5deg);
}
/* киберпанк: сетка горизонта, «дождь» символов, развёртка */
.grid-floor {
  position: absolute; left: -50%; right: -50%; bottom: -10vh; height: 55vh; transform: perspective(380px) rotateX(62deg); transform-origin: bottom;
  background:
    linear-gradient(rgba(255, 0, 170, .5) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(0, 240, 255, .4) 1px, transparent 1px) 0 0 / 60px 60px;
  mask-image: linear-gradient(transparent, #000 60%); -webkit-mask-image: linear-gradient(transparent, #000 60%);
  animation: grid-run 3s linear infinite;
}
@keyframes grid-run { to { background-position: 0 60px, 0 60px; } }
.code-rain {
  position: absolute; top: -60vh; left: var(--x); writing-mode: vertical-rl; font: 400 14px/1 'JetBrains Mono', monospace; letter-spacing: 6px;
  color: rgba(0, 240, 255, .28); text-shadow: 0 0 6px rgba(0, 240, 255, .6); animation: code-fall var(--d) linear var(--delay) infinite;
}
@keyframes code-fall { to { transform: translateY(170vh); } }
.scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); }
/* нуар: дождь, зерно плёнки, виньетка */
.rain {
  position: absolute; top: -20vh; left: var(--x); width: 1px; height: var(--s); background: linear-gradient(transparent, rgba(220, 220, 230, .35));
  transform: rotate(14deg); animation: rain-fall var(--d) linear var(--delay) infinite;
}
@keyframes rain-fall { to { transform: rotate(14deg) translateY(140vh); } }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0, 0, 0, .65) 100%); }
.grain {
  position: absolute; inset: -50%; opacity: .07;
  background-image: radial-gradient(circle at 20% 30%, #fff 0 .6px, transparent .8px), radial-gradient(circle at 70% 80%, #fff 0 .5px, transparent .7px), radial-gradient(circle at 45% 60%, #000 0 .7px, transparent .9px);
  background-size: 7px 9px, 11px 7px, 9px 11px; animation: grain-shift .5s steps(4) infinite;
}
@keyframes grain-shift { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
@media (prefers-reduced-motion: reduce) { .ember, .plane, .boom, .code-rain, .rain, .grain, .grid-floor, .fog { animation: none !important; } }
@media (max-width: 1180px) { #sky .runes { right: 30px; } }
@media (max-width: 760px) { #sky .runes, .boom:nth-of-type(n+3), .doodle:nth-of-type(n+5) { display: none; } }