:root {
  /* 設計解析度（px）：版面在這個尺寸上排（IDE 預覽就是這個大小），js/fit.js 再等比縮放到螢幕。
     --design-h-max：手機比 480×854 瘦長時（Android、iOS 工具列收起），舞台高度往上長到最多 1040；
       多出來的高度給 #stage（top:110 / bottom:210 的中段），HUD 釘在頂、道具列釘在底。
     --design-w-max：手機比 480×854 寬矮時（iPhone 在 Safari 有工具列：390×664、430×739），舞台寬度
       往外長到最多 512（≈ +7%）；上下框是 width:100% 的美術會跟著等比放大一點，其餘元素用 left/right
       或 calc(50% ± px) 錨定。再寬（平板/桌機）就兩側留白 —— HUD 框拉超過 7% 會明顯變形。
     --stage-w/--stage-h/--scale 由 js/fit.js 寫入，不要手改 */
  --design-w: 480;
  --design-h: 854;
  --design-w-max: 512;
  --design-h-max: 1040;
  --stage-w: 480;
  --stage-h: 854;
  --scale: 1;
  --bg-orange: #f89e3a;
  --panel-purple: #5c4b79;
  --text-dark: #231815;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 手機：關掉下拉更新/回彈與雙擊縮放；舞台外的留白就是這個背景色 */
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  background-color: #f89e3a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-dark);
}
#app {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--stage-w, var(--design-w)) * 1px);
  height: calc(var(--stage-h, var(--design-h)) * 1px);
  transform: translate(-50%, -50%) scale(var(--scale));
  transform-origin: center center;
  background-color: #f89e3a;
  background-image: none;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

@keyframes boardShake {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-5px, 3px); }
  30% { transform: translate(5px, -3px); }
  45% { transform: translate(-4px, -2px); }
  60% { transform: translate(4px, 2px); }
  75% { transform: translate(-2px, 1px); }
  90% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

.board-container.shake {
  animation: boardShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes epicScreenShake {
  0% { transform: translate(-50%, -50%) scale(var(--scale)) translate(0, 0) scale(1) rotate(0deg); }
  8% { transform: translate(-50%, -50%) scale(var(--scale)) translate(-15px, 11px) scale(1.035) rotate(-1.5deg); }
  18% { transform: translate(-50%, -50%) scale(var(--scale)) translate(16px, -12px) scale(1.03) rotate(1.8deg); }
  28% { transform: translate(-50%, -50%) scale(var(--scale)) translate(-14px, -9px) scale(1.025) rotate(-1.2deg); }
  38% { transform: translate(-50%, -50%) scale(var(--scale)) translate(12px, 10px) scale(1.018) rotate(1.0deg); }
  48% { transform: translate(-50%, -50%) scale(var(--scale)) translate(-9px, 7px) scale(1.012) rotate(-0.7deg); }
  60% { transform: translate(-50%, -50%) scale(var(--scale)) translate(7px, -6px) scale(1.006) rotate(0.5deg); }
  72% { transform: translate(-50%, -50%) scale(var(--scale)) translate(-5px, 4px) scale(1.002) rotate(-0.3deg); }
  85% { transform: translate(-50%, -50%) scale(var(--scale)) translate(3px, -2px) scale(1) rotate(0.1deg); }
  100% { transform: translate(-50%, -50%) scale(var(--scale)) translate(0, 0) scale(1) rotate(0deg); }
}

#app.epic-screen-shake {
  animation: epicScreenShake 0.75s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes bombBoardShake {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  10% { transform: translate(-16px, 12px) scale(1.045) rotate(-2deg); }
  22% { transform: translate(18px, -11px) scale(1.05) rotate(2.2deg); }
  35% { transform: translate(-14px, -10px) scale(1.035) rotate(-1.6deg); }
  48% { transform: translate(12px, 9px) scale(1.02) rotate(1.2deg); }
  62% { transform: translate(-9px, 6px) scale(1.01) rotate(-0.7deg); }
  76% { transform: translate(6px, -4px) scale(1.005) rotate(0.4deg); }
  88% { transform: translate(-3px, 2px) scale(1); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

.board-container.bomb-shake {
  animation: bombBoardShake 0.72s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.item-slot-btn.active {
  animation: itemBtnPulse 0.85s ease-in-out infinite alternate;
  z-index: 4;
}

@keyframes itemBtnPulse {
  0% {
    scale: 1.02;
  }
  100% {
    scale: 1.1;
  }
}

#item-bomb.active .item-frame-bg {
  animation: bombGlowPulse 0.85s ease-in-out infinite alternate;
}

@keyframes bombGlowPulse {
  0% {
    filter: drop-shadow(0 0 6px #ffcc00) drop-shadow(0 0 10px #ff5500);
  }
  100% {
    filter: drop-shadow(0 0 14px #ffff44) drop-shadow(0 0 20px #ff2200);
  }
}

#item-ghost.active .item-frame-bg {
  animation: ghostGlowPulse 0.85s ease-in-out infinite alternate;
}

@keyframes ghostGlowPulse {
  0% {
    filter: drop-shadow(0 0 6px #55e6ff) drop-shadow(0 0 10px #aa44ff);
  }
  100% {
    filter: drop-shadow(0 0 14px #a0faff) drop-shadow(0 0 22px #dd44ff);
  }
}

.tool-btn-icon:hover .btn-setting-img,
.tool-btn-icon.is-hover .btn-setting-img {
  animation: settingsGearSpin 2.5s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.9)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.tool-btn-icon:active .btn-setting-img {
  animation: none;
  transform: translate(28px, 2px) scale(0.94);
  filter: drop-shadow(0 0 4px rgba(255, 204, 0, 0.6));
}

@keyframes settingsGearSpin {
  0% {
    transform: translate(28px, 2px) scale(1.12) rotate(0deg);
  }
  50% {
    transform: translate(28px, 2px) scale(1.18) rotate(180deg);
  }
  100% {
    transform: translate(28px, 2px) scale(1.12) rotate(360deg);
  }
}

.settings-dialog {
  width: 90%;
  max-width: 350px;
  background: #2b153f;
  border: 3.5px solid #ffaa2b;
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 0 3px #180824, 0 0 20px rgba(255, 170, 43, 0.35);
  padding: 22px 20px 24px;
  color: #fff;
  box-sizing: border-box;
  animation: settingsPopIn 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes settingsPopIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.bomb-vfx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 60;
}
.bomb-flash-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--origin-x, 50%) var(--origin-y, 50%),
    rgba(255, 255, 220, 0.95) 0%,
    rgba(255, 140, 0, 0.85) 30%,
    rgba(230, 40, 0, 0.65) 60%,
    rgba(120, 10, 0, 0.45) 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  animation: bombFlashFade 0.7s ease-out forwards;
}

@keyframes bombFlashFade {
  0% { opacity: 0; transform: scale(0.92); }
  12% { opacity: 1; transform: scale(1.04); }
  35% { opacity: 0.85; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.12); }
}

.fire-beam {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: var(--len);
  height: 28px;
  margin-top: -14px;
  transform-origin: 0% 50%;
  transform: rotate(var(--rot));
  background: linear-gradient(90deg, #ffffff 0%, #fff066 18%, #ff8c00 60%, rgba(255, 30, 0, 0) 100%);
  border-radius: 14px;
  box-shadow: 0 0 22px #ff6600, 0 0 42px #ff2200;
  animation: beamShoot 0.35s ease-out forwards;
}

@keyframes beamShoot {
  0% { width: 0px; opacity: 1; transform: rotate(var(--rot)) scaleY(0.5); }
  45% { width: var(--len); opacity: 1; transform: rotate(var(--rot)) scaleY(1.4); }
  100% { width: var(--len); opacity: 0; transform: rotate(var(--rot)) scaleY(0.2); }
}

.fire-missile {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: 48px;
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 15%, #ffee55 45%, #ff5500 80%, rgba(220, 0, 0, 0) 100%);
  box-shadow: 0 0 30px #ff7700, 0 0 55px #ff2200;
  animation: missileFly 0.28s cubic-bezier(0.25, 0.9, 0.35, 1) forwards;
}

@keyframes missileFly {
  0% { transform: translate(0, 0) scale(0.3); opacity: 1; }
  85% { transform: translate(var(--tx), var(--ty)) scale(1.4); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(2.2); opacity: 0; }
}
.bomb-fireball {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  width: 240px;
  height: 240px;
  margin-left: -120px;
  margin-top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #fff7a0 20%, #ff8c00 50%, #e61900 75%, rgba(180,0,0,0) 100%);
  filter: drop-shadow(0 0 35px #ff5a00);
  pointer-events: none;
  animation: fireballBurst 0.65s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes fireballBurst {
  0% { transform: scale(0.1) rotate(0deg); opacity: 1; }
  35% { transform: scale(1.3) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 50px #ff2200); }
  70% { transform: scale(1.5) rotate(90deg); opacity: 0.8; }
  100% { transform: scale(1.8) rotate(140deg); opacity: 0; }
}
.bomb-shockwave {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
}

.bomb-shockwave.wave-1 {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  border: 10px solid #fff580;
  box-shadow: 0 0 40px #ff4800, inset 0 0 25px #ff8800;
  animation: shockwaveExpand1 0.65s cubic-bezier(0.12, 0.8, 0.25, 1) forwards;
}

@keyframes shockwaveExpand1 {
  0% { transform: scale(0.2); opacity: 1; border-width: 14px; }
  50% { opacity: 0.95; border-width: 8px; }
  100% { transform: scale(6.5); opacity: 0; border-width: 2px; }
}

.bomb-shockwave.wave-2 {
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  border: 7px solid #ff3b00;
  box-shadow: 0 0 30px #ffaa00;
  animation: shockwaveExpand2 0.75s 0.06s cubic-bezier(0.1, 0.85, 0.25, 1) forwards;
}

@keyframes shockwaveExpand2 {
  0% { transform: scale(0.2); opacity: 1; }
  60% { opacity: 0.8; }
  100% { transform: scale(5.8); opacity: 0; }
}
.bomb-spark {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  border-radius: 50%;
  pointer-events: none;
  animation: sparkFly 0.72s cubic-bezier(0.12, 0.85, 0.25, 1) forwards;
}

@keyframes sparkFly {
  0% {
    transform: translate(0, 0) scale(var(--s, 1));
    opacity: 1;
  }
  65% {
    opacity: 0.95;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0);
    opacity: 0;
  }
}
.cell-fire-flare {
  position: absolute;
  left: var(--cell-x);
  top: var(--cell-y);
  width: 54px;
  height: 54px;
  margin-left: -27px;
  margin-top: -27px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 10%, #ffe850 40%, #ff4d00 80%, rgba(255,0,0,0) 100%);
  box-shadow: 0 0 20px #ff5a00;
  pointer-events: none;
  animation: cellFlareBurst 0.55s ease-out forwards;
}

@keyframes cellFlareBurst {
  0% { transform: scale(0.2); opacity: 1; }
  40% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}
.bomb-boom-banner {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  transform: translate(-50%, -50%);
  font-size: 42px;
  font-weight: 900;
  font-family: 'Arial Black', Impact, sans-serif;
  color: #fffb91;
  letter-spacing: 2px;
  text-shadow:
    -3px -3px 0 #8b0000,
     3px -3px 0 #8b0000,
    -3px  3px 0 #8b0000,
     3px  3px 0 #8b0000,
     0 0 16px #ffe600,
     0 0 32px #ff4800,
     0 0 48px #ff0000;
  pointer-events: none;
  z-index: 65;
  animation: boomBannerAnim 0.75s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes boomBannerAnim {
  0% { transform: translate(-50%, -50%) scale(0.1) rotate(-12deg); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.4) rotate(4deg); opacity: 1; }
  55% { transform: translate(-50%, -50%) scale(1.15) rotate(-2deg); opacity: 1; }
  80% { transform: translate(-50%, -60%) scale(1.1) rotate(0deg); opacity: 0.9; }
  100% { transform: translate(-50%, -85%) scale(0.7) rotate(2deg); opacity: 0; }
}
.ghost-realm-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 60%,
    rgba(147, 51, 234, 0.45) 0%,
    rgba(88, 28, 135, 0.65) 45%,
    rgba(30, 10, 60, 0.85) 100%
  );
  mix-blend-mode: color-dodge;
  pointer-events: none;
  animation: ghostRealmPulse 0.95s ease-out forwards;
}

@keyframes ghostRealmPulse {
  0% { opacity: 0; transform: scale(0.96); }
  25% { opacity: 1; transform: scale(1.02); }
  60% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}
.board-container.ghost-shake {
  animation: ghostBoardShake 0.85s ease-in-out;
}

@keyframes ghostBoardShake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(-4px, -2px) rotate(-0.6deg); }
  30% { transform: translate(4px, 2px) rotate(0.6deg); }
  45% { transform: translate(-3px, 3px) rotate(-0.4deg); }
  65% { transform: translate(3px, -2px) rotate(0.4deg); }
  85% { transform: translate(-1px, 1px) rotate(-0.2deg); }
}
.ghost-summon-portal {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 140px;
  height: 140px;
  margin-left: -70px;
  margin-top: -70px;
  border-radius: 50%;
  border: 3px dashed #c084fc;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.75) 0%, rgba(126, 34, 206, 0.4) 50%, rgba(0,0,0,0) 75%);
  box-shadow: 0 0 30px #a855f7, 0 0 60px #7c3aed;
  pointer-events: none;
  animation: portalSpinAnim 0.85s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes portalSpinAnim {
  0% { transform: scale(0.1) rotate(0deg); opacity: 0; }
  30% { transform: scale(1.25) rotate(90deg); opacity: 1; }
  60% { transform: scale(1) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(1.5) rotate(320deg); opacity: 0; }
}
.ghost-minion-swirl {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  background-image: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 8px #c084fc);
  pointer-events: none;
  animation: minionSwirl 0.8s var(--delay, 0s) cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes minionSwirl {
  0% { transform: translate(0, 0) scale(0.3) rotate(0deg); opacity: 0; }
  30% { opacity: 1; transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1.1) rotate(-15deg); }
  70% { opacity: 0.9; transform: translate(var(--tx), var(--ty)) scale(0.9) rotate(15deg); }
  100% { opacity: 0; transform: translate(calc(var(--tx) * 1.3), calc(var(--ty) - 80px)) scale(0.2) rotate(40deg); }
}
.ghost-squad-unit {
  position: absolute;
  left: var(--tx);
  top: var(--ty);
  width: 0px;
  height: 0px;
  pointer-events: none;
  z-index: 63;
}
.ghost-carrier {
  position: absolute;
  left: 0;
  top: -24px;
  width: 58px;
  height: 58px;
  margin-left: -29px;
  margin-top: -29px;
  background-image: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 12px #c084fc) drop-shadow(0 0 24px #7c3aed);
  pointer-events: none;
  animation: ghostFlightSequence 0.92s var(--idx-delay, 0s) cubic-bezier(0.16, 0.9, 0.3, 1) forwards;
}
@keyframes ghostFlightSequence {
  0% {
    transform: translate(calc(var(--flight-dx) * -1), calc(var(--flight-dy) * -1)) scale(0.2) rotate(-20deg);
    opacity: 0;
  }
  24% {
    transform: translate(0, -28px) scale(1.2) rotate(10deg);
    opacity: 1;
  }
  38% {
    transform: translate(0, -22px) scale(1) rotate(-6deg);
    opacity: 1;
  }
  58% {
    transform: translate(0, -25px) scale(1.1) rotate(4deg);
    opacity: 1;
  }
  70% {
    transform: translate(0, -35px) scale(1.15) rotate(-10deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, -380px) scale(1.4) rotate(-25deg);
    opacity: 0;
  }
}
.ghost-tractor-beam {
  position: absolute;
  left: -32px;
  top: -24px;
  width: 64px;
  height: 60px;
  background: linear-gradient(
    180deg,
    rgba(233, 213, 255, 0.85) 0%,
    rgba(168, 85, 247, 0.6) 45%,
    rgba(126, 34, 206, 0.15) 100%
  );
  clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  animation: tractorBeamPulse 0.92s var(--idx-delay, 0s) ease-out forwards;
}

@keyframes tractorBeamPulse {
  0%, 20% { opacity: 0; transform: scaleY(0); }
  28% { opacity: 0.95; transform: scaleY(1); }
  45% { opacity: 0.8; transform: scaleY(1.05) scaleX(1.1); }
  65% { opacity: 0.95; transform: scaleY(1); }
  72% { opacity: 0.3; transform: scaleY(0.4); }
  80%, 100% { opacity: 0; transform: scaleY(0); }
}
.ghost-suction-portal {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  margin-top: -26px;
  border-radius: 50%;
  border: 2px dashed #e9d5ff;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.5) 0%, rgba(126, 34, 206, 0.1) 60%, rgba(0,0,0,0) 80%);
  box-shadow: 0 0 16px #a855f7;
  pointer-events: none;
  animation: suctionPortalAnim 0.92s var(--idx-delay, 0s) ease-out forwards;
}

@keyframes suctionPortalAnim {
  0%, 20% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.1) rotate(90deg); }
  55% { opacity: 0.9; transform: scale(1) rotate(220deg); }
  75% { opacity: 0.4; transform: scale(0.6) rotate(340deg); }
  100% { opacity: 0; transform: scale(0.1) rotate(420deg); }
}
.ghost-sucked-tile {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  margin-top: -23px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 8px #c084fc);
  pointer-events: none;
  animation: suckedTileLift 0.92s var(--idx-delay, 0s) ease-in-out forwards;
}

@keyframes suckedTileLift {
  0%, 24% {
    opacity: 0;
    transform: translate(0, 0) scale(0.9);
  }
  28% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  38% {
    opacity: 1;
    transform: translate(-2px, -12px) scale(1.05) rotate(-6deg);
  }
  48% {
    opacity: 1;
    transform: translate(2px, -18px) scale(0.95) rotate(6deg);
  }
  60% {
    opacity: 1;
    transform: translate(0, -24px) scale(0.85) rotate(-3deg);
  }
  70% {
    opacity: 0.9;
    transform: translate(0, -32px) scale(0.65) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(0, -370px) scale(0.2) rotate(20deg);
  }
}
.ghost-soul-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, #c084fc, #7c3aed);
  box-shadow: 0 0 10px #a855f7;
  pointer-events: none;
  animation: soulSparkInward 0.92s var(--idx-delay, 0s) ease-out forwards;
}

@keyframes soulSparkInward {
  0%, 25% { opacity: 0; transform: scale(0); }
  35% {
    opacity: 1;
    transform: translate(calc(cos(var(--spark-idx) * 2) * 28px), calc(sin(var(--spark-idx) * 2) * 28px)) scale(1);
  }
  60% {
    opacity: 0.9;
    transform: translate(0, -22px) scale(0.4);
  }
  80%, 100% {
    opacity: 0;
    transform: translate(0, -30px) scale(0);
  }
}
.ghost-steal-banner {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 45%);
  transform: translate(-50%, -50%);
  font-size: 38px;
  font-weight: 900;
  font-family: 'Arial Black', Impact, sans-serif;
  color: #f3e8ff;
  letter-spacing: 2px;
  text-shadow:
    -3px -3px 0 #3b0764,
     3px -3px 0 #3b0764,
    -3px  3px 0 #3b0764,
     3px  3px 0 #3b0764,
     0 0 16px #a855f7,
     0 0 32px #7c3aed,
     0 0 48px #22c55e;
  pointer-events: none;
  z-index: 66;
  animation: ghostBannerAnim 0.85s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes ghostBannerAnim {
  0% { transform: translate(-50%, -50%) scale(0.1) rotate(8deg); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.35) rotate(-4deg); opacity: 1; }
  55% { transform: translate(-50%, -50%) scale(1.1) rotate(2deg); opacity: 1; }
  80% { transform: translate(-50%, -60%) scale(1.05) rotate(-1deg); opacity: 0.9; }
  100% { transform: translate(-50%, -90%) scale(0.65) rotate(0deg); opacity: 0; }
}
.bat-anim-hero {
  position: absolute;
  left: calc(50% - 215px);
  top: 124px;
  width: 120px;
  height: 68px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 4;
  display: block;
  overflow: visible !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  animation: batHeroHover 3.2s ease-in-out infinite;
  transition: filter 0.25s ease;
  user-select: none;
  -webkit-user-select: none;
}

.bat-anim-hero:hover {
  filter: drop-shadow(0 0 12px #facc15) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.bat-anim-hero.clicked {
  animation: batHeroFlip 0.65s cubic-bezier(0.2, 0.9, 0.3, 1.2) !important;
}

@keyframes batHeroHover {
  0%, 100% {
    transform: translateY(0px) rotate(-3deg);
  }
  50% {
    transform: translateY(-8px) rotate(4deg);
  }
}

@keyframes batHeroFlip {
  0% {
    transform: scale(1) rotate(0deg);
  }
  40% {
    transform: scale(1.3) translateY(-18px) rotate(-180deg);
  }
  80% {
    transform: scale(1.1) translateY(-6px) rotate(-360deg);
  }
  100% {
    transform: scale(1) translateY(0px) rotate(-360deg);
  }
}

.bat-anim-hero.active {
  left: var(--bx, 50%);
  top: var(--by, 50%);
  width: 212px;
  height: 120px;
  margin-left: -106px;
  margin-top: -60px;
  pointer-events: none;
  z-index: 68;
  animation: batHeroJump 0.82s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  filter: drop-shadow(0 0 16px #c084fc) drop-shadow(0 0 32px #facc15);
}

@keyframes batHeroJump {
  0% {
    transform: translate(0, 0) scale(0.85);
    opacity: 0.9;
  }
  20% {
    transform: translate(0, 8px) scale(0.95);
    opacity: 1;
  }
  45% {
    transform: translate(0, -42px) scale(1.35);
    opacity: 1;
  }
  75% {
    transform: translate(0, -48px) scale(1.4);
    opacity: 1;
  }
  100% {
    transform: translate(0, -56px) scale(1.1);
    opacity: 0.9;
  }
}
.bat-energy-burst {
  position: absolute;
  left: var(--bx, 50%);
  top: var(--by, 50%);
  width: 180px;
  height: 180px;
  margin-left: -90px;
  margin-top: -90px;
  border-radius: 50%;
  border: 4px solid #facc15;
  box-shadow: 0 0 30px #c084fc, 0 0 60px #a855f7, inset 0 0 30px #facc15;
  pointer-events: none;
  z-index: 65;
  animation: batBurstWave 0.75s ease-out forwards;
}

@keyframes batBurstWave {
  0% { transform: scale(0.1); opacity: 1; }
  60% { transform: scale(1.6); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}
.bat-projectile {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 52px;
  height: 52px;
  margin-left: -26px;
  margin-top: -26px;
  opacity: 0;
  pointer-events: none;
  z-index: 69;
  animation: batFlightPath 0.46s var(--delay, 0s) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.bat-projectile-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px #e879f9) drop-shadow(0 0 20px #facc15);
  animation: batWingFlap 0.15s ease-in-out infinite alternate;
}

@keyframes batWingFlap {
  0% { transform: scaleY(0.7) rotate(-3deg); }
  100% { transform: scaleY(1.15) rotate(3deg); }
}

@keyframes batFlightPath {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(calc((var(--tx) - var(--sx)) * 0.15), calc((var(--ty) - var(--sy)) * 0.15 - 28px)) scale(1.2);
  }
  75% {
    opacity: 1;
    transform: translate(calc((var(--tx) - var(--sx)) * 0.85), calc((var(--ty) - var(--sy)) * 0.85 - 10px)) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translate(calc(var(--tx) - var(--sx)), calc(var(--ty) - var(--sy))) scale(0.9);
  }
}
.bat-hit-impact {
  position: absolute;
  left: var(--ix, var(--tx, 50%));
  top: var(--iy, var(--ty, 50%));
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
  border-radius: 50%;
  background: radial-gradient(circle, #fef08a 0%, #c084fc 45%, rgba(126, 34, 206, 0) 75%);
  box-shadow: 0 0 20px #facc15, 0 0 40px #a855f7;
  pointer-events: none;
  z-index: 67;
  animation: batImpactPop 0.4s ease-out forwards;
}

@keyframes batImpactPop {
  0% { transform: scale(0.2); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.95; }
  100% { transform: scale(1.7); opacity: 0; }
}
/* Layout overlay for the proven match-3 engine. The fit.js stage transform is retained. */
:root { --design-w:480; --design-h:854; --design-w-max:540; --design-h-max:1100; --paper:#e9ede8; --card:#f9faf6; --ink:#354038; --mint:#cbd6c6; --pink:#d9ddd8; --line:#c3cdc0; --accent:#849a77; }
html,body { background:var(--paper); color:var(--ink); font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif; }
#app { display:flex; flex-direction:column; padding:20px; background:var(--paper); background-image:radial-gradient(#ffffff55 1px,transparent 1px); background-size:18px 18px; box-shadow:none; }
button { font:inherit; color:var(--ink); cursor:pointer; touch-action:manipulation; }
button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
#hud-container { position:relative; inset:auto; display:flex; width:100%; height:72px; flex:none; transform:none; justify-content:space-between; align-items:flex-start; }
.game-heading { max-width:calc(100% - 104px); }
#game-eyebrow { font-size:8px; font-weight:700; letter-spacing:2px; color:#74806c; margin-bottom:7px; }
#game-title { font-size:26px; font-weight:800; line-height:1.25; letter-spacing:-1px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#game-subtitle { font-size:11px; margin-top:6px; color:#7c8674; }
.game-controls { position:absolute; right:0; top:0; display:flex; gap:5px; margin-top:10px; }
.game-controls button { width:29px; height:29px; border:1px solid var(--line); background:var(--card); border-radius:50%; font-size:15px; display:grid; place-items:center; padding:0; }
#btn-settings { position:static; width:29px; height:29px; transform:none; }
#hud-stats { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:10px; flex:none; height:64px; margin:6px 0 8px; }
.stat-card { border:1px solid var(--line); background:var(--card); border-radius:15px; padding:10px 14px; box-shadow:0 3px 0 #00000007; }
.stat-card>span { display:block; font-size:10px; color:#7e8573; }
.stat-card>strong { display:block; font-size:25px; line-height:1.2; margin-top:3px; }
.stat-card #moves,.stat-card #score { font-size:25px; line-height:1.2; font-weight:750; }
#panel-moves { margin:0; }
.goal-hint { display:flex; align-items:center; justify-content:center; gap:9px; }
.goal-hint img { width:32px; height:32px; }
.goal-hint>span { font-size:12px; }
.goal-hint strong { display:inline; font-size:21px; color:var(--ink); }
#stage { position:relative; inset:auto; flex:1; display:flex; justify-content:center; align-items:center; min-height:476px; width:100%; padding:0; }
.board-container { position:relative; inset:auto; transform:none; padding:12px; background:var(--mint); border:2px solid #ffffffc9; border-radius:24px; box-shadow:0 7px 0 #6671581c, 0 14px 30px #68705112; }
#board { display:block; background:transparent; border:none; border-radius:13px; }
.hidden { display:none!important; }
#footer-container { position:relative; inset:auto; height:140px; width:100%; flex:none; background:none; margin-top:6px; }
#img-bho21-5 { position:absolute; left:-3px; bottom:0; top:auto; width:148px; height:147px; object-fit:contain; transform:none; filter:drop-shadow(0 8px 4px #64724d14); z-index:1; }
.cat-footer-right { margin-left:143px; padding-top:19px; }
#cat-message { display:inline-block; font-size:11px; background:var(--card); border:1px solid var(--line); padding:8px 12px; border-radius:14px 14px 14px 3px; white-space:nowrap; }
.item-bar { position:static; display:flex; align-items:center; justify-content:flex-start; gap:10px; transform:none; margin-top:15px; width:auto; height:auto; }
.item-slot-btn { position:relative; width:54px; height:54px; padding:10px; border:1px solid var(--line); border-radius:50%; background:var(--card); flex:none; box-shadow:0 4px 0 #63745316; }
.item-slot-btn .item-icon { position:static; inset:auto; width:32px; height:32px; transform:none; object-fit:contain; }
.item-slot-btn .badge-count { position:absolute; top:-4px; right:-3px; width:21px; height:21px; display:grid; place-items:center; border-radius:50%; border:2px solid var(--card); background:var(--accent); color:white; font-size:11px; }
.item-slot-btn.active { outline:3px solid var(--accent); transform:translateY(-3px); }
.item-slot-btn.disabled { opacity:.4; }
#item-pumpkin-goal { position:static; width:auto; height:auto; margin-left:3px; transform:none; text-align:center; background:none; }
.goal-caption { display:block; font-size:9px; color:#818574; }
#count-pumpkin { display:block; font-size:25px; line-height:1.3; letter-spacing:-1px; color:var(--ink); }
.game-footnote { font-size:9px; color:#929683; text-align:center; letter-spacing:.3px; flex:none; margin-top:4px; }
.ip-reference { position:absolute; left:22px; bottom:4px; font-size:7px; color:#9a9c8d; text-decoration:none; }
.overlay { position:absolute; inset:0; background:#37433480; backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:500; padding:26px; }
.overlay.hidden { display:none; }
.result-card,.settings-dialog { padding:28px; width:100%; background:var(--card); color:var(--ink); border:2px solid white; border-radius:24px; text-align:center; box-shadow:0 20px 70px #28351b33; }
.result-spark { display:block; color:var(--accent); font-size:45px; }
#result-title { font-size:29px; font-weight:800; margin:12px 0; color:var(--ink); }
#result-detail { font-size:14px; line-height:1.8; margin-bottom:20px; color:#748068; }
#btn-again,.settings-actions button { padding:13px 20px; background:var(--accent); color:white; border:0; border-radius:12px; font-size:14px; }
.settings-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.settings-header h2 { font-size:24px; color:var(--ink); }
#btn-settings-close { background:transparent; border:0; }
.settings-group { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; margin:14px 0 24px; }
.settings-group input { width:100%; accent-color:var(--accent); }
.settings-actions { display:flex; gap:12px; justify-content:center; }
.settings-actions button { flex:1; }