/* V33: every guest keeps a readable face, and live information sits inside its painted instrument. */

@media (min-width: 721px) and (min-height: 500px) {
  .shop .customer[class*="guest-"]:not(.preview) .alien-wrap {
    top: -13%;
    height: 114%;
  }

  .shop .customer[class*="guest-"]:not(.preview) .alien-figure,
  .shop .customer[class*="guest-"]:not(.preview) .alien-art {
    width: min(36vw, 560px);
    height: min(36vw, 560px);
  }

  .shop .customer[class*="guest-"]:not(.preview) .alien-art {
    image-rendering: auto;
    filter:
      drop-shadow(0 7px 4px rgb(67 36 18 / 26%))
      saturate(.96)
      contrast(1.05);
  }

  .shop .customer:is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview) .alien-wrap {
    top: -15%;
    height: 116%;
  }

  .shop .customer:is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview) .alien-figure,
  .shop .customer:is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview) .alien-art {
    width: min(39vw, 600px);
    height: min(39vw, 600px);
  }

  .shop .customer.guest-moon:not(.preview) .alien-wrap {
    top: -20%;
  }

  .shop .customer.guest-moon:not(.preview) .alien-figure,
  .shop .customer.guest-moon:not(.preview) .alien-art {
    width: min(42vw, 650px);
    height: min(42vw, 650px);
  }

  .game-shell.phase-playing .hud {
    width: min(100%, 560px);
    min-height: 63px;
    aspect-ratio: 1960 / 222;
    padding: 7px 56px;
    overflow: hidden;
    background: transparent url("../assets/meowa/ui/hud-plaque-v10.png") center / contain no-repeat;
  }

  .game-shell.phase-playing .hud .pill {
    width: auto;
    min-height: 49px;
    padding: 21px 4px 5px;
    font-size: 18px;
  }

  .game-shell.phase-playing .hud .pill::before {
    top: 7px;
    font-size: 10px;
  }

  .game-shell.phase-playing .hud .pill b {
    font-size: 18px;
  }

  .shop .customer:not(.preview) .speech {
    box-sizing: border-box;
    width: 240px;
    height: auto;
    aspect-ratio: 560 / 425;
    padding: 43px 20px 25px 42px;
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: 30px 24px 8px;
    column-gap: 10px;
    align-content: center;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .shop .customer:nth-child(1):not(.preview) .speech {
    background-image: url("../assets/meowa/ui/v23/order-ticket-left.png");
  }

  .shop .customer:nth-child(2):not(.preview) .speech {
    background-image: url("../assets/meowa/ui/v23/order-ticket-right.png");
  }

  .shop .customer:not(.preview) .order-dish {
    width: 68px;
    height: 68px;
  }

  .shop .customer:not(.preview) .order-line {
    gap: 4px;
    font-size: 12px;
  }

  .shop .customer:not(.preview) .order-level,
  .shop .customer:not(.preview) .preference.special,
  .shop .customer:not(.preview) .trait-line {
    font-size: 10px;
  }

  .shop .customer:not(.preview) .patience {
    height: 6px;
  }

  .shop .customer.preview .speech {
    width: 128px;
    height: auto;
    aspect-ratio: 252 / 302;
  }
}

@media (min-width: 721px) and (min-height: 500px) and (max-height: 690px) {
  .shop .customer[class*="guest-"]:not(.preview) .alien-wrap {
    top: -18%;
  }

  .shop .customer[class*="guest-"]:not(.preview) .alien-figure,
  .shop .customer[class*="guest-"]:not(.preview) .alien-art {
    width: min(38vw, 520px);
    height: min(38vw, 520px);
  }

  .shop .customer.guest-moon:not(.preview) .alien-figure,
  .shop .customer.guest-moon:not(.preview) .alien-art {
    width: min(42vw, 580px);
    height: min(42vw, 580px);
  }

  .shop .customer:not(.preview) .speech {
    width: 218px;
    padding: 39px 18px 23px 38px;
    grid-template-columns: 70px minmax(0, 1fr);
    grid-template-rows: 27px 22px 7px;
    transform-origin: center bottom;
  }

  .shop .customer:not(.preview) .order-dish {
    width: 61px;
    height: 61px;
  }
}