.home {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  /* Rapid taps on the title (egg 2) must not turn into double-tap zoom on iOS. */
  touch-action: manipulation;
}

/* Floating ingredients */

.field {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.ing {
  position: absolute;
  top: 0;
  width: 52px;
  height: 52px;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  animation: drift linear infinite;
  will-change: transform;
}

.ing img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@keyframes drift {
  from {
    transform: translateY(105vh) rotate(0);
  }
  to {
    transform: translateY(-15vh) rotate(360deg);
  }
}

.ing.wobble img {
  animation: wobble 0.45s;
}

@keyframes wobble {
  25% {
    transform: rotate(-25deg);
  }
  75% {
    transform: rotate(25deg);
  }
}

/* A caught ingredient flies to the pot; home.js sets the target transform. */
.ing.caught {
  animation: none;
  transition:
    transform 0.5s ease-in,
    opacity 0.5s;
  opacity: 0;
  pointer-events: none;
}

/* The card */

/* A fixed element starts its own stacking context, so .scene's z-index only counts inside
   the stage: the stage itself must sit above .field, or ingredients cover the card and take
   its taps. pointer-events: none lets taps outside the card fall through to the ingredients. */
.stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 64px;
  pointer-events: none;
}

.scene {
  position: relative;
  z-index: 2;
  perspective: 900px;
  pointer-events: auto;
}

.flip {
  position: relative;
  width: min(340px, calc(100vw - 32px));
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.flip.flipped {
  transform: rotateY(180deg);
}

.face {
  background: rgba(255, 247, 239, 0.92);
  border-radius: 22px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(120, 60, 20, 0.18);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.front h1 {
  margin: 0;
  font-size: 40px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.tag {
  margin: 10px auto 0;
  max-width: 270px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--muted);
}

.soon {
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
}

.back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  background: #fffdf6;
  border: 2px dashed #e0b48f;
  transform: rotateY(180deg);
  cursor: pointer;
}

.back h2 {
  margin: 0 0 8px;
  font-size: 19px;
}

.back ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
}

.back .small {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* The pot: hidden until the first catch */

/* The pot and the footer stack in one bottom dock, so the pot always sits above the footer
   however many lines the footer wraps to. The pot keeps its place in the dock while hidden,
   so its position can be measured before it appears. */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.dock .site-footer {
  align-self: stretch;
  padding: 12px 8px;
  pointer-events: auto;
}

.pot {
  display: flex;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 30px;
  background: var(--ink);
  visibility: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition:
    transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1),
    opacity 0.3s,
    visibility 0s 0.5s;
}

.pot.show {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1),
    opacity 0.3s;
}

.pot img {
  width: 30px;
  height: 30px;
  opacity: 0.25;
  filter: grayscale(1);
}

.pot img.on {
  opacity: 1;
  filter: none;
  animation: pop 0.35s;
}

@keyframes pop {
  50% {
    transform: scale(1.5);
  }
}

/* "Борщ готовий!" */

.done {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  color: #fff;
  background: rgba(142, 31, 67, 0.94);
  animation: fade 0.4s;
}

.done[hidden] {
  display: none;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.bowl {
  position: relative;
}

.bowl img {
  display: block;
}

.steam {
  position: absolute;
  bottom: 70px;
  width: 10px;
  height: 50px;
  border-radius: 10px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  filter: blur(3px);
  animation: rise 2.4s ease-in infinite;
}

.steam:nth-child(1) {
  left: 44px;
}

.steam:nth-child(2) {
  left: 66px;
  animation-delay: 0.8s;
}

.steam:nth-child(3) {
  left: 88px;
  animation-delay: 1.6s;
}

@keyframes rise {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50px) scaleX(2.2);
    opacity: 0;
  }
}

.done h2 {
  margin: 12px 0 6px;
  font-size: 34px;
}

.done p {
  margin: 0;
  opacity: 0.85;
}

.done button {
  margin-top: 22px;
  padding: 10px 22px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: var(--beet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Reduced motion: nothing drifts. The page falls back to normal flow (ingredients wrap in rows
   above the card, the dock follows it) and scrolls when a short screen cannot fit it all, so
   nothing overlaps whatever the screen height. */
@media (prefers-reduced-motion: reduce) {
  .home {
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .field {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 16px 16px 0;
  }

  .ing {
    position: static;
  }

  .stage {
    position: static;
    flex: 1;
    padding: 16px;
  }

  .dock {
    position: static;
  }

  .ing,
  .ing.wobble img,
  .pot img.on,
  .steam,
  .done {
    animation: none;
  }

  .flip,
  .pot,
  .pot.show,
  .ing.caught {
    transition: none;
  }

  .steam {
    display: none;
  }
}