/* ===========================================================
   candy-skin.css —— 把游戏的棋子和按钮替换为
   /newUI/ 风格的糖果造型（火苗 / 雪花 / 闪电 / 三叶草 / 紫水晶）
   + 玻璃→液体充能按钮 + 紫色梦幻背景

   ⚠️ 这份文件只覆盖视觉层，不改任何 JS / HTML 结构。
   它在 style.css 之后加载，所以可以无脑覆盖。
   =========================================================== */

/* ---------- 全局调色：紫色梦幻背景 ---------- */
:root {
  --candy-c-red:    #ff3b6e;
  --candy-c-yellow: #ffd93d;
  --candy-c-green:  #5ac84a;
  --candy-c-blue:   #3eb1ff;
  --candy-c-purple: #a86dff;
  --candy-c-pink:   #ff80ab;
  --candy-text:     #fff8e8;
  --candy-text-dim: #d6c4ff;
}

body {
  background: linear-gradient(180deg, #4a1d8a 0%, #2d1265 50%, #1a0a4a 100%) !important;
  color: var(--candy-text);
}

#game-container {
  background: transparent !important;
}

/* 顶部状态条：玻璃质感 */
#top-bar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%) !important;
  border-bottom: 2px solid rgba(255,255,255,.2) !important;
  box-shadow: 0 2px 12px rgba(122,60,255,.25) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#top-bar .stat-block,
#top-bar .bar-text,
#top-bar #wave-text,
#top-bar #score-text {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* ===========================================================
   #match-zone 棋盘区：透明玻璃 + 紫色光晕
   =========================================================== */
#match-zone {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,180,220,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(122,60,255,.25) 0%, transparent 70%),
    transparent !important;
  padding: 14px 12px 24px !important;
}
/* 移除原来的左右糖果柱 */
#match-zone::before,
#match-zone::after {
  display: none !important;
}

/* 棋盘容器：玻璃质感 + 白边 */
#board {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 100%) !important;
  border: 3px solid rgba(255,255,255,.3) !important;
  border-radius: 28px !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.4),
    inset 0 4px 20px rgba(255,255,255,.15) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px !important;
  gap: 6px !important;
}

/* 棋盘格子：半透明圆角凹槽 */
.cell {
  background: rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}

/* 隐藏原来的 ::before / ::after 装饰 */
.cell::before,
.cell::after {
  content: none !important;
  display: none !important;
}

/* 隐藏 emoji / gem-img 图层（我们用纯 CSS 重绘） */
.cell > span {
  display: none !important;
}
.cell .gem-img {
  display: none !important;
}

/* ===========================================================
   糖果棋子：在 .cell 上重新挂 ::before（造型）+ ::after（高光）
   覆盖原有规则：用同一种风格的 5 种糖果
   =========================================================== */

/* 公共：在每个有 data-type 的 cell 上铺一个 86%×86% 的造型层 */
.cell[data-type]::before,
.cell[data-type]::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 7% !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  border-radius: 0 !important;
  z-index: 1;
}

/* 落下动画 */
.cell[data-type]::before {
  animation: candyDrop .6s cubic-bezier(0.68,-0.55,0.27,1.55) backwards;
}
@keyframes candyDrop {
  from { transform: translateY(-200%) scale(.5); opacity: 0; }
  to   { transform: translateY(0) scale(1);     opacity: 1; }
}

/* ====================================================
   1) FIRE → 红色火苗（外焰 + 内焰双层）
   ==================================================== */
.cell[data-type="fire"]::before {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='of' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ffc170'/><stop offset='25%25' stop-color='%23ff9d4a'/><stop offset='55%25' stop-color='%23ff6a3d'/><stop offset='85%25' stop-color='%23ff4a3a'/><stop offset='100%25' stop-color='%23e83a35'/></linearGradient></defs><path d='M 60,6 C 54,18 46,28 40,38 C 34,46 30,46 32,38 C 28,42 22,52 18,64 C 14,76 16,86 24,92 C 32,97 42,98 50,98 C 62,98 76,95 84,86 C 90,76 88,62 82,52 C 78,46 74,42 72,38 C 72,30 68,18 60,6 Z' fill='url(%23of)' stroke='%23c93428' stroke-opacity='0.45' stroke-width='1' stroke-linejoin='round'/></svg>") center / contain no-repeat !important;
  filter: drop-shadow(0 4px 10px rgba(255,90,60,.55)) drop-shadow(0 0 16px rgba(255,160,80,.7)) !important;
  transform-origin: 50% 100%;
  animation: candyDrop .6s cubic-bezier(0.68,-0.55,0.27,1.55) backwards,
             flameFlicker 1.6s ease-in-out infinite 0.6s;
}
.cell[data-type="fire"]::after {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='if' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23fff4d4'/><stop offset='40%25' stop-color='%23ffe2a0'/><stop offset='75%25' stop-color='%23ffc878'/><stop offset='100%25' stop-color='%23ffae5c'/></linearGradient></defs><path d='M 54,46 C 50,52 46,56 44,60 C 42,62 41,60 42,57 C 39,60 36,66 35,72 C 34,80 38,86 44,89 C 50,91 56,91 62,89 C 68,86 70,80 68,72 C 67,68 64,64 62,62 C 62,58 60,52 54,46 Z' fill='url(%23if)'/></svg>") center / contain no-repeat !important;
  z-index: 2;
  transform-origin: 50% 90%;
  animation: flameCoreFlicker 1.6s ease-in-out infinite;
}
@keyframes flameFlicker {
  0%,100% { transform: scale(1,1)       skewX(0deg); }
  25%     { transform: scale(.96,1.04)  skewX(-1deg); }
  50%     { transform: scale(1.04,.96)  skewX(1deg); }
  75%     { transform: scale(.98,1.02)  skewX(-.5deg); }
}
@keyframes flameCoreFlicker {
  0%,100% { opacity: .95; transform: scale(1,1)      skewX(0deg); }
  33%     { opacity: 1;   transform: scale(.94,1.06) skewX(.6deg); }
  66%     { opacity: .9;  transform: scale(1.04,.96) skewX(-.6deg); }
}

/* ====================================================
   2) ICE → 蓝色雪花（六向对称 SVG mask）
   ==================================================== */
.cell[data-type="ice"]::before {
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0%, #e6f5ff 12%, #80d0ff 35%, #3eb1ff 65%, #1565a8 100%) !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='black' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'><line x1='50' y1='8' x2='50' y2='92'/><line x1='8' y1='50' x2='92' y2='50'/><line x1='20' y1='20' x2='80' y2='80'/><line x1='80' y1='20' x2='20' y2='80'/><polyline points='42,16 50,8 58,16' fill='none'/><polyline points='42,84 50,92 58,84' fill='none'/><polyline points='16,42 8,50 16,58' fill='none'/><polyline points='84,42 92,50 84,58' fill='none'/><polyline points='22,32 24,22 34,24' fill='none'/><polyline points='66,76 76,78 78,68' fill='none'/><polyline points='34,76 24,78 22,68' fill='none'/><polyline points='66,24 76,22 78,32' fill='none'/><line x1='50' y1='30' x2='42' y2='38' stroke-width='5'/><line x1='50' y1='30' x2='58' y2='38' stroke-width='5'/><line x1='50' y1='70' x2='42' y2='62' stroke-width='5'/><line x1='50' y1='70' x2='58' y2='62' stroke-width='5'/><line x1='30' y1='50' x2='38' y2='42' stroke-width='5'/><line x1='30' y1='50' x2='38' y2='58' stroke-width='5'/><line x1='70' y1='50' x2='62' y2='42' stroke-width='5'/><line x1='70' y1='50' x2='62' y2='58' stroke-width='5'/><circle cx='50' cy='50' r='7'/></g></svg>") center / contain no-repeat !important;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='black' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'><line x1='50' y1='8' x2='50' y2='92'/><line x1='8' y1='50' x2='92' y2='50'/><line x1='20' y1='20' x2='80' y2='80'/><line x1='80' y1='20' x2='20' y2='80'/><polyline points='42,16 50,8 58,16' fill='none'/><polyline points='42,84 50,92 58,84' fill='none'/><polyline points='16,42 8,50 16,58' fill='none'/><polyline points='84,42 92,50 84,58' fill='none'/><polyline points='22,32 24,22 34,24' fill='none'/><polyline points='66,76 76,78 78,68' fill='none'/><polyline points='34,76 24,78 22,68' fill='none'/><polyline points='66,24 76,22 78,32' fill='none'/><line x1='50' y1='30' x2='42' y2='38' stroke-width='5'/><line x1='50' y1='30' x2='58' y2='38' stroke-width='5'/><line x1='50' y1='70' x2='42' y2='62' stroke-width='5'/><line x1='50' y1='70' x2='58' y2='62' stroke-width='5'/><line x1='30' y1='50' x2='38' y2='42' stroke-width='5'/><line x1='30' y1='50' x2='38' y2='58' stroke-width='5'/><line x1='70' y1='50' x2='62' y2='42' stroke-width='5'/><line x1='70' y1='50' x2='62' y2='58' stroke-width='5'/><circle cx='50' cy='50' r='7'/></g></svg>") center / contain no-repeat !important;
  filter: drop-shadow(0 4px 10px rgba(62,177,255,.55)) drop-shadow(0 0 16px rgba(128,208,255,.6)) !important;
  transform-origin: 50% 50%;
  animation: candyDrop .6s cubic-bezier(0.68,-0.55,0.27,1.55) backwards,
             snowSpin 3s ease-in-out infinite 0.6s;
}
.cell[data-type="ice"]::after {
  inset: 35% !important;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.4) 40%, transparent 70%) !important;
  border-radius: 50% !important;
  filter: blur(1px);
  z-index: 2;
  animation: snowGlow 2.5s ease-in-out infinite;
}
@keyframes snowSpin {
  0%           { transform: rotate(0deg); }
  5%           { transform: rotate(-8deg); }
  28%          { transform: rotate(188deg); }
  33.33%       { transform: rotate(176deg); }
  33.34%, 100% { transform: rotate(180deg); }
}
@keyframes snowGlow {
  0%,100% { opacity: .7; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.25); }
}

/* ====================================================
   3) THUNDER → 黄色闪电
   ==================================================== */
.cell[data-type="thunder"]::before {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='bm' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%23fffae0'/><stop offset='25%25' stop-color='%23fff09c'/><stop offset='55%25' stop-color='%23ffd93d'/><stop offset='85%25' stop-color='%23f5b400'/><stop offset='100%25' stop-color='%23b87f00'/></linearGradient><linearGradient id='bs' x1='0' y1='0' x2='1' y2='0'><stop offset='0%25' stop-color='%23a16800'/><stop offset='100%25' stop-color='%23704800'/></linearGradient></defs><polygon points='62,4 18,52 40,52 32,96 84,42 58,42 70,4' fill='%23704800' transform='translate(4,4)' opacity='0.85'/><polygon points='62,4 18,52 40,52 32,96 84,42 58,42 70,4' fill='url(%23bs)' transform='translate(2,2)'/><polygon points='62,4 18,52 40,52 32,96 84,42 58,42 70,4' fill='url(%23bm)' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='1' stroke-linejoin='round'/><polygon points='62,4 32,42 50,42 44,80 70,12 60,12' fill='%23ffffff' fill-opacity='0.35'/><polygon points='66,8 58,18 64,18' fill='%23ffffff' fill-opacity='0.85'/></svg>") center / contain no-repeat !important;
  filter: drop-shadow(0 5px 10px rgba(255,217,61,.55)) drop-shadow(0 0 16px rgba(255,240,156,.85)) !important;
  transform-origin: 50% 50%;
  animation: candyDrop .6s cubic-bezier(0.68,-0.55,0.27,1.55) backwards,
             lightningJitter 1.8s ease-in-out infinite 0.6s;
}
.cell[data-type="thunder"]::after {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='62,4 32,42 50,42 44,80 70,12 60,12' fill='%23ffffff' fill-opacity='0.55'/></svg>") center / contain no-repeat !important;
  filter: blur(.6px);
  z-index: 2;
  animation: lightningFlash 2.4s ease-in-out infinite;
}
@keyframes lightningJitter {
  0%,100% { transform: scale(1,1)      skewX(0deg); }
  20%     { transform: scale(1.02,.98) skewX(-1.2deg); }
  40%     { transform: scale(.97,1.03) skewX(1deg); }
  60%     { transform: scale(1.03,.97) skewX(-.6deg); }
  80%     { transform: scale(.99,1.01) skewX(.8deg); }
}
@keyframes lightningFlash {
  0%,92%,100% { opacity: .5; }
  94%         { opacity: 1; }
  96%         { opacity: .3; }
  98%         { opacity: 1; }
}

/* ====================================================
   4) LEAF → 绿色三叶草
   ==================================================== */
.cell[data-type="leaf"]::before {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><radialGradient id='cl' cx='50%25' cy='35%25' r='65%25'><stop offset='0%25' stop-color='%23a3e896'/><stop offset='55%25' stop-color='%235dc24a'/><stop offset='100%25' stop-color='%23348a26'/></radialGradient></defs><path d='M 50,92 Q 50,80 50,66 Q 50,58 50,52' stroke='%231a5912' stroke-width='3' stroke-linecap='round' fill='none'/><g stroke='%231a5912' stroke-opacity='0.65' stroke-width='1.2' stroke-linejoin='round'><path transform='rotate(0 50 52)' d='M 50,52 C 38,52 22,46 14,32 C 8,20 14,8 28,4 C 42,1 56,1 70,4 C 84,8 90,20 84,32 C 76,46 60,52 50,52 Z' fill='url(%23cl)'/><path transform='rotate(120 50 52)' d='M 50,52 C 38,52 22,46 14,32 C 8,20 14,8 28,4 C 42,1 56,1 70,4 C 84,8 90,20 84,32 C 76,46 60,52 50,52 Z' fill='url(%23cl)'/><path transform='rotate(240 50 52)' d='M 50,52 C 38,52 22,46 14,32 C 8,20 14,8 28,4 C 42,1 56,1 70,4 C 84,8 90,20 84,32 C 76,46 60,52 50,52 Z' fill='url(%23cl)'/></g><circle cx='50' cy='52' r='4' fill='%232d8a20' stroke='%231a5912' stroke-width='0.8'/></svg>") center / contain no-repeat !important;
  filter: drop-shadow(0 4px 8px rgba(90,200,74,.45)) !important;
  transform-origin: 50% 90%;
  animation: candyDrop .6s cubic-bezier(0.68,-0.55,0.27,1.55) backwards,
             cloverSway 2.6s ease-in-out infinite 0.6s;
}
.cell[data-type="leaf"]::after {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g stroke='%231a5912' stroke-opacity='0.55' stroke-linecap='round' fill='none' stroke-width='1.2'><path transform='rotate(0 50 52)' d='M 50,48 Q 50,26 50,8'/><path transform='rotate(120 50 52)' d='M 50,48 Q 50,26 50,8'/><path transform='rotate(240 50 52)' d='M 50,48 Q 50,26 50,8'/></g><ellipse cx='38' cy='16' rx='6' ry='2.6' fill='%23ffffff' fill-opacity='0.32' transform='rotate(-30 38 16)'/><ellipse cx='62' cy='16' rx='3' ry='1.4' fill='%23ffffff' fill-opacity='0.22' transform='rotate(30 62 16)'/></svg>") center / contain no-repeat !important;
  transform-origin: 50% 90%;
  z-index: 2;
  animation: cloverSwayVein 2.6s ease-in-out infinite;
}
@keyframes cloverSway {
  0%,100% { transform: rotate(0deg)    scale(1,1); }
  25%     { transform: rotate(-2.2deg) scale(1.02,.98); }
  50%     { transform: rotate(0deg)    scale(.98,1.02); }
  75%     { transform: rotate(2.2deg)  scale(1.02,.98); }
}
@keyframes cloverSwayVein {
  0%,100% { transform: rotate(0deg);    opacity: .95; }
  25%     { transform: rotate(-2.2deg); opacity: 1; }
  50%     { transform: rotate(0deg);    opacity: .85; }
  75%     { transform: rotate(2.2deg);  opacity: 1; }
}

/* ====================================================
   5) GOLD → 紫水晶宝石（多刻面 SVG）
   ==================================================== */
.cell[data-type="gold"]::before {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='gt' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='40%25' stop-color='%23f0d9ff'/><stop offset='100%25' stop-color='%23c9a3ff'/></linearGradient><linearGradient id='gcl' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%23e6c8ff'/><stop offset='100%25' stop-color='%239d63ee'/></linearGradient><linearGradient id='gcr' x1='1' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23d3a8ff'/><stop offset='100%25' stop-color='%237a3cd8'/></linearGradient><linearGradient id='gpl' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%238848d4'/><stop offset='100%25' stop-color='%234a1a8c'/></linearGradient><linearGradient id='gpr' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%236d2cb8'/><stop offset='100%25' stop-color='%23320d6e'/></linearGradient><linearGradient id='gpm' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23a86dff'/><stop offset='100%25' stop-color='%235a2a9e'/></linearGradient></defs><polygon points='30,12 70,12 86,32 50,32 14,32' fill='url(%23gt)' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='1' stroke-linejoin='round'/><polygon points='14,32 30,12 30,32' fill='url(%23gcl)' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='0.8'/><polygon points='30,12 50,32 70,12' fill='%23e6c8ff' fill-opacity='0.85' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='0.8'/><polygon points='70,12 70,32 86,32' fill='url(%23gcr)' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='0.8'/><polygon points='14,32 30,32 24,58' fill='url(%23gpl)' stroke='%23ffffff' stroke-opacity='0.3' stroke-width='0.6'/><polygon points='30,32 50,32 40,62' fill='url(%23gpm)' stroke='%23ffffff' stroke-opacity='0.3' stroke-width='0.6'/><polygon points='50,32 70,32 60,62' fill='url(%23gpm)' stroke='%23ffffff' stroke-opacity='0.3' stroke-width='0.6'/><polygon points='70,32 86,32 76,58' fill='url(%23gpr)' stroke='%23ffffff' stroke-opacity='0.3' stroke-width='0.6'/><polygon points='24,58 40,62 50,92' fill='%234a1a8c' stroke='%23ffffff' stroke-opacity='0.25' stroke-width='0.6'/><polygon points='40,62 60,62 50,92' fill='url(%23gpm)' stroke='%23ffffff' stroke-opacity='0.3' stroke-width='0.6'/><polygon points='60,62 76,58 50,92' fill='%23320d6e' stroke='%23ffffff' stroke-opacity='0.25' stroke-width='0.6'/><polygon points='32,18 44,18 38,28' fill='%23ffffff' fill-opacity='0.55'/><polygon points='34,20 40,20 37,25' fill='%23ffffff' fill-opacity='0.95'/></svg>") center / contain no-repeat !important;
  filter: drop-shadow(0 6px 14px rgba(122,60,255,.65)) drop-shadow(0 0 16px rgba(200,150,255,.7)) !important;
}
.cell[data-type="gold"]::after {
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,0) 60%,
    transparent 70%) !important;
  background-size: 250% 250% !important;
  background-position: 150% 50% !important;
  mix-blend-mode: screen;
  z-index: 2;
  animation: gemShine 3s ease-in-out infinite;
}
@keyframes gemShine {
  0%   { background-position: 150% 50%; opacity: 0; }
  15%  { opacity: 1; }
  33.3%{ background-position: -50% 50%; opacity: 0; }
  100% { background-position: -50% 50%; opacity: 0; }
}

/* selected 状态：保留原有金色描边 */
.cell.selected {
  outline: 3px solid var(--candy-c-yellow) !important;
  outline-offset: -3px !important;
  box-shadow:
    0 0 0 4px rgba(255,217,61,.6),
    0 0 18px rgba(255,217,61,.85) !important;
  z-index: 5;
}
.cell.selected::before {
  filter: brightness(1.25) saturate(1.3) drop-shadow(0 0 12px #fff) !important;
}

/* matching 时把糖果一起缩到 0 */
.cell.matching::before,
.cell.matching::after {
  animation: cellMatch .55s cubic-bezier(.34,1.56,.64,1) forwards !important;
}

/* ===========================================================
   #card-bar 卡牌条：玻璃→液体充能按钮（替换原 candy 按钮）
   =========================================================== */
#card-bar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.18) 100%) !important;
  border-top: 2px solid rgba(255,255,255,.15) !important;
  border-bottom: 2px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 -2px 12px rgba(122,60,255,.25) !important;
  height: 92px !important;
  gap: 10px !important;
  padding: 12px 14px !important;
}

/* .card-item 重构成参考站 .btn 玻璃形态 */
.card-item {
  /* 把 charges/CARD_MAX 的 .card-fill height(0~100%) 当作 --charge(0~1) 之外，
     这里直接用 .card-fill 的 height 视觉化液体高度，不依赖 --charge */
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,.35) !important;
  border-radius: 999px !important;
  box-shadow:
    0 3px 0 rgba(0,0,0,.35),
    0 6px 14px rgba(0,0,0,.25),
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -2px 6px rgba(0,0,0,.15) !important;
  overflow: hidden !important;
  isolation: isolate;
  transition: transform .25s cubic-bezier(0.68,-0.55,0.27,1.55),
              box-shadow .6s ease,
              border-color .6s ease !important;
}
.card-item:active {
  transform: translateY(2px) scale(.97) !important;
}
.card-item:hover {
  transform: translateY(-3px) scale(1.02) !important;
}

/* 顶部胶囊白光带 —— 与参考站 .btn::before 同款，常驻 */
/* ✦ 用户需求：移除技能栏卡片上的顶部高光（保留样式块以便日后恢复） */
.card-item::before {
  display: none !important;
  content: '' !important;
  position: absolute !important;
  top: 4px !important;
  left: 8% !important;
  right: 8% !important;
  bottom: auto !important;
  inset: auto !important;
  width: auto !important;
  height: 30% !important;
  background: rgba(255,255,255,.45) !important;
  border-radius: 100px !important;
  pointer-events: none !important;
  z-index: 3;
  clip-path: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
}

/* .card-fill 改造：保持 height = 充能进度（JS 已在控制） */
.card-fill {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* height 由 JS 控制：0%~100% */
  background: var(--card-fill-grad,
    linear-gradient(180deg, #fff, var(--card-color, #fff))) !important;
  box-shadow:
    inset 0 2px 0 0 rgba(255,255,255,.9),
    inset 0 6px 8px -4px rgba(255,255,255,.55) !important;
  opacity: 1 !important;
  border-top: none !important;
  transition: height 1.4s cubic-bezier(0.45,0.05,0.35,1) !important;
  border-radius: inherit !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 5 种主题色填充梯度：用 data-type 选择 */
.card-item[data-type="fire"] {
  --card-fill-grad: linear-gradient(180deg, #ff8a3d 0%, #ff3b6e 50%, #b8143a 100%);
}
.card-item[data-type="ice"] {
  --card-fill-grad: linear-gradient(180deg, #b8e6ff 0%, #3eb1ff 50%, #1565a8 100%);
}
.card-item[data-type="thunder"] {
  --card-fill-grad: linear-gradient(180deg, #fff09c 0%, #ffd93d 50%, #c79e00 100%);
}
.card-item[data-type="leaf"] {
  --card-fill-grad: linear-gradient(180deg, #9ce58e 0%, #5ac84a 50%, #2d8a20 100%);
}
.card-item[data-type="gold"] {
  --card-fill-grad: linear-gradient(180deg, #d3a8ff 0%, #a86dff 50%, #5a2a9e 100%);
}

/* card-content：纵向居中 */
.card-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 100% !important;
}

/* 图标：默认半透明白，充能完成后变纯白 + 主题光晕 */
.card-icon {
  color: rgba(255,255,255,.6) !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)) !important;
  transition: color .5s ease, filter .5s ease, transform .3s ease !important;
  width: 28px !important;
  height: 28px !important;
}
.card-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.card-name {
  font-size: 10px !important;
  letter-spacing: 1.2px !important;
  color: rgba(255,255,255,.85) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.6) !important;
}

/* 就绪态 —— 替换原有金边光环为白色饱满边框 + 主题色光晕 */
.card-item.ready {
  border-color: #fff !important;
  box-shadow:
    0 4px 0 rgba(0,0,0,.45),
    0 0 24px var(--card-color, #fff),
    0 0 40px color-mix(in srgb, var(--card-color, #fff) 60%, transparent),
    inset 0 1px 1px rgba(255,255,255,.5) !important;
  animation: cardReadyPulseSkin 1.4s ease-in-out infinite !important;
}
.card-item.ready .card-icon {
  color: #fff !important;
  filter:
    drop-shadow(0 0 6px var(--card-color, #fff))
    drop-shadow(0 0 14px var(--card-color, #fff)) !important;
}
.card-item.ready .card-fill {
  /* JS 把 height 设为 100% 时自动到顶 */
  height: 100% !important;
  opacity: 1 !important;
}
@keyframes cardReadyPulseSkin {
  0%,100% {
    box-shadow:
      0 4px 0 rgba(0,0,0,.45),
      0 0 18px var(--card-color, #fff),
      0 0 32px color-mix(in srgb, var(--card-color, #fff) 50%, transparent),
      inset 0 1px 1px rgba(255,255,255,.5);
  }
  50% {
    box-shadow:
      0 4px 0 rgba(0,0,0,.45),
      0 0 32px var(--card-color, #fff),
      0 0 60px color-mix(in srgb, var(--card-color, #fff) 80%, transparent),
      inset 0 1px 1px rgba(255,255,255,.7);
  }
}

/* 5 种就绪态图标专属动画（参考 newUI/CSS/style.css） */
.card-item[data-type="fire"].ready .card-icon  { animation: btnFlameFlicker 0.9s ease-in-out infinite alternate; }
.card-item[data-type="ice"].ready .card-icon   { animation: btnSnowSpin 4s linear infinite; }
.card-item[data-type="thunder"].ready .card-icon { animation: btnBoltZap 1.6s ease-in-out infinite; }
.card-item[data-type="leaf"].ready .card-icon  { animation: btnCloverSway 2.2s ease-in-out infinite; }
.card-item[data-type="gold"].ready .card-icon  { animation: btnGemSparkle 2.4s ease-in-out infinite; }

@keyframes btnFlameFlicker {
  0%   { transform: scale(1) rotate(-3deg); }
  100% { transform: scale(1.12) rotate(4deg); }
}
@keyframes btnSnowSpin {
  to { transform: rotate(360deg); }
}
@keyframes btnBoltZap {
  0%, 60%, 100% { transform: rotate(-6deg) scale(1); opacity: 1; }
  65% { opacity: .4; }
  70% { transform: rotate(8deg) scale(1.25); opacity: 1; }
  75% { transform: rotate(-6deg) scale(1); opacity: .5; }
  80% { transform: rotate(8deg) scale(1.2); opacity: 1; }
  85% { transform: rotate(-6deg) scale(1); }
}
@keyframes btnCloverSway {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(10deg) scale(1.08); }
}
@keyframes btnGemSparkle {
  0%, 70%, 100% { transform: scale(1); }
  80%  { transform: scale(1.18); }
  85%  { transform: scale(1); }
  90%  { transform: scale(1.18); }
}

/* card-ready-glow 旋转光环 —— 保留原有，但调整为参考站光晕 */
.card-ready-glow {
  border-radius: inherit !important;
}

/* ===========================================================
   开始/结束界面：与紫色梦幻主题统一
   =========================================================== */
#start-screen, #game-over {
  background: radial-gradient(ellipse at 50% 30%, rgba(122,60,255,.4) 0%, rgba(10,5,30,.95) 70%) !important;
}
.start-card, .over-card {
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) !important;
  border: 2px solid rgba(255,255,255,.25) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.3) !important;
}
#start-btn, #restart-btn {
  background: linear-gradient(180deg, #ff5c8a 0%, #ff3b6e 50%, #d22055 100%) !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  box-shadow:
    0 4px 0 #8a1a3d,
    0 8px 18px rgba(255,90,138,.5),
    inset 0 1px 1px rgba(255,255,255,.5) !important;
  position: relative;
  overflow: hidden;
}
#start-btn::before, #restart-btn::before {
  content: '';
  position: absolute;
  top: 4px; left: 8%; right: 8%;
  height: 30%;
  background: rgba(255,255,255,.45);
  border-radius: 100px;
  pointer-events: none;
}
#start-btn:hover, #restart-btn:hover {
  transform: translateY(-3px) scale(1.04);
}
#start-btn:active, #restart-btn:active {
  transform: translateY(2px);
}

/* 签名区配色 */
#signature, #signature p, #signature a {
  color: var(--candy-text-dim) !important;
}
#signature a {
  color: var(--candy-c-yellow) !important;
}

/* ===========================================================
   🛠 残影 / 拖尾修复（2026-05）
   ---------------------------------------------------------
   原因：怪物 / 炮台 / 弹丸高频更新 transform，但其父容器
   #enemies-layer / #towers-layer / #projectiles-layer 没有
   形成独立的合成层；同时 #tower-zone 的巨型云层 ::before /
   飞鸟 ::after 也在持续动画，浏览器在 GPU 合成时会偶发性地
   把"上一帧的位置"残留在底图上。

   修复：给三个 layer 强制建立独立合成层 + 清晰的绘制边界，
   并对每个高频移动元素加上 backface-visibility / perspective
   ，让 GPU 每帧都正确擦除上一帧。
   =========================================================== */
#enemies-layer,
#towers-layer,
#projectiles-layer {
  /* 建立独立的合成层，让其内部的 transform 更新只影响自己 */
  transform: translateZ(0) !important;
  will-change: transform !important;
  /* 限制重绘范围，避免和父级 #tower-zone 的云层 / 飞鸟动画相互"串帧" */
  contain: layout paint !important;
  /* 防止子元素 transform 被 GPU 后向面缓存留下半透明残像 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 给子元素一个稳定的 3D 上下文，强制每个高频元素都成为独立 layer */
  transform-style: preserve-3d;
}

/* 给所有高频更新 transform 的元素强制独立合成层 + 关闭背面缓存
   —— 这是消除残影最关键的一步 */
.enemy,
.tower,
.tower.main-tower,
.projectile {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: flat;
  /* contain: paint 会让浏览器频繁创建/销毁合成层；改成 layout style，
     交由 will-change/translateZ 来稳定提升合成层 */
  contain: layout style !important;
  /* perspective 让 translate3d 更可靠地走 GPU 通道 */
  -webkit-perspective: 1000;
}

/* 主炮台特殊处理：它内部有非常多子元素 (cannon-glow / barrel / shockwave...)
   的动画，必须给一个稳定的合成层，否则开火瞬间最容易出现拖影 */
.tower.main-tower {
  isolation: isolate;
}
.tower.main-tower .tower-inner.cannon {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* #tower-zone 的云层 / 飞鸟动画限制其重绘范围，避免它们
   每一帧都强制整个 zone 重绘（这是残影的另一个间接源头） */
#tower-zone::before,
#tower-zone::after {
  contain: layout paint;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* canvas 也独立合成，避免炮塔/敌人移动时和 fx-canvas 互相串帧 */
#fx-canvas {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ===========================================================
   📏 棋盘 7×6 适度放大 + 卡牌条胶囊化
   - 棋盘比例 7:6（宽:高），适当放大，不顶满
   - #card-bar 高度收窄
   - .card-item 拉成扁圆胶囊（圆弧长方形）
   =========================================================== */
#match-zone {
  padding: 12px 10px 14px !important;
  justify-content: center !important;
  align-items: center !important;
}

#board {
  /* 棋盘适度放大：上限 460px，水平自适应留呼吸感 */
  max-width: 460px !important;
  width: 96% !important;
  padding: 10px !important;
  gap: 5px !important;
  margin: 0 auto !important;
}

/* 棋子格保持正方形 */
.cell {
  aspect-ratio: 1 / 1 !important;
  border-radius: 12px !important;
}

/* 删除签名后兜底 */
#signature {
  display: none !important;
}

/* ===========================================================
   ⚙ 卡牌条：缩小 + 胶囊扁圆按钮
   =========================================================== */
#card-bar {
  height: 64px !important;          /* 原 92px → 64px */
  gap: 8px !important;
  padding: 8px 12px !important;
  align-items: center !important;
}

/* 胶囊圆弧长方形：宽 > 高，强圆角 */
.card-item {
  flex: 1 1 0 !important;
  height: 48px !important;          /* 固定较矮的高度 */
  min-height: 0 !important;
  border-radius: 999px !important;  /* 完全胶囊 */
  border-width: 2px !important;
  /* 让内部内容横向排列，更适合扁条 */
}

/* 内容布局：仅图标剪影，绝对居中 */
.card-item .card-content {
  flex-direction: row !important;
  gap: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* 图标放大 1.3 倍 (22px → 29px)，居中显示 */
.card-item .card-icon {
  width: 29px !important;
  height: 29px !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.card-item .card-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* 隐藏按钮文字，只保留剪影特效 */
.card-item .card-name {
  display: none !important;
}

/* 顶部白光带跟着胶囊形状收窄 */
.card-item::before {
  top: 3px !important;
  left: 22.5% !important;
  right: 22.5% !important;
  height: 30% !important;
  border-radius: 100px !important;
}

/* ===========================================================
   🏷 顶部状态条 UI 重做 v2（统一玻璃胶囊 · 与 .card-item 同规范）
   - HP / Wave / Score 三块外观完全一致（统一玻璃 + 白边 + 高光带）
   - 图标 / 文字颜色都参考技能卡 .card-item 的浅紫白文字色
   - HP 块整体从左往右红色充能（不再有内部窄进度条）
   =========================================================== */
#top-bar {
  height: 56px !important;
  padding: 8px 12px !important;
  gap: 10px !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 2px 12px rgba(122,60,255,.18) !important;
}
#top-bar::after {
  display: none !important;
}

/* === 通用胶囊 stat-block（与 .card-item 规范完全一致） === */
#top-bar .stat-block {
  position: relative !important;
  height: 40px !important;
  padding: 0 14px !important;
  gap: 8px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,.35) !important;
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 3px 0 rgba(0,0,0,.3),
    0 6px 14px rgba(0,0,0,.22),
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -2px 6px rgba(0,0,0,.15) !important;
  overflow: hidden !important;
  isolation: isolate;
  /* 文字颜色统一参考技能卡 .card-item 的浅紫白文字 */
  color: var(--candy-text, #f5e8ff) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
}

/* 顶部白光高亮带（与 .card-item::before 一致），z-index 降到 1，让 emoji 永远在它上方 */
/* ✦ 用户需求：移除血条 / Star数（含 Wave 块）顶部高光（保留样式块以便日后恢复） */
#top-bar .stat-block::before {
  display: none !important;
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 22.5% !important;
  right: 22.5% !important;
  height: 30% !important;
  background: rgba(255,255,255,.45) !important;
  border-radius: 100px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 三块统一外观：把之前的红/蓝/金主题色全部清掉，回到玻璃白边 */
#top-bar .hp-block,
#top-bar .wave-block,
#top-bar .score-block {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.35) !important;
  color: var(--candy-text, #f5e8ff) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
  box-shadow:
    0 3px 0 rgba(0,0,0,.3),
    0 6px 14px rgba(0,0,0,.22),
    inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -2px 6px rgba(0,0,0,.15) !important;
}
#top-bar .hp-block { flex: 1 1 auto !important; max-width: 220px !important; }

/* === 中央 emoji 剪影：统一为浅紫白（与技能卡文字 / 图标同色系） === */
#top-bar .stat-block .icon {
  position: relative !important;
  z-index: 5 !important;          /* 永远显示在最上层（在 ::before 高光带之上） */
  font-size: 22px !important;
  line-height: 1 !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* 关键：强制 emoji 走"文本字形（黑白剪影）"渲染，
     这样 text-shadow 染色才能可靠地把 ❤️ 也变成与 🌊 ⭐ 同色的剪影。
     部分浏览器（Safari/Chromium）对带 VS16 的彩色 emoji 仍会优先彩色字形，
     用 font-variant-emoji + 文本系 fallback 字体强制 monochrome。 */
  font-family:
    "Apple Symbols", "Segoe UI Symbol", "Symbola",
    "Noto Sans Symbols 2", "Noto Sans Symbols",
    "DejaVu Sans", sans-serif !important;
  font-variant-emoji: text !important;
  -webkit-font-feature-settings: "liga" off !important;
  font-feature-settings: "liga" off !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    /* 主体剪影：浅紫白（同 --candy-text） */
    0   0 0 #f5e8ff,
    1px 0 0 #f5e8ff,
   -1px 0 0 #f5e8ff,
    0  1px 0 #f5e8ff,
    0 -1px 0 #f5e8ff,
    /* 顶部白色高光 */
    0 -1px 1px rgba(255,255,255,.95),
    /* 底部投影 */
    0  2px 3px rgba(0,0,0,.55) !important;
  filter: none !important;
}

/* === HP 块：整体从左往右红色充能 === */
/* 把 .bar-wrap 退化为占位容器（不再是窄进度条） */
#top-bar .hp-block .bar-wrap {
  position: static !important;
  flex: 1 1 auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

/* #hp-bar 接管整个 .hp-block 内部，从左往右随 width% 充能 */
#top-bar .hp-block #hp-bar.hp-bar {
  position: absolute !important;
  inset: 0 !important;
  /* width 由 main.js 动态写入（X% → 红色充能宽度） */
  height: 100% !important;
  border-radius: 999px !important;             /* 四角全圆，充能右侧边缘呈圆弧 */
  background:
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(90deg, #ff2255 0%, #ff4f72 60%, #ff7894 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(120,0,30,.45),
    0 0 12px rgba(255,80,110,.45) !important;
  z-index: 0 !important;          /* 压在玻璃高光、边框、文字、图标的下方 */
  pointer-events: none !important;
  transition: width .35s cubic-bezier(.5,0,.2,1) !important;
}
/* width=100% 时维持圆角（与上方一致，无需特例） */
#top-bar .hp-block #hp-bar.hp-bar[style*="100%"] {
  border-radius: 999px !important;
}

/* HP 文字浮在最上层，居中于整块 .hp-block */
#top-bar .hp-block .bar-text {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: var(--candy-text, #f5e8ff) !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.85),
    0 0 4px rgba(0,0,0,.6) !important;
  letter-spacing: .5px !important;
  font-weight: 800 !important;
}

/* ===========================================================
   🏷 顶部状态条 v3 微调
   - 三块统一左对齐（往左移）
   - HP 块缩短
   - ❤︎ 心剪影 vertical 居中（与 🌊 ⭐ 同高）
   - 🌊 缩小到 80%
   - 右侧 ⚙ 设置按钮（黄色系糖果按钮）
   =========================================================== */

#top-bar {
  justify-content: flex-start !important;   /* 三块靠左 */
  gap: 8px !important;
  padding: 8px 10px !important;
}

/* 缩短 HP 框 */
/* ✦ 用户需求 #3：HP 槽改为弹性自适应宽度，确保 Wave/Star/⚙ 设置按钮在窄屏也能完整显示 */
#top-bar .hp-block {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 90px !important;
  max-width: 200px !important;
}

/* Wave / Score 紧凑些 */
#top-bar .wave-block,
#top-bar .score-block {
  flex: 0 0 auto !important;
  padding: 0 12px !important;
}

/* 三块的 .icon 统一垂直居中（修正 ❤︎ 偏上 / 🌊⭐ 基线不一致的问题） */
#top-bar .stat-block .icon {
  height: 24px !important;
  line-height: 24px !important;
  vertical-align: middle !important;
  text-align: center !important;
}
/* ❤︎（U+2764+VS15 文本字形）默认基线偏高，向下微调让它视觉居中 */
#top-bar .hp-block .icon {
  font-size: 20px !important;          /* 与🌊视觉重量一致 */
  transform: translateY(1px) !important;
}
/* 🌊 缩小到 80%（22px → 17.6px） */
#top-bar .wave-block .icon {
  font-size: 17.6px !important;
  transform: translateY(0) !important;
}
/* ⭐ 保持 22px 基准 */
#top-bar .score-block .icon {
  font-size: 22px !important;
  transform: translateY(0) !important;
}

/* ===========================================================
   ⚙ 设置按钮（顶部右侧）
   风格：黄色系糖果按钮（参考 #start-btn / #restart-btn 同结构）
   =========================================================== */
#settings-btn {
  margin-left: auto !important;        /* 推到最右 */
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  border: 3px solid #fff !important;
  background: linear-gradient(180deg, #ffe278 0%, #ffc23a 50%, #d8901a 100%) !important;
  color: #5a3300 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;
  box-shadow:
    0 4px 0 #8a5510,
    0 8px 18px rgba(255,194,58,.45),
    inset 0 1px 1px rgba(255,255,255,.6) !important;
  transition: transform .15s ease !important;
  z-index: 5 !important;
}
#settings-btn::before {
  content: '';
  position: absolute;
  top: 3px; left: 14%; right: 14%;
  height: 30%;
  background: rgba(255,255,255,.55);
  border-radius: 100px;
  pointer-events: none;
}
#settings-btn:hover {
  transform: translateY(-2px) scale(1.06) !important;
}
#settings-btn:active {
  transform: translateY(2px) !important;
  box-shadow:
    0 2px 0 #8a5510,
    0 4px 10px rgba(255,194,58,.4),
    inset 0 1px 1px rgba(255,255,255,.6) !important;
}

/* ===========================================================
   ⚙ 设置面板（modal）：黄色系，复用 .start-card / .over-card 视觉规范
   =========================================================== */
#settings-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,194,58,.20) 0%, transparent 60%),
    rgba(8, 4, 18, .72) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px !important;
  animation: settings-fade-in .25s ease-out;
}
#settings-modal.hidden {
  display: none !important;
}
@keyframes settings-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#settings-modal .settings-card {
  width: min(340px, 90vw);
  padding: 28px 28px 26px;
  border-radius: 28px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,236,170,.18) 0%, rgba(255,180,80,.10) 100%),
    rgba(40, 22, 6, .6);
  border: 3px solid rgba(255,220,140,.55);
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -2px 6px rgba(120,70,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: settings-pop-in .35s cubic-bezier(.5,1.6,.4,1);
}
@keyframes settings-pop-in {
  from { transform: translateY(20px) scale(.92); opacity: 0; }
  to   { transform: translateY(0) scale(1);     opacity: 1; }
}

#settings-modal .settings-title {
  margin: 0 0 4px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(180deg, #fff7c4 0%, #ffd86b 50%, #c2761a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 0 rgba(140,80,0,.25);
  filter: drop-shadow(0 4px 6px rgba(255,194,58,.35));
}
#settings-modal .settings-sub {
  margin: 0 0 22px;
  color: #ffeab8;
  font-size: 13px;
  letter-spacing: 1px;
  opacity: .85;
}
#settings-modal .settings-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#settings-modal .settings-actions button {
  width: 100%;
  height: 50px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #5a3300;
  border-radius: 999px;
  border: 3px solid #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
#settings-modal .settings-actions button::before {
  content: '';
  position: absolute;
  top: 4px; left: 8%; right: 8%;
  height: 30%;
  background: rgba(255,255,255,.5);
  border-radius: 100px;
  pointer-events: none;
}
/* RESUME：金黄主色 */
#settings-resume-btn {
  background: linear-gradient(180deg, #ffe278 0%, #ffc23a 50%, #d8901a 100%);
  box-shadow:
    0 4px 0 #8a5510,
    0 8px 18px rgba(255,194,58,.5),
    inset 0 1px 1px rgba(255,255,255,.55);
}
/* QUIT：偏深的琥珀色，提示性更强 */
#settings-quit-btn {
  background: linear-gradient(180deg, #ffd07a 0%, #f0962a 50%, #b8650f 100%);
  color: #3a1c00;
  box-shadow:
    0 4px 0 #6b3608,
    0 8px 18px rgba(240,150,42,.5),
    inset 0 1px 1px rgba(255,255,255,.5);
}
#settings-modal .settings-actions button:hover {
  transform: translateY(-2px) scale(1.03);
}
#settings-modal .settings-actions button:active {
  transform: translateY(2px) scale(.99);
}

/* ===========================================================
   🏆 排行榜（Leaderboard）：紫色梦幻玻璃风
   - GameOver 卡 / Start 卡的次级 LEADERBOARD 入口按钮
   - over-card 内追加的"本局时长 / 新纪录"两行
   - #leaderboard-modal 弹窗主体
   =========================================================== */

/* —— GameOver 卡内：本局时长 / 新纪录 —— */
.over-card #over-time {
  color: #ffe24a !important;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.over-card .newrecord {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #fff7c4 0%, #ffd86b 50%, #ff8aa8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(255,216,107,.6));
  animation: lb-newrec-pulse 1.4s ease-in-out infinite;
}
.over-card .newrecord.hidden { display: none !important; }
@keyframes lb-newrec-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* —— GameOver / Start 卡的按钮组容器 —— */
.over-actions, .start-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  margin-top: 14px;
}
.over-actions #restart-btn,
.start-actions #start-btn {
  width: 100%;
}

/* —— 次级 LEADERBOARD 按钮（紫色玻璃风） —— */
.ghost-btn {
  width: 100%;
  height: 46px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,.45) !important;
  background:
    linear-gradient(180deg, rgba(168,109,255,.85) 0%, rgba(108,60,200,.85) 100%) !important;
  box-shadow:
    0 4px 0 rgba(58,28,128,.85),
    0 8px 18px rgba(168,109,255,.45),
    inset 0 1px 1px rgba(255,255,255,.45) !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.ghost-btn::before {
  content: '';
  position: absolute;
  top: 4px; left: 8%; right: 8%;
  height: 30%;
  background: rgba(255,255,255,.35);
  border-radius: 100px;
  pointer-events: none;
}
.ghost-btn:hover  { transform: translateY(-2px) scale(1.03); }
.ghost-btn:active { transform: translateY(2px); }

/* —— 排行榜弹窗主体 —— */
#leaderboard-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(168,109,255,.25) 0%, transparent 60%),
    rgba(8, 4, 18, .78) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px !important;
  animation: lb-fade-in .25s ease-out;
}
#leaderboard-modal.hidden { display: none !important; }
@keyframes lb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#leaderboard-modal .lb-card {
  width: min(420px, 94vw);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 20px;
  border-radius: 28px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(220,180,255,.18) 0%, rgba(120,70,220,.10) 100%),
    rgba(28, 14, 48, .72);
  border: 3px solid rgba(220,180,255,.55);
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -2px 6px rgba(60,20,120,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: lb-pop-in .35s cubic-bezier(.5,1.6,.4,1);
}
@keyframes lb-pop-in {
  from { transform: translateY(20px) scale(.92); opacity: 0; }
  to   { transform: translateY(0) scale(1);     opacity: 1; }
}
#leaderboard-modal .lb-title {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(180deg, #fff7c4 0%, #ffd86b 50%, #c2761a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 0 rgba(60,20,120,.25);
  filter: drop-shadow(0 4px 6px rgba(255,194,58,.35));
}
#leaderboard-modal .lb-sub {
  margin: 0 0 16px;
  color: #e8d6ff;
  font-size: 12px;
  letter-spacing: 1px;
  opacity: .8;
}

/* —— 表格区 —— */
#leaderboard-modal .lb-table-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  border-radius: 16px;
  background: rgba(20, 8, 40, .55);
  border: 1px solid rgba(220,180,255,.25);
  padding: 4px;
  scrollbar-width: thin;
}
#leaderboard-modal .lb-row {
  display: grid;
  grid-template-columns: 38px 1fr 56px 60px 86px;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  font-size: 13px;
  color: #f5ebff;
  border-radius: 10px;
}
#leaderboard-modal .lb-head {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, rgba(168,109,255,.55), rgba(90,42,158,.55));
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  border-bottom: 1px solid rgba(220,180,255,.25);
  z-index: 1;
}
#leaderboard-modal .lb-list { display: block; }
#leaderboard-modal .lb-item {
  cursor: default;
  transition: background .2s ease, transform .2s ease;
}
#leaderboard-modal .lb-item:nth-child(odd) {
  background: rgba(255,255,255,.04);
}
#leaderboard-modal .lb-item:hover {
  background: rgba(168,109,255,.12);
  transform: translateX(2px);
}
#leaderboard-modal .lb-item .lb-rank   { font-weight: 800; font-size: 16px; }
#leaderboard-modal .lb-item .lb-score  {
  font-weight: 900;
  text-align: left;
  padding-left: 6px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
#leaderboard-modal .lb-item .lb-wave   { color: #ffd86b; font-weight: 700; }
#leaderboard-modal .lb-item .lb-time   { color: #79d4ff; font-weight: 700; }
#leaderboard-modal .lb-item .lb-date   { color: #c9b8e8; font-size: 11px; }

/* TOP 1 / 2 / 3 高亮 */
#leaderboard-modal .lb-top1 {
  background: linear-gradient(90deg, rgba(255,216,107,.28), rgba(255,216,107,.06)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,216,107,.45);
}
#leaderboard-modal .lb-top1 .lb-score { color: #ffd86b; }
#leaderboard-modal .lb-top2 {
  background: linear-gradient(90deg, rgba(220,220,230,.22), rgba(220,220,230,.05)) !important;
  box-shadow: inset 0 0 0 1px rgba(220,220,230,.35);
}
#leaderboard-modal .lb-top3 {
  background: linear-gradient(90deg, rgba(255,150,80,.22), rgba(255,150,80,.05)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,150,80,.35);
}

/* 本局新写入项的呼吸高亮 */
#leaderboard-modal .lb-current {
  outline: 2px solid #ffd86b;
  animation: lb-current-pulse 1.6s ease-in-out infinite;
}
@keyframes lb-current-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,216,107,.55), inset 0 0 0 1px rgba(255,216,107,.55); }
  50%      { box-shadow: 0 0 0 8px rgba(255,216,107,0),  inset 0 0 0 1px rgba(255,216,107,.85); }
}

#leaderboard-modal .lb-empty {
  margin: 32px 0;
  color: #c9b8e8;
  font-size: 13px;
  letter-spacing: 1px;
}
#leaderboard-modal .lb-empty.hidden { display: none !important; }

/* —— 底部按钮组 —— */
#leaderboard-modal .lb-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
#leaderboard-modal .lb-actions button {
  flex: 1 1 0;
  height: 44px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.5);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
#leaderboard-modal .lb-actions button::before {
  content: '';
  position: absolute;
  top: 4px; left: 8%; right: 8%;
  height: 30%;
  background: rgba(255,255,255,.4);
  border-radius: 100px;
  pointer-events: none;
}
#lb-back-btn {
  background: linear-gradient(180deg, #a86dff 0%, #6c3cc8 100%);
  box-shadow: 0 4px 0 #3a1c80, 0 8px 18px rgba(168,109,255,.5),
              inset 0 1px 1px rgba(255,255,255,.45);
}
#lb-clear-btn {
  background: linear-gradient(180deg, #ff7a9c 0%, #c91a4f 100%);
  box-shadow: 0 4px 0 #6a0a28, 0 8px 18px rgba(255,90,138,.5),
              inset 0 1px 1px rgba(255,255,255,.45);
}
#leaderboard-modal .lb-actions button:hover  { transform: translateY(-2px) scale(1.03); }
#leaderboard-modal .lb-actions button:active { transform: translateY(2px) scale(.99); }

/* 小屏适配：表格列宽收紧 */
@media (max-width: 380px) {
  #leaderboard-modal .lb-row {
    grid-template-columns: 32px 1fr 48px 52px 0;
    font-size: 12px;
  }
  #leaderboard-modal .lb-row .lb-date { display: none; }
}

/* ===========================================================
   📜 Start 屏 .rules 模块：emoji → 元素素材
   - 小尺寸图标内联在文字行首
   - 第三条多个宝石用 .rule-icons 横排
   =========================================================== */
.rules p {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rules p > .rule-icon,
.rules p > .rule-icons {
  flex: 0 0 auto;
}
.rule-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 2px 3px rgba(90, 24, 86, .35));
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}
/* 主炮台稍大一些，凸显"中央主塔"概念 */
.rule-icon-cannon {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 4px rgba(90, 24, 86, .45));
}
/* 怪物略大、并轻微抖动以强调"威胁感" */
.rule-icon-enemy {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 2px 4px rgba(180, 40, 40, .55));
  animation: rule-enemy-wobble 2.4s ease-in-out infinite;
}
@keyframes rule-enemy-wobble {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-1px) rotate(3deg); }
}
/* 5 元素一排 */
.rule-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rule-icons .rule-icon {
  width: 20px;
  height: 20px;
  animation: rule-gem-float 2.6s ease-in-out infinite;
}
.rule-icons .rule-icon:nth-child(1) { animation-delay: 0s;    }
.rule-icons .rule-icon:nth-child(2) { animation-delay: .15s;  }
.rule-icons .rule-icon:nth-child(3) { animation-delay: .30s;  }
.rule-icons .rule-icon:nth-child(4) { animation-delay: .45s;  }
.rule-icons .rule-icon:nth-child(5) { animation-delay: .60s;  }
@keyframes rule-gem-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ============================================================
   👾 ENEMY · 纯 CSS 卡通怪物（替代 emoji）
   - 5 个 tier 各一套外形，配色由 ENEMY_TYPES.color 决定大色调
   - 圆润果冻 / 玻璃高光 / 柔和投影 / 阴影：与下方宝石/炮台素材风格一致
   - 不使用任何像素美术；所有形状由 radial-gradient + border-radius + box-shadow 拼出
   - 保留外层 .enemy 的 enemyBlink 心跳缩放、.silhouette 4s 剪影脉冲（动作特效不变）
   ============================================================ */

/* span.body：每个怪物形象的"主体容器"
   绕过原 .enemy > span 的 emoji 字体设置（这里 span 内已不含字符） */
.enemy > span.body {
  font-size: 0;             /* 容器无文字 */
  overflow: visible;
  /* drop-shadow 为整体加柔光，沿用原 .enemy>span 的 white drop-shadow 设置 */
}

/* —— 通用：让所有 tier 的 ::before/::after 都默认参与定位 —— */
.enemy > span.body::before,
.enemy > span.body::after {
  content: '';
  position: absolute;
  display: block;
  pointer-events: none;
}

/* ============================================================
   tier-0 · 紫色史莱姆（圆顶 + 大单眼）
   ============================================================ */
.enemy.tier-0 > span.body {
  inset: 6px 4px 4px 4px;   /* 缩成圆顶水滴形 */
  border-radius: 48% 48% 42% 42% / 60% 60% 38% 38%;
  background:
    radial-gradient(ellipse 55% 35% at 35% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.4) 40%, transparent 70%),
    radial-gradient(ellipse 80% 90% at 50% 65%, #c266ff 0%, #a040e0 55%, #6b1ea3 100%);
  box-shadow:
    inset 0 -6px 8px rgba(60,0,90,.55),
    inset 0 4px 6px rgba(255,255,255,.35),
    0 4px 6px rgba(80,0,120,.45);
}
/* 大单眼 */
.enemy.tier-0 > span.body::before {
  left: 50%; top: 38%;
  width: 16px; height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 30%, #f5f5f5 30% 70%, #e0e0e0 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* 瞳孔 + 高光 */
.enemy.tier-0 > span.body::after {
  left: 50%; top: 42%;
  width: 8px; height: 8px;
  margin-left: -3px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 22%, transparent 22%),
    #1a0a2a;
}

/* ============================================================
   tier-1 · 红色小恶魔（带尖角）
   ============================================================ */
.enemy.tier-1 > span.body {
  inset: 8px 6px 6px 6px;
  border-radius: 50% 50% 45% 45% / 55% 55% 45% 45%;
  background:
    radial-gradient(ellipse 55% 30% at 38% 25%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 40%, transparent 75%),
    radial-gradient(ellipse 80% 90% at 50% 60%, #ff7a9a 0%, #ff3361 55%, #b21a3d 100%);
  box-shadow:
    inset 0 -5px 7px rgba(120,0,30,.55),
    inset 0 3px 5px rgba(255,255,255,.3),
    0 4px 6px rgba(180,20,50,.45);
}
/* 左尖角 */
.enemy.tier-1 > span.body::before {
  left: 14%; top: -2px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 11px solid #c01a3d;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
  background: transparent;
  border-radius: 0;
  transform: rotate(-22deg);
}
/* 右尖角 */
.enemy.tier-1 > span.body::after {
  right: 14%; top: -2px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 11px solid #c01a3d;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
  background: transparent;
  border-radius: 0;
  transform: rotate(22deg);
}

/* ============================================================
   tier-2 · 蓝色小机器人（圆角方头 + 天线 + 双眼）
   ============================================================ */
.enemy.tier-2 > span.body {
  inset: 9px 6px 6px 6px;
  border-radius: 28% 28% 32% 32% / 30% 30% 36% 36%;
  background:
    radial-gradient(ellipse 60% 30% at 35% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 40%, transparent 75%),
    linear-gradient(180deg, #a0c8ff 0%, #5d92e8 45%, #244a99 100%);
  box-shadow:
    inset 0 -5px 6px rgba(20,40,80,.55),
    inset 0 3px 4px rgba(255,255,255,.4),
    0 4px 6px rgba(40,60,120,.5);
}
/* 双眼（用一个::before + box-shadow 同时画两个） */
.enemy.tier-2 > span.body::before {
  left: 32%; top: 42%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0 30%, #1a1a2a 30% 100%);
  box-shadow:
    14px 0 0 -1px #1a1a2a,
    14px 0 0 -3px #fff,
    14px -1px 0 -4px #fff;
}
/* 天线（一个圆点小球 + 用 outline 画连接杆） */
.enemy.tier-2 > span.body::after {
  left: 50%; top: -4px;
  width: 6px; height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0 35%, #ffe24a 35% 100%);
  box-shadow:
    0 0 6px #ffe24a,
    0 4px 0 -1px #244a99,    /* 连接杆 */
    0 7px 0 -1px #244a99;
}

/* ============================================================
   tier-3 · 橙色独眼怪（独眼 + 尖牙）
   ============================================================ */
.enemy.tier-3 > span.body {
  inset: 6px 4px 4px 4px;
  border-radius: 50% 50% 38% 38% / 55% 55% 45% 45%;
  background:
    radial-gradient(ellipse 55% 30% at 38% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 40%, transparent 75%),
    radial-gradient(ellipse 80% 90% at 50% 60%, #ffc16b 0%, #ff8a3d 50%, #c45610 100%);
  box-shadow:
    inset 0 -6px 8px rgba(120,40,0,.55),
    inset 0 4px 5px rgba(255,255,255,.4),
    0 4px 6px rgba(160,60,0,.5);
}
/* 独眼 */
.enemy.tier-3 > span.body::before {
  left: 50%; top: 28%;
  width: 18px; height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #1a1a2a 0 22%,
      #fff 22% 30%,
      #fff 30% 78%,
      #ffe2c0 78% 100%);
  box-shadow:
    0 1px 2px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.6);
}
/* 尖牙（一对小三角，一对用 box-shadow 复制） */
.enemy.tier-3 > span.body::after {
  left: 50%; bottom: 18%;
  width: 0; height: 0;
  margin-left: -6px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 5px solid #fff;
  background: transparent;
  border-radius: 0;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.5));
  box-shadow: none;
}

/* ============================================================
   tier-4 · 粉色小飞龙（带翅膀的精灵头）
   ============================================================ */
.enemy.tier-4 > span.body {
  inset: 8px 8px 6px 8px;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background:
    radial-gradient(ellipse 55% 30% at 36% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 40%, transparent 75%),
    radial-gradient(ellipse 80% 90% at 50% 60%, #ffa8d4 0%, #ff4ea0 55%, #b41e6a 100%);
  box-shadow:
    inset 0 -5px 7px rgba(140,0,60,.55),
    inset 0 3px 4px rgba(255,255,255,.35),
    0 4px 6px rgba(180,20,90,.5);
}
/* 左翅 */
.enemy.tier-4 > span.body::before {
  left: -8px; top: 28%;
  width: 14px; height: 18px;
  border-radius: 70% 30% 60% 40% / 60% 40% 60% 40%;
  background:
    radial-gradient(ellipse 70% 80% at 70% 50%,
      rgba(255,160,210,.95) 0%, rgba(255,80,160,.85) 60%, rgba(180,30,100,.9) 100%);
  box-shadow: inset 0 0 4px rgba(180,20,90,.6);
  transform: rotate(-25deg);
}
/* 右翅 */
.enemy.tier-4 > span.body::after {
  right: -8px; top: 28%;
  width: 14px; height: 18px;
  border-radius: 30% 70% 40% 60% / 40% 60% 40% 60%;
  background:
    radial-gradient(ellipse 70% 80% at 30% 50%,
      rgba(255,160,210,.95) 0%, rgba(255,80,160,.85) 60%, rgba(180,30,100,.9) 100%);
  box-shadow: inset 0 0 4px rgba(180,20,90,.6);
  transform: rotate(25deg);
}

/* ============================================================
   .silhouette.body —— 同一套形象的彩色剪影副本
   - 沿用原 silhouettePulse 动画（已在 style.css 中定义，opacity 0→1→0，1s）
   - ✦ 用户需求：剪影不再是纯黑（在深色背景上过暗看不清），
     改用"白色基底 + 同色发光"的鲜亮彩色剪影：
       1) filter: brightness(0) invert(1) —— 把所有彩色像素先压成黑、再翻转成纯白
          → 白色剪影在深色游戏背景上对比强烈、"立得起来"
       2) 每个 tier 再额外叠 2 层同色 drop-shadow（小模糊 / 大模糊）
          → 让白色剪影被同色光晕包裹，整体观感接近技能图标那种鲜亮彩色调
     这样剪影"亮"起来不再过暗，且每只怪都有自己的色彩标识
   ============================================================ */
.enemy > span.silhouette.body {
  /* brightness(0) 先压成黑色单色剪影 → invert(1) 翻成纯白；
     再叠两层 drop-shadow 形成同色光晕（默认色，会被各 tier 覆盖） */
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 3px var(--sil-glow, #ffffff))
    drop-shadow(0 0 6px var(--sil-glow, #ffffff));
}
/* 把 silhouette 的所有 tier 形象 box-shadow 全部抹平为透明，
   只保留几何外形 + 主体填色（被 brightness(0) invert(1) 压成纯白） */
.enemy > span.silhouette.body,
.enemy > span.silhouette.body::before,
.enemy > span.silhouette.body::after {
  box-shadow: none !important;
}
/* tier-1 / tier-3 的尖角/尖牙是用 border 画的——它们已是单色，
   border 颜色会随 brightness(0) invert(1) 变白，无需额外处理。 */

/* —— 每个 tier 的剪影发光色（与该 tier 主体配色一致，对应技能卡那种鲜亮调） —— */
.enemy.tier-0 { --sil-glow: #cc66ff; } /* 紫色史莱姆 */
.enemy.tier-1 { --sil-glow: #ff6688; } /* 红色小恶魔 */
.enemy.tier-2 { --sil-glow: #88aaff; } /* 蓝色小机器人 */
.enemy.tier-3 { --sil-glow: #ff8844; } /* 橙色独眼怪 */
.enemy.tier-4 { --sil-glow: #ff44aa; } /* 粉色小飞龙 */

/* ============================================================
   修正：原 .enemy.frozen > span::before / .enemy.burning > span::after
   会跟新形象的 ::before/::after 抢占 content。
   现在 .body 的伪元素已被 tier 形象使用，
   把 ❄ / 🔥 状态角标改挂到外层 .enemy 的 ::before / ::after 上（之前 content:none 闲置）
   ============================================================ */
.enemy.frozen::before {
  content: '❄' !important;
  position: absolute;
  top: -8px; left: -2px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #aaeeff, 0 0 12px #79d4ff;
  z-index: 4;
  animation: none;
  pointer-events: none;
}
.enemy.burning::after {
  content: '🔥' !important;
  position: absolute;
  top: -10px; right: -4px;
  font-size: 16px;
  z-index: 4;
  filter: drop-shadow(0 0 6px #ff7544);
  animation: none;
  pointer-events: none;
}
/* 把原本挂在 span::before / span::after 上的角标关掉（防止两次出现） */
.enemy.frozen > span::before,
.enemy.burning > span::after {
  content: none !important;
}

/* ============================================================
   🎲 怪物随机动作（act-shake / act-pulse）
   - 由 _spawnEnemy 随机附加，不与怪物种类（tier）绑定
   - 作用层：内部 .body（包括主体 + .silhouette），不影响外层 .enemy 每帧的
     translate3d 定位 transform；这样动作不会让怪物脱离 lane / 提前到达底部
   - 持续 1s 一个循环；覆盖默认的 enemyBlink 心跳动画（独占 transform）
   - .silhouette.body 同时叠加 silhouettePulse(opacity) + 动作 transform，
     让"剪影"也跟着摇/缩，与本体保持一致
   ============================================================ */

/* —— 1) act-shake：左右摇晃，总幅度 200%（左右各 ±100% 容器宽，约 ±48px） —— */
@keyframes enemyShakeLR {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(48px); }    /* 右 +100% */
  50%  { transform: translateX(0); }
  75%  { transform: translateX(-48px); }   /* 左 -100% */
  100% { transform: translateX(0); }
}
/* 主体 .body（非剪影）：完全独占 transform → 覆盖 enemyBlink */
.enemy.act-shake > span.body:not(.silhouette) {
  animation: enemyShakeLR 1s ease-in-out infinite;
}
/* 剪影 .silhouette.body：同时跑 opacity 脉冲 + 摇晃 transform */
.enemy.act-shake > span.silhouette.body {
  animation:
    silhouettePulse 1s ease-in-out infinite,
    enemyShakeLR 1s ease-in-out infinite;
}

/* —— 2) act-pulse：放大缩小呼吸（最大 200%，最小 70%），1s 循环 —— */
@keyframes enemyPulseBreath {
  0%   { transform: scale(1); }
  40%  { transform: scale(2);   }   /* 放大至 200% */
  70%  { transform: scale(0.7); }   /* 缩小至 70% */
  100% { transform: scale(1); }
}
.enemy.act-pulse > span.body:not(.silhouette) {
  animation: enemyPulseBreath 1s ease-in-out infinite;
  /* transform-origin 默认 center，符合"原地呼吸"语义 */
}
.enemy.act-pulse > span.silhouette.body {
  animation:
    silhouettePulse 1s ease-in-out infinite,
    enemyPulseBreath 1s ease-in-out infinite;
}