/* Nordic Tomes — переработанная тема Skyrim by Claude.ai designer.
Подключать ПОСЛЕ ui.css — переопределяет body.theme-skyrim. */
/* ─── Аутентичные шрифты (локальные woff2, офлайн-safe, latin+cyrillic) ───
Forum — римские капители (Trajan-like) для заголовков-свитков (fantasy).
PT Serif — книжная гарнитура для текста на пергаменте (вопросы/ответы). */
@font-face {
font-family: 'Forum';
font-style: normal; font-weight: 400; font-display: swap;
src: url('../assets/fonts/forum-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Forum';
font-style: normal; font-weight: 400; font-display: swap;
src: url('../assets/fonts/forum-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'PT Serif';
font-style: normal; font-weight: 400; font-display: swap;
src: url('../assets/fonts/ptserif-400-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'PT Serif';
font-style: normal; font-weight: 400; font-display: swap;
src: url('../assets/fonts/ptserif-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'PT Serif';
font-style: normal; font-weight: 700; font-display: swap;
src: url('../assets/fonts/ptserif-700-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'PT Serif';
font-style: normal; font-weight: 700; font-display: swap;
src: url('../assets/fonts/ptserif-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
/* EB Garamond — основная книжная гарнитура «древнего тома» (использовалась по всей
теме как первый шрифт, но НЕ была загружена → текст падал в системный serif).
Variable woff2: один файл покрывает 400–700, поэтому font-weight задаём диапазоном. */
@font-face {
font-family: 'EB Garamond';
font-style: normal; font-weight: 400 700; font-display: swap;
src: url('../assets/fonts/ebgaramond-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'EB Garamond';
font-style: normal; font-weight: 400 700; font-display: swap;
src: url('../assets/fonts/ebgaramond-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'EB Garamond';
font-style: italic; font-weight: 400 700; font-display: swap;
src: url('../assets/fonts/ebgaramond-italic-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'EB Garamond';
font-style: italic; font-weight: 400 700; font-display: swap;
src: url('../assets/fonts/ebgaramond-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Sans Runic — настоящие рунические глифы (Старший Футарк, U+16A0–16F8)
для рун-подсказок в пустых клетках. Локальный woff2, offline. */
@font-face {
font-family: 'Noto Sans Runic';
font-style: normal; font-weight: 400; font-display: swap;
src: url('../assets/fonts/notosansrunic.woff2') format('woff2');
unicode-range: U+16A0-16F8;
}
/* ====================================================================
>>> THEME-START <<<
NORDIC TOMES — переработанная тема Скайрим
Замените существующий блок `body.theme-skyrim { … }` целиком этим.
Зависимости: только system-serif fonts + inline SVG data:URI (offline-safe).
==================================================================== */
body.theme-skyrim {
/* ── ПАЛИТРА — потёртое золото, кожа, пергамент ─────────────────── */
--tome-void: #050402; /* глубочайший фон */
--tome-night: #0c0a07; /* основной фон */
--tome-leather: #1a140e; /* кожаный переплёт */
--tome-leather-2: #261d14; /* приподнятая панель */
--tome-bronze-dk: #3a2c18; /* тёмная бронза */
--tome-bronze: #6e5530; /* средняя бронза */
--tome-gold: #a78348; /* основной потёртый золотой */
--tome-gold-warm: #cca767; /* тёплое золото */
--tome-gold-bright: #ebd28a; /* акцент-свечение */
--tome-parch-dk: #b9a06e; /* пергамент в тени */
--tome-parch: #e0c993; /* пергамент основной */
--tome-parch-lt: #f4e3b8; /* пергамент на свету */
--tome-ink: #2a1c0a; /* чернила (текст на пергаменте) */
--tome-ink-num: #6b4a1c; /* номер клетки на пергаменте */
/* Перекрытие токенов общей системы (используется остальной CSS) */
--color-bg: var(--tome-night);
--color-fg: var(--tome-gold-warm);
--color-line: var(--tome-bronze);
--color-accent: var(--tome-gold);
--color-muted: #927a4c;
--color-block: #0a0703;
--color-cell-bg: var(--tome-parch);
--color-cell-border: #3a2a14;
--color-num: var(--tome-ink-num);
--color-panel-bg: var(--tome-leather);
--color-panel-border: var(--tome-bronze-dk);
--color-input-bg: #100a05;
/* Типографика: тиснёный книжный серифный набор. */
font-family: 'EB Garamond', 'Constantia', 'Cambria', 'Hoefler Text', 'Georgia', serif;
color: var(--tome-gold-warm);
letter-spacing: 0.015em;
min-height: 100vh;
/* Многослойный космический фон:
1) звёздная пыль (SVG, ~30 точек разной яркости)
2) сияние сверху (как заход в храме)
3) виньетка снизу
4) базовый градиент ночи */
background-color: var(--tome-night);
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse 70% 38% at 50% 0%, rgba(176,138,74,0.18), transparent 65%),
radial-gradient(ellipse 90% 60% at 50% 100%, rgba(0,0,0,0.55), transparent 60%),
linear-gradient(180deg, #07060450 0%, #0c0a0700 30%, #0c0a0700 70%, #04030270 100%);
background-attachment: fixed;
background-size: 800px 800px, 100% 100%, 100% 100%, 100% 100%;
background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
/* ── HEADER (controls): кожаный переплёт книги ──────────────────── */
body.theme-skyrim .controls {
position: relative;
max-width: 1040px;
margin: 24px auto 0;
background:
/* тонкий двойной gold-кант изнутри */
linear-gradient(rgba(167,131,72,0.4), rgba(167,131,72,0.4)) padding-box,
/* кожаный градиент */
radial-gradient(ellipse at 50% 0%, #2a1f15 0%, var(--tome-leather) 60%, #110c08 100%);
border: 1px solid var(--tome-bronze);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,0.5),
inset 0 0 32px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(235,210,138,0.08),
0 18px 50px rgba(0,0,0,0.55);
padding: 30px 40px 28px;
}
/* Тиснёная двойная рамка по периметру header */
body.theme-skyrim .controls::before {
content: "";
position: absolute; inset: 8px;
border: 1px solid rgba(167,131,72,0.45);
pointer-events: none;
}
/* ── Заголовок: 2 строки, вторая крупнее и богаче ──
Каждая буква вспыхивает мягким оранжевым пламенем (направленным вверх,
как настоящий жар от факела), затем застывает в золоте. */
body.theme-skyrim .app-title {
text-align: center;
margin: 0 0 12px;
line-height: 1.05;
animation: none !important;
opacity: 1 !important;
filter: none !important;
}
body.theme-skyrim .app-title .title-line {
display: block;
font-family: 'Forum', 'Trajan Pro', 'Constantia', 'Cambria', 'Georgia', serif;
font-weight: 400; /* Forum — single weight, капители уже «жирные» */
text-transform: uppercase;
text-align: center;
}
body.theme-skyrim .app-title .title-line.line-1 {
font-size: clamp(16px, 2vw, 22px);
letter-spacing: 0.32em;
color: var(--tome-gold-warm);
margin-bottom: 6px;
font-weight: 500;
}
body.theme-skyrim .app-title .title-line.line-2 {
font-size: clamp(28px, 3.8vw, 44px);
letter-spacing: 0.12em;
white-space: nowrap;
}
body.theme-skyrim .app-title .letter {
display: inline-block;
position: relative;
/* Полированное золото — светлый блик сверху, тёмная гравировка снизу */
background: linear-gradient(180deg,
#fff2cf 0%,
#ecca7e 36%,
#c69a48 64%,
#8a662e 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* Чистое свечение через filter drop-shadow (по форме букв, не «грязный» text-shadow) */
filter:
drop-shadow(0 1px 0 rgba(0,0,0,.55))
drop-shadow(0 0 5px rgba(255,214,130,.5))
drop-shadow(0 0 13px rgba(228,176,84,.28))
drop-shadow(0 0 6px rgba(95,208,255,.16));
/* Рунное свечение: золото дышит + периодически распускается арканный
магика-голубой ореол (как glow рун в макете «Древние свитки»). */
animation: tome-letter-rune-glow 4.4s ease-in-out infinite;
animation-delay: calc(var(--i, 0) * 0.11s);
will-change: filter;
}
body.theme-skyrim .app-title .letter.space { width: 0.3em; background: none; animation: none; }
body.theme-skyrim .app-title .line-1 .letter {
/* Первая строка: меньше яркость, мягче цвет — «надпись вверху» */
background: linear-gradient(180deg, var(--tome-gold-warm) 0%, var(--tome-bronze) 100%);
-webkit-background-clip: text;
background-clip: text;
}
body.theme-skyrim .app-title .ornament {
display: inline-block;
color: var(--tome-bronze);
font-size: 0.5em;
vertical-align: middle;
margin: 0 0.6em;
animation: tome-letter-ignite 1.4s cubic-bezier(.25,.85,.4,1) backwards;
animation-delay: 0.3s;
}
/* (старый tome-letter-ignite-loop — огненное мерцание — заменён на shimmer выше) */
body.theme-skyrim .app-title .letter.space {
animation: none;
}
body.theme-skyrim .app-title .ornament {
filter: drop-shadow(0 0 6px rgba(235, 210, 138, 0.4));
animation: tome-ornament-shimmer 5.5s ease-in-out infinite;
}
/* Рунное свечение букв: золотое дыхание + распускающийся магика-голубой ореол.
На пике (50%) вокруг золотых букв расцветает арканный сине-голубой halo. */
@keyframes tome-letter-rune-glow {
0%, 100% {
filter:
drop-shadow(0 1px 0 rgba(0,0,0,.55))
drop-shadow(0 0 5px rgba(255,214,130,.5))
drop-shadow(0 0 13px rgba(228,176,84,.28))
drop-shadow(0 0 7px rgba(95,208,255,.16));
}
50% {
filter:
drop-shadow(0 1px 0 rgba(0,0,0,.55))
drop-shadow(0 0 8px rgba(255,232,165,.7))
drop-shadow(0 0 20px rgba(120,200,255,.5))
drop-shadow(0 0 36px rgba(40,120,255,.34));
}
}
/* Мягкое золотое дыхание-свечение — без масштаба и огненных всплесков */
@keyframes tome-letter-shimmer {
0%, 100% {
filter:
drop-shadow(0 1px 0 rgba(0,0,0,.55))
drop-shadow(0 0 5px rgba(255,214,130,.5))
drop-shadow(0 0 13px rgba(228,176,84,.28));
}
50% {
filter:
drop-shadow(0 1px 0 rgba(0,0,0,.55))
drop-shadow(0 0 9px rgba(255,232,155,.78))
drop-shadow(0 0 22px rgba(255,194,96,.45));
}
}
@keyframes tome-ornament-shimmer {
0%, 100% { filter: drop-shadow(0 0 5px rgba(235,210,138,.32)); }
50% { filter: drop-shadow(0 0 12px rgba(255,224,150,.6)); }
}
/* ─── Применение шрифтов ───
Forum — заголовок кроссворда (№ …); PT Serif — текст на пергаменте (вопросы). */
body.theme-skyrim .puzzle-title {
font-family: 'Forum', 'Trajan Pro', 'Cambria', Georgia, serif;
letter-spacing: 0.05em;
}
body.theme-skyrim .clues-container,
body.theme-skyrim .clues-container h3,
body.theme-skyrim .clues-container li,
body.theme-skyrim .clues-container li b {
font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
}
body.theme-skyrim .clues-container h3 {
font-family: 'Forum', 'PT Serif', Georgia, serif;
letter-spacing: 0.04em;
}
/* Натуральная вспышка: пламя идёт вверх (drop-shadow Y < 0),
яркость сдержанная, переходы плавные — не «вспышка лампы», а «жар от углей» */
@keyframes tome-letter-ignite {
0% {
opacity: 0;
transform: translateY(8px) scale(0.7);
-webkit-text-fill-color: #ff7820;
text-fill-color: #ff7820;
filter:
brightness(1.25)
drop-shadow(0 -4px 6px rgba(255, 120, 30, 0.95))
drop-shadow(0 -10px 14px rgba(255, 70, 10, 0.70))
drop-shadow(0 -18px 22px rgba(200, 30, 0, 0.45));
}
22% {
opacity: 1;
transform: translateY(0) scale(1.06);
-webkit-text-fill-color: #ffc060;
filter:
brightness(1.3)
drop-shadow(0 -6px 8px rgba(255, 170, 60, 0.85))
drop-shadow(0 -12px 16px rgba(255, 110, 30, 0.55))
drop-shadow(0 -20px 26px rgba(220, 60, 10, 0.30));
}
45% {
transform: scale(1);
-webkit-text-fill-color: #ffe2a0;
filter:
brightness(1.15)
drop-shadow(0 -4px 8px rgba(255, 200, 90, 0.60))
drop-shadow(0 -10px 14px rgba(255, 130, 40, 0.30));
}
72% {
transform: scale(1);
-webkit-text-fill-color: transparent;
filter:
brightness(1.05)
drop-shadow(0 -2px 6px rgba(235, 210, 138, 0.35));
}
100% {
transform: scale(1);
-webkit-text-fill-color: transparent;
filter: brightness(1);
}
}
body.theme-skyrim .app-sub {
text-align: center;
font-family: 'EB Garamond', 'Constantia', 'Cambria', 'Georgia', serif;
font-style: italic;
font-size: 15px;
color: var(--tome-gold-warm);
letter-spacing: 0.18em;
text-transform: lowercase;
margin: 0 0 22px;
opacity: 0.85;
}
/* Рунический divider под подзаголовком — абстрактные геометрические глифы,
симметрично с центральным ромбом. Чисто декоративный SVG. */
body.theme-skyrim .app-sub::after {
content: "";
display: block;
margin: 14px auto 0;
width: min(420px, 70%);
height: 16px;
background:
url("data:image/svg+xml;utf8,")
center/contain no-repeat;
opacity: 0.85;
}
/* ── Кнопка сворачивания "Настройки" — книжная закладка ─────────── */
body.theme-skyrim .btn-toggle-settings {
background: linear-gradient(180deg, #2a1f15, #15100a);
color: var(--tome-gold-warm);
border: 1px solid var(--tome-bronze);
border-radius: 0;
font-family: 'Constantia', 'Cambria', serif;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
padding: 8px 18px;
box-shadow: inset 0 1px 0 rgba(235,210,138,0.1);
transition: border-color .2s, color .2s, box-shadow .2s;
}
body.theme-skyrim .btn-toggle-settings:hover {
border-color: var(--tome-gold);
color: var(--tome-gold-bright);
box-shadow: inset 0 1px 0 rgba(235,210,138,0.15), 0 0 12px rgba(167,131,72,0.3);
}
/* ── Fieldset / ctrl-group: страница в переплёте ────────────────── */
body.theme-skyrim .ctrl-group {
background: linear-gradient(180deg, rgba(38,29,20,0.65), rgba(20,15,10,0.65));
border: 1px solid var(--tome-bronze-dk);
border-radius: 0;
box-shadow:
inset 0 1px 0 rgba(235,210,138,0.06),
inset 0 0 18px rgba(0,0,0,0.3);
position: relative;
}
body.theme-skyrim .ctrl-group::before {
content: "";
position: absolute; inset: 4px;
border: 1px solid rgba(167,131,72,0.18);
pointer-events: none;
}
body.theme-skyrim legend {
font-family: 'Constantia', 'Cambria', serif;
color: var(--tome-gold);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 0 10px;
}
body.theme-skyrim .ctrl-section-title {
display: flex;
align-items: center;
font-family: 'Constantia', 'Cambria', serif;
color: var(--tome-gold);
letter-spacing: 0.18em;
opacity: 0.92;
/* двойная декор-линия «под переплёт» вместо простой границы */
border-bottom: 1px solid rgba(212, 175, 55, 0.30);
box-shadow: 0 2px 0 -1px rgba(167, 131, 72, 0.14);
}
/* Руна-значок секции (шрифт Noto Sans Runic бандлится локально). */
body.theme-skyrim .ctrl-section-rune {
font-family: 'Noto Sans Runic', 'Segoe UI Symbol', serif;
margin-right: 9px;
color: var(--tome-gold-bright);
font-size: 1.1em;
line-height: 1;
text-shadow: 0 0 7px rgba(235, 210, 138, 0.45);
}
/* ── Поле ввода «История без повторов» (number) — под тёмную тему ── */
body.theme-skyrim #history-limit {
color-scheme: dark; /* нативные стрелки спиннера в тёмном виде */
background: var(--color-input-bg);
color: var(--tome-gold-bright);
border: 1px solid var(--tome-bronze);
border-radius: 0;
padding: 3px 6px;
font-family: 'Constantia', 'Cambria', serif;
font-size: 14px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.theme-skyrim #history-limit:hover { border-color: var(--tome-gold); }
body.theme-skyrim #history-limit:focus {
border-color: var(--tome-gold);
box-shadow: 0 0 0 2px rgba(167, 131, 72, 0.28), inset 0 0 8px rgba(0, 0, 0, 0.45);
}
/* ── Лейблы радио/чекбоксов: ховер + подсветка выбранного ── */
body.theme-skyrim .ctrl-group label {
color: var(--tome-gold-warm);
position: relative;
z-index: 1;
border-radius: 2px;
padding-left: 4px;
transition: color .14s ease, background .14s ease;
}
body.theme-skyrim .ctrl-group label:hover {
color: var(--tome-gold-bright);
background: rgba(167, 131, 72, 0.09);
}
body.theme-skyrim .ctrl-group label:has(input:checked) {
color: var(--tome-gold-bright);
text-shadow: 0 0 6px rgba(235, 210, 138, 0.25);
}
/* ── Радио и чекбоксы — золотые самоцветы в бронзовой оправе ── */
body.theme-skyrim input[type="radio"],
body.theme-skyrim input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 16px;
height: 16px;
margin: 0 6px 0 0;
padding: 0;
vertical-align: -3px;
background: linear-gradient(180deg, #1c150d, #0c0805);
border: 1px solid var(--tome-bronze);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.6);
cursor: pointer;
position: relative;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.theme-skyrim input[type="radio"] { border-radius: 50%; }
body.theme-skyrim input[type="checkbox"] { border-radius: 2px; }
body.theme-skyrim input[type="radio"]:hover,
body.theme-skyrim input[type="checkbox"]:hover {
border-color: var(--tome-gold);
box-shadow: 0 0 6px rgba(235, 210, 138, 0.3), inset 0 0 5px rgba(0, 0, 0, 0.5);
}
body.theme-skyrim input[type="radio"]:checked,
body.theme-skyrim input[type="checkbox"]:checked {
border-color: var(--tome-gold);
box-shadow: 0 0 7px rgba(235, 210, 138, 0.5), inset 0 0 4px rgba(0, 0, 0, 0.5);
}
/* радио — золотой самоцвет внутри */
body.theme-skyrim input[type="radio"]:checked::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--tome-gold-bright), var(--tome-gold) 55%, var(--tome-bronze));
box-shadow: 0 0 5px rgba(235, 210, 138, 0.7);
}
/* чекбокс — золотая руническая галка */
body.theme-skyrim input[type="checkbox"]:checked::after {
content: "✓";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--tome-gold-bright);
font-size: 12px;
font-weight: 700;
text-shadow: 0 0 5px rgba(235, 210, 138, 0.7);
}
body.theme-skyrim input[type="radio"]:focus-visible,
body.theme-skyrim input[type="checkbox"]:focus-visible {
outline: none;
border-color: var(--tome-gold-bright);
box-shadow: 0 0 0 2px rgba(235, 210, 138, 0.4);
}
/* ── Ползунки (range) — золотой самоцвет на тёмной бороздке ── */
body.theme-skyrim input[type="range"] {
appearance: none;
-webkit-appearance: none;
background: transparent;
height: 18px;
cursor: pointer;
}
body.theme-skyrim input[type="range"]::-webkit-slider-runnable-track {
height: 6px;
border-radius: 3px;
background: linear-gradient(180deg, #0c0805, #211910);
border: 1px solid var(--tome-bronze-dk);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.6);
}
body.theme-skyrim input[type="range"]::-moz-range-track {
height: 6px;
border-radius: 3px;
background: linear-gradient(180deg, #0c0805, #211910);
border: 1px solid var(--tome-bronze-dk);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.6);
}
/* Firefox: заполненная часть слева — золотой градиент */
body.theme-skyrim input[type="range"]::-moz-range-progress {
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, var(--tome-bronze), var(--tome-gold));
}
body.theme-skyrim input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
margin-top: -5px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--tome-gold-bright), var(--tome-gold) 55%, var(--tome-bronze-dk));
border: 1px solid var(--tome-bronze);
box-shadow: 0 0 6px rgba(235, 210, 138, 0.5), 0 1px 3px rgba(0, 0, 0, 0.6);
transition: transform .12s ease, box-shadow .12s ease;
}
body.theme-skyrim input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--tome-gold-bright), var(--tome-gold) 55%, var(--tome-bronze-dk));
border: 1px solid var(--tome-bronze);
box-shadow: 0 0 6px rgba(235, 210, 138, 0.5), 0 1px 3px rgba(0, 0, 0, 0.6);
transition: transform .12s ease, box-shadow .12s ease;
}
body.theme-skyrim input[type="range"]:hover::-webkit-slider-thumb {
transform: scale(1.15);
box-shadow: 0 0 11px rgba(235, 210, 138, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6);
}
body.theme-skyrim input[type="range"]:hover::-moz-range-thumb {
transform: scale(1.15);
box-shadow: 0 0 11px rgba(235, 210, 138, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6);
}
body.theme-skyrim input[type="range"]:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(235, 210, 138, 0.35), 0 0 8px rgba(235, 210, 138, 0.6);
}
/* ── Блоки настроек: лёгкая золотая подсветка по наведению ── */
body.theme-skyrim .ctrl-group {
transition: border-color .18s ease, box-shadow .18s ease;
}
body.theme-skyrim .ctrl-group:hover {
border-color: var(--tome-bronze);
box-shadow:
inset 0 1px 0 rgba(235, 210, 138, 0.10),
inset 0 0 18px rgba(0, 0, 0, 0.30),
0 0 0 1px rgba(167, 131, 72, 0.16);
}
/* ── Кнопки: в стиле кованой пластины с тиснением ───────────────── */
body.theme-skyrim button {
background:
linear-gradient(180deg, #2c2117 0%, #1a130c 50%, #110b07 100%);
color: var(--tome-gold-warm);
border: 1px solid var(--tome-bronze);
border-radius: 0;
font-family: 'Constantia', 'Cambria', serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 9px 18px;
box-shadow:
inset 0 1px 0 rgba(235,210,138,0.1),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 1px 0 rgba(0,0,0,0.4);
transition: border-color .18s, color .18s, box-shadow .18s, transform .1s;
}
body.theme-skyrim button:hover {
border-color: var(--tome-gold);
color: var(--tome-gold-bright);
box-shadow:
inset 0 1px 0 rgba(235,210,138,0.18),
inset 0 -1px 0 rgba(0,0,0,0.5),
0 0 14px rgba(167,131,72,0.32);
}
body.theme-skyrim button:active { transform: translateY(1px); }
/* Primary — золотой акцент, литое золото со shimmer-проходом */
body.theme-skyrim button.btn-primary {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, #8a6630 0%, #65491e 50%, #3e2b10 100%);
color: #fdf0c5;
border-color: var(--tome-gold);
text-shadow: 0 1px 1px rgba(0,0,0,0.65);
box-shadow:
inset 0 1px 0 rgba(255,232,160,0.32),
inset 0 -1px 0 rgba(0,0,0,0.5),
0 0 18px rgba(167,131,72,0.22);
}
body.theme-skyrim button.btn-primary::after {
content: "";
position: absolute;
top: -50%; bottom: -50%; left: -60%;
width: 35%;
background: linear-gradient(90deg,
transparent,
rgba(255,232,160,0.45),
transparent);
transform: skewX(-22deg);
transition: left 700ms cubic-bezier(.22,1,.36,1);
pointer-events: none;
}
body.theme-skyrim button.btn-primary:hover::after { left: 130%; }
body.theme-skyrim button.btn-primary:hover {
box-shadow:
inset 0 1px 0 rgba(255,232,160,0.4),
inset 0 -1px 0 rgba(0,0,0,0.5),
0 0 26px rgba(235,210,138,0.48);
}
body.theme-skyrim .status {
text-align: center;
font-family: 'EB Garamond', 'Constantia', 'Cambria', serif;
font-style: italic;
color: var(--tome-gold-warm);
letter-spacing: 0.05em;
font-size: 14px;
opacity: 0.9;
}
/* ── История-баннер: лента-уведомление ──────────────────────────── */
body.theme-skyrim .history-banner {
background: linear-gradient(90deg, rgba(58,44,24,0) 0%, rgba(58,44,24,0.55) 50%, rgba(58,44,24,0) 100%);
border: none;
border-top: 1px solid var(--tome-bronze);
border-bottom: 1px solid var(--tome-bronze);
color: var(--tome-gold-warm);
font-family: 'EB Garamond', 'Constantia', 'Cambria', serif;
font-style: italic;
font-size: 14px;
letter-spacing: 0.05em;
border-radius: 0;
}
/* ── Заголовок головоломки ─────────────────────────────────────── */
body.theme-skyrim .puzzle-title {
font-family: 'Constantia', 'Cambria', serif;
font-weight: 600;
font-size: 22px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tome-gold);
text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 0 12px rgba(167,131,72,0.2);
margin-bottom: 28px;
}
body.theme-skyrim .puzzle-title::before,
body.theme-skyrim .puzzle-title::after {
content: "✦"; /* семиконечная звезда */
display: inline-block;
margin: 0 0.8em;
font-size: 0.7em;
color: var(--tome-bronze);
vertical-align: middle;
}
/* ── СЕТКА КРОССВОРДА — открытый свиток в тиснёной раме ─────────── */
body.theme-skyrim .grid-container {
position: relative;
display: block;
width: max-content;
margin: 0 auto 36px;
/* Двойная золотая рама + кожаное тиснение */
padding: 22px;
background:
/* пергаментная подложка под рамкой (узкая полоска) */
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box,
/* кожа */
radial-gradient(ellipse at 50% 0%, #211810 0%, #110b07 80%);
border: 1px solid var(--tome-bronze);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,0.7),
inset 0 0 0 2px var(--tome-bronze-dk),
inset 0 0 32px rgba(0,0,0,0.65),
0 0 0 1px rgba(167,131,72,0.18),
0 20px 60px rgba(0,0,0,0.7),
0 0 60px rgba(167,131,72,0.08);
}
/* Внутренний тонкий золотой кант непосредственно вокруг сетки */
body.theme-skyrim .grid-container::before {
content: "";
position: absolute; inset: 10px;
border: 1px solid rgba(167,131,72,0.55);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,0.55),
inset 0 0 22px rgba(0,0,0,0.5);
pointer-events: none;
}
/* 4 угловых медальона — абстрактный узел Нордов (геометрия, не дракон) */
body.theme-skyrim .grid-container::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background:
url("data:image/svg+xml;utf8,") top left / 40px 40px no-repeat,
url("data:image/svg+xml;utf8,") top right / 40px 40px no-repeat,
url("data:image/svg+xml;utf8,") bottom left / 40px 40px no-repeat,
url("data:image/svg+xml;utf8,") bottom right / 40px 40px no-repeat;
}
body.theme-skyrim .grid {
/* Сама сетка — тонкая, без своих border'ов, в раме */
border: 1px solid var(--tome-bronze-dk);
background: var(--tome-leather);
box-shadow:
inset 0 0 0 1px rgba(167,131,72,0.35),
inset 0 0 30px rgba(0,0,0,0.5);
position: relative;
z-index: 1;
}
/* Клетки-пергамент: с волокнами, пятнами и тиснением */
body.theme-skyrim .cell:not(.block) {
background:
/* пятна (старение) */
radial-gradient(circle at 22% 28%, rgba(120,80,30,0.16) 0 1.5px, transparent 2.5px),
radial-gradient(circle at 76% 38%, rgba(255,238,200,0.4) 0 1px, transparent 2px),
radial-gradient(circle at 44% 82%, rgba(90,55,15,0.13) 0 1.5px, transparent 2.5px),
radial-gradient(circle at 64% 12%, rgba(90,55,15,0.10) 0 1px, transparent 2px),
/* волокна (диагональные штрихи) */
repeating-linear-gradient(118deg,
transparent 0 6px,
rgba(120,80,30,0.04) 6px 7px),
/* основной пергамент */
linear-gradient(135deg, var(--tome-parch-lt) 0%, var(--tome-parch) 50%, var(--tome-parch-dk) 100%);
color: var(--tome-ink);
border: 1px solid rgba(60, 42, 18, 0.85);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.4),
inset 0 -1px 0 rgba(70,44,17,0.22);
/* ЧЁТКИЕ БУКВЫ: Cinzel-стайл шрифт + жирный + emboss + субпиксельный AA */
font-family: 'EB Garamond', 'Constantia', 'Cambria', 'Times New Roman', serif;
font-weight: 700;
font-size: 22px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern" 1, "liga" 1;
transition: box-shadow .18s, border-color .18s;
}
body.theme-skyrim .cell .ans,
body.theme-skyrim .cell .user-letter {
font-weight: 700;
/* лёгкое тиснение — буква как будто оттиснута в пергамент */
text-shadow:
0 1px 0 rgba(255,250,220,0.55),
0 -0.5px 0 rgba(70,44,17,0.35);
letter-spacing: 0.01em;
}
body.theme-skyrim .cell .num {
color: var(--tome-ink-num);
font-family: 'Constantia', 'Cambria', serif;
font-weight: 700;
font-size: 10px;
top: 2px; left: 3px;
text-shadow: 0 0.5px 0 rgba(255,250,220,0.5);
}
/* Блок-клетки — чёрные кожаные плитки с лёгким золотым watermark */
body.theme-skyrim .cell.block {
background:
radial-gradient(circle at 50% 50%, rgba(167,131,72,0.10) 0 35%, transparent 60%),
linear-gradient(135deg, #14100b 0%, #060403 100%);
border: 1px solid rgba(70,55,30,0.65);
box-shadow: inset 0 0 10px rgba(0,0,0,0.7);
}
/* Подсветка активной клетки — янтарное тёплое свечение */
body.theme-skyrim .cell:not(.block):hover,
body.theme-skyrim .cell.solve-active,
body.theme-skyrim .cell.solve-highlight {
z-index: 2;
border-color: var(--tome-gold);
box-shadow:
0 0 0 1px rgba(235,210,138,0.7),
0 0 16px rgba(235,210,138,0.45),
inset 0 0 14px rgba(255,235,170,0.5);
}
body.theme-skyrim .cell.solve-active {
outline: 2px solid var(--tome-gold-bright);
outline-offset: -2px;
}
body.theme-skyrim .cell .user-letter { color: #1a3a6a; font-weight: 700; }
body.theme-skyrim .cell.solve-error .user-letter { color: #8a1010; }
body.theme-skyrim .cell.solve-correct .user-letter { color: #2a5a1a; }
/* ── Подсказки — два разворота пергамента ─────────────────────── */
body.theme-skyrim .clues-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
body.theme-skyrim .clues-container > div {
position: relative;
background:
/* мягкая пергаментная тонировка с пятнами */
radial-gradient(circle at 20% 30%, rgba(0,0,0,0) 0 60%, rgba(0,0,0,0.18) 100%),
radial-gradient(circle at 80% 70%, rgba(80,50,15,0.06) 0 30%, transparent 50%),
linear-gradient(180deg, rgba(58,44,24,0.35) 0%, rgba(28,22,14,0.55) 100%);
border: 1px solid var(--tome-bronze-dk);
padding: 22px 24px 24px;
box-shadow:
inset 0 0 0 1px rgba(167,131,72,0.25),
inset 0 0 24px rgba(0,0,0,0.4),
0 12px 30px rgba(0,0,0,0.45);
}
/* Завитые «уши» свитка сверху */
body.theme-skyrim .clues-container > div::before {
content: "";
position: absolute;
top: -1px; left: -1px; right: -1px; height: 16px;
background:
url("data:image/svg+xml;utf8,")
center top / 100% 100% no-repeat;
pointer-events: none;
}
body.theme-skyrim .clues-container h3 {
font-family: 'Constantia', 'Cambria', serif;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--tome-gold);
border: none;
margin-top: 6px;
padding-bottom: 10px;
position: relative;
}
body.theme-skyrim .clues-container h3::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--tome-bronze) 20%, var(--tome-gold) 50%, var(--tome-bronze) 80%, transparent 100%);
}
body.theme-skyrim .clues-container ol {
list-style: none;
padding-left: 0;
counter-reset: clue;
}
body.theme-skyrim .clues-container li {
color: var(--tome-gold-warm);
font-family: 'EB Garamond', 'Constantia', 'Cambria', serif;
font-size: 15px;
line-height: 1.55;
margin: 0 0 12px 0;
padding: 0;
text-indent: -38px;
padding-left: 38px;
}
body.theme-skyrim .clues-container li:last-child { margin-bottom: 0; }
body.theme-skyrim .clues-container li b {
display: inline-block;
width: 32px;
text-indent: 0;
font-family: 'Constantia', 'Cambria', serif;
font-size: 13px;
font-weight: 600;
color: var(--tome-gold);
letter-spacing: 0.05em;
vertical-align: baseline;
}
/* ── История / редактор: оформление как и controls ──────────── */
body.theme-skyrim .history-panel,
body.theme-skyrim .editor-panel {
background: radial-gradient(ellipse at 50% 0%, #2a1f15 0%, var(--tome-leather) 60%, #110c08 100%);
border: 1px solid var(--tome-bronze);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,0.5),
inset 0 0 24px rgba(0,0,0,0.4),
0 14px 40px rgba(0,0,0,0.5);
padding: 28px 36px;
max-width: none; /* редактор корпусов — на всю ширину экрана (было 1040px) */
position: relative;
}
body.theme-skyrim .history-panel::before,
body.theme-skyrim .editor-panel::before {
content: "";
position: absolute; inset: 8px;
border: 1px solid rgba(167,131,72,0.32);
pointer-events: none;
}
body.theme-skyrim .history-title {
font-family: 'Constantia', 'Cambria', serif;
color: var(--tome-gold);
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 16px;
font-weight: 600;
}
body.theme-skyrim .history-count { color: var(--tome-bronze); }
body.theme-skyrim .history-list {
border: 1px solid var(--tome-bronze-dk);
background: rgba(10,8,5,0.55);
border-radius: 0;
}
body.theme-skyrim .history-item {
border-bottom: 1px solid rgba(110,85,48,0.3);
background: transparent;
color: var(--tome-gold-warm);
transition: background .15s;
}
body.theme-skyrim .history-item:hover { background: rgba(167,131,72,0.08); }
body.theme-skyrim .history-item.current {
background: rgba(167,131,72,0.14);
border-left: 3px solid var(--tome-gold);
padding-left: 13px;
}
body.theme-skyrim .history-item-title { color: var(--tome-gold-warm); font-family: 'EB Garamond', 'Constantia', 'Cambria', 'Georgia', serif; font-size: 15px; }
body.theme-skyrim .history-item-meta { color: var(--tome-bronze); font-style: italic; }
body.theme-skyrim .history-item-delete {
background: transparent;
color: var(--tome-bronze);
border: 1px solid var(--tome-bronze-dk);
font-family: serif;
font-size: 11px;
letter-spacing: 0.1em;
}
body.theme-skyrim .history-item-delete:hover {
border-color: #8a3a20;
color: #c46040;
background: rgba(138,58,32,0.12);
}
/* Поля ввода */
body.theme-skyrim input[type="text"],
body.theme-skyrim select {
background: #100a05;
color: var(--tome-gold-warm);
border: 1px solid var(--tome-bronze-dk);
border-radius: 0;
font-family: 'EB Garamond', 'Constantia', 'Cambria', 'Georgia', serif;
}
body.theme-skyrim input[type="text"]:focus,
body.theme-skyrim select:focus {
outline: none;
border-color: var(--tome-gold);
box-shadow: 0 0 8px rgba(167,131,72,0.3);
}
/* Скроллбар (свиток-бронза) */
body.theme-skyrim { scrollbar-width: thin; scrollbar-color: #6b4e1f #15110b; }
body.theme-skyrim ::-webkit-scrollbar { width: 10px; height: 10px; }
body.theme-skyrim ::-webkit-scrollbar-track { background: #15110b; border-left: 1px solid #2a2218; }
body.theme-skyrim ::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #6b4e1f, #3e2c10);
border: 1px solid var(--tome-bronze);
}
body.theme-skyrim ::-webkit-scrollbar-thumb:hover { border-color: var(--tome-gold); }
/* Снежные хлопья — атмосфера северных пиков */
body.theme-skyrim .snow-layer {
position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
body.theme-skyrim .snow-layer span {
position: absolute; top: -10vh; width: 5px; height: 5px;
background: radial-gradient(circle, rgba(255,250,235,0.85) 0%, rgba(235,210,138,0.3) 50%, transparent 100%);
border-radius: 50%;
box-shadow: 0 0 4px rgba(255,245,210,0.4);
animation: tome-snowfall linear infinite, tome-snowsway ease-in-out infinite;
opacity: 0.75;
}
@keyframes tome-snowfall { 0% { transform: translateY(-10vh); } 100% { transform: translateY(110vh); } }
@keyframes tome-snowsway { 0%, 100% { margin-left: 0; } 50% { margin-left: 14px; } }
/* Распределение 24 хлопьев */
body.theme-skyrim .snow-layer span:nth-child(1) { left: 3%; animation-duration: 16s, 3.2s; animation-delay: 0.0s, 0s; }
body.theme-skyrim .snow-layer span:nth-child(2) { left: 9%; animation-duration: 12s, 2.5s; animation-delay: 1.3s, 0s; width: 4px; height: 4px; }
body.theme-skyrim .snow-layer span:nth-child(3) { left: 15%; animation-duration: 19s, 4.1s; animation-delay: 3.0s, 0s; width: 6px; height: 6px; }
body.theme-skyrim .snow-layer span:nth-child(4) { left: 22%; animation-duration: 14s, 3.5s; animation-delay: 5.0s, 0s; width: 3px; height: 3px; opacity: 0.55; }
body.theme-skyrim .snow-layer span:nth-child(5) { left: 28%; animation-duration: 17s, 2.8s; animation-delay: 7.4s, 0s; }
body.theme-skyrim .snow-layer span:nth-child(6) { left: 34%; animation-duration: 13s, 3.7s; animation-delay: 2.0s, 0s; width: 4px; height: 4px; }
body.theme-skyrim .snow-layer span:nth-child(7) { left: 40%; animation-duration: 16s, 2.9s; animation-delay: 9.5s, 0s; }
body.theme-skyrim .snow-layer span:nth-child(8) { left: 46%; animation-duration: 20s, 4.3s; animation-delay: 4.0s, 0s; width: 7px; height: 7px; opacity: 0.6; }
body.theme-skyrim .snow-layer span:nth-child(9) { left: 52%; animation-duration: 14s, 3.1s; animation-delay: 6.8s, 0s; width: 4px; height: 4px; }
body.theme-skyrim .snow-layer span:nth-child(10) { left: 58%; animation-duration: 15s, 2.6s; animation-delay: 11.2s, 0s; }
body.theme-skyrim .snow-layer span:nth-child(11) { left: 64%; animation-duration: 17s, 3.8s; animation-delay: 0.5s, 0s; }
body.theme-skyrim .snow-layer span:nth-child(12) { left: 70%; animation-duration: 12s, 2.4s; animation-delay: 8.7s, 0s; width: 3px; height: 3px; opacity: 0.5; }
body.theme-skyrim .snow-layer span:nth-child(13) { left: 76%; animation-duration: 19s, 4.0s; animation-delay: 3.5s, 0s; width: 6px; height: 6px; }
body.theme-skyrim .snow-layer span:nth-child(14) { left: 82%; animation-duration: 14s, 3.4s; animation-delay: 10.0s, 0s; width: 4px; height: 4px; }
body.theme-skyrim .snow-layer span:nth-child(15) { left: 88%; animation-duration: 16s, 2.7s; animation-delay: 6.2s, 0s; }
body.theme-skyrim .snow-layer span:nth-child(16) { left: 94%; animation-duration: 21s, 4.5s; animation-delay: 1.8s, 0s; }
body.theme-skyrim .snow-layer span:nth-child(17) { left: 12%; animation-duration: 13s, 3.0s; animation-delay: 13.0s, 0s; width: 4px; height: 4px; }
body.theme-skyrim .snow-layer span:nth-child(18) { left: 37%; animation-duration: 15s, 3.6s; animation-delay: 15.2s, 0s; }
body.theme-skyrim .snow-layer span:nth-child(19) { left: 55%; animation-duration: 17s, 2.8s; animation-delay: 12.5s, 0s; opacity: 0.65; }
body.theme-skyrim .snow-layer span:nth-child(20) { left: 73%; animation-duration: 14s, 3.3s; animation-delay: 17.0s, 0s; width: 4px; height: 4px; }
body.theme-skyrim .snow-layer span:nth-child(21) { left: 19%; animation-duration: 16s, 4.2s; animation-delay: 18.5s, 0s; }
body.theme-skyrim .snow-layer span:nth-child(22) { left: 67%; animation-duration: 15s, 2.6s; animation-delay: 21.0s, 0s; width: 3px; height: 3px; opacity: 0.5; }
body.theme-skyrim .snow-layer span:nth-child(23) { left: 45%; animation-duration: 19s, 3.9s; animation-delay: 23.0s, 0s; width: 6px; height: 6px; }
body.theme-skyrim .snow-layer span:nth-child(24) { left: 80%; animation-duration: 14s, 3.1s; animation-delay: 25.0s, 0s; width: 4px; height: 4px; }
/* Появление заголовка реализовано через per-letter spans в .app-title .letter */
/* ── РАЗВЁРТЫВАНИЕ СВИТКА ──────────────────────────────────────
Полноценный «разворот свитка»:
• верхний золотой вал-стержень всегда виден (как у настоящего свитка)
• нижний золотой вал-стержень спускается вниз и тащит за собой
пергамент (clip-path inset снизу постепенно открывает сетку)
• искры жара слетают со стержня во время движения
Длительность увеличена до 2.4s для драматичности. */
body.theme-skyrim .grid-container {
position: relative;
/* Резерв сверху и снизу для валов-стержней */
padding-top: 32px;
padding-bottom: 32px;
}
/* Верхний золотой вал — статичен, всегда виден, видно сразу */
body.theme-skyrim .grid-container::before,
body.theme-skyrim .grid-container .scroll-rod-top {
/* (::before уже используется для inner gold frame, поэтому стержни
реализуем через дочерние элементы .scroll-rod-top / .scroll-rod-bottom) */
}
body.theme-skyrim .scroll-rod-top,
body.theme-skyrim .scroll-rod-bottom {
position: absolute;
left: -8px; right: -8px;
height: 26px;
pointer-events: none;
z-index: 6;
/* Свёрнутый состаренный пергамент вокруг деревянного стержня:
внутри — тёмный деревянный дюбель, снаружи — обёрнутая
старая бумага с ржавыми пятнами времени */
background:
/* тёмные деревянные навершия-колпачки */
radial-gradient(ellipse 14px 17px at 0% 50%, #2a1d10 0 65%, #1a1208 82%, transparent 100%),
radial-gradient(ellipse 14px 17px at 100% 50%, #2a1d10 0 65%, #1a1208 82%, transparent 100%),
/* верхняя и нижняя кромки бумаги — рваные, со следами карамельного окисления */
/* пятна времени вдоль рулона */
radial-gradient(ellipse 6px 3px at 18% 55%, rgba(80,40,15,0.45) 0 70%, transparent 100%),
radial-gradient(ellipse 5px 3px at 36% 45%, rgba(90,50,18,0.38) 0 70%, transparent 100%),
radial-gradient(ellipse 7px 4px at 58% 60%, rgba(70,35,12,0.40) 0 70%, transparent 100%),
radial-gradient(ellipse 5px 3px at 78% 48%, rgba(95,55,20,0.36) 0 70%, transparent 100%),
/* волокна бумаги — диагональные штрихи */
repeating-linear-gradient(115deg,
transparent 0 4px,
rgba(80,50,20,0.10) 4px 5px),
/* продольные полосы — видимость оборотов рулона */
linear-gradient(180deg,
rgba(0,0,0,0.55) 0%,
rgba(60,38,18,0.0) 8%,
rgba(220,180,120,0.18) 14%,
rgba(170,128,72,0.0) 24%,
rgba(0,0,0,0.18) 50%,
rgba(180,138,80,0.0) 76%,
rgba(40,24,10,0.55) 90%,
rgba(0,0,0,0.7) 100%),
/* основная пергаментная палитра — от светло-охристого до тёмно-коричневого */
linear-gradient(180deg,
#6e4d28 0%,
#b8956c 18%,
#e0c293 38%,
#d4b582 55%,
#b18856 72%,
#6b461f 90%,
#3a2510 100%);
border-radius: 13px;
box-shadow:
/* верхний блик (свет сверху) */
inset 0 1px 0 rgba(255,235,180,0.35),
/* нижняя тень (бумага уходит в тень) */
inset 0 -2px 4px rgba(0,0,0,0.55),
inset 0 0 0 1px rgba(110,77,40,0.55),
/* внешние тени под рулоном */
0 3px 6px rgba(0,0,0,0.7),
0 0 0 1px rgba(30,20,10,0.8);
}
body.theme-skyrim .scroll-rod-top {
top: 0;
/* Нижний край верхнего рулона бросает тень на пергамент ниже —
имитация «бумага свешивается из-под вала» */
filter: drop-shadow(0 4px 4px rgba(0,0,0,0.55));
}
body.theme-skyrim .scroll-rod-bottom {
bottom: 0;
/* Верхний край нижнего рулона — тень вверх (от пергамента) */
filter: drop-shadow(0 -3px 4px rgba(0,0,0,0.45));
}
/* «Свиток» — обёртка вокруг grid, имеет clip-path,
который раскрывается сверху вниз во время анимации.
В покое: полностью открыт. */
body.theme-skyrim .scroll-paper {
position: relative;
z-index: 2;
clip-path: inset(0 0 0 0);
}
body.theme-skyrim .grid-container.regen-active .scroll-paper {
animation: tome-paper-reveal 2.4s cubic-bezier(.22,1,.36,1);
}
body.theme-skyrim .grid-container.regen-active .scroll-rod-bottom {
animation: tome-rod-descend 2.4s cubic-bezier(.22,1,.36,1);
}
body.theme-skyrim .grid-container.regen-active .scroll-paper::after {
/* Тонкая полоса золотого свечения у нижнего края открывающегося пергамента */
content: "";
position: absolute;
left: 4px; right: 4px;
height: 6px;
pointer-events: none;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,232,160,0.5) 12%,
var(--tome-gold-bright) 50%,
rgba(255,232,160,0.5) 88%,
transparent 100%);
box-shadow: 0 0 22px rgba(235,210,138,0.8), 0 0 44px rgba(235,210,138,0.4);
filter: blur(0.5px);
animation: tome-edge-glow 2.4s cubic-bezier(.22,1,.36,1);
}
/* Сетка во время раскрытия — лёгкое золотое сияние */
body.theme-skyrim .grid-container.regen-active .grid {
animation: tome-grid-glow 2.4s cubic-bezier(.22,1,.36,1);
}
@keyframes tome-paper-reveal {
0% { clip-path: inset(0 0 100% 0); }
100% { clip-path: inset(0 0 0 0); }
}
@keyframes tome-rod-descend {
0% { bottom: calc(100% - 54px); }
100% { bottom: 0; }
}
@keyframes tome-edge-glow {
0% { top: 0; opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { top: calc(100% - 6px); opacity: 0; }
}
@keyframes tome-grid-glow {
0% { filter: brightness(1.5) saturate(1.2) drop-shadow(0 0 18px rgba(235,210,138,0.65)); }
60% { filter: brightness(1.15) saturate(1.05) drop-shadow(0 0 8px rgba(235,210,138,0.25)); }
100% { filter: brightness(1); }
}
/* Старые классы оставим для обратной совместимости — но не используем */
@keyframes tome-unroll { 0%, 100% { opacity: 1; } }
@keyframes tome-wand { 0%, 100% { opacity: 0; } }
body.theme-skyrim .grid-container .scroll-wand { display: none; }
/* Авто-проигрывание raise эффекта при первой загрузке (один раз) */
body.theme-skyrim .grid-container.intro-play .scroll-paper {
animation: tome-paper-reveal 2.4s cubic-bezier(.22,1,.36,1) backwards 0.3s;
}
body.theme-skyrim .grid-container.intro-play .scroll-rod-bottom {
animation: tome-rod-descend 2.4s cubic-bezier(.22,1,.36,1) backwards 0.3s;
}
body.theme-skyrim .grid-container.intro-play .scroll-paper::after {
content: "";
position: absolute;
left: 4px; right: 4px;
height: 6px;
pointer-events: none;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,232,160,0.5) 12%,
var(--tome-gold-bright) 50%,
rgba(255,232,160,0.5) 88%,
transparent 100%);
box-shadow: 0 0 22px rgba(235,210,138,0.8), 0 0 44px rgba(235,210,138,0.4);
filter: blur(0.5px);
animation: tome-edge-glow 2.4s cubic-bezier(.22,1,.36,1) backwards 0.3s;
}
/* ── УГЛИ / ИСКРЫ — субтильный жар от камина в глубине зала ────────── */
body.theme-skyrim .ember-layer {
position: fixed; inset: 0;
pointer-events: none;
z-index: 3; /* выше панелей-контента, чтобы искры пролетали поверх */
overflow: hidden;
mix-blend-mode: screen; /* добавляет, не заменяет — нативное «горение» */
}
body.theme-skyrim .ember-layer span {
position: absolute;
bottom: -2vh;
width: 6px; height: 6px;
border-radius: 50%;
background: radial-gradient(circle,
#fff2cc 0%,
#ffb054 22%,
#ee6818 55%,
rgba(180,40,5,0.25) 80%,
transparent 100%);
box-shadow:
0 0 6px rgba(255,180,60,0.95),
0 0 16px rgba(255,120,30,0.6),
0 0 28px rgba(220,70,15,0.35);
animation:
ember-rise linear infinite,
ember-flicker ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes ember-rise {
0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
6% { opacity: 1; }
35% { opacity: 0.95; transform: translate(8px, -28vh) scale(1); }
70% { opacity: 0.55; transform: translate(20px, -60vh) scale(0.85); }
92% { opacity: 0.2; transform: translate(28px, -88vh) scale(0.55); }
100% { opacity: 0; transform: translate(34px, -100vh) scale(0.3); }
}
@keyframes ember-flicker {
0%, 100% { filter: brightness(0.85); }
30% { filter: brightness(1.6); }
70% { filter: brightness(1.1); }
}
/* 14 искр по всему экрану, разной скорости и размера */
body.theme-skyrim .ember-layer span:nth-child(1) { left: 5%; animation-duration: 11s, 0.42s; animation-delay: 0.0s, 0s; }
body.theme-skyrim .ember-layer span:nth-child(2) { left: 14%; animation-duration: 9s, 0.34s; animation-delay: 2.4s, 0s; width: 8px; height: 8px; }
body.theme-skyrim .ember-layer span:nth-child(3) { left: 23%; animation-duration: 13s, 0.5s; animation-delay: 4.8s, 0s; width: 5px; height: 5px; }
body.theme-skyrim .ember-layer span:nth-child(4) { left: 32%; animation-duration: 10s, 0.4s; animation-delay: 1.0s, 0s; }
body.theme-skyrim .ember-layer span:nth-child(5) { left: 41%; animation-duration: 12s, 0.46s; animation-delay: 6.8s, 0s; width: 7px; height: 7px; }
body.theme-skyrim .ember-layer span:nth-child(6) { left: 50%; animation-duration: 14s, 0.36s; animation-delay: 3.2s, 0s; }
body.theme-skyrim .ember-layer span:nth-child(7) { left: 59%; animation-duration: 11s, 0.44s; animation-delay: 8.0s, 0s; width: 8px; height: 8px; }
body.theme-skyrim .ember-layer span:nth-child(8) { left: 68%; animation-duration: 9s, 0.5s; animation-delay: 5.0s, 0s; }
body.theme-skyrim .ember-layer span:nth-child(9) { left: 77%; animation-duration: 13s, 0.32s; animation-delay: 10.2s, 0s; width: 5px; height: 5px; }
body.theme-skyrim .ember-layer span:nth-child(10) { left: 86%; animation-duration: 10s, 0.42s; animation-delay: 7.0s, 0s; width: 7px; height: 7px; }
body.theme-skyrim .ember-layer span:nth-child(11) { left: 95%; animation-duration: 12s, 0.46s; animation-delay: 9.5s, 0s; }
body.theme-skyrim .ember-layer span:nth-child(12) { left: 19%; animation-duration: 15s, 0.38s; animation-delay: 12.5s, 0s; width: 4px; height: 4px; }
body.theme-skyrim .ember-layer span:nth-child(13) { left: 47%; animation-duration: 11s, 0.5s; animation-delay: 14.0s, 0s; width: 8px; height: 8px; }
body.theme-skyrim .ember-layer span:nth-child(14) { left: 73%; animation-duration: 13s, 0.36s; animation-delay: 16.0s, 0s; }
/* ── ДРАКОН ───────────────────────────────────────────────────
Анатомически проработанный wyvern. Несколько слоёв анимации
создают «живое» движение:
• dragon-fly — волнообразный путь через экран (8 точек)
• dragon-glide — плавное покачивание корпуса вверх/вниз
• dragon-flap — взмах переднего крыла (рот. вокруг плеча)
• dragon-flap-back — заднее крыло, в противофазе и слабее
• dragon-tail-sway — хвост качается у основания
• dragon-head-bob — голова чуть кивает на каждом взмахе
*/
body.theme-skyrim .dragon-flight {
position: fixed;
top: 0;
left: 0;
width: clamp(220px, 22vw, 360px);
pointer-events: none;
z-index: 2;
opacity: 0;
/* Позиционируется через JS (случайные точки). Стартовый fade-in. */
animation: dragon-appear 2.5s ease-out 1.0s forwards;
will-change: transform, opacity;
transform: translate(50vw, 30vh) translate(-50%, -50%);
}
@keyframes dragon-appear {
from { opacity: 0; }
to { opacity: 0.9; }
}
body.theme-skyrim .dragon-svg {
width: 100%;
height: auto;
display: block;
filter:
drop-shadow(0 0 36px rgba(235,210,138,0.4))
drop-shadow(0 0 14px rgba(255,150,50,0.32))
drop-shadow(0 10px 22px rgba(0,0,0,0.85));
/* Лёгкое «дыхание» корпуса при парении */
animation: dragon-glide 3.4s ease-in-out infinite;
}
/* ── СИММЕТРИЧНЫЙ ВЗМАХ КРЫЛЬЕВ ───────────────────────────────
Дракон анфас — оба крыла поворачиваются вокруг своих плеч
ВСТРЕЧНО (левое CW, правое CCW), сходясь на нижнем ходе. */
body.theme-skyrim .dragon-svg .wing-front {
transform-origin: 66.9% 42.9%; /* shoulder (535,180) в viewBox 800x420 */
transform-box: view-box;
animation: dragon-flap-front 1.45s cubic-bezier(.45,.05,.55,.95) infinite;
}
body.theme-skyrim .dragon-svg .wing-back {
transform-origin: 67.5% 47.6%; /* shoulder (540,200) в viewBox 800x420 */
transform-box: view-box;
animation: dragon-flap-back 1.45s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* Хвост — змеится у основания (хип ≈ 54% x, 64% y) */
body.theme-skyrim .dragon-svg .dragon-tail {
transform-origin: 54% 64%;
transform-box: view-box;
animation: dragon-tail-sway 2.6s ease-in-out infinite;
}
/* Голова чуть «дышит» */
body.theme-skyrim .dragon-svg .dragon-body-grp {
transform-origin: 50% 30%;
transform-box: view-box;
animation: dragon-head-bob 3.1s ease-in-out infinite;
}
@keyframes dragon-glide {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-4px) scale(1.02); }
}
/* Крылья в SVG называются wing-front / wing-back; эти ключи реально попадают в DOM. */
@keyframes dragon-flap-front {
0% { transform: rotate(-12deg) scale(1.03, 0.96); }
34% { transform: rotate(19deg) scale(0.98, 1.05); }
58% { transform: rotate(7deg) scale(1.00, 1.02); }
100% { transform: rotate(-12deg) scale(1.03, 0.96); }
}
@keyframes dragon-flap-back {
0% { transform: rotate(10deg) scale(1.02, 0.97); opacity: 0.68; }
34% { transform: rotate(-15deg) scale(0.99, 1.03); opacity: 0.52; }
58% { transform: rotate(-5deg) scale(1.00, 1.01); opacity: 0.6; }
100% { transform: rotate(10deg) scale(1.02, 0.97); opacity: 0.68; }
}
@keyframes dragon-tail-sway {
0%, 100% { transform: rotate(5deg); }
50% { transform: rotate(-6deg); }
}
@keyframes dragon-head-bob {
0%, 100% { transform: rotate(-1deg) translateY(0); }
50% { transform: rotate(1.2deg) translateY(-2px); }
}
/* ── BURNING SCROLL TRANSITION ──────────
* Весь видимый прожиг рисует canvas (dragon-scroll-fire.js): прозрачно где цело,
* огненная кромка, коричневая доска где сгорело. CSS только изолирует контейнер
* (свой stacking context) и держит контент видимым. Класс .is-burning навешивается
* на #grid-container. Старая CSS-mask через --burn-radius удалена — её работу делает
* canvas, маска лишь дублировала и могла конфликтовать. */
body.theme-skyrim .grid-container { isolation: isolate; }
/* Весь видимый burn теперь рисует canvas dissolve-burn (dragon-scroll-fire.js):
* обугливание от краёв по неровному фронту + ember + пепел. Поэтому на самом
* scroll-paper НЕ дублируем mask/char — только блокируем ввод. Canvas (z-26)
* перекрывает бумагу там где прогорело, и прозрачен где цело. */
body.theme-skyrim .grid-container.is-burning .scroll-paper {
pointer-events: none;
}
/* req #4: содержимое исчезает ТОЛЬКО по карте прожига — НЕ отдельным CSS-fade.
* Бумага, сетка и рулоны остаются непрозрачными; их «исчезновение» рисует
* canvas-доска поверх (z-26, dragon-scroll-fire.js): прозрачно где цело, ember
* на фронте, коричневая доска где сгорело. Поэтому здесь только держим видимость
* (никаких opacity-анимаций, иначе кроссворд гаснет независимо от огня). */
body.theme-skyrim #grid-container.is-burning .scroll-paper,
body.theme-skyrim .grid-container.is-burning .scroll-rod-top,
body.theme-skyrim .grid-container.is-burning .scroll-rod-bottom {
opacity: 1 !important;
animation: none !important;
}
/* Свёрнутый свиток — спрятан (clip к верхнему валику). Состояние перед разворотом. */
body.theme-skyrim .grid-container.is-rolled .scroll-paper {
clip-path: inset(0 0 100% 0);
}
/* Разворачивание нового свитка (clip-path 100%→0 сверху вниз). */
body.theme-skyrim .grid-container.is-revealing .scroll-paper {
animation: scroll-unroll 760ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes scroll-unroll {
0% { clip-path: inset(0 0 100% 0); opacity: .92; }
100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
/* Нижний рулон ДВИГАЕТСЯ вместе с разворачиванием листа: в свёрнутом виде он
* поднят к верхнему рулону (translateY вверх на высоту листа), при развороте
* спускается вниз. Используем transform (bottom заморожен !important у cohesive-рулона). */
body.theme-skyrim .grid-container.is-rolled .scroll-rod-bottom {
transform: translateY(calc(-1 * var(--scroll-h, 320px)));
}
body.theme-skyrim .grid-container.is-revealing .scroll-rod-bottom {
animation: rod-descend-unroll 760ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes rod-descend-unroll {
0% { transform: translateY(calc(-1 * var(--scroll-h, 320px))); }
100% { transform: translateY(0); }
}
/* Canvas dissolve-burn поверх свитка — обугливание от краёв + ember-фронт.
* Blend = normal (уголь ТЁМНЫЙ, screen бы его стёр). Low-res + лёгкий blur. */
body.theme-skyrim .scroll-fire-canvas {
position: absolute;
left: -4%;
top: -2%;
width: 108%;
height: 106%;
z-index: 26;
pointer-events: none;
filter: blur(0.45px);
mix-blend-mode: normal;
}
/* content/display с !important — перебиваем глобальный
* `.grid-container::before/after { content:none !important; display:none !important }` */
body.theme-skyrim .grid-container.is-burning::before {
content: "" !important;
display: block !important;
position: absolute;
inset: -16% -10%;
z-index: 20;
pointer-events: none;
opacity: 0;
background:
radial-gradient(ellipse at 35% 20%, rgba(70,67,58,.34), transparent 34%),
radial-gradient(ellipse at 62% 10%, rgba(90,84,72,.28), transparent 30%),
radial-gradient(ellipse at 50% 38%, rgba(44,39,34,.22), transparent 42%);
filter: blur(10px);
animation: burn-smoke 1550ms ease-out forwards;
}
body.theme-skyrim .grid-container.is-burning::after {
content: "" !important;
display: block !important;
position: absolute;
inset: -10% -6%;
z-index: 21;
pointer-events: none;
opacity: 0;
background:
radial-gradient(circle, rgba(255,226,128,.95) 0 1px, transparent 2px) 12% 68% / 90px 90px,
radial-gradient(circle, rgba(255,104,28,.9) 0 1px, transparent 2px) 72% 72% / 120px 120px,
radial-gradient(circle, rgba(255,182,74,.85) 0 1px, transparent 2px) 46% 80% / 75px 75px;
animation: burn-sparks 1550ms ease-out forwards;
}
/* (старый parchment-reveal и burn-radius mask убраны — прожиг рисует canvas) */
@keyframes burn-paper-char {
0% { opacity: 1; filter: none; transform: translateZ(0) scale(1); }
45% { filter: sepia(.7) brightness(.78) contrast(1.25); }
85% { opacity: 1; filter: sepia(1) brightness(.4) contrast(1.5); }
100% { opacity: 0; filter: sepia(1) brightness(.2) contrast(1.6); transform: translateZ(0) scale(.985); }
}
@keyframes ember-flare {
0% { opacity: 0; }
8% { opacity: .75; }
24%, 78% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes burn-smoke {
0% { opacity: 0; transform: translateY(18px) scale(.96); }
20% { opacity: .42; }
100% { opacity: 0; transform: translateY(-58px) scale(1.12); }
}
@keyframes burn-sparks {
0% { opacity: 0; transform: translateY(16px); }
20% { opacity: .9; }
100% { opacity: 0; transform: translateY(-82px); }
}
@keyframes parchment-reveal {
from { opacity: 0; transform: translateY(8px) scale(.98); filter: saturate(.8) brightness(.85); }
to { opacity: 1; transform: none; filter: none; }
}
/* (mask-fallback удалён: прожиг рисует canvas, CSS-mask больше не используется —
значит и отдельный fallback для браузеров без mask-image не нужен, canvas-доска
работает везде и не должна конкурировать с CSS-затуханием бумаги) */
@media (prefers-reduced-motion: reduce) {
body.theme-skyrim .grid-container.is-burning,
body.theme-skyrim .grid-container.is-burning .scroll-paper,
body.theme-skyrim .grid-container.is-burning .scroll-paper::after,
body.theme-skyrim .grid-container.is-burning::before,
body.theme-skyrim .grid-container.is-burning::after { animation-duration: 1ms; }
}
/* ── РЕЖИМ ПЕРЕТАСКИВАНИЯ ДРАКОНА — выход из него ─────────────
* В edit-mode canvas (z-50, pointer-events:auto) перекрывает чекбокс →
* снять его нельзя. Решение: кнопка «Готово» (z-75, выше канваса) + поднять
* панель контролов над канвасом, чтобы чекбокс снова кликался. */
#dragon-edit-done {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 75;
display: none;
padding: 11px 20px;
font: 600 13px/1 "Segoe UI", system-ui, sans-serif;
letter-spacing: 0.03em;
color: #1a1208;
background: linear-gradient(180deg, #ecd07e 0%, #cda23f 100%);
border: 1px solid #8a6c2a;
border-radius: 7px;
cursor: pointer;
box-shadow: 0 5px 16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,245,200,.6);
}
body.dragon-editing-position #dragon-edit-done { display: block; }
#dragon-edit-done:hover { background: linear-gradient(180deg, #f4dc8e 0%, #d8af48 100%); }
/* Панель контролов поверх канваса в edit-режиме — чтобы чекбокс снова кликался */
body.dragon-editing-position .controls {
position: relative;
z-index: 70;
}
/* ── СВЕТЯЩАЯСЯ РУНА на пустой клетке при наведении ──────────── */
body.theme-skyrim .grid .cell { position: relative; } /* якорь для absolute руны */
body.theme-skyrim .cell .rune-ghost {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
z-index: 1;
animation: rune-glow-in 300ms ease forwards;
/* Настоящая руна (Noto Sans Runic) со светящимся магика-голубым ореолом. */
font-family: 'Noto Sans Runic', 'Segoe UI Symbol', serif;
font-size: 1.2em;
line-height: 1;
color: #d6f1ff;
text-shadow:
0 0 3px #6dc6ff,
0 0 8px #3f9fe6,
0 0 15px rgba(40,120,210,.7);
}
body.theme-skyrim .cell .rune-ghost svg {
width: 62%;
height: 62%;
filter:
drop-shadow(0 0 3px #6dc6ff)
drop-shadow(0 0 8px #3f9fe6)
drop-shadow(0 0 14px rgba(40,120,210,.65));
}
@keyframes rune-glow-in {
0% { opacity: 0; transform: scale(.55); filter: blur(2px); }
60% { opacity: .95; transform: scale(1.08); filter: blur(0); }
100% { opacity: .82; transform: scale(1); }
}
/* Плавное затухание руны после ухода курсора (не исчезает сразу) */
body.theme-skyrim .cell .rune-ghost.rune-fading {
animation: rune-glow-out 750ms ease forwards;
}
@keyframes rune-glow-out {
0% { opacity: .82; transform: scale(1); filter: blur(0); }
100% { opacity: 0; transform: scale(.88); filter: blur(1.5px); }
}
/* Руна-подсказка (= буква ответа): тот же магика-голубой ореол, что и у hover-руны.
Появление/затухание — через opacity-переход в ui.css (hover-reveal). */
body.theme-skyrim .cell .rune-hint {
color: #d6f1ff;
text-shadow:
0 0 3px #6dc6ff,
0 0 8px #3f9fe6,
0 0 15px rgba(40, 120, 210, .7);
}
/* ── Контакты автора — рунические печати-кнопки ─────────────────── */
body.theme-skyrim .site-credit {
border-top: 1px solid rgba(167, 131, 72, 0.22);
}
body.theme-skyrim .site-credit .credit-caption {
font-family: 'Constantia', 'Cambria', serif;
color: var(--tome-gold);
opacity: 0.6;
}
body.theme-skyrim .site-credit a.credit-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px 8px 13px;
color: var(--tome-gold-warm);
font-family: 'Constantia', 'Cambria', serif;
font-size: 14px;
letter-spacing: 0.04em;
background: linear-gradient(180deg, rgba(58, 44, 24, 0.55), rgba(26, 20, 14, 0.6));
border: 1px solid var(--tome-bronze-dk);
border-radius: 2px;
box-shadow:
inset 0 1px 0 rgba(235, 210, 138, 0.07),
inset 0 0 14px rgba(0, 0, 0, 0.35);
position: relative;
overflow: hidden;
transition: color .18s ease, border-color .18s ease, background .18s ease,
box-shadow .18s ease, transform .18s ease;
}
/* декоративная внутренняя рамка-печать */
body.theme-skyrim .site-credit a.credit-link::before {
content: "";
position: absolute;
inset: 3px;
border: 1px solid rgba(167, 131, 72, 0.18);
border-radius: 1px;
pointer-events: none;
transition: border-color .18s ease;
}
/* блик, пробегающий по кнопке при наведении */
body.theme-skyrim .site-credit a.credit-link::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(110deg, transparent 32%, rgba(255, 240, 190, 0.20) 50%, transparent 68%);
background-size: 220% 100%;
background-position: 180% 0;
opacity: 0;
}
body.theme-skyrim .site-credit a.credit-link .credit-ico {
font-family: 'Noto Sans Runic', 'Segoe UI Symbol', serif;
font-size: 1.15em;
line-height: 1;
color: var(--tome-gold);
text-shadow: 0 0 6px rgba(235, 210, 138, 0.4);
transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
}
body.theme-skyrim .site-credit a.credit-link:hover {
color: var(--tome-gold-bright);
border-color: var(--tome-gold);
background: linear-gradient(180deg, rgba(82, 62, 32, 0.72), rgba(40, 30, 18, 0.72));
box-shadow:
inset 0 1px 0 rgba(235, 210, 138, 0.14),
0 0 16px rgba(167, 131, 72, 0.38),
0 4px 12px rgba(0, 0, 0, 0.5);
transform: translateY(-2px);
}
body.theme-skyrim .site-credit a.credit-link:hover::before { border-color: rgba(235, 210, 138, 0.4); }
body.theme-skyrim .site-credit a.credit-link:hover::after { opacity: 1; animation: credit-sheen 900ms ease; }
body.theme-skyrim .site-credit a.credit-link:hover .credit-ico {
color: var(--tome-gold-bright);
text-shadow: 0 0 5px #ffe9a8, 0 0 13px rgba(235, 210, 138, 0.85);
transform: scale(1.14);
}
body.theme-skyrim .site-credit a.credit-link:active { transform: translateY(0); }
body.theme-skyrim .site-credit a.credit-link:focus-visible {
outline: none;
border-color: var(--tome-gold-bright);
box-shadow: 0 0 0 2px rgba(235, 210, 138, 0.4), 0 0 16px rgba(167, 131, 72, 0.4);
}
@keyframes credit-sheen {
from { background-position: 180% 0; }
to { background-position: -80% 0; }
}
/* ── ВСПЛЫВАЮЩИЙ СВИТОК-ПОДСКАЗКА (hover на цифру) ───────────── */
.clue-scroll-tooltip {
position: fixed;
z-index: 80;
max-width: 300px;
min-width: 150px;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -6px) scaleY(0);
transform-origin: top center;
transition: transform 300ms cubic-bezier(.34, 1.35, .5, 1), opacity 180ms ease;
filter: drop-shadow(0 10px 18px rgba(0,0,0,.5));
}
.clue-scroll-tooltip.show {
opacity: 1;
transform: translate(-50%, 0) scaleY(1);
}
.clue-scroll-tooltip .cst-body {
position: relative;
padding: 13px 18px;
color: #2d2114;
font: 500 13px/1.45 "Segoe UI", system-ui, sans-serif;
background:
radial-gradient(ellipse at 12% 10%, rgba(88,50,20,.16), transparent 24%),
radial-gradient(ellipse at 88% 88%, rgba(95,53,18,.14), transparent 24%),
linear-gradient(135deg, #ecdcb4 0%, #ddc794 55%, #c9ad7c 100%);
border-left: 1px solid rgba(82,53,24,.4);
border-right: 1px solid rgba(82,53,24,.4);
box-shadow:
inset 0 0 0 1px rgba(255,249,213,.35),
inset 14px 0 22px rgba(89,53,19,.12),
inset -14px 0 22px rgba(82,47,16,.14);
}
.clue-scroll-tooltip .cst-rod {
height: 13px;
margin: 0 -6px;
border-radius: 7px;
background:
radial-gradient(ellipse 12px 7px at 0% 50%, #2a1d10 0 60%, transparent 100%),
radial-gradient(ellipse 12px 7px at 100% 50%, #2a1d10 0 60%, transparent 100%),
linear-gradient(180deg, #6e4d28 0%, #c0a070 40%, #b08c58 60%, #3a2510 100%);
box-shadow: inset 0 1px 0 rgba(255,235,180,.3), 0 2px 4px rgba(0,0,0,.5);
}
.clue-scroll-tooltip .cst-rod-top { margin-bottom: -2px; }
.clue-scroll-tooltip .cst-rod-bot { margin-top: -2px; }
.clue-scroll-tooltip .cst-row { margin: 3px 0; }
.clue-scroll-tooltip .cst-row + .cst-row { padding-top: 6px; border-top: 1px dashed rgba(82,53,24,.3); }
.clue-scroll-tooltip .cst-dir {
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #7a4a18;
margin-bottom: 2px;
}
.clue-scroll-tooltip .cst-text { color: #2d2114; }
/* ── ПЕЧАТЬ ТЁМНОГО БРАТСТВА на свитке = триггер «новый свиток» ──
* Не дубль — кликабельной делаем СУЩЕСТВУЮЩУЮ .wax-seal на свитке. */
body.theme-skyrim.wax-seal-interactive .wax-seal {
cursor: pointer;
pointer-events: auto;
transition: transform 180ms cubic-bezier(.34,1.4,.5,1), filter 220ms ease;
animation: seal-idle-pulse 3.6s ease-in-out infinite;
}
body.theme-skyrim.wax-seal-interactive .wax-seal:hover {
transform: rotate(-7deg) scale(1.12); /* базовый rotate -7deg сохраняем */
filter:
drop-shadow(0 0 14px rgba(220,40,20,.8))
drop-shadow(0 0 26px rgba(255,90,30,.45))
drop-shadow(0 4px 3px rgba(0,0,0,.58));
}
body.theme-skyrim.wax-seal-interactive .wax-seal:active {
transform: rotate(-7deg) scale(1.04);
}
/* Подсказка над печатью на hover */
body.theme-skyrim.wax-seal-interactive .wax-seal::after {
content: "Призвать свиток";
position: absolute;
left: 50%;
bottom: calc(100% + 6px);
transform: translateX(-50%);
white-space: nowrap;
font: 600 11px/1 "Segoe UI", system-ui, sans-serif;
letter-spacing: 0.04em;
color: #e6c061;
text-shadow: 0 1px 3px #000, 0 0 8px rgba(220,40,20,.5);
background: rgba(10,6,4,.7);
padding: 4px 8px;
border-radius: 4px;
opacity: 0;
transition: opacity 180ms ease;
pointer-events: none;
display: block !important; /* перебить .wax-seal::after { content:none } */
}
body.theme-skyrim.wax-seal-interactive .wax-seal:hover::after { opacity: 1; }
@keyframes seal-idle-pulse {
0%, 100% { filter: drop-shadow(0 4px 3px rgba(0,0,0,.58)); }
50% { filter: drop-shadow(0 0 11px rgba(180,30,15,.5)) drop-shadow(0 4px 3px rgba(0,0,0,.58)); }
}
/* ── DRAGON TUNE PANEL (inline на главной) ─────────────────── */
/* Видимая ТОЛЬКО когда выбран dragon-mode=cinematic */
.dragon-tune-panel { display: none; }
body.theme-skyrim.dragon-mode-cinematic .dragon-tune-panel { display: block; }
.dragon-tune-panel .dp-section { margin: 6px 0; padding: 4px 0; border-bottom: 1px dashed rgba(212,175,55,0.15); }
.dragon-tune-panel summary { cursor: pointer; font-size: 12px; padding: 4px 0; color: #d4af37; user-select: none; }
.dragon-tune-panel summary:hover { color: #f0d68a; }
.dragon-tune-panel label { display: block; font-size: 11px; margin: 6px 0; color: #cca767; }
.dragon-tune-panel label.dp-cb { padding: 4px 6px; background: rgba(212,175,55,0.06); border: 1px solid rgba(212,175,55,0.18); cursor: pointer; }
.dragon-tune-panel label.dp-cb input { margin-right: 4px; }
.dragon-tune-panel .dp-val { float: right; font-family: monospace; color: #fff; font-size: 10px; }
.dragon-tune-panel input[type=range] { width: 100%; margin: 2px 0; }
.dragon-tune-panel select { width: 100%; padding: 4px 6px; font-size: 11px; background: #2a1f15; color: #e0d0a0; border: 1px solid #5a4030; }
.dragon-tune-panel .dp-reset-btn {
width: 100%; margin-top: 8px; padding: 6px;
background: #2a1f15; color: #cca767; border: 1px solid #5a4030;
cursor: pointer; font-size: 11px;
}
.dragon-tune-panel .dp-reset-btn:hover { background: #3a2818; color: #d4af37; }
/* ── CINEMATIC 3D DRAGON ───────────────────────────────────── */
/* Stage = full-viewport прозрачный overlay для Three.js canvas'а.
* Позиционирование дракона теперь происходит ВНУТРИ 3D-сцены через
* dragonGroup.position (screenToWorld от anchor X/Y). DOM-rectangle
* больше не двигается — поэтому ни clipping'а, ни визуальной рамки,
* ни блокировки UI-клик'ов. */
body.theme-skyrim .dragon-cinematic-stage {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
pointer-events: none; /* клики проходят сквозь к UI; включается только в edit-mode */
display: none;
overflow: visible;
pointer-events: none;
z-index: 50; /* передний слой — дракон поверх всего UI */
opacity: 0;
transition: opacity 640ms ease;
mix-blend-mode: normal;
}
body.theme-skyrim.dragon-mode-cinematic .dragon-cinematic-stage {
display: block;
opacity: 1;
}
body.theme-skyrim .dragon-cinematic-stage.is-breathing {
z-index: 30;
}
body.theme-skyrim .dragon-cinematic-stage canvas {
display: block;
width: 100%;
height: 100%;
pointer-events: none; /* отдельная страховка от click-захвата */
}
/* Editing-режим — единственный момент когда мы перехватываем pointer events.
* Edit-режим включается чекбоксом «🎯 Перетащить дракона мышью». */
body.theme-skyrim .dragon-cinematic-stage.dragon-stage-editing canvas {
pointer-events: auto;
cursor: move;
}
body.theme-skyrim .dragon-cinematic-stage.dragon-stage-editing::after {
content: "🎯 drag — нажми на дракона и тащи (anchorX/Y запишутся в lab-настройки)";
display: block;
position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
font: 11px monospace; color: #d4af37;
background: rgba(0,0,0,0.65);
padding: 4px 10px; border-radius: 3px;
z-index: 10; pointer-events: none;
white-space: nowrap;
}
/* Старый fire-flash через CSS gradient (был привязан к stage rect)
* — теперь не нужен: всё пламя живёт внутри Three.js scene. */
body.theme-skyrim .dragon-cinematic-stage::before,
body.theme-skyrim .dragon-cinematic-stage::after {
/* Reset → используется только когда .dragon-stage-editing активен (см. выше) */
content: none;
background: none;
opacity: 0;
mix-blend-mode: screen;
}
/* CSS-fire-flash отключён — теперь fire-визуал полностью в Three.js sprites */
body.theme-skyrim .dragon-cinematic-stage.is-breathing::after {
/* no-op */
}
body.theme-skyrim .dragon-cinematic-stage.is-fallback canvas {
filter:
drop-shadow(0 0 18px rgba(255, 132, 43, 0.22))
drop-shadow(0 12px 22px rgba(0, 0, 0, 0.7));
}
body.theme-skyrim.dragon-mode-cinematic .controls,
body.theme-skyrim.dragon-mode-cinematic main,
body.theme-skyrim.dragon-mode-cinematic .history-panel,
body.theme-skyrim.dragon-mode-cinematic .editor-panel {
position: relative;
z-index: 4;
}
@keyframes dragon-fire-flash {
0% { opacity: 0; }
12% { opacity: 1; }
100% { opacity: 0; }
}
/* HTML/чёрный фон до загрузки, чтоб не было белых вспышек */
html { background: #050402; }
/* ── ВОСКОВАЯ ПЕЧАТЬ ──
Компактная печать в верхне-правом углу свитка,
как печать авторитета на фолианте. */
body.theme-skyrim .wax-seal {
position: absolute;
top: -18px;
right: -14px;
width: 64px;
height: 64px;
z-index: 7;
transform: rotate(8deg);
filter:
drop-shadow(0 3px 5px rgba(0,0,0,0.75))
drop-shadow(0 1px 2px rgba(80,15,5,0.55))
drop-shadow(0 0 10px rgba(160,30,15,0.22));
pointer-events: none;
animation: wax-stamp 0.9s cubic-bezier(.34,1.4,.64,1) backwards 2.0s;
background: url("../assets/images/dark-brotherhood-wax-seal.png?v=1") center / contain no-repeat;
}
@keyframes wax-stamp {
0% { opacity: 0; transform: rotate(8deg) scale(2.4) translateY(-30px); filter: blur(4px); }
60% { opacity: 1; transform: rotate(8deg) scale(0.9); filter: blur(0); }
100% { opacity: 1; transform: rotate(8deg) scale(1); }
}
body.theme-skyrim .wax-seal svg { width: 100%; height: 100%; display: block; }
@media (max-width: 720px) {
body.theme-skyrim .wax-seal { width: 52px; height: 52px; top: -10px; right: -8px; }
}
/* ── ПЕЧАТЬ — все эффекты гасим, чистый чёрно-белый ──────────── */
@media print {
html, body.theme-skyrim, body.theme-skyrim * {
animation: none !important;
transition: none !important;
}
html, body.theme-skyrim {
background: #fff !important;
color: #000 !important;
}
body.theme-skyrim *::before,
body.theme-skyrim *::after {
background-image: none !important;
box-shadow: none !important;
border-color: #000 !important;
content: "" !important;
}
body.theme-skyrim .snow-layer,
body.theme-skyrim .ember-layer,
body.theme-skyrim .dragon-cinematic-stage,
body.theme-skyrim .skyrim-dragon-skel,
body.theme-skyrim .dragon-flight,
body.theme-skyrim .wax-seal { display: none !important; }
body.theme-skyrim .app-title {
-webkit-text-fill-color: #000 !important;
background: none !important;
text-shadow: none !important;
color: #000 !important;
}
body.theme-skyrim .grid-container,
body.theme-skyrim .controls,
body.theme-skyrim .history-panel,
body.theme-skyrim .clues-container > div {
background: #fff !important;
border: 1px solid #000 !important;
box-shadow: none !important;
}
body.theme-skyrim .cell:not(.block) { background: #fff !important; color: #000 !important; border: 1px solid #000 !important; box-shadow: none !important; }
body.theme-skyrim .cell.block { background: #000 !important; }
}
/* >>> THEME-END <<< */
/* ============ Dragon mode gating (master switch via body class) ============ */
body.theme-skyrim.dragon-mode-none .dragon-flight,
body.theme-skyrim.dragon-mode-cursor .dragon-flight,
body.theme-skyrim.dragon-mode-cinematic .dragon-flight,
body.theme-skyrim.dragon-mode-none .skyrim-dragon-skel,
body.theme-skyrim.dragon-mode-fly .skyrim-dragon-skel,
body.theme-skyrim.dragon-mode-cinematic .skyrim-dragon-skel {
display: none !important;
}
body.theme-skyrim.dragon-mode-fly .dragon-flight,
body.theme-skyrim.dragon-mode-cursor .skyrim-dragon-skel {
display: block !important;
}
@media (prefers-reduced-motion: reduce) {
body.theme-skyrim .dragon-cinematic-stage {
display: none !important;
}
}
@keyframes tome-letter-ignite-loop {
0%, 100% {
transform: scale(1);
filter: brightness(1);
}
4% {
transform: translateY(-1px) scale(1.035);
filter:
brightness(1.28)
drop-shadow(0 -4px 6px rgba(255, 120, 30, 0.95))
drop-shadow(0 -10px 14px rgba(255, 70, 10, 0.58))
drop-shadow(0 -18px 22px rgba(200, 30, 0, 0.34));
}
9% {
transform: translateY(0) scale(1.06);
filter:
brightness(1.32)
drop-shadow(0 -6px 8px rgba(255, 170, 60, 0.82))
drop-shadow(0 -12px 16px rgba(255, 110, 30, 0.48));
}
18% {
transform: scale(1);
filter:
brightness(1.08)
drop-shadow(0 -2px 6px rgba(235, 210, 138, 0.32));
}
30% {
transform: scale(1);
filter: brightness(1);
}
}
@keyframes tome-title-ornament-loop {
0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); color: var(--tome-bronze); filter: none; }
8% { opacity: 1; transform: scale(1.15) rotate(0deg); color: var(--tome-gold-bright); filter: drop-shadow(0 0 12px rgba(235, 210, 138, 0.55)); }
18% { opacity: 1; transform: scale(1); color: var(--tome-bronze); filter: drop-shadow(0 0 4px rgba(235, 210, 138, 0.2)); }
30%, 100% { opacity: 1; transform: scale(1); color: var(--tome-bronze); filter: none; }
}
/* Override: больше padding чтобы клетки не залезали под scroll-rod */
body.theme-skyrim .grid-container {
padding-top: 76px !important;
padding-bottom: 88px !important;
}
body.theme-skyrim .scroll-rod-top,
body.theme-skyrim .scroll-rod-bottom {
left: -24px !important;
right: -24px !important;
height: 54px !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Валики свитка — версия от Claude.ai дизайнера (Nordic Tomes).
CSS-only multi-layer gradients: тёмные деревянные навершия-колпачки + пятна окисления
+ волокна бумаги (repeating-linear) + продольные полосы (rolls) + охристая пергаментная палитра. */
body.theme-skyrim .scroll-rod-top,
body.theme-skyrim .scroll-rod-bottom {
background-image:
radial-gradient(ellipse 14px 17px at 0% 50%, #2a1d10 0 65%, #1a1208 82%, transparent 100%),
radial-gradient(ellipse 14px 17px at 100% 50%, #2a1d10 0 65%, #1a1208 82%, transparent 100%),
radial-gradient(ellipse 6px 3px at 18% 55%, rgba(80,40,15,0.45) 0 70%, transparent 100%),
radial-gradient(ellipse 5px 3px at 36% 45%, rgba(90,50,18,0.38) 0 70%, transparent 100%),
radial-gradient(ellipse 7px 4px at 58% 60%, rgba(70,35,12,0.40) 0 70%, transparent 100%),
radial-gradient(ellipse 5px 3px at 78% 48%, rgba(95,55,20,0.36) 0 70%, transparent 100%),
repeating-linear-gradient(115deg, transparent 0 4px, rgba(80,50,20,0.10) 4px 5px),
linear-gradient(180deg,
rgba(0,0,0,0.55) 0%,
rgba(60,38,18,0.0) 8%,
rgba(220,180,120,0.18) 14%,
rgba(170,128,72,0.0) 24%,
rgba(0,0,0,0.18) 50%,
rgba(180,138,80,0.0) 76%,
rgba(40,24,10,0.55) 90%,
rgba(0,0,0,0.7) 100%),
linear-gradient(180deg,
#6e4d28 0%,
#b8956c 18%,
#e0c293 38%,
#d4b582 55%,
#b18856 72%,
#6b461f 90%,
#3a2510 100%) !important;
background-size: auto, auto, auto, auto, auto, auto, auto, 100% 100%, 100% 100% !important;
background-repeat: no-repeat !important;
border-radius: 13px !important;
box-shadow:
inset 0 1px 0 rgba(255,235,180,0.35),
inset 0 -2px 4px rgba(0,0,0,0.55),
inset 0 0 0 1px rgba(110,77,40,0.55),
0 3px 6px rgba(0,0,0,0.7),
0 0 0 1px rgba(30,20,10,0.8) !important;
height: 26px !important;
left: -8px !important;
right: -8px !important;
}
body.theme-skyrim .scroll-rod-top {
top: 0 !important;
filter: drop-shadow(0 4px 4px rgba(0,0,0,0.55)) !important;
}
body.theme-skyrim .scroll-rod-bottom {
bottom: 0 !important;
filter: drop-shadow(0 -3px 4px rgba(0,0,0,0.45)) !important;
}
@keyframes tome-rod-descend {
0% { bottom: calc(100% - 76px); }
100% { bottom: 18px; }
}
/* Свёрнутый свиток (когда кроссворд ещё не сгенерирован) — всё равно должен выглядеть как свиток */
body.theme-skyrim .grid-container {
min-width: 480px !important;
}
body.theme-skyrim .scroll-paper {
min-height: 300px;
}
/* Заглушка-подсказка внутри пустого свитка */
body.theme-skyrim #grid-container:not(:has(.grid)) .scroll-paper::before,
body.theme-skyrim .scroll-paper:empty::before {
content: "Свиток пуст";
display: flex;
align-items: center;
justify-content: center;
min-height: 220px;
padding: 24px;
text-align: center;
font-style: italic;
font-size: 17px;
color: var(--tome-bronze, #6e5530);
letter-spacing: 0.04em;
opacity: 0.7;
}
/* Cinematic Skyrim backdrop and intro overlay */
body.theme-skyrim {
background-color: #05070a;
background-image:
radial-gradient(ellipse 80% 42% at 50% 0%, rgba(137, 173, 188, 0.15), transparent 64%),
linear-gradient(180deg, rgba(2, 4, 7, 0.36) 0%, rgba(3, 5, 8, 0.62) 48%, rgba(2, 2, 2, 0.9) 100%),
url("../assets/images/nordic-fortress-bg.png");
background-size: 100% 100%, 100% 100%, cover;
background-position: center, center, center top;
background-repeat: no-repeat;
background-attachment: fixed;
}
body.theme-skyrim::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 70% 45% at 50% 48%, transparent 0%, rgba(0,0,0,0.28) 62%, rgba(0,0,0,0.62) 100%),
linear-gradient(180deg, rgba(255,255,255,0.06), transparent 18%, transparent 78%, rgba(0,0,0,0.34));
}
body.theme-skyrim .controls,
body.theme-skyrim main {
position: relative;
z-index: 1;
}
body.theme-skyrim main {
max-width: min(1180px, calc(100vw - 42px));
margin: 34px auto 58px;
padding: 36px clamp(16px, 3vw, 46px) 62px;
border: 1px solid rgba(190, 148, 73, 0.62);
border-radius: 4px;
overflow: visible;
background:
radial-gradient(ellipse 72% 40% at 50% 0%, rgba(216, 177, 103, 0.14), transparent 68%),
linear-gradient(180deg, rgba(8, 6, 4, 0.12), rgba(2, 2, 2, 0.42)),
url("../assets/images/main-window-bg.png?v=1") center / cover no-repeat;
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.72),
inset 0 0 44px rgba(0, 0, 0, 0.58),
0 22px 70px rgba(0, 0, 0, 0.58),
0 0 0 1px rgba(235, 210, 138, 0.1);
}
body.theme-skyrim main::before {
content: "";
position: absolute;
inset: 10px;
z-index: 0;
pointer-events: none;
border: 1px solid rgba(204, 167, 103, 0.34);
box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.42);
}
body.theme-skyrim main > * {
position: relative;
z-index: 1;
}
body.theme-skyrim .dragon-loading-screen {
position: fixed;
inset: 0;
z-index: 8;
display: block;
overflow: hidden;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 680ms ease, visibility 680ms ease;
background:
radial-gradient(ellipse 52% 34% at 58% 34%, rgba(208, 226, 230, 0.12), transparent 64%),
linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(1, 2, 4, 0.58) 48%, rgba(0, 0, 0, 0.86)),
url("../assets/images/dragon-intro-videoframe.png") center bottom / cover no-repeat;
}
body.theme-skyrim .dragon-intro-video {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
opacity: 0;
/* плавный кроссфейд видео поверх статичного кадра-постера — убирает «рывок старта» */
animation: dragon-intro-video-in 1500ms ease 250ms forwards;
background: #05070a;
}
@keyframes dragon-intro-video-in {
to { opacity: 0.98; }
}
body.theme-skyrim .dragon-loading-screen::before,
body.theme-skyrim .dragon-loading-screen::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
body.theme-skyrim .dragon-loading-screen::before {
background:
linear-gradient(110deg, transparent 0%, rgba(210, 236, 255, 0.12) 45%, transparent 58%),
radial-gradient(ellipse 38% 16% at 50% 104%, rgba(0,0,0,0.72), transparent 70%);
animation: dragon-loader-aurora 5.6s ease-in-out infinite alternate;
}
body.theme-skyrim .dragon-loading-screen::after {
background-image:
radial-gradient(circle, rgba(255,255,255,0.72) 0 1px, transparent 1.5px),
radial-gradient(circle, rgba(235,245,255,0.48) 0 1px, transparent 1.5px);
background-size: 120px 120px, 180px 180px;
animation: dragon-loader-snow 8s linear infinite;
opacity: 0.38;
}
body.theme-skyrim.dragon-mode-cinematic.dragon-cinematic-loading .dragon-loading-screen {
opacity: 1;
visibility: visible;
}
body.theme-skyrim.dragon-mode-cinematic.dragon-cinematic-loading .dragon-cinematic-stage {
opacity: 0;
visibility: hidden;
}
body.theme-skyrim.dragon-mode-cinematic.dragon-cinematic-loading .controls,
body.theme-skyrim.dragon-mode-cinematic.dragon-cinematic-loading main {
opacity: 0;
transform: translateY(12px);
transition: opacity 420ms ease, transform 420ms ease;
}
body.theme-skyrim .dragon-loader-copy {
position: absolute;
left: clamp(28px, 7vw, 110px);
bottom: clamp(44px, 10vh, 110px);
width: min(520px, calc(100vw - 56px));
z-index: 2;
color: #f2e0b6;
text-shadow: 0 2px 10px rgba(0,0,0,0.82), 0 0 26px rgba(133, 175, 190, 0.26);
}
@media (min-aspect-ratio: 21/9) {
body.theme-skyrim .dragon-intro-video {
object-position: center top;
}
body.theme-skyrim .dragon-loader-copy {
left: clamp(48px, 5vw, 140px);
bottom: clamp(32px, 7vh, 86px);
}
}
body.theme-skyrim .dragon-loader-kicker {
font-family: 'Constantia', 'Cambria', serif;
font-size: 13px;
letter-spacing: 0;
text-transform: uppercase;
color: #c7a86e;
margin-bottom: 12px;
}
body.theme-skyrim .dragon-loader-title {
font-family: 'Trajan Pro', 'Constantia', 'Cambria', 'Georgia', serif;
font-size: 64px;
line-height: 0.92;
letter-spacing: 0;
text-transform: uppercase;
}
body.theme-skyrim .dragon-loader-bar {
width: min(360px, 68vw);
height: 3px;
margin-top: 26px;
background: rgba(211, 184, 124, 0.22);
overflow: hidden;
box-shadow: 0 0 18px rgba(210, 181, 105, 0.22);
}
body.theme-skyrim .dragon-loader-bar span {
display: block;
width: 42%;
height: 100%;
background: linear-gradient(90deg, transparent, #efd894, transparent);
animation: dragon-loader-bar 1.35s ease-in-out infinite;
}
body.theme-skyrim .scroll-paper,
body.theme-skyrim .clues-container > div {
background:
radial-gradient(circle at 18% 22%, rgba(112, 66, 22, 0.16) 0 2px, transparent 3px),
radial-gradient(circle at 84% 76%, rgba(92, 48, 16, 0.13) 0 2px, transparent 3px),
radial-gradient(ellipse at 50% 0%, rgba(255, 241, 190, 0.28), transparent 42%),
repeating-linear-gradient(104deg, transparent 0 8px, rgba(95, 60, 26, 0.045) 8px 9px),
linear-gradient(180deg, #f0dbad 0%, #d7b982 48%, #b68e58 100%);
color: var(--tome-ink);
border: 1px solid rgba(86, 55, 22, 0.72);
box-shadow:
inset 0 0 0 1px rgba(255, 244, 203, 0.26),
inset 0 0 34px rgba(96, 55, 18, 0.32),
0 16px 38px rgba(0,0,0,0.5);
}
body.theme-skyrim .scroll-paper {
padding: 20px;
}
body.theme-skyrim .grid-container .scroll-paper {
padding: 34px 42px 138px !important;
background: url("../assets/images/scroll-paper-body.png?v=2") center / 100% 100% no-repeat !important;
border: none !important;
box-shadow: 0 18px 34px rgba(0,0,0,0.48) !important;
}
body.theme-skyrim .clues-container {
max-width: 1040px;
margin: 10px auto 0;
gap: 32px;
align-items: start;
}
body.theme-skyrim .clues-container > div {
position: relative;
padding: 42px 30px 44px;
min-height: 260px;
}
body.theme-skyrim .clues-container > div::before,
body.theme-skyrim .clues-container > div::after {
content: "";
position: absolute;
left: -10px;
right: -10px;
height: 24px;
pointer-events: none;
z-index: 2;
border-radius: 13px;
background:
radial-gradient(ellipse 14px 17px at 0% 50%, #2a1d10 0 65%, #1a1208 82%, transparent 100%),
radial-gradient(ellipse 14px 17px at 100% 50%, #2a1d10 0 65%, #1a1208 82%, transparent 100%),
repeating-linear-gradient(115deg, transparent 0 4px, rgba(70,43,18,0.12) 4px 5px),
linear-gradient(180deg, #6e4d28 0%, #b8956c 20%, #e0c293 42%, #b18856 74%, #3a2510 100%);
box-shadow:
inset 0 1px 0 rgba(255,235,180,0.32),
inset 0 -2px 4px rgba(0,0,0,0.55),
0 3px 7px rgba(0,0,0,0.62);
}
body.theme-skyrim .clues-container > div::before { top: 0; }
body.theme-skyrim .clues-container > div::after { bottom: 0; }
body.theme-skyrim .clues-container h3,
body.theme-skyrim .clues-container li,
body.theme-skyrim .clues-container li b {
color: var(--tome-ink);
text-shadow: 0 1px 0 rgba(255, 239, 186, 0.24);
}
body.theme-skyrim .clues-container h3 {
color: #4a2d0e;
}
body.theme-skyrim .clues-container h3::after {
background: linear-gradient(90deg, transparent 0%, rgba(83,52,20,0.45) 18%, rgba(60,35,12,0.78) 50%, rgba(83,52,20,0.45) 82%, transparent 100%);
}
body.theme-skyrim .clues-container li b {
color: #6c4115;
}
/* Clean scroll composition: the crossword scroll is now PNG-led, not a stacked
leather frame plus parchment gradients. */
body.theme-skyrim .grid-container {
display: block !important;
position: relative !important;
width: max-content !important;
min-width: min(520px, calc(100vw - 80px)) !important;
max-width: calc(100vw - 72px) !important;
margin: 0 auto 40px !important;
padding: 76px 0 88px !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.theme-skyrim #grid-container {
animation: none !important;
transform: none !important;
transform-origin: center top !important;
opacity: 1 !important;
visibility: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.theme-skyrim .grid-container::before,
body.theme-skyrim .grid-container::after,
body.theme-skyrim #grid-container::before,
body.theme-skyrim #grid-container::after {
content: none !important;
display: none !important;
}
body.theme-skyrim .grid-container .scroll-paper {
position: relative !important;
z-index: 2 !important;
display: block !important;
min-height: 300px !important;
overflow: visible !important;
color: var(--tome-ink) !important;
padding: 36px 46px 142px !important;
background: url("../assets/images/scroll-paper-body.png?v=2") center / 100% 100% no-repeat !important;
border: 0 !important;
box-shadow:
0 18px 34px rgba(0,0,0,0.42),
0 0 0 1px rgba(112, 71, 24, 0.12) !important;
}
/* Красная ленточка-закладка у печати убрана совсем (по просьбе). Сам ::before
оставляем выключенным здесь — заглушка «Свиток пуст» рисуется через свой
селектор выше по специфичности (#grid-container:not(:has(.grid)) …). */
body.theme-skyrim .grid-container .scroll-paper::before {
content: none;
display: none;
}
body.theme-skyrim #grid-container .scroll-paper {
/* clip-path убран отсюда — он с !important замораживал intro-разворачивание
(tome-paper-reveal). Базовое состояние clip-path:none = полный свиток. */
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
}
body.theme-skyrim .grid-container .scroll-paper > .grid {
margin: 0 auto !important;
}
body.theme-skyrim #grid-container .grid {
position: relative !important;
z-index: 3 !important;
display: grid !important;
opacity: 1 !important;
visibility: visible !important;
}
body.theme-skyrim .scroll-rod-top,
body.theme-skyrim .scroll-rod-bottom {
z-index: 5 !important;
}
body.theme-skyrim .scroll-rod-top {
top: 18px !important;
}
body.theme-skyrim .scroll-rod-bottom {
bottom: 18px !important;
}
body.theme-skyrim .wax-seal {
position: absolute;
display: block;
width: 92px;
height: 92px;
top: auto;
right: 56px;
bottom: 34px;
z-index: 6;
transform: rotate(-7deg);
animation: none;
opacity: 0.96;
background: url("../assets/images/dark-brotherhood-wax-seal.png?v=1") center / contain no-repeat;
filter:
drop-shadow(0 4px 3px rgba(0,0,0,0.58))
drop-shadow(0 0 7px rgba(0,0,0,0.26));
}
body.theme-skyrim .wax-seal svg {
display: none;
}
body.theme-skyrim .wax-seal::before,
body.theme-skyrim .wax-seal::after {
content: none;
display: none;
}
@media (max-width: 720px) {
body.theme-skyrim .wax-seal {
width: 72px;
height: 72px;
right: 28px;
bottom: 30px;
}
body.theme-skyrim .grid-container .scroll-paper {
padding: 28px 30px 116px !important;
}
body.theme-skyrim .grid-container .scroll-paper::before {
right: 59px;
bottom: 0;
width: 28px;
height: 76px;
}
}
@keyframes dragon-loader-aurora {
0% { opacity: 0.42; transform: translateX(-3%) skewX(-4deg); }
100% { opacity: 0.72; transform: translateX(4%) skewX(4deg); }
}
@keyframes dragon-loader-snow {
0% { background-position: 0 -120px, 0 -180px; }
100% { background-position: 80px 120px, -120px 180px; }
}
@keyframes dragon-loader-bar {
0% { transform: translateX(-120%); }
100% { transform: translateX(260%); }
}
@media (max-width: 720px) {
body.theme-skyrim .dragon-loader-title { font-size: 42px; }
body.theme-skyrim .dragon-loader-kicker { font-size: 12px; }
}
@media print {
body.theme-skyrim .dragon-loading-screen { display: none !important; }
}
/* ════════════════════════════════════════════════════════════════
PROCEDURAL PARCHMENT (Codex gpt-5.5) — финальный override.
Перебивает старые PNG-правила `.scroll-paper { background: url(...) !important }`
за счёт более высокой специфичности: body.theme-skyrim #grid-container .scroll-paper
= (1 id, 2 class, 1 elem) > (0,3,1) у PNG-правил. PNG больше не нужен —
тёплый многослойный градиент + SVG-fiber data-URI + foxing по углам.
════════════════════════════════════════════════════════════════ */
body.theme-skyrim #grid-container .scroll-paper {
color: #2d2114 !important;
background:
/* продольные волокна-«верже» (Древние свитки): высокая частота по X, низкая по Y */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='lf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.035' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .34 0 0 0 0 .22 0 0 0 0 .09 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23lf)'/%3E%3C/svg%3E"),
/* fiber-текстура (тонкий SVG-шум, верхний слой) */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7 .26' numOctaves='4' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .42 0 0 0 0 .29 0 0 0 0 .13 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E"),
/* foxing — тёмные пятна по углам */
radial-gradient(ellipse at 13% 8%, rgba(88,50,20,.22), transparent 22%),
radial-gradient(ellipse at 88% 12%, rgba(95,53,18,.18), transparent 19%),
radial-gradient(ellipse at 16% 88%, rgba(73,39,13,.20), transparent 24%),
radial-gradient(ellipse at 84% 83%, rgba(97,52,16,.20), transparent 22%),
/* боковое затемнение */
linear-gradient(90deg,
rgba(76,42,15,.28) 0%, rgba(115,74,35,.14) 4%,
transparent 12%, transparent 88%,
rgba(118,77,34,.15) 96%, rgba(72,39,14,.30) 100%),
/* верхний хайлайт + нижняя тень */
linear-gradient(180deg,
rgba(255,247,208,.38) 0%, transparent 16%,
transparent 82%, rgba(91,52,21,.18) 100%),
/* базовый кремово-охристый */
linear-gradient(135deg, #e8d9b0 0%, #dfc999 34%, #d4be8e 63%, #b89968 100%) !important;
background-size: 260px 260px, 240px 240px, auto, auto, auto, auto, auto, auto, 100% 100% !important;
border: 1px solid rgba(82,53,24,.45) !important;
box-shadow:
inset 0 0 0 1px rgba(255,249,213,.35),
inset 18px 0 28px rgba(89,53,19,.14),
inset -18px 0 28px rgba(82,47,16,.18),
inset 0 18px 22px rgba(255,250,220,.25),
inset 0 -22px 30px rgba(77,43,14,.20),
0 10px 22px rgba(0,0,0,.34) !important;
border-radius: 3px;
/* НЕ ставим clip-path/!important здесь — иначе замораживает intro-анимацию
разворачивания свитка (tome-paper-reveal анимирует clip-path). */
}
/* ════════════════════════════════════════════════════════════════
ЦЕЛЬНЫЙ СВИТОК — рулоны сверху/снизу из ТОГО ЖЕ пергамента (не дерево
с кругляшками). Рулоны налезают на края листа → читается как один лист,
скрученный сверху и снизу. Высокая специфичность (#grid-container) + !important
перебивают старые «деревянные валики».
════════════════════════════════════════════════════════════════ */
/* Контейнер: небольшой запас под рулоны (было 76/88 → большой зазор = «отдельные палки») */
body.theme-skyrim #grid-container {
padding: 30px 16px 34px !important;
}
/* Лист: небольшой вертикальный отступ, чтобы рулоны налегали на края */
body.theme-skyrim #grid-container .scroll-paper {
margin: 6px 0 !important;
}
/* Рулоны = горизонтальные цилиндры пергамента */
body.theme-skyrim #grid-container .scroll-rod-top,
body.theme-skyrim #grid-container .scroll-rod-bottom {
position: absolute !important;
left: -8px !important;
right: -8px !important;
width: auto !important;
height: 36px !important;
border: none !important;
border-radius: 18px !important;
z-index: 6 !important;
filter: none !important;
background:
/* центральная линия — край скрученной бумаги */
linear-gradient(180deg, transparent 44%, rgba(110,78,38,.55) 49%,
rgba(74,50,22,.6) 50.5%, transparent 56%),
/* цилиндрическая подсветка пергамента (светлее в центре, темнее к краям) */
linear-gradient(180deg,
#8a6c40 0%, #b6925d 12%, #ddc596 34%, #f2e4be 50%,
#e0c896 64%, #b08a55 86%, #82643a 100%) !important;
background-size: 100% 100%, 100% 100% !important;
background-repeat: no-repeat !important;
box-shadow:
inset 0 2px 2px rgba(255,247,216,.6),
inset 0 -3px 5px rgba(74,50,22,.5),
0 1px 0 rgba(110,80,40,.5),
0 2px 5px rgba(0,0,0,.3) !important;
}
body.theme-skyrim #grid-container .scroll-rod-top {
top: 8px !important;
bottom: auto !important;
}
body.theme-skyrim #grid-container .scroll-rod-bottom {
bottom: 8px !important;
top: auto !important;
}
/* Тень-скрутка: рулон отбрасывает мягкую тень на плоский лист (псевдо ::before).
Перебиваем глобальный `::before{content:none}` через !important. */
body.theme-skyrim #grid-container .scroll-rod-top::before,
body.theme-skyrim #grid-container .scroll-rod-bottom::before {
content: "" !important;
display: block !important;
position: absolute !important;
left: 10px;
right: 10px;
height: 16px;
z-index: -1;
pointer-events: none;
}
body.theme-skyrim #grid-container .scroll-rod-top::before {
top: 100%;
background: linear-gradient(180deg, rgba(54,36,16,.34), transparent);
}
body.theme-skyrim #grid-container .scroll-rod-bottom::before {
bottom: 100%;
background: linear-gradient(0deg, rgba(54,36,16,.34), transparent);
}
/* Убираем старые кругляшки-навершия (::after) если они есть */
body.theme-skyrim #grid-container .scroll-rod-top::after,
body.theme-skyrim #grid-container .scroll-rod-bottom::after {
content: none !important;
display: none !important;
}
/* Folded state before the first generated crossword. Keep only a compact roll
in the layout; the parchment sheet and seal appear when the scroll opens. */
body.theme-skyrim #grid-container.is-empty-scroll {
min-height: 54px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
body.theme-skyrim #grid-container.is-empty-scroll .scroll-paper {
min-height: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
border: 0 !important;
box-shadow: none !important;
}
body.theme-skyrim #grid-container.is-empty-scroll .wax-seal,
body.theme-skyrim #grid-container.is-empty-scroll .scroll-paper::before {
display: none !important;
}
body.theme-skyrim #grid-container.is-empty-scroll .scroll-rod-top {
top: 8px !important;
}
body.theme-skyrim #grid-container.is-empty-scroll .scroll-rod-bottom {
top: 8px !important;
bottom: auto !important;
transform: translateY(11px) !important;
}
/* Make the reveal mechanically coherent: the lower roll travels with the
sheet's opening edge instead of popping into its final position. */
body.theme-skyrim #grid-container.is-rolled:not(.is-empty-scroll) .scroll-paper {
clip-path: inset(0 0 100% 0) !important;
}
body.theme-skyrim #grid-container.is-revealing .scroll-paper {
animation: scroll-unroll 900ms cubic-bezier(.22, 1, .36, 1) both !important;
}
body.theme-skyrim #grid-container.is-rolled:not(.is-empty-scroll) .scroll-rod-bottom {
transform: translateY(calc(-1 * var(--scroll-h, 320px))) !important;
}
body.theme-skyrim #grid-container.is-revealing .scroll-rod-bottom {
animation: rod-descend-unroll 900ms cubic-bezier(.22, 1, .36, 1) both !important;
}
/* Burn backing is synchronized in dragon-scroll-fire.js; avoid a separate CSS
mask here, otherwise the paper and flame move on different maps. */
body.theme-skyrim #grid-container.is-burning .grid,
body.theme-skyrim #grid-container.is-burning .scroll-paper > * {
animation: none !important;
opacity: 1 !important;
filter: none !important;
}
body.theme-skyrim #grid-container.is-burn-swapping .scroll-paper,
body.theme-skyrim #grid-container.is-burn-swapping > .grid {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ════════════════════════════════════════════════════════════════
СВЕЧНОЙ АНТУРАЖ (Древние свитки): тёплые световые пятна по краям + виньетка.
DOM внедряет skyrim-decor.js (.skyrim-ambiance в ). Позади сцены
(z-index:-1) — свечи screen-блендятся с тёмным фоном страницы. Offline.
════════════════════════════════════════════════════════════════ */
body.theme-skyrim .skyrim-ambiance {
position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
body.theme-skyrim .skyrim-ambiance .candle {
position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
filter: blur(40px); mix-blend-mode: screen;
}
body.theme-skyrim .skyrim-ambiance .candle.l {
left: -22vmax; top: 30%;
background: radial-gradient(circle, rgba(255,150,40,.30), transparent 60%);
animation: skyrim-flickerA 5.5s ease-in-out infinite;
}
body.theme-skyrim .skyrim-ambiance .candle.r {
right: -20vmax; top: 16%;
background: radial-gradient(circle, rgba(255,120,30,.26), transparent 60%);
animation: skyrim-flickerB 6.7s ease-in-out infinite;
}
body.theme-skyrim .skyrim-ambiance .candle.c {
left: 50%; top: 60%; margin-left: -40vmax; width: 80vmax; height: 50vmax;
background: radial-gradient(circle, rgba(255,170,70,.15), transparent 62%);
animation: skyrim-flickerC 8s ease-in-out infinite;
}
body.theme-skyrim .skyrim-ambiance .vignette {
position: absolute; inset: 0;
background: radial-gradient(72% 62% at 50% 44%, transparent 34%, rgba(0,0,0,.5) 76%, rgba(0,0,0,.88) 100%);
}
@keyframes skyrim-flickerA { 0%,100%{opacity:.85;transform:scale(1)} 45%{opacity:1;transform:scale(1.04)} 70%{opacity:.78} }
@keyframes skyrim-flickerB { 0%,100%{opacity:.9} 30%{opacity:.7} 55%{opacity:1;transform:scale(1.05)} 80%{opacity:.82} }
@keyframes skyrim-flickerC { 0%,100%{opacity:.78} 50%{opacity:1} }
@media (prefers-reduced-motion: reduce) {
body.theme-skyrim .skyrim-ambiance .candle { animation: none !important; }
}
/* ════════════════════════════════════════════════════════════════
МОБИЛЬНАЯ АДАПТАЦИЯ (узкий экран). После добавления viewport-меты
телефон верстает по device-width. Здесь: вопросы в 1 колонку, сетка
ужимается под ширину, снятие форсированных min-width, компактные отступы.
════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
/* Вопросы — одной колонкой (на узком 2 колонки тесные). */
body .clues-container {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
/* Сетка влезает по ширине: клетка = min(дефолт, доступная ширина / размер).
renderer.js ставит --cell-size инлайном (36px) → перебиваем !important.
--grid-size инлайн от renderer тоже доступен. Буфер 40px — на отступы,
рамки и налезающие рулоны свитка. */
body #grid-container .grid {
--cell-size: min(34px, calc((100vw - 40px) / var(--grid-size, 13))) !important;
}
/* theme-skyrim: свиток-пергамент добавляет боковые валики/поля → сетка вылезала
за правый край. Больший буфер + центрирование сетки в свитке. */
body.theme-skyrim #grid-container .grid {
--cell-size: min(30px, calc((100vw - 78px) / var(--grid-size, 13))) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Снять форсированные min-width контейнера/свитка + компактные отступы. */
body.theme-skyrim #grid-container,
body.theme-skyrim .grid-container {
min-width: 0 !important;
max-width: 100vw !important;
padding: 18px 6px 22px !important;
}
body.theme-skyrim .grid-container .scroll-paper {
min-width: 0 !important;
padding: 14px 10px 88px !important;
}
/* Рулоны не должны вылезать за экран (они на left/right:-8px). */
body.theme-skyrim #grid-container .scroll-rod-top,
body.theme-skyrim #grid-container .scroll-rod-bottom {
left: 0 !important;
right: 0 !important;
}
/* Mobile safety: hide 3D/dragon layers; JS also switches mode to none. */
.dragon-cinematic-stage,
#dragon-loading-screen,
.dragon-loading-screen,
.dragon-flight,
.skyrim-dragon-skel { display: none !important; }
/* Подстраховка от горизонтального скролла от декора. */
html, body { overflow-x: hidden !important; }
}
@media (hover: none) and (pointer: coarse) {
.dragon-cinematic-stage,
#dragon-loading-screen,
.dragon-loading-screen,
.dragon-flight,
.skyrim-dragon-skel { display: none !important; }
}