/* =========================================================================
   戳泡泡 / Pop the Bubbles  —  样式
   视觉变量集中在 :root，方便以后调整颜色、速度、透明度等。
   ========================================================================= */

:root {
  /* —— 背景（非常柔和、轻微渐变，不抢注意力）—— */
  --bg-top: #eaf4ff;      /* 浅蓝 */
  --bg-bottom: #fdf6ec;   /* 奶油白 */

  /* —— 泡泡视觉 —— */
  --bubble-color: #cfe8ff;     /* 默认泡泡色（由 JS 按泡泡覆盖） */
  --bubble-opacity: 0.85;      /* 泡泡整体透明度，柔和 */
  --bubble-visual-ratio: 0.82; /* 视觉泡泡 / 命中区域 的比例（命中位 > 视觉） */

  /* —— 动画时长 —— */
  --pop-duration: 320ms;  /* 破裂动画时长 */
  --droplet-life: 560ms;  /* 小水滴散开时长 */
  --glow-life: 520ms;     /* 反馈小图标时长 */
  --ripple-life: 760ms;   /* 背景水波纹时长 */

  /* —— 家长面板 —— */
  --panel-bg: rgba(255, 255, 255, 0.96);
  --panel-text: #4a5160;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;                 /* 游戏内不需要滚动 */
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
  /* 触摸优化：禁止文字选择 / 长按菜单 / 双击高亮 / 页面拖动 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* 游戏容器：固定全屏，所有动态元素绝对定位其中 */
#game {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

/* ----------------------------- 泡泡 ------------------------------------ */
.bubble {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 位置由 JS 写入 --tx / --ty（transform 走合成层，避免 layout） */
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  will-change: transform;
  touch-action: none;
  /* 命中区域 = 整个 .bubble（含透明边缘），宽容宝宝不精准的手指 */
}

.bubble-visual {
  width: calc(100% * var(--bubble-visual-ratio));
  height: calc(100% * var(--bubble-visual-ratio));
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  opacity: var(--bubble-opacity);
  /* 柔软半透明肥皂泡：白色高光 + 本色调 + 内发光 */
  background:
    radial-gradient(circle at 35% 28%,
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0.10) 40%,
      rgba(255, 255, 255, 0) 62%),
    radial-gradient(circle at 70% 75%,
      var(--bubble-color),
      rgba(255, 255, 255, 0) 72%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.6),
    inset 0 0 38px var(--bubble-color),
    0 0 12px rgba(255, 255, 255, 0.4);
}

/* 极淡的彩虹反射（低饱和、不抢眼） */
.bubble-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg,
    rgba(255, 180, 200, 0.10),
    rgba(180, 220, 255, 0.10),
    rgba(200, 255, 200, 0.10),
    rgba(255, 240, 180, 0.10),
    rgba(230, 200, 255, 0.10),
    rgba(255, 180, 200, 0.10));
  mix-blend-mode: screen;
  opacity: 0.5;
}

/* 破裂动画：放大一点点 → 透明消失（柔和、无爆炸/碎片） */
.bubble.popping {
  animation: pop-anim var(--pop-duration) ease-out forwards;
  pointer-events: none;
}

@keyframes pop-anim {
  0%   { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1);    opacity: var(--bubble-opacity); }
  35%  { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.15); opacity: var(--bubble-opacity); }
  100% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.22); opacity: 0; }
}

/* --------------------------- 小水滴（破后散开）-------------------------- */
.droplet {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff, var(--bubble-color, #cfe8ff));
  opacity: 0.9;
  pointer-events: none;
  animation: droplet-fly var(--droplet-life) ease-out forwards;
}

@keyframes droplet-fly {
  0%   { transform: translate(0, 0) scale(1);   opacity: 0.9; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.3); opacity: 0; }
}

/* --------------------- 反馈小图标（星 / 水滴 / 光圈）--------------------- */
.glow {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: glow-fade var(--glow-life) ease-out forwards;
}

.glow-ring {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.glow-star {
  font-size: 26px;
  line-height: 1;
  color: rgba(255, 226, 150, 0.9);
}

.glow-water {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 40% 35%, #ffffff, #bfe3ff);
  border-radius: 50% 50% 50% 0;
}

@keyframes glow-fade {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
  30%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.15); }
}

/* --------------------------- 背景水波纹 -------------------------------- */
.ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid rgba(150, 195, 230, 0.5);
  pointer-events: none;
  animation: ripple-fade var(--ripple-life) ease-out forwards;
}

@keyframes ripple-fade {
  0%   { transform: scale(0.3); opacity: 0.5; }
  100% { transform: scale(4);   opacity: 0; }
}

/* --------------------------- 家长按钮 / 面板 ---------------------------- */
#gear {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: rgba(120, 130, 150, 0.45);
  background: rgba(255, 255, 255, 0.22);
  user-select: none;
  touch-action: none;
  z-index: 50;
  cursor: default;
}

#parent-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 264px;
  max-width: 80vw;
  padding: 22px 20px;
  background: var(--panel-bg);
  box-shadow: -4px 0 22px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 280ms ease;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--panel-text);
  font-size: 15px;
  -webkit-user-select: none;
  user-select: none;
}

#parent-panel.open { transform: translateX(0); }

#parent-panel h2 { font-size: 18px; font-weight: 600; }
#parent-panel .hint { font-size: 12px; color: #97a0b0; line-height: 1.5; }

.pbtn {
  appearance: none;
  border: 1px solid #d7dce6;
  background: #f6f8fc;
  color: var(--panel-text);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.pbtn:active { background: #eef2f9; }
.pbtn-close { background: #e7ecf5; text-align: center; font-weight: 600; }

/* ------------------- 减少动画（系统偏好）------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bubble.popping { animation-duration: 200ms; }
  /* 减少动画时不再显示粒子/水波纹/反馈图标，避免视觉刺激；游戏照常可玩 */
  .droplet, .glow, .ripple { display: none; }
}