/* 透明な全画面シート（子だけ操作可能） */
#monolith-ms-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
}

/* ステッカー本体（個体ごとに fixed をJSで付与） */
#monolith-ms-layer .ms-sticker{
  pointer-events: auto;
  width: 200px;
  height: 200px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.40);
  cursor: pointer;
  display: grid;
  place-items: center;

  /* 手触り */
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);

  /* ripple用 */
  overflow: hidden;
  position: fixed; /* JSが付けるが保険 */
}

/* ホバー：少し浮く */
#monolith-ms-layer .ms-sticker:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}

/* クリック：押し込み */
#monolith-ms-layer .ms-sticker:active{
  transform: translateY(0) scale(0.96);
}

/* ドラッグ中 */
#monolith-ms-layer .ms-sticker.is-dragging{
  cursor: grabbing;
  transform: scale(1.02);
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
}

/* アイコン */
#monolith-ms-layer .ms-sticker__icon{
  width: 160px;
  height: 160px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- motion presets ---- */

/* 1) 常時ふわふわ（上下） */
@keyframes ms-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.ms-motion--float{
  animation: ms-float 2.6s ease-in-out infinite;
}

/* 2) 常時ぷるす（拡縮） */
@keyframes ms-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.ms-motion--pulse{
  animation: ms-pulse 1.8s ease-in-out infinite;
}

/* 3) ホバー時だけ揺れる */
@keyframes ms-jiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-4deg); }
  50%  { transform: rotate(4deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
.ms-motion--jiggle_on_hover:hover{
  animation: ms-jiggle .25s ease-in-out 2;
}

/* ripple */
.ms-ripple{
  position: absolute;
  border-radius: 999px;
  transform: scale(0);
  opacity: .35;
  background: rgba(0,0,0,.25);
  animation: ms-ripple .45s ease-out;
  pointer-events: none;
}
@keyframes ms-ripple{
  to { transform: scale(2.4); opacity: 0; }
}

/* OSの「動き減らす」に従う（安全） */
@media (prefers-reduced-motion: reduce){
  .ms-motion--float,
  .ms-motion--pulse,
  .ms-motion--jiggle_on_hover:hover{
    animation: none !important;
  }
  #monolith-ms-layer .ms-sticker{
    transition: none !important;
  }
}