/* The play screen: HUD along the top, the sticker tray along the bottom and
   the tweezers carrying a sticker (js/ui/play.js). Screens and buttons are
   in style.css. */

.play { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.play.in { opacity: 1; }
.play > * { pointer-events: auto; }
.play.holding, .play.holding * { cursor: grabbing; }

/* ---------------------------------------------------------------- HUD */
.hud {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 0 calc(env(safe-area-inset-left, 0px) + 14px);
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud-mid {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: rgba(255, 250, 242, 0.88); border: 2px solid var(--line, #efe3d2);
  border-radius: 999px; padding: 7px 16px; box-shadow: 0 6px 18px rgba(61, 44, 85, 0.12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hud-title { font-weight: 700; font-size: 20px; color: var(--ink, #3d2c55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.hud-dots .dot { width: 12px; height: 12px; border-radius: 50%; background: #e7dccd; box-shadow: inset 0 1px 2px rgba(61, 44, 85, 0.18); transition: background 0.3s, transform 0.3s; }
.hud-dots .dot.on { background: #8fcf9b; transform: scale(1.15); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(61, 44, 85, 0.25); }

/* ---------------------------------------------------------------- tray */
.tray {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: linear-gradient(#fffaf2f2, #fbf1e3f2);
  border-top: 2px solid var(--line, #efe3d2);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 30px rgba(61, 44, 85, 0.12);
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
  touch-action: pan-x;
}
/* An empty tray stays put at the same height, so the scene doesn't zoom or jump. */
.play[data-mode='room'] .tray.empty { transform: none; }
.tray-list { box-sizing: border-box; min-height: 90px; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 2px; scrollbar-width: none; justify-content: safe center; }
.tray-list::-webkit-scrollbar { display: none; }
.tray-hint { text-align: center; color: var(--ink-soft, #7d6c93); font-size: 15px; font-weight: 600; }
.tray-hint:empty { display: none; }
.tray-item {
  position: relative; flex: 0 0 auto; width: 84px; height: 84px; padding: 0; border: 0; background: none;
  cursor: grab; touch-action: pan-x; -webkit-tap-highlight-color: transparent; font: inherit;
}
.tray-sheet {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: #fff; border-radius: 18px; border: 2px dashed #eadfce;
  box-shadow: 0 3px 0 #efe3d2;
}
.tray-art { max-width: 70px; max-height: 70px; width: auto; height: auto; transition: transform 0.2s ease; filter: drop-shadow(0 2px 2px rgba(61, 44, 85, 0.15)); }
.tray-item:hover .tray-art { transform: rotate(-4deg) scale(1.06); }
.tray-item.peeling .tray-art { transform: translateY(-14px) rotate(-12deg) scale(0.9); opacity: 0.4; transition: transform 0.15s ease, opacity 0.15s; }
.tray-count {
  position: absolute; right: -4px; top: -6px; min-width: 30px; padding: 2px 7px;
  background: var(--sage, #8fcf9b); color: #fff; font-weight: 700; font-size: 15px; border-radius: 999px;
  box-shadow: 0 2px 0 #5fa56d; -webkit-text-stroke: 0.4px #3d7a49;
}

/* ---------------------------------------------------------------- held sticker and tweezers */
.held-layer { position: absolute; inset: 0; pointer-events: none !important; overflow: hidden; }
.held { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.held-sticker {
  position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h);
  transform: scale(0.6) rotate(-6deg); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), filter 0.2s, width 0.2s, height 0.2s;
  filter: drop-shadow(0 10px 8px rgba(61, 44, 85, 0.28));
}
.held.in .held-sticker { transform: rotate(-3deg); }
.held.near .held-sticker { transform: scale(1.06); filter: drop-shadow(0 4px 3px rgba(61, 44, 85, 0.25)); }
.held-art { width: 100%; height: 100%; display: block; }
.held.wobble .held-sticker { animation: heldWobble 0.4s ease; }
.held.going { transition: left 0.4s ease-in, top 0.4s ease-in, opacity 0.4s ease-in; opacity: 0; }
.held.going .held-sticker { transform: scale(0.3) rotate(10deg); transition: transform 0.4s ease-in; }

@keyframes heldWobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -6deg; } 75% { rotate: 6deg; } }

/* ---------------------------------------------------------------- rooms: a selected sticker and its ✕ */
.sel-layer { position: absolute; inset: 0; pointer-events: none !important; overflow: hidden; }
.sel-ring {
  position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  border: 3px dashed #fff; box-shadow: 0 0 0 3px rgba(151, 117, 250, 0.55), 0 0 18px rgba(255, 255, 255, 0.8);
  animation: selPulse 1.2s ease-in-out infinite alternate;
}
.sel-x {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  border: 3px solid #fff; background: var(--red, #ff6b6b); color: #fff;
  font: 700 22px/1 var(--font, sans-serif); cursor: pointer;
  box-shadow: 0 4px 0 var(--red-d, #d14848), 0 6px 14px rgba(61, 44, 85, 0.3);
  animation: selPop 0.3s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.sel-x:active { transform: translate(-50%, -46%); box-shadow: 0 1px 0 var(--red-d, #d14848); }
@keyframes selPulse { from { scale: 1; } to { scale: 1.06; } }
@keyframes selPop { from { scale: 0; } to { scale: 1; } }

/* Holding a placed sticker in a room: a ring fills up, then the ✕ appears. */
.hold-ring {
  position: absolute; width: 74px; height: 74px; transform: translate(-50%, -50%); border-radius: 50%;
  background: conic-gradient(rgba(255, 107, 107, 0.85) calc(var(--p, 0) * 1turn), rgba(255, 255, 255, 0.35) 0);
  -webkit-mask: radial-gradient(circle, transparent 27px, #000 28px); mask: radial-gradient(circle, transparent 27px, #000 28px);
  animation: holdFill var(--t, 800ms) linear forwards;
  filter: drop-shadow(0 2px 6px rgba(61, 44, 85, 0.3));
}
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes holdFill { from { --p: 0.1; } to { --p: 1; } }

/* ---------------------------------------------------------------- sparkles when a sticker sticks */
.sparkle { position: absolute; width: 0; height: 0; }
.sparkle i {
  position: absolute; left: -6px; top: -10px; font-style: normal; font-size: 18px; color: #ffd43b;
  text-shadow: 0 0 6px #fff6c4; animation: spark 0.85s ease-out forwards;
}
.sparkle i:nth-child(3n) { color: #f7a8c4; }
.sparkle i:nth-child(3n + 1) { color: #a5d8ff; }
@keyframes spark {
  from { transform: rotate(var(--a)) translateY(0) scale(0.4); opacity: 1; }
  to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1); opacity: 0; }
}

@media (max-width: 520px) {
  .hud-title { font-size: 17px; }
  .tray-item { width: 72px; height: 72px; }
  .tray-art { max-width: 60px; max-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .held-sticker, .tray-art, .tray { transition: none; }
  .sparkle i { animation-duration: 0.01s; }
}

/* ---------------------------------------------------------------- "it can't go there" bubble, where the drop was */
.drop-tip {
  position: absolute; transform: translate(-50%, -100%); padding: 9px 16px; border-radius: 18px;
  background: #fff; color: var(--ink, #3d2c55); font: 600 17px/1.25 var(--font, sans-serif); text-align: center;
  border: 3px solid #ffb02e; box-shadow: 0 5px 0 #e99a1f, 0 8px 18px rgba(61, 44, 85, 0.25);
  animation: tipPop 0.3s cubic-bezier(0.3, 1.8, 0.5, 1); transition: opacity 0.5s;
}
.drop-tip::after {
  content: ''; position: absolute; left: 50%; bottom: -11px; width: 16px; height: 16px; background: #fff;
  border: 3px solid #ffb02e; border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg);
}
.drop-tip.out { opacity: 0; }
@keyframes tipPop { from { scale: 0.5; opacity: 0; } to { scale: 1; opacity: 1; } }