diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..6bce0cf
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,1056 @@
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --bg-deep: #08080c;
+            --bg-dark: #0d0d15;
+            --bg-panel: rgba(8, 8, 12, 0.85);
+            --cyan: #00f5ff;
+            --orange: #ff6b35;
+            --pink: #ff2a6d;
+            --text-primary: #f0f0f5;
+            --text-secondary: #8a8a9a;
+            --border-glow: rgba(0, 245, 255, 0.5);
+            --text-on-image: rgba(255, 255, 255, 0.95);
+            --text-shadow-strong: 0 2px 8px rgba(0, 0, 0, 0.9);
+        }
+
+        body {
+            font-family: 'Rajdhani', sans-serif;
+            background: var(--bg-deep);
+            color: var(--text-primary);
+            overflow-x: hidden;
+            -webkit-font-smoothing: antialiased;
+        }
+
+        /* HUD Navigation - Minimal to not obstruct character view */
+        .hud-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 60px;
+            background: linear-gradient(180deg, rgba(8, 8, 12, 0.95) 0%, rgba(8, 8, 12, 0.7) 80%, transparent 100%);
+            backdrop-filter: blur(10px);
+            z-index: 1000;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 40px;
+        }
+
+        .nav-logo {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 14px;
+            font-weight: 900;
+            letter-spacing: 4px;
+            color: var(--cyan);
+            text-shadow: 0 0 15px var(--cyan);
+        }
+
+        .nav-links {
+            display: flex;
+            gap: 40px;
+        }
+
+        .nav-links a {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 11px;
+            font-weight: 500;
+            color: var(--text-secondary);
+            text-decoration: none;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            transition: color 0.2s, text-shadow 0.2s;
+            cursor: pointer;
+        }
+
+        .nav-links a:hover {
+            color: var(--cyan);
+            text-shadow: 0 0 10px var(--cyan);
+        }
+
+        /* Hero Section - Full Character Focus */
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hero-character {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            max-width: 900px;
+            height: 100vh;
+            object-fit: cover;
+            object-position: center top;
+            z-index: 1;
+            filter: brightness(0.9) contrast(1.1);
+        }
+
+        .hero-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(180deg, rgba(8, 8, 12, 0.3) 0%, rgba(8, 8, 12, 0.5) 50%, rgba(8, 8, 12, 0.8) 100%);
+            z-index: 2;
+        }
+
+        .hero-content {
+            position: relative;
+            z-index: 3;
+            text-align: center;
+            margin-top: 60vh;
+            padding: 30px 40px;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            border: 1px solid rgba(255, 107, 53, 0.3);
+            box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(255, 107, 53, 0.1);
+        }
+
+        .hero-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            padding: 8px 20px;
+            background: rgba(255, 107, 53, 0.2);
+            border: 1px solid var(--orange);
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 11px;
+            letter-spacing: 3px;
+            text-transform: uppercase;
+            color: var(--orange);
+            margin-bottom: 20px;
+            backdrop-filter: blur(10px);
+        }
+
+        .hero h1 {
+            font-family: 'Orbitron', sans-serif;
+            font-size: clamp(48px, 10vw, 100px);
+            font-weight: 900;
+            line-height: 1;
+            letter-spacing: -2px;
+        }
+
+        .hero h1 .outline {
+            -webkit-text-stroke: 2px var(--orange);
+            paint-order: stroke fill;
+            color: transparent;
+            filter: drop-shadow(0 0 30px var(--orange)) drop-shadow(0 0 60px rgba(255, 107, 53, 0.5));
+        }
+
+        .hero p {
+            font-size: 16px;
+            color: #fff;
+            max-width: 500px;
+            margin: 20px auto 0;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+            line-height: 1.5;
+        }
+
+        .scroll-indicator {
+            position: absolute;
+            bottom: 40px;
+            left: 50%;
+            transform: translateX(-50%);
+            animation: bounce 2s infinite;
+            font-size: 24px;
+            color: var(--text-on-image);
+            text-shadow: var(--text-shadow-strong);
+            z-index: 3;
+        }
+
+        @keyframes bounce {
+            0%, 100% { transform: translateX(-50%) translateY(0); }
+            50% { transform: translateX(-50%) translateY(-15px); }
+        }
+
+        /* Character Showcase Sections - FULL CHARACTER VISUAL */
+        .character-showcase {
+            min-height: 100vh;
+            position: relative;
+            display: flex;
+            overflow: hidden;
+        }
+
+        .character-showcase:nth-child(even) {
+            flex-direction: row-reverse;
+        }
+
+        .character-showcase-character {
+            position: absolute;
+            top: 0;
+            width: 65%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center center;
+            z-index: 1;
+        }
+
+        .character-showcase:nth-child(odd) .character-showcase-character {
+            right: 0;
+        }
+
+        .character-showcase:nth-child(even) .character-showcase-character {
+            left: 0;
+        }
+
+        .character-overlay {
+            position: absolute;
+            top: 0;
+            width: 65%;
+            height: 100%;
+            z-index: 2;
+            background: linear-gradient(90deg, rgba(8, 8, 12, 0.7) 0%, rgba(8, 8, 12, 0.3) 60%, rgba(8, 8, 12, 0.7) 100%);
+        }
+
+        .character-showcase:nth-child(even) .character-overlay {
+            background: linear-gradient(270deg, rgba(8, 8, 12, 0.7) 0%, rgba(8, 8, 12, 0.3) 40%, rgba(8, 8, 12, 0.7) 100%);
+        }
+
+        .character-showcase-content {
+            position: relative;
+            z-index: 3;
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: 60px;
+        }
+
+        .character-showcase:nth-child(odd) .character-showcase-content {
+            margin-left: auto;
+        }
+
+        .character-showcase:nth-child(even) .character-showcase-content {
+            margin-right: auto;
+        }
+
+        .character-number {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 14px;
+            letter-spacing: 4px;
+            color: var(--orange);
+            margin-bottom: 20px;
+        }
+
+        .character-name {
+            font-family: 'Orbitron', sans-serif;
+            font-size: clamp(42px, 6vw, 64px);
+            font-weight: 900;
+            line-height: 1;
+            margin-bottom: 15px;
+            text-shadow: 0 3px 15px rgba(0, 0, 0, 0.8);
+        }
+
+        .character-subtitle {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 12px;
+            letter-spacing: 3px;
+            text-transform: uppercase;
+            color: var(--cyan);
+            margin-bottom: 25px;
+        }
+
+        .character-tags {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 25px;
+            flex-wrap: wrap;
+        }
+
+        .char-tag {
+            padding: 6px 14px;
+            background: rgba(0, 245, 255, 0.15);
+            border: 1px solid var(--cyan);
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 11px;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            color: var(--cyan);
+            backdrop-filter: blur(5px);
+        }
+
+        .char-tier-ss {
+            border-color: var(--orange);
+            color: var(--orange);
+            background: rgba(255, 107, 53, 0.15);
+        }
+
+        .char-tier-s {
+            border-color: #a855f7;
+            color: #a855f7;
+            background: rgba(168, 85, 247, 0.15);
+        }
+
+        .char-tier-a {
+            border-color: #22c55e;
+            color: #22c55e;
+            background: rgba(34, 197, 94, 0.15);
+        }
+
+        .character-quote {
+            font-size: 18px;
+            line-height: 1.6;
+            color: var(--text-on-image);
+            font-style: italic;
+            margin-bottom: 25px;
+            padding: 20px;
+            background: rgba(0, 0, 0, 0.3);
+            border-left: 3px solid var(--cyan);
+            backdrop-filter: blur(10px);
+        }
+
+        /* Tier List Grid */
+        .section {
+            padding: 80px 40px;
+            position: relative;
+        }
+
+        .section-header {
+            text-align: center;
+            margin-bottom: 50px;
+        }
+
+        .section-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: clamp(32px, 5vw, 48px);
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 4px;
+            color: var(--text-primary);
+        }
+
+        .tier-header {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            margin: 30px 0 20px;
+        }
+
+        .tier-badge {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 28px;
+            font-weight: 900;
+            padding: 10px 20px;
+            clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
+        }
+
+        .tier-ss { background: linear-gradient(135deg, #ff6b6b, #feca57); color: #000; }
+        .tier-s { background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff; }
+        .tier-a { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
+
+        .tier-label {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 11px;
+            letter-spacing: 3px;
+            text-transform: uppercase;
+            color: var(--text-secondary);
+        }
+
+        .operator-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            gap: 20px;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .operator-card {
+            background: var(--bg-panel);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 16px;
+            overflow: hidden;
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+
+        .operator-card:hover {
+            border-color: var(--border-glow);
+            transform: translateY(-8px);
+            box-shadow: 0 20px 60px rgba(0, 245, 255, 0.2);
+        }
+
+        .operator-card-img {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+            object-position: center top;
+        }
+
+        .operator-card-content {
+            padding: 20px;
+            text-align: center;
+        }
+
+        .operator-card h4 {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 14px;
+            font-weight: 600;
+            letter-spacing: 1px;
+            margin-bottom: 10px;
+        }
+
+        .operator-card .tier {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 10px;
+            padding: 3px 8px;
+            border-radius: 4px;
+            display: inline-block;
+            margin-bottom: 10px;
+        }
+
+        .tier-ss-bg { background: linear-gradient(135deg, #ff6b6b, #feca57); color: #000; }
+        .tier-s-bg { background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff; }
+        .tier-a-bg { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
+
+        /* Team Builder */
+        .team-builder {
+            background: var(--bg-panel);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 20px;
+            padding: 40px;
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+
+        .team-slots {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 30px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .team-slot {
+            width: 90px;
+            height: 90px;
+            background: rgba(255, 255, 255, 0.03);
+            border: 2px dashed rgba(255, 255, 255, 0.2);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: 'Orbitron', sans-serif;
+            font-size: 28px;
+            color: var(--text-secondary);
+            transition: all 0.3s;
+        }
+
+        .team-slot.filled {
+            border-style: solid;
+            border-color: var(--cyan);
+            overflow: hidden;
+            padding: 0;
+            box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
+        }
+
+        .team-slot.filled img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center top;
+        }
+
+        .operator-select {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+            gap: 12px;
+            margin-bottom: 30px;
+        }
+
+        .select-option {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            padding: 12px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .select-option:hover {
+            border-color: rgba(0, 245, 255, 0.4);
+            background: rgba(0, 245, 255, 0.05);
+        }
+
+        .select-option.selected {
+            border-color: var(--cyan);
+            background: rgba(0, 245, 255, 0.15);
+            box-shadow: 0 0 20px rgba(0, 245, 255, 0.2);
+        }
+
+        .select-option img {
+            width: 60px;
+            height: 60px;
+            object-fit: cover;
+            object-position: center top;
+            border-radius: 8px;
+            margin-bottom: 8px;
+        }
+
+        .select-option .name {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 11px;
+            font-weight: 500;
+        }
+
+        .suggestions {
+            background: rgba(0, 245, 255, 0.05);
+            border: 1px solid var(--border-glow);
+            border-radius: 16px;
+            padding: 25px;
+            display: none;
+        }
+
+        .suggestions.active {
+            display: block;
+        }
+
+        .suggestion-item {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            padding: 15px;
+            background: var(--bg-panel);
+            border-left: 3px solid var(--cyan);
+            margin-bottom: 10px;
+            border-radius: 8px;
+        }
+
+        .suggestion-item img {
+            width: 50px;
+            height: 50px;
+            object-fit: cover;
+            object-position: center top;
+            border-radius: 8px;
+        }
+
+        .suggestion-info h5 {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 4px;
+        }
+
+        .suggestion-info p {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        .clear-btn {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 11px;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            background: transparent;
+            border: 1px solid var(--orange);
+            color: var(--orange);
+            padding: 12px 30px;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: block;
+            margin: 0 auto;
+        }
+
+        .clear-btn:hover {
+            background: var(--orange);
+            color: #000;
+        }
+
+        /* Footer */
+        footer {
+            padding: 40px;
+            text-align: center;
+            border-top: 1px solid rgba(255, 255, 255, 0.05);
+        }
+
+        footer p {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 11px;
+            color: var(--text-secondary);
+            letter-spacing: 2px;
+        }
+
+        /* Mobile Menu Button */
+        .mobile-menu-btn {
+            display: none;
+            position: fixed;
+            top: 15px;
+            right: 15px;
+            z-index: 1001;
+            width: 44px;
+            height: 44px;
+            background: rgba(8, 8, 12, 0.9);
+            border: 1px solid var(--cyan);
+            border-radius: 8px;
+            cursor: pointer;
+            padding: 10px;
+            flex-direction: column;
+            justify-content: space-around;
+            transition: all 0.3s;
+        }
+
+        .mobile-menu-btn:hover {
+            background: rgba(0, 245, 255, 0.2);
+            box-shadow: 0 0 15px rgba(0, 245, 255, 0.4);
+        }
+
+        .mobile-menu-btn span {
+            display: block;
+            width: 100%;
+            height: 2px;
+            background: var(--cyan);
+            border-radius: 2px;
+            transition: all 0.3s;
+            transform-origin: center;
+        }
+
+        .mobile-menu-btn.active span:nth-child(1) {
+            transform: rotate(45deg) translate(5px, 5px);
+        }
+
+        .mobile-menu-btn.active span:nth-child(2) {
+            opacity: 0;
+        }
+
+        .mobile-menu-btn.active span:nth-child(3) {
+            transform: rotate(-45deg) translate(5px, -5px);
+        }
+
+        /* Responsive */
+        @media (max-width: 1024px) {
+            .character-showcase {
+                flex-direction: column !important;
+                min-height: auto;
+                padding-top: 40vh;
+            }
+
+            .character-showcase-character {
+                position: absolute;
+                top: 0;
+                left: 50% !important;
+                right: auto !important;
+                transform: translateX(-50%);
+                width: 100%;
+                height: 40vh;
+                object-fit: cover;
+                object-position: top center;
+                opacity: 1;
+                z-index: 1;
+            }
+
+            .character-overlay {
+                display: none;
+            }
+
+            .character-showcase-content {
+                position: relative;
+                z-index: 2;
+                width: 100%;
+                background: linear-gradient(to top, var(--bg-dark) 20%, var(--bg-panel) 100%);
+                margin: 0;
+                padding: 40px 30px;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .mobile-menu-btn {
+                display: flex;
+            }
+
+            .hud-nav {
+                padding: 0 70px 0 20px;
+                height: 60px;
+                background: rgba(8, 8, 12, 0.98);
+            }
+
+            .nav-links {
+                display: none;
+                position: fixed;
+                top: 60px;
+                left: 0;
+                right: 0;
+                flex-direction: column;
+                background: rgba(8, 8, 12, 0.98);
+                backdrop-filter: blur(20px);
+                padding: 20px;
+                gap: 0;
+                border-bottom: 1px solid rgba(0, 245, 255, 0.2);
+            }
+
+            .nav-links.active {
+                display: flex;
+            }
+
+            .nav-links a {
+                padding: 15px 0;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+                font-size: 14px;
+            }
+
+            .hero h1 { font-size: 48px; }
+            .operator-grid { grid-template-columns: repeat(3, 1fr); }
+            .operator-select { grid-template-columns: repeat(4, 1fr); }
+            .guide-grid { grid-template-columns: 1fr; }
+
+            .character-showcase {
+                padding-top: 35vh;
+            }
+
+            .character-showcase-character {
+                height: 35vh;
+            }
+
+            .character-showcase-content {
+                padding: 30px 20px;
+            }
+
+            .character-showcase-content h2 {
+                font-size: 28px;
+            }
+        }
+
+        /* Animations */
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(30px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .animate-in {
+            animation: fadeInUp 0.8s ease forwards;
+        }
+
+        .delay-1 { animation-delay: 0.1s; }
+        .delay-2 { animation-delay: 0.2s; }
+        .delay-3 { animation-delay: 0.3s; }
+
+        /* Reduced motion */
+        @media (prefers-reduced-motion: reduce) {
+            * { animation-duration: 0.01ms !important; }
+        }
+
+        /* Builds Modal */
+        .builds-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.9);
+            z-index: 2000;
+            overflow-y: auto;
+            padding: 40px 20px;
+        }
+
+        .builds-modal.active {
+            display: block;
+        }
+
+        .builds-container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .builds-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 40px;
+        }
+
+        .builds-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 32px;
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .builds-close {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 14px;
+            color: var(--orange);
+            background: transparent;
+            border: 1px solid var(--orange);
+            padding: 10px 20px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .builds-close:hover {
+            background: var(--orange);
+            color: #000;
+        }
+
+        .operator-build {
+            background: var(--bg-panel);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            margin-bottom: 30px;
+            overflow: hidden;
+        }
+
+        .operator-build-header {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            padding: 25px;
+            background: rgba(0, 245, 255, 0.05);
+            border-bottom: 1px solid rgba(0, 245, 255, 0.2);
+        }
+
+        .operator-build-avatar {
+            width: 80px;
+            height: 80px;
+            background: var(--bg-dark);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+
+        .operator-build-avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .operator-build-info h3 {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 20px;
+            font-weight: 700;
+            margin-bottom: 5px;
+        }
+
+        .operator-build-role {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 11px;
+            color: var(--cyan);
+            letter-spacing: 2px;
+        }
+
+        .build-section {
+            padding: 20px 25px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+
+        .build-section:last-child {
+            border-bottom: none;
+        }
+
+        .build-section-title {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 11px;
+            letter-spacing: 2px;
+            color: var(--orange);
+            margin-bottom: 15px;
+            text-transform: uppercase;
+        }
+
+        .build-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px 15px;
+            background: rgba(255, 255, 255, 0.03);
+            border-radius: 10px;
+            margin-bottom: 8px;
+        }
+
+        .build-item:last-child {
+            margin-bottom: 0;
+        }
+
+        .build-item-priority {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 10px;
+            padding: 3px 8px;
+            border-radius: 4px;
+            font-weight: 600;
+        }
+
+        .priority-s { background: linear-gradient(135deg, #ff6b6b, #feca57); color: #000; }
+        .priority-a { background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff; }
+        .priority-b { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
+
+        .build-item-name {
+            font-family: 'Rajdhani', sans-serif;
+            font-size: 14px;
+            color: var(--text-primary);
+        }
+
+        .build-item-desc {
+            font-size: 12px;
+            color: var(--text-secondary);
+            margin-left: auto;
+        }
+
+        /* Game Guide Section */
+        .guide-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 25px;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .guide-card {
+            background: var(--bg-panel);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 16px;
+            padding: 25px;
+            transition: all 0.3s;
+        }
+
+        .guide-card:hover {
+            border-color: var(--border-glow);
+            box-shadow: 0 10px 40px rgba(0, 245, 255, 0.1);
+        }
+
+        .guide-card h3 {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 16px;
+            font-weight: 700;
+            color: var(--orange);
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .guide-card h3::before {
+            content: '>';
+            font-family: 'Share Tech Mono', monospace;
+            color: var(--cyan);
+        }
+
+        .guide-card h4 {
+            font-family: 'Rajdhani', sans-serif;
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin: 15px 0 8px;
+        }
+
+        .guide-card p {
+            font-size: 13px;
+            line-height: 1.6;
+            color: var(--text-secondary);
+            margin-bottom: 10px;
+        }
+
+        .guide-card ul {
+            list-style: none;
+            padding: 0;
+            margin: 10px 0;
+        }
+
+        .guide-card li {
+            font-size: 13px;
+            color: var(--text-secondary);
+            padding: 5px 0;
+            padding-left: 20px;
+            position: relative;
+        }
+
+        .guide-card li::before {
+            content: '•';
+            position: absolute;
+            left: 0;
+            color: var(--cyan);
+        }
+
+        .currency-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 15px 0;
+        }
+
+        .currency-table th {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 11px;
+            text-align: left;
+            padding: 10px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            color: var(--orange);
+        }
+
+        .currency-table td {
+            font-size: 12px;
+            padding: 10px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            color: var(--text-secondary);
+        }
+
+        .currency-table tr:last-child td {
+            border-bottom: none;
+        }
+
+        .highlight-box {
+            background: rgba(255, 107, 53, 0.1);
+            border-left: 3px solid var(--orange);
+            padding: 15px;
+            margin: 15px 0;
+            border-radius: 0 8px 8px 0;
+        }
+
+        .highlight-box p {
+            margin: 0;
+            color: #ffb88c;
+        }
+
+        .tip-box {
+            background: rgba(0, 245, 255, 0.05);
+            border-left: 3px solid var(--cyan);
+            padding: 12px 15px;
+            margin: 10px 0;
+            border-radius: 0 8px 8px 0;
+        }
+
+        .tip-box p {
+            margin: 0;
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        .stat-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 10px;
+            margin: 15px 0;
+        }
+
+        .stat-item {
+            background: rgba(255, 255, 255, 0.03);
+            padding: 12px;
+            border-radius: 8px;
+            text-align: center;
+        }
+
+        .stat-value {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 18px;
+            font-weight: 700;
+            color: var(--cyan);
+        }
+
+        .stat-label {
+            font-size: 10px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
diff --git a/index.html b/index.html
index c690b32..5b08e7d 100644
--- a/index.html
+++ b/index.html
@@ -7,988 +7,16 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        :root {
-            --bg-deep: #08080c;
-            --bg-dark: #0d0d15;
-            --bg-panel: rgba(8, 8, 12, 0.85);
-            --cyan: #00f5ff;
-            --orange: #ff6b35;
-            --pink: #ff2a6d;
-            --text-primary: #f0f0f5;
-            --text-secondary: #8a8a9a;
-            --border-glow: rgba(0, 245, 255, 0.5);
-            --text-on-image: rgba(255, 255, 255, 0.95);
-            --text-shadow-strong: 0 2px 8px rgba(0, 0, 0, 0.9);
-        }
-
-        body {
-            font-family: 'Rajdhani', sans-serif;
-            background: var(--bg-deep);
-            color: var(--text-primary);
-            overflow-x: hidden;
-            -webkit-font-smoothing: antialiased;
-        }
-
-        /* HUD Navigation - Minimal to not obstruct character view */
-        .hud-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 60px;
-            background: linear-gradient(180deg, rgba(8, 8, 12, 0.95) 0%, rgba(8, 8, 12, 0.7) 80%, transparent 100%);
-            backdrop-filter: blur(10px);
-            z-index: 1000;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 40px;
-        }
-
-        .nav-logo {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 14px;
-            font-weight: 900;
-            letter-spacing: 4px;
-            color: var(--cyan);
-            text-shadow: 0 0 15px var(--cyan);
-        }
-
-        .nav-links {
-            display: flex;
-            gap: 40px;
-        }
-
-        .nav-links a {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 11px;
-            font-weight: 500;
-            color: var(--text-secondary);
-            text-decoration: none;
-            letter-spacing: 2px;
-            text-transform: uppercase;
-            transition: color 0.2s, text-shadow 0.2s;
-            cursor: pointer;
-        }
-
-        .nav-links a:hover {
-            color: var(--cyan);
-            text-shadow: 0 0 10px var(--cyan);
-        }
-
-        /* Hero Section - Full Character Focus */
-        .hero {
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .hero-character {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 100%;
-            max-width: 900px;
-            height: 100vh;
-            object-fit: cover;
-            object-position: center top;
-            z-index: 1;
-            filter: brightness(0.9) contrast(1.1);
-        }
-
-        .hero-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(180deg, rgba(8, 8, 12, 0.3) 0%, rgba(8, 8, 12, 0.5) 50%, rgba(8, 8, 12, 0.8) 100%);
-            z-index: 2;
-        }
-
-        .hero-content {
-            position: relative;
-            z-index: 3;
-            text-align: center;
-            margin-top: 60vh;
-            padding: 30px 40px;
-            background: rgba(0, 0, 0, 0.6);
-            backdrop-filter: blur(20px);
-            border-radius: 20px;
-            border: 1px solid rgba(255, 107, 53, 0.3);
-            box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(255, 107, 53, 0.1);
-        }
-
-        .hero-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 10px;
-            padding: 8px 20px;
-            background: rgba(255, 107, 53, 0.2);
-            border: 1px solid var(--orange);
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 11px;
-            letter-spacing: 3px;
-            text-transform: uppercase;
-            color: var(--orange);
-            margin-bottom: 20px;
-            backdrop-filter: blur(10px);
-        }
-
-        .hero h1 {
-            font-family: 'Orbitron', sans-serif;
-            font-size: clamp(48px, 10vw, 100px);
-            font-weight: 900;
-            line-height: 1;
-            letter-spacing: -2px;
-        }
-
-        .hero h1 .outline {
-            -webkit-text-stroke: 2px var(--orange);
-            paint-order: stroke fill;
-            color: transparent;
-            filter: drop-shadow(0 0 30px var(--orange)) drop-shadow(0 0 60px rgba(255, 107, 53, 0.5));
-        }
-
-        .hero p {
-            font-size: 16px;
-            color: #fff;
-            max-width: 500px;
-            margin: 20px auto 0;
-            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
-            line-height: 1.5;
-        }
-
-        .scroll-indicator {
-            position: absolute;
-            bottom: 40px;
-            left: 50%;
-            transform: translateX(-50%);
-            animation: bounce 2s infinite;
-            font-size: 24px;
-            color: var(--text-on-image);
-            text-shadow: var(--text-shadow-strong);
-            z-index: 3;
-        }
-
-        @keyframes bounce {
-            0%, 100% { transform: translateX(-50%) translateY(0); }
-            50% { transform: translateX(-50%) translateY(-15px); }
-        }
-
-        /* Character Showcase Sections - FULL CHARACTER VISUAL */
-        .character-showcase {
-            min-height: 100vh;
-            position: relative;
-            display: flex;
-            overflow: hidden;
-        }
-
-        .character-showcase:nth-child(even) {
-            flex-direction: row-reverse;
-        }
-
-        .character-showcase-character {
-            position: absolute;
-            top: 0;
-            width: 65%;
-            height: 100%;
-            object-fit: cover;
-            object-position: center center;
-            z-index: 1;
-        }
-
-        .character-showcase:nth-child(odd) .character-showcase-character {
-            right: 0;
-        }
-
-        .character-showcase:nth-child(even) .character-showcase-character {
-            left: 0;
-        }
-
-        .character-overlay {
-            position: absolute;
-            top: 0;
-            width: 65%;
-            height: 100%;
-            z-index: 2;
-            background: linear-gradient(90deg, rgba(8, 8, 12, 0.7) 0%, rgba(8, 8, 12, 0.3) 60%, rgba(8, 8, 12, 0.7) 100%);
-        }
-
-        .character-showcase:nth-child(even) .character-overlay {
-            background: linear-gradient(270deg, rgba(8, 8, 12, 0.7) 0%, rgba(8, 8, 12, 0.3) 40%, rgba(8, 8, 12, 0.7) 100%);
-        }
-
-        .character-showcase-content {
-            position: relative;
-            z-index: 3;
-            width: 50%;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            padding: 60px;
-        }
-
-        .character-showcase:nth-child(odd) .character-showcase-content {
-            margin-left: auto;
-        }
-
-        .character-showcase:nth-child(even) .character-showcase-content {
-            margin-right: auto;
-        }
-
-        .character-number {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 14px;
-            letter-spacing: 4px;
-            color: var(--orange);
-            margin-bottom: 20px;
-        }
-
-        .character-name {
-            font-family: 'Orbitron', sans-serif;
-            font-size: clamp(42px, 6vw, 64px);
-            font-weight: 900;
-            line-height: 1;
-            margin-bottom: 15px;
-            text-shadow: 0 3px 15px rgba(0, 0, 0, 0.8);
-        }
-
-        .character-subtitle {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 12px;
-            letter-spacing: 3px;
-            text-transform: uppercase;
-            color: var(--cyan);
-            margin-bottom: 25px;
-        }
-
-        .character-tags {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 25px;
-            flex-wrap: wrap;
-        }
-
-        .char-tag {
-            padding: 6px 14px;
-            background: rgba(0, 245, 255, 0.15);
-            border: 1px solid var(--cyan);
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 11px;
-            letter-spacing: 2px;
-            text-transform: uppercase;
-            color: var(--cyan);
-            backdrop-filter: blur(5px);
-        }
-
-        .char-tier-ss {
-            border-color: var(--orange);
-            color: var(--orange);
-            background: rgba(255, 107, 53, 0.15);
-        }
-
-        .char-tier-s {
-            border-color: #a855f7;
-            color: #a855f7;
-            background: rgba(168, 85, 247, 0.15);
-        }
-
-        .char-tier-a {
-            border-color: #22c55e;
-            color: #22c55e;
-            background: rgba(34, 197, 94, 0.15);
-        }
-
-        .character-quote {
-            font-size: 18px;
-            line-height: 1.6;
-            color: var(--text-on-image);
-            font-style: italic;
-            margin-bottom: 25px;
-            padding: 20px;
-            background: rgba(0, 0, 0, 0.3);
-            border-left: 3px solid var(--cyan);
-            backdrop-filter: blur(10px);
-        }
-
-        /* Tier List Grid */
-        .section {
-            padding: 80px 40px;
-            position: relative;
-        }
-
-        .section-header {
-            text-align: center;
-            margin-bottom: 50px;
-        }
-
-        .section-title {
-            font-family: 'Orbitron', sans-serif;
-            font-size: clamp(32px, 5vw, 48px);
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 4px;
-            color: var(--text-primary);
-        }
-
-        .tier-header {
-            display: flex;
-            align-items: center;
-            gap: 20px;
-            margin: 30px 0 20px;
-        }
-
-        .tier-badge {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 28px;
-            font-weight: 900;
-            padding: 10px 20px;
-            clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
-        }
-
-        .tier-ss { background: linear-gradient(135deg, #ff6b6b, #feca57); color: #000; }
-        .tier-s { background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff; }
-        .tier-a { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
-
-        .tier-label {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 11px;
-            letter-spacing: 3px;
-            text-transform: uppercase;
-            color: var(--text-secondary);
-        }
-
-        .operator-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-            gap: 20px;
-            max-width: 1400px;
-            margin: 0 auto;
-        }
-
-        .operator-card {
-            background: var(--bg-panel);
-            border: 1px solid rgba(255, 255, 255, 0.08);
-            border-radius: 16px;
-            overflow: hidden;
-            transition: all 0.3s;
-            cursor: pointer;
-        }
-
-        .operator-card:hover {
-            border-color: var(--border-glow);
-            transform: translateY(-8px);
-            box-shadow: 0 20px 60px rgba(0, 245, 255, 0.2);
-        }
-
-        .operator-card-img {
-            width: 100%;
-            height: 200px;
-            object-fit: cover;
-            object-position: center top;
-        }
-
-        .operator-card-content {
-            padding: 20px;
-            text-align: center;
-        }
-
-        .operator-card h4 {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 14px;
-            font-weight: 600;
-            letter-spacing: 1px;
-            margin-bottom: 10px;
-        }
-
-        .operator-card .tier {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 10px;
-            padding: 3px 8px;
-            border-radius: 4px;
-            display: inline-block;
-            margin-bottom: 10px;
-        }
-
-        .tier-ss-bg { background: linear-gradient(135deg, #ff6b6b, #feca57); color: #000; }
-        .tier-s-bg { background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff; }
-        .tier-a-bg { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
-
-        /* Team Builder */
-        .team-builder {
-            background: var(--bg-panel);
-            border: 1px solid rgba(255, 255, 255, 0.08);
-            border-radius: 20px;
-            padding: 40px;
-            max-width: 1000px;
-            margin: 0 auto;
-        }
-
-        .team-slots {
-            display: flex;
-            gap: 15px;
-            margin-bottom: 30px;
-            flex-wrap: wrap;
-            justify-content: center;
-        }
-
-        .team-slot {
-            width: 90px;
-            height: 90px;
-            background: rgba(255, 255, 255, 0.03);
-            border: 2px dashed rgba(255, 255, 255, 0.2);
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-family: 'Orbitron', sans-serif;
-            font-size: 28px;
-            color: var(--text-secondary);
-            transition: all 0.3s;
-        }
-
-        .team-slot.filled {
-            border-style: solid;
-            border-color: var(--cyan);
-            overflow: hidden;
-            padding: 0;
-            box-shadow: 0 0 20px rgba(0, 245, 255, 0.3);
-        }
-
-        .team-slot.filled img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            object-position: center top;
-        }
-
-        .operator-select {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-            gap: 12px;
-            margin-bottom: 30px;
-        }
-
-        .select-option {
-            background: rgba(255, 255, 255, 0.03);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 12px;
-            padding: 12px;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .select-option:hover {
-            border-color: rgba(0, 245, 255, 0.4);
-            background: rgba(0, 245, 255, 0.05);
-        }
-
-        .select-option.selected {
-            border-color: var(--cyan);
-            background: rgba(0, 245, 255, 0.15);
-            box-shadow: 0 0 20px rgba(0, 245, 255, 0.2);
-        }
-
-        .select-option img {
-            width: 60px;
-            height: 60px;
-            object-fit: cover;
-            object-position: center top;
-            border-radius: 8px;
-            margin-bottom: 8px;
-        }
-
-        .select-option .name {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 11px;
-            font-weight: 500;
-        }
-
-        .suggestions {
-            background: rgba(0, 245, 255, 0.05);
-            border: 1px solid var(--border-glow);
-            border-radius: 16px;
-            padding: 25px;
-            display: none;
-        }
-
-        .suggestions.active {
-            display: block;
-        }
-
-        .suggestion-item {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            padding: 15px;
-            background: var(--bg-panel);
-            border-left: 3px solid var(--cyan);
-            margin-bottom: 10px;
-            border-radius: 8px;
-        }
-
-        .suggestion-item img {
-            width: 50px;
-            height: 50px;
-            object-fit: cover;
-            object-position: center top;
-            border-radius: 8px;
-        }
-
-        .suggestion-info h5 {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 14px;
-            font-weight: 600;
-            margin-bottom: 4px;
-        }
-
-        .suggestion-info p {
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-
-        .clear-btn {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 11px;
-            letter-spacing: 2px;
-            text-transform: uppercase;
-            background: transparent;
-            border: 1px solid var(--orange);
-            color: var(--orange);
-            padding: 12px 30px;
-            cursor: pointer;
-            transition: all 0.3s;
-            display: block;
-            margin: 0 auto;
-        }
-
-        .clear-btn:hover {
-            background: var(--orange);
-            color: #000;
-        }
-
-        /* Footer */
-        footer {
-            padding: 40px;
-            text-align: center;
-            border-top: 1px solid rgba(255, 255, 255, 0.05);
-        }
-
-        footer p {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 11px;
-            color: var(--text-secondary);
-            letter-spacing: 2px;
-        }
-
-        /* Responsive */
-        @media (max-width: 1024px) {
-            .character-showcase {
-                flex-direction: column !important;
-                min-height: auto;
-                padding-top: 40vh;
-            }
-
-            .character-showcase-character {
-                position: absolute;
-                top: 0;
-                left: 50% !important;
-                right: auto !important;
-                transform: translateX(-50%);
-                width: 100%;
-                height: 40vh;
-                object-fit: cover;
-                object-position: top center;
-                opacity: 1;
-                z-index: 1;
-            }
-
-            .character-overlay {
-                display: none;
-            }
-
-            .character-showcase-content {
-                position: relative;
-                z-index: 2;
-                width: 100%;
-                background: linear-gradient(to top, var(--bg-dark) 20%, var(--bg-panel) 100%);
-                margin: 0;
-                padding: 40px 30px;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .hud-nav { padding: 0 20px; }
-            .nav-links { display: none; }
-            .hero h1 { font-size: 48px; }
-            .operator-grid { grid-template-columns: repeat(3, 1fr); }
-            .operator-select { grid-template-columns: repeat(4, 1fr); }
-            .guide-grid { grid-template-columns: 1fr; }
-
-            .character-showcase {
-                padding-top: 35vh;
-            }
-
-            .character-showcase-character {
-                height: 35vh;
-            }
-
-            .character-showcase-content {
-                padding: 30px 20px;
-            }
-
-            .character-showcase-content h2 {
-                font-size: 28px;
-            }
-        }
-
-        /* Animations */
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(30px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        .animate-in {
-            animation: fadeInUp 0.8s ease forwards;
-        }
-
-        .delay-1 { animation-delay: 0.1s; }
-        .delay-2 { animation-delay: 0.2s; }
-        .delay-3 { animation-delay: 0.3s; }
-
-        /* Reduced motion */
-        @media (prefers-reduced-motion: reduce) {
-            * { animation-duration: 0.01ms !important; }
-        }
-
-        /* Builds Modal */
-        .builds-modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.9);
-            z-index: 2000;
-            overflow-y: auto;
-            padding: 40px 20px;
-        }
-
-        .builds-modal.active {
-            display: block;
-        }
-
-        .builds-container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .builds-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 40px;
-        }
-
-        .builds-title {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 32px;
-            font-weight: 700;
-            color: var(--text-primary);
-        }
-
-        .builds-close {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 14px;
-            color: var(--orange);
-            background: transparent;
-            border: 1px solid var(--orange);
-            padding: 10px 20px;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-
-        .builds-close:hover {
-            background: var(--orange);
-            color: #000;
-        }
-
-        .operator-build {
-            background: var(--bg-panel);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 20px;
-            margin-bottom: 30px;
-            overflow: hidden;
-        }
-
-        .operator-build-header {
-            display: flex;
-            align-items: center;
-            gap: 20px;
-            padding: 25px;
-            background: rgba(0, 245, 255, 0.05);
-            border-bottom: 1px solid rgba(0, 245, 255, 0.2);
-        }
-
-        .operator-build-avatar {
-            width: 80px;
-            height: 80px;
-            background: var(--bg-dark);
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-        }
-
-        .operator-build-avatar img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        .operator-build-info h3 {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 20px;
-            font-weight: 700;
-            margin-bottom: 5px;
-        }
-
-        .operator-build-role {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 11px;
-            color: var(--cyan);
-            letter-spacing: 2px;
-        }
-
-        .build-section {
-            padding: 20px 25px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-        }
-
-        .build-section:last-child {
-            border-bottom: none;
-        }
-
-        .build-section-title {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 11px;
-            letter-spacing: 2px;
-            color: var(--orange);
-            margin-bottom: 15px;
-            text-transform: uppercase;
-        }
-
-        .build-item {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 10px 15px;
-            background: rgba(255, 255, 255, 0.03);
-            border-radius: 10px;
-            margin-bottom: 8px;
-        }
-
-        .build-item:last-child {
-            margin-bottom: 0;
-        }
-
-        .build-item-priority {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 10px;
-            padding: 3px 8px;
-            border-radius: 4px;
-            font-weight: 600;
-        }
-
-        .priority-s { background: linear-gradient(135deg, #ff6b6b, #feca57); color: #000; }
-        .priority-a { background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff; }
-        .priority-b { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
-
-        .build-item-name {
-            font-family: 'Rajdhani', sans-serif;
-            font-size: 14px;
-            color: var(--text-primary);
-        }
-
-        .build-item-desc {
-            font-size: 12px;
-            color: var(--text-secondary);
-            margin-left: auto;
-        }
-
-        /* Game Guide Section */
-        .guide-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 25px;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .guide-card {
-            background: var(--bg-panel);
-            border: 1px solid rgba(255, 255, 255, 0.08);
-            border-radius: 16px;
-            padding: 25px;
-            transition: all 0.3s;
-        }
-
-        .guide-card:hover {
-            border-color: var(--border-glow);
-            box-shadow: 0 10px 40px rgba(0, 245, 255, 0.1);
-        }
-
-        .guide-card h3 {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 16px;
-            font-weight: 700;
-            color: var(--orange);
-            margin-bottom: 15px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .guide-card h3::before {
-            content: '>';
-            font-family: 'Share Tech Mono', monospace;
-            color: var(--cyan);
-        }
-
-        .guide-card h4 {
-            font-family: 'Rajdhani', sans-serif;
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--text-primary);
-            margin: 15px 0 8px;
-        }
-
-        .guide-card p {
-            font-size: 13px;
-            line-height: 1.6;
-            color: var(--text-secondary);
-            margin-bottom: 10px;
-        }
-
-        .guide-card ul {
-            list-style: none;
-            padding: 0;
-            margin: 10px 0;
-        }
-
-        .guide-card li {
-            font-size: 13px;
-            color: var(--text-secondary);
-            padding: 5px 0;
-            padding-left: 20px;
-            position: relative;
-        }
-
-        .guide-card li::before {
-            content: '•';
-            position: absolute;
-            left: 0;
-            color: var(--cyan);
-        }
-
-        .currency-table {
-            width: 100%;
-            border-collapse: collapse;
-            margin: 15px 0;
-        }
-
-        .currency-table th {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 11px;
-            text-align: left;
-            padding: 10px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            color: var(--orange);
-        }
-
-        .currency-table td {
-            font-size: 12px;
-            padding: 10px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-            color: var(--text-secondary);
-        }
-
-        .currency-table tr:last-child td {
-            border-bottom: none;
-        }
-
-        .highlight-box {
-            background: rgba(255, 107, 53, 0.1);
-            border-left: 3px solid var(--orange);
-            padding: 15px;
-            margin: 15px 0;
-            border-radius: 0 8px 8px 0;
-        }
-
-        .highlight-box p {
-            margin: 0;
-            color: #ffb88c;
-        }
-
-        .tip-box {
-            background: rgba(0, 245, 255, 0.05);
-            border-left: 3px solid var(--cyan);
-            padding: 12px 15px;
-            margin: 10px 0;
-            border-radius: 0 8px 8px 0;
-        }
-
-        .tip-box p {
-            margin: 0;
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-
-        .stat-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 10px;
-            margin: 15px 0;
-        }
-
-        .stat-item {
-            background: rgba(255, 255, 255, 0.03);
-            padding: 12px;
-            border-radius: 8px;
-            text-align: center;
-        }
-
-        .stat-value {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 18px;
-            font-weight: 700;
-            color: var(--cyan);
-        }
-
-        .stat-label {
-            font-size: 10px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-    </style>
+    <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
+    <!-- Mobile Menu Toggle -->
+    <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Toggle menu">
+        <span></span>
+        <span></span>
+        <span></span>
+    </button>
+
     <!-- HUD Navigation -->
     <nav class="hud-nav">
         <div class="nav-logo">ENDFIELD</div>
@@ -1575,715 +603,6 @@
         </div>
     </div>
 
-    <script>
-        // Operator data with images and stats
-        const operators = [
-            // SS TIER - Meta Defining
-            { id: 'laevatain', name: 'Laevatain', tier: 'SS', element: 'Heat', role: 'Striker', img: 'characters/Laevatain.png', cardImg: 'characters/laevatain_card.webp' },
-            { id: 'ardelia', name: 'Ardelia', tier: 'SS', element: 'Nature', role: 'Support', img: 'characters/Ardelia_Splash.webp', cardImg: 'characters/ardelia_card.webp', free: true },
-            { id: 'yvonne', name: 'Yvonne', tier: 'SS', element: 'Cryo', role: 'Caster', img: 'characters/Yvonne.png', cardImg: 'characters/yvonne_card.webp' },
-
-            // S TIER - Core Team Members
-            { id: 'last_rite', name: 'Last Rite', tier: 'S', element: 'Cryo', role: 'Striker', img: 'characters/Last_Rite_Splash.webp', cardImg: 'characters/lastrite_card.webp' },
-            { id: 'pogranichnik', name: 'Pogranichnik', tier: 'S', element: 'Physical', role: 'Vanguard', img: 'characters/Pogranichnik_Splash.webp', cardImg: 'characters/pog_card.webp' },
-            { id: 'antal', name: 'Antal', tier: 'S', element: 'Electric', role: 'Support', img: 'characters/Antal_Splash.webp', cardImg: 'characters/antel_card.webp', free: true },
-            { id: 'xaihi', name: 'Xaihi', tier: 'S', element: 'Cryo', role: 'Support', img: 'characters/Xaihi.png', cardImg: 'characters/xaihi_card.webp' },
-            { id: 'gilberta', name: 'Gilberta', tier: 'S', element: 'Nature', role: 'Support', img: 'characters/Gilberta.png', cardImg: 'characters/gilberta_card.webp' },
-            { id: 'lifeng', name: 'Lifeng', tier: 'S', element: 'Physical', role: 'Guard', img: 'characters/Lifeng.png', cardImg: 'characters/lifeng_card.webp' },
-
-            // A TIER - Strong but Replaceable
-            { id: 'endministrator', name: 'Endministrator', tier: 'A', element: 'Physical', role: 'Guard', img: 'characters/Endministrator.png', cardImg: 'characters/endministrator_card.webp' },
-            { id: 'wulfgard', name: 'Wulfgard', tier: 'A', element: 'Heat', role: 'Caster', img: 'characters/Wulfgard.png', cardImg: 'characters/wulfguard_card.webp' },
-            { id: 'perlica', name: 'Perlica', tier: 'A', element: 'Electric', role: 'Caster', img: 'characters/Perlica.png', cardImg: 'characters/perlica_card.webp' },
-            { id: 'avywenna', name: 'Avywenna', tier: 'A', element: 'Electric', role: 'Striker', img: 'characters/Avywenna.png', cardImg: 'characters/avywenna_card.webp' },
-            { id: 'akekuri', name: 'Akekuri', tier: 'A', element: 'Heat', role: 'Vanguard', img: 'characters/Akekuri_Splash.webp', cardImg: 'characters/akekuri_card.webp', free: true },
-            { id: 'chen_qianyu', name: 'Chen Qianyu', tier: 'A', element: 'Physical', role: 'Guard', img: 'characters/Chen_Qianyu.png', cardImg: 'characters/chen_qianyu_card.webp' },
-            { id: 'da_pan', name: 'Da Pan', tier: 'A', element: 'Physical', role: 'Striker', img: 'characters/Da_Pan.png', cardImg: 'characters/da_pan_card.webp' },
-            { id: 'alesh', name: 'Alesh', tier: 'A', element: 'Cryo', role: 'Vanguard', img: 'characters/Alesh_Splash.webp', cardImg: 'characters/alesh_card.webp', free: true },
-            { id: 'arclight', name: 'Arclight', tier: 'A', element: 'Electric', role: 'Vanguard', img: 'characters/Arclight.png', cardImg: 'characters/arclight_card.webp' },
-
-            // B TIER - Niche Picks
-            { id: 'ember', name: 'Ember', tier: 'B', element: 'Heat', role: 'Defender', img: 'characters/Ember.png', cardImg: 'characters/ember_card.webp' },
-            { id: 'snowshine', name: 'Snowshine', tier: 'B', element: 'Cryo', role: 'Defender', img: 'characters/Snowshine.png', cardImg: 'characters/snowshine_card.webp' },
-            { id: 'estella', name: 'Estella', tier: 'B', element: 'Cryo', role: 'Guard', img: 'characters/Estella_Splash.webp', cardImg: 'characters/estella_card.webp' },
-
-            // C TIER - Limited Usage (avoid)
-            { id: 'fluorite', name: 'Fluorite', tier: 'C', element: 'Nature', role: 'Caster', img: 'characters/Fluorite_Splash.webp', cardImg: 'characters/fluorite_card.webp' },
-            { id: 'catcher', name: 'Catcher', tier: 'C', element: 'Physical', role: 'Defender', img: 'characters/Catcher_Splash.webp', cardImg: 'characters/catcher_card.webp' },
-        ];
-
-        // Build data - weapons, modules, skills for each operator
-        const builds = {
-            laevatain: {
-                weapons: [
-                    { name: 'Crimson Lotus', priority: 'S', desc: 'Best in slot - maximizes Arts Burst damage' },
-                    { name: 'Inferno Blade', priority: 'A', desc: 'Alternative - higher base attack' },
-                    { name: 'Flame Edge', priority: 'B', desc: 'F2P option - solid performance' },
-                ],
-                modules: [
-                    { name: 'Burning Heart Module', priority: 'S', desc: 'Core damage module - increases Arts damage by 25%' },
-                    { name: 'Burst Enhancer', priority: 'A', desc: 'Arts Burst frequency boost' },
-                ],
-                skills: [
-                    { name: 'Skill: Twilight Ruin', priority: 'S', desc: 'Main damage dealer - massive AoE Arts Burst' },
-                    { name: 'Skill: Blaze Cascade', priority: 'A', desc: 'Single target burst mode' },
-                ]
-            },
-            ardelia: {
-                weapons: [
-                    { name: 'Nature\'s Grasp', priority: 'S', desc: 'Maximizes Susceptibility application' },
-                    { name: 'Vine Whip', priority: 'A', desc: 'Faster attack speed trade-off' },
-                ],
-                modules: [
-                    { name: 'Corrosion Module', priority: 'S', desc: 'Essential - enables melt combos' },
-                    { name: 'Support Core', priority: 'A', desc: 'Team utility boost' },
-                ],
-                skills: [
-                    { name: 'Skill: Entangling Roots', priority: 'S', desc: 'Main CC + Susceptibility' },
-                    { name: 'Skill: Nature\'s Blessing', priority: 'A', desc: 'Team buff mode' },
-                ]
-            },
-            yvonne: {
-                weapons: [
-                    { name: 'Frost Cannons', priority: 'S', desc: 'Best Cryo damage output' },
-                    { name: 'Ice Breaker', priority: 'A', desc: 'Higher shatter damage' },
-                ],
-                modules: [
-                    { name: 'Cryo Core', priority: 'S', desc: 'Freeze rate + damage boost' },
-                    { name: 'Precision Module', priority: 'A', desc: 'Crit damage increase' },
-                ],
-                skills: [
-                    { name: 'Skill: Absolute Zero', priority: 'S', desc: 'Main freeze + burst damage' },
-                    { name: 'Skill: Cryo Barrage', priority: 'A', desc: 'Sustained damage mode' },
-                ]
-            },
-            last_rite: {
-                weapons: [
-                    { name: 'Shatter Blade', priority: 'S', desc: 'Shatter combo main hand' },
-                    { name: 'Frost Edge', priority: 'A', desc: 'Higher freeze application' },
-                ],
-                modules: [
-                    { name: 'Shatter Core', priority: 'S', desc: 'Essential for shatter damage' },
-                    { name: 'Cryo Amp', priority: 'A', desc: 'Damage vs frozen enemies' },
-                ],
-                skills: [
-                    { name: 'Skill: Fracture Strike', priority: 'S', desc: 'Shatter burst damage' },
-                    { name: 'Skill: Glacial Fury', priority: 'A', desc: 'AoE freeze mode' },
-                ]
-            },
-            pogranichnik: {
-                weapons: [
-                    { name: 'Breach Hammer', priority: 'S', desc: 'Max defense shred' },
-                    { name: 'SP Generator', priority: 'A', desc: 'Team battery focus' },
-                ],
-                modules: [
-                    { name: 'Vanguard Core', priority: 'S', desc: 'SP generation boost' },
-                    { name: 'Breach Module', priority: 'A', desc: 'Defense reduction' },
-                ],
-                skills: [
-                    { name: 'Skill: Line Breaker', priority: 'S', desc: 'Main SP gen + Breach' },
-                    { name: 'Skill: Fortress', priority: 'A', desc: 'Defensive mode' },
-                ]
-            },
-            antal: {
-                weapons: [
-                    { name: 'Amplifier Rod', priority: 'S', desc: 'Best amp output' },
-                    { name: 'Support Staff', priority: 'A', desc: 'More utility focus' },
-                ],
-                modules: [
-                    { name: 'Heat Amp Core', priority: 'S', desc: 'Heat damage boost' },
-                    { name: 'Electric Link', priority: 'A', desc: 'Electric amp secondary' },
-                ],
-                skills: [
-                    { name: 'Skill: Dual Amplify', priority: 'S', desc: 'Heat + Electric amp' },
-                    { name: 'Skill: Heat Field', priority: 'A', desc: 'AoE Heat buff' },
-                ]
-            },
-            xaihi: {
-                weapons: [
-                    { name: 'Cryo Tome', priority: 'S', desc: 'Cryo amp + Arts amp combo' },
-                    { name: 'Frost Grimoire', priority: 'A', desc: 'Pure Cryo focus' },
-                ],
-                modules: [
-                    { name: 'Cryo Amplifier', priority: 'S', desc: 'Cryo damage boost' },
-                    { name: 'Arts Resonator', priority: 'A', desc: 'Arts damage amp' },
-                ],
-                skills: [
-                    { name: 'Skill: Winter\'s Grasp', priority: 'S', desc: 'Cryo amp + slow' },
-                    { name: 'Skill: Frost Armor', priority: 'A', desc: 'Team defensive buff' },
-                ]
-            },
-            gilberta: {
-                weapons: [
-                    { name: 'Gravity Well', priority: 'S', desc: 'Best crowd control' },
-                    { name: 'Pull Caster', priority: 'A', desc: 'Faster reposition' },
-                ],
-                modules: [
-                    { name: 'CC Module', priority: 'S', desc: 'Increased pull radius' },
-                    { name: 'Nature Core', priority: 'A', desc: 'Nature damage boost' },
-                ],
-                skills: [
-                    { name: 'Skill: Event Horizon', priority: 'S', desc: 'Main pull + CC' },
-                    { name: 'Skill: Singularity', priority: 'A', desc: 'Larger radius, longer CD' },
-                ]
-            },
-            lifeng: {
-                weapons: [
-                    { name: 'Physical Greatsword', priority: 'S', desc: 'Best Physical damage' },
-                    { name: 'Crusher', priority: 'A', desc: 'Higher impact damage' },
-                ],
-                modules: [
-                    { name: 'Physical Core', priority: 'S', desc: 'Susceptibility boost' },
-                    { name: 'DPS Module', priority: 'A', desc: 'Raw damage increase' },
-                ],
-                skills: [
-                    { name: 'Skill: Storm Blade', priority: 'S', desc: 'Main Physical DPS' },
-                    { name: 'Skill: Guardian', priority: 'A', desc: 'Defensive mode' },
-                ]
-            },
-            endministrator: {
-                weapons: [
-                    { name: 'Crystal Blade', priority: 'S', desc: 'Originium Crystal synergy' },
-                    { name: 'Admin Staff', priority: 'A', desc: 'Support focus' },
-                ],
-                modules: [
-                    { name: 'MC Module', priority: 'S', desc: 'Crystal generation boost' },
-                    { name: 'Physical Amp', priority: 'A', desc: 'Physical damage' },
-                ],
-                skills: [
-                    { name: 'Skill: Administration', priority: 'S', desc: 'Main DPS + crystals' },
-                    { name: 'Skill: Command', priority: 'A', desc: 'Team buff mode' },
-                ]
-            },
-            wulfgard: {
-                weapons: [
-                    { name: 'Combustion Cane', priority: 'S', desc: 'Best Combustion uptime' },
-                    { name: 'Fire Staff', priority: 'A', desc: 'Higher burst damage' },
-                ],
-                modules: [
-                    { name: 'Heat Core', priority: 'S', desc: 'Combustion damage boost' },
-                    { name: 'Burn Module', priority: 'A', desc: 'DoT increase' },
-                ],
-                skills: [
-                    { name: 'Skill: Inferno', priority: 'S', desc: 'Combustion application + damage' },
-                    { name: 'Skill: Wildfire', priority: 'A', desc: 'AoE spread mode' },
-                ]
-            },
-            perlica: {
-                weapons: [
-                    { name: 'Shock Baton', priority: 'S', desc: 'Electrification focus' },
-                    { name: 'Tesla Coil', priority: 'A', desc: 'Higher Electric damage' },
-                ],
-                modules: [
-                    { name: 'Electric Core', priority: 'S', desc: 'Electrification rate' },
-                    { name: 'Chain Module', priority: 'A', desc: 'Jump increase' },
-                ],
-                skills: [
-                    { name: 'Skill: Overload', priority: 'S', desc: 'Forces Electrification' },
-                    { name: 'Skill: Chain Lightning', priority: 'A', desc: 'AoE Electric damage' },
-                ]
-            },
-            avywenna: {
-                weapons: [
-                    { name: 'Voltage Blade', priority: 'S', desc: 'Best Electric DPS' },
-                    { name: 'Thunder Edge', priority: 'A', desc: 'Faster attack speed' },
-                ],
-                modules: [
-                    { name: 'Striker Core', priority: 'S', desc: 'Electric damage boost' },
-                    { name: 'Crit Module', priority: 'A', desc: 'Crit damage increase' },
-                ],
-                skills: [
-                    { name: 'Skill: Thunder Strike', priority: 'S', desc: 'Main Electric burst' },
-                    { name: 'Skill: Storm', priority: 'A', desc: 'Sustained DPS mode' },
-                ]
-            },
-            akekuri: {
-                weapons: [
-                    { name: 'SP Pistol', priority: 'S', desc: 'Max SP generation' },
-                    { name: 'Heat Dagger', priority: 'A', desc: 'More damage trade-off' },
-                ],
-                modules: [
-                    { name: 'Battery Module', priority: 'S', desc: 'Essential - team SP battery' },
-                    { name: 'Vanguard Core', priority: 'A', desc: 'Personal SP gen' },
-                ],
-                skills: [
-                    { name: 'Skill: Overcharge', priority: 'S', desc: 'Team SP generation' },
-                    { name: 'Skill: Heat Strike', priority: 'A', desc: 'Damage mode' },
-                ]
-            },
-            chen_qianyu: {
-                weapons: [
-                    { name: 'Vulnerable Blade', priority: 'S', desc: 'Max Vulnerable stacks' },
-                    { name: 'Physical Katana', priority: 'A', desc: 'Higher base damage' },
-                ],
-                modules: [
-                    { name: 'Vulnerable Core', priority: 'S', desc: 'Stack increase' },
-                    { name: 'Physical Amp', priority: 'A', desc: 'Damage boost' },
-                ],
-                skills: [
-                    { name: 'Skill: Vulnerable Strike', priority: 'S', desc: 'Stacks Vulnerable' },
-                    { name: 'Skill: Physical Flow', priority: 'A', desc: 'Sustained damage' },
-                ]
-            },
-            da_pan: {
-                weapons: [
-                    { name: 'Crusher Gauntlets', priority: 'S', desc: 'Best Crush damage' },
-                    { name: 'Impact Fists', priority: 'A', desc: 'Faster attack speed' },
-                ],
-                modules: [
-                    { name: 'Crush Module', priority: 'S', desc: 'Crush damage boost' },
-                    { name: 'Striker Core', priority: 'A', desc: 'Raw damage' },
-                ],
-                skills: [
-                    { name: 'Skill: Earthquake', priority: 'S', desc: 'Consumes Vulnerable' },
-                    { name: 'Skill: Ground Pound', priority: 'A', desc: 'AoE damage mode' },
-                ]
-            },
-            alesh: {
-                weapons: [
-                    { name: 'Solidification Staff', priority: 'S', desc: 'Solidification uptime' },
-                    { name: 'Frost Rod', priority: 'A', desc: 'More damage focus' },
-                ],
-                modules: [
-                    { name: 'SP Battery', priority: 'S', desc: 'Team SP generation' },
-                    { name: 'Cryo Core', priority: 'A', desc: 'Cryo utility' },
-                ],
-                skills: [
-                    { name: 'Skill: Solidify', priority: 'S', desc: 'SP gen + Cryo utility' },
-                    { name: 'Skill: Frost Shield', priority: 'A', desc: 'Defensive mode' },
-                ]
-            },
-            arclight: {
-                weapons: [
-                    { name: 'Electro Blade', priority: 'S', desc: 'Electrification + SP gen' },
-                    { name: 'Lightning Rod', priority: 'A', desc: 'Pure Electric focus' },
-                ],
-                modules: [
-                    { name: 'SP Module', priority: 'S', desc: 'Team SP battery' },
-                    { name: 'Electric Core', priority: 'A', desc: 'Electric damage' },
-                ],
-                skills: [
-                    { name: 'Skill: Arc Discharge', priority: 'S', desc: 'SP gen + Electric damage' },
-                    { name: 'Skill: Conduit', priority: 'A', desc: 'Pure SP gen mode' },
-                ]
-            },
-            ember: {
-                weapons: [
-                    { name: 'Healing Mace', priority: 'S', desc: 'Best healing output' },
-                    { name: 'Guard Shield', priority: 'A', desc: 'More defensive' },
-                ],
-                modules: [
-                    { name: 'Healer Core', priority: 'S', desc: 'Healing boost' },
-                    { name: 'Defender Module', priority: 'A', desc: 'Team survivability' },
-                ],
-                skills: [
-                    { name: 'Skill: Warmth', priority: 'S', desc: 'Main healing skill' },
-                    { name: 'Skill: Protect', priority: 'A', desc: 'Shield + heal' },
-                ]
-            },
-            snowshine: {
-                weapons: [
-                    { name: 'Frost Healer', priority: 'S', desc: 'Best Cryo support' },
-                    { name: 'Ice Shield', priority: 'A', desc: 'Defensive focus' },
-                ],
-                modules: [
-                    { name: 'Cryo Support', priority: 'S', desc: 'Freeze enablement' },
-                    { name: 'Healer Core', priority: 'A', desc: 'Healing boost' },
-                ],
-                skills: [
-                    { name: 'Skill: Blizzard Heal', priority: 'S', desc: 'Heal + freeze setup' },
-                    { name: 'Skill: Ice Block', priority: 'A', desc: 'Emergency protection' },
-                ]
-            },
-            estella: {
-                weapons: [
-                    { name: 'Frost Lance', priority: 'S', desc: 'Physical/Cryo hybrid' },
-                    { name: 'Crystal Blade', priority: 'A', desc: 'Physical focus' },
-                ],
-                modules: [
-                    { name: 'Hybrid Core', priority: 'S', desc: 'Dual element boost' },
-                    { name: 'Guard Module', priority: 'A', desc: 'Survivability boost' },
-                ],
-                skills: [
-                    { name: 'Skill: Crystal Storm', priority: 'S', desc: 'Hybrid damage' },
-                    { name: 'Skill: Frost Guard', priority: 'A', desc: 'Defensive mode' },
-                ]
-            },
-            fluorite: {
-                weapons: [
-                    { name: 'Nature Cane', priority: 'S', desc: 'Best available' },
-                    { name: 'Basic Staff', priority: 'B', desc: 'F2P option' },
-                ],
-                modules: [
-                    { name: 'Basic Module', priority: 'B', desc: 'Minimal improvement' },
-                ],
-                skills: [
-                    { name: 'Skill: Nature Touch', priority: 'B', desc: 'Weak support' },
-                ]
-            },
-            catcher: {
-                weapons: [
-                    { name: 'Shield Wall', priority: 'S', desc: 'Best defensive' },
-                    { name: 'Basic Shield', priority: 'B', desc: 'F2P option' },
-                ],
-                modules: [
-                    { name: 'Defender Core', priority: 'B', desc: 'Minimal boost' },
-                ],
-                skills: [
-                    { name: 'Skill: Catch', priority: 'B', desc: 'Weak CC' },
-                ]
-            },
-        };
-
-        // Synergy database - based on team compositions and elemental interactions
-        const synergies = {
-            // Laevatain (Heat DPS) - needs Combustion, Corrosion, Heat Amp
-            laevatain: ['ardelia', 'wulfgard', 'antal', 'akekuri', 'perlica', 'gilberta'],
-
-            // Ardelia (Nature Support) - best support, enables everything
-            ardelia: ['laevatain', 'perlica', 'avywenna', 'gilberta', 'wulfgard', 'antal'],
-
-            // Yvonne (Cryo DPS) - needs shatter, Cryo Amp, Vulnerable
-            yvonne: ['last_rite', 'xaihi', 'chen_qianyu', 'pogranichnik', 'alesh', 'snowshine'],
-
-            // Last Rite (Cryo DPS) - shatter combo with Yvonne
-            last_rite: ['yvonne', 'xaihi', 'chen_qianyu', 'pogranichnik', 'snowshine'],
-
-            // Xaihi (Cryo Support) - Cryo + Arts Amp
-            xaihi: ['yvonne', 'last_rite', 'snowshine', 'chen_qianyu', 'pogranichnik'],
-
-            // Gilberta (Nature Support) - crowd control, groups enemies
-            gilberta: ['ardelia', 'laevatain', 'avywenna', 'wulfgard', 'perlica'],
-
-            // Wulfgard (Heat Caster) - Combustion enabler
-            wulfgard: ['laevatain', 'ardelia', 'antal', 'akekuri', 'ember'],
-
-            // Antal (Electric Support) - Heat + Electric Amp, FREE
-            antal: ['laevatain', 'wulfgard', 'perlica', 'avywenna', 'arclight', 'ardelia'],
-
-            // Perlica (Electric Caster) - forces Electrification
-            perlica: ['avywenna', 'antal', 'arclight', 'ardelia', 'laevatain'],
-
-            // Avywenna (Electric Striker) - Electric carry
-            avywenna: ['perlica', 'antal', 'arclight', 'ardelia', 'gilberta'],
-
-            // Lifeng (Physical DPS) - Physical Susceptibility
-            lifeng: ['endministrator', 'chen_qianyu', 'pogranichnik', 'da_pan'],
-
-            // Endministrator (Physical MC) - Originium Crystals
-            endministrator: ['lifeng', 'chen_qianyu', 'pogranichnik', 'da_pan', 'alesh'],
-
-            // Chen Qianyu (Physical) - Vulnerable stacks
-            chen_qianyu: ['lifeng', 'endministrator', 'pogranichnik', 'da_pan', 'yvonne', 'last_rite'],
-
-            // Da Pan (Physical Striker) - Crush consumes Vulnerable
-            da_pan: ['chen_qianyu', 'lifeng', 'endministrator', 'pogranichnik'],
-
-            // Pogranichnik (Physical Vanguard) - Breach, SP gen
-            pogranichnik: ['chen_qianyu', 'lifeng', 'endministrator', 'da_pan', 'yvonne', 'last_rite'],
-
-            // Akekuri (Heat Vanguard) - SP gen, FREE
-            akekuri: ['laevatain', 'wulfgard', 'antal', 'ardelia'],
-
-            // Alesh (Cryo Vanguard) - SP gen with Solidification, FREE
-            alesh: ['yvonne', 'endministrator', 'xaihi', 'snowshine'],
-
-            // Arclight (Electric Vanguard) - SP gen with Electrification
-            arclight: ['avywenna', 'perlica', 'antal', 'ardelia'],
-
-            // Snowshine (Cryo Defender) - healer, enables shatter
-            snowshine: ['yvonne', 'last_rite', 'xaihi', 'alesh'],
-
-            // Ember (Heat Defender) - Physical team utility
-            ember: ['lifeng', 'chen_qianyu', 'endministrator'],
-
-            // Estella (Cryo Guard) - niche Physical/Cryo
-            estella: ['yvonne', 'lifeng', 'endministrator'],
-
-            // Fluorite (Nature Caster) - C tier, avoid
-            fluorite: ['yvonne', 'ardelia'],
-
-            // Catcher (Physical Defender) - C tier, avoid
-            catcher: ['lifeng', 'endministrator'],
-        };
-
-        // Synergy reasons with detailed explanations
-        const reasons = {
-            // Heat Team Synergies
-            laevatain_ardelia: 'Applies Susceptibility and Corrosion - massive damage multiplier for best DPS',
-            laevatain_wulfgard: 'Applies Combustion DoT + enables Heat Arts Bursts constantly',
-            laevatain_antal: 'Provides Heat Amp to boost damage even further - also buffs Electric',
-            laevatain_perlica: 'Melting Pot team - Electrification for maximum reaction chaos',
-            laevatain_akekuri: 'Infinite SP generation for constant skill spam',
-            laevatain_gilberta: 'Groups enemies together for Laevatain AoE devastation',
-            wulfgard_antal: 'Heat Amp boosts Wulfgard\'s Combustion DPS significantly',
-            wulfgard_akekuri: 'SP battery keeps Wulfgard applying Combustion constantly',
-
-            // Cryo Team Synergies
-            yvonne_last_rite: 'SHATTER COMBO - Yvonne freezes, Last Rite shatters for massive burst',
-            yvonne_xaihi: 'Core Cryo support - provides Cryo and Arts Amp doubling damage',
-            yvonne_chen_qianyu: 'Adds Vulnerable stacks - Physical+Cryo hybrid shatter potential',
-            yvonne_pogranichnik: 'Breach lowers enemy defense - all damage increased',
-            yvonne_alesh: 'SP generator synergizes with Solidification mechanics',
-            yvonne_snowshine: 'Cryo support enables consistent freezing and healing',
-            last_rite_xaihi: 'Cryo Amp makes Last Rite\'s damage output massive',
-            last_rite_pogranichnik: 'Breach + SP battery enables constant Cryo DPS',
-            xaihi_snowshine: 'Full Cryo team - Xaihi amps Snowshine\'s freeze potential',
-
-            // Electric Team Synergies
-            perlica_avywenna: 'Forces Electrification - essential for Electric carry damage',
-            perlica_antal: 'Electric Amp doubles down on Electrification damage',
-            perlica_arclight: 'SP gen + Electrification application - infinite loop',
-            avywenna_antal: 'Electric Amp makes Avywenna a team-carrying monster',
-            avywenna_arclight: 'Arclight feeds SP while Avywenna deals Electric damage',
-            antal_arclight: 'Consumes Electrification to generate SP for entire team',
-
-            // Physical Team Synergies
-            lifeng_chen_qianyu: 'Physical Susceptibility + Vulnerable stacks = huge damage',
-            lifeng_pogranichnik: 'Breach + Physical Susceptibility shreds enemy defense',
-            endministrator_alesh: 'SP gen with Solidification - great for Crystal shatter',
-            chen_qianyu_da_pan: 'Vulnerable stacks feed Da Pan\'s Crush for massive damage',
-            chen_qianyu_pogranichnik: 'Vulnerable + Breach = enemies take double Physical damage',
-            da_pan_pogranichnik: 'Breach enables Crush to hit for maximum damage',
-
-            // Universal Support Synergies
-            ardelia_perlica: 'Nature element triggers Electrification off Perlica\'s skills',
-            ardelia_avywenna: 'Corrosion + Susceptibility makes any element hit harder',
-            ardelia_gilberta: 'Double crowd control - groups AND debuffs enemies',
-            gilberta_perlica: 'Groups enemies for Electrification to spread efficiently',
-
-            // Free Unit Synergies
-            antal_laevatain: 'Best 4-star provides Heat Amp for best DPS',
-            antal_wulfgard: 'Heat Amp turns Wulfgard into a sub-DPS powerhouse',
-            antal_perlica: 'Electric Amp makes Perlica\'s Electrification hurt more',
-            akekuri_laevatain: 'FREE SP battery enables constant Laevatain Arts Bursts',
-            alesh_yvonne: 'FREE SP gen for Cryo teams - works with Solidification',
-        };
-
-        let selectedTeam = [];
-
-        function initOperatorSelect() {
-            const container = document.getElementById('operatorSelect');
-            container.innerHTML = operators.map(op => {
-                const imgSrc = op.cardImg || op.img;
-                const imgHtml = imgSrc
-                    ? `<div style="width:60px;height:60px;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;border-radius:8px;overflow:hidden;">
-                            <img src="${imgSrc}" alt="${op.name}" style="width:60px;height:60px;object-fit:contain;">
-                        </div>`
-                    : `<div style="width:60px;height:60px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;border-radius:8px;font-size:20px;color:var(--text-secondary);">?</div>`;
-                const freeBadge = op.free ? '<span style="font-size:8px;color:#39ff14;background:#000;padding:1px 4px;border-radius:3px;margin-left:4px;">FREE</span>' : '';
-                const elementColor = {
-                    'Heat': '#ff6b35',
-                    'Cryo': '#00d4ff',
-                    'Electric': '#a855f7',
-                    'Physical': '#f0f0f5',
-                    'Nature': '#22c55e',
-                }[op.element] || '#888';
-                return `
-                    <div class="select-option" data-id="${op.id}" onclick="toggleOperator('${op.id}')">
-                        ${imgHtml}
-                        <div class="name">
-                            <div style="font-size:9px;color:${elementColor};margin-bottom:2px;">${op.element} ${op.role}</div>
-                            <div style="font-size:11px;font-weight:500;">${op.name}</div>
-                            ${freeBadge}
-                        </div>
-                    </div>
-                `;
-            }).join('');
-        }
-
-        function toggleOperator(id) {
-            const index = selectedTeam.indexOf(id);
-            if (index > -1) {
-                selectedTeam.splice(index, 1);
-            } else if (selectedTeam.length < 4) {
-                selectedTeam.push(id);
-            }
-            updateTeamUI();
-        }
-
-        function clearTeam() {
-            selectedTeam = [];
-            updateTeamUI();
-        }
-
-        function updateTeamUI() {
-            // Update operator selection
-            document.querySelectorAll('.select-option').forEach(el => {
-                el.classList.toggle('selected', selectedTeam.includes(el.dataset.id));
-            });
-
-            // Update slots
-            const slotsContainer = document.getElementById('teamSlots');
-            slotsContainer.innerHTML = '';
-            for (let i = 0; i < 4; i++) {
-                if (selectedTeam[i]) {
-                    const op = operators.find(o => o.id === selectedTeam[i]);
-                    const imgSrc = op.cardImg || op.img;
-                    if (op && imgSrc) {
-                        slotsContainer.innerHTML += `<div class="team-slot filled" style="background:var(--bg-dark);overflow:hidden;">
-                            <img src="${imgSrc}" alt="${op.name}" style="width:100%;height:100%;object-fit:contain;">
-                        </div>`;
-                    } else {
-                        slotsContainer.innerHTML += `<div class="team-slot filled" style="background:var(--bg-dark);display:flex;align-items:center;justify-content:center;">
-                            <span style="font-size:24px;color:var(--text-secondary);">${op ? op.name.charAt(0) : '?'}</span>
-                        </div>`;
-                    }
-                } else {
-                    slotsContainer.innerHTML += '<div class="team-slot">+</div>';
-                }
-            }
-
-            // Update suggestions
-            const panel = document.getElementById('suggestions');
-            const list = document.getElementById('suggestionsList');
-
-            if (selectedTeam.length === 0) {
-                panel.classList.remove('active');
-                return;
-            }
-
-            // Always show panel when operators are selected
-            panel.classList.add('active');
-
-            // Collect suggestions
-            const scores = {};
-            selectedTeam.forEach(id => {
-                const s = synergies[id];
-                if (s) {
-                    s.forEach(target => {
-                        if (!selectedTeam.includes(target)) {
-                            scores[target] = (scores[target] || 0) + 1;
-                        }
-                    });
-                }
-            });
-
-            const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]).slice(0, 3);
-
-            if (sorted.length === 0) {
-                list.innerHTML = '<p style="color:var(--text-secondary);font-size:13px;">No synergy data available for selected operators. Try adding a main DPS like Laevatain or Yvonne.</p>';
-            } else {
-                list.innerHTML = sorted.map(([id, score]) => {
-                    const op = operators.find(o => o.id === id);
-                    const reasonKey = selectedTeam[0] + '_' + id;
-                    const reason = reasons[reasonKey] || `${score} operator${score > 1 ? 's' : ''} in your selection synergize with this unit`;
-                    const imgSrc = op && (op.cardImg || op.img);
-                    const imgHtml = imgSrc
-                        ? `<div style="width:50px;height:50px;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;">
-                            <img src="${imgSrc}" alt="${op.name}" style="width:50px;height:50px;object-fit:contain;">
-                        </div>`
-                        : '<div style="width:50px;height:50px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:20px;color:var(--text-secondary);">?</div>';
-                    return `
-                        <div class="suggestion-item">
-                            ${imgHtml}
-                            <div class="suggestion-info">
-                                <h5>${op ? op.name.toUpperCase() : id} ${op && op.free ? '<span style="font-size:9px;color:#39ff14;background:#000;padding:2px 6px;border-radius:3px;">FREE</span>' : ''}</h5>
-                                <p>${reason}</p>
-                            </div>
-                        </div>
-                    `;
-                }).join('');
-            }
-        }
-
-        // Smooth scroll
-        document.querySelectorAll('.nav-links a').forEach(a => {
-            a.addEventListener('click', (e) => {
-                e.preventDefault();
-                const target = document.querySelector(a.getAttribute('href'));
-                if (target) {
-                    target.scrollIntoView({ behavior: 'smooth' });
-                }
-            });
-        });
-
-        // Initialize
-        initOperatorSelect();
-
-        // Builds Modal Functions
-        function showTeamBuilds() {
-            if (selectedTeam.length === 0) {
-                alert('Please select at least one operator first!');
-                return;
-            }
-
-            const modal = document.getElementById('buildsModal');
-            const content = document.getElementById('buildsContent');
-
-            content.innerHTML = selectedTeam.map((id, index) => {
-                const op = operators.find(o => o.id === id);
-                const build = builds[id] || { weapons: [], modules: [], skills: [] };
-                const elementColor = {
-                    'Heat': '#ff6b35',
-                    'Cryo': '#00d4ff',
-                    'Electric': '#a855f7',
-                    'Physical': '#f0f0f5',
-                    'Nature': '#22c55e',
-                }[op.element] || '#888';
-
-                const renderItems = (items, type) => {
-                    if (!items || items.length === 0) return '<p style="color: var(--text-secondary); font-size: 12px;">No data available</p>';
-                    return items.map(item => `
-                        <div class="build-item">
-                            <span class="build-item-priority priority-${item.priority.toLowerCase()}">${item.priority}</span>
-                            <span class="build-item-name">${item.name}</span>
-                            <span class="build-item-desc">${item.desc}</span>
-                        </div>
-                    `).join('');
-                };
-
-                return `
-                    <div class="operator-build">
-                        <div class="operator-build-header">
-                            <div class="operator-build-avatar">
-                                ${op.cardImg ? `<img src="${op.cardImg}" alt="${op.name}">` : op.img ? `<img src="${op.img}" alt="${op.name}">` : '<span style="font-size: 32px; color: var(--text-secondary);">?</span>'}
-                            </div>
-                            <div class="operator-build-info">
-                                <span style="font-family: 'Share Tech Mono', monospace; font-size: 10px; color: #39ff14;">TEAM SLOT ${index + 1}</span>
-                                <h3 style="color: ${elementColor};">${op.name.toUpperCase()}</h3>
-                                <span class="operator-build-role">${op.element} ${op.role} // ${op.tier} TIER</span>
-                            </div>
-                        </div>
-                        <div class="build-section">
-                            <div class="build-section-title>> WEAPONS</div>
-                            ${renderItems(build.weapons)}
-                        </div>
-                        <div class="build-section">
-                            <div class="build-section-title>> MODULES</div>
-                            ${renderItems(build.modules)}
-                        </div>
-                        <div class="build-section">
-                            <div class="build-section-title">> SKILLS</div>
-                            ${renderItems(build.skills)}
-                        </div>
-                    </div>
-                `;
-            }).join('');
-
-            modal.classList.add('active');
-            document.body.style.overflow = 'hidden';
-        }
-
-        function closeBuildsModal() {
-            const modal = document.getElementById('buildsModal');
-            modal.classList.remove('active');
-            document.body.style.overflow = '';
-        }
-
-        // Close modal on escape key
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                closeBuildsModal();
-            }
-        });
-
-        // Close modal on backdrop click
-        document.getElementById('buildsModal').addEventListener('click', (e) => {
-            if (e.target.id === 'buildsModal') {
-                closeBuildsModal();
-            }
-        });
-    </script>
+    <script src="js/main.js"></script>
 </body>
 </html>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..62795aa
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,735 @@
+        // Mobile Menu Toggle
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const navLinks = document.querySelector('.nav-links');
+
+        if (mobileMenuBtn) {
+            mobileMenuBtn.addEventListener('click', () => {
+                mobileMenuBtn.classList.toggle('active');
+                navLinks.classList.toggle('active');
+            });
+
+            // Close menu when clicking a link
+            document.querySelectorAll('.nav-links a').forEach(link => {
+                link.addEventListener('click', () => {
+                    mobileMenuBtn.classList.remove('active');
+                    navLinks.classList.remove('active');
+                });
+            });
+
+            // Close menu when clicking outside
+            document.addEventListener('click', (e) => {
+                if (!e.target.closest('.mobile-menu-btn') && !e.target.closest('.nav-links')) {
+                    mobileMenuBtn.classList.remove('active');
+                    navLinks.classList.remove('active');
+                }
+            });
+        }
+
+        // Operator data with images and stats
+        const operators = [
+            // SS TIER - Meta Defining
+            { id: 'laevatain', name: 'Laevatain', tier: 'SS', element: 'Heat', role: 'Striker', img: 'characters/Laevatain.png', cardImg: 'characters/laevatain_card.webp' },
+            { id: 'ardelia', name: 'Ardelia', tier: 'SS', element: 'Nature', role: 'Support', img: 'characters/Ardelia_Splash.webp', cardImg: 'characters/ardelia_card.webp', free: true },
+            { id: 'yvonne', name: 'Yvonne', tier: 'SS', element: 'Cryo', role: 'Caster', img: 'characters/Yvonne.png', cardImg: 'characters/yvonne_card.webp' },
+
+            // S TIER - Core Team Members
+            { id: 'last_rite', name: 'Last Rite', tier: 'S', element: 'Cryo', role: 'Striker', img: 'characters/Last_Rite_Splash.webp', cardImg: 'characters/lastrite_card.webp' },
+            { id: 'pogranichnik', name: 'Pogranichnik', tier: 'S', element: 'Physical', role: 'Vanguard', img: 'characters/Pogranichnik_Splash.webp', cardImg: 'characters/pog_card.webp' },
+            { id: 'antal', name: 'Antal', tier: 'S', element: 'Electric', role: 'Support', img: 'characters/Antal_Splash.webp', cardImg: 'characters/antel_card.webp', free: true },
+            { id: 'xaihi', name: 'Xaihi', tier: 'S', element: 'Cryo', role: 'Support', img: 'characters/Xaihi.png', cardImg: 'characters/xaihi_card.webp' },
+            { id: 'gilberta', name: 'Gilberta', tier: 'S', element: 'Nature', role: 'Support', img: 'characters/Gilberta.png', cardImg: 'characters/gilberta_card.webp' },
+            { id: 'lifeng', name: 'Lifeng', tier: 'S', element: 'Physical', role: 'Guard', img: 'characters/Lifeng.png', cardImg: 'characters/lifeng_card.webp' },
+
+            // A TIER - Strong but Replaceable
+            { id: 'endministrator', name: 'Endministrator', tier: 'A', element: 'Physical', role: 'Guard', img: 'characters/Endministrator.png', cardImg: 'characters/endministrator_card.webp' },
+            { id: 'wulfgard', name: 'Wulfgard', tier: 'A', element: 'Heat', role: 'Caster', img: 'characters/Wulfgard.png', cardImg: 'characters/wulfguard_card.webp' },
+            { id: 'perlica', name: 'Perlica', tier: 'A', element: 'Electric', role: 'Caster', img: 'characters/Perlica.png', cardImg: 'characters/perlica_card.webp' },
+            { id: 'avywenna', name: 'Avywenna', tier: 'A', element: 'Electric', role: 'Striker', img: 'characters/Avywenna.png', cardImg: 'characters/avywenna_card.webp' },
+            { id: 'akekuri', name: 'Akekuri', tier: 'A', element: 'Heat', role: 'Vanguard', img: 'characters/Akekuri_Splash.webp', cardImg: 'characters/akekuri_card.webp', free: true },
+            { id: 'chen_qianyu', name: 'Chen Qianyu', tier: 'A', element: 'Physical', role: 'Guard', img: 'characters/Chen_Qianyu.png', cardImg: 'characters/chen_qianyu_card.webp' },
+            { id: 'da_pan', name: 'Da Pan', tier: 'A', element: 'Physical', role: 'Striker', img: 'characters/Da_Pan.png', cardImg: 'characters/da_pan_card.webp' },
+            { id: 'alesh', name: 'Alesh', tier: 'A', element: 'Cryo', role: 'Vanguard', img: 'characters/Alesh_Splash.webp', cardImg: 'characters/alesh_card.webp', free: true },
+            { id: 'arclight', name: 'Arclight', tier: 'A', element: 'Electric', role: 'Vanguard', img: 'characters/Arclight.png', cardImg: 'characters/arclight_card.webp' },
+
+            // B TIER - Niche Picks
+            { id: 'ember', name: 'Ember', tier: 'B', element: 'Heat', role: 'Defender', img: 'characters/Ember.png', cardImg: 'characters/ember_card.webp' },
+            { id: 'snowshine', name: 'Snowshine', tier: 'B', element: 'Cryo', role: 'Defender', img: 'characters/Snowshine.png', cardImg: 'characters/snowshine_card.webp' },
+            { id: 'estella', name: 'Estella', tier: 'B', element: 'Cryo', role: 'Guard', img: 'characters/Estella_Splash.webp', cardImg: 'characters/estella_card.webp' },
+
+            // C TIER - Limited Usage (avoid)
+            { id: 'fluorite', name: 'Fluorite', tier: 'C', element: 'Nature', role: 'Caster', img: 'characters/Fluorite_Splash.webp', cardImg: 'characters/fluorite_card.webp' },
+            { id: 'catcher', name: 'Catcher', tier: 'C', element: 'Physical', role: 'Defender', img: 'characters/Catcher_Splash.webp', cardImg: 'characters/catcher_card.webp' },
+        ];
+
+        // Build data - weapons, modules, skills for each operator
+        const builds = {
+            laevatain: {
+                weapons: [
+                    { name: 'Crimson Lotus', priority: 'S', desc: 'Best in slot - maximizes Arts Burst damage' },
+                    { name: 'Inferno Blade', priority: 'A', desc: 'Alternative - higher base attack' },
+                    { name: 'Flame Edge', priority: 'B', desc: 'F2P option - solid performance' },
+                ],
+                modules: [
+                    { name: 'Burning Heart Module', priority: 'S', desc: 'Core damage module - increases Arts damage by 25%' },
+                    { name: 'Burst Enhancer', priority: 'A', desc: 'Arts Burst frequency boost' },
+                ],
+                skills: [
+                    { name: 'Skill: Twilight Ruin', priority: 'S', desc: 'Main damage dealer - massive AoE Arts Burst' },
+                    { name: 'Skill: Blaze Cascade', priority: 'A', desc: 'Single target burst mode' },
+                ]
+            },
+            ardelia: {
+                weapons: [
+                    { name: 'Nature\'s Grasp', priority: 'S', desc: 'Maximizes Susceptibility application' },
+                    { name: 'Vine Whip', priority: 'A', desc: 'Faster attack speed trade-off' },
+                ],
+                modules: [
+                    { name: 'Corrosion Module', priority: 'S', desc: 'Essential - enables melt combos' },
+                    { name: 'Support Core', priority: 'A', desc: 'Team utility boost' },
+                ],
+                skills: [
+                    { name: 'Skill: Entangling Roots', priority: 'S', desc: 'Main CC + Susceptibility' },
+                    { name: 'Skill: Nature\'s Blessing', priority: 'A', desc: 'Team buff mode' },
+                ]
+            },
+            yvonne: {
+                weapons: [
+                    { name: 'Frost Cannons', priority: 'S', desc: 'Best Cryo damage output' },
+                    { name: 'Ice Breaker', priority: 'A', desc: 'Higher shatter damage' },
+                ],
+                modules: [
+                    { name: 'Cryo Core', priority: 'S', desc: 'Freeze rate + damage boost' },
+                    { name: 'Precision Module', priority: 'A', desc: 'Crit damage increase' },
+                ],
+                skills: [
+                    { name: 'Skill: Absolute Zero', priority: 'S', desc: 'Main freeze + burst damage' },
+                    { name: 'Skill: Cryo Barrage', priority: 'A', desc: 'Sustained damage mode' },
+                ]
+            },
+            last_rite: {
+                weapons: [
+                    { name: 'Shatter Blade', priority: 'S', desc: 'Shatter combo main hand' },
+                    { name: 'Frost Edge', priority: 'A', desc: 'Higher freeze application' },
+                ],
+                modules: [
+                    { name: 'Shatter Core', priority: 'S', desc: 'Essential for shatter damage' },
+                    { name: 'Cryo Amp', priority: 'A', desc: 'Damage vs frozen enemies' },
+                ],
+                skills: [
+                    { name: 'Skill: Fracture Strike', priority: 'S', desc: 'Shatter burst damage' },
+                    { name: 'Skill: Glacial Fury', priority: 'A', desc: 'AoE freeze mode' },
+                ]
+            },
+            pogranichnik: {
+                weapons: [
+                    { name: 'Breach Hammer', priority: 'S', desc: 'Max defense shred' },
+                    { name: 'SP Generator', priority: 'A', desc: 'Team battery focus' },
+                ],
+                modules: [
+                    { name: 'Vanguard Core', priority: 'S', desc: 'SP generation boost' },
+                    { name: 'Breach Module', priority: 'A', desc: 'Defense reduction' },
+                ],
+                skills: [
+                    { name: 'Skill: Line Breaker', priority: 'S', desc: 'Main SP gen + Breach' },
+                    { name: 'Skill: Fortress', priority: 'A', desc: 'Defensive mode' },
+                ]
+            },
+            antal: {
+                weapons: [
+                    { name: 'Amplifier Rod', priority: 'S', desc: 'Best amp output' },
+                    { name: 'Support Staff', priority: 'A', desc: 'More utility focus' },
+                ],
+                modules: [
+                    { name: 'Heat Amp Core', priority: 'S', desc: 'Heat damage boost' },
+                    { name: 'Electric Link', priority: 'A', desc: 'Electric amp secondary' },
+                ],
+                skills: [
+                    { name: 'Skill: Dual Amplify', priority: 'S', desc: 'Heat + Electric amp' },
+                    { name: 'Skill: Heat Field', priority: 'A', desc: 'AoE Heat buff' },
+                ]
+            },
+            xaihi: {
+                weapons: [
+                    { name: 'Cryo Tome', priority: 'S', desc: 'Cryo amp + Arts amp combo' },
+                    { name: 'Frost Grimoire', priority: 'A', desc: 'Pure Cryo focus' },
+                ],
+                modules: [
+                    { name: 'Cryo Amplifier', priority: 'S', desc: 'Cryo damage boost' },
+                    { name: 'Arts Resonator', priority: 'A', desc: 'Arts damage amp' },
+                ],
+                skills: [
+                    { name: 'Skill: Winter\'s Grasp', priority: 'S', desc: 'Cryo amp + slow' },
+                    { name: 'Skill: Frost Armor', priority: 'A', desc: 'Team defensive buff' },
+                ]
+            },
+            gilberta: {
+                weapons: [
+                    { name: 'Gravity Well', priority: 'S', desc: 'Best crowd control' },
+                    { name: 'Pull Caster', priority: 'A', desc: 'Faster reposition' },
+                ],
+                modules: [
+                    { name: 'CC Module', priority: 'S', desc: 'Increased pull radius' },
+                    { name: 'Nature Core', priority: 'A', desc: 'Nature damage boost' },
+                ],
+                skills: [
+                    { name: 'Skill: Event Horizon', priority: 'S', desc: 'Main pull + CC' },
+                    { name: 'Skill: Singularity', priority: 'A', desc: 'Larger radius, longer CD' },
+                ]
+            },
+            lifeng: {
+                weapons: [
+                    { name: 'Physical Greatsword', priority: 'S', desc: 'Best Physical damage' },
+                    { name: 'Crusher', priority: 'A', desc: 'Higher impact damage' },
+                ],
+                modules: [
+                    { name: 'Physical Core', priority: 'S', desc: 'Susceptibility boost' },
+                    { name: 'DPS Module', priority: 'A', desc: 'Raw damage increase' },
+                ],
+                skills: [
+                    { name: 'Skill: Storm Blade', priority: 'S', desc: 'Main Physical DPS' },
+                    { name: 'Skill: Guardian', priority: 'A', desc: 'Defensive mode' },
+                ]
+            },
+            endministrator: {
+                weapons: [
+                    { name: 'Crystal Blade', priority: 'S', desc: 'Originium Crystal synergy' },
+                    { name: 'Admin Staff', priority: 'A', desc: 'Support focus' },
+                ],
+                modules: [
+                    { name: 'MC Module', priority: 'S', desc: 'Crystal generation boost' },
+                    { name: 'Physical Amp', priority: 'A', desc: 'Physical damage' },
+                ],
+                skills: [
+                    { name: 'Skill: Administration', priority: 'S', desc: 'Main DPS + crystals' },
+                    { name: 'Skill: Command', priority: 'A', desc: 'Team buff mode' },
+                ]
+            },
+            wulfgard: {
+                weapons: [
+                    { name: 'Combustion Cane', priority: 'S', desc: 'Best Combustion uptime' },
+                    { name: 'Fire Staff', priority: 'A', desc: 'Higher burst damage' },
+                ],
+                modules: [
+                    { name: 'Heat Core', priority: 'S', desc: 'Combustion damage boost' },
+                    { name: 'Burn Module', priority: 'A', desc: 'DoT increase' },
+                ],
+                skills: [
+                    { name: 'Skill: Inferno', priority: 'S', desc: 'Combustion application + damage' },
+                    { name: 'Skill: Wildfire', priority: 'A', desc: 'AoE spread mode' },
+                ]
+            },
+            perlica: {
+                weapons: [
+                    { name: 'Shock Baton', priority: 'S', desc: 'Electrification focus' },
+                    { name: 'Tesla Coil', priority: 'A', desc: 'Higher Electric damage' },
+                ],
+                modules: [
+                    { name: 'Electric Core', priority: 'S', desc: 'Electrification rate' },
+                    { name: 'Chain Module', priority: 'A', desc: 'Jump increase' },
+                ],
+                skills: [
+                    { name: 'Skill: Overload', priority: 'S', desc: 'Forces Electrification' },
+                    { name: 'Skill: Chain Lightning', priority: 'A', desc: 'AoE Electric damage' },
+                ]
+            },
+            avywenna: {
+                weapons: [
+                    { name: 'Voltage Blade', priority: 'S', desc: 'Best Electric DPS' },
+                    { name: 'Thunder Edge', priority: 'A', desc: 'Faster attack speed' },
+                ],
+                modules: [
+                    { name: 'Striker Core', priority: 'S', desc: 'Electric damage boost' },
+                    { name: 'Crit Module', priority: 'A', desc: 'Crit damage increase' },
+                ],
+                skills: [
+                    { name: 'Skill: Thunder Strike', priority: 'S', desc: 'Main Electric burst' },
+                    { name: 'Skill: Storm', priority: 'A', desc: 'Sustained DPS mode' },
+                ]
+            },
+            akekuri: {
+                weapons: [
+                    { name: 'SP Pistol', priority: 'S', desc: 'Max SP generation' },
+                    { name: 'Heat Dagger', priority: 'A', desc: 'More damage trade-off' },
+                ],
+                modules: [
+                    { name: 'Battery Module', priority: 'S', desc: 'Essential - team SP battery' },
+                    { name: 'Vanguard Core', priority: 'A', desc: 'Personal SP gen' },
+                ],
+                skills: [
+                    { name: 'Skill: Overcharge', priority: 'S', desc: 'Team SP generation' },
+                    { name: 'Skill: Heat Strike', priority: 'A', desc: 'Damage mode' },
+                ]
+            },
+            chen_qianyu: {
+                weapons: [
+                    { name: 'Vulnerable Blade', priority: 'S', desc: 'Max Vulnerable stacks' },
+                    { name: 'Physical Katana', priority: 'A', desc: 'Higher base damage' },
+                ],
+                modules: [
+                    { name: 'Vulnerable Core', priority: 'S', desc: 'Stack increase' },
+                    { name: 'Physical Amp', priority: 'A', desc: 'Damage boost' },
+                ],
+                skills: [
+                    { name: 'Skill: Vulnerable Strike', priority: 'S', desc: 'Stacks Vulnerable' },
+                    { name: 'Skill: Physical Flow', priority: 'A', desc: 'Sustained damage' },
+                ]
+            },
+            da_pan: {
+                weapons: [
+                    { name: 'Crusher Gauntlets', priority: 'S', desc: 'Best Crush damage' },
+                    { name: 'Impact Fists', priority: 'A', desc: 'Faster attack speed' },
+                ],
+                modules: [
+                    { name: 'Crush Module', priority: 'S', desc: 'Crush damage boost' },
+                    { name: 'Striker Core', priority: 'A', desc: 'Raw damage' },
+                ],
+                skills: [
+                    { name: 'Skill: Earthquake', priority: 'S', desc: 'Consumes Vulnerable' },
+                    { name: 'Skill: Ground Pound', priority: 'A', desc: 'AoE damage mode' },
+                ]
+            },
+            alesh: {
+                weapons: [
+                    { name: 'Solidification Staff', priority: 'S', desc: 'Solidification uptime' },
+                    { name: 'Frost Rod', priority: 'A', desc: 'More damage focus' },
+                ],
+                modules: [
+                    { name: 'SP Battery', priority: 'S', desc: 'Team SP generation' },
+                    { name: 'Cryo Core', priority: 'A', desc: 'Cryo utility' },
+                ],
+                skills: [
+                    { name: 'Skill: Solidify', priority: 'S', desc: 'SP gen + Cryo utility' },
+                    { name: 'Skill: Frost Shield', priority: 'A', desc: 'Defensive mode' },
+                ]
+            },
+            arclight: {
+                weapons: [
+                    { name: 'Electro Blade', priority: 'S', desc: 'Electrification + SP gen' },
+                    { name: 'Lightning Rod', priority: 'A', desc: 'Pure Electric focus' },
+                ],
+                modules: [
+                    { name: 'SP Module', priority: 'S', desc: 'Team SP battery' },
+                    { name: 'Electric Core', priority: 'A', desc: 'Electric damage' },
+                ],
+                skills: [
+                    { name: 'Skill: Arc Discharge', priority: 'S', desc: 'SP gen + Electric damage' },
+                    { name: 'Skill: Conduit', priority: 'A', desc: 'Pure SP gen mode' },
+                ]
+            },
+            ember: {
+                weapons: [
+                    { name: 'Healing Mace', priority: 'S', desc: 'Best healing output' },
+                    { name: 'Guard Shield', priority: 'A', desc: 'More defensive' },
+                ],
+                modules: [
+                    { name: 'Healer Core', priority: 'S', desc: 'Healing boost' },
+                    { name: 'Defender Module', priority: 'A', desc: 'Team survivability' },
+                ],
+                skills: [
+                    { name: 'Skill: Warmth', priority: 'S', desc: 'Main healing skill' },
+                    { name: 'Skill: Protect', priority: 'A', desc: 'Shield + heal' },
+                ]
+            },
+            snowshine: {
+                weapons: [
+                    { name: 'Frost Healer', priority: 'S', desc: 'Best Cryo support' },
+                    { name: 'Ice Shield', priority: 'A', desc: 'Defensive focus' },
+                ],
+                modules: [
+                    { name: 'Cryo Support', priority: 'S', desc: 'Freeze enablement' },
+                    { name: 'Healer Core', priority: 'A', desc: 'Healing boost' },
+                ],
+                skills: [
+                    { name: 'Skill: Blizzard Heal', priority: 'S', desc: 'Heal + freeze setup' },
+                    { name: 'Skill: Ice Block', priority: 'A', desc: 'Emergency protection' },
+                ]
+            },
+            estella: {
+                weapons: [
+                    { name: 'Frost Lance', priority: 'S', desc: 'Physical/Cryo hybrid' },
+                    { name: 'Crystal Blade', priority: 'A', desc: 'Physical focus' },
+                ],
+                modules: [
+                    { name: 'Hybrid Core', priority: 'S', desc: 'Dual element boost' },
+                    { name: 'Guard Module', priority: 'A', desc: 'Survivability boost' },
+                ],
+                skills: [
+                    { name: 'Skill: Crystal Storm', priority: 'S', desc: 'Hybrid damage' },
+                    { name: 'Skill: Frost Guard', priority: 'A', desc: 'Defensive mode' },
+                ]
+            },
+            fluorite: {
+                weapons: [
+                    { name: 'Nature Cane', priority: 'S', desc: 'Best available' },
+                    { name: 'Basic Staff', priority: 'B', desc: 'F2P option' },
+                ],
+                modules: [
+                    { name: 'Basic Module', priority: 'B', desc: 'Minimal improvement' },
+                ],
+                skills: [
+                    { name: 'Skill: Nature Touch', priority: 'B', desc: 'Weak support' },
+                ]
+            },
+            catcher: {
+                weapons: [
+                    { name: 'Shield Wall', priority: 'S', desc: 'Best defensive' },
+                    { name: 'Basic Shield', priority: 'B', desc: 'F2P option' },
+                ],
+                modules: [
+                    { name: 'Defender Core', priority: 'B', desc: 'Minimal boost' },
+                ],
+                skills: [
+                    { name: 'Skill: Catch', priority: 'B', desc: 'Weak CC' },
+                ]
+            },
+        };
+
+        // Synergy database - based on team compositions and elemental interactions
+        const synergies = {
+            // Laevatain (Heat DPS) - needs Combustion, Corrosion, Heat Amp
+            laevatain: ['ardelia', 'wulfgard', 'antal', 'akekuri', 'perlica', 'gilberta'],
+
+            // Ardelia (Nature Support) - best support, enables everything
+            ardelia: ['laevatain', 'perlica', 'avywenna', 'gilberta', 'wulfgard', 'antal'],
+
+            // Yvonne (Cryo DPS) - needs shatter, Cryo Amp, Vulnerable
+            yvonne: ['last_rite', 'xaihi', 'chen_qianyu', 'pogranichnik', 'alesh', 'snowshine'],
+
+            // Last Rite (Cryo DPS) - shatter combo with Yvonne
+            last_rite: ['yvonne', 'xaihi', 'chen_qianyu', 'pogranichnik', 'snowshine'],
+
+            // Xaihi (Cryo Support) - Cryo + Arts Amp
+            xaihi: ['yvonne', 'last_rite', 'snowshine', 'chen_qianyu', 'pogranichnik'],
+
+            // Gilberta (Nature Support) - crowd control, groups enemies
+            gilberta: ['ardelia', 'laevatain', 'avywenna', 'wulfgard', 'perlica'],
+
+            // Wulfgard (Heat Caster) - Combustion enabler
+            wulfgard: ['laevatain', 'ardelia', 'antal', 'akekuri', 'ember'],
+
+            // Antal (Electric Support) - Heat + Electric Amp, FREE
+            antal: ['laevatain', 'wulfgard', 'perlica', 'avywenna', 'arclight', 'ardelia'],
+
+            // Perlica (Electric Caster) - forces Electrification
+            perlica: ['avywenna', 'antal', 'arclight', 'ardelia', 'laevatain'],
+
+            // Avywenna (Electric Striker) - Electric carry
+            avywenna: ['perlica', 'antal', 'arclight', 'ardelia', 'gilberta'],
+
+            // Lifeng (Physical DPS) - Physical Susceptibility
+            lifeng: ['endministrator', 'chen_qianyu', 'pogranichnik', 'da_pan'],
+
+            // Endministrator (Physical MC) - Originium Crystals
+            endministrator: ['lifeng', 'chen_qianyu', 'pogranichnik', 'da_pan', 'alesh'],
+
+            // Chen Qianyu (Physical) - Vulnerable stacks
+            chen_qianyu: ['lifeng', 'endministrator', 'pogranichnik', 'da_pan', 'yvonne', 'last_rite'],
+
+            // Da Pan (Physical Striker) - Crush consumes Vulnerable
+            da_pan: ['chen_qianyu', 'lifeng', 'endministrator', 'pogranichnik'],
+
+            // Pogranichnik (Physical Vanguard) - Breach, SP gen
+            pogranichnik: ['chen_qianyu', 'lifeng', 'endministrator', 'da_pan', 'yvonne', 'last_rite'],
+
+            // Akekuri (Heat Vanguard) - SP gen, FREE
+            akekuri: ['laevatain', 'wulfgard', 'antal', 'ardelia'],
+
+            // Alesh (Cryo Vanguard) - SP gen with Solidification, FREE
+            alesh: ['yvonne', 'endministrator', 'xaihi', 'snowshine'],
+
+            // Arclight (Electric Vanguard) - SP gen with Electrification
+            arclight: ['avywenna', 'perlica', 'antal', 'ardelia'],
+
+            // Snowshine (Cryo Defender) - healer, enables shatter
+            snowshine: ['yvonne', 'last_rite', 'xaihi', 'alesh'],
+
+            // Ember (Heat Defender) - Physical team utility
+            ember: ['lifeng', 'chen_qianyu', 'endministrator'],
+
+            // Estella (Cryo Guard) - niche Physical/Cryo
+            estella: ['yvonne', 'lifeng', 'endministrator'],
+
+            // Fluorite (Nature Caster) - C tier, avoid
+            fluorite: ['yvonne', 'ardelia'],
+
+            // Catcher (Physical Defender) - C tier, avoid
+            catcher: ['lifeng', 'endministrator'],
+        };
+
+        // Synergy reasons with detailed explanations
+        const reasons = {
+            // Heat Team Synergies
+            laevatain_ardelia: 'Applies Susceptibility and Corrosion - massive damage multiplier for best DPS',
+            laevatain_wulfgard: 'Applies Combustion DoT + enables Heat Arts Bursts constantly',
+            laevatain_antal: 'Provides Heat Amp to boost damage even further - also buffs Electric',
+            laevatain_perlica: 'Melting Pot team - Electrification for maximum reaction chaos',
+            laevatain_akekuri: 'Infinite SP generation for constant skill spam',
+            laevatain_gilberta: 'Groups enemies together for Laevatain AoE devastation',
+            wulfgard_antal: 'Heat Amp boosts Wulfgard\'s Combustion DPS significantly',
+            wulfgard_akekuri: 'SP battery keeps Wulfgard applying Combustion constantly',
+
+            // Cryo Team Synergies
+            yvonne_last_rite: 'SHATTER COMBO - Yvonne freezes, Last Rite shatters for massive burst',
+            yvonne_xaihi: 'Core Cryo support - provides Cryo and Arts Amp doubling damage',
+            yvonne_chen_qianyu: 'Adds Vulnerable stacks - Physical+Cryo hybrid shatter potential',
+            yvonne_pogranichnik: 'Breach lowers enemy defense - all damage increased',
+            yvonne_alesh: 'SP generator synergizes with Solidification mechanics',
+            yvonne_snowshine: 'Cryo support enables consistent freezing and healing',
+            last_rite_xaihi: 'Cryo Amp makes Last Rite\'s damage output massive',
+            last_rite_pogranichnik: 'Breach + SP battery enables constant Cryo DPS',
+            xaihi_snowshine: 'Full Cryo team - Xaihi amps Snowshine\'s freeze potential',
+
+            // Electric Team Synergies
+            perlica_avywenna: 'Forces Electrification - essential for Electric carry damage',
+            perlica_antal: 'Electric Amp doubles down on Electrification damage',
+            perlica_arclight: 'SP gen + Electrification application - infinite loop',
+            avywenna_antal: 'Electric Amp makes Avywenna a team-carrying monster',
+            avywenna_arclight: 'Arclight feeds SP while Avywenna deals Electric damage',
+            antal_arclight: 'Consumes Electrification to generate SP for entire team',
+
+            // Physical Team Synergies
+            lifeng_chen_qianyu: 'Physical Susceptibility + Vulnerable stacks = huge damage',
+            lifeng_pogranichnik: 'Breach + Physical Susceptibility shreds enemy defense',
+            endministrator_alesh: 'SP gen with Solidification - great for Crystal shatter',
+            chen_qianyu_da_pan: 'Vulnerable stacks feed Da Pan\'s Crush for massive damage',
+            chen_qianyu_pogranichnik: 'Vulnerable + Breach = enemies take double Physical damage',
+            da_pan_pogranichnik: 'Breach enables Crush to hit for maximum damage',
+
+            // Universal Support Synergies
+            ardelia_perlica: 'Nature element triggers Electrification off Perlica\'s skills',
+            ardelia_avywenna: 'Corrosion + Susceptibility makes any element hit harder',
+            ardelia_gilberta: 'Double crowd control - groups AND debuffs enemies',
+            gilberta_perlica: 'Groups enemies for Electrification to spread efficiently',
+
+            // Free Unit Synergies
+            antal_laevatain: 'Best 4-star provides Heat Amp for best DPS',
+            antal_wulfgard: 'Heat Amp turns Wulfgard into a sub-DPS powerhouse',
+            antal_perlica: 'Electric Amp makes Perlica\'s Electrification hurt more',
+            akekuri_laevatain: 'FREE SP battery enables constant Laevatain Arts Bursts',
+            alesh_yvonne: 'FREE SP gen for Cryo teams - works with Solidification',
+        };
+
+        let selectedTeam = [];
+
+        function initOperatorSelect() {
+            const container = document.getElementById('operatorSelect');
+            container.innerHTML = operators.map(op => {
+                const imgSrc = op.cardImg || op.img;
+                const imgHtml = imgSrc
+                    ? `<div style="width:60px;height:60px;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;border-radius:8px;overflow:hidden;">
+                            <img src="${imgSrc}" alt="${op.name}" style="width:60px;height:60px;object-fit:contain;">
+                        </div>`
+                    : `<div style="width:60px;height:60px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;border-radius:8px;font-size:20px;color:var(--text-secondary);">?</div>`;
+                const freeBadge = op.free ? '<span style="font-size:8px;color:#39ff14;background:#000;padding:1px 4px;border-radius:3px;margin-left:4px;">FREE</span>' : '';
+                const elementColor = {
+                    'Heat': '#ff6b35',
+                    'Cryo': '#00d4ff',
+                    'Electric': '#a855f7',
+                    'Physical': '#f0f0f5',
+                    'Nature': '#22c55e',
+                }[op.element] || '#888';
+                return `
+                    <div class="select-option" data-id="${op.id}" onclick="toggleOperator('${op.id}')">
+                        ${imgHtml}
+                        <div class="name">
+                            <div style="font-size:9px;color:${elementColor};margin-bottom:2px;">${op.element} ${op.role}</div>
+                            <div style="font-size:11px;font-weight:500;">${op.name}</div>
+                            ${freeBadge}
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        function toggleOperator(id) {
+            const index = selectedTeam.indexOf(id);
+            if (index > -1) {
+                selectedTeam.splice(index, 1);
+            } else if (selectedTeam.length < 4) {
+                selectedTeam.push(id);
+            }
+            updateTeamUI();
+        }
+
+        function clearTeam() {
+            selectedTeam = [];
+            updateTeamUI();
+        }
+
+        function updateTeamUI() {
+            // Update operator selection
+            document.querySelectorAll('.select-option').forEach(el => {
+                el.classList.toggle('selected', selectedTeam.includes(el.dataset.id));
+            });
+
+            // Update slots
+            const slotsContainer = document.getElementById('teamSlots');
+            slotsContainer.innerHTML = '';
+            for (let i = 0; i < 4; i++) {
+                if (selectedTeam[i]) {
+                    const op = operators.find(o => o.id === selectedTeam[i]);
+                    const imgSrc = op.cardImg || op.img;
+                    if (op && imgSrc) {
+                        slotsContainer.innerHTML += `<div class="team-slot filled" style="background:var(--bg-dark);overflow:hidden;">
+                            <img src="${imgSrc}" alt="${op.name}" style="width:100%;height:100%;object-fit:contain;">
+                        </div>`;
+                    } else {
+                        slotsContainer.innerHTML += `<div class="team-slot filled" style="background:var(--bg-dark);display:flex;align-items:center;justify-content:center;">
+                            <span style="font-size:24px;color:var(--text-secondary);">${op ? op.name.charAt(0) : '?'}</span>
+                        </div>`;
+                    }
+                } else {
+                    slotsContainer.innerHTML += '<div class="team-slot">+</div>';
+                }
+            }
+
+            // Update suggestions
+            const panel = document.getElementById('suggestions');
+            const list = document.getElementById('suggestionsList');
+
+            if (selectedTeam.length === 0) {
+                panel.classList.remove('active');
+                return;
+            }
+
+            // Always show panel when operators are selected
+            panel.classList.add('active');
+
+            // Collect suggestions
+            const scores = {};
+            selectedTeam.forEach(id => {
+                const s = synergies[id];
+                if (s) {
+                    s.forEach(target => {
+                        if (!selectedTeam.includes(target)) {
+                            scores[target] = (scores[target] || 0) + 1;
+                        }
+                    });
+                }
+            });
+
+            const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]).slice(0, 3);
+
+            if (sorted.length === 0) {
+                list.innerHTML = '<p style="color:var(--text-secondary);font-size:13px;">No synergy data available for selected operators. Try adding a main DPS like Laevatain or Yvonne.</p>';
+            } else {
+                list.innerHTML = sorted.map(([id, score]) => {
+                    const op = operators.find(o => o.id === id);
+                    const reasonKey = selectedTeam[0] + '_' + id;
+                    const reason = reasons[reasonKey] || `${score} operator${score > 1 ? 's' : ''} in your selection synergize with this unit`;
+                    const imgSrc = op && (op.cardImg || op.img);
+                    const imgHtml = imgSrc
+                        ? `<div style="width:50px;height:50px;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;">
+                            <img src="${imgSrc}" alt="${op.name}" style="width:50px;height:50px;object-fit:contain;">
+                        </div>`
+                        : '<div style="width:50px;height:50px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:20px;color:var(--text-secondary);">?</div>';
+                    return `
+                        <div class="suggestion-item">
+                            ${imgHtml}
+                            <div class="suggestion-info">
+                                <h5>${op ? op.name.toUpperCase() : id} ${op && op.free ? '<span style="font-size:9px;color:#39ff14;background:#000;padding:2px 6px;border-radius:3px;">FREE</span>' : ''}</h5>
+                                <p>${reason}</p>
+                            </div>
+                        </div>
+                    `;
+                }).join('');
+            }
+        }
+
+        // Smooth scroll
+        document.querySelectorAll('.nav-links a').forEach(a => {
+            a.addEventListener('click', (e) => {
+                e.preventDefault();
+                const target = document.querySelector(a.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth' });
+                }
+            });
+        });
+
+        // Initialize
+        initOperatorSelect();
+
+        // Builds Modal Functions
+        function showTeamBuilds() {
+            if (selectedTeam.length === 0) {
+                alert('Please select at least one operator first!');
+                return;
+            }
+
+            const modal = document.getElementById('buildsModal');
+            const content = document.getElementById('buildsContent');
+
+            content.innerHTML = selectedTeam.map((id, index) => {
+                const op = operators.find(o => o.id === id);
+                const build = builds[id] || { weapons: [], modules: [], skills: [] };
+                const elementColor = {
+                    'Heat': '#ff6b35',
+                    'Cryo': '#00d4ff',
+                    'Electric': '#a855f7',
+                    'Physical': '#f0f0f5',
+                    'Nature': '#22c55e',
+                }[op.element] || '#888';
+
+                const renderItems = (items, type) => {
+                    if (!items || items.length === 0) return '<p style="color: var(--text-secondary); font-size: 12px;">No data available</p>';
+                    return items.map(item => `
+                        <div class="build-item">
+                            <span class="build-item-priority priority-${item.priority.toLowerCase()}">${item.priority}</span>
+                            <span class="build-item-name">${item.name}</span>
+                            <span class="build-item-desc">${item.desc}</span>
+                        </div>
+                    `).join('');
+                };
+
+                return `
+                    <div class="operator-build">
+                        <div class="operator-build-header">
+                            <div class="operator-build-avatar">
+                                ${op.cardImg ? `<img src="${op.cardImg}" alt="${op.name}">` : op.img ? `<img src="${op.img}" alt="${op.name}">` : '<span style="font-size: 32px; color: var(--text-secondary);">?</span>'}
+                            </div>
+                            <div class="operator-build-info">
+                                <span style="font-family: 'Share Tech Mono', monospace; font-size: 10px; color: #39ff14;">TEAM SLOT ${index + 1}</span>
+                                <h3 style="color: ${elementColor};">${op.name.toUpperCase()}</h3>
+                                <span class="operator-build-role">${op.element} ${op.role} // ${op.tier} TIER</span>
+                            </div>
+                        </div>
+                        <div class="build-section">
+                            <div class="build-section-title>> WEAPONS</div>
+                            ${renderItems(build.weapons)}
+                        </div>
+                        <div class="build-section">
+                            <div class="build-section-title>> MODULES</div>
+                            ${renderItems(build.modules)}
+                        </div>
+                        <div class="build-section">
+                            <div class="build-section-title">> SKILLS</div>
+                            ${renderItems(build.skills)}
+                        </div>
+                    </div>
+                `;
+            }).join('');
+
+            modal.classList.add('active');
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeBuildsModal() {
+            const modal = document.getElementById('buildsModal');
+            modal.classList.remove('active');
+            document.body.style.overflow = '';
+        }
+
+        // Close modal on escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                closeBuildsModal();
+            }
+        });
+
+        // Close modal on backdrop click
+        document.getElementById('buildsModal').addEventListener('click', (e) => {
+            if (e.target.id === 'buildsModal') {
+                closeBuildsModal();
+            }
+        });
diff --git a/partials/head.html b/partials/head.html
new file mode 100644
index 0000000..41f1e39
--- /dev/null
+++ b/partials/head.html
@@ -0,0 +1,6 @@
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ENDFIELD // Operator Showcase</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
diff --git a/partials/header.html b/partials/header.html
new file mode 100644
index 0000000..8e5ed0f
--- /dev/null
+++ b/partials/header.html
@@ -0,0 +1,13 @@
+    <!-- HUD Navigation -->
+    <nav class="hud-nav">
+        <div class="nav-logo">ENDFIELD</div>
+        <div class="nav-links">
+            <a href="#hero">Laevatain</a>
+            <a href="#yvonne">Yvonne</a>
+            <a href="#last-rite">Last Rite</a>
+            <a href="#snowshine">Snowshine</a>
+            <a href="#tier-list">Tier List</a>
+            <a href="#team-builder">Team Builder</a>
+            <a href="#game-guide">Game Guide</a>
+        </div>
+    </nav>
diff --git a/partials/hero.html b/partials/hero.html
new file mode 100644
index 0000000..7c6eb41
--- /dev/null
+++ b/partials/hero.html
@@ -0,0 +1,10 @@
+    <!-- Hero - Laevatain -->
+    <section class="hero" id="hero">
+        <img src="characters/Laevatain_Splash.png" alt="Laevatain" class="hero-character">
+        <div class="hero-content">
+            <div class="hero-badge">SS TIER // HEAT ELEMENT</div>
+            <h1><span class="outline">LAEVATAIN</span></h1>
+            <p>"Twilight of ruin!" - Best DPS in Arknights Endfield. Triggers Arts Bursts constantly for devastating damage.</p>
+            <div class="scroll-indicator">↓</div>
+        </div>
+    </section>