/* Garden Party Guest Basket — tea-table scene alignment fix */
.aspect-\[4\/3\] > div:has(> img[src*="/friends/tea-party-"]) {
  inset-inline: 0 !important;
  bottom: 29% !important;
  height: 72% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: visible !important;
  padding-inline: 1% !important;
}

/* Render every selected guest as one visible, equal slot instead of relying on
   absolute left offsets that were pushing the fourth guest outside the frame. */
.aspect-\[4\/3\] > div:has(> img[src*="/friends/tea-party-"]) > img[src*="/friends/tea-party-"] {
  position: relative !important;
  inset: auto !important;
  bottom: auto !important;
  flex: 0 0 27% !important;
  width: 27% !important;
  height: 160% !important;
  max-width: none !important;
  margin-left: -2.5% !important;
  transform: translateY(-45px) scale(1.12) !important;
  transform-origin: center bottom !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

.aspect-\[4\/3\] > div:has(> img[src*="/friends/tea-party-"]) > img[src*="/friends/tea-party-"]:first-child {
  margin-left: 0 !important;
}

/* Keep Gladys at the same visible scale and baseline as every other table guest. */
.aspect-\[4\/3\] > div:has(> img[src*="/friends/tea-party-"]) > img[src*="tea-party-gladys.png"] {
  flex-basis: 27% !important;
  width: 27% !important;
  height: 160% !important;
  transform: translateY(-45px) scale(1.12) !important;
  z-index: auto !important;
}

/* Use one consistent crop and scale for every selectable friend thumbnail. */
button img[src*="/friends/tea-party-"] {
  height: 185% !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center top !important;
}

/* Gladys has extra transparent canvas in her PNG, so use only a tiny crop
   correction while preserving the same overall proportions as the others. */
button img[src*="tea-party-gladys.png"] {
  height: 190% !important;
  width: 100% !important;
  transform: translateY(-2%) !important;
}

/* Raise the four selected food and drink images on the tabletop by 10px. */
.aspect-\[4\/3\] > img.z-40 {
  transform: translateY(-10px) !important;
}

/* Step 4: make the time and comfort instructions readable over the garden. */
.max-w-sm > .space-y-4 > section {
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 20px !important;
  background: rgba(255, 250, 244, 0.92) !important;
  padding: 14px !important;
  box-shadow: 0 10px 24px rgba(48, 29, 58, 0.2) !important;
  backdrop-filter: blur(8px) !important;
}

.max-w-sm > .space-y-4 > section > p {
  margin-bottom: 12px !important;
  color: #3d1f5f !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

/* Pastel pink 3-D time buttons. */
.max-w-sm > .space-y-4 > section:first-of-type button {
  min-height: 46px !important;
  border: 2px solid #efb8ca !important;
  background: linear-gradient(to bottom, #fff1f6 0%, #f8cad9 62%, #e9a9bf 100%) !important;
  color: #4b2340 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 5px 0 #c77e99, 0 9px 16px rgba(83, 42, 65, 0.2) !important;
  transform: translateY(0) !important;
}

.max-w-sm > .space-y-4 > section:first-of-type button:active,
.max-w-sm > .space-y-4 > section:first-of-type button[class*="bg-[#eee3fa]"] {
  border-color: #b66a91 !important;
  background: linear-gradient(to bottom, #f8d5e3 0%, #eeb1c8 100%) !important;
  box-shadow: 0 2px 0 #a85c7d, 0 5px 10px rgba(83, 42, 65, 0.18) !important;
  transform: translateY(3px) !important;
}

/* Alternate light pink and pastel green 3-D comfort buttons. */
.max-w-sm > .space-y-4 > section:last-of-type button {
  min-height: 48px !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 15px !important;
  padding: 11px 14px !important;
  color: #34233f !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 5px 0 rgba(73, 82, 54, 0.36), 0 9px 15px rgba(44, 37, 47, 0.16) !important;
}

.max-w-sm > .space-y-4 > section:last-of-type button:nth-child(odd) {
  border-color: #efb8ca !important;
  background: linear-gradient(to bottom, #fff1f6 0%, #f7c9d8 100%) !important;
  box-shadow: 0 5px 0 #c9829c, 0 9px 15px rgba(76, 39, 58, 0.17) !important;
}

.max-w-sm > .space-y-4 > section:last-of-type button:nth-child(even) {
  border-color: #acd1ad !important;
  background: linear-gradient(to bottom, #f1faee 0%, #cce8c8 100%) !important;
  box-shadow: 0 5px 0 #82b184, 0 9px 15px rgba(41, 73, 47, 0.17) !important;
}

.max-w-sm > .space-y-4 > section:last-of-type button:has(svg) {
  border-color: #6f9f72 !important;
  background: linear-gradient(to bottom, #dff2dc 0%, #afd5ad 100%) !important;
  box-shadow: 0 2px 0 #638e66, 0 5px 10px rgba(41, 73, 47, 0.18) !important;
  transform: translateY(3px) !important;
}

.max-w-sm > .space-y-4 > section:last-of-type button svg {
  color: #386c3d !important;
  stroke-width: 3 !important;
}

/* Completion state: readable pastel-pink panel with 35% transparency. */
.relative.min-h-\[880px\]:has(button.min-w-\[220px\]) > .relative.z-20.max-w-sm {
  background: rgba(248, 205, 220, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 14px 34px rgba(61, 31, 84, 0.24) !important;
  backdrop-filter: blur(10px) !important;
}

.relative.min-h-\[880px\]:has(button.min-w-\[220px\]) > .relative.z-20.max-w-sm h4,
.relative.min-h-\[880px\]:has(button.min-w-\[220px\]) > .relative.z-20.max-w-sm p,
.relative.min-h-\[880px\]:has(button.min-w-\[220px\]) > .relative.z-20.max-w-sm div {
  color: #351947 !important;
}

/* Completion avatar bubble only. */
.relative.min-h-\[880px\]:has(button.min-w-\[220px\]) .pointer-events-none > div.rounded-\[999px\] > span:not(:last-child) {
  display: none !important;
}

.relative.min-h-\[880px\]:has(button.min-w-\[220px\]) .pointer-events-none > div.rounded-\[999px\]::before {
  content: "Thanks for\A coming!";
  white-space: pre-line;
  display: block;
  text-align: center;
}

/* Blueberry Before I Burst — make the dressed table the dominant foreground layer. */
img[alt="A sunflower-dressed garden party table"] {
  left: -22% !important;
  right: auto !important;
  bottom: -12px !important;
  width: 144% !important;
  max-width: none !important;
  height: 228px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  z-index: 35 !important;
}

/* Nina is intentionally smaller than the other guest crops and sits left of her speech box. */
img[alt="Nina"] {
  left: 2% !important;
  right: auto !important;
  bottom: 58px !important;
  width: 46% !important;
  max-width: none !important;
  height: 218px !important;
  transform: none !important;
  transform-origin: left bottom !important;
  object-fit: contain !important;
  object-position: left bottom !important;
  z-index: 24 !important;
}

/* Every answer must produce an unmistakable blueberry reaction, even when the
   new pressure total remains within the same sprite threshold. The feedback
   paragraph only exists after an answer, so :has() precisely scopes this pulse. */
@keyframes blueberry-answer-reaction {
  0% { transform: scale(.82) rotate(-8deg); filter: brightness(.9) saturate(.9); }
  22% { transform: scale(1.28) rotate(7deg); filter: brightness(1.28) saturate(1.35); }
  45% { transform: scale(.94) rotate(-5deg); }
  68% { transform: scale(1.16) rotate(4deg); }
  100% { transform: scale(1) rotate(0); filter: brightness(1) saturate(1); }
}

.relative.min-h-\[800px\]:has([class~="text-white/80"]) img[alt$="blueberry social battery"] {
  animation: blueberry-answer-reaction 2s ease-in-out both !important;
  transform-origin: center center !important;
}

@media (max-width: 390px) {
  img[alt="A sunflower-dressed garden party table"] {
    left: -25% !important;
    width: 150% !important;
    height: 222px !important;
  }

  img[alt="Nina"] {
    left: 1% !important;
    bottom: 56px !important;
    width: 45% !important;
    height: 208px !important;
  }
}