/* =============================================================
 * styles.css — 修仙Roguelike · Balatro风格融合
 * 基于 BalatroGame 视觉 + novel-card-roguelike 玩法UI
 * ============================================================= */
:root{
  --gold:#f5c542; --gold-2:#ffe39a; --ink:#f3e9ff;
  --panel:rgba(20,10,38,0.55); --panel-line:rgba(245,197,66,0.28);
  --red:#e2405b; --card-w:120px; --card-h:168px;
  --r-rare:#ff9be0; --r-epic:#8be0ff;
  --bg:#0a0a12; --bg2:#12121e; --border:rgba(245,197,66,0.22);
  --text:#f3e9ff; --dim:#9888bb; --hp:#e74c3c;
  --energy:#4a9eff; --block:#95a5a6; --enemy:#e84393; --buff:#2ecc71;
  --debuff:#e67e22; --rarity-common:#999; --rarity-uncommon:#4a9eff;
  --rarity-rare:#f5c542; --rarity-special:#9b59b6;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  color:var(--ink);overflow:hidden;background:#14082a;user-select:none;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}

/* ---------------- WebGL 背景 ---------------- */
#bg{position:fixed;inset:0;z-index:0}
#gl{display:block;width:100%;height:100%}

/* ---------------- 粒子特效层 ---------------- */
#fx{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}

/* ---------------- 主容器 ---------------- */
#app{position:relative;z-index:1;width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* 屏幕震动 */
#app.shake-light{animation:shakeLight .25s}
#app.shake-heavy{animation:shakeHeavy .4s}
@keyframes shakeLight{0%,100%{transform:translate(0,0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,1px)}}
@keyframes shakeHeavy{0%,100%{transform:translate(0,0)}15%{transform:translate(-8px,4px)}30%{transform:translate(8px,-4px)}45%{transform:translate(-6px,-3px)}60%{transform:translate(6px,3px)}75%{transform:translate(-3px,2px)}90%{transform:translate(3px,-1px)}}

/* 低血量边缘脉冲 */
#app.low-hp::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;box-shadow:inset 0 0 80px rgba(231,76,60,.4);animation:lowHpPulse 1.2s infinite;z-index:200}
@keyframes lowHpPulse{0%,100%{opacity:.4}50%{opacity:.8}}

/* ---------------- Glass 面板 ---------------- */
.glass{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---------------- 顶栏 ---------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;padding:10px 18px;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.06);
  margin:8px 12px;border-radius:14px;min-height:48px;z-index:5;
}
.topbar .title{font-size:20px;font-weight:900;color:var(--gold-2);text-shadow:0 0 16px rgba(245,197,66,.5);letter-spacing:2px}
.topbar .stats{display:flex;gap:16px;font-size:15px;align-items:center}
.stat-item{display:flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap}
.stat-item .icon{font-size:16px}
.stat-item .val{font-weight:800;transition:color .3s;color:var(--ink)}
.stat-item .val.flash{color:var(--hp);animation:valFlash .4s}
@keyframes valFlash{0%{transform:scale(1.3);color:var(--hp)}100%{transform:scale(1);color:var(--ink)}}

/* ---------------- 主区域 ---------------- */
.main{flex:1;display:flex;overflow:hidden;padding:0 12px 8px}

/* ---------------- 地图侧栏 ---------------- */
.sidebar{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.06);
  width:260px;overflow-y:auto;padding:12px;margin-right:8px;
}
.sidebar h3{color:var(--gold-2);font-size:14px;margin-bottom:8px;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px rgba(245,197,66,.3)}
.map-container{display:flex;flex-direction:column-reverse;gap:4px}
.map-floor{display:flex;gap:8px;justify-content:center;align-items:center;min-height:36px}
.map-node{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;transition:all .2s}
.map-node.visited{opacity:.3}
.map-node.cleared{border-color:var(--buff);background:rgba(46,204,113,.1)}
.map-node.available{border-color:var(--gold);box-shadow:0 0 8px rgba(245,197,66,.5);animation:pulse 1.5s infinite}
.map-node.current{border-color:var(--energy);background:rgba(74,158,255,.2)}
.map-node.boss{border-color:var(--enemy);background:rgba(232,67,147,.1)}
.map-node.elite{border-color:var(--gold)}
@keyframes pulse{0%,100%{box-shadow:0 0 8px rgba(245,197,66,.5)}50%{box-shadow:0 0 16px rgba(245,197,66,.8)}}

/* ---------------- 战斗区域 ---------------- */
.battle-area{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.enemies-row{display:flex;gap:16px;justify-content:center;padding:20px;min-height:200px}
.enemy-card{
  background:var(--panel);border:2px solid var(--enemy);border-radius:14px;padding:16px;width:180px;
  text-align:center;transition:transform .15s,box-shadow .15s;position:relative;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.enemy-card.targeted{border-color:var(--gold);box-shadow:0 0 16px rgba(245,197,66,.6);transform:scale(1.05)}
.enemy-card.dead{opacity:.3;pointer-events:none;filter:grayscale(1);transform:scale(.85) rotate(5deg)}
.enemy-card.hit{animation:enemyHit .35s}
.enemy-card.dragover{border-color:var(--gold);box-shadow:0 0 24px rgba(245,197,66,.7);transform:scale(1.1)}
.enemy-card.dying{animation:enemyDie .6s forwards}
.enemy-card.lunging{animation:enemyLunge .5s cubic-bezier(.34,1.56,.64,1) forwards;z-index:50}
.enemy-card.lunging-back{animation:enemyLungeBack .35s ease-out forwards}
@keyframes enemyLunge{0%{transform:translate(0,0) scale(1) rotate(0)}30%{transform:translate(0,40px) scale(1.1) rotate(0)}55%{transform:translate(0,120px) scale(1.3) rotate(5deg);filter:brightness(1.5) drop-shadow(0 0 12px #ff4466)}70%{transform:translate(0,130px) scale(1.25) rotate(3deg);filter:brightness(1.8) drop-shadow(0 0 20px #ff4466)}100%{transform:translate(0,0) scale(1) rotate(0);filter:none}}
@keyframes enemyLungeBack{0%{transform:translate(0,130px) scale(1.2);filter:brightness(1.5)}100%{transform:translate(0,0) scale(1);filter:none}}
.enemy-card.attacking{z-index:50;filter:brightness(1.3) drop-shadow(0 0 8px var(--enemy))}
@keyframes enemyHit{0%{transform:translateX(0)}15%{transform:translateX(-10px) rotate(-3deg);filter:brightness(2.5) sepia(1) hue-rotate(-50deg) saturate(3)}30%{transform:translateX(8px) rotate(2deg);filter:brightness(1.8) sepia(1) hue-rotate(-50deg) saturate(2)}50%{transform:translateX(-5px) rotate(-1deg)}70%{transform:translateX(4px)}100%{transform:translateX(0);filter:none}}
@keyframes enemyDie{0%{opacity:1;transform:scale(1)}30%{transform:scale(1.15);filter:brightness(2)}60%{opacity:.5;transform:scale(.9) rotate(8deg);filter:brightness(1.5) blur(2px)}100%{opacity:0;transform:scale(.7) rotate(15deg);filter:blur(4px)}}
.enemy-name{font-size:16px;font-weight:800;margin-bottom:8px;color:var(--gold-2);text-shadow:0 0 8px rgba(245,197,66,.3)}
.enemy-hp-bar{background:rgba(0,0,0,.4);border-radius:6px;height:20px;position:relative;overflow:hidden;margin-bottom:4px;border:1px solid rgba(245,197,66,.2)}
.enemy-hp-fill{background:linear-gradient(90deg,#c0392b,#e74c3c);height:100%;transition:width .4s cubic-bezier(.22,.61,.36,1);box-shadow:0 0 8px rgba(231,76,60,.4)}
.enemy-hp-text{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.enemy-block{color:var(--block);font-size:14px;margin-bottom:4px;display:flex;align-items:center;justify-content:center;gap:2px}
.enemy-block.pop{animation:pop .3s}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.enemy-intent{font-size:13px;color:var(--dim);padding:4px;background:rgba(0,0,0,.3);border-radius:6px;margin-top:4px;border:1px solid rgba(245,197,66,.15)}
.enemy-buffs{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:4px}

/* buff/block 标记 */
.buff-tag{font-size:11px;padding:2px 8px;border-radius:10px;animation:buffPop .3s;display:inline-flex;align-items:center;gap:3px;font-weight:700}
.buff-tag.buff{background:rgba(46,204,113,.2);color:var(--buff);border:1px solid rgba(46,204,113,.3)}
.buff-tag.debuff{background:rgba(230,126,34,.2);color:var(--debuff);border:1px solid rgba(230,126,34,.3)}
.buff-tag .stacks-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:50%;font-size:10px;font-weight:800;background:rgba(0,0,0,.4);color:#fff;padding:0 3px}
.buff-tag.buff .stacks-badge{background:rgba(46,204,113,.5)}
.buff-tag.debuff .stacks-badge{background:rgba(230,126,34,.5)}
@keyframes buffPop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}

/* 盾牌badge */
.block-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:800;background:rgba(149,165,166,.35);color:#fff;padding:0 4px;border:1px solid rgba(149,165,166,.6);animation:buffPop .3s}

/* 淡出动画 */
.fading-out{animation:fadeOutDown .4s ease-in forwards !important}
@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(8px) scale(.7)}}

/* buff消失粒子 */
@keyframes buffVanish{0%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2);filter:brightness(1.5)}100%{opacity:0;transform:scale(0) rotate(180deg)}}

/* ---------------- 玩家区域 ---------------- */
.player-area{display:flex;justify-content:center;padding:16px;gap:16px;align-items:center}
.player-info{
  background:var(--panel);border:2px solid var(--energy);border-radius:14px;padding:16px;text-align:center;min-width:200px;
  transition:all .15s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.player-info.hit{animation:playerHit .35s}
.player-info.dragover{border-color:var(--gold);box-shadow:0 0 20px rgba(245,197,66,.6);transform:scale(1.05)}
@keyframes playerHit{0%{transform:translateX(0)}20%{transform:translateX(-8px);filter:brightness(1.8) sepia(1) hue-rotate(-50deg) saturate(2)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}100%{transform:translateX(0);filter:none}}
.player-hp-bar{background:rgba(0,0,0,.4);border-radius:6px;height:24px;position:relative;overflow:hidden;margin:4px 0;border:1px solid rgba(245,197,66,.2)}
.player-hp-fill{background:linear-gradient(90deg,#c0392b,#e74c3c);height:100%;transition:width .4s cubic-bezier(.22,.61,.36,1);box-shadow:0 0 8px rgba(231,76,60,.4)}
.player-hp-text{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.player-stats{display:flex;justify-content:center;gap:12px;font-size:14px;margin-top:8px}
.player-buffs{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:4px}

/* 能量球 */
.energy-and-end{display:flex;flex-direction:column;align-items:center;gap:8px}
.energy-orb{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,rgba(74,158,255,.3),rgba(74,158,255,.1));border:2px solid var(--energy);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;transition:all .15s;box-shadow:0 0 16px rgba(74,158,255,.3)}
.buff-popup-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:500;display:flex;flex-direction:column;align-items:center;gap:4px}
.buff-popup{padding:8px 20px;border-radius:20px;font-size:16px;font-weight:800;animation:buffPopup 1.5s ease-out forwards;white-space:nowrap}
.buff-popup.buff-gain{color:#2ecc71;text-shadow:0 0 12px rgba(46,204,113,.6);background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.4)}
.buff-popup.buff-loss{color:#e74c3c;text-shadow:0 0 12px rgba(231,76,60,.6);background:rgba(231,76,60,.12);border:1px solid rgba(231,76,60,.4)}
@keyframes buffPopup{0%{opacity:0;transform:translateY(20px) scale(.8)}15%{opacity:1;transform:translateY(0) scale(1.1)}30%{transform:translateY(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-30px) scale(.9)}}
.energy-orb.flash{animation:energyFlash .4s}
.energy-orb.deplete{animation:energyDeplete .3s}
@keyframes energyFlash{0%{transform:scale(1)}40%{transform:scale(1.25);box-shadow:0 0 24px var(--energy)}100%{transform:scale(1)}}
@keyframes energyDeplete{0%{transform:scale(1)}50%{transform:scale(.85);filter:brightness(.5)}100%{transform:scale(1)}}
.energy-orb .val{font-size:24px;color:var(--gold-2);text-shadow:0 0 8px rgba(245,197,66,.5)}
.energy-orb .label{font-size:10px;color:var(--dim)}

/* ---------------- 手牌区域 ---------------- */
.hand-area{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.06);
  padding:12px;min-height:170px;display:flex;gap:8px;justify-content:center;align-items:flex-end;
  overflow:visible;perspective:800px;position:relative;z-index:5;margin:0 12px 8px;border-radius:14px;
}
.hand-area::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(245,197,66,.3),transparent)}

/* ---------------- 卡牌（3D效果） ---------------- */
.card{
  --rx:0deg;--ry:0deg;--sc:1;--ty:0px;
  width:var(--card-w);min-width:var(--card-w);height:var(--card-h);
  position:relative;transform-style:preserve-3d;
  transform:translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc));
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;cursor:grab;perspective:700px;
  display:flex;flex-direction:column;gap:4px;
  background:radial-gradient(120% 90% at 50% 0%,#2a1846 0%,#1a0e2e 55%,#150a26 100%);
  border:2px solid var(--border);border-radius:12px;padding:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 1px 2px rgba(245,197,66,.1);
}
.card-face{
  position:absolute;inset:0;border-radius:12px;
  background:radial-gradient(120% 90% at 50% 0%,#2a1846 0%,#1a0e2e 55%,#150a26 100%);
  border:1px solid rgba(245,197,66,0.2);box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 1px 2px rgba(255,255,255,.06);
  overflow:hidden;padding:8px;opacity:0;transform:translateY(24px);transition:opacity .35s,transform .35s;
}
.card.in .card-face{opacity:1;transform:none}
.card-face::before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,0) 42%);pointer-events:none}
.card:hover{
  --sc:1.08;--ty:-20px;
  box-shadow:0 14px 32px rgba(0,0,0,.6),0 0 16px rgba(245,197,66,.3);
  z-index:10;
}
.card.dragging{opacity:.3;cursor:grabbing;transform:translateY(-20px) scale(1.05)}
.card.selected{--ty:-28px;--sc:1.1;border-color:var(--gold);box-shadow:0 0 24px rgba(245,197,66,.6),0 14px 30px rgba(0,0,0,.5);z-index:20}
.card.selected::after{content:"✓";position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#3a2400;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.5);z-index:6}
.card.unplayable{opacity:.45;cursor:not-allowed;filter:saturate(.3)}
.card.unplayable:hover{transform:translateY(0) scale(1)}
.card.played{animation:cardPlay .5s cubic-bezier(.22,.61,.36,1) forwards;z-index:30}
@keyframes cardPlay{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-40px) scale(1.15) rotate(-2deg)}60%{transform:translateY(-100px) scale(.9) rotate(3deg);opacity:.6}100%{transform:translateY(-180px) scale(.3) rotate(8deg);opacity:0}}

/* 燃烧消失特效 */
.card.burning{animation:cardBurn .6s ease-in forwards;z-index:40}
@keyframes cardBurn{
  0%{transform:translateY(0) scale(1);filter:brightness(1)}
  15%{filter:brightness(1.8) saturate(1.5);box-shadow:0 0 30px rgba(255,120,0,.8),0 0 60px rgba(255,60,0,.5)}
  40%{transform:translateY(-30px) scale(1.05) rotate(-3deg);filter:brightness(2.5) saturate(2);box-shadow:0 0 40px rgba(255,80,0,.9),0 0 80px rgba(255,40,0,.6),inset 0 0 20px rgba(255,100,0,.4)}
  70%{transform:translateY(-80px) scale(.7) rotate(5deg);filter:brightness(3) saturate(2.5) hue-rotate(-10deg);opacity:.7;box-shadow:0 0 50px rgba(255,60,0,.7),0 0 100px rgba(255,30,0,.4),inset 0 0 30px rgba(255,80,0,.6)}
  100%{transform:translateY(-140px) scale(.1) rotate(15deg);opacity:0;filter:brightness(4) saturate(0) hue-rotate(-20deg);box-shadow:0 0 60px rgba(255,40,0,.3)}
}
.card.burning::before{content:"";position:absolute;inset:-4px;border-radius:12px;background:radial-gradient(ellipse at bottom,#ff6b00 0%,#ff3a00 20%,#ffaa00 0%,transparent 70%);animation:burnFlame .6s ease-in forwards;pointer-events:none;z-index:5;mix-blend-mode:screen}
@keyframes burnFlame{0%{opacity:0;transform:scaleY(.3) scaleX(.8);transform-origin:bottom}20%{opacity:.9;transform:scaleY(1) scaleX(1)}60%{opacity:1;transform:scaleY(1.3) scaleX(1.1);transform-origin:bottom}100%{opacity:0;transform:scaleY(.5) scaleX(.3)}}
.card.burning::after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(0deg,rgba(255,60,0,.6) 0%,rgba(255,120,0,.3) 30%,transparent 70%);animation:burnGlow .6s ease-in forwards;pointer-events:none;z-index:4;mix-blend-mode:overlay}
@keyframes burnGlow{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.card .card-cost{position:absolute;top:-8px;left:-8px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#5ab0ff,var(--energy));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;z-index:1;box-shadow:0 2px 8px rgba(0,0,0,.6),inset 0 1px 2px rgba(255,255,255,.3),0 0 8px rgba(74,158,255,.4)}
.card .card-name{font-size:13px;font-weight:800;text-align:center;color:var(--gold-2);text-shadow:0 0 6px rgba(245,197,66,.2)}
.card .card-type{font-size:10px;color:var(--dim);text-align:center;text-transform:uppercase;letter-spacing:1px}
.card .card-desc{font-size:11px;color:var(--text);text-align:center;flex:1;line-height:1.4}
.card.rarity-common{border-color:var(--rarity-common)}
.card.rarity-uncommon{border-color:var(--rarity-uncommon)}
.card.rarity-rare{border-color:var(--rarity-rare);box-shadow:0 0 8px rgba(245,197,66,.2),inset 0 0 12px rgba(245,197,66,.05)}
.card.rarity-special{border-color:var(--rarity-special);box-shadow:0 0 8px rgba(155,89,182,.2),inset 0 0 12px rgba(155,89,182,.05)}

/* 卡牌素材背景图 */
.card.has-art,.pile-card-item.has-art,.shop-card-item.has-art,.reward-card.has-art{
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
}
.card.has-art{background-blend-mode:multiply;}
.card.has-art .card-art-overlay{
  position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(180deg,rgba(10,5,20,.15) 0%,rgba(10,5,20,.55) 55%,rgba(10,5,20,.92) 100%);
  pointer-events:none;z-index:0;
}
.card.has-art .card-cost,.card.has-art .card-name,.card.has-art .card-type,.card.has-art .card-desc{position:relative;z-index:1}
.card.has-art .card-name{text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 8px rgba(245,197,66,.3)}
.card.has-art .card-desc{text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* 牌堆/商店/奖励卡牌的图片遮罩 */
.pile-card-item.has-art .card-art-overlay,
.shop-card-item.has-art .card-art-overlay,
.reward-card.has-art .card-art-overlay{
  position:absolute;inset:0;border-radius:6px;
  background:linear-gradient(180deg,rgba(10,5,20,.1) 0%,rgba(10,5,20,.5) 50%,rgba(10,5,20,.9) 100%);
  pointer-events:none;z-index:0;
}
.pile-card-item.has-art *,.shop-card-item.has-art *,.reward-card.has-art *{position:relative;z-index:1}
.pile-card-item.has-art{background-color:var(--card,#1a1a2e)}
.shop-card-item.has-art{background-color:var(--card,#1a1a2e)}
.reward-card.has-art{background-color:var(--card,#1a1a2e)}

/* 拖拽跟随线SVG */
#drag-line{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50}

/* ---------------- 按钮 ---------------- */
button.btn,.btn{
  font:inherit;font-weight:800;font-size:15px;color:#3a2400;cursor:pointer;
  padding:11px 26px;border:none;border-radius:999px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  box-shadow:0 6px 16px rgba(245,197,66,.4),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .12s,box-shadow .12s,filter .12s;letter-spacing:1px;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(245,197,66,.55)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.btn-primary{background:linear-gradient(180deg,#6bc0ff,var(--energy));color:#fff;box-shadow:0 6px 16px rgba(74,158,255,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#3a2400}
.btn.btn-end-turn{
  background:linear-gradient(135deg,var(--enemy),#c0392b);color:#fff;font-size:16px;padding:12px 32px;
  border:1px solid rgba(255,255,255,.1);border-radius:999px;
  box-shadow:0 6px 16px rgba(232,67,147,.4),inset 0 1px 0 rgba(255,255,255,.2);
}
.btn.btn-end-turn:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(232,67,147,.4)}
.btn.btn-end-turn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.btn-auto{background:linear-gradient(135deg,#2c3e50,#1a5276);color:#fff;font-size:13px;padding:10px 20px;border:1px solid rgba(255,255,255,.15);border-radius:999px;box-shadow:0 4px 12px rgba(26,82,118,.3);margin-left:8px;transition:all .2s}
.btn.btn-auto:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(52,152,219,.4)}
.btn.btn-auto.auto-active{background:linear-gradient(135deg,#e67e22,#d35400);box-shadow:0 4px 16px rgba(230,126,34,.5);animation:autoPulse 1.5s ease-in-out infinite}
.btn-toggle-fx{background:linear-gradient(135deg,#3a1a00,#5c2e00);color:#ffaa44;font-size:12px;padding:8px 14px;border:1px solid rgba(255,120,0,.3);border-radius:999px;box-shadow:0 2px 8px rgba(255,80,0,.15);margin-left:6px;transition:all .2s;cursor:pointer}
.btn-toggle-fx:hover{transform:scale(1.05);box-shadow:0 2px 12px rgba(255,100,0,.4)}
.btn-toggle-fx.off{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#666;border-color:rgba(100,100,100,.3)}

/* 升级预览 */
.upgrade-hint{font-size:12px;color:var(--dim);margin-bottom:8px;text-align:center}
.upgrade-card-wrapper{position:relative;display:inline-block;cursor:pointer}
.upgrade-preview{display:none;position:absolute;top:0;left:100%;margin-left:12px;z-index:100;flex-direction:column;align-items:center;gap:4px}
.upgrade-card-wrapper:hover>.upgrade-preview{display:flex!important}
.upgrade-card-wrapper:hover>.card{box-shadow:0 0 16px rgba(46,204,113,.5);border-color:var(--buff)!important}
.upgrade-arrow{font-size:20px;color:var(--buff);text-shadow:0 0 8px rgba(46,204,113,.6)}
.up-changed{color:var(--buff)!important;text-shadow:0 0 4px rgba(46,204,113,.3)}
.card-cost.up-changed{background:var(--buff)!important;color:#000!important}
.card.upgrade-able{cursor:pointer;border-color:rgba(46,204,113,.4)!important}
.card.upgrade-able:hover{box-shadow:0 0 10px rgba(46,204,113,.3)}
@media(max-width:768px){
  .upgrade-preview{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin-left:0;z-index:200}
}
.floating-auto-btn{position:fixed;bottom:12px;left:12px;z-index:200;display:none;margin-left:0}
@keyframes autoPulse{0%,100%{box-shadow:0 4px 16px rgba(230,126,34,.5)}50%{box-shadow:0 4px 24px rgba(230,126,34,.8)}}
.btn.sm{padding:6px 14px;font-size:13px}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--ink);border:1px solid var(--panel-line);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
.btn:disabled{filter:grayscale(.7) brightness(.7);cursor:not-allowed;transform:none;box-shadow:none}

/* 日志 */
.log-area{
  position:absolute;bottom:190px;right:16px;width:260px;max-height:120px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:6px;font-size:11px;color:var(--dim);z-index:10;pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.log-entry{margin-bottom:1px}
.log-entry.player{color:var(--energy)}
.log-entry.enemy{color:var(--enemy)}

/* ---------------- 覆盖层 ---------------- */
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(8,4,18,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100}
.overlay-content{
  background:var(--panel);border:2px solid var(--gold);border-radius:16px;padding:40px;text-align:center;
  max-width:500px;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.06),0 0 24px rgba(245,197,66,.2);
}
.overlay-content h2{font-size:28px;color:var(--gold-2);margin-bottom:16px;text-shadow:0 0 16px rgba(245,197,66,.5)}
.overlay-content p{font-size:16px;margin-bottom:24px;color:var(--dim)}

/* 面板 */
.panel{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--panel);border:2px solid var(--gold);border-radius:16px;padding:32px;
  max-width:480px;width:90%;z-index:50;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.06),0 0 24px rgba(245,197,66,.2);
}
/* 商店/长内容场景：panel 跟随滚动，不固定 */
.panel.scrollable{position:relative;top:auto;left:auto;transform:none;max-width:700px;margin:0 auto;}
/* 商店内容区背景，确保滚动区域有统一深色底 */
.shop-wrap{background:rgba(20,10,38,0.7);border:1px solid var(--panel-line);border-radius:16px;padding:24px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,0.35);}
.panel h2{color:var(--gold-2);margin-bottom:12px;text-shadow:0 0 12px rgba(245,197,66,.4)}
.panel p{color:var(--dim);margin-bottom:16px;line-height:1.6}
.panel .choices{display:flex;flex-direction:column;gap:8px}
.panel .choice-btn{
  background:rgba(255,255,255,.05);border:1px solid var(--panel-line);color:var(--ink);
  padding:12px;border-radius:10px;cursor:pointer;text-align:left;transition:all .2s;font-size:14px;
  font-weight:600;
}
.panel .choice-btn:hover{border-color:var(--gold);background:rgba(245,197,66,.1);transform:translateX(4px);box-shadow:0 0 12px rgba(245,197,66,.2)}
.panel .choice-btn:disabled{opacity:.4;cursor:not-allowed}

/* 事件选项效果提示 */
.choice-effect-hint{
  display:block;font-size:12px;font-weight:400;opacity:.6;margin-top:4px;line-height:1.4;
}
.choice-btn:hover .choice-effect-hint{opacity:1;color:var(--gold);}

/* 通用遗物药水栏 */
.rp-bar-global{
  display:flex;gap:12px;justify-content:center;align-items:flex-start;
  padding:6px 12px;background:rgba(0,0,0,.25);
  border-bottom:1px solid var(--panel-line);
  flex-wrap:wrap;
}
.rp-section{display:flex;align-items:center;gap:6px;}
.rp-label{font-size:11px;color:var(--dim);font-weight:600;white-space:nowrap;}
.rp-icons{display:flex;gap:3px;align-items:center;flex-wrap:wrap;}
.rp-empty{font-size:11px;color:var(--dim);}

/* 游戏选择 */
.game-select{display:flex;flex-direction:column;gap:12px;align-items:center}
.game-card{
  background:var(--panel);border:2px solid var(--panel-line);border-radius:14px;padding:24px;width:320px;
  cursor:pointer;transition:all .2s;text-align:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.game-card:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(245,197,66,.3);transform:translateY(-4px)}
.game-card h3{color:var(--gold-2);font-size:20px;margin-bottom:8px;text-shadow:0 0 10px rgba(245,197,66,.3)}

/* 职业选择 - 网格布局 */
.class-select-overlay-no-box{display:flex;flex-direction:column;align-items:center;max-width:100%;max-height:100vh;overflow:hidden;padding:8px}
.class-select-overlay-no-box h2{margin-bottom:4px}
.class-select-overlay-no-box>p{margin-bottom:8px;color:var(--dim);font-size:13px}
.class-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-height:calc(100vh - 100px);overflow-x:auto;overflow-y:auto;padding:4px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.class-card{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:8px;padding:6px;
  cursor:pointer;transition:all .2s;text-align:center;
  min-height:150px;width:120px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  scroll-snap-align:start;
}
.class-card:hover{border-color:var(--energy);box-shadow:0 0 12px rgba(74,158,255,.3);transform:translateY(-2px)}
.class-card.selected{border-color:var(--gold);box-shadow:0 0 20px rgba(245,197,66,.4);background:linear-gradient(135deg,var(--panel),rgba(245,197,66,.08))}
.class-art-img{width:100%;height:64px;object-fit:contain;border-radius:6px;margin-bottom:4px;border:1px solid var(--panel-line);background:rgba(0,0,0,.2)}
.class-icon{font-size:24px;margin-bottom:4px;height:64px;display:flex;align-items:center;justify-content:center;width:100%;border-radius:6px;background:rgba(255,255,255,.03);border:1px solid var(--panel-line)}
.class-name{color:var(--gold-2);font-size:12px;font-weight:800;margin-bottom:2px;text-shadow:0 0 8px rgba(245,197,66,.3)}
.class-desc{color:var(--dim);font-size:9px;margin-bottom:2px;line-height:1.3;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.class-stats{font-size:10px;color:var(--text)}

/* 保留旧版兼容 */
.class-select{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:16px 0;align-items:stretch}

/* 牌堆 */
.deck-piles{display:flex;justify-content:space-between;padding:0 16px 8px}
.pile-stack{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);cursor:pointer}
.pile-stack:hover{color:var(--gold-2)}

/* 遗物 */
.relics-bar{display:flex;gap:4px;flex-wrap:wrap;padding:4px 8px;background:var(--panel);border-radius:6px;border:1px solid var(--panel-line)}
.relic-icon{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid var(--rarity-rare);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .2s}
.relic-icon:hover{background:rgba(245,197,66,.15);box-shadow:0 0 8px rgba(245,197,66,.3)}

/* 飘字 */
.float-text{position:absolute;font-size:22px;font-weight:800;pointer-events:none;animation:floatUp 1s ease-out forwards;z-index:30;text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.5)}
.float-text.damage{color:#ff4444}
.float-text.big-damage{color:#ff6644;font-size:32px;text-shadow:0 2px 8px rgba(255,68,68,.6),0 0 20px rgba(255,68,68,.4)}
.float-text.block{color:var(--block);font-size:18px}
.float-text.heal{color:var(--buff);font-size:20px}
.float-text.energy{color:var(--energy);font-size:18px}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,20px) scale(.3)}20%{opacity:1;transform:translate(-50%,-5px) scale(1.3)}40%{transform:translate(-50%,-10px) scale(1)}100%{opacity:0;transform:translate(-50%,-60px) scale(.9)}}

/* 粒子Canvas */
#particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:25}

/* 回合横幅 */
.turn-banner{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);font-size:42px;font-weight:900;z-index:40;pointer-events:none;animation:bannerShow 1.2s ease forwards;text-shadow:0 4px 16px rgba(0,0,0,.8),0 0 20px rgba(245,197,66,.4)}
.turn-banner.player{color:var(--gold-2)}
.turn-banner.enemy{color:var(--enemy)}
@keyframes bannerShow{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-5deg)}30%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8) rotate(2deg)}}

/* 抽牌动画 */
.card-draw{animation:cardDraw .35s cubic-bezier(.22,.61,.36,1)}
@keyframes cardDraw{0%{transform:translateY(80px) translateX(-40px) rotate(15deg);opacity:0}100%{transform:translateY(0) translateX(0) rotate(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* orient-btn 已删除 */

/* ====== 地图全屏界面 ====== */
.map-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(8,4,18,.6);backdrop-filter:blur(6px);z-index:80;display:flex;flex-direction:column;animation:fadeIn .3s}
.map-screen .map-header{
  display:flex;align-items:center;justify-content:space-between;padding:12px 20px;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:0;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.3);flex-shrink:0;
}
.map-screen .map-header h2{color:var(--gold-2);font-size:18px;text-shadow:0 0 10px rgba(245,197,66,.3)}
.map-screen .map-header .map-stats{display:flex;gap:16px;font-size:13px;color:var(--dim)}
.map-screen .map-scroll{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column-reverse;align-items:center;padding:24px 16px 80px;scroll-behavior:smooth}
.map-screen .map-path{display:flex;flex-direction:column-reverse;gap:0;align-items:center;position:relative;min-width:320px}
.map-floor-row{display:flex;gap:12px;justify-content:center;align-items:center;min-height:56px;position:relative;width:100%}
.map-floor-label{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:11px;color:var(--dim);width:40px;text-align:center}
.map-node-big{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--border);
  background:var(--panel);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:all .25s;position:relative;z-index:2}
.map-node-big.visited{opacity:.25}
.map-node-big.cleared{border-color:var(--buff);background:rgba(46,204,113,.1)}
.map-node-big.available{border-color:var(--gold);box-shadow:0 0 12px rgba(245,197,66,.6);animation:pulse 1.5s infinite;pointer-events:auto;touch-action:manipulation}
.map-node-big.current{border-color:var(--energy);background:rgba(74,158,255,.2);box-shadow:0 0 16px rgba(74,158,255,.5)}
.map-node-big.boss{border-color:var(--enemy);background:rgba(232,67,147,.15);width:52px;height:52px;font-size:20px}
.map-node-big.elite{border-color:var(--gold)}
.map-node-big:hover.available{transform:scale(1.2);box-shadow:0 0 20px rgba(245,197,66,.8)}
/* 节点间连线 */
.map-connector{width:2px;height:16px;background:var(--border);margin:0 auto}
.map-connector.active{background:var(--gold);box-shadow:0 0 4px rgba(245,197,66,.4)}
.map-connector.cleared{background:var(--buff)}
.map-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}
@keyframes dashMove{to{stroke-dashoffset:-9}}
/* 地图信息面板 */
.map-info-panel{position:absolute;bottom:0;left:0;width:100%;background:var(--panel);border-top:1px solid var(--panel-line);padding:10px 20px;display:flex;gap:20px;font-size:13px;z-index:5;max-width:100%;flex-wrap:wrap;justify-content:center;box-sizing:border-box;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -8px 24px rgba(0,0,0,.3)}
.map-info-panel .mi-item{display:flex;align-items:center;gap:4px;color:var(--dim)}
.map-info-panel .mi-item .mi-val{color:var(--gold-2);font-weight:800}

/* 弹窗 */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(8,4,18,.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:300}
.modal-box{background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:20px;max-width:600px;max-height:80vh;overflow-y:auto;min-width:400px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,0.35),0 0 16px rgba(245,197,66,.15)}
.modal-title{font-size:18px;font-weight:800;color:var(--gold-2);margin-bottom:12px;text-align:center;text-shadow:0 0 10px rgba(245,197,66,.3)}
.modal-close{position:relative;float:right;cursor:pointer;font-size:20px;color:var(--dim)}
.modal-close:hover{color:var(--text)}
.pile-card-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pile-card-item{width:120px;padding:8px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.05);text-align:center;font-size:13px}
.pile-card-item .pc-name{font-weight:800;margin-bottom:4px;color:var(--gold-2)}
.pile-card-item .pc-cost{color:var(--energy);font-weight:800}
.pile-card-item .pc-type{font-size:11px;color:var(--dim)}

/* 查看牌组弹窗 */
.deck-modal-box{max-width:720px;max-height:85vh;overflow-y:auto;padding:16px}
.deck-total{font-size:14px;color:var(--dim);font-weight:400}
.deck-stats{display:flex;gap:12px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.deck-stat{font-size:13px;color:var(--dim);padding:4px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--panel-line)}
.deck-group{margin-bottom:16px}
.deck-group-title{font-size:14px;font-weight:800;color:var(--gold-2);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--panel-line);display:flex;align-items:center;gap:6px}
.deck-group-count{font-size:12px;color:var(--dim);font-weight:400;background:rgba(255,255,255,.08);padding:1px 8px;border-radius:10px}
.deck-group-cards{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.deck-card{width:130px;min-height:160px;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--card,#1a1a2e);text-align:center;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.deck-card.rarity-common{border-color:var(--rarity-common)}
.deck-card.rarity-uncommon{border-color:var(--rarity-uncommon);box-shadow:0 0 6px rgba(74,158,255,.15)}
.deck-card.rarity-rare{border-color:var(--rarity-rare);box-shadow:0 0 8px rgba(245,197,66,.2),inset 0 0 8px rgba(245,197,66,.03)}
.deck-card.rarity-special{border-color:var(--rarity-special);box-shadow:0 0 8px rgba(155,89,182,.2)}
.deck-card.has-art{background-size:cover;background-position:center;background-blend-mode:multiply}
.deck-card .card-art-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.75) 100%);pointer-events:none}
.deck-card .card-cost{position:absolute;top:-6px;left:-6px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,#5ab0ff,var(--energy));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;z-index:1;box-shadow:0 2px 6px rgba(0,0,0,.6),0 0 6px rgba(74,158,255,.4)}
.deck-card .card-name{font-size:12px;font-weight:800;color:var(--gold-2);text-shadow:0 1px 4px rgba(0,0,0,.9);position:relative;z-index:1}
.deck-card .card-type{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;position:relative;z-index:1}
.deck-card .card-desc{font-size:10px;color:var(--text);line-height:1.3;flex:1;position:relative;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* 商店 */
.shop-section{margin-bottom:16px}
.shop-section h3{color:var(--gold-2);margin-bottom:8px;font-size:15px;border-bottom:1px solid var(--panel-line);padding-bottom:4px;text-shadow:0 0 8px rgba(245,197,66,.2)}
.shop-items{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.shop-card-item{width:140px;padding:10px;border:1px solid var(--panel-line);border-radius:10px;background:rgba(255,255,255,.05);cursor:pointer;text-align:center;transition:border-color .2s,transform .1s}
.shop-card-item:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 0 12px rgba(245,197,66,.2)}
.shop-card-item.disabled{opacity:.4;cursor:not-allowed}
.shop-card-item.disabled:hover{border-color:var(--border);transform:none}
.shop-card-item .sc-name{font-weight:800;font-size:14px;margin-bottom:4px;color:var(--gold-2)}
.shop-card-item .sc-cost{color:var(--energy);font-weight:800}
.shop-card-item .sc-price{color:var(--gold);font-weight:800;margin-top:4px}
.shop-card-item .sc-desc{font-size:11px;color:var(--dim);margin-top:2px}
.shop-relic-item,.shop-potion-item{width:140px;padding:10px;border:1px solid var(--panel-line);border-radius:10px;background:rgba(255,255,255,.05);cursor:pointer;text-align:center;transition:border-color .2s,transform .1s}
.shop-relic-item:hover,.shop-potion-item:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 0 12px rgba(245,197,66,.2)}
.shop-relic-item.disabled,.shop-potion-item.disabled{opacity:.4;cursor:not-allowed}
.shop-purge-area{margin-top:12px;text-align:center}

/* 遗物药水栏 */
.relic-potion-bar{display:flex;justify-content:space-between;align-items:center;padding:4px 16px;background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;min-height:36px;gap:8px;margin:0 12px 4px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.relic-slots,.potion-slots{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.relic-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;border-radius:6px;transition:background .2s}
.relic-icon:hover{background:rgba(245,197,66,.15)}
.potion-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;border-radius:6px;transition:background .2s}
.potion-icon:hover{background:rgba(245,197,66,.15)}
.potion-icon.empty{opacity:.3;cursor:default}
.potion-icon.empty:hover{background:transparent}

/* 奖励卡牌 */
.reward-card{transition:all .2s}
.reward-card:hover{transform:translateY(-6px) !important;box-shadow:0 0 16px rgba(245,197,66,.3) !important}

/* ====== 响应式 ====== */
@media(max-width:1024px){
  .enemy-card{width:150px;padding:12px}
  .card{width:105px;min-width:105px;padding:6px}
  .card .card-name{font-size:12px}
  .card .card-desc{font-size:10px}
  .energy-orb{width:56px;height:56px}
  .energy-orb .val{font-size:20px}
}
@media(max-width:768px) and (orientation:portrait){
  :root{--card-scale:0.85}
  .topbar{padding:6px 8px;min-height:40px}
  .topbar .title{font-size:15px}
  .topbar .stats{gap:8px;font-size:12px}
  .stat-item .icon{font-size:14px}
  .btn-end-turn{font-size:13px;padding:8px 16px}
  .main{flex-direction:column}
  .map-screen .map-header{padding:8px 12px}
  .map-screen .map-header h2{font-size:15px}
  .map-screen .map-header .map-stats{gap:10px;font-size:11px}
  .map-screen .map-scroll{padding:16px 8px 70px}
  .map-screen .map-path{min-width:240px}
  .map-node-big{width:38px;height:38px;font-size:14px}
  .map-node-big.boss{width:44px;height:44px;font-size:17px}
  .map-floor-label{font-size:10px;width:30px}
  .map-info-panel{padding:8px 12px;gap:12px;font-size:11px;bottom:0}
  .overlay-content{padding:20px 16px;max-width:94vw;max-height:88vh}
  .overlay-content h2{font-size:22px;margin-bottom:10px}
  .overlay-content p{font-size:13px;margin-bottom:14px}
  .class-grid{gap:6px;max-height:calc(100vh - 80px)}
  .class-card{min-height:130px;width:100px;padding:5px}
  .class-card .class-icon{font-size:20px;height:54px}
  .class-card .class-art-img{height:54px}
  .class-card .class-name{font-size:11px}
  .class-card .class-desc{font-size:8px;line-height:1.2}
  .class-card .class-stats{font-size:9px}
  .battle-area{order:1;flex:1;min-height:0}
  .enemies-row{padding:4px;min-height:80px;gap:6px}
  .enemy-card{width:95px;padding:6px;border-radius:8px}
  .enemy-name{font-size:13px;margin-bottom:4px}
  .enemy-hp-bar{height:16px}
  .enemy-hp-text{font-size:10px}
  .enemy-intent{font-size:11px;padding:2px}
  .player-area{padding:4px;gap:6px}
  .player-info{min-width:120px;padding:8px}
  .player-hp-bar{height:20px}
  .player-hp-text{font-size:11px}
  .energy-and-end{gap:4px}
  .energy-orb{width:40px;height:40px}
  .energy-orb .val{font-size:16px}
  .energy-orb .label{font-size:7px}
  .btn-end-turn{font-size:12px;padding:6px 12px}
  .hand-area{padding:4px;min-height:90px;gap:3px;overflow-x:auto;overflow-y:visible;flex-wrap:nowrap}
  .card{width:72px;min-width:72px;padding:3px;border-radius:5px}
  .card .card-cost{width:20px;height:20px;font-size:11px;top:-5px;left:-5px}
  .card .card-name{font-size:10px}
  .card .card-type{font-size:8px}
  .card .card-desc{font-size:8px;line-height:1.2}
  .card:hover{transform:translateY(-12px) scale(1.05)}
  .card.selected{transform:translateY(-16px) scale(1.08)}
  .log-area{display:none}
  .panel{padding:20px;max-width:92%}
  .panel h2{font-size:20px}
  .panel p{font-size:14px}
  .panel .choice-btn{padding:10px;font-size:13px}
  .turn-banner{font-size:28px}
  .game-card{width:90%;max-width:300px;padding:16px}
  .game-card h3{font-size:18px}
  .relics-bar{gap:2px}
  .relic-icon{width:24px;height:24px;font-size:12px}
  .deck-piles{font-size:10px;padding:0 8px 4px}
  .pile-stack{gap:3px}
  .float-text{font-size:18px}
  .float-text.big-damage{font-size:26px}
}
@media(max-width:1024px) and (orientation:landscape) and (max-height:500px){
  .topbar{padding:4px 12px;min-height:36px}
  .topbar .title{font-size:14px}
  .topbar .stats{gap:10px;font-size:12px}
  .enemies-row{padding:8px;min-height:100px;gap:10px}
  .enemy-card{width:130px;padding:10px}
  .enemy-name{font-size:14px}
  .player-area{padding:6px}
  .player-info{min-width:160px;padding:10px}
  .hand-area{padding:4px;min-height:80px;gap:3px;overflow-x:auto;overflow-y:visible}
  .card{width:68px;min-width:68px;padding:3px;border-radius:5px}
  .card .card-cost{width:22px;height:22px;font-size:12px}
  .card .card-name{font-size:11px}
  .card .card-desc{font-size:9px}
  .energy-orb{width:48px;height:48px}
  .energy-orb .val{font-size:18px}
  .log-area{display:none}
  .turn-banner{font-size:30px}
  .map-screen .map-scroll{padding:12px 8px 65px}
  .map-screen .map-path{min-width:200px}
  .map-node-big{width:36px;height:36px;font-size:13px}
  .map-info-panel{font-size:11px;padding:6px 10px;gap:10px;bottom:0}
}
@media(max-width:500px) and (orientation:portrait){
  .hand-area{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 8px}
  .card{min-width:70px}
  .enemies-row{gap:8px;padding:6px}
  .enemy-card{width:120px;padding:8px}
  .enemy-name{font-size:13px}
  .player-info{min-width:140px;padding:8px}
  .energy-orb{width:50px;height:50px}
  .energy-orb .val{font-size:18px}
  .relic-potion-bar{padding:3px 8px;min-height:32px}
  .relic-icon,.potion-icon{width:24px;height:24px;font-size:14px}
  .deck-piles{font-size:10px;padding:0 8px 4px}
  .pile-stack{gap:3px}
  .map-node-big{width:38px;height:38px;font-size:14px}
  .map-floor-label{font-size:10px}
  .modal-content{max-width:95vw;max-height:85vh;overflow-y:auto}
  .pile-card-item{width:90px;padding:6px;font-size:11px}
  .deck-modal-box{max-width:95vw;padding:10px}
  .deck-card{width:100px;min-height:130px;padding:5px}
  .deck-card .card-name{font-size:11px}
  .deck-card .card-desc{font-size:9px}
  .deck-card .card-cost{width:20px;height:20px;font-size:10px;top:-4px;left:-4px}
  .deck-stats{gap:6px}
  .deck-stat{font-size:11px;padding:3px 6px}
}
@media(pointer:coarse){
  .card{cursor:default}
  .btn{min-height:40px}
  .btn-end-turn{min-height:44px;min-width:100px}
  .map-node{width:36px;height:36px}
  .choice-btn{min-height:44px}
  .game-card{min-height:80px}
}
/* ===== �ٻ������� ===== */
.summons-row{
  display:flex;gap:8px;justify-content:center;
  padding:6px 12px;min-height:0;
  flex-wrap:wrap;
}
.summon-card{
  position:relative;
  background:linear-gradient(135deg,rgba(72,52,120,0.85),rgba(40,30,60,0.9));
  border:1px solid #8e44ad;border-radius:8px;
  padding:6px 10px;min-width:80px;max-width:120px;
  text-align:center;
  box-shadow:0 2px 8px rgba(142,68,173,0.3);
  animation:summonAppear 0.4s ease-out;
}
@keyframes summonAppear{
  from{opacity:0;transform:scale(0.5) translateY(-20px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}
.summon-name{
  font-size:12px;color:#ce93d8;font-weight:bold;
  margin-bottom:3px;white-space:nowrap;
}
.summon-hp-bar{
  position:relative;height:8px;background:rgba(0,0,0,0.4);
  border-radius:4px;overflow:hidden;margin-bottom:2px;
}
.summon-hp-fill{
  height:100%;background:linear-gradient(90deg,#e74c3c,#c0392b);
  transition:width 0.3s ease;
}
.summon-hp-text{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.summon-atk{
  font-size:13px;color:#ff6b6b;font-weight:bold;
}
.summon-block{
  font-size:11px;color:#74b9ff;margin-top:1px;
}
.summon-buffs{
  display:flex;flex-wrap:wrap;gap:2px;margin-top:2px;
}
.summon-duration{
  position:relative;height:6px;background:rgba(0,0,0,0.4);
  border-radius:3px;overflow:hidden;margin-top:3px;
}
.duration-bar{
  height:100%;background:linear-gradient(90deg,#f39c12,#e67e22);
  transition:width 0.3s ease;
}
.duration-text{
  position:absolute;top:-1px;left:0;width:100%;
  text-align:center;font-size:8px;color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,0.8);
}

/* ===== �ս�һ������ ===== */
.finishing-blow{
  animation:finishingBlow 0.8s ease-out forwards !important;
}
@keyframes finishingBlow{
  0%{transform:scale(1);filter:brightness(1);}
  15%{transform:scale(1.15);filter:brightness(2) saturate(2);}
  30%{transform:scale(0.9);filter:brightness(1.5) hue-rotate(20deg);}
  100%{transform:scale(0) rotate(180deg);filter:brightness(0) opacity(0);}
}
@keyframes flashFade{
  0%{opacity:0.8;}
  50%{opacity:0.3;}
  100%{opacity:0;}
}

/* ���������� */
.enemy-card.hit{
  animation:hitShake 0.3s ease-out;
}
@keyframes hitShake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}

/* ���˺�Ʈ����ǿ */
.float-text.big-damage{
  font-size:24px !important;
  color:#ff4444 !important;
  text-shadow:0 0 8px #ff0000,0 2px 4px rgba(0,0,0,0.8) !important;
  animation:bigDamageFloat 1s ease-out forwards !important;
}
@keyframes bigDamageFloat{
  0%{transform:translate(-50%,0) scale(0.5);opacity:0;}
  20%{transform:translate(-50%,-10px) scale(1.3);opacity:1;}
  40%{transform:translate(-50%,-20px) scale(1);opacity:1;}
  100%{transform:translate(-50%,-50px) scale(0.8);opacity:0;}
}

/* ===== 设置按钮 ===== */
.floating-settings-btn{
  background:var(--panel);border:1px solid var(--panel-line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  color:var(--gold-2);cursor:pointer;
  transition:all .2s;
}
.floating-settings-btn:hover{transform:scale(1.1);box-shadow:0 0 12px rgba(245,197,66,0.4)}
.floating-settings-btn:active{transform:scale(0.95)}

/* ===== 移动端设置面板优化 ===== */
@media(max-width:500px){
  .floating-settings-btn{width:36px;height:36px;font-size:16px;bottom:8px;right:8px}
  .floating-auto-btn{bottom:8px!important;left:8px!important}
  .overlay-content{max-width:92vw!important;padding:16px!important}
  .switch{width:40px!important;height:22px!important}
  .switch input:checked+.slider:before{width:16px!important;height:16px!important;transform:translateX(18px)!important}
  .switch input:not(:checked)+.slider:before{width:16px!important;height:16px!important}
}

/* ===== 触摸设备优化 ===== */
@media(pointer:coarse){
  .floating-settings-btn{min-height:36px;min-width:36px}
  .card{touch-action:manipulation}
  .enemy-card{touch-action:manipulation}
  .map-node{touch-action:manipulation}
  input[type=range]{height:32px}
}

/* ===== 小屏幕自动托管按钮不遮挡 ===== */
@media(max-width:500px) and (orientation:portrait){
  #auto-log-panel{width:240px!important;max-height:160px!important;font-size:10px!important}
}

/* ===== 防止移动端长按选中 ===== */
@media(pointer:coarse){
  .card,.enemy-card,.map-node,.btn,.relic-icon,.potion-icon{
    -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  }
}

/* ===== 安全区域适配（刘海屏） ===== */
@supports(padding:env(safe-area-inset-bottom)){
  .floating-auto-btn{bottom:calc(12px + env(safe-area-inset-bottom))!important}
  .floating-settings-btn{bottom:calc(12px + env(safe-area-inset-bottom))!important;right:calc(12px + env(safe-area-inset-right))!important}
}