/* ============================================================
   LoveElysia Theme — Core Variables & Base Styles
   ============================================================ */

:root {
  /* ---- 布局参数 ---- */
  --layout-gap: 1.2; /* flex gap，单位 dvh */
  --dual-column-gap: 3; /* 双栏间距，单位 dvw */
  --pad-top: 2; /* padding-top，单位 dvh */
  --pad-bottom: 4; /* padding-bottom（底部留白），单位 dvh */
  --hero-ratio: 0.85; /* 时钟 / 图腾 尺寸比 */
  /* ---- 字号比值（相对于 --font-base） ---- */
  --ratio-h1: 4;
  --ratio-quote: 1;
  --ratio-digital: 1;
  --ratio-btn: 1;
  --ratio-btn-min-h: 2;
  --ratio-contact: 1;
  --ratio-footer: 0.8;
  --ratio-subtitle: 1;
  --digital-line-height: 1.6;
  --measure-sub-letter-spacing: 0.12;

  /* ---- 自适应宽度约束参数 ---- */
  --hm-ref-low: 921; /* HD 调和平均数基准 (1280×720 ≈ 921) */
  --hm-ref-high: 1843; /* QHD 调和平均数基准 (2560×1440 ≈ 1843) */
  --ratio-max: 0.9; /* HM ≤ HD → 90% */
  --ratio-min: 0.75; /* HM ≥ QHD → 75% */

  /* ---- 空间约束参数 ---- */
  --constraint-text-max-ratio: 0.9; /* 文本不超出可用宽度的比例 */
  --constraint-totem-max-ratio: 0.9; /* 图腾不超出可用宽度的比例 */
  --constraint-font-min: 6; /* 字号下限 (px) */
  --constraint-totem-min: 20; /* 图腾下限 (px) */
  --constraint-font-search-max: 200; /* 字号搜索上界 */
  --constraint-font-search-iter: 15; /* 字号搜索迭代次数 */
  --constraint-n-gaps: 1; /* 单栏纵向堆叠的间距段数 */

  /* ---- overlay 高度估算因子 ---- */
  --factor-digital-height: 1; /* 数字时钟行高因子 */
  --factor-h1-height: 1; /* h1 行高因子 */
  --factor-quote-height: 1; /* 固定语录行高因子 */
  --factor-quote-lines: 2; /* 固定语录估算行数 */
  --factor-btn-height: 1; /* 按钮行高因子 */
  --factor-btn-lines: 2; /* 按钮排布行数估算 */
  --factor-contact-height: 1.2; /* contact 行高因子 */
  --factor-footer-height: 1.2; /* footer 行高因子 */
  --factor-gap-count: 5; /* overlay 内 gap 段数 */
  --factor-gap-unit: 0.01; /* 每段 gap 占 dvh 比例 */

  /* ---- 文本测量用字间距 ---- */
  --measure-h1-letter-spacing: 0.06; /* h1 字间距 (em) */

  /* ---- JS 计算覆盖 ---- */
  --layout-mode: single; /* 单/双栏模式标记 */
  --totem-size: min(45vw, 35dvh);
  --hero-size: calc(var(--totem-size) * var(--hero-ratio));
  --font-base: 12px;
  --b-font-danmaku: 14px;
  --stage-width: var(--totem-size); /* 双栏时 JS 可能覆写为 max(totem, h1宽) */

  /* ============================================================
     Tier 2 — 统一逻辑单位体系（激进重构 v2）
     所有尺寸从 --unit 派生，JS 只输出 --unit 和 --totem-size
     ============================================================ */

  /* --unit: 统一逻辑布局单位（JS 写入） */
  --unit: 12px;

  /* 可调参数：差异化物理缩放指数 */
  --scale-exponent: 0.3; /* [C/D] 核心视觉 + 功能导航（默认） */
  --scale-exponent-danmaku: 0.2; /* [B]   弹幕装饰文本（较低） */
  --scale-exponent-pet: 0.25; /* [F]   桌宠交互装饰 */
  --reference-width: 1536; /* 基准设备 CSS 宽度（14" 笔记本） */

  /* 从 --unit 到各元素的比率（仅 C/D 类使用） */

  /* ---- B/F 功能字体单位 ----
     参考设备(1536px)上 = 1pt ≈ 1.33px，大屏按 0.12 指数轻微缩小
     用法: calc(var(--b-unit) × N) — N 在参考设备上 ≈ N × 1.33px（如 16×1.33≈21）
     layout.js 覆写为 1.33px × danmakuScale */
  --b-unit: 1.33px;

  /* B 类 raw 基准（参考设备上的近似 pt）
      CSS 层用 calc(var(--b-unit) × N) 渲染
      JS 层从 --b-font-danmaku-raw × 1.33 推导 px（轨道高度计算） */
  --b-font-danmaku-raw: 16;
  --b-font-ctrl-raw: 16;

  /* 弹幕字号用户档位倍率（0.6 / 0.8 / 1.0 / 1.2 / 1.4），由控制面板 JS 写入 */
  --b-font-level: 1;

  /* B 类 — 弹幕字号（不含用户档位，固定语录用） */
  --b-font-danmaku-base: max(
    8px,
    calc(var(--b-unit) * var(--b-font-danmaku-raw))
  );

  /* B 类 — 弹幕字号（CSS 渲染，含用户档位） */
  --b-font-danmaku: max(
    8px,
    calc(var(--b-unit) * var(--b-font-danmaku-raw) * var(--b-font-level))
  );

  /* B 类 — 控件面板基准（CSS 渲染）
     控件字号不应跟弹幕字号滑块联动，否则在手机端把弹幕调小会导致齿轮图标也异常小。
     如需未来做“控件独立缩放”，应引入单独变量（例如 --b-font-ctrl-level）。 */
  --ctrl-font: max(8px, calc(var(--b-unit) * var(--b-font-ctrl-raw)));

  /* B 类 — JS parseFloat 兼容，由 layout.js 写入 (raw × --b-unit) × danmakuScale × fontLevel */
  --b-font-danmaku-px: 24px;

  /* B 类 — 弹幕速度倍率 (0.5~2.0)，由控制面板滑块与 localStorage 联动 */
  --b-danmaku-speed-factor: 1;

  /* F 类 — 桌宠默认尺寸（CSS 兜底，pet-bundle.js readPetSizeFromCSS 读取；用户滑块叠加 50%-200%） */
  --pet-size-px: 300px;

  /* 各类别缩放系数占位（device.js 覆写） */
  --touch-min: 40px;
  --touch-max: 72px;
  --physical-scale: 1;
  --physical-scale-danmaku: 1; /* [B] 弹幕专属 */
  --physical-scale-pet: 1; /* [F] 桌宠专属 */

  /* ---- 配色 ---- */
  --color-primary: #ff69b4;
  --color-secondary: #ba55d3;
  --color-glow: #7b68ee;
  --color-bg-top: #110a1c;
  --color-bg-bottom: #080411;

  /* ---- 字体 ---- */
  --font-heading: "Playfair Display", cursive;

  /* ---- 控件配色（供 controls-base.css 使用） ---- */
  --ctrl-accent: #ff69b4;
  --ctrl-accent-dim: rgba(255, 105, 180, 0.15);
  --ctrl-accent-hover: rgba(255, 105, 180, 0.4);
  --ctrl-bg: rgba(17, 10, 28, 0.78);
  --ctrl-text: rgba(255, 255, 255, 0.65);
  --ctrl-text-hover: #fff;

  /* ── 统一字号体系（供 controls-base.css 使用） ── */
  --font-title: calc(var(--b-unit) * 14);
  --font-section: calc(var(--b-unit) * 12);
  --font-control: calc(var(--b-unit) * 11);
  --font-text: calc(var(--b-unit) * 9);

  /* ── Spacing Scale（供 controls-base.css 使用） ── */
  --space-xs: calc(var(--ctrl-font) * 0.12);
  --space-sm: calc(var(--ctrl-font) * 0.18);
  --space-md: calc(var(--ctrl-font) * 0.3);
  --space-lg: calc(var(--ctrl-font) * 0.5);
  --space-xl: calc(var(--ctrl-font) * 0.75);

  /* ── 控件圆角 ── */
  --panel-radius: calc(var(--ctrl-font) * 0.4);

  --font-body:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background: linear-gradient(
    180deg,
    var(--color-bg-top) 0%,
    var(--color-bg-bottom) 100%
  );
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-gutter: stable;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  /* 阻止移动端长按弹出菜单/选中页面装饰性元素 */
  -webkit-touch-callout: none;
}

/* ===== 自定义滚动条（暗色粉紫主题） ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(17, 10, 28, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 105, 180, 0.2);
  border-radius: 4px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 105, 180, 0.35);
}
::-webkit-scrollbar-corner {
  background: transparent;
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 105, 180, 0.2) rgba(17, 10, 28, 0.6);
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

/* ===== 星云背景 ===== */
#nebulaBg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
  image-rendering: auto;
  object-fit: cover;
}

/* ===== Canvas 粒子层 ===== */
#particleCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ===== 加载遮罩 ===== */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: linear-gradient(
    180deg,
    var(--color-bg-top) 0%,
    var(--color-bg-bottom) 100%
  );
  transition: opacity 0.35s ease;
  will-change: opacity;
  contain: layout style paint;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.page-loader.done {
  opacity: 0;
  pointer-events: none;
}

/* 加载中脉冲光圈 */
.page-loader:not(.done)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12dvh;
  height: 12dvh;
  margin: -6dvh 0 0 -6dvh;
  border-radius: 50%;
  border: 2px solid rgba(255, 105, 180, 0.2);
  animation: loaderPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes loaderPulse {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.12;
    border-color: rgba(255, 105, 180, 0.12);
  }
  50% {
    transform: scale(1.25);
    opacity: 0.45;
    border-color: rgba(255, 105, 180, 0.45);
  }
}

/* ===== 点击涟漪 ===== */
.ripple-effect {
  position: fixed;
  z-index: 99;
  pointer-events: none;
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 8px solid var(--ctrl-accent, rgba(255, 105, 180, 0.45));
  transform: translate(-50%, -50%);
  animation: rippleExpand 1.5s ease-out forwards;
}
@keyframes rippleExpand {
  0% {
    width: 1dvh;
    height: 1dvh;
    opacity: 1;
    border-width: 1dvh;
  }
  50% {
    width: 15dvh;
    height: 15dvh;
    opacity: 0.75;
    border-width: 0.8dvh;
  }
  100% {
    width: 50dvh;
    height: 50dvh;
    opacity: 0;
    border-width: 0.5dvh;
  }
}

/* ===== 辉光统一使用 text-shadow / box-shadow ===== */
/* h1 → layout.css、subtitle → layout.css、digital-clock → clock.css、clock-face → clock.css */

/* ============================================================
   控件面板覆写（LoveElysia 粉色主题专属）
   ============================================================ */
.ctrl-panel-title {
  color: rgba(255, 105, 180, 0.6);
}

/* ============================================================
   调试面板 (默认隐藏，控制台开启)
   ============================================================ */
.debug-panel {
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.82);
  color: #0f0;
  font-family: monospace;
  font-size: 11px;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 105, 180, 0.3);
  max-width: 95vw;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}
.debug-version {
  font-size: 10px;
  opacity: 0.5;
  margin-bottom: 4px;
  user-select: text;
  -webkit-user-select: text;
}
.debug-content {
  margin: 0;
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
}