body{font-family:sans-serif;background:#111;color:#eee}
.wrap{max-width:480px;margin:auto;
      min-height: 1200px;   /* 增加可滑動高度 */
      padding-bottom: 200px; /* 避免浮動按鈕遮住內容 */
}
.card{background:#222;padding:10px;margin:10px 0;border-radius:8px}
button{margin:4px}
img{max-width:100px}
#log{font-size:14px;margin-top:5px}

#magic-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; /* 不擋按鈕 */ z-index: -1; background: radial-gradient(circle at center, #1a0033, #000); overflow: hidden; }

/* ===== 魔法粒子（帶強光暈） ===== */
.magic-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;

  /* 光暈加強 */
  box-shadow:
    0 0 8px rgba(255,255,255,0.9),
    0 0 16px rgba(255,200,255,0.7),
    0 0 24px rgba(200,200,255,0.5),
    0 0 32px rgba(255,255,200,0.3);

  animation: floatParticle linear infinite;
  z-index: 9999; /* 蓋住遊戲畫面，但不阻擋按鈕 */
}

/* 粒子漂浮動畫 */
@keyframes floatParticle {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-120vh); opacity: 0; }
}

/* 魔法光圈 */
.magic-circle {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  /* 這裡指定了新動畫，並確保滑鼠點不到它(不干擾網頁操作) */
  animation: magicMove linear infinite; 
  pointer-events: none; 
  will-change: transform;
}

/* 在 CSS 檔案最後面加入這段 @keyframes */
@keyframes magicMove {
  0%, 100% {
    /* 原點、大小、透明度 */
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.4;
  }
  33% {
    /* 隨機大位移 + 放大 + 變亮 */
    transform: translate(15vw, 20vh) rotate(120deg) scale(1.3);
    opacity: 0.8;
  }
  66% {
    /* 另一側大位移 + 縮小 + 旋轉 */
    transform: translate(-10vw, 40vh) rotate(240deg) scale(0.7);
    opacity: 0.5;
  }
}


@keyframes rotateCircle {
  0% { transform: rotate(0deg) translate(0,0) scale(1); }
  50% { transform: rotate(180deg) translate(0,0) scale(1.2); }
  100% { transform: rotate(360deg) translate(0,0) scale(1); }
}