/* ═══════════════════════════════════════════════════════════════
   steve.css — 首页右侧悬浮的《我的世界》Steve 3D 人物
   挂载点：.home-steve（three-effects.js 的 buildSteveFX 注入 canvas + 切换按钮）
   ═══════════════════════════════════════════════════════════════ */

/* hero 需为定位上下文（即便 Hero 3D 未加载也保证绝对定位生效） */
.home-hero { position: relative; }

.home-steve {
  position: absolute !important;
  top: auto !important;
  right: clamp(4px, 1.5vw, 34px);
  bottom: 4%;
  transform: none !important;
  z-index: 4 !important;
  width: clamp(120px, 14vw, 190px);
  height: clamp(200px, 34vh, 330px);
  pointer-events: none;
}

/* 角色画布：可拖拽旋转 / 滚轮缩放，仅占用自身矩形 */
.steve-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
  cursor: grab;
}
.steve-canvas:active { cursor: grabbing; }

/* 精简切换按钮（待机 / 走路） */
.steve-toggle {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  pointer-events: auto;
  white-space: nowrap;
}
.steve-toggle button {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: rgba(234, 237, 243, 0.82);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(16, 22, 40, 0.5);
  border: 1px solid rgba(148, 163, 255, 0.22);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.steve-toggle button:hover { transform: scale(1.06); }
.steve-toggle button.active {
  background: linear-gradient(180deg, #38bdf8, #2f7cf6);
  border-color: transparent;
  color: #04101f;
}
:root.light .steve-toggle button {
  color: rgba(20, 28, 55, 0.72);
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(31, 38, 135, 0.14);
}
:root.light .steve-toggle button.active {
  color: #04101f;
  background: linear-gradient(180deg, #38bdf8, #2f7cf6);
}

/* 宽屏：文案卡片右侧留白，避免正文压到悬浮的 Steve */
@media (min-width: 901px) {
  .home-hero-copy {
    padding-right: clamp(150px, 19vw, 240px) !important;
  }
}

/* 窄屏隐藏：移动端本就不加载 Three FX，桌面窄窗也避免遮挡文案 */
@media (max-width: 900px) {
  .home-steve { display: none; }
}