@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@500;600;700&display=swap');

body { margin: 0; font-family: 'Rajdhani', sans-serif; background-color: #050a12; color: #ffffff; text-align: center; background-image: radial-gradient(#111b2b 1px, transparent 1px); background-size: 25px 25px; min-height: 100vh; display: flex; flex-direction: column; }

/* LAYOUT E LOBBY */
.main-layout { display: flex; flex: 1; max-width: 1600px; width: 100%; margin: 0 auto; position: relative; }
.conteudo-principal { flex: 1; padding: 20px; box-sizing: border-box; }

.lobby-sidebar { width: 340px; background: rgba(10, 15, 24, 0.95); border-left: 2px solid #1a2a40; padding: 20px; box-sizing: border-box; text-align: left; display: flex; flex-direction: column; gap: 20px; }
.lobby-section { background: #050a12; border: 1px solid #1a2a40; border-radius: 8px; padding: 15px; flex: 1; overflow-y: auto; overflow-x: hidden; max-height: 45vh; }
.lobby-section::-webkit-scrollbar { width: 6px; }
.lobby-section::-webkit-scrollbar-track { background: #050a12; }
.lobby-section::-webkit-scrollbar-thumb { background: #1a2a40; border-radius: 3px; }
.lobby-section::-webkit-scrollbar-thumb:hover { background: #00f3ff; }

.lobby-section h4 { font-family: 'Orbitron', sans-serif; color: #00f3ff; margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid #1a2a40; padding-bottom: 8px; font-size: 0.9em; letter-spacing: 1px; display: flex; align-items: center; gap: 8px;}

/* JOGADORES NO LOBBY */
.user-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 5px; border-bottom: 1px solid rgba(26, 42, 64, 0.5); font-size: 0.95em; }
.user-item:last-child { border-bottom: none; }
.user-info-wrapper { display: flex; align-items: center; gap: 10px; flex: 1; overflow: hidden; }
.user-text-info { display: flex; flex-direction: column; }
.user-status-game { font-size: 0.75em; color: #7ab4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

/* STATUS LEDS */
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #999; }
.status-dot.online { background: #00ff66; box-shadow: 0 0 6px #00ff66; }
.status-dot.offline { background: #ff003c; box-shadow: 0 0 6px #ff003c; }
.avatar-lobby { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #1a2a40; object-fit: cover; flex-shrink: 0; }

.user-item > div:last-child { display: flex; align-items: center; gap: 6px; }
.btn-desafiar { background: transparent; color: #00f3ff; border: 1px solid #00f3ff; padding: 4px 8px; font-family: 'Orbitron', sans-serif; font-size: 0.65em; font-weight: bold; border-radius: 4px; cursor: pointer; transition: 0.2s; }
.btn-desafiar:hover { background: #00f3ff; color: #000; box-shadow: 0 0 8px rgba(0, 243, 255, 0.6); }
.btn-chat-amigo { background: transparent; color: #00ff66; border: 1px solid #00ff66; padding: 4px 8px; font-family: 'Orbitron', sans-serif; font-size: 0.65em; font-weight: bold; border-radius: 4px; cursor: pointer; transition: 0.2s; }
.btn-chat-amigo:hover { background: #00ff66; color: #000; box-shadow: 0 0 8px rgba(0, 255, 102, 0.6); }
.btn-add-amigo { background: transparent; color: #7ab4ff; border: none; font-size: 1.2em; cursor: pointer; padding: 0; transition: 0.2s; }
.btn-add-amigo:hover { color: #00ff66; transform: scale(1.1); }

/* HEADER E WIDGET */
header { padding: 40px 20px 20px; position: relative; border-bottom: 1px solid #1a2a40; margin-bottom: 30px; }
h1 { font-family: 'Orbitron', sans-serif; font-size: 4em; margin: 0; color: #00f3ff; text-shadow: 0 0 15px rgba(0, 243, 255, 0.4); letter-spacing: 2px; }
p#subtitulo { font-size: 1.3em; color: #7ab4ff; margin-top: 5px; font-family: 'Orbitron', sans-serif; }

.user-widget { position: absolute; top: 30px; right: 20px; display: flex; align-items: center; gap: 10px; background: #0a0f18; border: 2px solid #00f3ff; padding: 5px 15px 5px 5px; border-radius: 30px; cursor: pointer; transition: 0.3s; z-index: 100; }
.user-widget:hover { background: #111b2b; box-shadow: 0 0 10px rgba(0, 243, 255, 0.4); }
.user-widget img { width: 35px; height: 35px; border-radius: 50%; border: 1px solid #00f3ff; object-fit: cover; }
.user-widget span { font-family: 'Orbitron', sans-serif; color: #e0e6ed; font-size: 0.9em; font-weight: bold; }

/* ABAS E GRIDS */
.nav-abas { display: flex; justify-content: center; gap: 15px; margin-top: 20px; flex-wrap: wrap; }
.btn-aba { background: #0a0f18; color: #7ab4ff; border: 2px solid #1a2a40; padding: 12px 25px; font-family: 'Orbitron', sans-serif; font-size: 1em; border-radius: 8px; cursor: pointer; transition: 0.3s; }
.btn-aba.ativo, .btn-aba:hover { background: #00f3ff; color: #000; border-color: #00f3ff; box-shadow: 0 0 15px rgba(0, 243, 255, 0.4); }
#btn-voltar { background: #ff003c; color: #fff; border: none; padding: 10px 20px; font-family: 'Orbitron', sans-serif; border-radius: 8px; cursor: pointer; margin-top: 15px; }

.grid-consoles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
.console-card { background: linear-gradient(145deg, #111b2b, #0a0f18); padding: 40px 20px; border-radius: 12px; border: 2px solid #1a2a40; cursor: pointer; transition: 0.3s; text-align: center; }
.console-card:hover { border-color: #00f3ff; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 243, 255, 0.2); }
.console-card h3 { font-family: 'Orbitron', sans-serif; color: #fff; margin: 0; font-size: 1.4em; }

.grid-jogos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
.game-card { background: #0a0f18; border: 1px solid #1a2a40; border-radius: 8px; overflow: hidden; cursor: pointer; transition: 0.3s; text-align: center; }
.game-card:hover { border-color: #00f3ff; transform: scale(1.05); }
.game-card img { width: 100%; height: 250px; object-fit: cover; }
.game-card h3 { font-size: 1.1em; padding: 10px; margin: 0; color: #e0e6ed; }

/* FILTROS */
#filtros-container { max-width: 1200px; margin: 0 auto 30px; }
#input-pesquisa { width: 100%; max-width: 400px; padding: 12px; border-radius: 8px; border: 1px solid #00f3ff; background: #0a0f18; color: #fff; font-size: 1.1em; margin-bottom: 20px; }
#filtro-alfabeto { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.btn-letra { background: #111b2b; border: 1px solid #1a2a40; color: #7ab4ff; padding: 8px 12px; cursor: pointer; border-radius: 4px; }
.btn-letra.ativo, .btn-letra:hover { background: #00f3ff; color: #000; }

/* MODAIS E CHAT */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; justify-content: center; align-items: center; z-index: 9999; }
.modal-content { background: #0a0f18; border: 2px solid #00f3ff; padding: 30px; border-radius: 12px; width: 320px; text-align: center; box-shadow: 0 0 20px rgba(0, 243, 255, 0.4); }
.modal-content button.btn-acao { width: 100%; background: #111b2b; color: #fff; border: 1px solid #1a2a40; padding: 12px; margin-top: 10px; border-radius: 8px; cursor: pointer; font-family: 'Orbitron'; font-weight: bold; transition: 0.2s; }
.modal-content button.btn-acao:hover { background: #00f3ff; color: #000; }

.auth-container { max-width: 450px; margin: 20px auto; background: #0a0f18; border: 2px solid #1a2a40; padding: 30px; border-radius: 12px; text-align: left; }
.auth-input { width: 100%; padding: 12px; margin-bottom: 15px; background: #050a12; border: 1px solid #1a2a40; color: #fff; border-radius: 6px; box-sizing: border-box; }
.auth-container label { display: block; margin-bottom: 5px; color: #7ab4ff; }

.chat-window { position: fixed; bottom: 20px; right: 370px; width: 300px; background: #0a0f18; border: 2px solid #00f3ff; border-radius: 8px; z-index: 9998; display: none; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
.chat-header { background: #111b2b; padding: 10px 15px; border-bottom: 1px solid #00f3ff; display: flex; justify-content: space-between; align-items: center; border-radius: 6px 6px 0 0; }
.chat-header h4 { margin: 0; color: #00f3ff; font-family: 'Orbitron', sans-serif; font-size: 1em; }
.btn-close-chat { background: transparent; border: none; color: #ff003c; cursor: pointer; font-weight: bold; font-size: 1.2em; }
.chat-messages { height: 250px; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 0.9em; }
.chat-msg { background: #1a2a40; padding: 8px 12px; border-radius: 8px; width: fit-content; max-width: 85%; word-wrap: break-word; }
.chat-msg.mine { background: #005bb5; color: #fff; align-self: flex-end; }
.chat-input-area { display: flex; padding: 10px; border-top: 1px solid #1a2a40; }
.chat-input-area input { flex: 1; background: #050a12; border: 1px solid #1a2a40; color: #fff; padding: 8px; border-radius: 4px; outline: none; }
.chat-input-area button { background: #00f3ff; border: none; color: #000; font-weight: bold; cursor: pointer; padding: 8px 15px; margin-left: 5px; border-radius: 4px; }

/* RANKING */
.tabela-ranking { width: 100%; max-width: 900px; margin: 0 auto; border-collapse: collapse; text-align: left; background: #0a0f18; border-radius: 12px; overflow: hidden; border: 1px solid #1a2a40; }
.tabela-ranking th { background: #111b2b; color: #00f3ff; padding: 15px; font-family: 'Orbitron', sans-serif; border-bottom: 2px solid #00f3ff; }
.tabela-ranking td { padding: 15px; border-bottom: 1px solid #1a2a40; vertical-align: middle; }
.avatar-ranking { width: 35px; height: 35px; border-radius: 50%; vertical-align: middle; margin-right: 10px; border: 1px solid #00f3ff; object-fit: cover;}

/* TV CRT EMULADOR */
#tela-emulador { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%); z-index: 10000; display: none; flex-direction: column; align-items: center; justify-content: center; }
#btn-fechar-jogo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(255, 0, 60, 0.8); color: #fff; border: 2px solid #ff003c; padding: 10px 30px; font-family: 'Orbitron', sans-serif; font-size: 1.2em; border-radius: 30px; cursor: pointer; z-index: 10001; transition: 0.3s; box-shadow: 0 0 10px rgba(255, 0, 60, 0.5); }
#btn-fechar-jogo:hover { background: #ff003c; box-shadow: 0 0 20px #ff003c; transform: translateX(-50%) scale(1.05); }

#emulator-container { width: 800px; height: 600px; max-width: 95vw; max-height: 80vh; background: #000; border: 25px solid #0a0a0a; border-radius: 40px; box-shadow: 0 20px 50px rgba(0,0,0,0.9), inset 0 0 20px rgba(255,255,255,0.05), 0 0 0 5px #1a1a1a; position: relative; overflow: hidden; }
#emulator-container::after { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); z-index: 2; background-size: 100% 3px, 6px 100%; pointer-events: none; box-shadow: inset 0 0 50px rgba(0,0,0,0.8); }
#game { width: 100%; height: 100%; z-index: 1; }

/* ==================================================== */
/* ====== PLACAR DE VITÓRIAS (VS) FIGHTCADE STYLE ===== */
/* ==================================================== */
.vs-bar { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 30px; background: rgba(5, 10, 18, 0.9); border: 2px solid #00f3ff; padding: 10px 40px; border-radius: 50px; z-index: 10005; box-shadow: 0 10px 30px rgba(0,0,0,0.9), 0 0 15px rgba(0, 243, 255, 0.5); }
.vs-player { display: flex; align-items: center; gap: 15px; }
.vs-avatar { width: 50px; height: 50px; border-radius: 50%; border: 2px solid #00f3ff; object-fit: cover; box-shadow: 0 0 10px rgba(0,243,255,0.5); }
.vs-avatar.p2 { border-color: #ff003c; box-shadow: 0 0 10px rgba(255,0,60,0.5); }
.vs-details { display: flex; flex-direction: column; text-align: center; }
.vs-name { font-family: 'Orbitron', sans-serif; font-size: 1.1em; color: #fff; text-transform: uppercase; letter-spacing: 1px; }
.vs-score { font-family: 'Orbitron', sans-serif; font-size: 2.2em; color: #00ff66; font-weight: bold; line-height: 1; text-shadow: 0 0 10px rgba(0,255,102,0.5); }
.vs-score.p2 { color: #ff003c; text-shadow: 0 0 10px rgba(255,0,60,0.5); }
.vs-center { font-family: 'Orbitron', sans-serif; font-size: 1.8em; color: #ffd700; font-style: italic; text-shadow: 0 0 15px rgba(255, 215, 0, 0.6); font-weight: 900; }