/* extracted from index.html */
:root {
      --vomit-purple: #6b0f9c;
      --vomit-green: #39ff14;
      --bile: #7fff00;
      --bruise: #4a0080;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
      color: yellow;
      background:
        repeating-linear-gradient(
          45deg,
          var(--vomit-purple) 0px,
          var(--vomit-purple) 28px,
          var(--vomit-green) 28px,
          var(--vomit-green) 56px
        ),
        radial-gradient(circle at 20% 30%, #ff00ff 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, #00ff00 0%, transparent 45%);
      background-blend-mode: multiply, screen, screen;
      text-align: center;
      padding: 20px 12px 60px;
    }
    h1 {
      font-size: clamp(2.2rem, 8vw, 4.5rem);
      color: #ffff00;
      text-shadow:
        4px 4px 0 #ff00ff,
        -3px -2px 0 #00ff00,
        0 0 18px #000;
      letter-spacing: 2px;
      margin: 10px 0 6px;
      transform: rotate(-2deg);
      animation: wobble 1.4s ease-in-out infinite alternate;
    }
    @keyframes wobble {
      from { transform: rotate(-3deg) scale(1); }
      to { transform: rotate(2.5deg) scale(1.04); }
    }
    .subtitle {
      color: #00ff88;
      font-size: 1.2rem;
      text-shadow: 2px 2px 0 #000;
      margin-bottom: 18px;
    }
    .scooby-frame {
      display: inline-block;
      border: 8px ridge #ff00aa;
      outline: 6px dashed lime;
      background: #220044;
      padding: 4px;
      margin: 10px auto 24px;
      transform: rotate(3deg);
      box-shadow: 12px 12px 0 #00ff00, -8px -6px 0 #ff00ff;
      max-width: 95vw;
    }
    .scooby-frame img {
      display: block;
      width: min(700px, 92vw);
      height: 200px;
      object-fit: none;
      object-position: 30% 80%;
      image-rendering: pixelated;
      border: 3px solid red;
    }
    .caption {
      color: #ffcc00;
      font-size: 0.95rem;
      margin-top: 6px;
    }
    section {
      max-width: 720px;
      margin: 22px auto;
      padding: 18px 16px 22px;
      background: rgba(80, 0, 120, 0.85);
      border: 5px solid lime;
      outline: 3px dotted magenta;
      box-shadow: inset 0 0 40px #00ff0044, 0 0 0 4px #ffff00;
    }
    h2 {
      margin: 0 0 12px;
      color: #7fff00;
      text-shadow: 2px 2px #000;
      font-size: 1.8rem;
    }
    .counter-box {
      font-size: 2.4rem;
      color: #fff;
      text-shadow: 3px 3px 0 #ff0088;
      margin: 10px 0 16px;
    }
    #snack-count {
      color: #ffff00;
      font-size: 3rem;
    }
    button.snack-btn {
      font-family: "Comic Sans MS", "Comic Sans", cursive;
      font-size: 1.35rem;
      font-weight: bold;
      padding: 14px 22px;
      cursor: pointer;
      color: #220044;
      background: linear-gradient(180deg, #ffff00, #ffa500);
      border: 4px solid #ff00ff;
      border-radius: 0;
      box-shadow: 5px 5px 0 #00ff00;
      transform: rotate(-1deg);
    }
    button.snack-btn:hover {
      background: linear-gradient(180deg, #00ff00, #ffff00);
      transform: rotate(2deg) scale(1.05);
    }
    button.snack-btn:active {
      transform: translate(3px, 3px);
      box-shadow: 2px 2px 0 #00ff00;
    }
    button.snack-btn:disabled {
      opacity: 0.65;
      cursor: wait;
    }
    ul.members {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }
    ul.members li {
      background: #00ff00;
      color: #4a0080;
      font-weight: bold;
      font-size: 1.25rem;
      padding: 10px 16px;
      border: 3px dashed #ff00ff;
      transform: rotate(var(--r, 0deg));
      box-shadow: 3px 3px 0 #ffff00;
    }
    ul.members li:nth-child(1) { --r: -3deg; }
    ul.members li:nth-child(2) { --r: 2deg; background: #ffff00; }
    ul.members li:nth-child(3) { --r: -1deg; background: #ff66ff; color: #220044; }
    ul.members li:nth-child(4) { --r: 3deg; background: #00ffff; }
    ul.members li:nth-child(5) { --r: -2deg; background: #ffa500; }
    .jukebox {
      background: #1a0033;
      border: 6px double gold;
    }
    .jukebox .marquee {
      overflow: hidden;
      white-space: nowrap;
      background: #000;
      color: #0f0;
      border: 2px solid #0f0;
      padding: 6px;
      margin-bottom: 12px;
      font-family: monospace;
    }
    .jukebox .marquee span {
      display: inline-block;
      padding-left: 100%;
      animation: scroll 12s linear infinite;
    }
    @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-100%); }
    }
    audio {
      width: min(100%, 480px);
      margin-top: 8px;
    }
    .jukebox-btns {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .jukebox-btns button {
      font-family: "Comic Sans MS", "Comic Sans", cursive;
      font-size: 1rem;
      padding: 8px 14px;
      background: #ff00ff;
      color: yellow;
      border: 3px solid lime;
      cursor: pointer;
    }
    footer {
      margin-top: 30px;
      color: #ccffcc;
      font-size: 0.9rem;
      text-shadow: 1px 1px #000;
    }
    .blink {
      animation: blink 0.8s step-start infinite;
    }
    @keyframes blink {
      50% { opacity: 0; }
    }