/* ===================================
 * 宠物系统样式
 * 包含：宠物卡片、3D排列、进化/技能/装备/天赋、稀有度、翅膀特效、动画
 * 从 index.html 提取
 * =================================== */

/* 优化：简化宠物图标样式，减少性能消耗 */



        .pet-icon-3d {



            display: inline-block;



            position: relative;



            transform-style: flat;



            perspective: none;



            perspective-origin: center center;



            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

/* 已删除未使用的马年特效 CSS (horse-year-interactive, imagination-particles, joyful-swing, positive-rise, creative-breathe, rainbow-aura, creative-border, innovative-text, creative-particles) - 共约270行 */

/* 宠物视频样式 */



        .pet-video {



            display: block;



            border: none;



            outline: none;



            transition: all 0.3s ease;



        }



        .pet-video:hover {



            transform: scale(1.1);



            box-shadow: 0 8px 16px rgba(0,0,0,0.2);



        }

/* 宠物成长阶段动画 */

/* 幼体期（1-5级）：软糖摇摆动画 */



        @keyframes baby-pet-animation {



            0% { 



                transform: scale(0.9); 



                text-shadow: 0 2px 4px rgba(0,0,0,0.2);



            }



            25% { 



                transform: scale(1.1); 



                text-shadow: 0 4px 8px rgba(0,0,0,0.2);



            }



            50% { 



                transform: scale(1.0); 



                text-shadow: 0 2px 4px rgba(0,0,0,0.2);



            }



            75% { 



                transform: scale(1.1); 



                text-shadow: 0 4px 8px rgba(0,0,0,0.2);



            }



            100% { 



                transform: scale(0.9); 



                text-shadow: 0 2px 4px rgba(0,0,0,0.2);



            }



        }

/* 少年期（6-10级）：弹性跳跃动画 */



        @keyframes teen-pet-animation {



            0% { 



                transform: scale(1) translateY(0px); 



                text-shadow: 0 3px 6px rgba(0,0,0,0.2);



            }



            25% { 



                transform: scale(1.05) translateY(-5px); 



                text-shadow: 0 6px 12px rgba(0,0,0,0.25);



            }



            50% { 



                transform: scale(1.1) translateY(-10px); 



                text-shadow: 0 8px 16px rgba(0,0,0,0.3);



            }



            75% { 



                transform: scale(1.05) translateY(-5px); 



                text-shadow: 0 6px 12px rgba(0,0,0,0.25);



            }



            100% { 



                transform: scale(1) translateY(0px); 



                text-shadow: 0 3px 6px rgba(0,0,0,0.2);



            }



        }

/* 成年期（21-30级）：沉稳呼吸动画 */



        @keyframes adult-pet-animation {



            0% { 



                transform: scale(1); 



                text-shadow: 0 6px 12px rgba(0,0,0,0.2);



            }



            50% { 



                transform: scale(1.05); 



                text-shadow: 0 10px 20px rgba(0,0,0,0.3);



            }



            100% { 



                transform: scale(1); 



                text-shadow: 0 6px 12px rgba(0,0,0,0.2);



            }



        }

/* 终极期（31-40级）：炫目光效动画 */



        @keyframes ultimate-pet-animation {



            0% { 



                transform: scale(1) rotateY(0deg); 



                text-shadow: 0 8px 16px rgba(0,0,0,0.3);



            }



            25% { 



                transform: scale(1.05) rotateY(10deg); 



                text-shadow: 0 12px 24px rgba(0,0,0,0.35);



            }



            50% { 



                transform: scale(1.1) rotateY(0deg); 



                text-shadow: 0 15px 30px rgba(0,0,0,0.4);



            }



            75% { 



                transform: scale(1.05) rotateY(-10deg); 



                text-shadow: 0 12px 24px rgba(0,0,0,0.35);



            }



            100% { 



                transform: scale(1) rotateY(0deg); 



                text-shadow: 0 8px 16px rgba(0,0,0,0.3);



            }



        }

/* 优化后的宠物3D动画 */



        @keyframes petFloat {



            0% { transform: translateZ(0px) rotateY(0deg); }



            25% { transform: translateZ(3px) rotateY(5deg); }



            50% { transform: translateZ(0px) rotateY(0deg); }



            75% { transform: translateZ(3px) rotateY(-5deg); }



            100% { transform: translateZ(0px) rotateY(0deg); }



        }



        @keyframes ultimatePulse {



            0% { transform: scale(1); opacity: 0.7; }



            50% { transform: scale(1.1); opacity: 0.9; }



            100% { transform: scale(1); opacity: 0.7; }



        }



        @keyframes ultimateRotate {



            0% { transform: rotate(0deg); }



            100% { transform: rotate(360deg); }



        }



        @keyframes particleFloat {



            0% { transform: translateY(0px) scale(1); opacity: 0.6; }



            50% { transform: translateY(-8px) scale(1.3); opacity: 1; }



            100% { transform: translateY(0px) scale(1); opacity: 0.6; }



        }

/* 100级宠物特殊样式 - 完全禁用所有动画 */



        .pet-level-500 {



            animation: none !important;



            -webkit-animation: none !important;



            -moz-animation: none !important;



            -o-animation: none !important;



            transform: none !important;



            -webkit-transform: none !important;



            -moz-transform: none !important;



            -ms-transform: none !important;



            transition: none !important;



            -webkit-transition: none !important;



            -moz-transition: none !important;



            -o-transition: none !important;



        }

/* 100级宠物的子元素也禁用动画 */



        .pet-level-500 * {



            animation: none !important;



            -webkit-animation: none !important;



            -moz-animation: none !important;



            -o-animation: none !important;



            transform: none !important;



            -webkit-transform: none !important;



            -moz-transform: none !important;



            -ms-transform: none !important;



            transition: none !important;



            -webkit-transition: none !important;



            -moz-transition: none !important;



            -o-transition: none !important;



        }

/* 100级宠物禁用悬停效果 */



        .pet-level-500:hover {



            animation: none !important;



            -webkit-animation: none !important;



            -moz-animation: none !important;



            -o-animation: none !important;



            transform: none !important;



            -webkit-transform: none !important;



            -moz-transform: none !important;



            -ms-transform: none !important;



            transition: none !important;



            -webkit-transition: none !important;



            -moz-transition: none !important;



            -o-transition: none !important;



            filter: none !important;



            -webkit-filter: none !important;



            box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;



            text-shadow: none !important;



            border-color: #ccc !important;



        }

/* 100级宠物禁用悬停时的3D变换效果 */



        .pet-level-500:hover {



            transform: none !important;



            -webkit-transform: none !important;



            -moz-transform: none !important;



            -ms-transform: none !important;



        }

/* 静态宠物类 - 全面禁用所有效果 */



        .pet-static,



        .pet-static:hover,



        .pet-static:active,



        .pet-static:focus,



        .pet-static * {



            animation: none !important;



            -webkit-animation: none !important;



            -moz-animation: none !important;



            -o-animation: none !important;



            transform: none !important;



            -webkit-transform: none !important;



            -moz-transform: none !important;



            -ms-transform: none !important;



            transition: none !important;



            -webkit-transition: none !important;



            -moz-transition: none !important;



            -o-transition: none !important;



            filter: none !important;



            -webkit-filter: none !important;



            box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;



            text-shadow: none !important;



            border-color: #ccc !important;



            cursor: default !important;



        }

/* 传说期（51-60级）：金色光芒动画 */



        @keyframes legendary-pet-animation {



            0% { 



                transform: scale(1); 



                text-shadow: 0 12px 24px rgba(0,0,0,0.4);



            }



            25% { 



                transform: scale(1.05); 



                text-shadow: 0 18px 36px rgba(0,0,0,0.45);



            }



            50% { 



                transform: scale(1.1); 



                text-shadow: 0 20px 40px rgba(0,0,0,0.5);



            }



            75% { 



                transform: scale(1.05); 



                text-shadow: 0 18px 36px rgba(0,0,0,0.45);



            }



            100% { 



                transform: scale(1); 



                text-shadow: 0 12px 24px rgba(0,0,0,0.4);



            }



        }

/* 宠物进化动画样式 - 禁用所有动画效果 */



        .evolution-effect {



            display: none !important;



        }



        .evolution-particles {



            display: none !important;



        }



        .evolution-particles::before,



        .evolution-particles::after {



            display: none !important;



        }



        .evolution-light {



            display: none !important;



        }

/* 宠物升级动画样式 - 禁用所有动画效果 */



        .levelup-effect {



            display: none !important;



        }



        .levelup-particles {



            display: none !important;



        }



        .levelup-particles::before,



        .levelup-particles::after {



            display: none !important;



        }



        .levelup-glow {



            display: none !important;



        }

/* 进化动画关键帧 - 禁用所有动画 */



        @keyframes evolutionParticleFloat {



            0%, 50%, 100% {



                transform: none;



                opacity: 0;



            }



        }



        @keyframes evolutionLightPulse {



            0%, 50%, 100% {



                transform: none;



                opacity: 0;



            }



        }

/* 不同进化类型的特殊效果 */



        .evolution-epic {



            animation: epicEvolution 3s ease-in-out;



        }



        .evolution-rare {



            animation: rareEvolution 2.5s ease-in-out;



        }



        .evolution-normal {



            animation: normalEvolution 2s ease-in-out;



        }



        .evolution-basic {



            animation: basicEvolution 1.5s ease-in-out;



        }

/* 不同升级类型的特殊效果 */



        .levelup-milestone {



            animation: milestoneLevelUp 2s ease-in-out;



        }



        .levelup-major {



            animation: majorLevelUp 1.8s ease-in-out;



        }



        .levelup-minor {



            animation: minorLevelUp 1.5s ease-in-out;



        }



        .levelup-basic {



            animation: basicLevelUp 1.2s ease-in-out;



        }

/* 进化类型动画 */



        @keyframes epicEvolution {



            0% {



                transform: scale(1) rotateY(0deg) translateZ(0px);



                filter: brightness(1) saturate(1);



            }



            20% {



                transform: scale(1.8) rotateY(72deg) translateZ(60px);



                filter: brightness(1.5) saturate(1.8);



            }



            40% {



                transform: scale(1.5) rotateY(144deg) translateZ(80px);



                filter: brightness(2) saturate(2);



            }



            60% {



                transform: scale(2.2) rotateY(216deg) translateZ(100px);



                filter: brightness(2.5) saturate(2.5);



            }



            80% {



                transform: scale(1.3) rotateY(288deg) translateZ(40px);



                filter: brightness(1.8) saturate(1.8);



            }



            100% {



                transform: scale(1) rotateY(360deg) translateZ(0px);



                filter: brightness(1) saturate(1);



            }



        }



        @keyframes rareEvolution {



            0% {



                transform: scale(1) rotateY(0deg) translateZ(0px);



                filter: brightness(1) saturate(1);



            }



            25% {



                transform: scale(1.5) rotateY(90deg) translateZ(50px);



                filter: brightness(1.3) saturate(1.5);



            }



            50% {



                transform: scale(1.8) rotateY(180deg) translateZ(70px);



                filter: brightness(1.8) saturate(2);



            }



            75% {



                transform: scale(1.2) rotateY(270deg) translateZ(30px);



                filter: brightness(1.4) saturate(1.6);



            }



            100% {



                transform: scale(1) rotateY(360deg) translateZ(0px);



                filter: brightness(1) saturate(1);



            }



        }



        @keyframes normalEvolution {



            0% {



                transform: scale(1) rotateY(0deg) translateZ(0px);



                filter: brightness(1);



            }



            30% {



                transform: scale(1.3) rotateY(108deg) translateZ(30px);



                filter: brightness(1.2);



            }



            60% {



                transform: scale(1.5) rotateY(216deg) translateZ(50px);



                filter: brightness(1.4);



            }



            100% {



                transform: scale(1) rotateY(360deg) translateZ(0px);



                filter: brightness(1);



            }



        }



        @keyframes basicEvolution {



            0% {



                transform: scale(1) rotateY(0deg);



            }



            50% {



                transform: scale(1.2) rotateY(180deg);



            }



            100% {



                transform: scale(1) rotateY(360deg);



            }



        }

/* 升级类型动画 */



        @keyframes milestoneLevelUp {



            0% {



                transform: scale(1) translateY(0px) rotateX(0deg);



                filter: brightness(1) drop-shadow(0 0 0px rgba(255, 255, 0, 0));



            }



            25% {



                transform: scale(1.4) translateY(-20px) rotateX(15deg);



                filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 255, 0, 0.8));



            }



            50% {



                transform: scale(1.6) translateY(-30px) rotateX(-10deg);



                filter: brightness(1.5) drop-shadow(0 0 30px rgba(255, 255, 0, 1));



            }



            75% {



                transform: scale(1.2) translateY(-15px) rotateX(5deg);



                filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 255, 0, 0.6));



            }



            100% {



                transform: scale(1) translateY(0px) rotateX(0deg);



                filter: brightness(1) drop-shadow(0 0 0px rgba(255, 255, 0, 0));



            }



        }



        @keyframes majorLevelUp {



            0% {



                transform: scale(1) translateY(0px);



                filter: brightness(1);



            }



            30% {



                transform: scale(1.3) translateY(-15px);



                filter: brightness(1.2);



            }



            70% {



                transform: scale(1.4) translateY(-20px);



                filter: brightness(1.3);



            }



            100% {



                transform: scale(1) translateY(0px);



                filter: brightness(1);



            }



        }



        @keyframes minorLevelUp {



            0% {



                transform: scale(1) translateY(0px);



                filter: brightness(1);



            }



            50% {



                transform: scale(1.2) translateY(-10px);



                filter: brightness(1.1);



            }



            100% {



                transform: scale(1) translateY(0px);



                filter: brightness(1);



            }



        }



        @keyframes basicLevelUp {



            0% {



                transform: scale(1);



            }



            50% {



                transform: scale(1.1);



            }



            100% {



                transform: scale(1);



            }



        }

/* 宠物周围的环绕粒子 */



        .pet-icon-3d::before {



            content: '';



            position: absolute;



            top: -10px;



            left: -10px;



            right: -10px;



            bottom: -10px;



            background-image: 



                radial-gradient(2px 2px at 20% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 60%),



                radial-gradient(1px 1px at 80% 80%, rgba(0, 255, 255, 0.12) 0%, transparent 60%),



                radial-gradient(1px 1px at 80% 20%, rgba(255, 0, 255, 0.1) 0%, transparent 60%),



                radial-gradient(2px 2px at 20% 80%, rgba(255, 255, 0, 0.13) 0%, transparent 60%);



            animation: petOrbitParticles 8s linear infinite;



            pointer-events: none;



            z-index: -1;



        }



        .pet-icon-3d::after {



            content: '';



            position: absolute;



            top: -15px;



            left: -15px;



            right: -15px;



            bottom: -15px;



            background-image: 



                radial-gradient(1px 1px at 30% 30%, rgba(255, 215, 0, 0.08) 0%, transparent 60%),



                radial-gradient(1px 1px at 70% 70%, rgba(0, 136, 255, 0.06) 0%, transparent 60%);



            animation: petOrbitParticles 12s linear infinite reverse;



            pointer-events: none;



            z-index: -1;



        }

/* 点击时的爆炸粒子效果 */



        .pet-icon-3d:active::before {



            content: '';



            position: absolute;



            top: -20px;



            left: -20px;



            right: -20px;



            bottom: -20px;



            background-image: 



                radial-gradient(3px 3px at 25% 25%, rgba(255, 255, 0, 0.8) 0%, transparent 70%),



                radial-gradient(2px 2px at 75% 75%, rgba(255, 0, 255, 0.7) 0%, transparent 70%),



                radial-gradient(2px 2px at 75% 25%, rgba(0, 255, 255, 0.6) 0%, transparent 70%),



                radial-gradient(3px 3px at 25% 75%, rgba(255, 255, 0, 0.5) 0%, transparent 70%);



            animation: clickParticleExplosion 0.8s ease-out;



            pointer-events: none;



            z-index: 15;



        }

/* 等级提升时的持续粒子效果 */



        .pet-icon-3d.upgrading::before {



            animation-duration: 2s;



            opacity: 0.9;



        }



        .pet-icon-3d.upgrading::after {



            animation-duration: 3s;



            opacity: 0.7;



        }

/* 宠物卡片网格样式 */



        .pet-grid {



            display: grid;



            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));



            gap: 24px;



            margin-top: 30px;



            max-width: 1600px;



            margin-left: auto;



            margin-right: auto;



        }

/* 宠物领养中心样式 */



        .pet-center-title {



            font-family: 'Comic Neue', 'ZCOOL KuaiLe', cursive, sans-serif;



            font-size: 2.8em;



            color: var(--primary-color);



            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);



            margin: 0;



            padding: 15px 0;



        }

/* 宠物卡片样式 — 班宠乐园 v2 风格 */



        .pet-card {



            background: #fff;



            border-radius: 18px;



            padding: 0;



            text-align: left;



            box-shadow: 0 3px 14px rgba(0,0,0,0.06);



            cursor: pointer;



            transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s ease, border-color 0.25s ease;



            position: relative;



            overflow: hidden;



            min-height: auto;



            display: flex;



            flex-direction: column;



            border: 1.5px solid transparent;



            animation: fadeIn 0.3s ease-out;



        }



        .pet-card:nth-child(even) {



            background: #fff;



        }



        .pet-card:hover {



            transform: translateY(-4px);



            box-shadow: 0 8px 30px rgba(0,0,0,0.12);



            border-color: rgba(140, 100, 220, 0.25);



        }

/* ============ 稀有度系统样式 ============ */

/* 稀有度筛选栏 */



        .pet-search-input {



            width: 100%;



            max-width: 320px;



            padding: 9px 18px;



            border-radius: 24px;



            border: 2px solid #e0e0e0;



            font-size: 0.9em;



            outline: none;



            transition: border-color 0.25s ease, box-shadow 0.25s ease;



            background: #fafafa;



        }



        .pet-search-input:focus {



            border-color: var(--primary-color);



        }



        .rarity-filter-bar {



            display: flex;



            flex-wrap: wrap;



            gap: 8px;



            justify-content: center;



            align-items: center;



            margin: 20px auto;



            max-width: 800px;



            padding: 0 15px;



        }



        .rarity-filter-btn {



            padding: 7px 18px;



            border-radius: 22px;



            border: 2px solid transparent;



            cursor: pointer;



            font-size: 0.88em;



            font-weight: 600;



            transition: all 0.25s ease;



            background: var(--bg-secondary);



            color: var(--text-secondary);



            white-space: nowrap;



            letter-spacing: 0.3px;



        }



        .rarity-filter-btn:hover {



            transform: translateY(-2px);



            box-shadow: 0 4px 12px rgba(0,0,0,0.12);



        }



        .rarity-filter-btn.active {



            color: white;



            box-shadow: 0 4px 16px rgba(0,0,0,0.2);



            transform: translateY(-2px);



        }



        .rarity-filter-btn.all.active { background: linear-gradient(135deg, #667eea, #764ba2); border-color: #667eea; }



        .rarity-filter-btn.common { border-color: #a0a0a0; color: #666; }



        .rarity-filter-btn.common.active { background: linear-gradient(135deg, #a0a0a0, #888); border-color: #a0a0a0; color: white; }



        .rarity-filter-btn.uncommon { border-color: #4caf50; color: #388e3c; }



        .rarity-filter-btn.uncommon.active { background: linear-gradient(135deg, #66bb6a, #43a047); border-color: #4caf50; color: white; }



        .rarity-filter-btn.rare { border-color: #2196f3; color: #1976d2; }



        .rarity-filter-btn.rare.active { background: linear-gradient(135deg, #42a5f5, #1e88e5); border-color: #2196f3; color: white; }



        .rarity-filter-btn.epic { border-color: #9c27b0; color: #7b1fa2; }



        .rarity-filter-btn.epic.active { background: linear-gradient(135deg, #ab47bc, #8e24aa); border-color: #9c27b0; color: white; }



        .rarity-filter-btn.legendary { border-color: #f9a825; color: #f57f17; }



        .rarity-filter-btn.legendary.active { background: linear-gradient(135deg, #fbc02d, #f9a825); border-color: #f9a825; color: #5d4037; }



        .filter-count {



            font-size: 0.85em;



            color: var(--text-tertiary);



            margin-left: 10px;



        }

/* 稀有度徽章 */



        .rarity-badge {



            position: absolute;



            top: 10px;



            left: 10px;



            padding: 3px 12px;



            border-radius: 12px;



            font-size: 11px;



            font-weight: 700;



            color: white;



            z-index: 3;



            letter-spacing: 0.5px;



            box-shadow: 0 2px 10px rgba(0,0,0,0.18);



            background: rgba(0,0,0,0.50);



            backdrop-filter: blur(2px);



            -webkit-backdrop-filter: blur(2px);



        }



        .rarity-common { background: linear-gradient(135deg, #b0b0b0, #909090); }



        .rarity-uncommon { background: linear-gradient(135deg, #66bb6a, #43a047); }



        .rarity-rare { background: linear-gradient(135deg, #42a5f5, #1e88e5); }



        .rarity-epic { background: linear-gradient(135deg, #ab47bc, #7b1fa2); }



        .rarity-legendary { background: linear-gradient(135deg, #fbc02d, #f57f17); animation: legendaryGlow 2s ease-in-out infinite; }



        @keyframes legendaryGlow {



            0%, 100% { box-shadow: 0 2px 8px rgba(249, 168, 37, 0.4); }



            50% { box-shadow: 0 4px 20px rgba(249, 168, 37, 0.8); }



        }

/* 宠物图片容器 — 16:9 比例矩形 */



        .pet-card-image-wrap {



            position: relative;



            width: 100%;



            aspect-ratio: 1 / 1;



            margin: 0;



            border-radius: 16px 16px 0 0;



            overflow: hidden;



            display: flex;



            align-items: center;



            justify-content: center;



            background: linear-gradient(160deg, #f5f0ff 0%, #ede4f8 50%, #e0d4f0 100%);



        }



        .pet-card-image-wrap.common { background: linear-gradient(135deg, #f5f5f5, #e0e0e0); }



        .pet-card-image-wrap.uncommon { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }



        .pet-card-image-wrap.rare { background: linear-gradient(135deg, #e3f2fd, #bbdefb); }



        .pet-card-image-wrap.epic { background: linear-gradient(135deg, #f3e5f5, #e1bee7); }



        .pet-card-image-wrap.legendary { 



            background: linear-gradient(135deg, #fff8e1, #ffe082);



            animation: legendaryBgGlow 3s ease-in-out infinite;



        }



        @keyframes legendaryBgGlow {



            0%, 100% { box-shadow: inset 0 0 10px rgba(249,168,37,0.3); }



            50% { box-shadow: inset 0 0 25px rgba(249,168,37,0.6); }



        }



        .pet-card-image-wrap .pet-adopt-image {



            width: 100%;



            height: 100%;



            object-fit: cover;



            transition: transform 0.3s ease;



        }



        .pet-card:hover .pet-card-image-wrap .pet-adopt-image {



            transform: scale(1.03);



        }



        .pet-card-image-wrap .pet-adopt-fallback {



            font-size: 4em;



            display: flex;



            align-items: center;



            justify-content: center;



            width: 100%;



            height: 100%;



        }

/* 进化阶段预览 */



        .evolution-preview-badge {



            position: absolute;



            top: 10px;



            right: 10px;



            background: rgba(0,0,0,0.5);



            backdrop-filter: blur(6px);



            -webkit-backdrop-filter: blur(6px);



            color: #fff;



            font-size: 10px;



            font-weight: 600;



            padding: 4px 12px;



            border-radius: 12px;



            white-space: nowrap;



            letter-spacing: 0.3px;



            z-index: 3;



            box-shadow: 0 2px 8px rgba(0,0,0,0.15);



        }

/* 宠物卡片 - 稀有度顶部色条 */



        .pet-card.rarity-common { border-top: 3px solid #d0d0d0; }



        .pet-card.rarity-uncommon { border-top: 3px solid #81c784; }



        .pet-card.rarity-rare { border-top: 3px solid #64b5f6; }



        .pet-card.rarity-epic { border-top: 3px solid #ce93d8; }



        .pet-card.rarity-legendary { 



            border-top: 3px solid #fbc02d;



            box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 16px rgba(249,168,37,0.15);



        }



        .pet-card.rarity-legendary:hover {



            box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 0 24px rgba(249,168,37,0.25);



        }

/* 领养按钮 — 覆盖在图片区域上，半透明渐变 */



        .adopt-btn.rarity-common { background: linear-gradient(135deg, rgba(120,120,120,0.75), rgba(90,90,90,0.75)); }



        .adopt-btn.rarity-uncommon { background: linear-gradient(135deg, rgba(76,175,80,0.75), rgba(56,142,60,0.75)); }



        .adopt-btn.rarity-rare { background: linear-gradient(135deg, rgba(33,150,243,0.75), rgba(25,118,210,0.75)); }



        .adopt-btn.rarity-epic { background: linear-gradient(135deg, rgba(156,39,176,0.75), rgba(106,27,154,0.75)); }



        .adopt-btn.rarity-legendary { 



            background: linear-gradient(135deg, rgba(251,192,45,0.85), rgba(249,168,37,0.85)); 



            color: #5d4037;



        }



        .adopt-btn.rarity-common:hover { background: linear-gradient(135deg, rgba(140,140,140,0.85), rgba(110,110,110,0.85)); }



        .adopt-btn.rarity-uncommon:hover { background: linear-gradient(135deg, rgba(102,187,106,0.85), rgba(65,160,67,0.85)); }



        .adopt-btn.rarity-rare:hover { background: linear-gradient(135deg, rgba(66,165,245,0.85), rgba(30,136,229,0.85)); }



        .adopt-btn.rarity-epic:hover { background: linear-gradient(135deg, rgba(171,71,188,0.85), rgba(123,31,162,0.85)); }



        .adopt-btn.rarity-legendary:hover { background: linear-gradient(135deg, rgba(255,214,0,0.9), rgba(251,192,45,0.9)); }

/* 宠物模态框标签样式 */



        .pet-modal-tabs {



            display: flex;



            gap: 10px;



            margin: 20px 0;



            flex-wrap: wrap;



        }



        .tab-btn {



            padding: 10px 20px;



            background: var(--primary-color);



            color: white;



            border: none;



            border-radius: var(--radius-md);



            cursor: pointer;



            transition: all 0.3s ease;



            font-size: 0.9em;



        }



        .tab-btn:hover {



            background: var(--primary-dark);



            transform: translateY(-2px);



        }



        .tab-btn.active {



            background: var(--accent-color);



            box-shadow: var(--shadow-md);



        }

/* 宠物模态框标签内容样式 */



        .pet-modal-tab-content {



            display: none;



            padding: 20px;



            background: var(--bg-primary);



            border-radius: var(--radius-md);



            border: 1px solid var(--border-color);



        }



        .pet-modal-tab-content.active {



            display: block;



        }

/* 技能系统样式 */



        .pet-skills-section {



            margin-bottom: 25px;



        }



        .pet-skills-section h5 {



            margin-bottom: 15px;



            color: var(--primary-color);



        }



        .pet-skills-list {



            display: flex;



            flex-direction: column;



            gap: 15px;



        }



        .pet-skill-item {



            display: flex;



            justify-content: space-between;



            align-items: flex-start;



            background: var(--bg-secondary);



            padding: 15px;



            border-radius: var(--radius-md);



            box-shadow: var(--shadow-sm);



        }



        .skill-info strong {



            display: block;



            margin-bottom: 5px;



            color: var(--primary-color);



        }



        .skill-info p {



            margin: 5px 0;



            font-size: 0.9em;



            color: var(--text-secondary);



        }

/* 进化系统样式 */



        .evolution-forms {



            display: flex;



            flex-direction: column;



            gap: 15px;



        }



        .evolution-form-item {



            display: flex;



            justify-content: space-between;



            align-items: flex-start;



            background: var(--bg-secondary);



            padding: 15px;



            border-radius: var(--radius-md);



            box-shadow: var(--shadow-sm);



            opacity: 0.7;



        }



        .evolution-form-item.can-evolve {



            opacity: 1;



            border-left: 4px solid var(--secondary-color);



        }



        .evolution-info strong {



            display: block;



            margin-bottom: 5px;



            color: var(--primary-color);



        }



        .evolution-info p {



            margin: 5px 0;



            font-size: 0.9em;



            color: var(--text-secondary);



        }

/* 装备系统样式 */



        .pet-equipment-section {



            margin-bottom: 25px;



        }



        .pet-equipment-section h5 {



            margin-bottom: 15px;



            color: var(--primary-color);



        }



        .equipment-slots {



            display: grid;



            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));



            gap: 15px;



            margin-bottom: 20px;



        }



        .equipment-slot {



            background: var(--bg-secondary);



            padding: 15px;



            border-radius: var(--radius-md);



            box-shadow: var(--shadow-sm);



        }



        .equipment-slot h6 {



            margin-bottom: 10px;



            color: var(--primary-color);



        }



        .equipped-item {



            margin-top: 10px;



        }



        .equipped-item strong {



            display: block;



            margin-bottom: 5px;



        }



        .equipped-item p {



            margin: 5px 0;



            font-size: 0.9em;



            color: var(--text-secondary);



        }



        .equipment-list {



            display: flex;



            flex-direction: column;



            gap: 15px;



        }



        .equipment-item {



            display: flex;



            justify-content: space-between;



            align-items: flex-start;



            background: var(--bg-secondary);



            padding: 15px;



            border-radius: var(--radius-md);



            box-shadow: var(--shadow-sm);



        }



        .equipment-info strong {



            display: block;



            margin-bottom: 5px;



            color: var(--primary-color);



        }



        .equipment-info p {



            margin: 5px 0;



            font-size: 0.9em;



            color: var(--text-secondary);



        }

/* 天赋系统样式 */



        .pet-talents-section {



            margin-bottom: 25px;



        }



        .pet-talents-section h5 {



            margin-bottom: 15px;



            color: var(--primary-color);



        }



        .pet-talents-list {



            display: flex;



            flex-direction: column;



            gap: 15px;



        }



        .pet-talent-item {



            display: flex;



            justify-content: space-between;



            align-items: flex-start;



            background: var(--bg-secondary);



            padding: 15px;



            border-radius: var(--radius-md);



            box-shadow: var(--shadow-sm);



        }



        .talent-info strong {



            display: block;



            margin-bottom: 5px;



            color: var(--primary-color);



        }



        .talent-info p {



            margin: 5px 0;



            font-size: 0.9em;



            color: var(--text-secondary);



        }

/* 宠物图标 - 新学期主题美化 */



        .pet-icon {



            font-size: 50px;



            margin-bottom: 10px;



            display: block;



            animation: pet-float 3s ease-in-out infinite, pet-glow 2s ease-in-out infinite alternate;



            cursor: pointer;



            filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));



            transition: all 0.3s ease;



        }

/* 宠物浮动动画 */



        @keyframes pet-float {



            0%, 100% { transform: translateY(0) rotate(0deg); }



            25% { transform: translateY(-5px) rotate(2deg); }



            50% { transform: translateY(-8px) rotate(0deg); }



            75% { transform: translateY(-5px) rotate(-2deg); }



        }

/* 宠物发光动画 - 科技蓝色 */



        @keyframes pet-glow {



            0% { filter: drop-shadow(0 4px 8px rgba(0, 212, 255, 0.3)); }



            100% { filter: drop-shadow(0 6px 16px rgba(0, 153, 255, 0.5)) drop-shadow(0 0 20px rgba(0, 255, 204, 0.4)); }



        }



        .pet-icon:hover {



            animation: pet-bounce 0.6s ease infinite;



            filter: drop-shadow(0 8px 20px rgba(0, 153, 255, 0.6));



            transform: scale(1.15);



        }



        @keyframes pet-bounce {



            0%, 100% { transform: scale(1.15) translateY(0); }



            50% { transform: scale(1.15) translateY(-10px); }



        }

/* 宠物名称 — 加粗加大 */



        .pet-name {



            font-size: 15px;



            font-weight: 700;



            color: #1a1a2e;



            margin: 0;



            padding: 12px 14px 0;



            font-family: 'Comic Neue', 'ZCOOL KuaiLe', cursive, sans-serif;



            letter-spacing: 0.5px;



        }

/* 宠物性格 — pill 标签 */



        .pet-personality {



            font-size: 11px;



            color: #1565C0;



            background: #E3F2FD;



            margin: 4px 0 0;



            padding: 3px 10px;



            border-radius: 12px;



            display: inline-block;



            font-weight: 600;



            white-space: nowrap;



            text-align: left;



            line-height: 1.5;



            border: 1px solid #90CAF9;



        }



        .personality-label {



            display: none;



        }



        .personality-value {



            font-style: normal;



            color: inherit;



        }

/* 宠物细节 — pill 标签 */



        .pet-details {



            font-size: 11px;



            color: #2E7D32;



            background: #E8F5E9;



            margin: 4px 0 6px;



            padding: 3px 10px;



            border-radius: 12px;



            display: inline-block;



            font-weight: 600;



            white-space: nowrap;



            text-align: left;



            line-height: 1.4;



        }



        .details-label {



            display: none;



        }



        .details-value {



            font-family: inherit;



            color: inherit;



        }

/* 领养按钮 — 覆盖在图片区域中间 */



        .adopt-btn {



            position: absolute;



            top: 50%;



            left: 50%;



            transform: translate(-50%, -50%);



            background: rgba(255,255,255,0.25);



            backdrop-filter: blur(4px);



            -webkit-backdrop-filter: blur(4px);



            color: #fff;



            border: 1.5px solid rgba(255,255,255,0.5);



            border-radius: 22px;



            padding: 8px 22px;



            font-size: 13px;



            font-weight: 700;



            cursor: pointer;



            transition: all 0.25s ease;



            z-index: 4;



            font-family: 'Comic Neue', 'ZCOOL KuaiLe', cursive, sans-serif;



            text-shadow: 0 1px 3px rgba(0,0,0,0.35);



            box-shadow: 0 2px 12px rgba(0,0,0,0.10);



            white-space: nowrap;



            letter-spacing: 0.5px;



            opacity: 0.85;



        }



        .pet-card:hover .adopt-btn {



            opacity: 1;



            transform: translate(-50%, -50%) scale(1);



        }



        .adopt-btn:hover {



            background: linear-gradient(135deg, rgba(255,107,53,0.9), rgba(255,152,0,0.9));



            transform: translate(-50%, -50%) scale(1.08);



            box-shadow: 0 6px 20px rgba(0,0,0,0.25);



            backdrop-filter: blur(6px);



            -webkit-backdrop-filter: blur(6px);



        }



        .adopt-btn:disabled {



            background: rgba(160,160,160,0.5);



            color: #ccc;



            cursor: not-allowed;



            transform: translate(-50%, -50%) scale(0.9);



            box-shadow: none;



        }

/* 宠物网格布局 */



        .pet-grid {



            display: grid;



            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));



            gap: 20px;



            padding: 20px;



        }



        .pet-grid .pet-name {



            font-size: 15px;



            font-weight: 700;



            color: #1a1a2e;



            margin: 0;



        }

/* 领养状态样式 */



        .adoption-status {



            background: rgba(255, 255, 255, 0.9);



            border-radius: 10px;



            padding: 20px;



            margin-bottom: 30px;



            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);



            text-align: center;



            font-size: 1.2em;



            font-weight: bold;



            color: var(--text-secondary);



        }

/* 未领养宠物区域样式 */



        .no-pet-section {



            text-align: center;



            padding: 24px 16px;



            cursor: pointer;



            transition: all 0.3s ease;



            border-radius: 14px;



            background: linear-gradient(135deg, rgba(255,240,220,0.55) 0%, rgba(255,225,190,0.55) 100%);



            border: 2px dashed rgba(200,160,100,0.30);



        }



        .no-pet-section:hover {



            background: rgba(255, 220, 180, 0.7);



            transform: translateY(-2px);



        }



        .empty-paw-print {



            font-size: 60px;



            color: var(--primary-color);



            opacity: 0.7;



            margin-bottom: 10px;



        }



        .pet-adopt-hint {



            font-size: 1.2em;



            color: var(--primary-color);



            font-weight: bold;



        }

/* 积分管理和宠物管理 - 橙色系按钮 */



        .nav-module.score-management .nav-btn,



        .nav-module.pet-management .nav-btn {



            background: linear-gradient(45deg, var(--accent-dark), var(--accent-color));



        }



        .nav-module.score-management .nav-btn:hover,



        .nav-module.pet-management .nav-btn:hover {



            background: linear-gradient(45deg, var(--accent-color), var(--accent-dark));



        }

/* 宠物管理 - 蓝色系 */



        .nav-module.pet-management h3 {



            background: linear-gradient(135deg, #2196F3, #64B5F6);



            border-bottom-color: #2196F3;



            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);



        }

/* 3D多宠物排列布局 */



        .students-grid.pet-3d-layout {



            display: flex;



            flex-wrap: wrap;



            justify-content: center;



            align-items: flex-start;



            perspective: 1500px;



            transform-style: preserve-3d;



            gap: 15px;



            padding: 20px;



        }

/* 3D宠物图标排列层 */



        .pet-3d-arrangement {



            position: absolute;



            top: -10px;



            left: -10px;



            right: -10px;



            bottom: -10px;



            transform-style: preserve-3d;



            pointer-events: none;



            z-index: 1;



        }

/* 3D排列中的宠物图标 */



        .student-card-3d-container .pet-icon-3d,



        .student-card-3d-container .pet-icon {



            position: absolute;



            transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);



            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));



        }

/* 3D排列中的宠物图片强制尺寸约束（防止sacred/supreme大图原生分辨率渲染） */



        .student-card-3d-container .pet-icon-3d img {



            max-width: 64px;



            max-height: 64px;



            object-fit: contain;



            display: block;



        }

/* 中心宠物图标 */



        .student-card-3d-container .pet-icon-3d:nth-child(1),



        .student-card-3d-container .pet-icon:nth-child(1) {



            top: 15px;



            left: 50%;



            transform: translateX(-50%) translateZ(120px) scale(1.8);



            transform-origin: center top;



            z-index: 10;



        }

/* 左上角宠物图标 */



        .student-card-3d-container .pet-icon-3d:nth-child(2),



        .student-card-3d-container .pet-icon:nth-child(2) {



            top: 15px;



            left: 20px;



            transform: translateZ(80px) scale(1.1) rotateY(-45deg) rotateZ(-10deg);



            z-index: 8;



        }

/* 右上角宠物图标 */



        .student-card-3d-container .pet-icon-3d:nth-child(3),



        .student-card-3d-container .pet-icon:nth-child(3) {



            top: 15px;



            right: 20px;



            transform: translateZ(90px) scale(1.15) rotateY(45deg) rotateZ(10deg);



            z-index: 9;



        }

/* 左下角宠物图标 */



        .student-card-3d-container .pet-icon-3d:nth-child(4),



        .student-card-3d-container .pet-icon:nth-child(4) {



            bottom: 60px;



            left: 25px;



            transform: translateZ(60px) scale(1.0) rotateY(-30deg) rotateZ(-15deg);



            z-index: 7;



        }

/* 右下角宠物图标 */



        .student-card-3d-container .pet-icon-3d:nth-child(5),



        .student-card-3d-container .pet-icon:nth-child(5) {



            bottom: 60px;



            right: 25px;



            transform: translateZ(70px) scale(1.05) rotateY(30deg) rotateZ(15deg);



            z-index: 8;



        }

/* 悬浮时的3D排列动画 */



        .student-card-3d-container:hover .student-card {



            transform: translateZ(20px) rotateX(0deg) rotateY(0deg) scale(1.02);



        }



        .student-card-3d-container:hover .pet-icon-3d:nth-child(1),



        .student-card-3d-container:hover .pet-icon:nth-child(1) {



            transform: translateX(-50%) translateZ(120px) scale(1.8) rotateY(360deg);



        }



        .student-card-3d-container:hover .pet-icon-3d:nth-child(2),



        .student-card-3d-container:hover .pet-icon:nth-child(2) {



            transform: translateZ(80px) scale(1.1) rotateY(-45deg) rotateZ(-10deg);



        }



        .student-card-3d-container:hover .pet-icon-3d:nth-child(3),



        .student-card-3d-container:hover .pet-icon:nth-child(3) {



            transform: translateZ(90px) scale(1.15) rotateY(45deg) rotateZ(10deg);



        }



        .student-card-3d-container:hover .pet-icon-3d:nth-child(4),



        .student-card-3d-container:hover .pet-icon:nth-child(4) {



            transform: translateZ(60px) scale(1.0) rotateY(-30deg) rotateZ(-15deg);



        }



        .student-card-3d-container:hover .pet-icon-3d:nth-child(5),



        .student-card-3d-container:hover .pet-icon:nth-child(5) {



            transform: translateZ(70px) scale(1.05) rotateY(30deg) rotateZ(15deg);



        }

/* 移除3D排列背景光效 - 避免显示异常 */



        .student-card-3d-container::before {



            display: none;



        }

/* 宠物3D排列控制按钮 */



        .pet-3d-layout-toggle {



            position: fixed;



            top: 50%;



            right: 20px;



            transform: translateY(-50%);



            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);



            color: white;



            border: none;



            padding: 15px 10px;



            border-radius: 50px 0 0 50px;



            cursor: pointer;



            font-size: 12px;



            font-weight: bold;



            writing-mode: vertical-rl;



            text-orientation: mixed;



            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);



            transition: all 0.3s ease;



            z-index: 1000;



            font-family: 'ZCOOL QingKe HuangYou', cursive;



        }



        .pet-3d-layout-toggle:hover {



            padding-right: 15px;



            transform: translateY(-50%) translateX(-5px);



            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);



        }



        .pet-3d-layout-toggle.active {



            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);



            right: 0;



            padding: 15px;



            border-radius: 50px 0 0 50px;



        }

/* 宠物游戏界面 */



            .pet-game-container {



                padding: 20px;



            }



            .game-area {



                width: 80%;



                height: 60vh;



            }



        }



        @media (max-width: 768px) {

/* 宠物信息样式 */

/* 宠物信息样式 */

/* ======== 宠物PNG大图卡片样式 (banchong.cn风格) ======== */



            .pet-hero-container {



                width: 120px;



                height: 120px;



                margin: 0 auto;



                cursor: pointer;



                border-radius: 14px;



                overflow: hidden;



                margin-bottom: 8px;



                box-shadow: 0 3px 14px rgba(80,40,120,0.06), 0 1px 4px rgba(0,0,0,0.04);



                transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;



                position: relative;



                background: linear-gradient(160deg, #faf9fd 0%, #f3f1f8 50%, #eae6f0 100%);



            }



            .pet-hero-container:hover {



                transform: translateY(-3px) scale(1.02);



                box-shadow: 0 8px 28px rgba(0,0,0,0.15);



            }



            .pet-hero-image-wrapper {



                position: absolute;



                top: 0;



                left: 0;



                width: 100%;



                height: 100%;



                overflow: hidden;



                border-radius: 24px;



                display: flex;



                justify-content: center;



                align-items: center;



                background: radial-gradient(ellipse at center, #f5f3fa 0%, #e8e4f0 45%, #dad4e0 100%);



            }



            .pet-hero-png {



                max-width: 80%;



                max-height: 80%;



                object-fit: contain;



                transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);



                filter: drop-shadow(0 4px 10px rgba(80,40,120,0.15));



            }



            .pet-hero-container:hover .pet-hero-png {



                transform: scale(1.08);



                filter: drop-shadow(0 6px 16px rgba(80,40,120,0.22));



            }



            .pet-hero-fallback-emoji {



                position: absolute;



                top: 0;



                left: 0;



                width: 100%;



                height: 100%;



                display: flex;



                align-items: center;



                justify-content: center;



                font-size: 64px;



            }



            .pet-hero-gradient {



                position: absolute;



                bottom: 0;



                left: 0;



                right: 0;



                height: 38%;



                background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.08) 55%, transparent 100%);



                pointer-events: none;



                border-radius: 0 0 24px 24px;



            }



            .stage-badge-top-left {

                position: absolute;

                top: 6px;

                left: 6px;

                z-index: 3;

                padding: 2px 8px;

                border-radius: 6px;

                font-size: 11px;

                font-weight: bold;

                color: white;

                backdrop-filter: blur(4px);

                pointer-events: none;

                white-space: nowrap;

            }



            .pet-name-overlay {

                position: absolute;

                bottom: 6px;

                left: 6px;

                right: 6px;

                z-index: 3;

                font-size: 12px;

                font-weight: 700;

                color: #fff;

                text-shadow: 0 1px 3px rgba(0,0,0,0.7);

                pointer-events: none;

                white-space: nowrap;

                overflow: hidden;

                text-overflow: ellipsis;

            }



            .pet-hero-info-bar {



                position: absolute;



                bottom: 8px;



                left: 8px;



                right: 8px;



                display: flex;



                align-items: center;



                justify-content: space-between;



                z-index: 2;



                gap: 4px;



            }



            .pet-hero-name {



                color: #fff;



                font-size: 12px;



                font-weight: 700;



                text-shadow: 0 1px 3px rgba(0,0,0,0.7);



                max-width: 55%;



                overflow: hidden;



                text-overflow: ellipsis;



                white-space: nowrap;



                letter-spacing: 0.2px;



            }



            .pet-hero-level {



                color: #ffd700;



                font-size: 11px;



                font-weight: 700;



                background: rgba(0,0,0,0.50);



                padding: 2px 10px;



                border-radius: 20px;



                text-shadow: 0 1px 2px rgba(0,0,0,0.5);



                letter-spacing: 0.3px;



                white-space: nowrap;



            }



            .pet-hero-badge {



                position: absolute;



                top: 8px;



                right: 8px;



                z-index: 3;



                padding: 3px 10px;



                border-radius: 12px;



                font-size: 11px;



                font-weight: 700;



                color: #fff;



                text-shadow: 0 1px 2px rgba(0,0,0,0.3);



            }



            .pet-hero-badge.ultimate {



                background: linear-gradient(135deg, #ff6b35, #ffd700);



                animation: badgePulse 2s ease-in-out infinite;



            }



            .pet-hero-badge.advanced {



                background: linear-gradient(135deg, #667eea, #764ba2);



            }



            @keyframes badgePulse {



                0%, 100% { transform: scale(1); }



                50% { transform: scale(1.08); }



            }

/* 宠物领养中心 - 幼年期PNG图片样式 */



            .pet-adopt-image {



                object-fit: contain;



            }



            .pet-adopt-fallback {



                display: flex;



                align-items: center;



                justify-content: center;



                font-size: 64px;



            }



              .student-pet {



                  margin-top: 8px;



                  padding: 10px 4px 6px;



                  border-top: 1px solid #eee;



                  display: flex;



                  flex-direction: column;



                  justify-content: center;



                  align-items: center;



                  gap: 6px;



              }



            .pet-info {



                display: flex;



                flex-direction: column;



                align-items: center;



                justify-content: center;



                gap: 8px;



                cursor: pointer;



                padding: 10px;



                border-radius: 8px;



                transition: background-color 0.3s;



                width: 100%;



            }



            .pet-info:hover {



                background-color: #f0f0f0;



            }

/* 宠物基本信息样式 */



            .pet-basic-info {



                text-align: center;



                width: 100%;



                padding: 0 4px;



            }

/* 宠物展开/收起指示器样式 */



            .pet-toggle-indicator {



                font-size: 0.75em;



                color: #888;



                transition: transform 0.35s ease;



                margin: 3px auto 0;



                display: block;



                opacity: 0.7;



            }

/* 宠物详细信息容器样式 */



            .pet-details-container {



                margin-top: 6px;



                padding: 10px 8px;



                background: linear-gradient(135deg, #faf8ff, #f4f0fa);



                border-radius: 10px;



                border: 1px solid #e8e0f0;



                box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);



            }

/* 口粮购买下拉菜单样式 */



            .quick-buy-section {



                position: relative;



                margin-top: 10px;



            }



            .quick-buy-btn.quick {



                width: 100%;



                display: block;



            }



            .quick-buy-dropdown {



                position: absolute;



                top: 100%;



                left: 0;



                right: 0;



                background-color: white;



                border: 1px solid #eee;



                border-radius: 8px;



                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);



                z-index: 100;



            }



            .quick-buy-dropdown .quick-buy-btn {



                display: block;



                width: 100%;



                text-align: left;



                margin: 2px 0;



                padding: 8px 12px;



                border-radius: 4px;



            }



            .pet-icon {



                font-size: 55px;



                transition: transform 0.3s ease, font-size 0.3s ease;



                cursor: pointer;



                display: block;



                margin: 0 auto;



            }



            .pet-icon:hover {



                transform: scale(1.1);



            }



            .pet-icon.baby-pet-animation {



                font-size: 24px;



                animation: bounce 1s infinite;



            }



            .pet-icon.teen-pet-animation {



                font-size: 32px;



                animation: bounce 0.8s infinite;



            }



            .pet-icon.adult-pet-animation {



                font-size: 40px;



                animation: bounce 0.6s infinite;



            }



            .pet-icon.ultimate-pet-animation {



                font-size: 48px;



                animation: bounce 0.5s infinite;



                color: #ffd700;



                text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);



            }



            @keyframes bounce {



                0%, 20%, 50%, 80%, 100% {



                    transform: translateY(0);



                }



                40% {



                    transform: translateY(-5px);



                }



                60% {



                    transform: translateY(-3px);



                }



            }

/* 宠物3D效果 */



            .pet-icon-3d {



                position: relative;



                display: inline-block;



                perspective: 1000px;



                transition: transform 0.3s ease;



            }



            .pet-icon-3d:hover {



                transform: scale(1.3) rotateY(15deg) rotateX(10deg);



            }

/* 翅膀效果 */



            .pet-wings {



                position: absolute;



                top: 50%;



                width: 80px;



                height: 40px;



                background: linear-gradient(45deg, rgba(255,255,255,0.5), rgba(255,255,255,0.2));



                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;



                transform-origin: center center;



                opacity: 0.8;



                animation: wingFlap 1.5s infinite ease-in-out;



            }



            .pet-wings.left {



                left: -60px;



                transform: translateY(-50%) rotateY(0deg) rotateZ(20deg);



            }



            .pet-wings.right {



                right: -60px;



                transform: translateY(-50%) rotateY(180deg) rotateZ(20deg);



            }



            @keyframes wingFlap {



                0%, 100% { transform: translateY(-50%) rotateZ(20deg) scaleY(1); }



                50% { transform: translateY(-50%) rotateZ(-10deg) scaleY(1.2); }



            }

/* 不同宠物品种的翅膀颜色 */

/* 星云翅膀 - 垂耳兔 */



            .wings-nebula {



                background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);



                box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);



            }

/* 钻石翅膀 - 黄金仓鼠 */



            .wings-diamond {



                background: linear-gradient(45deg, #ffffff, #e0e0e0, #ffffff);



                box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);



            }

/* 天鹅翅膀 - 柯尔鸭 */



            .wings-swan {



                background: linear-gradient(45deg, #ffffff, #f0f0f0, #ffffff);



                box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);



            }

/* 彩虹翅膀 - 玄凤鹦鹉 */



            .wings-rainbow {



                background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);



                box-shadow: 0 0 20px rgba(255, 165, 0, 0.8);



            }

/* 天使翅膀 - 英短猫 */



            .wings-angel {



                background: linear-gradient(45deg, #ffffff, #f0f8ff, #ffffff);



                box-shadow: 0 0 15px rgba(240, 248, 255, 0.8);



            }

/* 蝙蝠翅膀 - 蜜袋鼯 */



            .wings-bat {



                background: linear-gradient(45deg, #333333, #555555, #333333);



                box-shadow: 0 0 15px rgba(51, 51, 51, 0.8);



            }

/* 水纹翅膀 - 金鱼 */



            .wings-water {



                background: linear-gradient(45deg, #00bfff, #87ceeb, #00bfff);



                box-shadow: 0 0 15px rgba(0, 191, 255, 0.8);



            }

/* 树叶翅膀 - 考拉 */



            .wings-leaf {



                background: linear-gradient(45deg, #00ff00, #98fb98, #00ff00);



                box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);



            }

/* 海浪翅膀 - 海豚 */



            .wings-wave {



                background: linear-gradient(45deg, #4682b4, #87ceeb, #4682b4);



                box-shadow: 0 0 15px rgba(70, 130, 180, 0.8);



            }

/* 冰晶翅膀 - 小刺猬 */



            .wings-ice {



                background: linear-gradient(45deg, #b0e0e6, #e0ffff, #b0e0e6);



                box-shadow: 0 0 15px rgba(176, 224, 230, 0.8);



            }

/* 枫叶翅膀 - 小松鼠 */



            .wings-maple {



                background: linear-gradient(45deg, #ff4500, #ff6347, #ff4500);



                box-shadow: 0 0 15px rgba(255, 69, 0, 0.8);



            }

/* 冰翼翅膀 - 小企鹅 */



            .wings-icewing {



                background: linear-gradient(45deg, #87cefa, #b0e0e6, #87cefa);



                box-shadow: 0 0 15px rgba(135, 206, 250, 0.8);



            }

/* 竹叶片翅膀 - 大熊猫 */



            .wings-bamboo {



                background: linear-gradient(45deg, #32cd32, #90ee90, #32cd32);



                box-shadow: 0 0 15px rgba(50, 205, 50, 0.8);



            }

/* 火焰翅膀 - 小熊崽 */



            .wings-flame {



                background: linear-gradient(45deg, #ff4500, #ff6347, #ff4500);



                box-shadow: 0 0 15px rgba(255, 69, 0, 0.9);



            }

/* 贝壳翅膀 - 小乌龟 */



            .wings-shell {



                background: linear-gradient(45deg, #ffdead, #f5deb3, #ffdead);



                box-shadow: 0 0 15px rgba(255, 222, 173, 0.8);



            }

/* 星光翅膀 - 独角兽 */



            .wings-starlight {



                background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);



                box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);



            }

/* 波浪翅膀 - 糊虎鲸 */



            .wings-sea {



                background: linear-gradient(45deg, #1e90ff, #87ceeb, #1e90ff);



                box-shadow: 0 0 15px rgba(30, 144, 255, 0.8);



            }

/* 不同宠物的特效动画 */



            @keyframes gentleFloat {



                0%, 100% { transform: translateY(0) rotateZ(0deg); }



                50% { transform: translateY(-15px) rotateZ(5deg); }



            }



            @keyframes quickTwirl {



                0%, 100% { transform: rotate(0deg) scale(1); }



                25% { transform: rotate(90deg) scale(1.1); }



                50% { transform: rotate(180deg) scale(1); }



                75% { transform: rotate(270deg) scale(1.1); }



            }



            @keyframes elegantSwim {



                0%, 100% { transform: translateX(0) translateY(0) rotateY(0deg); }



                50% { transform: translateX(10px) translateY(-5px) rotateY(10deg); }



            }



            @keyframes colorfulFlight {



                0%, 100% { transform: translate(0, 0) rotateZ(0deg); }



                25% { transform: translate(10px, -10px) rotateZ(15deg); }



                50% { transform: translate(0, -20px) rotateZ(0deg); }



                75% { transform: translate(-10px, -10px) rotateZ(-15deg); }



            }

/* 为宠物性格和细节添加渐入效果 */



            .pet-personality, .pet-details {



                animation: floatIn 1s ease-out forwards;



            }

/* 宠物名称样式 */



            .pet-name {



                font-size: 15px;



                font-weight: 700;



                color: #1a1a2e;



            }



            .pet-details {



                margin-bottom: 12px;



            }



            .student-name {



                font-size: 1.1em;



            }



        }



        @media (max-width: 480px) {

/* 100级宠物高贵效果关键帧动画 */



        @keyframes premiumAuraRotate {



            0% { 



                transform: translate(-50%, -50%) rotate(0deg); 



            }



            100% { 



                transform: translate(-50%, -50%) rotate(360deg); 



            }



        }

/* 移除所有宠物图标的动态阴影效果 */



        .pet-icon-3d::before {



            display: none !important;



        }

/* 全面禁用所有 pet-icon-3d 特效 */



        div.pet-icon-3d,



        div.pet-icon-3d:hover,



        div.pet-icon-3d:active,



        div.pet-icon-3d:focus,



        div.pet-icon-3d.clicked {

/* 优化学生卡片中宠物布局的样式 */



        .student-pet {



            margin-top: 8px;



            padding-top: 8px;



            border-top: 1px solid #eee;



            display: flex;



            justify-content: center;



            align-items: center;



        }



        .pet-info {



            display: flex;



            flex-direction: column;



            align-items: center;



            justify-content: center;



            gap: 8px;



            cursor: pointer;



            padding: 10px;



            border-radius: 8px;



            transition: background-color 0.3s;



            width: 100%;



        }



        .pet-info:hover {



            background-color: #f0f0f0;



        }

/* 宠物图标样式保持13.8版本一致 */

/* 宠物名称样式保持13.8版本一致 */

/* 宠物等级和经验样式保持13.8版本一致 */



        .pet-toggle-indicator {



            font-size: 0.8em !important;



            color: #666 !important;



            transition: transform 0.3s ease !important;



            margin-left: auto !important;



            display: flex !important;



            align-items: center !important;



            justify-content: center !important;



            width: 24px !important;



            height: 24px !important;



            border-radius: 50% !important;



            background-color: #f0f0f0 !important;



        }



        .pet-toggle-indicator:hover {



            background-color: #e0e0e0 !important;



        }



        .pet-details-container {



            margin-top: 8px !important;



            padding: 15px !important;



            background-color: white !important;



            border-radius: 10px !important;



            border: 1px solid #e0e0e0 !important;



            transition: all 0.3s ease !important;



            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;



        }



        .pet-details {



            display: flex !important;



            flex-direction: column !important;



            gap: 12px !important;



        }



        .pet-nickname-container {



            display: flex !important;



            align-items: center !important;



            gap: 10px !important;



            flex-wrap: wrap !important;



            padding: 8px 0 !important;



        }



        .pet-nickname-label {



            font-weight: bold !important;



            color: #555 !important;



            font-size: 0.95em !important;



        }



        .pet-nickname {



            background-color: #f0f8ff !important;



            padding: 6px 12px !important;



            border-radius: 15px !important;



            border: 1px dashed #b3d4fc !important;



            color: #3182ce !important;



            font-size: 0.95em !important;



            cursor: pointer !important;



            transition: all 0.3s ease !important;



        }



        .pet-nickname:hover {



            background-color: #e6f2ff !important;



            border-color: #63b3ed !important;



        }



        .pet-nickname-input {



            padding: 6px 12px !important;



            border: 1px solid #b3d4fc !important;



            border-radius: 15px !important;



            font-size: 0.95em !important;



            width: 150px !important;



            outline: none !important;



        }



        .pet-nickname-input:focus {



            border-color: #63b3ed !important;



            box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.2) !important;



        }



        .pet-nickname-changes {



            font-size: 0.8em !important;



            color: #888 !important;



            margin-left: auto !important;



        }



        .pet-growth {



            display: flex !important;



            flex-direction: column !important;



            gap: 6px !important;



            padding: 8px 0 !important;



        }



        .growth-progress-bar {



            height: 8px !important;



            background-color: #e0e0e0 !important;



            border-radius: 4px !important;



            overflow: hidden !important;



            width: 100% !important;



        }



        .growth-progress {



            height: 100% !important;



            background: linear-gradient(90deg, #4caf50 0%, #81c784 100%) !important;



            border-radius: 4px !important;



            transition: width 0.5s ease !important;



        }



        .growth-text {



            font-size: 0.85em !important;



            color: #666 !important;



            text-align: right !important;



        }



        .growth-status {



            padding: 6px 12px !important;



            border-radius: 15px !important;



            font-size: 0.85em !important;



            font-weight: bold !important;



            text-align: center !important;



            margin: 8px 0 !important;



        }



        .growth-status.normal {



            background-color: #e8f5e9 !important;



            color: #2e7d32 !important;



        }



        .growth-status.paused {



            background-color: #fff3e0 !important;



            color: #ef6c00 !important;



        }



        .growth-status.accelerated {



            background-color: #f3e5f5 !important;



            color: #7b1fa2 !important;



        }

/* 重新优化学生卡片中宠物布局的样式 */



        .student-pet {



            margin-top: 8px;



            padding-top: 8px;



            border-top: 1px solid #eee;



            display: flex;



            justify-content: center;



            align-items: center;



        }



        .pet-info {



            display: flex;



            flex-direction: column;



            align-items: center;



            justify-content: center;



            gap: 8px;



            cursor: pointer;



            padding: 10px;



            border-radius: 8px;



            transition: background-color 0.3s;



            width: 100%;



        }



        .pet-info:hover {



            background-color: #f0f0f0;



        }



        .pet-basic-info {



            text-align: center !important;



            width: 100% !important;



        }



        .pet-info .pet-name {



            font-size: 1.15em !important;



            font-weight: 700 !important;



            color: #2d2d2d !important;



            margin: 0 0 2px 0 !important;



            letter-spacing: 0.3px;



        }



        .pet-level {



            font-size: 0.85em !important;



            color: #777 !important;



            margin: 0 !important;



            font-weight: 500;



        }



        .pet-exp {



            font-size: 0.78em !important;



            color: #999 !important;



            margin: 1px 0 0 0;



        }



        .pet-toggle-indicator {



            font-size: 0.8em !important;



            color: #666 !important;



            transition: transform 0.3s ease !important;



            margin: 5px auto 0 !important;



            display: block !important;



        }



        .pet-details-container {



            margin-top: 5px !important;



            padding: 12px !important;



            background-color: #f9f9f9 !important;



            border-radius: 8px !important;



            border: 1px solid #eee !important;



            width: 100% !important;



        }



        .pet-details {



            display: flex !important;



            flex-direction: column !important;



            gap: 10px !important;



        }



        .pet-nickname-container {



            display: flex !important;



            align-items: center !important;



            gap: 8px !important;



            flex-wrap: wrap !important;



            justify-content: center !important;



        }



        .pet-nickname-label {



            font-weight: bold !important;



            color: #555 !important;



            font-size: 0.9em !important;



        }



        .pet-nickname {



            background-color: #fff !important;



            padding: 4px 10px !important;



            border-radius: 12px !important;



            border: 1px solid #ddd !important;



            color: #333 !important;



            font-size: 0.9em !important;



            cursor: pointer !important;



        }



        .pet-nickname-input {



            padding: 4px 10px !important;



            border: 1px solid #ddd !important;



            border-radius: 12px !important;



            font-size: 0.9em !important;



            width: 120px !important;



            outline: none !important;



        }



        .pet-nickname-changes {



            font-size: 0.8em !important;



            color: #888 !important;



            margin-left: 8px !important;



        }



        .pet-growth {



            display: flex !important;



            flex-direction: column !important;



            gap: 5px !important;



            margin: 8px 0 !important;



        }



        .growth-progress-bar {



            height: 6px !important;



            background-color: #e0e0e0 !important;



            border-radius: 3px !important;



            overflow: hidden !important;



            width: 100% !important;



        }



        .growth-progress {



            height: 100% !important;



            background-color: #4caf50 !important;



            border-radius: 3px !important;



        }



        .growth-text {



            font-size: 0.8em !important;



            color: #666 !important;



            text-align: center !important;



            margin: 0 !important;



        }



        .growth-status {



            padding: 4px 10px !important;



            border-radius: 12px !important;



            font-size: 0.8em !important;



            font-weight: bold !important;



            text-align: center !important;



            margin: 5px 0 !important;



        }



        .growth-status.normal {



            background-color: #e8f5e9 !important;



            color: #2e7d32 !important;



        }



        .growth-status.paused {



            background-color: #fff3e0 !important;



            color: #ef6c00 !important;



        }



        .growth-status.accelerated {



            background-color: #f3e5f5 !important;



            color: #7b1fa2 !important;



        }

/* v2 风格宠物进度条 */



        .student-pet .card-progress-bar {



            width: 100%;



            height: 8px;



            background: #F0F0F0;



            border-radius: 4px;



            overflow: hidden;



            margin: 6px 0;



        }



        .student-pet .card-progress-fill {



            height: 100%;



            border-radius: 3px;



            transition: width 0.3s ease;



        }

/* 稀有度分色 */



        .card-progress-fill.rarity-common { background: #B0BEC5; }



        .card-progress-fill.rarity-uncommon { background: #66BB6A; }



        .card-progress-fill.rarity-rare { background: #42A5F5; }



        .card-progress-fill.rarity-epic { background: #AB47BC; }



        .card-progress-fill.rarity-legendary { background: #FF8C00; }

/* 优化宠物小名样式 */



        .pet-nickname-small {



            font-size: 0.8em !important;



            color: #666 !important;



            cursor: pointer !important;



            margin-left: auto !important;



            margin-right: 10px !important;



        }


/* 宠物信息弹窗 - 阶段图标 */
#petInfoModal img.pet-stage-icon{max-width:260px;max-height:200px;width:auto;height:auto;display:block;margin:0 auto;object-fit:contain;}

/* ===================================
 * 宠物小屋 + 玩具系统样式
 * =================================== */
.pet-house-modal .pet-house-container {
    width: 960px;
    max-width: 95vw;
    height: 88vh;
    max-height: 90vh;
    background: #FDF6EC;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.pet-house-header {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, #E85D3A, #F08A5D);
    color: #fff;
    gap: 12px;
    flex-shrink: 0;
}
.pet-house-header-left { display:flex; align-items:center; gap:8px; flex:1; }
.ph-student-icon { font-size:22px; background:rgba(255,255,255,0.2); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.ph-student-name { font-size:16px; font-weight:700; }
.pet-house-header-right { display:flex; align-items:center; gap:6px; }
.ph-resource { font-size:14px; background:rgba(255,255,255,0.25); padding:4px 12px; border-radius:14px; font-weight:600; }
.pet-house-close { background:rgba(255,255,255,0.3); border:none; color:#fff; font-size:18px; width:32px; height:32px; border-radius:50%; cursor:pointer; transition:background 0.2s; display:flex; align-items:center; justify-content:center; }
.pet-house-close:hover { background:rgba(255,255,255,0.5); }

/* 三栏主体 */
.pet-house-body { display:flex; flex:1; overflow:hidden; }

/* ===== 左侧好友栏 ===== */
.ph-sidebar { width:180px; min-width:180px; background:#FFF8F0; border-right:1px solid #F0DFC8; display:flex; flex-direction:column; overflow:hidden; flex-shrink:0; }
.ph-sidebar-title { padding:12px 14px 8px; font-size:13px; font-weight:700; color:#8B6914; border-bottom:1px dashed #E8D5B0; }
.ph-friend-list { flex:1; overflow-y:auto; padding:4px 0; }
.ph-friend-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; transition:background 0.2s; border-bottom:1px solid #F5E8D5; }
.ph-friend-item:hover { background:#FFF0DF; }
.ph-friend-item.active { background:#FFE8D0; border-left:3px solid #E85D3A; padding-left:11px; }
.ph-friend-avatar { width:38px; height:38px; border-radius:50%; background:#FFE0CC; display:flex; align-items:center; justify-content:center; font-size:20px; border:2px solid #F5C8A0; flex-shrink:0; }
.ph-friend-info { flex:1; min-width:0; }
.ph-friend-info .name { font-size:13px; font-weight:700; color:#5D3A1A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-friend-info .pet { font-size:11px; color:#A0784C; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-friend-info .lv { font-size:10px; color:#C09060; }

/* ===== 中间场景区 ===== */
.ph-scene-wrapper { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; background:radial-gradient(ellipse at center,#F5E6D0 0%,#E8D5B8 60%,#D4C0A0 100%); overflow:hidden; }
.ph-scene { width:100%; flex:1; display:flex; align-items:center; justify-content:center; position:relative; }
.ph-scene .pet-house-scene-bg { width:100%; height:100%; object-fit:cover; border-radius:0; }
.pet-house-pet-img {
    position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%);
    max-width: 160px; max-height: 200px; z-index: 5;
    filter: drop-shadow(0 0 18px rgba(180, 150, 255, 0.4));
}
.ph-scene .pet-house-pet-img { position:absolute; bottom:22%; left:50%; transform:translateX(-50%); width:auto; height:auto; max-width:180px; max-height:220px; z-index:2; }
.pet-house-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(0,0,0,0.3); font-size:20px; z-index:0; }
.pet-house-empty p { margin:0; }

/* 引导气泡 */
.ph-guide-bubble { position:absolute; right:8%; top:25%; background:#fff; border-radius:16px; padding:14px 18px; font-size:13px; color:#5D3A1A; box-shadow:0 4px 16px rgba(0,0,0,0.12); max-width:220px; z-index:10; display:flex; align-items:center; gap:10px; animation:ph-bounce 2s ease-in-out infinite; }
.ph-guide-bubble::after { content:''; position:absolute; right:-8px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:8px solid #fff; }
.ph-guide-text { line-height:1.6; }
.ph-guide-arrow { font-size:20px; color:#E85D3A; flex-shrink:0; }
@keyframes ph-bounce { 0%,100% { transform:translateX(0); } 50% { transform:translateX(-6px); } }

/* 玩具槽位 */
.ph-toy-slots { display:flex; gap:14px; padding:10px 0; justify-content:center; }
.ph-toy-slots .pet-house-toy-slot { width:68px; height:68px; border-radius:14px; border:2px dashed #D4C0A0; background:rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; position:relative; }
.ph-toy-slots .pet-house-toy-slot:hover { background:rgba(255,255,255,0.55); border-color:#E85D3A; }
.ph-toy-slots .pet-house-toy-slot img { width:48px; height:48px; object-fit:contain; }
.ph-toy-slots .pet-house-toy-slot .toy-cooldown { position:absolute; bottom:2px; font-size:10px; color:#E85D3A; background:rgba(0,0,0,0.5); padding:1px 5px; border-radius:6px; }
.ph-toy-slots .pet-house-toy-slot .toy-name { font-size:9px; color:#5D3A1A; position:absolute; bottom:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60px; }

/* 底部进度条 */
.ph-pet-bar { display:flex; align-items:center; gap:10px; padding:8px 20px 12px; width:70%; max-width:500px; }
.ph-pet-bar-name { font-size:12px; font-weight:700; color:#5D3A1A; white-space:nowrap; }
.ph-pet-bar-track { flex:1; height:8px; background:rgba(255,255,255,0.5); border-radius:4px; overflow:hidden; }
.ph-pet-bar-fill { height:100%; background:linear-gradient(90deg,#E85D3A,#F08A5D); border-radius:4px; transition:width 0.5s; }
.ph-pet-bar-pct { font-size:11px; color:#A0784C; font-weight:600; min-width:32px; text-align:right; }

/* ===== 右侧操作面板 ===== */
.ph-right-panel { width:240px; min-width:240px; background:#FFF; border-left:1px solid #F0DFC8; display:flex; flex-direction:column; overflow:hidden; flex-shrink:0; }
.ph-right-title { padding:14px 16px 0; font-size:14px; font-weight:700; color:#5D3A1A; }
.ph-action-btns { display:flex; gap:8px; padding:10px 16px; }
.ph-btn-primary,.ph-btn-outline { flex:1; padding:8px 0; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; border:none; transition:all 0.2s; }
.ph-btn-primary { background:#E85D3A; color:#fff; }
.ph-btn-primary:hover { background:#D44A28; }
.ph-btn-primary.active { background:#E85D3A; box-shadow:0 2px 8px rgba(232,93,58,0.4); }
.ph-btn-outline { background:#FFF; color:#E85D3A; border:2px solid #E85D3A; }
.ph-btn-outline:hover { background:#FFF0EB; }
.ph-btn-outline.active { background:#FFF0EB; box-shadow:0 2px 8px rgba(232,93,58,0.25); }
.ph-panel { flex:1; overflow-y:auto; padding:0 16px 16px; }

/* 主题网格 */
.ph-section-title { font-size:12px; font-weight:700; color:#A0784C; margin:12px 0 8px; padding-bottom:4px; border-bottom:1px dashed #F0DFC8; }
.ph-theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ph-theme-item { cursor:pointer; border-radius:12px; overflow:hidden; border:3px solid transparent; transition:all 0.2s; position:relative; aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ph-theme-item:hover { transform:scale(1.05); border-color:#E85D3A; }
.ph-theme-item.owned { border-color:#FFD700; }
.ph-theme-item.active { border-color:#E85D3A; box-shadow:0 0 0 3px rgba(232,93,58,0.3); }
.ph-theme-item img { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; border-radius:9px; }
.ph-theme-item .ph-theme-label { position:relative; z-index:1; background:rgba(0,0,0,0.55); color:#fff; font-size:10px; padding:3px 8px; text-align:center; font-weight:600; border-radius:6px; }
.ph-tier-badge { position:absolute; bottom:4px; right:4px; z-index:2; font-size:9px; padding:2px 6px; border-radius:8px; color:white; font-weight:600; }
.ph-tier-badge.current { background:#E85D3A; }
.ph-tier-badge.owned { background:rgba(100,200,100,0.8); }
.ph-tier-badge.affordable { background:rgba(255,200,50,0.8); color:#333; }
.ph-tier-badge.locked { background:rgba(0,0,0,0.6); color:rgba(255,255,255,0.4); }

/* 背包网格 */
.ph-backpack-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ph-backpack-toy { cursor:pointer; border-radius:10px; border:2px solid #F0DFC8; background:#FFFAF2; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:all 0.2s; position:relative; padding:4px; }
.ph-backpack-toy:hover { border-color:#E85D3A; transform:scale(1.05); }
.ph-backpack-toy.placed { border-color:#FFD700; background:#FFFDE6; }
.ph-backpack-toy img { width:40px; height:40px; object-fit:contain; }
.ph-backpack-toy .ph-toy-name { font-size:10px; color:#5D3A1A; text-align:center; line-height:1.2; }
.ph-backpack-toy .ph-toy-count { position:absolute; top:2px; right:4px; font-size:10px; background:#E85D3A; color:#fff; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-weight:700; }

/* 玩具商店 */
.ph-shop-inner { padding-top:4px; }
.ph-shop-inner .toy-shop-item { display:flex; align-items:center; gap:10px; padding:10px; background:#FFFAF2; border-radius:12px; margin-bottom:8px; border:1px solid #F0DFC8; cursor:pointer; transition:all 0.2s; }
.ph-shop-inner .toy-shop-item:hover { border-color:#E85D3A; background:#FFF0EB; }
.ph-shop-inner .toy-shop-item img { width:48px; height:48px; object-fit:contain; border-radius:8px; flex-shrink:0; }
.ph-shop-inner .toy-shop-info { flex:1; min-width:0; }
.ph-shop-inner .toy-shop-info .name { font-size:13px; font-weight:700; color:#5D3A1A; }
.ph-shop-inner .toy-shop-info .desc { font-size:11px; color:#A0784C; margin:2px 0; }
.ph-shop-inner .toy-shop-info .effect { font-size:10px; color:#E85D3A; }
.ph-shop-inner .toy-shop-info .owned-tag { font-size:10px; color:#FFD700; }
.ph-shop-inner .toy-shop-buy { background:#E85D3A; color:#fff; border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.ph-shop-inner .toy-shop-buy:hover { background:#D44A28; }
.ph-shop-inner .toy-shop-buy:disabled { background:#CCC; cursor:not-allowed; }

/* 响应式 */
@media (max-width:900px) {
    .pet-house-container { max-height:95vh; }
    .ph-sidebar { width:140px; min-width:140px; }
    .ph-right-panel { width:200px; min-width:200px; }
    .ph-theme-grid { grid-template-columns:repeat(2,1fr); }
}

.pet-house-pet-emoji {
    position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%);
    font-size: 70px; z-index: 5;
    filter: drop-shadow(0 0 16px rgba(180, 150, 255, 0.5));
    animation: petFloatAnim 3s ease-in-out infinite;
}
@keyframes petFloatAnim {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-8px); }
}
/* ========== Purchase Confirm Modal (in-app modal version) ========== */
.ph-purchase-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.65);
    display: none; align-items: center; justify-content: center;
    z-index: 99999;
}
.ph-purchase-card {
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    border: 2px solid rgba(255,200,100,0.3);
    border-radius: 20px; padding: 30px 28px 24px;
    max-width: 360px; width: 90%; text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.ph-purchase-title { font-size: 19px; font-weight: 700; color: #ffc857; margin-bottom: 16px; }
.ph-purchase-img { width: 100%; aspect-ratio: 4/3; border-radius: 12px; object-fit: cover; border: 2px solid rgba(255,255,255,0.1); margin-bottom: 10px; }
.ph-purchase-name { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.ph-purchase-desc { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.ph-purchase-stats {
    display: flex; gap: 14px; justify-content: center;
    margin-bottom: 14px; font-size: 13px; color: #7ec8e3;
    background: rgba(126,200,227,0.08); padding: 10px 16px; border-radius: 10px;
}
.ph-purchase-cost-row {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 10px; font-size: 15px;
}
.ph-cost-label { color: rgba(255,255,255,0.45); }
.ph-cost-value { color: #ffc857; font-weight: 800; font-size: 20px; }
.ph-cost-balance { color: rgba(255,255,255,0.3); font-size: 12px; }
.ph-purchase-note { font-size: 12px; color: rgba(255,100,100,0.6); margin-bottom: 20px; }
.ph-purchase-btns { display: flex; gap: 12px; }
.ph-btn-cancel, .ph-btn-confirm {
    flex: 1; padding: 12px 0; border-radius: 10px;
    font-size: 15px; font-weight: 600; cursor: pointer; border: none;
}
.ph-btn-cancel { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }
.ph-btn-cancel:hover { background: rgba(255,255,255,0.15); }
.ph-btn-confirm { background: linear-gradient(135deg, #ffc857, #ff8c00); color: #1a1a2e; box-shadow: 0 4px 16px rgba(255,140,0,0.3); }
.ph-btn-confirm:hover { transform: scale(1.03); }