/* V55: one guided action at a time, on one shared worktop perspective. */

.game-shell {
  --scene-vanishing-x: 50%;
  --board-pitch: 9deg;
  --board-contact-shadow: rgb(16 9 10 / 48%);
}

.merge-panel .board-wrap {
  overflow: visible;
  filter: none;
  perspective: none;
}

.merge-panel .board-stage {
  left: 0;
  padding-bottom: 0;
  transform: perspective(1400px) rotateX(var(--board-pitch));
  transform-origin: var(--scene-vanishing-x) 18%;
  filter: drop-shadow(0 6px 5px var(--board-contact-shadow));
}

.merge-panel .board-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 9%;
  bottom: 2px;
  left: 9%;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--board-contact-shadow), transparent 72%);
  filter: blur(4px);
  pointer-events: none;
}

.merge-panel .board-tray-base img {
  filter: brightness(.98) saturate(.92) sepia(.02);
}

@media (min-width: 721px) and (min-height: 500px) {
  .merge-panel .board-stage {
    top: -42px;
    width: 395px;
    height: 296px;
  }
}

@media (min-width: 721px) and (min-height: 500px) and (max-aspect-ratio: 3 / 2) {
  .merge-panel .board-stage {
    top: -8px;
    width: 360px;
    height: 270px;
  }
}

@media (min-width: 721px) and (max-width: 780px) and (min-height: 500px) and (max-aspect-ratio: 3 / 2) {
  .merge-panel .board-stage {
    top: -4px;
    width: 320px;
    height: 240px;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .game-shell { --board-pitch: 6deg; }

  .merge-panel .board-stage {
    top: -8px;
    width: 360px;
    height: 360px;
    transform: perspective(1400px) rotateX(var(--board-pitch));
    transform-origin: var(--scene-vanishing-x) 18%;
    filter: drop-shadow(0 5px 4px var(--board-contact-shadow));
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  .game-shell { --board-pitch: 6deg; }

  .merge-panel .board-stage {
    top: -12px;
    width: 274px;
    height: 206px;
    transform: perspective(1400px) rotateX(var(--board-pitch));
    transform-origin: var(--scene-vanishing-x) 18%;
    filter: drop-shadow(0 4px 4px var(--board-contact-shadow));
  }
}

/* Training keeps the room visible while removing every false affordance. */
.game-shell.phase-training .buy-btn:not(.training-target),
.game-shell.phase-training .cell[aria-disabled="true"] {
  opacity: .42;
  filter: saturate(.58) brightness(.68);
  pointer-events: none;
}

.game-shell.phase-training .customer:not(.preview):not(.training-target) {
  opacity: .72;
  filter: saturate(.72) brightness(.78);
  pointer-events: none;
}

.game-shell.phase-training .training-target:not(.customer):not(.order-rail-slot) {
  position: relative;
  z-index: 31;
  outline: 4px solid #fff09a;
  outline-offset: 4px;
  filter: brightness(1.1) saturate(1.06) drop-shadow(0 0 10px rgb(255 217 108 / 88%));
  animation: v55-training-pulse 850ms ease-in-out infinite alternate;
}

.game-shell.phase-training.step-merge .cell.filled:not(.training-target),
.game-shell.phase-training.step-serve .customer:first-child .speech {
  outline: 0;
  animation: none;
}

.game-shell.phase-training .cell.training-target,
.game-shell.phase-training .buy-btn.training-target {
  min-width: 44px;
  min-height: 44px;
}

.game-shell.phase-training .training-target[data-guide-label]::before {
  content: attr(data-guide-label);
  position: absolute;
  z-index: 42;
  left: 50%;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: 120px;
  padding: 5px 9px 4px;
  border: 1px solid #fff0a0;
  border-radius: 999px;
  background: #6b3046;
  box-shadow: 0 4px 10px rgb(14 8 13 / 48%);
  color: #fff5c9;
  font: 900 11px/1.15 var(--ui);
  text-align: center;
  text-shadow: 0 1px #2b1721;
  transform: translateX(-50%);
  pointer-events: none;
}

.game-shell.phase-training .training-target[data-guide-label]::after {
  content: "";
  position: absolute;
  z-index: 41;
  left: 50%;
  bottom: calc(100% + 3px);
  border: 7px solid transparent;
  border-top-color: #fff0a0;
  transform: translateX(-50%);
  pointer-events: none;
}

.game-shell.phase-training .customer.training-target {
  opacity: 1;
  filter: none;
}

.game-shell.phase-training .customer.training-target .alien-wrap {
  filter: brightness(1.06) drop-shadow(0 0 12px rgb(255 233 141 / 74%));
}

.game-shell.phase-training .order-rail-slot.training-target {
  z-index: 31;
}

.game-shell.phase-training .order-rail-slot.training-target::before {
  bottom: calc(100% + 8px);
}

.game-shell.phase-training .order-rail-slot.training-target::after {
  bottom: calc(100% + 1px);
}

.game-shell.phase-training .order-rail-slot.training-target .order-rail-ticket {
  outline: 4px solid #fff09a;
  outline-offset: 4px;
  filter: brightness(1.1) drop-shadow(0 0 10px rgb(255 217 108 / 84%));
  animation: v55-training-pulse 850ms ease-in-out infinite alternate;
}

@keyframes v55-training-pulse {
  from { outline-color: rgb(255 240 154 / 72%); }
  to { outline-color: #fff6bd; }
}

@media (max-height: 430px) and (orientation: landscape) {
  .game-shell.phase-training .training-target[data-guide-label]::before {
    bottom: calc(100% + 6px);
    max-width: 96px;
    padding: 3px 7px;
    font-size: 9px;
  }

  .game-shell.phase-training .training-target[data-guide-label]::after {
    bottom: calc(100% - 1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-shell.phase-training .training-target,
  .game-shell.phase-training .order-rail-slot.training-target .order-rail-ticket {
    animation: none !important;
  }
}