/* ============================================================
 * game_theme.css — 5套游戏场景化主题皮肤
 * 独立于 style.css，在 game.html 中通过 <link> 引入
 * 用法：将对应主题类名加在 .game-canvas 或其容器上
 *   .theme-pirate  .theme-balloon  .theme-whack
 *   .theme-fish     .theme-star
 * z-index 层级：背景装饰=1 | 目标元素=5 | 特效层=20
 * ============================================================ */

/* ---------- 通用画布容器 ---------- */
.game-canvas {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;          /* 建立层叠上下文 */
}

/* 所有主题装饰元素的基类 */
[class*="theme-"] .deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
 *  1. 海盗船  .theme-pirate
 * ============================================================ */
.theme-pirate {
  /* 主题色变量 */
  --pirate-sky-top: #87CEEB;
  --pirate-sky-mid: #4A90D9;
  --pirate-sea-deep: #1a3a5c;
  --pirate-cloud: #ffffff;
  --pirate-sun: #FFE87C;
  --pirate-wave-1: #3B7DD8;
  --pirate-wave-2: #2B6CB0;
  --pirate-wave-3: #1a4a7a;
  --pirate-seagull: #2d2d2d;

  background: linear-gradient(
    to bottom,
    var(--pirate-sky-top) 0%,
    var(--pirate-sky-top) 30%,
    var(--pirate-sky-mid) 55%,
    var(--pirate-sea-deep) 100%
  );
}

/* 太阳光晕 — 右上角 */
.theme-pirate::before {
  content: '';
  position: absolute;
  top: 6%;
  right: 8%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 232, 124, 0.9) 0%,
    rgba(255, 200, 80, 0.5) 40%,
    rgba(255, 200, 80, 0) 70%
  );
  z-index: 1;
  pointer-events: none;
  animation: pirate-sun-pulse 4s ease-in-out infinite;
}

@keyframes pirate-sun-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* 云朵容器 */
.theme-pirate .clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.theme-pirate .cloud {
  position: absolute;
  background: var(--pirate-cloud);
  border-radius: 50px;
  opacity: 0.9;
}
.theme-pirate .cloud::before,
.theme-pirate .cloud::after {
  content: '';
  position: absolute;
  background: var(--pirate-cloud);
  border-radius: 50%;
}

/* 云朵1 — 左上 */
.theme-pirate .cloud-1 {
  width: 80px; height: 28px; top: 12%; left: -100px;
  animation: cloud-drift-1 35s linear infinite;
}
.theme-pirate .cloud-1::before { width: 40px; height: 40px; top: -18px; left: 10px; }
.theme-pirate .cloud-1::after  { width: 30px; height: 30px; top: -12px; left: 40px; }

/* 云朵2 — 中上 */
.theme-pirate .cloud-2 {
  width: 100px; height: 34px; top: 20%; left: -120px;
  animation: cloud-drift-2 45s linear infinite;
  animation-delay: -15s;
}
.theme-pirate .cloud-2::before { width: 50px; height: 50px; top: -22px; left: 12px; }
.theme-pirate .cloud-2::after  { width: 36px; height: 36px; top: -16px; left: 50px; }

/* 云朵3 — 右上 */
.theme-pirate .cloud-3 {
  width: 70px; height: 24px; top: 8%; left: -90px;
  animation: cloud-drift-1 50s linear infinite;
  animation-delay: -30s;
}
.theme-pirate .cloud-3::before { width: 34px; height: 34px; top: -15px; left: 8px; }
.theme-pirate .cloud-3::after  { width: 26px; height: 26px; top: -10px; left: 34px; }

/* 云朵4 — 中左 */
.theme-pirate .cloud-4 {
  width: 90px; height: 30px; top: 30%; left: -110px;
  animation: cloud-drift-2 40s linear infinite;
  animation-delay: -25s;
  opacity: 0.7;
}
.theme-pirate .cloud-4::before { width: 44px; height: 44px; top: -20px; left: 10px; }
.theme-pirate .cloud-4::after  { width: 32px; height: 32px; top: -14px; left: 44px; }

@keyframes cloud-drift-1 {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 150px)); }
}
@keyframes cloud-drift-2 {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 180px)); }
}

/* 海浪 — 底部三层波浪 */
.theme-pirate .waves {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.theme-pirate .wave {
  position: absolute;
  left: -50%;
  width: 200%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.theme-pirate .wave-1 {
  bottom: 0; height: 100%;
  background: var(--pirate-wave-3);
}
.theme-pirate .wave-2 {
  bottom: 8%; height: 80%;
  background: var(--pirate-wave-2);
  animation: wave-sway 6s ease-in-out infinite;
}
.theme-pirate .wave-3 {
  bottom: 16%; height: 60%;
  background: var(--pirate-wave-1);
  animation: wave-sway 4s ease-in-out infinite reverse;
  opacity: 0.85;
}

@keyframes wave-sway {
  0%, 100% { transform: translateX(0) scaleY(1); }
  25%      { transform: translateX(3%) scaleY(1.02); }
  50%      { transform: translateX(0) scaleY(0.98); }
  75%      { transform: translateX(-3%) scaleY(1.01); }
}

/* 海鸟 — V形 */
.theme-pirate .seagulls {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.theme-pirate .seagull {
  position: absolute;
  font-size: 18px;
  color: var(--pirate-seagull);
  line-height: 1;
  opacity: 0.6;
}
.theme-pirate .seagull::before {
  content: '';
  display: block;
  width: 20px; height: 10px;
  border-top: 2.5px solid currentColor;
  border-radius: 50% 50% 0 0;
  transform: rotate(-10deg);
  box-shadow:
    -10px 0 0 -1px transparent,
    10px 0 0 -1px transparent;
}
.theme-pirate .seagull-1 { top: 15%; left: -30px; animation: seagull-fly 18s linear infinite; }
.theme-pirate .seagull-2 { top: 22%; left: -30px; animation: seagull-fly 22s linear infinite; animation-delay: -8s; font-size: 14px; }
.theme-pirate .seagull-3 { top: 10%; left: -30px; animation: seagull-fly 25s linear infinite; animation-delay: -15s; font-size: 12px; opacity: 0.4; }

@keyframes seagull-fly {
  0%   { transform: translateX(0) translateY(0); }
  25%  { transform: translateX(25vw) translateY(-8px); }
  50%  { transform: translateX(50vw) translateY(4px); }
  75%  { transform: translateX(75vw) translateY(-6px); }
  100% { transform: translateX(110vw) translateY(0); }
}


/* ============================================================
 *  2. 气球  .theme-balloon
 * ============================================================ */
.theme-balloon {
  --balloon-sky-top: #87CEEB;
  --balloon-sky-mid: #B0E0E6;
  --balloon-sky-bot: #E0F7FA;
  --balloon-cloud: #ffffff;
  --balloon-sun: #FFD700;
  --balloon-hill: #6BBF59;
  --balloon-hill-dark: #4A9e3A;

  background: linear-gradient(
    to bottom,
    var(--balloon-sky-top) 0%,
    var(--balloon-sky-mid) 50%,
    var(--balloon-sky-bot) 100%
  );
}

/* 太阳 — 左上角，带旋转光晕 */
.theme-balloon::before {
  content: '';
  position: absolute;
  top: 5%;
  left: 6%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #FFF9C4 0%,
    var(--balloon-sun) 50%,
    rgba(255, 215, 0, 0) 75%
  );
  z-index: 1;
  pointer-events: none;
  animation: balloon-sun-glow 5s ease-in-out infinite;
}
.theme-balloon::after {
  content: '';
  position: absolute;
  top: calc(5% - 15px);
  left: calc(6% - 15px);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 215, 0, 0.35);
  z-index: 1;
  pointer-events: none;
  animation: balloon-sun-rotate 20s linear infinite;
}

@keyframes balloon-sun-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.5); }
  50%      { box-shadow: 0 0 50px rgba(255, 215, 0, 0.8); }
}
@keyframes balloon-sun-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 云朵 */
.theme-balloon .clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.theme-balloon .cloud {
  position: absolute;
  background: var(--balloon-cloud);
  border-radius: 50px;
}
.theme-balloon .cloud::before,
.theme-balloon .cloud::after {
  content: '';
  position: absolute;
  background: var(--balloon-cloud);
  border-radius: 50%;
}

.theme-balloon .cloud-1 {
  width: 110px; height: 36px; top: 10%; left: -130px;
  animation: balloon-cloud-1 30s linear infinite;
}
.theme-balloon .cloud-1::before { width: 54px; height: 54px; top: -24px; left: 14px; }
.theme-balloon .cloud-1::after  { width: 40px; height: 40px; top: -18px; left: 55px; }

.theme-balloon .cloud-2 {
  width: 90px; height: 30px; top: 25%; left: -110px;
  animation: balloon-cloud-2 40s linear infinite;
  animation-delay: -12s;
}
.theme-balloon .cloud-2::before { width: 44px; height: 44px; top: -20px; left: 10px; }
.theme-balloon .cloud-2::after  { width: 32px; height: 32px; top: -14px; left: 46px; }

.theme-balloon .cloud-3 {
  width: 70px; height: 24px; top: 18%; left: -90px;
  animation: balloon-cloud-1 35s linear infinite;
  animation-delay: -22s;
  opacity: 0.8;
}
.theme-balloon .cloud-3::before { width: 34px; height: 34px; top: -15px; left: 8px; }
.theme-balloon .cloud-3::after  { width: 26px; height: 26px; top: -10px; left: 35px; }

.theme-balloon .cloud-4 {
  width: 100px; height: 32px; top: 35%; left: -120px;
  animation: balloon-cloud-2 45s linear infinite;
  animation-delay: -30s;
  opacity: 0.7;
}
.theme-balloon .cloud-4::before { width: 48px; height: 48px; top: -22px; left: 12px; }
.theme-balloon .cloud-4::after  { width: 36px; height: 36px; top: -16px; left: 52px; }

@keyframes balloon-cloud-1 {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 160px)); }
}
@keyframes balloon-cloud-2 {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 140px)); }
}

/* 彩虹 — 底部弧形 */
.theme-balloon .rainbow {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 35%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: conic-gradient(
    from 180deg at 50% 100%,
    rgba(255, 0, 0, 0.18) 0deg,
    rgba(255, 127, 0, 0.18) 15deg,
    rgba(255, 255, 0, 0.18) 30deg,
    rgba(0, 255, 0, 0.18) 45deg,
    rgba(0, 0, 255, 0.18) 60deg,
    rgba(75, 0, 130, 0.18) 75deg,
    rgba(148, 0, 211, 0.18) 90deg,
    transparent 90deg
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
}

/* 远景小山 — 底部绿色山丘剪影 */
.theme-balloon .hills {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 18%;
  z-index: 1;
  pointer-events: none;
}
.theme-balloon .hill {
  position: absolute;
  bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.theme-balloon .hill-1 {
  left: -5%;
  width: 40%;
  height: 100%;
  background: var(--balloon-hill-dark);
}
.theme-balloon .hill-2 {
  left: 25%;
  width: 45%;
  height: 120%;
  background: var(--balloon-hill);
}
.theme-balloon .hill-3 {
  right: -5%;
  width: 40%;
  height: 90%;
  background: var(--balloon-hill-dark);
}


/* ============================================================
 *  3. 打地鼠  .theme-whack
 * ============================================================ */
.theme-whack {
  --whack-sky-top: #87CEEB;
  --whack-sky-mid: #98D982;
  --whack-grass: #6B8E23;
  --whack-grass-light: #7CFC00;
  --whack-dirt: #8B5E3C;
  --whack-dirt-dark: #6B4226;
  --whack-dirt-light: #A0724A;
  --whack-cloud: #ffffff;
  --whack-fence: #A0522D;

  background: linear-gradient(
    to bottom,
    var(--whack-sky-top) 0%,
    var(--whack-sky-top) 35%,
    var(--whack-sky-mid) 55%,
    var(--whack-grass) 75%,
    var(--whack-grass) 100%
  );
}

/* 云朵 */
.theme-whack .clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.theme-whack .cloud {
  position: absolute;
  background: var(--whack-cloud);
  border-radius: 50px;
}
.theme-whack .cloud::before,
.theme-whack .cloud::after {
  content: '';
  position: absolute;
  background: var(--whack-cloud);
  border-radius: 50%;
}
.theme-whack .cloud-1 {
  width: 100px; height: 32px; top: 8%; left: -120px;
  animation: whack-cloud 38s linear infinite;
}
.theme-whack .cloud-1::before { width: 48px; height: 48px; top: -22px; left: 12px; }
.theme-whack .cloud-1::after  { width: 36px; height: 36px; top: -16px; left: 52px; }

.theme-whack .cloud-2 {
  width: 80px; height: 26px; top: 15%; left: -100px;
  animation: whack-cloud 45s linear infinite;
  animation-delay: -20s;
  opacity: 0.85;
}
.theme-whack .cloud-2::before { width: 38px; height: 38px; top: -17px; left: 10px; }
.theme-whack .cloud-2::after  { width: 28px; height: 28px; top: -12px; left: 40px; }

@keyframes whack-cloud {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 150px)); }
}

/* 草地纹理 — 底部小草点缀 */
.theme-whack .grass-texture {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 3px 8px at 5% 90%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 3px 8px at 12% 85%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 3px 8px at 20% 92%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 3px 8px at 28% 88%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 3px 8px at 35% 94%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 3px 8px at 42% 86%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 3px 8px at 50% 91%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 3px 8px at 58% 87%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 3px 8px at 65% 93%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 3px 8px at 73% 89%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 3px 8px at 80% 92%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 3px 8px at 88% 86%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 3px 8px at 95% 90%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 2px 6px at 8% 78%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 2px 6px at 25% 75%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 2px 6px at 45% 80%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 2px 6px at 62% 76%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 2px 6px at 78% 79%, var(--whack-grass-light) 50%, transparent 50%),
    radial-gradient(ellipse 2px 6px at 92% 77%, var(--whack-grass-light) 50%, transparent 50%);
  background-size: 100% 100%;
  animation: grass-sway 5s ease-in-out infinite;
}

@keyframes grass-sway {
  0%, 100% { transform: skewX(0deg); }
  50%      { transform: skewX(1.5deg); }
}

/* 泥土区域 — 中下部棕色带纹理 */
.theme-whack .dirt-area {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 22%;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      45deg,
      var(--whack-dirt) 0px,
      var(--whack-dirt) 8px,
      var(--whack-dirt-dark) 8px,
      var(--whack-dirt-dark) 16px
    ),
    linear-gradient(
      to bottom,
      var(--whack-dirt-light) 0%,
      var(--whack-dirt) 40%,
      var(--whack-dirt-dark) 100%
    );
  background-blend-mode: multiply;
  border-top: 3px solid var(--whack-dirt-dark);
  box-shadow: inset 0 6px 12px rgba(0,0,0,0.2);
}
/* 泥土上缘草地过渡 */
.theme-whack .dirt-area::before {
  content: '';
  position: absolute;
  top: -6px; left: 0; right: 0;
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    var(--whack-grass-light) 0px,
    var(--whack-grass-light) 4px,
    var(--whack-grass) 4px,
    var(--whack-grass) 8px
  );
  border-radius: 4px 4px 0 0;
}

/* 栅栏 — 简单木桩 */
.theme-whack .fence {
  position: absolute;
  bottom: 20%;
  left: 0; right: 0;
  height: 40px;
  z-index: 1;
  pointer-events: none;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 5%;
  opacity: 0.7;
}
.theme-whack .fence-post {
  width: 10px;
  height: 40px;
  background: linear-gradient(to right, var(--whack-fence), #8B4513, var(--whack-fence));
  border-radius: 3px 3px 0 0;
  position: relative;
}
.theme-whack .fence-post::before {
  content: '';
  position: absolute;
  top: 8px;
  left: -20px;
  width: 50px;
  height: 4px;
  background: linear-gradient(to bottom, #CD853F, #8B4513);
  border-radius: 2px;
}
.theme-whack .fence-post::after {
  content: '';
  position: absolute;
  top: 22px;
  left: -20px;
  width: 50px;
  height: 4px;
  background: linear-gradient(to bottom, #CD853F, #8B4513);
  border-radius: 2px;
}


/* ============================================================
 *  4. 钓鱼  .theme-fish
 * ============================================================ */
.theme-fish {
  --fish-deep: #006994;
  --fish-mid: #0099CC;
  --fish-shallow: #40E0D0;
  --fish-light: rgba(255, 255, 255, 0.15);
  --fish-bubble: rgba(255, 255, 255, 0.35);
  --fish-seaweed: #2E8B57;
  --fish-seaweed-light: #3CB371;
  --fish-sand: #F4D03F;
  --fish-sand-dark: #D4AC0D;

  background: linear-gradient(
    to bottom,
    var(--fish-deep) 0%,
    var(--fish-mid) 50%,
    var(--fish-shallow) 100%
  );
}

/* 光柱 — 从顶部射入 */
.theme-fish .light-rays {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 70%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.theme-fish .light-ray {
  position: absolute;
  top: -20%;
  width: 60px;
  height: 140%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  transform-origin: top center;
  filter: blur(8px);
  animation: light-shimmer 8s ease-in-out infinite;
}
.theme-fish .light-ray-1 { left: 15%;  transform: rotate(8deg);  animation-delay: 0s; }
.theme-fish .light-ray-2 { left: 40%;  transform: rotate(-5deg); animation-delay: -3s; width: 80px; }
.theme-fish .light-ray-3 { left: 65%;  transform: rotate(6deg);  animation-delay: -5s; width: 50px; }
.theme-fish .light-ray-4 { left: 82%;  transform: rotate(-8deg); animation-delay: -2s; }

@keyframes light-shimmer {
  0%, 100% { opacity: 0.5; transform: rotate(8deg) scaleX(1); }
  50%      { opacity: 0.9; transform: rotate(5deg) scaleX(1.3); }
}

/* 气泡 */
.theme-fish .bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.theme-fish .bubble {
  position: absolute;
  bottom: -30px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.6),
    var(--fish-bubble) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: bubble-rise linear infinite;
}
.theme-fish .bubble-1 { width: 12px; height: 12px; left: 10%; animation-duration: 8s;  animation-delay: 0s; }
.theme-fish .bubble-2 { width: 8px;  height: 8px;  left: 22%; animation-duration: 10s; animation-delay: -2s; }
.theme-fish .bubble-3 { width: 16px; height: 16px; left: 35%; animation-duration: 7s;  animation-delay: -4s; }
.theme-fish .bubble-4 { width: 6px;  height: 6px;  left: 48%; animation-duration: 12s; animation-delay: -1s; }
.theme-fish .bubble-5 { width: 14px; height: 14px; left: 58%; animation-duration: 9s;  animation-delay: -6s; }
.theme-fish .bubble-6 { width: 10px; height: 10px; left: 70%; animation-duration: 11s; animation-delay: -3s; }
.theme-fish .bubble-7 { width: 18px; height: 18px; left: 80%; animation-duration: 8s;  animation-delay: -7s; }
.theme-fish .bubble-8 { width: 7px;  height: 7px;  left: 90%; animation-duration: 13s; animation-delay: -5s; }
.theme-fish .bubble-9 { width: 11px; height: 11px; left: 15%; animation-duration: 9s;  animation-delay: -8s; }
.theme-fish .bubble-10{ width: 9px;  height: 9px;  left: 75%; animation-duration: 10s; animation-delay: -9s; }

@keyframes bubble-rise {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% { opacity: 0.8; }
  50% {
    transform: translateY(-50vh) translateX(15px) scale(1.1);
  }
  90% { opacity: 0.6; }
  100% {
    transform: translateY(-105vh) translateX(-10px) scale(0.8);
    opacity: 0;
  }
}

/* 海草 — 底部摇摆 */
.theme-fish .seaweeds {
  position: absolute;
  bottom: 8%;
  left: 0; right: 0;
  height: 25%;
  z-index: 1;
  pointer-events: none;
}
.theme-fish .seaweed {
  position: absolute;
  bottom: 0;
  width: 16px;
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
  transform-origin: bottom center;
}
.theme-fish .seaweed-1 {
  left: 8%;
  height: 80px;
  background: linear-gradient(to top, var(--fish-seaweed), var(--fish-seaweed-light));
  animation: seaweed-sway 4s ease-in-out infinite;
}
.theme-fish .seaweed-2 {
  left: 25%;
  height: 60px;
  width: 12px;
  background: linear-gradient(to top, var(--fish-seaweed), #45B76A);
  animation: seaweed-sway 5s ease-in-out infinite reverse;
  animation-delay: -1s;
}
.theme-fish .seaweed-3 {
  right: 15%;
  height: 90px;
  width: 18px;
  background: linear-gradient(to top, var(--fish-seaweed), var(--fish-seaweed-light));
  animation: seaweed-sway 3.5s ease-in-out infinite;
  animation-delay: -2s;
}
.theme-fish .seaweed-4 {
  right: 32%;
  height: 55px;
  width: 10px;
  background: linear-gradient(to top, #228B22, #3CB371);
  animation: seaweed-sway 4.5s ease-in-out infinite reverse;
}

/* 海草叶片细节 */
.theme-fish .seaweed::before,
.theme-fish .seaweed::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 20px;
  background: inherit;
  border-radius: 50%;
  opacity: 0.8;
}
.theme-fish .seaweed-1::before { top: 20%; left: -6px; transform: rotate(-30deg); }
.theme-fish .seaweed-1::after  { top: 45%; right: -6px; transform: rotate(30deg); }
.theme-fish .seaweed-3::before { top: 15%; left: -7px; transform: rotate(-35deg); }
.theme-fish .seaweed-3::after  { top: 50%; right: -7px; transform: rotate(25deg); }

@keyframes seaweed-sway {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

/* 沙底 */
.theme-fish .sand-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 10%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--fish-sand) 0%,
    var(--fish-sand-dark) 100%
  );
  border-radius: 50% 50% 0 0 / 30px 30px 0 0;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.15);
}
/* 沙底小石子点缀 */
.theme-fish .sand-floor::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 3px at 10% 40%, #C9A800 60%, transparent 60%),
    radial-gradient(circle 2px at 30% 60%, #B8860B 60%, transparent 60%),
    radial-gradient(circle 4px at 55% 35%, #DAA520 60%, transparent 60%),
    radial-gradient(circle 2px at 75% 55%, #C9A800 60%, transparent 60%),
    radial-gradient(circle 3px at 90% 45%, #B8860B 60%, transparent 60%);
}


/* ============================================================
 *  5. 星星  .theme-star
 * ============================================================ */
.theme-star {
  --star-sky-top: #0a0a2e;
  --star-sky-mid: #16213e;
  --star-sky-bot: #1a1a3e;
  --star-color: #ffffff;
  --star-moon: #F5F5DC;
  --star-moon-glow: rgba(245, 245, 220, 0.3);
  --star-nebula-purple: rgba(138, 43, 226, 0.15);
  --star-nebula-blue: rgba(30, 144, 255, 0.12);
  --star-meteor: #ffffff;

  background: linear-gradient(
    to bottom,
    var(--star-sky-top) 0%,
    var(--star-sky-mid) 50%,
    var(--star-sky-bot) 100%
  );
}

/* 月亮 — 右上角带光晕 */
.theme-star::before {
  content: '';
  position: absolute;
  top: 6%;
  right: 8%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #FFFFF0 0%,
    var(--star-moon) 50%,
    #E8E8C8 100%
  );
  box-shadow:
    0 0 30px var(--star-moon-glow),
    0 0 60px rgba(245, 245, 220, 0.15),
    0 0 100px rgba(245, 245, 220, 0.08),
    inset -10px -10px 20px rgba(200, 200, 170, 0.3);
  z-index: 1;
  pointer-events: none;
}
/* 月亮陨石坑 */
.theme-star::after {
  content: '';
  position: absolute;
  top: calc(6% + 18px);
  right: calc(8% + 22px);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(180, 180, 150, 0.3);
  box-shadow:
    -18px 10px 0 -2px rgba(180, 180, 150, 0.2),
    8px -12px 0 -4px rgba(180, 180, 150, 0.25),
    -5px 20px 0 -5px rgba(180, 180, 150, 0.2);
  z-index: 2;
  pointer-events: none;
}

/* 星云 — 紫蓝色光斑 */
.theme-star .nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
}
.theme-star .nebula-1 {
  top: 20%; left: 10%;
  width: 200px; height: 150px;
  background: radial-gradient(circle, var(--star-nebula-purple), transparent 70%);
  animation: nebula-drift 20s ease-in-out infinite;
}
.theme-star .nebula-2 {
  bottom: 25%; right: 15%;
  width: 250px; height: 180px;
  background: radial-gradient(circle, var(--star-nebula-blue), transparent 70%);
  animation: nebula-drift 25s ease-in-out infinite reverse;
}

@keyframes nebula-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50%      { transform: translate(20px, -15px) scale(1.1); opacity: 1; }
}

/* 星星容器 */
.theme-star .stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* 通用星星样式 */
.theme-star .star {
  position: absolute;
  background: var(--star-color);
  border-radius: 50%;
  animation: star-twinkle ease-in-out infinite;
}

/* 30颗星星 — 不同位置、大小、闪烁速度 */
.theme-star .star-1  { width: 2px; height: 2px; top: 8%;  left: 5%;  animation-duration: 2s;  animation-delay: 0s;    }
.theme-star .star-2  { width: 3px; height: 3px; top: 12%; left: 15%; animation-duration: 3s;  animation-delay: -0.5s; }
.theme-star .star-3  { width: 1px; height: 1px; top: 6%;  left: 25%; animation-duration: 2.5s;animation-delay: -1s;   }
.theme-star .star-4  { width: 2px; height: 2px; top: 15%; left: 35%; animation-duration: 4s;  animation-delay: -1.5s; }
.theme-star .star-5  { width: 4px; height: 4px; top: 10%; left: 45%; animation-duration: 2s;  animation-delay: -2s;   box-shadow: 0 0 4px #fff; }
.theme-star .star-6  { width: 1px; height: 1px; top: 18%; left: 55%; animation-duration: 3.5s;animation-delay: -0.3s; }
.theme-star .star-7  { width: 2px; height: 2px; top: 22%; left: 62%; animation-duration: 2.8s;animation-delay: -2.5s; }
.theme-star .star-8  { width: 3px; height: 3px; top: 5%;  left: 72%; animation-duration: 3.2s;animation-delay: -1.8s; box-shadow: 0 0 6px #fff; }
.theme-star .star-9  { width: 1px; height: 1px; top: 25%; left: 80%; animation-duration: 2.2s;animation-delay: -0.8s; }
.theme-star .star-10 { width: 2px; height: 2px; top: 30%; left: 88%; animation-duration: 4s;  animation-delay: -3s;   }
.theme-star .star-11 { width: 2px; height: 2px; top: 35%; left: 3%;  animation-duration: 2.6s;animation-delay: -1.2s; }
.theme-star .star-12 { width: 3px; height: 3px; top: 40%; left: 12%; animation-duration: 3.8s;animation-delay: -2.2s; box-shadow: 0 0 4px #fff; }
.theme-star .star-13 { width: 1px; height: 1px; top: 45%; left: 22%; animation-duration: 2.1s;animation-delay: -0.6s; }
.theme-star .star-14 { width: 2px; height: 2px; top: 38%; left: 32%; animation-duration: 3.4s;animation-delay: -1.6s; }
.theme-star .star-15 { width: 1px; height: 1px; top: 50%; left: 42%; animation-duration: 2.9s;animation-delay: -2.8s; }
.theme-star .star-16 { width: 2px; height: 2px; top: 42%; left: 52%; animation-duration: 4.2s;animation-delay: -0.4s; }
.theme-star .star-17 { width: 3px; height: 3px; top: 48%; left: 60%; animation-duration: 2.3s;animation-delay: -1.4s; }
.theme-star .star-18 { width: 1px; height: 1px; top: 55%; left: 68%; animation-duration: 3.1s;animation-delay: -2.4s; }
.theme-star .star-19 { width: 2px; height: 2px; top: 52%; left: 78%; animation-duration: 2.7s;animation-delay: -0.9s; }
.theme-star .star-20 { width: 4px; height: 4px; top: 58%; left: 85%; animation-duration: 3.6s;animation-delay: -1.9s; box-shadow: 0 0 8px #87CEEB; }
.theme-star .star-21 { width: 1px; height: 1px; top: 62%; left: 8%;  animation-duration: 2.4s;animation-delay: -2.6s; }
.theme-star .star-22 { width: 2px; height: 2px; top: 68%; left: 18%; animation-duration: 3.3s;animation-delay: -0.2s; }
.theme-star .star-23 { width: 2px; height: 2px; top: 72%; left: 28%; animation-duration: 2s;  animation-delay: -1.1s; }
.theme-star .star-24 { width: 1px; height: 1px; top: 65%; left: 38%; animation-duration: 4.5s;animation-delay: -2.1s; }
.theme-star .star-25 { width: 3px; height: 3px; top: 70%; left: 48%; animation-duration: 2.8s;animation-delay: -0.7s; box-shadow: 0 0 5px #fff; }
.theme-star .star-26 { width: 1px; height: 1px; top: 75%; left: 56%; animation-duration: 3.7s;animation-delay: -1.7s; }
.theme-star .star-27 { width: 2px; height: 2px; top: 78%; left: 66%; animation-duration: 2.5s;animation-delay: -2.7s; }
.theme-star .star-28 { width: 2px; height: 2px; top: 82%; left: 74%; animation-duration: 3s;  animation-delay: -0.1s; }
.theme-star .star-29 { width: 1px; height: 1px; top: 85%; left: 84%; animation-duration: 4s;  animation-delay: -1.3s; }
.theme-star .star-30 { width: 3px; height: 3px; top: 88%; left: 92%; animation-duration: 2.6s;animation-delay: -2.3s; box-shadow: 0 0 4px #fff; }

@keyframes star-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* 流星 */
.theme-star .meteors {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.theme-star .meteor {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--star-meteor);
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.6);
}
.theme-star .meteor::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0)
  );
  transform: translateY(-50%);
}
.theme-star .meteor-1 {
  top: 10%; left: 20%;
  animation: meteor-shoot 6s ease-in infinite;
  animation-delay: 2s;
}
.theme-star .meteor-2 {
  top: 25%; left: 50%;
  animation: meteor-shoot 8s ease-in infinite;
  animation-delay: 5s;
}
.theme-star .meteor-3 {
  top: 15%; left: 70%;
  animation: meteor-shoot 7s ease-in infinite;
  animation-delay: 9s;
}

@keyframes meteor-shoot {
  0% {
    transform: translate(0, 0) rotate(-35deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  20% {
    transform: translate(300px, 210px) rotate(-35deg);
    opacity: 0;
  }
  100% {
    transform: translate(300px, 210px) rotate(-35deg);
    opacity: 0;
  }
}


/* ============================================================
 *  通用 z-index 层级规范（供 game.html 中的元素使用）
 *  .target    { z-index: 5; }   ← 游戏目标（地鼠/鱼/气球等）
 *  .effect    { z-index: 20; }  ← 点击特效/粒子/分数飘字
 *  .hud       { z-index: 30; }  ← 分数/计时/按钮等UI
 * ============================================================ */
.game-canvas .target,
.game-canvas [class*="target"] {
  position: relative;
  z-index: 5;
}

.game-canvas .effect,
.game-canvas [class*="effect"] {
  position: absolute;
  z-index: 20;
  pointer-events: none;
}

.game-canvas .hud {
  position: relative;
  z-index: 30;
}

/* ---------- 响应式：小屏幕微调 ---------- */
@media (max-width: 600px) {
  .theme-pirate::before,
  .theme-balloon::before {
    width: 70px;
    height: 70px;
  }
  .theme-star::before {
    width: 55px;
    height: 55px;
  }
  .theme-star::after {
    top: calc(6% + 12px);
    right: calc(8% + 15px);
    transform: scale(0.7);
  }
}

/* ---------- 尊重用户的动画偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .theme-pirate *,
  .theme-balloon *,
  .theme-whack *,
  .theme-fish *,
  .theme-star * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
 *  6个新引擎主题背景
 * ============================================================ */

/* 单词消消乐 - 紫色梦幻 */
.theme-memory {
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

/* 单词跑酷 - 蓝天绿地（引擎root会覆盖，但保留canvas底色） */
.theme-runner {
  background: linear-gradient(180deg, #87CEEB 0%, #98D982 65%, #6B8E23 100%);
}

/* 幸运转盘 - 粉金暖色 */
.theme-wheel {
  background: linear-gradient(180deg, #fa709a 0%, #fee140 100%);
}

/* 单词拼图 - 清新绿 */
.theme-spell {
  background: linear-gradient(180deg, #43e97b 0%, #38f9d7 100%);
}

/* 飞行冒险 - 天空蓝 */
.theme-flyer {
  background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
}

/* 节奏大师 - 粉紫梦幻 */
.theme-rhythm {
  background: linear-gradient(180deg, #a8edea 0%, #fed6e3 100%);
}

/* 单词射击 - 深夜森林 */
.theme-shooter {
  background: linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

/* 投篮高手 - 蓝天球场 */
.theme-basketball {
  background: linear-gradient(180deg, #87CEEB 0%, #f5a623 70%, #d4881a 100%);
}

/* 火箭发射 - 太空深紫 */
.theme-rocket {
  background: linear-gradient(180deg, #0c0c3c 0%, #1a1a5e 50%, #2d1b69 100%);
}

/* 泡泡消除 - 深海蓝 */
.theme-bubble {
  background: linear-gradient(180deg, #006994 0%, #0099CC 50%, #7fdbff 100%);
}

/* 小厨师 - 暖黄厨房 */
.theme-cooking {
  background: linear-gradient(180deg, #ffeaa7 0%, #fdcb6e 50%, #e17055 100%);
}

/* 单词叠叠乐 - 天空绿地 */
.theme-tower {
  background: linear-gradient(180deg, #74b9ff 0%, #a8e6cf 60%, #55efc4 100%);
}

/* 黄金矿工 - 矿洞棕 */
.theme-miner {
  background: linear-gradient(180deg, #3d2817 0%, #6b4226 40%, #8b5a2b 100%);
}

/* 单词连线 - 粉紫梦幻 */
.theme-connect {
  background: linear-gradient(180deg, #a18cd1 0%, #fbc2eb 50%, #c471f5 100%);
}