.winter-tree {
  position: fixed;
  right: 16px;
  bottom: 12px;
  width: min(220px, 26vw);
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  opacity: 0.88;
  transition: opacity 200ms ease;
}

html[data-theme="dark"] .winter-tree {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
  opacity: 0.84;
}

.winter-tree svg {
  display: block;
  width: 100%;
  height: auto;
}

.winter-tree .tree-glow {
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 12px rgba(112, 205, 255, 0.25));
}

.winter-tree .tree-garland path {
  stroke: #e3eafc;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

html[data-theme="dark"] .winter-tree .tree-garland path {
  stroke: rgba(255, 255, 255, 0.82);
}

.winter-tree .tree-bulb {
  fill: #ffd66c;
  stroke: rgba(0, 0, 0, 0.1);
  stroke-width: 1.1;
  animation: tree-twinkle 3.5s ease-in-out infinite;
  transform-origin: center;
  opacity: 0.88;
}

.winter-tree .tree-bulb[data-tone="1"] {
  fill: #7fc7ff;
  animation-duration: 3.9s;
}

.winter-tree .tree-bulb[data-tone="2"] {
  fill: #ff8fb4;
  animation-duration: 4.25s;
}

.winter-tree.tree-no-animate .tree-bulb {
  animation: none;
  opacity: 0.85;
}

@keyframes tree-twinkle {
  0% {
    opacity: 0.55;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
  }
  35% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.65));
  }
  70% {
    opacity: 0.72;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35));
  }
  100% {
    opacity: 0.9;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
  }
}

@media (max-width: 640px) {
  .winter-tree {
    width: min(170px, 34vw);
    right: 10px;
    bottom: 10px;
  }
}

@media (max-width: 480px) {
  .winter-tree {
    width: min(140px, 40vw);
    opacity: 0.9;
  }
}