/*!
 * joycelights.css
 * Christmas-lights alphabet wall, inspired by Joyce Byers' wall in Stranger Things S1.
 *
 * Version: 1.0.0
 * Author: Go Boldly Forward (https://goboldlyforward.com/)
 * Homepage: https://goboldlyforward.github.io/joycelights/
 * License: MIT
 */

.joycelights {
  background-color: var(--joycelights-wallpaper-base, #dec59b);
  background-image: var(--joycelights-wallpaper-image, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g transform='translate(28,32) rotate(-15)' opacity='0.7'><ellipse cx='0' cy='0' rx='5' ry='8' fill='%23a06f4e'/><ellipse cx='-6.5' cy='-3' rx='4' ry='6.5' fill='%238a5e3e' transform='rotate(-40 -6.5 -3)'/><ellipse cx='6.5' cy='-1.5' rx='4' ry='6.5' fill='%23b8825e' transform='rotate(35 6.5 -1.5)'/><ellipse cx='-4' cy='10' rx='3' ry='5.5' fill='%237a8c5e' transform='rotate(-60 -4 10)'/><ellipse cx='5.5' cy='11.5' rx='2.7' ry='4.5' fill='%237a8c5e' transform='rotate(50 5.5 11.5)'/><circle cx='0' cy='0' r='2' fill='%235e4028'/></g><g transform='translate(115,108)' opacity='0.65'><circle cx='0' cy='0' r='3.7' fill='%239c6048'/><circle cx='-5' cy='3.5' r='2.9' fill='%23a06f4e'/><ellipse cx='4.5' cy='-4.5' rx='2.4' ry='4.5' fill='%237a8c5e' transform='rotate(45 4.5 -4.5)'/></g><g transform='translate(95,48) rotate(20)' opacity='0.65'><ellipse cx='0' cy='0' rx='3.7' ry='5.6' fill='%23a06f4e'/><ellipse cx='-5' cy='3.3' rx='2.9' ry='4.8' fill='%23b8825e' transform='rotate(-30 -5 3.3)'/><ellipse cx='3.3' cy='6.3' rx='2.4' ry='4' fill='%237a8c5e' transform='rotate(60 3.3 6.3)'/></g><g transform='translate(48,108) rotate(45)' opacity='0.6'><ellipse cx='0' cy='0' rx='4' ry='6.5' fill='%238a5e3e'/><ellipse cx='5' cy='-1.5' rx='3.2' ry='5.6' fill='%23a06f4e' transform='rotate(30 5 -1.5)'/><ellipse cx='-3.3' cy='4.8' rx='2.4' ry='4' fill='%237a8c5e' transform='rotate(-60 -3.3 4.8)'/></g><g transform='translate(130,22) rotate(-30)' opacity='0.55'><line x1='0' y1='0' x2='13' y2='0' stroke='%237a8c5e' stroke-width='1.2'/><ellipse cx='3.7' cy='-2.5' rx='2.4' ry='4' fill='%237a8c5e' transform='rotate(-30 3.7 -2.5)'/><ellipse cx='8' cy='1.8' rx='2.4' ry='4' fill='%237a8c5e' transform='rotate(60 8 1.8)'/><circle cx='13' cy='-1.5' r='2.4' fill='%239c6048'/></g><g transform='translate(15,118) rotate(15)' opacity='0.6'><ellipse cx='0' cy='0' rx='3.7' ry='6' fill='%23a06f4e'/><ellipse cx='4.5' cy='3' rx='3' ry='4.8' fill='%238a5e3e' transform='rotate(40 4.5 3)'/><ellipse cx='-3.7' cy='4.5' rx='2.4' ry='4' fill='%237a8c5e' transform='rotate(-50 -3.7 4.5)'/></g><g transform='translate(78,138) rotate(-10)' opacity='0.55'><circle cx='0' cy='0' r='3' fill='%239c6048'/><circle cx='4.5' cy='-2.3' r='2.3' fill='%23a06f4e'/><ellipse cx='-3.7' cy='3' rx='2.3' ry='3.7' fill='%237a8c5e' transform='rotate(-45 -3.7 3)'/></g></svg>"));
  background-repeat: repeat;
  background-size: 160px 160px;
  padding: 1.8rem 1.5rem 2.5rem;
  border-radius: var(--joycelights-radius, 4px);
  position: relative;
  box-shadow: var(--joycelights-shadow,
    inset 0 0 60px rgba(60, 30, 10, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.15),
    0 6px 30px rgba(0, 0, 0, 0.6));
  overflow: hidden;
  font-family: var(--joycelights-letter-font, 'Permanent Marker', cursive, sans-serif);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.joycelights--no-wallpaper {
  background-image: none;
  background-color: transparent;
  box-shadow: none;
}

.joycelights--flat {
  background-image: none;
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
.joycelights--flat::before { display: none; }

.joycelights::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--joycelights-vignette,
    radial-gradient(ellipse at 50% 40%,
      transparent 0%, transparent 55%, rgba(40, 20, 5, 0.28) 100%));
  pointer-events: none;
  z-index: 0;
  transition: background 0.4s ease;
}

.joycelights--no-wallpaper::before { display: none; }

.joycelights__row {
  display: grid;
  gap: 0.25rem;
  position: relative;
  padding: 2.5rem 0.5rem 1.6rem;
  z-index: 1;
}

/* Explicit width bypasses the SVG's implicit viewBox aspect-ratio, which would
   otherwise truncate the wire to ~194px regardless of row width. */
.joycelights__wire {
  position: absolute;
  top: 1.9rem;
  left: 0.5rem;
  width: calc(100% - 1rem);
  height: 1.7rem;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.joycelights__wire path {
  stroke: var(--joycelights-wire, #1a2a14);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45));
  transition: stroke 0.4s ease;
}

.joycelights__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  position: relative;
  z-index: 2;
}

.joycelights__bulb {
  width: 22px;
  height: 30px;
  border-radius: 50% 50% 42% 42% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 30% 28%,
    #5a544c 0%,
    #2a2520 70%,
    #1a1612 100%);
  position: relative;
  z-index: 3;
  transition: box-shadow 0.15s ease-out, background 0.15s ease-out;
}

.joycelights__bulb::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 8px;
  background: linear-gradient(to bottom,
    #3a352e 0%, #2a2520 30%, #1f1a15 50%, #2a2520 70%, #3a352e 100%);
  border-radius: 2px 2px 1px 1px;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.6);
  z-index: 3;
}

.joycelights__bulb::after {
  content: '';
  position: absolute;
  top: 16%;
  left: 22%;
  width: 5px;
  height: 9px;
  background: radial-gradient(ellipse,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.joycelights__bulb--lit-red,
.joycelights__bulb--lit-green,
.joycelights__bulb--lit-blue,
.joycelights__bulb--lit-yellow,
.joycelights__bulb--lit-orange,
.joycelights__bulb--lit-white {
  animation: joycelights-flicker 0.35s infinite alternate;
}

.joycelights__bulb--lit-red {
  background: radial-gradient(ellipse at 30% 28%, #ffb0b0 0%, #ff3030 40%, #c81818 100%);
  box-shadow: 0 0 16px 4px #ff2020, 0 0 36px 8px #ff2020, 0 0 70px 14px rgba(255, 32, 32, 0.5);
}
.joycelights__bulb--lit-green {
  background: radial-gradient(ellipse at 30% 28%, #c0ffc0 0%, #30e030 40%, #18a018 100%);
  box-shadow: 0 0 16px 4px #30e030, 0 0 36px 8px #30e030, 0 0 70px 14px rgba(48, 224, 48, 0.5);
}
.joycelights__bulb--lit-blue {
  background: radial-gradient(ellipse at 30% 28%, #b0c8ff 0%, #3060ff 40%, #1838c0 100%);
  box-shadow: 0 0 16px 4px #4070ff, 0 0 36px 8px #4070ff, 0 0 70px 14px rgba(64, 112, 255, 0.5);
}
.joycelights__bulb--lit-yellow {
  background: radial-gradient(ellipse at 30% 28%, #ffffd0 0%, #ffe830 40%, #c0a818 100%);
  box-shadow: 0 0 16px 4px #ffe830, 0 0 36px 8px #ffe830, 0 0 70px 14px rgba(255, 232, 48, 0.5);
}
.joycelights__bulb--lit-orange {
  background: radial-gradient(ellipse at 30% 28%, #ffd8a0 0%, #ff8830 40%, #c05010 100%);
  box-shadow: 0 0 16px 4px #ff8830, 0 0 36px 8px #ff8830, 0 0 70px 14px rgba(255, 136, 48, 0.5);
}
.joycelights__bulb--lit-white {
  background: radial-gradient(ellipse at 30% 28%, #ffffff 0%, #f0f4ff 40%, #c8d0e0 100%);
  box-shadow:
    0 0 14px 3px #ffffff,
    0 0 30px 6px rgba(240, 244, 255, 0.8),
    0 0 60px 12px rgba(210, 220, 240, 0.5);
}

@keyframes joycelights-flicker {
  0%   { filter: brightness(1);    }
  40%  { filter: brightness(1.15); }
  45%  { filter: brightness(0.9);  }
  55%  { filter: brightness(1.2);  }
  100% { filter: brightness(1.05); }
}

.joycelights__letter {
  font-family: var(--joycelights-letter-font, 'Permanent Marker', cursive, sans-serif);
  font-size: clamp(2.2rem, 5.2vw, 3.4rem);
  color: var(--joycelights-paint, #1a1612);
  text-shadow: var(--joycelights-letter-shadow,
    0 1px 0 rgba(0, 0, 0, 0.5),
    1px 0 0 rgba(0, 0, 0, 0.3));
  line-height: 0.9;
  user-select: none;
  position: relative;
  filter: contrast(1.15);
  transition: color 0.4s ease;
}

.joycelights__drip {
  position: absolute;
  top: 92%;
  background: linear-gradient(to bottom,
    var(--joycelights-paint, #1a1612) 0%,
    var(--joycelights-paint, #1a1612) 65%,
    rgba(26, 22, 18, 0.7) 88%,
    rgba(26, 22, 18, 0) 100%);
  border-radius: 0 0 50% 50% / 0 0 40% 40%;
  pointer-events: none;
  z-index: 4;
}

.joycelights--no-drips .joycelights__drip { display: none; }

.joycelights--christmas {
  --joycelights-paint: #b91c1c;
  --joycelights-wallpaper-base: #fbf3e0;
  --joycelights-wallpaper-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g transform='translate(28,32) rotate(-15)' opacity='0.72'><ellipse cx='-7' cy='-3' rx='3.5' ry='7' fill='%231a6b35' transform='rotate(-40 -7 -3)'/><ellipse cx='7' cy='-1' rx='3.5' ry='7' fill='%231a7a3c' transform='rotate(35 7 -1)'/><ellipse cx='0' cy='-5' rx='3.5' ry='7' fill='%231a6b35'/><ellipse cx='-4' cy='10' rx='3' ry='6' fill='%231a7a3c' transform='rotate(-60 -4 10)'/><ellipse cx='5' cy='11' rx='3' ry='5.5' fill='%231a6b35' transform='rotate(50 5 11)'/><circle cx='0' cy='3' r='2.6' fill='%23c01818'/><circle cx='3' cy='5' r='1.8' fill='%23a01010'/><circle cx='-2' cy='5' r='1.8' fill='%23c01818'/></g><g transform='translate(115,108)' opacity='0.7'><circle cx='0' cy='0' r='3' fill='%23c01818'/><circle cx='-4' cy='3' r='2.4' fill='%23a01010'/><circle cx='4' cy='-2' r='1.6' fill='%23c01818'/><ellipse cx='4' cy='-5' rx='2.4' ry='5' fill='%231a6b35' transform='rotate(45 4 -5)'/><ellipse cx='-5' cy='-3' rx='2' ry='4' fill='%231a7a3c' transform='rotate(-30 -5 -3)'/></g><g transform='translate(95,48) rotate(20)' opacity='0.7'><ellipse cx='0' cy='-3' rx='3' ry='6' fill='%231a6b35'/><ellipse cx='-5' cy='2' rx='2.5' ry='5' fill='%231a7a3c' transform='rotate(-50 -5 2)'/><ellipse cx='4' cy='3' rx='2.5' ry='5' fill='%231a6b35' transform='rotate(60 4 3)'/><circle cx='0' cy='3' r='2.2' fill='%23c01818'/><circle cx='2' cy='5' r='1.6' fill='%23c01818'/></g><g transform='translate(132,22)' opacity='0.5'><line x1='-8' y1='0' x2='8' y2='0' stroke='%23a8c0d8' stroke-width='1' stroke-linecap='round'/><line x1='0' y1='-8' x2='0' y2='8' stroke='%23a8c0d8' stroke-width='1' stroke-linecap='round'/><line x1='-5.5' y1='-5.5' x2='5.5' y2='5.5' stroke='%23a8c0d8' stroke-width='1' stroke-linecap='round'/><line x1='-5.5' y1='5.5' x2='5.5' y2='-5.5' stroke='%23a8c0d8' stroke-width='1' stroke-linecap='round'/><circle cx='0' cy='0' r='1.4' fill='%23a8c0d8'/><circle cx='6' cy='0' r='1' fill='%23a8c0d8'/><circle cx='-6' cy='0' r='1' fill='%23a8c0d8'/><circle cx='0' cy='6' r='1' fill='%23a8c0d8'/><circle cx='0' cy='-6' r='1' fill='%23a8c0d8'/></g><g transform='translate(48,108) rotate(45)' opacity='0.7'><ellipse cx='0' cy='-3' rx='2.5' ry='5' fill='%231a6b35'/><ellipse cx='4' cy='1' rx='2.2' ry='4.5' fill='%231a7a3c' transform='rotate(30 4 1)'/><circle cx='0' cy='3' r='2' fill='%23c01818'/><circle cx='-2' cy='5' r='1.5' fill='%23a01010'/></g><g transform='translate(78,138) rotate(15)' opacity='0.55'><line x1='-5' y1='0' x2='5' y2='0' stroke='%23a8c0d8' stroke-width='0.7' stroke-linecap='round'/><line x1='0' y1='-5' x2='0' y2='5' stroke='%23a8c0d8' stroke-width='0.7' stroke-linecap='round'/><line x1='-3.5' y1='-3.5' x2='3.5' y2='3.5' stroke='%23a8c0d8' stroke-width='0.7' stroke-linecap='round'/><line x1='-3.5' y1='3.5' x2='3.5' y2='-3.5' stroke='%23a8c0d8' stroke-width='0.7' stroke-linecap='round'/><circle cx='0' cy='0' r='1' fill='%23a8c0d8'/></g><g transform='translate(15,118) rotate(15)' opacity='0.68'><ellipse cx='0' cy='-3' rx='3' ry='6' fill='%231a6b35'/><ellipse cx='4' cy='2' rx='2.5' ry='5' fill='%231a7a3c' transform='rotate(40 4 2)'/><circle cx='-2' cy='4' r='2' fill='%23c01818'/><circle cx='1' cy='5' r='1.5' fill='%23a01010'/></g></svg>");
  --joycelights-wire: #5a3a1a;
  --joycelights-letter-font: 'Mountains of Christmas', 'Permanent Marker', cursive;
  --joycelights-letter-shadow:
    0 1px 0 rgba(120, 20, 20, 0.25),
    0 0 4px rgba(185, 28, 28, 0.18);
  --joycelights-vignette: radial-gradient(
    ellipse at 50% 50%,
    transparent 0%,
    transparent 70%,
    rgba(40, 60, 30, 0.10) 100%);
  --joycelights-shadow:
    inset 0 0 50px rgba(180, 150, 80, 0.18),
    inset 0 0 0 1px rgba(140, 50, 30, 0.10),
    0 6px 30px rgba(80, 40, 20, 0.35);
}

.joycelights--july4 {
  --joycelights-paint: #1a3a7a;
  --joycelights-wallpaper-base: #f5e8c8;
  --joycelights-wallpaper-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g transform='translate(28,32) rotate(-12)' opacity='0.75'><polygon points='0,-9 2.64,-3.65 8.56,-2.78 4.28,1.39 5.29,7.28 0,4.5 -5.29,7.28 -4.28,1.39 -8.56,-2.78 -2.64,-3.65' fill='%23c01818'/></g><g transform='translate(115,108)' opacity='0.7'><polygon points='0,-7 2.05,-2.84 6.66,-2.16 3.33,1.08 4.11,5.66 0,3.5 -4.11,5.66 -3.33,1.08 -6.66,-2.16 -2.05,-2.84' fill='%231a3a7a'/><polygon points='8,5 9.47,7.93 12.85,8.42 10.42,10.79 10.99,14.13 8,12.5 5.01,14.13 5.58,10.79 3.15,8.42 6.53,7.93' fill='%231a3a7a' opacity='0.7'/></g><g transform='translate(95,48) rotate(20)' opacity='0.7'><circle cx='0' cy='0' r='1.5' fill='%23c01818'/><line x1='0' y1='0' x2='6' y2='0' stroke='%23c01818' stroke-width='0.8' stroke-linecap='round'/><line x1='0' y1='0' x2='-6' y2='0' stroke='%23c01818' stroke-width='0.8' stroke-linecap='round'/><line x1='0' y1='0' x2='0' y2='6' stroke='%23c01818' stroke-width='0.8' stroke-linecap='round'/><line x1='0' y1='0' x2='0' y2='-6' stroke='%23c01818' stroke-width='0.8' stroke-linecap='round'/><line x1='0' y1='0' x2='4.2' y2='4.2' stroke='%23c01818' stroke-width='0.8' stroke-linecap='round'/><line x1='0' y1='0' x2='-4.2' y2='4.2' stroke='%23c01818' stroke-width='0.8' stroke-linecap='round'/><line x1='0' y1='0' x2='4.2' y2='-4.2' stroke='%23c01818' stroke-width='0.8' stroke-linecap='round'/><line x1='0' y1='0' x2='-4.2' y2='-4.2' stroke='%23c01818' stroke-width='0.8' stroke-linecap='round'/><circle cx='6' cy='0' r='0.9' fill='%23c01818'/><circle cx='-6' cy='0' r='0.9' fill='%23c01818'/><circle cx='0' cy='6' r='0.9' fill='%23c01818'/><circle cx='0' cy='-6' r='0.9' fill='%23c01818'/></g><g transform='translate(48,108) rotate(15)' opacity='0.7'><polygon points='0,-8 2.35,-3.24 7.61,-2.47 3.8,1.24 4.7,6.47 0,4 -4.7,6.47 -3.8,1.24 -7.61,-2.47 -2.35,-3.24' fill='%231a3a7a'/></g><g transform='translate(132,22)' opacity='0.7'><polygon points='0,-5 1.47,-2.02 4.76,-1.55 2.38,0.78 2.94,4.05 0,2.5 -2.94,4.05 -2.38,0.78 -4.76,-1.55 -1.47,-2.02' fill='%23c08818'/></g><g transform='translate(78,138)' opacity='0.6'><circle cx='0' cy='0' r='1.2' fill='%231a3a7a'/><line x1='0' y1='0' x2='5' y2='0' stroke='%231a3a7a' stroke-width='0.7' stroke-linecap='round'/><line x1='0' y1='0' x2='-5' y2='0' stroke='%231a3a7a' stroke-width='0.7' stroke-linecap='round'/><line x1='0' y1='0' x2='0' y2='5' stroke='%231a3a7a' stroke-width='0.7' stroke-linecap='round'/><line x1='0' y1='0' x2='0' y2='-5' stroke='%231a3a7a' stroke-width='0.7' stroke-linecap='round'/><line x1='0' y1='0' x2='3.5' y2='3.5' stroke='%231a3a7a' stroke-width='0.7' stroke-linecap='round'/><line x1='0' y1='0' x2='-3.5' y2='3.5' stroke='%231a3a7a' stroke-width='0.7' stroke-linecap='round'/><line x1='0' y1='0' x2='3.5' y2='-3.5' stroke='%231a3a7a' stroke-width='0.7' stroke-linecap='round'/><line x1='0' y1='0' x2='-3.5' y2='-3.5' stroke='%231a3a7a' stroke-width='0.7' stroke-linecap='round'/></g><g transform='translate(15,118) rotate(-15)' opacity='0.72'><polygon points='0,-7 2.05,-2.84 6.66,-2.16 3.33,1.08 4.11,5.66 0,3.5 -4.11,5.66 -3.33,1.08 -6.66,-2.16 -2.05,-2.84' fill='%23c01818'/></g></svg>");
  --joycelights-wire: #a8893a;
  --joycelights-letter-font: 'Black Ops One', 'Permanent Marker', cursive;
  --joycelights-letter-shadow:
    0 1px 0 rgba(20, 30, 80, 0.3),
    0 0 4px rgba(26, 58, 122, 0.18);
  --joycelights-vignette: radial-gradient(
    ellipse at 50% 50%,
    transparent 0%,
    transparent 65%,
    rgba(80, 30, 30, 0.12) 100%);
  --joycelights-shadow:
    inset 0 0 50px rgba(180, 100, 80, 0.15),
    inset 0 0 0 1px rgba(80, 30, 30, 0.10),
    0 6px 30px rgba(80, 30, 30, 0.35);
}