* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; overscroll-behavior:none; }
body {
  display:flex; flex-direction:column;
  background:#5BB8DC;
  font-family:-apple-system, "Hiragino Maru Gothic ProN", sans-serif;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
#stageWrap { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
#stage { width:100%; height:100%; display:block; }

#dock {
  height:92px; flex:0 0 92px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  background:#3E4A63;
}
.tabs { display:flex; gap:10px; }
.tab {
  width:76px; height:72px; border:none; border-radius:20px;
  background:#57657F; cursor:pointer; padding:12px;
  transition: transform .12s ease, background .12s ease;
}
.tab svg { width:100%; height:100%; }
.tab.active { background:#F5A25D; transform:translateY(-4px); }
.tab.droptarget { background:#8BD46E; transform:scale(1.12); }
.tab:active { transform:scale(.94); }

#bag { display:flex; gap:8px; align-items:center; }
.slot {
  width:64px; height:64px; border-radius:18px;
  background:#2E3850; border:3px dashed #57657F;
  display:flex; align-items:center; justify-content:center;
}
.slot.filled { border-style:solid; border-color:#F5D45D; background:#455073; }
.slot.droptarget { border-color:#8BD46E; transform:scale(1.1); background:#3d5a45; }
.slot svg { width:48px; height:48px; pointer-events:none; }

/* entities */
.ent { cursor:grab; }
.ent.dragging { cursor:grabbing; }
.tappable { cursor:pointer; }

.eye { transition: transform .08s ease; }
.eye.blink { transform: scaleY(0.12); }

@keyframes floatUp {
  from { opacity:1; transform: translateY(0) scale(1); }
  to   { opacity:0; transform: translateY(-70px) scale(1.4); }
}
.float-up { animation: floatUp 1s ease-out forwards; }

@keyframes crumbFall {
  from { opacity:1; transform: translateY(0); }
  to   { opacity:0; transform: translateY(40px); }
}
.crumb { animation: crumbFall .7s ease-in forwards; }

@keyframes wob {
  0%{transform:rotate(0)} 25%{transform:rotate(-6deg)} 50%{transform:rotate(5deg)} 75%{transform:rotate(-3deg)} 100%{transform:rotate(0)}
}
.wobble { animation: wob .45s ease; }