@layer reset {
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  turbo-frame {
    display: contents;
  }

  body {
    font-family: var(--font-retro);
    background:
      radial-gradient(1px 1px at 10% 20%, oklch(90% 0 0 / 0.7), transparent),
      radial-gradient(1px 1px at 40% 70%, oklch(90% 0 0 / 0.5), transparent),
      radial-gradient(1.5px 1.5px at 70% 15%, oklch(var(--lch-yellow) / 0.6), transparent),
      radial-gradient(1px 1px at 85% 55%, oklch(90% 0 0 / 0.6), transparent),
      radial-gradient(1px 1px at 25% 90%, oklch(var(--lch-cyan) / 0.4), transparent),
      radial-gradient(1px 1px at 55% 40%, oklch(90% 0 0 / 0.5), transparent),
      radial-gradient(1.5px 1.5px at 92% 80%, oklch(var(--lch-hot-pink) / 0.4), transparent),
      var(--color-bg);
    background-size: 200px 200px;
    color: var(--color-text);
    margin: 0;
    display: flex;
    justify-content: center;
    height: 100dvh;
    height: -webkit-fill-available;
    padding: var(--block-space);
    overflow: hidden;
  }
}

@layer components {
  .page {
    max-width: 36rem;
    width: 100%;
    max-height: calc(100dvh - var(--block-space) * 2 - var(--player-height, 0px));
    padding: calc(var(--block-space) * 1.5);
    text-align: center;
    background: var(--color-panel);
    border: 3px solid var(--color-panel-border);
    border-radius: 0;
    box-shadow:
      0 0 20px oklch(65% 0.3 350 / 0.3),
      inset 0 0 30px oklch(15% 0.08 260 / 0.5);
    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: oklch(65% 0.3 350 / 0.4) transparent;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: oklch(65% 0.3 350 / 0.4);
      border-radius: 99px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: oklch(65% 0.3 350 / 0.7);
    }
  }

  .page h1 {
    font-size: clamp(1.4rem, 6vw, 2.5rem);
    line-height: 1.2;
    color: oklch(var(--lch-hot-pink));
    text-shadow:
      0 0 10px oklch(65% 0.3 350 / 0.8),
      0 0 20px oklch(65% 0.3 350 / 0.5),
      0 0 40px oklch(65% 0.3 350 / 0.3),
      2px 2px 0 oklch(10% 0 0);
    margin-block-end: calc(var(--block-space) * 0.5);
  }

  .subtitle {
    color: oklch(var(--lch-cyan));
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    margin-block-end: calc(var(--block-space) * 1.5);
    animation: blink 1.2s step-end infinite;
  }

  .marquee-container {
    overflow: hidden;
    background: oklch(var(--lch-hot-pink));
    color: oklch(var(--lch-yellow));
    padding: 0.4em 0;
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
    font-weight: 700;
    margin-block-end: calc(var(--block-space) * 1.5);
    border-block: 2px solid oklch(var(--lch-yellow));
  }

  .marquee-text {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 12s linear infinite;
    padding-inline-start: 100%;
  }

  .shut-up-counter {
    background: oklch(5% 0 0);
    border: 2px inset oklch(40% 0 0);
    padding: 0.4em 0.75em;
    margin-block-end: calc(var(--block-space));
    font-size: 0.85rem;
    color: oklch(var(--lch-lime));
  }

  .counter-number {
    font-family: var(--font-mono);
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 700;
    display: block;
    letter-spacing: 0.15em;
    text-shadow: 0 0 8px oklch(var(--lch-lime));
    color: oklch(var(--lch-lime));
  }

  .counter-label {
    font-size: 0.85rem;
    color: oklch(60% 0.05 135);
  }

  .notice {
    color: oklch(var(--lch-lime));
    font-weight: 700;
    font-size: 1.1rem;
    padding: var(--block-space);
    margin-block-end: calc(var(--block-space) * 1.5);
    border: 2px dashed oklch(var(--lch-lime));
    background: oklch(5% 0 0);
    animation: blink 1s step-end 3;
  }

  .alert {
    color: oklch(var(--lch-yellow));
    font-weight: 700;
    font-size: 1.1rem;
    padding: var(--block-space);
    margin-block-end: calc(var(--block-space) * 1.5);
    border: 2px dashed oklch(var(--lch-yellow));
    background: oklch(5% 0 0);
  }

  .message-form {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    margin-block-end: calc(var(--block-space) * 1.5);
    padding-inline: calc(var(--block-space) * 0.5);
  }

  .message-input {
    font-family: var(--font-retro);
    font-size: max(16px, 1.125rem);
    padding: 0.75em 1em;
    border: 2px inset oklch(70% 0 0);
    border-radius: 0;
    background: var(--color-input-bg);
    color: var(--color-input-text);
    text-align: center;
    outline: none;
    width: 100%;
    -webkit-appearance: none;

    &:focus {
      border-style: solid;
      border-color: oklch(var(--lch-cyan));
    }
  }

  .btn {
    font-family: var(--font-retro);
    font-size: max(16px, 1rem);
    font-weight: 700;
    padding: 0.75em 1.5em;
    border: 3px outset oklch(65% 0 0);
    border-radius: 0;
    background: linear-gradient(
      oklch(75% 0 0),
      oklch(55% 0 0)
    );
    color: oklch(10% 0 0);
    cursor: pointer;
    width: 100%;
    -webkit-appearance: none;
    touch-action: manipulation;

    @media (any-hover: hover) {
      &:hover {
        background: linear-gradient(
          oklch(80% 0 0),
          oklch(60% 0 0)
        );
      }
    }

    &:active {
      border-style: inset;
      background: linear-gradient(
        oklch(50% 0 0),
        oklch(65% 0 0)
      );
    }

    &[disabled] {
      opacity: 0.5;
      cursor: wait;
      border-style: inset;
    }
  }

  .gif-container {
    margin-block-end: calc(var(--block-space) * 1.5);
    border: 3px dashed oklch(var(--lch-hot-pink));
    padding: calc(var(--block-space) * 0.5);
    background: oklch(10% 0.02 260);
  }

  .gif {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .name-dialog {
    font-family: var(--font-retro);
    background: linear-gradient(oklch(28% 0.04 260), oklch(18% 0.04 260));
    border: 3px solid oklch(var(--lch-hot-pink));
    border-radius: 12px;
    color: oklch(var(--lch-yellow));
    padding: calc(var(--block-space) * 2) calc(var(--block-space) * 1.5);
    text-align: center;
    max-width: 24rem;
    width: calc(100vw - var(--block-space) * 2);
    margin: auto;
    box-shadow:
      0 0 30px oklch(65% 0.3 350 / 0.4),
      0 4px 20px oklch(0% 0 0 / 0.5);

    &::backdrop {
      background: oklch(0% 0 0 / 0.75);
      backdrop-filter: blur(4px);
    }

    & h2 {
      color: oklch(var(--lch-lime));
      font-size: clamp(1.25rem, 4vw, 1.5rem);
      text-shadow: 0 0 10px oklch(85% 0.3 135 / 0.6);
      margin-block-end: calc(var(--block-space) * 0.5);
    }

    & p {
      color: oklch(var(--lch-cyan));
      margin-block-end: var(--block-space);
    }
  }

  .name-form {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .success-page {
    position: relative;
    overflow-x: hidden;
  }

  .email-preview {
    text-align: left;
    margin-block-end: calc(var(--block-space) * 1.5);
    border: 1px solid oklch(30% 0.02 260);
    border-radius: 4px;
    overflow: hidden;
  }

  .email-preview-header {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.8rem;
    padding: 0.35em 0.75em;
    background: oklch(12% 0.01 260);
    border-bottom: 1px solid oklch(25% 0.02 260);
    color: oklch(65% 0 0);
  }

  .email-preview-label {
    font-weight: 600;
    color: oklch(50% 0 0);
  }

  .email-preview-body {
    position: relative;
    background: oklch(15% 0.04 260);
    border: 2px solid oklch(65% 0.3 350);
    padding: 1.5em;
    text-align: center;
    font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Marker Felt", Arial Rounded MT Bold, Helvetica Rounded, sans-serif;
    overflow: hidden;
  }

  .email-preview-greeting,
  .email-preview-message,
  .email-preview-birthday,
  .email-preview-sign-off {
    position: relative;
  }

  .email-preview-greeting {
    color: oklch(90% 0.15 95);
    font-size: 1rem;
    margin-block-end: 0.75em;
  }

  .email-preview-message {
    color: oklch(65% 0.3 350);
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    font-weight: 700;
    text-shadow: 0 0 10px oklch(65% 0.3 350 / 0.5);
    margin-block-end: 0.75em;
  }

  .email-preview-hearts {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .neon-heart {
    position: absolute;
  }

  .email-preview-birthday {
    color: oklch(var(--lch-cyan));
    font-size: 0.85rem;
    font-style: italic;
    margin-block-end: 1em;
  }

  .email-preview-sign-off {
    color: oklch(78% 0.15 200);
    font-size: 1rem;
  }

  .birthday-message {
    color: oklch(var(--lch-hot-pink));
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    font-weight: 700;
    text-shadow: 0 0 10px oklch(65% 0.3 350 / 0.5);
    margin-block-end: calc(var(--block-space) * 0.5);
  }

  .signed-by {
    color: oklch(var(--lch-cyan));
    font-style: italic;
    margin-block-end: calc(var(--block-space) * 1.5);
  }

  .confetti-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .confetti-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    top: -10px;
    animation: confetti-fall 3s ease-in forwards;
  }

  .confetti-particle--0 { left: 5%; background: oklch(var(--lch-hot-pink)); animation-delay: 0s; }
  .confetti-particle--1 { left: 12%; background: oklch(var(--lch-yellow)); animation-delay: 0.2s; width: 6px; height: 10px; }
  .confetti-particle--2 { left: 20%; background: oklch(var(--lch-lime)); animation-delay: 0.4s; }
  .confetti-particle--3 { left: 28%; background: oklch(var(--lch-cyan)); animation-delay: 0.1s; width: 10px; height: 6px; }
  .confetti-particle--4 { left: 35%; background: oklch(var(--lch-hot-pink)); animation-delay: 0.6s; }
  .confetti-particle--5 { left: 42%; background: oklch(var(--lch-yellow)); animation-delay: 0.3s; width: 6px; height: 10px; }
  .confetti-particle--6 { left: 50%; background: oklch(var(--lch-lime)); animation-delay: 0.8s; }
  .confetti-particle--7 { left: 58%; background: oklch(var(--lch-cyan)); animation-delay: 0.15s; }
  .confetti-particle--8 { left: 65%; background: oklch(var(--lch-hot-pink)); animation-delay: 0.5s; width: 10px; height: 6px; }
  .confetti-particle--9 { left: 72%; background: oklch(var(--lch-yellow)); animation-delay: 0.7s; }
  .confetti-particle--10 { left: 78%; background: oklch(var(--lch-lime)); animation-delay: 0.25s; }
  .confetti-particle--11 { left: 84%; background: oklch(var(--lch-cyan)); animation-delay: 0.9s; width: 6px; height: 10px; }
  .confetti-particle--12 { left: 90%; background: oklch(var(--lch-hot-pink)); animation-delay: 0.35s; }
  .confetti-particle--13 { left: 95%; background: oklch(var(--lch-yellow)); animation-delay: 0.55s; }
  .confetti-particle--14 { left: 15%; background: oklch(var(--lch-lime)); animation-delay: 0.45s; width: 10px; height: 6px; }

  .counter-number--pop {
    animation: counter-pop 0.6s ease-out;
  }

  .leaderboard {
    margin-block-end: calc(var(--block-space) * 1.5);
    padding: 0.75em 1em;
    border: 1px dashed oklch(78% 0.15 200 / 0.4);
  }

  .leaderboard-label {
    color: oklch(60% 0.05 200);
    font-size: 0.8rem;
    display: block;
    margin-block-end: 0.5em;
    text-align: center;
  }

  .leaderboard-list {
    list-style: none;
    counter-reset: rank;
    max-height: 10rem;
    overflow-y: auto;
    padding-right: 0.5em;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: oklch(var(--lch-lime) / 0.4);
      border-radius: 99px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: oklch(var(--lch-lime) / 0.7);
    }

    scrollbar-width: thin;
    scrollbar-color: oklch(var(--lch-lime) / 0.4) transparent;
  }

  .leaderboard-list li {
    counter-increment: rank;
    display: flex;
    align-items: center;
    padding: 0.3em 0;
    border-bottom: 1px solid oklch(25% 0.02 260);
    font-size: 0.85rem;

    &::before {
      content: counter(rank) ".";
      color: oklch(var(--lch-yellow));
      font-weight: 700;
      min-width: 1.5em;
    }

    &:last-child {
      border-bottom: none;
    }

    &:first-child .leaderboard-name {
      color: oklch(var(--lch-hot-pink));
    }
  }

  .leaderboard-name {
    color: oklch(var(--lch-cyan));
    flex: 1;
  }

  .leaderboard-time {
    color: oklch(50% 0 0);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    white-space: nowrap;
  }

  /* Escalation levels */
  .escalation-big .gif-container {
    border-width: 5px;
  }

  .escalation-shake {
    animation: shake 0.6s ease-in-out 2;
  }

  .escalation-shake .gif-container {
    border-width: 5px;
  }

  .escalation-chaos {
    animation: shake 0.8s ease-in-out infinite;
    background-image: var(--chaos-gif);
    background-size: cover;
    background-blend-mode: overlay;
  }

  /* Easter eggs */
  .easter-egg {
    margin-block-end: calc(var(--block-space) * 1.5);
    padding: 1em;
    border: 2px solid;
    font-size: 1.1rem;
  }

  .easter-egg--love {
    border-color: oklch(65% 0.3 350);
    color: oklch(var(--lch-hot-pink));
    animation: pulse 2s ease-in-out infinite;
  }

  .easter-egg--please {
    border-color: oklch(var(--lch-cyan));
    color: oklch(var(--lch-cyan));
  }

  .easter-egg--brian {
    border-color: oklch(var(--lch-yellow));
    color: oklch(var(--lch-yellow));
  }

  .easter-egg--no {
    border-color: oklch(var(--lch-lime));
    color: oklch(var(--lch-lime));
    font-size: 1.5rem;
    font-weight: 700;
  }

  .hint {
    color: oklch(var(--lch-yellow));
    font-size: 0.9rem;
    font-style: italic;
    margin-block-end: calc(var(--block-space) * 1.5);
    opacity: 0.8;
  }

  .share-section {
    margin-block: calc(var(--block-space) * 1.5);
    padding: 1em;
    border: 2px dashed oklch(var(--lch-cyan) / 0.5);
  }

  .share-prompt {
    color: oklch(var(--lch-cyan));
    font-size: 0.95rem;
    margin-block-end: var(--block-space);
  }

  .retro-footer {
    color: oklch(50% 0.02 260);
    font-size: 0.75rem;
    padding-block-start: var(--block-space);
    border-block-start: 1px solid oklch(30% 0.02 260);
  }

  .under-construction {
    animation: rainbow 3s linear infinite;
    font-weight: 700;
    margin-block-end: 0.3em;
  }

  .best-viewed {
    font-style: italic;
  }
}