/* ============================================================
   LoveElysia Theme — Effects Control Panel
   基于 core/controls-base.css 的通用控件体系，仅保留特化样式
   ============================================================ */

/* ============================================================
   齿轮入口按钮（固定位置，不可拖拽）
   ============================================================ */
.ctrl-toggle {
  position: fixed;
  right: calc(1.2vw + 0.8dvh);
  top: calc(1.2vw + 0.8dvh);
  z-index: 50;
  width: calc(var(--ctrl-font) * 2.6);
  height: calc(var(--ctrl-font) * 2.6);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  max-width: var(--touch-max);
  max-height: var(--touch-max);
  border-radius: 50%;
  border: 1px solid rgba(255, 105, 180, 0.2);
  background: rgba(17, 10, 28, 0.7);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.6);
  font-size: calc(var(--ctrl-font) * 1.15);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  box-shadow: 0 0 calc(var(--ctrl-font) * 0.5) rgba(255, 105, 180, 0.1);
}
/* 齿轮 SVG 旋转动效：展开→顺时针 90°，折叠→逆时针归位 */
.ctrl-toggle svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.ctrl-toggle.active svg {
  transform: rotate(90deg);
}
.ctrl-toggle:hover {
  border-color: rgba(255, 105, 180, 0.4);
  color: white;
  box-shadow:
    0 0 calc(var(--ctrl-font) * 0.8) rgba(255, 105, 180, 0.2),
    0 0 calc(var(--ctrl-font) * 1.5) rgba(255, 105, 180, 0.08);
  transform: scale(1.06);
}
.ctrl-toggle:active {
  transform: scale(0.94);
}
.ctrl-toggle.active {
  border-color: rgba(255, 105, 180, 0.4);
  color: white;
  background: rgba(255, 105, 180, 0.12);
  box-shadow: 0 0 calc(var(--ctrl-font) * 0.8) rgba(255, 105, 180, 0.25);
}

/* ============================================================
   效果控制台面板
   基础视觉来自 core .ctrl-panel，此处仅覆写位置 / 层级 / 动画
   ============================================================ */
#ctrlPanel {
  z-index: 49; /* 在齿轮按钮 (z: 50) 之下 */
  width: auto; /* 由内容自适应，避免固定宽度导致氛围特效组溢出 */
  max-width: min(calc(var(--ctrl-font) * 16), calc(100vw - max(20px, 1.5vw)));
  overflow-x: hidden; /* max-width 截断时隐藏溢出内容 */
  transform-origin: top right; /* 从齿轮按钮方向展开 */
}

/* 标题：增加 ⠿ 指示器和分隔线 */
#ctrlPanel .ctrl-panel-title {
  color: rgba(255, 105, 180, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  user-select: none;
}
#ctrlPanel .ctrl-panel-title::before {
  content: "⠿";
  display: inline-block;
  margin-right: calc(var(--ctrl-font) * 0.25);
  font-size: 0.75em;
  opacity: 0.3;
  letter-spacing: 0;
  vertical-align: middle;
}

/* 开关颜色覆写：主页粉色系比 core 默认更饱和 */
#ctrlPanel .ctrl-switch.on {
  background: rgba(255, 105, 180, 0.35);
}
#ctrlPanel .ctrl-switch.on::after {
  box-shadow: 0 0 calc(var(--ctrl-font) * 0.25) rgba(255, 105, 180, 0.5);
}
#ctrlPanel .ctrl-switch:hover {
  background: rgba(255, 255, 255, 0.12);
}
#ctrlPanel .ctrl-switch.on:hover {
  background: rgba(255, 105, 180, 0.45);
}

/* ============================================================
   桌宠控制面板入口 — 与齿轮按钮横向并排
   基于 core .ctrl-entry-btn 的样式体系，仅覆写位置和动画

   注意：#loveelysia-panel-btn 由外部 pet-bundle.js 创建，
   该脚本会设置 inline styles。所有覆写使用 !important
   是防御性措施，防止 pet-bundle 的内联样式越位。
   ============================================================ */
#loveelysia-panel-btn {
  /* ★ 清除 pet-bundle 的 inline inset 简写（防止其与单个 longhand 冲突） */
  inset: auto !important;

  /* 固定在齿轮按钮左侧 */
  top: calc(1.2vw + 0.8dvh) !important;
  /* ★ BUGFIX: 齿轮按钮实际宽度 = clamp(--touch-min, calc(c*2.6), --touch-max)
     旧计算只用 calc(c*2.6) 估计，手机上 --touch-min=40px > calc(c*2.6)≈18px，
     导致偏移量偏小约 22px，两个按钮重叠
     ★ 间隙用 max(..., 8px) 确保手机端不会因 --ctrl-font 过小而导致按钮几乎贴在一起 */
  right: calc(
    1.2vw + 0.8dvh +
      clamp(var(--touch-min), calc(var(--ctrl-font) * 2.6), var(--touch-max)) +
      calc(var(--ctrl-font) * 1)
  ) !important;
  left: auto !important;
  bottom: auto !important;

  /* 大小与 .ctrl-toggle 一致（clamp 确保与齿轮按钮实际尺寸匹配） */
  width: clamp(
    var(--touch-min),
    calc(var(--ctrl-font) * 2.6),
    var(--touch-max)
  ) !important;
  height: clamp(
    var(--touch-min),
    calc(var(--ctrl-font) * 2.6),
    var(--touch-max)
  ) !important;
  /* 毛玻璃面板风，与 .ctrl-toggle 风格统一而非 core 的实色 accent */
  border: 1px solid var(--ctrl-accent-dim) !important;
  background: var(--ctrl-bg) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--ctrl-text) !important;
  z-index: 50 !important;
  pointer-events: auto !important;
  /* 以下属性 core .ctrl-entry-btn 已定义相同值，pet-bundle 不覆写则可安全依赖：
     position: fixed, border-radius: 50%, touch-action: none */
}
#loveelysia-panel-btn:hover {
  border-color: var(--ctrl-accent-hover) !important;
  color: var(--ctrl-text-hover) !important;
}

/* ============================================================
   效果芯片网格 / 弹幕设置
   ============================================================ */

/* ── 效果按钮网格（两行: 3+2） ── */
#ctrlPanel .ctrl-effect-grid {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  gap: calc(var(--ctrl-font) * 0.15);
}
#ctrlPanel .ctrl-effect-grid + .ctrl-effect-grid {
  margin-top: calc(var(--ctrl-font) * 0.15);
}
#ctrlPanel .ctrl-effect-grid-2col {
  grid-template-columns: repeat(2, min-content);
}
#ctrlPanel .ctrl-effect-grid .ctrl-btn {
  min-width: 0;
  width: auto;
  text-align: center;
  padding: calc(var(--ctrl-font) * 0.18) calc(var(--ctrl-font) * 0.3);
  font-size: var(--font-control);
  white-space: nowrap;
}

/* ── 弹幕段内滑块间距收窄 ── */
#ctrlPanel .ctrl-section .ctrl-slider-value {
  padding: var(--space-xs) 0;
}
#ctrlPanel .ctrl-section .ctrl-slider-value + .ctrl-slider-value {
  border-top: none;
}