/* The play screen: HUD along the top, the sticker tray along the bottom and
   the held thing (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; }
/* style.css gives every #ui screen pointer-events, which would put this
   full-screen layer over the café: the mouse wheel and pinches (and iPad page
   zoom) must reach the canvas underneath. */
#ui > .play { pointer-events: none; }
.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;
}
.tray.empty { transform: translateY(calc(100% - 6px)); }
.play[data-mode='room'] .tray.empty { transform: none; }
.tray-list { 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 thing */
.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); }
.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; }
}

/* ------------------------------------------------------------ Pet Café */

.hud-night { margin-left: auto; font-size: 24px; }
.hud-mid { min-width: 0; }

/* The tray's filter tabs: one row of chunky little tabs above the things. */
.tray-tabs {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 0 4px 8px; justify-content: safe center;
}
.tray-tabs::-webkit-scrollbar { display: none; }
.tray-tab {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 4px 14px 4px 10px; border-radius: 999px;
  border: 2px solid var(--line, #efe3d2); background: #fff;
  box-shadow: 0 3px 0 var(--line-d, #e3d3bc);
  font: 600 16px Fredoka, ui-rounded, system-ui, sans-serif; color: var(--ink, #3d2c55);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, background 0.2s;
}
.tray-tab:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line-d, #e3d3bc); }
.tray-tab.on { background: #ffd8b8; border-color: #f4a96b; box-shadow: 0 3px 0 #d98945; }
.tab-emoji { font-size: 20px; line-height: 1; }
@media (max-width: 760px) {
  .tray-tab .tab-name { display: none; }
  .tray-tab { padding: 4px 12px; }
  .tray-tab.on .tab-name { display: inline; }
}

/* Hearts and Zzz floating up from the animals. */
.life-layer { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.floater {
  position: absolute; transform: translate(-50%, -50%);
  font: 700 26px Fredoka, ui-rounded, system-ui, sans-serif;
  animation: float-up 2s ease-out forwards;
}
.floater.heart { color: #ff6b8a; text-shadow: 0 0 0 #fff, 0 2px 0 #fff, 0 2px 6px rgba(61, 44, 85, 0.25); }
.floater.z { color: #8f9cff; font-size: 22px; text-shadow: 0 2px 0 #fff; }
@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + 14px), -260%) scale(1.15); }
}
body.night .hud-title { color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }

/* ------------------------------------------------------------ Pet Café: coins */

.hud-coins {
  margin-left: auto; padding: 8px 16px; border-radius: 999px;
  background: #fff7d6; border: 2px solid #f2c94c; box-shadow: 0 4px 0 #dba600;
  font: 700 22px Fredoka, ui-rounded, system-ui, sans-serif; color: var(--ink, #3d2c55);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hud-coins.bump { animation: coin-bump 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes coin-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.hud-night { margin-left: 0; }

/* Price tags on the tray; what you can't afford yet is faded. */
.tray-price {
  position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
  padding: 1px 8px; border-radius: 999px; background: #fff7d6; border: 1.5px solid #f2c94c;
  font: 700 13px Fredoka, ui-rounded, system-ui, sans-serif; color: #8a5a00; white-space: nowrap;
  pointer-events: none;
}
.tray-item.cant .tray-art { opacity: 0.38; filter: grayscale(0.7); }
.tray-item.cant .tray-price { background: #f3efe9; border-color: #d9cfc2; color: var(--ink-soft, #7d6c93); }
.tray-item.shake { animation: tray-shake 0.4s ease; }
@keyframes tray-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* "−8 🪙" when you buy, "+8 🪙" when you take something back. */
.coin-pop {
  position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 20;
  font: 700 24px Fredoka, ui-rounded, system-ui, sans-serif; text-shadow: 0 2px 0 #fff, 0 0 6px #fff;
  animation: float-up 1.4s ease-out forwards;
}
.coin-pop.spend { color: #d14848; }
.coin-pop.earn { color: #2f9a4c; }
.floater.coin { color: #b07900; font-size: 24px; text-shadow: 0 2px 0 #fff, 0 0 6px #fff; }
.floater.say { font-size: 30px; }
@media (max-width: 520px) {
  .hud-coins { font-size: 18px; padding: 6px 12px; }
}
/* ---------------------------------------------------------------- "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; } }