:root { --scale: 1; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #172b31;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: Arial, sans-serif;
}

.app {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, #8ee8ee 0, #3a7e8e 60%, #172b31 100%);
}

.stage {
  position: relative;
  flex: 0 0 800px;
  width: 800px; height: 600px;
  overflow: hidden;
  transform: scale(var(--scale));
  transform-origin: center;
  background: #fff;
  box-shadow: 0 12px 45px rgba(0,0,0,.42);
  touch-action: none;
}

.screen { position: absolute; inset: 0; overflow: hidden; }
.hidden { display: none !important; }
.asset { position: absolute; pointer-events: none; }
.hot { position: absolute; border: 0; background: transparent; cursor: pointer; }

.background { left: -63.05px; top: -132.05px; width: 1083.25px; height: 908.25px; }
.wardrobe { left: 4.735px; top: 26.71px; width: 551.766px; height: 604.893px; }
.girl { left: 534.25px; top: 48.65px; width: 217px; height: 531.4px; }

.items { position: absolute; inset: 0; pointer-events: none; }
.dress-item {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  transform-origin: 0 0;
  transition: left .42s ease-in, top .42s ease-in, width .15s, height .15s, filter .15s;
}
.dress-item:hover { filter: drop-shadow(0 0 6px rgba(255,255,255,.95)); }
.dress-item.dragging { cursor: grabbing; transition: none; filter: drop-shadow(0 3px 7px rgba(0,0,0,.35)); }
.dress-item.snapped { transition: left .15s ease-out, top .15s ease-out, width .15s, height .15s; }

.image-button {
  position: absolute; top: 563px; width: 24px; height: 25px;
  padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 2900;
}
.image-button img { width: 100%; height: 100%; display: block; pointer-events: none; }
.image-button:active { transform: scale(.92); }
.done-action { left: 720px; }
.tips-action { left: 747px; }
.reset-action { left: 774px; }

.overlay, .done-overlay { position: absolute; inset: 0; z-index: 5000; }
.overlay > img { position: absolute; left: 0; top: 0; width: 850.85px; height: 600px; pointer-events: none; }
.tips-close { left: 763px; top: 8px; width: 29px; height: 27px; }
.done-overlay { pointer-events: none; }
.done-overlay > img { position: absolute; left: 0; top: -15px; width: 800px; height: 600px; pointer-events: none; }
.done-overlay .hot { pointer-events: auto; }
.replay-hot { left: 176px; top: 530px; width: 117px; height: 46px; }

@media (pointer: coarse) {
  .image-button { top: 563px; }
}