/* Winter / Christmas look (Nov 2026 – Jan 2027): a colder night sky, still
   snow, fairy lights under the header and snow on the cards' tops. Nothing
   here moves. Drop the <link> to it (and WINTER in app.js) to go back. */
:root {
  --bg: #090d16;
  --surface: #10151f;
  --surface-2: #161c28;
  --raised: #1d2432;
  --line: #222a39;
  --line-strong: #2d3648;
  --snow: #e9eef8;
}

/* Still snowflakes over the night sky, three sizes at different spacings. */
body {
  background:
    radial-gradient(circle at 20% 30%, rgb(233 238 248 / 0.22) 1px, transparent 1.6px) 0 0 / 97px 89px,
    radial-gradient(circle at 70% 60%, rgb(233 238 248 / 0.14) 1.2px, transparent 2px) 0 0 / 151px 137px,
    radial-gradient(circle at 40% 80%, rgb(233 238 248 / 0.1) 1.8px, transparent 2.6px) 0 0 / 233px 211px,
    linear-gradient(#0d1424, var(--bg) 480px) no-repeat,
    var(--bg);
  background-attachment: fixed;
}

/* A string of fairy lights under the header. */
body > header { position: relative; padding-bottom: 18px; }
body > header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background:
    radial-gradient(circle, #ff5d6c 3px, rgb(255 93 108 / 0.35) 4px, transparent 6px) 6px 0 / 64px 12px repeat-x,
    radial-gradient(circle, #6fe08e 3px, rgb(111 224 142 / 0.35) 4px, transparent 6px) 22px 0 / 64px 12px repeat-x,
    radial-gradient(circle, #ffd36a 3px, rgb(255 211 106 / 0.35) 4px, transparent 6px) 38px 0 / 64px 12px repeat-x,
    radial-gradient(circle, #7fb2ff 3px, rgb(127 178 255 / 0.35) 4px, transparent 6px) 54px 0 / 64px 12px repeat-x,
    linear-gradient(transparent 3px, #2a3242 3px, #2a3242 4px, transparent 4px);
  pointer-events: none;
}

/* Snow settled on the cards. */
.quick, #totals, .groups, .lb, .board, .haiku-card { position: relative; }
.quick::before, #totals::before, .groups::before, .lb::before, .board::before, .haiku-card::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -4px;
  height: 7px;
  border-radius: 4px 4px 0 0;
  background:
    radial-gradient(ellipse 60% 100% at 50% 100%, var(--snow) 70%, transparent 72%) 0 0 / 41px 7px repeat-x,
    radial-gradient(ellipse 60% 100% at 50% 100%, var(--snow) 70%, transparent 72%) 19px 2px / 29px 5px repeat-x,
    linear-gradient(transparent 4px, var(--snow) 4px);
  opacity: 0.85;
  pointer-events: none;
}