@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap";.collection-fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#111;background-image:radial-gradient(circle at 20% 30%,rgba(0,123,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(0,123,255,.08) 0%,transparent 50%);display:flex;flex-direction:column;z-index:10000;overflow:hidden;visibility:visible;opacity:1}.collection-header{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;border-bottom:2px solid #007bff;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-shrink:0}.collection-header h2{color:#007bff;margin:0}.header-right{display:flex;align-items:center;gap:15px}.header-controls{display:flex;align-items:center;gap:20px}.header-right .victory-points,.header-controls .victory-points{display:flex;align-items:center;gap:8px}.header-right .trophy-icon,.header-controls .trophy-icon{font-size:1.2rem}.header-right .points-text,.header-controls .points-text{color:#fff;font-size:1rem;font-weight:600}.filter-controls{display:flex;align-items:center;gap:10px}.control-group{display:flex;align-items:center;gap:6px}.filter-controls label{color:#fff;font-weight:700;font-size:14px}.sort-dropdown,.filter-dropdown{background:rgba(0,123,255,.3);border:2px solid #007bff;border-radius:6px;color:#fff;padding:8px 12px;font-size:14px;cursor:pointer;transition:all .3s ease;font-weight:500}.search-input{background:rgba(0,123,255,.3);border:2px solid #007bff;border-radius:6px;color:#fff;padding:8px 12px;font-size:14px;transition:all .3s ease;font-weight:500;min-width:150px}.search-input::placeholder{color:#ffffff80}.sort-dropdown:hover,.filter-dropdown:hover,.search-input:hover{background:rgba(0,123,255,.4);box-shadow:0 0 10px #007bff80}.sort-dropdown:focus,.filter-dropdown:focus,.search-input:focus{outline:none;box-shadow:0 0 15px #007bffb3}.sort-dropdown option,.filter-dropdown option{background:#222;color:#fff;padding:5px}.close-btn{background:none;border:3px solid #007bff;color:#007bff;font-size:2rem;width:60px;height:60px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 0 10px #007bff80}.close-btn:hover{background:#007bff;color:#fff;transform:scale(1.1);box-shadow:0 0 20px #007bffcc}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:#007bff}.loading-spinner{width:50px;height:50px;border:3px solid rgba(0,123,255,.3);border-top:3px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.collection-content{display:flex;flex-direction:column;flex:1;overflow:hidden}.collection-grid-container{position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center;padding-top:30px;overflow-y:auto;overflow-x:hidden}.collection-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(2,1fr);gap:12px;padding:0 20px;justify-content:center;max-width:1200px;width:100%;opacity:1;transition:opacity .2s ease-in-out}.collection-grid.transitioning{opacity:0}.collection-grid-container .pagination-arrow-overlay{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,123,255,.2)!important;border:2px solid #007bff!important;color:#007bff!important;font-size:1.5rem;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:none!important;font-weight:700;z-index:20;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.collection-grid-container .pagination-arrow-overlay:hover{background:#007bff!important;color:#fff!important;transform:translateY(-50%) scale(1.1);box-shadow:none!important}.collection-grid-container .pagination-arrow-overlay:active{transform:translateY(-50%) scale(1.05)}.collection-grid-container .pagination-arrow-overlay.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.collection-grid-container .left-arrow{left:45px!important}.collection-grid-container .right-arrow{right:45px!important}.page-indicator-overlay{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:rgba(0,0,0,.8);border:1px solid #007bff;border-radius:15px;padding:4px 12px;color:#007bff;font-size:.9rem;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5);box-shadow:0 0 8px #007bff80;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:20}.filter-controls{display:flex;gap:20px;align-items:center}.control-group{display:flex;align-items:center;gap:8px}.filter-dropdown{background:rgba(0,123,255,.3);border:2px solid #007bff;border-radius:6px;color:#fff;padding:8px 12px;font-size:14px;cursor:pointer;transition:all .3s ease;font-weight:500}.hero-card.disabled-hero{opacity:.6;position:relative}.hero-card.disabled-hero:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,0,0,.1) 10px,rgba(255,0,0,.1) 20px);pointer-events:none;border-radius:12px}.disabled-badge{display:block;font-size:.7rem;color:#ff4757;font-weight:700;margin-top:2px;text-transform:uppercase;letter-spacing:.5px}.hero-card.selectable.collection-card{border:3px solid #007bff;margin:0;opacity:1;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;will-change:transform}.hero-card.selectable.collection-card:hover{border-color:#0056b3;will-change:transform;transform:translateZ(0) scale(1.08);z-index:5}.selection-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50;animation:fadeIn .3s ease-out}.hero-card.collection-card.enlarged{position:fixed;top:50%;left:40%;transform:translate(-50%,-50%) scale(1.8);z-index:100;box-shadow:0 0 50px #007bff;border-color:#4da6ff;animation:enlargeCard .3s ease-out;height:auto;min-height:clamp(240px,18.5vw,360px);max-height:80vh}@keyframes enlargeCard{0%{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.8)}}.hero-card.collection-card.enlarged:hover{transform:translate(-50%,-50%) scale(1.8)!important;z-index:100!important;box-shadow:0 0 50px #007bff!important;border-color:#4da6ff!important}.hero-card.collection-card.enlarged .hero-image:hover{transform:none!important}.hero-details-panel{position:fixed;top:50%;right:20%;transform:translateY(-50%);width:400px;max-height:80vh;background:linear-gradient(135deg,rgba(25,35,55,.95) 0%,rgba(15,25,45,.95) 100%);border:3px solid #007bff;border-radius:15px;padding:25px;z-index:100;box-shadow:0 0 30px #007bffcc;overflow-y:auto;animation:slideInRight .3s ease-out}.hero-details-panel::-webkit-scrollbar{width:8px}.hero-details-panel::-webkit-scrollbar-track{background:rgba(0,0,0,.3);border-radius:4px}.hero-details-panel::-webkit-scrollbar-thumb{background:#007bff;border-radius:4px}.hero-details-panel::-webkit-scrollbar-thumb:hover{background:#0056b3}@keyframes slideInRight{0%{opacity:0;transform:translateY(-50%) translate(100px)}to{opacity:1;transform:translateY(-50%) translate(0)}}.hero-details-panel h3{color:#007bff;font-size:1.8rem;margin:0 0 20px;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.ability-section,.special-section{margin-bottom:20px}.ability-section h4,.special-section h4{color:gold;font-size:1.3rem;margin:0 0 10px;border-bottom:2px solid rgba(255,215,0,.3);padding-bottom:5px}.ability-item,.special-item{background:rgba(0,123,255,.1);border:1px solid rgba(0,123,255,.3);border-radius:8px;padding:15px;margin-bottom:10px}.ability-name,.special-name{color:#4da6ff;font-weight:700;font-size:1.1rem;margin-bottom:8px}.ability-description,.special-description{color:#ffffffe6;line-height:1.5;font-size:.95rem}@media (max-width: 1600px){.collection-grid{max-width:95%}.collection-grid .hero-card{max-height:330px}}@media (max-width: 1400px){.collection-grid{max-width:98%;gap:10px}.collection-grid .hero-card{max-height:310px}}@media (max-width: 1200px){.collection-grid{gap:10px;padding:0 15px}.collection-grid .hero-card{max-height:280px}.hero-details-panel{width:350px;right:5%}.collection-grid-container .pagination-arrow-overlay{width:35px;height:35px;font-size:1.3rem}.collection-grid-container .left-arrow{left:43px!important}.collection-grid-container .right-arrow{right:43px!important}}@media (max-width: 768px){.collection-header{padding:15px 20px}.collection-grid{gap:8px;padding:0 10px}.collection-grid .hero-card{max-height:240px}.hero-card.collection-card.enlarged{left:50%;transform:translate(-50%,-50%) scale(1.5)}.hero-details-panel{position:fixed;top:auto;bottom:10%;right:5%;left:5%;width:auto;max-height:40vh;transform:none}.collection-grid-container .pagination-arrow-overlay{width:30px;height:30px;font-size:1.1rem}.collection-grid-container .left-arrow{left:40px!important}.collection-grid-container .right-arrow{right:40px!important}.page-indicator-overlay{bottom:8px;font-size:.8rem;padding:3px 8px}@keyframes slideInRight{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}}@media (max-width: 480px){.collection-header h2{font-size:1.5rem}.collection-grid{padding:15px;gap:10px}.collection-grid .hero-card{max-height:220px}.hero-card.collection-card.enlarged{transform:translate(-50%,-50%) scale(1.3)}.hero-details-panel{bottom:5%;max-height:35vh;padding:15px}.hero-details-panel h3{font-size:1.4rem}.collection-grid-container .pagination-arrow-overlay{width:45px;height:45px;font-size:1.8rem}.collection-grid-container .left-arrow{left:43px!important}.collection-grid-container .right-arrow{right:43px!important}.page-indicator-overlay{bottom:10px;font-size:.8rem;padding:5px 10px}}.favorite-star{position:absolute;top:8px;left:8px;font-size:24px;z-index:10;filter:drop-shadow(0 0 3px rgba(255,215,0,.8));pointer-events:none}.favorite-button-container{margin-top:15px;padding-top:15px;border-top:1px solid rgba(0,123,255,.3);display:flex;justify-content:center}.favorite-button{padding:10px 20px;background:rgba(0,123,255,.2);border:2px solid #007bff;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;transition:all .3s ease;display:flex;align-items:center;gap:8px}.favorite-button:hover{background:rgba(0,123,255,.4);transform:translateY(-2px);box-shadow:0 4px 12px #007bff66}.favorite-button.favorited{background:rgba(255,215,0,.2);border-color:gold;color:gold}.favorite-button.favorited:hover{background:rgba(255,215,0,.3);box-shadow:0 4px 12px #ffd70066}:root{--primary-blue: #00d4ff;--accent-gold: #ffd700;--text-secondary: rgba(255, 255, 255, .7)}.xp-bar-container{display:flex;flex-direction:column;gap:8px;width:100%;min-width:150px}.xp-bar{position:relative;background:linear-gradient(90deg,#1a1a2e 0%,#16213e 100%);border:2px solid var(--primary-blue);border-radius:20px;height:24px;width:100%;overflow:hidden;box-shadow:inset 0 2px 4px #0000004d,0 0 10px #00d4ff33}.xp-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#0ea5e9 0%,var(--primary-blue) 50%,#0ea5e9 100%);transition:width 1s cubic-bezier(.4,0,.2,1);border-radius:inherit;overflow:hidden}.xp-fill.animating{animation:xpGlow 1s ease-out}@keyframes xpGlow{0%{box-shadow:0 0 10px #00d4ff4d}50%{box-shadow:0 0 20px #00d4ffcc}to{box-shadow:0 0 10px #00d4ff4d}}.xp-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shine 2s ease-in-out infinite}@keyframes shine{0%{left:-100%}50%{left:100%}to{left:100%}}.xp-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:4px;font-family:Orbitron,monospace;font-size:.8rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);z-index:2}.xp-current{color:var(--accent-gold)}.xp-separator,.xp-max{color:var(--text-secondary)}.xp-label{color:var(--primary-blue);margin-left:4px}.next-level-info{display:flex;justify-content:center;font-size:.75rem;color:var(--text-secondary);font-family:Orbitron,monospace}.max-level-info{display:flex;justify-content:center;font-size:.75rem;color:var(--accent-gold);font-family:Orbitron,monospace;font-weight:700;text-shadow:0 0 5px rgba(255,215,0,.5)}.xp-gain-popup{position:absolute;top:-30px;right:10px;background:linear-gradient(135deg,var(--accent-gold) 0%,#f59e0b 100%);color:#fff;padding:4px 12px;border-radius:12px;font-family:Orbitron,monospace;font-size:.8rem;font-weight:700;box-shadow:0 4px 12px #ffd70066;opacity:0;transform:translateY(10px) scale(.8);transition:all .3s ease;z-index:10;pointer-events:none}.xp-gain-popup.show{opacity:1;transform:translateY(0) scale(1);animation:xpPopup 2s ease-out forwards}@keyframes xpPopup{0%{opacity:1;transform:translateY(0) scale(1)}20%{transform:translateY(-5px) scale(1.1)}80%{opacity:1;transform:translateY(-10px) scale(1)}to{opacity:0;transform:translateY(-20px) scale(.9)}}.xp-bar.level-up{animation:levelUpGlow 2s ease-out}@keyframes levelUpGlow{0%{box-shadow:inset 0 2px 4px #0000004d,0 0 10px #00d4ff33}25%{box-shadow:inset 0 2px 4px #0000004d,0 0 30px #ffd700cc,0 0 60px #ffd70066}50%{box-shadow:inset 0 2px 4px #0000004d,0 0 20px #00d4ff99,0 0 40px #ffd70099}to{box-shadow:inset 0 2px 4px #0000004d,0 0 10px #00d4ff33}}.xp-bar-container.compact{gap:4px}.xp-bar-container.compact .xp-bar{height:18px}.xp-bar-container.compact .xp-text{font-size:.7rem;gap:2px}.xp-bar-container.compact .next-level-info,.xp-bar-container.compact .max-level-info{font-size:.65rem}@media (max-width: 768px){.xp-bar{height:20px}.xp-text{font-size:.7rem}.next-level-info,.max-level-info{font-size:.65rem}}.profile-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out}.profile-modal{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f172a 100%);border:2px solid var(--primary-blue);border-radius:20px;width:90%;max-width:800px;height:auto;box-shadow:0 0 50px #00d4ff4d,inset 0 0 50px #00d4ff1a;animation:slideIn .4s ease-out;position:relative}@keyframes slideIn{0%{transform:scale(.9) translateY(-50px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.profile-header{padding:20px 30px;border-bottom:1px solid rgba(0,212,255,.3);display:flex;align-items:center;justify-content:center;position:relative}.profile-header h2{color:var(--primary-blue);font-family:Orbitron,monospace;font-size:1.8rem;margin:0;text-shadow:0 0 10px rgba(0,212,255,.5)}.profile-close-btn{background:transparent;border:2px solid var(--accent-red);color:var(--accent-red);width:40px;height:40px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;position:absolute;right:30px;top:50%;transform:translateY(-50%)}.profile-close-btn:hover{background:var(--accent-red);color:#fff;transform:translateY(-50%) scale(1.1)}.profile-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-secondary)}.loading-spinner{width:40px;height:40px;border:3px solid rgba(0,212,255,.3);border-top:3px solid var(--primary-blue);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.profile-main{padding:25px}.profile-identity{display:flex;gap:30px;align-items:flex-start;margin-bottom:30px;padding-bottom:25px;border-bottom:1px solid rgba(0,212,255,.2)}.profile-icon-section{display:flex;flex-direction:column;align-items:center;gap:15px}.profile-icon-container{width:120px;height:120px;border-radius:50%;border:3px solid var(--primary-blue);overflow:hidden;box-shadow:0 0 20px #00d4ff66;position:relative}.profile-icon{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.profile-icon-container:hover .profile-icon{transform:scale(1.1)}.change-icon-btn{background:linear-gradient(135deg,var(--primary-blue) 0%,#0ea5e9 100%);border:none;color:#fff;padding:8px 16px;border-radius:15px;font-size:.9rem;cursor:pointer;transition:all .3s ease;font-family:Orbitron,monospace}.change-icon-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #00d4ff66}.profile-info{flex:1}.username{color:var(--primary-blue);font-family:Orbitron,monospace;font-size:2rem;margin:0 0 20px;text-shadow:0 0 10px rgba(0,212,255,.5)}.level-section{display:flex;flex-direction:column;gap:15px}.level-display{display:flex;align-items:center;gap:10px}.level-label{color:var(--text-secondary);font-size:1rem}.level-number{color:var(--accent-orange);font-family:Orbitron,monospace;font-size:2rem;font-weight:700;text-shadow:0 0 10px rgba(255,140,0,.5)}.profile-content-section{display:flex;gap:40px;align-items:stretch;min-height:400px}.profile-stats{flex:2;display:flex;flex-direction:column}.profile-stats h4{color:var(--primary-blue);font-family:Orbitron,monospace;font-size:1.4rem;margin:0 0 20px;text-shadow:0 0 5px rgba(0,212,255,.5)}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:20px;flex:1}.profile-stats .stat-item{background:rgba(15,30,50,.6);border:2px solid #00d4ff;border-radius:15px;padding:35px 20px;text-align:center;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:110px}.profile-stats .stat-item:hover{background:rgba(15,30,50,.8);border-color:#00d4ff;transform:translateY(-3px);box-shadow:0 8px 20px #00d4ff4d}.profile-stats .stat-label{display:block;color:#c8dcf0e6;font-size:.72rem;margin-bottom:18px;font-weight:400;text-align:center;text-transform:uppercase;letter-spacing:1.5px;font-family:Rajdhani,sans-serif}.profile-stats .stat-value{display:block;color:#fff;font-family:Orbitron,monospace;font-size:1.92rem;font-weight:700;text-shadow:0 0 15px rgba(255,255,255,.3);text-align:center;background:linear-gradient(180deg,#ffffff 0%,#00d4ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 10px rgba(0,212,255,.5))}.favorite-hero-section{flex:1;min-width:280px}.favorite-hero-section h4{color:var(--primary-blue);font-family:Orbitron,monospace;font-size:1.4rem;margin:0 0 20px;text-shadow:0 0 5px rgba(0,212,255,.5)}.favorite-hero-display{display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center}.favorite-hero-stats{color:var(--text-secondary)}.no-favorite-hero{background:rgba(255,140,0,.1);border:1px solid rgba(255,140,0,.3);border-radius:10px;padding:20px;text-align:center;color:var(--text-secondary)}.icon-selector-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;border-radius:20px;z-index:10}.icon-selector{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border:2px solid var(--primary-blue);border-radius:15px;padding:30px;max-width:900px;width:95%;max-height:700px;overflow-y:auto}.icon-selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:15px;border-bottom:1px solid rgba(0,212,255,.3)}.icon-selector-header h3{color:var(--primary-blue);font-family:Orbitron,monospace;margin:0;text-shadow:0 0 5px rgba(0,212,255,.5)}.icon-selector-close{background:transparent;border:2px solid var(--accent-red);color:var(--accent-red);width:35px;height:35px;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.icon-selector-close:hover{background:var(--accent-red);color:#fff}.available-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px}.icon-option{display:flex;flex-direction:column;align-items:center;padding:20px;border:2px solid transparent;border-radius:15px;cursor:pointer;transition:all .3s ease;background:rgba(0,212,255,.05)}.icon-option:hover{border-color:var(--primary-blue);background:rgba(0,212,255,.1);transform:translateY(-5px)}.icon-option.selected{border-color:var(--accent-orange);background:rgba(255,140,0,.1);box-shadow:0 0 20px #ff8c0066}.icon-option.selected .icon-option-image{border-color:var(--accent-orange);box-shadow:0 0 20px #ff8c0080}.icon-option-image{width:120px;height:120px;border-radius:50%;overflow:hidden;margin-bottom:12px;border:3px solid rgba(0,212,255,.3);box-shadow:0 0 15px #00d4ff33}.icon-option-image img{width:100%;height:100%;object-fit:cover}.icon-option-name{color:var(--text-secondary);font-size:.9rem;text-align:center;font-family:Orbitron,monospace}.icon-option.selected .icon-option-name{color:var(--accent-orange)}@media (max-width: 768px){.profile-modal{width:95%;margin:20px}.profile-identity{flex-direction:column;align-items:center;text-align:center}.profile-content-section{flex-direction:column;gap:30px;min-height:auto}.stats-grid{grid-template-columns:1fr 1fr}.profile-stats .stat-item{padding:25px 15px;min-height:90px}.profile-stats .stat-label{font-size:.8rem;margin-bottom:12px}.profile-stats .stat-value{font-size:1.8rem}.favorite-hero-display{flex-direction:column;text-align:center}.available-icons{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}@media (max-width: 480px){.stats-grid{grid-template-columns:1fr}.profile-stats .stat-item{padding:20px 15px;min-height:80px}.profile-stats .stat-label{font-size:.75rem;margin-bottom:10px}.profile-stats .stat-value{font-size:1.5rem}}.spectator-view{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border-radius:12px;padding:20px;max-width:700px;max-height:80vh;overflow-y:auto;box-shadow:0 8px 32px #0006}.spectator-view-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid rgba(255,255,255,.1)}.spectator-view-header h3{color:#fff;font-size:24px;margin:0}.spectator-view-header .close-button{background:transparent;border:none;color:#fff;font-size:32px;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.spectator-view-header .close-button:hover{background:rgba(255,255,255,.1);transform:rotate(90deg)}.spectator-view-loading{text-align:center;padding:40px;color:#aaa}.spectator-view-content{display:flex;flex-direction:column;gap:20px}.spectator-filters{display:flex;gap:15px;flex-wrap:wrap}.filter-group{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px}.filter-group label{color:#fff;font-size:14px;font-weight:500}.filter-input{padding:10px 15px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(0,0,0,.3);color:#fff;font-size:14px;transition:all .2s ease}.filter-input:focus{outline:none;border-color:#4a90e2;background:rgba(0,0,0,.5)}.filter-input::placeholder{color:#fff6}.spectator-games-list{display:flex;flex-direction:column;gap:15px;max-height:500px;overflow-y:auto;padding-right:10px}.spectator-games-list::-webkit-scrollbar{width:8px}.spectator-games-list::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:4px}.spectator-games-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}.spectator-games-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}.no-games-message{text-align:center;padding:40px 20px;color:#aaa;font-size:16px}.spectator-game-card{background:rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.1);border-radius:10px;padding:15px;transition:all .2s ease}.spectator-game-card:hover{border-color:#4a90e280;transform:translateY(-2px);box-shadow:0 4px 12px #4a90e233}.game-card-header{margin-bottom:15px}.game-info h4{color:#fff;margin:0 0 8px;font-size:18px}.game-meta{display:flex;gap:12px;flex-wrap:wrap}.game-mode,.game-phase,.spectator-count{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:500}.game-mode{background:rgba(74,144,226,.2);color:#4a90e2;border:1px solid rgba(74,144,226,.4)}.game-phase{background:rgba(46,204,113,.2);color:#2ecc71;border:1px solid rgba(46,204,113,.4)}.spectator-count{background:rgba(241,196,15,.2);color:#f1c40f;border:1px solid rgba(241,196,15,.4)}.game-players{display:flex;flex-direction:column;gap:10px}.player-option{display:flex;justify-content:space-between;align-items:center;padding:10px;background:rgba(255,255,255,.05);border-radius:8px;transition:all .2s ease}.player-option:hover{background:rgba(255,255,255,.08)}.player-name{color:#fff;font-size:14px;font-weight:500}.spectate-player-button{padding:8px 16px;background:linear-gradient(135deg,#4a90e2 0%,#357abd 100%);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.spectate-player-button:hover:not(:disabled){background:linear-gradient(135deg,#357abd 0%,#2868a6 100%);transform:scale(1.05);box-shadow:0 4px 12px #4a90e266}.spectate-player-button:disabled{background:#555;color:#999;cursor:not-allowed;opacity:.5}@media (max-width: 768px){.spectator-view{max-width:95vw;padding:15px}.spectator-filters{flex-direction:column}.filter-group{min-width:100%}.player-option{flex-direction:column;align-items:flex-start;gap:10px}.spectate-player-button{width:100%}}.pack-opening-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);display:flex;justify-content:center;align-items:center;z-index:10000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.pack-opening-container{display:flex;gap:clamp(2rem,5vw,4rem);justify-content:center;align-items:center;perspective:1500px}.pack-card-slot{position:relative;width:clamp(180px,15vw,280px);height:clamp(270px,22.5vw,420px);transform-style:preserve-3d;transition:transform .8s ease}.pack-card-slot.zoom-in{animation:zoomToCenter 1s ease-out forwards}@keyframes zoomToCenter{0%{transform:scale(.3) translateY(100vh);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.pack-card-slot.flipped{animation:flipCard .8s ease-in-out forwards}@keyframes flipCard{0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(90deg) scale(1.1)}to{transform:rotateY(180deg) scale(1)}}.pack-card-slot.revealed{animation:revealBounce .6s ease-out forwards}@keyframes revealBounce{0%{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.15)}to{transform:rotateY(180deg) scale(1.05)}}.pack-front{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,rgba(138,43,226,.3) 0%,rgba(75,0,130,.3) 100%);border:3px solid rgba(138,43,226,.6);border-radius:12px;box-shadow:0 10px 40px #8a2be266}.pack-image-full{width:100%;height:100%;object-fit:cover;border-radius:10px}.hero-card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;transform:rotateY(180deg);display:flex;justify-content:center;align-items:center}.hero-card-revealed{width:100%;height:100%;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border:3px solid #4a9eff;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px #4a9eff66;transition:all .3s ease}.hero-card-revealed.glow{animation:cardGlow 2s ease-in-out infinite;border-color:#4a9eff}@keyframes cardGlow{0%,to{box-shadow:0 0 15px #4a9eff66,0 0 25px #4a9eff4d,0 0 35px #4a9eff33;border-color:#4a9eff}50%{box-shadow:0 0 20px #4a9eff99,0 0 35px #4a9eff66,0 0 50px #4a9eff4d;border-color:#5aafff}}.hero-reveal-image{width:100%;height:60%;object-fit:cover;background:#1a1a2e}.hero-card-revealed .hero-card-content{flex:1;display:flex;flex-direction:column;padding:0;background:rgba(0,0,0,.8)}.hero-card-revealed .hero-stats{background:rgba(0,0,0,.8);color:#fff;padding:clamp(10px,1vw,14px) clamp(12px,1.2vw,16px) clamp(8px,.8vw,12px) clamp(12px,1.2vw,16px);border-radius:0 0 10px 10px;font-size:clamp(.85rem,1vw,1.1rem);margin:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}.hero-card-revealed .hero-name{font-weight:700;font-size:clamp(1.1rem,1.3vw,1.5rem);margin-bottom:clamp(5px,.6vw,8px);text-align:center;color:#fff;padding-bottom:clamp(5px,.6vw,8px);border-bottom:1px solid rgba(255,255,255,.3)}.hero-card-revealed .hero-stats-row{display:flex;align-items:center;font-size:clamp(.85rem,1vw,1.1rem);color:#fff;margin-bottom:clamp(4px,.5vw,6px);font-weight:700;line-height:1.3}.hero-card-revealed .hero-stats-row:last-child{margin-bottom:0}.hero-card-revealed .stat-icon{width:clamp(16px,1.3vw,20px);height:clamp(16px,1.3vw,20px);margin-right:clamp(7px,.7vw,10px);flex-shrink:0}.pack-hero-tooltip{position:absolute;top:50%;left:110%;transform:translateY(-50%);background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border:2px solid #4a9eff;border-radius:8px;padding:1rem;min-width:280px;max-width:350px;z-index:10001;box-shadow:0 8px 32px #000c;pointer-events:none;opacity:0;animation:tooltipFadeIn .2s ease-out forwards}.pack-hero-tooltip .tooltip-section{margin-bottom:1rem}.pack-hero-tooltip .tooltip-section:last-child{margin-bottom:0}.pack-hero-tooltip h4{margin:0 0 .5rem;color:#4a9eff;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid rgba(74,158,255,.3);padding-bottom:.25rem}.pack-hero-tooltip .tooltip-ability,.pack-hero-tooltip .tooltip-special{margin-bottom:.75rem;padding:.5rem;background:rgba(74,158,255,.1);border-radius:4px;border-left:3px solid #4a9eff}.pack-hero-tooltip .tooltip-ability:last-child,.pack-hero-tooltip .tooltip-special:last-child{margin-bottom:0}.pack-hero-tooltip .tooltip-ability-name,.pack-hero-tooltip .tooltip-special-name{font-weight:700;color:gold;margin-bottom:.25rem;font-size:.9rem}.pack-hero-tooltip .tooltip-ability-description,.pack-hero-tooltip .tooltip-special-description{color:#e0e0e0;font-size:.8rem;line-height:1.4}.pack-card-slot.pack-2 .pack-hero-tooltip{left:auto;right:110%;animation:tooltipFadeInLeft .2s ease-out forwards}@keyframes tooltipFadeInLeft{0%{opacity:0;transform:translateY(-50%) translate(10px)}to{opacity:1;transform:translateY(-50%) translate(0)}}.hero-card-back:hover .hero-card-revealed{transform:scale(1.05);transition:transform .2s ease;z-index:10}.hero-card-revealed{transition:transform .2s ease}@media (max-width: 768px){.pack-opening-container{gap:1rem;flex-wrap:wrap;padding:1rem}.pack-card-slot{width:clamp(120px,25vw,180px);height:clamp(180px,37.5vw,270px)}}.shop-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.shop-container{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border:2px solid #4a9eff;border-radius:12px;width:95vw;max-width:1400px;height:90vh;max-height:900px;display:flex;flex-direction:column;box-shadow:0 10px 50px #00000080;position:relative;overflow:hidden}.shop-header{display:flex;justify-content:space-between;align-items:center;padding:clamp(.8rem,1.5vw,1.2rem) clamp(1rem,2vw,1.5rem);background:rgba(0,0,0,.3);border-bottom:2px solid rgba(74,158,255,.3)}.shop-header h2{margin:0;font-size:clamp(1.3rem,2vw,1.8rem);color:#4a9eff;text-shadow:0 0 10px rgba(74,158,255,.5)}.shop-header-right{display:flex;align-items:center;gap:1rem}.shop-vp-display{display:flex;align-items:center;gap:.5rem;background:rgba(255,215,0,.1);padding:clamp(.4rem,.8vw,.6rem) clamp(.8rem,1.2vw,1rem);border-radius:8px;border:2px solid rgba(255,215,0,.3)}.shop-vp-display .vp-icon{font-size:clamp(1.2rem,1.8vw,1.5rem)}.shop-vp-display .vp-amount{font-size:clamp(1rem,1.5vw,1.3rem);font-weight:700;color:gold;text-shadow:0 0 10px rgba(255,215,0,.5)}.shop-close-btn{background:rgba(255,0,0,.2);border:2px solid rgba(255,0,0,.5);color:#f44;font-size:clamp(1.2rem,1.8vw,1.5rem);width:clamp(35px,3vw,40px);height:clamp(35px,3vw,40px);border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.shop-close-btn:hover{background:rgba(255,0,0,.4)}.shop-message{padding:clamp(.6rem,1vw,.8rem);margin:clamp(.5rem,1vw,1rem) clamp(1rem,2vw,1.5rem);border-radius:8px;font-weight:700;text-align:center;animation:slideDown .3s ease}.shop-message.success{background:rgba(40,167,69,.2);border:2px solid #28a745;color:#28a745}.shop-message.error{background:rgba(220,53,69,.2);border:2px solid #dc3545;color:#dc3545}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.shop-main-content{display:flex;gap:clamp(1rem,2vw,1.5rem);padding:clamp(.8rem,1.5vw,1rem) clamp(1rem,2vw,1.5rem);flex:1;overflow:visible}.shop-sale-section{flex:0 0 70%;display:flex;flex-direction:column;overflow:visible;padding-right:clamp(.5rem,1vw,1rem);min-width:0}.shop-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(.8rem,1.5vw,1.2rem);padding-bottom:clamp(.5rem,1vw,.8rem);border-bottom:2px solid rgba(74,158,255,.3)}.shop-section-header h3{margin:0;font-size:clamp(1.3rem,2vw,1.6rem);color:#4a9eff;text-shadow:0 0 10px rgba(74,158,255,.5)}.sale-timer{display:flex;align-items:center;gap:.5rem;background:rgba(255,215,0,.1);padding:clamp(.4rem,.8vw,.6rem) clamp(.8rem,1.2vw,1rem);border-radius:8px;border:2px solid rgba(255,215,0,.3);font-size:clamp(.9rem,1.2vw,1.1rem);color:gold}.timer-icon{font-size:clamp(1.1rem,1.5vw,1.3rem)}.shop-sale-container{display:flex;align-items:center;gap:clamp(.5rem,1vw,1rem);padding:clamp(.5rem,1vw,1rem) 0}.shop-pagination-arrow{background:linear-gradient(135deg,#4a9eff 0%,#357abd 100%);border:2px solid #4a9eff;color:#fff;font-size:clamp(1.5rem,2.5vw,2rem);width:clamp(40px,5vw,50px);height:clamp(40px,5vw,50px);border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.shop-pagination-arrow:hover:not(:disabled){background:linear-gradient(135deg,#5fadff 0%,#4a9eff 100%);transform:scale(1.1);box-shadow:0 4px 15px #4a9eff80}.shop-pagination-arrow:disabled{opacity:.3;cursor:not-allowed;background:#555;border-color:#666}.shop-sale-grid{display:flex;gap:clamp(.3rem,.5vw,.4rem);justify-content:center;flex:0 1 auto;min-width:0;overflow:visible}.shop-pack-section{flex:0 0 30%;display:flex;flex-direction:column;padding:clamp(1rem,1.5vw,1.5rem);background:rgba(138,43,226,.1);border:2px solid rgba(138,43,226,.3);border-radius:12px;align-items:center}.pack-description{text-align:center;color:#aaa;font-size:clamp(.85rem,1.1vw,1rem);margin-bottom:clamp(1rem,1.5vw,1.5rem);line-height:1.4}.pack-wrapper{width:100%;display:flex;flex-direction:column;align-items:center;max-width:280px}.pack-card-display{width:100%;max-width:280px;height:380px;margin:clamp(3px,.4vw,6px);cursor:pointer;transition:all .3s ease;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,rgba(138,43,226,.2) 0%,rgba(75,0,130,.2) 100%);border:2px solid rgba(138,43,226,.5);position:relative;display:flex;align-items:center;justify-content:center}.pack-card-display:hover{box-shadow:0 8px 25px #8a2be280;border-color:#a855f7}.pack-image{width:100%;height:100%;object-fit:cover;object-position:center 40%;border-radius:6px}.pack-title-overlay{position:absolute;bottom:15px;left:50%;transform:translate(-50%);font-family:Cinzel,Georgia,serif;font-size:clamp(1rem,1.4vw,1.3rem);font-weight:700;color:#f33;text-shadow:0 0 10px rgba(0,0,0,.9),0 0 20px rgba(0,0,0,.7),2px 2px 4px rgba(0,0,0,.8),0 0 30px rgba(255,50,50,.5);letter-spacing:1px;text-align:center;padding:8px 16px;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.7) 100%);border-radius:8px;border:1px solid rgba(255,50,50,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);white-space:nowrap}.pack-fallback{font-size:clamp(1.5rem,2.5vw,2rem);color:#a78bfa;text-align:center;font-weight:700;line-height:1.5}.pack-buy-btn{width:100%;background:linear-gradient(135deg,#8a2be2 0%,#6a1bb2 100%);border:2px solid #a855f7}.pack-buy-btn:hover:not(:disabled){background:linear-gradient(135deg,#9d4edd 0%,#7b2cbf 100%);box-shadow:0 4px 15px #8a2be266}.pack-description{margin:12px 0 8px;color:#e0e0e0;font-size:clamp(.85rem,1vw,.95rem);text-align:center;line-height:1.4;font-style:italic}.pack-info-btn{width:100%;background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border:2px solid #475569;margin-top:8px}.pack-info-btn:hover:not(:disabled){background:linear-gradient(135deg,#334155 0%,#1e293b 100%);box-shadow:0 4px 15px #47556966;border-color:#64748b}.pack-vp-badge{position:absolute;top:clamp(5px,.8vw,8px);left:clamp(5px,.8vw,8px);z-index:2}.shop-section-title{text-align:center;margin-bottom:clamp(1rem,1.5vw,1.5rem)}.shop-section-title h3{margin:0 0 clamp(.3rem,.5vw,.5rem) 0;font-size:clamp(1.2rem,1.8vw,1.5rem);color:#4a9eff}.shop-section-title p{margin:0;font-size:clamp(.85rem,1.1vw,1rem);color:#aaa}.shop-empty{text-align:center;padding:clamp(2rem,4vw,4rem);color:#aaa}.shop-empty .empty-icon{font-size:clamp(3rem,5vw,4rem);margin-bottom:clamp(1rem,1.5vw,1.5rem)}.shop-empty h3{color:#28a745;margin-bottom:clamp(.5rem,1vw,1rem)}.shop-heroes-grid{display:flex;justify-content:center;gap:clamp(8px,1vw,12px);flex-wrap:wrap;padding:clamp(.5rem,1vw,1rem) 0}.shop-hero-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.6vw,8px);overflow:visible;transform:none!important}.shop-vp-badge{position:absolute;top:clamp(5px,.5vw,8px);left:clamp(5px,.5vw,8px);background:linear-gradient(135deg,#ffd700 0%,#ffed4e 100%);color:#000;padding:clamp(2px,.25vw,3px) clamp(5px,.5vw,8px);border-radius:clamp(10px,1vw,15px);font-size:clamp(.6rem,.8vw,.85rem);font-weight:700;box-shadow:0 2px 6px #ffd70066;border:1px solid rgba(255,215,0,.6);z-index:10;pointer-events:none}.shop-hero-card{width:clamp(156px,12vw,234px);min-height:clamp(240px,18.5vw,360px);margin:clamp(3px,.4vw,6px);cursor:pointer;transition:box-shadow .3s ease;border-radius:8px;transform:none!important;position:relative;overflow:visible}.shop-hero-card .hero-card{transform:none!important;filter:none!important;width:100%;margin:0}.shop-hero-card .hero-card:hover{transform:none!important;filter:none!important;z-index:10000!important}.shop-hero-card:hover{z-index:10000}.shop-hero-card.purchased{opacity:.6;cursor:not-allowed;filter:grayscale(50%);pointer-events:none}.shop-hero-card.purchased:hover{opacity:.6!important;filter:grayscale(50%)!important;transform:none!important}.shop-hero-purchased-overlay{position:absolute;top:0;left:0;right:0;bottom:3px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);border-radius:8px;pointer-events:none;z-index:5}.purchased-text{font-size:clamp(1.2rem,1.8vw,1.8rem);font-weight:700;color:#28a745;text-shadow:0 0 10px rgba(40,167,69,.8),0 0 20px rgba(40,167,69,.6),2px 2px 4px rgba(0,0,0,.8);transform:rotate(-15deg);letter-spacing:2px;background:linear-gradient(135deg,#28a745 0%,#20c997 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:purchasedPulse 2s ease-in-out infinite}@keyframes purchasedPulse{0%,to{filter:brightness(1);text-shadow:0 0 10px rgba(40,167,69,.8),0 0 20px rgba(40,167,69,.6)}50%{filter:brightness(1.3);text-shadow:0 0 15px rgba(40,167,69,1),0 0 30px rgba(40,167,69,.8)}}.shop-hero-card:hover,.shop-hero-wrapper .shop-hero-card:hover,.shop-sale-grid .shop-hero-wrapper .shop-hero-card:hover{transform:none!important;scale:1!important;box-shadow:none}.shop-hero-card.selected{box-shadow:0 10px 30px #4a9eff99;transform:none!important;scale:1!important}.shop-buy-btn{background:linear-gradient(135deg,#28a745 0%,#1e7e34 100%);border:2px solid #28a745;color:#fff;padding:clamp(.4rem,.7vw,.6rem) clamp(.8rem,1.2vw,1.2rem);border-radius:6px;font-size:clamp(.75rem,.95vw,.9rem);font-weight:700;cursor:pointer;transition:all .3s ease;white-space:nowrap;width:100%;max-width:clamp(156px,12vw,234px)}.shop-buy-btn:hover:not(:disabled){background:linear-gradient(135deg,#32c252 0%,#28a745 100%);transform:scale(1.05);box-shadow:0 4px 15px #28a74566}.shop-buy-btn:disabled{opacity:.5;cursor:not-allowed;background:#555;border-color:#666}.pack-opening-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);display:flex;justify-content:center;align-items:center;z-index:2000;animation:fadeIn .3s ease}.pack-opening-container{text-align:center;color:#fff}.pack-animation{font-size:clamp(4rem,8vw,6rem);animation:packShake .5s infinite;margin-bottom:clamp(1rem,2vw,2rem)}@keyframes packShake{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.pack-opening-container h3{font-size:clamp(1.5rem,2.5vw,2rem);margin-bottom:clamp(1.5rem,2.5vw,2rem);color:#a78bfa}.revealed-heroes{display:flex;flex-direction:column;gap:clamp(.8rem,1.2vw,1rem);margin-top:clamp(1rem,1.5vw,1.5rem)}.revealed-hero{font-size:clamp(1.2rem,1.8vw,1.5rem);color:gold;font-weight:700;animation:revealHero .5s ease;text-shadow:0 0 20px rgba(255,215,0,.6)}@keyframes revealHero{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.shop-loading{display:flex;justify-content:center;align-items:center;height:100%;font-size:clamp(1.2rem,1.8vw,1.5rem);color:#aaa}@media (max-width: 1400px){.shop-heroes-grid{gap:clamp(6px,.8vw,10px)}.shop-hero-card{width:clamp(140px,11vw,210px);min-height:clamp(220px,17vw,340px)}.shop-buy-btn{max-width:clamp(140px,11vw,210px)}}@media (max-width: 1024px){.shop-hero-card{width:clamp(130px,10vw,190px);min-height:clamp(200px,15.5vw,310px)}.shop-buy-btn{max-width:clamp(130px,10vw,190px)}}@media (max-width: 768px){.shop-container{width:98vw;height:95vh}.shop-header{flex-wrap:wrap;gap:.5rem}.pack-card{flex-direction:column;text-align:center}.shop-hero-card{width:clamp(120px,28vw,160px);min-height:clamp(180px,42vw,260px)}.shop-buy-btn{max-width:clamp(120px,28vw,160px);font-size:.75rem;padding:.4rem .6rem}}.pack-contents-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.pack-contents-container{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border-radius:16px;border:2px solid #a855f7;box-shadow:0 8px 32px #8a2be24d;padding:24px;max-width:95vw;max-height:85vh;overflow-y:auto;position:relative}.modal-close-btn{position:absolute;top:12px;right:12px;background:rgba(255,0,0,.2);border:2px solid rgba(255,0,0,.5);color:#f44;font-size:clamp(1.2rem,1.8vw,1.5rem);width:clamp(35px,3vw,40px);height:clamp(35px,3vw,40px);border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.modal-close-btn:hover{background:rgba(255,0,0,.4)}.pack-contents-title{color:#a855f7;font-size:clamp(1.5rem,2.5vw,2rem);margin:0 0 16px;text-align:center;text-shadow:0 0 10px rgba(168,85,247,.5)}.pack-contents-wrapper{display:flex;align-items:center;gap:16px;position:relative}.pack-contents-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;flex:1}.pack-content-hero .shop-hero-card{cursor:pointer;transition:none;transform:scale(.85);transform-origin:center;overflow:hidden}.pack-content-hero .hero-card{height:100%;display:flex;flex-direction:column}.pack-content-hero .hero-image{object-fit:cover;object-position:center center;width:100%;flex-shrink:0}.pack-content-hero .shop-hero-card.purchased{opacity:.6;cursor:not-allowed;filter:grayscale(50%);pointer-events:none}.pack-content-hero .shop-hero-card.purchased:hover{opacity:.6!important;filter:grayscale(50%)!important;transform:scale(.85)!important}.pack-pagination-arrow{background:linear-gradient(135deg,rgba(0,212,255,.2) 0%,rgba(138,43,226,.2) 100%);border:2px solid rgba(0,212,255,.3);color:#00d4ff;font-size:2rem;width:50px;height:50px;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.pack-pagination-arrow:hover:not(:disabled){background:linear-gradient(135deg,rgba(0,212,255,.3) 0%,rgba(138,43,226,.3) 100%);border-color:#00d4ff80;transform:scale(1.05)}.pack-pagination-arrow:disabled{opacity:.3;cursor:not-allowed}.pack-contents-pagination-info{text-align:center;color:#e0e0e0;font-size:.9rem;margin-top:12px;opacity:.8}.pack-contents-pagination{display:flex;align-items:center;justify-content:center;gap:40px;margin-top:20px}.pagination-arrow{background:linear-gradient(135deg,rgba(0,212,255,.3) 0%,rgba(138,43,226,.3) 100%);border:2px solid rgba(0,212,255,.5);border-radius:8px;padding:10px 20px;font-size:1.5rem;color:#00d4ff;cursor:pointer;transition:all .3s ease;font-weight:700}.pagination-arrow:hover:not(:disabled){background:linear-gradient(135deg,rgba(0,212,255,.5) 0%,rgba(138,43,226,.5) 100%);border-color:#00d4ff;transform:translateY(-2px);box-shadow:0 4px 15px #00d4ff66}.pagination-arrow:disabled{opacity:.3;cursor:not-allowed}.pagination-info{color:#e0e0e0;font-size:clamp(.9rem,1.1vw,1rem);font-weight:600}.requirement-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.requirement-modal-container{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border:2px solid #ff6b6b;border-radius:12px;width:90%;max-width:380px;padding:0;box-shadow:0 10px 40px #ff6b6b66;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.requirement-modal-content{padding:1.5rem}.requirement-modal-header{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1.5rem;background:rgba(255,107,107,.15);border-bottom:2px solid rgba(255,107,107,.3)}.requirement-warning-icon{font-size:1.75rem;line-height:1;filter:drop-shadow(0 0 8px rgba(255,107,107,.6))}.requirement-title{margin:0;font-size:1.25rem;color:#ff6b6b;font-weight:600;text-shadow:0 0 10px rgba(255,107,107,.4)}.requirement-message{margin:0 0 1.25rem;font-size:1rem;color:#e0e0e0;line-height:1.6;text-align:center}.requirement-display{background:rgba(0,0,0,.4);border:1px solid rgba(255,107,107,.3);border-radius:8px;padding:1rem 1.25rem;margin-bottom:1rem}.requirement-row{display:flex;justify-content:space-between;align-items:center}.requirement-label{font-size:1rem;color:#b0b0b0;font-weight:500}.requirement-value{font-size:1.15rem;color:gold;font-weight:600}.current-count{color:#ff6b6b;font-weight:700;font-size:1.2rem}.requirement-hint{margin:0;font-size:.9rem;color:#4a9eff;text-align:center;font-style:italic}.requirement-modal-button{width:100%;padding:1rem;background:linear-gradient(135deg,#8b4513 0%,#6b3410 100%);color:#fff;border:none;border-radius:0 0 10px 10px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.requirement-modal-button:hover{background:linear-gradient(135deg,#a0522d 0%,#8b4513 100%);box-shadow:0 0 15px #8b451380}.requirement-modal-button:active{transform:scale(.98)}:root{--primary-blue: #00d4ff;--primary-purple: #8b5cf6;--accent-gold: #ffd700;--accent-green: #00ff88;--accent-red: #ff4757;--dark-bg: #0a0e1a;--card-bg: rgba(15, 23, 42, .8);--glass-bg: rgba(255, 255, 255, .05);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--border-glow: rgba(0, 212, 255, .3)}*{margin:0;padding:0;box-sizing:border-box}.game-lobby-modern{min-height:100vh;background:var(--dark-bg);font-family:Rajdhani,sans-serif;position:relative;overflow-x:hidden;color:var(--text-primary)}.cosmic-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:linear-gradient(135deg,#0a0e1a 0%,#1a1f3a 50%,#0a0e1a 100%)}.stars-layer{position:absolute;width:100%;height:100%;background-image:radial-gradient(circle at 25% 25%,rgba(0,212,255,.4) 1px,transparent 1px),radial-gradient(circle at 75% 75%,rgba(139,92,246,.3) 1px,transparent 1px),radial-gradient(circle at 50% 10%,rgba(255,215,0,.2) 1px,transparent 1px),radial-gradient(circle at 10% 90%,rgba(0,255,136,.2) 1px,transparent 1px);background-size:100px 100px,150px 150px,200px 200px,120px 120px;animation:twinkle 8s infinite ease-in-out}.nebula-layer{position:absolute;width:100%;height:100%;background:radial-gradient(ellipse at 20% 30%,rgba(0,212,255,.1) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(139,92,246,.08) 0%,transparent 60%),radial-gradient(ellipse at 40% 80%,rgba(255,215,0,.06) 0%,transparent 40%);animation:nebulaDrift 15s infinite ease-in-out alternate}.energy-waves{position:absolute;width:100%;height:100%;background:linear-gradient(45deg,transparent 40%,rgba(0,212,255,.02) 50%,transparent 60%);animation:energyPulse 6s infinite ease-in-out}@keyframes twinkle{0%,to{opacity:1}50%{opacity:.6}}@keyframes nebulaDrift{0%{transform:translate(-10px) translateY(-5px)}to{transform:translate(10px) translateY(5px)}}@keyframes energyPulse{0%,to{opacity:.5;transform:translate(-100%)}50%{opacity:1;transform:translate(100%)}}@keyframes glow{0%,to{box-shadow:0 0 20px #00d4ff4d}50%{box-shadow:0 0 30px #00d4ff99}}.lobby-header{position:relative;z-index:10;padding:clamp(15px,2vw,20px) clamp(25px,3vw,40px);background:linear-gradient(135deg,rgba(15,23,42,.9) 0%,rgba(30,41,59,.8) 100%);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,212,255,.2)}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto}.logo-section{display:flex;align-items:center}.logo-text h1{font-family:Orbitron,monospace;font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:900;background:linear-gradient(135deg,var(--primary-blue) 0%,var(--primary-purple) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0}.logo-text span{font-size:clamp(.7rem,.9vw,.9rem);color:var(--text-secondary);font-weight:300;letter-spacing:1px}.user-stats{display:flex;align-items:center}.stats-row{display:flex;align-items:center;gap:clamp(12px,1.5vw,20px)}.victory-points{display:flex;align-items:center;gap:clamp(5px,.6vw,8px);background:var(--glass-bg);padding:clamp(7px,.8vw,10px) clamp(12px,1.5vw,20px);border-radius:clamp(18px,2vw,25px);border:1px solid rgba(255,215,0,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.trophy-icon{font-size:clamp(1rem,1.2vw,1.2rem);filter:drop-shadow(0 0 5px rgba(255,215,0,.5))}.points-text{font-weight:600;color:var(--accent-gold)}.xp-section{display:flex;flex-direction:column;align-items:center;gap:clamp(5px,.6vw,8px);background:var(--glass-bg);padding:clamp(8px,1vw,12px) clamp(12px,1.5vw,20px);border-radius:clamp(18px,2vw,25px);border:1px solid rgba(0,212,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:clamp(140px,15vw,180px);min-height:clamp(50px,5vw,60px)}.level-text{font-family:Orbitron,monospace;font-weight:700;color:var(--primary-blue);font-size:clamp(.7rem,.9vw,.9rem);text-shadow:0 0 5px rgba(0,212,255,.5);margin:0}.logout-button{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(255,71,87,.8) 0%,rgba(204,58,74,.8) 100%);border:1px solid rgba(255,71,87,.5);color:#fff;padding:10px 18px;border-radius:25px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 15px #ff475733}.logout-button:hover{background:linear-gradient(135deg,rgba(255,71,87,1) 0%,rgba(204,58,74,1) 100%);border-color:#ff4757cc;transform:translateY(-2px);box-shadow:0 6px 20px #ff475766}.logout-icon{font-size:1rem;filter:drop-shadow(0 0 3px rgba(255,255,255,.3))}.logout-text{font-family:Orbitron,monospace}.lobby-dashboard{padding:clamp(20px,2.5vw,30px) clamp(25px,3vw,40px) clamp(30px,3.5vw,40px);max-width:clamp(1000px,90vw,1400px);margin:0 auto}.dashboard-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:clamp(15px,2vw,25px);min-height:clamp(600px,70vh,80vh)}.player-info-panel,.modes-panel,.collection-panel{background:var(--card-bg);border-radius:clamp(12px,1.5vw,20px);border:1px solid var(--border-glow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative}.player-info-panel:hover,.modes-panel:hover,.collection-panel:hover{transform:translateY(clamp(-3px,-.4vw,-5px));border-color:var(--primary-blue);box-shadow:0 clamp(15px,2vw,20px) clamp(30px,3.5vw,40px) #0000004d,0 0 clamp(20px,2.5vw,30px) #00d4ff33}.panel-header{padding:clamp(18px,2vw,25px) clamp(20px,2.5vw,30px) clamp(15px,1.8vw,20px);position:relative}.panel-header h2{font-family:Orbitron,monospace;font-size:clamp(1.1rem,1.4vw,1.4rem);font-weight:700;color:var(--primary-blue);margin:0}.header-accent{position:absolute;bottom:0;left:clamp(20px,2.5vw,30px);right:clamp(20px,2.5vw,30px);height:2px;background:linear-gradient(90deg,var(--primary-blue) 0%,transparent 100%);border-radius:1px}.panel-content{padding:clamp(15px,1.8vw,20px) clamp(20px,2.5vw,30px) clamp(20px,2.5vw,30px)}.profile-btn{background:linear-gradient(135deg,var(--primary-blue) 0%,#0ea5e9 100%);border:none;color:#fff;padding:12px 24px;border-radius:15px;font-family:Orbitron,monospace;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%;margin-top:15px;margin-bottom:35px;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px #00d4ff4d}.profile-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00d4ff66;background:linear-gradient(135deg,#0ea5e9 0%,var(--primary-blue) 100%)}.quests-section h3{color:var(--accent-gold);font-family:Orbitron,monospace;font-size:1.2rem;margin:0 0 20px;text-shadow:0 0 5px rgba(255,215,0,.5);text-align:center}.daily-quests{display:flex;flex-direction:column;gap:15px}.quest-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px;background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.3);border-radius:10px;transition:all .3s ease;position:relative;overflow:hidden}.quest-item:hover{background:rgba(255,215,0,.15);transform:translate(5px);border-color:var(--accent-gold)}.quest-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent-gold) 0%,transparent 100%)}.quest-text{color:var(--text-secondary);font-size:.9rem;flex:1;line-height:1.4}.quest-progress{color:var(--accent-gold);font-family:Orbitron,monospace;font-size:.8rem;font-weight:700;background:rgba(255,215,0,.2);padding:4px 8px;border-radius:8px;border:1px solid rgba(255,215,0,.4);flex-shrink:0}.modes-container{padding:clamp(15px,1.8vw,20px) clamp(20px,2.5vw,30px) clamp(20px,2.5vw,30px);display:flex;flex-direction:column;gap:clamp(20px,2.5vw,30px)}.mode-category{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,15px)}.category-header{display:flex;align-items:center;gap:clamp(7px,.8vw,10px);margin-bottom:clamp(3px,.4vw,5px)}.category-header h3{font-family:Orbitron,monospace;font-size:clamp(.9rem,1.1vw,1.1rem);font-weight:700;color:var(--accent-gold);margin:0;text-transform:uppercase;letter-spacing:1px}.category-divider{flex:1;height:1px;background:linear-gradient(90deg,var(--accent-gold) 0%,transparent 100%)}.category-modes{display:flex;flex-direction:column;gap:clamp(8px,1vw,12px)}.game-mode{position:relative;background:var(--glass-bg);border-radius:clamp(8px,1vw,12px);border:1px solid rgba(255,255,255,.1);padding:clamp(12px,1.5vw,18px) clamp(15px,1.8vw,20px);cursor:pointer;transition:all .3s ease;overflow:hidden;display:flex;align-items:center;gap:clamp(10px,1.2vw,15px)}.game-mode:hover{background:rgba(255,255,255,.08);border-color:var(--primary-blue);transform:translate(clamp(3px,.4vw,5px))}.game-mode:hover .mode-overlay{opacity:1}.game-mode:hover .mode-icon{transform:scale(1.1) rotate(5deg)}.game-mode:hover .btn-glow{opacity:1;transform:scale(1.1)}.mode-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(0,212,255,.05) 0%,rgba(139,92,246,.05) 100%);opacity:0;transition:opacity .3s ease}.mode-icon{font-size:clamp(1.5rem,2vw,2rem);transition:all .3s ease;filter:drop-shadow(0 0 10px rgba(0,212,255,.4));flex-shrink:0}.mode-info{flex:1}.mode-info h3{font-size:clamp(.9rem,1.1vw,1.1rem);font-weight:700;margin:0 0 clamp(2px,.3vw,3px) 0;color:var(--text-primary)}.mode-info p{color:var(--text-secondary);font-size:clamp(.7rem,.85vw,.85rem);margin:0}.mode-play-btn{position:relative;background:linear-gradient(135deg,var(--primary-blue) 0%,var(--primary-purple) 100%);border:none;border-radius:clamp(15px,1.8vw,20px);padding:clamp(7px,.8vw,10px) clamp(14px,1.6vw,20px);color:#fff;font-weight:700;font-size:clamp(.65rem,.8vw,.8rem);cursor:pointer;overflow:hidden;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.mode-play-btn span{position:relative;z-index:2}.btn-glow{position:absolute;top:-50%;left:-50%;right:-50%;bottom:-50%;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);opacity:0;transition:all .3s ease;transform:scale(.8)}.game-mode.survival-mode{border:1px solid rgba(255,102,0,.3)}.game-mode.survival-mode:hover{border-color:#f60;box-shadow:0 0 20px #ff66004d}.game-mode.survival-mode .mode-overlay{background:linear-gradient(135deg,rgba(255,102,0,.05) 0%,rgba(255,165,0,.05) 100%)}.game-mode.survival-mode .mode-icon{filter:drop-shadow(0 0 10px rgba(255,102,0,.4))}.game-mode.survival-mode .mode-play-btn{background:linear-gradient(135deg,#ff6600 0%,#ff8833 100%)}.game-mode.gauntlet-mode{border:1px solid rgba(220,20,60,.3);padding:clamp(12px,1.5vw,18px) clamp(15px,1.8vw,20px);min-height:auto;max-height:none}.game-mode.gauntlet-mode:hover{border-color:#dc143c;box-shadow:0 0 20px #dc143c4d}.game-mode.gauntlet-mode .mode-overlay{background:linear-gradient(135deg,rgba(220,20,60,.05) 0%,rgba(255,0,0,.05) 100%)}.game-mode.gauntlet-mode .mode-icon{filter:drop-shadow(0 0 10px rgba(220,20,60,.4));font-size:clamp(1.5rem,2vw,2rem)}.game-mode.gauntlet-mode .mode-play-btn{background:linear-gradient(135deg,#dc143c 0%,#ff4444 100%)}.collection-panel{cursor:pointer}.collection-preview{padding:30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;min-height:500px;justify-content:flex-start}.collection-text h3{font-size:1.4rem;font-weight:700;color:var(--accent-gold);margin:0 0 8px}.collection-text p{color:var(--text-secondary);font-size:1rem;line-height:1.4;margin:0}.collection-btn{background:linear-gradient(135deg,var(--accent-gold) 0%,#ffb000 100%);color:#000;border:none;border-radius:25px;padding:12px 25px;font-weight:700;font-size:.9rem;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.collection-btn:hover{background:linear-gradient(135deg,#ffb000 0%,var(--accent-gold) 100%);transform:translateY(-2px);box-shadow:0 10px 25px #ffd70066}.btn-arrow{font-size:1.2rem;transition:transform .3s ease}.collection-btn:hover .btn-arrow{transform:translate(3px)}.random-hero-card{margin-top:20px;animation:heroGlow 2s ease-in-out infinite alternate;transition:opacity .6s ease,transform .6s ease;opacity:1;transform:scale(1)}.random-hero-card.transitioning{opacity:0;transform:scale(.95)}.random-hero-card .hero-card{transform:none!important;transition:none!important}.random-hero-card .hero-card:hover{transform:none!important;z-index:auto!important}@keyframes heroGlow{0%{filter:drop-shadow(0 0 15px rgba(0,212,255,.3))}to{filter:drop-shadow(0 0 25px rgba(0,212,255,.6))}}@media (max-width: 1200px){.dashboard-grid{grid-template-columns:1fr;gap:25px}.lobby-header{padding:15px 30px}.lobby-dashboard{padding:30px}}@media (max-width: 768px){.header-content{flex-direction:column;gap:15px}.logo-text h1{font-size:1.8rem}.stats-row{flex-direction:column;gap:12px;align-items:center}.xp-section{min-width:160px}.lobby-dashboard{padding:20px}.dashboard-grid{gap:20px}.panel-header,.panel-content,.modes-container{padding-left:20px;padding-right:20px}.mode-category{gap:8px}.category-modes{gap:10px}.game-mode{flex-direction:column;text-align:center;gap:12px;padding:16px}.category-header h3{font-size:1rem}.mode-info{order:1}.mode-play-btn{order:2}.collection-preview{padding:20px;min-height:450px}.random-hero-card .hero-card{transform:scale(.85)}}@media (max-width: 480px){.lobby-header{padding:15px 20px}.logo-text h1{font-size:1.5rem}.victory-points,.xp-section,.logout-button{padding:8px 14px;font-size:.8rem}.xp-section{min-width:140px}.logout-button{padding:8px 14px}.lobby-dashboard{padding:15px}.mode-icon{font-size:2rem}.collection-icon-large{font-size:3rem}.panel-header h2{font-size:1.2rem}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.friendly-modal{background:var(--card-bg);border:2px solid var(--border-glow);border-radius:20px;padding:0;max-width:500px;width:90%;max-height:90vh;overflow:hidden;box-shadow:0 20px 40px #00000080;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.friendly-modal-header{background:linear-gradient(135deg,rgba(0,212,255,.3) 0%,rgba(139,92,246,.4) 100%);padding:20px 30px;border-bottom:1px solid rgba(0,212,255,.3);display:flex;justify-content:space-between;align-items:center}.friendly-modal-header h3{margin:0;color:var(--text-primary);font-size:1.5rem;font-weight:700;font-family:Orbitron,monospace}.close-button{background:none;border:none;color:var(--text-primary);font-size:1.8rem;cursor:pointer;padding:0;width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-button:hover{background:rgba(255,255,255,.1);transform:scale(1.1)}.friendly-modal-content{padding:30px}.action-selection{display:flex;gap:20px;margin-bottom:30px}.action-option{flex:1;background:var(--glass-bg);border:2px solid rgba(255,255,255,.1);border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:all .3s ease}.action-option:hover{border-color:var(--primary-blue);background:rgba(0,212,255,.1);transform:translateY(-2px)}.action-option.selected{border-color:var(--primary-blue);background:rgba(0,212,255,.2);box-shadow:0 0 20px #00d4ff4d}.action-icon{font-size:2rem;margin-bottom:10px}.action-option h4{margin:0 0 8px;color:var(--text-primary);font-size:1.1rem;font-weight:600}.action-option p{margin:0;color:var(--text-secondary);font-size:.9rem;line-height:1.4}.room-input-section{margin-bottom:30px}.room-input-section label{display:block;color:var(--text-primary);font-weight:600;margin-bottom:10px;font-size:1rem}.room-input{width:100%;padding:12px 16px;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:var(--glass-bg);color:var(--text-primary);font-size:1rem;transition:all .3s ease;box-sizing:border-box;font-family:inherit}.room-input:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 15px #00d4ff4d;background:rgba(255,255,255,.1)}.room-input::placeholder{color:var(--text-secondary)}.friendly-modal-actions{display:flex;gap:15px;justify-content:flex-end}.friendly-submit-button{background:linear-gradient(135deg,var(--primary-blue) 0%,var(--primary-purple) 100%);color:#fff;border:none;border-radius:8px;padding:12px 25px;font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s ease;min-width:120px;text-transform:uppercase;letter-spacing:.5px}.friendly-submit-button:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-purple) 0%,var(--primary-blue) 100%);transform:translateY(-2px);box-shadow:0 8px 25px #00d4ff66}.friendly-submit-button:disabled{background:#6c757d;cursor:not-allowed;transform:none;box-shadow:none}.friendly-cancel-button{background:rgba(255,255,255,.1);color:var(--text-primary);border:2px solid rgba(255,255,255,.3);border-radius:8px;padding:12px 25px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;min-width:120px;text-transform:uppercase;letter-spacing:.5px}.friendly-cancel-button:hover{background:rgba(255,255,255,.2);border-color:#ffffff80;transform:translateY(-2px)}@media (max-width: 768px){.friendly-modal{width:95%;margin:20px}.action-selection{flex-direction:column;gap:15px}.friendly-modal-actions{flex-direction:column;gap:10px}.friendly-submit-button,.friendly-cancel-button{width:100%}}.searching-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.searching-modal{background:linear-gradient(135deg,var(--card-bg) 0%,rgba(15,23,42,.95) 100%);border:2px solid var(--border-glow);border-radius:20px;padding:40px;text-align:center;max-width:400px;width:90%;box-shadow:0 0 30px #00d4ff4d,inset 0 0 30px #00d4ff1a}.searching-content h3{font-family:Orbitron,monospace;font-size:1.8rem;color:var(--primary-blue);margin-bottom:15px;text-shadow:0 0 10px rgba(0,212,255,.5)}.searching-content p{color:var(--text-secondary);margin-bottom:30px;font-size:1.1rem}.searching-spinner{margin-bottom:20px}.spinner{width:60px;height:60px;border:4px solid rgba(0,212,255,.2);border-left:4px solid var(--primary-blue);border-radius:50%;margin:0 auto;animation:spin 1s linear infinite}.searching-dots{display:flex;justify-content:center;gap:8px;margin-bottom:30px}.dot{width:8px;height:8px;background:var(--primary-blue);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}.dot:nth-child(2){animation-delay:.3s}.dot:nth-child(3){animation-delay:.6s}@keyframes pulse{0%,80%,to{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.2)}}.cancel-search-button{background:linear-gradient(135deg,var(--accent-red) 0%,#cc3a4a 100%);border:none;color:#fff;padding:12px 30px;border-radius:10px;font-family:Orbitron,monospace;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px #ff47574d}.cancel-search-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff475766;background:linear-gradient(135deg,#ff6b7a 0%,var(--accent-red) 100%)}.game-mode.searching{border:2px solid var(--primary-blue);background:rgba(0,212,255,.1);animation:searching-pulse 2s ease-in-out infinite;cursor:default}@keyframes searching-pulse{0%,to{box-shadow:0 0 20px #00d4ff4d}50%{box-shadow:0 0 30px #00d4ff99}}.game-mode.searching:hover{transform:none;box-shadow:0 0 30px #00d4ff99}.searching-info{animation:none}.searching-info h3{color:var(--primary-blue);text-shadow:0 0 10px rgba(0,212,255,.5)}.searching-info p{color:var(--text-secondary);font-size:.9rem}.searching-info .searching-dots{display:flex;justify-content:center;gap:4px;margin-top:10px}.searching-info .dot{width:6px;height:6px;background:var(--primary-blue);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}.searching-info .dot:nth-child(2){animation-delay:.3s}.searching-info .dot:nth-child(3){animation-delay:.6s}.mode-cancel-btn{background:linear-gradient(135deg,var(--accent-red) 0%,#cc3a4a 100%);border:none;color:#fff;padding:8px 18px;border-radius:20px;font-family:Orbitron,monospace;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px #ff47574d;position:relative;overflow:hidden}.mode-cancel-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff475766;background:linear-gradient(135deg,#ff6b7a 0%,var(--accent-red) 100%)}.mode-cancel-btn span{position:relative;z-index:2}.mode-cancel-btn .btn-glow{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.rules-modal{background:var(--card-bg);border:2px solid var(--border-glow);border-radius:20px;padding:0;max-width:700px;width:90%;max-height:85vh;overflow:hidden;box-shadow:0 20px 40px #00000080;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.rules-modal-header{background:linear-gradient(135deg,rgba(0,212,255,.3) 0%,rgba(139,92,246,.4) 100%);padding:20px 30px;border-bottom:1px solid rgba(0,212,255,.3);display:flex;justify-content:space-between;align-items:center}.rules-modal-header h3{margin:0;color:var(--text-primary);font-size:1.5rem;font-weight:700;font-family:Orbitron,monospace}.rules-modal-content{padding:25px 30px;max-height:calc(85vh - 80px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--primary-blue) rgba(255,255,255,.1)}.rules-modal-content::-webkit-scrollbar{width:8px}.rules-modal-content::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:10px}.rules-modal-content::-webkit-scrollbar-thumb{background:var(--primary-blue);border-radius:10px}.rules-modal-content::-webkit-scrollbar-thumb:hover{background:var(--primary-purple)}.rules-category{background:var(--glass-bg);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:18px 22px;margin-bottom:18px;transition:all .3s ease}.rules-category:hover{border-color:#00d4ff4d;background:rgba(255,255,255,.08)}.rules-category h4{margin:0 0 15px;color:var(--accent-gold);font-size:1.1rem;font-weight:700;font-family:Orbitron,monospace;text-transform:uppercase;letter-spacing:1px;padding-bottom:10px;border-bottom:1px solid rgba(255,215,0,.2)}.rule-item{display:flex;gap:12px;margin-bottom:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);align-items:flex-start}.rule-item:last-child{border-bottom:none;margin-bottom:0}.rule-label{color:var(--primary-blue);font-weight:700;min-width:140px;font-size:.95rem;flex-shrink:0}.rule-value{color:var(--text-secondary);line-height:1.5;font-size:.95rem}.rule-text{color:var(--text-secondary);line-height:1.6;margin-bottom:10px;padding-left:0;font-size:.95rem}.rule-text:last-child{margin-bottom:0}.rule-text strong{color:var(--primary-blue);font-weight:700}@media (max-width: 768px){.rules-modal{max-width:95%;max-height:90vh}.rules-modal-content{padding:20px}.rules-category{padding:15px 18px}.rule-item{flex-direction:column;gap:5px}.rule-label{min-width:auto}}.rewards-display{margin-top:20px;padding:20px;background:rgba(0,0,0,.3);border-radius:10px;border:2px solid rgba(255,215,0,.3)}.rewards-title{text-align:center;color:gold;font-size:1.4rem;margin:0 0 20px;text-shadow:0 0 10px rgba(255,215,0,.5)}.rewards-content{display:flex;flex-direction:column;gap:20px}.reward-section{background:rgba(0,0,0,.2);padding:15px;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.reward-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.label-text{color:#fff;font-size:1.1rem;font-weight:600}.reward-gain{font-size:1.2rem;font-weight:700;padding:4px 12px;border-radius:20px}.xp-gain{color:#4af;background:rgba(68,170,255,.2);border:2px solid #4af;text-shadow:0 0 10px rgba(68,170,255,.8);margin-left:15px}.vp-gain{color:gold;background:rgba(255,215,0,.2);border:2px solid #ffd700;text-shadow:0 0 10px rgba(255,215,0,.8)}.xp-section{border-left:3px solid #4af}.xp-bar-wrapper{display:flex;flex-direction:column;gap:8px}.level-indicator{display:flex;align-items:center;gap:10px;color:#4af;font-size:1rem;font-weight:600}.level-up-badge{padding:2px 8px;background:linear-gradient(135deg,#ff6b6b,#ffd700);border-radius:12px;font-size:.75rem;color:#fff;font-weight:700;text-shadow:0 0 5px rgba(0,0,0,.5);animation:level-up-pulse 1s ease-in-out infinite}@keyframes level-up-pulse{0%,to{transform:scale(1);box-shadow:0 0 10px #ffd70080}50%{transform:scale(1.05);box-shadow:0 0 20px #ffd700cc}}.vp-section{border-left:3px solid #ffd700}.vp-display{display:flex;justify-content:center;align-items:center;padding:10px 0}.vp-counter{display:flex;align-items:center;gap:12px;font-size:2rem;font-weight:700;color:gold;padding:10px 20px;background:rgba(255,215,0,.1);border-radius:12px;border:2px solid rgba(255,215,0,.3);transition:all .3s ease}.vp-counter.animating{animation:vp-count-up 2.5s ease-out}@keyframes vp-count-up{0%{transform:scale(.95);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.3);box-shadow:0 0 25px #ffd70080}to{transform:scale(1);filter:brightness(1)}}.vp-icon{font-size:2.5rem;filter:drop-shadow(0 0 8px rgba(255,215,0,.8))}.vp-number{text-shadow:0 0 15px rgba(255,215,0,.6);min-width:80px;text-align:center}@media (max-width: 768px){.rewards-display{padding:15px}.rewards-title{font-size:1.2rem}.label-text{font-size:1rem}.reward-gain{font-size:1rem;padding:3px 10px}.vp-counter{font-size:1.5rem;padding:8px 16px}.vp-icon{font-size:2rem}.vp-number{min-width:60px}}.survival-team-builder{display:flex;flex-direction:column;height:auto;width:100%}.survival-split-layout{display:flex;height:auto;min-height:0;gap:10px;padding:0 15px;overflow-x:hidden;overflow-y:visible;box-sizing:border-box;width:100%}@media (max-width: 1400px){.survival-split-layout{overflow-x:hidden}.survival-split-layout>*{flex-shrink:1}.hero-browser-side{min-width:350px;max-width:55%}.team-selection-side{min-width:300px}}@media (max-width: 1200px){.hero-browser-side{min-width:320px;max-width:52%}.team-selection-side{min-width:280px}}@media (max-width: 1000px){.hero-browser-side{min-width:300px;max-width:50%}.team-selection-side{min-width:260px}}.hero-browser-side{flex:1 1 58%;display:flex;flex-direction:column;overflow:visible;border-right:2px solid #ff6600;padding:15px 2px 15px 0;max-width:58%;min-width:300px}.hero-browser-header{display:flex;justify-content:space-between;align-items:center;padding:8px 15px;margin:0 40px 5px 10px;background:rgba(0,0,0,.3);border:1px solid #ff6600;border-radius:6px}.page-indicator{color:#f60;font-weight:700;font-size:.9rem;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.survival-header-controls{display:flex;align-items:center;gap:15px}.sort-controls,.search-controls{display:flex;align-items:center;gap:8px}.sort-controls label,.search-controls label{color:#fff;font-weight:700;font-size:12px}.survival-sort-dropdown,.survival-search-input{background:rgba(255,102,0,.2);border:1px solid #ff6600;border-radius:4px;color:#fff;padding:6px 10px;font-size:12px;transition:all .3s ease}.survival-sort-dropdown{cursor:pointer}.survival-search-input{min-width:140px}.survival-search-input::placeholder{color:#ffffff80}.survival-sort-dropdown:hover,.survival-search-input:hover{background:rgba(255,102,0,.3);box-shadow:0 0 10px #ff660080}.survival-sort-dropdown:focus,.survival-search-input:focus{outline:none;box-shadow:0 0 15px #ff6600b3}.survival-sort-dropdown option{background:#222;color:#fff;padding:5px}.team-selection-side{flex:1;display:flex;flex-direction:column;padding-left:10px;min-width:320px}.team-selection-header{text-align:center;margin-bottom:30px}.team-selection-header h2{color:#f60;font-size:2rem;margin:0 0 10px;text-shadow:2px 2px 4px rgba(0,0,0,.5);text-transform:capitalize;font-weight:700}.team-selection-header p{color:#ffffffe6;font-size:1.2rem;margin:0;font-weight:400}.survival-selected-team{display:flex;flex-direction:row;justify-content:center;gap:15px;margin-bottom:30px;padding:20px;background:rgba(0,0,0,.3);border:3px solid #ff6600;border-radius:20px;box-sizing:border-box;max-width:fit-content;margin-left:auto;margin-right:auto}.survival-team-slot{width:clamp(120px,13vw,165px);height:auto;min-height:clamp(200px,22vw,270px);border:3px dashed #ff6600;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;transition:all .3s ease;box-sizing:border-box;background:rgba(0,0,0,.4)}.survival-team-slot:hover{border-color:#f83;background:rgba(255,102,0,.1)}.empty-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ffffff80;text-align:center}.empty-slot-content{display:flex;flex-direction:column;align-items:center;gap:10px}.slot-number{font-size:3rem;font-weight:700;color:#f60;opacity:.5}.slot-hint{font-size:1rem;font-style:italic}.selected-hero{width:100%;height:100%;cursor:pointer;border-radius:12px;overflow:hidden;position:relative;background:rgba(0,0,0,.5)}.selected-hero:hover .remove-hero-hint{opacity:1}.selected-hero-image{width:100%;height:clamp(160px,17.6vw,216px);object-fit:cover;border-radius:10px 10px 0 0}.selected-hero-name{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.95);color:#fff;padding:15px 8px;text-align:center;font-weight:700;font-size:1.15rem;border-radius:0 0 9px 9px;text-transform:capitalize}.remove-hero-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(220,53,69,.9);color:#fff;padding:8px 12px;border-radius:8px;font-size:.9rem;font-weight:700;opacity:0;transition:opacity .3s ease;pointer-events:none}.start-battle-container{text-align:center;margin-bottom:30px}.start-battle-btn{background:linear-gradient(135deg,#ff6600 0%,#ff8833 100%);border:none;color:#fff;padding:18px 50px;font-size:1.4rem;font-weight:700;border-radius:15px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px;box-shadow:0 4px 15px #f609}.start-battle-btn:hover{background:linear-gradient(135deg,#ff8833 0%,#ffaa55 100%);transform:scale(1.05);box-shadow:0 0 30px #f60c}.matchmaking-status{background:rgba(0,0,0,.4);border:2px solid #ff6600;border-radius:15px;padding:30px;text-align:center}.waiting-message{margin-bottom:25px}.waiting-message h3{color:#f60;font-size:1.5rem;margin:0 0 10px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.waiting-message p{color:#ffffffe6;font-size:1.1rem;margin:0 0 15px}.loading-dots{display:inline-flex;gap:5px;align-items:center}.loading-dots span{color:#f60;font-size:2rem;font-weight:700;animation:pulse 1.5s infinite}.loading-dots span:nth-child(2){animation-delay:.5s}.loading-dots span:nth-child(3){animation-delay:1s}@keyframes pulse{0%,50%,to{opacity:1}25%,75%{opacity:.3}}.cancel-search-btn{background:rgba(220,53,69,.8);border:2px solid #dc3545;color:#fff;padding:12px 30px;font-size:1.1rem;font-weight:700;border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.cancel-search-btn:hover{background:#dc3545;transform:scale(1.05);box-shadow:0 0 15px #dc354599}.available-heroes-section{flex:1;display:flex;flex-direction:column;overflow:visible;margin-top:-10px}.heroes-grid-container{position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center;padding-top:15px;overflow:visible}.heroes-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,auto);gap:10px;padding:0 50px 20px 10px;justify-items:center;width:90%;max-width:100%;opacity:1;transition:opacity .2s ease-in-out;overflow:visible}.heroes-grid.transitioning{opacity:0}.hero-card.survival-card{width:clamp(156px,12vw,234px);height:auto;min-height:clamp(240px,18.5vw,360px);border:3px solid #ff6600;box-shadow:0 0 15px #f60c;margin:0;opacity:1;transition:opacity .3s ease-in-out,transform .3s ease,border-color .3s ease;cursor:pointer;position:relative;background:linear-gradient(145deg,#ffffff 0%,#f0f0f0 100%);border-radius:12px;padding:0;color:#333;overflow:hidden;display:flex;flex-direction:column}.hero-card.survival-card:hover,.hero-card.survival-card.hovered{border-color:#f83;box-shadow:0 0 20px #f60c;z-index:10;transform:scale(1)!important}.hero-card.survival-card.selected{border-color:#0f0;box-shadow:0 0 25px #0f0c}.hero-card.survival-card .hero-image{width:100%;height:clamp(121px,9.3vw,182px);object-fit:cover;border-radius:clamp(7px,.65vw,10px) clamp(7px,.65vw,10px) 0 0;margin:0;padding:0;display:block;flex-shrink:0}.hero-card.survival-card .hero-card-content{padding:0;margin:0;position:relative;flex:1;display:flex;flex-direction:column;font-weight:700}.selection-indicator{position:absolute;top:10px;right:10px;background:#00ff00;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;box-shadow:0 0 10px #0f0c}.heroes-grid-container .pagination-arrow-overlay{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,102,0,.2)!important;border:3px solid #ff6600!important;color:#f60!important;font-size:1.8rem;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 0 7px #f606!important;font-weight:700;z-index:20;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.heroes-grid-container .pagination-arrow-overlay:hover{background:#ff6600!important;color:#fff!important;transform:translateY(-50%) scale(1.1);box-shadow:0 0 12px #ff660080!important}.heroes-grid-container .pagination-arrow-overlay.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.survival-team-builder .heroes-grid-container .pagination-arrow-overlay.left-arrow{left:10px!important}.survival-team-builder .heroes-grid-container .pagination-arrow-overlay.right-arrow{right:35px!important}.survival-team-builder .heroes-grid-container button.pagination-arrow-overlay.left-arrow{left:10px!important}.survival-team-builder .heroes-grid-container button.pagination-arrow-overlay.right-arrow{right:35px!important}.no-heroes-available{text-align:center;padding:40px;color:#ffffffb3}.no-heroes-available h3{color:#f60;font-size:1.8rem;margin:0 0 15px}.no-heroes-available p{font-size:1.1rem;margin:0}.hero-card.survival-card .hero-tooltip{position:absolute;top:0;left:100%;margin-left:10px;background:rgba(0,0,0,.95);border:2px solid #ff6600;border-radius:8px;padding:12px;color:#fff;z-index:1000;min-width:230px;max-width:270px;box-shadow:0 5px 15px #00000080;font-size:.85rem;line-height:1.4;text-align:left;overflow:visible}.hero-card.survival-card .tooltip-section{margin-bottom:12px}.hero-card.survival-card .tooltip-section:last-child{margin-bottom:0}.hero-card.survival-card .tooltip-section h4{color:#f60;margin:0 0 8px;font-size:1rem;border-bottom:1px solid #ff6600;padding-bottom:4px}.hero-card.survival-card .tooltip-ability,.hero-card.survival-card .tooltip-special{margin-bottom:8px;padding:8px;border-radius:6px}.hero-card.survival-card .tooltip-ability{background:rgba(255,102,0,.15);border-left:3px solid #ff6600}.hero-card.survival-card .tooltip-special{background:rgba(255,193,7,.15);border-left:3px solid #ffc107}.hero-card.survival-card .tooltip-ability-name,.hero-card.survival-card .tooltip-special-name{font-weight:700;margin-bottom:4px}.hero-card.survival-card .tooltip-ability-name{color:#f96}.hero-card.survival-card .tooltip-special-name{color:#ffc107}.hero-card.survival-card .tooltip-ability-description,.hero-card.survival-card .tooltip-special-description{font-size:.85rem;line-height:1.3;color:#fff}.hero-card.survival-card .keyword{text-decoration:underline;cursor:help}.hero-card.survival-card .keyword.poison{color:#28a745}.hero-card.survival-card .keyword.taunt{color:#dc3545}.hero-card.survival-card .keyword.inspiration{color:#ffc107}.hero-card.survival-card .tooltip{position:relative;display:inline-block}.hero-card.survival-card .tooltip .tooltiptext{visibility:hidden;width:200px;background-color:#333;color:#fff;text-align:center;border-radius:6px;padding:8px;position:absolute;z-index:1001;bottom:125%;left:50%;margin-left:-100px;opacity:0;transition:opacity .3s;font-size:.8rem}.hero-card.survival-card .tooltip .tooltiptext:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#333 transparent transparent transparent}.hero-card.survival-card .tooltip:hover .tooltiptext{visibility:visible;opacity:1}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:#f60}.loading-spinner{width:50px;height:50px;border:3px solid rgba(255,102,0,.3);border-top:3px solid #ff6600;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@media (max-width: 1600px){.team-selection-header h2{font-size:1.5rem}.team-selection-header p{font-size:.95rem}.heroes-grid .hero-card.survival-card,.heroes-grid .hero-card.survival-card:hover,.heroes-grid .hero-card.survival-card.hovered{transform:scale(.98);transform-origin:center}}@media (max-width: 1400px){.team-selection-header h2{font-size:1.3rem}.team-selection-header p{font-size:.85rem}.survival-team-slot{max-width:115px}.selected-hero-name{font-size:.85rem;padding:10px 5px}.slot-number{font-size:2.1rem}.slot-hint{font-size:.75rem}.start-battle-btn{font-size:1.1rem;padding:14px 38px}.heroes-grid .hero-card.survival-card,.heroes-grid .hero-card.survival-card:hover,.heroes-grid .hero-card.survival-card.hovered{transform:scale(.95);transform-origin:center}}@media (max-width: 1000px){.team-selection-header h2{font-size:1.15rem}.team-selection-header p{font-size:.8rem}.survival-team-slot{max-width:100px}.selected-hero-name{font-size:.75rem;padding:8px 4px}.slot-number{font-size:1.8rem}.slot-hint{font-size:.7rem}.start-battle-btn{font-size:.95rem;padding:12px 30px}}@media (max-width: 1200px){.survival-split-layout{gap:20px;padding:15px}.team-selection-header h2{font-size:1.2rem}.team-selection-header p{font-size:.85rem}.heroes-grid .hero-card.survival-card,.heroes-grid .hero-card.survival-card:hover,.heroes-grid .hero-card.survival-card.hovered{transform:scale(.92);transform-origin:center}.hero-browser-side{border-right:2px solid #ff6600;padding-right:20px}.hero-browser-header{padding:6px 12px;margin-bottom:5px;margin-top:-15px}.page-indicator{font-size:.85rem}.survival-sort-dropdown{padding:5px 8px;font-size:11px}.team-selection-side{flex:0 0 350px;padding-left:20px;padding-right:0}.survival-selected-team{gap:15px}.survival-team-slot{max-height:220px;max-width:105px}.selected-hero-name{font-size:.8rem;padding:9px 5px}.selected-hero-image{max-height:176px}.heroes-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;padding:0 55px;max-width:700px}.heroes-grid-container .pagination-arrow-overlay{width:45px;height:45px;font-size:1.6rem}.survival-team-builder .heroes-grid-container .pagination-arrow-overlay.left-arrow,.survival-team-builder .heroes-grid-container button.pagination-arrow-overlay.left-arrow{left:-17px!important}.survival-team-builder .heroes-grid-container .pagination-arrow-overlay.right-arrow,.survival-team-builder .heroes-grid-container button.pagination-arrow-overlay.right-arrow{right:-17px!important}}@media (max-width: 900px){.team-selection-header h2{font-size:1.05rem}.team-selection-header p{font-size:.75rem}.survival-team-slot{max-width:90px}.selected-hero-name{font-size:.7rem;padding:7px 4px}.slot-number{font-size:1.6rem}.slot-hint{font-size:.65rem}.start-battle-btn{font-size:.85rem;padding:10px 25px}}@media (max-width: 768px){.survival-split-layout{flex-direction:column;gap:20px;padding:10px}.hero-browser-side{flex:none;border-right:none;border-bottom:2px solid #ff6600;padding-right:0;padding-bottom:20px}.hero-browser-header{flex-direction:column;gap:8px;text-align:center;padding:6px;margin-top:-10px}.sort-controls{justify-content:center}.sort-controls label{font-size:11px}.team-selection-side{flex:none;padding-left:0}.team-selection-header h2{font-size:1.4rem}.team-selection-header p{font-size:.95rem}.survival-selected-team{flex-direction:row;gap:15px;justify-content:center}.survival-team-slot{max-height:200px;max-width:85px}.selected-hero-name{font-size:.7rem;padding:7px 3px}.selected-hero-image{max-height:160px}.heroes-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:15px;padding:0 40px;max-width:600px}.heroes-grid-container .pagination-arrow-overlay{width:40px;height:40px;font-size:1.4rem}.heroes-grid-container .left-arrow,.heroes-grid-container button.left-arrow{left:-12px!important}.heroes-grid-container .right-arrow,.heroes-grid-container button.right-arrow{right:-12px!important}.start-battle-btn{font-size:1.1rem;padding:12px 30px}}@media (max-width: 480px){.team-selection-header h2{font-size:.95rem}.team-selection-header p{font-size:.7rem}.survival-selected-team{padding:15px;gap:10px;flex-wrap:wrap;justify-content:center}.survival-team-slot{max-height:170px;max-width:78px}.selected-hero-name{font-size:.6rem;padding:6px 3px}.selected-hero-image{max-height:136px}.slot-number{font-size:1.4rem}.slot-hint{font-size:.6rem}.start-battle-btn{font-size:.75rem;padding:8px 18px}.heroes-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:10px;padding:0 30px;max-width:400px}}.survival-progress{background:rgba(0,0,0,.4);border:2px solid #ff6600;border-radius:10px;padding:12px;margin-bottom:12px}.survival-progress h3{color:#f60;margin:0 0 10px;font-size:1.2rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.progress-section{margin-bottom:12px}.progress-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.progress-title{font-weight:700;font-size:.95rem}.progress-count{font-size:.8rem;opacity:.8}.progress-bar-container{position:relative;height:16px;border-radius:8px;overflow:hidden}.progress-bar-background{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:10px}.progress-bar{position:absolute;top:0;left:0;height:100%;border-radius:10px;transition:all .5s ease}.wins-bar{background:linear-gradient(90deg,#0066cc 0%,#007bff 50%,#4da6ff 100%);border:1px solid #007bff}.losses-bar{background:linear-gradient(90deg,#cc0000 0%,#ff0000 50%,#ff4d4d 100%);border:1px solid #ff0000}.progress-achievement{text-align:center;color:gold;font-weight:700;font-size:1rem;margin-top:10px;padding:8px;background:rgba(255,215,0,.1);border:1px solid #ffd700;border-radius:8px;animation:achievement-glow 2s ease-in-out infinite alternate}.progress-elimination{text-align:center;color:#ff6b6b;font-weight:700;font-size:1rem;margin-top:10px;padding:8px;background:rgba(255,0,0,.1);border:1px solid #ff6b6b;border-radius:8px;animation:elimination-pulse 1.5s ease-in-out infinite}@keyframes achievement-glow{0%{text-shadow:0 0 5px rgba(255,215,0,.5);box-shadow:0 0 10px #ffd7004d}to{text-shadow:0 0 15px rgba(255,215,0,.8);box-shadow:0 0 20px #ffd70080}}@keyframes elimination-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}@media (max-width: 768px){.survival-progress{padding:15px}.survival-progress h3{font-size:1.3rem}.progress-title{font-size:1rem}.progress-bar-container{height:16px}}@media (max-width: 480px){.survival-progress{padding:12px}.survival-progress h3{font-size:1.2rem}.progress-label{flex-direction:column;align-items:flex-start;gap:5px}.progress-bar-container{height:14px}.progress-achievement,.progress-elimination{font-size:1rem;padding:8px}}.survival-used-heroes{background:rgba(0,0,0,.4);border:2px solid #ff6600;border-radius:10px;padding:12px}.survival-used-heroes h3{color:#f60;margin:0 0 8px;font-size:1.2rem;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.used-heroes-subtitle{color:#ffffffb3;font-size:.9rem;text-align:center;margin-bottom:15px;font-style:italic}.no-used-heroes{text-align:center;padding:12px;color:#fff9}.no-used-heroes p{margin:0 0 6px}.hint{font-size:.8rem;font-style:italic;opacity:.7}.used-heroes-list{max-height:250px;overflow-y:auto;padding-right:5px}.used-heroes-list::-webkit-scrollbar{width:6px}.used-heroes-list::-webkit-scrollbar-track{background:rgba(0,0,0,.3);border-radius:3px}.used-heroes-list::-webkit-scrollbar-thumb{background:#ff6600;border-radius:3px}.used-heroes-list::-webkit-scrollbar-thumb:hover{background:#ff8833}.used-hero-item{display:flex;align-items:center;gap:8px;padding:6px;margin-bottom:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,102,0,.3);border-radius:8px;transition:all .3s ease}.used-hero-item:hover{background:rgba(255,255,255,.1);border-color:#ff660080}.used-hero-image{width:32px;height:32px;border-radius:5px;object-fit:cover;border:1px solid rgba(255,102,0,.5);flex-shrink:0}.used-hero-name{color:#fff;font-weight:700;font-size:.85rem;flex:1;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.used-heroes-count{text-align:center;color:#ffffffb3;font-size:.8rem;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,102,0,.3);font-style:italic}@media (max-width: 768px){.survival-used-heroes{padding:15px}.survival-used-heroes h3{font-size:1.3rem}.used-heroes-list{max-height:200px}.used-hero-item{gap:10px;padding:6px}.used-hero-image{width:35px;height:35px}.used-hero-name{font-size:.9rem}}@media (max-width: 480px){.survival-used-heroes{padding:12px}.survival-used-heroes h3{font-size:1.2rem}.used-heroes-subtitle{font-size:.8rem}.used-heroes-list{max-height:150px}.used-hero-item{gap:8px;padding:5px}.used-hero-image{width:30px;height:30px}.used-hero-name{font-size:.85rem}.used-heroes-count{font-size:.8rem}}.survival-mode-container{position:relative;height:100vh;max-height:100vh;background:#111;background-image:radial-gradient(circle at 20% 30%,rgba(255,165,0,.1) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,0,0,.08) 0%,transparent 50%);display:flex;flex-direction:column;overflow:hidden;color:#fff}.survival-content{display:flex;flex:1;overflow:hidden;min-height:0;height:100%}.survival-btn{padding:10px 20px;border:2px solid;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.survival-btn.primary{background:#ff6600;border-color:#f60;color:#fff}.survival-btn.primary:hover{background:#ff8833;box-shadow:0 0 15px #ff660080}.survival-btn.secondary{background:transparent;border-color:#007bff;color:#007bff}.survival-btn.secondary:hover{background:#007bff;color:#fff;box-shadow:0 0 15px #007bff80}.survival-btn.danger{background:transparent;border-color:#dc3545;color:#dc3545}.survival-btn.danger:hover{background:#dc3545;color:#fff;box-shadow:0 0 15px #dc354580}.survival-sidebar{width:280px;background:rgba(0,0,0,.6);border-right:2px solid #ff6600;padding:20px;overflow-y:auto;flex-shrink:0;max-height:100%;display:flex;flex-direction:column}.survival-mode-title{color:#f60;margin:0 0 20px;font-size:1.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.5);padding-bottom:15px;border-bottom:2px solid rgba(255,102,0,.3)}.survival-sidebar-buttons{display:flex;flex-direction:column;gap:10px;margin-top:20px;padding-top:20px;border-top:2px solid rgba(255,102,0,.3)}.survival-sidebar-buttons .survival-btn{width:100%}.survival-main{flex:1;overflow-y:auto;padding:20px;display:flex;align-items:center;justify-content:center}.survival-end-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:20000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.survival-end-content{background:linear-gradient(135deg,rgba(25,35,55,.95) 0%,rgba(15,25,45,.95) 100%);border:3px solid #ff6600;border-radius:20px;padding:40px;text-align:center;max-width:500px;box-shadow:0 0 30px #f60c}.survival-end-content h2{color:#f60;font-size:2.5rem;margin:0 0 20px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.survival-end-content p{color:#fff;font-size:1.2rem;margin:0 0 30px;line-height:1.5}.survival-victory-points-info{background:rgba(255,165,0,.2);border:2px solid #ff6600;border-radius:10px;padding:15px;margin:20px 0;color:#fc9!important;font-size:1.1rem!important}.survival-end-buttons{display:flex;gap:20px;justify-content:center}@media (max-width: 1400px){.survival-sidebar{width:250px}}@media (max-width: 1200px){.survival-sidebar{width:220px}.survival-header{padding:15px 30px}}@media (max-width: 1000px){.survival-sidebar{width:190px}}@media (max-width: 900px){.survival-sidebar{width:170px}}@media (max-width: 768px){.survival-content{flex-direction:column}.survival-sidebar{width:100%;height:200px;border-right:none;border-bottom:2px solid #ff6600}.survival-header{padding:15px 20px;flex-direction:column;gap:15px}.survival-header h1{font-size:1.5rem}.survival-header-buttons{flex-wrap:wrap;justify-content:center}.survival-end-content{margin:20px;padding:30px}.survival-end-buttons{flex-direction:column;gap:15px}}@media (max-width: 480px){.survival-header{padding:10px 15px}.survival-btn{padding:8px 16px;font-size:.9rem}.survival-end-content{padding:20px}.survival-end-content h2{font-size:2rem}}.survival-battle-transition{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;overflow:hidden}.transition-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,1);opacity:1;transition:opacity .8s ease-out}.survival-battle-transition.fade-out .transition-overlay{opacity:0}.gauntlet-content-container{flex:1;padding:0;display:flex;flex-direction:column;overflow-y:auto;align-items:flex-start}.roster-section{width:100%;max-width:none;padding:0}.roster-section h3{margin:10px 0 15px 12px;font-size:1.5rem;color:#4a9eff;text-align:left;padding-left:0}.roster-row{display:flex;gap:15px;justify-content:flex-start;flex-wrap:wrap;margin-bottom:20px;padding-left:12px}.gauntlet-hero-wrapper{position:relative;cursor:grab;transition:all .3s ease;border-radius:12px;flex:0 0 auto;width:clamp(180px,15vw,220px)}.gauntlet-hero-wrapper:active{cursor:grabbing}.gauntlet-hero-wrapper:hover{transform:translateY(-5px)}.gauntlet-hero-wrapper.in-team{box-shadow:0 0 15px #ffd70080}.gauntlet-hero-wrapper.in-team:after{content:"✓";position:absolute;top:5px;right:5px;background:#ffd700;color:#000;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center;font-weight:700;z-index:10}.gauntlet-hero-wrapper.dead{opacity:.5;cursor:not-allowed}.gauntlet-hero-wrapper.dead:hover{transform:none}.gauntlet-hero-wrapper.temp-res{box-shadow:0 0 15px #9b59b680}.gauntlet-hero-wrapper.selectable{cursor:pointer;animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:0 0 10px #00ff8880}50%{box-shadow:0 0 20px #0f8c}}.gauntlet-hero-wrapper .hero-card{width:100%;margin:0}.temp-badge{position:absolute;top:8px;left:8px;background:#9b59b6;color:#fff;padding:4px 8px;border-radius:5px;font-size:.75rem;font-weight:700;z-index:10}.dead-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;opacity:.8;z-index:10;pointer-events:none}.action-hint{background:rgba(0,255,136,.1);border:2px solid #00ff88;border-radius:8px;padding:15px;text-align:center;font-size:1.1rem;color:#0f8;display:flex;align-items:center;justify-content:space-between}.cancel-action-btn{padding:8px 16px;background:#ff4444;border:none;border-radius:6px;color:#fff;font-weight:700;cursor:pointer}.battle-team-section{width:100%;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:0}.battle-team-section h3{margin:0 0 20px;font-size:1.5rem;color:#f44;text-align:center;width:100%}.team-row{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;width:100%}.team-slot{position:relative;flex:0 0 auto;width:clamp(180px,15vw,220px);min-height:200px;background:rgba(0,0,0,.4);border:3px dashed rgba(255,68,68,.5);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .3s ease}.team-slot.filled{border-style:solid;border-color:gold;background:rgba(255,215,0,.1);min-height:auto}.team-slot .hero-card{width:100%;margin:0}.team-actions{display:flex;flex-direction:column;align-items:center;gap:15px;width:100%;max-width:400px}.slot-number{position:absolute;top:8px;left:8px;width:28px;height:28px;background:#ffd700;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;z-index:10}.empty-slot-text{text-align:center;color:#666;font-size:.9rem}.start-trial-btn{width:100%;max-width:300px;padding:15px 30px;background:linear-gradient(135deg,#dc143c,#ff4444);border:none;border-radius:8px;color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #dc143c66}.start-trial-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #dc143c99}.searching-container{width:100%;text-align:center}.searching-text{font-size:1.2rem;color:#4a9eff;margin-bottom:15px;animation:pulse 2s infinite}.cancel-search-btn{padding:10px 20px;background:#ff4444;border:none;border-radius:6px;color:#fff;font-weight:700;cursor:pointer}.team-hint{width:100%;text-align:center;color:gold;font-size:1.1rem;padding:10px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000}.shop-offer-modal{background:linear-gradient(135deg,#2d2d44,#1a1a2e);border:2px solid #ffd700;border-radius:15px;padding:40px;max-width:700px;max-height:80vh;overflow-y:auto}.shop-offer-modal h2{margin:0 0 30px;color:gold;text-align:center;font-size:2rem}.offer-heroes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:30px}.offer-hero-card{background:rgba(0,0,0,.5);border:2px solid #4a9eff;border-radius:12px;padding:20px;text-align:center}.offer-hero-card img{width:100%;height:150px;object-fit:cover;border-radius:8px;margin-bottom:15px}.offer-hero-card h3{margin:0 0 15px;color:#4a9eff}.offer-stats{display:flex;flex-direction:column;gap:8px;margin-bottom:15px;font-size:.9rem}.select-hero-btn{width:100%;padding:10px;background:linear-gradient(135deg,#4a9eff,#6bb0ff);border:none;border-radius:6px;color:#fff;font-weight:700;cursor:pointer}.modal-actions{display:flex;gap:15px;justify-content:center}.reroll-btn,.close-modal-btn{padding:12px 24px;border:none;border-radius:8px;font-weight:700;cursor:pointer}.reroll-btn{background:linear-gradient(135deg,#9b59b6,#8e44ad);color:#fff}.close-modal-btn{background:#666;color:#fff}.gauntlet-battle-transition{width:100%;min-height:100vh;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);color:#fff;padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center}.battle-result{text-align:center;margin-bottom:50px;animation:fadeIn .5s ease-in}.battle-result h1{font-size:4rem;margin:0 0 20px;text-shadow:0 0 30px currentColor}.battle-result p{font-size:1.5rem;opacity:.9}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.sacrifice-selection{width:100%;max-width:1200px;background:rgba(0,0,0,.5);padding:40px;border-radius:15px;border:2px solid #ff4444}.sacrifice-selection h2{text-align:center;color:#f66;font-size:2rem;margin-bottom:30px}.hero-offer-section{width:100%;max-width:1000px;background:rgba(0,0,0,.5);padding:40px;border-radius:15px;border:2px solid #4a9eff;animation:slideUp .5s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-offer-section h2{text-align:center;color:#4a9eff;font-size:2rem;margin-bottom:30px}.hero-offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-bottom:30px}.hero-offer-card{background:rgba(0,0,0,.6);border:2px solid #4a9eff;border-radius:12px;padding:20px;cursor:pointer;transition:all .3s ease;text-align:center}.hero-offer-card:hover{transform:scale(1.05);border-color:gold;box-shadow:0 0 30px #ffd70080}.hero-offer-card img{width:100%;height:200px;object-fit:cover;border-radius:10px;margin-bottom:15px}.hero-offer-card h3{margin:15px 0;font-size:1.5rem;color:#4a9eff}.hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:15px}.hero-stats p{margin:5px 0;padding:8px;background:rgba(74,158,255,.2);border-radius:6px;font-size:1rem}.offer-actions{display:flex;gap:20px;justify-content:center;align-items:center}.reroll-button{padding:15px 30px;background:linear-gradient(135deg,#9b59b6,#8e44ad);color:#fff;border:none;border-radius:10px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease}.reroll-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #9b59b666}.skip-button{padding:15px 30px;background:linear-gradient(135deg,#777,#555);color:#fff;border:none;border-radius:10px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease}.skip-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #7776}.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px;margin-bottom:20px}.roster-hero-card{background:rgba(0,0,0,.6);border:2px solid #4a9eff;border-radius:10px;padding:12px;cursor:pointer;transition:all .3s ease;text-align:center}.roster-hero-card:hover{transform:translateY(-5px);box-shadow:0 5px 20px #f446;border-color:#f44}.roster-hero-card.dead{opacity:.5;border-color:#666;cursor:not-allowed}.roster-hero-card img{width:100%;height:120px;object-fit:cover;border-radius:8px;margin-bottom:8px}.roster-hero-card h4{margin:8px 0;font-size:1rem;color:#fff}.hero-hp{font-size:.9rem;color:#0f8;margin-top:5px}.cancel-button{width:100%;padding:12px;background:#666;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease}.cancel-button:hover{background:#888}.gauntlet-mode{display:flex;min-height:100vh;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);color:#fff;overflow:hidden}.gauntlet-sidebar{width:clamp(200px,18vw,300px);background:rgba(0,0,0,.5);border-right:2px solid rgba(220,20,60,.3);padding:20px;display:flex;flex-direction:column;gap:20px;overflow-y:auto}.gauntlet-sidebar .sidebar-header{text-align:center;padding-bottom:15px;border-bottom:2px solid rgba(220,20,60,.5)}.gauntlet-sidebar .sidebar-header h2{margin:0;font-size:1.5rem;color:#dc143c;text-shadow:0 0 10px rgba(220,20,60,.5)}.mode-subtitle{margin-top:10px;font-size:1.1rem;color:gold}.stats-section{display:flex;flex-direction:column;gap:12px}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:10px;background:rgba(255,255,255,.05);border-radius:8px;border-left:3px solid #dc143c}.stat-item.best-trial{background:linear-gradient(90deg,rgba(255,215,0,.1),transparent);border-left-color:gold}.stat-label{color:#aaa;font-size:.85rem}.stat-value{font-size:1rem;font-weight:700;color:#fff}.dead-heroes-section{flex:1;display:flex;flex-direction:column;min-height:200px}.dead-heroes-section h3{margin:0 0 12px;font-size:1.1rem;color:#f66}.dead-heroes-list{flex:1;background:rgba(0,0,0,.3);border-radius:8px;padding:12px;max-height:300px;overflow-y:auto}.dead-hero-item{padding:6px 8px;margin-bottom:6px;background:rgba(255,0,0,.1);border-left:3px solid #ff4444;border-radius:4px;font-size:.85rem}.no-dead-heroes{color:#666;font-style:italic;text-align:center;padding:15px;font-size:.85rem}.return-to-lobby-btn{padding:12px;background:linear-gradient(135deg,#4a9eff,#6bb0ff);border:none;border-radius:8px;color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .3s ease;margin-top:15px;margin-bottom:10px}.return-to-lobby-btn:hover{background:linear-gradient(135deg,#6bb0ff,#8dc6ff);transform:translateY(-2px)}.abandon-run-btn{padding:12px;background:linear-gradient(135deg,#666,#444);border:none;border-radius:8px;color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .3s ease}.abandon-run-btn:hover{background:linear-gradient(135deg,#888,#666);transform:translateY(-2px)}.gauntlet-actions{width:clamp(123px,15vw,203px)!important;background:rgba(0,0,0,.5);border-left:2px solid rgba(220,20,60,.3);margin-left:-50px;padding:20px;display:flex;flex-direction:column;gap:15px;overflow-y:auto}.gauntlet-actions h3{margin:0;font-size:1.3rem;color:gold;text-align:center;border-bottom:2px solid rgba(255,215,0,.3);padding-bottom:12px}.actions-remaining{text-align:center;padding:8px;background:rgba(255,215,0,.1);border-radius:8px;font-size:.9rem}.actions-available{color:gold;font-weight:700}.actions-depleted{color:#f66}.shop-actions{display:flex;flex-direction:column;gap:12px}.shop-action-btn{padding:12px;background:rgba(0,0,0,.5);border:2px solid rgba(74,158,255,.5);border-radius:10px;color:#fff;text-align:center;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;gap:4px}.shop-action-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #4a9eff66;border-color:#4a9eff}.shop-action-btn:disabled{opacity:.4;cursor:not-allowed}.shop-action-btn.heal{border-color:#00ff8880}.shop-action-btn.heal:hover:not(:disabled){border-color:#0f8;box-shadow:0 4px 15px #0f86}.shop-action-btn.resurrect{border-color:#9b59b680}.shop-action-btn.resurrect:hover:not(:disabled){border-color:#9b59b6;box-shadow:0 4px 15px #9b59b666}.shop-action-btn.buy-pack{border-color:#ffd70080}.shop-action-btn.buy-pack:hover:not(:disabled){border-color:gold;box-shadow:0 4px 15px #ffd70066}.shop-action-btn.skip{border-color:#3498db80}.shop-action-btn.skip:hover:not(:disabled){border-color:#3498db;box-shadow:0 4px 15px #3498db66}.action-icon{font-size:1.8rem}.action-name{font-size:.95rem;font-weight:700}.action-desc{font-size:.75rem;color:#aaa}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:1000}.abandon-modal{background:linear-gradient(135deg,#2d2d44 0%,#1a1a2e 100%);padding:30px;border-radius:15px;border:2px solid #ff4444;max-width:400px;text-align:center}.abandon-modal h2{margin-top:0;color:#f66;font-size:1.5rem}.modal-buttons{display:flex;gap:15px;margin-top:25px;justify-content:center}.confirm-button{padding:10px 25px;background:#ff4444;color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .3s ease}.confirm-button:hover{background:#ff6666;transform:scale(1.05)}.cancel-button{padding:10px 25px;background:#4a9eff;color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .3s ease}.cancel-button:hover{background:#6bb0ff;transform:scale(1.05)}.gauntlet-complete-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center}.gauntlet-complete-screen h1{font-size:3rem;margin-bottom:30px;text-shadow:0 0 20px #ffd700}.final-stats{background:rgba(0,0,0,.5);padding:40px;border-radius:15px;border:2px solid #4a9eff;margin-bottom:30px}.final-stats h2{font-size:2rem;color:#4a9eff;margin-bottom:20px}.rewards-summary{margin:20px 0;font-size:1.3rem}.rewards-summary p{margin:10px 0}.best-trial{margin-top:20px;font-size:1.1rem;color:gold}.complete-buttons{display:flex;gap:20px;justify-content:center}.return-button{padding:15px 40px;background:linear-gradient(135deg,#4a9eff,#6bb0ff);color:#fff;border:none;border-radius:10px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #4a9eff66}.return-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4a9eff99}.login-page{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:var(--login-background-image, linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)),linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow-y:auto;padding:20px 0}.login-background{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.1;z-index:0}.background-heroes{position:relative;width:100%;height:100%}.hero-silhouette{position:absolute;background:rgba(255,255,255,.1);border-radius:50%;animation:float 6s ease-in-out infinite}.hero-1{width:150px;height:150px;top:20%;left:10%;animation-delay:0s}.hero-2{width:120px;height:120px;top:60%;right:15%;animation-delay:2s}.hero-3{width:100px;height:100px;top:30%;left:70%;animation-delay:4s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}.login-container{position:relative;z-index:1;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:40px;box-shadow:0 20px 40px #0000004d;width:100%;max-width:450px;margin:20px;border:1px solid rgba(255,255,255,.2);transform:translate(135px)}.login-header{text-align:center;margin-bottom:30px}.game-title{font-size:2.5rem;font-weight:700;color:#1a1a2e;margin:0;text-shadow:2px 2px 4px rgba(0,0,0,.1);background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-subtitle{font-size:1.1rem;color:#666;margin:5px 0 0;font-style:italic}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:600;color:#333;font-size:.95rem}.form-input{padding:12px 16px;border:2px solid #e1e5e9;border-radius:10px;font-size:1rem;transition:all .3s ease;background:white}.form-input:focus{outline:none;border-color:#16213e;box-shadow:0 0 0 3px #16213e1a}.form-input:disabled{background-color:#f8f9fa;cursor:not-allowed}.error-message{background:#ff4757;color:#fff;padding:12px 16px;border-radius:8px;font-size:.9rem;text-align:left;margin:10px 0;white-space:pre-line;line-height:1.4}.form-actions{display:flex;flex-direction:column;gap:20px;margin-top:10px}.login-button{background:linear-gradient(135deg,#16213e 0%,#0f3460 100%);color:#fff;border:none;padding:14px 20px;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #16213e4d}.login-button:active{transform:translateY(0)}.login-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.loading-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.register-section{text-align:center;padding-top:15px;border-top:1px solid #e1e5e9}.register-section p{margin:0 0 10px;color:#666;font-size:.95rem}.register-link{background:none;border:2px solid #16213e;color:#16213e;padding:10px 20px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.register-link:hover:not(:disabled){background:#16213e;color:#fff;transform:translateY(-1px)}.register-link:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 600px){.login-container{margin:10px;padding:30px 25px;max-width:none}.game-title{font-size:2rem}}@media (max-height: 700px){.login-page{align-items:flex-start;padding:10px 0}.login-container{margin:10px;padding:25px}}@media (max-height: 600px){.login-container{padding:20px;margin:10px auto}.game-title{font-size:1.8rem}.login-form{gap:15px}}.remember-me-group{margin-bottom:15px}.remember-me-label{display:flex;align-items:center;font-size:.95rem;color:#555;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:0}.remember-me-checkbox{position:absolute;opacity:0;cursor:pointer}.checkbox-custom{position:relative;display:inline-block;width:18px;height:18px;background:white;border:2px solid #ddd;border-radius:4px;margin-right:10px;transition:all .3s ease;flex-shrink:0}.checkbox-custom:after{content:"";position:absolute;left:5px;top:2px;width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .2s ease}.remember-me-checkbox:checked+.checkbox-custom{background:#16213e;border-color:#16213e}.remember-me-checkbox:checked+.checkbox-custom:after{transform:rotate(45deg) scale(1)}.remember-me-label:hover .checkbox-custom{border-color:#16213e;box-shadow:0 0 5px #16213e4d}.remember-me-checkbox:disabled+.checkbox-custom{opacity:.5;cursor:not-allowed}.remember-me-label:has(.remember-me-checkbox:disabled){opacity:.5;cursor:not-allowed}.auto-filled-notice{font-size:.8rem;color:#28a745;margin-top:5px;display:flex;align-items:center;gap:5px;opacity:.8}.admin-quick-login{margin-bottom:20px;text-align:center}.admin-login-btn{background:linear-gradient(135deg,#8a2be2 0%,#6a1bb2 100%);border:2px solid #a855f7;color:#fff;padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;width:100%;display:flex;align-items:center;justify-content:center;gap:8px}.admin-login-btn:hover:not(:disabled){background:linear-gradient(135deg,#9d4edd 0%,#7b2cbf 100%);transform:translateY(-2px);box-shadow:0 4px 12px #8a2be24d}.admin-login-btn:disabled{opacity:.6;cursor:not-allowed}.admin-login-hint{font-size:.75rem;color:#666;margin-top:5px;font-style:italic}.register-page{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:var(--register-background-image, linear-gradient(135deg, #0f3460 0%, #16213e 50%, #1a1a2e 100%)),linear-gradient(135deg,#0f3460 0%,#16213e 50%,#1a1a2e 100%);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow-y:auto;padding:20px 0}.register-background{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.08;z-index:0}.background-heroes .hero-4{position:absolute;background:rgba(255,255,255,.1);border-radius:50%;width:80px;height:80px;top:70%;left:20%;animation:float 8s ease-in-out infinite;animation-delay:6s}.register-container{position:relative;z-index:1;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:40px;box-shadow:0 20px 40px #0000004d;width:100%;max-width:500px;margin:20px;border:1px solid rgba(255,255,255,.2);transform:translate(135px)}.register-header{text-align:center;margin-bottom:30px}.register-form{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}.form-hint{font-size:.8rem;color:#666;margin-top:4px;font-style:italic}.success-message{background:#2ed573;color:#fff;padding:12px 16px;border-radius:8px;font-size:.9rem;text-align:center;margin:10px 0}.register-button{background:linear-gradient(135deg,#0f3460 0%,#16213e 100%);color:#fff;border:none;padding:14px 20px;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px}.register-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #0f34604d}.register-button:active{transform:translateY(0)}.register-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.back-button{background:none;border:2px solid #666;color:#666;padding:12px 20px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.back-button:hover:not(:disabled){background:#666;color:#fff;transform:translateY(-1px)}.back-button:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 600px){.register-container{margin:10px;padding:30px 25px;max-width:none}.game-title{font-size:2rem}}@media (max-height: 700px){.register-page{align-items:flex-start;padding:10px 0}.register-container{margin:10px;padding:25px}}@media (max-height: 600px){.register-container{padding:20px;margin:10px auto}.game-title{font-size:1.8rem}.register-form{gap:15px}}body,html{margin:0;padding:0;overflow:auto;height:100vh}.App{min-height:100vh;color:#fff;overflow:auto}.app-layout{display:flex;min-height:100vh;overflow:auto}.game-sidebar{width:clamp(200px,18vw,300px);background:rgba(0,0,0,.8);border-right:2px solid #007bff;padding:0;overflow-y:auto;overflow-x:hidden;flex-shrink:0;max-height:100vh;transition:width .3s ease}@media (max-width: 1400px){.game-sidebar{width:clamp(180px,16vw,250px)}}@media (max-width: 1200px){.game-sidebar{width:clamp(160px,14vw,220px)}}@media (max-width: 1000px){.game-sidebar{width:clamp(140px,12vw,200px)}}.game-sidebar>*{padding:clamp(10px,1.5vw,20px)}.sidebar-header h2{margin:0 0 clamp(10px,1.5vw,20px) 0;padding:clamp(10px,1.5vw,20px) clamp(10px,1.5vw,20px) 0px clamp(10px,1.5vw,20px);font-size:clamp(1.2rem,2vw,1.8rem);text-shadow:2px 2px 4px rgba(0,0,0,.5);color:#007bff;text-align:center}.game-content{flex:1;padding:0;text-align:center;margin-right:0}.connection-status{background:#ffc107;color:#000;padding:6px 12px;border-radius:4px;margin-top:8px;display:block;font-size:.9rem;text-align:center}.waiting{font-size:1.5rem;margin-top:2rem}.game-ended{background:rgba(255,255,255,.1);padding:2rem;border-radius:12px;margin:2rem auto;max-width:400px}.game-ended h2{margin-top:0;font-size:2.5rem}.game-over-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.game-over-modal{background:linear-gradient(135deg,rgba(30,45,70,.95) 0%,rgba(20,35,60,.98) 100%);border:3px solid rgba(0,123,255,.7);border-radius:clamp(12px,1.5vw,20px);padding:0;max-width:clamp(350px,40vw,500px);width:90%;box-shadow:0 25px 50px #000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;overflow:hidden}.game-over-content{padding:clamp(25px,3vw,40px) clamp(20px,2.5vw,30px)}.game-over-title{font-size:clamp(2rem,3vw,3rem);font-weight:700;margin:0 0 clamp(12px,1.5vw,20px) 0;text-shadow:2px 2px 4px rgba(0,0,0,.7);animation:titleGlow 2s ease-in-out infinite alternate}.game-over-title.winner{color:#28a745;border-bottom:3px solid #28a745;padding-bottom:15px}.game-over-title.loser{color:#dc3545;border-bottom:3px solid #dc3545;padding-bottom:15px}@keyframes titleGlow{0%{filter:drop-shadow(0 0 10px currentColor)}to{filter:drop-shadow(0 0 20px currentColor)}}.game-over-message{color:#ffffffe6;font-size:clamp(1rem,1.2vw,1.2rem);line-height:1.5;margin:clamp(12px,1.5vw,20px) 0 clamp(20px,2.5vw,30px) 0}.return-to-lobby-button{background:linear-gradient(135deg,#007bff 0%,#0056b3 100%);color:#fff;border:none;border-radius:clamp(8px,1vw,12px);padding:clamp(10px,1.2vw,15px) clamp(20px,2.5vw,30px);font-weight:700;font-size:clamp(.9rem,1vw,1.1rem);cursor:pointer;transition:all .3s ease;min-width:clamp(140px,15vw,180px);box-shadow:0 4px 15px #007bff4d}.return-to-lobby-button:hover{background:linear-gradient(135deg,#0056b3 0%,#004085 100%);transform:translateY(-2px);box-shadow:0 6px 20px #007bff80}@media (max-width: 1600px){.battle-phase{transform:scale(1);transform-origin:top center}body,.App{font-size:15px}}@media (max-width: 1400px){.battle-phase{transform:scale(1);transform-origin:top center}body,.App{font-size:14px}}@media (max-width: 1200px){.battle-phase{transform:scale(.995);transform-origin:top center}body,.App{font-size:13px}}@media (max-width: 768px){.game-over-modal{width:95%;margin:20px}.game-over-title{font-size:2.5rem}.game-over-content{padding:30px 20px}.game-over-message{font-size:1.1rem}.draft-phase .teams-display .hero-card{max-height:240px}}@media (max-width: 480px){.draft-phase .teams-display .hero-card{max-height:220px}}.error{background:#dc3545;color:#fff;padding:1rem;border-radius:4px;margin:1rem 0}.turn-indicator{font-size:clamp(.9rem,1.1vw,1.2rem);font-weight:700;padding:clamp(8px,.8vw,12px) clamp(12px,1.2vw,20px);border-radius:clamp(5px,.5vw,8px);margin:clamp(10px,1vw,16px) 0;text-align:center;animation:pulse 2s infinite}.turn-indicator.my-turn{background:rgba(40,167,69,.3);border:2px solid #28a745;color:#28a745}.turn-indicator.opponent-turn{background:rgba(220,53,69,.3);border:2px solid #dc3545;color:#dc3545}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.hero-card{background:linear-gradient(145deg,#ffffff 0%,#f0f0f0 100%);border:2px solid #ddd;border-radius:clamp(8px,.8vw,12px);padding:0;margin:clamp(3px,.4vw,6px);cursor:pointer;transition:all .3s ease;color:#333;width:clamp(156px,12vw,234px);height:clamp(240px,18.5vw,360px);position:relative;height:100%;max-height:350px;display:flex;flex-direction:column;box-sizing:border-box}.hero-card:hover:not(.shop-hero-card){overflow:visible}.hero-card:hover:not(.shop-hero-card){transform:scale(1.1);z-index:15;box-shadow:0 10px 25px #0000004d;border-color:#007bff;display:flex;flex-direction:column}.hero-card.selected{border-color:#28a745;background:linear-gradient(145deg,#d4edda 0%,#c3e6cb 100%);display:flex;flex-direction:column}.hero-card.banned{opacity:.3;filter:grayscale(100%);display:flex;flex-direction:column}.hero-card.enemy{border-color:#dc3545;display:flex;flex-direction:column}.hero-card.ally{border-color:#28a745;display:flex;flex-direction:column}.hero-card.current-turn{border:2px solid #ffd700!important}.hero-card.dead{opacity:.3;filter:grayscale(80%);pointer-events:none;border-color:#6c757d;background:rgba(108,117,125,.1);display:flex;flex-direction:column}.hero-card.selectable{border-color:#28a745;cursor:pointer;display:flex;flex-direction:column}.hero-card.selectable:hover:not(.shop-hero-card){border-color:#007bff;transform:scale(1.1);z-index:15;display:flex;flex-direction:column}.hero-card.hovered{z-index:15;display:flex;flex-direction:column}.hero-image{width:100%;height:clamp(121px,9.3vw,182px);object-fit:cover;border-radius:clamp(7px,.65vw,10px) clamp(7px,.65vw,10px) 0 0;margin:0;padding:0;display:block;flex-shrink:0}@keyframes cardFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(0)}}.hero-image.card-flip{animation:cardFlip .6s ease-in-out}.hero-card-content{padding:0;margin:0;position:relative;flex:1;display:flex;flex-direction:column;font-weight:700}.hero-stats{background:rgba(0,0,0,.8);color:#fff;padding:clamp(6px,.6vw,10px) clamp(8px,.8vw,12px) clamp(5px,.5vw,8px) clamp(8px,.8vw,12px);border-radius:0 0 clamp(7px,.65vw,10px) clamp(7px,.65vw,10px);font-size:clamp(.7rem,.8vw,.9rem);margin:-1px 0 0;position:relative;width:100%;box-sizing:border-box;flex:1;display:flex;flex-direction:column;justify-content:flex-start}.hero-stats .hero-name{font-weight:700;font-size:clamp(.85rem,1vw,1.1rem);margin-bottom:clamp(3px,.35vw,5px);text-align:center;color:#fff;padding-bottom:clamp(3px,.35vw,5px);border-bottom:1px solid rgba(255,255,255,.3)}.hero-stats-row{display:flex;align-items:center;margin-bottom:clamp(2px,.25vw,3px);font-size:clamp(.65rem,.75vw,.85rem);font-weight:700;line-height:1.2}.hero-stats-row:last-child{margin-bottom:0}.stat-icon{width:clamp(12px,1vw,16px);height:clamp(12px,1vw,16px);margin-right:clamp(5px,.5vw,8px);flex-shrink:0}.hero-tooltip{position:absolute;top:0;left:100%;margin-left:clamp(5px,.7vw,10px);background:rgba(0,0,0,.95);border:2px solid #007bff;border-radius:clamp(5px,.5vw,8px);padding:clamp(8px,.8vw,12px);min-width:clamp(180px,15vw,230px);max-width:clamp(210px,18vw,270px);z-index:9999;text-align:left;font-size:clamp(.65rem,.75vw,.85rem);line-height:1.4;box-shadow:0 5px 15px #00000080;overflow:visible}.hero-tooltip.tooltip-left{left:auto;right:100%;margin-left:0;margin-right:clamp(5px,.7vw,10px)}.hero-tooltip.tooltip-right{left:100%;right:auto;margin-left:clamp(5px,.7vw,10px);margin-right:0}.hero-tooltip.tooltip-top{left:50%;right:auto;top:auto;bottom:100%;transform:translate(-50%);margin-left:0;margin-right:0;margin-bottom:clamp(5px,.7vw,10px)}.tooltip-section{margin-bottom:12px}.tooltip-section:last-child{margin-bottom:0}.tooltip-section h4{color:#007bff;margin:0 0 8px;font-size:1rem;border-bottom:1px solid #007bff;padding-bottom:4px}.tooltip-ability,.tooltip-special{margin-bottom:8px;padding:8px;border-radius:6px}.tooltip-ability{background:rgba(0,123,255,.15);border-left:3px solid #007bff}.tooltip-special{background:rgba(255,193,7,.15);border-left:3px solid #ffc107}.tooltip-ability-name,.tooltip-special-name{font-weight:700;margin-bottom:4px}.tooltip-ability-name{color:#66b3ff}.tooltip-special-name{color:#ffc107}.tooltip-ability-description,.tooltip-special-description{font-size:.85rem;line-height:1.3;color:#fff}.hero-special-name{font-weight:700;color:#e68900}.status-effects-buffs{position:absolute;top:clamp(5px,.5vw,8px);left:clamp(5px,.5vw,8px);display:flex;flex-direction:column;gap:clamp(2px,.3vw,4px);align-items:flex-start;z-index:10}.status-effects-debuffs{position:absolute;top:clamp(5px,.5vw,8px);right:clamp(5px,.5vw,8px);display:flex;flex-direction:column;gap:clamp(3px,.4vw,5px);align-items:flex-end;z-index:10}.status-effect{background:rgba(0,0,0,.8);color:#fff;padding:clamp(2px,.25vw,3px) clamp(5px,.5vw,8px);border-radius:clamp(10px,1vw,15px);font-size:clamp(.6rem,.8vw,.91rem);font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000004d;border:1px solid rgba(255,255,255,.2)}.status-effect.beast-active{background:linear-gradient(135deg,#28a745 0%,#1e7e34 100%);border-color:#1e7e34;box-shadow:0 2px 6px #28a74566}.status-effect.totem-count{background:linear-gradient(135deg,rgba(139,69,19,.95) 0%,rgba(101,50,14,.95) 100%);color:#fff;border-color:#8b4513;box-shadow:0 2px 6px #8b451380}.status-effect.inspiration{background:linear-gradient(135deg,#ffc107 0%,#e0a800 100%);color:#000;border-color:#e0a800;box-shadow:0 2px 6px #ffc10766}.status-effect.damage-stacks{background:linear-gradient(135deg,#28a745 0%,#1e7e34 100%);color:#fff;border-color:#1e7e34;box-shadow:0 2px 6px #28a74566}.status-effect.untargetable{background:linear-gradient(135deg,#17a2b8 0%,#117a8b 100%);border-color:#117a8b;box-shadow:0 2px 6px #17a2b866}.status-effect.buff{background:linear-gradient(135deg,#28a745 0%,#1e7e34 100%);border-color:#1e7e34;box-shadow:0 2px 6px #28a74566}.status-effect.poison{background:linear-gradient(135deg,#28a745 0%,#1e7e34 100%);border-color:#1e7e34;box-shadow:0 2px 6px #28a74566;transition:all .3s ease}@keyframes poisonIncrease{0%{box-shadow:0 2px 6px #28a74566}50%{box-shadow:0 0 20px #28a745,0 0 30px #28a745cc;transform:scale(1.15)}to{box-shadow:0 2px 6px #28a74566}}.status-effect.poison.poison-glow-increase{animation:poisonIncrease .8s ease-in-out}@keyframes poisonCleanse{0%{box-shadow:0 2px 6px #28a74566;background:linear-gradient(135deg,#28a745 0%,#1e7e34 100%)}50%{box-shadow:0 0 20px #00bfff,0 0 30px #00bfffcc;background:linear-gradient(135deg,#00bfff 0%,#0080ff 100%);transform:scale(1.15)}to{box-shadow:0 0 15px #00bfff99;background:linear-gradient(135deg,#00bfff 0%,#0080ff 100%);opacity:.7}}.status-effect.poison.poison-glow-cleanse{animation:poisonCleanse .8s ease-in-out}.status-effect.taunt{background:linear-gradient(135deg,#dc3545 0%,#bd2130 100%);border-color:#bd2130;box-shadow:0 2px 6px #dc354566}.status-effect.silenced{background:linear-gradient(135deg,#6c757d 0%,#545b62 100%);border-color:#545b62;box-shadow:0 2px 6px #6c757d66}.status-effect.disable-attack{background:linear-gradient(135deg,#dc3545 0%,#bd2130 100%);border-color:#bd2130;box-shadow:0 2px 6px #dc354566}.status-effect.bribed{background:linear-gradient(135deg,#ffc107 0%,#e0a800 100%);color:#000;border-color:#e0a800;box-shadow:0 2px 6px #ffc10766}.status-effect.grant-advantage,.status-effect.ride-down-debuff,.status-effect.debuff{background:linear-gradient(135deg,#dc3545 0%,#bd2130 100%);border-color:#bd2130;box-shadow:0 2px 6px #dc354566}.companions{position:absolute;top:clamp(26px,2.5vw,40px);left:clamp(5px,.5vw,8px);display:flex;gap:clamp(2px,.3vw,4px);z-index:5}.companion{background:rgba(0,150,0,.9);color:#fff;padding:clamp(1px,.15vw,2px) clamp(4px,.4vw,6px);border-radius:clamp(3px,.3vw,4px);font-size:clamp(.6rem,.7vw,.8rem);font-weight:700;border:1px solid #006600;box-shadow:0 2px 4px #0000004d}.shaman-totems{position:absolute;top:clamp(5px,.5vw,8px);left:clamp(5px,.5vw,8px);z-index:10}.totem-counter{background:rgba(139,69,19,.9);color:#fff;padding:clamp(3px,.3vw,4px) clamp(5px,.5vw,8px);border-radius:clamp(4px,.4vw,6px);font-size:clamp(.7rem,.8vw,.9rem);font-weight:700;border:2px solid #8B4513;box-shadow:0 2px 6px #0006;display:inline-block}.tooltip{position:relative;display:inline-block}.tooltip .tooltiptext{visibility:hidden;width:200px;background-color:#333;color:#fff;text-align:center;border-radius:6px;padding:8px;position:absolute;z-index:1000;bottom:125%;left:50%;margin-left:-100px;opacity:0;transition:opacity .3s;font-size:.8rem}.tooltip .tooltiptext:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#333 transparent transparent transparent}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}.status-effect-tooltip{position:relative;display:inline-block}.status-effect-tooltip .status-tooltip-text{visibility:hidden;position:absolute;top:125%;right:0;background:linear-gradient(135deg,rgba(30,45,70,.98) 0%,rgba(20,35,60,.99) 100%);color:#fff;padding:12px 16px;border-radius:12px;font-size:.85rem;font-weight:500;line-height:1.4;white-space:nowrap;z-index:1100;box-shadow:0 8px 32px #0000004d,0 2px 8px #0003;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .2s ease-out,visibility .2s ease-out;pointer-events:none;min-width:200px;max-width:300px;word-wrap:break-word;white-space:normal;text-align:left}.status-effect-tooltip .status-tooltip-text:after{content:"";position:absolute;bottom:100%;right:20px;margin-bottom:-1px;border-width:6px;border-style:solid;border-color:transparent transparent rgba(30,45,70,.98) transparent}.status-effect-tooltip:hover .status-tooltip-text{visibility:visible;opacity:1}.status-effect:hover{transform:scale(1.05);box-shadow:0 4px 12px #0000004d;z-index:10}.keyword{text-decoration:underline;cursor:help}.keyword.poison{color:#28a745}.keyword.taunt{color:#dc3545}.keyword.inspiration{color:#ffc107}.game-board{display:flex;flex-direction:column;height:100vh;padding:0;overflow:hidden}.game-lobby{display:flex;justify-content:center;align-items:center;min-height:80vh;padding:2rem}.lobby-content{background:rgba(255,255,255,.1);padding:3rem;border-radius:16px;text-align:center;max-width:800px;width:100%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #0000004d}.game-title{margin:0 0 3rem;font-size:3.5rem;font-weight:700;background:linear-gradient(45deg,#007bff,#28a745);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.mode-selection{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}.mode-option{background:rgba(255,255,255,.05);padding:2rem;border-radius:12px;border:2px solid transparent;transition:all .3s ease}.mode-option:hover{border-color:#007bff;background:rgba(255,255,255,.1);transform:translateY(-5px)}.mode-option h3{margin-top:0;font-size:1.8rem;color:#007bff;margin-bottom:1rem}.mode-option p{font-size:1.1rem;margin-bottom:1.5rem;color:#e0e0e0}.mode-option ul{text-align:left;margin:1.5rem 0;padding-left:1.5rem}.mode-option li{margin-bottom:.5rem;color:#ccc}.mode-button{background:linear-gradient(45deg,#007bff,#0056b3);color:#fff;padding:15px 30px;font-size:1.2rem;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;width:100%;margin-top:1rem}.mode-button:hover:not(:disabled){background:linear-gradient(45deg,#0056b3,#004085);transform:translateY(-2px);box-shadow:0 6px 20px #007bff66}.mode-button:disabled{background:#6c757d;cursor:not-allowed;transform:none;box-shadow:none}.random-button{background:linear-gradient(45deg,#28a745,#1e7e34)}.random-button:hover:not(:disabled){background:linear-gradient(45deg,#1e7e34,#155724);box-shadow:0 6px 20px #28a74566}.game-rules{background:rgba(0,0,0,.2);padding:1.5rem;border-radius:8px;margin-top:2rem;text-align:left}.game-rules h3{margin-top:0;text-align:center}.game-rules ul{margin:0;padding-left:1.5rem}.game-rules li{margin-bottom:.5rem}.draft-phase{padding:clamp(5px,.8vw,10px);max-height:100vh;overflow-y:auto;overflow-x:hidden;position:relative}.abandon-draft-button{width:100%;padding:clamp(10px,1.2vw,12px);background:rgba(255,50,50,.12);border:1.5px solid rgba(255,70,70,.3);border-radius:8px;color:#ff6b6b;font-size:clamp(.75rem,.9vw,.9rem);font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:clamp(12px,1.4vw,16px);text-transform:uppercase;letter-spacing:.3px}.abandon-draft-button:hover{background:rgba(255,50,50,.2);border-color:#ff464680;color:#f88;transform:translateY(-1px);box-shadow:0 4px 12px #ff32324d}.abandon-draft-button:active{transform:translateY(0);box-shadow:0 2px 6px #ff323233}.setup-phase{position:relative}.draft-cards{display:flex;justify-content:center;gap:clamp(6px,.8vw,12px);flex-wrap:wrap;margin:0 0 clamp(.5rem,.8vw,1rem) 0;padding-top:0}.draft-phase .draft-cards.ban-phase{display:flex;flex-direction:row;gap:clamp(8px,1vw,12px);justify-content:center;align-items:center;max-width:100%;margin:clamp(.2rem,.3vw,.4rem) auto clamp(.5rem,.8vw,1rem) auto;padding:.5rem 20px 0;flex-wrap:nowrap}.draft-phase .draft-cards.pick-phase{margin-top:0;padding-top:0}.draft-phase .draft-cards.ban-phase .ban-row-1,.draft-phase .draft-cards.ban-phase .ban-row-2{display:contents}.draft-actions{display:flex;justify-content:center;gap:clamp(6px,.8vw,10px);margin:clamp(.4rem,.8vw,.8rem) 0}.player-matchup{text-align:center;padding:clamp(.3rem,.8vw,.6rem);margin-bottom:clamp(.2rem,.4vw,.4rem);font-size:clamp(1rem,1.2vw,1.3rem);font-weight:700;background:rgba(255,255,255,.05);border-radius:6px;display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,1vw,1.2rem)}.player-matchup .player-name{color:#4a9eff;text-shadow:0 0 10px rgba(74,158,255,.5)}.player-matchup .opponent-name{color:#ff6b6b;text-shadow:0 0 10px rgba(255,107,107,.5)}.player-matchup .vs-text{color:gold;font-size:1.2rem;font-weight:900;text-shadow:0 0 15px rgba(255,215,0,.6)}.teams-display{display:flex;justify-content:space-around;margin:clamp(.2rem,.4vw,.4rem) 0 clamp(.3rem,.5vw,.6rem) 0;gap:clamp(.5rem,.8vw,.8rem);padding-top:clamp(.2rem,.4vw,.4rem);padding-bottom:clamp(.2rem,.4vw,.4rem);min-height:clamp(280px,36vh,420px)}.current-team,.opponent-team{flex:1;background:rgba(255,255,255,.1);padding:clamp(.4rem,.8vw,.8rem);border-radius:6px;min-height:clamp(260px,35vh,400px);display:flex;flex-direction:column}.current-team h3,.opponent-team h3{margin-top:0;margin-bottom:clamp(.3rem,.5vw,.5rem);font-size:clamp(.85rem,1vw,1rem);text-align:center}.team-cards{display:flex;gap:clamp(4px,.6vw,6px);justify-content:center;flex-wrap:wrap}.draft-phase .teams-display .hero-card{width:clamp(156px,12vw,234px);height:auto;min-height:clamp(240px,18.5vw,360px);margin:clamp(3px,.4vw,6px);font-size:clamp(.75rem,.9vw,.9rem)}.draft-phase .teams-display .hero-card .hero-name{font-size:clamp(.75rem,.9vw,.9rem)}.draft-phase .teams-display .hero-card .stat-row{font-size:clamp(.65rem,.75vw,.75rem)}.turn-indicator{text-align:center;padding:8px 16px;border-radius:6px;margin:.5rem 0;font-weight:700}.turn-indicator.my-turn{background-color:#28a74533;border:2px solid #28a745;color:#28a745}.turn-indicator.opponent-turn{background-color:#dc354533;border:2px solid #dc3545;color:#dc3545}.setup-phase{padding:20px;text-align:center;max-height:100vh;overflow-y:auto;overflow-x:hidden}.setup-phase h2{margin-bottom:.5rem}.setup-phase p{margin-bottom:2rem;color:#aaa}.opponent-ready-indicator{background:rgba(40,167,69,.2);border:2px solid #28a745;color:#28a745;padding:.75rem;border-radius:8px;margin-bottom:1.5rem;font-weight:700}.team-order-setup{display:flex;justify-content:center;margin:2rem 0}.draggable-team{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;max-width:900px}.draggable-hero-slot{position:relative;cursor:grab;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .15s ease;will-change:transform}.draggable-hero-slot:active{cursor:grabbing}.draggable-hero-slot.dragging{transform:scale(.95)}.draft-info-sidebar{position:fixed;left:clamp(8px,1vw,15px);top:clamp(60px,8vh,80px);width:clamp(180px,20vw,240px);background:linear-gradient(135deg,rgba(30,30,50,.95) 0%,rgba(20,20,40,.98) 100%);border:2px solid rgba(74,158,255,.35);border-radius:12px;padding:clamp(12px,1.4vw,16px);z-index:101;box-shadow:0 8px 32px #0009,inset 0 1px #ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-height:calc(100vh - 80px);overflow-y:auto}.draft-players{display:flex;align-items:center;justify-content:center;gap:clamp(6px,.8vw,8px);margin-bottom:clamp(12px,1.4vw,16px)}.draft-players .player-name{font-size:clamp(.75rem,.9vw,.9rem);font-weight:600}.draft-players .player-name.opponent{color:#ff6b6b}.draft-players .player-name.current{color:#4a9eff}.draft-players .vs-text{font-size:clamp(.65rem,.75vw,.75rem);color:#888;font-weight:700}.turn-indicator{text-align:center;color:#5cff5c;font-size:clamp(.7rem,.85vw,.85rem);font-weight:600;padding:clamp(8px,1vw,10px);background:rgba(92,255,92,.1);border-radius:6px;margin-bottom:clamp(12px,1.4vw,16px)}.waiting-indicator{text-align:center;color:orange;font-size:clamp(.7rem,.85vw,.85rem);font-weight:600;padding:clamp(8px,1vw,10px);background:rgba(255,165,0,.1);border-radius:6px;margin-bottom:clamp(12px,1.4vw,16px)}.banned-cards-section{margin-top:clamp(12px,1.4vw,16px);padding-top:clamp(12px,1.4vw,16px);border-top:1px solid rgba(255,107,107,.25)}.banned-cards-section h3{color:#ff6b6b;font-size:clamp(.9rem,1.05vw,1.05rem);margin:0 0 clamp(8px,1vw,10px) 0;text-align:center;text-shadow:0 0 12px rgba(255,107,107,.6);font-weight:700;letter-spacing:.5px}.banned-cards-subtitle{font-size:clamp(.6rem,.7vw,.7rem);color:#fff6;text-align:center;margin-bottom:clamp(10px,1.2vw,14px);font-style:italic}.banned-cards-list{display:flex;flex-direction:column;gap:clamp(6px,.8vw,8px)}.banned-card-item{display:flex;align-items:center;gap:clamp(6px,.8vw,8px);background:rgba(255,107,107,.08);padding:clamp(6px,.8vw,8px);border-radius:6px;transition:all .2s ease;border:1px solid rgba(255,107,107,.15)}.banned-card-item:hover{background:rgba(255,107,107,.15);border-color:#ff6b6b4d;transform:translate(2px)}.banned-card-image{width:clamp(28px,3.5vw,35px);height:clamp(28px,3.5vw,35px);border-radius:3px;object-fit:cover;border:1px solid rgba(255,107,107,.3);flex-shrink:0}.banned-card-name{flex:1;font-size:clamp(.65rem,.75vw,.75rem);font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.banned-by-label{font-size:clamp(.55rem,.65vw,.65rem);color:#999;font-style:italic;flex-shrink:0}.banned-cards-count{margin-top:clamp(10px,1.2vw,12px);padding-top:clamp(10px,1.2vw,12px);border-top:1px solid rgba(255,107,107,.15);text-align:center;font-size:clamp(.65rem,.75vw,.75rem);color:#ffffff80;font-weight:600}.draft-main-content{transition:margin-left .3s ease}.draft-main-content.with-sidebar{margin-left:0}.draggable-hero-slot:hover{transform:translateY(-5px);z-index:10000}.position-badge{position:absolute;top:-10px;left:-10px;background:#007bff;color:#fff;width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;z-index:10;border:3px solid #fff;box-shadow:0 2px 8px #0000004d}.attack-order-setup{display:flex;gap:2rem;justify-content:center;margin:2rem 0}.available-heroes,.attack-order{background:rgba(255,255,255,.1);padding:1rem;border-radius:8px;min-width:300px}.available-heroes h3,.attack-order h3{text-align:center;margin-top:0}.ordered-heroes{display:flex;flex-direction:column;gap:8px}.ordered-hero{display:flex;align-items:center;gap:8px}.position-number{background:#007bff;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}.setup-actions{display:flex;justify-content:center;margin-top:2rem}.ready-button{background:#28a745;font-size:1.2rem;padding:1rem 3rem;font-weight:700}.ready-button:hover:not(:disabled){background:#218838}.ready-status{background:rgba(40,167,69,.2);border:2px solid #28a745;color:#28a745;padding:1rem 2rem;border-radius:8px;font-weight:700}.ready-indicator{display:flex;align-items:center;gap:.5rem}.battle-phase{padding:20px}.initiative-phase{display:flex;flex-direction:column;align-items:center;padding:2rem}.initiative-actions{margin:2rem 0}.turn-order-choice{background:rgba(255,255,255,.1);padding:1.5rem;border-radius:8px;margin-top:2rem}.turn-order-choice h3{margin-top:0;text-align:center}.battle-with-overlay{position:relative;width:100%;height:100vh}.initiative-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.initiative-choice{background:rgba(20,30,60,.95);border:2px solid #4CAF50;border-radius:clamp(10px,1.2vw,16px);padding:clamp(1.5rem,2vw,2rem);text-align:center;max-width:clamp(350px,40vw,500px);width:90%;box-shadow:0 8px 32px #00000080}.initiative-choice h2{color:#4caf50;margin-top:0;font-size:clamp(1.5rem,2vw,2rem);text-shadow:0 0 10px rgba(76,175,80,.5)}.initiative-results{background:rgba(0,0,0,.4);border-radius:12px;padding:1.5rem;margin:1.5rem 0}.player-roll{margin:.5rem 0;font-size:1.2rem;padding:.5rem;background:rgba(255,255,255,.1);border-radius:8px}.winner-choice h3{color:gold;margin:1rem 0;font-size:1.5rem}.choice-buttons{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem}.choice-buttons .action-button{background:linear-gradient(135deg,#4CAF50 0%,#45a049 100%);border:none;color:#fff;padding:12px 24px;font-size:1rem;border-radius:8px;cursor:pointer;transition:all .3s ease;min-width:120px}.choice-buttons .action-button:hover{background:linear-gradient(135deg,#45a049 0%,#4CAF50 100%);transform:translateY(-2px);box-shadow:0 4px 12px #4caf504d}.waiting-choice{color:#ffa726}.waiting-choice h3{color:#ff9800;margin:1rem 0}.initiative-loading{background:rgba(20,30,60,.95);border:2px solid #2196F3;border-radius:16px;padding:2rem;text-align:center;max-width:400px;width:90%;box-shadow:0 8px 32px #00000080}.initiative-loading h2{color:#2196f3;margin-top:0;font-size:1.8rem;text-shadow:0 0 10px rgba(33,150,243,.5)}.loading-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}.loading-dots span{display:inline-block;width:12px;height:12px;border-radius:50%;background:#2196F3;animation:bounce 1.4s ease-in-out infinite both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}.loading-dots span:nth-child(3){animation-delay:0}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.team-display{display:flex;gap:clamp(10px,1vw,16px);justify-content:center;flex-wrap:wrap;padding:clamp(12px,1.5vw,20px);width:100%;margin:0 auto;box-sizing:border-box;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.opponent-area .team-display{transform:translate(-50%,calc(-50% + clamp(12px,1.5vw,20px)))}@media (max-width: 1600px){.team-display{left:52%}}@media (max-width: 1400px){.team-display{left:54%}}@media (max-width: 1200px){.team-display{left:56%}}@media (max-width: 1000px){.team-display{left:58%}}.action-panel{background:rgba(255,255,255,.1);padding:1.5rem;border-radius:8px;margin-top:2rem}.action-panel h3{margin-top:0;text-align:center}.ability-selection{display:flex;gap:10px;justify-content:center;margin:1rem 0;flex-wrap:wrap}.ability-button{background:#6f42c1;color:#fff;padding:8px 16px;border-radius:6px}.ability-button.selected{background:#28a745}.ability-button.selected:hover{background:#218838}.attack-button{background:#dc3545}.ability-button{background:#6f42c1}.ability-button:hover:not(:disabled){background:#5a359a}.end-turn-button{background:#6c757d}.end-turn-button:hover:not(:disabled){background:#545b62}.opponent-area{display:block;margin:0;padding:0;background:rgba(139,0,0,.3);border-radius:0;flex:1;min-height:50vh;position:relative;box-sizing:border-box}.team-label-container{position:absolute;left:clamp(10px,1.2vw,20px);top:50%;transform:translateY(-70%);z-index:10;text-align:center}.team-label{text-align:center;margin:0;padding:clamp(8px,.8vw,12px) clamp(15px,1.5vw,24px);border-radius:clamp(8px,.8vw,12px);color:#fff;font-size:clamp(1rem,1.3vw,1.4rem);font-weight:700;box-shadow:0 4px 12px #0006;white-space:nowrap;line-height:1.2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:3px solid transparent;background-clip:padding-box;position:relative;overflow:hidden;min-width:clamp(140px,15vw,200px)}@media (max-width: 1400px){.team-label{padding:clamp(6px,.7vw,10px) clamp(12px,1.2vw,18px);font-size:clamp(.9rem,1.15vw,1.25rem);border:2px solid transparent;min-width:clamp(120px,13vw,170px)}}@media (max-width: 1200px){.team-label{padding:clamp(5px,.6vw,8px) clamp(10px,1vw,14px);font-size:clamp(.85rem,1.05vw,1.1rem);border:2px solid transparent;min-width:clamp(100px,12vw,140px)}.draft-phase .teams-display .hero-card{max-height:280px}}.opponent-label{background:linear-gradient(135deg,rgba(139,0,0,.85) 0%,rgba(180,0,0,.9) 100%);border-color:#dc3545cc;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.7)}.opponent-label:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:shimmer 3s infinite}.player-label{background:linear-gradient(135deg,rgba(0,123,255,.85) 0%,rgba(0,86,179,.9) 100%);border-color:#64b5f6cc;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.7)}.player-label:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:shimmer 3s infinite 1.5s}@keyframes shimmer{0%{left:-100%}to{left:100%}}.team-label:hover{transform:scale(1.05);box-shadow:0 6px 18px #00000080}.opponent-label:hover{border-color:#dc3545;box-shadow:0 6px 18px #dc354566}.player-label:hover{border-color:#64b5f6;box-shadow:0 6px 18px #64b5f666}.opponent-area h3:not(.team-label),.player-area h3:not(.team-label){display:none}.player-area{display:block;margin:0;padding:0;background:rgba(100,181,246,.25);border-radius:0;flex:1;min-height:50vh;position:relative;box-sizing:border-box}.battle-info,.battle-combined-info{background:rgba(0,0,0,.3);padding:1rem;border-radius:8px;margin-bottom:1rem}.turn-indicator{font-size:1.2rem;font-weight:700;margin-bottom:.5rem}.action-buttons{display:flex;gap:10px;justify-content:center;margin-top:1rem}.action-button{background:#007bff;color:#fff;padding:clamp(6px,.7vw,10px) clamp(12px,1.2vw,20px);font-size:clamp(.8rem,.9vw,1rem)}.action-button:hover{background:#0056b3}.action-button:disabled{background:#6c757d}.action-button.used{background:#6c757d;color:#aaa;opacity:.7}.action-button.silenced{background:#6c757d;color:#aaa;opacity:.6;position:relative}.action-button.silenced:after{content:"🔇";position:absolute;top:2px;right:4px;font-size:.8rem}.action-button.disable-attack{background:#dc3545;color:#aaa;opacity:.6;position:relative}.action-button.disable-attack:after{content:"❌";position:absolute;top:2px;right:4px;font-size:.8rem}.action-button.permanently-disabled{background:#495057;color:#6c757d;opacity:.4;position:relative;border:1px solid #6c757d}.action-button.permanently-disabled:after{content:"🚫";position:absolute;top:2px;right:4px;font-size:.8rem}.action-button.selecting{background:#17a2b8;color:#fff;border:2px solid #138496;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.initiative-choice{background:rgba(255,255,255,.1);padding:2rem;border-radius:12px;margin:2rem auto;max-width:500px;text-align:center}.initiative-results{background:rgba(0,0,0,.3);padding:1rem;border-radius:8px;margin:1rem 0}.player-roll{font-size:1.2rem;margin:.5rem 0}.winner-choice h3{color:#28a745;margin:1rem 0}.waiting-choice h3{color:#ffc107;margin:1rem 0}.choice-buttons{display:flex;gap:1rem;justify-content:center;margin-top:1rem}.game-info{display:flex;flex-direction:column;gap:20px}.phase-info,.player-info,.draft-info,.initiative-info{background:rgba(255,255,255,.1);border-radius:8px;padding:15px;border-left:4px solid #007bff}.game-info h3{margin:0 0 10px;font-size:1.1rem;color:#007bff;text-transform:uppercase;letter-spacing:.5px}.current-phase{font-size:1.2rem;font-weight:700;color:#28a745;text-transform:capitalize}.player-entry{margin-bottom:8px;padding:8px;border-radius:6px}.current-player{background:rgba(40,167,69,.2);border-left:3px solid #28a745}.opponent-player{background:rgba(220,53,69,.2);border-left:3px solid #dc3545}.draft-progress{font-size:.9rem;color:#ccc;margin-top:4px}.draft-round{font-size:1.1rem;font-weight:700;color:#ffc107}.turn-status{margin-top:8px;font-weight:700;padding:6px;border-radius:4px;background:rgba(0,0,0,.3)}.matchup-display{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;margin:8px 0;background:rgba(0,0,0,.3);border-radius:6px;font-size:.95rem}.player-name-sidebar{color:#4a9eff;font-weight:700;text-shadow:0 0 8px rgba(74,158,255,.5);font-size:1.5em}.opponent-name-sidebar{color:#ff6b6b;font-weight:700;text-shadow:0 0 8px rgba(255,107,107,.5);font-size:1.5em}.vs-text-sidebar{color:gold;font-weight:900;font-size:1.1em;text-shadow:0 0 10px rgba(255,215,0,.6)}.initiative-rolls{margin:8px 0}.initiative-rolls>div{margin:4px 0;padding:4px 8px;background:rgba(0,0,0,.3);border-radius:4px}.initiative-winner{color:#28a745;font-weight:700}.initiative-loser{color:#dc3545}.setup-info,.battle-info,.battle-combined-info{background:rgba(255,255,255,.1);border-radius:8px;padding:15px;border-left:4px solid #28a745}.setup-status{color:#ffc107;font-weight:700}.current-turn{font-weight:700;font-size:1.1rem;background:rgba(40,167,69,.2);border-style:4px solid #f7e601;margin-bottom:10px}.opponent-turn{color:#dc3545;font-weight:700;font-size:1.1rem;padding:8px;background:rgba(220,53,69,.2);border-radius:6px;margin-bottom:10px}.action-status{margin-top:12px}.actions-used{margin-bottom:10px}.action-used{color:#6c757d;font-size:.9rem;margin:2px 0}.action-available{color:#28a745;font-weight:700}.active-hero{background:rgba(0,0,0,.3);border-radius:6px;padding:10px;margin-top:8px}.active-hero h4{margin:0 0 6px;color:#007bff;font-size:.95rem}.active-hero .hero-name{font-weight:700;margin-bottom:4px}.active-hero .hero-hp{font-size:.9rem;color:#ccc}.battle-log{background:rgba(255,255,255,.1);border-radius:8px;padding:15px;border-left:4px solid #dc3545;max-height:40vh;overflow:hidden;flex:0 0 auto;display:flex;flex-direction:column}.battle-log-section{background:rgba(255,255,255,.1);border-radius:6px;padding:10px;border-left:3px solid #dc3545;margin-top:15px;max-height:35vh;min-width:90%;overflow:hidden;display:flex;flex-direction:column}.battle-log-section h4{margin:0 0 10px;color:#dc3545;font-size:1rem}.log-entries{max-height:35vh;overflow-y:auto;overflow-x:hidden;padding-right:5px}.battle-log-section .log-entries{max-height:30vh;overflow-y:auto;overflow-x:hidden;padding-right:5px}.log-entries::-webkit-scrollbar{width:6px}.log-entries::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:3px}.log-entries::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px}.log-entries::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5)}.log-entry{background:rgba(0,0,0,.3);border-radius:4px;padding:8px;margin-bottom:6px;font-size:.85rem}.log-action{font-weight:400;margin-bottom:2px;color:#fff}.hero-name{color:gold;font-weight:700}.log-action .ability-name,.log-action .special-name{color:#9d4edd;font-weight:700;text-shadow:0 0 2px rgba(157,78,221,.3);font-size:inherit}.target-name{color:#ff5733;font-weight:700}.special-note{color:#aaa;font-style:italic}.special-ability{color:gold;font-weight:700}.special-reflection{color:#9d4edd;font-weight:700}.trigger-context{color:#888;font-style:italic}.log-result{color:#ccc}.crit{color:#ffc107;font-weight:700}.miss{color:#dc3545}.hit{color:#28a745}.heal{color:#28a745;font-weight:700}.timekeeper-command{color:#ffc107;font-style:italic;font-weight:700}.heal-roll-info{color:#6c757d;font-size:.8rem;margin-left:8px}.buff{color:#17a2b8;font-weight:700}.status{color:#6f42c1;font-weight:700}.damage-roll-info,.roll-info{color:#6c757d;font-size:.8rem;margin-left:8px}.advantage-chosen{color:#007bff;font-weight:700}.battle-layout{display:flex;gap:0;min-height:100vh;max-height:100vh;overflow:auto;margin:0;margin-right:clamp(200px,18vw,300px)}.game-board{flex:1;display:flex;flex-direction:column;gap:0;padding:0;margin:0;width:100%;min-height:100vh;overflow-y:auto}.action-bar{width:clamp(200px,18vw,300px);background:rgba(0,0,0,.8);border-left:2px solid #007bff;padding:0;margin:0;overflow-y:auto;overflow-x:hidden;flex-shrink:0;display:flex;flex-direction:column;gap:0;position:fixed;top:0;right:0;bottom:0;height:100vh;z-index:1000}.action-bar>*{padding:clamp(10px,1.5vw,20px)}.action-bar h3{margin:0;padding:clamp(10px,1.5vw,20px) clamp(10px,1.5vw,20px) clamp(5px,.7vw,10px) clamp(10px,1.5vw,20px);font-size:clamp(1.2rem,2vw,1.8rem);text-shadow:2px 2px 4px rgba(0,0,0,.5);color:#007bff;text-align:center}.current-hero-info{background:rgba(255,255,255,.1);border-radius:8px;padding:15px;border-left:4px solid #007bff;text-align:center}.current-hero-info h4{margin:0 0 10px;color:#007bff;font-size:1.1rem;text-transform:uppercase;letter-spacing:.5px}.current-hero-info p{margin:0;color:#fff;font-size:.9rem}.ability-selection{display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.1);border-radius:8px;padding:15px;border-left:4px solid #6f42c1}.ability-selection h4{margin:0 0 10px;color:#6f42c1;font-size:1.1rem;text-transform:uppercase;letter-spacing:.5px;text-align:center}.ability-options{display:flex;flex-direction:column;gap:8px}.ability-option-button{background:rgba(111,66,193,.2);color:#fff;border:2px solid #6f42c1;border-radius:6px;padding:12px;cursor:pointer;transition:all .2s ease;text-align:left}.ability-option-button:hover{background:rgba(111,66,193,.4);border-color:#8a5fb7;transform:translateY(-1px)}.ability-option-button:active{transform:translateY(0)}.ability-name{font-weight:700;font-size:1rem;margin-bottom:4px;color:#b794f6}.ability-description{font-size:.85rem;color:#e2e8f0;line-height:1.3}.cancel-ability-selection{background:#dc3545!important;border-color:#dc3545!important}.ability-button{background:#444;color:#fff;border:2px solid #666;border-radius:6px;padding:10px;cursor:pointer;transition:all .2s;font-size:.9rem}.ability-button:hover{background:#555;border-color:#888}.ability-button.selected{background:#007bff;border-color:#0056b3}.ability-button:disabled{background:#222;color:#666;border-color:#333;cursor:not-allowed}.action-buttons{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.1);border-radius:8px;padding:15px;border-left:4px solid #dc3545}.action-buttons h4{margin:0 0 10px;color:#dc3545;font-size:1.1rem;text-transform:uppercase;letter-spacing:.5px;text-align:center}.end-turn-section{background:rgba(255,255,255,.1);border-radius:8px;padding:15px;border-left:4px solid #ffc107}.end-turn-section h4{margin:0 0 10px;color:#ffc107;font-size:1.1rem;text-transform:uppercase;letter-spacing:.5px;text-align:center}.simple-actions{display:flex;flex-direction:column;gap:12px}.simple-actions .action-button{padding:14px 16px;border:none;border-radius:6px;cursor:pointer;font-weight:700;font-size:1rem;transition:all .2s;text-align:center}.action-button{padding:12px;border:none;border-radius:6px;cursor:pointer;font-weight:700;transition:all .2s;font-size:.95rem;min-width:140px;width:100%}.attack-button{background:#dc3545;color:#fff}.attack-button:hover:not(:disabled){background:#c82333}.ability-button{background:#007bff;color:#fff}.ability-button:hover:not(:disabled){background:#0056b3}.end-turn-button{background:#6c757d;color:#fff}.end-turn-button:hover{background:#545b62}.action-button:disabled{background:#333;color:#666;cursor:not-allowed}.target-info{background:rgba(255,255,255,.1);border-radius:8px;padding:15px;border-left:4px solid #28a745;text-align:center}.target-info p{margin:0;color:#fff;font-size:.9rem}.target-info h4{margin:0 0 10px;color:#28a745;font-size:1.1rem;text-transform:uppercase;letter-spacing:.5px}.wait-message{background:rgba(255,255,255,.1);border-radius:8px;padding:15px;border-left:4px solid #6c757d;text-align:center;margin-top:20px}.wait-message h4{margin:0 0 10px;color:#6c757d;font-size:1.1rem;text-transform:uppercase;letter-spacing:.5px}.wait-message p{margin:0;color:#ccc;font-style:italic}.buffed-stat{position:relative;display:inline-block}.buffed-text{color:#66b3ff;text-shadow:0 0 8px rgba(102,179,255,.6);font-weight:700}.buff-tooltip{position:relative;display:inline-block}.buff-tooltiptext{visibility:hidden;width:180px;background-color:#000000f2;color:#fff;text-align:center;border-radius:6px;padding:8px;position:absolute;z-index:1000;top:-80px;left:50%;margin-left:-90px;opacity:0;transition:opacity .3s;font-size:.8rem;border:1px solid #66b3ff;box-shadow:0 4px 8px #0000004d;pointer-events:none}.buff-tooltiptext:after{content:"";position:absolute;bottom:-10px;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.95) transparent transparent transparent}.buffed-stat:hover .buff-tooltiptext{visibility:visible;opacity:1}.buffed-stat.has-debuff{color:#f66;text-shadow:0 0 8px rgba(255,102,102,.6);font-weight:700}.stat-buffed{color:#66b3ff;text-shadow:0 0 8px rgba(102,179,255,.8);font-weight:700}.stat-debuffed{color:#f66;text-shadow:0 0 8px rgba(255,102,102,.8);font-weight:700}.stat-berserker-stacks{color:#f90;text-shadow:0 0 8px rgba(255,153,0,.8);font-weight:700}.status-effect.stat-modifier.debuff{background-color:#f663;border:1px solid #ff6666;color:#f66}.special-ability{color:#96f;font-weight:700;text-shadow:0 0 8px rgba(153,102,255,.6)}.special-ability-section{display:flex;flex-direction:column;align-items:center;gap:8px}.ability-instruction{font-size:.85em;color:#ccc;background:rgba(0,123,255,.1);border:1px solid rgba(0,123,255,.3);border-radius:4px;padding:6px 12px;text-align:center;max-width:200px;line-height:1.2}.survival-info{background:linear-gradient(135deg,rgba(255,102,0,.1) 0%,rgba(255,136,51,.1) 100%);border:1px solid rgba(255,102,0,.3);border-radius:8px;padding:15px;margin-bottom:20px;border-left:4px solid #ff6600}.survival-stats{display:flex;flex-direction:column;gap:8px}.survival-wins{color:gold;font-weight:700;font-size:1rem}.survival-losses{color:#ff6b6b;font-weight:700;font-size:1rem}.survival-goal{color:#f60;font-style:italic;font-size:.85rem;margin-top:4px;text-align:center}.friends-icon{position:fixed;bottom:20px;left:30px;z-index:1500;background:linear-gradient(135deg,rgba(0,123,255,.9) 0%,rgba(0,86,179,.95) 100%);border:2px solid rgba(0,123,255,.7);border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #007bff4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.friends-icon:hover{transform:scale(1.1);box-shadow:0 6px 20px #007bff80;border-color:#007bffe6}.friends-icon-content{position:relative;display:flex;align-items:center;justify-content:center}.friends-icon-svg{width:28px;height:28px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.notification-badge{position:absolute;top:-8px;right:-8px;background:#dc3545;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;border:2px solid white;box-shadow:0 2px 8px #dc354566;animation:pulse-notification 2s infinite}@keyframes pulse-notification{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.friends-icon.has-notifications{animation:friends-glow 1.5s ease-in-out infinite alternate}@keyframes friends-glow{0%{box-shadow:0 4px 15px #007bff4d;border-color:#007bffb3}to{box-shadow:0 8px 25px #007bff99;border-color:#007bff}}.friends-icon-tooltip{position:absolute;bottom:70px;left:50%;transform:translate(-50%);background:rgba(0,0,0,.9);color:#fff;padding:8px 12px;border-radius:6px;font-size:.85rem;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none;z-index:10000}.friends-icon:hover .friends-icon-tooltip{opacity:1;visibility:visible}.message-icon{position:fixed;bottom:20px;left:110px;width:60px;height:60px;background:rgba(30,30,30,.95);border:2px solid rgba(100,100,100,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:1500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.message-icon:hover{background:rgba(40,40,40,.98);transform:scale(1.05);border-color:#96969680}.message-icon-content{position:relative;display:flex;align-items:center;justify-content:center}.message-icon-svg{width:24px;height:24px;color:#fff;transition:color .3s ease}.message-icon:hover .message-icon-svg{color:#28a745}.message-icon .notification-badge{position:absolute;top:-8px;right:-8px;background:#dc3545;color:#fff;font-size:.7rem;font-weight:700;padding:2px 6px;border-radius:10px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(30,30,30,.95)}.message-icon .minimized-chat-indicator{position:absolute;top:-8px;right:-8px;background:#28a745;width:12px;height:12px;border-radius:50%;border:2px solid rgba(30,30,30,.95)}.message-icon.has-notifications{animation:message-glow 1.5s ease-in-out infinite alternate}.message-icon.has-minimized{border-color:#28a74580}@keyframes message-glow{0%{box-shadow:0 4px 15px #28a7454d;border-color:#28a745b3}to{box-shadow:0 8px 25px #28a74599;border-color:#28a745}}.message-icon-tooltip{position:absolute;bottom:70px;left:50%;transform:translate(-50%);background:rgba(0,0,0,.9);color:#fff;padding:8px 12px;border-radius:6px;font-size:.85rem;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none;z-index:2000}.message-icon:hover .message-icon-tooltip{opacity:1;visibility:visible}.friends-overlay-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2000;pointer-events:none}.friends-overlay{position:fixed;bottom:100px;left:30px;background:linear-gradient(135deg,rgba(20,30,60,.98) 0%,rgba(30,45,70,.98) 100%);border:2px solid rgba(0,123,255,.7);border-radius:16px;width:300px;overflow:visible;box-shadow:0 25px 50px #000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:all;display:flex;flex-direction:column}.friends-overlay-content{flex:1;overflow:visible;padding:20px;display:flex;flex-direction:column}.friends-overlay-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;background:rgba(0,123,255,.1)}.friends-overlay-header h3{margin:0;color:#007bff;font-size:1.3rem;font-weight:700}.close-button{background:none;border:none;color:#999;font-size:1.5rem;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.close-button:hover{background:rgba(255,255,255,.1);color:#fff}.friends-overlay-content{padding:20px;max-height:60vh;overflow-y:auto}.friend-requests-section{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}.friend-requests-section h4{margin:0 0 15px;color:#ffc107;font-size:1rem;display:flex;align-items:center;gap:8px}.friend-requests-list{display:flex;flex-direction:column;gap:10px}.friend-request-item{display:flex;justify-content:space-between;align-items:center;background:rgba(255,193,7,.1);border:1px solid rgba(255,193,7,.3);border-radius:8px;padding:12px}.request-username{font-weight:700;color:#fff}.request-actions{display:flex;gap:8px}.accept-button,.reject-button{width:36px;height:36px;border:2px solid transparent;border-radius:50%;cursor:pointer;font-weight:700;font-size:1.1rem;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.accept-button{background:linear-gradient(135deg,#28a745 0%,#20c997 50%,#17a2b8 100%);color:#fff;border-color:#28a74580}.accept-button:hover{background:linear-gradient(135deg,#218838 0%,#1ea085 50%,#138496 100%);transform:scale(1.15) translateY(-2px);box-shadow:0 8px 20px #28a74566;border-color:#28a745cc}.reject-button{background:linear-gradient(135deg,#dc3545 0%,#c82333 50%,#bd2130 100%);color:#fff;border-color:#dc354580}.reject-button:hover{background:linear-gradient(135deg,#c82333 0%,#bd2130 50%,#b21e2f 100%);transform:scale(1.15) translateY(-2px);box-shadow:0 8px 20px #dc354566;border-color:#dc3545cc}.add-friend-section{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}.add-friend-button{background:linear-gradient(135deg,#28a745 0%,#20c997 100%);color:#fff;border:none;border-radius:8px;padding:10px 20px;cursor:pointer;font-weight:700;transition:all .3s ease;width:100%}.add-friend-button:hover{background:linear-gradient(135deg,#218838 0%,#1ea085 100%);transform:translateY(-2px);box-shadow:0 4px 15px #28a7454d}.add-friend-input-section{display:flex;gap:8px;align-items:center}.add-friend-input{flex:1;padding:8px 12px;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:rgba(255,255,255,.1);color:#fff;font-size:.9rem}.add-friend-input::placeholder{color:#fff9}.add-friend-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 8px #007bff4d}.send-request-button{background:#007bff;color:#fff;border:none;border-radius:6px;padding:8px 12px;cursor:pointer;font-size:.9rem;transition:all .2s ease}.send-request-button:hover{background:#0056b3}.cancel-button{background:#6c757d;color:#fff;border:none;border-radius:6px;padding:8px 12px;cursor:pointer;font-size:.9rem;transition:all .2s ease}.cancel-button:hover{background:#545b62}.online-players-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.online-players-section h4{margin:0;color:#007bff;font-size:1rem}.refresh-button{background:none;border:1px solid rgba(0,123,255,.3);color:#007bff;border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:all .2s ease}.refresh-button:hover:not(:disabled){background:rgba(0,123,255,.1);border-color:#007bff80;transform:rotate(90deg)}.refresh-button:disabled{opacity:.5;cursor:not-allowed;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading,.error{text-align:center;padding:20px;color:#ccc;font-style:italic}.error{color:#dc3545}.online-players-section{flex:1;overflow:visible;display:flex;flex-direction:column}.players-list{display:flex;flex-direction:column;gap:8px;margin-bottom:15px;overflow:visible}.player-item{border-radius:8px;overflow:visible;transition:all .2s ease;margin-bottom:8px}.player-info{display:flex;align-items:center;justify-content:space-between;padding:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:all .2s ease;position:relative;border-radius:8px}.player-info:hover{background:rgba(255,255,255,.1);border-color:#007bff80}.player-info.friend{border-color:#007bff4d;background:rgba(0,123,255,.1)}.player-username{font-weight:700;color:#fff}.friend-badge{background:#007bff;color:#fff;padding:2px 8px;border-radius:12px;font-size:.75rem;font-weight:700;margin-left:8px}.in-game-badge{background:#28a745;color:#fff;padding:2px 8px;border-radius:12px;font-size:.75rem;font-weight:700;margin-left:8px}.player-tooltip{position:fixed;left:370px;top:200px;display:flex;flex-direction:column;gap:6px;padding:12px;background:rgba(10,15,30,.95);border:2px solid rgba(0,150,255,.6);border-radius:12px;box-shadow:0 12px 30px #000000b3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:9999;min-width:140px;animation:tooltipFadeIn .2s ease-out;white-space:nowrap}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(-50%) translate(-10px)}to{opacity:1;transform:translateY(-50%) translate(0)}}.tooltip-action{padding:8px 12px;border:none;border-radius:8px;cursor:pointer;font-size:.8rem;font-weight:600;transition:all .2s ease;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);white-space:nowrap}.action-button:disabled{opacity:.5;cursor:not-allowed}.add-friend-action{background:#28a745;color:#fff}.add-friend-action:hover:not(:disabled){background:#218838}.remove-friend-action{background:#dc3545;color:#fff}.remove-friend-action:hover:not(:disabled){background:#c82333}.message-action{background:#007bff;color:#fff}.message-action:hover:not(:disabled){background:#0056b3}.watch-action{background:#6c757d;color:#fff}.watch-action:hover:not(:disabled){background:#545b62}.online-count{text-align:center;padding:15px;border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);color:#ccc;margin:0 -20px -20px}.online-count .count{color:#28a745;font-weight:700;font-size:1.1rem}.message-chat-window{position:fixed;width:350px;height:400px;background:linear-gradient(135deg,rgba(20,30,60,.98) 0%,rgba(30,45,70,.98) 100%);border:2px solid rgba(0,123,255,.7);border-radius:12px;box-shadow:0 15px 35px #0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2100;display:flex;flex-direction:column;resize:both;overflow:hidden;min-width:300px;min-height:250px}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(0,123,255,.2);border-bottom:1px solid rgba(255,255,255,.1);-webkit-user-select:none;user-select:none}.chat-title{font-weight:700;color:#fff;font-size:1rem}.chat-controls{display:flex;gap:8px;align-items:center}.chat-minimize-button,.chat-close-button{background:none;border:none;color:#999;font-size:1.2rem;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.chat-minimize-button{font-size:1.4rem;font-weight:700;line-height:1}.chat-minimize-button:hover,.chat-close-button:hover{background:rgba(255,255,255,.1);color:#fff}.chat-body{flex:1;display:flex;flex-direction:column;overflow:hidden}.messages-container{flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.chat-loading,.no-messages{text-align:center;color:#ccc;font-style:italic;padding:20px}.message{display:flex;flex-direction:column;max-width:80%}.message.sent{align-self:flex-end;align-items:flex-end}.message.received{align-self:flex-start;align-items:flex-start}.message-content{background:rgba(255,255,255,.1);padding:8px 12px;border-radius:12px;color:#fff;word-wrap:break-word;line-height:1.4}.message.sent .message-content{background:linear-gradient(135deg,#007bff 0%,#0056b3 100%);border-bottom-right-radius:4px}.message.received .message-content{background:rgba(255,255,255,.15);border-bottom-left-radius:4px}.message-time{font-size:.75rem;color:#999;margin-top:4px}.message-input-container{display:flex;gap:8px;padding:16px;border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2)}.message-input{flex:1;padding:8px 12px;border:1px solid rgba(255,255,255,.3);border-radius:8px;background:rgba(255,255,255,.1);color:#fff;font-size:.9rem;resize:none;font-family:inherit}.message-input::placeholder{color:#fff9}.message-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 8px #007bff4d}.send-button{background:#007bff;color:#fff;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;font-weight:700;transition:all .2s ease}.send-button:hover:not(:disabled){background:#0056b3}.send-button:disabled{background:#6c757d;cursor:not-allowed}.messages-container::-webkit-scrollbar{width:6px}.messages-container::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:3px}.messages-container::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px}.messages-container::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5)}@media (max-width: 768px){.friends-overlay{width:95vw;max-height:90vh;left:2.5vw;bottom:80px}.message-chat-window{width:90vw;max-width:350px;height:50vh;max-height:400px}.friends-icon{width:50px;height:50px;bottom:15px;left:25px}.friends-icon-svg{width:24px;height:24px}.message-icon{width:50px;height:50px;bottom:15px;left:85px}}.player-profile-icon{display:flex;justify-content:center;margin-top:4px}.profile-icon-small{width:90px;height:90px;border-radius:50%;border:2px solid #007bff;object-fit:cover;background:rgba(0,0,0,.3)}.opponent-area .profile-icon-small{border-color:#dc3545}.player-area .profile-icon-small{border-color:#28a745}:root{--image-base-url: "http://localhost:3001"}html{font-size:16px}@media (max-width: 1920px){html{font-size:16px}}@media (max-width: 1600px){html{font-size:15px}}@media (max-width: 1366px){html{font-size:14px}}@media (max-width: 1024px){html{font-size:13px}}@media (max-width: 768px){html{font-size:12px}}@media (max-width: 480px){html{font-size:11px}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%);min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}button{cursor:pointer;border:none;border-radius:4px;padding:8px 16px;font-size:14px;transition:all .2s ease}button:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0003}button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}input{border:1px solid #ccc;border-radius:4px;padding:8px 12px;font-size:14px}input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}