/* Stars that now and then shine (owner 2026-10-14: "make some of the stars in the sky ocassionally shine";
   src/components/SkyTwinkles.tsx). Each twinkle is a star (a 3 px dot, like the sky's own) that flashes into
   twinkle.png's cross of light for about half a second, then rests 6–11 s; every one has its own timing, so the sky
   shines here and there, never all at once. Places are % of the banner / the promotions row, chosen clear of the
   words, the war flags, the moon and the castles (the lobby: only beside the column). Reduced motion = plain stars.
   Castle look only. Undo: ../removed-features-backup/sky-twinkles-2026-10-14/README.txt */

html:not([data-site-theme="castle"]) .sky-twinkles,
.home-hero--compact .sky-twinkles { display: none; }
.sky-twinkles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.sky-twinkle {
  position: absolute;
  width: 21px;
  height: 21px;
  margin: -10.5px 0 0 -10.5px;
}
.sky-twinkle::before {                 /* the star itself */
  content: '';
  position: absolute;
  left: 9px;
  top: 9px;
  width: 3px;
  height: 3px;
  background: var(--castle-star-dot, rgba(255, 255, 255, 0.85));   /* the crown's colour: team-stars.css */
}
.sky-twinkle::after {                  /* its flash */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--castle-twinkle, url("/theme/castle/twinkle.png")) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  opacity: 0;
  animation: sky-twinkle var(--d, 8s) linear var(--delay, 0s) infinite;
}
/* every third one a size bigger (4 px a block) */
.sky-twinkle:nth-child(3n) { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.sky-twinkle:nth-child(3n)::before { left: 12px; top: 12px; width: 4px; height: 4px; }
@keyframes sky-twinkle {
  0%, 88%, 100% { opacity: 0; }
  91% { opacity: 0.55; }
  93.5% { opacity: 1; }
  96% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-twinkle::after { animation: none; }
}

/* ── the home banner (signed out): the sky beside the words and above the castles; past the column on wide screens ── */
/* on the signed-out banner each flashing star takes its side's crown (owner 2026-10-17: "stars on the left side blue and
   right side red"): left of the middle blue, right of it red */
.sky-twinkles--home .sky-twinkle { --castle-star-dot: rgba(79, 151, 255, 0.9); --castle-twinkle: url("/theme/castle/twinkle-blue.png"); }
.sky-twinkles--home .sky-twinkle:is(:nth-child(6), :nth-child(7), :nth-child(8), :nth-child(11), :nth-child(12)) {
  --castle-star-dot: rgba(255, 79, 94, 0.9); --castle-twinkle: url("/theme/castle/twinkle-red.png");
}
.sky-twinkles--home .sky-twinkle:nth-child(1)  { left: 19%;  top: 9%;  --d: 7s;    --delay: -1s; }
.sky-twinkles--home .sky-twinkle:nth-child(2)  { left: 27%;  top: 22%; --d: 9s;    --delay: -4s; }
.sky-twinkles--home .sky-twinkle:nth-child(3)  { left: 15%;  top: 34%; --d: 8s;    --delay: -6.5s; }
.sky-twinkles--home .sky-twinkle:nth-child(4)  { left: 31%;  top: 40%; --d: 11s;   --delay: -2.5s; }
.sky-twinkles--home .sky-twinkle:nth-child(5)  { left: 23%;  top: 3%;  --d: 10s;   --delay: -8s; }
.sky-twinkles--home .sky-twinkle:nth-child(6)  { left: 69%;  top: 17%; --d: 8.5s;  --delay: -3s; }
.sky-twinkles--home .sky-twinkle:nth-child(7)  { left: 82%;  top: 35%; --d: 7.5s;  --delay: -5.5s; }
.sky-twinkles--home .sky-twinkle:nth-child(8)  { left: 71%;  top: 41%; --d: 10.5s; --delay: -7s; }
.sky-twinkles--home .sky-twinkle:nth-child(9)  { left: -8%;  top: 12%; --d: 9.5s;  --delay: -1.5s; }
.sky-twinkles--home .sky-twinkle:nth-child(10) { left: -18%; top: 30%; --d: 8s;    --delay: -6s; }
.sky-twinkles--home .sky-twinkle:nth-child(11) { left: 108%; top: 18%; --d: 11.5s; --delay: -9s; }
.sky-twinkles--home .sky-twinkle:nth-child(12) { left: 116%; top: 36%; --d: 9s;    --delay: -3.5s; }
/* phones: the words fill the middle, the castle the bottom: the top corners and the sides */
@media (max-width: 768px) {
  .sky-twinkles--home .sky-twinkle:nth-child(1)  { left: 8%;  top: 3%; }
  .sky-twinkles--home .sky-twinkle:nth-child(2)  { left: 34%; top: 5%; }
  .sky-twinkles--home .sky-twinkle:nth-child(3)  { left: 62%; top: 2%; }
  .sky-twinkles--home .sky-twinkle:nth-child(4)  { left: 3%;  top: 38%; }
  .sky-twinkles--home .sky-twinkle:nth-child(5)  { left: 97%; top: 52%; }
  .sky-twinkles--home .sky-twinkle:nth-child(6)  { left: 95%; top: 22%; }
  .sky-twinkles--home .sky-twinkle:nth-child(n + 7) { display: none; }
  /* phones: 1, 2, 4 left (blue), 3, 5, 6 right (red) */
  .sky-twinkles--home .sky-twinkle:is(:nth-child(1), :nth-child(2), :nth-child(4)) { --castle-star-dot: rgba(79, 151, 255, 0.9); --castle-twinkle: url("/theme/castle/twinkle-blue.png"); }
  .sky-twinkles--home .sky-twinkle:is(:nth-child(3), :nth-child(5), :nth-child(6)) { --castle-star-dot: rgba(255, 79, 94, 0.9); --castle-twinkle: url("/theme/castle/twinkle-red.png"); }
}

/* ── the signed-in lobby's promotions: only beside the column (the cards fill it) ── */
.sky-twinkles--lobby .sky-twinkle:nth-child(1) { left: -3%;  top: 20%; --d: 7.5s;  --delay: -2s; }
.sky-twinkles--lobby .sky-twinkle:nth-child(2) { left: -9%;  top: 62%; --d: 10s;   --delay: -6s; }
.sky-twinkles--lobby .sky-twinkle:nth-child(3) { left: -17%; top: 30%; --d: 8.5s;  --delay: -4s; }
.sky-twinkles--lobby .sky-twinkle:nth-child(4) { left: -24%; top: 72%; --d: 11s;   --delay: -8.5s; }
.sky-twinkles--lobby .sky-twinkle:nth-child(5) { left: 103%; top: 48%; --d: 9s;    --delay: -1s; }
.sky-twinkles--lobby .sky-twinkle:nth-child(6) { left: 110%; top: 14%; --d: 7s;    --delay: -5s; }
.sky-twinkles--lobby .sky-twinkle:nth-child(7) { left: 118%; top: 64%; --d: 10.5s; --delay: -3s; }
.sky-twinkles--lobby .sky-twinkle:nth-child(8) { left: 125%; top: 34%; --d: 8s;    --delay: -7.5s; }
.sky-twinkles--lobby .sky-twinkle:nth-child(n + 9) { display: none; }
@media (max-width: 768px) {
  .sky-twinkles--lobby .sky-twinkle:nth-child(n + 3) { display: none; }
}