:root {
  --ink: #15121d;
  --acid: #d8ff28;
  --pink: #ff4fac;
  --blue: #2e65ff;
  --paper: #fff8df;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--blue);
}

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", system-ui, sans-serif;
  font-weight: 800;
  background:
    radial-gradient(circle at 13% 16%, var(--acid) 0 8%, transparent 8.3%),
    radial-gradient(circle at 88% 10%, var(--pink) 0 13%, transparent 13.3%),
    radial-gradient(circle at 82% 78%, #ff9a32 0 12%, transparent 12.3%),
    radial-gradient(circle at 14% 87%, #9b42d8 0 14%, transparent 14.3%),
    var(--blue);
}

body::before {
  position: fixed;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.2;
  background-image: repeating-radial-gradient(circle at 0 0, #fff 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
}

.poster {
  position: relative;
  z-index: 0;
  display: grid;
  min-height: 100svh;
  padding: clamp(1rem, 3.5vh, 2rem) 1rem clamp(1.25rem, 4vh, 2.5rem);
  place-items: center;
  align-content: center;
  gap: clamp(0.55rem, 1.8vh, 1.25rem);
}

h1 {
  z-index: 4;
  margin: 0;
  color: var(--paper);
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  line-height: 0.78;
  letter-spacing: -0.07em;
  text-align: center;
  text-transform: lowercase;
  text-shadow: 0.09em 0.09em 0 var(--ink);
  transform: rotate(-3deg);
}

h1 span {
  display: inline-block;
  color: var(--acid);
  transform: translateX(0.15em) rotate(4deg);
}

.portrait {
  position: relative;
  z-index: 1;
  width: min(78vw, 29rem);
  isolation: isolate;
}

.portrait::before,
.portrait::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  pointer-events: none;
}

.portrait::before {
  inset: 3% -16% -12%;
  border: clamp(4px, 0.9vw, 7px) solid var(--ink);
  border-radius: 46% 51% 25% 28% / 25% 29% 18% 20%;
  background:
    linear-gradient(105deg, transparent 0 13%, #fff184 13.5% 18%, transparent 18.5% 25%, #f7b900 25.5% 33%, transparent 33.5% 64%, #fff184 64.5% 70%, transparent 70.5% 78%, #f3a800 78.5% 87%, transparent 87.5%),
    repeating-linear-gradient(97deg, #ffd629 0 9px, #ffe95d 9px 17px, #eaa600 17px 21px),
    #ffd629;
  box-shadow: 8px 10px 0 rgba(21, 18, 29, 0.72);
  transform: rotate(-2deg);
}

.portrait::after {
  top: 12%;
  right: -20%;
  bottom: -8%;
  left: -19%;
  border-radius: 40% 55% 25% 32% / 25% 28% 16% 18%;
  background:
    linear-gradient(90deg, transparent 0 13%, rgba(129, 73, 0, 0.3) 13.5% 15%, transparent 15.5% 23%, rgba(255, 248, 164, 0.75) 23.5% 25.5%, transparent 26% 72%, rgba(129, 73, 0, 0.3) 72.5% 74%, transparent 74.5% 84%, rgba(255, 248, 164, 0.75) 84.5% 86.5%, transparent 87%),
    repeating-linear-gradient(92deg, transparent 0 19px, rgba(126, 74, 0, 0.28) 20px 23px, transparent 24px 37px);
  transform: rotate(2deg);
}

.mood-label {
  position: absolute;
  z-index: 5;
  top: -15%;
  left: 50%;
  display: flex;
  width: 110%;
  min-height: 1.7em;
  padding: 0.28em 0.65em 0.22em;
  align-items: center;
  justify-content: center;
  border: clamp(2px, 0.5vw, 4px) solid var(--paper);
  color: var(--acid);
  font-size: clamp(1.36rem, 4.2vw, 2.5rem);
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--ink);
  box-shadow: 0.28em 0.3em 0 var(--pink);
  clip-path: polygon(2% 9%, 98% 0, 100% 82%, 4% 100%, 0 28%);
  transform: translateX(-50%) rotate(1.5deg);
  pointer-events: none;
}

.mood-label:empty {
  display: none;
}

.mood-label.is-long {
  font-size: clamp(1.2rem, 3.1vw, 1.84rem);
  letter-spacing: -0.04em;
}

.mood-letter {
  display: inline-block;
  min-width: 0.16em;
  transform-origin: 50% 100%;
  animation:
    mood-letter-roll 720ms cubic-bezier(0.2, 0.85, 0.22, 1.35) both,
    mood-letter-wobble 2.4s ease-in-out 760ms infinite alternate;
  animation-delay:
    calc(var(--letter-index) * 24ms),
    calc(760ms + var(--letter-index) * 45ms);
}

.mood-letter:nth-child(3n) {
  color: var(--paper);
}

.mood-letter:nth-child(5n) {
  color: var(--pink);
}

.mood-label.is-leaving .mood-letter {
  animation: mood-letter-exit 220ms ease-in forwards;
  animation-delay: calc(var(--letter-index) * 5ms);
}

.tiara {
  position: absolute;
  z-index: 3;
  top: -5%;
  left: 7%;
  width: 86%;
  height: 23%;
  pointer-events: none;
  filter: drop-shadow(3px 3px 0 var(--ink));
  transform: rotate(-1deg);
}

.tiara::before,
.tiara::after {
  position: absolute;
  display: block;
  content: "";
}

.tiara::before {
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 20%;
  border: clamp(2px, 0.6vw, 4px) solid var(--ink);
  border-radius: 45% 45% 32% 32% / 35% 35% 50% 50%;
  background: linear-gradient(180deg, #ffffff 0 20%, #aeb9c7 22% 45%, #f8ffff 47% 62%, #7c8796 64% 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.9);
}

.tiara::after {
  z-index: 1;
  inset: 0 3% 13%;
  clip-path: polygon(0 100%, 6% 18%, 27% 66%, 43% 0, 61% 66%, 84% 12%, 100% 100%);
  background:
    radial-gradient(circle at 43% 24%, #fff 0 4%, transparent 4.5%),
    radial-gradient(circle at 17% 55%, rgba(255, 255, 255, 0.95) 0 3%, transparent 3.5%),
    radial-gradient(circle at 78% 46%, #fff 0 3%, transparent 3.5%),
    linear-gradient(105deg, #6f7d91 0 13%, #fff 14% 28%, #a9b4c3 29% 43%, #fff 44% 58%, #778496 59% 76%, #f9ffff 77% 100%);
  filter: drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink));
}

.tiara span {
  position: absolute;
  z-index: 3;
  bottom: 6%;
  width: 11%;
  aspect-ratio: 1;
  border: clamp(1px, 0.35vw, 3px) solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.7);
}

.tiara span:nth-child(1) {
  left: 8%;
  background: #68e9ff;
}

.tiara span:nth-child(2) {
  left: 27%;
  background: #fc55ad;
}

.tiara span:nth-child(3) {
  left: 44.5%;
  background: var(--acid);
  transform: scale(1.2);
}

.tiara span:nth-child(4) {
  right: 27%;
  background: #ad79ff;
}

.tiara span:nth-child(5) {
  right: 8%;
  background: #ffad2d;
}

.face {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: clamp(4px, 1.05vw, 7px) solid var(--ink);
  border-radius: 49% 46% 48% 43% / 38% 43% 45% 49%;
  background: var(--pink);
  box-shadow: clamp(6px, 1.8vw, 13px) clamp(7px, 2vw, 15px) 0 var(--ink);
  transform: rotate(3deg);
}

.face::before,
.face::after {
  position: absolute;
  z-index: 0;
  display: block;
  border: 4px solid var(--ink);
  content: "";
}

.face::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 26%;
  border: 0;
  clip-path: polygon(0 0, 100% 0, 100% 39%, 91% 59%, 83% 33%, 73% 69%, 62% 35%, 52% 73%, 42% 38%, 31% 67%, 21% 31%, 11% 58%, 0 42%);
  background:
    linear-gradient(104deg, transparent 0 10%, rgba(255, 247, 160, 0.9) 10.5% 15%, transparent 15.5% 24%, rgba(208, 135, 0, 0.46) 24.5% 29%, transparent 29.5% 67%, rgba(255, 247, 160, 0.86) 67.5% 72%, transparent 72.5% 82%, rgba(208, 135, 0, 0.48) 82.5% 88%, transparent 88.5%),
    repeating-linear-gradient(96deg, #ffd629 0 10px, #ffe96c 10px 19px, #e8a200 19px 23px);
}

.face::after {
  width: 34%;
  height: 22%;
  bottom: -7%;
  left: -8%;
  border-radius: 42% 58% 52% 36%;
  background: var(--blue);
  transform: rotate(18deg);
}

.slot {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border: 0;
  background: var(--paper);
  filter: drop-shadow(5px 6px 0 var(--ink));
  isolation: isolate;
}

.slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 90ms ease-out, transform 90ms ease-out;
}

.slot--left-eye {
  top: 25%;
  left: 8%;
  width: 39%;
  height: 19%;
  clip-path: polygon(5% 23%, 89% 0, 100% 77%, 12% 100%);
  filter: drop-shadow(6px 6px 0 var(--acid));
  transform: rotate(-7deg);
}

.slot--right-eye {
  top: 22%;
  right: 8%;
  width: 39%;
  height: 19%;
  clip-path: polygon(10% 0, 100% 15%, 90% 100%, 0 74%);
  filter: drop-shadow(6px 6px 0 var(--blue));
  transform: rotate(7deg);
}

.slot--left-eye,
.slot--right-eye {
  background: var(--pink);
}

.slot--left-eye img[src$=".png"],
.slot--right-eye img[src$=".png"] {
  transform: scale(0.84);
}

.slot--nose {
  top: 39%;
  left: 35%;
  width: 29%;
  height: 27%;
  clip-path: polygon(45% 0, 88% 18%, 100% 88%, 35% 100%, 0 78%);
  filter: drop-shadow(6px 6px 0 #ff9a32);
  transform: rotate(-2deg);
}

.slot--mouth {
  bottom: 16%;
  left: 21%;
  width: 57%;
  height: 18%;
  clip-path: polygon(3% 26%, 95% 0, 100% 72%, 25% 100%, 0 75%);
  filter: drop-shadow(7px 7px 0 var(--paper));
  transform: rotate(3deg);
}

.slot.is-spinning img {
  filter: blur(2px) saturate(1.35);
  transform: scale(1.07);
  animation: slot-pulse 160ms steps(2, end) infinite;
}

.status {
  z-index: 1;
  margin: 0;
  padding: 0.2em 0.5em;
  color: var(--ink);
  font-family: system-ui, sans-serif;
  font-size: clamp(0.9rem, 2.4vw, 1.15rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  background: var(--acid);
  transform: rotate(1deg);
}

.spin-button {
  z-index: 1;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  min-width: min(72vw, 15rem);
  padding: 0.54em 1.2em 0.48em;
  border: 5px solid var(--ink);
  border-radius: 0;
  color: var(--paper);
  cursor: pointer;
  font: inherit;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: lowercase;
  background: var(--pink);
  box-shadow: 0.16em 0.16em 0 var(--ink);
  transform: rotate(-2deg);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, filter 120ms ease-out;
}

.spin-button:hover:not(:disabled) {
  transform: rotate(-2deg) translate(-0.07em, -0.07em);
  box-shadow: 0.23em 0.23em 0 var(--ink);
}

.spin-button:active:not(:disabled) {
  transform: rotate(-2deg) translate(0.12em, 0.12em);
  box-shadow: 0.05em 0.05em 0 var(--ink);
}

.spin-button:disabled {
  cursor: wait;
  filter: saturate(0.35) brightness(0.88);
  box-shadow: 0.07em 0.07em 0 var(--ink);
  transform: rotate(-2deg) translate(0.1em, 0.1em);
}

.spin-button:focus-visible {
  outline: 5px solid var(--paper);
  outline-offset: 5px;
}

@media (max-width: 699px) {
  h1 {
    font-size: clamp(3.4rem, 14vw, 4.8rem);
    letter-spacing: 0.015em;
    transform: translateY(-0.5rem) rotate(-3deg);
  }

  .portrait {
    margin-top: clamp(4.5rem, 16vw, 6rem);
  }

  .mood-label {
    top: -20%;
    font-size: clamp(1.8rem, 7vw, 2.2rem);
  }

  .mood-label.is-long {
    font-size: clamp(1.08rem, 4.3vw, 1.35rem);
  }

  .tiara {
    left: 14%;
    width: 70%;
  }

  .portrait::before,
  .portrait::after {
    right: -10%;
  }

  .spin-button {
    margin-top: 4rem;
  }
}

@keyframes slot-pulse {
  50% {
    filter: blur(3px) saturate(1.55) contrast(1.1);
    transform: scale(1.1) translateX(1%);
  }
}

@keyframes mood-letter-roll {
  0% {
    opacity: 0;
    transform: translateY(-1.8em) rotate(calc(var(--letter-direction) * 190deg)) scale(0.25);
  }

  68% {
    opacity: 1;
    transform: translateY(0.15em) rotate(calc(var(--letter-direction) * -12deg)) scale(1.12);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}

@keyframes mood-letter-wobble {
  from {
    transform: translateY(-0.04em) rotate(-2deg);
  }

  to {
    transform: translateY(0.09em) rotate(3deg);
  }
}

@keyframes mood-letter-exit {
  to {
    opacity: 0;
    transform: translateY(1.1em) rotate(calc(var(--letter-direction) * 100deg)) scale(0.45);
  }
}

@media (min-width: 700px) {
  .poster {
    grid-template-columns: minmax(13rem, 0.7fr) minmax(19rem, 29rem) minmax(13rem, 0.7fr);
    grid-template-rows: 1fr auto 1fr;
    gap: 0.75rem 2rem;
  }

  h1 {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
  }

  .portrait {
    grid-column: 2;
    grid-row: 1 / 4;
    width: min(48vw, 29rem);
  }

  .status,
  .spin-button {
    grid-column: 3;
    justify-self: end;
  }

  .status {
    grid-row: 2;
  }

  .spin-button {
    grid-row: 2;
    margin-top: 4rem;
  }
}

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