/*
 * ╔══════════════════════════════════════════════════════╗
 * ║  ANIMATION BUDGET — 动画预算说明                      ║
 * ╠══════════════════════════════════════════════════════╣
 * ║  本文件包含大量 @keyframes 动画。为保护性能，           ║
 * ║  已对动画进行分级管理：                                ║
 * ║                                                      ║
 * ║  Tier 1 — 核心功能（始终启用）                         ║
 * ║    petFloat, fadeIn, attackLunge*, battleIdle*        ║
 * ║    PK 战斗攻击循环、升级变身动画                        ║
 * ║                                                      ║
 * ║  Tier 1.5 — PK战斗特效（始终启用，不受降级影响）       ║
 * ║    所有PK技能特效（冰冻、雷电、毒雾、旋风、暗影、      ║
 * ║    陨石、圣光、岩浆、星爆等）、碎裂特效、伤害数字、     ║
 * ║    技能名称、屏幕闪光、屏幕震动                        ║
 * ║    适用于：萌萌江湖行、宠物PK对战、课堂PK              ║
 * ║                                                      ║
 * ║  Tier 2 — 装饰性（prefers-reduced-motion 时禁用）      ║
 * ║    粒子特效（ice-shard, firework, meteor...）          ║
 * ║    浮动气泡、背景位移、爱心粒子                         ║
 * ║    出逃系统粒子、烟花、脚印                             ║
 * ║                                                      ║
 * ║  低端设备（.low-end-device）：                         ║
 * ║    Tier 2 动画全部禁用                                 ║
 * ║    Tier 1 & Tier 1.5 动画完整保留                      ║
 * ║    backdrop-filter 全部禁用                            ║
 * ╚══════════════════════════════════════════════════════╝
 */

*{margin:0;padding:0;box-sizing:border-box;font-family:"Nunito","Microsoft YaHei","Comic Sans MS",cursive,sans-serif;}
.page-title, .nav-logo, .podium-name, .modal-title, .modal-student-title{font-family:"Ma Shan Zheng","Nunito","Microsoft YaHei",cursive,sans-serif;}
body{background:linear-gradient(-45deg, #ffe6dd, #ffd4e8, #ffe0f0, #ffecd2, #ffe6dd);background-image:radial-gradient(circle at 15% 20%, rgba(220,150,170,0.15) 0%, transparent 22%),
    radial-gradient(circle at 85% 15%, rgba(180,165,220,0.14) 0%, transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(170,200,235,0.12) 0%, transparent 25%),
    radial-gradient(circle at 75% 55%, rgba(150,210,190,0.1) 0%, transparent 18%);background-attachment:fixed;color:#2c2020;line-height:1.6;min-height:100vh;overflow-x:hidden;background-size:400% 400%;animation:bgShift 40s ease infinite;}
.nav-bar{background:linear-gradient(135deg, rgba(255,183,183,0.88) 0%, rgba(255,192,184,0.88) 40%, rgba(255,214,176,0.88) 100%);padding:15px 25px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:999;box-shadow:0 4px 30px rgba(255,150,120,0.25), 0 1px 0 rgba(255,255,255,0.4) inset;border-bottom:1px solid rgba(255,255,255,0.3);overflow:hidden;backdrop-filter:blur(4px) saturate(120%);-webkit-backdrop-filter:blur(4px) saturate(120%);}
.nav-bar::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(120deg,transparent,transparent 30px,rgba(255,255,255,0.06) 30px,rgba(255,255,255,0.06) 60px);pointer-events:none;}
.nav-bar::after{content:'';position:absolute;bottom:-2px;left:0;right:0;font-size:0;letter-spacing:0;text-align:left;opacity:1;pointer-events:none;line-height:1;height:2px;background:linear-gradient(90deg,transparent,rgba(255,200,180,0.6),rgba(255,180,180,0.8),rgba(255,200,180,0.6),transparent);}
.nav-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:24px;text-shadow:2px 2px 0 rgba(180,80,80,0.3), 0 0 30px rgba(255,220,220,0.5);letter-spacing:1px;position:relative;z-index:1;}
.nav-menu{display:flex;gap:12px;overflow-x:auto;padding-bottom:5px;position:relative;z-index:1;}
.nav-item{color:#ffffff;cursor:pointer;padding:10px 22px;border-radius:35px;transition:all 0.35s cubic-bezier(.4,0,.2,1);font-size:16px;white-space:nowrap;background:rgba(255, 255, 255, 0.2);font-weight:600;border:1px solid rgba(255,255,255,0.25);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);letter-spacing:0.5px;}
.nav-item.active{background:rgba(255,255,255,0.92);color:#c0405a;font-weight:700;box-shadow:0 4px 20px rgba(255,120,100,0.35), 0 1px 0 rgba(255,255,255,0.8) inset;border-color:transparent;}
.nav-item:hover{background:rgba(255, 255, 255, 0.4);transform:translateY(-3px);border-color:rgba(255,255,255,0.5);box-shadow:0 6px 20px rgba(255,255,255,0.25);}
.nav-item:active{transform:scale(0.95);}
.nav-item{position:relative;}
.pk-invite-badge{position:absolute;top:-5px;right:-5px;width:20px;height:20px;background:#ff3333;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;font-weight:900;box-shadow:0 2px 8px rgba(255,50,50,0.5);animation:pkBadgePulse 1.5s ease-in-out infinite;pointer-events:none;z-index:10;}
@keyframes pkBadgePulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.15);opacity:0.85;}}
.content-container{max-width:100%;margin:15px auto;padding:0 15px;position:relative;}
.page{display:none;background:rgba(255,252,248,0.75);backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%);border-radius:24px;padding:20px;box-shadow:0 8px 40px rgba(255,180,160,0.12), 0 2px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(200,150,140,0.1);margin-bottom:15px;border:1.5px solid rgba(255,235,225,0.8);position:relative;overflow:visible;transition:all 0.4s ease;}
.page::before{content:'';position:absolute;top:0;right:0;width:300px;height:300px;background:radial-gradient(circle,rgba(255,200,180,0.12) 0%,transparent 70%);pointer-events:none;}
.page.active{display:block;animation:fadeIn 0.5s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.page-title{color:#c04058;font-size:26px;margin-bottom:25px;padding-bottom:15px;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#e8637a,#f5a054,#e8637a) 1;display:flex;align-items:center;gap:10px;text-shadow:none;position:relative;letter-spacing:1px;}
.btn{padding:14px 22px;border:none;border-radius:18px;cursor:pointer;font-size:16px;font-weight:600;transition:all 0.3s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 10px rgba(250, 150, 130, 0.2);position:relative;overflow:hidden;}
.btn:disabled, .modal-btn:disabled, button:disabled{opacity:0.4 !important;filter:grayscale(80%) !important;cursor:not-allowed !important;pointer-events:none;transform:none !important;box-shadow:none !important;}
.btn-primary{background:linear-gradient(135deg, #ff9e9e 0%, #ffb999 50%, #ffc5a8 100%);color:#fff;border:1px solid rgba(255,255,255,0.3);background-size:200% 200%;animation:btnGradient 3s ease infinite;}
.btn-primary:hover{background:linear-gradient(135deg, #d5506a 0%, #e8904a 100%);transform:translateY(-3px);box-shadow:0 8px 25px rgba(255,150,130,0.4), 0 0 0 2px rgba(255,200,180,0.3);}
.btn-secondary{background:linear-gradient(135deg,#fff,#f8f0ed);color:#6a4040;border:1px solid #e8ccc4;}
.btn-secondary:hover{background:linear-gradient(135deg,#f8f0ed,#f0e0da);transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,180,160,0.25);}
.btn-danger{background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);color:white;border:1px solid rgba(255,255,255,0.2);}
.btn-success{background:linear-gradient(135deg, #f5a054 0%, #e8904a 100%);color:#fff;border:1px solid rgba(255,255,255,0.3);}
.btn:active{transform:scale(0.92) !important;}
.top-section{display:flex;gap:25px;flex-wrap:wrap;margin-bottom:30px;align-items:flex-start;flex-direction:column;}
.class-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin-bottom:15px;}
.class-list-section{margin-bottom:25px;width:100%;}
.class-list-wrapper{display:flex;gap:15px;align-items:flex-start;flex-wrap:wrap;}
.student-grid-section{margin-top:25px;position:relative;}
.student-header{position:sticky;top:60px;z-index:998;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;background:linear-gradient(145deg,#ffffff,#fff8f5);padding:16px 22px;border-radius:22px;border:2px solid #f0d8cc;box-shadow:0 4px 18px rgba(200,120,100,0.12),0 1px 3px rgba(0,0,0,0.04);margin-bottom:18px;}
.student-header .page-title{margin:0;font-size:20px;}
.data-mgmt-btn{background:linear-gradient(135deg, #e8637a 0%, #f5a054 100%);color:#fff;border:none;border-radius:20px;padding:10px 22px;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 6px 16px rgba(220,80,80,0.25);transition:all 0.3s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(4px);}
.data-mgmt-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 24px rgba(251,181,181,0.4);}
.home-pet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;justify-content:center;contain:layout style;}
@keyframes petFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.home-pet-card{width:100%;height:280px;position:relative;overflow:visible;animation:petFloat 4s ease-in-out infinite;animation-delay:var(--card-float-delay,0s);}
.home-pet-inner{width:100%;height:100%;background:linear-gradient(170deg,#ffffff 0%,#fdfaf8 50%,#faf5f2 100%);border-radius:22px;border:2px solid #e8d5cc;transition:border-color 0.4s, box-shadow 0.4s;cursor:pointer;box-shadow:0 4px 20px rgba(255,180,160,0.18), 0 1px 3px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.8) inset;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.home-pet-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#e8637a,#f07b68,#f5a054);border-radius:24px 24px 0 0;z-index:0;}
.home-pet-card:hover{transition:transform 0.2s ease;}
.home-pet-inner:hover{border-color:#d4a090;box-shadow:0 20px 40px rgba(255,160,140,0.25), 0 8px 16px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;}
@keyframes petFloatHover{0%{transform:translateY(-4px) scale(1.02)}50%{transform:translateY(-14px) scale(1.02)}100%{transform:translateY(-4px) scale(1.02)}}
.home-pet-card.dragging{opacity:0.4;transform:scale(0.95);}
.home-pet-card.drag-over .home-pet-inner{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,0.4),0 8px 14px #ffd8c8;}
.home-pet-card.drag-over{transform:translateY(-3px);}
.home-pet-top{width:100%;height:170px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff5ef 0%,#ffede5 100%);position:relative;overflow:visible;}
.home-pet-top::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#ffd8c8,transparent);}
.home-pet-top img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;position:relative;z-index:5;}
.home-pet-card:hover .home-pet-top img{transform:scale(1.05) rotate(-2deg);transition:transform 0.3s ease;}
.change-pet-btn{position:absolute;top:10px;left:10px;background:rgba(255, 180, 170, 0.9);color:white;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;z-index:2;opacity:0.9;transition:all 0.3s;}
.change-pet-btn:hover{opacity:1;transform:scale(1.1);background:#ff9f9f;}
.switch-pet-btn{position:absolute;bottom:68px;right:8px;background:linear-gradient(135deg,#7c8cf0,#5a6fdd);color:white;border:none;border-radius:18px;width:auto;height:28px;padding:0 10px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;z-index:6;opacity:0.95;transition:all 0.3s;box-shadow:0 2px 8px rgba(90,111,221,0.3);gap:3px;}
.switch-pet-btn:hover{opacity:1;transform:scale(1.05);background:linear-gradient(135deg,#5a6fdd,#4a5ecc);box-shadow:0 4px 12px rgba(90,111,221,0.5);}
.home-pet-level-badge{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,#e8637a,#d5506a);color:white;padding:4px 11px;border-radius:30px;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(220,80,100,0.35);border:1px solid rgba(255,255,255,0.3);}
.multi-pet-badge{position:absolute;top:10px;left:10px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:800;z-index:6;letter-spacing:0.5px;line-height:1.4;}
.multi-pet-badge.legend{background:linear-gradient(135deg,#ffd700,#ff8c00);color:#fff;box-shadow:0 2px 10px rgba(255,140,0,0.5);animation:legendBadgePulse 2s ease infinite;}
.multi-pet-badge.multi{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff;box-shadow:0 2px 8px rgba(124,58,237,0.4);}
@keyframes legendBadgePulse{0%,100%{box-shadow:0 2px 10px rgba(255,140,0,0.5)}50%{box-shadow:0 2px 18px rgba(255,140,0,0.8),0 0 30px rgba(255,200,0,0.3)}}
.home-pet-inner.has-legend{border-color:#ffd700;box-shadow:0 8px 20px rgba(255,200,0,0.25);}
.home-pet-inner.has-legend::before{background:linear-gradient(90deg,#ffd700,#ff8c00);}
.home-pet-inner.has-legend:hover{border-color:#ffaa00;box-shadow:0 16px 30px rgba(255,180,0,0.35);}

/* ===== 满级宠物炸裂特效 ===== */
.home-pet-card:has(.pet-maxed){}
.home-pet-inner.pet-maxed{border:3px solid #ffd700;background:#fff9f0;box-shadow:0 0 12px 2px rgba(255,200,0,0.3);}
.home-pet-inner.pet-maxed::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:22px;z-index:0;background:linear-gradient(135deg,#ffd700,#ff4500,#ff00ff,#00bfff,#00ff88,#ffd700);background-size:400% 400%;animation:holoShift 3s linear infinite;opacity:0.15;pointer-events:none;}
.home-pet-inner.pet-maxed::after{content:none;}
@keyframes holoShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes maxedFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.home-pet-card.pet-maxed .home-pet-top{background:linear-gradient(180deg,#fffbe0 0%,#fff5d0 40%,#ffefe8 100%);position:relative;overflow:hidden;}
.home-pet-card.pet-maxed .home-pet-top::before{content:none;}
.home-pet-card.pet-maxed .home-pet-level-badge{background:linear-gradient(135deg,#ffd700,#ff6b00);font-size:13px;font-weight:800;box-shadow:0 2px 10px rgba(255,140,0,0.6);}
@keyframes maxBadgePulse{
  0%,100%{box-shadow:0 2px 10px rgba(255,140,0,0.6)}
  50%{box-shadow:0 2px 20px rgba(255,140,0,0.9),0 0 30px rgba(255,200,0,0.4)}
}
.home-pet-card.pet-maxed .home-pet-middle{color:#b8860b;text-shadow:0 0 8px rgba(255,200,0,0.3);}
.home-pet-card.pet-maxed .home-pet-bottom{background:linear-gradient(180deg,#fff8e0,#fff0c8);}
.maxed-sparkle{position:absolute;pointer-events:none;z-index:10;width:6px;height:6px;border-radius:50%;animation:maxedSparkleAnim var(--dur) ease-out forwards;}
@keyframes maxedSparkleAnim{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  50%{opacity:0.8;}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}
}
.maxed-crown-float{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:22px;z-index:11;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(255,180,0,0.7));}
@keyframes crownBob{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-3deg)}
  50%{transform:translateX(-50%) translateY(-6px) rotate(3deg)}
}
.home-pet-card.pet-maxed:hover{}
.home-pet-inner.pet-maxed:hover{border:3px solid #ffaa00;box-shadow:0 0 18px 4px rgba(255,200,0,0.4);}
/* ===== 满级特效结束 ===== */
.growable-pet-hint{font-size:11px;color:#9b59b6;font-weight:600;margin-top:1px;}
.home-pet-middle{width:100%;height:50px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#c04058;border-bottom:1px solid rgba(200,180,170,0.4);letter-spacing:0.5px;}
.home-pet-bottom{width:100%;height:60px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;font-size:13px;color:#6a4a4a;background:linear-gradient(180deg,#faf5f2,#f5eee9);gap:2px;border-radius:0 0 22px 22px;padding:4px 10px;}
.home-pet-bottom-row{display:flex;align-items:center;justify-content:space-between;width:100%;}
.pet-bottom-growth{font-weight:700;text-align:left;}
.pet-bottom-coins{font-weight:700;text-align:right;}
.feed-warning{background:#fff0e0;border-radius:12px;padding:2px 8px;font-size:11px;color:#c25a2c;}
.dead-tag{background:#b0a0a0;color:#3e2a2a;text-decoration:line-through;}
.no-pet-card{width:100%;height:280px;background:linear-gradient(170deg,#fff8f4,#ffefe8);border:3px dashed #ffd0c0;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all 0.4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;}
.no-pet-card:hover{background:linear-gradient(170deg,#fff2ea,#ffe6d8);border-color:#ff9e9e;transform:translateY(-8px) scale(1.02);box-shadow:0 16px 32px rgba(255,160,140,0.2);}
.class-card{background:linear-gradient(145deg, #ffffff, #faf5f2);border-radius:22px;padding:20px;margin-bottom:15px;cursor:grab;transition:all 0.4s cubic-bezier(.4,0,.2,1);border:2px solid #e0cfc8;box-shadow:0 4px 20px rgba(255,200,180,0.15), 0 1px 0 rgba(255,255,255,0.6) inset;position:relative;display:inline-block;margin-right:15px;min-width:280px;user-select:none;overflow:hidden;border-left:5px solid #ffb0a0;}
.class-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#e8637a,#f07b68,#f5a054);border-radius:24px 24px 0 0;}
.class-card.dragging{opacity:0.4;transform:scale(0.95);border-color:#ff8d8d;cursor:grabbing;}
.class-card.drag-over{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,0.4),0 8px 14px #ffd8c8;transform:translateY(-3px);}
.class-card:hover{border-color:#ffb0a0;transform:translateY(-6px);box-shadow:0 16px 32px rgba(255,170,150,0.25), 0 1px 0 rgba(255,255,255,0.6) inset;}
.class-card.active{border-color:#e8637a;background:linear-gradient(145deg,#ffe0e0,#ffd0d0);box-shadow:0 6px 24px rgba(255,100,100,0.4), 0 1px 0 rgba(255,255,255,0.6) inset;border-left-color:#ff6060;}
.class-name{font-weight:800;color:#c04058;font-size:20px;margin-bottom:8px;}
.delete-class-btn{position:absolute;top:10px;right:10px;background:rgba(255, 140, 140, 0.9);color:white;border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:14px;z-index:2;}
.delete-class-btn:hover{background:#ff6b6b;transform:scale(1.1);}
.top-three-small{display:none;}
.rank-item-small{display:none;border-radius:22px;transition:all 0.4s cubic-bezier(.4,0,.2,1);}
.rank-avatar-small{display:none;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(250,168,168,0.3);}
.rank-avatar-small img{max-width:100%;max-height:100%;object-fit:contain;}
.rank-name-small{font-weight:600;font-size:14px;color:#3d2e2e;}
.rank-score-small{color:#c04058;font-weight:600;font-size:13px;}
.modal-pet-img{width:450px;height:450px;border-radius:28px;margin:0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff5ef;box-shadow:0 12px 30px rgba(255,200,188,0.3), 0 2px 0 rgba(255,255,255,0.4) inset;position:relative;border:2px solid rgba(255,230,220,0.6);transition:transform 0.3s ease;}
.modal-pet-img img{max-width:100%;max-height:100%;object-fit:contain;transition:transform 0.2s;}
.modal-student-title{text-align:center;font-size:24px;font-weight:800;color:#c04058;margin:0 0 15px 0;padding:0 10px;letter-spacing:1px;}
.pet-stats-row{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;margin:25px 0 20px;}
.pet-stats-col{flex:1;min-width:210px;background:#fffaf5;border-radius:24px;padding:18px 16px;box-shadow:0 4px 16px rgba(255,220,210,0.3), 0 1px 0 rgba(255,255,255,0.6) inset;border:1px solid rgba(255,225,215,0.5);}
.pet-stats-col.left{text-align:right;}
.pet-stats-col.right{text-align:left;}
.stat-item{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px;border-bottom:1px dashed #e0d0c8;font-size:15px;color:#3d2e2e;transition:background 0.2s ease;margin:2px 0;}
.stat-item .stat-label{font-weight:600;color:#a04050;}
.stat-item .stat-value{font-weight:500;}
.modal-action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:20px 0;}
.modal-btn{padding:12px;border:none;border-radius:18px;color:white;cursor:pointer;text-align:center;transition:all 0.3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.modal-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 20px rgba(0,0,0,0.12);}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,200,190,0.35);backdrop-filter:blur(3px) saturate(110%);-webkit-backdrop-filter:blur(3px) saturate(110%);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn 0.3s ease;will-change:opacity;transform:translateZ(0);}
.modal{background:#fffcf9;border-radius:36px;padding:30px;max-width:1100px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 60px rgba(255,150,130,0.25), 0 10px 20px rgba(0,0,0,0.06), 0 2px 0 rgba(255,255,255,0.6) inset;border:2px solid rgba(255,225,215,0.8);animation:modalEnter 0.4s cubic-bezier(.34,1.56,.64,1);}
.modal.large{max-width:1200px;width:95%;}
.modal.pk-fullscreen{max-width:100vw;width:100vw;height:100vh;max-height:100vh;padding:0;border-radius:0;overflow:hidden;display:flex;flex-direction:column;background:#000;border:none;box-shadow:none;}
.modal.pk-fullscreen .modal-title{display:none;}
.modal.pk-fullscreen .modal-actions{position:absolute;bottom:20px;right:20px;z-index:100;}
.modal.pk-fullscreen .modal-content{flex:1;overflow:hidden;display:flex;flex-direction:column;padding:0;margin:0;}
.modal.pk-fullscreen .pk-arena{flex:1;min-height:0;border-radius:0;border:none;margin:0;padding:0 40px;position:relative;overflow:visible;background:radial-gradient(ellipse 120% 60% at 50% 100%, #1a0800 0%, transparent 70%),
              radial-gradient(ellipse 80% 40% at 50% 95%, rgba(255,80,0,0.15) 0%, transparent 60%),
              radial-gradient(circle at 20% 30%, rgba(80,0,0,0.3) 0%, transparent 40%),
              radial-gradient(circle at 80% 30%, rgba(80,0,0,0.3) 0%, transparent 40%),
              #000;}
.modal.pk-fullscreen .pk-arena::before{content:'';position:absolute;bottom:0;left:10%;right:10%;height:8px;background:linear-gradient(90deg,transparent,rgba(255,150,50,0.6),rgba(255,200,50,0.8),rgba(255,150,50,0.6),transparent);border-radius:50%;box-shadow:0 0 40px 15px rgba(255,100,0,0.4),0 0 80px 30px rgba(255,50,0,0.2);filter:blur(2px);}
.modal.pk-fullscreen .pk-arena::after{content:'';position:absolute;bottom:0;left:5%;right:5%;height:60px;background:linear-gradient(to top,rgba(40,15,0,0.9),transparent);border-top:2px solid rgba(255,100,0,0.2);}
.modal.pk-fullscreen .pk-pet-img-container{width:min(520px, 45vw);height:min(600px, 52vw);background:transparent;border-radius:0;border:none;box-shadow:none;overflow:visible;}
.modal.pk-fullscreen .pk-pet-img-container img,
.modal.pk-fullscreen .pk-pet-img-container .monster-emoji{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 0 25px rgba(255,100,0,0.5)) drop-shadow(0 15px 40px rgba(0,0,0,0.9));}
/* 课堂PK机甲图片强制填满容器（原图262x300太小，需要拉伸填满） */
.modal.pk-fullscreen .pk-pet-img-container img.robot-mecha-img{width:100%!important;height:100%!important;object-fit:contain!important;}
.modal.pk-fullscreen .pk-vs{z-index:2;}
.modal.pk-fullscreen .pk-pet-side{position:relative;z-index:2;padding-top:24px;}
/* 27寸显示器(1080p)定位校准：整体上移2cm(≈76px)，左宠右移0.2cm(≈8px)，右宠左移0.2cm(≈8px) */
.modal.pk-fullscreen .pk-pet-side:first-of-type{transform:translateX(8px);}
.modal.pk-fullscreen .pk-pet-side:last-of-type{transform:translateX(-8px);}
.modal.pk-fullscreen .pk-pet-name{position:absolute;top:0;left:0;right:0;text-align:center;font-size:20px;color:#fff;text-shadow:0 0 15px rgba(255,150,50,0.9),2px 2px 6px #000;letter-spacing:1px;z-index:10;pointer-events:none;}
.modal.pk-fullscreen .pk-hp-bar-container{position:absolute;top:33px;left:50%;transform:translateX(-50%);width:80%;max-width:400px;height:20px;border-radius:10px;background:rgba(30,0,0,0.9);border:2px solid rgba(255,80,80,0.4);box-shadow:0 0 10px rgba(255,0,0,0.3);z-index:10;pointer-events:none;}
.modal.pk-fullscreen .pk-hp-bar{height:100%;border-radius:8px;}
.modal.pk-fullscreen .pk-hp-text{position:absolute;top:61px;left:0;right:0;text-align:center;color:#ffcc88;font-size:16px;font-weight:600;text-shadow:0 0 8px rgba(255,150,50,0.7),2px 2px 4px #000;z-index:10;pointer-events:none;}
.pk-arena-particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden;}
@keyframes emberFloat{0%{transform:translateY(0) scale(1);opacity:0.8;}50%{transform:translateY(-40vh) scale(0.6);opacity:0.4;}100%{transform:translateY(-80vh) scale(0.2);opacity:0;}}
@keyframes iceCrystalFloat{0%{transform:translateY(0) rotate(0deg) scale(1);opacity:0.9;}50%{transform:translateY(-30vh) rotate(180deg) scale(0.7);opacity:0.6;}100%{transform:translateY(-60vh) rotate(360deg) scale(0.3);opacity:0;}}
@keyframes lightningSpark{0%{transform:translate(0,0) scale(1);opacity:1;}50%{transform:translate(var(--lx),var(--ly)) scale(1.5);opacity:0.8;}100%{transform:translate(calc(var(--lx)*2),calc(var(--ly)*2)) scale(0);opacity:0;}}
@keyframes poisonBubble{0%{transform:translateY(0) scale(0.5);opacity:0.8;}50%{transform:translateY(-40vh) scale(1);opacity:0.6;}100%{transform:translateY(-80vh) scale(1.3);opacity:0;}}
@keyframes windLeaf{0%{transform:translate(0,0) rotate(0deg);opacity:0.9;}100%{transform:translate(var(--wx),var(--wy)) rotate(720deg);opacity:0;}}
@keyframes shadowWisp{0%{transform:translate(0,0) scale(0.5);opacity:0;}20%{opacity:0.8;}80%{opacity:0.6;}100%{transform:translate(var(--sx),var(--sy)) scale(1.5);opacity:0;}}
@keyframes meteorTrail{0%{transform:translate(0,0) rotate(-45deg) scale(1);opacity:1;}100%{transform:translate(var(--mx),var(--my)) rotate(-45deg) scale(0);opacity:0;}}
@keyframes holyGlow{0%{transform:translateY(0) scale(0.8);opacity:0;}30%{opacity:1;}70%{opacity:0.8;}100%{transform:translateY(-50vh) scale(1.5);opacity:0;}}
@keyframes lavaBubble{0%{transform:translateY(0) scale(0.6);opacity:0.9;}50%{transform:translateY(-20vh) scale(1.2);opacity:0.7;}100%{transform:translateY(-40vh) scale(0.4);opacity:0;}}
@keyframes starTwinkle{0%{transform:scale(0) rotate(0deg);opacity:0;}50%{transform:scale(1.2) rotate(180deg);opacity:1;}100%{transform:scale(0) rotate(360deg);opacity:0;}}
.arena-themed-bg{transition:background 0.8s ease,box-shadow 0.8s ease;}
.arena-themed-bg.fire-bg{background:radial-gradient(ellipse 120% 60% at 50% 100%,#3a1000 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 95%,rgba(255,80,0,0.4) 0%,transparent 60%),radial-gradient(circle at 20% 30%,rgba(200,50,0,0.5) 0%,transparent 40%),radial-gradient(circle at 80% 30%,rgba(200,50,0,0.5) 0%,transparent 40%),#1a0500;box-shadow:inset 0 0 100px rgba(255,100,0,0.3);}
.arena-themed-bg.ice-bg{background:radial-gradient(ellipse 120% 60% at 50% 100%,#001a33 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 95%,rgba(100,200,255,0.3) 0%,transparent 60%),radial-gradient(circle at 20% 30%,rgba(50,150,255,0.4) 0%,transparent 40%),radial-gradient(circle at 80% 30%,rgba(50,150,255,0.4) 0%,transparent 40%),#000a1a;box-shadow:inset 0 0 100px rgba(100,200,255,0.3);}
.arena-themed-bg.thunder-bg{background:radial-gradient(ellipse 120% 60% at 50% 100%,#1a1a00 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 95%,rgba(255,255,100,0.2) 0%,transparent 60%),radial-gradient(circle at 20% 30%,rgba(200,200,50,0.3) 0%,transparent 40%),radial-gradient(circle at 80% 30%,rgba(200,200,50,0.3) 0%,transparent 40%),#0a0a00;box-shadow:inset 0 0 100px rgba(255,255,100,0.2);}
.arena-themed-bg.poison-bg{background:radial-gradient(ellipse 120% 60% at 50% 100%,#0a1a00 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 95%,rgba(100,255,0,0.3) 0%,transparent 60%),radial-gradient(circle at 20% 30%,rgba(50,200,0,0.4) 0%,transparent 40%),radial-gradient(circle at 80% 30%,rgba(50,200,0,0.4) 0%,transparent 40%),#050a00;box-shadow:inset 0 0 100px rgba(100,255,0,0.3);}
.arena-themed-bg.wind-bg{background:radial-gradient(ellipse 120% 60% at 50% 100%,#001a2a 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 95%,rgba(150,220,255,0.3) 0%,transparent 60%),radial-gradient(circle at 20% 30%,rgba(100,180,255,0.4) 0%,transparent 40%),radial-gradient(circle at 80% 30%,rgba(100,180,255,0.4) 0%,transparent 40%),#000a15;box-shadow:inset 0 0 100px rgba(150,220,255,0.3);}
.arena-themed-bg.shadow-bg{background:radial-gradient(ellipse 120% 60% at 50% 100%,#1a001a 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 95%,rgba(150,50,255,0.3) 0%,transparent 60%),radial-gradient(circle at 20% 30%,rgba(100,0,200,0.4) 0%,transparent 40%),radial-gradient(circle at 80% 30%,rgba(100,0,200,0.4) 0%,transparent 40%),#0a000a;box-shadow:inset 0 0 100px rgba(150,50,255,0.3);}
.arena-themed-bg.meteor-bg{background:radial-gradient(ellipse 120% 60% at 50% 100%,#2a0a00 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 95%,rgba(255,100,0,0.4) 0%,transparent 60%),radial-gradient(circle at 20% 30%,rgba(255,50,0,0.5) 0%,transparent 40%),radial-gradient(circle at 80% 30%,rgba(255,50,0,0.5) 0%,transparent 40%),#150500;box-shadow:inset 0 0 100px rgba(255,100,0,0.4);}
.arena-themed-bg.holy-bg{background:radial-gradient(ellipse 120% 60% at 50% 100%,#2a2a00 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 95%,rgba(255,255,150,0.3) 0%,transparent 60%),radial-gradient(circle at 20% 30%,rgba(255,220,100,0.4) 0%,transparent 40%),radial-gradient(circle at 80% 30%,rgba(255,220,100,0.4) 0%,transparent 40%),#1a1a00;box-shadow:inset 0 0 100px rgba(255,255,150,0.3);}
.arena-themed-bg.lava-bg{background:radial-gradient(ellipse 120% 60% at 50% 100%,#3a0000 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 95%,rgba(255,50,0,0.5) 0%,transparent 60%),radial-gradient(circle at 20% 30%,rgba(200,0,0,0.5) 0%,transparent 40%),radial-gradient(circle at 80% 30%,rgba(200,0,0,0.5) 0%,transparent 40%),#1a0000;box-shadow:inset 0 0 100px rgba(255,50,0,0.4);}
.arena-themed-bg.starburst-bg{background:radial-gradient(ellipse 120% 60% at 50% 100%,#2a1a00 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 95%,rgba(255,200,50,0.3) 0%,transparent 60%),radial-gradient(circle at 20% 30%,rgba(255,180,0,0.4) 0%,transparent 40%),radial-gradient(circle at 80% 30%,rgba(255,180,0,0.4) 0%,transparent 40%),#150a00;box-shadow:inset 0 0 100px rgba(255,200,50,0.3);}
.arena-themed-bg.dragonfire-bg{background:radial-gradient(ellipse 120% 60% at 50% 100%,#3a0500 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 95%,rgba(255,30,0,0.5) 0%,transparent 60%),radial-gradient(circle at 20% 30%,rgba(180,0,0,0.5) 0%,transparent 40%),radial-gradient(circle at 80% 30%,rgba(180,0,0,0.5) 0%,transparent 40%),#1a0200;box-shadow:inset 0 0 100px rgba(255,30,0,0.4);}
.arena-themed-bg.iceground-bg{background:radial-gradient(ellipse 120% 60% at 50% 100%,#002233 0%,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 95%,rgba(150,220,255,0.4) 0%,transparent 60%),radial-gradient(circle at 20% 30%,rgba(100,180,255,0.5) 0%,transparent 40%),radial-gradient(circle at 80% 30%,rgba(100,180,255,0.5) 0%,transparent 40%),#001122;box-shadow:inset 0 0 100px rgba(150,220,255,0.4);}
/* 限制碎片尺寸，防止过大 */
.modal.pk-fullscreen .jh-torn-piece-stay{max-width:520px;max-height:600px;}
.modal.pk-fullscreen .pk-vs{z-index:2;}
.modal-overlay:has(.pk-fullscreen){background:rgba(0,0,0,0.95);backdrop-filter:none;padding:0;}
@keyframes attackLungeRight{
  0%{transform:translateX(0) scale(1);}
  30%{transform:translateX(60px) scale(1.12);}
  50%{transform:translateX(80px) scale(1.15);}
  70%{transform:translateX(30px) scale(1.05);}
  100%{transform:translateX(0) scale(1);}
}
@keyframes attackLungeLeft{
  0%{transform:translateX(0) scale(1);}
  30%{transform:translateX(-60px) scale(1.12);}
  50%{transform:translateX(-80px) scale(1.15);}
  70%{transform:translateX(-30px) scale(1.05);}
  100%{transform:translateX(0) scale(1);}
}
.pk-pet-img-container.attack-lunge-right{animation:attackLungeRight 0.5s ease-in-out;}
.pk-pet-img-container.attack-lunge-left{animation:attackLungeLeft 0.5s ease-in-out;}
.pk-result-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.35) 100%);animation:fadeIn 0.5s ease;pointer-events:none;}
.pk-result-title{font-size:64px;font-weight:900;color:#ffd700;text-shadow:0 0 30px rgba(255,215,0,0.8),0 0 60px rgba(255,150,0,0.5),3px 3px 0 #553300,0 2px 10px rgba(0,0,0,0.95);margin-bottom:20px;letter-spacing:4px;}
.pk-result-detail{font-size:22px;color:#ffddaa;text-shadow:0 0 10px rgba(255,150,50,0.5),0 1px 8px rgba(0,0,0,0.95);margin:6px 0;letter-spacing:1px;}
.pk-result-draw{font-size:56px;font-weight:900;color:#aaaacc;text-shadow:0 0 20px rgba(150,150,200,0.6),0 2px 10px rgba(0,0,0,0.95);}
.modal-title{font-size:26px;font-weight:800;color:#c04058;margin-bottom:20px;text-align:center;}
.modal-content{margin-bottom:25px;font-size:16px;color:#3d2e2e;}
.modal-actions{display:flex;gap:15px;justify-content:space-between;}
.notification{position:fixed;top:20px;right:20px;background:rgba(255,248,243,0.95);border-radius:22px;padding:20px;box-shadow:0 10px 30px rgba(255,150,130,0.25), 0 1px 0 rgba(255,255,255,0.6) inset;z-index:1001;max-width:300px;border-left:5px solid #ffa2a2;animation:notifSlide 0.4s cubic-bezier(.34,1.2,.64,1);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.home-stat{background:linear-gradient(135deg,#e8637a,#f5a054);color:#fff;padding:15px 20px;border-radius:20px;text-align:center;min-width:150px;box-shadow:0 4px 14px rgba(200,80,60,0.2);transition:all 0.35s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,0.3);backdrop-filter:blur(4px);}
.home-stat:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 10px 24px rgba(255,170,150,0.35);}
.dead-pet-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);border-radius:30px;display:flex;align-items:center;justify-content:center;z-index:5;font-size:42px;}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.upgrade-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.95);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:99999;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;overflow:hidden;animation:overlayFadeIn 0.5s ease;will-change:opacity;transform:translateZ(0);}
@keyframes overlayFadeIn{from{opacity:0}to{opacity:1}}
.upgrade-box{text-align:center;position:relative;z-index:2;perspective:800px;width:500px;height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.upgrade-old-pet{width:200px;height:200px;margin:0 auto;border-radius:50%;padding:16px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#fff5ee,#ffe0d0);box-shadow:0 0 0 6px rgba(200,180,160,0.4),0 0 20px 10px rgba(180,140,100,0.2);transition:all 0.4s;position:relative;z-index:3;}
.upgrade-old-pet img,.upgrade-old-pet span{width:100%;height:100%;object-fit:contain;display:block;}
.upgrade-transform-active .upgrade-old-pet{animation:petShake 0.6s ease,petShrinkAway 0.8s 0.6s ease forwards;}
@keyframes petShake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-14px) rotate(-3deg)}20%,40%,60%,80%{transform:translateX(14px) rotate(3deg)}}
@keyframes petShrinkAway{0%{transform:scale(1);opacity:1;filter:brightness(1)}40%{transform:scale(0.5);filter:brightness(3) saturate(0)}100%{transform:scale(0);opacity:0;filter:brightness(6) saturate(0)}}
.upgrade-energy-ring{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;border:3px solid rgba(255,215,0,0.9);transform:translate(-50%,-50%);pointer-events:none;opacity:0;z-index:1;}
.upgrade-transform-active .upgrade-energy-ring{animation:energyRingExpand 1.2s 0.8s ease-out forwards;}
.upgrade-transform-active .upgrade-energy-ring:nth-child(2){animation-delay:1.0s;border-color:rgba(255,150,50,0.8);}
.upgrade-transform-active .upgrade-energy-ring:nth-child(3){animation-delay:1.2s;border-color:rgba(255,100,100,0.7);}
@keyframes energyRingExpand{0%{width:0;height:0;opacity:1;border-width:5px}60%{opacity:0.7}100%{width:700px;height:700px;opacity:0;border-width:1px}}
.upgrade-flash{position:absolute;top:0;left:0;width:100%;height:100%;background:white;pointer-events:none;opacity:0;z-index:10;}
.upgrade-transform-active .upgrade-flash{animation:screenFlash 0.7s 1.3s ease-out;}
@keyframes screenFlash{0%{opacity:0}8%{opacity:1}30%{opacity:0.7}100%{opacity:0}}
.upgrade-new-pet{width:300px;height:300px;margin:0 auto;border-radius:50%;padding:20px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#fffaf5 0%,#fff0e0 50%,#ffe8c8 100%);box-shadow:0 0 0 8px rgba(255,215,0,0.7),0 0 40px 20px rgba(255,180,0,0.5),0 0 80px 40px rgba(255,120,0,0.25),0 0 120px 60px rgba(255,80,0,0.1);opacity:0;transform:scale(0);position:relative;z-index:3;}
.upgrade-new-pet img,.upgrade-new-pet span{width:100%;height:100%;object-fit:contain;display:block;}
.upgrade-reveal .upgrade-new-pet{animation:newPetReveal 0.9s cubic-bezier(0.175,0.885,0.32,1.275) forwards,newPetGlow 1.5s 0.9s ease infinite alternate;}
@keyframes newPetReveal{0%{opacity:0;transform:scale(0) rotate(-15deg)}40%{opacity:1;transform:scale(1.2) rotate(5deg)}70%{transform:scale(0.95) rotate(-2deg)}100%{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes newPetGlow{from{box-shadow:0 0 0 8px rgba(255,215,0,0.7),0 0 40px 20px rgba(255,180,0,0.5),0 0 80px 40px rgba(255,120,0,0.2)}to{box-shadow:0 0 0 16px rgba(255,215,0,0.9),0 0 60px 30px rgba(255,180,0,0.6),0 0 120px 60px rgba(255,100,0,0.3),0 0 160px 80px rgba(255,60,0,0.1)}}
.upgrade-rays{position:absolute;top:50%;left:50%;width:700px;height:700px;margin-left:-350px;margin-top:-350px;pointer-events:none;opacity:0;z-index:1;}
.upgrade-reveal .upgrade-rays{animation:raysAppear 0.6s ease forwards,raysSpin 10s 0.6s linear infinite;}
@keyframes raysAppear{from{opacity:0;transform:scale(0.3)}to{opacity:1;transform:scale(1)}}
@keyframes raysSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.upgrade-ray{position:absolute;top:0;left:50%;width:3px;height:50%;transform-origin:bottom center;background:linear-gradient(to top,rgba(255,215,0,0.6),rgba(255,215,0,0));border-radius:2px;margin-left:-1.5px;}
.upgrade-title{font-size:52px;font-weight:900;background:linear-gradient(90deg,#ffd700,#ffaa00,#ff6b35,#ffaa00,#ffd700);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;margin:20px 0 10px;opacity:0;transform:translateY(30px);letter-spacing:4px;filter:drop-shadow(0 0 20px rgba(255,200,0,0.5));}
.upgrade-reveal .upgrade-title{animation:titleAppear 0.6s 0.3s ease forwards,titleShine 2s 0.9s linear infinite;}
@keyframes titleAppear{from{opacity:0;transform:translateY(30px) scale(0.8)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes titleShine{from{background-position:200% center}to{background-position:-200% center}}
.upgrade-subtitle{font-size:30px;color:#fff5e6;text-shadow:0 0 20px rgba(255,180,100,0.6),2px 2px 0 #aa6a6a;opacity:0;transform:translateY(20px);}
.upgrade-reveal .upgrade-subtitle{animation:subtitleAppear 0.6s 0.6s ease forwards;}
@keyframes subtitleAppear{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.upgrade-stage-badge{display:inline-block;margin-top:14px;padding:10px 32px;border-radius:50px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#fff;font-size:20px;font-weight:800;letter-spacing:3px;box-shadow:0 4px 20px rgba(255,140,0,0.5);opacity:0;}
.upgrade-reveal .upgrade-stage-badge{animation:badgePop 0.5s 0.9s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}
@keyframes badgePop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.upgrade-sparkle{position:absolute;pointer-events:none;border-radius:50%;z-index:5;}
@keyframes sparkleFloat{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}}
.upgrade-screen-shake{animation:screenShake 0.5s ease;}
@keyframes screenShake{0%,100%{transform:translate(0)}12%{transform:translate(-10px,8px)}25%{transform:translate(8px,-10px)}37%{transform:translate(-8px,6px)}50%{transform:translate(6px,-6px)}62%{transform:translate(-4px,4px)}75%{transform:translate(4px,-2px)}}
.upgrade-dismiss{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.35);font-size:14px;opacity:0;z-index:5;letter-spacing:1px;}
.upgrade-reveal .upgrade-dismiss{animation:dismissFade 0.5s 2.5s ease forwards;}
@keyframes dismissFade{from{opacity:0}to{opacity:1}}
.upgrade-arrow{font-size:60px;margin:10px 0;opacity:0;color:#ffd700;filter:drop-shadow(0 0 15px rgba(255,200,0,0.6));}
.upgrade-transform-active .upgrade-arrow{animation:arrowPulse 0.5s 0.2s ease forwards;}
@keyframes arrowPulse{0%{opacity:0;transform:scale(0.3) translateY(10px)}50%{opacity:1;transform:scale(1.3) translateY(-5px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.firework{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;}
.student-list-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #ffdbd1;transition:background 0.2s ease;border-radius:8px;}
.custom-action-item{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid #ffe2d6;}
.credit-float{position:relative;bottom:auto;right:auto;background:rgba(255,250,245,0.85);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:14px 28px;border-radius:60px;border:1.5px solid rgba(255,210,200,0.6);box-shadow:0 8px 24px rgba(255,180,160,0.2);font-size:18px;font-weight:700;color:#a04050;z-index:999;pointer-events:none;display:flex;gap:10px;animation:floatCredit 3s infinite ease-in-out;will-change:transform;transform:translateZ(0);}
@keyframes floatCredit {0%{transform:translateY(0px)}50%{transform:translateY(-10px)}100%{transform:translateY(0px)}}
.pet-select-item{text-align:center;padding:10px;border:1px solid #ffcfcf;border-radius:20px;cursor:pointer;transition:all 0.2s;}
.pet-select-item:hover{background:#fff5ef;transform:translateY(-2px);}
.pet-select-img{width:80px;height:80px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;background:#ffefea;border-radius:50%;overflow:hidden;}
.adopt-modal .pet-select-grid{display:grid;gap:18px;max-height:60vh;overflow-y:auto;padding:8px;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));}
.adopt-modal .pet-select-item{width:250px;height:250px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;background:#fffcf7;border-radius:28px;border:2px solid #ffe0d4;margin:0 auto;transition:all 0.3s cubic-bezier(.4,0,.2,1);}
.adopt-modal .pet-select-img{width:180px;height:180px;}
.batch-checkbox-list{display:flex;flex-wrap:wrap;gap:6px;max-height:60vh;overflow-y:auto;border:1.5px solid rgba(255,210,200,0.6);border-radius:18px;padding:12px;margin-bottom:15px;background:#fffaf5;}
.batch-checkbox-list > div:first-child{width:100%;margin-bottom:4px;}
.batch-student-item{display:flex;align-items:center;padding:5px 10px;border:1px solid #ffe2d6;border-radius:12px;gap:6px;background:#fff;font-size:14px;white-space:nowrap;}
.history-log-item{padding:14px 16px;border-bottom:1px solid #ffdbd1;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:background 0.2s ease;border-radius:12px;margin:4px 0;}
.history-log-item.history-reverted{background:repeating-linear-gradient(135deg, transparent, transparent 8px, rgba(200,180,160,0.04) 8px, rgba(200,180,160,0.04) 16px);}
@media (max-width: 900px) {
  .pet-stats-row { flex-direction: column; gap: 15px; }
  .pet-stats-col { width: 100%; text-align: center; }
  .modal-pet-img { width: 280px; height: 280px; }
}
.home-pet-top .egg-img{max-width:100%;max-height:100%;object-fit:contain;}
.heart-float{position:fixed;pointer-events:none;z-index:10000;font-size:22px;user-select:none;animation:heartFloatUp 1.2s ease-out forwards;filter:drop-shadow(0 0 3px rgba(255,80,80,0.8));will-change:transform,opacity;contain:strict;}
@keyframes heartFloatUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.8);
  }
  70% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-130px) scale(1.2);
  }
}

/* PK 战场专用样式 */
.pk-arena{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0;background:linear-gradient(135deg, #2a1a15, #1a0a05);padding:30px;border-radius:35px;border:4px solid #ffaa66;position:relative;min-height:380px;}
.pk-pet-side{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;transition:all 0.5s ease;}
.pk-pet-img-container{width:200px;height:200px;background:transparent;border-radius:0;display:flex;align-items:center;justify-content:center;border:none;box-shadow:none;overflow:visible;position:relative;transition:all 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);}
.pk-pet-img-container img, .pk-pet-img-container .monster-emoji{max-width:100%;max-height:100%;object-fit:contain;font-size:100px;}
.pk-pet-name{font-size:20px;font-weight:800;color:#ffdd99;text-shadow:1px 1px 0 #aa5533;}
.pk-hp-bar-container{width:100%;max-width:250px;height:25px;background:#330000;border-radius:15px;overflow:hidden;border:2px solid #cc9999;box-shadow:inset 0 2px 5px rgba(0,0,0,0.5);}
.pk-hp-bar{height:100%;background:linear-gradient(90deg, #ff6b6b, #ff9f9f);width:100%;transition:width 0.5s ease;border-radius:15px;}
.pk-hp-text{font-weight:700;color:#ffddbb;margin-top:5px;}
.pk-vs{font-size:48px;font-weight:900;color:#ffaa66;text-shadow:3px 3px 0 #553322;animation:pulse 1s infinite;}
.pk-log-container{background:rgba(0,0,0,0.3);border:2px solid rgba(255,170,102,0.5);border-radius:20px;padding:15px;max-height:200px;overflow-y:auto;margin-top:20px;font-family:monospace;font-size:14px;color:#ffddbb;text-shadow:0 1px 4px rgba(0,0,0,0.9);}
.pk-log-item{padding:4px 0;border-bottom:1px dashed #ffaa66;}
.pk-log-item.attack{color:#ffaa66;}
.pk-log-item.critical{color:#ff5555;font-weight:800;text-shadow:0 0 3px #ff0000;}
.pk-log-item.result{color:#55ff55;font-weight:800;font-size:16px;}
.attack-animation{animation:attackShake 0.3s ease-in-out, attackFlash 0.2s 2;}
@keyframes attackShake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
@keyframes attackFlash {
  0% { filter: brightness(1); text-shadow: 0 0 0px rgba(255,100,0,0); }
  50% { filter: brightness(1.8); text-shadow: 0 0 20px rgba(255,100,0,0.9); }
  100% { filter: brightness(1); text-shadow: 0 0 0px rgba(255,100,0,0); }
}
.damage-number{position:absolute;font-size:32px;font-weight:900;color:#ff5555;text-shadow:2px 2px 0 #550000,0 0 10px rgba(255,0,0,0.5);pointer-events:none;z-index:9999;animation:floatUp 1.2s ease-out forwards;will-change:transform,opacity;}
@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0px) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1.5); }
}
.pk-opponent-item{display:flex;align-items:center;gap:15px;padding:12px;border:2px solid #ffcfcf;border-radius:22px;cursor:pointer;transition:all 0.35s cubic-bezier(.4,0,.2,1);background:#fffcf7;box-shadow:0 2px 10px rgba(255,200,180,0.15);}
.pk-opponent-item:hover{background:#fff0e8;transform:translateY(-4px) scale(1.02);border-color:#ffa8a8;box-shadow:0 8px 20px rgba(255,160,140,0.2);}
.pk-opponent-item.selected:hover{background:#ee3333;transform:scale(1.03);border-color:#ff2222;}
.pk-opponent-avatar{width:60px;height:60px;border-radius:50%;overflow:hidden;background:#ffefea;display:flex;align-items:center;justify-content:center;}
/* 红色高亮选中效果 */
.pk-opponent-item.selected{border:3px solid #ff2222;background:#ff4444;color:#fff;box-shadow:0 0 15px rgba(255, 50, 50, 0.5);transform:scale(1.03);}
.pk-opponent-item.selected div{color:#fff;}
/* 圆形子弹特效 */
.projectile{position:fixed;pointer-events:none;z-index:10002;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle, #ffaa33, #ff6600);box-shadow:0 0 10px 2px #ffaa33;filter:blur(0px);will-change:transform;}
/* === 变身动画 === */
@keyframes petShake {
  0%,100%{transform:translate(0,0) rotate(0deg);}
  10%{transform:translate(-8px,-3px) rotate(-3deg);}
  20%{transform:translate(8px,3px) rotate(3deg);}
  30%{transform:translate(-12px,-5px) rotate(-5deg);}
  40%{transform:translate(12px,5px) rotate(5deg);}
  50%{transform:translate(-15px,-2px) rotate(-7deg);}
  60%{transform:translate(15px,2px) rotate(7deg);}
  70%{transform:translate(-18px,-4px) rotate(-8deg);}
  80%{transform:translate(18px,4px) rotate(8deg);}
  90%{transform:translate(-10px,-1px) rotate(-4deg);}
}
@keyframes crackLines {
  0%{opacity:0;clip-path:polygon(50% 50%,50% 50%,50% 50%);}
  100%{opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
}
@keyframes crackExpand {
  0%{opacity:0;transform:scale(0.5);}
  50%{opacity:1;transform:scale(1.2);}
  100%{opacity:0;transform:scale(2.5);}
}
@keyframes monsterReveal {
  0%{opacity:0;transform:scale(0.1) rotate(-30deg);filter:brightness(4) saturate(0);}
  40%{opacity:1;transform:scale(1.2) rotate(5deg);filter:brightness(2) saturate(1.5);}
  70%{transform:scale(0.95) rotate(-2deg);filter:brightness(1.2) saturate(1.2);}
  100%{opacity:1;transform:scale(1) rotate(0deg);filter:brightness(1) saturate(1);}
}
/* 右侧专用变身动画：含 scaleX(-1) 翻转，使机器人朝向左侧 */
@keyframes monsterRevealRight {
  0%{opacity:0;transform:scaleX(-1) scale(0.1) rotate(-30deg);filter:brightness(4) saturate(0);}
  40%{opacity:1;transform:scaleX(-1) scale(1.2) rotate(5deg);filter:brightness(2) saturate(1.5);}
  70%{transform:scaleX(-1) scale(0.95) rotate(-2deg);filter:brightness(1.2) saturate(1.2);}
  100%{opacity:1;transform:scaleX(-1) scale(1) rotate(0deg);filter:brightness(1) saturate(1);}
}
@keyframes battleIdle {
  0%,100%{transform:translateY(0px) scale(1);opacity:1;}
  50%{transform:translateY(-14px) scale(1.04);opacity:1;}
}
@keyframes battleIdleFlipped {
  0%,100%{transform:translateY(0px) scaleX(-1) scale(1);opacity:1;}
  50%{transform:translateY(-14px) scaleX(-1) scale(1.04);opacity:1;}
}
@keyframes screenShake {
  0%,100%{transform:translate(0,0);}
  15%{transform:translate(-8px,5px);}
  30%{transform:translate(8px,-5px);}
  45%{transform:translate(-6px,8px);}
  60%{transform:translate(6px,-8px);}
  75%{transform:translate(-4px,4px);}
}
@keyframes hitFlash {
  0%{filter:brightness(1) saturate(1);}
  20%{filter:brightness(4) saturate(0) drop-shadow(0 0 30px #fff);}
  40%{filter:brightness(1) saturate(2) drop-shadow(0 0 40px #ff3300);}
  60%{filter:brightness(3) saturate(0.5) drop-shadow(0 0 20px #ffcc00);}
  80%{filter:brightness(1.5) saturate(1.2);}
  100%{filter:brightness(1) saturate(1);}
}
@keyframes explosionParticle {
  0%{transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--ex),var(--ey)) scale(0);opacity:0;}
}
@keyframes energyCharge {
  0%{transform:scale(0.5);opacity:0;box-shadow:0 0 5px rgba(255,100,0,0.2);}
  50%{transform:scale(1.3);opacity:0.9;box-shadow:0 0 50px rgba(255,200,0,0.9);}
  100%{transform:scale(1.8);opacity:0;box-shadow:0 0 80px rgba(255,50,0,0.4);}
}
@keyframes fireballTrail {
  0%{transform:scale(1);opacity:1;filter:blur(0px);}
  100%{transform:scale(2);opacity:0;filter:blur(4px);}
}
@keyframes criticalSlash {
  0%{transform:rotate(-45deg) scaleX(0);opacity:0;}
  30%{transform:rotate(-45deg) scaleX(1.5);opacity:1;}
  100%{transform:rotate(-45deg) scaleX(2);opacity:0;}
}
@keyframes chargeGlow {
  0%{box-shadow:0 0 10px rgba(255,100,0,0.3);border-color:rgba(255,150,0,0.5);}
  50%{box-shadow:0 0 40px rgba(255,200,0,0.8),0 0 80px rgba(255,100,0,0.4);border-color:rgba(255,220,0,0.9);}
  100%{box-shadow:0 0 10px rgba(255,100,0,0.3);border-color:rgba(255,150,0,0.5);}
}
.pk-pet-img-container.battle-idle img{animation:battleIdle 2.5s ease-in-out infinite;}
.pk-pet-img-container.battle-idle-no-flip img{animation:battleIdle 2.5s ease-in-out infinite;}
.pk-pet-img-container.battle-idle-right img{animation:battleIdleFlipped 2.5s ease-in-out infinite;}
.pk-arena.screen-shake{animation:screenShake 0.4s ease-in-out;}
.pk-pet-img-container.hit-flash img{animation:hitFlash 0.5s ease-in-out;}
.pk-pet-img-container.charging{animation:chargeGlow 0.6s ease-in-out 2;}
/* === 技能名称显示 === */
.skill-announce{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:200;pointer-events:none;font-size:42px;font-weight:900;color:#fff;text-shadow:0 0 20px rgba(255,200,0,0.9),0 0 60px rgba(255,100,0,0.7),3px 3px 0 #330000;letter-spacing:6px;white-space:nowrap;animation:skillAnnounce 1.2s ease-out forwards;}
@keyframes skillAnnounce{0%{opacity:0;transform:translate(-50%,-50%) scale(3) rotate(-5deg);filter:blur(10px);}20%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(0deg);filter:blur(0);}60%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);}100%{opacity:0;transform:translate(-50%,-50%) scale(0.8) translateY(-30px);}}
/* === 冰冻特效 === */
@keyframes iceShatter{0%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1;}100%{transform:translate(var(--ex),var(--ey)) scale(0) rotate(var(--rot));opacity:0;}}
.ice-shard{position:absolute;pointer-events:none;z-index:100;clip-path:polygon(50% 0%,20% 60%,0% 100%,100% 100%,80% 60%);animation:iceShatter 1s ease-out forwards;filter:blur(0.5px);}
@keyframes iceFreeze{0%{box-shadow:none;filter:none;}20%{box-shadow:0 0 60px rgba(100,200,255,1),inset 0 0 50px rgba(150,220,255,0.7);filter:saturate(0.2) brightness(2) hue-rotate(180deg);}50%{box-shadow:0 0 100px rgba(100,200,255,0.9),inset 0 0 40px rgba(150,220,255,0.5);filter:saturate(0.3) brightness(1.8) hue-rotate(160deg);}80%{box-shadow:0 0 60px rgba(100,200,255,0.6),inset 0 0 20px rgba(150,220,255,0.3);filter:saturate(0.5) brightness(1.3) hue-rotate(120deg);}100%{box-shadow:none;filter:none;}}
.pk-pet-img-container.ice-freeze{animation:iceFreeze 1.4s ease-in-out;}
.ice-block-encase{position:absolute;top:5%;left:10%;width:80%;height:90%;pointer-events:none;z-index:101;border:3px solid rgba(150,220,255,0.8);border-radius:8px;background:rgba(100,200,255,0.15);box-shadow:0 0 30px rgba(100,200,255,0.6),inset 0 0 20px rgba(200,240,255,0.4);animation:iceBlockAnim 1.2s ease-in-out forwards;}
@keyframes iceBlockAnim{0%{opacity:0;transform:scale(0.5);}20%{opacity:1;transform:scale(1.05);}70%{opacity:0.9;transform:scale(1);}100%{opacity:0;transform:scale(1.1);}}
/* === 雷电特效 === */
.lightning-bolt{position:fixed;pointer-events:none;z-index:10002;width:10px;background:linear-gradient(180deg,#fff,#aaeeff,#88ddff,#4488ff);box-shadow:0 0 20px 8px rgba(100,180,255,0.9),0 0 60px 15px rgba(50,100,255,0.6),0 0 100px 25px rgba(50,50,255,0.3);animation:lightningFlash 0.4s ease-out forwards;}
@keyframes lightningFlash{0%{opacity:1;transform:scaleY(1) scaleX(1);}30%{opacity:1;transform:scaleY(1.05) scaleX(1.3);}50%{opacity:0.9;}100%{opacity:0;transform:scaleY(1.1) scaleX(0.5);}}
@keyframes thunderShake{0%,100%{transform:translate(0,0);filter:brightness(1);}5%{transform:translate(-20px,10px);filter:brightness(4);}15%{transform:translate(20px,-10px);filter:brightness(1.5);}25%{transform:translate(-15px,15px);filter:brightness(3.5);}35%{transform:translate(15px,-15px);filter:brightness(1);}45%{transform:translate(-25px,5px);filter:brightness(3);}55%{transform:translate(18px,-8px);filter:brightness(1.5);}65%{transform:translate(-10px,12px);filter:brightness(2);}75%{transform:translate(12px,-6px);}85%{transform:translate(-5px,5px);}}
.pk-arena.thunder-shake{animation:thunderShake 0.8s ease-in-out;}
.electric-arc{position:absolute;pointer-events:none;z-index:102;width:3px;height:20px;background:#88eeff;box-shadow:0 0 8px #88eeff,0 0 15px #4488ff;border-radius:2px;animation:arcDance 0.3s ease-in-out infinite alternate;}
@keyframes arcDance{0%{transform:rotate(var(--arc-angle)) translateY(-5px) scaleY(0.8);}100%{transform:rotate(var(--arc-angle)) translateY(5px) scaleY(1.2);}}
.electric-orb{position:absolute;pointer-events:none;z-index:101;border-radius:50%;background:radial-gradient(circle,#fff,#88eeff,#4488ff,transparent);box-shadow:0 0 20px rgba(100,200,255,0.9);animation:orbPulse 0.6s ease-in-out forwards;}
@keyframes orbPulse{0%{transform:scale(0);opacity:1;}50%{transform:scale(1.5);opacity:0.8;}100%{transform:scale(2);opacity:0;}}
/* === 毒雾特效 === */
@keyframes poisonPulse{0%{box-shadow:none;filter:none;}15%{box-shadow:0 0 50px rgba(100,255,50,0.9),0 0 100px rgba(50,200,0,0.6);filter:hue-rotate(80deg) saturate(3) brightness(0.6);}40%{box-shadow:0 0 80px rgba(100,255,50,1),0 0 120px rgba(50,200,0,0.8);filter:hue-rotate(100deg) saturate(3) brightness(0.5);}70%{box-shadow:0 0 60px rgba(100,255,50,0.7),0 0 80px rgba(50,200,0,0.5);filter:hue-rotate(90deg) saturate(2) brightness(0.7);}100%{box-shadow:none;filter:none;}}
.pk-pet-img-container.poison-hit{animation:poisonPulse 1.5s ease-in-out;}
.poison-cloud{position:absolute;pointer-events:none;z-index:100;border-radius:50%;background:radial-gradient(circle,rgba(80,255,30,0.7),rgba(0,150,0,0.3),transparent);animation:poisonCloudAnim 2s ease-out forwards;}
@keyframes poisonCloudAnim{0%{transform:scale(0.3);opacity:1;}40%{transform:scale(2);opacity:0.7;}100%{transform:scale(4) translateY(-30px);opacity:0;}}
.poison-skull{position:absolute;pointer-events:none;z-index:102;font-size:24px;animation:skullFloat 1.5s ease-out forwards;}
@keyframes skullFloat{0%{transform:translateY(0) scale(0.5);opacity:0;}20%{opacity:1;transform:translateY(-10px) scale(1);}100%{transform:translateY(-80px) scale(0.5) rotate(20deg);opacity:0;}}
.poison-bubble{position:absolute;pointer-events:none;z-index:100;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(150,255,100,0.8),rgba(50,200,0,0.4));animation:bubbleRise 1.8s ease-out forwards;}
@keyframes bubbleRise{0%{transform:translateY(0) scale(0.3);opacity:0.8;}100%{transform:translateY(-120px) scale(1.2);opacity:0;}}
/* === 旋风特效 === */
.tornado-ring{position:absolute;pointer-events:none;z-index:100;border:4px solid rgba(180,220,255,0.9);border-radius:50%;animation:tornadoSpin 1s linear forwards;}
@keyframes tornadoSpin{0%{transform:scale(0.2) rotateX(60deg);opacity:1;}50%{transform:scale(1.5) rotateX(60deg) translateY(-20px);opacity:0.8;}100%{transform:scale(3.5) rotateX(60deg) translateY(-60px);opacity:0;}}
@keyframes windBlast{0%{filter:none;transform:translateX(0);}10%{transform:translateX(25px) skewX(-12deg);}25%{transform:translateX(-20px) skewX(10deg);}40%{transform:translateX(18px) skewX(-8deg);}55%{transform:translateX(-15px) skewX(6deg);}70%{transform:translateX(10px) skewX(-4deg);}85%{transform:translateX(-5px) skewX(2deg);}100%{filter:none;transform:translateX(0) skewX(0deg);}}
.pk-pet-img-container.wind-hit{animation:windBlast 1s ease-in-out;}
.wind-line{position:fixed;pointer-events:none;z-index:10001;height:3px;background:linear-gradient(90deg,transparent,rgba(180,220,255,0.8),rgba(220,240,255,0.9),rgba(180,220,255,0.8),transparent);border-radius:2px;animation:windLineSweep 0.5s ease-out forwards;}
@keyframes windLineSweep{0%{transform:translateX(-100%) scaleX(0.5);opacity:1;}100%{transform:translateX(100%) scaleX(1.5);opacity:0;}}
.wind-debris{position:absolute;pointer-events:none;z-index:101;background:rgba(100,150,100,0.7);border-radius:2px;animation:debrisFly 1s ease-out forwards;}
@keyframes debrisFly{0%{transform:translate(0,0) rotate(0deg);opacity:1;}100%{transform:translate(var(--dx),var(--dy)) rotate(720deg);opacity:0;}}
/* === 暗影特效 === */
@keyframes shadowSlash{0%{clip-path:polygon(0 50%,0 50%,100% 50%,100% 50%);opacity:1;}50%{clip-path:polygon(0 0,0 100%,100% 100%,100% 0);opacity:0.95;}100%{clip-path:polygon(0 0,0 100%,100% 100%,100% 0);opacity:0;}}
.shadow-slash-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100;background:linear-gradient(135deg,transparent 15%,rgba(80,0,120,0.9) 40%,rgba(200,0,255,1) 50%,rgba(80,0,120,0.9) 60%,transparent 85%);animation:shadowSlash 0.6s ease-out forwards;}
@keyframes darkPulse{0%{box-shadow:none;filter:none;}20%{box-shadow:0 0 60px rgba(100,0,200,1),0 0 120px rgba(50,0,100,0.7);filter:brightness(0.1) contrast(3);}50%{box-shadow:0 0 80px rgba(150,0,255,0.8),0 0 150px rgba(80,0,150,0.5);filter:brightness(0.3) contrast(2);}100%{box-shadow:none;filter:none;}}
.pk-pet-img-container.dark-hit{animation:darkPulse 1s ease-in-out;}
.dark-vortex{position:absolute;top:50%;left:50%;pointer-events:none;z-index:99;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,0.9),rgba(50,0,100,0.6),transparent);animation:vortexSpin 1s linear forwards;}
@keyframes vortexSpin{0%{transform:scale(0) rotate(0deg);opacity:1;}50%{transform:scale(1.5) rotate(360deg);opacity:0.8;}100%{transform:scale(2) rotate(720deg);opacity:0;}}
.dark-lightning{position:absolute;pointer-events:none;z-index:103;width:3px;background:linear-gradient(180deg,rgba(150,0,255,0.9),rgba(80,0,200,0.6),transparent);box-shadow:0 0 10px rgba(150,0,255,0.8);animation:darkLightningFlash 0.4s ease-out forwards;}
@keyframes darkLightningFlash{0%{opacity:1;transform:scaleY(1);}100%{opacity:0;transform:scaleY(1.2);}}
/* === 陨石特效 === */
@keyframes meteorFall{0%{transform:translate(var(--startX),var(--startY)) scale(0.3) rotate(-30deg);opacity:1;}70%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1;}100%{transform:translate(0,10px) scale(1.3) rotate(5deg);opacity:0;}}
.meteor{position:fixed;pointer-events:none;z-index:10003;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#ffcc44,#ffaa33,#ff4400,#881100);box-shadow:0 0 50px 20px rgba(255,100,0,0.9),0 0 100px 40px rgba(255,50,0,0.6),0 0 150px 60px rgba(255,0,0,0.3);animation:meteorFall 0.7s ease-in forwards;}
.meteor-tail{position:fixed;pointer-events:none;z-index:10002;width:35px;height:120px;background:linear-gradient(to bottom,rgba(255,220,80,0.9),rgba(255,150,0,0.6),rgba(255,80,0,0.3),transparent);border-radius:50%;filter:blur(4px);animation:meteorTailFade 0.6s ease-out forwards;}
@keyframes meteorTailFade{0%{opacity:1;transform:scaleY(1);}100%{opacity:0;transform:translateY(-30px) scaleY(1.3);}}
.meteor-crater{position:absolute;bottom:0;left:50%;pointer-events:none;z-index:98;width:0;height:0;border-radius:50%;background:radial-gradient(ellipse,rgba(255,100,0,0.8),rgba(100,30,0,0.5),transparent);animation:craterExpand 0.8s ease-out forwards;}
@keyframes craterExpand{0%{width:0;height:0;margin-left:0;opacity:1;}50%{width:150px;height:40px;margin-left:-75px;opacity:0.8;}100%{width:200px;height:50px;margin-left:-100px;opacity:0;}}
.fire-rain{position:fixed;pointer-events:none;z-index:10001;width:4px;height:20px;background:linear-gradient(to bottom,#ffaa00,#ff4400,transparent);border-radius:2px;animation:fireRainFall 0.8s linear forwards;}
@keyframes fireRainFall{0%{transform:translateY(-20px);opacity:1;}100%{transform:translateY(100vh);opacity:0.3;}}
/* === 圣光特效 === */
@keyframes holyBeam{0%{transform:scaleY(0);opacity:0;}20%{transform:scaleY(1);opacity:1;}60%{transform:scaleY(1);opacity:0.9;}100%{transform:scaleY(1.3);opacity:0;}}
.holy-beam{position:absolute;top:-200%;left:10%;width:80%;height:300%;pointer-events:none;z-index:100;background:linear-gradient(180deg,transparent,rgba(255,255,200,0.4),rgba(255,255,100,0.9),rgba(255,215,0,0.8),rgba(255,255,100,0.9),rgba(255,255,200,0.4),transparent);animation:holyBeam 1s ease-out forwards;}
@keyframes holyPulse{0%{filter:none;box-shadow:none;}20%{filter:brightness(4) saturate(0.3);box-shadow:0 0 80px rgba(255,255,100,1),0 0 160px rgba(255,200,50,0.7);}50%{filter:brightness(3) saturate(0.5);box-shadow:0 0 60px rgba(255,255,100,0.8),0 0 120px rgba(255,200,50,0.5);}100%{filter:none;box-shadow:none;}}
.pk-pet-img-container.holy-hit{animation:holyPulse 1.2s ease-in-out;}
.holy-star{position:absolute;pointer-events:none;z-index:103;font-size:18px;animation:holyStarFall 1.5s ease-out forwards;}
@keyframes holyStarFall{0%{transform:translateY(-50px) scale(0);opacity:0;}20%{opacity:1;transform:translateY(0) scale(1);}80%{opacity:0.8;transform:translateY(10px) scale(1.1);}100%{opacity:0;transform:translateY(20px) scale(0.5);}}
/* === 岩浆特效 === */
.lava-splash{position:absolute;pointer-events:none;z-index:100;width:20px;height:20px;border-radius:50% 50% 50% 0;background:radial-gradient(circle,#ffee00,#ffcc00,#ff6600,#cc2200);box-shadow:0 0 15px rgba(255,100,0,0.9),0 0 30px rgba(255,50,0,0.5);animation:lavaSplash 1.1s ease-out forwards;}
@keyframes lavaSplash{0%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1;}50%{opacity:0.8;}100%{transform:translate(var(--ex),var(--ey)) scale(0.2) rotate(var(--rot));opacity:0;}}
@keyframes lavaHit{0%{filter:none;}15%{filter:brightness(2.5) saturate(3) sepia(0.7);}40%{filter:brightness(1.8) saturate(2) sepia(0.5);}100%{filter:none;}}
.pk-pet-img-container.lava-hit{animation:lavaHit 1s ease-in-out;}
.lava-geyser{position:absolute;pointer-events:none;z-index:102;width:20px;bottom:0;background:linear-gradient(to top,#ff3300,#ff6600,#ffaa00,#ffee00,rgba(255,255,200,0.8));border-radius:10px 10px 0 0;animation:geyserErupt 0.8s ease-out forwards;box-shadow:0 0 20px rgba(255,100,0,0.8);}
@keyframes geyserErupt{0%{height:0;opacity:1;}40%{height:var(--geyser-h);opacity:1;}100%{height:var(--geyser-h);opacity:0;}}
.lava-crack{position:absolute;bottom:0;left:0;width:100%;height:30%;pointer-events:none;z-index:98;background:linear-gradient(to top,rgba(255,50,0,0.8),rgba(255,100,0,0.4),transparent);animation:lavaCrackGlow 1s ease-in-out forwards;}
@keyframes lavaCrackGlow{0%{opacity:0;}30%{opacity:1;}100%{opacity:0;}}
/* === 技能弹道通用 === */
.skill-projectile{position:fixed;pointer-events:none;z-index:10002;will-change:transform;}
/* === 星爆特效 === */
.starburst{position:absolute;pointer-events:none;z-index:100;width:8px;height:45px;background:linear-gradient(to bottom,#fff,#ffdd44,#ff8800,transparent);border-radius:4px;transform-origin:center bottom;animation:starburstAnim 0.9s ease-out forwards;}
@keyframes starburstAnim{0%{transform:rotate(var(--angle)) scaleY(0);opacity:1;}30%{transform:rotate(var(--angle)) scaleY(1.5);opacity:1;}60%{transform:rotate(var(--angle)) scaleY(2.5);opacity:0.8;}100%{transform:rotate(var(--angle)) scaleY(3);opacity:0;}}
.galaxy-swirl{position:absolute;top:50%;left:50%;width:150px;height:150px;margin:-75px 0 0 -75px;pointer-events:none;z-index:99;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,100,200,0.6),rgba(100,100,255,0.6),rgba(100,255,200,0.6),rgba(255,255,100,0.6),rgba(255,100,200,0.6));animation:galaxySwirlAnim 1.2s linear forwards;filter:blur(3px);}
@keyframes galaxySwirlAnim{0%{transform:scale(0) rotate(0deg);opacity:0.8;}50%{transform:scale(1.5) rotate(360deg);opacity:0.6;}100%{transform:scale(2.5) rotate(720deg);opacity:0;}}
/* === 全屏闪光/色调 === */
.screen-flash{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:10004;animation:screenFlashAnim 0.3s ease-out forwards;}
@keyframes screenFlashAnim{0%{opacity:1;}100%{opacity:0;}}
.screen-tint{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:10000;animation:screenTintAnim 1s ease-out forwards;}
@keyframes screenTintAnim{0%{opacity:0;}20%{opacity:0.4;}80%{opacity:0.3;}100%{opacity:0;}}
/* === 屏幕震动通用 === */
@keyframes screenShakeHeavy{0%,100%{transform:translate(0,0);}10%{transform:translate(-8px,5px);}20%{transform:translate(8px,-5px);}30%{transform:translate(-6px,8px);}40%{transform:translate(6px,-8px);}50%{transform:translate(-10px,3px);}60%{transform:translate(7px,-3px);}70%{transform:translate(-4px,6px);}80%{transform:translate(4px,-4px);}}
.pk-arena.screen-shake-heavy{animation:screenShakeHeavy 0.5s ease-in-out;}
.crack-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;background:radial-gradient(circle,rgba(255,200,0,0.9) 0%,rgba(255,80,0,0.6) 40%,transparent 70%);animation:crackExpand 1s ease-out forwards;}
.crack-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9;background-image:linear-gradient(35deg,transparent 45%,rgba(20,20,20,0.9) 45%,rgba(20,20,20,0.9) 46%,transparent 46%),
    linear-gradient(-25deg,transparent 48%,rgba(20,20,20,0.9) 48%,rgba(20,20,20,0.9) 49%,transparent 49%),
    linear-gradient(70deg,transparent 44%,rgba(20,20,20,0.9) 44%,rgba(20,20,20,0.9) 45%,transparent 45%),
    linear-gradient(-60deg,transparent 47%,rgba(20,20,20,0.9) 47%,rgba(20,20,20,0.9) 48%,transparent 48%);animation:crackLines 0.5s ease-out forwards;}
.explosion-container{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none;z-index:20;}
.explosion-particle{position:absolute;border-radius:50%;animation:explosionParticle 0.7s ease-out forwards;will-change:transform,opacity;contain:strict;}
.energy-ring{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;border:5px solid rgba(255,150,0,0.9);animation:energyCharge 0.7s ease-out forwards;pointer-events:none;z-index:15;}
.fireball-effect{position:fixed;pointer-events:none;z-index:10003;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,#fff 0%,#ffffaa 15%,#ffcc00 30%,#ff6600 55%,#ff0000 75%,#880000 90%,transparent 100%);box-shadow:0 0 40px 20px rgba(255,100,0,0.9),0 0 80px 40px rgba(255,50,0,0.6),0 0 120px 60px rgba(255,0,0,0.3);will-change:transform;}
.fireball-trail{position:fixed;pointer-events:none;z-index:10002;width:45px;height:45px;border-radius:50%;background:radial-gradient(circle,rgba(255,220,50,0.9) 0%,rgba(255,150,0,0.6) 40%,rgba(255,80,0,0.3) 70%,transparent 100%);animation:fireballTrail 0.5s ease-out forwards;}
.critical-slash{position:absolute;top:50%;left:50%;width:200px;height:8px;margin:-4px 0 0 -100px;background:linear-gradient(90deg,transparent,#fff,#ffcc00,#fff,transparent);border-radius:4px;pointer-events:none;z-index:25;animation:criticalSlash 0.4s ease-out forwards;box-shadow:0 0 20px 5px rgba(255,200,0,0.8);}
#usbConnectBtn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 20px rgba(255,180,100,0.35);}
#usbConnectBtn:active{transform:scale(0.95);}
/* ===== 背景音乐控制面板 ===== */
.music-panel{position:fixed;bottom:80px;right:20px;z-index:10005;display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(255,206,192,0.85),rgba(255,214,224,0.85));border-radius:40px;padding:8px 16px;box-shadow:0 6px 20px rgba(255,150,130,0.35);border:2px solid #ffe0d4;transition:all 0.3s;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.music-toggle{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,#ff9e9e,#ffb999);color:white;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(255,150,120,0.3);transition:all 0.2s;}
.music-toggle:hover{transform:scale(1.1);box-shadow:0 6px 14px rgba(255,150,120,0.4);}
.music-toggle:active{transform:scale(0.92);}
.music-toggle.playing{animation:musicPulse 1.5s ease-in-out infinite;}
@keyframes musicPulse{0%,100%{box-shadow:0 4px 10px rgba(255,150,120,0.3);}50%{box-shadow:0 4px 18px rgba(255,120,120,0.6);}}
.music-expand-btn{width:20px;height:20px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,0.7);color:#aa6666;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;box-shadow:0 2px 6px rgba(255,150,120,0.2);}
.music-expand-btn:hover{background:#fff;transform:scale(1.1);}
.music-expand-btn.open{transform:rotate(180deg);}
.music-vol-wrap{display:flex;align-items:center;gap:6px;overflow:hidden;max-width:0;opacity:0;transition:all 0.3s;}
.music-panel.expanded .music-vol-wrap{max-width:160px;opacity:1;}
.music-vol-icon{font-size:16px;cursor:pointer;user-select:none;}
.music-vol-slider{-webkit-appearance:none;appearance:none;width:90px;height:6px;background:linear-gradient(90deg,#ff9e9e,#ffb999);border-radius:3px;outline:none;cursor:pointer;}
.music-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #ff9e9e;box-shadow:0 2px 6px rgba(255,150,120,0.3);cursor:pointer;}
.music-vol-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #ff9e9e;box-shadow:0 2px 6px rgba(255,150,120,0.3);cursor:pointer;}
.music-name{font-size:12px;color:#885a5a;white-space:nowrap;max-width:0;opacity:0;overflow:hidden;transition:all 0.3s;}
.music-panel.expanded .music-name{max-width:120px;opacity:1;margin-left:4px;}

/* ===== 全局装饰美化 ===== */
/* 浮动装饰角标 */
.deco-corner{position:fixed;pointer-events:none;z-index:0;opacity:0.08;}
.deco-corner-tl{top:70px;left:10px;font-size:120px;transform:rotate(-15deg);}
.deco-corner-br{bottom:20px;right:10px;font-size:100px;transform:rotate(10deg);}
.deco-corner-bl{bottom:80px;left:15px;font-size:80px;transform:rotate(-8deg);}

/* 可爱浮动气泡 */
.deco-bubble{position:fixed;pointer-events:none;z-index:0;border-radius:50%;opacity:0;animation:decoFloat var(--float-dur,12s) var(--float-delay,0s) ease-in-out infinite;will-change:transform,opacity;contain:strict;--bubble-opacity:0.15;}
@keyframes decoFloat{
  0%{opacity:0;transform:translateY(100vh) scale(0.3);}
  10%{opacity:var(--bubble-opacity,0.12);}
  90%{opacity:var(--bubble-opacity,0.12);}
  100%{opacity:0;transform:translateY(-20vh) scale(1);}
}

/* 空页面可爱提示装饰 */
.empty-deco{text-align:center;padding:50px 20px;}
.empty-deco-img{font-size:80px;margin-bottom:15px;animation:emptyBounce 2s ease-in-out infinite;filter:drop-shadow(0 4px 12px rgba(255,150,130,0.3));}
@keyframes emptyBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.empty-deco-text{color:#c0a0a0;font-size:18px;font-weight:700;margin-bottom:8px;}
.empty-deco-sub{color:#d0b8b8;font-size:13px;}

/* 排行榜美化 - 全新成就感排行榜 */
.honor-board-small{position:relative;padding:10px 0;}
.honor-board-small h3{display:none;}

/* 顶部统计横幅 */
.rank-stats-banner{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:30px;}
.rank-stat-chip{background:linear-gradient(135deg,#fff8f2,#ffede3);border:2px solid #ffdcc8;border-radius:20px;padding:10px 22px;text-align:center;min-width:120px;box-shadow:0 3px 10px rgba(255,180,150,0.15);}
.rank-stat-chip .chip-num{font-size:26px;font-weight:900;color:#e06060;line-height:1.2;}
.rank-stat-chip .chip-label{font-size:12px;color:#b07070;font-weight:600;}

/* 领奖台区域 */
.podium-section{display:flex;align-items:flex-end;justify-content:center;gap:0;margin:20px auto 40px;max-width:700px;position:relative;padding-top:40px;}
.podium-slot{animation:podiumRise 0.6s cubic-bezier(.4,0,.2,1) backwards;}
.podium-slot:hover{transform:translateY(-8px);}

/* 领奖台柱子 */
.podium-pillar{width:180px;border-radius:18px 18px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:18px;position:relative;overflow:hidden;}
.podium-pillar::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 20px,rgba(255,255,255,0.08) 20px,rgba(255,255,255,0.08) 40px);pointer-events:none;}
.podium-slot.gold .podium-pillar{height:160px;background:linear-gradient(180deg,#fff3c4 0%,#ffd700 30%,#f0b800 100%);box-shadow:0 -4px 20px rgba(255,215,0,0.5),inset 0 2px 0 rgba(255,255,255,0.5);border:2px solid #e6ac00;border-bottom:none;}
.podium-slot.silver .podium-pillar{height:120px;background:linear-gradient(180deg,#f0f0f0 0%,#c0c0c0 30%,#a8a8a8 100%);box-shadow:0 -4px 15px rgba(192,192,192,0.5),inset 0 2px 0 rgba(255,255,255,0.6);border:2px solid #aaa;border-bottom:none;}
.podium-slot.bronze .podium-pillar{height:90px;background:linear-gradient(180deg,#f0d4b0 0%,#cd7f32 30%,#b06820 100%);box-shadow:0 -4px 15px rgba(205,127,50,0.4),inset 0 2px 0 rgba(255,255,255,0.4);border:2px solid #a06020;border-bottom:none;}
.podium-rank-num{font-size:36px;font-weight:900;opacity:0.25;line-height:1;font-family:'Nunito',sans-serif;}
.podium-slot.gold .podium-rank-num{color:#8b6800;}
.podium-slot.silver .podium-rank-num{color:#666;}
.podium-slot.bronze .podium-rank-num{color:#6b3a10;}
.podium-growth-val{font-size:14px;font-weight:800;margin-top:4px;background:rgba(255,255,255,0.35);border-radius:12px;padding:2px 12px;}
.podium-slot.gold .podium-growth-val{color:#6b4e00;}
.podium-slot.silver .podium-growth-val{color:#444;}
.podium-slot.bronze .podium-growth-val{color:#5a3010;}

/* 头像悬浮在柱子上方 */
.podium-avatar-wrap{position:relative;margin-bottom:-10px;z-index:2;}
.podium-avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;transition:transform 0.3s;}
.podium-slot:hover .podium-avatar{transform:scale(1.08);}
.podium-avatar img{max-width:100%;max-height:100%;object-fit:contain;}
.podium-slot.gold .podium-avatar{width:110px;height:110px;border:5px solid #ffd700;background:linear-gradient(135deg,#fffbe0,#fff2b0);box-shadow:0 0 0 4px rgba(255,215,0,0.25),0 8px 24px rgba(255,200,0,0.4);}
.podium-slot.silver .podium-avatar{width:90px;height:90px;border:4px solid #c0c0c0;background:linear-gradient(135deg,#f8f8f8,#e8e8e8);box-shadow:0 0 0 3px rgba(192,192,192,0.25),0 6px 18px rgba(150,150,150,0.3);}
.podium-slot.bronze .podium-avatar{width:85px;height:85px;border:4px solid #cd7f32;background:linear-gradient(135deg,#fff0d8,#ffe0b8);box-shadow:0 0 0 3px rgba(205,127,50,0.25),0 6px 16px rgba(180,120,40,0.3);}

/* 冠军皇冠 */
.podium-crown{position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-size:30px;z-index:3;animation:crownBob 2s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgba(255,180,0,0.6));}

/* 奖牌 */
.podium-medal{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:white;position:absolute;bottom:-6px;right:-6px;z-index:3;box-shadow:0 2px 8px rgba(0,0,0,0.2);font-family:'Nunito',sans-serif;}
.podium-slot.gold .podium-medal{background:linear-gradient(135deg,#ffd700,#f0a000);}
.podium-slot.silver .podium-medal{background:linear-gradient(135deg,#d0d0d0,#999);}
.podium-slot.bronze .podium-medal{background:linear-gradient(135deg,#e0a060,#a06020);}

/* 名字标签 */
.podium-name{font-size:16px;font-weight:800;margin-top:4px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.podium-slot.gold .podium-name{color:#8b6800;}
.podium-slot.silver .podium-name{color:#555;}
.podium-slot.bronze .podium-name{color:#6b3a10;}
.podium-pet-name{font-size:12px;color:#b08080;margin-top:1px;}

/* 冠军光环动画 */
.podium-slot.gold .podium-avatar::before{content:'';position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border-radius:50%;z-index:-1;background:conic-gradient(from 0deg,#ffd700,#ffaa00,#ffd700,#fff0a0,#ffd700);animation:goldGlow 3s linear infinite;opacity:0.5;}
@keyframes goldGlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.podium-slot.gold::after{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,0,0.15) 0%,transparent 70%);pointer-events:none;z-index:0;animation:goldPulse 2s ease-in-out infinite;}
@keyframes goldPulse{0%,100%{opacity:0.4;transform:translateX(-50%) scale(1);}50%{opacity:0.8;transform:translateX(-50%) scale(1.15);}}

/* 领奖台底座 */
.podium-base{width:100%;max-width:560px;height:12px;margin:-2px auto 0;background:linear-gradient(180deg,#ffd0b0,#ffb888);border-radius:0 0 16px 16px;box-shadow:0 4px 12px rgba(255,160,100,0.3);}

/* ===== 完整排行列表 ===== */
.full-rank-section{margin-top:30px;}
.full-rank-title{font-size:18px;font-weight:800;color:#d06a6a;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.rank-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;align-content:start;}
.rank-row{position:relative;display:flex;align-items:center;gap:8px;padding:8px 12px;background:linear-gradient(135deg,#fff,#fff8f4);border:1.5px solid #ffe0d4;border-radius:14px;cursor:pointer;transition:all 0.3s ease;overflow:hidden;animation:rankSlideIn 0.4s ease backwards;}
.rank-row:hover{transform:translateY(-3px);border-color:#ffcaba;box-shadow:0 4px 14px rgba(255,170,140,0.25);}
.rank-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:14px 0 0 14px;}
.rank-row.top1{background:linear-gradient(135deg,#fffdf0,#fff8e0);border-color:#ffd700;}
.rank-row.top1::before{background:linear-gradient(180deg,#ffd700,#f0a800);}
.rank-row.top2{background:linear-gradient(135deg,#f8f8f8,#f0f0f0);border-color:#c0c0c0;}
.rank-row.top2::before{background:linear-gradient(180deg,#d0d0d0,#aaa);}
.rank-row.top3{background:linear-gradient(135deg,#fff8f0,#fff0e0);border-color:#e0a060;}
.rank-row.top3::before{background:linear-gradient(180deg,#e0a060,#b07030);}
.rank-row:not(.top1):not(.top2):not(.top3)::before{background:linear-gradient(180deg,#ffc8b0,#ffb098);}

.rank-num{width:28px;height:28px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0;font-family:'Nunito',sans-serif;}
.rank-row.top1 .rank-num{background:linear-gradient(135deg,#ffd700,#f0a800);color:#fff;box-shadow:0 2px 6px rgba(255,200,0,0.4);}
.rank-row.top2 .rank-num{background:linear-gradient(135deg,#d0d0d0,#aaa);color:#fff;box-shadow:0 2px 6px rgba(160,160,160,0.4);}
.rank-row.top3 .rank-num{background:linear-gradient(135deg,#e0a060,#b07030);color:#fff;box-shadow:0 2px 6px rgba(200,130,60,0.3);}
.rank-row:not(.top1):not(.top2):not(.top3) .rank-num{background:#fff0e8;color:#d07070;border:1.5px solid #ffd8c8;}

.rank-row-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#ffefe5;border:2px solid #ffd0c0;}
.rank-row-avatar img{max-width:100%;max-height:100%;object-fit:contain;}

.rank-row-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.rank-row-name{font-size:13px;font-weight:700;color:#553333;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-row-pet{font-size:11px;color:#b08080;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 称号徽章 */
.rank-title-badge{font-size:9px;font-weight:700;padding:1px 6px;border-radius:12px;white-space:nowrap;line-height:1.4;flex-shrink:0;}
.rank-title-badge.champion{background:linear-gradient(135deg,#fff3c4,#ffe066);color:#8b6800;border:1px solid #ffd700;}
.rank-title-badge.elite{background:linear-gradient(135deg,#e8e8e8,#d0d0d0);color:#555;border:1px solid #bbb;}
.rank-title-badge.brave{background:linear-gradient(135deg,#ffe0c0,#ffc888);color:#7a4a10;border:1px solid #e0a050;}
.rank-title-badge.rising{background:linear-gradient(135deg,#e0f0ff,#b8d8ff);color:#3060a0;border:1px solid #90b8e0;}
.rank-title-badge.starter{background:linear-gradient(135deg,#f0ffe0,#d8f0b8);color:#507030;border:1px solid #b0d888;}

/* 成长值徽章 */
.rank-growth-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;background:linear-gradient(135deg,#ff6b6b,#ff8e8e);color:#fff;font-size:11px;font-weight:800;border-radius:10px;white-space:nowrap;flex-shrink:0;box-shadow:0 1px 4px rgba(255,100,100,0.3);}
.rank-row.top1 .rank-growth-badge{background:linear-gradient(135deg,#ffd700,#ffaa00);}
.rank-row.top2 .rank-growth-badge{background:linear-gradient(135deg,#c0c0c0,#a0a0a0);}
.rank-row.top3 .rank-growth-badge{background:linear-gradient(135deg,#e0a060,#c88040);}

/* 排行空状态 */
.rank-empty-state{text-align:center;padding:60px 20px;}
.rank-empty-state .empty-icon{font-size:64px;margin-bottom:16px;opacity:0.7;}
.rank-empty-state .empty-text{font-size:18px;color:#c08080;font-weight:700;}
.rank-empty-state .empty-sub{font-size:14px;color:#d0a0a0;margin-top:8px;}

/* 排行榜入场动画 */
@keyframes rankSlideIn{
  from{opacity:0;transform:scale(0.9);}
  to{opacity:1;transform:scale(1);}
}
.rank-row{animation:rankSlideIn 0.3s ease backwards;}
.rank-row:nth-child(1){animation-delay:0.02s;}
.rank-row:nth-child(2){animation-delay:0.04s;}
.rank-row:nth-child(3){animation-delay:0.06s;}
.rank-row:nth-child(4){animation-delay:0.08s;}
.rank-row:nth-child(5){animation-delay:0.10s;}
.rank-row:nth-child(6){animation-delay:0.12s;}
.rank-row:nth-child(7){animation-delay:0.14s;}
.rank-row:nth-child(8){animation-delay:0.16s;}
.rank-row:nth-child(9){animation-delay:0.18s;}
.rank-row:nth-child(10){animation-delay:0.20s;}

/* 领奖台入场 */
@keyframes podiumRise{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}
.podium-slot{animation:podiumRise 0.6s cubic-bezier(.4,0,.2,1) backwards;}
.podium-slot.silver{animation-delay:0.1s;}
.podium-slot.gold{animation-delay:0.25s;}
.podium-slot.bronze{animation-delay:0.15s;}

/* 兼容旧样式引用 */
.top-three-small{display:none;}
.rank-item-small{display:none;border-radius:22px;transition:all 0.4s cubic-bezier(.4,0,.2,1);}
.rank-avatar-small{display:none;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(250,168,168,0.3);}

/* 分隔线装饰 */
.section-divider{height:2px;margin:20px 0;background:linear-gradient(90deg,transparent 5%,#ffd0c0 30%,#ffb8b8 50%,#ffd0c0 70%,transparent 95%);border-radius:1px;}

/* 卡片网格空状态 */
.no-pet-card{width:100%;height:280px;background:linear-gradient(170deg,#fff8f4,#ffefe8);border:3px dashed #ffd0c0;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all 0.4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;}
.no-pet-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 40%,rgba(255,200,180,0.15),transparent 70%);pointer-events:none;}
.no-pet-card:hover{background:linear-gradient(170deg,#fff2ea,#ffe6d8);border-color:#ff9e9e;transform:translateY(-8px) scale(1.02);box-shadow:0 16px 32px rgba(255,160,140,0.2);}

/* 页脚装饰 */
.cute-footer{text-align:center;padding:35px 20px 25px;margin-top:10px;color:#c0a0a0;font-size:13px;position:relative;font-weight:600;letter-spacing:0.5px;}
.cute-footer::before{content:'';display:block;margin:0 auto 18px;width:200px;height:1px;background:linear-gradient(90deg,transparent,#ffc8b8,transparent);}
.cute-footer-icons{font-size:22px;letter-spacing:16px;margin-bottom:8px;opacity:0.5;animation:footerWave 3s ease-in-out infinite;}
@keyframes footerWave{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* 可爱小装饰图案 - 爪印 */
.paw-deco{position:absolute;pointer-events:none;opacity:0.06;font-size:30px;transform:rotate(var(--paw-rot,0deg));transition:opacity 0.3s ease;}
/* ===== 全局装饰结束 ===== */


/* === Kept @-rules from enhancement section === */
@keyframes bgShift{
  0%{background-position:0% 50%}
  25%{background-position:50% 0%}
  50%{background-position:100% 50%}
  75%{background-position:50% 100%}
  100%{background-position:0% 50%}
}
@keyframes btnGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes modalEnter{
  from{opacity:0;transform:scale(0.92) translateY(15px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}
@keyframes notifSlide{
  from{transform:translateX(120%);opacity:0;}
  to{transform:translateX(0);opacity:1;}
}
@keyframes badgeHoverPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.12)}
  100%{transform:scale(1)}
}
@media (max-width: 768px) {
  .nav-bar{
    flex-wrap:wrap;
    padding:12px 16px;
    gap:10px;
  }
  .nav-menu{
    order:3;
    width:100%;
    justify-content:center;
  }
  .nav-item{
    padding:8px 16px;
    font-size:14px;
  }
  .content-container{
    padding:0 12px;
    margin:15px auto;
  }
  .page{
    padding:20px 16px;
    border-radius:24px;
  }
  .page-title{
    font-size:20px;
  }
  .class-actions{
    grid-template-columns:1fr;
  }
  .home-pet-grid{
    justify-content:center;
  }
  .student-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .student-header > div{
    flex-wrap:wrap;
  }
  .data-mgmt-btn{
    padding:8px 14px;
    font-size:13px;
  }
  .credit-float{
    display:none;
  }
  .modal{
    border-radius:24px;
    padding:20px;
    margin:10px;
  }
  .modal-pet-img{
    width:220px;
    height:220px;
  }
  .pet-stats-row{
    flex-direction:column;
  }
}
@media (max-width: 480px) {
  .nav-logo{
    font-size:18px;
  }
  .home-pet-grid{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  }
  .home-pet-card{
    height:260px;
  }
  .home-pet-top{
    height:150px;
  }
  .rank-list{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:8px;
  }
  .rank-row{
    padding:6px 10px;
  }
  .rank-row-avatar{
    width:30px;
    height:30px;
  }
  .rank-num{
    width:24px;
    height:24px;
    font-size:11px;
  }
  .rank-growth-badge{
    font-size:10px;
    padding:2px 6px;
  }
}
@media (min-width: 2200px) {
  .home-pet-grid{
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  }
  .home-pet-card{
    height:310px;
  }
  .home-pet-top{
    height:190px;
  }
  .home-pet-middle{
    height:55px;
  }
  .home-pet-bottom{
    height:65px;
  }
}
@keyframes shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}

/* === Enhancement additions (no base duplicate) === */
html{scroll-behavior:smooth;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:rgba(255,230,220,0.4);border-radius:10px;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ffb8a8,#ffa0a0);border-radius:10px;border:2px solid rgba(255,255,255,0.3);}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff9e8e,#ff8888);}
.home-pet-card:active{transform:scale(1.01);}
.stat-item:nth-child(odd){background:rgba(255,245,240,0.5);border-radius:12px;}
.stat-item:nth-child(even){background:rgba(255,250,248,0.3);border-radius:12px;}
.stat-item:hover{background:rgba(255,230,220,0.5);}
.modal-pet-img:hover{transform:scale(1.02);}
.rank-item-small:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 12px 28px rgba(255,180,160,0.3);}
.rank-item-small:hover .rank-avatar-small{transform:scale(1.08);box-shadow:0 6px 18px rgba(250,168,168,0.4);}
.adopt-modal .pet-select-item:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 10px 24px rgba(255,180,160,0.25);border-color:#ffb0a0;}
.rename-pet-btn{cursor:pointer;font-size:12px;margin-left:4px;opacity:0.5;transition:opacity 0.2s,transform 0.2s;display:inline-block;vertical-align:middle;}
.rename-pet-btn:hover{opacity:1;transform:scale(1.2);}
.home-pet-card:hover .home-pet-level-badge{animation:badgeHoverPulse 0.6s ease;}
::selection{background:rgba(255,180,180,0.4);color:#553333;}
input:focus, select:focus, button:focus-visible{outline:2px solid rgba(255,150,130,0.5);outline-offset:2px;}
input[type="text"], input[type="number"], input[type="date"], input:not([type]), select{border:1.5px solid #ffd8d0;border-radius:16px;padding:10px 14px;font-size:15px;background:rgba(255,252,250,0.9);transition:all 0.3s ease;color:#553333;}
input:focus, select:focus{border-color:#ffb0a0;box-shadow:0 0 0 3px rgba(255,176,160,0.2), 0 4px 12px rgba(255,180,160,0.15);}
.history-log-item:hover{background:rgba(255,240,235,0.5);}
.student-list-item:hover{background:rgba(255,240,235,0.4);}
.page:hover .paw-deco{opacity:0.09;}
#usbConnectBtn{border-radius:22px;transition:all 0.3s cubic-bezier(.4,0,.2,1);}

/* ===== END MERGED BEAUTIFICATION ===== */

/* === 宠物卡片生机动画 === */
/* petBreathe removed to prevent jittering with card-level float */
.home-pet-card .home-pet-top img {
  animation: none;
}
@keyframes petWiggle {
  0%,100%{ transform: rotate(0deg); }
  15%{ transform: rotate(-6deg); }
  30%{ transform: rotate(5deg); }
  45%{ transform: rotate(-4deg); }
  60%{ transform: rotate(3deg); }
  75%{ transform: rotate(-2deg); }
  90%{ transform: rotate(1deg); }
}
@keyframes petBounce {
  0%,100%{ transform: translateY(0) scale(1); }
  20%{ transform: translateY(-18px) scale(1.05); }
  40%{ transform: translateY(0) scale(0.97); }
  55%{ transform: translateY(-10px) scale(1.03); }
  70%{ transform: translateY(0) scale(0.98); }
  85%{ transform: translateY(-4px) scale(1.01); }
}
@keyframes petStretch {
  0%,100%{ transform: scaleX(1) scaleY(1); }
  30%{ transform: scaleX(1.12) scaleY(0.9); }
  60%{ transform: scaleX(0.93) scaleY(1.08); }
}
@keyframes petTilt {
  0%,100%{ transform: rotate(0deg) translateX(0); }
  30%{ transform: rotate(-10deg) translateX(-3px); }
  70%{ transform: rotate(-8deg) translateX(-2px); }
}
@keyframes petDoze {
  0%,100%{ transform: translateY(0) rotate(0deg); }
  30%{ transform: translateY(2px) rotate(3deg); }
  50%{ transform: translateY(4px) rotate(5deg); }
  70%{ transform: translateY(2px) rotate(3deg); }
}
.home-pet-card .home-pet-top img.pet-action-wiggle { animation: petWiggle 0.8s ease-in-out 1; }
.home-pet-card .home-pet-top img.pet-action-bounce { animation: petBounce 0.9s ease-in-out 1; }
.home-pet-card .home-pet-top img.pet-action-stretch { animation: petStretch 1.2s ease-in-out 1; }
.home-pet-card .home-pet-top img.pet-action-tilt { animation: petTilt 1.5s ease-in-out 1; }
.home-pet-card .home-pet-top img.pet-action-doze { animation: petDoze 2s ease-in-out 1; }
.pet-emote-bubble {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  font-size: 22px;
  opacity: 0;
  animation: emoteBubblePop 2s ease-out forwards;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}
@keyframes emoteBubblePop {
  0%  { opacity: 0; transform: translate(-50%, 0) scale(0.3); }
  15% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
  30% { transform: translate(-50%, -16px) scale(1); }
  75% { opacity: 0.9; transform: translate(-50%, -30px) scale(1); }
  100%{ opacity: 0; transform: translate(-50%, -45px) scale(0.7); }
}
@keyframes cardShimmer {
  0%  { left: -60%; }
  100%{ left: 160%; }
}
.pet-card-shimmer .home-pet-inner {
  overflow: hidden;
}
.pet-card-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  animation: cardShimmer 1.2s ease-in-out 1 forwards;
  pointer-events: none;
  z-index: 15;
  border-radius: 24px;
}
.pet-zzz {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  font-size: 14px;
  color: #9078bb;
  font-weight: 800;
  opacity: 0;
  animation: zzzFloat 2.5s ease-out forwards;
}
@keyframes zzzFloat {
  0%  { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
  20% { opacity: 0.9; transform: translate(5px, -12px) scale(1) rotate(-8deg); }
  60% { opacity: 0.7; transform: translate(12px, -30px) scale(1.1) rotate(-12deg); }
  100%{ opacity: 0; transform: translate(18px, -50px) scale(0.6) rotate(-15deg); }
}
/* 尾巴摇 */
@keyframes tailWag {
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(4px) rotate(2deg); }
  75%{ transform: translateX(-4px) rotate(-2deg); }
}
.home-pet-card .home-pet-top img.pet-action-tailwag { animation: tailWag 0.4s ease-in-out 4; }
/* === 生机动画结束 === */

/* ========== 闲置宠物出逃系统 ========== */
.escaped-pet {
  position: fixed;
  z-index: 9990;
  pointer-events: auto;
  cursor: pointer;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: left, top;
  transition: left 0.08s linear, top 0.08s linear;
}
.escaped-pet img, .escaped-pet span {
  max-width: 115px;
  max-height: 115px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}
.escaped-pet .escape-speech {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 2px solid #ffb8a8;
  border-radius: 18px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #c04058;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(200,100,80,0.2);
  opacity: 0;
  animation: speechPop 3.5s ease forwards;
  pointer-events: none;
}
.escaped-pet .escape-speech::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #ffb8a8;
}
@keyframes speechPop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.5) translateY(5px); }
  10%  { opacity: 1; transform: translateX(-50%) scale(1.05) translateY(0); }
  15%  { transform: translateX(-50%) scale(1) translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(0.8) translateY(-10px); }
}
@keyframes escapeJumpOut {
  0%   { transform: scale(0.3) translateY(0); opacity: 0.3; }
  40%  { transform: scale(1.15) translateY(-30px); opacity: 1; }
  60%  { transform: scale(0.95) translateY(-10px); }
  80%  { transform: scale(1.05) translateY(-18px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes escapeRun {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  15%  { transform: translateY(-14px) rotate(-4deg) scale(1.03); }
  30%  { transform: translateY(-2px) rotate(0deg) scale(0.97); }
  45%  { transform: translateY(-12px) rotate(3deg) scale(1.02); }
  60%  { transform: translateY(-1px) rotate(0deg) scale(0.98); }
  75%  { transform: translateY(-10px) rotate(-2deg) scale(1.01); }
  90%  { transform: translateY(-2px) rotate(1deg) scale(0.99); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes escapeSit {
  0%,100% { transform: translateY(0) scaleY(1); }
  50%     { transform: translateY(2px) scaleY(0.95); }
}
@keyframes escapeWave {
  0%,100% { transform: rotate(0deg); }
  20%     { transform: rotate(-15deg); }
  40%     { transform: rotate(12deg); }
  60%     { transform: rotate(-10deg); }
  80%     { transform: rotate(8deg); }
}
@keyframes escapeSpin {
  0%   { transform: rotateY(0deg) scale(1); }
  50%  { transform: rotateY(180deg) scale(1.1); }
  100% { transform: rotateY(360deg) scale(1); }
}
@keyframes escapeNuzzle {
  0%,100% { transform: translateX(0) rotate(0deg); }
  20%     { transform: translateX(5px) rotate(5deg); }
  40%     { transform: translateX(-5px) rotate(-5deg); }
  60%     { transform: translateX(3px) rotate(3deg); }
  80%     { transform: translateX(-3px) rotate(-3deg); }
}
@keyframes escapeHop {
  0%,100% { transform: translateY(0) scaleX(1) scaleY(1); }
  15%     { transform: translateY(3px) scaleX(1.1) scaleY(0.9); }
  40%     { transform: translateY(-25px) scaleX(0.9) scaleY(1.1); }
  65%     { transform: translateY(0) scaleX(1.05) scaleY(0.95); }
  80%     { transform: translateY(-8px) scaleX(0.97) scaleY(1.03); }
}
@keyframes escapeSniff {
  0%,100% { transform: translateY(0) rotate(0deg); }
  20%     { transform: translateY(3px) rotate(5deg); }
  40%     { transform: translateY(1px) rotate(-3deg); }
  60%     { transform: translateY(4px) rotate(4deg); }
  80%     { transform: translateY(2px) rotate(-2deg); }
}
@keyframes escapeStretch {
  0%,100% { transform: scaleX(1) scaleY(1); }
  30%     { transform: scaleX(1.2) scaleY(0.85); }
  60%     { transform: scaleX(0.9) scaleY(1.15); }
}
@keyframes escapeBounce {
  0%,100% { transform: translateY(0); }
  20%     { transform: translateY(-18px); }
  40%     { transform: translateY(0); }
  55%     { transform: translateY(-10px); }
  70%     { transform: translateY(0); }
  82%     { transform: translateY(-4px); }
}
@keyframes escapeRoll {
  0%   { transform: rotate(0deg) translateX(0); }
  25%  { transform: rotate(90deg) translateX(8px); }
  50%  { transform: rotate(180deg) translateX(0); }
  75%  { transform: rotate(270deg) translateX(-8px); }
  100% { transform: rotate(360deg) translateX(0); }
}
@keyframes escapePeek {
  0%,100% { transform: translateX(0) scaleX(1); }
  30%     { transform: translateX(12px) scaleX(1); }
  60%     { transform: translateX(-12px) scaleX(-1); }
}
@keyframes escapeShake {
  0%,100% { transform: rotate(0deg); }
  15%  { transform: rotate(-12deg); }
  30%  { transform: rotate(12deg); }
  45%  { transform: rotate(-8deg); }
  60%  { transform: rotate(8deg); }
  75%  { transform: rotate(-4deg); }
  90%  { transform: rotate(4deg); }
}
@keyframes escapeSleep {
  0%,100% { transform: translateY(0) rotate(-5deg); opacity: 1; }
  50%     { transform: translateY(2px) rotate(-5deg); opacity: 0.7; }
}
/* ===== 震撼升级版动作动画 ===== */
@keyframes escapeRollCrazy {
  0%   { transform: rotate(0deg) translateX(0) scale(1); }
  15%  { transform: rotate(120deg) translateX(15px) scale(0.9); }
  30%  { transform: rotate(240deg) translateX(25px) scale(1.1); }
  50%  { transform: rotate(360deg) translateX(10px) scale(0.85); }
  65%  { transform: rotate(480deg) translateX(-10px) scale(1.15); }
  80%  { transform: rotate(600deg) translateX(-20px) scale(0.95); }
  100% { transform: rotate(720deg) translateX(0) scale(1); }
}
@keyframes escapeSpinBurst {
  0%   { transform: rotateY(0deg) scale(1); filter: brightness(1); }
  25%  { transform: rotateY(180deg) scale(1.3); filter: brightness(1.3); }
  50%  { transform: rotateY(360deg) scale(0.8); filter: brightness(1.5); }
  75%  { transform: rotateY(540deg) scale(1.2); filter: brightness(1.2); }
  100% { transform: rotateY(720deg) scale(1); filter: brightness(1); }
}
@keyframes escapeSuperBounce {
  0%   { transform: translateY(0) scaleY(1) scaleX(1); }
  8%   { transform: translateY(5px) scaleY(0.7) scaleX(1.3); }
  20%  { transform: translateY(-50px) scaleY(1.2) scaleX(0.85); }
  35%  { transform: translateY(0) scaleY(0.75) scaleX(1.25); }
  48%  { transform: translateY(-30px) scaleY(1.15) scaleX(0.9); }
  60%  { transform: translateY(0) scaleY(0.8) scaleX(1.15); }
  72%  { transform: translateY(-15px) scaleY(1.1) scaleX(0.95); }
  85%  { transform: translateY(0) scaleY(0.9) scaleX(1.05); }
  100% { transform: translateY(0) scaleY(1) scaleX(1); }
}
@keyframes escapeBackflip {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  20%  { transform: translateY(-40px) rotate(-60deg) scale(1.1); }
  50%  { transform: translateY(-60px) rotate(-180deg) scale(1.2); }
  70%  { transform: translateY(-30px) rotate(-300deg) scale(1.1); }
  90%  { transform: translateY(5px) rotate(-350deg) scale(0.95); }
  100% { transform: translateY(0) rotate(-360deg) scale(1); }
}
@keyframes escapeWiggleDance {
  0%,100% { transform: translateX(0) rotate(0deg) scaleY(1); }
  10%  { transform: translateX(-8px) rotate(-8deg) scaleY(0.95); }
  20%  { transform: translateX(8px) rotate(8deg) scaleY(1.05); }
  30%  { transform: translateX(-12px) rotate(-12deg) scaleY(0.9); }
  40%  { transform: translateX(12px) rotate(12deg) scaleY(1.1); }
  50%  { transform: translateX(-6px) rotate(-15deg) scaleY(0.92); }
  60%  { transform: translateX(6px) rotate(15deg) scaleY(1.08); }
  70%  { transform: translateX(-10px) rotate(-10deg) scaleY(0.95); }
  80%  { transform: translateX(10px) rotate(10deg) scaleY(1.05); }
  90%  { transform: translateX(-4px) rotate(-5deg) scaleY(0.98); }
}
@keyframes escapeFaceplant {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-20px) rotate(15deg); }
  50%  { transform: translateY(15px) rotate(90deg) scaleY(0.6); }
  65%  { transform: translateY(12px) rotate(85deg) scaleY(0.65); }
  80%  { transform: translateY(8px) rotate(45deg) scaleY(0.8); }
  90%  { transform: translateY(-5px) rotate(10deg) scaleY(1.1); }
  100% { transform: translateY(0) rotate(0deg) scaleY(1); }
}
@keyframes escapeTrampoline {
  0%   { transform: translateY(0) scale(1); }
  10%  { transform: translateY(8px) scaleY(0.6) scaleX(1.4); }
  25%  { transform: translateY(-70px) scaleY(1.3) scaleX(0.8); }
  35%  { transform: translateY(-75px) scaleY(1) scaleX(1) rotate(180deg); }
  50%  { transform: translateY(0) scaleY(0.65) scaleX(1.35) rotate(360deg); }
  62%  { transform: translateY(-45px) scaleY(1.2) scaleX(0.85) rotate(360deg); }
  75%  { transform: translateY(0) scaleY(0.7) scaleX(1.3) rotate(360deg); }
  85%  { transform: translateY(-20px) scaleY(1.1) scaleX(0.9) rotate(360deg); }
  100% { transform: translateY(0) scale(1) rotate(360deg); }
}
@keyframes escapeBellyFlop {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  20%  { transform: translateY(-25px) rotate(-10deg) scale(1.1); }
  45%  { transform: translateY(10px) rotate(0deg) scaleY(0.5) scaleX(1.5); }
  55%  { transform: translateY(8px) rotate(0deg) scaleY(0.45) scaleX(1.55); }
  70%  { transform: translateY(5px) rotate(5deg) scaleY(0.6) scaleX(1.3); }
  85%  { transform: translateY(-5px) rotate(-3deg) scaleY(1.1) scaleX(0.95); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes escapeTornado {
  0%   { transform: rotate(0deg) scale(1); filter: blur(0); }
  20%  { transform: rotate(180deg) scale(0.9); filter: blur(1px); }
  40%  { transform: rotate(540deg) scale(0.7); filter: blur(2px); }
  60%  { transform: rotate(900deg) scale(0.6); filter: blur(3px); }
  75%  { transform: rotate(1200deg) scale(0.8); filter: blur(1px); }
  90%  { transform: rotate(1400deg) scale(1.1); filter: blur(0); }
  100% { transform: rotate(1440deg) scale(1); filter: blur(0); }
}
@keyframes escapeMoonwalk {
  0%   { transform: translateX(0) scaleX(-1); }
  15%  { transform: translateX(8px) scaleX(-1) translateY(-3px); }
  30%  { transform: translateX(16px) scaleX(-1) translateY(0); }
  45%  { transform: translateX(24px) scaleX(-1) translateY(-3px); }
  60%  { transform: translateX(32px) scaleX(-1) translateY(0); }
  75%  { transform: translateX(24px) scaleX(-1) translateY(-3px); }
  85%  { transform: translateX(12px) scaleX(-1) translateY(0); }
  100% { transform: translateX(0) scaleX(1); }
}
/* 特效粒子动画 */
@keyframes actionParticleFly {
  0%   { opacity: 0; transform: scale(0.3) translate(0, 0); }
  15%  { opacity: 1; transform: scale(1.2) translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)); }
  100% { opacity: 0; transform: scale(0.5) translate(var(--tx), var(--ty)); }
}
/* 食物卡片样式 */
.escape-food-card {
  position: fixed;
  z-index: 9991;
  width: 70px;
  height: 85px;
  background: linear-gradient(145deg, #fff, #fff5ee);
  border: 2.5px solid var(--food-color, #ff9800);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 0 15px rgba(255,150,50,0.3);
  animation: foodAppear 0.5s ease-out forwards, foodFloat 2s ease-in-out infinite 0.5s;
  pointer-events: none;
  cursor: default;
}
.escape-food-card .food-emoji {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  animation: foodWobble 1s ease-in-out infinite;
}
.escape-food-card .food-name {
  font-size: 11px;
  font-weight: 700;
  color: #6a4040;
  white-space: nowrap;
}
@keyframes foodAppear {
  0%   { opacity: 0; transform: scale(0) rotate(-20deg); }
  50%  { opacity: 1; transform: scale(1.2) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes foodFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
@keyframes foodWobble {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(-10deg); }
  75%     { transform: rotate(10deg); }
}
@keyframes foodEaten {
  0%   { transform: scale(1); opacity: 1; }
  30%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0) rotate(30deg); opacity: 0; }
}
@keyframes foodFade {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5) translateY(-20px); }
}
.escape-emote {
  position: absolute;
  top: -28px;
  right: -8px;
  font-size: 18px;
  pointer-events: none;
  animation: emoteFloat 1.8s ease-out forwards;
  z-index: 9999;
}
@keyframes emoteFloat {
  0%   { opacity: 0; transform: scale(0.3) translateY(5px); }
  15%  { opacity: 1; transform: scale(1.2) translateY(0); }
  25%  { transform: scale(1) translateY(-2px); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scale(0.6) translateY(-20px); }
}
@keyframes escapePawPrint {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}
.escape-pawprint {
  position: fixed;
  z-index: 9989;
  font-size: 14px;
  pointer-events: none;
  opacity: 0.5;
  animation: escapePawPrint 2s ease-out forwards;
}
@keyframes escapeReturnToCard {
  0%   { opacity: 1; transform: scale(1); }
  50%  { transform: scale(1.1) translateY(-15px); }
  100% { opacity: 0; transform: scale(0.3) translateY(10px); }
}
.escaped-pet-trail {
  position: fixed;
  z-index: 9988;
  pointer-events: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,150,0.6), transparent);
  animation: trailFade 0.8s ease-out forwards;
}
@keyframes trailFade {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.2); }
}
/* 被捕获时的惊慌抖动 */
@keyframes escapeCaught {
  0%   { transform: rotate(0deg) scale(1); }
  10%  { transform: rotate(-15deg) scale(1.1); }
  20%  { transform: rotate(12deg) scale(1.05); }
  30%  { transform: rotate(-10deg) scale(1.08); }
  40%  { transform: rotate(8deg) scale(1); }
  50%  { transform: rotate(-5deg) scale(0.95); }
  100% { transform: rotate(0deg) scale(0.3); opacity: 0; }
}
/* 鼠标靠近时的害羞抖动 */
@keyframes escapeShyShake {
  0%,100% { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  75%  { transform: translateX(4px); }
}
.escaped-pet:hover {
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(255,150,150,0.5));
}
/* 捕获奖励弹出 */
.escape-reward {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-size: 16px;
  font-weight: 800;
  color: #e8637a;
  text-shadow: 0 1px 4px rgba(200,80,80,0.3);
  white-space: nowrap;
  animation: rewardFloat 1.8s ease-out forwards;
}
@keyframes rewardFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  15%  { opacity: 1; transform: translateY(-8px) scale(1.15); }
  30%  { transform: translateY(-16px) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}
/* 捕获时的爱心粒子爆发 */
.escape-catch-particle {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  font-size: 16px;
  animation: catchParticleBurst 0.9s ease-out forwards;
}
@keyframes catchParticleBurst {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0.3) rotate(var(--pr)); }
}
/* ===== 出逃前预告动画 ===== */
@keyframes preEscapeCardWobble {
  0%,100% { transform: rotate(0deg) translateX(0); }
  15% { transform: rotate(-1.5deg) translateX(-2px); }
  30% { transform: rotate(1.5deg) translateX(2px); }
  45% { transform: rotate(-2deg) translateX(-3px); }
  60% { transform: rotate(2deg) translateX(3px); }
  75% { transform: rotate(-1deg) translateX(-1px); }
  90% { transform: rotate(1deg) translateX(1px); }
}
@keyframes preEscapePetPeek {
  0%,100% { transform: translateX(0) translateY(0); }
  20% { transform: translateX(-12px) translateY(-3px); }
  40% { transform: translateX(12px) translateY(-3px); }
  55% { transform: translateX(-8px) translateY(-5px); }
  70% { transform: translateX(8px) translateY(-5px); }
  85% { transform: translateX(0) translateY(-8px); }
}
@keyframes preEscapeCardGlow {
  0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
  50% { box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 20px rgba(255,150,100,0.35), 0 0 40px rgba(255,180,130,0.15); }
}
.home-pet-card.pre-escape {
  animation: preEscapeCardWobble 0.6s ease-in-out infinite, preEscapeCardGlow 1.2s ease-in-out infinite;
  z-index: 10;
}
.home-pet-card.pre-escape .home-pet-top img,
.home-pet-card.pre-escape .home-pet-top span {
  animation: preEscapePetPeek 1s ease-in-out infinite;
}
.pre-escape-bubble {
  position: absolute;
  top: -10px;
  right: -5px;
  font-size: 20px;
  z-index: 11;
  animation: preEscapeBubblePop 0.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes preEscapeBubblePop {
  0%,100% { transform: scale(1) translateY(0); opacity: 1; }
  50% { transform: scale(1.3) translateY(-5px); opacity: 0.7; }
}

/* ===== 跳出粒子爆炸 ===== */
.escape-burst-particle {
  position: fixed;
  z-index: 9995;
  pointer-events: none;
  font-size: 18px;
  animation: escapeBurstFly 0.8s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes escapeBurstFly {
  0% { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.3) rotate(var(--br)); }
}
.escape-burst-ring {
  position: fixed;
  z-index: 9994;
  pointer-events: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 3px solid rgba(255,200,100,0.8);
  animation: escapeBurstRingExpand 0.6s ease-out forwards;
}
@keyframes escapeBurstRingExpand {
  0% { opacity: 1; transform: scale(0.5); border-color: rgba(255,200,100,0.9); }
  100% { opacity: 0; transform: scale(5); border-color: rgba(255,150,200,0); }
}

/* ===== 回来后"气喘吁吁"状态 ===== */
@keyframes petJustReturnedPant {
  0%,100% { transform: scaleY(1) translateY(0); }
  30% { transform: scaleY(0.92) translateY(2px); }
  60% { transform: scaleY(1.05) translateY(-1px); }
}
@keyframes petJustReturnedSweat {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  20% { opacity: 1; transform: translateY(-3px) scale(1); }
  100% { opacity: 0; transform: translateY(-18px) scale(0.6); }
}
.home-pet-card.just-returned .home-pet-top img,
.home-pet-card.just-returned .home-pet-top span {
  animation: petJustReturnedPant 0.6s ease-in-out infinite;
}
.just-returned-sweat {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  z-index: 12;
  animation: petJustReturnedSweat 1.2s ease-out forwards;
}
.just-returned-badge {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,240,220,0.95);
  border: 1.5px solid #ffc880;
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #c07030;
  white-space: nowrap;
  z-index: 12;
  animation: fadeIn 0.3s ease;
  box-shadow: 0 2px 8px rgba(200,150,80,0.2);
}

/* ========== 闲置出逃系统结束 ========== */

/* ========== 性能优化：低端设备自动降级 ========== */

/* --- prefers-reduced-motion 用户偏好：尊重用户系统设置 --- */
@media (prefers-reduced-motion: reduce) {
  /* 纯装饰动画：完全禁用（PK战斗特效和碎裂特效除外，始终显示） */
  .deco-bubble,
  .deco-corner,
  .maxed-sparkle, .maxed-crown-float,
  .heart-float,
  .firework,
  .upgrade-sparkle, .upgrade-rays, .upgrade-ray,
  .pet-emote-bubble, .pet-zzz,
  .escaped-pet-trail, .escape-pawprint,
  .escape-burst-particle, .escape-burst-ring,
  .escape-catch-particle, .escape-emote,
  .escape-food-card, .escape-reward,
  .jh-particle, .jh-mist,
  .just-returned-sweat, .just-returned-badge,
  .pre-escape-bubble,
  .pet-card-shimmer::after,
  .jh-battle-pet::after, .jh-pet::after {
    animation: none !important;
    display: none !important;
  }

  /* 背景装饰动画：禁用 */
  body {
    animation: none !important;
    background: #f7f3f0 !important;
    background-image: none !important;
  }
  .nav-bar::before { animation: none !important; }
  .cute-footer-icons { animation: none !important; }
  .music-toggle.playing { animation: none !important; }
  .rank-progress-fill::after { animation: none !important; }
  .podium-slot.gold .podium-avatar::before { animation: none !important; }
  .podium-slot.gold::after { animation: none !important; }
  .podium-crown { animation: none !important; }
  .legendBadgePulse, .maxBadgePulse { animation: none !important; }

  /* 功能动画：保留但减速（0.4s → 1.6s 感知） */
  *, *::before, *::after {
    transition-duration: 0.5s !important;
    animation-duration: 1.5s !important;
  }

  /* PK战斗特效和碎裂特效：恢复正常时长，不受全局减速影响 */
  .pk-arena-particles *, .damage-number,
  .projectile, .fireball-effect, .fireball-trail,
  .explosion-particle, .energy-ring,
  .critical-slash, .crack-overlay, .crack-lines,
  .ice-shard, .ice-block-encase,
  .lightning-bolt, .electric-arc, .electric-orb,
  .poison-cloud, .poison-skull, .poison-bubble,
  .tornado-ring, .wind-line, .wind-debris,
  .shadow-slash-overlay, .dark-vortex, .dark-lightning,
  .meteor, .meteor-tail, .meteor-crater, .fire-rain,
  .holy-beam, .holy-star,
  .lava-splash, .lava-geyser, .lava-crack,
  .starburst, .galaxy-swirl,
  .screen-flash, .screen-tint,
  .skill-announce,
  .jh-torn-piece, .jh-torn-piece-stay, .jh-torn-crack, .jh-torn-flash, .jh-torn-dust, .jh-torn-dust-stay,
  .jh-fireworks-container, .jh-fw-particle, .jh-fw-trail, .jh-fw-ring,
  .jh-combo, .jh-screen-shake,
  .jh-spark, .jh-burst, .jh-slash,
  .pk-pet-img-container.attack-lunge-right,
  .pk-pet-img-container.attack-lunge-left,
  .pk-pet-img-container.hit-flash,
  .pk-pet-img-container.charging,
  .pk-pet-img-container.battle-idle img,
  .pk-pet-img-container.battle-idle-right img,
  .pk-pet-img-container.battle-idle-no-flip img,
  .pk-arena.screen-shake, .pk-arena.screen-shake-heavy,
  .jh-battle-pet img, .jh-battle-boss img {
    animation-duration: revert !important;
    transition-duration: revert !important;
  }

  /* 升级特效：保留核心流程，禁用粒子 */
  .upgrade-overlay, .upgrade-old-pet, .upgrade-new-pet {
    animation-duration: 2s !important;
    transition-duration: 0.5s !important;
  }
}

/* --- JS 低端设备降级（配合 low-end-device class） --- */
/* 纯装饰粒子：完全禁用（PK战斗特效和碎裂特效除外，始终显示） */
.low-end-device .deco-bubble,
.low-end-device .deco-corner,
.low-end-device .maxed-sparkle, .low-end-device .maxed-crown-float,
.low-end-device .heart-float,
.low-end-device .firework,
.low-end-device .upgrade-sparkle, .low-end-device .upgrade-rays, .low-end-device .upgrade-ray,
.low-end-device .pet-emote-bubble, .low-end-device .pet-zzz,
.low-end-device .escaped-pet-trail, .low-end-device .escape-pawprint,
.low-end-device .escape-burst-particle, .low-end-device .escape-burst-ring,
.low-end-device .escape-catch-particle, .low-end-device .escape-emote,
.low-end-device .escape-food-card, .low-end-device .escape-reward,
.low-end-device .jh-particle, .low-end-device .jh-mist,
.low-end-device .just-returned-sweat, .low-end-device .just-returned-badge,
.low-end-device .pre-escape-bubble,
.low-end-device .pet-card-shimmer::after {
  animation: none !important;
  display: none !important;
}
/* 背景装饰动画：禁用 */
.low-end-device body {
  animation: none !important;
  background: #f7f3f0 !important;
  background-image: none !important;
}
.low-end-device .nav-bar::before { animation: none !important; }
.low-end-device .cute-footer-icons { animation: none !important; }
.low-end-device .music-toggle.playing { animation: none !important; }
.low-end-device .rank-progress-fill::after { animation: none !important; }
.low-end-device .podium-slot.gold .podium-avatar::before { animation: none !important; }
.low-end-device .podium-slot.gold::after { animation: none !important; }
.low-end-device .podium-crown { animation: none !important; }
/* 满级宠物特效：减速 */
.low-end-device .home-pet-card.pet-maxed { animation-duration: 6s !important; }
.low-end-device .home-pet-card.pet-maxed::before { animation-duration: 6s !important; }
.low-end-device .home-pet-card.pet-maxed::after { display: none !important; }
.low-end-device .home-pet-card.pet-maxed .home-pet-top::before { animation: none !important; }
.low-end-device .maxed-crown-float { animation-duration: 4s !important; }
/* backdrop-filter：禁用 */
.low-end-device *, .low-end-device *::before, .low-end-device *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* hover transition：简化 */
.low-end-device .home-pet-card { transition: transform 0.2s ease, box-shadow 0.2s ease !important; }
.low-end-device .nav-item { transition: background 0.2s ease, transform 0.2s ease !important; }
.low-end-device .class-card { transition: transform 0.2s ease, box-shadow 0.2s ease !important; }
/* GPU提升关键动画层 */
.firework, .projectile, .explosion-particle, .upgrade-sparkle,
.escape-catch-particle, .escape-burst-particle, .escape-action-particle,
.pk-pet-img-container, .upgrade-old-pet, .upgrade-new-pet {
  will-change: transform, opacity;
  transform: translateZ(0);
}
.pk-arena-particles > * {
  will-change: transform, opacity;
  contain: strict;
}
/* ===== 萌萌江湖行 ===== */
.jianghu-column{width:100%;max-width:100%;background:linear-gradient(170deg,#1c1410 0%,#2a1e18 30%,#1e1510 60%,#15100a 100%);border-radius:20px;border:2px solid rgba(180,140,80,0.25);padding:0;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,220,150,0.06);position:relative}
.jianghu-column::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#c9a84c 20%,#8b5e2f 50%,#c9a84c 80%,transparent);border-radius:20px 20px 0 0}
.jianghu-column::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M20 180 Q30 140 50 150 Q60 120 80 130 L80 140 Q75 135 70 138 L68 150 Q65 145 60 148 L55 160 Q50 155 45 158 L42 165 Q38 160 35 162 L30 170 Q25 166 22 168 Z' fill='rgba(180,140,80,0.02)'/%3E%3Cpath d='M130 180 L132 150 L135 155 L138 130 L141 140 L143 125 L145 135 L148 155 L150 180Z' fill='rgba(180,140,80,0.015)'/%3E%3C/svg%3E") repeat;pointer-events:none;opacity:0.6}
.jianghu-header{background:linear-gradient(180deg,rgba(50,35,20,0.95),rgba(35,25,15,0.9));padding:20px 20px 16px;text-align:center;border-bottom:1px solid rgba(180,140,80,0.15);position:relative;overflow:hidden}
.jianghu-header::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent)}
.jianghu-header::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80%;height:1px;background:linear-gradient(90deg,transparent,rgba(180,140,80,0.2),transparent)}
.jianghu-header h3{font-family:'Ma Shan Zheng',cursive;font-size:1.7rem;color:#d4b068;letter-spacing:0.2em;margin:0;text-shadow:0 1px 2px rgba(0,0,0,0.6),0 0 20px rgba(201,168,76,0.2);position:relative;z-index:1}
.jianghu-header p{color:rgba(210,190,160,0.45);font-size:11px;margin-top:6px;letter-spacing:0.12em;position:relative;z-index:1}
.jianghu-list{padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.jianghu-list::-webkit-scrollbar{width:4px}
.jianghu-list::-webkit-scrollbar-track{background:rgba(0,0,0,0.2);border-radius:2px}
.jianghu-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(180,140,80,0.4),rgba(140,100,50,0.3));border-radius:2px}
.jianghu-item{display:flex;align-items:center;gap:12px;padding:11px 14px;margin-bottom:0;border-radius:12px;border:1.5px solid rgba(180,140,80,0.1);background:linear-gradient(135deg,rgba(50,35,20,0.5),rgba(40,28,16,0.4));cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden}
.jianghu-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,transparent,rgba(180,140,80,0.3),transparent);opacity:0;transition:opacity 0.3s}
.jianghu-item:hover{background:linear-gradient(135deg,rgba(60,42,24,0.7),rgba(50,35,18,0.6));border-color:rgba(180,140,80,0.25);transform:translateX(4px);box-shadow:0 2px 12px rgba(0,0,0,0.2)}
.jianghu-item:hover::before{opacity:1}
.jianghu-item.jh-selected{background:linear-gradient(135deg,rgba(120,60,20,0.3),rgba(80,35,10,0.25));border-color:rgba(210,160,60,0.5);box-shadow:0 0 15px rgba(210,160,60,0.12),inset 0 0 20px rgba(180,140,80,0.05)}
.jianghu-item.jh-selected::before{opacity:1;background:linear-gradient(180deg,transparent,#c9a84c,transparent)}
.jianghu-item-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid rgba(180,140,80,0.25);flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(30,20,10,0.6);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.jianghu-item-avatar img{width:100%;height:100%;object-fit:contain}
.jianghu-item-info{flex:1;min-width:0}
.jianghu-item-info .jh-name{color:#e8dcc8;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0.05em}
.jianghu-item-info .jh-pet{color:rgba(210,175,110,0.65);font-size:11px;margin-top:3px}
.jianghu-item-info .jh-coins{color:rgba(210,190,160,0.35);font-size:10px;margin-top:2px}
.jianghu-item .jh-coin-badge{background:linear-gradient(135deg,#b8952e,#8a6a1e);color:#fff8e8;font-size:10px;font-weight:700;padding:3px 10px;border-radius:10px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,0.3);border:1px solid rgba(255,220,120,0.15)}
.jianghu-empty{text-align:center;padding:35px 18px;color:rgba(210,190,160,0.3);font-size:13px;line-height:1.9}
.jianghu-start-area{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:997;display:none;padding:0}
.jianghu-start-area.jh-btn-visible{display:block;animation:fadeIn 0.3s ease}
.jianghu-start-btn{font-family:'Ma Shan Zheng',cursive;font-size:1.25rem;padding:14px 50px;background:linear-gradient(135deg,#6b3a10,#8b4a18,#6b3a10);color:#d4b068;border:1.5px solid rgba(210,170,80,0.35);border-radius:22px;cursor:pointer;letter-spacing:0.18em;transition:all 0.3s;box-shadow:0 6px 25px rgba(80,40,10,0.6),inset 0 1px 0 rgba(255,220,150,0.1);text-shadow:0 1px 3px rgba(0,0,0,0.5);white-space:nowrap}
.jianghu-start-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px rgba(100,50,10,0.5),inset 0 1px 0 rgba(255,220,150,0.15);border-color:rgba(210,170,80,0.6);background:linear-gradient(135deg,#7b4518,#9b5520,#7b4518)}
.jianghu-start-btn:disabled{opacity:0.3;cursor:not-allowed;filter:grayscale(60%)}
.jianghu-item.jh-done{opacity:0.4;cursor:not-allowed;filter:grayscale(30%);pointer-events:none}
.jianghu-item.jh-done .jh-coin-badge{background:linear-gradient(135deg,#6a6a5a,#555548);color:rgba(255,255,255,0.6)}
/* === 江湖全屏游戏 === */
.jh-game-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;background:#0d0d1a;display:flex;flex-direction:column;overflow:hidden}
.jh-game-overlay *{box-sizing:border-box}
.jh-scene{flex:1;position:relative;overflow:hidden;
  background:
    linear-gradient(180deg, #08060a 0%, #0e0a18 5%, #181530 12%, #1a1a3a 20%, #1e2548 30%, #253060 40%, #1e3555 50%, #1a3028 62%, #142218 74%, #0e1810 86%, #080e08 100%);
}
.jh-scene::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 100% 50% at 80% 30%, rgba(80,100,160,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 15% 40%, rgba(60,80,120,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 68%, rgba(20,40,20,0.35) 0%, transparent 60%),
    radial-gradient(circle at 88% 10%, rgba(255,248,220,0.06) 0%, transparent 20%),
    radial-gradient(circle at 12% 18%, rgba(80,100,160,0.08) 0%, transparent 25%);
}
.jh-scene::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:35%;z-index:3;pointer-events:none;
  background:linear-gradient(0deg, rgba(8,10,5,0.95) 0%, rgba(18,28,15,0.6) 40%, transparent 100%);
}
/* Wuxia silhouette buildings layer */
.jh-buildings{position:absolute;bottom:18%;left:0;width:300%;height:40%;z-index:2;opacity:0.35;will-change:transform;pointer-events:none}
.jh-buildings-far{position:absolute;bottom:22%;left:0;width:300%;height:35%;z-index:1;opacity:0.15;will-change:transform;pointer-events:none;filter:blur(1px)}
.jh-moon{position:absolute;top:8%;right:12%;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff8e7 0%,#f0e0b0 40%,#d4b878 80%,#c0a060 100%);box-shadow:0 0 60px rgba(255,248,231,0.35),0 0 120px rgba(255,230,180,0.15),0 0 200px rgba(255,220,150,0.08);z-index:1}
.jh-moon::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;background:radial-gradient(circle at 60% 55%,rgba(180,160,120,0.35) 0%,transparent 50%);}
.jh-mtn{position:absolute;bottom:0;width:300%;height:100%;will-change:transform}
.jh-mtn-far{z-index:1;opacity:0.35;filter:blur(1.5px) brightness(0.7)}
.jh-mtn-mid{z-index:2;opacity:0.55;filter:blur(0.5px) brightness(0.8)}
.jh-mtn-near{z-index:3;opacity:0.75}
.jh-ground{position:absolute;bottom:0;width:300%;height:24%;background:linear-gradient(0deg,#0e120a 0%,#1a2218 30%,#1e2e1a 50%,transparent 100%);z-index:4}
.jh-ground::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(100,140,80,0.15) 30%,rgba(150,180,100,0.1) 50%,rgba(100,140,80,0.15) 70%,transparent 100%)}
.jh-pet{position:absolute;bottom:20%;z-index:10;width:90px;height:90px;transition:left 0.05s linear}
.jh-pet img,.jh-pet span{width:100%;height:100%;object-fit:contain;display:block}
.jh-pet img{border-radius:50%;border:3px solid #c9a84c;box-shadow:0 0 15px rgba(201,168,76,0.4)}
.jh-pet::before{content:'';position:absolute;bottom:-12px;left:15%;width:70%;height:10px;border-radius:50%;background:rgba(0,0,0,0.35);filter:blur(3px);z-index:-1}
.jh-pet.jh-walking{animation:jhWalk 0.5s ease-in-out infinite}
@keyframes jhWalk{
  0%{transform:translateY(0) rotate(0deg) scaleX(1)}
  15%{transform:translateY(-8px) rotate(3deg) scaleX(0.97)}
  30%{transform:translateY(-2px) rotate(1deg) scaleX(1)}
  50%{transform:translateY(0) rotate(0deg) scaleX(1)}
  65%{transform:translateY(-8px) rotate(-3deg) scaleX(0.97)}
  80%{transform:translateY(-2px) rotate(-1deg) scaleX(1)}
  100%{transform:translateY(0) rotate(0deg) scaleX(1)}
}
.jh-pet::after{content:'';position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,76,0.15) 0%,transparent 70%);animation:jhAura 1.5s ease-in-out infinite}
@keyframes jhAura{0%,100%{opacity:0.4;transform:scale(1)}50%{opacity:0.8;transform:scale(1.12)}}
.jh-boss{position:absolute;bottom:16%;right:-140px;z-index:10;text-align:center;transition:right 0.8s ease}
.jh-boss.jh-appear{right:22%}
.jh-boss-name{font-family:'Ma Shan Zheng',cursive;color:#cc2233;font-size:1.1rem;margin-top:4px;text-shadow:0 0 8px rgba(204,34,51,0.4)}
.jh-particle{position:absolute;width:2px;height:2px;background:rgba(245,240,232,0.35);border-radius:50%;animation:jhPDrift linear infinite;z-index:5}
@keyframes jhPDrift{0%{transform:translateY(0) translateX(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(-180px) translateX(80px);opacity:0}}
/* Wuxia mist layer */
.jh-mist{position:absolute;width:200%;height:15%;bottom:18%;z-index:4;opacity:0.25;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(200,220,240,0.15) 20%,rgba(180,200,230,0.2) 50%,rgba(200,220,240,0.15) 80%,transparent 100%);
  animation:jhMistDrift 12s linear infinite;filter:blur(8px);
}
.jh-mist:nth-child(2){bottom:25%;opacity:0.12;animation-duration:18s;animation-direction:reverse;height:10%;}
@keyframes jhMistDrift{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Battle HUD */
.jh-battle-hud{position:absolute;top:5%;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:2em;align-items:center;width:90%;max-width:900px;justify-content:space-between}
.jh-fi{flex:1;text-align:center}
.jh-fi.jh-pet-info{text-align:left}
.jh-fi.jh-boss-info{text-align:right}
.jh-fi-name{font-family:'Ma Shan Zheng',cursive;font-size:1.5rem;color:#c9a84c;margin-bottom:6px;letter-spacing:0.1em}
.jh-hp-outer{height:22px;background:rgba(0,0,0,0.6);border:2px solid rgba(201,168,76,0.4);border-radius:11px;overflow:hidden}
.jh-hp-inner{height:100%;border-radius:11px;transition:width 0.4s ease}
.jh-hp-inner.jh-php{background:linear-gradient(90deg,#2d6a4f,#40916c);box-shadow:0 0 12px rgba(45,106,79,0.6)}
.jh-hp-inner.jh-bhp{background:linear-gradient(90deg,#44cc44,#88ff88);box-shadow:0 0 12px rgba(68,204,68,0.6)}
/* HP 数字显示 */
.jh-hp-num{font-family:'Nunito','Microsoft YaHei',sans-serif;font-size:1.4rem;font-weight:800;margin-top:5px;letter-spacing:0.05em;text-shadow:0 2px 6px rgba(0,0,0,0.9),0 0 12px rgba(0,0,0,0.6);transition:color 0.3s ease}
.jh-hp-num.jh-php-num{color:#88ddaa}
.jh-hp-num.jh-bhp-num{color:#ff8888}
.jh-hp-num.jh-hp-danger{color:#ff4444 !important;animation:jhHpDangerPulse 0.6s ease-in-out infinite}
@keyframes jhHpDangerPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.7;transform:scale(1.08)}}
/* 觉醒/反杀状态特效 */
.jh-awakening{animation:jhAwakenGlow 0.8s ease-in-out infinite alternate !important}
@keyframes jhAwakenGlow{
  0%{filter:drop-shadow(0 0 15px rgba(255,200,0,0.6)) drop-shadow(0 0 30px rgba(255,100,0,0.4)) brightness(1.1)}
  100%{filter:drop-shadow(0 0 25px rgba(255,220,50,0.9)) drop-shadow(0 0 50px rgba(255,150,0,0.6)) brightness(1.3)}
}
.jh-awaken-text{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);z-index:40;font-family:'Ma Shan Zheng',cursive;font-size:clamp(2rem,6vw,3.5rem);font-weight:900;pointer-events:none;white-space:nowrap;animation:jhAwakenTextA 1.8s ease-out forwards;text-shadow:0 0 20px currentColor,0 0 40px currentColor,3px 3px 0 rgba(0,0,0,0.9)}
@keyframes jhAwakenTextA{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.3) rotate(-8deg);filter:blur(10px)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.4) rotate(3deg);filter:blur(0)}
  40%{transform:translate(-50%,-50%) scale(1.0) rotate(-1deg)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(0deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.2) translateY(-30px)}
}
.jh-awaken-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border-radius:50%;border:3px solid rgba(255,200,0,0.8);pointer-events:none;z-index:35;animation:jhAwakenRingA 1.2s ease-out forwards}
@keyframes jhAwakenRingA{0%{width:0;height:0;opacity:1;border-width:4px}100%{width:500px;height:500px;opacity:0;border-width:1px}}
.jh-vs{font-family:'Ma Shan Zheng',cursive;font-size:2.4rem;color:#cc2233;text-shadow:0 0 20px rgba(204,34,51,0.5);animation:jhVsP 0.8s ease-in-out infinite}
@keyframes jhVsP{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.jh-battle-pet{position:absolute !important;bottom:18%;z-index:15;width:min(500px, 45vw);height:min(500px, 55vh)}
.jh-battle-boss{position:absolute !important;bottom:18%;z-index:15;width:min(600px, 50vw);height:min(600px, 60vh)}
.jh-battle-pet{left:10% !important;right:auto !important}
.jh-battle-boss{right:10% !important;left:auto !important}
.jh-battle-pet img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 20px rgba(255,80,0,0.5)) drop-shadow(0 10px 30px rgba(0,0,0,0.8))}
.jh-battle-boss img,.jh-battle-boss svg{width:100%;height:100%;object-fit:contain}
.jh-slash{position:absolute;z-index:25;pointer-events:none;opacity:0}
.jh-slash.jh-active{animation:jhSlashA 0.4s ease-out forwards}
@keyframes jhSlashA{0%{opacity:0;transform:scale(0.3) rotate(-30deg)}30%{opacity:1;transform:scale(1.2) rotate(10deg)}100%{opacity:0;transform:scale(1.5) rotate(15deg)}}
.jh-burst{position:absolute;z-index:24;width:180px;height:180px;pointer-events:none;opacity:0}
.jh-burst.jh-active{animation:jhBurstA 0.5s ease-out forwards}
@keyframes jhBurstA{0%{opacity:0;transform:scale(0)}40%{opacity:0.7;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
.jh-shake{animation:jhShakeA 0.35s ease-in-out}
@keyframes jhShakeA{0%,100%{transform:translate(0)}10%{transform:translate(-12px,6px)}20%{transform:translate(10px,-8px)}30%{transform:translate(-8px,10px)}40%{transform:translate(6px,-4px)}50%{transform:translate(-4px,6px)}60%{transform:translate(3px,-3px)}80%{transform:translate(-2px,1px)}}
.jh-lunge-right{animation:jhLungeR 0.4s cubic-bezier(0.2,1,0.3,1)}
@keyframes jhLungeR{0%{transform:translate(0) scale(1)}25%{transform:translate(60px,-10px) scale(1.12)}50%{transform:translate(80px,-5px) scale(1.15)}100%{transform:translate(0) scale(1)}}
.jh-lunge-left{animation:jhLungeL 0.4s cubic-bezier(0.2,1,0.3,1)}
@keyframes jhLungeL{0%{transform:translate(0) scale(1)}25%{transform:translate(-60px,-10px) scale(1.12)}50%{transform:translate(-80px,-5px) scale(1.15)}100%{transform:translate(0) scale(1)}}
.jh-recoil-right{animation:jhRecoilR 0.35s ease-out}
@keyframes jhRecoilR{0%{transform:translate(0)}30%{transform:translate(25px,5px) skewX(-5deg)}100%{transform:translate(0) skewX(0)}}
.jh-recoil-left{animation:jhRecoilL 0.35s ease-out}
@keyframes jhRecoilL{0%{transform:translate(0)}30%{transform:translate(-25px,5px) skewX(5deg)}100%{transform:translate(0) skewX(0)}}
.jh-hit-flash{animation:jhHitFlash 0.3s ease-out}
@keyframes jhHitFlash{0%{filter:brightness(1)}15%{filter:brightness(3) saturate(0)}30%{filter:brightness(0.6) saturate(2) hue-rotate(-20deg)}50%{filter:brightness(1.8)}100%{filter:brightness(1)}}
.jh-squash{animation:jhSquash 0.3s ease-out}
@keyframes jhSquash{0%{transform:scale(1,1)}30%{transform:scale(1.15,0.85)}60%{transform:scale(0.92,1.08)}100%{transform:scale(1,1)}}
.jh-hp-hit{animation:jhHpHit 0.4s ease-out}
@keyframes jhHpHit{0%{filter:brightness(1)}25%{filter:brightness(2.5) drop-shadow(0 0 8px #fff)}100%{filter:brightness(1)}}
.jh-screen-shake{animation:jhScreenShake 0.3s ease-out}
@keyframes jhScreenShake{0%,100%{transform:translate(0)}15%{transform:translate(-4px,-3px)}30%{transform:translate(5px,2px)}45%{transform:translate(-3px,4px)}60%{transform:translate(2px,-2px)}}
.jh-combo{position:absolute;z-index:30;font-family:'Ma Shan Zheng',cursive;pointer-events:none;opacity:0}
.jh-combo.jh-show{animation:jhComboA 0.7s ease-out forwards}
@keyframes jhComboA{0%{opacity:0;transform:translateY(0) scale(0.5)}30%{opacity:1;transform:translateY(-15px) scale(1.2)}100%{opacity:0;transform:translateY(-50px) scale(0.8)}}
.jh-spark{position:absolute;z-index:30;pointer-events:none}
.jh-spark span{position:absolute;width:3px;height:3px;background:#c9a84c;border-radius:50%;animation:jhSparkF 0.45s ease-out forwards}
@keyframes jhSparkF{0%{opacity:1;transform:translate(0) scale(1)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}}
.jh-battle-ground{position:absolute;bottom:0;width:100%;height:28%;background:linear-gradient(0deg,#1a1008 0%,transparent 100%);z-index:12}
.jh-battle-ground::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.3),transparent)}
/* Wuxia battle scene buildings silhouette */
.jh-battle-buildings{position:absolute;bottom:20%;left:0;width:100%;height:50%;z-index:1;opacity:0.2;pointer-events:none}
/* Result */
.jh-result-box{position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;pointer-events:none}
.jh-result-text{font-family:'Ma Shan Zheng',cursive;font-size:clamp(3rem,10vw,6rem);letter-spacing:0.2em;animation:jhResReveal 0.8s ease-out forwards;opacity:0;text-shadow:0 0 30px rgba(0,0,0,0.9),0 2px 8px rgba(0,0,0,0.95),0 0 60px rgba(0,0,0,0.6)}
@keyframes jhResReveal{0%{opacity:0;transform:scale(2.5) rotate(-5deg);filter:blur(15px)}60%{opacity:1;transform:scale(1.05) rotate(1deg);filter:blur(0)}100%{opacity:1;transform:scale(1) rotate(0)}}
.jh-result-text.jh-win{color:#c9a84c;text-shadow:0 0 30px rgba(201,168,76,0.6),0 2px 8px rgba(0,0,0,0.95),0 0 60px rgba(0,0,0,0.5)}
.jh-result-text.jh-lose{color:#cc2233;text-shadow:0 0 30px rgba(204,34,51,0.6),0 2px 8px rgba(0,0,0,0.95),0 0 60px rgba(0,0,0,0.5)}
.jh-result-sub{color:rgba(245,240,232,0.9);font-size:1rem;margin-top:0.8em;letter-spacing:0.2em;opacity:0;animation:jhSubR 0.6s ease 0.6s forwards;text-shadow:0 1px 6px rgba(0,0,0,0.95),0 0 20px rgba(0,0,0,0.7)}
.jh-result-detail{color:rgba(245,240,232,0.85);font-size:0.9rem;margin-top:0.5em;letter-spacing:0.15em;opacity:0;animation:jhSubR 0.6s ease 1s forwards;text-shadow:0 1px 6px rgba(0,0,0,0.95),0 0 20px rgba(0,0,0,0.7)}
@keyframes jhSubR{to{opacity:1}}
/* ===== 战败照片撕碎特效 ===== */
.jh-shatter-host{position:relative;overflow:visible;}
.jh-shatter-host img,.jh-shatter-host svg{opacity:0 !important;transition:opacity 0.3s 0.25s;}
.jh-shatter-host .jh-torn-piece img{opacity:1 !important;}
.jh-torn-piece{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:30;
  animation:jhTornFly var(--torn-dur,1.8s) cubic-bezier(.22,.68,.36,1) var(--torn-delay,0.35s) forwards;
  transform-origin:center center;
  filter:drop-shadow(2px 4px 6px rgba(0,0,0,0.7));
}
.jh-torn-piece img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:contain;
  clip-path:var(--torn-clip);
}
@keyframes jhTornFly{
  0%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1);}
  8%{opacity:1;transform:translate(calc(var(--tx)*0.05),calc(var(--ty)*0.05)) rotate(calc(var(--tr)*0.1)) scale(1.02);}
  35%{opacity:1;transform:translate(calc(var(--tx)*0.5),calc(var(--ty)*0.4)) rotate(calc(var(--tr)*0.5)) scale(0.95);}
  75%{opacity:0.5;transform:translate(calc(var(--tx)*0.85),calc((var(--ty) + 40px)*0.85)) rotate(calc(var(--tr)*0.85)) scale(0.4);}
  100%{opacity:0;transform:translate(var(--tx),calc(var(--ty) + 60px)) rotate(var(--tr)) scale(0);}
}
.jh-torn-crack{
  position:absolute;top:0;left:0;width:100%;height:100%;z-index:29;pointer-events:none;
  opacity:0;animation:jhTornCrackIn 0.35s ease-out forwards;
}
@keyframes jhTornCrackIn{0%{opacity:0;transform:scale(0.95)}100%{opacity:1;transform:scale(1)}}
.jh-torn-flash{position:absolute;top:-10%;left:-10%;width:120%;height:120%;z-index:28;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,0.95) 0%,rgba(255,200,180,0.4) 35%,transparent 65%);
  animation:jhTornFlash 0.45s ease-out forwards;}
@keyframes jhTornFlash{0%{opacity:1;transform:scale(0.6)}25%{opacity:0.8;transform:scale(1.1)}100%{opacity:0;transform:scale(1.4)}}
.jh-torn-dust{
  position:absolute;border-radius:50%;pointer-events:none;opacity:0;
  animation:jhDustFloat var(--ddur,2s) ease-out var(--ddelay,0.3s) forwards;
}
/* 碎片停留空中版（课堂PK/宠物PK用） */
.jh-torn-piece-stay{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:30;
  animation:jhTornFlyStay var(--torn-dur,1.2s) cubic-bezier(.22,.68,.36,1) forwards;
  transform-origin:center center;
  filter:drop-shadow(2px 4px 6px rgba(0,0,0,0.7));
}
.jh-torn-piece-stay img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:contain;
  clip-path:var(--torn-clip);
  opacity:1 !important;
}
@keyframes jhTornFlyStay{
  0%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1);}
  40%{opacity:1;transform:translate(calc(var(--tx)*0.5),calc(var(--ty)*0.5)) rotate(calc(var(--tr)*0.5)) scale(0.92);}
  100%{opacity:1;transform:translate(var(--tx),var(--ty)) rotate(var(--tr)) scale(0.85);}
}
.jh-torn-dust-stay{
  position:absolute;border-radius:50%;pointer-events:none;opacity:0;
  animation:jhDustFloatStay var(--ddur,2s) ease-out var(--ddelay,0.3s) forwards;
}
@keyframes jhDustFloatStay{
  0%{opacity:0;transform:translate(0,0) scale(0.5);}
  15%{opacity:0.7;}
  100%{opacity:0.6;transform:translate(var(--dx),var(--dy)) scale(0.8);}
}
@keyframes jhDustFloat{
  0%{opacity:0;transform:translate(0,0) scale(0.5);}
  15%{opacity:0.7;}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0);}
}
/* ===== 江湖伤害数字飘字动画 ===== */
@keyframes jhDmgFloat {
  0%  { opacity:0; transform:translateX(-50%) translateY(0) scale(0.5); }
  12% { opacity:1; transform:translateX(-50%) translateY(-8px) scale(1.3); }
  25% { transform:translateX(-50%) translateY(-18px) scale(1); }
  100%{ opacity:0; transform:translateX(-50%) translateY(-65px) scale(0.85); }
}
@keyframes jhAnnounceFloat {
  0%  { opacity:0; transform:scale(0.4) translateY(0); }
  15% { opacity:1; transform:scale(1.2) translateY(-10px); }
  30% { transform:scale(1) translateY(-18px); }
  100%{ opacity:0; transform:scale(0.9) translateY(-55px); }
}
/* ===== 胜利烟花特效 ===== */
.jh-fireworks-container{position:absolute;top:-30%;left:-20%;width:140%;height:130%;z-index:35;pointer-events:none;overflow:visible;}
.jh-fw-particle{position:absolute;border-radius:50%;opacity:0;animation:jhFwBurst var(--dur,1s) ease-out var(--delay,0s) forwards;}
@keyframes jhFwBurst{
  0%{opacity:0;transform:translate(0,0) scale(1);}
  10%{opacity:1;transform:translate(calc(var(--fx)*0.15),calc(var(--fy)*0.15)) scale(1.3);}
  50%{opacity:0.9;transform:translate(calc(var(--fx)*0.7),calc(var(--fy)*0.7)) scale(0.9);}
  100%{opacity:0;transform:translate(var(--fx),calc(var(--fy) + 20px)) scale(0.1);}
}
.jh-fw-trail{position:absolute;width:3px;border-radius:2px;opacity:0;
  animation:jhFwTrail var(--tdur,0.6s) ease-out var(--tdelay,0s) forwards;}
@keyframes jhFwTrail{
  0%{opacity:0;height:0;bottom:0;}
  40%{opacity:1;}
  90%{opacity:0.3;height:var(--th,80px);bottom:var(--ttop,100px);}
  100%{opacity:0;height:var(--th,80px);bottom:var(--ttop,100px);}
}
.jh-fw-ring{position:absolute;border-radius:50%;border:2px solid;opacity:0;
  animation:jhFwRing 1s ease-out var(--rdelay,0s) forwards;}
@keyframes jhFwRing{
  0%{opacity:0;transform:scale(0);}
  30%{opacity:0.8;transform:scale(0.5);}
  100%{opacity:0;transform:scale(1);}
}
.jh-winner-glow img{animation:jhWinGlow 1.2s ease-in-out infinite alternate;}
@keyframes jhWinGlow{
  0%{filter:drop-shadow(0 0 15px rgba(255,215,0,0.7)) drop-shadow(0 0 30px rgba(255,165,0,0.4)) brightness(1.1);}
  100%{filter:drop-shadow(0 0 30px rgba(255,215,0,1)) drop-shadow(0 0 50px rgba(255,165,0,0.6)) brightness(1.25);}
}
.jh-exit-btn{position:fixed;bottom:20px;right:20px;z-index:10001;font-family:'Ma Shan Zheng',cursive;font-size:1.1rem;padding:8px 24px;background:rgba(139,26,26,0.8);color:#c9a84c;border:1px solid rgba(201,168,76,0.4);border-radius:16px;cursor:pointer;letter-spacing:0.1em;transition:all 0.3s;opacity:0;pointer-events:none}
.jh-exit-btn.jh-visible{opacity:1;pointer-events:auto}
.jh-exit-btn:hover{background:rgba(139,26,26,1);border-color:#c9a84c;transform:translateY(-2px)}
.jh-trans{position:fixed;top:0;left:0;width:100%;height:100%;background:#0d0d1a;z-index:10002;opacity:0;pointer-events:none;transition:opacity 0.5s ease}
.jh-trans.jh-active{opacity:1;pointer-events:auto}
/* 盘缠投入弹窗 */
.jh-invest-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;background:rgba(13,13,26,0.9);display:flex;align-items:center;justify-content:center}
.jh-invest-box{background:linear-gradient(170deg,#1a1a2e,#16213e);border:2px solid rgba(201,168,76,0.4);border-radius:24px;padding:30px 35px;text-align:center;max-width:380px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.jh-invest-box h2{font-family:'Ma Shan Zheng',cursive;color:#c9a84c;font-size:1.8rem;letter-spacing:0.15em;margin-bottom:8px}
.jh-invest-box p{color:rgba(245,240,232,0.5);font-size:13px;margin-bottom:20px}
.jh-invest-box input[type=range]{width:100%;margin:10px 0;accent-color:#c9a84c}
.jh-invest-val{font-family:'Ma Shan Zheng',cursive;color:#c9a84c;font-size:2rem;margin:8px 0}
.jh-invest-btns{display:flex;gap:12px;margin-top:20px;justify-content:center}
.jh-invest-btns button{font-family:'Ma Shan Zheng',cursive;font-size:1rem;padding:8px 24px;border-radius:16px;cursor:pointer;letter-spacing:0.1em;border:1px solid rgba(201,168,76,0.3);transition:all 0.3s}
.jh-invest-confirm{background:linear-gradient(135deg,#8b1a1a,#a52020);color:#c9a84c}
.jh-invest-confirm:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,26,26,0.4)}
.jh-invest-cancel{background:transparent;color:rgba(245,240,232,0.5)}
.jh-invest-cancel:hover{color:#f5f0e8;border-color:rgba(245,240,232,0.4)}
.jh-petal{position:fixed;z-index:10003;pointer-events:none;opacity:0}
.jh-petal.jh-fall{animation:jhPetalF linear forwards}
@keyframes jhPetalF{0%{opacity:0;transform:translateX(0) rotate(0)}10%{opacity:0.7}90%{opacity:0.5}100%{opacity:0;transform:translateX(var(--dx)) translateY(100vh) rotate(720deg)}}

/* ===== 商店道具特效 - 边框 ===== */
/*
 * 原理：conic-gradient 用 background-size:300% 画在 3 倍大的区域上，
 * background-position:center 居中，background-clip:border-box 裁到卡片大小。
 * 卡片边框区域只看到巨大圆弧的中心一小段 → 色带平滑无断层。
 * 白色 padding-box 层盖住中心，只留边框 3px 显示渐变色。
 */

@property --ba{syntax:'<angle>';initial-value:0deg;inherits:false}

/* 通用边框卡片 */
.home-pet-inner[class*='pet-border-']{
  border:3px solid transparent;
  background:
    linear-gradient(170deg,#ffffff 0%,#fdfaf8 50%,#faf5f2 100%) padding-box,
    var(--_bgrad) border-box;
  background-origin:padding-box,border-box;
  background-clip:padding-box,border-box;
  background-size:100% 100%,300% 300%;
  background-position:0 0,center;
  background-repeat:no-repeat,no-repeat;
  animation:_ba var(--_bspd,3s) linear infinite;
  position:relative;
  overflow:hidden;
  contain:layout style;
}
.home-pet-inner[class*='pet-border-']::before{
  content:none;
}
/* 内圈发光边框层 - 贴在边框内侧,置顶不影响点击 */
.home-pet-inner[class*='pet-border-']::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  border-radius:22px;
  z-index:20;pointer-events:none;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,0.15);
}
.home-pet-inner.pet-border-rainbow::after{
  box-shadow:inset 0 0 12px rgba(255,100,200,0.4),inset 0 0 25px rgba(100,200,255,0.2);
}
.home-pet-inner.pet-border-flame::after{
  box-shadow:inset 0 0 15px rgba(255,69,0,0.5),inset 0 0 30px rgba(255,140,0,0.25);
}
.home-pet-inner.pet-border-ice::after{
  box-shadow:inset 0 0 15px rgba(0,200,255,0.4),inset 0 0 30px rgba(100,220,255,0.2);
}
.home-pet-inner.pet-border-starry::after{
  box-shadow:inset 0 0 15px rgba(100,50,200,0.5),inset 0 0 30px rgba(150,100,255,0.25);
}
.home-pet-inner.pet-border-gold::after{
  box-shadow:inset 0 0 15px rgba(255,200,0,0.5),inset 0 0 30px rgba(255,180,0,0.25);
}
@keyframes _ba{from{--ba:0deg}to{--ba:360deg}}

/* 彩虹流光 */
.home-pet-inner.pet-border-rainbow{
  --_bgrad:conic-gradient(from var(--ba),#ff0080,#ff00ff,#8000ff,#0040ff,#00ffff,#00ff00,#ffff00,#ff8000,#ff0000,#ff0080);
  box-shadow:inset 0 0 20px rgba(255,100,200,0.5),inset 0 0 40px rgba(100,200,255,0.3);
}
.home-pet-inner.pet-border-rainbow:hover{
  box-shadow:inset 0 0 30px rgba(255,100,200,0.7),inset 0 0 60px rgba(100,200,255,0.5);
  --_bspd:1.5s;
}

/* 烈焰之框 */
.home-pet-inner.pet-border-flame{
  --_bgrad:conic-gradient(from var(--ba),#ff2200,#ff6600,#ffaa00,#ff4400,#ff0000,#ff8800,#ff2200);
  --_bspd:2s;
  box-shadow:inset 0 0 25px rgba(255,69,0,0.6),inset 0 0 50px rgba(255,140,0,0.3);
}
.home-pet-inner.pet-border-flame:hover{
  box-shadow:inset 0 0 35px rgba(255,69,0,0.8),inset 0 0 70px rgba(255,140,0,0.5);
}
.home-pet-inner.pet-border-flame .home-pet-top{
  position:relative;overflow:hidden;
}
.home-pet-inner.pet-border-flame .home-pet-top::before{
  content:'';position:absolute;bottom:0;left:0;right:0;height:60%;
  background:
    radial-gradient(ellipse 15px 40px at 15% 100%,rgba(255,100,0,0.9) 0%,transparent 100%),
    radial-gradient(ellipse 12px 35px at 35% 100%,rgba(255,180,0,0.8) 0%,transparent 100%),
    radial-gradient(ellipse 18px 45px at 50% 100%,rgba(255,60,0,0.9) 0%,transparent 100%),
    radial-gradient(ellipse 10px 30px at 70% 100%,rgba(255,220,0,0.8) 0%,transparent 100%),
    radial-gradient(ellipse 14px 38px at 85% 100%,rgba(255,140,0,0.9) 0%,transparent 100%);
  animation:flameLick 0.6s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes flameLick{
  0%{opacity:0.7;transform:scaleY(0.9) translateY(5px)}
  100%{opacity:1;transform:scaleY(1.1) translateY(-3px)}
}
.home-pet-inner.pet-border-flame .home-pet-top::after{
  content:'';position:absolute;top:-30%;left:-30%;width:160%;height:160%;
  background:radial-gradient(circle at 50% 80%,rgba(255,200,0,0.3) 0%,rgba(255,100,0,0.15) 30%,transparent 60%);
  animation:flameFlicker 0.4s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes flameFlicker{
  from{opacity:0.8;transform:scale(1)}
  to{opacity:1;transform:scale(1.02)}
}

/* 冰晶之框 */
.home-pet-inner.pet-border-ice{
  --_bgrad:conic-gradient(from var(--ba),#a0e8ff,#7dd3fc,#e0f4ff,#38bdf8,#7dd3fc,#a0e8ff,#bae6fd,#7dd3fc,#a0e8ff);
  box-shadow:inset 0 0 30px rgba(0,200,255,0.5),inset 0 0 60px rgba(100,220,255,0.3);
}
.home-pet-inner.pet-border-ice:hover{
  box-shadow:inset 0 0 40px rgba(0,200,255,0.7),inset 0 0 80px rgba(100,220,255,0.5);
}
.home-pet-inner.pet-border-ice .home-pet-top{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(200,240,255,0.9) 0%,rgba(180,230,255,0.7) 50%,rgba(160,220,255,0.8) 100%);
}
.home-pet-inner.pet-border-ice .home-pet-top::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(circle 4px at 20% 25%,rgba(255,255,255,1) 0%,rgba(200,240,255,0.6) 40%,transparent 100%),
    radial-gradient(circle 3px at 75% 20%,rgba(255,255,255,0.9) 0%,rgba(180,230,255,0.5) 40%,transparent 100%),
    radial-gradient(circle 5px at 50% 60%,rgba(255,255,255,0.8) 0%,rgba(200,240,255,0.4) 40%,transparent 100%),
    radial-gradient(circle 3px at 30% 75%,rgba(255,255,255,0.9) 0%,transparent 100%),
    radial-gradient(circle 4px at 85% 70%,rgba(255,255,255,0.85) 0%,transparent 100%);
  animation:iceCrystalTwinkle 2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes iceCrystalTwinkle{
  0%,100%{opacity:0.5;transform:scale(1)}
  25%{opacity:1;transform:scale(1.1)}
  50%{opacity:0.7;transform:scale(0.95)}
  75%{opacity:0.95;transform:scale(1.05)}
}
.home-pet-inner.pet-border-ice .home-pet-top::after{
  content:'';position:absolute;top:0;left:-100%;width:200%;height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.4) 45%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.4) 55%,transparent 100%);
  animation:iceSweepShine 4s linear infinite;
  pointer-events:none;
}
@keyframes iceSweepShine{
  from{transform:translateX(0)}
  to{transform:translateX(100%)}
}

/* 星空幻境 */
.home-pet-inner.pet-border-starry{
  --_bgrad:conic-gradient(from var(--ba),#1a0533,#3d1a78,#6a0dad,#4b0082,#7c3aed,#4b0082,#2a0845,#3d1a78,#1a0533);
  --_bspd:6s;
  box-shadow:inset 0 0 30px rgba(100,50,200,0.6),inset 0 0 60px rgba(150,100,255,0.3);
}
.home-pet-inner.pet-border-starry:hover{
  box-shadow:inset 0 0 40px rgba(100,50,200,0.8),inset 0 0 80px rgba(150,100,255,0.5);
}
.home-pet-inner.pet-border-starry .home-pet-top{
  position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 50%,#1a0a4e 0%,#0d0221 60%,#050010 100%);
}
.home-pet-inner.pet-border-starry .home-pet-top::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(circle 2px at 15% 20%,#fff 0%,rgba(200,180,255,0.8) 30%,transparent 60%),
    radial-gradient(circle 1.5px at 30% 45%,rgba(255,200,255,0.9) 0%,transparent 50%),
    radial-gradient(circle 2.5px at 55% 25%,#fff 0%,rgba(180,150,255,0.7) 30%,transparent 60%),
    radial-gradient(circle 1.5px at 70% 60%,rgba(255,220,255,0.85) 0%,transparent 50%),
    radial-gradient(circle 2px at 85% 35%,#fff 0%,rgba(200,180,255,0.75) 30%,transparent 60%),
    radial-gradient(circle 1.8px at 40% 75%,rgba(255,200,255,0.8) 0%,transparent 50%),
    radial-gradient(circle 2.2px at 65% 80%,#fff 0%,rgba(180,150,255,0.7) 30%,transparent 60%),
    radial-gradient(circle 1.5px at 25% 65%,rgba(255,220,255,0.85) 0%,transparent 50%);
  animation:starryTwinkle 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes starryTwinkle{
  0%,100%{opacity:0.6;transform:scale(1)}
  25%{opacity:1;transform:scale(1.1)}
  50%{opacity:0.7;transform:scale(0.95)}
  75%{opacity:0.95;transform:scale(1.05)}
}
.home-pet-inner.pet-border-starry .home-pet-top::after{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,rgba(150,100,255,0.15) 30deg,transparent 60deg,
    rgba(100,50,200,0.1) 120deg,transparent 150deg,
    rgba(200,150,255,0.12) 210deg,transparent 240deg,
    rgba(150,100,255,0.15) 300deg,transparent 330deg,transparent 360deg);
  animation:starryRotate 15s linear infinite reverse;
  pointer-events:none;
}

/* 皇家金框 */
.home-pet-inner.pet-border-gold{
  --_bgrad:conic-gradient(from var(--ba),#ffd700,#ffaa00,#fff4c0,#ffcc00,#ffd700,#ff9900,#fff4c0,#ffcc00,#ffd700);
  box-shadow:inset 0 0 25px rgba(255,200,0,0.6),inset 0 0 50px rgba(255,180,0,0.3);
}
.home-pet-inner.pet-border-gold:hover{
  box-shadow:inset 0 0 35px rgba(255,200,0,0.8),inset 0 0 70px rgba(255,180,0,0.5);
}
.home-pet-inner.pet-border-gold .home-pet-top{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,250,230,0.95) 0%,rgba(255,240,200,0.85) 50%,rgba(255,235,180,0.9) 100%);
}
.home-pet-inner.pet-border-gold .home-pet-top::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(circle 6px at 25% 30%,rgba(255,255,200,0.9) 0%,rgba(255,220,100,0.5) 40%,transparent 70%),
    radial-gradient(circle 5px at 70% 25%,rgba(255,255,220,0.85) 0%,rgba(255,200,50,0.4) 40%,transparent 70%),
    radial-gradient(circle 7px at 50% 65%,rgba(255,255,180,0.8) 0%,rgba(255,210,80,0.35) 40%,transparent 70%),
    radial-gradient(circle 4px at 80% 70%,rgba(255,255,200,0.85) 0%,transparent 70%),
    radial-gradient(circle 5px at 35% 75%,rgba(255,255,220,0.8) 0%,transparent 70%);
  animation:goldSparkle 2.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes goldSparkle{
  0%,100%{opacity:0.5;transform:scale(1)}
  30%{opacity:1;transform:scale(1.15)}
  60%{opacity:0.6;transform:scale(0.9)}
}
.home-pet-inner.pet-border-gold .home-pet-top::after{
  content:'';position:absolute;top:0;left:-100%;width:200%;height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,200,0.3) 40%,rgba(255,255,255,0.7) 50%,rgba(255,255,200,0.3) 60%,transparent 100%);
  animation:goldSweepShine 4s linear infinite;
  pointer-events:none;
}
@keyframes goldSweepShine{
  from{transform:translateX(0)}
  to{transform:translateX(100%)}
}
/* ===== 边框底部渐变光效（用box-shadow实现，不冲突伪元素） ===== */

/* 彩虹流光 - 底部彩虹渐变 */
.home-pet-inner.pet-border-rainbow .home-pet-top{
  box-shadow:inset 0 -30px 40px -12px rgba(255,100,0,0.25),
    inset 0 -20px 35px -10px rgba(255,200,0,0.18),
    inset 0 -10px 25px -5px rgba(0,200,255,0.12),
    inset 0 -5px 18px -3px rgba(200,0,255,0.1);
}
.home-pet-inner.pet-border-rainbow .home-pet-top::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:28px;
  background:linear-gradient(0deg,
    rgba(255,80,0,0.22) 0%,rgba(255,200,0,0.15) 30%,
    rgba(0,200,100,0.1) 55%,rgba(0,100,255,0.08) 75%,transparent 100%);
  pointer-events:none;
  animation:rainbowBottomGlow 3s linear infinite;
}
@keyframes rainbowBottomGlow{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(360deg)}
}



/* 烈焰之框 - 底部火焰红橙渐变 */
.home-pet-inner.pet-border-flame .home-pet-top{
  box-shadow:inset 0 -35px 45px -12px rgba(255,69,0,0.35),
    inset 0 -20px 35px -10px rgba(255,140,0,0.25),
    inset 0 -8px 20px -5px rgba(255,200,0,0.12);
}

@keyframes flameBottomPulse{
  0%{opacity:0.5}
  100%{opacity:0.9}
}

/* 冰晶之框 - 底部冰蓝渐变 */
.home-pet-inner.pet-border-ice .home-pet-top{
  box-shadow:inset 0 -35px 45px -12px rgba(56,189,248,0.3),
    inset 0 -20px 35px -10px rgba(125,211,252,0.2),
    inset 0 -8px 20px -5px rgba(186,230,253,0.12);
}

@keyframes iceBottomGlow{
  0%{opacity:0.4;filter:brightness(0.9)}
  100%{opacity:0.8;filter:brightness(1.2)}
}

/* 星空幻境 - 底部紫蓝渐变 */
.home-pet-inner.pet-border-starry .home-pet-top{
  box-shadow:inset 0 -35px 45px -12px rgba(139,92,246,0.35),
    inset 0 -20px 35px -10px rgba(168,85,247,0.25),
    inset 0 -8px 20px -5px rgba(99,102,241,0.12);
}

@keyframes starryBottomGlow{
  0%{opacity:0.4}
  100%{opacity:0.8}
}

/* 皇家金框 - 底部金色渐变 */
.home-pet-inner.pet-border-gold .home-pet-top{
  box-shadow:inset 0 -35px 45px -12px rgba(255,215,0,0.3),
    inset 0 -20px 35px -10px rgba(255,183,0,0.2),
    inset 0 -8px 20px -5px rgba(255,224,102,0.12);
}

@keyframes goldBottomShine{
  0%,100%{opacity:0.5}
  50%{opacity:0.85}
}


/* ===== 边框特效 - 名字/底部配色 ===== */
/* 烈焰之框 - 暖橙红渐变 */
.home-pet-inner.pet-border-flame .home-pet-middle{
  background:linear-gradient(90deg,#ff6b35,#e8637a,#ff8c42);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:nameFlameShift 3s ease-in-out infinite;
}
@keyframes nameFlameShift{
  0%{background-position:0% center}
  50%{background-position:100% center}
  100%{background-position:0% center}
}
.home-pet-inner.pet-border-flame .home-pet-bottom{
  background:linear-gradient(180deg,#fff5f0,#ffe8d8);
  color:#c44e20;
}

/* 冰晶之框 - 冰蓝渐变 */
.home-pet-inner.pet-border-ice .home-pet-middle{
  background:linear-gradient(90deg,#56ccf2,#2d9cdb,#7dd3fc,#56ccf2);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:nameIceShift 4s ease-in-out infinite;
}
@keyframes nameIceShift{
  0%{background-position:0% center}
  50%{background-position:100% center}
  100%{background-position:0% center}
}
.home-pet-inner.pet-border-ice .home-pet-bottom{
  background:linear-gradient(180deg,#f0f8ff,#e0f0ff);
  color:#2a7ab0;
}

/* 星空幻境 - 紫蓝渐变 */
.home-pet-inner.pet-border-starry .home-pet-middle{
  background:linear-gradient(90deg,#a78bfa,#818cf8,#c084fc,#a78bfa);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:nameStarryShift 5s ease-in-out infinite;
}
@keyframes nameStarryShift{
  0%{background-position:0% center}
  50%{background-position:100% center}
  100%{background-position:0% center}
}
.home-pet-inner.pet-border-starry .home-pet-bottom{
  background:linear-gradient(180deg,#f0f0ff,#e8e0ff);
  color:#5b4ab0;
}

/* 皇家金框 - 金棕渐变 */
.home-pet-inner.pet-border-gold .home-pet-middle{
  background:linear-gradient(90deg,#b8860b,#daa520,#ffd700,#daa520,#b8860b);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:nameGoldShift 4s ease-in-out infinite;
}
@keyframes nameGoldShift{
  0%{background-position:0% center}
  50%{background-position:100% center}
  100%{background-position:0% center}
}
.home-pet-inner.pet-border-gold .home-pet-bottom{
  background:linear-gradient(180deg,#fffbe0,#fff5d0);
  color:#8b6800;
}

/* 彩虹流光 - 彩虹渐变 */
.home-pet-inner.pet-border-rainbow .home-pet-middle{
  background:linear-gradient(90deg,#ff6b6b,#ffa040,#ffd700,#4ecdc4,#45b7d1,#a78bfa,#ff6b6b);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:nameRainbowShift 3s linear infinite;
}
@keyframes nameRainbowShift{
  0%{background-position:0% center}
  100%{background-position:200% center}
}
.home-pet-inner.pet-border-rainbow .home-pet-bottom{
  background:linear-gradient(180deg,#fff8f0,#fff0e0);
  color:#c06040;
}

/* ===== 商店道具特效 - 头顶挂件（全面升级） ===== */
.shop-top-accessory{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:10;font-size:26px;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3));pointer-events:none;animation:shopTopFloat 2s ease-in-out infinite;}
@keyframes shopTopFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}

/* 天使光环 - 升级版：旋转发光光环 */
.shop-top-accessory.pet-top-halo{
  font-size:34px;top:-18px;
  filter:drop-shadow(0 0 12px rgba(255,215,0,0.8)) drop-shadow(0 0 25px rgba(255,215,0,0.4)) drop-shadow(0 0 40px rgba(255,200,0,0.2));
  animation:haloSpinGlow 3s linear infinite;
}
.shop-top-accessory.pet-top-halo::before{
  content:'';position:absolute;top:50%;left:50%;
  width:140%;height:40%;transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid rgba(255,215,0,0.3);
  box-shadow:0 0 8px rgba(255,215,0,0.4),inset 0 0 8px rgba(255,215,0,0.2);
  animation:haloRingOrbit 2s linear infinite;
  pointer-events:none;
}
@keyframes haloSpinGlow{
  0%{transform:translateX(-50%) rotateY(0deg) scale(1);filter:drop-shadow(0 0 12px rgba(255,215,0,0.8)) drop-shadow(0 0 25px rgba(255,215,0,0.4))}
  50%{transform:translateX(-50%) rotateY(180deg) scale(1.1);filter:drop-shadow(0 0 18px rgba(255,215,0,1)) drop-shadow(0 0 35px rgba(255,215,0,0.6))}
  100%{transform:translateX(-50%) rotateY(360deg) scale(1);filter:drop-shadow(0 0 12px rgba(255,215,0,0.8)) drop-shadow(0 0 25px rgba(255,215,0,0.4))}
}
@keyframes haloRingOrbit{0%{transform:translate(-50%,-50%) rotateX(60deg) rotateZ(0deg)}100%{transform:translate(-50%,-50%) rotateX(60deg) rotateZ(360deg)}}

/* 小皇冠 - 升级版：皇冠带闪耀和微动 */
.shop-top-accessory.pet-top-crown{
  font-size:28px;top:-10px;
  filter:drop-shadow(0 0 8px rgba(255,215,0,0.6)) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  animation:crownRoyalBob 2s ease-in-out infinite;
}
.shop-top-accessory.pet-top-crown::before{
  content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 6px rgba(255,255,255,0.8),0 0 12px rgba(255,215,0,0.5);
  animation:crownSparkle 1.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes crownRoyalBob{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-3deg) scale(1)}
  25%{transform:translateX(-50%) translateY(-4px) rotate(0deg) scale(1.05)}
  50%{transform:translateX(-50%) translateY(-6px) rotate(3deg) scale(1.08)}
  75%{transform:translateX(-50%) translateY(-3px) rotate(0deg) scale(1.03)}
}
@keyframes crownSparkle{0%,100%{opacity:0.3;transform:translateX(-50%) scale(0.8)}50%{opacity:1;transform:translateX(-50%) scale(1.3);box-shadow:0 0 10px rgba(255,255,255,1),0 0 20px rgba(255,215,0,0.7)}}

/* 蝴蝶结 - 升级版：蝴蝶结带摇摆和粉色光晕 */
.shop-top-accessory.pet-top-bow{
  font-size:28px;top:-6px;
  filter:drop-shadow(0 2px 8px rgba(255,105,180,0.6)) drop-shadow(0 0 15px rgba(255,105,180,0.3));
  animation:bowSwayDance 2.5s ease-in-out infinite;
}
.shop-top-accessory.pet-top-bow::before{
  content:'';position:absolute;top:50%;left:50%;
  width:80%;height:80%;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,182,193,0.3) 0%,transparent 70%);
  animation:bowGlowPulse 2s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes bowSwayDance{
  0%,100%{transform:translateX(-50%) rotate(-8deg) scale(1)}
  30%{transform:translateX(-50%) rotate(5deg) scale(1.05)}
  60%{transform:translateX(-50%) rotate(-5deg) scale(1.08)}
  90%{transform:translateX(-50%) rotate(3deg) scale(1.02)}
}
@keyframes bowGlowPulse{0%{opacity:0.3;transform:translate(-50%,-50%) scale(0.9)}100%{opacity:0.6;transform:translate(-50%,-50%) scale(1.2)}}

/* 恶魔角 - 升级版：恶魔角带红光和邪气摆动 */
.shop-top-accessory.pet-top-horns{
  font-size:28px;top:-10px;
  filter:drop-shadow(0 2px 8px rgba(180,0,0,0.6)) drop-shadow(0 0 15px rgba(255,50,0,0.3));
  animation:hornsEvilWiggle 3s ease-in-out infinite;
}
.shop-top-accessory.pet-top-horns::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100%;height:100%;
  background:radial-gradient(ellipse at 30% 30%,rgba(255,50,0,0.2) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 30%,rgba(255,50,0,0.2) 0%,transparent 50%);
  animation:hornsFireGlow 2s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes hornsEvilWiggle{
  0%,100%{transform:translateX(-50%) rotate(0deg) scale(1)}
  20%{transform:translateX(-50%) rotate(-6deg) scale(1.05)}
  40%{transform:translateX(-50%) rotate(4deg) scale(1.02)}
  60%{transform:translateX(-50%) rotate(-4deg) scale(1.06)}
  80%{transform:translateX(-50%) rotate(3deg) scale(1.03)}
}
@keyframes hornsFireGlow{0%{opacity:0.3}100%{opacity:0.7}}

/* 花之冠 - 升级版：花冠带绽放和花瓣飘落 */
.shop-top-accessory.pet-top-flower{
  font-size:30px;top:-12px;
  filter:drop-shadow(0 2px 10px rgba(255,182,193,0.7)) drop-shadow(0 0 20px rgba(255,182,193,0.3));
  animation:flowerBloomSpin 4s ease-in-out infinite;
}
.shop-top-accessory.pet-top-flower::before{
  content:'';position:absolute;top:50%;left:50%;
  width:120%;height:120%;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,220,0.2) 0%,transparent 60%);
  animation:flowerAuraGlow 3s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes flowerBloomSpin{
  0%,100%{transform:translateX(-50%) scale(1) rotate(0deg)}
  25%{transform:translateX(-50%) scale(1.08) rotate(5deg)}
  50%{transform:translateX(-50%) scale(1.12) rotate(0deg)}
  75%{transform:translateX(-50%) scale(1.06) rotate(-5deg)}
}
@keyframes flowerAuraGlow{0%{opacity:0.3;transform:translate(-50%,-50%) scale(0.9)}100%{opacity:0.6;transform:translate(-50%,-50%) scale(1.15)}}

/* ===== 底部光圈特效 - 完全重制版V2 ===== */
.shop-base-effect{
  position:absolute;bottom:0;left:10%;right:10%;height:12px;
  border-radius:50%;
  pointer-events:none;z-index:1;
}

/* ============ 1.祥云缭绕 - 七彩祥云缭绕光柱 ============ */
.shop-base-effect.pet-base-cloud{
  background:
    radial-gradient(ellipse at 30% 50%,rgba(255,190,100,0.6) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 50%,rgba(180,130,255,0.6) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 50%,rgba(100,220,255,0.95) 0%,rgba(200,170,255,0.65) 30%,rgba(255,220,170,0.4) 60%,transparent 82%);
  box-shadow:0 0 32px rgba(180,220,255,1),0 0 64px rgba(200,160,255,0.7),0 0 96px rgba(255,200,120,0.3);
  animation:cloudBaseBreathe 3s ease-in-out infinite;
}
.shop-base-effect.pet-base-cloud::before{
  content:'';position:absolute;bottom:6px;left:0;right:0;margin:0 auto;
  width:72%;height:160px;
  background:
    linear-gradient(to top,rgba(255,220,140,0.8) 0%,rgba(255,160,200,0.65) 10%,rgba(130,200,255,0.75) 22%,rgba(160,255,200,0.6) 36%,rgba(220,160,255,0.45) 50%,rgba(255,200,180,0.25) 68%,transparent 100%);
  border-radius:40% 40% 50% 50%/100% 100% 0% 0%;
  filter:blur(4px);
  animation:cloudPillarRise 3.2s ease-in-out infinite;
}
.shop-base-effect.pet-base-cloud::after{
  content:'';position:absolute;top:-32px;left:-4%;right:-4%;height:64px;
  background:
    radial-gradient(ellipse at 18% 50%,rgba(255,170,80,0.7) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 35%,rgba(80,200,255,0.75) 0%,transparent 60%),
    radial-gradient(ellipse at 82% 50%,rgba(180,100,255,0.7) 0%,transparent 55%);
  filter:blur(9px);
  animation:cloudMistDrift 4s ease-in-out infinite;
}
@keyframes cloudBaseBreathe{
  0%,100%{box-shadow:0 0 32px rgba(180,220,255,1),0 0 64px rgba(200,160,255,0.7),0 0 96px rgba(255,200,120,0.3)}
  33%{box-shadow:0 0 44px rgba(255,210,160,0.95),0 0 76px rgba(180,150,255,0.8),0 0 110px rgba(100,220,255,0.4)}
  66%{box-shadow:0 0 38px rgba(160,210,255,1),0 0 68px rgba(255,180,210,0.7),0 0 100px rgba(160,255,200,0.35)}
}
@keyframes cloudPillarRise{
  0%,100%{opacity:.75;transform:scaleX(.86) scaleY(.9);filter:blur(4px) hue-rotate(0deg)}
  33%{opacity:1;transform:scaleX(1.16) scaleY(1.12);filter:blur(4px) hue-rotate(50deg)}
  66%{opacity:.88;transform:scaleX(.94) scaleY(1.06);filter:blur(4px) hue-rotate(-40deg)}
}
@keyframes cloudMistDrift{
  0%,100%{opacity:.6;transform:scaleX(.8) translateY(0);filter:blur(9px) hue-rotate(0deg)}
  50%{opacity:1;transform:scaleX(1.22) translateY(-14px);filter:blur(9px) hue-rotate(70deg)}
}

/* ============ 2.彩虹台座 ============ */
.shop-base-effect.pet-base-rainbow{
  background:conic-gradient(from 0deg,#ff1133,#ff6600,#ffcc00,#00cc44,#0088ff,#7722ff,#dd22aa,#ff1133);
  box-shadow:0 0 18px rgba(255,80,40,0.8),0 0 36px rgba(0,140,255,0.5);
  animation:rainbowBaseSpin 4s linear infinite;
}
.shop-base-effect.pet-base-rainbow::before{
  content:'';position:absolute;bottom:6px;left:0;right:0;margin:0 auto;
  width:65%;height:140px;
  background:linear-gradient(to top,rgba(255,255,255,0.8) 0%,rgba(255,80,160,0.45) 15%,rgba(100,180,255,0.32) 32%,rgba(80,255,140,0.2) 50%,rgba(160,80,255,0.1) 70%,transparent 100%);
  border-radius:40% 40% 50% 50%/100% 100% 0% 0%;
  filter:blur(3px);
  animation:rainbowPillarShimmer 2.6s ease-in-out infinite;
}
.shop-base-effect.pet-base-rainbow::after{
  content:'';position:absolute;top:-20px;left:2%;right:2%;height:40px;
  background:linear-gradient(90deg,rgba(255,17,51,0.55),rgba(255,204,0,0.55),rgba(0,204,68,0.55),rgba(0,136,255,0.55),rgba(119,34,255,0.55));
  border-radius:50%;filter:blur(6px);
  animation:rainbowHueShift 3s linear infinite;
}
@keyframes rainbowBaseSpin{to{filter:hue-rotate(360deg)}}
@keyframes rainbowPillarShimmer{0%,100%{opacity:.6;filter:blur(3px) hue-rotate(0deg)}50%{opacity:1;filter:blur(3px) hue-rotate(180deg)}}
@keyframes rainbowHueShift{to{filter:blur(6px) hue-rotate(360deg)}}

/* ============ 3.魔法阵（旋转光阵 + 符文环） ============ */
.shop-base-effect.pet-base-magic{
  left:50%;right:auto;width:85%;max-width:175px;height:0;padding-bottom:85%;bottom:-30px;
  border:none;border-radius:50%;
  background:
    radial-gradient(circle,rgba(138,43,226,0.5) 0%,rgba(138,43,226,0.2) 20%,transparent 50%),
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,rgba(138,43,226,0.6) 6deg,transparent 12deg,
      transparent 30deg,rgba(170,70,255,0.5) 36deg,transparent 42deg,
      transparent 60deg,rgba(138,43,226,0.6) 66deg,transparent 72deg,
      transparent 90deg,rgba(170,70,255,0.5) 96deg,transparent 102deg,
      transparent 120deg,rgba(138,43,226,0.6) 126deg,transparent 132deg,
      transparent 150deg,rgba(170,70,255,0.5) 156deg,transparent 162deg,
      transparent 180deg,rgba(138,43,226,0.6) 186deg,transparent 192deg,
      transparent 210deg,rgba(170,70,255,0.5) 216deg,transparent 222deg,
      transparent 240deg,rgba(138,43,226,0.6) 246deg,transparent 252deg,
      transparent 270deg,rgba(170,70,255,0.5) 276deg,transparent 282deg,
      transparent 300deg,rgba(138,43,226,0.6) 306deg,transparent 312deg,
      transparent 330deg,rgba(170,70,255,0.5) 336deg,transparent 342deg);
  animation:shopBaseMagicSpin 4s linear infinite;
  box-shadow:0 0 25px rgba(138,43,226,0.6),0 0 50px rgba(138,43,226,0.3),0 0 75px rgba(180,80,255,0.15),inset 0 0 20px rgba(138,43,226,0.3);
  opacity:0.85;
}
.shop-base-effect.pet-base-magic::before{content:none;}
.shop-base-effect.pet-base-magic::after{
  content:'';position:absolute;top:50%;left:50%;
  width:35%;height:35%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(200,120,255,0.9) 0%,rgba(138,43,226,0.5) 35%,transparent 65%);
  animation:magicCorePulse 2s ease-in-out infinite;pointer-events:none;
  box-shadow:0 0 20px rgba(180,80,255,0.7),0 0 40px rgba(138,43,226,0.4);
}
@keyframes shopBaseMagicSpin{0%{transform:translateX(-50%) rotate(0deg)}100%{transform:translateX(-50%) rotate(360deg)}}
@keyframes magicCorePulse{
  0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(0.85)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 25px rgba(180,80,255,0.9),0 0 50px rgba(138,43,226,0.5)}
}

/* ============ 4.熔岩地面 - 多色炽热光柱 ============ */
.shop-base-effect.pet-base-lava{
  background:
    radial-gradient(ellipse at 35% 50%,rgba(255,240,60,0.7) 0%,transparent 45%),
    radial-gradient(ellipse at 65% 50%,rgba(200,30,255,0.35) 0%,transparent 45%),
    radial-gradient(ellipse at 50% 50%,rgba(255,80,0,0.95) 0%,rgba(255,40,0,0.7) 30%,rgba(200,10,0,0.45) 55%,transparent 80%);
  box-shadow:0 0 34px rgba(255,80,0,1),0 0 68px rgba(255,140,0,0.75),0 0 100px rgba(255,200,50,0.35),0 0 40px rgba(200,50,255,0.2);
  animation:lavaBaseFlicker 1.6s ease-in-out infinite;
}
.shop-base-effect.pet-base-lava::before{
  content:'';position:absolute;bottom:6px;left:0;right:0;margin:0 auto;
  width:70%;height:158px;
  background:
    linear-gradient(to top,rgba(255,250,100,0.85) 0%,rgba(255,100,0,0.8) 10%,rgba(255,50,0,0.7) 22%,rgba(220,20,0,0.55) 35%,rgba(180,0,80,0.35) 50%,rgba(120,0,180,0.18) 65%,rgba(80,0,120,0.08) 78%,transparent 100%);
  border-radius:38% 38% 50% 50%/100% 100% 0% 0%;
  filter:blur(3px);
  animation:lavaPillarBlaze 1.5s ease-in-out infinite;
}
.shop-base-effect.pet-base-lava::after{
  content:'';position:absolute;top:-30px;left:0%;right:0%;height:60px;
  background:
    radial-gradient(ellipse at 30% 90%,rgba(255,200,50,0.85) 0%,transparent 55%),
    radial-gradient(ellipse at 70% 90%,rgba(255,60,0,0.8) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 100%,rgba(200,30,100,0.55) 0%,transparent 65%);
  filter:blur(7px);
  animation:lavaHeatWave 2s ease-in-out infinite;
}
@keyframes lavaBaseFlicker{
  0%,100%{box-shadow:0 0 34px rgba(255,80,0,1),0 0 68px rgba(255,140,0,0.75),0 0 100px rgba(255,200,50,0.35),0 0 40px rgba(200,50,255,0.2)}
  25%{box-shadow:0 0 48px rgba(255,200,0,1),0 0 80px rgba(255,100,0,0.85),0 0 120px rgba(255,50,0,0.45),0 0 50px rgba(255,30,100,0.3)}
  50%{box-shadow:0 0 52px rgba(255,50,0,1),0 0 90px rgba(255,120,0,0.9),0 0 130px rgba(255,180,50,0.4),0 0 55px rgba(180,0,200,0.25)}
  75%{box-shadow:0 0 42px rgba(255,160,0,1),0 0 74px rgba(255,80,0,0.8),0 0 110px rgba(255,220,60,0.4),0 0 45px rgba(160,30,180,0.22)}
}
@keyframes lavaPillarBlaze{
  0%,100%{opacity:.75;transform:scaleX(.84) scaleY(.88);filter:blur(3px) hue-rotate(0deg) brightness(1)}
  25%{opacity:1;transform:scaleX(1.14) scaleY(1.12);filter:blur(3px) hue-rotate(-15deg) brightness(1.2)}
  50%{opacity:.88;transform:scaleX(1.02) scaleY(1.18);filter:blur(3px) hue-rotate(10deg) brightness(1.1)}
  75%{opacity:.95;transform:scaleX(.92) scaleY(1.05);filter:blur(3px) hue-rotate(-8deg) brightness(1.15)}
}
@keyframes lavaHeatWave{
  0%,100%{opacity:.6;transform:scaleX(.86) translateY(0);filter:blur(7px) hue-rotate(0deg)}
  33%{opacity:1;transform:scaleX(1.16) translateY(-12px);filter:blur(7px) hue-rotate(-20deg)}
  66%{opacity:.8;transform:scaleX(1.05) translateY(-6px);filter:blur(7px) hue-rotate(15deg)}
}

/* ============ 5.星河足迹 - 多彩银河光柱 ============ */
.shop-base-effect.pet-base-galaxy{
  background:
    radial-gradient(ellipse at 30% 50%,rgba(100,180,255,0.6) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 50%,rgba(200,80,255,0.55) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 50%,rgba(0,220,200,0.95) 0%,rgba(60,100,255,0.6) 30%,rgba(180,60,255,0.35) 60%,transparent 82%);
  box-shadow:0 0 32px rgba(0,210,200,1),0 0 64px rgba(60,100,255,0.75),0 0 96px rgba(180,80,255,0.35),0 0 48px rgba(255,200,100,0.2);
  animation:galaxyBasePulse 3s ease-in-out infinite;
}
.shop-base-effect.pet-base-galaxy::before{
  content:'';position:absolute;bottom:6px;left:0;right:0;margin:0 auto;
  width:70%;height:158px;
  background:
    linear-gradient(to top,rgba(120,220,255,0.85) 0%,rgba(60,160,255,0.75) 10%,rgba(100,80,255,0.7) 20%,rgba(180,60,255,0.55) 32%,rgba(255,140,200,0.42) 45%,rgba(255,220,100,0.3) 58%,rgba(80,255,200,0.18) 72%,transparent 100%);
  border-radius:38% 38% 50% 50%/100% 100% 0% 0%;
  filter:blur(3.5px);
  animation:galaxyPillarFlow 2.8s ease-in-out infinite;
}
.shop-base-effect.pet-base-galaxy::after{
  content:'';position:absolute;top:-28px;left:-2%;right:-2%;height:56px;
  background:
    radial-gradient(2.5px 2.5px at 12% 42%,rgba(255,240,200,1),transparent 100%),
    radial-gradient(2px 2px at 22% 65%,rgba(255,180,220,0.95),transparent 100%),
    radial-gradient(3px 3px at 35% 25%,rgba(120,255,255,0.95),transparent 100%),
    radial-gradient(2px 2px at 48% 72%,rgba(255,255,180,0.9),transparent 100%),
    radial-gradient(2.5px 2.5px at 60% 38%,rgba(180,180,255,0.95),transparent 100%),
    radial-gradient(2px 2px at 72% 60%,rgba(255,160,200,0.9),transparent 100%),
    radial-gradient(3px 3px at 85% 30%,rgba(100,255,220,0.95),transparent 100%),
    radial-gradient(2px 2px at 92% 55%,rgba(220,180,255,0.9),transparent 100%),
    radial-gradient(ellipse at 25% 50%,rgba(100,180,255,0.5) 0%,transparent 60%),
    radial-gradient(ellipse at 75% 50%,rgba(200,80,255,0.45) 0%,transparent 60%),
    radial-gradient(ellipse at 50% 50%,rgba(0,220,200,0.4) 0%,transparent 70%);
  filter:blur(1px);
  animation:galaxyStarTwinkle 2s ease-in-out infinite;
}
@keyframes galaxyBasePulse{
  0%,100%{box-shadow:0 0 32px rgba(0,210,200,1),0 0 64px rgba(60,100,255,0.75),0 0 96px rgba(180,80,255,0.35),0 0 48px rgba(255,200,100,0.2)}
  33%{box-shadow:0 0 44px rgba(60,200,255,1),0 0 76px rgba(180,60,255,0.8),0 0 110px rgba(100,180,255,0.4),0 0 56px rgba(255,220,100,0.25)}
  66%{box-shadow:0 0 38px rgba(100,255,220,0.95),0 0 68px rgba(180,100,255,0.75),0 0 100px rgba(60,140,255,0.35),0 0 52px rgba(255,180,220,0.22)}
}
@keyframes galaxyPillarFlow{
  0%,100%{opacity:.72;transform:scaleX(.86) scaleY(.92);filter:blur(3.5px) hue-rotate(0deg)}
  33%{opacity:1;transform:scaleX(1.14) scaleY(1.1);filter:blur(3.5px) hue-rotate(40deg)}
  66%{opacity:.86;transform:scaleX(.95) scaleY(1.16);filter:blur(3.5px) hue-rotate(-30deg)}
}
@keyframes galaxyStarTwinkle{
  0%,100%{opacity:.55;transform:translateY(0) scale(1);filter:blur(1px) hue-rotate(0deg)}
  50%{opacity:1;transform:translateY(-10px) scale(1.05);filter:blur(1px) hue-rotate(50deg)}
}

/* ===== 底部光圈特效V2结束 ===== */
/* ===== 商店道具特效 - 粒子（全面升级） ===== */
.shop-particles{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;border-radius:24px;z-index:5;}
.shop-particles .sp{position:absolute;animation-timing-function:linear;animation-iteration-count:infinite;}

/* 爱心飘飘 - 升级版：爱心带旋转和缩放 */
.pet-ptcl-hearts .sp{font-size:15px;animation-name:shopPtclRise;opacity:0;filter:drop-shadow(0 0 3px rgba(255,100,150,0.5));}
.pet-ptcl-hearts .sp:nth-child(1){left:12%;animation-duration:3s;animation-delay:0s;}
.pet-ptcl-hearts .sp:nth-child(2){left:40%;animation-duration:3.5s;animation-delay:0.6s;}
.pet-ptcl-hearts .sp:nth-child(3){left:72%;animation-duration:2.8s;animation-delay:1.3s;}
.pet-ptcl-hearts .sp:nth-child(4){left:28%;animation-duration:3.2s;animation-delay:1.9s;}
.pet-ptcl-hearts .sp:nth-child(5){left:58%;animation-duration:3.8s;animation-delay:0.3s;}
.pet-ptcl-hearts .sp:nth-child(6){left:85%;animation-duration:3.3s;animation-delay:2.5s;}
@keyframes shopPtclRise{0%{bottom:-10%;opacity:0;transform:scale(0.4) rotate(-15deg)}15%{opacity:0.9;transform:scale(1.1) rotate(5deg)}50%{opacity:0.7;transform:scale(0.9) rotate(-5deg)}80%{opacity:0.5}100%{bottom:105%;opacity:0;transform:scale(1.2) rotate(20deg)}}

/* 星光闪烁 - 升级版：星芒四射效果 */
.pet-ptcl-stars .sp{font-size:14px;animation-name:shopPtclTwinkle;opacity:0;filter:drop-shadow(0 0 4px rgba(255,215,0,0.7));}
.pet-ptcl-stars .sp:nth-child(1){top:15%;left:10%;animation-duration:2s;animation-delay:0s;}
.pet-ptcl-stars .sp:nth-child(2){top:50%;left:82%;animation-duration:2.5s;animation-delay:0.4s;}
.pet-ptcl-stars .sp:nth-child(3){top:72%;left:28%;animation-duration:1.8s;animation-delay:0.9s;}
.pet-ptcl-stars .sp:nth-child(4){top:30%;left:62%;animation-duration:2.2s;animation-delay:1.4s;}
.pet-ptcl-stars .sp:nth-child(5){top:10%;left:48%;animation-duration:2.8s;animation-delay:0.2s;}
.pet-ptcl-stars .sp:nth-child(6){top:60%;left:52%;animation-duration:2.1s;animation-delay:1.8s;}
@keyframes shopPtclTwinkle{0%,100%{opacity:0;transform:scale(0.3) rotate(0deg);filter:drop-shadow(0 0 2px rgba(255,215,0,0.3))}30%{opacity:1;transform:scale(1.3) rotate(90deg);filter:drop-shadow(0 0 8px rgba(255,215,0,0.9))}50%{opacity:0.8;transform:scale(1) rotate(180deg);filter:drop-shadow(0 0 6px rgba(255,215,0,0.7))}70%{opacity:1;transform:scale(1.2) rotate(270deg);filter:drop-shadow(0 0 10px rgba(255,215,0,1))}}

/* 雪花纷飞 - 升级版：雪花带摇摆飘落 */
.pet-ptcl-snow .sp{font-size:14px;animation-name:shopPtclSnow;opacity:0;filter:drop-shadow(0 0 3px rgba(200,220,255,0.6));}
.pet-ptcl-snow .sp:nth-child(1){left:8%;animation-duration:4s;animation-delay:0s;}
.pet-ptcl-snow .sp:nth-child(2){left:32%;animation-duration:3.5s;animation-delay:0.8s;}
.pet-ptcl-snow .sp:nth-child(3){left:58%;animation-duration:4.5s;animation-delay:0.4s;}
.pet-ptcl-snow .sp:nth-child(4){left:78%;animation-duration:3.8s;animation-delay:1.3s;}
.pet-ptcl-snow .sp:nth-child(5){left:48%;animation-duration:4.2s;animation-delay:1.8s;}
.pet-ptcl-snow .sp:nth-child(6){left:20%;animation-duration:3.6s;animation-delay:2.2s;}
@keyframes shopPtclSnow{0%{top:-10%;opacity:0;transform:translateX(0) rotate(0deg) scale(0.8)}10%{opacity:0.9;transform:translateX(15px) rotate(45deg) scale(1)}40%{transform:translateX(-10px) rotate(120deg) scale(1.1)}70%{opacity:0.7;transform:translateX(20px) rotate(200deg) scale(0.9)}100%{top:105%;opacity:0;transform:translateX(-15px) rotate(360deg) scale(1)}}

/* 萤火虫 - 升级版：萤火虫带轨迹和明暗变化 */
.pet-ptcl-firefly .sp{width:7px;height:7px;border-radius:50%;background:#bef264;box-shadow:0 0 8px #bef264,0 0 16px rgba(190,242,100,0.5),0 0 24px rgba(190,242,100,0.2);animation-name:shopPtclFirefly;opacity:0;}
.pet-ptcl-firefly .sp:nth-child(1){top:25%;left:18%;animation-duration:3s;animation-delay:0s;}
.pet-ptcl-firefly .sp:nth-child(2){top:55%;left:72%;animation-duration:4s;animation-delay:0.6s;}
.pet-ptcl-firefly .sp:nth-child(3){top:40%;left:42%;animation-duration:3.5s;animation-delay:1.2s;}
.pet-ptcl-firefly .sp:nth-child(4){top:18%;left:78%;animation-duration:3.8s;animation-delay:0.3s;}
.pet-ptcl-firefly .sp:nth-child(5){top:70%;left:28%;animation-duration:4.2s;animation-delay:1.8s;}
.pet-ptcl-firefly .sp:nth-child(6){top:45%;left:58%;animation-duration:3.3s;animation-delay:2.4s;}
@keyframes shopPtclFirefly{0%{opacity:0;transform:translate(0,0) scale(0.5);box-shadow:0 0 4px #bef264}15%{opacity:0.9;transform:translate(15px,-20px) scale(1.2);box-shadow:0 0 12px #bef264,0 0 24px rgba(190,242,100,0.4)}40%{opacity:0.3;transform:translate(-12px,-8px) scale(0.7);box-shadow:0 0 6px #bef264}65%{opacity:0.85;transform:translate(18px,15px) scale(1.1);box-shadow:0 0 10px #bef264,0 0 20px rgba(190,242,100,0.3)}100%{opacity:0;transform:translate(-8px,-25px) scale(0.4);box-shadow:0 0 4px #bef264}}

/* 樱花雨 - 升级版：樱花带飘落和翻转 */
.pet-ptcl-sakura .sp{font-size:16px;animation-name:shopPtclSakura;opacity:0;filter:drop-shadow(0 1px 3px rgba(255,180,200,0.4));}
.pet-ptcl-sakura .sp:nth-child(1){left:8%;animation-duration:4s;animation-delay:0s;}
.pet-ptcl-sakura .sp:nth-child(2){left:38%;animation-duration:3.5s;animation-delay:0.6s;}
.pet-ptcl-sakura .sp:nth-child(3){left:68%;animation-duration:4.5s;animation-delay:1.2s;}
.pet-ptcl-sakura .sp:nth-child(4){left:22%;animation-duration:3.8s;animation-delay:1.8s;}
.pet-ptcl-sakura .sp:nth-child(5){left:52%;animation-duration:4.2s;animation-delay:0.2s;}
.pet-ptcl-sakura .sp:nth-child(6){left:82%;animation-duration:3.9s;animation-delay:2.4s;}
@keyframes shopPtclSakura{0%{top:-5%;opacity:0;transform:translateX(0) rotate(0deg) scale(0.7)}10%{opacity:0.8;transform:translateX(20px) rotate(30deg) scale(1)}35%{transform:translateX(-15px) rotate(90deg) scale(1.1)}60%{transform:translateX(25px) rotate(180deg) scale(0.9)}85%{opacity:0.5;transform:translateX(-10px) rotate(270deg) scale(1)}100%{top:105%;opacity:0;transform:translateX(-20px) rotate(360deg) scale(0.8)}}

/* 雷电缠身 - 升级版：雷电更强烈带闪光 */
.pet-ptcl-thunder .sp{width:4px;height:18px;background:linear-gradient(180deg,#fbbf24,#fff,#fbbf24);box-shadow:0 0 8px #fbbf24,0 0 16px rgba(251,191,36,0.5),0 0 24px rgba(251,191,36,0.3);border-radius:2px;animation-name:shopPtclThunder;opacity:0;}
.pet-ptcl-thunder .sp:nth-child(1){top:12%;left:18%;animation-duration:0.8s;animation-delay:0s;}
.pet-ptcl-thunder .sp:nth-child(2){top:38%;left:78%;animation-duration:0.6s;animation-delay:1s;}
.pet-ptcl-thunder .sp:nth-child(3){top:58%;left:38%;animation-duration:0.7s;animation-delay:2.2s;}
.pet-ptcl-thunder .sp:nth-child(4){top:22%;left:62%;animation-duration:0.5s;animation-delay:3.2s;}
.pet-ptcl-thunder .sp:nth-child(5){top:48%;left:12%;animation-duration:0.9s;animation-delay:4s;}
.pet-ptcl-thunder .sp:nth-child(6){top:68%;left:55%;animation-duration:0.65s;animation-delay:5s;}
@keyframes shopPtclThunder{0%{opacity:0;transform:scaleY(0) scaleX(1);filter:brightness(1)}5%{opacity:1;transform:scaleY(1.2) scaleX(0.8);filter:brightness(3)}15%{opacity:0.4;transform:scaleY(0.8) scaleX(1.1);filter:brightness(1)}30%{opacity:1;transform:scaleY(1.1) scaleX(0.9);filter:brightness(2.5)}45%{opacity:0.2;transform:scaleY(0.6) scaleX(1);filter:brightness(1)}60%{opacity:1;transform:scaleY(1) scaleX(1);filter:brightness(2)}80%{opacity:0.6;transform:scaleY(0.9) scaleX(1.05);filter:brightness(1.5)}100%{opacity:0;transform:scaleY(0) scaleX(1);filter:brightness(1)}}

/* ===== 商店道具特效 - 称号铭牌（全面升级） ===== */
.shop-title-badge{
  position:absolute;bottom:8px;right:8px;left:auto;transform:none;z-index:8;
  font-size:12px;font-weight:800;padding:4px 14px;border-radius:16px;white-space:nowrap;
  pointer-events:none;letter-spacing:1px;line-height:1.5;
  text-shadow:0 1px 3px rgba(0,0,0,0.3);
  animation:shopTitlePulse 2s ease-in-out infinite;
  border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(2px);
}
/* 学霸 - 蓝色智慧光芒 */
.shop-title-badge.pet-title-xueba{
  background:linear-gradient(135deg,#60a5fa,#3b82f6,#2563eb);
  color:#fff;
  box-shadow:0 2px 10px rgba(59,130,246,0.5),0 0 20px rgba(59,130,246,0.2);
  animation:shopTitlePulse 2s ease-in-out infinite,titleXuebaGlow 3s ease-in-out infinite alternate;
}
@keyframes titleXuebaGlow{0%{box-shadow:0 2px 10px rgba(59,130,246,0.5),0 0 15px rgba(59,130,246,0.2)}100%{box-shadow:0 2px 15px rgba(59,130,246,0.7),0 0 30px rgba(59,130,246,0.3),0 0 45px rgba(59,130,246,0.1)}}

/* 卷王 - 橙色火焰 */
.shop-title-badge.pet-title-juanwang{
  background:linear-gradient(135deg,#f97316,#ea580c,#c2410c);
  color:#fff;
  box-shadow:0 2px 10px rgba(249,115,22,0.5),0 0 15px rgba(249,115,22,0.2);
  animation:shopTitlePulse 2s ease-in-out infinite,titleJuanwangFire 2s ease-in-out infinite alternate;
}
@keyframes titleJuanwangFire{0%{box-shadow:0 2px 10px rgba(249,115,22,0.5),0 0 15px rgba(249,115,22,0.2)}100%{box-shadow:0 2px 15px rgba(249,115,22,0.7),0 0 25px rgba(249,115,22,0.3)}}

/* 武林盟主 - 深红霸气 */
.shop-title-badge.pet-title-wulin{
  background:linear-gradient(135deg,#dc2626,#991b1b,#7f1d1d);
  color:#fff;
  box-shadow:0 2px 10px rgba(220,38,38,0.5),0 0 20px rgba(220,38,38,0.2);
  animation:shopTitlePulse 2s ease-in-out infinite,titleWulinAura 2.5s ease-in-out infinite alternate;
}
@keyframes titleWulinAura{0%{box-shadow:0 2px 10px rgba(220,38,38,0.5),0 0 15px rgba(220,38,38,0.2)}100%{box-shadow:0 2px 18px rgba(220,38,38,0.8),0 0 35px rgba(220,38,38,0.4),0 0 50px rgba(220,38,38,0.15)}}

/* 真龙天子 - 金色龙威 */
.shop-title-badge.pet-title-dragon{
  background:linear-gradient(135deg,#ffd700,#ff8c00,#ff6b00);
  color:#fff;
  box-shadow:0 2px 10px rgba(255,140,0,0.6),0 0 20px rgba(255,140,0,0.3);
  animation:shopTitleGlow 2s ease-in-out infinite alternate,titleDragonMajesty 3s ease-in-out infinite;
}
@keyframes titleDragonMajesty{
  0%,100%{transform:scale(1) rotate(0deg)}
  25%{transform:scale(1.04) rotate(-1deg)}
  75%{transform:scale(1.06) rotate(1deg)}
}

/* 不朽传说 - 紫色神话 */
.shop-title-badge.pet-title-legend{
  background:linear-gradient(135deg,#a855f7,#7c3aed,#6d28d9);
  color:#fff;
  box-shadow:0 2px 12px rgba(168,85,247,0.6),0 0 25px rgba(168,85,247,0.3);
  animation:shopTitleGlow 2s ease-in-out infinite alternate,titleLegendMythic 4s ease-in-out infinite;
}
@keyframes titleLegendMythic{
  0%,100%{filter:hue-rotate(0deg) brightness(1)}
  50%{filter:hue-rotate(15deg) brightness(1.15)}
}

@keyframes shopTitleGlow{0%{box-shadow:0 2px 10px rgba(168,85,247,0.5),0 0 20px rgba(168,85,247,0.2)}100%{box-shadow:0 2px 18px rgba(168,85,247,0.8),0 0 35px rgba(168,85,247,0.4),0 0 50px rgba(168,85,247,0.15)}}
@keyframes shopTitlePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ===== 商店道具特效 - 场景背景 ===== */
.home-pet-card .home-pet-top.pet-scene-meadow{background:linear-gradient(180deg,#d4f5d4 0%,#a8e6a0 50%,#7bc97b 100%);overflow:visible;}
.home-pet-card .home-pet-top.pet-scene-beach{background:linear-gradient(180deg,#87CEEB 0%,#87CEEB 40%,#ffe4a0 70%,#f5d080 100%);overflow:visible;}
.home-pet-card .home-pet-top.pet-scene-space{background:linear-gradient(180deg,#0c0c2e 0%,#1a1a4e 50%,#2d1b69 100%);overflow:visible;}
.home-pet-card .home-pet-top.pet-scene-sakura{background:linear-gradient(180deg,#fce4ec 0%,#f8bbd0 50%,#f48fb1 100%);overflow:visible;}
.home-pet-card .home-pet-top.pet-scene-volcano{background:linear-gradient(180deg,#2c1810 0%,#5c2e1a 40%,#c0392b 70%,#e74c3c 90%,#ff6b35 100%);overflow:visible;}
.home-pet-card .home-pet-top.pet-scene-aurora{background:linear-gradient(180deg,#0a1628 0%,#1a3a5c 30%,#2ecc71 55%,#3498db 70%,#9b59b6 85%,#1a1a40 100%);overflow:visible;}

/* ===== 场景装饰元素动画 ===== */
@keyframes grassSway{0%,100%{transform:rotate(-3deg) scaleY(1);}50%{transform:rotate(3deg) scaleY(1.05);}}
@keyframes flowerBob{0%,100%{transform:translateY(0) rotate(-5deg);}50%{transform:translateY(-3px) rotate(5deg);}}
@keyframes butterflyFly{0%{transform:translate(0,0) rotate(0deg) scale(1);}25%{transform:translate(30px,-20px) rotate(15deg) scale(0.9);}50%{transform:translate(60px,-10px) rotate(-10deg) scale(1.1);}75%{transform:translate(30px,-30px) rotate(10deg) scale(0.95);}100%{transform:translate(0,0) rotate(0deg) scale(1);}}
@keyframes sunRay{0%{opacity:0.3;transform:rotate(0deg) scaleY(1);}50%{opacity:0.6;transform:rotate(180deg) scaleY(1.2);}100%{opacity:0.3;transform:rotate(360deg) scaleY(1);}}
@keyframes waveMove{0%{transform:translateX(0) scaleY(1);}50%{transform:translateX(-10px) scaleY(1.1);}100%{transform:translateX(-20px) scaleY(1);}}
@keyframes palmSway{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(5deg);}}
@keyframes seagullFly{0%{transform:translate(0,0) scaleX(1);}50%{transform:translate(50px,-30px) scaleX(0.8);}100%{transform:translate(100px,0) scaleX(1);}}
@keyframes starTwinkle{0%,100%{opacity:0.3;transform:scale(0.8);}50%{opacity:1;transform:scale(1.2);}}
@keyframes shootingStar{0%{transform:translate(0,0) rotate(-45deg);opacity:1;}100%{transform:translate(150px,150px) rotate(-45deg);opacity:0;}}
@keyframes nebulaFloat{0%{transform:translate(0,0) scale(1);opacity:0.4;}50%{transform:translate(20px,-20px) scale(1.3);opacity:0.6;}100%{transform:translate(0,0) scale(1);opacity:0.4;}}
@keyframes petalFall{0%{transform:translate(0,-20px) rotate(0deg);opacity:0;}10%{opacity:1;}100%{transform:translate(30px,170px) rotate(720deg);opacity:0;}}
@keyframes lightBeam{0%{opacity:0.2;transform:translateY(-20px);}50%{opacity:0.5;transform:translateY(0);}100%{opacity:0.2;transform:translateY(-20px);}}
@keyframes lavaBubble{0%{transform:translateY(0) scale(0.5);opacity:0;}20%{opacity:1;}100%{transform:translateY(-80px) scale(1.2);opacity:0;}}
@keyframes ashFloat{0%{transform:translate(0,0) rotate(0deg);opacity:0.8;}100%{transform:translate(20px,-100px) rotate(360deg);opacity:0;}}
@keyframes smokeRise{0%{transform:translateY(0) scale(1);opacity:0.6;}100%{transform:translateY(-120px) scale(2);opacity:0;}}
@keyframes auroraWave{0%{transform:translateX(-100%) skewX(-15deg);opacity:0.4;}50%{opacity:0.7;}100%{transform:translateX(100%) skewX(15deg);opacity:0.4;}}
@keyframes iceCrystal{0%,100%{opacity:0.5;transform:rotate(0deg) scale(1);}50%{opacity:1;transform:rotate(180deg) scale(1.2);}}
@keyframes snowFall{0%{transform:translateY(-20px) translateX(0) rotate(0deg);opacity:0;}10%{opacity:1;}100%{transform:translateY(170px) translateX(30px) rotate(360deg);opacity:0;}}

/* 青青草地装饰 */
.home-pet-top.pet-scene-meadow::before{content:'🌸🌼🌺🌻';position:absolute;bottom:5px;left:10px;font-size:14px;letter-spacing:8px;animation:flowerBob 3s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));z-index:1;pointer-events:none;}
.home-pet-top.pet-scene-meadow::after{content:'🦋';position:absolute;top:20px;right:30px;font-size:18px;animation:butterflyFly 6s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3));z-index:2;pointer-events:none;}

/* 阳光沙滩装饰 */
.home-pet-top.pet-scene-beach::before{content:'🌊🌊🌊';position:absolute;bottom:35px;left:5px;font-size:16px;letter-spacing:12px;animation:waveMove 2s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(0,100,200,0.4));z-index:1;pointer-events:none;}
.home-pet-top.pet-scene-beach::after{content:'🌴';position:absolute;top:10px;right:15px;font-size:28px;animation:palmSway 4s ease-in-out infinite;transform-origin:bottom center;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.3));z-index:2;pointer-events:none;}

/* 浩瀚星海装饰 */
.home-pet-top.pet-scene-space::before{content:'⭐✨💫⭐✨';position:absolute;top:15px;left:20px;font-size:12px;letter-spacing:15px;animation:starTwinkle 2s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(255,255,200,0.8));z-index:1;pointer-events:none;}
.home-pet-top.pet-scene-space::after{content:'☄️';position:absolute;top:30px;right:40px;font-size:16px;animation:shootingStar 4s ease-out infinite;filter:drop-shadow(0 0 10px rgba(255,200,100,0.9));z-index:2;pointer-events:none;}

/* 樱花小径装饰 */
.home-pet-top.pet-scene-sakura::before{content:'🌸🌸🌸';position:absolute;top:10px;left:15px;font-size:14px;letter-spacing:10px;animation:petalFall 5s linear infinite;filter:drop-shadow(0 2px 6px rgba(255,150,200,0.6));z-index:1;pointer-events:none;}
.home-pet-top.pet-scene-sakura::after{content:'🌸';position:absolute;top:5px;right:25px;font-size:18px;animation:petalFall 4s linear infinite 1s;filter:drop-shadow(0 2px 6px rgba(255,150,200,0.6));z-index:2;pointer-events:none;}

/* 火山熔岩装饰 */
.home-pet-top.pet-scene-volcano::before{content:'🔥🔥';position:absolute;bottom:15px;left:20px;font-size:20px;letter-spacing:15px;animation:lavaBubble 2.5s ease-out infinite;filter:drop-shadow(0 0 10px rgba(255,100,0,0.9));z-index:1;pointer-events:none;}
.home-pet-top.pet-scene-volcano::after{content:'💨';position:absolute;top:30px;right:30px;font-size:24px;animation:smokeRise 3s ease-out infinite;filter:drop-shadow(0 0 8px rgba(100,100,100,0.5));z-index:2;pointer-events:none;}

/* 极光幻境装饰 */
.home-pet-top.pet-scene-aurora::before{content:'❄️✨❄️';position:absolute;top:20px;left:25px;font-size:12px;letter-spacing:12px;animation:iceCrystal 3s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(200,255,255,0.8));z-index:1;pointer-events:none;}
.home-pet-top.pet-scene-aurora::after{content:'⭐';position:absolute;top:40px;right:35px;font-size:14px;animation:starTwinkle 2s ease-in-out infinite 0.5s;filter:drop-shadow(0 0 10px rgba(255,255,200,0.9));z-index:2;pointer-events:none;}

/* Modal 内场景装饰 */
.modal-pet-img.pet-scene-meadow::before{content:'🌸🌼🌺🌻';position:absolute;bottom:10px;left:20px;font-size:18px;letter-spacing:10px;animation:flowerBob 3s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3));z-index:1;pointer-events:none;}
.modal-pet-img.pet-scene-meadow::after{content:'🦋';position:absolute;top:40px;right:60px;font-size:24px;animation:butterflyFly 6s ease-in-out infinite;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4));z-index:2;pointer-events:none;}
.modal-pet-img.pet-scene-beach::before{content:'🌊🌊🌊';position:absolute;bottom:70px;left:10px;font-size:20px;letter-spacing:15px;animation:waveMove 2s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgba(0,100,200,0.5));z-index:1;pointer-events:none;}
.modal-pet-img.pet-scene-beach::after{content:'🌴';position:absolute;top:20px;right:30px;font-size:36px;animation:palmSway 4s ease-in-out infinite;transform-origin:bottom center;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4));z-index:2;pointer-events:none;}
.modal-pet-img.pet-scene-space::before{content:'⭐✨💫⭐✨';position:absolute;top:30px;left:40px;font-size:16px;letter-spacing:20px;animation:starTwinkle 2s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(255,255,200,0.9));z-index:1;pointer-events:none;}
.modal-pet-img.pet-scene-space::after{content:'☄️';position:absolute;top:60px;right:80px;font-size:22px;animation:shootingStar 4s ease-out infinite;filter:drop-shadow(0 0 15px rgba(255,200,100,0.95));z-index:2;pointer-events:none;}
.modal-pet-img.pet-scene-sakura::before{content:'🌸🌸🌸';position:absolute;top:20px;left:30px;font-size:18px;letter-spacing:12px;animation:petalFall 5s linear infinite;filter:drop-shadow(0 3px 8px rgba(255,150,200,0.7));z-index:1;pointer-events:none;}
.modal-pet-img.pet-scene-sakura::after{content:'🌸';position:absolute;top:10px;right:50px;font-size:24px;animation:petalFall 4s linear infinite 1s;filter:drop-shadow(0 3px 8px rgba(255,150,200,0.7));z-index:2;pointer-events:none;}
.modal-pet-img.pet-scene-volcano::before{content:'🔥🔥';position:absolute;bottom:30px;left:40px;font-size:26px;letter-spacing:20px;animation:lavaBubble 2.5s ease-out infinite;filter:drop-shadow(0 0 15px rgba(255,100,0,0.95));z-index:1;pointer-events:none;}
.modal-pet-img.pet-scene-volcano::after{content:'💨';position:absolute;top:60px;right:60px;font-size:32px;animation:smokeRise 3s ease-out infinite;filter:drop-shadow(0 0 12px rgba(100,100,100,0.6));z-index:2;pointer-events:none;}
.modal-pet-img.pet-scene-aurora::before{content:'❄️✨❄️';position:absolute;top:40px;left:50px;font-size:16px;letter-spacing:15px;animation:iceCrystal 3s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(200,255,255,0.9));z-index:1;pointer-events:none;}
.modal-pet-img.pet-scene-aurora::after{content:'⭐';position:absolute;top:80px;right:70px;font-size:20px;animation:starTwinkle 2s ease-in-out infinite 0.5s;filter:drop-shadow(0 0 15px rgba(255,255,200,0.95));z-index:2;pointer-events:none;}

/* ===== Modal 内道具特效适配 ===== */
.modal-top-accessory{font-size:36px;top:-20px;filter:drop-shadow(0 3px 8px rgba(0,0,0,0.3));z-index:15;animation:shopTopFloat 2s ease-in-out infinite;}
.modal-top-accessory.pet-top-halo{font-size:44px;top:-26px;filter:drop-shadow(0 0 15px rgba(255,215,0,0.8)) drop-shadow(0 0 30px rgba(255,215,0,0.4)) drop-shadow(0 0 50px rgba(255,200,0,0.2));animation:haloSpinGlow 3s linear infinite;}
.modal-top-accessory.pet-top-crown{font-size:38px;top:-20px;filter:drop-shadow(0 0 10px rgba(255,215,0,0.6)) drop-shadow(0 2px 6px rgba(0,0,0,0.3));animation:crownRoyalBob 2s ease-in-out infinite;}
.modal-top-accessory.pet-top-bow{font-size:38px;top:-16px;filter:drop-shadow(0 2px 10px rgba(255,105,180,0.6)) drop-shadow(0 0 20px rgba(255,105,180,0.3));animation:bowSwayDance 2.5s ease-in-out infinite;}
.modal-top-accessory.pet-top-horns{font-size:38px;top:-20px;filter:drop-shadow(0 2px 10px rgba(180,0,0,0.6)) drop-shadow(0 0 20px rgba(255,50,0,0.3));animation:hornsEvilWiggle 3s ease-in-out infinite;}
.modal-top-accessory.pet-top-flower{font-size:40px;top:-22px;filter:drop-shadow(0 2px 12px rgba(255,182,193,0.7)) drop-shadow(0 0 25px rgba(255,182,193,0.3));animation:flowerBloomSpin 4s ease-in-out infinite;}
.modal-base-effect{bottom:0;left:5%;right:5%;height:16px;opacity:0.95;}
.modal-base-effect.pet-base-cloud{box-shadow:0 0 32px rgba(200,230,255,1),0 0 60px rgba(180,215,250,0.6);}
.modal-base-effect.pet-base-rainbow{box-shadow:0 0 24px rgba(255,80,40,0.85),0 0 48px rgba(0,140,255,0.55);}
.modal-base-effect.pet-base-magic{width:85%;max-width:175px;height:0;padding-bottom:85%;bottom:0;left:50%;right:auto;border:none;opacity:1;box-shadow:0 0 30px rgba(138,43,226,0.7),0 0 60px rgba(138,43,226,0.4),0 0 90px rgba(180,80,255,0.2),inset 0 0 25px rgba(138,43,226,0.3);}
.modal-base-effect.pet-base-lava{box-shadow:0 0 32px rgba(255,60,0,1),0 0 64px rgba(255,120,0,0.6);}
.modal-base-effect.pet-base-galaxy{box-shadow:0 0 30px rgba(0,210,170,0.9),0 0 60px rgba(0,170,190,0.5);}
.modal-particles{border-radius:30px;z-index:12;}
.modal-particles .sp{font-size:18px;}
.modal-title-badge{font-size:16px;padding:5px 18px;bottom:auto;top:-10px;right:10px;left:auto;transform:none;box-shadow:0 4px 15px rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.2);}
@keyframes modalRainbow{0%{box-shadow:0 0 12px rgba(255,0,0,0.4),0 0 24px rgba(255,136,0,0.2)}33%{box-shadow:0 0 12px rgba(0,255,0,0.4),0 0 24px rgba(0,136,255,0.2)}66%{box-shadow:0 0 12px rgba(0,0,255,0.4),0 0 24px rgba(136,0,255,0.2)}100%{box-shadow:0 0 12px rgba(255,0,0,0.4),0 0 24px rgba(255,136,0,0.2)}}

/* ===== ENHANCED PET MODAL SYSTEM ===== */
.modal-pet-img-wrap{position:relative;perspective:800px;display:flex;align-items:center;justify-content:center;}
.modal-pet-img.entrance-low{animation:petEntranceLow 0.8s cubic-bezier(0.34,1.56,0.64,1) both;}
.modal-pet-img.entrance-mid{animation:petEntranceMid 1s cubic-bezier(0.34,1.56,0.64,1) both;}
.modal-pet-img.entrance-high{animation:petEntranceHigh 1.2s cubic-bezier(0.22,1,0.36,1) both;}
@keyframes petEntranceLow{0%{opacity:0;transform:scale(0.3) translateY(40px);filter:blur(8px) brightness(2);}50%{opacity:0.8;transform:scale(1.1) translateY(-10px);filter:blur(2px) brightness(1.3);}70%{transform:scale(0.95) translateY(4px);filter:blur(0) brightness(1.1);}100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0) brightness(1);}}
@keyframes petEntranceMid{0%{opacity:0;transform:scale(0.1) rotate(-15deg);filter:blur(10px) brightness(3) saturate(0);}30%{opacity:0.6;transform:scale(1.15) rotate(5deg);filter:blur(3px) brightness(2) saturate(1.5);}50%{transform:scale(0.9) rotate(-3deg);filter:blur(0) brightness(1.2) saturate(1.2);}70%{transform:scale(1.05) rotate(1deg);}100%{opacity:1;transform:scale(1) rotate(0deg);filter:blur(0) brightness(1) saturate(1);}}
@keyframes petEntranceHigh{0%{opacity:0;transform:scale(0) rotate(-30deg);filter:blur(12px) brightness(5) saturate(0);}15%{opacity:0.3;transform:scale(0.5) rotate(-10deg);filter:blur(8px) brightness(4);}35%{opacity:0.9;transform:scale(1.25) rotate(8deg);filter:blur(2px) brightness(2.5) saturate(2);}50%{transform:scale(0.88) rotate(-4deg);filter:blur(0) brightness(1.5) saturate(1.5);}65%{transform:scale(1.08) rotate(2deg);filter:brightness(1.2);}80%{transform:scale(0.97) rotate(-1deg);}100%{opacity:1;transform:scale(1) rotate(0deg);filter:blur(0) brightness(1) saturate(1);}}
.entrance-flash-ring{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:20;border:3px solid rgba(255,215,0,0.8);animation:entranceRingExpand 0.8s 0.15s ease-out forwards;opacity:0;}
@keyframes entranceRingExpand{0%{width:0;height:0;opacity:1;border-width:5px;}60%{opacity:0.6;}100%{width:500px;height:500px;opacity:0;border-width:1px;}}
.entrance-flash-ring.ring-2{border-color:rgba(255,150,50,0.7);animation-delay:0.3s;}
.entrance-flash-ring.ring-3{border-color:rgba(255,100,100,0.6);animation-delay:0.45s;}
.entrance-stardust{position:absolute;pointer-events:none;z-index:15;width:5px;height:5px;border-radius:50%;animation:stardustFall var(--dur) ease-out forwards;will-change:transform,opacity;contain:strict;}
@keyframes stardustFall{0%{opacity:1;transform:translate(0,0) scale(1);}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0);}}
.aura-particle{position:absolute;pointer-events:none;z-index:8;will-change:transform,opacity;contain:strict;}
.aura-particle.fire{width:6px;height:8px;border-radius:50% 50% 50% 0;background:radial-gradient(circle,#ffcc00,#ff6600,#cc2200);box-shadow:0 0 6px rgba(255,100,0,0.8),0 0 12px rgba(255,50,0,0.4);animation:fireParticleFloat var(--dur) ease-out infinite;animation-delay:var(--delay);}
@keyframes fireParticleFloat{0%{opacity:0.9;transform:translate(0,0) scale(1) rotate(0deg);}50%{opacity:0.6;transform:translate(var(--dx),calc(var(--dy) - 30px)) scale(0.7) rotate(180deg);}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) - 60px)) scale(0.2) rotate(360deg);}}
.aura-particle.water{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(200,240,255,0.9),rgba(100,180,255,0.6));box-shadow:0 0 8px rgba(100,180,255,0.6);animation:waterParticleFloat var(--dur) ease-in-out infinite;animation-delay:var(--delay);}
@keyframes waterParticleFloat{0%{opacity:0.8;transform:translateY(0) scale(1);}50%{opacity:0.5;transform:translateY(-40px) scale(0.8);}100%{opacity:0;transform:translateY(-80px) scale(0.3);}}
.aura-particle.nature{width:10px;height:10px;font-size:10px;text-align:center;line-height:1;animation:natureParticleFloat var(--dur) ease-in-out infinite;animation-delay:var(--delay);}
@keyframes natureParticleFloat{0%{opacity:0.8;transform:translate(0,0) rotate(0deg);}25%{transform:translate(15px,-20px) rotate(90deg);}50%{opacity:0.6;transform:translate(-10px,-45px) rotate(180deg);}75%{transform:translate(20px,-65px) rotate(270deg);}100%{opacity:0;transform:translate(0,-90px) rotate(360deg);}}
.aura-particle.lightning{width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,#fff,#aaeeff,#4488ff);box-shadow:0 0 8px rgba(100,180,255,0.9),0 0 16px rgba(50,100,255,0.5);animation:lightningParticleFlicker var(--dur) ease-in-out infinite;animation-delay:var(--delay);}
@keyframes lightningParticleFlicker{0%,100%{opacity:0;transform:scaleY(0.3);}10%{opacity:1;transform:scaleY(1.2);}20%{opacity:0.3;transform:scaleY(0.5);}30%{opacity:0.9;transform:scaleY(1);}50%{opacity:0;transform:scaleY(0.2);}60%{opacity:0.7;transform:scaleY(0.8);}70%{opacity:0;}}
.aura-particle.shadow{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,rgba(100,0,200,0.7),rgba(50,0,100,0.3),transparent);box-shadow:0 0 10px rgba(100,0,200,0.5);animation:shadowParticleOrbit var(--dur) ease-in-out infinite;animation-delay:var(--delay);}
@keyframes shadowParticleOrbit{0%{opacity:0.7;transform:rotate(0deg) translateX(30px) scale(1);}50%{opacity:0.4;transform:rotate(180deg) translateX(40px) scale(0.6);}100%{opacity:0.7;transform:rotate(360deg) translateX(30px) scale(1);}}
.aura-particle.light{width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,200,0.9),0 0 16px rgba(255,215,0,0.5);animation:lightParticleDrift var(--dur) ease-in-out infinite;animation-delay:var(--delay);}
@keyframes lightParticleDrift{0%{opacity:0;transform:translateY(10px) scale(0.5);}30%{opacity:1;transform:translateY(-10px) scale(1.2);}70%{opacity:0.7;transform:translateY(-35px) scale(1);}100%{opacity:0;transform:translateY(-60px) scale(0.3);}}
.aura-particle.sparkle{width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#fff,#ffd700);box-shadow:0 0 6px rgba(255,215,0,0.8);animation:sparklePulse var(--dur) ease-in-out infinite;animation-delay:var(--delay);}
@keyframes sparklePulse{0%,100%{opacity:0;transform:scale(0);}50%{opacity:1;transform:scale(1.5);}}
.modal-pet-img.tilt-active{transition:transform 0.1s ease-out;}
.modal-pet-img.tilt-active img{transition:transform 0.15s ease-out;}
.modal-pet-img .tilt-glow{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:30px;pointer-events:none;z-index:5;opacity:0;transition:opacity 0.2s;background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),rgba(255,255,255,0.25) 0%,transparent 60%);}
.modal-pet-img.tilt-active:hover .tilt-glow{opacity:1;}
.level-aura{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:1;border-radius:50%;}
/* Lv1-2: soft circular breathing glow */
.level-aura.aura-tier1{width:110%;height:110%;background:radial-gradient(circle,transparent 40%,rgba(255,255,255,0.12) 55%,rgba(255,240,230,0.08) 70%,transparent 85%);animation:auraBreathSoft 3s ease-in-out infinite;}
@keyframes auraBreathSoft{0%,100%{opacity:0.3;transform:translate(-50%,-50%) scale(0.95);}50%{opacity:0.8;transform:translate(-50%,-50%) scale(1.08);}}
/* Lv3-4: orbiting twin energy dots on a faint ring */
.level-aura.aura-tier2{width:115%;height:115%;border:2px solid rgba(100,200,255,0.12);animation:auraRingBreath 4s ease-in-out infinite;}
.level-aura.aura-tier2::before,.level-aura.aura-tier2::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;top:-7px;left:50%;margin-left:-7px;filter:blur(2px);}
.level-aura.aura-tier2::before{background:radial-gradient(circle,#88ddff,#44aaff);box-shadow:0 0 12px rgba(100,200,255,0.9),0 0 24px rgba(100,200,255,0.4);animation:orbitDot 4s linear infinite;}
.level-aura.aura-tier2::after{background:radial-gradient(circle,#88ffcc,#44ddaa);box-shadow:0 0 12px rgba(100,255,200,0.9),0 0 24px rgba(100,255,200,0.4);animation:orbitDot 4s linear infinite reverse;top:auto;bottom:-7px;}
@keyframes auraRingBreath{0%,100%{opacity:0.4;transform:translate(-50%,-50%) scale(0.97);}50%{opacity:0.7;transform:translate(-50%,-50%) scale(1.02);}}
@keyframes orbitDot{from{transform:rotate(0deg) translateX(var(--orbit-r,130px)) rotate(0deg);}to{transform:rotate(360deg) translateX(var(--orbit-r,130px)) rotate(-360deg);}}
/* Lv5-6: purple energy ring with orbiting arcs */
.level-aura.aura-tier3{width:118%;height:118%;border:3px solid rgba(150,80,255,0.15);box-shadow:0 0 20px rgba(150,0,255,0.1),inset 0 0 20px rgba(150,0,255,0.05);animation:auraRingPulse 2.5s ease-in-out infinite;}
.level-aura.aura-tier3::before{content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border-radius:50%;border:3px solid transparent;border-top-color:rgba(180,80,255,0.7);border-right-color:rgba(100,100,255,0.5);box-shadow:0 0 15px rgba(150,0,255,0.4);filter:blur(1px);animation:auraSpinArc 3s linear infinite;}
.level-aura.aura-tier3::after{content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border-radius:50%;border:3px solid transparent;border-bottom-color:rgba(200,100,255,0.6);border-left-color:rgba(120,80,255,0.4);box-shadow:0 0 12px rgba(200,0,255,0.3);filter:blur(1px);animation:auraSpinArc 3s linear infinite reverse;}
@keyframes auraRingPulse{0%,100%{opacity:0.5;box-shadow:0 0 20px rgba(150,0,255,0.1);}50%{opacity:1;box-shadow:0 0 35px rgba(150,0,255,0.3),0 0 60px rgba(100,100,255,0.15);}}
@keyframes auraSpinArc{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Lv7-8: golden fire ring with orbiting sparks */
.level-aura.aura-tier4{width:120%;height:120%;border:3px solid rgba(255,180,0,0.15);box-shadow:0 0 25px rgba(255,165,0,0.12);animation:auraRingElite 2s ease-in-out infinite;}
.level-aura.aura-tier4::before{content:'';position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border-radius:50%;border:4px solid transparent;border-top-color:rgba(255,200,0,0.8);border-right-color:rgba(255,100,0,0.6);border-left-color:rgba(255,69,0,0.4);box-shadow:0 0 20px rgba(255,165,0,0.5);filter:blur(1.5px);animation:auraSpinArc 2s linear infinite;}
.level-aura.aura-tier4::after{content:'';position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border-radius:50%;border:4px solid transparent;border-bottom-color:rgba(255,215,0,0.7);border-left-color:rgba(255,80,0,0.5);box-shadow:0 0 18px rgba(255,100,0,0.4);filter:blur(1.5px);animation:auraSpinArc 2.5s linear infinite reverse;}
@keyframes auraRingElite{0%,100%{opacity:0.5;box-shadow:0 0 25px rgba(255,165,0,0.12);}50%{opacity:1;box-shadow:0 0 50px rgba(255,165,0,0.3),0 0 80px rgba(255,69,0,0.15);}}
/* Lv9: legendary multi-ring halo with orbiting sparks */
.level-aura.aura-tier5{width:125%;height:125%;}
.level-aura.aura-tier5::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;border:3px solid transparent;border-top-color:rgba(255,215,0,0.9);border-right-color:rgba(255,100,0,0.7);border-bottom-color:rgba(255,0,200,0.5);border-left-color:rgba(0,180,255,0.6);box-shadow:0 0 25px rgba(255,180,0,0.5),0 0 50px rgba(255,100,0,0.2);filter:blur(1px);animation:auraSpinArc 2s linear infinite;}
.level-aura.aura-tier5::after{content:'';position:absolute;top:8px;left:8px;right:8px;bottom:8px;border-radius:50%;border:2px solid transparent;border-top-color:rgba(0,255,150,0.6);border-bottom-color:rgba(100,100,255,0.5);box-shadow:0 0 15px rgba(0,255,150,0.3);filter:blur(1px);animation:auraSpinArc 3s linear infinite reverse;}
.modal-pet-img.idle-breathing img{animation:petIdleBreath 3s ease-in-out infinite;}
@keyframes petIdleBreath{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1.02);}}
.modal-pet-img.pet-click-bounce{animation:petClickBounce 0.5s ease both;}
@keyframes petClickBounce{0%{transform:scale(1);}30%{transform:scale(0.92);}60%{transform:scale(1.08) rotate(3deg);}80%{transform:scale(0.98) rotate(-1deg);}100%{transform:scale(1) rotate(0);}}
.modal-pet-img.pet-spin-show img{animation:petSpinReveal 1s ease-in-out both;}
@keyframes petSpinReveal{0%{transform:rotateY(0) scale(1);}50%{transform:rotateY(180deg) scale(0.9);}100%{transform:rotateY(360deg) scale(1);}}
.click-heart-float{position:absolute;pointer-events:none;z-index:30;font-size:18px;animation:clickHeartRise 1s ease-out forwards;will-change:transform,opacity;contain:strict;}
@keyframes clickHeartRise{0%{opacity:1;transform:translateY(0) scale(0.6);}50%{opacity:0.8;transform:translateY(-40px) scale(1.1);}100%{opacity:0;transform:translateY(-80px) scale(0.8);}}
.click-sparkle-burst{position:absolute;pointer-events:none;z-index:30;width:4px;height:4px;border-radius:50%;animation:clickSparkle 0.6s ease-out forwards;will-change:transform,opacity;contain:strict;}
@keyframes clickSparkle{0%{opacity:1;transform:translate(0,0) scale(1);}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0);}}
.stat-progress-bar{position:relative;height:10px;background:#ffe8dc;border-radius:6px;overflow:hidden;margin-top:4px;}
.stat-progress-fill{height:100%;border-radius:6px;position:relative;overflow:hidden;background:linear-gradient(90deg,#ff9e8e,#ff6b6b);transition:width 1.2s cubic-bezier(0.25,1,0.5,1);width:0;}
.stat-progress-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);animation:progressShine 2s ease-in-out infinite;}
.stat-progress-fill.fill-gold{background:linear-gradient(90deg,#ffd700,#ffaa00);}
.stat-number-animate.num-bounce{animation:numBounce 0.5s ease;}
@keyframes numBounce{0%{transform:scale(1);}30%{transform:scale(1.3) translateY(-3px);}60%{transform:scale(0.9);}100%{transform:scale(1);}}
.hunger-pulse{animation:hungerPulse 1.5s ease-in-out infinite;}
@keyframes hungerPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.6;transform:scale(0.95);}}
.coin-shake{display:inline-block;animation:coinShake 2s ease-in-out infinite;}
@keyframes coinShake{0%,80%,100%{transform:rotate(0);}85%{transform:rotate(-8deg);}90%{transform:rotate(8deg);}95%{transform:rotate(-5deg);}}
.crown-spin{display:inline-block;animation:crownSpinGlow 3s linear infinite;}
@keyframes crownSpinGlow{0%{transform:rotateY(0);filter:drop-shadow(0 0 4px rgba(255,215,0,0.6));}50%{filter:drop-shadow(0 0 10px rgba(255,215,0,1));}100%{transform:rotateY(360deg);filter:drop-shadow(0 0 4px rgba(255,215,0,0.6));}}
.modal-pet-img.enhanced-hover:hover{box-shadow:0 16px 35px rgba(255,180,150,0.4),0 4px 12px rgba(0,0,0,0.1);}
.modal-pet-img.enhanced-hover:hover img{transform:scale(1.05) rotate(-1deg);filter:brightness(1.05);}
.modal-pet-img.idle-breathing{overflow:visible;}
/* ===== END ENHANCED PET MODAL SYSTEM ===== */

/* ===== PK Sub-Tabs ===== */
.pk-sub-tabs{display:flex;gap:0;margin-bottom:25px;border-bottom:3px solid #f0d8cc;position:relative;}
.pk-sub-tab{padding:14px 32px;font-size:18px;font-weight:700;color:#a08080;cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-3px;transition:all 0.3s;border-radius:16px 16px 0 0;position:relative;user-select:none;}
.pk-sub-tab:hover{color:#c04058;background:rgba(255,200,180,0.15);}
.pk-sub-tab.active{color:#c04058;border-bottom-color:#e8637a;background:linear-gradient(180deg,rgba(255,220,200,0.3),transparent);text-shadow:0 0 10px rgba(232,99,122,0.2);}
/* ===== Classroom PK ===== */
.classpk-student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:18px;}
.classpk-student-card{background:linear-gradient(145deg,#fff,#fff8f4);border:2px solid #ffe0d4;border-radius:20px;padding:14px;text-align:center;cursor:pointer;transition:all 0.3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;}
.classpk-student-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#e8637a,#f5a054);border-radius:20px 20px 0 0;opacity:0;transition:opacity 0.3s;}
.classpk-student-card:hover{transform:translateY(-4px);border-color:#ffb0a0;box-shadow:0 8px 20px rgba(255,160,140,0.2);}
.classpk-student-card:hover::before{opacity:1;}
.classpk-student-card.selected{border:3px solid #e8637a;background:linear-gradient(145deg,#ffe8e0,#ffd8d0);box-shadow:0 8px 24px rgba(220,80,80,0.3);transform:translateY(-4px);}
.classpk-student-card.selected::before{opacity:1;}
.classpk-student-card.selected::after{content:'✓';position:absolute;top:8px;right:10px;font-size:18px;font-weight:900;color:#e8637a;background:rgba(255,255,255,0.9);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(220,80,80,0.3);}
.classpk-avatar{width:60px;height:60px;border-radius:50%;overflow:hidden;margin:0 auto 8px;border:3px solid #ffd0c0;display:flex;align-items:center;justify-content:center;background:#ffefea;}
.classpk-avatar img{max-width:100%;max-height:100%;object-fit:contain;}
.classpk-name{font-weight:700;font-size:15px;color:#553333;margin-bottom:2px;}
.classpk-info{font-size:12px;color:#a08080;}
.classpk-start-area{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:997;display:none;}
.classpk-start-area.visible{display:block;animation:fadeIn 0.3s ease;}
.classpk-start-btn{padding:16px 50px;background:linear-gradient(135deg,#e8637a,#f5a054);color:#fff;border:none;border-radius:30px;font-size:20px;font-weight:800;cursor:pointer;box-shadow:0 8px 30px rgba(220,80,80,0.4);transition:all 0.3s;letter-spacing:2px;}
.classpk-start-btn:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(220,80,80,0.5);}
.classpk-start-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;}
/* Quiz Modal */
.classpk-quiz-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.3s ease;}
.classpk-quiz-box{background:linear-gradient(145deg,#fff,#fff8f2);border-radius:32px;padding:36px;max-width:600px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,0.3);border:2px solid #ffe0d4;text-align:center;}
.classpk-quiz-title{font-size:22px;font-weight:800;color:#c04058;margin-bottom:8px;}
.classpk-quiz-student{font-size:16px;color:#a06040;margin-bottom:20px;}
.classpk-quiz-question{font-size:20px;font-weight:700;color:#333;margin-bottom:24px;line-height:1.6;padding:16px;background:rgba(255,240,230,0.5);border-radius:16px;border:1px solid #ffe0d4;}
.classpk-quiz-options{display:flex;flex-direction:column;gap:12px;}
.classpk-quiz-option{padding:14px 20px;border:2px solid #ffe0d4;border-radius:16px;cursor:pointer;font-size:16px;font-weight:600;color:#553333;background:#fff;transition:all 0.2s;text-align:left;}
.classpk-quiz-option:hover{border-color:#ffb0a0;background:#fff5ef;transform:translateX(4px);}
.classpk-quiz-option.correct{border-color:#44cc44;background:#e8ffe8;color:#228822;}
.classpk-quiz-option.wrong{border-color:#ff4444;background:#ffe8e8;color:#cc2222;}
.classpk-quiz-result{font-size:24px;font-weight:800;margin-top:16px;padding:12px;border-radius:16px;}
.classpk-quiz-result.pass{color:#228822;background:#e8ffe8;}
.classpk-quiz-result.fail{color:#cc2222;background:#ffe8e8;}
/* Robot Battle Arena for Classroom PK */
.robot-arena{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0;background:linear-gradient(135deg,#0a0a1a,#1a1030,#0a0a1a);padding:30px;border-radius:35px;border:4px solid #6688ff;position:relative;min-height:420px;}
.robot-arena::before{content:'';position:absolute;bottom:0;left:10%;right:10%;height:6px;background:linear-gradient(90deg,transparent,rgba(100,150,255,0.5),rgba(150,200,255,0.7),rgba(100,150,255,0.5),transparent);border-radius:50%;box-shadow:0 0 30px 10px rgba(80,120,255,0.3);}
.robot-fighter{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:2;}
.robot-fighter-img{width:min(500px, 50vw);height:min(573px, 57vw);position:relative;display:flex;align-items:center;justify-content:center;}
.robot-fighter-img img.robot-img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 0 15px rgba(100,150,255,0.5)) drop-shadow(0 8px 20px rgba(0,0,0,0.8));}
.robot-fighter-img .pet-in-cockpit{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;overflow:hidden;border:2px solid rgba(150,200,255,0.5);box-shadow:0 0 12px rgba(100,150,255,0.4),inset 0 0 8px rgba(100,180,255,0.2);z-index:5;background:radial-gradient(circle,rgba(20,40,80,0.6),rgba(10,20,50,0.3));}
.robot-fighter-img .pet-in-cockpit img{width:100%;height:100%;object-fit:contain;}
.robot-fighter-name{font-size:18px;font-weight:800;color:#aaccff;text-shadow:0 0 10px rgba(100,150,255,0.5),1px 1px 0 #334;}
.robot-hp-bar-outer{width:100%;max-width:260px;height:20px;background:rgba(0,0,30,0.8);border-radius:12px;overflow:hidden;border:2px solid rgba(100,150,255,0.3);box-shadow:inset 0 2px 5px rgba(0,0,0,0.5);}
.robot-hp-bar-inner{height:100%;background:linear-gradient(90deg,#44aaff,#88ccff);width:100%;transition:width 0.5s ease;border-radius:12px;}
.robot-hp-text{font-size:13px;font-weight:700;color:#88bbff;margin-top:4px;}
.robot-vs{font-size:56px;font-weight:900;color:#88aaff;text-shadow:0 0 20px rgba(100,150,255,0.6),3px 3px 0 #223;animation:pulse 1s infinite;z-index:2;}
/* ===== END PK Sub-Tabs ===== */

/* ===== 课堂PK导入区 + 双屏答题区 ===== */
.classpk-import-zone{display:flex;align-items:center;gap:16px;padding:16px 20px;background:linear-gradient(135deg,#fff8f0,#fff0e8);border:2px dashed #ffb888;border-radius:20px;margin:16px 0 20px;flex-wrap:wrap;}
.classpk-import-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:linear-gradient(135deg,#e8637a,#f5a054);color:#fff;border:none;border-radius:30px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(220,80,80,0.3);transition:all 0.3s;white-space:nowrap;}
.classpk-import-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(220,80,80,0.4);}
.classpk-import-count{font-size:15px;color:#a06040;font-weight:600;}
.classpk-import-count span{font-weight:800;color:#e8637a;font-size:18px;}
.classpk-clear-btn{padding:8px 18px;background:#fff0e0;color:#c06030;border:1px solid #ffc888;border-radius:18px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;}
.classpk-clear-btn:hover{background:#ffe0d0;}
.classpk-random-btn{padding:8px 18px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:1px solid rgba(255,255,255,0.3);border-radius:18px;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 2px 8px rgba(102,126,234,0.3);}
.classpk-random-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,0.5);}
/* 双屏答题全屏覆盖 */
.classpk-dual-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000;background:#1a1a2e;display:flex;flex-direction:column;animation:fadeIn 0.3s ease;touch-action:none;-webkit-user-select:none;user-select:none;}
.classpk-dual-header{text-align:center;padding:4px 16px;background:linear-gradient(135deg,#2a1a3e,#1a2a4e);color:#fff;font-size:14px;font-weight:800;letter-spacing:1px;border-bottom:1px solid rgba(255,200,100,0.3);flex-shrink:0;}
.classpk-dual-header .round-info{color:#ffcc66;font-size:13px;font-weight:400;margin-left:10px;}
.classpk-dual-body{flex:1;display:flex;overflow:hidden;width:100%;min-height:0;}
.classpk-dual-side{flex:1;width:50%;max-width:50%;display:flex;flex-direction:column;position:relative;border-right:3px solid rgba(200,200,200,0.5);min-width:0;box-sizing:border-box;overflow:hidden;background:#ffffff;touch-action:none;}
.classpk-dual-side:last-child{border-right:none;}
/* 学生姓名顶部栏 */
.classpk-dual-side-header{flex-shrink:0;padding:6px 10px;text-align:center;font-weight:800;font-size:14px;letter-spacing:1px;background:rgba(255,255,255,0.95);border-bottom:1px solid rgba(0,0,0,0.08);z-index:5;}
.classpk-dual-side.left .classpk-dual-side-header{color:#4477dd;}
.classpk-dual-side.right .classpk-dual-side-header{color:#dd7744;}
/* 题目图片：叠加在画布区域内，靠顶部显示 */
.classpk-dual-canvas-wrap img.q-img{position:absolute;top:4px;left:50%;transform:translateX(-50%);z-index:1;pointer-events:none;max-width:96%;height:34vh;width:auto;object-fit:contain;}
/* 画布答题区域：占满剩余空间，全部可手写 */
.classpk-dual-canvas-wrap{flex:1;position:relative;overflow:hidden;background:#ffffff;min-height:0;touch-action:none;}
.classpk-dual-canvas-wrap canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;}
/* 工具栏在底部 */
.classpk-dual-toolbar{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 8px;background:rgba(255,255,255,0.95);border-top:1px solid rgba(0,0,0,0.08);flex-wrap:nowrap;z-index:5;}
.classpk-dual-toolbar button{padding:5px 12px;border-radius:12px;border:none;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s;white-space:nowrap;}
.classpk-dual-toolbar .clr-btn{background:#f39c12;color:#fff;}
.classpk-dual-toolbar .clr-btn:hover{background:#e67e22;}
.classpk-dual-toolbar .cls-btn{background:#e74c3c;color:#fff;}
.classpk-dual-toolbar .cls-btn:hover{background:#c0392b;}
.classpk-dual-toolbar .sub-btn{background:#2ecc71;color:#fff;padding:5px 16px;}
.classpk-dual-toolbar .sub-btn:hover{background:#27ae60;}
.classpk-dual-toolbar .sub-btn:disabled{opacity:0.4;cursor:not-allowed;}
.classpk-dual-colors{display:flex;gap:3px;align-items:center;flex-shrink:0;}
.classpk-dual-colors button{width:22px;height:22px;border-radius:50%;border:2px solid rgba(0,0,0,0.2);cursor:pointer;transition:transform 0.2s;flex-shrink:0;padding:0;}
.classpk-dual-colors button:hover,.classpk-dual-colors button.active{transform:scale(1.15);border-color:#333;}
/* 判定按钮区 */
/* 宠物飞入机器人驾驶室动画 */
@keyframes petFlyIntoRobotLeft {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(50px, -80px) scale(0.6) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(0, -30px) scale(0.3) rotate(360deg);
    opacity: 0;
  }
}

@keyframes petFlyIntoRobotRight {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(-50px, -80px) scale(0.6) rotate(-180deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(0, -30px) scale(0.3) rotate(-360deg);
    opacity: 0;
  }
}

.classpk-dual-judge{display:none;position:absolute;bottom:50px;left:50%;transform:translateX(-50%);gap:8px;z-index:10;background:rgba(0,0,0,0.85);padding:10px 16px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.5);}
.classpk-dual-judge.show{display:flex;}
.classpk-dual-judge button{padding:8px 18px;border-radius:18px;border:none;font-size:15px;font-weight:800;cursor:pointer;transition:all 0.2s;}
.classpk-dual-judge .judge-correct{background:#2ecc71;color:#fff;}
.classpk-dual-judge .judge-correct:hover{background:#27ae60;transform:scale(1.05);}
.classpk-dual-judge .judge-wrong{background:#e74c3c;color:#fff;}
.classpk-dual-judge .judge-wrong:hover{background:#c0392b;transform:scale(1.05);}
/* 判定结果标记 */
.classpk-dual-result-tag{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;font-size:80px;font-weight:900;pointer-events:none;animation:judgeResultPop 0.6s ease-out forwards;text-shadow:0 4px 20px rgba(0,0,0,0.5);}
.classpk-dual-result-tag.correct{color:#2ecc71;}
.classpk-dual-result-tag.wrong{color:#e74c3c;}
@keyframes judgeResultPop{0%{opacity:0;transform:translate(-50%,-50%) scale(3);}30%{opacity:1;transform:translate(-50%,-50%) scale(1);}80%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) scale(0.8);}}