.servers-section {position: relative;padding: 6rem 1rem;background: #0a0612;overflow: hidden;min-height: 100vh;display: flex;flex-direction: column;justify-content: center;}.servers-title {text-align: center;margin-bottom: 3rem;position: relative;z-index: 5;}.servers-title h2 {font-size: 4rem;color: #6c3dff;text-transform: uppercase;text-shadow: 0 0 20px rgba(108, 61, 255, 0.5);position: relative;display: inline-block;}.servers-title h2::after {content: '';position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 100px;height: 3px;background: linear-gradient(90deg, #6c3dff, #ff4da6);border-radius: 2px;}.total-online {text-align: center;margin: 2rem 0 4rem;position: relative;z-index: 5;}.total-online h3 {font-size: 2.2rem;color: #00ff88;text-shadow: 0 0 25px rgba(0, 255, 136, 0.4);position: relative;display: inline-block;padding: 1rem 2rem;background: rgba(16, 10, 32, 0.6);border-radius: 50px;border: 2px solid #6c3dff;box-shadow:0 0 30px rgba(108, 61, 255, 0.3),inset 0 0 15px rgba(108, 61, 255, 0.2);animation: online-pulse 2s ease-in-out infinite;font-family: 'Courier New', monospace;}@keyframes online-pulse {0%, 100% { transform: scale(1); }50% { transform: scale(1.05); }}.online-chart {width: 300px;height: 80px;margin: 1rem auto 0;background: rgba(16, 10, 32, 0.5);border-radius: 10px;position: relative;overflow: hidden;border: 1px solid rgba(108, 61, 255, 0.3);}.chart-line {fill: none;stroke: #00ff88;stroke-width: 2;filter: drop-shadow(0 0 5px #00ff88);}.servers-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));gap: 2rem;max-width: 1600px;margin: 0 auto;padding: 2rem;}.server-card {position: relative;background: rgba(16, 10, 32, 0.8);border-radius: 16px;padding: 2rem;transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);cursor: pointer;overflow: hidden;border: 1px solid rgba(108, 61, 255, 0.3);opacity: 0;transform: translateY(30px);display: flex;flex-direction: column;height: 100%;}.server-card.visible {opacity: 1;transform: translateY(0);}.server-card:hover {transform: translateY(-10px);border-color: #6c3dff;box-shadow: 0 0 30px rgba(108, 61, 255, 0.4);}.server-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, #6c3dff, #ff4da6);transform: scaleX(0);transform-origin: left;transition: transform 0.4s ease;}.server-card:hover::before {transform: scaleX(1);}.server-header {display: flex;align-items: center;margin-bottom: 1.5rem;}.server-icon {width: 60px;height: 60px;border-radius: 12px;background: rgba(108, 61, 255, 0.2);display: flex;align-items: center;justify-content: center;margin-right: 1.5rem;font-size: 1.8rem;color: #6c3dff;border: 1px solid rgba(108, 61, 255, 0.3);}.server-title {flex: 1;}.game-title {font-size: 1.8rem;color: #fff;margin-bottom: 0.5rem;text-shadow: 0 0 10px rgba(108, 61, 255, 0.5);}.server-status {display: flex;align-items: center;gap: 0.8rem;}.pulse-dot {width: 12px;height: 12px;background: #00ff88;border-radius: 50%;box-shadow: 0 0 15px #00ff88;animation: pulse 1.5s infinite;}.pulse-dot.red {background: #ff3b3b;box-shadow: 0 0 15px #ff3b3b;animation: none;}.pulse-dot.orange {background: #ffa500;box-shadow: 0 0 15px #ffa500;animation: none;}.pulse-dot.green {background: #00ff88;box-shadow: 0 0 15px #00ff88;}.online-count {font-family: 'Orbitron', sans-serif;font-size: 1.2rem;color: #00ff88;}.server-content {flex: 1;display: flex;flex-direction: column;}.game-meta {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-bottom: 1.5rem;}.meta-item {background: rgba(108, 61, 255, 0.2);padding: 0.4rem 0.8rem;border-radius: 20px;font-size: 0.85rem;color: #b3a1ff;border: 1px solid rgba(108, 61, 255, 0.3);}.server-description {color: #aaa;font-size: 1rem;line-height: 1.6;margin-bottom: 1.5rem;flex: 1;}.server-footer {display: flex;justify-content: space-between;align-items: center;margin-top: auto;}.server-actions {display: flex;gap: 1rem;}.server-btn {padding: 0.6rem 1.2rem;background: rgba(108, 61, 255, 0.2);border: 1px solid rgba(108, 61, 255, 0.3);border-radius: 6px;color: #b3a1ff;text-decoration: none;font-size: 0.9rem;transition: all 0.3s ease;display: flex;align-items: center;gap: 0.5rem;}.server-btn:hover {background: rgba(108, 61, 255, 0.4);color: #fff;}.server-btn.primary {background: linear-gradient(45deg, #6c3dff, #a84dff);color: white;}.server-btn.primary:hover {box-shadow: 0 0 15px rgba(108, 61, 255, 0.5);}.server-glow {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient( circle at center,rgba(108, 61, 255, 0.1),transparent 70%);opacity: 0;transition: opacity 0.3s ease;z-index: -1;}.server-card:hover .server-glow {opacity: 1;}@keyframes pulse {0% { opacity: 0.6; transform: scale(0.95); }50% { opacity: 1; transform: scale(1.1); }100% { opacity: 0.6; transform: scale(0.95); }}.grid-background {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;pointer-events: none;}.circuit-pattern {position: absolute;width: 100%;height: 100%;background-image:linear-gradient(rgba(108, 61, 255, 0.05) 1px, transparent 1px),linear-gradient(90deg, rgba(108, 61, 255, 0.05) 1px, transparent 1px);background-size: 40px 40px;}@media (max-width: 1200px) {.servers-grid {grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));}}@media (max-width: 992px) {.servers-title h2 {font-size: 3rem;}.total-online h3 {font-size: 1.8rem;}}@media (max-width: 768px) {.servers-grid {grid-template-columns: 1fr;padding: 1rem;}.servers-title h2 {font-size: 2.5rem;}.total-online h3 {font-size: 1.6rem;padding: 0.8rem 1.5rem;}.server-card {padding: 1.5rem;}.server-header {flex-direction: column;align-items: flex-start;}.server-icon {margin-right: 0;margin-bottom: 1rem;}.server-footer {flex-direction: column;gap: 1rem;align-items: flex-start;}.server-actions {width: 100%;justify-content: space-between;}}@media (max-width: 480px) {.servers-section {padding: 3rem 1rem;}}