/* Theme: christmas (category "jul") - deep fir green, berry red and warm gold,
 * slow falling snow at the edges and fir branches with baubles in the top corners. */

html[data-ordleg-theme="christmas"] {
  --bg: radial-gradient(ellipse 70% 55% at 50% -8%, #23603f 0%, rgba(35, 96, 63, 0) 70%),
        radial-gradient(ellipse 42% 38% at 0% 104%, rgba(138, 18, 36, 0.85) 0%, rgba(138, 18, 36, 0) 100%),
        radial-gradient(ellipse 42% 38% at 100% 104%, rgba(138, 18, 36, 0.85) 0%, rgba(138, 18, 36, 0) 100%),
        linear-gradient(180deg, #123e2a 0%, #0c2c1e 55%, #081d14 100%);
  --fg: #fffaf0;
  --fg-muted: #d4e3d3;
  --accent: #f0c457;
  --accent-fg: #2b1a00;
  --card: rgba(255, 250, 235, 0.08);
  --card-strong: rgba(8, 32, 21, 0.97);
  --card-border: rgba(240, 196, 87, 0.3);
  --taboo: #ff8a80;
  --taboo-bg: rgba(200, 32, 47, 0.24);
  --timer-ok: #f0c457;
  --timer-warn: #f25a4f;
  --ok: #8be0a4;
  --bad: #ff9b91;
  --subtle: rgba(255, 250, 235, 0.16);
  --selected-bg: rgba(240, 196, 87, 0.16);
  --selected-ring: rgba(240, 196, 87, 0.28);
  --overlay: rgba(4, 18, 11, 0.78);
}

/* --- Snow: two tiled layers falling slowly, masked away from the centre card --- */
html[data-ordleg-theme="christmas"] .theme-deco .deco-a {
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 62% 52% at 50% 54%, transparent 74%, #000 100%);
  mask-image: radial-gradient(ellipse 62% 52% at 50% 54%, transparent 74%, #000 100%);
}
html[data-ordleg-theme="christmas"] .theme-deco .deco-a::before,
html[data-ordleg-theme="christmas"] .theme-deco .deco-a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: repeat;
  will-change: transform;
}
html[data-ordleg-theme="christmas"] .theme-deco .deco-a::before {
  top: -300px;
  background-image:
    radial-gradient(circle at 22px 34px, rgba(255, 255, 255, 0.9) 0 2px, rgba(255, 255, 255, 0) 3px),
    radial-gradient(circle at 96px 170px, rgba(255, 255, 255, 0.75) 0 1.6px, rgba(255, 255, 255, 0) 2.6px),
    radial-gradient(circle at 160px 62px, rgba(255, 255, 255, 0.85) 0 2.2px, rgba(255, 255, 255, 0) 3.2px),
    radial-gradient(circle at 238px 224px, rgba(255, 255, 255, 0.7) 0 1.5px, rgba(255, 255, 255, 0) 2.5px),
    radial-gradient(circle at 60px 266px, rgba(255, 255, 255, 0.8) 0 1.8px, rgba(255, 255, 255, 0) 2.8px),
    radial-gradient(circle at 270px 118px, rgba(255, 255, 255, 0.65) 0 1.4px, rgba(255, 255, 255, 0) 2.4px),
    radial-gradient(circle at 190px 290px, rgba(255, 255, 255, 0.75) 0 1.7px, rgba(255, 255, 255, 0) 2.7px),
    radial-gradient(circle at 130px 120px, rgba(255, 255, 255, 0.6) 0 1.3px, rgba(255, 255, 255, 0) 2.2px);
  background-size: 300px 300px;
  animation: ordleg-xmas-snow-a 30s linear infinite;
}
html[data-ordleg-theme="christmas"] .theme-deco .deco-a::after {
  top: -460px;
  background-image:
    radial-gradient(circle at 70px 90px, rgba(255, 255, 255, 0.95) 0 3px, rgba(255, 255, 255, 0) 5.5px),
    radial-gradient(circle at 330px 40px, rgba(255, 255, 255, 0.85) 0 2.6px, rgba(255, 255, 255, 0) 5px),
    radial-gradient(circle at 230px 280px, rgba(255, 255, 255, 0.9) 0 3.4px, rgba(255, 255, 255, 0) 6px),
    radial-gradient(circle at 410px 350px, rgba(255, 255, 255, 0.8) 0 2.8px, rgba(255, 255, 255, 0) 5.2px),
    radial-gradient(circle at 130px 410px, rgba(255, 255, 255, 0.8) 0 2.4px, rgba(255, 255, 255, 0) 4.6px),
    radial-gradient(circle at 400px 170px, rgba(255, 255, 255, 0.7) 0 2.2px, rgba(255, 255, 255, 0) 4.2px);
  background-size: 460px 460px;
  animation: ordleg-xmas-snow-b 48s linear infinite;
}
@keyframes ordleg-xmas-snow-a { to { transform: translate3d(0, 300px, 0); } }
@keyframes ordleg-xmas-snow-b { to { transform: translate3d(0, 460px, 0); } }

/* --- Fir boughs along the top edge with baubles hanging into the free space
 * between the header text and the centre (one SVG, mirrored for the right) --- */
html[data-ordleg-theme="christmas"] .theme-deco .deco-b,
html[data-ordleg-theme="christmas"] .theme-deco .deco-c {
  top: 0;
  width: 42vw;
  aspect-ratio: 1000 / 300;
  background: url("../../assets/themes/christmas/baubles.svg") no-repeat 0 0 / 100% 100%,
              url("../../assets/themes/christmas/bough.svg") no-repeat 0 0 / 100% 100%;
  filter: drop-shadow(0 0.5vh 0.7vh rgba(0, 0, 0, 0.4));
  transform-origin: 0 0;
  animation: ordleg-xmas-sway 9s ease-in-out infinite alternate;
}
html[data-ordleg-theme="christmas"] .theme-deco .deco-b { left: 0; }
html[data-ordleg-theme="christmas"] .theme-deco .deco-c {
  right: 0;
  transform: scaleX(-1);
  transform-origin: 50% 0;
  animation-name: ordleg-xmas-sway-r;
  animation-delay: -4s;
}
@keyframes ordleg-xmas-sway { from { transform: rotate(-0.35deg); } to { transform: rotate(0.35deg); } }
@keyframes ordleg-xmas-sway-r { from { transform: scaleX(-1) rotate(-0.35deg); } to { transform: scaleX(-1) rotate(0.35deg); } }

/* Short screens: the start screen scrolls under the fixed boughs, so drop the hanging
 * baubles there and keep only the slim bough along the edge. */
@media (max-height: 900px) {
  html[data-ordleg-theme="christmas"][data-screen="start"] .theme-deco .deco-b,
  html[data-ordleg-theme="christmas"][data-screen="start"] .theme-deco .deco-c {
    background: url("../../assets/themes/christmas/bough.svg") no-repeat 0 0 / 100% 100%;
    width: 34vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ordleg-theme="christmas"] .theme-deco .deco-a::before,
  html[data-ordleg-theme="christmas"] .theme-deco .deco-a::after,
  html[data-ordleg-theme="christmas"] .theme-deco .deco-b,
  html[data-ordleg-theme="christmas"] .theme-deco .deco-c { animation: none; }
}

/* Dark text on the timeout banner (>= 5.2:1; white was only ~3.3:1) */
html[data-ordleg-theme="christmas"] { --timer-warn-fg: #1a0508; }