/* V25: human-leaning guests are staged as part of the painted counter. */

@media (min-width: 721px) and (min-height: 500px) {
  .customers {
    inset: 54px 3% 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 0.44fr;
    gap: 3.4%;
  }

  .customer {
    height: 258px;
  }

  .customer::after {
    display: none;
  }

  .customer:not(.preview) .alien-wrap {
    top: -10px;
    right: 2%;
    bottom: auto;
    left: 12%;
    height: 278px;
    place-items: end center;
  }

  .customer:nth-child(2):not(.preview) .alien-wrap {
    right: 12%;
    left: 2%;
  }

  .customer:not(.preview) .alien-figure {
    width: 100%;
    height: 278px;
    place-items: end center;
  }

  .customer:not(.preview) .alien-art,
  .customer:not(.preview) .alien-art.character-insect {
    width: 292px;
    height: 292px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 14px 9px #160d174d) drop-shadow(0 0 2px #f2d4957a);
  }

  .customer.guest-coral:not(.preview) .alien-art {
    width: 300px;
    height: 300px;
  }

  .customer.guest-insect:not(.preview) .alien-art {
    width: 282px;
    height: 282px;
  }

  .customer .speech {
    z-index: 11;
    top: auto;
    right: auto;
    bottom: -2px;
    left: 2%;
    width: 184px;
    height: 96px;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: 23px 19px 13px;
    padding: 19px 20px 14px 19px;
    transform: rotate(-1.2deg);
    transform-origin: center bottom;
    filter: drop-shadow(0 9px 7px #160d1766) saturate(0.92);
  }

  .customer:nth-child(2) .speech {
    right: 2%;
    left: auto;
    transform: rotate(1.2deg);
  }

  .customer .order-dish {
    width: 42px;
    height: 42px;
  }

  .customer .order-line {
    gap: 4px;
    font-size: 10px;
  }

  .customer .order-level,
  .customer .preference,
  .customer .trait-line {
    font-size: 8px;
  }

  .customer .preference {
    justify-self: start;
  }

  .customer .trait-line {
    justify-self: end;
  }

  .customer .patience {
    height: 4px;
  }

  .customer .customer-reaction {
    top: 10px;
    min-width: 88px;
    min-height: 32px;
    padding: 8px 14px;
    font-size: 10px;
  }

  .customer .scene-aura {
    top: 30px;
    width: 168px;
    height: 168px;
  }

  .customer.preview {
    height: 226px;
  }

  .customer.preview .speech {
    top: 62px;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 110px;
    height: 132px;
    padding: 14px 16px 17px;
    transform: translateX(-50%) rotate(0.8deg);
    filter: drop-shadow(0 8px 6px #160d1752) saturate(0.86);
  }

  .customer.preview .order-dish {
    width: 48px;
    height: 48px;
  }
}

@media (min-width: 721px) and (min-height: 500px) and (max-aspect-ratio: 3 / 2) {
  .customers {
    inset: 50px 2% 0;
    gap: 2.4%;
  }

  .customer {
    height: 252px;
  }

  .customer:not(.preview) .alien-wrap,
  .customer:not(.preview) .alien-figure {
    height: 266px;
  }

  .customer:not(.preview) .alien-art,
  .customer:not(.preview) .alien-art.character-insect {
    width: 282px;
    height: 282px;
  }

  .customer.guest-coral:not(.preview) .alien-art {
    width: 290px;
    height: 290px;
  }

  .customer .speech {
    bottom: 2px;
    width: 176px;
    height: 92px;
    padding: 18px 19px 13px 18px;
  }
}

@media (min-width: 721px) and (min-height: 500px) and (max-height: 690px) {
  .customer:not(.preview) .alien-wrap,
  .customer:not(.preview) .alien-figure {
    height: 232px;
  }

  .customer:not(.preview) .alien-art,
  .customer:not(.preview) .alien-art.character-insect {
    width: 242px;
    height: 242px;
  }

  .customer.guest-coral:not(.preview) .alien-art {
    width: 250px;
    height: 250px;
  }

  .customer .speech {
    bottom: 8px;
    transform: scale(0.88) rotate(-1.2deg);
    transform-origin: left bottom;
  }

  .customer:nth-child(2) .speech {
    transform: scale(0.88) rotate(1.2deg);
    transform-origin: right bottom;
  }
}

@media (max-width: 720px), (max-height: 499px) {
  .customer::after {
    display: none;
  }

  .customer:not(.preview) .alien-art,
  .customer:not(.preview) .alien-art.character-insect {
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 10px 7px #160d174d);
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer .speech {
    transform: none;
  }

  .customer.preview .speech {
    transform: translateX(-50%);
  }
}