*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#0a0a0f;color:#fff;line-height:1.5;overflow-x:hidden}html,body{overscroll-behavior:none}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}::selection{background:#4fc3f74d;color:#fff}.game-container{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:2px solid #4fc3f7;outline-offset:2px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes glow{0%,to{box-shadow:0 0 5px currentColor}50%{box-shadow:0 0 20px currentColor}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.rarity-common{color:#9e9e9e}.rarity-uncommon{color:#4caf50}.rarity-rare{color:#2196f3}.rarity-epic{color:#9c27b0}.rarity-legendary{color:#ff9800}.element-fire{color:#ff6b35}.element-water{color:#4fc3f7}.element-earth{color:#8d6e63}.element-wind{color:#81c784}.element-light{color:#fff176}.element-dark{color:#7c4dff}.skeleton{background:linear-gradient(90deg,#ffffff0d 25%,#ffffff1a,#ffffff0d 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.app{width:100%;min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;background:#0a0a0f;padding:0}.game-container{width:100%;max-width:430px;height:100vh;height:100dvh;display:flex;flex-direction:column;background:linear-gradient(180deg,#1a1a2e,#16213e);position:relative;overflow:hidden;box-shadow:0 0 60px #000c}@media(min-width:431px){.app{padding:20px;background:linear-gradient(135deg,#0a0a0f,#1a1a2e)}.game-container{height:calc(100vh - 40px);max-height:900px;border-radius:12px;border:3px solid #2a2a3e}}.action-tabs{flex:1;display:flex;flex-direction:column;background:linear-gradient(180deg,#1a1a2e,#0f0f1a);min-height:50vh}.resources-bar{display:flex;justify-content:center;gap:6px;padding:8px;background:linear-gradient(180deg,#0006,#0003);overflow-x:auto}.resource{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;position:relative;overflow:hidden}.res-icon{width:20px;height:20px;object-fit:contain;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.resource:before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.resource.gold{background:linear-gradient(135deg,#ffc10740,#ff980026);color:#ffd54f}.resource.gems{background:linear-gradient(135deg,#e040fb40,#9c27b026);color:#ea80fc}.resource.enhance{background:linear-gradient(135deg,#03a9f440,#29b6f626);color:#81d4fa}.resource.divine{background:linear-gradient(135deg,#9c27b040,#ab47bc26);color:#ce93d8}.resource .add-btn{margin-left:2px;opacity:.7;transition:all .2s ease}.resource:hover .add-btn{opacity:1;transform:scale(1.2)}.tab-navigation{display:flex;justify-content:space-between;padding:6px 8px;background:linear-gradient(180deg,#141423f2,#0f0f19f2);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);position:relative}.tab-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;background:transparent;border:none;color:#666;cursor:pointer;transition:all .25s ease;flex:1;min-width:0;z-index:1}.tab-btn:hover{color:#999}.tab-btn.active{color:var(--tab-color, #4fc3f7)}.tab-icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:#ffffff0d;transition:all .3s ease}.tab-btn.active .tab-icon-wrapper{background:linear-gradient(135deg,color-mix(in srgb,var(--tab-color) 30%,transparent),color-mix(in srgb,var(--tab-color) 15%,transparent));box-shadow:0 4px 15px color-mix(in srgb,var(--tab-color) 40%,transparent);transform:translateY(-2px)}.tab-icon{display:flex;align-items:center;justify-content:center;transition:transform .3s ease}.tab-btn.active .tab-icon{transform:scale(1.15)}.tab-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;background:linear-gradient(135deg,#f44336,#c62828);color:#fff;font-size:9px;font-weight:700;border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #f4433680;animation:badge-pulse 2s infinite}@keyframes badge-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.tab-label{font-size:9px;font-weight:600;letter-spacing:.3px;white-space:nowrap;transition:color .3s ease}.tab-content{flex:1;overflow-y:auto;padding:12px;background:linear-gradient(180deg,#0000001a,#0003)}.tab-content::-webkit-scrollbar{width:4px}.tab-content::-webkit-scrollbar-track{background:#0000001a}.tab-content::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.tab-content::-webkit-scrollbar-thumb:hover{background:#ffffff40}.tab-section{margin-bottom:16px}.section-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:10px;display:flex;align-items:center;gap:8px}.section-title:before{content:"";width:3px;height:16px;background:linear-gradient(180deg,#4fc3f7,#29b6f6);border-radius:2px}.card{background:#ffffff0d;border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,.08)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.btn{padding:8px 16px;border-radius:8px;border:none;font-size:12px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:6px}.btn-primary{background:linear-gradient(135deg,#4fc3f7,#29b6f6);color:#fff;box-shadow:0 4px 15px #4fc3f74d}.btn-primary:hover{box-shadow:0 6px 20px #4fc3f780;transform:translateY(-2px)}.btn-primary:disabled{background:#555;box-shadow:none;transform:none;cursor:not-allowed}.btn-secondary{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.btn-secondary:hover{background:#ffffff26}.btn-sm{padding:6px 12px;font-size:11px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:#0003;border-radius:8px}.stat-label{font-size:11px;color:#888}.stat-value{font-size:13px;font-weight:600;color:#fff}.item-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.item-slot{aspect-ratio:1;background:#0000004d;border-radius:10px;border:2px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.item-slot:hover{border-color:#ffffff4d;transform:scale(1.05)}.item-slot.empty{border-style:dashed}.item-slot.common{border-color:#9e9e9e}.item-slot.uncommon{border-color:#4caf50}.item-slot.rare{border-color:#2196f3}.item-slot.epic{border-color:#9c27b0}.item-slot.legendary{border-color:#ff9800;box-shadow:0 0 15px #ff98004d}.item-icon{font-size:24px}.character-list{display:flex;flex-direction:column;gap:8px}.character-row{display:flex;align-items:center;gap:10px;padding:10px;background:#0003;border-radius:10px;border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:all .3s ease}.character-row:hover{background:#ffffff0d;border-color:#ffffff26}.character-row.selected{background:#4fc3f71a;border-color:#4fc3f7}.char-avatar-small{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px}.char-details{flex:1}.char-name-row{display:flex;align-items:center;gap:6px}.char-name-text{font-size:13px;font-weight:600;color:#fff}.char-level-badge{font-size:10px;padding:2px 6px;background:#ffffff1a;border-radius:4px;color:#888}.char-stats-row{display:flex;gap:8px;margin-top:4px}.mini-stat{font-size:10px;color:#666;display:flex;align-items:center;gap:3px}.rarity-badge{padding:3px 8px;border-radius:4px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.companions-tab{display:flex;flex-direction:column;gap:16px}.team-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.team-slot{background:#0000004d;border-radius:12px;border:2px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;position:relative;cursor:pointer;transition:all .3s ease;overflow:hidden}.team-slot.main{cursor:default}.team-slot.filled:hover{background:#ffffff0d}.team-slot.filled:hover .remove-btn{opacity:1}.team-slot.empty{border-style:dashed;background:#ffffff05}.slot-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.slot-info{text-align:center}.slot-name{display:block;font-size:9px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55px}.slot-level{font-size:8px;color:#888}.main-indicator{position:absolute;top:4px;right:4px;color:gold;font-size:10px;text-shadow:0 0 5px #ffd700}.remove-btn{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;border:none;background:#e74c3ce6;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.empty-icon{font-size:20px;color:#555}.empty-text{font-size:9px;color:#555}.team-power{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#0003;border-radius:10px;margin-top:8px}.team-power svg{color:gold}.power-label{font-size:12px;color:#888}.power-value{margin-left:auto;font-size:16px;font-weight:700;color:gold}.sort-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0003;border-radius:10px;color:#666}.sort-label{font-size:11px;color:#888}.sort-options{display:flex;gap:6px;flex:1}.sort-btn{padding:5px 10px;border:none;background:#ffffff0d;border-radius:6px;font-size:10px;color:#888;cursor:pointer;transition:all .3s ease}.sort-btn:hover{background:#ffffff1a;color:#ccc}.sort-btn.active{background:#4fc3f733;color:#4fc3f7}.companions-list{display:flex;flex-direction:column;gap:8px}.companion-card{display:flex;align-items:center;gap:12px;padding:12px;background:#00000040;border-radius:12px;border:2px solid transparent;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.companion-card:hover{background:#ffffff0d}.rarity-strip{position:absolute;left:0;top:0;bottom:0;width:4px}.companion-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;position:relative}.element-badge{position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid rgba(0,0,0,.5)}.companion-info{flex:1;min-width:0}.companion-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}.companion-name{font-size:14px;font-weight:600}.companion-stars{font-size:10px;color:gold;letter-spacing:-1px}.companion-meta{display:flex;gap:8px;margin-bottom:6px}.companion-level{font-size:11px;color:#4fc3f7;background:#4fc3f726;padding:2px 6px;border-radius:4px}.companion-class{font-size:11px;font-weight:500}.companion-power{font-size:10px;color:gold;margin-left:auto}.companion-stats{display:flex;gap:8px}.companion-stats .mini-stat{display:flex;align-items:center;gap:2px;font-size:10px;color:#888}.select-indicator{flex-shrink:0}.selected-check{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#4fc3f7,#29b6f6);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px #4fc3f766}.unselected-circle{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#666;font-size:14px}.unselected-circle.disabled{opacity:.3}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:#666;text-align:center}.empty-state-icon{font-size:48px;margin-bottom:12px;opacity:.5}.empty-state-text{font-size:14px}.helper-text{text-align:center;font-size:11px;color:#666;padding:8px;background:#00000026;border-radius:8px}.equipment-tab-v2{display:flex;flex-direction:column;gap:12px;height:100%;overflow-y:auto}.heroes-equipment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;flex:1;overflow-y:auto}.hero-equip-card{display:flex;flex-direction:column;gap:8px;padding:10px;background:linear-gradient(135deg,#1e1e28e6,#14141ecc);border-radius:12px;border:2px solid}.hero-equip-card.main{background:linear-gradient(135deg,#ffd7001a,#1e1e28e6)}.hero-info-row{display:flex;align-items:center;gap:8px}.hero-avatar-mini{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}.main-star{position:absolute;top:-3px;right:-3px;font-size:10px;color:gold;text-shadow:0 0 5px #ffd700}.hero-details{flex:1;display:flex;flex-direction:column}.hero-name{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px}.auto-equip-btn{display:flex;align-items:center;gap:3px;padding:5px 8px;background:linear-gradient(135deg,#9c27b0,#7b1fa2);border:none;border-radius:6px;color:#fff;font-size:9px;cursor:pointer;transition:all .2s ease}.auto-equip-btn:hover{background:linear-gradient(135deg,#ab47bc,#8e24aa);transform:translateY(-1px)}.equip-slots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.equip-slot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;background:#0006;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:all .2s ease;position:relative}.equip-slot:hover{background:#ffffff1a}.equip-slot.filled{background:#0009}.equip-slot.empty{border:2px dashed rgba(255,255,255,.2)}.slot-icon{width:24px;height:24px;object-fit:contain}.empty-icon{opacity:.3}.slot-name{font-size:8px;color:#888;white-space:nowrap}.enhance-badge{position:absolute;top:2px;right:2px;padding:1px 4px;background:linear-gradient(135deg,#4caf50,#388e3c);border-radius:4px;font-size:8px;font-weight:700;color:#fff}.fusion-container{display:flex;flex-direction:column;gap:16px;padding:10px}.fusion-info{text-align:center}.fusion-info h3{font-size:14px;color:#fff;margin-bottom:4px}.fusion-info p{font-size:11px;color:#888}.fusion-slots{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.fusion-slot,.fusion-result-slot{width:60px;height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#00000080;border:2px dashed rgba(255,255,255,.2);border-radius:10px;cursor:pointer;transition:all .2s ease;position:relative}.fusion-slot.filled,.fusion-result-slot.show{border-style:solid;background:#000000b3}.fusion-slot img,.fusion-result-slot img{width:28px;height:28px;object-fit:contain}.fusion-item-name{font-size:8px;color:#ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55px;text-align:center}.slot-placeholder{font-size:20px;color:#555}.remove-icon{position:absolute;top:2px;right:2px;color:#e74c3c}.fusion-arrow{font-size:24px;color:gold;text-shadow:0 0 10px rgba(255,215,0,.5)}.fusion-result-slot{border-color:gold}.fusion-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0}.fuse-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;background:#64646480;border:none;border-radius:10px;color:#888;font-size:14px;font-weight:600;cursor:not-allowed;transition:all .2s ease}.fuse-btn.ready{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;cursor:pointer;box-shadow:0 0 20px #ff980066}.fuse-btn.ready:hover{transform:translateY(-2px);box-shadow:0 0 30px #ff980099}.auto-fuse-btn{background:linear-gradient(135deg,#9c27b0,#7b1fa2);color:#fff;cursor:pointer;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 15px #9c27b04d}.auto-fuse-btn:hover{background:linear-gradient(135deg,#ab47bc,#8e24aa);box-shadow:0 0 20px #9c27b080;transform:translateY(-2px)}.fusion-inventory{margin-top:10px}.fusion-inventory h4{font-size:12px;color:#888;margin-bottom:10px}.fusion-items-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:200px;overflow-y:auto}.fusion-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:#0006;border:2px solid;border-radius:8px;cursor:pointer;transition:all .2s ease}.fusion-item:hover{transform:translateY(-2px)}.fusion-item.selected{background:#4fc3f733;box-shadow:0 0 15px #4fc3f780}.fusion-item img{width:28px;height:28px}.item-rarity{font-size:8px}.enhance-container{display:flex;flex-direction:column;gap:16px;padding:10px}.stone-count{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;background:#9c27b033;border:1px solid rgba(156,39,176,.5);border-radius:8px;margin:0 auto}.stone-count img{width:20px;height:20px}.stone-count span{font-size:13px;font-weight:600;color:#ce93d8}.enhance-preview{display:flex;flex-direction:column;align-items:center;gap:12px}.enhance-item-display{display:flex;align-items:center;gap:12px;padding:12px 20px;background:#00000080;border:2px solid;border-radius:12px}.enhance-item-display img{width:40px;height:40px}.enhance-item-info{display:flex;flex-direction:column}.enhance-item-info .item-name{font-size:14px;font-weight:700;color:#fff}.enhance-level{font-size:12px;color:#4caf50;font-weight:600}.enhance-stats{display:flex;flex-direction:column;gap:6px;padding:10px;background:#0006;border-radius:10px;width:100%;max-width:250px}.enhance-stat-row{display:flex;align-items:center;gap:8px;font-size:11px}.stat-name{color:#888;width:60px}.stat-value{color:#fff;font-weight:600;flex:1}.stat-bonus{color:#4caf50;font-weight:600}.enhance-cost{display:flex;align-items:center;gap:8px;font-size:13px;color:#888}.cost-value{display:flex;align-items:center;gap:4px;color:#ce93d8;font-weight:600}.cost-value img{width:16px;height:16px}.enhance-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 32px;background:#64646480;border:none;border-radius:10px;color:#888;font-size:14px;font-weight:600;cursor:not-allowed;transition:all .2s ease}.enhance-btn.ready{background:linear-gradient(135deg,#4caf50,#388e3c);color:#fff;cursor:pointer;box-shadow:0 0 20px #4caf5066}.enhance-btn.ready:hover{transform:translateY(-2px)}.back-btn{padding:8px 20px;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#888;font-size:12px;cursor:pointer;transition:all .2s ease}.back-btn:hover{background:#ffffff1a;color:#fff}.enhance-inventory h4{font-size:12px;color:#888;margin-bottom:10px}.enhance-scroll-container{max-height:380px;overflow-y:auto;padding-right:4px;display:flex;flex-direction:column;gap:16px}.enhance-group{display:flex;flex-direction:column;gap:8px}.enhance-group-header{display:flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.1)}.group-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;background:#333;border:1px solid #555;position:relative}.group-name{font-size:12px;font-weight:600;color:#ce93d8}.enhance-items-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.enhance-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;background:#0006;border:2px solid;border-radius:10px;cursor:pointer;transition:all .2s ease;position:relative}.enhance-item:hover{transform:translateY(-2px);background:#ffffff1a}.enhance-item img{width:32px;height:32px}.item-name-mini{font-size:9px;color:#888;text-align:center}.equip-modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.equip-modal{width:90%;max-width:350px;max-height:80vh;background:linear-gradient(135deg,#2a2a3a,#1a1a2a);border-radius:16px;border:1px solid rgba(255,255,255,.1);overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#0006;border-bottom:1px solid rgba(255,255,255,.1)}.modal-header h3{font-size:14px;color:#fff}.close-btn{background:none;border:none;color:#888;cursor:pointer;padding:4px}.close-btn:hover{color:#fff}.modal-items{padding:12px;max-height:400px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.no-items{text-align:center;color:#666;padding:30px;font-size:13px}.modal-item{display:flex;align-items:center;gap:10px;padding:10px;background:#0006;border:2px solid;border-radius:10px;cursor:pointer;transition:all .2s ease}.modal-item:hover{background:#ffffff1a;transform:translate(5px)}.modal-item img{width:36px;height:36px}.modal-item-info{flex:1}.modal-item-info .item-name{font-size:12px;font-weight:600;color:#fff}.item-stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.item-stats span{font-size:9px;color:#4caf50;background:#4caf5033;padding:2px 6px;border-radius:4px}.enhance-tag{padding:3px 8px;background:linear-gradient(135deg,#4caf50,#388e3c);border-radius:6px;font-size:10px;font-weight:700;color:#fff}@media(max-width:400px){.heroes-equipment-grid{grid-template-columns:1fr}.fusion-items-grid{grid-template-columns:repeat(4,1fr)}.enhance-items-grid{grid-template-columns:repeat(3,1fr)}}.gacha-tab{display:flex;flex-direction:column;gap:14px}.gacha-banners{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.banner-btn{display:flex;align-items:center;gap:10px;padding:12px;background:#0000004d;border-radius:12px;border:2px solid rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:all .3s ease}.banner-btn:hover{background:#ffffff0d}.banner-btn.active{background:linear-gradient(135deg,#4fc3f733,#29b6f61a);border-color:#4fc3f7}.banner-icon{width:40px;height:40px;border-radius:10px;background:#ffffff1a;display:flex;align-items:center;justify-content:center;color:#4fc3f7}.banner-info{display:flex;flex-direction:column;text-align:left}.banner-title{font-size:11px;font-weight:600}.banner-cost{font-size:10px;color:#888;display:flex;align-items:center;margin-top:4px}.banner-preview{background:#0000004d;border-radius:16px;overflow:hidden}.banner-image{position:relative}.banner-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px 20px;position:relative;overflow:hidden}.banner-visual.character-banner{background:linear-gradient(135deg,#1a237e,#311b92,#4a148c)}.banner-visual.equipment-banner{background:linear-gradient(135deg,#b71c1c,#880e4f,#4a148c)}.banner-emoji{font-size:40px;margin-bottom:8px;z-index:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}.banner-particles{position:absolute;inset:0;pointer-events:none}.particle{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff9;bottom:30%}.particle.equipment{background:#ffc864cc}.banner-headline{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:#fff;margin:0 0 4px;z-index:1;text-shadow:0 2px 10px rgba(0,0,0,.5)}.sparkle-icon,.star-icon{color:gold}.banner-desc{font-size:12px;color:#fffc;margin:0 0 12px;z-index:1}.featured-preview{display:flex;gap:12px;z-index:1}.featured-icon{font-size:10px;padding:4px 8px;background:#0000004d;border-radius:6px;color:gold}.pity-counter{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#00000080;font-size:11px;color:gold}.pity-bar{flex:1;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.pity-fill{height:100%;background:linear-gradient(90deg,gold,#ff9800);border-radius:3px}.pity-warning{font-size:10px;color:#ff5722;animation:blink .5s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.pull-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.pull-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px;border-radius:14px;border:none;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.pull-btn.single{background:linear-gradient(135deg,#4fc3f7,#29b6f6);color:#fff;box-shadow:0 6px 20px #4fc3f74d}.pull-btn.ten{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;box-shadow:0 6px 20px #ff98004d}.pull-btn.disabled{background:#555;box-shadow:none;cursor:not-allowed}.pull-label{font-size:13px;font-weight:600}.pull-cost{display:flex;align-items:center;gap:4px;font-size:11px;opacity:.9}.discount{position:absolute;top:6px;right:6px;font-size:9px;padding:2px 6px;background:#e74c3c;border-radius:4px;font-weight:600}.rate-info{background:#0000004d;border-radius:12px;padding:14px;overflow:hidden}.rate-title{font-size:12px;color:#888;margin-bottom:10px;text-align:center}.rates-grid{display:flex;flex-direction:column;gap:6px}.rate{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#0000004d;border-radius:8px;font-size:11px}.rate-stars{font-size:10px;letter-spacing:-1px}.rate-name{flex:1;color:#ccc}.rate-percent{font-weight:600}.rate.legendary{color:#ff9800}.rate.epic{color:#9c27b0}.rate.rare{color:#2196f3}.rate.uncommon{color:#4caf50}.rate.common{color:#9e9e9e}.rate-note{margin-top:10px;font-size:10px;color:#888;text-align:center;background:#ffd7001a;padding:8px;border-radius:6px}.pull-animation-overlay{position:fixed;inset:0;background:#000000e6;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.pull-animation{color:gold;margin-bottom:20px}.pull-text{font-size:18px;color:#fff;font-weight:600}.pull-particle{font-size:20px;pointer-events:none}.result-overlay{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.result-overlay.legendary{background:radial-gradient(circle at center,#ff98004d,#000000e6 70%)}.result-overlay.epic{background:radial-gradient(circle at center,#9c27b033,#000000e6 70%)}.result-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:20px;padding:20px;width:100%;max-width:360px;max-height:80vh;overflow-y:auto;position:relative}.result-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:#ffffff1a;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.result-close:hover{background:#fff3}.result-title{font-size:18px;font-weight:700;color:#fff;text-align:center;margin:0 0 20px}.result-items{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:20px}.result-item{display:flex;flex-direction:column;align-items:center;padding:10px 6px;background:#0000004d;border-radius:10px;border:2px solid;position:relative;overflow:hidden}.result-item.legendary{background:linear-gradient(135deg,#ff98004d,#ffc10733);animation:legendary-pulse 1.5s infinite}@keyframes legendary-pulse{0%,to{box-shadow:0 0 10px #ff980080}50%{box-shadow:0 0 25px #ff9800cc}}.result-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:4px;position:relative}.result-avatar.equipment{border-radius:8px}.result-element{position:absolute;bottom:-2px;right:-2px;font-size:10px;background:#00000080;border-radius:50%;width:14px;height:14px;display:flex;align-items:center;justify-content:center}.result-name{font-size:9px;color:#fff;text-align:center;font-weight:500;line-height:1.2}.result-rarity{font-size:8px;font-weight:600;margin-top:2px;letter-spacing:-1px}.legendary-glow{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,152,0,.3) 0%,transparent 70%);pointer-events:none}.result-confirm{width:100%;padding:14px;border-radius:12px;border:none;background:linear-gradient(135deg,#4fc3f7,#29b6f6);color:#fff;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px #4fc3f74d;transition:all .3s ease}.result-confirm:hover{box-shadow:0 8px 25px #4fc3f780}.hero-upgrade-tab{display:flex;flex-direction:column;gap:12px;height:100%;overflow-y:auto}.tab-mode-btn.active{background:linear-gradient(135deg,#ffd54f,#ff9800);color:#fff;box-shadow:0 0 15px #ff980066}.hero-select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:240px;overflow-y:auto;padding:4px}.hero-select-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;background:linear-gradient(135deg,#1e1e28e6,#14141ecc);border-radius:10px;border:2px solid;cursor:pointer;transition:all .2s ease;position:relative}.hero-select-card:hover{transform:translateY(-2px)}.hero-select-card.selected{background:#ffd54f26}.hero-select-card.main{background:linear-gradient(135deg,#ffd7001a,#1e1e28e6)}.hero-avatar-wrap{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}.hero-basic-info{display:flex;flex-direction:column;align-items:center;gap:1px}.hero-name{font-size:10px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px}.star-row{display:flex;gap:1px}.star-icon{font-size:8px;color:#555}.star-icon.filled{color:#ffd54f;text-shadow:0 0 5px rgba(255,213,79,.5)}.hero-level{font-size:9px;color:#4fc3f7}.frag-badge,.rank-badge{position:absolute;top:2px;right:2px;padding:2px 5px;background:#4caf50cc;border-radius:4px;font-size:8px;font-weight:600;color:#fff}.rank-badge{background:#9c27b0cc}.hero-detail-panel{background:linear-gradient(135deg,#1e1e32f2,#141428e6);border-radius:16px;border:1px solid rgba(255,213,79,.3);padding:16px;position:relative}.close-panel{position:absolute;top:10px;right:10px;background:none;border:none;color:#888;cursor:pointer;padding:4px}.close-panel:hover{color:#fff}.detail-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}.detail-avatar{width:64px;height:64px;border-radius:50%;border:3px solid;display:flex;align-items:center;justify-content:center}.detail-info{flex:1}.detail-info h3{font-size:16px;margin:0 0 4px}.star-display{display:flex;gap:2px;margin-bottom:4px}.star-display .star-icon{font-size:12px}.detail-meta{display:flex;gap:10px;font-size:11px;color:#aaa}.power-score{color:gold}.upgrade-section{margin-top:12px}.upgrade-section h4{font-size:13px;color:#fff;margin:0 0 10px}.upgrade-cost{display:flex;justify-content:space-between;padding:8px 12px;background:#0006;border-radius:8px;font-size:12px;margin-bottom:10px}.can-afford{color:#4caf50}.cant-afford{color:#e74c3c}.upgrade-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:#64646466;border:none;border-radius:10px;color:#888;font-size:14px;font-weight:600;cursor:not-allowed;transition:all .2s ease;margin-bottom:12px}.upgrade-btn.ready{background:linear-gradient(135deg,#ffd54f,#ff9800);color:#fff;cursor:pointer;box-shadow:0 0 20px #ff980066}.upgrade-btn.ready:hover{transform:translateY(-2px)}.upgrade-btn.breakthrough.ready{background:linear-gradient(135deg,#ce93d8,#9c27b0);box-shadow:0 0 20px #9c27b066}.upgrade-preview{padding:10px;background:#4caf501a;border:1px solid rgba(76,175,80,.3);border-radius:8px;margin-bottom:12px}.preview-label{font-size:11px;color:#4caf50;display:block;margin-bottom:6px}.upgrade-preview ul{margin:0;padding-left:16px;font-size:11px;color:#888}.upgrade-preview li{margin-bottom:3px}.skill-unlock{color:#ffd54f!important;font-weight:600}.max-reached{text-align:center;padding:20px;font-size:14px;color:#ffd54f}.innate-skills{margin-top:12px}.innate-skills h5{font-size:12px;color:#888;margin:0 0 8px}.skills-list{display:flex;flex-direction:column;gap:6px}.skill-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#0006;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.skill-item.unlocked{border-color:#4caf5080}.skill-item.locked{opacity:.5}.skill-item img{width:28px;height:28px;object-fit:contain}.skill-info{flex:1;display:flex;flex-direction:column}.skill-name{font-size:11px;font-weight:600;color:#fff}.skill-desc{font-size:9px;color:#888}.skill-star{font-size:10px;color:#ffd54f}.skill-star.locked{color:#555}.breakthrough-ranks{margin-top:12px}.breakthrough-ranks h5{font-size:12px;color:#888;margin:0 0 8px}.rank-list{display:flex;gap:6px}.rank-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 4px;background:#0006;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.rank-item.unlocked{border-color:#9c27b080;background:#9c27b033}.rank-number{font-size:14px;font-weight:700;color:#fff}.rank-item.locked .rank-number{color:#555}.rank-cost{font-size:8px;color:#888}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes rainbow{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}.hero-select-card[data-animation=pulse]{animation:pulse 1.5s ease-in-out infinite}.hero-select-card[data-animation=rainbow]{animation:rainbow 3s linear infinite}@media(max-width:400px){.hero-select-grid{grid-template-columns:repeat(2,1fr)}}.skills-tab{display:flex;flex-direction:column;gap:16px}.skill-char-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:8px}.skill-char-selector::-webkit-scrollbar{display:none}.skill-char-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 14px;border-radius:12px;border:2px solid transparent;color:#fff;cursor:pointer;transition:all .3s ease;min-width:70px}.skill-char-btn:hover{background:#ffffff1a}.skill-char-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.skill-char-name{font-size:10px;white-space:nowrap;color:#ccc}.skill-char-btn.active .skill-char-name{color:#fff}.skill-char-info{display:flex;align-items:center;gap:14px;padding:14px;background:#0000004d;border-radius:14px}.skill-char-avatar{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}.skill-char-details{flex:1}.skill-char-name-lg{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}.skill-char-meta{display:flex;gap:10px;font-size:12px}.skill-char-level{color:#888}.skills-list{display:flex;flex-direction:column;gap:10px}.skill-card{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#00000040;border-radius:12px;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;transition:all .3s ease;cursor:pointer}.skill-card.unlocked:hover{background:#ffffff0d;border-color:#ffffff26}.skill-card.locked{opacity:.6;cursor:default}.skill-icon-wrapper{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid transparent}.skill-icon-wrapper.active{background:linear-gradient(135deg,#4fc3f74d,#29b6f633);border-color:#4fc3f766}.skill-icon-wrapper.passive{background:linear-gradient(135deg,#9c27b04d,#8e24aa33);border-color:#9c27b066}.skill-icon{font-size:24px}.lock-icon{color:#666}.skill-info{flex:1;min-width:0}.skill-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.skill-name{font-size:14px;font-weight:600;color:#fff}.skill-type-badge{font-size:9px;padding:2px 6px;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.skill-type-badge.active{background:#4fc3f733;color:#4fc3f7}.skill-type-badge.passive{background:#9c27b033;color:#ba68c8}.skill-desc{font-size:11px;color:#888;margin:0 0 8px;line-height:1.4}.skill-meta{display:flex;gap:8px;flex-wrap:wrap}.skill-cooldown,.skill-damage,.skill-mana,.skill-unlock{font-size:10px;padding:3px 6px;border-radius:4px;background:#0000004d}.skill-cooldown{color:#ffd54f}.skill-damage{color:#ef5350}.skill-mana{color:#4fc3f7}.skill-unlock{color:#888}.skill-arrow{color:#666;flex-shrink:0;align-self:center}.locked-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.locked-overlay span{font-size:11px;color:#888;background:#0009;padding:6px 12px;border-radius:6px}.passive-info{padding:12px;background:linear-gradient(135deg,#9c27b026,#8e24aa1a);border-radius:10px;border:1px solid rgba(156,39,176,.2)}.passive-title{font-size:12px;color:#ba68c8}.skill-modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.skill-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:20px;width:100%;max-width:340px;overflow:hidden;position:relative}.skill-modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:none;background:#0006;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .3s ease}.skill-modal-close:hover{background:#fff3}.skill-modal-header{display:flex;align-items:center;gap:14px;padding:20px;border-bottom:2px solid}.skill-modal-icon{font-size:40px}.skill-modal-title{display:flex;flex-direction:column;gap:4px}.skill-modal-name{font-size:20px;font-weight:700;color:#fff}.skill-modal-body{padding:20px}.skill-modal-desc{font-size:14px;color:#ccc;margin:0 0 20px;line-height:1.5}.skill-modal-stats{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.skill-stat-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#0000004d;border-radius:8px}.stat-label{font-size:12px;color:#888}.stat-value{font-size:14px;font-weight:600;color:#fff}.stat-value.damage{color:#ef5350}.stat-value.mana{color:#4fc3f7}.skill-effects{background:#0003;border-radius:10px;padding:14px}.effects-title{font-size:12px;color:#888;margin-bottom:10px}.effect-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}.effect-item:last-child{border-bottom:none}.effect-type{font-size:12px;color:#ccc}.effect-value{font-size:12px;font-weight:600;color:#4fc3f7;margin-left:auto}.effect-duration{font-size:10px;color:#888}.stats-tab-compact{display:flex;flex-direction:column;gap:12px;height:100%;overflow-y:auto}.stats-header{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:linear-gradient(135deg,#ffd70026,#0006);border-radius:8px;border:1px solid rgba(255,215,0,.3)}.header-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#fff}.title-icon{font-size:12px}.header-power{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:gold}.tab-mode-selector{display:flex;gap:8px;padding:6px;background:#0006;border-radius:12px}.tab-mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;background:transparent;border:none;border-radius:8px;color:#888;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.tab-mode-btn:hover{color:#fff;background:#ffffff1a}.tab-mode-btn.active{background:linear-gradient(135deg,#4fc3f7,#29b6f6);color:#fff;box-shadow:0 0 15px #4fc3f766}.team-grid-compact{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;flex:1;overflow-y:auto}.char-card-compact{display:flex;flex-direction:column;gap:6px;padding:10px;background:linear-gradient(135deg,#1e1e28e6,#14141ecc);border-radius:12px;border:2px solid;position:relative}.char-card-compact.main{background:linear-gradient(135deg,#ffd70026,#1e1e28e6)}.card-top{display:flex;gap:8px;align-items:flex-start}.card-avatar-small{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}.main-badge{position:absolute;top:-4px;right:-4px;font-size:10px;color:gold;text-shadow:0 0 5px #ffd700}.card-info-compact{flex:1;min-width:0}.char-name-row{display:flex;align-items:center}.char-name{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}.char-level{font-size:10px;color:#4fc3f7;font-weight:600}.char-power{display:flex;align-items:center;gap:3px;font-size:10px;color:gold;margin-top:2px}.rarity-stars{font-size:8px;margin-top:1px}.hp-bar-mini{display:flex;flex-direction:column;gap:2px}.hp-label-mini{display:flex;align-items:center;gap:4px;font-size:9px;color:#aaa}.hp-label-mini svg{color:#e74c3c}.hp-track-mini{width:100%;height:4px;background:#00000080;border-radius:2px;overflow:hidden}.hp-fill-mini{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);border-radius:2px}.stats-row-compact{display:flex;gap:4px;flex-wrap:wrap}.stat-mini{display:flex;align-items:center;gap:2px;padding:3px 6px;background:#0006;border-radius:4px;font-size:9px;color:#ccc}.stat-mini svg{width:10px;height:10px;opacity:.7}.element-badge-mini{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;border:1px solid;display:flex;align-items:center;justify-content:center}.element-badge-mini img{width:12px;height:12px;object-fit:contain}.levelup-btn-compact{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px;background:linear-gradient(135deg,#4caf50,#388e3c);border:none;border-radius:8px;color:#fff;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease}.levelup-btn-compact:hover:not(.disabled){background:linear-gradient(135deg,#66bb6a,#43a047);transform:translateY(-1px)}.levelup-btn-compact.disabled{background:#64646480;cursor:not-allowed;opacity:.6}.levelup-btn-compact svg{width:12px;height:12px}.cost-badge{display:flex;align-items:center;gap:2px;margin-left:4px;padding:2px 6px;background:#0000004d;border-radius:4px;font-size:9px}.cost-badge img{width:10px;height:10px;object-fit:contain}.resources-bar-compact{display:flex;justify-content:center;gap:20px;padding:10px;background:#0006;border-radius:10px}.resource-item-compact{display:flex;align-items:center;gap:6px}.resource-item-compact img{width:18px;height:18px;object-fit:contain}.resource-item-compact span{font-size:13px;font-weight:700;color:gold}@media(max-width:400px){.team-grid-compact{grid-template-columns:1fr}.char-card-compact{padding:8px}.card-avatar-small{width:38px;height:38px}}.battle-area-v2{flex:1;position:relative;display:flex;flex-direction:column;overflow:hidden;min-height:45vh;background-size:cover;background-position:center}.battle-area-v2:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 80%,rgba(255,100,0,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 30%,rgba(100,0,255,.1) 0%,transparent 50%),linear-gradient(180deg,#0000004d,#0000001a,#0006);pointer-events:none;z-index:1}.battle-hud-compact{position:relative;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:8px 12px;background:linear-gradient(180deg,#000000b3,#0006);border-bottom:1px solid rgba(255,255,255,.1)}.hud-left{display:flex;justify-content:flex-start}.hud-center{text-align:center}.hud-right{display:flex;justify-content:flex-end;gap:6px}.stage-progress-bar{display:flex;gap:4px}.stage-node{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#888;background:#282828cc;border:2px solid #444;transition:all .3s ease}.stage-node.complete{background:linear-gradient(135deg,#4caf50,#2e7d32);border-color:#81c784;color:#fff}.stage-node.current{background:linear-gradient(135deg,gold,#ff8c00);border-color:#ffeb3b;color:#fff;box-shadow:0 0 12px #ffd70099;transform:scale(1.1);animation:pulse-glow 1.5s ease-in-out infinite}.stage-node.locked{opacity:.3;filter:grayscale(1)}@keyframes pulse-glow{0%,to{box-shadow:0 0 12px #ffd70099}50%{box-shadow:0 0 20px #ffd700e6}}.stage-title-compact{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 5px rgba(0,0,0,.8)}.stage-chapter-compact{font-size:9px;color:gold;text-shadow:0 1px 3px rgba(0,0,0,.8)}.ctrl-btn{display:flex;align-items:center;justify-content:center;gap:3px;padding:6px 10px;background:#00000080;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#aaa;font-size:10px;font-weight:600;cursor:pointer;transition:all .3s ease}.ctrl-btn:hover{background:#ffffff26;color:#fff}.ctrl-btn.active{background:linear-gradient(135deg,#4fc3f7,#29b6f6);border-color:#4fc3f7;color:#fff;box-shadow:0 0 10px #4fc3f766}.ctrl-btn.speed{min-width:50px}.battlefield-compact{flex:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px;position:relative;z-index:5}.team-formation-compact{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:6px}.team-card-v2{display:flex;flex-direction:column;align-items:center;padding:6px;background:linear-gradient(135deg,#1e1e28e6,#14141ecc);border-radius:10px;border:2px solid;position:relative;min-width:65px;will-change:transform;transition:box-shadow .3s ease}.team-card-v2:hover{box-shadow:0 0 15px #fff3}.team-card-v2.leader{background:linear-gradient(135deg,#ffd70033,#1e1e28e6)}.team-card-v2.dead{filter:grayscale(1) brightness(.5);opacity:.6}.card-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;background:#00000080;display:flex;align-items:center;justify-content:center;position:relative}.leader-star{position:absolute;top:-4px;right:-4px;font-size:10px;color:gold;text-shadow:0 0 5px #ffd700;z-index:5}.card-info{display:flex;flex-direction:column;align-items:center;margin-top:4px}.card-name{font-size:8px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px;text-align:center}.card-level{font-size:7px;color:#aaa}.card-hp{width:100%;height:3px;background:#0009;border-radius:2px;margin-top:3px;overflow:hidden}.card-hp-fill{height:100%;border-radius:2px;transition:width .3s ease}.card-skills{display:flex;gap:3px;margin-top:4px}.skill-icon-card{width:18px;height:18px;border-radius:4px;background:#0009;border:1px solid;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.skill-icon-card img{width:14px;height:14px;object-fit:contain;z-index:1}.skill-icon-card.cooldown{opacity:.6}.skill-icon-card.ready{border-color:inherit}.cooldown-sweep{position:absolute;inset:0;border-radius:3px;pointer-events:none;z-index:2}.skill-ready-pulse{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.4) 0%,transparent 70%);animation:skill-pulse 1s ease-in-out infinite;pointer-events:none}@keyframes skill-pulse{0%,to{opacity:.3}50%{opacity:.8}}.skill-effect-real{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:60;pointer-events:none}.effect-sprite-container{position:relative;display:flex;align-items:center;justify-content:center}.effect-sprite{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}.skill-effect-real.damage .effect-sprite{animation:effect-damage-shake .3s ease-out}.skill-effect-real.heal .effect-sprite{animation:effect-heal-float .5s ease-out}.skill-effect-real.buff .effect-sprite{animation:effect-buff-glow .4s ease-out}@keyframes effect-damage-shake{0%{transform:scale(.5) rotate(-10deg)}30%{transform:scale(1.3) rotate(15deg)}60%{transform:scale(1.1) rotate(-5deg)}to{transform:scale(1) rotate(0)}}@keyframes effect-heal-float{0%{transform:scale(.5) translateY(20px);opacity:.5}50%{transform:scale(1.2) translateY(-5px);opacity:1}to{transform:scale(1) translateY(0);opacity:1}}@keyframes effect-buff-glow{0%{transform:scale(.5);filter:brightness(1)}50%{transform:scale(1.3);filter:brightness(1.8)}to{transform:scale(1);filter:brightness(1.2)}}.effect-label{font-size:12px;font-weight:700;margin-top:4px;white-space:nowrap;letter-spacing:.5px}.effect-particles{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.particle{position:absolute;width:6px;height:6px;border-radius:50%;box-shadow:0 0 6px currentColor}.skill-effect-real[data-element=fire] .effect-sprite{filter:drop-shadow(0 0 12px #ff6b35) drop-shadow(0 0 20px #ff4500)}.skill-effect-real[data-element=water] .effect-sprite{filter:drop-shadow(0 0 12px #4fc3f7) drop-shadow(0 0 20px #00bcd4)}.skill-effect-real[data-element=ice] .effect-sprite{filter:drop-shadow(0 0 12px #00e5ff) drop-shadow(0 0 20px #80deea)}.skill-effect-real[data-element=thunder] .effect-sprite{filter:drop-shadow(0 0 12px #ffeb3b) drop-shadow(0 0 20px #ffc107)}.skill-effect-real[data-element=earth] .effect-sprite{filter:drop-shadow(0 0 12px #8d6e63) drop-shadow(0 0 20px #795548)}.skill-effect-real[data-element=wind] .effect-sprite{filter:drop-shadow(0 0 12px #81c784) drop-shadow(0 0 20px #4caf50)}.skill-effect-real[data-element=light] .effect-sprite{filter:drop-shadow(0 0 12px #fff176) drop-shadow(0 0 20px #ffd54f)}.skill-effect-real[data-element=dark] .effect-sprite{filter:drop-shadow(0 0 12px #7c4dff) drop-shadow(0 0 20px #651fff)}.skill-effect-real.heal .effect-sprite{filter:drop-shadow(0 0 15px #4cff4c) drop-shadow(0 0 25px #00e676)!important}.skill-effect-real.buff .effect-sprite{filter:drop-shadow(0 0 15px #ffd700) drop-shadow(0 0 25px #ffab00)!important}.battle-effects{position:absolute;inset:0;pointer-events:none;z-index:50}.attack-slash{position:absolute;top:40%;left:50%;width:100px;height:20px;background:linear-gradient(90deg,transparent,#fff,transparent);transform:translate(-50%,-50%) rotate(-30deg);opacity:.8;filter:blur(2px)}.skill-effect-popup{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-shadow:0 0 10px currentColor,0 2px 5px rgba(0,0,0,.8);z-index:60}.skill-effect-icon{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 8px currentColor)}.skill-effect-name{font-size:11px;font-weight:700;color:#fff;margin-top:2px;white-space:nowrap;text-shadow:0 0 5px currentColor}.skill-effect-popup.damage .skill-effect-icon{animation:skill-damage-burst .4s ease-out}.skill-effect-popup.heal .skill-effect-icon{animation:skill-heal-glow .5s ease-out}@keyframes skill-damage-burst{0%{transform:scale(.5) rotate(-15deg)}50%{transform:scale(1.4) rotate(10deg)}to{transform:scale(1) rotate(0)}}@keyframes skill-heal-glow{0%{transform:scale(.5);filter:brightness(1)}50%{transform:scale(1.3);filter:brightness(1.5)}to{transform:scale(1);filter:brightness(1)}}.dmg-num{position:absolute;transform:translate(-50%,-50%);font-size:24px;font-weight:900;color:#fff;text-shadow:0 0 8px rgba(0,0,0,.8),2px 2px 0 #000,-1px -1px 0 #000;white-space:nowrap;font-family:Outfit,sans-serif;will-change:transform,opacity;z-index:100}.dmg-num.crit{font-size:36px;color:#f44;text-shadow:0 0 15px rgba(255,68,68,.8),0 0 30px rgba(255,68,68,.4),2px 2px 0 #000}.dmg-num.heal{color:#4cff4c;text-shadow:0 0 12px rgba(76,255,76,.6),2px 2px 0 #000}.crit-label{display:block;font-size:12px;color:gold;text-shadow:0 0 8px rgba(255,215,0,.8);animation:crit-shake .3s ease-in-out}@keyframes crit-shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.enemy-formation-compact{display:flex;flex-direction:column;align-items:center;padding:8px;gap:8px}.main-enemy{position:relative;display:flex;flex-direction:column;align-items:center;will-change:transform}.boss-power-top{padding:4px 12px;background:linear-gradient(90deg,#ff0000b3,#ff6400b3);border-radius:12px;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);border:1px solid rgba(255,100,0,.5);margin-bottom:6px;animation:boss-pulse 1.5s ease-in-out infinite}@keyframes boss-pulse{0%,to{box-shadow:0 0 10px #ff640080}50%{box-shadow:0 0 20px #ff6400cc}}.enemy-sprite{position:relative;display:flex;align-items:center;justify-content:center}.enemy-sprite img{image-rendering:pixelated;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}.boss-aura{position:absolute;inset:-10px;border:2px solid;border-radius:50%;animation:boss-aura-pulse 2s ease-in-out infinite;pointer-events:none}@keyframes boss-aura-pulse{0%,to{transform:scale(1);opacity:.4}50%{transform:scale(1.1);opacity:.7}}.enemy-hp-container-compact{width:160px;margin-top:8px}.enemy-info-bar-compact{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px}.element-icon{width:14px;height:14px;object-fit:contain}.enemy-name{font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}.enemy-level{font-size:9px;color:#aaa}.enemy-hp-bar-compact{width:100%;height:10px;background:#000000b3;border-radius:5px;overflow:hidden;border:1px solid rgba(255,255,255,.15);position:relative}.enemy-hp-fill{height:100%;border-radius:4px;transition:width .3s ease;box-shadow:inset 0 1px 3px #fff3}.hp-text-compact{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:7px;font-weight:600;color:#fff;text-shadow:0 0 3px #000;white-space:nowrap}.other-enemies-compact{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:160px}.mini-enemy{display:flex;flex-direction:column;align-items:center;will-change:transform}.mini-enemy.dead{filter:grayscale(1) brightness(.5);opacity:.5}.mini-enemy img{image-rendering:pixelated;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.mini-hp{width:36px;height:3px;background:#0009;border-radius:2px;margin-top:3px;overflow:hidden}.mini-hp-fill{height:100%;background:linear-gradient(90deg,#e74c3c,#c0392b);border-radius:2px;transition:width .3s ease}.battle-stats-compact{display:flex;justify-content:center;gap:24px;padding:8px 12px;background:linear-gradient(0deg,#000000b3,#0006);border-top:1px solid rgba(255,255,255,.1);z-index:10}.stat-item{display:flex;flex-direction:column;align-items:center}.stat-label{font-size:8px;color:#888;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:12px;font-weight:700;color:#fff}.stat-item.highlight .stat-value{color:gold;text-shadow:0 0 8px rgba(255,215,0,.5)}.battle-start-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:200}.battle-start-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 32px;background:linear-gradient(135deg,#4fc3f7,#0288d1);border:none;border-radius:14px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 8px 30px #4fc3f780;transition:all .3s ease}.battle-start-btn:hover{box-shadow:0 12px 40px #4fc3f7b3}.play-icon{font-size:24px}.stage-clear-effect{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:250}.clear-content{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 40px;background:linear-gradient(135deg,#ffd7004d,#ff8c0033);border:2px solid #ffd700;border-radius:16px;box-shadow:0 0 40px #ffd70080,inset 0 0 20px #ffd7001a}.clear-content .clear-icon{font-size:40px}.clear-content .clear-text{font-size:24px;font-weight:900;color:gold;text-shadow:0 0 15px rgba(255,215,0,.8);letter-spacing:2px}.clear-content .clear-rewards{font-size:14px;color:#fff;background:#0006;padding:6px 16px;border-radius:8px}@media(max-width:500px){.stage-node{width:24px;height:24px;font-size:9px}.stage-title-compact{font-size:11px}.team-card-v2{min-width:55px;padding:5px}.card-avatar{width:30px;height:30px}.enemy-hp-container-compact{width:120px}.enemy-sprite img{max-width:100px!important;max-height:100px!important}.dmg-num{font-size:20px}.dmg-num.crit{font-size:28px}}.team-card-v2,.mini-enemy,.main-enemy,.dmg-num,.skill-effect-popup{transform:translateZ(0);backface-visibility:hidden}@media(prefers-reduced-motion:reduce){.boss-aura,.stage-node.current,.skill-ready-pulse{animation:none}}.drop-notifications{position:absolute;bottom:80px;left:20px;display:flex;flex-direction:column-reverse;gap:8px;z-index:100;pointer-events:none}.drop-notification{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#000000d9;border:1px solid rgba(255,255,255,.1);border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 4px 12px #00000080;min-width:180px;max-width:250px}.drop-notification.equipment{border-color:#ff9800}.drop-notification.gems{border-color:#e91e63}.drop-notification.gold{border-color:gold}.drop-notification.fragments{border-color:#4caf50;box-shadow:0 0 15px #4caf5033}.drop-notification.divineStones{border-color:#ce93d8;box-shadow:0 0 15px #9c27b04d}.drop-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#ffffff1a;font-size:18px}.drop-icon img{width:24px;height:24px;object-fit:contain}.drop-icon.highlight{background:#ffd70033}.drop-icon.divine{background:linear-gradient(135deg,#9c27b04d,#673ab733)}.drop-info{flex:1;display:flex;flex-direction:column}.drop-name{font-size:13px;font-weight:700;color:#fff}.drop-name.legendary{color:gold}.drop-name.epic{color:#e040fb}.drop-name.rare{color:#448aff}.drop-name.uncommon{color:#69f0ae}.drop-name.common{color:#b0bec5}.drop-type,.drop-sub{font-size:10px;color:#aaa}.drop-sub{color:#4caf50;font-style:italic}