/* ===== theme-day.css — СВЕТЛАЯ праздничная тема «Зимняя деревня» =====
   ДНК референсов: Santa Tracker (яркая деревня, глубина, живые сцены),
   A Shape Christmas (смелые цветовые блоки на доске), Spline Candy Hunt
   (soft-pastel небо, стеклянные карточки, мягкие тени).
   Подключается ПОСЛЕДНИМ и переопределяет тёмную тему. */

:root {
  --bg-deep: #a9dcff;
  --bg: #cfeaff;
  --bg-2: #ffffff;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-2: rgba(255, 255, 255, 0.62);
  --border: rgba(120, 165, 225, 0.4);
  --border-strong: rgba(86, 132, 200, 0.55);
  --text: #1b3266;
  --text-muted: #46598a;
  --accent: #1fa2ff;
  --accent-2: #9b6bff;
  --accent-3: #ffb340;
  --good: #17b26a;
  --wrong: #ff5d73;
  --warn: #ff8a3c;
  --red: #ff4d67;
  --green: #2ec866;
  --shadow: 0 14px 44px rgba(40, 90, 170, 0.22);
  --radius: 20px;
}

html { background: #a9dcff; }
body {
  color: var(--text);
  background: var(--bg-deep);
  background-image: linear-gradient(180deg, #6db9f5 0%, #a9dcff 34%, #d7efff 66%, #eef9ff 100%);
  background-attachment: fixed;
}

/* ===== Фон: облака вместо аврор, деревня внизу ===== */
.festive-bg .aurora { filter: blur(50px); opacity: 0.75; }
.festive-bg .aurora-1 { top: -180px; background: radial-gradient(circle, rgba(255,255,255,0.95), transparent 62%); }
.festive-bg .aurora-2 { top: -120px; background: radial-gradient(circle, rgba(255,224,178,0.8), transparent 62%); }

.festive-bg .shooting-star { display: none; }

.festive-bg .snow { opacity: 0.9; }
.festive-bg .snow-1 { background-image:
  radial-gradient(2.4px 2.4px at 20px 30px, #fff, transparent),
  radial-gradient(2.4px 2.4px at 90px 120px, #ffffff, transparent),
  radial-gradient(1.6px 1.6px at 160px 80px, #f4faff, transparent),
  radial-gradient(2.4px 2.4px at 230px 200px, #fff, transparent);
  filter: drop-shadow(0 1px 1px rgba(120,170,220,0.55)); }
.festive-bg .snow-2 { background-image:
  radial-gradient(3.6px 3.6px at 40px 60px, #fff, transparent),
  radial-gradient(2.6px 2.6px at 200px 140px, #f2f9ff, transparent),
  radial-gradient(3.6px 3.6px at 120px 220px, #fff, transparent); opacity: 0.8; }
.festive-bg .snow-3 { opacity: 0.7; }

.ground-snow {
  height: 130px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.65) 55%, #ffffff 96%);
}

/* Деревня (вставляется scene.js) */
.ny-village { position: absolute; left: 0; right: 0; bottom: 74px; width: 100%; height: auto; pointer-events: none; }
.ny-cloud { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.98), rgba(255,255,255,0.55));
  filter: blur(2px); box-shadow: 0 10px 30px rgba(160,200,240,0.35); }
.ny-cloud.c1 { width: 150px; height: 52px; top: 9%; left: 6%; animation: cloudDrift 46s linear infinite; }
.ny-cloud.c2 { width: 110px; height: 40px; top: 16%; left: 48%; animation: cloudDrift 60s linear infinite; animation-delay: -22s; }
.ny-cloud.c3 { width: 180px; height: 58px; top: 7%; right: -160px; animation: cloudDrift 52s linear infinite; animation-delay: -40s; }
@keyframes cloudDrift { from { transform: translateX(-12vw); } to { transform: translateX(112vw); } }
.ny-village .win { animation: winFlicker 3.6s ease-in-out infinite; }
.ny-village .win:nth-of-type(2n) { animation-delay: 1.2s; }
.ny-village .win:nth-of-type(3n) { animation-delay: 2.1s; }
@keyframes winFlicker { 0%,100% { opacity: 0.92; } 50% { opacity: 0.6; } }
.ny-village .smoke { animation: smokeUp 4.5s ease-in infinite; transform-origin: center; }
.ny-village .smoke:nth-of-type(2) { animation-delay: 1.6s; }
@keyframes smokeUp { 0% { transform: translateY(0) scale(0.7); opacity: 0; } 25% { opacity: 0.55; } 100% { transform: translateY(-26px) scale(1.5); opacity: 0; } }
/* Огоньки на ёлке: ЗАКРЕПЛЕНЫ на ветках (никаких полётов по карте).
   Живут только цветом и лёгким изменением размера — плавно, без прыжков.
   transform-box: fill-box — масштаб вокруг каждой лампочки, а не всей SVG-деревни. */
.ny-village .twk {
  transform-box: fill-box; transform-origin: center;
  animation: treeLightSoft 6.5s ease-in-out infinite;
  will-change: transform, filter;
}
@keyframes treeLightSoft {
  0%, 100% { transform: scale(1); filter: brightness(1.05) saturate(1.1) hue-rotate(0deg); }
  30% { transform: scale(1.10); filter: brightness(1.45) saturate(1.5) hue-rotate(38deg); }
  55% { transform: scale(1.02); filter: brightness(1.12) saturate(1.2) hue-rotate(-30deg); }
  78% { transform: scale(1.07); filter: brightness(1.32) saturate(1.4) hue-rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ny-village .twk { animation: none; }
}

/* Слои параллакса: плавное следование за мышью (transform ставит scene.js) */
.ny-village .plx { will-change: transform; }

/* Прогресс «деревня просыпается»: data-ny-progress 0…4 на <body> —
   окна горят ярче и шары на ёлках сияют сильнее по мере ответов */
body[data-ny-progress="1"] .ny-village .win rect:first-child { filter: brightness(1.08); }
body[data-ny-progress="2"] .ny-village .win rect:first-child { filter: brightness(1.18); }
body[data-ny-progress="2"] .ny-village .win { filter: drop-shadow(0 0 6px rgba(255,214,110,0.55)); }
body[data-ny-progress="3"] .ny-village .win rect:first-child { filter: brightness(1.3); }
body[data-ny-progress="3"] .ny-village .win { filter: drop-shadow(0 0 9px rgba(255,214,110,0.8)); }
body[data-ny-progress="4"] .ny-village .win rect:first-child { filter: brightness(1.42); }
body[data-ny-progress="4"] .ny-village .win { filter: drop-shadow(0 0 13px rgba(255,224,130,0.95)); }
body[data-ny-progress="3"] .ny-village .twk circle { filter: brightness(1.25); }
body[data-ny-progress="4"] .ny-village .twk circle { filter: brightness(1.45) drop-shadow(0 0 5px rgba(255,255,255,0.8)); }

/* ===== Обратный отсчёт до Нового года (старт-экран) ===== */
.ny-countdown {
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
  margin: 12px auto 0; padding: 10px 18px; width: fit-content; max-width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,249,255,0.88));
  border: 1px solid rgba(120,165,225,0.5); border-radius: 16px;
  box-shadow: 0 8px 20px rgba(60,110,180,0.16), inset 0 2px 0 rgba(255,255,255,0.9);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.ny-countdown .cd-num {
  font-size: 1.22rem; font-weight: 800; color: #d13b54;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  min-width: 1.7em; text-align: center; display: inline-block;
}
.ny-countdown .cd-num:first-of-type { min-width: 2.1em; }
.ny-countdown .cd-word { font-size: 0.72rem; font-weight: 700; color: #46619c; text-transform: uppercase; letter-spacing: 0.04em; }
.ny-countdown .cd-sep { color: #8fa6cf; font-weight: 800; }
.ny-countdown .cd-greet { font-weight: 800; color: #d13b54; font-size: 1.05rem; }
@keyframes cdTick { 0% { transform: translateY(-3px) scale(0.96); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
.ny-countdown .cd-num { animation: cdTick 0.35s ease-out; }

/* ===== 3D-наклон карточек (Spline DNA) — transform ставит effects.js ===== */
.start-card, .question-wrap, .final-card, .board-wrap {
  transition: transform 0.22s ease-out;
  will-change: transform;
}

/* ===== Маскот: всплывание новой фразы ===== */
.m-bubble.bubble-pop { animation: bubblePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bubblePop { 0% { transform: scale(0.86) translateY(4px); opacity: 0.3; } 100% { transform: none; opacity: 1; } }

/* ===== Переключатель темы (две версии дизайна) ===== */
.theme-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.theme-opt {
  flex: 1 1 150px; max-width: 210px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 12px; border-radius: 14px; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,0.85); border: 1.5px solid rgba(120,165,225,0.45); color: var(--text);
  box-shadow: 0 4px 12px rgba(60,110,180,0.12); transition: transform .15s, border-color .2s, box-shadow .2s;
}
.theme-opt:hover { transform: translateY(-2px); border-color: var(--accent); }
.theme-opt.active { border-color: #ff4d67; box-shadow: 0 6px 16px rgba(255,77,103,.25), inset 0 0 0 1px rgba(255,77,103,.4); background: #fff; }
.theme-opt .th-ic svg { width: 40px; height: 28px; display: block; border-radius: 6px; }
.theme-opt .th-name { font-weight: 800; font-size: 0.86rem; }
.theme-opt .th-desc { font-size: 0.68rem; color: var(--text-muted); }
.theme-opt.active .th-name { color: #d13b54; }

/* ===== Гирлянда ===== */
.garland { height: 30px; }
.garland .bulb { width: 12px; height: 12px; opacity: 0.8; box-shadow: 0 0 10px 3px var(--c, #fff), 0 0 2px 1px rgba(0,0,0,0.08); }

/* Интерактивная гирлянда: лампочки кликабельны (вспышка + смена цвета) */
.garland .bulb { pointer-events: auto; cursor: pointer; transition: transform .15s ease; }
.garland .bulb:hover { transform: scale(1.35); }
.garland .bulb.bulb-pop { animation: bulbPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bulbPop {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.9); filter: brightness(2.2) drop-shadow(0 0 10px #fff); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ===== Ракеты салюта (взлетают снизу, взрываются в точке) ===== */
.ny-rocket {
  position: absolute; top: 100vh; width: 8px; height: 15px;
  border-radius: 50% 50% 42% 42%;
  box-shadow: 0 0 12px 4px rgba(255, 214, 110, 0.85), 0 6px 18px 6px rgba(255, 179, 64, 0.35);
  animation: rocketRise 0.64s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  z-index: 3;
}
.ny-rocket::after {
  content: ''; position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
  width: 3px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,214,110,0.9), transparent);
  filter: blur(1px);
}
@keyframes rocketRise {
  0% { transform: translateY(0) scaleY(1.25); opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translateY(calc(-1 * var(--ry, 60vh))) scaleY(0.92); opacity: 0.85; }
}

/* ===== Footer / HUD / модалки ===== */
.app-footer { color: var(--text-muted); border-top: 1px solid rgba(120,165,225,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.85)); }
.hud-chip { background: rgba(255,255,255,0.8); border-color: rgba(120,165,225,0.5); box-shadow: 0 6px 18px rgba(60,110,180,0.18); }
.hud-btn { background: rgba(255,255,255,0.8); border-color: rgba(120,165,225,0.5); box-shadow: 0 4px 12px rgba(60,110,180,0.16); }
.hud-btn:hover { border-color: var(--accent); }
.modal { background: rgba(90, 140, 200, 0.4); }
.modal-card { background: #fdfeff; border-color: rgba(120,165,225,0.6); }
.modal-card h3 { color: #d13b54; }
.modal-x { background: #eef5ff; border-color: var(--border); color: var(--text); }

/* ===== Кнопки: круглая «санта»-кнопка как в Santa Tracker ===== */
.btn-primary {
  color: #fff;
  background: radial-gradient(120% 120% at 30% 25%, #ff7b8d 0%, #ff4d67 55%, #e63950 100%);
  box-shadow: 0 10px 26px rgba(255, 77, 103, 0.45), inset 0 -3px 0 rgba(0,0,0,0.12), inset 0 2px 0 rgba(255,255,255,0.35);
  text-shadow: 0 1px 2px rgba(150,20,40,0.35);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: rgba(255,255,255,0.85); border-color: rgba(120,165,225,0.5); box-shadow: 0 4px 14px rgba(60,110,180,0.14); }
.btn-ghost:hover { background: #ffffff; border-color: var(--accent); }
.loc-action-btn { background: rgba(255,255,255,0.9); border-color: rgba(120,165,225,0.45); color: var(--text); }
.loc-action-btn:hover { border-color: var(--accent); }
.loc-action-btn.primary { background: radial-gradient(120% 120% at 30% 25%, #ff7b8d, #ff4d67 60%, #e63950); color: #fff; border: 0; }

/* Тосты */
.toast { background: rgba(255,255,255,0.96); border-color: rgba(120,165,225,0.6); color: var(--text); box-shadow: 0 12px 30px rgba(40,90,170,0.25); }
.toast.good { border-color: rgba(23,178,106,0.65); }
.toast.bad { border-color: rgba(255,93,115,0.65); }
.toast.gold { border-color: rgba(255,179,64,0.8); }

.screen-title { background: linear-gradient(90deg, #ff4d67, #ff9a3d 45%, #1fa2ff); -webkit-background-clip: text; background-clip: text; }
.screen-sub { color: var(--text-muted); }

/* ===== START ===== */
#screen-start .start-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.78));
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: var(--shadow), 0 2px 0 rgba(255,255,255,0.9) inset;
  backdrop-filter: blur(10px);
}
#screen-start .start-card::before {
  background: radial-gradient(420px 240px at 50% -10%, rgba(255,196,66,0.22), transparent 62%);
}
.game-logo {
  background: linear-gradient(90deg, #ff4d67, #ff9a3d 50%, #1fa2ff);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 0 rgba(255,255,255,0.95)) drop-shadow(0 8px 18px rgba(60,110,180,0.35));
}
.game-sub { color: #46619c; }

/* Сцена персонажей (SVG из ui.js) */
.festive-scene { height: 176px; gap: 2px; align-items: flex-end; }
.festive-scene .char { display: inline-block; line-height: 0; filter: drop-shadow(0 8px 14px rgba(50,100,170,0.3)); }
.festive-scene .char svg { display: block; height: auto; }
.festive-scene .c1 svg { width: 92px; }
.festive-scene .c2 svg { width: 46px; margin-bottom: 12px; }
.festive-scene .c3 svg { width: 104px; }
.festive-scene .c4 svg { width: 60px; margin-bottom: 6px; }
.festive-scene .c5 svg { width: 84px; }
.festive-scene .c6 svg { width: 88px; }
.festive-scene .c1 { animation: dedBob 4s ease-in-out infinite; }
.festive-scene .c2 { animation: floatBob 5s ease-in-out infinite; }
.festive-scene .c3 { animation: treeGlow 3.2s ease-in-out infinite; }
.festive-scene .c4 { animation: floatBob 6s ease-in-out infinite; animation-delay: -2s; }
.festive-scene .c5 { animation: dedBob 5s ease-in-out infinite; animation-delay: -3s; }
.festive-scene .c6 { animation: floatBob 5.5s ease-in-out infinite; animation-delay: -1.4s; }

/* Кнопки классов — ёлочные шары (A Shape DNA: смелые цвета).
   Размер вписан в высоту экрана (min(vw,vh)): на 2K не разбухают. */
.grade-btn {
  position: relative;
  width: clamp(64px, min(7.2vw, 9vh), 104px); height: clamp(64px, min(7.2vw, 9vh), 104px);
  border-radius: 50%; justify-self: center;
  font-size: clamp(1.4rem, min(2.4vw, 3.8vh), 2.5rem); line-height: 1;
  background: radial-gradient(120% 120% at 32% 26%, #ffffff 0%, #eaf4ff 60%, #d3e8ff 100%);
  border: 0; color: var(--text); font-weight: 800;
  box-shadow: 0 10px 22px rgba(60,110,180,0.25), inset 0 -6px 0 rgba(120,165,225,0.35), inset 0 3px 0 rgba(255,255,255,0.95);
}
.grade-btn::before {
  content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 10px; border-radius: 5px 5px 0 0; background: #ffb340; box-shadow: 0 -3px 0 rgba(60,110,180,0.4);
}
.grade-row { padding-top: 16px; }
.grade-row .grade-btn { margin-top: 6px; }
.grade-btn:nth-child(1) { --ball: #ff5d73; } .grade-btn:nth-child(2) { --ball: #ffb340; }
.grade-btn:nth-child(3) { --ball: #2ec866; } .grade-btn:nth-child(4) { --ball: #1fa2ff; }
.grade-btn:nth-child(5) { --ball: #9b6bff; } .grade-btn:nth-child(6) { --ball: #ff8ab5; }
.grade-btn:nth-child(7) { --ball: #17b2b0; }
.grade-btn:not(.active):hover { transform: translateY(-3px) rotate(-3deg); background: radial-gradient(120% 120% at 32% 26%, #ffffff, var(--ball) 420%); }
.grade-btn.active {
  background: radial-gradient(120% 120% at 32% 26%, color-mix(in srgb, var(--ball) 55%, #fff) 0%, var(--ball) 70%);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ball) 55%, transparent), inset 0 -3px 0 rgba(0,0,0,0.14), inset 0 2px 0 rgba(255,255,255,0.45);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .grade-btn.active { background: radial-gradient(120% 120% at 32% 26%, #ffd0d8, #ff5d73 70%); }
}

.quest-input { background: rgba(255,255,255,0.92); border-color: rgba(120,165,225,0.5); color: var(--text); }
.quest-input::placeholder { color: #8fa6cf; }
.quest-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(31,162,255,0.15); }
.btn-add { background: radial-gradient(120% 120% at 32% 26%, #ffd66e, #ffb340); border: 0; color: #5d3a00; font-weight: 800; box-shadow: 0 6px 14px rgba(255,179,64,0.4); }

.student-chip { background: rgba(255,255,255,0.92); border-color: rgba(120,165,225,0.5); box-shadow: 0 4px 10px rgba(60,110,180,0.14); }
.student-chip .sc { color: #e07b00; }

/* Тэглайн «Дети vs Родители» — дневная тема */
.vs-tagline { background: rgba(255,214,110,0.22); border-color: rgba(255,179,64,0.45); }
.vs-note { color: #2b4a86; }
/* Счёт команд в панели отметок и HUD — тёплый оранжевый */
.team-row .team-score { color: #c77000; }

.news-ticker { background: rgba(31,162,255,0.1); border: 1px solid rgba(31,162,255,0.35); }
.news-text { color: #2b4a86; }

.start-links .btn-ghost { box-shadow: 0 4px 12px rgba(60,110,180,0.12); }

/* ===== FINAL ===== */
#screen-final .final-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.93), rgba(255,255,255,0.82));
  border: 1px solid rgba(255,255,255,0.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  max-width: 580px;
  margin: 0 auto;
}
.final-trophy { filter: drop-shadow(0 10px 22px rgba(255,179,64,0.55)); }
.final-trophy svg { width: 110px; height: auto; }
.final-stars .star { display: inline-block; line-height: 0; }
.final-stars .star svg { width: 44px; height: 44px; filter: drop-shadow(0 4px 8px rgba(255,179,64,0.5)); }
.final-stars .star.dim svg { opacity: 0.22; filter: grayscale(0.9); }
.podium-row { background: rgba(255,255,255,0.85); border-color: rgba(120,165,225,0.4); box-shadow: 0 6px 16px rgba(60,110,180,0.12); }
.podium-row.r1 { background: linear-gradient(90deg, rgba(255,214,110,0.55), rgba(255,255,255,0.9)); border-color: #ffb340; }
.podium-row.r2 { background: linear-gradient(90deg, rgba(214,226,240,0.6), rgba(255,255,255,0.9)); border-color: #9fb4cc; }
.podium-row.r3 { background: linear-gradient(90deg, rgba(255,178,124,0.5), rgba(255,255,255,0.9)); border-color: #e58a4e; }
.podium-score { color: #c77000; }

.hint-box { background: rgba(155,107,255,0.1); border-color: rgba(155,107,255,0.4); color: #5a3fb0; }
.reveal-box { background: rgba(23,178,106,0.1); border-color: rgba(23,178,106,0.4); color: #0c6b3d; }
.reveal-box b { color: #0f8f52; }

/* ===== BOARD ===== */
#screen-board .board-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.8));
  border: 1px solid rgba(255,255,255,0.95); box-shadow: var(--shadow); backdrop-filter: blur(10px);
}
.board-info .b-grade { color: #d13b54; }
.board-info .b-students { color: #46619c; }
.board-progress .bp-bar { background: rgba(27,50,102,0.16); border-color: rgba(120,165,225,0.5); }
.bp-fill { background: linear-gradient(90deg, #ffb340, #ff5d73 60%, #9b6bff); box-shadow: 0 0 10px rgba(255,141,90,0.6); }
.bp-text { color: #46619c; }

.board-mascot .m-snowman { line-height: 0; }
.board-mascot .m-snowman svg { width: 54px; height: auto; filter: drop-shadow(0 4px 8px rgba(50,100,170,0.3)); }
.m-bubble { background: #ffffff; border-color: rgba(120,165,225,0.5); color: var(--text); box-shadow: 0 6px 16px rgba(60,110,180,0.15); }
.m-bubble::before { border-right-color: #ffffff; }

/* Шапки категорий — СПЛОШНЫЕ цветовые блоки (A Shape Christmas) */
.jcat-head { color: #fff; border: 0; border-radius: 14px 14px 6px 6px; text-shadow: 0 1px 2px rgba(0,0,0,0.28);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -4px 0 rgba(0,0,0,0.12); padding: 12px 6px 10px; }
.jcat-head .cat-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.3);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); }
.jcat-head .cat-ic svg { width: 28px !important; height: 28px !important; filter: none !important; }
.jcat-head.cat-forest { background: linear-gradient(160deg, #3ddb7a, #17a04e); }
.jcat-head.cat-factory { background: linear-gradient(160deg, #ffc75e, #ff9a1f); }
.jcat-head.cat-castle { background: linear-gradient(160deg, #56c7ff, #1d8fe0); }
.jcat-head.cat-mood { background: linear-gradient(160deg, #ff7b8d, #ff4d67); }

/* Клетки — цветные карточки-подарки с номером (колонка = цвет категории) */
.jcell {
  border: 0; border-radius: 14px; color: #fff;
  font-size: clamp(1.3rem, min(2.8vw, 5vh), 3rem);
  text-shadow: 0 2px 3px rgba(0,0,0,0.3);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -5px 0 rgba(0,0,0,0.14), 0 8px 18px rgba(60,110,180,0.18);
}
.jcell .pts-label { color: rgba(255,255,255,0.88); font-weight: 700; font-size: clamp(0.72rem, min(0.9vw, 1.5vh), 1rem); }
.jcell::after { background: linear-gradient(180deg, rgba(255,255,255,0.28), transparent 46%); }
.jcell::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26%; height: 7px; border-radius: 0 0 10px 10px; background: rgba(255,255,255,0.55);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.jcell:hover { transform: translateY(-4px) scale(1.025); box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -5px 0 rgba(0,0,0,0.14), 0 14px 30px rgba(60,110,180,0.34); }
.jcell.cat-forest { background: linear-gradient(160deg, #3ddb7a, #149047); }
.jcell.cat-factory { background: linear-gradient(160deg, #ffc75e, #f68d12); }
.jcell.cat-castle { background: linear-gradient(160deg, #56c7ff, #1782cc); }
.jcell.cat-mood { background: linear-gradient(160deg, #ff7b8d, #ef3b57); }
.jcell.answered { background: rgba(255,255,255,0.66) !important; color: #8fa6cf; text-shadow: none;
  box-shadow: inset 0 0 0 2px rgba(120,165,225,0.35); opacity: 1; }
.jcell.answered::before { display: none; }
.jcell.answered .pts-label { color: #8fa6cf; }

/* Карточка вопроса — стекло (Spline DNA) */
#screen-question .question-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.86));
  border: 1px solid rgba(255,255,255,0.95); box-shadow: var(--shadow); backdrop-filter: blur(10px);
}
.question-wrap::before {
  background:
    radial-gradient(220px 140px at 88% -5%, rgba(31,162,255,0.14), transparent 60%),
    radial-gradient(200px 120px at 8% 105%, rgba(255,179,64,0.16), transparent 60%);
}
.question-wrap::after { color: rgba(86,132,200,0.5); }
.q-cat-badge { background: rgba(255,255,255,0.9); border-color: rgba(120,165,225,0.5); color: var(--text); box-shadow: 0 4px 10px rgba(60,110,180,0.12); }
.q-points { color: #c77000; background: rgba(255,214,110,0.3); border-color: rgba(255,179,64,0.6); }
.q-points { animation: ptsPulse 2.4s ease-in-out infinite; }
@keyframes ptsPulse { 0%,100% { box-shadow: 0 0 0 rgba(255,179,64,0); } 50% { box-shadow: 0 0 16px rgba(255,179,64,0.55); } }

.pz-opt { background: rgba(255,255,255,0.92); border-color: rgba(120,165,225,0.45); color: var(--text); box-shadow: 0 3px 10px rgba(60,110,180,0.1); }
.pz-opt:hover { border-color: var(--accent); background: #ffffff; }
.pz-opt.selected { border-color: var(--accent); background: rgba(31,162,255,0.12); }
.pz-opt.correct { border-color: var(--good); background: rgba(23,178,106,0.14); }
.pz-opt.wrong { border-color: var(--wrong); background: rgba(255,93,115,0.14); }
/* Номер-подсказка клавиши на варианте (светлая тема) */
.pz-opt .kbd { background: rgba(31,88,180,0.07); border-color: rgba(86,132,200,0.4); color: #46598a; }
.pz-opt:hover .kbd { background: rgba(255,178,26,0.16); color: #b36b00; border-color: rgba(255,178,26,0.5); }
.pz-opt.selected .kbd, .pz-opt.correct .kbd { background: rgba(23,178,106,0.14); color: #0f7a48; border-color: rgba(23,178,106,0.45); }
.pz-opt.wrong .kbd { background: rgba(255,93,115,0.14); color: #c22540; border-color: rgba(255,93,115,0.45); }
/* Чипы команд на пройденной клетке (светлая тема) */
.jcell .cell-teams .ct { filter: drop-shadow(0 1px 2px rgba(255,255,255,0.85)); }
.pz-input { background: rgba(255,255,255,0.95); border-color: rgba(120,165,225,0.5); color: var(--text); }
.pz-input::placeholder { color: #8fa6cf; }
.pz-input.correct { border-color: var(--good); background: rgba(23,178,106,0.12); }
.pz-input.wrong { border-color: var(--wrong); background: rgba(255,93,115,0.12); }

.pz-geo-fig { background: linear-gradient(180deg, #eaf6ff, #dceeff); border-color: rgba(120,165,225,0.45); }
.geo-shape.lit { fill: rgba(255,179,64,0.55) !important; stroke: #c77000 !important; }
.pz-shadow-opt { background: rgba(255,255,255,0.92); border-color: rgba(120,165,225,0.45); box-shadow: 0 3px 10px rgba(60,110,180,0.1); }
.pz-shadow-opt:hover { border-color: var(--accent); }
.pz-shadow-opt.selected { border-color: var(--accent); background: rgba(31,162,255,0.12); }
.pz-shadow-opt.correct { border-color: var(--good); background: rgba(23,178,106,0.14); }
.pz-shadow-opt.wrong { border-color: var(--wrong); background: rgba(255,93,115,0.14); }
.shadow-original { background: rgba(255,214,110,0.22); border-color: rgba(255,179,64,0.55); }
.shadow-original .so-label { color: #c77000; }

.seq-tape { background: linear-gradient(180deg, #eaf6ff, #dceeff); border-color: rgba(120,165,225,0.45); }
.seq-q { color: #c77000; }
.pz-clock-fig { background: linear-gradient(180deg, #eaf6ff, #dceeff); border-color: rgba(120,165,225,0.45); }
.pz-clock-fig svg { filter: drop-shadow(0 6px 14px rgba(60,110,180,0.3)); }
.open-fig svg { filter: drop-shadow(0 6px 12px rgba(60,110,180,0.3)); }
.pz-host-inner .open-note { color: #46619c; }

.match-tile { background: rgba(255,255,255,0.92); border-color: rgba(120,165,225,0.45); color: var(--text); box-shadow: 0 3px 10px rgba(60,110,180,0.1); }
.match-tile:hover { border-color: var(--accent); }
.match-tile.selected { border-color: var(--accent); background: rgba(31,162,255,0.12); }
.match-tile.correct { border-color: var(--good); background: rgba(23,178,106,0.14); }
.match-tile.wrong { border-color: var(--wrong); background: rgba(255,93,115,0.14); }
.match-mid { color: #8fa6cf; }

/* Отметки */
.marks-panel { background: rgba(240,248,255,0.75); border-color: rgba(120,165,225,0.4); }
.marks-title { color: var(--text); }
.marks-title .pts-hint { color: #c77000; }
.mark-row { background: rgba(255,255,255,0.92); border-color: rgba(120,165,225,0.4); }
.mark-row .sc { color: #c77000; }
.mbtn { background: rgba(255,255,255,0.9); border-color: rgba(120,165,225,0.45); color: var(--text); box-shadow: 0 2px 6px rgba(60,110,180,0.12); }
.mbtn.ok { background: rgba(23,178,106,0.14); border-color: rgba(23,178,106,0.5); color: #0f8f52; }
.mbtn.ok.on { background: rgba(23,178,106,0.4); box-shadow: 0 0 0 2px rgba(23,178,106,0.4); }
.mbtn.no { background: rgba(255,93,115,0.12); border-color: rgba(255,93,115,0.5); color: #d13b54; }
.mbtn.und { background: rgba(120,165,225,0.14); border-color: rgba(120,165,225,0.45); color: #46619c; }
.mark-wrongs { color: #d13b54; }

.task-feedback.good { background: rgba(23,178,106,0.12); border-color: rgba(23,178,106,0.45); color: #0c6b3d; }
.task-feedback.bad { background: rgba(255,93,115,0.12); border-color: rgba(255,93,115,0.45); color: #a01f36; }

.ask-chip { background: rgba(255,255,255,0.9); border-color: rgba(120,165,225,0.5); color: var(--text); box-shadow: 0 4px 12px rgba(60,110,180,0.14); }
.ask-chip:hover { border-color: var(--accent); }
.roulette-display { background: linear-gradient(135deg, rgba(255,214,110,0.3), rgba(31,162,255,0.18)); border-color: rgba(120,165,225,0.5); color: var(--text); }
.roulette-display .r-nm { color: #d13b54; }

/* Весы */
.bal-pan { background: rgba(255,255,255,0.8); border-color: rgba(120,165,225,0.55); }
.bal-stand { background: #7a8cc0; }
.bal-stand::after { background: #7a8cc0; }
.bal-beam { background: linear-gradient(90deg, #9b6bff, #ffb340, #9b6bff); }
.bal-eq { color: #c77000; }

/* Скроллбар */
*::-webkit-scrollbar-thumb { background: rgba(120,165,225,0.5); }
*::-webkit-scrollbar-thumb:hover { background: rgba(86,132,200,0.7); }

/* Мобильная адаптация */
@media (max-width: 480px) {
  .festive-scene { height: 118px; }
  .festive-scene .c1 svg { width: 62px; }
  .festive-scene .c2 svg { width: 30px; margin-bottom: 8px; }
  .festive-scene .c3 svg { width: 70px; }
  .festive-scene .c4 svg { width: 40px; margin-bottom: 4px; }
  .festive-scene .c5 svg { width: 56px; }
  .festive-scene .c6 svg { width: 58px; }
  .grade-btn { width: clamp(64px, 17vw, 88px); height: clamp(64px, 17vw, 88px); font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .grade-btn::before { top: -9px; width: 13px; height: 8px; }
  .ny-village { bottom: 90px; }
}

/* Доска на узких экранах: держим 2 колонки (1 колонка = бесконечный скролл) */
@media (max-width: 380px) {
  .jeopardy-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .jcell { aspect-ratio: 4 / 3; font-size: 1.15rem; border-radius: 12px; }
  .jcell .pts-label { font-size: 0.55rem; }
  .jcat-head { font-size: 0.72rem; padding: 8px 4px; border-radius: 10px 10px 4px 4px; }
  .jcat-head .cat-ic { width: 34px; height: 34px; }
  .jcat-head .cat-ic svg { width: 22px !important; height: 22px !important; }
  .board-mascot .m-snowman svg { width: 42px !important; }
  .m-bubble { font-size: 0.78rem; }
}

/* Движок operator — светлые карточки */
html:not(.theme-real) .pz-op-num { background: #ffffff; border-color: rgba(120,165,225,0.5); color: var(--text); box-shadow: 0 3px 8px rgba(60,110,180,0.10); }
html:not(.theme-real) .pz-op-eq { background: rgba(31,162,255,0.08); border-color: rgba(31,162,255,0.45); }
html:not(.theme-real) .pz-op-slot { background: rgba(255,209,102,0.14); border-color: rgba(217,150,30,0.55); color: #c98a1e; }
html:not(.theme-real) .pz-op-slot.filled { border-color: #1fa2ff; background: rgba(31,162,255,0.10); }
html:not(.theme-real) .pz-op-btn { background: #ffffff; border-color: rgba(120,165,225,0.5); box-shadow: 0 4px 10px rgba(60,110,180,0.12); }
html:not(.theme-real) .pz-op-btn .op { color: #1b3266; }
html:not(.theme-real) .pz-op-btn.selected { border-color: #1fa2ff; background: rgba(31,162,255,0.12); }
/* Движок decorate — светлые */
html:not(.theme-real) .pz-dec-spot { border-color: rgba(20,90,50,0.55); box-shadow: 0 2px 6px rgba(20,50,20,0.3), inset 0 0 0 3px rgba(255,255,255,0.5); }
html:not(.theme-real) .pz-dec-panel { background: rgba(255,255,255,0.92); border-color: rgba(120,165,225,0.5); box-shadow: 0 6px 16px rgba(60,110,180,0.12); }
html:not(.theme-real) .pz-dec-cnt { background: rgba(240,248,255,0.9); border-color: rgba(120,165,225,0.45); }
html:not(.theme-real) .pz-dec-cnt .cnt-name { color: #1b3266; }
html:not(.theme-real) .pz-dec-cnt .cnt-val { color: #46619c; }