/* ============================================================
   一键怪叫 · 糖果粉治愈风
   主色调 #FD7EC2 · 圆形按钮 #00BED8（30% 透明度）
   剑龙：白色 PNG，由 JS 生成、全屏漂浮
   ============================================================ */

:root {
  --pink: #FD7EC2;
  --cyan: #00BED8;
}

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

html,
body {
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(130% 100% at 50% -12%, #FFE9F4 0%, #FFCFE8 36%, var(--pink) 68%, #F570BA 100%);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* 大块柔光：顶部环境光、右下角一抹青色（中心不再有聚光点） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50vmax 36vmax at 50% 24%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(36vmax 28vmax at 86% 84%, rgba(0, 190, 216, 0.15), transparent 64%);
}

/* 极淡的波点纹理，增加质感 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.38) 1.3px, transparent 1.4px);
  background-size: 24px 24px;
  opacity: 0.3;
}

/* 边缘轻微压暗，聚焦中心 */
body {
  box-shadow: inset 0 0 140px rgba(180, 0, 107, 0.14);
}

/* ============ 剑龙（JS 驱动位置与旋转） ============ */
.stego {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  display: block;
  height: auto;
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.65))
    drop-shadow(0 14px 26px rgba(161, 0, 91, 0.28));
}

/* ============ 气泡（JS 驱动位置） ============ */
/* 极淡半透明（中心 25% 不透明度）+ 双高光（左上主高光 + 右下副高光） */
.bubble {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(circle at 26% 24%, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 70% 64%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 32% 30%,
      rgba(255, 255, 255, 0.25),
      rgba(210, 245, 255, 0.12) 36%,
      rgba(140, 220, 245, 0.05) 66%,
      rgba(90, 205, 235, 0.07) 100%);
  box-shadow:
    inset 0 0 5px rgba(255, 255, 255, 0.22),
    0 0 8px rgba(0, 190, 216, 0.08);
}

/* ============ 星星（JS 驱动位置，属性与气泡一致） ============ */
.star {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  display: block;
  background: radial-gradient(circle at 30% 28%,
    rgba(255, 255, 255, 0.35),
    rgba(210, 245, 255, 0.14) 42%,
    rgba(140, 220, 245, 0.06) 70%,
    rgba(95, 210, 240, 0.10) 100%);
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

/* ============ 紫色闪电画布 ============ */
.lightning-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  pointer-events: none;
}

/* ============ 被闪电击中的漂浮物（电击发光与高能过载） ============ */
.stego.shocked {
  filter:
    drop-shadow(0 0 10px #00f0ff)
    drop-shadow(0 0 24px #e879f9)
    drop-shadow(0 0 45px #c026d3)
    brightness(2.2) contrast(1.4) !important;
}

.bubble.shocked,
.star.shocked {
  box-shadow:
    0 0 18px #00f0ff,
    0 0 36px #e879f9,
    0 0 55px #9333ea,
    inset 0 0 12px #ffffff !important;
  filter: brightness(2.5) contrast(1.3) !important;
}

/* ============ 舞台（按钮居中） ============ */
.stage {
  position: relative;
  z-index: 2;
  height: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ============ 渐变环 + 圆形按钮 ============ */
/* 环 10% 透明度，外圈细环 + 少量青色光晕；按钮背后透明（露出页面底色） */
.button-wrap {
  position: relative;
  z-index: 1;                 /* 建立层叠上下文 */
  border-radius: 50%;
  padding: 7px;               /* 细渐变环宽度 */
  background: transparent;    /* 环由 ::before 提供，按钮背后不再有渐变 */
  --audio-scale: 1;
  --audio-energy: 0;
  --audio-glow: 0px;
  scale: var(--audio-scale, 1);
  will-change: scale, transform;
}

/* 旋转的渐变环：用遮罩只保留外圈细环。
   环的不透明度（0.50）高于内圈按钮（0.30），细环更实、清晰可辨；
   根据音频能量动态产生高光霓虹滤镜与辉光扩散 */
.button-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg,
    #8ef0f7 0%, #00d9ee 20%, var(--cyan) 45%, #009fc0 70%, #57e3f2 90%, #8ef0f7 100%
  );
  -webkit-mask: radial-gradient(circle closest-side,
    transparent 0 90%,
    rgba(0, 0, 0, 0.25) 92%,
    rgba(0, 0, 0, 0.75) 93.5%,
    #000 95% 96.5%,
    rgba(0, 0, 0, 0.55) 98.5%,
    transparent 100%);
  mask: radial-gradient(circle closest-side,
    transparent 0 90%,
    rgba(0, 0, 0, 0.25) 92%,
    rgba(0, 0, 0, 0.75) 93.5%,
    #000 95% 96.5%,
    rgba(0, 0, 0, 0.55) 98.5%,
    transparent 100%);
  opacity: calc(0.50 + var(--audio-energy, 0) * 0.48);
  filter: drop-shadow(0 0 calc(var(--audio-glow, 0px) * 0.8) rgba(0, 220, 255, calc(0.35 + var(--audio-energy, 0) * 0.65)));
  animation: ring-spin 7s linear infinite;
  will-change: transform, filter, opacity;
}
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

/* 少量青色光晕：独立光晕层，随音频波形动态膨胀与收缩 */
.button-wrap::after {
  content: "";
  position: absolute;
  inset: calc(-30px - var(--audio-glow, 0px));
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 220, 245, calc(0.26 + var(--audio-energy, 0) * 0.38)),
    rgba(0, 190, 216, calc(0.12 + var(--audio-energy, 0) * 0.22)) 44%,
    transparent 70%
  );
  pointer-events: none;
  opacity: calc(0.85 + var(--audio-energy, 0) * 0.35);
  transition: inset 0.04s ease-out;
}

.scream-btn {
  position: relative;
  z-index: 1;                 /* 位于旋转渐变环之上 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(148px, 38vmin, 232px);
  aspect-ratio: 1;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(1.05rem, 3.4vmin, 1.45rem);
  letter-spacing: 0.1em;
  color: #ffffff;
  /* 半透明背景 = 按钮视觉 30% 透明度，但文字保持清晰白色 */
  background-color: rgba(0, 190, 216, 0.30);
  border-radius: 50%;
  white-space: nowrap;                   /* 单行显示 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 0 calc(var(--audio-glow, 0px) * 0.9) rgba(0, 190, 216, calc(var(--audio-energy, 0) * 0.5));
  transition: transform 0.14s ease, background-color 0.14s ease;
}

/* 文字保持在旋转环之上 */
.scream-btn__text {
  position: relative;
  z-index: 1;
  display: block;
}

.scream-btn:hover {
  transform: scale(1.04);
  background-color: rgba(0, 190, 216, 0.36);
}
.scream-btn:active {
  transform: scale(0.95);
  background-color: rgba(0, 156, 181, 0.40);
}
.scream-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 6px;
}

/* ============ 点击冒出的音符粒子 ============ */
.note {
  position: fixed;
  z-index: 9;
  pointer-events: none;
  font-size: clamp(1.1rem, 4.5vw, 1.9rem);
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(180, 0, 107, 0.55);
  animation: note-fly 0.85s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
@keyframes note-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.25) rotate(var(--rot, 0deg)); }
}

/* ============ 手机适配 ============ */
@media (max-width: 640px) {
  /* 按钮与剑龙尺寸均基于 vmin/vw 自适应，手机端无需额外调整 */
}

/* 尊重系统“减弱动态效果” */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}