:root {
  color-scheme: dark;
  --pink: #f7a6ce;
  --pixel: 4px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  background-color: #191222;
  background-image: radial-gradient(
    #5c3c694d 1px,
    transparent 1px
  );
  background-size: 16px 16px;
  color: #fcebf7;
  font-family: ui-monospace, Consolas, monospace;
}

.card {
  position: relative;
  width: min(100%, 740px);
  padding: 38px 24px 30px;
  text-align: center;
  border: 2px solid #775485;
  background: #241b31;
  box-shadow: 8px 8px 0 #100c17;
}

.eyebrow {
  margin: 0 0 24px;
  font-size: 11px;
  letter-spacing: 3px;
  color: #c2a0ce;
}

.stage {
  position: relative;
  height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 쿠로미 */
.kuromi {
  position: relative;
  width: calc(64 * var(--pixel));
  height: calc(64 * var(--pixel));
  z-index: 2;
}

.sprite-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.pixel {
  position: absolute;
  width: var(--pixel);
  height: var(--pixel);
}

.ink {
  background: #16111e;
}

.shade {
  background: #30253f;
}

.white {
  background: #fff3fa;
}

.ivory {
  background: #e9d8ec;
}

.pink {
  background: var(--pink);
}

.blush {
  background: #ef83b0;
}

.hand {
  position: absolute;
  width: calc(9 * var(--pixel));
  height: calc(12 * var(--pixel));
  top: calc(40 * var(--pixel));
  z-index: 1;
  transform-origin: 50% 95%;
}

.hand.left {
  left: calc(7 * var(--pixel));
  transform: rotate(-18deg);
}

.hand.right {
  right: calc(7 * var(--pixel));
  transform: rotate(18deg);
}

.playing .hand.left {
  animation: wave-left 1s steps(1, end) 3;
}

.playing .hand.right {
  animation: wave-right 1s steps(1, end) 3;
}

@keyframes wave-left {
  0%, 100% {
    transform: rotate(-55deg);
  }

  50% {
    transform: rotate(-18deg);
  }
}

@keyframes wave-right {
  0%, 100% {
    transform: rotate(18deg);
  }

  50% {
    transform: rotate(55deg);
  }
}

.shadow {
  position: absolute;
  bottom: 10px;
  width: 160px;
  height: 12px;
  background: #130e1c;
}

.sparkles {
  position: absolute;
  top: 0;
  font-size: 23px;
  letter-spacing: 25px;
  color: var(--pink);
}

.greeting {
  height: 24px;
  margin: 12px 0 20px;
  color: #ecc7f2;
  font-size: 18px;
}

/* 픽셀 생일 메시지 */
.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  visibility: hidden;
  margin: 18px 0;
}

.message.visible {
  visibility: visible;
  animation: reveal 0.35s steps(3, end);
}

.text-row {
  display: flex;
  gap: 6px;
  max-width: 100%;
}

.letter {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  width: 24px;
  height: 34px;
}

.dot {
  background: var(--pink);
  box-shadow: 0 0 5px #f7a6ce30;
}

.blank {
  background: transparent;
}

.wish {
  visibility: hidden;
  margin: 24px 0;
  color: #bea4ca;
  font-family: system-ui, sans-serif;
  font-size: 13px;
}

.wish.visible {
  visibility: visible;
}

button {
  border: 1px solid #856194;
  background: #34263f;
  color: #f6d9ef;
  padding: 11px 20px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #130e1c;
}

button:hover {
  background: #4a3458;
}

button:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 5px;
}

/* 폭죽 */
#fireworks {
  position: absolute;
  inset: -20px;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color);
  animation: burst 0.85s steps(8, end) both;
}

@keyframes burst {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--dx), var(--dy));
    opacity: 0;
  }
}

@keyframes reveal {
  from {
    transform: translateY(8px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 모바일 */
@media (max-width: 480px) {
  :root {
    --pixel: 3.5px;
  }

  .card {
    padding: 28px 12px;
  }

  .eyebrow {
    letter-spacing: 1.5px;
  }

  .text-row {
    gap: 4px;
  }

  .letter {
    width: 19px;
    height: 29px;
  }

  .stage {
    height: 255px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }

  .particle {
    display: none;
  }
}