/* ============================================================
   一键怪叫 · 糖果粉治愈风
   主色调 #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;
  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%
  );
}

/* ============ 舞台（按钮居中） ============ */
.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 提供，按钮背后不再有渐变 */
  animation: wrap-breathe 3.6s ease-in-out infinite;
  transition: transform 0.18s ease;
}

/* 旋转的渐变环：用遮罩只保留外圈细环。
   环的不透明度（0.50）高于内圈按钮（0.30），细环更实、清晰可辨；
   mask 内外各带一段半透明过渡 → 环边缘有柔和“散发”的光感，
   但核心环带（95%~96.5%）仍保留明确边界 */
.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: 0.50;              /* 细环 50% 不透明度，比内圈更实 */
  animation: ring-spin 7s linear infinite;
}
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

/* 少量青色光晕：独立光晕层，柔和扩散在按钮外圈（散发感） */
.button-wrap::after {
  content: "";
  position: absolute;
  inset: -30px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 190, 216, 0.26),
    rgba(0, 190, 216, 0.12) 44%,
    transparent 70%
  );
  pointer-events: none;
}

@keyframes wrap-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

.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;                   /* 单行显示 */
  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;
}

/* 点击怪叫时按钮猛地一颤 */
body.screaming .button-wrap {
  animation: wrap-shake 0.5s ease-in-out;
}
@keyframes wrap-shake {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20%      { transform: scale(1.05) rotate(-2deg); }
  45%      { transform: scale(0.97) rotate(1.6deg); }
  70%      { transform: scale(1.02) rotate(-0.8deg); }
}

/* ============ 点击冒出的音符粒子 ============ */
.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;
  }
}