* { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    background-color: #050505; color: #ffffff;
    font-family: 'VT323', monospace; 
    display: flex; justify-content: center; align-items: center; 
    height: 100vh; overflow: hidden;
    background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                      linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.05));
    background-size: 100% 4px, 3px 100%;
}

.glitch { color: #ffffd1; text-shadow: 2px 0px 0px #00ffff, -2px 0px 0px #ff00ff; letter-spacing: 2px; margin: 0; }

/* --- CONTROLE DE TELAS --- */
.screen { display: none; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; }
.screen.active { display: flex; }

.hidden { display: none !important; }

/* --- PAINÉIS GERAIS --- */
.panel {
    background-color: #111; border: 2px solid #333; padding: 30px; border-radius: 10px;
    display: flex; flex-direction: column; box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
}

.text-center { text-align: center; }

/* --- INPUTS E BOTÕES --- */
input { background: #000; color: #0DFF72; border: 1px solid #444; padding: 15px; font-family: 'VT323', monospace; font-size: 24px; outline: none; margin-bottom: 10px; width: 100%; }
.button-group { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

.btn-glitch { background: #222; color: #ffffd1; border: 2px solid #FF0D72; padding: 15px; font-family: 'VT323', monospace; font-size: 28px; cursor: pointer; transition: 0.2s; text-transform: uppercase; }
.btn-glitch:hover { background: #FF0D72; color: #000; }

.btn-secondary { background: transparent; color: #888; border: none; font-family: 'VT323', monospace; font-size: 20px; cursor: pointer; }
.btn-secondary:hover { color: #fff; }

.btn-small { background: #444; color: #fff; border: none; cursor: pointer; padding: 5px 15px; font-family: 'VT323'; font-size: 20px; }
.btn-small.invite { background: #0DFF72; color: #000; }

/* --- TELAS DE LOGIN E LOBBY --- */
.auth-container { width: 90%; max-width: 500px; text-align: center; }
.title-huge { font-size: clamp(60px, 8vw, 80px); margin-bottom: 30px; }

.lobby-container { width: 95%; max-width: 900px; display: flex; flex-direction: column; gap: 30px; }
.lobby-header { display: flex; justify-content: space-between; font-size: clamp(20px, 3vw, 32px); border-bottom: 2px solid #333; padding-bottom: 10px; }
.lobby-body { display: flex; gap: 30px; flex-wrap: wrap; }
.menu-options { flex: 1; min-width: 300px; justify-content: center; gap: 20px; }
.friends-panel { flex: 1; min-width: 300px; }
.friend-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.friend-list li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; padding: 10px 0; font-size: 24px; }
.search-box { display: flex; gap: 10px; margin-bottom: 20px; }

/* --- TELA DO JOGO (ARCADE CABINET CORRIGIDO PRA NÃO CORTAR) --- */
.arcade-cabinet {
    width: 100%; max-width: 1000px; 
    height: 100vh; max-height: 800px; /* Garante que nunca passa do tamanho da tela */
    display: flex; flex-direction: column; gap: 2vh;
    padding: 2vh 0;
}

.game-header {
    display: flex; justify-content: flex-end; gap: 50px; 
    font-size: clamp(24px, 4vh, 32px); padding: 0 40px;
}

.game-board-area {
    display: flex; justify-content: space-between; 
    flex: 1; padding: 0 40px; min-height: 0; /* Ajuda o flexbox a encolher */
}

/* Jogador Local */
.local-player-section { display: flex; flex-direction: column; align-items: flex-start; width: auto;}
.player-title { font-size: clamp(40px, 6vh, 64px); margin-bottom: 1vh; }

.main-canvas-container {
    background-color: #111; border: 4px solid #444; border-radius: 8px;
    height: 55vh; max-height: 508px; /* Altura responsiva baseada na tela */
    aspect-ratio: 308 / 508; /* Trava a proporção retangular do Tetris */
    display: flex; justify-content: center; align-items: center;
    box-shadow: inset 0 0 40px #000;
    overflow: hidden;
}

/* Faz o canvas JS esticar pro tamanho do container sem bugar */
#local-canvas { width: 100%; height: 100%; object-fit: contain; }

.stats-panel {
    display: flex; justify-content: space-between;
    width: 100%; margin-top: 2vh;
    background-color: #111; border: 2px solid #333; padding: 1.5vh 15px; border-radius: 8px;
}
.stat-box { display: flex; flex-direction: column; align-items: center; }
.stat-label { font-size: clamp(14px, 2vh, 18px); margin-bottom: 5px; }
.stat-value { font-size: clamp(24px, 4vh, 36px); }

/* Oponentes */
.opponents-section {
    display: flex; flex-direction: column; gap: 2vh; width: auto;
    justify-content: flex-start; align-items: flex-end; position: relative;
}

.opponent-card { display: flex; align-items: center; gap: 15px; width: 100%; justify-content: flex-end; }
.opponent-card h3 { font-size: clamp(18px, 2.5vh, 24px); text-align: right; margin: 0; width: 80px; }

.small-canvas-container {
    background-color: #111; border: 2px solid #444; border-radius: 5px;
    height: 18vh; max-height: 154px; /* Altura responsiva */
    aspect-ratio: 94 / 154; /* Trava a proporção */
    box-shadow: inset 0 0 15px #000;
    overflow: hidden;
}

.opp-canvas { width: 100%; height: 100%; object-fit: contain; }

.opp-stats { display: flex; flex-direction: column; width: 80px; text-align: left; }
.opp-stats .stat-value { font-size: clamp(20px, 3vh, 28px); }

/* Botão de Abandonar fixo lá embaixo sem vazar da tela */
.action-area { margin-top: auto; width: 100%; display: flex; justify-content: flex-end; }
.btn-abandonar { background: #333; color: #ffffd1; border: 2px solid #555; padding: 1.5vh 30px; font-family: 'VT323'; font-size: clamp(20px, 3vh, 28px); cursor: pointer; border-radius: 20px; }
.btn-abandonar:hover { background: #ff0000; }

/* --- MODAIS --- */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 9999; justify-content: center; align-items: center; }
.modal-overlay.active { display: flex; }
.modal-buttons { display: flex; gap: 30px; justify-content: center; margin-top: 25px; }