/* ===== theme-real.css — ВТОРАЯ версия: «Вечер в мастерской Деда Мороза» =====
   КАрдинально другой язык дизайна (не перекраска!):
   • Типографика: книжная антиква (Georgia serif) ВЕЗДЕ вместо округлого Comfortaa
   • Композиция: сцена вместо карточек — контент живёт в вечернем мире
   • Формы: деревянные таблички на верёвках, пергаментные свитки, сургучные печати,
     стеклянные шары на нитках — вместо плоских скруглённых карточек
   • Фактуры: дерево (реpeating gradients), бумажное волокно, золото
   • Настроение: тёплый свет камина и фонарей, боке, глубокая ночь
   Включается классом .theme-real на <html>. Идёт ПОСЛЕ theme-day.css. */

/* ============================================================
   0. БАЗА: шрифт-идентичность и ночь
   ============================================================ */
html.theme-real {
  --serif: Georgia, 'Times New Roman', 'Noto Serif', serif;
  --wood-1: #5a3a1e;
  --wood-2: #6e4a26;
  --wood-3: #7d5730;
  --wood-dark: #3d2512;
  --paper: #f7ecd4;
  --paper-2: #efe0c2;
  --ink: #3a2c1a;
  --gold: #d9a441;
  --gold-2: #f2cd7e;
  --night-1: #101f3c;
  --night-2: #1c3054;
}

html.theme-real body {
  font-family: var(--serif);
  color: #f4e9d0;
  background: #101f3c;
  background-image:
    radial-gradient(1100px 700px at 78% -8%, rgba(255, 190, 110, 0.14), transparent 60%),
    radial-gradient(900px 620px at 8% 12%, rgba(120, 160, 230, 0.12), transparent 60%),
    linear-gradient(180deg, #0c1830 0%, #132544 34%, #27395c 62%, #4c4468 82%, #6b5059 100%);
}

/* ============================================================
   1. ФОН: тёплое боке-окно вместо холодной авроры
   ============================================================ */
html.theme-real .festive-bg .aurora { opacity: 0.85; }
html.theme-real .festive-bg .aurora-1 {
  background: radial-gradient(circle, rgba(255, 196, 110, 0.34), transparent 62%);
  filter: blur(64px);
}
html.theme-real .festive-bg .aurora-2 {
  background: radial-gradient(circle, rgba(255, 140, 130, 0.2), transparent 62%);
  filter: blur(70px);
}

/* Боке-огни, летающие по карте, УДАЛЕНЫ по просьбе пользователя:
   теперь весь свет живёт только на ёлке в деревне (см. .ny-village .twk → treeLightSoft).
   Вместо боке — лёгкое статичное тёплое свечение неба (без движения и точек). */
html.theme-real .festive-bg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 30% at 50% 0%, rgba(255, 205, 130, 0.14), transparent 72%),
    radial-gradient(30% 22% at 84% 10%, rgba(255, 190, 140, 0.10), transparent 70%);
}

/* Звёзды + луна (сохраняются, но теплее) */
html.theme-real .festive-bg::after {
  content: ''; position: absolute; top: 6%; right: 8%;
  width: 72px; height: 72px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 38% 34%, #fffef4 0%, #f7ecd0 55%, #e8d6ae 100%);
  box-shadow: 0 0 40px 14px rgba(255, 240, 200, 0.45), 0 0 110px 46px rgba(255, 230, 180, 0.18);
}
/* Падающие звёзды = летающие огоньки по карте — убраны (свет только на ёлке) */
html.theme-real .festive-bg .shooting-star { display: none; }

/* Снег крупнее и мягче */
html.theme-real .festive-bg .snow { opacity: 0.8; }
html.theme-real .festive-bg .snow-2 { opacity: 0.6; }

/* Сугробы: тёплый лунный свет сверху */
html.theme-real .ground-snow {
  height: 160px;
  background: linear-gradient(180deg, transparent, rgba(226, 228, 248, 0.4) 46%, #e9ecf8 80%, #f6f7fc 100%);
}

/* ============================================================
   2. СТАРТ: СЦЕНА вместо карточки
   ============================================================ */
/* Карточка исчезает — контент прямо в сцене */
html.theme-real #screen-start .start-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
html.theme-real #screen-start .start-card::before { display: none; }

/* Логотип — деревянная вывеска на двух верёвках с золотой антиквой */
html.theme-real .logo-block { position: relative; padding-top: 34px; }
html.theme-real .logo-block::before,
html.theme-real .logo-block::after {
  content: ''; position: absolute; top: -18px; width: 3px; height: 56px;
  background: linear-gradient(180deg, #caa06a, #8a6838 82%, #6a4c26);
  border-radius: 2px;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.4);
}
html.theme-real .logo-block::before { left: 24%; transform: rotate(7deg); }
html.theme-real .logo-block::after { right: 24%; transform: rotate(-7deg); }

html.theme-real .game-logo {
  font-family: var(--serif);
  font-size: clamp(1.9rem, min(5.2vw, 6.4vh), 3.4rem);
  letter-spacing: 1px;
  font-weight: 700;
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: #ffe6a8;
  text-shadow:
    0 1px 0 #b07d24, 0 2px 0 #96701e, 0 3px 0 #7c5c18, 0 4px 0 #62480f,
    0 6px 14px rgba(0, 0, 0, 0.55), 0 0 34px rgba(255, 206, 120, 0.4);
  animation: realSwing 6s ease-in-out infinite;
  transform-origin: 50% -46px;
}
@keyframes realSwing {
  0%, 100% { transform: rotate(-0.7deg); }
  50% { transform: rotate(0.7deg); }
}

/* Подзаголовок — бумажный тэг с чернильным текстом */
html.theme-real .game-sub {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  background: linear-gradient(180deg, #f9efd8, #efe0c2);
  border: 1px solid rgba(150, 110, 60, 0.45);
  border-radius: 3px 10px 3px 10px;
  box-shadow: 0 6px 16px rgba(6, 12, 30, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 7px 16px;
  position: relative;
  margin-top: 8px;
}
html.theme-real .game-sub::before {
  content: ''; position: absolute; left: 10px; top: -5px; width: 9px; height: 9px;
  border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, #b98c3e 70%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Сцена персонажей: на снежном холме с тёплым светом фонаря */
html.theme-real .festive-scene {
  height: 190px;
  margin: 10px 0 6px;
}
html.theme-real .festive-scene::before {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 88%; height: 46px; border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255, 220, 150, 0.4), rgba(255, 220, 150, 0.08) 60%, transparent 75%);
  filter: blur(6px);
}
html.theme-real .festive-scene::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 96%; height: 22px; border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(240, 244, 255, 0.85), rgba(220, 228, 248, 0.35) 65%, transparent 80%);
}
html.theme-real .festive-scene .char { position: relative; z-index: 1; }
html.theme-real .festive-scene .char.c1 { width: 84px; }
html.theme-real .festive-scene .char.c3 { width: 92px; }
html.theme-real .festive-scene .char.c5 { width: 76px; }
html.theme-real .festive-scene .char.c6 { width: 80px; }

/* ============================================================
   3. ФОРМА: ПЕРГАМЕНТНЫЙ СВИТОК
   ============================================================ */
html.theme-real .start-form {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 252, 240, 0.97), rgba(246, 236, 214, 0.96)),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(140, 110, 70, 0.05) 26px 27px);
  border: 1px solid rgba(150, 112, 62, 0.5);
  border-radius: 6px;
  box-shadow:
    0 22px 50px rgba(4, 10, 26, 0.55),
    0 4px 12px rgba(4, 10, 26, 0.3),
    inset 0 0 60px rgba(170, 130, 80, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 24px 22px 26px;
  color: var(--ink);
}
/* Свитые края свитка сверху и снизу */
html.theme-real .start-form::before,
html.theme-real .start-form::after {
  content: ''; position: absolute; left: -8px; right: -8px; height: 16px;
  background: linear-gradient(180deg, #e6d5b2, #c9b184 45%, #a98f60);
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(20, 12, 4, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 5px rgba(90, 66, 34, 0.5);
}
html.theme-real .start-form::before { top: -8px; }
html.theme-real .start-form::after { bottom: -8px; }

html.theme-real .field-label {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: #4a3316;
  text-shadow: 0 1px 0 rgba(255, 252, 240, 0.8);
}

/* Классы — стеклянные шары, подвешенные на гирлянде-нитке */
html.theme-real .grade-row {
  position: relative;
  padding-top: 16px;
  background: linear-gradient(180deg, rgba(150, 112, 62, 0.55), rgba(150, 112, 62, 0.2) 3px, transparent 4px) 0 12px / 100% 2px no-repeat;
}
html.theme-real .grade-btn {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.5rem, min(2.7vw, 4.2vh), 2.8rem);
  font-weight: 700;
  width: 100%; height: clamp(60px, min(7.5vw, 9.5vh), 104px);
  border-radius: 22px 22px 18px 18px / 34px 34px 26px 26px;
  color: #4a3316;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 42%),
    linear-gradient(160deg, #fdf6e4, #e8d6b2);
  border: 1px solid rgba(150, 110, 60, 0.55);
  box-shadow: 0 7px 14px rgba(30, 18, 6, 0.35), inset 0 -6px 10px rgba(160, 120, 70, 0.35);
  animation: realBaubleSway 5.2s ease-in-out infinite;
  transform-origin: 50% -12px;
}
html.theme-real .grade-btn::before {
  content: ''; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 13px; background: linear-gradient(180deg, rgba(150, 112, 62, 0.85), rgba(90, 66, 34, 0.9));
}
html.theme-real .grade-btn::after {
  content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 7px; border-radius: 3px 3px 6px 6px;
  background: linear-gradient(180deg, #ffe08a, #b98c3e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
@keyframes realBaubleSway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
html.theme-real .grade-btn:nth-child(2n) { animation-delay: -1.4s; }
html.theme-real .grade-btn:nth-child(3n) { animation-delay: -2.6s; }
html.theme-real .grade-btn.active {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--ball) 70%, #6a1010) 0%, transparent 60%),
    radial-gradient(circle at 50% 40%, var(--ball), color-mix(in srgb, var(--ball) 60%, #3a0808));
  color: #fff;
  border-color: color-mix(in srgb, var(--ball) 55%, #200);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ball) 55%, transparent), inset 0 -6px 10px rgba(60, 6, 6, 0.4);
}
html.theme-real .grade-btn.active::after { background: linear-gradient(180deg, #ffd166, #8a5c10); }

/* Ввод — чернильная строка на пергаменте */
html.theme-real .quest-input {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink);
  background: rgba(255, 253, 245, 0.8);
  border: 1px solid rgba(150, 112, 62, 0.55);
  border-bottom: 2px solid rgba(110, 78, 36, 0.75);
  border-radius: 4px;
  box-shadow: inset 0 2px 6px rgba(120, 90, 50, 0.18);
}
html.theme-real .quest-input::placeholder { color: #a68a5e; font-style: italic; }
html.theme-real .quest-input:focus { border-color: #9c6b1e; box-shadow: 0 0 0 3px rgba(190, 140, 60, 0.25), inset 0 2px 6px rgba(120, 90, 50, 0.15); }

html.theme-real .btn-add {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
  color: #4a2f04;
  background: linear-gradient(180deg, #ffd98a, #d9a441 55%, #b9872c);
  border: 1px solid #8a5c10;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(60, 36, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -3px 0 rgba(122, 82, 16, 0.6);
}

/* Чипы игроков — бумажные бирки на нитке */
html.theme-real .student-chip {
  font-family: var(--serif);
  color: var(--ink);
  background: linear-gradient(180deg, #fbf3dc, #f0e2c4);
  border: 1px solid rgba(150, 112, 62, 0.5);
  border-radius: 4px 12px 4px 12px;
  box-shadow: 0 3px 8px rgba(30, 18, 6, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  position: relative;
  padding-left: 18px;
}
html.theme-real .student-chip::before {
  content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #b98c3e 72%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
html.theme-real .student-chip .sc { color: #8a5c10; }

/* Тэглайн «Дети vs Родители» — бирка на крафт-бумаге */
html.theme-real .vs-tagline {
  font-family: var(--serif);
  color: #4a3316;
  background: rgba(217, 164, 65, 0.14);
  border: 1px dashed rgba(140, 100, 44, 0.6);
  border-radius: 4px;
  box-shadow: none;
}
html.theme-real .vs-side.vs-kids { color: #1d6e3c; background: rgba(46, 140, 82, 0.12); }
html.theme-real .vs-side.vs-parents { color: #8a5c10; background: rgba(217, 164, 65, 0.18); }
html.theme-real .vs-note { color: #6a5a44; }

/* Переключатель версий — деревянные таблички */
html.theme-real .theme-row { gap: 10px; }
html.theme-real .theme-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  font-family: var(--serif);
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(90, 62, 28, 0.65);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #7d5730, #5a3a1e 80%, #4a2e14);
  color: #f4e4c2;
  box-shadow: 0 8px 18px rgba(10, 6, 2, 0.5), inset 0 2px 0 rgba(255, 230, 180, 0.25), inset 0 -4px 8px rgba(30, 16, 4, 0.55);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s;
}
html.theme-real .theme-opt:hover { transform: translateY(-2px); }
html.theme-real .theme-opt .th-name {
  font-size: 1rem; font-weight: 700; color: #ffe6a8;
  text-shadow: 0 1px 2px rgba(30, 16, 4, 0.8);
}
html.theme-real .theme-opt .th-desc { font-size: 0.78rem; font-style: italic; color: #d9c49a; }
html.theme-real .theme-opt .th-ic { border-radius: 4px; overflow: hidden; box-shadow: 0 2px 6px rgba(10, 6, 2, 0.5); }
html.theme-real .theme-opt.active {
  border-color: #ffd166;
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.55), 0 10px 22px rgba(10, 6, 2, 0.55), inset 0 2px 0 rgba(255, 230, 180, 0.3);
}

/* Главная кнопка — СУРГУЧНАЯ ПЕЧАТЬ (крупный красный оттиск с антиквой) */
html.theme-real .btn-primary {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #fff2dc;
  text-shadow: 0 2px 3px rgba(70, 6, 14, 0.7);
  border-radius: 14px 14px 12px 12px;
  border: 1px solid #6e101f;
  background:
    radial-gradient(130% 160% at 50% 0%, #e0506a 0%, #b7243e 48%, #8c1830 100%);
  box-shadow:
    0 10px 26px rgba(140, 24, 48, 0.55),
    0 3px 0 #6e101f,
    0 5px 0 #4a0a15,
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(60, 4, 14, 0.5);
}
html.theme-real .btn-primary::after { background: linear-gradient(90deg, transparent, rgba(255, 240, 220, 0.5), transparent); }
html.theme-real .btn-primary:hover { filter: brightness(1.07); }
html.theme-real .btn-primary:active { transform: translateY(3px); box-shadow: 0 5px 14px rgba(140, 24, 48, 0.5), 0 0 0 #6e101f, inset 0 2px 0 rgba(255, 255, 255, 0.3); }

/* Ссылки — латунные таблички */
html.theme-real .btn-ghost {
  font-family: var(--serif);
  color: #3d2c12;
  background: linear-gradient(180deg, #f0e2c4, #dcc79a);
  border: 1px solid rgba(140, 100, 44, 0.65);
  border-radius: 5px;
  box-shadow: 0 5px 12px rgba(10, 6, 2, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -3px 0 rgba(150, 110, 55, 0.4);
}
html.theme-real .btn-ghost:hover { background: #f7eed8; border-color: #8a5c10; }
html.theme-real .loc-action-btn {
  font-family: var(--serif);
  color: var(--ink);
  background: linear-gradient(180deg, #f7eed8, #e8d8b4);
  border: 1px solid rgba(140, 100, 44, 0.6);
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(10, 6, 2, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
html.theme-real .loc-action-btn.primary {
  color: #fff2dc;
  border-color: #6e101f;
  background: radial-gradient(130% 160% at 50% 0%, #e0506a, #b7243e 55%, #8c1830);
  text-shadow: 0 1px 2px rgba(70, 6, 14, 0.7);
}

/* Телеграмма-новости */
html.theme-real .news-ticker {
  font-family: var(--serif);
  color: var(--ink);
  background: linear-gradient(180deg, #f9efd8, #f0e2c4);
  border: 1px solid rgba(150, 112, 62, 0.55);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(4, 10, 26, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  position: relative;
}
html.theme-real .news-ticker::after {
  content: ''; position: absolute; right: 10px; top: 8px;
  width: 34px; height: 22px;
  border: 2px solid rgba(156, 34, 51, 0.55);
  border-radius: 4px;
  transform: rotate(-8deg);
  background:
    linear-gradient(transparent 45%, rgba(156, 34, 51, 0.35) 45% 55%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(156, 34, 51, 0.2), transparent 70%);
}
html.theme-real .news-badge {
  background: #9c2233; color: #ffe9d8; border-radius: 3px;
  font-weight: 700; letter-spacing: 0.5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html.theme-real .news-text { font-style: italic; }

/* Обратный отсчёт — золотой карманный хронометр */
html.theme-real .ny-countdown {
  position: relative;
  margin-top: 22px;
  padding: 14px 22px 12px;
  border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%;
  font-family: var(--serif);
  color: #4a3316;
  background: radial-gradient(circle at 34% 24%, #fff8e0, #f2dfae 52%, #d9b96e 100%);
  border: 3px solid #8a5c10;
  box-shadow: 0 14px 30px rgba(4, 10, 26, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.85), inset 0 -10px 18px rgba(140, 100, 40, 0.4);
}
html.theme-real .ny-countdown::before {
  content: ''; position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 26px;
  background: linear-gradient(180deg, rgba(230, 214, 170, 0.5), #8a5c10);
}
html.theme-real .ny-countdown::after {
  content: ''; position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 10px; border-radius: 4px 4px 6px 6px;
  background: linear-gradient(180deg, #ffd166, #8a5c10);
}
html.theme-real .ny-countdown .cd-num { color: #8c1830; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 252, 240, 0.9); }
html.theme-real .ny-countdown .cd-word { color: #6a4c1e; font-style: italic; }

/* ============================================================
   4. ДОСКА: СТЕНА МАСТЕРСКОЙ С ГИРЛЯНДОЙ
   ============================================================ */
html.theme-real #screen-board .board-wrap {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 210, 140, 0.12), transparent 55%),
    repeating-linear-gradient(90deg, rgba(20, 10, 2, 0.14) 0 3px, transparent 3px 92px),
    repeating-linear-gradient(180deg, rgba(255, 226, 170, 0.05) 0 2px, transparent 2px 30px),
    linear-gradient(180deg, #4a2e14, #5a3a1e 30%, #3d2512 100%);
  border: 8px solid #5e3c1a;
  outline: 2px solid rgba(255, 220, 160, 0.28);
  outline-offset: -10px;
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(2, 6, 18, 0.65), inset 0 0 90px rgba(16, 8, 2, 0.6);
  padding: 18px 16px 20px;
  backdrop-filter: none;
}
/* Гирлянда огней по верхней кромке рамы */
html.theme-real #screen-board .board-wrap::before {
  content: ''; position: absolute; top: -19px; left: 14px; right: 14px; height: 16px;
  background-image:
    radial-gradient(5px 5px at 20px 8px, #ffd166, transparent 70%),
    radial-gradient(5px 5px at 90px 6px, #ff8a5c, transparent 70%),
    radial-gradient(5px 5px at 160px 9px, #9be29b, transparent 70%),
    radial-gradient(5px 5px at 230px 6px, #9ecbff, transparent 70%),
    radial-gradient(5px 5px at 300px 8px, #ff9ecb, transparent 70%),
    radial-gradient(5px 5px at 370px 6px, #ffd166, transparent 70%);
  background-size: 350px 16px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 6px rgba(255, 210, 130, 0.85));
  animation: realFrameLights 2.8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes realFrameLights { from { opacity: 0.7; } to { opacity: 1; } }

/* Шапка доски — резная табличка */
html.theme-real .board-info {
  background: linear-gradient(180deg, #6a441f, #4a2c10);
  border: 1px solid rgba(255, 220, 160, 0.3);
  border-radius: 8px;
  padding: 8px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.3), 0 4px 10px rgba(10, 6, 2, 0.45);
}
html.theme-real .board-info .b-grade {
  font-family: var(--serif); font-size: 1.3rem; color: #ffe6a8;
  text-shadow: 0 1px 2px rgba(30, 16, 4, 0.8);
}
html.theme-real .board-info .b-students { color: #d9c49a; font-style: italic; font-size: 0.95rem; }

html.theme-real .ask-chip {
  font-family: var(--serif);
  color: #4a2f04;
  background: linear-gradient(180deg, #ffd98a, #d9a441 60%, #b9872c);
  border: 1px solid #8a5c10;
  box-shadow: 0 5px 12px rgba(60, 36, 6, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Палитры категорий (мастерская: благородные, глубокие тона) */
html.theme-real .cat-forest { --cat-c1: #2e9e5c; --cat-c2: #0c5228; }
html.theme-real .cat-factory { --cat-c1: #e8a03c; --cat-c2: #8a4c0a; }
html.theme-real .cat-castle { --cat-c1: #3d92d8; --cat-c2: #14486e; }
html.theme-real .cat-mood { --cat-c1: #e0536b; --cat-c2: #7c1128; }

/* Категории — ВЫВЕСКИ НА ДВУХ ВЕРЁВКАХ */
html.theme-real .jcat-head {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(0.85rem, min(1.3vw, 2.2vh), 1.5rem);
  letter-spacing: 0.4px;
  color: #ffe9b8;
  text-shadow: 0 2px 3px rgba(20, 8, 2, 0.85);
  border: 1px solid rgba(255, 220, 160, 0.4);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, var(--cat-c1), var(--cat-c2));
  box-shadow: 0 10px 20px rgba(4, 8, 20, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -6px 0 rgba(0, 0, 0, 0.28);
  transform-origin: 50% -26px;
  animation: realSignSway 5.6s ease-in-out infinite;
  margin-top: 26px;
}
html.theme-real .jcat-head::before,
html.theme-real .jcat-head::after {
  content: ''; position: absolute; top: -26px; width: 2px; height: 27px;
  background: linear-gradient(180deg, rgba(240, 220, 180, 0.55), rgba(200, 170, 120, 0.85));
}
html.theme-real .jcat-head::before { left: 18%; transform: rotate(4deg); }
html.theme-real .jcat-head::after { right: 18%; transform: rotate(-4deg); }
@keyframes realSignSway {
  0%, 100% { transform: rotate(-1.1deg); }
  50% { transform: rotate(1.1deg); }
}
html.theme-real .jcat-head:nth-child(2) { animation-delay: -1.2s; }
html.theme-real .jcat-head:nth-child(3) { animation-delay: -2.3s; }
html.theme-real .jcat-head:nth-child(4) { animation-delay: -3.4s; }
html.theme-real .jcat-head:nth-child(5) { animation-delay: -4.1s; }
html.theme-real .jcat-head .cat-name { font-weight: 700; }

/* Клетки-подарки: объёмная крышка, лента, бант, глубокая тень */
html.theme-real .jcell {
  position: relative;
  font-family: var(--serif);
  border-radius: 8px 8px 10px 10px;
  border: 1px solid rgba(30, 12, 4, 0.5);
  color: #fff7e0;
  text-shadow: 0 2px 3px rgba(20, 4, 8, 0.65);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 14%, transparent 15%),
    linear-gradient(165deg, var(--cat-c1), var(--cat-c2) 88%);
  box-shadow:
    0 12px 22px rgba(2, 5, 14, 0.6),
    0 3px 6px rgba(2, 5, 14, 0.4),
    inset 0 -8px 0 rgba(20, 6, 2, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.16s ease, box-shadow 0.2s ease;
}
html.theme-real .jcell .pts { font-size: clamp(1.3rem, min(2.8vw, 5vh), 3rem); font-weight: 700; }
html.theme-real .jcell .pts-label { font-size: clamp(0.72rem, min(0.9vw, 1.5vh), 1rem); font-style: italic; opacity: 0.85; }
html.theme-real .jcell::before {
  width: 44%; height: 22px; border-radius: 0 0 16px 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 22'%3E%3Cpath d='M30 11 C21 1 4 3 9 11 C4 19 21 21 30 11 Z' fill='%23ffe08a' stroke='%23a5721e' stroke-width='1.2'/%3E%3Cpath d='M30 11 C39 1 56 3 51 11 C56 19 39 21 30 11 Z' fill='%23ffe08a' stroke='%23a5721e' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='11' r='3.6' fill='%23a5721e'/%3E%3C/svg%3E") center top / 58px 21px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15));
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 3px 6px rgba(10, 4, 2, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
html.theme-real .jcell::after {
  background:
    linear-gradient(90deg, transparent calc(50% - 8px), rgba(255, 246, 220, 0.5) calc(50% - 8px), rgba(255, 246, 220, 0.5) calc(50% + 8px), transparent calc(50% + 8px)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 46%);
}
html.theme-real .jcell:hover {
  transform: translateY(-4px) rotate(-0.6deg) scale(1.02);
  box-shadow: 0 20px 36px rgba(2, 5, 14, 0.7), 0 6px 10px rgba(2, 5, 14, 0.4),
    inset 0 -8px 0 rgba(20, 6, 2, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
html.theme-real .jcell.answered {
  background: repeating-linear-gradient(45deg, rgba(90, 62, 28, 0.12) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #4a3418, #3a2810) !important;
  color: #a89478;
  border-color: rgba(20, 10, 4, 0.6);
  box-shadow: inset 0 0 0 2px rgba(90, 62, 28, 0.55), inset 0 -4px 0 rgba(20, 10, 4, 0.5);
  text-shadow: none;
}
html.theme-real .jcell.answered .pts-label { color: #a89478; }
html.theme-real .jcell.answered::before { opacity: 0.18; }

/* Прогресс — золотая лента на дереве */
html.theme-real .board-progress .bp-bar { background: rgba(20, 10, 2, 0.5); border-color: rgba(255, 220, 160, 0.4); }
html.theme-real .bp-fill {
  background: linear-gradient(90deg, #d9a441, #ffcf6e 55%, #e0506a);
  box-shadow: 0 0 14px rgba(255, 205, 110, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
html.theme-real .bp-text { color: #d9c49a; font-style: italic; }

/* Маскот — табличка-подсказка */
html.theme-real .board-mascot .m-bubble {
  font-family: var(--serif);
  color: var(--ink);
  background: linear-gradient(180deg, #f9efd8, #efe0c2);
  border: 1px solid rgba(150, 112, 62, 0.55);
  border-radius: 10px 10px 10px 3px;
  box-shadow: 0 8px 18px rgba(4, 10, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ============================================================
   5. ВОПРОС: ПЕРГАМЕНТ И ПЕЧАТИ
   ============================================================ */
html.theme-real #screen-question .question-wrap {
  background:
    linear-gradient(180deg, rgba(255, 252, 240, 0.98), rgba(246, 236, 214, 0.96)),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(140, 110, 70, 0.045) 30px 31px);
  border: 1px solid rgba(150, 112, 62, 0.5);
  border-radius: 6px;
  color: var(--ink);
  box-shadow: 0 26px 60px rgba(4, 10, 26, 0.6), inset 0 0 70px rgba(170, 130, 80, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
html.theme-real #screen-question .q-points {
  font-family: var(--serif);
  color: #fff2dc;
  background: radial-gradient(circle at 34% 28%, #e0506a, #b7243e 55%, #8c1830);
  border: 2px solid #6e101f;
  border-radius: 50%;
  /* Шар растёт вместе с экраном, текст внутри не вылезает (2K/4K) */
  width: clamp(64px, min(5vw, 8.5vh), 88px); height: clamp(64px, min(5vw, 8.5vh), 88px);
  padding: 6px;
  font-size: clamp(0.85rem, min(1.3vw, 2.1vh), 1.25rem);
  line-height: 1.15; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(140, 24, 48, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 10px rgba(60, 4, 14, 0.5);
  text-shadow: 0 1px 2px rgba(70, 6, 14, 0.7);
}
html.theme-real .q-cat-badge {
  font-family: var(--serif);
  color: var(--ink);
  background: linear-gradient(180deg, #fbf3dc, #f0e2c4);
  border: 1px solid rgba(150, 112, 62, 0.55);
  border-radius: 4px 12px 4px 12px;
  box-shadow: 0 4px 10px rgba(30, 18, 6, 0.3);
}
html.theme-real #screen-question .q-question,
html.theme-real #screen-question .q-title,
html.theme-real #screen-question .marks-title { color: #3a2c1a; }
html.theme-real #screen-question .q-title { font-family: var(--serif); font-size: 1.25rem; }
html.theme-real #screen-question .q-question { font-family: var(--serif); font-size: clamp(1.3rem, min(2.4vw, 3.8vh), 2.2rem); line-height: 1.5; }
html.theme-real .pts-hint { color: #8a7458; }

/* Варианты — бумажные тэги */
html.theme-real .pz-opt {
  font-family: var(--serif);
  color: var(--ink);
  background: linear-gradient(180deg, #fdf7e6, #f1e3c6);
  border: 1px solid rgba(150, 112, 62, 0.55);
  border-radius: 6px;
  box-shadow: 0 5px 12px rgba(30, 18, 6, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html.theme-real .pz-opt:hover { border-color: #8a5c10; transform: translateY(-2px); }
html.theme-real .pz-opt.selected { border-color: #9c6b1e; background: #fff6df; box-shadow: 0 0 0 2px rgba(190, 140, 60, 0.4); }
html.theme-real .pz-opt.correct { border-color: #1d6e3c; background: #eaf6df; box-shadow: 0 0 0 2px rgba(46, 140, 82, 0.45); }
html.theme-real .pz-opt.wrong { border-color: #9c2233; background: #f8e6df; }

html.theme-real .pz-input {
  font-family: var(--serif);
  color: var(--ink);
  background: rgba(255, 253, 245, 0.85);
  border: 1px solid rgba(150, 112, 62, 0.55);
  border-bottom: 2px solid rgba(110, 78, 36, 0.75);
  border-radius: 4px;
  box-shadow: inset 0 2px 6px rgba(120, 90, 50, 0.18);
}
html.theme-real .pz-input::placeholder { color: #a68a5e; font-style: italic; }

html.theme-real .pz-geo-fig, html.theme-real .seq-tape, html.theme-real .pz-clock-fig {
  background: linear-gradient(180deg, #fdf7e6, #eedfc0);
  border-color: rgba(150, 112, 62, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 10px rgba(30, 18, 6, 0.2);
}
html.theme-real .seq-q { color: #8a5c10; }

html.theme-real .match-tile {
  font-family: var(--serif);
  color: var(--ink);
  background: linear-gradient(180deg, #fdf7e6, #f1e3c6);
  border: 1px solid rgba(150, 112, 62, 0.55);
  box-shadow: 0 4px 10px rgba(30, 18, 6, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html.theme-real .match-tile.selected { border-color: #9c6b1e; background: #fff6df; }
html.theme-real .match-tile.correct { border-color: #1d6e3c; background: #eaf6df; }
html.theme-real .match-tile.wrong { border-color: #9c2233; background: #f8e6df; }

html.theme-real .hint-box {
  font-family: var(--serif);
  color: #5a3a86;
  background: rgba(122, 79, 201, 0.1);
  border: 1px dashed rgba(122, 79, 201, 0.5);
  border-radius: 4px;
}
html.theme-real .reveal-box {
  font-family: var(--serif);
  color: #1d5c38;
  background: rgba(46, 140, 82, 0.1);
  border: 1px dashed rgba(46, 140, 82, 0.5);
  border-radius: 4px;
}
html.theme-real .reveal-box b { color: #1d6e3c; }

/* Отметки */
html.theme-real .marks-panel { background: rgba(234, 216, 180, 0.5); border-color: rgba(150, 112, 62, 0.5); border-radius: 6px; }
html.theme-real .mark-row {
  font-family: var(--serif);
  color: var(--ink);
  background: rgba(255, 253, 245, 0.9);
  border-color: rgba(150, 112, 62, 0.45);
  border-radius: 5px;
}
html.theme-real .mark-row .sc { color: #8a5c10; }
/* Командные ряды «Дети vs Родители» — чернильные акценты на бумаге */
html.theme-real .mark-row.team-row.team-kids { border-left: 4px solid #2e8c52; }
html.theme-real .mark-row.team-row.team-parents { border-left: 4px solid #b8860b; }
html.theme-real .team-row .team-score { color: #6a5a44; }
html.theme-real .mbtn {
  font-family: var(--serif);
  background: linear-gradient(180deg, #fbf3dc, #eee0c0);
  border-color: rgba(150, 112, 62, 0.5); color: var(--ink);
}
html.theme-real .mbtn.ok { color: #1d6e3c; border-color: rgba(46, 140, 82, 0.6); background: #eaf6df; }
html.theme-real .mbtn.ok.on { background: #bfe4c8; box-shadow: 0 0 0 2px rgba(46, 140, 82, 0.45); }
html.theme-real .mbtn.no { color: #9c2233; border-color: rgba(156, 34, 51, 0.6); background: #f8e6df; }
html.theme-real .mbtn.und { color: #6a5a44; border-color: rgba(150, 112, 62, 0.5); background: #f1e8d4; }
html.theme-real .task-feedback.good { color: #1d5c38; background: rgba(46, 140, 82, 0.12); border-color: rgba(46, 140, 82, 0.5); border-radius: 4px; }
html.theme-real .task-feedback.bad { color: #8c1830; background: rgba(156, 34, 51, 0.12); border-color: rgba(156, 34, 51, 0.5); border-radius: 4px; }

/* Движки operator/decorate — пергамент и сургуч */
html.theme-real .pz-op-num {
  font-family: var(--serif);
  background: rgba(255, 253, 245, 0.92); border-color: rgba(150, 112, 62, 0.55); color: var(--ink);
  box-shadow: 0 4px 10px rgba(30, 18, 6, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html.theme-real .pz-op-eq { background: rgba(217, 164, 65, 0.12); border-color: rgba(140, 100, 44, 0.55); }
html.theme-real .pz-op-slot {
  font-family: var(--serif);
  background: rgba(217, 164, 65, 0.14); border-color: rgba(140, 100, 44, 0.6); color: #8a5c10;
}
html.theme-real .pz-op-slot.filled { border-color: #9c6b1e; color: #6a4708; }
html.theme-real .pz-op-btn {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 700;
  background: linear-gradient(180deg, #fdf7e6, #eee0c0); border-color: rgba(150, 112, 62, 0.55); color: var(--ink);
  box-shadow: 0 5px 10px rgba(30, 18, 6, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
html.theme-real .pz-op-btn.selected { border-color: #9c6b1e; background: #fff6df; box-shadow: 0 0 0 2px rgba(190, 140, 60, 0.4); }
html.theme-real .pz-dec-spot { border-color: rgba(110, 78, 36, 0.6); }
html.theme-real .pz-dec-panel {
  font-family: var(--serif); color: var(--ink);
  background: linear-gradient(180deg, #fdf7e6, #f1e3c6); border-color: rgba(150, 112, 62, 0.55);
  box-shadow: 0 8px 20px rgba(30, 18, 6, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html.theme-real .pz-dec-cnt { background: rgba(255, 253, 245, 0.85); border-color: rgba(150, 112, 62, 0.45); }
html.theme-real .pz-dec-cnt .cnt-name { color: #4a3316; }
html.theme-real .pz-dec-cnt .cnt-val { color: #6a5238; }
html.theme-real .pz-dec-tip { color: #8a7458; font-style: italic; }

/* ============================================================
   6. ФИНАЛ: ТОРЖЕСТВЕННАЯ ТАБЛИЧКА
   ============================================================ */
html.theme-real #screen-final .final-card {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 214, 140, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(255, 252, 240, 0.98), rgba(244, 232, 206, 0.96));
  border: 1px solid rgba(150, 112, 62, 0.5);
  border-radius: 6px;
  color: var(--ink);
  box-shadow: 0 26px 60px rgba(4, 10, 26, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
html.theme-real .screen-title {
  font-family: var(--serif);
  background: linear-gradient(90deg, #8c1830, #9c6b1e 55%, #1d5c6e);
  -webkit-background-clip: text; background-clip: text;
}
html.theme-real .screen-sub { color: #d9c49a; font-style: italic; text-shadow: 0 1px 2px rgba(10, 4, 2, 0.6); }
html.theme-real #screen-final .screen-sub, html.theme-real #screen-question .screen-sub { color: #6a5238; text-shadow: none; }
html.theme-real .podium-row {
  font-family: var(--serif);
  color: var(--ink);
  background: linear-gradient(180deg, #fbf3dc, #f0e2c4);
  border-color: rgba(150, 112, 62, 0.45);
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(30, 18, 6, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
html.theme-real .podium-row.r1 {
  background: linear-gradient(90deg, rgba(217, 164, 65, 0.4), #fbf3dc);
  border-color: #b98c3e;
}
html.theme-real .podium-score { color: #8a5c10; }

/* ============================================================
   7. HUD, ТОСТЫ, МОДАЛКИ, ФУТЕР — ТЁМНОЕ ДЕРЕВО И ЗОЛОТО
   ============================================================ */
html.theme-real .hud-chip, html.theme-real .hud-btn {
  font-family: var(--serif);
  color: #ffe6a8;
  background: linear-gradient(180deg, #4a2c10, #33200c);
  border: 1px solid rgba(255, 220, 160, 0.35);
  box-shadow: 0 6px 16px rgba(2, 6, 18, 0.5), inset 0 1px 0 rgba(255, 230, 180, 0.25);
}
html.theme-real .hud-profile-text i { color: #c9a86e; }
html.theme-real .hud-btn:hover { border-color: #ffd166; }

html.theme-real .toast {
  font-family: var(--serif);
  color: var(--ink);
  background: linear-gradient(180deg, #fbf3dc, #f0e2c4);
  border-color: rgba(150, 112, 62, 0.65);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(4, 10, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html.theme-real .toast.good { border-color: rgba(46, 140, 82, 0.7); }
html.theme-real .toast.bad { border-color: rgba(156, 34, 51, 0.7); }
html.theme-real .toast.gold { border-color: rgba(217, 164, 65, 0.85); }

html.theme-real .modal { background: rgba(10, 14, 30, 0.72); }
html.theme-real .modal-card {
  font-family: var(--serif); color: var(--ink);
  background: linear-gradient(180deg, #fdf7e6, #f0e2c4);
  border: 1px solid rgba(150, 112, 62, 0.6);
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(4, 10, 26, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
html.theme-real .modal-card h3 { color: #8c1830; }
html.theme-real .modal-x {
  color: var(--ink);
  background: linear-gradient(180deg, #fbf3dc, #e8d8b4);
  border-color: rgba(150, 112, 62, 0.55);
  border-radius: 5px;
}

html.theme-real .app-footer {
  font-family: var(--serif);
  color: #d9c49a;
  border-top: 1px solid rgba(255, 220, 160, 0.3);
  background: linear-gradient(180deg, rgba(20, 10, 2, 0), rgba(26, 14, 4, 0.94));
  text-shadow: 0 1px 2px rgba(10, 4, 2, 0.7);
}

html.theme-real *::-webkit-scrollbar-thumb { background: rgba(150, 112, 62, 0.6); }

/* ============================================================
   9. СТРАНИЦЫ «ОТВЕТЫ» и «ТОП» — пергамент и латунь
   ============================================================ */
/* Ответы */
html.theme-real .ans-task {
  font-family: var(--serif);
  color: #3a2c1a;
  background: linear-gradient(180deg, rgba(255, 252, 240, 0.97), rgba(246, 236, 214, 0.95));
  border-color: rgba(150, 112, 62, 0.5);
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(4, 10, 26, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html.theme-real .ans-task .th .p {
  color: #8a5c10;
  background: rgba(217, 164, 65, 0.15);
  border-color: rgba(140, 100, 44, 0.55);
}
html.theme-real .ans-task .eng {
  background: rgba(90, 58, 30, 0.07);
  border-color: rgba(150, 112, 62, 0.4);
  border-radius: 6px;
}
html.theme-real .ans-task .ans-reveal {
  color: #1d5c38;
  background: rgba(46, 140, 82, 0.1);
  border-color: rgba(46, 140, 82, 0.45);
  border-radius: 6px;
}
html.theme-real .ans-task .ans-reveal b { color: #1d6e3c; }
html.theme-real .ans-tab {
  font-family: var(--serif);
  color: #4a3316;
  background: linear-gradient(180deg, #f0e2c4, #dcc79a);
  border: 1px solid rgba(140, 100, 44, 0.6);
  box-shadow: 0 4px 10px rgba(10, 6, 2, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
html.theme-real .ans-tab.active {
  color: #fff2dc;
  background: radial-gradient(130% 160% at 50% 0%, #e0506a, #b7243e 55%, #8c1830);
  border: 1px solid #6e101f;
  text-shadow: 0 1px 2px rgba(70, 6, 14, 0.7);
}
html.theme-real .ans-cat .n { font-family: var(--serif); color: #ffcf6e; text-shadow: 0 1px 0 #7c5c18, 0 3px 8px rgba(0, 0, 0, 0.5); }

/* Топ (leaderboard) */
html.theme-real .lb-card {
  font-family: var(--serif);
  color: #3a2c1a;
  background: linear-gradient(180deg, rgba(255, 252, 240, 0.97), rgba(246, 236, 214, 0.95));
  border-color: rgba(150, 112, 62, 0.5);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(4, 10, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html.theme-real .lb-tab {
  font-family: var(--serif);
  color: #4a3316;
  background: linear-gradient(180deg, #f0e2c4, #dcc79a);
  border: 1px solid rgba(140, 100, 44, 0.6);
  box-shadow: 0 4px 10px rgba(10, 6, 2, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
html.theme-real .lb-tab.active {
  color: #fff2dc;
  background: radial-gradient(130% 160% at 50% 0%, #e0506a, #b7243e 55%, #8c1830);
  border: 1px solid #6e101f;
  text-shadow: 0 1px 2px rgba(70, 6, 14, 0.7);
}
html.theme-real table.lb th { color: #c9a86e; }
html.theme-real table.lb td { border-bottom-color: rgba(150, 112, 62, 0.35); }
html.theme-real table.lb tr:hover td { background: rgba(217, 164, 65, 0.12); }
html.theme-real table.lb .r { color: #8a5c10; }
html.theme-real table.lb .sc { color: #8a5c10; }
html.theme-real .lb-empty { color: #6a5238; }
html.theme-real .lb-note { color: #d9c49a; }

/* ============================================================
   8. МОБИЛЬНАЯ АДАПТАЦИЯ
   ============================================================ */
@media (max-width: 480px) {
  html.theme-real .festive-bg::after { width: 52px; height: 52px; top: 7%; right: 7%; }
  html.theme-real .game-logo { text-shadow: 0 1px 0 #b07d24, 0 2px 0 #96701e, 0 3px 0 #7c5c18, 0 5px 10px rgba(0, 0, 0, 0.5); }
  html.theme-real .start-form { padding: 20px 14px 22px; }
  html.theme-real .jcat-head { font-size: 0.8rem; margin-top: 22px; }
  html.theme-real .jcat-head::before, html.theme-real .jcat-head::after { top: -22px; height: 23px; }
  html.theme-real .jcell .pts { font-size: 1.2rem; }
  html.theme-real .ny-countdown { margin-top: 20px; }
}

/* Уважение к reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.theme-real .game-logo,
  html.theme-real .grade-btn,
  html.theme-real .jcat-head,
  html.theme-real .festive-bg::before { animation: none !important; }
}