/* V46: quieter environment, readable orders, and one clear play path. */

/* Environment art stays proportional, but no longer competes with live UI. */
.shop .shop-stage-background img {
  filter: brightness(.78) saturate(.82) contrast(.92);
}

.shop .shop-counter-foreground img {
  filter: brightness(.82) saturate(.83) contrast(.91);
}

.shop .customer.preview {
  opacity: .6;
  filter: saturate(.82) brightness(.9);
}

.shop .customer.preview:hover,
.shop .customer.preview:focus-within {
  opacity: .9;
}

.shop .customer:is(
  .guest-lotus,
  .guest-ink,
  .guest-jade,
  .guest-opera,
  .guest-silver,
  .guest-guardian
):not(.preview) .alien-art {
  filter:
    sepia(.07)
    saturate(.96)
    contrast(1.02)
    brightness(1.005)
    drop-shadow(0 9px 8px rgb(20 11 17 / 42%));
}

/* The working board is the visual centre of the lower half. */
.merge-panel .board-wrap {
  filter: drop-shadow(0 10px 12px rgb(10 7 12 / 34%));
}

.purchase-dock .buy-btn:not(:disabled) {
  filter: brightness(1.04) saturate(.94);
}

.purchase-dock .buy-btn.needed:not(:disabled) {
  filter: brightness(1.14) saturate(1.02) drop-shadow(0 0 8px rgb(255 220 137 / 48%));
}

.mutation-dock .mutation-btn:not(:hover):not(:focus-visible) {
  opacity: .66;
}

.contract-chip {
  opacity: .82;
}

/* Utility controls are available, but do not share the HUD's emphasis. */
.game-shell.phase-playing .top-actions,
.game-shell.phase-training .top-actions {
  opacity: .54;
  transition: none;
}

.game-shell.phase-playing .top-actions:hover,
.game-shell.phase-playing .top-actions:focus-within,
.game-shell.phase-training .top-actions:hover,
.game-shell.phase-training .top-actions:focus-within {
  opacity: 1;
}

.top-actions .icon-btn {
  transform: scale(.88);
}

/* Every pose receives its own restrained motion instead of one shared bob. */
.shop .customer.guest-lotus:not(.preview) .alien-figure,
.shop .customer.guest-opera:not(.preview) .alien-figure {
  animation: guest-v46-indicate 4.8s ease-in-out infinite !important;
}

.shop .customer.guest-ink:not(.preview) .alien-figure,
.shop .customer.guest-jade:not(.preview) .alien-figure {
  animation: guest-v46-greet 5.4s ease-in-out infinite !important;
}

.shop .customer.guest-silver:not(.preview) .alien-figure {
  animation: guest-v46-composed 6.2s ease-in-out infinite !important;
}

.shop .customer.guest-guardian:not(.preview) .alien-figure {
  animation: guest-v46-steady 5.8s ease-in-out infinite !important;
}

@keyframes guest-v46-indicate {
  0%, 58%, 100% { transform: translate(0, 0); }
  66% { transform: translate(1px, 1px); }
  76% { transform: translate(0, 0); }
}

@keyframes guest-v46-greet {
  0%, 54%, 100% { transform: translate(0, 0); }
  63% { transform: translate(0, -2px); }
  72% { transform: translate(1px, -1px); }
  82% { transform: translate(0, 0); }
}

@keyframes guest-v46-composed {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.004); }
}

@keyframes guest-v46-steady {
  0%, 44%, 100% { transform: translateX(0); }
  52% { transform: translateX(-1px); }
  60% { transform: translateX(0); }
}

@media (min-width: 721px) and (min-height: 500px) {
  .shop .shop-counter-foreground img {
    bottom: -28px;
    filter: brightness(.78) saturate(.8) contrast(.89);
  }

  .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: clamp(344px, 27vw, 366px);
    height: clamp(344px, 27vw, 366px);
  }

  .shop .order-rail-slot {
    bottom: 2.8%;
    width: 188px;
    height: 60px;
  }

  .shop .order-rail-slot.left { left: 40%; }
  .shop .order-rail-slot.right { left: 60%; }

  .shop .order-rail-ticket {
    width: 188px;
    height: 60px;
    padding: 8px 13px 9px 11px;
    grid-template-columns: 40px minmax(0, 1fr);
    filter: brightness(1.05) drop-shadow(0 6px 7px rgb(13 8 12 / 58%));
  }

  .shop .order-rail-ticket .order-dish {
    width: 38px;
    height: 38px;
  }

  .shop .order-rail-ticket .order-line {
    gap: 5px;
    font-size: 11px;
  }

  .shop .order-rail-ticket .order-level {
    font-size: 9px;
  }

  .top-actions {
    margin-top: 7px;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .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: 214px;
    height: 214px;
  }

  .shop .order-rail-slot {
    bottom: 4%;
    width: 128px;
    height: 48px;
  }

  .shop .order-rail-slot.left { left: 28%; }
  .shop .order-rail-slot.right { left: 69%; }

  .shop .order-rail-ticket {
    width: 128px;
    height: 48px;
    padding: 5px 8px 6px;
    grid-template-columns: 30px minmax(0, 1fr);
    filter: brightness(1.06) drop-shadow(0 4px 5px rgb(13 8 12 / 58%));
  }

  .shop .order-rail-ticket .order-dish {
    width: 29px;
    height: 29px;
  }

  .shop .order-rail-ticket .order-line,
  .shop .order-rail-ticket .order-level {
    font-size: 9px;
  }

  .game-shell.phase-playing .top-actions,
  .game-shell.phase-training .top-actions {
    opacity: .42;
  }

  .top-actions .icon-btn {
    transform: scale(.8);
    filter: saturate(.65) brightness(.78);
  }

  .top-actions .icon-btn:hover,
  .top-actions .icon-btn:focus-visible {
    filter: none;
  }

  .purchase-dock .buy-btn .supply-copy b {
    font-size: 9px;
  }

  .purchase-dock .buy-btn .supply-copy span {
    font-size: 8px;
  }

  .merge-panel .board-wrap {
    filter: drop-shadow(0 7px 9px rgb(8 6 11 / 28%));
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  .game-shell.phase-playing .shop,
  .game-shell.phase-training .shop {
    top: 0;
    height: 116px;
  }

  .shop .shop-counter-foreground img {
    bottom: -64px;
  }

  .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: 154px;
    height: 154px;
  }

  .shop .order-rail-slot {
    bottom: 2%;
    width: 126px;
    height: 44px;
  }

  .shop .order-rail-ticket {
    width: 126px;
    height: 44px;
    padding: 4px 7px 5px;
    grid-template-columns: 28px minmax(0, 1fr);
    filter: brightness(1.08) drop-shadow(0 4px 5px rgb(13 8 12 / 58%));
  }

  .shop .order-rail-ticket .order-dish {
    width: 27px;
    height: 27px;
  }

  .shop .order-rail-ticket .order-line,
  .shop .order-rail-ticket .order-level {
    font-size: 9px;
  }

  .shop .order-rail-ticket .order-level {
    font-size: 8px;
  }

  .game-shell.phase-playing .top-actions,
  .game-shell.phase-training .top-actions {
    opacity: .4;
  }

  .top-actions .icon-btn {
    transform: scale(.74);
    filter: saturate(.62) brightness(.76);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop .customer:not(.preview) .alien-figure {
    animation: none !important;
  }
}