:root {
      --bg: #0b0c10;
      --fg: #e8eaed;
      --muted: #b0b6be;
      --card: #111317;
      --ring: #2d66f6;
    }

    @media (prefers-color-scheme: light) {
      :root { --bg: #f7f7f8; --fg: #0d0f12; --muted: #4b5563; --card: #ffffff; }
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: radial-gradient(1200px 800px at 50% -10%, rgba(45, 102, 246, 0.15), transparent), var(--bg);
      color: var(--fg);
      display: grid;
      grid-template-rows: 1fr auto;
      min-height: 100svh;
      padding: 0;
    }

    .content {
      place-self: center;
      text-align: center;
      max-width: 680px;
      width: 90%;
    }

    .card {
      background: color-mix(in oklab, var(--card) 92%, transparent);
      /*border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);*/
      border: 2px solid #00a4ff;
      border-radius: 24px;
      padding: 50px 0px;
      box-shadow: 0 10px 40px rgba(0,0,0,.25);
      text-align: center;
    }

    .logo {
      display: block;
      width: min(400px, 60vw);
      max-width: 100%;
      margin: 0 auto 12px auto;
      /*aspect-ratio: 1 / 1;*/
      object-fit: contain;
      /*filter: drop-shadow(0 6px 20px rgba(0,0,0,.25));*/
    }

    #instruct {
      position: absolute;
      text-align: center;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
    }

    p.tagline, #instruct {
      margin: 0 auto;
      max-width: 46ch;
      font-size: clamp(1.00rem, 0.5vw + 0.85rem, 1.05rem);
      font-family: "Exo 2", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--muted);
    }

    p.tagline span {
      font-weight: bold;
      letter-spacing: 2px;
    }

    p.location, p.description {
      margin-top: auto;
      font-size: 0.95rem;
      color: var(--muted);
      text-align: center;
    }

    p.location {
      pointer-events: none;
    }

    p.description {
      position: relative;
      transform: translateY(30px);
      z-index: 5;
    }

    p.description span {
      font-weight: bold;
      color: #00a4ff;
    }

    a { color: var(--fg); text-underline-offset: 3px; }
    a:focus-visible, button:focus-visible, .card:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 4px;
      border-radius: 16px;
    }

    /* Mobile override: logo takes 75vw */
    @media (max-width: 768px) {
      .logo {
        width: 75vw;
      }
      p.location {
        font-size: 0.9rem;
      }
      .card {
        padding: 30px 0px;
      }
      p.tagline {
        font-size: 0.9rem;
      }
      #instruct {
        font-size: 0.75rem;
      }
    }

    #scoreboard, #highscore, #separator {
      display: none;
      color: #333;
      text-align: center;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .score {
      font-weight: bold;
    }

    #separator {
      margin: 0px 40px;
    }

    #scoreboard.score-pop {
      animation: popFade 0.5s ease forwards;
    }

    #scoreboard.score-reset {
  animation: scoreFail 0.5s ease;
}

    @keyframes popFade {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      30% {
        transform: scale(1.4);
        opacity: 1;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes scoreFail {
  0%   { transform: scale(1); color: white; }
  20%  { transform: scale(1.2); color: #ff3900; }
  100% { transform: scale(1); color: white; }
}

    #playgame {
      cursor: pointer;
    }

    footer {
      position: relative;
  text-align: center;
  padding: 8px;
  background-color: #333;
  z-index: 5;
  pointer-events: none;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-links img {
  width: 32px;
  height: 32px;
  filter: invert(36%) sepia(98%) saturate(1500%) hue-rotate(180deg);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-links img:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.social-links a {
  pointer-events: auto;
}

.footer-text {
  position: absolute;
  right: 8px;
  bottom: 7px;
  color: #f7f7f8;
  font-size: 0.8em;
}

    canvas {
      width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
      z-index: 2;
    }