:root{--bg-primary: #0f1923;--bg-secondary: #1a2634;--bg-tertiary: #1f2d3d;--bg-card: #1e2a38;--bg-card-hover: #263545;--bg-overlay: rgba(0, 0, 0, .85);--accent-red: #ff4655;--accent-red-hover: #ff6b77;--accent-teal: #00d4aa;--accent-teal-dim: rgba(0, 212, 170, .2);--accent-blue: #4f9eff;--accent-yellow: #ffc857;--accent-purple: #9f5bff;--text-primary: #ffffff;--text-secondary: #8b9aaa;--text-muted: #5a6a7a;--border-color: rgba(255, 255, 255, .1);--border-active: rgba(255, 70, 85, .5);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(255, 70, 85, .3);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease;--sidebar-width: 220px;--navbar-height: 64px}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}#root{min-height:100vh;display:flex;flex-direction:column}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-content{display:flex;flex:1;padding-top:var(--navbar-height)}.navbar{position:fixed;top:0;left:0;right:0;height:var(--navbar-height);background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-lg);z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.navbar-logo{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.5rem;font-weight:800;text-transform:uppercase;letter-spacing:1px}.navbar-logo .logo-valo{color:var(--accent-red)}.navbar-logo .logo-lineup{color:var(--text-primary)}.navbar-search{display:flex;align-items:center;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-full);padding:var(--spacing-sm) var(--spacing-md);width:300px;transition:var(--transition-normal)}.navbar-search:focus-within{border-color:var(--accent-red);box-shadow:var(--shadow-glow)}.navbar-search input{flex:1;background:transparent;border:none;color:var(--text-primary);font-size:.9rem;outline:none}.navbar-search input::placeholder{color:var(--text-muted)}.navbar-search svg{color:var(--text-secondary);margin-right:var(--spacing-sm)}.navbar-stats{display:flex;align-items:center;gap:var(--spacing-lg)}.stat-item{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:1.25rem;font-weight:700;color:var(--accent-teal)}.stat-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase}.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border-color);height:calc(100vh - var(--navbar-height));position:sticky;top:var(--navbar-height);overflow-y:auto;flex-shrink:0}.sidebar-title{padding:var(--spacing-md);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);border-bottom:1px solid var(--border-color)}.map-list{list-style:none}.map-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);cursor:pointer;transition:var(--transition-fast);border-left:3px solid transparent}.map-item:hover{background:var(--bg-tertiary)}.map-item.active{background:var(--bg-tertiary);border-left-color:var(--accent-red)}.map-item img{width:48px;height:48px;border-radius:var(--radius-md);object-fit:cover}.map-item-info{flex:1}.map-item-name{font-weight:600;font-size:.95rem}.map-item-count{font-size:.75rem;color:var(--text-muted)}.content-area{flex:1;display:flex;flex-direction:column;overflow-y:auto}.agent-section{background:var(--bg-secondary);padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color)}.agent-grid{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center}.agent-item{width:48px;height:48px;border-radius:var(--radius-md);background:var(--bg-tertiary);border:2px solid transparent;cursor:pointer;transition:var(--transition-fast);overflow:hidden;position:relative}.agent-item:hover{transform:translateY(-2px);border-color:var(--text-muted)}.agent-item.active{border-color:var(--accent-red);box-shadow:0 0 12px #ff465566}.agent-item img{width:100%;height:100%;object-fit:cover}.agent-item .agent-role{position:absolute;bottom:0;left:0;right:0;font-size:.5rem;text-align:center;background:#000c;padding:2px;text-transform:uppercase}.ability-section{background:var(--bg-secondary);padding:var(--spacing-sm) var(--spacing-lg);border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.ability-pills{display:flex;gap:var(--spacing-sm)}.ability-pill{display:flex;align-items:center;gap:var(--spacing-xs);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-full);padding:var(--spacing-xs) var(--spacing-md);cursor:pointer;transition:var(--transition-fast);font-size:.85rem}.ability-pill:hover{background:var(--bg-card-hover)}.ability-pill.active{background:var(--accent-red);border-color:var(--accent-red)}.ability-pill img{width:20px;height:20px}.filter-section{background:var(--bg-secondary);padding:var(--spacing-sm) var(--spacing-lg);border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:var(--spacing-lg);flex-wrap:wrap}.filter-group{display:flex;align-items:center;gap:var(--spacing-sm)}.filter-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.filter-toggle{display:flex;background:var(--bg-tertiary);border-radius:var(--radius-full);padding:2px}.filter-btn{padding:var(--spacing-xs) var(--spacing-md);border:none;background:transparent;color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;border-radius:var(--radius-full);transition:var(--transition-fast)}.filter-btn.active{background:var(--accent-red);color:var(--text-primary)}.filter-btn:hover:not(.active){color:var(--text-primary)}.grid-container{display:flex;flex:1;padding:var(--spacing-lg);gap:var(--spacing-lg)}.minimap-container{width:320px;flex-shrink:0;position:sticky;top:var(--spacing-lg);height:fit-content}.minimap-wrapper{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-md);border:1px solid var(--border-color)}.minimap-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.minimap-title{font-size:.9rem;font-weight:600;color:var(--text-secondary)}.minimap-toggle{display:flex;gap:var(--spacing-xs)}.minimap-toggle-btn{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);font-size:.75rem;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-fast)}.minimap-toggle-btn.active{background:var(--accent-teal);border-color:var(--accent-teal);color:var(--bg-primary)}.minimap-image{position:relative;width:100%;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-tertiary)}.minimap-image img{width:100%;height:100%;object-fit:cover}.minimap-marker{position:absolute;width:24px;height:24px;background:var(--accent-red);border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700}.minimap-marker:hover{transform:translate(-50%,-50%) scale(1.2);box-shadow:var(--shadow-glow)}.minimap-marker.start{background:var(--accent-teal)}.minimap-marker.end{background:var(--accent-red)}.minimap-callouts{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.callout-tag{padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.75rem;color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast)}.callout-tag:hover{background:var(--bg-card-hover);color:var(--text-primary)}.callout-tag.active{background:var(--accent-red);border-color:var(--accent-red);color:var(--text-primary)}.lineup-grid-container{flex:1}.lineup-grid-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.lineup-count{font-size:.9rem;color:var(--text-secondary)}.lineup-count span{color:var(--accent-teal);font-weight:700}.lineup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-md)}.lineup-card{background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-color);cursor:pointer;transition:var(--transition-normal)}.lineup-card:hover{transform:translateY(-4px);border-color:var(--accent-red);box-shadow:var(--shadow-lg),var(--shadow-glow)}.lineup-card-image{width:100%;height:160px;object-fit:cover;background:var(--bg-tertiary)}.lineup-card-content{padding:var(--spacing-md)}.lineup-card-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.lineup-card-agent{width:32px;height:32px;border-radius:var(--radius-sm);object-fit:cover}.lineup-card-ability{width:24px;height:24px}.lineup-card-title{font-size:.95rem;font-weight:600;margin-bottom:var(--spacing-xs);line-height:1.3}.lineup-card-meta{display:flex;align-items:center;gap:var(--spacing-md);font-size:.75rem;color:var(--text-muted)}.lineup-card-location{display:flex;align-items:center;gap:var(--spacing-xs)}.lineup-card-location svg{width:14px;height:14px}.lineup-card-tags{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-sm);flex-wrap:wrap}.lineup-tag{padding:2px var(--spacing-sm);background:var(--bg-tertiary);border-radius:var(--radius-sm);font-size:.7rem;color:var(--text-secondary);text-transform:uppercase}.lineup-tag.difficulty-easy{background:#00d4aa33;color:var(--accent-teal)}.lineup-tag.difficulty-medium{background:#ffc85733;color:var(--accent-yellow)}.lineup-tag.difficulty-hard{background:#ff465533;color:var(--accent-red)}.modal-overlay{position:fixed;inset:0;background:var(--bg-overlay);display:flex;align-items:center;justify-content:center;z-index:2000;padding:var(--spacing-lg);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-secondary);border-radius:var(--radius-xl);max-width:1000px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .3s ease;border:1px solid var(--border-color)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.modal-title-section{display:flex;align-items:center;gap:var(--spacing-md)}.modal-agent-icon{width:48px;height:48px;border-radius:var(--radius-md)}.modal-title{font-size:1.25rem;font-weight:700}.modal-subtitle{font-size:.85rem;color:var(--text-secondary)}.modal-close{width:40px;height:40px;border:none;background:var(--bg-tertiary);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.modal-close:hover{background:var(--accent-red);color:var(--text-primary)}.modal-body{display:flex;flex:1;overflow:hidden}.modal-gallery{flex:1.5;background:var(--bg-primary);display:flex;flex-direction:column}.gallery-main{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:var(--spacing-md)}.gallery-main img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-md)}.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;background:var(--bg-card);border-radius:var(--radius-full);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.gallery-nav:hover{background:var(--accent-red)}.gallery-nav.prev{left:var(--spacing-md)}.gallery-nav.next{right:var(--spacing-md)}.gallery-thumbnails{display:flex;gap:var(--spacing-sm);padding:var(--spacing-md);justify-content:center;background:var(--bg-secondary)}.gallery-thumb{width:80px;height:60px;border-radius:var(--radius-sm);object-fit:cover;cursor:pointer;border:2px solid transparent;transition:var(--transition-fast);opacity:.6}.gallery-thumb:hover{opacity:1}.gallery-thumb.active{border-color:var(--accent-red);opacity:1}.modal-instructions{flex:1;padding:var(--spacing-lg);overflow-y:auto;border-left:1px solid var(--border-color)}.instructions-title{font-size:1rem;font-weight:600;margin-bottom:var(--spacing-md);color:var(--text-secondary)}.step-list{list-style:none}.step-item{display:flex;gap:var(--spacing-md);padding:var(--spacing-md) 0;border-bottom:1px solid var(--border-color)}.step-text{flex:1;font-size:.95rem;line-height:1.5}.modal-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-top:var(--spacing-lg);padding-top:var(--spacing-md);border-top:1px solid var(--border-color)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl);text-align:center;color:var(--text-secondary)}.empty-state svg{width:80px;height:80px;margin-bottom:var(--spacing-lg);opacity:.5}.empty-state h3{margin-bottom:var(--spacing-sm)}.loading-spinner{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2xl)}.spinner{width:40px;height:40px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent-red);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1200px){.minimap-container{width:280px}}@media(max-width:992px){.grid-container{flex-direction:column}.minimap-container{width:100%;position:static}.minimap-image{max-width:400px;margin:0 auto}.modal-body{flex-direction:column}.modal-instructions{border-left:none;border-top:1px solid var(--border-color)}}@media(max-width:768px){:root{--sidebar-width: 180px}.navbar-search,.navbar-stats{display:none}.sidebar{width:60px;overflow:visible}.sidebar-title{display:none}.map-item{justify-content:center;padding:var(--spacing-sm)}.map-item-info{display:none}.agent-grid{gap:var(--spacing-xs)}.agent-item{width:40px;height:40px}.lineup-grid{grid-template-columns:1fr}.modal-content{max-height:100vh;border-radius:0}}@media(max-width:480px){.sidebar{display:none}.filter-section{flex-direction:column;align-items:flex-start}.navbar-logo{font-size:1.2rem}}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.mt-md{margin-top:var(--spacing-md)}.mb-md{margin-bottom:var(--spacing-md)}.lang-toggle{padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-primary);font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;gap:var(--spacing-xs)}.lang-toggle:hover{background:var(--accent-red);border-color:var(--accent-red)}.logo{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.5rem;font-weight:800}.logo-icon{font-size:1.75rem}.logo-text{background:linear-gradient(135deg,var(--accent-red) 0%,var(--accent-yellow) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.search-icon{color:var(--text-muted)}.stat{display:flex;flex-direction:column;align-items:center;padding:0 var(--spacing-sm)}.map-thumbnail{width:48px;height:48px;border-radius:var(--radius-md);object-fit:cover;background:var(--bg-tertiary)}.map-info{flex:1;display:flex;flex-direction:column}.map-name{font-weight:600;font-size:.95rem}.map-count{font-size:.75rem;color:var(--text-muted)}.agent-grid-container{background:var(--bg-secondary);padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color)}.agent-icon{width:48px;height:48px;border-radius:var(--radius-md);background:var(--bg-tertiary);border:2px solid transparent;cursor:pointer;transition:var(--transition-fast);overflow:hidden;display:flex;flex-direction:column;align-items:center;position:relative}.agent-icon:hover{transform:translateY(-2px);border-color:var(--text-muted)}.agent-icon.active{border-color:var(--accent-red);box-shadow:0 0 12px #ff465566}.agent-icon img{width:100%;height:100%;object-fit:cover}.agent-icon .agent-name{position:absolute;bottom:0;left:0;right:0;font-size:.5rem;text-align:center;background:#000c;padding:2px;opacity:0;transition:var(--transition-fast)}.agent-icon:hover .agent-name{opacity:1}.ability-filter{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-wrap:wrap}.ability-icon-small{width:20px;height:20px}.ability-key{font-size:.65rem;padding:2px 4px;background:var(--bg-primary);border-radius:var(--radius-sm);color:var(--text-muted)}.side-filter{display:flex;gap:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-lg);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-wrap:wrap;align-items:center}.side-buttons{display:flex;gap:var(--spacing-sm)}.side-btn{padding:var(--spacing-sm) var(--spacing-lg);border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);border-radius:var(--radius-full);cursor:pointer;font-size:.9rem;font-weight:500;transition:var(--transition-fast)}.side-btn.active.attack{background:linear-gradient(135deg,var(--accent-red) 0%,#ff8c42 100%);border-color:var(--accent-red);color:#fff}.side-btn.active.defense{background:linear-gradient(135deg,var(--accent-teal) 0%,#36d1dc 100%);border-color:var(--accent-teal);color:#fff}.type-buttons{display:flex;gap:var(--spacing-xs);flex-wrap:wrap}.type-btn{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:.75rem;transition:var(--transition-fast);display:flex;align-items:center;gap:var(--spacing-xs)}.type-btn:hover{background:var(--bg-card-hover)}.type-btn.active{background:var(--accent-red);border-color:var(--accent-red);color:#fff}.filters-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);padding:0 var(--spacing-lg);flex-wrap:wrap}.clear-filters-btn{padding:var(--spacing-sm) var(--spacing-md);background:#ff465533;border:1px solid var(--accent-red);color:var(--accent-red);border-radius:var(--radius-full);cursor:pointer;font-size:.85rem;font-weight:500;transition:var(--transition-fast)}.clear-filters-btn:hover{background:var(--accent-red);color:#fff}.lineup-card-image{position:relative;height:160px;display:flex;align-items:center;justify-content:center}.lineup-type-badge{position:absolute;top:var(--spacing-sm);left:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);background:#000000b3;border-radius:var(--radius-sm);font-size:.7rem;font-weight:600;display:flex;align-items:center;gap:var(--spacing-xs)}.video-badge{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);background:var(--accent-red);border-radius:var(--radius-sm);font-size:.7rem;font-weight:600}.lineup-agent-badge{position:absolute;bottom:var(--spacing-sm);right:var(--spacing-sm);width:40px;height:40px;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);border:2px solid var(--border-color)}.lineup-agent-badge img{width:100%;height:100%;object-fit:cover}.lineup-title{font-size:1rem;font-weight:600;margin-bottom:var(--spacing-sm);line-height:1.3}.lineup-meta{margin-bottom:var(--spacing-sm)}.lineup-locations{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.8rem;color:var(--text-secondary)}.location{display:flex;align-items:center;gap:var(--spacing-xs)}.location-icon{font-size:.75rem}.location-arrow{color:var(--accent-teal)}.lineup-footer{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.lineup-agent-info{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.85rem;color:var(--text-secondary)}.ability-icon-card{width:20px;height:20px}.lineup-difficulty{font-size:.9rem}.lineup-tags{display:flex;gap:var(--spacing-xs);flex-wrap:wrap}.tag{padding:2px var(--spacing-sm);background:var(--bg-tertiary);border-radius:var(--radius-sm);font-size:.7rem;color:var(--text-muted)}.lineup-grid-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl);text-align:center;color:var(--text-secondary)}.empty-icon{font-size:4rem;margin-bottom:var(--spacing-md);opacity:.5}.lineup-grid-empty h3{margin-bottom:var(--spacing-sm);color:var(--text-primary)}.count-number{font-size:1.25rem;font-weight:700;color:var(--accent-teal);margin-right:var(--spacing-xs)}.count-label{color:var(--text-secondary)}.minimap-container{width:280px;flex-shrink:0;background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-md);border:1px solid var(--border-color)}.minimap-image-wrapper{aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--spacing-md);background:var(--bg-tertiary)}.minimap-image-wrapper img,.minimap-image{width:100%;height:100%;object-fit:cover}.callout-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.app{display:flex;flex-direction:column;min-height:100vh}.main-layout{display:flex;flex:1;padding-top:var(--navbar-height)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.content-area{display:flex;flex:1;gap:var(--spacing-lg);padding:var(--spacing-lg);overflow-y:auto}.lineup-section{flex:1;min-width:0}.minimap-section{flex-shrink:0}.video-container{width:100%;aspect-ratio:16/9;background:var(--bg-primary);border-radius:var(--radius-md);overflow:hidden}.video-container iframe{width:100%;height:100%}.video-toggle-btn{display:block;width:100%;padding:var(--spacing-md);background:var(--accent-red);border:none;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-fast);margin-top:var(--spacing-sm);border-radius:var(--radius-md)}.video-toggle-btn:hover{background:var(--accent-red-hover)}.modal-media{flex:1.5;background:var(--bg-primary);padding:var(--spacing-md);display:flex;flex-direction:column}.image-viewer{flex:1;display:flex;align-items:center;justify-content:center;position:relative;background:var(--bg-tertiary);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);min-height:300px}.image-viewer img{max-width:100%;max-height:400px;object-fit:contain;border-radius:var(--radius-md)}.image-counter{position:absolute;bottom:var(--spacing-sm);right:var(--spacing-sm);background:#000000b3;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.8rem}.image-nav{display:flex;align-items:center;gap:var(--spacing-md)}.nav-btn{width:40px;height:40px;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-primary);border-radius:var(--radius-full);cursor:pointer;font-size:1.25rem;transition:var(--transition-fast);display:flex;align-items:center;justify-content:center}.nav-btn:hover{background:var(--accent-red);border-color:var(--accent-red)}.thumbnails{flex:1;display:flex;gap:var(--spacing-sm);justify-content:center;overflow-x:auto}.thumbnail{width:80px;height:50px;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;border:2px solid transparent;opacity:.6;transition:var(--transition-fast);flex-shrink:0}.thumbnail:hover{opacity:1}.thumbnail.active{border-color:var(--accent-red);opacity:1}.thumbnail img{width:100%;height:100%;object-fit:cover}.modal-info{flex:1;padding:var(--spacing-lg);overflow-y:auto;border-left:1px solid var(--border-color)}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.info-item{background:var(--bg-tertiary);padding:var(--spacing-md);border-radius:var(--radius-md)}.info-label{display:block;font-size:.75rem;color:var(--text-muted);text-transform:uppercase;margin-bottom:var(--spacing-xs)}.info-value{font-size:.95rem;font-weight:500}.info-value.difficulty-easy{color:var(--accent-teal)}.info-value.difficulty-medium{color:var(--accent-yellow)}.info-value.difficulty-hard{color:var(--accent-red)}.ability-info{display:flex;align-items:center;gap:var(--spacing-sm)}.ability-info img{width:24px;height:24px}.steps-section h3{font-size:1rem;margin-bottom:var(--spacing-md);color:var(--text-secondary)}.steps-list{list-style:none}.steps-list li{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-tertiary);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);cursor:pointer;transition:var(--transition-fast);border:1px solid transparent}.steps-list li:hover{background:var(--bg-card-hover)}.steps-list li.active{border-color:var(--accent-red);background:#ff46551a}.step-number{width:28px;height:28px;background:var(--accent-red);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;flex-shrink:0}.step-text{flex:1;line-height:1.5}.tags-section{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-top:var(--spacing-lg);padding-top:var(--spacing-md);border-top:1px solid var(--border-color);align-items:center}.tags-label{color:var(--text-muted);font-size:.85rem}.modal-subtitle{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.9rem;color:var(--text-secondary)}.modal-map{color:var(--accent-teal);font-weight:500}.modal-separator{color:var(--text-muted)}.modal-side{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.8rem;font-weight:500}.modal-side.attack{background:#ff465533;color:var(--accent-red)}.modal-side.defense{background:#00d4aa33;color:var(--accent-teal)}.modal-title-section{flex:1}.modal-title-section h2{margin-bottom:var(--spacing-xs)}.modal-agent-icon{width:56px;height:56px;border-radius:var(--radius-md);object-fit:cover}.page-container{min-height:100vh;display:flex;flex-direction:column}.site-header{background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);border-bottom:1px solid var(--border-color);padding:var(--spacing-md) var(--spacing-xl);position:sticky;top:0;z-index:100}.header-container{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg)}.header-brand{display:flex;align-items:center;gap:var(--spacing-sm);text-decoration:none;font-size:1.5rem;font-weight:800}.header-brand .logo-icon{font-size:1.8rem}.header-brand .logo-text{background:linear-gradient(135deg,var(--accent-red) 0%,var(--accent-teal) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-nav{display:flex;gap:var(--spacing-md)}.nav-link{color:var(--text-secondary);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-fast);font-weight:500}.nav-link:hover,.nav-link.active{color:var(--text-primary);background:var(--bg-tertiary)}.nav-link.active{color:var(--accent-red)}.header-actions{display:flex;align-items:center;gap:var(--spacing-md)}.header-stats{display:flex;gap:var(--spacing-sm)}.stat-badge{background:var(--bg-tertiary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);font-size:.85rem;color:var(--text-secondary)}.stat-badge strong{color:var(--accent-teal)}.site-footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:var(--spacing-2xl) var(--spacing-xl);margin-top:auto}.footer-container{max-width:1200px;margin:0 auto}.footer-brand{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.footer-brand .logo-icon{font-size:2rem}.footer-brand .logo-text{font-size:1.5rem;font-weight:800;color:var(--text-primary)}.footer-tagline{color:var(--text-secondary);margin-top:var(--spacing-xs);font-size:.9rem}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xl);margin:var(--spacing-xl) 0}.footer-column h4{color:var(--text-primary);margin-bottom:var(--spacing-md);font-size:1rem}.footer-column a,.footer-column span{display:block;color:var(--text-secondary);text-decoration:none;margin-bottom:var(--spacing-sm);font-size:.9rem;transition:color var(--transition-fast)}.footer-column a:hover{color:var(--accent-teal)}.footer-bottom{border-top:1px solid var(--border-color);padding-top:var(--spacing-lg);text-align:center;color:var(--text-muted);font-size:.85rem}.footer-bottom .disclaimer{margin-top:var(--spacing-sm);font-size:.8rem}.footer-bottom .made-with{margin-top:var(--spacing-sm);color:var(--accent-red)}.blog-page,.about-page,.contact-page,.blog-post-page{flex:1;padding:var(--spacing-xl);max-width:1200px;margin:0 auto;width:100%}.page-header{text-align:center;margin-bottom:var(--spacing-2xl)}.page-header h1{font-size:2.5rem;margin-bottom:var(--spacing-md);background:linear-gradient(135deg,var(--accent-red) 0%,var(--accent-teal) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-header p{color:var(--text-secondary);font-size:1.1rem}.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--spacing-lg)}.blog-card{background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;transition:all var(--transition-normal);border:1px solid var(--border-color)}.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent-red)}.blog-card-image{height:200px;overflow:hidden}.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.blog-card:hover .blog-card-image img{transform:scale(1.05)}.blog-card-content{padding:var(--spacing-lg)}.blog-card-tags{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.blog-card-content h2{font-size:1.25rem;color:var(--text-primary);margin-bottom:var(--spacing-sm);line-height:1.4}.blog-card-content p{color:var(--text-secondary);font-size:.95rem;line-height:1.6}.blog-card-meta{display:flex;justify-content:space-between;margin-top:var(--spacing-md);color:var(--text-muted);font-size:.85rem}.blog-post{max-width:800px;margin:0 auto}.back-link{color:var(--accent-teal);text-decoration:none;display:inline-block;margin-bottom:var(--spacing-md)}.back-link:hover{text-decoration:underline}.post-header{margin-bottom:var(--spacing-xl)}.post-tags{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.post-header h1{font-size:2.5rem;line-height:1.3;margin-bottom:var(--spacing-md)}.post-meta{display:flex;gap:var(--spacing-md);color:var(--text-secondary)}.post-image{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--spacing-xl)}.post-image img{width:100%;height:auto}.post-content{color:var(--text-secondary);line-height:1.8;font-size:1.1rem}.post-content h1,.post-content h2,.post-content h3{color:var(--text-primary);margin:var(--spacing-xl) 0 var(--spacing-md)}.post-content p{margin-bottom:var(--spacing-md)}.post-content li{margin-left:var(--spacing-xl);margin-bottom:var(--spacing-sm)}.related-posts{margin-top:var(--spacing-2xl);padding-top:var(--spacing-xl);border-top:1px solid var(--border-color)}.related-posts h3{margin-bottom:var(--spacing-lg)}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}.related-card{background:var(--bg-card);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;transition:all var(--transition-fast)}.related-card:hover{transform:translateY(-2px)}.related-card img{width:100%;height:120px;object-fit:cover}.related-card h4{padding:var(--spacing-md);color:var(--text-primary);font-size:.95rem}.about-hero{text-align:center;padding:var(--spacing-2xl) 0;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border-radius:var(--radius-xl);margin-bottom:var(--spacing-2xl)}.about-hero h1{font-size:3rem;margin-bottom:var(--spacing-md)}.about-hero .subtitle{color:var(--text-secondary);font-size:1.2rem}.about-section{margin-bottom:var(--spacing-2xl)}.about-section h2{font-size:1.75rem;margin-bottom:var(--spacing-md);color:var(--accent-teal)}.about-section p{color:var(--text-secondary);font-size:1.1rem;line-height:1.8}.features-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.features-list li{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-card);border-radius:var(--radius-md);color:var(--text-secondary)}.feature-icon{color:var(--accent-teal);font-size:1.5rem}.about-cta{text-align:center;padding:var(--spacing-2xl);background:var(--bg-card);border-radius:var(--radius-xl)}.about-cta h2{margin-bottom:var(--spacing-lg)}.contact-hero{text-align:center;margin-bottom:var(--spacing-2xl)}.contact-hero h1{font-size:2.5rem;margin-bottom:var(--spacing-md)}.contact-hero p{color:var(--text-secondary)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-2xl)}.contact-form{background:var(--bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg)}.form-group{margin-bottom:var(--spacing-lg)}.form-group label{display:block;margin-bottom:var(--spacing-sm);color:var(--text-secondary);font-weight:500}.form-group input,.form-group textarea{width:100%;padding:var(--spacing-md);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem;transition:border-color var(--transition-fast)}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent-red)}.btn-primary{background:linear-gradient(135deg,var(--accent-red) 0%,#ff6b77 100%);color:#fff;border:none;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;display:inline-block}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.success-message{text-align:center;padding:var(--spacing-2xl)}.success-icon{font-size:4rem;color:var(--accent-teal);display:block;margin-bottom:var(--spacing-lg)}.faq-section{margin-bottom:var(--spacing-xl)}.faq-item{background:var(--bg-card);padding:var(--spacing-lg);border-radius:var(--radius-md);margin-bottom:var(--spacing-md)}.faq-item h4{color:var(--text-primary);margin-bottom:var(--spacing-sm)}.faq-item p{color:var(--text-secondary);font-size:.95rem}.socials-section h3{margin-bottom:var(--spacing-md)}.social-links{display:flex;gap:var(--spacing-md)}.social-link{padding:var(--spacing-md) var(--spacing-lg);background:var(--bg-card);border-radius:var(--radius-md);text-decoration:none;color:var(--text-primary);font-weight:500;transition:all var(--transition-fast)}.social-link:hover{background:var(--bg-tertiary);transform:translateY(-2px)}.social-link.discord{border-left:3px solid #5865F2}.social-link.twitter{border-left:3px solid #1DA1F2}.social-link.youtube{border-left:3px solid #FF0000}.admin-container{min-height:100vh;background:var(--bg-primary)}.admin-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl)}.login-card{background:var(--bg-card);padding:var(--spacing-2xl);border-radius:var(--radius-xl);width:100%;max-width:400px;text-align:center;border:1px solid var(--border-color)}.login-card h1{font-size:1.75rem;margin-bottom:var(--spacing-xl)}.login-card .form-group{text-align:left}.change-notice{background:#ff46551a;color:var(--accent-red);padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);font-size:.9rem}.back-home{display:block;margin-top:var(--spacing-lg);color:var(--text-secondary);text-decoration:none}.back-home:hover{color:var(--accent-teal)}.error-message{background:#ff46551a;color:var(--accent-red);padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);font-size:.9rem}.admin-sidebar{position:fixed;left:0;top:0;width:250px;height:100vh;background:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:var(--spacing-lg)}.admin-brand{font-size:1.5rem;font-weight:800;margin-bottom:var(--spacing-xl);display:flex;align-items:center;gap:var(--spacing-sm)}.admin-nav{flex:1;display:flex;flex-direction:column;gap:var(--spacing-sm)}.admin-nav button{background:transparent;border:none;color:var(--text-secondary);padding:var(--spacing-md);border-radius:var(--radius-md);text-align:left;cursor:pointer;font-size:1rem;transition:all var(--transition-fast)}.admin-nav button:hover{background:var(--bg-tertiary);color:var(--text-primary)}.admin-nav button.active{background:var(--bg-tertiary);color:var(--accent-red)}.admin-footer{display:flex;flex-direction:column;gap:var(--spacing-sm)}.logout-btn{background:#ff46551a!important;color:var(--accent-red)!important}.home-link{color:var(--text-secondary);text-decoration:none;padding:var(--spacing-md);text-align:center}.admin-main{margin-left:250px;padding:var(--spacing-xl);min-height:100vh}.admin-dashboard h2,.admin-lineups h2,.admin-blog h2,.admin-settings h2{font-size:1.75rem;margin-bottom:var(--spacing-xl)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg);margin-bottom:var(--spacing-2xl)}.stat-card{background:var(--bg-card);padding:var(--spacing-lg);border-radius:var(--radius-lg);display:flex;align-items:center;gap:var(--spacing-lg);border:1px solid var(--border-color)}.stat-card .stat-icon{font-size:2.5rem}.stat-card .stat-value{font-size:2rem;font-weight:700;color:var(--accent-teal);display:block}.stat-card .stat-label{color:var(--text-secondary);font-size:.9rem}.recent-section h3,.section-header h2{margin-bottom:var(--spacing-lg)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.recent-list{background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden}.recent-item{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.recent-item:last-child{border-bottom:none}.item-title{color:var(--text-primary)}.item-meta{color:var(--text-muted);font-size:.85rem}.lineup-table,.blog-table{background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden}.lineup-table table,.blog-table table{width:100%;border-collapse:collapse}.lineup-table th,.blog-table th{background:var(--bg-tertiary);padding:var(--spacing-md) var(--spacing-lg);text-align:left;color:var(--text-secondary);font-weight:600}.lineup-table td,.blog-table td{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color)}.type-badge{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.8rem;text-transform:uppercase;background:var(--bg-tertiary)}.type-badge.smoke{background:#6464644d}.type-badge.molly{background:#ff6b354d;color:#ff6b35}.type-badge.recon{background:#00d9ff4d;color:#00d9ff}.type-badge.flash{background:#ffd93d4d;color:#ffd93d}.btn-small{padding:var(--spacing-xs) var(--spacing-sm);border:none;border-radius:var(--radius-sm);cursor:pointer;margin-right:var(--spacing-xs);background:var(--bg-tertiary)}.btn-small.btn-danger{background:#ff465533}.settings-form{max-width:400px;background:var(--bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg)}.settings-section h3{margin-bottom:var(--spacing-lg)}.tag{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);background:#00d4aa26;color:var(--accent-teal);border-radius:var(--radius-sm);font-size:.8rem}.not-found{text-align:center;padding:var(--spacing-2xl)}.not-found h1{font-size:6rem;color:var(--accent-red);margin-bottom:var(--spacing-md)}.not-found p{color:var(--text-secondary);margin-bottom:var(--spacing-xl)}@media(max-width:1024px){.admin-sidebar{width:200px}.admin-main{margin-left:200px}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.header-nav{display:none}.footer-links,.contact-grid,.features-list,.related-grid{grid-template-columns:1fr}.admin-sidebar{display:none}.admin-main{margin-left:0}.stats-grid{grid-template-columns:1fr}}.favorite-btn{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background:#0009;border:none;border-radius:var(--radius-full);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;transition:all var(--transition-fast);z-index:10}.favorite-btn:hover{transform:scale(1.1);background:#000c}.favorite-btn.active{animation:heartPulse .3s ease}@keyframes heartPulse{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}.lineup-submit-form{background:var(--bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg);max-width:600px;margin:0 auto}.lineup-submit-form h2{margin-bottom:var(--spacing-lg);text-align:center}.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}.form-group select{width:100%;padding:var(--spacing-md);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem}.form-group select:focus{outline:none;border-color:var(--accent-red)}.user-menu{display:flex;align-items:center;gap:var(--spacing-sm)}.user-avatar{width:32px;height:32px;border-radius:var(--radius-full);object-fit:cover}.login-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;font-size:.9rem;transition:all var(--transition-fast)}.login-btn:hover{background:var(--bg-card-hover);border-color:var(--accent-teal)}.lineup-card-image{position:relative}.nav-links{display:flex;gap:var(--spacing-md);margin-left:var(--spacing-xl)}.nav-links .nav-link{color:var(--text-secondary);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-fast);font-weight:500;font-size:.95rem}.nav-links .nav-link:hover{color:var(--text-primary);background:var(--bg-tertiary)}.navbar-brand{display:flex;align-items:center}.navbar-brand .logo{text-decoration:none;display:flex;align-items:center;gap:var(--spacing-sm)}@media(max-width:900px){.nav-links{display:none}}.lineup-card-image{position:relative;height:180px;overflow:hidden;background:var(--bg-tertiary)}.lineup-thumbnail{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.lineup-card:hover .lineup-thumbnail{transform:scale(1.05)}.lineup-gradient{width:100%;height:100%}