/* Theme: night - "Pyjamasfest".
 * Deep blue-purple night sky, a glowing crescent moon, twinkling stars along the top and bottom
 * edges, a string of fairy lights across the top and soft dream clouds in the bottom corners.
 * Dark theme: white text on deep navy cards. Contrast checked numerically (see report). */

html[data-ordleg-theme="night"] {
  --bg: radial-gradient(ellipse at 82% 0%, #3a2f8f 0%, transparent 52%),
        radial-gradient(ellipse at 8% 100%, #4a2378 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, #23206a 0%, transparent 45%),
        linear-gradient(180deg, #120f3a 0%, #0d0b2b 100%);
  --fg: #fdfaff;
  --fg-muted: #c9c4f0;
  --accent: #ffd66b;
  --accent-fg: #2a1d00;
  --card: rgba(255, 255, 255, 0.1);
  --card-strong: rgba(20, 16, 58, 0.95);
  --card-border: rgba(201, 196, 240, 0.22);
  --taboo: #ff86b3;
  --taboo-bg: rgba(255, 134, 179, 0.14);
  --timer-ok: #8be3ff;
  --timer-warn: #f5507f;
  --ok: #7ee8c8;
  --bad: #ff9bb8;
  --subtle: rgba(255, 255, 255, 0.16);
  --selected-bg: rgba(255, 214, 107, 0.15);
  --selected-ring: rgba(255, 214, 107, 0.28);
  --overlay: rgba(8, 6, 28, 0.75);
}

/* deco-a: crescent moon with a soft halo, top right of centre (clear of the header controls) */
html[data-ordleg-theme="night"] .theme-deco .deco-a {
  top: 5vh;
  right: 22vw;
  width: 13vmin;
  height: 13vmin;
  background: url("../../assets/themes/night/moon.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 2.5vmin rgba(255, 214, 107, 0.45));
}
html[data-ordleg-theme="night"] .theme-deco .deco-a::before {
  content: "";
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 160, 0.22) 0%, rgba(255, 230, 160, 0) 62%);
  animation: night-glow 7s ease-in-out infinite alternate;
}

/* deco-b: fairy lights strung across the top edge (bulbs + a glow layer that breathes) */
html[data-ordleg-theme="night"] .theme-deco .deco-b {
  top: 0;
  left: 0;
  right: 0;
  height: 7vh;
  background: url("../../assets/themes/night/lights.svg") left top / auto 100% repeat-x;
}
html[data-ordleg-theme="night"] .theme-deco .deco-b::before,
html[data-ordleg-theme="night"] .theme-deco .deco-b::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../assets/themes/night/lights-glow.svg") left top / auto 100% repeat-x;
  animation: night-blink 3.2s ease-in-out infinite alternate;
}
/* second glow layer is offset by half a tile so neighbouring bulbs pulse out of step */
html[data-ordleg-theme="night"] .theme-deco .deco-b::after { opacity: 0; animation-delay: -1.6s; mix-blend-mode: screen; }

/* deco-c: star bands along the top and bottom edges, plus dream clouds in the bottom corners */
html[data-ordleg-theme="night"] .theme-deco .deco-c { inset: 0; }
html[data-ordleg-theme="night"] .theme-deco .deco-c::before,
html[data-ordleg-theme="night"] .theme-deco .deco-c::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background:
    url("../../assets/themes/night/stars-a.svg") 0 0 / 60vh 30vh repeat,
    url("../../assets/themes/night/stars-b.svg") 30vh 12vh / 60vh 30vh repeat;
  animation: night-twinkle 6s ease-in-out infinite alternate;
}
html[data-ordleg-theme="night"] .theme-deco .deco-c::before {
  top: 0;
  height: 24vh;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
  mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
html[data-ordleg-theme="night"] .theme-deco .deco-c::after {
  bottom: 0;
  height: 16vh;
  background:
    radial-gradient(ellipse 22vw 9vh at 6vw 100%, rgba(120, 96, 210, 0.32) 0 70%, transparent 71%),
    radial-gradient(ellipse 16vw 7vh at 19vw 100%, rgba(150, 120, 230, 0.22) 0 70%, transparent 71%),
    radial-gradient(ellipse 22vw 9vh at 94vw 100%, rgba(120, 96, 210, 0.32) 0 70%, transparent 71%),
    radial-gradient(ellipse 16vw 7vh at 81vw 100%, rgba(150, 120, 230, 0.22) 0 70%, transparent 71%),
    url("../../assets/themes/night/stars-b.svg") 0 0 / 60vh 30vh repeat;
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent);
  mask-image: linear-gradient(to top, #000 50%, transparent);
  animation-delay: -3s;
}

@keyframes night-twinkle {
  from { opacity: 1; }
  to { opacity: 0.55; }
}
@keyframes night-blink {
  from { opacity: 1; }
  to { opacity: 0.3; }
}
@keyframes night-glow {
  from { opacity: 0.6; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1.06); }
}

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

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