:root {
  --time-t: 0;
  --hearts: 5;
  --max-days: 28;
  --max-days-divider: 7;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  display: flow-root;
  margin: 0;
  width: 100%;
  min-height: 100dvh;
}

#app {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100dvw;
  height: 100dvh;
  background: hotpink;
  isolation: isolate;
  opacity: 0;
  transition: 0.1s opacity;
}
#app #bg-container {
  position: absolute;
  display: flex;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  mix-blend-mode: darken;
  opacity: var(--time-t);
  transition: 0.1s opacity;
}
#app #bg-container svg {
  width: 0;
  height: 0;
  visibility: hidden;
}
#app #bg-container #bg {
  display: flex;
  width: 100%;
  height: 100%;
  inset: 0;
  object-position: center;
  object-fit: cover;
  filter: blur(0.5px) url(#wavy);
}
#app #grid {
  --col-i: var(--max-days-divider);
  --row-i: calc(var(--max-days) / var(--max-days-divider));
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--col-i), calc(100% / var(--col-i)));
  grid-template-rows: repeat(var(--row-i), calc(100% / var(--row-i)));
  justify-items: center;
}
#app #grid .grid-i {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: 1.25em;
  opacity: 0.5;
}
#app #grid .grid-i * {
  position: absolute;
}
#app #grid .grid-i span {
  opacity: 0.45;
}
#app #grid .grid-i img {
  aspect-ratio: 1/1;
  height: 1em;
  object-fit: contain;
  padding: 0.1em;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
@media (max-aspect-ratio: 1/1) {
  #app #grid {
    --col-i: calc(var(--max-days) / var(--max-days-divider));
    --row-i: var(--max-days-divider);
  }
}
#app #confetti-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#app #confetti-container .confetti {
  position: absolute;
  aspect-ratio: 1/1;
  width: calc(100% / var(--child-count) * (0.5 + var(--random3) * 1.5));
  background: red;
  top: 0;
  left: calc(var(--child) / var(--child-count) * 100%);
  filter: hue-rotate(calc(var(--random1) * 360deg));
  animation: calc(3s + var(--random2) * 5s) linear infinite falling calc((5s + var(--random3) * 5s) * -1), calc(1s + var(--random3) * 3s) linear infinite turning calc((5s + var(--random3) * 5s) * -1);
}
@keyframes falling {
  0% {
    top: -10%;
  }
  100% {
    top: 110%;
  }
}
@keyframes turning {
  0% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateY(360deg) rotateZ(360deg);
  }
}
#app #info-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#app #info-container #info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 85%;
  height: 80%;
}
#app #info-container #info #flames {
  position: relative;
  flex-grow: 1;
  aspect-ratio: 692.797/922.6;
  filter: grayscale(1);
  transition: 0.5s filter;
}
#app #info-container #info #flames * {
  width: 100%;
  height: 100%;
  padding: 10%;
  object-fit: contain;
}
#app #info-container #info #flames #flame {
  position: relative;
  z-index: 2;
  background: radial-gradient(ellipse, rgba(255, 255, 0, 0.8666666667) 0%, rgba(255, 255, 0, 0) 30%) 50% 40%/200% 200%;
}
#app #info-container #info #flames .subflame {
  position: absolute;
  bottom: calc(0.4dvh * var(--child));
  left: 0;
  rotate: calc((mod(var(--child), 2) * 2 - 1) * var(--child) / var(--max-days) * 7.5deg);
  filter: brightness(calc(1 + var(--child) * 0.02)) hue-rotate(calc(var(--child) * 1deg));
  transform-origin: center bottom;
  z-index: 1;
}
#app #info-container #info #counter {
  font-size: 10em;
  font-weight: 1000;
  color: #000;
  -webkit-text-stroke: 1px #fff;
  margin: 10px;
  transition: 0.5s opacity;
}
#app #hearts {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 1em;
  padding: min(1dvh, 1dvw) min(2dvh, 2dvw);
  border-radius: 0 0 0 min(1dvh, 1dvw);
  background: rgba(255, 255, 255, 0.25);
  font-size: 2em;
  overflow: hidden;
}
#app #hearts[data-full] {
  display: none;
}
#app #hearts h1 {
  margin: 0;
}
#app #hearts img {
  height: 2em;
  animation: beat 1s infinite alternate;
  animation-duration: calc(1s * var(--hearts) / 5 + 0.1s);
}
@keyframes beat {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(calc(1.1 + 0.4 * (5 - var(--hearts)) / 5));
  }
}
#app #banner {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: block;
}
#app #banner svg {
  display: block;
  margin: 0 auto min(5dvh, 5dvw) auto;
  max-height: 50dvh;
  scale: 1.1;
}
#app #banner svg .skin {
  fill: rgb(min(248 + (var(--time-t) - 0.5) * 250, 255), min(222 - (var(--time-t) - 0.5) * 400, 220), 64);
}
#app #banner svg .eye {
  fill: #fff;
}
#app #banner svg .eye-inner {
  fill: rgb(calc(134 + var(--time-t) * 121), 78, 32);
}
#app #banner svg .mouth {
  fill: #864e20;
}
#app #banner #remain {
  color: #FFF;
  font-size: 5em;
  font-weight: 1000;
  text-align: center;
  opacity: 1;
  transition: 0.1s opacity;
  padding: min(1dvh, 1dvw) min(2dvh, 2dvw);
  border-radius: min(1dvh, 1dvw);
  background: rgba(155, 0, 0, 0.75);
}
#app #flicker {
  position: absolute;
  display: flex;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence id='noise' type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: color-burn;
  animation-name: flicker;
  animation-timing-function: linear;
  opacity: 0;
}
@keyframes flicker {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#app #offline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  background: lightgray;
  opacity: 0;
}
#app[data-offline] #offline {
  opacity: 1;
}
#app[data-offline] #info-container, #app[data-offline] #flicker, #app[data-offline] #banner, #app[data-offline] #grid, #app[data-offline] #hearts, #app[data-offline] #bg-container {
  display: none;
}
#app[data-fulfill] #info-container #info #flames {
  filter: grayscale(0);
}
#app[data-fulfill] #bg-container {
  display: none;
  opacity: 0;
}
#app[data-fulfill] #banner {
  display: none;
  opacity: 0;
}
#app[data-fulfill] #flicker {
  display: none;
}
#app[data-dead] {
  background: #F00;
}
#app[data-dead] #bg-container {
  display: flex;
  opacity: 1;
}
#app[data-dead] #bg-container #bg {
  filter: url(#wavy);
}
#app[data-dead] #grid {
  display: none;
}
#app[data-dead] #info-container {
  overflow: hidden;
}
#app[data-dead] #info-container #info #flames {
  position: relative;
  top: 40%;
  filter: hue-rotate(290deg) grayscale(0);
  animation: 0.1s jiggle infinite alternate;
}
@keyframes jiggle {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(31deg);
  }
}
#app[data-dead] #info-container #info #counter {
  display: none;
}
#app[data-dead] #hearts {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  font-size: 5em;
  border-radius: min(1dvh, 1dvw);
  padding: 1em;
  background: none;
}
#app[data-dead] #hearts h1 {
  display: none;
}
#app[data-dead] #banner {
  display: none;
  opacity: 0;
}
#app #debug {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.3333333333);
}
#app #debug #jd-close {
  float: right;
  border: none;
  background: none;
  cursor: pointer;
}

/*# sourceMappingURL=main.css.map */