/* arcade.css - Estilos del minijuego Love Defender. Extraido de index.html */

    /* ============================================================
       --- ARCADE MULTIJUGADOR ASÍNCRONO ---
       ============================================================ */
    #arcadeCanvas { 
        z-index: 2000; 
        display: none; 
        background: rgba(0,0,0,0.85); 
        backdrop-filter: blur(4px); 
        cursor: crosshair !important; 
    }
    
    #arcadeUI, #arcadeExitBtn { 
        position: fixed; 
        z-index: 2002; 
        display: none; 
        font-family: 'Press Start 2P', cursive; 
        color: #fff;
    }
    
    #arcadeUI { 
        top: 0; 
        left: 0; 
        width: 100%; 
        padding: 20px; 
        box-sizing: border-box; 
        justify-content: space-between; 
        font-size: 10px; 
        pointer-events: none; 
    }
    
    #arcadeExitBtn { 
        top: 80px; 
        right: 20px; 
        background: rgba(255, 0, 0, 0.3); 
        border: 1px solid rgba(255,0,0,0.6); 
        padding: 10px 15px; 
        border-radius: 8px; 
        font-size: 9px; 
        transition: 0.3s; 
        pointer-events: auto; 
    }
    
    #arcadeExitBtn:hover { 
        background: rgba(255, 0, 0, 0.5); 
        transform: scale(1.05); 
    }
    
    .hud-item { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
    } 
    
    .hud-label { 
        color: #fff; 
        margin-bottom: 5px; 
        font-size: 7px; 
        opacity: 0.8;
    } 
    
    .hud-value { 
        font-size: 13px; 
        text-shadow: 2px 2px 0px rgba(0,0,0,0.8); 
    }

    #arcadeMenu, #arcadeMsgOverlay, #arcadeRankingOverlay { 
        position: fixed; 
        inset: 0; 
        background: rgba(0,2,10,0.95); 
        z-index: 2005; 
        display: none; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
    }
    
    .menu-title { 
        color: #ff4d6d; 
        font-family: 'Press Start 2P', cursive; 
        font-size: 28px; 
        margin-bottom: 30px; 
        text-shadow: 4px 4px 0px rgba(67, 97, 238, 0.8); 
        text-align: center;
    }
    
    .menu-btn { 
        background: rgba(0,0,0,0.5); 
        border: 2px solid #ff4d6d; 
        color: white; 
        padding: 15px; 
        margin: 10px; 
        border-radius: 8px; 
        font-family: 'Press Start 2P', cursive; 
        font-size: 12px; 
        transition: 0.3s; 
        width: 80%; 
        max-width: 300px;
    } 
    
    .menu-btn:hover { 
        background: #ff4d6d; 
        transform: scale(1.05); 
    }

    #arcadePlayerName { 
        font-family: 'Press Start 2P', cursive; 
        padding: 15px; 
        text-align: center; 
        margin-bottom: 20px; 
        background: rgba(0,0,0,0.8); 
        color: #00ffff; 
        border: 2px dashed #ff4d6d; 
        border-radius: 8px; 
        text-transform: uppercase; 
        width: 80%; 
        max-width: 250px; 
        font-size: 12px; 
        outline: none; 
    }
    
    #arcadePlayerName::placeholder { color: #888; } 
    #arcadePlayerName:focus { border-style: solid; box-shadow: 0 0 15px rgba(255,77,109,0.5); }

    #arcadeRankingList { 
        width: 90%; 
        max-width: 350px; 
        text-align: left; 
        color: #fff; 
        font-family: 'Press Start 2P', cursive; 
        font-size: 10px; 
        line-height: 2.5; 
        margin-bottom: 30px; 
        background: rgba(0,0,0,0.6); 
        padding: 20px; 
        border-radius: 10px; 
        border: 1px solid #00aaff; 
        box-shadow: 0 0 20px rgba(0, 170, 255, 0.2); 
    }
    
    .ranking-row { 
        display: flex; 
        justify-content: space-between; 
        border-bottom: 1px dashed rgba(255,255,255,0.2); 
        margin-bottom: 5px; 
        padding-bottom: 5px; 
    }
    
    .ranking-name { color: #ffdf73; } 
    .ranking-score { color: #00ffff; }