@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&display=swap');

:root {
  --ink: #1B1446;          /* stage */
  --ink-2: #251C5C;        /* raised surfaces */
  --ink-3: #33287A;        /* borders, tracks */
  --cream: #FFF6E5;        /* text */
  --muted: #B9B0E6;        /* secondary text */
  --a: #FFC93C;            /* option A: sunflower */
  --b: #FF4F8B;            /* option B: bubblegum */
  --c: #2DD4BF;            /* option C: mint */
  --d: #9D8CFF;            /* option D: lilac */
  --right: #3EE07F;
  --wrong: #FF5A4E;
  --font: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ink); color: var(--cream); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--a); outline-offset: 3px; }

.logo { font-weight: 800; font-stretch: 78%; letter-spacing: -0.02em; line-height: 1; display: inline-flex; align-items: baseline; }
.logo .bang { color: var(--b); display: inline-block; transform: rotate(12deg) translateY(-0.02em); margin-left: 0.02em; }

/* rubber stamp */
.stamp {
  font-weight: 800; font-stretch: 75%; letter-spacing: 0.02em; color: var(--wrong);
  border: 0.09em solid currentColor; border-radius: 0.18em; padding: 0.02em 0.22em 0.06em;
  transform: rotate(-11deg); display: inline-block; line-height: 1;
  background: rgba(27, 20, 70, 0.55);
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.82) 61%, #000 75%);
}
.stamp.slam { animation: slam .42s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes slam {
  0% { transform: rotate(-11deg) scale(2.6); opacity: 0; }
  60% { transform: rotate(-11deg) scale(.92); opacity: 1; }
  100% { transform: rotate(-11deg) scale(1); opacity: 1; }
}
.hearts { display: inline-flex; gap: .18em; }
.heart { width: 1em; height: 1em; display: inline-block; }
.heart path { fill: var(--b); transition: fill .3s; }
.heart.lost path { fill: var(--ink-3); }
.heart.breaking { animation: crack .6s ease both; }
@keyframes crack { 0%{transform:scale(1)} 30%{transform:scale(1.4) rotate(-8deg)} 60%{transform:scale(.8) rotate(6deg)} 100%{transform:scale(1)} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}