html[data-winter-active="true"] {
  --winter-ice: #7fd6ff;
  --winter-frost: #eaf7ff;
  --winter-blue: #4a7dff;
}

/* Фоны: светлый (белый кот, розовое золото) — для светлой темы, тёмный (чёрный кот) — для тёмной.
   The picture sits in the site's fixed screen-sized layers (style.css body::before / ::after), so a long
   page never stretches it. Phone: the picture covers the screen. Wide screen: the picture fits the
   screen's height in the middle, a blurred copy fills the sides. */
html[data-winter-active="true"] body:not(.site-chat-body),
html[data-winter-active="true"] body:not(.site-chat-body) .app-container {
  background: transparent;
}

html[data-winter-active="true"] body:not(.site-chat-body) {
  --winter-picture: image-set(
    url("assets/seasonal/winter/background-dark.avif") type("image/avif"),
    url("assets/seasonal/winter/background-dark.webp") type("image/webp")
  );
  --winter-veil: linear-gradient(180deg, rgba(10, 3, 16, 0.36), rgba(10, 3, 16, 0.74));
  background-color: var(--bg-color);
}

html[data-winter-active="true"] body.theme-light:not(.site-chat-body) {
  --winter-picture: image-set(
    url("assets/seasonal/winter/background-light.avif") type("image/avif"),
    url("assets/seasonal/winter/background-light.webp") type("image/webp")
  );
  --winter-veil: linear-gradient(180deg, rgba(255, 250, 247, 0.2), rgba(255, 244, 246, 0.58));
}

html[data-winter-active="true"] body:not(.site-chat-body)::before {
  background: var(--winter-picture) center 30% / cover no-repeat !important;
  filter: none !important;
}

html[data-winter-active="true"] body:not(.site-chat-body)::after {
  background: var(--winter-veil) !important;
}

@media (min-width: 768px) {
  html[data-winter-active="true"] body:not(.site-chat-body)::before {
    inset: -48px;
    background: var(--winter-picture) center / cover no-repeat !important;
    filter: blur(28px) brightness(0.7) saturate(1.1) !important;
  }

  html[data-winter-active="true"] body.theme-light:not(.site-chat-body)::before {
    filter: blur(28px) brightness(1.05) saturate(1.05) !important;
  }

  html[data-winter-active="true"] body:not(.site-chat-body)::after {
    background: var(--winter-veil), var(--winter-picture) center top / auto 100% no-repeat !important;
  }
}

html[data-winter-active="true"] .site-chat-body:not(.theme-light) {
  background:
    linear-gradient(180deg, rgba(10, 3, 16, 0.72), rgba(10, 3, 16, 0.94)),
    image-set(
      url("assets/seasonal/winter/background-dark.avif") type("image/avif"),
      url("assets/seasonal/winter/background-dark.webp") type("image/webp")
    ) center / cover scroll no-repeat,
    var(--chat-bg);
}

html[data-winter-active="true"] .site-chat-body.theme-light {
  background:
    linear-gradient(180deg, rgba(255, 250, 247, 0.64), rgba(255, 244, 246, 0.86)),
    image-set(
      url("assets/seasonal/winter/background-light.avif") type("image/avif"),
      url("assets/seasonal/winter/background-light.webp") type("image/webp")
    ) center / cover scroll no-repeat,
    var(--chat-bg);
}

html[data-winter-active="true"] body.site-chat-body:not(.theme-light) .site-chat-shell {
  background:
    linear-gradient(180deg, rgba(10, 3, 16, 0.42), rgba(10, 3, 16, 0.7)),
    image-set(
      url("assets/seasonal/winter/background-dark.avif") type("image/avif"),
      url("assets/seasonal/winter/background-dark.webp") type("image/webp")
    ) center / cover scroll no-repeat,
    var(--chat-bg);
}

html[data-winter-active="true"] body.site-chat-body.theme-light .site-chat-shell {
  background:
    linear-gradient(180deg, rgba(255, 250, 247, 0.42), rgba(255, 244, 246, 0.72)),
    image-set(
      url("assets/seasonal/winter/background-light.avif") type("image/avif"),
      url("assets/seasonal/winter/background-light.webp") type("image/webp")
    ) center / cover scroll no-repeat,
    var(--chat-bg);
}

/* Шапка: девушка с чёрным котом у ёлки. */
html[data-winter-active="true"] .header {
  position: relative;
  isolation: isolate;
  min-height: 224px;
  overflow: hidden;
  background: #1a0714;
}

html[data-winter-active="true"] .header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 3, 12, 0.66) 0%, rgba(16, 3, 12, 0.28) 28%, transparent 52%),
    linear-gradient(180deg, rgba(16, 3, 12, 0.46) 0%, rgba(16, 3, 12, 0.1) 44%, transparent 70%);
}

/* Гирлянда: голубые, белые и синие огоньки вдоль нижнего края шапки. */
html[data-winter-active="true"] .header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 8px;
  pointer-events: none;
  background:
    radial-gradient(circle at 9px 4px, var(--winter-ice) 0 2.4px, transparent 3.4px) 0 0 / 54px 8px repeat-x,
    radial-gradient(circle at 27px 4px, var(--winter-frost) 0 2.4px, transparent 3.4px) 0 0 / 54px 8px repeat-x,
    radial-gradient(circle at 45px 4px, var(--winter-blue) 0 2.4px, transparent 3.4px) 0 0 / 54px 8px repeat-x;
  filter: drop-shadow(0 0 4px rgba(120, 200, 255, 0.95));
  animation: winter-twinkle 2.6s ease-in-out infinite;
}

html[data-winter-active="true"] body.theme-light .header {
  background: #f6d9d2;
}

/* The header picture is a night scene in both themes, so its text stays light on a dark veil. */
html[data-winter-active="true"] body.theme-light .header::before {
  background:
    radial-gradient(ellipse 300px 120px at 0 0, rgba(40, 8, 28, 0.66), rgba(40, 8, 28, 0.3) 62%, transparent),
    linear-gradient(90deg, rgba(40, 8, 28, 0.36) 0%, transparent 46%);
}

html[data-winter-active="true"] body.theme-light .header .tagline {
  color: rgba(255, 244, 248, 0.94) !important;
  text-shadow: 0 1px 6px rgba(30, 4, 20, 0.85), 0 0 10px rgba(255, 79, 163, 0.35) !important;
}

.winter-brand-art[hidden],
.winter-setting-row[hidden] {
  display: none !important;
}

.winter-brand-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
}

.winter-brand-art picture,
.winter-brand-art img {
  display: block;
  width: 100%;
  height: 100%;
}

.winter-brand-art img {
  object-fit: cover;
  object-position: 62% 22%;
}

html[data-winter-active="true"] .header > .brand,
html[data-winter-active="true"] .header > .header-actions {
  position: relative;
  z-index: 2;
}

html[data-winter-active="true"] .header-auth-button {
  display: none !important;
}

html[data-winter-active="true"] .header > .header-actions {
  position: absolute;
  left: 16px;
  right: auto;
  bottom: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  gap: 8px;
}

/* Переключатель: та же разметка, что у хэллоуинского, но зимние цвета. */
.winter-switch input:checked + span {
  border-color: #4fb3ff;
  background: rgba(79, 179, 255, 0.18);
}

.winter-switch input:checked + span::after {
  background: linear-gradient(135deg, #bfe9ff, #4a7dff);
}

@media (max-width: 420px) {
  html[data-winter-active="true"] .header {
    min-height: 220px !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 12px !important;
  }

  html[data-winter-active="true"] .header-actions {
    display: flex;
    flex-direction: row;
    width: auto;
    align-items: center;
  }

  html[data-winter-active="true"] .btn-premium {
    min-width: 0;
    padding-inline: 10px !important;
  }

  html[data-winter-active="true"] .btn-admin-crown {
    width: 36px;
    height: 36px;
  }
}

@media (min-width: 768px) {
  html[data-winter-active="true"] .header {
    min-height: 300px;
  }
}

/* Зимний неон: ледяной голубой край с синим свечением, морозно-белый подсвет;
   выбранный пункт меню — ледяной голубой. */
html[data-winter-active="true"] body:not(.theme-light) {
  --card-border: rgba(127, 214, 255, 0.42);
  --winter-edge: rgba(127, 214, 255, 0.66);
  --winter-edge-glow: rgba(64, 140, 255, 0.36);
  --winter-edge-frost: rgba(220, 242, 255, 0.4);
}

html[data-winter-active="true"] body.theme-light {
  --card-border: rgba(46, 128, 230, 0.34);
  --winter-edge: rgba(46, 128, 230, 0.52);
  --winter-edge-glow: rgba(90, 170, 255, 0.3);
  --winter-edge-frost: rgba(160, 210, 255, 0.45);
}

html[data-winter-active="true"] .header {
  border-bottom: 1px solid var(--winter-edge);
  box-shadow: 0 6px 24px var(--winter-edge-glow), inset 0 -1px 0 var(--winter-edge-frost);
}

html[data-winter-active="true"] body:not(.admin-mode) .bottom-nav,
html[data-winter-active="true"] body.site-chat-body .site-chat-nav {
  border-top: 1px solid var(--winter-edge);
  box-shadow: 0 -6px 24px var(--winter-edge-glow), 0 -1px 0 var(--winter-edge-frost);
}

html[data-winter-active="true"] body:not(.admin-mode) .nav-item.active {
  color: #8fdcff;
}

html[data-winter-active="true"] body.theme-light:not(.admin-mode) .nav-item.active {
  color: #2a74d6;
}

/* style.css paints card edges violet with !important, so the season has to as well. */
html[data-winter-active="true"] body:not(.admin-mode) :is(.catalog-card, .npc-card, .story-card, .home-media-card, .home-character-card, .home-user-list, .settings-profile-panel, .subscription-status-card, .premium-plan-card) {
  border-color: var(--card-border) !important;
  box-shadow: 0 0 0 1px var(--card-border), 0 0 14px var(--winter-edge-glow), 0 4px 18px -6px var(--winter-edge-frost) !important;
}

html[data-winter-active="true"] body:not(.admin-mode) :is(.catalog-card, .npc-card, .story-card, .home-media-card, .home-character-card):is(:hover, .active, .selected) {
  border-color: rgba(150, 222, 255, 0.9) !important;
  box-shadow: 0 0 0 1px rgba(150, 222, 255, 0.9), 0 0 18px rgba(64, 150, 255, 0.6), 0 6px 22px -6px rgba(220, 242, 255, 0.55) !important;
}

@media (min-width: 1100px) {
  html[data-winter-active="true"] body:not(.admin-mode):not(.setting-play-mode) .bottom-nav {
    border-top: 0;
    border-right: 1px solid var(--winter-edge);
    box-shadow: 6px 0 24px var(--winter-edge-glow), 1px 0 0 var(--winter-edge-frost);
  }

  html[data-winter-active="true"] body:not(.admin-mode) .nav-item.active::before {
    background: linear-gradient(180deg, #eaf7ff, #7fd6ff, #4a7dff);
    box-shadow: 0 0 10px rgba(79, 179, 255, 0.85);
  }
}

@media (min-width: 768px) {
  html[data-winter-active="true"] body.site-chat-body:not(.admin-mode):not(.setting-play-mode) .site-chat-nav {
    border-top: 0;
    border-right: 1px solid var(--winter-edge);
    box-shadow: 6px 0 24px var(--winter-edge-glow), 1px 0 0 var(--winter-edge-frost);
  }

  html[data-winter-active="true"] .site-chat-nav .nav-item.active {
    color: #8fdcff;
  }

  html[data-winter-active="true"] .site-chat-nav .nav-item.active::before {
    background: linear-gradient(180deg, #eaf7ff, #7fd6ff, #4a7dff);
    box-shadow: 0 0 10px rgba(79, 179, 255, 0.85);
  }
}

/* Анимации: слой со снежинками, линия под шапкой, снежинка у логотипа */
html[data-winter-active="true"] .app-container {
  isolation: isolate;
}

.winter-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.winter-shimmer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, #4a7dff, #7fd6ff, #eaf7ff, #7fd6ff, #4a7dff, transparent);
  background-size: 200% 100%;
  animation: winter-shimmer 5s linear infinite;
  pointer-events: none;
}

html[data-winter-active="true"] .header .logo {
  display: inline-block;
}

.winter-logo-icon {
  display: inline-block;
  margin-left: 6px;
  color: #f4ecff;
  font-size: 20px;
  line-height: 1;
  vertical-align: 6px;
  filter: drop-shadow(0 0 6px rgba(127, 214, 255, 0.95)) drop-shadow(0 0 10px rgba(74, 125, 255, 0.7));
  animation: winter-spin 9s linear infinite;
}

@keyframes winter-shimmer {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}

@keyframes winter-spin {
  to { transform: rotate(360deg); }
}

@keyframes winter-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Ёлочка-пасхалка (winter.js showTreeEgg): прыгает, оставляя кучки снега; пойманная — иней на весь экран.
   Works in any theme, like the pumpkin: the server decides when it appears. */
.winter-tree-egg {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 70;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 10px rgba(127, 214, 255, 0.75)) drop-shadow(0 4px 6px rgba(10, 20, 40, 0.35));
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.winter-tree-egg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.winter-tree-egg.is-caught img {
  animation: winter-tree-caught 0.45s ease-in forwards;
}

.winter-tree-egg.is-still img {
  animation: winter-tree-fade 8s ease-in-out forwards;
}

.winter-snow-pile {
  position: fixed;
  z-index: 69;
  pointer-events: none;
  border-radius: 50% 50% 40% 40% / 90% 90% 30% 30%;
  background:
    radial-gradient(ellipse 30% 55% at 32% 70%, #ffffff 0 60%, transparent 62%),
    radial-gradient(ellipse 34% 70% at 62% 62%, #ffffff 0 60%, transparent 62%),
    radial-gradient(ellipse 50% 60% at 50% 100%, #eef8ff 0 70%, transparent 72%);
  filter: drop-shadow(0 0 5px rgba(150, 215, 255, 0.85));
  transform-origin: 50% 100%;
  animation: winter-pile 6.5s ease-out forwards;
}

.winter-frost {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 65% at 50% 50%, transparent 38%, rgba(214, 238, 255, 0.5) 66%, rgba(240, 250, 255, 0.92) 100%),
    linear-gradient(135deg, rgba(190, 228, 255, 0.28), rgba(255, 255, 255, 0.12) 50%, rgba(170, 210, 255, 0.28));
  -webkit-backdrop-filter: blur(1.5px) saturate(0.75) brightness(1.08);
  backdrop-filter: blur(1.5px) saturate(0.75) brightness(1.08);
  animation: winter-frost 1.4s ease-out forwards;
}

.winter-frost-flake {
  position: absolute;
  width: min(42vw, 260px);
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9));
}

.winter-frost-flake.is-1 { left: -12%; top: -10%; transform: rotate(-12deg); }
.winter-frost-flake.is-2 { right: -12%; top: -8%; transform: rotate(18deg); }
.winter-frost-flake.is-3 { left: -10%; bottom: -10%; transform: rotate(30deg); }
.winter-frost-flake.is-4 { right: -12%; bottom: -12%; transform: rotate(-24deg); }

@keyframes winter-tree-caught {
  to { opacity: 0; transform: scale(1.7) rotate(-14deg); filter: brightness(1.8); }
}

@keyframes winter-tree-fade {
  0% { opacity: 0; }
  10%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes winter-pile {
  0% { opacity: 0; transform: scale(0.3, 0.2); }
  8% { opacity: 1; transform: scale(1.1, 1.15); }
  14% { transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.9, 0.6); }
}

@keyframes winter-frost {
  0% { opacity: 0; }
  18% { opacity: 1; }
  45% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .winter-tree-egg.is-caught img,
  .winter-snow-pile {
    animation-duration: 0.01s;
  }

  .winter-frost {
    animation-duration: 0.8s;
  }

  .winter-shimmer,
  .winter-logo-icon,
  html[data-winter-active="true"] .header::after {
    animation: none;
  }

  .winter-fx {
    display: none;
  }
}