/* ============================================================
   Thunder Fighter - Style Sheet
   Extracted from thunder-fighter.html (7844 lines)
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
body{background:#050510;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;font-family:'Orbitron','Segoe UI',Arial,sans-serif;overflow-x:hidden;overflow-y:auto;position:relative;padding-top:0}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,rgba(0,50,100,.15) 0%,transparent 70%);pointer-events:none;z-index:0}
body::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,.15),transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,.1),transparent),radial-gradient(1px 1px at 90px 40px,rgba(255,255,255,.12),transparent),radial-gradient(1px 1px at 130px 80px,rgba(255,255,255,.08),transparent),radial-gradient(2px 2px at 160px 30px,rgba(255,255,255,.1),transparent);background-size:200px 100px;pointer-events:none;z-index:0;animation:starFloat 60s linear infinite}
@keyframes starFloat{from{transform:translateY(0)}to{transform:translateY(-100px)}}
#gc{position:relative;width:1080px;height:960px;border:2px solid rgba(0,180,255,.4);border-radius:8px;box-shadow:0 0 40px rgba(0,120,255,.4),0 0 80px rgba(0,80,200,.15),inset 0 0 40px rgba(0,50,150,.15);transform-origin:top center;z-index:1;overflow:hidden}
canvas#gameCanvas{display:block;border-radius:6px}
#ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
#score{position:absolute;top:12px;right:14px;color:#00ddff;font-size:26px;font-weight:bold;text-shadow:0 0 20px rgba(0,220,255,1),0 0 40px rgba(0,180,255,.6),0 0 60px rgba(0,150,255,.3);letter-spacing:3px;transition:all .3s;animation:scorePulse 2s infinite;background:rgba(0,20,60,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(0,180,255,.15);border-radius:10px;padding:4px 14px}
@keyframes scorePulse{0%,100%{text-shadow:0 0 20px rgba(0,220,255,1),0 0 40px rgba(0,180,255,.6)}50%{text-shadow:0 0 30px rgba(0,220,255,1),0 0 60px rgba(0,180,255,.8),0 0 80px rgba(0,150,255,.4)}}
#fireLvl{position:absolute;top:42px;right:14px;color:#ff8800;font-size:16px;font-weight:bold;text-shadow:0 0 12px rgba(255,136,0,.9),0 0 24px rgba(255,136,0,.4);letter-spacing:2px;transition:all .3s}
#hearts{position:absolute;top:10px;left:12px;display:flex;gap:6px;filter:drop-shadow(0 0 8px rgba(255,50,50,.6));background:rgba(40,0,0,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,50,50,.12);border-radius:10px;padding:4px 8px}
.heart{width:24px;height:22px;filter:drop-shadow(0 0 8px rgba(255,50,50,.9));transition:all .3s;animation:heartBeat 1.5s infinite}
.heart:nth-child(2){animation-delay:.2s}
.heart:nth-child(3){animation-delay:.4s}
.heart:nth-child(4){animation-delay:.6s}
.heart:nth-child(5){animation-delay:.8s}
.heart.lost{opacity:.15;filter:none;animation:none}
@keyframes heartBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes comboFlash{0%{transform:scale(1.2);opacity:.5}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
#waveInfo{position:absolute;top:36px;left:50%;transform:translateX(-50%);color:#ffd700;font-size:15px;text-shadow:0 0 12px rgba(255,215,0,.8),0 0 24px rgba(255,215,0,.4);letter-spacing:3px;opacity:0;transition:opacity .5s;font-weight:bold}
#waveInfo.show{opacity:1;animation:waveInfoPulse 2s infinite}
@keyframes waveInfoPulse{0%,100%{text-shadow:0 0 12px rgba(255,215,0,.8),0 0 24px rgba(255,215,0,.4)}50%{text-shadow:0 0 18px rgba(255,215,0,1),0 0 36px rgba(255,215,0,.6)}}

/* ===== 大招激活UI ===== */
.ultOverlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20;display:none;overflow:hidden}
.ultOverlay.active{display:block}
.ultOverlay .ultBg{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;animation:ultBgIn .4s ease-out forwards}
@keyframes ultBgIn{from{opacity:0}to{opacity:1}}
.ultOverlay .ultVignette{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.4) 100%);opacity:0;animation:ultVigIn .6s ease-out .2s forwards}
@keyframes ultVigIn{from{opacity:0}to{opacity:1}}
.ultOverlay .ultCenter{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;opacity:0;animation:ultCenterIn .5s ease-out .1s forwards}
@keyframes ultCenterIn{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.ultOverlay .ultIcon{font-size:100px;display:block;margin-bottom:10px;opacity:0;animation:ultIconPop .6s ease-out .2s forwards}
@keyframes ultIconPop{0%{opacity:0;transform:scale(.3) rotate(-30deg)}60%{opacity:1;transform:scale(1.2) rotate(5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.ultOverlay .ultName{font-size:42px;font-weight:bold;letter-spacing:10px;text-shadow:0 0 40px currentColor,0 0 80px currentColor;opacity:0;animation:ultNameIn .7s ease-out .3s forwards}
@keyframes ultNameIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.ultOverlay .ultSubtitle{font-size:16px;letter-spacing:6px;opacity:0;animation:ultSubIn .5s ease-out .5s forwards}
@keyframes ultSubIn{from{opacity:0;transform:translateY(20px)}to{opacity:.6;transform:translateY(0)}}
.ultOverlay .ultTimer{position:absolute;bottom:200px;left:50%;transform:translateX(-50%);width:200px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;opacity:0;animation:ultTimerIn .4s ease-out .6s forwards}
@keyframes ultTimerIn{from{opacity:0}to{opacity:.8}}
.ultOverlay .ultTimerFill{height:100%;border-radius:2px;transition:width .1s linear}
/* 大招覆盖层增强特效 */
.ultOverlay .ultScanlines{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none;opacity:0;animation:scanlineIn .3s ease-out .4s forwards}
@keyframes scanlineIn{from{opacity:0}to{opacity:.4}}
.ultOverlay .ultParticles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.ultOverlay .ultParticles span{position:absolute;width:4px;height:4px;border-radius:50%;background:currentColor;animation:particleFloat 2s ease-in-out infinite}
@keyframes particleFloat{0%,100%{transform:translateY(0) scale(1);opacity:.6}50%{transform:translateY(-30px) scale(1.5);opacity:1}}
.ultOverlay .ultBorder{position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid transparent;pointer-events:none;opacity:0;animation:borderPulse .8s ease-out .5s forwards}
@keyframes borderPulse{0%{opacity:0;border-color:transparent}50%{opacity:.8}100%{opacity:.4;border-color:currentColor}}
.ultOverlay .ultCorners{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;animation:cornersIn .4s ease-out .6s forwards}
.ultOverlay .ultCorners::before,.ultOverlay .ultCorners::after{content:'';position:absolute;width:40px;height:40px;border:3px solid currentColor}
.ultOverlay .ultCorners::before{top:20px;left:20px;border-right:none;border-bottom:none}
.ultOverlay .ultCorners::after{bottom:20px;right:20px;border-left:none;border-top:none}
@keyframes cornersIn{from{opacity:0}to{opacity:.6}}
.ultOverlay .ultEnergyBar{position:absolute;bottom:180px;left:50%;transform:translateX(-50%);width:240px;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;opacity:0;animation:energyBarIn .4s ease-out .7s forwards}
.ultOverlay .ultEnergyBar::after{content:'';position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:energyShimmer 1.5s ease-in-out infinite}
@keyframes energyShimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
@keyframes energyBarIn{from{opacity:0;transform:translateX(-50%) scaleX(0)}to{opacity:.7;transform:translateX(-50%) scaleX(1)}}
.ultOverlay .ultStats{position:absolute;bottom:160px;left:50%;transform:translateX(-50%);text-align:center;opacity:0;animation:statsIn .5s ease-out .8s forwards}
@keyframes statsIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:.8;transform:translateX(-50%) translateY(0)}}
.ultOverlay .ultStats span{font-size:12px;letter-spacing:2px;text-shadow:0 0 10px currentColor}
/* 疾风 - 时空风暴 */
.ultOverlay.ult-gale .ultBg{background:radial-gradient(ellipse at center,rgba(0,204,255,.3) 0%,rgba(0,100,200,.15) 50%,transparent 100%)}
.ultOverlay.ult-gale .ultName{color:#00ccff}
.ultOverlay.ult-gale .ultSubtitle{color:#88eeff}
.ultOverlay.ult-gale .ultTimerFill{background:linear-gradient(90deg,#00ccff,#88eeff)}
/* 战神 - 烈焰风暴 */
.ultOverlay.ult-god .ultBg{background:radial-gradient(ellipse at center,rgba(255,136,0,.3) 0%,rgba(255,68,0,.15) 50%,transparent 100%)}
.ultOverlay.ult-god .ultName{color:#ff8800}
.ultOverlay.ult-god .ultSubtitle{color:#ffcc00}
.ultOverlay.ult-god .ultTimerFill{background:linear-gradient(90deg,#ff4400,#ffaa00)}
/* 铁壁 - 能量过载 */
.ultOverlay.ult-iron .ultBg{background:radial-gradient(ellipse at center,rgba(0,255,170,.3) 0%,rgba(0,200,120,.15) 50%,transparent 100%)}
.ultOverlay.ult-iron .ultName{color:#00ffaa}
.ultOverlay.ult-iron .ultSubtitle{color:#44ffcc}
.ultOverlay.ult-iron .ultTimerFill{background:linear-gradient(90deg,#00ffaa,#44ffcc)}
/* 雷霆 - 雷霆万钧 */
.ultOverlay.ult-thunder .ultBg{background:radial-gradient(ellipse at center,rgba(255,68,255,.3) 0%,rgba(200,0,200,.15) 50%,transparent 100%)}
.ultOverlay.ult-thunder .ultName{color:#ff44ff}
.ultOverlay.ult-thunder .ultSubtitle{color:#ff88ff}
.ultOverlay.ult-thunder .ultTimerFill{background:linear-gradient(90deg,#cc00ff,#ff44ff)}
/* 星环 - 聚能裂变 */
.ultOverlay.ult-star .ultBg{background:radial-gradient(ellipse at center,rgba(0,230,255,.3) 0%,rgba(255,180,60,.14) 52%,transparent 100%)}
.ultOverlay.ult-star .ultName{color:#00e6ff}
.ultOverlay.ult-star .ultSubtitle{color:#ffee66}
.ultOverlay.ult-star .ultTimerFill{background:linear-gradient(90deg,#00e6ff,#ffee66)}
#comboDisp{position:absolute;top:62px;right:12px;color:#ff8800;font-size:20px;font-weight:bold;text-shadow:0 0 18px rgba(255,136,0,.9),0 0 36px rgba(255,136,0,.5);opacity:0;transition:all .3s;letter-spacing:2px;background:rgba(40,15,0,.2);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,136,0,.1);border-radius:8px;padding:2px 10px}
#comboDisp.show{opacity:1;animation:comboFlash .5s}
#comboDisp.mul-high{color:#ff4400;text-shadow:0 0 25px rgba(255,68,0,1),0 0 50px rgba(255,68,0,.7),0 0 80px rgba(255,68,0,.4);animation:comboFlashHigh .4s}
#comboDisp.mul-ultra{color:#ff0066;text-shadow:0 0 30px rgba(255,0,102,1),0 0 60px rgba(255,0,102,.8),0 0 100px rgba(255,0,102,.5);animation:comboFlashUltra .3s}
@keyframes comboFlashHigh{0%{transform:scale(1.4)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes comboFlashUltra{0%{transform:scale(1.6);filter:brightness(2)}50%{transform:scale(1.2);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}
#effects{position:absolute;top:85px;left:12px;color:#ffee55;font-size:12px;line-height:2;text-shadow:0 0 10px rgba(255,238,85,.7),0 0 20px rgba(255,238,85,.3);letter-spacing:1px;font-family:'Orbitron','Segoe UI',Arial,sans-serif;background:rgba(30,20,0,.2);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,238,85,.08);border-radius:8px;padding:4px 8px}
#runStats{position:absolute;top:118px;left:12px;color:rgba(210,240,255,.72);font-size:10px;line-height:1.6;letter-spacing:1px;text-shadow:0 0 8px rgba(0,180,255,.35);background:rgba(0,20,50,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(0,180,255,.14);border-radius:8px;padding:5px 7px;min-width:150px;box-shadow:0 4px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(0,180,255,.08)}
#bossHP{position:absolute;top:52px;left:50%;transform:translateX(-50%);width:320px;height:12px;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:6px;display:none;border:1px solid rgba(255,0,0,.4);box-shadow:0 0 15px rgba(255,0,0,.3),0 0 30px rgba(255,0,0,.15),inset 0 0 10px rgba(255,0,0,.15)}
#bossHPFill{height:100%;background:linear-gradient(90deg,#ff0000,#ff4444,#ff0000);border-radius:3px;width:100%;transition:width .2s;position:relative}
#bossHPFill::after{content:'';position:absolute;top:1px;left:2px;right:2px;height:2px;background:rgba(255,255,255,.3);border-radius:1px}
#bossLabel{position:absolute;top:40px;left:50%;transform:translateX(-50%);color:#ff4444;font-size:14px;font-weight:bold;display:none;text-shadow:0 0 12px rgba(255,0,0,.8),0 0 24px rgba(255,0,0,.4);letter-spacing:4px;animation:bossLabelPulse 1s infinite}
@keyframes bossLabelPulse{0%,100%{text-shadow:0 0 12px rgba(255,0,0,.8),0 0 24px rgba(255,0,0,.4)}50%{text-shadow:0 0 18px rgba(255,0,0,1),0 0 36px rgba(255,0,0,.6)}}
#gameOver{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(5,5,16,.92);display:none;flex-direction:column;justify-content:center;align-items:center;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:gameOverIn .5s ease-out}
@keyframes gameOverIn{from{opacity:0}to{opacity:1}}
#gameOver::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,rgba(0,40,80,.2) 0%,transparent 70%);pointer-events:none}
#goTitle{color:#ff3333;font-size:58px;font-weight:bold;text-shadow:0 0 60px rgba(255,0,0,1),0 0 30px rgba(255,200,0,.5),0 0 80px rgba(255,0,0,.6);animation:goPulse 2s infinite;letter-spacing:6px}
@keyframes goPulse{0%,100%{text-shadow:0 0 60px rgba(255,0,0,1),0 0 30px rgba(255,200,0,.5)}50%{text-shadow:0 0 80px rgba(255,0,0,1),0 0 40px rgba(255,200,0,.7),0 0 100px rgba(255,0,0,.8)}}
#goStats{color:#bbd;font-size:14px;margin-top:25px;text-align:center;letter-spacing:1px;background:rgba(0,20,50,.45);border:1px solid rgba(0,180,255,.2);border-radius:16px;padding:20px 30px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 30px rgba(0,80,160,.2),inset 0 1px 0 rgba(0,180,255,.1);min-width:380px;animation:statsSlideIn .6s ease-out .2s both}
@keyframes statsSlideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.statRow{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(0,180,255,.08)}
.statRow:last-child{border-bottom:none}
.statLabel{color:rgba(255,255,255,.45);font-size:12px}
.statVal{color:#00ddff;font-weight:bold;font-size:16px;text-shadow:0 0 8px rgba(0,221,255,.6)}
.ratingBadges{display:flex;justify-content:center;gap:24px;margin-bottom:18px}
.ratingBadge{text-align:center;padding:8px 16px;background:rgba(0,20,50,.5);border:1px solid rgba(0,180,255,.15);border-radius:12px;min-width:90px}
.ratingBadge .rLabel{color:rgba(255,255,255,.5);font-size:10px;letter-spacing:1px;margin-bottom:4px}
.ratingBadge .rVal{font-size:26px;font-weight:bold;animation:ratingPop .6s ease-out}
.rVal.s{color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,.8),0 0 40px rgba(255,215,0,.4)}
.rVal.a{color:#00ddff;text-shadow:0 0 15px rgba(0,221,255,.7)}
.rVal.b{color:#44ff88;text-shadow:0 0 15px rgba(68,255,136,.6)}
.rVal.c{color:#ff8844;text-shadow:0 0 12px rgba(255,136,68,.5)}
.rVal.d{color:#ff4444;text-shadow:0 0 12px rgba(255,68,68,.5)}
@keyframes ratingPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}
.goDivider{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,180,255,.3),transparent);margin:12px 0}
.goldReward{color:#ffd700;font-size:16px;font-weight:bold;text-shadow:0 0 12px rgba(255,215,0,.6);padding:8px 20px;background:rgba(255,200,0,.08);border:1px solid rgba(255,200,0,.2);border-radius:20px;display:inline-block;margin-top:8px;animation:goldShine 2s infinite}
@keyframes goldShine{0%,100%{box-shadow:0 0 10px rgba(255,200,0,.2)}50%{box-shadow:0 0 20px rgba(255,200,0,.4),0 0 40px rgba(255,200,0,.15)}}
#restartBtn{padding:18px 50px;font-size:22px;background:linear-gradient(135deg,#0088ff,#00bbff);color:#fff;border:none;border-radius:16px;cursor:pointer;font-weight:bold;letter-spacing:5px;box-shadow:0 0 35px rgba(0,140,255,.7),0 0 70px rgba(0,140,255,.3),0 4px 15px rgba(0,0,0,.3);transition:all .3s;position:relative;overflow:hidden;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:btnAppear .5s ease-out .4s both}
@keyframes btnAppear{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
#restartBtn:hover{background:linear-gradient(135deg,#0066dd,#0099ee);box-shadow:0 0 60px rgba(0,140,255,1),0 0 100px rgba(0,140,255,.5),0 8px 25px rgba(0,0,0,.3);transform:scale(1.08) translateY(-2px)}
#restartBtn::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(transparent,rgba(255,255,255,.1),transparent);transform:rotate(45deg);animation:btnShine 3s infinite}
#menuBtn{margin-top:14px;padding:14px 50px;font-size:17px;background:rgba(255,255,255,.08);color:#bbc;border:1px solid rgba(0,180,255,.3);border-radius:14px;cursor:pointer;pointer-events:auto;letter-spacing:4px;transition:all .3s;backdrop-filter:blur(4px)}
#menuBtn:hover{background:rgba(0,120,255,.3);color:#fff;box-shadow:0 0 25px rgba(0,120,255,.4);transform:scale(1.05)}
#highScores{background:rgba(0,20,50,.3);border:1px solid rgba(255,215,0,.12);border-radius:12px;padding:12px 20px;margin-top:15px;backdrop-filter:blur(4px)}

/* ===== HOTBAR ===== */
#hotbar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;pointer-events:auto;z-index:5}
.hslot{width:46px;height:46px;background:rgba(0,20,50,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1.5px solid rgba(0,180,255,.3);border-radius:10px;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(0,180,255,.08)}
.hslot:hover{border-color:rgba(0,200,255,.7);background:rgba(0,40,80,.85);box-shadow:0 0 15px rgba(0,180,255,.3),0 4px 12px rgba(0,0,0,.4);transform:translateY(-2px)}
.hslot.empty{opacity:.3;cursor:default}
.hslot .hicon{font-size:18px;line-height:1}
.hslot .hcnt{position:absolute;top:1px;right:3px;font-size:9px;color:#ffd700;font-weight:bold;text-shadow:0 0 4px rgba(0,0,0,.8)}
.hslot .hkey{position:absolute;bottom:1px;font-size:8px;color:rgba(255,255,255,.3)}
#touchControls{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);display:none;gap:8px;pointer-events:auto;z-index:8}
.touchBtn{width:54px;height:50px;border:1px solid rgba(0,220,255,.36);border-radius:8px;background:rgba(0,20,50,.72);color:#dff;font-size:18px;font-weight:bold;box-shadow:0 0 18px rgba(0,150,255,.18),inset 0 0 18px rgba(0,80,160,.18);touch-action:manipulation}
.touchBtn.danger{border-color:rgba(255,90,120,.45);color:#ffccd6;box-shadow:0 0 18px rgba(255,60,100,.18),inset 0 0 18px rgba(120,0,40,.18)}
.touchBtn.power{border-color:rgba(255,215,0,.45);color:#fff0a8;box-shadow:0 0 18px rgba(255,200,0,.2),inset 0 0 18px rgba(120,90,0,.18)}
@media (pointer:coarse),(max-width:760px){
    body{align-items:flex-start;padding-top:0}
    #gc{border-width:1px;border-radius:0}
    #touchControls{display:flex}
    #hotbar{bottom:8px;gap:4px}
    .hslot{width:42px;height:42px;border-radius:8px}
    .hslot .hicon{font-size:16px}
    #runStats{top:112px;font-size:9px;padding:4px 6px;min-width:132px}
    #goStats{min-width:300px;max-width:92%;padding:16px 18px}
    .menuTitle{font-size:36px;letter-spacing:8px;margin-top:24px}
    .menuSub{letter-spacing:6px}
    .modeCard{padding:10px 6px}
    #startBtn{padding:16px 42px;font-size:20px}
    #showcaseBtn{padding:13px 20px}
    
    /* 装备页面移动端适配 */
    .shipCard{padding:10px;gap:8px}
    .shipIcon{width:45px;height:45px}
    .shipName{font-size:12px}
    .shipDesc{font-size:9px}
    .shipStats{gap:6px;margin-top:3px}
    .statLabel{font-size:8px}
    .statBar{height:3px}
    .shipLevelRow{gap:4px;margin-top:4px}
    .shipLevelLabel{font-size:8px}
    .shipLevelPip{width:14px;height:4px}
    .shipUpgradeBtn{padding:4px 8px;font-size:9px}
    
    .whGrid{grid-template-columns:1fr;gap:6px}
    .whItem{padding:8px;gap:6px}
    .whIcon{font-size:22px;width:28px;height:28px}
    .whName{font-size:11px}
    .whDesc{font-size:8px}
    .whCnt{font-size:11px}
    
    .shopItem{padding:8px;gap:6px}
    .shopIcon{font-size:18px;width:28px;height:28px}
    .shopName{font-size:11px}
    .shopDesc{font-size:8px}
    .shopBtn{padding:5px 12px;font-size:10px}
    
    .achGrid{grid-template-columns:1fr;gap:5px}
    .achItem{padding:7px;gap:6px}
    .achIcon{font-size:20px;width:28px;height:28px}
    .achName{font-size:10px}
    .achDesc{font-size:8px}
    .achProgressBar{height:5px}
    
    .skinRow{padding:6px;gap:4px}
    .skinDot{width:16px;height:16px}
    
    .tabs{max-width:100%}
    .tab{padding:7px 0;font-size:10px;letter-spacing:1px}
    
    .goldBar{padding:6px 16px;gap:6px;margin-top:8px}
    .goldBar span{font-size:14px}
    
    .decoLine{width:200px;margin:8px 0}
    
    .shopSep{font-size:9px;margin:8px 0 6px}
    
    .upgPip{width:12px;height:3px}
    
    /* 移动端禁用复杂动画以提升性能 */
    .shipCard::after,
    .shopItem::before,
    .whItem::before,
    .achItem::before,
    .tab::before{display:none}
    
    .shipCard:hover,
    .shopItem:hover,
    .whItem:hover,
    .achItem:hover{transform:none}
    
    /* 移动端简化粒子特效 */
    .equipParticle{display:none}
}
@media (max-width:380px){
    #touchControls{gap:6px}
    .touchBtn{width:48px;height:48px}
    
    /* 超小屏幕额外适配 */
    .shipCard{padding:8px;gap:6px}
    .shipIcon{width:40px;height:40px}
    .shipName{font-size:11px}
    .shipDesc{font-size:8px}
    .shipStats{gap:4px}
    .statLabel{font-size:7px}
    .statBar{height:2px}
    .shipLevelLabel{font-size:7px}
    .shipLevelPip{width:12px;height:3px}
    .shipUpgradeBtn{padding:3px 6px;font-size:8px}
    
    .whGrid{gap:4px}
    .whItem{padding:6px;gap:4px}
    .whIcon{font-size:18px;width:24px;height:24px}
    .whName{font-size:10px}
    .whDesc{font-size:7px}
    .whCnt{font-size:10px}
    
    .shopItem{padding:6px;gap:4px}
    .shopIcon{font-size:16px;width:24px;height:24px}
    .shopName{font-size:10px}
    .shopDesc{font-size:7px}
    .shopBtn{padding:4px 10px;font-size:9px}
    
    .achGrid{gap:4px}
    .achItem{padding:5px;gap:4px}
    .achIcon{font-size:18px;width:24px;height:24px}
    .achName{font-size:9px}
    .achDesc{font-size:7px}
    
    .skinRow{padding:4px;gap:3px}
    .skinDot{width:14px;height:14px}
    
    .tabs{gap:0}
    .tab{padding:5px 0;font-size:9px;letter-spacing:0}
    
    .goldBar{padding:5px 12px;gap:4px;margin-top:6px}
    .goldBar span{font-size:12px}
    
    .decoLine{width:150px;margin:6px 0}
    
    .shopSep{font-size:8px;margin:6px 0 4px}
    
    .upgPip{width:10px;height:2px}
}

/* ===== START SCREEN ===== */
#startScreen{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:10;display:flex;flex-direction:column;align-items:center;overflow-y:auto;overflow-x:hidden}
#startScreen canvas#startBg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
.menuWrap{position:relative;z-index:2;width:100%;padding:0 16px 20px;display:flex;flex-direction:column;align-items:center}
.menuTitle{color:#00ddff;font-size:48px;text-shadow:0 0 60px rgba(0,220,255,1),0 0 30px rgba(0,180,255,1),0 0 80px rgba(0,150,255,.7);letter-spacing:12px;margin-top:35px;animation:titleGlow 3s ease-in-out infinite}
.menuShipBanner{width:200px;height:100px;margin-top:8px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(0,180,255,.6)) drop-shadow(0 0 40px rgba(0,120,255,.3));animation:bannerFloat 3s ease-in-out infinite}
@keyframes bannerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes titleGlow{0%,100%{text-shadow:0 0 50px rgba(0,220,255,.9),0 0 20px rgba(0,180,255,1)}50%{text-shadow:0 0 70px rgba(0,220,255,1),0 0 30px rgba(0,200,255,1),0 0 120px rgba(0,100,255,.7)}}
.menuSub{color:rgba(255,255,255,.5);font-size:12px;letter-spacing:10px;margin-top:6px}
.goldBar{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 24px;background:rgba(255,200,0,.08);border:1px solid rgba(255,200,0,.25);border-radius:25px;backdrop-filter:blur(4px);box-shadow:0 0 20px rgba(255,200,0,.1);transition:all .3s}
.goldBar:hover{border-color:rgba(255,200,0,.5);box-shadow:0 0 30px rgba(255,200,0,.2)}
.goldBar span{color:#ffd700;font-size:16px;font-weight:bold;text-shadow:0 0 10px rgba(255,200,0,.6)}
.goldIcon{font-size:16px}
.decoLine{width:320px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,200,255,.5),transparent);margin:12px 0;position:relative}
.decoLine::before{content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:7px;height:7px;background:#00ddff;border-radius:50%;box-shadow:0 0 15px #00ddff,0 0 30px rgba(0,220,255,.3);animation:decoPulse 2s infinite}
@keyframes decoPulse{0%,100%{box-shadow:0 0 15px #00ddff,0 0 30px rgba(0,220,255,.3)}50%{box-shadow:0 0 20px #00ddff,0 0 40px rgba(0,220,255,.5)}}

/* Tabs */
.tabs{display:flex;gap:0;margin-top:5px;width:100%;max-width:420px}
.tab{flex:1;padding:9px 0;text-align:center;font-size:12px;font-weight:bold;letter-spacing:2px;cursor:pointer;color:rgba(255,255,255,.5);background:rgba(255,255,255,.03);border-bottom:2px solid transparent;transition:all .3s;position:relative}
.tab:hover{color:rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
.tab.active{color:#00ddff;border-bottom-color:#00ddff;background:rgba(0,180,255,.08);text-shadow:0 0 12px rgba(0,200,255,.6)}
.tab.active::after{content:'';position:absolute;bottom:-1px;left:30%;right:30%;height:2px;background:#00ddff;box-shadow:0 0 8px #00ddff;border-radius:1px}
.tabContent{display:none;width:100%;max-width:420px;animation:fadeUp .4s ease-out}
.tabContent.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* Ship selection */
.shipList{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.shipCard{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(0,40,80,.3);border:1px solid rgba(0,180,255,.15);border-radius:12px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.shipCard::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,180,255,.06),transparent);transition:left .5s}
.shipCard:hover{background:rgba(0,60,120,.4);border-color:rgba(0,180,255,.4);transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,120,255,.15)}
.shipCard:hover::before{left:100%}
.shipCard.selected{background:rgba(0,80,160,.3);border-color:rgba(0,200,255,.5);box-shadow:0 0 20px rgba(0,150,255,.25),inset 0 0 20px rgba(0,150,255,.08)}
.shipCard.selected::after{content:'✓';position:absolute;top:8px;right:10px;color:#00ddff;font-size:14px;font-weight:bold;text-shadow:0 0 8px rgba(0,220,255,.6)}
.shipCard.locked{opacity:.45;cursor:not-allowed}
.shipCard.locked::after{content:'🔒';position:absolute;top:6px;right:10px;font-size:14px}
.shipIcon{width:55px;height:55px;flex-shrink:0;border-radius:8px}
.shipInfo{flex:1;min-width:0}
.shipName{color:#eef;font-size:13px;font-weight:bold;letter-spacing:1px}
.shipDesc{color:rgba(255,255,255,.4);font-size:10px;margin-top:2px}
.shipStats{display:flex;gap:8px;margin-top:4px}
.shipLevelRow{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.shipLevelLabel{color:rgba(255,255,255,.34);font-size:9px;font-weight:bold;letter-spacing:1px;white-space:nowrap}
.shipLevelPips{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.shipLevelPip{width:18px;height:5px;border-radius:3px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 4px rgba(0,0,0,.3)}
.shipLevelPip.filled{background:linear-gradient(90deg,#00ddff,#ffee66);box-shadow:0 0 8px rgba(0,220,255,.45)}
.shipUpgradeBtn{margin-left:auto;padding:5px 10px;border:1px solid rgba(255,215,0,.35);border-radius:8px;background:rgba(255,180,0,.12);color:#ffd36a;font-size:10px;font-weight:bold;letter-spacing:1px;cursor:pointer;pointer-events:auto;white-space:nowrap}
.shipUpgradeBtn.nogold{opacity:.35;cursor:not-allowed}
.shipUpgradeBtn.maxed{border-color:rgba(0,220,255,.35);background:rgba(0,180,255,.12);color:#8eeeff;cursor:default}
.stat{flex:1}
.statLabel{color:rgba(255,255,255,.35);font-size:9px;letter-spacing:1px}
.statBar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:2px;overflow:hidden}
.statFill{height:100%;border-radius:2px;transition:width .4s}
.statFill.atk{background:linear-gradient(90deg,#ff4444,#ff8866)}
.statFill.spd{background:linear-gradient(90deg,#44aaff,#88ccff)}
.statFill.def{background:linear-gradient(90deg,#44ff88,#88ffbb)}

/* Warehouse */
.whGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.whItem{display:flex;align-items:center;gap:8px;padding:10px;background:rgba(0,40,80,.25);border:1px solid rgba(0,180,255,.12);border-radius:10px;position:relative;transition:all .3s}
.whItem:hover{background:rgba(0,60,120,.35);border-color:rgba(0,180,255,.3);transform:translateY(-1px)}
.whItem.empty{opacity:.3}
.whIcon{font-size:24px;width:32px;text-align:center}
.whInfo{flex:1}
.whName{color:#eef;font-size:12px;font-weight:bold}
.whDesc{color:rgba(255,255,255,.35);font-size:9px;margin-top:1px}
.whCnt{position:absolute;top:6px;right:8px;color:#ffd700;font-size:13px;font-weight:bold;text-shadow:0 0 6px rgba(0,0,0,.8)}

/* Shop */
.shopList{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.shopItem{display:flex;align-items:center;gap:8px;padding:9px 10px;background:rgba(0,40,80,.2);border:1px solid rgba(0,180,255,.1);border-radius:10px;transition:all .2s}
.shopItem:hover{background:rgba(0,60,120,.3);border-color:rgba(0,180,255,.25)}
.shopIcon{font-size:20px;width:28px;text-align:center}
.shopInfo{flex:1}
.shopName{color:#eef;font-size:12px;font-weight:bold}
.shopDesc{color:rgba(255,255,255,.35);font-size:9px;margin-top:1px}
.shopBtn{padding:6px 16px;font-size:11px;font-weight:bold;background:linear-gradient(135deg,#cc8800,#ffaa00);color:#000;border:none;border-radius:10px;cursor:pointer;letter-spacing:1px;transition:all .25s;white-space:nowrap;position:relative;overflow:hidden}
.shopBtn::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(transparent,rgba(255,255,255,.15),transparent);transform:rotate(45deg);transition:left .4s}
.shopBtn:hover{background:linear-gradient(135deg,#ddaa00,#ffcc33);transform:scale(1.08);box-shadow:0 0 20px rgba(255,170,0,.5)}
.shopBtn:hover::after{left:100%}
.shopBtn.nogold{background:rgba(255,255,255,.05);color:rgba(255,255,255,.2);cursor:not-allowed}
.shopBtn.maxed{background:rgba(0,180,255,.15);color:#00ddff;cursor:default}
.shopSep{display:flex;align-items:center;gap:8px;margin:6px 0 4px;color:rgba(255,255,255,.3);font-size:10px;letter-spacing:2px}
.shopSep::before,.shopSep::after{content:'';flex:1;height:1px;background:rgba(0,180,255,.15)}

/* Upgrade items in shop */
.upgLv{display:flex;gap:3px;margin-top:3px}
.upgPip{width:16px;height:4px;border-radius:2px;background:rgba(255,255,255,.1);transition:all .3s}
.upgPip.filled{background:linear-gradient(90deg,#00aaff,#00ddff);box-shadow:0 0 6px rgba(0,200,255,.5)}

/* Start button */
.startBtnWrap{margin-top:16px;margin-bottom:20px;pointer-events:auto;text-align:center}
.showcaseBadge{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:7px 14px;border:1px solid rgba(0,255,200,.35);border-radius:999px;background:rgba(0,120,100,.12);color:#8fffe8;font-size:10px;font-weight:bold;letter-spacing:2px;box-shadow:0 0 18px rgba(0,255,200,.16)}
.startActions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
#startBtn{padding:18px 65px;font-size:24px;background:linear-gradient(135deg,#0066dd,#00bbff);color:#fff;border:none;border-radius:18px;cursor:pointer;font-weight:bold;letter-spacing:7px;box-shadow:0 0 40px rgba(0,140,255,.7),0 0 80px rgba(0,140,255,.3),0 6px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3);transition:all .3s;position:relative;overflow:hidden;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#startBtn:hover{background:linear-gradient(135deg,#0055cc,#00aaee);box-shadow:0 0 70px rgba(0,140,255,1),0 0 120px rgba(0,140,255,.5),0 8px 30px rgba(0,0,0,.3);transform:scale(1.08) translateY(-3px)}
#startBtn::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(transparent,rgba(255,255,255,.08),transparent);transform:rotate(45deg);animation:btnShine 3s infinite}
#showcaseBtn{padding:14px 24px;font-size:15px;background:rgba(0,255,200,.1);color:#aaffee;border:1px solid rgba(0,255,200,.35);border-radius:14px;cursor:pointer;font-weight:bold;letter-spacing:3px;box-shadow:0 0 24px rgba(0,255,200,.14);transition:all .3s;position:relative;overflow:hidden}
#showcaseBtn:hover{background:rgba(0,255,200,.2);box-shadow:0 0 38px rgba(0,255,200,.28);transform:translateY(-2px)}
#showcaseBtn::after{content:'';position:absolute;top:-50%;left:-60%;width:200%;height:200%;background:linear-gradient(transparent,rgba(255,255,255,.12),transparent);transform:rotate(45deg);animation:btnShine 3.4s infinite}
@keyframes btnShine{0%{transform:translateX(-100%) rotate(45deg)}30%,100%{transform:translateX(100%) rotate(45deg)}}
.startHint{color:rgba(255,255,255,.3);font-size:10px;margin-top:6px;letter-spacing:1px;text-align:center;animation:pulse 2.5s infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:.6}}
/* Achievements */
.achGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;max-height:300px;overflow-y:auto;padding-right:4px}
.achGrid::-webkit-scrollbar{width:4px}
.achGrid::-webkit-scrollbar-thumb{background:rgba(0,180,255,.3);border-radius:2px}
.achItem{display:flex;align-items:center;gap:8px;padding:8px;background:rgba(0,40,80,.2);border:1px solid rgba(0,180,255,.1);border-radius:8px;position:relative;transition:all .3s}
.achItem:hover{background:rgba(0,60,120,.3);border-color:rgba(0,180,255,.2)}
.achItem.locked{opacity:.35;filter:grayscale(.8)}
.achItem.unlocked{border-color:rgba(255,215,0,.3);background:rgba(255,200,0,.05);box-shadow:0 0 12px rgba(255,200,0,.08)}
.achItem.unlocked::after{content:'✓';position:absolute;top:4px;right:6px;color:#ffd700;font-size:12px;font-weight:bold;text-shadow:0 0 6px rgba(255,215,0,.5)}
.achIcon{font-size:22px;width:28px;text-align:center}
.achInfo{flex:1;min-width:0}
.achName{color:#eef;font-size:11px;font-weight:bold}
.achDesc{color:rgba(255,255,255,.35);font-size:9px;margin-top:1px}
.achProgress{color:#00ddff;font-size:10px;margin-top:2px}
.achProgressBar{width:100%;height:6px;background:rgba(0,40,80,.3);border-radius:3px;margin-top:4px;overflow:hidden;border:1px solid rgba(0,180,255,.1)}
.achProgressFill{height:100%;background:linear-gradient(90deg,#00ddff,#00ff88);border-radius:2px;transition:width .5s ease;position:relative}
.achProgressFill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:achProgressShine 2s infinite}
@keyframes achProgressShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.achReward{color:#ffd700;font-size:9px;margin-top:2px;text-shadow:0 0 4px rgba(255,215,0,.3)}

/* ===== HUD PAUSE BUTTON ===== */
#hudPauseBtn{position:absolute;top:12px;right:130px;width:30px;height:30px;border:1px solid rgba(0,180,255,.25);border-radius:6px;background:rgba(0,20,50,.45);color:rgba(170,170,204,.7);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:5;backdrop-filter:blur(2px);pointer-events:auto}
#hudPauseBtn:hover{background:rgba(0,80,160,.5);color:#fff;border-color:rgba(0,200,255,.6);box-shadow:0 0 12px rgba(0,180,255,.3);transform:scale(1.1)}
#hudPauseBtn:active{transform:scale(.95)}
@media (pointer:coarse),(max-width:760px){#hudPauseBtn{display:none}}

/* ===== PAUSE SCREEN ===== */
#pauseScreen{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(3,3,14,.92);display:none;flex-direction:column;justify-content:center;align-items:center;backdrop-filter:blur(12px) saturate(1.2);pointer-events:auto;z-index:15;animation:pauseIn .3s ease-out}
#pauseScreen::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,rgba(0,60,120,.12) 0%,transparent 70%);pointer-events:none}
.pauseGlow{position:absolute;top:50%;left:50%;width:300px;height:300px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(0,180,255,.08) 0%,transparent 70%);pointer-events:none;animation:pauseGlowPulse 3s ease-in-out infinite}
.pauseRing{position:absolute;top:50%;left:50%;width:220px;height:220px;transform:translate(-50%,-55%);border:1px solid rgba(0,180,255,.12);border-radius:50%;pointer-events:none;animation:pauseRingSpin 12s linear infinite}
.pauseRing::after{content:'';position:absolute;top:-2px;left:50%;width:4px;height:4px;background:#00ddff;border-radius:50%;box-shadow:0 0 8px #00ddff}
@keyframes pauseIn{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(12px) saturate(1.2)}}
@keyframes pauseGlowPulse{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes pauseRingSpin{from{transform:translate(-50%,-55%) rotate(0)}to{transform:translate(-50%,-55%) rotate(360deg)}}
#pauseTitle{color:#00ddff;font-size:48px;font-weight:bold;text-shadow:0 0 30px rgba(0,220,255,.8),0 0 60px rgba(0,180,255,.4);margin-bottom:4px;position:relative;z-index:1}
#pauseHint{color:rgba(255,255,255,.4);font-size:12px;letter-spacing:6px;text-transform:uppercase;position:relative;z-index:1}
#pauseStats{display:flex;gap:12px;margin-top:20px;padding:12px 16px;background:rgba(0,40,80,.25);border:1px solid rgba(0,180,255,.15);border-radius:10px;position:relative;z-index:1}
.pauseStatItem{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px}
.psIcon{font-size:16px}
.psLabel{font-size:9px;color:rgba(255,255,255,.35);letter-spacing:1px}
.psVal{font-size:14px;font-weight:bold;color:#00ddff;text-shadow:0 0 8px rgba(0,220,255,.4)}
#pauseActions{display:flex;flex-direction:column;gap:8px;margin-top:18px;position:relative;z-index:1}
.pauseBtnRow{display:flex;gap:8px}
.pauseBtn{padding:12px 40px;font-size:14px;background:rgba(0,80,160,.15);color:#aac;border:1px solid rgba(0,180,255,.25);border-radius:10px;cursor:pointer;letter-spacing:2px;transition:all .25s;backdrop-filter:blur(4px);position:relative;overflow:hidden}
.pauseBtn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,180,255,.1),transparent);transition:left .5s}
.pauseBtn:hover{background:rgba(0,120,255,.3);color:#fff;border-color:rgba(0,200,255,.5);box-shadow:0 0 20px rgba(0,140,255,.3);transform:translateY(-1px)}
.pauseBtn:hover::before{left:100%}
.pauseBtn:active{transform:translateY(0);box-shadow:0 0 10px rgba(0,140,255,.2)}
.pauseBtn.resume{padding:14px 50px;font-size:16px;background:rgba(0,200,100,.15);border-color:rgba(0,220,120,.4);color:#88ffaa}
.pauseBtn.resume:hover{background:rgba(0,200,100,.3);border-color:rgba(0,220,120,.6);box-shadow:0 0 25px rgba(0,200,100,.3)}
.pauseBtn.small{flex:1;padding:10px 16px;font-size:12px}
.pauseBtn.menu{background:rgba(80,40,120,.15);border-color:rgba(160,80,255,.25);color:#ccaaff}
.pauseBtn.menu:hover{background:rgba(80,40,120,.3);border-color:rgba(160,80,255,.5);box-shadow:0 0 20px rgba(160,80,255,.3)}
#pauseTip{margin-top:16px;padding:8px 16px;background:rgba(255,200,0,.06);border:1px solid rgba(255,200,0,.12);border-radius:8px;max-width:320px;text-align:center;position:relative;z-index:1}
#pauseTipText{color:rgba(255,220,100,.7);font-size:11px;letter-spacing:1px;line-height:1.5}
#pauseKeyHint{margin-top:12px;color:rgba(255,255,255,.2);font-size:10px;letter-spacing:1px;position:relative;z-index:1}
#pauseKeyHint kbd{display:inline-block;padding:1px 6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:3px;font-family:inherit;font-size:10px;color:rgba(255,255,255,.4)}
@media (pointer:coarse),(max-width:760px){
    #pauseKeyHint{display:none}
    #pauseStats{gap:8px;padding:10px 12px}
    .pauseStatItem{min-width:50px}
    .psVal{font-size:12px}
    .pauseBtn{padding:10px 30px;font-size:13px}
    .pauseBtn.resume{padding:12px 40px;font-size:15px}
}

/* ===== HIGH SCORE ===== */
.hsList{margin-top:8px;width:100%;max-width:320px}
.hsItem{display:flex;justify-content:space-between;padding:5px 12px;font-size:12px;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(0,180,255,.06);transition:all .2s}
.hsItem:first-child{color:#ffd700;font-size:14px;font-weight:bold;text-shadow:0 0 8px rgba(255,215,0,.4)}
.hsItem:nth-child(2){color:#c0c0c0;text-shadow:0 0 6px rgba(192,192,192,.3)}
.hsItem:nth-child(3){color:#cd7f32;text-shadow:0 0 6px rgba(205,127,50,.3)}

/* Mode Cards */
.modeCard{flex:1;padding:12px 8px;background:rgba(0,40,80,.25);border:1.5px solid rgba(0,180,255,.15);border-radius:12px;cursor:pointer;text-align:center;transition:all .3s;position:relative;overflow:hidden}
.modeCard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,180,255,.3),transparent);opacity:0;transition:opacity .3s}
.modeCard:hover{background:rgba(0,60,120,.4);border-color:rgba(0,180,255,.5);transform:translateY(-3px);box-shadow:0 4px 25px rgba(0,150,255,.2)}
.modeCard:hover::before{opacity:1}
.modeCard.active{background:rgba(0,80,160,.35);border-color:rgba(0,220,255,.7);box-shadow:0 0 30px rgba(0,180,255,.3),inset 0 0 20px rgba(0,150,255,.08)}
.modeCard.active::before{opacity:1}
.modeCard.active::after{content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:2px;background:#00ddff;border-radius:1px;box-shadow:0 0 8px #00ddff}
.modeIcon{font-size:22px;margin-bottom:4px}
.modeName{color:#eef;font-size:11px;font-weight:bold;letter-spacing:1px}
.modeDesc{color:rgba(255,255,255,.35);font-size:9px;margin-top:2px}
.modeCard.active .modeName{color:#00ddff;text-shadow:0 0 8px rgba(0,220,255,.5)}
.modeCard.active .modeDesc{color:rgba(0,220,255,.6)}

/* ===== 虚拟摇杆 ===== */
#virtualJoystick{position:absolute;bottom:20px;left:20px;width:140px;height:140px;pointer-events:auto;display:none;z-index:25}
#joystickBase{width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(0,180,255,.12) 0%,rgba(0,100,200,.06) 70%,transparent 100%);border:2px solid rgba(0,180,255,.2);position:absolute;top:0;left:0}
#joystickKnob{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,rgba(0,200,255,.35) 0%,rgba(0,150,255,.15) 70%,transparent 100%);border:2px solid rgba(0,200,255,.4);position:absolute;top:45px;left:45px;transition:box-shadow .15s;box-shadow:0 0 15px rgba(0,200,255,.3)}
#joystickKnob.active{box-shadow:0 0 25px rgba(0,200,255,.6);border-color:rgba(0,220,255,.7)}
#touchButtons{position:absolute;bottom:20px;right:20px;display:none;flex-direction:column;gap:10px;z-index:25;pointer-events:auto}
.touchActionBtn{width:56px;height:56px;border-radius:50%;border:2px solid rgba(0,180,255,.3);background:rgba(0,40,80,.4);color:#00ccff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:all .15s}
.touchActionBtn:active{transform:scale(0.9);background:rgba(0,80,160,.5);box-shadow:0 0 20px rgba(0,180,255,.5)}
.touchActionBtn.ult{border-color:rgba(255,215,0,.4);color:#ffd700;font-size:22px}
.touchActionBtn.bomb{border-color:rgba(255,68,102,.4);color:#ff4466}
/* 手势提示 */
#gestureHint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.15);font-size:10px;letter-spacing:2px;pointer-events:none;display:none;z-index:26;animation:gestureFade 2s ease-out forwards}
@keyframes gestureFade{0%{opacity:1}70%{opacity:1}100%{opacity:0}}

/* ===== Boss Rush模式指示器 ===== */
#bossRushInfo{position:absolute;top:80px;left:50%;transform:translateX(-50%);color:#ff4444;font-size:14px;font-weight:bold;text-shadow:0 0 15px rgba(255,68,68,.8);letter-spacing:3px;display:none;z-index:5}
#bossRushProgress{position:absolute;top:96px;left:50%;transform:translateX(-50%);width:200px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;display:none;z-index:5}
#bossRushProgressFill{height:100%;background:linear-gradient(90deg,#ff4444,#ff8800);border-radius:2px;transition:width .3s}

/* ===== 皮肤系统UI ===== */
.skinRow{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.skinDot{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.15);cursor:pointer;transition:all .2s;pointer-events:auto;position:relative}
.skinDot:hover{transform:scale(1.2);border-color:rgba(255,255,255,.4)}
.skinDot.active{border-color:#fff;box-shadow:0 0 12px rgba(255,255,255,.4)}
.skinDot.active::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:10px;font-weight:bold;text-shadow:0 0 4px rgba(0,0,0,.8)}
.skinDot.locked{opacity:.3;cursor:not-allowed}

/* ===== 每日挑战 ===== */
#dailyChallenge{position:absolute;top:112px;left:50%;transform:translateX(-50%);color:#ffd700;font-size:11px;text-shadow:0 0 10px rgba(255,215,0,.6);letter-spacing:2px;display:none;z-index:5}

/* ===== 装备页面全面优化 ===== */

/* 装备页面容器增强 */
.tabContent.active{
    animation:tabContentIn .5s cubic-bezier(.23,1,.32,1);
    position:relative;
}
@keyframes tabContentIn{
    from{opacity:0;transform:translateY(20px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

/* 机库页面增强 - 战机卡片 */
.shipCard{
    position:relative;
    background:linear-gradient(135deg,rgba(0,40,80,.4),rgba(0,20,60,.3));
    border:1px solid rgba(0,180,255,.2);
    backdrop-filter:blur(8px);
    overflow:hidden;
}
.shipCard::after{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(0,180,255,.08),transparent);
    transition:left .6s ease;
}
.shipCard:hover{
    transform:translateY(-3px) scale(1.01);
    box-shadow:0 8px 32px rgba(0,120,255,.25),0 0 0 1px rgba(0,200,255,.3);
    border-color:rgba(0,200,255,.5);
}
.shipCard:hover::after{
    left:100%;
}
.shipCard.selected{
    background:linear-gradient(135deg,rgba(0,80,160,.4),rgba(0,40,120,.3));
    border-color:rgba(0,220,255,.6);
    box-shadow:0 0 30px rgba(0,180,255,.3),0 0 60px rgba(0,120,255,.15),inset 0 0 30px rgba(0,150,255,.1);
    animation:selectedPulse 2s ease-in-out infinite;
}
@keyframes selectedPulse{
    0%,100%{box-shadow:0 0 30px rgba(0,180,255,.3),0 0 60px rgba(0,120,255,.15),inset 0 0 30px rgba(0,150,255,.1)}
    50%{box-shadow:0 0 40px rgba(0,180,255,.4),0 0 80px rgba(0,120,255,.2),inset 0 0 40px rgba(0,150,255,.15)}
}
.shipCard.selected .shipIcon{
    animation:selectedIconGlow 2s ease-in-out infinite;
}
@keyframes selectedIconGlow{
    0%,100%{filter:drop-shadow(0 0 10px rgba(0,200,255,.5))}
    50%{filter:drop-shadow(0 0 20px rgba(0,200,255,.8))}
}
.shipCard.locked{
    background:linear-gradient(135deg,rgba(20,20,40,.4),rgba(10,10,30,.3));
    border-color:rgba(100,100,150,.15);
}
.shipCard.locked .shipIcon{
    filter:grayscale(.8) brightness(.5);
}

/* 战机图标增强 */
.shipIcon{
    position:relative;
    border:2px solid rgba(0,180,255,.2);
    box-shadow:0 0 15px rgba(0,120,255,.2);
    transition:all .3s ease;
}
.shipIcon:hover{
    transform:scale(1.05);
    box-shadow:0 0 25px rgba(0,180,255,.4);
}

/* 战机属性条增强 */
.statBar{
    position:relative;
    height:6px;
    background:rgba(255,255,255,.05);
    border-radius:3px;
    overflow:visible;
}
.statFill{
    position:relative;
    height:100%;
    border-radius:3px;
    box-shadow:0 0 8px rgba(0,180,255,.3);
}
.statFill::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
    animation:statShimmer 2s ease-in-out infinite;
}
@keyframes statShimmer{
    0%{transform:translateX(-100%)}
    100%{transform:translateX(100%)}
}

/* 等级条增强 */
.shipLevelPip{
    position:relative;
    transition:all .4s cubic-bezier(.34,1.56,.64,1);
}
.shipLevelPip.filled{
    animation:levelPipFill .5s ease-out;
}
@keyframes levelPipFill{
    0%{transform:scale(0);opacity:0}
    50%{transform:scale(1.3)}
    100%{transform:scale(1);opacity:1}
}

/* 升级按钮增强 */
.shipUpgradeBtn{
    position:relative;
    overflow:hidden;
    transition:all .3s ease;
}
.shipUpgradeBtn::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    background:rgba(255,215,0,.2);
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:width .4s ease,height .4s ease;
}
.shipUpgradeBtn:hover::before{
    width:200%;
    height:200%;
}
.shipUpgradeBtn:active{
    transform:scale(.95);
}

/* 皮肤选择增强 */
.skinRow{
    position:relative;
    padding:8px;
    background:rgba(0,20,40,.3);
    border-radius:12px;
    border:1px solid rgba(0,180,255,.1);
}
.skinDot{
    position:relative;
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 0 8px rgba(0,0,0,.3);
}
.skinDot:hover{
    transform:scale(1.3) rotate(10deg);
    box-shadow:0 0 15px rgba(0,180,255,.4);
}
.skinDot.active{
    animation:skinDotActive 1.5s ease-in-out infinite;
}
@keyframes skinDotActive{
    0%,100%{box-shadow:0 0 12px rgba(255,255,255,.4),0 0 24px rgba(0,180,255,.3)}
    50%{box-shadow:0 0 18px rgba(255,255,255,.6),0 0 36px rgba(0,180,255,.4)}
}
.skinDot.locked{
    position:relative;
    overflow:hidden;
}
.skinDot.locked::before{
    content:'🔒';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:8px;
    opacity:.6;
}

/* 商店页面增强 */
.shopList{
    position:relative;
}
.shopItem{
    position:relative;
    background:linear-gradient(135deg,rgba(0,40,80,.3),rgba(0,20,60,.2));
    border:1px solid rgba(0,180,255,.15);
    backdrop-filter:blur(6px);
    overflow:hidden;
    transition:all .3s ease;
}
.shopItem::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,215,0,.05),transparent);
    transition:left .5s ease;
}
.shopItem:hover{
    transform:translateY(-2px) scale(1.01);
    box-shadow:0 8px 24px rgba(0,120,255,.2);
    border-color:rgba(0,200,255,.3);
}
.shopItem:hover::before{
    left:100%;
}

/* 商店图标增强 */
.shopIcon{
    font-size:24px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,40,80,.4);
    border-radius:10px;
    border:1px solid rgba(0,180,255,.2);
    box-shadow:0 0 12px rgba(0,120,255,.15);
    transition:all .3s ease;
}
.shopItem:hover .shopIcon{
    transform:scale(1.1) rotate(5deg);
    box-shadow:0 0 20px rgba(0,180,255,.3);
}

/* 购买按钮增强 */
.shopBtn{
    position:relative;
    overflow:hidden;
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 4px 15px rgba(255,170,0,.3);
}
.shopBtn::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    background:rgba(255,255,255,.2);
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:width .3s ease,height .3s ease;
}
.shopBtn:hover{
    transform:scale(1.1);
    box-shadow:0 6px 25px rgba(255,170,0,.5);
}
.shopBtn:hover::before{
    width:300%;
    height:300%;
}
.shopBtn:active{
    transform:scale(.95);
}
.shopBtn.nogold{
    box-shadow:none;
    position:relative;
}
.shopBtn.nogold::after{
    content:'余额不足';
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
    font-size:9px;
    color:rgba(255,100,100,.8);
    white-space:nowrap;
    opacity:0;
    transition:opacity .3s ease;
}
.shopBtn.nogold:hover::after{
    opacity:1;
}

/* 购买成功特效 */
.purchaseSuccess{
    animation:purchaseSuccessAnim .6s ease-out;
}
@keyframes purchaseSuccessAnim{
    0%{transform:scale(1)}
    20%{transform:scale(1.05)}
    40%{transform:scale(.98)}
    60%{transform:scale(1.02)}
    80%{transform:scale(.99)}
    100%{transform:scale(1)}
}

/* 金币减少特效 */
.goldDecrease{
    animation:goldDecreaseAnim .5s ease-out;
}
@keyframes goldDecreaseAnim{
    0%{color:#ffd700;text-shadow:0 0 10px rgba(255,215,0,.6)}
    50%{color:#ff8800;text-shadow:0 0 20px rgba(255,136,0,.8)}
    100%{color:#ffd700;text-shadow:0 0 10px rgba(255,215,0,.6)}
}

/* 升级成功特效 */
.upgradeSuccess{
    animation:upgradeSuccessAnim .8s ease-out;
}
@keyframes upgradeSuccessAnim{
    0%{transform:scale(1);box-shadow:0 0 0 rgba(0,220,255,0)}
    30%{transform:scale(1.02);box-shadow:0 0 30px rgba(0,220,255,.5)}
    60%{transform:scale(.99)}
    100%{transform:scale(1);box-shadow:0 0 0 rgba(0,220,255,0)}
}

/* 仓库页面增强 */
.whGrid{
    position:relative;
}
.whItem{
    position:relative;
    background:linear-gradient(135deg,rgba(0,40,80,.3),rgba(0,20,60,.2));
    border:1px solid rgba(0,180,255,.15);
    backdrop-filter:blur(6px);
    overflow:hidden;
    transition:all .3s ease;
}
.whItem::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(0,180,255,.06),transparent);
    transition:left .5s ease;
}
.whItem:hover{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 8px 24px rgba(0,120,255,.2);
    border-color:rgba(0,200,255,.3);
}
.whItem:hover::before{
    left:100%;
}
.whItem.empty{
    opacity:.25;
    background:linear-gradient(135deg,rgba(20,20,40,.3),rgba(10,10,30,.2));
}

/* 仓库图标增强 */
.whIcon{
    font-size:28px;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,40,80,.4);
    border-radius:12px;
    border:1px solid rgba(0,180,255,.2);
    box-shadow:0 0 15px rgba(0,120,255,.15);
    transition:all .3s ease;
}
.whItem:hover .whIcon{
    transform:scale(1.1) rotate(5deg);
    box-shadow:0 0 25px rgba(0,180,255,.3);
}

/* 仓库数量显示增强 */
.whCnt{
    position:relative;
    padding:4px 10px;
    background:rgba(255,200,0,.1);
    border-radius:15px;
    border:1px solid rgba(255,200,0,.2);
}

/* 成就页面增强 */
.achGrid{
    position:relative;
}
.achItem{
    position:relative;
    background:linear-gradient(135deg,rgba(0,40,80,.3),rgba(0,20,60,.2));
    border:1px solid rgba(0,180,255,.12);
    backdrop-filter:blur(6px);
    overflow:hidden;
    transition:all .3s ease;
}
.achItem::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,215,0,.05),transparent);
    transition:left .5s ease;
}
.achItem:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,120,255,.15);
}
.achItem:hover::before{
    left:100%;
}
.achItem.unlocked{
    background:linear-gradient(135deg,rgba(255,200,0,.08),rgba(200,150,0,.05));
    border-color:rgba(255,215,0,.3);
    animation:achieveGlow 3s ease-in-out infinite;
}
@keyframes achieveGlow{
    0%,100%{box-shadow:0 0 15px rgba(255,200,0,.1)}
    50%{box-shadow:0 0 25px rgba(255,200,0,.2)}
}

/* 成就图标增强 */
.achIcon{
    font-size:26px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,40,80,.4);
    border-radius:12px;
    border:1px solid rgba(0,180,255,.15);
    transition:all .3s ease;
}
.achItem:hover .achIcon{
    transform:scale(1.1);
}
.achItem.unlocked .achIcon{
    background:rgba(255,200,0,.1);
    border-color:rgba(255,215,0,.3);
}

/* 成就进度条增强 */
.achProgressBar{
    position:relative;
    height:8px;
    background:rgba(0,40,80,.4);
    border-radius:4px;
    overflow:hidden;
    border:1px solid rgba(0,180,255,.15);
}
.achProgressFill{
    position:relative;
    border-radius:4px;
    box-shadow:0 0 10px rgba(0,220,255,.3);
}
.achProgressFill::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    animation:progressShimmer 2s ease-in-out infinite;
}
@keyframes progressShimmer{
    0%{transform:translateX(-100%)}
    100%{transform:translateX(100%)}
}

/* 标签页切换增强 */
.tab{
    position:relative;
    overflow:hidden;
    transition:all .3s ease;
}
.tab::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(0,180,255,.05),transparent);
    transition:left .4s ease;
}
.tab:hover{
    transform:translateY(-1px);
}
.tab:hover::before{
    left:100%;
}
.tab.active{
    position:relative;
}
.tab.active::after{
    content:'';
    position:absolute;
    bottom:-1px;
    left:20%;
    right:20%;
    height:3px;
    background:linear-gradient(90deg,transparent,#00ddff,transparent);
    border-radius:2px;
    box-shadow:0 0 10px rgba(0,220,255,.5);
}

/* 分割线增强 */
.shopSep{
    position:relative;
    padding:10px 0;
    margin:12px 0 8px;
}
.shopSep::before{
    content:'';
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,180,255,.3),transparent);
}
.shopSep span{
    position:relative;
    z-index:1;
    padding:0 12px;
    background:linear-gradient(135deg,rgba(0,20,50,.8),rgba(0,10,30,.6));
    border-radius:15px;
    border:1px solid rgba(0,180,255,.2);
}

/* 金币显示增强 */
.goldBar{
    position:relative;
    overflow:hidden;
    transition:all .4s ease;
}
.goldBar::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,215,0,.1),transparent);
    transition:left .6s ease;
}
.goldBar:hover{
    transform:scale(1.02);
    box-shadow:0 0 30px rgba(255,200,0,.2);
}
.goldBar:hover::before{
    left:100%;
}

/* 升级点数增强 */
.upgPip{
    position:relative;
    transition:all .4s cubic-bezier(.34,1.56,.64,1);
}
.upgPip.filled{
    animation:upgPipFill .5s ease-out;
}
@keyframes upgPipFill{
    0%{transform:scale(0);opacity:0}
    50%{transform:scale(1.4)}
    100%{transform:scale(1);opacity:1}
}

/* 页面切换过渡效果 */
.tabContent{
    transition:all .4s cubic-bezier(.23,1,.32,1);
}

/* 滚动条增强 */
::-webkit-scrollbar{
    width:6px;
    height:6px;
}
::-webkit-scrollbar-track{
    background:rgba(0,20,50,.3);
    border-radius:3px;
}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,rgba(0,180,255,.4),rgba(0,120,255,.2));
    border-radius:3px;
    transition:all .3s ease;
}
::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,rgba(0,200,255,.6),rgba(0,150,255,.4));
}

/* 动态星空背景增强 */
.dynamicStars{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}

/* 装备页面粒子特效容器 */
.equipParticles{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:100;
    overflow:hidden;
}
.equipParticle{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:rgba(0,200,255,.6);
    animation:particleFloat 2s ease-in-out infinite;
}
@keyframes particleFloat{
    0%,100%{transform:translateY(0) scale(1);opacity:.6}
    50%{transform:translateY(-30px) scale(1.5);opacity:1}
}

/* 购买确认弹窗 */
.purchaseConfirm{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    background:linear-gradient(135deg,rgba(0,40,80,.95),rgba(0,20,60,.9));
    border:2px solid rgba(0,180,255,.4);
    border-radius:20px;
    padding:30px;
    backdrop-filter:blur(20px);
    box-shadow:0 0 50px rgba(0,120,255,.3);
    z-index:1000;
    animation:purchaseConfirmIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes purchaseConfirmIn{
    to{transform:translate(-50%,-50%) scale(1)}
}
.purchaseConfirm.out{
    animation:purchaseConfirmOut .3s ease-in forwards;
}
@keyframes purchaseConfirmOut{
    to{transform:translate(-50%,-50%) scale(0);opacity:0}
}

/* 装备对比效果 */
.equipCompare{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,200,255,.05);
    border:2px solid rgba(0,200,255,.3);
    border-radius:inherit;
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
}
.equipCompare.active{
    opacity:1;
    animation:equipComparePulse 1.5s ease-in-out infinite;
}
@keyframes equipComparePulse{
    0%,100%{border-color:rgba(0,200,255,.3)}
    50%{border-color:rgba(0,200,255,.6)}
}

/* 装备品质边框 */
.quality-common{border-color:rgba(200,200,200,.3)}
.quality-uncommon{border-color:rgba(0,200,100,.4)}
.quality-rare{border-color:rgba(0,150,255,.5)}
.quality-epic{border-color:rgba(150,0,255,.5)}
.quality-legendary{border-color:rgba(255,200,0,.6);box-shadow:0 0 20px rgba(255,200,0,.2)}
.quality-mythic{border-color:rgba(255,50,50,.6);box-shadow:0 0 25px rgba(255,50,50,.3)}
.quality-divine{border-color:rgba(255,215,0,.7);box-shadow:0 0 30px rgba(255,215,0,.4)}

/* 装备品质光效 */
.quality-glow-common{box-shadow:0 0 10px rgba(200,200,200,.1)}
.quality-glow-uncommon{box-shadow:0 0 15px rgba(0,200,100,.15)}
.quality-glow-rare{box-shadow:0 0 20px rgba(0,150,255,.2)}
.quality-glow-epic{box-shadow:0 0 25px rgba(150,0,255,.25)}
.quality-glow-legendary{box-shadow:0 0 30px rgba(255,200,0,.3);animation:legendaryGlow 2s ease-in-out infinite}
.quality-glow-mythic{box-shadow:0 0 35px rgba(255,50,50,.35);animation:mythicGlow 2s ease-in-out infinite}
.quality-glow-divine{box-shadow:0 0 40px rgba(255,215,0,.4);animation:divineGlow 2s ease-in-out infinite}

@keyframes legendaryGlow{
    0%,100%{box-shadow:0 0 30px rgba(255,200,0,.3)}
    50%{box-shadow:0 0 40px rgba(255,200,0,.5)}
}
@keyframes mythicGlow{
    0%,100%{box-shadow:0 0 35px rgba(255,50,50,.35)}
    50%{box-shadow:0 0 45px rgba(255,50,50,.55)}
}
@keyframes divineGlow{
    0%,100%{box-shadow:0 0 40px rgba(255,215,0,.4)}
    50%{box-shadow:0 0 50px rgba(255,215,0,.6)}
}

/* 装备品质背景渐变 */
.quality-bg-common{background:linear-gradient(135deg,rgba(200,200,200,.05),rgba(150,150,150,.02))}
.quality-bg-uncommon{background:linear-gradient(135deg,rgba(0,200,100,.08),rgba(0,150,75,.04))}
.quality-bg-rare{background:linear-gradient(135deg,rgba(0,150,255,.1),rgba(0,100,200,.05))}
.quality-bg-epic{background:linear-gradient(135deg,rgba(150,0,255,.12),rgba(100,0,200,.06))}
.quality-bg-legendary{background:linear-gradient(135deg,rgba(255,200,0,.15),rgba(200,150,0,.08))}
.quality-bg-mythic{background:linear-gradient(135deg,rgba(255,50,50,.15),rgba(200,30,30,.08))}
.quality-bg-divine{background:linear-gradient(135deg,rgba(255,215,0,.18),rgba(255,180,0,.1))}

/* 装备品质文字颜色 */
.quality-text-common{color:#c8c8c8}
.quality-text-uncommon{color:#00c864}
.quality-text-rare{color:#0096ff}
.quality-text-epic{color:#9600ff}
.quality-text-legendary{color:#ffc800}
.quality-text-mythic{color:#ff3232}
.quality-text-divine{color:#ffd700}

/* 装备品质边框动画 */
.quality-border-animated{
    position:relative;
    overflow:hidden;
}
.quality-border-animated::before{
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);
    background-size:200% 200%;
    animation:qualityBorderShimmer 3s ease-in-out infinite;
    z-index:-1;
    border-radius:inherit;
}
@keyframes qualityBorderShimmer{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}

/* 装备品质粒子效果 */
.quality-particles{
    position:relative;
    overflow:visible;
}
.quality-particles::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.1) 0%,transparent 50%),
                radial-gradient(circle at 80% 80%,rgba(255,255,255,.05) 0%,transparent 50%);
    pointer-events:none;
    opacity:0;
    transition:opacity 0.3s ease;
}
.quality-particles:hover::after{
    opacity:1;
}

/* 装备品质星星效果 */
.quality-stars{
    position:relative;
}
.quality-stars::before{
    content:'';
    position:absolute;
    top:-5px;
    right:-5px;
    width:20px;
    height:20px;
    background:radial-gradient(circle,rgba(255,215,0,.8) 0%,transparent 70%);
    border-radius:50%;
    opacity:0;
    transition:opacity 0.3s ease;
}
.quality-stars:hover::before{
    opacity:1;
    animation:starTwinkle 1s ease-in-out infinite;
}
@keyframes starTwinkle{
    0%,100%{transform:scale(1);opacity:.8}
    50%{transform:scale(1.3);opacity:1}
}

/* 装备品质光环效果 */
.quality-aura{
    position:relative;
}
.quality-aura::before{
    content:'';
    position:absolute;
    top:-10px;
    left:-10px;
    right:-10px;
    bottom:-10px;
    border-radius:inherit;
    opacity:0;
    transition:opacity 0.3s ease;
    z-index:-1;
}
.quality-aura-legendary::before{
    background:radial-gradient(circle,rgba(255,200,0,.2) 0%,transparent 70%);
}
.quality-aura-mythic::before{
    background:radial-gradient(circle,rgba(255,50,50,.2) 0%,transparent 70%);
}
.quality-aura-divine::before{
    background:radial-gradient(circle,rgba(255,215,0,.25) 0%,transparent 70%);
}
.quality-aura:hover::before{
    opacity:1;
}

/* 装备品质边框光效 */
.quality-border-glow{
    position:relative;
}
.quality-border-glow::after{
    content:'';
    position:absolute;
    top:-1px;
    left:-1px;
    right:-1px;
    bottom:-1px;
    border-radius:inherit;
    opacity:0;
    transition:opacity 0.3s ease;
    pointer-events:none;
}
.quality-border-glow-legendary::after{
    box-shadow:0 0 15px rgba(255,200,0,.4),inset 0 0 15px rgba(255,200,0,.1);
}
.quality-border-glow-mythic::after{
    box-shadow:0 0 15px rgba(255,50,50,.4),inset 0 0 15px rgba(255,50,50,.1);
}
.quality-border-glow-divine::after{
    box-shadow:0 0 15px rgba(255,215,0,.4),inset 0 0 15px rgba(255,215,0,.1);
}
.quality-border-glow:hover::after{
    opacity:1;
}

/* 装备品质渐变边框 */
.quality-gradient-border{
    position:relative;
    border:none !important;
}
.quality-gradient-border::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius:inherit;
    padding:2px;
    background:linear-gradient(135deg,rgba(255,200,0,.6),rgba(255,150,0,.3),rgba(255,200,0,.6));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    transition:opacity 0.3s ease;
}
.quality-gradient-border:hover::before{
    opacity:1;
    animation:gradientBorderRotate 3s linear infinite;
}
@keyframes gradientBorderRotate{
    0%{background:linear-gradient(0deg,rgba(255,200,0,.6),rgba(255,150,0,.3),rgba(255,200,0,.6))}
    100%{background:linear-gradient(360deg,rgba(255,200,0,.6),rgba(255,150,0,.3),rgba(255,200,0,.6))}
}

/* 装备品质图标效果 */
.quality-icon{
    position:relative;
    display:inline-block;
}
.quality-icon::after{
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    border-radius:50%;
    opacity:0;
    transition:opacity 0.3s ease;
}
.quality-icon-legendary::after{
    background:radial-gradient(circle,rgba(255,200,0,.3) 0%,transparent 70%);
}
.quality-icon-mythic::after{
    background:radial-gradient(circle,rgba(255,50,50,.3) 0%,transparent 70%);
}
.quality-icon-divine::after{
    background:radial-gradient(circle,rgba(255,215,0,.35) 0%,transparent 70%);
}
.quality-icon:hover::after{
    opacity:1;
}

/* 装备品质徽章效果 */
.quality-badge{
    position:absolute;
    top:-8px;
    right:-8px;
    width:24px;
    height:24px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:bold;
    color:#fff;
    opacity:0;
    transform:scale(0);
    transition:all 0.3s cubic-bezier(.34,1.56,.64,1);
}
.quality-badge-legendary{
    background:linear-gradient(135deg,#ffc800,#ff9600);
    box-shadow:0 0 10px rgba(255,200,0,.5);
}
.quality-badge-mythic{
    background:linear-gradient(135deg,#ff3232,#cc0000);
    box-shadow:0 0 10px rgba(255,50,50,.5);
}
.quality-badge-divine{
    background:linear-gradient(135deg,#ffd700,#ffb300);
    box-shadow:0 0 10px rgba(255,215,0,.5);
}
.quality-badge:hover{
    opacity:1;
    transform:scale(1);
}

/* 装备品质边框动画效果 */
.quality-border-animated-legendary{
    border-image:linear-gradient(135deg,rgba(255,200,0,.6),rgba(255,150,0,.3),rgba(255,200,0,.6)) 1;
    animation:legendaryBorder 3s linear infinite;
}
@keyframes legendaryBorder{
    0%{border-image:linear-gradient(0deg,rgba(255,200,0,.6),rgba(255,150,0,.3),rgba(255,200,0,.6)) 1}
    100%{border-image:linear-gradient(360deg,rgba(255,200,0,.6),rgba(255,150,0,.3),rgba(255,200,0,.6)) 1}
}

.quality-border-animated-mythic{
    border-image:linear-gradient(135deg,rgba(255,50,50,.6),rgba(200,0,0,.3),rgba(255,50,50,.6)) 1;
    animation:mythicBorder 3s linear infinite;
}
@keyframes mythicBorder{
    0%{border-image:linear-gradient(0deg,rgba(255,50,50,.6),rgba(200,0,0,.3),rgba(255,50,50,.6)) 1}
    100%{border-image:linear-gradient(360deg,rgba(255,50,50,.6),rgba(200,0,0,.3),rgba(255,50,50,.6)) 1}
}

.quality-border-animated-divine{
    border-image:linear-gradient(135deg,rgba(255,215,0,.7),rgba(255,180,0,.4),rgba(255,215,0,.7)) 1;
    animation:divineBorder 3s linear infinite;
}
@keyframes divineBorder{
    0%{border-image:linear-gradient(0deg,rgba(255,215,0,.7),rgba(255,180,0,.4),rgba(255,215,0,.7)) 1}
    100%{border-image:linear-gradient(360deg,rgba(255,215,0,.7),rgba(255,180,0,.4),rgba(255,215,0,.7)) 1}
}

/* 装备品质边框光晕效果 */
.quality-border-glow-animated{
    position:relative;
}
.quality-border-glow-animated::before{
    content:'';
    position:absolute;
    top:-3px;
    left:-3px;
    right:-3px;
    bottom:-3px;
    border-radius:inherit;
    opacity:0;
    transition:opacity 0.3s ease;
    z-index:-1;
}
.quality-border-glow-animated-legendary::before{
    box-shadow:0 0 20px rgba(255,200,0,.4),0 0 40px rgba(255,200,0,.2);
}
.quality-border-glow-animated-mythic::before{
    box-shadow:0 0 20px rgba(255,50,50,.4),0 0 40px rgba(255,50,50,.2);
}
.quality-border-glow-animated-divine::before{
    box-shadow:0 0 20px rgba(255,215,0,.4),0 0 40px rgba(255,215,0,.2);
}
.quality-border-glow-animated:hover::before{
    opacity:1;
    animation:qualityBorderGlowPulse 2s ease-in-out infinite;
}
@keyframes qualityBorderGlowPulse{
    0%,100%{opacity:.7}
    50%{opacity:1}
}

/* 装备品质边框流动效果 */
.quality-border-flow{
    position:relative;
    overflow:hidden;
}
.quality-border-flow::after{
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:conic-gradient(from 0deg,transparent 0%,rgba(255,200,0,.3) 10%,transparent 20%);
    animation:qualityBorderFlow 4s linear infinite;
    z-index:-1;
}
@keyframes qualityBorderFlow{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

/* 装备品质边框旋转光效 */
.quality-border-spin{
    position:relative;
    overflow:hidden;
}
.quality-border-spin::before{
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    background:linear-gradient(90deg,transparent,rgba(255,200,0,.4),transparent);
    background-size:200% 100%;
    animation:qualityBorderSpin 2s linear infinite;
    z-index:-1;
    border-radius:inherit;
}
@keyframes qualityBorderSpin{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}

/* 装备品质边框呼吸效果 */
.quality-border-breathe{
    animation:qualityBorderBreathe 3s ease-in-out infinite;
}
@keyframes qualityBorderBreathe{
    0%,100%{border-color:rgba(255,200,0,.3)}
    50%{border-color:rgba(255,200,0,.6)}
}

/* 装备品质边框闪烁效果 */
.quality-border-blink{
    animation:qualityBorderBlink 2s step-end infinite;
}
@keyframes qualityBorderBlink{
    0%,100%{border-color:rgba(255,200,0,.6)}
    50%{border-color:rgba(255,200,0,.2)}
}

/* 装备品质边框渐变流动效果 */
.quality-border-gradient-flow{
    position:relative;
    border:none !important;
    background:linear-gradient(135deg,rgba(0,40,80,.4),rgba(0,20,60,.3)) padding-box,
                linear-gradient(135deg,rgba(255,200,0,.6),rgba(255,150,0,.3),rgba(255,200,0,.6)) border-box;
    animation:qualityGradientFlow 3s ease infinite;
    background-size:100% 100%,200% 200%;
}
@keyframes qualityGradientFlow{
    0%{background-position:0% 0%,0% 0%}
    50%{background-position:0% 0%,100% 100%}
    100%{background-position:0% 0%,0% 0%}
}

/* 装备品质边框旋转渐变效果 */
.quality-border-rotate-gradient{
    position:relative;
    overflow:hidden;
}
.quality-border-rotate-gradient::before{
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:conic-gradient(from 0deg,rgba(255,200,0,.4),rgba(255,150,0,.2),rgba(255,200,0,.4),rgba(255,150,0,.2),rgba(255,200,0,.4));
    animation:qualityRotateGradient 4s linear infinite;
    z-index:-1;
}
@keyframes qualityRotateGradient{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

/* 装备品质边框脉冲效果 */
.quality-border-pulse{
    animation:qualityBorderPulse 2s ease-in-out infinite;
}
@keyframes qualityBorderPulse{
    0%,100%{box-shadow:0 0 0 rgba(255,200,0,0)}
    50%{box-shadow:0 0 15px rgba(255,200,0,.3)}
}

/* 装备品质边框闪光效果 */
.quality-border-flash{
    position:relative;
    overflow:hidden;
}
.quality-border-flash::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
    animation:qualityBorderFlash 3s ease-in-out infinite;
    z-index:1;
}
@keyframes qualityBorderFlash{
    0%{left:-100%}
    50%{left:100%}
    100%{left:100%}
}

/* 装备品质边框波纹效果 */
.quality-border-ripple{
    position:relative;
    overflow:hidden;
}
.quality-border-ripple::after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,200,0,.2);
    transform:translate(-50%,-50%);
    animation:qualityBorderRipple 2s ease-out infinite;
    z-index:0;
}
@keyframes qualityBorderRipple{
    0%{width:0;height:0;opacity:1}
    100%{width:300%;height:300%;opacity:0}
}

/* 装备品质边框星光效果 */
.quality-border-starlight{
    position:relative;
    overflow:hidden;
}
.quality-border-starlight::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.1) 0%,transparent 50%),
                radial-gradient(circle at 80% 80%,rgba(255,255,255,.05) 0%,transparent 50%),
                radial-gradient(circle at 50% 50%,rgba(255,200,0,.05) 0%,transparent 50%);
    animation:qualityStarlight 4s ease-in-out infinite;
    z-index:1;
    pointer-events:none;
}
@keyframes qualityStarlight{
    0%,100%{opacity:.5}
    50%{opacity:1}
}

/* ===== 装备升级动画特效 ===== */

/* 升级成功闪光效果 */
.upgrade-flash{
    position:relative;
    overflow:hidden;
}
.upgrade-flash::after{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,215,0,.3),transparent);
    animation:upgradeFlash 0.6s ease-out forwards;
    z-index:10;
    pointer-events:none;
}
@keyframes upgradeFlash{
    0%{left:-100%}
    100%{left:100%}
}

/* 升级成功光环效果 */
.upgrade-aura{
    position:relative;
}
.upgrade-aura::before{
    content:'';
    position:absolute;
    top:-20px;
    left:-20px;
    right:-20px;
    bottom:-20px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,215,0,.4) 0%,transparent 70%);
    opacity:0;
    animation:upgradeAura 0.8s ease-out forwards;
    z-index:-1;
}
@keyframes upgradeAura{
    0%{opacity:0;transform:scale(0.5)}
    50%{opacity:1;transform:scale(1.2)}
    100%{opacity:0;transform:scale(1.5)}
}

/* 升级成功粒子爆发 */
.upgrade-particles{
    position:relative;
}
.upgrade-particles::after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:10px;
    height:10px;
    background:rgba(255,215,0,.8);
    border-radius:50%;
    transform:translate(-50%,-50%);
    animation:upgradeParticles 0.6s ease-out forwards;
    z-index:10;
}
@keyframes upgradeParticles{
    0%{transform:translate(-50%,-50%) scale(1);opacity:1}
    100%{transform:translate(-50%,-50%) scale(3);opacity:0}
}

/* 升级成功星星效果 */
.upgrade-stars{
    position:relative;
}
.upgrade-stars::before,
.upgrade-stars::after{
    content:'⭐';
    position:absolute;
    font-size:16px;
    opacity:0;
    animation:upgradeStars 0.8s ease-out forwards;
}
.upgrade-stars::before{
    top:-10px;
    left:-10px;
    animation-delay:0.1s;
}
.upgrade-stars::after{
    bottom:-10px;
    right:-10px;
    animation-delay:0.2s;
}
@keyframes upgradeStars{
    0%{opacity:0;transform:scale(0) rotate(0deg)}
    50%{opacity:1;transform:scale(1.2) rotate(180deg)}
    100%{opacity:0;transform:scale(0.5) rotate(360deg)}
}

/* 升级成功文字效果 */
.upgrade-text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#ffd700;
    font-size:14px;
    font-weight:bold;
    text-shadow:0 0 10px rgba(255,215,0,.5);
    opacity:0;
    animation:upgradeText 1s ease-out forwards;
    z-index:100;
    pointer-events:none;
}
@keyframes upgradeText{
    0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}
    20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
    80%{opacity:1;transform:translate(-50%,-80%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-120%) scale(0.8)}
}

/* 升级成功边框效果 */
.upgrade-border{
    position:relative;
    overflow:hidden;
}
.upgrade-border::before{
    content:'';
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    border-radius:inherit;
    background:linear-gradient(45deg,transparent 40%,rgba(255,215,0,.5) 50%,transparent 60%);
    background-size:200% 200%;
    animation:upgradeBorder 0.8s ease-out forwards;
    z-index:-1;
}
@keyframes upgradeBorder{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}

/* 升级成功震动效果 */
.upgrade-shake{
    animation:upgradeShake 0.5s ease-in-out;
}
@keyframes upgradeShake{
    0%,100%{transform:translateX(0)}
    10%,30%,50%,70%,90%{transform:translateX(-2px)}
    20%,40%,60%,80%{transform:translateX(2px)}
}

/* 升级成功弹跳效果 */
.upgrade-bounce{
    animation:upgradeBounce 0.6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes upgradeBounce{
    0%{transform:scale(1)}
    30%{transform:scale(1.1)}
    50%{transform:scale(0.95)}
    70%{transform:scale(1.05)}
    100%{transform:scale(1)}
}

/* 升级成功旋转效果 */
.upgrade-spin{
    animation:upgradeSpin 0.8s ease-out;
}
@keyframes upgradeSpin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

/* 升级成功发光效果 */
.upgrade-glow{
    animation:upgradeGlow 1s ease-out;
}
@keyframes upgradeGlow{
    0%{box-shadow:0 0 0 rgba(255,215,0,0)}
    50%{box-shadow:0 0 30px rgba(255,215,0,.5)}
    100%{box-shadow:0 0 0 rgba(255,215,0,0)}
}

/* 升级成功脉冲效果 */
.upgrade-pulse{
    animation:upgradePulse 0.8s ease-out;
}
@keyframes upgradePulse{
    0%{transform:scale(1);box-shadow:0 0 0 rgba(255,215,0,0)}
    50%{transform:scale(1.05);box-shadow:0 0 20px rgba(255,215,0,.3)}
    100%{transform:scale(1);box-shadow:0 0 0 rgba(255,215,0,0)}
}

/* 升级成功彩虹效果 */
.upgrade-rainbow{
    animation:upgradeRainbow 1s linear;
}
@keyframes upgradeRainbow{
    0%{filter:hue-rotate(0deg) brightness(1)}
    50%{filter:hue-rotate(180deg) brightness(1.3)}
    100%{filter:hue-rotate(360deg) brightness(1)}
}

/* 升级成功缩放效果 */
.upgrade-scale{
    animation:upgradeScale 0.5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes upgradeScale{
    0%{transform:scale(1)}
    50%{transform:scale(1.15)}
    100%{transform:scale(1)}
}

/* 升级成功抖动效果 */
.upgrade-jitter{
    animation:upgradeJitter 0.3s linear;
}
@keyframes upgradeJitter{
    0%,100%{transform:translate(0,0)}
    10%{transform:translate(-1px,-1px)}
    20%{transform:translate(1px,0)}
    30%{transform:translate(0,1px)}
    40%{transform:translate(-1px,1px)}
    50%{transform:translate(1px,-1px)}
    60%{transform:translate(-1px,0)}
    70%{transform:translate(0,-1px)}
    80%{transform:translate(1px,1px)}
    90%{transform:translate(-1px,-1px)}
}

/* 升级成功摇摆效果 */
.upgrade-wobble{
    animation:upgradeWobble 0.5s ease-in-out;
}
@keyframes upgradeWobble{
    0%{transform:rotate(0deg)}
    15%{transform:rotate(-5deg)}
    30%{transform:rotate(3deg)}
    45%{transform:rotate(-3deg)}
    60%{transform:rotate(2deg)}
    75%{transform:rotate(-1deg)}
    100%{transform:rotate(0deg)}
}

/* 升级成功闪烁效果 */
.upgrade-blink{
    animation:upgradeBlink 0.5s step-end;
}
@keyframes upgradeBlink{
    0%,100%{opacity:1}
    50%{opacity:0}
}

/* 升级成功渐变效果 */
.upgrade-gradient{
    background:linear-gradient(135deg,rgba(0,40,80,.4),rgba(0,20,60,.3));
    animation:upgradeGradient 1s ease-out;
}
@keyframes upgradeGradient{
    0%{background:linear-gradient(135deg,rgba(255,215,0,.3),rgba(255,200,0,.2))}
    100%{background:linear-gradient(135deg,rgba(0,40,80,.4),rgba(0,20,60,.3))}
}

/* 升级成功边框发光效果 */
.upgrade-border-glow{
    animation:upgradeBorderGlow 1s ease-out;
}
@keyframes upgradeBorderGlow{
    0%{border-color:rgba(255,215,0,.6);box-shadow:0 0 20px rgba(255,215,0,.3)}
    100%{border-color:rgba(0,180,255,.2);box-shadow:none}
}

/* 升级成功文字发光效果 */
.upgrade-text-glow{
    animation:upgradeTextGlow 1s ease-out;
}
@keyframes upgradeTextGlow{
    0%{color:#ffd700;text-shadow:0 0 15px rgba(255,215,0,.6)}
    100%{color:#fff;text-shadow:none}
}

/* 升级成功图标效果 */
.upgrade-icon{
    position:relative;
}
.upgrade-icon::after{
    content:'✨';
    position:absolute;
    top:-5px;
    right:-5px;
    font-size:12px;
    opacity:0;
    animation:upgradeIcon 0.8s ease-out forwards;
}
@keyframes upgradeIcon{
    0%{opacity:0;transform:scale(0)}
    50%{opacity:1;transform:scale(1.2)}
    100%{opacity:0;transform:scale(0.5)}
}

/* 升级成功进度条效果 */
.upgrade-progress{
    position:relative;
    overflow:hidden;
}
.upgrade-progress::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,215,0,.2),transparent);
    animation:upgradeProgress 0.8s ease-out forwards;
    z-index:1;
}
@keyframes upgradeProgress{
    0%{transform:translateX(-100%)}
    100%{transform:translateX(100%)}
}

/* 升级成功数字效果 */
.upgrade-number{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#ffd700;
    font-size:20px;
    font-weight:bold;
    text-shadow:0 0 10px rgba(255,215,0,.5);
    opacity:0;
    animation:upgradeNumber 1s ease-out forwards;
    z-index:100;
    pointer-events:none;
}
@keyframes upgradeNumber{
    0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}
    20%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}
    80%{opacity:1;transform:translate(-50%,-80%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-120%) scale(0.8)}
}

/* 升级成功等级效果 */
.upgrade-level{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#00ddff;
    font-size:16px;
    font-weight:bold;
    text-shadow:0 0 10px rgba(0,220,255,.5);
    opacity:0;
    animation:upgradeLevel 1.2s ease-out forwards;
    z-index:100;
    pointer-events:none;
}
@keyframes upgradeLevel{
    0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}
    20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
    80%{opacity:1;transform:translate(-50%,-100%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-150%) scale(0.8)}
}

/* 升级成功属性效果 */
.upgrade-stat{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#00ff88;
    font-size:14px;
    font-weight:bold;
    text-shadow:0 0 10px rgba(0,255,136,.5);
    opacity:0;
    animation:upgradeStat 1.4s ease-out forwards;
    z-index:100;
    pointer-events:none;
}
@keyframes upgradeStat{
    0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}
    20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
    80%{opacity:1;transform:translate(-50%,-120%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-180%) scale(0.8)}
}

/* ===== 额外增强样式 ===== */

/* 金币变化颜色反馈 */
.goldIncrease{
    color:#00ff88 !important;
    text-shadow:0 0 15px rgba(0,255,136,.6) !important;
}
.goldDecrease{
    color:#ff6644 !important;
    text-shadow:0 0 15px rgba(255,102,68,.6) !important;
}

/* 装备页面加载动画 */
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}
.fadeInUp{
    animation:fadeInUp 0.5s ease-out forwards;
}

/* 装备卡片闪光效果 */
@keyframes cardShimmer{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
}
.cardShimmer{
    background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);
    background-size:200% 100%;
    animation:cardShimmer 3s ease-in-out infinite;
}

/* 装备品质闪烁 */
@keyframes qualityPulse{
    0%,100%{opacity:1}
    50%{opacity:.7}
}
.qualityPulse{
    animation:qualityPulse 2s ease-in-out infinite;
}

/* 装备获取闪光 */
@keyframes itemAcquired{
    0%{transform:scale(0) rotate(-180deg);opacity:0}
    50%{transform:scale(1.2) rotate(10deg);opacity:1}
    100%{transform:scale(1) rotate(0deg);opacity:1}
}
.itemAcquired{
    animation:itemAcquired 0.6s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* 装备升级闪光 */
@keyframes upgradeFlash{
    0%{box-shadow:0 0 0 rgba(0,220,255,0)}
    50%{box-shadow:0 0 30px rgba(0,220,255,.5)}
    100%{box-shadow:0 0 0 rgba(0,220,255,0)}
}
.upgradeFlash{
    animation:upgradeFlash 0.8s ease-out;
}

/* 装备购买确认动画 */
@keyframes purchaseConfirmPulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.05)}
    100%{transform:scale(1)}
}
.purchaseConfirmPulse{
    animation:purchaseConfirmPulse 0.3s ease-out;
}

/* 装备页面背景粒子 */
@keyframes bgParticleFloat{
    0%{transform:translateY(0) translateX(0);opacity:0}
    20%{opacity:.6}
    80%{opacity:.6}
    100%{transform:translateY(-100vh) translateX(50px);opacity:0}
}
.bgParticle{
    position:fixed;
    width:3px;
    height:3px;
    background:rgba(0,200,255,.3);
    border-radius:50%;
    pointer-events:none;
    animation:bgParticleFloat 10s linear infinite;
}

/* 装备页面标题闪光 */
@keyframes titleFlash{
    0%,100%{text-shadow:0 0 20px rgba(0,220,255,.5)}
    50%{text-shadow:0 0 40px rgba(0,220,255,.8),0 0 60px rgba(0,180,255,.4)}
}
.titleFlash{
    animation:titleFlash 2s ease-in-out infinite;
}

/* 装备页面按钮涟漪效果 */
@keyframes btnRipple{
    0%{transform:scale(0);opacity:1}
    100%{transform:scale(4);opacity:0}
}
.btnRipple{
    position:absolute;
    top:50%;
    left:50%;
    width:20px;
    height:20px;
    background:rgba(255,255,255,.3);
    border-radius:50%;
    transform:translate(-50%,-50%) scale(0);
    animation:btnRipple 0.6s ease-out;
    pointer-events:none;
}

/* 装备页面悬停提示 */
@keyframes tooltipFadeIn{
    from{opacity:0;transform:translateY(5px)}
    to{opacity:1;transform:translateY(0)}
}
.tooltip{
    position:absolute;
    bottom:100%;
    left:50%;
    transform:translateX(-50%);
    padding:8px 12px;
    background:rgba(0,20,50,.9);
    border:1px solid rgba(0,180,255,.3);
    border-radius:8px;
    color:#eef;
    font-size:11px;
    white-space:nowrap;
    pointer-events:none;
    animation:tooltipFadeIn 0.2s ease-out;
    z-index:100;
}
.tooltip::after{
    content:'';
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top-color:rgba(0,180,255,.3);
}

/* 装备页面进度条动画 */
@keyframes progressBarFill{
    from{width:0}
    to{width:var(--progress)}
}
.progressBar{
    position:relative;
    height:8px;
    background:rgba(0,40,80,.3);
    border-radius:4px;
    overflow:hidden;
}
.progressBarFill{
    height:100%;
    background:linear-gradient(90deg,#00ddff,#00ff88);
    border-radius:4px;
    animation:progressBarFill 1s ease-out forwards;
    position:relative;
}
.progressBarFill::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    animation:progressShimmer 2s ease-in-out infinite;
}

/* 装备页面星级评价 */
@keyframes starPop{
    0%{transform:scale(0) rotate(-180deg)}
    50%{transform:scale(1.3) rotate(10deg)}
    100%{transform:scale(1) rotate(0deg)}
}
.star{
    display:inline-block;
    animation:starPop 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
    color:#ffd700;
    text-shadow:0 0 10px rgba(255,215,0,.5);
}
.star:nth-child(1){animation-delay:0.1s}
.star:nth-child(2){animation-delay:0.2s}
.star:nth-child(3){animation-delay:0.3s}
.star:nth-child(4){animation-delay:0.4s}
.star:nth-child(5){animation-delay:0.5s}

/* 装备页面等级提升动画 */
@keyframes levelUp{
    0%{transform:scale(1);filter:brightness(1)}
    50%{transform:scale(1.1);filter:brightness(1.5)}
    100%{transform:scale(1);filter:brightness(1)}
}
.levelUp{
    animation:levelUp 0.5s ease-out;
}

/* 装备页面成就解锁动画 */
@keyframes achievementUnlock{
    0%{transform:scale(0) rotate(-180deg);opacity:0}
    50%{transform:scale(1.2) rotate(10deg);opacity:1}
    100%{transform:scale(1) rotate(0deg);opacity:1}
}
.achievementUnlock{
    animation:achievementUnlock 0.8s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* 装备页面金币飞入动画 */
@keyframes coinFlyIn{
    0%{transform:translateY(-50px) rotate(0deg);opacity:0}
    50%{transform:translateY(10px) rotate(180deg);opacity:1}
    100%{transform:translateY(0) rotate(360deg);opacity:1}
}
.coinFlyIn{
    animation:coinFlyIn 0.6s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* 装备页面物品掉落动画 */
@keyframes itemDrop{
    0%{transform:translateY(-100px) rotate(0deg);opacity:0}
    60%{transform:translateY(10px) rotate(360deg);opacity:1}
    80%{transform:translateY(-5px) rotate(380deg)}
    100%{transform:translateY(0) rotate(360deg);opacity:1}
}
.itemDrop{
    animation:itemDrop 0.8s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* 装备页面装备对比高亮 */
@keyframes compareHighlight{
    0%,100%{border-color:rgba(0,200,255,.3)}
    50%{border-color:rgba(0,200,255,.8)}
}
.compareHighlight{
    animation:compareHighlight 1s ease-in-out infinite;
}

/* 装备页面装备锁定动画 */
@keyframes lockShake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-5px)}
    75%{transform:translateX(5px)}
}
.lockShake{
    animation:lockShake 0.3s ease-in-out;
}

/* 装备页面装备解锁动画 */
@keyframes unlockGlow{
    0%{box-shadow:0 0 0 rgba(255,215,0,0)}
    50%{box-shadow:0 0 30px rgba(255,215,0,.5)}
    100%{box-shadow:0 0 0 rgba(255,215,0,0)}
}
.unlockGlow{
    animation:unlockGlow 1s ease-out;
}

/* 装备页面装备强化动画 */
@keyframes enhancePulse{
    0%{transform:scale(1);filter:brightness(1)}
    25%{transform:scale(1.02);filter:brightness(1.2)}
    50%{transform:scale(1);filter:brightness(1)}
    75%{transform:scale(1.02);filter:brightness(1.2)}
    100%{transform:scale(1);filter:brightness(1)}
}
.enhancePulse{
    animation:enhancePulse 0.5s ease-in-out;
}

/* 装备页面装备进化动画 */
@keyframes evolve{
    0%{transform:scale(1);filter:brightness(1) hue-rotate(0deg)}
    50%{transform:scale(1.1);filter:brightness(1.5) hue-rotate(180deg)}
    100%{transform:scale(1);filter:brightness(1) hue-rotate(360deg)}
}
.evolve{
    animation:evolve 1s ease-in-out;
}

/* 装备页面装备合成动画 */
@keyframes merge{
    0%{transform:scale(1) rotate(0deg)}
    25%{transform:scale(1.1) rotate(5deg)}
    50%{transform:scale(1) rotate(0deg)}
    75%{transform:scale(1.1) rotate(-5deg)}
    100%{transform:scale(1) rotate(0deg)}
}
.merge{
    animation:merge 0.6s ease-in-out;
}

/* 装备页面装备分解动画 */
@keyframes decompose{
    0%{transform:scale(1);opacity:1;filter:brightness(1)}
    50%{transform:scale(1.1);opacity:.8;filter:brightness(1.5)}
    100%{transform:scale(0);opacity:0;filter:brightness(2)}
}
.decompose{
    animation:decompose 0.5s ease-in forwards;
}

/* ===== 3D透视效果 ===== */
.perspective-container{
    perspective:1000px;
    perspective-origin:center center;
}

.shipCard-3d{
    transform-style:preserve-3d;
    transition:transform 0.3s ease,box-shadow 0.3s ease;
    transform:rotateX(0deg) rotateY(0deg);
}
.shipCard-3d:hover{
    transform:rotateX(5deg) rotateY(-5deg) translateZ(20px);
    box-shadow:0 20px 40px rgba(0,120,255,.3),0 0 0 1px rgba(0,200,255,.3);
}

.shipIcon-3d{
    transform-style:preserve-3d;
    transition:transform 0.3s ease;
    transform:translateZ(0px);
}
.shipCard-3d:hover .shipIcon-3d{
    transform:translateZ(30px) scale(1.05);
}

/* 3D卡片翻转效果 */
.card-flip{
    transform-style:preserve-3d;
    transition:transform 0.6s ease;
}
.card-flip.flipped{
    transform:rotateY(180deg);
}
.card-face{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    transform-style:preserve-3d;
}
.card-back{
    transform:rotateY(180deg);
}

/* 3D倾斜效果 */
.tilt-effect{
    transform-style:preserve-3d;
    transition:transform 0.1s ease;
}
.tilt-effect:hover{
    transform:perspective(1000px) rotateX(10deg) rotateY(10deg);
}

/* 3D浮起效果 */
.float-3d{
    transform-style:preserve-3d;
    transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.float-3d:hover{
    transform:translateZ(30px);
    box-shadow:0 30px 60px rgba(0,120,255,.3);
}

/* 3D卡片堆叠效果 */
.card-stack{
    transform-style:preserve-3d;
    position:relative;
}
.card-stack::before,
.card-stack::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:inherit;
    border-radius:inherit;
    border:inherit;
    transform:translateZ(-10px);
    opacity:0.5;
}
.card-stack::before{
    transform:translateZ(-20px) scale(0.95);
    opacity:0.3;
}
.card-stack::after{
    transform:translateZ(-30px) scale(0.9);
    opacity:0.2;
}

/* 3D旋转展示 */
.rotate-3d{
    transform-style:preserve-3d;
    animation:rotate3d 10s linear infinite;
}
@keyframes rotate3d{
    0%{transform:rotateY(0deg)}
    100%{transform:rotateY(360deg)}
}

/* 3D卡片展开 */
.card-expand-3d{
    transform-style:preserve-3d;
    transition:transform 0.5s ease;
    transform-origin:center center;
}
.card-expand-3d.expanded{
    transform:rotateX(-10deg) scale(1.1);
}

/* 3D光晕效果 */
.glow-3d{
    transform-style:preserve-3d;
    position:relative;
}
.glow-3d::before{
    content:'';
    position:absolute;
    top:-10px;
    left:-10px;
    right:-10px;
    bottom:-10px;
    background:linear-gradient(45deg,transparent 30%,rgba(0,200,255,.1) 50%,transparent 70%);
    border-radius:inherit;
    transform:translateZ(-5px);
    opacity:0;
    transition:opacity 0.3s ease;
}
.glow-3d:hover::before{
    opacity:1;
}

/* 3D阴影效果 */
.shadow-3d{
    transform-style:preserve-3d;
    position:relative;
}
.shadow-3d::after{
    content:'';
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    background:rgba(0,0,0,.3);
    border-radius:inherit;
    transform:translateZ(-20px);
    filter:blur(10px);
    z-index:-1;
}

/* 3D卡片层叠效果 */
.card-layers{
    transform-style:preserve-3d;
    position:relative;
}
.card-layer{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transition:transform 0.3s ease;
}
.card-layer:nth-child(1){transform:translateZ(0px)}
.card-layer:nth-child(2){transform:translateZ(5px)}
.card-layer:nth-child(3){transform:translateZ(10px)}
.card-layers:hover .card-layer:nth-child(1){transform:translateZ(0px) scale(0.95)}
.card-layers:hover .card-layer:nth-child(2){transform:translateZ(10px) scale(0.98)}
.card-layers:hover .card-layer:nth-child(3){transform:translateZ(20px) scale(1.02)}

/* 3D卡片翻转动画 */
@keyframes cardFlip{
    0%{transform:rotateY(0deg)}
    100%{transform:rotateY(360deg)}
}
.card-flip-anim{
    animation:cardFlip 2s ease-in-out;
}

/* 3D卡片倾斜动画 */
@keyframes cardTilt{
    0%{transform:rotateX(0deg) rotateY(0deg)}
    25%{transform:rotateX(10deg) rotateY(-10deg)}
    50%{transform:rotateX(0deg) rotateY(0deg)}
    75%{transform:rotateX(-10deg) rotateY(10deg)}
    100%{transform:rotateX(0deg) rotateY(0deg)}
}
.card-tilt-anim{
    animation:cardTilt 2s ease-in-out;
}

/* 3D卡片弹跳动画 */
@keyframes cardBounce{
    0%{transform:translateZ(0px)}
    50%{transform:translateZ(30px)}
    100%{transform:translateZ(0px)}
}
.card-bounce-anim{
    animation:cardBounce 1s ease-in-out;
}

/* 3D卡片摇摆动画 */
@keyframes cardSwing{
    0%{transform:rotateZ(0deg)}
    25%{transform:rotateZ(5deg)}
    75%{transform:rotateZ(-5deg)}
    100%{transform:rotateZ(0deg)}
}
.card-swing-anim{
    animation:cardSwing 1s ease-in-out;
    transform-origin:top center;
}

/* 3D卡片缩放动画 */
@keyframes cardScale{
    0%{transform:scale(1) translateZ(0px)}
    50%{transform:scale(1.1) translateZ(20px)}
    100%{transform:scale(1) translateZ(0px)}
}
.card-scale-anim{
    animation:cardScale 0.5s ease-in-out;
}

/* 3D卡片发光动画 */
@keyframes cardGlow{
    0%{box-shadow:0 0 0 rgba(0,200,255,0)}
    50%{box-shadow:0 0 30px rgba(0,200,255,.5)}
    100%{box-shadow:0 0 0 rgba(0,200,255,0)}
}
.card-glow-anim{
    animation:cardGlow 1s ease-in-out;
}

/* 3D卡片脉冲动画 */
@keyframes cardPulse{
    0%{transform:scale(1);box-shadow:0 0 0 rgba(0,200,255,0)}
    50%{transform:scale(1.05);box-shadow:0 0 20px rgba(0,200,255,.3)}
    100%{transform:scale(1);box-shadow:0 0 0 rgba(0,200,255,0)}
}
.card-pulse-anim{
    animation:cardPulse 1.5s ease-in-out infinite;
}

/* 3D卡片呼吸动画 */
@keyframes cardBreathe{
    0%{transform:scale(1)}
    50%{transform:scale(1.02)}
    100%{transform:scale(1)}
}
.card-breathe-anim{
    animation:cardBreathe 3s ease-in-out infinite;
}

/* 3D卡片悬浮动画 */
@keyframes cardHover{
    0%{transform:translateY(0px)}
    50%{transform:translateY(-5px)}
    100%{transform:translateY(0px)}
}
.card-hover-anim{
    animation:cardHover 2s ease-in-out infinite;
}

/* 3D卡片旋转动画 */
@keyframes cardSpin{
    0%{transform:rotateY(0deg)}
    100%{transform:rotateY(360deg)}
}
.card-spin-anim{
    animation:cardSpin 2s linear infinite;
}

/* 3D卡片摇晃动画 */
@keyframes cardShake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-5px)}
    75%{transform:translateX(5px)}
}
.card-shake-anim{
    animation:cardShake 0.3s ease-in-out;
}

/* 3D卡片闪烁动画 */
@keyframes cardFlash{
    0%,100%{opacity:1}
    50%{opacity:0.5}
}
.card-flash-anim{
    animation:cardFlash 0.5s ease-in-out;
}

/* 3D卡片渐变动画 */
@keyframes cardGradient{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.card-gradient-anim{
    background-size:200% 200%;
    animation:cardGradient 3s ease infinite;
}

/* 3D卡片彩虹动画 */
@keyframes cardRainbow{
    0%{filter:hue-rotate(0deg)}
    100%{filter:hue-rotate(360deg)}
}
.card-rainbow-anim{
    animation:cardRainbow 5s linear infinite;
}

/* 3D卡片闪烁动画 */
@keyframes cardBlink{
    0%,100%{visibility:visible}
    50%{visibility:hidden}
}
.card-blink-anim{
    animation:cardBlink 1s step-end infinite;
}

/* 3D卡片抖动动画 */
@keyframes cardJitter{
    0%,100%{transform:translate(0,0)}
    10%{transform:translate(-1px,-1px)}
    20%{transform:translate(1px,0)}
    30%{transform:translate(0,1px)}
    40%{transform:translate(-1px,1px)}
    50%{transform:translate(1px,-1px)}
    60%{transform:translate(-1px,0)}
    70%{transform:translate(0,-1px)}
    80%{transform:translate(1px,1px)}
    90%{transform:translate(-1px,-1px)}
}
.card-jitter-anim{
    animation:cardJitter 0.1s linear infinite;
}

/* 3D卡片晃动动画 */
@keyframes cardWobble{
    0%{transform:rotate(0deg)}
    15%{transform:rotate(-5deg)}
    30%{transform:rotate(3deg)}
    45%{transform:rotate(-3deg)}
    60%{transform:rotate(2deg)}
    75%{transform:rotate(-1deg)}
    100%{transform:rotate(0deg)}
}
.card-wobble-anim{
    animation:cardWobble 0.5s ease-in-out;
}

/* 3D卡片摇摆动画 */
@keyframes cardSway{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(2deg)}
    75%{transform:rotate(-2deg)}
}
.card-sway-anim{
    animation:cardSway 2s ease-in-out infinite;
    transform-origin:top center;
}

/* 3D卡片翻转进入动画 */
@keyframes cardFlipIn{
    0%{transform:rotateY(90deg);opacity:0}
    100%{transform:rotateY(0deg);opacity:1}
}
.card-flip-in-anim{
    animation:cardFlipIn 0.5s ease-out forwards;
}

/* 3D卡片翻转退出动画 */
@keyframes cardFlipOut{
    0%{transform:rotateY(0deg);opacity:1}
    100%{transform:rotateY(-90deg);opacity:0}
}
.card-flip-out-anim{
    animation:cardFlipOut 0.5s ease-in forwards;
}

/* 3D卡片缩放进入动画 */
@keyframes cardScaleIn{
    0%{transform:scale(0);opacity:0}
    100%{transform:scale(1);opacity:1}
}
.card-scale-in-anim{
    animation:cardScaleIn 0.3s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* 3D卡片缩放退出动画 */
@keyframes cardScaleOut{
    0%{transform:scale(1);opacity:1}
    100%{transform:scale(0);opacity:0}
}
.card-scale-out-anim{
    animation:cardScaleOut 0.3s ease-in forwards;
}

/* 3D卡片滑动进入动画 */
@keyframes cardSlideIn{
    0%{transform:translateX(100%);opacity:0}
    100%{transform:translateX(0);opacity:1}
}
.card-slide-in-anim{
    animation:cardSlideIn 0.3s ease-out forwards;
}

/* 3D卡片滑动退出动画 */
@keyframes cardSlideOut{
    0%{transform:translateX(0);opacity:1}
    100%{transform:translateX(-100%);opacity:0}
}
.card-slide-out-anim{
    animation:cardSlideOut 0.3s ease-in forwards;
}

/* 3D卡片淡入动画 */
@keyframes cardFadeIn{
    0%{opacity:0}
    100%{opacity:1}
}
.card-fade-in-anim{
    animation:cardFadeIn 0.3s ease-out forwards;
}

/* 3D卡片淡出动画 */
@keyframes cardFadeOut{
    0%{opacity:1}
    100%{opacity:0}
}
.card-fade-out-anim{
    animation:cardFadeOut 0.3s ease-in forwards;
}

/* 3D卡片弹跳进入动画 */
@keyframes cardBounceIn{
    0%{transform:scale(0);opacity:0}
    50%{transform:scale(1.1)}
    100%{transform:scale(1);opacity:1}
}
.card-bounce-in-anim{
    animation:cardBounceIn 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* 3D卡片弹跳退出动画 */
@keyframes cardBounceOut{
    0%{transform:scale(1);opacity:1}
    50%{transform:scale(1.1)}
    100%{transform:scale(0);opacity:0}
}
.card-bounce-out-anim{
    animation:cardBounceOut 0.5s ease-in forwards;
}

/* 3D卡片旋转进入动画 */
@keyframes cardRotateIn{
    0%{transform:rotate(-180deg) scale(0);opacity:0}
    100%{transform:rotate(0deg) scale(1);opacity:1}
}
.card-rotate-in-anim{
    animation:cardRotateIn 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* 3D卡片旋转退出动画 */
@keyframes cardRotateOut{
    0%{transform:rotate(0deg) scale(1);opacity:1}
    100%{transform:rotate(180deg) scale(0);opacity:0}
}
.card-rotate-out-anim{
    animation:cardRotateOut 0.5s ease-in forwards;
}

/* 3D卡片弹性动画 */
@keyframes cardElastic{
    0%{transform:scale(1)}
    30%{transform:scale(1.25)}
    40%{transform:scale(0.75)}
    50%{transform:scale(1.15)}
    65%{transform:scale(0.95)}
    75%{transform:scale(1.05)}
    100%{transform:scale(1)}
}
.card-elastic-anim{
    animation:cardElastic 1s ease-in-out;
}

/* 3D卡片弹簧动画 */
@keyframes cardSpring{
    0%{transform:translateY(0)}
    20%{transform:translateY(-10px)}
    40%{transform:translateY(5px)}
    60%{transform:translateY(-3px)}
    80%{transform:translateY(1px)}
    100%{transform:translateY(0)}
}
.card-spring-anim{
    animation:cardSpring 0.5s ease-out;
}

/* 3D卡片摇摆动画 */
@keyframes cardRock{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(5deg)}
    75%{transform:rotate(-5deg)}
}
.card-rock-anim{
    animation:cardRock 0.5s ease-in-out;
    transform-origin:bottom center;
}

/* 3D卡片翻滚动画 */
@keyframes cardTumble{
    0%{transform:rotate(0deg) translateX(0)}
    25%{transform:rotate(90deg) translateX(20px)}
    50%{transform:rotate(180deg) translateX(0)}
    75%{transform:rotate(270deg) translateX(-20px)}
    100%{transform:rotate(360deg) translateX(0)}
}
.card-tumble-anim{
    animation:cardTumble 2s linear infinite;
}

/* 3D卡片螺旋动画 */
@keyframes cardSpiral{
    0%{transform:rotate(0deg) scale(1)}
    100%{transform:rotate(360deg) scale(0)}
}
.card-spiral-anim{
    animation:cardSpiral 1s linear forwards;
}

/* 3D卡片漩涡动画 */
@keyframes cardVortex{
    0%{transform:rotate(0deg) scale(1);opacity:1}
    100%{transform:rotate(720deg) scale(0);opacity:0}
}
.card-vortex-anim{
    animation:cardVortex 1.5s ease-in forwards;
}

/* 3D卡片爆炸动画 */
@keyframes cardExplode{
    0%{transform:scale(1);opacity:1}
    50%{transform:scale(1.5);opacity:0.5}
    100%{transform:scale(2);opacity:0}
}
.card-explode-anim{
    animation:cardExplode 0.5s ease-out forwards;
}

/* 3D卡片内爆动画 */
@keyframes cardImplode{
    0%{transform:scale(2);opacity:0}
    50%{transform:scale(1.5);opacity:0.5}
    100%{transform:scale(1);opacity:1}
}
.card-implode-anim{
    animation:cardImplode 0.5s ease-out forwards;
}

/* 3D卡片扭曲动画 */
@keyframes cardTwist{
    0%{transform:rotateX(0deg) rotateY(0deg)}
    25%{transform:rotateX(10deg) rotateY(10deg)}
    50%{transform:rotateX(0deg) rotateY(0deg)}
    75%{transform:rotateX(-10deg) rotateY(-10deg)}
    100%{transform:rotateX(0deg) rotateY(0deg)}
}
.card-twist-anim{
    animation:cardTwist 2s ease-in-out infinite;
}

/* 3D卡片波浪动画 */
@keyframes cardWave{
    0%,100%{transform:rotateX(0deg)}
    25%{transform:rotateX(5deg)}
    75%{transform:rotateX(-5deg)}
}
.card-wave-anim{
    animation:cardWave 2s ease-in-out infinite;
}

/* 3D卡片摇摆动画 */
@keyframes cardWaggle{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(3deg)}
    75%{transform:rotate(-3deg)}
}
.card-waggle-anim{
    animation:cardWaggle 0.3s ease-in-out;
}

/* 3D卡片颤抖动画 */
@keyframes cardTremble{
    0%,100%{transform:translate(0,0)}
    25%{transform:translate(-1px,-1px)}
    50%{transform:translate(1px,1px)}
    75%{transform:translate(-1px,1px)}
}
.card-tremble-anim{
    animation:cardTremble 0.1s linear infinite;
}

/* 3D卡片震动动画 */
@keyframes cardQuake{
    0%,100%{transform:translate(0,0) rotate(0deg)}
    10%{transform:translate(-2px,-2px) rotate(-1deg)}
    20%{transform:translate(2px,2px) rotate(1deg)}
    30%{transform:translate(-2px,2px) rotate(-1deg)}
    40%{transform:translate(2px,-2px) rotate(1deg)}
    50%{transform:translate(-2px,-2px) rotate(-1deg)}
    60%{transform:translate(2px,2px) rotate(1deg)}
    70%{transform:translate(-2px,2px) rotate(-1deg)}
    80%{transform:translate(2px,-2px) rotate(1deg)}
    90%{transform:translate(-2px,-2px) rotate(-1deg)}
}
.card-quake-anim{
    animation:cardQuake 0.3s linear;
}

/* 3D卡片地震动画 */
@keyframes cardEarthquake{
    0%,100%{transform:translate(0,0) rotate(0deg)}
    10%{transform:translate(-5px,-5px) rotate(-2deg)}
    20%{transform:translate(5px,5px) rotate(2deg)}
    30%{transform:translate(-5px,5px) rotate(-2deg)}
    40%{transform:translate(5px,-5px) rotate(2deg)}
    50%{transform:translate(-5px,-5px) rotate(-2deg)}
    60%{transform:translate(5px,5px) rotate(2deg)}
    70%{transform:translate(-5px,5px) rotate(-2deg)}
    80%{transform:translate(5px,-5px) rotate(2deg)}
    90%{transform:translate(-5px,-5px) rotate(-2deg)}
}
.card-earthquake-anim{
    animation:cardEarthquake 0.5s linear;
}

/* 3D卡片摇摆动画 */
@keyframes cardWobble2{
    0%,100%{transform:translateX(0) rotate(0deg)}
    15%{transform:translateX(-15px) rotate(-5deg)}
    30%{transform:translateX(10px) rotate(3deg)}
    45%{transform:translateX(-10px) rotate(-3deg)}
    60%{transform:translateX(5px) rotate(2deg)}
    75%{transform:translateX(-5px) rotate(-1deg)}
}
.card-wobble2-anim{
    animation:cardWobble2 1s ease-in-out;
}

/* 3D卡片弹跳动画 */
@keyframes cardBounce2{
    0%,100%{transform:translateY(0)}
    20%{transform:translateY(-10px)}
    40%{transform:translateY(0)}
    60%{transform:translateY(-5px)}
    80%{transform:translateY(0)}
}
.card-bounce2-anim{
    animation:cardBounce2 0.5s ease-in-out;
}

/* 3D卡片脉冲动画 */
@keyframes cardPulse2{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.1)}
}
.card-pulse2-anim{
    animation:cardPulse2 0.5s ease-in-out;
}

/* 3D卡片闪烁动画 */
@keyframes cardBlink2{
    0%,100%{opacity:1}
    50%{opacity:0}
}
.card-blink2-anim{
    animation:cardBlink2 0.2s step-end;
}

/* 3D卡片闪烁动画 */
@keyframes cardFlash2{
    0%,100%{opacity:1}
    50%{opacity:0.5}
}
.card-flash2-anim{
    animation:cardFlash2 0.2s ease-in-out;
}

/* 3D卡片旋转动画 */
@keyframes cardSpin2{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
.card-spin2-anim{
    animation:cardSpin2 1s linear infinite;
}

/* 3D卡片翻转动画 */
@keyframes cardFlip2{
    0%{transform:rotateY(0deg)}
    100%{transform:rotateY(360deg)}
}
.card-flip2-anim{
    animation:cardFlip2 1s linear infinite;
}

/* 3D卡片摇摆动画 */
@keyframes cardSwing2{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(10deg)}
    75%{transform:rotate(-10deg)}
}
.card-swing2-anim{
    animation:cardSwing2 0.5s ease-in-out;
    transform-origin:top center;
}

/* 3D卡片摇摆动画 */
@keyframes cardRock2{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(10deg)}
    75%{transform:rotate(-10deg)}
}
.card-rock2-anim{
    animation:cardRock2 0.5s ease-in-out;
    transform-origin:bottom center;
}

/* 3D卡片摇摆动画 */
@keyframes cardSway2{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(5deg)}
    75%{transform:rotate(-5deg)}
}
.card-sway2-anim{
    animation:cardSway2 0.5s ease-in-out;
    transform-origin:top center;
}

/* 3D卡片摇摆动画 */
@keyframes cardWaggle2{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(5deg)}
    75%{transform:rotate(-5deg)}
}
.card-waggle2-anim{
    animation:cardWaggle2 0.3s ease-in-out;
}

/* 3D卡片摇摆动画 */
@keyframes cardWobble3{
    0%,100%{transform:translateX(0) rotate(0deg)}
    15%{transform:translateX(-10px) rotate(-3deg)}
    30%{transform:translateX(8px) rotate(2deg)}
    45%{transform:translateX(-6px) rotate(-2deg)}
    60%{transform:translateX(4px) rotate(1deg)}
    75%{transform:translateX(-2px) rotate(-1deg)}
}
.card-wobble3-anim{
    animation:cardWobble3 0.8s ease-in-out;
}

/* 3D卡片弹跳动画 */
@keyframes cardBounce3{
    0%,100%{transform:translateY(0)}
    20%{transform:translateY(-8px)}
    40%{transform:translateY(0)}
    60%{transform:translateY(-4px)}
    80%{transform:translateY(0)}
}
.card-bounce3-anim{
    animation:cardBounce3 0.4s ease-in-out;
}

/* 3D卡片脉冲动画 */
@keyframes cardPulse3{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.05)}
}
.card-pulse3-anim{
    animation:cardPulse3 0.3s ease-in-out;
}

/* 3D卡片闪烁动画 */
@keyframes cardBlink3{
    0%,100%{opacity:1}
    50%{opacity:0}
}
.card-blink3-anim{
    animation:cardBlink3 0.15s step-end;
}

/* 3D卡片闪烁动画 */
@keyframes cardFlash3{
    0%,100%{opacity:1}
    50%{opacity:0.5}
}
.card-flash3-anim{
    animation:cardFlash3 0.15s ease-in-out;
}

/* 3D卡片旋转动画 */
@keyframes cardSpin3{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
.card-spin3-anim{
    animation:cardSpin3 0.8s linear infinite;
}

/* 3D卡片翻转动画 */
@keyframes cardFlip3{
    0%{transform:rotateY(0deg)}
    100%{transform:rotateY(360deg)}
}
.card-flip3-anim{
    animation:cardFlip3 0.8s linear infinite;
}

/* 3D卡片摇摆动画 */
@keyframes cardSwing3{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(8deg)}
    75%{transform:rotate(-8deg)}
}
.card-swing3-anim{
    animation:cardSwing3 0.4s ease-in-out;
    transform-origin:top center;
}

/* 3D卡片摇摆动画 */
@keyframes cardRock3{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(8deg)}
    75%{transform:rotate(-8deg)}
}
.card-rock3-anim{
    animation:cardRock3 0.4s ease-in-out;
    transform-origin:bottom center;
}

/* 3D卡片摇摆动画 */
@keyframes cardSway3{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(4deg)}
    75%{transform:rotate(-4deg)}
}
.card-sway3-anim{
    animation:cardSway3 0.4s ease-in-out;
    transform-origin:top center;
}

/* 3D卡片摇摆动画 */
@keyframes cardWaggle3{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(4deg)}
    75%{transform:rotate(-4deg)}
}
.card-waggle3-anim{
    animation:cardWaggle3 0.2s ease-in-out;
}

/* 3D卡片摇摆动画 */
@keyframes cardWobble4{
    0%,100%{transform:translateX(0) rotate(0deg)}
    15%{transform:translateX(-8px) rotate(-2deg)}
    30%{transform:translateX(6px) rotate(1.5deg)}
    45%{transform:translateX(-4px) rotate(-1deg)}
    60%{transform:translateX(2px) rotate(0.5deg)}
    75%{transform:translateX(-1px) rotate(-0.25deg)}
}
.card-wobble4-anim{
    animation:cardWobble4 0.6s ease-in-out;
}

/* 3D卡片弹跳动画 */
@keyframes cardBounce4{
    0%,100%{transform:translateY(0)}
    20%{transform:translateY(-6px)}
    40%{transform:translateY(0)}
    60%{transform:translateY(-3px)}
    80%{transform:translateY(0)}
}
.card-bounce4-anim{
    animation:cardBounce4 0.3s ease-in-out;
}

/* 3D卡片脉冲动画 */
@keyframes cardPulse4{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.03)}
}
.card-pulse4-anim{
    animation:cardPulse4 0.2s ease-in-out;
}

/* 3D卡片闪烁动画 */
@keyframes cardBlink4{
    0%,100%{opacity:1}
    50%{opacity:0}
}
.card-blink4-anim{
    animation:cardBlink4 0.1s step-end;
}

/* 3D卡片闪烁动画 */
@keyframes cardFlash4{
    0%,100%{opacity:1}
    50%{opacity:0.5}
}
.card-flash4-anim{
    animation:cardFlash4 0.1s ease-in-out;
}

/* 3D卡片旋转动画 */
@keyframes cardSpin4{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
.card-spin4-anim{
    animation:cardSpin4 0.6s linear infinite;
}

/* 3D卡片翻转动画 */
@keyframes cardFlip4{
    0%{transform:rotateY(0deg)}
    100%{transform:rotateY(360deg)}
}
.card-flip4-anim{
    animation:cardFlip4 0.6s linear infinite;
}

/* 3D卡片摇摆动画 */
@keyframes cardSwing4{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(6deg)}
    75%{transform:rotate(-6deg)}
}
.card-swing4-anim{
    animation:cardSwing4 0.3s ease-in-out;
    transform-origin:top center;
}

/* 3D卡片摇摆动画 */
@keyframes cardRock4{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(6deg)}
    75%{transform:rotate(-6deg)}
}
.card-rock4-anim{
    animation:cardRock4 0.3s ease-in-out;
    transform-origin:bottom center;
}

/* 3D卡片摇摆动画 */
@keyframes cardSway4{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(3deg)}
    75%{transform:rotate(-3deg)}
}
.card-sway4-anim{
    animation:cardSway4 0.3s ease-in-out;
    transform-origin:top center;
}

/* 3D卡片摇摆动画 */
@keyframes cardWaggle4{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(3deg)}
    75%{transform:rotate(-3deg)}
}
.card-waggle4-anim{
    animation:cardWaggle4 0.15s ease-in-out;
}

/* 3D卡片摇摆动画 */
@keyframes cardWobble5{
    0%,100%{transform:translateX(0) rotate(0deg)}
    15%{transform:translateX(-6px) rotate(-1.5deg)}
    30%{transform:translateX(4px) rotate(1deg)}
    45%{transform:translateX(-3px) rotate(-0.75deg)}
    60%{transform:translateX(2px) rotate(0.5deg)}
    75%{transform:translateX(-1px) rotate(-0.25deg)}
}
.card-wobble5-anim{
    animation:cardWobble5 0.4s ease-in-out;
}

/* 3D卡片弹跳动画 */
@keyframes cardBounce5{
    0%,100%{transform:translateY(0)}
    20%{transform:translateY(-4px)}
    40%{transform:translateY(0)}
    60%{transform:translateY(-2px)}
    80%{transform:translateY(0)}
}
.card-bounce5-anim{
    animation:cardBounce5 0.2s ease-in-out;
}

/* 3D卡片脉冲动画 */
@keyframes cardPulse5{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.02)}
}
.card-pulse5-anim{
    animation:cardPulse5 0.15s ease-in-out;
}

/* 3D卡片闪烁动画 */
@keyframes cardBlink5{
    0%,100%{opacity:1}
    50%{opacity:0}
}
.card-blink5-anim{
    animation:cardBlink5 0.08s step-end;
}

/* 3D卡片闪烁动画 */
@keyframes cardFlash5{
    0%,100%{opacity:1}
    50%{opacity:0.5}
}
.card-flash5-anim{
    animation:cardFlash5 0.08s ease-in-out;
}

/* 3D卡片旋转动画 */
@keyframes cardSpin5{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
.card-spin5-anim{
    animation:cardSpin5 0.4s linear infinite;
}

/* 3D卡片翻转动画 */
@keyframes cardFlip5{
    0%{transform:rotateY(0deg)}
    100%{transform:rotateY(360deg)}
}
.card-flip5-anim{
    animation:cardFlip5 0.4s linear infinite;
}

/* 3D卡片摇摆动画 */
@keyframes cardSwing5{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(4deg)}
    75%{transform:rotate(-4deg)}
}
.card-swing5-anim{
    animation:cardSwing5 0.2s ease-in-out;
    transform-origin:top center;
}

/* 3D卡片摇摆动画 */
@keyframes cardRock5{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(4deg)}
    75%{transform:rotate(-4deg)}
}
.card-rock5-anim{
    animation:cardRock5 0.2s ease-in-out;
    transform-origin:bottom center;
}

/* 3D卡片摇摆动画 */
@keyframes cardSway5{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(2deg)}
    75%{transform:rotate(-2deg)}
}
.card-sway5-anim{
    animation:cardSway5 0.2s ease-in-out;
    transform-origin:top center;
}

/* 3D卡片摇摆动画 */
@keyframes cardWaggle5{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(2deg)}
    75%{transform:rotate(-2deg)}
}
.card-waggle5-anim{
    animation:cardWaggle5 0.1s ease-in-out;
}

/* 装备页面装备重铸动画 */
@keyframes reforge{
    0%{transform:rotate(0deg);filter:hue-rotate(0deg)}
    50%{transform:rotate(180deg);filter:hue-rotate(180deg)}
    100%{transform:rotate(360deg);filter:hue-rotate(360deg)}
}
.reforge{
    animation:reforge 0.8s ease-in-out;
}

/* 装备页面装备附魔动画 */
@keyframes enchant{
    0%{box-shadow:0 0 0 rgba(150,0,255,0)}
    50%{box-shadow:0 0 20px rgba(150,0,255,.5)}
    100%{box-shadow:0 0 10px rgba(150,0,255,.3)}
}
.enchant{
    animation:enchant 0.6s ease-out;
}

/* 装备页面装备精炼动画 */
@keyframes refine{
    0%{transform:scale(1);filter:brightness(1)}
    25%{transform:scale(1.05);filter:brightness(1.3)}
    50%{transform:scale(1);filter:brightness(1)}
    75%{transform:scale(1.05);filter:brightness(1.3)}
    100%{transform:scale(1);filter:brightness(1)}
}
.refine{
    animation:refine 0.4s ease-in-out;
}

/* 装备页面装备突破动画 */
@keyframes breakthrough{
    0%{transform:scale(1);filter:brightness(1) saturate(1)}
    30%{transform:scale(1.1);filter:brightness(1.5) saturate(1.5)}
    60%{transform:scale(1);filter:brightness(1) saturate(1)}
    100%{transform:scale(1);filter:brightness(1) saturate(1)}
}
.breakthrough{
    animation:breakthrough 0.8s ease-out;
}

/* 装备页面装备觉醒动画 */
@keyframes awaken{
    0%{transform:scale(1);filter:brightness(1) hue-rotate(0deg)}
    25%{transform:scale(1.1);filter:brightness(1.5) hue-rotate(90deg)}
    50%{transform:scale(1.2);filter:brightness(2) hue-rotate(180deg)}
    75%{transform:scale(1.1);filter:brightness(1.5) hue-rotate(270deg)}
    100%{transform:scale(1);filter:brightness(1) hue-rotate(360deg)}
}
.awaken{
    animation:awaken 1.2s ease-in-out;
}

/* 装备页面装备超凡动画 */
@keyframes transcend{
    0%{transform:scale(1) rotate(0deg);filter:brightness(1) hue-rotate(0deg)}
    25%{transform:scale(1.1) rotate(90deg);filter:brightness(1.5) hue-rotate(90deg)}
    50%{transform:scale(1.2) rotate(180deg);filter:brightness(2) hue-rotate(180deg)}
    75%{transform:scale(1.1) rotate(270deg);filter:brightness(1.5) hue-rotate(270deg)}
    100%{transform:scale(1) rotate(360deg);filter:brightness(1) hue-rotate(360deg)}
}
.transcend{
    animation:transcend 1.5s ease-in-out;
}

/* ===== 弹幕配置页面升级 ===== */
.bulletCfgWrap{
    max-height:560px;
    overflow-y:auto;
    padding-right:4px;
}
.bulletCfgWrap::-webkit-scrollbar{width:4px}
.bulletCfgWrap::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#00ccff,#00ffcc);border-radius:2px}

/* 弹幕预览画布 */
.bulletPreviewWrap{
    position:relative;
    width:100%;
    height:140px;
    margin:10px 0;
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(0,180,255,.25);
    background:radial-gradient(ellipse at center,rgba(0,30,60,.9) 0%,rgba(0,10,30,.95) 100%);
    box-shadow:inset 0 0 30px rgba(0,100,200,.15),0 0 15px rgba(0,150,255,.1);
}
.bulletPreviewWrap canvas{
    display:block;
    width:100%;
    height:100%;
    border-radius:11px;
}
.bulletPreviewLabel{
    position:absolute;
    top:8px;
    left:10px;
    color:rgba(0,220,255,.6);
    font-size:9px;
    letter-spacing:2px;
    pointer-events:none;
}
.bulletPreviewCombo{
    position:absolute;
    bottom:8px;
    right:10px;
    color:rgba(255,215,0,.7);
    font-size:10px;
    letter-spacing:1px;
    pointer-events:none;
    text-shadow:0 0 8px rgba(255,215,0,.4);
}

/* 弹幕分类标题 */
.bulletCatTitle{
    color:rgba(255,255,255,.5);
    font-size:10px;
    letter-spacing:2px;
    margin:12px 0 6px;
    display:flex;
    align-items:center;
    gap:8px;
}
.bulletCatTitle::after{
    content:'';
    flex:1;
    height:1px;
    background:linear-gradient(90deg,rgba(0,180,255,.3),transparent);
}

/* 弹幕选项卡片 */
.bulletCard{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    margin:4px 0;
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    cursor:pointer;
    transition:all .3s cubic-bezier(.23,1,.32,1);
    position:relative;
    overflow:hidden;
}
.bulletCard::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(0,180,255,.06),transparent);
    transition:left .5s ease;
    pointer-events:none;
}
.bulletCard:hover{
    background:rgba(0,40,80,.4);
    border-color:rgba(0,180,255,.25);
    transform:translateX(3px);
    box-shadow:0 0 12px rgba(0,150,255,.1);
}
.bulletCard:hover::before{
    left:100%;
}
.bulletCard.active{
    background:rgba(0,180,255,.12);
    border-color:rgba(0,220,255,.4);
    box-shadow:0 0 18px rgba(0,180,255,.15),inset 0 0 20px rgba(0,180,255,.05);
}
.bulletCard.active.shape-active{
    border-color:rgba(0,255,136,.4);
    box-shadow:0 0 18px rgba(0,255,136,.15);
}
.bulletCard.active.prop-active{
    border-color:rgba(255,180,0,.4);
    box-shadow:0 0 18px rgba(255,180,0,.15);
}
.bulletCard.locked{
    opacity:.4;
    filter:grayscale(.6);
    cursor:not-allowed;
}
.bulletCard.locked:hover{
    transform:none;
}

/* 卡片图标 */
.bulletCardIcon{
    font-size:22px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:rgba(0,40,80,.4);
    border:1px solid rgba(0,180,255,.15);
    flex-shrink:0;
    transition:all .3s;
}
.bulletCard.active .bulletCardIcon{
    background:rgba(0,180,255,.15);
    border-color:rgba(0,220,255,.3);
    box-shadow:0 0 10px rgba(0,180,255,.2);
}

/* 卡片信息 */
.bulletCardInfo{
    flex:1;
    min-width:0;
}
.bulletCardName{
    color:#fff;
    font-size:12px;
    font-weight:bold;
    transition:color .3s;
}
.bulletCard.active.shape-active .bulletCardName{color:#00ff88}
.bulletCard.active.prop-active .bulletCardName{color:#ffd700}
.bulletCardDesc{
    color:rgba(255,255,255,.45);
    font-size:10px;
    margin-top:2px;
    line-height:1.3;
}
.bulletCardStats{
    display:flex;
    gap:6px;
    margin-top:4px;
}

/* 属性条 */
.statBar{
    display:flex;
    align-items:center;
    gap:3px;
}
.statBarLabel{
    color:rgba(255,255,255,.35);
    font-size:8px;
    width:20px;
}
.statBarTrack{
    width:40px;
    height:3px;
    background:rgba(255,255,255,.08);
    border-radius:2px;
    overflow:hidden;
}
.statBarFill{
    height:100%;
    border-radius:2px;
    transition:width .5s ease;
}
.statBarFill.dps{background:linear-gradient(90deg,#ff4444,#ff8800)}
.statBarFill.coverage{background:linear-gradient(90deg,#44aaff,#00ccff)}
.statBarFill.utility{background:linear-gradient(90deg,#aa44ff,#ff44ff)}

/* 卡片价格/状态 */
.bulletCardCost{
    color:rgba(255,255,255,.4);
    font-size:10px;
    flex-shrink:0;
    text-align:right;
}
.bulletCard.active .bulletCardCost{color:#00ff88}

/* 当前配置摘要 */
.bulletSummary{
    margin-top:12px;
    padding:12px;
    background:linear-gradient(135deg,rgba(0,180,255,.08),rgba(0,255,136,.05));
    border:1px solid rgba(0,180,255,.2);
    border-radius:12px;
    position:relative;
    overflow:hidden;
}
.bulletSummary::before{
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:radial-gradient(circle,rgba(0,180,255,.06) 0%,transparent 60%);
    animation:summaryPulse 4s ease-in-out infinite;
    pointer-events:none;
}
@keyframes summaryPulse{
    0%,100%{opacity:.3;transform:scale(1)}
    50%{opacity:.7;transform:scale(1.05)}
}
.bulletSummaryTitle{
    color:rgba(255,255,255,.5);
    font-size:9px;
    letter-spacing:2px;
    margin-bottom:8px;
}
.bulletSummaryContent{
    display:flex;
    align-items:center;
    gap:12px;
}
.bulletSummaryIcon{
    font-size:28px;
    text-shadow:0 0 15px currentColor;
}
.bulletSummaryText{
    flex:1;
}
.bulletSummaryName{
    color:#00ddff;
    font-size:14px;
    font-weight:bold;
    text-shadow:0 0 10px rgba(0,220,255,.5);
}
.bulletSummaryDesc{
    color:rgba(255,255,255,.5);
    font-size:10px;
    margin-top:2px;
}
.bulletSummaryElem{
    color:#ffd700;
    font-size:11px;
    margin-top:4px;
    text-shadow:0 0 6px rgba(255,215,0,.4);
}

/* 推荐搭配区域 */
.bulletCombos{
    margin-top:10px;
    padding:10px;
    background:rgba(255,200,0,.04);
    border:1px solid rgba(255,200,0,.15);
    border-radius:10px;
}
.bulletCombosTitle{
    color:rgba(255,215,0,.6);
    font-size:9px;
    letter-spacing:2px;
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:6px;
}
.bulletComboItem{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    margin:3px 0;
    background:rgba(0,0,0,.2);
    border:1px solid rgba(255,200,0,.1);
    border-radius:8px;
    cursor:pointer;
    transition:all .3s;
}
.bulletComboItem:hover{
    background:rgba(255,200,0,.08);
    border-color:rgba(255,200,0,.25);
    transform:translateX(2px);
}
.bulletComboIcons{
    font-size:16px;
    display:flex;
    gap:2px;
}
.bulletComboName{
    color:#ffd700;
    font-size:11px;
    font-weight:bold;
}
.bulletComboDesc{
    color:rgba(255,255,255,.4);
    font-size:9px;
}
.bulletComboCost{
    font-size:10px;
    font-weight:bold;
    margin-left:auto;
    white-space:nowrap;
}

/* 弹幕联动效果面板 */
.synergyPanel{
    margin-top:10px;
    padding:10px;
    border-radius:10px;
    border:1px solid;
    animation:synergyPulse 2s infinite;
}
@keyframes synergyPulse{
    0%,100%{box-shadow:0 0 10px rgba(255,255,255,.05)}
    50%{box-shadow:0 0 20px rgba(255,255,255,.1)}
}
.synergyTitle{
    font-size:14px;
    font-weight:bold;
    margin-bottom:6px;
    text-shadow:0 0 10px currentColor;
}
.synergyDesc{
    color:rgba(255,255,255,.6);
    font-size:11px;
    line-height:1.4;
}

/* 弹幕进化面板 */
.evolutionPanel{
    margin-top:10px;
    padding:10px;
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
}
.evolutionTitle{
    color:rgba(255,255,255,.6);
    font-size:9px;
    letter-spacing:2px;
    margin-bottom:8px;
}
.evolutionBar{
    height:6px;
    background:rgba(255,255,255,.1);
    border-radius:3px;
    overflow:hidden;
    margin-bottom:6px;
}
.evolutionProgress{
    height:100%;
    border-radius:3px;
    transition:width .3s;
}
.evolutionInfo{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:10px;
    color:rgba(255,255,255,.5);
}
.evolutionInfo span:first-child{
    font-weight:bold;
    text-shadow:0 0 6px currentColor;
}

/* 弹幕特效动画 */
@keyframes bulletCardShimmer{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
}
.bulletCard.active::after{
    content:'✓';
    position:absolute;
    top:6px;
    right:8px;
    color:#00ff88;
    font-size:11px;
    font-weight:bold;
    text-shadow:0 0 6px rgba(0,255,136,.5);
}
.bulletCard.active.prop-active::after{
    color:#ffd700;
    text-shadow:0 0 6px rgba(255,215,0,.5);
}

/* 属性特殊效果标签 */
.propTag{
    display:inline-block;
    padding:1px 6px;
    border-radius:4px;
    font-size:8px;
    font-weight:bold;
    letter-spacing:1px;
    margin-left:4px;
}
.propTag.chain{background:rgba(170,68,255,.2);color:#cc66ff;border:1px solid rgba(170,68,255,.3)}
.propTag.freeze{background:rgba(0,200,255,.2);color:#88eeff;border:1px solid rgba(0,200,255,.3)}
.propTag.burn{background:rgba(255,100,0,.2);color:#ff8844;border:1px solid rgba(255,100,0,.3)}
.propTag.homing{background:rgba(0,255,200,.2);color:#44ffcc;border:1px solid rgba(0,255,200,.3)}

/* 弹幕卡片入场动画 */
.bulletCard{
    animation:bulletCardIn .4s cubic-bezier(.23,1,.32,1) both;
}
.bulletCard:nth-child(1){animation-delay:.02s}
.bulletCard:nth-child(2){animation-delay:.04s}
.bulletCard:nth-child(3){animation-delay:.06s}
.bulletCard:nth-child(4){animation-delay:.08s}
.bulletCard:nth-child(5){animation-delay:.10s}
.bulletCard:nth-child(6){animation-delay:.12s}
.bulletCard:nth-child(7){animation-delay:.14s}
.bulletCard:nth-child(8){animation-delay:.16s}
.bulletCard:nth-child(9){animation-delay:.18s}
@keyframes bulletCardIn{
    from{opacity:0;transform:translateX(-12px) scale(.97)}
    to{opacity:1;transform:translateX(0) scale(1)}
}

/* 选中卡片脉冲光效 */
.bulletCard.active.shape-active{
    animation:shapeActivePulse 2.5s ease-in-out infinite;
}
@keyframes shapeActivePulse{
    0%,100%{box-shadow:0 0 18px rgba(0,255,136,.15),inset 0 0 12px rgba(0,255,136,.03)}
    50%{box-shadow:0 0 28px rgba(0,255,136,.25),inset 0 0 18px rgba(0,255,136,.06)}
}
.bulletCard.active.prop-active{
    animation:propActivePulse 2.5s ease-in-out infinite;
}
@keyframes propActivePulse{
    0%,100%{box-shadow:0 0 18px rgba(255,180,0,.15),inset 0 0 12px rgba(255,180,0,.03)}
    50%{box-shadow:0 0 28px rgba(255,180,0,.25),inset 0 0 18px rgba(255,180,0,.06)}
}

/* 卡片悬停闪光扫过 */
.bulletCard:hover::before{
    left:100%;
}
.bulletCard::before{
    background:linear-gradient(90deg,transparent,rgba(0,180,255,.08),rgba(0,255,200,.04),transparent);
    transition:left .6s cubic-bezier(.23,1,.32,1);
}

/* 卡片图标脉冲 */
.bulletCard.active .bulletCardIcon{
    animation:cardIconPulse 2s ease-in-out infinite;
}
@keyframes cardIconPulse{
    0%,100%{box-shadow:0 0 10px rgba(0,180,255,.2)}
    50%{box-shadow:0 0 18px rgba(0,180,255,.35)}
}

/* 属性条动画 */
.statBarFill{
    animation:statBarGrow .6s cubic-bezier(.23,1,.32,1) both;
}
@keyframes statBarGrow{
    from{width:0%!important}
}

/* 推荐搭配悬停效果 */
.bulletComboItem{
    position:relative;
    overflow:hidden;
}
.bulletComboItem::before{
    content:'';
    position:absolute;
    top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,215,0,.06),transparent);
    transition:left .5s ease;
    pointer-events:none;
}
.bulletComboItem:hover::before{left:100%}
.bulletComboItem.current{
    background:rgba(255,200,0,.08);
    border-color:rgba(255,200,0,.3);
}

/* 配置摘要呼吸光效 */
.bulletSummary{
    animation:summaryBreathe 3s ease-in-out infinite;
}
@keyframes summaryBreathe{
    0%,100%{box-shadow:0 0 12px rgba(0,180,255,.08)}
    50%{box-shadow:0 0 22px rgba(0,180,255,.15)}
}

/* 预览画布边框光效 */
.bulletPreviewWrap{
    animation:previewBorderGlow 3s ease-in-out infinite;
}
@keyframes previewBorderGlow{
    0%,100%{border-color:rgba(0,180,255,.2);box-shadow:inset 0 0 30px rgba(0,100,200,.1),0 0 12px rgba(0,150,255,.08)}
    50%{border-color:rgba(0,220,255,.35);box-shadow:inset 0 0 40px rgba(0,120,220,.15),0 0 18px rgba(0,180,255,.12)}
}

/* ===== 技能树页面全面升级 ===== */

/* 技能树容器 */
.skillTreeWrap{
    max-height:560px;
    overflow-y:auto;
    padding-right:4px;
    position:relative;
}
.skillTreeWrap::-webkit-scrollbar{width:4px}
.skillTreeWrap::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#00ccff,#00ffcc);border-radius:2px}

/* 技能树标题区域 */
.skillTreeHeader{
    text-align:center;
    margin-bottom:16px;
    position:relative;
    padding:16px 12px;
    background:linear-gradient(135deg,rgba(0,40,80,.4),rgba(0,20,60,.3));
    border:1px solid rgba(0,180,255,.2);
    border-radius:14px;
    overflow:hidden;
}
.skillTreeHeader::before{
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:radial-gradient(circle at center,rgba(0,180,255,.08) 0%,transparent 60%);
    animation:skillHeaderPulse 4s ease-in-out infinite;
    pointer-events:none;
}
@keyframes skillHeaderPulse{
    0%,100%{opacity:.4;transform:scale(1)}
    50%{opacity:.8;transform:scale(1.02)}
}
.skillTreeTitle{
    font-size:18px;
    font-weight:bold;
    letter-spacing:4px;
    position:relative;
}
.skillTreeElem{
    font-size:12px;
    margin-top:4px;
    letter-spacing:1px;
    position:relative;
}

/* 技能树进度条 */
.skillProgressWrap{
    margin:10px auto 0;
    max-width:280px;
    position:relative;
}
.skillProgressBar{
    width:100%;
    height:6px;
    background:rgba(255,255,255,.08);
    border-radius:3px;
    overflow:hidden;
    border:1px solid rgba(0,180,255,.15);
}
.skillProgressFill{
    height:100%;
    border-radius:3px;
    transition:width .6s cubic-bezier(.23,1,.32,1);
    position:relative;
}
.skillProgressFill::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    animation:skillProgressShimmer 2s ease-in-out infinite;
}
@keyframes skillProgressShimmer{
    0%{transform:translateX(-100%)}
    100%{transform:translateX(100%)}
}
.skillProgressText{
    display:flex;
    justify-content:space-between;
    margin-top:4px;
    font-size:9px;
    color:rgba(255,255,255,.4);
    letter-spacing:1px;
}
.skillProgressCount{
    color:#00ddff;
    font-weight:bold;
    text-shadow:0 0 6px rgba(0,220,255,.4);
}

/* 技能分类标题 */
.skillCategoryTitle{
    display:flex;
    align-items:center;
    gap:8px;
    margin:16px 0 10px;
    color:rgba(255,255,255,.5);
    font-size:11px;
    letter-spacing:2px;
}
.skillCategoryTitle::before,
.skillCategoryTitle::after{
    content:'';
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,180,255,.25),transparent);
}
.skillCategoryBadge{
    padding:2px 8px;
    border-radius:10px;
    font-size:9px;
    letter-spacing:1px;
    background:rgba(0,180,255,.1);
    border:1px solid rgba(0,180,255,.2);
    color:#00ddff;
}
.skillCategoryBadge.active-badge{
    background:rgba(255,180,0,.1);
    border-color:rgba(255,180,0,.25);
    color:#ffd700;
}

/* 技能树连接线容器 */
.skillTreeBranch{
    position:relative;
    padding-left:20px;
}
.skillTreeBranch::before{
    content:'';
    position:absolute;
    left:28px;
    top:0;
    bottom:0;
    width:2px;
    background:linear-gradient(180deg,rgba(0,180,255,.3),rgba(0,180,255,.08));
    border-radius:1px;
}

/* 技能节点卡片 */
.skillNode{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 14px;
    margin:6px 0;
    background:rgba(0,0,0,.3);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    position:relative;
    transition:all .35s cubic-bezier(.23,1,.32,1);
    overflow:hidden;
    cursor:default;
}
.skillNode::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(0,180,255,.05),transparent);
    transition:left .5s ease;
    pointer-events:none;
}
.skillNode:hover{
    transform:translateX(4px);
    border-color:rgba(0,180,255,.25);
    box-shadow:0 4px 20px rgba(0,120,255,.15);
}
.skillNode:hover::before{
    left:100%;
}

/* 技能节点 - 连接点 */
.skillNode::after{
    content:'';
    position:absolute;
    left:-20px;
    top:50%;
    transform:translateY(-50%);
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(0,180,255,.2);
    border:2px solid rgba(0,180,255,.3);
    transition:all .3s;
    z-index:1;
}

/* 技能节点 - 已解锁 */
.skillNode.unlocked{
    background:linear-gradient(135deg,rgba(0,180,255,.1),rgba(0,100,200,.06));
    border-color:rgba(0,220,255,.35);
    box-shadow:0 0 20px rgba(0,180,255,.1),inset 0 0 20px rgba(0,180,255,.05);
}
.skillNode.unlocked::after{
    background:#00ddff;
    border-color:#00ffcc;
    box-shadow:0 0 8px rgba(0,220,255,.6);
}

/* 技能节点 - 可解锁 */
.skillNode.canUnlock{
    border-color:rgba(255,215,0,.3);
    animation:skillNodeReady 2s ease-in-out infinite;
}
@keyframes skillNodeReady{
    0%,100%{box-shadow:0 0 0 rgba(255,215,0,0)}
    50%{box-shadow:0 0 15px rgba(255,215,0,.2)}
}
.skillNode.canUnlock::after{
    background:#ffd700;
    border-color:#ffaa00;
    box-shadow:0 0 8px rgba(255,215,0,.6);
    animation:skillDotPulse 1.5s ease-in-out infinite;
}
@keyframes skillDotPulse{
    0%,100%{transform:translateY(-50%) scale(1)}
    50%{transform:translateY(-50%) scale(1.3)}
}

/* 技能节点 - 锁定（前置未满足） */
.skillNode.locked{
    opacity:.45;
    filter:grayscale(.3);
}
.skillNode.locked::after{
    background:rgba(100,100,130,.3);
    border-color:rgba(100,100,130,.4);
}

/* 技能节点 - 主动技能样式 */
.skillNode.active-skill.unlocked{
    background:linear-gradient(135deg,rgba(255,180,0,.1),rgba(200,100,0,.06));
    border-color:rgba(255,200,0,.35);
    box-shadow:0 0 20px rgba(255,180,0,.1),inset 0 0 20px rgba(255,180,0,.05);
}
.skillNode.active-skill.unlocked::after{
    background:#ffd700;
    border-color:#ffaa00;
    box-shadow:0 0 8px rgba(255,215,0,.6);
}

/* 技能图标 */
.skillIcon{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    border-radius:12px;
    background:rgba(0,40,80,.5);
    border:2px solid rgba(0,180,255,.2);
    flex-shrink:0;
    position:relative;
    transition:all .3s;
    z-index:1;
}
.skillNode.unlocked .skillIcon{
    border-color:rgba(0,220,255,.4);
    box-shadow:0 0 15px rgba(0,180,255,.2);
    background:rgba(0,60,120,.5);
}
.skillNode.active-skill.unlocked .skillIcon{
    border-color:rgba(255,200,0,.4);
    box-shadow:0 0 15px rgba(255,180,0,.2);
    background:rgba(80,60,0,.3);
}
.skillNode.canUnlock .skillIcon{
    border-color:rgba(255,215,0,.4);
    animation:skillIconGlow 2s ease-in-out infinite;
}
@keyframes skillIconGlow{
    0%,100%{box-shadow:0 0 8px rgba(255,215,0,.2)}
    50%{box-shadow:0 0 20px rgba(255,215,0,.5)}
}
.skillNode:hover .skillIcon{
    transform:scale(1.1) rotate(5deg);
}

/* 技能图标等级标记 */
.skillTier{
    position:absolute;
    bottom:-4px;
    right:-4px;
    width:16px;
    height:16px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:8px;
    font-weight:bold;
    color:#fff;
    background:linear-gradient(135deg,#0088ff,#00ccff);
    border:1.5px solid rgba(255,255,255,.3);
    box-shadow:0 0 6px rgba(0,180,255,.4);
    z-index:2;
}
.skillTier.tier-1{background:linear-gradient(135deg,#0088ff,#00ccff)}
.skillTier.tier-2{background:linear-gradient(135deg,#aa44ff,#cc66ff)}
.skillTier.tier-3{background:linear-gradient(135deg,#ff6600,#ffaa00)}
.skillTier.tier-4{background:linear-gradient(135deg,#ff0044,#ff4488)}

/* 技能信息区域 */
.skillInfo{
    flex:1;
    min-width:0;
    z-index:1;
}
.skillName{
    font-size:13px;
    font-weight:bold;
    color:#fff;
    letter-spacing:1px;
    transition:color .3s;
}
.skillNode.unlocked .skillName{
    color:#00ff88;
    text-shadow:0 0 8px rgba(0,255,136,.3);
}
.skillNode.active-skill.unlocked .skillName{
    color:#ffd700;
    text-shadow:0 0 8px rgba(255,215,0,.3);
}
.skillNode.canUnlock .skillName{
    color:#ffdd44;
}
.skillDesc{
    font-size:10px;
    color:rgba(255,255,255,.45);
    margin-top:3px;
    line-height:1.4;
}
.skillMeta{
    display:flex;
    gap:8px;
    margin-top:4px;
    flex-wrap:wrap;
}
.skillMetaTag{
    font-size:8px;
    padding:1px 6px;
    border-radius:4px;
    letter-spacing:1px;
}
.skillMetaTag.cd{
    background:rgba(0,200,255,.12);
    color:#00ccff;
    border:1px solid rgba(0,200,255,.2);
}
.skillMetaTag.req{
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.4);
    border:1px solid rgba(255,255,255,.1);
}
.skillMetaTag.unlocked-tag{
    background:rgba(0,255,136,.12);
    color:#00ff88;
    border:1px solid rgba(0,255,136,.25);
}

/* 技能操作区域 */
.skillAction{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
    z-index:1;
    flex-shrink:0;
}
.skillPrice{
    font-size:10px;
    color:rgba(255,255,255,.3);
    display:flex;
    align-items:center;
    gap:3px;
}
.skillPrice .goldIcon{font-size:12px}

/* 技能解锁按钮 */
.skillUnlockBtn{
    padding:6px 14px;
    border:none;
    border-radius:8px;
    font-size:11px;
    font-weight:bold;
    cursor:pointer;
    letter-spacing:1px;
    position:relative;
    overflow:hidden;
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
    color:#fff;
}
.skillUnlockBtn::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    background:rgba(255,255,255,.2);
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:width .3s ease,height .3s ease;
}
.skillUnlockBtn:hover{
    transform:scale(1.08);
    box-shadow:0 4px 20px rgba(0,180,255,.4);
}
.skillUnlockBtn:hover::before{
    width:300%;
    height:300%;
}
.skillUnlockBtn:active{
    transform:scale(.95);
}
.skillUnlockBtn.passive-btn{
    background:linear-gradient(135deg,#0066dd,#00aaff);
    box-shadow:0 3px 12px rgba(0,140,255,.3);
}
.skillUnlockBtn.active-btn{
    background:linear-gradient(135deg,#cc8800,#ffaa00);
    box-shadow:0 3px 12px rgba(255,170,0,.3);
}
.skillUnlockBtn.disabled{
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.2);
    cursor:not-allowed;
    box-shadow:none;
}
.skillUnlockBtn.disabled:hover{
    transform:none;
    box-shadow:none;
}
.skillUnlockBtn.disabled::before{display:none}

/* 技能升级按钮 */
.skillUpgradeBtn{
    padding:6px 14px;
    border:none;
    border-radius:8px;
    font-size:11px;
    font-weight:bold;
    cursor:pointer;
    letter-spacing:1px;
    position:relative;
    overflow:hidden;
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
    color:#fff;
    background:linear-gradient(135deg,#aa44ff,#cc66ff);
    box-shadow:0 3px 12px rgba(170,68,255,.3);
}
.skillUpgradeBtn::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    background:rgba(255,255,255,.2);
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:width .3s ease,height .3s ease;
}
.skillUpgradeBtn:hover{
    transform:scale(1.08);
    box-shadow:0 4px 20px rgba(170,68,255,.4);
}
.skillUpgradeBtn:hover::before{
    width:300%;
    height:300%;
}
.skillUpgradeBtn:active{
    transform:scale(.95);
}
.skillUpgradeBtn.disabled{
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.2);
    cursor:not-allowed;
    box-shadow:none;
}
.skillUpgradeBtn.disabled:hover{
    transform:none;
    box-shadow:none;
}
.skillUpgradeBtn.disabled::before{display:none}

/* 技能等级徽章 */
.skillLevelBadge{
    position:absolute;
    top:-4px;
    right:-4px;
    padding:1px 5px;
    border-radius:6px;
    font-size:8px;
    font-weight:bold;
    color:#fff;
    text-shadow:0 0 4px rgba(0,0,0,.5);
    box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* 技能最大等级徽章 */
.skillMaxBadge{
    padding:6px 14px;
    border-radius:8px;
    font-size:11px;
    font-weight:bold;
    letter-spacing:1px;
    color:#ffaa00;
    background:rgba(255,170,0,.1);
    border:1px solid rgba(255,170,0,.3);
    text-shadow:0 0 8px rgba(255,170,0,.5);
}

/* 技能等级标签 */
.skillMetaTag.level-tag{
    font-size:9px;
    padding:2px 6px;
    border-radius:4px;
    border:1px solid;
}

/* 技能升级闪光动画 */
.skillUpgradeFlash{
    animation:skillUpgradeFlash .8s ease-out;
}
@keyframes skillUpgradeFlash{
    0%{box-shadow:0 0 0 0 rgba(255,170,0,.8)}
    50%{box-shadow:0 0 30px 10px rgba(255,170,0,.4)}
    100%{box-shadow:0 0 0 0 rgba(255,170,0,0)}
}

/* 已解锁标记 */
.skillUnlockedBadge{
    display:flex;
    align-items:center;
    gap:4px;
    padding:4px 10px;
    border-radius:8px;
    font-size:10px;
    font-weight:bold;
    letter-spacing:1px;
}
.skillUnlockedBadge.passive-unlocked{
    background:rgba(0,255,136,.1);
    color:#00ff88;
    border:1px solid rgba(0,255,136,.25);
    text-shadow:0 0 6px rgba(0,255,136,.3);
}
.skillUnlockedBadge.active-unlocked{
    background:rgba(255,215,0,.1);
    color:#ffd700;
    border:1px solid rgba(255,215,0,.25);
    text-shadow:0 0 6px rgba(255,215,0,.3);
}

/* 元素选择增强 */
.skillElementWrap{
    margin-top:16px;
    padding:14px;
    background:linear-gradient(135deg,rgba(0,40,80,.3),rgba(0,20,60,.2));
    border:1px solid rgba(0,180,255,.15);
    border-radius:12px;
    position:relative;
    overflow:hidden;
}
.skillElementWrap::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:radial-gradient(circle at 30% 30%,rgba(0,180,255,.05) 0%,transparent 60%);
    pointer-events:none;
}
.skillElementGrid{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    position:relative;
}
.skillElementCard{
    flex:1;
    min-width:56px;
    padding:8px 6px;
    border-radius:10px;
    text-align:center;
    cursor:pointer;
    transition:all .3s cubic-bezier(.23,1,.32,1);
    position:relative;
    overflow:hidden;
    border:1.5px solid rgba(255,255,255,.1);
    background:rgba(0,0,0,.3);
}
.skillElementCard::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0;
    transition:opacity .3s;
    pointer-events:none;
}
.skillElementCard:hover{
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.skillElementCard.active{
    box-shadow:0 0 20px rgba(var(--elem-rgb,0,180,255),.3),inset 0 0 15px rgba(var(--elem-rgb,0,180,255,.1));
    animation:elementCardActive 2s ease-in-out infinite;
}
@keyframes elementCardActive{
    0%,100%{box-shadow:0 0 15px rgba(var(--elem-rgb,0,180,255),.2)}
    50%{box-shadow:0 0 25px rgba(var(--elem-rgb,0,180,255),.4)}
}
.skillElementCard .elemIcon{
    font-size:20px;
    display:block;
    margin-bottom:3px;
    transition:transform .3s;
}
.skillElementCard:hover .elemIcon{
    transform:scale(1.2) rotate(10deg);
}
.skillElementCard .elemName{
    font-size:9px;
    letter-spacing:1px;
    font-weight:bold;
}
.skillElementCard.innate{
    border-style:dashed;
}

/* 技能解锁成功特效 */
.skillUnlockFlash{
    animation:skillUnlockFlash .8s ease-out;
}
@keyframes skillUnlockFlash{
    0%{transform:scale(1);box-shadow:0 0 0 rgba(0,220,255,0)}
    20%{transform:scale(1.03);box-shadow:0 0 30px rgba(0,220,255,.5)}
    40%{transform:scale(.99)}
    60%{transform:scale(1.01)}
    100%{transform:scale(1);box-shadow:0 0 0 rgba(0,220,255,0)}
}
.skillUnlockFlash.active-flash{
    animation:skillUnlockFlashActive .8s ease-out;
}
@keyframes skillUnlockFlashActive{
    0%{transform:scale(1);box-shadow:0 0 0 rgba(255,215,0,0)}
    20%{transform:scale(1.03);box-shadow:0 0 30px rgba(255,215,0,.5)}
    40%{transform:scale(.99)}
    60%{transform:scale(1.01)}
    100%{transform:scale(1);box-shadow:0 0 0 rgba(255,215,0,0)}
}

/* 技能树粒子容器 */
.skillParticles{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:9999;
    overflow:hidden;
}
.skillParticle{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    animation:skillParticleFly 1s ease-out forwards;
}
@keyframes skillParticleFly{
    0%{opacity:1;transform:translate(0,0) scale(1)}
    100%{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) scale(0)}
}

/* 技能树统计面板 */
.skillStatsPanel{
    display:flex;
    gap:8px;
    margin-bottom:12px;
}
.skillStatCard{
    flex:1;
    padding:8px;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(0,180,255,.12);
    border-radius:10px;
    text-align:center;
    transition:all .3s;
}
.skillStatCard:hover{
    background:rgba(0,40,80,.3);
    border-color:rgba(0,180,255,.25);
}
.skillStatValue{
    font-size:18px;
    font-weight:bold;
    text-shadow:0 0 10px rgba(0,220,255,.4);
}
.skillStatLabel{
    font-size:8px;
    color:rgba(255,255,255,.4);
    letter-spacing:1px;
    margin-top:2px;
}

/* 技能树全解锁特效 */
.skillTreeComplete{
    position:relative;
}
.skillTreeComplete::after{
    content:'🎓 全部解锁';
    position:absolute;
    top:8px;
    right:8px;
    padding:4px 10px;
    background:linear-gradient(135deg,rgba(255,215,0,.2),rgba(255,180,0,.1));
    border:1px solid rgba(255,215,0,.4);
    border-radius:20px;
    color:#ffd700;
    font-size:10px;
    font-weight:bold;
    letter-spacing:1px;
    text-shadow:0 0 8px rgba(255,215,0,.4);
    animation:completeBadgeGlow 2s ease-in-out infinite;
}
@keyframes completeBadgeGlow{
    0%,100%{box-shadow:0 0 10px rgba(255,215,0,.2)}
    50%{box-shadow:0 0 20px rgba(255,215,0,.4)}
}

/* 移动端适配 */
@media (pointer:coarse),(max-width:760px){
    .skillNode{padding:10px 12px;gap:10px}
    .skillIcon{width:38px;height:38px;font-size:20px}
    .skillName{font-size:12px}
    .skillDesc{font-size:9px}
    .skillUnlockBtn{padding:5px 12px;font-size:10px}
    .skillStatsPanel{gap:6px}
    .skillStatCard{padding:6px}
    .skillStatValue{font-size:15px}
    .skillElementCard{min-width:48px;padding:6px 4px}
    .skillElementCard .elemIcon{font-size:18px}
    .skillTreeHeader{padding:12px 10px}
    .skillTreeTitle{font-size:16px}
}
@media (max-width:380px){
    .skillNode{padding:8px 10px;gap:8px}
    .skillIcon{width:34px;height:34px;font-size:18px}
    .skillName{font-size:11px}
    .skillDesc{font-size:8px}
    .skillStatsPanel{gap:4px}
    .skillStatValue{font-size:13px}
    .skillStatLabel{font-size:7px}
    .skillElementCard{min-width:42px;padding:5px 3px}
}

/* ============================================================
   UI全面升级 - 现代化设计系统
   ============================================================ */

/* ===== 全局毛玻璃效果变量 ===== */
:root {
    --glass-bg: rgba(0, 20, 50, 0.6);
    --glass-border: rgba(0, 180, 255, 0.2);
    --glass-blur: 12px;
    --glow-primary: rgba(0, 220, 255, 0.8);
    --glow-secondary: rgba(255, 215, 0, 0.6);
    --glow-accent: rgba(255, 100, 0, 0.6);
    --card-radius: 16px;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 增强的开始菜单 ===== */
#startScreen {
    background: linear-gradient(180deg, 
        rgba(0, 10, 30, 0.95) 0%, 
        rgba(0, 20, 60, 0.9) 50%, 
        rgba(0, 10, 30, 0.95) 100%);
    backdrop-filter: blur(20px);
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 开始界面粒子效果 */
.startParticles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.startParticle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(0, 200, 255, 0.6);
    border-radius: 50%;
    animation: startParticleFloat linear infinite;
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.4);
}

@keyframes startParticleFloat {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(90vh) translateX(10px) scale(1);
    }
    90% {
        opacity: 0.8;
        transform: translateY(10vh) translateX(-10px) scale(0.8);
    }
    100% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
}

.menuWrap {
    max-width: 480px;
    margin: 0 auto;
    flex-shrink: 0;
}

/* 增强的标题效果 */
.menuTitle {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #00ddff, #00ffcc, #ffdd00, #ff8800);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleGradient 8s ease-in-out infinite, titleGlow 3s ease-in-out infinite;
}

@keyframes titleGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 增强的飞船展示 */
.menuShipBanner {
    position: relative;
    filter: drop-shadow(0 0 30px rgba(0, 180, 255, 0.6)) 
            drop-shadow(0 0 60px rgba(0, 120, 255, 0.3));
    animation: bannerFloat 3s ease-in-out infinite, bannerGlow 4s ease-in-out infinite;
}

@keyframes bannerGlow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(0, 180, 255, 0.5)) drop-shadow(0 0 40px rgba(0, 120, 255, 0.2)); }
    50% { filter: drop-shadow(0 0 35px rgba(0, 200, 255, 0.8)) drop-shadow(0 0 70px rgba(0, 150, 255, 0.4)); }
}

/* ===== 现代化标签页 ===== */
.tabs {
    background: rgba(0, 20, 50, 0.4);
    border-radius: 12px 12px 0 0;
    border: 1px solid rgba(0, 180, 255, 0.15);
    border-bottom: none;
    padding: 4px 4px 0;
    gap: 2px;
}

.tab {
    border-radius: 10px 10px 0 0;
    padding: 10px 0;
    font-size: 11px;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 180, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.tab:hover::before {
    opacity: 1;
}

.tab.active {
    background: rgba(0, 180, 255, 0.15);
    border-bottom-color: transparent;
    box-shadow: 0 -4px 20px rgba(0, 180, 255, 0.2);
}

.tab.active::after {
    height: 3px;
    background: linear-gradient(90deg, #00ddff, #00ffcc);
    box-shadow: 0 0 15px rgba(0, 220, 255, 0.8);
}

/* ===== 增强的标签内容区 ===== */
.tabContent {
    background: rgba(0, 20, 50, 0.5);
    border: 1px solid rgba(0, 180, 255, 0.15);
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 16px;
    backdrop-filter: blur(10px);
    animation: tabContentIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tabContentIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 现代化飞船卡片 ===== */
.shipCard {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.6) 0%, 
        rgba(0, 30, 60, 0.8) 100%);
    border: 1px solid rgba(0, 180, 255, 0.2);
    border-radius: 16px;
    padding: 16px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.shipCard::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 180, 255, 0.1) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s;
}

.shipCard:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 8px 32px rgba(0, 120, 255, 0.3),
        0 0 0 1px rgba(0, 200, 255, 0.4),
        inset 0 0 30px rgba(0, 150, 255, 0.1);
    border-color: rgba(0, 200, 255, 0.5);
}

.shipCard:hover::before {
    opacity: 1;
}

.shipCard.selected {
    background: linear-gradient(135deg, 
        rgba(0, 60, 120, 0.8) 0%, 
        rgba(0, 40, 80, 0.9) 100%);
    border-color: rgba(0, 220, 255, 0.6);
    box-shadow: 
        0 0 30px rgba(0, 200, 255, 0.4),
        inset 0 0 40px rgba(0, 180, 255, 0.15);
}

.shipCard.selected::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: rgba(0, 220, 255, 0.2);
    border: 2px solid #00ddff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ddff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 220, 255, 0.8);
    animation: checkPop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes checkPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ===== 增强的商店物品 ===== */
.shopItem {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.5) 0%, 
        rgba(0, 30, 60, 0.7) 100%);
    border: 1px solid rgba(0, 180, 255, 0.15);
    border-radius: 14px;
    padding: 14px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.shopItem:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 120, 255, 0.2);
    border-color: rgba(0, 200, 255, 0.3);
}

/* 增强的购买按钮 */
.shopBtn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #cc8800, #ffaa00, #ffcc33);
    background-size: 200% 200%;
    animation: btnGradient 3s ease-in-out infinite;
    border: none;
    border-radius: 12px;
    padding: 8px 20px;
    font-weight: bold;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
}

@keyframes btnGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.shopBtn:hover {
    transform: scale(1.08);
    box-shadow: 
        0 4px 20px rgba(255, 170, 0, 0.5),
        0 0 40px rgba(255, 170, 0, 0.3);
}

.shopBtn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 300%;
    height: 200%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 100%);
    transform: rotate(30deg);
    transition: left 0.6s;
}

.shopBtn:hover::after {
    left: 100%;
}

/* ===== 现代化开始按钮 ===== */
#startBtn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0066dd, #00bbff, #00ddff);
    background-size: 200% 200%;
    animation: startBtnGradient 4s ease-in-out infinite;
    border: none;
    border-radius: 24px;
    padding: 20px 80px;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 10px;
    color: #fff;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 
        0 0 40px rgba(0, 140, 255, 0.6),
        0 0 80px rgba(0, 140, 255, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

@keyframes startBtnGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

#startBtn:hover {
    transform: scale(1.08);
    box-shadow: 
        0 0 60px rgba(0, 180, 255, 0.8),
        0 0 120px rgba(0, 150, 255, 0.4),
        0 0 200px rgba(0, 100, 255, 0.2);
}

#startBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    transition: left 0.8s;
}

#startBtn:hover::before {
    left: 100%;
}

/* ===== 增强的技能树 ===== */
.skillTreeBranch {
    position: relative;
    padding-left: 20px;
}

.skillTreeBranch::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, 
        rgba(0, 180, 255, 0.4) 0%, 
        rgba(0, 180, 255, 0.1) 50%, 
        rgba(0, 180, 255, 0.4) 100%);
    animation: skillLineGlow 3s ease-in-out infinite;
}

@keyframes skillLineGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.skillNode {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.6) 0%, 
        rgba(0, 30, 60, 0.8) 100%);
    border: 1px solid rgba(0, 180, 255, 0.2);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.skillNode::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(0, 180, 255, 0.1), 
        transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.skillNode:hover {
    transform: translateX(4px);
    box-shadow: 
        0 4px 20px rgba(0, 120, 255, 0.2),
        0 0 0 1px rgba(0, 200, 255, 0.3);
    border-color: rgba(0, 200, 255, 0.4);
}

.skillNode:hover::before {
    opacity: 1;
}

.skillNode.unlocked {
    background: linear-gradient(135deg, 
        rgba(0, 80, 160, 0.6) 0%, 
        rgba(0, 60, 120, 0.8) 100%);
    border-color: rgba(0, 220, 255, 0.5);
    box-shadow: 
        0 0 20px rgba(0, 200, 255, 0.2),
        inset 0 0 30px rgba(0, 180, 255, 0.1);
}

.skillNode.canUnlock {
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    animation: skillPulse 2s ease-in-out infinite;
}

@keyframes skillPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 0 0 60px rgba(255, 215, 0, 0.2); }
}

/* 技能图标增强 */
.skillIcon {
    position: relative;
    width: 48px;
    height: 48px;
    background: radial-gradient(circle, 
        rgba(0, 180, 255, 0.3) 0%, 
        rgba(0, 100, 200, 0.1) 70%);
    border-radius: 12px;
    border: 2px solid rgba(0, 180, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: var(--transition-smooth);
}

.skillNode.unlocked .skillIcon {
    border-color: rgba(0, 220, 255, 0.6);
    box-shadow: 
        0 0 15px rgba(0, 200, 255, 0.4),
        inset 0 0 20px rgba(0, 180, 255, 0.2);
    animation: iconGlow 2s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 200, 255, 0.4), inset 0 0 20px rgba(0, 180, 255, 0.2); }
    50% { box-shadow: 0 0 25px rgba(0, 220, 255, 0.6), inset 0 0 30px rgba(0, 200, 255, 0.3); }
}

/* ===== 增强的弹幕配置 ===== */
.bulletCfgWrap {
    background: rgba(0, 20, 50, 0.5);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(0, 180, 255, 0.15);
}

.bulletCard {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.5) 0%, 
        rgba(0, 30, 60, 0.7) 100%);
    border: 1px solid rgba(0, 180, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    transition: var(--transition-smooth);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.bulletCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 120, 255, 0.2);
    border-color: rgba(0, 200, 255, 0.3);
}

.bulletCard.active {
    background: linear-gradient(135deg, 
        rgba(0, 80, 160, 0.6) 0%, 
        rgba(0, 60, 120, 0.8) 100%);
    border-color: rgba(0, 220, 255, 0.5);
    box-shadow: 
        0 0 20px rgba(0, 200, 255, 0.2),
        inset 0 0 30px rgba(0, 180, 255, 0.1);
}

.bulletCard.active.shape-active {
    border-color: rgba(0, 255, 200, 0.5);
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.2);
}

.bulletCard.active.prop-active {
    border-color: rgba(255, 170, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.2);
}

/* 锁定卡片 - 增强样式兼容 */
.bulletCard.locked {
    opacity: 0.5;
    filter: grayscale(0.5);
    cursor: pointer;
    border-style: dashed;
    border-color: rgba(255, 215, 0, 0.3);
}
.bulletCard.locked:hover {
    transform: translateY(-2px);
    opacity: 0.7;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
}
.bulletCard.locked .bulletCardCost {
    color: #ffd700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

/* 弹幕预览画布增强 */
.bulletPreviewWrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 180, 255, 0.2);
    margin-bottom: 16px;
    box-shadow: 0 0 20px rgba(0, 120, 255, 0.1);
}

#bulletPreviewCanvas {
    display: block;
    width: 100%;
    height: auto;
    background: radial-gradient(ellipse at center, 
        rgba(0, 30, 60, 0.8) 0%, 
        rgba(0, 10, 30, 0.9) 100%);
}

/* 推荐搭配增强 */
.bulletCombos {
    background: linear-gradient(135deg, 
        rgba(255, 200, 0, 0.05) 0%, 
        rgba(255, 150, 0, 0.03) 100%);
    border: 1px solid rgba(255, 200, 0, 0.2);
    border-radius: 14px;
    padding: 14px;
    margin-top: 16px;
}

.bulletComboItem {
    background: linear-gradient(135deg, 
        rgba(0, 30, 60, 0.6) 0%, 
        rgba(0, 20, 40, 0.8) 100%);
    border: 1px solid rgba(255, 200, 0, 0.15);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    transition: var(--transition-smooth);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.bulletComboItem:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(255, 200, 0, 0.15);
    border-color: rgba(255, 200, 0, 0.3);
}

.bulletComboItem.current {
    background: linear-gradient(135deg, 
        rgba(255, 200, 0, 0.1) 0%, 
        rgba(255, 150, 0, 0.05) 100%);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

/* ===== 增强的游戏内HUD ===== */
#hearts {
    background: rgba(0, 20, 50, 0.6);
    backdrop-filter: blur(8px);
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 50, 50, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.heart {
    transition: var(--transition-smooth);
    filter: drop-shadow(0 0 8px rgba(255, 50, 50, 0.8));
}

.heart:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 12px rgba(255, 80, 80, 1));
}

.heart.lost {
    opacity: 0.2;
    filter: grayscale(1);
    animation: none;
}

/* 增强的分数显示 */
#score {
    background: rgba(0, 20, 50, 0.6);
    backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(0, 220, 255, 0.3);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 200, 255, 0.1);
}

/* 增强的连击显示 */
#comboDisp {
    background: rgba(0, 20, 50, 0.6);
    backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 136, 0, 0.3);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 136, 0, 0.1);
}

#comboDisp.mul-high {
    border-color: rgba(255, 68, 0, 0.5);
    box-shadow: 
        0 0 30px rgba(255, 68, 0, 0.3),
        0 0 60px rgba(255, 68, 0, 0.1);
    animation: comboHighPulse 0.5s ease-in-out;
}

#comboDisp.mul-ultra {
    border-color: rgba(255, 0, 102, 0.5);
    box-shadow: 
        0 0 40px rgba(255, 0, 102, 0.4),
        0 0 80px rgba(255, 0, 102, 0.2);
    animation: comboUltraPulse 0.3s ease-in-out;
}

@keyframes comboHighPulse {
    0% { transform: scale(1.4); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes comboUltraPulse {
    0% { transform: scale(1.6); filter: brightness(2); }
    50% { transform: scale(1.2); filter: brightness(1.5); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* 增强的波次信息 */
#waveInfo {
    background: rgba(0, 20, 50, 0.6);
    backdrop-filter: blur(8px);
    padding: 8px 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 215, 0, 0.1);
}

/* 增强的Boss血条 */
#bossHP {
    background: rgba(0, 20, 50, 0.8);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    border: 1px solid rgba(255, 50, 50, 0.3);
    box-shadow: 0 0 20px rgba(255, 50, 50, 0.2);
    overflow: hidden;
}

#bossHPFill {
    background: linear-gradient(90deg, #ff4444, #ff6666, #ff4444);
    background-size: 200% 100%;
    animation: bossHpGradient 2s linear infinite;
    box-shadow: 0 0 15px rgba(255, 50, 50, 0.5);
}

@keyframes bossHpGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ===== 增强的暂停界面 ===== */
#pauseScreen {
    background: radial-gradient(ellipse at center, 
        rgba(0, 30, 60, 0.95) 0%, 
        rgba(0, 10, 30, 0.98) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 180, 255, 0.2);
    border-radius: 24px;
    box-shadow: 
        0 0 60px rgba(0, 100, 200, 0.3),
        0 0 120px rgba(0, 50, 150, 0.2),
        inset 0 0 60px rgba(0, 150, 255, 0.05);
    animation: pauseScreenIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* 暂停界面粒子效果 */
.pauseParticles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.pauseParticle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(0, 200, 255, 0.5);
    border-radius: 50%;
    animation: pauseParticleFloat linear infinite;
    box-shadow: 0 0 6px rgba(0, 200, 255, 0.3);
}

@keyframes pauseParticleFloat {
    0% {
        transform: translateY(100%) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
        transform: translateY(90%) translateX(5px) scale(1);
    }
    90% {
        opacity: 0.6;
        transform: translateY(10%) translateX(-5px) scale(0.8);
    }
    100% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
}

@keyframes pauseScreenIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pauseBtn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, 
        rgba(0, 180, 255, 0.2) 0%, 
        rgba(0, 120, 200, 0.3) 100%);
    border: 1px solid rgba(0, 200, 255, 0.3);
    border-radius: 14px;
    padding: 14px 28px;
    color: #00ddff;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    transition: var(--transition-smooth);
    backdrop-filter: blur(8px);
}

.pauseBtn:hover {
    background: linear-gradient(135deg, 
        rgba(0, 200, 255, 0.3) 0%, 
        rgba(0, 150, 220, 0.4) 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 4px 20px rgba(0, 180, 255, 0.3),
        0 0 40px rgba(0, 150, 255, 0.2);
}

.pauseBtn.resume {
    background: linear-gradient(135deg, 
        rgba(0, 255, 170, 0.2) 0%, 
        rgba(0, 200, 130, 0.3) 100%);
    border-color: rgba(0, 255, 170, 0.4);
    color: #00ffaa;
}

.pauseBtn.resume:hover {
    background: linear-gradient(135deg, 
        rgba(0, 255, 170, 0.3) 0%, 
        rgba(0, 220, 150, 0.4) 100%);
    box-shadow: 
        0 4px 20px rgba(0, 255, 170, 0.3),
        0 0 40px rgba(0, 200, 130, 0.2);
}

/* ===== 增强的游戏结束界面 ===== */
#gameOver {
    background: radial-gradient(ellipse at center, 
        rgba(0, 30, 60, 0.95) 0%, 
        rgba(0, 10, 30, 0.98) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 180, 255, 0.2);
    border-radius: 24px;
    box-shadow: 
        0 0 60px rgba(0, 100, 200, 0.3),
        0 0 120px rgba(0, 50, 150, 0.2),
        inset 0 0 60px rgba(0, 150, 255, 0.05);
    animation: gameOverIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 32px;
    position: relative;
    overflow: hidden;
}

/* 游戏结束界面粒子效果 */
.gameOverParticles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.gameOverParticle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 100, 0, 0.6);
    border-radius: 50%;
    animation: gameOverParticleFloat linear infinite;
    box-shadow: 0 0 8px rgba(255, 100, 0, 0.4);
}

@keyframes gameOverParticleFloat {
    0% {
        transform: translateY(100%) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
        transform: translateY(90%) translateX(10px) scale(1);
    }
    90% {
        opacity: 0.6;
        transform: translateY(10%) translateX(-10px) scale(0.8);
    }
    100% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
}

@keyframes gameOverIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#goTitle {
    background: linear-gradient(135deg, #ff4444, #ff6666, #ff4444);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goTitleGradient 3s ease-in-out infinite;
    text-shadow: none;
}

@keyframes goTitleGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

#restartBtn, #menuBtn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, 
        rgba(0, 180, 255, 0.2) 0%, 
        rgba(0, 120, 200, 0.3) 100%);
    border: 1px solid rgba(0, 200, 255, 0.3);
    border-radius: 16px;
    padding: 16px 36px;
    color: #00ddff;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 3px;
    cursor: pointer;
    transition: var(--transition-smooth);
    backdrop-filter: blur(8px);
}

#restartBtn:hover, #menuBtn:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 6px 24px rgba(0, 180, 255, 0.3),
        0 0 40px rgba(0, 150, 255, 0.2);
}

#restartBtn {
    background: linear-gradient(135deg, 
        rgba(255, 100, 0, 0.2) 0%, 
        rgba(255, 80, 0, 0.3) 100%);
    border-color: rgba(255, 100, 0, 0.4);
    color: #ff8800;
}

#restartBtn:hover {
    box-shadow: 
        0 6px 24px rgba(255, 100, 0, 0.3),
        0 0 40px rgba(255, 80, 0, 0.2);
}

/* ===== 增强的成就系统 ===== */
.ach-section-title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 14px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 180, 255, 0.15);
}

.ach-section-title.rare {
    color: #ffd700;
    border-bottom-color: rgba(255, 215, 0, 0.2);
}

.ach-count {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    font-weight: normal;
}

.achItem {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.5) 0%, 
        rgba(0, 30, 60, 0.7) 100%);
    border: 1px solid rgba(0, 180, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 6px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.achItem::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(0, 180, 255, 0.1), 
        transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.achItem:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 120, 255, 0.2);
    border-color: rgba(0, 200, 255, 0.3);
}

.achItem:hover::before {
    opacity: 1;
}

.achItem.unlocked {
    background: linear-gradient(135deg, 
        rgba(255, 200, 0, 0.1) 0%, 
        rgba(255, 150, 0, 0.05) 100%);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.15),
        inset 0 0 30px rgba(255, 200, 0, 0.05);
}

.achItem.unlocked::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(255, 215, 0, 0.2);
    border: 2px solid #ffd700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd700;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    animation: achCheckPop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.achItem.hidden {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.1);
}

@keyframes achCheckPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.ach-reward {
    color: #ffd700;
    font-size: 10px;
    margin-top: 4px;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

.ach-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.ach-showcase-item {
    padding: 10px 14px;
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.12) 0%, 
        rgba(255, 180, 0, 0.06) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    text-align: center;
    transition: var(--transition-smooth);
    flex: 1;
    min-width: 80px;
}

.ach-showcase-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
}

.ach-showcase-icon {
    font-size: 28px;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

.ach-showcase-name {
    color: #ffd700;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* 成就进度条增强 */
.achProgressBar {
    background: rgba(0, 40, 80, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(0, 180, 255, 0.2);
    overflow: hidden;
}

.achProgressFill {
    background: linear-gradient(90deg, #00ddff, #00ffcc, #00ddff);
    background-size: 200% 100%;
    animation: achProgressGradient 2s linear infinite;
    box-shadow: 0 0 10px rgba(0, 220, 255, 0.5);
}

@keyframes achProgressGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ===== 增强的装备系统 ===== */
.equip-header {
    text-align: center;
    margin-bottom: 16px;
    padding: 16px;
    background: linear-gradient(135deg, 
        rgba(255, 170, 0, 0.1) 0%, 
        rgba(255, 130, 0, 0.05) 100%);
    border: 1px solid rgba(255, 170, 0, 0.2);
    border-radius: 14px;
}

.equip-title {
    color: #ffaa00;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
}

.equip-stats {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    margin-top: 6px;
}

.equip-slot-title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 14px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 180, 255, 0.15);
}

.equip-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin: 6px 0;
    background: linear-gradient(135deg, 
        rgba(0, 30, 60, 0.5) 0%, 
        rgba(0, 20, 40, 0.7) 100%);
    border: 1px solid rgba(0, 180, 255, 0.15);
    border-radius: 12px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.equip-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, 
        var(--rarity-color, rgba(0, 180, 255, 0.1)) 0%, 
        transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.equip-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 120, 255, 0.2);
    border-color: rgba(0, 200, 255, 0.3);
}

.equip-item:hover::before {
    opacity: 0.1;
}

.equip-item.equipped {
    background: linear-gradient(135deg, 
        rgba(0, 60, 120, 0.6) 0%, 
        rgba(0, 40, 80, 0.8) 100%);
    border-color: var(--rarity-color, rgba(0, 220, 255, 0.5));
    box-shadow: 
        0 0 20px color-mix(in srgb, var(--rarity-color) 30%, transparent),
        inset 0 0 20px color-mix(in srgb, var(--rarity-color) 10%, transparent);
}

.equip-item.owned {
    border-color: rgba(255, 255, 255, 0.2);
}

.equip-item.locked {
    opacity: 0.6;
    border-color: rgba(255, 255, 255, 0.08);
}

.equip-item-icon {
    font-size: 24px;
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.equip-item-info {
    flex: 1;
    min-width: 0;
}

.equip-item-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #eef;
    font-size: 13px;
    font-weight: bold;
}

.equip-rarity {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid;
    letter-spacing: 1px;
}

.equip-item-desc {
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    margin-top: 4px;
    line-height: 1.4;
}

.equip-item-status {
    text-align: right;
    flex-shrink: 0;
}

.equip-status {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
}

.equipped-status {
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.owned-status {
    text-shadow: 0 0 6px currentColor;
}

.locked-status {
    color: rgba(255, 255, 255, 0.4);
}

.free-status {
    color: rgba(255, 255, 255, 0.3);
}

/* 装备效果预览增强 */
.equip-effects {
    margin-top: 16px;
    padding: 14px;
    background: linear-gradient(135deg, 
        rgba(255, 170, 0, 0.08) 0%, 
        rgba(255, 130, 0, 0.04) 100%);
    border: 1px solid rgba(255, 170, 0, 0.2);
    border-radius: 12px;
}

.equip-effects-title {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.equip-effects-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.equip-effect-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-smooth);
}

.equip-effect-tag:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.equipSlot {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.5) 0%, 
        rgba(0, 30, 60, 0.7) 100%);
    border: 2px dashed rgba(0, 180, 255, 0.3);
    border-radius: 16px;
    padding: 16px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.equipSlot:hover {
    border-color: rgba(0, 200, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 180, 255, 0.2);
}

.equipSlot.equipped {
    border-style: solid;
    border-color: rgba(0, 220, 255, 0.5);
    background: linear-gradient(135deg, 
        rgba(0, 60, 120, 0.6) 0%, 
        rgba(0, 40, 80, 0.8) 100%);
    box-shadow: 
        0 0 25px rgba(0, 200, 255, 0.3),
        inset 0 0 30px rgba(0, 180, 255, 0.1);
}

/* ===== 增强的模式选择 ===== */
.modeCard {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.5) 0%, 
        rgba(0, 30, 60, 0.7) 100%);
    border: 1px solid rgba(0, 180, 255, 0.15);
    border-radius: 14px;
    padding: 14px;
    transition: var(--transition-smooth);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.modeCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 120, 255, 0.2);
    border-color: rgba(0, 200, 255, 0.3);
}

.modeCard.active {
    background: linear-gradient(135deg, 
        rgba(0, 80, 160, 0.6) 0%, 
        rgba(0, 60, 120, 0.8) 100%);
    border-color: rgba(0, 220, 255, 0.5);
    box-shadow: 
        0 0 25px rgba(0, 200, 255, 0.3),
        inset 0 0 30px rgba(0, 180, 255, 0.1);
}

/* ===== 增强的仓库物品 ===== */
.whItem {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.5) 0%, 
        rgba(0, 30, 60, 0.7) 100%);
    border: 1px solid rgba(0, 180, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.whItem:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 120, 255, 0.2);
    border-color: rgba(0, 200, 255, 0.3);
}

/* ===== 增强的金币显示 ===== */
.goldBar {
    background: linear-gradient(135deg, 
        rgba(255, 200, 0, 0.1) 0%, 
        rgba(255, 150, 0, 0.05) 100%);
    border: 1px solid rgba(255, 200, 0, 0.3);
    border-radius: 30px;
    padding: 10px 28px;
    backdrop-filter: blur(8px);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 200, 0, 0.1);
    transition: var(--transition-smooth);
}

.goldBar:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 200, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
}

/* ===== 全局滚动条美化 ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 20, 50, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 255, 0.3);
    border-radius: 3px;
    transition: var(--transition-smooth);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 200, 255, 0.5);
}

/* ===== 全局工具提示 ===== */
[title] {
    position: relative;
}

[title]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: rgba(0, 20, 50, 0.9);
    border: 1px solid rgba(0, 180, 255, 0.3);
    border-radius: 8px;
    color: #00ddff;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1000;
    backdrop-filter: blur(8px);
}

[title]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* ===== 增强的蓄力条 ===== */
#chargeBar {
    background: rgba(0, 20, 50, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(0, 200, 255, 0.3);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 180, 255, 0.2),
        inset 0 1px 0 rgba(0, 180, 255, 0.08),
        inset 0 0 15px rgba(0, 100, 200, 0.2);
    overflow: hidden;
}

#chargeFill {
    background: linear-gradient(90deg, #00ccff, #00ffcc, #ffdd00);
    background-size: 200% 100%;
    animation: chargeGradient 2s linear infinite;
    box-shadow: 0 0 15px rgba(0, 220, 255, 0.5);
    border-radius: 8px;
}

@keyframes chargeGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ===== 增强的大招就绪提示 ===== */
#ultimateReady {
    background: rgba(0, 20, 50, 0.8);
    backdrop-filter: blur(8px);
    padding: 10px 24px;
    border-radius: 14px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.3),
        0 0 60px rgba(255, 215, 0, 0.1);
    animation: ultReadyPulse 1.5s ease-in-out infinite;
}

@keyframes ultReadyPulse {
    0%, 100% {
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 0.3),
            0 0 60px rgba(255, 215, 0, 0.1);
    }
    50% {
        box-shadow: 
            0 0 50px rgba(255, 215, 0, 0.5),
            0 0 100px rgba(255, 215, 0, 0.2);
    }
}

/* ===== 增强的快捷栏 ===== */
#hotbar {
    background: rgba(0, 20, 50, 0.7);
    backdrop-filter: blur(10px);
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0, 180, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.hotItem {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.6) 0%, 
        rgba(0, 30, 60, 0.8) 100%);
    border: 1px solid rgba(0, 180, 255, 0.2);
    border-radius: 10px;
    padding: 8px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.hotItem:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 120, 255, 0.2);
    border-color: rgba(0, 200, 255, 0.4);
}

.hotItem.active {
    border-color: rgba(0, 255, 200, 0.5);
    box-shadow: 0 0 20px rgba(0, 255, 200, 0.2);
    animation: hotItemActive 1s ease-in-out infinite;
}

@keyframes hotItemActive {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 200, 0.2); }
    50% { box-shadow: 0 0 30px rgba(0, 255, 200, 0.4); }
}

/* ===== 增强的设置面板 ===== */
#settingsPanel {
    background: linear-gradient(135deg, 
        rgba(0, 30, 60, 0.95) 0%, 
        rgba(0, 20, 40, 0.98) 100%);
    border: 1px solid rgba(0, 180, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(0, 100, 200, 0.1);
    animation: settingsIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes settingsIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 增强的滑块 ===== */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(0, 40, 80, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(0, 180, 255, 0.2);
    outline: none;
    transition: var(--transition-smooth);
}

input[type="range"]:hover {
    border-color: rgba(0, 200, 255, 0.4);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #00ccff, #00ffcc);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 
        0 0 10px rgba(0, 200, 255, 0.5),
        0 0 20px rgba(0, 200, 255, 0.2);
    transition: var(--transition-smooth);
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 
        0 0 15px rgba(0, 200, 255, 0.7),
        0 0 30px rgba(0, 200, 255, 0.3);
}

/* ===== 增强的选择框 ===== */
select {
    background: rgba(0, 40, 80, 0.6);
    border: 1px solid rgba(0, 180, 255, 0.3);
    border-radius: 10px;
    padding: 8px 16px;
    color: #00ddff;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
    backdrop-filter: blur(8px);
}

select:hover {
    border-color: rgba(0, 200, 255, 0.5);
    box-shadow: 0 0 15px rgba(0, 180, 255, 0.2);
}

select:focus {
    outline: none;
    border-color: rgba(0, 220, 255, 0.6);
    box-shadow: 
        0 0 20px rgba(0, 200, 255, 0.3),
        0 0 40px rgba(0, 150, 255, 0.1);
}

/* ===== 增强的难度选择 ===== */
.diffSelect {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.6) 0%, 
        rgba(0, 30, 60, 0.8) 100%);
    border: 1px solid rgba(0, 180, 255, 0.3);
    border-radius: 12px;
    padding: 10px 20px;
    color: #00ddff;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-smooth);
    backdrop-filter: blur(8px);
}

.diffSelect:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 4px 20px rgba(0, 180, 255, 0.2),
        0 0 30px rgba(0, 150, 255, 0.1);
}

/* ===== 增强的统计面板 ===== */
.statRow {
    background: linear-gradient(135deg, 
        rgba(0, 30, 60, 0.5) 0%, 
        rgba(0, 20, 40, 0.7) 100%);
    border: 1px solid rgba(0, 180, 255, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
    transition: var(--transition-smooth);
}

.statRow:hover {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.6) 0%, 
        rgba(0, 30, 60, 0.8) 100%);
    border-color: rgba(0, 180, 255, 0.2);
}

/* ===== 增强的评级徽章 ===== */
.ratingBadge {
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.1) 0%, 
        rgba(255, 180, 0, 0.05) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: var(--transition-smooth);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

.ratingBadge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.2);
}

.ratingBadge .rVal {
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    animation: ratingGlow 2s ease-in-out infinite;
}

@keyframes ratingGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

/* ===== 增强的最高分列表 ===== */
.hsItem {
    background: linear-gradient(135deg, 
        rgba(0, 30, 60, 0.5) 0%, 
        rgba(0, 20, 40, 0.7) 100%);
    border: 1px solid rgba(0, 180, 255, 0.15);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 12px;
}

.hsItem:hover {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.6) 0%, 
        rgba(0, 30, 60, 0.8) 100%);
    border-color: rgba(0, 180, 255, 0.3);
    transform: translateX(4px);
}

.hsItem:first-child {
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.1) 0%, 
        rgba(255, 180, 0, 0.05) 100%);
    border-color: rgba(255, 215, 0, 0.3);
}

/* ===== 增强的挑战卡片 ===== */
.challenge-header {
    text-align: center;
    margin-bottom: 16px;
}

.challenge-title {
    color: #ffaa00;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
}

.challenge-card {
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 14px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.challenge-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, 
        var(--challenge-color, rgba(255, 170, 0, 0.1)) 0%, 
        transparent);
    opacity: 0.05;
    pointer-events: none;
}

.daily-challenge {
    background: linear-gradient(135deg, 
        rgba(255, 170, 0, 0.1) 0%, 
        rgba(255, 130, 0, 0.05) 100%);
    border: 1px solid rgba(255, 170, 0, 0.25);
}

.daily-challenge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255, 170, 0, 0.2);
    border-color: rgba(255, 170, 0, 0.4);
}

.weekly-challenge {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--challenge-color) 10%, transparent) 0%, 
        color-mix(in srgb, var(--challenge-color) 5%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--challenge-color) 25%, transparent);
}

.weekly-challenge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--challenge-color) 20%, transparent);
    border-color: color-mix(in srgb, var(--challenge-color) 40%, transparent);
}

.challenge-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.challenge-icon {
    font-size: 24px;
}

.challenge-name {
    color: #ffd700;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
}

.challenge-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    margin-bottom: 6px;
}

.challenge-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.challenge-info {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    margin-bottom: 8px;
}

.challenge-best {
    color: #ffdd00;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 6px;
    text-shadow: 0 0 8px rgba(255, 221, 0, 0.4);
}

.challenge-streak {
    color: #44ff88;
    font-size: 12px;
    margin-bottom: 10px;
    text-shadow: 0 0 8px rgba(68, 255, 136, 0.4);
}

.challenge-start-hint {
    padding: 8px 14px;
    background: rgba(255, 170, 0, 0.15);
    border: 1px solid rgba(255, 170, 0, 0.3);
    border-radius: 8px;
    color: #ffd700;
    font-size: 12px;
    text-align: center;
    transition: var(--transition-smooth);
}

.challenge-start-hint:hover {
    background: rgba(255, 170, 0, 0.25);
    transform: translateY(-1px);
}

.challengeCard {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.5) 0%, 
        rgba(0, 30, 60, 0.7) 100%);
    border: 1px solid rgba(0, 180, 255, 0.15);
    border-radius: 14px;
    padding: 16px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.challengeCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 120, 255, 0.2);
    border-color: rgba(0, 200, 255, 0.3);
}

.challengeCard.active {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

/* ===== 增强的皮肤选择 ===== */
.skinRow {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.5) 0%, 
        rgba(0, 30, 60, 0.7) 100%);
    border: 1px solid rgba(0, 180, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.skinRow:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 120, 255, 0.2);
    border-color: rgba(0, 200, 255, 0.3);
}

.skinRow.selected {
    border-color: rgba(0, 220, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.2);
}

/* ===== 增强的装备粒子效果 ===== */
.equipParticle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    pointer-events: none;
    animation: equipParticleFloat 1.5s ease-in-out forwards;
}

@keyframes equipParticleFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0);
    }
}

/* ===== 增强的加载动画 ===== */
@keyframes loadingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(0, 180, 255, 0.3);
    border-top-color: #00ddff;
    border-radius: 50%;
    animation: loadingSpin 1s linear infinite;
}

/* ===== 增强的模态框背景 ===== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalBackdropIn 0.3s ease-out;
}

@keyframes modalBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.95) 0%, 
        rgba(0, 20, 50, 0.98) 100%);
    border: 1px solid rgba(0, 180, 255, 0.3);
    border-radius: 20px;
    padding: 24px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        0 0 60px rgba(0, 100, 200, 0.3),
        0 0 120px rgba(0, 50, 150, 0.2);
    animation: modalContentIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalContentIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ===== 增强的工具类 ===== */
.glass {
    background: rgba(0, 20, 50, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 180, 255, 0.2);
}

.glow-primary {
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.3);
}

.glow-secondary {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.glow-accent {
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.3);
}

.text-glow-primary {
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}

.text-glow-secondary {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.text-glow-accent {
    text-shadow: 0 0 10px rgba(255, 100, 0, 0.5);
}

/* ===== 增强的动画效果 ===== */
.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 200, 255, 0.3); }
    50% { box-shadow: 0 0 40px rgba(0, 200, 255, 0.6); }
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.animate-bounce {
    animation: bounce 0.5s ease-in-out;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ===== 增强的响应式设计 ===== */
@media (max-width: 768px) {
    .menuTitle {
        font-size: 36px;
        letter-spacing: 8px;
    }
    
    #startBtn {
        padding: 16px 60px;
        font-size: 22px;
        letter-spacing: 6px;
    }
    
    .shipCard {
        padding: 12px;
    }
    
    .skillNode {
        padding: 12px;
    }
    
    .tab {
        padding: 8px 0;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .menuTitle {
        font-size: 28px;
        letter-spacing: 6px;
    }
    
    #startBtn {
        padding: 14px 50px;
        font-size: 18px;
        letter-spacing: 4px;
    }
    
    .shipCard {
        padding: 10px;
    }
    
    .skillNode {
        padding: 10px;
    }
    
    .tab {
        padding: 6px 0;
        font-size: 9px;
        letter-spacing: 0;
    }
}

/* ===== 增强的可访问性 ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== 增强的焦点样式 ===== */
:focus-visible {
    outline: 2px solid rgba(0, 200, 255, 0.6);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 200, 255, 0.2);
}

/* ===== 增强的选择样式 ===== */
::selection {
    background: rgba(0, 200, 255, 0.3);
    color: #00ddff;
}

/* ===== 增强的占位符样式 ===== */
::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}

/* ===== 增强的禁用状态 ===== */
:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

/* ===== 增强的链接样式 ===== */
a {
    color: #00ddff;
    text-decoration: none;
    transition: var(--transition-smooth);
}

a:hover {
    color: #00ffcc;
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}

/* ===== 增强的列表样式 ===== */
ul, ol {
    padding-left: 20px;
}

li {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.7);
}

li::marker {
    color: #00ddff;
}

/* ===== 增强的表格样式 ===== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

th, td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 180, 255, 0.15);
}

th {
    background: rgba(0, 40, 80, 0.5);
    color: #00ddff;
    font-weight: bold;
    letter-spacing: 1px;
}

tr:hover {
    background: rgba(0, 60, 120, 0.3);
}

/* ===== 增强的表单样式 ===== */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"] {
    background: rgba(0, 40, 80, 0.5);
    border: 1px solid rgba(0, 180, 255, 0.3);
    border-radius: 10px;
    padding: 10px 16px;
    color: #eef;
    font-size: 14px;
    transition: var(--transition-smooth);
    backdrop-filter: blur(8px);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: rgba(0, 220, 255, 0.6);
    box-shadow: 
        0 0 20px rgba(0, 200, 255, 0.3),
        0 0 40px rgba(0, 150, 255, 0.1);
}

/* ===== 增强的按钮样式 ===== */
button {
    font-family: 'Orbitron', 'Segoe UI', Arial, sans-serif;
    transition: var(--transition-smooth);
}

button:active {
    transform: scale(0.95);
}

/* ===== 增强的卡片网格 ===== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.card {
    background: linear-gradient(135deg, 
        rgba(0, 40, 80, 0.5) 0%, 
        rgba(0, 30, 60, 0.7) 100%);
    border: 1px solid rgba(0, 180, 255, 0.15);
    border-radius: 16px;
    padding: 20px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 8px 32px rgba(0, 120, 255, 0.2),
        0 0 0 1px rgba(0, 200, 255, 0.3);
    border-color: rgba(0, 200, 255, 0.4);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00ddff, #00ffcc);
    opacity: 0;
    transition: opacity 0.3s;
}

.card:hover::before {
    opacity: 1;
}

/* ===== 增强的标签样式 ===== */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: rgba(0, 180, 255, 0.1);
    border: 1px solid rgba(0, 180, 255, 0.3);
    border-radius: 20px;
    color: #00ddff;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
}

.tag:hover {
    background: rgba(0, 200, 255, 0.2);
    border-color: rgba(0, 220, 255, 0.5);
    box-shadow: 0 0 15px rgba(0, 200, 255, 0.2);
}

.tag.gold {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    color: #ffd700;
}

.tag.gold:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.tag.red {
    background: rgba(255, 50, 50, 0.1);
    border-color: rgba(255, 50, 50, 0.3);
    color: #ff4444;
}

.tag.red:hover {
    background: rgba(255, 50, 50, 0.2);
    border-color: rgba(255, 50, 50, 0.5);
    box-shadow: 0 0 15px rgba(255, 50, 50, 0.2);
}

.tag.green {
    background: rgba(0, 255, 170, 0.1);
    border-color: rgba(0, 255, 170, 0.3);
    color: #00ffaa;
}

.tag.green:hover {
    background: rgba(0, 255, 170, 0.2);
    border-color: rgba(0, 255, 170, 0.5);
    box-shadow: 0 0 15px rgba(0, 255, 170, 0.2);
}

/* ===== 增强的分隔线 ===== */
.divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 180, 255, 0.3), 
        transparent);
    margin: 16px 0;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    background: #00ddff;
    border-radius: 50%;
    box-shadow: 0 0 15px #00ddff, 0 0 30px rgba(0, 220, 255, 0.3);
}

/* ===== 增强的徽章 ===== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: linear-gradient(135deg, #ff4444, #ff6666);
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(255, 50, 50, 0.4);
}

.badge.gold {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.badge.green {
    background: linear-gradient(135deg, #00ffaa, #00cc88);
    box-shadow: 0 2px 8px rgba(0, 255, 170, 0.4);
}

/* ===== 增强的进度条 ===== */
.progress {
    width: 100%;
    height: 8px;
    background: rgba(0, 40, 80, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(0, 180, 255, 0.2);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00ddff, #00ffcc);
    border-radius: 3px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(0, 220, 255, 0.5);
}

.progress-bar.animated {
    background-size: 200% 100%;
    animation: progressGradient 2s linear infinite;
}

@keyframes progressGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ===== 增强的工具提示 ===== */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 200px;
    background: rgba(0, 20, 50, 0.95);
    border: 1px solid rgba(0, 180, 255, 0.3);
    border-radius: 10px;
    padding: 10px 14px;
    color: #eef;
    font-size: 12px;
    text-align: center;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.tooltip .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 180, 255, 0.3) transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* ===== 增强的空状态 ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
}

.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state .empty-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.5);
}

.empty-state .empty-desc {
    font-size: 14px;
    max-width: 300px;
    line-height: 1.5;
}

/* ===== 增强的加载状态 ===== */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 180, 255, 0.3);
    border-top-color: #00ddff;
    border-radius: 50%;
    animation: loadingSpin 1s linear infinite;
    margin-bottom: 16px;
}

.loading-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    letter-spacing: 1px;
}
    .skillElementCard .elemIcon{font-size:16px}
    .skillElementCard .elemName{font-size:8px}