/* ==========================================================
 * Interactive Toys — 交互玩偶重力画板样式
 * ========================================================== */

body.toys-canvas-body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #ffffff; /* 纯白色背景 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

.toys-canvas {
  position: fixed;
  inset: 0;
  z-index: 1; /* 浮在背景最底层，但低于 site-header */
  overflow: hidden;
  background-color: #ffffff;
}

/* ── 介绍文本与避让字粒子 ────────────────────────────── */
.toys-intro-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  max-width: 760px;
  z-index: 2; /* 浮在玩偶之上 */
  font-size: 14px;
  line-height: 1.8;
  color: #333333;
  text-align: justify;
  pointer-events: none; /* 穿透鼠标，使用户依然可以抓取下层玩偶 */
  user-select: none;
  -webkit-user-select: none;
}

.char-particle {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}

.char-particle.is-evading {
  transition: transform 0.08s linear;
}

.toys-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.toy-item {
  position: absolute;
  cursor: grab;
  transform-origin: center center;
  touch-action: none;
  box-sizing: border-box;
}

.toy-item:active {
  cursor: grabbing;
}

.toy-item svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 防止干扰拖拽 */
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.06));
  transition: filter 0.2s ease;
}

.toy-item:hover svg {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
}