.tour-hotspot.tour-memory {
  translate: -50% -100%;
  border-radius: 15%;
  touch-action: manipulation;
}
.tour-hotspot.tour-memory-box {
  z-index: 1;
  width: var(--toy-width, 0px);
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1.9;
}
.tour-memory-box::before,
.tour-memory-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.tour-memory-box::before {
  aspect-ratio: 1.9;
  background-image: url("assets/room-tour/memory-game/toy-box.webp");
  filter: drop-shadow(0 1px 1px #66473838);
}
.tour-memory-box::after {
  aspect-ratio: 1;
  background-image: url("assets/room-tour/memory-game/toy-box-open.webp");
  opacity: 0;
  filter: drop-shadow(0 1px 1px #66473838);
}
@media (hover: hover) {
  .tour-memory-box:hover::before { opacity: 0; }
  .tour-memory-box:hover::after { opacity: 1; filter: brightness(1.14) drop-shadow(0 1px 1px #66473838); }
}
.tour-memory-box:focus-visible::before { opacity: 0; }
.tour-memory-box:focus-visible { outline: none; }
.tour-memory-box:focus-visible::after { opacity: 1; filter: brightness(1.18) drop-shadow(0 1px 1px #66473838); }
.tour-memory-box:active::before { filter: brightness(1.18) drop-shadow(0 1px 1px #66473838); }
@media (prefers-reduced-motion: reduce) {
  .tour-memory-box::before, .tour-memory-box::after { transition: none; }
}
.tour-memory.is-touched { animation: memory-touch 140ms ease-out; }
@keyframes memory-touch {
  45% { filter: brightness(1.18); scale: .96; }
}
.tour-dialog[data-kind="memory-preview"] {
  --card-width: clamp(44px, calc((100dvh - 118px) / 3.75), 86px);
  position: fixed;
  inset: 0;
  margin: auto;
  width: max-content;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  border: 1px solid #ae907d;
  border-radius: 13px 10px 15px 11px;
  background: #f8e3e5 url("assets/room-tour/memory-game/toy-box-lining.webp") center / 100% 100%;
  box-shadow: 0 3px 9px #73554224;
}
.tour-dialog[data-kind="memory-preview"]::backdrop { background: #49352815; }
.tour-dialog[data-kind="memory-preview"] .tour-dialog-head {
  padding: 2px 12px;
  background: transparent;
}
.tour-dialog[data-kind="memory-preview"] h2 { font-size: 17px; }
.tour-dialog[data-kind="memory-preview"] .tour-dialog-body { padding: 13px 14px 14px; }
.hanging-board {
  display: grid;
  grid-template-columns: repeat(4, min(var(--card-width), calc((100vw - 96px) / 4)));
  gap: 12px 13px;
}
.tour-dialog .hanging-card,
.tour-dialog .hanging-card:hover {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  background: none;
  border: 0;
  overflow: visible;
  touch-action: manipulation;
  animation: hanging-deal 320ms ease-out var(--deal-delay) both;
}
.hanging-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -6px;
  left: 50%;
  translate: -50%;
  width: 3px;
  height: 9px;
  border-radius: 60%;
  background: #ac896d;
  box-shadow: inset 1px 0 #d0ab89;
  pointer-events: none;
}
.hanging-swing {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 0;
  rotate: calc(var(--tilt) + var(--swing, 0deg));
}
.hanging-face {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #fff1dc;
  border-radius: 8% 7% 9% 7%;
  background: #dda6a0 var(--card-back) center / cover;
  box-shadow: 0 1px #d2b69e, 1px 2px 4px #6c493138;
}
@keyframes hanging-deal { from { opacity: 0; translate: 0 -8px; } }
@media (max-height: 360px) {
  .tour-dialog[data-kind="memory-preview"] { --card-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-memory.is-touched,
  .tour-dialog .hanging-card,
  .tour-dialog .hanging-card:hover { animation: none; }
}

.hanging-swing { perspective: 500px; }
.hanging-flip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform 400ms ease-in-out;
}
.hanging-flip > .hanging-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  pointer-events: none;
}
.hanging-flip > .hanging-photo {
  transform: rotateY(180deg);
  object-fit: cover;
  background: #f5e6d7;
}
.hanging-card.is-revealed .hanging-flip { transform: rotateY(180deg); }
.hanging-card.is-matched .hanging-photo { border-color: #f8d59b; box-shadow: 0 0 0 2px #b28a58; }
.hanging-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 13px; }
.hanging-footer .is-complete { animation: memory-blessing 650ms ease-out; }
@keyframes memory-blessing { from { opacity: .35; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .hanging-flip { transition: none; }
  .hanging-footer .is-complete { animation: none; }
}